/* I IV migration — re-wiring styles for interactivity that was previously driven by the GHL/Nuxt Vue runtime (which this static build drops). Scoped to GHL's own class names so appearance is unchanged. */ /* ---- Sticky header (desktop + mobile) -------------------------------------- Keep the primary nav + booking CTA visible while scrolling. GHL renders two header sections (a desktop one and a mobile one; the other is display:none per viewport). position:sticky keeps them in the flow, so there is no layout shift or jump. z-index sits above page content but below the mobile-menu overlay (99999). GHL already applies scroll-margin-top:var(--sticky-header-height) to [id] targets, so setting that variable keeps anchored content clear of the bar. */ :root { --sticky-header-height: 72px; } /* GHL sets overflow-x:hidden on /, which makes them scroll containers and breaks position:sticky. Horizontal overflow is already 0 everywhere, so switch to overflow-x:clip — still clips any stray overflow, but is NOT a scroll container, so sticky works. */ html, body { overflow-x: clip !important; } #section-Sbx08YC8_K, #section-GIEiNSFHEN, .fullSection:has(> * [class*="nav-menu-v2"]), .c-section:has(> * .nav-menu-mobile) { position: sticky !important; top: 0 !important; z-index: 1000 !important; } @media (max-width: 767px) { :root { --sticky-header-height: 74px; } } /* Mobile nav overlay: hidden by default; JS shows the fixed inset:0 `.hide` wrapper + this panel on open (the wrapper is GHL's; iiv-migration.js also populates the empty list from the desktop nav). */ .nav-menu-body { display: none; } body.iiv-nav-open .nav-menu-body { display: block; } /* Ensure the opened wrapper sits above the sticky header and scrolls. Make the panel itself the fixed full-screen layer (more reliable paint than relying on the wrapper's absolute child). */ .iiv-navwrap-open { display: block !important; opacity: 1 !important; /* GHL's .hide wrapper is opacity:0 — the real reason the menu opened invisibly; this makes it actually paint */ visibility: visible !important; z-index: 99999 !important; } .iiv-navwrap-open .nav-menu-body { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 99999 !important; } /* Cloned mobile menu links: readable, on-brand, tappable on the white panel. */ .nav-menu-body ul.nav-menu { list-style: none; margin: 32px 0 0; padding: 0; display: block !important; } .nav-menu-body ul.nav-menu li { margin: 0; padding: 0; } .nav-menu-body ul.nav-menu a { display: block; padding: 13px 4px; min-height: 44px; box-sizing: border-box; font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #111008; text-decoration: none; border-bottom: 1px solid rgba(196, 163, 90, 0.22); } .nav-menu-body ul.nav-menu a:hover, .nav-menu-body ul.nav-menu a:focus-visible { color: #c4a35a; } /* FAQ answer panels: smooth expand/collapse. Collapsed state comes from the inline height:0;opacity:0 GHL already set; JS clears it on open. */ .hl-faq-child-panel { overflow: hidden; transition: height .25s ease, opacity .25s ease, padding .25s ease; } .hl-faq-child-heading { cursor: pointer; } /* ========================================================================== UX REMEDIATION PASS — approved by Aaron 2026-08-27. CSS/presentation only. Loaded after the page's inline CSS (Base.astro), so equal-specificity rules here win. No content, URL, metadata, schema, redirect, pricing, medical, legal, or booking changes. Scoped to the site's own class vocabulary. ========================================================================== */ /* ---- (3) Inline content links: off-brand #188bf6 blue -> brand gold ---- GHL applied color:var(--link-color) (#188bf6) ONLY to links that use the token (inline rich-text/paragraph links). Overriding the token to the brand gold the site already uses for links (blog inline links + footer links) is surgical: it flips exactly the blue links and leaves footer links, CTA buttons, and other explicitly-coloured links untouched (so nothing goes black-on-dark). Gold at rest matches the established brand treatment; we add an underline on hover and a visible focus ring for accessible interactive states. (Earlier this used color:inherit, which reverted the dark-footer's gold links to black — reverted.) */ :root { --link-color: #c4a35a; } /* Base underline so inline content links are distinguishable by more than colour (fixes the "links rely on colour" accessibility issue). Nav/footer bullet-list links are navigation, not prose, and are excluded just below. */ .text-output a, [class*="paragraph-"] a, [class*="rich-text-"] a, .c-paragraph a, .iiv-lede a, [class*="-lede"] a, [class*="-note"] a, .item-text a, .hl-faq-child-panel a, [class*="faq-list"] a { text-decoration: underline; text-decoration-color: #c4a35a; text-decoration-thickness: 1px; text-underline-offset: 3px; } .c-bullet-list a, [class*="bulletList-"] a { text-decoration: none !important; } .text-output a:hover, [class*="paragraph-"] a:hover, [class*="rich-text-"] a:hover, .c-paragraph a:hover, .iiv-lede a:hover, [class*="-lede"] a:hover, [class*="-note"] a:hover, .item-text a:hover, .hl-faq-child-panel a:hover, [class*="faq-list"] a:hover { text-decoration-thickness: 2px; } .text-output a:focus-visible, [class*="paragraph-"] a:focus-visible, [class*="rich-text-"] a:focus-visible, .c-paragraph a:focus-visible, .iiv-lede a:focus-visible, [class*="-lede"] a:focus-visible, [class*="-note"] a:focus-visible, .hl-faq-child-panel a:focus-visible { outline: 2px solid #c4a35a; outline-offset: 2px; border-radius: 2px; } /* ---- (P2-4) Standalone phone / contact CTAs are NOT editorial links ------- Approved by Aaron 2026-08-27 (2nd UX pass). The base inline-link underline above is for editorial prose links; a tel: link is always a contact/call action, so it must read as a CTA — never with the strike/underline the global link treatment gave it. Scoped to tel: links ONLY (href^="tel:"), so genuine inline-content links keep their underline. Button-style phone CTAs (.c-button/.iiv-btn*) already carry their own design; the affordance rules below target only the bare phone links that were mis-styled as prose links (gold, tap/hover/focus states — obviously callable, accessible). */ a[href^="tel:"] { text-decoration: none !important; } .text-output a[href^="tel:"], [class*="paragraph-"] a[href^="tel:"], .c-paragraph a[href^="tel:"], [class*="rich-text-"] a[href^="tel:"], [class*="-note"] a[href^="tel:"], [class*="heading-"] a[href^="tel:"] { color: #c4a35a; font-weight: 600; } .text-output a[href^="tel:"]:hover, [class*="paragraph-"] a[href^="tel:"]:hover, .c-paragraph a[href^="tel:"]:hover, [class*="rich-text-"] a[href^="tel:"]:hover, [class*="-note"] a[href^="tel:"]:hover, [class*="heading-"] a[href^="tel:"]:hover { color: #b08d3f; text-decoration: underline !important; text-underline-offset: 3px; } a[href^="tel:"]:focus-visible { outline: 2px solid #c4a35a; outline-offset: 2px; border-radius: 2px; } /* ---- (P2-6) Physical-lounge map + homepage "Visit Us" callout ------------- Approved by Aaron 2026-08-27 (2nd UX pass). Makes the hybrid model clear: a real Google Map of the Bentonville lounge on Contact, and a compact "Visit Us" callout on the homepage. Verified location/address/links only (copied from the live site's own Google Maps links). Brand palette: gold #c4a35a, cream #f8f5f0, ink #1c1a15. */ .iiv-lounge-map { max-width: 1100px; margin: 40px auto 0; padding: 0 24px; box-sizing: border-box; } .iiv-lounge-map-frame { display: block; width: 100%; height: 400px; border: 1px solid rgba(196, 163, 90, 0.35); border-radius: 10px; } @media (max-width: 767px) { .iiv-lounge-map { margin-top: 28px; padding: 0 18px; } .iiv-lounge-map-frame { height: 280px; } } /* Compact homepage lounge callout — clearly a distinct "visit us" band. */ .iiv-home-lounge { background: #f8f5f0; border-top: 1px solid rgba(196, 163, 90, 0.25); border-bottom: 1px solid rgba(196, 163, 90, 0.25); padding: 48px 24px; } .iiv-home-lounge-inner { max-width: 640px; margin: 0 auto; text-align: center; } .iiv-home-lounge-eyebrow { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #c4a35a; font-weight: 600; } .iiv-home-lounge-title { margin: 0 0 12px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; line-height: 1.1; color: #1c1a15; } .iiv-home-lounge-addr { margin: 0 0 10px; font-size: 17px; line-height: 1.5; color: #1c1a15; } .iiv-home-lounge-note { margin: 0 auto 22px; max-width: 52ch; font-size: 15px; line-height: 1.6; color: #55503f; } .iiv-home-lounge-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 26px; background: #c4a35a; color: #1c1a15 !important; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none !important; border-radius: 4px; transition: background .18s ease; } .iiv-home-lounge-cta:hover { background: #b08d3f; } .iiv-home-lounge-cta:focus-visible { outline: 2px solid #1c1a15; outline-offset: 2px; } @media (max-width: 767px) { .iiv-home-lounge { padding: 40px 20px; } .iiv-home-lounge-title { font-size: 28px; } } /* ---- (1) Desktop reading measure: cap over-wide body / supporting copy ---- Confirmed offenders (font >=15px): FAQ answers (~760-780px / ~101 CPL, 27 pages, page CSS pins max-width:780px), contact & injection footnotes and ledes (1090-1180px / 136-157 CPL). Target ~68-72 characters/line (the blog body, ~88 CPL, is the house reference). !important is used because the migrated GHL CSS pins these widths with higher-specificity per-section rules; this global layer is the intended override point. We do NOT constrain addresses, short labels, nav, button text, display headings, tables, or card content — only prose paragraphs and footnotes. Centered blocks keep centering (auto margins). */ .hl-faq-child-panel .item-text, .hl-faq-child-panel p, [class*="faq-list"] p, details[class*="faq-item"] p { max-width: 70ch !important; } .iiv-section-lede, .iiv-lede, [class*="-lede"] { max-width: 68ch !important; } /* Full-width footnotes below content grids: constrain and keep centered. */ .iiv-con-areas-note, .iiv-inj-mobile-text, .iiv-inj-mobile-note { max-width: 62ch !important; margin-left: auto !important; margin-right: auto !important; } /* ---- (2) Contact "Across Benton County" composition (+ same pattern) ---- The gold rule floated with ~30px ABOVE (the headline's bottom margin) and 30px BELOW, detaching it from both the headline and the paragraph. Tighten the headline->rule gap and the rule->lede gap so eyebrow -> headline -> rule -> lede read as one group. Preserve the dark treatment, typography, gold accent, wording, and the section's generous premium whitespace overall. The full-width footnote is constrained by rule (1) above. */ .iiv-con-areas .iiv-section-head-dark > h2, .iiv-con-areas .iiv-con-areas-title { margin-bottom: 14px !important; } .iiv-con-areas .iiv-gold-rule, .iiv-con-areas .iiv-gold-rule-light { margin-top: 4px !important; margin-bottom: 18px !important; } /* Same head/rule pattern elsewhere: a gentle, systemic tightening of the default rule's bottom gap so it groups with the headline/lede it divides (only affects the plain .iiv-gold-rule default of 30px; scoped per-section rules keep theirs unless individually addressed). */ .iiv-gold-rule { margin-bottom: 22px; } /* ---- (P2-hotfix) Orphaned gold divider on /contact centered-heading sections -- The captured CSS carries `.iiv-gold-rule { margin: 30px 0 !important }`, which forces the decorative rule to margin-left/right:0. In the two CONTACT sections whose headings are centered — "Mobile Coverage / Across Benton County" (.iiv-con-areas) and the final CTA "Book Directly" (.iiv-con-final) — the per-section `margin: 0 auto` loses to that !important, leaving the rule floating far-left, disconnected from the centered heading. Restore its intended centered relationship. The hero (.iiv-con-hero-inner) is a deliberately LEFT-aligned composition and is intentionally left untouched. Composition-only: no copy, CTA, schema, or layout changes. */ .iiv-con-areas .iiv-gold-rule, .iiv-con-final .iiv-gold-rule { margin-left: auto !important; margin-right: auto !important; } /* ---- (5) Eyebrow / small-label readability: 10px -> 11.5px, calmer tracking -- Keeps the premium editorial eyebrow style; just lifts the smallest labels to a more legible size and eases the wide letter-spacing slightly. */ .iiv-eyebrow, .iiv-eyebrow-light, .iiv-editorial-eyebrow, .iiv-card-eyebrow, .iiv-neigh-eyebrow, [class*="iiv-"][class*="eyebrow"] { font-size: 11.5px !important; letter-spacing: 0.2em !important; line-height: 1.5 !important; } /* Same small uppercase label/tag family (were 9-10px) — lift font-size only for legibility; preserve each label's own letter-spacing/weight so the editorial hierarchy is unchanged. */ .iiv-trust-label, [class*="iiv-"][class*="-label"], [class*="iiv-"][class*="-tag"], .iiv-tier-flag, .iiv-meta-cat, .iiv-nearby-meta, .iiv-review-author { font-size: 11.5px !important; } /* ---- (4) Mobile tap targets (~44px) for secondary/text CTAs & controls ---- Applied ONLY on mobile and ONLY to interactive controls / text CTAs — never to ordinary inline paragraph links (which stay inline). Adds hit area via padding / min-height without changing the established visual style. */ @media (max-width: 767px) { /* secondary / text CTAs and small city-name links -> comfortable tap height. Restricted to actual links (never container DIVs like .iiv-*-links, which would break their layout), and not ordinary inline paragraph links. */ a.iiv-con-area-link, a.iiv-con-method-link, a.iiv-review-link, a.iiv-treatments-cta, a[class*="iiv-"][class*="-link"], .iiv-areas-cities a { display: inline-flex !important; align-items: center; min-height: 44px !important; } .iiv-filter-tab { min-height: 44px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .hl-faq-child-heading, .iiv-faq-head, details[class*="faq-item"] > summary { min-height: 44px !important; } .nav-menu-mobile, .close-menu { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; } .iiv-review-arrow { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; } /* enlarge the dot's hit area via padding while preserving the visual dot size */ .iiv-review-dot { padding: 15px 12px !important; background-clip: content-box !important; box-sizing: content-box !important; } } /* Visible keyboard focus for the re-wired interactive controls (accessibility). */ .iiv-filter-tab:focus-visible, .hl-faq-child-heading:focus-visible, details[class*="faq-item"] > summary:focus-visible, .nav-menu-mobile:focus-visible, .close-menu:focus-visible { outline: 2px solid #c4a35a; outline-offset: 2px; } /* ---- (6) Mobile section padding: trim inherited GHL excess (conservative) ---- Non-hero I IV sections carry 56-70px top/bottom padding on mobile (desktop scale). Cap at 48px to shorten long pages while keeping generous whitespace. Heroes (and their asymmetric padding) are left untouched. */ @media (max-width: 767px) { section[class*="iiv-"]:not([class*="hero"]), div[class*="iiv-"][class*="-section"]:not([class*="hero"]) { padding-top: 48px !important; padding-bottom: 48px !important; } }