/* * What the chrome behaviour needs to be true in CSS. * * Deliberately small. The look of the header belongs to the site's own design * system, pushed by Orca into the Elementor kit; this file only carries the * three states the script switches between, and it carries them with enough * force to survive whatever the theme has to say about position. */ /* Stands in for the header while it is out of flow, so the page does not jump up by a header's height at the moment it pins. */ .iw-header-space { height: 0; } /* Element-agnostic: since 1.4.4 the pin target is the .site-header BAND, not the theme template wrapper - the top bar above it must scroll away. NO will-change. It looked like a free performance hint and it was a CONTAINING BLOCK: any fixed-position descendant - the full-screen mobile nav overlay first among them - positions against the header's own box instead of the viewport, so `inset: 0` rendered the menu as a strip exactly one header tall ("navigation doesn't exist, really" - Nick, 30 Aug). The transform the transition animates creates the same containment only while the header is .iw-away - when the menu is closed anyway. */ .iw-pinned { position: fixed !important; top: var(--iw-pin-top, 0); left: 0; right: 0; z-index: 999; transition: transform .24s ease; } /* The WordPress admin bar sits above everything for logged-in users, and a header pinned to zero hides under it. 32px, and 46px on a phone, are the two heights that bar has ever had. A VARIABLE, not just a top: the hide transform below has to travel the same extra distance. */ body.admin-bar .iw-pinned { --iw-pin-top: 32px; } @media (max-width: 782px) { body.admin-bar .iw-pinned { --iw-pin-top: 46px; } } /* Gone on the way down. Transform only: it does not reflow, and it is the one property a compositor can animate without touching layout. THE OFFSET RIDES ALONG: a header pinned 46px down that slides up by only its own height leaves a 46px slice of itself on screen forever ("doesn't disappear" - Nick, 30 Aug, in the admin bar). */ .iw-pinned.iw-away { transform: translateY(calc(-100% - var(--iw-pin-top, 0px))); } /* The frame it pins on, and only that frame. */ .iw-no-transition { transition: none !important; } /* Anything the site sticks under the header reads this rather than a constant. */ :root { --iw-header-h: 0px; } @media (prefers-reduced-motion: reduce) { .iw-pinned { transition-duration: .01ms !important; } } /* ---- the mobile quick action bar --------------------------------------- */ /* * ON A PHONE THE PRIMARY ACTION LEAVES THE HEADER. A one-handed grip puts the * thumb at the bottom of the device; the top corners are the hardest region to * reach and the one most likely to need a hand shuffle. The single action the * site exists to get does not live there. * * The bar is BUILT FROM THE PAGE, never invented: the primary is the header's * own button, cloned, and the secondaries are the tel: and map links the site * already carries. No header button and no phone number means no bar. * * It reveals after the first screen rather than being present from the first * frame, because the hero already carries the same offer and a floating copy * over the top of it is the same ask twice. */ .iw-cta-bar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: none; padding: 12px var(--gutter, 20px) calc(12px + env(safe-area-inset-bottom, 0px)); /* A fade, not a slab: the buttons stay legible over whatever is behind them without stamping a bar across the bottom of every page. */ background: linear-gradient(to top, var(--ground, #fff) 55%, transparent); transform: translateY(110%); transition: transform .24s ease; pointer-events: none; } @media (max-width: 900px) { .iw-cta-bar { display: block; } } .iw-cta-bar.iw-show { transform: translateY(0); pointer-events: auto; } .iw-cta-row { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; align-items: stretch; } /* THE BAR IS ACCENT ONLY - no brand color anywhere in it ("mobile action bar should only be accent color, no brand color. solid accent with white/text (best contrast) and outline/secondary button" - Nick, 30 Aug). The primary is the kit's SOLID button: accent fill, ink decided by contrast and published by the kit as --on-accent. The secondary is the OUTLINE button: accent border, accent text, ground fill. Both wear the kit's 2px border so the pair is the same two buttons the rest of the site uses. !important on the primary's colors, deliberately: it is a CLONE of the header's CTA and arrives wearing whatever button classes and theme-style colors the header gave it - which is exactly how a red bar shipped with brand-yellow text on it. */ .iw-cta-primary { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border-radius: var(--radius, 6px); background: var(--accent, var(--chrome, #111)) !important; color: var(--on-accent, #fff) !important; border: 2px solid var(--accent, var(--chrome, #111)) !important; font-weight: 650; text-decoration: none; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 22px rgba(0,0,0,.08); } .iw-cta-primary:hover, .iw-cta-primary:focus-visible { color: var(--on-accent, #fff) !important; } /* Secondaries are icon over label, fixed width - the outline half of the pair. A shortcut for somebody who already knows what they want, not a second offer, which is why they carry no fill. */ .iw-quick { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; padding: 6px 2px; border-radius: var(--radius, 6px); background: var(--ground, #fff); border: 2px solid var(--accent, var(--ink, #222)); color: var(--accent, var(--ink, #222)); text-decoration: none; } .iw-quick span { font-size: 10px; font-weight: 650; letter-spacing: .02em; } .iw-quick svg { width: 18px; height: 18px; color: currentColor; } /* The header's own button is the thing that MOVED, so it is not also still up there. Hidden only where the bar exists, and only when one was built. THE MOVED WIDGET, NOT EVERY BUTTON WIDGET: chrome.js marks the wrapper whose anchor it cloned with .iw-cta-moved. The old blanket selector hid every button widget in the header, which was fine while the CTA was the only one - the commerce header's account door is a button widget too, and it vanished on every phone (found 9 Sep). */ @media (max-width: 900px) { body.iw-has-cta-bar .elementor-location-header .iw-cta-moved, body.iw-has-cta-bar .elementor-location-header .iw-header-cta { display: none !important; } } /* ---- back to top ------------------------------------------------------- */ /* Earned later than the action bar - a screen and a half, by which point scrolling back by hand is a real cost. Shown at every width: a long page is long on a laptop too. It sits ABOVE the action bar, never beside it, so it cannot compete with the thing it must not compete with. */ /* A round accent control, not a ghost. The white version disappeared into the ground it floats over, and on the stale-CSS site it rendered as a bordered rectangle squatting on the legal line ("terribly ugly" - Nick, 1 Sep). The accent circle is the one the quick-action bar already taught the thumb to expect. */ /* body button... because the KIT styles bare button elements now -- the Buttons theme-style section lands on every