/* ========================================================================== BASE — tokens, reset, typography, cursor (monochrome + ember) ========================================================================== */ :root { /* surfaces */ --void: #08080a; --coal: #101014; --ash: #17171c; --slate: #1e1e25; --line: rgba(232, 228, 220, 0.08); --line-strong: rgba(232, 228, 220, 0.16); --glass: rgba(12, 12, 15, 0.72); --glass-solid: rgba(16, 16, 20, 0.94); /* text */ --bone: #e8e4dc; --dust: #8a8790; --faint: #56545c; /* the one accent (Snow default; Themes overrides these live) */ --ember: #f2f2f2; --ember-soft: #c9c9d2; --ember-bright: #ffffff; --ember-glow: rgba(255, 255, 255, 0.5); --ember-dim: rgba(255, 255, 255, 0.1); /* animated wallpaper gradient (Themes overrides --wall) */ --wall: radial-gradient(1100px 700px at 50% -15%, rgba(180, 200, 225, 0.1), transparent 60%), linear-gradient(160deg, #0a0c10 0%, #070809 55%, #050506 100%); /* semantic (kept near-monochrome) */ --ok: #9aa07f; --warn: var(--ember); --danger: #a85a4a; --radius: 10px; --radius-lg: 16px; --bar-h: 40px; --dock-h: 64px; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --font-display: "Cinzel", "Times New Roman", serif; /* atmosphere intensity (Settings can override these on ) */ --grain-opacity: 0.05; --scan-opacity: 0.35; } * { box-sizing: border-box; margin: 0; padding: 0; outline: none; } html, body { height: 100%; } body { font-family: var(--font-mono); color: var(--bone); background: var(--void); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; cursor: none; /* custom cursor takes over */ } /* desktop wallpaper: theme gradient (Themes sets --wall) */ #wallpaper { position: fixed; inset: 0; z-index: 0; background: var(--wall); transition: background 0.6s ease; animation: wp-breathe 18s ease-in-out infinite alternate; } /* animated particle background canvas (Themes drives this) */ #bg-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; } @keyframes wp-breathe { from { filter: brightness(1); } to { filter: brightness(1.08); } } img { -webkit-user-drag: none; user-select: none; } ::selection { background: var(--ember); color: var(--void); } a { color: var(--ember); text-decoration: none; transition: color 0.15s ease, text-shadow 0.15s ease; } a:hover { color: var(--ember-bright); text-shadow: 0 0 10px var(--ember-glow); } h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: 0.01em; } /* scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(232, 228, 220, 0.14); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ember); } /* ---- custom cursor ---- */ #cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1.5px solid var(--ember); border-radius: 50%; pointer-events: none; z-index: 100000; mix-blend-mode: screen; transition: width 0.12s ease, height 0.12s ease, background 0.12s ease, border-color 0.12s ease; will-change: transform; } #cursor::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background: var(--ember-bright); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--ember-glow); } #cursor.hot { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(217, 118, 43, 0.12); border-color: var(--ember-bright); } #cursor.down { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } /* generic utility */ .mono { font-family: var(--font-mono); } .dust { color: var(--dust); } .ember { color: var(--ember); } .hidden { display: none !important; } /* focusable text inputs keep a caret */ input, textarea { cursor: none; } @media (hover: none), (pointer: coarse) { body { cursor: auto; } #cursor { display: none; } input, textarea { cursor: text; } }