/* ========================================================================= NOTE ON ORGANIZATION This file consolidates three former locations: 1. Customizer > Additional CSS (439 lines) 2. WPCode snippet 859 "animation_css" (non-slider rules only) 3. WPCode snippet 1300 "Cinematic Styles" (CSS portion) All Smart Slider (n2-* / .ss-slide) rules were REMOVED — the plugin and the only page using it (Inspiring Greatness) were deleted 2026-06-01, so that CSS was dead. Duplicate declarations, dead overrides, and a cross-location box-shadow conflict were resolved (see inline notes). ========================================================================= */ /* === Site container & global chrome ===================================== */ .site-container { max-width: 1440px !important; } .kadence-svg-iconset svg { height: 0.8em; width: 0.8em; } .wp-block-spacer { background: #e2e2e2 !important; } .wp-block-column { border-left: 1px solid #dddddd; } /* === end global chrome === */ /* === Header scroll-hide behavior (driven by JS: header-scroll.js) ======= Class toggles `menu-hidden` / `is-sticky` are applied on scroll by JS that watches the homepage video container (.kb-blocks-bg-video-container). CONFLICT RESOLVED: snippet 859 set box-shadow: 0 2px 8px on .is-sticky while the Customizer set box-shadow: none !important. The Customizer value won live, so the no-shadow result is preserved here as the single intended rule. ======================================================================== */ .site-main-header-wrap { transition: all 0.4s ease; } .site-main-header-wrap.menu-hidden { transform: translateY(-100%); opacity: 0; transition: all 0.4s ease; } .site-bottom-header-wrap.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; box-shadow: none; transition: top 0.4s ease, opacity 0.4s ease; } body.home .site-bottom-header-wrap { display: none !important; } /* === end header scroll-hide === */ /* === Navigation & menu items ============================================ */ span.kt-svg-icon-list-text { font-size: 12px; text-decoration: none; transition: opacity .4s; color: #ffffff; } .widget-toggle-open-container .widget-toggle-open { display: flex; flex-direction: row-reverse; column-gap: 10px; } .search-toggle-open { flex-direction: row-reverse; column-gap: 10px; } .kt-svg-icon-list-single { display: none !important; } .wp-block-kadence-listitem:hover { cursor: pointer; opacity: 0.8; } /* === end drawer / mobile menu === */ /* === Headings & text ==================================================== */ p.has-small-font-size { padding: 0 15px; } h2.wp-block-heading.has-small-font-size { padding: 0 15px; text-transform: uppercase; }/* === end hero row centering === */ /* === Footer logo + body scroll behavior (from snippet 1300) ============= */ /* Native scroll — no wheel hijacking, no section snapping */ /* === Global typography base: rendering refinements (site-wide) === */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; } /* === end global typography base === */ html, body { scroll-behavior: auto; overscroll-behavior-y: auto; scroll-snap-type: none; } #colophon .wp-block-kadence-image img { width: 180px; padding: 5px 0 12px; /* Left-aligned to the footer column grid (2026-08-28). Was margin: auto, which centred the logo inside its 896px column and left it 224px off page centre once the five link columns were added above it. */ margin-left: 0; margin-right: auto; } /* === end footer logo + scroll behavior === */ /* === Logo crossfade: wordmark -> turtle (scroll-linked, JS-driven) === */ /* Opacity + turtle scale are driven by js/logo-scroll-crossfade.js via GSAP ScrollTrigger. CSS here only establishes layout. Do NOT add opacity/transition or a scale here -- that fights the scroll-scrubbed animation. IMPORTANT: Kadence's native sticky logo-swap must be turned OFF in Customize -> Header -> Sticky settings, or Kadence sets opacity:0 inline on the wordmark in the stuck state and the GSAP fade can't win without !important. */ .brand.has-sticky-logo { position: relative; display: flex; align-items: center; justify-content: center; } /* Turtle stacked over the wordmark, centered. Base box is the ENLARGED size (75 x 47.5); GSAP scales it DOWN to the resting 60 x 38 (scale 0.8), which keeps the raster crisp. JS sets opacity (0 at top), transform, and scale. */ .brand.has-sticky-logo img.kadence-sticky-logo { display: block; position: absolute; top: 50%; left: 50%; width: 75px; height: 47.5px; object-fit: contain; opacity: 0; pointer-events: none; /* transform (centering translate + scale) and opacity are set by GSAP */ } /* === end logo crossfade === */ /* === Responsive / breakpoints =========================================== */ /* === end responsive === */ /* === Land & Sea: image-switch overlapping pair (2026-06-15, rev7 larger) === */ .ls-image-switch { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; /* overlay top (36vw) + overlay height (92vw * 10/16 = 57.5vw) ≈ 93.5vw + gap */ padding-bottom: 77vw; overflow: visible; } .ls-image-switch__base, .ls-image-switch__overlay { display: block; position: absolute; width: 85vw; aspect-ratio: 16 / 10; object-fit: cover; } .ls-image-switch__base { top: 0; left: -12vw; /* bleeds further off the left */ z-index: 1; } .ls-image-switch__overlay { top: 20vw; /* larger vertical stagger */ left: 25vw; /* right edge ~112vw, bleeds off the right */ z-index: 2; } /* Tablet */ @media (max-width: 1024px) { .ls-image-switch { padding-bottom: 105vw; } .ls-image-switch__base, .ls-image-switch__overlay { width: 100vw; } .ls-image-switch__base { left: -10vw; top: 0; } .ls-image-switch__overlay { left: 14vw; top: 40vw; } } /* Mobile: stack vertically */ @media (max-width: 600px) { .ls-image-switch { padding-bottom: 0; display: flex; flex-direction: column; gap: 16px; padding-left: 16px; padding-right: 16px; } .ls-image-switch__base, .ls-image-switch__overlay { position: static; width: 100%; top: auto; left: auto; } } /* === end image-switch === */ /* === Land & Sea: hover-play video feature (2026-06-15) === */ .ls-video-feature { text-align: center; max-width: 1440px; margin: 0 auto; padding: 60px 20px; } .ls-video-feature__eyebrow { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 12px; } .ls-video-feature__headline { font-size: 2.5rem; letter-spacing: normal; text-transform: uppercase; font-weight: 300; margin: 0 0 20px; } .ls-video-feature__text { max-width: 600px; margin: 0 auto 28px; line-height: 1.7; } .ls-video-feature__video-wrap { position: relative; width: 100%; margin-top: 40px; overflow: hidden; cursor: pointer; } .ls-video-feature__video { display: block; width: 100%; height: auto; object-fit: cover; } @media (max-width: 768px) { .ls-video-feature__headline { font-size: 30px; } } /* === end hover-play video feature === */ /* === Land & Sea: neighborhood carousel (2026-06-17) =========================== Full-width horizontal scroller for the "Neighborhood Carousel" block pattern (kadence-child/neighborhood-carousel). Scoped to .ls-hood-carousel so it can't touch the existing static neighborhood grid. Card visuals mirror that grid: Josefin Sans uppercase title, square image, body copy in #2d3748. Scroll logic: js/neighborhood-carousel.js --------------------------------------------------------------------------- */ .ls-hood-carousel { position: relative; width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0; margin-bottom: 40px; padding-top: 7.5rem; overflow: hidden; } .ls-hood-carousel__head { position: relative; max-width: 1328px; margin: 0 auto 40px; padding: 0 24px; } .ls-hood-carousel__intro { max-width: 840px; margin: 0 auto; text-align: center; } .ls-hood-carousel__title { font-family: var(--global-heading-font-family, Raleway, sans-serif); text-transform: uppercase; letter-spacing: normal; font-weight: 300; font-size: 2.5rem; color: #151515; margin: 0 0 16px; } .ls-hood-carousel__lead { font-size: 1rem; line-height: 1.6; color: #35414a; margin: 0 0 40px; } .ls-hood-carousel__nav { display: none; /* grid replaced the scroller 2026-08-28 */ } .ls-hood-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 0; border: none; border-radius: 50%; background: #8A919A; color: #FFFFFF; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; } .ls-hood-carousel__arrow:hover:not(:disabled) { background: #52575C; color: #ffffff; } .ls-hood-carousel__arrow:disabled { opacity: 0.3; cursor: default; } .ls-hood-carousel__arrow svg { display: block; width: 34px; height: 34px; } /* === Hood carousel: nav stacks below the intro under 1024px (2026-08-28) === */ @media (max-width: 1023px) { .ls-hood-carousel__nav { position: static; justify-content: center; margin-top: 40px; } } /* === end hood carousel nav stack === */ /* Track: full bleed; left padding aligns first card with the page content gutter PLUS a small aesthetic offset; right edge runs off screen so the trailing card is clipped (the "there's more" cue). */ .ls-hood-carousel__track { display: grid; grid-template-columns: repeat(4, minmax(0, 410px)); justify-content: center; column-gap: 18px; /* row gap 49px = the previous 34 plus the 15px asked for between one card’s text and the next card’s image. There is no margin or padding below .ls-hood-card__text, so the row gap is the whole visual distance. */ row-gap: 49px; padding: 4px 24px; } .ls-hood-card { min-width: 0; border-left: 1px solid #ddd; } .ls-hood-card__link { display: block; color: inherit; text-decoration: none; } .ls-hood-card__link:hover, .ls-hood-card__link:focus { color: inherit; } .ls-hood-card .ls-hood-card__media { margin: 0 0 20px; position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: 1 / 1; } .ls-hood-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .ls-hood-card:hover .ls-hood-card__media img { transform: scale(1.05); } .ls-hood-card .ls-hood-card__name { font-family: var(--global-heading-font-family, Raleway, sans-serif); font-size: 1rem; font-weight: 700; letter-spacing: normal; text-transform: uppercase; color: #151515; margin: 20px 0 8px; /* was 0 0 7px, which never applied: a theme h3 rule outranked the single class. Selector raised to .ls-hood-card .ls-hood-card__name so this rule wins. Collapses against the media margin to a 20px gap. */ padding-left: 16px; } .ls-hood-card__text { font-size: 0.9rem; line-height: 1.6; color: #35414a; margin: 0; padding-left: 16px; } /* "More Neighborhoods" card — same footprint, link-style treatment */ @media (max-width: 768px) { .ls-hood-carousel__head { padding: 0 18px; } .ls-hood-carousel__track { padding-left: 18px; padding-right: 18px; } } /* Grid column counts (2026-08-28) - 4 across, cards capped at 410px */ @media (max-width: 1199px) { .ls-hood-carousel__track { grid-template-columns: repeat(3, minmax(0, 410px)); } } @media (max-width: 899px) { .ls-hood-carousel__track { grid-template-columns: repeat(2, minmax(0, 410px)); } } @media (max-width: 599px) { .ls-hood-carousel__track { grid-template-columns: minmax(0, 410px); } } /* === end neighborhood carousel === */ /* === Land & Sea: Centered CTA pattern (ls-cta) — added 2026-06-17 === */ .ls-cta { width: 100%; padding: 96px 24px; text-align: center; } .ls-cta__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .ls-cta__eyebrow { margin: 0 0 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #151515; } .ls-cta__heading { margin: 0; font-size: 2.5rem; font-weight: 300; letter-spacing: normal; line-height: 1.1; color: #151515; } .ls-cta__divider { display: block; width: 40px; height: 1px; margin: 28px auto 32px; background: #1a1a1a; } .ls-cta__body { margin: 0 0 40px; max-width: 620px; font-size: 1rem; font-weight: 400; line-height: 1.85; color: #35414a; } .ls-cta__button, .ls-pinnacle__cta .wp-block-button__link, .ls-cta__button > .wp-block-button__link, .ls-nb-cta__button { /* Inverse treatment. The band is a dark photograph, so the brand blue reads as low-contrast against it. A white button is the highest-contrast element that can sit on this background, and the dark label gives 18.26:1 on the button itself. Hover returns to the brand blue so the interaction is unmistakable. */ display: inline-block; padding: 16px 48px; border-radius: 999px; background: #176db7; color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .ls-nb-cta__button:hover, .ls-nb-cta__button:focus-visible { background: #125a97; color: #ffffff; transform: translateY(-2px); box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } .ls-cta__button:hover, .ls-cta__button:focus, .ls-pinnacle__cta .wp-block-button__link:hover, .ls-pinnacle__cta .wp-block-button__link:focus, .ls-cta__button > .wp-block-button__link:hover, .ls-cta__button > .wp-block-button__link:focus, .ls-nb-cta__button:hover, .ls-nb-cta__button:focus { background: #125a97; color: #ffffff; transform: translateY(-1px); } @media (max-width: 768px) { .ls-cta { padding: 64px 20px; } .ls-cta__heading { font-size: 34px; } .ls-cta__body { font-size: 15px; } } /* === end Centered CTA pattern === */ /* === Land & Sea: two-column parallax patterns (ls-parallax) — added 2026-06-17 === */ .ls-parallax { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; position: relative; width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; overflow-x: clip; } .ls-parallax__media { position: relative; aspect-ratio: 2000 / 1320; align-self: start; overflow: visible; } .ls-parallax__media img { position: absolute; top: 0; left: 0; width: 100%; /* Was height:auto with a forced aspect-ratio and no object-fit, which stretched every image to 1.515:1 — the two 16:9 uploads were distorted ~14% vertically. height:100% + cover crops instead. Upload at 2000x1320 to avoid any crop. */ height: 100%; aspect-ratio: 2000 / 1320; object-fit: cover; object-position: center; max-width: none; display: block; will-change: transform; } .ls-parallax__content { display: flex; flex-direction: column; justify-content: center; padding-block: 80px; padding-inline: clamp(2rem, 6vw, 8rem); will-change: transform; } .ls-parallax:not(.ls-parallax--image-right) .ls-parallax__content { align-items: flex-start; text-align: left; } .ls-parallax--image-right .ls-parallax__content { text-align: right; } /* align-items is only meaningful for the original single-block layout. In the two-column variant .ls-parallax__content is a grid, so flex-end bottom-aligned the two columns and left their headings on different baselines. */ .ls-parallax--image-right .ls-parallax__content:not(.ls-parallax__content--twocol) { align-items: flex-end; } .ls-parallax__heading { margin: 0 0 24px; font-weight: 300; letter-spacing: normal; line-height: 1.45; text-transform: uppercase; color: #151515; } .ls-parallax__body { margin: 0 0 36px; max-width: 80ch; font-size: 1rem; font-weight: 400; line-height: 1.95; color: #35414a; } .ls-parallax__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 3rem; } /* Override Kadence .single-content ul padding-left (2em) — keep link grid flush */ .ls-parallax .ls-parallax__links { padding-left: 0; } .ls-parallax__links li { margin: 0 0 12px; } .ls-parallax__links a { font-size: 1rem; font-weight: 400; line-height: 1.6; color: #2b6cb0; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s linear, text-underline-offset 0.15s linear; } .ls-parallax__links a:hover, .ls-parallax__links a:focus { color: #235a94; text-underline-offset: 0.35em; } .ls-parallax--image-right .ls-parallax__media { order: 2; } .ls-parallax--image-right .ls-parallax__content { order: 1; } @media (max-width: 768px) { .ls-parallax { grid-template-columns: 1fr; margin-top: 0; margin-bottom: 0; } .ls-parallax__media { aspect-ratio: 2000 / 1320; order: 1; overflow: hidden; } .ls-parallax__media img, .ls-parallax:not(.ls-parallax--image-right) .ls-parallax__media img, .ls-parallax--image-right .ls-parallax__media img { position: absolute; top: 0; left: 0; right: auto; width: 100%; height: 100%; object-fit: cover; transform: none !important; } .ls-parallax__content, .ls-parallax:not(.ls-parallax--image-right) .ls-parallax__content, .ls-parallax--image-right .ls-parallax__content { order: 2; padding: 56px 24px; align-items: flex-start; transform: none !important; } .ls-parallax--image-right .ls-parallax__media { order: 1; } .ls-parallax--image-right .ls-parallax__content { order: 2; } } /* === end two-column parallax patterns === */ /* === LS Testimonials — video bg slider (2026-06-18) === */ /* Facsimile of michaellawler.com "FROM OUR CLIENTS". Typography intentionally omitted — global Kadence font styles control family/weight on .ls-testimonials__heading, __quote, __author. After editing this file, bump the Version: line in style.css header so functions.php's wp_get_theme()->get('Version') cache-busts the enqueue. */ .ls-testimonials { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; min-height: 548px; display: flex; align-items: center; overflow: hidden; isolation: isolate; color: #ffffff; } .ls-testimonials__video { position: absolute; inset: 0; z-index: 0; } .ls-testimonials__video-el { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .ls-testimonials__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.5); /* matches reference scrim */ } .ls-testimonials__inner { position: relative; z-index: 2; width: 100%; max-width: 1328px; /* matches .site-container width */ margin: 0 auto; padding: 5rem 2rem; display: flex; align-items: center; gap: 3rem; } .ls-testimonials__left { flex: 0 0 30%; max-width: 30%; display: flex; align-items: center; gap: 1.5rem; } .ls-testimonials__heading { margin: 0; color: #ffffff; text-transform: uppercase; letter-spacing: normal; } .ls-testimonials__arrows { display: flex; flex-direction: column; gap: 0.75rem; } /* Rotate chevrons to vertical: prev = up, next = down */ .ls-testimonials__arrow--prev svg { transform: rotate(90deg); } .ls-testimonials__arrow--next svg { transform: rotate(90deg); } .ls-testimonials__arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: transparent; color: #ffffff; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .ls-testimonials__arrow:hover, .ls-testimonials__arrow:focus-visible { background: #fff; border-color: #ffffff; color: #151515; outline: none; } .ls-testimonials__right { flex: 1 1 auto; min-width: 0; } .ls-testimonials__track { position: relative; min-height: 180px; /* JS sets this from the tallest slide; fallback here */ } .ls-testimonials__slide { transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease; position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(40px); display: flex; flex-direction: column; justify-content: center; border-left: 2px solid #ffffff; padding-left: 1.25rem; } /* First-paint state before GSAP initializes (no-JS / pre-hydration safety) */ .ls-testimonials__slide.is-active { opacity: 1; visibility: visible; position: relative; transform: translateY(0); } /* Outgoing slide: rises up and out the top while the incoming one rises in from below */ .ls-testimonials__slide.is-leaving { opacity: 0; visibility: visible; position: absolute; transform: translateY(-40px); } /* Reverse direction (down arrow): incoming drops from above, outgoing exits below */ .ls-testimonials.is-reverse .ls-testimonials__slide { transform: translateY(-40px); } .ls-testimonials.is-reverse .ls-testimonials__slide.is-active { transform: translateY(0); } .ls-testimonials.is-reverse .ls-testimonials__slide.is-leaving { transform: translateY(40px); } .ls-testimonials__quote { margin: 0 0 1rem; color: #ffffff; font-style: normal; line-height: 1.6; border-left: 0; padding-left: 0; } .ls-testimonials__quote::before { content: "\201C"; } .ls-testimonials__quote::after { content: "\201D"; } .ls-testimonials__author { color: rgba(255, 255, 255, 0.82); letter-spacing: normal; } /* ---- Tablet / mobile ---- */ @media (max-width: 991.99px) { .ls-testimonials__inner { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 4rem 1.5rem; } .ls-testimonials__left { flex: 1 1 auto; max-width: 100%; } } /* Respect reduced-motion: video still loops, but no autoplay shimmer reliance */ @media (prefers-reduced-motion: reduce) { .ls-testimonials__video-el { display: none; } .ls-testimonials { background: #14202b; } } /* === end LS Testimonials === */ /* === Land & Sea: parallax responsive refinements (2026-06-19) === */ @media (max-width: 768px) { .ls-parallax__links { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; column-gap: 0; } .ls-parallax__links li { margin: 0 0 20px; } .ls-parallax__links a { display: inline-block; padding: 4px 0; } .ls-parallax__body { max-width: 100%; } .ls-parallax__content, .ls-parallax:not(.ls-parallax--image-right) .ls-parallax__content, .ls-parallax--image-right .ls-parallax__content { align-items: center; text-align: center; } .ls-parallax__links { justify-items: center; text-align: center; } } /* === end parallax responsive refinements === */ /* === Header nav: Rolls-Royce treatment + sub-nav row === */ /* Existing nav (MENU toggle + CONTACT) restyled to match: small, uppercase, wide tracking, white. Font: Inter (set globally in Kadence). */ .site-header-main-section-left .widget-toggle-label, .site-header-main-section-right a { font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; } /* --- Sub-nav row (injected by js/header-subnav.js) ---------------------- */ .ls-subnav { width: 100%; position: relative; isolation: isolate; } /* Centered container; max-width matches the site container (1440px) so the row's right edge aligns under CONTACT and left edge under MENU at any width. */ .ls-subnav-inner { max-width: 1440px; margin: 0 auto; padding-right: 1rem; box-sizing: border-box; } /* Links right-aligned, like the RR section row. */ .ls-subnav-links { display: flex; justify-content: flex-end; align-items: center; gap: 32px; min-height: 60px; } .ls-subnav-link { font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; text-decoration: none; white-space: nowrap; transition: opacity 0.25s ease; opacity: 1; } .ls-subnav-link:hover, .ls-subnav-link:focus { opacity: 0.8; color: #ffffff; } /* Responsive: let the links wrap / tighten on small screens. */ @media (max-width: 768px) { .ls-subnav-inner { padding: 0 16px; } .ls-subnav-links { gap: 18px; justify-content: center; flex-wrap: wrap; } .ls-subnav-link { font-size: 13px; letter-spacing: 0.1em; } } /* === Land & Sea: single responsive header (mobile uses desktop layout) === */ /* Hide Kadence's mobile header entirely — we use the desktop header at all widths */ #mobile-header { display: none !important; } /* Keep the desktop header visible at all widths (override Kadence's mobile-breakpoint hide) */ @media (max-width: 1024px) { .site-header-wrap, .site-header-inner-wrap, .site-header-upper-wrap, .site-header-upper-inner-wrap, .site-main-header-wrap { display: block !important; } } /* Narrow viewport: shrink wordmark and hide sub-nav (drawer menu covers those links) */ /* Wordmark + band shrink: at ≤768px */ @media (max-width: 768px) { .ls-logo-wordmark { width: 180px !important; } .site-main-header-inner-wrap { min-height: 110px !important; } } /* Sub-nav hidden ≤1024px (desktop & laptop only) */ @media (max-width: 1024px) { .ls-subnav { display: none !important; } } /* === Land & Sea: sub-nav backdrop === */ .ls-subnav::before { content: ""; position: absolute; inset: 0; background-color: rgba(20, 20, 20, 0.3); -webkit-backdrop-filter: blur(calc(var(--subnav-backdrop-opacity, 0) * 20px)); backdrop-filter: blur(calc(var(--subnav-backdrop-opacity, 0) * 20px)); opacity: var(--subnav-backdrop-opacity, 0); z-index: -1; pointer-events: none; } /* === end sub-nav backdrop === */ /* === Land & Sea: keep Kadence sticky header chrome transparent at all scroll states === */ .transparent-header #masthead .kadence-sticky-header, .transparent-header #masthead .kadence-sticky-header .site-header-row-container-inner, .transparent-header #masthead .site-main-header-wrap, .transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner { background-color: transparent !important; background-image: none !important; } /* === end === */ /* === Land & Sea: header geometry (size + shrink) === */ /* Restore padding/border overrides (originally bundled with the bad backdrop rules removed in v1.0.93) */ .kadence-sticky-header.item-is-fixed.item-at-start { padding: 0; } .site-header .site-container { padding: 0; } .site-main-header-wrap .site-header-row-container-inner > .site-container { padding: 0 !important; border-bottom: 1px solid #dddddd70; transition: padding 0.3s ease; } .site-main-header-inner-wrap { min-height: calc(120px - var(--band-shrink-progress, 0) * 45px) !important; } /* === end header geometry === */ /* === Land & Sea: wordmark padding-top (band height held by .site-main-header-inner-wrap min-height) === */ .ls-logo-wordmark { padding-top: 12px; } /* === end === */ /* === Land & Sea: primary nav hover dim (matches sub-nav 0.8) === */ .site-header .drawer-toggle, .site-header .header-html-inner a { transition: opacity 0.25s; padding: 1rem; } .site-header .drawer-toggle:hover, .site-header .drawer-toggle:focus, .site-header .header-html-inner a:hover, .site-header .header-html-inner a:focus { opacity: 0.8; } /* === end load-in choreography === */ /* === end === */ /* === Land & Sea: Pinnacle Feature pattern (2026-06-24, rev 2026-06-25 RR-faithful) === */ .ls-pinnacle { background: #fff; padding: 120px 0 0px; } .ls-pinnacle__intro { padding: 0 24px; } .ls-eyebrow, .ls-pinnacle__eyebrow { font-size: 15px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #151515; margin: 0 0 24px; } .ls-pinnacle__heading { margin: 0 0 32px; } .ls-pinnacle__body { font-size: 16px; line-height: 1.6; margin: 0 0 48px; } .ls-pinnacle .ls-pinnacle__gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; align-items: start; padding: 96px 24px 0px; width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; } .ls-pinnacle .ls-pinnacle__gallery > .wp-block-group__inner-container { display: contents; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img { margin: 0; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img img { display: block; width: 100%; height: auto; object-fit: cover; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(1) { grid-column: 1 / 4; grid-row: 1; transform: translate(8.3vw, 11.5vw); } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(1) img { aspect-ratio: 3 / 4; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(2) { grid-column: 4 / 8; grid-row: 1; transform: translate(6.8vw, -1.7vw); } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(2) img { aspect-ratio: 5 / 8; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(3) { grid-column: 7 / 10; grid-row: 1; transform: translate(6.8vw, 13vw); } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(3) img { aspect-ratio: 3 / 4; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(4) { grid-column: 9 / 13; grid-row: 1; transform: translate(-1vw, -2.1vw) scale(0.648); } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(4) img { aspect-ratio: 2 / 3; } @media (max-width: 768px) { .ls-pinnacle { padding: 64px 0 56px; } .ls-pinnacle .ls-pinnacle__gallery { grid-template-columns: 1fr 1fr; gap: 16px; padding: 48px 24px 64px; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(1), .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(2), .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(3), .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img:nth-child(4) { grid-column: auto; transform: none; z-index: auto; } .ls-pinnacle .ls-pinnacle__gallery .ls-pinnacle__img img { aspect-ratio: 3 / 4; } } /* Large H2s (Neighborhoods, Services, Bespoke) — fluid 24 → 40 */ .ls-hood-carousel__title, .ls-cta__heading, .ls-pinnacle__heading { font-size: clamp(1.5rem, 3.5vw, 2.5rem); line-height: 1.2; text-wrap: balance; } /* Medium H2s (Parallax, Visit Our Blog) — fluid 22 → 32 */ .ls-parallax__heading, .kt-adv-heading1231_08928b-cd { font-size: clamp(1.375rem, 3vw, 2rem); line-height: 1.3; text-wrap: balance; } /* === Insight two-column parallax content (2026-07-06) === */ .ls-parallax__content--twocol { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); row-gap: 2.5rem; align-content: center; } .ls-parallax__col { min-width: 0; } .ls-parallax__col-title { margin: 0 0 20px; font-size: 1.5rem; font-weight: 300; letter-spacing: normal; line-height: 1.45; text-transform: uppercase; color: #151515; } .ls-parallax__col-list { list-style: none; margin: 0; padding: 0; } .ls-parallax__col-list li { position: relative; margin: 0 0 12px; padding-left: 1.1rem; font-size: 1rem; font-weight: 400; line-height: 1.7; color: #35414a; } .ls-parallax__col-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: #151515; } @media (max-width: 768px) { .ls-parallax__content--twocol { grid-template-columns: 1fr; row-gap: 2rem; } } .ls-parallax--image-right .ls-parallax__content--twocol .ls-parallax__heading, .ls-parallax--image-right .ls-parallax__content--twocol .ls-parallax__col, .ls-parallax--image-right .ls-parallax__content--twocol .ls-parallax__col-title, .ls-parallax--image-right .ls-parallax__content--twocol .ls-parallax__col-list li { text-align: left; } .ls-parallax__content--twocol .ls-parallax__heading { grid-column: 1 / -1; } /* === end insight two-column === */ /* Generic H1/H2 fallback for any heading without a custom class */ h1 { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.15; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); line-height: 1.2; } /* === end responsive headings === */ /* === Land & Sea: drawer menu redesign (Robin Kencel-inspired) === */ /* Drawer panel: narrower (420px), dark bg preserved */ #widget-drawer.popup-drawer-layout-sidepanel .drawer-inner { max-width: 700px !important; padding: 36px 100px !important; display: flex !important; flex-direction: column !important; } /* Drawer header: flex row — wordmark left, X close right */ #widget-drawer .drawer-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; margin-bottom: 86px !important; } /* Wordmark injected as ::before pseudo-element on the left */ #widget-drawer .drawer-header::before { content: ''; display: block; width: 140px; height: 26px; background-image: url('https://landandsearealty.com/wp-content/uploads/2025/10/Land-Sea-Logo-no-padding.png'); background-size: contain; background-repeat: no-repeat; background-position: left center; margin-top: 8px; } /* Close button: hide "CLOSE" text, keep X icon, large + right */ #widget-drawer .widget-toggle-close .widget-toggle-label, #widget-drawer .widget-toggle-close > span:not(.kadence-svg-iconset) { display: none !important; } #widget-drawer .widget-toggle-close { padding: 0 !important; background: transparent !important; border: none !important; color: #ffffff !important; transition: color 0.25s !important; opacity: 1 !important; } #widget-drawer .widget-toggle-close .kadence-svg-icon { width: 28px !important; height: 28px !important; } #widget-drawer .widget-toggle-close:hover { opacity: 0.7 !important; } /* Menu items: left-aligned, larger font, thin bottom dividers */ #widget-drawer .drawer-content .menu { list-style: none !important; padding: 0 !important; margin: 0 !important; } #widget-drawer .drawer-content .menu-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } #widget-drawer .drawer-content .menu-item a { display: block !important; text-align: left !important; padding: 5px !important; font-family: var(--global-body-font-family, Lato, sans-serif) !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #ffffff !important; text-decoration: none !important; transition: opacity 0.25s !important; } #widget-drawer .drawer-content .menu-item a:hover { opacity: 0.7 !important; } /* Content area takes all available vertical space so contact info sits at the bottom */ #widget-drawer .drawer-content { flex: 1; } /* Contact info at bottom of drawer */ #widget-drawer .drawer-inner::after { content: 'T: (239) 970-1000 | E: admin@landandsearealty.com'; margin-top: 24px; font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 12px; letter-spacing: normal; color: rgba(255, 255, 255, 0.82); } /* === end drawer redesign === */ /* === Land & Sea: INQUIRE drawer (left-side slide-out, Robin Kencel-inspired) === */ #ls-inquire-drawer { position: fixed; inset: 0; pointer-events: none; z-index: 9998; } #ls-inquire-drawer.is-open { pointer-events: auto; } .ls-inquire-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 400ms ease; cursor: pointer; } #ls-inquire-drawer.is-open .ls-inquire-drawer__overlay { opacity: 1; } .ls-inquire-drawer__panel { position: absolute; top: 0; left: 0; height: 100%; width: 700px; max-width: 100vw; background: #ededed; transform: translateX(-100%); transition: transform 400ms ease; overflow-y: auto; display: flex; flex-direction: column; padding: 36px 100px; box-sizing: border-box; } #ls-inquire-drawer.is-open .ls-inquire-drawer__panel { transform: translateX(0); } .ls-inquire-drawer__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 86px; } .ls-inquire-drawer__logo { width: auto; height: 26px; display: block; margin-top: 8px; } .ls-inquire-drawer__close { background: none; border: none; padding: 0; font-size: 32px; line-height: 1; color: #151515; cursor: pointer; transition: opacity 0.25s; } .ls-inquire-drawer__close:hover { opacity: 0.7; } .ls-inquire-drawer__heading { font-family: var(--global-heading-font-family, Raleway, sans-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 300; letter-spacing: normal; text-transform: uppercase; color: #151515; margin: 0 0 32px; line-height: 1.1; } .ls-inquire-drawer__form { display: flex; flex-direction: column; gap: 24px; } .ls-inquire-drawer__field { display: flex; flex-direction: column; gap: 8px; } .ls-inquire-drawer__field-label { font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #35414a; } .ls-inquire-drawer__field input, .ls-inquire-drawer__field textarea { font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 15px; color: #35414a; background: transparent; border: none; border-bottom: 1px solid #1a1a1a; padding: 6px 0; width: 100%; box-sizing: border-box; } /* === Land & Sea: kill Kadence's default border-radius on drawer form fields (causes the bottom border to "curl up" at the ends) === */ .ls-inquire-drawer__field input, .ls-inquire-drawer__field textarea { border-radius: 0; } /* === end === */ .ls-inquire-drawer__field textarea { border: 1px solid #1a1a1a; padding: 8px; resize: vertical; min-height: 90px; } .ls-inquire-drawer__field input:focus, .ls-inquire-drawer__field textarea:focus { outline: none; border-color: #000; } .ls-inquire-drawer__consent { display: flex; align-items: flex-start; gap: 10px; font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 12px; line-height: 1.5; color: #35414a; cursor: pointer; } .ls-inquire-drawer__consent input { margin-top: 3px; flex-shrink: 0; } .ls-inquire-drawer__submit { background: #176db7; color: #ffffff; display: inline-block; background: transparent; border: 2px solid #1a1a1a; color: #151515; font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 32px; cursor: pointer; align-self: flex-start; transition: background 0.25s, color 0.25s; margin-top: 8px; } .ls-inquire-drawer__submit:hover { background: #1a1a1a; color: #ededed; } .ls-inquire-drawer__success { display: none; padding: 32px 0; font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 15px; color: #35414a; } #ls-inquire-drawer.is-success .ls-inquire-drawer__form { display: none; } #ls-inquire-drawer.is-success .ls-inquire-drawer__success { display: block; } .ls-inquire-drawer__contact { margin-top: auto; padding-top: 24px; font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 12px; letter-spacing: normal; color: #35414a; } body.ls-inquire-open { overflow: hidden; } @media (max-width: 600px) { .ls-inquire-drawer__panel { width: 100vw; padding: 24px; } .ls-inquire-drawer__heading { font-size: 2rem; } /* Right drawer: match left drawer's mobile padding so logo + X sit at equivalent insets on both panels, and menu links align with the logo edge */ #widget-drawer.popup-drawer-layout-sidepanel .drawer-inner { padding: 24px !important; } #widget-drawer .drawer-content .menu-item a { padding: 5px 0 !important; } } /* === end INQUIRE drawer === */ /* === Land & Sea: mobile primary header layout — wordmark on top row, INQUIRE/MENU below === */ @media (max-width: 768px) { /* Re-shape the Kadence header grid into 2 rows: logo on top, left/right beneath */ .site-main-header-inner-wrap { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; grid-template-areas: "logo logo" "left right" !important; row-gap: 0 !important; align-items: stretch !important; } /* Top row: wordmark, centered, hugging the top to leave room below */ .site-header-main-section-center { grid-area: logo !important; justify-content: center !important; align-items: flex-start !important; padding-top: 6px !important; padding-bottom: 0 !important; } /* Bottom-left cell: INQUIRE NOW */ .site-header-main-section-left { grid-area: left !important; justify-content: flex-start !important; align-items: center !important; padding-left: 16px !important; } /* Bottom-right cell: MENU */ .site-header-main-section-right { grid-area: right !important; justify-content: flex-end !important; align-items: center !important; padding-right: 16px !important; } /* Let the header auto-size to fit the two stacked rows */ .site-header-inner-wrap.kadence-sticky-header { height: auto !important; min-height: 0 !important; } .site-main-header-wrap, .site-main-header-inner-wrap { height: auto !important; } /* The INQUIRE NOW and MENU items themselves — give them clean touch targets */ .site-header-main-section-left .header-html-inner a, .site-header-main-section-right .header-menu-container .menu-toggle-open, .site-header-main-section-right .drawer-toggle { padding: 8px 4px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* === end mobile primary header layout === */ /* === Land & Sea: header slide-away === */ /* --- Sub-nav decouple: wrapper slides up, subnav counter-translates to stay pinned (2026-06-29) --- */ .site-header-upper-inner-wrap { transform: translateY(calc(-1 * var(--primary-slide-px, 0px))); will-change: transform; } /* ls-subnav: no transform needed — rides the wrapper translate to y=0 naturally */ .ls-subnav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: var(--subnav-backdrop-opacity, 0); pointer-events: none; } /* --- end sub-nav decouple --- */ /* === end === */ /* === Land & Sea: sub-nav backdrop === */ .ls-subnav { position: relative; isolation: isolate; } .ls-subnav::before { content: ""; position: absolute; inset: 0; background-color: rgba(20, 20, 20, 0.3); -webkit-backdrop-filter: blur(calc(var(--subnav-backdrop-opacity, 0) * 20px)); backdrop-filter: blur(calc(var(--subnav-backdrop-opacity, 0) * 20px)); opacity: var(--subnav-backdrop-opacity, 0); z-index: -1; pointer-events: none; } /* === end === */ /* === Land & Sea: keep Kadence sticky header chrome transparent at all scroll states === */ .transparent-header #masthead .kadence-sticky-header, .transparent-header #masthead .kadence-sticky-header .site-header-row-container-inner, .transparent-header #masthead .site-main-header-wrap, .transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner { background-color: transparent !important; background-image: none !important; } /* === end === */ /* === Land & Sea: header geometry (size + shrink) === */ /* Restore padding/border overrides (originally bundled with the bad backdrop rules removed in v1.0.93) */ .kadence-sticky-header.item-is-fixed.item-at-start { padding: 0; } .site-header .site-container { padding: 0; } .site-main-header-wrap .site-header-row-container-inner > .site-container { padding: 0 !important; border-bottom: 1px solid #dddddd70; transition: padding 0.3s ease; } .site-main-header-inner-wrap { min-height: calc(120px - var(--band-shrink-progress, 0) * 45px) !important; } /* === end header geometry === */ /* === Land & Sea: wordmark padding-top (band height held by .site-main-header-inner-wrap min-height) === */ .ls-logo-wordmark { padding-top: 5px; } /* === end === */ /* === Land & Sea: primary nav hover dim (matches sub-nav 0.8) === */ .site-header .drawer-toggle, .site-header .header-html-inner a { transition: opacity 0.25s; } .site-header .drawer-toggle:hover, .site-header .drawer-toggle:focus, .site-header .header-html-inner a:hover, .site-header .header-html-inner a:focus { opacity: 0.8; } /* scroll JS overrides via --hero-content-opacity (no transition during scrub) * /* === end load-in choreography === */ /* === Kadence drawer: match left inquire-drawer timing (2026-06-29) === */ .drawer-inner { transition: transform 0.4s ease, opacity 0.4s ease !important; } .drawer-overlay { transition: opacity 0.4s ease !important; } .popup-drawer { transition: opacity 0.4s ease, left 0s 0.4s, right 0s 0.4s !important; } .popup-drawer.show-drawer { transition: opacity 0.4s ease, left 0s 0s, right 0s 0s !important; } /* === end Kadence drawer timing === */ /* === hero-stage: LCP-optimized hero (article method, 2026-07-01) === */ .hero-stage { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #1a1a1a; } .hero-stage__sharp, .hero-stage__lqip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .hero-stage__sharp { z-index: 1; opacity: 1; } .hero-stage__lqip { z-index: 2; transition: opacity 1.2s ease-in-out; transition-delay: 1.2s; pointer-events: none; } .hero-stage__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.22); pointer-events: none; } .hero-stage__content { position: relative; z-index: 1; width: 100%; max-width: 1500px; padding: 0 24px; text-align: center; } .hero-stage__title { margin: 0 0 48px; font-family: var(--global-heading-font-family, Raleway, sans-serif); font-weight: 300; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.55), 0 6px 30px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 14px; line-height: 1; } .hero-stage__title-main { font-size: clamp(1.75rem, 4vw, 4rem); letter-spacing: normal; } .hero-stage__title-sub { font-size: clamp(1rem, 1.8vw, 1.75rem); letter-spacing: normal; } .hero-stage__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .hero-stage__btn { display: inline-block; padding: 16px 40px; font-family: var(--global-body-font-family, Lato, sans-serif); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: transparent; border-radius: 30px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; border: 1px solid #fff; -webkit-tap-highlight-color: transparent; width: 200px; } .hero-stage__btn--fill { border-width: 0; padding: 16px 40px; } .hero-stage__btn:hover, .hero-stage__btn:focus-visible { background-color: #dddddd20; color: #ffffff; } .hero-stage__btn--fill:hover, .hero-stage__btn--fill:focus-visible { border: 1px solid #fff; padding: 16px 40px; } /* === end hero-stage === */ /* === Land & Sea: header load-in fade (2026-07-01) === */ /* Header starts hidden and fades in once body.ls-header-ready is added: by header-choreography-v2.js on the homepage, header-reveal.js elsewhere, or the 2.5 s fallback timer printed at the top of by functions.php ("Header fade" block), which also repeats the opacity:0 inline so Firefox never sees the header visible before this file loads. One mechanism only; 1.3 s fade (2026-10-21, Dan). */ .site-header-inner-wrap { opacity: 0; transition: opacity 1300ms ease; } body.ls-header-ready .site-header-inner-wrap { opacity: 1; } /* === end header load-in fade === */ /* === Land & Sea: Neighborhood Page Template (2026-07-06) === */ .ls-neighborhood { --ls-nb-max: 1414px; --ls-nb-pad: clamp(20px, 5vw, 80px); --ls-nb-gap: clamp(48px, 6vw, 96px); } /* --- Hero --- */ .ls-nb-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; } /* The hero is a real so WordPress can emit srcset: a phone no longer downloads the full 3840px file. It sits behind the scrim and the title block. */ .ls-nb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .ls-nb-hero__overlay { z-index: 1; } .ls-nb-hero__inner { position: relative; z-index: 2; } .ls-nb-hero--nobg { background-color: #1c2b33; } .ls-nb-hero__overlay { position: absolute; inset: 0; /* Two scrims: top for header legibility (white 13-14px nav links need 4.5:1; a bright daytime hero would otherwise sit near 1.5:1), bottom for the hero title. Top stops hold through the 181px header band, then clear. */ background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,.38) 15%,rgba(0,0,0,.28) 28%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.42) 82%,rgba(0,0,0,.55) 100%); pointer-events: none; } .ls-nb-hero__inner { position: relative; width: 100%; max-width: var(--ls-nb-max); margin: 0 auto; padding: 0 var(--ls-nb-pad) clamp(26px, 4vw, 52px); } .ls-nb-hero__title { color: #ffffff; margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 400; letter-spacing: 0.03em; line-height: 1.1; /* Three layers: a tight pass for edge definition, a mid pass to lift the letterforms off busy detail, and a wide ambient pass. Sized for the worst case — a daylight hero where centre-band luminance runs above 120. */ text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.55), 0 6px 30px rgba(0,0,0,0.45); } /* --- Body container --- */ .ls-nb-body { max-width: var(--ls-nb-max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--ls-nb-pad); display: flex; flex-direction: column; gap: var(--ls-nb-gap); } .ls-nb-section { margin: 0; } .ls-nb-section__heading { font-size: 2.5rem; font-weight: 300; letter-spacing: normal; text-transform: uppercase; margin: 0 0 1rem; } .ls-nb-section__subheading { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 300; margin: 0 0 0.75rem; } .ls-nb-prose { font-size: 1.05rem; line-height: 1.75; color: #35414a; } .ls-nb-prose p { margin: 0 0 1rem; /* Keep a paragraph whole. Without this a paragraph splits at the column break and its tail lands alone at the top of the next column, reading as a stray fragment — worst directly above a column-span table, where the orphan sits beside a heading it does not belong to. */ break-inside: avoid; } .ls-nb-prose p:last-child { margin-bottom: 0; } /* --- Stats --- */ /* Full-bleed band (2026-09-08): the wrap spans the viewport so the hairline rules run edge to edge; the list stays on the shared content band. Same breakout technique as .ls-nb-gallery-wrap. */ .ls-nb-stats-wrap { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); } .ls-nb-stats { list-style: none; max-width: var(--ls-nb-max); margin: 0 auto; padding: clamp(28px, 4vw, 44px) var(--ls-nb-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(20px, 3vw, 40px); } .ls-nb-stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .ls-nb-stat__value { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; line-height: 1; } .ls-nb-stat__label { margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6a7680; } /* --- Gallery: centre-focused carousel (rebuilt 2026-08-07, v2) --- */ /* Modelled on the Rolls-Royce Coachbuild "Masters of Craft" carousel, measured from a screen recording of the reference: - heading and intro CENTRED, intro narrow (~25% of viewport) - active slide 42vw at 16:9; neighbours scale(0.8) on a shared centre axis - slides sit EDGE TO EDGE with no gap: the ~4vw visual gutter is produced entirely by the 0.8 scale. Predicted neighbour edge 1128 vs measured 1126. Movement is transform-based, not scroll-based, because the active slide has to be centred in the viewport rather than snapped to a left edge. */ .ls-nb-gallery-wrap { --ls-gal-slide: 42vw; --ls-gal-scale: 0.8; --ls-gal-ease: cubic-bezier(0.4, 0, 0.2, 1); --ls-gal-speed: 900ms; width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; } .ls-nb-gallery__head { max-width: var(--ls-nb-max); margin: 0 auto; padding: 0 var(--ls-nb-pad); text-align: center; } .ls-nb-gallery__head .ls-nb-section__heading { text-align: center; } .ls-nb-gallery__intro { font-family: var(--global-body-font-family, Lato, sans-serif); font-size: clamp(1rem, 1.1vw, 1.0625rem); font-weight: 400; line-height: 1.7; color: #35414a; max-width: 46ch; margin: 0 auto clamp(40px, 5vw, 72px); } .ls-nb-gallery__viewport { overflow: visible; } .ls-nb-gallery { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; transition: transform var(--ls-gal-speed) var(--ls-gal-ease); } /* is-instant freezes BOTH the track translate and the slides’ scale. Freezing only the track let the outgoing and incoming active slides animate their scale across the silent loop reset, which read as a shrink-and-regrow pulse. */ .ls-nb-gallery.is-instant, .ls-nb-gallery.is-instant .ls-nb-gallery__item { transition: none; } .ls-nb-gallery__item { flex: 0 0 var(--ls-gal-slide); width: var(--ls-gal-slide); margin: 0; overflow: hidden; transform: scale(var(--ls-gal-scale)); transition: transform var(--ls-gal-speed) var(--ls-gal-ease); } .ls-nb-gallery__item { cursor: pointer; } .ls-nb-gallery__item.is-active { transform: scale(1); cursor: default; } .ls-nb-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; } /* Dots with an autoplay progress arc. The arc is a stroke-dashoffset animation whose duration is driven by --ls-gal-duration, set from JS so the timer and the visual can never drift apart. */ .ls-nb-gallery__dots { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px); } .ls-nb-gallery__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ls-nb-gallery__pip { width: 5px; height: 5px; border-radius: 50%; background: #9aa1a8; transition: background-color 0.3s ease; } .ls-nb-gallery__dot.is-active .ls-nb-gallery__pip { background: #35414a; } .ls-nb-gallery__ring { position: absolute; inset: 0; width: 24px; height: 24px; transform: rotate(-90deg); opacity: 0; transition: opacity 0.3s ease; } .ls-nb-gallery__dot.is-active .ls-nb-gallery__ring { opacity: 1; } .ls-nb-gallery__ring circle { fill: none; stroke-width: 1.5; } .ls-nb-gallery__ring-track { stroke: rgba(53, 65, 74, 0.18); } .ls-nb-gallery__ring-arc { stroke: #35414a; stroke-dasharray: 56.5; stroke-dashoffset: 56.5; } .ls-nb-gallery__dot.is-active.is-timing .ls-nb-gallery__ring-arc { animation: ls-gal-arc var(--ls-gal-duration, 5000ms) linear forwards; } @keyframes ls-gal-arc { to { stroke-dashoffset: 0; } } @media (max-width: 1024px) { .ls-nb-gallery-wrap { --ls-gal-slide: 62vw; } } @media (max-width: 700px) { .ls-nb-gallery-wrap { --ls-gal-slide: 80vw; --ls-gal-scale: 0.86; } .ls-nb-gallery__intro { max-width: none; } } /* Respect reduced-motion: no autoplay arc, no slide easing. JS also disables the timer itself, so this is belt and braces rather than the only guard. */ @media (prefers-reduced-motion: reduce) { .ls-nb-gallery, .ls-nb-gallery__item { transition: none; } .ls-nb-gallery__dot.is-active.is-timing .ls-nb-gallery__ring-arc { animation: none; } .ls-nb-gallery__ring { opacity: 0; } } /* --- IDX placeholder --- */ .ls-nb-idx-placeholder { text-align: center; color: #151515; } .ls-nb-idx-placeholder__note { margin: 0; font-style: italic; } /* --- Market report --- */ .ls-nb-report__link { display: inline-block; margin-top: 0.5rem; font-weight: 500; letter-spacing: normal; border-bottom: 1px solid currentColor; padding-bottom: 2px; text-decoration: none; } /* --- Sibling index --- */ .ls-nb-index__list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: clamp(20px, 3vw, 40px); } .ls-nb-index__item { break-inside: avoid; margin-bottom: 0.5rem; } .ls-nb-index__item a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s ease; } .ls-nb-index__item a:hover { border-bottom-color: currentColor; } /* --- FAQ (Rank Math block sits inside) --- */ .ls-nb-faq__content { font-size: 1.05rem; line-height: 1.7; } /* --- Responsive --- */ @media (max-width: 991.99px) { .ls-nb-index__list { columns: 3; } } @media (max-width: 767px) { .ls-nb-index__list { columns: 2; } .ls-nb-hero { min-height: 50vh; } } /* === end Neighborhood Page Template === */ /* === Land & Sea: Neighborhood Template v2 additions (2026-07-06) === */ /* --- Jump nav (sticky under hero) --- */ .ls-nb-jumpnav { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); } .ls-nb-jumpnav__list { list-style: none; margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px); max-width: var(--ls-nb-max); display: flex; /* Never wrap. A jump bar broken across two rows reads as a menu rather than a sub-nav. Ten items measured 974px, and nine 36px gaps added 324px, overflowing the 1254px band by 44px. The gap now tightens to 28px at desktop (1226px total) and anything that still will not fit scrolls sideways instead of stacking. */ flex-wrap: nowrap; gap: clamp(14px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .ls-nb-jumpnav__list::-webkit-scrollbar { display: none; } .ls-nb-jumpnav__item { flex: 0 0 auto; } .ls-nb-jumpnav__item a { white-space: nowrap; } .ls-nb-jumpnav__item a { display: inline-block; padding: 16px 0; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: #35414a; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .ls-nb-jumpnav__item a:hover { border-bottom-color: currentColor; } /* offset anchor targets so sticky nav doesn't cover headings */ .ls-nb-section[id], #listings[id] { scroll-margin-top: 72px; } /* --- Insight layout: image + six blocks --- */ .ls-nb-insight__intro { margin-bottom: clamp(24px, 3vw, 40px); } .ls-nb-insight__layout { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .ls-nb-insight__figure { margin: 0; position: sticky; top: 84px; } .ls-nb-insight__figure img { display: block; width: 100%; height: auto; object-fit: cover; } .ls-nb-insight__blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); } .ls-nb-insight-block__title { font-size: 1.05rem; font-weight: 600; letter-spacing: normal; text-transform: uppercase; margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); } .ls-nb-insight-block__list { margin: 0; padding-left: 1.1rem; line-height: 1.6; } .ls-nb-insight-block__list li { margin-bottom: 0.4rem; } /* --- CTA band --- */ .ls-nb-cta { /* Background image with a 0.3 black scrim. Measured the visible crop at each viewport (cover crops differently: ~28% of image height at 2406px wide, but the full height and only 51% of the width on mobile). Worst-case luminance behind the text was 131, i.e. 3.78:1 against white — below the 4.5:1 needed for the body copy. The 0.3 scrim lifts every viewport to 6.7:1 or better. background-color is retained as a fallback if the image fails to load. */ background-color: #1c2b33; background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://landandsearealty.com/wp-content/uploads/2026/08/Park-Shore-Venetian-Bay.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; color: #ffffff; /* Vertical padding shifted +50px at both ends of the clamp, so the band is 100px taller at every viewport rather than only on very wide screens. Original was clamp(48px, 7vw, 96px). */ padding: clamp(98px, calc(7vw + 50px), 146px) clamp(20px, 5vw, 80px); text-align: center; } .ls-nb-cta__inner { max-width: 720px; margin: 0 auto; } .ls-nb-cta__heading { color: #ffffff; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: normal; margin: 0 0 0.75rem; } .ls-nb-cta__text { font-size: 1.15rem; line-height: 1.65; /* Was opacity 0.85, which pushed the supporting line toward the scrim. The copy has to be readable for the button to be worth pressing. */ opacity: 0.94; max-width: 58ch; margin: 0 auto 2.25rem; } .ls-nb-cta__button { /* Visual styling now comes from the shared .ls-cta__button rule so this button cannot drift from the other CTAs. Layout basics only here. */ display: inline-block; text-decoration: none; } /* --- Insight responsive --- */ @media (max-width: 900px) { .ls-nb-insight__layout { grid-template-columns: 1fr; } .ls-nb-insight__figure { position: static; } } @media (max-width: 560px) { .ls-nb-insight__blocks { grid-template-columns: 1fr; } } /* === end Neighborhood Template v2 additions === */ /* === Land & Sea: Neighborhood Template v3 tweaks (2026-07-06) === */ /* Jump links: heavier weight */ .ls-nb-jumpnav__item a { font-weight: 700; } /* Insight image now full-width under the section title (layout restacked) */ .ls-nb-insight__figure { margin: 0 0 clamp(24px, 3vw, 40px); position: static; width: 100%; } .ls-nb-insight__figure img { display: block; width: 100%; height: auto; object-fit: cover; } /* Six blocks span full width beneath the image: 3 across on desktop */ .ls-nb-insight__blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); } @media (max-width: 900px) { .ls-nb-insight__blocks { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ls-nb-insight__blocks { grid-template-columns: 1fr; } } /* === end Neighborhood Template v3 tweaks === */ /* === Interior (neighborhood template) header: absolute overlay, scrolls away (2026-07-07) === */ /* Header overlays the hero at the top (white nav readable over the dark hero image), then scrolls away with the page. Not fixed, not sticky. Scoped to the neighborhood template body class so the homepage is unaffected. */ .page-template-neighborhood-page-template #masthead, .page-template-page-with-hero #masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 100; } .page-template-neighborhood-page-template .site-header-inner-wrap, .page-template-page-with-hero .site-header-inner-wrap { position: absolute; /* Without horizontal anchoring an absolutely positioned wrap is shrink-to-fit. Verified with scripts disabled: it rendered 311px wide pinned left, which is the load glitch (header stacked top-left). It only reached full width later because header-subnav.js injected full-width content. Anchoring it makes the header lay out correctly on first paint, with no JS involved. */ left: 0; right: 0; width: 100%; /* Vertical offset in CSS, not JS. header-reveal.js was setting `top` inline to clear the admin bar, so the header painted at top:0 and then dropped 32px once the script ran — the remaining jump. Declaring it here makes first paint match the final position. Logged-out visitors never saw this one (no admin bar, so JS set top:0 either way); it only affected logged-in admins. */ top: 0; /* (The 1.2 s ls-header-failsafe animation that used to sit here was removed 2026-10-21: it raced the fade and made loads look different. The fallback is now a 2.5 s timer in functions.php.) */ } body.admin-bar.page-template-neighborhood-page-template .site-header-inner-wrap, body.admin-bar.page-template-page-with-hero .site-header-inner-wrap { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar.page-template-neighborhood-page-template .site-header-inner-wrap, body.admin-bar.page-template-page-with-hero .site-header-inner-wrap { top: 46px; } } /* === end interior absolute header === */ /* === Interior parallax block headings: 2.5rem / 0.15em (2026-07-07) === */ /* Scoped to the neighborhood template so the homepage's shared .ls-parallax__heading (and the paired Kadence heading class) are unaffected. */ .page-template-neighborhood-page-template .ls-parallax__heading { font-size: 2rem; letter-spacing: normal; } /* === end interior parallax block headings === */ /* === Land & Sea: IDX listings grid — 400px photo width, 3-up (2026-08-06) === */ /* Showcase IDX ships repeat(auto-fill,minmax(~260px,1fr)) with !important, so a wider container ADDS columns instead of widening cards. Pin 3 tracks at 402px (400px photo + 1px card border each side) so the MLS CDN image, served at width=400&height=272, renders 1:1 with no upscaling. !important is required to outrank the plugin. Below 1024px, IDX native responsive behaviour resumes. */ @media (min-width: 1024px) { .page-template-neighborhood-page-template .ls-nb-listings-wrap .sidx-grid { grid-template-columns: repeat(3, minmax(0, 402px)) !important; gap: 24px !important; justify-content: space-between !important; } .page-template-neighborhood-page-template .ls-nb-listings-wrap .sidx-search-result-grid-item { max-width: none !important; } } /* === end IDX listings grid === */ /* === Land & Sea: prose two-column layout (2026-08-06) === */ /* Two-column prose (rescoped 2026-08-07). Applies to the two long-form prose sections only: #neighborhood-detail (.ls-nb-intro-body) and #additional. NOT #overview, which now opens with .ls-nb-lede and reads as a single-column introduction — columns there fought the entry point of the page. At the 1254px band a single column runs ~200 characters per line; two bring it to ~71, inside the 60-75 ideal. Section headings sit outside .ls-nb-prose, so they stay full width above. :is() keeps this to one selector per rule rather than doubling every line; note :is() takes the specificity of its most specific argument (#additional), so both branches match at ID specificity. */ @media (min-width: 1024px) { .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose { column-count: 2; column-gap: clamp(32px, 4vw, 64px); orphans: 2; widows: 2; } .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose > :first-child { margin-top: 0; } .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose h3, .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose h4 { break-after: avoid; break-inside: avoid; } .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose ul, .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose ol, .page-template-neighborhood-page-template :is(#additional, .ls-nb-intro-body) .ls-nb-prose blockquote { break-inside: avoid; } } /* === end prose two-column layout === */ /* === Land & Sea: IDX "See All" button — match homepage CTA (2026-08-06) === */ /* Values read from .ls-cta__button on the homepage so the two stay identical. No !important needed — verified visually; the plugin does not flag these. NOTE: getComputedStyle returns stale values on Showcase IDX elements in the automation environment, so this was confirmed by screenshot, not by reading computed styles. */ .page-template-neighborhood-page-template .sidx-hotsheet-see-all-results { background-color: #176db7; color: #ffffff; border: 0; border-radius: 999px; padding: 16px 40px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 0.3s ease, transform 0.3s ease; } body.page-template-neighborhood-page-template button.sidx-hotsheet-see-all-results:hover, body.page-template-neighborhood-page-template button.sidx-hotsheet-see-all-results:focus { /* The See All control is a