/* Roven Systems — base.css Reset, element defaults, responsive type scale, section/wrap layout, buttons and small utilities. Marketing site only. Loads after tokens.css, before site.css. */ /* ───────────────────────────────────────────────────────────────────── 1. Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Horizontal safety net lives here, not on : `clip` on the body makes it a clip container, which scopes position:sticky to the body box and stops the nav from ever pinning. */ overflow-x: clip; /* Sticky nav is 72px; keep in-page anchors clear of it. */ scroll-padding-top: 96px; } /* The mobile bar is 56px (see .nav-inner below 47.99em); 96 overshoots. */ @media (max-width: 47.99em) { html { scroll-padding-top: 76px; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; font-weight: 400; color: var(--ink); /* Every page opens and closes on a dark band; a white body would flash at the top and leave a white strip under a short page's footer. */ background: #0A0A0C; min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* Lists are layout by default here; the only bulleted lists on the site are inside .doc, which opts back in. */ ul, ol { list-style: none; margin: 0; padding: 0; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* Links are undecorated by default; prose links opt back in via .doc. */ a { color: inherit; text-decoration: none; } main { flex: 1 0 auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* On every dark surface the indigo ring is 2.87:1 against the hero mesh — below SC 1.4.11's 3:1 — and on .btn-primary it is literally the same colour as the fill it is meant to outline. Light lilac is ~11:1 on #0A0A0C and is already the site's established on-dark accent. */ .section--dark :focus-visible, .nav :focus-visible, .nav-panel :focus-visible, .site-footer :focus-visible, .glass-panel :focus-visible, .skip-link:focus-visible { outline-color: #C9C2FF; } ::selection { background: var(--accent); color: var(--on-accent); } /* ───────────────────────────────────────────────────────────────────── 2. Responsive type scale Tokens hold the desktop maximum; these locals fluidly scale down so nothing overflows at 375px. tokens.css itself is never edited. ──────────────────────────────────────────────────────────────────── */ :root { /* The --fs-* locals are the fluid curve for the desktop maxima the --text-* tokens hold; the caps must MATCH those tokens or the design doc stops describing the site. --fs-hero previously capped at 5rem against --text-hero's 5.5rem and did not even reach 5rem until a 1550px viewport, which rendered the hero at 76.5px. The 4.1vw slope puts it at the full 88px by 1440. The copy column is widened to suit (site.css §3). */ --fs-hero: clamp(2.5rem, 1.9rem + 4.1vw, 5.5rem); --fs-h1: clamp(2.25rem, 1.35rem + 3.9vw, 3.5rem); --fs-h2: clamp(1.875rem, 1.35rem + 2.3vw, 2.5rem); --fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --shadow-sm: 0 1px 2px rgba(10, 10, 12, 0.06); } .t-hero { font-size: var(--fs-hero); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; } /* `balance` on a 3-line hero at 375 evens the lines by orphaning a two-word leading line ("You set / the budget."). `pretty` only guards the last line, which is what a narrow hero actually needs. */ @media (max-width: 47.99em) { .t-hero { text-wrap: pretty; } } .t-h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 800; letter-spacing: -0.028em; text-wrap: balance; } .t-h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; } /* --fs-h3 is consumed by .doc h2 and .promise h3; the matching class has to exist or the first `class="t-h3"` anyone writes silently does nothing. */ .t-h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .t-h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; } .t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--section-ink-soft, var(--ink-soft)); max-width: var(--prose-max); } .t-small { font-size: var(--text-small); line-height: 1.5; } .t-caption { font-family: var(--font-mono); font-size: var(--text-caption); line-height: 1.4; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--section-ink-soft, var(--ink-soft)); } /* The one editorial flourish: Fraunces, italic, 1–2 words per headline. */ .em { font-family: var(--font-display-italic); font-style: italic; font-weight: 500; letter-spacing: -0.01em; /* Fraunces runs small next to Inter 800 — nudge it back up. */ font-size: 1.04em; } /* ───────────────────────────────────────────────────────────────────── 3. Full-bleed section + wrapper ──────────────────────────────────────────────────────────────────── */ .section { position: relative; width: 100%; padding-block: var(--space-10); background: var(--section-bg); color: var(--section-ink); } .section > .wrap { position: relative; z-index: 1; /* min-width:0 is load-bearing: .wrap is a flex/grid item in some sections, where the default min-width:auto would refuse to shrink below min-content and push the page wider than the viewport. */ min-width: 0; max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--space-8); } @media (max-width: 63.99em) { .section { padding-block: var(--space-9); } .section > .wrap { padding-inline: var(--space-6); } } @media (max-width: 47.99em) { .section { padding-block: var(--space-8); } .section > .wrap { padding-inline: var(--space-5); } } /* Grid and flex children default to min-width:auto and will happily overflow a narrow viewport. Opt every layout child out of that. */ .hero-grid > *, .budget-grid > *, .product-grid > *, .steps > *, .metric-band > *, .promises > *, .footer-grid > * { min-width: 0; } @media (min-width: 80em) { .section { padding-block: var(--space-11); } } /* Section head: caption eyebrow + headline + lead, used by most bands. */ .section-head { max-width: 46rem; } .section-head .t-caption { display: block; margin-bottom: var(--space-5); } .section-head .t-lead { margin-top: var(--space-5); } /* Split head: headline left, lead dropped to the right and baseline- aligned. Keeps a 1440 canvas from reading as one narrow left column. */ @media (min-width: 64em) { .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--space-9); align-items: start; } .section-head--split .t-caption { grid-column: 1 / -1; } .section-head--split .t-lead { margin-top: 0; max-width: 34rem; padding-top: 0.5em; justify-self: end; } } /* ───────────────────────────────────────────────────────────────────── 4. Buttons ──────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; border-radius: var(--radius-pill); padding: 0.9rem 1.6rem; font-size: var(--text-body); font-weight: 600; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); } /* The primary button is solid indigo on every band. On .section--dark --accent is remapped to the light-surface lilac (site.css §0) so the step numbers can pass AA; the button must not follow it there. */ .section--dark .btn-primary, .nav .btn-primary { background: #4B3CFF; color: #FFFFFF; } .section--dark .btn-primary:hover, .nav .btn-primary:hover { background: #3A2ECC; } /* Bending-Spoons-style text CTA: underline + travelling arrow. */ .btn-ghost { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.25rem 0; font-size: var(--text-body); font-weight: 600; color: inherit; border-bottom: 1.5px solid currentColor; border-radius: 0; cursor: pointer; transition: opacity var(--dur-base) var(--ease-standard); } .btn-ghost:hover { opacity: 0.7; } .btn-ghost .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-standard); } .btn-ghost:hover .arrow { transform: translateX(4px); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); } /* ───────────────────────────────────────────────────────────────────── 5. Stat tile ──────────────────────────────────────────────────────────────────── */ .stat .value { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .stat .label { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.35; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--section-ink-soft, var(--ink-soft)); } /* ───────────────────────────────────────────────────────────────────── 6. Scroll reveal Visibility is never JS-dependent: without html.js everything renders. ──────────────────────────────────────────────────────────────────── */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); will-change: opacity, transform; } html.js .reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ───────────────────────────────────────────────────────────────────── 7. Utilities ──────────────────────────────────────────────────────────────────── */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: 200; padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-small); } .skip-link:focus { top: var(--space-4); }