/* ========================================================================== BTA33KAR — UI-P0 token & accessibility override layer Created 2026-09-04. Loads AFTER /themes/flex-home/css/style.css. SCOPE IS DELIBERATELY TINY. This file exists for UI-P0 only: UI-001 approved hover token UI-003 visible keyboard focus indicators Do NOT grow this into a redesign layer (no spacing/typography/radii/ shadows/layout/animation). Component work belongs in later phases. ========================================================================== */ /* -------------------------------------------------------------------------- UI-001 — approved primary hover colour. NOTE: this CSS layer intentionally OVERRIDES the stored Theme Option `primary_color_hover`, which still holds rgb(255,255,255) in the database. layouts/base.blade.php emits that stored value into an inline :root block in ; this file loads later and wins. The Theme Option was NOT changed because doing so would have required either admin sign-in (the QA profile must stay signed out) or direct DB manipulation (forbidden in UI-P0). -> Follow-up: set Theme Options > primary_color_hover = #063A5D, then this block can be deleted. -------------------------------------------------------------------------- */ :root { --primary-color-hover: #063A5D; } /* Breadcrumb links consume --primary-color-hover for their hover colour and are already #fff on the blue banner, so the token change would have made them dark navy. UI-P0 requires the breadcrumb to remain visually unchanged. */ .breadcrumb > .breadcrumb-item a:hover { color: #ffffff !important; } /* -------------------------------------------------------------------------- UI-003 — visible keyboard focus indicator. Two-layer ring so it stays visible on BOTH light surfaces and the primary-blue topbar/buttons: inner 0-2px #ffffff (separates the control from the ring) outer 2-5px #063A5D (11.4:1 on white) `outline` is used for the outer ring because it is never clipped by an overflow:hidden ancestor and never affects layout. !important is required only to defeat pre-existing `outline:none !important` / `box-shadow:none !important` rules in style.css. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .form-control:focus-visible, .dropdown-toggle:focus-visible, .btn-select-language:focus-visible, .navbar-toggler:focus-visible, .add-to-wishlist:focus-visible, .advanced-search-toggler:focus-visible { outline: 3px solid #063A5D !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff !important; } /* Higher-specificity twins: these selectors exist purely to outrank pre-existing !important suppressions of the same properties. */ .topmenu.bg-light .navbar-toggler:focus-visible, .search-box .btn-primary:focus-visible, .search-box .btn-group .dropdown-toggle:focus-visible, .bravo_topbar .btn-select-language:focus-visible, .search-box .select--arrow .form-control:focus-visible { outline: 3px solid #063A5D !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff !important; } /* Fallback for engines without :focus-visible support. */ @supports not selector(:focus-visible) { a:focus, button:focus, input:focus, select:focus, textarea:focus, .btn:focus, .form-control:focus, .btn-select-language:focus, .navbar-toggler:focus { outline: 3px solid #063A5D !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff !important; } }