/* ========================================================================== JEAN LLESES — site navigation -------------------------------------------------------------------------- ONE nav for all 136 pages. Extracted verbatim from the property-page template, which 116 pages already carried, so the pages that had a different nav (or none at all) now render pixel-identically to the rest. Was inconsistent before this file existed: 116 pages the mega-nav below 7 pages a simpler bespoke nav 1 page .site-nav 3 pages .topbar 12 pages NO nav at all — including the computation tool, every comparison/presentation page, and the thank-you page The five design tokens it reads are declared by every page's own .uknav, .uknav-mobile { --gold: var(--gold, #8FB8DF); --gold-light: var(--gold-light, #C2DDF5); --gold-dark: var(--gold-dark, #5980A6); --dark: var(--dark, #07090F); --font-sans: var(--font-sans, 'Montserrat', system-ui, sans-serif); } /* ===== Jean Lleses Unified Mega Nav (self-contained, drop-in) ===== */ .uknav{position:fixed;top:0;left:0;right:0;z-index:1000;height:80px;display:flex;align-items:center;padding:0 28px;font-family:'Montserrat',sans-serif;transition:background .4s,box-shadow .4s} .uknav.scrolled{background:rgba(7,9,15,0.97);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(143, 184, 223,0.2)} .uknav-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px} .uknav-logo img{height:38px;width:auto;display:block} .uknav a,.uknav-mobile a{text-decoration:none} .uknav-links{display:flex;align-items:center;gap:1px;flex:1;justify-content:center;list-style:none;margin:0;padding:0} .uknav-item{position:relative} .uknav-trigger{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.75);padding:10px 12px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;font-family:inherit;transition:color .2s,background .2s;white-space:nowrap} .uknav-promo-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--dark);background:linear-gradient(100deg,var(--gold-dark),var(--gold),var(--gold-light));padding:10px 16px;border-radius:20px;white-space:nowrap;box-shadow:0 0 20px rgba(143, 184, 223,.35)} @keyframes uknavPromoPulse{0%,100%{box-shadow:0 0 16px rgba(143, 184, 223,.35)}50%{box-shadow:0 0 30px rgba(143, 184, 223,.7)}} .uknav-mobile-promo-link{display:block;margin:0 24px 20px;text-align:center;font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);background:linear-gradient(100deg,var(--gold-dark),var(--gold),var(--gold-light));padding:16px;border-radius:10px} .uknav-trigger:hover,.uknav-item.open>.uknav-trigger{color:#C2DDF5;background:rgba(143, 184, 223,0.12)} .uknav-chevron{font-size:8px;opacity:.65;transition:transform .25s;margin-top:1px} .uknav-item.open>.uknav-trigger .uknav-chevron{transform:rotate(180deg)} .uknav-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);background:rgba(9,12,20,0.99);backdrop-filter:blur(32px);border:1px solid rgba(143, 184, 223,0.22);border-top:2px solid #8FB8DF;border-radius:0 0 10px 10px;padding:24px 28px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s,transform .22s;box-shadow:0 20px 60px rgba(0,0,0,0.65);z-index:200} .uknav-panel::before{content:'';position:absolute;top:-20px;left:0;right:0;height:20px} .uknav-item.open>.uknav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .uknav-item:first-child>.uknav-panel{left:0;transform:translateY(-6px)} .uknav-item:first-child.open>.uknav-panel{transform:translateY(0)} .uknav-item.uknav-right>.uknav-panel{left:auto;right:0;transform:translateY(-6px)} .uknav-item.uknav-right.open>.uknav-panel{transform:translateY(0)} .uknav-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;min-width:460px} .uknav-collabel{font-size:9px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#8FB8DF;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(143, 184, 223,0.2)} .uknav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:rgba(255,255,255,0.78);transition:color .2s,background .2s;margin-bottom:2px} .uknav-link:hover{color:#C2DDF5;background:rgba(143, 184, 223,0.12)} .uknav-ic{width:30px;height:30px;border-radius:5px;background:rgba(143, 184, 223,0.1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0} .uknav-txt strong{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,0.92);letter-spacing:0.02em} .uknav-txt small{display:block;font-size:10px;color:rgba(255,255,255,0.62);margin-top:2px} .uknav-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-width:560px} .uknav-fcard{display:block;border-radius:6px;overflow:hidden;border:1px solid rgba(143, 184, 223,0.15);background:#121929;transition:border-color .2s,transform .2s} .uknav-fcard:hover{border-color:#8FB8DF;transform:translateY(-2px)} .uknav-fcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .uknav-flabel{padding:7px 9px;font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.8)} .uknav-single{min-width:280px} .uknav-direct{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#C2DDF5;padding:9px 14px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(143, 184, 223,0.35);transition:.2s;white-space:nowrap} .uknav-direct:hover{background:rgba(143, 184, 223,0.12);border-color:#8FB8DF} .uknav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0} .uknav-phone{font-size:11px;font-weight:600;color:#8a94a8;letter-spacing:0.05em;white-space:nowrap} .uknav-cta{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#07090f;background:#8FB8DF;padding:11px 22px;border-radius:3px;transition:.2s;min-height:44px} .uknav-cta:hover{background:#C2DDF5;transform:translateY(-1px)} .uknav-toggle{display:none;flex-direction:column;gap:5px;width:30px;cursor:pointer;background:none;border:none} .uknav-toggle span{display:block;height:2px;background:#fff;border-radius:2px} .uknav-mobile{display:none;position:fixed;inset:0;background:rgba(7,9,15,0.99);z-index:1001;flex-direction:column;overflow-y:auto;padding:80px 32px 48px;font-family:'Montserrat',sans-serif} .uknav-mobile.open{display:flex} .uknav-mclose{position:absolute;top:20px;right:24px;font-size:28px;color:#fff;cursor:pointer;background:none;border:none;line-height:1} .uknav-mgroup{border-bottom:1px solid rgba(143, 184, 223,0.15)} .uknav-mtrigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:#fff;background:none;border:none;cursor:pointer;text-align:left} .uknav-mchevron{font-size:16px;color:#8FB8DF;transition:transform .3s;margin-left:8px;flex-shrink:0} .uknav-mgroup.open .uknav-mchevron{transform:rotate(90deg)} .uknav-mitems{display:none;flex-direction:column;gap:2px;padding-bottom:18px} .uknav-mgroup.open .uknav-mitems{display:flex} .uknav-mitems a{font-size:13px;font-weight:500;letter-spacing:0.04em;color:rgba(255,255,255,0.72);padding:11px 12px;border-radius:5px;min-height:44px;display:flex;align-items:center;transition:.2s} .uknav-mitems a:hover{color:#C2DDF5;background:rgba(143, 184, 223,0.12)} .uknav-mcta{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:16px} .uknav-mphone{font-size:14px;font-weight:600;color:#8a94a8} @media (prefers-reduced-motion: no-preference){.uknav-promo-pill{animation:uknavPromoPulse 2.4s ease-in-out infinite}} @media(max-width:1360px){.uknav-phone{display:none}} @media(max-width:1200px){.uknav-links,.uknav-phone{display:none}.uknav-toggle{display:flex}.uknav{padding:0 24px}} /* -------------------------------------------------------------------------- Pages that carry a page-level section nav as well -------------------------------------------------------------------------- The two buyer presentations ship a `.topbar` — an in-page index ("The Brief / The Place / The Homes / The Value / The Numbers / What's Left / FAQ"). It is NOT a site nav and must not be removed, but it is also position:fixed;top:0 with a higher z-index, so on its own it would sit directly on top of the site nav and hide it. Sibling selector rather than :has(), so no support question: both bars are direct children of , and the site nav is inserted first. -------------------------------------------------------------------------- */ .uknav ~ .topbar { top: 80px; } .uknav.scrolled ~ .topbar { top: 64px; transition: top .3s ease; } /* The page reserved room for one bar; it now needs room for two. */ body:has(.uknav ~ .topbar) { padding-top: 80px; } @media (max-width: 900px) { .uknav ~ .topbar { top: 64px; } .uknav.scrolled ~ .topbar { top: 56px; } body:has(.uknav ~ .topbar) { padding-top: 64px; } } /* -------------------------------------------------------------------------- Solid nav on pages with no hero behind it -------------------------------------------------------------------------- The nav is transparent at the top of the page on purpose: on a property page it floats over a full-bleed night photograph, and a solid bar there would cut the image in half. The tools, comparisons and the marketing plan have no hero — they open on a near-white panel. There the transparent state is white type on white, and the nav only becomes readable once you scroll far enough for `.scrolled` to fire. Those pages get a solid bar from the first paint. Keyed on the ABSENCE of a hero rather than on a page list, so a new page without one is covered automatically. -------------------------------------------------------------------------- */ body:not(:has(.hero, .unit-hero, .page-hero, header.hero, .hero-section)) .uknav, body.jdl-light .uknav { background: rgba(7, 9, 15, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(143, 184, 223, 0.20); }