/* ===================================================================== wikiflow international — INK THEME (stage1-colour; the DEFAULT theme) One bold colour: the ink family (#231F20 base surface + its tints for elevation), with the canvas/paper white family as type. Monochrome UI; the navy family (--navy/--steel light voices) is the ONLY hint colour, budgeted to 1-2 moments per viewport (hero accent, chip number/glint, callout marker, flow-wave motifs) and never on standard UI. Toggled OFF via the header toggle (light theme = the exact inverse). Loaded after main.css; applies under . ===================================================================== */ /* ---------- Palette — every token re-pointed to the ink family ---------- */ :root[data-theme="dark"]{ color-scheme:dark; --canvas:#231F20; /* page background — the ink base surface */ --paper:#1B1817; /* deepest — the gaps between gallery tiles */ --line:rgba(246,246,246,.10); --line-soft:rgba(246,246,246,.06); --ink:#F6F6F6; /* type — the canvas-white family */ --body:#C9C5C4; /* body — ink-family light grey */ --muted:#A19D9B; --navy:#8CB1CE; /* THE hint colour — navy family's light voice */ --steel:#A4C0D2; --e-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px -6px rgba(0,0,0,.6); --e-2:0 2px 8px -3px rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.72); --e-3:0 8px 24px -8px rgba(0,0,0,.55),0 48px 90px -36px rgba(0,0,0,.8); --ring:0 0 0 1px rgba(246,246,246,.07); --glass:rgba(35,31,32,.62); --glass-scrolled:rgba(27,24,23,.86); --glass-strong:rgba(43,39,39,.6); --glass-card:rgba(43,39,39,.55); --glass-border:rgba(246,246,246,.08); --navy-wash:rgba(140,177,206,.10); --steel-wash:rgba(164,192,210,.08); --mono-wash:rgba(246,246,246,.05); /* neutral elevation wash — backgrounds stay mono */ --grad-ink:linear-gradient(120deg,var(--steel),var(--navy)); --grad-field:linear-gradient(180deg,#231F20,#1F1C1D 40%,#231F20 100%); --btn-fill:#F6F6F6; /* mono buttons: type-colour fill, surface-colour text */ --btn-text:#231F20; } :root[data-theme="dark"] body{background:var(--canvas);color:var(--body)} /* ---------- Light tiles -> raised ink surfaces (subtle, layered) ---------- */ :root[data-theme="dark"] :is( .gallery-page .page-head, .gallery-page>.block, .jr-head, .jr-body, .pb-slide, .ps-grid>*, .ls-head, .tm-card, .band, .stat, .contact-card, .hero-copy, .hero-aside, .p3-stat ){background:radial-gradient(62% 80% at 16% 10%,var(--mono-wash),transparent 62%),linear-gradient(165deg,#2B2727,#242021);box-shadow:var(--ring),var(--e-1)} /* formerly per-accent tiles — collapsed to the mono elevation system */ :root[data-theme="dark"] .pb-phase{background:linear-gradient(160deg,#2E2A2B,#211D1E)} :root[data-theme="dark"] .gallery-page .tp-tile{background:radial-gradient(78% 92% at 20% 8%,var(--mono-wash),transparent 66%),linear-gradient(165deg,#2B2727,#242021)} :root[data-theme="dark"] .leadership-slide .person{background:radial-gradient(80% 92% at 24% 10%,var(--mono-wash),transparent 66%),linear-gradient(160deg,#2C2828,#242021)} /* raised elements — a step lighter than a tile */ :root[data-theme="dark"] .tm-pop{background:linear-gradient(165deg,#363031,#2B2727);border-color:var(--line);box-shadow:var(--e-2)} /* ---------- Bands that are DARK in the light theme — deepened ink here ---------- */ :root[data-theme="dark"] :is(.proof,.gallery-page .proof){background:radial-gradient(80% 120% at 90% 8%,var(--mono-wash),transparent 55%),linear-gradient(150deg,#272324,#1D1A1B)} :root[data-theme="dark"] :is(.cta-band,.cta-tile){background:radial-gradient(70% 130% at 100% 0,var(--mono-wash),transparent 55%),linear-gradient(150deg,#2E2929,#221E1F)} /* Marks on those bands are coloured var(--paper) ("white ink on a dark band"); --paper is dark in this theme, so re-point it light inside the bands. */ :root[data-theme="dark"] :is(.proof,.cta-band,.cta-tile,.statement){--paper:#F6F6F6} /* Header logo: the white symbol on ink (the paper footer pins the dark symbol). */ :root[data-theme="dark"] .brand img{filter:invert(1) brightness(1.18)} /* Skip-to-content pill stays legible. */ :root[data-theme="dark"] .skip{background:#F6F6F6;color:#231F20} /* ---------- Brushed accent text — the ONE navy-family treatment per viewport ---------- */ :root[data-theme="dark"] .hero h1 .accent, :root[data-theme="dark"] .statement-h .accent, :root[data-theme="dark"] .ps-statement .accent, :root[data-theme="dark"] .ls-head h2 .accent, :root[data-theme="dark"] .pb-lead h2 .accent, :root[data-theme="dark"] .stub h1 .accent, :root[data-theme="dark"] .leadership-page h1 .accent, :root[data-theme="dark"] .jw-believe, :root[data-theme="dark"] .jw-behave, :root[data-theme="dark"] .jw-become{background-image:linear-gradient(100deg,#88AECA,#A9C8DA,#6E92AC,#98BAD0,#5F879E)} /* ---------- Proof chip (hero results) — ink variants ---------- */ :root[data-theme="dark"] .wf-chip{background:radial-gradient(62% 80% at 16% 10%,var(--mono-wash),transparent 62%),rgba(38,34,35,.66);border-color:rgba(246,246,246,.08);box-shadow:inset 0 1px 0 rgba(246,246,246,.06),var(--e-2)} :root[data-theme="dark"] .wf-chip:hover,:root[data-theme="dark"] .wf-chip.is-paused{box-shadow:inset 0 1px 0 rgba(246,246,246,.06),var(--e-3)} /* glint = the hero viewport's second (and last) navy moment */ :root[data-theme="dark"] .wf-chip::before{background:conic-gradient(from var(--wf-a),transparent 0turn,rgba(164,192,210,.5) .04turn,rgba(140,177,206,.35) .07turn,transparent .1turn)} /* chip number carries the same navy-family brushed treatment as the hero accent */ :root[data-theme="dark"] .wf-row .g{background-image:linear-gradient(100deg,#88AECA,#A9C8DA,#6E92AC,#98BAD0,#5F879E)} :root[data-theme="dark"] .wf-chip-eyebrow{color:var(--body)} :root[data-theme="dark"] .wf-chip-x:focus-visible{outline-color:var(--ink)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root[data-theme="dark"] .wf-chip{background:radial-gradient(62% 80% at 16% 10%,var(--mono-wash),transparent 62%),linear-gradient(165deg,#2B2727,#242021);border-color:var(--line)} } /* ---------- Playbook comparison (the-journey) — ink variants ---------- */ :root[data-theme="dark"] .cmp-table thead th, :root[data-theme="dark"] .cmp-table tbody th, :root[data-theme="dark"] .cmp-principle{color:var(--body)} /* ---------- Preview skeletons — visible on ink ---------- */ :root[data-theme="dark"] .pv-bone{background:rgba(246,246,246,.12)} :root[data-theme="dark"] .pv-bone::after{background:linear-gradient(90deg,transparent,rgba(246,246,246,.10),transparent)} :root[data-theme="dark"] .pv-play{background:rgba(246,246,246,.14);border-color:var(--line)} /* .stub/.leadership-page accents set background: shorthand — must override the same way */ :root[data-theme="dark"] .stub h1 .accent,:root[data-theme="dark"] .leadership-page h1 .accent{background:linear-gradient(100deg,#88AECA,#A9C8DA,#6E92AC,#98BAD0,#5F879E);-webkit-background-clip:text;background-clip:text} /* Subpage heroes: full-bleed ink band wins over the tile recipe in this theme too */ :root[data-theme="dark"] .gallery-page .page-head{background:#231F20;box-shadow:none;border-radius:0} /* ---------- Mobile drawer — a raised ink surface, not the --paper gap tone ---------- --paper is the DEEPEST tone in this theme (the gaps between tiles), so the drawer takes the standard elevated-surface recipe instead; the scrim goes deeper than the light-theme one so the drawer still separates from the page. NB: compound, not descendant — data-theme and .js-nav both live on , so `:root[data-theme="dark"] .js-nav …` would ask html to descend from itself and never match. Scoped to the breakpoint: above it .nav-links is the inline nav row and must stay transparent. */ @media (max-width:1080px){ :root[data-theme="dark"].js-nav :is(.nav-links,.nav-head,.nav-foot){ background:radial-gradient(62% 80% at 16% 10%,var(--mono-wash),transparent 62%),linear-gradient(165deg,#2B2727,#242021); } :root[data-theme="dark"].js-nav .nav-scrim{background:rgba(10,8,8,.6)} /* The CTA keeps the DEEP navy gradient here rather than the theme's light-voice --navy (#8CB1CE): white type on #8CB1CE misses AA, and the drawer is its own viewport, so this is that viewport's single navy moment. */ :root[data-theme="dark"].js-nav .nav-links a.nav-cta, :root[data-theme="dark"].js-nav .nav-links a.nav-cta:hover{ background:linear-gradient(135deg,#365568,#2A4252);color:#FFFFFF; box-shadow:0 24px 56px -30px rgba(54,85,104,.9); } } /* ---------- BANDS THAT FOLLOW THE TOGGLE (owner 2026-07-18): hero, finale schematic, stripes, footer - ink stage in dark, paper sheet in light ---------- */ :root[data-theme="dark"] .hv3{background:#181515;color:#F6F6F6} :root[data-theme="dark"] .hv3-eyebrow{color:#A19D9B} :root[data-theme="dark"] .hv3 h1{color:#F6F6F6} :root[data-theme="dark"] .hv3 .hl{color:#8CB1CE} :root[data-theme="dark"] .hv3 .discover{color:#F6F6F6;border-color:rgba(246,246,246,.22)} :root[data-theme="dark"] .hv3 .scroll-cue{color:#F6F6F6;border-color:rgba(246,246,246,.22);background:rgba(35,31,32,.5)} :root[data-theme="dark"] .fin{color:#F6F6F6;background:linear-gradient(rgba(246,246,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,246,.05) 1px,transparent 1px),linear-gradient(rgba(246,246,246,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,246,.085) 1px,transparent 1px),#181515;background-size:36px 36px,36px 36px,180px 180px,180px 180px,auto} :root[data-theme="dark"] .fin-eyebrow{color:#A19D9B} :root[data-theme="dark"] .fin-cta{color:#F6F6F6} :root[data-theme="dark"] .fin-cta:focus-visible{outline-color:#F6F6F6} :root[data-theme="dark"] .fin-reg{color:rgba(246,246,246,.4)} :root[data-theme="dark"] .fin-tb{background:#181515;border-color:rgba(246,246,246,.3)} :root[data-theme="dark"] .ftb-row{border-bottom-color:rgba(246,246,246,.18)} :root[data-theme="dark"] .ftb-k{color:rgba(246,246,246,.6);border-right-color:rgba(246,246,246,.18)} :root[data-theme="dark"] .ftb-v{color:#F6F6F6} :root[data-theme="dark"] a.ftb-v{color:#8CB1CE} :root[data-theme="dark"] a.ftb-v:hover{background:rgba(140,177,206,.1);color:#A4C0D2} :root[data-theme="dark"] a.ftb-v:focus-visible{outline-color:#F6F6F6} :root[data-theme="dark"] .stripes{background:#181515;border-top-color:rgba(246,246,246,.14)} :root[data-theme="dark"] .stripe{color:rgba(246,246,246,.9);border-bottom-color:rgba(246,246,246,.14)} :root[data-theme="dark"] .stripe:hover{color:#F6F6F6;background:#1F1B1B} :root[data-theme="dark"] .stripe:focus-visible{outline-color:#F6F6F6} :root[data-theme="dark"] .stripe .st-arr{color:rgba(246,246,246,.45)} :root[data-theme="dark"] .stripe:hover .st-arr{color:rgba(246,246,246,.75)} :root[data-theme="dark"] .foot-tile{color:rgba(255,255,255,.72);background:#1B1817} :root[data-theme="dark"] .foot-monument{color:rgba(255,255,255,.05)} :root[data-theme="dark"] .foot-top{border-bottom-color:rgba(255,255,255,.14)} :root[data-theme="dark"] .foot-brand img{filter:none} :root[data-theme="dark"] .foot-brand .wm{color:#F6F6F6} :root[data-theme="dark"] .foot-brand .wm span{color:rgba(255,255,255,.55)} :root[data-theme="dark"] .foot-global{color:rgba(255,255,255,.55)} :root[data-theme="dark"] .globe-lines{stroke:rgba(255,255,255,.35)} :root[data-theme="dark"] .globe-callouts{stroke:rgba(255,255,255,.3)} :root[data-theme="dark"] .globe-dots{fill:#A4C0D2} :root[data-theme="dark"] .globe-flow{stroke:#A4C0D2} :root[data-theme="dark"] .globe-labels text{fill:rgba(255,255,255,.85)} :root[data-theme="dark"] .foot-col h2{color:rgba(255,255,255,.8)} :root[data-theme="dark"] .foot-col a{color:rgba(255,255,255,.62)} :root[data-theme="dark"] .foot-col a:hover{color:#F6F6F6} :root[data-theme="dark"] .foot-bottom{color:rgba(255,255,255,.58)}