/* sky-header.css — THE SINGLE SOURCE OF TRUTH for every page header. Sky Map · v3 · 2026-08-20 v2: the intro paragraph (.lead/.sub) gained the full type control set — font / weight / colour / tracking / case — matching title + eyebrow. v3: mobile title cap 12vw → 10vw so a long single-word title fits one line (fixes "PRESENTATIONS" breaking mid-word); desktop 44px cap unchanged. ------------------------------------------------------------------ Every page (index, events, tonight, moon-tonight, account, natal, natal-share, birth-view, presentations, chat, maintenance) loads this file LAST in its , so these rules win over any older per-page header CSS. Edit the header look HERE, once — it applies everywhere. Driven entirely by the admin "Home header" panel (config.homeHeader → --hh-* CSS vars, set in js/config.js). Every value falls back to a sensible literal, so with no saved config the headers still render. Structure on every page: eyebrow → title → lead(sub) ------------------------------------------------------------------ */ /* ---- EYEBROW (small line above the title) ---- */ .eyebrow, .natal-eyebrow, .seq-eyebrow, .share-head .eyebrow, .start-head .start-eyebrow, #guide-panel .guide-head .eyebrow { margin: 0 0 var(--hh-gap, 6px); text-align: center; font-family: var(--hh-eyebrow-font, var(--font-eyebrow, 'Lato')), sans-serif; font-size: var(--hh-eyebrow-size, 12px); font-weight: var(--hh-eyebrow-weight, 700); letter-spacing: var(--hh-eyebrow-tracking, 0.2em); text-transform: var(--hh-eyebrow-transform, uppercase); color: var(--hh-eyebrow-color, var(--accent-text, #6fe3d6)); line-height: var(--hh-eyebrow-lh, 1.3); } .eyebrow:empty { display: none; } /* ---- TITLE ---- */ .wrap > h1, .pg-head h1, .share-head h1, #natal-result-title, #natal-entry-title, .start-card h1, #guide-panel .guide-head h2, .maint-title { margin: 0 0 var(--hh-head-gap, 14px); text-align: center; font-family: var(--hh-title-font, var(--font-heading, 'Lato')), sans-serif; /* honours the admin size on desktop (the 44px cap wins on wide screens); scales on phones so long titles fit — 10vw keeps a 13-char single word like "PRESENTATIONS" on one line down to ~360px wide (12vw broke it mid-word). Desktop is unaffected: 44px < 10vw only below ~440px. */ font-size: min(var(--hh-title-size, 44px), 10vw); font-weight: var(--hh-title-weight, 800); letter-spacing: var(--hh-title-tracking, 0); text-transform: var(--hh-title-transform, uppercase); color: var(--hh-title-color, var(--text-primary, #f2f6f5)); /* clamped to a safe range: your value applies, but a too-tight number can't overlap the glyphs / cram the wrapped lines */ line-height: clamp(0.8, var(--hh-title-lh, 1.1), 2); overflow-wrap: break-word; text-wrap: balance; } /* ---- LEAD / SUBTITLE (intro paragraph) ---- */ .sub, .pg-sub, .share-head .sub, .start-card .lead, #natal-intro { text-align: center; font-family: var(--hh-lead-font, var(--font-body, 'Lato')), sans-serif; font-size: var(--hh-lead-size, 14px); font-weight: var(--hh-lead-weight, 400); letter-spacing: var(--hh-lead-tracking, 0); text-transform: var(--hh-lead-transform, none); color: var(--hh-lead-color, var(--text-secondary, #9AA6A4)); line-height: clamp(1.1, var(--hh-lead-lh, 1.5), 2.4); }