so it doesn't leak into the footer (which has its own dark theme via Tailwind's bg-gray-900 + text-white) — that was leaving light-palette dark text on dark footer and failing AA contrast. Footer keeps inherited Tailwind colours. */ body[data-v6="true"] main h1, body[data-v6="true"] main h2, body[data-v6="true"] main h3, body[data-v6="true"] main h4 { font-family: var(--font-display); color: var(--text-primary); line-height: 1.1; letter-spacing: -0.02em; font-weight: 650; } body[data-v6="true"] main h1 { font-size: var(--text-5xl); letter-spacing: -0.035em; } body[data-v6="true"] main h2 { font-size: var(--text-4xl); letter-spacing: -0.03em; } body[data-v6="true"] main h3 { font-size: var(--text-2xl); } body[data-v6="true"] main h4 { font-size: var(--text-xl); } body[data-v6="true"] main p { line-height: 1.65; color: var(--text-secondary); } } /* ============================================================ @layer personality — restrained "voice" variants applied via data-personality attr on . Replaces v5's heavy design styles. Each variant tunes typography weight/letterspacing/radius — no skew, no clip-path, no brutalist borders. The personality should be felt, not announced. ============================================================ */ @layer personality { /* refined: editorial, generous whitespace, thin display weights */ body[data-personality="refined"] { --font-display: 'Fraunces Variable', 'Playfair Display', Georgia, serif; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; } body[data-personality="refined"] h1, body[data-personality="refined"] h2 { font-weight: 350; letter-spacing: -0.04em; font-variation-settings: 'opsz' 144, 'SOFT' 50; } body[data-personality="refined"] section { padding: var(--space-24) 0; } /* bold: heavy display, tight leading, vivid surfaces */ body[data-personality="bold"] { --font-display: 'Manrope Variable', 'Archivo Variable', system-ui, sans-serif; } body[data-personality="bold"] h1, body[data-personality="bold"] h2, body[data-personality="bold"] h3 { font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; } /* friendly: rounded radii, slightly looser type, warm */ body[data-personality="friendly"] { --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; } body[data-personality="friendly"] h1, body[data-personality="friendly"] h2 { font-weight: 700; letter-spacing: -0.015em; } /* minimal: monochrome, low chroma, system font */ body[data-personality="minimal"] { --brand-c: 0.04; --font-display: 'Inter Variable', system-ui, sans-serif; --radius-md: 2px; --radius-lg: 4px; } body[data-personality="minimal"] h1, body[data-personality="minimal"] h2 { font-weight: 500; } /* default: balanced — applied when no data-personality is set */ body[data-v6="true"]:not([data-personality]) { /* Inherits :root defaults */ } } /* ============================================================ @layer variants — section-shape variants. v6 hard-codes intentional layout VARIETY into the defaults so the page never looks like a repeating grid. The variety is curated: services → bento (mixed-size auto-flow cards) products → spotlight (first product is the hero, rest tile) gallery → masonry (Pinterest-style variable heights) team → bento (asymmetric) about → split (text + features 50/50) testimonials → grid (intentional symmetry as a visual rest) No data-layout attribute needed — these apply by default in v6. We keep the data-layout opt-out so a future "Classic Grid" toggle can override section-by-section if you ever want it. ============================================================ */ @layer variants { /* ── ABOUT (split = default, kept as-is) ───────────────── */ body[data-v6="true"] #about:not([data-layout="bento"]):not([data-layout="stacked"]) .container > div:first-child { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; } @media (min-width: 768px) { body[data-v6="true"] #about:not([data-layout="bento"]):not([data-layout="stacked"]) .container > div:first-child { grid-template-columns: 1fr 1fr; } } /* ── SERVICES (bento = default) ────────────────────────── */ body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; } body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > * { grid-column: span 2; background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > *:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > *:nth-child(5n+1) { grid-column: span 4; } body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > *:nth-child(7n+3) { grid-column: span 3; } /* On narrow viewports drop to a single column for legibility. Override grid-template-columns to 1fr too — leaving the 6-col template in place allowed long unbreakable words ("Service") to widen the first implicit track and bleed the grid past the viewport. Also matches the specificity of the desktop nth-child rules above (which carry a :nth-child pseudo = +1 class) by adding !important; otherwise the desktop "span 4 / span 3" wins on equal selector chain. */ @media (max-width: 640px) { body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid { grid-template-columns: 1fr !important; } body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > *, body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > *:nth-child(5n+1), body[data-v6="true"] #services:not([data-layout="grid"]):not([data-layout="timeline"]) #services-grid > *:nth-child(7n+3) { grid-column: 1 / -1 !important; } } /* ── PRODUCTS (spotlight = default) ────────────────────── */ body[data-v6="true"] #yext-products-section:not([data-layout="grid"]):not([data-layout="masonry"]) #yext-products-container > div { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 768px) { body[data-v6="true"] #yext-products-section:not([data-layout="grid"]):not([data-layout="masonry"]) #yext-products-container > div { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: minmax(260px, auto); } body[data-v6="true"] #yext-products-section:not([data-layout="grid"]):not([data-layout="masonry"]) #yext-products-container > div > *:first-child { grid-row: span 2; } } /* ── GALLERY (masonry = default) ───────────────────────── */ body[data-v6="true"] #gallery #gallery-grid:not([data-layout="grid"]) { column-count: 1; column-gap: var(--space-4); } @media (min-width: 640px) { body[data-v6="true"] #gallery #gallery-grid:not([data-layout="grid"]) { column-count: 2; } } @media (min-width: 1024px) { body[data-v6="true"] #gallery #gallery-grid:not([data-layout="grid"]) { column-count: 3; } } body[data-v6="true"] #gallery #gallery-grid:not([data-layout="grid"]) > * { break-inside: avoid; margin-bottom: var(--space-4); display: inline-block; width: 100%; border-radius: var(--radius-lg); overflow: hidden; } /* TEAM grid is owned by the inline auto-fit rule that renderBios() and renderSkeletonBios() inject — see app.js. The earlier "asymmetric bento" 6-col override was forcing every card to grid-column: span 6 below 640px and otherwise fragmenting the row, which is why the v5 inline rule never won. Removed. */ } /* ============================================================ @layer hero — modern hero treatments. Each variant is opt-in via the existing .hero-layout-{name} class added by applyHeroLayout(). The classic centered/product/inset stay in legacy theme-runtime.js; the variants below add bolder modern shapes including the "stage" card-on-photo treatment. For variants that use the business photo as a full-bleed background (stage, frame), theme-runtime.js syncs #hero-image src into a CSS var --hero-bg-image on #home. Falls back to the brand gradient if no image is set yet. IMPORTANT: v5 base styles paint `.hero-pattern` with the theme gradient via `!important`. We override the gradient inline through CSS custom properties + reset background-image where needed. ============================================================ */ @layer variants { /* Reset hero-pattern gradient + the v5 padding for our variants so the layout below has full control of the section box. */ body[data-v6="true"] #home[class*="hero-layout-split-image-right"], body[data-v6="true"] #home[class*="hero-layout-stage"], body[data-v6="true"] #home[class*="hero-layout-editorial"], body[data-v6="true"] #home[class*="hero-layout-asymmetric"], body[data-v6="true"] #home[class*="hero-layout-frame"], body[data-v6="true"] #home[class*="hero-layout-overlay-grid"] { padding: 0 !important; } /* On mobile the fixed navbar (~80px tall) sits over the top of the hero. The Tailwind pt-24 (96px) on the hero leaves only ~16px clearance, which clips the logo's white-circle background under the nav shadow. Bump to --space-32 (128px) so the logo has ~48px breathing room. Includes #home (one ID) to beat line 410's `padding: 0 !important` (which carries an #home + class[] attribute, total 1,2,1 — without #home here, our 0,2,2 loses despite being later in source order). Also flips align-items to flex-start on centred layouts: on mobile the wrapper's content is taller than (90vh − nav clearance), so centring would pull the wrapper top back behind the nav. Frame keeps its flex-end (bottom-aligned card) so it's excluded. */ @media (max-width: 640px) { body[data-v6="true"] section#home[data-section="hero"] { padding-top: var(--space-32) !important; } body[data-v6="true"] section#home.hero-layout-stage, body[data-v6="true"] section#home.hero-layout-editorial, body[data-v6="true"] section#home.hero-layout-asymmetric, body[data-v6="true"] section#home.hero-layout-overlay-grid, body[data-v6="true"] section#home.hero-layout-split-image-right, body[data-v6="true"] section#home.hero-layout-split-panel { align-items: flex-start !important; } } /* split-image-right — text left, image right, ~55/45 split. LAYOUT only: do NOT override background or text colour. Each colour theme defines its own hero treatment (brand gradient + heroText) and split-image-right inherits it via .hero-pattern, exactly the way Centered/Product/Inset do. Earlier we forced --surface-page + --text-primary here, which fought every theme's gradient and made contrast a per-theme problem. */ body[data-v6="true"] .hero-layout-split-image-right { min-height: clamp(560px, 80vh, 800px); display: flex !important; align-items: center; } body[data-v6="true"] .hero-layout-split-image-right .container { width: 100%; max-width: var(--container-2xl); } body[data-v6="true"] .hero-layout-split-image-right .hero-content-wrapper { display: grid !important; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; padding-top: 0 !important; } @media (min-width: 768px) { body[data-v6="true"] .hero-layout-split-image-right .hero-content-wrapper { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-16); } } body[data-v6="true"] .hero-layout-split-image-right .hero-content-wrapper > div:first-child { text-align: left !important; } body[data-v6="true"] .hero-layout-split-image-right h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); line-height: 1.05; } body[data-v6="true"] .hero-layout-split-image-right .hero-content-wrapper > div:last-child { display: block !important; /* override .hidden md:block at small widths */ } /* Belt-and-braces: the IMG also ships with class="hidden" which would cancel display:block via specificity (.hidden = 0,1,0 vs this rule 0,3,1 — split should win, but quick-presets sometimes leave a stale inline style or a sibling layout override mid-flight). !important guarantees the image renders here regardless of prior state. */ body[data-v6="true"] .hero-layout-split-image-right #hero-image { border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 100%; height: auto; display: block !important; aspect-ratio: 4 / 3; object-fit: cover; } /* split-panel — "carded composition". Two panels float side-by-side inside a neutral section with generous breathing room. Left = soft brand-tinted rounded card holding dark text + brand button. Right = D-shaped image card (square left edge, fully-rounded right edge — looks like a capital D, opening towards the panel). Section background: PURE WHITE on light themes (cleaner than the slightly-brand-tinted --surface-page); --surface-page on dark themes so dark themes still get their dark background. */ body[data-v6="true"] .hero-layout-split-panel { background: #ffffff !important; background-image: none !important; /* Top padding is taller than bottom — the nav is fixed (~88px) so top clearance needs to clear that plus a comfortable buffer. */ padding: clamp(var(--space-20), 9vw, var(--space-24)) 0 clamp(var(--space-12), 6vw, var(--space-20)) 0 !important; } body[data-v6="true"][data-palette="dark"] .hero-layout-split-panel { background: var(--surface-page) !important; } body[data-v6="true"] .hero-layout-split-panel .container { width: 100%; /* Match the rest of the page's container width (Tailwind max-w-7xl = 1280px) so the image card doesn't bleed past the page grid. */ max-width: var(--container-xl); } body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper { display: grid !important; grid-template-columns: 1fr; gap: var(--space-6); align-items: stretch; padding-top: 0 !important; } @media (min-width: 768px) { body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } /* LEFT — soft tinted brand wash, rounded card, dark text. The mix is small so the wash reads as a tint, not a solid colour, which lets --text-primary stay readable without an inverse text colour. */ body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child { background: color-mix(in oklch, var(--brand) 12%, var(--surface-page)) !important; color: var(--text-primary); padding: clamp(var(--space-8), 4vw, var(--space-12)); border-radius: var(--radius-xl); display: flex; flex-direction: column; justify-content: center; text-align: left !important; /* Height matches the image card via grid align-items: stretch. No min-height here — it used to fight the image's aspect-ratio at small-desktop widths (cell width × 3/4 fell below the floor, stretching the IMG out of shape). */ } body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child > * { margin-left: 0 !important; margin-right: 0 !important; } /* Type scale is intentionally smaller than the bolder hero variants (centered, stage, frame). Split-panel reads as a "card hero" — text sits on a tinted panel beside an image, so it should feel like editorial body copy with a confident headline, not a billboard. !important needed to beat the `body[data-v6="true"] main h1` base rule and Tailwind's responsive .text-6xl utility on the h1 element. */ body[data-v6="true"] .hero-layout-split-panel h1 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) !important; line-height: 1.1; } body[data-v6="true"] .hero-layout-split-panel #hero-subtitle, body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child p { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.0625rem) !important; line-height: 1.55; } /* Keep each CTA button's text on one line; let the flex row wrap when the column is too narrow (small-desktop ~768-1100px) so each button sits cleanly instead of being squeezed into 2-line text. Buttons also get a smaller font + tighter padding to match the editorial scale. */ body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child a { white-space: nowrap; font-size: 0.875rem !important; padding: 0.625rem 1rem !important; } body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child .flex { flex-wrap: wrap; } /* On md (768) through just below lg (1024) the split-cell is ~360-470px wide — 3 row-laid buttons don't fit comfortably even when nowrap. Stack them column in that range to match the small-mobile pattern. */ @media (min-width: 768px) and (max-width: 1099px) { body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child .flex.sm\:flex-row { flex-direction: column !important; align-items: flex-start !important; } } /* RIGHT — D-SHAPED image card. Left edge has the same gentle radius as the text panel's corners (--radius-xl, ~24px); right edge fully-rounded (9999px collapses to half the cell's height) for the iconic capital-D silhouette. Aspect ratio: 1/1 (square) on mobile single-column layout so the image doesn't get unreasonably tall; 4/3 on desktop split. No min-height — aspect-ratio is the single source of truth for height so the IMG never gets stretched out of shape at small-desktop widths. */ body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:last-child { display: block !important; border-radius: var(--radius-xl) 9999px 9999px var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 1 / 1; } @media (min-width: 768px) { body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:last-child { aspect-ratio: 4 / 3; } } body[data-v6="true"] .hero-layout-split-panel #hero-image { width: 100% !important; height: 100% !important; object-fit: cover; display: block !important; border-radius: 0 !important; box-shadow: none !important; } /* Override the v6 brand-gradient hero rule (.hero-pattern { background: ... }) so the section itself stays on the section bg defined above (white on light themes, --surface-page on dark themes). */ body[data-v6="true"] #home.hero-layout-split-panel.hero-pattern { background: #ffffff !important; background-image: none !important; } body[data-v6="true"][data-palette="dark"] #home.hero-layout-split-panel.hero-pattern { background: var(--surface-page) !important; } /* stage — full-bleed photo background, centered card with text on top. Mirrors the modern "magazine cover" hero shown in the reference. */ body[data-v6="true"] .hero-layout-stage { min-height: clamp(640px, 90vh, 880px); display: flex !important; align-items: center; justify-content: center; position: relative; background-image: linear-gradient(180deg, color-mix(in oklch, black 30%, transparent) 0%, color-mix(in oklch, black 55%, transparent) 100%), var(--hero-bg-image, var(--hero-gradient)) !important; background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color: var(--text-primary); } body[data-v6="true"] .hero-layout-stage .container { width: 100%; display: flex; justify-content: center; } body[data-v6="true"] .hero-layout-stage .hero-content-wrapper { display: block !important; max-width: var(--container-md); padding: var(--space-12); background: color-mix(in oklch, var(--surface-card) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid color-mix(in oklch, white 30%, transparent); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); text-align: center !important; margin: 0 auto; padding-top: var(--space-12) !important; } body[data-v6="true"] .hero-layout-stage .hero-content-wrapper > div:first-child { text-align: center !important; } body[data-v6="true"] .hero-layout-stage .hero-content-wrapper > div:last-child { display: none; } body[data-v6="true"] .hero-layout-stage h1 { color: var(--text-primary); font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); } body[data-v6="true"] .hero-layout-stage p { color: var(--text-secondary); } body[data-v6="true"] .hero-layout-stage #hero-image { display: none !important; } body[data-v6="true"] .hero-layout-stage #hero-logo { margin-left: auto !important; margin-right: auto !important; } body[data-v6="true"] .hero-layout-stage .flex { justify-content: center !important; } /* editorial — oversized display type left, image right (40% column) */ body[data-v6="true"] .hero-layout-editorial { min-height: clamp(560px, 85vh, 820px); display: flex !important; align-items: center; background: var(--surface-page) !important; background-image: none !important; color: var(--text-primary); } body[data-v6="true"] .hero-layout-editorial .container { width: 100%; max-width: var(--container-2xl); } body[data-v6="true"] .hero-layout-editorial .hero-content-wrapper { display: grid !important; grid-template-columns: 1fr; gap: var(--space-8); align-items: end; padding-top: 0 !important; } @media (min-width: 768px) { body[data-v6="true"] .hero-layout-editorial .hero-content-wrapper { grid-template-columns: 2fr 1fr; } } body[data-v6="true"] .hero-layout-editorial .hero-content-wrapper > div:first-child { text-align: left !important; } body[data-v6="true"] .hero-layout-editorial h1 { font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; color: var(--text-primary); } body[data-v6="true"] .hero-layout-editorial p { color: var(--text-secondary); } body[data-v6="true"] .hero-layout-editorial .hero-content-wrapper > div:last-child { display: block !important; } body[data-v6="true"] .hero-layout-editorial #hero-image { border-radius: var(--radius-lg); max-width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow-lg); } /* asymmetric — wide copy column + offset image */ body[data-v6="true"] .hero-layout-asymmetric { min-height: clamp(560px, 80vh, 820px); display: flex !important; align-items: center; position: relative; overflow: hidden; background: var(--surface-page) !important; background-image: none !important; color: var(--text-primary); } body[data-v6="true"] .hero-layout-asymmetric .container { width: 100%; max-width: var(--container-2xl); } body[data-v6="true"] .hero-layout-asymmetric .hero-content-wrapper { display: grid !important; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; padding-top: 0 !important; } @media (min-width: 768px) { body[data-v6="true"] .hero-layout-asymmetric .hero-content-wrapper { grid-template-columns: 1.5fr 1fr; gap: var(--space-12); } } body[data-v6="true"] .hero-layout-asymmetric .hero-content-wrapper > div:first-child { text-align: left !important; } body[data-v6="true"] .hero-layout-asymmetric h1 { font-size: clamp(2.5rem, 2rem + 3vw, 5rem); line-height: 1; color: var(--text-primary); } body[data-v6="true"] .hero-layout-asymmetric p { color: var(--text-secondary); } body[data-v6="true"] .hero-layout-asymmetric .hero-content-wrapper > div:last-child { display: block !important; } /* See split-image-right note: !important on display ensures presets don't leave the image hidden via .hidden / sibling overrides. */ body[data-v6="true"] .hero-layout-asymmetric #hero-image { border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 100%; height: auto; display: block !important; aspect-ratio: 3 / 4; object-fit: cover; } /* frame — full-bleed image with copy in a bottom-left card. The hero image comes from the customer's GoldenPages listing — many are low-resolution. Sized to `cover` over a 900px-tall hero, those images pixelate badly. Move the photo onto a ::before pseudo so we can blur it: blur completely hides pixelation regardless of source resolution, and a dark overlay on top of that brings the image down to a moody texture that contrasts with the floating text card. */ body[data-v6="true"] .hero-layout-frame { min-height: clamp(640px, 90vh, 900px); position: relative; background: var(--hero-gradient); display: flex !important; align-items: flex-end; padding: var(--space-12) var(--space-12) var(--space-16) var(--space-12) !important; color: var(--text-primary); overflow: hidden; } body[data-v6="true"] .hero-layout-frame::before { content: ''; position: absolute; inset: -10px; background-image: var(--hero-bg-image, var(--hero-gradient)); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(10px) brightness(0.55); z-index: 0; } body[data-v6="true"] .hero-layout-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in oklch, black 55%, transparent) 0%, color-mix(in oklch, black 25%, transparent) 60%, color-mix(in oklch, black 10%, transparent) 100%); z-index: 0; pointer-events: none; } body[data-v6="true"] .hero-layout-frame > * { position: relative; z-index: 1; } body[data-v6="true"] .hero-layout-frame .container { width: 100%; max-width: var(--container-2xl); padding: 0 !important; } body[data-v6="true"] .hero-layout-frame .hero-content-wrapper { display: block !important; max-width: var(--container-md); background: var(--surface-card); padding: var(--space-8); /* Top corners rounded, bottom corners square — visually anchors the card to the bottom edge of the hero section as if it's resting on the photo. */ border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl); padding-top: var(--space-8) !important; } body[data-v6="true"] .hero-layout-frame .hero-content-wrapper > div:first-child { text-align: left !important; } body[data-v6="true"] .hero-layout-frame .hero-content-wrapper > div:last-child { display: none; } body[data-v6="true"] .hero-layout-frame h1 { color: var(--text-primary); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); } body[data-v6="true"] .hero-layout-frame p { color: var(--text-secondary); } body[data-v6="true"] .hero-layout-frame #hero-image { display: none !important; } /* ── Hero text colour PER LAYOUT ── Why this is per-layout instead of one .hero-pattern rule: the v5 layouts (centered/product/inset) paint the brand gradient as the hero bg, so text needs --hero-text-color (white usually). The v6 light-card layouts (split-image-right/editorial/asymmetric) paint the page surface, so text needs --text-primary. Overlay-grid paints a brand-color gradient so text needs --text-on-brand. Mixing them in one .hero-pattern rule + a separate variant rule kept the v5 rule winning on cascade because #hero-title in its selector list gave it ID specificity that the variant rule couldn't beat. Solution: scope each rule to the SPECIFIC hero layout class so only one set of selectors targets each element at any time. */ /* v5-style hero layouts (centered/product/inset): text on brand gradient */ body[data-v6="true"] .hero-layout-centered h1, body[data-v6="true"] .hero-layout-centered h2, body[data-v6="true"] .hero-layout-centered p, body[data-v6="true"] .hero-layout-centered #hero-subtitle, body[data-v6="true"] .hero-layout-centered #hero-title, body[data-v6="true"] .hero-layout-centered #rating-text, body[data-v6="true"] .hero-layout-centered .text-purple-100, body[data-v6="true"] .hero-layout-centered .text-white, body[data-v6="true"] .hero-layout-product h1, body[data-v6="true"] .hero-layout-product h2, body[data-v6="true"] .hero-layout-product p, body[data-v6="true"] .hero-layout-product #hero-subtitle, body[data-v6="true"] .hero-layout-product #hero-title, body[data-v6="true"] .hero-layout-product #rating-text, body[data-v6="true"] .hero-layout-product .text-purple-100, body[data-v6="true"] .hero-layout-product .text-white, body[data-v6="true"] .hero-layout-inset h1, body[data-v6="true"] .hero-layout-inset h2, body[data-v6="true"] .hero-layout-inset p, body[data-v6="true"] .hero-layout-inset #hero-subtitle, body[data-v6="true"] .hero-layout-inset #hero-title, body[data-v6="true"] .hero-layout-inset #rating-text, body[data-v6="true"] .hero-layout-inset .text-purple-100, body[data-v6="true"] .hero-layout-inset .text-white, body[data-v6="true"] .hero-layout-split-image-right h1, body[data-v6="true"] .hero-layout-split-image-right h2, body[data-v6="true"] .hero-layout-split-image-right p, body[data-v6="true"] .hero-layout-split-image-right #hero-subtitle, body[data-v6="true"] .hero-layout-split-image-right #hero-title, body[data-v6="true"] .hero-layout-split-image-right #rating-text, body[data-v6="true"] .hero-layout-split-image-right .text-purple-100, body[data-v6="true"] .hero-layout-split-image-right .text-white { color: var(--hero-text-color, #ffffff) !important; } /* split-panel: text sits on a SOFT TINTED panel (~12% brand on white), so it reads as page text — use --text-primary (dark) for headings and --text-secondary for sub-copy. Same treatment as the v6 light-card layouts (stage/editorial/etc.) below. */ body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child h1, body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child h2, body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child #hero-title { color: var(--text-primary) !important; } body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child p, body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child #hero-subtitle, body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child #rating-text { color: var(--text-secondary) !important; } /* CTAs on the tinted panel: solid brand pill (--brand-700 for AA contrast on white text even with light primaries — same approach as the other light-card hero variants). Phone CTA stays as an outlined brand pill. */ body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child a.bg-white, body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child a[href="#contact"], body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child a[href="#action"] { background: var(--brand-700) !important; color: #ffffff !important; } body[data-v6="true"] .hero-layout-split-panel .hero-content-wrapper > div:first-child #hero-phone { background: transparent !important; color: var(--brand) !important; border: 2px solid var(--brand) !important; } /* v6 light-card hero layouts: text on page surface, dark for AA. (split-image-right was here historically; moved up to the v5-style group above so it inherits the theme's brand-gradient hero look instead of forcing --surface-page on every theme.) */ body[data-v6="true"] .hero-layout-stage h1, body[data-v6="true"] .hero-layout-stage h2, body[data-v6="true"] .hero-layout-stage #hero-subtitle, body[data-v6="true"] .hero-layout-stage #hero-title, body[data-v6="true"] .hero-layout-stage #rating-text, body[data-v6="true"] .hero-layout-stage .text-purple-100, body[data-v6="true"] .hero-layout-stage .text-white, body[data-v6="true"] .hero-layout-editorial h1, body[data-v6="true"] .hero-layout-editorial h2, body[data-v6="true"] .hero-layout-editorial #hero-subtitle, body[data-v6="true"] .hero-layout-editorial #hero-title, body[data-v6="true"] .hero-layout-editorial #rating-text, body[data-v6="true"] .hero-layout-editorial .text-purple-100, body[data-v6="true"] .hero-layout-editorial .text-white, body[data-v6="true"] .hero-layout-asymmetric h1, body[data-v6="true"] .hero-layout-asymmetric h2, body[data-v6="true"] .hero-layout-asymmetric #hero-subtitle, body[data-v6="true"] .hero-layout-asymmetric #hero-title, body[data-v6="true"] .hero-layout-asymmetric #rating-text, body[data-v6="true"] .hero-layout-asymmetric .text-purple-100, body[data-v6="true"] .hero-layout-asymmetric .text-white, body[data-v6="true"] .hero-layout-frame h1, body[data-v6="true"] .hero-layout-frame h2, body[data-v6="true"] .hero-layout-frame #hero-subtitle, body[data-v6="true"] .hero-layout-frame #hero-title, body[data-v6="true"] .hero-layout-frame #rating-text, body[data-v6="true"] .hero-layout-frame .text-purple-100, body[data-v6="true"] .hero-layout-frame .text-white { color: var(--text-primary) !important; } /* Body paragraph text in light-card variants is the secondary muted text. split-image-right intentionally excluded — it now uses the brand- gradient hero treatment (see v5-style block above). */ body[data-v6="true"] .hero-layout-stage p:not(#hero-subtitle), body[data-v6="true"] .hero-layout-editorial p:not(#hero-subtitle), body[data-v6="true"] .hero-layout-asymmetric p:not(#hero-subtitle), body[data-v6="true"] .hero-layout-frame p:not(#hero-subtitle) { color: var(--text-secondary) !important; } /* Sub-headline gets a slightly muted treatment too */ body[data-v6="true"] .hero-layout-stage #hero-subtitle, body[data-v6="true"] .hero-layout-editorial #hero-subtitle, body[data-v6="true"] .hero-layout-asymmetric #hero-subtitle, body[data-v6="true"] .hero-layout-frame #hero-subtitle { color: var(--text-secondary) !important; } /* v6 overlay-grid: text on brand gradient (always light needed). Force #ffffff directly — do NOT route through --text-on-brand here. --text-on-brand is computed for contrast against --brand, but overlay-grid paints brand-700 → brand-900 (much darker), and for some themes (cobalt-blue family) text-on-brand resolves to a dark theme-text colour that ends up dark-on-dark on this layout. */ body[data-v6="true"] .hero-layout-overlay-grid h1, body[data-v6="true"] .hero-layout-overlay-grid h2, body[data-v6="true"] .hero-layout-overlay-grid p, body[data-v6="true"] .hero-layout-overlay-grid #hero-subtitle, body[data-v6="true"] .hero-layout-overlay-grid #hero-title, body[data-v6="true"] .hero-layout-overlay-grid #rating-text, body[data-v6="true"] .hero-layout-overlay-grid .text-purple-100, body[data-v6="true"] .hero-layout-overlay-grid .text-white { color: #ffffff !important; } /* ── Hero CTA hardening ───────────────────────────────── Hero text colours are handled by the per-layout rules above. What's left is the call-to-action buttons that live in the hero (Book/Quote/Call). Tailwind ships them as bg-white + text-purple-600 + text-white, which doesn't translate well to light-card variants (white pill on white card) or to themes with light primaries (white text on light brand). */ /* CTAs in light-card variants: brand-coloured pills. Use --brand-700 (the OKLCH-derived darker brand variant) for the bg instead of --brand, so white text always passes AA — even for light-primary themes like Saffron / Honey / Sand where #ffffff on --brand only hits ~3.4:1. Same fix that solved the nav-phone / hero-phone "contrast valley" problem. */ /* CTAs in light-card variants get the brand-700 pill (white text passes AA on the darker brand variant even for light primaries like Saffron). split-image-right is NOT in this group — it uses the brand-gradient hero treatment, which means the existing per-theme CTA rules already give it the right pill style. */ body[data-v6="true"] .hero-layout-stage a.bg-white, body[data-v6="true"] .hero-layout-stage a[href="#contact"], body[data-v6="true"] .hero-layout-stage a[href="#action"], body[data-v6="true"] .hero-layout-editorial a.bg-white, body[data-v6="true"] .hero-layout-editorial a[href="#contact"], body[data-v6="true"] .hero-layout-editorial a[href="#action"], body[data-v6="true"] .hero-layout-asymmetric a.bg-white, body[data-v6="true"] .hero-layout-asymmetric a[href="#contact"], body[data-v6="true"] .hero-layout-asymmetric a[href="#action"], body[data-v6="true"] .hero-layout-frame a.bg-white, body[data-v6="true"] .hero-layout-frame a[href="#contact"], body[data-v6="true"] .hero-layout-frame a[href="#action"] { background: var(--brand-700) !important; color: #ffffff !important; } /* Tel button: outline brand pill on light-card variants */ body[data-v6="true"] .hero-layout-stage #hero-phone, body[data-v6="true"] .hero-layout-editorial #hero-phone, body[data-v6="true"] .hero-layout-asymmetric #hero-phone, body[data-v6="true"] .hero-layout-frame #hero-phone { background: transparent !important; color: var(--brand) !important; border: 2px solid var(--brand) !important; } body[data-v6="true"] .hero-layout-stage #rating-text, body[data-v6="true"] .hero-layout-editorial #rating-text, body[data-v6="true"] .hero-layout-asymmetric #rating-text, body[data-v6="true"] .hero-layout-frame #rating-text { color: var(--text-primary) !important; } /* Hero CTA text alignment. Several layouts (split-image-right / asymmetric / editorial / split-panel) set text-align:left on their content wrapper so headings/subtitle sit hard left, but that bleeds into the CTA buttons too — the row uses `flex flex-col sm:flex-row` so on mobile each is a full-width block and its inner text inherits the left alignment, giving the mismatched look the user flagged (Book/Get a Quote left, Call Us arbitrarily centred by the icon spacer). Force CTA text centred everywhere by default — looks balanced on desktop where buttons sit at content width too. Brutalist + antidesign opt out on mobile only; their off-kilter typography stays. */ body[data-v6="true"] section[data-section="hero"] a[href="#contact"], body[data-v6="true"] section[data-section="hero"] a[href="#action"], body[data-v6="true"] section[data-section="hero"] a.cc_loylopen, body[data-v6="true"] section[data-section="hero"] #hero-phone { text-align: center !important; } @media (max-width: 640px) { body.style-brutalist[data-v6="true"] section[data-section="hero"] a[href="#contact"], body.style-brutalist[data-v6="true"] section[data-section="hero"] a[href="#action"], body.style-brutalist[data-v6="true"] section[data-section="hero"] a.cc_loylopen, body.style-brutalist[data-v6="true"] section[data-section="hero"] #hero-phone, body.style-antidesign[data-v6="true"] section[data-section="hero"] a[href="#contact"], body.style-antidesign[data-v6="true"] section[data-section="hero"] a[href="#action"], body.style-antidesign[data-v6="true"] section[data-section="hero"] a.cc_loylopen, body.style-antidesign[data-v6="true"] section[data-section="hero"] #hero-phone { text-align: inherit !important; } } /* overlay-grid — DARK brand gradient + grid backdrop, copy floats above. Use brand-700 → brand-900 for the gradient so it's consistently dark across the whole surface. That way white text passes AA everywhere on the gradient regardless of the theme's primary lightness. */ body[data-v6="true"] .hero-layout-overlay-grid { min-height: clamp(640px, 90vh, 900px); position: relative; display: flex !important; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%) !important; overflow: hidden; color: #ffffff; } body[data-v6="true"] .hero-layout-overlay-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in oklch, white 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, white 10%, transparent) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.7; pointer-events: none; } body[data-v6="true"] .hero-layout-overlay-grid #hero-image { display: none !important; } body[data-v6="true"] .hero-layout-overlay-grid .container { width: 100%; } body[data-v6="true"] .hero-layout-overlay-grid .hero-content-wrapper { display: block !important; max-width: var(--container-md); position: relative; z-index: 1; padding: var(--space-8); margin: 0 auto; } body[data-v6="true"] .hero-layout-overlay-grid .hero-content-wrapper > div:first-child { text-align: center !important; } body[data-v6="true"] .hero-layout-overlay-grid .hero-content-wrapper > div:last-child { display: none; } body[data-v6="true"] .hero-layout-overlay-grid h1 { font-size: clamp(2.5rem, 2rem + 4vw, 5rem); line-height: 1; } body[data-v6="true"] .hero-layout-overlay-grid .flex { justify-content: center !important; } body[data-v6="true"] .hero-layout-overlay-grid #hero-logo { margin-left: auto !important; margin-right: auto !important; } } /* ============================================================ @layer motion — scroll-driven entrance animations using modern CSS animation-timeline. Falls back gracefully on older browsers. Apply via [data-reveal] attribute on any element. ============================================================ */ @layer motion { @supports (animation-timeline: view()) { body[data-v6="true"] [data-reveal] { animation: v6-reveal-up linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; } body[data-v6="true"] [data-reveal="fade"] { animation-name: v6-reveal-fade; } body[data-v6="true"] [data-reveal="scale"] { animation-name: v6-reveal-scale; } } @keyframes v6-reveal-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes v6-reveal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes v6-reveal-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* Subtle hover lift for cards */ body[data-v6="true"] .v6-card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } body[data-v6="true"] .v6-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* Smooth focus rings derived from brand */ body[data-v6="true"] :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm); } } /* ============================================================ @layer components — quiet upgrades that compound. These selectors aim at existing markup so app.js + index.html don't need rewriting; the upgrades just appear in v6 mode. ============================================================ */ @layer components { /* ── Buttons ───────────────────────────────────────────── Primary CTAs are the existing .bg-purple-600/-700 (which the legacy theme-variables.css remaps to var(--theme-primary), itself bridged to var(--brand-600)). We layer a gradient + inset border + hover lift on top — all derived from --brand so it tunes per business. The :not() chain excludes: • demo-panel chrome • tab controls (menu/bio/product/google-reviews carousel buttons) • text-link-style buttons (anything with .text-purple-* class) — these are inline links visually, not solid pill CTAs. Without this exclusion they'd get a brand gradient background WHILE their text was already remapped to the brand colour, producing brand-on-brand and zero contrast. The "Read More" expander (#about-read-more-btn) is the canonical case. • #about-read-more-btn pinned by id as a belt-and-braces guard. */ body[data-v6="true"] section button:not(.demo-panel button):not(.menu-tab):not(.bio-tab):not(.product-tab):not(#google-reviews button):not(#google-reviews-prev):not(#google-reviews-next):not(.google-review-readmore):not([class*="text-purple-"]):not(#about-read-more-btn):not(.faq-question), body[data-v6="true"] section a.bg-purple-600, body[data-v6="true"] section a[href="#contact"], body[data-v6="true"] section a[href="#action"] { background-image: linear-gradient(180deg, color-mix(in oklch, var(--brand) 100%, white 8%), var(--brand-600)) !important; border: 1px solid color-mix(in oklch, white 18%, transparent) !important; box-shadow: 0 1px 0 color-mix(in oklch, white 20%, transparent) inset, 0 1px 2px color-mix(in oklch, var(--brand) 25%, transparent), 0 4px 10px color-mix(in oklch, var(--brand) 18%, transparent) !important; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-image var(--duration-base) var(--ease-out) !important; } body[data-v6="true"] section button:not(.demo-panel button):not(.menu-tab):not(.bio-tab):not(.product-tab):not(#google-reviews button):not(#google-reviews-prev):not(#google-reviews-next):not(.google-review-readmore):not([class*="text-purple-"]):not(#about-read-more-btn):not(.faq-question):hover, body[data-v6="true"] section a.bg-purple-600:hover, body[data-v6="true"] section a[href="#contact"]:hover, body[data-v6="true"] section a[href="#action"]:hover { transform: translateY(-1px); box-shadow: 0 1px 0 color-mix(in oklch, white 25%, transparent) inset, 0 4px 8px color-mix(in oklch, var(--brand) 30%, transparent), 0 12px 24px color-mix(in oklch, var(--brand) 22%, transparent) !important; background-image: linear-gradient(180deg, color-mix(in oklch, var(--brand) 100%, white 14%), color-mix(in oklch, var(--brand-600) 100%, black 6%)) !important; } body[data-v6="true"] section button:active { transform: translateY(0); transition-duration: 80ms; } /* ── Form inputs ───────────────────────────────────────── Brand-tinted focus ring; underline animation on focus instead of a full hard outline jump. */ body[data-v6="true"] section input[type="text"], body[data-v6="true"] section input[type="email"], body[data-v6="true"] section input[type="tel"], body[data-v6="true"] section input[type="number"], body[data-v6="true"] section input[type="search"], body[data-v6="true"] section input[type="url"], body[data-v6="true"] section textarea, body[data-v6="true"] section select { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } body[data-v6="true"] section input:focus, body[data-v6="true"] section textarea:focus, body[data-v6="true"] section select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 25%, transparent), 0 1px 3px color-mix(in oklch, var(--brand) 15%, transparent); } body[data-v6="true"] section input::placeholder, body[data-v6="true"] section textarea::placeholder { color: var(--text-muted); } /* ── FAQ accordion ─────────────────────────────────────── The FAQ items are

wrappers containing a