/* ═════════════════════════ Pegify · Dark mode ═════════════════════════ */ /* Inverts the cream-paper palette to a warm-black palette. Loaded on every site page. Toggled via [data-theme="dark"] on . */ html[data-theme="dark"]{ --paper:#0e0e0c; --sheet:#17171a; --soft:#20201e; --line:#2b2b27; --ink:#ecead8; --ink-2:#c8c5b4; --muted:#87837a; --orange:#ff9a5f; --orange-deep:#ffb38a; --green:#79d089; --green-2:#9adba7; --mint:#bff4c7; --lav:#d4a8e8; } [data-theme="dark"] body{background:var(--paper);color:var(--ink)} [data-theme="dark"] ::selection{background:var(--orange);color:#0e0e0c} /* glass chrome */ [data-theme="dark"] .nav.scrolled{ background:rgba(14,14,12,.82); border-bottom-color:rgba(255,255,255,.06); } [data-theme="dark"] .feat-nav, [data-theme="dark"] .filters{ background-color:rgba(23,23,26,.86)!important; border-color:rgba(255,255,255,.06)!important; } /* Inline-fill SVG logos: CSS beats SVG presentation attrs */ [data-theme="dark"] .nav-brand .nav-logo path{fill:#ecead8} [data-theme="dark"] .fb-logo path{fill:#ecead8} /* Footer giant wordmark: stroke hardcoded cream-rgba — flip to ink-rgba for the (now cream) footer bg */ [data-theme="dark"] .footer-mark path{stroke:rgba(23,23,26,.45)!important} /* Hero massive wordmark on Home v2 — its fill comes from --ink which flips automatically; reinforce strokes */ [data-theme="dark"] .hero-mark-svg path{stroke:var(--ink)} [data-theme="dark"] .hero-mark-svg path.accent{stroke:var(--orange)} /* Cursor */ [data-theme="dark"] .cursor{border-color:#ecead8} [data-theme="dark"] .cursor-dot{background:#ecead8} /* Nav nudges */ [data-theme="dark"] .nav-links a{color:var(--ink)} [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active{background:var(--ink);color:var(--paper)} [data-theme="dark"] .btn-ghost{color:var(--ink);border-color:var(--line)} [data-theme="dark"] .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} [data-theme="dark"] .btn-cta{background:var(--ink);color:var(--paper);box-shadow:0 12px 26px rgba(0,0,0,.45)} [data-theme="dark"] .btn-cta:hover{background:var(--orange);color:#fff} /* Mobile nav — dark mode */ [data-theme="dark"] .nav-hamburger{border-color:var(--line)} [data-theme="dark"] .nav-hamburger .hb{background:var(--ink)} [data-theme="dark"] .nav-hamburger:hover,[data-theme="dark"] .nav-hamburger.open{background:var(--ink);border-color:var(--ink)} [data-theme="dark"] .nav-hamburger:hover .hb,[data-theme="dark"] .nav-hamburger.open .hb{background:var(--paper)} [data-theme="dark"] .mobile-nav{background:rgba(14,14,12,.97);border-bottom-color:rgba(255,255,255,.06)} [data-theme="dark"] .mobile-nav a{color:var(--ink)} [data-theme="dark"] .mobile-nav a:hover,[data-theme="dark"] .mobile-nav a.active{background:var(--ink);color:var(--paper)} [data-theme="dark"] .mobile-nav .mob-cta{border-top-color:var(--line)} /* Theme toggle button */ .theme-toggle{ width:42px;height:42px;border-radius:999px; border:1px solid var(--line);background:var(--sheet);color:var(--ink); display:grid;place-items:center;font-size:16px;cursor:none; transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,color .25s; flex-shrink:0; } .theme-toggle:hover{transform:rotate(-12deg);border-color:var(--ink)} [data-theme="dark"] .theme-toggle{background:var(--sheet);color:var(--ink);border-color:var(--line)} @media (max-width:900px){ .theme-toggle{width:38px;height:38px;font-size:14px} body .theme-toggle{cursor:pointer} } /* Hero (Home v2) — the grid background flips */ [data-theme="dark"] .hero-grid{ background-image: linear-gradient(rgba(236,234,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236,234,216,.05) 1px, transparent 1px); } [data-theme="dark"] .hero-grid-bg{ background-image: linear-gradient(rgba(236,234,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236,234,216,.05) 1px, transparent 1px); } /* Loop diagram (How) — dashed ring against dark */ [data-theme="dark"] .loop-svg .ring-bg{stroke:rgba(236,234,216,.18)} [data-theme="dark"] .loop-spin{border-color:rgba(236,234,216,.18)} [data-theme="dark"] .loop-spin.two{border-color:rgba(121,208,137,.22)} /* Pegi roster — the c4 (ink) card's offset shadow is orange in light. Keep punchy in dark too. */ [data-theme="dark"] .rcard.c4::before{background:var(--orange)} /* pegi-sec.lav: --lav is a LIGHT color (#d4a8e8) in dark mode. Cream text (--ink) on light lavender ≈ 1.2:1 → invisible. Force dark text throughout; the pegi-panel keeps its own dark bg so cream inside is fine. */ [data-theme="dark"] .pegi-sec.lav{color:var(--paper)} [data-theme="dark"] .pegi-sec.lav h2{color:var(--paper)} [data-theme="dark"] .pegi-sec.lav .lede{color:rgba(14,14,12,.78)} [data-theme="dark"] .pegi-sec.lav .quote{color:var(--paper)} /* Stage panel inside .pegi-sec.lav uses solid white in light — keep it readable in dark mode. Restore cream text so near-black doesn't disappear on the dark panel bg. */ [data-theme="dark"] .pegi-sec.lav .pegi-panel{background:rgba(14,14,12,.5);border-color:rgba(14,14,12,.16);color:var(--ink)} /* Pricing tier — featured offset shadow is orange; matrix head right col is orange */ [data-theme="dark"] .tier.featured::before{background:var(--orange)} /* Brief Studio mock title underline */ [data-theme="dark"] .brief-mock .title-input{border-bottom-color:var(--ink)} /* Build YAML mock (Pegis page) — code block colors stay; just ensure dark variant cohesive */ /* mfoot already uses rgba whites which look fine on cream-on-dark inversion since the mock keeps its own dark bg */ /* Pain scatter offset shadow */ [data-theme="dark"] .pain-card{box-shadow:8px 8px 0 var(--ink);background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .pain-card:hover{box-shadow:14px 14px 0 var(--ink)} [data-theme="dark"] .pain-card .pin{border-color:var(--sheet)} [data-theme="dark"] .pain-card .quote{background:var(--soft);border-color:var(--line);color:var(--ink-2)} /* Bridge section — green flips light; keep deep green bg in dark */ [data-theme="dark"] .bridge{background:#1a3d22} [data-theme="dark"] .bridge h2 em{color:var(--mint)} [data-theme="dark"] .bridge p{color:rgba(255,255,255,.72)} /* Stack card backgrounds inside green bridge — keep glass effect readable */ [data-theme="dark"] .stack-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} /* Pillar cards — featured card flips; ensure internal contrast */ [data-theme="dark"] .pillar{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .pillar p{color:var(--ink-2)} [data-theme="dark"] .pillar .features div{color:var(--ink)} [data-theme="dark"] .pillar .features div i{color:var(--green)} [data-theme="dark"] .pillar-ico{background:var(--soft);color:var(--ink)} [data-theme="dark"] .pillar:hover .pillar-ico{background:var(--ink);color:var(--mint)} [data-theme="dark"] .pillar.featured{background:var(--ink);color:var(--paper)} [data-theme="dark"] .pillar.featured .pillar-ico{background:rgba(14,14,12,.25);color:var(--mint)} [data-theme="dark"] .pillar.featured p{color:rgba(14,14,12,.65)} [data-theme="dark"] .pillar.featured .features div{color:var(--paper)} [data-theme="dark"] .pillar.featured .features div i{color:var(--mint)} [data-theme="dark"] .pillar.featured .badge{background:var(--orange);color:#fff} [data-theme="dark"] .pillar .badge{background:var(--mint);color:#1a3d22} /* Rail cards — cream cards on dark rail need contrast */ [data-theme="dark"] .rail-card{background:var(--sheet);color:var(--ink);box-shadow:0 28px 60px rgba(0,0,0,.7)} [data-theme="dark"] .rail-card .stage{border-color:var(--line);color:var(--muted)} [data-theme="dark"] .rail-card p{color:var(--ink-2)} [data-theme="dark"] .rail-card .mock{background:var(--paper);border-color:var(--line);color:var(--ink-2)} [data-theme="dark"] .rail-card .mock .k{color:var(--orange)} [data-theme="dark"] .rail-card .mock .g{color:var(--green)} [data-theme="dark"] .rail-card .mock .m{color:var(--muted)} /* Cockpit mock — ensure all labels readable */ [data-theme="dark"] .cockpit-tilt{background:var(--sheet);border-color:var(--line);box-shadow:0 40px 100px rgba(0,0,0,.5)} [data-theme="dark"] .cockpit-bar{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cockpit-bar .url{background:var(--soft);color:var(--muted)} [data-theme="dark"] .cock-side{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cock-main{background:var(--sheet)} [data-theme="dark"] .cock-stat{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cock-agents{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cock-agent{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .cock-agent .meta span{color:var(--muted)} [data-theme="dark"] .cock-agent .av{color:#fff} [data-theme="dark"] .cock-right{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cock-event{background:var(--sheet);border-color:var(--line)} /* Pegi roster cards — c3 (lav) loses contrast when ink flips cream */ [data-theme="dark"] .pegi-card.c3{color:var(--paper)} [data-theme="dark"] .pegi-card.c3 .pegi-skill{background:rgba(14,14,12,.18)} /* Pegi voice bubbles on lav section — cream on lavender = invisible */ [data-theme="dark"] .voice-bubbles .b.pegi{color:var(--paper)} [data-theme="dark"] .pegi-card.c1 .pegi-skill, [data-theme="dark"] .pegi-card.c2 .pegi-skill{background:rgba(255,255,255,.18)} /* Metrics strip — mint bg with green text stays readable; just reinforce */ [data-theme="dark"] .metrics{background:#0c1e10;color:#f8f6ef} [data-theme="dark"] .metrics .metric .v em{color:rgba(255,255,255,.6)} [data-theme="dark"] .metrics .metric .l{color:rgba(255,255,255,.65)} /* Runtime chips */ [data-theme="dark"] .runtime-chip{background:var(--sheet);border-color:var(--line);color:var(--ink)} [data-theme="dark"] .runtime-chip:hover{border-color:var(--ink)} /* Calculator slider track in dark */ [data-theme="dark"] .calc-row input[type=range]::-webkit-slider-runnable-track{background:rgba(236,234,216,.18)} [data-theme="dark"] .calc-row input[type=range]::-moz-range-track{background:rgba(236,234,216,.18)} [data-theme="dark"] .calc-row input[type=range]::-webkit-slider-thumb{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .calc-row input[type=range]::-moz-range-thumb{background:var(--sheet);border-color:var(--ink)} /* ═══════════════════════════════════════════════════════════ How it Works page ═══════════════════════════════════════════════════════════ */ /* Hero buttons */ [data-theme="dark"] .btn-hero{background:var(--ink);color:var(--paper);box-shadow:0 18px 36px rgba(0,0,0,.4)} [data-theme="dark"] .btn-hero:hover{background:var(--orange);box-shadow:0 22px 44px rgba(255,125,47,.32)} [data-theme="dark"] .btn-hero-ghost{border-color:var(--ink);color:var(--ink)} [data-theme="dark"] .btn-hero-ghost:hover{background:var(--ink);color:var(--paper)} /* Hero h1 underline highlight — mint bg needs dark text */ [data-theme="dark"] .hero h1 u{color:var(--paper)} /* Stat strip */ [data-theme="dark"] .stat-strip{background:var(--sheet);border-color:var(--line)} /* Stage blocks — alt variant */ [data-theme="dark"] .stage-block.alt{background:var(--sheet);border-color:var(--line)} /* Visual mock containers */ [data-theme="dark"] .visual{background:var(--sheet);border-color:var(--line);box-shadow:0 28px 60px rgba(0,0,0,.4)} /* Brief mock fields */ [data-theme="dark"] .brief-mock .field{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .brief-mock .criteria{background:var(--paper);border-color:var(--line)} /* Routing matrix */ [data-theme="dark"] .routing{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .routing .label{background:var(--sheet)} [data-theme="dark"] .routing .cell{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .routing .cell.on{background:var(--ink);border-color:var(--ink)} [data-theme="dark"] .routing .cell.try{background:rgba(191,244,199,.14);color:var(--mint);border-color:rgba(191,244,199,.25)} /* Memory graph — already dark-bg; reinforce for consistency */ [data-theme="dark"] .memory-graph{background:var(--ink)} /* Verify mock */ [data-theme="dark"] .verify-mock{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .verify-mock .row{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .verify-mock .row.fail .chk{background:rgba(255,154,95,.2);color:var(--orange)} /* Ship mock */ [data-theme="dark"] .ship-mock{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .ship-mock .file:hover{background:var(--paper)} [data-theme="dark"] .ship-mock .sfoot{border-color:var(--line)} /* Principles section — already dark bg; reinforce inner card */ [data-theme="dark"] .principle{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)} [data-theme="dark"] .principle:hover{border-color:rgba(255,255,255,.2)} /* Before / After */ [data-theme="dark"] .ba{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .ba-col.before{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .ba-col.before .row{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .ba-col.before .stamp{background:rgba(255,154,95,.2);color:var(--orange)} /* FAQ */ [data-theme="dark"] .faq{background:var(--paper)} [data-theme="dark"] .faq-item{border-color:var(--ink)} [data-theme="dark"] .faq-item:last-child{border-color:var(--ink)} [data-theme="dark"] .faq-item .q .toggle{border-color:var(--ink)} [data-theme="dark"] .faq-item.open .q .toggle{background:var(--ink);color:var(--paper)} /* Loop diagram dashed rings */ [data-theme="dark"] .loop-spin{border-color:rgba(236,234,216,.18)} [data-theme="dark"] .loop-spin.two{border-color:rgba(121,208,137,.22)} /* Stage-eye num pill */ [data-theme="dark"] .stage-eye .num{border-color:var(--line)} /* ═══════════════════════════════════════════════════════════ Features page ═══════════════════════════════════════════════════════════ */ /* Feature nav — sticky bar with hardcoded rgba bg */ [data-theme="dark"] .feat-nav{background-color:rgba(23,23,26,.88)!important;border-color:var(--line)} [data-theme="dark"] .feat-nav .count b{color:var(--ink)} /* Tag cloud pills */ [data-theme="dark"] .ftag{background:var(--paper);border-color:var(--ink);color:var(--ink)} [data-theme="dark"] .ftag.lav{background:var(--lav);color:var(--paper)} [data-theme="dark"] .tagcloud{border-color:var(--line)} /* Hero side pills */ [data-theme="dark"] .hero-side .pill-row a{background:var(--sheet);border-color:var(--line);color:var(--ink)} [data-theme="dark"] .hero-side .pill-row a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* Tiles — base tile */ [data-theme="dark"] .tile{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .tile:hover{box-shadow:0 28px 60px rgba(0,0,0,.4);border-color:var(--ink)} [data-theme="dark"] .tile .eyebrow .ico{background:var(--paper)} /* Tile inner components */ [data-theme="dark"] .mini-list .ml{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .code{background:var(--paper);border-color:var(--line)} /* Dial track — hardcoded rgba(0,0,0,.08) */ [data-theme="dark"] .dial-track{stroke:rgba(236,234,216,.12)} /* Spark bar */ [data-theme="dark"] .spark-bar .b{background:rgba(255,125,47,.2)} /* Integrations */ [data-theme="dark"] .integ{background:var(--paper)} [data-theme="dark"] .integ-chip{background:var(--sheet);border-color:var(--line);color:var(--ink)} [data-theme="dark"] .integ-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* Comparison table */ [data-theme="dark"] .comp{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .comp-table{background:var(--paper);border-color:var(--ink)} [data-theme="dark"] .comp-row{border-color:var(--line)} [data-theme="dark"] .comp-row > div:not(:last-child){border-right-color:var(--line)} [data-theme="dark"] .comp-row > div.feat-name{color:var(--ink)} [data-theme="dark"] .comp-row > div.partial{color:#e0951a} [data-theme="dark"] .comp-row > div.partial::before{color:#e0951a} /* Responsive: mobile comp table feat-name */ @media (max-width:900px){ [data-theme="dark"] .comp-row > div.feat-name{background:var(--ink);color:var(--paper)} } /* ═══════════════════════════════════════════════════════════ Pegis page ═══════════════════════════════════════════════════════════ */ /* pegi-sec.orange: dark-mode --orange flips to #ff9a5f (bright/light). White text on #ff9a5f ≈ 2:1 contrast — fails AA for any text size. Force deep burnt-orange bg so cream text has ≥ 7:1 contrast. */ [data-theme="dark"] .pegi-sec.orange{background:#3d1500;color:#f8f6ef} /* em accent inside orange h2 is var(--ink) = cream — stays readable on dark bg ✓ */ /* pegi-sec.green: dark-mode --green flips to #79d089 (light mint-green). White text on #79d089 ≈ 1.8:1 — completely invisible. Force deep forest-green bg. */ [data-theme="dark"] .pegi-sec.green{background:#0c1e10;color:#f8f6ef} /* em accent inside green h2 is var(--mint) = #bff4c7 — readable on dark bg ✓ */ /* Roster cards c1 (orange) and c2 (green) share the same bg-flip problem */ [data-theme="dark"] .rcard.c1{background:#3d1500;border-color:#7a3200;color:#f8f6ef} [data-theme="dark"] .rcard.c1::before{background:#7a3200} [data-theme="dark"] .rcard.c2{background:#0c1e10;border-color:#1f4a28;color:#f8f6ef} [data-theme="dark"] .rcard.c2::before{background:#1a3d22} [data-theme="dark"] .rcard.c1 .stat, [data-theme="dark"] .rcard.c2 .stat{background:rgba(255,255,255,.1)} [data-theme="dark"] .rcard.c1 .lv, [data-theme="dark"] .rcard.c2 .lv{background:rgba(255,255,255,.12)} /* Stage (hero character viewer) */ [data-theme="dark"] .stage{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .stage::before{background-image:linear-gradient(rgba(236,234,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(236,234,216,.06) 1px,transparent 1px)} [data-theme="dark"] .stage::after{background:rgba(236,234,216,.12)} [data-theme="dark"] .stage-controls button{border-color:var(--ink);background:var(--paper);color:var(--ink)} [data-theme="dark"] .stage-controls button.on{background:var(--ink);color:var(--paper)} [data-theme="dark"] .stage-controls button:hover{background:var(--ink);color:var(--paper)} /* Roster strip */ [data-theme="dark"] .roster{background:var(--paper)} /* Roster cards */ [data-theme="dark"] .rcard{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .rcard::before{background:var(--ink)} [data-theme="dark"] .rcard.c3{color:var(--paper)} [data-theme="dark"] .rcard.c3 .lv{background:rgba(236,234,216,.1)} [data-theme="dark"] .rcard.c3 .stat{background:rgba(236,234,216,.08)} /* Pegi profile sections — lav bg voice bubbles */ [data-theme="dark"] .voice-bubbles .b.pegi{background:rgba(255,255,255,.12);color:var(--ink)} /* Workflow blocks (player section on lav bg): The pegi-panel has a dark overlay (rgba 14,14,12,.5) on lavender. White-alpha rows create visible contrast against that dark panel. */ [data-theme="dark"] .pegi-sec.lav .workflow .wb{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)} [data-theme="dark"] .pegi-sec.lav .workflow .wb b{color:var(--ink)} [data-theme="dark"] .pegi-sec.lav .workflow .wb .ico{background:rgba(255,255,255,.2);color:var(--mint)} /* Stat cards inside lavender pegi-panel — same fix: use white-alpha */ [data-theme="dark"] .pegi-sec.lav .pegi-panel .pstat{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)} /* Build your own Pegi */ [data-theme="dark"] .build{background:var(--paper)} [data-theme="dark"] .build .label{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .build .pegi-list .p{background:var(--sheet);border-color:var(--line);color:var(--ink)} [data-theme="dark"] .build .pegi-list .p:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} [data-theme="dark"] .build-mock{background:var(--ink);box-shadow:0 32px 80px rgba(0,0,0,.5)} /* ═══════════════════════════════════════════════════════════ Pricing page ═══════════════════════════════════════════════════════════ */ /* Tier cards */ [data-theme="dark"] .tier{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .tier::before{background:var(--ink)} [data-theme="dark"] .tier .cta{background:var(--ink);color:var(--paper)} [data-theme="dark"] .tier .cta:hover{background:var(--orange)} [data-theme="dark"] .tier.featured .cta{background:var(--paper);color:var(--ink)} [data-theme="dark"] .tier.featured .cta:hover{background:var(--orange);color:#fff} [data-theme="dark"] .tier .feature-list{border-top-color:var(--line)} [data-theme="dark"] .tier .quota-bar span{background:rgba(236,234,216,.1)} /* Calculator */ [data-theme="dark"] .calc{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .calc-controls{background:var(--paper);border-color:var(--ink)} /* BYO Keys / Notes section */ [data-theme="dark"] .notes{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .note{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .note:hover{box-shadow:0 20px 40px rgba(0,0,0,.3)} /* Pricing FAQ */ [data-theme="dark"] .faq-item{border-color:var(--ink)} /* ═══════════════════════════════════════════════════════════ Getting Started page ═══════════════════════════════════════════════════════════ */ /* Time pill */ [data-theme="dark"] .time-pill{background:var(--ink);box-shadow:8px 8px 0 var(--orange)} /* Hero bottom */ [data-theme="dark"] .hero-bot{border-top-color:var(--line)} /* Prereq strip — already dark; fine */ /* Docs layout */ [data-theme="dark"] .docs{background:var(--paper)} /* TOC rail */ [data-theme="dark"] .toc a:hover{background:var(--sheet)} [data-theme="dark"] .toc a.active{background:var(--ink);color:var(--paper)} [data-theme="dark"] .toc-foot{border-top-color:var(--line)} /* Terminal mock — already dark bg with hardcoded dark colors; fine */ /* Pkg tabs */ [data-theme="dark"] .pkg-tab{border-color:var(--line);background:var(--sheet);color:var(--ink)} [data-theme="dark"] .pkg-tab:hover{border-color:var(--ink)} [data-theme="dark"] .pkg-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* Callouts — hardcoded backgrounds */ [data-theme="dark"] .callout{background:var(--sheet);border-color:var(--line);border-left-color:var(--orange)} [data-theme="dark"] .callout.warn{background:rgba(224,149,26,.1);border-left-color:#e0951a} [data-theme="dark"] .callout.tip{background:rgba(121,208,137,.1);border-left-color:var(--green)} [data-theme="dark"] .callout .body code{background:rgba(236,234,216,.08);color:var(--ink)} /* Cockpit poster */ [data-theme="dark"] .cockpit-poster{background:var(--sheet);border-color:var(--ink);box-shadow:12px 12px 0 var(--orange)} [data-theme="dark"] .cp-bar{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cp-side{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cp-side .ch.on{background:var(--ink);color:var(--paper)} [data-theme="dark"] .cp-main{background:var(--sheet)} [data-theme="dark"] .cp-msg{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .cp-msg .body code{background:rgba(236,234,216,.08)} /* Troubleshooting */ [data-theme="dark"] .trouble{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .ts-item{border-color:var(--line)} [data-theme="dark"] .ts-item:last-child{border-color:var(--line)} [data-theme="dark"] .ts-q .tag{background:rgba(255,125,47,.12)} [data-theme="dark"] .ts-a-inner code{background:rgba(236,234,216,.08);color:var(--ink)} /* Next steps cards — colored bg cards: .nx.g uses --green=#79d089 (light) + white → ~1.8:1 contrast (fail AA) .nx.l uses --lav=#d4a8e8 (light) + --ink=cream → ~1.2:1 (completely invisible) Force dark saturated bgs so white text has ≥7:1 contrast. */ [data-theme="dark"] .nx.g{background:#1a3d22;color:#f8f6ef} [data-theme="dark"] .nx.l{background:#2a1a3d;color:#f8f6ef} /* Tape / callout decorative */ [data-theme="dark"] .tape{box-shadow:3px 3px 0 var(--ink)} /* ═══════════════════════════════════════════════════════════ Changelog page ═══════════════════════════════════════════════════════════ */ /* Filter bar — hardcoded rgba bg */ [data-theme="dark"] .filters{background-color:rgba(23,23,26,.88)!important;border-color:var(--line)} [data-theme="dark"] .filter-pills button{background:var(--paper);border-color:var(--line);color:var(--ink)} [data-theme="dark"] .filter-pills button:hover{border-color:var(--ink)} [data-theme="dark"] .filter-pills button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} [data-theme="dark"] .feed-search{background:var(--paper);border-color:var(--line)} /* Timeline spine */ [data-theme="dark"] .timeline-wrap::before{background:var(--ink);background-image:linear-gradient(var(--ink) 50%,transparent 50%)} /* Release dot */ [data-theme="dark"] .release-dot{background:var(--paper);border-color:var(--ink)} [data-theme="dark"] .release.major .release-dot{background:var(--orange);border-color:var(--orange)} /* Release body */ [data-theme="dark"] .release-body{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .release:hover .release-body{border-color:var(--ink);box-shadow:0 16px 36px rgba(0,0,0,.3)} /* Release items */ [data-theme="dark"] .release-item{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .release-item:hover{background:var(--soft)} /* Release tags — hardcoded rgba backgrounds */ [data-theme="dark"] .rtag.feature{background:rgba(255,125,47,.16);color:var(--orange-deep)} [data-theme="dark"] .rtag.fix{background:rgba(121,208,137,.14);color:var(--green)} [data-theme="dark"] .rtag.improvement{background:rgba(138,58,255,.16);color:#cba8ff} [data-theme="dark"] .rtag.breaking{background:rgba(177,69,69,.16);color:#e87070} /* Release stamp */ [data-theme="dark"] .release-stamp.patch{background:var(--soft);color:var(--muted)} /* Roadmap section */ [data-theme="dark"] .roadmap{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .roadmap h2 em{color:var(--orange)} [data-theme="dark"] .roadmap .rcard{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .roadmap .rcard:hover{border-color:var(--ink)} /* Subscribe strip */ [data-theme="dark"] .sub{background:var(--paper)} [data-theme="dark"] .sub-form{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .sub-form input{color:var(--ink)} [data-theme="dark"] .sub-form button{background:var(--ink);color:var(--paper)} [data-theme="dark"] .sub-form button:hover{background:var(--orange)} /* ═══════════════════════════════════════════════════════════ Contact page ═══════════════════════════════════════════════════════════ */ /* Triage card */ [data-theme="dark"] .triage{background:var(--sheet);border-color:var(--ink);box-shadow:8px 8px 0 var(--ink)} [data-theme="dark"] .tri-row{border-color:var(--line)} [data-theme="dark"] .tri-foot{border-color:var(--line)} /* Intent tiles */ [data-theme="dark"] .intents{background:var(--paper)} [data-theme="dark"] .int{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .int:hover{box-shadow:8px 8px 0 var(--ink)} [data-theme="dark"] .int .tag{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .int .pick{background:var(--paper);border-color:var(--ink)} /* Brief form */ [data-theme="dark"] .brief-wrap{background:var(--paper)} [data-theme="dark"] .brief{background:var(--sheet);border-color:var(--ink);box-shadow:12px 12px 0 var(--ink)} [data-theme="dark"] .brief-top{border-color:var(--line)} [data-theme="dark"] .b-field input, [data-theme="dark"] .b-field select, [data-theme="dark"] .b-field textarea{background:var(--paper);border-color:var(--line);color:var(--ink)} [data-theme="dark"] .b-field input:focus, [data-theme="dark"] .b-field select:focus, [data-theme="dark"] .b-field textarea:focus{border-color:var(--orange);background:var(--soft)} [data-theme="dark"] .b-title{border-bottom-color:var(--ink)} [data-theme="dark"] .b-radio label{border-color:var(--line);background:var(--paper);color:var(--ink)} [data-theme="dark"] .b-radio label:hover{border-color:var(--ink)} [data-theme="dark"] .b-radio label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)} [data-theme="dark"] .b-radio label .dot{background:var(--line)} [data-theme="dark"] .b-radio label:has(input:checked) .dot{background:var(--mint)} [data-theme="dark"] .b-submit{border-top-color:var(--line)} [data-theme="dark"] .b-send{background:var(--ink);color:var(--paper);box-shadow:0 18px 36px rgba(0,0,0,.4)} [data-theme="dark"] .b-send:hover{background:var(--orange);box-shadow:0 22px 44px rgba(255,125,47,.32)} [data-theme="dark"] .sent-state .check{box-shadow:6px 6px 0 var(--ink)} [data-theme="dark"] .sent-state .tk{background:var(--paper);border-color:var(--line)} /* Workflow panel in contact sidebar */ [data-theme="dark"] .workflow{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .workflow .h{border-color:var(--line)} [data-theme="dark"] .wf-step{border-color:var(--line)} [data-theme="dark"] .wf-step .t{color:var(--ink)} /* Locations */ [data-theme="dark"] .locs{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .loc{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .loc::before{background:var(--ink)} [data-theme="dark"] .loc:hover{border-color:var(--ink);box-shadow:0 22px 50px rgba(0,0,0,.3)} [data-theme="dark"] .loc.featured{background:var(--ink);color:var(--paper)} /* FAQ (contact variant) */ [data-theme="dark"] .faq-item{border-color:var(--line)} [data-theme="dark"] .faq-item:last-child{border-color:var(--line)} [data-theme="dark"] .faq-q{color:var(--ink)} /* ═══════════════════════════════════════════════════════════ 404 page ═══════════════════════════════════════════════════════════ */ /* Grain overlay — invert blend mode for dark bg */ [data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.08} /* Hero 404 bg glow */ [data-theme="dark"] .hero404-bg::before{background:radial-gradient(60% 50% at 50% 70%,rgba(255,125,47,.12),transparent 65%)} /* Scribble annotations */ [data-theme="dark"] .scrib{color:var(--muted)} [data-theme="dark"] .scrib.s1{color:var(--green)} /* Zero circle */ [data-theme="dark"] .zero{box-shadow:8px 8px 0 var(--ink),inset 0 0 0 8px var(--ink)} [data-theme="dark"] .zero::after{background:var(--mint);color:var(--paper);box-shadow:3px 3px 0 var(--ink)} /* Route inspector */ [data-theme="dark"] .inspect{background:var(--ink);border-color:var(--ink)} [data-theme="dark"] .teleport{background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--mint)} [data-theme="dark"] .teleport input{color:var(--ink)} [data-theme="dark"] .teleport .submit{background:var(--ink);color:var(--paper)} [data-theme="dark"] .teleport .submit:hover{background:var(--orange)} /* Popular poster grid */ [data-theme="dark"] .popular{background:var(--paper)} [data-theme="dark"] .pop.s3{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .pop.s5{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .pop.s2{color:var(--paper)} /* Fresh ink ticker */ [data-theme="dark"] .ink-ticker{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .ink-row:hover{background:linear-gradient(90deg,var(--soft),transparent)} [data-theme="dark"] .ink-row .t{color:var(--ink)} /* Report form — already dark bg; fine. Reinforce input fields */ [data-theme="dark"] .report{background:var(--paper)} [data-theme="dark"] .report-inner{background:var(--ink);box-shadow:0 40px 80px rgba(0,0,0,.4)} /* ═══════════════════════════════════════════════════════════ Shared pages (pages.css) — legal, CTA, page-hero ═══════════════════════════════════════════════════════════ */ /* Page hero grid: hardcoded dark rgba lines invisible on dark bg */ [data-theme="dark"] .page-hero-grid{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)} /* Legal hero grid: same fix */ [data-theme="dark"] .legal-hero-grid{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)} /* TLDR strip: --mint bg (#bff4c7) + --green text (#79d089) → ~1.8:1 — fix to dark bg */ [data-theme="dark"] .tldr{background:var(--soft);color:var(--ink);border-color:var(--line)} [data-theme="dark"] .tldr-lab{background:var(--ink);color:var(--paper)} [data-theme="dark"] .tldr-text em{background:rgba(191,244,199,.1)} /* Legal TOC active state */ [data-theme="dark"] .legal-toc a.active{background:var(--ink);color:var(--paper)} /* Legal content callout note */ [data-theme="dark"] .legal-content .note{background:var(--soft);border-left-color:var(--orange)} /* ═══════════════════════════════════════════════════════════ About page ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] .beliefs{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .belief-item{border-color:var(--line)} [data-theme="dark"] .belief-item .n{color:var(--orange)} [data-theme="dark"] .timeline-wrap::before{background:var(--line)} [data-theme="dark"] .timeline-row{border-color:var(--line)} [data-theme="dark"] .timeline-row .dot{background:var(--paper);border-color:var(--ink)} [data-theme="dark"] .timeline-row.major .dot{background:var(--orange);border-color:var(--orange)} [data-theme="dark"] .team-grid .pers{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .timeline-event .t em{color:#1a3d22} [data-theme="dark"] .pers .av{background:#0e0e0c;color:#f8f6ef} /* ═══════════════════════════════════════════════════════════ Careers page ═══════════════════════════════════════════════════════════ */ /* Stat row items */ [data-theme="dark"] .stat-row .item{background:var(--sheet);border-color:var(--line)} /* Perks section */ [data-theme="dark"] .perks{background:var(--sheet)} [data-theme="dark"] .perk{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .perk:hover{border-color:var(--ink)} [data-theme="dark"] .perk.c5 .ico{background:rgba(212,168,232,.15);color:var(--lav)} /* Roles section */ [data-theme="dark"] .roles{background:var(--paper)} [data-theme="dark"] .role-tab{background:var(--sheet);border-color:var(--line);color:var(--ink-2)} [data-theme="dark"] .role-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} [data-theme="dark"] .role{border-color:var(--line)} [data-theme="dark"] .role:hover{background:linear-gradient(90deg,rgba(255,154,95,.06),transparent 60%)} /* Process section — var(--ink) bg becomes cream; fix to dark */ [data-theme="dark"] .process{background:var(--soft);color:var(--ink)} [data-theme="dark"] .process-head p{color:var(--ink-2)} [data-theme="dark"] .step{background:rgba(255,255,255,.04);border-color:var(--line)} [data-theme="dark"] .step p{color:var(--muted)} /* ═══════════════════════════════════════════════════════════ Press page ═══════════════════════════════════════════════════════════ */ /* Quick links */ [data-theme="dark"] .qlink{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .qlink .ico{background:var(--soft);color:var(--mint)} /* Logo cards */ [data-theme="dark"] .logos{background:var(--sheet)} [data-theme="dark"] .logo-card{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .logo-card:hover{box-shadow:0 28px 56px rgba(0,0,0,.4)} /* dark variant card in dark mode: flip back to paper-on-ink readable pair */ [data-theme="dark"] .logo-card.dark{background:var(--ink);color:var(--paper)} [data-theme="dark"] .logo-card.dark .dl-mini{color:var(--paper)} /* Mascots */ [data-theme="dark"] .mascots{background:var(--paper)} /* c2 green mascot: --green=#79d089 + white text ~2.8:1 fail → darker green */ [data-theme="dark"] .mascot.c2{background:#1a3d22;color:#f8f6ef} /* c3 lav mascot: --lav + --ink(cream) text ~1.3:1 → dark purple */ [data-theme="dark"] .mascot.c3{background:#2a1a3d;color:#f8f6ef} /* Press coverage list */ [data-theme="dark"] .press-row{background:var(--sheet)} [data-theme="dark"] .press-item{border-color:var(--line)} /* Quote cards: ink bg becomes cream in dark mode — fix to keep them dark */ [data-theme="dark"] .quote{background:var(--soft);color:var(--ink)} [data-theme="dark"] .quote .mark{color:var(--mint)} /* ═══════════════════════════════════════════════════════════ Security page ═══════════════════════════════════════════════════════════ */ /* Cert cards */ [data-theme="dark"] .cert{background:var(--sheet);border-color:var(--ink);box-shadow:6px 6px 0 var(--ink)} [data-theme="dark"] .cert:hover{box-shadow:8px 8px 0 var(--ink)} /* Layers section */ [data-theme="dark"] .layers{background:var(--sheet)} [data-theme="dark"] .layer{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .layer:hover{border-color:var(--ink);box-shadow:0 28px 56px rgba(0,0,0,.4)} /* c4 layer ico: --mint bg + --green(#79d089) text on mint ~1.8:1 fail → fix */ [data-theme="dark"] .layer.c4 .lico{background:rgba(191,244,199,.12);color:var(--mint)} /* c5 layer ico: --lav bg + --ink(cream) text ~1.4:1 fail → fix */ [data-theme="dark"] .layer.c5 .lico{background:rgba(212,168,232,.15);color:var(--lav)} [data-theme="dark"] .bounty{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .bounty p{color:rgba(255,255,255,.72)} [data-theme="dark"] .bounty h2 em{color:var(--mint)} [data-theme="dark"] .bounty .pill{background:rgba(191,244,199,.14);color:var(--mint)} /* ═══════════════════════════════════════════════════════════ Recipes page ═══════════════════════════════════════════════════════════ */ /* Filter bar: hardcoded off-white sticky bg */ [data-theme="dark"] .filter-bar{background:rgba(23,23,26,.92)!important} [data-theme="dark"] .filt{background:var(--sheet);border-color:var(--line);color:var(--ink-2)} [data-theme="dark"] .filt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} [data-theme="dark"] .filter-search{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .filter-search input{color:var(--ink)} /* Recipe cards */ [data-theme="dark"] .recipe{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .recipe:hover{border-color:var(--ink);box-shadow:0 24px 48px rgba(0,0,0,.35)} [data-theme="dark"] .recipe .tag{background:var(--soft);border-color:var(--line)} [data-theme="dark"] .recipe .diff{background:var(--soft)} /* ═══════════════════════════════════════════════════════════ API reference page ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] .api-side{border-color:var(--line)} [data-theme="dark"] .api-side a:hover{background:var(--soft)} [data-theme="dark"] .sdks{background:var(--sheet)} [data-theme="dark"] .sdk{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .sdk:hover{border-color:var(--ink)} [data-theme="dark"] .api-section{border-color:var(--line)} [data-theme="dark"] .api-card{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .api-card:hover{border-color:var(--ink)} [data-theme="dark"] .api-side a .m.del{color:#ff8d6b;background:rgba(255,141,107,.16)} [data-theme="dark"] .api-code{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .api-code .tabs{border-bottom-color:rgba(255,255,255,.14)} [data-theme="dark"] .api-code .tab{color:rgba(248,246,239,.58)} [data-theme="dark"] .api-code .tab.on{color:var(--mint);border-bottom-color:var(--mint)} [data-theme="dark"] .api-code .tab:hover{color:#f8f6ef} [data-theme="dark"] .api-code .k{color:#ffb38a} [data-theme="dark"] .api-code .s{color:var(--mint)} [data-theme="dark"] .api-code .c{color:rgba(248,246,239,.62)} [data-theme="dark"] .api-code .n{color:#ffd0b7} [data-theme="dark"] .code-block{background:var(--soft)} [data-theme="dark"] .resp-tabs .tab{background:var(--sheet);border-color:var(--line);color:var(--ink-2)} [data-theme="dark"] .resp-tabs .tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ═══════════════════════════════════════════════════════════ Status page ═══════════════════════════════════════════════════════════ */ /* Status summary card: --green bg → #79d089 in dark + white text ~2.8:1 fail */ [data-theme="dark"] .status-summary{background:#1a3d22} /* Subscribe strip */ [data-theme="dark"] .subscribe-strip{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .subscribe-form{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .subscribe-form input{color:var(--ink)} [data-theme="dark"] .subscribe-channels a{background:var(--paper);border-color:var(--line);color:var(--ink-2)} /* Component status rows */ [data-theme="dark"] .comp-group{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .comp-row{border-color:var(--line)} [data-theme="dark"] .comp-row:hover{background:var(--soft)} /* Uptime bars */ [data-theme="dark"] .uptime-bar .seg.op{background:var(--green)} [data-theme="dark"] .uptime-bar .seg.deg{background:var(--orange)} [data-theme="dark"] .uptime-bar .seg.out{background:#e87070} /* Incident list */ [data-theme="dark"] .incident{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .incident:hover{border-color:var(--ink)} /* ═══════════════════════════════════════════════════════════ Footer — stays dark in dark mode (inverts the token swap) ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] .footer{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .footer-grid{border-bottom-color:rgba(255,255,255,.08)} [data-theme="dark"] .footer-col h5{color:rgba(255,255,255,.58)} [data-theme="dark"] .footer-col a{color:rgba(255,255,255,.78)} [data-theme="dark"] .footer-col a:hover{color:var(--orange)} [data-theme="dark"] .footer-brand p{color:rgba(255,255,255,.6)} [data-theme="dark"] .footer-brand .fb-logo path{fill:#f8f6ef} [data-theme="dark"] .footer-socials a{border-color:rgba(255,255,255,.16);color:#f8f6ef} [data-theme="dark"] .footer-socials a:hover{background:var(--orange);border-color:var(--orange)} [data-theme="dark"] .footer-mark path{stroke:rgba(248,246,239,.2)!important;fill:transparent!important} [data-theme="dark"] .footer-bot{color:rgba(255,255,255,.45)} /* ═══════════════════════════════════════════════════════════ Shared cross-page patterns (CTA sections, buttons, etc.) ═══════════════════════════════════════════════════════════ */ /* ─── "Dark sections" — use --ink bg in light mode, must stay dark in dark mode ─── */ /* CTA (home, how-it-works, features, pegis) */ [data-theme="dark"] .cta{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .cta p{color:rgba(255,255,255,.65)} [data-theme="dark"] .cta h2{color:#f8f6ef} [data-theme="dark"] .btn-cta-primary{background:#f8f6ef;color:#0e0e0c} [data-theme="dark"] .btn-cta-primary:hover{background:var(--orange);color:#fff} [data-theme="dark"] .btn-cta-ghost{border-color:rgba(255,255,255,.25);color:#f8f6ef} [data-theme="dark"] .btn-cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)} /* CTA (pricing) */ [data-theme="dark"] .cta-section{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .cta-section p{color:rgba(255,255,255,.65)} /* CTA (getting-started) */ [data-theme="dark"] .gs-cta{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .gs-cta p{color:rgba(255,255,255,.65)} [data-theme="dark"] .btn-cta-p{background:#f8f6ef;color:#0e0e0c} [data-theme="dark"] .btn-cta-p:hover{background:var(--orange);color:#fff} /* Rail wrap (home) */ [data-theme="dark"] .rail-wrap{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .rail-wrap h2{color:#f8f6ef} [data-theme="dark"] .rail-wrap p{color:rgba(255,255,255,.65)} [data-theme="dark"] .rail-wrap .eyebrow{color:rgba(255,255,255,.5)} /* Principles section (how-it-works) */ [data-theme="dark"] .principles{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .principles h2{color:#f8f6ef} [data-theme="dark"] .principles p{color:rgba(255,255,255,.65)} /* Spotlight section (features) */ [data-theme="dark"] .spotlight{background:#0e0e0c;color:#f8f6ef;border-color:#1a1a1a} [data-theme="dark"] .spotlight h2{color:#f8f6ef} [data-theme="dark"] .spotlight p{color:rgba(255,255,255,.65)} /* Pegi ink sections (pegis) */ [data-theme="dark"] .pegi-sec.ink{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .rcard.c4{background:#0e0e0c;color:#f8f6ef;border-color:#2b2b27} [data-theme="dark"] .rcard.c4 .pegi-skill{background:rgba(255,255,255,.08)} /* Pegi card c4 (home) */ [data-theme="dark"] .pegi-card.c4{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .pegi-card.c4 .pegi-skill{background:rgba(255,255,255,.08)} /* Prereq strip (getting-started) */ [data-theme="dark"] .prereq{background:#0e0e0c;color:#f8f6ef} /* Direct section (contact) */ [data-theme="dark"] .direct{background:#0e0e0c;color:#f8f6ef} /* Route inspector (404) */ [data-theme="dark"] .inspect{background:#0e0e0c;color:#f8f6ef;border-color:#1a1a1a} [data-theme="dark"] .pop.tall{background:#0e0e0c;color:#f8f6ef} /* Subscribe (changelog) */ [data-theme="dark"] .sub-section{background:#0e0e0c;color:#f8f6ef} /* Memory graph (how-it-works) */ [data-theme="dark"] .memory-graph{background:#0e0e0c;color:#f8f6ef} /* Before/After — after column (how-it-works) */ [data-theme="dark"] .ba-col.after{background:#0e0e0c;color:#f8f6ef;border-color:#1a1a1a} /* Dark tiles (features) */ [data-theme="dark"] .tile.ink{background:#0e0e0c;color:#f8f6ef;border-color:#2b2b27} /* Build-mock (pegis) */ [data-theme="dark"] .build-mock{background:#0e0e0c;color:#f8f6ef} /* ─── Dark buttons/pills that use --ink bg ─── */ [data-theme="dark"] .btn-hero{background:#f8f6ef;color:#0e0e0c} [data-theme="dark"] .btn-hero:hover{background:var(--orange);color:#fff} [data-theme="dark"] .faq-item.open .q .toggle{background:#f8f6ef;color:#0e0e0c} [data-theme="dark"] .loc.featured{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .loc::before{background:#0e0e0c} [data-theme="dark"] .nx.k{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .int.on{background:#0e0e0c;color:#f8f6ef;border-color:#2b2b27} [data-theme="dark"] .int .ico{background:#0e0e0c} [data-theme="dark"] .note .ico{background:#0e0e0c} [data-theme="dark"] .wf-step .ic.ink{background:#0e0e0c} [data-theme="dark"] .ship-mock .stop{background:#0e0e0c;color:#f8f6ef} /* Workflow section (Home) */ [data-theme="dark"] .wf-pipeline{border-color:var(--line);box-shadow:0 28px 60px rgba(0,0,0,.4)} [data-theme="dark"] .wf-pipeline:hover{box-shadow:0 32px 80px rgba(0,0,0,.5)} [data-theme="dark"] .wf-bar{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .wf-ico{background:var(--paper);border-color:var(--line)} [data-theme="dark"] .wf-feat{background:var(--sheet);border-color:var(--line)} [data-theme="dark"] .wf-feat:hover{border-color:var(--ink)} /* Tile pipeline (Features workflow visual) */ [data-theme="dark"] .tile-pipeline{background:var(--paper);border-color:var(--line)} /* Hero card (Changelog hero) */ [data-theme="dark"] .hero-card{background:var(--sheet);border-color:var(--ink)} [data-theme="dark"] .hero-card .row{background:var(--paper);border-color:var(--line)} /* ═══════════════════════════════════════════════════════════ VISIBILITY + ACCESSIBILITY FIXES Root issues: (1) tier.featured uses color:var(--sheet) from base CSS which equals its dark-mode bg → text invisible. (2) All tile/card borders use --line (#2b2b27 on #17171a bg) ≈ 1.1:1 contrast → cards visually disappear. (3) Missing colorblind-safe cues. ═══════════════════════════════════════════════════════════ */ /* ── PRICING: featured tier — ::before z-index:-1 shows through stacking context, making cream text on orange (~1.7:1 contrast). Override ::before to be subtle cream so card stays dark, and cream text on dark = ~10:1 contrast. ── */ [data-theme="dark"] .tier.featured::before{background:rgba(236,234,216,.12)} [data-theme="dark"] .tier.featured{ color:var(--ink); /* cream on dark bg = high contrast */ border-color:var(--orange);/* orange border distinguishes featured card */ } [data-theme="dark"] .tier.featured .blurb{color:var(--ink-2)} [data-theme="dark"] .tier.featured .unit{color:var(--muted)} [data-theme="dark"] .tier.featured .price-foot{color:var(--muted)} [data-theme="dark"] .tier.featured .price-foot s{color:var(--orange-deep)} [data-theme="dark"] .tier.featured .fl-h{color:var(--muted)} [data-theme="dark"] .tier.featured .fl-row{color:var(--ink-2)} [data-theme="dark"] .tier.featured .fl-row b{color:var(--ink)} [data-theme="dark"] .tier.featured .fl-row i{color:var(--green-2)} [data-theme="dark"] .tier.featured .feature-list{border-top-color:var(--line)} [data-theme="dark"] .tier.featured .quota-bar span{background:rgba(236,234,216,.12)} [data-theme="dark"] .tier.featured .stamp{background:var(--orange);color:#fff} /* CTA on featured card — use orange so it stands out on the dark card */ [data-theme="dark"] .tier.featured .cta{background:var(--orange);color:#fff;border:none} [data-theme="dark"] .tier.featured .cta:hover{background:var(--orange-deep);color:#fff} /* ── FEATURES: tile borders were #2b2b27 on #17171a ≈ 1.1:1 (invisible) ── */ [data-theme="dark"] .tile{border-color:rgba(236,234,216,.22)} [data-theme="dark"] .tile:hover{border-color:rgba(236,234,216,.5);box-shadow:0 28px 60px rgba(0,0,0,.6)} [data-theme="dark"] .tile-foot{border-top-color:rgba(236,234,216,.14)} [data-theme="dark"] .tile-pipeline{border-color:rgba(236,234,216,.14)} /* ── FEATURES: mini-list items & code blocks had transparent/invisible bg ── */ [data-theme="dark"] .mini-list .ml{background:rgba(236,234,216,.06);border-color:rgba(236,234,216,.12)} [data-theme="dark"] .tile.ink .mini-list .ml{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)} [data-theme="dark"] .code{background:rgba(236,234,216,.05);border-color:rgba(236,234,216,.12)} [data-theme="dark"] .tile.ink .code{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)} /* ── FEATURES: comparison table crisper border ── */ [data-theme="dark"] .comp-table{border-color:rgba(236,234,216,.3)} [data-theme="dark"] .comp-row{border-bottom-color:rgba(236,234,216,.1)} [data-theme="dark"] .comp-row > div:not(:last-child){border-right-color:rgba(236,234,216,.08)} /* ── HOW-IT-WORKS: visual mock containers and section borders ── */ [data-theme="dark"] .visual{border-color:rgba(236,234,216,.22);box-shadow:0 28px 60px rgba(0,0,0,.5)} [data-theme="dark"] .stat-strip{border-top-color:rgba(236,234,216,.14);border-bottom-color:rgba(236,234,216,.14)} [data-theme="dark"] .stage-block.alt{border-top-color:rgba(236,234,216,.14);border-bottom-color:rgba(236,234,216,.14)} [data-theme="dark"] .routing .cell{background:rgba(236,234,216,.05);border-color:rgba(236,234,216,.12)} /* cell.on: base CSS sets color:var(--mint) on var(--ink) bg; in dark mode --ink=cream → mint on cream ≈ 1.1:1 → invisible */ [data-theme="dark"] .routing .cell.on{color:var(--paper)} [data-theme="dark"] .routing .cell.on::before{color:var(--paper)} [data-theme="dark"] .routing .label{background:var(--soft)} /* ── HOW-IT-WORKS / FEATURES: workflow pipeline cards ── */ [data-theme="dark"] .wf-pipeline{border-color:rgba(236,234,216,.18)} [data-theme="dark"] .wf-feat{border-color:rgba(236,234,216,.12)} [data-theme="dark"] .wf-feat:hover{border-color:rgba(236,234,216,.4)} [data-theme="dark"] .wf-bar{border-color:rgba(236,234,216,.12)} [data-theme="dark"] .wf-ico{border-color:rgba(236,234,216,.12)} /* ── CHANGELOG: release entries ── */ [data-theme="dark"] .release-body{border-color:rgba(236,234,216,.2)} [data-theme="dark"] .release:hover .release-body{border-color:rgba(236,234,216,.45)} [data-theme="dark"] .release-item{border-color:rgba(236,234,216,.1)} [data-theme="dark"] .release-item:hover{background:var(--soft)} /* ── CONTACT: intent tiles and brief ── */ [data-theme="dark"] .int{border-color:rgba(236,234,216,.2)} [data-theme="dark"] .int:hover{border-color:rgba(236,234,216,.45);box-shadow:8px 8px 0 rgba(236,234,216,.2)} [data-theme="dark"] .brief{border-color:rgba(236,234,216,.25);box-shadow:12px 12px 0 rgba(236,234,216,.12)} [data-theme="dark"] .triage{border-color:rgba(236,234,216,.25);box-shadow:8px 8px 0 rgba(236,234,216,.15)} [data-theme="dark"] .loc{border-color:rgba(236,234,216,.2)} [data-theme="dark"] .loc:hover{border-color:rgba(236,234,216,.4)} /* ── PRICING: other cards ── */ [data-theme="dark"] .tier{border-color:rgba(236,234,216,.25)} [data-theme="dark"] .tier::before{background:rgba(236,234,216,.18)} [data-theme="dark"] .calc-controls{border-color:rgba(236,234,216,.25)} [data-theme="dark"] .note{border-color:rgba(236,234,216,.15)} [data-theme="dark"] .note:hover{box-shadow:0 20px 40px rgba(0,0,0,.5)} [data-theme="dark"] .faq-item{border-top-color:rgba(236,234,216,.2)} [data-theme="dark"] .faq-item:last-child{border-bottom-color:rgba(236,234,216,.2)} /* ── HOME: pain cards and pillar cards ── */ [data-theme="dark"] .pain-card{border-color:rgba(236,234,216,.2)} [data-theme="dark"] .pillar{border-color:rgba(236,234,216,.2)} /* ── COLORBLIND ACCESSIBILITY ── Orange (#ff9a5f) and green (#79d089) can look similar under deuteranopia/protanopia. Use mint for "yes" states so it reads as distinctly blue-green. Symbols (●◐○) already provide shape cues. */ [data-theme="dark"] .comp-row > div.yes{color:var(--mint)} [data-theme="dark"] .comp-row > div.yes::before{color:var(--mint)} /* Status dots alongside orange glow: add text label cues via aria / the existing text labels on .rtag — they already have text. Ensure feature tag green vs orange are distinct enough in dark mode. */ [data-theme="dark"] .ftag.green{color:var(--mint);border-color:var(--green-2)} /* ── FOCUS VISIBILITY for keyboard / switch users ── */ [data-theme="dark"] *:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; } /* ── TEXT SPACING: line-height and readability on small text ── Muted body text inside dark cards often uses --muted (#87837a) which passes 4.5:1 on --sheet. Ensure it also passes on --paper. */ [data-theme="dark"] .tile p,[data-theme="dark"] .rail-card p, [data-theme="dark"] .pillar p,[data-theme="dark"] .note p{ color:var(--ink-2); /* upgrade from muted (#87837a) to ink-2 (#c8c5b4) for better readability */ line-height:1.6; } [data-theme="dark"] .tile p em,[data-theme="dark"] .tile p strong{color:var(--ink)} /* Keep explicit overrides for colored tile variants */ [data-theme="dark"] .tile.ink p,[data-theme="dark"] .tile.orange p, [data-theme="dark"] .tile.green p{color:rgba(255,255,255,.82)} [data-theme="dark"] .tile.mint{background:#0c1e10;color:#f8f6ef;border-color:#1f4a28} [data-theme="dark"] .tile.mint p{color:rgba(255,255,255,.75)} /* ── MINT-BACKGROUND HIGHLIGHTS: cream text inherits from --ink (#ecead8) ── on mint (#bff4c7) = ~1.3:1 contrast — invisible. Force dark text. */ [data-theme="dark"] h2 u, [data-theme="dark"] h1 u, [data-theme="dark"] .hero-tag u{color:var(--paper)} /* Manifesto hilite words: same mint-bg + cream-text issue */ [data-theme="dark"] .word.hilite.lit{color:var(--paper)} /* ── PEGI CARD SKILL PILLS: fix selector missing [data-theme="dark"] prefix ── */ [data-theme="dark"] .pegi-card.c1 .pegi-skill, [data-theme="dark"] .pegi-card.c2 .pegi-skill{background:rgba(255,255,255,.18)} /* ═══════════════════════════════════════════════════════════ MINT-BG + GREEN-TEXT: both flip to light in dark mode --mint stays #bff4c7, --green flips to #79d089 → ~1.5:1 contrast (invisible). Pattern fix: keep mint bg, force dark forest-green text (#1a3d22) for standalone pill/stamp elements. For full sections use deep dark bg. ═══════════════════════════════════════════════════════════ */ /* CTA stamps across all pages — "Free to download · 5 min setup" etc. */ [data-theme="dark"] .cta-stamp, [data-theme="dark"] .gs-cta-stamp{color:#1a3d22} [data-theme="dark"] .cta-stamp .dot, [data-theme="dark"] .gs-cta-stamp .dot{background:#1a3d22} /* Pricing tier "FREE" stamp */ [data-theme="dark"] .tier .stamp{background:var(--mint);color:#1a3d22} /* Getting-started step-time badge and tape decoration */ [data-theme="dark"] .step-time{background:var(--mint);color:#1a3d22} [data-theme="dark"] .tape{background:var(--mint);color:#1a3d22;box-shadow:3px 3px 0 var(--ink)} /* Getting-started pkg-tab badge (non-active) */ [data-theme="dark"] .pkg-tab .badge{background:rgba(191,244,199,.18);color:var(--mint)} /* Build mock "live" pill (pegis page) */ [data-theme="dark"] .build-mock .mtop .pill{background:rgba(191,244,199,.14);color:var(--mint)} /* Ship mock "shipped" pill and Before/After after-stamp */ [data-theme="dark"] .ship-mock .stop .pill{background:rgba(191,244,199,.14);color:var(--mint)} [data-theme="dark"] .ba-col.after .stamp{background:rgba(191,244,199,.14);color:var(--mint)} /* Verify mock: success verdict box and check/measure chips */ [data-theme="dark"] .verify-mock .verdict{background:rgba(12,30,16,.95);color:var(--mint);border:1px solid rgba(191,244,199,.2)} [data-theme="dark"] .verify-mock .verdict .ico{background:var(--mint);color:#1a3d22} [data-theme="dark"] .verify-mock .row .chk{background:rgba(191,244,199,.14);color:var(--mint)} [data-theme="dark"] .verify-mock .row .meas{background:rgba(191,244,199,.14);color:var(--mint)} /* Stage controls "on" button and roster card offset shadow */ [data-theme="dark"] .stage-controls button.on{background:var(--ink);color:var(--paper)} /* Getting-started callout tip */ [data-theme="dark"] .callout.tip{background:rgba(12,30,16,.5);border-left-color:var(--mint)} /* Any remaining inline mint bg / green text pills not caught above */ [data-theme="dark"] .pegi-sec.green .work-list .wrow .ico, [data-theme="dark"] .pegi-sec.green .work-list .wrow .pill{background:rgba(191,244,199,.18);color:var(--mint)} /* ═══════════════════════════════════════════════════════════ Remaining token-flip readability guards Bright dark-mode accent tokens need darker surfaces when paired with white/cream text, especially inside badges, icons, and cards. ═══════════════════════════════════════════════════════════ */ /* Features + home colored cards */ [data-theme="dark"] .tile.orange, [data-theme="dark"] .pegi-card.c1{ background:#7a3200; border-color:#a94700; color:#f8f6ef; } [data-theme="dark"] .tile.green, [data-theme="dark"] .pegi-card.c2{ background:#0c1e10; border-color:#1f4a28; color:#f8f6ef; } [data-theme="dark"] .tile.orange .eyebrow, [data-theme="dark"] .tile.green .eyebrow, [data-theme="dark"] .tile.orange .tile-foot, [data-theme="dark"] .tile.green .tile-foot{color:rgba(255,255,255,.72)} [data-theme="dark"] .tile.orange .tile-foot b, [data-theme="dark"] .tile.green .tile-foot b{color:#fff} /* Feature tags and compact workflow icons */ [data-theme="dark"] .ftag.orange{background:#7a3200;border-color:#a94700;color:#f8f6ef} [data-theme="dark"] .ftag.orange i{color:#f8f6ef} [data-theme="dark"] .ftag.mint{background:var(--mint);color:#1a3d22;border-color:var(--mint)} [data-theme="dark"] .ftag.mint i{color:#1a3d22} [data-theme="dark"] .wf-node.active .wf-ico, [data-theme="dark"] .tp-node.done > i:first-child, [data-theme="dark"] .ship-mock .file:nth-child(2) .ico{ background:#1a3d22; border-color:#1f4a28; color:#f8f6ef; } /* Contact/status/API badges */ [data-theme="dark"] .tri-row .tg.s, [data-theme="dark"] .api-card-head .m.post, [data-theme="dark"] .ev .tg.monitor{background:#7a3200;color:#f8f6ef} [data-theme="dark"] .tri-row .tg.k, [data-theme="dark"] .api-card-head .m.get, [data-theme="dark"] .ev .tg.resolved{background:#1a3d22;color:#f8f6ef} [data-theme="dark"] .tri-row .tg.p{background:#2a1a3d;color:#f8f6ef} [data-theme="dark"] .tri-row .tg.m, [data-theme="dark"] .ev .tg.maint{background:var(--mint);color:#1a3d22} [data-theme="dark"] .brief-top .badge{background:var(--mint);color:#1a3d22} /* About, careers, press, recipes, and 404 colored utility chips */ [data-theme="dark"] .pers.c2 .av, [data-theme="dark"] .perk.c2 .ico, [data-theme="dark"] .logo-card.orange, [data-theme="dark"] .mascot.c1, [data-theme="dark"] .quote:nth-child(2), [data-theme="dark"] .ink-row .tag.t1{background:#7a3200;color:#f8f6ef} [data-theme="dark"] .pers.c3 .av, [data-theme="dark"] .perk.c4 .ico, [data-theme="dark"] .quote:nth-child(3), [data-theme="dark"] .pop.s4, [data-theme="dark"] .recipe-pegis .pg.green{background:#1a3d22;color:#f8f6ef} [data-theme="dark"] .pers.c4 .av, [data-theme="dark"] .perk.c5 .ico, [data-theme="dark"] .ink-row .tag.t4, [data-theme="dark"] .recipe-pegis .pg.lav{background:#2a1a3d;color:#f8f6ef} [data-theme="dark"] .perk.c3 .ico, [data-theme="dark"] .pop.s1, [data-theme="dark"] .pop.tall .badge, [data-theme="dark"] .ink-row .tag.t3, [data-theme="dark"] .rf-submit, [data-theme="dark"] .rf-success{background:var(--mint);color:#1a3d22} /* Inline accent chips in static HTML need !important to beat inline styles. */ [data-theme="dark"] [style*="background:var(--orange)"]{background:#7a3200!important;color:#f8f6ef!important} [data-theme="dark"] [style*="background:var(--green)"]{background:#1a3d22!important;color:#f8f6ef!important} [data-theme="dark"] [style*="background:var(--mint);color:var(--green)"]{background:var(--mint)!important;color:#1a3d22!important} [data-theme="dark"] [style*="background:var(--lav);color:var(--ink)"]{background:#2a1a3d!important;color:#f8f6ef!important} /* ═══════════════════════════════════════════════════════════ Side-by-side dark-mode cleanup These selectors failed only after comparing full light/dark pages: dark sections inherited light token pairs from page-specific CSS. ═══════════════════════════════════════════════════════════ */ /* Shared CTA stamps can come from pages.css without a pill background. */ [data-theme="dark"] .cta .cta-stamp, [data-theme="dark"] .cta-section .cta-stamp{ background:var(--mint); color:#1a3d22; } [data-theme="dark"] .cta .cta-stamp .dot, [data-theme="dark"] .cta-section .cta-stamp .dot{background:#1a3d22} /* Recipes: featured card and category chips */ [data-theme="dark"] .recipe.feature{ background:var(--sheet); color:var(--ink); border-color:rgba(236,234,216,.22); } [data-theme="dark"] .recipe.feature h3{color:var(--ink)} [data-theme="dark"] .recipe.feature p{color:var(--ink-2)} [data-theme="dark"] .recipe.feature > .right{border-left-color:rgba(236,234,216,.18)} [data-theme="dark"] .recipe.feature .recipe-mock{ background:var(--paper); border-color:rgba(236,234,216,.16); color:var(--ink-2); } [data-theme="dark"] .recipe.feature .recipe-foot{border-color:rgba(236,234,216,.16)} [data-theme="dark"] .recipe.feature .recipe-time{color:var(--ink-2)} [data-theme="dark"] .recipe-cat{background:var(--mint);color:#1a3d22} [data-theme="dark"] .recipe-cat.support{background:var(--lav);color:#2a1a3d} [data-theme="dark"] .recipe-cat.ops{background:#7a3200;color:#f8f6ef} [data-theme="dark"] .recipe-cat.research{background:#1a3d22;color:#f8f6ef} [data-theme="dark"] .recipe-cat.code{background:#0e0e0c;color:var(--mint)} [data-theme="dark"] .recipe-pegis .pg.orange{background:#7a3200;color:#f8f6ef} [data-theme="dark"] .recipe-pegis .pg.ink{background:#0e0e0c;color:#f8f6ef} /* 404: route hero, inspector, poster cards, ticker, and report form */ [data-theme="dark"] .err-stamp{background:#ecead8;color:#1a3d22} [data-theme="dark"] .lost-tag u{color:#1a3d22} [data-theme="dark"] .inspect-term .tr .v{color:var(--ink)} [data-theme="dark"] .inspect h2 u{background:#7a3200;color:#f8f6ef} [data-theme="dark"] .pop.big{background:#7a3200;color:#f8f6ef} [data-theme="dark"] .pop.big .num, [data-theme="dark"] .pop.big p, [data-theme="dark"] .pop.big .arrow{color:rgba(255,255,255,.82);opacity:1} [data-theme="dark"] .ink-row .tag.t2{background:#0e0e0c;color:#f8f6ef} [data-theme="dark"] .report-inner{ background:#0e0e0c; color:#f8f6ef; border:1px solid rgba(236,234,216,.12); } [data-theme="dark"] .report-inner > .col1 p{color:rgba(255,255,255,.72)} [data-theme="dark"] .rf-field label{color:rgba(255,255,255,.58)} [data-theme="dark"] .rf-field input, [data-theme="dark"] .rf-field textarea{ background:#17171a; border-color:rgba(236,234,216,.28); color:#f8f6ef; box-shadow:0 1px 0 rgba(255,255,255,.04) inset; } [data-theme="dark"] .rf-field input:focus, [data-theme="dark"] .rf-field textarea:focus{background:#20201e;border-color:var(--orange)}