/* ============================================================ QUILLON — dark mode overrides toggled via data-theme="dark" on ============================================================ */ /* ---- token overrides ---- */ [data-theme="dark"]{ /* surfaces → deep charcoal */ --paper: #151310; --paper-2: #1c1916; --paper-hi: #222019; --paper-edge: #2d2921; /* text → warm cream */ --t-strong: #eae5d9; --t-body: #b5b0a4; --t-mute: #908b80; /* accent — slightly brighter for dark bg contrast */ --tick: #3a8a6a; --tick-deep: #2a6a4f; --tick-soft: #8fb0a2; --tick-glow: rgba(58,138,106,.14); /* borders */ --ink-line: rgba(234,229,217,.10); --ink-line-2: rgba(234,229,217,.05); /* shadows */ --shadow-paper: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -20px rgba(0,0,0,.6), 0 8px 20px -10px rgba(0,0,0,.4); } /* ============================================================ ONE CONTINUOUS CANVAS A single fixed gradient sits behind the whole page so every section shares the exact same field — no seams between bands. Content sections go transparent; only true surfaces (cards, documents, footer) carry their own fill. ============================================================ */ [data-theme="dark"]{ background-color:#120f09; background-image:radial-gradient(135% 100% at 72% 0%, #272318 0%, #1a1610 48%, #120f09 100%); background-attachment:fixed; background-repeat:no-repeat; } [data-theme="dark"] body{ background:transparent !important; } /* ---- heroes + content bands → transparent (share the canvas) ---- */ [data-theme="dark"] .hero, [data-theme="dark"] .phero, [data-theme="dark"] .chero, [data-theme="dark"] .rmain, [data-theme="dark"] .shero, [data-theme="dark"] .cinema, [data-theme="dark"] .shift, [data-theme="dark"] .princ, [data-theme="dark"] .proc, [data-theme="dark"] .cover, [data-theme="dark"] .anat, [data-theme="dark"] .matrix-sec, [data-theme="dark"] .connect, [data-theme="dark"] .commit, [data-theme="dark"] .wont, [data-theme="dark"] .people, [data-theme="dark"] .field, [data-theme="dark"] .scope, [data-theme="dark"] .howscope, [data-theme="dark"] .close{ background:transparent !important; color:var(--t-body); } [data-theme="dark"] .hero__veil, [data-theme="dark"] .phero__veil{ background:linear-gradient(90deg, #171410 0%, rgba(21,19,16,.6) 34%, transparent 60%) !important; } @media(max-width:860px){ [data-theme="dark"] .hero__veil, [data-theme="dark"] .phero__veil{ background:linear-gradient(180deg, #171410 8%, rgba(21,19,16,.4) 50%, #171410 96%) !important; } } [data-theme="dark"] .hero__grain{ opacity:.03; } [data-theme="dark"] .hero h1{ color:var(--t-strong); } [data-theme="dark"] .hero h1 .em, [data-theme="dark"] .phero h1 .em, [data-theme="dark"] .chero h1 .em, [data-theme="dark"] .rmain h1 .em{ color:var(--tick-soft); } [data-theme="dark"] .scrollcue{ color:var(--t-mute); } [data-theme="dark"] .scrollcue .ln{ background:linear-gradient(var(--tick-soft), transparent); } /* ---- nav ---- */ [data-theme="dark"] .nav.scrolled{ background:rgba(21,19,16,.88); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:rgba(234,229,217,.08); } /* in dark mode, nav is always light text unless scrolled */ [data-theme="dark"] .nav:not(.scrolled){ color:var(--t-strong); } /* ---- buttons ---- */ [data-theme="dark"] .btn{ --fg:var(--paper); box-shadow:0 12px 26px -14px rgba(0,0,0,.5); } [data-theme="dark"] .btn:hover{ box-shadow:0 20px 34px -16px rgba(0,0,0,.6); } [data-theme="dark"] .btn--ghost{ --fg:var(--t-strong); border-color:var(--ink-line); box-shadow:none; } [data-theme="dark"] .btn--ghost:hover{ background:rgba(234,229,217,.06); } [data-theme="dark"] .btn--tickline{ --fg:var(--tick-soft); border-color:rgba(143,176,162,.5); } [data-theme="dark"] .btn--tickline:hover{ background:var(--tick-glow); } /* ---- cards / surfaces ---- */ [data-theme="dark"] .pcard{ background:var(--paper-2); } [data-theme="dark"] .pcard:hover{ background:var(--paper-hi); } [data-theme="dark"] .fcell{ background:var(--paper-2); } [data-theme="dark"] .fcell:hover{ background:var(--ink); } [data-theme="dark"] .fcell:hover .fcode{ color:var(--tick-soft); } [data-theme="dark"] .fcell:hover .fname{ color:var(--t-strong); } [data-theme="dark"] .fcell:hover .fnote{ color:var(--t-mute); } [data-theme="dark"] .wcard{ background:var(--paper-2); border-color:var(--ink-line); } /* ---- form fields ---- */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select{ background:var(--paper-2); color:var(--t-strong); border-color:var(--ink-line); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus{ background:var(--paper-hi); border-color:var(--tick); box-shadow:0 0 0 3px var(--tick-glow); } [data-theme="dark"] .fcard{ background:var(--paper); border-color:var(--ink-line); } [data-theme="dark"] .fcard__tab{ background:var(--tick); } /* ---- matrix stays light (it's a document) ---- */ [data-theme="dark"] .matrix{ background:linear-gradient(180deg,#fffdf8,#f5f0e4); color:var(--ink); } [data-theme="dark"] .matrix .mtable th{ color:#f5f0e4; } [data-theme="dark"] .matrix .mtable td{ color:#4a453c; } [data-theme="dark"] .matrix .mtable td.lab{ color:#1a1712; } /* ---- sheets stay white (they're documents) ---- */ [data-theme="dark"] .sheet{ background:linear-gradient(180deg, #ffffff, #fbfaf6); } [data-theme="dark"] .sheet .sheet__title{ background:#1a1712; } /* ---- dark anchors: footer sits a touch deeper than the canvas ---- */ [data-theme="dark"] .foot{ background:#0d0b07; } /* ---- coverage hero codes ---- */ [data-theme="dark"] .chero__codes .chip{ border-color:rgba(234,229,217,.12); color:var(--t-mute); background:rgba(234,229,217,.04); } [data-theme="dark"] .chero__codes .chip b{ color:var(--t-strong); } /* ---- ticker chips (coverage section in index) ---- */ [data-theme="dark"] .chip{ border-color:rgba(234,229,217,.12); } /* ---- eyebrow .on-ink not needed in dark mode — base already light ---- */ [data-theme="dark"] .eyebrow{ color:var(--tick); } /* ---- the-standard: bigmark ---- */ [data-theme="dark"] .bigmark .box{ stroke:var(--t-strong); } [data-theme="dark"] .bigmark .tick{ stroke:var(--tick); } /* ---- closing section (dark theme) — transparent, rides the shared canvas ---- */ [data-theme="dark"] .close{ border-top-color:transparent; } [data-theme="dark"] .close__sub{ color:var(--on-ink-mute); } [data-theme="dark"] .close .eyebrow{ color:var(--tick-soft); } [data-theme="dark"] .close .eyebrow::before{ background:var(--tick-soft); } [data-theme="dark"] .close__foot{ color:var(--on-ink-mute); } [data-theme="dark"] .close__mail{ color:var(--tick-soft); } [data-theme="dark"] .close__mail:hover{ border-bottom-color:var(--tick-soft); } [data-theme="dark"] .close__mark{ opacity:.07; } [data-theme="dark"] .close__mark svg{ stroke:var(--tick-soft); } /* ---- toggle button ---- */ .theme-toggle{ width:38px; height:38px; border:1px solid var(--ink-line); border-radius:3px; background:transparent; cursor:pointer; color:inherit; display:grid; place-items:center; transition:background .3s, border-color .3s; } .theme-toggle:hover{ background:rgba(128,128,128,.1); } .theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .theme-toggle .sun{ display:block; } .theme-toggle .moon{ display:none; } [data-theme="dark"] .theme-toggle .sun{ display:none; } [data-theme="dark"] .theme-toggle .moon{ display:block; }