/** * Landing-page nav — wordmark + anchor links + mobile hamburger menu. * Enqueued only when [wpc_nav] renders its development-page variant (see * includes/nav.php); other pages keep the original static header * untouched, so nothing here needs a fallback/static counterpart. * Breakpoints (1030px for the hamburger, 570px for the CTA swap) match * reference/genesis-combined-build/landing.html's nav exactly. */ html{scroll-behavior:smooth;} /* Chrome/macOS trackpad "rubber-band" bounce at the top of the page translates the whole rendered frame — including position:fixed elements like .wpc-nav below — revealing blank space above it before springing back. This suppresses that overscroll glow/bounce so the nav stays visually glued to the top edge. */ html, body{overscroll-behavior-y:none;} /* Anchor-link targets: offsets the scroll-to position so the section heading lands below the fixed nav instead of directly under/hidden by it (the nav overlays content rather than pushing it down in normal flow, so without this the target would land right at the very top edge, behind the nav bar). */ #amenities, #residences, #unitexamples, #invest, #location, #taxincentives, #howitworks, #our-developments, #how-it-works{ scroll-margin-top:100px; } /* --- Non-development pages (fallback header) --- Replaces the layout the Gutenberg group blocks used to provide before [wpc_nav] took over the header's markup — logo left, links + trigger button right, vertically centered. */ /* Previously came from the wrapper this markup used to sit inside, in header.html — removed when the nav moved off the [wpc_nav]-inside-a-shortcode-block pipeline (see wpc_platform_render_nav()'s docblock in includes/nav.php), since that wrapper served no purpose for the other (position:fixed) nav variants it also used to wrap. */ .wpc-nav-fallback{display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; background-color:var(--wp--preset--color--foreground, #ddb890);} .wpc-nav-links--static{display:flex; align-items:center; gap:1.75rem;} .wpc-nav-links--static a{ color:#ffffff; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.82; text-decoration:none; transition:opacity .25s ease; } .wpc-nav-links--static a:hover{opacity:1;} /* Fixed + full-width: overrides the theme's is-layout-constrained wrapper, which would otherwise cap this at the content max-width (~764–1320px) like a normal in-page block — the nav needs to span the full viewport regardless of that constraint. Starts transparent over the hero and turns solid (same ink token as the floor-plans platform header's .pheader) once nav.js flags .wpc-nav-solid past a scroll threshold. */ .wpc-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; max-width:none !important; position:fixed; top:0; z-index:100; /* Bleeds 1px past each edge (left/right:-1px, padding bumped up to compensate so the visible content's position is unchanged) rather than sitting flush at 0/0 — this element is its own GPU-composited layer (position:fixed + a transform transition), and that layer's edge can round to a different physical pixel than the page's own layer at some viewport-width/DPR combinations, leaving a hairline gap. Overshooting the edges puts any such seam off-screen. */ left:-1px; right:-1px; padding:14px 45px; transition:background .3s ease, padding .3s ease, transform .3s ease; } .wpc-nav.wpc-nav-solid{background:#1d1916; padding:15px 45px;} /* Hidden while scrolling down (see nav.js); never applied while the mobile menu is open. */ .wpc-nav.wpc-nav-hidden{transform:translateY(-100%);} .wpc-nav-wordmark{justify-self:start;} .wpc-nav-links{justify-self:center;} .wpc-nav-actions{justify-self:end;} /* --- Wordmark --- */ .wpc-nav-wordmark{ font-family:"Cormorant","Iowan Old Style",serif; font-size:1.3rem; letter-spacing:.03em; color:#ffffff; display:flex; align-items:baseline; gap:8px; text-decoration:none; flex-shrink:0; } /* Homepage: real logo image instead of a text wordmark — baseline alignment (right for the dev-page text wordmark) looks off for an image, so this recenters it. */ .wpc-nav-wordmark--logo{align-items:center;} /* Homepage Register button — same compact pill as .wpc-auth-header-btn (used for Sign In / signed-in name / Sign Out on the homepage nav), just filled gold instead of outlined. */ .wpc-auth-header-btn--gold{background:#ddb890; border-color:#ddb890; color:#1d1916;} .wpc-auth-header-btn--gold:hover{background:#a67c4a; border-color:#a67c4a; color:#ffffff;} .wpc-nav-cta-desktop{display:flex; align-items:center;} .wpc-nav-cta-desktop .wpc-auth-header-btn + .wpc-auth-header-btn, .wpc-nav-cta-desktop .wpc-auth-trigger + .wpc-auth-trigger{margin-left:10px;} /* No hover state — overrides the theme's generic a:hover color change, which would otherwise apply here since this is just an tag. */ .wpc-nav-wordmark:hover{color:#ffffff;} .wpc-nav-sep{color:#ddb890; font-weight:300;} .wpc-nav-place{font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; color:#ecd3b4;} .wpc-nav-wordmark:hover .wpc-nav-place{color:#ecd3b4;} /* --- Desktop anchor links --- */ .wpc-nav-links{display:flex; align-items:center; gap:1.75rem;} .wpc-nav-links a{ color:#ffffff; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.82; text-decoration:none; transition:color .25s ease, text-shadow .25s ease, opacity .25s ease; } .wpc-nav-links a:hover{opacity:1; color:#ecd3b4; text-shadow:0 0 8px rgba(221,184,144,.6);} .wpc-nav-actions{display:flex; align-items:center; gap:1rem; flex-shrink:0;} /* Mobile CTA copy (inside the collapsible menu) hidden on desktop; the desktop CTA (in .wpc-nav-actions) hides on narrow screens instead — same swap point as the reference nav. */ .wpc-nav-cta-mobile{display:none;} @media (max-width:1030px){ /* Matches the hamburger's own breakpoint just below — .wpc-nav-burger and .wpc-nav-links' full-screen overlay already switch on at 1030px, so this swap has to happen at the same width. It used to trigger separately at 570px, which left a tablet-width gap where both the hamburger AND the desktop "View Floor Plans" + account dropdown showed at once. */ .wpc-nav-actions .wpc-nav-cta-desktop{display:contents;} .wpc-nav-cta-desktop .wpc-account-wrap{display:none;} .wpc-nav-cta-desktop > .wpc-auth-trigger{display:none;} .wpc-nav-cta-mobile{display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;} } @media (max-width:570px){ /* Unlike .wpc-nav-cta-desktop just above, this stays visible through the whole tablet range (571–1030px) — only true mobile widths drop it, since the header has less room there and the hamburger menu is the primary way in at that size anyway. */ .wpc-nav-view-floor-plans{display:none;} } /* --- Hamburger --- */ .wpc-nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; padding:0; cursor:pointer; z-index:60; } .wpc-nav-burger span{display:block; width:100%; height:2px; background:#ffffff; transition:transform .25s ease, opacity .25s ease;} .wpc-nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .wpc-nav-burger.open span:nth-child(2){opacity:0;} .wpc-nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media (max-width:1030px){ .wpc-nav-burger{display:flex;} /* .wpc-nav-links leaves the grid flow below (position:fixed), leaving only 2 of the 3 grid items (wordmark, actions) in-flow — with grid-template-columns still defining 3 tracks, auto-placement puts them in columns 1 and 2, not 1 and 3, landing the hamburger mid- screen instead of at the right edge. Plain flex space-between here sidesteps that entirely; the grid's centering was only needed for the desktop links track anyway. */ .wpc-nav{display:flex; justify-content:space-between;} .wpc-nav-links{ /* Same 1px edge-bleed as .wpc-nav above, and for the same reason: this is a full-viewport fixed box with its own opacity transition (so its own GPU layer), sitting directly behind .wpc-nav at the top of the screen — .wpc-nav was masking the seam whenever it covered that area, which is exactly why the hairline only showed up where .wpc-nav wasn't (further down the viewport, and while the nav was hidden by the scroll-hide behavior). Width is explicit (not left+right auto-solved) because browsers don't reliably solve width from left/right for an out-of-flow flex container in column direction — confirmed live: it was shrinking to fit its content (~228px) instead of filling the viewport, which is the actual "not full width" bug. .wpc-nav doesn't hit this since it's row-direction. */ position:fixed; left:-1px; top:-1px; width:calc(100vw + 2px); height:calc(100svh + 2px); margin:0; padding:0; background:#1d1916; flex-direction:column; justify-content:center; align-items:center; gap:1.75rem; opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:59; } .wpc-nav-links.open{opacity:1; visibility:visible;} .wpc-nav-links a{font-size:1rem; opacity:1;} /* Match the anchor links' mobile font-size and swap the border to gold — scoped to the menu's own CTA copy only, not the desktop nav button this shares markup/classes with. */ .wpc-nav-cta-mobile .wpc-auth-header-btn{font-size:1rem; border-color:#ddb890;} /* Own column-flex context, isolated from .wpc-nav-cta-mobile's row+wrap layout (shared with the Sign In/Register pill buttons, which do want to sit side by side) — without this, these items wrap like flex-row text instead of stacking as a list. */ .wpc-nav-mobile-account{display:flex; flex-direction:column; align-items:center; gap:1.1rem;} .wpc-nav-mobile-divider{width:60px; height:1px; background:rgba(255,255,255,.2); margin-bottom:.65rem;} .wpc-nav-mobile-link{ display:flex; align-items:center; gap:.5em; color:#ffffff; font-size:.85rem; text-decoration:none; opacity:.85; transition:opacity .25s ease, color .25s ease; } .wpc-nav-mobile-link svg{flex-shrink:0;} .wpc-nav-mobile-link:hover{opacity:1; color:#ecd3b4;} .wpc-nav-mobile-link--muted{opacity:.6;} }