/* ============================================================================
Shared theme — Signal / CosmoGenesis. Extracted from the main landing
(site/deviant/index.html [data-theme="signal"] block) so every subpage
renders in the identical palette, typography, and weights. Every subpage
should be so the [data-theme="signal"] rules
below apply.
============================================================================ */
/* -------- Signal palette (from the main landing, lines 588-593) -------- */
:root,
[data-theme="signal"] {
--sky-deep: #050505;
--sky-mid: #0a0a0a;
--sky-rim: #161616;
--ink: #f2f2f2;
--ink-bright:#ffffff;
--ink-soft: #d2d2d2;
--muted: #9a9a9a;
--acid: #c6ff00;
--acid-glow: rgba(198, 255, 0, 0.60);
--acid-halo: rgba(198, 255, 0, 0.34);
--acid-dim: rgba(198, 255, 0, 0.16);
--border: rgba(255, 255, 255, 0.06);
--border-strong: rgba(255, 255, 255, 0.12);
--star-faint: rgba(255, 255, 255, 0.22);
--star-mid: rgba(255, 255, 255, 0.38);
--star-bright: rgba(255, 255, 255, 0.58);
}
/* -------- Base -------- */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
color: var(--ink);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Signal enforces sans body on every element — same rule as the main landing.
Individual mono/serif overrides come after via more-specific selectors. */
[data-theme="signal"] * {
font-family: 'DM Sans', system-ui, "Segoe UI", sans-serif !important;
font-style: normal !important;
}
[data-theme="signal"] body {
line-height: 1.62;
}
/* Signal palette ground + subtle glow washes — same as main landing (609-614). */
[data-theme="signal"] body {
background:
radial-gradient(1200px 600px at 50% -10%, rgba(198, 255, 0, 0.06), transparent 60%),
radial-gradient(900px 500px at 100% 120%, rgba(198, 255, 0, 0.04), transparent 60%),
var(--sky-deep);
background-attachment: fixed;
position: relative;
}
/* Uppercase-Mono labels — matches main landing (598-608). */
[data-theme="signal"] .label,
[data-theme="signal"] .pathways-label,
[data-theme="signal"] .kicker,
[data-theme="signal"] .sec-label,
[data-theme="signal"] .breadcrumb,
[data-theme="signal"] .nav,
[data-theme="signal"] .nav a,
[data-theme="signal"] .vs-head,
[data-theme="signal"] .metric-l,
[data-theme="signal"] .stat .lbl,
[data-theme="signal"] .fw-n,
[data-theme="signal"] .rc-label,
[data-theme="signal"] .rate-note,
[data-theme="signal"] .fee-cap,
[data-theme="signal"] .foot-links,
[data-theme="signal"] .foot-note,
[data-theme="signal"] .eyebrow {
font-family: 'DM Mono', ui-monospace, monospace !important;
letter-spacing: 0.12em;
}
[data-theme="signal"] .btn,
[data-theme="signal"] .btn-lg {
font-family: 'DM Mono', ui-monospace, monospace !important;
}
/* Weight rhythm — matches main landing (615-627). */
[data-theme="signal"] .label,
[data-theme="signal"] .pathways-label,
[data-theme="signal"] .sec-label,
[data-theme="signal"] .nav,
[data-theme="signal"] .vs-head,
[data-theme="signal"] .metric-l,
[data-theme="signal"] .opening p,
[data-theme="signal"] .lede,
[data-theme="signal"] .hero-sub,
[data-theme="signal"] .sec-h {
font-weight: 700 !important;
}
[data-theme="signal"] .wordmark,
[data-theme="signal"] h1,
[data-theme="signal"] h1.hero-title,
[data-theme="signal"] .path-title,
[data-theme="signal"] .surface-name,
[data-theme="signal"] .venue-name,
[data-theme="signal"] .slogan-line,
[data-theme="signal"] .metric-n,
[data-theme="signal"] .stat .big,
[data-theme="signal"] .footer-mark strong {
font-weight: 800 !important;
}
/* Signal glow on the acid highlights. */
[data-theme="signal"] .deviation,
[data-theme="signal"] .slogan-line,
[data-theme="signal"] .metric-n,
[data-theme="signal"] .stat .big,
[data-theme="signal"] h1.hero-title .glow {
text-shadow: 0 0 6px rgba(198, 255, 0, 0.55),
0 0 18px rgba(198, 255, 0, 0.35),
0 0 40px rgba(198, 255, 0, 0.18) !important;
}
/* -------- Animated starfield ("tape" — stars drift left → right) --------
Same CSS as cosmo-genesis.css uses. Populated by /starfield.js which
creates …
nodes with the per-star CSS variables
below. Every subpage should include:
The script self-installs the .stars host if missing. */
.stars {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.star {
position: absolute;
top: var(--y, 50%);
left: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.55);
opacity: var(--star-opacity, 0.7);
animation: tape var(--tape-duration, 120s) linear infinite;
animation-delay: var(--tape-delay, 0s);
will-change: transform;
}
@keyframes tape {
0% { transform: translate(-4vw, 0); }
50% { transform: translate(50vw, calc(var(--tape-rise, 0px) * -1)); }
100% { transform: translate(104vw, 0); }
}
@media (prefers-reduced-motion: reduce) {
.star { animation: none; transform: translate(50vw, 0); opacity: 0.4; }
}
/* Content sits above the starfield. Exclude the fixed site-header and the
sticky sub-nav — the promotion to position:relative would break both. */
body > *:not(.stars):not(.site-header):not(.sub-nav) { position: relative; z-index: 1; }
.site-header { z-index: 100; }
.sub-nav { z-index: 90; }
/* Selection colour matches the accent. */
::selection { background: var(--acid); color: var(--sky-deep); }
/* Links inside body content — subtle underline that goes acid on hover. */
main a, .prose a, article a { color: var(--ink-bright); text-decoration-color: var(--sky-rim); text-underline-offset: 3px; }
main a:hover, .prose a:hover, article a:hover { text-decoration-color: var(--acid); color: var(--acid); }