/** * header.css — Estelia Norway AS * Location: estelia-child/assets/css/header.css * Loads: every page, after global.css (inc/assets.php) * Depends: global.css tokens * header.js (--est-announce-h, .is-stuck, .is-scrolled, * .is-nav-open) * inc/header.php (announce markup, language switcher, * search/account/cart menu items, * .est-utility-bar, body.est-header-overlay) * inc/mobile-nav.php (.est-mobilenav__lang) * * Overlay hook: body.est-header-overlay ONLY. inc/header.php is the * single source of truth. * * GeneratePress owns .site-header, .main-navigation and .menu-toggle. * We restyle them, we do not replace them. * * Consolidated 1 Aug 2026: the three appended patch blocks are merged into * the mobile section below and the superseded rules removed. Nothing on * mobile is position:fixed against a JS-measured variable any more — * .site-header is fixed (overlay) or sticky (everything else), so it is a * containing block in both states and its children position absolutely * inside it. That is what removed the cart's lag behind the 400ms * transition. * * Order: 1 tokens · 2 announce · 3 header · 4 wordmark · 5 nav · 6 cart * 6b language switcher · 7 overlay · 8 tablet · 9 mobile · * 10 small phones · 11 motion */ /* ======================================================================== 1. TOKEN FALLBACKS Delete once the tokens are locked in global.css. ======================================================================== */ :root { --est-step--2: clamp(0.625rem, 0.6rem + 0.15vw, 0.6875rem); --est-tracking-eyebrow: 0.12em; --est-dur-fast: 200ms; /* Mobile bar height. Declared, not measured: the burger, the cart and the panel all anchor to it, so it must be a known number rather than whatever the content happens to produce. */ --est-bar-h: 3.5rem; } /* ======================================================================== 2. ANNOUNCEMENT BAR Static, centred row of trust items — no motion. Height is published to JS as --est-announce-h by header.js. ======================================================================== */ .est-announce { position: relative; /* Neither header state (sticky top:0, or fixed offset by --est-announce-h in overlay mode) ever actually overlaps this bar in normal layout — so this only has to outrank .site-header's z-index (100) for the one case that does overlap: the language switcher's hover dropdown, which extends past this bar's own box into the header's row. */ z-index: 110; background-color: var(--est-beige, #EFE7DA); color: var(--est-ink); } /* Same container + edge padding as .inside-header below it, so the row's text and the language switcher line up with the logo and the cart icon instead of floating loose against the viewport edge. */ .est-announce__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--est-space-l); max-width: var(--est-container, 1280px); margin-inline: auto; padding-inline: 30px; padding-block: .5rem; } .est-announce__lang { flex: 0 0 auto; display: flex; align-items: center; } .est-announce__lang .trp-shortcode-switcher__wrapper { display: flex; align-items: center; /* Match the announcement bar's own type/color instead of TranslatePress's defaults, and shrink the flag so its height lines up with the code label next to it. */ --flag-size: 16px !important; --font-size: var(--est-step--2) !important; --text: var(--est-ink) !important; --text-hover: var(--est-ink) !important; } .est-announce__lang .trp-language-item-name { font-family: inherit; font-weight: 500; text-transform: uppercase; letter-spacing: var(--est-tracking-eyebrow); /* .trp-language-item-name is a flex item with white-space:nowrap + overflow:hidden (TRP's own CSS) — a flex item's automatic minimum size is 0 whenever overflow isn't visible, so without this it's free to collapse to ~1px instead of sizing to its own text. Only actually observed on the interactive overlay copy (not the inert anchor copy that holds layout space) — same markup, so pin both defensively. */ min-width: max-content; } /* TranslatePress's own V2 switcher ships a white chip (--bg:#ffffff inline custom prop, ~55px tall from its own padding) — on the beige bar that reads as a mismatched box, and its extra height was inflating the whole announce row past the height of its actual content. Strip it down to flag+chevron only. */ .est-announce__lang .trp-language-switcher, .est-announce__lang .trp-language-item, .est-announce__lang .trp-current-language-item__wrapper { background: transparent !important; border: none !important; box-shadow: none !important; } .est-announce__lang .trp-language-switcher { height: auto !important; padding: 0 !important; } /* Only the trigger (current-language) item, not the dropdown-list items — those keep TRP's own padding/hover below. TRP renders the trigger as an on the inert in-flow "anchor" copy but as a
on the interactive "overlay" copy actually shown to the user (see shortcode-switcher.php: $as_control makes it a div) — a tag-qualified `a.trp-language-item` selector here only ever matched the anchor, so the overlay kept TRP's default 7px/16px padding + 19px min-height. That mismatch (33px-tall overlay vs 20px-tall anchor) is what made the flag/code visibly sit lower than the rest of the announcement bar. */ .est-announce__lang .trp-language-item.trp-language-item__current { padding: 0 !important; min-height: 0 !important; } /* Belt-and-suspenders: even with both copies now the same height, center the interactive overlay on the wrapper directly instead of trusting its top:0 to line up with the inert anchor's box. */ .est-announce__lang .trp-shortcode-overlay { top: 50%; transform: translateY(-50%); /* TRP's own `.trp-shortcode-switcher{overflow:hidden}` (meant to clip an alternate, non-dropdown layout of this same component) also clips whatever we position outside its box below — needed once the dropdown list is taken out of flow, see .trp-switcher-dropdown-list. */ overflow: visible; } /* .trp-current-language-item__wrapper ships `justify-content:space-between; padding-right:10px` (meant to push the arrow to the far edge of a wider, fixed-width chip) — against our now-compact, content-sized chip that just starves the arrow: browsers were shrinking the 20x20 svg down to ~4x4 (reads as a stray dot next to the code label) to make the sums fit. Swap to a tight flex row with a small fixed gap instead, and pin the arrow's own box so it can never be a shrink target. */ .est-announce__lang .trp-current-language-item__wrapper { gap: var(--est-space-2xs); padding-right: 0; justify-content: flex-start; } .est-announce__lang .trp-shortcode-arrow { flex: 0 0 auto; width: 10px; height: 10px; } /* TRP renders this list as a normal in-flow flex child of the overlay, so opening it (max-height 0 → content height) grows the OVERLAY's own box — and since the overlay is vertically re-centered via top:50%/translateY(-50%) above, centering a taller box on open shifts the whole flag+code+arrow row upward too ("jumps up" on hover) and lets the list's growing bottom edge sink into the white header row underneath. Taking it out of flow entirely fixes both: the overlay's own height (and therefore its centering) is always just the closed row's height, and the list floats below it like an ordinary dropdown instead of pushing the layout around it. */ .est-announce__lang .trp-switcher-dropdown-list { position: absolute; top: 100%; left: 0; z-index: 20; } /* Same card look as the desktop nav's own submenus (§ "Submenus (Collections)" above), for one consistent dropdown style site-wide instead of TRP's bare unstyled list. Scoped to :not([hidden]) — TRP clips the closed state to max-height:0, but a border still paints as a visible hairline (and padding a sliver of background) on a 0-height box, so applying these unconditionally left a stray pale rectangle sitting next to the flag even while closed. */ .est-announce__lang .trp-switcher-dropdown-list:not([hidden]) { margin-block-start: var(--est-space-2xs); padding-block: var(--est-space-2xs); background-color: var(--est-bg); border: 1px solid var(--est-line); } .est-announce__lang .trp-switcher-dropdown-list .trp-language-item { padding: var(--est-space-2xs) var(--est-space-m) !important; gap: var(--est-space-2xs); } .est-announce__lang .trp-switcher-dropdown-list .trp-language-item:hover { background-color: var(--est-surface) !important; } @media (max-width: 47.999em) { .est-announce__lang { display: none; /* the mobile panel carries its own copy */ } /* Four items on a phone stack into four lines, roughly 200px of beige above every page — and, because the mobile nav panel reserves the bar's height at its top, 200px of dead space above the menu too. Only the free-shipping threshold earns that room; the rest are on the product and checkout pages where they matter. */ .est-announce__item:not(:first-child) { display: none; } /* No lang switcher to balance on mobile — centre the single item instead of left-aligning it against a now-empty right side. */ .est-announce__row { justify-content: center; } } .est-announce__row { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding-block: var(--est-space-xs); } .est-announce__item { display: flex; align-items: center; gap: var(--est-space-2xs); white-space: nowrap; padding-inline-start: var(--est-space-l); font-size: var(--est-step--2); font-weight: 500; line-height: 1.5; text-transform: uppercase; letter-spacing: var(--est-tracking-eyebrow); } .est-announce__item:first-child { padding-inline-start: 0; } .est-announce__item svg { flex: 0 0 auto; width: 14px; height: 14px; } /* Dot separators dropped — each item already carries its own icon, which already reads as the visual break between items; the dots on top just added noise. */ /* ======================================================================== 3. STICKY SITE HEADER — default, non-overlay pages ======================================================================== */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background-color: var(--est-bg); border-block-end: 1px solid transparent; transition: border-color var(--est-dur-fast) var(--est-ease), transform var(--est-dur-fast) var(--est-ease); } .site-header.is-scrolled { border-block-end-color: var(--est-line); } /* Hide-on-scroll-down / reveal-on-scroll-up, header.js §6. Shared by both the sticky (here) and fixed overlay variants — transform works the same regardless of which positioning scheme is pinning the header. */ .site-header.is-hidden { transform: translateY(-100%); } .site-header .inside-header { display: flex; align-items: center; justify-content: space-between; gap: var(--est-space-l); width: 100%; max-width: var(--est-container, 1280px); margin-inline: auto; padding-block: var(--est-space-s); /* Extra breathing room off the beige announce bar above, so the two rows read as visually separate rather than touching. */ padding-block-start: calc(var(--est-space-s) + 30px); padding-inline: 30px; } /* ======================================================================== 4. WORDMARK ======================================================================== */ .site-header .site-branding, .site-header .site-logo { flex: 0 0 auto; } .site-header .main-title { margin: 0; font-family: var(--est-font-display); font-size: var(--est-step-1); font-weight: 600px; line-height: 1; letter-spacing: 0.01em; } .site-header .main-title a { text-decoration: none; color: var(--est-ink); } .site-header .site-description { display: none; /* tagline lives in the hero */ } .site-header .site-logo, .site-header .custom-logo-link { display: flex; align-items: center; } .site-header .site-logo img, .site-header .custom-logo { height: 4.125rem; width: auto; max-width: 18rem; object-fit: contain; } /* ======================================================================== 5. PRIMARY NAVIGATION ======================================================================== */ .main-navigation { background-color: transparent; flex: 1 1 auto; /* Breathing room off the logo — without it the first menu link sits right against the wordmark. !important: GeneratePress's own .nav-float-right #site-navigation{margin-left:auto} carries an ID and otherwise wins outright, collapsing this to 0 (its flex:1 1 auto above already claims all free space via grow, leaving auto-margin nothing left to distribute). */ margin-inline-start: 100px !important; } .main-navigation .inside-navigation { display: flex; align-items: center; justify-content: flex-start; padding: 0; } /* .main-nav itself is a flex item of .inside-navigation with no flex-grow, so by default it shrinks to its content width and leaves the rest of the row empty. Stretch it so its child