/* ============================================ Section-level overrides -------------------------------------------- Two per-section overrides applied via attributes on a [data-section-type] element. Editor UI (gear menu) persists these to localStorage with keys: aed:sec-theme::: → "light" | "dark" | "white" | "black" | "primary" aed:sec-parallax::: → "on" A small inline script in Base.astro applies them to the matching sections on load, so the override survives reload regardless of whether the editor is active. 1. Theme override Re-declares theme tokens at the section scope so the entire subtree inherits a different palette than the page. Keeps accent/brand colors intact. **Vibrant-mode only.** Per-section overrides exist so the Vibrant site-mode can assemble an authored rhythm of dark / light / primary bands across one page. In Dark site-mode every section is uniformly dark; in Light site-mode every section is uniformly light — the per-section attribute is still present on the DOM, but the CSS rules below are scoped to `html[data-theme="vibrant"]` so they don't fire. Switching modes at runtime therefore flips the whole page palette without needing to clear per-section state. Cosmetic touches that ONLY read in Vibrant mode (the hairline boundary between adjacent overrides, the parallax opacity bumps) keep their vibrant-mode gating. 2. Parallax background Adds a full-bleed background image layer to the section via a pseudo-element, using background-attachment: fixed for a simple parallax effect. Image source is set via the --sec-parallax-url CSS variable the editor writes onto the element's style attribute. Parallax is independent of the three site modes — a section keeps its texture in all of them. ============================================ */ /* ---- 1. Theme override (all modes, with rhythm scoped to vibrant) -- */ /* Author-explicit `data-sec-theme="..."` overrides fire in EVERY site mode now (vibrant + dark + light). The rationale was originally that dark/light should be uniform — no rhythm, no per-section variation. Field experience proved that wrong: when an author intentionally pins one section to "primary" or "white" (e.g. a CTA band that needs to pop), the section reads as broken in dark/light because the override was silently flattened. Two things are still vibrant-scoped on purpose: 1. The hairline boundary between adjacent overridden sections — in dark/light there's no rhythm to define a "boundary" against. 2. The position-based rhythm rules (nth-child(3n+2 …)) — these are the *implicit* rhythm that makes vibrant vibrant. Letting them fire in dark/light would flip the very modes that are supposed to be uniform. Specificity note: :where() still wraps the rules where it was present (it contributes 0 to specificity, so removing it would *change* specificity unexpectedly). The vibrant-only rules below keep :where(); the now-universal rules drop the vibrant scope entirely (no :where wrapper either). */ [data-sec-theme="dark"] { --bg-primary: #0a0a0b; --bg-secondary: #111113; --bg-card: #18181b; --bg-card-hover: #1f1f23; --bg-primary-rgb: 10, 10, 11; --bg-secondary-rgb: 17, 17, 19; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #9a9aa2; --accent-hover: #8b5cf6; --accent-hover-rgb: 139, 92, 246; --border: #27272a; --border-light: #3f3f46; --bg-image-filter: brightness(0.4) saturate(1.4); --bg-image-filter-soft: brightness(0.35) saturate(1.3); --bg-image-filter-strong: brightness(0.3) saturate(1.5) contrast(1.2); --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.3); --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.4); --shadow-xl: 0 30px 60px -20px rgba(0, 0, 0, 0.6); --nav-scrolled-bg: rgba(10, 10, 11, 0.9); --scrim-bg: rgba(0, 0, 0, 0.6); --hero-aurora-blend: screen; background: var(--bg-primary); color: var(--text-primary); } [data-sec-theme="light"] { --bg-primary: #fafaf9; --bg-secondary: #f4f4f5; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-primary-rgb: 250, 250, 249; --bg-secondary-rgb: 244, 244, 245; --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a; --accent-hover: #5b21b6; --accent-hover-rgb: 91, 33, 182; --border: #e4e4e7; --border-light: #d4d4d8; --bg-image-filter: brightness(1) saturate(0.9); --bg-image-filter-soft: brightness(1.05) saturate(0.85); --bg-image-filter-strong: brightness(0.95) saturate(0.95) contrast(1.02); --shadow-card: 0 10px 28px rgba(15, 23, 42, 0.08), 0 3px 10px rgba(15, 23, 42, 0.04); --shadow-lg: 0 20px 50px -10px rgba(15, 23, 42, 0.15), 0 6px 18px rgba(15, 23, 42, 0.06); --shadow-xl: 0 30px 60px -20px rgba(15, 23, 42, 0.22), 0 10px 24px rgba(15, 23, 42, 0.08); --nav-scrolled-bg: rgba(250, 250, 249, 0.88); --scrim-bg: rgba(15, 23, 42, 0.45); --hero-aurora-blend: multiply; background: var(--bg-primary); color: var(--text-primary); } /* Neutral + brand-accent bg options. These bypass the dark/light palette and pin the section to a specific backdrop, with text color automatically flipped for legibility. Useful when you want one section to "pop" from the rest of the page regardless of the active theme. Works universally so the section pops in Vibrant, Dark, and Light site modes alike. */ [data-sec-theme="white"] { background: #ffffff; color: #0a0a0b; --bg-primary: #ffffff; --bg-secondary: #f4f4f5; --bg-card: #fafafa; --text-primary: #0a0a0b; --text-secondary: #3f3f46; --text-muted: #52525b; --border: #e4e4e7; --border-light: #d4d4d8; } [data-sec-theme="black"] { background: #0a0a0b; color: #fafafa; --bg-primary: #0a0a0b; --bg-secondary: #111113; --bg-card: #18181b; --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-muted: #a1a1aa; --border: #27272a; --border-light: #3f3f46; } [data-sec-theme="primary"] { background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 88%, #000) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 82%, #000) 100%); background-color: var(--accent); color: #ffffff; position: relative; isolation: isolate; --bg-primary: var(--accent); --bg-primary-rgb: var(--accent-rgb); --bg-secondary: color-mix(in srgb, var(--accent) 80%, #000); --bg-card: color-mix(in srgb, var(--accent) 88%, #fff); --bg-card-hover: color-mix(in srgb, var(--accent) 92%, #fff); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.82); --text-muted: rgba(255, 255, 255, 0.68); --border: rgba(255, 255, 255, 0.22); --border-light: rgba(255, 255, 255, 0.36); --shadow-card: 0 14px 32px rgba(0, 0, 0, 0.22); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.28); --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.32); } /* Subtle highlight wash so the flat accent color reads as a designed backdrop instead of a single flat swatch. Keeps the brand color dominant. */ [data-sec-theme="primary"]::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 18% 12%, rgba(255, 255, 255, 0.18), transparent 60%), radial-gradient(ellipse 55% 45% at 82% 92%, rgba(0, 0, 0, 0.22), transparent 65%); mix-blend-mode: overlay; } /* On primary backgrounds, accent-colored text (links, chips) loses contrast. The descendant-only scope here is deliberate: if we override --accent on the section itself, the background gradient above (which uses var(--accent)) resolves to white on the same element. Scoping to `> *` keeps the brand accent on the section while descendants inherit white via their direct children — preserving both the colored backdrop and legible descendants. */ [data-sec-theme="primary"] > * { --accent: #ffffff; --accent-hover: rgba(255, 255, 255, 0.9); --accent-rgb: 255, 255, 255; --accent-hover-rgb: 255, 255, 255; --accent-glow: rgba(255, 255, 255, 0.28); } /* Buttons and links inside a primary section: ensure contrast without killing affordance. btn-primary becomes white-on-accent, btn-secondary becomes outlined white. */ /* btn-primary text intentionally does NOT use var(--accent) here: the `> *` rule above flipped --accent to #ffffff on descendants, which would make this resolve to white-on-white. Use the solid-cta token (brand-overridable, fallback dark violet readable on white). */ [data-sec-theme="primary"] .btn-primary { background: #ffffff; color: var(--_solid-cta-primary-fg, #320858); border-color: #ffffff; } [data-sec-theme="primary"] .btn-primary:hover { background: rgba(255, 255, 255, 0.92); color: var(--_solid-cta-primary-fg, #320858); } [data-sec-theme="primary"] .btn-secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.55); } [data-sec-theme="primary"] .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; } /* Section label eyebrow — was accent-colored; use white/soft-white on primary. */ [data-sec-theme="primary"] .section-label, [data-sec-theme="primary"] [class*="-eyebrow"], [data-sec-theme="primary"] [class*="section-eyebrow"] { color: rgba(255, 255, 255, 0.88); } /* Secondary — mirrors primary but with --accent-hover as the background color. Used for sections the author wants to pop with the secondary brand color instead of the primary accent. */ [data-sec-theme="secondary"] { background: linear-gradient(165deg, color-mix(in srgb, var(--accent-hover) 88%, #000) 0%, var(--accent-hover) 55%, color-mix(in srgb, var(--accent-hover) 82%, #000) 100%); background-color: var(--accent-hover); color: #ffffff; position: relative; isolation: isolate; --bg-primary: var(--accent-hover); --bg-primary-rgb: var(--accent-hover-rgb); --bg-secondary: color-mix(in srgb, var(--accent-hover) 80%, #000); --bg-card: color-mix(in srgb, var(--accent-hover) 88%, #fff); --bg-card-hover: color-mix(in srgb, var(--accent-hover) 92%, #fff); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.82); --text-muted: rgba(255, 255, 255, 0.68); --border: rgba(255, 255, 255, 0.22); --border-light: rgba(255, 255, 255, 0.36); } [data-sec-theme="secondary"] .btn-primary { background: #ffffff; color: var(--accent-hover); } [data-sec-theme="secondary"] .btn-primary:hover { background: rgba(255, 255, 255, 0.92); color: color-mix(in srgb, var(--accent-hover) 80%, #000); } [data-sec-theme="secondary"] [class*="-eyebrow"], [data-sec-theme="secondary"] [class*="section-eyebrow"] { color: rgba(255, 255, 255, 0.88); } /* Vibrant — pins this section to the :root authored palette. Brands ship with :root carrying the Vibrant-mode baseline (typically the dark palette), so `vibrant` at the section level reproduces that baseline regardless of the site-wide mode. Under Vibrant site mode this is a no-op; under Dark or Light it breaks this section back into the original rhythm. */ [data-sec-theme="vibrant"] { --bg-primary: #0a0a0b; --bg-secondary: #111113; --bg-card: #18181b; --bg-card-hover: #1f1f23; --bg-primary-rgb: 10, 10, 11; --bg-secondary-rgb: 17, 17, 19; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #9a9aa2; --border: #27272a; --border-light: #3f3f46; background: var(--bg-primary); color: var(--text-primary); } /* Give the override section a hairline boundary in vibrant mode so the palette shift reads intentionally when two adjacent sections differ. */ :where(html[data-theme="vibrant"]) [data-sec-theme] { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent) } :where(html[data-theme="vibrant"]) [data-sec-theme]:first-of-type { border-top: 0 } /* ---- Vibrant rhythm (position-based default) ------------------------ Under Vibrant mode, paint each section according to its position in the page's content-section sequence when no data-sec-theme is set. A 3-beat cadence — dark → light → primary — repeats forever: position 1 hero/header anchor dark (inherits :root) position 2 second section light position 3 third section primary (brand-accent band) position 4 fourth section dark position 5 fifth section light position 6 sixth section primary … The nth-child(N of selector) syntax counts only elements matching [data-section-type], so intervening nav/skip-links/print-stamps don't disturb numbering. The :not([data-sec-theme]) guard means any explicit per-section override in section-overrides.json (or the editor's gear menu) still wins — rhythm only fills the blanks. Footer is excluded from the cadence so its own palette/shadow styling is untouched. Dark (position 3n+1) needs no rule — sections without data-sec-theme already inherit the :root vibrant palette, which is the dark anchor. */ /* Rhythm · light (positions 2, 5, 8, …) */ :where(html[data-theme="vibrant"]) body > :nth-child(3n+2 of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) { --bg-primary: #fafaf9; --bg-secondary: #f4f4f5; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-primary-rgb: 250, 250, 249; --bg-secondary-rgb: 244, 244, 245; --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a; --accent-hover: #5b21b6; --accent-hover-rgb: 91, 33, 182; --border: #e4e4e7; --border-light: #d4d4d8; --bg-image-filter: brightness(1) saturate(0.9); --bg-image-filter-soft: brightness(1.05) saturate(0.85); --bg-image-filter-strong: brightness(0.95) saturate(0.95) contrast(1.02); --shadow-card: 0 10px 28px rgba(15, 23, 42, 0.08), 0 3px 10px rgba(15, 23, 42, 0.04); --shadow-lg: 0 20px 50px -10px rgba(15, 23, 42, 0.15), 0 6px 18px rgba(15, 23, 42, 0.06); --shadow-xl: 0 30px 60px -20px rgba(15, 23, 42, 0.22), 0 10px 24px rgba(15, 23, 42, 0.08); --nav-scrolled-bg: rgba(250, 250, 249, 0.88); --scrim-bg: rgba(15, 23, 42, 0.45); --hero-aurora-blend: multiply; background: var(--bg-primary); color: var(--text-primary); } /* Rhythm · primary (positions 3, 6, 9, …) — mirrors [data-sec-theme="primary"] */ :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) { background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 88%, #000) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 82%, #000) 100%); background-color: var(--accent); color: #ffffff; position: relative; isolation: isolate; --bg-primary: var(--accent); --bg-primary-rgb: var(--accent-rgb); --bg-secondary: color-mix(in srgb, var(--accent) 80%, #000); --bg-card: color-mix(in srgb, var(--accent) 88%, #fff); --bg-card-hover: color-mix(in srgb, var(--accent) 92%, #fff); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.82); --text-muted: rgba(255, 255, 255, 0.68); --border: rgba(255, 255, 255, 0.22); --border-light: rgba(255, 255, 255, 0.36); --shadow-card: 0 14px 32px rgba(0, 0, 0, 0.22); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.28); --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.32); } :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme])::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 18% 12%, rgba(255, 255, 255, 0.18), transparent 60%), radial-gradient(ellipse 55% 45% at 82% 92%, rgba(0, 0, 0, 0.22), transparent 65%); mix-blend-mode: overlay; } /* See [data-sec-theme="primary"] > * comment — accent flipped on descendants only so the section's gradient (which reads var(--accent)) isn't lost. */ :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) > * { --accent: #ffffff; --accent-hover: rgba(255, 255, 255, 0.9); --accent-rgb: 255, 255, 255; --accent-hover-rgb: 255, 255, 255; --accent-glow: rgba(255, 255, 255, 0.28); } /* See sibling [data-sec-theme="primary"] rule — same trap: var(--accent) has been flipped to white on descendants by the `> *` rule above. */ :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) .btn-primary { background: #ffffff; color: var(--_solid-cta-primary-fg, #320858); border-color: #ffffff; } :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) .btn-primary:hover { background: rgba(255, 255, 255, 0.92); color: var(--_solid-cta-primary-fg, #320858); } :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) .btn-secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.55); } :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; } :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) .section-label, :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) [class*="-eyebrow"], :where(html[data-theme="vibrant"]) body > :nth-child(3n of [data-section-type]:not([data-section-type="footer"])):not([data-sec-theme]) [class*="section-eyebrow"] { color: rgba(255, 255, 255, 0.88); } /* Hairline boundary between rhythm sections (mirrors the [data-sec-theme] rule above, but fires when the section is rhythm-painted instead of explicitly themed). Skip the first content section so there's no line under the nav. */ :where(html[data-theme="vibrant"]) body > [data-section-type]:not([data-section-type="footer"]):not([data-sec-theme]) { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } :where(html[data-theme="vibrant"]) body > :nth-child(1 of [data-section-type]:not([data-section-type="footer"])) { border-top: 0; } /* ---- Disabled section ------------------------------------------- Authored via the editor's Visibility toggle. Live visitors get a clean page (section removed from the flow via display:none). An approved editor user gets a compressed, grayed-out stub so they can still see which sections are hidden and tap to preview the content before re-enabling — without actually re-exposing the section to real site traffic. Editor-mode detection: edit.js adds `aed-editor-loaded` to the root on boot (edit.js only loads for approved devices, so the presence of the class is a reliable authorization signal). */ [data-sec-disabled="on"] { display: none } html.aed-editor-loaded [data-sec-disabled="on"] { display: block; position: relative; max-height: 72px; overflow: hidden; padding-top: 0; padding-bottom: 0; margin: 0.5rem 0; border: 1px dashed color-mix(in srgb, var(--border, #3f3f46) 80%, transparent); border-radius: 10px; opacity: 0.52; filter: grayscale(0.85); background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--bg-secondary, #111) 70%, transparent) 0 12px, color-mix(in srgb, var(--bg-primary, #0a0a0b) 70%, transparent) 12px 24px ); transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, filter 0.25s ease; } /* Draw a label + review affordance on top of the collapsed stub. A pseudo-element keeps the markup untouched — section components don't need to know they're being overlaid. */ html.aed-editor-loaded [data-sec-disabled="on"]::before { content: 'Section disabled'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.75rem; font: 700 12px/1.1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--text-secondary, #a1a1aa) 88%, #fff); background: color-mix(in srgb, var(--bg-primary, #0a0a0b) 55%, transparent); backdrop-filter: blur(2px); pointer-events: none; z-index: 2; } html.aed-editor-loaded [data-sec-disabled="on"]::after { content: 'Click to review ↓'; position: absolute; bottom: 8px; right: 12px; padding: 0.3rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent, #10b981) 20%, #000 45%); color: color-mix(in srgb, var(--accent, #10b981) 85%, #fff); border: 1px solid color-mix(in srgb, var(--accent, #10b981) 45%, transparent); font: 600 10.5px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; pointer-events: none; z-index: 3; } html.aed-editor-loaded [data-sec-disabled="on"]:hover { cursor: zoom-in } /* Expanded "review" state — ephemeral class toggled by edit.js on click. Restores layout so the user can inspect the real content; a sticky banner keeps the "disabled" status obvious. */ html.aed-editor-loaded [data-sec-disabled="on"].is-sec-review-open { max-height: none; opacity: 0.92; filter: grayscale(0.25); cursor: zoom-out; } html.aed-editor-loaded [data-sec-disabled="on"].is-sec-review-open::before { position: sticky; top: 0; inset: auto; height: 36px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #10b981) 35%, #000 55%), color-mix(in srgb, var(--accent, #10b981) 20%, #000 70%)); color: #fff; } html.aed-editor-loaded [data-sec-disabled="on"].is-sec-review-open::after { content: 'Click to collapse ↑'; position: sticky; top: 0; transform: translateY(-32px); } /* When the site theme is forced light, the disabled backplate needs a lighter scrim so the label remains legible. */ html.aed-editor-loaded[data-theme="light"] [data-sec-disabled="on"] { background: repeating-linear-gradient( -45deg, color-mix(in srgb, #e4e4e7 70%, transparent) 0 12px, color-mix(in srgb, #fafaf9 70%, transparent) 12px 24px ); } /* ---- 2. Parallax background ------------------------------------- */ /* Standard: no default background on any section. Only sections that opt-in via `data-sec-parallax-bg="on"` render a backdrop, and that backdrop is deliberately faint so the section's color/theme dominates. The faintness keeps any applied bg image reading as texture — not as the primary visual — per the editor's "color is the emphasis" rule. */ [data-sec-parallax-bg="on"] { position: relative; isolation: isolate; } [data-sec-parallax-bg="on"]::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--sec-parallax-url, none); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; filter: var(--bg-image-filter, brightness(0.55) saturate(1.05) contrast(0.95)); opacity: var(--sec-parallax-opacity, 0.18); pointer-events: none; } /* Per-theme bg opacity in vibrant mode: primary/black keep the bg even more muted so the saturated color reads clean; white bumps it slightly for a hint of the texture to register against the bright surface. */ [data-sec-theme="primary"][data-sec-parallax-bg="on"]::before, [data-sec-theme="black"][data-sec-parallax-bg="on"]::before { opacity: 0.12 } [data-sec-theme="white"][data-sec-parallax-bg="on"]::before { opacity: 0.22 } /* iOS/Safari don't reliably support background-attachment: fixed; fall back to a JS-free scroll-linked effect via container query is impractical, so we just leave a static cover image on mobile. */ @media (max-width: 900px) { [data-sec-parallax-bg="on"]::before { background-attachment: scroll } } /* Dim the parallax further on reduced motion — it reads less as parallax and more as a flat backdrop, keeping the intent legible. */ @media (prefers-reduced-motion: reduce) { [data-sec-parallax-bg="on"]::before { background-attachment: scroll; opacity: 0.14 } }