/* ======================================================================
Q-CANON — shared cinematic style layer (redesign/cinematic)
Loads AFTER styles.css + pages.css and re-skins the page to the
approved canon (docs/design/cinematic-canon.html + design-system.txt).
ADDITIVE: never renames existing selectors, only overrides them, so
machinery-generated UI (auth modals, banners) keeps working.
Companion runtime: /assets/js/q-canon.js
- injects .q-atmo-* layers as first children of
- drives [data-qrv] scrubbed reveals via the --qrv custom property
- adds html.q-canon-js when armed (reveal CSS is gated on it)
Modes: body[data-q-mode="plain" | "quiet" | "loud-lite"]
(no attribute == quiet). NO WebGL anywhere in this layer.
PALETTE IS LAW — only these hues appear in this file:
grounds #05050B #090916 #090C2C #0E1125 #091438 #0A1845 #092856
#151728 #171956
neutrals #171B35 #242739 #252B46 #343A58
cyan #27A4DA blues #3576E8 #4390E3 #3F82E1 #2263CB #1D53BF #1253C2
indigo #6741F9 #6837EE violet #9448FD white #FCFCFC
semantic #16C784 (verified ONLY) #F59E0B (unsigned) #EF4444 (failed)
====================================================================== */
/* ==================== 0. RETIRE THE OLD PLATE ======================
The pre-redesign ambient background was a 3.2MB raster (assets/
bg-network.png, 2048x1152). The canon atmosphere injected by
q-canon.js covers the viewport above it, so on every reskinned page
that image downloaded, decoded and painted where nothing could see it
— measured at 3248KB of a 3854KB page, 84% of the weight, on the first
visit of every mobile visitor.
styles.css no longer references it from body::before at all. What
remains is .bg-fixed, a real element that 37 templates still carry;
dropped here so canon pages stop fetching it. The four blog tag pages
have not been reskinned yet and are deliberately left alone — there
the plate is still the page's actual ground.
The file itself stays shipped: the Telegram Mini-App uses it as a
genuine, visible background. */
.bg-fixed{ background-image:none; }
/* =================== 0b. MOBILE NAVIGATION ========================
styles.css describes the mobile nav TWICE and the two descriptions
fight. The first (.nav, ~line 233) is a proper off-canvas panel:
translateX(110%), visibility hidden, slides in on .nav--open. The
second (~line 806, "Dropdown animation") re-declares the same selector
unscoped as a fade-down dropdown: opacity 0, translateY(-6px). Being
later it wins below 1024px, so the panel stopped being off-canvas and
survived only on `visibility:hidden`.
None of it mattered while nothing could open the panel — and nothing
could: 45 templates carry .nav and not one carries a .burger, so on a
phone the header offered exactly one control, the logo. q-canon.js
injects the button; this block gives it one coherent panel to drive.
Scoped under 1024px, which is where styles.css itself turns the nav
back into an inline bar. Desktop is untouched. */
/* A nav built by q-canon.js brings its own panel geometry, because it cannot
borrow one: demo-live loads neither styles.css nor pages.css, and status and
risk-disclaimer load only styles.css. Without this the built links render as
an inline row that overlaps itself — hit-testing each link's centre put three
of eight inside a neighbour. Everything here is scoped to .qc-nav so no
existing page's nav is touched. */
@media (max-width:1023px){
.topbar .nav.qc-nav{
position:fixed;
top:0;right:0;bottom:0;
width:min(78vw,340px);
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
gap:2px;
padding:calc(env(safe-area-inset-top,0px) + 84px) 26px calc(env(safe-area-inset-bottom,0px) + 26px);
overflow-y:auto;
background:linear-gradient(180deg,rgba(10,40,86,.96),rgba(5,5,11,.98));
border-left:1px solid rgba(252,252,252,.12);
box-shadow:-24px 0 60px rgba(0,0,0,.5);
z-index:70;
}
.topbar .nav.qc-nav a{ display:block;width:100%; }
}
@media (min-width:1024px){
/* on a wide screen it is an ordinary inline row like every other nav */
.topbar .nav.qc-nav{ display:flex;align-items:center;gap:18px; }
}
@media (max-width:1023px){
.topbar .nav{
opacity:1;
transform:translateX(110%);
visibility:hidden;
pointer-events:none;
transition:transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
}
.topbar .nav.nav--open{
transform:translateX(0);
visibility:visible;
pointer-events:auto;
transition:transform .26s cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* the panel is a canon surface, so it speaks in the canon's display
face rather than the body face it inherited */
.topbar .nav a{
font-family:var(--q-font-display,'Space Grotesk',Inter,system-ui,sans-serif);
font-size:19px;font-weight:500;letter-spacing:-.01em;
padding:14px 0;
}
.qc-burger{
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
gap:5px;margin-left:auto;width:44px;height:44px;flex:0 0 44px;padding:0;
border-radius:12px;border:1px solid rgba(39,164,218,.30);
background:rgba(9,20,56,.55);cursor:pointer;z-index:60;position:relative;
transition:border-color .2s ease,background .2s ease;
}
.qc-burger span{
display:block;width:17px;height:1.5px;border-radius:99px;background:#FCFCFC;
transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.qc-burger[aria-expanded="true"]{border-color:rgba(39,164,218,.6);background:rgba(9,20,56,.85)}
.qc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.qc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.qc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media (min-width:1024px){ .qc-burger{ display:none !important; } }
@media (prefers-reduced-motion:reduce){
.topbar .nav,.qc-burger span{ transition:none !important; }
}
/* ============================ 1. TOKENS ============================ */
:root{
/* grounds */
--q-ground-0:#05050B; --q-ground-1:#090916; --q-ground-2:#090C2C;
--q-ground-3:#0E1125; --q-ground-4:#091438; --q-ground-5:#0A1845;
--q-ground-6:#092856; --q-ground-7:#151728; --q-ground-8:#171956;
/* neutrals */
--q-neutral-1:#171B35; --q-neutral-2:#242739; --q-neutral-3:#252B46;
--q-neutral-4:#343A58;
/* chroma */
--q-cyan:#27A4DA;
--q-blue-1:#3576E8; --q-blue-2:#4390E3; --q-blue-3:#3F82E1;
--q-blue-4:#2263CB; --q-blue-5:#1D53BF; --q-blue-6:#1253C2;
--q-indigo-1:#6741F9; --q-indigo-2:#6837EE; --q-violet:#9448FD;
--q-white:#FCFCFC;
/* semantic — real states only */
--q-verified:#16C784; --q-unsigned:#F59E0B; --q-failed:#EF4444;
/* text */
--q-text-primary:rgba(252,252,252,.96);
--q-text-secondary:rgba(252,252,252,.78);
--q-text-muted:rgba(252,252,252,.58);
--q-text-faint:rgba(252,252,252,.38);
--q-text-disabled:rgba(252,252,252,.26);
--q-link:rgba(67,144,227,.92);
--q-link-hover:rgba(39,164,218,1);
/* type */
--q-font-display:"Space Grotesk",Inter,system-ui,sans-serif;
--q-font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
--q-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* spacing */
--q-space-1:4px; --q-space-2:8px; --q-space-3:12px; --q-space-4:16px;
--q-space-5:20px; --q-space-6:24px; --q-space-7:32px; --q-space-8:40px;
--q-space-9:56px; --q-space-10:72px; --q-space-11:96px;
--q-space-12:128px; --q-space-13:160px;
--q-page-x-desktop:40px; --q-page-x-tablet:28px; --q-page-x-mobile:18px;
--q-wrap:1180px; --q-wrap-wide:1320px; --q-measure:66ch;
--q-legal-measure:72ch;
/* radius (system) + card radius (canon reskin uses 16-18) */
--q-radius-xs:3px; --q-radius-sm:4px; --q-radius-md:6px;
--q-radius-lg:8px; --q-radius-xl:10px; --q-radius-pill:999px;
--q-radius-card:16px; --q-radius-card-lg:18px;
/* depth backgrounds */
--q-depth-bg-base:linear-gradient(135deg,#05050B 0%,#090C2C 36%,#0A1845 100%);
--q-depth-bg-quiet:linear-gradient(135deg,#05050B 0%,#090916 38%,#091438 100%);
--q-depth-bg-plain:linear-gradient(180deg,#090916 0%,#05050B 58%,#05050B 100%);
--q-nebula-cyan:radial-gradient(circle at 18% 14%,rgba(39,164,218,.30),rgba(39,164,218,0) 32%);
--q-nebula-blue:radial-gradient(circle at 70% 18%,rgba(53,118,232,.24),rgba(53,118,232,0) 34%);
--q-nebula-indigo:radial-gradient(circle at 82% 32%,rgba(103,65,249,.24),rgba(103,65,249,0) 36%);
--q-nebula-violet:radial-gradient(circle at 52% 88%,rgba(148,72,253,.18),rgba(148,72,253,0) 42%);
--q-vignette:radial-gradient(ellipse at 52% 40%,rgba(5,5,11,0) 28%,rgba(5,5,11,.42) 68%,rgba(5,5,11,.84) 100%);
--q-horizon-glow:radial-gradient(ellipse at 50% 106%,rgba(39,164,218,.20),rgba(5,5,11,0) 58%);
/* glass */
--q-glass-fill-loud:rgba(14,17,37,.68);
--q-glass-fill-quiet:rgba(14,17,37,.76);
--q-glass-fill-plain:rgba(14,17,37,.84);
--q-glass-fill-raised:linear-gradient(180deg,rgba(37,43,70,.74) 0%,rgba(14,17,37,.74) 48%,rgba(5,5,11,.58) 100%);
--q-glass-blur:14px;
--q-glass-saturate:145%;
--q-glass-top-highlight:inset 0 1px 0 rgba(252,252,252,.18);
--q-glass-shadow-low:0 14px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(252,252,252,.10);
--q-glass-shadow-mid:0 24px 80px rgba(0,0,0,.46),0 0 42px rgba(53,118,232,.12),inset 0 1px 0 rgba(252,252,252,.14);
--q-glass-shadow-high:0 34px 110px rgba(0,0,0,.56),0 0 80px rgba(103,65,249,.20),inset 0 1px 0 rgba(252,252,252,.18);
--q-hairline:rgba(252,252,252,.14);
/* gradient borders (used as background-image hairlines) */
--q-border-hairline:linear-gradient(90deg,rgba(39,164,218,0),rgba(39,164,218,.54),rgba(103,65,249,.42),rgba(39,164,218,0));
--q-engraved-line:linear-gradient(90deg,rgba(67,144,227,0),rgba(39,164,218,.36) 18%,rgba(252,252,252,.10) 50%,rgba(103,65,249,.30) 82%,rgba(67,144,227,0));
/* glow */
--q-glow-cyan-sm:0 0 12px rgba(39,164,218,.42);
--q-glow-cyan-md:0 0 28px rgba(39,164,218,.34),0 0 70px rgba(39,164,218,.14);
--q-glow-blue-md:0 0 36px rgba(53,118,232,.34),0 0 90px rgba(53,118,232,.16);
--q-glow-indigo-md:0 0 42px rgba(103,65,249,.34),0 0 96px rgba(103,65,249,.16);
--q-glow-verified:0 0 26px rgba(22,199,132,.62),0 0 76px rgba(22,199,132,.28),inset 0 0 22px rgba(22,199,132,.13);
--q-glow-unsigned:0 0 22px rgba(245,158,11,.38),inset 0 0 16px rgba(245,158,11,.08);
--q-glow-failed:0 0 22px rgba(239,68,68,.42),inset 0 0 16px rgba(239,68,68,.08);
/* CTA gradient */
--q-grad-cta:linear-gradient(135deg,#3576E8 0%,#6741F9 58%,#9448FD 100%);
/* motion */
--q-ease-out:cubic-bezier(.16,1,.3,1);
--q-ease-ui:cubic-bezier(.2,.8,.2,1);
--q-dur-fast:150ms; --q-dur-ui:240ms; --q-dur-hover:320ms;
--q-dur-panel:520ms; --q-dur-enter:860ms;
/* atmosphere dials (quiet defaults; modes override on body[...]) */
--q-atmo-neb-o:.62;
--q-atmo-grain-o:.060;
--q-atmo-pointer-o:.16;
/* ---- legacy token retarget: re-skins everything styles.css/pages.css
painted with the old vars, without touching their rules ---- */
--bg:#05050B;
--card:rgba(14,17,37,.74);
--stroke:rgba(252,252,252,.12);
--stroke2:rgba(252,252,252,.08);
--txt:rgba(252,252,252,.96);
--muted:rgba(252,252,252,.68);
--radius:16px;
--shadow:0 24px 80px rgba(0,0,0,.46);
--shadow2:0 34px 110px rgba(0,0,0,.56);
--btnGrad:linear-gradient(135deg,#3576E8 0%,#6741F9 58%,#9448FD 100%);
--glass:rgba(14,17,37,.72);
--glass2:rgba(9,20,56,.55);
--accent:rgba(39,164,218,.92);
--accent2:rgba(103,65,249,.88);
--ring:rgba(39,164,218,.45);
}
/* ============================ 2. GROUND ============================ */
/* overflow clip lives on ONLY — body overflow / sticky untouched */
html{overflow-x:clip;color-scheme:dark}
body{
background:
var(--q-horizon-glow),
linear-gradient(160deg,#05050B 0%,#090916 26%,#090C2C 58%,#091438 100%);
background-color:#05050B;
color:var(--q-text-secondary);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Legacy backdrops are replaced by the q-atmo stack (or, no-JS, by the
body gradient above). Hidden, not removed — additive reskin. */
.bg-fixed{display:none !important}
.quantor-video-bg{display:none !important}
::selection{background:rgba(39,164,218,.32);color:#FCFCFC}
:focus-visible{
outline:2px solid var(--q-cyan);
outline-offset:3px;
}
/* ====================== 3. ATMOSPHERE LAYERS ======================
Injected by q-canon.js as the first children of . All fixed,
pointer-events:none. Behind content: base -6, nebulas -5, stars -4,
pointer light -3 (above background, below content — glass is
translucent so it still reads through panels). Above content
(per canon): vignette z1, grain z2 — blend-only, never interactive. */
.q-atmo-base,
.q-atmo-neb,
.q-atmo-stars,
.q-atmo-vignette,
.q-atmo-grain,
.q-atmo-pointer{
position:fixed;
pointer-events:none;
}
.q-atmo-base{
inset:0;z-index:-6;
background:var(--q-depth-bg-quiet);
}
.q-atmo-neb{
inset:-12vh -8vw;z-index:-5;
opacity:var(--q-atmo-neb-o);
will-change:transform,opacity;
}
.q-atmo-neb--cyan{
background:var(--q-nebula-cyan),var(--q-nebula-blue);
}
.q-atmo-neb--indigo{
background:var(--q-nebula-indigo);
}
.q-atmo-neb--violet{
background:var(--q-nebula-violet);
}
.q-atmo-stars{
inset:0;z-index:-4;width:100%;height:100%;
}
.q-atmo-vignette{
inset:0;z-index:1;
background:var(--q-vignette);
}
.q-atmo-grain{
inset:-40px;z-index:2;
opacity:var(--q-atmo-grain-o);
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
.q-atmo-pointer{
left:-260px;top:-260px;width:520px;height:520px;z-index:-3;
border-radius:50%;
mix-blend-mode:screen;
opacity:var(--q-atmo-pointer-o);
background:radial-gradient(circle at 50% 50%,rgba(53,118,232,.55),rgba(39,164,218,.20) 40%,rgba(39,164,218,0) 72%);
will-change:transform;
}
/* ============================ 4. MODES ============================ */
/* quiet is the default (dials above). */
body[data-q-mode="loud-lite"]{--q-atmo-neb-o:1;--q-atmo-grain-o:.085;--q-atmo-pointer-o:.24}
body[data-q-mode="loud-lite"] .q-atmo-base{background:var(--q-depth-bg-base)}
body[data-q-mode="loud-lite"] .q-atmo-neb{animation:q-atmo-drift 18s ease-in-out infinite alternate}
body[data-q-mode="loud-lite"] .q-atmo-neb--indigo{animation-duration:24s;animation-delay:-9s}
body[data-q-mode="loud-lite"] .q-atmo-neb--violet{animation-duration:30s;animation-delay:-16s}
body[data-q-mode="plain"]{--q-atmo-neb-o:.34;--q-atmo-grain-o:.045;--q-atmo-pointer-o:0}
body[data-q-mode="plain"] .q-atmo-base{background:var(--q-depth-bg-plain)}
body[data-q-mode="plain"] .q-atmo-neb--violet{display:none}
body[data-q-mode="plain"] .q-atmo-pointer{display:none}
@keyframes q-atmo-drift{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(18px,-12px,0)}
}
/* ========================= 5. TYPOGRAPHY ========================= */
h1,h2,h3,h4,.h1,.h2,.h3{
color:var(--q-text-primary);
font-family:var(--q-font-display);
}
h1,.h1{
letter-spacing:-.012em;
text-shadow:0 1px 24px rgba(5,5,11,.78),0 0 46px rgba(39,164,218,.14);
}
h2,.h2{letter-spacing:-.01em}
p{max-width:var(--q-measure)}
/* opt-in H1 gradient fill (static — no shimmer in the shared layer) */
.q-h1grad{
background:linear-gradient(104deg,#FCFCFC 4%,rgba(67,144,227,.92) 34%,rgba(39,164,218,.96) 62%,#FCFCFC 88%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
text-shadow:none;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.q-h1grad{background:none;color:var(--q-text-primary);-webkit-text-fill-color:currentColor}
}
.lead,.sub{color:var(--q-text-secondary)}
.page-hero .sub,.sec-hero .sub,.why-hero .sub,.how-hero .sub,
.pr-hero .sub,.st-hero .sub{color:var(--q-text-secondary)}
.fineprint{color:var(--q-text-faint)}
/* ====================== 6. SITE CHROME — NAV ====================== */
.topbar{
background:rgba(9,12,44,.72);
-webkit-backdrop-filter:blur(18px) saturate(145%);
backdrop-filter:blur(18px) saturate(145%);
border-bottom:0;
box-shadow:0 14px 42px rgba(0,0,0,.34);
}
.topbar::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--q-border-hairline);
opacity:.85;pointer-events:none;
}
.nav a{
color:var(--q-text-muted);
transition:color var(--q-dur-ui) var(--q-ease-ui),
opacity var(--q-dur-ui) var(--q-ease-ui),
transform var(--q-dur-ui) var(--q-ease-ui);
}
.nav a:hover{color:var(--q-text-primary)}
.nav a[aria-current="page"],.nav a.is-active{color:var(--q-text-primary)}
.nav a::after{
background:linear-gradient(90deg,var(--q-cyan),var(--q-indigo-1));
}
.nav a .nav-badge{
background:linear-gradient(135deg,var(--q-cyan),var(--q-indigo-1));
color:#05050B;
}
/* mobile off-canvas panel (desktop row layout untouched) */
@media (max-width:1023px){
.nav{
background:rgba(9,9,22,.94);
-webkit-backdrop-filter:blur(18px) saturate(145%);
backdrop-filter:blur(18px) saturate(145%);
border-left:1px solid rgba(67,144,227,.22);
}
}
body.nav-open::before{background:rgba(5,5,11,.6)}
.burger span{background:rgba(252,252,252,.92)}
/* ====================== 7. SITE CHROME — FOOTER ====================== */
.footer,.footer-mini{
position:relative;
border-top:1px solid rgba(39,164,218,.20);
background:
var(--q-horizon-glow),
linear-gradient(180deg,rgba(9,12,44,.30) 0%,rgba(5,5,11,.82) 100%);
}
.footer__col a,.footer-mini a{
color:var(--q-text-muted);
transition:color var(--q-dur-ui) var(--q-ease-ui);
}
.footer__col a:hover,.footer-mini a:hover{color:var(--q-link-hover)}
.footer__title{color:var(--q-text-secondary)}
.footer__muted{color:var(--q-text-muted) !important}
.trust-badge{
background:rgba(9,20,56,.60);
border:1px solid rgba(67,144,227,.28);
color:var(--q-text-muted);
}
/* live Ed25519 verification — a REAL verified/unsigned state */
.trust-badge[data-verified="true"]{
border-color:rgba(22,199,132,.5);color:var(--q-verified);
box-shadow:0 0 22px rgba(22,199,132,.22);
}
.trust-badge[data-verified="false"]{
border-color:rgba(245,158,11,.45);color:var(--q-unsigned);
box-shadow:var(--q-glow-unsigned);
}
/* ========================== 8. BUTTONS ========================== */
.btn{
position:relative;overflow:hidden;
background:var(--q-grad-cta);
border:1px solid rgba(103,65,249,.55);
color:#FCFCFC;
box-shadow:var(--q-glow-blue-md),0 10px 30px rgba(0,0,0,.35),
inset 0 1px 0 rgba(252,252,252,.18);
transition:transform var(--q-dur-hover) var(--q-ease-ui),
box-shadow var(--q-dur-hover) var(--q-ease-ui),
background var(--q-dur-hover) var(--q-ease-ui),
border-color var(--q-dur-hover) var(--q-ease-ui),
filter var(--q-dur-fast) ease;
}
/* glare sweep */
.btn::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,rgba(252,252,252,0) 30%,rgba(252,252,252,.22) 46%,rgba(252,252,252,0) 62%);
transform:translateX(-130%) skewX(-18deg);
transition:transform 760ms var(--q-ease-out);
}
.btn:hover::after{transform:translateX(130%) skewX(-18deg)}
.btn:hover{
transform:translateY(-2px) scale(1.01);
filter:none;
box-shadow:0 0 44px rgba(53,118,232,.42),0 0 108px rgba(103,65,249,.20),
0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(252,252,252,.18);
}
.btn:active{transform:translateY(0) scale(1)}
.btn--ghost{
background:rgba(67,144,227,.07);
border-color:rgba(67,144,227,.30);
color:var(--q-text-primary);
box-shadow:none;
}
.btn--ghost:hover{
background:rgba(9,20,56,.78);
border-color:rgba(39,164,218,.55);
filter:none;
box-shadow:0 0 18px rgba(39,164,218,.18);
}
/* .btn--cta (both legacy definitions) collapses onto the canon primary */
.btn--cta{
background:var(--q-grad-cta);
color:#FCFCFC;
border:1px solid rgba(103,65,249,.55);
box-shadow:var(--q-glow-blue-md),0 10px 30px rgba(0,0,0,.35),
inset 0 1px 0 rgba(252,252,252,.18);
}
.btn--cta:hover{
background:var(--q-grad-cta);
transform:translateY(-2px) scale(1.01);
filter:none;
box-shadow:0 0 44px rgba(53,118,232,.42),0 0 108px rgba(103,65,249,.20),
0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(252,252,252,.18);
}
.btn--cta:active{background:var(--q-grad-cta);transform:translateY(0)}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
opacity:.48;transform:none;box-shadow:none;cursor:default;
}
.btn:disabled::after,.btn[disabled]::after{content:none}
/* focus rings → cyan (overrides legacy blue/indigo rings) */
.btn:focus,.btn:focus-visible,
.btn--sm:focus,.btn--sm:focus-visible,
.btn--ghost:focus,.btn--ghost:focus-visible,
.btn--cta:focus-visible{
outline:none !important;
box-shadow:0 0 0 2px rgba(39,164,218,.70),0 0 0 5px rgba(39,164,218,.16);
}
.nav .btn--ghost:focus,.nav .btn--ghost:focus-visible{
outline:none !important;
box-shadow:inset 0 0 0 1px rgba(39,164,218,.10),
0 0 0 2px rgba(39,164,218,.70),0 0 0 5px rgba(39,164,218,.16);
}
/* ====================== 9. PILLS / EYEBROWS ====================== */
.pill,.chip{
background:rgba(9,20,56,.56);
border:1px solid rgba(67,144,227,.28);
color:var(--q-text-secondary);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transition:transform var(--q-dur-ui) var(--q-ease-ui),
border-color var(--q-dur-ui) var(--q-ease-ui);
}
.pill:hover,.chip:hover{transform:translateY(-1px);border-color:rgba(39,164,218,.5)}
/* hero pills → mono eyebrow chips; kills the legacy green/purple tints */
.page-hero .pill,.sec-hero .pill,.why-hero .pill,
.how-hero .pill,.pr-hero .pill,.st-hero .pill,
.page-hero .pill--blue,.page-hero .pill--purple,
.page-hero .pill--green,.page-hero .pill--amber{
background:rgba(9,20,56,.56);
border:1px solid rgba(67,144,227,.32);
color:var(--q-cyan);
font-family:var(--q-font-mono);
font-weight:600;font-size:11px;letter-spacing:.13em;
text-transform:uppercase;
}
.badge{
background:rgba(9,20,56,.56);
border:1px solid rgba(67,144,227,.28);
color:var(--q-text-muted);
font-family:var(--q-font-mono);letter-spacing:.08em;text-transform:uppercase;
}
/* legacy green hero-safety strip → cyan (green is verified-only) */
.heroSafety__b{
border-color:rgba(39,164,218,.30);
background:rgba(39,164,218,.08);
color:var(--q-text-secondary);
}
.heroSafety__i{stroke:var(--q-cyan)}
.heroSafety__i circle{fill:rgba(39,164,218,.14)}
/* ====================== 10. VERDICT / STATUS ====================== */
/* .badge-ok marks an actual Ed25519 signature verification → emerald OK */
.badge-ok{
background:rgba(22,199,132,.13);
border:1px solid rgba(22,199,132,.5);
color:var(--q-verified);
box-shadow:0 0 18px rgba(22,199,132,.20);
}
.badge-warn{
background:rgba(245,158,11,.085);
border:1px solid rgba(245,158,11,.45);
color:var(--q-unsigned);
}
.badge-bad,.badge-err{
background:rgba(239,68,68,.085);
border:1px solid rgba(239,68,68,.45);
color:var(--q-failed);
}
/* feature-matrix marks: presence=cyan, absence=red, opacity-warning=amber */
.tick,.compare-table td.tick{color:var(--q-cyan)}
.cross,.compare-table td.cross{color:var(--q-failed)}
.opaque{color:var(--q-unsigned)}
.dimension .verdict.win{
background:rgba(39,164,218,.13);border:1px solid rgba(39,164,218,.4);
color:var(--q-cyan);
}
.dimension .verdict.parity{
background:rgba(37,43,70,.6);border:1px solid rgba(252,252,252,.16);
color:var(--q-text-secondary);
}
/* PAPER lane = cyan/blue (never emerald); LIVE lane = indigo/violet */
.live-vs-paper .lane.paper{
background:rgba(39,164,218,.06);border-color:rgba(39,164,218,.28);
}
.live-vs-paper .lane.live{
background:rgba(148,72,253,.06);border-color:rgba(148,72,253,.30);
}
.live-vs-paper .lane.paper h3 span{color:var(--q-cyan)}
.live-vs-paper .lane.live h3 span{color:var(--q-violet)}
/* strategy tags / version status chips */
.strat__main .tag.safe{
background:rgba(39,164,218,.12);border-color:rgba(39,164,218,.3);
color:var(--q-cyan);
}
.strat__main .tag.adv{
background:rgba(148,72,253,.12);border-color:rgba(148,72,253,.3);
color:var(--q-violet);
}
.strat__main .tag.mode{
background:rgba(53,118,232,.10);border-color:rgba(53,118,232,.28);
color:var(--q-blue-2);
}
.pine-block .ver .status.shipped{background:rgba(39,164,218,.15);color:var(--q-cyan)}
.pine-block .ver .status.beta{background:rgba(148,72,253,.15);color:var(--q-violet)}
/* demo signal chips: BUY=cyan, SELL=violet, HOLD=neutral (no semantics) */
.sig--buy{background:rgba(39,164,218,.10);border-color:rgba(39,164,218,.30)}
.sig--sell{background:rgba(148,72,253,.10);border-color:rgba(148,72,253,.30)}
.sig--hold{background:rgba(37,43,70,.4);border-color:rgba(252,252,252,.14)}
/* ======================= 11. GLASS SURFACES ======================= */
/* Canon glass: layered translucency, hairline stroke, lighter top edge,
radius 16-18, deep shadow, blur. Applied by overriding every legacy
card/panel surface. Hover lift stays subtle (-2px). */
.card,
.stepCard,
.diff-card,
.tg-cmd,
.faqItem,
.trustItem,
.planCard,
.plan,
.pillar,
.dimension,
.step,
.live-vs-paper .lane,
.verify-card,
.ctaBox,
.cta-block,
.checkoutBox,
.strat,
.pine-block,
.pine-block .ver,
.limits-table,
.rails,
.gate-list li,
.regimeUSPCard,
.tgbox,
.demoTerminal,
.demoChartCard,
.free-hero{
background:var(--q-glass-fill-quiet);
border:1px solid var(--q-hairline);
border-radius:var(--q-radius-card);
box-shadow:var(--q-glass-shadow-mid);
-webkit-backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
}
/* wide feature surfaces read better at 18px */
.pillar,.dimension,.step,.strat,.cta-block,.free-hero,.rails{
border-radius:var(--q-radius-card-lg);
}
/* the two lanes keep their (re-tinted) fills from section 10 */
.live-vs-paper .lane.paper,.live-vs-paper .lane.live{
box-shadow:var(--q-glass-shadow-low);
}
.card:hover,.stepCard:hover,.diff-card:hover,.plan:hover,.planCard:hover{
transform:translateY(-2px);
border-color:rgba(39,164,218,.40);
box-shadow:var(--q-glass-shadow-high);
filter:none;
}
/* dashed honesty boxes stay dashed but move to canon strokes */
.fairness,.no-promise{
background:rgba(9,9,22,.60);
border-color:rgba(67,144,227,.30);
border-radius:var(--q-radius-card);
}
.no-promise{border-color:rgba(245,158,11,.35)}
.no-promise h3{color:var(--q-unsigned)}
.fairness h3{color:var(--q-cyan)}
/* section headers / etched labels inside cards */
.step__body .meta,
.diff-card__num,
.gate__code,
.verify-row .k,
.pillar h3.subhead,
.dimension .label,
.strat__params .label,
.rail-row .name{
color:var(--q-cyan);
font-family:var(--q-font-mono);
letter-spacing:.13em;
}
.step__num{
background:linear-gradient(135deg,var(--q-cyan),var(--q-violet));
-webkit-background-clip:text;background-clip:text;
}
.verify-card h3{color:var(--q-cyan)}
.diff-card__cta{color:var(--q-link)}
.diff-card:hover{border-color:rgba(39,164,218,.40)}
/* engraved divider helper for pages that opt in */
.q-hairline{height:1px;background:var(--q-engraved-line);opacity:.7;border:0}
/* ========================= 12. TABLES ========================= */
.compare-table th,.grid-compare th,.limits-table th{
color:var(--q-cyan);
background:rgba(36,39,57,.55);
}
.grid-compare th.quantor-col{
color:var(--q-violet);background:rgba(148,72,253,.10);
}
.grid-compare td.quantor-col{background:rgba(148,72,253,.06)}
.compare-table th,.compare-table td,
.grid-compare th,.grid-compare td,
.limits-table th,.limits-table td{
border-bottom:1px solid rgba(67,144,227,.14);
}
.compare-table tbody tr:hover td,
.grid-compare tbody tr:hover td,
.limits-table tbody tr:hover td{
background:rgba(67,144,227,.075);
}
.compare-table tbody tr:hover td:first-child,
.grid-compare tbody tr:hover td:first-child,
.limits-table tbody tr:hover td:first-child{
box-shadow:inset 2px 0 0 rgba(39,164,218,.6);
}
.limits-table td.num{color:var(--q-text-primary)}
/* ====================== 13. CODE / HASH CHIPS ====================== */
code,kbd{
font-family:var(--q-font-mono);
background:rgba(9,20,56,.60);
border:1px solid rgba(39,164,218,.22);
border-radius:var(--q-radius-sm);
padding:1px 6px;
color:rgba(252,252,252,.86);
}
/* 2026-08-21 — inline code holding a path or a URL is the other thing that runs
past the right edge on a phone. html{overflow-x:clip} above then HIDES the
tail instead of letting the reader scroll to it, so the end of the string is
simply gone with no cue that it was there. Measured on /blog/signed-builds-
ed25519 at 390px: two such spans at 428px and 436px, both clipped. Only inline
code is touched — code inside keeps the block's own horizontal scroll,
which is the right behaviour for a command you copy whole. */
:not(pre) > code{overflow-wrap:anywhere}
pre{
background:linear-gradient(180deg,rgba(9,20,56,.68),rgba(5,5,11,.54));
border:1px solid rgba(39,164,218,.24);
border-radius:var(--q-radius-lg);
box-shadow:inset 0 0 24px rgba(5,5,11,.48);
color:var(--q-text-secondary);
}
pre code{background:none;border:0;padding:0}
/* legacy per-context code tints → canon cyan wells */
.step__body code,.tg-cmd code{
background:rgba(9,20,56,.60);color:var(--q-cyan);
border:1px solid rgba(39,164,218,.20);
}
.step__body .cmd-line,.tgbox__code{
background:linear-gradient(180deg,rgba(9,20,56,.68),rgba(5,5,11,.54));
border:1px solid rgba(39,164,218,.24);
color:var(--q-text-secondary);
box-shadow:inset 0 0 24px rgba(5,5,11,.48);
}
.verify-row .v{color:var(--q-text-primary)}
.verify-card .recipe pre{color:var(--q-text-secondary)}
.verify-card .recipe summary{color:var(--q-link)}
.tg-cmd .desc{color:var(--q-text-muted)}
/* ==================== 14. FORMS + AUTH MODAL ==================== */
.field input,
#authForm .field input,
.input,
.select select,
textarea,
select{
background:rgba(9,20,56,.52);
border:1px solid rgba(67,144,227,.30);
color:var(--q-text-primary);
border-radius:var(--q-radius-lg);
caret-color:var(--q-cyan);
transition:border-color var(--q-dur-ui) var(--q-ease-ui),
box-shadow var(--q-dur-ui) var(--q-ease-ui),
background var(--q-dur-ui) var(--q-ease-ui);
}
.field input:hover,.input:hover,textarea:hover,select:hover{
border-color:rgba(39,164,218,.46);
}
.field input:focus,
#authForm .field input:focus,
.input:focus,
textarea:focus,
select:focus{
outline:none;
border-color:rgba(39,164,218,.80);
box-shadow:0 0 0 4px rgba(39,164,218,.14),var(--q-glow-cyan-sm);
background:rgba(9,20,56,.66);
}
.input::placeholder,.field input::placeholder{color:var(--q-text-faint)}
.form__msg--ok{color:var(--q-cyan)} /* op success ≠ verified proof */
.form__msg--err{color:var(--q-failed)}
.modal__backdrop{
background:rgba(5,5,11,.74);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.modal__card{
background:var(--q-glass-fill-plain);
-webkit-backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
border:1px solid rgba(67,144,227,.30);
border-radius:var(--q-radius-card);
box-shadow:var(--q-glass-shadow-high);
}
.modal__close{
background:rgba(9,20,56,.60);
border:1px solid rgba(67,144,227,.30);
color:var(--q-text-primary);
border-radius:var(--q-radius-lg);
}
.modal__close:hover{border-color:rgba(39,164,218,.55);filter:none}
.modal__kicker{color:var(--q-text-faint)}
#authForgotLink{color:var(--q-text-muted)}
#authForgotLink:hover{color:var(--q-text-primary)}
/* ====================== 15. SCRUBBED REVEALS ======================
q-canon.js writes --qrv (0..1) per element per frame — a PURE
function of scroll position: fully bidirectional, no one-shot end
states. Gated on html.q-canon-js so a script failure leaves the
page fully visible. Transform+opacity only (no scrubbed blur —
the performance budget forbids continuously animated filters). */
html.q-canon-js [data-qrv]{
--qrv:0;
opacity:calc(.10 + var(--qrv) * .90);
transform:translate3d(0,calc((1 - var(--qrv)) * 26px),0);
will-change:transform,opacity;
}
/* ========================= 15b. PRINT ==========================
Reveals are a scroll effect and paper does not scroll. Without this
every [data-qrv] below the first screen prints at its resting 10%
opacity, so "Save as PDF" of the Terms, the Privacy Policy or any
article produces a document that is a faint ghost from the second
screenful onwards. The atmosphere layers are dropped too — they are
decoration that would only eat toner. */
@media print{
html.q-canon-js [data-qrv]{
opacity:1 !important;
transform:none !important;
will-change:auto !important;
}
.q-atmo-base,.q-atmo-neb,.q-atmo-stars,.q-atmo-vignette,
.q-atmo-grain,.q-atmo-pointer{ display:none !important; }
}
/* ====================== 16. REDUCED MOTION ======================
Everything static — but still layered, grained, expensive. */
@media (prefers-reduced-motion: reduce){
html.q-canon-js [data-qrv]{
opacity:1 !important;
transform:none !important;
will-change:auto;
}
.q-atmo-neb{animation:none !important}
.q-atmo-pointer{display:none}
.btn::after,.btn--cta::after{content:none}
.btn:hover,.btn--cta:hover,
.card:hover,.stepCard:hover,.diff-card:hover,
.plan:hover,.planCard:hover,.pill:hover,.chip:hover{
transform:none;
}
}
/* ======================== 17. MOBILE SAFETY ======================== */
@media (max-width:640px){
.q-atmo-neb{inset:-8vh -16vw} /* keep fields visible, cheap */
.btn:hover{transform:none} /* no lift on coarse pointers */
}
@media (max-width:414px){
.topbar{-webkit-backdrop-filter:blur(14px) saturate(145%);
backdrop-filter:blur(14px) saturate(145%)}
}