/* ==========================================================================
Everything the design could not express in a single flat file.
The source design ("TaskNTrade Site v2.dc.html") had three workarounds
forced on it by being one self-contained file with no stylesheet:
1. `style-hover="…"` / `style-focus="…"` attributes, because there is no
way to write a :hover rule inside a style attribute.
2. A JS `layout()` function that re-set grid-template-columns on every
resize, because there is no way to write a media query inline.
3. JS that wrote inline styles to mark the active nav tab, selected
campaign, chosen contact method, etc.
All three are real CSS here. Values are unchanged from the design — this
file is a change of mechanism, not of appearance.
Because the page markup keeps the design's inline styles verbatim (that is
what guarantees fidelity), the hover/focus utilities must use !important to
win against them. That is exactly the precedence `style-hover` had.
========================================================================== */
/* ── 1. hover / focus states (was style-hover= / style-focus=) ───────────── */
.h-op1:hover { opacity:1 !important }
.h-txt:hover { color:var(--txt) !important }
.h-lift:hover { border-color:var(--edge2) !important; transform:translateY(-2px) }
.h-bright:hover { filter:brightness(1.08) }
.h-bright-11:hover { filter:brightness(1.1) }
.h-navpill:hover { color:var(--txt) !important; background:color-mix(in oklab, var(--txt) 5.5%, transparent) !important }
.h-edge2:hover { border-color:var(--edge2) !important }
.h-acc-bg:hover { background:var(--orange) !important; color:var(--on-accent) !important }
.h-acc-ring:hover { background:var(--orange) !important; border-color:var(--orange) !important; color:var(--on-accent) !important }
/* Soft shadows on card-style article/div elements with borders */
article[data-rise],
[data-featgrid] > [style*="border:1px solid"] { box-shadow:0 4px 12px -4px rgba(10,25,47,.12) }
.h-acc-flat:hover { background:var(--orange) !important; border-color:transparent !important; color:var(--on-accent) !important }
.h-up2:hover { transform:translateY(-2px) }
.h-up3-scale:hover { transform:translateY(-3px) scale(1.05) }
.h-scale:hover { transform:scale(1.08) }
.h-gap:hover { gap:12px !important }
.h-acc-edge:hover { border-color:var(--orange2) !important }
.h-acc-edge-up:hover { border-color:var(--orange2) !important; transform:translateY(-3px) }
.h-acc-tint:hover { border-color:color-mix(in oklab, var(--orange) 50%, transparent) !important; background:color-mix(in oklab, var(--orange) 6%, transparent) !important }
.h-tint-10:hover { background:color-mix(in oklab, var(--txt) 10%, transparent) !important }
.h-tint-11:hover { background:rgba(10,25,47,.11) !important }
.h-tint-075:hover { background:rgba(10,25,47,.075) !important }
.f-acc:focus { border-color:var(--orange2) !important; background:color-mix(in oklab, var(--orange) 6%, transparent) !important }
/* ── 2. responsive layout (was the JS layout() function) ─────────────────────
The design used two breakpoints: `mid` = 700px, `wide` = 1024px. Each rule
below is a direct transcription of one layout() line. Mobile-first: the
base value is layout()'s narrow branch, so `grid-template-columns` is
deliberately absent from these elements' inline styles.
───────────────────────────────────────────────────────────────────────── */
[data-desknav] { display:none }
[data-deskcta] { display:none }
[data-mobbtn] { display:inline-flex }
[data-herogrid],
[data-casegrid],
[data-doorgrid],
[data-svchook],
[data-svcgrid],
[data-svcstat],
[data-mktgrid],
[data-statgrid],
[data-crgrid],
[data-ctgrid],
[data-teamgrid],
[data-footgrid] { grid-template-columns:1fr }
@media (min-width:700px){
[data-herogrid] { grid-template-columns:1.1fr .9fr }
[data-doorgrid] { grid-template-columns:1fr 1fr }
[data-svcgrid] { grid-template-columns:repeat(2,1fr) }
[data-svcstat] { grid-template-columns:repeat(3,1fr) }
[data-statgrid] { grid-template-columns:repeat(2,1fr) }
[data-teamgrid] { grid-template-columns:repeat(2,1fr) }
[data-footgrid] { grid-template-columns:repeat(2,1fr) }
}
/* Homepage hero stat bar: one flat border-y band instead of four separate
cards, so it reads as a single unit; each stat still gets its own
hover affordance (a border that was transparent at rest turning
accent-colored) rather than the whole band lighting up at once.
The column count moved off the inline style and into here 2026-08-21. Four
tracks were hardcoded inline at every width, so on a phone each stat got
~80px and every label broke over three lines ("TOTAL / AUDIENCE / REACH").
min-width:0 below kept it from actually overflowing, so this never showed
up as a bug — just as four cramped columns. 2x2 to 560px, then four up. */
[data-homestat]{ grid-template-columns:repeat(2,1fr) }
@media (min-width:560px){ [data-homestat]{ grid-template-columns:repeat(4,1fr) } }
[data-homestat] > div{
border:1px solid transparent; border-radius:14px; padding:8px 6px; min-width:0;
transition:border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
[data-homestat] > div:hover{ border-color:var(--orange2); transform:translateY(-2px) }
/* [data-foundergrid] is flex, not grid — found 2026-08-14: Chrome mis-sizes
a grid row when one 1fr column holds a wide block of reflowing text next
to a short fixed-size column, undershooting the row height by tens of px
and cutting the last line off past the card's own border. flex with
flex:1 1 0% on the text side doesn't have that intrinsic-sizing quirk. */
[data-foundergrid] { display:flex; flex-direction:column }
@media (min-width:700px){
[data-foundergrid] { flex-direction:row; align-items:flex-start }
[data-foundergrid] > div:first-child { flex:0 0 auto }
[data-foundergrid] > div:last-child { flex:1 1 0%; min-width:0 }
}
@media (min-width:1024px){
[data-desknav] { display:flex }
[data-deskcta] { display:flex }
[data-mobbtn] { display:none }
[data-casegrid] { grid-template-columns:1fr 1fr }
[data-svchook] { grid-template-columns:1.15fr .85fr }
[data-svcgrid] { grid-template-columns:repeat(3,1fr) }
[data-mktgrid] { grid-template-columns:repeat(3,1fr) }
[data-statgrid] { grid-template-columns:repeat(4,1fr) }
[data-crgrid] { grid-template-columns:1.5fr .9fr }
[data-ctgrid] { grid-template-columns:.85fr 1.15fr }
[data-footgrid] { grid-template-columns:1.7fr 1fr 1fr 1fr }
}
/* ── 3. stateful controls (was syncNav() / syncChrome() writing inline styles)
Base state lives here rather than inline so the .is-on variant can win
without !important.
───────────────────────────────────────────────────────────────────────── */
/* header nav pill — active page. Static per page, set at build time. */
[data-tab] { background:transparent; color:var(--dim); font-weight:500 }
[data-tab].is-on { background:color-mix(in oklab, var(--orange) 14%, transparent); color:var(--orange); font-weight:700 }
/* campaign-explorer tabs, contact-method pills, survey pills, department
pills — one shared look. [data-dbtn] (contact.html's "Which team should
this go to?") was missing from this list entirely — initDept() in
js/forms.js toggles .is-on same as every other pill group, but with no
[data-dbtn] rule here the class had nothing to style, so a click never
showed a selection. */
[data-case],
[data-mbtn],
[data-sbtn],
[data-dbtn] { background:color-mix(in oklab, var(--txt) 4%, transparent); color:var(--dim); border-color:var(--edge2) }
[data-sbtn][data-survey="no"],
[data-mbtn][data-method=""] { color:var(--dim2) }
[data-case].is-on,
[data-mbtn].is-on,
[data-sbtn].is-on,
[data-dbtn].is-on { background:linear-gradient(135deg,var(--orange),var(--orange2)); color:var(--on-accent); border-color:transparent }
/* reel-rail position markers */
[data-dot] { background:var(--edge2); width:14px }
[data-dot].is-on { background:var(--orange); width:34px }
/* per-reel sound pill */
[data-mute] { background:rgba(10,25,47,.55); border-color:rgba(255,255,255,.28) }
/* Every [data-mute] tile carries inline color:#fff (correct at rest — the
pill sits on a dark scrim) — !important is required to beat that inline
value once .is-on switches the fill to var(--orange). */
[data-mute].is-on { background:var(--orange); border-color:transparent; color:var(--on-accent) !important }
/* theme toggle — the design swapped these two icons with a conditional; here
the current theme on picks one. Sun = "you are in dark, go light". */
.icon-sun { display:none }
.icon-moon { display:block }
html[data-theme="dark"] .icon-sun { display:block }
html[data-theme="dark"] .icon-moon { display:none }
/* ── 4. progressive enhancement / no-JS fallbacks ────────────────────────── */
/* Elements the design toggled with a conditional are shipped in the markup and
hidden with [hidden] instead. The design's inline styles set `display`, which
would otherwise beat the UA's [hidden] rule — hence !important. */
[hidden] { display:none !important }
/* The mobile menu and video lightbox are JS-driven overlays; keep them out of
the flow until opened so they never cover the page with scripting disabled. */
[data-menu],
[data-lightbox-shell] { display:none }
[data-menu].is-open,
[data-lightbox-shell].is-open { display:block }
[data-lightbox-shell].is-open { display:flex }
/* Reels are lazy-attached by JS (see js/reels.js). Without JS the poster or
the panel background shows instead of an empty black box. */
/* Wizard steps: only the current one is in the flow. With JS off, step 1 shows
and the form still submits every field, so nothing is unreachable. */
[data-step] { display:none }
[data-step].is-on { display:block }
/* ==========================================================================
5. ADDITIONS BEYOND THE DESIGN
Everything below this line is NOT in "TaskNTrade Site v2.dc.html" — it was
requested after the import. Kept in its own section so the design-fidelity
rule above stays auditable: if it's above this banner it came from the
design, if it's below it didn't. See README "Deviations from the design".
========================================================================== */
/* 5a (glassmorphism: .glass/.glass-stage/.blob, plus the .chip sector tags)
removed 2026-08-13 along with the brochure rewrite (§5r) that was its only
consumer — the section no longer uses frosted glass or a sector-chip list. */
/* ── 5b. "coming soon" / under-construction states ──────────────────────────
Used wherever real content or an API is not connected yet. The brief was
explicit that missing data should say so rather than be filled with
invented placeholder content.
───────────────────────────────────────────────────────────────────────── */
@keyframes uc-sweep { 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(220%)} }
@keyframes uc-dot { 0%,100%{transform:scale(.72);opacity:.55} 50%{transform:scale(1);opacity:1} }
@keyframes uc-track { 0%{transform:translateX(-100%)} 100%{transform:translateX(320%)} }
@keyframes uc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes typewriter-blink { 0%,100%{border-right-color:transparent} 50%{border-right-color:var(--txt)} }
/* placeholder tile: a shimmer sweep reads as "loading, not broken" */
.uc-tile { position:relative; overflow:hidden }
.uc-tile::after{
content:""; position:absolute; top:0; bottom:0; width:38%;
background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--txt) 7%, transparent), transparent);
animation:uc-sweep 2.9s cubic-bezier(.4,0,.2,1) infinite;
}
.uc-tile:nth-of-type(2n)::after { animation-delay:.5s }
.uc-tile:nth-of-type(3n)::after { animation-delay:1s }
/* status badge with a live pulsing dot */
.uc-badge{
display:inline-flex; align-items:center; gap:8px;
padding:7px 14px 7px 11px; border-radius:999px;
font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
background:color-mix(in oklab, var(--orange) 10%, transparent); border:1px solid color-mix(in oklab, var(--orange) 30%, transparent); color:var(--orange2);
}
.uc-badge::before{
content:""; width:7px; height:7px; border-radius:50%;
background:var(--orange2); animation:uc-dot 1.6s ease-in-out infinite;
}
.uc-badge-warm { background:color-mix(in oklab, var(--txt) 6%, transparent);
border-color:var(--edge2); color:var(--dim) }
.uc-badge-warm::before { background:var(--dim2) }
/* indeterminate progress: work in progress, no known completion date */
.uc-bar{
position:relative; overflow:hidden; height:4px; border-radius:99px;
background:color-mix(in oklab, var(--txt) 8%, transparent);
}
.uc-bar::after{
content:""; position:absolute; inset:0 auto 0 0; width:32%; border-radius:99px;
background:linear-gradient(90deg, var(--orange), var(--orange2));
animation:uc-track 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
.uc-float { animation:uc-float 4.5s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){
.uc-tile::after, .uc-badge::before, .uc-bar::after, .uc-float { animation:none }
.uc-tile::after { opacity:0 }
.uc-bar::after { width:38% }
}
/* ── 5c. reel captions — readability fix ────────────────────────────────────
The design set the creator name in plain white over the video itself. On a
bright frame (a white studio wall, a snow shot) it disappeared. A blurred
chip plus a text shadow keeps it legible over ANY frame, which a darker
gradient alone cannot guarantee.
───────────────────────────────────────────────────────────────────────── */
.reel-cap{
display:inline-block; padding:8px 13px; border-radius:14px;
background:rgba(8,9,12,.52);
backdrop-filter:blur(10px) saturate(1.2);
-webkit-backdrop-filter:blur(10px) saturate(1.2);
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.reel-cap-name { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6) }
.reel-cap-brand { color:#BFD0FF; text-shadow:0 1px 3px rgba(0,0,0,.6) }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.reel-cap { background:rgba(8,9,12,.78) }
}
/* ── 5d. team photo slots — drop a file in, it appears ──────────────────────
Each slot ships the placeholder AND an that hides itself via onerror
when the file isn't there yet (see src/pages/about.html). No build step, no
manifest, no code edit when a photo finally arrives.
Bug found + fixed 2026-08-14, testing the first real drop-in (ceo.jpg): the
hide-on-load rule below never actually worked. Every .photo-fallback in
about.html carries its own inline `style="display:grid;…"`, and an inline
style always beats an external stylesheet rule of any selector specificity
short of !important — so the fallback (icon, and for the founder slot, the
"Portrait coming soon" text) kept rendering ON TOP of a successfully loaded
photo. Needed the same fix CLAUDE.md documents for style-hover=/style-focus=:
!important, because that's exactly the precedence being overridden. */
.photo-slot { position:relative; overflow:hidden;
background:color-mix(in oklab, var(--txt) 3%, transparent);
border:1px dashed var(--edge2) }
/* A real photo's own background rarely matches the surrounding card (this
one is a studio black, jarring flush against a light-theme white card) —
inset the image a few px so the slot's own tinted background shows as a
thin mat around it instead of the photo butting straight into the card
edge. Needs its own border-radius since it no longer reaches the parent's
clipped edge (`inherit` pulls whatever radius each inline-styled instance
sets on .photo-slot). */
.photo-slot img { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px);
object-fit:cover; object-position:center 18%; border-radius:inherit }
.photo-slot img:not([hidden]) ~ .photo-fallback { display:none !important }
.photo-slot:has(img:not([hidden])) {
border-style:solid; border-width:2px;
box-shadow:0 10px 24px -12px rgba(0,0,0,.35);
}
/* ── 5d-2. founder message — an editorial serif for the one quoted voice
on the site ──────────────────────────────────────────────────────────────
Every other paragraph on this site is --body (Instrument Sans, a neutral
UI sans). The founder message (src/pages/about.html) is the one place
real spoken/written words from a named person are quoted at length, so it
gets its own typographic voice: Fraunces italic, a serif with warmth this
grotesque/neutral pairing doesn't have on its own. Scoped to this one
block via a class rather than touching --body globally. */
.founder-quote { font-family:"Fraunces", Georgia, serif; font-style:italic;
font-optical-sizing:auto; font-weight:400 }
.founder-quote-name { font-family:"Fraunces", Georgia, serif; font-weight:600; font-style:normal }
/* ── 5e. layout for the pages added after the design ────────────────────── */
[data-deptgrid],
[data-featgrid],
[data-samplegrid],
[data-trackgrid],
[data-evrgrid],
[data-tengrid],
[data-brochgrid],
[data-teamphotos],
[data-hookgrid],
[data-signalgrid] { grid-template-columns:1fr }
@media (min-width:700px){
[data-hookgrid] { grid-template-columns:repeat(2,1fr) }
[data-featgrid] { grid-template-columns:repeat(2,1fr) }
[data-samplegrid] { grid-template-columns:repeat(2,1fr) }
[data-evrgrid] { grid-template-columns:repeat(2,1fr) }
[data-tengrid] { grid-template-columns:repeat(2,1fr) }
[data-teamphotos] { grid-template-columns:repeat(3,1fr) }
[data-brochgrid] { grid-template-columns:1fr 1fr }
[data-signalgrid] { grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1024px){
[data-deptgrid] { grid-template-columns:repeat(3,1fr) }
[data-samplegrid] { grid-template-columns:repeat(3,1fr) }
[data-trackgrid] { grid-template-columns:1.35fr .65fr }
[data-tengrid] { grid-template-columns:repeat(5,1fr) }
[data-teamphotos] { grid-template-columns:repeat(3,1fr) }
[data-hookgrid] { grid-template-columns:repeat(4,1fr) }
/* Overrides the design's 4-column footer: the Teams column makes five.
Deliberately here and not in §2, so §2 stays a faithful transcription. */
[data-footgrid] { grid-template-columns:1.5fr 1fr 1fr 1fr 1fr }
}
@media (min-width:700px) and (max-width:1023.98px){
[data-footgrid] { grid-template-columns:repeat(3,1fr) }
}
/* ── 5f. theme + contrast corrections ───────────────────────────────────────
Everything here fixes a value that is wrong in one of the two themes. All of
it belongs in the design file; it lives here instead so `css/theme.css` and
§1-4 stay a byte-faithful transcription and remain diffable against the
source. Each rule names the value it corrects so the list can be handed
upstream and then deleted from here.
The pattern behind most of them: a token that FLIPS between themes used as
foreground on a surface that DOESN'T (a hardcoded dark scrim, a #fff fill,
video). The tell is `rgba(10,25,47,…)` — that is `#0A1128`, which is exactly
what `--navy` holds, and `--navy` does flip. It is referenced nowhere.
───────────────────────────────────────────────────────────────────────── */
/* --dim2 and --orange2's corrections used to live here (raised alpha, a
darker teal for text/border roles) because the mint accent failed contrast
in one of those roles. The 2026-08-13 blue palette (css/theme.css) already
ships --dim/--dim2 and --orange/--orange2 as flat, unified-per-theme
values with headroom on both roles (~4.9-5.2:1) — so both corrections are
gone from here, not just re-pointed. --creator is gone outright: it had
one consumer (creators.html's eyebrow label, now var(--orange) directly)
and had already collapsed to --orange2's value in the mint pass. */
:root{
/* "Success" existed as two unrelated literals, one failing contrast in each
theme. One token, one value per theme, instead of one value that had to
lose in one of them. Untouched by either accent rebrand — this is a
distinct semantic color, not the brand accent. */
--ok:#15774B;
/* Text/icons on a var(--orange)/var(--orange2) FILL — the is-on pills, the
skip link. Was #fff through the blue and coral eras. The 2026-08-17 bright
rebrand (#FF6B35 light / #FF8C42 dark) put both fills far too high on the
luminance scale for white to sit on: 2.84:1 and 2.31:1 respectively. Dark
ink clears 6.53:1 / 8.01:1 on the same fills, so this token now goes dark
rather than flipping per theme — the fill is light in BOTH themes. */
--on-accent:#0F1419;
}
html[data-theme="dark"]{
/* Was #5FE0A4 — a neon mint that the brief explicitly ruled out. Desaturated
to a sage emerald that still clears 8.44:1 on --ink; green keeps its
success/up semantics, it just stops glowing. */
--ok:#6DBF9B;
}
/* The logo mark holds two images: logo.png (navy, light mode) and
logo-dark.png (crisp white, dark mode). CSS owns the swap.
These three rules carry !important for a specific reason, and removing it
silently breaks the dark-mode mark. Both tags carry an inline
`display:block` (part of the transcribed design), and inline styles beat
any un-flagged stylesheet rule — so `display:none` alone never applied.
The markup used to compensate with a `hidden` attribute on the dark image,
but [hidden]{display:none!important} up at line ~154 then beat the
dark-theme `display:block` too, leaving dark mode with NO logo at all once
the old white-chip workaround was removed. The attribute is gone from the
partials now; specificity lives here and only here. */
.logo-mark{ display:inline-flex; align-items:center; flex-shrink:0 }
.logo-mark img:last-child{ display:none !important }
html[data-theme="dark"] .logo-mark img:first-child{ display:none !important }
html[data-theme="dark"] .logo-mark img:last-child{ display:block !important }
/* Secondary CTA hover. Both of these resolved to rgba(10,25,47,…) — in dark
theme that IS the page background, so the button's fill vanished on hover
and the affordance ran backwards. `.h-tint-10` one line up already did it
correctly with color-mix; these two now match it. */
.h-tint-11:hover { background:color-mix(in oklab, var(--txt) 11%, transparent) !important }
.h-tint-075:hover { background:color-mix(in oklab, var(--txt) 7.5%, transparent) !important }
/* The non-leading rows of the engagement summary (/collaborations/) and the
format distribution (/insights/). Two earlier passes on this: first the
fills were hardcoded navy, 1.09:1 against their own track in dark theme —
the filled portion was indistinguishable from the empty one. That was
fixed with a neutral grey mix of --txt, which reads clearly but introduced
a different problem, visible as soon as the sections were looked at whole:
one orange bar above five grey ones reads as "one active row, five
disabled" — grey is the disabled colour in every UI convention — when in
fact all six are equally real results, 5.20% down to 3.71%. Now a muted
tint of the accent instead: same family as the leading bar, clearly
subordinate to it, obviously not switched off. Kept as one rule with
!important because it has to beat the inline background on each span.
55% is measured, not eyeballed: against the bars' own empty track
(--txt at 7% over --ink) it lands at 2.24:1 light / 2.83:1 dark, where
42% gave only 1.81:1 in light — enough to see, not enough to be sure of. */
[data-bar].bar-rest { background:color-mix(in oklab, var(--orange2) 55%, var(--panel2)) !important }
/* /services/ — the six "this is for you if…" cards. Their descriptions run to
two or three lines, and one title wraps ("Reporting & performance
analysis"), so the "See how X runs it" link landed at a different height in
every card and each row read as ragged. Pushing the link to the card floor
puts all three of a row on one line. !important because each card carries
an inline display:block and each link an inline margin-top — the same
inline-beating precedence the hover rules above already rely on, which is
why CLAUDE.md sanctions !important in this file. */
[data-svcgrid] > a{ display:flex !important; flex-direction:column }
[data-svcgrid] > a > span:last-child{ margin-top:auto !important; padding-top:18px }
/* ── Short side-columns: stick, don't strand ─────────────────────────────────
Four sections pair a tall primary column with a much shorter secondary one
— /services/advert/'s mid-flight rail beside the tracker panel, /contact/'s
details beside the message form, and the trust asides on /creators/ and
/partner/. In every one the short column ran out 300-400px before the tall
one, leaving an obvious empty block at the bottom of the row. Sticking it
turns that dead space into something useful: the reassurance (or the phone
number) stays on screen while the reader works down the form next to it,
which is the whole reason those columns exist. Desktop only — below 1024px
these grids are a single column and there is nothing to stick to.
align-self:start is required, not decoration: a grid item defaults to
stretch, which fills the row and leaves sticky no slack to move in. */
@media (min-width:1024px){
[data-trackgrid] > div:last-child,
[data-ctgrid] > div:first-child,
[data-crgrid] > aside{
position:sticky; top:100px; align-self:start;
}
}
@media (prefers-reduced-motion:reduce){
[data-trackgrid] > div:last-child,
[data-ctgrid] > div:first-child,
[data-crgrid] > aside{ position:static }
}
/* Controls that sit on a hardcoded near-black surface (the reel scrim, the
lightbox backdrop) must not use tokens that flip — in light theme --edge2 is
dark ink on near-black and the ring disappeared entirely. */
.on-dark { border-color:rgba(255,255,255,.28) !important; color:#fff }
/* Marker for the inverse case: elements whose inline style hardcodes a
literal color:#fff over a var(--orange)/var(--orange2) fill or gradient
(every gradient CTA button). A literal, not a var(), so raising --orange
for dark-theme text legibility above doesn't reach it — needs its own
!important override the same way --on-accent needs its own token. */
.accent-fill { color:var(--on-accent) !important }
/* The mute pill sits at the top of the tile where the scrim gradient is still
fully transparent, so it had plain white on raw video — the exact failure
§5c already fixed for the caption 40px lower in the same tile. */
[data-mute] { text-shadow:0 1px 3px rgba(0,0,0,.65) }
/* Focus must not land under the 70px sticky header (WCAG 2.4.11). */
html { scroll-padding-top:86px }
/* Rail markers were 14x5 with 22px centres — under the 24px minimum on both
size and spacing. Grow the hit area only; the painted bar is unchanged.
Colour added 2026-08-21. At rest these were var(--edge2), a token meant for
hairline borders — on the reel rails (home and /services/advert/) twelve of
them were all but invisible, so the only cue that the rail had more tiles
was the single orange active marker. That mattered more after the line
telling people they could "tap a marker to jump to one" was removed from
/services/advert/ on request: the control lost its explanation and its
visibility in the same pass. The base rule lives in the frozen §1-4
transcription, so this overrides from §5 rather than editing it, the way
§5e already overrides the footer's column count. .is-on keeps its accent
fill — higher specificity, unaffected by this. */
[data-dot]{
/* !important: the markup's inline height:5px otherwise wins and shrinks the
tap area back to 5px (found by the 2026-10-07 mobile audit). The bar still
draws 5px tall: the padding is clipped out of the background. */
height:25px !important; padding:10px 0; background-clip:content-box; box-sizing:border-box;
background:color-mix(in oklab, var(--txt) 32%, transparent);
}
/* Skip link — visually hidden until focused. */
.skip{
position:absolute; left:14px; top:-60px; z-index:200;
padding:12px 18px; border-radius:0 0 12px 12px;
background:var(--orange); color:var(--on-accent); font-size:14px; font-weight:600;
transition:top .2s cubic-bezier(.16,1,.3,1);
}
.skip:focus { top:0; color:var(--on-accent) }
/* The design's blanket `transition:all .5s` plus the metric bars' width
transition are not covered by the existing reduced-motion blocks. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important }
[data-rail] { scroll-behavior:auto }
}
/* Small pill badge, reused for the case-study viewer's per-case badge
(js/signal.js) — was originally written for the case-file disclosure
cards this section replaced. */
.case-file-badge{
display:inline-flex; align-items:center; background:color-mix(in oklab, var(--orange) 14%, transparent);
border:1px solid color-mix(in oklab, var(--orange) 35%, transparent); border-radius:999px; padding:5px 12px;
font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--orange2);
}
/* Small fact/flag tags on a case-study card (js/signal.js). */
.case-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.case-tag{
display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; line-height:1.3;
padding:5px 10px; border-radius:8px; background:color-mix(in oklab, var(--txt) 5%, transparent);
border:1px solid var(--edge2); color:var(--dim);
}
.case-tag-warn{
background:color-mix(in oklab, var(--orange) 8%, transparent);
border-color:color-mix(in oklab, var(--orange) 22%, transparent); color:var(--orange2);
}
/* OSM model 4-stage flow removed 2026-08-13 along with the Signal page
section that used it (see js/signal.js's git history for context) — no
other page referenced .osm-flow/.osm-stage. */
/* Advert tracker — segmented bar for a brand with more than one round, so the
bar doesn't visually claim a single campaign. Segments are sized by each
round's share of that brand's combined reach; the wrapping div's own width
is still the brand's portfolio-relative share, unchanged from before. */
.advert-segbar{ display:flex; height:100% }
.advert-segbar span{ height:100%; background:linear-gradient(90deg,var(--orange),var(--orange2)) }
.advert-segbar span:not(:first-child){ border-left:1px solid var(--panel) }
/* Signal case-study viewer — one case at a time, rendered by js/signal.js
into this shared template (same architecture as the campaign explorer's
CASES array in js/cases.js: one render(), not ten copies of the markup).
.sc-pills/.sc-pill (the brand picker) retired 2026-08-13 — replaced with a
native