/** * Theme-native header + footer chrome — kate-angelo-child v1.4.0 (Daria). * * Values below are copied from getComputedStyle() readings taken live * against https://staging.kateangelo.com's EXISTING Elementor header * (#7729) / footer (#7765), not guessed. See header.php / footer.php file * comments for the full verification notes. * * Fonts: Oswald (already enqueued sitewide by functions.php since v1.2.7) * is reused as-is. Merriweather / Urbanist / Space Mono are the header * nav / footer tagline / footer-link faces respectively; Space Mono is * already enqueued sitewide too. Merriweather + Urbanist were NOT * previously enqueued by this theme (they were only ever being supplied by * Elementor's own Kit CSS, which this round is deliberately making * non-load-bearing for header/footer) — enqueued fresh below via * ka_child_header_footer_fonts() in functions.php so this chrome no longer * depends on Elementor continuing to load anything. */ :root { --ka-navy: #020F24; --ka-text: #EEF2F8; --ka-gold: #F5D000; --ka-field-blue: #0F3271; /* Bumped modestly (74→84 / 64→70) for more breathing room per Kate's * request this round — a small, tasteful increase, not a redesign. */ --ka-header-h: 84px; --ka-header-h-mobile: 70px; /* SECONDARY font role (Daria, Phase 1 refinement round). Kate likes * "Priego" (used on cassandraworthy.com) but it's a self-hosted * commercial font, not on Google Fonts — she approved Hanken Grotesk as * a Google-hosted look-alike SECONDARY face. Deliberately a single * variable so swapping to a different look-alike later (Kate mentioned * Figtree or Mulish as possible future alternatives) is a one-line * change here, not a hunt-and-replace across the theme + the KBM * plugin's home-landing.css (which references this same variable for * the home page's reviews-subtitle text — see that file's .qz-attr-role * rule). Loaded via the 'ka-fonts' Google Fonts URL in functions.php * (semicolon-separated weight syntax — see that file's own comment for * why commas would silently break the ENTIRE combined font request). * Does NOT touch headings (stay Oswald) or pull-quotes (stay Cormorant * Garamond) — this is a new role, not a reassignment of an existing one. */ --ka-font-secondary: 'Hanken Grotesk', sans-serif; } /* ── HEADER ────────────────────────────────────────────────────────────── */ /* BUGFIX (Daria, staging verification round, v1.4.0 deploy): the OLD * Elementor header template (post #7729) that this header.php replaces * carries its own per-element "custom CSS" (baked into * wp-content/uploads/elementor/css/post-7729.css, which Elementor keeps * enqueueing sitewide regardless of whether that template's markup ever * prints — Elementor's asset pipeline decides what to enqueue from its own * stored display conditions, independent of Astra's template-hierarchy * override below) that happens to target the EXACT same class name we chose * for the new header: `.ka-site-header, .ka-site-header.elementor-sticky * --active { background-color: transparent !important; box-shadow: none * !important; }`, unconditionally, on every page. Confirmed live via * Playwright + document.styleSheets enumeration: this collision was making * our new header render fully transparent on EVERY page (not just the * home-page top-of-scroll state where transparent is actually correct) — * e.g. the About/Contact header nav was rendering as near-invisible pale * text on a white page background. Since that legacy stylesheet's rule * carries !important, a same-or-lower-specificity override here would only * win by fragile output order. Fixed by ALSO selecting the element's * own `#ka-site-header` id (already present in header.php's markup) with * !important on background-color only: an id selector's specificity always * beats a class-only selector regardless of stylesheet order, so this wins * deterministically. No markup or JS changed; only this background-color * fight needed !important — box-shadow below is untouched since Elementor's * legacy rule loses that property fight already (its box-shadow:none * !important only fires on .elementor-sticky--active, a class nothing in * the new header markup ever carries). */ .ka-site-header, #ka-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: var(--ka-header-h); background-color: var(--ka-navy) !important; box-shadow: none; transition: background-color .35s ease, box-shadow .35s ease; } /* ── ADMIN BAR OFFSET (Daria, refinement round) ────────────────────────── * WordPress adds `body.admin-bar` for logged-in users and renders its own * fixed-position toolbar at the very top of the viewport — 32px tall by * default, dropping to 46px tall at WordPress core's OWN admin-bar * responsive breakpoint (max-width: 782px, defined in WP core's * wp-admin/css/admin-bar.min.css). That 782px breakpoint is intentionally * NOT the same as this stylesheet's own 1024px mobile-nav breakpoint below * — decoupling them means this always lines up with the toolbar's REAL * height at any viewport width, independent of when our own nav switches * to its mobile layout. * * Both selectors below target the element by class AND by id: the base * `#ka-site-header` rule above sets `top: 0` via the id selector, which * outranks a class-only selector by specificity regardless of stylesheet * order (see the bugfix comment further up this file for the same * reasoning applied to background-color) — so the override here must also * carry the id to win deterministically. */ body.admin-bar .ka-site-header, body.admin-bar #ka-site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .ka-site-header, body.admin-bar #ka-site-header { top: 46px; } } .ka-site-header__inner { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 36px; /* was 32px — modest breathing-room bump, matches header height increase above */ } .ka-site-header__logo { font-family: 'Oswald', Impact, sans-serif; font-size: 18px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ka-text); text-decoration: none; white-space: nowrap; } .ka-site-header__logo span { color: var(--ka-gold); } .ka-site-header__nav { flex: 1; display: flex; justify-content: center; } .ka-site-header__menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .ka-site-header__menu li { margin: 0; } .ka-site-header__menu a { display: inline-block; /* v1.0.3 (Daria, Phase 1 refinement round): Merriweather → Hanken * Grotesk (--ka-font-secondary) + drop the all-caps/heavy-tracking * treatment, per Kate's approved secondary-font spec (weight 400, * text-transform: none, line-height 1.4 — non-negotiable; font-size * judged against this header's existing scale rather than reusing the * reviews-subtitle's 18px reference verbatim, since 18px read too large * against this header's 84px height / other 11px-scale chrome). * Letter-spacing pulled way down from the old 2.2px: that value was * tuned for tiny all-caps text and reads as oddly gappy on normal-case * text at a larger size. */ font-family: var(--ka-font-secondary); font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: .2px; text-transform: none; color: rgba(238, 242, 248, .55); text-decoration: none; padding: 15px 20px; /* was 13px 18px — breathing-room bump */ cursor: pointer; /* explicit: standard hover affordance, sitewide fix */ transition: color .2s ease; } .ka-site-header__menu a:hover, .ka-site-header__menu li.current-menu-item > a { color: var(--ka-gold); } .ka-site-header__cta { /* v1.6.0 (Daria, staging batch round): Merriweather → --ka-font-secondary * (Hanken Grotesk) — this button was the one piece of sticky-nav chrome * NOT already on the nav's Hanken Grotesk secondary-font system (the * links beside it already switched in an earlier round; this button was * missed). Kept uppercase/letter-spacing/weight as-is — only the actual * typeface changes, matching how the links themselves were converted. */ font-family: var(--ka-font-secondary); font-size: 11px; font-weight: 400; letter-spacing: 1.65px; text-transform: uppercase; color: var(--ka-navy); background: var(--ka-gold); border-radius: 2px; /* Equal top/bottom padding, and the line-box centered via inline-flex * (rather than inline-block + line-height) so the glyphs sit dead-center * regardless of this font's own ascent/descent metrics — belt-and- * suspenders for the "reduce bottom padding to match the top" ask, * since the box-model padding here was already symmetric (10px/10px) * but flex-centering removes any remaining font-metric-driven bias. */ display: inline-flex; align-items: center; line-height: 1; padding: 10px 22px; text-decoration: none; white-space: nowrap; cursor: pointer; /* explicit: standard hover affordance, sitewide fix */ transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease; } .ka-site-header__cta:hover { background: #fecf5b; transform: translateY(-1px); color: var(--ka-navy); } .ka-site-header__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .ka-site-header__toggle span { display: block; width: 22px; height: 2px; background: var(--ka-text); transition: transform .2s ease, opacity .2s ease; } .ka-site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ka-site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ka-site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ka-site-header__mobile-nav { display: none; } /* Home page: transparent-over-hero at top, solid+shadow once the Kate Book * Manager plugin's own scroll listener (unchanged, still generic and * unrelated to Elementor) toggles body.kbm-scrolled. See header.php's * comment for the full verification of this mechanism. * * Both rules below ALSO select the `#ka-site-header` id, with !important on * background-color — matching the bugfix above and for the same reason: * these two rules must each still outrank the base `#ka-site-header` * !important rule above by specificity (id + body + N classes > id alone), * while both remain immune to the stale Elementor `.ka-site-header` * !important rule (id always outranks a class-only selector). Without the * id here, the base rule's new !important would otherwise always win on * every page, including flattening the home page's transparent-at-top * hero effect to solid navy. See this file's other bugfix comment above for * the full root-cause writeup. */ body.home .ka-site-header, body.home #ka-site-header { background-color: transparent !important; box-shadow: none; } body.home.kbm-scrolled .ka-site-header, body.home.kbm-scrolled #ka-site-header { background-color: var(--ka-navy) !important; box-shadow: 0 6px 30px rgba(0, 0, 0, .35); } /* Push page content below the fixed header everywhere it renders EXCEPT * the home page (which wants the header to overlay its full-bleed hero, * matching body.kbm-home-canvas's own existing zero-top-padding rule) and * book pages (which never get this header at all — see header.php). */ body:not(.home):not(.single-book) #content { padding-top: var(--ka-header-h); } @media (max-width: 1024px) { .ka-site-header, body:not(.home):not(.single-book) #content { --ka-header-h: var(--ka-header-h-mobile); } .ka-site-header__nav { display: none; } .ka-site-header__toggle { display: flex; } .ka-site-header__mobile-nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 12px 24px rgba(0, 0, 0, .18); max-height: 0; overflow: hidden; transition: max-height .3s ease; } .ka-site-header__mobile-nav.is-open { max-height: 70vh; overflow-y: auto; } .ka-site-header__mobile-menu { list-style: none; margin: 0; padding: 8px 0; } .ka-site-header__mobile-menu a { display: block; /* Same Hanken Grotesk / normal-case treatment as the desktop nav * above — see that selector's comment for the full spec writeup. */ font-family: var(--ka-font-secondary); font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: .2px; text-transform: none; color: #33373D; text-decoration: none; padding: 12px 20px; cursor: pointer; /* explicit: standard hover affordance, sitewide fix */ } .ka-site-header__mobile-menu li.current-menu-item > a { background: #f0f0f0; } } /* ── FOOTER ────────────────────────────────────────────────────────────── */ /* v1.1.1 (Daria, textured-backgrounds round, item 2): footer gradient — top * a lifted navy (#0A2438), bottom near-black (#020608), NOT the teal Kate's * reference example used; this is the navy-tuned version per this round's * brief. background-color kept as a same-family solid fallback (this * footer's original flat --ka-navy) since a CSS linear-gradient is pure * computed CSS with nothing to 404 — the fallback here is belt-and- * suspenders for ancient non-gradient-supporting browsers, not a broken- * image concern like the raster textures elsewhere this round. Renders * sitewide: this is the ka-site-footer that footer.php documents as * rendering on every page including the home page and book pages. */ .ka-site-footer { background-color: var(--ka-navy); background-image: linear-gradient(to bottom, #0A2438, #020608); padding: 64px 32px 32px; } .ka-site-footer__top { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 2fr) 1fr 1fr 1fr; gap: 40px; } .ka-site-footer__logo { font-family: 'Oswald', Impact, sans-serif; font-size: 31.5px; font-weight: 900; letter-spacing: 1.89px; text-transform: uppercase; color: var(--ka-text); margin: 0 0 16px; } .ka-site-footer__logo span { color: var(--ka-gold); } /* FONT FIX (Daria, staging round 2 — Kate's reported bug): "the footer text * is using a different font than the rest of the site." Root cause: when * the nav links/CTA were migrated off Merriweather onto this theme's real * secondary/body font token (`--ka-font-secondary`, Hanken Grotesk) in * v1.0.3/v1.6.0, the footer — which sits in this SAME file, right below — * was never revisited. It was still running three different, never- * reconciled one-off faces: Urbanist (tagline, added v1.4.0 for a footer * that no longer exists in that form) and Space Mono (menu links + * newsletter input/submit, the header/footer strangler-fig round's original * placeholder choice). Both are visually foreign next to the nav's Hanken * Grotesk immediately above them. Fix: every non-heading footer text/link/ * form element below now uses `--ka-font-secondary`, matching the nav. * Footer HEADINGS (`__newsletter-heading`, `__col-heading`) and the brand * mark (`__logo`) already correctly use Oswald — this theme's one heading * face, also used for the header logo — so they're untouched; `__copyright` * also stays Oswald deliberately (small tracked-caps trademark-stamp * treatment, consistent with the logo/headings, not a stray font). */ .ka-site-footer__tagline { font-family: var(--ka-font-secondary); font-size: 15px; color: rgba(238, 242, 248, .55); max-width: 420px; margin: 0 0 28px; } .ka-site-footer__newsletter-heading { font-family: 'Oswald', Impact, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.65px; text-transform: uppercase; color: var(--ka-gold); margin: 0 0 14px; } .ka-site-footer__newsletter-form { display: flex; max-width: 360px; } .ka-site-footer__newsletter-input { flex: 1; min-width: 0; background: var(--ka-field-blue); border: 1px solid rgba(255, 255, 255, .15); border-right: none; padding: .7rem 1rem; color: var(--ka-text); font-family: var(--ka-font-secondary); font-size: .75rem; outline: none; } .ka-site-footer__newsletter-input::placeholder { color: rgba(238, 242, 248, .5); } .ka-site-footer__newsletter-submit { background: var(--ka-gold); border: none; padding: .7rem 1.2rem; color: var(--ka-navy); font-family: var(--ka-font-secondary); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .ka-site-footer__col-heading { font-family: 'Oswald', Impact, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.65px; text-transform: uppercase; color: rgba(238, 242, 248, .42); margin: 0 0 18px; } .ka-site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .ka-site-footer__menu a { font-family: var(--ka-font-secondary); font-size: 13px; color: rgba(238, 242, 248, .55); text-decoration: none; cursor: pointer; /* explicit: standard hover affordance, sitewide fix */ transition: color .2s ease; } .ka-site-footer__menu a:hover, .ka-site-footer__menu li.current-menu-item > a { color: var(--ka-gold); } .ka-site-footer__bottom { max-width: 1440px; margin: 40px auto 0; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ka-site-footer__copyright { font-family: 'Oswald', Impact, sans-serif; font-size: 11px; letter-spacing: 1.1px; color: rgba(238, 242, 248, .4); margin: 0; } .ka-site-footer__socials { display: flex; gap: 10px; } .ka-site-footer__socials a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(238, 242, 248, .12); color: rgba(238, 242, 248, .7); cursor: pointer; /* explicit: standard hover affordance, sitewide fix */ transition: background-color .2s ease, color .2s ease; } .ka-site-footer__socials a:hover { background: var(--ka-gold); color: var(--ka-navy); } .ka-site-footer__socials svg { width: 15px; height: 15px; fill: currentColor; } @media (max-width: 900px) { .ka-site-footer__top { grid-template-columns: 1fr 1fr; row-gap: 40px; } .ka-site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .ka-site-footer__top { grid-template-columns: 1fr; } .ka-site-footer__bottom { flex-direction: column; align-items: flex-start; } }