/* ============================================================= Elysium Design System — colors & type tokens ------------------------------------------------------------- Two modes: "paper" (light, default) and "console" (dark). Toggle by setting `data-mode="console"` on or any ancestor. All semantic tokens reference base scales below. ============================================================= */ /* ---------- Webfonts ----------------------------------------- Display: Pixelify Sans — bitmap-feel, paired with the wordmark. Used for hero/oversized lockups only. Headings: Space Grotesk — geometric grotesque with a slight techy edge. Pairs cleanly with the bitmap display + monospace UI. Body: Inter — neutral, high x-height; long-form prose. Mono / UI: JetBrains Mono — terminals, code, tags, small caps. */ @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); /* ---------- Base tokens -------------------------------------- */ :root { /* ----- Color: ink / paper scales ----- */ --ink-1000: #0b0c0e; /* deepest ink — body text on paper */ --ink-900: #15171a; --ink-800: #1f2228; --ink-700: #2c3038; --ink-600: #4a4f59; --ink-500: #6b7180; --ink-400: #8e94a3; --ink-300: #b3b8c4; --ink-200: #d6d9e0; --ink-100: #ebedf1; --ink-50: #f4f5f8; --paper-1000: #f6f4ee; /* warm off-white — base canvas */ --paper-900: #efece3; --paper-800: #e6e2d5; /* ----- Color: accent + semantic ----- Accent is a soft moonlight blue — bright on dark, recedes on light. Used for emphasis, links, and the bloom of the phosphor glow. There is no chromatic green/cyan in this system. */ --accent: #8aa8e8; /* moonlight blue — primary accent */ --accent-h: #b8caf2; /* hover — paler */ --accent-d: #6585cc; /* pressed — deeper */ --accent-ink: #0b0c0e; /* fg on accent */ /* Glow tint for halos that bloom out of accent surfaces */ --accent-glow-1: rgba(220,232,255,0.55); /* near-white core */ --accent-glow-2: rgba(120,150,220,0.30); /* mid-blue bloom */ --accent-glow-3: rgba(50,80,170,0.15); /* deep edge */ --semantic-success: #63ff92; --semantic-warning: #e8b339; --semantic-danger: #c94f3b; /* Legacy aliases — keep prior names resolving to the new accent. */ --accent-cyan: var(--accent); --accent-cyan-h: var(--accent-h); --accent-cyan-d: var(--accent-d); --semantic-info: #5b9cd6; /* ----- Surface borders / hairlines ----- */ --hairline-ink: rgba(11, 12, 14, 0.12); --hairline-paper: rgba(246, 244, 238, 0.14); /* ----- Shadows (hard, zero-blur, pixel-art feel) ----- */ --shadow-1: 0 1px 0 rgba(0,0,0,0.04); --shadow-2: 0 2px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06); --shadow-3: 0 4px 0 rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08); --shadow-inset: inset 0 1px 0 rgba(0,0,0,0.06); /* ----- Spacing scale (8px grid) ----- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10:128px; /* ----- Radii (sharp by default) ----- */ --radius-0: 0; --radius-1: 2px; /* tooltips, chips only */ /* ----- Layout ----- */ --content-max: 1120px; --prose-max: 640px; --header-h: 56px; --rail-w: 240px; --topbar-h: 48px; /* ----- Motion ----- */ --ease-snap: cubic-bezier(0.2, 0, 0, 1); --ease-step: steps(4, end); --dur-fast: 80ms; --dur-base: 160ms; --dur-slide: 180ms; --dur-reorder: 220ms; /* ----- Type families ----- */ --font-display: "Pixelify Sans", "Departure Mono", "JetBrains Mono", ui-monospace, monospace; --font-heading: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; /* ----- Type sizes (display → caption) ----- */ --fs-display-1: 88px; /* hero — pixel/bitmap face */ --fs-display-2: 64px; --fs-display-3: 48px; --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-tag: 11px; /* small caps labels */ /* ----- Line heights ----- */ --lh-display: 0.95; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --lh-loose: 1.7; /* ----- Letter spacing ----- */ --ls-display: -0.01em; --ls-tight: -0.005em; --ls-normal: 0; --ls-loose: 0.04em; --ls-tag: 0.12em; /* small-caps labels */ /* ----- Weights ----- */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* ----- Semantic foreground / background (console mode default) */ --bg: #0b0c0e; --bg-2: #15171a; --bg-3: #1f2228; --bg-inset: #08090b; --fg: #ecedef; --fg-2: #b3b8c4; --fg-3: #8e94a3; --fg-mute: #6b7180; --fg-inv: #0b0c0e; --hairline: var(--hairline-paper); --link: #ecedef; --link-underline: var(--accent-cyan); } /* ---------- Paper (light) mode ------------------------------- */ [data-mode="paper"] { --bg: var(--paper-1000); --bg-2: var(--paper-900); --bg-3: var(--paper-800); --bg-inset: #ffffff; --fg: var(--ink-1000); --fg-2: var(--ink-700); --fg-3: var(--ink-500); --fg-mute: var(--ink-400); --fg-inv: var(--paper-1000); --hairline: var(--hairline-ink); --link: var(--ink-1000); --link-underline: var(--accent-cyan-d); } /* ---------- Console (dark) mode — explicit selector ---------- */ [data-mode="console"] { --bg: #0b0c0e; --bg-2: #15171a; --bg-3: #1f2228; --bg-inset: #08090b; --fg: #ecedef; --fg-2: #b3b8c4; --fg-3: #8e94a3; --fg-mute: #6b7180; --fg-inv: #0b0c0e; --hairline: var(--hairline-paper); --shadow-1: 0 1px 0 rgba(0,0,0,0.40); --shadow-2: 0 2px 0 rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.06); --shadow-3: 0 4px 0 rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); --link: var(--accent-cyan); --link-underline: var(--accent-cyan-d); } /* ============================================================= Semantic CSS for elements — drop into any page that imports this file and you get sensible defaults. ============================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---------- Display / headings ------------------------------- */ .display-1, .display-2, .display-3 { font-family: var(--font-display); font-weight: var(--w-regular); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg); text-transform: lowercase; } .display-1 { font-size: var(--fs-display-1); } .display-2 { font-size: var(--fs-display-2); } .display-3 { font-size: var(--fs-display-3); } h1, .h1 { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--w-semi); letter-spacing: var(--ls-tight); color: var(--fg); margin: 0; } h2, .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: var(--w-semi); letter-spacing: var(--ls-tight); color: var(--fg); margin: 0; } h3, .h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--w-semi); color: var(--fg); margin: 0; } h4, .h4 { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--w-semi); color: var(--fg); margin: 0; } /* ---------- Body / prose ------------------------------------- */ p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; } .lead { font-family: var(--font-body); font-size: var(--fs-h4); line-height: var(--lh-loose); color: var(--fg-2); } .small { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--fg-3); } .caption{ font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-3); } /* ---------- Tags / small-caps labels ------------------------- */ .tag { font-family: var(--font-mono); font-size: var(--fs-tag); font-weight: var(--w-medium); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--fg-3); } /* ---------- Code / mono -------------------------------------- */ code, .code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); border: 1px solid var(--hairline); padding: 0.1em 0.4em; border-radius: 0; } pre { font-family: var(--font-mono); font-size: var(--fs-small); background: var(--bg-2); border: 1px solid var(--hairline); padding: var(--space-4); overflow-x: auto; border-radius: 0; } pre code { background: transparent; border: 0; padding: 0; } /* ---------- Links -------------------------------------------- */ a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease-snap); } a:hover { text-decoration-color: var(--fg); } /* ---------- Horizontal rule ---------------------------------- */ hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-6) 0; } /* ---------- Selection ---------------------------------------- */ ::selection { background: var(--accent-cyan); color: var(--accent-ink); } /* ---------- Helpers ------------------------------------------ */ .dot-grid-bg { background-image: radial-gradient(circle, var(--fg-mute) 1px, transparent 1px); background-size: 16px 16px; background-position: 0 0; /* Keep dot-grid subtle: */ background-color: var(--bg); background-blend-mode: normal; opacity: 1; } .dot-grid-bg::before { /* Workaround so the dots themselves render at ~6% via filter */ } /* Pixel-frame: stepped 4px border for hero/marquee cards. Use sparingly — once per page max. */ .pixel-frame { border: 4px solid var(--fg); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--fg); }