/* Liddr site theme tokens — light (default) and dark (the Terminal Grid * look). Every page's inline styles reference these via var(); the toggle * (liddr-theme.js) flips [data-theme] on . * * Channel triples (--*-rgb) exist so inline rgba() tints can vary alpha: * rgba(var(--line-rgb), .14) etc. Keep hex + triple variants in sync. */ :root { --bg: #f6f9f8; --bg-2: #eef3f1; --panel: #e6efeb; --text: #0d1f18; --text-2: #2c423a; --muted: #5a6e66; --muted-2: #8a9c94; --accent: #0b9e68; /* deep green — readable on light */ --accent-2: #087f53; --info: #0d7fc4; --info-2: #0a6aa5; --warn: #a36f06; --warn-2: #8a5e05; --danger: #cf3f30; --danger-2: #b03427; --purple: #7d4dbb; --line-rgb: 13, 79, 55; --accent-rgb: 11, 158, 104; --info-rgb: 13, 127, 196; --warn-rgb: 163, 111, 6; --danger-rgb: 207, 63, 48; --panel-rgb: 230, 239, 235; --bg-rgb: 246, 249, 248; --bg2-rgb: 238, 243, 241; --wave-a: 11, 158, 104; --wave-b: 13, 127, 196; } :root[data-theme="dark"] { --bg: #04070b; /* page background */ --bg-2: #050a0f; /* deep background */ --panel: #060d12; /* raised surface / hover background */ --text: #e6f2ec; --text-2: #c9d8d0; --muted: #7e948b; --muted-2: #5c7268; --accent: #3bf0ae; /* terminal green */ --accent-2: #7cf7cb; /* accent hover */ --info: #55d6ff; /* cyan */ --info-2: #8ce4ff; --warn: #ffc45e; /* amber (Signal) */ --warn-2: #ffd88f; --danger: #ff7c6b; --danger-2: #ff9d9d; --purple: #c9a0ff; --line-rgb: 120, 220, 180; /* borders / dividers / glows */ --accent-rgb: 59, 240, 174; --info-rgb: 85, 214, 255; --warn-rgb: 255, 196, 94; --danger-rgb: 255, 120, 120; --panel-rgb: 6, 12, 16; /* frosted overlays */ --bg-rgb: 4, 7, 11; --bg2-rgb: 2, 4, 7; --wave-a: 59, 240, 174; /* hero wireframe wave gradient stops */ --wave-b: 85, 214, 255; } /* Smooth the flip without animating every property (canvas stays instant). */ body { transition: background-color .25s ease, color .2s ease; } /* The nav toggle button (injected markup uses this class). */ .theme-toggle { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); background: transparent; border: 1px solid rgba(var(--line-rgb), .3); border-radius: 4px; padding: 8px 12px; cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: rgba(var(--line-rgb), .55); } /* Mobile hamburger nav (injected by liddr-theme.js). Burger shows only * under 900px; the panel is a fixed overlay that sits just under the * sticky nav (z-index 50), so the burger stays clickable to close. */ .ld-burger { display: none; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(var(--line-rgb), .3); border-radius: 4px; color: var(--text); font-size: 15px; line-height: 1; padding: 8px 11px; cursor: pointer; } .ld-burger:hover { border-color: rgba(var(--line-rgb), .55); } .ld-mobile-nav { display: none; } @media (max-width: 900px) { .ld-burger { display: inline-flex; } .ld-mobile-nav.open { display: block; position: fixed; inset: 0; z-index: 49; /* under the sticky nav (50) — burger stays on top */ background: var(--bg); animation: ldFade .18s ease; } .ld-mobile-links { display: flex; flex-direction: column; padding: 84px 26px 26px; /* clear the nav bar */ font-family: 'IBM Plex Mono', monospace; font-size: 16px; letter-spacing: .04em; } .ld-mobile-links a { padding: 15px 4px; text-decoration: none; border-bottom: 1px solid rgba(var(--line-rgb), .12); } } @keyframes ldFade { from { opacity: 0 } to { opacity: 1 } }