… carved, glowing card … Resolved Naming: af-thing a component (a whole "thing" you drop in) af-thing--variant a modifier on that component af-util a single-purpose utility (shape, motif, text) is-state a runtime state toggled by JS (is-active, is-open) The motif: a tapered "rune-line" that fades at both ends, with a glowing diamond node sitting on it. It marks active/sealed surfaces. Everything in here is built from that one idea + the carved-corner panel. ════════════════════════════════════════════════════════════════════════════ */ /* ── 1 · Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button, input, select, textarea { font-family: inherit; } /* ── 2 · Tokens ────────────────────────────────────────────────────────────── */ :root { /* Surfaces & ink */ --bg: #07030e; --surface: #0b0618; --surface2: #110d22; --border: #1e1040; --border2: #2d1a5a; --text: #e4e6ef; --text2: #9ba3b8; --text3: #484f65; /* Accents */ --accent: #7c3aed; /* violet — primary */ --accent-secondary: #d97706; /* amber — secondary */ --amber: #d97706; --amber2: #f5a35a; --amber-lit:#fbbf24; --success: #28c87a; --danger: #ff4d6a; /* Promoted accent shades (were raw hex scattered through the old CSS) */ --violet-300: #c4b5fd; /* light violet — badge names */ --violet-400: #a78bfa; /* mid violet — ids, links, type pills */ --gold-text: #ffd9a8; /* warm gold — headings, names, stat values */ /* Spacing scale — use these on new work instead of magic px numbers */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Type */ --font-display: 'Cormorant Garamond', Georgia, serif; /* headings, tabs, labels */ --font-body: 'Spectral', Georgia, 'Times New Roman', serif; /* body + small text */ /* Shapes — carved silhouettes */ --chamfer: polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px); --chamfer-sm: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px); /* carved TOP corners only — the panel / modal / active-tab silhouette */ --carved-top: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); /* Motif gradients */ --rune-line: linear-gradient(90deg, transparent 0%, var(--amber) 22%, var(--amber-lit) 50%, var(--amber) 78%, transparent 100%); --lit-below: linear-gradient(180deg, rgba(124,58,237,0.05) 0%, rgba(124,58,237,0.10) 55%, rgba(217,119,6,0.11) 100%); --top-glow: radial-gradient(ellipse 75% 42% at 50% 0%, rgba(124,58,237,0.12), transparent 72%); } /* ── 3 · Page chrome ───────────────────────────────────────────────────────── */ /* Put .af-page on to get the dark arcane backdrop + base type. */ .af-page { background: radial-gradient(ellipse 60% 50% at 8% 5%, rgba(124,58,237,0.18), transparent), radial-gradient(ellipse 50% 40% at 92% 95%, rgba(217,119,6,0.14), transparent), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-body), serif; font-size: 16px; min-height: 100vh; } /* Faint CRT scanline veil over everything. */ .af-scanline::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 3px); pointer-events: none; z-index: 9999; } /* Themed native scrollbar — styles the real browser scrollbar (no JS, no inner-scroll container) so it matches the arcane theme everywhere. */ * { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--amber)); border: 2px solid var(--bg); /* inset the thumb from the track edges */ } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--violet-300), var(--amber-lit)); } /* Drifting embers (positions/sizes are set inline by JS). */ .embers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; } .ember { --drift: 20px; /* sideways drift; JS overrides this per ember */ position: absolute; bottom: -6px; border-radius: 50%; will-change: transform, opacity; animation: ember-float linear infinite; } @keyframes ember-float { 0% { transform: translateY(0) translateX(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 0.55; } 100% { transform: translateY(-85vh) translateX(var(--drift, 20px)); opacity: 0; } } /* Gutter mode — clear the embers out of the central reading column so they only drift in the side margins, keeping motion from under the text. Used on reading pages (devlog) and on the home page once you've scrolled past the hero. The cleared band tracks the .co-wrap column (~1080px); narrower viewports have no gutters, so the whole layer fades out. */ .embers--gutter { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 600px), transparent calc(50% - 560px), transparent calc(50% + 560px), #000 calc(50% + 600px), #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 600px), transparent calc(50% - 560px), transparent calc(50% + 560px), #000 calc(50% + 600px), #000 100%); } /* ── 4 · Utilities ─────────────────────────────────────────────────────────── */ /* Shape */ .af-chamfer { clip-path: var(--chamfer); } .af-chamfer-sm { clip-path: var(--chamfer-sm); } /* Display-serif headings glow */ .af-glow { text-shadow: 0 0 20px rgba(217,119,6,0.25); } /* Font role utilities (the small-text-grade serif vs the display serif) */ .af-font-display { font-family: var(--font-display), serif; } .af-font-body { font-family: var(--font-body), serif; font-weight: 500; } /* Screen-reader-only: present in the a11y tree (and to search engines) but visually hidden — e.g. an h1 carried by a logo image. */ .af-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Staggered entrance — direct children of .af-stagger cascade in (fade + rise). It's self-replaying: the animation re-runs whenever the container goes from display:none to shown (e.g. a tab switch) or its children are re-rendered, so no JS is needed to retrigger it. Respects prefers-reduced-motion. */ @keyframes af-stagger-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .af-stagger > * { animation: af-stagger-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .af-stagger > *:nth-child(1) { animation-delay: 0.03s; } .af-stagger > *:nth-child(2) { animation-delay: 0.08s; } .af-stagger > *:nth-child(3) { animation-delay: 0.13s; } .af-stagger > *:nth-child(4) { animation-delay: 0.18s; } .af-stagger > *:nth-child(5) { animation-delay: 0.23s; } .af-stagger > *:nth-child(6) { animation-delay: 0.28s; } .af-stagger > *:nth-child(7) { animation-delay: 0.33s; } .af-stagger > *:nth-child(n+8) { animation-delay: 0.38s; } /* Branded keyboard focus ring — an amber outline with a soft violet halo, shown only for keyboard users (:focus-visible). Mouse clicks never trigger it. The `*` rule covers every interactive element; components can override if needed. */ *:focus-visible { outline: 2px solid var(--amber-lit); outline-offset: 2px; border-radius: 1px; box-shadow: 0 0 0 4px rgba(124,58,237,0.35), 0 0 12px rgba(217,119,6,0.45); } /* Chamfered buttons clip an outer ring away with their carved corners, so they wear the ring on the INSIDE instead — it follows the chamfer and stays visible. Still keyboard-only (:focus-visible), never on click/hover. */ .af-btn:focus-visible, .af-btn-ghost:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber-lit), inset 0 0 0 5px rgba(124,58,237,0.5); } /* Skip-to-content link: an af-sr-only element that surfaces as a styled chip when focused, letting keyboard/SR users jump past the nav. */ .af-skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 200; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; background: var(--surface2); border: 1px solid var(--border2); color: var(--gold-text); font-family: var(--font-display), serif; font-size: 15px; clip-path: var(--chamfer-sm); } /* ─── Rune glyphs ─────────────────────────────────────────────────────────── Named ornamental marks. Drop one in as an inline symbol — dim by default, lit (ember + glow) when it, or an ancestor, has .is-lit (e.g. the active tab/nav item). Good for tab indicators, eyebrows, dividers, list markers. (idle/dim)