/* ============================================================================ Typiq design system v4 — live-site overlay Loaded AFTER styles.css / redesign.css / redesign-landings.css. Two layers: 1. The v4 token block, verbatim from the design export. 2. A remap that re-points every variable the current site already uses at a v4 token, plus component overrides for the .rd-* classes whose anatomy actually changed (buttons, keycaps, cards, nav, footer). Because redesign.css is written almost entirely in var()s, layer 2 alone recolors and re-types all 20 pages in all 9 languages without touching a single template. Layer 3 is where the shapes change. ========================================================================= */ :root{ /* --- Brand core ------------------------------------------------------ */ --violet-950:#17082A; --violet-900:#25104A; --violet-800:#331661; --violet-700:#4A21BC; --violet-600:#6B3FC8; --violet-500:#8D3BFF; --violet-400:#A97BF2; --violet-300:#C4A5F7; --violet-200:#E0D2FB; --violet-100:#F1EAFE; --violet-50:#F8F5FF; --sand-500:#E9B562; --sand-400:#F2C77F; --sand-300:#F9DAA3; --sand-200:#FBE7C4; --sand-100:#FDF3E4; /* --- Neutrals (violet-tinted, never pure grey) ------------------------ */ --ink-950:#120621; --ink-900:#1D0F33; --ink-800:#2C1B46; --ink-700:#463663; --ink-600:#665684; --ink-500:#8A7BA6; --ink-400:#AEA2C4; --ink-300:#CEC6DC; --ink-200:#E4DFEC; --ink-100:#F1EEF6; --ink-050:#F8F7FB; --white:#FFFFFF; /* --- Semantic accents ------------------------------------------------- */ --success-500:#2FB07A; --success-100:#DFF4EA; --warning-500:#E1963A; --warning-100:#FBEBD6; --danger-500:#E0525C; --danger-100:#FBE2E4; --info-500:#3F8FE0; --info-100:#E1EEFB; /* --- Finger-zone palette (Typiq keyboard) ----------------------------- */ --finger-pinky:#8D3BFF; --finger-ring:#3F8FE0; --finger-middle:#2FB07A; --finger-index-l:#E9B562; --finger-index-r:#E0793A; --finger-thumb:#8A7BA6; /* --- Semantic aliases: light surface (default) ------------------------ */ --bg-page:var(--ink-050); --bg-surface:var(--white); --bg-sunken:var(--ink-100); --bg-inverse:var(--ink-950); --surface-card:var(--white); --surface-muted:var(--violet-50); --surface-accent:var(--violet-100); --text-heading:var(--ink-950); --text-body:var(--ink-800); --text-muted:var(--ink-600); --text-faint:var(--ink-500); --text-inverse:var(--white); --text-accent:var(--violet-600); --text-link:var(--violet-600); --text-link-hover:var(--violet-700); --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-400); --border-accent:var(--violet-400); --focus-ring:var(--violet-500); --action-primary:var(--violet-600); --action-primary-hover:var(--violet-700); --action-primary-press:#3C1AA0; --action-secondary:var(--violet-100); --action-accent:var(--sand-300); --action-accent-hover:var(--sand-400); --action-disabled:var(--ink-200); /* --- Signature gradients (from the brand OG artwork) ------------------ */ --gradient-brand:linear-gradient(135deg,#4A21BC 0%,#6B3FC8 45%,#8D3BFF 100%); --gradient-brand-soft:linear-gradient(135deg,#F1EAFE 0%,#F8F5FF 100%); --gradient-night:linear-gradient(180deg,#17082A 0%,#25104A 100%); --gradient-sand:linear-gradient(135deg,#F9DAA3 0%,#E9B562 100%); --gradient-halo:radial-gradient(60% 60% at 50% 0%,rgba(141,59,255,.35) 0%,rgba(23,8,42,0) 100%); } /* --- Dark scope: the app chrome and the site's night sections --------- */ .typiq-dark,[data-theme="dark"]{ --bg-page:var(--ink-950); --bg-surface:#1D0F33; --bg-sunken:#150826; --bg-inverse:var(--white); --surface-card:rgba(255,255,255,.045); --surface-muted:rgba(255,255,255,.03); --surface-accent:rgba(141,59,255,.16); --text-heading:var(--white); --text-body:#D8D0E6; --text-muted:#A79BC0; --text-faint:#7E718F; --text-inverse:var(--ink-950); --text-accent:var(--sand-300); --text-link:var(--sand-300); --text-link-hover:var(--sand-400); --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.24); --border-accent:var(--violet-500); --action-primary:var(--violet-500); --action-primary-hover:#9E55FF; --action-primary-press:#7A2EE8; --action-secondary:rgba(255,255,255,.08); --action-disabled:rgba(255,255,255,.1); } :root{ --font-display:"Manrope","Helvetica Neue",Arial,sans-serif; --font-body:"Manrope","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-display-1:76px; --fs-display-2:60px; --fs-h1:44px; --fs-h2:34px; --fs-h3:26px; --fs-h4:20px; --fs-lead:19px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px; --fs-micro:11px; --lh-tight:1.02; --lh-heading:1.12; --lh-snug:1.3; --lh-body:1.6; --lh-loose:1.75; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; --ls-display:-0.035em; --ls-heading:-0.02em; --ls-body:0em; --ls-label:0.02em; --ls-eyebrow:0.16em; /* Semantic type roles */ --text-eyebrow-size:var(--fs-micro); --text-eyebrow-tracking:var(--ls-eyebrow); --text-metric-font:var(--font-mono); } :root{ --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --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-32:128px; --space-40:160px; --gutter-inline:24px; --container-max:1200px; --container-narrow:760px; --section-y:var(--space-32); --section-y-compact:var(--space-20); --card-pad:24px; --card-pad-lg:32px; } :root{ --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px; --radius-key:8px; --radius-card:var(--radius-lg); --radius-panel:var(--radius-xl); --radius-control:var(--radius-pill); --border-hairline:1px; --border-thick:2px; } :root{ --shadow-xs:0 1px 2px rgba(23,8,42,.06); --shadow-sm:0 2px 6px rgba(23,8,42,.07); --shadow-md:0 8px 24px -8px rgba(23,8,42,.16); --shadow-lg:0 24px 60px -20px rgba(23,8,42,.24); --shadow-key:0 2px 0 rgba(23,8,42,.14); --shadow-key-press:0 0px 0 rgba(23,8,42,.14); --shadow-glow:0 0 0 6px rgba(141,59,255,.16); --shadow-focus:0 0 0 3px rgba(141,59,255,.45); --blur-glass:18px; --glass-light:rgba(255,255,255,.72); --glass-dark:rgba(23,8,42,.55); } :root{ --ease-standard:cubic-bezier(.22,.61,.36,1); --ease-out-soft:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms; --dur-scroll:900ms; --press-scale:.975; --hover-lift:-2px; } @media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-scroll:0ms;--press-scale:1;--hover-lift:0px}} /* ============================================================ 2. REMAP == */ /* Old variable -> v4 token. Names on the left are what the existing CSS already calls; nothing in styles.css or redesign.css has to change. */ :root{ /* --- redesign.css palette ------------------------------------------- */ --ink: var(--ink-950); --body-dark: var(--ink-800); --body-gray: var(--ink-600); --surface: var(--ink-050); --line: var(--ink-200); --violet600: var(--violet-600); --violet700: var(--violet-700); --violet800: var(--violet-800); --violet900: var(--violet-900); --violet500: var(--violet-500); --violet400: var(--violet-400); --blue500: var(--info-500); --yellow: var(--sand-300); --yellow-deep: var(--sand-500); /* --- styles.css legacy palette --------------------------------------- */ --primary: var(--violet-600); --primary-dark: var(--violet-700); --accent: var(--violet-500); --accent-light: var(--violet-400); --bg: var(--ink-050); --bg-alt: var(--ink-100); --surface-alt: var(--violet-50); --text: var(--ink-950); --text-secondary: var(--ink-700); --text-muted: var(--ink-500); --border: var(--ink-200); /* --- status ----------------------------------------------------------- NOT mapped to the -500 tokens. The current site uses these as TEXT on white (the "For Schools" tag, the comparison table's Yes cells, the CTA links); --success-500 #2FB07A lands at 2.76:1 there, which is a real accessibility regression against today's #1F6B3F. v4 already solves this inside its Badge component, which pairs the -100 fill with a darker ink — those are the exact hexes used here. */ --success: #1B7A52; --success-bg: var(--success-100); --warning: #9A6115; --error: #A9313A; /* --- finger zones ---------------------------------------------------- The old names are colours, the new ones are fingers. Mapped by MEANING, not by hue: in the existing keyboard markup green is the left index and blue the right index, and v4 paints those sand and orange. */ --f-pink: var(--finger-pinky); --f-red: var(--finger-ring); --f-yellow: var(--finger-middle); --f-green: var(--finger-index-l); --f-blue: var(--finger-index-r); --f-purple: var(--finger-thumb); /* --- type ------------------------------------------------------------- */ --font-display: "Manrope","Helvetica Neue",Arial,sans-serif; --font-sans: "Manrope","Helvetica Neue",Arial,sans-serif; --font: "Manrope","Helvetica Neue",Arial,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* --- radii ------------------------------------------------------------ */ --radius-sm: 10px; /* v4 --radius-sm (was 8) */ --radius-md: 14px; /* v4 --radius-md (unchanged) */ --radius-lg: 20px; /* v4 --radius-lg (unchanged) */ --radius-xl: 28px; /* v4 --radius-xl (unchanged) */ --radius-full: 999px; --r-sm: var(--radius-xs); --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* --- elevation --------------------------------------------------------- */ --shadow-card: var(--shadow-sm); --shadow-lift: var(--shadow-lg); /* --- gradients ---------------------------------------------------------- */ /* v4's hero and closer are night surfaces with a violet halo, NOT the brand gradient. Mapping them to --gradient-brand turned the hero bright violet, which is the one thing the new design deliberately moved away from. */ --hero-grad: var(--ink-950); --final-grad: var(--ink-950); --gradient: var(--gradient-brand); --gradient-hover: linear-gradient(135deg,#3C1AA0 0%,#4A21BC 45%,#6B3FC8 100%); } /* ==================================================== 3. COMPONENTS ====== */ /* Only the components whose shape changed in v4. Everything else inherits the remap above and needs no rule here. */ /* --- Buttons: pill, taller, semibold, press + lift ---------------------- */ body.rd .rd-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:46px;padding:0 22px; font-family:var(--font-body);font-size:15px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);line-height:1; border-radius:var(--radius-control);border:1px solid transparent; box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard)} body.rd .rd-btn:hover{transform:translateY(var(--hover-lift));filter:brightness(1.06)} body.rd .rd-btn:active{transform:scale(var(--press-scale));filter:none} body.rd .rd-btn-sm{height:36px;padding:0 16px;font-size:14px} body.rd .rd-btn-lg{height:56px;padding:0 30px;font-size:17px} body.rd .rd-btn-primary{background:var(--action-primary);color:#fff;border-color:transparent} body.rd .rd-btn-dark{background:var(--ink-950);color:#fff;border-color:transparent} body.rd .rd-btn-light{background:#fff;color:var(--ink-950);border-color:transparent} body.rd .rd-btn-outline{background:transparent;color:var(--text-heading); border:1px solid var(--border-default);box-shadow:none} /* .rd-btn-light-outline is the outline button for LIGHT surfaces (ink text, hairline border) — it is the "Sign in" button in the light nav on every page. Painting it white made it vanish site-wide; the white-on-dark variant is applied per night section below instead. */ body.rd .rd-btn-light-outline{background:transparent;color:var(--text-heading); border:1px solid var(--border-subtle);box-shadow:none} body.rd .rd-btn-light-outline:hover{background:var(--surface-muted)} /* On the night sections the primary action is the sand accent, as in v4's NavBar/Hero/Closer. */ body.rd .rd-hero .rd-btn-primary, body.rd .rd-final-cta .rd-btn-primary{background:var(--sand-300);color:var(--ink-950)} /* Every night context, not just the hero: .rd-land-section.dark on /for-kids/ also carries outline buttons, and an ink outline button on an ink section is invisible. */ body.rd .rd-hero .rd-btn-outline,body.rd .rd-hero .rd-btn-light-outline, body.rd .rd-final-cta .rd-btn-outline,body.rd .rd-final-cta .rd-btn-light-outline, body.rd .rd-land-section.dark .rd-btn-outline, body.rd .rd-land-section.dark .rd-btn-light-outline{ color:#fff;border-color:rgba(255,255,255,.24);background:transparent} body.rd .rd-land-section.dark .rd-btn-dark{background:#fff;color:var(--ink-950)} /* --- Nav: glass pill ----------------------------------------------------- */ body.rd .rd-nav{border-radius:var(--radius-pill);padding:12px 20px; border:1px solid rgba(255,255,255,.12);background:rgba(23,8,42,.55); -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass))} body.rd .rd-nav-light{border-color:var(--border-subtle);background:var(--glass-light)} body.rd .rd-nav-links a{font-size:var(--fs-body-sm);font-weight:var(--fw-medium)} /* --- Eyebrow / section label -------------------------------------------- */ body.rd .rd-eyebrow,body.rd .rd-land-eyebrow,body.rd .rd-legal-eyebrow, body.rd .rd-eyebrow-light{ font-size:var(--fs-micro);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; font-weight:var(--fw-semibold)} /* --- Headings ------------------------------------------------------------ */ body.rd h1,body.rd h2,body.rd h3,body.rd h4, body.rd .rd-h2,body.rd .rd-land-h2,body.rd .rd-blog-h1,body.rd .rd-article-h1{ font-family:var(--font-display);letter-spacing:var(--ls-heading); line-height:var(--lh-heading);font-weight:var(--fw-black)} body.rd .rd-hero h1,body.rd .rd-land-hero h1{letter-spacing:var(--ls-display); line-height:var(--lh-tight)} body.rd .rd-lead,body.rd .rd-land-lead,body.rd .rd-hero-lead{ font-size:var(--fs-lead);line-height:var(--lh-snug)} /* --- Cards: v4 radius + elevation, lift on hover ------------------------- */ body.rd .rd-audience-card,body.rd .rd-blog-card,body.rd .rd-lang-card, body.rd .rd-land-feature,body.rd .rd-kids-age-card,body.rd .rd-kids-no-card, body.rd .rd-demo-card,body.rd .rd-trust-callout{ border-radius:var(--radius-card);border:1px solid var(--border-subtle); background:var(--surface-card);box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft)} body.rd .rd-audience-card:hover,body.rd .rd-blog-card:hover, body.rd .rd-lang-card:hover,body.rd .rd-land-feature:hover{ transform:translateY(-3px);box-shadow:var(--shadow-md)} /* --- Platform / download cards ------------------------------------------- */ body.rd .rd-platform-card{border-radius:var(--radius-card); border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs); transition:all var(--dur-base) var(--ease-out-soft)} body.rd .rd-platform-card:hover{border-color:var(--border-accent); box-shadow:var(--shadow-md);transform:translateY(-3px)} body.rd .rd-platform-card-file,body.rd .rd-platform-card-size, body.rd .rd-platform-card-ver{font-family:var(--font-mono);font-size:var(--fs-caption)} /* --- Pricing ------------------------------------------------------------- */ body.rd .rd-pricing-card{border-radius:var(--radius-panel); border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)} body.rd .rd-pricing-price-num,body.rd .rd-pricing-amount{ font-family:var(--font-display);font-weight:var(--fw-black); letter-spacing:var(--ls-display)} /* --- FAQ / accordion ------------------------------------------------------ */ body.rd .rd-faq-item,body.rd .rd-land-faq-item{ border-radius:var(--radius-md);border:1px solid var(--border-subtle); background:var(--surface-card)} body.rd .rd-faq-q{font-weight:var(--fw-semibold);color:var(--text-heading)} body.rd .rd-faq-a,body.rd .rd-faq-answer{font-size:var(--fs-body-sm); line-height:var(--lh-body);color:var(--text-muted)} /* --- Badges / pills -------------------------------------------------------- */ body.rd .rd-badge,body.rd .rd-accent-pill,body.rd .rd-article-tag,body.rd .rd-blog-tag{ border-radius:var(--radius-pill);font-size:var(--fs-caption); font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);padding:5px 11px} /* --- Keycaps: the biggest shape change ------------------------------------ v4 moves the finger zone off the key face and onto a 3px bottom border, and gives the cap a mono face and a physical drop shadow. */ body.rd .rd-kb-key{ background:var(--bg-surface);color:var(--text-body); font-family:var(--font-mono);font-weight:var(--fw-medium); border:1px solid var(--border-subtle); border-bottom:3px solid var(--border-default); border-radius:var(--radius-key);box-shadow:var(--shadow-key); transition:all var(--dur-instant) var(--ease-standard)} body.rd .rd-kb-key[data-finger="pink"] {border-bottom-color:var(--finger-pinky)} body.rd .rd-kb-key[data-finger="red"] {border-bottom-color:var(--finger-ring)} body.rd .rd-kb-key[data-finger="yellow"]{border-bottom-color:var(--finger-middle)} body.rd .rd-kb-key[data-finger="green"] {border-bottom-color:var(--finger-index-l)} body.rd .rd-kb-key[data-finger="blue"] {border-bottom-color:var(--finger-index-r)} body.rd .rd-kb-key[data-finger="purple"]{border-bottom-color:var(--finger-thumb)} body.rd .rd-kb-key.active,body.rd .rd-kb-key.next{ background:var(--action-primary);color:#fff;border-bottom-color:transparent} body.rd .rd-kb-space{border-radius:var(--radius-key);box-shadow:var(--shadow-key); border-bottom:3px solid var(--finger-thumb)} /* The legend swatches follow the same remap. */ body.rd .rd-finger-legend-swatch{border-radius:3px} /* --- Forms ----------------------------------------------------------------- */ body.rd input[type="text"],body.rd input[type="email"],body.rd input[type="number"], body.rd select,body.rd textarea{ border-radius:var(--radius-md);border:1px solid var(--border-default); background:var(--bg-surface);font-family:var(--font-body);font-size:var(--fs-body); color:var(--text-heading)} body.rd input:focus,body.rd select:focus,body.rd textarea:focus{ outline:none;border-color:var(--border-accent);box-shadow:var(--shadow-focus)} /* --- Footer ---------------------------------------------------------------- */ body.rd .rd-footer{background:var(--ink-950)} body.rd .rd-footer-col-title{font-size:var(--fs-micro); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-semibold)} body.rd .rd-footer-col a{font-size:var(--fs-body-sm)} /* --- Focus ring across the site -------------------------------------------- */ body.rd :focus-visible{outline:none;box-shadow:var(--shadow-focus); border-radius:var(--radius-xs)} /* --- Night sections: hero, landing heroes, closer -------------------------- v4 builds these out of three layers: an ink-950 ground, a violet halo bleeding from the top edge, and a fine dot grid masked to fade out. The markup already has a .rd-hero-dots element, so it only needs retuning. */ /* NOTE: .rd-land-hero is deliberately NOT in this list. The landing heroes (buy, install, for-schools, for-kids) are LIGHT in the current site, a white to surface gradient, with ink headlines on top. Painting them ink-950 made every landing headline invisible. Only the homepage hero and the closer are night surfaces. */ body.rd .rd-hero,body.rd .rd-final-cta{ position:relative;background:var(--ink-950);overflow:hidden} body.rd .rd-hero::before,body.rd .rd-final-cta::before{ content:"";position:absolute;inset:0;pointer-events:none; background:var(--gradient-halo)} body.rd .rd-final-cta::before{transform:rotate(180deg)} body.rd .rd-hero > *,body.rd .rd-final-cta > *{position:relative} body.rd .rd-hero-dots{opacity:1;background-size:26px 26px; background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); -webkit-mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent); mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent)} body.rd .rd-eyebrow-light{color:var(--sand-300)} /* redesign.css gives every the ink colour, which was legible on the old bright-violet hero. On the v4 night hero it disappears, so the night sections get white emphasis back, as the design has it. */ /* Scoped to the copy column, NOT the whole hero: the demo card that sits in the hero is a white surface, and its WPM/accuracy numbers turned white on white when this matched everything inside .rd-hero. */ body.rd .rd-hero-copy strong,body.rd .rd-hero-lead strong, body.rd .rd-final-cta-inner strong{color:#fff} body.rd .rd-hero-copy em,body.rd .rd-final-cta-inner em{ color:var(--sand-300);font-style:normal} /* ========================================== 4. FAQ, REBUILT AS V4 ======== */ /* The previous pass put a border and a fill on .rd-faq-item without touching its padding, which is `24px 0` — no horizontal padding at all. So the text ran straight into the new border, and the list's own hairlines (border-top on .rd-faq-list, border-bottom per item) doubled up with the boxes. That is the odd segmentation. Rebuilt as v4's Accordion: one rounded card per question, 10px apart, 18px/22px inside, no hairlines. */ /* Spacing lives on the items, not on a flex gap: the landing FAQs are not all wrapped in .rd-land-faq (on /for-kids/ the items sit in a different parent), so a container gap silently did nothing there and the cards butted together. */ body.rd .rd-faq-list{border-top:none} body.rd .rd-faq-item{ border:1px solid var(--border-subtle);border-radius:var(--radius-md); background:var(--surface-card);padding:0;overflow:hidden;margin-bottom:10px} body.rd .rd-faq-item:last-child{margin-bottom:0} body.rd .rd-faq-item summary{padding:18px 22px;gap:16px;align-items:center} body.rd .rd-faq-q{ font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-semibold); letter-spacing:var(--ls-body);line-height:1.35;color:var(--text-heading)} body.rd .rd-faq-toggle{color:var(--text-muted);margin-top:0} body.rd .rd-faq-a{ padding:0 22px 20px;margin:0;max-width:720px; font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)} body.rd .rd-land-faq-item{ border:1px solid var(--border-subtle);border-top:1px solid var(--border-subtle); border-radius:var(--radius-md);background:var(--surface-card);padding:0;overflow:hidden; margin-bottom:10px} body.rd .rd-land-faq-item:last-child{margin-bottom:0} body.rd .rd-land-faq-item summary{ padding:18px 22px;align-items:center;gap:16px; font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-semibold); color:var(--text-heading)} body.rd .rd-land-faq-item summary::after{color:var(--text-muted)} /* Not every landing answer is a

— some pages wrap it in a div. */ body.rd .rd-land-faq-item > *:not(summary){ padding:0 22px 20px;margin:0;max-width:720px; font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)} /* ================================ 5. EVERY PAGE OPENS LIKE THE HOMEPAGE == */ /* The homepage opens on an ink-950 band with a violet halo and a glass nav. The landing, blog, article, legal and 404 pages opened on a white-to-surface gradient with a light nav. This gives them all the same opening band. The colour flip is done by redefining the LEGACY variables on the hero container. redesign.css writes its hero text as var(--ink) / var(--body-dark) / var(--body-gray), so re-pointing those three inside the scope turns every headline, lead and caption light without having to list them one by one — the same trick v4 uses for .typiq-dark. */ body.rd .rd-land-hero, body.rd .rd-blog-hero, body.rd .rd-article-header, body.rd .rd-legal-header, body.rd .rd-404{ position:relative;overflow:hidden; /* !important because the templates carry an inline background:linear-gradient(...#fff...) on these sections, and an inline style beats any stylesheet rule. When this graduates out of preview the inline style comes off the template and the !important comes off here. */ background:var(--ink-950) !important; color:#D8D0E6; --ink:#fff; --body-dark:#D8D0E6; --body-gray:#A79BC0; --line:rgba(255,255,255,.12); --surface:rgba(255,255,255,.05); --text-heading:#fff; --text-body:#D8D0E6; --text-muted:#A79BC0; --text-faint:#7E718F; --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.14); --surface-card:rgba(255,255,255,.045); --text-accent:var(--sand-300); /* The templates carry inline `color:var(--violet600)` on the hero's emphasis and on the accent pill. Inline styles cannot be overridden by a rule, but they still resolve the variable in this scope — so re-pointing violet600 at sand fixes both without a single !important. */ --violet600:var(--sand-300); --violet700:var(--sand-400); /* styles.css has its own legacy text names, and /for-teachers/ uses one of them for the hero note — it stayed ink-700 on ink until these were flipped too. */ --text:#fff; --text-secondary:#D8D0E6; --border:rgba(255,255,255,.14); --bg:var(--ink-950); --surface-alt:rgba(255,255,255,.05); } body.rd .rd-land-hero::before, body.rd .rd-blog-hero::before, body.rd .rd-article-header::before, body.rd .rd-legal-header::before, body.rd .rd-404::before{ content:"";position:absolute;inset:0;pointer-events:none;background:var(--gradient-halo)} body.rd .rd-land-hero > *,body.rd .rd-blog-hero > *,body.rd .rd-article-header > *, body.rd .rd-legal-header > *,body.rd .rd-404 > *{position:relative} /* Emphasis in a night headline is sand, as on the homepage. Listed per audience variant because redesign-landings.css sets those at higher specificity. */ body.rd .rd-land-hero h1 em,body.rd .rd-land-hero.pro h1 em, body.rd .rd-land-hero.schools h1 em,body.rd .rd-land-hero.kids h1 em, body.rd .rd-install-hero h1 em,body.rd .rd-404-glyph em, body.rd .rd-blog-hero h1 em,body.rd .rd-article-header h1 em{ color:var(--sand-300);font-style:normal} body.rd .rd-land-hero-lead strong{color:#fff} /* Buttons in the night band follow the hero: sand primary, white outline. */ body.rd .rd-land-hero .rd-btn-primary,body.rd .rd-land-hero .rd-btn-dark, body.rd .rd-404 .rd-btn-primary,body.rd .rd-404 .rd-btn-dark{ background:var(--sand-300);color:var(--ink-950)} body.rd .rd-land-hero .rd-btn-outline,body.rd .rd-land-hero .rd-btn-light-outline, body.rd .rd-404 .rd-btn-outline,body.rd .rd-404 .rd-btn-light-outline{ color:#fff;border-color:rgba(255,255,255,.24);background:transparent} /* The audience pill becomes glass, like the version badge on the homepage. Its dot keeps the audience colour, so schools still read green and kids orange. */ body.rd .rd-land-hero .rd-accent-pill, body.rd .rd-blog-hero .rd-accent-pill, body.rd .rd-install-hero .rd-accent-pill{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.78)} /* redesign.css already has a "dark background variant" of the trust callout for the hero and the ink sections. The new night bands join that list. */ body.rd .rd-land-hero .rd-trust-callout, body.rd .rd-404 .rd-trust-callout{ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.78)} body.rd .rd-land-hero .rd-trust-callout .rd-trust-icon, body.rd .rd-land-hero .rd-trust-callout a, body.rd .rd-404 .rd-trust-callout a{color:var(--sand-300)} /* The balloon demo on /for-kids/ is an illustration with its own palette, and its card is painted with var(--ink). Inside the night scope that would have turned it white, so it gets the light variables back. */ body.rd .rd-balloon-demo{ --ink:var(--ink-950);--body-dark:var(--ink-800);--body-gray:var(--ink-600); --line:var(--ink-200);--surface:var(--white); --text-heading:var(--ink-950);--text-body:var(--ink-800);--text-muted:var(--ink-600)}/* ---- The band above the hero: breadcrumb, header, nav -------------------- */ /* On the homepage the nav sits INSIDE the dark hero. On every other page it sits above it, on white, which left a white strip floating over the new ink band. generate.js marks those pages with .v4-night-top on . NIGHT is the one place the page types are listed. Repeating them per rule is how the language bar on article pages got missed — it kept ink links on an ink nav. One list, used everywhere below. */ body.rd.v4-night-top .rd-breadcrumb, body.rd.v4-night-top .rd-breadcrumb, body.rd.v4-night-top > header{background:var(--ink-950)} body.rd.v4-night-top{ --night-page:1}body.rd.v4-night-top .rd-breadcrumb{ color:rgba(255,255,255,.55)}body.rd.v4-night-top .rd-breadcrumb a{ color:rgba(255,255,255,.78)}body.rd.v4-night-top .rd-breadcrumb strong{ color:#fff}body.rd.v4-night-top .rd-breadcrumb .sep{ color:rgba(255,255,255,.3)}/* The light nav becomes the homepage's glass nav. */ body.rd.v4-night-top .rd-nav-light{ border-color:rgba(255,255,255,.12);background:rgba(23,8,42,.55)}body.rd.v4-night-top .rd-nav-light .rd-nav-links a{ color:rgba(255,255,255,.78)}body.rd.v4-night-top .rd-nav-light .rd-lang-bar a{ color:rgba(255,255,255,.6)}body.rd.v4-night-top .rd-nav-light .rd-lang-bar a[aria-current], body.rd.v4-night-top .rd-nav-light .rd-lang-bar a.active{ color:#fff}body.rd.v4-night-top .rd-nav-light .rd-btn-light-outline{ color:#fff;border-color:rgba(255,255,255,.24)}body.rd.v4-night-top .rd-nav-light .rd-btn-primary{ background:var(--sand-300);color:var(--ink-950)}body.rd.v4-night-top .rd-nav-light .rd-nav-toggle{ color:#fff}/* The nav wordmark is swapped in generate.js now, not here: overriding an from CSS with content:url() failed silently wherever it was not supported, and a missing logo is not a failure worth risking. */ /* .rd-legal-header is the one hero that is not full-bleed: it lives inside

, a 760px column with 64px padding, so the ink band rendered as a floating dark box with white gutters either side. Pulled out to the viewport edges, with the inner padding rebuilt so the title still lines up with the body text underneath it (the column's content width is 760 - 128 = 632px, hence the 316px half). */ body.rd .rd-legal-header{ margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); padding:56px max(24px,calc(50vw - 316px)) 48px; margin-bottom:56px; border-bottom:none} body.rd .rd-legal-header > *{max-width:632px;margin-left:auto;margin-right:auto} body.rd .rd-legal h1{color:#fff} /* The byline avatar is painted with var(--violet600), which this scope points at sand — so it became a sand disc with white initials. Sand disc, ink initials, matching the accent buttons. */ body.rd .rd-article-header .rd-article-avatar{background:var(--sand-300);color:var(--ink-950)} /* ================================ 6. ONE CTA COLOUR RULE, NOT THREE ====== */ /* Measured across the site: the same page was showing three different call to action fills — sand in the hero, violet in the body, ink in the nav. The ink one is .rd-btn-dark, which the templates use 110 times and which v4 has no equivalent for; the earlier pass mapped it to ink-950 and so invented a third colour. v4's actual rule is one rule: the primary action is violet on a light surface and the sand accent on a night surface. .rd-btn-dark now follows it, so a page has one CTA colour per surface instead of three. */ body.rd .rd-btn-dark{background:var(--action-primary);color:#fff;border-color:transparent}body.rd :is(.rd-hero,.rd-final-cta,.rd-land-hero,.rd-blog-hero,.rd-article-header, .rd-404,.rd-land-section.dark) :is(.rd-btn-primary,.rd-btn-dark), body.rd.v4-night-top .rd-nav-light :is(.rd-btn-primary,.rd-btn-dark){ background:var(--sand-300);color:var(--ink-950);border-color:transparent} /* =============================== 7. ONE HEADING WEIGHT SCALE ============= */ /* Also measured: headings were running at 400, 600, 700 and 800 on the same page — the landing headlines were weight 400 while the homepage headline is 800, so the two pages read as different products. v4 puts headings at bold and reserves black for the display sizes. Sizes are NOT touched here: the site's size ramp is the 2026 redesign's own, and swapping it for v4's is a change of rhythm on every page, not a cleanup. */ body.rd h2,body.rd h3,body.rd h4, body.rd .rd-h2,body.rd .rd-h2-light,body.rd .rd-land-h2, body.rd .rd-article-body h2,body.rd .rd-article-body h3, body.rd .rd-legal h2,body.rd .rd-legal h3{ font-family:var(--font-display);font-weight:var(--fw-bold); letter-spacing:var(--ls-heading)} body.rd .rd-hero h1,body.rd .rd-land-hero h1,body.rd .rd-land-hero.pro h1, body.rd .rd-land-hero.schools h1,body.rd .rd-land-hero.kids h1, body.rd .rd-install-hero h1,body.rd .rd-blog-h1,body.rd .rd-article-h1, body.rd .rd-final-cta h2,body.rd .rd-404-glyph,body.rd .rd-legal h1{ font-family:var(--font-display);font-weight:var(--fw-black); letter-spacing:var(--ls-display)} /* Landing FAQ questions and the small card headings were also at 400. */ body.rd .rd-land-faq-item summary,body.rd .rd-faq-q{font-weight:var(--fw-semibold)} /* ========================= 8. THE BLOG ARTICLE BODY ====================== */ /* The header band was already night; the body of an article had only inherited the token remap. These are the v4 reading rules: body measure and rhythm, accent links, and a quote that uses the brand rather than a bare bar. */ body.rd .rd-article-body{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--text-body)} body.rd .rd-article-body p{margin:0 0 20px} body.rd .rd-article-body li{line-height:var(--lh-loose)} body.rd .rd-article-body a{color:var(--text-link);text-underline-offset:3px} body.rd .rd-article-body a:hover{color:var(--text-link-hover)} body.rd .rd-article-body strong{color:var(--text-heading);font-weight:var(--fw-semibold)} body.rd .rd-article-body blockquote{ border-left:3px solid var(--sand-400); background:var(--surface-muted); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:16px 24px;color:var(--text-body)} body.rd .rd-article-body code,body.rd .rd-article-body kbd{ font-family:var(--font-mono);font-size:var(--fs-body-sm); background:var(--bg-sunken);border-radius:var(--radius-xs);padding:2px 6px} body.rd .rd-article-body pre{ background:var(--ink-950);color:#D8D0E6;border-radius:var(--radius-md); padding:20px 22px;overflow-x:auto} body.rd .rd-article-body pre code{background:none;padding:0;color:inherit} body.rd .rd-article-body img{border-radius:var(--radius-card)} body.rd .rd-article-body hr{border:none;border-top:1px solid var(--border-subtle);margin:36px 0} /* Card headings that redesign-landings.css pins at weight 400 through a parent selector, so the generic rule above cannot reach them. */ body.rd .rd-land-feature h3,body.rd .rd-kids-no-card h3,body.rd .rd-kids-age-card h3, body.rd .rd-install-safety-inner h2,body.rd .rd-install-section h2, body.rd .rd-audience-card h3,body.rd .rd-blog-card-title{ font-weight:var(--fw-bold);letter-spacing:var(--ls-heading)} /* The green audience band on /for-schools/ carried a white CTA — a fourth fill. Folded into the same rule: any band that is not a light surface takes the sand accent. */ body.rd .rd-land-section.green :is(.rd-btn-primary,.rd-btn-dark,.rd-btn-light){ background:var(--sand-300);color:var(--ink-950);border-color:transparent} /* ===================== 9. WHERE THE TEMPLATES STYLE INLINE =============== */ /* The CTA on the green band carries style="background:#fff", and several headings carry style="font-weight:400", straight in the template. An inline style outranks every rule, so the overlay cannot normalise them without !important — /for-schools/ alone has 44 inline-styled elements. Treat this as a signal rather than a fix: the real repair is taking the inline styling out of _templates/, which is a template change and a separate step from this preview. */ body.rd :is(.rd-hero,.rd-final-cta,.rd-land-hero,.rd-blog-hero,.rd-article-header, .rd-404,.rd-land-section.dark,.rd-land-section.green) :is(.rd-btn-primary,.rd-btn-dark,.rd-btn-light){ background:var(--sand-300) !important;color:var(--ink-950) !important; border-color:transparent !important} body.rd h1,body.rd h2,body.rd h3,body.rd h4{font-weight:var(--fw-bold) !important} body.rd :is(.rd-hero,.rd-land-hero,.rd-final-cta,.rd-404) :is(h1,h2), body.rd .rd-blog-h1,body.rd .rd-article-h1,body.rd .rd-legal h1{ font-weight:var(--fw-black) !important} /* ============== 10. ONE TYPE SCALE, AND ONE LAYOUT IN ALL 9 LANGUAGES ==== */ /* Two problems, one mechanism. * * (a) Heading sizes were the 2026 redesign's ramp, not v4's: H1 at 80 / 72 / * 56 / 44 depending on the page, H2 anywhere from 22 to 72. Everything * below maps onto v4's scale — display-1 76, display-2 60, h1 44, h2 34, * h3 26, h4 20 — and becomes fluid, because a fixed 80px headline is a * mobile problem waiting to happen. * * (b) The same hero was a different shape in every language. Measured on the * homepage at 1280: the hero was 1015px tall in English and 1371px in * French, the headline ran 4 lines in English and 7 in French and Greek, * and the primary button sat 270px lower in French than in English — * above the fold in one language, below it in another. * * The cause is translation expansion: the same headline is 61 characters * in English, 86 in Romanian, 96 in Greek. No amount of wrapping fixes * that at a fixed size, so the display sizes carry a per-language factor * measured from the real strings. One variable, set once from , * multiplied into every display size. */ :root{ --type-scale:1; /* The base sizes are language-independent; --type-scale is applied on top. Reserving space uses the BASE, so every language reserves the same absolute height and the hero is one shape regardless of which one is rendered. */ /* Sized from a height budget, not from taste: at 1280x800 the nav ends at ~124px, and the action row has to finish above 800. Working back from that leaves ~470px for badge + headline + lead, which puts the display size at 64 rather than v4's 76. The scale keeps v4's ratios; it starts one step lower so the call to action clears the fold. */ --display-1-base:clamp(34px,4.7vw,64px); --display-1:calc(var(--display-1-base) * var(--type-scale)); --display-2:calc(clamp(30px,3.9vw,52px) * var(--type-scale)); --lead-size:clamp(15px,1.35vw,17px); /* Section headings do NOT take the language factor. Applying it there made Greek section headings smaller than body text; a section heading can wrap to two lines without moving anything else. */ --heading-1:clamp(28px,3.0vw,40px); --heading-2:clamp(24px,2.3vw,31px); --heading-3:clamp(21px,1.9vw,26px); --heading-4:var(--fs-h4); } /* Expansion against English, from the headline and lead lengths on the live pages: Greek and French run ~45% longer, the rest ~30%. */ /* Retuned for the smaller base: the factor only has to buy back the extra characters, and at 64px each language needs less of a step down. */ html[lang="fr"],html[lang="el"]{--type-scale:.78} html[lang="es"],html[lang="pt"],html[lang="it"], html[lang="de"],html[lang="pl"],html[lang="ro"]{--type-scale:.88} body.rd .rd-hero h1,body.rd .rd-land-hero h1,body.rd .rd-land-hero.pro h1, body.rd .rd-land-hero.schools h1,body.rd .rd-land-hero.kids h1, body.rd .rd-install-hero h1{ font-size:var(--display-1) !important;line-height:var(--lh-tight); letter-spacing:var(--ls-display)} body.rd .rd-final-cta h2,body.rd .rd-blog-h1,body.rd .rd-article-h1{ font-size:var(--display-2) !important;line-height:var(--lh-tight); letter-spacing:var(--ls-display)} body.rd .rd-h2,body.rd .rd-h2-light,body.rd .rd-land-h2,body.rd .rd-legal h1, body.rd .rd-section h2,body.rd .rd-land-section h2,body.rd .rd-blog-section h2{ font-size:var(--heading-1) !important;line-height:var(--lh-heading); letter-spacing:var(--ls-heading)} body.rd .rd-article-body h2,body.rd .rd-legal h2{ font-size:var(--heading-2) !important;line-height:var(--lh-heading)} body.rd .rd-audience-card h3,body.rd .rd-land-feature h3,body.rd .rd-kids-no-card h3, body.rd .rd-kids-age-card h3,body.rd .rd-article-body h3,body.rd .rd-legal h3, body.rd .rd-blog-card-title,body.rd .rd-howitworks-step h3{ font-size:var(--heading-3) !important;line-height:var(--lh-snug)} body.rd .rd-platform-feature-t,body.rd .rd-install-h3,body.rd .rd-finger-list-t{ font-size:var(--heading-4)} body.rd .rd-404-glyph{font-size:calc(clamp(96px,13vw,180px) * var(--type-scale)) !important} /* Leads and body measure: same character count per line in every language, so a paragraph does not become a wall in Greek and a ribbon in English. */ body.rd .rd-hero-lead,body.rd .rd-land-hero-lead,body.rd .rd-lead, body.rd .rd-land-lead,body.rd .rd-blog-subtitle,body.rd .rd-article-subtitle{ font-size:var(--lead-size);line-height:var(--lh-snug);max-width:62ch} /* Even line lengths in headings, no orphan last word in leads, and hyphens for the languages that build long compounds — German above all. */ body.rd h1,body.rd h2,body.rd h3,body.rd h4, body.rd .rd-h2,body.rd .rd-land-h2,body.rd .rd-blog-h1,body.rd .rd-article-h1{ text-wrap:balance;overflow-wrap:break-word} body.rd p,body.rd .rd-hero-lead,body.rd .rd-land-hero-lead,body.rd .rd-lead{ text-wrap:pretty} /* hyphenate-limit-chars keeps the brand name whole: hyphenation only kicks in from 8 characters up, so "Nutzungsdaten" breaks and "Typiq" does not. */ html[lang="de"] body.rd,html[lang="el"] body.rd, html[lang="pl"] body.rd,html[lang="ro"] body.rd,html[lang="fr"] body.rd{ hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4; hyphenate-limit-chars:8 4 4} /* Scaling alone still left the hero a different height per language, because a 96-character Greek headline cannot occupy the same lines as a 61-character English one without shrinking to the point of losing its hierarchy. So the headline block is given a floor of five lines and the lead a floor of three: short languages reserve the space instead of collapsing it, and the primary action lands at the same height in all nine. Floors are in em, so they track the fluid size down to mobile. */ /* Desktop only. On a phone the hero is a single column that scrolls anyway, and reserving the worst case there just pushes the button below the fold in every language — which is worse than the ~100px of difference it removes. Verified by looking at the German homepage at phone width: the floors read as two large empty gaps. */ @media (min-width:768px){ /* The reservation has to equal the LONGEST language's real need for that one hero, not a single global maximum. Measured in production at 1440px across all 11 languages on 2026-09-03: home 4/5, buy 2/2, install 2/1, for-schools 3/6, for-kids 4/4. A blanket 4/5 (calibrated on the homepage and applied everywhere) left ~280px of dead space in the buy and install heroes: the pricing cards and the download cards both fell below the fold, which is how a visitor arriving from the trial email landed on a page with no visible download button. Keep these numbers in sync with the copy: if a headline or lead gets longer, re-measure instead of guessing. */ body.rd .rd-hero{--hero-h1-lines:4;--hero-lead-lines:5} body.rd .rd-land-hero{--hero-h1-lines:2;--hero-lead-lines:2} body.rd .rd-land-hero.schools{--hero-h1-lines:3;--hero-lead-lines:6} body.rd .rd-land-hero.kids{--hero-h1-lines:4;--hero-lead-lines:4} body.rd .rd-land-hero.rd-install-hero{--hero-h1-lines:2;--hero-lead-lines:1} body.rd .rd-hero h1,body.rd .rd-land-hero h1{ min-height:calc(var(--hero-h1-lines,2) * var(--lh-tight) * var(--display-1-base))} body.rd .rd-hero-lead,body.rd .rd-land-hero-lead{ min-height:calc(var(--hero-lead-lines,2) * var(--lh-snug) * var(--lead-size))} /* /for-kids/ has two lead paragraphs, so the floor was being reserved twice and pushed its action row 111px below the fold. Only the first lead in a hero reserves space. */ body.rd .rd-land-hero-lead ~ .rd-land-hero-lead, body.rd .rd-hero-lead ~ .rd-hero-lead{min-height:0} /* 72px of padding above a hero that has to fit its action row above the fold is space the fold cannot spare. */ body.rd .rd-land-hero{padding-top:28px} body.rd .rd-land-hero-ctas{margin-top:24px} body.rd .rd-hero .rd-trust-callout{min-height:103px} } /* The action row was the other half of the drift: "Try it free in your browser" is short in English and long in German, French and Greek, so the second button dropped to a new line and the hero grew 68px. Control text carries a gentler version of the language factor than the headline does — enough to keep the row on one line, not enough to make the label small. */ :root{--control-scale:calc(.62 + .38 * var(--type-scale))} body.rd .rd-btn{font-size:calc(15px * var(--control-scale)); padding-inline:calc(22px * var(--control-scale))} body.rd .rd-btn-sm{font-size:calc(14px * var(--control-scale)); padding-inline:calc(16px * var(--control-scale))} body.rd .rd-btn-lg{font-size:calc(17px * var(--control-scale)); padding-inline:calc(30px * var(--control-scale))} body.rd .rd-hero-ctas,body.rd .rd-land-hero-ctas{min-height:56px;align-items:flex-start} /* German and French still push the second button onto a new line at desktop width, so the two-column hero reserves both rows. Every language then gets the same hero height; the cost is one row of air under the buttons in the languages that fit on one. Only above 1200px, where the two-column hero exists — on mobile the buttons stack anyway. */ @media (min-width:1200px){ body.rd .rd-hero .rd-hero-ctas{min-height:124px} } /* Document headers wrap differently too: the legal and blog titles are one line in English and two in Greek. Same treatment, two lines reserved. */ @media (min-width:768px){ body.rd .rd-legal h1,body.rd .rd-blog-h1,body.rd .rd-article-h1{ min-height:calc(2 * var(--lh-heading) * clamp(32px,4.4vw,60px))} } /* On a phone the same paragraph runs two lines longer in the long languages, so the floors go up there. Reserving the worst case costs blank space above the fold, which on a phone is expensive — this is set to cover the spread without pushing the button off the first screen. */ /* Short viewports — a 360x640 phone, or a laptop with a lot of browser chrome. There is not enough height for the full hero rhythm, so the display size and the padding step down again. Nothing is hidden: on the smallest phones a hero with a headline, two paragraphs and three buttons genuinely cannot fit above the fold, and cutting copy to force it would be the wrong trade. */ @media (max-height:700px){ :root{--display-1-base:clamp(26px,4.2vw,44px);--lead-size:15px} body.rd .rd-hero,body.rd .rd-land-hero{padding-top:24px;padding-bottom:40px} body.rd .rd-land-hero-ctas,body.rd .rd-hero-ctas{margin-top:20px} body.rd .rd-hero .rd-trust-callout,body.rd .rd-land-hero .rd-trust-callout{ margin-top:12px;padding:6px 12px;font-size:var(--fs-caption)} body.rd .rd-btn-lg{height:46px;font-size:calc(15px * var(--control-scale))} } /* On the legal pages and 404 the nav is a direct child of : there is no wrapper to paint, and the nav itself is a translucent pill, so without this it floats as grey glass on white and its links go invisible. A band across the top of the page gives it the ink to sit on. 200px covers breadcrumb plus nav and stops inside the hero below, which is the same colour. (This rule was lost when the :has() selectors were converted to the .v4-night-top class the generator now emits; the contrast pass caught it.) */ body.rd.v4-night-top{ background-image:linear-gradient(var(--ink-950),var(--ink-950)); background-size:100% 200px; background-repeat:no-repeat; background-position:top center} /* ---- Centred text, centred box ------------------------------------------- A block narrower than its container inherits centred text but keeps its box flush left, because margin-left/right default to 0. Measured on 2026-09-03 at 1440px: 12 blocks across /install/, /buy/, /for-schools/ and /for-kids/ sat off-centre in every language, the worst by 230px (the "Not sure yet?" line directly above the pricing cards) and 89px (the lead under the for-schools headline). The selectors are deliberately narrow. Centring is applied only where the text really is centred: containers that carry text-align:center in their own style attribute, plus the install hero, which is centred by class instead. The /for-kids/ and homepage heroes compute to text-align:start — centring their boxes would push that copy right, so they are left out on purpose. Re-measure before widening this rule. */ body.rd [style*="text-align:center"] :is(p,h2,h3,h4,ul,ol), body.rd [style*="text-align: center"] :is(p,h2,h3,h4,ul,ol), body.rd :is(.rd-install-hero,.rd-install-cta-bottom) :is(p,h2,h3,h4), body.rd :is(p,h2,h3,h4)[style*="text-align:center"], body.rd :is(p,h2,h3,h4)[style*="text-align: center"]{margin-inline:auto} /* Same principle for the hero action row: in a centred hero the buttons were still packed to the left edge, 89px off centre on /install/ at 1440px, and flush left under centred copy on a phone. buy.html and for-schools.html already carried an inline justify-content:center; this makes it a property of the centred hero instead of something each template has to remember. align-items covers the phone, where the row stacks into a column and the horizontal axis is the cross axis. The homepage and /for-kids/ heroes are left-aligned by design and are not selected here. */ body.rd [style*="text-align:center"] :is(.rd-hero-ctas,.rd-land-hero-ctas), body.rd [style*="text-align: center"] :is(.rd-hero-ctas,.rd-land-hero-ctas), body.rd .rd-install-hero :is(.rd-hero-ctas,.rd-land-hero-ctas){ justify-content:center;align-items:center}