) fade in on first paint; • Danish pages fade in when the language gate lifts (applyTranslations); • data pages fade + rise

in when DS.dom.reveal() clears the data gate. Unconditional (not gated on prefers-reduced-motion) — the site defaults to animations on regardless of the OS setting; only the manual html.ds-reduce-motion toggle below collapses this to an instant snap. Do NOT widen the body rule below to a bare `body`: a whole-page opacity fade flashes the root backdrop on two-tone / purple-hero pages (login, Browse partners). Pages with a

stay off the body fade on purpose. */ @keyframes ds-page-in { from { opacity: 0; } to { opacity: 1; } } /* Marketing pages have no

gate — fade the whole page in on load. */ body:not(:has(main)) { animation: ds-page-in .24s ease-out both; } /* Danish pages sit behind the language gate; skip the load keyframe and fade in when the gate lifts instead. */ html.ds-lang-loading body { animation: none; opacity: 0; transition: opacity .24s ease-out; } /* Data pages hold

behind the data gate; fade + rise it in on reveal(). The app pages' header now sits in `.page-band` OUTSIDE

, so it rides the same gate — but via its inner .container, never the section itself: the band has to keep painting its gradient from the first frame, or the page shows a light strip where the band belongs and then snaps to purple. */ main, .page-band > .container { transition: opacity .2s ease-out, transform .2s ease-out; } body.ds-pending main, body.ds-pending .page-band > .container { opacity: 0; transform: translateY(8px); } /* Language switch — a brand-colour wash. #ds-lang-veil is a fixed overlay created on demand by toggleLang() in js/translations.js: it fades up to full cover, the strings swap behind it, and it fades back out. toggleLang() skips it entirely under either reduced-motion signal and just swaps. Deliberately a separate overlay rather than fading the PAGE. Fading body's own opacity exposes whatever sits behind it — on a two-tone page like the purple home hero under a white nav that reads as a flash of the wrong colour — which is the same trap documented on .ds-hero-in further down. Here the page underneath is never touched at all; something opaque simply passes over it. ── Why a fade and not the old curtain ── This used to sweep an oversized tilted band across the screen, and it went through several rounds of iOS-only rendering artefacts: a mask that forced a per-frame re-rasterise, then a layer so large (280vw) that Safari split it into tiles which rasterise asynchronously — the ones along the moving edge flashed as blocky squares before they were filled in. All of it came from the same root: a big layer in motion. Nothing here is larger than the screen and nothing moves; only opacity animates, which is the cheapest thing a compositor can be asked to do. Keep it that way. If this ever wants to be fancier again, that whole class of bug comes back with it. */ #ds-lang-veil { position: fixed; inset: 0; z-index: 99999; /* above every other fixed layer (cookie banner, overlays top out at 9999) */ pointer-events: none; opacity: 0; /* inert at rest — no class or visibility juggling needed */ background: linear-gradient(135deg, #8A74E4, #5962C0); } /* Manual "Reduce animations" preference. The inline head guard + js/dom.js set html.ds-reduce-motion from localStorage — the SOLE source of truth; it does NOT follow the OS prefers-reduced-motion setting (the site defaults to animations on regardless of that), only this explicit opt-out. Collapses every animation/transition to an instant jump to its end state so decorative motion (entrance fades, scroll reveals, the rotating headline, the hero cloud video) stops while content still ends up fully visible. Unlayered + !important so it overrides the motion defined unconditionally above. */ html.ds-reduce-motion *, html.ds-reduce-motion *::before, html.ds-reduce-motion *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } @layer reset, tokens, base, nav, components, hero, dashboards, footer, layout, utilities, responsive; @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; /* Reserve the scrollbar's width permanently, whether or not it's actually showing. Without this, a page whose height crosses the "needs a scrollbar" threshold mid-load (e.g. a data page starts tall while async-loading content sits invisible-but-still-in-flow behind the pending gate, then shrinks once real/empty content replaces it) shifts every centred element sideways by the scrollbar's width the instant it appears or disappears. Only visible on tall viewports (5K iMac etc.) where short pages don't need a scrollbar at all once loaded. */ scrollbar-gutter: stable; /* Overscroll (rubber-band) backdrop colour, and the colour shown behind the page while it fades in on load. The browser fills the overscroll area with the root's SOLID background colour (gradients / fixed backgrounds are unreliable here). js/dom.js swaps this to match the nav near the top of the page and the footer near the bottom. Pages whose top area isn't the default light nav backdrop (e.g. the home hero) override --top-bg so the load fade never flashes a mismatched colour. */ --top-bg: #F1F2FD; /* The other end of the same swap — the footer's colour. A token rather than a constant in js/dom.js because the dark theme moves the footer into the page's own hue (see css/theme-dark.css). */ --bottom-bg: #0F0B0A; background-color: var(--top-bg); } /* Sticky footer: on short pages (e.g. an empty state) with a tall viewport (5K iMac etc.), content used to end well above the fold and leave this purple background exposed as a big gap below the footer. flex + the footer's margin-top:auto (see footer.css) pins it to the viewport bottom instead — a no-op on normal pages where content already fills the screen. */ body { min-height: 100vh; background: #5962C0; display: flex; flex-direction: column; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } input, textarea, select { font: inherit; } } @layer tokens { :root { --bg: oklch(53.6% 0.207 276); --surface: oklch(100% 0 0); --fg: oklch(100% 0 0); /* Muted text on the purple bg. Raised from 80% (3.2:1 — failed AA body) to 94% (4.6:1) so hero subtitles clear AA; the faint lavender tint keeps them reading as secondary next to pure-white headings. */ --muted: oklch(94% 0.03 276); --border: oklch(100% 0 0 / 0.12); --accent: oklch(100% 0 0); --accent-hover: oklch(69% 0.15 276); --accent-light: oklch(100% 0 0 / 0.1); /* Unified brand purple for buttons/icons/badges, muted to match the band palette (chroma .207 -> .145, same recipe as .band-deep etc.) instead of the old saturated #5456E2/#4345c9 hex pair those elements carried. Named apart from --bg/--accent because those still double as the page's own deep-purple backdrop token in places this palette pass deliberately left alone. */ --accent-solid: oklch(53.6% 0.145 276); --accent-solid-hover: oklch(46% 0.145 276); --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 60px; --space-xl: 100px; --space-2xl: 140px; --elevation-1: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 4px oklch(0% 0 0 / 0.04); --elevation-2: 0 4px 12px oklch(0% 0 0 / 0.06), 0 2px 4px oklch(0% 0 0 / 0.04); --elevation-3: 0 8px 24px oklch(0% 0 0 / 0.08), 0 4px 8px oklch(0% 0 0 / 0.04); --font-display: 'Inter', -apple-system, system-ui, sans-serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace; --radius-sm: 8px; --radius-md: 9px; --radius-lg: 10px; --radius-xl: 24px; --max-width: 1400px; --content-pad: clamp(20px, 5vw, 56px); } } @layer base { body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: inherit; } h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.02em; } h2 { font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -0.015em; } h3 { font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.01em; } h4 { font-size: clamp(18px, 1.8vw, 24px); } p { color: inherit; opacity: .88; } p + p { margin-top: 1em; } /* .rs-card = the white setup card on role-select + become-partner. Without it here, those pages' headings/labels inherited the page-level white --fg and rendered white-on-white. */ .card, .auth-card, .search-card, .compare-agency-card, .review-card, .agency-card, .step, .nav-links.open, .profile-sidebar .card, .brief-sidebar .card, .rs-card, .dash-tabs, input, select, textarea, .hero-search { --fg: oklch(18% 0.015 276); --muted: oklch(50% 0.015 276); --border: oklch(88% 0.005 276); --accent: oklch(53.6% 0.145 276); --accent-light: oklch(92% 0.04 276 / 0.25); color: var(--fg); } } @layer layout { .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-inline: var(--content-pad); } .section { padding-block: var(--space-xl); } .section-spacious { padding-block: var(--space-2xl); } .section-alt { padding-block: var(--space-xl); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } /* ── Page bands (interior pages) ───────────────────────────────────────── The home page alternates deep-purple and light bands down its length (.section-glow / .section-light, css/hero.css) — that alternation is the single biggest reason it reads as newer than everything else. Every other page was still what the home page used to be: one unbroken field of the body's #5456E2 from the nav to the footer, with white cards floating on it, and every secondary control (counts, sort, chips, pagination, the mobile Filters button) rebuilt as a low-alpha white ghost purely to survive that backdrop. These two classes are the same two bands, promoted out of the home page so any page can use them. Identical values to .section-glow / .section-light, so a page dressed with them resolves the shared components (.card, .btn, .tag, form fields) exactly the way the home page's own sections do. `.page-light` goes on , not on the content element: that element is usually also `.container` (max-width 1400px), so painting the band there would leave purple gutters on wide screens and a purple gap under short pages. On the light band is full-bleed and reaches the sticky footer, while the header band and the footer paint their own colours over the top of it. The token flip is a separate concern, because the base tokens are tuned for the purple backdrop (--fg is WHITE, --muted a near-white lavender): anything sitting on the band has to opt into the light set or its text disappears. `.band-light` does that for a content section by name; the

half of the selector covers the app pages, which have one. The marketing pages (terms, FAQ, how-it-works…) have no

at all — sections sit straight under — so they use the class. ── */ /* A step deeper than `.section-light`'s #ECECF7 (css/hero.css), on purpose. That value is tuned for marketing sections, where a white card is usually the only thing on a wide band and has plenty of room to read as separate. The app pages are dense — a five-across stat row, list cards, action grids — and at #ECECF7 those cards very nearly dissolved into the field. The extra step, together with the border and shadow `.dash-stat-card` now carries (css/dashboards.css), is what makes a row of cards legible AS cards. */ body.page-light { background: #E3E4F3; } .band-light, body.page-light > main { color: oklch(18% 0.015 276); --fg: oklch(18% 0.015 276); --muted: oklch(42% 0.02 276); --accent: oklch(50% 0.145 277); --border: oklch(88% 0.005 276); } /* The deep counterpart, for the page's header banner. Replaces the static SVG `.sky-clouds` those banners used to carry: those are two blurred cloud shapes bobbing on a FLAT purple rectangle, imitating the home hero's animated volumetric sky (the hero's cloud video) without any of it actually being there — which is exactly why they read as decoration rather than design. A lit gradient costs no assets, no WebGL on a results page, and is the same language as the deep bands further down the home page. */ /* Chroma, not lightness, is what makes a large purple field tiring to look at: the brand's 0.207 is tuned for BUTTONS — small, surrounded by white — and at full-band scale it vibrates against the white headings and cards sitting on it. These bands run at ~0.145 instead. Every lightness value in the band hierarchy is untouched (57→49 here, 45→38 in `.section-band`), so the relative depth relationships the design leans on all still hold; the field just stops buzzing. Accents stay fully saturated on purpose — high chroma belongs on the 40px-wide active tab, not on 300px of backdrop. Kept in lockstep with `.section-glow` (css/hero.css), the home page's copy of this same band. */ .band-deep { position: relative; overflow: hidden; background: linear-gradient(180deg, oklch(56% 0.145 276), oklch(48% 0.15 277)); /* Same seam .section-band already draws between itself and its neighbours — gives every banner a defined bottom edge instead of a hard, unmarked colour cut into whatever comes after it. */ border-bottom: 1px solid oklch(100% 0 0 / 0.10); } .band-deep > * { position: relative; z-index: 1; } .band-deep::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 460px at 50% 0%, oklch(100% 0 0 / 0.11), transparent 70%); pointer-events: none; } /* `.hero::after` (css/hero.css) fades the hero's bottom edge into the BODY's purple. Over a light band that fade is a purple smear ending at a hard seam; a band meets the one below it at a clean edge instead. */ .hero.band-deep::after { display: none; } /* The app pages' header banner. Their header (title, subtitle, the one or two header actions) used to be the first child of

; it now lives in its own section so the band can reach the viewport edges —

is `.container` (max-width 1400px), so a background painted there would leave purple-free gutters on wide screens. Being outside

also puts the header back on the ROOT token set, which is the one tuned for the brand purple: the heading inherits white and the subtitle the near-white lavender --muted, with no per-page colour rules. That is the whole reason the token flip is scoped to `> main`. Height is matched to the Browse-partners hero band (css/hero.css `.hero` + search.html's desktop/mobile padding overrides — measured, not derived, since that band's height comes from content + padding rather than a min-height) so every app page's header band reads at the same scale site-wide, whatever its own heading/subtitle content happens to be. profile.html carries its own equal 266px (its padding differs to make room for the hero card riding up into the band), so this and that stay in lockstep by design, not by inheritance. */ .page-band { padding-block: 40px var(--space-lg); min-height: 266px; } } @layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* Global keyboard focus ring */ :focus-visible { outline: 2px solid oklch(53.6% 0.145 276); outline-offset: 3px; } /* Inputs handle focus with box-shadow — skip outline there */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; } } @layer responsive { @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .section { padding-block: var(--space-lg); } .section-spacious { padding-block: var(--space-xl); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding-block: var(--space-lg); } .section-spacious { padding-block: var(--space-lg); } .dash-main, .analytics-main, .briefs-main, .inquiries-main, .listings-main, .inbox-main, .settings-main { gap: var(--space-md); } .dash-action-sep { display: none; } /* Mobile counterpart to .page-band's 266px above, matched to the Browse-partners hero's own mobile height the same way. */ .page-band { min-height: 228px; } } } /* ── Mobile burger menu — UNLAYERED so it beats per-page