/* ════════════════════════════════════════════════════════════════════ ds.css — the design layer. Loaded LAST, on every page, after actaa.css and pages.css. §1–§3 are the shipped card-study overlay: typography and shadow only, nothing that changes a box model, a position or a size, so the home page's measured film choreography cannot be knocked out of alignment by anything there. They keep their original `html:not([data-ds="off"])` guard: setting data-ds="off" on is a one-attribute kill switch back to the pre-overlay look. §4–§8 are the modern layer: cross-document view transitions, scroll-driven scene drift, wrapping and tracking for the subpage grammar, pressable feedback, and form focus. Each rides behind @supports / @media so an older browser simply keeps today's site. ════════════════════════════════════════════════════════════════════ */ html[data-ds="off"] .ds-scope { /* placeholder, keeps the toggle honest */ } /* ── 1. THE TRACKING CURVE ───────────────────────────────────────────── Type gets optically looser as it scales, so display sizes need negative tracking to hold together. Actaa currently ships zero negative tracking anywhere, with the hero running to 72px and the closing to 84px at exactly 0. IMPORTANT: this applies to SENTENCE CASE only. The home's giant words (AI, EMAIL, STARTUPS, WHO IT'S FOR, NETWORK) are uppercase, and uppercase needs the POSITIVE tracking it already has. Those are deliberately untouched. On the home that leaves exactly three headings, which is why the home moves less than the subpages will. ──────────────────────────────────────────────────────────────────── */ html:not([data-ds="off"]) .hero__h { /* 72px, sentence case */ letter-spacing: -0.034em; text-wrap: balance; } html:not([data-ds="off"]) .s14__h { /* 84px, sentence case */ letter-spacing: -0.032em; text-wrap: balance; } html:not([data-ds="off"]) .s13__line { /* 36px, sentence case */ letter-spacing: -0.018em; text-wrap: pretty; } /* Supporting copy: a touch of negative tracking at reading sizes stops the light weight from looking airy, and `pretty` kills orphan lines. */ html:not([data-ds="off"]) .hero__sub, html:not([data-ds="off"]) .s14__sub, html:not([data-ds="off"]) .s13__sub { letter-spacing: -0.006em; text-wrap: pretty; } /* ── 2. THE SHADOW SYSTEM ────────────────────────────────────────────── The home's product mockups (invoice, chat, calendar, tickets, project cards) all carry shadows in the same shape: high alpha, .28 to .38, pulled in hard by a -20px to -30px spread. That reads as a drop shadow stuck under a shape. The new shape is the opposite: low alpha, no spread reduction, much wider. The object stops looking stuck on and starts looking like it is sitting in warm light. Colour stays Actaa's own warm ink rgb(38,33,26), so this is a shape change, not a colour change. Shadows never affect layout, so none of this can disturb the film's measured choreography. ──────────────────────────────────────────────────────────────────── */ html:not([data-ds="off"]) { --sh-sm: 0 10px 24px rgba(38, 33, 26, 0.055); --sh-md: 0 18px 44px rgba(38, 33, 26, 0.085); --sh-lg: 0 30px 66px rgba(38, 33, 26, 0.11); --sh-xl: 0 44px 96px rgba(38, 33, 26, 0.13); } /* small props */ html:not([data-ds="off"]) .mrow, html:not([data-ds="off"]) .bar, html:not([data-ds="off"]) .tc, html:not([data-ds="off"]) .mfall--chat .mcb { box-shadow: var(--sh-sm); } /* mid props */ html:not([data-ds="off"]) .cb, html:not([data-ds="off"]) .ft, html:not([data-ds="off"]) .pc, html:not([data-ds="off"]) .day, html:not([data-ds="off"]) .drow, html:not([data-ds="off"]) .mfall--ask .mfall__card, html:not([data-ds="off"]) .mfall--ask .mfall__pill { box-shadow: var(--sh-md); } /* large props */ html:not([data-ds="off"]) .pg, html:not([data-ds="off"]) .ainotes, html:not([data-ds="off"]) .dask__card, html:not([data-ds="off"]) .dask__pill, html:not([data-ds="off"]) .top__menu { box-shadow: var(--sh-lg); } /* the hero pieces that carry the most weight */ html:not([data-ds="off"]) .ticket { box-shadow: var(--sh-xl), 0 2px 6px rgba(38, 33, 26, 0.05); } html:not([data-ds="off"]) .dinv--in, html:not([data-ds="off"]) .dctl--in { box-shadow: var(--sh-xl); } /* the choreographed fade-in states must keep their zero-alpha start, or the invoice and control panels would pop in fully shadowed */ html:not([data-ds="off"]) .dinv, html:not([data-ds="off"]) .dctl { box-shadow: 0 44px 96px rgba(38, 33, 26, 0); } /* the blue focus ring on the new-person card has to survive the change */ html:not([data-ds="off"]) .dorg--set .pc--new { box-shadow: 0 0 0 2px var(--blue), var(--sh-md); } /* ── 3. SURFACE LIGHT ────────────────────────────────────────────────── The one card-lighting rule that applies on the home. Editorial surfaces get the top-cool, foot-warm gradient and sit lighter than the page, exactly as in the card study. The product mockups are deliberately NOT given this treatment. They are simulations of real software, and dressing them in marketing gradients would break the illusion that you are looking at the actual product. ──────────────────────────────────────────────────────────────────── */ html:not([data-ds="off"]) .s13__facts { background: radial-gradient(120% 72% at 100% 0%, rgba(46,111,214,0.055), rgba(46,111,214,0) 55%), radial-gradient(112% 76% at 0% 100%, rgba(226,215,194,0.55), rgba(226,215,194,0) 60%), linear-gradient(168deg, #FEFCF8 0%, #F6F1E8 52%, #EFE8D9 100%); box-shadow: var(--sh-sm); } /* ── 4. VIEW TRANSITIONS ─────────────────────────────────────────────── Every page opts in, so moving between them becomes a short crossfade instead of a white flash. The nav bar carries its own name: it exists on every page, so the browser holds it steady while only the content fades underneath. The old page leaves a beat faster than the new one arrives. Browsers without cross-document view transitions, and readers who prefer reduced motion, keep the instant navigation. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 0.18s; animation-timing-function: var(--ease, ease); } ::view-transition-new(root) { animation-duration: 0.26s; animation-timing-function: var(--ease, ease); } .top { view-transition-name: top-bar; } ::view-transition-group(top-bar) { animation-duration: 0.26s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ── 5. SCENE DRIFT ──────────────────────────────────────────────────── The porcelain scenes on the subpages drift a little slower than the text scrolling past them, driven by the scroll position itself, off the main thread, no JavaScript. This deliberately animates the `translate` property and nothing else: the figures' reveal transitions own `transform`, and the breathe animation on the images owns `transform` too. `translate` composes with both, so neither tested behavior is touched. The home page has none of these classes, so the film engine never sees this. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .phero__fig, .psec__fig, .phero__three { animation: ds-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } } @keyframes ds-drift { from { translate: 0 clamp(10px, 2vh, 18px); } to { translate: 0 clamp(-18px, -2vh, -10px); } } /* ── 6. THE SUBPAGE GRAMMAR, WRAPPED AND TRACKED ─────────────────────── The same tracking curve as §1, applied to the subpage display sizes, and balanced wrapping so a 76px headline never strands one word on its own line. The lux face keeps its own deliberate +0.01em; it only gains the wrapping. */ .phero__h { letter-spacing: -0.03em; text-wrap: balance; } .pcta h2 { letter-spacing: -0.028em; text-wrap: balance; } .psec__h, .cthanks h2, .prow h3 { text-wrap: balance; } .phero__lead, .psec__lead, .pcta p, .prow p, .cthanks p { text-wrap: pretty; } /* ── 7. PRESSABLES ───────────────────────────────────────────────────── A pill confirms the press the instant it happens: a fast, slight sink on :active, and the unhurried 0.25s release it already had. Press fast, release slow. */ .pill:active { transform: translateY(0) scale(0.97); transition-duration: 0.25s, 0.1s; /* background keeps 0.25s, transform snaps */ } /* The platform dropdown grows from its trigger, not from nowhere: origin at the top edge, and a barely-deflated start. */ .top__drop .top__menu { transform: translateX(-50%) translateY(6px) scale(0.97); transform-origin: 50% 0; } .top__drop:hover .top__menu, .top__drop:focus-within .top__menu { transform: translateX(-50%); } /* ── 8. FORM FOCUS ───────────────────────────────────────────────────── On the contact page, a field's little mono label warms to blue while its input holds focus. Pure CSS, reading the child's state from the parent label. */ .cfield > span { transition: color 0.2s var(--ease, ease); } @supports selector(:has(*)) { .cfield:has(input:focus, select:focus, textarea:focus) > span { color: var(--blue); } }