/* ───────────────────────────────────────────────────────────────── React variant A — full design system port (v2) ───────────────────────────────────────────────────────────────── Direct port of: src/components/VariationLayout.tsx (nav + footer chrome) src/pages/VariationPage.tsx (Hero, Stats, Sec, Programs, CTA) src/index.css (.var-a tokens + font-brand) Strategy: namespaced .ra-* classes so this coexists with the existing site CSS. Pages that adopt this design use class="ra-page" on , and use .ra-* class names instead of the site's own. ───────────────────────────────────────────────────────────── */ /* ─── Brand font: RR Beaver (used by VariationLayout's logo wordmark) ─── */ @font-face { font-family: 'RR Beaver'; src: url('../fonts/RRBeaver.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ─── Google Fonts: DM Sans + Inter + Quicksand (variation A's stack) ─── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Inter:wght@400;500;600&family=Quicksand:wght@500;600;700&display=swap'); /* ─── Design tokens ───────────────────────────────────────────────────────────────── In Space Universe — Final Brand Palette (2026): - In Space Blue #42A5F5 (primary, used site-wide) - Orbit White #FFFFFF - Cosmic Black #000000 (footer background, dark text) - Academy Blue #1565C0 (RESERVED — academy page only) - Institutional Blue #2B5073 (RESERVED — academy page only) Brand colors are exposed as --ra-color-* tokens (do not redefine on a per-page basis). The semantic React-A tokens below map onto those brand colors. Academy overrides only the semantic tokens it's allowed to use (the two academy-only blues + neutral ash). ───────────────────────────────────────────────────────────── */ .ra-page { /* ── Brand palette (canonical, do not override per page) ── */ --ra-color-blue: #42A5F5; /* In Space Blue */ --ra-color-orbit: #FFFFFF; /* Orbit White */ --ra-color-black: #000000; /* Cosmic Black */ --ra-color-academy: #1565C0; /* Academy Blue (academy page only) */ --ra-color-institute: #2B5073; /* Institutional Blue (academy page only) */ /* ── Semantic tokens (mapped from brand) ── */ --ra-bg: #FFFFFF; /* page background — pure white so the marquee's transparent edge-zones and plain sections match the React build (was #FAFAFA, which left a slight gray cast around the marquee) */ --ra-surface: #FFFFFF; --ra-surface-alt: #F0F4F8; /* pale band — used above the footer on the home page and now for every 'Ready to Launch'-style strip too */ --ra-text: #1A1A1A; --ra-text-sec: #5A6A7A; --ra-text-muted: #8899AA; --ra-accent: var(--ra-color-blue); --ra-accent-light: #90CAF9; --ra-accent-dark: #1976D2; /* slightly darker In Space Blue for hover — NOT Academy Blue, which is reserved */ --ra-accent-warm: #BBDEFB; --ra-border: #E0E8F0; --ra-border-dark: #C0D0E0; --ra-hero-bg: #E8F0F8; --ra-dark-bg: #000000; /* Footer + dark strips now Cosmic Black (was navy #0A1628 in earlier versions) */ background: var(--ra-bg); color: var(--ra-text); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; } /* Reset any padding the site-overrides.css might force on body */ body.ra-page { padding: 0; } /* ─── Prevent horizontal page-scrollbar from the marquee 100vw trick ─── The marquee uses width:100vw + margin-left:calc(50% - 50vw) to break out of any container. When a vertical scrollbar is present, 100vw includes the scrollbar width while the body doesn't, causing a few pixels of horizontal overflow. Hiding overflow-x at the html level eliminates the spurious horizontal scrollbar without breaking the full-bleed layout. */ html:has(body.ra-page) { overflow-x: hidden; } /* Fallback for browsers without :has() (a tiny fraction in 2026, but) */ body.ra-page { overflow-x: hidden; } /* ─── Minimal scrollbar styling ─── */ /* Firefox + modern browsers — thin scrollbar with custom colors */ body.ra-page, body.ra-page * { scrollbar-width: thin; scrollbar-color: rgba(66, 165, 245, 0.4) transparent; } /* WebKit browsers (Chrome, Safari, Edge) — explicit minimal styling */ body.ra-page::-webkit-scrollbar, body.ra-page *::-webkit-scrollbar { width: 8px; height: 8px; } body.ra-page::-webkit-scrollbar-track, body.ra-page *::-webkit-scrollbar-track { background: transparent; } body.ra-page::-webkit-scrollbar-thumb, body.ra-page *::-webkit-scrollbar-thumb { background: rgba(66, 165, 245, 0.4); /* In Space Blue at 40% */ border-radius: 100px; transition: background 0.2s; } body.ra-page::-webkit-scrollbar-thumb:hover, body.ra-page *::-webkit-scrollbar-thumb:hover { background: rgba(66, 165, 245, 0.7); } body.ra-page::-webkit-scrollbar-corner, body.ra-page *::-webkit-scrollbar-corner { background: transparent; } /* ─── Type utility classes ─── */ .ra-font-headline { font-family: 'DM Sans', system-ui, sans-serif; } .ra-font-body { font-family: 'Inter', system-ui, sans-serif; } .ra-font-ui { font-family: 'Quicksand', system-ui, sans-serif; } .ra-font-brand { font-family: 'RR Beaver', system-ui, sans-serif; } .ra-font-mono-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; } /* ═════════════════════════════════════════════════════════════ NAV — port of VariationLayout's