/* * Daggerheart: Fractured Worlds — Brand & Design System CSS * Implements the brand guide v1.0 as CSS custom properties. * * Usage: * - Apply a realm theme by adding a class to or any container: * e.g. class="realm-iron-dominion" * - Dark mode: add class="dark" to or use prefers-color-scheme. */ /* ========================================================================= GOOGLE FONTS IMPORT (reference — include via in base.html) Cinzel, Cinzel Decorative, Crimson Pro, DM Mono Realm fonts: Oswald, Source Serif 4, IM Fell English, Lora, Josefin Sans, Crimson Text, Playfair Display, EB Garamond, Exo 2, Nunito ========================================================================= */ /* ========================================================================= GLOBAL DESIGN TOKENS ========================================================================= */ :root { /* --- Foundation Colors --- */ --color-obsidian: #0D0D12; --color-void-deep: #1A1826; --color-parchment: #F2EDE3; --color-parchment-dark: #EAE3D5; /* --- Brand Accent Colors --- */ --color-gold-prime: #C89B3C; --color-gold-light: #E8C96A; --color-silver-mid: #9BA5B5; --color-silver-dark: #5A6478; --color-shard-purple: #3D3053; /* --- Functional Colors --- */ --color-danger: #C84B4B; --color-success: #4B8B3B; --color-warning: #C87C2A; /* --- Light Mode Semantic Tokens --- */ --bg-primary: var(--color-parchment); --bg-secondary: var(--color-parchment-dark); --text-primary: var(--color-obsidian); --text-secondary: var(--color-silver-dark); --text-caption: var(--color-silver-mid); --accent-primary: var(--color-gold-prime); --accent-secondary: var(--color-gold-light); --border-color: var(--color-silver-dark); --nav-bg: var(--color-void-deep); --nav-text: var(--color-parchment); /* --- Typography --- */ --font-display: 'Cinzel', serif; --font-display-deco: 'Cinzel Decorative', serif; --font-body: 'Crimson Pro', Georgia, serif; --font-utility: 'DM Mono', 'Courier New', monospace; /* --- Typographic Scale --- */ --text-h1: 3rem; /* 48pt */ --text-h2: 2rem; /* 32pt */ --text-h3: 1.5rem; /* 24pt */ --text-body-lg: 1.125rem; --text-body: 1rem; --text-caption-size: 0.75rem; --text-stat: 0.875rem; /* --- Layout --- */ --content-max-width: 780px; --layout-max-width: 1200px; --sidebar-border-width: 3px; /* --- Shardfall Gradient --- */ --gradient-shardfall: linear-gradient( 180deg, var(--color-gold-prime) 0%, var(--color-shard-purple) 100% ); /* --- Realm-specific tokens (overridden per theme) --- */ --realm-primary: var(--color-shard-purple); --realm-secondary: var(--color-silver-mid); --realm-accent: var(--color-gold-prime); --realm-font-display: var(--font-display); --realm-font-body: var(--font-body); --realm-bg: var(--bg-secondary); } /* ========================================================================= DARK MODE ========================================================================= */ @media (prefers-color-scheme: dark) { :root { --bg-primary: var(--color-void-deep); --bg-secondary: #231F33; --text-primary: var(--color-parchment); --text-secondary: var(--color-silver-mid); --border-color: var(--color-silver-dark); } } html.dark { --bg-primary: var(--color-void-deep); --bg-secondary: #231F33; --text-primary: var(--color-parchment); --text-secondary: var(--color-silver-mid); --border-color: var(--color-silver-dark); } /* ========================================================================= REALM THEMES Each realm overrides the --realm-* tokens and sets display/body fonts. ========================================================================= */ /* Iron Dominion */ .realm-iron-dominion { --realm-primary: #3D3D3D; --realm-secondary: #8B7355; --realm-accent: #C0A882; --realm-font-display: 'Oswald', sans-serif; --realm-font-body: 'Source Serif 4', serif; --realm-bg: #2A2A2A10; } /* Emerald Wilds */ .realm-emerald-wilds { --realm-primary: #2D5A1B; --realm-secondary: #5C8A3C; --realm-accent: #A8D878; --realm-font-display: 'IM Fell English', serif; --realm-font-body: 'Lora', serif; --realm-bg: #2D5A1B10; } /* Aether Republic */ .realm-aether-republic { --realm-primary: #1B3A6B; --realm-secondary: #2E6CA4; --realm-accent: #7EC8E3; --realm-font-display: 'Josefin Sans', sans-serif; --realm-font-body: 'Source Serif 4', serif; --realm-bg: #1B3A6B10; } /* Infernal Marches */ .realm-infernal-marches { --realm-primary: #8B1A1A; --realm-secondary: #C44B1B; --realm-accent: #F0A030; --realm-font-display: 'Cinzel', serif; --realm-font-body: 'Crimson Text', serif; --realm-bg: #8B1A1A10; } /* Velvet Shadow */ .realm-velvet-shadow { --realm-primary: #2D1B4E; --realm-secondary: #6B4C8A; --realm-accent: #B89FD8; --realm-font-display: 'Playfair Display', serif; --realm-font-body: 'EB Garamond', serif; --realm-bg: #2D1B4E10; } /* Bioforge Continuum */ .realm-bioforge-continuum { --realm-primary: #1E4A1E; --realm-secondary: #3D7A3D; --realm-accent: #88CC44; --realm-font-display: 'Exo 2', sans-serif; --realm-font-body: 'Nunito', sans-serif; --realm-bg: #1E4A1E10; } /* Stormbound / Cross-Realm */ .realm-stormbound, .realm-cross-realm { --realm-primary: var(--color-shard-purple); --realm-secondary: var(--color-gold-prime); --realm-accent: var(--color-gold-light); --realm-font-display: var(--font-display); --realm-font-body: var(--font-body); --realm-bg: #3D305308; } /* ========================================================================= BASE STYLES ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; } /* ========================================================================= TYPOGRAPHY ========================================================================= */ h1, .h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 700; color: var(--accent-primary); letter-spacing: 0.02em; margin-top: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 400; color: var(--accent-primary); } h3, .h3 { font-family: var(--font-body); font-size: var(--text-h3); font-weight: 600; letter-spacing: 0.05em; } caption, .caption, .label-text { font-family: var(--font-body); font-size: var(--text-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-caption); } .stat, code, pre { font-family: var(--font-utility); font-size: var(--text-stat); } a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-secondary); text-decoration: underline; } /* ========================================================================= LAYOUT ========================================================================= */ .container { max-width: var(--layout-max-width); margin: 0 auto; padding: 0 1.5rem; } .content-body { max-width: var(--content-max-width); margin: 0 auto; padding: 2rem 1.5rem; } /* ========================================================================= NAVIGATION ========================================================================= */ .site-nav { background-color: var(--nav-bg); color: var(--nav-text); padding: 0.75rem 0; border-bottom: 2px solid var(--color-gold-prime); } .site-nav .container { display: flex; align-items: center; gap: 2rem; } .site-nav .wordmark { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-gold-prime); text-decoration: none; letter-spacing: 0.05em; } .site-nav .wordmark span { font-family: var(--font-display-deco); font-size: 0.7em; display: block; color: var(--color-silver-mid); letter-spacing: 0.1em; } .nav-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex: 1; } .nav-links a { color: var(--color-silver-mid); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; } .nav-links a:hover { color: var(--color-gold-light); text-decoration: none; } .nav-auth { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; } .nav-auth a { color: var(--color-silver-mid); } /* ========================================================================= THE RULE-TEXT-RULE MOTIF ========================================================================= */ .section-label { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1rem; } .section-label::before, .section-label::after { content: ''; flex: 1; height: 1px; background-color: var(--accent-primary); } .section-label span { font-family: var(--font-body); font-size: var(--text-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-caption); white-space: nowrap; } /* ========================================================================= SIDEBAR / CALLOUT ARCHITECTURE ========================================================================= */ .realm-sidebar { background-color: var(--realm-bg); border-left: var(--sidebar-border-width) solid var(--realm-primary); padding: 1rem 1.25rem; margin: 1.5rem 0; font-family: var(--realm-font-body); font-size: 0.875rem; } .realm-sidebar .sidebar-header { font-family: var(--realm-font-display); font-size: 0.9375rem; font-weight: 600; color: var(--realm-primary); margin-bottom: 0.5rem; } /* Responsive: collapse sidebar to inline callout */ @media (max-width: 768px) { .realm-sidebar { border-left: none; border-top: var(--sidebar-border-width) solid var(--realm-primary); padding: 0.75rem 1rem; } } /* ========================================================================= STAT BLOCK ========================================================================= */ .stat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--realm-primary); background-color: var(--bg-primary); font-size: 0.875rem; margin: 1.5rem 0; max-width: 600px; } .stat-block-header { grid-column: 1 / -1; background-color: var(--realm-primary); color: #fff; padding: 0.5rem 0.75rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; } .stat-block-left { padding: 0.75rem; border-right: 1px solid var(--border-color); } .stat-block-right { padding: 0.75rem; font-family: var(--font-utility); font-size: var(--text-stat); } .stat-block-right .stat-row { display: flex; justify-content: space-between; padding: 0.15rem 0; border-bottom: 1px solid var(--bg-secondary); } .stat-feature-header { font-weight: 600; color: var(--realm-accent); border-top: 2px solid var(--realm-accent); padding-top: 0.4rem; margin-top: 0.5rem; font-size: var(--text-caption-size); text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================= CARDS ========================================================================= */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-top: 3px solid var(--realm-primary); padding: 1.25rem; } .card-title { font-family: var(--font-display); font-size: 1.125rem; color: var(--accent-primary); margin: 0 0 0.5rem; } .card-meta { font-size: var(--text-caption-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-caption); margin-bottom: 0.75rem; } /* ========================================================================= TAGS / CHIPS ========================================================================= */ .tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; } .tag { display: inline-block; padding: 0.15rem 0.6rem; font-size: var(--text-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); } /* ========================================================================= WORKFLOW STATUS BADGES ========================================================================= */ .status-badge { display: inline-block; padding: 0.1rem 0.5rem; font-size: var(--text-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .status-draft { background: #666; color: #fff; } .status-in-review { background: var(--color-warning); color: #fff; } .status-published { background: var(--color-success); color: #fff; } .status-archived { background: var(--color-silver-dark); color: #fff; } .status-rejected { background: var(--color-danger); color: #fff; } /* ========================================================================= STORMBOUND / REALITY ORIGIN CARD ========================================================================= */ .stormbound-card { border: 2px solid var(--color-shard-purple); background: var(--bg-primary); padding: 1.25rem; max-width: 360px; } .stormbound-card .card-title { font-family: var(--font-display); letter-spacing: 0.08em; color: var(--color-shard-purple); } .stormbound-card .card-body { font-family: var(--font-body); } .stormbound-card .card-stat { font-family: var(--font-utility); font-size: var(--text-stat); color: var(--color-shard-purple); } /* ========================================================================= MESSAGES / ALERTS ========================================================================= */ .messages { list-style: none; margin: 1rem 0; padding: 0; } .message { padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-left: 4px solid var(--color-silver-mid); background: var(--bg-secondary); } .message.success { border-color: var(--color-success); } .message.error { border-color: var(--color-danger); } .message.warning { border-color: var(--color-warning); } /* ========================================================================= FORMS ========================================================================= */ .form-group { margin-bottom: 1.25rem; } label { display: block; font-size: var(--text-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); margin-bottom: 0.35rem; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-gold-prime); outline-offset: 1px; } .btn { display: inline-block; padding: 0.5rem 1.25rem; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; border: none; background: var(--accent-primary); color: var(--color-void-deep); text-decoration: none; transition: background 0.15s; } .btn:hover { background: var(--accent-secondary); color: var(--color-obsidian); text-decoration: none; } .btn-outline { background: transparent; border: 2px solid var(--accent-primary); color: var(--accent-primary); } .btn-outline:hover { background: var(--accent-primary); color: var(--color-void-deep); } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { background: var(--color-void-deep); color: var(--color-silver-mid); padding: 2rem 0; margin-top: 4rem; font-size: 0.85rem; border-top: 1px solid var(--color-gold-prime); } .site-footer .footer-inner { max-width: var(--layout-max-width); margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .site-footer .wordmark { font-family: var(--font-display); color: var(--color-gold-prime); font-size: 0.9rem; letter-spacing: 0.05em; }