/* ========================================================= NostalgiaNet — Base - System fonts only (Neocities-safe, no CDNs) - Variables are theme-driven in themes.css ========================================================= */ :root{ /* spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; /* radii */ --r-1: 10px; --r-2: 14px; --r-3: 18px; /* shadows */ --shadow-1: 0 6px 18px rgba(0,0,0,.35); --shadow-2: 0 12px 30px rgba(0,0,0,.45); /* typography */ --font-ui: "MS Sans Serif","Tahoma","Trebuchet MS","Verdana",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; /* motion */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-snap: cubic-bezier(.2,1.2,.2,1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; /* theme variables (overridden in themes.css) */ --bg: #0b1020; --panel: rgba(255,255,255,0.06); --panel2: rgba(255,255,255,0.08); --text: #e9fbff; --muted: rgba(233,251,255,.72); --stroke: rgba(255,255,255,0.15); --stroke2: rgba(255,255,255,0.28); --accent: #00e5ff; --accent2: #ff4fd8; --good: #50fa7b; --warn: #ffd166; --bad: #ff5c8a; --glass: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04)); --noise: radial-gradient(circle at 20% 10%, rgba(255,255,255,.12), transparent 52%), radial-gradient(circle at 80% 20%, rgba(0,229,255,.10), transparent 55%), radial-gradient(circle at 70% 90%, rgba(255,79,216,.10), transparent 60%); color-scheme: dark; } *{ box-sizing: border-box; } html, body{ height:100%; } body{ margin:0; font-family: var(--font-ui); background: var(--bg); color: var(--text); overflow-x: hidden; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: underline; } img{ max-width:100%; height:auto; } button, input, select, textarea{ font: inherit; color: inherit; } ::selection{ background: color-mix(in oklab, var(--accent) 45%, transparent); } /* accessibility helpers */ .sr-only{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } .skip-link{ position:absolute; left: -999px; top: 8px; background: #000; color:#fff; padding: 8px 10px; border-radius: 8px; z-index: 99999; } .skip-link:focus{ left: 8px; } /* custom cursor (SVG data cursors, toggle via data-cursor on ) */ body[data-cursor="aero"]{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 2 L4 26 L10 20 L14 30 L18 28 L14 18 L24 18 Z' fill='%23e9fbff' stroke='%2300e5ff' stroke-width='2'/%3E%3C/svg%3E") 2 2, auto; } body[data-cursor="pixel"]{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 2h2v2H2zM4 4h2v2H4zM6 6h2v2H6zM8 8h2v2H8zM10 10h2v2h-2zM12 12h2v2h-2zM14 14h2v2h-2zM16 16h2v2h-2zM18 18h2v2h-2zM20 20h2v2h-2zM22 22h2v2h-2zM24 24h2v2h-2z' fill='%2300e5ff'/%3E%3C/svg%3E") 2 2, auto; } a, button, [role="button"], .clickable, input, select, textarea{ cursor: pointer; } input, textarea{ cursor: text; } /* reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; } }