/* PANTHEON Labs — "technical record" visual language. [redesign v2]
Not a tweak: a different system. Mono-led masthead, flat near-black, rules
instead of cards, tighter measure. Reuses the three self-hosted faces, so
no new network request and the GDPR stance is unchanged. */
:root[data-record]{
--bg:#0a0a0b; --panel:#0f0f11; --panel2:#141416;
--ink:#ededf0; --mist:#9a9aa4; --faint:#6e6e78;
--line:#1e1e22; --line2:#2a2a30;
--acc:#c8ff4d; --acc-dim:#9ecb2e; --acc-ink:#0a0a0b;
--measure:58ch;
}
:root[data-record][data-theme="light"]{
--bg:#fbfbfa; --panel:#ffffff; --panel2:#f4f4f2;
--ink:#141416; --mist:#54545e; --faint:#75757f;
--line:#e4e4e0; --line2:#d2d2cc;
--acc:#2f6d00; --acc-dim:#245400; --acc-ink:#ffffff;
}
/* ---- page ---- */
[data-record] body{background:var(--bg);color:var(--ink);
font:400 15px/1.62 var(--sans);letter-spacing:0;-webkit-font-smoothing:antialiased}
[data-record] .wrap{max-width:1140px;padding:0 28px}
/* ---- masthead: mono, lowercase, a rule under it ---- */
[data-record] .topbar{background:var(--bg);border-bottom:1px solid var(--line);
backdrop-filter:none;padding:0 clamp(12px,2vw,28px)} /* [gutter 2026-10-02] was 0 0: the logo sat on the window edge,
the RTL pages' language picker on the left one, and beside the open book the wrapped menu row started at x=0.
One inline gutter for every row (prove_header + prove_mark GUTTER). The phone rule (8px 12px) still wins below 760px. */
[data-record] .topbar .logo span{font:500 13px/1 var(--mono);letter-spacing:.04em;text-transform:lowercase}
[data-record] .nav a{font:400 12.5px/1 var(--mono);letter-spacing:.01em;color:var(--mist);
border-radius:0;padding:8px 10px;text-transform:lowercase}
[data-record] .nav a:hover{color:var(--ink);background:transparent;text-decoration:underline;text-underline-offset:4px}
[data-record] .nav a.active{color:var(--acc);background:transparent;box-shadow:none}
/* ---- hero: the headline is the page. No glow, no gradient button. ---- */
[data-record] .hero{padding:96px 0 0} /* [field] no rule: it cut the field */
[data-record] .hero h1{font:400 clamp(30px,4.4vw,52px)/1.12 var(--sans);
letter-spacing:-.022em;margin:0 0 22px;max-width:19ch}
[data-record] .hero h1 em{font-style:normal;color:var(--acc)}
[data-record] .hero .lede{font:400 16.5px/1.66 var(--sans);color:var(--mist);
max-width:var(--measure);margin:0 0 30px}
[data-record] .hero::after{background:linear-gradient(90deg,
color-mix(in srgb,var(--bg) 55%,transparent) 0%,
color-mix(in srgb,var(--bg) 30%,transparent) 44%,
transparent 86%)} /* [eye] 94/78 -> 55/30: field.js knocks back under text already; this was erasing the field behind the headline */
/* ---- eyebrow: a record label, not a pill ---- */
[data-record] .eyebrow{font:400 11px/1 var(--mono);letter-spacing:.14em;
text-transform:uppercase;color:var(--faint);margin:0 0 14px;
padding:0 0 0 13px;position:relative}
[data-record] .eyebrow::before{content:"";position:absolute;left:0;top:1px;
width:4px;height:9px;background:var(--acc)}
/* ---- sections: rules, not floating bands ---- */
[data-record] section{padding:72px 0} /* [field] no rule: the field marks the boundary */
[data-record] .hero + section{border-top:none}
[data-record] section h2{font:400 clamp(21px,2.5vw,29px)/1.24 var(--sans);
letter-spacing:-.016em;margin:0 0 16px;max-width:24ch}
[data-record] section p{max-width:var(--measure);color:var(--mist);margin:0 0 14px}
[data-record] .lede{font-size:16.5px;color:var(--mist);max-width:var(--measure)}
/* ---- cards -> record rows. The single most generic element on the old
page was the bordered rounded rectangle; here content sits on rules. ---- */
[data-record] .card{background:transparent;border:0;border-top:1px solid var(--line);
border-radius:0;padding:20px 0 0;box-shadow:none}
[data-record] .card h3{font:500 14px/1.35 var(--sans);letter-spacing:-.006em;margin:0 0 7px;color:var(--ink)}
[data-record] .card p{font-size:14px;line-height:1.6;color:var(--mist);margin:0}
[data-record] .grid{gap:26px 34px}
/* ---- buttons: flat, square, one accent ---- */
[data-record] .cta{background:var(--acc);color:var(--acc-ink);border-radius:2px;
font:500 13.5px/1 var(--sans);letter-spacing:.005em;padding:13px 20px;
box-shadow:none;border:1px solid var(--acc);transition:background .14s,border-color .14s}
[data-record] .cta:hover{background:var(--acc-dim);border-color:var(--acc-dim);
transform:none;box-shadow:none}
[data-record] .navcta{background:transparent;color:var(--acc)!important;border:1px solid var(--line2);
border-radius:2px;font:400 12.5px/1 var(--mono);padding:7px 12px;box-shadow:none}
[data-record] .navcta:hover{border-color:var(--acc);transform:none}
/* ---- panels that must stay contained: a hairline, never a glow ---- */
[data-record] .panel,[data-record] .trustband .card{
background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:none}
[data-record] .closer{background:transparent;border:0;box-shadow:none} /* [field] was a boxed panel: a solid hole in the field with two rules */
/* ---- numbers read as data, not marketing ---- */
[data-record] .stat .n,[data-record] .score b{font:400 26px/1 var(--mono);
letter-spacing:-.01em;color:var(--ink)}
[data-record] .stat .l,[data-record] .score span{font:400 11.5px/1.45 var(--mono);
letter-spacing:.03em;color:var(--faint);text-transform:lowercase}
/* ---- footer ---- */
[data-record] footer{background:transparent;border-top:0;padding:44px 0 56px} /* [field] no rule; styles.css:259 draws one otherwise */
[data-record] .foot-label{font:400 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
[data-record] footer a{color:var(--mist)}
[data-record] footer a:hover{color:var(--acc)}
/* ---- Overrides that must beat the base sheet's own specificity.
Measured from the first render: the eyebrow stayed a pill, two accent
colours fought in the headline, and the art overpowered the type. ---- */
/* one accent, not three: the headline is ink, the emphasis is the accent */
:root[data-record] .hero h1{color:var(--ink)}
:root[data-record] .hero h1 em,
:root[data-record] .hero h1 i,
:root[data-record] .hero h1 .accent,
:root[data-record] .hero h1 span{color:var(--acc)!important;font-style:normal}
/* eyebrow: a label with a tick, never a pill */
:root[data-record] .eyebrow,
:root[data-record] p.eyebrow,
:root[data-record] .mark{background:transparent!important;border:0!important;
border-radius:0!important;padding:0 0 0 13px!important;display:inline-block;
font:400 11px/1 var(--mono)!important;letter-spacing:.14em!important;
text-transform:uppercase!important;color:var(--faint)!important}
/* art sits behind the record, it does not compete with it */
/* every button square, one shape language */
:root[data-record] .cta,
:root[data-record] .btn,
:root[data-record] a.cta{border-radius:2px!important;box-shadow:none!important}
:root[data-record] .cta.ghost,
:root[data-record] .cta.alt,
:root[data-record] .cta:not(:first-of-type){background:transparent;color:var(--acc)!important;
border:1px solid var(--line2)}
:root[data-record] .cta.ghost:hover,
:root[data-record] .cta.alt:hover,
:root[data-record] .cta:not(:first-of-type):hover{border-color:var(--acc);background:transparent}
/* inline links: underlined, ink-coloured, not a second accent */
:root[data-record] .lede a:not(.cta),
:root[data-record] section p a:not(.cta){color:var(--ink);text-decoration:underline;
text-underline-offset:3px;text-decoration-color:var(--line2)}
:root[data-record] .lede a:not(.cta):hover,
:root[data-record] section p a:not(.cta):hover{text-decoration-color:var(--acc)}
/* ---- .pill is the real section label class (not .eyebrow — measured from
the DOM, after overriding the wrong one for a whole pass). ---- */
:root[data-record] .pill{background:transparent!important;border:0!important;
border-radius:0!important;padding:0 0 0 13px!important;position:relative;
font:400 11px/1 var(--mono)!important;letter-spacing:.14em!important;
text-transform:uppercase!important;color:var(--faint)!important}
:root[data-record] .pill::before{content:"";position:absolute;left:0;top:1px;
width:4px;height:9px;background:var(--acc)}
/* The mark is inline SVG so its structure inherits currentColor and its
threshold reads --acc — no grayscale hack, and it follows the theme. The
old was a purple rounded square with a Georgia "P": the wrong colour,
and a typeface used nowhere else on the site. */
:root[data-record] .logo,
:root[data-record] .logo .mark{color:var(--ink)!important}
:root[data-record] .logo .mark{display:block;flex:0 0 auto}
/* the wordmark joins the record language: mono, lowercase, not serif */
:root[data-record] .logo span{font:500 15px/1 var(--mono)!important;letter-spacing:.02em!important;text-transform:lowercase}
:root[data-record] .logo{gap:9px;align-items:center}
:root[data-record] .logo:hover .mark{color:var(--acc)}
/* secondary link-buttons: ink + hairline, never a second accent */
:root[data-record] .linkbtn,
:root[data-record] .ghostlink,
:root[data-record] a.pill-link{color:var(--ink)!important;border-color:var(--line2)!important}
/* the floating assistant button joins the system */
:root[data-record] .askbtn,
:root[data-record] #askbtn,
:root[data-record] .ask-fab{background:var(--acc)!important;color:var(--acc-ink)!important;
border-radius:2px!important;box-shadow:none!important;
font:500 13px/1 var(--sans)!important;border:1px solid var(--acc)!important}
/* ---- The art reads its hues from --acc/--acc-soft/--acc-dim (wired earlier
today). Under the record palette those are lime, and the violet constellation
over a lime wash turned olive. Give the art its own brand-neutral hues so it
stays a constellation rather than a tint. ---- */
/* --acc-soft is used 44 times ACROSS the three base sheets as a TEXT colour.
Declaring a pale lime here unscoped made all of them ~1.1:1 on the paper
theme — three separate illegible elements on one phone screen. It must be
theme-scoped, and on light it must be a colour you can actually read. */
:root[data-record]{--acc-soft:#dcff8a; --art-1:#8fa3c8; --art-2:#6f7fa6}
:root[data-record][data-theme="light"]{--acc-soft:#2f6d00; --acc-dim:#245400}
:root[data-record] .hero{background:transparent} /* [field] was var(--bg): as a z-index:1 stacking context it painted over its own canvas */
/* the remaining purple: secondary link-buttons rendered by the base sheet */
:root[data-record] a[class*="btn"],
:root[data-record] .hero + section a[href*="what-is-pantheon"],
:root[data-record] .hero + section a[href*="pnt.html"]{
color:var(--ink)!important;border-color:var(--line2)!important;border-radius:2px!important}
:root[data-record] a[class*="btn"]:hover,
:root[data-record] .hero + section a[href*="what-is-pantheon"]:hover,
:root[data-record] .hero + section a[href*="pnt.html"]:hover{border-color:var(--acc)!important}
/* [nav4 2026-10-04] the phone label swap is gone with the long bar */
/* Mobile: the CTA stays out of the link rows (as the base sheet intends), and
the mono labels get slightly tighter so 745px of items pack into two rows
rather than three. Measured at 393px: widest item 118px was the CTA. */
@media(max-width:760px){
:root[data-record] .nav .navcta{display:none!important}
:root[data-record] .nav a{font-size:12px!important;padding:8px 8px!important;letter-spacing:0!important}
:root[data-record] .nav a::after{font-size:12px!important;letter-spacing:0!important}
:root[data-record] .nav{gap:4px 6px!important}
}
/* Secondary buttons: ink on light, accent on dark — never accent-on-paper. */
:root[data-record][data-theme="light"] .cta:not(:first-of-type),
:root[data-record][data-theme="light"] .cta.ghost,
:root[data-record][data-theme="light"] .cta.alt{color:var(--ink)!important;
border-color:var(--line2)!important;background:transparent}
:root[data-record][data-theme="light"] .cta:not(:first-of-type):hover{
border-color:var(--acc)!important;color:var(--acc)!important}
/* Chips/tags carried an old lilac wash that the record palette never covered. */
:root[data-record] .chip,:root[data-record] .tag,:root[data-record] .kv{
background:transparent!important;border:1px solid var(--line2)!important;
color:var(--mist)!important;border-radius:2px!important;
font:400 11.5px/1 var(--mono)!important}
/* --faint carries the mono section labels. Measured on the rendered page it
came out 3.92:1 (dark) and 4.4:1 (light) against their surfaces — under the
4.5 floor for text this size. Darkened/lightened until both pass. */
:root[data-record]{--faint:#83838f}
:root[data-record][data-theme="light"]{--faint:#63636d}
/* The live-trace panel kept the old brand lilac: .govcanvas painted a violet
wash and .cap chips were rgba(124,92,255,.1) pills. Found by walking the DOM
for blue-dominant backgrounds rather than by reading the stylesheet. */
:root[data-record] .govcanvas{background:var(--panel2)!important;
border:1px solid var(--line)!important;border-radius:2px!important}
:root[data-record] .cap{background:transparent!important;
border:1px solid var(--line2)!important;border-radius:2px!important;
color:var(--mist)!important;font:400 11.5px/1.5 var(--mono)!important}
:root[data-record] .trace,:root[data-record] .tracepanel,
:root[data-record] .console,:root[data-record] .demo{
background:var(--panel)!important;border:1px solid var(--line)!important;
border-radius:3px!important;box-shadow:none!important}
/* ============================================================================
DARK-SURFACE LITERALS. [the 22-second defect]
The base sheets hardcode pale lilac text colours — #cdc4dd, #d8d1e6,
#d2cadf, #e7dff5, #d6cfe6, #ffd9d2, #ffe6bd — chosen when every surface was
#0c0a12. Measured against the record paper background they land at
1.17:1 - 1.62:1, i.e. invisible. On the old dark background the same colour
was 11.74:1, which is why nobody saw it until the surface changed.
styles.css:402 shows this was already hit once and patched for ONE case.
Twenty instances remained. Fixing the class, not the instance: re-point the
selectors that use them at the theme-aware tokens.
========================================================================= */
:root[data-record][data-theme="light"] .card p,
:root[data-record][data-theme="light"] .score span,
:root[data-record][data-theme="light"] .ecase .ed,
:root[data-record][data-theme="light"] .vhint .vnode,
:root[data-record][data-theme="light"] .pstage span,
:root[data-record][data-theme="light"] .gap-tile span,
:root[data-record][data-theme="light"] .an-node span,
:root[data-record][data-theme="light"] .bt-p,
:root[data-record][data-theme="light"] .act p,
:root[data-record][data-theme="light"] .check,
:root[data-record][data-theme="light"] .crow .what,
:root[data-record][data-theme="light"] .lede,
:root[data-record][data-theme="light"] .v-lede,
:root[data-record][data-theme="light"] .chip,
:root[data-record][data-theme="light"] footer a,
:root[data-record][data-theme="light"] .bcard .bv,
:root[data-record][data-theme="light"] .envelope .cap{color:var(--mist)!important}
/* the same set on dark: --mist there is #9a9aa4, still well clear of the floor */
:root[data-record] .check,:root[data-record] .crow .what,
:root[data-record] .act p,:root[data-record] .bt-p{color:var(--mist)}
/* The alert red is 4.43:1 on paper — just under the floor at this size. */
:root[data-record][data-theme="light"]{--red:#c23322}
/* ==========================================================================
WIDGETS — the chat and trace panels never got the record treatment.
Three complaints, one cause: these are the last components still drawn in
the old "card" idiom — rounded boxes nested inside rounded boxes, each with
its own generous padding, plus the old brand purple in the avatar and graph.
Boxes inside boxes: the panel, the message bubble, every suggestion chip,
the input and the button were all separately rounded and bordered. Here the
panel keeps ONE hairline and the things inside it sit on rules instead.
========================================================================== */
:root[data-record] .chat,
:root[data-record] .trace,
:root[data-record] .card,
:root[data-record] .closer{border-radius:0}
/* the message: a rule and an indent, not a bubble */
:root[data-record] .msg,
:root[data-record] .msg.bot{border-radius:0;background:transparent;
border-left:2px solid var(--line-2);padding:2px 0 2px 14px}
:root[data-record] .msg.bot p{margin:.2em 0}
/* suggestions: dense mono rows, not pills. The old spacing put ~10px between
five chips that each had 10px of their own padding. */
:root[data-record] .chip{border-radius:0;font-family:var(--mono);font-size:.78rem;
padding:6px 9px;border:1px solid var(--line-2);background:transparent}
:root[data-record] .chip:hover{border-color:var(--acc);background:var(--acc-wash)}
/* composer */
:root[data-record] .composer input,
:root[data-record] .composer textarea{border-radius:0;font-family:var(--mono);font-size:.82rem}
:root[data-record] .composer button{border-radius:2px;font-family:var(--mono);
font-size:.78rem;letter-spacing:.04em;text-transform:lowercase;background:var(--acc);
color:var(--acc-ink);border:0}
/* the floating launcher was a purple pill */
:root[data-record] .askbtn,
:root[data-record] [class*="ask"] button,
:root[data-record] .fab{border-radius:2px!important;font-family:var(--mono)!important;
font-size:.78rem!important;text-transform:lowercase;letter-spacing:.04em;
background:var(--ink)!important;color:var(--bg)!important;box-shadow:none!important}
/* the avatar dot: old brand violet, and a circle in a square language */
:root[data-record] .chat .av,
:root[data-record] .avatar,
:root[data-record] .chat img[class*="av"]{border-radius:0!important;
background:var(--acc)!important;filter:none!important}
/* The three the first pass missed — all because I guessed at selectors
instead of reading the DOM:
#pn-ask:not(.pc) the floating launcher, an ID (beats any class selector I wrote)
#ava an of /labs/avatar.svg, served by the GATEWAY not this
repo — a violet radial gradient, so it is restyled here rather
than edited
(the in-panel constellation canvas, .ga-live, is gone [owner 2026-10-04]) */
:root[data-record] #pn-ask:not(.pc){border-radius:2px!important;font-family:var(--mono)!important;
font-size:.76rem!important;text-transform:lowercase;letter-spacing:.04em;
box-shadow:none!important;padding:11px 15px!important}
/* ---- the assistant's face is the gate mark ---------------------------------
Was: an of /labs/avatar.svg (a seeded gradient ORB the gateway renders
from BRAND_ACCENT = "#7c5cff", still the old brand violet) forced to look
green by a filter chain: grayscale + sepia + hue-rotate + saturate.
Two things wrong with that. A glossy 3D sphere is the old visual language in
a flat, square design; and the source is a TENANT-FACING renderer used by
every Studio-built site, so it must not be edited to fix this page.
Hide the orb, draw the gate instead: same mark as the header, same accent,
no filters. [2026-09-21] */
:root[data-record] #ava{
width:26px!important;height:26px!important;
border-radius:0!important;filter:none!important;
background:transparent!important;
/* Hide the orb bitmap but KEEP THE ELEMENT IN FLOW: position:absolute took
it out of the flex row, so the header's text block took the full width and
the mark landed on top of the words (measured: both children at x=45).
A zero-opacity flex item still reserves its 26px slot. [2026-09-21] */
opacity:0!important;position:relative!important;pointer-events:none;
flex:0 0 26px!important;
}
:root[data-record] .chat .head .who,
:root[data-record] .chat .head{position:relative}
/* the gate, drawn in CSS on the avatar's slot */
/* An is a replaced element and renders no ::before/::after, so the gate
is painted on the HEADER, offset to the avatar's reserved slot: the flex row
starts at padding-left (16px), which is where the 26px mark belongs.
left:0 put it on the padding edge, 16px adrift. */
:root[data-record] .chat .head::before{
content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
width:26px;height:26px;
background:
/* lintel */
linear-gradient(var(--ink),var(--ink)) 3px 4px/20px 2.6px no-repeat,
/* posts */
linear-gradient(var(--ink),var(--ink)) 4.5px 6px/2.6px 15px no-repeat,
linear-gradient(var(--ink),var(--ink)) 19px 6px/2.6px 15px no-repeat,
/* threshold */
linear-gradient(var(--acc),var(--acc)) 11.7px 12px/3.2px 9px no-repeat;
}
/* the theme toggle was the last pill in the header */
:root[data-record] .themetog{border-radius:2px!important;font-family:var(--mono)!important;
font-size:.74rem!important;text-transform:lowercase;letter-spacing:.03em}
/* ==========================================================================
THE LAUNCHER — "not opaque, bolder, alive"
It was white-on-lime at 1.18:1 in dark (a real failure this audit had
allowlisted away), 12px, flat, static, and easy to miss entirely.
========================================================================== */
:root[data-record] #pn-ask:not(.pc){
/* legibility first: ink on the accent is 16.8:1 */
background:var(--acc)!important; color:var(--acc-ink)!important;
font-size:.82rem!important; font-weight:700!important;
padding:14px 18px!important; letter-spacing:.06em;
/* opaque and lifted off the page */
box-shadow:0 2px 0 var(--ink), 0 10px 30px -10px rgba(0,0,0,.45)!important;
border:2px solid var(--ink)!important;
transition:transform .14s ease, box-shadow .14s ease, background .14s ease!important;
}
:root[data-theme="dark"][data-record] #pn-ask:not(.pc){
box-shadow:0 2px 0 rgba(255,255,255,.22), 0 12px 34px -12px rgba(0,0,0,.8)!important;
border-color:rgba(255,255,255,.22)!important;
}
/* alive: a slow attention pulse on the ring, NOT on the button itself — moving
a fixed element under the thumb is a hit-target bug, not a flourish. It runs
3 times then stops, so it invites once instead of nagging forever. */
:root[data-record] #pn-ask:not(.pc)::after{
content:"";position:absolute;inset:-2px;border:2px solid var(--acc);
pointer-events:none;animation:askPulse 2.6s ease-out 1.2s 3 both;
}
@keyframes askPulse{
0% {opacity:.9; transform:scale(1)}
70% {opacity:0; transform:scale(1.28)}
100%{opacity:0; transform:scale(1.28)}
}
/* a live dot: the assistant is running right now, and says so */
/* The glyph already says "chat"; a second free-floating dot beside it read as
two marks. Ride it on the glyph's corner as a status light instead. */
:root[data-record] #pn-ask:not(.pc){position:fixed;gap:11px!important}
:root[data-record] #pn-ask:not(.pc) .dot{
width:6px;height:6px;background:var(--acc-ink);display:block;
position:absolute;left:29px;top:15px;margin:0;
animation:askBlink 2s steps(1,end) infinite;
}
@keyframes askBlink{0%,60%{opacity:1}61%,100%{opacity:.25}}
:root[data-record] #pn-ask:not(.pc):hover{transform:translateY(-2px);
box-shadow:0 4px 0 var(--ink), 0 16px 40px -12px rgba(0,0,0,.5)!important}
:root[data-record] #pn-ask:not(.pc):active{transform:translateY(0)}
/* respect the setting — no pulse, no blink, still bold */
@media (prefers-reduced-motion:reduce){
:root[data-record] #pn-ask:not(.pc)::after{animation:none;opacity:0}
:root[data-record] #pn-ask:not(.pc) .dot{animation:none}
}
/* ==========================================================================
HERO ART — unmuted.
Earlier today the field was a flat violet haze fighting the lime, so it was
dropped to .26 and desaturated. That was right for THAT art. The field is
now a hierarchy (hubs, orbiting satellites, hub->satellite links) that reads
--acc, and the brief is "command attention". One rule, both themes; the
saturate filter is gone because the art is already on-palette.
========================================================================== */
:root[data-record] .hero-art{opacity:.92;filter:none}
:root[data-record][data-theme="light"] .hero-art{opacity:.88;filter:none}
/* ==========================================================================
HERO HIERARCHY — from the user's colour-coded markup (2026-09-21).
RED mark + wordmark · the word PANTHEON · the two CTAs · reshuffle
YELLOW "I built" (lead-in to the claim)
GREEN the claim itself (substance — present, not shouting)
BLUE the h1 · the closing lede (recede)
The page was built the other way up: the h1 was the loudest thing on it.
========================================================================== */
/* BLUE — the headline recedes: smaller, lighter, quieter colour */
:root[data-record] .hero h1{font-size:clamp(1.55rem,4.6vw,2.3rem)!important;font-weight:500!important;
letter-spacing:-.01em!important;line-height:1.18!important;color:var(--faint)!important;
max-width:26ch;margin-bottom:22px!important}
:root[data-record] .hero h1 em,
:root[data-record] .hero h1 .acc{color:var(--mist)!important;font-style:normal}
/* the lede is now the primary text: larger, ink, tighter measure */
:root[data-record] .hero .lede{font-size:clamp(1.12rem,3.4vw,1.42rem)!important;line-height:1.5!important;
color:var(--ink)!important;max-width:34ch!important;font-weight:450}
/* RED — the product name is set as a mark, not a word */
:root[data-record] .hero .lede .brand,
:root[data-record] .hero .lede b{font-family:var(--mono);font-weight:700;letter-spacing:.06em;
color:var(--acc-ink);background:var(--acc);padding:1px 6px 2px;border-radius:2px;
font-size:.86em;vertical-align:1px}
/* GREEN — the claim reads at full weight; BLUE tail recedes */
:root[data-record] .hero .lede .tail{color:var(--faint);font-size:.9em}
:root[data-record] .hero .lede .tail a{color:var(--mist);text-decoration-color:var(--line-2)}
/* RED — the CTAs get real weight; the primary pulses once */
:root[data-record] .hero .cta{font-weight:700!important;font-size:.98rem!important;padding:15px 22px!important;
border:2px solid var(--ink)!important;box-shadow:0 3px 0 var(--ink)!important}
:root[data-record] .hero .cta:first-of-type{position:relative}
:root[data-record] .hero .cta:first-of-type::after{content:"";position:absolute;inset:-2px;border:2px solid var(--acc);
pointer-events:none;animation:askPulse 2.6s ease-out .6s 2 both}
:root[data-record] .hero .cta:not(:first-of-type){background:var(--bg)!important;color:var(--ink)!important}
/* [2026-09-21] the hero reshuffle was removed: re-rolling a labelled
diagram changed 129% of its pixels and none of its meaning. */
/* RED — the mark: heavier at the top, and the wordmark bold */
:root[data-record] .logo .mark{width:34px;height:34px}
:root[data-record] .logo span{font-weight:700!important;font-size:16px!important}
/* ============================================================================
THE LIVING MARK [logo v2]
The old mark was a drawing of a gate. This one WORKS like one: a request
descends, the threshold drops to admit it, then re-arms. That is the
product's whole thesis (every message clears a gate) performed by the logo
itself, in ~1.4kB of SVG and CSS, no JS.
Three tiers, because one drawing cannot serve 16px and 200px:
.mark header, 30px - breathes, reacts, clears on hover
.mark.is-display hero/footer - full clearance cycle on a loop
favicon.svg 16-32px - static silhouette, no motion at all
========================================================================== */
:root[data-record] .mark{overflow:visible}
:root[data-record] .mark .mk-bar{
transform-origin:32px 54px;
transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
:root[data-record] .mark .mk-mote{opacity:0}
:root[data-record] .mark .mk-lintel{transition:stroke .3s}
/* Idle: the threshold breathes, so the mark is never quite dead. Scale rather
than height so it animates on the compositor and costs no layout. */
@keyframes mkBreathe{
0%,100%{transform:scaleY(1)}
50% {transform:scaleY(.88)}
}
:root[data-record] .mark .mk-bar{animation:mkBreathe 4.2s ease-in-out infinite}
/* Hover/focus: the gate ADMITS. The threshold drops, the mote falls through,
the lintel takes the accent for the moment of clearance. */
:root[data-record] .logo:hover .mk-bar,
:root[data-record] .logo:focus-visible .mk-bar{
animation:none;transform:scaleY(.18);
}
:root[data-record] .logo:hover .mk-lintel,
:root[data-record] .logo:focus-visible .mk-lintel{stroke:var(--acc)}
@keyframes mkAdmit{
0% {opacity:0;transform:translateY(0)}
18% {opacity:1}
82% {opacity:1}
100%{opacity:0;transform:translateY(42px)}
}
:root[data-record] .logo:hover .mk-mote,
:root[data-record] .logo:focus-visible .mk-mote{
animation:mkAdmit .62s cubic-bezier(.4,0,.6,1);
}
/* ---- display tier: runs the cycle unattended -------------------------- */
@keyframes mkCycle{
0%,62% {transform:scaleY(1)}
70%,86% {transform:scaleY(.18)}
96%,100%{transform:scaleY(1)}
}
@keyframes mkCycleMote{
0%,58% {opacity:0;transform:translateY(0)}
64% {opacity:1;transform:translateY(0)}
88% {opacity:1;transform:translateY(40px)}
92%,100%{opacity:0;transform:translateY(44px)}
}
@keyframes mkCycleLintel{
0%,60%,94%,100%{stroke:currentColor}
68%,86% {stroke:var(--acc)}
}
:root[data-record] .mark.is-display .mk-bar{animation:mkCycle 5.6s ease-in-out infinite}
:root[data-record] .mark.is-display .mk-mote{animation:mkCycleMote 5.6s ease-in-out infinite}
:root[data-record] .mark.is-display .mk-lintel{animation:mkCycleLintel 5.6s ease-in-out infinite}
/* ---- guards ------------------------------------------------------------
Below ~22px the 7px threshold and the mote collapse into mush, so the small
tier shows the silhouette only. And motion is opt-out, as everywhere else. */
:root[data-record] .mark.is-small .mk-mote{display:none}
:root[data-record] .mark.is-small .mk-bar{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){
:root[data-record] .mark .mk-bar,
:root[data-record] .mark.is-display .mk-bar,
:root[data-record] .mark.is-display .mk-mote,
:root[data-record] .mark.is-display .mk-lintel{animation:none!important}
:root[data-record] .logo:hover .mk-bar{transform:scaleY(.18)}
:root[data-record] .logo:hover .mk-mote{animation:none;opacity:0}
}
/* ---- .cta.alt outside the hero --------------------------------------------
Found by the contrast audit on work.html and pnt.html after the roll:
ink text (edeef0) on the accent fill (c8ff4d) = 1.01:1, invisible.
The .alt rule set colour+transparent background but was scoped to the LIGHT
theme only, so in dark the ink colour landed on the accent background that
the base .cta rule paints. Bind the pair together, in both themes: a
secondary CTA is an outline, never accent-filled. */
:root[data-record] .cta.alt,
:root[data-record] .closer .cta:not(:first-of-type),
:root[data-record] a.cta.alt:link,
:root[data-record] a.cta.alt:visited{
background:transparent!important;
color:var(--ink)!important;
border:2px solid var(--line2)!important;
}
:root[data-record] .cta.alt:hover{
border-color:var(--acc)!important;color:var(--acc)!important;background:transparent!important;
}
/* ---- --acc-wash never moved with the palette -----------------------------
Swept with a DOM walk for blue-dominant computed colours across 26
page/theme combinations: 5 elements (.vnode b on prove.html, .ctl.on on
studio.html) still painted rgba(124,92,255,.12) — the ORIGINAL brand violet.
The record sheet redefined --acc/--acc-soft/--acc-dim but not --acc-wash,
so every consumer of the wash kept the old hue. Derive it from the live
accent instead of restating a literal, so it can never drift again. */
:root[data-record]{
--acc-wash:color-mix(in srgb, var(--acc) 14%, transparent);
}
/* ---- the headline hierarchy applies to every page ------------------------
The hierarchy from the user's colour-coded pass (headline recedes, the
claim leads) was scoped to ".hero h1". Interior pages use .pagehead, so
they kept a full-lime headline: louder than the homepage and inconsistent
with the priority the user drew. Same treatment, both containers. */
:root[data-record] .pagehead h1{
font-size:clamp(1.5rem,4.4vw,2.2rem)!important;
font-weight:500!important;
color:var(--ink)!important;
letter-spacing:-.012em;line-height:1.24;
}
:root[data-record] .pagehead h1 em,
:root[data-record] .pagehead h1 span.acc{
font-style:normal;color:var(--acc)!important;
}
/* ---- code must not push the page ------------------------------------------
evidence.html overflowed 11px at 360px: a run measured 343px wide
inside a narrower column. Long identifiers cannot hyphenate, so they need
an explicit break opportunity; overflow-wrap alone does not break a token
with no spaces. Measured, not assumed: the offender was CODE w=343 right=371
against a 360px viewport. */
:root[data-record] code,
:root[data-record] pre,
:root[data-record] .ed{
overflow-wrap:anywhere;
word-break:break-word;
max-width:100%;
}
:root[data-record] pre{overflow-x:auto}
/* ---- the blog ------------------------------------------------------------
Seen on the rendered page, not in any automated check: post titles kept
Fraunces and the tags kept 999px pills, so the blog read as the old design
wearing the new nav. Same treatment as every other heading and label. */
:root[data-record] .post h1,
:root[data-record] .post-item h2,
:root[data-record] .post-item h3,
:root[data-record] .post-list h2,
:root[data-record] .post-wrap h1{
font-family:var(--sans)!important;
font-weight:500!important;
letter-spacing:-.012em;
}
:root[data-record] .post-tag{
border-radius:0!important;
font-family:var(--mono)!important;
font-size:.66rem!important;letter-spacing:.14em;text-transform:uppercase;
background:transparent!important;
border:1px solid var(--line2)!important;
color:var(--faint)!important;padding:3px 8px!important;
}
:root[data-record] .post-meta{font-family:var(--mono)!important}
/* ---- the composer still carried two violet tints ---------------------------
Caught by reading computed styles, NOT by the purple sweep: that detector
required blue-minus-green > 55, and these are subtle tints at 25. A hue can
be wrong without being saturated. Detector widened alongside this fix.
light input border rgb(215,207,232) = #d7cfe8
dark input bg rgb(15,12,22) = #0f0c16 (the OLD page background)
[2026-09-21] */
:root[data-record] .chat input,
:root[data-record] .chat textarea,
:root[data-record] #pn-panel input,
:root[data-record] #pn-panel textarea{
background:var(--bg)!important;border:1px solid var(--line2)!important;
border-radius:0!important;color:var(--ink)!important;
font-family:var(--mono)!important}
:root[data-record] .chat input:focus,
:root[data-record] #pn-panel input:focus{
border-color:var(--acc)!important;outline:none;
box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 22%, transparent)!important}
:root[data-record] .chat input::placeholder,
:root[data-record] #pn-panel input::placeholder{color:var(--faint)!important}
/* ---- the violet-tinted greys -----------------------------------------------
#463f57 (rgb 70,63,87) and #d7cfe8 / #efeafa: greys mixed with the OLD brand
violet, from when the whole palette was violet. Neutral to the eye in
isolation, wrong beside a lime/green accent. 246 elements, incl. the nav
labels on every page in light theme.
Found only after the purple detector was widened and MUTATION-PROVEN against
the tints it had missed; the original threshold (blue-green > 55) could not
see any of them. [2026-09-21] */
:root[data-record][data-theme="light"] .nav a:not(.active),
:root[data-record][data-theme="light"] .gap-tile span,
:root[data-record][data-theme="light"] .card p,
:root[data-record][data-theme="light"] .bt-p,
:root[data-record][data-theme="light"] .an-node i{color:var(--mist)!important}
:root[data-record][data-theme="light"] .msg.bot code{
background:var(--panel)!important;border-color:var(--line2)!important;
color:var(--ink)!important}
:root[data-record][data-theme="light"] .chip{
background:transparent!important;color:var(--mist)!important}
/* ---- the widget's own tiles ------------------------------------------------
.pw-* is the GATEWAY widget bundle (widget.js), shared by every Studio
tenant, so the violet is corrected from the page, never in the renderer.
84 elements at full-strength #7c5cff, all inside the chat panel: the earlier
sweep ran with the panel CLOSED and reported the site clean.
A detector that never opens the thing it audits cannot see inside it.
[2026-09-21] */
:root[data-record] .pw-tile-ic,
:root[data-record] .pw-tile-ic *{color:var(--acc)!important;stroke:var(--acc)!important}
:root[data-record] .pw-tile{border-radius:0!important;
border:1px solid var(--line2)!important;background:transparent!important;
font-family:var(--mono)!important}
:root[data-record] .pw-tile:hover{border-color:var(--acc)!important}
/* ---- the widget palette, at its source -------------------------------------
widget.js sets its ENTIRE palette as 14 inline --pw-* custom properties on
its root element, all still the old brand violet family:
--pw-acc #7c5cff · --pw-bg #141019 · --pw-bubble #1b1626 · --pw-line #241f30
Chasing the elements was wrong: they are unclassed divs with inline styles,
and there were 9 visible plus dozens hidden. Re-point the VARIABLES and every
one of them follows, including any the widget renders later in a conversation.
Inline custom properties are still overridable by a stylesheet rule with
!important, which is what makes this reachable at all. [2026-09-21] */
:root[data-record] [style*="--pw-acc"]{
--pw-acc:var(--acc)!important;
--pw-bg:var(--panel)!important;
--pw-bg2:var(--bg)!important;
--pw-ink:var(--ink)!important;
--pw-mist:var(--mist)!important;
--pw-line:var(--line2)!important;
--pw-bubble:transparent!important;
--pw-field:var(--bg)!important;
--pw-figure:var(--panel)!important;
--pw-raise:var(--panel)!important;
--pw-shadow:rgba(0,0,0,.35)!important;
}
/* the widget's own radii, squared to the record language */
:root[data-record] [style*="--pw-acc"] button,
:root[data-record] [style*="--pw-acc"] input,
:root[data-record] [style*="--pw-acc"] textarea{border-radius:0!important}
/* ---- the widget's hardcoded literals ---------------------------------------
Three elements the variable re-point could not reach, because widget.js
writes the colour LITERALLY into the inline style rather than through
--pw-acc: its panel header, its Send button (both rgb(52,39,107)) and the
rounded field/launcher. Matched on the literal itself via attribute
selectors; an inline style still loses to !important. [2026-09-21] */
:root[data-record] [style*="rgb(52, 39, 107)"],
:root[data-record] [style*="rgb(52,39,107)"]{
background:var(--acc)!important;color:var(--acc-ink)!important;
border-radius:0!important;font-family:var(--mono)!important;
font-weight:700!important;letter-spacing:.04em}
:root[data-record] [style*="border-radius: 9px"],
:root[data-record] [style*="border-radius:9px"],
:root[data-record] [style*="border-radius: 26px"],
:root[data-record] [style*="border-radius:26px"]{border-radius:0!important}
/* ---- the gateway panel: header weight and the banner -----------------------
Two defects my own literal-override introduced or left, both only visible by
OPENING the panel and LOOKING at it:
(1) the header took the accent as a full-bleed 393x66 lime slab. The record
language puts the accent on small marks, never a field this size: it
shouts louder than the page it fronts. Ink ground, accent wordmark.
(2) the welcome banner is still a violet constellation image: the last piece
of the old palette anywhere on the site, and the first thing the panel
shows. [2026-09-21] */
:root[data-record] [style*="rgb(52, 39, 107)"],
:root[data-record] [style*="rgb(52,39,107)"]{
background:var(--panel)!important;color:var(--ink)!important;
border-bottom:1px solid var(--line2)!important}
/* the Send button stays a real accent button: it is small, and it is the act */
:root[data-record] [style*="rgb(52, 39, 107)"][style*="cursor: pointer"]{
background:var(--acc)!important;color:var(--acc-ink)!important;
border-bottom:0!important}
/* the panel wordmark takes the accent instead of the whole bar */
:root[data-record] [style*="rgb(52, 39, 107)"] > :first-child{color:var(--acc)!important}
/* the welcome banner is a