elements. Note: the rgba() literals below are spelled-out alpha versions of --color-brand (#2233FF) and --color-brand-2 (#5C82FF). CSS var() can't be alpha-mixed without color-mix(), which is still patchy in older Safari (mid-2026). The underlying RGB matches the tokens exactly. Documented exception to the no-hardcoded- colors rule. ============================================================ */ section { position: relative; } /* ============================================================ SECTION CHAIN (light + dark) Each section's bottom color = next section's top color, so the homepage reads as one continuous wash broken into chapters. Uses --surface-tint-1..5 which are theme-aware in tokens.css: light = periwinkle scale (white -> deep periwinkle), dark = navy scale (lifted navy -> near-black). The legacy .sec-panel / .sec-alt rules below are dead on the homepage (chain overrides them) but kept for any future page that wants the old panel-and-glow look outside .home. ============================================================ */ .home > section { border-top: 0; border-bottom: 0; } .home > section.sec-panel, .home > section.sec-alt, .home > section.sec-tint-2 { background: none; } /* The chain undulates: each section spans from a "trough" (near-white) to a "peak" (deeper periwinkle) or vice versa, so scrolling reads as a wave - blue, then lighter, then blue again. Consecutive endpoints match. */ /* 1. hero tint-1 -> tint-3 (white -> mid, opening ramp) */ .home > section:nth-of-type(1) { background: linear-gradient(180deg, var(--surface-tint-1) 0%, var(--surface-tint-3) 100%); } /* 2. logos strip tint-3 -> tint-2 (eases back toward light - first dip) */ .home > section:nth-of-type(2) { background: linear-gradient(180deg, var(--surface-tint-3) 0%, var(--surface-tint-2) 100%); } /* 3. features tint-2 -> tint-4 (light -> deep, first peak) */ .home > section:nth-of-type(3) { background: linear-gradient(180deg, var(--surface-tint-2) 0%, var(--surface-tint-4) 100%); } /* 4. attribution tint-4 -> tint-2 (deep -> light, dip) */ .home > section:nth-of-type(4) { background: linear-gradient(180deg, var(--surface-tint-4) 0%, var(--surface-tint-2) 100%); } /* 5. journey tint-2 -> tint-4 (light -> deep, peak) */ .home > section:nth-of-type(5) { background: linear-gradient(180deg, var(--surface-tint-2) 0%, var(--surface-tint-4) 100%); } /* 6. value tint-4 -> tint-2 (deep -> light, dip) */ .home > section:nth-of-type(6) { background: linear-gradient(180deg, var(--surface-tint-4) 0%, var(--surface-tint-2) 100%); } /* 7. pricing tint-2 -> tint-4 (light -> deep, peak) */ .home > section:nth-of-type(7) { background: linear-gradient(180deg, var(--surface-tint-2) 0%, var(--surface-tint-4) 100%); } /* 8. final cta tint-4 -> tint-1 (deep -> white, closing fade) */ .home > section:nth-of-type(8) { background: linear-gradient(180deg, var(--surface-tint-4) 0%, var(--surface-tint-1) 100%); } /* Dark-theme keeps the original panel system below. */ .sec-panel { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .sec-alt { background: radial-gradient(900px 420px at 90% 0%, rgba(34, 51, 255, 0.05), transparent 60%); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .sec-alt { background: radial-gradient(900px 420px at 90% 0%, rgba(34, 51, 255, 0.12), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%); } /* Brand-2-tinted glow from top-left. Different hue + position for visual rhythm. */ .sec-tint-2 { background: radial-gradient(800px 380px at 10% 0%, rgba(92, 130, 255, 0.06), transparent 60%); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .sec-tint-2 { background: radial-gradient(800px 380px at 10% 0%, rgba(92, 130, 255, 0.14), transparent 60%); } /* NOTE: the "keep cards white in dark mode" rule lives in components.css (shared, site-wide) so it also covers off-homepage cards like the contact form. Add new white-card selectors there, not here. */ /* Optional thin gradient divider helper (not used by default - reserved for future) */ .sec-divider { height: 1px; max-width: var(--container-wide); margin: 0 auto; background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent); } /* --- MOBILE: SECTION SPACING, TYPOGRAPHY & OVERFLOW ------- Placed at end-of-file so these win on source order over the base rules above (media queries add no specificity). */ @media (max-width: 768px) { /* Section spacing: desktop gives every section 96px top/bottom (.home section), stacking ~190px of dead space between sections on a phone. Tighten so the band between sections lands at ~20px. */ .home section { padding: 20px 0; } /* Section title/subtitle block sits 48px above its content on desktop - far too airy on a phone. Pull it in across every section. */ .home .section-head { margin-bottom: 20px; } /* Trusted-by label sits closer to the logo row. */ .home .logos p { margin-bottom: 14px; } /* Uniform body-copy size everywhere - match the hero lede (17px). Section subtitles were 19px, creating the inconsistency. */ .home .lede, .home .section-head p, .home .leak-pixblock p { font-size: 17px; line-height: var(--line-height-relaxed); } /* Smaller client cards so ~3 fit across a phone. */ .logo-chip { width: 104px; height: 60px; margin-right: 12px; padding: 9px 12px; } } /* Page-level backstop: never allow horizontal scrolling on phones. `clip` (not `hidden`) avoids creating a scroll container, so the sticky nav still works. The fixes above make content actually fit; this just guards stragglers. */ @media (max-width: 768px) { html, body { overflow-x: clip; max-width: 100%; } } /* ============================================================ EVERYTHING YOU CAN MEASURE - feature grid (#features) Ported from mockup feature-grid-section.html. All mock classes scoped with fg- prefix to avoid collisions with the homepage's pre-existing .ic / .pill / .head / .sub / .grid rules. Hover-lift only - no loop animations. ============================================================ */ .fg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fg-fcard { background: var(--surface-tint-1); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 18px; box-shadow: 0 18px 40px -30px rgba(20, 30, 90, .4); transition: transform .2s, box-shadow .2s; } .fg-fcard:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(34, 51, 255, .4); } @media (prefers-reduced-motion: reduce) { .fg-fcard { transition: none; } .fg-fcard:hover { transform: none; } } .fg-mini { height: 92px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--surface-tint-2); margin-bottom: 14px; padding: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .fg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; } .fg-ic { width: 30px; height: 30px; border-radius: var(--radius-md); background: rgba(34, 51, 255, .1); color: var(--color-brand); display: flex; align-items: center; justify-content: center; flex: none; } .fg-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .fg-fcard h3 { font-size: 19.5px; margin: 0; font-weight: 700; } .fg-desc { font-size: 16px; color: var(--color-text-subtle); margin: 0; line-height: 1.5; } /* micro visuals */ /* Funnel mini: 2-col grid so each bar and its count share one row, aligned. Replaces the old block + negative-margin hack that drifted out of line and let the flex column collapse the bars. */ .fg-fnl { display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: center; gap: 9px 12px; } .fg-fbar { height: 11px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); } .fg-fnl span { font-size: 10px; color: var(--color-text-subtle); text-align: right; } .fg-prow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; color: var(--color-text-muted); } .fg-prow .fg-pb { height: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); } .fg-prow b { margin-left: auto; color: var(--color-text); } .fg-pill { display: inline-block; font-size: 9.5px; background: var(--surface-tint-3); border-radius: var(--radius-full); padding: 3px 8px; margin: 0 4px 4px 0; color: var(--color-text-muted); font-weight: 600; } .fg-pill b { color: var(--color-text); } /* custom-events mockup: a tidy event list (dot + name + right-aligned count), matching the Products rows / Platform-health dots instead of scattered chips */ .fg-evts { gap: 0; justify-content: center; } .fg-erow { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--color-text-muted); padding: 2px 1px; } .fg-erow:not(:last-child) { border-bottom: 1px solid var(--color-border); } .fg-erow i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .fg-erow b { margin-left: auto; color: var(--color-text); font-size: 12.5px; } .fg-dots { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .fg-pdot { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--color-text-muted); } .fg-pdot i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .fg-session { display: flex; align-items: center; gap: 5px; } .fg-sdot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand-2); } .fg-sline { flex: 1; height: 2px; background: var(--color-border); } .fg-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; } @media (max-width: 820px) { .fg-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .fg-grid { grid-template-columns: 1fr; } .fg-desc { font-size: 17px; } } /* Hero dashboard polish (2026-05-31): 1. Overlay column headers were dark-on-navy (invisible) - force white. The cell color is set by `.stage .trow .c` (#1b2550); this equal-specificity rule wins by source order for the header row only. 2. Make the dashboard a touch larger / more substantial (920 -> 1060px, slightly taller rows). 360px is unaffected (the mobile @media below caps .stage width and these only enlarge it). */ .stage { max-width: 1060px; --rowh: 46px; --headh: 50px; } .stage .trow.head .c { color: #fff; } /* ROAS + Profit columns: green when the campaign is profitable, red at break-even/loss. Both cells carry the per-row `.c.pos` / `.c.neg` flag (set by home.js); these (0,4,0) beat `.stage .trow .c` (0,3,0) which would otherwise force the light default on every cell. Brightened literals so the green/red read clearly on the navy overlay panel. ROAS is weight-only here so its own row's pos/neg color shows through (the cell is `.c.roas.pos`). */ .stage .trow .c.pos { color: #34D399; font-weight: var(--font-weight-bold); } .stage .trow .c.neg { color: #FB7185; font-weight: var(--font-weight-bold); } .stage .trow .c.roas { font-weight: var(--font-weight-extra); } /* Per-platform favicon in the browser chrome bar (toggled by home.js). */ .stage .chrome .fav { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .stage .chrome .fav svg { width: 20px; height: 20px; display: block; } .stage .chrome .fav.off { display: none; } @media (max-width: 700px) { .stage { max-width: 100%; } }