/* Mou Gokart – top notice banner (summer drop-in row + one-off temp row). Loaded whenever either row qualifies: site-wide when the temp notice is active, and on the front page / selected opening-hours / tourist pages during the summer window. Dark neon theme. The Bricks header (.mk-header) is position:fixed; top:0; z-index:1000, so a banner placed in normal flow at the top of is painted over by it. Instead the banner is fixed to the very top (above the header) and, under the .mk-has-summer-notice body class, both the fixed header and the page content are pushed down by the banner height. Header and content shift by the SAME amount, so their existing relationship is preserved and there is no scroll gap. All offset rules are scoped to the body class, so the header is 100% unchanged on pages/dates where the banner is not rendered. The banner height varies by breakpoint, language and row count, so the offset uses the --mk-summer-notice-h custom property published by mougokart-summer-notice.js (measured on load + resize; the observer measures the whole wrapper so stacked rows are covered). --mk-summer-notice-h-fallback is a generous per-breakpoint fallback used until the script runs; the .mk-notice-two-row body class raises it for the stacked (temp + summer) case. */ :root { --mk-summer-notice-h-fallback: 72px; } .mk-summer-notice { position: fixed; top: 0; left: 0; right: 0; /* Above the fixed header (z-index:1000) and the mobile nav overlay (999). */ z-index: 1001; background: var(--mk-bg-surface, #12122a); border-bottom: 2px solid var(--mk-cyan, #34e2ff); color: var(--mk-text-normal, #e0e0f0); font-size: 0.9rem; line-height: 1.45; } /* One full-width row per notice. Left accent stripe distinguishes them; the second row gets a hairline divider from the first. */ .mk-summer-notice__row { border-left: 4px solid transparent; } .mk-summer-notice__row + .mk-summer-notice__row { border-top: 1px solid rgba(255, 255, 255, 0.12); } /* Urgent temp notice: magenta accent + faint magenta wash so it reads first. */ .mk-summer-notice__row--temp { border-left-color: var(--mk-magenta, #ff7d8b); background: rgba(255, 125, 139, 0.1); } /* Seasonal summer row: cyan accent, matching the wrapper edge. */ .mk-summer-notice__row--summer { border-left-color: var(--mk-cyan, #34e2ff); } .mk-summer-notice__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; max-width: 1200px; margin: 0 auto; padding: 0.65rem 1.25rem; text-align: center; } .mk-summer-notice__text { color: var(--mk-text-bright, #ffffff); } .mk-summer-notice__link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.35rem 1.1rem; border: 1px solid var(--mk-cyan, #34e2ff); border-radius: 999px; color: var(--mk-cyan, #34e2ff); font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .mk-summer-notice__link:hover, .mk-summer-notice__link:focus-visible { background: var(--mk-cyan, #34e2ff); color: var(--mk-bg-dark, #0a0a1a); } /* ---- Header + content offset (only while the banner is present) ---- */ /* Push all page content down by the banner height. The banner itself is fixed (out of flow), so this padding cannot double-count it. */ body.mk-has-summer-notice { padding-top: var(--mk-summer-notice-h, var(--mk-summer-notice-h-fallback)); } /* Slide the fixed Bricks header down by the same amount so it sits directly below the banner instead of on top of it. */ body.mk-has-summer-notice .mk-header { top: var(--mk-summer-notice-h, var(--mk-summer-notice-h-fallback)); } /* Keep in-page anchor jumps clear of the banner + header. */ html:has(body.mk-has-summer-notice) { scroll-padding-top: calc( var(--mk-summer-notice-h, var(--mk-summer-notice-h-fallback)) + 80px ); } /* Two stacked rows are taller: raise the pre-JS fallback so the header is not briefly overlapped before ResizeObserver publishes the exact height. */ body.mk-has-summer-notice.mk-notice-two-row { --mk-summer-notice-h-fallback: 120px; } /* Phones: stack the text over a full-width tap target, tighten padding, and raise the fallback offset because each row wraps to multiple lines. */ @media (max-width: 600px) { :root { --mk-summer-notice-h-fallback: 132px; } .mk-summer-notice { font-size: 0.82rem; } .mk-summer-notice__inner { flex-direction: column; gap: 0.6rem; padding: 0.6rem 0.85rem; } .mk-summer-notice__link { width: 100%; max-width: 320px; } body.mk-has-summer-notice.mk-notice-two-row { --mk-summer-notice-h-fallback: 220px; } }