/* ==========================================================================
BINERET — brand layer (bineret-brand.css)
--------------------------------------------------------------------------
The theme it sits on is monochrome by design: greys and white, no hue
anywhere, both in the dark original and in the light layer built on top of
it. This file puts the brand blue into it, and it is the only file that
knows the blue exists — remove the one that loads it and the site
falls back to the monochrome design it was before, intact.
LOAD ORDER — the reason this is a hand-printed and not an enqueue.
Part of the theme's CSS lives in the database (Code Studio) and is echoed at
`wp_head` priority 100, which is *after* everything wp_enqueue_style prints.
An enqueued sheet therefore loses every specificity tie to the database copy.
`inc/brand.php` prints this one at priority 101 instead, so it is last in the
document and plain selectors are enough. `!important` appears here only where
the database CSS already used it — matching a flag is the only answer to a
declaration that opted out of the cascade, and it is confined to those.
THE THREE TOKEN TRAPS this file has to answer, all of them the same shape:
a custom property resolves from the nearest ANCESTOR that declares it, not
from the most specific selector in the document. Overriding `:root` does
nothing for a subtree whose wrapper re-declares the same name.
.app (chrome.css) — wraps every inner page
.topbar (database) — the header
.sidebar (chrome.css) — the right-hand rail
.lav-* (per context) — single/blog/shop/account/auth/404/checkout
So each is re-declared here at its own depth. Section 3 does that.
CONTRAST — every pair below was measured, not estimated:
#0439D9 on #FFFFFF .... 8.10 AAA light primary, text-safe
#0439D9 on #F1F4FB .... 7.36 AAA light primary on the canvas
#0330A8 on #FFFFFF .... 10.54 AAA light press state
#FFFFFF on #0439D9 .... 8.10 AAA light CTA label
#7BA8FF on #0B1220 .... 7.92 AAA dark primary, text-safe
#4D93FF fill / #04122E ..6.13 AA dark CTA label
#0B1220 on #F1F4FB .... 17.62 AAA light body text
#5A6480 on #F1F4FB .... 5.34 AA light muted text
#94A2BE on #0B1220 .... 7.28 AAA dark muted text
#0439D9 is the brand blue and it is excellent on white — and it collapses to
2.28:1 on the dark field, which is why this file carries a ramp rather than a
colour. Light draws its primary from 600/700, dark from 300/350. Same hue,
two ends of it, so both themes are the same brand rather than one brand and
one compromise.
========================================================================== */
/* ==========================================================================
1 · THE RAMP
Theme-independent. Nothing renders straight from these; every theme picks
its own rungs out of them in section 2. Keeping the ladder separate from the
choice is what lets a single value move without hunting for its copies.
========================================================================== */
:root {
--brand-950:#01102E;
--brand-900:#021845;
--brand-800:#03246E;
--brand-700:#0330A8; /* light: press / emphasis 10.54 on white */
--brand-600:#0439D9; /* light: PRIMARY — the asked-for colour */
--brand-500:#2563EB;
--brand-400:#3B82F6;
--brand-350:#4D93FF; /* dark: CTA fill */
--brand-300:#7BA8FF; /* dark: PRIMARY — text and icons 7.92 on ink */
--brand-200:#B6CDFF;
--brand-100:#DCE7FF;
--brand-50 :#EEF3FF;
/* Blue-tinted neutrals. A hue in the greys is what stops a blue accent from
reading as a sticker applied to a grey site — the brand doc's Ink #0B1220
is the anchor and the rest of the ladder is built to it. */
--ink-950:#070C16;
--ink-900:#0B1220;
--ink-800:#111A2B;
--ink-700:#1B2438;
--ink-600:#263149;
--ink-500:#3A465F;
--ink-400:#5A6480;
--ink-300:#8A94AC;
--ink-200:#C3CBDC;
--ink-100:#E2E8F4;
--ink-50 :#F1F4FB;
/* Semantic, hue-shifted toward the brand so they belong to the same family */
--ok-600:#0F7A45; --ok-300:#5BD69A;
--warn-600:#9A6100; --warn-300:#F5B44B;
--err-600:#B3261E; --err-300:#FF9A93;
}
/* ==========================================================================
2 · THE TWO THEMES
--------------------------------------------------------------------------
Dark is the absence of the attribute, which is the theme's own convention,
so its block is a bare `:root` and wins over global.root.css on source order
alone. Light is `:root[data-theme="light"]` — (0,1,1) — which beats both the
bare `:root` here and the `[data-theme="light"]` block inside
bineret-glass.css, so the two never race.
========================================================================== */
/* ---------------------------------------------------------------- 2a · DARK */
:root {
/* — surfaces: the near-black keeps its value and gains the hue — */
--bg:#0B1220; --bg-deep:#070C16; --ink:#070C16; --ink-deep:#050912; --menu-bg:#111A2B;
/* — text — */
--text:#E9EDF7; --text-2:#C7D2E6; --text-3:#A8B4CC; --muted:#94A2BE;
/* — accents — */
--accent:#7BA8FF; --accent-2:#B6CDFF; --accent-3:#8A94AC; --gold:#7BA8FF;
--cta:#4D93FF; --cta-ink:#04122E;
--green:#5BD69A; --blue:#7BA8FF; --pink:#B6CDFF;
--danger:#FF9A93; --success:#5BD69A;
/* — glass: white frost gains a blue cast, and the strokes go blue outright.
A white rim on a blue-black field reads as a cut edge; a blue one reads
as the same material seen end-on, which is the effect wanted here. — */
--glass-1:rgba(123,168,255,0.06); --glass-2:rgba(123,168,255,0.11); --glass-3:rgba(123,168,255,0.17);
--stroke:rgba(150,185,255,0.20); --stroke-soft:rgba(150,185,255,0.11);
--sheen:linear-gradient(180deg,rgba(214,229,255,0.30),rgba(214,229,255,0.04) 42%,rgba(214,229,255,0) 72%);
--edge:inset 0 1px 0 rgba(190,215,255,0.38),inset 0 -1px 1px rgba(4,20,54,0.30);
/* Shadows carry the hue too. A neutral black shadow under a blue-black panel
is the one place the eye notices grey and cannot say why. */
--e1:0 2px 8px rgba(3,10,26,.42);
--e2:0 12px 30px rgba(3,10,26,.50);
--e3:0 40px 120px rgba(3,10,26,.62);
--focus:0 0 0 3px rgba(123,168,255,.55);
/* ===== Liquid-Glass family ===== */
--lav-ink-0:#070C16; --lav-ink-1:#0B1220; --lav-ink-3:#1B2438; --lav-ink-6:#5A6480;
--lav-ink-8:#8A94AC; --lav-ink-9:#C3CBDC; --lav-ink-white:#E9EDF7;
--lav-bg:#0B1220; --lav-bg-raised:#111A2B; --lav-surface:#111A2B;
--lav-text:#E9EDF7;
--lav-text-primary:#E9EDF7;
--lav-text-secondary:rgba(233,237,247,0.76);
--lav-text-tertiary:rgba(233,237,247,0.60);
--lav-text-2:rgba(233,237,247,0.76); --lav-text-3:rgba(233,237,247,0.60); --lav-text-4:rgba(233,237,247,0.42);
--lav-line:rgba(150,185,255,0.14); --lav-line-strong:rgba(150,185,255,0.26);
--lav-focus:#7BA8FF;
--lav-accent:#7BA8FF; --lav-accent-2:#B6CDFF;
--lav-cta:#4D93FF; --lav-cta-press:#7BA8FF; --lav-cta-ink:#04122E;
--lav-success:#5BD69A; --lav-warning:#F5B44B; --lav-error:#FF9A93; --lav-info:#7BA8FF;
--lav-blue:#7BA8FF; --lav-indigo:#8FA8FF; --lav-cyan:#6FD4E8; --lav-teal:#5BD6C4;
--lav-glass-tint:rgb(123 168 255 / calc(0.085 * var(--lav-glass-intensity,1)));
--lav-glass-tint-strong:rgb(123 168 255 / calc(0.145 * var(--lav-glass-intensity,1)));
--lav-glass-edge:rgba(150,185,255,0.22);
--lav-glass-edge-bright:rgba(200,222,255,0.58);
--lav-glass-highlight:rgba(200,222,255,0.50);
--lav-glass-shade:rgba(2,8,22,0.34);
--lav-glass-scrim:rgba(7,12,22,0.50);
--lav-glass-text-plate:rgba(7,12,22,0.62);
--lav-glass-refract-1:rgba(160,195,255,0.11);
--lav-glass-refract-2:rgba(120,160,255,0.06);
--lav-glass-blue-tint:rgb(123 168 255 / calc(0.16 * var(--lav-glass-intensity,1)));
--lav-glass-smoke:rgb(5 10 20 / calc(0.50 * var(--lav-glass-intensity,1)));
--lav-glass-saturate:150%;
--lav-glass-brightness:1.05;
--lav-glass-shadow:
0 1px 2px rgba(3,10,26,.30),
0 18px 44px -14px rgba(3,10,26,.60),
0 40px 90px -30px rgba(4,40,140,.32);
--lav-shadow-1:0 1px 2px rgba(3,10,26,.26);
--lav-shadow-2:0 4px 12px rgba(3,10,26,.32);
--lav-shadow-3:0 10px 28px rgba(3,10,26,.40);
--lav-shadow-4:0 20px 48px rgba(3,10,26,.48);
--lav-shadow-5:0 32px 72px rgba(3,10,26,.58);
/* Surface fills for the marketplace home. home.css used to write these as
literal `rgb(255 255 255 / .05)`, which is invisible on a light page; the
literals were replaced with these three names so both themes can answer. */
--surf-1:rgba(123,168,255,0.055);
--surf-2:rgba(123,168,255,0.085);
--surf-3:rgba(123,168,255,0.13);
--surf-border:rgba(150,185,255,0.16);
--surf-sheen:linear-gradient(180deg,rgba(160,195,255,0.10),rgba(120,160,255,0.02) 58%,rgba(120,160,255,0) 100%);
--surf-inset:rgba(190,215,255,0.14);
--surf-plate:rgba(11,18,32,0.62);
--surf-plate-strong:rgba(11,18,32,0.80);
--surf-footer:rgba(4,9,20,0.28);
--surf-glyph:rgba(160,195,255,0.13);
--surf-glyph-strong:rgba(160,195,255,0.20);
}
/* --------------------------------------------------------------- 2b · LIGHT */
:root[data-theme="light"] {
color-scheme: light;
/* The canvas is not white. #FFF as a page field makes every glass panel above
it disappear, and the panels are the design. It sits one step down the blue
ramp so the white panels have something to rise off. */
--bg:#F1F4FB; --bg-deep:#FFFFFF; --ink:#FFFFFF; --ink-deep:#FAFBFF; --menu-bg:#FFFFFF;
--text:#0B1220; --text-2:#263149; --text-3:#475069; --muted:#5A6480;
--accent:#0439D9; --accent-2:#0330A8; --accent-3:#5A6480; --gold:#0439D9;
--cta:#0439D9; --cta-ink:#FFFFFF;
--green:#0F7A45; --blue:#0439D9; --pink:#5A6480;
--danger:#B3261E; --success:#0F7A45;
/* Glass on light: the tint flips from white-on-dark to blue-on-white, and the
alpha drops hard — a blue wash reads several times stronger against white
than a white wash does against black, so .06 there is .04 here. */
--glass-1:rgba(4,57,217,0.035); --glass-2:rgba(4,57,217,0.06); --glass-3:rgba(4,57,217,0.095);
--stroke:rgba(4,57,217,0.15); --stroke-soft:rgba(4,57,217,0.085);
--sheen:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,255,255,0.30) 42%,rgba(255,255,255,0) 72%);
--edge:inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -1px 1px rgba(4,57,217,0.07);
/* Light does not cast a light shadow, but a shadow tuned for black reads as
dirt on white. Every alpha is cut and the hue goes blue, so the shadow is
the same light through the same glass rather than a grey smudge. */
--e1:0 1px 2px rgba(11,18,32,.05),0 2px 8px rgba(4,57,217,.05);
--e2:0 2px 6px rgba(11,18,32,.045),0 12px 28px -8px rgba(4,57,217,.10);
--e3:0 6px 16px rgba(11,18,32,.05),0 32px 72px -24px rgba(4,57,217,.16);
--focus:0 0 0 3px rgba(4,57,217,.42);
/* ===== Liquid-Glass family ===== */
--lav-ink-0:#FFFFFF; --lav-ink-1:#F7F9FF; --lav-ink-3:#E2E8F4; --lav-ink-6:#8A94AC;
--lav-ink-8:#475069; --lav-ink-9:#263149; --lav-ink-white:#0B1220;
--lav-bg:#F1F4FB; --lav-bg-raised:#FFFFFF; --lav-surface:#FFFFFF;
--lav-text:#0B1220;
--lav-text-primary:#0B1220;
--lav-text-secondary:#263149;
--lav-text-tertiary:#475069;
--lav-text-2:#263149; --lav-text-3:#475069; --lav-text-4:#5A6480;
--lav-line:rgba(4,57,217,0.12); --lav-line-strong:rgba(4,57,217,0.22);
--lav-focus:#0439D9;
--lav-accent:#0439D9; --lav-accent-2:#0330A8;
--lav-cta:#0439D9; --lav-cta-press:#0330A8; --lav-cta-ink:#FFFFFF;
--lav-success:#0F7A45; --lav-warning:#9A6100; --lav-error:#B3261E; --lav-info:#0439D9;
--lav-blue:#0439D9; --lav-indigo:#3730A3; --lav-cyan:#0E7490; --lav-teal:#0F766E;
--lav-glass-tint:rgb(255 255 255 / calc(0.62 * var(--lav-glass-intensity,1)));
--lav-glass-tint-strong:rgb(255 255 255 / calc(0.82 * var(--lav-glass-intensity,1)));
--lav-glass-edge:rgba(4,57,217,0.14);
--lav-glass-edge-bright:rgba(255,255,255,0.98);
--lav-glass-highlight:rgba(255,255,255,0.98);
--lav-glass-shade:rgba(4,57,217,0.10);
--lav-glass-scrim:rgba(248,250,255,0.68);
--lav-glass-text-plate:rgba(255,255,255,0.80);
--lav-glass-refract-1:rgba(4,57,217,0.055);
--lav-glass-refract-2:rgba(4,57,217,0.035);
--lav-glass-blue-tint:rgb(4 57 217 / calc(0.07 * var(--lav-glass-intensity,1)));
--lav-glass-smoke:rgb(11 18 32 / calc(0.28 * var(--lav-glass-intensity,1)));
--lav-glass-saturate:125%;
--lav-glass-brightness:1.02;
--lav-glass-shadow:
0 1px 2px rgba(11,18,32,.05),
0 10px 26px -10px rgba(4,57,217,.16),
0 28px 60px -28px rgba(4,57,217,.20);
--lav-shadow-1:0 1px 2px rgba(11,18,32,.06);
--lav-shadow-2:0 2px 6px rgba(11,18,32,.05),0 6px 16px -6px rgba(4,57,217,.10);
--lav-shadow-3:0 4px 10px rgba(11,18,32,.05),0 14px 32px -12px rgba(4,57,217,.14);
--lav-shadow-4:0 6px 16px rgba(11,18,32,.05),0 24px 52px -20px rgba(4,57,217,.18);
--lav-shadow-5:0 10px 24px rgba(11,18,32,.06),0 40px 88px -32px rgba(4,57,217,.22);
--surf-1:rgba(255,255,255,0.72);
--surf-2:rgba(255,255,255,0.88);
--surf-3:rgba(4,57,217,0.055);
--surf-border:rgba(4,57,217,0.11);
--surf-sheen:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(238,243,255,0.55) 100%);
--surf-inset:rgba(255,255,255,0.95);
--surf-plate:rgba(255,255,255,0.76);
--surf-plate-strong:rgba(255,255,255,0.92);
--surf-footer:rgba(233,239,251,0.55);
--surf-glyph:rgba(4,57,217,0.16);
--surf-glyph-strong:rgba(4,57,217,0.22);
}
/* ==========================================================================
3 · THE FOUR PLACES THAT RE-DECLARE TOKENS LOCALLY
--------------------------------------------------------------------------
None of these is reachable from `:root`, however the selectors compare. A
custom property is inherited from the nearest declaring ancestor, so a
wrapper that names `--text` owns `--text` for its whole subtree. The fix is
always to re-declare at the same depth, never to add specificity at :root.
Order inside each pair matters: the dark form is a bare class (wins over
chrome.css and the database on source order), the light form carries the
attribute (wins over both the dark form here and the light layer's own copy).
========================================================================== */
/* 3a · .app — wraps every inner page. The most expensive of the four to miss:
the page looks right at a glance and every lede, breadcrumb and byline inside
it is the wrong value, which reads as a rendering fault rather than a
missing rule. */
.app {
--accent:#7BA8FF; --accent-2:#B6CDFF; --accent-3:#8A94AC; --gold:#7BA8FF;
--cta:#4D93FF; --cta-ink:#04122E;
--text:#E9EDF7; --text-2:rgba(233,237,247,.78); --text-3:rgba(233,237,247,.62); --muted:rgba(233,237,247,.50);
--bg-deep:#070C16; --success:#5BD69A; --danger:#FF9A93;
--glass-1:rgba(123,168,255,.06); --glass-2:rgba(123,168,255,.12); --glass-3:rgba(123,168,255,.17);
--stroke:rgba(150,185,255,.20); --stroke-soft:rgba(150,185,255,.11);
--sheen:linear-gradient(180deg,rgba(214,229,255,.32),rgba(214,229,255,.04) 42%,rgba(214,229,255,0) 72%);
--edge:inset 0 1px 0 rgba(190,215,255,.38),inset 0 -1px 1px rgba(4,20,54,.30);
--e1:0 2px 8px rgba(3,10,26,.42); --e2:0 12px 30px rgba(3,10,26,.50); --e3:0 40px 120px rgba(3,10,26,.62);
}
:root[data-theme="light"] .app {
--accent:#0439D9; --accent-2:#0330A8; --accent-3:#5A6480; --gold:#0439D9;
--cta:#0439D9; --cta-ink:#FFFFFF;
--text:#0B1220; --text-2:#263149; --text-3:#475069; --muted:#5A6480;
--bg-deep:#FFFFFF; --success:#0F7A45; --danger:#B3261E;
--glass-1:rgba(4,57,217,.035); --glass-2:rgba(4,57,217,.06); --glass-3:rgba(4,57,217,.095);
--stroke:rgba(4,57,217,.15); --stroke-soft:rgba(4,57,217,.085);
--sheen:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.30) 42%,rgba(255,255,255,0) 72%);
--edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(4,57,217,.07);
--e1:0 1px 2px rgba(11,18,32,.05),0 2px 8px rgba(4,57,217,.05);
--e2:0 2px 6px rgba(11,18,32,.045),0 12px 28px -8px rgba(4,57,217,.10);
--e3:0 6px 16px rgba(11,18,32,.05),0 32px 72px -24px rgba(4,57,217,.16);
}
/* 3b · .topbar — its CSS is in the database, echoed after every enqueued sheet.
This file loads after that, so a bare `.topbar` is enough. */
.topbar {
--accent:#7BA8FF; --accent-2:#B6CDFF; --accent-3:#8A94AC; --gold:#7BA8FF; --cta:#4D93FF;
--green:#5BD69A; --blue:#7BA8FF; --pink:#B6CDFF; --success:#5BD69A; --danger:#FF9A93;
--text:#E9EDF7; --text-2:rgba(233,237,247,.78); --text-3:rgba(233,237,247,.62); --muted:rgba(233,237,247,.50);
--bg-deep:#070C16;
--stroke:rgba(150,185,255,.20); --stroke-soft:rgba(150,185,255,.11);
--glass-1:rgba(123,168,255,.06); --glass-2:rgba(123,168,255,.12);
background:rgba(13,20,36,.62);
border:1px solid rgba(150,185,255,.16);
box-shadow:0 1px 0 rgba(190,215,255,.10) inset,0 18px 48px -18px rgba(3,10,26,.70);
}
:root[data-theme="light"] .topbar {
--accent:#0439D9; --accent-2:#0330A8; --accent-3:#5A6480; --gold:#0439D9; --cta:#0439D9;
--green:#0F7A45; --blue:#0439D9; --pink:#5A6480; --success:#0F7A45; --danger:#B3261E;
--text:#0B1220; --text-2:#263149; --text-3:#475069; --muted:#5A6480;
--bg-deep:#FFFFFF;
--stroke:rgba(4,57,217,.15); --stroke-soft:rgba(4,57,217,.085);
--glass-1:rgba(4,57,217,.035); --glass-2:rgba(4,57,217,.06); --glass-3:rgba(4,57,217,.095);
background:rgba(255,255,255,.76);
border:1px solid rgba(4,57,217,.11);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(11,18,32,.04),
0 10px 30px -12px rgba(4,57,217,.18);
}
/* The topbar's own glass sub-layers — refraction, tint, sheen. They are white
fills, which is haze on a light field, so they are re-pointed rather than
switched off: the material stays, the value flips. */
:root[data-theme="light"] .topbar .lzx-tnt { background:rgba(4,57,217,.030); }
:root[data-theme="light"] .topbar .lzx-shn { background:var(--sheen); }
.topbar .lzx-tnt { background:rgba(123,168,255,.055); }
/* The sheen layer's bevel is `inset 3px 3px rgba(255,255,255,.9)` against
`inset -3px -3px rgba(0,0,0,.34)` — a white lip over a black one, which is
how you cut a bevel into a dark plate. Over a white plate the black half is
not a bevel, it is a grey smear along the bottom-right, and it was the single
thing making the light header look dirty. Rebalanced, not removed: the weight
moves from the black inset to the white one and the remainder goes blue.
`!important` here answers the `!important` the same declarations carry in the
database copy of the header CSS; nothing else in this block needs it. */
:root[data-theme="light"] .topbar .lzx-shn {
box-shadow:
inset 2px 2px 1px rgba(255,255,255,.98),
inset -2px -2px 1px rgba(4,57,217,.06),
inset 0 0 34px rgba(255,255,255,.45),
inset 0 -18px 40px rgba(4,57,217,.035),
0 1px 0 rgba(255,255,255,.85);
}
.topbar .lzx-shn {
box-shadow:
inset 2px 2px 1px rgba(200,222,255,.34),
inset -2px -2px 1px rgba(2,8,22,.34),
inset 0 0 34px rgba(160,195,255,.10),
inset 0 -18px 40px rgba(2,8,22,.20),
0 1px 0 rgba(200,222,255,.16);
}
/* 3c · .sidebar — the right-hand rail. Kept, by request; see section 8. */
.sidebar {
--accent:#7BA8FF;
--stroke:rgba(150,185,255,.20); --stroke-soft:rgba(150,185,255,.11);
--glass-1:rgba(123,168,255,.06);
}
:root[data-theme="light"] .sidebar {
--accent:#0439D9;
--stroke:rgba(4,57,217,.15); --stroke-soft:rgba(4,57,217,.085);
--glass-1:rgba(4,57,217,.035);
}
/* 3d · the inner contexts. Each opens its stylesheet with a five-name private
vocabulary — one panel fill, two card fills, two hairlines — and draws every
surface inside itself from those five. Overriding them reaches every panel in
every one of those pages without naming a single component, and keeps
working when a component is added later. */
.lav-single, .lav-blog, .lav-shop, .lav-account, .lav-auth, .lav-404, .lav-checkout {
--surf:linear-gradient(180deg,rgba(20,30,52,.72),rgba(11,18,32,.86));
--card:rgba(123,168,255,.055);
--card-2:rgba(123,168,255,.095);
--hairline:rgba(150,185,255,.15);
--hairline-2:rgba(150,185,255,.08);
}
:root[data-theme="light"] .lav-single,
:root[data-theme="light"] .lav-blog,
:root[data-theme="light"] .lav-shop,
:root[data-theme="light"] .lav-account,
:root[data-theme="light"] .lav-auth,
:root[data-theme="light"] .lav-404,
:root[data-theme="light"] .lav-checkout {
/* Translucent, not solid: these sit over the page gradient with a backdrop
blur behind them, and a solid fill throws away the blur that is the only
thing separating a glass panel from a rectangle. The gradient runs light to
faintly blue top-to-bottom — that alone is most of the sense of volume. */
--surf:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(242,246,255,.80) 100%);
--card:rgba(4,57,217,.035);
--card-2:rgba(4,57,217,.065);
--hairline:rgba(4,57,217,.12);
--hairline-2:rgba(4,57,217,.065);
}
/* ==========================================================================
4 · THE CANVAS
--------------------------------------------------------------------------
Painted by `html body::before` in bineret-bg.css as a stack of literal hex
values with no token in sight, so it has to be restated rather than
retinted. Same four-stop geometry in both themes — two highlights across the
top, a floor gradient rising from below, a vertical base — so light and dark
are the same room under different light rather than two designs.
========================================================================== */
html { background:var(--ink-deep,#050912); }
html body::before {
background:
radial-gradient(120% 90% at 18% 6%, #172445 0%, rgba(23,36,69,0) 46%),
radial-gradient(95% 80% at 88% 18%, #101A31 0%, rgba(16,26,49,0) 50%),
radial-gradient(140% 120% at 50% 120%, #06101F 0%, rgba(6,16,31,0) 55%),
linear-gradient(180deg, #0B1220 0%, #091023 60%, #060B16 100%);
}
:root[data-theme="light"] { background:#FFFFFF; }
:root[data-theme="light"] body::before {
background:
radial-gradient(120% 90% at 18% 6%, #FFFFFF 0%, rgba(255,255,255,0) 46%),
radial-gradient(95% 80% at 88% 18%, #EFF4FF 0%, rgba(239,244,255,0) 52%),
radial-gradient(140% 120% at 50% 120%, #DFE8FA 0%, rgba(223,232,250,0) 58%),
linear-gradient(180deg, #FBFCFF 0%, #F2F5FD 58%, #E9EFFB 100%);
}
/* The hero repeats the same stack one step brighter, so the fold reads as a lit
panel sitting on the canvas rather than as a seam between two backgrounds. */
:root[data-theme="light"] .hero__bg {
background:
radial-gradient(120% 90% at 18% 8%, #FFFFFF 0%, rgba(255,255,255,0) 46%),
radial-gradient(95% 80% at 88% 22%, #F0F5FF 0%, rgba(240,245,255,0) 52%),
radial-gradient(140% 120% at 50% 120%, #DCE7FA 0%, rgba(220,231,250,0) 58%),
linear-gradient(180deg, #FDFDFF 0%, #F4F7FE 58%, #EBF0FC 100%);
}
.hero__bg {
background:
radial-gradient(120% 90% at 18% 8%, #1A2951 0%, rgba(26,41,81,0) 46%),
radial-gradient(95% 80% at 88% 22%, #111C36 0%, rgba(17,28,54,0) 52%),
radial-gradient(140% 120% at 50% 120%, #060F1E 0%, rgba(6,15,30,0) 58%),
linear-gradient(180deg, #0C1424 0%, #0A1122 58%, #060B16 100%);
}
/* Grain exists to stop the gradients banding, and banding is *more* visible on
a light ramp, not less — so it stays. `overlay` against white lifts to white
and vanishes; `multiply` puts the same texture back by darkening instead. */
:root[data-theme="light"] .hero__grain { mix-blend-mode:multiply; opacity:.022; }
/* The hero scrim keeps headline text off bare glass. Its job does not go away
in light mode, it reverses: the text is dark now, so the wash is white. */
:root[data-theme="light"] .hero__bg::before {
background:
radial-gradient(75% 55% at 50% 46%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.44) 78%),
linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.54) 100%);
}
/* ==========================================================================
5 · GLASS THAT HAS A COLOUR AND A DIRECTION
--------------------------------------------------------------------------
The material system is already good — blur, saturate, a bright inset rim, a
dark inset floor. What it had no way to say is which way is up, because its
tint is a single flat alpha. A flat fill lit evenly is a rectangle; the same
fill lit from above is a solid.
So one gradient goes over the flat tint on every panel: brighter at the top
edge, tinted at the bottom. It is layered as `background-image` over the
existing `background-color`, which leaves the backdrop blur — and therefore
the transparency the whole design rests on — completely intact.
========================================================================== */
.glass {
background-image:var(--surf-sheen);
}
/* Crystal is the default card material. Its bevel is drawn by ::before as two
stacked gradients; the second one carries the refraction and is where the
blue belongs, so the panel's colour comes from the light passing through it
rather than from a wash painted on top. */
:root[data-theme="light"] .glass--crystal::before {
background:
linear-gradient(135deg, rgba(255,255,255,.98) 0%, transparent 26%),
linear-gradient(160deg, rgba(4,57,217,.055), transparent 52%, rgba(4,57,217,.045));
}
.glass--crystal::before {
background:
linear-gradient(135deg, rgba(200,222,255,.42) 0%, transparent 26%),
linear-gradient(160deg, rgba(160,195,255,.12), transparent 52%, rgba(90,140,255,.07));
}
/* Frost-rim is the big-panel material: clear in the middle, frosting toward the
edge. On light the frost was white-into-white. Keeping a blue in the outer
stop is what makes the rim visible at all. */
:root[data-theme="light"] .glass--frost-rim::before {
background:radial-gradient(120% 120% at 50% 50%, transparent 38%, rgba(238,243,255,.92) 100%);
}
/* Hover: the panel rises. Two changes only — the shadow lengthens and the rim
picks up the accent — because a card that also moves, scales and re-tints on
hover reads as a slot machine, not as a surface. */
.glass{
transition:box-shadow var(--lav-dur-base,260ms) var(--lav-ease-standard,ease),
border-color var(--lav-dur-base,260ms) var(--lav-ease-standard,ease);
}
:root[data-theme="light"] .glass:hover{
border-color:rgba(4,57,217,.22);
box-shadow:
0 1px 2px rgba(11,18,32,.05),
0 14px 32px -10px rgba(4,57,217,.20),
0 36px 72px -30px rgba(4,57,217,.24);
}
.glass:hover{
border-color:rgba(150,185,255,.32);
}
/* The `tint-blue` showcase variant is aliased to a neutral slab in the base
file — a blue name pointing at grey. It points at blue now. */
.glass--tint-blue{ background-color:var(--lav-glass-blue-tint); }
/* ==========================================================================
6 · THE MARKETPLACE HOME SURFACES
--------------------------------------------------------------------------
home.css wrote its panel fills as literal `rgb(255 255 255 / 0.05)`. On a
dark field that is a faint raised plate; on a light one it is nothing at all,
which is exactly the "empty white boxes" the redesign set out to fix. Those
literals were replaced with `var(--surf-1|2|3)` in the file itself, and the
three names are answered per theme in section 2.
What is left here is the handful of home surfaces that need more than a fill.
========================================================================== */
/* ONE RECIPE FOR A RAISED PANEL, applied to every panel on the page.
A flat fill inside a hairline is a rectangle no matter how good the hairline
is. Three layers turn the same rectangle into a surface, and all three have to
be present or none of them reads:
1. a vertical gradient — light at the top edge, tinted at the bottom, which
is the only cue that says where the light is coming from;
2. a one-pixel inset highlight along the top edge — the lit lip of the
panel, the thing that makes it look like it has a thickness;
3. two shadows, not one — a tight dark one for the contact edge and a wide
soft blue one for the cast, because a single mid shadow reads as blur
rather than as distance.
The blue in the gradient and in the wide shadow is what stops the page being
white boxes on a white field. It is far below the threshold where it reads as
"a blue box" and well above the threshold where the eye stops seeing an edge.
========================================================================== */
:root[data-theme="light"] .bento__link,
:root[data-theme="light"] .ccard,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .quote,
:root[data-theme="light"] .card,
:root[data-theme="light"] .pillar,
:root[data-theme="light"] .trust__item,
:root[data-theme="light"] .sell,
:root[data-theme="light"] .hero__search {
background-image:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(233,240,255,.74) 100%);
border-color:rgba(4,57,217,.11);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 2px rgba(11,18,32,.045),
0 12px 28px -14px rgba(4,57,217,.22);
}
.bento__link,
.ccard,
.stat,
.quote,
.card,
.pillar,
.trust__item,
.sell,
.hero__search {
background-image:linear-gradient(180deg,rgba(160,195,255,.10) 0%,rgba(90,140,255,.02) 100%);
box-shadow:
inset 0 1px 0 rgba(200,222,255,.16),
0 1px 2px rgba(3,10,26,.30),
0 16px 34px -18px rgba(3,10,26,.70);
}
/* Hover raises the panel: the cast shadow lengthens and the rim picks up the
brand. Nothing else moves — a card that also scales and re-tints reads as a
slot machine rather than as a surface. `.card` and `.bento__link` already
carry their own translate in home.css, and that is left where it is. */
:root[data-theme="light"] .bento__link:hover,
:root[data-theme="light"] .ccard:hover,
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .bento__link:focus-visible,
:root[data-theme="light"] .card:focus-within {
background-image:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(224,235,255,.86) 100%);
border-color:rgba(4,57,217,.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 2px 4px rgba(11,18,32,.05),
0 20px 44px -16px rgba(4,57,217,.30);
}
.bento__link:hover,
.ccard:hover,
.card:hover,
.bento__link:focus-visible,
.card:focus-within {
background-image:linear-gradient(180deg,rgba(160,195,255,.16) 0%,rgba(90,140,255,.05) 100%);
border-color:rgba(150,185,255,.34);
box-shadow:
inset 0 1px 0 rgba(200,222,255,.24),
0 2px 4px rgba(3,10,26,.34),
0 26px 52px -20px rgba(3,10,26,.78);
}
/* The department glyph. It was a faint watermark in the corner of a tile that
was otherwise empty, which left the largest tiles reading as blank space with
a caption. Bigger, and on the brand, it becomes the tile's subject. */
.bento__glyph {
font-size:2.6rem;
line-height:1;
transition:color var(--lav-dur-base,260ms) var(--lav-ease-standard,ease),
transform var(--lav-dur-base,260ms) var(--lav-ease-spring,ease);
}
.bento__tile--xl .bento__glyph { font-size:5rem; }
.bento__tile--lg .bento__glyph { font-size:3.4rem; }
:root[data-theme="light"] .bento__link:hover .bento__glyph { color:rgba(4,57,217,.34); transform:scale(1.06); }
.bento__link:hover .bento__glyph { color:rgba(160,195,255,.30); transform:scale(1.06); }
/* The tile's own reading order — name, then count, then the arrow that appears
on hover. The name was the same weight as the count; it is the heading of the
tile and now reads like one. */
:root[data-theme="light"] .bento__name { color:#0B1220; }
:root[data-theme="light"] .bento__count { color:#5A6480; }
:root[data-theme="light"] .bento__go { color:#0439D9; }
.bento__go { color:#7BA8FF; }
/* The trust row and the stat band: the numbers are the content, so they take
the brand and the labels stay quiet underneath them. */
:root[data-theme="light"] .stat__n { color:#0439D9; }
.stat__n { color:#B6CDFF; }
:root[data-theme="light"] .trust__item svg,
:root[data-theme="light"] .pillar__i { color:#0439D9; }
.trust__item svg, .pillar__i { color:#7BA8FF; }
/* The hero's category chips. They are links into the departments, so they read
as controls: a brand rim on hover rather than a grey one. */
:root[data-theme="light"] .hero__chip:hover,
:root[data-theme="light"] .hero__chip:focus-visible {
border-color:rgba(4,57,217,.30);
color:#0330A8;
background:rgba(4,57,217,.05);
}
.hero__chip:hover, .hero__chip:focus-visible {
border-color:rgba(150,185,255,.36);
color:#DCE7FF;
background:rgba(123,168,255,.10);
}
/* Card media blocks. Six deterministic gradients keyed off the post id, so a
grid of cards has visual variety without an image. They were six greys; they
are six steps through the brand blue now — still monochrome in the sense that
matters (one hue), but the hue is the brand's. */
.m0 .card__media{ background:linear-gradient(135deg,#1B2E5C,#0C1428); }
.m1 .card__media{ background:linear-gradient(150deg,#16264C,#080F1E); }
.m2 .card__media{ background:radial-gradient(120% 120% at 20% 10%,#22376B,#0B1220); }
.m3 .card__media{ background:linear-gradient(120deg,#132043,#070D1A); }
.m4 .card__media{ background:radial-gradient(140% 120% at 80% 0%,#1E3160,#0A1122); }
.m5 .card__media{ background:linear-gradient(160deg,#18294F,#090F1F); }
/* --- card media, light: the same six, run up the ramp instead of down --- */
:root[data-theme="light"] .m0 .card__media{ background:linear-gradient(135deg,#DCE7FF,#F2F6FF); }
:root[data-theme="light"] .m1 .card__media{ background:linear-gradient(150deg,#E4ECFF,#F7FAFF); }
:root[data-theme="light"] .m2 .card__media{ background:radial-gradient(120% 120% at 20% 10%,#CFDEFF,#EEF3FF); }
:root[data-theme="light"] .m3 .card__media{ background:linear-gradient(120deg,#E8EEFF,#FAFCFF); }
:root[data-theme="light"] .m4 .card__media{ background:radial-gradient(140% 120% at 80% 0%,#D6E3FF,#F0F5FF); }
:root[data-theme="light"] .m5 .card__media{ background:linear-gradient(160deg,#E1E9FF,#F5F8FF); }
/* The glyph printed into the media block, the collection glyph and the bento
glyph all draw from `--surf-glyph`, set per theme in section 2 — they were
literal whites in home.css and are tokens now. */
/* ==========================================================================
7 · THE COMPONENTS
--------------------------------------------------------------------------
Everything above is material. This is where the blue becomes the interface:
what is clickable, what has focus, what is primary.
========================================================================== */
/* — links ————————————————————————————————————————————————————
Underline offset and thickness rather than a colour change on hover: colour
alone as the hover signal fails for anyone who cannot separate the two. */
:root[data-theme="light"] .lav-link,
:root[data-theme="light"] .prose a:not([class]),
:root[data-theme="light"] .lavs-content a:not([class]) { color:#0439D9; }
.lav-link, .prose a:not([class]), .lavs-content a:not([class]) { color:#7BA8FF; }
.prose a:not([class]), .lavs-content a:not([class]) {
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:2px;
transition:text-decoration-thickness .15s var(--lav-ease-standard,ease);
}
.prose a:not([class]):hover, .lavs-content a:not([class]):hover {
text-decoration-thickness:2px;
}
/* — focus ————————————————————————————————————————————————————
One ring, everywhere, and it is blue. A focus ring that is only visible on
some controls is worse than none, because it teaches that focus is invisible.
Two layers: a white/ink separator first so the ring reads on any surface,
then the brand ring outside it. */
:root[data-theme="light"] :focus-visible {
outline:2px solid #0439D9;
outline-offset:2px;
}
:focus-visible {
outline:2px solid #7BA8FF;
outline-offset:2px;
}
/* Both rings are measured against what they sit on rather than assumed:
#0439D9 on white is 8.10:1 and #7BA8FF on the dark canvas is 7.92:1, either
of which is more than twice the 3:1 that WCAG asks of a focus indicator. The
2px offset is what keeps the ring off the control's own border, where a
1px-offset ring on a 1px border reads as a slightly thicker border and not as
focus at all. */
/* Controls that sit flush against a panel edge need the separator or the ring
merges into the border it is drawn over. */
:root[data-theme="light"] .lav-btn:focus-visible,
:root[data-theme="light"] .btn-solid:focus-visible,
:root[data-theme="light"] .card__get:focus-visible,
:root[data-theme="light"] .hero__submit:focus-visible {
box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0439D9;
outline:none;
}
.lav-btn:focus-visible,
.btn-solid:focus-visible,
.card__get:focus-visible,
.hero__submit:focus-visible {
box-shadow:0 0 0 2px #070C16, 0 0 0 4px #7BA8FF;
outline:none;
}
/* — primary action ————————————————————————————————————————
The CTA is the one solid, saturated element on the page in both themes. In
light that is the brand blue with white on it (8.10:1); in dark it is the
400/350 rung with the ink on it (6.13:1), because a saturated blue pill with
white text on a dark page is 3.68:1 and fails for anything but large type. */
.lav-btn--cta, .btn-solid, .hero__submit {
background:var(--lav-cta);
color:var(--lav-cta-ink);
border-color:var(--lav-cta);
}
:root[data-theme="light"] .lav-btn--cta,
:root[data-theme="light"] .btn-solid,
:root[data-theme="light"] .hero__submit {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 1px 2px rgba(4,57,217,.24),
0 8px 20px -8px rgba(4,57,217,.44);
}
:root[data-theme="light"] .lav-btn--cta:hover,
:root[data-theme="light"] .btn-solid:hover,
:root[data-theme="light"] .hero__submit:hover {
background:#0330A8;
border-color:#0330A8;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 2px 4px rgba(4,57,217,.26),
0 12px 28px -8px rgba(4,57,217,.52);
}
.lav-btn--cta:hover, .btn-solid:hover, .hero__submit:hover {
background:#7BA8FF; border-color:#7BA8FF;
}
/* — secondary action —————————————————————————————————————
Not a second solid. It carries the brand as an outline and fills only on
hover, so the page has one obvious primary rather than two competing ones. */
:root[data-theme="light"] .card__get,
:root[data-theme="light"] .lav-btn--ghost {
color:#0439D9;
border-color:rgba(4,57,217,.30);
}
:root[data-theme="light"] .card__get:hover,
:root[data-theme="light"] .card__get:focus-visible,
:root[data-theme="light"] .lav-btn--ghost:hover {
background:#0439D9; color:#FFFFFF; border-color:#0439D9;
}
.card__get, .lav-btn--ghost { color:#7BA8FF; border-color:rgba(150,185,255,.34); }
.card__get:hover, .card__get:focus-visible, .lav-btn--ghost:hover {
background:#4D93FF; color:#04122E; border-color:#4D93FF;
}
/* — inputs ————————————————————————————————————————————————
A field is a well: slightly recessed, slightly darker than its surround, and
it gains the brand rim on focus rather than a generic browser one. */
:root[data-theme="light"] .lav-input,
:root[data-theme="light"] .hero__input,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] input[type="url"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
background:rgba(255,255,255,.86);
border-color:rgba(4,57,217,.16);
color:#0B1220;
box-shadow:inset 0 1px 2px rgba(4,57,217,.05);
}
:root[data-theme="light"] .lav-input:focus,
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
border-color:#0439D9;
box-shadow:inset 0 1px 2px rgba(4,57,217,.04),0 0 0 3px rgba(4,57,217,.18);
outline:none;
}
:root[data-theme="light"] ::placeholder { color:#7A85A0; opacity:1; }
.lav-input, .hero__input,
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], input[type="url"], input[type="number"],
textarea, select {
border-color:rgba(150,185,255,.20);
}
.lav-input:focus, input:focus, textarea:focus, select:focus {
border-color:#7BA8FF;
box-shadow:0 0 0 3px rgba(123,168,255,.24);
outline:none;
}
::placeholder { color:rgba(233,237,247,.42); opacity:1; }
/* — selection ———————————————————————————————————————————— */
:root[data-theme="light"] ::selection { background:rgba(4,57,217,.16); color:#0B1220; }
::selection { background:rgba(123,168,255,.30); color:#E9EDF7; }
/* — scrollbar: Firefox and the WebKit thumb, both on the brand ramp — */
:root[data-theme="light"] { scrollbar-color:rgba(4,57,217,.30) transparent; }
:root { scrollbar-color:rgba(123,168,255,.28) transparent; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
background:rgba(123,168,255,.26);
border:3px solid transparent;
border-radius:99px;
background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover { background:rgba(123,168,255,.44); background-clip:content-box; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(4,57,217,.24); background-clip:content-box; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(4,57,217,.40); background-clip:content-box; }
/* — the eyebrow / section label, the one place a small blue caps line earns
its keep: it names the section without competing with the heading — */
:root[data-theme="light"] .lav-eyebrow, :root[data-theme="light"] .head__eyebrow,
:root[data-theme="light"] .hero__eyebrow { color:#0439D9; }
.lav-eyebrow, .head__eyebrow, .hero__eyebrow { color:#7BA8FF; }
/* — status colours. Never carried by hue alone anywhere in the theme; these
only make sure the hue that accompanies the icon or the word is legible. */
:root[data-theme="light"] .card__verif, :root[data-theme="light"] .lav-badge--ok { color:#0F7A45; }
.card__verif, .lav-badge--ok { color:#5BD69A; }
/* ==========================================================================
8 · THE RIGHT-HAND RAIL
--------------------------------------------------------------------------
Kept and dressed rather than removed: it carries the social links and there
are share controls planned for it. chrome.css builds it the same way as the
topbar — the plate is forced with `!important` and the glass is painted by
::before and ::after out of white at low alpha, which is nothing against a
light page and left the icons floating on the canvas.
========================================================================== */
.sidebar {
box-shadow:0 18px 48px -18px rgba(3,10,26,.70) !important;
/* The rail and the main column are flex siblings, and the rail comes first in
the DOM. chrome.css gives the rail `position:relative` with no z-index, so
any positioned descendant of `.main` — which is most cards — paints over it
on DOM order alone. Nothing showed while the rail held only icons inside its
own box; the tooltips are the first thing it draws outside that box, and
they were landing behind the page. 30 clears the content and stays under the
tab bar (55), the topbar (70) and the popovers (200). */
z-index:30;
}
.sidebar::after {
background:rgba(123,168,255,.055);
box-shadow:
inset 2px 2px 1px rgba(200,222,255,.34),
inset -2px -2px 1px rgba(2,8,22,.30),
inset 0 0 34px rgba(160,195,255,.10),
inset 0 -22px 46px rgba(2,8,22,.18),
0 1px 0 rgba(200,222,255,.16);
}
:root[data-theme="light"] .sidebar {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 1px 2px rgba(11,18,32,.04),
0 10px 30px -12px rgba(4,57,217,.18) !important;
}
:root[data-theme="light"] .sidebar::after {
background:rgba(255,255,255,.62);
box-shadow:
inset 2px 2px 1px rgba(255,255,255,.98),
inset -2px -2px 1px rgba(4,57,217,.07),
inset 0 0 34px rgba(255,255,255,.55),
inset 0 -22px 46px rgba(4,57,217,.04),
0 1px 0 rgba(255,255,255,.85);
}
/* Icons: three states, and the active one is marked twice — a fill and a rail
marker — so the current section is not signalled by colour alone. */
:root[data-theme="light"] .sidebar .nav-item { color:#475069; }
:root[data-theme="light"] .sidebar .nav-item:hover { color:#0439D9; background:rgba(4,57,217,.07); }
:root[data-theme="light"] .sidebar .nav-item.active { color:#0439D9; background:linear-gradient(180deg,rgba(4,57,217,.13),rgba(4,57,217,.05)); box-shadow:inset 0 0 0 1px rgba(4,57,217,.18); }
:root[data-theme="light"] .sidebar .nav-item.active::before { background:#0439D9; box-shadow:0 0 10px rgba(4,57,217,.45); }
.sidebar .nav-item { color:rgba(233,237,247,.66); }
.sidebar .nav-item:hover { color:#B6CDFF; background:rgba(123,168,255,.10); }
.sidebar .nav-item.active { color:#DCE7FF; background:linear-gradient(180deg,rgba(123,168,255,.24),rgba(123,168,255,.08)); box-shadow:inset 0 0 0 1px rgba(150,185,255,.30); }
.sidebar .nav-item.active::before { background:#7BA8FF; box-shadow:0 0 10px rgba(123,168,255,.60); }
/* Every rail item is a link out. The 44px target is the tap minimum and the
transition is short enough to feel like a press rather than an animation. */
.sidebar .nav-item {
transition:color .18s var(--lav-ease-standard,ease),
background .18s var(--lav-ease-standard,ease),
transform .12s var(--lav-ease-standard,ease);
}
.sidebar .nav-item:active { transform:scale(.92); }
/* The mark at the top of the rail. It is the same B as the wordmark, drawn at
28px, and it inherits `currentColor` from `--accent` — one declaration per
theme in section 3c is all it needs. */
.sidebar .logo { width:40px; height:40px; color:var(--accent); }
.sidebar .logo a { display:grid; place-items:center; width:100%; height:100%; border-radius:12px; color:inherit; }
.sidebar .logo svg { width:20px; height:28px; }
.sidebar .logo a:hover { background:var(--glass-1); }
/* Two groups — follow, then share — with a hairline between them. Without the
rule the rail is one undifferentiated column of icons and the share controls
read as five more social links. */
.sidebar .rail-group { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sidebar .rail-sep {
display:block; width:24px; height:1px; flex:0 0 1px;
background:linear-gradient(90deg,transparent,var(--stroke),transparent);
}
/* Icons sit at 18px inside a 44px target. The target is the accessible size;
the glyph is the readable one, and they are not the same number. */
.sidebar .nav-item svg { width:18px; height:18px; }
/* --------------------------------------------------------------------------
Tooltips
--------------------------------------------------------------------------
The rail is icon-only, and a brand glyph is not self-explanatory to everyone
who can see it. The markup already carried `data-label` on every item and
nothing had ever drawn it.
`aria-label` is what a screen reader announces and it is set separately and
more fully ("Bineret on GitHub"); this is the sighted equivalent, so the two
are deliberately not the same string. Pointer-events off so the tooltip can
never sit between the cursor and the button it describes.
-------------------------------------------------------------------------- */
.sidebar .nav-item[data-label] { position:relative; }
.sidebar .nav-item[data-label]::after {
content:attr(data-label);
position:absolute;
inset-inline-end:calc(100% + 10px);
inset-block-start:50%;
translate:0 -50%;
padding:6px 10px;
border-radius:8px;
font-size:12px;
font-weight:600;
line-height:1;
white-space:nowrap;
pointer-events:none;
opacity:0;
transform:translateX(4px);
transition:opacity .16s var(--lav-ease-standard,ease), transform .16s var(--lav-ease-standard,ease);
z-index:5;
}
.sidebar .nav-item[data-label]:hover::after,
.sidebar .nav-item[data-label]:focus-visible::after {
opacity:1;
transform:translateX(0);
}
:root[data-theme="light"] .sidebar .nav-item[data-label]::after {
background:#0B1220; color:#FFFFFF;
box-shadow:0 4px 14px -4px rgba(11,18,32,.30);
}
.sidebar .nav-item[data-label]::after {
background:#E9EDF7; color:#0B1220;
box-shadow:0 4px 14px -4px rgba(3,10,26,.60);
}
/* Copy link: two icons in one button, the inactive one hidden. Swapping
`display` rather than re-rendering keeps the press instant and stops the
44px box from changing width mid-interaction. */
.sidebar .rail-copy { cursor:pointer; }
.sidebar .rail-copy .ic-done { display:none; }
.sidebar .rail-copy.is-copied .ic-link { display:none; }
.sidebar .rail-copy.is-copied .ic-done { display:block; }
:root[data-theme="light"] .sidebar .rail-copy.is-copied { color:#0F7A45; background:rgba(15,122,69,.09); }
.sidebar .rail-copy.is-copied { color:#5BD69A; background:rgba(91,214,154,.12); }
/* --------------------------------------------------------------------------
The rail on a phone
--------------------------------------------------------------------------
chrome.css removes it below 769px — reasonable for a 60px fixed column on a
375px screen, but it also removed the only social and share controls the
inner pages have. It is re-laid-out instead: a horizontal strip, moved below
the content, with the tooltips re-pointed above the icons because there is
no longer room beside them.
`order` is what moves it. `.app` is `row-reverse` on desktop and switches to
`column` on phones, at which point DOM order applies and the rail would
otherwise land above the header.
-------------------------------------------------------------------------- */
@media (max-width:768px) {
.sidebar {
display:flex !important;
order:2;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
width:auto;
flex:0 0 auto;
gap:6px;
padding:10px 12px;
margin-block-start:8px;
border-radius:18px;
}
.sidebar .logo { display:none; }
.sidebar .rail-group { flex-direction:row; gap:2px; }
.sidebar .rail-sep {
width:1px; height:24px; flex:0 0 1px; margin-inline:6px;
background:linear-gradient(180deg,transparent,var(--stroke),transparent);
}
/* Above, not beside — there is no space beside anything at this width. */
.sidebar .nav-item[data-label]::after {
inset-inline-end:auto;
inset-block-start:auto;
inset-block-end:calc(100% + 8px);
left:50%;
translate:-50% 0;
transform:translateY(4px);
}
.sidebar .nav-item[data-label]:hover::after,
.sidebar .nav-item[data-label]:focus-visible::after { transform:translateY(0); }
}
/* ==========================================================================
9 · THE WORDMARK AND THE HEADER `!important` BLOCK
--------------------------------------------------------------------------
Locked with `!important` in two places at once — chrome.css on disk and the
header CSS in the database — so the flag has to be matched. The selectors are
copied from those rules verbatim rather than rewritten: if either source
moves, this stops matching visibly instead of drifting quietly out of sync.
The mark keeps its two-tone structure — the name at full strength, the suffix
stepped back — and the pair simply moves along the brand ramp per theme.
========================================================================== */
/* The wordmark is a single tspan now — the mark carries the colour and the type
stays ink, which is how the engineering companies this brand wants to be read
alongside draw theirs. Both the plain and the `:last-child` form are written
out because the light layer targets `tspan:last-child` at a higher
specificity than a plain `tspan`; matching the selector is what makes source
order decide, and equal-specificity-later is the only tie this file can win.
`` is deliberately absent from the new mark: the database CSS forces
`.topbar .logo-type circle { stroke:#fff !important }`, which would paint a
white ring through any circle the mark used. The apertures are drawn as
subpaths of one `` instead, so that rule has nothing to match. */
.topbar .logo-type text tspan,
.topbar .logo-type text tspan:last-child { fill:#E9EDF7 !important; }
/* The mark carries a `fill` presentation attribute of a flat brand blue, which
is what renders if this file never loads, and CSS lifts it to the gradient —
a presentation attribute loses to any CSS rule, so no `!important` is needed
and none is used. The attribute is a hex rather than `url(#lg)` on purpose:
the database CSS forces `path[fill^="url"] { fill:#D6D6D6 !important }`, and
a hex simply does not match that selector. */
.topbar .logo-type .lm { fill:url(#lg); }
.topbar .logo-type #lg stop:first-child { stop-color:#7BA8FF; }
.topbar .logo-type #lg stop + stop { stop-color:#3B82F6; }
:root[data-theme="light"] .topbar .logo-type text tspan,
:root[data-theme="light"] .topbar .logo-type text tspan:last-child { fill:#0B1220 !important; }
:root[data-theme="light"] .topbar .logo-type #lg stop:first-child { stop-color:#2563EB; }
:root[data-theme="light"] .topbar .logo-type #lg stop + stop { stop-color:#0330A8; }
.topbar .icon-btn.has-dot::after {
background:#4D93FF !important;
box-shadow:0 0 8px rgba(77,147,255,.70) !important;
}
.topbar .topnav a::after { background:#7BA8FF !important; }
.topbar .avatar.is-online::after {
background:#5BD69A !important;
box-shadow:0 0 8px rgba(91,214,154,.55) !important;
}
.topbar .pop-badge {
color:#DCE7FF !important;
background:rgba(123,168,255,.16) !important;
border-color:rgba(150,185,255,.32) !important;
}
.topbar .ni-ic.ni-offer {
color:#DCE7FF !important;
background:rgba(123,168,255,.16) !important;
border-color:rgba(150,185,255,.32) !important;
}
.topbar .acct-item:hover svg { color:#7BA8FF !important; }
:root[data-theme="light"] .topbar .icon-btn.has-dot::after {
background:#0439D9 !important;
box-shadow:0 0 8px rgba(4,57,217,.38) !important;
}
:root[data-theme="light"] .topbar .topnav a::after { background:#0439D9 !important; }
:root[data-theme="light"] .topbar .avatar.is-online::after {
background:#0F7A45 !important;
box-shadow:0 0 8px rgba(15,122,69,.35) !important;
}
:root[data-theme="light"] .topbar .pop-badge {
color:#0330A8 !important;
background:rgba(4,57,217,.08) !important;
border-color:rgba(4,57,217,.20) !important;
}
:root[data-theme="light"] .topbar .ni-ic.ni-offer {
color:#0330A8 !important;
background:rgba(4,57,217,.08) !important;
border-color:rgba(4,57,217,.20) !important;
}
:root[data-theme="light"] .topbar .acct-item:hover svg { color:#0439D9 !important; }
/* The nav labels carry a text-shadow tuned to lift them off a dark plate. On a
light one the same shadow is a grey halo — the single artefact that most
reliably makes a light theme look like an inverted dark one. */
:root[data-theme="light"] .topbar .topnav a { text-shadow:none; }
/* The nav's active/hover plate. Both were white washes. */
:root[data-theme="light"] .topbar .topnav a:hover { background:rgba(4,57,217,.06); color:#0439D9; }
:root[data-theme="light"] .topbar .topnav a.active { background:rgba(4,57,217,.09); color:#0330A8; }
.topbar .topnav a:hover { background:rgba(123,168,255,.10); color:#DCE7FF; }
.topbar .topnav a.active { background:rgba(123,168,255,.16); color:#FFFFFF; }
/* Popovers, also from the database copy. The inset pair that gives them their
edge is rebalanced: the white inset that reads as a lit rim on dark reads as
nothing on light, so the weight moves to the dark inset. */
:root[data-theme="light"] .popover {
background:rgba(255,255,255,.90);
border-color:rgba(4,57,217,.11);
box-shadow:
inset 1px 1px 1px rgba(255,255,255,.95),
inset -1px -1px 1px rgba(4,57,217,.05),
0 18px 44px -14px rgba(4,57,217,.20);
}
.popover {
background:rgba(13,20,36,.86);
border-color:rgba(150,185,255,.16);
box-shadow:
inset 1px 1px 1px rgba(200,222,255,.24),
inset -1px -1px 1px rgba(2,8,22,.40),
0 24px 60px -18px rgba(3,10,26,.70);
}
/* The `.app`/`.main` neutrality guard in the database uses `!important` to keep
the shell from creating a containing block that would break the topbar's
backdrop-filter. It is correct and is left alone — restating it here only
because removing the guard is a tempting and wrong fix for a stacking bug. */
/* ==========================================================================
10 · THE GRADIENT TITLE
`.grad` clips a gradient to the glyphs of a post title, so the fill IS the
letterform — on the wrong ramp the title does not lose contrast, it
disappears. Both themes now run the brand instead of the old warm cream.
========================================================================== */
:root[data-theme="light"] .grad,
:root[data-theme="light"] .lav-single .post-title .grad {
background-image:linear-gradient(120deg, #0B1220 34%, #0439D9 96%);
}
/* `.lav-single .post-title .grad` in the single-post CSS is (0,3,0) — the same
as `:root[data-theme="light"] .grad`, which is why light won on source order
while dark, matching on a bare `.grad` at (0,1,0), quietly lost and kept the
old white-into-cream ramp. Matching the selector is what makes both themes
decide the same way. */
.grad,
.lav-single .post-title .grad {
background-image:linear-gradient(120deg, #E9EDF7 34%, #7BA8FF 96%);
}
/* ==========================================================================
11 · MOTION
Every transition introduced above is short and single-property. This turns
all of them off — including the ones inherited from the base theme — for
anyone who has asked the platform for less movement.
========================================================================== */
@media (prefers-reduced-motion:reduce) {
*, *::before, *::after {
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* ==========================================================================
12 · THE MISSING PICTURE
--------------------------------------------------------------------------
Most posts on this site have no featured image, and the design assumed one.
`.fimg::after` paints a dark scrim across the right-hand 65% of the card so
white text can sit over a photograph — with no photograph under it, that is a
black gradient fading into a white page, and it was the ugliest thing on the
blog.
Two separate problems, so two separate answers:
· The scrim itself was written for a dark theme. Its job — hold the text
off the picture — does not disappear in light mode, it reverses, exactly
like the hero scrim. White, not black.
· An empty frame should look deliberate. `inc/blog-ui.php` now marks the
ones with no image, so they can be given a real placeholder — a tinted
plate carrying the brand mark — instead of an accident.
========================================================================== */
/* The scrim, per theme. Same geometry, same stops, opposite ramp. */
:root[data-theme="light"] .lav-blog .featured .fimg::after {
background:linear-gradient(90deg, transparent 35%, rgba(255,255,255,.55) 78%, rgba(255,255,255,.88));
}
.lav-blog .featured .fimg::after {
background:linear-gradient(90deg, transparent 35%, rgba(7,12,22,.55) 78%, rgba(7,12,22,.88));
}
@media (max-width:900px) {
:root[data-theme="light"] .lav-blog .featured .fimg::after {
background:linear-gradient(180deg, transparent 45%, rgba(255,255,255,.80));
}
.lav-blog .featured .fimg::after {
background:linear-gradient(180deg, transparent 45%, rgba(7,12,22,.80));
}
}
/* The placeholder. A plate on the brand ramp, and the mark at low alpha,
centred and large — the same B as the wordmark, inlined as a data URI so it
costs no request and cannot 404.
The scrim is switched off here: there is no photograph to hold text off, and
the text sits beside this box rather than over it. */
.lav-blog .featured .fimg.is-empty::after,
.lav-blog .bpost .pthumb.is-empty::after { display:none; }
.lav-blog .featured .fimg.is-empty,
.lav-blog .bpost .pthumb.is-empty,
.lav-single .rel-thumb.is-empty,
.lav-blog .pi-img.is-empty {
background-repeat:no-repeat;
background-position:center;
}
:root[data-theme="light"] .lav-blog .featured .fimg.is-empty,
:root[data-theme="light"] .lav-blog .bpost .pthumb.is-empty,
:root[data-theme="light"] .lav-single .rel-thumb.is-empty,
:root[data-theme="light"] .lav-blog .pi-img.is-empty {
background-color:#EEF3FF;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 40' width='28' height='40'%3E%3Cpath fill='%230439D9' fill-opacity='0.16' fill-rule='nonzero' d='M1.9,5.05 a2.3,2.3 0 0 1 4.6,0 v29.9 a2.3,2.3 0 0 1 -4.6,0 z M6.25,12.5 a9.75,9.75 0 1 1 19.5,0 a9.75,9.75 0 1 1 -19.5,0 z M10.75,12.5 a5.25,5.25 0 1 0 10.5,0 a5.25,5.25 0 1 0 -10.5,0 z M6.25,27.5 a9.75,9.75 0 1 1 19.5,0 a9.75,9.75 0 1 1 -19.5,0 z M10.75,27.5 a5.25,5.25 0 1 0 10.5,0 a5.25,5.25 0 1 0 -10.5,0 z'/%3E%3C/svg%3E"),
linear-gradient(135deg, #F4F7FF 0%, #E3ECFF 100%);
background-size:auto 46%, cover;
}
.lav-blog .featured .fimg.is-empty,
.lav-blog .bpost .pthumb.is-empty,
.lav-single .rel-thumb.is-empty,
.lav-blog .pi-img.is-empty {
background-color:#101A2E;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 40' width='28' height='40'%3E%3Cpath fill='%237BA8FF' fill-opacity='0.20' fill-rule='nonzero' d='M1.9,5.05 a2.3,2.3 0 0 1 4.6,0 v29.9 a2.3,2.3 0 0 1 -4.6,0 z M6.25,12.5 a9.75,9.75 0 1 1 19.5,0 a9.75,9.75 0 1 1 -19.5,0 z M10.75,12.5 a5.25,5.25 0 1 0 10.5,0 a5.25,5.25 0 1 0 -10.5,0 z M6.25,27.5 a9.75,9.75 0 1 1 19.5,0 a9.75,9.75 0 1 1 -19.5,0 z M10.75,27.5 a5.25,5.25 0 1 0 10.5,0 a5.25,5.25 0 1 0 -10.5,0 z'/%3E%3C/svg%3E"),
linear-gradient(135deg, #16233F 0%, #0B1220 100%);
background-size:auto 46%, cover;
}
/* The card thumbnails are short and wide; the mark scales down with them so it
never crowds the category pill sitting in the same corner. The sidebar's
popular-post squares are 56px — anything but a small mark is a blue blob. */
.lav-blog .bpost .pthumb.is-empty,
.lav-single .rel-thumb.is-empty { background-size:auto 52%, cover; }
.lav-blog .pi-img.is-empty { background-size:auto 56%, cover; }
/* ==========================================================================
13 · TEXT THAT SITS ON A FILL
--------------------------------------------------------------------------
`tools/gen-light-text.php` sweeps the inner-context stylesheets and emits a
dark counterpart for every literal light grey they set as a `color:`. It is
the right tool for body copy and it got nearly all of it. What a mechanical
sweep cannot know is which of those whites was sitting on a *filled* element
rather than on the page — flipping those to near-black puts dark text on a
saturated blue plate.
Each one below is measured, not adjusted by eye.
========================================================================== */
/* The price-range handles on the shop filter. `--accent` is the brand blue in
light mode, so the label has to be white: #131316 on #0439D9 measured 2.29,
white on the same fill is 8.10. The drop shadow was a white glow tuned for a
dark page; on a light one it is a smear, so it goes blue and tightens. */
:root[data-theme="light"] .lav-shop .bubble {
color:#FFFFFF;
box-shadow:0 4px 12px -2px rgba(4,57,217,.35);
}
.lav-shop .bubble {
color:#04122E;
box-shadow:0 4px 12px -2px rgba(3,10,26,.55);
}
/* The footer's app buttons. `main.css` writes `.l2 { color:#fff }` and
`.app-btn svg { color:#fff }` as literals, and main.css is outside the
generator's scan set — so these two stayed white on a white plate (1.13).
They go on the tokens, which makes them correct in both themes at once. */
.app-btn .l1, .l1 { color:var(--muted); }
.app-btn .l2, .l2 { color:var(--text); }
.app-btn svg { color:var(--accent); }
/* ==========================================================================
14 · EMPTY STATES
--------------------------------------------------------------------------
An empty state is a state, not an absence, and it is the one the site is in
right now: no products listed, no notifications, no messages. Each one gets
the same three parts — a mark, a sentence that says what is true, and a way
onward — so they read as one design rather than three different apologies.
========================================================================== */
.notif-empty {
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
margin:0;
padding:20px 16px 22px;
text-align:center;
}
.notif-empty svg { width:26px; height:26px; margin-block-end:4px; }
.notif-empty > span { font-size:13.5px; font-weight:600; line-height:1.35; }
.notif-empty__sub { font-size:12px; font-weight:400 !important; max-width:22ch; }
:root[data-theme="light"] .notif-empty { color:#263149; }
:root[data-theme="light"] .notif-empty svg { color:#0439D9; }
:root[data-theme="light"] .notif-empty__sub { color:#5A6480; }
.notif-empty { color:#C7D2E6; }
.notif-empty svg { color:#7BA8FF; }
.notif-empty__sub { color:#94A2BE; }
/* The shop's empty panel. It is the largest empty state on the site and it sits
where a grid of products would be, so it gets real vertical presence instead
of a line of grey text floating in a tall box. */
.lav-shop .shop-empty { padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.lav-shop .shop-empty svg { width:44px; height:44px; }
:root[data-theme="light"] .lav-shop .shop-empty svg { color:#0439D9; opacity:.5; }
.lav-shop .shop-empty svg { color:#7BA8FF; opacity:.55; }
:root[data-theme="light"] .lav-shop .shop-empty h3 { color:#0B1220; }
:root[data-theme="light"] .lav-shop .shop-empty p { color:#475069; }
/* ==========================================================================
15 · AVATARS
--------------------------------------------------------------------------
Most authors here have no Gravatar, so what loads is the default silhouette:
a very pale grey figure on a transparent field. On a white panel that is not
a placeholder, it is a blank circle — the byline reads as though the image
failed.
A tinted plate behind it and a hairline around it turn the same image into a
deliberate default, and a real Gravatar simply covers the plate. Nothing is
swapped or filtered, so a photo still looks like a photo.
========================================================================== */
.pm-av, .avatar, .comment .avatar, .lav-single .pm-av {
border-radius:50%;
object-fit:cover;
}
:root[data-theme="light"] .pm-av,
:root[data-theme="light"] .avatar,
:root[data-theme="light"] .comment .avatar {
background:linear-gradient(150deg,#DCE7FF,#F1F5FF);
box-shadow:inset 0 0 0 1px rgba(4,57,217,.14);
}
.pm-av, .avatar, .comment .avatar {
background:linear-gradient(150deg,#1B2A4C,#111A2B);
box-shadow:inset 0 0 0 1px rgba(150,185,255,.18);
}
/* The topbar avatar already carries its own border and a status dot; the plate
would double the ring. */
.topbar .avatar { background:none; box-shadow:var(--edge),var(--e1); }
/* ==========================================================================
16 · THE ERROR PAGE
--------------------------------------------------------------------------
404.php builds its own document with no header, footer or rail — stated as
deliberate in its docblock, and it holds up: the page's whole job is to get
someone unstuck, and it offers a search, two ways back and a list of
destinations to do it with. What it did not survive was the colour flip.
========================================================================== */
/* The giant code is a gradient clipped to the glyphs, so the fill IS the
letterform and a wrong first stop does not dim it, it deletes it. The old
stack opened on `#fff`, which on a white page erased the left half of the
first digit. Both themes now run the brand ramp end to end. */
/* `background-image`, not the `background` shorthand: the shorthand resets
`background-clip` to `border-box`, which un-clips the gradient from the glyphs
and paints it as a solid rectangle over them. */
:root[data-theme="light"] .lav-404 .e-code {
background-image:linear-gradient(135deg, #7BA8FF 6%, #0439D9 46%, #021845 96%);
text-shadow:0 20px 70px rgba(4,57,217,.18);
}
.lav-404 .e-code {
background-image:linear-gradient(135deg, #FFFFFF 6%, #7BA8FF 46%, #2563EB 96%);
text-shadow:0 20px 80px rgba(77,147,255,.28);
}
/* 🔴 The middle digit was invisible in both themes, and not for a colour reason.
`.digit.mid` carries an opacity keyframe animation, and an element animating a
compositable property is promoted to its own layer. A promoted child paints
above the parent's background, so the parent's `background-clip:text` fill
never reaches it — and what is left is the `-webkit-text-fill-color:transparent`
it inherited, i.e. nothing. (`position:relative` was doing the same thing for
the same reason; removing it alone was not enough.)
The fix is to stop asking the parent to paint it: the digit gets its own
clipped gradient, continuous with the parent's at the point it sits, so the
three glyphs still read as one run of colour and the pulse keeps working. */
.lav-404 .e-code .digit.mid {
position:static;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
:root[data-theme="light"] .lav-404 .e-code .digit.mid {
background-image:linear-gradient(135deg, #2563EB 0%, #0330A8 100%);
}
.lav-404 .e-code .digit.mid {
background-image:linear-gradient(135deg, #A8C6FF 0%, #4D93FF 100%);
}
/* The primary button fills with `--accent → --accent-2` and labels itself #fff.
In light that is brand blue under white (8.10:1). In dark those tokens are the
*light* end of the ramp, so it became white on pale blue. The label follows
the CTA ink token instead, which is what every other filled control uses. */
.lav-404 .e-btn.primary { color:var(--cta-ink); }
.lav-404 .e-btn.primary svg { color:inherit; }
/* The search submit read `color: var(--ink)` on a `#fff` plate. `--ink` is a
*surface* token, and in light mode it is #FFFFFF — so the button was white on
white and measured 1:1. It goes on the CTA pair, which is what it always
meant: the page's primary-coloured action. */
.lav-404 .e-search button {
background:var(--cta);
color:var(--cta-ink);
}
:root[data-theme="light"] .lav-404 .e-search button:hover { background:#0330A8; }
.lav-404 .e-search button:hover { background:#7BA8FF; }
/* The field itself: a well on light, not a pane of white on white. */
:root[data-theme="light"] .lav-404 .e-search input[type="search"] {
background:rgba(255,255,255,.86);
border-color:rgba(4,57,217,.16);
color:#0B1220;
box-shadow:inset 0 1px 2px rgba(4,57,217,.05);
}
:root[data-theme="light"] .lav-404 .e-search .e-sicon { color:#5A6480; }
/* The two buttons inherited the document's underline. A control that looks like
a button should not also be underlined like a link. */
.lav-404 .e-btn { text-decoration:none; }
/* The primary button's hover glow was white — invisible on a dark page and a
grey haze on a light one. */
:root[data-theme="light"] .lav-404 .e-btn.primary:hover { box-shadow:0 14px 30px -8px rgba(4,57,217,.45); }
.lav-404 .e-btn.primary:hover { box-shadow:0 14px 34px -8px rgba(77,147,255,.42); }
/* The ambient orbs behind the card were white and near-white — nothing at all
against a white page. Blue at low alpha gives the page the same depth the
rest of the site gets from its canvas gradient. */
:root[data-theme="light"] .lav-404::before { background:radial-gradient(circle, rgba(4,57,217,.16), transparent 70%); }
:root[data-theme="light"] .lav-404::after { background:radial-gradient(circle, rgba(37,99,235,.13), transparent 70%); }
.lav-404::before { background:radial-gradient(circle, rgba(123,168,255,.30), transparent 70%); }
.lav-404::after { background:radial-gradient(circle, rgba(37,99,235,.26), transparent 70%); }
/* The kicker pill was white text on a white gradient with a white border. */
:root[data-theme="light"] .lav-404 .e-kicker {
color:#0330A8;
background:linear-gradient(180deg, rgba(4,57,217,.10), rgba(4,57,217,.05));
border-color:rgba(4,57,217,.20);
}
.lav-404 .e-kicker {
color:#DCE7FF;
background:linear-gradient(180deg, rgba(123,168,255,.22), rgba(123,168,255,.08));
border-color:rgba(150,185,255,.30);
}
:root[data-theme="light"] .lav-404 .e-title { color:#0B1220; }
:root[data-theme="light"] .lav-404 .e-text { color:#475069; }
.lav-404 .e-title { color:#E9EDF7; }
.lav-404 .e-text { color:#A8B4CC; }
/* The blog / search empty panel, matched to the shop's so the two read as one
design rather than two separate apologies. */
.lav-blog .empty {
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
text-align:center;
padding:clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1rem, 4vw, 2rem);
border-radius:var(--lav-radius-lg, 20px);
}
.lav-blog .empty svg { width:44px; height:44px; }
.lav-blog .empty h3 { margin:0; font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.lav-blog .empty p { margin:0; max-width:44ch; line-height:1.55; }
.lav-blog .empty-btn {
margin-block-start:6px;
display:inline-flex; align-items:center; justify-content:center;
min-height:44px; padding:0 22px;
border-radius:999px;
font-weight:600; text-decoration:none;
background:var(--cta); color:var(--cta-ink);
transition:background var(--lav-dur-base,260ms) var(--lav-ease-standard,ease);
}
:root[data-theme="light"] .lav-blog .empty svg { color:#0439D9; opacity:.5; }
:root[data-theme="light"] .lav-blog .empty h3 { color:#0B1220; }
:root[data-theme="light"] .lav-blog .empty p { color:#475069; }
:root[data-theme="light"] .lav-blog .empty-btn:hover { background:#0330A8; }
.lav-blog .empty svg { color:#7BA8FF; opacity:.55; }
.lav-blog .empty h3 { color:#E9EDF7; }
.lav-blog .empty p { color:#A8B4CC; }
.lav-blog .empty-btn:hover { background:#7BA8FF; }
/* ==========================================================================
17 · THE MOBILE TAB BAR
--------------------------------------------------------------------------
🔴 It was broken at every phone width. `home.css` puts `flex:1` on `.tab`,
but `.tab` is the *inside* the