/* Base — global tokens, canvas background, focus/tap behaviour. Loaded everywhere, first in the component chain (see inc/enqueue.php). */ /* Shared solid edge for the header (bottom) and footer (top). */ :root { --ck-edge: 1px solid rgba(0, 0, 0, 0.1); } /* Brand tokens reused across the commerce surfaces. The app-wide button is a translucent-BLACK box with white text (same as REFINE / sort / back-to-top / load-more) — square corners, no borders, no backdrop blur. */ :root { --ck-btn: rgba(0, 0, 0, 0.7); /* primary CTA fill */ --ck-btn-hover: rgba(0, 0, 0, 0.85); /* primary CTA hover */ --ck-ink: #000; /* solid ink for accents/badges */ --ck-commerce-text: #111; --ck-commerce-surface: #fafafa; } /* Canvas background — the color the browser paints OUTSIDE the page content (rubber-band overscroll, and any area the document doesn't cover). Set on the root element so it becomes the canvas background. Site-wide default #FAFAFA; the home/front page overscrolls black to match its dark full-bleed tiles and footer. `:has(body.home)` scopes it since WordPress puts the `home` class on , not . */ html { background-color: #fafafa; } html:has(body.home) { background-color: #000000; } /* Focus rings stay intact everywhere — this only fixes WHEN they appear. Elementor's overlays (popups, image lightbox) return focus to the element that opened them on close. Escape is a keyboard event, so the browser counts that restored focus as :focus-visible and paints a blue box on the thumbnail or button you just came back from — nobody was navigating by keyboard, they just closed an overlay. inc/assets/focus-source.js sets data-ck-focus="escape" on when Escape is the last key pressed, and clears it on the next Tab or pointer input. So the ring is suppressed for exactly that one case; Tab navigation, click, and typing all keep the browser's native focus behavior. */ html[data-ck-focus='escape'] *:focus, html[data-ck-focus='escape'] *:focus-visible { outline: none !important; box-shadow: none !important; } /* No hover decoration on touch. A touch device has no hover — but tapping a link leaves it :hover (browsers latch the state until you tap something else) and :focus, so a menu item you pressed keeps its underline as if the cursor were parked on it. Elementor's nav-menu draws that underline with a pointer pseudo-element sized on :hover/:focus, so the fix is to hold the pseudo at its idle size for both states — width for the line pointers, opacity for the background/framed ones. .elementor-item-active is excluded: the current page's item SHOULD stay underlined, which is the only underline that means anything on touch. */ @media (hover: none) { .elementor-nav-menu .elementor-item:not(.elementor-item-active):hover::before, .elementor-nav-menu .elementor-item:not(.elementor-item-active):hover::after, .elementor-nav-menu .elementor-item:not(.elementor-item-active):focus::before, .elementor-nav-menu .elementor-item:not(.elementor-item-active):focus::after { width: 0 !important; opacity: 0 !important; } .elementor-icon-list-item:hover a, .elementor-icon-list-item:hover .elementor-icon-list-text { text-decoration: none !important; } } /* Hover styles we own are guarded at their source instead of being undone here — see the @media (hover: hover) blocks in customizer/additional-css.css. Put new hover-only decoration inside such a block; only styles generated by Elementor/plugins need the override above. */ /* Remove the mobile tap-highlight — the translucent blue/grey rectangle browsers flash over a tapped link/button. Inherited, so setting it on the root cascades; * makes sure no element re-introduces it. Elements that want press feedback use their own :active styles. */ * { -webkit-tap-highlight-color: transparent; }