/* ========================================================================== Freestyle Magician - GLOBAL HEADER STYLESHEET Controls ONLY the announcement bar, main nav, logo, Weddings dropdown, hamburger and header CTA button. Scoped entirely under .fm-global-header with its OWN copy of the colours/fonts it needs, so this header renders identically regardless of which page template, page-specific stylesheet (uk-weddings-hub.css, freestyle-magician-home.css, freestyle-location- pages.css, etc.) or wrapper class (.freestyle-hub-page, .freestyle- magician-home, .freestyle-location-page, .freestyle-witnesses-page, .freestyle-contact-page) happens to sit underneath it - or none at all. Values below are copied unchanged from the working header CSS already live across the site (uk-weddings-hub.css's nav/warn-bar rules), simply renamed fh- -> fm- and re-scoped. Nothing has been redesigned. STICKY-NAV FIX: .fm-global-header uses display:contents, so it generates no box of its own - its children (.fm-warn-bar and .fm-nav) render as if they were direct children of instead. This matters because .fm-nav is position:sticky, and a sticky element can only stay stuck for as long as ITS CONTAINING BLOCK still has room below it - with .fm-global-header only ever containing the warn bar + nav (nothing else, ends right after the nav), that containing block was only ~1 warn-bar-height tall, so the nav would stop sticking and scroll away again after ~35-45px of scroll. display:contents removes that short wrapper from the box tree entirely (the DOM/class structure, CSS variables, JS selectors and inheritance are all unaffected - only box generation and containing-block geometry change), so .fm-nav's real containing block becomes , which spans the whole page: plenty of room to stay pinned at top:0 for the full scroll on every page length. The warn bar keeps behaving exactly as before either way, since it was never position:sticky to begin with. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); .fm-global-header{ --fm-ivory:#FFFDF8; --fm-red:#C5313A; --fm-ink:#111110; --fm-line: rgba(17,17,16,.16); --fm-warn-icon:#D5A847; display:contents; /* see STICKY-NAV FIX note above */ font-size:18px; /* base for the rem values below; header sets no line-height/body copy of its own - inherited by children regardless of display:contents */ } .fm-global-header, .fm-global-header *, .fm-global-header *::before, .fm-global-header *::after{box-sizing:border-box;} .fm-global-header img{max-width:100%;display:block;background:transparent;} .fm-global-header a{color:inherit;text-decoration:none;} .fm-global-header :focus-visible{outline:3px solid var(--fm-ink);outline-offset:3px;} .fm-global-header .fm-wrap{max-width:1400px;margin:0 auto;padding:0 1.5rem;} .fm-global-header .fm-icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} /* ---------- announcement bar ---------- */ .fm-global-header .fm-warn-bar{background:var(--fm-red);color:var(--fm-ivory);border-bottom:1px solid rgba(17,17,16,.5);} .fm-global-header .fm-warn-bar .fm-wrap{ display:flex;align-items:center;justify-content:center;gap:.55rem; padding-top:.45rem;padding-bottom:.45rem;min-width:0; } .fm-global-header .fm-warn-bar .fm-icon{width:.85em;height:.85em;flex:none;color:var(--fm-warn-icon);stroke-width:1.8;} .fm-global-header .fm-warn-bar p{ margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-family:'Space Mono',monospace;font-weight:700;text-transform:uppercase; letter-spacing:.07em;font-size:.7rem;max-width:none; } /* ---------- header CTA button (small variant only - the only one the header ever needs) ---------- */ .fm-global-header .fm-btn{ display:inline-flex;align-items:center;gap:.5rem; font-family:'Space Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.06em; border:2px solid var(--fm-ink);background:var(--fm-red);color:var(--fm-ivory); cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap; } .fm-global-header .fm-btn--sm{padding:.65rem 1rem;font-size:.74rem;box-shadow:3px 3px 0 var(--fm-ink);} .fm-global-header .fm-btn--sm:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--fm-ink);} .fm-global-header .fm-btn--sm:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--fm-ink);} /* ---------- main nav ---------- */ .fm-global-header .fm-nav{position:sticky;top:0;z-index:50;background:var(--fm-ivory);border-bottom:3px solid var(--fm-ink);} .fm-global-header .fm-nav__wrap{display:flex;align-items:center;justify-content:space-between;padding-top:.7rem;padding-bottom:.7rem;gap:1rem;} .fm-global-header .fm-nav__brand{display:inline-flex;align-items:center;} .fm-global-header .fm-nav__logo{display:block;width:clamp(140px,11vw,180px);height:auto;} .fm-global-header .fm-nav__right{display:flex;align-items:center;gap:1.6rem;} .fm-global-header .fm-nav__links{list-style:none;display:flex;align-items:center;gap:1.4rem;margin:0;padding:0;} .fm-global-header .fm-nav__links > li{position:relative;} .fm-global-header .fm-nav__links a, .fm-global-header .fm-nav__dropdown-toggle{ font-family:'Space Mono',monospace;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--fm-ink);background:none;border:none;padding:0 0 3px;border-bottom:2px solid transparent; display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;white-space:nowrap; } .fm-global-header .fm-nav__links a[aria-current="page"]{border-bottom-color:var(--fm-red);} .fm-global-header .fm-nav__links a:hover, .fm-global-header .fm-nav__dropdown-toggle:hover{color:var(--fm-red);border-bottom-color:var(--fm-red);} .fm-global-header .fm-nav__caret{transition:transform .15s ease;} .fm-global-header .fm-nav__dropdown-toggle[aria-expanded="true"] .fm-nav__caret{transform:rotate(180deg);} .fm-global-header .fm-nav__dropdown{ list-style:none;margin:0;padding:.5rem;position:absolute;top:100%;left:0;margin-top:.9rem; background:var(--fm-ivory);border:2px solid var(--fm-ink);box-shadow:4px 4px 0 var(--fm-ink); min-width:170px;display:none; } .fm-global-header .fm-nav__dropdown.is-open{display:block;} .fm-global-header .fm-nav__dropdown a{display:block;padding:.55rem .6rem;border-bottom:0;} .fm-global-header .fm-nav__dropdown a:hover{background:var(--fm-ivory);color:var(--fm-red);} .fm-global-header .fm-nav__toggle{ display:none;background:none;border:2px solid var(--fm-ink);color:var(--fm-ink); padding:.45rem .55rem;cursor:pointer;align-items:center;justify-content:center; } @media (max-width:900px){ .fm-global-header .fm-nav__right{gap:.9rem;} .fm-global-header .fm-nav__links{ position:absolute;top:100%;left:0;right:0;background:var(--fm-ivory);border-bottom:3px solid var(--fm-ink); flex-direction:column;align-items:stretch;gap:0;padding:.3rem 1.15rem 1rem; transform:translateY(-6px);opacity:0;pointer-events:none;visibility:hidden; transition:opacity .16s ease, transform .16s ease; } .fm-global-header .fm-nav__links a, .fm-global-header .fm-nav__dropdown-toggle{width:100%;padding:.9rem 0;border-bottom:1px solid var(--fm-line);justify-content:space-between;} .fm-global-header .fm-nav__links.is-open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;} .fm-global-header .fm-nav__toggle{display:inline-flex;} .fm-global-header .fm-nav__logo{width:clamp(110px,26vw,140px);} .fm-global-header .fm-nav__dropdown{ position:static;box-shadow:none;border:none;border-top:1px dashed var(--fm-line); margin:0 0 .4rem;min-width:0;background:transparent; } .fm-global-header .fm-nav__dropdown a{padding:.7rem 0 .7rem 1rem;} }