:root { --ser-color-primary: #545b5c; --ser-color-secondary: #999a97; --ser-color-bg: #ebe6e3; --ser-color-header: #ded8d3; --ser-color-text: #2b2b2b; --ser-color-muted: #545b5c; } /* Banner height is measured at runtime by inline-script.js and written to --ser-banner-h on . Defaults to 41px before JS runs. */ :root { --ser-banner-h: 41px; --ser-header-h: 95px; } .ser-header { background: var(--ser-color-header); position: relative; z-index: 200; /* Spacer = current banner height + header height so content sits below the fixed banner+header stack regardless of how tall the banner happens to be. */ min-height: calc(var(--ser-banner-h) + var(--ser-header-h)); } /* Sticky announcement banner + header Both fixed at top, banner above header */ .opening-hours-banner.is-visible { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } .site-header-inner { position: fixed; top: var(--ser-banner-h); left: 0; width: 100%; z-index: 999; background: #ded8d3; transition: background-color 0.3s ease; } .site-header-inner.is-scrolled { background-color: rgba(222, 216, 211, 0.95); } /* When logged in, offset for admin bar */ .admin-bar .opening-hours-banner.is-visible { top: 32px; } /* Override Tactica Opening Hours plugin's hardcoded #2c2c2c. Slightly lighter than the original dark, same hue family as the brand gray (#545b5c) so it blends with the rest of the palette. */ .opening-hours-banner, .opening-hours-banner .banner-dropdown { background: #3a3f40 !important; } .admin-bar .site-header-inner { top: calc(32px + var(--ser-banner-h)); } /* Mobile: tighten typography so the full banner text wraps as compactly as possible. When it does need to wrap to a second line, the dynamic --ser-banner-h (set by the plugin's JS) keeps the header positioned directly below the actual banner height so nothing gets covered. */ @media (max-width: 640px) { .opening-hours-banner { padding: 6px 12px !important; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: 0 !important; } .opening-hours-banner .banner-today { flex-wrap: wrap; justify-content: center; gap: 4px 8px; } /* Drop the "·" separator on mobile — looks dangling when the two shops wrap onto separate lines. The plugin's inline