/* Sticky header — spec §5.2 */ .rsdf-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--rsdf-header-height); display: flex; align-items: center; background-color: transparent; box-shadow: none; transition: height var(--rsdf-duration) var(--rsdf-ease), background-color var(--rsdf-duration) var(--rsdf-ease), box-shadow var(--rsdf-duration) var(--rsdf-ease), top var(--rsdf-duration) var(--rsdf-ease); } /* * When logged in, WP pushes the whole page down with its admin bar (32px * desktop, 46px on screens under 783px) by margin-topping — but a * fixed-position element ignores that margin and stays pinned to the true * viewport top, so the header (and logo) render partly behind the admin bar. * Nudging the header down by the same amount keeps it fully visible without * affecting anything for logged-out visitors (the admin bar simply isn't * in the markup for them, so these rules never match). */ body.admin-bar .rsdf-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .rsdf-header { top: 46px; } } /* * Homepage starts fully transparent — no green bar — and only turns solid once * scrolled past the sentinel (JS toggles .is-scrolled). Inner pages are solid * from load. body.rsdf-is-front is a custom class added in functions.php, * specifically because WordPress core's own 'home' class does NOT reliably mark * a static front page (only the blog posts index) — see the comment there. */ .rsdf-header:not(.is-home), .rsdf-header.is-scrolled { height: var(--rsdf-header-height-collapsed); background-color: var(--rsdf-green-dark); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } body.rsdf-is-front .rsdf-header.is-home:not(.is-scrolled) { background-color: transparent; box-shadow: none; height: var(--rsdf-header-height); } .rsdf-header__inner { width: 100%; max-width: var(--rsdf-content-max-width); margin-inline: auto; padding-inline: var(--rsdf-gutter); display: flex; align-items: center; justify-content: space-between; } .rsdf-header__logo { display: inline-flex; line-height: 0; } /* * Two logo images sit stacked in the same ; only one is shown at a time. * Boxed version (with its own dark-green panel) for the transparent * homepage-top state, where it needs its own backdrop to read against the * photo behind it. No-background version once the header itself has a solid * background (scrolled, or any inner page) — at that point a second box is * redundant, and removing it means the logo can run larger without looking * bulky, per feedback. */ .rsdf-header__logo-img--nobox { display: none; } .rsdf-header.is-scrolled .rsdf-header__logo-img--boxed, .rsdf-header:not(.is-home) .rsdf-header__logo-img--boxed { display: none; } .rsdf-header.is-scrolled .rsdf-header__logo-img--nobox, .rsdf-header:not(.is-home) .rsdf-header__logo-img--nobox { display: block; } /* Sized by width to preserve each logo's own native proportions (boxed is 350:140, no-bg is 273:73), fluid between mobile and desktop. */ .rsdf-header__logo-img--boxed { width: clamp(150px, 16vw + 80px, 260px); height: auto; transition: width var(--rsdf-duration) var(--rsdf-ease); } .rsdf-header__logo-img--nobox { /* Sized larger than the boxed version's collapsed state used to be — it no longer needs to look smaller to avoid feeling bulky. */ width: clamp(150px, 12vw + 70px, 210px); height: auto; transition: width var(--rsdf-duration) var(--rsdf-ease); } /* * Logo, nav and actions shift up together on the tall/transparent homepage * header, so the logo deliberately overflows ("bleeds") above the header bar * rather than sitting centred and looking too low — while staying on the * same baseline as the nav links and Book Now button, which move up by the * same amount rather than being left behind. */ body.rsdf-is-front .rsdf-header.is-home:not(.is-scrolled) .rsdf-header__inner { transform: translateY(-30px); } .rsdf-header__actions { display: flex; align-items: center; gap: 20px; } .rsdf-header__login { display: none; align-items: center; gap: 6px; color: var(--rsdf-white); text-decoration: none; font-family: var(--rsdf-font-ui); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; } .rsdf-header__login-icon { width: 18px; height: 18px; flex-shrink: 0; } @media (min-width: 1024px) { .rsdf-header__login { display: inline-flex; } } .rsdf-header__nav { display: none; } @media (min-width: 1024px) { .rsdf-header__nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .rsdf-header__nav a { color: var(--rsdf-white); text-decoration: none; font-family: var(--rsdf-font-ui); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; } } /* * Very light text-shadow to lift the white nav/login type off the hero photo * — but only in the one state that has no green bar behind it: the * transparent, not-yet-scrolled top of the homepage. Everywhere else * (.is-scrolled, or any inner page) the header already has a solid * --rsdf-green-dark background, so the white type has enough contrast on * its own and doesn't need the shadow. */ body.rsdf-is-front .rsdf-header.is-home:not(.is-scrolled) .rsdf-header__nav a, body.rsdf-is-front .rsdf-header.is-home:not(.is-scrolled) .rsdf-header__login { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .rsdf-header__burger { display: inline-flex; background: transparent; border: none; color: var(--rsdf-white); width: 44px; height: 44px; align-items: center; justify-content: center; } @media (min-width: 1024px) { .rsdf-header__burger { display: none; } } /* Mobile full-screen overlay menu */ .rsdf-mobile-menu { position: fixed; inset: 0; background: var(--rsdf-green-dark); z-index: 600; display: flex; flex-direction: column; padding: 24px; transform: translateY(-100%); transition: transform var(--rsdf-duration) var(--rsdf-ease); } .rsdf-mobile-menu.is-open { transform: translateY(0); } .rsdf-mobile-menu ul { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .rsdf-mobile-menu a { color: var(--rsdf-white); text-decoration: none; font-size: 1.5rem; font-family: var(--rsdf-font-display); } .rsdf-mobile-menu__close { align-self: flex-end; background: transparent; border: none; color: var(--rsdf-white); width: 44px; height: 44px; } body.rsdf-menu-open { overflow: hidden; }