/* ============================================================================ WrightHaven Homes — GLOBAL DESIGN CONTROLS ---------------------------------------------------------------------------- This is the single file to edit for site-wide design changes. It loads LAST on every page, so anything set here overrides the original theme. The values below match the current site exactly (so this file changes nothing until you edit it). Change a value here and it updates EVERYWHERE the site uses that token. See DESIGN.md in the repo root for the full guide. ========================================================================== */ :root { /* ======================================================================== DESIGN TOKENS — the single source of truth for the site's design system. Values below MATCH the current live site exactly (measured from the rendered pages), so defining them changes nothing on their own. Our own rules (header, mobile menu, any future tweaks) consume these tokens, so editing a value here updates every place that references it. See DESIGN.md → "Design tokens" for the full spec and the caveat about baked-in values. ======================================================================== */ /* ---- COLOR: Elementor globals (consumed by the generated theme CSS) ---- */ --e-global-color-primary: #141414; /* near-black — dark backgrounds, headings */ --e-global-color-secondary: #167f67; /* green — secondary accents */ --e-global-color-accent: #9a8c57; /* gold / tan — buttons, highlights */ --e-global-color-text: #ffffff; /* light text (used on dark sections) */ --e-global-color-a3d4686: #2b2c2c; /* dark gray */ --e-global-color-b40e019: #000000; /* black */ /* ---- COLOR: semantic brand tokens (use THESE in our own rules) ---- */ --wh-ink: var(--e-global-color-primary); /* #141414 */ --wh-black: var(--e-global-color-b40e019); /* #000000 */ --wh-dark-gray: var(--e-global-color-a3d4686); /* #2b2c2c */ --wh-green: var(--e-global-color-secondary); /* #167f67 secondary accent */ --wh-gold: var(--e-global-color-accent); /* #9a8c57 primary accent */ --wh-tan: #c0b59b; /* light gold — REGISTER / highlight buttons */ --wh-white: var(--e-global-color-text); /* #ffffff */ /* ---- TYPOGRAPHY (measured: headings Lato 300 UPPERCASE; body Poppins) --- */ --wh-font-heading: "Lato", sans-serif; --wh-font-body: "Poppins", sans-serif; --wh-heading-weight: 300; /* thin — the site's signature heading weight */ --wh-heading-transform: uppercase; --wh-heading-leading: 1.0; /* headings run near-solid (51px/51px, 64px/58px) */ /* ---- SHAPE (measured: primary buttons render at 3px; some pages 5px) --- */ --wh-radius: 3px; /* canonical CTA corner radius */ /* ---- NAV SHRINK (0 = top of page, 1 = fully condensed) — driven by wh-shrinknav.js --- */ --wh-nav-shrink: 0; } /* ============================================================================ CUSTOM GLOBAL RULES Add site-wide tweaks below. Examples (commented out): Make every primary button slightly more rounded: .elementor-button { border-radius: 6px; } Nudge all section heading sizes up a touch on desktop: @media (min-width: 1025px) { .elementor-heading-title { letter-spacing: .02em; } } ========================================================================== */ /* ============================================================================ HEADER LAYOUT — desktop/laptop bar reordered to: LOGO · MENU · CTA · SOCIAL ---------------------------------------------------------------------------- The desktop header lives in section .elementor-element-0c0e368 (a flex row of 5 columns). The mobile/tablet bar is a SEPARATE section (.elementor-element- dc9a31d) and is intentionally left untouched. Every rule below is scoped to the 0c0e368 container so nothing leaks into the mobile header. Column IDs (original DOM order): 1719bee = social icons e96ffd6 = menu (left half) fe96e97 = logo 847248e = menu (right half) 0010fc0 = REGISTER (CTA) We reorder with flexbox `order`; the two menu widgets sit adjacent so they read as one continuous nav. DOM order is unchanged (all 506 pages, one file). ========================================================================== */ .elementor-element-0c0e368 > .elementor-container { justify-content: flex-start; flex-wrap: nowrap; /* Keep logo left; let the menu+CTA cluster sit as one tight group */ column-gap: 0.35rem; } /* size each column to its content (kill the equal-column stretch) */ .elementor-element-0c0e368 > .elementor-container > .elementor-column { width: auto !important; flex: 0 0 auto !important; } .elementor-element-0c0e368 > .elementor-container > .elementor-element-fe96e97 { order: 1 !important; } /* logo */ .elementor-element-0c0e368 > .elementor-container > .elementor-element-e96ffd6 { order: 2 !important; } /* menu L */ .elementor-element-0c0e368 > .elementor-container > .elementor-element-847248e { order: 3 !important; } /* menu R */ /* Push the whole nav cluster (menus + Contact + social) right so it aligns to the Contact button edge; keep MOVE-IN READY ↔ Custom Builds adjacent. */ .elementor-element-0c0e368 > .elementor-container > .elementor-element-e96ffd6 { margin-left: auto !important; } .elementor-element-0c0e368 > .elementor-container > .elementor-element-0010fc0 { order: 4 !important; margin-left: 0.55rem !important; /* tight to Virtual Tours / last menu item */ } .elementor-element-0c0e368 > .elementor-container > .elementor-element-1719bee { order: 5 !important; } /* social */ /* Snug the two mega-menus so MOVE-IN READY sits right next to Custom Builds. Only touches horizontal spacing between top-level items (not dropdowns). */ .elementor-element-0c0e368 .e-n-menu-wrapper { gap: 0 !important; } .elementor-element-0c0e368 .e-n-menu-title { padding-left: clamp(0.35rem, 0.55vw, 0.7rem) !important; padding-right: clamp(0.35rem, 0.55vw, 0.7rem) !important; } /* Kill any leftover gap between the left and right menu columns */ .elementor-element-0c0e368 > .elementor-container > .elementor-element-847248e { margin-left: 0 !important; } /* Right cluster: small gap between Contact and the social icons */ .elementor-element-0c0e368 > .elementor-container > .elementor-element-1719bee { margin-left: 0.4rem !important; } /* --- Responsive swap ------------------------------------------------------- The full logo·menu·CTA·social bar only fits comfortably on wide screens. Below 1440px, hide it and show the hamburger bar (section dc9a31d). The hamburger opens our own overlay menu (assets/wh-mobile-nav.js + .wh-mnav styles below); the site's original Elementor popup #8093 did not survive the static mirror. At 1440px+, Elementor's own hidden-* classes take over (wide bar shown, hamburger hidden). Sections are display:block; their inner .elementor-container stays flex. */ @media (max-width: 1439.98px) { header.elementor-location-header .elementor-element-0c0e368 { display: none !important; } header.elementor-location-header .elementor-element-dc9a31d { display: block !important; } /* ---- Tablet / laptop / mobile header bar (logo · Inquire · hamburger) ---- Logo was flush to the left edge; Inquire button was short vs the icon. Give the bar breathing room and a proper CTA height. */ header.elementor-location-header .elementor-element-dc9a31d { padding-top: 10px !important; padding-bottom: 10px !important; } header.elementor-location-header .elementor-element-dc9a31d > .elementor-container { flex-wrap: nowrap !important; align-items: center !important; column-gap: 12px !important; padding-left: 18px !important; padding-right: 18px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } header.elementor-location-header .elementor-element-dc9a31d > .elementor-container > .elementor-column { width: auto !important; flex: 0 0 auto !important; } /* Logo: keep clear of the left edge + bar top/bottom */ header.elementor-location-header .elementor-element-dc9a31d .mainLogo { padding: 4px 0 4px 2px !important; line-height: 0 !important; } header.elementor-location-header .elementor-element-dc9a31d .mainLogo img { display: block !important; height: 72px !important; width: auto !important; max-height: 72px !important; max-width: min(180px, 42vw) !important; object-fit: contain !important; } /* Push CTA + hamburger to the right */ header.elementor-location-header .elementor-element-dc9a31d > .elementor-container > .elementor-element-cf666c9 { margin-left: auto !important; } /* Inquire / Contact button — taller, aligned with hamburger */ header.elementor-location-header .elementor-element-dc9a31d .elementor-element-fcdbac8 .elementor-button, header.elementor-location-header .elementor-element-dc9a31d .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 12px 18px !important; font-size: 13px !important; letter-spacing: 0.08em !important; line-height: 1.2 !important; border-radius: var(--wh-radius, 3px) !important; box-sizing: border-box !important; } /* Hamburger icon column — match button height, pad from right edge */ header.elementor-location-header .elementor-element-dc9a31d .elementor-element-74f1ed7, header.elementor-location-header .elementor-element-dc9a31d .navsocials { display: flex !important; align-items: center !important; padding-right: 2px !important; } header.elementor-location-header .elementor-element-dc9a31d .elementor-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; } header.elementor-location-header .elementor-element-dc9a31d .elementor-icon svg { width: 26px !important; height: 26px !important; } } /* Tighter logo on small phones so bar doesn't get too tall */ @media (max-width: 480px) { header.elementor-location-header .elementor-element-dc9a31d > .elementor-container { padding-left: 14px !important; padding-right: 12px !important; } header.elementor-location-header .elementor-element-dc9a31d .mainLogo img { height: 58px !important; max-height: 58px !important; } header.elementor-location-header .elementor-element-dc9a31d .elementor-button { min-height: 40px !important; padding: 10px 14px !important; font-size: 12px !important; } } /* ============================================================================ MOBILE / LAPTOP MENU (.wh-mnav) — opened by the hamburger via assets/wh-mobile-nav.js. Slide-in overlay on the site's dark/gold palette. Sits above the sticky header. Dormant until JS adds .is-open. ========================================================================== */ .wh-mnav-lock { overflow: hidden; } /* lock page scroll while open */ .wh-mnav { position: fixed; inset: 0; z-index: 100000; /* above the sticky Elementor header */ visibility: hidden; pointer-events: none; } .wh-mnav.is-open { visibility: visible; pointer-events: auto; } .wh-mnav__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.35s ease; } .wh-mnav.is-open .wh-mnav__backdrop { opacity: 1; } .wh-mnav__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px); box-sizing: border-box; padding: clamp(1.5rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2rem); background: var(--wh-ink, #141414); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .wh-mnav.is-open .wh-mnav__panel { transform: translateX(0); } .wh-mnav__close { align-self: flex-end; background: none !important; /* override Elementor's global button styling */ border: 0 !important; box-shadow: none !important; color: #fff; font-size: 2.25rem; line-height: 1; padding: 0.25rem 0.5rem; margin: -0.5rem -0.5rem 0.5rem 0; cursor: pointer; transition: color 0.2s ease; } .wh-mnav__close:hover, .wh-mnav__close:focus-visible { color: var(--wh-tan, #c0b59b); } .wh-mnav__links { display: flex; flex-direction: column; margin-top: 0.5rem; } .wh-mnav__link { color: var(--wh-white, #fff); text-decoration: none; font-family: var(--wh-font-heading, "Lato", sans-serif); text-transform: uppercase; letter-spacing: 0.12em; font-size: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: color 0.2s ease, padding-left 0.2s ease; } .wh-mnav__link:hover, .wh-mnav__link:focus-visible { color: var(--wh-tan, #c0b59b); padding-left: 0.4rem; } .wh-mnav__cta { margin-top: 1.75rem; text-align: center; background: var(--wh-tan, #c0b59b); color: var(--wh-ink, #141414); text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--wh-font-heading, "Lato", sans-serif); font-weight: 600; padding: 0.9rem 1.25rem; border-radius: 2px; transition: background-color 0.2s ease; } .wh-mnav__cta:hover, .wh-mnav__cta:focus-visible { background: var(--wh-gold, #9a8c57); } .wh-mnav__social { display: flex; gap: 1.4rem; margin-top: auto; padding-top: 2rem; } /* Strip Elementor's per-network button chrome; render as flat gold glyphs. */ .wh-mnav__social a, .wh-mnav__social .elementor-social-icon { background: transparent !important; color: var(--wh-tan, #c0b59b) !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline-flex; transition: color 0.2s ease; } .wh-mnav__social a:hover, .wh-mnav__social .elementor-social-icon:hover { color: #fff !important; } .wh-mnav__social svg { width: 22px; height: 22px; fill: currentColor; } .wh-mnav__social .elementor-screen-only { display: none; } @media (prefers-reduced-motion: reduce) { .wh-mnav__backdrop, .wh-mnav__panel { transition: none; } } /* ============================================================================ BUTTON SYSTEM (scaffold — everything below is COMMENTED OUT / inert) ---------------------------------------------------------------------------- Elementor gives buttons NO semantic class: primary (gold), secondary (green), outline, and text-link buttons ALL share `.elementor-button .elementor-button-link`. Type is set by per-element-ID styles. So target by INTENT as follows. See DESIGN.md → "Button system" for the full explanation. ---- A) Shape/typography for EVERY CTA button (safe: excludes read-more, carousel arrows, accordion toggles — those aren't .elementor-button) ---- .elementor-button { border-radius: 4px !important; } ---- B) Form submit buttons only ---- .e-form__buttons__wrapper__button, [data-widget_type="form.default"] .elementor-button { border-radius: 4px !important; } ---- C) Floor-plan plugin "Download" button (separate class) ---- .ue-btn, .uc_fbps_cta { border-radius: 4px !important; } ---- D) Recolor a TYPE globally ---- Color is hardcoded per element, so recoloring a whole type is done with Lever 2 (find/replace the hex), NOT a rule here: primary gold = #9A8C57 secondary/inverted green = #167F67 (see DESIGN.md → Lever 2) ---- E) Style ONE type only (e.g. primary but not secondary) ---- There is no class to hook. Add a semantic class to those buttons' markup, e.g. add `wh-btn-primary` to each primary button's , then: .wh-btn-primary { background-color: #9a8c57 !important; border-radius: 6px !important; } ========================================================================== */ /* ============================================================================ FONTS (scaffold — COMMENTED OUT / inert) • VERIFIED globally overridable ---------------------------------------------------------------------------- Fonts are hardcoded + inline (not variable-driven), but this single !important rule overrides the whole site (proven across templates). Load the font first (Google Fonts in , or @import at the very TOP of this file). body, h1, h2, h3, h4, h5, h6, p, a, span, li, .elementor-heading-title, .elementor-widget-container, .elementor-button { font-family: "Your Font", sans-serif !important; } Headings only: .elementor-heading-title, h1, h2, h3 { font-family: "Your Heading Font", serif !important; } ========================================================================== */ /* ============================================================================ BACKGROUND COLORS (scaffold — COMMENTED OUT / inert) ---------------------------------------------------------------------------- Backgrounds are per-section (hardcoded + heavily inline). No single switch. An !important rule CAN override them, but blanket rules flatten everything. • Recolor a specific shade everywhere -> Lever 2 find/replace the hex (dark sections are #000000 and #141414). • Recolor ONE section -> target its Elementor id (inspect to find it): .elementor-element-xxxxxxx { background-color: #111 !important; } • Photo backgrounds use inline background-image, NOT color — swap the image file or the section's inline background-image URL in the page HTML. ========================================================================== */ /* ============================================================================ MARKUP.IO FEEDBACK PASS (2026-07-03) — quick fixes, Stream A ========================================================================== */ /* ---- Icon-list bullets on Granwood Gate (page-id-265) AND Pasture Edge (page-id-269): the source used a chevron-in-a-circle glyph that reads as a clickable dropdown toggle. Swap to a small decorative dot. The dot is top-aligned to the FIRST line of text (the earlier 265-only rule dropped an inline dot on the baseline, so it sat high/misaligned on wrapped items). ---- */ .page-id-265 .elementor-icon-list-icon .e-fas-chevron-circle-right, .page-id-269 .elementor-icon-list-icon .e-fas-chevron-circle-right { display: none !important; } /* Only items that ACTUALLY had a chevron-circle glyph get the replacement dot. This :has() scoping matters: the footer Quick Links + phone/email icon lists use chevron-right / phone / envelope glyphs, and the page-wide rule was leaking a stray extra dot beside those footer icons on the Granwood (265) and Pasture Edge (269) pages — that was the reported "footer dots". */ .page-id-265 .elementor-icon-list-item:has(.e-fas-chevron-circle-right), .page-id-269 .elementor-icon-list-item:has(.e-fas-chevron-circle-right) { align-items: flex-start; } .page-id-265 .elementor-icon-list-item:has(.e-fas-chevron-circle-right) .elementor-icon-list-icon::before, .page-id-269 .elementor-icon-list-item:has(.e-fas-chevron-circle-right) .elementor-icon-list-icon::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-top: 0.5em; /* nudge dot down to the middle of the first text line */ } /* ---- Renovations (page-id-6190): the "Golden Ticket" on-load popup (id 9805) is not actually controlled by its data-elementor-settings trigger JSON in this static mirror — this export froze the DOM mid-render with the popup already open, wrapped in a JS-built .dialog-widget (position:fixed) that isn't reachable via the popup's own settings. Hide it directly; scoped by :has() to this popup's unique id so it doesn't touch other lightboxes (e.g. the photo gallery) that reuse the same .dialog-widget classes. ---- */ .dialog-widget:has([data-elementor-id="9805"]) { display: none !important; } /* ---- Renovations (page-id-6190): reflow the 6-service grid from 1x6 to a 2-row x 3-column layout at desktop widths. Existing tablet/mobile breakpoints already collapse to 3/1 columns, so only desktop needs this. ---- */ .elementor-6190 .elementor-element.elementor-element-829a54c { --e-con-grid-template-columns: repeat(3, 1fr) !important; --e-con-grid-template-rows: repeat(2, 1fr) !important; } /* ---- Custom Builds: shrink the numeral icons in the "Step Process" widget (two instances on this page only — .ue-step-icon is a global class used by this widget elsewhere too, so scope by the widget's own container id rather than touching .ue-step-icon directly). ---- */ #uc_step_process_elementor_36e10c98 .ue-step-icon, #uc_step_process_elementor_2e1d5d18 .ue-step-icon { width: 56px !important; height: 56px !important; } /* ============================================================================ AVAILABLE HOMES — Pasture Edge "Walk the Street" (Stream B) ---------------------------------------------------------------------------- The static grid + compare tray originally shipped here has been superseded by the "Walk the Street" redesign: a spine-and-alternating-cards layout, sort toolbar, compare tray/overlay, and Plan Room floor-plan viewer. That styling now lives in its own file, assets/wh-homes-street.css (loaded only on communities/pasture-edge/index.html), so the .wh-street, .wh-home, .wh-compare- and .wh-plan-room rules aren't duplicated here. ========================================================================== */ /* The old markup's flex-child wrapper around this section was sized "auto" to hug a narrow dropdown control from the original synced-carousel widget. The street markup that replaced it still sits inside that same Elementor wrapper, so this fix still applies: force it to fill the row instead of clamping to intrinsic content width. Scoped to this page (page-id-269 = Pasture Edge) since the hashed element id is otherwise reused only within this DOM. */ .page-id-269 .elementor-element-49b6e85 { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } /* ============================================================================ NAV — Communities mega-menu: lead with Pasture Edge ---------------------------------------------------------------------------- The Communities dropdown is a CSS-grid of community CTA cards (.elementor-element-2d26145), authored in source order Granwood → Cherrywood → Creekbank → The Pines → Pasture Edge. Pasture Edge is the flagship, so it should read first (left-to-right). The card markup carries depth-relative hrefs that differ per page, so reordering in the HTML would mean editing 119 files; a single `order` override does it everywhere from here. Grid items honour `order` during auto-placement. Card ids: Granwood 14c6cf9, Cherrywood 0e357ab, Creekbank 0af63fd, The Pines 63e1f5d, Pasture 48acb9e. ---- */ .elementor-element-2d26145 > .elementor-element-48acb9e { order: -1 !important; } /* ============================================================================ FLOORPLAN PAGES — tighten vertical rhythm ---------------------------------------------------------------------------- The single-floorplan template (body.single-floorplans, ~57 pages) carries Elementor's stock generous section spacing, which reads as big empty bands between sections on our dark theme. Two safe, scoped tightenings below. NOTE: we deliberately do NOT touch the "Standard/Energy Star Features" section's margin-bottom: -200px — that negative margin is an intentional overlap the template relies on; zeroing it collapses the layout. 1) Standalone floor-plan display section (elementor id 9b10b03, present on the 48 pages that show a large white plan drawing between the hero and the features grid). Stock padding is 120px top/bottom = 240px of empty band around the plan. Cut to 44px so the plan sits near its neighbours. Scoped to .single-floorplans so the reused hash can't collide elsewhere. */ .single-floorplans .elementor-element-9b10b03 { padding-top: 44px !important; padding-bottom: 44px !important; } /* 2) Inner "Energy Star / Standard Features" section (elementor id f363039, shared across 54 pages). It is NESTED inside the outer features section (3557b5f, the one with the intentional margin-bottom: -200px overlap — left untouched). Its own margin: 100px top/bottom pushes the features heading far below the floor plan and leaves a wide band below the columns. Because it lives *inside* the overlap wrapper, trimming it to 36px tightens the plan-to-features gap without disturbing the overlap that follows. */ .single-floorplans .elementor-element-f363039 { margin-top: 36px !important; margin-bottom: 36px !important; } /* 4) Spacer section below the features grid (elementor id d859610, shared across 51 floorplan pages). It's an empty section whose only job is padding-bottom: 150px — a large dead band between the features block and "Browse Similar Plans". Cut to 40px. */ .single-floorplans .elementor-element-d859610 { padding-bottom: 40px !important; } /* 5) "Browse Similar Plans" section (elementor id a0056ad, shared across the floorplan pages). The content sections are dark-grey (#141414) sitting on a pure-black (#000) body, so ANY margin gap between two grey sections lets the black body show through as a "black bar". Stock margin was 50px top/bottom → a fat black stripe above the section. Zero the top margin so it butts flush against the grey spacer above it (breathing room is already provided by that spacer's padding-bottom, which stays grey). A small bottom margin is fine — the footer below is intentionally black. */ .single-floorplans .elementor-element-a0056ad { margin-top: 0 !important; margin-bottom: 20px !important; } /* 6) Energy Star / Standard Features grid (elementor text widget 388ae6d, shared across 54 pages). It's a single text block laid out with CSS column-count: 3, so the
category headings + their