/* IndianShopping marketplace page-only layout hooks. */ /* Both marketplace pages toggle dark mode via html.dark (see data-theme/class on in app01_marketplace_home.html and app01_storefront.html), but neither page's shared stylesheets (static/css/indianshopping-{components,utilities}.css) declare color-scheme. Without it, browser-drawn chrome (scrollbar, native input chrome, autofill) defaults to light against a dark page. Mirrors the same fix already applied to the sibling frontend/css/marketplace- assignments.css page stylesheet. */ :root { color-scheme: light; } html.dark { color-scheme: dark; } .marketplace-page { padding-top: 3.75rem; } /* Skip link must stack above every fixed layer the shared header injected by SHARED_DASHBOARD/header-embed.js adds (.he-header 1000, its dropdowns 1100, .he-search-overlay 100000); Tailwind's focus:z-50 on the link is far too low. That bundle ships no skip link of its own, so this one is the site's to hold: use the site-wide skip-link value (max int, as in css/base.css, css/design-system.css and css/dashboard-shell.css) rather than a number tuned to today's header -- that is how 1200 went stale when an upstream sync added the search overlay. position must be fixed, not Tailwind's focus:absolute: absolute puts the focused link at top 0.5rem of the DOCUMENT, so once the page is scrolled it lands above the viewport and no z-index can help. Measured in Chromium with a real wheel scroll + Tab: at scrollY 215 the focused link sat at viewport top -207 and the browser did not scroll it into view (WCAG 2.4.7). Both of these mirror app07's .va-skip-link, which is fixed. Marketplace pages only. */ .marketplace-page > a[href="#main-content"]:focus { position: fixed; z-index: 2147483647; } .marketplace-banner { min-height: 12rem; } .marketplace-banner-image { inset: 0; height: 100%; width: 100%; object-fit: cover; }