/* Site-wide semantic layer. Raw ramps remain defined by tokens.css. */ :root{ --theme-page:#fdfdfd;--theme-surface:#fff;--theme-elevated:#f8f8f8; --theme-ink:#111214;--theme-muted:#686b73;--theme-rim:rgba(17,18,20,.12); --theme-material:rgba(255,255,255,.86);--theme-focus:#111214; --theme-atmosphere:transparent;--theme-duration:400ms; /* THESE TWO WERE DEFINED IN DARK ONLY, and that is a half-token rather than a dark-mode decision. --theme-rim-strong had every light consumer running on the rgba() fallback hand-written into tokens.css:571, and --theme-ink-soft has no fallback anywhere -- a light-mode rule naming it computes to nothing and the property is dropped. controls.css:134 documents the first case and routes around it with color-mix rather than using the token, which is the shape of a token nobody trusts. Both values are the light ramp's existing ones, so nothing on screen moves: #3f424a is the softened prose ink the case studies already reach for through --c700's neighbourhood, and .20 is the alpha tokens.css was already falling back to. */ --theme-ink-soft:#3F424A;--theme-rim-strong:rgba(17,18,20,.20); /* The field caret. It lives here rather than in controls.css because its ink is a theme decision, and here rather than on the two builder pages because both of them had drawn their own copy of the same chevron. */ --field-caret:url('data:image/svg+xml;utf8,'); } :root[data-theme="dark"]{ color-scheme:dark; --theme-page:#0B0C0F;--theme-surface:#111318;--theme-elevated:#171A21; --theme-ink:#F4F5F7;--theme-muted:#A7ABB4;--theme-rim:rgba(255,255,255,.14); /* --theme-focus:#D9D7FF LEFT DELIBERATELY ALONE, and the reason is worth recording because the adoption audit called it stale. The case for stale: light's focus is light's ink (#111214), and the accent migration made --accent ink (#121212), so dark's focus "should" be dark's ink. The case against, which won: --theme-atmosphere is still rgba(103,99,228,.16) on the very next line, so the dark theme does deliberately keep a violet identity that light does not have -- and tools/site-theme-contract.py:162 PINS this exact value, which is a deliberate assertion by whoever wrote it, not an oversight. Changing it is a design decision about what dark mode IS, which is bigger than a token clean-up and belongs to whoever owns that call. Flagged in the 2026-08-08 adoption report; not changed unilaterally. */ --theme-material:rgba(17,19,24,.86);--theme-focus:#D9D7FF; --theme-atmosphere:rgba(103,99,228,.16); --theme-ink-soft:#CDD0D6;--theme-rim-strong:rgba(255,255,255,.22); --field-caret:url('data:image/svg+xml;utf8,'); } html,body{background-color:var(--theme-page);color:var(--theme-ink)} ::selection{background-color:var(--theme-focus);color:var(--theme-page)} :focus-visible{outline-color:var(--theme-focus)} input,select,textarea,button{ color:var(--theme-ink);accent-color:var(--theme-focus); } input,select,textarea{background-color:var(--theme-surface);border-color:var(--theme-rim)} html{scrollbar-color:var(--theme-muted) var(--theme-page)} ::-webkit-scrollbar{background-color:var(--theme-page)} ::-webkit-scrollbar-thumb{background-color:var(--theme-muted);border-color:var(--theme-page)} /* Shared disclosure chrome; page-level menu geometry remains untouched. */ .jbDiscMenu{background-color:var(--ctl-menu-ground);box-shadow:var(--ctl-container-rim)} /* Authored media owns its existing effects. The site-theme contract rejects any data-theme/theme-ready rule that applies filter, opacity, or blend changes to it. */ /* A named specimen boundary can consume the shared rim without changing media pixels. */ .specimenOutline,.specimen-outline{box-shadow:0 0 0 var(--hair-w) var(--theme-rim) inset} /* Portfolio pages opt into narrow adapters so authored Hero and media styling keep their own palettes. Purple stays on focus, selection, and primary links. */ :root[data-theme="dark"] body[data-theme-page="home"] .cases{ background-color:var(--theme-page);color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="home"] .csTabs::before{ background-color:var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] .csTab{ color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="home"] .csTab:hover, :root[data-theme="dark"] body[data-theme-page="home"] .csTab:focus-visible, :root[data-theme="dark"] body[data-theme-page="home"] .csTab.on{ color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="home"] .csTabInk{ background-color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="home"] .csFrame, :root[data-theme="dark"] body[data-theme-page="home"] .reelFrame:not(.isFull){ background-color:var(--theme-elevated); box-shadow:0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] :is(.csName,.csInfoVal){ color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="home"] :is(.csYear,.csName .soon,.csInfoLabel,.csHint .dhl,.csHint svg,.glTeaseLine,.hmTeaseLine){ color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="home"] .csItem.wip .csYear{ color:var(--theme-ink-soft);border-color:var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] .csInfoCard{ background-color:var(--theme-material); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] .csInfoRow+.csInfoRow{ border-color:var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] .vcInner{ background-color:var(--theme-material);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] .vcArr{color:var(--theme-focus)} :root[data-theme="dark"] body[data-theme-page="home"] .csGo:focus-visible{outline-color:var(--theme-focus)} :root[data-theme="dark"] body[data-theme-page="home"] .csBackveil{background-color:var(--theme-page)} :root[data-theme="dark"] body[data-theme-page="home"] .reelTap{ background-color:var(--theme-surface);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="home"] .siteFoot{color:var(--theme-ink)} /* About uses the same hierarchy as the editorial case studies while keeping the sticky gallery composition and every photograph dimension unchanged. */ :root[data-theme="dark"] body[data-theme-page="about"] :is(.abTitle,.abBody h2,.abBody p,.abFactV){ color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="about"] :is(.abBody .abLabel,.abFactK,.abCap,.abShot figcaption,.amsHint){ color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="about"] .abIn{ color:var(--theme-focus);text-decoration-color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="about"] .abIn:hover{ color:var(--theme-ink);text-decoration-color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="about"] .abLink{ background-color:var(--theme-surface);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="about"] .abLink:hover{ background-color:var(--theme-elevated);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim-strong); } :root[data-theme="dark"] body[data-theme-page="about"] .abLinkPrimary, :root[data-theme="dark"] body[data-theme-page="about"] .abLinkPrimary:hover{ background-color:var(--theme-focus);color:var(--theme-page);box-shadow:none; } :root[data-theme="dark"] body[data-theme-page="about"] .abLinkPrimary .abLinkArrow{ color:var(--theme-page); } :root[data-theme="dark"] body[data-theme-page="about"] .abLinkArrow{color:var(--theme-muted)} :root[data-theme="dark"] body[data-theme-page="about"] .amsDots i{background-color:var(--theme-rim)} :root[data-theme="dark"] body[data-theme-page="about"] .amsDots i.on{background-color:var(--theme-focus)} :root[data-theme="dark"] body[data-theme-page="about"] :is(.abLink,.abIn,.abStack):focus-visible{ outline-color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="about"] .abStack{ box-shadow:0 0 0 var(--hair-w) var(--theme-rim); } @media(max-width:880px){ :root[data-theme="dark"] body[data-theme-page="about"] .abStack{box-shadow:none} :root[data-theme="dark"] body[data-theme-page="about"] .abShot img{ box-shadow:0 0 0 var(--hair-w) var(--theme-rim); } } /* Case-study editorial system: neutral type hierarchy, near-black surfaces, violet only for state, focus, and inline navigation. */ :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.head,.roleHead,.secHead,.hmwQ,.subHead,.statNum,.fv,.ovBody,.role p,.hq,.hlabel,.stepHead,.playerStep,.baCapLabel,.pullBody){ color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.lede,.secBody,.statCap,.baBody,.baCap,.playerNote,.baNote){ color:var(--theme-ink-soft); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.eyebrow,.kicker,.fk,.fvsub,.rlabel,.statUnit,.statSrc,.cap,.shotCap,.shotNote,.hmwLabel,.hsrc,.subKick,.playerKick,.pullWho,.photoPair figcaption,.csReach,.scrapTag,.baLabel,.demoLabel){ color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.secBody,.ovBody,.role,.lede,.baBody) strong, :root[data-theme="dark"] body[data-theme-page="case-study"] .baCol.isAfter .baNote{ color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="case-study"] .facts{ border-color:var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.chap,.clabel){color:var(--theme-muted)} :root[data-theme="dark"] body[data-theme-page="case-study"] .tick{background-color:var(--theme-muted)} :root[data-theme="dark"] body[data-theme-page="case-study"] .chap[aria-current="true"] :is(.clabel){color:var(--theme-ink)} :root[data-theme="dark"] body[data-theme-page="case-study"] .chap[aria-current="true"] .tick{ background-color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="case-study"] .chap:hover .clabel, :root[data-theme="dark"] body[data-theme-page="case-study"] .chap:focus-visible .clabel{ color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.wide,.cmp,.cover){ background-color:var(--theme-elevated); } :root[data-theme="dark"] body[data-theme-page="case-study"] .scrollbox{ background-color:var(--theme-surface); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.cmpKnob,.baGo,.baLabel,.scrapTag,.pair,.baFrame){ background-color:var(--theme-surface);color:var(--theme-ink-soft); border-color:var(--theme-rim);box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.cmpKnob,.baGo):hover, :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.cmpKnob,.baGo):focus-visible{ background-color:var(--theme-elevated);color:var(--theme-ink); border-color:var(--theme-rim-strong); } :root[data-theme="dark"] body[data-theme-page="case-study"] .baCol.isAfter .baLabel{ background-color:var(--theme-focus);border-color:var(--theme-focus);color:var(--theme-page);box-shadow:none; } :root[data-theme="dark"] body[data-theme-page="case-study"] .seqTicks i{ background-color:var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="case-study"] .seqTicks i.on{ background-color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="case-study"] .content .footIn{ color:var(--theme-focus);text-decoration-color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="case-study"] .content .footIn:hover, :root[data-theme="dark"] body[data-theme-page="case-study"] .content .footIn:focus-visible{ color:var(--theme-ink);text-decoration-color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.footIn,.chap,.scrollbox):focus-visible{ outline-color:var(--theme-focus); } :root[data-theme="dark"] body[data-theme-page="case-study"] .emerge{background-color:var(--theme-page)} /* Media rims live outside the authored bitmap. No width, height, radius, object-fit, margin, opacity, filter, or blend behavior changes here. */ :root[data-theme="dark"] body[data-theme-page="case-study"] .cover, :root[data-theme="dark"] body[data-theme-page="case-study"] :is(.wide,.cmp,.closeShot img,.darlings img,.photoRow img,.shot img,.buildStage img,.stepShot img,.photoPair img,.playerStage img,.tvFrame img,.baPhone img,.sketch img,.videoFrame,.demoPhone,.demoPoster){ box-shadow:0 0 0 var(--hair-w) var(--theme-rim); } /* Play keeps arena art, faces, team channels, and physics in their authored palettes. This adapter themes only the surrounding interface and game text. */ :root[data-theme="dark"] body[data-theme-page="play"] :is(.pLede,.pCardT,.pTeamTitle,.hmCount,.tvCup,.tvName,.tvChampNm,.tvSheetTitle,.tvStandNm){ color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="play"] :is(.pCardD,.pTeamHint,.pTeamColN,.tvRound,.tvDist,.tvV,.tvTape,.tvBoardHd,.tvRdH,.tvFxT,.tvStandRk,.tvStandOut){ color:var(--theme-muted); } :root[data-theme="dark"] body[data-theme-page="play"] .pCard{ background-color:var(--theme-surface);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] .pCard:hover{ box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim-strong); } /* THE VIOLET ON #pcHead IS GONE; THE EMPHASIS IT WAS BURIED IN IS NOT. Jayden: "some aren't legible, others are like gradient on text and buttons for no reason." Measured at 1440 in Night, this was the "for no reason": three of the four hub cards were --theme-surface (#111318) with a rgba(255,255,255,.14) hairline, and the first one was --theme-elevated (#171A21) with a rgba(217,215,255,.46) LAVENDER hairline, a lavender title (#D9D7FF where its three siblings are #F4F5F7) and a 60px-blurred violet radial bleeding 22px out of its bottom edge. Three separate things were wrong with it and only one is contrast: 1. IT EXISTS ONLY IN DARK. Light has no #pcHead rule anywhere in the repo, so the four cards are identical in five of the six time-of-day states and one card is decorated in the sixth. A component that changes MEANING with the theme is the definition of a theme that was not audited -- a lavender-titled card among three neutral ones reads as selected or current, and none of them is. 2. A BLURRED SHADOW IS A GRADIENT, and this one is on a control. The card is an to headmaker.html; a fill that fades out underneath it is the thing the control system bans on interactive grounds, and it is what made a button look like it had a gradient on it. 3. CHROME NEVER CASTS. `0 22px 60px -48px` is a drop shadow on a card that stands on nothing, which is the site's own no-cast-shadows rule broken by the one card the rule was written about. WHAT SURVIVES IS THE ONE CHANNEL THAT WAS ASSERTED. tools/hm-check.py:40 pins `#pcHead { background-color: var(--theme-elevated) }` under the label "Add-your-head emphasis", so the step up the depth ladder is a decision somebody made on purpose and it stays. The rim, the glow and the title ink were not pinned by anything, and they are three more channels saying what the ground already says -- the site's rule for emphasis is one channel, and for chrome it is never a cast one. The card keeps .pCard's own --theme-rim hairline by simply not declaring a box-shadow of its own. MEASURE THIS BEFORE TRUSTING IT, THOUGH, and the number is the reason this note is long: --theme-elevated (#171A21) against --theme-surface (#111318) is 1.09:1. The emphasis the contract names was being carried almost entirely by the violet, not by the ground it pins -- so with the violet gone, card one is very nearly identical to its three siblings, which is what light has always looked like. If "Add your head" is genuinely meant to be the loud door, that wants deciding for all six states in play.html beside the other three cards, not restoring here. Flagged, not silently re-styled. */ :root[data-theme="dark"] body[data-theme-page="play"] #pcHead{ background-color:var(--theme-elevated); } :root[data-theme="dark"] body[data-theme-page="play"] :is(.pCard .gIco,.pCardD){color:var(--theme-muted)} :root[data-theme="dark"] body[data-theme-page="play"] .pCard:hover :is(.gIco,.pCardD){color:var(--theme-ink)} :root[data-theme="dark"] body[data-theme-page="play"] .pCardPrev{ background-color:var(--theme-elevated);box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } /* Launch menu and the full pre-match picker use the same three neutral depths. */ :root[data-theme="dark"] body[data-theme-page="play"] .moodTeamsBtn{ background-color:var(--theme-surface);border-color:var(--theme-rim);color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="play"] .moodMenu:not(.ctl-menu){ background-color:var(--theme-elevated);border-color:var(--theme-rim);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] :is(.moodItem,.moodGo):not(.ctl){color:var(--theme-ink)} :root[data-theme="dark"] body[data-theme-page="play"] :is(.moodItem,.moodGo):not(.ctl):hover, :root[data-theme="dark"] body[data-theme-page="play"] :is(.moodItem,.moodGo):not(.ctl):focus-visible{ background-color:var(--theme-surface);color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="play"] .moodSep{background-color:var(--theme-rim)} :root[data-theme="dark"] body[data-theme-page="play"] #endGame, :root[data-theme="dark"] body[data-theme-page="play"] #endGame .gIco{color:#FF9B8E} :root[data-theme="dark"] body[data-theme-page="play"] .pTeamIn{ background-color:var(--theme-surface);box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] :is(.pBtn,.teamUndo){ background-color:var(--theme-elevated);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] :is(.pBtn,.teamUndo):hover, :root[data-theme="dark"] body[data-theme-page="play"] :is(.pBtn,.teamUndo):focus-visible{ color:var(--theme-ink);box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim-strong); } :root[data-theme="dark"] body[data-theme-page="play"] .pBtnGo, :root[data-theme="dark"] body[data-theme-page="play"] .pBtnGo:hover{ background-color:var(--theme-focus);color:var(--theme-page);box-shadow:none; } :root[data-theme="dark"] body[data-theme-page="play"] .teamChip{background-color:var(--theme-elevated)} :root[data-theme="dark"] body[data-theme-page="play"] .pTeamCol.dragOver{outline-color:var(--theme-focus)} /* Live match messages remain above the authored pitch and team effects. */ :root[data-theme="dark"] body[data-theme-page="play"] .hmScore .sbCard{ background-color:var(--theme-surface);border:var(--hair-w) solid var(--theme-rim); -webkit-backdrop-filter:blur(18px) saturate(118%);backdrop-filter:blur(18px) saturate(118%); } :root[data-theme="dark"] body[data-theme-page="play"] .hmCount{color:var(--theme-ink)} :root[data-theme="dark"] body[data-theme-page="play"] :is(.battleCount,.battleBadge){ background-color:var(--theme-surface);border-color:var(--theme-rim);color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="play"] .hmLowerThird{ background-color:rgba(17,19,24,.94);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } /* Tournament setup, draw sheet, bracket, and champion/result states. Team bars and face pixels stay outside these selectors. */ :root[data-theme="dark"] body[data-theme-page="play"] .tvChip{ background-color:var(--theme-surface);color:var(--theme-ink-soft); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] .tvSheetPanel{ background-color:var(--theme-surface);color:var(--theme-ink-soft); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] .tvChip:hover, :root[data-theme="dark"] body[data-theme-page="play"] .tvChip:focus-visible, :root[data-theme="dark"] body[data-theme-page="play"] .tvChip.tvArmed{ background-color:var(--theme-elevated);color:var(--theme-ink); box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim-strong); } :root[data-theme="dark"] body[data-theme-page="play"] .tvGo{ background-color:var(--theme-focus);color:var(--theme-page); } :root[data-theme="dark"] body[data-theme-page="play"] .tvGo:focus-visible{outline-color:var(--theme-focus)} :root[data-theme="dark"] body[data-theme-page="play"] .tvRdH{border-color:var(--theme-rim)} :root[data-theme="dark"] body[data-theme-page="play"] .tvRdH.tvRdNow{ color:var(--theme-ink);border-color:var(--theme-ink); } :root[data-theme="dark"] body[data-theme-page="play"] .tvFx.tvFxNext{ background-color:rgba(103,99,228,.12);box-shadow:inset 0 0 0 var(--hair-w) var(--theme-rim); } :root[data-theme="dark"] body[data-theme-page="play"] :is(.tvFxT.tvFxWon,.tvFxS,.tvTape em){color:var(--theme-ink)} :root[data-theme="dark"] body[data-theme-page="play"] :is(.tvFxT.tvFxTbd,.tvFxT.tvFxLost){color:var(--theme-muted)} :root[data-theme="dark"] body[data-theme-page="play"] .tvStandRow{border-color:var(--theme-rim)} :root[data-theme="dark"] body[data-theme-page="play"] .tvSheetScrim{background-color:rgba(4,5,8,.78)} .theme-ready body[data-theme-page="play"] :is(.pLede,.pCardT,.pCardD,.pTeamTitle,.pTeamHint,.tvCup,.tvRound,.tvDist,.tvName,.tvTape,.tvRdH,.tvFxT,.tvStandNm){ transition-property:color,border-color; transition-duration:var(--theme-duration); transition-timing-function:var(--ease-out); } /* Theme changes transition as one system only after synchronous bootstrap. */ .theme-ready body[data-theme-page="home"] :is(.cases,.csInfoRow,.csName,.csYear,.csInfoLabel,.csInfoVal,.reelTap), .theme-ready body[data-theme-page="about"] :is(.abTitle,.abBody h2,.abBody p,.abFactK,.abFactV), .theme-ready body[data-theme-page="case-study"] :is(.head,.roleHead,.secHead,.hmwQ,.subHead,.statNum,.fv,.ovBody,.role p,.lede,.secBody,.statCap,.cap,.eyebrow,.kicker,.fk,.rlabel,.statSrc,.csReach,.demoLabel,.scrollbox,.baGo,.baLabel,.scrapTag,.pair,.baFrame){ transition-property:color,background-color,border-color,box-shadow,text-decoration-color; transition-duration:var(--theme-duration); transition-timing-function:var(--ease-out); } /* .facts arrives once per view -> --dur-enter. The knob is a control changing its own shadow on focus/hover -> --dur-state. Both were writing the ladder's own numbers as literals, and both wrote cubic-bezier(.2,.8,.2,1) longhand for what --ease-out already is. Values unchanged at 500ms; the knob moves 200 -> 160 so it matches every other control's hover-in on the site. */ .theme-ready body[data-theme-page="case-study"] .facts{ transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out),border-color var(--theme-duration) var(--ease-out) } .theme-ready body[data-theme-page="case-study"] .cmpKnob{ transition:box-shadow var(--dur-state) var(--ease-out),background-color var(--theme-duration) var(--ease-out),color var(--theme-duration) var(--ease-out) } .theme-ready body,.theme-ready .jbDiscMenu,.theme-ready input,.theme-ready select,.theme-ready textarea{ transition:background-color var(--theme-duration) var(--ease-out), color var(--theme-duration) var(--ease-out), border-color var(--theme-duration) var(--ease-out), box-shadow var(--theme-duration) var(--ease-out); } @media(max-width:760px){:root{--theme-duration:280ms}} @media(prefers-reduced-motion:reduce){ :root{--theme-duration:0ms} .theme-ready body,.theme-ready .jbDiscMenu,.theme-ready input,.theme-ready select,.theme-ready textarea,.theme-ready body[data-theme-page="case-study"] .cmpKnob{transition-duration:0ms} .theme-ready body[data-theme-page="case-study"] .facts{transition:none} } @media(forced-colors:active){ :root{--theme-atmosphere:transparent} :focus-visible{outline-color:CanvasText;outline-style:solid} .jbDiscMenu,.specimenOutline,.specimen-outline{box-shadow:0 0 0 var(--hair-w) CanvasText inset} }