/* ============================================================ Field Notebook — DARK MODE ("Notebook at night") ------------------------------------------------------------ Derived from the locked Direction A palette (sage · charcoal · off-white). This is not a generic dark theme: it keeps the warm, editorial notebook feeling by using a warm near-black paper, an off-white ink, and brightened sage + rust accents so they still read as the brand on a dark ground. Activation: an inline no-flash script sets data-theme="dark" on before first paint (see header.php). The theme toggle (assets/js/theme-toggle.js) flips this attribute and persists it. Everything here is scoped under [data-theme="dark"], so light mode is 100% untouched. Token overrides carry most of the work because main.css, redesign.css and hero-particle.css are all token-driven; the rest of this file fixes the handful of hard-coded light values. ============================================================ */ /* ---------- 1. Core design tokens ---------- */ :root[data-theme="dark"]{ --paper:#14130E; /* page background — warm near-black */ --paper-card:#1D1B15; /* raised card / panel surface */ --paper-deep:#0E0D09; /* deepest recesses, ink sections, footer */ --ink:#ECE7DB; /* primary text — warm off-white */ --ink-soft:#D6D0C3; /* lead / secondary text */ --sage:#97C29E; /* brand accent, brightened for dark */ --sage-deep:#B0D6B7; /* accent-as-text (eyebrows, links) — lighter */ --sage-tint:rgba(151,194,158,.16); --rust:#D08A63; /* secondary accent (Decode, callouts) */ --rust-tint:rgba(208,138,99,.16); --grey:#9E978C; /* muted text — passes AA on the dark ground */ --bone:#302C24; /* hairline dividers / subtle borders */ --bone-2:#403A30; /* stronger borders (inputs, rules, ghost btn)*/ /* Native form controls, scrollbars and UA chrome go dark too. */ color-scheme:dark; } /* ---------- 2. Base surface + the paper-grain overlay ---------- */ :root[data-theme="dark"] body{ background:var(--paper); color:var(--ink); } /* The grain uses mix-blend-mode:multiply on light (darkens paper). On a dark ground multiply is invisible — switch to a gentle lighten. */ :root[data-theme="dark"] body::before{ opacity:.05; mix-blend-mode:soft-light; } /* Text selection stays sage but with dark text for contrast. */ :root[data-theme="dark"] ::selection{ background:var(--sage); color:#14130E; } /* ---------- 3. Fixed header ---------- */ :root[data-theme="dark"] .site-header.is-scrolled{ background:rgba(18,17,12,.82); border-bottom-color:var(--bone); box-shadow:0 1px 24px -16px rgba(0,0,0,.8); } /* Header wordmark: show the light (inverse) lockup, hide the dark one. Both are printed in header.php; only one is ever visible. */ .brand__logo--dark{ display:none; } :root[data-theme="dark"] .brand__logo--light{ display:none; } :root[data-theme="dark"] .brand__logo--dark{ display:block; } /* ---------- 4. Mega-dropdown + mobile drawer ---------- */ :root[data-theme="dark"] .mega{ border:1px solid var(--bone); box-shadow:0 30px 70px -34px rgba(0,0,0,.85); } :root[data-theme="dark"] .mm-panel{ box-shadow:-24px 0 60px -30px rgba(0,0,0,.85); border-left:1px solid var(--bone); } /* Mobile drawer wordmark inverts to the light lockup as well. */ :root[data-theme="dark"] .mm-brand img{ filter:invert(1) hue-rotate(180deg) brightness(1.06); } /* ---------- 5. Tags (three pillar colours are hard-coded) ---------- */ :root[data-theme="dark"] .tag--fuel{ border-color:#b8a95a; color:#cbbd73; } :root[data-theme="dark"] .tag--recover{ border-color:#6f90ab; color:#86a6c2; } :root[data-theme="dark"] .tag--rewire{ border-color:#9c7fb0; color:#b294c6; } /* ---------- 6. Cards & recipes — add definition on dark ---------- */ :root[data-theme="dark"] .recipe{ border-color:var(--bone); background:var(--paper-card); } :root[data-theme="dark"] .recipe:hover{ box-shadow:0 24px 48px -30px rgba(0,0,0,.9); } :root[data-theme="dark"] .recipe__img--ph{ background:var(--paper-deep); } :root[data-theme="dark"] .card{ border-top-color:var(--bone); } :root[data-theme="dark"] .tool{ border-color:var(--bone); background:var(--paper-card); } /* Buttons: hover of the primary sage button brightens (deep is lighter now), keep the dark text legible on the sage fill. */ :root[data-theme="dark"] .btn{ --fg:#14130E; } :root[data-theme="dark"] .btn--ghost{ --fg:var(--ink); } :root[data-theme="dark"] .btn:hover{ box-shadow:0 12px 26px -14px rgba(0,0,0,.8); } /* ---------- 7. "Ink" sections + newsletter block ---------- */ /* main.css sets .section--ink{background:var(--ink);color:var(--paper)} — on dark that would invert to a light block. Re-anchor it to a deep surface. */ :root[data-theme="dark"] .section--ink{ background:var(--paper-deep); color:var(--ink); } :root[data-theme="dark"] .section--ink h2, :root[data-theme="dark"] .section--ink h3{ color:var(--ink); } :root[data-theme="dark"] .news__list li{ color:var(--ink-soft); opacity:1; } :root[data-theme="dark"] .signup{ background:var(--paper-card); color:var(--ink); border:1px solid var(--bone); } :root[data-theme="dark"] .signup input{ background:var(--paper); border-color:var(--bone-2); color:var(--ink); } :root[data-theme="dark"] .section--paper-deep{ background:var(--paper-deep); } /* ---------- 8. Footer ---------- */ :root[data-theme="dark"] .site-footer{ background:var(--paper-deep); color:var(--ink); border-top:1px solid var(--bone); } :root[data-theme="dark"] .footer-brand .brand{ color:var(--ink); } :root[data-theme="dark"] .footer-brand .tag-line{ color:var(--grey); } :root[data-theme="dark"] .footer-col h4{ color:var(--ink); } :root[data-theme="dark"] .footer-col a{ color:var(--grey); } :root[data-theme="dark"] .footer-col a:hover{ color:var(--ink); } :root[data-theme="dark"] .footer-top{ border-bottom-color:var(--bone); } :root[data-theme="dark"] .footer-bottom .built{ color:var(--grey); } /* ---------- 9. Generic form fields + WP core bits ---------- */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{ background:var(--paper-card); border-color:var(--bone-2); color:var(--ink); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{ color:var(--grey); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus{ border-color:var(--sage); outline:none; } :root[data-theme="dark"] hr, :root[data-theme="dark"] .rule{ background:var(--bone-2); } :root[data-theme="dark"] .page-hero p{ color:var(--ink-soft); } /* ---------- 10. Reading redesign (single post + recipe) ---------- */ /* redesign.css defines its own --rx-* tokens with light literals. Override them so the whole reading experience follows the dark ground. */ :root[data-theme="dark"] .rx{ --rx-line:rgba(236,231,219,.16); --rx-line-2:rgba(236,231,219,.09); --rx-sage-deep:var(--sage-deep); --rx-rust-deep:#e0996f; --rx-sage-tint:rgba(151,194,158,.14); --rx-rust-tint:rgba(208,138,99,.14); --rx-paper-2:var(--paper-card); } :root[data-theme="dark"] .rx-subhead{ background:rgba(18,17,12,.94); border-bottom-color:var(--bone); } /* Save / share / stepper are outline buttons drawn with --ink; on dark that is already light-on-dark, but their hover fills with --ink (light) and text --paper (dark) which is correct. Just soften the panel dot-grid. */ :root[data-theme="dark"] .rx-panel{ background-image:radial-gradient(rgba(236,231,219,.05) 1px,transparent 1px); } :root[data-theme="dark"] .rx-readout .rx-r{ background:var(--paper-card); } /* ---------- 11. Homepage particle hero ---------- */ /* hero-particle.css defines --at-* tokens AND paints its warm paper gradient on .at-hero itself (there is no .at-hero__bg). Re-tone the tokens, the base background, the scrim, the ruling, the grain and the pills for night so the hero reads as one dark composition. Particle colours are set in hero-particle.js, which reads data-theme at load. */ :root[data-theme="dark"] .at-hero{ --at-paper:#14130E; --at-paper-2:#1D1B15; --at-ink:#ECE7DB; --at-ink-2:#B8B2A6; --at-sage:#97C29E; --at-sage-deep:#B0D6B7; --at-rust:#D08A63; --at-line:rgba(236,231,219,.16); /* the actual hero background lives here — override the light paper gradient */ background: radial-gradient(68% 78% at 80% 44%, rgba(151,194,158,.12) 0%, rgba(151,194,158,0) 56%), radial-gradient(52% 58% at 92% 82%, rgba(151,194,158,.10) 0%, rgba(151,194,158,0) 60%), radial-gradient(140% 130% at 12% 8%, #191811 0%, #141310 46%, #0E0D09 100%); } /* Faint notebook ruling, light-on-dark instead of sage-on-paper. */ :root[data-theme="dark"] .at-hero__paper{ background:repeating-linear-gradient(180deg, transparent 0 37px, rgba(236,231,219,.05) 37px 38px); } /* The scrim fades the particle field into the paper — keep it, but dark-toned so it never washes the hero pale. */ :root[data-theme="dark"] .at-hero__scrim{ background: radial-gradient(115% 90% at 0% 50%, #14130E 0%, rgba(20,19,14,.72) 30%, rgba(20,19,14,0) 60%), linear-gradient(180deg, rgba(20,19,14,.5) 0%, rgba(20,19,14,0) 20%, rgba(20,19,14,0) 80%, rgba(20,19,14,.62) 100%); } /* Grain uses multiply (invisible on dark) → gentle lighten. */ :root[data-theme="dark"] .at-hero__grain{ mix-blend-mode:soft-light; opacity:.06; } /* Pills: translucent-white chips → translucent-light; active chip → sage. */ :root[data-theme="dark"] .at-pill{ background:rgba(236,231,219,.06); } :root[data-theme="dark"] .at-pill.is-active{ background:var(--at-sage); border-color:var(--at-sage); } :root[data-theme="dark"] .at-pill.is-active .at-pill__name{ color:#14130E; } :root[data-theme="dark"] .at-pill.is-active .at-pill__mean{ color:rgba(20,19,14,.78); } /* The mobile scrim has its own light literal in a media query — dark it too. */ @media (max-width:760px){ :root[data-theme="dark"] .at-hero__scrim{ background:linear-gradient(180deg,rgba(20,19,14,.94) 0%,rgba(20,19,14,.82) 40%,rgba(20,19,14,.42) 64%,rgba(20,19,14,0) 100%); } } /* ---------- 12. Loader ---------- */ :root[data-theme="dark"] .loader{ background:var(--paper); } /* ---------- 13. Progress bar + misc accents already token-based ---------- */ /* .progress uses --sage; images/figures inherit. Nothing more required. */