/* ============================================================================ WrightHaven Homes — Pasture Edge cross-page ribbon ---------------------------------------------------------------------------- Styles the sticky Homes · Site Plan · Compare ribbon injected by assets/wh-ribbon.js as the first child of on every page in the Pasture Edge browsing system. Uses the sitewide tokens from :root (see DESIGN.md) and the established dark-card treatment (#1d1e1e card, rgba(192,181,155,…) hairlines). ========================================================================== */ .wh-ribbon { /* Fixed, not sticky: the Elementor pages set overflow-x:hidden on html/body, which breaks position:sticky at page level. wh-ribbon.js compensates with body padding-top so nothing is covered. `top` is also adjusted by that same script once the site's own Elementor sticky header activates (past ~500px scroll) and re-parents itself to position:fixed — see the MutationObserver there. */ position: fixed; top: 0; left: 0; right: 0; z-index: 120; /* above Elementor content and the street/siteplan toolbars */ /* White, not the dark card tone: the bar was invisible against the dark page (client feedback). Text colors below are AA on white. */ background: #ffffff; border-bottom: 1px solid rgba(20, 20, 20, 0.12); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.28); font-family: var(--wh-font-body, "Poppins", sans-serif); transition: top 0.2s ease; } @media (prefers-reduced-motion: reduce) { .wh-ribbon { transition: none; } } .wh-ribbon__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1160px; margin: 0 auto; padding: 0 24px; min-height: 46px; } .wh-ribbon__brand { font-family: var(--wh-font-heading, "Lato", sans-serif); font-weight: 400; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; /* darkened gold — the brand tan/gold fails contrast on white */ color: #6f6339; text-decoration: none; white-space: nowrap; } .wh-ribbon__brand:hover { color: var(--wh-ink, #141414); } .wh-ribbon__links { display: flex; align-items: stretch; gap: 4px; } .wh-ribbon__item { white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 46px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(20, 20, 20, 0.66); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background-color 0.2s; } .wh-ribbon__item:hover { color: var(--wh-ink, #141414); background: rgba(20, 20, 20, 0.06); } .wh-ribbon__item.is-current { color: var(--wh-ink, #141414); font-weight: 600; border-bottom-color: var(--wh-gold, #9a8c57); } .wh-ribbon__item:focus-visible { outline: 2px solid #6f6339; outline-offset: -2px; } .wh-ribbon__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 7px; border: 1px solid rgba(20, 20, 20, 0.28); border-radius: 999px; font-size: 11px; letter-spacing: 0.04em; color: #6f6339; white-space: nowrap; } .wh-ribbon__item.has-items .wh-ribbon__count { background: var(--wh-gold, #9a8c57); border-color: var(--wh-gold, #9a8c57); color: var(--wh-ink, #141414); font-weight: 600; } /* --- mobile: tighter, brand drops, full-width items --- */ @media (max-width: 720px) { .wh-ribbon__inner { padding: 0 12px; min-height: 42px; } .wh-ribbon__brand { display: none; } .wh-ribbon__links { width: 100%; justify-content: space-between; } .wh-ribbon__item { flex: 1; justify-content: center; min-height: 42px; padding: 0 4px; font-size: 10px; letter-spacing: 0.04em; gap: 5px; } .wh-ribbon__count { padding: 1px 5px; font-size: 10px; } } /* ============================================================================ Section nav — the large in-flow Homes · Site Plan · Compare tab cards injected by wh-ribbon.js at [data-wh-section-nav] markers. Same destinations as the ribbon, but INSIDE the content where people actually look (the slim fixed ribbon went unnoticed in user feedback). ========================================================================== */ .wh-sectionnav { display: flex; gap: 14px; width: 100%; /* Elementor flex columns otherwise shrink-wrap it */ max-width: 1160px; margin: 0 auto 30px; padding: 0 24px; box-sizing: border-box; font-family: var(--wh-font-body, "Poppins", sans-serif); } .wh-sectionnav__label { white-space: nowrap; } .wh-sectionnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 12px 16px; background: #1d1e1e; border: 1px solid rgba(192, 181, 155, 0.32); border-top: 3px solid rgba(192, 181, 155, 0.32); border-radius: var(--wh-radius, 3px); text-align: center; text-decoration: none; transition: border-color 0.2s, background-color 0.2s; } .wh-sectionnav__item:hover { background: #232424; border-color: var(--wh-gold, #9a8c57); } .wh-sectionnav__item.is-current { border-top-color: var(--wh-gold, #9a8c57); background: #232424; } .wh-sectionnav__item:focus-visible { outline: 2px solid var(--wh-gold, #9a8c57); outline-offset: 2px; } .wh-sectionnav__label { font-family: var(--wh-font-heading, "Lato", sans-serif); font-weight: 300; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } .wh-sectionnav__item.is-current .wh-sectionnav__label { color: var(--wh-gold, #9a8c57); } .wh-sectionnav__sub { font-size: 12px; letter-spacing: 0.06em; color: var(--wh-tan, #c0b59b); } /* Compare with homes selected: the count becomes a filled gold pill */ .wh-sectionnav__item.has-items .wh-sectionnav__sub { padding: 2px 10px; border-radius: 999px; background: var(--wh-gold, #9a8c57); color: var(--wh-ink, #141414); font-weight: 600; } @media (max-width: 720px) { .wh-sectionnav { gap: 8px; padding: 0 16px; margin-bottom: 22px; } .wh-sectionnav__item { padding: 12px 6px 11px; gap: 3px; } .wh-sectionnav__label { font-size: 13px; letter-spacing: 0.08em; } .wh-sectionnav__sub { font-size: 10.5px; } } /* Anchor targets the ribbon deep-links to: keep them clear of the fixed ribbon (and give a little breathing room) when jumped to. */ #wh-collection-pasture-edge, #wh-siteplan-pasture-edge { scroll-margin-top: calc(var(--wh-ribbon-h, 46px) + 16px); } /* ============================================================================ Breadcrumb — injected by wh-ribbon.js (section 4). Sits in normal flow at the top of the page content: on model pages directly above the .wh-home-hero section, on the Compare page where its explicit marker was. Same dark treatment as the ribbon/hero: uppercase Lato label text, tan links, dim non-link current segment. ========================================================================== */ .wh-breadcrumb { background: var(--wh-ink, #141414); border-bottom: 1px solid rgba(192, 181, 155, 0.14); font-family: var(--wh-font-heading, "Lato", sans-serif); } .wh-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; max-width: 1240px; /* matches .wh-home-hero__inner */ margin: 0 auto; padding: 12px 24px; font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; } .wh-breadcrumb__item { display: inline-flex; align-items: center; white-space: nowrap; } /* separator between segments */ .wh-breadcrumb__item + .wh-breadcrumb__item::before { content: "/"; margin: 0 10px; color: rgba(192, 181, 155, 0.4); } .wh-breadcrumb__link { color: var(--wh-tan, #c0b59b); text-decoration: none; transition: color 0.2s; } .wh-breadcrumb__link:hover { color: var(--wh-white, #ffffff); text-decoration: underline; text-underline-offset: 3px; } .wh-breadcrumb__link:focus-visible { outline: 2px solid var(--wh-gold, #9a8c57); outline-offset: 2px; } /* current page: dimmer, not a link, no underline */ .wh-breadcrumb__current { color: rgba(255, 255, 255, 0.55); } @media (max-width: 720px) { .wh-breadcrumb__list { padding: 10px 16px; font-size: 10px; letter-spacing: 0.1em; } .wh-breadcrumb__item + .wh-breadcrumb__item::before { margin: 0 7px; } } /* The Compare page injects the breadcrumb inside

, which supplies its own page padding — let the trail hug the content edge there instead of double-indenting, and drop the page-wide underline. */ .wh-compare-page .wh-breadcrumb { background: none; border-bottom: 0; } .wh-compare-page .wh-breadcrumb__list { max-width: none; padding: 0 0 18px; }