/** * Styles for the [tzumi_site_header] shortcode. * * Everything is scoped under .tzumi-* root classes so this can be dropped * into an existing Elementor-built page (via the Shortcode widget in the * Header theme template) without leaking into or being overridden by the * site's own global styles — same approach as site-footer.css. * * There are four separate root elements, not one: .tzumi-site-header (the * sticky bar + rail), .tzumi-mobile-menu, .tzumi-cart-drawer and * .tzumi-menu-backdrop are DOM siblings, not nested inside one another. * The two drawers and the backdrop are position:fixed and need to resolve * that against the real viewport, not against .tzumi-site-header's own * position:sticky — nesting them inside it would make their fixed * positioning resolve against ITS containing block instead, breaking * full-height coverage and letting them scroll with the page. Custom * properties are therefore declared on all four roots together below * (harmless duplication) rather than once on a single ancestor, since * sibling elements don't inherit each other's custom properties. * * 'Fredoka' and 'Nunito Sans' are expected to already be enqueued site-wide * (see tzumi_blocks_enqueue_fonts() in tzumi-blocks.php) — not repeated * here. 'IBM Plex Mono' (used for prices/quantities only) is enqueued * specifically by tzumi_blocks_enqueue_site_header_assets(), since no * other component on the site currently needs it. */ .tzumi-site-header, .tzumi-site-header *, .tzumi-site-header *::before, .tzumi-site-header *::after, .tzumi-mobile-menu, .tzumi-mobile-menu *, .tzumi-mobile-menu *::before, .tzumi-mobile-menu *::after, .tzumi-cart-drawer, .tzumi-cart-drawer *, .tzumi-cart-drawer *::before, .tzumi-cart-drawer *::after, .tzumi-skip-link { box-sizing: border-box; } /* * Hard reset against the site's global Kit/theme CSS — same reasoning as * site-footer.css's equivalent rule: Elementor's Kit writes rules straight * onto bare tags, which ties in specificity with a plain descendant * selector in a way that depends on stylesheet load order. !important here * makes this component's own type/decoration win regardless of that. */ .tzumi-site-header, .tzumi-site-header *, .tzumi-mobile-menu, .tzumi-mobile-menu *, .tzumi-cart-drawer, .tzumi-cart-drawer * { font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif !important; text-decoration: none !important; } .tzumi-site-header h1, .tzumi-site-header h2, .tzumi-site-header h3, .tzumi-site-header h4, .tzumi-mobile-menu h1, .tzumi-mobile-menu h2, .tzumi-mobile-menu h3, .tzumi-mobile-menu h4, .tzumi-cart-drawer h1, .tzumi-cart-drawer h2, .tzumi-cart-drawer h3, .tzumi-cart-drawer h4 { font-family: 'Fredoka', -apple-system, 'Segoe UI', sans-serif !important; } /* box-shadow is the one button property with zero exceptions across this whole component, so it's the only one reset in bulk. border/background/ color are NOT reset here on purpose — an earlier version of this file tried to, but ".tzumi-site-header button" (a class + an element = 2 specificity points) is MORE specific than a bare single-class selector like ".tzumi-qty-btn" (1 point), so that blanket rule was silently beating this file's own later per-button !important overrides, on top of whatever the theme's reset.css was already doing. Each button class below now sets its own border/background/color directly, doubled (".tzumi-x.tzumi-x") to reach 2 specificity points so it reliably wins against both this file's own rules and the theme's reset.css — instead of everything racing on !important alone and depending on which stylesheet happens to load last. */ .tzumi-site-header button, .tzumi-mobile-menu button, .tzumi-cart-drawer button { box-shadow: none !important; } /* Prices and the quantity stepper are the one deliberate exception to the body-font reset above — a later rule needs to out-rank it, hence the extra !important stacked on top of the one it's overriding. */ .tzumi-site-header .tzumi-price, .tzumi-site-header .tzumi-price *, .tzumi-cart-drawer .tzumi-price, .tzumi-cart-drawer .tzumi-price *, .tzumi-cart-drawer .tzumi-qty-value { font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace !important; font-variant-numeric: tabular-nums; } /* WooCommerce's own get_price_html() wraps an on-sale product's regular price in and its sale price in — that pairing is the ONLY thing visually telling a shopper "was X, now Y" apart from plain text. The blanket "text-decoration:none !important" hard reset a few lines up (needed to strip the theme's own default underlines everywhere else) wipes 's strikethrough right along with them, so it has to be restored here, specifically, for these two tags. */ .tzumi-price del{text-decoration:line-through !important;color:var(--tzumi-lightgrey);font-weight:500;font-size:0.85em;margin-right:6px;} .tzumi-price ins{text-decoration:none !important;color:var(--tzumi-accent);font-weight:600;} /* a price with no sale (just get_price_html()'s plain span, no del/ins) keeps the color passed in via each specific price class (.tzumi-cl-price etc.) rather than being forced red here. */ .tzumi-site-header, .tzumi-mobile-menu, .tzumi-cart-drawer, .tzumi-menu-backdrop { --tzumi-accent: #D90D1E; --tzumi-accent-hover: #B80A19; --tzumi-accent-tint: #FADADD; --tzumi-ink: #181818; --tzumi-midgrey: #57585A; --tzumi-lightgrey: #8C8D8F; --tzumi-line: #E1DFDB; --tzumi-paper: #F7F6F4; --tzumi-white: #FFFFFF; } .tzumi-site-header a, .tzumi-mobile-menu a, .tzumi-cart-drawer a { color: inherit; } .tzumi-site-header button, .tzumi-mobile-menu button, .tzumi-cart-drawer button { font: inherit; } .tzumi-site-header :focus-visible, .tzumi-mobile-menu :focus-visible, .tzumi-cart-drawer :focus-visible, .tzumi-skip-link:focus-visible { outline: 2px solid var(--tzumi-accent); outline-offset: 3px; border-radius: 6px; } /* :focus-visible's own "was this keyboard or a pointer?" heuristic isn't consistent across browsers for elements (most visibly on Safari) — it was matching mouse/touch clicks on product cards, not just Tab, and showing this ring on every click. site-header.js tracks real input modality itself (a mousedown/touchstart sets this class, a Tab keydown clears it) and this override — !important, since it must beat the rule above regardless of whichever elements :focus-visible decided to match — is what actually makes clicking never show the ring, independent of any one browser's heuristics. */ body.tzumi-using-pointer .tzumi-site-header :focus-visible, body.tzumi-using-pointer .tzumi-mobile-menu :focus-visible, body.tzumi-using-pointer .tzumi-cart-drawer :focus-visible, body.tzumi-using-pointer .tzumi-skip-link:focus-visible { outline: none !important; } /* Skip link — off-screen until keyboard focus lands on it, so keyboard/ screen-reader users can bypass the whole header and jump straight to the page's own #main-content wrapper. */ .tzumi-skip-link{position:absolute;top:-48px;left:12px;z-index:100;background:var(--tzumi-accent, #D90D1E);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;transition:top .15s ease;} .tzumi-skip-link:focus{top:12px;} .tzumi-thumb.tzumi-img-ph{background:var(--tzumi-line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--tzumi-midgrey);} .tzumi-thumb.tzumi-img-ph svg{width:14px !important;height:14px !important;flex-shrink:0;} .tzumi-btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;padding:13px 26px;border-radius:8px;text-decoration:none;cursor:pointer;border:none;white-space:nowrap;transition:transform .12s ease,background-color .12s ease,border-color .12s ease,color .12s ease;} .tzumi-btn:hover{transform:translateY(-1px);} /* !important: the theme's own link/button color styling has been winning over every plain (non-!important) color declaration in this file so far — no reason Checkout would be the exception just because it's an instead of a