@jaimevalasek/aioson 1.7.2 → 1.9.0

package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md

@@ -1,307 +1,307 @@
-# Websites — Glassmorphism UI
-
-Landing pages and marketing sites. The gradient substrate rules remain: no glass without gradient.
-
----
-
-## Navigation (website)
-
-Glass sticky navigation bar. The signature behavior is becoming more opaque as the user scrolls.
-
-```
-Structure:
-  position: sticky / fixed
-  top: 0
-  width: 100%
-  height: var(--nav-height-web)   /* 68px */
-  background: var(--glass-bg)
-  backdrop-filter: var(--glass-blur-lg)
-  border-bottom: 1px solid var(--glass-border)
-  z-index: 100
-
-  Layout: max-width container (1280px), centered, flex align-center
-    Left: logo (40px height) + product name (text-base weight-semibold)
-    Center: nav links (text-sm weight-medium text-secondary, hover text-heading)
-    Right: CTA button (primary gradient, height control-lg)
-
-Scroll behavior (JS):
-  At scroll > 20px: background → var(--glass-bg-hover) via transition-glass
-  At scroll > 80px: background → var(--glass-bg-active)
-```
-
-Mobile navigation:
-```
-Hamburger trigger: glass icon button (right of logo)
-Menu: full-viewport overlay
-  background: var(--glass-bg-active)
-  backdrop-filter: var(--glass-blur-xl)
-  position: fixed, inset: 0
-  flex-col, align-center, justify-center, gap-8
-  Nav links: text-2xl weight-semibold
-  CTA: primary button
-  Close: top-right ghost icon button
-Animation: fade + scale-materialize 300ms
-```
-
----
-
-## Hero Patterns (choose one per landing)
-
-### A — Aurora Hero
-
-Best for: product launches, crypto, modern SaaS, fintech marketing.
-
-```
-Layout: full-viewport (min-height: 100vh)
-Background: aurora gradient (mesh of 3-4 desaturated colors)
-  gradient: radial-gradient or conic-gradient mesh — violet, blue, pink, teal tones
-  Optional: animated color shift (hue rotation 0→20deg, 8s ease-in-out infinite alternate)
-
-Decorative orbs (optional, enhance the aurora):
-  3-4 gradient blobs, position: absolute, z-index: 0
-  Size: 200-400px, border-radius: 50%
-  filter: blur(80px) — extreme blur to look like soft ambient light
-  opacity: 0.35-0.50
-  Colors: use accent, accent-secondary, and a pink/teal complementary
-
-Content (z-index: 1, centered):
-  Eyebrow label: glass chip (badge style) — "New: Feature X →"
-  Headline: text-5xl weight-bold text-heading, tracking -0.03em
-    Optional: gradient text on key words (accent-gradient)
-  Subtitle: text-lg text-secondary, max-width 520px, centered
-  CTA row: primary gradient button + ghost "Learn more" link
-  Social proof: "Trusted by X teams" + avatar group (5-6 overlapping avatars) + text-sm text-muted
-
-Scroll indicator: glass pill (text-xs "Scroll to explore" + chevron-down), centered, bottom-8
-  Animation: opacity 0→1 after 1s, chevron bounces subtly
-```
-
-### B — Product Float Hero
-
-Best for: apps with a strong product UI to showcase.
-
-```
-Layout: full-viewport, 2 columns
-Background: gradient (more contained than Aurora — 2 color stops)
-
-Left column (content, aligned center-left):
-  Eyebrow: glass chip badge
-  Headline: text-5xl weight-bold, left-aligned
-  Subtitle: text-lg text-secondary, max-width 440px
-  CTA row: primary button + ghost link, left-aligned
-  Feature list: 3 items with check icons (accent color), text-sm
-
-Right column (product visual):
-  Product screenshot/mockup, "floating" in a glass frame:
-    Glass Card (radius-2xl, blur-md, shadow-lg, border glass-border)
-    transform: rotate(2deg)   /* subtle tilt */
-    box-shadow: var(--shadow-lg) — large colored shadow below
-    Inner: ::before top reflection
-  Optional: second smaller screenshot overlapping, rotate(-3deg), smaller, glass-elevated bg
-```
-
-### C — Glass Showcase Hero
-
-Best for: feature-rich SaaS, platforms with multiple value props.
-
-```
-Layout: full-viewport, single column centered
-Background: gradient substrate (lavender aurora)
-
-Top section (centered):
-  Eyebrow chip
-  Headline: text-5xl, max-width 640px, centered
-  Subtitle: text-lg text-secondary, max-width 480px, centered
-  CTA row: 2 buttons centered
-
-Feature cards grid: 3 columns, glass cards with stagger entrance animation
-  Each card: icon area (accent-dim bg) + title + description
-  Cards have stagger: 0ms / 50ms / 100ms entrance delay
-
-Social proof strip (glass bar, full width):
-  Background: glass-bg, blur-md
-  "Trusted by leading companies" text-sm text-muted + logo grid (6-8 logos, grayscale)
-```
-
-### D — Immersive Media Hero
-
-Best for: media platforms, gaming, entertainment, storytelling products.
-
-```
-Layout: full-viewport
-Background: full-bleed image or video
-
-Overlay system:
-  Bottom gradient: linear-gradient(to top, rgba(bg-void, 0.9) 0%, transparent 60%)
-  Glass strip at bottom (NOT a centered card):
-    Glass bar, full width, blur-lg, padding 40px 80px
-    Contains: headline text-3xl weight-bold + subtitle text-base + CTA button + badge
-
-Floating glass elements (optional):
-  Small glass card (top-right): feature highlight or stat
-  Glass pill: "Now playing" or context label
-
-Scroll indicator: glass pill at very bottom-center, animated chevron
-```
-
----
-
-## Section Patterns
-
-### 1. Feature Grid
-
-3-column glass feature cards, with staggered entrance as they scroll into view.
-
-```
-Container: section, py-32, max-width content-xl
-Header: eyebrow chip + headline text-4xl + subtitle text-lg, centered, mb-16
-
-Grid: 3 columns (1 on mobile, 2 on tablet, 3 on desktop), gap-6
-Cards: Feature Card component (art-direction.md)
-  Stagger entrance: 0 / 50ms / 100ms per card group
-  Animation: float-up + glass fade-in
-```
-
-### 2. Alternating Feature
-
-Image and text alternating sides, reinforcing product value.
-
-```
-Sections (2-4 alternating rows), py-24, gap-16
-Row: 2 columns (image + text), reverse on even index
-
-Image side: product screenshot in Glass Card (radius-2xl, shadow-lg, rotate ±1-2deg)
-Text side: aligned center
-  Eyebrow: glass chip badge
-  Title: text-3xl weight-bold
-  Description: text-base text-secondary
-  Feature list: 3 items with check icons
-  CTA: ghost link or glass button
-```
-
-### 3. Testimonial
-
-```
-Background: gradient section (different from hero — use subtle variant)
-Container: max-width content-md, centered
-
-Glass card (radius-2xl, blur-lg, shadow-md, featured style):
-  Quote icon: large, accent-dim color
-  Quote text: text-xl italic text-heading, line-height 1.7
-  Attribution: avatar (glass-bordered) + name weight-semibold + role text-secondary
-```
-
-### 4. Stats Strip
-
-Large numbers that establish credibility.
-
-```
-Glass bar (full width, not a card):
-  Background: glass-bg, backdrop-filter blur-md
-  Border top + bottom: glass-border
-  Padding: py-12
-  Layout: flex, justify-center, gap-16 (dividers: 1px glass-border between items)
-
-Each stat:
-  Number: text-4xl weight-bold gradient text (accent-gradient)
-  Label: text-sm text-secondary, mt-1
-```
-
-### 5. Pricing Glass
-
-```
-Section: py-32, gradient bg
-Header: headline + billing toggle (glass toggle switch: monthly/annual)
-
-Cards grid: 2-3 columns, max-width 900px
-  Standard card: Glass Card (radius-2xl)
-  Featured card ("Most Popular"):
-    Glass Card with featured modifier: border 1px rgba(accent 0.30), shadow-glow
-    Badge "Most Popular" (glass badge, accent) at top
-    Slightly larger/taller than other cards
-
-Each card:
-  Plan name: text-lg weight-semibold
-  Price: text-4xl weight-bold (gradient text for featured) + /month text-sm text-muted
-  Description: text-sm text-secondary
-  Feature list: checkmarks with glass icon area
-  CTA: primary gradient (featured) or glass button (others)
-```
-
-### 6. CTA Section
-
-```
-Container: glass card (radius-3xl, blur-lg, shadow-lg, max-width content-lg, mx-auto)
-  Background: subtle accent gradient tint (accent-dim, 0.08 opacity) + glass-bg
-
-Inside:
-  Eyebrow chip
-  Headline: text-4xl weight-bold, centered
-  Subtitle: text-lg text-secondary, centered, max-width 480px
-  Button row: primary gradient + ghost, centered, gap-4
-```
-
-### 7. Logo Cloud
-
-```
-Container: py-16
-Label: "Trusted by" text-sm text-muted, centered, mb-8
-
-Glass strip (full width):
-  Glass bar: blur-md, border top+bottom glass-border, py-8
-  Logos: inline-flex, gap-12, overflow hidden (marquee on mobile)
-  Logo treatment: grayscale, opacity 0.5, hover: color + opacity 1, transition 200ms
-```
-
-### 8. FAQ Accordion
-
-```
-Container: Glass Card (radius-2xl, blur-md, max-width content-md, mx-auto)
-
-Item:
-  Button (full width): text-base weight-medium text-heading + chevron icon right
-  Border bottom: 1px glass-border (except last item)
-  Hover: background glass-bg-hover
-  Active (open): chevron rotates 180deg
-
-Answer panel:
-  Padding: pb-5 px-0 (flush left)
-  text-sm text-secondary, line-height 1.7
-  Animation: height 0 → auto, opacity 0 → 1, 300ms ease-out
-```
-
----
-
-## Footer
-
-```
-Background: glass-bg, backdrop-filter blur-lg
-Border top: 1px glass-border
-Padding: py-16
-
-Layout: 4 columns
-  Col 1: logo + tagline text-sm text-secondary + social icons (glass icon buttons)
-  Col 2-4: link groups
-    Group label: text-xs uppercase tracking-wider text-muted, mb-4
-    Links: text-sm text-secondary, hover text-heading, transition-fast
-
-Bottom bar:
-  Border top: 1px glass-border
-  mt-12, pt-6
-  flex justify-between
-  Copyright: text-sm text-muted
-  Legal links: text-sm text-secondary, gap-6
-```
-
----
-
-## Anti-Patterns for Websites
-
-1. **Neon colors**: glass marketing is luminous, not neon. Keep saturation < 70%.
-2. **Glass over solid white**: if the background is pure white, glass has nothing to reveal. Always use a gradient.
-3. **Blur without fallback**: always include `@supports (backdrop-filter: blur(1px))` with a fallback solid background.
-4. **Glass on everything**: text, headings, dividers, and inline elements are solid. Glass is for containers (cards, navs, strips, modals).
-5. **Dark glass without contrast check**: dark glass can become illegible. Always verify WCAG AA on dark glass cards.
-6. **Rainbow gradient**: maximum 3-4 colors in any gradient, all from the same family (cool tones: violet, blue, teal, pink). Never mix warm + cool families.
-7. **3+ levels of nested glass cards**: max 2 levels per visible area. More than that creates visual soup and performance issues.
-8. **Animated aurora that distracts from content**: if using animated background, keep the animation very slow (8-12s cycle) and very subtle (opacity or hue shift only).
+# Websites — Glassmorphism UI
+
+Landing pages and marketing sites. The gradient substrate rules remain: no glass without gradient.
+
+---
+
+## Navigation (website)
+
+Glass sticky navigation bar. The signature behavior is becoming more opaque as the user scrolls.
+
+```
+Structure:
+  position: sticky / fixed
+  top: 0
+  width: 100%
+  height: var(--nav-height-web)   /* 68px */
+  background: var(--glass-bg)
+  backdrop-filter: var(--glass-blur-lg)
+  border-bottom: 1px solid var(--glass-border)
+  z-index: 100
+
+  Layout: max-width container (1280px), centered, flex align-center
+    Left: logo (40px height) + product name (text-base weight-semibold)
+    Center: nav links (text-sm weight-medium text-secondary, hover text-heading)
+    Right: CTA button (primary gradient, height control-lg)
+
+Scroll behavior (JS):
+  At scroll > 20px: background → var(--glass-bg-hover) via transition-glass
+  At scroll > 80px: background → var(--glass-bg-active)
+```
+
+Mobile navigation:
+```
+Hamburger trigger: glass icon button (right of logo)
+Menu: full-viewport overlay
+  background: var(--glass-bg-active)
+  backdrop-filter: var(--glass-blur-xl)
+  position: fixed, inset: 0
+  flex-col, align-center, justify-center, gap-8
+  Nav links: text-2xl weight-semibold
+  CTA: primary button
+  Close: top-right ghost icon button
+Animation: fade + scale-materialize 300ms
+```
+
+---
+
+## Hero Patterns (choose one per landing)
+
+### A — Aurora Hero
+
+Best for: product launches, crypto, modern SaaS, fintech marketing.
+
+```
+Layout: full-viewport (min-height: 100vh)
+Background: aurora gradient (mesh of 3-4 desaturated colors)
+  gradient: radial-gradient or conic-gradient mesh — violet, blue, pink, teal tones
+  Optional: animated color shift (hue rotation 0→20deg, 8s ease-in-out infinite alternate)
+
+Decorative orbs (optional, enhance the aurora):
+  3-4 gradient blobs, position: absolute, z-index: 0
+  Size: 200-400px, border-radius: 50%
+  filter: blur(80px) — extreme blur to look like soft ambient light
+  opacity: 0.35-0.50
+  Colors: use accent, accent-secondary, and a pink/teal complementary
+
+Content (z-index: 1, centered):
+  Eyebrow label: glass chip (badge style) — "New: Feature X →"
+  Headline: text-5xl weight-bold text-heading, tracking -0.03em
+    Optional: gradient text on key words (accent-gradient)
+  Subtitle: text-lg text-secondary, max-width 520px, centered
+  CTA row: primary gradient button + ghost "Learn more" link
+  Social proof: "Trusted by X teams" + avatar group (5-6 overlapping avatars) + text-sm text-muted
+
+Scroll indicator: glass pill (text-xs "Scroll to explore" + chevron-down), centered, bottom-8
+  Animation: opacity 0→1 after 1s, chevron bounces subtly
+```
+
+### B — Product Float Hero
+
+Best for: apps with a strong product UI to showcase.
+
+```
+Layout: full-viewport, 2 columns
+Background: gradient (more contained than Aurora — 2 color stops)
+
+Left column (content, aligned center-left):
+  Eyebrow: glass chip badge
+  Headline: text-5xl weight-bold, left-aligned
+  Subtitle: text-lg text-secondary, max-width 440px
+  CTA row: primary button + ghost link, left-aligned
+  Feature list: 3 items with check icons (accent color), text-sm
+
+Right column (product visual):
+  Product screenshot/mockup, "floating" in a glass frame:
+    Glass Card (radius-2xl, blur-md, shadow-lg, border glass-border)
+    transform: rotate(2deg)   /* subtle tilt */
+    box-shadow: var(--shadow-lg) — large colored shadow below
+    Inner: ::before top reflection
+  Optional: second smaller screenshot overlapping, rotate(-3deg), smaller, glass-elevated bg
+```
+
+### C — Glass Showcase Hero
+
+Best for: feature-rich SaaS, platforms with multiple value props.
+
+```
+Layout: full-viewport, single column centered
+Background: gradient substrate (lavender aurora)
+
+Top section (centered):
+  Eyebrow chip
+  Headline: text-5xl, max-width 640px, centered
+  Subtitle: text-lg text-secondary, max-width 480px, centered
+  CTA row: 2 buttons centered
+
+Feature cards grid: 3 columns, glass cards with stagger entrance animation
+  Each card: icon area (accent-dim bg) + title + description
+  Cards have stagger: 0ms / 50ms / 100ms entrance delay
+
+Social proof strip (glass bar, full width):
+  Background: glass-bg, blur-md
+  "Trusted by leading companies" text-sm text-muted + logo grid (6-8 logos, grayscale)
+```
+
+### D — Immersive Media Hero
+
+Best for: media platforms, gaming, entertainment, storytelling products.
+
+```
+Layout: full-viewport
+Background: full-bleed image or video
+
+Overlay system:
+  Bottom gradient: linear-gradient(to top, rgba(bg-void, 0.9) 0%, transparent 60%)
+  Glass strip at bottom (NOT a centered card):
+    Glass bar, full width, blur-lg, padding 40px 80px
+    Contains: headline text-3xl weight-bold + subtitle text-base + CTA button + badge
+
+Floating glass elements (optional):
+  Small glass card (top-right): feature highlight or stat
+  Glass pill: "Now playing" or context label
+
+Scroll indicator: glass pill at very bottom-center, animated chevron
+```
+
+---
+
+## Section Patterns
+
+### 1. Feature Grid
+
+3-column glass feature cards, with staggered entrance as they scroll into view.
+
+```
+Container: section, py-32, max-width content-xl
+Header: eyebrow chip + headline text-4xl + subtitle text-lg, centered, mb-16
+
+Grid: 3 columns (1 on mobile, 2 on tablet, 3 on desktop), gap-6
+Cards: Feature Card component (art-direction.md)
+  Stagger entrance: 0 / 50ms / 100ms per card group
+  Animation: float-up + glass fade-in
+```
+
+### 2. Alternating Feature
+
+Image and text alternating sides, reinforcing product value.
+
+```
+Sections (2-4 alternating rows), py-24, gap-16
+Row: 2 columns (image + text), reverse on even index
+
+Image side: product screenshot in Glass Card (radius-2xl, shadow-lg, rotate ±1-2deg)
+Text side: aligned center
+  Eyebrow: glass chip badge
+  Title: text-3xl weight-bold
+  Description: text-base text-secondary
+  Feature list: 3 items with check icons
+  CTA: ghost link or glass button
+```
+
+### 3. Testimonial
+
+```
+Background: gradient section (different from hero — use subtle variant)
+Container: max-width content-md, centered
+
+Glass card (radius-2xl, blur-lg, shadow-md, featured style):
+  Quote icon: large, accent-dim color
+  Quote text: text-xl italic text-heading, line-height 1.7
+  Attribution: avatar (glass-bordered) + name weight-semibold + role text-secondary
+```
+
+### 4. Stats Strip
+
+Large numbers that establish credibility.
+
+```
+Glass bar (full width, not a card):
+  Background: glass-bg, backdrop-filter blur-md
+  Border top + bottom: glass-border
+  Padding: py-12
+  Layout: flex, justify-center, gap-16 (dividers: 1px glass-border between items)
+
+Each stat:
+  Number: text-4xl weight-bold gradient text (accent-gradient)
+  Label: text-sm text-secondary, mt-1
+```
+
+### 5. Pricing Glass
+
+```
+Section: py-32, gradient bg
+Header: headline + billing toggle (glass toggle switch: monthly/annual)
+
+Cards grid: 2-3 columns, max-width 900px
+  Standard card: Glass Card (radius-2xl)
+  Featured card ("Most Popular"):
+    Glass Card with featured modifier: border 1px rgba(accent 0.30), shadow-glow
+    Badge "Most Popular" (glass badge, accent) at top
+    Slightly larger/taller than other cards
+
+Each card:
+  Plan name: text-lg weight-semibold
+  Price: text-4xl weight-bold (gradient text for featured) + /month text-sm text-muted
+  Description: text-sm text-secondary
+  Feature list: checkmarks with glass icon area
+  CTA: primary gradient (featured) or glass button (others)
+```
+
+### 6. CTA Section
+
+```
+Container: glass card (radius-3xl, blur-lg, shadow-lg, max-width content-lg, mx-auto)
+  Background: subtle accent gradient tint (accent-dim, 0.08 opacity) + glass-bg
+
+Inside:
+  Eyebrow chip
+  Headline: text-4xl weight-bold, centered
+  Subtitle: text-lg text-secondary, centered, max-width 480px
+  Button row: primary gradient + ghost, centered, gap-4
+```
+
+### 7. Logo Cloud
+
+```
+Container: py-16
+Label: "Trusted by" text-sm text-muted, centered, mb-8
+
+Glass strip (full width):
+  Glass bar: blur-md, border top+bottom glass-border, py-8
+  Logos: inline-flex, gap-12, overflow hidden (marquee on mobile)
+  Logo treatment: grayscale, opacity 0.5, hover: color + opacity 1, transition 200ms
+```
+
+### 8. FAQ Accordion
+
+```
+Container: Glass Card (radius-2xl, blur-md, max-width content-md, mx-auto)
+
+Item:
+  Button (full width): text-base weight-medium text-heading + chevron icon right
+  Border bottom: 1px glass-border (except last item)
+  Hover: background glass-bg-hover
+  Active (open): chevron rotates 180deg
+
+Answer panel:
+  Padding: pb-5 px-0 (flush left)
+  text-sm text-secondary, line-height 1.7
+  Animation: height 0 → auto, opacity 0 → 1, 300ms ease-out
+```
+
+---
+
+## Footer
+
+```
+Background: glass-bg, backdrop-filter blur-lg
+Border top: 1px glass-border
+Padding: py-16
+
+Layout: 4 columns
+  Col 1: logo + tagline text-sm text-secondary + social icons (glass icon buttons)
+  Col 2-4: link groups
+    Group label: text-xs uppercase tracking-wider text-muted, mb-4
+    Links: text-sm text-secondary, hover text-heading, transition-fast
+
+Bottom bar:
+  Border top: 1px glass-border
+  mt-12, pt-6
+  flex justify-between
+  Copyright: text-sm text-muted
+  Legal links: text-sm text-secondary, gap-6
+```
+
+---
+
+## Anti-Patterns for Websites
+
+1. **Neon colors**: glass marketing is luminous, not neon. Keep saturation < 70%.
+2. **Glass over solid white**: if the background is pure white, glass has nothing to reveal. Always use a gradient.
+3. **Blur without fallback**: always include `@supports (backdrop-filter: blur(1px))` with a fallback solid background.
+4. **Glass on everything**: text, headings, dividers, and inline elements are solid. Glass is for containers (cards, navs, strips, modals).
+5. **Dark glass without contrast check**: dark glass can become illegible. Always verify WCAG AA on dark glass cards.
+6. **Rainbow gradient**: maximum 3-4 colors in any gradient, all from the same family (cool tones: violet, blue, teal, pink). Never mix warm + cool families.
+7. **3+ levels of nested glass cards**: max 2 levels per visible area. More than that creates visual soup and performance issues.
+8. **Animated aurora that distracts from content**: if using animated background, keep the animation very slow (8-12s cycle) and very subtle (opacity or hue shift only).