/* * Shubh Laabh Arts — Global Header & Footer * Styles for wp-content/themes/shubh-laabh-arts/parts/header.html * and wp-content/themes/shubh-laabh-arts/parts/footer.html * * Decorative artwork lives in ../images/decorative/. Every reference below is a * path relative to THIS stylesheet, so the URLs resolve correctly on localhost, * staging and production without hardcoding a domain. * * Every artwork box is given an aspect-ratio matching its source file exactly, * so contain/cover can never stretch or squash the art. */ /* ========================================= SHUBH LAABH ARTS — GLOBAL DESIGN TOKENS Every color and font below is an ALIAS onto WordPress's own global theme (wp-content/themes/shubh-laabh-arts/theme.json) — no brand color or font stack is redeclared here. Change the palette or type ramp in theme.json and every value in this file follows automatically. Alpha-blended variants (soft borders, faded gradients, the ivory veil behind the footer quote) are derived from those same tokens via color-mix(), rather than a second hardcoded hex/rgba copy that could drift out of sync with the palette. ========================================= */ :root { --sla-color-navy: var(--wp--preset--color--peacock-navy); --sla-color-navy-deep: var(--wp--preset--color--deep-navy); --sla-color-gold: var(--wp--preset--color--champagne-gold); --sla-color-gold-light: var(--wp--preset--color--light-gold); --sla-color-ivory: var(--wp--preset--color--ivory); --sla-color-cream: var(--wp--preset--color--cream); --sla-color-muted: var(--wp--preset--color--muted); --sla-color-white: var(--wp--preset--color--white); --sla-gold-soft: color-mix(in srgb, var(--sla-color-gold) 42%, transparent); --sla-gold-faint: color-mix(in srgb, var(--sla-color-gold) 22%, transparent); --sla-gold-half: color-mix(in srgb, var(--sla-color-gold) 50%, transparent); --sla-gold-thread: color-mix(in srgb, var(--sla-color-gold) 32%, transparent); --sla-white-faint: color-mix(in srgb, var(--sla-color-white) 25%, transparent); /* theme.json's "display"/"body" font-family tokens ARE Cormorant Garamond * and Manrope (loaded site-wide by functions.php); --sla-font-display and * --sla-font-quote both point at the same "display" token — the two * roles are differentiated by weight/style below, not by typeface. */ --sla-font-display: var(--wp--preset--font-family--display); --sla-font-quote: var(--wp--preset--font-family--display); --sla-font-body: var(--wp--preset--font-family--body); /* Shared content container — header and footer resolve to the SAME * left/right edges (see the override rule in the "Shared content * container" section below). 1400px matches the footer's original * authored width; the header is widened to meet it. */ --sla-container-max: 1400px; /* Height of the footer's copyright row, kept in one place so the temple * artwork (which anchors to the divider above it) always lines up. */ --sla-footer-bottom-h: 58px; /* header-edge-art.jpg — 2073 x 236 */ --sla-art-header-edge: url("../images/decorative/header-edge-art.jpg"); /* header-logo-horizontal.png — 2172 x 724 */ --sla-art-logo-horizontal: url("../images/decorative/header-logo-horizontal.png"); /* footer-mandala.png — 546 x 1024 (right half of a mandala, centre on its own left edge) */ --sla-art-mandala: url("../images/decorative/footer-mandala.png"); /* footer-temple.png — 1774 x 887 */ --sla-art-temple: url("../images/decorative/footer-temple.png"); } /* * Lighter delivery of the same artwork: resized WebP copies (generated by * shubh-laabh-core/tools/generate-image-derivatives.php, each >= 2x its * largest displayed size), picked via image-set(). Browsers without * image-set type() support skip this block and keep the originals above. */ @supports (background-image: image-set(url("x.webp") type("image/webp"))) { :root { --sla-art-logo-horizontal: image-set(url("../images/decorative/header-logo-horizontal-800w.webp") type("image/webp"), url("../images/decorative/header-logo-horizontal.png") type("image/png")); --sla-art-mandala: image-set(url("../images/decorative/footer-mandala-546w.webp") type("image/webp"), url("../images/decorative/footer-mandala.png") type("image/png")); --sla-art-temple: image-set(url("../images/decorative/footer-temple-1240w.webp") type("image/webp"), url("../images/decorative/footer-temple.png") type("image/png")); } /* Below 768px the temple art is at most 320px wide and the mandala at * most 86px wide: smaller files. */ @media (max-width: 767px) { :root { --sla-art-temple: image-set(url("../images/decorative/footer-temple-960w.webp") type("image/webp"), url("../images/decorative/footer-temple.png") type("image/png")); --sla-art-mandala: image-set(url("../images/decorative/footer-mandala-280w.webp") type("image/webp"), url("../images/decorative/footer-mandala.png") type("image/png")); } } } /* ----------------------------------------------------------------------- * Shared helpers * --------------------------------------------------------------------- */ .sla-icon { width: 22px; height: 22px; } .sla-icon--sm { width: 18px; height: 18px; } .sla-icon--chevron { width: 14px; height: 14px; } /* Block themes do not always ship core's visually-hidden helper — and * plugin stylesheets that happen to define it (WooCommerce, Elementor) are * not loaded on every page, so the theme provides it globally. */ .screen-reader-text, .sla-footer .screen-reader-text, .sla-header__logo--horizontal img { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------- * Shared content container * WordPress's own "constrained" layout output centers each group's direct * child at that group's OWN contentSize: the header/announcement-bar groups * use theme.json's 1200px default, while the footer group declares 1400px — * two different edges. This overrides max-width on all four content rows to * the same value so header and footer align to one grid; WP's own margin: * auto (same specificity tier, untouched here) still does the centering. * !important matches the existing precedent in this file for beating * WP-generated layout CSS (see .sla-footer__columns below). * * The horizontal padding here is intentionally generous and NOT gated to * narrow viewports: at the 1400px cap it insets the visible content to * roughly 1250–1280px, restoring the more compact look the header had * before this box was widened to match the footer — the CONTENT stays * inset like this, while the header/footer decorative artwork (positioned * on the full-width wrappers, not these rows) still bleeds to the * viewport edge as before. * --------------------------------------------------------------------- */ .sla-announcement-bar__inner, .sla-header__row, .sla-footer__columns, .sla-footer__bottom { max-width: var(--sla-container-max) !important; padding-left: clamp(1.5rem, 4vw, 4.5rem); padding-right: clamp(1.5rem, 4vw, 4.5rem); box-sizing: border-box; } /* ----------------------------------------------------------------------- * Typography baseline * font-family is inherited, so setting it once on each root wrapper covers * every descendant — including WooCommerce-rendered buttons and labels — * without touching theme.json's global tokens used elsewhere on the site. * --------------------------------------------------------------------- */ .sla-announcement-bar, .sla-header__main, .sla-footer { font-family: var(--sla-font-body); } /* ----------------------------------------------------------------------- * Flex-container baseline — every ".sla-*" group below marked "restored" * lost its display:flex (and, where noted, its justify-content/flex-wrap) * when header.php/footer.php replaced the old wp:group blocks with plain * static HTML. Each of those blocks declared a `"layout":{"type":"flex", * ...}` attribute, and WordPress turned that into a *uniquely-generated* * CSS class + rule per block instance (e.g. ".wp-container-core-group-is- * layout-f15824f9{display:flex;...}") rather than anything expressible as * a static selector — that generated stylesheet only exists on a page that * still contains the actual block, so it silently stopped loading once * this markup became static PHP. Restated explicitly here (once each, * matching that block's own original justifyContent/flexWrap attributes) * rather than left as an unstated assumption. .sla-footer__columns is the * one exception — it already overrides to display:grid intentionally, so * it never depended on this at all. * ----------------------------------------------------------------------- * Announcement bar * --------------------------------------------------------------------- */ .sla-announcement-bar { position: relative; z-index: 3; padding-top: calc(var(--wp--preset--spacing--x-small) ); padding-bottom: calc(var(--wp--preset--spacing--x-small) ); } .sla-announcement-bar__inner { display: flex; justify-content: space-between; flex-wrap: nowrap; width: 100%; gap: var(--wp--preset--spacing--small); } .sla-announcement-bar__left, .sla-announcement-bar__right { display: flex; flex-wrap: nowrap; gap: clamp(1.1rem, 1.7vw, 1.85rem); align-items: center; } .sla-announcement-bar__item { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-family: var(--sla-font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.015em; color: var(--sla-color-ivory); white-space: nowrap; } .sla-announcement-bar__item a { color: inherit; text-decoration: none; } .sla-announcement-bar__item a:hover { color: var(--sla-color-gold); } .sla-announcement-bar__item .sla-icon--sm { color: var(--sla-color-gold); stroke-width: 1.3; flex-shrink: 0; } .sla-announcement-bar__divider { width: 1px; height: 18px; background: linear-gradient(180deg, transparent, var(--sla-gold-thread) 25%, var(--sla-gold-thread) 75%, transparent); flex-shrink: 0; } .sla-announcement-bar__locale { cursor: default; } /* ----------------------------------------------------------------------- * Main header row * --------------------------------------------------------------------- */ /* *
(header.php) wraps ONLY the announcement bar + main header — it * has no box of its own taller than those two rows combined, which is * otherwise a hard blocker for position:sticky below: a sticky element can * only remain pinned while its own containing block (normally its parent's * box) still has room left to scroll through, and a parent exactly as tall * as its sticky child has none — the header would immediately scroll back * out with the announcement bar instead of sticking. display:contents * removes only
's own generated BOX from the render tree (the DOM * node, its semantics/landmark role, and every selector that targets it or * its children are all untouched) so its children's containing block * becomes — which spans the full page — giving .sla-header__main * room to stay stuck for the rest of the scroll. header.php has no other * CSS of its own (confirmed: no bare `header {}`/`header > x` rule exists * elsewhere in this file) so nothing else depends on it having a box. * * Scoped to :has(> .sla-header__main) rather than the bare `header` * element — this stylesheet loads site-wide, and an unscoped rule would * also collapse unrelated
elements elsewhere (a blog post's * entry-header, WooCommerce's shop header, etc.). This selector only ever * matches the one global
built by header.php. */ header:has(> .sla-header__main) { display: contents; } /* Sticky-state trigger — see header.php for why this element exists. * height:0 (not e.g. 1px) so it can never itself be mistaken for visible * content and never nudges anything below it by even a sub-pixel; its * document position is fully determined by the announcement bar's height * alone, which never changes, so IntersectionObserver's read of it is a * pure function of scroll position — never of .sla-header__main's height. */ .sla-sticky-sentinel { height: 0; pointer-events: none; } /* ----------------------------------------------------------------------- * Fix for the sticky-header grow/shrink fluctuation: confirmed root cause * was NOT the observer's target (it already only ever watched the * announcement bar / .sla-sticky-sentinel, never the header itself), but * the browser's scroll-anchoring heuristic (on by default in Chromium/ * Firefox). The ~80% shrink transition below changes .sla-header__main's * own rendered height every frame for ~300ms, which — being in normal * flow — shifts the page content beneath it. Scroll anchoring reacts to * that shift by silently adjusting the REAL scroll offset to keep * whatever it picked as the anchor node visually stationary. Verified by * instrumenting window.scrollY with the header parked exactly past the * threshold: with scroll anchoring on, scrollY drifted ~20px on its own * (no scroll input at all) every time .is-stuck toggled — enough to walk * back across the sentinel threshold and re-trigger the opposite state, * over and over. overflow-anchor:none scoped to .sla-header__main alone * did NOT stop this (the anchor node the browser was actually compensating * for lives elsewhere in the tree); disabling anchoring for the whole root * scroller is what a re-test confirmed fixes it — scrollY held perfectly * still and .is-stuck settled once and stayed there. This only turns off a * jank-prevention heuristic for async, unrelated layout shifts elsewhere in * the page; it does not change anything this theme relies on. */ html { overflow-anchor: none; } .sla-header__main { /* Sticky, not fixed: the box stays in normal flow (so it reserves its own * space and nothing else needs a spacer/margin to compensate) and only * pins to the viewport top once scrolled there — the announcement bar * above it simply scrolls away first, since only THIS element carries * position:sticky. */ position: sticky; top: 0; z-index: 500; isolation: isolate; border-bottom: 0; transition: box-shadow 260ms ease; /* Almost-imperceptible ivory -> warm cream tonal lift, painted in the same * background layer as (and above) the has-ivory-background-color utility * class's flat color — not a visible banded gradient, just enough tonal * depth that the header reads as considered rather than flat. */ background-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sla-color-cream) 55%, transparent) 100%); } /* Toggled by assets/js/sticky-header.js once the announcement bar has * scrolled out of view (i.e. exactly when the header is actually pinned to * the viewport top) — a soft lift shadow that fades in/out on top of the * header's own always-on hairline shadow (.sla-header__main::after), * rather than replacing it. No background darkening, no size/position * change, so nothing about the approved header appearance shifts. */ .sla-header__main.is-stuck { box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--sla-color-navy) 32%, transparent); } /* ----------------------------------------------------------------------- * Sticky shrink — desktop (>=900px; the mobile/hamburger layout below * 900px gets its own, more conservative shrink further down, since it * needs a usability floor the desktop header doesn't). * * Every value here is ~80% of that same property's NORMAL value a few * rules up (e.g. the logo's clamp(56px, 6.2vw, 104px) becomes * clamp(45px, 5vw, 83px) — each number scaled by 0.8), so the header * settles at roughly 80% of its unstuck height without any single part * (padding, logo, icon, nav gap) doing all the work alone or being * skipped — exactly the "naturally compressed" (not cropped, not * distorted) effect asked for. Font sizes are deliberately left alone: * only spacing and element sizes shrink, so existing typography is * retained as-is in the stuck state. The transitions that animate each * of these are declared on the base (non-.is-stuck) rules above, so they * play in both directions — entering AND leaving the stuck state. * --------------------------------------------------------------------- */ @media (min-width: 900px) { .sla-header__main.is-stuck .sla-header__row { padding-top: 1.2rem; padding-bottom: 1.2rem; } .sla-header__main.is-stuck .sla-header__logo--horizontal a, .sla-header__main.is-stuck .sla-header__logo--horizontal .custom-logo-link { height: clamp(45px, 5vw, 83px); } .sla-header__main.is-stuck .sla-header__nav .wp-block-navigation__container { gap: clamp(1rem, 1.9vw, 2.2rem) !important; } .sla-header__main.is-stuck .sla-header__icon, .sla-header__main.is-stuck .sla-header__icon--cart.wp-block-woocommerce-mini-cart, .sla-header__main.is-stuck .sla-header__icon--cart .wc-block-mini-cart__button, .sla-header__main.is-stuck .sla-header__icon--account.wp-block-woocommerce-customer-account, .sla-header__main.is-stuck .sla-header__icon--account .wc-block-customer-account__link { width: 36px; height: 36px; } } /* * Sticky shrink — mobile/hamburger layout (<=899px). Nested inside the * existing mobile-nav media query further down would work identically * (media queries don't stack/compound specificity), but is kept here, * right beside its desktop counterpart, so both halves of the same * feature stay easy to find and compare. A gentler ~80% on the logo, but * a floor-protected, much lighter touch on the row's min-height and the * hamburger itself — shrinking a 46px tap target by a full 20% would * drop it under common touch-target comfort thresholds, which the brief * explicitly guards against ("hamburger must remain easy to tap"). */ @media (max-width: 899px) { .sla-header__main.is-stuck .sla-header__row { min-height: 96px; } .sla-header__main.is-stuck .sla-header__logo--horizontal a, .sla-header__main.is-stuck .sla-header__logo--horizontal .custom-logo-link { height: clamp(52px, 16vw, 70px); } .sla-header__main.is-stuck .sla-mobile-toggle { width: 42px; height: 42px; } } /* 600-899px specifically: in this band the logo is already pegged at its * clamp() ceiling on BOTH sides of the shrink (70px stuck vs 88px normal), * and the row's own padding is still the untouched base 1.5rem (this band * never gets the <=599px tier's smaller padding token) — so unlike the * rest of the mobile range, min-height:96px above doesn't end up as the * binding constraint here (logo+padding already exceeds it), and without * shrinking padding too this band would land closer to ~87% than ~80%. */ @media (min-width: 600px) and (max-width: 899px) { .sla-header__main.is-stuck .sla-header__row { padding-top: 1.2rem; padding-bottom: 1.2rem; } } /* Sticky shrink still functions under reduced motion — the header still * becomes visually compact once stuck — only the animated transition * between the two states is removed, per prefers-reduced-motion. The * always-on box-shadow fade (declared on .sla-header__main itself) is * covered by the same rule since that transition property lives there. */ @media (prefers-reduced-motion: reduce) { .sla-header__main, .sla-header__row, .sla-header__logo--horizontal a, .sla-header__logo--horizontal .custom-logo-link, .sla-header__nav .wp-block-navigation__container, .sla-header__icon, .sla-header__icon--cart.wp-block-woocommerce-mini-cart, .sla-header__icon--cart .wc-block-mini-cart__button, .sla-header__icon--account.wp-block-woocommerce-customer-account, .sla-header__icon--account .wc-block-customer-account__link, .sla-mobile-toggle { transition: none; } } /* WordPress's admin toolbar is itself fixed at the viewport top (32px tall, * 46px on its own <=782px breakpoint) when a logged-in user has it enabled, * pushing page content down via a margin-top on rather than taking * part in normal flow — so a top:0 sticky element must be offset by the * same amount or it pins directly underneath (hidden behind) the toolbar. */ body.admin-bar .sla-header__main { top: 32px; } @media (max-width: 782px) { body.admin-bar .sla-header__main { top: 46px; } } /* * Decorative edge artwork. * header-edge-art.jpg is a wide band whose ornament (gold botanicals at the * bottom-left, peacock feather and temple finials at the right) sits in its two * outer edges. cover scales it by width and crops vertically, so the 2073:236 * ratio is never distorted, and the mask dissolves it out of the middle third * so the navigation always reads against flat ivory. */ .sla-header__main::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--sla-art-header-edge); background-repeat: no-repeat; background-position: center bottom; background-size: cover; opacity: 0.78; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 17%, transparent 34%, transparent 66%, rgba(0, 0, 0, 0.4) 83%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 17%, transparent 34%, transparent 66%, rgba(0, 0, 0, 0.4) 83%, #000 100%); } /* Champagne-gold hairline closing the header, plus an extremely soft tonal * shadow so the photographic hero below never visually fuses with the * header — a hint of separation, not a floating card (no shadow on the * sides/top, just a tight low-opacity fade under the bottom edge). */ .sla-header__main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--sla-gold-soft) 10%, var(--sla-color-gold) 50%, var(--sla-gold-soft) 90%, transparent); opacity: 0.85; box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--sla-color-navy) 30%, transparent); } .sla-header__row { position: relative; z-index: 1; display: flex; justify-content: space-between; flex-wrap: nowrap; width: 100%; padding-top: var(--wp--preset--spacing--small); padding-bottom: var(--wp--preset--spacing--small); gap: clamp(1rem, 2.2vw, 2.5rem); align-items: center; transition: padding-top 300ms ease, padding-bottom 300ms ease; } .sla-header__brand { display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; padding-right: clamp(1rem, 2.2vw, 2.5rem); border-right: 1px solid var(--sla-gold-faint); } /* * Desktop logo: the Site Logo block supplies the correct dynamic home URL and * the link's accessible name; header-logo-horizontal.png is painted over the * link so the stacked mark is never shown here. The link carries the file's own * aspect-ratio, so contain reproduces it at its true proportions. */ .sla-header__logo.wp-block-site-logo { margin: 0; width: auto; max-width: none; } .sla-header__logo--horizontal a, .sla-header__logo--horizontal .custom-logo-link { display: block; position: relative; height: clamp(56px, 6.2vw, 104px); /* aspect-ratio (not an explicit width) drives the box's width from * whatever height is currently in effect, so the shrink below can only * ever resize the logo proportionally — never distort it. */ aspect-ratio: 2172 / 724; background-image: var(--sla-art-logo-horizontal); background-repeat: no-repeat; background-position: left center; background-size: contain; transition: height 300ms ease; } /* Primary navigation */ .sla-header__nav { flex-grow: 1; } /* Baseline reset — previously supplied for free by WordPress's core * Navigation-block stylesheet (auto-loaded only when that block is * actually present on the page). Since header.php now renders this