/* ========================================================================== RANKING FRONTIER — Design System · Base -------------------------------------------------------------------------- Global tokens, reset, typography and layout primitives. Component styles live in css/components.css. Tokens override guide (per-page theming): :root { --color-accent: #2F6BFF; } → swap accent site-wide Breakpoints used across the system: 1080px → desktop nav ↔ mobile menu 1024px → hero/why split layouts collapse 1000px → 4-col grids → 2-col 900px → 3-col grids → 2-col 680px → 2-col grids → 1-col 560px → 2-col grids → 1-col / buttons full width ========================================================================== */ /* -------------------------------------------------------------------------- Self-hosted Manrope variable font (latin subset — preloaded in ) -------------------------------------------------------------------------- */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Brand palette — restrained, premium. One accent only. */ --color-ink-950: #0A1220; /* primary deep navy / near-black */ --color-ink-900: #0E1726; --color-ink-800: #16233A; --color-ink-700: #22334D; --color-ink-600: #3D4E68; /* body text */ --color-ink-500: #5A6B85; /* muted text (AA on white) */ --color-ink-400: #64748B; /* muted text — 4.77:1 on white (AA) */ --color-ink-300: #A6B2C4; --color-paper: #FFFFFF; /* page background */ --color-surface: #FFFFFF; /* card background */ --color-surface-2: #F6F8FB; /* soft band background */ --color-surface-3: #EEF3F8; /* deeper band / image fallback */ --color-line: #E6EBF2; /* hairline borders */ --color-line-strong: #D5DDE8; --color-accent: #2F6BFF; /* single electric accent */ --color-accent-strong: #1D56E8; /* accent hover */ --color-accent-soft: #EAF0FF; /* tinted surfaces */ --color-accent-soft-2: #D9E4FF; --color-on-accent: #FFFFFF; /* Dark (navy) surfaces — CTA panel, footer */ --color-night: #0A1220; --color-night-2: #0D1829; --color-night-raised: #132032; --color-night-line: rgba(255, 255, 255, 0.09); --color-night-line-strong: rgba(255, 255, 255, 0.16); --color-night-text: #E9EEF6; --color-night-muted: #A5B1C4; --color-night-muted-2: #8494AC; /* Typography */ --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --text-hero: clamp(2.375rem, 1.45rem + 3.9vw, 4.375rem); /* 38 → 70 */ --text-h2: clamp(1.75rem, 1.3rem + 2.05vw, 2.625rem); /* 28 → 42 */ --text-h3: 1.25rem; --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --text-body: 1rem; --text-sm: 0.9375rem; --text-xs: 0.8125rem; /* Layout */ --container-max: 1200px; --container-gutter: clamp(20px, 4vw, 32px); --section-pad: clamp(72px, 9.5vw, 116px); --header-h: 76px; /* Radii */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-btn: 10px; --radius-pill: 999px; /* Elevation */ --shadow-xs: 0 1px 2px rgba(10, 18, 32, 0.05); --shadow-sm: 0 2px 6px rgba(10, 18, 32, 0.06); --shadow-md: 0 10px 30px -12px rgba(10, 18, 32, 0.16); --shadow-lg: 0 24px 56px -20px rgba(10, 18, 32, 0.22); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 160ms; --t-med: 260ms; /* Focus */ --focus-ring: 2px solid var(--color-accent); --focus-ring-light: 2px solid #9FB9FF; /* Form states */ --color-error: #B42318; --color-error-soft: #FEF3F2; } @media (max-width: 560px) { :root { --header-h: 64px; } } /* -------------------------------------------------------------------------- 2. Modern reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.65; color: var(--color-ink-600); background: var(--color-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } [hidden] { display: none !important; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: var(--color-accent); text-decoration: none; } ::selection { background: var(--color-accent-soft); color: var(--color-ink-950); } /* Global focus visibility — keyboard friendly */ :focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 4px; } .on-dark :focus-visible, .site-footer :focus-visible { outline: var(--focus-ring-light); } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--color-ink-950); font-weight: 750; line-height: 1.15; letter-spacing: -0.018em; text-wrap: balance; } h1 { font-size: var(--text-hero); font-weight: 800; line-height: 1.06; letter-spacing: -0.028em; } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); line-height: 1.3; } h4 { font-size: 1.0625rem; line-height: 1.35; } p { max-width: 68ch; } .lead { font-size: var(--text-lead); line-height: 1.7; color: var(--color-ink-500); } .small { font-size: var(--text-sm); } .tiny { font-size: var(--text-xs); } strong { font-weight: 700; color: var(--color-ink-900); } /* Eyebrow label above section headings */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; } .eyebrow--center::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; } .eyebrow--light { color: #8FB2FF; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); } .section { padding-block: var(--section-pad); } .section--band { background: var(--color-surface-2); } /* Section header block */ .section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center p { margin-inline: auto; } .section-head h2 { margin-bottom: 16px; } .section-head .eyebrow { margin-bottom: 16px; } /* Grids */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Responsive stacking — cards collapse column-by-column */ @media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .grid--4 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .grid--3 { grid-template-columns: 1fr; } } /* CSS-only visual path (part of the original scaffold) */ .stack > * + * { margin-top: var(--stack-gap, 24px); } /* Split layout */ .split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: start; } /* -------------------------------------------------------------------------- 5. Utilities -------------------------------------------------------------------------- */ .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; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 20px; background: var(--color-ink-950); color: #fff; font-weight: 700; font-size: var(--text-sm); border-radius: var(--radius-sm); transform: translateY(-200%); transition: transform var(--t-fast) var(--ease); } .skip-link:focus-visible { transform: translateY(0); outline-offset: 2px; } .on-dark { color: var(--color-night-text); } .text-muted { color: var(--color-ink-500); } /* Reveal-on-scroll — only active when JS is available (.js, see index.html) */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal].in-view { opacity: 1; transform: none; } /* Staggered children of grids */ .js .reveal-group > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .reveal-group > :nth-child(1) { transition-delay: 0ms; } .js .reveal-group > :nth-child(2) { transition-delay: 80ms; } .js .reveal-group > :nth-child(3) { transition-delay: 160ms; } .js .reveal-group > :nth-child(4) { transition-delay: 240ms; } .js .reveal-group > :nth-child(5) { transition-delay: 320ms; } .js .reveal-group > :nth-child(6) { transition-delay: 400ms; } .js .reveal-group.in-view > * { opacity: 1; transform: none; } /* Reduced motion: disable all non-essential animation */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal], .js .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* In case JS is disabled, nothing is ever hidden */ .no-js [data-reveal], .no-js .reveal-group > * { opacity: 1 !important; transform: none !important; }