/* CACHING: vercel.json serves every .css and .js with `max-age=31536000, immutable`, so browsers will NOT revalidate this file for a year. The ONLY cache-buster is the ?v= on the in each page. If you edit this file, bump that version in every page that links it: find . -name '*.html' -not -path './node_modules/*' -not -path './update/*' \ -print0 | xargs -0 perl -pi -e 's{/style\.css\?v=5\.1}{/style.css?v=5.2}g' Skip it and returning visitors keep the old stylesheet indefinitely. */ /* ========================================================= FEDERAL BENEFITS EXCHANGE Brand: Navy #081D3D | Gold #D4AC2C | Parchment #E4DBC3 Type: Playfair Display (display) / Inter (body) ========================================================= */ /* --- Design Tokens --- */ /* Fonts are imported here rather than in 51 page s, so the whole site restyles from this one file. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap'); :root { color-scheme: light; /* Brand — navy structure, gold accent. Token NAMES are deliberately unchanged so all 51 existing pages retheme without touching their markup; only the values move. --color-orange is now gold: it was the CTA colour and every rule using it keeps working. Gold is light, so content sitting ON it needs navy text, not white -- see the .btn-primary override further down. */ --color-navy: #081D3D; --color-navy-dark: #030F24; --color-navy-light: #1B3A66; --color-orange: #D4AC2C; --color-orange-hover: #B8901F; --color-orange-light: #FBF7EC; /* Surfaces — warm parchment rather than white */ --color-bg: #E4DBC3; --color-surface: #FBF7EC; --color-surface-2: #DFD6BE; --color-border: #C6BCA0; --color-divider: #AFA482; /* Text */ --color-text: #0A1224; --color-text-muted: #3A4358; --color-text-faint: #565E6E; /* 4.72:1 on parchment; #7A8296 was 2.79 */ --color-text-inverse: #FFFFFF; /* Status — warmed so they sit on parchment instead of white */ --color-success: #1A6B45; --color-success-bg: #E8F2E4; --color-warning-bg: #FBF1D8; /* Aliases, so new-style markup (eyebrows, gold rules, cream panels) can be dropped onto any page without pulling in a second stylesheet. */ --navy: #081D3D; --navy-deep: #030F24; --navy-line: #1B3A66; --gold: #D4AC2C; --gold-warm: #B8901F; --gold-deep: #8F6E14; /* Gold for SMALL text on parchment/cream. --gold-warm is 2.16:1 there and --gold-deep only 3.45 -- both fail AA for 12px tracked caps like .eyebrow. This is 5.13:1 on parchment, 6.62 on cream. On NAVY the reverse holds and --gold-warm (6.42:1) is the right choice. */ --gold-ink: #70540F; --cream: #F5EFE0; --cream-soft: #FBF7EC; /* Input fill. Must differ from --color-surface, which is what cards use. */ --field-bg: #FFFFFF; /* Reading sheet: the panel long-form prose sits on. Lighter than the cards (--color-surface) so a card placed on a sheet still reads as a card. Page < sheet < card is the intended stack. */ --sheet-bg: #FFFCF6; /* Type scale — ratios untouched, so nothing reflows unexpectedly */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-hero: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Radii — tightened; the executive look is crisper than the old rounded one */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.625rem; --radius-xl: 0.875rem; --radius-full: 9999px; /* Shadows — navy-tinted and deeper */ --shadow-sm: 0 1px 2px rgba(8,29,61,0.08), 0 1px 3px rgba(8,29,61,0.06); --shadow-md: 0 14px 36px rgba(8,29,61,0.14), 0 3px 8px rgba(8,29,61,0.08); --shadow-lg: 0 32px 72px rgba(8,29,61,0.30), 0 10px 24px rgba(8,29,61,0.14); --shadow-card: 0 2px 10px rgba(8,29,61,0.10); /* Fonts */ --font-display: 'Playfair Display', 'Source Serif 4', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif; --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1); --content-max: 1180px; --content-narrow: 700px; } /* --- Dark Mode --- */ [data-theme="dark"] { color-scheme: dark; /* Night version of the same theme: navy becomes the page, parchment becomes the ink. Gold is unchanged -- it carries on both. */ --color-bg: #06111F; --color-surface: #0C1B2E; --color-surface-2: #12233A; --color-border: #1E3452; --color-divider: #17293F; --color-text: #F1EADB; --color-text-muted: #A9B3C4; --color-text-faint: #6B7789; --color-navy: #16406F; --color-navy-dark: #0B1D33; --color-navy-light: #24578C; --color-orange-light: #241D08; --color-success-bg: #10241A; --color-warning-bg: #251E09; --navy: #16406F; --navy-deep: #06111F; --cream: #F1EADB; --cream-soft: #0C1B2E; --field-bg: #06111F; --sheet-bg: #0A1728; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 14px 36px rgba(0,0,0,0.5); --shadow-lg: 0 32px 72px rgba(0,0,0,0.6); --shadow-card: 0 2px 10px rgba(0,0,0,0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-bg: #06111F; --color-surface: #0C1B2E; --color-surface-2: #12233A; --color-border: #1E3452; --color-text: #F1EADB; --color-text-muted: #A9B3C4; --color-navy: #16406F; --color-navy-dark: #0B1D33; --color-orange-light: #241D08; --navy: #16406F; --navy-deep: #06111F; --cream: #F1EADB; --cream-soft: #0C1B2E; --field-bg: #06111F; --sheet-bg: #0A1728; } } /* --- Base Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); line-height: 1.65; overflow-x: hidden; overflow-x: clip; } img, picture, video { display: block; max-width: 100%; height: auto; } ul[role="list"] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); } p, li { text-wrap: pretty; } a { color: var(--color-orange); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-orange-hover); } button { cursor: pointer; background: none; border: none; } :focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; border-radius: var(--radius-sm); } ::selection { background: rgba(212,172,44,0.2); } /* --- Layout --- */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 640px) { .container { padding: 0 var(--space-4); } } /* --- Content Layout with Sidebar --- */ .content-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; } .sidebar-nav { position: sticky; top: 100px; } .sidebar-nav h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-orange); margin-bottom: var(--space-5); font-weight: 700; } .sidebar-nav-list { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; } .sidebar-nav-item { display: block; padding: 10px 14px; border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all var(--transition); } .sidebar-nav-item:hover { background: rgba(212,172,44, 0.08); color: var(--color-orange); transform: translateX(4px); } .sidebar-nav-item.active { background: var(--color-orange); color: white; } @media (max-width: 992px) { .content-layout { grid-template-columns: 1fr; } .sidebar-nav { display: none; /* Hide sidebar on mobile as per FAQ/Resources current behavior */ } } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); padding: 0.75rem 1.5rem; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; letter-spacing: 0.01em; } .btn-primary { background: var(--color-orange); color: white; border-color: var(--color-orange); } .btn-primary:hover { background: var(--color-orange-hover); border-color: var(--color-orange-hover); color: white; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,172,44,0.35); } .btn-outline { background: transparent; color: var(--color-orange); border-color: var(--color-orange); } .btn-outline:hover { background: var(--color-orange); color: white; } .btn-sm { padding: 0.5rem 1.1rem; font-size: var(--text-xs); } .btn-lg { padding: 1rem 2rem; font-size: var(--text-base); } .btn-full { width: 100%; justify-content: center; } /* On very narrow screens (small phones, browser zoom), let long button labels wrap instead of forcing the layout wider than the viewport. */ @media (max-width: 400px) { .btn { white-space: normal; } } /* Specificity overrides for buttons inside nav links to prevent grey text overrides */ .header-nav .btn-primary, .mobile-nav .btn-primary { color: white; } .header-nav .btn-primary:hover, .mobile-nav .btn-primary:hover { color: white; } .header-nav .btn-outline, .mobile-nav .btn-outline, .mobile-nav-theme-row .btn-outline { color: var(--color-orange); } .header-nav .btn-outline:hover, .mobile-nav .btn-outline:hover, .mobile-nav-theme-row .btn-outline:hover { color: white; } /* ========================================================= HEADER ========================================================= */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); transition: box-shadow var(--transition); } [data-theme="dark"] .header { background: rgba(13,18,32,0.95); } .header--scrolled { box-shadow: var(--shadow-md); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-6); max-width: var(--content-max); margin: 0 auto; gap: var(--space-6); } .logo { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; text-decoration: none; } .logo-img { /* The wordmark is 1526x218 (7:1). 60px was sized for the old taller header; the new one carries a utility bar above it, so the lockup comes down and the width follows the aspect ratio rather than being pinned. */ height: 46px; width: auto; max-width: 340px; display: block; max-width: 100%; transition: transform var(--transition); content: url('FB_Logo_Light.svg'); } [data-theme="dark"] .logo-img { content: url('FB_Logo_Dark.svg'); } .footer-brand .logo-img { content: url('FB_Logo_Dark.svg'); } .logo:hover .logo-img { transform: scale(1.02); } .header-nav { display: flex; align-items: center; gap: var(--space-6); } .header-nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--transition); text-decoration: none; } .header-nav a:hover { color: var(--color-navy); } [data-theme="dark"] .header-nav a:hover { color: var(--color-text); } .nav-agent-link, .mobile-nav a.nav-agent-link { display: inline-flex; align-items: center; gap: 5px; } /* Nav dropdown ("Resources"). Click-toggled (not hover) so it works for touch and keyboard users, not just mouse. */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 500; font-family: inherit; color: var(--color-text-muted); background: none; border: none; padding: 0; cursor: pointer; transition: color var(--transition); } .nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger { color: var(--color-navy); } [data-theme="dark"] .nav-dropdown-trigger:hover, [data-theme="dark"] .nav-dropdown.open .nav-dropdown-trigger { color: var(--color-text); } .nav-caret { transition: transform var(--transition); flex-shrink: 0; } .nav-dropdown.open .nav-caret { transform: rotate(180deg); } .nav-dropdown-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--space-3); min-width: 160px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-2); z-index: 60; } .nav-dropdown.open .nav-dropdown-menu { display: flex; } .nav-dropdown-menu a { padding: var(--space-2) var(--space-3); border-radius: 8px; white-space: nowrap; } .nav-dropdown-menu a:hover { background: var(--color-surface); } .menu-btn { display: none; padding: var(--space-2); color: var(--color-text); } .mobile-nav { display: none; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-bg); } .mobile-nav a { font-weight: 500; color: var(--color-text-muted); text-decoration: none; padding: var(--space-2) 0; } .mobile-nav-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); padding: var(--space-2) 0 0; } .mobile-nav a.mobile-nav-sub { padding-left: var(--space-4); font-weight: 400; } .mobile-nav.is-open { display: flex; } /* Collapse to the burger at 1080px, not 768px. The wordmark is 7:1 and the nav carries six items: between about 770 and 1100px they were overlapping by up to 150px. Shrinking the logo cannot fix it -- the nav alone needs ~565px -- so the menu has to fold earlier. */ @media (max-width: 1080px) { .header-nav { display: none; } .menu-btn { display: flex; } .header-inner { padding: var(--space-2) var(--space-4); } /* Sizes step down once: 46 -> 40 -> 34 -> 28. This block now starts at 1080px, so it must not drop below what the narrower rules below set. */ .logo-img { height: 40px; width: auto; max-width: 300px; } } /* ========================================================= HERO ========================================================= */ .hero { position: relative; background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 50%, #2A3F82 100%); overflow: hidden; padding: clamp(var(--space-16), 10vw, var(--space-24)) 0; min-height: 85vh; display: flex; align-items: center; } .hero-bg-pattern { position: absolute; inset: 0; opacity: 0.04; background-image: repeating-linear-gradient(0deg, white 0, white 1px, transparent 1px, transparent 60px), repeating-linear-gradient(90deg, white 0, white 1px, transparent 1px, transparent 60px); } .hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(212,172,44,0.15) 0%, transparent 70%); pointer-events: none; } .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-10); position: relative; max-width: 800px; margin: 0 auto; } /* Badge */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(212,172,44,0.15); border: 1px solid rgba(212,172,44,0.35); color: #FFB088; font-size: var(--text-xs); font-weight: 700; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--space-5); } .badge-dot { width: 7px; height: 7px; background: var(--color-orange); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } .hero-headline { font-size: var(--text-hero); font-weight: 700; color: white; /* Playfair Display sets tight by default and the negative tracking below narrows the spaces along with the letters, so the words read as one run without this. */ letter-spacing: -0.02em; word-spacing: 0.12em; margin-bottom: var(--space-5); line-height: 1.05; } #hero .hero-headline { font-size: clamp(2.35rem, 1.45rem + 3vw, 4rem); } .headline-accent { color: var(--color-orange); } /* Blocking the accent line gives a gap under "Federal Employees:" that line-height can't — line-height would also open up the accent's own wrapped lines. Scoped to the homepage hero. */ #hero.hero-with-form .headline-accent { display: block; margin-top: 0.18em; } .hero-sub { font-size: var(--text-lg); color: rgba(255,255,255,0.75); max-width: 52ch; margin-left: auto; margin-right: auto; margin-bottom: var(--space-6); font-weight: 400; line-height: 1.6; } .hero-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-8); } .topic-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); letter-spacing: 0.02em; } .topic-pill svg { opacity: 0.7; } .hero-cta-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-10); } .hero-cta-group .btn { align-self: center; font-size: var(--text-base); padding: 1.1rem 2.2rem; } .hero-cta-group .btn.hero-cta-alt { font-size: var(--text-sm); padding: 0.55rem 1.4rem; margin-top: calc(var(--space-2) * -1); } .hero-cta-note { font-size: var(--text-xs); color: rgba(255,255,255,0.5); font-style: italic; margin-top: calc(var(--space-2) * -1); } .hero-cta-link { font-size: var(--text-sm); color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 3px; margin-top: var(--space-2); transition: color 0.15s ease; } .hero-cta-link:hover { color: #fff; } .hero-trust { display: flex; align-items: center; justify-content: center; gap: var(--space-5); flex-wrap: wrap; } .trust-item { display: flex; flex-direction: column; gap: 2px; } .trust-item strong { font-size: var(--text-base); color: white; font-weight: 800; } .trust-item span { font-size: var(--text-xs); color: rgba(255,255,255,0.55); } .trust-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.2); } /* Hero Visual and Concerns Card stack removed */ /* --- Hero with the registration form inline: content left, form right ------ The homepage CTA used to live in a separate section below the fold; the form is now the hero's right-hand column. Only .hero-inner-split is affected, so the centred hero on the other landing pages is untouched. */ .hero-with-form { min-height: 0; /* the form sets the height; 85vh would only add dead space */ padding: clamp(var(--space-12), 7vw, var(--space-20)) 0; } .hero-inner-split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); /* top-aligned: the form column is far taller than the copy, so centring the copy pushed the headline most of a screen down */ align-items: start; text-align: left; max-width: 1200px; } .hero-inner-split .hero-content { display: block; } .hero-inner-split .hero-sub { margin-left: 0; margin-right: 0; max-width: 46ch; } .hero-form-wrap { min-width: 0; } /* Sized for the split column, which is ~45% narrower than the old centred hero. Needs the id to out-specify the `#hero .hero-headline` clamp above. */ #hero.hero-with-form .hero-headline { font-size: clamp(1.9rem, 1.05rem + 1.85vw, 2.7rem); margin-bottom: var(--space-4); } /* The hook question, sized between the headline and the sub so the hierarchy reads headline -> question -> call to action. */ .hero-question { font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem); font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: var(--space-3); } #hero.hero-with-form .hero-sub { /* Larger and italic so the call to action carries weight of its own, while staying a clear step below the question above it. */ font-size: clamp(1.1rem, 0.98rem + 0.35vw, 1.3rem); font-style: italic; color: rgba(255,255,255,0.88); margin-bottom: var(--space-6); } /* The card carries its own surface colour and shadow; on the navy hero it needs a hairline so its edge reads in dark mode, where card and hero are both dark. */ .hero-form-wrap .form-card { border: 1px solid rgba(255,255,255,0.1); } /* --- Hero promo video ---------------------------------------------------- The clip is a 9:16 vertical social cut, so it's framed as a phone-shaped card rather than stretched into the wide hero. Width is capped deliberately: at 9:16 every extra 100px of width adds ~178px of hero height, which pushes the registration form down. */ .hero-video { position: relative; margin-top: var(--space-6); width: 100%; max-width: 236px; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; /* Fills the frame before the first video frame decodes, so there's no white or black flash on the navy hero. */ background: var(--color-navy-dark); border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow-lg); } /* The whole frame is a mute toggle, so it needs to look clickable. */ .hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; } /* Top-right, not bottom: captions render bottom-centre and at readable size they would sit underneath these buttons. */ .hero-video-controls { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; gap: var(--space-1); } /* "Tap for sound" — click-to-unmute is invisible without a prompt. Sits opposite the controls, clear of the caption area, and is removed once sound is on. */ .hero-video-hint { position: absolute; top: var(--space-2); left: var(--space-2); display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--radius-full); background: rgba(13,18,32,0.72); color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; /* clicks belong to the video underneath */ transition: opacity var(--transition, 0.15s ease); } .hero-video-hint[hidden] { display: none; } .hero-video-btn { appearance: none; border: none; cursor: pointer; padding: 0; width: 34px; height: 34px; border-radius: var(--radius-full); background: rgba(13,18,32,0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition, 0.15s ease); } .hero-video-btn:hover { background: rgba(212,172,44,0.92); } .hero-video-btn:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; } .hero-video-btn svg { pointer-events: none; } /* Caption cues for the hero promo. ::cue only accepts text-level properties — no padding — so line-height does the breathing room and the solid background plus shadow keep the text readable over a bright frame. */ .hero-video video::cue { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45; background: rgba(13,18,32,0.84); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7); /* Safety net: cues are hand-broken in the .vtt, but if a line is edited and runs long it must wrap rather than overflow the frame. `white-space` is one of the few properties ::cue actually honours. */ white-space: normal; } @media (max-width: 980px) { /* Centred once the hero collapses to a single column. */ .hero-video { margin-left: auto; margin-right: auto; } } /* On phones the 420px-tall frame pushes the registration form well below the fold, so the card is scaled to 0.75x height here. Driven through max-width rather than a height cap because the 9/16 aspect-ratio derives height from width: 236 -> 177px gives 420 -> 315px. Capping height directly instead would leave the width at 236 and let object-fit: cover crop the frame, cutting off the burnt-in captions along the bottom of the clip. */ @media (max-width: 640px) { .hero-video { max-width: 177px; } } @media (max-width: 980px) { .hero-inner-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); max-width: 640px; } /* Centre the copy only. Setting this on the grid itself also centred every form label, disclosure and checkbox in the card. */ .hero-inner-split .hero-content { text-align: center; } .hero-inner-split .hero-sub { margin-left: auto; margin-right: auto; } } /* --- Register section after the form moved out of it ---------------------- */ .register-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); } .register-back-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .register-back-note { font-size: var(--text-sm); color: rgba(255,255,255,0.65); line-height: 1.6; } .register-back-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .register-back-cta { align-items: stretch; } } @media (max-width: 900px) { .hero-headline { font-size: var(--text-2xl); } .hero { min-height: auto; padding: var(--space-16) 0; } } /* ========================================================= SECTIONS ========================================================= */ .section { padding: clamp(var(--space-12), 8vw, var(--space-24)) 0; } .section-dark { background: var(--color-navy); color: white; } .section-dark h2 { color: white; } .section-header { text-align: center; max-width: 680px; margin: 0 auto var(--space-12); } .section-label { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-orange); margin-bottom: var(--space-3); } .section-label.light { color: rgba(212,172,44,0.9); } .section-header h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--color-navy); margin-bottom: var(--space-4); } [data-theme="dark"] .section-header h2 { color: var(--color-text); } .section-desc { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; } /* ========================================================= BENEFITS GRID ========================================================= */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 900px) { .benefits-grid { grid-template-columns: 1fr; } } .benefit-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .benefit-card-fegli::before { background: linear-gradient(90deg, #081D3D, #1B3A66); } .benefit-card-tsp::before { background: linear-gradient(90deg, #1A6B45, #46A377); } .benefit-card-fehb::before { background: linear-gradient(90deg, #8F6E14, #D4AC2C); } .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .benefit-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .benefit-card-fegli .benefit-icon { background: rgba(8,29,61,0.08); color: var(--color-navy); } .benefit-card-tsp .benefit-icon { background: rgba(26,127,75,0.08); color: #1A7F4B; } .benefit-card-fehb .benefit-icon { background: rgba(212,172,44,0.08); color: var(--color-orange); } [data-theme="dark"] .benefit-icon { background: rgba(255,255,255,0.06); } .benefit-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--color-navy); } [data-theme="dark"] .benefit-card h3 { color: var(--color-text); } .benefit-list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .benefit-list li { font-size: var(--text-sm); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; line-height: 1.5; } .benefit-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-orange); font-weight: 800; font-size: 0.75rem; top: 2px; } .benefit-callout { display: flex; align-items: flex-start; gap: var(--space-2); background: var(--color-warning-bg); border: 1px solid rgba(212,172,44,0.2); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: auto; } [data-theme="dark"] .benefit-callout { background: rgba(212,172,44,0.08); border-color: rgba(212,172,44,0.15); } .benefit-callout svg { color: var(--color-orange); flex-shrink: 0; margin-top: 1px; } /* ========================================================= WHO IS THIS FOR ========================================================= */ .who-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } @media (max-width: 900px) { .who-inner { grid-template-columns: 1fr; } .who-visual { display: none; } } .section-dark .section-header h2 { color: white; } .who-content h2 { font-size: var(--text-2xl); font-weight: 700; color: white; letter-spacing: -0.02em; margin-bottom: var(--space-8); } .who-list { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-8); } .who-list li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-base); color: rgba(255,255,255,0.85); line-height: 1.5; } .who-check { width: 28px; height: 28px; background: rgba(212,172,44,0.2); border: 1px solid rgba(212,172,44,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; color: var(--color-orange); } .who-image { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; } /* ========================================================= ABOUT THE HOST ========================================================= */ .section-host { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .section-host { background: var(--color-surface); } .host-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-12); align-items: center; } @media (max-width: 900px) { .host-inner { grid-template-columns: 1fr; gap: var(--space-8); } } .host-visual { display: flex; justify-content: center; } .host-image-wrap { position: relative; width: 100%; max-width: 300px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid var(--color-bg); } .host-image { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 1 / 1; } .host-badge { position: absolute; bottom: var(--space-4); right: var(--space-4); background: var(--color-orange); color: white; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .host-badge strong { font-size: var(--text-base); font-weight: 700; } .host-badge span { font-size: var(--text-xs); font-weight: 500; opacity: 0.9; } .host-content { display: flex; flex-direction: column; gap: var(--space-4); } .host-content h2 { font-size: var(--text-xl); font-weight: 700; color: var(--color-navy); letter-spacing: -0.02em; } [data-theme="dark"] .host-content h2 { color: white; } .host-title { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); margin-top: calc(-1 * var(--space-1)); } .host-bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; } [data-theme="dark"] .host-bio { color: var(--color-text-muted); } .host-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-2); } @media (max-width: 500px) { .host-stats { grid-template-columns: 1fr; gap: var(--space-3); } } .host-stat-card { background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; display: flex; flex-direction: column; gap: var(--space-1); box-shadow: var(--shadow-sm); } .host-stat-card strong { font-size: var(--text-base); font-weight: 700; color: var(--color-navy); } [data-theme="dark"] .host-stat-card strong { color: white; } .host-stat-card span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; } /* --- "Meet Your Hosts" cards --- */ /* auto-fit rather than a fixed column count: with three hosts a hardcoded `1fr 1fr` left the third card orphaned at half width on its own row. The 260px floor keeps all three side by side down to the 900px breakpoint below, where they stack. */ .hosts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); align-items: stretch; } @media (max-width: 900px) { .hosts-grid { grid-template-columns: 1fr; gap: var(--space-6); } } .host-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .host-card-head { display: flex; align-items: center; gap: var(--space-4); min-width: 0; } .host-card-img { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-bg); box-shadow: var(--shadow-md); } .host-card-head h3 { font-size: var(--text-lg); font-weight: 700; color: var(--color-navy); line-height: 1.25; } [data-theme="dark"] .host-card-head h3 { color: white; } .host-card-head .host-title { margin-top: 2px; } .host-card .host-stats { grid-template-columns: 1fr 1fr; margin-top: auto; } @media (max-width: 500px) { .host-card .host-stats { grid-template-columns: 1fr 1fr; } } /* --- Compact "Your Hosts" block beside the registration form (dark column) --- */ .hosts-proof { margin-bottom: var(--space-5); } .hosts-proof .presenter-proof-label { display: block; color: rgba(255,255,255,0.58); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); } .hosts-proof-grid { display: grid; gap: var(--space-3); } .host-mini { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); background: rgba(255,255,255,0.07); min-width: 0; } .host-mini img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 2px solid rgba(212,172,44,0.8); } .host-mini div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .host-mini strong { color: white; font-size: var(--text-sm); } .host-mini span { color: rgba(255,255,255,0.7); font-size: var(--text-xs); } .hosts-proof-more { display: inline-block; margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 600; color: var(--color-orange); text-decoration: none; } .hosts-proof-more:hover { text-decoration: underline; } /* ========================================================= REGISTRATION ========================================================= */ .section-register { background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%); } .section-register-primary { position: relative; overflow: hidden; } .section-register-primary::before { content: ''; position: absolute; width: 520px; height: 520px; left: -260px; bottom: -300px; border-radius: 50%; background: rgba(212,172,44,0.08); pointer-events: none; } .register-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } @media (max-width: 900px) { .register-inner { grid-template-columns: 1fr; } .section-register-primary .register-form-wrap { order: -1; } } /* Grid/flex items default to min-width:auto and refuse to shrink below their content — which pushed .register-content past the viewport on phones. Allow them to shrink to their track and let long content wrap instead of overflow. */ .register-content, .register-form-wrap { min-width: 0; } .register-content h2 { font-size: var(--text-2xl); font-weight: 700; color: white; letter-spacing: -0.02em; margin-bottom: var(--space-4); } .register-desc { font-size: var(--text-base); color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: var(--space-8); } .registration-takeaways h3 { color: white; font-size: var(--text-base); margin-bottom: var(--space-3); } .registration-takeaways ul { display: flex; flex-direction: column; gap: var(--space-3); } .registration-takeaways li { list-style: none; position: relative; padding-left: var(--space-6); color: rgba(255,255,255,0.82); font-size: var(--text-sm); line-height: 1.5; } .registration-takeaways li::before { content: '✓'; position: absolute; left: 0; color: var(--color-orange); font-weight: 800; } /* Form Card */ .form-card { /* Not --color-bg: that is the page ground, so the card was tan-on-tan and only its shadow separated it. Cards use the cream surface plus a border, the same as .contact-info-card and every other card on the site. */ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-md); } .form-header { margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); } .form-header h3 { font-size: var(--text-xl); font-weight: 700; color: var(--color-navy); letter-spacing: -0.01em; } [data-theme="dark"] .form-header h3 { color: var(--color-text); } .form-header p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); } .register-form, .review-form { display: flex; flex-direction: column; gap: var(--space-4); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } } .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-group label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .label-note { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); } .form-group input, .form-group select { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--field-bg); color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition); appearance: none; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(212,172,44,0.15); } .form-group input::placeholder { color: var(--color-text-faint); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6178' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .form-group input.error, .form-group select.error, .form-group input:user-invalid, .form-group select:user-invalid { border-color: #DC2626; } .form-group input.error:focus, .form-group select.error:focus, .form-group input:user-invalid:focus, .form-group select:user-invalid:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } .form-consent.has-error, .form-consent:has(input[type="checkbox"]:user-invalid) { outline: 2px solid #DC2626; outline-offset: 4px; border-radius: var(--radius-sm); } .form-consent { display: flex; gap: var(--space-3); align-items: flex-start; } .checkbox-label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-orange); cursor: pointer; } .checkbox-label span { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; } .form-disclosure { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-3); } .form-note { font-size: var(--text-xs); color: var(--color-text-faint); text-align: center; line-height: 1.5; padding-top: var(--space-2); } .form-note a { color: var(--color-orange); } /* Appointment picker on /book/ — date + discrete slot, side by side. */ .appt-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 520px) { .appt-picker { grid-template-columns: 1fr; } } .appt-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); } .appt-error { font-size: var(--text-sm); color: #B42318; margin-top: var(--space-2); font-weight: 600; } [data-theme="dark"] .appt-error { color: #FDA29B; } .appt-error[hidden] { display: none; } /* --- Free-tool pages (e.g. /fegli-code/) --------------------------------- */ .section-compact { padding: clamp(var(--space-10), 6vw, var(--space-16)) 0; } .tool-head { max-width: 760px; margin-bottom: var(--space-8); } .tool-head h1 { font-size: var(--text-2xl); color: var(--color-navy); margin: var(--space-2) 0 var(--space-3); } [data-theme="dark"] .tool-head h1 { color: var(--color-text); } .tool-lede { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; max-width: 68ch; } .tool-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-7); max-width: 760px; margin-bottom: var(--space-10); } .tool-label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); } .tool-input-row { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; } #codeIn { /* Monospace, not the display serif. This field takes codes like C0 and E5, where the whole point is telling a zero from the letter O -- and Playfair's 0 at 2rem reads as an o. A mono face makes that unambiguous. System stack, so it costs no extra download. */ font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; width: 5.5rem; padding: var(--space-3) var(--space-2); border: 2px solid var(--color-border); border-radius: var(--radius-lg); /* --color-bg is the PAGE ground, which is now darker than the card this input sits in, so the field read as a filled swatch. --color-surface is the card's own colour, which makes it vanish. A field needs to differ from whatever it sits on: white on the cream card in light mode, and the darker page tone in dark mode, which reads as inset either way. */ background: var(--field-bg); color: var(--color-text); } #codeIn::placeholder { color: var(--color-text-faint); font-weight: 600; } #codeIn:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(212,172,44,0.15); } .tool-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; } .tool-result { margin-top: var(--space-5); min-height: 1.5em; font-size: var(--text-base); line-height: 1.6; } .tool-result:empty { margin-top: 0; min-height: 0; } .tool-result .result-code { display: inline-block; font-weight: 800; color: var(--gold-ink); margin-right: var(--space-3); letter-spacing: 0.08em; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } .tool-result.is-waiting { color: var(--color-text-faint); font-size: var(--text-sm); } .tool-result.is-found .result-text { font-weight: 700; color: var(--color-text); } .tool-result.is-unsure, .tool-result.is-missing { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text); } .tool-result.is-unsure { background: #FEF3E2; border-left: 3px solid #C9962C; } [data-theme="dark"] .tool-result.is-unsure { background: #2E2812; color: #E0D5A8; } .tool-result.is-missing { background: var(--color-surface-2); border-left: 3px solid var(--color-divider); } .tool-where, .tool-legend, .tool-gap { max-width: 760px; margin-bottom: var(--space-10); } .tool-where h2, .tool-legend h2, .tool-gap h2, .tool-cta h2 { font-size: var(--text-xl); color: var(--color-navy); margin-bottom: var(--space-3); } [data-theme="dark"] .tool-where h2, [data-theme="dark"] .tool-legend h2, [data-theme="dark"] .tool-gap h2, [data-theme="dark"] .tool-cta h2 { color: var(--color-text); } .tool-where ul { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .tool-where li, .tool-gap p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; } .tool-gap p { margin-bottom: var(--space-3); } .tool-legend dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; } @media (max-width: 560px) { .tool-legend dl { grid-template-columns: 1fr; gap: var(--space-1) 0; } } .tool-legend dt { font-weight: 700; color: var(--color-text); font-size: var(--text-sm); } .tool-legend dd { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } .tool-note { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--color-orange-light); border-left: 3px solid var(--color-orange); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.65; color: var(--color-text); } .tool-table-wrap { overflow-x: auto; max-width: 760px; margin: var(--space-4) 0 var(--space-10); } .tool-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .tool-table th, .tool-table td { text-align: left; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); } .tool-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-faint); } .tool-table tbody th code { font-weight: 800; color: var(--color-orange); } .tool-table tbody td { color: var(--color-text-muted); } .tool-table tr.is-highlight { background: var(--color-orange-light); } [data-theme="dark"] .tool-table tr.is-highlight { background: #2D1A0F; } .tool-cta { max-width: 760px; border-top: 1px solid var(--color-border); padding-top: var(--space-8); } .tool-cta p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; } .tool-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-5) 0; } .tool-source { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.6; } .tool-source a { color: var(--color-orange); } /* Secondary path out of the form, directly under the submit button. Deliberately a step up from .form-note — it's an action, not fine print. */ .form-alt-cta { display: block; text-align: center; font-size: var(--text-sm); color: var(--color-orange); text-decoration: underline; text-underline-offset: 3px; padding-top: var(--space-3); } .form-alt-cta:hover { color: var(--color-orange-hover); } /* Success State */ .form-success { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .success-icon { width: 72px; height: 72px; background: var(--color-success-bg); border: 2px solid var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-success); } .form-success h3 { font-size: var(--text-xl); color: var(--color-navy); } [data-theme="dark"] .form-success h3 { color: var(--color-text); } .form-success p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 40ch; line-height: 1.65; } .success-next { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .success-next p { font-size: var(--text-xs); color: var(--color-text-faint); } .success-next p.prep-fork-note { max-width: 46ch; text-align: center; } .prep-fork-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .prep-deferred, .prep-done { text-align: center; margin-top: var(--space-3); } .prep-deferred p, .prep-done p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 48ch; margin: 0 auto var(--space-3); line-height: 1.65; } .prep-inline { width: 100%; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); text-align: left; } .prep-inline h4 { margin: 0 0 var(--space-2); color: var(--color-navy); font-size: var(--text-lg); } [data-theme="dark"] .prep-inline h4 { color: var(--color-text); } .prep-inline .prep-fork-note { text-align: left; max-width: none; margin-bottom: var(--space-4); } .field-help { position: relative; display: inline-block; vertical-align: middle; } .field-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; padding: 0; border-radius: 50%; border: 1px solid var(--color-text-faint); background: transparent; color: var(--color-text-faint); font-size: 0.7rem; font-weight: 700; font-style: italic; line-height: 1; cursor: help; transition: all var(--transition); } .field-help-btn:hover, .field-help:focus-within .field-help-btn { border-color: var(--color-orange); color: var(--color-orange); } .field-help-bubble { position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); width: max-content; max-width: 17rem; background: var(--color-navy-dark); color: rgba(255,255,255,0.92); font-size: var(--text-xs); font-weight: 400; font-style: normal; line-height: 1.55; text-align: left; text-transform: none; letter-spacing: normal; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .field-help-bubble em { color: #fff; font-style: italic; } .field-help:hover .field-help-bubble, .field-help:focus-within .field-help-bubble { opacity: 1; visibility: visible; transform: translateY(0); } .form-row .form-group:last-child .field-help-bubble { left: auto; right: 0; } @media (max-width: 560px) { .field-help-bubble { left: 0; right: auto; max-width: min(17rem, calc(100vw - 5rem)); } } .prep-escape { margin-top: var(--space-3); text-align: left; } .label-hint { font-weight: 400; color: var(--color-text-faint); font-size: 0.85em; } [data-theme="dark"] .label-hint { color: var(--color-text-muted); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .label-hint { color: var(--color-text-muted); } } .success-date { font-weight: 700; color: var(--color-text) !important; } .success-details { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: left; } .success-details p { max-width: none; } .success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; } .success-actions .btn { justify-content: center; white-space: normal; text-align: center; } .success-actions .btn:first-child { grid-column: 1 / -1; } /* Compact conversion reminder shown after the hero leaves view. */ .sticky-register { position: fixed; left: 50%; bottom: var(--space-4); z-index: 1200; width: min(720px, calc(100% - 32px)); transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: rgba(3,15,36,0.97); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); transition: opacity var(--transition), transform var(--transition); } .sticky-register.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .sticky-register-copy { display: flex; flex-direction: column; min-width: 0; } .sticky-register-copy strong { color: white; font-size: var(--text-sm); } .sticky-register-copy span { color: rgba(255,255,255,0.68); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .success-actions { grid-template-columns: 1fr; } .success-actions .btn:first-child { grid-column: auto; } .sticky-register { width: 100%; left: 0; bottom: 0; transform: translateY(110%); border-radius: 0; padding: var(--space-3) var(--space-4); } .sticky-register.is-visible { transform: translateY(0); } .sticky-register-copy strong { font-size: 0.8rem; } .sticky-register-copy span { max-width: 180px; } .sticky-register .btn { padding: 0.65rem 1rem; } } /* Consolidated FAQ styles are at the bottom of the file */ /* Compact, always-visible homepage FAQ. The full FAQ page keeps its accordion. */ .home-faq-list { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); row-gap: 0; border-top: 1px solid var(--color-border); } .home-faq-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); } .home-faq-item h3 { font-size: var(--text-base); color: var(--color-text); margin-bottom: var(--space-2); } .home-faq-item p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; } @media (max-width: 700px) { .home-faq-list { grid-template-columns: 1fr; } .home-faq-item { padding: var(--space-4) 0; } } /* ========================================================= FOOTER ========================================================= */ .footer { background: var(--color-navy-dark); color: rgba(255,255,255,0.6); padding: var(--space-12) 0; border-top: 3px solid var(--color-orange); } .footer-inner { display: flex; flex-direction: column; gap: var(--space-6); } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .footer-tagline { font-size: var(--text-xs); color: rgba(255,255,255,0.6); margin-top: var(--space-1); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); } .footer-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--transition); } .footer-links a:hover { color: var(--color-orange); } .footer-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4) var(--space-8); margin: var(--space-4) 0; padding: var(--space-6) 0; border-top: 1px solid rgba(255,255,255,0.08); } .contact-item { display: flex; flex-direction: column; gap: var(--space-1); } .contact-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); font-weight: 600; } .contact-value { font-size: var(--text-sm); color: rgba(255,255,255,0.85); text-decoration: none; } .contact-value:hover[href] { color: var(--color-orange); } .footer-legal { font-size: var(--text-xs); color: rgba(255,255,255,0.3); line-height: 1.6; max-width: 80ch; border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-5); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Reveal via transition, not a keyframe animation. A transition degrades to an instant snap to the final value if it's throttled or unsupported, so content can never get trapped at opacity:0 (a running animation would freeze at its 0-opacity "from" state). Motion is pure enhancement over the visible end state. */ .animate-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); } .animate-in.visible { opacity: 1; transform: none; } /* Respect users who ask for reduced motion: show everything immediately and suppress non-essential animation/transition/scroll motion. */ @media (prefers-reduced-motion: reduce) { .animate-in, .animate-in.visible { opacity: 1 !important; animation: none !important; transform: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Skip link — hidden off-screen until focused, then pinned to the top-left. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 12px 18px; background: var(--color-navy, #0d1220); color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; outline: 3px solid var(--color-orange, #ff6b00); outline-offset: 2px; } /* Visible inline form validation messages. */ .field-error { color: #c62828; font-size: 0.85rem; line-height: 1.4; margin: 6px 0 0; } [data-theme="dark"] .field-error { color: #ff6b6b; } /* Visually-hidden live region for screen-reader status announcements. */ .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; } /* Staggered children */ .benefits-grid .benefit-card:nth-child(2) { transition-delay: 0.1s; } .benefits-grid .benefit-card:nth-child(3) { transition-delay: 0.2s; } /* Theme Toggle Button Sizing & Icons styling */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); padding: 0; } .theme-toggle:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-divider); transform: translateY(-1px); } .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } [data-theme="dark"] .theme-icon-sun { display: block; } [data-theme="dark"] .theme-icon-moon { display: none; } /* Mobile theme nav custom row layout */ .mobile-nav-theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; } .mobile-nav-theme-row .theme-toggle { flex-shrink: 0; } .mobile-nav-theme-row .btn { flex-grow: 1; } /* CSS Scroll-Driven Animations (header only). Content reveal is driven by JS IntersectionObserver so it can never get stuck hidden. */ @supports (animation-timeline: scroll()) { .header { animation: shrinkHeader linear both; animation-timeline: scroll(); animation-range: 0 80px; } @keyframes shrinkHeader { to { box-shadow: var(--shadow-md); background: rgba(255, 255, 255, 0.98); } } [data-theme="dark"] .header { animation: shrinkHeaderDark linear both; animation-timeline: scroll(); animation-range: 0 80px; } @keyframes shrinkHeaderDark { to { box-shadow: var(--shadow-md); background: rgba(13, 18, 32, 0.98); } } } /* ========================================================= RESPONSIVE MISC ========================================================= */ @media (max-width: 640px) { .hero-cta-group .btn { align-self: stretch; justify-content: center; } .hero-trust { justify-content: center; } } /* ========================================================= SUB-PAGE HERO (Unified Banner) ========================================================= */ .sub-hero { background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%); padding: clamp(var(--space-12), 8vw, var(--space-16)) 0; color: white; text-align: center; margin-bottom: 0; position: relative; overflow: hidden; } .sub-hero h1 { font-size: var(--text-2xl); color: white; margin-bottom: var(--space-4); font-weight: 700; } .sub-hero p { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.8); max-width: var(--content-narrow); margin: 0 auto; line-height: 1.6; } /* ========================================================= BLOG STYLES ========================================================= */ .blog-hero { /* Inherits from .sub-hero */ } .blog-hero h1 { font-size: var(--text-2xl); color: white; margin-bottom: var(--space-4); } .blog-hero p { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.7); max-width: var(--content-narrow); margin: 0 auto; } .blog-section { padding: var(--space-16) 0; background: var(--color-bg); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-8); } .blog-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); text-decoration: none; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); background: var(--color-surface-2); } .blog-card-meta { font-size: var(--text-xs); color: var(--color-orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .blog-card-title { font-size: var(--text-lg); color: var(--color-navy); font-weight: 700; line-height: 1.3; } [data-theme="dark"] .blog-card-title { color: var(--color-text); } .blog-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; } .blog-card-link { font-size: var(--text-sm); font-weight: 700; color: var(--color-orange); display: inline-flex; align-items: center; gap: var(--space-1); } .blog-card-link svg { transition: transform var(--transition); } .blog-card:hover .blog-card-link svg { transform: translateX(3px); } /* Individual Blog Post Layout */ .blog-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: var(--space-12); align-items: start; } /* Allow the article column to shrink below its content min-width so wide in-content elements (e.g. data tables) scroll inside .table-container instead of forcing the whole column wider than the viewport on mobile. */ .blog-layout > .blog-content-wrap { min-width: 0; } @media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; gap: var(--space-10); } } .breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-6); } .breadcrumbs a { color: var(--color-text-muted); } .breadcrumbs a:hover { color: var(--color-orange); } .breadcrumbs span { color: var(--color-text-faint); } .blog-post-header { margin-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-6); } .blog-post-header h1 { font-size: var(--text-2xl); color: var(--color-navy); margin-bottom: var(--space-3); line-height: 1.2; } [data-theme="dark"] .blog-post-header h1 { color: var(--color-text); } .blog-post-meta { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-4); } .blog-post-meta strong { color: var(--color-orange); } .blog-content { font-size: var(--text-base); line-height: 1.75; color: var(--color-text); } .blog-content p { margin-bottom: var(--space-5); } .blog-content h2 { font-size: var(--text-lg); color: var(--color-navy); margin-top: var(--space-10); margin-bottom: var(--space-4); font-weight: 700; } [data-theme="dark"] .blog-content h2 { color: var(--color-text); } .blog-content h3 { font-size: var(--text-base); color: var(--color-navy); margin-top: var(--space-6); margin-bottom: var(--space-3); font-weight: 700; } [data-theme="dark"] .blog-content h3 { color: var(--color-text); } .blog-content ul, .blog-content ol { margin-bottom: var(--space-6); padding-left: var(--space-6); } .blog-content li { margin-bottom: var(--space-2); } .blog-content a { text-decoration: underline; } .blog-content a:hover { color: var(--color-orange-hover); } .blog-content blockquote { border-left: 4px solid var(--color-orange); background: var(--color-surface); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; font-style: italic; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text-muted); } /* Tables styling inside blog post */ .table-container { width: 100%; overflow-x: auto; margin: var(--space-8) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .blog-content table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); color: var(--color-text-muted); } .blog-content th { background: var(--color-surface-2); color: var(--color-navy); font-weight: 700; padding: var(--space-4); border-bottom: 2px solid var(--color-divider); } [data-theme="dark"] .blog-content th { color: var(--color-text); } .blog-content td { padding: var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-text); } .blog-content tr:last-child td { border-bottom: none; } .blog-content tr:nth-child(even) { background: rgba(8,29,61, 0.02); } [data-theme="dark"] .blog-content tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } /* Sidebar sticky CTA */ .blog-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--space-6); } .blog-cta-card { background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); padding: var(--space-8); color: white; display: flex; flex-direction: column; gap: var(--space-5); box-shadow: var(--shadow-lg); } .blog-cta-card h3 { font-size: var(--text-lg); color: white; line-height: 1.3; } .blog-cta-card .accent { color: var(--color-orange); } .blog-cta-card p { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); line-height: 1.6; } .blog-cta-features { display: flex; flex-direction: column; gap: var(--space-3); } .blog-cta-feature { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.9); } .blog-cta-feature svg { color: var(--color-orange); flex-shrink: 0; } .blog-cta-card .btn { margin-top: var(--space-2); } /* ========================================================= REPORT MOCKUP CARD ========================================================= */ .mockup-card { margin-top: var(--space-6); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-md); } .mockup-card-body { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; } .mockup-image-container { display: block; width: 100%; max-width: 320px; margin: var(--space-2) auto var(--space-4) auto; transition: transform var(--transition); } .mockup-image-container:hover { transform: translateY(-4px) rotate(1deg) scale(1.02); } .mockup-img { width: 100%; height: auto; display: block; } .mockup-info { flex: 1; } .mockup-info h4 { font-size: var(--text-base); font-weight: 700; color: white; margin-bottom: var(--space-2); letter-spacing: -0.01em; } .mockup-title-link { color: white; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; transition: all var(--transition); } .mockup-title-link:hover { color: var(--color-orange); text-decoration-color: var(--color-orange); } .mockup-info p { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.65); line-height: 1.6; margin-bottom: var(--space-4); } .mockup-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } @media (max-width: 600px) { .mockup-list { display: inline-grid; text-align: left; } } @media (max-width: 400px) { .mockup-list { grid-template-columns: 1fr; } } .mockup-list li { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: var(--space-2); font-weight: 500; } .mockup-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; background-color: var(--color-orange); border-radius: 50%; flex-shrink: 0; } /* Keep registration anchors clear of the sticky header. */ #register { scroll-margin-top: 120px; } #save-your-seat { scroll-margin-top: 100px; } /* ========================================================= INDEPENDENCE DISCLAIMER BAR ========================================================= */ .disclaimer-bar { background: var(--color-navy-dark); padding: var(--space-1) 0; text-align: center; } .disclaimer-bar p { font-size: var(--text-xs); color: var(--color-orange); line-height: 1.5; margin: 0; } [data-theme="dark"] .disclaimer-bar { background: rgba(20, 25, 41, 0.6); } /* ========================================================= EDUCATIONAL DISCLAIMER (before form) ========================================================= */ /* Was a bordered grey box at the top of the form card. It now sits under the submit button beside the no-obligation note, so it inherits .form-note and only needs the italic to keep it distinct from that note. */ .edu-disclaimer { font-style: italic; padding-top: var(--space-1); } /* ========================================================= "WHAT THIS IS / WHAT THIS IS NOT" BLOCK ========================================================= */ .what-this-is { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin: var(--space-8) 0; } @media (max-width: 640px) { .what-this-is { grid-template-columns: 1fr; } } .what-this-is-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); } .what-this-is-card h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .what-this-is-card.is-card h3 { color: var(--color-success); } .what-this-is-card.isnot-card h3 { color: var(--color-text-muted); } .what-this-is-card ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .what-this-is-card li { font-size: var(--text-sm); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; line-height: 1.5; } .what-this-is-card.is-card li::before { content: '✓'; position: absolute; left: 0; color: var(--color-success); font-weight: 800; font-size: 0.75rem; top: 2px; } .what-this-is-card.isnot-card li::before { content: '✕'; position: absolute; left: 0; color: var(--color-text-faint); font-weight: 800; font-size: 0.75rem; top: 2px; } /* ========================================================= "WHAT HAPPENS AFTER I REGISTER?" SECTION ========================================================= */ .after-register { max-width: 760px; margin: 0 auto; } .after-register-inner { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); } .after-register-steps { display: flex; flex-direction: column; gap: var(--space-5); counter-reset: step; } .after-register-step { display: flex; align-items: flex-start; gap: var(--space-4); counter-increment: step; } .after-register-step::before { content: counter(step); width: 32px; height: 32px; background: var(--color-orange); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; } .after-register-step p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; padding-top: var(--space-1); } .after-register-step strong { color: var(--color-text); } /* ========================================================= TSP LANDING PAGE — HERO VARIANT ========================================================= */ .hero-tsp .hero-headline { font-size: var(--text-2xl); } .hero-tsp .hero-sub { font-size: var(--text-base); max-width: 48ch; } /* ========================================================= FAQ PAGE ========================================================= */ /* --- Category Headers --- */ .faq-category { scroll-margin-top: 100px; margin-top: var(--space-16); } .faq-category:not(:first-child) { border-top: 1px solid var(--color-border); padding-top: var(--space-10); } .faq-category:first-child { margin-top: 0; } .faq-category h2 { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-navy); margin-bottom: var(--space-6); display: flex; align-items: center; line-height: 1.1; gap: var(--space-3); } .faq-category h2::before { content: ''; width: 4px; height: 22px; background: var(--color-orange); border-radius: 2px; flex-shrink: 0; } .faq-list { display: flex; flex-direction: column; gap: var(--space-4); } .faq-item:last-child { margin-bottom: 0; } /* --- FAQ Items (Accordion) --- */ .faq-item { border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: var(--space-4); background: var(--color-bg); transition: all 0.2s ease; /* Removed overflow:hidden to prevent border clipping */ } .faq-item:hover { border-color: var(--color-navy-light); box-shadow: 0 4px 12px rgba(8,29,61, 0.08); } .faq-item[open] { border-color: var(--color-orange); box-shadow: 0 4px 15px rgba(212,172,44, 0.1); margin-bottom: var(--space-6); } .faq-item summary { padding: var(--space-5) var(--space-6); font-size: var(--text-base); font-weight: 600; color: var(--color-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); line-height: 1.4; transition: color 0.2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 700; color: var(--color-orange); flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-orange-light); transition: transform 0.2s, background 0.2s; } .faq-item[open] summary::after { content: '−'; background: var(--color-orange); color: white; transform: rotate(180deg); } .faq-item summary:hover { color: var(--color-navy); } /* --- FAQ Answer --- */ .faq-answer { padding: 0 var(--space-6) var(--space-6); } .faq-answer p { font-size: var(--text-base); line-height: 1.7; color: var(--color-text); margin-bottom: var(--space-4); } .faq-answer p:last-child { margin-bottom: 0; } .faq-source { font-size: var(--text-sm) !important; color: var(--color-text-muted) !important; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .faq-source a { color: var(--color-orange); text-decoration: none; font-weight: 500; } .faq-source a:hover { text-decoration: underline; } /* --- FAQ CTA --- */ .faq-cta { background: var(--color-surface); border-top: 1px solid var(--color-border); } /* --- Responsive --- */ @media (max-width: 768px) { .faq-item summary { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); } .faq-answer { padding: 0 var(--space-5) var(--space-5); } .faq-category h2 { font-size: var(--text-lg); } .faq-category { scroll-margin-top: 80px; } } /* ========================================================================== Site search (public content: blog, FAQ, reference, glossary) Header search icon + modal. Markup injected by script.js. ========================================================================== */ .nav-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); padding: 0; } .nav-search-btn:hover { background: var(--color-surface-2); color: var(--color-text); transform: translateY(-1px); } .mobile-search-btn { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 500; cursor: pointer; text-align: left; } .mobile-search-btn:hover { background: var(--color-surface-2); } /* Modal */ .site-search { position: fixed; inset: 0; z-index: 3000; display: flex; justify-content: center; align-items: flex-start; padding: clamp(var(--space-6), 8vh, var(--space-24)) var(--space-4) var(--space-6); } .site-search[hidden] { display: none; } body.search-open { overflow: hidden; } .site-search-backdrop { position: absolute; inset: 0; background: rgba(3,15,36, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .site-search-panel { position: relative; width: 100%; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: ssPop 0.14s ease-out; } @keyframes ssPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .site-search-panel { animation: none; } } .site-search-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .site-search-icon { color: var(--color-text-muted); flex-shrink: 0; } .site-search-input { flex: 1; min-width: 0; border: none; background: none; font-size: var(--text-base); color: var(--color-text); outline: none; padding: var(--space-1) 0; } .site-search-input::placeholder { color: var(--color-text-faint); } .site-search-close { flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; padding: 3px 8px; cursor: pointer; } .site-search-close:hover { background: var(--color-surface-2); color: var(--color-text); } .site-search-results { overflow-y: auto; padding: var(--space-2); } .site-search-msg { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-8) var(--space-4); margin: 0; } .site-search-result { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; } .site-search-result:hover, .site-search-result.is-active { background: var(--color-surface); } .site-search-result.is-active { outline: 2px solid var(--color-orange); outline-offset: -2px; } .ss-badge { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 8px; border-radius: var(--radius-full); margin-top: 2px; min-width: 72px; text-align: center; } .ss-badge--Blog { background: #E3E9F3; color: #1B3A66; } .ss-badge--FAQ { background: #F6EED6; color: #8F6E14; } .ss-badge--Reference { background: #E4EFE6; color: #1A6B45; } .ss-badge--Glossary { background: #EDE7F2; color: #5C3A85; } [data-theme="dark"] .ss-badge--Blog { background: #1A2545; color: #A9BEF0; } [data-theme="dark"] .ss-badge--FAQ { background: #2D1A0F; color: #F0B27A; } [data-theme="dark"] .ss-badge--Reference { background: #10241A; color: #7FCFA6; } [data-theme="dark"] .ss-badge--Glossary { background: #201633; color: #C3A6E8; } .ss-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ss-title { font-weight: 600; font-size: var(--text-sm); line-height: 1.35; } .ss-title mark { background: var(--color-orange-light); color: inherit; padding: 0 1px; border-radius: 2px; } [data-theme="dark"] .ss-title mark { background: #3A2410; } .ss-meta { font-size: var(--text-xs); color: var(--color-text-faint); } @media (max-width: 520px) { .ss-badge { min-width: 58px; font-size: 0.625rem; } } /* ========================================================= EXECUTIVE THEME — refinement layer --------------------------------------------------------- Everything above is the original layout, now driven by the new tokens. This block handles the things a token swap alone cannot express: the paper texture, the serif display voice, and the fact that the CTA colour changed from a dark orange to a light gold (so text on it has to flip from white to navy). Kept at the end of the file, and additive, so the layout above stays the single source of truth for structure. ========================================================= */ /* --- The CTA colour is now light: white text on gold fails contrast -------- Every button that used the old orange keeps its rule; only the ink flips. */ .btn-primary, .btn-primary:visited { background: var(--color-orange); color: var(--color-navy); border-color: var(--color-orange); font-weight: 600; letter-spacing: 0.01em; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--color-orange-hover); border-color: var(--color-orange-hover); color: var(--color-navy); } [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:hover { color: #06111F; } /* --- Display voice: Playfair, navy, tight --------------------------------- The old theme set headings in a display face already; this pins the colour and tracking so the serif reads as deliberate rather than substituted. */ h1, h2, h3, .section-title, .hero h1 { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.12; } h1, h2, h3, .section-title { color: var(--color-navy); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] .section-title { color: var(--color-text); } /* Headings that sit on a navy panel must not inherit navy ink. */ .on-navy h1, .on-navy h2, .on-navy h3, .hero h1, .hero h2, .footer h1, .footer h2, .footer h3, .footer h4 { color: var(--cream); } /* --- Warm paper ground ---------------------------------------------------- Layered soft gradients rather than a bitmap: no extra request, and it scales to any viewport. Fixed attachment keeps it from sliding under long pages. */ body { background-color: var(--color-bg); background-image: radial-gradient(circle at 18% 14%, rgba(255,255,255,0.34) 0%, transparent 56%), radial-gradient(circle at 82% 82%, rgba(255,255,255,0.18) 0%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 40%); background-attachment: fixed; } [data-theme="dark"] body { background-image: radial-gradient(circle at 18% 14%, rgba(255,255,255,0.05) 0%, transparent 56%), radial-gradient(circle at 82% 82%, rgba(212,172,44,0.05) 0%, transparent 60%); } /* --- Shared accent utilities --------------------------------------------- Also used by the injected site header, so they must live in this file rather than only in the homepage's stylesheet. */ .utility-bar { /* Not var(--navy-deep): in dark mode that equals the page background and the strip disappears. An explicit navy keeps it legible in both themes. */ background: #030F24; color: rgba(245,239,224,0.82); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; padding: 7px var(--space-4); } .eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; color: var(--gold-ink); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: var(--space-4); } .gold-rule { width: 64px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border: 0; } .italic-gold { font-style: italic; font-family: var(--font-display); color: var(--gold-warm); } [data-theme="dark"] .utility-bar { background: #0C1B2E; border-bottom: 1px solid #1E3452; } .on-navy { background: var(--navy-deep); color: rgba(245,239,224,0.94); } /* On navy the bright gold is the legible one (6.42:1); the dark gold is not. */ .on-navy .eyebrow, .hero .eyebrow, .footer .eyebrow, [data-theme="dark"] .eyebrow { color: var(--gold-warm); } .on-cream { background: var(--color-bg); } .on-cream-soft { background: var(--color-surface-2); } /* --- One card radius sitewide -------------------------------------------- The design sets every card to 14px and reserves 6px for small controls (inputs, buttons, tags). --radius-xl is 14px here. Getting this wrong is what made the contact page's message card disagree with the info cards directly beneath it. */ .card, .benefit-card, .blog-card, .link-card, .glossary-item, .faq-item, .form-card, .tool-card, .term-card, .resource-card, .contact-info-card { border-radius: var(--radius-xl); } /* A gold hairline is the theme's signature; apply it where the old theme used an orange accent bar. */ .section-header::after, .hero-eyebrow { border-color: var(--gold); } /* --- Brand lockup in the injected site header ----------------------------- Mirrors the homepage header exactly (mark + name + role line) so the two never drift. The old full-wordmark logo is retired from the header; the mark plus set type scales far better at small sizes. Values match css/style.css so the two headers are pixel-identical. */ .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; } .brand-name { font-family: var(--font-display); font-weight: 700; color: var(--color-navy); font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.15; } .brand-name small { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; color: var(--gold-warm); letter-spacing: 0.14em; text-transform: uppercase; } [data-theme="dark"] .brand-name { color: var(--color-text); } @media (max-width: 480px) { .brand-name { font-size: 0.95rem; } .brand-name small { font-size: 0.6rem; letter-spacing: 0.1em; } } /* --- Cards lift off the parchment ---------------------------------------- The old theme drew cards in --color-bg, which was white on a white page: the border did all the work. On parchment that reads as flat, so cards move to the lighter cream surface and keep the warm border. */ .faq-item, .card, .benefit-card, .blog-card, .link-card, .glossary-item, .term-card, .resource-card { background: var(--color-surface); } /* --- Blog "quick answer" capsule ----------------------------------------- Used by four posts to hold the short, direct answer near the top. It had no styling at all, so it read as ordinary body copy and lost its job of being visually findable. Gold edge, cream panel, same vocabulary as the rest. */ .answer-capsule { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--gold); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; box-shadow: var(--shadow-sm); } .answer-capsule > :first-child { margin-top: 0; } .answer-capsule > :last-child { margin-bottom: 0; } /* --- Anything sitting ON the gold takes navy ink -------------------------- The old orange was dark enough for white labels; gold is not (white on #D4AC2C is 2.16:1 and fails outright). .btn-primary was handled above; these are the remaining gold grounds -- badges, counters, the active sidebar item, the open-accordion marker -- which inherited `color: white` from the orange era. Navy on gold is 7.77:1. */ .sidebar-nav-item.active, .btn-outline:hover, .host-badge, .after-register-step::before, .faq-item[open] summary::after, .step-number { color: var(--color-navy); } [data-theme="dark"] .sidebar-nav-item.active, [data-theme="dark"] .btn-outline:hover, [data-theme="dark"] .host-badge, [data-theme="dark"] .after-register-step::before, [data-theme="dark"] .faq-item[open] summary::after, [data-theme="dark"] .step-number { color: #06111F; } /* Inline glossary-term hover: a 10% gold wash was set against a white page and barely registers on parchment. */ .glossary-link:hover { background-color: rgba(212,172,44,0.28) !important; } /* --- Cards and floating panels must not wear the page ground -------------- These all set `background: var(--color-bg)`, which was white when the page was white: a card drawn in the page colour reads fine when its shadow does the separating. On parchment it is tan-on-tan. Anything that is meant to sit ON the page -- a card, a dropdown, the search overlay -- moves to the cream surface, which also lifts correctly in dark mode (#0C1B2E over #06111F). .blog-section deliberately keeps the page ground: it IS the page, not a card. */ .host-card, .host-stat-card, .nav-dropdown-menu, .site-search-panel, .mobile-nav { background: var(--color-surface); } /* --- Reading sheet for long-form pages ------------------------------------ Parchment is a pleasant page ground but a poor one to read several hundred words off: the contrast under body copy is lower than under a white page, and there is nothing to bound the measure. These four pages are prose walls, so the text now sits on a lighter sheet with the parchment showing as margins either side. Deliberately NOT applied to /faq/, /glossary/ or /resources/: those are lists of cream cards already, and a sheet under them would just stack two panels. Cards placed ON a sheet stay legible because --sheet-bg is lighter than --color-surface, and they keep their borders. */ .blog-content-wrap, .about-container, .terms-container, .privacy-container { background: var(--sheet-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-12) var(--space-12) var(--space-10); } /* .about-container carried its own max-width/padding; keep the measure but let the sheet supply the inner padding. */ .about-container { max-width: 900px; margin: 0 auto; } @media (max-width: 860px) { .blog-content-wrap, .about-container, .terms-container, .privacy-container { padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); } } @media (max-width: 560px) { .blog-content-wrap, .about-container, .terms-container, .privacy-container { /* Below this the margins cost more than they give: go edge to edge. */ padding: var(--space-6) var(--space-5); border-radius: 0; border-left: 0; border-right: 0; } } /* Cards sitting ON a reading sheet: the sheet is deliberately close to the card fill (both are near-white), so the fill alone no longer separates them. Give those a firmer edge and let their accent do the rest. */ .blog-content-wrap .answer-capsule, .blog-content-wrap .blog-cta-card, .about-container .process-step, .about-container .independence-card, .terms-container .callout, .privacy-container .callout { border-color: var(--color-divider); } /* border-color above sets all four sides, which flattened the gold accent stripe on the cards that have one. Put it back. */ .blog-content-wrap .answer-capsule, .about-container .independence-card { border-left-color: var(--gold); } /* Small screens: the wordmark is very wide, so it has to shrink before the burger button does. */ @media (max-width: 640px) { .logo-img { height: 34px; max-width: 240px; } } @media (max-width: 400px) { .logo-img { height: 28px; max-width: 190px; } }