@charset "utf-8"; /* ═══════════════════════════════════════════════════════════════════════════ RapidCents — rapidcents-gen2 theme stylesheet ═══════════════════════════════════════════════════════════════════════════ One standalone file. No Tailwind, no build step, no @import of anything. Order: tokens → reset/base → layout → typography → components → chrome → utilities → print. ── FONTS: use a , not an @import ─────────────────────────────────── An `@import url(fonts.googleapis.com/...)` written here cannot start until this file has been fetched AND parsed, so the font CSS lands one full round-trip behind the page — and the font FILES land two behind. A in is found by the HTML preload scanner in the first packet and downloads in parallel with this stylesheet, which is why the @import is deliberately absent. The theme's PHP author must add, in : or, the WordPress way, in functions.php: wp_enqueue_style( 'rc-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..700&family=Manrope:wght@600..800&display=swap', array(), null ); Three families, three files. Each request asks for a weight RANGE, not a list, so Google serves one variable font per family instead of six static faces. Every face below carries a real fallback stack, so a blocked or slow Google Fonts response degrades to a system face rather than to invisible text — `display=swap` covers the same failure from the other side. The ranges have to cover every weight the file below asks for, because a variable face CLAMPS to its declared axis rather than falling back to a heavier static one: served at `400..600`, every `font-weight: 700` in this stylesheet rendered at 600, and the mono axis at `400..500` clamped its 700 to 500. The app loads the families with no `weight` restriction at all, so its 700s are 700 — which is the whole of the difference in heading and label ink between the two builds. `600..800` on Manrope is already right: the display face is never asked for less than 600 here. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS ═══════════════════════════════════════════════════════════════════════════ Ported name-for-name from packages/design-system/tokens.css. The names are the shared vocabulary between this theme, the Next.js app and the imported content — renaming any of them breaks that contract, so values move and names never do. Dark is the site default (`data-theme="dark"` on ). Bare :root below still carries the LIGHT palette so a missing attribute does not invent a third look; [data-theme="dark"] is what first-time visitors actually hit. Light is a stored choice from the header toggle, never the OS preference. The OS preference is deliberately NOT consulted. This file used to carry a second, byte-identical dark block under `@media (prefers-color-scheme: dark)` guarded by `:not([data-theme="light"])`, which meant a visitor whose laptop was set to dark got a #010526 site where the live one is #f6f8fd — the largest single visual difference between the two builds, on every page. `app/[locale]/layout.tsx` stamps `data-theme="light"` on and flips it only for a stored choice; the theme now does exactly the same, so those media blocks were unreachable as well as wrong and are gone. Four of them existed: the token block here, the logo swap, the theme-toggle icon swap and the film grain. Adding a fifth would silently reintroduce the bug. Brand tokens that are GRADIENT STOPS — primary/secondary/success/refund/ danger fills, the blue surface stack, glows and highlights — do NOT flip between themes. They are the stops of a fill that is midnight in both themes and always carries white text; re-pointing them at light values produces washed-out mush on a white button. Components here follow the same rule the app learned the hard way: surfaces are bordered, not filled, and only text/line/band/shadow tokens are theme-dependent. */ :root { color-scheme: light; /* ── Type families (bound by the above; fallbacks are load-bearing) ── */ --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace; /* ── Midnight backgrounds (§3) ── */ --rc-bg-midnight: #f6f8fd; --rc-bg-bottom: #eef2fa; --rc-bg-lower: #e6edf9; --rc-bg-top: #0128a7; --rc-bg-upper: #0038cd; --rc-bg-middle: #004de0; --rc-bg-glow: #0150ea; /* ── Text (§7) ── */ --rc-text-primary: #0d1b3e; --rc-text-financial: #0a1733; --rc-text-secondary: #45557a; --rc-text-blue: #0b5fd0; --rc-text-disabled: #5a6885; --rc-icon-white: #f4f8ff; /* ── Blue surfaces (§4) — gradient stops, identical in both themes ── */ --rc-surface-top: #0c2f9d; --rc-surface-middle: #061f82; --rc-surface-bottom: #011a77; --rc-border-blue: #176bff; --rc-border-cyan: #2ccbff; --rc-glow-blue: #087dff; --rc-glow-cyan: #00d9ff; --rc-edge-highlight: #dff9ff; /* ── Primary action (§5) ── */ --rc-primary-top: #197dfb; --rc-primary-middle: #125ce6; --rc-primary-bottom: #063cd3; --rc-primary-border: #31e2ff; --rc-primary-highlight: #73f3ff; --rc-glow-primary: #00bfff; --rc-primary-pressed-top: #1267dc; --rc-primary-pressed-bottom: #042ea8; /* ── Secondary action (§6) ── */ --rc-secondary-top: #071f78; --rc-secondary-middle: #041765; --rc-secondary-bottom: #03125a; --rc-secondary-border: #1748c9; --rc-secondary-glow: #145cff; /* ── Semantic: success (§11) ── */ --rc-success-top: #0c8f4f; --rc-success-middle: #08c95b; --rc-success-bottom: #029a45; --rc-success-border: #0a7a44; --rc-success-glow: #00e86a; /* ── Semantic: refund (§11) ── */ --rc-refund-top: #45143f; --rc-refund-middle: #2e0b36; --rc-refund-bottom: #170625; --rc-refund-border: #ff4d84; --rc-refund-glow: #ff286e; --rc-refund-bright: #ff234e; /* ── Semantic: destructive (§11) ── */ --rc-danger-top: #f25310; --rc-danger-middle: #db3508; --rc-danger-bottom: #b72008; --rc-danger-border: #ff8a20; --rc-danger-glow: #ff4500; /* ── Category accents (§11) ── */ --rc-purple-highlight: #6d28d9; --rc-purple: #7c3dff; --rc-purple-mid: #5e2bd6; --rc-purple-deep: #2a126f; --rc-teal-highlight: #0a6b7e; --rc-teal: #077f95; --rc-teal-mid: #0798ad; --rc-teal-deep: #034d68; --rc-warning: #b45f06; /* ── Legacy aliases (CMS / internal pages) ── */ --rc-navy-950: #010526; --rc-navy-900: #010837; --rc-blue-700: #0038cd; --rc-blue-600: #0b5fd0; --rc-blue-500: #0150ea; --rc-cyan-400: #31e2ff; --rc-green-500: #18e86f; --rc-amber-500: #ffb44d; --rc-red-500: #ff4d84; /* Light surfaces (CMS pages fallback) */ --surface-white: #ffffff; --surface-cloud: #f2f5fb; --surface-ice: #e8f1fd; --surface-blue-soft: #eef4fe; --border-light: #d9e2f2; --border-strong: #b6c5de; --text-primary: #0d1b3e; --text-secondary: #45557a; --text-muted: #5a6885; /* Dark surfaces — literal midnight values, never themed */ --surface-obsidian: #010526; --surface-charcoal: #010837; --surface-graphite: #011362; --surface-dark-hover: #0c2f9d; --border-dark: rgba(44, 203, 255, 0.16); --text-dark-primary: #f7f9ff; --text-dark-secondary: #b8c7ed; /* Gradients */ --gradient-hero-midnight: radial-gradient( circle at 50% 18%, rgba(1, 80, 234, 0.62) 0%, rgba(0, 56, 205, 0.3) 28%, rgba(1, 19, 98, 0.18) 55%, rgba(1, 8, 55, 0) 72% ), linear-gradient(180deg, #0128a7 0%, #0038cd 14%, #011362 48%, #010837 76%, #010526 100%); --gradient-page-midnight: radial-gradient(circle at 50% 0%, rgba(11, 95, 208, 0.06), transparent 45%), #f6f8fd; --gradient-hero-light: radial-gradient( circle at 78% 25%, rgba(0, 140, 255, 0.18) 0%, rgba(0, 91, 255, 0.08) 34%, rgba(255, 255, 255, 0) 68% ), #ffffff; --gradient-developer: var(--gradient-page-midnight); --gradient-cta: linear-gradient(135deg, #010526 0%, #011362 55%, #0038cd 100%); /* Spacing — 8px foundation (§22) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* Off the 8px foundation, like --space-3 above it. It is the app's `p-5`, which is what the two tile grids are padded with. */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; --space-32: 128px; --space-36: 144px; /* Radius (§21) */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-pill: 999px; --rc-radius-input: 16px; --rc-radius-button: 18px; --rc-radius-card: 24px; --rc-radius-panel: 30px; /* Elevation */ --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 48px rgba(23, 51, 110, 0.1); --shadow-float: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 22px rgba(11, 95, 208, 0.1), 0 22px 54px rgba(23, 51, 110, 0.14); --rc-shadow-dark: rgba(0, 5, 31, 0.65); --rc-shadow-inner: rgba(0, 11, 61, 0.45); /* Motion (§20) */ --rc-motion-fast: 100ms; --rc-motion-standard: 220ms; --rc-motion-page: 360ms; --rc-ease-premium: cubic-bezier(0.22, 1, 0.36, 1); /* Layout */ /* 1440, the app's own `rc-container` cap, and the same value --content-wide already carries. At 1280 every band of page content was inset 80px further than the header that sits above it, so the site's own left edge disagreed with itself on every viewport wider than 1440. A full token-by-token diff against the app's stylesheet found this to be the only value that differed. */ --content-max: 1440px; --content-wide: 1440px; --content-editorial: 760px; --content-legal: 860px; --content-docs: 780px; /* ── V1.07 — unified bands ── Every public section sits on one of five surfaces. Sections pick a band; they never hand-roll a background colour. */ --rc-band-base: #f6f8fd; --rc-band-deep: #eef2fa; --rc-band-raised: #ffffff; --rc-band-blue: #e8f1fd; --rc-band-panel: rgba(232, 241, 253, 0.75); --rc-band-charcoal: #0d1424; /* The two washes the app lays over a band. Tokens rather than literals because the purple one is the single component colour whose alpha differs between the palettes — `.rc-accent-purple` in the app's globals.css carries 0.06 in light and 0.12 of a brighter purple in dark, and a component rule cannot read that from any existing token. */ --rc-wash-ice: rgba(8, 125, 255, 0.16); --rc-wash-purple: rgba(109, 40, 217, 0.06); /* Hairlines — one border family, three strengths */ --rc-line-soft: rgba(13, 42, 105, 0.08); --rc-line: rgba(13, 42, 105, 0.14); --rc-line-strong: rgba(11, 95, 208, 0.32); /* Tinted elevation — shadows carry the page hue, never pure black */ --rc-shadow-sm: 0 2px 8px rgba(23, 51, 110, 0.08); --rc-shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 34px rgba(23, 51, 110, 0.1); --rc-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 28px 70px rgba(23, 51, 110, 0.14); /* Z-index scale — components reference these, never arbitrary values */ --z-base: 0; --z-raised: 10; --z-sticky: 30; --z-nav: 50; --z-overlay: 70; --z-modal: 90; --z-grain: 100; /* Typography roles */ --rc-tracking-display: -0.045em; --rc-tracking-heading: -0.028em; --rc-tracking-label: 0.14em; /* ── Theme-local additions ── The app gets these from Tailwind config and from .rc-nav-glass; a plain stylesheet has neither, so they are declared here under the same rc- vocabulary. --rc-header-h is referenced by scroll-padding and by the mega-menu height cap, so the sticky header can only ever be one number. */ /* Reserved height for a demo stand-in. The section renderer overrides it per variant — pricing wants 4/3 — so it is a token, not a literal. */ --rc-mock-ratio: 16 / 10; /* 80px, because the app's header is `h-[80px]` and the two are compared side by side. It is referenced by scroll-padding and by the mega-menu height cap, so the sticky header can only ever be one number. */ --rc-header-h: 80px; --rc-header-bg: rgba(255, 255, 255, 0.82); /* The app's .rc-menu-panel glass, which it puts on the announcement ribbon and on every menu card. Only the ribbon can use it here — see the note on .rc-nav__panel — but it is the app's value and it is themed, so it is a token and not a literal in the one rule that reads it. */ --rc-menu-panel-bg: rgba(255, 255, 255, 0.96); /* Tailwind's shadow-xl, which is what the app's menu cards carry rather than this theme's --rc-shadow-lg. */ --rc-nav-panel-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* The account pill's fill: the app tints it with the ink colour at 4%, not with the blue band. */ --rc-nav-account-bg: rgba(13, 42, 105, 0.04); /* The sign-up half of that pill: the app washes it with the brand blue at 10%, and 18% under the pointer. */ --rc-nav-signup-bg: rgba(11, 95, 208, 0.1); --rc-nav-signup-bg-hover: rgba(11, 95, 208, 0.18); /* Solutions: the category rail is a 4% wash of the brand blue and the pane beside it a 5% wash of the ink. Both were opaque bands here, which made the rail grey where the app's is cool and lost the well the cards sit in altogether. */ --rc-nav-rail-bg: rgba(25, 125, 251, 0.04); --rc-nav-well-bg: rgba(13, 42, 105, 0.05); } /* Dark is the site default. The toggle writes `rc-theme` to localStorage and the boot script in stamps a stored light choice back before first paint. There is deliberately no prefers-color-scheme twin: the OS is not an input. */ :root[data-theme="dark"] { color-scheme: dark; --rc-bg-midnight: #010526; --rc-bg-bottom: #010837; --rc-bg-lower: #011362; --rc-text-primary: #f7f9ff; --rc-text-financial: #f8faff; --rc-text-secondary: #b8c7ed; --rc-text-blue: #78c8ff; --rc-text-disabled: #8093c9; --rc-purple-highlight: #a66bff; --rc-teal-highlight: #6fffff; --rc-teal: #11d9e8; --rc-warning: #ffb44d; --rc-success-top: #18e86f; --rc-success-border: #7cffb0; --rc-blue-600: #197dfb; --gradient-page-midnight: radial-gradient(circle at 50% 0%, rgba(1, 80, 234, 0.2), transparent 45%), #010526; --surface-white: #010b3a; --surface-cloud: #01072c; --surface-ice: #01144f; --surface-blue-soft: #01144f; --border-light: rgba(120, 200, 255, 0.16); --border-strong: rgba(44, 203, 255, 0.38); --text-primary: #f7f9ff; --text-secondary: #b8c7ed; --text-muted: #8093c9; --rc-band-base: #010526; --rc-band-deep: #01072c; --rc-band-raised: #010b3a; --rc-band-blue: #01144f; --rc-band-panel: rgba(8, 32, 116, 0.42); --rc-band-charcoal: #01102f; --rc-wash-ice: rgba(8, 125, 255, 0.16); --rc-wash-purple: rgba(124, 61, 255, 0.12); --rc-line-soft: rgba(120, 200, 255, 0.1); --rc-line: rgba(120, 200, 255, 0.16); --rc-line-strong: rgba(44, 203, 255, 0.38); --rc-shadow-sm: 0 2px 8px rgba(0, 6, 34, 0.45); --rc-shadow-md: inset 0 1px 0 rgba(223, 249, 255, 0.08), 0 12px 34px rgba(0, 6, 34, 0.5); --rc-shadow-lg: inset 0 1px 0 rgba(223, 249, 255, 0.12), 0 28px 70px rgba(0, 6, 34, 0.55); --shadow-card: inset 0 1px 0 rgba(223, 249, 255, 0.14), 0 16px 48px rgba(0, 5, 31, 0.4); --shadow-float: inset 0 1px 0 rgba(223, 249, 255, 0.22), 0 0 22px rgba(8, 125, 255, 0.3), 0 22px 54px rgba(0, 5, 31, 0.5); --rc-header-bg: rgba(1, 5, 38, 0.72); --rc-menu-panel-bg: rgba(1, 5, 38, 0.92); --rc-nav-panel-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --rc-nav-account-bg: rgba(1, 5, 38, 0.5); --rc-nav-signup-bg: rgba(0, 140, 255, 0.18); --rc-nav-signup-bg-hover: rgba(0, 140, 255, 0.28); --rc-nav-rail-bg: rgba(0, 140, 255, 0.06); --rc-nav-well-bg: rgba(1, 5, 38, 0.55); } /* ═══════════════════════════════════════════════════════════════════════════ 2. RESET AND BASE ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Margins are opted into by components rather than inherited from the UA, so a section's rhythm is decided in one place instead of fought with. */ body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } html { /* `clip` rather than `hidden`: hidden would make a scroll container and silently kill position:sticky on the header. */ overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* An in-page anchor must not land under the sticky header. */ scroll-padding-top: calc(var(--rc-header-h) + var(--space-4)); } body { min-height: 100%; background: var(--rc-band-base); color: var(--rc-text-primary); font-family: var(--font-sans); font-size: 16px; /* 1.5, which is what Tailwind's preflight puts on the app's and what every element in the app that does not name its own leading inherits. Anything set here reaches a surprising number of places — table cells, the path selector's descriptions, list items with no rule of their own — and at 1.6 each of them ran 1.6px taller per line than the app's. */ line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, canvas, iframe, embed, object { display: block; max-width: 100%; } img, video { height: auto; } /* The theme wraps images in to offer AVIF with a WebP fallback. The wrapper must not become a box of its own: where an image is a flex or grid item, a in between would take that role and the would be laid out against the wrapper instead of the parent. `display: contents` removes it from the box tree, so every existing rule keeps applying to the . */ picture { display: contents; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: var(--rc-tracking-heading); text-wrap: balance; color: var(--rc-text-primary); } p { text-wrap: pretty; } a { color: var(--rc-text-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--rc-motion-fast) var(--rc-ease-premium); } a:hover { color: var(--rc-text-primary); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9375em; } hr { border: 0; border-top: 1px solid var(--rc-line); margin-block: var(--space-8); } ::selection { background: var(--rc-line-strong); color: var(--rc-text-primary); } /* One focus ring for the whole theme. --rc-text-blue is the only accent that clears 3:1 against every band in BOTH palettes (5.55:1 light, 10.95:1 dark), which is why the ring reads the text token rather than a fixed cyan. The offset keeps the ring on the page background instead of on a filled button, where a blue-on-blue ring would vanish. Nothing in this file removes an outline without putting one of these back. */ :focus-visible { outline: 2px solid var(--rc-text-blue); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ 3. LAYOUT ═══════════════════════════════════════════════════════════════════════════ */ .rc-container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } /* Vertical rhythm, from the app's own SECTION constant in `components/sections/section-renderer.tsx`, which reads `py-14 lg:pt-16 lg:pb-20` — 56px, stepping to 64/80 at lg. Flat pixels rather than a clamp, because the app steps once at lg and holds still either side of it; a clamp met the app only at its ceiling and ran 32px tight at every width below 1280. The constant had been re-tightened in the app and this file was still quoting — and drawing — the old `py-20 … lg:pt-24 lg:pb-28`. That is 24px of invented air above and 32px below every section on the site: on the home page alone, across its eleven bands, about 700px of page height that the live site does not have. The quoted constant is part of the fix, not a note about it: the next person to change this needs to see what it is now. */ .rc-section { padding-block: 56px; } @media (min-width: 1024px) { .rc-section { padding-block: 64px 80px; } } /* The device showcase is the one band the section constant does not describe. `TerminalShowcase.tsx:75` carries its own `py-20 lg:py-28`, so it keeps the taller rhythm the rest of the page gave up — take it down to `.rc-section`'s and the terminal photograph loses 24px of air at every width and 48 at lg, which on the one section built around a full-height product shot is the difference between a showcase and a strip. Doubled selector for the same reason the variants above are doubled: the `lg` step on `.rc-section` must not be able to out-order it. */ .rc-section.rc-section--showcase { padding-block: 80px; } @media (min-width: 1024px) { .rc-section.rc-section--showcase { padding-block: 112px; } } /* Block rhythm variants, one per shape the app draws. Doubled selectors so the `lg` step on `.rc-section` above can never out-order them, whatever gets added to this file later. */ .rc-section.rc-section--tight { padding-block: clamp(24px, 3.5vw, 48px); } /* Trust strip — `py-10`. */ .rc-section.rc-section--strip { padding-block: 40px; } /* Stats and the trust badge row — `py-12`. */ .rc-section.rc-section--slim { padding-block: 48px; } /* Industry index — `py-20`, and the one full section the app does not step at lg. */ .rc-section.rc-section--even { padding-block: 80px; } /* Conversion CTA — `py-10 sm:py-14 lg:py-16`. The panel inside carries the band's real height; this is only the air around it. */ .rc-section.rc-section--cta { padding-block: 40px; } @media (min-width: 640px) { .rc-section.rc-section--cta { padding-block: 56px; } } @media (min-width: 1024px) { .rc-section.rc-section--cta { padding-block: 64px; } } /* The horizontal gutter the app puts on the section itself — `px-4 sm:px-6 lg:px-8` — on top of the `padding-inline` `.rc-container` already carries. Two paddings rather than one is not a mistake to fold away: the container is capped at --content-max and the section is not, so past 1440 the outer padding stops mattering and the measure is the same on both sides, while below it the copy starts 16 to 32px further in. Folding them into a single value agrees at 1920 and is wrong at every laptop and phone width. The rule is right; it was the call sites that were wrong. Fourteen sections in `inc/sections.php` asked for it and exactly ONE of them has a `px-*` in the app — `deviceShowcase`, whose `TerminalShowcase.tsx:75` genuinely carries `px-4 sm:px-6 lg:px-8`. Every other section renders through `SECTION`, which has no horizontal padding at all and lets `.rc-container` alone set the measure. Doubling the gutter on those thirteen cost 32px of measure a side at lg and, worse, left adjacent bands disagreeing about where the page's left edge is — a band with the modifier started 32px further in than the band above it. So the modifier stays, for its one caller. */ .rc-section--gutter { padding-inline: 16px; } @media (min-width: 640px) { .rc-section--gutter { padding-inline: 24px; } } @media (min-width: 1024px) { .rc-section--gutter { padding-inline: 32px; } } /* Full-bleed tinted band — the app's `.rc-section-cloud`. The section element spans the viewport; the .rc-container inside it keeps the copy on the same measure as its neighbours, so an alternating stripe never shifts the text column. Flat, and with no border of its own. The theme used to lay a panel-coloured ellipse over this and hairline it top and bottom; the app draws neither, and the rules that do want an edge ask for one below. */ .rc-section--band { background: var(--rc-band-deep); } /* The pale band a demo sits on — the app's `.rc-section-ice`. Lighter than --band, because a demo already carries its own raised card and stacking two strong surfaces makes the card read as sunk into the page rather than lifted off it. */ .rc-section--ice { background: radial-gradient(ellipse 120% 90% at 50% 0%, var(--rc-wash-ice), transparent 62%), var(--rc-band-blue); } /* The developer band — the app's `.rc-accent-purple`. */ .rc-section--purple { background: radial-gradient(circle at 50% 0%, var(--rc-wash-purple), transparent 45%), var(--rc-bg-bottom); } /* Band edges. --rc-line, not --rc-line-soft: every `border-y` and `border-b` the app puts on a section reads the same hairline token its cards do. */ .rc-section--rule-y { border-block: 1px solid var(--rc-line); } .rc-section--rule-b { border-block-end: 1px solid var(--rc-line); } /* ── Below-the-fold rendering ────────────────────────────────────────────── Skip layout and paint for bands the reader has not reached yet. The home page ships 19 sections and roughly 2,600 elements, and the browser lays out and paints every one of them before it can answer the first click. That work is what presentation delay measures, and presentation delay is the largest of the three parts of INP. Deferring it costs nothing visible: the browser still renders each band before it scrolls into view. From the fourth section on, so the hero, the trust strip and the first content band are never deferred — those are on screen at load on every viewport this site supports, and deferring them would trade a real paint for nothing. `contain-intrinsic-size: auto 600px` is what keeps the scrollbar honest. The `auto` keyword tells the browser to remember each section's real height once it has rendered it, so the placeholder is only used the first time; 600px is the starting guess. Without this the page would report a wrong height and scroll position would jump as bands rendered. The exclusions are all sticky hosts. `content-visibility` implies paint containment, which clips descendants to the section box, and a sticky child that outlives its parent's box stops travelling when it hits the clip. The `:has()` guard in `@supports` matters as much as the rules: a browser that cannot evaluate the exclusion selectors would otherwise apply the deferral without them, so it opts out of the whole block instead. */ @supports (content-visibility: auto) and selector(:has(*)) { .rc-singular > .rc-section:nth-of-type(n + 4):not(.rc-product-hero):not( :has(.rc-faq-layout, .rc-app-directory__toolbar, .rc-app-directory__rail) ) { content-visibility: auto; contain-intrinsic-size: auto 600px; } } /* ── Demo band ───────────────────────────────────────────────────────────── Copy on one side, the working demo on the other. One column until there is room for two: a demo squeezed into half of a 900px viewport is unreadable, and the fields inside it stop being tappable long before that. */ .rc-demo-band__grid { display: grid; align-items: center; /* `gap-12`, and the same 48px either side of the breakpoint — the app never narrows it on a phone, where the two tracks are stacked and the gap is the only thing separating the copy from the demo. */ gap: var(--space-12); grid-template-columns: 1fr; } @media (min-width: 1024px) { .rc-demo-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Fee check promo — the same split, weighted 1.15 / 0.85 the way the app weights it, so the copy column stays the wider of the two. */ .rc-promo-grid { display: grid; align-items: center; gap: var(--space-12); grid-template-columns: 1fr; } @media (min-width: 1024px) { .rc-promo-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } } /* Developer band — copy against the code panel, `gap-14` at every width. */ .rc-dev-grid { display: grid; align-items: center; gap: 56px; grid-template-columns: 1fr; } @media (min-width: 1024px) { .rc-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rc-dev-grid > * { min-width: 0; } .rc-promo-grid > *, .rc-demo-band__grid > * { min-width: 0; } .rc-demo-band__copy > :first-child { margin-top: 0; } /* dashboardDemo leads with the interface. The order is swapped in the layout and not in the markup, so a screen reader still reads the heading before the thing it introduces, and the tab order still runs copy then controls. */ @media (min-width: 1024px) { .rc-demo-band--flip .rc-demo-band__copy { order: 2; } .rc-demo-band--flip .rc-demo-band__demo { order: 1; } } /* `space-y-4` — the gap `SummaryText` puts between the paragraphs of a body that was authored with blank lines in it. */ .rc-stack { display: flex; flex-direction: column; gap: var(--space-4); } /* The card grid. `list-style`, `padding` and `margin` are zeroed here, and that is not housekeeping: `inc/sections.php` puts this class on `