/* * ============================================================ * LEFT FOR THE VULTURES — Design Tokens * Deimos Infinitum Publishing / Phase II Publishing * carrionroost.com * ============================================================ * * All design decisions live here as CSS custom properties. * Import this file first, before any component or layout CSS. * * Table of Contents: * 1. Color — Backgrounds * 2. Color — Borders * 3. Color — Text * 4. Color — Accents & Semantic * 5. Color — Status * 6. Color — Overlays & Glows * 7. Typography * 8. Spacing & Sizing * 9. Border Radius & Roughness * 10. Shadows & Depth * 11. Texture & Noise * 12. Motion & Transitions * 13. Z-Index Scale * 14. Component-Specific Tokens * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ──────────────────────────────────────────────────────── * 1. COLOR — BACKGROUNDS * The world is always set at night. Cold ash — inside The * Despair all color drains away. Matches the core book's * greyscale-and-blood identity. * ──────────────────────────────────────────────────────── */ /* The void beneath everything */ --color-void: #0a0a0a; /* Page/app background — deep neutral charcoal */ --color-bg-base: #111111; /* Primary panel surfaces (main content areas) */ --color-bg-panel: #191919; /* Elevated surfaces (cards, sidebars, stat blocks) */ --color-bg-raised: #222222; /* Highest surface layer (modals, overlays, dropdown menus) */ --color-bg-overlay: #2b2b2b; /* Hover/interaction surface shift */ --color-bg-hover: #353535; /* Parchment-tinted surface for special panels (rule text, lore) */ --color-bg-parchment: #242019; /* ──────────────────────────────────────────────────────── * 2. COLOR — BORDERS * Should feel scored into the surface, not drawn on top. * ──────────────────────────────────────────────────────── */ /* Nearly invisible dividers, structural separation */ --color-border-faint: #292929; /* Standard border — weathered, recessed */ --color-border-dim: #454545; /* Emphasized border — active panels, selected cards */ --color-border-strong: #636363; /* Accent border — active state, highlighted element (blood) */ --color-border-accent: #a02026; /* Danger border — errors, warnings, destructive states */ --color-border-danger: #8b1a1a; /* Complete/success border — desaturated sage */ --color-border-success: #3d5c38; /* ──────────────────────────────────────────────────────── * 3. COLOR — TEXT * Bone on ash. No pure white — everything stained by smoke. * ──────────────────────────────────────────────────────── */ /* Primary reading text — bone */ --color-text-primary: #e6e1d7; /* Secondary text — labels, captions, UI chrome */ --color-text-secondary: #a49e94; /* Tertiary text — metadata, disabled states */ --color-text-faint: #6b6760; /* Interactive text — links, clickable labels (blood) */ --color-text-link: #d0453f; /* Active / selected text — brighter blood */ --color-text-active: #e0554d; /* Danger text — errors, warnings */ --color-text-danger: #d43a3a; /* Success text — completion states */ --color-text-success: #6a9460; /* Inverse text — for use on light/accent backgrounds */ --color-text-inverse: #141414; /* Stat block numbers — brightest bone */ --color-text-stat: #f0eadd; /* Header/title text — bone white, like ink reversed out of black */ --color-text-heading: #e9e2d2; /* ──────────────────────────────────────────────────────── * 4. COLOR — ACCENTS & SEMANTIC * Black, bone, and blood. Nothing neon. Nothing cheerful. * ──────────────────────────────────────────────────────── */ /* Blood red — primary interactive accent (book accent color) */ --color-rust: #8c1d22; --color-rust-dim: #691014; --color-rust-mid: #a82327; --color-rust-bright: #dc2329; /* Aged bone — secondary accent, active states */ --color-bronze: #8f887b; --color-bronze-dim: #6b6559; --color-bronze-mid: #aca392; --color-bronze-bright: #d3c9b6; /* Ash — neutral mid-tone, structural elements */ --color-ash: #7d7d7d; --color-ash-dim: #565656; --color-ash-bright: #a5a5a5; /* Dried blood — danger, warnings, errors */ --color-blood: #6b1212; --color-blood-dim: #4a0d0d; --color-blood-mid: #8c1d22; --color-blood-bright: #c92023; /* Ember — hover glow, reaction states (smoldering red) */ --color-ember: #c03a35; --color-ember-dim: #922a26; /* Desaturated sage — success, completion */ --color-sage: #3d5c38; --color-sage-dim: #2e4428; --color-sage-bright: #4e7848; --color-sage-text: #6a9460; /* Desaturated slate — informational, neutral accents */ --color-slate: #2e4a5c; --color-slate-dim: #203848; --color-slate-bright: #3a5f78; --color-slate-text: #5a8aaa; /* ──────────────────────────────────────────────────────── * 5. COLOR — STATUS * Used for step labels, progress indicators, badges. * ──────────────────────────────────────────────────────── */ --color-status-complete: var(--color-sage); --color-status-complete-fg: var(--color-sage-text); --color-status-active: var(--color-bronze); --color-status-active-fg: var(--color-bronze-bright); --color-status-incomplete: var(--color-blood); --color-status-incomplete-fg: var(--color-blood-bright); --color-status-optional: var(--color-ash); --color-status-optional-fg: var(--color-ash-bright); --color-status-warning: #7a5c1a; --color-status-warning-fg: #c49a38; /* ──────────────────────────────────────────────────────── * 6. COLOR — OVERLAYS & GLOWS * Transparencies used for hover states, modals, ember effects. * ──────────────────────────────────────────────────────── */ --color-scrim: rgba(8, 8, 8, 0.75); --color-scrim-heavy: rgba(8, 8, 8, 0.92); /* Ember glow layers — used in box-shadow hover states (smoldering red) */ --glow-ember-faint: rgba(220, 35, 41, 0.06); --glow-ember-dim: rgba(220, 35, 41, 0.12); --glow-ember-mid: rgba(220, 35, 41, 0.20); --glow-ember-strong: rgba(220, 35, 41, 0.35); /* Bone glow — for selected/active elements */ --glow-bronze-faint: rgba(211, 201, 182, 0.08); --glow-bronze-mid: rgba(211, 201, 182, 0.18); --glow-bronze-strong: rgba(211, 201, 182, 0.30); /* Blood glow — for danger/error states */ --glow-blood-faint: rgba(201, 32, 35, 0.10); --glow-blood-mid: rgba(201, 32, 35, 0.22); /* Sage glow — for success/complete states */ --glow-sage-faint: rgba(78, 120, 72, 0.10); --glow-sage-mid: rgba(78, 120, 72, 0.20); /* ──────────────────────────────────────────────────────── * 7. TYPOGRAPHY * ──────────────────────────────────────────────────────── */ /* Font families */ --font-display: 'Cinzel Decorative', 'Cinzel', 'Georgia', serif; --font-heading: 'Cinzel', 'Georgia', serif; --font-body: 'Crimson Pro', 'Georgia', serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font sizes — named for semantic role */ --text-xs: 0.75rem; /* 12px — badges, metadata */ --text-sm: 0.875rem; /* 14px — labels, captions */ --text-base: 1rem; /* 16px — body copy */ --text-md: 1.125rem; /* 18px — comfortable reading, rules text */ --text-lg: 1.25rem; /* 20px — sub-headings, card titles */ --text-xl: 1.5rem; /* 24px — section headings */ --text-2xl: 2rem; /* 32px — tab headings, panel titles */ --text-3xl: 2.5rem; /* 40px — major headings */ --text-4xl: 3.5rem; /* 56px — game name, hero display */ /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 900; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-loose: 1.7; --leading-relaxed:1.9; /* for long-form lore/rules text */ /* Letter spacing — Cinzel benefits from tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.10em; --tracking-widest: 0.20em; /* ALL CAPS labels */ /* ──────────────────────────────────────────────────────── * 8. SPACING & SIZING * Based on a 4px grid. * ──────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Layout dimensions */ --sidebar-width: 280px; /* Left description / planner panel */ --choices-width: 360px; /* Right choices panel */ --slideout-width: 420px; /* Slide-out trait card panel */ --modal-max-width: 820px; /* Two-panel picker modal */ --stat-block-height: 80px; /* Persistent stat bar height */ --tab-nav-height: 56px; /* Step tab navigation bar */ --topbar-height: 48px; /* Global app topbar */ /* ──────────────────────────────────────────────────────── * 9. BORDER RADIUS & ROUGHNESS * Corners should feel worn, not machined. Small radii only. * Jagged/rough effects are achieved via clip-path or SVG filters. * ──────────────────────────────────────────────────────── */ --radius-none: 0px; --radius-xs: 2px; /* barely softened — most borders */ --radius-sm: 3px; /* cards, panels */ --radius-md: 4px; /* modals, dropdowns */ --radius-lg: 6px; /* larger surfaces */ --radius-pill: 999px; /* badges, tags only */ /* Roughness — a CSS filter applied to borders to feel hand-drawn. * Usage: filter: url(#roughen) — references inline SVG filter */ --roughness-subtle: url(#roughen-subtle); --roughness-strong: url(#roughen-strong); /* ──────────────────────────────────────────────────────── * 10. SHADOWS & DEPTH * Cold, neutral darkness — ash and ink, not firelight. * ──────────────────────────────────────────────────────── */ /* Inset shadows — recessed, carved look */ --shadow-inset-sm: inset 0 1px 3px rgba(8, 8, 8, 0.60); --shadow-inset-md: inset 0 2px 6px rgba(8, 8, 8, 0.80); --shadow-inset-lg: inset 0 3px 12px rgba(8, 8, 8, 0.90); /* Drop shadows — panels lifting off the void */ --shadow-sm: 0 1px 3px rgba(8, 8, 8, 0.50), 0 1px 2px rgba(8, 8, 8, 0.80); --shadow-md: 0 2px 6px rgba(8, 8, 8, 0.60), 0 4px 12px rgba(8, 8, 8, 0.40); --shadow-lg: 0 4px 16px rgba(8, 8, 8, 0.70), 0 8px 32px rgba(8, 8, 8, 0.50); --shadow-xl: 0 8px 32px rgba(8, 8, 8, 0.80), 0 16px 64px rgba(8, 8, 8, 0.60); /* Ember hover glow — something reacting to touch */ --shadow-ember-sm: 0 0 8px var(--glow-ember-dim), 0 0 2px var(--glow-ember-mid); --shadow-ember-md: 0 0 16px var(--glow-ember-dim), 0 0 4px var(--glow-ember-mid), 0 2px 8px rgba(8, 8, 8, 0.60); --shadow-ember-lg: 0 0 32px var(--glow-ember-mid), 0 0 8px var(--glow-ember-strong), 0 4px 16px rgba(8, 8, 8, 0.70); /* Bronze selection glow */ --shadow-bronze-sm: 0 0 8px var(--glow-bronze-faint), 0 0 2px var(--glow-bronze-mid); --shadow-bronze-md: 0 0 16px var(--glow-bronze-faint), 0 0 4px var(--glow-bronze-mid), 0 2px 8px rgba(8, 8, 8, 0.60); /* Blood danger glow */ --shadow-blood-sm: 0 0 8px var(--glow-blood-faint), 0 0 2px var(--glow-blood-mid); /* Sage success glow */ --shadow-sage-sm: 0 0 8px var(--glow-sage-faint), 0 0 2px var(--glow-sage-mid); /* ──────────────────────────────────────────────────────── * 11. TEXTURE & NOISE * CSS variables for texture configuration. * The actual SVG noise filter is inlined in the HTML. * ──────────────────────────────────────────────────────── */ /* Noise overlay opacity — applied via ::before pseudo-element */ --texture-noise-opacity: 0.035; --texture-noise-opacity-heavy:0.055; /* Grain overlay — used for parchment panels */ --texture-grain-opacity: 0.06; /* Vignette strength — used on page background */ --texture-vignette-opacity: 0.70; /* ──────────────────────────────────────────────────────── * 12. MOTION & TRANSITIONS * Slow and deliberate — no bounciness, no springiness. * Heavy things move like heavy things. * ──────────────────────────────────────────────────────── */ /* Durations */ --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 360ms; --duration-deliberate:500ms; /* Easing — linear-ish for hover glow, ease-out for panel slides */ --ease-ember: cubic-bezier(0.20, 0.00, 0.40, 1.00); /* glow on/off */ --ease-slide: cubic-bezier(0.30, 0.00, 0.20, 1.00); /* panel slide */ --ease-fade: cubic-bezier(0.40, 0.00, 0.60, 1.00); /* opacity */ --ease-standard: cubic-bezier(0.25, 0.10, 0.25, 1.00); /* general */ /* Transition shorthands */ --transition-color: color var(--duration-fast) var(--ease-ember), background-color var(--duration-fast) var(--ease-ember), border-color var(--duration-fast) var(--ease-ember); --transition-glow: box-shadow var(--duration-base) var(--ease-ember); --transition-opacity: opacity var(--duration-base) var(--ease-fade); --transition-transform:transform var(--duration-base) var(--ease-slide); --transition-all: var(--transition-color), var(--transition-glow); /* ──────────────────────────────────────────────────────── * 13. Z-INDEX SCALE * Named layers, not magic numbers. * ──────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; /* Cards, elevated panels */ --z-sticky: 20; /* Step nav bar, persistent stat block */ --z-slideout: 30; /* Slide-out trait panel */ --z-dropdown: 40; /* Dropdowns, select menus */ --z-modal: 50; /* Picker modals */ --z-toast: 60; /* Warning banners, toasts */ --z-scrim: 45; /* Modal backdrop — sits under modal */ --z-tooltip: 70; /* Tooltips — above everything */ /* ──────────────────────────────────────────────────────── * 14. COMPONENT-SPECIFIC TOKENS * Derived from the global palette above. Change global values * and these update automatically. * ──────────────────────────────────────────────────────── */ /* --- Step Navigation Tab --- */ --tab-bg: var(--color-bg-panel); --tab-bg-active: var(--color-bg-raised); --tab-bg-hover: var(--color-bg-hover); --tab-border: var(--color-border-faint); --tab-border-active: var(--color-border-accent); --tab-text: var(--color-text-secondary); --tab-text-active: var(--color-text-active); --tab-text-hover: var(--color-text-primary); --tab-height: var(--tab-nav-height); --tab-font: var(--font-heading); --tab-tracking: var(--tracking-wider); /* --- Buttons --- */ /* Primary — main CTA (the "golden" choose button) */ --btn-primary-bg: var(--color-rust); --btn-primary-bg-hover: var(--color-rust-mid); --btn-primary-bg-active:var(--color-rust-dim); --btn-primary-border: var(--color-rust-bright); --btn-primary-text: #f4e9e2; --btn-primary-shadow: var(--shadow-ember-sm); --btn-primary-shadow-hover: var(--shadow-ember-md); /* Secondary — less prominent actions */ --btn-secondary-bg: var(--color-bg-raised); --btn-secondary-bg-hover: var(--color-bg-hover); --btn-secondary-border: var(--color-border-dim); --btn-secondary-border-hover: var(--color-border-strong); --btn-secondary-text: var(--color-text-secondary); --btn-secondary-text-hover: var(--color-text-primary); /* Ghost — text-only, minimal footprint */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--color-bg-raised); --btn-ghost-border: transparent; --btn-ghost-border-hover: var(--color-border-faint); --btn-ghost-text: var(--color-text-link); --btn-ghost-text-hover: var(--color-text-active); /* Danger — destructive or warning actions */ --btn-danger-bg: var(--color-blood); --btn-danger-bg-hover: var(--color-blood-mid); --btn-danger-border: var(--color-blood-bright); --btn-danger-text: #e8c0b0; --btn-danger-shadow-hover: var(--shadow-blood-sm); /* Button sizing */ --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 48px; --btn-padding-x-sm: var(--space-3); --btn-padding-x-md: var(--space-5); --btn-padding-x-lg: var(--space-8); --btn-font: var(--font-heading); --btn-font-size: var(--text-sm); --btn-tracking: var(--tracking-wider); --btn-radius: var(--radius-xs); /* --- Cards (class/ancestry selection grid) --- */ --card-bg: var(--color-bg-raised); --card-bg-hover: var(--color-bg-hover); --card-bg-selected: var(--color-bg-overlay); --card-border: var(--color-border-dim); --card-border-hover: var(--color-border-strong); --card-border-selected: var(--color-border-accent); --card-radius: var(--radius-sm); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg), var(--shadow-ember-sm); --card-shadow-selected: var(--shadow-bronze-md); --card-padding: var(--space-5); /* --- Trait/Feature Cards (slide-out panel) --- */ --trait-card-bg: var(--color-bg-raised); --trait-card-bg-hover: var(--color-bg-overlay); --trait-card-border: var(--color-border-dim); --trait-card-border-hover: var(--color-border-accent); --trait-card-radius: var(--radius-xs); --trait-card-padding: var(--space-4); /* --- Cost Badge --- */ --badge-cost-bg: var(--color-rust-dim); --badge-cost-border: var(--color-rust); --badge-cost-text: #eadfd3; --badge-cost-font: var(--font-mono); --badge-cost-radius: var(--radius-xs); /* --- Rarity Badge --- */ --badge-common-bg: var(--color-bg-raised); --badge-common-text: var(--color-text-secondary); --badge-uncommon-bg: #3a4820; --badge-uncommon-text:#8aaa50; --badge-rare-bg: #1e2e4a; --badge-rare-text: #5a8acc; --badge-unique-bg: #3a1e4a; --badge-unique-text: #9a60cc; /* --- Panel Split Layout --- */ --panel-desc-bg: var(--color-bg-parchment); --panel-choices-bg: var(--color-bg-panel); --panel-border: var(--color-border-faint); --panel-padding: var(--space-6); /* --- Slide-Out Panel --- */ --slideout-bg: var(--color-bg-overlay); --slideout-border: var(--color-border-dim); --slideout-shadow: var(--shadow-xl); --slideout-width: 420px; /* --- Modals (two-panel picker) --- */ --modal-bg: var(--color-bg-overlay); --modal-border: var(--color-border-dim); --modal-list-bg: var(--color-bg-panel); --modal-detail-bg: var(--color-bg-raised); --modal-shadow: var(--shadow-xl); --modal-radius: var(--radius-md); /* --- Stat Display --- */ --stat-bg: var(--color-bg-panel); --stat-border: var(--color-border-faint); --stat-label-color: var(--color-text-faint); --stat-value-color: var(--color-text-stat); --stat-font: var(--font-mono); --stat-label-font: var(--font-heading); --stat-label-tracking:var(--tracking-widest); --stat-label-size: var(--text-xs); --stat-value-size: var(--text-2xl); /* --- Progress / Completion --- */ --progress-track-bg: var(--color-bg-raised); --progress-fill-bg: var(--color-sage); --progress-height: 3px; /* --- Dropdowns / Selects --- */ --select-bg: var(--color-bg-raised); --select-bg-hover: var(--color-bg-overlay); --select-border: var(--color-border-dim); --select-border-hover:var(--color-border-strong); --select-border-focus:var(--color-border-accent); --select-text: var(--color-text-primary); --select-radius: var(--radius-xs); --select-shadow-focus:var(--shadow-bronze-sm); /* --- Form Inputs --- */ --input-bg: var(--color-bg-panel); --input-bg-focus: var(--color-bg-raised); --input-border: var(--color-border-dim); --input-border-focus: var(--color-border-accent); --input-text: var(--color-text-primary); --input-placeholder: var(--color-text-faint); --input-radius: var(--radius-xs); --input-shadow-focus: var(--shadow-bronze-sm); /* --- Accordion --- */ --accordion-bg: var(--color-bg-panel); --accordion-bg-hover: var(--color-bg-raised); --accordion-border: var(--color-border-faint); --accordion-header-font: var(--font-heading); --accordion-header-size: var(--text-sm); --accordion-header-tracking: var(--tracking-wide); /* --- Tooltips / Rule Summaries --- */ --tooltip-bg: var(--color-bg-overlay); --tooltip-border: var(--color-border-dim); --tooltip-text: var(--color-text-primary); --tooltip-shadow: var(--shadow-xl); --tooltip-radius: var(--radius-xs); --tooltip-max-width: 320px; /* --- Warning Banners --- */ --banner-warning-bg: #262008; --banner-warning-border: var(--color-status-warning); --banner-warning-text: var(--color-status-warning-fg); --banner-danger-bg: #2a0808; --banner-danger-border: var(--color-blood-mid); --banner-danger-text: var(--color-blood-bright); --banner-success-bg: #0a1e08; --banner-success-border: var(--color-sage); --banner-success-text: var(--color-sage-text); /* --- Scrollbars --- */ --scrollbar-track: var(--color-bg-base); --scrollbar-thumb: var(--color-border-dim); --scrollbar-thumb-hover: var(--color-border-strong); --scrollbar-width: 6px; } /* ──────────────────────────────────────────────────────── * DARK MODE IS THE ONLY MODE. * These exist for potential future light/print modes. * ──────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { /* Override: this game does not operate in daylight. */ :root { color-scheme: dark; } } /* ──────────────────────────────────────────────────────── * REDUCED MOTION * Kill the ember glow animations for users who prefer it. * ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-deliberate:0ms; --transition-color: none; --transition-glow: none; --transition-opacity: none; --transition-transform: none; --transition-all: none; } }