/* ============================================================ 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; } /* === Header cards — follow the active scheme === Ghost's header card writes the text colour as an inline style (it defaults to #FFFFFF, assuming a dark background image). That is a fixed value chosen in the editor, so it cannot know which of our three schemes is active — on parchment the default renders white-on-white and disappears. Only transparent-background cards are overridden: a card given its own dark background or photo keeps the light text it needs. !important is required because an inline style otherwise wins. */ .kg-header-card[data-background-color="transparent"] .kg-header-card-heading, .kg-header-card[data-background-color="transparent"] .kg-header-card-subheading { color: var(--iv-text) !important; } /* === Button cards === Ghost's button card has no size control in the editor, and Dawn only sets font-size: 1em, so a button ends up exactly as big as the paragraph next to it. Its height and padding are both expressed in em, so font-size is the one lever that scales the whole button. Adjust this number to resize. */ .kg-card.kg-button-card a.kg-btn { font-size: 1.3em; } /* Ghost paints button cards with --ghost-accent-color, the single Accent colour from Settings → Design. That is one fixed value, so it cannot follow the light/dark/heritage schemes — point the buttons at the theme's own accent instead. The label takes --iv-surface rather than --iv-bg: against the heritage gold, bg gives only 3.85:1 while surface reaches 4.76:1, which clears AA without leaning on the large-text exemption. Selectors are deliberately this long: Dawn styles buttons through .kg-card.kg-button-card .kg-btn and Ghost's own cards.min.css — injected by ghost_head after this file — through .kg-button-card a.kg-btn-accent. A shorter selector loses to both, so match their shape rather than reach for !important. */ .kg-card.kg-button-card a.kg-btn-accent { background-color: var(--iv-accent); color: var(--iv-surface); } .kg-card.kg-button-card a.kg-btn-accent:hover { background-color: var(--iv-accent-hover); color: var(--iv-surface); } /* === 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; }