/* Shared section primitives for the theme renderer. Theme-specific CSS overrides these via [data-theme="..."] rules in the per-theme bundles. Frameworks (alternating, accent-bands, layered) apply via [data-framework="..."] in frameworks.css. */ @layer theme, framework, section; /* --- design token DEFAULTS (historically Darkside Tattoo's palette) --- 🚨 These are scoped to the theme wrapper, NOT to :root, and the scoping is load-bearing. Until 2026-08-16 this block sat on bare `:root` — i.e. on — so one client's palette (near-black, cream, gold #dcb96a, Cinzel) was the document-wide default on EVERY themed tenant. Inside [data-theme] that was invisible, because each theme re-declares the same tokens and the nearer element wins by inheritance. Outside it, it was silent breakage: anything mounted as a sibling of the theme wrapper — which is where the root layout's platform-wide ornaments live — inherited Darkside's colours instead of nothing. Worse, because the vars were SET, a defensive `var(--accent, my-fallback)` never reached its fallback, so a component could not opt out even by writing one. That is exactly how the sticky "Book Consultation" bar rendered gold on every themed tenant for months, and why two rounds of fixes that corrected the VALUES changed nothing: the lookup was being intercepted upstream (docs/SESSION-LOG.md 2026-08-16). Scoped here to [data-theme], the defaults reach every section (all of which render inside the wrapper) and reach nothing else. A layout-level component now genuinely sees these vars as unset and gets its own fallback — or, better, uses a dedicated `--tn-*` var. 🚨 `:where()` + `@layer theme` is what keeps the theme bundles winning, and BOTH halves are required. Read before touching either. - `:where([data-theme])` has specificity (0,0,0); a theme bundle's `[data-theme="darkside"]` is (0,1,0), so the bundle wins. A bare `[data-theme]` here would be (0,1,0) too — an exact tie that the defaults would win on source order, flattening every theme. - These defaults sit in `@layer theme`, the SAME layer as the bundles, so that specificity is what decides. Layer order beats specificity, so a block in `@layer section` (the last layer) would outrank every theme bundle no matter how weak its selector. 🚨 Do NOT "improve" this by giving the defaults their own earlier layer. That was tried on 2026-08-16 and is broken in production: `@layer` order is fixed by the FIRST declaration the document parses, and that is `app/globals.css:32` (`@layer app-base, theme, framework, section;`), which loads before ThemeShell's links. A new layer name declared later in sections.css gets appended LAST — i.e. highest precedence — so the defaults would beat all 15 theme bundles. scripts/check-theme-a11y.tsx caught exactly that, because its fixture declares its own layer list too. Staying inside an already-declared layer removes the ordering dependency entirely. */ @layer theme { :where([data-theme]) { --bg: #0c0c0c; --bg-mid: #141414; --section-bg: var(--bg); --text: #ece6dc; --accent: #dcb96a; --accent-text: #dcb96a; --muted: #8a857a; --rule: rgba(220, 185, 106, 0.18); --font-display: 'Cinzel', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --btn-radius: 0; --btn-weight: 600; --btn-transform: uppercase; --btn-tracking: 0.08em; } } @layer section { /* --- theme wrapper base --- The ThemeShell div carries data-theme and the var bundle, but until 2026-07-21 nothing set the wrapper's own color/background/font — so every element that INHERITS its text color picked it up from the surrounding page body instead of the theme. In the owner preview and builder iframes the body carries the network chrome's dark-mode CSS (near-white text), which ghosted all inheriting text (FAQ headlines, accordion questions, plain links) on light themes like Atelier (operator screenshot 2026-07-21). Explicitly-colored elements (accent eyebrows, muted body copy) looked fine, which is why it read as "some text missing" rather than a dead page. */ [data-theme] { color: var(--text); background: var(--bg); font-family: var(--font-body); } /* --- long-token overflow guard --- Content arriving from the Instagram ingest routinely contains tokens that CANNOT break at a normal wrap opportunity: @handles, hashtags and bare URLs. `@paradisetattoogathering` is a single 24-character word; in a display-serif heading at phone width it is wider than the column, and with no wrap rule it does not merely overflow its own box -- it widens the whole section and clips every neighbouring line at the viewport edge (operator screenshots, 2026-08-02: "Back in offic", "Check out Cecil Porters new site! Bee"). break-word rather than anywhere: it only breaks a token that cannot otherwise fit, so ordinary copy keeps its natural wrapping and min-content sizing is left alone. Declared once on the theme wrapper's text elements so every theme and every section inherits it -- this class of bug should not be fixable one section at a time. */ [data-theme] :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, a, span) { overflow-wrap: break-word; } /* Scroll anchor emitted by SectionRouter before each section so nav + interior /#{sectionKey} links (/#about, /#services, /#roster, /#consult, …) land at the top of the section. Zero-height so it never affects layout; scroll-margin-top offsets a fixed/overlay nav. */ .section-anchor { display: block; height: 0; scroll-margin-top: 88px; } /* --- per-section animation kill-switch --- SectionRouter wraps a variant in when the operator has disabled animations for that section in the builder. This selector suppresses every animation + transition under that wrapper without us having to touch the 30+ keyframes/animation rules scattered through the section/theme CSS. Section-level fades, hero slideshows, glow pulses, etc. all freeze on their first frame. The wrapper has no box (display:contents) so layout is unaffected. */ [data-animations-off="true"], [data-animations-off="true"] *, [data-animations-off="true"] *::before, [data-animations-off="true"] *::after { animation: none !important; transition: none !important; } /* --- reset --- Ported from assembler global reset (lines 11-24). Applied here so the section renderer is self-contained. If a surrounding layout already resets these, the cascade still wins correctly. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } summary::marker { content: ''; } /* The design token defaults moved OUT of this layer and off :root on 2026-08-16 — see the @layer tokens block at the top of this file for why. Button tokens (--btn-*) are still shared primitives referenced by every CTA in every section; they just live on the theme wrapper now. */ /* --- page canvas --- 🚨 Deliberately does NOT set background / color / font-family. app/layout.tsx emits an UNLAYERED `html {}` + `body {}` rule carrying the tenant's resolved brand values, and unlayered beats any layer at any specificity — so the three declarations that used to live here (`background: var(--bg)` etc.) were already overridden on every tenant render and were dead weight. They were also the only reason this rule needed document-scope theme tokens at all. Verified 2026-08-16 by diffing computed styles on a real served page before/after removal: zero change, on included. The container context is real and stays — section variants query it. */ body { container-type: inline-size; container-name: preview; } /* Every top-level section in the renderer carries `.slot` so framework selectors can target them by nth-of-type. */ body > .slot { width: 100%; background: var(--section-bg); } h1, h2, h3, h4, h5, h6 { font-weight: inherit; line-height: 1.15; font-family: var(--font-display); } /* --- sr-only --- Standard visually-hidden utility. Used by nav hamburger labels, rating aria-labels, and any other screen-reader-only text. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --- nav-cta --- Shared CTA pill used across all nav variants (horizontal-wordmark, logo-centered, hamburger-desktop). Defined here so all three nav section files can use it without redeclaring it. */ .nav-cta { padding: 8px 18px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 11px; letter-spacing: var(--btn-tracking, 0.16em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 100px); font-weight: var(--btn-weight, 500); transition: background 0.15s, color 0.15s; white-space: nowrap; } .nav-cta:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } /* --- mobile-overlay --- Shared fullscreen menu overlay used by nav variants A and B on mobile. Variant C (hamburger-desktop) uses its own .nav-hb__overlay but the same structural pattern applies. */ .mobile-overlay-toggle { list-style: none; cursor: pointer; } .mobile-overlay-toggle::-webkit-details-marker { display: none; } .mobile-overlay-toggle::marker { display: none; content: ''; } .mobile-hamburger { display: flex; flex-direction: column; gap: 5px; width: 24px; } .mobile-hamburger span { display: block; height: 2px; background: var(--accent); border-radius: 1px; } .mobile-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 12, 12, 0.97); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px; } .mobile-overlay-close { position: absolute; top: 28px; right: 24px; font-family: var(--font-body); font-size: 32px; font-weight: 300; color: var(--text); cursor: pointer; background: none; border: none; line-height: 1; opacity: 0.7; transition: opacity 0.15s, color 0.15s; } .mobile-overlay-close:hover { opacity: 1; color: var(--accent-text); } .mobile-overlay a { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); transition: color 0.15s; } .mobile-overlay a:hover { color: var(--accent-text); } .mobile-overlay .nav-cta { font-family: var(--font-body); font-size: 13px; padding: 12px 28px; margin-top: 12px; } /*

overlay hidden when closed (no-JS pattern) */ .mobile-details:not([open]) .mobile-overlay { display: none; } /* ===================================================================== Hero section — all variants Scoped to [data-section="hero"][data-variant=""] so the same class names can safely coexist on one page (variant catalog view). CSS ported from assembler index.html lines 682-1001 + 5339-5479. ===================================================================== */ /* --- Variant A: image-static --- */ [data-section="hero"][data-variant="a"] .hero-static { position: relative; height: 720px; overflow: hidden; } [data-section="hero"][data-variant="a"] .hero-static__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) contrast(1.05); } [data-section="hero"][data-variant="a"] .hero-static__caption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; background: linear-gradient(to top, rgba(12,12,12,0.75) 0%, rgba(12,12,12,0) 50%); } [data-section="hero"][data-variant="a"] .hero-static__eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; } [data-section="hero"][data-variant="a"] .hero-static__name { font-family: var(--font-display); font-weight: 600; font-size: 88px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; line-height: 0.95; } [data-section="hero"][data-variant="a"] .hero-static__name .accent { color: var(--accent-text); } [data-section="hero"][data-variant="a"] .hero-static__tagline { font-family: var(--font-body); font-size: 16px; color: var(--text); opacity: 0.86; margin-bottom: 30px; letter-spacing: 0.02em; } [data-section="hero"][data-variant="a"] .hero-static__cta { align-self: flex-start; padding: 14px 28px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 12px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); transition: background 0.15s, color 0.15s; } [data-section="hero"][data-variant="a"] .hero-static__cta:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } @container preview (max-width: 900px) { [data-section="hero"][data-variant="a"] .hero-static__caption { padding-left: 24px; padding-right: 24px; } [data-section="hero"][data-variant="a"] .hero-static__name { font-size: 56px; } [data-section="hero"][data-variant="a"] .hero-static { height: 580px; } } /* --- Variant B: split-image-text --- */ [data-section="hero"][data-variant="b"] .hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; } [data-section="hero"][data-variant="b"] .hero-split__text { display: flex; flex-direction: column; justify-content: center; padding: 80px 64px; background: var(--section-bg); } [data-section="hero"][data-variant="b"] .hero-split__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 22px; } [data-section="hero"][data-variant="b"] .hero-split__name { font-family: var(--font-display); font-weight: 600; font-size: 64px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); line-height: 1.05; margin-bottom: 18px; } [data-section="hero"][data-variant="b"] .hero-split__name .accent { color: var(--accent-text); } [data-section="hero"][data-variant="b"] .hero-split__tag { font-size: 15px; color: var(--text); opacity: 0.78; line-height: 1.65; max-width: 38ch; margin-bottom: 28px; } [data-section="hero"][data-variant="b"] .hero-split__creds { display: flex; gap: 28px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 32px; } [data-section="hero"][data-variant="b"] .hero-split__cred-item { display: flex; flex-direction: column; gap: 4px; } [data-section="hero"][data-variant="b"] .hero-split__cred-num { font-family: var(--font-display); font-size: 28px; color: var(--accent-text); font-weight: 500; } [data-section="hero"][data-variant="b"] .hero-split__cred-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } [data-section="hero"][data-variant="b"] .hero-split__ctas { display: flex; gap: 14px; align-items: center; } [data-section="hero"][data-variant="b"] .hero-split__cta-primary { padding: 14px 28px; background: var(--accent); color: var(--accent-contrast, var(--bg)); font-size: 12px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); } [data-section="hero"][data-variant="b"] .hero-split__cta-secondary { padding: 14px 18px; color: var(--text); font-size: 12px; letter-spacing: var(--btn-tracking, 0.14em); text-transform: var(--btn-transform, uppercase); border-bottom: 1px solid var(--rule); font-weight: var(--btn-weight, 500); } [data-section="hero"][data-variant="b"] .hero-split__cta-secondary:hover { color: var(--accent-text); border-color: var(--accent); } [data-section="hero"][data-variant="b"] .hero-split__img-wrap { position: relative; overflow: hidden; } [data-section="hero"][data-variant="b"] .hero-split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @container preview (max-width: 900px) { [data-section="hero"][data-variant="b"] .hero-split { grid-template-columns: 1fr; } [data-section="hero"][data-variant="b"] .hero-split__text { padding: 56px 24px; } [data-section="hero"][data-variant="b"] .hero-split__name { font-size: 48px; } [data-section="hero"][data-variant="b"] .hero-split__img-wrap { min-height: 360px; position: relative; } } /* --- Variant C: image-with-overlay --- */ [data-section="hero"][data-variant="c"] .hero-overlay { position: relative; height: 800px; overflow: hidden; } [data-section="hero"][data-variant="c"] .hero-overlay__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) contrast(1.08); } [data-section="hero"][data-variant="c"] .hero-overlay__veil { position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 35%, rgba(12,12,12,0) 0%, rgba(12,12,12,0.75) 70%, rgba(12,12,12,0.95) 100% ); } /* Dark-theme HeroC: the default brightness(0.45) + near-opaque veil crushed a lone portrait to black on dark backgrounds, so the hero read empty for thin tenants (2026-07-25 gallery audit, flaw 2). Lighten the image + soften the veil for dark themes; light themes keep the strong scrim for white-text legibility. */ [data-theme="studio-note"] [data-section="hero"][data-variant="c"] .hero-overlay__img, [data-theme="obsidian"] [data-section="hero"][data-variant="c"] .hero-overlay__img, [data-theme="darkside"] [data-section="hero"][data-variant="c"] .hero-overlay__img { filter: brightness(0.7) contrast(1.05); } [data-theme="studio-note"] [data-section="hero"][data-variant="c"] .hero-overlay__veil, [data-theme="obsidian"] [data-section="hero"][data-variant="c"] .hero-overlay__veil, [data-theme="darkside"] [data-section="hero"][data-variant="c"] .hero-overlay__veil { background: radial-gradient( ellipse at 50% 40%, rgba(12,12,12,0) 0%, rgba(12,12,12,0.35) 65%, rgba(12,12,12,0.6) 100% ); } [data-section="hero"][data-variant="c"] .hero-overlay__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 56px; } [data-section="hero"][data-variant="c"] .hero-overlay__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; } [data-section="hero"][data-variant="c"] .hero-overlay__wordmark .accent { color: var(--accent-text); } [data-section="hero"][data-variant="c"] .hero-overlay__rule { width: 64px; height: 1px; background: var(--accent); margin-bottom: 30px; } [data-section="hero"][data-variant="c"] .hero-overlay__tagline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 52px; letter-spacing: 0.01em; color: var(--text); line-height: 1.15; max-width: 880px; margin-bottom: 16px; } [data-section="hero"][data-variant="c"] .hero-overlay__sub { font-size: 14px; color: var(--text); opacity: 0.72; letter-spacing: 0.06em; margin-bottom: 44px; } [data-section="hero"][data-variant="c"] .hero-overlay__ctas { display: flex; gap: 16px; } [data-section="hero"][data-variant="c"] .hero-overlay__cta-primary { padding: 15px 32px; background: var(--accent); color: var(--accent-contrast, var(--bg)); font-size: 12px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); } [data-section="hero"][data-variant="c"] .hero-overlay__cta-secondary { padding: 15px 32px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 12px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); transition: background 0.15s, color 0.15s; } [data-section="hero"][data-variant="c"] .hero-overlay__cta-secondary:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } @container preview (max-width: 900px) { [data-section="hero"][data-variant="c"] .hero-overlay__content { padding-left: 24px; padding-right: 24px; } [data-section="hero"][data-variant="c"] .hero-overlay { height: 640px; } [data-section="hero"][data-variant="c"] .hero-overlay__tagline { font-size: 34px; } [data-section="hero"][data-variant="c"] .hero-overlay__wordmark { font-size: 22px; letter-spacing: 0.24em; } [data-section="hero"][data-variant="c"] .hero-overlay__ctas { flex-direction: column; width: 100%; max-width: 320px; } [data-section="hero"][data-variant="c"] .hero-overlay__ctas a { width: 100%; text-align: center; } } /* --- Variant D: ken-burns-slideshow --- */ @keyframes kenburns { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } [data-section="hero"][data-variant="d"] .hero-burns { position: relative; height: 780px; overflow: hidden; background: var(--section-bg); } [data-section="hero"][data-variant="d"] .hero-burns__slides { position: absolute; inset: 0; } [data-section="hero"][data-variant="d"] .hero-burns__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; } [data-section="hero"][data-variant="d"] .hero-burns__slide.is-active { opacity: 1; } [data-section="hero"][data-variant="d"] .hero-burns__slide img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 20s ease-in-out infinite; } [data-section="hero"][data-variant="d"] .hero-burns__slide--1 img { animation-delay: 0s; transform-origin: center center; } [data-section="hero"][data-variant="d"] .hero-burns__slide--2 img { animation-delay: 0s; transform-origin: top left; } [data-section="hero"][data-variant="d"] .hero-burns__slide--3 img { animation-delay: 0s; transform-origin: bottom right; } [data-section="hero"][data-variant="d"] .hero-burns__slide--4 img { animation-delay: 0s; transform-origin: top right; } [data-section="hero"][data-variant="d"] .hero-burns__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(12,12,12,0.8) 0%, rgba(12,12,12,0.2) 40%, rgba(12,12,12,0.1) 100% ); z-index: 1; } [data-section="hero"][data-variant="d"] .hero-burns__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 64px; } [data-section="hero"][data-variant="d"] .hero-burns__eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; } [data-section="hero"][data-variant="d"] .hero-burns__name { font-family: var(--font-display); font-weight: 600; font-size: 80px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; line-height: 0.95; } [data-section="hero"][data-variant="d"] .hero-burns__name .accent { color: var(--accent-text); } [data-section="hero"][data-variant="d"] .hero-burns__tagline { font-size: 16px; color: var(--text); opacity: 0.86; margin-bottom: 30px; max-width: 540px; } [data-section="hero"][data-variant="d"] .hero-burns__cta { align-self: flex-start; padding: 14px 28px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 12px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); transition: background 0.15s, color 0.15s; } [data-section="hero"][data-variant="d"] .hero-burns__cta:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } @container preview (max-width: 900px) { [data-section="hero"][data-variant="d"] .hero-burns { height: 580px; } [data-section="hero"][data-variant="d"] .hero-burns__content { padding: 32px 24px; } [data-section="hero"][data-variant="d"] .hero-burns__name { font-size: 48px; } } /* --- Variant E: parallax-pan --- */ @keyframes heroPan { 0% { object-position: 30% center; } 100% { object-position: 70% center; } } [data-section="hero"][data-variant="e"] .hero-pan { position: relative; overflow: hidden; min-height: 520px; background: var(--bg); } [data-section="hero"][data-variant="e"] .hero-pan__img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; animation: heroPan 20s ease-in-out infinite alternate; } [data-section="hero"][data-variant="e"] .hero-pan__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 48px 56px; background: linear-gradient(to top, rgba(12,12,12,0.95) 0%, transparent 100%); } [data-section="hero"][data-variant="e"] .hero-pan__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; } [data-section="hero"][data-variant="e"] .hero-pan__name { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; } [data-section="hero"][data-variant="e"] .hero-pan__name .accent { color: var(--accent-text); } [data-section="hero"][data-variant="e"] .hero-pan__tagline { font-size: 16px; color: var(--muted); max-width: 540px; margin-bottom: 20px; } [data-section="hero"][data-variant="e"] .hero-pan__cta { display: inline-block; padding: 12px 28px; background: var(--accent); color: var(--accent-contrast, var(--bg)); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px; } /* --- Variant L: literary-quote --- Ported from the Nevermore Tattoo Collective source design. The source renders its backdrop grayscale at 30% opacity under a top-to-bottom gradient, so the photo reads as texture and never competes with the type -- reproduced here with the filter + veil rather than by baking a treated image, so any tenant's own photo gets the same handling. --- */ [data-section="hero"][data-variant="l"] .hero-literary { position: relative; min-height: 760px; display: flex; align-items: center; justify-content: center; overflow: hidden; } [data-section="hero"][data-variant="l"] .hero-literary__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.42) contrast(1.06); } [data-section="hero"][data-variant="l"] .hero-literary__veil { position: absolute; inset: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--bg) 80%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 45%, var(--bg) 100% ); } [data-section="hero"][data-variant="l"] .hero-literary__content { position: relative; max-width: 900px; padding: 96px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Not raw var(--accent): measured on Nevermore, whose accent resolves to the source's own --primary (#8E0B0B), that is 2.01:1 on near-black -- the SOURCE DESIGN ITSELF fails WCAG here, and rendering it literally would ship an unreadable eyebrow. Mixing toward --text keeps the hue (still plainly red) and lifts it to ~5:1. The mix direction is self-correcting across themes: on a light theme it darkens the accent instead, improving contrast there too. */ [data-section="hero"][data-variant="l"] .hero-literary__eyebrow { color: color-mix(in srgb, var(--accent) 55%, var(--text)); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; margin: 0 0 24px; } /* The wordmark is the whole point of this variant: display scale, wide tracking, serif. clamp() keeps a long studio name on one or two lines instead of overflowing the way a fixed 9rem would. */ [data-section="hero"][data-variant="l"] .hero-literary__wordmark { font-family: var(--font-display); font-size: clamp(44px, 9vw, 132px); line-height: 0.9; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin: 0 0 32px; text-wrap: balance; } [data-section="hero"][data-variant="l"] .hero-literary__rule { width: 64px; height: 1px; /* Same reasoning as the eyebrow, but a decorative divider needs less lift than text, so it keeps more of the accent. */ background: color-mix(in srgb, var(--accent) 70%, var(--text)); margin: 0 0 32px; } [data-section="hero"][data-variant="l"] .hero-literary__quote { max-width: 34em; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7; font-style: italic; color: var(--muted, var(--text)); margin: 0 0 44px; } [data-section="hero"][data-variant="l"] .hero-literary__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } [data-section="hero"][data-variant="l"] .hero-literary__cta { padding: 20px 40px; color: var(--text); font-size: 13px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); font-weight: var(--btn-weight, 500); border: 1px solid color-mix(in srgb, var(--text) 50%, transparent); border-radius: var(--btn-radius, 0); transition: background 0.4s, color 0.4s, border-color 0.4s; } [data-section="hero"][data-variant="l"] .hero-literary__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, var(--bg)); } @container preview (max-width: 900px) { [data-section="hero"][data-variant="l"] .hero-literary { min-height: 560px; } [data-section="hero"][data-variant="l"] .hero-literary__content { padding: 64px 20px; } [data-section="hero"][data-variant="l"] .hero-literary__quote { margin-bottom: 32px; } [data-section="hero"][data-variant="l"] .hero-literary__cta { padding: 16px 28px; } } @media (prefers-reduced-motion: reduce) { [data-section="hero"][data-variant="l"] .hero-literary__cta { transition: none; } } /* --- Variant M: luminous-mark --- The source lights its logo with a pulsing gold drop-shadow (40px -> 100px over 5s) and parallaxes it behind the wordmark. Reproduced with a CSS glow keyed to --accent so any tenant's mark gets the same treatment, and the animation is dropped entirely under prefers-reduced-motion. --- */ [data-section="hero"][data-variant="m"] .hero-mark { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: radial-gradient( circle at 50% 45%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, var(--bg) 65% ); } /* The source layers this exactly: a warm radial wash, the mark FULL-BLEED as object-cover at 60% opacity, then a 30% background scrim over it. Full-bleed is why the source has no hard edge -- an earlier cut here floated the mark centred at `object-fit: contain`, which framed its opaque black field as a visible rectangle. Copying the source's treatment removes the edge at the root rather than masking it. */ [data-section="hero"][data-variant="m"] .hero-mark__glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* from-primary/30 via-transparent — the hot centre behind the mark. */ [data-section="hero"][data-variant="m"] .hero-mark__glow::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient( circle at center, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 55% ); } [data-section="hero"][data-variant="m"] .hero-mark__glow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* Far below the source's opacity-60. Its mark artwork carries its OWN engraved wordmark, so at 60% it collides with the h1 -- the name reads twice, overlapping, and the CTAs disappear into it. Knocked back to texture, the artwork still fills the frame (no hard edge, which is the point) but the accessible wordmark stays the thing you read. */ opacity: 0.22; z-index: 2; animation: hero-mark-breathe 5s ease-in-out infinite; } /* bg-background/30 — knocks the mark back so the wordmark stays first. */ [data-section="hero"][data-variant="m"] .hero-mark__glow::after { content: ''; position: absolute; inset: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 55%, transparent); } /* Source: drop-shadow 40px -> 100px of gold over 5s. No transform here -- the mark is object-cover now, so scaling it would crop rather than breathe. */ @keyframes hero-mark-breathe { 0%, 100% { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 40%, transparent)); opacity: 0.18; } 50% { filter: drop-shadow(0 0 100px color-mix(in srgb, var(--accent) 90%, transparent)); opacity: 0.3; } } [data-section="hero"][data-variant="m"] .hero-mark__content { position: relative; text-align: center; padding: 96px 24px; max-width: 1000px; } [data-section="hero"][data-variant="m"] .hero-mark__wordmark { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: 1.05; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 24px; /* The mark sits directly behind the type, so the wordmark carries its own shadow rather than relying on a veil that would dim the glow. */ text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95); } [data-section="hero"][data-variant="m"] .hero-mark__lead { color: var(--text); } [data-section="hero"][data-variant="m"] .hero-mark__tail { color: var(--accent-text); font-size: 0.86em; } [data-section="hero"][data-variant="m"] .hero-mark__sub { margin: 0 0 44px; font-size: clamp(0.95rem, 1.6vw, 1.25rem); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 300; color: var(--text); text-shadow: 0 4px 15px rgba(0, 0, 0, 0.95); } [data-section="hero"][data-variant="m"] .hero-mark__ctas { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } [data-section="hero"][data-variant="m"] .hero-mark__cta { padding: 16px 32px; font-size: 13px; letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); font-weight: var(--btn-weight, 500); border-radius: var(--btn-radius, 0); border: 1px solid transparent; transition: background 0.3s, color 0.3s, border-color 0.3s; } [data-section="hero"][data-variant="m"] .hero-mark__cta--primary { background: var(--accent); color: var(--accent-contrast, var(--bg)); border-color: var(--accent); } [data-section="hero"][data-variant="m"] .hero-mark__cta--primary:hover { background: var(--text); border-color: var(--text); } [data-section="hero"][data-variant="m"] .hero-mark__cta--ghost { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); } [data-section="hero"][data-variant="m"] .hero-mark__cta--ghost:hover { background: var(--text); color: var(--bg); } [data-section="hero"][data-variant="m"] .hero-mark__cta--accent { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); } [data-section="hero"][data-variant="m"] .hero-mark__cta--accent:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } @container preview (max-width: 900px) { [data-section="hero"][data-variant="m"] .hero-mark { min-height: 640px; } [data-section="hero"][data-variant="m"] .hero-mark__content { padding: 64px 20px; } [data-section="hero"][data-variant="m"] .hero-mark__glow img { width: 88%; } [data-section="hero"][data-variant="m"] .hero-mark__cta { padding: 14px 22px; } } @media (prefers-reduced-motion: reduce) { [data-section="hero"][data-variant="m"] .hero-mark__glow img { animation: none; opacity: 0.22; filter: drop-shadow(0 0 60px color-mix(in srgb, var(--accent) 55%, transparent)); } [data-section="hero"][data-variant="m"] .hero-mark__cta { transition: none; } } /* ===================================================================== Nav section — all variants Scoped to [data-section="nav"][data-variant=""] so the same class names can safely coexist on one page (variant catalog view). CSS ported from assembler index.html lines 427-679 + 5249-5338. Shared rules (.nav-cta, .mobile-overlay, .mobile-hamburger) are already defined above — not redeclared here. ===================================================================== */ /* --- Variant A: nav-horizontal-wordmark --- */ [data-section="nav"][data-variant="a"] .nav-hw { display: flex; justify-content: space-between; align-items: center; padding: 22px 56px; border-bottom: 1px solid var(--rule); background: var(--section-bg); } [data-section="nav"][data-variant="a"] .nav-hw__wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; font-size: 18px; color: var(--text); text-transform: uppercase; white-space: nowrap; } [data-section="nav"][data-variant="a"] .nav-hw__wordmark .accent { color: var(--accent-text); } [data-section="nav"][data-variant="a"] .nav-hw__links { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } [data-section="nav"][data-variant="a"] .nav-hw__links a { color: var(--text); opacity: 0.78; transition: opacity 0.15s, color 0.15s; } [data-section="nav"][data-variant="a"] .nav-hw__links a:hover { opacity: 1; color: var(--accent-text); } [data-section="nav"][data-variant="a"] .nav-hw__right { display: flex; align-items: center; gap: 28px; flex-shrink: 0; } [data-section="nav"][data-variant="a"] .nav-hw__burger { display: none; } /* The wordmark is a nowrap flex item, so a long tenant name (GBP business names run 40+ chars: "Justin (iam3) Leifeste / Texas Tattoo Artist") overflowed the bar and pushed the hamburger clean off the right edge — the phone was left with no way to open the menu (caught 2026-07-26). Let the wordmark shrink; never the burger. */ [data-section="nav"][data-variant="a"] .nav-hw > a { min-width: 0; } [data-section="nav"][data-variant="a"] .nav-hw__wordmark { overflow: hidden; text-overflow: ellipsis; } @container (max-width: 900px) { [data-section="nav"][data-variant="a"] .nav-hw { padding: 18px 24px; gap: 12px; } [data-section="nav"][data-variant="a"] .nav-hw__links { display: none; } [data-section="nav"][data-variant="a"] .nav-hw__right .nav-cta { display: none; } [data-section="nav"][data-variant="a"] .nav-hw__burger { display: block; } /* Wrap to at most 2 lines on a phone rather than ellipsing most of the name away — this bar isn't sticky, so the extra line costs nothing. */ [data-section="nav"][data-variant="a"] .nav-hw__wordmark { white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* --- Variant B: nav-logo-centered --- */ [data-section="nav"][data-variant="b"] .nav-lc { display: flex; justify-content: center; align-items: center; padding: 18px 56px; border-bottom: 1px solid var(--rule); background: var(--section-bg); position: relative; } [data-section="nav"][data-variant="b"] .nav-lc__left, [data-section="nav"][data-variant="b"] .nav-lc__right-links { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } [data-section="nav"][data-variant="b"] .nav-lc__left a, [data-section="nav"][data-variant="b"] .nav-lc__right-links a { color: var(--text); opacity: 0.78; transition: opacity 0.15s, color 0.15s; } [data-section="nav"][data-variant="b"] .nav-lc__left a:hover, [data-section="nav"][data-variant="b"] .nav-lc__right-links a:hover { opacity: 1; color: var(--accent-text); } [data-section="nav"][data-variant="b"] .nav-lc__logo { height: 40px; width: auto; margin: 0 48px; } [data-section="nav"][data-variant="b"] .nav-lc__wordmark { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 48px; color: var(--text); } [data-section="nav"][data-variant="b"] .nav-lc__right { display: flex; align-items: center; gap: 28px; } [data-section="nav"][data-variant="b"] .nav-lc__burger { display: none; } @container (max-width: 900px) { [data-section="nav"][data-variant="b"] .nav-lc { padding: 18px 24px; justify-content: space-between; } [data-section="nav"][data-variant="b"] .nav-lc__left { display: none; } [data-section="nav"][data-variant="b"] .nav-lc__right-links { display: none; } [data-section="nav"][data-variant="b"] .nav-lc__right .nav-cta { display: none; } [data-section="nav"][data-variant="b"] .nav-lc__logo { margin: 0; height: 36px; } [data-section="nav"][data-variant="b"] .nav-lc__burger { display: block; } } /* --- Variant C: nav-hamburger-desktop --- */ [data-section="nav"][data-variant="c"] .nav-hb { display: flex; justify-content: space-between; align-items: center; padding: 18px 56px; border-bottom: 1px solid var(--rule); background: var(--section-bg); } [data-section="nav"][data-variant="c"] .nav-hb__logo { height: 36px; width: auto; } [data-section="nav"][data-variant="c"] .nav-hb__wordmark { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); } [data-section="nav"][data-variant="c"] .nav-hb__toggle { list-style: none; cursor: pointer; } [data-section="nav"][data-variant="c"] .nav-hb__toggle::-webkit-details-marker { display: none; } [data-section="nav"][data-variant="c"] .nav-hb__toggle::marker { display: none; content: ''; } [data-section="nav"][data-variant="c"] .nav-hb__hamburger { display: flex; flex-direction: column; gap: 5px; width: 28px; } [data-section="nav"][data-variant="c"] .nav-hb__hamburger span { display: block; height: 2px; background: var(--accent); border-radius: 1px; transition: opacity 0.15s; } [data-section="nav"][data-variant="c"] .nav-hb__overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 12, 12, 0.97); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px; } [data-section="nav"][data-variant="c"] .nav-hb__overlay-close { position: absolute; top: 28px; right: 56px; font-family: var(--font-body); font-size: 32px; font-weight: 300; color: var(--text); cursor: pointer; background: none; border: none; line-height: 1; opacity: 0.7; transition: opacity 0.15s, color 0.15s; } [data-section="nav"][data-variant="c"] .nav-hb__overlay-close:hover { opacity: 1; color: var(--accent-text); } [data-section="nav"][data-variant="c"] .nav-hb__overlay a { font-family: var(--font-display); font-size: 36px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); transition: color 0.15s; } [data-section="nav"][data-variant="c"] .nav-hb__overlay a:hover { color: var(--accent-text); } [data-section="nav"][data-variant="c"] .nav-hb__overlay .nav-cta { font-family: var(--font-body); font-size: 14px; padding: 14px 32px; margin-top: 12px; } [data-section="nav"][data-variant="c"] .nav-hb__details:not([open]) .nav-hb__overlay { display: none; } @container (max-width: 900px) { [data-section="nav"][data-variant="c"] .nav-hb { padding: 18px 24px; } [data-section="nav"][data-variant="c"] .nav-hb__overlay-close { right: 24px; } } /* --- Variant D: nav-underline-draw --- */ [data-section="nav"][data-variant="d"] .nav-draw { display: flex; align-items: center; justify-content: space-between; background: var(--section-bg); padding: 18px 56px; border-bottom: 1px solid var(--rule); } [data-section="nav"][data-variant="d"] .nav-draw__wordmark { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } [data-section="nav"][data-variant="d"] .nav-draw__wordmark .accent { color: var(--accent-text); } [data-section="nav"][data-variant="d"] .nav-draw__right { display: flex; align-items: center; gap: 6px; } [data-section="nav"][data-variant="d"] .nav-draw__links { display: flex; gap: 28px; margin-right: 20px; } [data-section="nav"][data-variant="d"] .nav-draw__links a { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; position: relative; transition: color 0.2s; } [data-section="nav"][data-variant="d"] .nav-draw__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } [data-section="nav"][data-variant="d"] .nav-draw__links a:hover { color: var(--text); } [data-section="nav"][data-variant="d"] .nav-draw__links a:hover::after { transform: scaleX(1); } [data-section="nav"][data-variant="d"] .nav-draw__cta { background: linear-gradient(135deg, var(--accent), #c9a44e); background-size: 200% 200%; color: var(--bg); padding: 8px 20px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; transition: background-position 0.4s ease; } [data-section="nav"][data-variant="d"] .nav-draw__cta:hover { background-position: 100% 100%; } [data-section="nav"][data-variant="d"] .nav-draw__burger { display: none; } [data-section="nav"][data-variant="d"] .nav-draw > a { min-width: 0; } [data-section="nav"][data-variant="d"] .nav-draw__right { flex-shrink: 0; } @container (max-width: 768px) { [data-section="nav"][data-variant="d"] .nav-draw { padding: 18px 24px; gap: 12px; } [data-section="nav"][data-variant="d"] .nav-draw__links { display: none; } /* Without this the phone got wordmark + Book and NO menu at all. */ [data-section="nav"][data-variant="d"] .nav-draw__burger { display: block; margin-left: 14px; } } /* --- Variant E: nav-blur-reveal --- */ @keyframes navReveal { from { filter: blur(6px); opacity: 0.5; } to { filter: blur(0); opacity: 1; } } [data-section="nav"][data-variant="e"] .nav-reveal { display: flex; align-items: center; justify-content: space-between; background: var(--section-bg); padding: 18px 56px; border-bottom: 1px solid var(--rule); animation: navReveal 1s ease forwards; } [data-section="nav"][data-variant="e"] .nav-reveal__wordmark { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } [data-section="nav"][data-variant="e"] .nav-reveal__wordmark .accent { color: var(--accent-text); } [data-section="nav"][data-variant="e"] .nav-reveal__right { display: flex; align-items: center; gap: 6px; } [data-section="nav"][data-variant="e"] .nav-reveal__links { display: flex; gap: 28px; margin-right: 20px; } [data-section="nav"][data-variant="e"] .nav-reveal__links a { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.2s; } [data-section="nav"][data-variant="e"] .nav-reveal__links a:hover { color: var(--accent-text); } [data-section="nav"][data-variant="e"] .nav-reveal__burger { display: none; } @container (max-width: 768px) { [data-section="nav"][data-variant="e"] .nav-reveal__links { display: none; } [data-section="nav"][data-variant="e"] .nav-reveal__right > .nav-cta { display: none; } [data-section="nav"][data-variant="e"] .nav-reveal__burger { display: block; } } /* --- Variant F: nav-three-zone-event-headline --- */ /* Single-row 3-zone bar: logo LEFT, italic-bold event headline CENTER, anchor links RIGHT. No hamburger, no scroll behavior, no CTA pill. The persistent center event-info zone distinguishes this from A–E. */ [data-section="nav"][data-variant="f"] .nav-tze { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 48px; height: 60px; border-bottom: 1px solid var(--rule); background: var(--section-bg); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } [data-section="nav"][data-variant="f"] .nav-tze__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; } [data-section="nav"][data-variant="f"] .nav-tze__brand img { height: 30px; width: auto; } [data-section="nav"][data-variant="f"] .nav-tze__headline { text-align: center; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; text-transform: none; color: var(--accent-text); } [data-section="nav"][data-variant="f"] .nav-tze__headline em { font-style: italic; } [data-section="nav"][data-variant="f"] .nav-tze__right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } [data-section="nav"][data-variant="f"] .nav-tze__burger { display: none; } [data-section="nav"][data-variant="f"] .nav-tze__links { display: flex; gap: 24px; } [data-section="nav"][data-variant="f"] .nav-tze__links a { color: var(--text); opacity: 0.78; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.15s, color 0.15s; } [data-section="nav"][data-variant="f"] .nav-tze__links a:hover { opacity: 1; color: var(--accent-text); } @container (max-width: 900px) { [data-section="nav"][data-variant="f"] .nav-tze { grid-template-columns: auto 1fr; padding: 0 24px; } [data-section="nav"][data-variant="f"] .nav-tze__headline { display: none; } [data-section="nav"][data-variant="f"] .nav-tze__links { display: none; } [data-section="nav"][data-variant="f"] .nav-tze__burger { display: block; } } /* --- Variant G: nav-brand-left-centered-links-cta --- */ /* auto 1fr auto 3-zone sticky nav. LEFT = brand serif 26px. CENTER = flex row up to 6 anchor links (centered). RIGHT = phone + accent CTA pill. Glassmorphism backdrop-filter. Center links hidden ≤1024px; phone hidden ≤640px. */ [data-section="nav"][data-variant="g"] .nav-bzc { position: sticky; top: 0; height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 32px; background: color-mix(in srgb, var(--section-bg, #0c0c0c) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); z-index: 50; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-body), sans-serif; } [data-section="nav"][data-variant="g"] .nav-bzc__brand { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: var(--text); display: inline-flex; align-items: center; gap: 12px; } [data-section="nav"][data-variant="g"] .nav-bzc__brand img { height: 30px; width: auto; } [data-section="nav"][data-variant="g"] .nav-bzc__links { display: flex; justify-content: center; gap: 28px; color: var(--text); opacity: 0.80; font-weight: 500; } [data-section="nav"][data-variant="g"] .nav-bzc__links a { opacity: 0.80; transition: opacity 0.15s, color 0.15s; } [data-section="nav"][data-variant="g"] .nav-bzc__links a:hover { opacity: 1; color: var(--accent-text); } [data-section="nav"][data-variant="g"] .nav-bzc__cta-row { display: flex; align-items: center; gap: 18px; } [data-section="nav"][data-variant="g"] .nav-bzc__phone { color: var(--text); opacity: 0.80; font-size: 13px; letter-spacing: 0.04em; text-transform: none; transition: opacity 0.15s; } [data-section="nav"][data-variant="g"] .nav-bzc__phone:hover { opacity: 1; } [data-section="nav"][data-variant="g"] .nav-bzc__cta { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; background: var(--accent); color: var(--accent-contrast, #fff); font-weight: 600; font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; transition: filter 0.15s ease; border-radius: 0; } [data-section="nav"][data-variant="g"] .nav-bzc__cta:hover { filter: brightness(1.10); } [data-section="nav"][data-variant="g"] .nav-bzc__burger { display: none; } @container (max-width: 1024px) { [data-section="nav"][data-variant="g"] .nav-bzc__links { display: none; } /* Without this the phone got brand + Book and NO menu at all. */ [data-section="nav"][data-variant="g"] .nav-bzc__burger { display: block; } /* The centre column is empty once the links hide — collapse to two tracks and let the 26px serif brand shrink, or it runs under the CTA once the burger joins the right zone. */ [data-section="nav"][data-variant="g"] .nav-bzc { grid-template-columns: minmax(0, 1fr) auto; } [data-section="nav"][data-variant="g"] .nav-bzc__brand { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } [data-section="nav"][data-variant="g"] .nav-bzc__cta-row { flex-shrink: 0; gap: 12px; } } @container (max-width: 640px) { [data-section="nav"][data-variant="g"] .nav-bzc { padding: 0 18px; } [data-section="nav"][data-variant="g"] .nav-bzc__phone { display: none; } [data-section="nav"][data-variant="g"] .nav-bzc__cta { padding: 0 16px; font-size: 12px; } } /* --- Variant J: nav-dd (top nav with per-item dropdowns) --- Brand left | top links center (any item with children opens its own single-column dropdown) | accent CTA right. Dropdowns open on hover AND focus-within (keyboard-accessible), no JS. All colors from theme tokens so the panels inherit correct contrast. */ [data-section="nav"][data-variant="j"] .nav-dd { display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 32px; background: var(--bg, #0a0a0a); color: var(--text, #f0f0f0); position: relative; z-index: 40; } [data-section="nav"][data-variant="j"] .nav-dd__brand { display: inline-flex; align-items: center; color: inherit; font-family: var(--font-display, inherit); font-size: 22px; letter-spacing: 0.04em; text-decoration: none; flex: 0 0 auto; } [data-section="nav"][data-variant="j"] .nav-dd__brand img { height: 40px; width: auto; } [data-section="nav"][data-variant="j"] .nav-dd__bar { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; } [data-section="nav"][data-variant="j"] .nav-dd__link { color: var(--text, inherit); text-decoration: none; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.86; transition: opacity 0.15s ease, color 0.15s ease; white-space: nowrap; } [data-section="nav"][data-variant="j"] .nav-dd__link:hover { opacity: 1; color: var(--accent-text, #dcb96a); } [data-section="nav"][data-variant="j"] .nav-dd__item { position: relative; } [data-section="nav"][data-variant="j"] .nav-dd__trigger { display: inline-flex; align-items: center; gap: 5px; } [data-section="nav"][data-variant="j"] .nav-dd__caret { font-size: 9px; opacity: 0.7; } /* The dropdown panel — hidden until the item is hovered/focused. A ~10px invisible bridge (top padding on the panel) keeps hover alive while the cursor crosses the gap from the trigger. */ [data-section="nav"][data-variant="j"] .nav-dd__panel { position: absolute; top: 100%; left: 0; min-width: 210px; display: flex; flex-direction: column; padding: 10px 0 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } [data-section="nav"][data-variant="j"] .nav-dd__item:hover .nav-dd__panel, [data-section="nav"][data-variant="j"] .nav-dd__item:focus-within .nav-dd__panel { opacity: 1; visibility: visible; transform: translateY(0); } [data-section="nav"][data-variant="j"] .nav-dd__panel-link { color: var(--text, #f0f0f0); text-decoration: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 18px; background: var(--bg-mid, #141414); border-left: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent); border-right: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent); opacity: 0.85; transition: background 0.14s ease, opacity 0.14s ease, color 0.14s ease; } [data-section="nav"][data-variant="j"] .nav-dd__panel-link:first-of-type { border-top: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent); box-shadow: 0 -1px 0 color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent); } [data-section="nav"][data-variant="j"] .nav-dd__panel-link:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); } [data-section="nav"][data-variant="j"] .nav-dd__panel-link:hover { opacity: 1; color: var(--accent-text, #dcb96a); background: color-mix(in srgb, var(--accent, #dcb96a) 12%, var(--bg-mid, #141414)); } [data-section="nav"][data-variant="j"] .nav-dd__actions { flex: 0 0 auto; } [data-section="nav"][data-variant="j"] .nav-dd__cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; background: var(--accent, #dcb96a); color: var(--accent-contrast, var(--bg, #0a0a0a)); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: filter 0.15s ease; white-space: nowrap; } [data-section="nav"][data-variant="j"] .nav-dd__cta:hover { filter: brightness(1.08); } [data-section="nav"][data-variant="j"] .nav-dd__mobile { display: none; } [data-section="nav"][data-variant="j"] .nav-dd__mobile-group { display: contents; } [data-section="nav"][data-variant="j"] .nav-dd__mobile-sub { padding-left: 16px; opacity: 0.8; } /* Responsive: collapse the desktop bar into the hamburger overlay */ @container (max-width: 1024px) { [data-section="nav"][data-variant="j"] .nav-dd__bar, [data-section="nav"][data-variant="j"] .nav-dd__actions { display: none; } [data-section="nav"][data-variant="j"] .nav-dd__mobile { display: block; margin-left: auto; } } @container (max-width: 640px) { [data-section="nav"][data-variant="j"] .nav-dd { padding: 0 18px; height: 60px; gap: 12px; } /* `flex: 0 0 auto` on the brand meant a long tenant name pushed the hamburger off the right edge — measured x=484 on a 390px viewport (audit 2026-07-26), the same failure variant A had. Let the brand shrink; never the menu. */ [data-section="nav"][data-variant="j"] .nav-dd__brand { flex: 0 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; } [data-section="nav"][data-variant="j"] .nav-dd__mobile { flex-shrink: 0; } } /* --- Variant H: nav-sidebar-refreshed --- Vertical left rail for [data-framework="sidebar"]. Logo at top, configured navItems below, CTA + contact at bottom. Mobile: top bar + details/summary hamburger drawer. */ [data-section="nav"][data-variant="h"] .nav-sb { display: flex; flex-direction: column; height: 100%; min-height: 100dvh; padding: 32px 20px 24px; background: var(--section-bg, var(--bg)); border-right: 1px solid var(--rule); gap: 0; } [data-section="nav"][data-variant="h"] .nav-sb__brand { display: block; margin-bottom: 36px; text-decoration: none; flex-shrink: 0; } [data-section="nav"][data-variant="h"] .nav-sb__logo { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; display: block; } [data-section="nav"][data-variant="h"] .nav-sb__wordmark { font-family: var(--font-display), sans-serif; font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; } [data-section="nav"][data-variant="h"] .nav-sb__links { display: flex; flex-direction: column; flex: 1; gap: 0; } [data-section="nav"][data-variant="h"] .nav-sb__link { display: block; padding: 11px 0; font-family: var(--font-body), sans-serif; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500; color: var(--text); opacity: 0.72; border-bottom: 1px solid var(--rule); text-decoration: none; transition: opacity 0.15s, color 0.15s; } [data-section="nav"][data-variant="h"] .nav-sb__link:hover { opacity: 1; color: var(--accent-text); } [data-section="nav"][data-variant="h"] .nav-sb__meta { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--rule); flex-shrink: 0; } [data-section="nav"][data-variant="h"] .nav-sb__cta { display: flex; align-items: center; justify-content: center; padding: 11px 16px; background: var(--accent); color: var(--accent-contrast, #fff); font-family: var(--font-body), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; transition: filter 0.15s; } [data-section="nav"][data-variant="h"] .nav-sb__cta:hover { filter: brightness(1.1); } [data-section="nav"][data-variant="h"] .nav-sb__phone { font-size: 13px; color: var(--text); opacity: 0.65; text-decoration: none; text-align: center; transition: opacity 0.15s; } [data-section="nav"][data-variant="h"] .nav-sb__phone:hover { opacity: 1; } [data-section="nav"][data-variant="h"] .nav-sb__ig { font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-text); text-align: center; text-decoration: none; transition: opacity 0.15s; } [data-section="nav"][data-variant="h"] .nav-sb__ig:hover { opacity: 1; } /* Mobile hamburger drawer — hidden on desktop */ [data-section="nav"][data-variant="h"] .nav-sb__drawer { display: none; } @media (max-width: 768px) { [data-section="nav"][data-variant="h"] .nav-sb { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 18px; min-height: unset; height: auto; position: sticky; top: 0; z-index: 50; border-right: none; border-bottom: 1px solid var(--rule); } [data-section="nav"][data-variant="h"] .nav-sb__brand { margin-bottom: 0; /* Base rule pins this flex-shrink: 0, so a long tenant name overflowed the row and pushed the drawer toggle past the edge (x=402 on a 390px viewport, audit 2026-07-26). */ flex-shrink: 1; min-width: 0; overflow: hidden; } [data-section="nav"][data-variant="h"] .nav-sb__wordmark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-section="nav"][data-variant="h"] .nav-sb__drawer { flex-shrink: 0; } [data-section="nav"][data-variant="h"] .nav-sb__links, [data-section="nav"][data-variant="h"] .nav-sb__meta { display: none; } [data-section="nav"][data-variant="h"] .nav-sb__drawer { display: block; position: relative; } [data-section="nav"][data-variant="h"] .nav-sb__drawer > summary { list-style: none; cursor: pointer; color: var(--text); font-size: 22px; line-height: 1; padding: 4px 6px; user-select: none; } [data-section="nav"][data-variant="h"] .nav-sb__drawer > summary::-webkit-details-marker { display: none; } [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 200px; background: var(--bg); border: 1px solid var(--rule); padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 0; z-index: 100; } [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu a { display: block; padding: 11px 0; font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--rule); opacity: 0.8; text-decoration: none; } [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu a:last-child { border-bottom: none; } [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu a:hover { opacity: 1; color: var(--accent-text); } [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu .nav-sb__cta { margin-top: 12px; justify-content: center; font-size: 11px; } } /* --- Variant I: nav-sidebar-og --- OG flat sidebar. Mirrors the legacy ClassicSidebarShell aesthetic: solid bg, bold uppercase stacked links with horizontal rules, no glassmorphism or glow. Flat hover (bg tint only). */ [data-section="nav"][data-variant="i"] .nav-sbog { display: flex; flex-direction: column; height: 100%; min-height: 100dvh; background: var(--section-bg, var(--bg)); border-right: 1px solid var(--rule); } [data-section="nav"][data-variant="i"] .nav-sbog__brand { display: block; padding: 24px 16px 20px; border-bottom: 1px solid var(--rule); text-decoration: none; } [data-section="nav"][data-variant="i"] .nav-sbog__logo { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; display: block; } [data-section="nav"][data-variant="i"] .nav-sbog__wordmark { font-family: var(--font-body), sans-serif; font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: 0.08em; text-transform: uppercase; } [data-section="nav"][data-variant="i"] .nav-sbog__links { list-style: none; margin: 0; padding: 0; flex: 1; } [data-section="nav"][data-variant="i"] .nav-sbog__links li { margin: 0; } [data-section="nav"][data-variant="i"] .nav-sbog__links li > a { display: block; padding: 15px 16px; font-family: var(--font-body), sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rule); transition: background 0.15s; } [data-section="nav"][data-variant="i"] .nav-sbog__links li > a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } [data-section="nav"][data-variant="i"] .nav-sbog__footer { padding: 16px; border-top: 1px solid var(--rule); flex-shrink: 0; } [data-section="nav"][data-variant="i"] .nav-sbog__cta { display: block; width: 100%; padding: 12px 16px; background: var(--accent); color: var(--accent-contrast, #fff); font-family: var(--font-body), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; text-decoration: none; transition: filter 0.15s; } [data-section="nav"][data-variant="i"] .nav-sbog__cta:hover { filter: brightness(1.1); } [data-section="nav"][data-variant="i"] .nav-sbog__phone { display: block; margin-top: 10px; font-size: 13px; color: var(--text); opacity: 0.65; text-align: center; text-decoration: none; transition: opacity 0.15s; } [data-section="nav"][data-variant="i"] .nav-sbog__phone:hover { opacity: 1; } /* Mobile hamburger drawer — hidden on desktop */ [data-section="nav"][data-variant="i"] .nav-sbog__drawer { display: none; } @media (max-width: 768px) { [data-section="nav"][data-variant="i"] .nav-sbog { flex-direction: row; align-items: center; justify-content: space-between; min-height: unset; height: auto; padding: 0 16px; position: sticky; top: 0; z-index: 50; border-right: none; border-bottom: 1px solid var(--rule); } [data-section="nav"][data-variant="i"] .nav-sbog__brand { border-bottom: none; padding: 12px 0; } [data-section="nav"][data-variant="i"] .nav-sbog__links, [data-section="nav"][data-variant="i"] .nav-sbog__footer { display: none; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer { display: block; position: relative; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer > summary { list-style: none; cursor: pointer; color: var(--text); font-size: 22px; line-height: 1; padding: 4px 6px; user-select: none; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer > summary::-webkit-details-marker { display: none; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu { position: absolute; top: calc(100% + 1px); right: 0; min-width: 220px; background: var(--bg); border: 1px solid var(--rule); z-index: 100; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu a { display: block; padding: 14px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--rule); text-decoration: none; transition: background 0.15s; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu a:last-child { border-bottom: none; } [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu .nav-sbog__cta { display: block; margin: 0; border-radius: 0; } } /* ============================================================ utility-bar variants A–E ============================================================ */ /* --- Variant A: utility-bar-inline --- */ [data-section="utility-bar"][data-variant="a"] .ub-inline { display: flex; justify-content: space-between; align-items: center; background: var(--section-bg); color: var(--text); padding: 10px 56px; font-size: 11px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 100; } [data-section="utility-bar"][data-variant="a"] .ub-inline__left { display: flex; gap: 12px; align-items: center; opacity: 0.78; } [data-section="utility-bar"][data-variant="a"] .ub-inline__left .sep { color: var(--accent-text); } @container (max-width: 768px) { [data-section="utility-bar"][data-variant="a"] .ub-inline { flex-direction: column; gap: 6px; padding: 10px 24px; text-align: center; } [data-section="utility-bar"][data-variant="a"] .ub-inline__left { flex-wrap: wrap; justify-content: center; } } /* --- Variant B: utility-bar-split --- */ [data-section="utility-bar"][data-variant="b"] .ub-split-top { display: flex; justify-content: space-between; align-items: center; background: var(--section-bg); padding: 8px 56px; font-size: 11px; border-bottom: 1px solid var(--rule); } [data-section="utility-bar"][data-variant="b"] .ub-split-top__left { display: flex; gap: 14px; align-items: center; opacity: 0.78; } [data-section="utility-bar"][data-variant="b"] .ub-split-top__left .sep { color: var(--accent-text); } [data-section="utility-bar"][data-variant="b"] .ub-split-top__social { display: flex; gap: 14px; align-items: center; } [data-section="utility-bar"][data-variant="b"] .ub-split-top__social-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); font-size: 10px; color: var(--muted); transition: color 0.15s, border-color 0.15s; } [data-section="utility-bar"][data-variant="b"] .ub-split-top__social-icon:hover { color: var(--accent-text); border-color: var(--accent); } [data-section="utility-bar"][data-variant="b"] .ub-split-bottom { display: flex; justify-content: space-between; align-items: center; background: var(--bg-mid); padding: 10px 56px; font-size: 11px; border-bottom: 1px solid var(--rule); } [data-section="utility-bar"][data-variant="b"] .ub-split-bottom__left { display: flex; gap: 12px; align-items: center; opacity: 0.78; } [data-section="utility-bar"][data-variant="b"] .ub-split-bottom__left .sep { color: var(--accent-text); } @container (max-width: 768px) { [data-section="utility-bar"][data-variant="b"] .ub-split-top { flex-direction: column; gap: 8px; padding: 10px 24px; text-align: center; } [data-section="utility-bar"][data-variant="b"] .ub-split-top__left { flex-wrap: wrap; justify-content: center; } [data-section="utility-bar"][data-variant="b"] .ub-split-top__social { justify-content: center; } [data-section="utility-bar"][data-variant="b"] .ub-split-bottom { flex-direction: column; gap: 8px; padding: 10px 24px; text-align: center; } [data-section="utility-bar"][data-variant="b"] .ub-split-bottom__left { flex-wrap: wrap; justify-content: center; } } /* --- Variant C: utility-bar-logo-centered --- */ [data-section="utility-bar"][data-variant="c"] .ub-logo { display: flex; justify-content: space-between; align-items: center; background: var(--section-bg); padding: 12px 56px; font-size: 11px; border-bottom: 2px solid var(--accent); } [data-section="utility-bar"][data-variant="c"] .ub-logo__phone { opacity: 0.78; letter-spacing: 0.04em; } [data-section="utility-bar"][data-variant="c"] .ub-logo__center { display: flex; flex-direction: column; align-items: center; gap: 3px; } [data-section="utility-bar"][data-variant="c"] .ub-logo__img { height: 28px; width: auto; } [data-section="utility-bar"][data-variant="c"] .ub-logo__wordmark { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } [data-section="utility-bar"][data-variant="c"] .ub-logo__hours { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; } @container (max-width: 768px) { [data-section="utility-bar"][data-variant="c"] .ub-logo { flex-direction: column; gap: 8px; padding: 12px 24px; text-align: center; } } /* --- Variant D: utility-bar-gradient-slide --- */ @keyframes ub-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } [data-section="utility-bar"][data-variant="d"] .ub-grad { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, var(--bg), var(--bg-mid), var(--bg)); background-size: 200% 100%; animation: ub-gradient 8s ease infinite; color: var(--text); padding: 10px 56px; font-size: 11px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 100; } [data-section="utility-bar"][data-variant="d"] .ub-grad__left { display: flex; gap: 12px; align-items: center; opacity: 0.78; } [data-section="utility-bar"][data-variant="d"] .ub-grad__left .sep { color: var(--accent-text); } @container (max-width: 768px) { [data-section="utility-bar"][data-variant="d"] .ub-grad { flex-direction: column; gap: 6px; padding: 10px 24px; text-align: center; } [data-section="utility-bar"][data-variant="d"] .ub-grad__left { flex-wrap: wrap; justify-content: center; } } /* --- Variant E: utility-bar-glow-cta --- */ @keyframes ctaGlow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent); } } [data-section="utility-bar"][data-variant="e"] .ub-glow { display: flex; justify-content: space-between; align-items: center; background: var(--section-bg); color: var(--text); padding: 10px 56px; font-size: 11px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 100; } [data-section="utility-bar"][data-variant="e"] .ub-glow__left { display: flex; gap: 12px; align-items: center; opacity: 0.78; } [data-section="utility-bar"][data-variant="e"] .ub-glow__left .sep { color: var(--accent-text); } [data-section="utility-bar"][data-variant="e"] .ub-glow__phone { color: var(--text); transition: color 0.2s, text-shadow 0.2s; } [data-section="utility-bar"][data-variant="e"] .ub-glow__phone:hover { color: var(--accent-text); text-shadow: 0 0 8px var(--accent); } @container (max-width: 768px) { [data-section="utility-bar"][data-variant="e"] .ub-glow { flex-direction: column; gap: 6px; padding: 10px 24px; text-align: center; } [data-section="utility-bar"][data-variant="e"] .ub-glow__left { flex-wrap: wrap; justify-content: center; } } /* ===================================================== Trust — Variant A: trust-review-count-bar Minimal centered rating strip with hairline rules. ===================================================== */ [data-section="trust"][data-variant="a"] .trust-bar { padding: 28px 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; justify-content: center; align-items: center; gap: 16px; background: var(--section-bg); } [data-section="trust"][data-variant="a"] .trust-bar__stars { display: flex; gap: 2px; color: var(--accent-text); font-size: 14px; line-height: 1; } [data-section="trust"][data-variant="a"] .trust-bar__sep { color: var(--muted); font-size: 14px; } [data-section="trust"][data-variant="a"] .trust-bar__rating { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text); letter-spacing: 0.02em; } [data-section="trust"][data-variant="a"] .trust-bar__count { font-size: 13px; color: var(--text); opacity: 0.88; } [data-section="trust"][data-variant="a"] .trust-bar__source { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } @container (max-width: 900px) { [data-section="trust"][data-variant="a"] .trust-bar { padding: 24px; flex-wrap: wrap; gap: 8px 16px; } } /* ===================================================== Trust — Variant B: trust-social-proof-band Rating + review snippets in a dark band. ===================================================== */ [data-section="trust"][data-variant="b"] .trust-band { background: var(--bg-mid); padding: 40px 56px; display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; } [data-section="trust"][data-variant="b"] .trust-band__rating { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } [data-section="trust"][data-variant="b"] .trust-band__number { font-family: var(--font-display); font-size: 48px; font-weight: 500; color: var(--accent-text); line-height: 1; letter-spacing: 0.02em; } [data-section="trust"][data-variant="b"] .trust-band__stars { display: flex; gap: 3px; color: var(--accent-text); font-size: 16px; line-height: 1; } [data-section="trust"][data-variant="b"] .trust-band__count { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-top: 2px; } [data-section="trust"][data-variant="b"] .trust-band__quotes { display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--rule); padding-left: 40px; } [data-section="trust"][data-variant="b"] .trust-band__quote { display: flex; flex-direction: column; gap: 6px; } [data-section="trust"][data-variant="b"] .trust-band__quote-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 15px; color: var(--text); opacity: 0.92; line-height: 1.55; max-width: 48ch; } [data-section="trust"][data-variant="b"] .trust-band__quote-attr { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; } [data-section="trust"][data-variant="b"] .trust-band__quote-attr strong { color: var(--text); font-weight: 500; } @container (max-width: 900px) { [data-section="trust"][data-variant="b"] .trust-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; } [data-section="trust"][data-variant="b"] .trust-band__rating { flex-direction: row; align-items: center; gap: 16px; } [data-section="trust"][data-variant="b"] .trust-band__quotes { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 24px; } } /* ===================================================== Trust — Variant C: trust-badges-row Rating + trust badges in a horizontal strip. ===================================================== */ [data-section="trust"][data-variant="c"] .trust-badges { padding: 32px 56px; display: flex; align-items: center; justify-content: center; gap: 0; background: var(--section-bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } [data-section="trust"][data-variant="c"] .trust-badges__item { display: flex; align-items: center; gap: 10px; padding: 0 28px; } [data-section="trust"][data-variant="c"] .trust-badges__item:first-child { padding-left: 0; } [data-section="trust"][data-variant="c"] .trust-badges__item:last-child { padding-right: 0; } [data-section="trust"][data-variant="c"] .trust-badges__divider { width: 1px; height: 36px; background: var(--rule); flex-shrink: 0; } [data-section="trust"][data-variant="c"] .trust-badges__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--accent-text); } [data-section="trust"][data-variant="c"] .trust-badges__icon svg { width: 100%; height: 100%; } [data-section="trust"][data-variant="c"] .trust-badges__label { display: flex; flex-direction: column; gap: 2px; } [data-section="trust"][data-variant="c"] .trust-badges__label-primary { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: 0.02em; } [data-section="trust"][data-variant="c"] .trust-badges__label-secondary { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } @container (max-width: 900px) { [data-section="trust"][data-variant="c"] .trust-badges { padding: 24px; flex-wrap: wrap; gap: 16px; } [data-section="trust"][data-variant="c"] .trust-badges__divider { display: none; } [data-section="trust"][data-variant="c"] .trust-badges__item { padding: 0; flex: 0 0 calc(50% - 8px); } [data-section="trust"][data-variant="c"] .trust-badges__item:first-child { padding-left: 0; } } /* ===================================================== Trust — Variant D: trust-glow-stars Centered bar with CSS-animated pulsing star glow. ===================================================== */ @keyframes trustStarGlow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent); } } [data-section="trust"][data-variant="d"] .trust-glow { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--section-bg); padding: 14px 56px; font-size: 13px; border-bottom: 1px solid var(--rule); } [data-section="trust"][data-variant="d"] .trust-glow__stars { display: flex; gap: 2px; color: var(--accent-text); font-size: 18px; } [data-section="trust"][data-variant="d"] .trust-glow__stars span { animation: trustStarGlow 2s ease-in-out infinite; } [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(1) { animation-delay: 0s; } [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(2) { animation-delay: 0.2s; } [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(3) { animation-delay: 0.4s; } [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(4) { animation-delay: 0.6s; } [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(5) { animation-delay: 0.8s; } [data-section="trust"][data-variant="d"] .trust-glow__sep { color: var(--muted); } [data-section="trust"][data-variant="d"] .trust-glow__rating { color: var(--accent-text); font-weight: 600; } [data-section="trust"][data-variant="d"] .trust-glow__count { color: var(--muted); } [data-section="trust"][data-variant="d"] .trust-glow__source { color: var(--muted); } /* ===================================================== Trust — Variant E: trust-count-up Centered bar with tabular-nums for animated count-up. (Animation is a client-side enhancement; SSR renders final values.) ===================================================== */ [data-section="trust"][data-variant="e"] .trust-countup { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--section-bg); padding: 14px 56px; font-size: 13px; border-bottom: 1px solid var(--rule); } [data-section="trust"][data-variant="e"] .trust-countup__stars { display: flex; gap: 2px; color: var(--accent-text); font-size: 18px; } [data-section="trust"][data-variant="e"] .trust-countup__sep { color: var(--muted); } [data-section="trust"][data-variant="e"] .trust-countup__rating { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; } [data-section="trust"][data-variant="e"] .trust-countup__count { color: var(--muted); font-variant-numeric: tabular-nums; } [data-section="trust"][data-variant="e"] .trust-countup__source { color: var(--muted); } /* ===================================================== About variants A–E Scoped to [data-section="about"][data-variant=""] ===================================================== */ /* --- Variant A: about-split-portrait-text --- */ [data-section="about"][data-variant="a"] .about-split { display: grid; grid-template-columns: 1fr 1.4fr; padding: 160px 56px; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; } /* No portrait -> one column, so the grid does not reserve a blank 42%. See components/themes/sections/About/AboutA.tsx. */ [data-section="about"][data-variant="a"] .about-split--no-portrait { grid-template-columns: 1fr; } [data-section="about"][data-variant="a"] .about-split__portrait-wrap { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } [data-section="about"][data-variant="a"] .about-split__portrait { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.04); } [data-section="about"][data-variant="a"] .about-split__body { display: flex; flex-direction: column; justify-content: center; } [data-section="about"][data-variant="a"] .about-split__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 22px; } [data-section="about"][data-variant="a"] .about-split__headline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 38px; letter-spacing: 0.01em; color: var(--text); line-height: 1.2; margin-bottom: 28px; } [data-section="about"][data-variant="a"] .about-split__text { font-size: 15px; color: var(--muted); line-height: 1.75; max-width: 52ch; } @media (max-width: 900px) { [data-section="about"][data-variant="a"] .about-split { grid-template-columns: 1fr; padding: 80px 24px; gap: 40px; } [data-section="about"][data-variant="a"] .about-split__portrait-wrap { max-width: 400px; margin: 0 auto; } [data-section="about"][data-variant="a"] .about-split__headline { font-size: 28px; } } /* --- Variant B: about-full-bleed-portrait-overlay --- */ [data-section="about"][data-variant="b"] .about-bleed { position: relative; height: 560px; overflow: hidden; } [data-section="about"][data-variant="b"] .about-bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: brightness(0.6) contrast(1.05); } [data-section="about"][data-variant="b"] .about-bleed__gradient { position: absolute; inset: 0; background: linear-gradient( to top, rgba(12, 12, 12, 0.92) 0%, rgba(12, 12, 12, 0.55) 40%, rgba(12, 12, 12, 0.1) 100% ); } [data-section="about"][data-variant="b"] .about-bleed__content { position: absolute; bottom: 0; left: 0; padding: 56px; max-width: 640px; } [data-section="about"][data-variant="b"] .about-bleed__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } [data-section="about"][data-variant="b"] .about-bleed__name { font-family: var(--font-display); font-weight: 600; font-size: 48px; letter-spacing: 0.04em; color: var(--text); line-height: 1.05; margin-bottom: 18px; } [data-section="about"][data-variant="b"] .about-bleed__text { font-size: 15px; color: var(--text); opacity: 0.82; line-height: 1.75; margin-bottom: 24px; } [data-section="about"][data-variant="b"] .about-bleed__link { display: inline-block; color: var(--accent-text); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; transition: opacity 0.15s; } [data-section="about"][data-variant="b"] .about-bleed__link:hover { opacity: 0.75; } @media (max-width: 900px) { [data-section="about"][data-variant="b"] .about-bleed { height: 400px; } [data-section="about"][data-variant="b"] .about-bleed__content { padding: 32px 24px; } [data-section="about"][data-variant="b"] .about-bleed__name { font-size: 32px; } [data-section="about"][data-variant="b"] .about-bleed__text { font-size: 14px; } } /* --- Variant C: about-three-column-essay --- */ [data-section="about"][data-variant="c"] .about-essay { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 48px; padding: 120px 56px; position: relative; max-width: 1200px; margin: 0 auto; } [data-section="about"][data-variant="c"] .about-essay__col:not(:last-child) { border-right: 1px solid var(--rule); padding-right: 48px; } [data-section="about"][data-variant="c"] .about-essay__col--identity { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; } [data-section="about"][data-variant="c"] .about-essay__avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; filter: saturate(0.85) contrast(1.04); margin-bottom: 20px; } [data-section="about"][data-variant="c"] .about-essay__artist-name { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: 0.06em; color: var(--text); margin-bottom: 6px; } [data-section="about"][data-variant="c"] .about-essay__credential { font-size: 12px; color: var(--accent-text); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; } [data-section="about"][data-variant="c"] .about-essay__col--text { font-size: 15px; color: var(--muted); line-height: 1.8; } [data-section="about"][data-variant="c"] .about-essay__col--text p:first-child::first-letter { font-family: var(--font-display); font-size: 64px; float: left; line-height: 0.8; margin-right: 10px; margin-top: 6px; color: var(--accent-text); font-weight: 600; } [data-section="about"][data-variant="c"] .about-essay__col--quote { font-size: 15px; color: var(--muted); line-height: 1.8; } [data-section="about"][data-variant="c"] .about-essay__pullquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 24px; color: var(--text); line-height: 1.35; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); } @media (max-width: 900px) { [data-section="about"][data-variant="c"] .about-essay { grid-template-columns: 1fr; padding: 64px 24px; gap: 32px; } [data-section="about"][data-variant="c"] .about-essay__col:not(:last-child) { border-right: none; padding-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 32px; } [data-section="about"][data-variant="c"] .about-essay__col--identity { align-items: center; } [data-section="about"][data-variant="c"] .about-essay__avatar { width: 120px; height: 120px; } [data-section="about"][data-variant="c"] .about-essay__pullquote { font-size: 20px; } } /* --- Variant D: about-fade-stagger --- */ [data-section="about"][data-variant="d"] .about-fade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--section-bg); padding: 80px 56px; align-items: center; } [data-section="about"][data-variant="d"] .about-fade__portrait-wrap { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-section="about"][data-variant="d"] .about-fade.is-visible .about-fade__portrait-wrap { opacity: 1; transform: translateY(0); } [data-section="about"][data-variant="d"] .about-fade__body { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s; } [data-section="about"][data-variant="d"] .about-fade.is-visible .about-fade__body { opacity: 1; transform: translateY(0); } [data-section="about"][data-variant="d"] .about-fade__portrait { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; } [data-section="about"][data-variant="d"] .about-fade__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 12px; } [data-section="about"][data-variant="d"] .about-fade__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 16px; } [data-section="about"][data-variant="d"] .about-fade__text { font-size: 15px; line-height: 1.7; color: var(--muted); } @media (max-width: 768px) { [data-section="about"][data-variant="d"] .about-fade { grid-template-columns: 1fr; padding: 48px 24px; gap: 32px; } } /* --- Variant E: about-image-reveal --- */ [data-section="about"][data-variant="e"] .about-reveal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--section-bg); padding: 80px 56px; align-items: center; } [data-section="about"][data-variant="e"] .about-reveal__portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1); } [data-section="about"][data-variant="e"] .about-reveal.is-visible .about-reveal__portrait img { clip-path: inset(0 0 0 0); } [data-section="about"][data-variant="e"] .about-reveal__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 12px; } [data-section="about"][data-variant="e"] .about-reveal__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 16px; } [data-section="about"][data-variant="e"] .about-reveal__text { font-size: 15px; line-height: 1.7; color: var(--muted); } @media (max-width: 768px) { [data-section="about"][data-variant="e"] .about-reveal { grid-template-columns: 1fr; padding: 48px 24px; gap: 32px; } } /* ===================================================== Gallery — Variant A (gallery-3col-rows-by-type) Rows grouped by gallery_type with eyebrow labels. ===================================================== */ [data-section="gallery"][data-variant="a"] .gallery-rows { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="gallery"][data-variant="a"] .gallery-rows__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 56px; text-align: center; } [data-section="gallery"][data-variant="a"] .gallery-rows__heading { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); } [data-section="gallery"][data-variant="a"] .gallery-rows__years { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } [data-section="gallery"][data-variant="a"] .gallery-rows__type-group { margin-bottom: 48px; } [data-section="gallery"][data-variant="a"] .gallery-rows__type-group:last-child { margin-bottom: 0; } [data-section="gallery"][data-variant="a"] .gallery-rows__eyebrow { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; } [data-section="gallery"][data-variant="a"] .gallery-rows__type-label { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); } [data-section="gallery"][data-variant="a"] .gallery-rows__type-count { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; } [data-section="gallery"][data-variant="a"] .gallery-rows__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } [data-section="gallery"][data-variant="a"] .gallery-rows__item { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; position: relative; } [data-section="gallery"][data-variant="a"] .gallery-rows__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } [data-section="gallery"][data-variant="a"] .gallery-rows__item:hover img { transform: scale(1.04); } [data-section="gallery"][data-variant="a"] .gallery-rows__type-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-text); transition: opacity 0.15s; } [data-section="gallery"][data-variant="a"] .gallery-rows__type-link:hover { opacity: 0.78; } @media (max-width: 900px) { [data-section="gallery"][data-variant="a"] .gallery-rows { padding: 48px 24px; } [data-section="gallery"][data-variant="a"] .gallery-rows__header { flex-direction: column; gap: 8px; margin-bottom: 36px; } [data-section="gallery"][data-variant="a"] .gallery-rows__heading { font-size: 28px; } [data-section="gallery"][data-variant="a"] .gallery-rows__grid { gap: 8px; } } /* ===================================================== Gallery — Variant B (gallery-bento-mixed) Bento grid with varied tile sizes (tall × 2, wide × 1). ===================================================== */ [data-section="gallery"][data-variant="b"] .gallery-bento { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="gallery"][data-variant="b"] .gallery-bento__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; text-align: center; } [data-section="gallery"][data-variant="b"] .gallery-bento__heading { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); } [data-section="gallery"][data-variant="b"] .gallery-bento__sub { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } [data-section="gallery"][data-variant="b"] .gallery-bento__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 12px; } [data-section="gallery"][data-variant="b"] .gallery-bento__tile { overflow: hidden; border-radius: 2px; position: relative; } [data-section="gallery"][data-variant="b"] .gallery-bento__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } [data-section="gallery"][data-variant="b"] .gallery-bento__tile:hover img { transform: scale(1.05); } [data-section="gallery"][data-variant="b"] .gallery-bento__tile--tall { grid-row: span 2; } [data-section="gallery"][data-variant="b"] .gallery-bento__tile--wide { grid-column: span 2; } [data-section="gallery"][data-variant="b"] .gallery-bento__footer { display: flex; justify-content: center; margin-top: 40px; } [data-section="gallery"][data-variant="b"] .gallery-bento__link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 12px; letter-spacing: var(--btn-tracking, 0.16em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); transition: background 0.15s, color 0.15s; } [data-section="gallery"][data-variant="b"] .gallery-bento__link:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } @media (max-width: 900px) { [data-section="gallery"][data-variant="b"] .gallery-bento { padding: 48px 24px; } [data-section="gallery"][data-variant="b"] .gallery-bento__header { flex-direction: column; gap: 8px; margin-bottom: 28px; } [data-section="gallery"][data-variant="b"] .gallery-bento__heading { font-size: 28px; } [data-section="gallery"][data-variant="b"] .gallery-bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 8px; } } /* ===================================================== Gallery — Variant C (gallery-chip-filtered-grid) 4-col edge-to-edge grid with gallery_type filter chips. ===================================================== */ [data-section="gallery"][data-variant="c"] .gallery-chips { padding: 80px 0; background: var(--section-bg); } [data-section="gallery"][data-variant="c"] .gallery-chips__header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 56px; max-width: 1200px; margin: 0 auto 32px; } [data-section="gallery"][data-variant="c"] .gallery-chips__heading { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); text-align: center; } [data-section="gallery"][data-variant="c"] .gallery-chips__count { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } [data-section="gallery"][data-variant="c"] .gallery-chips__filters { display: flex; gap: 8px; padding: 0 56px; margin: 0 auto 32px; max-width: 1200px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } [data-section="gallery"][data-variant="c"] .gallery-chips__filters::-webkit-scrollbar { display: none; } [data-section="gallery"][data-variant="c"] .gallery-chips__chip { flex-shrink: 0; padding: 8px 20px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--rule); background: transparent; transition: all 0.15s; cursor: pointer; white-space: nowrap; } [data-section="gallery"][data-variant="c"] .gallery-chips__chip:hover { color: var(--text); border-color: var(--accent); } [data-section="gallery"][data-variant="c"] .gallery-chips__chip--active { background: var(--accent); color: var(--accent-contrast, var(--bg)); border-color: var(--accent); font-weight: 500; } [data-section="gallery"][data-variant="c"] .gallery-chips__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } [data-section="gallery"][data-variant="c"] .gallery-chips__tile { aspect-ratio: 1 / 1; overflow: hidden; position: relative; } [data-section="gallery"][data-variant="c"] .gallery-chips__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } [data-section="gallery"][data-variant="c"] .gallery-chips__tile:hover img { transform: scale(1.06); } [data-section="gallery"][data-variant="c"] .gallery-chips__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 12, 12, 0.82) 0%, rgba(12, 12, 12, 0) 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; opacity: 0; transition: opacity 0.25s ease; } [data-section="gallery"][data-variant="c"] .gallery-chips__tile:hover .gallery-chips__overlay { opacity: 1; } [data-section="gallery"][data-variant="c"] .gallery-chips__overlay-style { font-size: 11px; color: var(--accent-text); letter-spacing: 0.04em; margin-top: 2px; } [data-section="gallery"][data-variant="c"] .gallery-chips__footer { display: flex; justify-content: center; padding: 0 56px; margin-top: 40px; max-width: 1200px; margin-left: auto; margin-right: auto; } [data-section="gallery"][data-variant="c"] .gallery-chips__link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 1px solid var(--accent); color: var(--accent-text); font-size: 12px; letter-spacing: var(--btn-tracking, 0.16em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); transition: background 0.15s, color 0.15s; } [data-section="gallery"][data-variant="c"] .gallery-chips__link:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } @media (max-width: 900px) { [data-section="gallery"][data-variant="c"] .gallery-chips { padding: 48px 0; } [data-section="gallery"][data-variant="c"] .gallery-chips__header { padding: 0 24px; margin-bottom: 24px; flex-direction: column; gap: 8px; } [data-section="gallery"][data-variant="c"] .gallery-chips__heading { font-size: 28px; } [data-section="gallery"][data-variant="c"] .gallery-chips__filters { padding: 0 24px; gap: 6px; } [data-section="gallery"][data-variant="c"] .gallery-chips__grid { grid-template-columns: repeat(2, 1fr); } [data-section="gallery"][data-variant="c"] .gallery-chips__footer { padding: 0 24px; } } /* ===================================================== Gallery — Variant D (gallery-hover-scale) 3-col uniform grid; hover scales + adds gold glow. ===================================================== */ [data-section="gallery"][data-variant="d"] .gallery-hover { background: var(--section-bg); padding: 64px 56px; } [data-section="gallery"][data-variant="d"] .gallery-hover__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; } [data-section="gallery"][data-variant="d"] .gallery-hover__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; } [data-section="gallery"][data-variant="d"] .gallery-hover__sub { color: var(--muted); font-size: 14px; } [data-section="gallery"][data-variant="d"] .gallery-hover__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } [data-section="gallery"][data-variant="d"] .gallery-hover__tile { overflow: hidden; border-radius: 6px; position: relative; } [data-section="gallery"][data-variant="d"] .gallery-hover__tile img { width: 100%; aspect-ratio: 1; object-fit: cover; transform: scale(1); transition: transform 0.3s ease; } [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover img { transform: scale(1.05); } [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover { box-shadow: 0 4px 20px rgba(220, 185, 106, 0.15); } [data-section="gallery"][data-variant="d"] .gallery-hover__footer { text-align: center; margin-top: 32px; } [data-section="gallery"][data-variant="d"] .gallery-hover__link { color: var(--accent-text); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } @media (max-width: 768px) { [data-section="gallery"][data-variant="d"] .gallery-hover { padding: 48px 24px; } [data-section="gallery"][data-variant="d"] .gallery-hover__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="gallery"][data-variant="d"] .gallery-hover__grid { grid-template-columns: 1fr; } [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover { box-shadow: 0 2px 10px rgba(220, 185, 106, 0.12); } } /* ===================================================== Gallery — Variant E (gallery-stagger-entrance) 3-col grid with IntersectionObserver stagger animation. is-visible toggled by GalleryStaggerClient (TODO). SSR renders with is-visible pre-applied (no JS fallback). ===================================================== */ [data-section="gallery"][data-variant="e"] .gallery-stagger { background: var(--section-bg); padding: 64px 56px; } [data-section="gallery"][data-variant="e"] .gallery-stagger__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; } [data-section="gallery"][data-variant="e"] .gallery-stagger__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; } [data-section="gallery"][data-variant="e"] .gallery-stagger__years { color: var(--muted); font-size: 14px; } [data-section="gallery"][data-variant="e"] .gallery-stagger__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } [data-section="gallery"][data-variant="e"] .gallery-stagger .gallery__tile { border-radius: 6px; overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-section="gallery"][data-variant="e"] .gallery-stagger .gallery__tile img { width: 100%; aspect-ratio: 1; object-fit: cover; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile { opacity: 1; transform: translateY(0); } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(1) { transition-delay: 0s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(2) { transition-delay: 0.1s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(3) { transition-delay: 0.2s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(4) { transition-delay: 0.3s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(5) { transition-delay: 0.4s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(6) { transition-delay: 0.5s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(7) { transition-delay: 0.6s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(8) { transition-delay: 0.7s; } [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(9) { transition-delay: 0.8s; } [data-section="gallery"][data-variant="e"] .gallery-stagger__footer { text-align: center; margin-top: 32px; } [data-section="gallery"][data-variant="e"] .gallery-stagger__link { color: var(--accent-text); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } @media (max-width: 768px) { [data-section="gallery"][data-variant="e"] .gallery-stagger { padding: 48px 24px; } [data-section="gallery"][data-variant="e"] .gallery-stagger__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="gallery"][data-variant="e"] .gallery-stagger__grid { grid-template-columns: 1fr; } } /* ===================================================== Roster — Variant A (roster-card-grid) 3-column card grid: circular headshot, name, bio, link ===================================================== */ [data-section="roster"][data-variant="a"] .roster-grid { padding: 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="roster"][data-variant="a"] .roster-grid__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; text-align: center; } [data-section="roster"][data-variant="a"] .roster-grid__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); margin-bottom: 40px; text-align: center; } [data-section="roster"][data-variant="a"] .roster-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } [data-section="roster"][data-variant="a"] .roster-grid__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; background: var(--bg-mid); border: 1px solid var(--rule); border-radius: 4px; transition: border-color 0.2s; } [data-section="roster"][data-variant="a"] .roster-grid__card:hover { border-color: var(--accent); } [data-section="roster"][data-variant="a"] .roster-grid__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 2px solid var(--rule); } [data-section="roster"][data-variant="a"] .roster-grid__placeholder { width: 120px; height: 120px; border-radius: 50%; background: var(--bg-mid, #1e1e1e); border: 2px solid var(--rule); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; } [data-section="roster"][data-variant="a"] .roster-grid__artist-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); margin-bottom: 6px; } [data-section="roster"][data-variant="a"] .roster-grid__specialty { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; } [data-section="roster"][data-variant="a"] .roster-grid__link { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); transition: opacity 0.15s; } [data-section="roster"][data-variant="a"] .roster-grid__link:hover { opacity: 0.78; } @media (max-width: 900px) { [data-section="roster"][data-variant="a"] .roster-grid { padding: 40px 24px; } [data-section="roster"][data-variant="a"] .roster-grid__cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } [data-section="roster"][data-variant="a"] .roster-grid__card { padding: 28px 16px; } [data-section="roster"][data-variant="a"] .roster-grid__heading { font-size: 28px; margin-bottom: 28px; } } @media (max-width: 480px) { [data-section="roster"][data-variant="a"] .roster-grid__cards { grid-template-columns: 1fr; } } /* ===================================================== Roster — Variant B (roster-horizontal-scroll) Horizontal scroll strip with tall portrait cards ===================================================== */ [data-section="roster"][data-variant="b"] .roster-scroll { position: relative; padding: 56px 0; background: var(--section-bg); overflow: hidden; } [data-section="roster"][data-variant="b"] .roster-scroll__header { padding: 0 56px 32px; } [data-section="roster"][data-variant="b"] .roster-scroll__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; text-align: center; } [data-section="roster"][data-variant="b"] .roster-scroll__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); text-align: center; } [data-section="roster"][data-variant="b"] .roster-scroll__strip { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 56px 16px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } [data-section="roster"][data-variant="b"] .roster-scroll__strip::-webkit-scrollbar { height: 4px; } [data-section="roster"][data-variant="b"] .roster-scroll__strip::-webkit-scrollbar-track { background: transparent; } [data-section="roster"][data-variant="b"] .roster-scroll__strip::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } [data-section="roster"][data-variant="b"] .roster-scroll__card { flex: 0 0 240px; height: 320px; position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; scroll-snap-align: start; border: 1px solid var(--rule); transition: border-color 0.2s; text-decoration: none; } [data-section="roster"][data-variant="b"] .roster-scroll__card:hover { border-color: var(--accent); } [data-section="roster"][data-variant="b"] .roster-scroll__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } [data-section="roster"][data-variant="b"] .roster-scroll__card-placeholder { position: absolute; inset: 0; background: var(--bg-mid, #1e1e1e); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 48px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; } [data-section="roster"][data-variant="b"] .roster-scroll__card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 18px 18px; background: linear-gradient(to top, rgba(12,12,12,0.92) 0%, rgba(12,12,12,0.6) 60%, transparent 100%); } [data-section="roster"][data-variant="b"] .roster-scroll__card-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px; } [data-section="roster"][data-variant="b"] .roster-scroll__card-specialty { font-size: 12px; color: var(--muted); line-height: 1.4; } [data-section="roster"][data-variant="b"] .roster-scroll__fade-left, [data-section="roster"][data-variant="b"] .roster-scroll__fade-right { position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 2; } [data-section="roster"][data-variant="b"] .roster-scroll__fade-left { left: 0; background: linear-gradient(to right, var(--bg), transparent); } [data-section="roster"][data-variant="b"] .roster-scroll__fade-right { right: 0; background: linear-gradient(to left, var(--bg), transparent); } @media (max-width: 900px) { [data-section="roster"][data-variant="b"] .roster-scroll__header { padding: 0 24px 24px; } [data-section="roster"][data-variant="b"] .roster-scroll__strip { padding: 0 24px 12px; gap: 14px; } [data-section="roster"][data-variant="b"] .roster-scroll__heading { font-size: 28px; } [data-section="roster"][data-variant="b"] .roster-scroll__fade-left, [data-section="roster"][data-variant="b"] .roster-scroll__fade-right { width: 24px; } } /* ===================================================== Roster — Variant C (roster-list-rows) Stacked full-width list rows, compact + info-dense ===================================================== */ [data-section="roster"][data-variant="c"] .roster-list { padding: 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="roster"][data-variant="c"] .roster-list__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; text-align: center; } [data-section="roster"][data-variant="c"] .roster-list__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); margin-bottom: 32px; text-align: center; } [data-section="roster"][data-variant="c"] .roster-list__rows { display: flex; flex-direction: column; } [data-section="roster"][data-variant="c"] .roster-list__row { display: flex; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); gap: 20px; transition: background 0.15s; } [data-section="roster"][data-variant="c"] .roster-list__row:first-child { border-top: 1px solid var(--rule); } [data-section="roster"][data-variant="c"] .roster-list__row:hover { background: rgba(220, 185, 106, 0.03); } [data-section="roster"][data-variant="c"] .roster-list__row-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--rule); } [data-section="roster"][data-variant="c"] .roster-list__row-placeholder { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-mid, #1e1e1e); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; } [data-section="roster"][data-variant="c"] .roster-list__row-info { flex: 1; min-width: 0; } [data-section="roster"][data-variant="c"] .roster-list__row-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); margin-bottom: 2px; } [data-section="roster"][data-variant="c"] .roster-list__row-specialty { font-size: 13px; color: var(--muted); } [data-section="roster"][data-variant="c"] .roster-list__row-link { flex-shrink: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); transition: opacity 0.15s; white-space: nowrap; } [data-section="roster"][data-variant="c"] .roster-list__row-link:hover { opacity: 0.78; } @media (max-width: 900px) { [data-section="roster"][data-variant="c"] .roster-list { padding: 40px 24px; } [data-section="roster"][data-variant="c"] .roster-list__heading { font-size: 28px; margin-bottom: 24px; } [data-section="roster"][data-variant="c"] .roster-list__row { gap: 14px; } [data-section="roster"][data-variant="c"] .roster-list__row-link { font-size: 11px; } } /* ===================================================== Roster — Variant D (roster-marquee-cards) Circular avatar cards in a 5-column grid, lift on hover ===================================================== */ [data-section="roster"][data-variant="d"] .roster-marquee { padding: 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="roster"][data-variant="d"] .roster-marquee__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; text-align: center; } [data-section="roster"][data-variant="d"] .roster-marquee__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); margin-bottom: 40px; text-align: center; } [data-section="roster"][data-variant="d"] .roster-marquee__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; } [data-section="roster"][data-variant="d"] .roster-marquee__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px; transition: transform 0.2s; } [data-section="roster"][data-variant="d"] .roster-marquee__card:hover { transform: translateY(-4px); } [data-section="roster"][data-variant="d"] .roster-marquee__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; border: 2px solid var(--rule); } [data-section="roster"][data-variant="d"] .roster-marquee__placeholder { width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 80%, #888); border: 2px solid var(--rule); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.04em; } [data-section="roster"][data-variant="d"] .roster-marquee__name { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px; } [data-section="roster"][data-variant="d"] .roster-marquee__specialty { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.4; } [data-section="roster"][data-variant="d"] .roster-marquee__link { font-size: 12px; letter-spacing: 0.08em; color: var(--accent-text); transition: opacity 0.15s; } [data-section="roster"][data-variant="d"] .roster-marquee__link:hover { opacity: 0.78; } @media (max-width: 900px) { [data-section="roster"][data-variant="d"] .roster-marquee { padding: 40px 24px; } [data-section="roster"][data-variant="d"] .roster-marquee__heading { font-size: 28px; margin-bottom: 28px; } [data-section="roster"][data-variant="d"] .roster-marquee__cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (max-width: 480px) { [data-section="roster"][data-variant="d"] .roster-marquee { padding: 64px 20px; } [data-section="roster"][data-variant="d"] .roster-marquee__heading { font-size: 24px; } [data-section="roster"][data-variant="d"] .roster-marquee__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } [data-section="roster"][data-variant="d"] .roster-marquee__photo, [data-section="roster"][data-variant="d"] .roster-marquee__placeholder { width: 80px; height: 80px; font-size: 20px; } [data-section="roster"][data-variant="d"] .roster-marquee__name { font-size: 14px; } } /* ===================================================== Roster — Variant E (roster-hover-glow) 3-column cards: grayscale-to-color photo + gold glow on hover ===================================================== */ [data-section="roster"][data-variant="e"] .roster-glow { background: var(--section-bg); padding: 64px 56px; } [data-section="roster"][data-variant="e"] .roster-glow__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="roster"][data-variant="e"] .roster-glow__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 32px; } [data-section="roster"][data-variant="e"] .roster-glow__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } [data-section="roster"][data-variant="e"] .roster-glow__card { background: var(--bg-mid); border: 1px solid var(--rule); border-radius: 8px; padding: 28px 24px; text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; } [data-section="roster"][data-variant="e"] .roster-glow__card:hover { box-shadow: 0 0 24px rgba(220,185,106,0.3); transform: translateY(-4px); } [data-section="roster"][data-variant="e"] .roster-glow__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; filter: grayscale(0.6); transition: filter 0.3s ease; display: block; } [data-section="roster"][data-variant="e"] .roster-glow__card:hover .roster-glow__photo { filter: grayscale(0); } [data-section="roster"][data-variant="e"] .roster-glow__placeholder { width: 88px; height: 88px; border-radius: 50%; background: rgba(220,185,106,0.08); border: 1px dashed var(--rule); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; font-weight: 700; color: var(--accent-text); letter-spacing: 0.08em; filter: grayscale(0.6); transition: filter 0.3s ease; } [data-section="roster"][data-variant="e"] .roster-glow__card:hover .roster-glow__placeholder { filter: grayscale(0); } [data-section="roster"][data-variant="e"] .roster-glow__artist-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 4px; } [data-section="roster"][data-variant="e"] .roster-glow__specialty { font-size: 13px; color: var(--muted); margin-bottom: 12px; } [data-section="roster"][data-variant="e"] .roster-glow__link { color: var(--accent-text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } @media (max-width: 768px) { [data-section="roster"][data-variant="e"] .roster-glow { padding: 48px 24px; } [data-section="roster"][data-variant="e"] .roster-glow__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="roster"][data-variant="e"] .roster-glow__cards { grid-template-columns: 1fr; } [data-section="roster"][data-variant="e"] .roster-glow__card:hover { box-shadow: 0 0 12px rgba(220,185,106,0.2); } } /* ============================================================ Services — Variant A (services-card-grid) 3-column icon card grid; hover lifts border to accent ============================================================ */ [data-section="services"][data-variant="a"] .svc-grid { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="services"][data-variant="a"] .svc-grid__header { text-align: center; margin-bottom: 56px; } [data-section="services"][data-variant="a"] .svc-grid__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } [data-section="services"][data-variant="a"] .svc-grid__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); } [data-section="services"][data-variant="a"] .svc-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; } [data-section="services"][data-variant="a"] .svc-card { background: var(--bg-mid); border: 1px solid var(--rule); border-radius: 4px; padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s; } [data-section="services"][data-variant="a"] .svc-card:hover { border-color: var(--accent); } [data-section="services"][data-variant="a"] .svc-card__icon { width: 36px; height: 36px; color: var(--accent-text); } [data-section="services"][data-variant="a"] .svc-card__icon svg { width: 100%; height: 100%; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } [data-section="services"][data-variant="a"] .svc-card__name { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: 0.03em; color: var(--text); } [data-section="services"][data-variant="a"] .svc-card__desc { font-size: 13px; color: var(--muted); line-height: 1.65; flex: 1; } [data-section="services"][data-variant="a"] .svc-card__price { font-size: 13px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.04em; margin-top: 4px; } @media (max-width: 900px) { [data-section="services"][data-variant="a"] .svc-grid { padding: 56px 32px; } [data-section="services"][data-variant="a"] .svc-grid__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="services"][data-variant="a"] .svc-grid { padding: 48px 20px; } [data-section="services"][data-variant="a"] .svc-grid__heading { font-size: 28px; } [data-section="services"][data-variant="a"] .svc-grid__cards { grid-template-columns: 1fr; } } /* ============================================================ Services — Variant B (services-stacked-list) Alternating rows: name | description | price ============================================================ */ [data-section="services"][data-variant="b"] .svc-list { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="services"][data-variant="b"] .svc-list__header { margin-bottom: 48px; text-align: center; } [data-section="services"][data-variant="b"] .svc-list__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } [data-section="services"][data-variant="b"] .svc-list__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); } [data-section="services"][data-variant="b"] .svc-list__rows { max-width: 1100px; margin: 0 auto; } [data-section="services"][data-variant="b"] .svc-row { display: grid; grid-template-columns: 220px 1fr 160px; align-items: baseline; padding: 22px 28px; border-bottom: 1px solid var(--rule); gap: 32px; } [data-section="services"][data-variant="b"] .svc-row:first-child { border-top: 1px solid var(--rule); } [data-section="services"][data-variant="b"] .svc-row:nth-child(even) { background: var(--bg-mid); } [data-section="services"][data-variant="b"] .svc-row__name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: 0.03em; color: var(--text); } [data-section="services"][data-variant="b"] .svc-row__desc { font-size: 13px; color: var(--muted); line-height: 1.6; } [data-section="services"][data-variant="b"] .svc-row__price { font-size: 13px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.04em; text-align: right; } [data-section="services"][data-variant="b"] .svc-row__link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; } [data-section="services"][data-variant="b"] .svc-row__link:hover { opacity: 0.8; } @media (max-width: 768px) { [data-section="services"][data-variant="b"] .svc-list { padding: 56px 24px; } [data-section="services"][data-variant="b"] .svc-row { grid-template-columns: 1fr; gap: 6px; } [data-section="services"][data-variant="b"] .svc-row__price { text-align: left; } } /* ============================================================ Services — Variant C (services-accordion) Expandable

per service; chevron rotates on open ============================================================ */ [data-section="services"][data-variant="c"] .svc-accordion { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="services"][data-variant="c"] .svc-accordion__header { margin-bottom: 48px; text-align: center; } [data-section="services"][data-variant="c"] .svc-accordion__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } [data-section="services"][data-variant="c"] .svc-accordion__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); } [data-section="services"][data-variant="c"] .svc-accordion__items { max-width: 800px; margin: 0 auto; } [data-section="services"][data-variant="c"] .svc-detail { border-bottom: 1px solid var(--rule); } [data-section="services"][data-variant="c"] .svc-detail:first-of-type { border-top: 1px solid var(--rule); } [data-section="services"][data-variant="c"] .svc-detail[open] { background: var(--bg-mid); } [data-section="services"][data-variant="c"] .svc-detail__summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; gap: 24px; list-style: none; cursor: pointer; transition: color 0.15s; } [data-section="services"][data-variant="c"] .svc-detail__summary:hover { color: var(--accent-text); } [data-section="services"][data-variant="c"] .svc-detail__summary-left { display: flex; align-items: center; gap: 16px; } [data-section="services"][data-variant="c"] .svc-detail__name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: 0.03em; color: var(--text); } [data-section="services"][data-variant="c"] .svc-detail__chevron { width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s; flex-shrink: 0; } [data-section="services"][data-variant="c"] .svc-detail[open] .svc-detail__chevron { transform: rotate(180deg); color: var(--accent-text); } [data-section="services"][data-variant="c"] .svc-detail__price-tag { font-size: 12px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.06em; white-space: nowrap; } [data-section="services"][data-variant="c"] .svc-detail__body { padding: 0 24px 24px; } [data-section="services"][data-variant="c"] .svc-detail__desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; max-width: 60ch; } [data-section="services"][data-variant="c"] .svc-detail__link { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); transition: opacity 0.15s; } [data-section="services"][data-variant="c"] .svc-detail__link:hover { opacity: 0.75; } @media (max-width: 768px) { [data-section="services"][data-variant="c"] .svc-accordion { padding: 56px 24px; } } /* ============================================================ Services — Variant D (services-marquee-grid) Text-only 3-col cards on subtle darkened bg; no icons ============================================================ */ [data-section="services"][data-variant="d"] .svc-marquee { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="services"][data-variant="d"] .svc-marquee__header { text-align: center; margin-bottom: 56px; } [data-section="services"][data-variant="d"] .svc-marquee__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } [data-section="services"][data-variant="d"] .svc-marquee__heading { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.04em; color: var(--text); } [data-section="services"][data-variant="d"] .svc-marquee__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; } [data-section="services"][data-variant="d"] .svc-marquee-card { background: color-mix(in srgb, var(--bg) 94%, #000); border: 1px solid var(--rule); border-radius: 4px; padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s; } [data-section="services"][data-variant="d"] .svc-marquee-card:hover { border-color: var(--accent); } [data-section="services"][data-variant="d"] .svc-marquee-card__name { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: 0.03em; color: var(--text); } [data-section="services"][data-variant="d"] .svc-marquee-card__desc { font-size: 13px; color: color-mix(in srgb, var(--muted) 75%, var(--text)); line-height: 1.65; flex: 1; } [data-section="services"][data-variant="d"] .svc-marquee-card__link { font-size: 12px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--accent-text) 80%, var(--text)); transition: opacity 0.15s; } [data-section="services"][data-variant="d"] .svc-marquee-card__link:hover { opacity: 0.78; } @media (max-width: 900px) { [data-section="services"][data-variant="d"] .svc-marquee { padding: 48px 24px; } [data-section="services"][data-variant="d"] .svc-marquee__heading { font-size: 28px; } [data-section="services"][data-variant="d"] .svc-marquee__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="services"][data-variant="d"] .svc-marquee { padding: 64px 20px; } [data-section="services"][data-variant="d"] .svc-marquee__heading { font-size: 24px; } [data-section="services"][data-variant="d"] .svc-marquee__cards { grid-template-columns: 1fr; } } /* ============================================================ Services — Variant E (services-glassmorphism) 3-col frosted-glass icon cards; backdrop-filter blur(12px) ============================================================ */ [data-section="services"][data-variant="e"] .svc-glass { background: var(--section-bg); padding: 64px 56px; } [data-section="services"][data-variant="e"] .svc-glass__header { margin-bottom: 32px; } [data-section="services"][data-variant="e"] .svc-glass__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="services"][data-variant="e"] .svc-glass__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; } [data-section="services"][data-variant="e"] .svc-glass__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } [data-section="services"][data-variant="e"] .svc-glass__card { background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px 24px; transition: background 0.3s ease, border-color 0.3s ease; } [data-section="services"][data-variant="e"] .svc-glass__card:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); } [data-section="services"][data-variant="e"] .svc-glass__card-icon { width: 36px; height: 36px; color: var(--accent-text); stroke: var(--accent); fill: none; stroke-width: 1.5; margin-bottom: 14px; } [data-section="services"][data-variant="e"] .svc-glass__card-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 8px; } [data-section="services"][data-variant="e"] .svc-glass__card-desc { font-size: 14px; color: color-mix(in srgb, var(--muted) 75%, var(--text)); line-height: 1.6; margin-bottom: 12px; } [data-section="services"][data-variant="e"] .svc-glass__card-price { font-size: 13px; color: var(--accent-text); font-weight: 500; } [data-section="services"][data-variant="e"] .svc-glass__card-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); text-decoration: none; letter-spacing: 0.04em; } [data-section="services"][data-variant="e"] .svc-glass__card-link:hover { text-decoration: underline; } @media (max-width: 768px) { [data-section="services"][data-variant="e"] .svc-glass { padding: 48px 24px; } [data-section="services"][data-variant="e"] .svc-glass__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="services"][data-variant="e"] .svc-glass__cards { grid-template-columns: 1fr; } [data-section="services"][data-variant="e"] .svc-glass__card { backdrop-filter: blur(6px); } } /* ========================================================== Section: third-party-trust Press logos, award badges, "as featured in" rows. Scoped per variant to [data-section="third-party-trust"][data-variant=""]. ========================================================== */ /* --- Variant A: press-strip --- */ /* 🚨 The section paints its own background from --section-bg. Without this the builder's per-section Background picker wrote the database and rendered nothing — the control existed, the tone never appeared. Reported by a client as "Need to be able change bg color of third party trust" (Sean, Darkside, 2026-08-14); same defect class as the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had no CSS at all. `--section-bg` falls back to the framework's own value, so a tenant who never touches the picker sees no change. */ [data-section="third-party-trust"][data-variant="a"] .trust-strip { background: var(--section-bg); padding: 48px 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; max-width: 1200px; margin: 0 auto; } [data-section="third-party-trust"][data-variant="a"] .trust-strip__eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } [data-section="third-party-trust"][data-variant="a"] .trust-strip__names { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: var(--text); opacity: 0.82; line-height: 2; } /* Award/press LOGO in the strip (award.imageUrl) — capped so an uploaded logo can't blow up the row (2026-07-25 review: Sean's Alliance badge). */ [data-section="third-party-trust"][data-variant="a"] .trust-strip__logo { /* 34px was too small to read an accreditation mark (operator, 2026-08-03) — these are BBB / Chamber-of-Commerce style badges, not wordmarks, so detail matters. */ height: 56px; max-width: 190px; width: auto; object-fit: contain; display: inline-block; vertical-align: middle; /* Accreditation logos are supplied as dark artwork on transparent PNGs, so on a dark theme two of Darkside's six were invisible. A light plate is the standard press-strip treatment and works for ANY artwork — unlike `invert()`, which would destroy the coloured seals (the red cross, the gold badges). Sized so a light-on-light logo still reads on a light theme. */ background: #fff; padding: 8px 12px; border-radius: 6px; box-sizing: content-box; } /* The plate is only needed where the section background is dark. On a light theme it is invisible anyway, but drop the radius/padding cost by keeping it transparent when the page background is light. */ [data-section="third-party-trust"][data-variant="a"] .trust-strip__link { display: inline-block; vertical-align: middle; text-decoration: none; transition: opacity 0.18s ease, transform 0.18s ease; } [data-section="third-party-trust"][data-variant="a"] .trust-strip__link:hover { opacity: 0.82; transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { [data-section="third-party-trust"][data-variant="a"] .trust-strip__link { transition: none; } [data-section="third-party-trust"][data-variant="a"] .trust-strip__link:hover { transform: none; } } [data-section="third-party-trust"][data-variant="a"] .trust-strip__sep { display: inline-block; margin: 0 18px; color: var(--accent-text); } @media (max-width: 900px) { [data-section="third-party-trust"][data-variant="a"] .trust-strip { padding: 36px 24px; } [data-section="third-party-trust"][data-variant="a"] .trust-strip__sep { margin: 0 10px; } } /* --- Variant B: awards-grid --- */ /* 🚨 The section paints its own background from --section-bg. Without this the builder's per-section Background picker wrote the database and rendered nothing — the control existed, the tone never appeared. Reported by a client as "Need to be able change bg color of third party trust" (Sean, Darkside, 2026-08-14); same defect class as the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had no CSS at all. `--section-bg` falls back to the framework's own value, so a tenant who never touches the picker sees no change. */ [data-section="third-party-trust"][data-variant="b"] .trust-grid { background: var(--section-bg); display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; padding: 56px; max-width: 1200px; margin: 0 auto; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__col { padding: 0 48px; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__col:first-child { padding-left: 0; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__col:last-child { padding-right: 0; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__rule { width: 1px; background: var(--rule); align-self: stretch; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 28px; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__item { padding: 14px 0; border-bottom: 1px solid var(--rule); } [data-section="third-party-trust"][data-variant="b"] .trust-grid__item:last-child { border-bottom: none; } /* Award/press LOGO above the entry (award.imageUrl) — capped. */ [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-logo { max-height: 52px; max-width: 170px; width: auto; height: auto; object-fit: contain; display: block; margin-bottom: 8px; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-name { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.03em; color: var(--text); margin-bottom: 2px; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-name--award { color: var(--accent-text); } [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-year { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-event { font-size: 12px; color: var(--muted); margin-top: 2px; } @media (max-width: 900px) { [data-section="third-party-trust"][data-variant="b"] .trust-grid { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__col { padding: 0; } [data-section="third-party-trust"][data-variant="b"] .trust-grid__rule { display: none; } } /* --- Variant C: timeline --- */ /* 🚨 The section paints its own background from --section-bg. Without this the builder's per-section Background picker wrote the database and rendered nothing — the control existed, the tone never appeared. Reported by a client as "Need to be able change bg color of third party trust" (Sean, Darkside, 2026-08-14); same defect class as the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had no CSS at all. `--section-bg` falls back to the framework's own value, so a tenant who never touches the picker sees no change. */ [data-section="third-party-trust"][data-variant="c"] .trust-timeline { background: var(--section-bg); position: relative; padding: 64px 56px; max-width: 800px; margin: 0 auto; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__lineage { margin-bottom: 48px; padding-left: 40px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__lineage-eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__lineage-text { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--text); opacity: 0.88; line-height: 1.55; max-width: 560px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__track { position: relative; padding-left: 40px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__track::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0.35; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__entry { position: relative; padding-bottom: 36px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__entry:last-child { padding-bottom: 0; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__dot { position: absolute; left: -40px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__dot--award { background: var(--accent); } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__year { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; font-weight: 500; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__title { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.03em; color: var(--text); margin-bottom: 4px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__title--award { color: var(--accent-text); } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__desc { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 480px; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__tag { display: inline-block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-top: 6px; font-weight: 500; } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__tag--press { color: var(--muted); border: 1px solid var(--rule); } [data-section="third-party-trust"][data-variant="c"] .trust-timeline__tag--award { color: var(--accent-text); border: 1px solid rgba(220, 185, 106, 0.3); } @media (max-width: 900px) { [data-section="third-party-trust"][data-variant="c"] .trust-timeline { padding: 48px 24px; } } /* --- Variant D: fade-timeline --- */ /* Shares trust-timeline BEM structure from Variant C; adds scroll-reveal animation layer. */ [data-section="third-party-trust"][data-variant="d"] .trust3p-fade { background: var(--section-bg); padding: 80px 56px; max-width: 920px; margin: 0 auto; } /* Lineage block animates in first */ [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__lineage { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__lineage { opacity: 1; transform: none; transition-delay: 0.1s; } /* Vertical track line draws down */ [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__track { position: relative; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__track::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0.35; transform: scaleY(0); transform-origin: top; transition: transform 2s ease; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__track::before { transform: scaleY(1); } /* Entries slide + fade in with staggered delays */ [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__entry { position: relative; padding-bottom: 36px; opacity: 0; transform: translateX(-30px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__entry:last-child { padding-bottom: 0; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry { opacity: 1; transform: none; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(1) { transition-delay: 0.3s; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(2) { transition-delay: 0.45s; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(3) { transition-delay: 0.6s; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(4) { transition-delay: 0.75s; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(5) { transition-delay: 0.9s; } [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(6) { transition-delay: 1.05s; } /* Re-use Variant C BEM elements for dot, year, title, desc, tag */ [data-section="third-party-trust"][data-variant="d"] .trust-timeline__dot { position: absolute; left: -40px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__dot--award { background: var(--accent); } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__lineage-eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__lineage-text { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--text); opacity: 0.88; line-height: 1.55; max-width: 560px; } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__year { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; font-weight: 500; } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__title { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.03em; color: var(--text); margin-bottom: 4px; } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__title--award { color: var(--accent-text); } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__desc { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 480px; } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__tag { display: inline-block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-top: 6px; font-weight: 500; } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__tag--press { color: var(--muted); border: 1px solid var(--rule); } [data-section="third-party-trust"][data-variant="d"] .trust-timeline__tag--award { color: var(--accent-text); border: 1px solid rgba(220, 185, 106, 0.3); } @media (max-width: 480px) { [data-section="third-party-trust"][data-variant="d"] .trust3p-fade { padding: 48px 24px; } } /* --- Variant E: glow-badges --- */ @keyframes tpt-dotPulse { 0%, 100% { opacity: 0.4; color: var(--muted); } 50% { opacity: 1; color: var(--accent-text); } } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow { background: var(--section-bg); padding: 48px 56px; text-align: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 16px; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__names { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em; color: var(--text); } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__name { cursor: default; transition: text-shadow 0.3s ease, color 0.3s ease; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__name:hover { text-shadow: 0 0 12px var(--accent); color: var(--accent-text); } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep { display: inline-block; margin: 0 14px; animation: tpt-dotPulse 3s ease infinite; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(1) { animation-delay: 0s; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(2) { animation-delay: 0.4s; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(3) { animation-delay: 0.8s; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(4) { animation-delay: 1.2s; } @media (max-width: 480px) { [data-section="third-party-trust"][data-variant="e"] .trust3p-glow { padding: 36px 24px; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__names { font-size: 16px; } [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep { margin: 0 8px; } } /* ========================================================= Pricing — Variants A–E ========================================================= */ /* --- Variant A: pricing-centered-prose --- */ [data-section="pricing"][data-variant="a"] .pricing-prose { padding: 80px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="pricing"][data-variant="a"] .pricing-prose__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 24px; } [data-section="pricing"][data-variant="a"] .pricing-prose__headline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 38px; letter-spacing: 0.01em; color: var(--text); margin-bottom: 36px; line-height: 1.2; } [data-section="pricing"][data-variant="a"] .pricing-prose__rule { width: 48px; height: 1px; background: var(--accent); margin-bottom: 36px; } [data-section="pricing"][data-variant="a"] .pricing-prose__body { max-width: 680px; } [data-section="pricing"][data-variant="a"] .pricing-prose__body p { font-size: 15px; color: var(--text); opacity: 0.82; line-height: 1.75; margin-bottom: 18px; } [data-section="pricing"][data-variant="a"] .pricing-prose__body p:last-child { margin-bottom: 0; } [data-section="pricing"][data-variant="a"] .pricing-prose__body .accent { color: var(--accent-text); font-weight: 500; } @media (max-width: 900px) { [data-section="pricing"][data-variant="a"] .pricing-prose { padding: 56px 24px; } [data-section="pricing"][data-variant="a"] .pricing-prose__headline { font-size: 28px; } } /* --- Variant B: pricing-three-cards --- */ [data-section="pricing"][data-variant="b"] .pricing-cards { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="pricing"][data-variant="b"] .pricing-cards__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); text-align: center; margin-bottom: 48px; } [data-section="pricing"][data-variant="b"] .pricing-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; } [data-section="pricing"][data-variant="b"] .pricing-card { background: var(--bg-mid); border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; } [data-section="pricing"][data-variant="b"] .pricing-card__name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.06em; color: var(--text); margin-bottom: 20px; } [data-section="pricing"][data-variant="b"] .pricing-card__price { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.02em; margin-bottom: 8px; line-height: 1.1; } [data-section="pricing"][data-variant="b"] .pricing-card__qualifier { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 20px; } [data-section="pricing"][data-variant="b"] .pricing-card__rule { width: 32px; height: 1px; background: var(--rule); margin-bottom: 20px; } [data-section="pricing"][data-variant="b"] .pricing-card__desc { font-size: 14px; color: var(--text); opacity: 0.72; line-height: 1.65; margin-bottom: 28px; flex: 1; } [data-section="pricing"][data-variant="b"] .pricing-card__cta { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 0.15s; } [data-section="pricing"][data-variant="b"] .pricing-card__cta:hover { border-color: var(--accent); } @media (max-width: 900px) { [data-section="pricing"][data-variant="b"] .pricing-cards { padding: 56px 24px; } [data-section="pricing"][data-variant="b"] .pricing-cards__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } } /* --- Variant C: pricing-inline-table --- */ [data-section="pricing"][data-variant="c"] .pricing-table { padding: 80px 56px; background: var(--section-bg); display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin: 0 auto; } [data-section="pricing"][data-variant="c"] .pricing-table__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 32px; } [data-section="pricing"][data-variant="c"] .pricing-table__strip { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 960px; border: 1px solid var(--rule); background: var(--bg-mid); } [data-section="pricing"][data-variant="c"] .pricing-table__cell { padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } [data-section="pricing"][data-variant="c"] .pricing-table__cell + .pricing-table__cell { border-left: 1px solid var(--rule); } [data-section="pricing"][data-variant="c"] .pricing-table__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } [data-section="pricing"][data-variant="c"] .pricing-table__value { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--accent-text); letter-spacing: 0.02em; } [data-section="pricing"][data-variant="c"] .pricing-table__note { margin-top: 24px; font-size: 13px; color: var(--muted); line-height: 1.65; text-align: center; max-width: 560px; } @media (max-width: 900px) { [data-section="pricing"][data-variant="c"] .pricing-table { padding: 56px 24px; } [data-section="pricing"][data-variant="c"] .pricing-table__strip { grid-template-columns: repeat(2, 1fr); } [data-section="pricing"][data-variant="c"] .pricing-table__cell:nth-child(3) { border-left: none; border-top: 1px solid var(--rule); } [data-section="pricing"][data-variant="c"] .pricing-table__cell:nth-child(4) { border-top: 1px solid var(--rule); } [data-section="pricing"][data-variant="c"] .pricing-table__value { font-size: 20px; } } /* --- Variant D: pricing-cards-hover-lift --- */ @keyframes pricing-textShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } [data-section="pricing"][data-variant="d"] .price-lift { background: var(--section-bg); padding: 64px 56px; } [data-section="pricing"][data-variant="d"] .price-lift__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 24px; } [data-section="pricing"][data-variant="d"] .price-lift__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } [data-section="pricing"][data-variant="d"] .price-lift__card { background: var(--bg-mid); padding: 32px 24px; border: 1px solid var(--rule); border-radius: 4px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } [data-section="pricing"][data-variant="d"] .price-lift__card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); border-color: var(--accent); } [data-section="pricing"][data-variant="d"] .price-lift__name { font-family: var(--font-display); font-size: 18px; margin-bottom: 12px; } [data-section="pricing"][data-variant="d"] .price-lift__price { font-family: var(--font-display); font-size: 36px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--text), var(--accent)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: pricing-textShimmer 4s ease infinite; margin-bottom: 4px; } [data-section="pricing"][data-variant="d"] .price-lift__qualifier { font-size: 12px; color: var(--muted); margin-bottom: 16px; } [data-section="pricing"][data-variant="d"] .price-lift__rule { width: 32px; height: 1px; background: var(--rule); margin-bottom: 16px; } [data-section="pricing"][data-variant="d"] .price-lift__desc { font-size: 14px; color: var(--muted); margin-bottom: 20px; } [data-section="pricing"][data-variant="d"] .price-lift__cta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } @media (max-width: 768px) { [data-section="pricing"][data-variant="d"] .price-lift__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { [data-section="pricing"][data-variant="d"] .price-lift { padding: 48px 24px; } } /* --- Variant E: pricing-reveal --- */ [data-section="pricing"][data-variant="e"] .price-reveal { background: var(--section-bg); padding: 56px 56px; } [data-section="pricing"][data-variant="e"] .price-reveal__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 20px; } [data-section="pricing"][data-variant="e"] .price-reveal__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } [data-section="pricing"][data-variant="e"] .price-reveal__cell { padding: 24px 20px; border-right: 1px solid var(--rule); opacity: 0; transform: translateX(-20px); transition: opacity 0.4s ease, transform 0.4s ease; } [data-section="pricing"][data-variant="e"] .price-reveal__cell:last-child { border-right: none; } [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell { opacity: 1; transform: none; } [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(1) { transition-delay: 0s; } [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(2) { transition-delay: 0.2s; } [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(3) { transition-delay: 0.4s; } [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(4) { transition-delay: 0.6s; } [data-section="pricing"][data-variant="e"] .price-reveal__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; } [data-section="pricing"][data-variant="e"] .price-reveal__value { display: block; font-family: var(--font-display); font-size: 22px; color: var(--accent-text); } [data-section="pricing"][data-variant="e"] .price-reveal__note { font-size: 13px; color: var(--muted); margin-top: 16px; } @media (max-width: 768px) { [data-section="pricing"][data-variant="e"] .price-reveal__strip { grid-template-columns: repeat(2, 1fr); } [data-section="pricing"][data-variant="e"] .price-reveal__cell:nth-child(2) { border-right: none; } } @media (max-width: 480px) { [data-section="pricing"][data-variant="e"] .price-reveal { padding: 40px 24px; } [data-section="pricing"][data-variant="e"] .price-reveal__strip { grid-template-columns: 1fr; } [data-section="pricing"][data-variant="e"] .price-reveal__cell { border-right: none; border-bottom: 1px solid var(--rule); } [data-section="pricing"][data-variant="e"] .price-reveal__cell:last-child { border-bottom: none; } } /* ===================================================== Testimonials — shared ===================================================== */ [data-section="testimonials"] .stars { display: inline-flex; gap: 3px; color: var(--accent-text); font-size: 14px; letter-spacing: 2px; } [data-section="testimonials"] .stars--lg { font-size: 22px; letter-spacing: 3px; } /* ===================================================== Testimonials A — pull-quote-cards ===================================================== */ [data-section="testimonials"][data-variant="a"] .testi-cards { padding: 64px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="testimonials"][data-variant="a"] .testi-cards__heading { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.04em; text-align: center; margin-bottom: 12px; } [data-section="testimonials"][data-variant="a"] .testi-cards__sub { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 48px; letter-spacing: 0.02em; } [data-section="testimonials"][data-variant="a"] .testi-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } [data-section="testimonials"][data-variant="a"] .testi-card { background: var(--bg-mid); border: 1px solid var(--rule); padding: 36px 32px 32px; display: flex; flex-direction: column; } [data-section="testimonials"][data-variant="a"] .testi-card__open-quote { font-family: var(--font-display); font-size: 56px; color: var(--accent-text); line-height: 1; margin-bottom: 8px; user-select: none; } [data-section="testimonials"][data-variant="a"] .testi-card__quote { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--text); flex: 1; margin-bottom: 20px; } [data-section="testimonials"][data-variant="a"] .testi-card__rule { height: 1px; background: var(--rule); margin-bottom: 18px; } [data-section="testimonials"][data-variant="a"] .testi-card__attribution { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin-bottom: 10px; } [data-section="testimonials"][data-variant="a"] .testi-card__attribution strong { color: var(--text); font-weight: 500; } @media (max-width: 900px) { [data-section="testimonials"][data-variant="a"] .testi-cards { padding: 48px 24px; } [data-section="testimonials"][data-variant="a"] .testi-cards__grid { grid-template-columns: 1fr; } } /* ===================================================== Testimonials B — single-large-rotating ===================================================== */ [data-section="testimonials"][data-variant="b"] .testi-single { padding: 80px 56px; background: var(--section-bg); text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin: 0 auto; } [data-section="testimonials"][data-variant="b"] .testi-single__heading { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.04em; margin-bottom: 48px; } [data-section="testimonials"][data-variant="b"] .testi-single__open-quote { font-family: var(--font-display); font-size: 72px; color: var(--accent-text); line-height: 1; margin-bottom: 12px; user-select: none; } [data-section="testimonials"][data-variant="b"] .testi-single__quote { font-family: var(--font-display); font-style: italic; font-size: 32px; line-height: 1.4; color: var(--text); max-width: 780px; margin-bottom: 28px; } [data-section="testimonials"][data-variant="b"] .testi-single__attribution { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin-bottom: 8px; } [data-section="testimonials"][data-variant="b"] .testi-single__attribution strong { color: var(--text); font-weight: 500; } [data-section="testimonials"][data-variant="b"] .testi-single__stars { margin-bottom: 24px; } [data-section="testimonials"][data-variant="b"] .testi-single__count { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 18px; } [data-section="testimonials"][data-variant="b"] .testi-single__link { font-size: 13px; color: var(--accent-text); letter-spacing: 0.06em; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 0.15s; } [data-section="testimonials"][data-variant="b"] .testi-single__link:hover { border-color: var(--accent); } @media (max-width: 900px) { [data-section="testimonials"][data-variant="b"] .testi-single { padding: 56px 24px; } [data-section="testimonials"][data-variant="b"] .testi-single__quote { font-size: 24px; } } /* ===================================================== Testimonials C — google-embed-style ===================================================== */ [data-section="testimonials"][data-variant="c"] .testi-google { padding: 64px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="testimonials"][data-variant="c"] .testi-google__heading { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.04em; text-align: center; margin-bottom: 48px; } [data-section="testimonials"][data-variant="c"] .testi-google__layout { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; } [data-section="testimonials"][data-variant="c"] .testi-google__agg { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 32px; background: var(--bg-mid); border: 1px solid var(--rule); } [data-section="testimonials"][data-variant="c"] .testi-google__score { font-family: var(--font-display); font-size: 56px; color: var(--accent-text); font-weight: 600; line-height: 1; margin-bottom: 12px; } [data-section="testimonials"][data-variant="c"] .testi-google__agg-stars { margin-bottom: 14px; } [data-section="testimonials"][data-variant="c"] .testi-google__agg-meta { font-size: 13px; color: var(--muted); margin-bottom: 20px; letter-spacing: 0.02em; } [data-section="testimonials"][data-variant="c"] .testi-google__write-link { font-size: 12px; color: var(--accent-text); letter-spacing: var(--btn-tracking, 0.08em); text-transform: var(--btn-transform, uppercase); border: 1px solid var(--accent); border-radius: var(--btn-radius, 0); font-weight: var(--btn-weight, 500); padding: 10px 20px; transition: background 0.15s, color 0.15s; } [data-section="testimonials"][data-variant="c"] .testi-google__write-link:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } [data-section="testimonials"][data-variant="c"] .testi-google__reviews { display: flex; flex-direction: column; gap: 18px; } [data-section="testimonials"][data-variant="c"] .testi-google__review { background: var(--bg-mid); border: 1px solid var(--rule); padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; } [data-section="testimonials"][data-variant="c"] .testi-google__review-header { display: flex; justify-content: space-between; align-items: center; } [data-section="testimonials"][data-variant="c"] .testi-google__reviewer { font-size: 14px; font-weight: 500; color: var(--text); } [data-section="testimonials"][data-variant="c"] .testi-google__via { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; } [data-section="testimonials"][data-variant="c"] .testi-google__review-quote { font-size: 14px; color: var(--text); opacity: 0.88; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 900px) { [data-section="testimonials"][data-variant="c"] .testi-google { padding: 48px 24px; } [data-section="testimonials"][data-variant="c"] .testi-google__layout { grid-template-columns: 1fr; gap: 32px; } [data-section="testimonials"][data-variant="c"] .testi-google__agg { max-width: 360px; margin: 0 auto; width: 100%; } } /* ===================================================== Testimonials D — float-cards ===================================================== */ @keyframes testiFloat1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes testiFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes testiFloat3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes starGlow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent); } } [data-section="testimonials"][data-variant="d"] .testi-float { background: var(--section-bg); padding: 80px 56px; text-align: center; } [data-section="testimonials"][data-variant="d"] .testi-float__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 8px; } [data-section="testimonials"][data-variant="d"] .testi-float__sub { font-size: 14px; color: var(--muted); margin-bottom: 40px; } [data-section="testimonials"][data-variant="d"] .testi-float__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } [data-section="testimonials"][data-variant="d"] .testi-float__card { background: var(--bg-mid); border: 1px solid var(--rule); border-radius: 4px; padding: 32px 24px; text-align: left; } [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(1) { animation: testiFloat1 6s ease-in-out infinite; } [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(2) { animation: testiFloat2 7s ease-in-out infinite; animation-delay: 0.5s; } [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(3) { animation: testiFloat3 5s ease-in-out infinite; animation-delay: 1s; } [data-section="testimonials"][data-variant="d"] .testi-float__open-quote { font-family: var(--font-display); font-size: 48px; color: var(--accent-text); line-height: 0.5; margin-bottom: 12px; } [data-section="testimonials"][data-variant="d"] .testi-float__quote { font-size: 15px; line-height: 1.55; color: var(--text); margin-bottom: 16px; } [data-section="testimonials"][data-variant="d"] .testi-float__rule { width: 32px; height: 1px; background: var(--rule); margin-bottom: 12px; } [data-section="testimonials"][data-variant="d"] .testi-float__attribution { font-size: 13px; color: var(--muted); margin-bottom: 12px; } [data-section="testimonials"][data-variant="d"] .testi-float__stars span { color: var(--accent-text); font-size: 16px; animation: starGlow 2s ease-in-out infinite; } [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(1) { animation-delay: 0s; } [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(2) { animation-delay: 0.2s; } [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(3) { animation-delay: 0.4s; } [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(4) { animation-delay: 0.6s; } [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(5) { animation-delay: 0.8s; } @media (max-width: 768px) { [data-section="testimonials"][data-variant="d"] .testi-float__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { [data-section="testimonials"][data-variant="d"] .testi-float { padding: 56px 24px; } [data-section="testimonials"][data-variant="d"] .testi-float__card, [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(1), [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(2), [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(3) { animation: none; } } /* ===================================================== Testimonials E — typewriter ===================================================== */ [data-section="testimonials"][data-variant="e"] .testi-type { background: var(--section-bg); padding: 80px 56px; text-align: center; max-width: 860px; margin: 0 auto; } [data-section="testimonials"][data-variant="e"] .testi-type__heading { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin-bottom: 24px; } [data-section="testimonials"][data-variant="e"] .testi-type__open-quote { font-family: var(--font-display); font-size: 80px; color: var(--accent-text); line-height: 0.5; margin-bottom: 16px; } [data-section="testimonials"][data-variant="e"] .testi-type__quote { font-family: var(--font-display); font-size: 26px; line-height: 1.45; color: var(--text); max-width: 720px; margin: 0 auto 24px; clip-path: inset(0 100% 0 0); transition: clip-path 3s ease; } [data-section="testimonials"][data-variant="e"] .testi-type.is-visible .testi-type__quote { clip-path: inset(0 0 0 0); } [data-section="testimonials"][data-variant="e"] .testi-type__attribution { font-size: 14px; color: var(--muted); margin-bottom: 16px; opacity: 0; transition: opacity 0.6s ease 2.8s; } [data-section="testimonials"][data-variant="e"] .testi-type.is-visible .testi-type__attribution { opacity: 1; } [data-section="testimonials"][data-variant="e"] .testi-type__stars { margin-bottom: 12px; opacity: 0; transition: opacity 0.6s ease 3s; } [data-section="testimonials"][data-variant="e"] .testi-type.is-visible .testi-type__stars { opacity: 1; } [data-section="testimonials"][data-variant="e"] .testi-type__stars span { color: var(--accent-text); font-size: 22px; } [data-section="testimonials"][data-variant="e"] .testi-type__count { font-size: 12px; color: var(--muted); margin-bottom: 12px; } [data-section="testimonials"][data-variant="e"] .testi-type__link { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } @media (max-width: 480px) { [data-section="testimonials"][data-variant="e"] .testi-type { padding: 56px 24px; } [data-section="testimonials"][data-variant="e"] .testi-type__quote { font-size: 20px; } } /* ============================================================ Journal section — shared chrome Assembler lines 3245-3270 + responsive at 3494-3505 ============================================================ */ [data-section="blog"] .journal-section { padding: 80px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="blog"] .journal-section__footer { text-align: center; margin-top: 36px; } [data-section="blog"] .journal-section__more { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; } [data-section="blog"] .journal-section__more:hover { opacity: 0.8; } [data-section="blog"] .journal-section__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; text-align: center; } [data-section="blog"] .journal-section__heading { font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: 0.04em; margin-bottom: 48px; text-align: center; } @media (max-width: 900px) { [data-section="blog"] .journal-section { padding: 56px 24px; } } /* ============================================================ Variant A — journal-2x2-grid Assembler lines 3272-3321 ============================================================ */ [data-section="blog"][data-variant="a"] .grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } [data-section="blog"][data-variant="a"] .grid-2x2__card { display: flex; flex-direction: column; } [data-section="blog"][data-variant="a"] .grid-2x2__img-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--bg-mid); margin-bottom: 18px; } [data-section="blog"][data-variant="a"] .grid-2x2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } [data-section="blog"][data-variant="a"] .grid-2x2__card:hover .grid-2x2__img { transform: scale(1.04); } [data-section="blog"][data-variant="a"] .grid-2x2__title { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: 0.02em; margin-bottom: 8px; line-height: 1.3; } [data-section="blog"][data-variant="a"] .grid-2x2__meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); } [data-section="blog"][data-variant="a"] .grid-2x2__date { letter-spacing: 0.04em; } [data-section="blog"][data-variant="a"] .grid-2x2__link { color: var(--accent-text); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; transition: opacity 0.15s; } [data-section="blog"][data-variant="a"] .grid-2x2__link:hover { opacity: 0.78; } @media (max-width: 900px) { [data-section="blog"][data-variant="a"] .grid-2x2 { grid-template-columns: 1fr; } } /* ============================================================ Variant B — journal-featured-plus-list Assembler lines 3323-3399 ============================================================ */ [data-section="blog"][data-variant="b"] .feat-list { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; } [data-section="blog"][data-variant="b"] .feat-list__img-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: var(--bg-mid); margin-bottom: 24px; } [data-section="blog"][data-variant="b"] .feat-list__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } [data-section="blog"][data-variant="b"] .feat-list__featured:hover .feat-list__img { transform: scale(1.03); } [data-section="blog"][data-variant="b"] .feat-list__feat-title { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: 0.02em; margin-bottom: 12px; line-height: 1.25; } [data-section="blog"][data-variant="b"] .feat-list__feat-excerpt { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; max-width: 52ch; } [data-section="blog"][data-variant="b"] .feat-list__feat-link { font-size: 12px; color: var(--accent-text); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 0.15s; } [data-section="blog"][data-variant="b"] .feat-list__feat-link:hover { opacity: 0.78; } [data-section="blog"][data-variant="b"] .feat-list__sidebar { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 4px; } [data-section="blog"][data-variant="b"] .feat-list__item { padding: 20px 0; border-bottom: 1px solid var(--rule); } [data-section="blog"][data-variant="b"] .feat-list__item:first-child { padding-top: 0; } [data-section="blog"][data-variant="b"] .feat-list__item:last-child { border-bottom: none; } [data-section="blog"][data-variant="b"] .feat-list__item-title { font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: 0.02em; margin-bottom: 6px; line-height: 1.3; transition: color 0.15s; } [data-section="blog"][data-variant="b"] .feat-list__item:hover .feat-list__item-title { color: var(--accent-text); } [data-section="blog"][data-variant="b"] .feat-list__item-date { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } @media (max-width: 900px) { [data-section="blog"][data-variant="b"] .feat-list { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ Variant C — journal-horizontal-scroll Assembler lines 3401-3489 ============================================================ */ [data-section="blog"][data-variant="c"] .hscroll-wrap { position: relative; } [data-section="blog"][data-variant="c"] .hscroll { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } [data-section="blog"][data-variant="c"] .hscroll::-webkit-scrollbar { display: none; } [data-section="blog"][data-variant="c"] .hscroll__card { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; } [data-section="blog"][data-variant="c"] .hscroll__img-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--bg-mid); margin-bottom: 14px; } [data-section="blog"][data-variant="c"] .hscroll__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } [data-section="blog"][data-variant="c"] .hscroll__card:hover .hscroll__img { transform: scale(1.04); } [data-section="blog"][data-variant="c"] .hscroll__title { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 6px; line-height: 1.3; } [data-section="blog"][data-variant="c"] .hscroll__date { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } [data-section="blog"][data-variant="c"] .hscroll__view-all { flex: 0 0 280px; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; } [data-section="blog"][data-variant="c"] .hscroll__view-all a { font-size: 13px; color: var(--accent-text); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 28px; border: 1px solid var(--accent); transition: background 0.15s, color 0.15s; } [data-section="blog"][data-variant="c"] .hscroll__view-all a:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); } [data-section="blog"][data-variant="c"] .hscroll-wrap::before, [data-section="blog"][data-variant="c"] .hscroll-wrap::after { content: ''; position: absolute; top: 0; bottom: 8px; width: 64px; z-index: 2; pointer-events: none; } [data-section="blog"][data-variant="c"] .hscroll-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); opacity: 0; } [data-section="blog"][data-variant="c"] .hscroll-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } @media (max-width: 900px) { [data-section="blog"][data-variant="c"] .hscroll__card { flex: 0 0 240px; } } /* ============================================================ Variant D — journal-hover-tilt Assembler lines 6418-6486 ============================================================ */ [data-section="blog"][data-variant="d"] .jrnl-tilt { background: var(--section-bg); padding: 64px 56px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 32px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__card { display: block; color: inherit; transition: transform 0.4s ease; transform-style: preserve-3d; } [data-section="blog"][data-variant="d"] .jrnl-tilt__card:hover { transform: perspective(800px) rotateY(-3deg) rotateX(2deg) scale(1.02); } [data-section="blog"][data-variant="d"] .jrnl-tilt__img-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; margin-bottom: 14px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease, transform 0.6s ease; } [data-section="blog"][data-variant="d"] .jrnl-tilt__card:hover .jrnl-tilt__img { filter: brightness(1.12); transform: scale(1.04); } [data-section="blog"][data-variant="d"] .jrnl-tilt__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 6px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); } [data-section="blog"][data-variant="d"] .jrnl-tilt__link { color: var(--accent-text); } @media (max-width: 768px) { [data-section="blog"][data-variant="d"] .jrnl-tilt__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { [data-section="blog"][data-variant="d"] .jrnl-tilt { padding: 48px 24px; } [data-section="blog"][data-variant="d"] .jrnl-tilt__card:hover { transform: none; } } /* ============================================================ Variant E — journal-slide-in Assembler lines 6488-6581 Note: .is-visible is applied statically (SSR); no JS observer needed. ============================================================ */ [data-section="blog"][data-variant="e"] .jrnl-slide { background: var(--section-bg); padding: 64px 56px; } [data-section="blog"][data-variant="e"] .jrnl-slide__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="blog"][data-variant="e"] .jrnl-slide__heading { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 32px; } [data-section="blog"][data-variant="e"] .jrnl-slide__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; } [data-section="blog"][data-variant="e"] .jrnl-slide__featured { display: block; color: inherit; opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-section="blog"][data-variant="e"] .jrnl-slide__list { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; } [data-section="blog"][data-variant="e"] .jrnl-slide.is-visible .jrnl-slide__featured, [data-section="blog"][data-variant="e"] .jrnl-slide.is-visible .jrnl-slide__list { opacity: 1; transform: none; } [data-section="blog"][data-variant="e"] .jrnl-slide__feat-img-wrap { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; margin-bottom: 14px; } [data-section="blog"][data-variant="e"] .jrnl-slide__feat-img { width: 100%; height: 100%; object-fit: cover; } [data-section="blog"][data-variant="e"] .jrnl-slide__feat-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 8px; } [data-section="blog"][data-variant="e"] .jrnl-slide__feat-excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 12px; } [data-section="blog"][data-variant="e"] .jrnl-slide__feat-link { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } [data-section="blog"][data-variant="e"] .jrnl-slide__item { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); color: inherit; } [data-section="blog"][data-variant="e"] .jrnl-slide__item:last-child { border-bottom: none; } [data-section="blog"][data-variant="e"] .jrnl-slide__item-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; margin-bottom: 4px; } [data-section="blog"][data-variant="e"] .jrnl-slide__item-date { font-size: 12px; color: var(--muted); } @media (max-width: 768px) { [data-section="blog"][data-variant="e"] .jrnl-slide__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { [data-section="blog"][data-variant="e"] .jrnl-slide { padding: 48px 24px; } } /* ========================================================== Section 13 — FAQ ========================================================== */ /* --- Rich answer content (all variants) --- Answers render through FaqRichAnswer (sanitized Quill / seeded HTML; legacy plaintext converts to

). [data-faq-rich] marks the answer wrapper; these rules style the nested block vocabulary the FAQ sanitizer allows (paragraphs, lists, blockquote pull-quotes, sub-heads, tables, rules) without disturbing per-variant type. */ [data-section="faq"] [data-faq-rich] p { margin: 0 0 0.8em; } [data-section="faq"] [data-faq-rich] p:last-child { margin-bottom: 0; } [data-section="faq"] [data-faq-rich] ul, [data-section="faq"] [data-faq-rich] ol { margin: 0 0 0.8em; padding-left: 1.4em; } [data-section="faq"] [data-faq-rich] blockquote { margin: 0 0 1em; padding: 8px 14px; border-left: 3px solid var(--accent, currentColor); font-style: italic; opacity: 0.95; } [data-section="faq"] [data-faq-rich] blockquote p:last-child { margin-bottom: 0; } [data-section="faq"] [data-faq-rich] h3, [data-section="faq"] [data-faq-rich] h4 { margin: 1.1em 0 0.4em; font-size: 1.02em; } [data-section="faq"] [data-faq-rich] table { border-collapse: collapse; margin: 0 0 1em; width: 100%; font-size: 0.95em; } [data-section="faq"] [data-faq-rich] th, [data-section="faq"] [data-faq-rich] td { border: 1px solid rgba(128, 128, 128, 0.35); padding: 6px 10px; text-align: left; vertical-align: top; } [data-section="faq"] [data-faq-rich] hr { border: 0; border-top: 1px solid rgba(128, 128, 128, 0.35); margin: 1.1em 0; } /* --- Variant A: faq-hairline-list --- Stacked Q&A pairs separated by hairline rules. All items visible. */ [data-section="faq"][data-variant="a"] .faq-hairline { max-width: 880px; margin: 0 auto; padding: 64px 56px 72px; } [data-section="faq"][data-variant="a"] .faq-hairline__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; text-align: center; } [data-section="faq"][data-variant="a"] .faq-hairline__headline { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.03em; color: var(--text); margin-bottom: 48px; text-align: center; } [data-section="faq"][data-variant="a"] .faq-hairline__item { padding: 28px 0; border-top: 1px solid var(--rule); } [data-section="faq"][data-variant="a"] .faq-hairline__item:last-of-type { border-bottom: 1px solid var(--rule); } [data-section="faq"][data-variant="a"] .faq-hairline__question { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--text); margin-bottom: 12px; line-height: 1.3; } [data-section="faq"][data-variant="a"] .faq-hairline__answer { font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 720px; } [data-section="faq"][data-variant="a"] .faq-hairline__more { display: inline-block; margin-top: 36px; font-size: 13px; letter-spacing: 0.08em; color: var(--accent-text); border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 0.15s; } [data-section="faq"][data-variant="a"] .faq-hairline__more:hover { border-color: var(--accent); } @media (max-width: 900px) { [data-section="faq"][data-variant="a"] .faq-hairline { padding-left: 24px; padding-right: 24px; } [data-section="faq"][data-variant="a"] .faq-hairline__headline { font-size: 28px; } [data-section="faq"][data-variant="a"] .faq-hairline__question { font-size: 18px; } } /* --- Variant B: faq-accordion-disclosure --- Native

accordion. One-to-one with the live darksidetattoo.com FAQ (GHL faq widget colors, extracted 2026-07-11): closed rows #2e2e2e with #d9d9d9 text, open row title #787879, open body #636363, white-shadowed heading, #636363 white-bordered bottom button. */ [data-section="faq"][data-variant="b"] .faq-accordion { max-width: 880px; margin: 0 auto; padding: 48px 56px 64px; } [data-section="faq"][data-variant="b"] .faq-accordion__eyebrow { font-family: var(--font-body, inherit); font-size: 16px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--muted, #d9d9d9); line-height: 2; margin-bottom: 4px; text-align: center; } [data-section="faq"][data-variant="b"] .faq-accordion__headline { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 28px; letter-spacing: -1px; line-height: 1.2; color: var(--text, #ffffff); text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.55); margin-bottom: 32px; text-align: center; } [data-section="faq"][data-variant="b"] .faq-accordion details { margin-bottom: 10px; border-radius: 5px; overflow: hidden; } [data-section="faq"][data-variant="b"] .faq-accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--font-body, inherit); font-size: 16px; font-weight: 600; color: #d9d9d9; background: #2e2e2e; letter-spacing: 0.02em; transition: background 0.15s; } [data-section="faq"][data-variant="b"] .faq-accordion summary::-webkit-details-marker { display: none; } [data-section="faq"][data-variant="b"] .faq-accordion summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; transform: rotate(45deg); transition: transform 0.2s ease; flex-shrink: 0; margin-left: 24px; } [data-section="faq"][data-variant="b"] .faq-accordion details[open] summary::after { transform: rotate(-135deg); } [data-section="faq"][data-variant="b"] .faq-accordion details[open] summary { background: #767677; } [data-section="faq"][data-variant="b"] .faq-accordion summary:hover { background: #3a3a3a; } [data-section="faq"][data-variant="b"] .faq-accordion details[open] summary:hover { background: #767677; } [data-section="faq"][data-variant="b"] .faq-accordion__body { padding: 16px 18px; font-size: 14px; color: #d9d9d9; background: #5f5f5f; line-height: 1.75; } [data-section="faq"][data-variant="b"] .faq-accordion__more { /* Live: #636363 fill, 1px solid white border, 18px/500 white, padding 16px 32px, centered. */ display: block; width: fit-content; margin: 36px auto 0; padding: 16px 32px; font-family: var(--font-body, inherit); font-size: 18px; font-weight: 500; letter-spacing: 0; color: #ffffff; background: #5f5f5f; border: 1px solid #ffffff; border-radius: 5px; text-decoration: none; transition: background 0.15s; } [data-section="faq"][data-variant="b"] .faq-accordion__more:hover { background: #767677; } @media (max-width: 900px) { [data-section="faq"][data-variant="b"] .faq-accordion { padding-left: 24px; padding-right: 24px; } [data-section="faq"][data-variant="b"] .faq-accordion__headline { font-size: 28px; } } /* --- Variant C: faq-two-column --- Question links left col, labeled answers right col, 1px vertical rule divider. Collapses to single column at 900px. */ [data-section="faq"][data-variant="c"] .faq-twocol { max-width: 1080px; margin: 0 auto; padding: 64px 56px 72px; } [data-section="faq"][data-variant="c"] .faq-twocol__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; text-align: center; } [data-section="faq"][data-variant="c"] .faq-twocol__headline { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.03em; color: var(--text); margin-bottom: 48px; text-align: center; } [data-section="faq"][data-variant="c"] .faq-twocol__grid { display: grid; grid-template-columns: 1fr 1px 1.6fr; gap: 0 48px; } [data-section="faq"][data-variant="c"] .faq-twocol__questions { display: flex; flex-direction: column; gap: 0; } [data-section="faq"][data-variant="c"] .faq-twocol__q-link { display: block; padding: 16px 0; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--text); line-height: 1.45; border-bottom: 1px solid var(--rule); transition: color 0.15s; } [data-section="faq"][data-variant="c"] .faq-twocol__q-link:hover { color: var(--accent-text); } [data-section="faq"][data-variant="c"] .faq-twocol__divider { background: var(--rule); width: 1px; } [data-section="faq"][data-variant="c"] .faq-twocol__answers { display: flex; flex-direction: column; gap: 0; } [data-section="faq"][data-variant="c"] .faq-twocol__a-item { padding: 16px 0; border-bottom: 1px solid var(--rule); } [data-section="faq"][data-variant="c"] .faq-twocol__a-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; color: var(--accent-text); margin-bottom: 8px; text-transform: uppercase; } [data-section="faq"][data-variant="c"] .faq-twocol__a-text { font-size: 14px; color: var(--muted); line-height: 1.75; } [data-section="faq"][data-variant="c"] .faq-twocol__more { display: inline-block; margin-top: 36px; font-size: 13px; letter-spacing: 0.08em; color: var(--accent-text); border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 0.15s; } [data-section="faq"][data-variant="c"] .faq-twocol__more:hover { border-color: var(--accent); } @media (max-width: 900px) { [data-section="faq"][data-variant="c"] .faq-twocol { padding-left: 24px; padding-right: 24px; } [data-section="faq"][data-variant="c"] .faq-twocol__headline { font-size: 28px; } [data-section="faq"][data-variant="c"] .faq-twocol__grid { grid-template-columns: 1fr; gap: 0; } [data-section="faq"][data-variant="c"] .faq-twocol__divider { display: none; } [data-section="faq"][data-variant="c"] .faq-twocol__questions { margin-bottom: 32px; border-bottom: 1px solid var(--rule); } } /* --- Variant D: faq-glow-accordion ---

accordion; open item gets left accent border + gold glow shadow. Summary indicator is CSS '+' rotating 45deg to form '×' when open. */ [data-section="faq"][data-variant="d"] .faq-glow { background: var(--section-bg); padding: 64px 56px; max-width: 820px; margin: 0 auto; } [data-section="faq"][data-variant="d"] .faq-glow__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="faq"][data-variant="d"] .faq-glow__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 32px; } [data-section="faq"][data-variant="d"] .faq-glow details { border-bottom: 1px solid var(--rule); padding: 16px 0; border-left: 3px solid transparent; transition: padding-left 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease; } [data-section="faq"][data-variant="d"] .faq-glow details[open] { border-left: 3px solid var(--accent); box-shadow: -4px 0 16px rgba(220, 185, 106, 0.15); padding-left: 20px; } [data-section="faq"][data-variant="d"] .faq-glow summary { list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; padding-right: 8px; } [data-section="faq"][data-variant="d"] .faq-glow summary::-webkit-details-marker { display: none; } [data-section="faq"][data-variant="d"] .faq-glow summary::after { content: '+'; color: var(--accent-text); font-size: 22px; font-weight: 300; transition: transform 0.3s ease; display: inline-block; } [data-section="faq"][data-variant="d"] .faq-glow details[open] summary::after { transform: rotate(45deg); } [data-section="faq"][data-variant="d"] .faq-glow__body { padding-top: 12px; font-size: 14px; line-height: 1.65; color: var(--muted); } [data-section="faq"][data-variant="d"] .faq-glow__more { display: inline-block; margin-top: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } @media (max-width: 480px) { [data-section="faq"][data-variant="d"] .faq-glow { padding: 48px 24px; } } /* --- Variant E: faq-stagger-reveal --- Stacked Q&A. Items animate in via opacity/translateY on .is-visible. SSR renders with .is-visible applied statically; stagger delays preserved for any future client-side IntersectionObserver enhancement. */ [data-section="faq"][data-variant="e"] .faq-stagger { background: var(--section-bg); padding: 64px 56px; max-width: 820px; margin: 0 auto; } [data-section="faq"][data-variant="e"] .faq-stagger__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="faq"][data-variant="e"] .faq-stagger__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 32px; } [data-section="faq"][data-variant="e"] .faq-stagger__item { padding: 20px 0; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item { opacity: 1; transform: none; } [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(3) { transition-delay: 0s; } [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(4) { transition-delay: 0.12s; } [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(5) { transition-delay: 0.24s; } [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(6) { transition-delay: 0.36s; } [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(7) { transition-delay: 0.48s; } [data-section="faq"][data-variant="e"] .faq-stagger__question { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin-bottom: 8px; } [data-section="faq"][data-variant="e"] .faq-stagger__answer { font-size: 14px; line-height: 1.65; color: var(--muted); } [data-section="faq"][data-variant="e"] .faq-stagger__more { display: inline-block; margin-top: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); } @media (max-width: 480px) { [data-section="faq"][data-variant="e"] .faq-stagger { padding: 48px 24px; } } /* ===================================================== Location variants A–E ===================================================== */ /* --- Variant A: location-two-column --- */ [data-section="location"][data-variant="a"] .loc-two-col { padding: 160px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } /* Nothing for the right column -> one column, no ~500px void beside the address. See components/themes/sections/Location/LocationA.tsx. */ [data-section="location"][data-variant="a"] .loc-two-col--single { grid-template-columns: 1fr; } [data-section="location"][data-variant="a"] .loc-two-col__eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; } [data-section="location"][data-variant="a"] .loc-two-col__headline { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: 0.03em; color: var(--text); margin-bottom: 48px; line-height: 1.15; } [data-section="location"][data-variant="a"] .loc-two-col__block { margin-bottom: 32px; } [data-section="location"][data-variant="a"] .loc-two-col__block:last-child { margin-bottom: 0; } [data-section="location"][data-variant="a"] .loc-two-col__block-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; font-weight: 500; } [data-section="location"][data-variant="a"] .loc-two-col__block p, [data-section="location"][data-variant="a"] .loc-two-col__block address { font-style: normal; font-size: 15px; color: var(--text); line-height: 1.7; opacity: 0.88; } [data-section="location"][data-variant="a"] .loc-two-col__block a { color: var(--text); opacity: 0.88; transition: color 0.15s, opacity 0.15s; } [data-section="location"][data-variant="a"] .loc-two-col__block a:hover { color: var(--accent-text); opacity: 1; } [data-section="location"][data-variant="a"] .loc-two-col__right-label { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 0.03em; color: var(--text); margin-bottom: 22px; } [data-section="location"][data-variant="a"] .loc-two-col__directions { font-size: 15px; color: var(--text); opacity: 0.82; line-height: 1.75; margin-bottom: 24px; } [data-section="location"][data-variant="a"] .loc-two-col__walkins { font-size: 14px; font-style: italic; color: var(--accent-text); line-height: 1.65; } @media (max-width: 900px) { [data-section="location"][data-variant="a"] .loc-two-col { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; } } @media (max-width: 480px) { [data-section="location"][data-variant="a"] .loc-two-col { padding: 64px 20px; gap: 36px; } [data-section="location"][data-variant="a"] .loc-two-col__headline { font-size: 28px; margin-bottom: 32px; } } /* --- Variant B: location-map-dominant --- */ [data-section="location"][data-variant="b"] .loc-map-dom__map { width: 100%; height: 320px; background: var(--bg-mid); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule); } [data-section="location"][data-variant="b"] .loc-map-dom__map-text { font-size: 14px; color: var(--muted); letter-spacing: 0.08em; } [data-section="location"][data-variant="b"] .loc-map-dom__strip { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; align-items: center; padding: 28px 56px; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="location"][data-variant="b"] .loc-map-dom__divider { width: 1px; height: 40px; background: var(--rule); justify-self: center; } [data-section="location"][data-variant="b"] .loc-map-dom__item { padding: 0 24px; } [data-section="location"][data-variant="b"] .loc-map-dom__item:first-child { padding-left: 0; } [data-section="location"][data-variant="b"] .loc-map-dom__item:last-child { padding-right: 0; } [data-section="location"][data-variant="b"] .loc-map-dom__item-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; font-weight: 500; } [data-section="location"][data-variant="b"] .loc-map-dom__item-value { font-size: 13px; color: var(--text); opacity: 0.88; line-height: 1.55; } [data-section="location"][data-variant="b"] .loc-map-dom__item-value a { color: var(--text); opacity: 0.88; transition: color 0.15s, opacity 0.15s; } [data-section="location"][data-variant="b"] .loc-map-dom__item-value a:hover { color: var(--accent-text); opacity: 1; } @media (max-width: 900px) { [data-section="location"][data-variant="b"] .loc-map-dom__strip { grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; } [data-section="location"][data-variant="b"] .loc-map-dom__divider { display: none; } [data-section="location"][data-variant="b"] .loc-map-dom__item { padding: 0; } } @media (max-width: 480px) { [data-section="location"][data-variant="b"] .loc-map-dom__map { height: 240px; } [data-section="location"][data-variant="b"] .loc-map-dom__strip { grid-template-columns: 1fr; gap: 20px; padding: 20px; } } /* --- Variant C: location-card-centered --- */ [data-section="location"][data-variant="c"] .loc-card { background: var(--bg-mid); padding: 100px 24px 0; display: flex; flex-direction: column; align-items: center; } [data-section="location"][data-variant="c"] .loc-card__card { max-width: 640px; width: 100%; background: var(--section-bg); border-top: 2px solid var(--accent); padding: 56px 48px; text-align: center; } [data-section="location"][data-variant="c"] .loc-card__headline { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: 0.06em; color: var(--text); margin-bottom: 32px; } [data-section="location"][data-variant="c"] .loc-card__row { margin-bottom: 24px; } [data-section="location"][data-variant="c"] .loc-card__row:last-child { margin-bottom: 0; } [data-section="location"][data-variant="c"] .loc-card__label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; font-weight: 500; } [data-section="location"][data-variant="c"] .loc-card__value { font-size: 15px; color: var(--text); opacity: 0.88; line-height: 1.65; } [data-section="location"][data-variant="c"] .loc-card__value a { color: var(--text); opacity: 0.88; transition: color 0.15s, opacity 0.15s; } [data-section="location"][data-variant="c"] .loc-card__value a:hover { color: var(--accent-text); opacity: 1; } [data-section="location"][data-variant="c"] .loc-card__rule { width: 48px; height: 1px; background: var(--rule); margin: 28px auto; } [data-section="location"][data-variant="c"] .loc-card__directions { font-size: 14px; color: var(--text); opacity: 0.72; line-height: 1.7; margin-bottom: 20px; } [data-section="location"][data-variant="c"] .loc-card__walkins { font-size: 13px; font-style: italic; color: var(--accent-text); line-height: 1.6; } [data-section="location"][data-variant="c"] .loc-card__map { width: 100%; height: 240px; background: var(--section-bg); display: flex; align-items: center; justify-content: center; margin-top: 56px; border-top: 1px solid var(--rule); } [data-section="location"][data-variant="c"] .loc-card__map-text { font-size: 14px; color: var(--muted); letter-spacing: 0.08em; } @media (max-width: 900px) { [data-section="location"][data-variant="c"] .loc-card { padding: 56px 16px 0; } [data-section="location"][data-variant="c"] .loc-card__card { padding: 40px 24px; } } @media (max-width: 480px) { [data-section="location"][data-variant="c"] .loc-card { padding: 64px 12px 0; } [data-section="location"][data-variant="c"] .loc-card__card { padding: 32px 20px; } [data-section="location"][data-variant="c"] .loc-card__headline { font-size: 22px; } } /* --- Variant D: location-map-glow --- */ @keyframes mapGlow { 0%, 100% { box-shadow: 0 0 0 rgba(220, 185, 106, 0); } 50% { box-shadow: 0 0 20px rgba(220, 185, 106, 0.3); } } [data-section="location"][data-variant="d"] .loc-glow { background: var(--section-bg); padding: 0; } [data-section="location"][data-variant="d"] .loc-glow__map { width: 100%; height: 360px; background: var(--bg-mid); display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); animation: mapGlow 3s ease-in-out infinite; } [data-section="location"][data-variant="d"] .loc-glow__map-text { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } [data-section="location"][data-variant="d"] .loc-glow__strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px 56px; gap: 24px; border-top: 1px solid var(--rule); } [data-section="location"][data-variant="d"] .loc-glow__item-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 6px; } [data-section="location"][data-variant="d"] .loc-glow__item-value { font-size: 14px; color: var(--text); line-height: 1.5; } [data-section="location"][data-variant="d"] .loc-glow__item-value a { color: var(--text); } @media (max-width: 768px) { [data-section="location"][data-variant="d"] .loc-glow__strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { [data-section="location"][data-variant="d"] .loc-glow__strip { grid-template-columns: 1fr; padding: 24px; } [data-section="location"][data-variant="d"] .loc-glow__map { height: 240px; animation: none; } } /* --- Variant E: location-slide-columns --- */ [data-section="location"][data-variant="e"] .loc-slide { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--section-bg); padding: 80px 56px; } [data-section="location"][data-variant="e"] .loc-slide__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 12px; } [data-section="location"][data-variant="e"] .loc-slide__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 24px; } [data-section="location"][data-variant="e"] .loc-slide__block { margin-bottom: 20px; } [data-section="location"][data-variant="e"] .loc-slide__block-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 6px; } [data-section="location"][data-variant="e"] .loc-slide__block address, [data-section="location"][data-variant="e"] .loc-slide__block p { font-style: normal; font-size: 14px; line-height: 1.6; } [data-section="location"][data-variant="e"] .loc-slide__right-label { font-family: var(--font-display); font-size: 18px; margin-bottom: 12px; } [data-section="location"][data-variant="e"] .loc-slide__directions { font-size: 14px; line-height: 1.65; color: var(--muted); margin-bottom: 14px; } [data-section="location"][data-variant="e"] .loc-slide__walkins { font-size: 14px; color: var(--accent-text); } @media (max-width: 768px) { [data-section="location"][data-variant="e"] .loc-slide { grid-template-columns: 1fr; } } @media (max-width: 480px) { [data-section="location"][data-variant="e"] .loc-slide { padding: 48px 24px; gap: 32px; } } /* ===================================================== Section: consult Variants A–C DELIBERATELY share the .consult-section chrome — they differ in FORM BEHAVIOUR (A caret-collapse, B long intake, C simple contact without qualifying questions), not section chrome, so one shared block is correct. Variants D–F have their own root classes. A per-variant CSS presence sweep must treat A–C as covered (2026-08-06 audit F-4/F-6). ===================================================== */ /* --- Shared base: consult-section (variants A, B, C) --- */ [data-section="consult"] .consult-section { padding: 160px 56px; display: flex; justify-content: center; background: var(--section-bg); max-width: 1200px; margin: 0 auto; } [data-section="consult"] .consult-section__inner { width: 100%; max-width: 720px; } [data-section="consult"] .consult-section__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; } [data-section="consult"] .consult-section__headline { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 42px; letter-spacing: 0.02em; color: var(--text); margin-bottom: 14px; line-height: 1.15; } [data-section="consult"] .consult-section__intro { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 48px; max-width: 54ch; } [data-section="consult"] .consult-section__warning { font-size: 14px; color: var(--text); opacity: 0.82; line-height: 1.65; margin-bottom: 40px; padding: 20px 24px; border-left: 2px solid var(--accent); background: rgba(220, 185, 106, 0.04); } /* --- Shared form field styles (variants A, B, C) --- */ [data-section="consult"] .form-field { margin-bottom: 32px; } [data-section="consult"] .form-field label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } [data-section="consult"] .form-field label .required { color: var(--accent-text); margin-left: 2px; } [data-section="consult"] .form-field input[type="text"], [data-section="consult"] .form-field input[type="email"], [data-section="consult"] .form-field input[type="tel"], [data-section="consult"] .form-field textarea, [data-section="consult"] .form-field select { display: block; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--rule); color: var(--text); font-family: var(--font-body); font-size: 15px; padding: 10px 0; outline: none; transition: border-color 0.2s; } [data-section="consult"] .form-field input:focus, [data-section="consult"] .form-field textarea:focus, [data-section="consult"] .form-field select:focus { border-bottom-color: var(--accent); } [data-section="consult"] .form-field input::placeholder, [data-section="consult"] .form-field textarea::placeholder { color: var(--muted); } [data-section="consult"] .form-field textarea { min-height: 100px; resize: vertical; } [data-section="consult"] .form-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a857a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 20px; cursor: pointer; } [data-section="consult"] .form-field select option { background: var(--bg-mid); color: var(--text); } /* --- Two-column row (variants A, B, C) --- */ [data-section="consult"] .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } /* --- Submit button (variants A, B, C) --- */ [data-section="consult"] .form-submit { display: inline-block; padding: 16px 36px; background: var(--accent); color: var(--accent-contrast, var(--bg)); font-size: 12px; font-weight: var(--btn-weight, 600); letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); border: none; cursor: pointer; transition: background 0.15s, opacity 0.15s; margin-top: 8px; } [data-section="consult"] .form-submit:hover { opacity: 0.88; } /* --- required span (all variants) --- */ [data-section="consult"] .required { color: var(--accent-text); } /* --- submit shell: inline success / error (all variants) --- */ [data-section="consult"] .consult-success { text-align: center; padding: 32px 20px; } [data-section="consult"] .consult-success__headline { font-family: var(--font-display); color: var(--accent-text); font-size: 1.5rem; margin: 0 0 8px; } [data-section="consult"] .consult-success__body { font-family: var(--font-body); color: var(--muted); margin: 0; } [data-section="consult"] .consult-error { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 6px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; } /* --- config-driven field extras (checkbox rows, hints, SLA, qualifying) --- */ [data-section="consult"] .form-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-family: var(--font-body); font-size: 0.9rem; color: var(--text); cursor: pointer; } [data-section="consult"] .form-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); } [data-section="consult"] .form-field__hint { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); } [data-section="consult"] .form-qualifying { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); } [data-section="consult"] .form-sla { margin: 12px 0 0; font-size: 0.8rem; color: color-mix(in srgb, var(--muted) 75%, var(--text)); font-family: var(--font-body); } [data-section="consult"] .form-fineprint { margin: 6px 0 0; font-size: 0.72rem; color: color-mix(in srgb, var(--muted) 75%, var(--text)); font-family: var(--font-body); line-height: 1.5; } /* ------------------------------------------------------- Variant A: caret-expand — style chips + details toggle ------------------------------------------------------- */ /* Style chips use a label since the chip s wrap each checkbox */ [data-section="consult"] .form-field__label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } [data-section="consult"] .style-chip-label { display: contents; } [data-section="consult"] .style-chip__input { position: absolute; opacity: 0; width: 0; height: 0; } [data-section="consult"] .style-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; } [data-section="consult"] .style-chip { padding: 8px 18px; border: 1px solid var(--rule); border-radius: 100px; font-size: 13px; color: var(--text); opacity: 0.78; cursor: pointer; transition: border-color 0.15s, color 0.15s, opacity 0.15s, background 0.15s; user-select: none; } [data-section="consult"] .style-chip:hover { border-color: var(--accent); color: var(--accent-text); opacity: 1; } [data-section="consult"] .style-chip__input:checked + .style-chip { border-color: var(--accent); background: rgba(220, 185, 106, 0.12); color: var(--accent-text); opacity: 1; } /* Keyboard focus ring — the chip input itself is visually hidden, so without this a keyboard user tabs through the chips blind. */ [data-section="consult"] .style-chip__input:focus-visible + .style-chip { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; } [data-section="consult"] .form-detail { margin-top: 16px; margin-bottom: 40px; } [data-section="consult"] .form-detail summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); user-select: none; } [data-section="consult"] .form-detail summary::-webkit-details-marker { display: none; } [data-section="consult"] .form-detail summary::marker { display: none; content: ""; } [data-section="consult"] .form-detail__caret { font-size: 14px; color: var(--accent-text); transition: transform 0.2s; display: inline-block; width: 14px; } [data-section="consult"] .form-detail[open] .form-detail__caret { transform: rotate(90deg); } [data-section="consult"] .form-detail__label { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; color: var(--text); } [data-section="consult"] .form-detail__hint { font-size: 12px; color: var(--muted); margin-left: auto; } [data-section="consult"] .form-detail__body { padding-top: 32px; } /* --- Reference-photo upload (all variants) --- */ [data-section="consult"] .consult-upload { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } [data-section="consult"] .consult-upload__thumb { position: relative; width: 84px; height: 84px; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; } [data-section="consult"] .consult-upload__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } [data-section="consult"] .consult-upload__remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; } [data-section="consult"] .consult-upload__add { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; border: 1px dashed var(--rule); border-radius: 6px; color: var(--muted); font-size: 12px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } [data-section="consult"] .consult-upload__add:hover { border-color: var(--accent); color: var(--accent-text); } [data-section="consult"] .consult-upload__add input[type="file"] { display: none; } [data-section="consult"] .consult-upload__error { margin-top: 8px; font-size: 12px; color: var(--accent-text); } /* --- Multi-step layout (Website Builder "Multi-step" option) --- */ [data-section="consult"] .tn-steps { display: flex; flex-direction: column; gap: 20px; } [data-section="consult"] .tn-steps__nav { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; } [data-section="consult"] .tn-steps__nav-item { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } [data-section="consult"] .tn-steps__nav-item--active, [data-section="consult"] .tn-steps__nav-item--done { opacity: 1; } [data-section="consult"] .tn-steps__nav-item--active { color: var(--text); } [data-section="consult"] .tn-steps__nav-item--done { color: var(--accent-text); } [data-section="consult"] .tn-steps__nav-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); font-size: 11px; font-weight: 700; } [data-section="consult"] .tn-steps__nav-item--active .tn-steps__nav-num { border-color: var(--accent); color: var(--accent-text); } [data-section="consult"] .tn-steps__nav-item--done .tn-steps__nav-num { border-color: var(--accent); background: rgba(220, 185, 106, 0.12); color: var(--accent-text); } [data-section="consult"] .tn-steps__panel[hidden] { display: none; } [data-section="consult"] .tn-steps__footer { display: flex; align-items: center; gap: 12px; } [data-section="consult"] .tn-steps__next { padding: 14px 32px; background: var(--accent); color: var(--accent-contrast, var(--bg)); font-size: 12px; font-weight: var(--btn-weight, 600); letter-spacing: var(--btn-tracking, 0.18em); text-transform: var(--btn-transform, uppercase); border-radius: var(--btn-radius, 0); border: none; cursor: pointer; transition: opacity 0.15s; } [data-section="consult"] .tn-steps__next:hover { opacity: 0.88; } [data-section="consult"] .tn-steps__back { padding: 14px 20px; background: transparent; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; border: 1px solid var(--rule); border-radius: var(--btn-radius, 0); cursor: pointer; transition: color 0.15s, border-color 0.15s; } [data-section="consult"] .tn-steps__back:hover { color: var(--text); border-color: var(--accent); } /* The VARIANT owns the Submit button (rendered after the stepper inside the shell form) — hide it until the visitor reaches the last panel. */ [data-section="consult"] .tn-steps[data-on-last="false"] ~ .form-submit { display: none; } /* ------------------------------------------------------- Variants A, B, C responsive ------------------------------------------------------- */ @media (max-width: 900px) { [data-section="consult"] .consult-section { padding: 96px 24px; } [data-section="consult"] .consult-section__headline { font-size: 32px; } [data-section="consult"] .form-row { grid-template-columns: 1fr; gap: 0; } [data-section="consult"] .style-chips { gap: 8px; } [data-section="consult"] .style-chip { padding: 7px 14px; font-size: 12px; } } /* ------------------------------------------------------- Variant D: glass-card ------------------------------------------------------- */ [data-section="consult"][data-variant="d"] .consult-glass { background: var(--section-bg); padding: 80px 56px; } [data-section="consult"][data-variant="d"] .consult-glass__inner { max-width: 720px; margin: 0 auto; } [data-section="consult"][data-variant="d"] .consult-glass__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; text-align: center; } [data-section="consult"][data-variant="d"] .consult-glass__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; text-align: center; margin-bottom: 12px; } [data-section="consult"][data-variant="d"] .consult-glass__intro { font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 28px; } [data-section="consult"][data-variant="d"] .consult-glass__card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 48px; } [data-section="consult"][data-variant="d"] .consult-glass__card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } [data-section="consult"][data-variant="d"] .consult-glass__card .form-field { margin-bottom: 16px; } /* :not(.form-check):not(.style-chip-label) — the blanket label rule used to flatten checkbox rows (.form-check is a flex row wrapping the box + its text) and up-case the 18+ legal copy at 11px. Same idea on the input rules below: a checkbox must not get width:100% text-input chrome, and .style-chip__input must stay collapsed (it is visually hidden; a full-width invisible box intercepts chip clicks). */ [data-section="consult"][data-variant="d"] .consult-glass__card label:not(.form-check):not(.style-chip-label) { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 6px; } [data-section="consult"][data-variant="d"] .consult-glass__card input:not([type="checkbox"]), [data-section="consult"][data-variant="d"] .consult-glass__card textarea, [data-section="consult"][data-variant="d"] .consult-glass__card select { width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; } [data-section="consult"][data-variant="d"] .consult-glass__card input:not([type="checkbox"]):focus, [data-section="consult"][data-variant="d"] .consult-glass__card textarea:focus, [data-section="consult"][data-variant="d"] .consult-glass__card select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220, 185, 106, 0.1); } [data-section="consult"][data-variant="d"] .consult-glass__card textarea { min-height: 100px; resize: vertical; } [data-section="consult"][data-variant="d"] .consult-glass__submit { width: 100%; padding: 14px 28px; background: var(--accent); color: var(--accent-contrast, var(--bg)); border: none; border-radius: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; transition: box-shadow 0.3s ease, transform 0.2s ease; } [data-section="consult"][data-variant="d"] .consult-glass__submit:hover { box-shadow: 0 0 24px rgba(220, 185, 106, 0.5); transform: translateY(-2px); } @media (max-width: 480px) { [data-section="consult"][data-variant="d"] .consult-glass { padding: 48px 16px; } [data-section="consult"][data-variant="d"] .consult-glass__card { padding: 28px 20px; border-radius: 12px; } [data-section="consult"][data-variant="d"] .consult-glass__card .form-row { grid-template-columns: 1fr; } } /* ------------------------------------------------------- Variant E: field-focus-glow (floating label) ------------------------------------------------------- */ [data-section="consult"][data-variant="e"] .consult-focus { background: var(--section-bg); padding: 80px 56px; } [data-section="consult"][data-variant="e"] .consult-focus__inner { max-width: 720px; margin: 0 auto; } [data-section="consult"][data-variant="e"] .consult-focus__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 8px; } [data-section="consult"][data-variant="e"] .consult-focus__headline { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 24px; } [data-section="consult"][data-variant="e"] .consult-focus__warning { background: color-mix(in srgb, var(--accent, #dcb96a) 6%, transparent); border-left: 3px solid var(--accent); padding: 12px 16px; font-size: 13px; color: var(--text); margin-bottom: 28px; } [data-section="consult"][data-variant="e"] .consult-focus .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 4px; } [data-section="consult"][data-variant="e"] .consult-focus .form-field { position: relative; margin-bottom: 24px; padding-top: 14px; } [data-section="consult"][data-variant="e"] .consult-focus .form-field label { position: absolute; top: 22px; left: 0; font-size: 14px; color: var(--muted); pointer-events: none; text-transform: none; letter-spacing: normal; font-weight: normal; margin-bottom: 0; transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease; } /* Raised state. Beyond :focus-within, the label must ALSO stay raised when the field shows content with no focus (operator screenshot 2026-07-21, labels overlapping "Select…" / typed text): - select + label — a