/* ============================================================ Ilmanvartijat brand overlay for Ghost Dawn theme Loaded after built/screen.css — overrides Dawn CSS variables. Three schemes via [data-theme] attribute on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap'); /* === Brand tokens — Light (default) === */ :root { --iv-bg: #efe3c8; --iv-surface: #f8f0de; --iv-text: #2a1f12; --iv-text-secondary: #6a4a1f; --iv-accent: #2f4a2a; --iv-accent-hover: #1d2f1b; --iv-gold: #c39a45; --iv-blood: #7a2218; --iv-border: #d4c090; /* Remap Dawn's variables to brand tokens */ --brand-color: var(--iv-accent); --primary-text-color: var(--iv-text); --secondary-text-color: var(--iv-text-secondary); --white-color: var(--iv-bg); --lighter-gray-color: var(--iv-surface); --light-gray-color: var(--iv-border); --mid-gray-color: var(--iv-border); --dark-gray-color: var(--iv-text); --darker-gray-color: var(--iv-text); --green-color: var(--iv-accent); --red-color: var(--iv-blood); /* Brand fonts */ --font-sans: 'Cormorant Garamond', Georgia, serif; --font-serif: 'Cinzel', Georgia, serif; } /* === Dark scheme === */ html[data-theme="dark"] { --iv-bg: #1a1a2e; --iv-surface: #2f333c; --iv-text: #e8e2d6; --iv-text-secondary: #9aa8b0; --iv-accent: #3ac0d4; --iv-accent-hover: #2a9aad; --iv-gold: #c39a45; --iv-border: #3a3a5c; } /* === Heritage scheme === */ html[data-theme="heritage"] { --iv-bg: #2a3a24; --iv-surface: #1d2a19; --iv-text: #f5e6c8; --iv-text-secondary: #c9b989; --iv-accent: #b38a4a; --iv-accent-hover: #d4a660; --iv-gold: #c39a45; --iv-border: #5a6f47; } /* === Header background — explicit override so dark/heritage schemes apply === */ .gh-head { background-color: var(--iv-surface); color: var(--iv-text); } /* === Heading font === */ h1, h2, h3, h4, h5, h6, .gh-head-logo { font-family: 'Cinzel', Georgia, serif; } /* === Shared button styles for our toggle buttons === */ .iv-text-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--iv-border); border-radius: 4px; background: transparent; color: var(--iv-text); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1; } .iv-text-btn:hover { background-color: var(--iv-surface); border-color: var(--iv-gold); color: var(--iv-accent); } .iv-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; font-size: 1.6rem; padding: 0; line-height: 1; transition: opacity 0.2s; } .iv-icon-btn:hover { opacity: 0.7; } .iv-splash-back { display: block; width: 100%; padding: 2px 0; background: transparent; border: none; color: var(--iv-text-secondary); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.1rem; text-align: center; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; white-space: nowrap; line-height: 1; } .iv-splash-back:hover { opacity: 1; text-decoration: underline; }