@jaimevalasek/aioson 1.8.0 → 1.9.0

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

@@ -1,387 +1,387 @@
-# Websites & Landing Pages — Aurora Command UI
-
-Landing pages, marketing sites, and product websites using the aurora-command-ui system.
-
-Requires `design-tokens.md` + `components.md`.
-
----
-
-## General rules
-
-1. **Aurora gradient spans the full page** — `background-attachment: fixed`, no section resets the background.
-2. **Glass nav becomes more opaque on scroll** — starts at `glass-blur-md`, opacity increases as user scrolls.
-3. **Aurora orbs as decorative atmosphere** — large blurred gradient circles anchored to sections. They must be blurred (60px+), never sharp.
-4. **Mono labels on section eyebrows** — every section starts with a mono uppercase label before the section heading.
-5. **One gradient CTA per page** — the primary call-to-action button uses the full `--accent-gradient`. Do not overuse it.
-6. **Section contrast through glass density** — vary glass opacity between sections to create visual rhythm. Not every section at the same blur level.
-
----
-
-## Page shell (landing)
-
-```css
-.landing-shell {
-  min-height: 100vh;
-  background: var(--bg-gradient);
-  background-attachment: fixed;
-  font-family: var(--font-body);
-  color: var(--text-primary);
-  overflow-x: hidden;
-}
-
-/* Glass navigation */
-.landing-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: var(--z-sticky);
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 var(--space-8);
-  background: rgba(8, 12, 22, 0.40);
-  backdrop-filter: var(--glass-blur-md);
-  border-bottom: 1px solid var(--glass-border);
-  transition: background 300ms ease, backdrop-filter 300ms ease;
-}
-
-/* Nav becomes more opaque on scroll — add via JS */
-.landing-nav.scrolled {
-  background: rgba(8, 12, 22, 0.80);
-  backdrop-filter: var(--glass-blur-lg);
-}
-```
-
----
-
-## 1. Aurora Hero — Split Layout
-
-For product launches, platform marketing. Avoids the generic centered hero.
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│  GLASS NAV                                                      │
-├─────────────────────────────────────────────────────────────────┤
-│                                                                 │
-│  LEFT (text side, 55%):          RIGHT (visual side, 45%):     │
-│  [MONO: PLATFORM · V2.0 LAUNCH]  [Glass product card / UI      │
-│  [Heading text-5xl tight]         screenshot in glass frame,   │
-│  [Subheading text-xl muted]       floating over aurora orb]    │
-│  [CTA Row: [Gradient Button] [Ghost Button]]                   │
-│  [Social proof: 4,200+ teams]    [Teal glow orb behind frame]  │
-│                                                                 │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-```css
-.hero-section {
-  min-height: 100vh;
-  display: grid;
-  grid-template-columns: 55% 45%;
-  align-items: center;
-  padding: 0 var(--space-16);
-  padding-top: 80px; /* account for fixed nav */
-  position: relative;
-}
-
-.hero-text { padding-right: var(--space-12); }
-
-.hero-heading {
-  font-size: var(--text-5xl);
-  font-weight: var(--weight-black);
-  line-height: var(--leading-tight);
-  letter-spacing: var(--tracking-tight);
-  color: var(--text-heading);
-  margin-bottom: var(--space-5);
-}
-
-.hero-heading-accent {
-  background: var(--accent-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero-subheading {
-  font-size: var(--text-xl);
-  color: var(--text-secondary);
-  line-height: var(--leading-relaxed);
-  margin-bottom: var(--space-8);
-}
-
-/* Glass product frame */
-.product-frame {
-  background: var(--glass-surface);
-  backdrop-filter: var(--glass-blur-md);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-2xl);
-  overflow: hidden;
-  position: relative;
-  box-shadow: var(--shadow-glow);
-}
-
-.product-frame::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--glass-highlight);
-  pointer-events: none;
-  z-index: 1;
-  border-radius: inherit;
-}
-
-/* Aurora orb behind product frame */
-.hero-orb {
-  position: absolute;
-  width: 400px;
-  height: 400px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(0,200,232,0.20), rgba(124,58,237,0.15), transparent 70%);
-  filter: blur(60px);
-  right: 5%;
-  top: 30%;
-  pointer-events: none;
-}
-```
-
----
-
-## 2. Aurora Hero — Centered (atmospheric)
-
-For manifesto pages, product teasers, atmospheric launches.
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│  [Teal aurora orb — top center, large]                         │
-│                                                                 │
-│                   [MONO: BUILT FOR SCALE]                      │
-│              [Heading — text-5xl, 2–3 lines, center]           │
-│           [Subtext — text-xl, max-width 600px, center]         │
-│                 [CTA Row — centered]                           │
-│                                                                 │
-│      [Glass feature strip — 3 items horizontal, below fold]    │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-Use this variant only when the product visual is not available or the focus is the manifesto text. The aurora orb creates the depth.
-
----
-
-## 3. Feature Section — Glass Cards Grid
-
-```
-MONO EYEBROW: PLATFORM CAPABILITIES
-Heading: The control center you always wanted. (text-4xl, left-aligned)
-Subtext: One line max. (text-lg, muted)
-
-GLASS CARDS GRID (3 col):
-┌─────────────────────────────────────────────────────────────────┐
-│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐     │
-│ │ [Icon — teal]  │  │ [Icon — teal]  │  │ [Icon — violet]│     │
-│ │ Feature title  │  │ Feature title  │  │ Feature title  │     │
-│ │ Short desc     │  │ Short desc     │  │ Short desc     │     │
-│ └────────────────┘  └────────────────┘  └────────────────┘     │
-│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐     │
-│ │ ...            │  │ ...            │  │ ...            │     │
-│ └────────────────┘  └────────────────┘  └────────────────┘     │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-```css
-.features-section {
-  padding: var(--space-24) var(--space-16);
-  position: relative;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-4);
-  margin-top: var(--space-10);
-}
-
-.feature-card {
-  background: var(--glass-surface);
-  backdrop-filter: var(--glass-blur-sm);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  padding: var(--space-6);
-  position: relative;
-  transition: background var(--transition-glass), box-shadow var(--transition-base);
-}
-
-.feature-card:hover {
-  background: var(--glass-elevated);
-  box-shadow: var(--shadow-glow);
-}
-
-.feature-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: var(--glass-highlight);
-  pointer-events: none;
-}
-
-.feature-icon {
-  width: 40px; height: 40px;
-  background: var(--accent-primary-dim);
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--space-4);
-  color: var(--accent-primary);
-}
-```
-
----
-
-## 4. Stats / Proof Rail
-
-A horizontal glass strip showing key social proof numbers.
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│   4,200+          99.9%          <500ms         SOC 2 Type II  │
-│   Teams using     Uptime SLA     Avg latency    Certified       │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-```css
-.proof-rail {
-  background: var(--glass-surface);
-  backdrop-filter: var(--glass-blur-md);
-  border-top: 1px solid var(--glass-border);
-  border-bottom: 1px solid var(--glass-border);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  padding: var(--space-8) var(--space-16);
-}
-
-.proof-item {
-  text-align: center;
-  padding: var(--space-4);
-  border-right: 1px solid var(--glass-border);
-}
-
-.proof-item:last-child { border-right: none; }
-
-.proof-number {
-  font-size: var(--text-3xl);
-  font-weight: var(--weight-bold);
-  background: var(--accent-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  display: block;
-}
-
-.proof-label {
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  letter-spacing: 0.10em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin-top: var(--space-1);
-}
-```
-
----
-
-## 5. Pricing Section
-
-Three glass cards. Center card is elevated/featured with gradient border.
-
-```
-MONO: PRICING PLANS
-Heading: Start free. Scale confidently.
-
-┌──────────────┐  ┌──────────────────┐  ┌──────────────┐
-│  STARTER     │  │  PRO (featured)  │  │  ENTERPRISE  │
-│  $0/mo       │  │  $49/mo (grad)   │  │  Custom      │
-│  Features... │  │  Features...     │  │  Features... │
-│  [Ghost btn] │  │  [Gradient btn]  │  │  [Ghost btn] │
-└──────────────┘  └──────────────────┘  └──────────────┘
-```
-
-```css
-.pricing-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-4);
-  align-items: start;
-}
-
-.pricing-card-featured {
-  background: var(--glass-elevated);
-  backdrop-filter: var(--glass-blur-lg);
-  border-radius: var(--radius-2xl);
-  padding: var(--space-8);
-  position: relative;
-  box-shadow: var(--shadow-glow-strong);
-  /* Gradient border */
-  background-clip: padding-box;
-  border: 1px solid transparent;
-}
-
-.pricing-card-featured::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background: var(--accent-gradient);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-}
-```
-
----
-
-## 6. Testimonials Section
-
-```
-MONO: TRUSTED BY TEAMS WORLDWIDE
-Heading: The command center that teams rely on.
-
-[Glass testimonial cards — masonry or 3-col grid]
-Each card:
-  Quote text (italic, text-base)
-  Avatar + Name + Role/Company
-  Teal-electric accent line at top of card
-```
-
----
-
-## 7. Footer
-
-Minimal. Glass strip at the bottom of the aurora background.
-
-```css
-.footer {
-  background: var(--glass-shell);
-  backdrop-filter: var(--glass-blur-md);
-  border-top: 1px solid var(--glass-border);
-  padding: var(--space-8) var(--space-16);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-```
-
----
-
-## Anti-patterns
-
-- **Do NOT** reset the background in each section — the aurora gradient must flow continuously top to bottom.
-- **Do NOT** use a centered hero with generic "Modern Platform" headline as the only opening move. Use split layout, offset frame, or atmospheric centered with real copy.
-- **Do NOT** repeat the same glass card layout in every section. Vary: glass strip, glass split, proof rail, centered manifesto.
-- **Do NOT** add neon glows or bright aurora orbs with saturation >70%. The orbs are atmospheric, not decorative neon.
-- **Do NOT** use glass pricing cards without the featured-card distinction. The featured card must feel more elevated than the others.
-- **Do NOT** put a plain solid white footer on an aurora background page.
+# Websites & Landing Pages — Aurora Command UI
+
+Landing pages, marketing sites, and product websites using the aurora-command-ui system.
+
+Requires `design-tokens.md` + `components.md`.
+
+---
+
+## General rules
+
+1. **Aurora gradient spans the full page** — `background-attachment: fixed`, no section resets the background.
+2. **Glass nav becomes more opaque on scroll** — starts at `glass-blur-md`, opacity increases as user scrolls.
+3. **Aurora orbs as decorative atmosphere** — large blurred gradient circles anchored to sections. They must be blurred (60px+), never sharp.
+4. **Mono labels on section eyebrows** — every section starts with a mono uppercase label before the section heading.
+5. **One gradient CTA per page** — the primary call-to-action button uses the full `--accent-gradient`. Do not overuse it.
+6. **Section contrast through glass density** — vary glass opacity between sections to create visual rhythm. Not every section at the same blur level.
+
+---
+
+## Page shell (landing)
+
+```css
+.landing-shell {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  overflow-x: hidden;
+}
+
+/* Glass navigation */
+.landing-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-sticky);
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-8);
+  background: rgba(8, 12, 22, 0.40);
+  backdrop-filter: var(--glass-blur-md);
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 300ms ease, backdrop-filter 300ms ease;
+}
+
+/* Nav becomes more opaque on scroll — add via JS */
+.landing-nav.scrolled {
+  background: rgba(8, 12, 22, 0.80);
+  backdrop-filter: var(--glass-blur-lg);
+}
+```
+
+---
+
+## 1. Aurora Hero — Split Layout
+
+For product launches, platform marketing. Avoids the generic centered hero.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  GLASS NAV                                                      │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  LEFT (text side, 55%):          RIGHT (visual side, 45%):     │
+│  [MONO: PLATFORM · V2.0 LAUNCH]  [Glass product card / UI      │
+│  [Heading text-5xl tight]         screenshot in glass frame,   │
+│  [Subheading text-xl muted]       floating over aurora orb]    │
+│  [CTA Row: [Gradient Button] [Ghost Button]]                   │
+│  [Social proof: 4,200+ teams]    [Teal glow orb behind frame]  │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.hero-section {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 55% 45%;
+  align-items: center;
+  padding: 0 var(--space-16);
+  padding-top: 80px; /* account for fixed nav */
+  position: relative;
+}
+
+.hero-text { padding-right: var(--space-12); }
+
+.hero-heading {
+  font-size: var(--text-5xl);
+  font-weight: var(--weight-black);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text-heading);
+  margin-bottom: var(--space-5);
+}
+
+.hero-heading-accent {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subheading {
+  font-size: var(--text-xl);
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-8);
+}
+
+/* Glass product frame */
+.product-frame {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-md);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  position: relative;
+  box-shadow: var(--shadow-glow);
+}
+
+.product-frame::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight);
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+/* Aurora orb behind product frame */
+.hero-orb {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(0,200,232,0.20), rgba(124,58,237,0.15), transparent 70%);
+  filter: blur(60px);
+  right: 5%;
+  top: 30%;
+  pointer-events: none;
+}
+```
+
+---
+
+## 2. Aurora Hero — Centered (atmospheric)
+
+For manifesto pages, product teasers, atmospheric launches.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  [Teal aurora orb — top center, large]                         │
+│                                                                 │
+│                   [MONO: BUILT FOR SCALE]                      │
+│              [Heading — text-5xl, 2–3 lines, center]           │
+│           [Subtext — text-xl, max-width 600px, center]         │
+│                 [CTA Row — centered]                           │
+│                                                                 │
+│      [Glass feature strip — 3 items horizontal, below fold]    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+Use this variant only when the product visual is not available or the focus is the manifesto text. The aurora orb creates the depth.
+
+---
+
+## 3. Feature Section — Glass Cards Grid
+
+```
+MONO EYEBROW: PLATFORM CAPABILITIES
+Heading: The control center you always wanted. (text-4xl, left-aligned)
+Subtext: One line max. (text-lg, muted)
+
+GLASS CARDS GRID (3 col):
+┌─────────────────────────────────────────────────────────────────┐
+│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐     │
+│ │ [Icon — teal]  │  │ [Icon — teal]  │  │ [Icon — violet]│     │
+│ │ Feature title  │  │ Feature title  │  │ Feature title  │     │
+│ │ Short desc     │  │ Short desc     │  │ Short desc     │     │
+│ └────────────────┘  └────────────────┘  └────────────────┘     │
+│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐     │
+│ │ ...            │  │ ...            │  │ ...            │     │
+│ └────────────────┘  └────────────────┘  └────────────────┘     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.features-section {
+  padding: var(--space-24) var(--space-16);
+  position: relative;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+  margin-top: var(--space-10);
+}
+
+.feature-card {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  position: relative;
+  transition: background var(--transition-glass), box-shadow var(--transition-base);
+}
+
+.feature-card:hover {
+  background: var(--glass-elevated);
+  box-shadow: var(--shadow-glow);
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--glass-highlight);
+  pointer-events: none;
+}
+
+.feature-icon {
+  width: 40px; height: 40px;
+  background: var(--accent-primary-dim);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--space-4);
+  color: var(--accent-primary);
+}
+```
+
+---
+
+## 4. Stats / Proof Rail
+
+A horizontal glass strip showing key social proof numbers.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│   4,200+          99.9%          <500ms         SOC 2 Type II  │
+│   Teams using     Uptime SLA     Avg latency    Certified       │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.proof-rail {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-md);
+  border-top: 1px solid var(--glass-border);
+  border-bottom: 1px solid var(--glass-border);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: var(--space-8) var(--space-16);
+}
+
+.proof-item {
+  text-align: center;
+  padding: var(--space-4);
+  border-right: 1px solid var(--glass-border);
+}
+
+.proof-item:last-child { border-right: none; }
+
+.proof-number {
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-bold);
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: block;
+}
+
+.proof-label {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+}
+```
+
+---
+
+## 5. Pricing Section
+
+Three glass cards. Center card is elevated/featured with gradient border.
+
+```
+MONO: PRICING PLANS
+Heading: Start free. Scale confidently.
+
+┌──────────────┐  ┌──────────────────┐  ┌──────────────┐
+│  STARTER     │  │  PRO (featured)  │  │  ENTERPRISE  │
+│  $0/mo       │  │  $49/mo (grad)   │  │  Custom      │
+│  Features... │  │  Features...     │  │  Features... │
+│  [Ghost btn] │  │  [Gradient btn]  │  │  [Ghost btn] │
+└──────────────┘  └──────────────────┘  └──────────────┘
+```
+
+```css
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.pricing-card-featured {
+  background: var(--glass-elevated);
+  backdrop-filter: var(--glass-blur-lg);
+  border-radius: var(--radius-2xl);
+  padding: var(--space-8);
+  position: relative;
+  box-shadow: var(--shadow-glow-strong);
+  /* Gradient border */
+  background-clip: padding-box;
+  border: 1px solid transparent;
+}
+
+.pricing-card-featured::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--accent-gradient);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+```
+
+---
+
+## 6. Testimonials Section
+
+```
+MONO: TRUSTED BY TEAMS WORLDWIDE
+Heading: The command center that teams rely on.
+
+[Glass testimonial cards — masonry or 3-col grid]
+Each card:
+  Quote text (italic, text-base)
+  Avatar + Name + Role/Company
+  Teal-electric accent line at top of card
+```
+
+---
+
+## 7. Footer
+
+Minimal. Glass strip at the bottom of the aurora background.
+
+```css
+.footer {
+  background: var(--glass-shell);
+  backdrop-filter: var(--glass-blur-md);
+  border-top: 1px solid var(--glass-border);
+  padding: var(--space-8) var(--space-16);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+```
+
+---
+
+## Anti-patterns
+
+- **Do NOT** reset the background in each section — the aurora gradient must flow continuously top to bottom.
+- **Do NOT** use a centered hero with generic "Modern Platform" headline as the only opening move. Use split layout, offset frame, or atmospheric centered with real copy.
+- **Do NOT** repeat the same glass card layout in every section. Vary: glass strip, glass split, proof rail, centered manifesto.
+- **Do NOT** add neon glows or bright aurora orbs with saturation >70%. The orbs are atmospheric, not decorative neon.
+- **Do NOT** use glass pricing cards without the featured-card distinction. The featured card must feel more elevated than the others.
+- **Do NOT** put a plain solid white footer on an aurora background page.