/* Shared dark "black marble" overrides for SpinKit's static pages (About, FAQ, Explore, Contact, Privacy, Terms, 404). Activated by data-theme="dark" on , set from localStorage by the inline theme script in each page's head. Mirrors the in-app dark theme: near-black marble base, monochrome silver accents (danger/warning colours are not used here). */ :root[data-theme='dark'] body { background: repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 10px), radial-gradient(circle at 18% 12%, rgba(232, 235, 242, 0.06), transparent 46%), radial-gradient(circle at 84% 90%, rgba(205, 210, 220, 0.05), transparent 46%), #060608; } /* Cyan/teal accent text -> brushed silver */ :root[data-theme='dark'] .tagline, :root[data-theme='dark'] .card .kicker, :root[data-theme='dark'] .guide-search span, :root[data-theme='dark'] a.inline, :root[data-theme='dark'] article a, :root[data-theme='dark'] .prose a { color: #d4d7df; } /* Catch remaining cyan links (kept out of the rule above: this :not() chain uses Selectors-4 complex arguments, and one unsupported selector would drop the whole comma list in an older parser). */ :root[data-theme='dark'] body a:not(.back, .brand, .tools a, nav.topnav a, .card, .shortcut, footer a, .cta) { color: #d4d7df; } /* Cyan hover/active borders -> silver */ :root[data-theme='dark'] .card:hover, :root[data-theme='dark'] .shortcut:hover, :root[data-theme='dark'] .tools a:hover, :root[data-theme='dark'] nav.topnav a:hover, :root[data-theme='dark'] nav.topnav a[aria-current='page'] { border-color: rgba(226, 230, 240, 0.4); background: rgba(255, 255, 255, 0.07); color: #fff; } /* Glass nav pill (explore/about) base tint -> neutral */ :root[data-theme='dark'] nav.topnav { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)), rgba(12, 12, 16, 0.7); } /* Search field underline + the purple shortcut badges -> silver */ :root[data-theme='dark'] .guide-search input { border-bottom-color: rgba(226, 230, 240, 0.36); } :root[data-theme='dark'] .shortcut .badge { background: rgba(255, 255, 255, 0.12); color: #e6e8ee; } /* Contact CTA: cyan/indigo gradient -> brushed silver, keeping the dark text. */ :root[data-theme='dark'] .cta { background: linear-gradient(120deg, #eceef3, #b9bdc8); border-color: rgba(255, 255, 255, 0.25); color: #0a0a0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 36px rgba(210, 214, 224, 0.18); } /* Use the dark "black marble" logo in dark mode (matches the in-app menu). */ :root[data-theme='dark'] .brand img, :root[data-theme='dark'] header img[src$='spinkit-logo.png'] { content: url('/spinkit-logo-dark.png'); }