/* ========================================================================== SubjectRX — global.css Single source of truth for tokens, reset, typography, layout, navigation, footer, buttons, forms, reveals, and shared utilities. Page-specific CSS files import nothing from here — they rely on this file being linked first in every page . ========================================================================== */ /* ───────────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS ───────────────────────────────────────────────────────────────────────── */ :root { /* Brand greens */ --g: #0C5642; --g-lift: #156650; --g-deep: #093F32; --g-dark: #072F24; --g-cta: #0A4A39; --g-hover: #0A4738; /* Shared hero gradient — source of truth for all green gradient elements */ --g-gradient: linear-gradient(135deg, #156650 0%, #0C5642 42%, #093F32 100%); /* Surfaces */ --cream: #F1ECE4; --surf: #F7F4EE; --white: #FFFFFF; /* Borders */ --bdr: #D6CFC4; --bdr-lt: #E2DCD4; /* Ink */ --ink: #22302B; --ink-ft: #1D2925; --muted: #475A53; /* Accent */ --sage: #6E9282; --sage-lt: #DCE9E4; --btn-fill: #EAF2ED; /* Form states */ --focus: #2E6A57; --err: #B94040; --err-bg: #FDF4F4; --ok: #2E7D5A; /* Nav height placeholder — overwritten by JS */ --nav-h: 52px; } /* ───────────────────────────────────────────────────────────────────────── 2. RESET & BASE ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; /* Prevent iOS font-size inflation */ -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--ink); overflow-x: hidden; min-height: 100dvh; } a { text-decoration: none; color: inherit; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; } ul, ol { list-style: none; } /* Remove default button appearance */ button { background: none; border: none; cursor: pointer; padding: 0; } /* Focus-visible: only show outline on keyboard navigation */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────── 3. LAYOUT ───────────────────────────────────────────────────────────────────────── */ .wrap { max-width: 1080px; margin: 0 auto; padding: 0 44px; } @media (max-width: 768px) { .wrap { padding: 0 22px; } } /* ───────────────────────────────────────────────────────────────────────── 4. TYPOGRAPHY ───────────────────────────────────────────────────────────────────────── */ /* Eyebrow label — DM Mono, uppercase, muted sage */ .eyebrow { font-family: 'DM Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); display: block; margin-bottom: 16px; } /* Section heading — Inter light with Cormorant em */ .h2 { font-family: 'Inter', sans-serif; font-size: clamp(17px, 1.7vw, 21px); font-weight: 300; line-height: 1.24; letter-spacing: -.01em; color: var(--ink); } .h2 em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.22em; letter-spacing: -.005em; } /* Body copy */ .body-copy { font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 400; line-height: 1.76; color: var(--muted); margin-bottom: 16px; } .body-copy:last-child { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────────────────── 5. BUTTON SYSTEM All variants share .btn base. Context variants are additive modifiers. ───────────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; border-radius: 3px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; padding: 12px 26px; /* Prevent text-size override by page CSS */ line-height: 1; } /* Primary — sage fill on light backgrounds */ .btn-primary { background: var(--btn-fill); color: var(--g); border-color: transparent; } .btn-primary:hover { background: var(--sage-lt); } /* Secondary — ghost on dark backgrounds */ .btn-secondary { background: transparent; color: rgba(255, 255, 255, .84); border-color: rgba(255, 255, 255, .3); } .btn-secondary:hover { border-color: rgba(255, 255, 255, .65); color: var(--white); } /* Outline — ghost on light backgrounds */ .btn-outline { background: transparent; color: var(--g); border-color: rgba(12, 86, 66, .3); } .btn-outline:hover { background: var(--sage-lt); border-color: var(--g); } /* Submit — gradient brand green; used for all form submit actions */ .btn-submit { background: var(--g-gradient); color: var(--white); border-color: transparent; } .btn-submit:hover { background: linear-gradient(135deg, #1a7a5e 0%, #156650 42%, #0C5642 100%); } .btn-submit:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* Focus states for all .btn variants */ .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* ───────────────────────────────────────────────────────────────────────── 6. SCROLL REVEAL ANIMATION Elements marked .reveal are invisible by default. IntersectionObserver in global.js adds .visible when they enter viewport. Delay utilities .d1–.d4 stagger sibling elements. ───────────────────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; } /* Reduced motion: remove transforms and shorten all transitions site-wide. .reveal opacity is kept so content still fades in — just without movement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { transform: none; transition: opacity .3s ease !important; } .mob-menu { transform: none; transition: opacity .15s ease, visibility 0s linear .15s !important; } .mob-menu.open { transition: opacity .15s ease, visibility 0s linear 0s !important; } } /* ───────────────────────────────────────────────────────────────────────── 7. NAVIGATION Fixed top bar. Dark brand green. Logo + links + CTA button + hamburger. Nav CTA is hidden on /contact and /thank-you via .no-nav-cta body class. ───────────────────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--g-lift); } .nav-inner { max-width: 1080px; margin: 0 auto; padding: 15px 44px; } .nav-content { display: flex; align-items: center; } .nav-logo { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: var(--white); letter-spacing: -.025em; margin-right: 52px; flex-shrink: 0; transition: opacity .15s; } .nav-logo:hover { opacity: .8; } .nav-links { display: flex; align-items: center; gap: 28px; margin-right: auto; /* nav-links is a