.v1a { --v1a-navy: #0A0F1C; --v1a-navy-mid: #111827; --v1a-navy-light: #1a2744; --v1a-blue: #1773EE; --v1a-blue-dark: #0E5BC7; --v1a-blue-light: #EBF3FD; --v1a-gold: #EAB308; --v1a-white: #FFFFFF; --v1a-bg: #F9F7F4; --v1a-card: #FFFFFF; --v1a-text: #111827; --v1a-text-muted: #6B7280; --v1a-border: #E5E7EB; --v1a-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --v1a-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; } /* H-3 A1: V1's global reset is *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } (styles.css L100). Every V1 padding-based size assumes border-box. We scope the same rule to the theme root so it doesn't leak into other themes. We do NOT reset margin/padding — those would break Next.js + Tailwind defaults elsewhere; only the box-sizing rule is required. */ .v1a, .v1a *, .v1a *::before, .v1a *::after { box-sizing: border-box; } .v1a body, .v1a-root { background: var(--v1a-bg); color: var(--v1a-text); font-family: var(--v1a-font-body); } .v1a-root { min-height: 100vh; display: flex; flex-direction: column; } .v1a-root main { flex: 1; } /* ── Header (Slice H-3 — V1 fixed floating-pill nav) ───────── V1 uses position: fixed on #site-header (CSS L407-413). We match literally. Non-home pages clear the nav via .v1a-root main padding-top below; the hero clears it via its own padding-top without any negative-margin compensation. */ .v1a-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; padding: 1rem 1.5rem; } /* H-3 B1 clearance: every page on this theme reserves the top 100 px for the floating nav. The hero overrides padding-top explicitly (it already declares padding: 100px ...) so this doesn't double up. Body-wrap pages and bare-main pages get the clearance for free. */ .v1a-root main { padding-top: 100px; } /* The hero IS the only element that needs to "touch" the top of the viewport (so the navy behind the floating pill shows through). Cancel the main's padding-top for the hero by pulling it back up with a negative margin sized exactly to the clearance. */ .v1a-root main > .v1a-hero:first-child { margin-top: -100px; } .v1a-header-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; background: rgba(12, 24, 41, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.10); border-radius: 2rem; padding: 0.75rem 1.25rem; box-shadow: 0 8px 32px rgba(0,0,0,0.24); } .v1a-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--v1a-white); text-decoration: none; flex-shrink: 0; } /* H-3 B4: V1 ships on .nav-logo. Literal copy. */ .v1a-brand img { height: 36px; width: auto; max-width: 180px; object-fit: contain; } .v1a-brand-name { font-family: var(--v1a-font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; color: var(--v1a-white); line-height: 1.1; } /* Brand tagline kept on the v1-authority header but de-emphasised so it doesn't crowd the centered links. Hidden on narrow widths below where the centered links also wrap. */ .v1a-brand-tag { position: relative; display: inline-flex; align-items: center; font-size: 0.78125rem; color: rgba(255,255,255,0.65); font-style: italic; letter-spacing: 0.01em; padding-left: 0.75rem; margin-left: 0.25rem; } .v1a-brand-tag::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 0.875rem; background: rgba(255,255,255,0.22); } /* Centered link cluster — V1's defining nav move. The cluster sits in the middle column of the 3-col pill and is justified to center within its own track. */ .v1a-nav { display: flex; align-items: center; justify-content: center; gap: 0.25rem; /* M34.2 (2026-05-21): the prior wrap-mode allowed the search pill to break onto a second row at desktop widths where the centered link cluster combined with the pill exceeded the middle grid track — producing the "search appears vertically stacked" effect the operator reported, which inflated total navbar height. The nowrap mode below keeps both elements on a single row; the search pill shrinks via its own flex shorthand. The 900px mobile breakpoint already hides the link cluster and the search pill in favor of the hamburger, so nowrap cannot produce horizontal overflow at narrow widths. */ flex-wrap: nowrap; font-family: var(--v1a-font-heading); font-size: 0.875rem; } .v1a-nav a { color: rgba(255,255,255,0.8); text-decoration: none; padding: 0.5rem 0.875rem; font-weight: 600; border-radius: 0.75rem; white-space: nowrap; transition: color 150ms ease, background 150ms ease; } .v1a-nav a:hover { color: var(--v1a-white); background: rgba(255,255,255,0.08); } .v1a-nav a[aria-current='page'] { color: var(--v1a-blue); } .v1a-nav-cta { background: var(--v1a-blue); color: var(--v1a-white) !important; padding: 0.5625rem 1.25rem !important; border-radius: 9999px !important; font-family: var(--v1a-font-heading); font-weight: 700; font-size: 0.875rem; box-shadow: 0 4px 16px rgba(23,115,238,0.4); transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease; min-height: 40px; display: inline-flex; align-items: center; flex-shrink: 0; } .v1a-nav-cta:hover { background: var(--v1a-blue-dark); color: var(--v1a-white) !important; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(23,115,238,0.5); } /* ── Mobile-nav hamburger + overlay (2026-05-12 fix) ─────────── Public-side regression repair: the prior mobile rule simply hid .v1a-nav with display:none and offered no replacement. Mobile visitors had no nav. These styles add a hamburger button + fullscreen overlay; the toggle is display:none at desktop and inline-flex at ≤900 px. The desktop link list moves into its own .v1a-nav-links sub-container so each breakpoint shows the right thing without juggling the .v1a-nav wrapper. */ .v1a-nav-links { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: center; } /* UI-polish 2026-05-20: theme-styled search-form pill that matches the floating-nav aesthetic. Renders only when NEXT_PUBLIC_ENABLE_PUBLIC_SEARCH is on; otherwise no DOM is emitted and these rules don't bind to anything. Why this rule exists: the SearchFormSeam component renders a plain . Without a theme-supplied container class it falls back to native browser chrome (chunky white box, default input border). The .v1a-search pill gives it the same dark-glass language as the nav itself — subtle border, blur, rounded radius, soft hover/focus rings. Layout note: the seam sits as a SIBLING of .v1a-nav-links inside .v1a-nav (which has flex-wrap:wrap + justify-content:center). The width:100% that used to be on .v1a-nav-links has been REMOVED so the link cluster and the search pill share one centered row at desktop widths. Below the 900px breakpoint the link cluster collapses (display:none) and the hamburger overlay takes over; the search pill stays inline as a compact field next to the hamburger. */ .v1a-search { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; /* M34.2: slightly tighter vertical padding so the pill height matches .v1a-nav a (8px top/bottom) for visual parity inside the single nav row. */ padding: 0.375rem 0.875rem; /* M34.2: relaxed minimum from the prior fixed floor so the pill can shrink when the nav row is tight. 140px is the floor — it keeps the "Search…" placeholder readable. Below the 900px mobile breakpoint the pill is hidden entirely. */ min-width: 140px; max-width: 220px; flex: 0 1 200px; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .v1a-search:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); } .v1a-search:focus-within { background: rgba(255,255,255,0.12); border-color: rgba(23,115,238,0.55); box-shadow: 0 0 0 3px rgba(23,115,238,0.18); } .v1a-search > span { display: inline-flex; align-items: center; color: rgba(255,255,255,0.55); flex-shrink: 0; } .v1a-search input { background: transparent; border: 0; outline: 0; color: var(--v1a-white); font-family: var(--v1a-font-body); font-size: 0.875rem; line-height: 1.4; flex: 1; min-width: 0; padding: 0; -webkit-appearance: none; appearance: none; } .v1a-search input::placeholder { color: rgba(255,255,255,0.45); } .v1a-search input::-webkit-search-cancel-button, .v1a-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .v1a-nav-mobile-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: var(--v1a-white); cursor: pointer; transition: background 150ms ease; } .v1a-nav-mobile-toggle:hover { background: rgba(255,255,255,0.14); } .v1a-nav-mobile-toggle:focus-visible { outline: 2px solid var(--v1a-blue); outline-offset: 2px; } .v1a-mobile-nav-overlay { position: fixed; inset: 0; background: rgba(10,15,28,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: stretch; justify-content: center; padding: 1rem; } .v1a-mobile-nav-panel { background: var(--v1a-navy); color: var(--v1a-white); border: 1px solid rgba(255,255,255,0.12); border-radius: 1.5rem; padding: 1.25rem 1.25rem 1.5rem; width: 100%; max-width: 28rem; margin: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .v1a-mobile-nav-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .v1a-mobile-nav-panel-label { font-family: var(--v1a-font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .v1a-mobile-nav-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: var(--v1a-white); cursor: pointer; transition: background 150ms ease; } .v1a-mobile-nav-close:hover { background: rgba(255,255,255,0.14); } .v1a-mobile-nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .v1a-mobile-nav-link { display: block; padding: 0.875rem 1rem; font-family: var(--v1a-font-heading); font-size: 1.0625rem; font-weight: 700; color: rgba(255,255,255,0.85); text-decoration: none; border-radius: 0.75rem; transition: background 150ms ease, color 150ms ease; } .v1a-mobile-nav-link:hover { background: rgba(255,255,255,0.08); color: var(--v1a-white); } .v1a-mobile-nav-cta { display: block; margin-top: 1.25rem; padding: 0.875rem 1.25rem; background: var(--v1a-blue); color: var(--v1a-white) !important; font-family: var(--v1a-font-heading); font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 9999px; box-shadow: 0 8px 24px rgba(23,115,238,0.4); transition: background 150ms ease; } .v1a-mobile-nav-cta:hover { background: var(--v1a-blue-dark); } /* ── Hero (Slice H-2 — V1 full-viewport billboard) ─────────── V1's hero is min-height: 100vh and vertically centers its content. The whole page enters with a single landing slate — no header, no scroll affordance above the fold, just the hero. Since .v1a-header is position: sticky, it occupies the top ~88-100 px of normal flow; the hero begins right below it. Total above-the- fold sequence at scroll-y=0: nav pill (88 px) + hero content (centered in 100vh - 88 px). */ .v1a-hero { background: var(--v1a-navy); position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; /* H-3 B1: padding-top: 100px clears the FIXED floating nav. The negative margin-top is applied separately to .v1a-hero when it's the first child of

, which cancels the parent main's padding-top — see the .v1a-root rule above. */ padding: 100px 1.5rem 5rem; } /* H-3 C3: V1 alphas verbatim (styles.css L604-622). The H-2 values (0.18 / 0.45 / 0.10 + grid 0.04) were too bright; V1 is moodier. */ .v1a-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(23,115,238,0.12) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(30,58,95,0.4) 0%, transparent 50%), radial-gradient(circle at 60% 80%, rgba(23,115,238,0.07) 0%, transparent 40%); pointer-events: none; } .v1a-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } /* V1's content grid: balanced 1fr/1fr with a 4rem gap (space-16), 1200 px max, padded 2rem 1.5rem 5rem. Centers vertically inside the 100vh hero shell via align-items: center on .v1a-hero. */ .v1a-hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 2rem 0 5rem; } /* H-3 player-fix: hero collapses to a single centered column when the right-side player aside is hidden (player disabled OR no video URL configured). Keeps the text from stranding inside one half of a now-empty grid. Lower max-width gives the text-only variant a comfortable reading measure. */ .v1a-hero-content--solo { grid-template-columns: 1fr; max-width: 800px; } .v1a-hero-text { color: var(--v1a-white); } /* H-3 D1: V1 badge alphas verbatim (styles.css L642-650). 0.15 bg, 0.3 border. H-2 had 0.18/0.35 (more saturated). */ .v1a-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(23,115,238,0.15); border: 1px solid rgba(23,115,238,0.3); border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: var(--v1a-blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.5rem; } /* H-1: V1's hero badge dot pulses subtly so the "answering questions" pill reads as live rather than decorative. 2s ease-in-out infinite — V1 keyframes ported verbatim. */ .v1a-hero-badge-dot { width: 6px; height: 6px; background: var(--v1a-blue); border-radius: 50%; display: inline-block; animation: v1a-pulse-dot 2s ease-in-out infinite; } @keyframes v1a-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.8); } } @media (prefers-reduced-motion: reduce) { .v1a-hero-badge-dot { animation: none; } } /* H-3 E1: V1 clamp(3.25rem, 7vw, 5.5rem). 0.25rem larger at both ends. */ .v1a-hero-title { font-family: var(--v1a-font-heading); font-size: clamp(3.25rem, 7vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--v1a-white); margin: 0 0 1.5rem; } .v1a-hero-title-2 { display: block; color: var(--v1a-blue); font-style: italic; } /* H-3 E3: V1 subtitle color rgba(255,255,255,0.7). H-2 had 0.75 (too bright). */ .v1a-hero-subtitle { font-size: 1.1875rem; line-height: 1.65; color: rgba(255,255,255,0.7); margin: 0 0 2.5rem; max-width: 480px; } /* H-2: V1 gap-3 between buttons (0.75rem), 2.5rem to stats. */ .v1a-hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; } /* V1: gap space-8 = 2rem, padding-top space-8 = 2rem, top border 10% white. */ .v1a-hero-stats { display: flex; gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; } /* H-2: V1's hero-stat-num = 1.75rem 900 / -0.03em letter-spacing. */ .v1a-stat-num { font-family: var(--v1a-font-heading); font-size: 1.75rem; font-weight: 900; color: var(--v1a-white); letter-spacing: -0.03em; line-height: 1.1; } .v1a-stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.5); font-weight: 500; margin-top: 2px; } /* H-1 / H-3 D2: V1's .hero-video-side is just position: relative — children flow naturally with the badge's own margin-bottom: 1.5rem creating the gap to the player. To match V1 literally we drop the flex gap: 1.25rem and let the badge's margin be the spacer. align-items: flex-start keeps the badge left-aligned (it's an inline-flex element so it sizes to content). */ .v1a-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* No margin override — let the global .v1a-hero-badge margin-bottom (1.5rem) provide the V1 gap to the player. */ /* Cluster player + float panel together — they share a positioning context so the float can overlap the player by 20 px on each axis. */ .v1a-hero-side > .v1a-hero-side-stack, .v1a-hero-side > .v1a-hero-player-wrap, .v1a-hero-side > .v1a-hero-card, .v1a-hero-side > .v1a-hero-card--v1a { width: 100%; } .v1a-hero-card { background: var(--v1a-card); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 8px 32px rgba(23,115,238,0.35); width: 100%; max-width: 420px; display: block; text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease; } .v1a-hero-card-link { cursor: pointer; } .v1a-hero-card-link:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.14), 0 12px 40px rgba(23,115,238,0.45); } /* H-1: V1 uses 16/10 (not 16/9) — taller frame so the brand-circle poster reads as a portrait, not a landscape thumbnail. */ .v1a-hero-card-poster { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 30%, rgba(23,115,238,0.35), transparent 60%), linear-gradient(135deg, var(--v1a-navy-light) 0%, var(--v1a-navy) 100%); color: var(--v1a-white); } .v1a-hero-card-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .v1a-hero-card-poster-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,15,28,0.32); transition: background 200ms ease; } .v1a-hero-card-poster-overlay svg { width: 4rem; height: 4rem; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); transition: transform 200ms ease; } .v1a-hero-card-link:hover .v1a-hero-card-poster-overlay, .v1a-hero-card-button:hover .v1a-hero-card-poster-overlay { background: rgba(10,15,28,0.18); } .v1a-hero-card-link:hover .v1a-hero-card-poster-overlay svg, .v1a-hero-card-button:hover .v1a-hero-card-poster-overlay svg { transform: scale(1.08); } .v1a-hero-card-poster--empty { /* no play button when no video URL is set */ } .v1a-hero-card-poster--iframe { padding: 0; } .v1a-hero-iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--v1a-navy); } .v1a-hero-card-button { all: unset; display: block; width: 100%; max-width: 420px; cursor: pointer; background: var(--v1a-card); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 8px 32px rgba(23,115,238,0.35); text-align: left; transition: transform 200ms ease, box-shadow 200ms ease; } .v1a-hero-card-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.14), 0 12px 40px rgba(23,115,238,0.45); } .v1a-hero-card-button:hover .v1a-hero-card-poster svg { transform: scale(1.08); } .v1a-hero-card-button:focus-visible { outline: 2px solid var(--v1a-blue); outline-offset: 4px; } .v1a-hero-card-meta { padding: 1rem 1.25rem; } .v1a-hero-card-title { font-family: var(--v1a-font-heading); font-weight: 800; font-size: 0.9375rem; } .v1a-hero-card-sub { font-size: 0.8125rem; color: var(--v1a-text-muted); margin-top: 2px; } /* ── Hero player (Slice H-1, V1 ASKaTrafficCOP parity) ────── When the YouTubeFacade is rendered with variant='v1-authority', it switches markup to a different shape: the card sits inside v1a-hero-player-wrap (the positioning context for the float panel + YouTube pill), the poster is the brand circle full-bleed, and the play button is a 76 px blue circle with a "Watch the Welcome Video" label badge — every detail matches V1 index.html lines 95-129. The default variant (show-wiki, generic callers) keeps the existing rendering above; nothing here regresses it. */ /* Caller-rendered shell around the player + float panel. Acts as the positioning context for the float (bottom:-20px right:-20px). */ /* H-2: removed the 600 px cap on the side stack. V1 lets the player fill the 1fr column entirely (~568 px at the 1200 px breakpoint). The wrap stays a positioning context for the float panel + pill. */ .v1a-hero-side-stack { position: relative; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; } .v1a-hero-side-stack .v1a-hero-badge { align-self: flex-start; margin-bottom: 0; } .v1a-hero-player-wrap { position: relative; width: 100%; } /* H-2: V1's .hero-video-container = border-radius 2rem (--radius-2xl), 1 px hairline border at 10% alpha white, V1 --shadow-xl (deep navy shadow only — no blue glow). The blue glow that H-1 added was a SaaS instinct; V1's screen reads as a real screen because the border + deep shadow alone separate it from the navy background. */ .v1a-hero-card--v1a { width: 100%; max-width: none; border-radius: 2rem; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08); /* Cancel the H-1 inset shadow — replaced by the real border. */ background: var(--v1a-navy-mid); } /* The poster inside the rounded card needs to clip to the same border-radius so the brand circle doesn't bleed past the corners. */ .v1a-hero-card--v1a .v1a-hero-card-poster { border-radius: 2rem; } .v1a-hero-card-button--v1a { width: 100%; max-width: none; border-radius: 2rem; } .v1a-hero-card-button--v1a:focus-visible { outline: 2px solid var(--v1a-blue); outline-offset: 4px; } /* Aggressively unstyle the button — V1's click target is a plain div with cursor:pointer; we keep

Second article

Get Outta here