/* ========================================================================= GETU Shopping - chrome CSS ------------------------------------------------------------------------- Two jobs: 1. what cannot live on a Bricks element (#brx-header is Bricks' own wrapper - no global class can reach it); 2. the shared component CSS from the reference's assets/css/style.css, carried over verbatim so the ported header markup means the same thing here as it does there. Loaded after getu-tailwind.css, so these rules win where they overlap. Ports to production unchanged: no URLs, no ids, no environment assumptions. ========================================================================= */ /* ---- Sticky header ------------------------------------------------------ The whole wrapper sticks, offset upward by exactly the announcement bar's height, so the bar scrolls away and the nav row comes to rest at top: 0 - which is what the reference does, where the nav is a direct child of . The offset reads the same variable as the bar's height; never hardcode it. */ #brx-header { position: sticky; top: calc(-1 * var(--getu-announce-h)); z-index: 50; } /* ---- Reference variable aliases ----------------------------------------- The reference's markup writes shadow-[var(--shadow-float)] inline. Rather than rewrite the markup (and lose verbatim parity), map the reference's names onto the design-system tokens. The tokens stay the single source of truth; these are only the names the ported HTML asks for. */ #brx-header, .getu-vanilla-scope { --shadow-float: var(--getu-shadow-float); --shadow-raised: var(--getu-shadow-raised); --ease-out: var(--getu-ease-out); --ease-spring: var(--getu-ease-spring); } /* ---- Preflight equivalent ------------------------------------------------ Tailwind's preflight is off: it would fight Bricks' own base layer and undo the theme style. But the reference's markup leans on parts of it, and every time one was missing it showed up as a wrong number, never as an error. This block is those parts, and nothing more. Specificity is the whole game here, and it cuts both ways: - A reset must LOSE to a Tailwind utility, or it eats the value the markup asked for. Hence :where(), which contributes zero. - A reset must WIN against Bricks' element-level styling, or it never applies at all. Hence the plain #brx-header selectors. Each rule below picks a side deliberately; both mistakes have been made here already, and each one cost a full measurement round. ------------------------------------------------------------------------ */ /* Icons. NOT :where(): at zero specificity a Bricks element rule wins and the icons fall back to display: inline, which builds a line box (line-height 24 plus descender) instead of hugging the 20px icon - measured as icon buttons 7px too tall. No utility sets display on an svg here, so winning is free. The cart button hid this for a while: it is a flex container, and flex blockifies its children whatever the svg's own display says. */ #brx-header svg, #brx-header img, .getu-vanilla-scope svg, .getu-vanilla-scope img { display: block; vertical-align: middle; } /* Lists. The browser's default padding-inline-start: 40px - measured as a nav exactly 40px too wide. The ported markup carries no list styling of its own. */ :where(#brx-header, .getu-vanilla-scope) :where(ul, ol) { margin: 0; padding: 0; list-style: none; } /* Borders. Tailwind's border utilities set border-WIDTH and nothing else; the border-style: solid they rely on comes from preflight. Without it the style stays `none`, every width resolves to 0, and the mega panel, search panel and mobile menu all lose their 1px border. All three declarations are mandatory, and here is the trap: the INITIAL value of border-width is `medium` (3px), harmless only while the style is `none`. Setting the style alone hands every element in the header a 3px border - measured, once, at 424 diffs. Preflight sets width AND style AND colour together for exactly this reason; anything less is not a reset but a new bug. The colour is preflight's default, which is what the reference computes on every element with no border utility of its own. */ :where(#brx-header, .getu-vanilla-scope) :where(*), :where(#brx-header, .getu-vanilla-scope) :where(*)::before, :where(#brx-header, .getu-vanilla-scope) :where(*)::after { border-width: 0; border-style: solid; border-color: #e5e7eb; } /* Form controls. Preflight gives them `font: inherit; line-height: inherit; color: inherit`, which is why the reference's fields inherit the unitless 1.5 and size themselves off their own font-size (16px -> 24px, 13.5px -> 20.25px), and read in the page's own ink colour rather than the browser's. Without font/line-height a Bricks form rule pins line-height to 40px - measured as a search field 70px tall instead of 54px. Without colour, a `