/* ═══════════════════════════════════════════════════════════════════════════ sk2-tokens.css — Daylight, the locked V3 public-surface redesign ─────────────────────────────────────────────────────────────────────────── Source of truth for the design: the approved artifact (linked in PRIVATE_DOCS/v3/landing_rebuild_2026-08.md and the memory it points at). This file + sk2-page.css port that artifact's markup and CSS into real Django templates, unchanged in look, adapted only where real templates and real screenshots need something a static mock did not. NAMESPACE: every rule below (except :root, which only defines custom properties and cannot collide) is scoped under `.sk2`, the class the public base template puts on for pages this redesign has reached. Daylight reuses short, generic class names (`.btn`, `.card`, `.nav`, `.wrap`) that are also Bootstrap component classes, and base_public.html still loads Bootstrap for pages this redesign has not reached yet. `.sk2 .btn` beats a bare `.btn` on specificity alone, so this layer never needs `!important` — landing/test_sk_css.py enforces that, same as it does for the sk-* layer. `sk-*.css` (the earlier, partial redesign track) and `landing.css` (frozen, see its own header) are unrelated to this file and keep serving whatever pages still load them. ═══════════════════════════════════════════════════════════════════════════ */ :root { --sk2-paper: #FFFFFF; --sk2-paper-2: #F7F6FB; --sk2-paper-3: #EFEDF6; --sk2-ink: #14111F; --sk2-ink-2: #57516B; --sk2-ink-3: #8C8799; --sk2-line: #E9E6F1; --sk2-line-2: #D8D3E6; --sk2-brand: #4F46E5; --sk2-brand-2: #6D5EF8; --sk2-brand-deep: #2A1FA8; --sk2-brand-wash: #F1EFFE; --sk2-brand-line: #D9D4FB; --sk2-good: #0E9E70; --sk2-good-wash: #E6F7F0; --sk2-warn: #B87407; --sk2-warn-wash: #FDF3E2; --sk2-risk: #D33F2F; --sk2-risk-wash: #FDEDEA; --sk2-sky: #2E9BD6; --sk2-plum: #8B4FD6; --sk2-sh-1: 0 1px 2px rgba(20,17,31,.05); --sk2-sh-2: 0 2px 4px rgba(20,17,31,.04), 0 12px 28px -14px rgba(20,17,31,.22); --sk2-sh-3: 0 4px 8px rgba(20,17,31,.05), 0 30px 60px -24px rgba(20,17,31,.30); --sk2-sh-4: 0 8px 16px rgba(20,17,31,.06), 0 50px 110px -40px rgba(42,31,168,.42); --sk2-ring: 0 0 0 4px rgba(79,70,229,.16); --sk2-r1:10px; --sk2-r2:14px; --sk2-r3:20px; --sk2-r4:30px; /* ── the icon tile, one ladder for the whole site ────────────────────── Three components had grown three different tiles (42/38/40px, radius 12/11/12, glyph 18/14/14) with no reason for any of the differences, and the founder read the result as "the icon is oversized" on the bento and as sections that look separately designed. The size now lives here and the components read it, so a tile cannot drift again and a new one inherits the answer. 34px is deliberate: it is the line-box of the 18-20px headings these tiles sit beside, so the icon reads as the SAME visual height as the heading text rather than looming over it. --sk2-tile-sm is for compact rows (.xprod) where the pair sits on one line with body copy. */ --sk2-tile: 34px; --sk2-tile-sm: 30px; --sk2-tile-r: 10px; --sk2-tile-fs: 15px; --sk2-tile-fs-sm: 13px; /* One card padding and one header gap, for the same reason. */ --sk2-card-pad:26px; --sk2-card-pad-sm:20px; --sk2-chd-gap:12px; --sk2-gut:34px; --sk2-maxw:1320px; --sk2-maxw-wide:1560px; --sk2-maxw-shot:var(--sk2-maxw); --sk2-font:"Schibsted Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif; --sk2-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; } .sk2, .sk2 * { box-sizing:border-box; } /* overflow-x:hidden on html ONLY, deliberately NOT overflow-x:clip and deliberately NOT on body too: the mobile drawer is `position:fixed` and translated off-screen when closed, and can otherwise contribute to document.scrollWidth and open a horizontal scrollbar. `clip` is spec-new (2021) and several mobile/older WebKit engines clip BOTH axes when only overflow-x is set instead of leaving overflow-y visible/auto per spec — which is exactly what made the whole page unscrollable on a real phone. Setting it on BOTH html and body turned out to be its own bug: with overflow explicit on both, body stops propagating its scrolling to the viewport and becomes a second, nested scroll container, which broke every `position:sticky` element on the page (the nav scrolled away instead of sticking). One rule, one scroll container. */ html:has(.sk2) { scroll-behavior:smooth; overflow-x:hidden; } body.sk2 { background:var(--sk2-paper); color:var(--sk2-ink); font-family:var(--sk2-font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; /* ── bridge to the shared public navbar ────────────────────────────── `{% sk_navbar %}` / sk-nav.css render on this page (founder call 2026-09-02 — keep the real, site_nav.py-generated navbar rather than a second hand-typed one). These three re-point the tokens it reads at Daylight's own, so the bar lines up with this page's content column and typography at EVERY breakpoint instead of carrying landing.css's separate 1400px/48px/Inter values. Nothing is hardcoded: --sk2-gut is already responsive (34/26/20/10/8px), so the navbar's gutter tracks the page's gutter down to 320px on its own. --sk-nav-pad-x, not --container-pad: sk-tokens.css declares `--sk-nav-pad-x: var(--container-pad)` on :root, which resolves AT :root, so overriding --container-pad here would never reach it. */ --container-max: var(--sk2-maxw); --sk-nav-pad-x: var(--sk2-gut); --font-body: var(--sk2-font); } .sk2 .crow b, .sk2 .plan__fig, .sk2 .save__fig, .sk2 .spark em, .sk2 .otp input, .sk2 .hstat__pill { font-variant-numeric:tabular-nums; } .sk2 h1, .sk2 h2, .sk2 h3, .sk2 h4 { margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.1; text-wrap:balance; /* color:inherit is load-bearing, not tidiness. landing.css carries a bare `h1,h2,h3,h4,h5,h6 { color: var(--text-main) }`, and an element rule set DIRECTLY on the heading beats a colour inherited from an ancestor no matter how specific that ancestor's selector is. Without this, every heading on a dark band (.final, .panel, any future inverted section) renders near-black on indigo. Inheriting instead means a section sets its colour once and everything inside follows. */ color:inherit; } .sk2 p { margin:0; } /* `:where(.sk2)` scopes this WITHOUT adding specificity, so the whole rule weighs (0,0,1) — element-level. That is still enough to beat the UA stylesheet's blue link colour (author styles always outrank UA), but it loses to any component that sets its own colour with a class. That distinction is load-bearing. As `.sk2 a` (0,1,1) this reset beat `.sk-btn--primary` (0,1,0) and painted the shared navbar's "Start free trial" button black-on-indigo. A blanket element reset inside a page that also hosts shared components must sit BELOW those components, not above them — otherwise every future sk-* component dropped on a Daylight page silently loses its own colour. */ :where(.sk2) a { color:inherit; text-decoration:none; } .sk2 img { display:block; max-width:100%; } .sk2 button { font-family:inherit; } .sk2 :focus-visible { outline:none; box-shadow:var(--sk2-ring); border-radius:8px; } .sk2 .wrap { max-width:var(--sk2-maxw); margin:0 auto; padding:0 var(--sk2-gut); } /* 820px left /about/, /security/ and /faq/ marooned in the middle of a 1320px page with huge empty margins, which the founder flagged on all three. The column is wide enough for real card grids now; prose inside .docbody keeps its own ~70ch cap, so line length still stays readable — the two are different jobs and only one of them wanted 820. */ .sk2 .narrow { max-width:1080px; } /* ── motion engine ─────────────────────────────────────────────────── */ .sk2 .rv { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); } .sk2 .rv.in { opacity:1; transform:none; } .sk2 .rv--l { transform:translateX(-26px); } .sk2 .rv--l.in { transform:none; } .sk2 .rv--r { transform:translateX(26px); } .sk2 .rv--r.in { transform:none; } .sk2 .rv--s { transform:scale(.95); } .sk2 .rv--s.in { transform:none; } @media (prefers-reduced-motion:reduce){ .sk2 .rv, .sk2 .rv.in, .sk2 .rv--l, .sk2 .rv--r, .sk2 .rv--s { opacity:1; transform:none; } /* The hero panel's staggered rows are motion too — they must not leave content invisible for someone who has asked for less of it. */ .sk2 .hpanel .hstat { opacity:1; transform:none; transition:none; } } /* ── type helpers ──────────────────────────────────────────────────── */ .sk2 .kick { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sk2-brand); } .sk2 .kick::before { content:""; width:20px; height:2px; border-radius:2px; background:var(--sk2-brand); } .sk2 .pillbadge { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--sk2-ink-2); background:var(--sk2-paper); border:1px solid var(--sk2-line-2); border-radius:99px; padding:7px 16px 7px 11px; box-shadow:var(--sk2-sh-1); } .sk2 .pillbadge b { color:var(--sk2-ink); font-weight:700; } .sk2 .livedot { width:7px; height:7px; border-radius:50%; background:var(--sk2-good); flex:none; position:relative; } .sk2 .livedot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--sk2-good); opacity:.5; animation:sk2ping 2.4s ease-out infinite; } @keyframes sk2ping { 0%{transform:scale(.7);opacity:.7} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} } .sk2 .h-xl { font-size:clamp(33px,5.4cqi,72px); font-weight:800; letter-spacing:-.045em; line-height:1.02; } .sk2 .h-lg { font-size:clamp(27px,3.6cqi,46px); font-weight:800; letter-spacing:-.04em; line-height:1.06; } .sk2 .h-md { font-size:clamp(21px,2.5cqi,32px); font-weight:700; letter-spacing:-.035em; } .sk2 .lead { font-size:19px; line-height:1.62; color:var(--sk2-ink-2); } .sk2 .markword { position:relative; color:var(--sk2-brand); display:inline-block; } .sk2 .markstroke { position:absolute; left:0; bottom:-.08em; width:100%; height:.22em; overflow:visible; pointer-events:none; } .sk2 .markstroke path { stroke:var(--sk2-plum); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1) .3s; } .sk2 .rv.in .markstroke path { stroke-dashoffset:0; } /* ── buttons ───────────────────────────────────────────────────────── */ /* Heights, padding and type read the PLATFORM's button tokens (sk-tokens.css: 40 / 48 / 32px), not numbers of their own. Daylight's mock drew 44/50/34, which is a fourth button scale on a site that already had one — the founder called the hero pair oversized, and the standard is the answer to that. One system, one set of sizes, and a change to the token moves every button on the site at once. */ .sk2 .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sk-btn-gap); height:var(--sk-btn-h); padding:0 var(--sk-btn-pad-x); border-radius:9px; border:1px solid transparent; font-size:var(--sk-btn-fs); font-weight:700; cursor:pointer; white-space:nowrap; transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease; } .sk2 .btn:hover { transform:translateY(-2px); } .sk2 .btn:active { transform:translateY(0); } .sk2 .btn--pri { background:var(--sk2-brand); color:#fff; box-shadow:0 2px 6px rgba(42,31,168,.24), 0 14px 30px -12px rgba(42,31,168,.55); } .sk2 .btn--pri:hover { background:var(--sk2-brand-2); box-shadow:0 4px 10px rgba(42,31,168,.28), 0 20px 42px -14px rgba(42,31,168,.62); } .sk2 .btn--out { background:var(--sk2-paper); color:var(--sk2-ink); border-color:var(--sk2-line-2); box-shadow:var(--sk2-sh-1); } .sk2 .btn--out:hover { border-color:var(--sk2-ink-3); box-shadow:var(--sk2-sh-2); } .sk2 .btn--txt { color:var(--sk2-ink-2); padding:0 8px; } .sk2 .btn--txt:hover { color:var(--sk2-ink); transform:none; } .sk2 .btn--sm { height:var(--sk-btn-h-sm); padding:0 var(--sk-btn-pad-x-sm); font-size:var(--sk-btn-fs-sm); border-radius:8px; } .sk2 .btn--lg { height:var(--sk-btn-h-lg); padding:0 var(--sk-btn-pad-x-lg); font-size:var(--sk-btn-fs-lg); } .sk2 .btn--block { width:100%; } .sk2 .arrow { transition:transform .2s ease; display:inline-block; } .sk2 .btn:hover .arrow { transform:translateX(3px); } /* `color:inherit` is the same defect as the .xprod flex-direction one, in a second property. Bootstrap's `.card` sets `color: var(--bs-body-color)` (#212529) as well as its flex properties, and base_public.html still loads Bootstrap. Any `.sk2 .card` that did not state a colour therefore painted its heading and copy in Bootstrap's near-black rather than Daylight's ink, on every card grid on the site — measured, not read: `.sk2 h1..h4` correctly resolved to `inherit`, and what it inherited was Bootstrap's. Inheriting instead is also what lets a card sit on an inverted band later. */ .sk2 .card { color:inherit; background:var(--sk2-paper); border:1px solid var(--sk2-line); border-radius:var(--sk2-r3); box-shadow:var(--sk2-sh-2); } /* ── icon tiles: centred ONCE, for every tile on the site ─────────── Each tile keeps its own size and colour in sk2-page.css; the centring behaviour is defined here so it cannot differ between two pages. The founder found glyphs sitting top-left in three different places, all from one cause: a component's `.foo span { display:block }` is (0,2,1) and silently outranks a tile's own (0,2,0) `display:grid`, after which `place-items` does nothing. If a tile ever drifts again, look for a descendant `span`/`b`/`i` rule in the component before touching the tile — and exclude the tile from it with :not(), as .pr and .xprod now do. */ .sk2 .bt__ic, .sk2 .hstat__ic, .sk2 .pr__ic, .sk2 .xprod__ic, .sk2 .thanks__ic, .sk2 .fl__n, .sk2 .founder__av { display:grid; place-items:center; place-content:center; text-align:center; line-height:1; flex:none; } .sk2 .bt__ic > i, .sk2 .hstat__ic > i, .sk2 .pr__ic > i, .sk2 .xprod__ic > i, .sk2 .thanks__ic > i { line-height:1; display:block; } /* ── and their SIZE and SKIN, also once ───────────────────────────── .bt__ic and .pr__ic are the same object on three pages; .xprod__ic is the compact variant of it. Sizes come from the tile ladder above, never from a number typed into a component, so "the icon is bigger on that section" stops being a thing that can happen. */ .sk2 .bt__ic, .sk2 .pr__ic, .sk2 .xprod__ic { width:var(--sk2-tile); height:var(--sk2-tile); border-radius:var(--sk2-tile-r); font-size:var(--sk2-tile-fs); font-weight:800; background:var(--sk2-brand-wash); border:1px solid var(--sk2-brand-line); color:var(--sk2-brand); } .sk2 .xprod__ic { width:var(--sk2-tile-sm); height:var(--sk2-tile-sm); font-size:var(--sk2-tile-fs-sm); } /* ── card header row: tile + title on ONE baseline ────────────────── Every icon card on the site (bento tile, pillar, promise, security point) opens with this row, so the icon-to-title gap, the vertical centring and the title size are decided in one place. The heading keeps its own tag for document outline; only its metrics are normalised here. */ .sk2 .chd { display:flex; align-items:center; gap:var(--sk2-chd-gap); min-width:0; } .sk2 .chd > h3, .sk2 .chd > h4 { margin:0; font-size:18px; line-height:1.2; min-width:0; } /* ── the card's own action, pinned bottom-right ───────────────────── Only ever rendered on a card that IS a link — an arrow on a card that goes nowhere is a dead control (UI_STANDARDS R-UI-10). `margin-top:auto` is what holds it on the bottom edge whatever the description wraps to, which is why the cards that carry one are flex columns. */ .sk2 .card__go { margin-top:auto; align-self:flex-end; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:12px; background:var(--sk2-brand-wash); color:var(--sk2-brand); transition:background .2s ease, color .2s ease, transform .2s ease; } /* ── skip-to-content ───────────────────────────────────────────────── */ /* Ported from landing.css, which this page no longer loads. Off-screen until focused (keyboard-only), never a visible line of text at the top of the page. */ .sk2 .skip-to-content { position:absolute; left:12px; top:-60px; z-index:2000; padding:10px 18px; background:var(--sk2-brand); color:#fff; border-radius:var(--sk2-r1); font-size:13.5px; font-weight:600; text-decoration:none; transition:top .15s ease; } .sk2 .skip-to-content:focus { top:12px; }