/* =============================================================================
designerbox-v4.css - the DesignerBox v4 foundation. Loaded LAST on every page.
2026-09-11: the site is rebuilt on the DesignerBox v4 app (~/Desktop/designerbox-v4).
Spec: docs/v4/DESIGN-SYSTEM-V4.md. Source of the values: the app's
src/app/globals.css, which wins whenever it and this file disagree.
WHAT LIVES HERE
1. The one typeface, Schibsted Grotesk, self-hosted in two subsets.
2. Every legacy family name the site ever used, pointed at the same files, so a
font-family literal the migration misses still renders Schibsted Grotesk.
3. The v4 tokens, named "--v4-" + the app's own token name.
4. A handful of global rules the whole site needs (focus, selection, code in the
body face, reduced motion, hiding the retired wordmark dot, Phosphor icon
sizing).
5. The v4 primitives as opt-in classes (.v4-btn-*, .v4-card, .v4-chip, .v4-thumb*).
WHAT DOES NOT
The legacy tokens (--t-*, --db-*, --ss-*, --pink*, --font-clash ...) are
re-pointed where they are defined (soft-studio.css, soft-studio-chrome.css,
home-next-v10.css, theme-global.css), always with a literal fallback, so a page
that fails to load this file still renders the v4 values.
RAW, NOT BUNDLED: every to this file carries ?v=YYYY-MM-DD. The origin
serves CSS immutable for a year; bump the token on every edit.
============================================================================= */
/* ---- 1. The typeface --------------------------------------------------------
Subsets and ranges exactly as Google Fonts serves Schibsted Grotesk v7. The
variable axis runs 400 to 900; v4 uses 400, 500 and 600. */
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/font/SchibstedGrotesk-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/font/SchibstedGrotesk-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;
}
/* ---- 2. Legacy family names, all pointed at Schibsted Grotesk ----------------
Satoshi, General Sans and Switzer were the site's faces; Roboto, Inter, Poppins,
GT America, TT Norms and the mono faces live on in the legacy bundles, the
checkout bundle and the admin. Declaring them here makes this page's copy of
each name resolve to the v4 files, so no surface is left on an old typeface
even where a literal survives. Icon fonts (FontAwesome, Glyphicons) are NOT
aliased. System faces (Helvetica, Arial, -apple-system) are NOT aliased. */
@font-face { font-family: 'Satoshi'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi Variable'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'GeneralSans'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Switzer Variable'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Clash Grotesk'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'ClashGrotesk'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'GT America'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'GT-America'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'TT Norms Pro'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Alma Mono'; font-weight: 100 900; font-display: swap; src: url('/font/SchibstedGrotesk-latin.woff2') format('woff2'); }
/* ---- 3. Tokens ---------------------------------------------------------------
Name = "--v4-" + the app's token name. Light theme only on the site
(decided 2026-09-11); the dark values are in docs/v4/DESIGN-SYSTEM-V4.md. */
:root {
color-scheme: light;
--v4-color-white: #ffffff;
--v4-color-black: #000000;
--v4-color-canvas: #f2f1f0; /* the band tint; the page itself is white */
--v4-color-panel: #fbfbfa;
--v4-color-surface: #ffffff;
--v4-color-surface-2: #f6f5f4;
--v4-color-surface-3: #ecebe9;
--v4-color-surface-inverse: #121212;
--v4-color-stage: #121212;
--v4-color-mount: #ffffff;
--v4-color-ink: #121212;
--v4-color-ink-2: #3d3d3c;
--v4-color-ink-3: #6f6d6a;
--v4-color-ink-inverse: #ffffff;
--v4-color-line: #e6e4e1;
--v4-color-line-2: #d7d4cf;
--v4-color-orb: #e6e4e1;
--v4-color-orb-line: #c9c6c1;
--v4-color-accent: #121212; /* ink: focus, links, selected icons */
--v4-color-accent-fill: #96ff1a; /* the lime. A fill only, always with ink on it */
--v4-color-accent-soft: #e6ffc8;
--v4-color-accent-line: #c9f2a0;
--v4-color-on-bright: #121212;
--v4-color-danger: #c9372c;
--v4-color-danger-soft: #fdecea;
--v4-color-danger-line: #f3b6b0;
--v4-color-success: #121212;
--v4-color-success-soft: #e6ffc8;
--v4-color-fuchsia: #8a6a3d; /* warm bronze, user tags only, never chrome */
--v4-color-fuchsia-soft: #f6efe4;
--v4-color-fuchsia-line: #e5d6bd;
--v4-color-scrim: rgba(18, 18, 18, 0.78);
--v4-color-tint: rgba(18, 18, 18, 0.03);
--v4-color-paper-dot: rgba(18, 18, 18, 0.07);
--v4-radius-xs: 4px;
--v4-radius-sm: 10px; /* every control */
--v4-radius-md: 12px;
--v4-radius-lg: 16px; /* media, menus, thumbnails */
--v4-radius-xl: 20px;
--v4-radius-2xl: 24px; /* cards, dialogs, panels */
--v4-radius-full: 9999px; /* chips, badges, dots only */
--v4-shadow-tile: 0 1px 3px rgba(18, 18, 18, 0.10);
--v4-shadow-lift: 0 2px 10px rgba(18, 18, 18, 0.10);
--v4-shadow-pop: 0 4px 24px rgba(18, 18, 18, 0.16);
--v4-font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
--v4-ease: cubic-bezier(0.4, 0, 0.2, 1);
--v4-dur: 150ms;
--v4-dur-card: 200ms;
/* Type scale (the page kit, docs/v4/SITE-MIGRATION.md section 4b). Taken from
the app, not from marketing templates (Vytas 2026-09-11: the site "does not
look like the designerbox app"): its page titles are 28px. Four heading
sizes and no others: display, h2, h3, h4.
The display size is the one place the site goes past the app (Vytas
2026-09-18: the hero title "is just too small" on desktop). A marketing H1
carries a whole screen, the app's 40px run-screen title carries a panel, so
the cap is 48px at 1412px and up. The 30px phone size is unchanged. */
--v4-text-display: clamp(30px, 3.4vw, 48px); /* 48px desktop, 30px phone */
--v4-text-h2: clamp(22px, 2vw, 28px); /* the app's page title: 28px */
--v4-text-h3: 20px;
--v4-text-h4: 16px;
--v4-text-lead: 16px;
--v4-text-body: 16px;
--v4-text-small: 14px;
--v4-text-label: 12px;
--v4-track-display: -0.03em;
--v4-track-h2: -0.025em;
--v4-track-heading: -0.02em;
--v4-track-label: 0.025em;
/* The page grid. One container for every section: the header capsule sits on
the same box, so every heading, grid and card starts at the capsule's edge
(86px at 1440, 18px on a phone). Reading pages centre a 720px column. */
--v4-page-max: 1380px;
--v4-page-gut: clamp(18px, 4vw, 56px);
--v4-measure: 720px;
--v4-section-y: 80px;
--v4-section-y-sm: 56px;
--v4-head-gap: 32px; /* section head to its content */
/* Controls: two sizes on marketing pages, nothing else. */
--v4-control-h: 44px; /* page CTAs and full-page forms */
--v4-control-h-sm: 36px; /* nav, cards, inline and secondary rows */
}
/* Japanese and Korean take their own system faces for the glyphs Schibsted
Grotesk does not carry, in the right order for each script. */
:root:lang(ja) {
--v4-font-sans: 'Schibsted Grotesk', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, system-ui, sans-serif;
}
:root:lang(ko) {
--v4-font-sans: 'Schibsted Grotesk', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
}
/* ---- 4. Global rules -------------------------------------------------------- */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Machine text keeps the body face (v4, 2026-09-09): a border, a tint and dimmer
ink mark it, never a monospace. The site-wide font enforcer excludes these tags,
so they are named here with the same weight. */
html body code, html body pre, html body kbd, html body samp, html body tt {
font-family: var(--v4-font-sans) !important;
}
::selection {
background: var(--v4-color-accent-soft);
color: var(--v4-color-ink);
}
:focus-visible {
outline: 2px solid var(--v4-color-accent);
outline-offset: 2px;
}
/* The wordmark is lowercase designerbox with no full stop. Vytas removed the lime
dot on 2026-09-11 and the templates no longer render span.wordmark-dot. This
hides it in HTML generated before that (S3 static pages, cached responses) and
in any template that adds it back. */
:root:root:root:root body span.wordmark-dot.wordmark-dot.wordmark-dot {
display: none !important;
}
/* Phosphor icons, rendered inline by ph() (app/lib/icons). 1em so they size with
the text around them, the way the icon set they replace did. */
svg.ph {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex-shrink: 0;
fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---- 5. Primitives, opt-in ---------------------------------------------------
New markup uses these. Existing markup is re-skinned through the legacy
classes in soft-studio.css. */
.v4-btn-primary, .v4-btn-secondary, .v4-btn-ghost {
display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px;
height: var(--v4-control-h); padding: 0 20px; border-radius: var(--v4-radius-sm);
font-family: var(--v4-font-sans); font-size: 14px; font-weight: 500; line-height: 1;
white-space: nowrap; text-decoration: none; cursor: pointer;
transition: color var(--v4-dur) var(--v4-ease), background-color var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease);
}
.v4-btn-sm { height: var(--v4-control-h-sm); padding: 0 14px; font-size: 13px; }
.v4-btn-primary { border: 0; background-color: var(--v4-color-surface-inverse); color: var(--v4-color-ink-inverse); }
.v4-btn-primary:hover { background-color: var(--v4-color-accent-fill); color: var(--v4-color-on-bright); }
.v4-btn-secondary { border: 1px solid var(--v4-color-line); background-color: var(--v4-color-surface); color: var(--v4-color-ink); }
.v4-btn-secondary:hover { background-color: var(--v4-color-surface-2); }
.v4-btn-ghost { border: 0; background: transparent; color: var(--v4-color-ink-2); }
.v4-btn-ghost:hover { background-color: var(--v4-color-surface-3); color: var(--v4-color-ink); }
.v4-card {
position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 8px;
border: 1px solid var(--v4-color-line); border-radius: var(--v4-radius-2xl);
background-color: var(--v4-color-surface); transition: border-color var(--v4-dur-card) var(--v4-ease);
}
.v4-card::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: var(--v4-radius-2xl); opacity: 0; transition: opacity var(--v4-dur-card) var(--v4-ease);
background-color: rgba(230, 255, 200, 0.4);
}
/* Only a card you can click reacts; a static text card washing lime reads as a
link that goes nowhere (/workflows, /brand). */
a.v4-card:hover, .v4-card:has(> a:only-child):hover { border-color: var(--v4-color-accent-line); }
a.v4-card:hover::before, .v4-card:has(> a:only-child):hover::before { opacity: 1; }
/* The 8px frame is for a card that holds a photo. A text-only card takes the card
body padding; with 8px its words sat 9px from the border (/workflows, /brand,
/image-editor, the template step cards). */
.v4-card:not(:has(img, .v4-thumb)) { padding: 20px; }
.v4-chip {
display: inline-flex; flex-shrink: 0; align-items: center; height: 22px; padding: 0 8px;
border: 1px solid var(--v4-color-line); border-radius: var(--v4-radius-full);
background-color: var(--v4-color-surface-3); color: var(--v4-color-ink-2);
font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.01em;
}
.v4-chip-accent { border-color: var(--v4-color-accent-line); background-color: var(--v4-color-accent-soft); color: var(--v4-color-accent); }
.v4-chip-danger { border-color: var(--v4-color-danger-line); background-color: var(--v4-color-danger-soft); color: var(--v4-color-danger); }
/* The composed thumbnail: one photo in, an arrow, the set out, on dotted paper.
Positions per layout: docs/v4/DESIGN-SYSTEM-V4.md section 6.11. */
.v4-thumb-paper {
background-color: var(--v4-color-surface-2); background-size: 12px 12px; background-position: -1px -1px;
background-image: radial-gradient(circle, var(--v4-color-paper-dot) 1px, transparent 1px);
}
.v4-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--v4-color-line); border-radius: var(--v4-radius-lg); }
.v4-thumb-tile { position: absolute; overflow: hidden; padding: 3px; border-radius: var(--v4-radius-xs); background-color: var(--v4-color-mount); box-shadow: var(--v4-shadow-tile); }
/* Two classes deep on purpose: home-next-v10's `body.v10 img { height: auto }`
(0,1,2) beat a one-class rule, so on body.v10 pages the photo stopped short of
its mount and every tile read as a polaroid. */
.v4-thumb .v4-thumb-tile img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: var(--v4-radius-xs); }
.v4-thumb-arrow { position: absolute; top: 38%; left: 33%; width: 15%; color: var(--v4-color-ink); }
/* ---- 6. Hover label guard ---------------------------------------------------
A primary button turns lime on hover and its label must turn ink with it: white
on lime is 1.3:1. Older sheets still pin the label white with more specificity
than the hover rule: theme-global's dark-era `.use-case-page main
a[class*="cta-button"] span` (0,4,4), and home-next-v10's `html body.v10
a.v10-btn` (the homepage never loads soft-studio.css). This block scores (0,5,2)
and loads last, so the label, its spans and any stroked or filled icon follow the
button on every page. Only links and buttons are listed: a container whose class
happens to contain "cta-button" must never repaint the buttons inside it. */
html:root:root:root body .v4-btn-primary:hover,
html:root:root:root body a.v10-btn:not(.v10-btn--ghost):hover,
html:root:root:root body button.v10-btn:not(.v10-btn--ghost):hover,
html:root:root:root body a[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover,
html:root:root:root body button[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover,
html:root:root:root body .mcp-btn:not(.mcp-btn-ghost):hover,
html:root:root:root body .ma2-btn:not(.ma2-btn-ghost):hover,
html:root:root:root body .st-btn--primary:hover,
html:root:root:root body .ent-btn-primary:hover,
html:root:root:root body .fig-btn:not(.fig-btn-ghost):hover,
html:root:root:root body .fl-btn--primary:hover,
html:root:root:root body .nf-btn:not(.nf-btn-ghost):hover,
html:root:root:root body .fa-tile-launch:hover,
html:root:root:root body .dm-final-btn:hover,
html:root:root:root body .dm-submit:hover,
html:root:root:root body .lr-navbar__cta:hover,
html:root:root:root body .lr-hero__btn-primary:hover,
html:root:root:root body .lr-cta__btn-primary:hover,
html:root:root:root body .lr-create__cta:hover,
html:root:root:root body .lr-technique__run-btn:hover,
html:root:root:root body .db-btn-primary:hover,
html:root:root:root body .uc-button-primary:hover,
html:root:root:root body .btn-primary:hover,
html:root:root:root body .btn-primary-large:hover,
html:root:root:root body .hero-carousel-btn-primary:hover,
html:root:root:root body .cs-cta-primary:hover,
html:root:root:root body .ms-generate-btn:hover,
html:root:root:root body .ms-signup-cta:hover,
html:root:root:root body .db-exit__cta:hover,
html:root:root:root body .signup-btn:hover,
html:root:root:root body .ai-generate-btn:hover,
html:root:root:root body .gd-generate-btn:hover,
html:root:root:root body .login-button:hover,
html:root:root:root body .mobile-get-started-btn:hover,
html:root:root:root body .mobile-app-cta__btn:hover,
html:root:root:root body .mobile-menu-cta:hover,
html:root:root:root body .ss-btn:not(.ss-btn--ghost):hover,
html:root:root:root body .hp-btn--primary:hover,
html:root:root:root body .v4-btn-primary:hover *,
html:root:root:root body a.v10-btn:not(.v10-btn--ghost):hover *,
html:root:root:root body button.v10-btn:not(.v10-btn--ghost):hover *,
html:root:root:root body a[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover *,
html:root:root:root body button[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover *,
html:root:root:root body .mcp-btn:not(.mcp-btn-ghost):hover *,
html:root:root:root body .ma2-btn:not(.ma2-btn-ghost):hover *,
html:root:root:root body .st-btn--primary:hover *,
html:root:root:root body .ent-btn-primary:hover *,
html:root:root:root body .fig-btn:not(.fig-btn-ghost):hover *,
html:root:root:root body .fl-btn--primary:hover *,
html:root:root:root body .nf-btn:not(.nf-btn-ghost):hover *,
html:root:root:root body .fa-tile-launch:hover *,
html:root:root:root body .dm-final-btn:hover *,
html:root:root:root body .dm-submit:hover *,
html:root:root:root body .lr-navbar__cta:hover *,
html:root:root:root body .lr-hero__btn-primary:hover *,
html:root:root:root body .lr-cta__btn-primary:hover *,
html:root:root:root body .lr-create__cta:hover *,
html:root:root:root body .lr-technique__run-btn:hover *,
html:root:root:root body .db-btn-primary:hover *,
html:root:root:root body .uc-button-primary:hover *,
html:root:root:root body .btn-primary:hover *,
html:root:root:root body .btn-primary-large:hover *,
html:root:root:root body .hero-carousel-btn-primary:hover *,
html:root:root:root body .cs-cta-primary:hover *,
html:root:root:root body .ms-generate-btn:hover *,
html:root:root:root body .ms-signup-cta:hover *,
html:root:root:root body .db-exit__cta:hover *,
html:root:root:root body .signup-btn:hover *,
html:root:root:root body .ai-generate-btn:hover *,
html:root:root:root body .gd-generate-btn:hover *,
html:root:root:root body .login-button:hover *,
html:root:root:root body .mobile-get-started-btn:hover *,
html:root:root:root body .mobile-app-cta__btn:hover *,
html:root:root:root body .mobile-menu-cta:hover *,
html:root:root:root body .ss-btn:not(.ss-btn--ghost):hover *,
html:root:root:root body .hp-btn--primary:hover * {
color: #121212 !important;
-webkit-text-fill-color: #121212 !important;
}
html:root:root:root body a.v10-btn:not(.v10-btn--ghost):hover svg [stroke]:not([stroke="none"]),
html:root:root:root body a[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover svg [stroke]:not([stroke="none"]),
html:root:root:root body button[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover svg [stroke]:not([stroke="none"]) {
stroke: currentColor !important;
}
html:root:root:root body a.v10-btn:not(.v10-btn--ghost):hover svg [fill]:not([fill="none"]),
html:root:root:root body a[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover svg [fill]:not([fill="none"]),
html:root:root:root body button[class*="cta-button"]:not([class*="ghost"]):not([class*="secondary"]):hover svg [fill]:not([fill="none"]) {
fill: currentColor !important;
}
/* ---- 7. The page kit, opt-in ------------------------------------------------
One grid, one section rhythm, four heading sizes, one eyebrow, two button
sizes. Spec: docs/v4/SITE-MIGRATION.md section 4b. New and rebuilt markup uses
these classes; existing families point their own classes at the same values. */
.v4-wrap {
width: 100%; max-width: var(--v4-page-max, 1380px); margin-inline: auto;
padding-inline: var(--v4-page-gut, clamp(18px, 4vw, 56px)); box-sizing: border-box;
}
/* A reading page (legal, a glossary term, an article): title and text share one
720px column, centred on the page, text left-aligned inside it. */
.v4-measure { max-width: var(--v4-measure, 720px); margin-inline: auto; }
.v4-section { padding-block: var(--v4-section-y, 96px); }
.v4-band { background-color: var(--v4-color-canvas, #f2f1f0); }
@media (max-width: 767.98px) { .v4-section { padding-block: var(--v4-section-y-sm, 64px); } }
.v4-head { margin: 0 0 var(--v4-head-gap, 40px); max-width: 720px; }
.v4-head--center { margin-inline: auto; text-align: center; max-width: 760px; }
.v4-eyebrow {
display: block; margin: 0 0 12px; color: var(--v4-color-ink-3, #6f6d6a);
font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase;
text-wrap: balance; /* a wrapped eyebrow left "TEAMS" alone on the home hero at 390 */
}
.v4-display, .v4-h2, .v4-h3, .v4-h4 { margin: 0; color: var(--v4-color-ink, #121212); font-weight: 600; }
.v4-display { font-size: var(--v4-text-display, clamp(30px, 3.4vw, 48px)); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.v4-h2 { font-size: var(--v4-text-h2, clamp(22px, 2vw, 28px)); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.v4-h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.v4-h4 { font-size: 16px; line-height: 1.35; letter-spacing: -0.01em; }
.v4-lead { margin: 12px 0 0; max-width: 60ch; color: var(--v4-color-ink-3, #6f6d6a); font-size: 16px; line-height: 1.55; }
.v4-sub { margin: 8px 0 0; max-width: 60ch; color: var(--v4-color-ink-3, #6f6d6a); font-size: 15px; line-height: 1.55; }
.v4-head--center .v4-lead, .v4-head--center .v4-sub { margin-inline: auto; }
.v4-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.v4-head--center .v4-cta-row { justify-content: center; }
/* The close: a white card with the hairline, never a grey panel (section 8). */
.v4-close {
padding: 56px 32px; border-radius: var(--v4-radius-2xl, 24px); text-align: center;
background-color: #ffffff; border: 1px solid var(--v4-color-line, #e6e4e1);
}
.v4-close .v4-sub, .v4-close .v4-lead { margin-inline: auto; }
.v4-close .v4-cta-row { justify-content: center; }
/* Page sheets reset the lead's margin with a shorthand (v4-pages.css
`html body.v4p .v4-sub { margin: 16px 0 0 }`), which pinned the 60ch box to the
left of a centred card: the words read off-centre under the title. The centring
is part of the kit, so it outranks any page-level margin reset. */
html:root body .v4-close .v4-sub, html:root body .v4-close .v4-lead,
html:root body .v4-head--center .v4-sub, html:root body .v4-head--center .v4-lead { margin-inline: auto; }
/* No tabular figures here: Schibsted Grotesk's tabular comma is figure-wide, so
"1,200" prints as "1 , 200" (found by group E). Tabular only in columns of
bare integers. */
.v4-stat { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--v4-color-ink, #121212); }
.v4-stat-label { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--v4-color-ink-3, #6f6d6a); }
.v4-link { display: inline-flex; align-items: center; gap: 6px; color: var(--v4-color-ink, #121212); font-size: 14px; font-weight: 500; text-decoration: none; }
.v4-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---- 8. The page shell -------------------------------------------------------
White, everywhere. Vytas, 2026-09-11, twice: first "why so many pages have gray
background - remove" (Soft Studio), then, when the app's grey floor and
off-white panel were tried on the site the same day: "Don't like this gray
background at all. Remove it." So no grey floor, no tinted panel and no grey
section bands: the page is #FFFFFF and blocks are separated by space and by
white cards with the #E6E4E1 hairline. What the site does take from the app is
the quiet chrome and type: the header is a plain bar (no floating capsule), the
titles use the app's scale (section 3 tokens), and every title is left-aligned.
Every page family renders its content in one after .v10-navwrap, so these
selectors reach all of them. */
:root { --v4-shell-bar: 64px; }
/* The ground: white. theme-global paints body with !important. */
html:root body,
html:root body.v10,
html:root body .off-canvas-wrap,
html:root body .inner-wrap {
background-color: #ffffff !important;
}
/* The header: a plain white bar, full width, no capsule. Its content keeps the page
grid (the .v10-wrap box), so the wordmark lines up with the content below. A
hairline appears under it once the page scrolls. */
/* The wrapper keeps its natural height: the phone drawer and the mega panels live
inside it, and a fixed height with flex centring pushed an open drawer 96px off
the top of a phone screen. The 64px bar comes from the nav row (8px + 48px + 8px). */
html:root body .v10-navwrap {
top: 0 !important;
padding-block: 8px;
background-color: #ffffff;
border-bottom: 1px solid transparent;
transition: border-color 150ms var(--v4-ease, ease);
pointer-events: auto;
}
html:root body .v10-navwrap:has(.v10-nav.is-stuck) { border-bottom-color: #e6e4e1; }
/* The announcement strip (frontend_promo_bar.pug) renders inside the wrapper,
above the nav row. Two things follow, both keyed on the strip being present
so a page that does not render it (the /mcp family) is untouched:
1. the wrapper's own 8px top padding goes, so the ink strip is flush with the
top of the window rather than sitting on a white sliver;
2. the page gives back what the taller bar covers.
That second one is PADDING ON THE BODY, not a bigger --v4-shell-bar. The
token only reaches pages whose is a sibling of the header, and the
ones that lay their content out some other way would have kept their old
64px offset under a 98px bar — the first line of the page would render under
the header. Body padding shifts every page the same way, whatever its
structure. It is the strip minus the 8px of wrapper padding that rule 1
removes, so the gap between the bar and the first block is the same as on a
page with no strip. */
html:root body .v10-navwrap:has(.v10-promo) { padding-top: 0; }
html:root body:has(.v10-promo) { padding-top: calc(var(--ss-promo-h, 40px) - 8px); }
html:root body .v10-nav,
html:root body .v10-nav.is-stuck {
background: transparent !important;
border-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html:root body .v10-nav__in { min-height: 48px; padding: 0; }
html:root body a.v10-logo { font-size: 17px; margin-right: 16px; min-height: 36px; }
html:root body .v10-nav__btn,
html:root body .v10-nav__plain {
min-height: 36px; padding: 0 10px; border-radius: 10px;
font-size: 13px; font-weight: 500; color: #3d3d3c;
}
/* Menus open from their own trigger, as the app's menus do: 6px under the link,
left edge on the link (Vytas: "why dropdown is not next to products link"). They
used to be centred under the whole header. soft-studio-chrome.js shifts a wide
panel left when it would run past the window. The ::before strip bridges the
gap, so moving the pointer from the link into its panel keeps it open. */
@media (min-width: 1081px) {
html:root body .v10-nav__item { position: relative; }
html:root body .v10-mega {
left: 0; right: auto; top: calc(100% + 6px);
margin: 0 !important;
max-width: calc(100vw - 32px);
}
html:root body .v10-mega--wide { width: 1040px; }
html:root body .v10-mega--mid { width: 800px; }
html:root body .v10-mega::before {
content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
}
/* The content: white, starting under the bar. No panel, no inset, no corners. */
html:root body .v10-navwrap ~ main {
position: relative;
box-sizing: border-box;
margin-top: var(--v4-shell-bar) !important;
background-color: #ffffff !important;
}
/* The content's own top margin replaces the homepage's flow spacer. */
html:root body .v10-navspacer { display: none !important; }
/* No grey section bands: sections paint no ground of their own. */
html:root body .v10-navwrap ~ main > section,
html:root body .v10-navwrap ~ main > .v4-section,
html:root body .v10-navwrap ~ main > .v4-band {
background-color: transparent !important;
background-image: none !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
/* The first block starts 48px under the bar (32px on a phone), on every page. The
old heroes reserved 96 to 162px for a floating header, which left every page a
different empty band at the top. */
html:root body .v10-navwrap ~ main > section:first-of-type { padding-top: 48px !important; }
@media (max-width: 767.98px) {
:root { --v4-shell-bar: 60px; }
html:root body .v10-navwrap ~ main > section:first-of-type { padding-top: 32px !important; }
}
/* The footer: white, one hairline above it. */
html:root body #footerElem.dbf {
background-color: #ffffff !important;
border-top: 1px solid #e6e4e1 !important;
}