/* ========================================================================== cinema.css — second layer over journal.css 1. colour tokens registered as so the whole site can cross-fade between themes 2. the dark theme (driven by the ECG plug; see Journal.setTheme) 3. cable / SVG colours (the cable is inline SVG with presentation attributes; CSS wins over them) 4. cinematic composition: more air, a stage behind the character, quieter labels Original palette is kept (ivory / oat / navy / terracotta); teal is the new "live circuit" accent. ========================================================================== */ @property --ivory{syntax:'';inherits:true;initial-value:#FBF9F5} @property --oat{syntax:'';inherits:true;initial-value:#F2EEE7} @property --paper{syntax:'';inherits:true;initial-value:#FFFDFA} @property --blush{syntax:'';inherits:true;initial-value:#F4E6DF} @property --wash{syntax:'';inherits:true;initial-value:#F6EDE6} @property --sage-tint{syntax:'';inherits:true;initial-value:#E4ECE3} @property --ink{syntax:'';inherits:true;initial-value:#383330} @property --ink-2{syntax:'';inherits:true;initial-value:#4A423D} @property --muted{syntax:'';inherits:true;initial-value:#5C544E} @property --navy{syntax:'';inherits:true;initial-value:#16283A} @property --navy-2{syntax:'';inherits:true;initial-value:#2C4357} @property --terra{syntax:'';inherits:true;initial-value:#B56E57} @property --terra-text{syntax:'';inherits:true;initial-value:#9C543F} @property --sage{syntax:'';inherits:true;initial-value:#8FA892} @property --teal{syntax:'';inherits:true;initial-value:#3E7C7D} @property --rule{syntax:'';inherits:true;initial-value:rgba(56,51,48,.17)} @property --rule-soft{syntax:'';inherits:true;initial-value:rgba(56,51,48,.09)} @property --cable{syntax:'';inherits:true;initial-value:#1B2D3B} @property --cable-2{syntax:'';inherits:true;initial-value:#2C4357} @property --rail{syntax:'';inherits:true;initial-value:#CDBDB1} @property --panel-a{syntax:'';inherits:true;initial-value:#DDE9E5} @property --panel-b{syntax:'';inherits:true;initial-value:#C4D6D2} @property --gap-ink{syntax:'';inherits:true;initial-value:rgba(255,255,255,.4)} :root{ --ivory:#FBF9F5; --oat:#F2EEE7; --wash:#F6EDE6; --navy:#16283A; --teal:#3E7C7D; --cable:#1B2D3B; --cable-2:#2C4357; --rail:#CDBDB1; --panel-a:#DDE9E5; --panel-b:#C4D6D2; --gap-ink:rgba(255,255,255,.4); --sec:clamp(104px,13vw,216px); color-scheme:light; transition: --ivory .9s var(--ease-io),--oat .9s var(--ease-io),--paper .9s var(--ease-io),--blush .9s var(--ease-io),--wash .9s var(--ease-io), --sage-tint .9s var(--ease-io),--ink .9s var(--ease-io),--ink-2 .9s var(--ease-io),--muted .9s var(--ease-io),--navy .9s var(--ease-io), --navy-2 .9s var(--ease-io),--terra .9s var(--ease-io),--terra-text .9s var(--ease-io),--sage .9s var(--ease-io),--teal .9s var(--ease-io), --rule .9s var(--ease-io),--rule-soft .9s var(--ease-io),--cable .9s var(--ease-io),--cable-2 .9s var(--ease-io),--rail .9s var(--ease-io), --panel-a .9s var(--ease-io),--panel-b .9s var(--ease-io),--gap-ink .9s var(--ease-io); } /* ---------- dark theme: deep navy ground, warm ivory type, muted teal circuit, brighter terracotta ---------- */ :root[data-theme="dark"]{ --ink-rgb:236,229,217; --ivory-rgb:12,22,32; --ivory:#0C1620; --oat:#101D29; --paper:#16273A; --blush:#1C2A35; --wash:#0F1C28; --sage-tint:#15292C; --ink:#ECE5D9; --ink-2:#D2CBBF; --muted:#98A5AB; --navy:#E8E0D2; --navy-2:#FFFFFF; --terra:#D58B71; --terra-text:#E39C83; --sage:#6DB7B2; --teal:#79C3BC; --rule:rgba(236,229,217,.17); --rule-soft:rgba(236,229,217,.09); --cable:#C9D8D5; --cable-2:#8FB3B1; --rail:rgba(236,229,217,.2); --panel-a:#21424C; --panel-b:#142A33; --gap-ink:rgba(236,229,217,.075); color-scheme:dark; } @media (prefers-reduced-motion:reduce){:root{transition:none}} /* ---------- the cable: inline SVG attributes lose to CSS ---------- */ #flow #wireB{stroke:var(--cable)} #flowfade stop{stop-color:var(--cable)} #flow rect[fill="#1B2D3B"]{fill:var(--cable)} #flow rect[fill="#2C4357"]{fill:var(--cable-2)} #flow rect[fill="#8FA892"],#flowBack [fill="#8FA892"]{fill:var(--teal)} #flowBack #rail{stroke:var(--rail)} #flowBack #railLit{stroke:var(--teal)} #flowBack [fill="#FFFDFA"],#flow [fill="#FFFDFA"]{fill:var(--paper)} #flowBack [stroke="#CFC5BB"]{stroke:var(--rail)} #flow #hintLt,#flow #hintRt{fill:var(--ink)} .is-powered .dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 30%,transparent)} :root[data-theme="dark"] #flowBack,:root[data-theme="dark"] #flow{filter:none} :root[data-theme="dark"] #flow #wireA,:root[data-theme="dark"] #flow #wireB{filter:none} /* ---------- characters in the dark: a touch less exposure, no white halo ---------- */ :root[data-theme="dark"] .charFallback{filter:brightness(.9) contrast(1.04)} :root[data-theme="dark"] .wshadow{background:rgba(0,0,0,.6) !important} /* ---------- composition ---------- */ /* fewer competing labels: the masthead keeps brand + nav; kickers lose their trailing rule */ .issue{display:none} .mast-in{grid-template-columns:1fr auto} .kicker{color:var(--teal);letter-spacing:.14em} .kicker .no{color:var(--ink)} .kicker::after{display:none} .label,.src{color:var(--muted)} /* hero: the character stands on a stage, the word "Gap" is the set behind her */ .hero-stage::before{content:"";position:absolute;z-index:0;top:calc(-1 * clamp(18px,3.4svh,48px));bottom:-7px;left:clamp(-28px,-2vw,0px);right:calc(-1 * var(--edge));background:linear-gradient(180deg,var(--panel-a),var(--panel-b))} .gapword{color:var(--gap-ink);translate:0 var(--py,0px);will-change:translate} .hero .h1{max-width:10em} .hero-lede{padding-bottom:clamp(40px,7svh,84px)} /* more air between and inside sections */ .row{padding-block:clamp(30px,3.6vw,60px)} .row.feature .ttl{font-size:clamp(38px,5vw,76px)} .index{border-top-color:var(--ink)} .journey .tl-wrap{margin-top:clamp(56px,20svh,220px)} .lede{max-width:30em;line-height:1.7} /* the journey stage track reads as a lit circuit once the plug is in */ .is-powered .node{border-color:color-mix(in srgb,var(--teal) 55%,var(--rule))} /* dark: buttons and surfaces keep deliberate contrast, never a plain inversion */ :root[data-theme="dark"] body{background:var(--ivory)} :root[data-theme="dark"] .btn.ghost,:root[data-theme="dark"] .btn.line{border-color:var(--rule)} :root[data-theme="dark"] .popbox{box-shadow:0 22px 44px -18px rgba(0,0,0,.6)} /* companion pages: a quiet note while the circuit is open */ .circuit-note{display:none;font:400 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted)} :root[data-theme="dark"] .circuit-note{display:block} .circuit-note a{color:var(--teal);text-decoration:underline;text-underline-offset:3px} @media (max-width:900px){ .hero-stage::before{left:calc(-1 * var(--edge));top:0} .journey .tl-wrap{margin-top:clamp(40px,14svh,120px)} }