/* ============================================================ SHARED SITE HEADER COMPONENT Extracted from the home page's resolved header cascade in styles.css ("SITE HEADER + FOOTER — FROSTED GLASS", plus the golden-glow button pass) so every page can use the exact same navbar/header by loading this one file. Values are hardcoded (not var()-based) so this file is fully self-contained and safe to drop into any page's without depending on — or clashing with — that page's own CSS variables. Currently used by: services.html. Not loaded by index.html, since index.html already gets identical output straight from styles.css. (last touched 2026-07-21 to force a fresh save/sync) ============================================================ */ /* ---- Header shell ---- */ .site-header { /* display:block explicitly overrides an old wireframe.css template rule (unrelated to services, left over from the generic starter template) that put display:flex on .site-header itself. With that active, .site-header__inner — never told to grow — just shrank to its own content width and sat flush left, leaving the rest of the header empty on the right. Forcing block here makes .site-header__inner behave like a normal full-width box again, the way it needs to for its own internal grid to size against the header's full width. */ display: block; position: sticky; top: 0; z-index: 500; width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-top: 0; background: rgba(248, 214, 126, .5); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(184, 140, 60, .32); box-shadow: 0 8px 24px rgba(166, 111, 8, .08); } .site-header__inner { /* No max-width/margin:auto here on purpose: on home this box is capped at 1460px and centered, which leaves a gap between the Consultation button and the true right edge on wide windows — confirmed on the actual home page that this gap does NOT show, so the real rendered behavior is edge-to-edge, not capped. Matching that instead of the theoretical 1460px rule keeps the button flush right at any width. Grid, not flex: three columns (1fr / auto / 1fr). Home centers the nav by taking it out of flow and positioning it against the header's full width — true center, but with nothing balancing it on the left, that technique can let the centered box reach under the actions column at some widths (that's what put the Consultation button on top of FAQ/Newsroom earlier). A 1fr/auto/1fr grid gets the same true center — the empty first column always matches the last column's width, so the middle (nav) column is genuinely centered on the whole bar — but because grid columns are separate boxes, the nav can never silently overlap the right column the way absolutely-positioned content could. */ position: relative; padding: 14px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; } /* ---- Primary nav: sits in the grid's centered middle column ---- */ .site-nav { grid-column: 2; display: flex; justify-content: center; } .site-nav > ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; white-space: nowrap; } .site-nav__link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 8px 0; color: #28231c; font-family: "Roboto", Arial, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; } .site-nav__link:hover { color: #f4ad18; } /* ---- Actions (search + Consultation CTA) ---- */ .site-header__right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .site-header__actions { display: flex; align-items: center; gap: 20px; } .site-header__phone { display: flex; align-items: center; gap: 8px; color: #28231c; text-decoration: none; } .site-header__phone svg { width: 16px; height: 16px; fill: #f4ad18; flex: none; } .site-header__phone b { display: block; font-size: 13.5px; font-weight: 700; } .site-header__phone small { display: block; font-size: 10px; color: #756d61; font-weight: 400; } .site-header__search { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .35); color: #28231c; cursor: pointer; padding: 0; margin: 0; } .site-header__search svg { width: 17px; height: 17px; display: block; } .site-header__search:hover { background: rgba(255, 255, 255, .55); } /* ---- Consultation button: home's golden-glow pill CTA ---- */ @keyframes goldenGlowRotate { to { transform: rotate(1turn); } } .site-header .btn, .site-nav--mobile .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; position: relative; isolation: isolate; overflow: hidden; min-height: 58px; padding: 0 34px; border-radius: 999px; border: 1px solid rgba(229, 164, 22, .46); background: transparent; color: #201404; font-family: "Roboto", Arial, sans-serif; font-weight: 500; font-size: 16px; box-shadow: 0 18px 34px rgba(181, 104, 0, .34), 0 0 34px rgba(255, 202, 54, .38), inset 0 1px 0 rgba(255, 255, 255, .58); transform: translateZ(0); transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease; } .site-header .btn::before, .site-nav--mobile .btn::before { content: ""; position: absolute; inset: -95%; z-index: -2; opacity: .58; filter: blur(5px) saturate(1.08); background: conic-gradient( from 0deg, rgba(255, 213, 76, .08) 0deg, rgba(255, 210, 68, .58) 58deg, rgba(242, 164, 23, .66) 116deg, rgba(199, 119, 0, .22) 178deg, rgba(255, 213, 76, .08) 248deg, rgba(255, 196, 43, .5) 318deg, rgba(255, 213, 76, .08) 360deg ); animation: goldenGlowRotate 2.8s linear infinite; pointer-events: none; } .site-header .btn::after, .site-nav--mobile .btn::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #ffe076 0%, #ffc247 36%, #eda017 72%, #ffd166 100%); box-shadow: inset 0 -10px 18px rgba(149, 82, 0, .16); pointer-events: none; } .site-header .btn:hover, .site-nav--mobile .btn:hover { transform: scale(1.04); filter: saturate(1.08) brightness(1.04); box-shadow: 0 23px 44px rgba(181, 104, 0, .44), 0 0 54px rgba(255, 203, 52, .62), inset 0 1px 0 rgba(255, 255, 255, .68); } .site-header .btn:hover::before, .site-nav--mobile .btn:hover::before { opacity: .74; filter: blur(5px) saturate(1.18) brightness(1.04); } .site-header .btn--gold, .site-nav--mobile .btn--gold { min-width: 230px; height: 58px; } .site-header .btn--header { min-width: 0; padding: 0 20px; gap: 8px; } .site-header .btn--header svg { width: 14px; height: 14px; } @media (prefers-reduced-motion: reduce) { .site-header .btn::before, .site-nav--mobile .btn::before { animation: none; } } @media (max-width: 640px) { .site-header .btn--gold, .site-nav--mobile .btn--gold { min-width: 0; width: 100%; height: 54px; font-size: 15px; } } /* ---- Burger + mobile nav ---- */ .site-header__burger { display: none; flex: none; width: 40px; height: 40px; border: 1px solid rgba(184, 140, 60, .32); border-radius: 10px; background: rgba(255, 255, 255, .35); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; padding: 0; } .site-header__burger span { width: 18px; height: 2px; border-radius: 2px; background: #28231c; display: block; } .site-nav--mobile { display: none; flex-direction: column; gap: 18px; padding: 20px 24px 26px; background: rgba(246, 204, 102, .85); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(184, 140, 60, .32); } .site-nav--mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .site-nav--mobile a { color: #28231c; font-size: 15px; font-weight: 600; text-decoration: none; } .site-nav--mobile .site-header__phone { color: #28231c; } .site-nav--mobile.is-open { display: flex; } @media (max-width: 1080px) { .site-nav, .site-header__phone, .site-header__search { display: none; } .site-header__burger { display: flex; } .site-header__actions { gap: 12px; } } @media (max-width: 560px) { .site-header__inner { padding: 12px 16px; gap: 12px; } .site-header .btn--header { padding: 0 14px; font-size: 12px; } } /* Shared black navbar final override */ .site-header{ display:block !important; position:sticky !important; top:0 !important; z-index:500 !important; width:100% !important; background:#050505 !important; background-image:none !important; color:#fff !important; border-bottom:1px solid rgba(255,255,255,.12) !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .site-header__inner{ max-width:none !important; width:100% !important; margin:0 !important; padding:14px 32px !important; display:grid !important; grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr) !important; align-items:center !important; gap:28px !important; } .site-nav{grid-column:2 !important;justify-self:center !important;display:flex !important;align-items:center !important;justify-content:center !important;width:auto !important;flex:none !important;} .site-nav ul{position:static !important;left:auto !important;transform:none !important;display:flex !important;align-items:center !important;gap:26px !important;margin:0 !important;padding:0 !important;list-style:none !important;} .site-header__right{grid-column:3 !important;justify-self:end !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:20px !important;} .site-header__actions{display:flex !important;align-items:center !important;gap:20px !important;} .site-header .site-nav__link,.site-nav--mobile a{color:#fff !important;font-size:14px !important;font-weight:700 !important;line-height:1 !important;} .site-header .btn--header{min-width:0 !important;height:56px !important;padding:0 26px !important;border-radius:999px !important;font-size:16px !important;font-weight:800 !important;} .site-header__search{width:44px !important;height:44px !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important;} .site-header__burger{display:none !important;background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important;} .site-header__burger span{background:#fff !important;} .site-nav--mobile{background:#050505 !important;color:#fff !important;border-color:rgba(255,255,255,.12) !important;} @media (max-width:1080px){.site-header__inner{display:flex !important;justify-content:flex-end !important}.site-nav,.site-header__search{display:none !important}.site-header__burger{display:flex !important}} @media (max-width:560px){.site-header__inner{padding:12px 16px !important;gap:12px !important}.site-header .btn--header{height:46px !important;padding:0 16px !important;font-size:13px !important}} /* Header CTA must never resize/flicker between pages */ .site-header .btn--header, .site-header .btn--header:hover, .site-header .btn--header:focus, .site-header .btn--header:focus-visible, .site-header .btn--header:active{ box-sizing: border-box !important; width: 166px !important; min-width: 166px !important; max-width: 166px !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; padding: 0 !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; scale: 1 !important; transition: background-color .18s ease, color .18s ease, border-color .18s ease !important; filter: none !important; } .site-header .btn--header::before, .site-header .btn--header:hover::before, .site-header .btn--header:focus::before, .site-header .btn--header:active::before{ content: none !important; display: none !important; opacity: 0 !important; animation: none !important; } .site-header .btn--header::after, .site-header .btn--header:hover::after, .site-header .btn--header:focus::after, .site-header .btn--header:active::after{ inset: 3px !important; border-radius: inherit !important; transform: none !important; animation: none !important; filter: none !important; } @media (max-width: 560px){ .site-header .btn--header, .site-header .btn--header:hover, .site-header .btn--header:focus, .site-header .btn--header:focus-visible, .site-header .btn--header:active{ width: 140px !important; min-width: 140px !important; max-width: 140px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; font-size: 13px !important; } } /* Emergency navbar containment fix: no CTA overflow */ html, body{ overflow-x: hidden !important; } .site-header{ overflow: hidden !important; } .site-header__inner{ box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding: 14px clamp(18px, 2.2vw, 32px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; gap: clamp(12px, 1.5vw, 24px) !important; } .site-nav{ grid-column: 2 !important; justify-self: center !important; min-width: 0 !important; } .site-nav ul{ gap: clamp(16px, 1.55vw, 26px) !important; white-space: nowrap !important; } .site-header__right{ grid-column: 3 !important; justify-self: end !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; } .site-header__actions{ min-width: 0 !important; max-width: 100% !important; gap: clamp(12px, 1.1vw, 20px) !important; } .site-header .btn--header, .site-header .btn--header:hover, .site-header .btn--header:focus, .site-header .btn--header:active{ width: auto !important; min-width: 0 !important; max-width: calc(100vw - 88px) !important; height: 56px !important; padding: 0 clamp(20px, 2vw, 26px) !important; transform: none !important; white-space: nowrap !important; } .site-header__search{ flex: 0 0 44px !important; } @media (max-width: 1180px){ .site-header__inner{ grid-template-columns: 1fr auto !important; } .site-nav{ grid-column: 1 !important; justify-self: start !important; } .site-header__right{ grid-column: 2 !important; } } @media (max-width: 1080px){ .site-header__inner{ display: flex !important; justify-content: flex-end !important; } .site-nav, .site-header__search{ display: none !important; } .site-header__burger{ display: flex !important; } } /* FINAL shared navbar behavior: fixed, contained, no CTA flicker */ :root{--site-header-h:88px !important;} html{scroll-padding-top:var(--site-header-h) !important;} body{padding-top:var(--site-header-h) !important;overflow-x:hidden !important;} .site-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:5000 !important;width:100% !important;height:var(--site-header-h) !important;overflow:hidden !important;background:#050505 !important;color:#fff !important;border-bottom:1px solid rgba(255,255,255,.12) !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;font-family:Roboto,Arial,sans-serif !important;} .site-header__inner{box-sizing:border-box !important;width:100% !important;max-width:100% !important;height:100% !important;margin:0 !important;padding:14px clamp(18px,2.2vw,32px) !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;align-items:center !important;gap:clamp(12px,1.5vw,24px) !important;} .site-nav{grid-column:2 !important;justify-self:center !important;min-width:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;} .site-nav ul{position:static !important;left:auto !important;transform:none !important;display:flex !important;align-items:center !important;gap:clamp(16px,1.55vw,26px) !important;margin:0 !important;padding:0 !important;list-style:none !important;white-space:nowrap !important;} .site-header__right{grid-column:3 !important;justify-self:end !important;min-width:0 !important;max-width:100% !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:clamp(12px,1.1vw,20px) !important;} .site-header__actions{display:flex !important;align-items:center !important;gap:clamp(12px,1.1vw,20px) !important;min-width:0 !important;max-width:100% !important;} .site-header .site-nav__link{color:#fff !important;font-size:14px !important;font-weight:700 !important;line-height:1 !important;text-decoration:none !important;} .site-header .btn--header,.site-header .btn--header:hover,.site-header .btn--header:focus,.site-header .btn--header:focus-visible,.site-header .btn--header:active{box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;min-width:0 !important;max-width:calc(100vw - 96px) !important;height:56px !important;min-height:56px !important;max-height:56px !important;padding:0 clamp(20px,2vw,26px) !important;border-radius:999px !important;font-size:16px !important;font-weight:700 !important;line-height:1 !important;white-space:nowrap !important;text-decoration:none !important;transform:none !important;scale:1 !important;filter:none !important;transition:none !important;} .site-header .btn--header::before,.site-header .btn--header:hover::before,.site-header .btn--header:focus::before,.site-header .btn--header:active::before{content:none !important;display:none !important;opacity:0 !important;animation:none !important;} .site-header .btn--header::after,.site-header .btn--header:hover::after,.site-header .btn--header:focus::after,.site-header .btn--header:active::after{transform:none !important;animation:none !important;filter:none !important;} .site-header__search{box-sizing:border-box !important;flex:0 0 44px !important;width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important;} .site-header__burger{display:none !important;} @media(max-width:1180px){.site-header__inner{grid-template-columns:1fr auto !important}.site-nav{grid-column:1 !important;justify-self:start !important}.site-header__right{grid-column:2 !important}} @media(max-width:1080px){.site-header__inner{display:flex !important;justify-content:flex-end !important}.site-nav,.site-header__search{display:none !important}.site-header__burger{display:flex !important}} @media(max-width:560px){:root{--site-header-h:70px !important}.site-header .btn--header,.site-header .btn--header:hover,.site-header .btn--header:focus,.site-header .btn--header:focus-visible,.site-header .btn--header:active{height:46px !important;min-height:46px !important;max-height:46px !important;padding:0 16px !important;font-size:13px !important}.site-header__inner{padding:12px 16px !important;gap:12px !important}}