/* ===================================================================
Deskrune — v2 Dark Mode Parity (universal)
File: /assets/v2-dark-parity-v20260508b.css
Date: 2026-05-08
Cascade slot: load LAST in , after every other stylesheet.
Why this exists
---------------
The site ships with two dark-mode palettes that don't agree:
- legacy navy (style.css #0A1224 / #FF8E78)
- new warm dark (theme.css #0F0D0A / #E8856A)
The legacy palette wins specificity wars but leaves regressions on
v2 surfaces (cards, kbd, code, selection, focus rings, the toggle
button itself). This file is the single, additive contract that
normalizes both. It does NOT redefine brand color tokens.
Brand canon honoured: cream #FAF7F2, ink #1A1814, brand orange
#c9613f / dark-mode coral #E8856A. Same accent. Different ink.
Universal — to apply, add this line to every page AFTER
contrast-fixes and theme files:
=================================================================== */
/* -------------------------------------------------------------------
FIX 01 — Theme toggle visible on EVERY screen size
The legacy rule `@media (max-width: 640px){ .theme-toggle{display:none} }`
in style.css line 3057 hides the toggle on mobile, where most readers
are. Reinstate it. Smaller hit-target on phones is fine; invisible is
not. WCAG 2.5.5 minimum 44x44 met by padding the inline-flex box.
------------------------------------------------------------------- */
@media (max-width: 640px) {
.theme-toggle {
display: inline-flex !important;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
}
/* -------------------------------------------------------------------
FIX 02 — Toggle has a clear, branded focus ring in BOTH modes
The contrast-fixes universal :focus-visible pins outline-color to
#A84F31 / #F4A589, but the 0.5px border + 32px box leaves the offset
too tight. Pull it out 3px so the ring breathes.
------------------------------------------------------------------- */
.theme-toggle:focus-visible {
outline: 2px solid #c9613f !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 5px rgba(201, 97, 63, 0.20) !important;
border-color: #c9613f !important;
}
:root[data-theme="dark"] .theme-toggle:focus-visible {
outline-color: #E8856A !important;
box-shadow: 0 0 0 5px rgba(232, 133, 106, 0.28) !important;
border-color: #E8856A !important;
}
/* -------------------------------------------------------------------
FIX 03 — Code, kbd, mark, samp readable in dark mode
Body code/kbd/mark inherit cream backgrounds (var(--white) → which
in dark resolves to #1A2540 navy-mid). On THAT navy the cream text
passes, but the kbd's white inner highlight is gone and the mark's
yellow tint becomes a dim olive. Pin clean dark-mode treatments.
------------------------------------------------------------------- */
:root[data-theme="dark"] code,
:root[data-theme="dark"] :not(pre) > code,
:root[data-theme="dark"] kbd,
:root[data-theme="dark"] samp {
background: rgba(245, 239, 228, 0.08);
color: #F0E9DC;
border: 1px solid rgba(245, 239, 228, 0.14);
border-radius: 3px;
padding: 1px 5px;
}
:root[data-theme="dark"] kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.88em;
box-shadow: inset 0 -1px 0 rgba(245, 239, 228, 0.18);
}
:root[data-theme="dark"] pre code {
background: rgba(245, 239, 228, 0.04);
border: 0;
color: #E8E0D2;
}
:root[data-theme="dark"] mark {
background: rgba(232, 133, 106, 0.22); /* coral tint, soft */
color: #FFD3C2;
padding: 0 3px;
border-radius: 2px;
}
/* -------------------------------------------------------------------
FIX 04 — Selection color reads in both modes
Browser default selection is system-blue, which on a warm cream or
warm dark page looks foreign. Brand it.
Light: 22% coral mix, dark ink stays.
Dark : 38% coral mix, light ink stays.
------------------------------------------------------------------- */
::selection {
background: rgba(201, 97, 63, 0.22);
color: #1A1814;
}
:root[data-theme="dark"] ::selection {
background: rgba(232, 133, 106, 0.38);
color: #1A1814;
}
/* -------------------------------------------------------------------
FIX 05 — Card surfaces in dark use BORDERS not invisible shadows
Many inline page styles use `box-shadow: 0 4px 16px rgba(20,20,19,0.04)`.
On a #0A1224/#1A2540 dark surface that shadow disappears. The card
loses definition. Replace with a soft border in dark mode for any
commonly-styled card class.
------------------------------------------------------------------- */
:root[data-theme="dark"] .quiz-stage,
:root[data-theme="dark"] .qi-card,
:root[data-theme="dark"] .az-card,
:root[data-theme="dark"] .cc-card,
:root[data-theme="dark"] .tool-card,
:root[data-theme="dark"] .lib-card,
:root[data-theme="dark"] .lead-magnet-card,
:root[data-theme="dark"] .signup-box,
:root[data-theme="dark"] .breaker-card,
:root[data-theme="dark"] .upcoming-card,
:root[data-theme="dark"] .offering-card,
:root[data-theme="dark"] .quote-card,
:root[data-theme="dark"] .audience-card,
:root[data-theme="dark"] .pricing-col,
:root[data-theme="dark"] .product-rich,
:root[data-theme="dark"] .citation,
:root[data-theme="dark"] .quiz-result,
:root[data-theme="dark"] .quiz-option {
box-shadow: none !important;
border: 1px solid rgba(245, 239, 228, 0.12) !important;
}
:root[data-theme="dark"] .quiz-stage:hover,
:root[data-theme="dark"] .qi-card:hover,
:root[data-theme="dark"] .az-card:hover,
:root[data-theme="dark"] .tool-card:hover,
:root[data-theme="dark"] .quiz-option:hover {
border-color: rgba(232, 133, 106, 0.40) !important;
}
/* -------------------------------------------------------------------
FIX 06 — Inline style="color:var(--ink-soft)" doesn't resolve in dark
Some pages (comeback-coach JS) inject elements with literal
`style="color:var(--ink-soft)"`, but that token only exists in
theme.css as `--ds-ink-soft`. We can't rewrite inline styles, but
we can publish a fallback at :root to make `--ink-soft` and friends
resolve to a passing dark value. (Light mode already passes via the
legacy --muted at #6b6960.)
------------------------------------------------------------------- */
:root[data-theme="dark"] {
--ink-soft: #C8C0B0; /* AAA on #0A1224, AA on #1A2540 */
--ink-faint: #9A9285; /* AA on dark bg */
--ink: #F0E9DC; /* mirrors theme.css ink */
--bg: #0F0D0A; /* mirror, prevents bare-fallback bugs */
}
/* -------------------------------------------------------------------
FIX 07 — Theme transition: instant under reduced-motion
theme.css already has a `prefers-reduced-motion` block, but the
View-Transitions path in the upgraded JS uses `document.startViewTransition`
which has its own animation curve. Disable it explicitly.
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
}
/* -------------------------------------------------------------------
FIX 08 — View Transitions cross-fade between modes
Where supported (Chrome 111+, Safari 18+), the JS calls
document.startViewTransition. Tune the default cross-fade so dark
doesn't pop white halfway through the swap.
------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 220ms;
animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: dr-fade-out; }
::view-transition-new(root) { animation-name: dr-fade-in; }
@keyframes dr-fade-out { to { opacity: 0; } }
@keyframes dr-fade-in { from { opacity: 0; } }
/* -------------------------------------------------------------------
FIX 09 — Sticky-buy + sale banner in dark mode
The sticky-buy bar in dark uses #C24A2A from contrast-fixes #12.
But on the dark-bg reading pages, the bar's TOP edge has no
separator, so it visually dissolves into the page. Add a 1px
highlight rule along the top.
------------------------------------------------------------------- */
:root[data-theme="dark"] .deskrune-sticky-buy {
border-top: 1px solid rgba(245, 239, 228, 0.14) !important;
}
:root[data-theme="dark"] .deskrune-sale-banner {
border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}
/* -------------------------------------------------------------------
FIX 10 — Form inputs: dark-mode background + border + caret
Default chrome on dark pages stays light, blowing out the
theme. Pin a single readable input style for both modes. The :focus
ring is already covered by contrast-fixes #7.
------------------------------------------------------------------- */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
background: rgba(245, 239, 228, 0.04);
color: #F0E9DC;
border: 1px solid rgba(245, 239, 228, 0.18);
caret-color: #E8856A;
}
:root[data-theme="dark"] input[type="text"]:hover,
:root[data-theme="dark"] input[type="email"]:hover,
:root[data-theme="dark"] textarea:hover,
:root[data-theme="dark"] select:hover {
border-color: rgba(245, 239, 228, 0.28);
}
/* -------------------------------------------------------------------
FIX 11 — Detail/summary disclosure widgets
Default markers and hover states never get dark-mode
styling. They render as unstyled black triangles on dark bg = lost.
------------------------------------------------------------------- */
:root[data-theme="dark"] details {
border: 1px solid rgba(245, 239, 228, 0.12);
border-radius: 6px;
background: rgba(245, 239, 228, 0.02);
}
:root[data-theme="dark"] details summary {
color: #F0E9DC;
cursor: pointer;
}
:root[data-theme="dark"] details summary:hover {
background: rgba(232, 133, 106, 0.06);
color: #FFD3C2;
}
:root[data-theme="dark"] details[open] summary {
border-bottom: 1px solid rgba(245, 239, 228, 0.10);
}
/* -------------------------------------------------------------------
FIX 12 — Bg-image kit covers sit cleanly on dark
Cover PNGs are warm-cream-on-paper; on a dark page they look like
pasted-in light boxes. Apply a 4% dark wash via filter so the cover
reads as part of the page without distorting brand color. The
's alpha is preserved.
------------------------------------------------------------------- */
:root[data-theme="dark"] .products-rich .img img,
:root[data-theme="dark"] .lib-card .img img,
:root[data-theme="dark"] .flagship-card .cover img,
:root[data-theme="dark"] [data-cover] img {
filter: brightness(0.92) contrast(1.04);
}
/* -------------------------------------------------------------------
FIX 13 — HR + rule lines visible in dark mode
and class .rule render via `border-top: 1px solid #E8E2D7`.
On dark bg that line is invisible. Re-pin to the dark rule token.
------------------------------------------------------------------- */
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .rule,
:root[data-theme="dark"] .divider {
border-top-color: rgba(245, 239, 228, 0.14) !important;
background-color: transparent;
}
/* -------------------------------------------------------------------
FIX 14 — :focus-visible ring on the theme toggle BUTTON itself
When tabbing to the toggle in dark mode, contrast-fixes #7 sets
outline #F4A589 + a 4px halo. But the 0.5px border + 32px box can
make the halo merge into the box. Pin a tighter 2px ring + 3px
offset specifically for this control. Done above as part of FIX 02.
This entry instead handles the toggle's :hover focus ring contrast
when both states stack (touch tap then keyboard re-focus). Use
`:focus-visible:hover` to clamp.
------------------------------------------------------------------- */
.theme-toggle:hover {
border-color: #c9613f !important;
color: #c9613f !important;
}
:root[data-theme="dark"] .theme-toggle:hover {
border-color: #E8856A !important;
color: #E8856A !important;
}
.theme-toggle:focus-visible:hover {
outline-offset: 3px !important;
}
/* -------------------------------------------------------------------
PRINT — both modes resolve to print-safe black-on-white
contrast-fixes already covers print, but theme.css ink-on-dark
would still render dark on dark in some print engines. Force light.
------------------------------------------------------------------- */
@media print {
:root,
:root[data-theme="dark"] {
--ds-bg: #fff;
--ds-ink: #000;
--ds-ink-soft: #222;
--bg: #fff;
--ink: #000;
}
:root[data-theme="dark"] body { background: #fff !important; color: #000 !important; }
}