/* --------------------------------------------------------------------------- Brand palette — defined per-theme in main.twig from tenants//themes//theme-settings-data.json. Customizer editable. This file only contains class-level overrides that reference the vars, so changing the palette is a single JSON edit per theme. Safety-net root definitions: main.twig sets these from theme settings, but if the template scope doesn't reach (e.g. cached partial, isolated render, customizer iframe) the rules below fall back to brand hex literals so we never end up with `var(--color-primary)` evaluating to nothing — which silently rendered the place-order button transparent on the checkout page. IMPORTANT — selector is `html` (specificity 0,0,1), NOT `:root` (0,1,0). main.twig's palette is `:root {…}` at the very top of ; this file loads AFTER it, so a `:root` fallback here would TIE on specificity and win on source-order, freezing every theme's palette to these literals (the bug that made theme Primary do nothing). `html` is deliberately lower specificity so main.twig's `:root` always wins when present, while these fallbacks still apply in isolated/cached renders where it doesn't. --------------------------------------------------------------------------- */ html { --molten-lava: #ff6a1a; --brick-red: #ff4d00; --papaya-whip: #fdf0d5; --deep-space-blue: #003049; --steel-blue: #669bbc; --color-primary: #003049; --color-primary-hover: #ff4d00; --color-primary-on: #ffffff; --color-accent: #ff4d00; --color-accent-deep: #ff6a1a; --color-link: #669bbc; --color-soft-bg: #fdf0d5; --color-soft-bg-line: #f0e2c3; } /* --------------------------------------------------------------------------- Header sticky behaviour — driven by the merchant's "Stick to top on scroll" toggle in the customizer (Header section settings). render_global_sections() stamps `data-sticky="true"` on the inner `.nx--global-section` wrapper when the toggle is on; this rule then promotes the outer wrapper to `position: sticky`. Browser support for `:has()`: Chrome/Edge 105+, Safari 15.4+, Firefox 121+ — covers ~95%+ of users. Older browsers see a non-sticky header with no other breakage. --------------------------------------------------------------------------- */ .storefront-sticky-top:has([data-sticky="true"]) { position: sticky; top: 0; z-index: 40; } /* Re-point common Tailwind brand-rose utilities to the palette accent — STOREFRONT ONLY. Scoped under body.storefront so admin pages (which load the same custom.css) are not repainted. The body class is set in theme/storefront/main.twig. */ body.storefront .bg-rose-600, body.storefront .bg-rose-700, body.storefront .hover\:bg-rose-700:hover, body.storefront .hover\:bg-rose-600:hover { background-color: var(--color-accent) !important; } body.storefront .text-rose-600, body.storefront .text-rose-700, body.storefront .hover\:text-rose-700:hover, body.storefront .hover\:text-rose-600:hover { color: var(--color-accent) !important; } body.storefront .border-rose-600, body.storefront .border-rose-700 { border-color: var(--color-accent) !important; } body.storefront .ring-rose-600, body.storefront .ring-rose-700 { --tw-ring-color: var(--color-accent) !important; } /* Primary CTAs that use bg-gray-900 / bg-black on a button or link → palette primary, with brick-red on hover. Storefront-only; restricted to /