/* components.css, header, footer, cards, hero, sections, sticky */ /* ===== Header ===== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 246, 236, 0.70); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), padding var(--dur) var(--ease-out); } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.86); border-bottom-color: rgba(230, 220, 201, 0.6); box-shadow: 0 8px 22px rgba(27, 78, 143, 0.05); } .site-header__bar { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-4); transition: padding var(--dur) var(--ease-out); } .site-header.is-scrolled .site-header__bar { padding-block: 10px; } .brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--c-ink); } .brand:hover { color: var(--c-ink); } .brand__logo { height: 68px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(15, 32, 43, 0.18)); transition: height var(--dur) var(--ease-out), filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .brand:hover .brand__logo { transform: translateY(-1px); filter: drop-shadow(0 6px 12px rgba(15, 32, 43, 0.24)); } .site-header.is-scrolled .brand__logo { height: 54px; } .brand__logo--footer { height: 84px; background: rgba(255, 255, 255, 0.97); padding: 12px 20px; border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8); filter: none; } .primary-nav { margin-inline: auto; } .primary-nav ul { display: flex; gap: var(--space-6); list-style: none; padding: 0; margin: 0; } .primary-nav a { color: var(--c-ink); font-weight: 500; font-size: var(--fs-16); padding: 8px 4px; position: relative; } .primary-nav a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px; background: var(--c-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); } /* --- Submenu / dropdown -------------------------------------------------- */ .primary-nav__item { position: relative; } .primary-nav__caret { display: inline-block; font-size: 0.7em; margin-left: 2px; transform: translateY(-1px); color: var(--c-ink-soft); transition: transform var(--dur) var(--ease-out); } .primary-nav__item.has-submenu:hover .primary-nav__caret, .primary-nav__item.has-submenu:focus-within .primary-nav__caret { transform: rotate(180deg) translateY(1px); } .submenu { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%) translateY(-6px); min-width: 360px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-accent); border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(15, 32, 43, 0.30), 0 6px 14px -8px rgba(15, 32, 43, 0.18); padding: 10px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; z-index: 50; } .primary-nav__item.has-submenu:hover .submenu, .primary-nav__item.has-submenu:focus-within .submenu { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; visibility: visible; transition-delay: 0s; } /* Bridge the gap between the trigger and the menu so the hover doesn't break. */ .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .submenu ul { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; } .submenu__link { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--c-ink); text-decoration: none; transition: background var(--dur) var(--ease-out); } .submenu__link::after { content: none; } /* override the primary-nav underline */ .submenu__link:hover { background: var(--c-cream); } .submenu__icon { flex: 0 0 28px; height: 28px; border-radius: 8px; background: rgba(232, 184, 51, 0.18); display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary-deep); margin-top: 1px; } .submenu__text { display: flex; flex-direction: column; gap: 1px; } .submenu__title { font-weight: 600; color: var(--c-primary-deep); font-size: var(--fs-16); line-height: 1.25; } .submenu__sub { font-size: 13px; color: var(--c-ink-soft); line-height: 1.4; } .submenu__all { margin-top: 4px; border-top: 1px solid var(--c-line); padding-top: 6px; } .submenu__link--all { color: var(--c-primary-deep); font-weight: 600; font-size: 13px; padding-block: 8px; text-transform: uppercase; letter-spacing: 0.04em; } /* --- Mobile accordion submenu ------------------------------------------- */ .mobile-nav__row { display: flex; align-items: center; } .mobile-nav__main { flex: 1 1 auto; } .mobile-nav__toggle { flex: 0 0 44px; height: 44px; background: transparent; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink-soft); cursor: pointer; transition: transform var(--dur) var(--ease-out); font-size: 14px; } .mobile-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--c-primary-deep); } .mobile-nav__sub { list-style: none; margin: 4px 0 var(--space-2); padding: 6px 0 6px 18px; border-left: 2px solid rgba(232, 184, 51, 0.5); } .mobile-nav__sub li a { font-size: var(--fs-16); padding: 10px var(--space-3); color: var(--c-ink); } .header-cta { display: flex; align-items: center; gap: var(--space-3); } /* Mobile-only location title shown next to the hamburger (e.g. "Parkway South"). Hidden on desktop, where the full "Call Parkway South" button already names the location. Revealed when the nav collapses (see the 900px/720px rules). */ .header-cta__title { display: none; font-family: var(--font-display, serif); font-weight: 700; font-size: var(--fs-18); color: var(--c-primary-deep); white-space: nowrap; } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--c-line); background: #fff; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform var(--dur) var(--ease-out); } .mobile-nav { background: #fff; border-bottom: 1px solid var(--c-line); } .mobile-nav ul { list-style: none; margin: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .mobile-nav a { font-size: var(--fs-20); padding: var(--space-3); display: block; } .mobile-nav__cta .btn { width: 100%; justify-content: center; } @media (max-width: 900px) { .primary-nav, .header-cta .btn { display: none; } .nav-toggle { display: inline-flex; } .header-cta { margin-left: auto; } /* Show the location name in the top bar once the nav collapses. */ .header-cta__title { display: inline-block; } } /* ===== Hero (legacy boxed variant kept as override fallback) ===== */ .hero { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 56px); isolation: isolate; } /* ===== Hero, cinematic full-bleed ===== */ .hero.hero--cinematic { padding: 0; isolation: isolate; min-height: clamp(560px, 78vh, 800px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .hero--cinematic .hero__scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero--cinematic .hero__scene-img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 70%; transform-origin: center center; /* Steady-state filter matches the END of hero-intro-photo so there is no snap when the kenburns loop takes over. Brightened + higher contrast (1.24.03) so the photo's center reads bright and punchy; the vignette below darkens the edges so the overall scene has strong contrast. */ filter: saturate(1.12) contrast(1.2) brightness(1.0) blur(2px); /* Photo arrives crisp, holds, then settles into a slightly blurred backdrop as content slides in. ~2800ms intro, then steady-state kenburns. */ animation: hero-intro-photo 2800ms var(--ease-out) both, hero-kenburns 30s var(--ease-in-out) 2800ms infinite alternate; /* will-change removed: hero is a single large element near the top of the page so the compositor already promotes it for the kenburns animation. Leaving will-change here ate the largest single chunk of Firefox's will-change budget on the homepage and didn't change perceived perf. */ } /* Light atmospheric overlay only, most darkening moves to the glass panel. Keep a soft top-down tint for the header chrome and a directional dimmer on the right where the Sorter's marquee sits. */ .hero--cinematic .hero__scene-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 25, 45, 0.18) 0%, transparent 45%, rgba(10, 25, 45, 0.35) 100%), linear-gradient(180deg, rgba(10, 25, 45, 0.22) 0%, transparent 35%, rgba(10, 25, 45, 0.35) 100%); /* Eases in alongside the photo's darken/blur so the cinematic dim reads as a single move. */ animation: hero-intro-overlay 2200ms var(--ease-out) 600ms both; } .hero--cinematic .hero__scene-vignette { position: absolute; inset: 0; pointer-events: none; /* Cinematic vignette: bright clear center, edges fading to near-black with the corners darkest (default farthest-corner sizing puts 100% at the corners). Sits above the image but below the content (scene is z-index -1). */ background: radial-gradient(ellipse at 50% 45%, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.42) 70%, rgba(0, 0, 0, 0.82) 88%, rgba(0, 0, 0, 0.98) 100%); animation: hero-intro-overlay 2200ms var(--ease-out) 600ms both; } .hero--cinematic .hero__scene-glow { position: absolute; inset: 0; background: /* warm gold afternoon-light wash from top-right */ radial-gradient(ellipse 60% 45% at 85% 10%, rgba(232, 184, 51, 0.18), transparent 60%), /* navy lift from bottom-left for emotional weight */ radial-gradient(ellipse 55% 55% at 8% 100%, rgba(27, 78, 143, 0.32), transparent 65%); pointer-events: none; animation: hero-intro-overlay 2200ms var(--ease-out) 600ms both; } .hero--cinematic .hero__scene-sheen { position: absolute; inset: 0; /* Wide, clearly-visible band (2026-05-30): broad soft wash, but with enough brightness to read over the bright daytime photo even with screen blend. Alphas raised well above the earlier near-invisible values. */ background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.10) 32%, rgba(255, 248, 220, 0.26) 50%, rgba(232, 184, 51, 0.16) 68%, transparent 88%); transform: translateX(-120%) skewX(-12deg); /* Depth parallax (2026-05-30): this is the FAR plane (the photo behind the glass), so its sheen drifts SLOWER than the near glass glint. The keyframe now keeps the wash on-screen for most of the cycle, so at 60s the slow drift takes ~47s to cross (still far slower than the 8s glass glint) but comes around about once a minute instead of disappearing for minutes. No start delay (2026-05-30): the wash begins right at page load instead of waiting several seconds for the first pass. */ animation: hero-sheen 60s var(--ease-in-out) 0ms infinite; pointer-events: none; mix-blend-mode: screen; /* will-change removed (1.23.72): infinite ambient animation, no hint needed */ } /* Atmospheric haze, a faint warm-cool gradient that drifts slowly across the scene. Sits above the photo but below the content; mix-blend keeps it subtle. */ .hero--cinematic .hero__scene-haze { position: absolute; inset: -8%; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(232, 184, 51, 0.10), transparent 65%), radial-gradient(ellipse 55% 60% at 80% 70%, rgba(120, 160, 220, 0.10), transparent 70%); mix-blend-mode: screen; animation: hero-haze 38s var(--ease-in-out) infinite; filter: blur(8px); /* will-change removed (1.23.72): infinite ambient animation, no hint needed */ } .hero--cinematic .hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--container); padding: clamp(var(--space-7), 8vw, var(--space-9)) var(--space-5) clamp(var(--space-7), 6vw, var(--space-8)); display: block; } @media (max-width: 900px) { .hero--cinematic { min-height: 72vh; } } /* Glass-panel stack, single column, frosted card so the building photo shows through cleanly behind a focused content area. */ .hero--cinematic .hero__inner { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-4); position: relative; padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 52px); background: linear-gradient(180deg, rgba(10, 22, 38, 0.62) 0%, rgba(10, 22, 38, 0.78) 100%); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: clamp(20px, 2.5vw, 32px); /* Local stacking context so the gloss ::before can sit above the glass background but below the text via z-index:-1. */ isolation: isolate; /* Beveled edge, static. Brighter highlight along the top and faint side catches so the rim reads like polished acrylic without any animation. */ box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.7), 0 12px 30px -18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(255, 255, 255, 0.06); /* Glass panel slides up after the photo has been allowed to read crisp. */ animation: hero-intro-content 1100ms var(--ease-out) 850ms both; } /* Stagger children of the glass panel so headline / sub / CTAs flow in. */ .hero--cinematic .hero__inner > * { animation: hero-intro-content 900ms var(--ease-out) both; } .hero--cinematic .hero__inner > *:nth-child(1) { animation-delay: 1050ms; } /* The H1 gets a subtle lateral entrance for cinematic feel. */ .hero--cinematic .hero__inner > *:nth-child(2) { animation: hero-intro-content-lead 1000ms var(--ease-out) 1200ms both; } .hero--cinematic .hero__inner > *:nth-child(3) { animation-delay: 1350ms; } .hero--cinematic .hero__inner > *:nth-child(4) { animation-delay: 1500ms; } .hero--cinematic .hero__inner > *:nth-child(5) { animation-delay: 1650ms; } .hero--cinematic .hero__inner > *:nth-child(6) { animation-delay: 1800ms; } .hero--cinematic .hero__inner > *:nth-child(n+7) { animation-delay: 1950ms; } /* Desktop: the store logo (East/South) fades in to the RIGHT of the glass panel AFTER the hero entrance animations finish, and the glass + logo are centered together as a pair (the glass narrows so they fit). Hidden on tablet/phone. Kept small and a touch transparent so the building photo still reads behind. */ .hero__logo { display: none; } @media (min-width: 901px) { .hero--cinematic .hero__content { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 72px); } .hero--cinematic .hero__inner { max-width: 560px; } .hero--cinematic .hero__logo { display: block; flex: 0 0 auto; width: clamp(168px, 15vw, 232px); height: auto; opacity: 0; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55)); animation: hero-logo-in 1000ms var(--ease-out) 3000ms both; } } @keyframes hero-logo-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 0.9; transform: none; } } /* Reduced-motion floor intentionally removed by owner decision: this site runs full hero motion (kenburns, scene sheen, haze, glass gloss, intro) for every visitor regardless of the OS prefers-reduced-motion flag, matching the chadsanders.com treatment. Do not re-add prefers-reduced-motion gating to the public hero. */ /* Soft gold accent line at the top of the panel for heritage feel */ .hero--cinematic .hero__inner::after { content: ""; position: absolute; left: clamp(28px, 4vw, 48px); right: clamp(28px, 4vw, 48px); top: 0; height: 1px; /* 1.22.94: softened (was 0.55), kept a touch stronger than the generic section separators (0.30) since this heritage hero line is a signature accent. */ background: linear-gradient(90deg, transparent, rgba(232, 184, 51, 0.40), transparent); pointer-events: none; } /* Slow diagonal gloss that drifts across the glass. The wide gradient is clipped by the card's border-radius (background-clip), so it needs no overflow:hidden and never clips the editable pencils. z-index:-1 keeps it above the glass fill but below the text, so readability is untouched. */ .hero--cinematic .hero__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 248, 220, 0.10) 50%, rgba(232, 184, 51, 0.05) 53%, transparent 62%); background-size: 250% 250%; background-repeat: no-repeat; mix-blend-mode: screen; opacity: 0; /* Depth parallax (2026-05-30): this is the NEAR plane (the glass panel in front), so its glint crosses FASTER than the far background. 8s read as too frequent, so eased to 16s, still clearly quicker than the 60s background drift but no longer constant. */ animation: hero-glass-sheen 16s linear 3000ms infinite; /* will-change removed (1.23.72): infinite ambient animation, no hint needed */ } .hero--cinematic .hero__eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); color: #FBF6EC; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; margin: 0; } .hero--cinematic .hero__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px rgba(232, 184, 51, 0.25), 0 0 10px rgba(232, 184, 51, 0.7); } .hero--cinematic .hero__headline { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 14ch; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* (Ambient haze removed, the glass panel now provides text separation.) */ .hero--cinematic .hero__headline-lead { display: block; font-weight: 600; } .hero--cinematic .hero__headline-emph { display: block; font-style: italic; font-weight: 700; background: linear-gradient(120deg, #F2C849 0%, #E8B833 50%, #FBF6EC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero--cinematic .hero__sub { font-size: clamp(var(--fs-18), 1.5vw, 1.35rem); line-height: 1.5; color: rgba(251, 246, 236, 0.92); max-width: 56ch; margin: var(--space-2) 0 var(--space-3); text-shadow: none; } .hero--cinematic .hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); } .hero--cinematic .hero__calls { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); } .hero--cinematic .hero__call { display: inline-flex; align-items: center; gap: var(--space-3); padding: 12px 18px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .hero--cinematic .hero__call:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(232, 184, 51, 0.5); transform: translateY(-2px); color: #fff; } .hero--cinematic .hero__call-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; background: rgba(232, 184, 51, 0.25); color: var(--c-accent); border-radius: var(--radius-pill); } .hero--cinematic .hero__call-label { display: block; font-size: 11px; color: rgba(251, 246, 236, 0.7); letter-spacing: 0.08em; text-transform: uppercase; } .hero--cinematic .hero__call-num { display: block; font-weight: 600; } /* Floating status pill, absolute bottom-right, lives outside the content stack */ .hero--cinematic .hero__status { position: absolute; right: clamp(var(--space-5), 4vw, var(--space-7)); bottom: clamp(var(--space-5), 4vw, var(--space-7)); display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px; background: rgba(15, 25, 38, 0.62); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(232, 184, 51, 0.22); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); isolation: isolate; color: #fff; max-width: 360px; z-index: 2; } .hero--cinematic .hero__status-dot { width: 12px; height: 12px; border-radius: 50%; background: #4FD988; box-shadow: 0 0 0 5px rgba(79, 217, 136, 0.22), 0 0 12px rgba(79, 217, 136, 0.6); animation: bob 2.4s var(--ease-in-out) infinite; flex: 0 0 12px; } /* Closed state: calm amber, no green glow and no live pulse, so the dot never signals open when the store is closed. */ .hero--cinematic .hero__status-dot.is-closed { background: #d8a93f; box-shadow: 0 0 0 5px rgba(216, 169, 63, 0.18); animation: none; } .hero--cinematic .hero__status-line { display: block; font-size: 17px; line-height: 1.35; font-weight: 500; } .hero--cinematic .hero__status-line strong { color: #fff; font-weight: 700; } .hero--cinematic .hero__status-sub { display: block; color: rgba(251, 246, 236, 0.82); font-size: 14px; margin-top: 4px; } /* Smaller, softer gloss on the status card, same clip-safe technique. */ .hero--cinematic .hero__status::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.05) 49%, rgba(255, 248, 220, 0.07) 51%, transparent 60%); background-size: 240% 240%; background-repeat: no-repeat; mix-blend-mode: screen; opacity: 0; /* Near plane (sits on the glass panel), so it sweeps fast like the glass, not like the far background (2026-05-30). Sped up from 14s to 9s. */ animation: hero-status-sheen 9s linear 5000ms infinite; /* will-change removed (1.23.72): infinite ambient animation, no hint needed */ } @media (max-width: 900px) { .hero--cinematic .hero__status { position: relative; right: auto; bottom: auto; margin: var(--space-5) 0 0; max-width: 100%; } } /* ===== Mobile hero, purpose-built, not squeezed desktop ===== */ /* Hide the alternate subheadline by default; media queries swap. */ .hero__sub--mobile { display: none; } @media (max-width: 720px) { .hero__eyebrow--desktop-only { display: none; } } @media (max-width: 720px) { /* Header, tighter, smaller logo */ .site-header__bar { padding-block: 10px; gap: 12px; } .brand__logo { height: 44px; } .site-header.is-scrolled .brand__logo { height: 38px; } .header-cta .btn { display: inline-flex; } /* On phones the title already names the location, so the Call button drops its location name and reads just "Call" with the phone icon (no longer redundant). Desktop keeps the full "Call Parkway South". */ .header-cta__call-loc { display: none; } .header-cta__title { font-size: var(--fs-16); } /* Hero on phones: the storefront photo is wide/panoramic, so making it COVER a tall phone screen zoomed it into the center of the sign and you couldn't see the building. Instead we show the WHOLE building: the photo is letterboxed to a clean banner at the TOP of the hero (object-fit: contain, no zoom), and the rest of the hero is a brand navy gradient that the headline panel sits on. Desktop/tablet keep the cinematic cover photo. */ /* NB: the base rule is .hero.hero--cinematic (two classes), so these mobile overrides must also use .hero.hero--cinematic to win on specificity. */ .hero.hero--cinematic { display: block; /* stack: photo banner on top, headline below */ align-items: stretch; background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-deep) 100%); } .hero.hero--cinematic .hero__scene { position: relative; /* the photo now TAKES layout space at the top */ inset: auto; height: auto; z-index: 0; } .hero.hero--cinematic .hero__scene-img { position: relative; width: 100%; height: auto; /* natural aspect -> the WHOLE building shows */ object-fit: contain; transform: none; animation: none; filter: none; } /* The cover-era darkeners aren't needed for the banner: the photo stays crisp at the top and the headline reads on the navy below it. */ .hero.hero--cinematic .hero__scene-overlay, .hero.hero--cinematic .hero__scene-vignette, .hero.hero--cinematic .hero__scene-glow, .hero.hero--cinematic .hero__scene-sheen, .hero.hero--cinematic .hero__scene-haze { display: none; } .hero.hero--cinematic .hero__content { margin: 0 auto; /* headline panel below the photo, on the navy */ } /* Hero container, start higher, less vertical waste */ .hero.hero--cinematic { min-height: 0; /* Subtract sticky-actions bar + safe area at the bottom */ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); align-items: stretch; } .hero--cinematic .hero__content { padding: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; width: 100%; } /* Glass panel, wider, less padding, anchored higher */ .hero--cinematic .hero__inner { width: 94vw; max-width: 94vw; margin: 0 auto; padding: 20px 22px; gap: 12px; border-radius: 22px; } .hero--cinematic .hero__inner::after { left: 22px; right: 22px; } /* Eyebrow, allow wrap, tighter padding */ .hero--cinematic .hero__eyebrow { white-space: normal; line-height: 1.3; font-size: 11px; padding: 6px 12px; letter-spacing: 0.12em; max-width: 100%; } /* Headline, mobile-tuned size */ .hero--cinematic .hero__headline { font-size: clamp(1.85rem, 8.4vw, 2.4rem); line-height: 1.05; max-width: 100%; } /* Swap subheadline copy: hide desktop, show mobile (if present) */ .hero__sub--desktop { display: none; } .hero__sub--mobile { display: block; } .hero--cinematic .hero__sub { font-size: 1rem; line-height: 1.5; margin: 4px 0 4px; color: rgba(251, 246, 236, 0.94); } /* CTAs, full-width primary, smaller buttons, fewer per row */ .hero--cinematic .hero__ctas { flex-direction: column; gap: 10px; margin-top: 8px; } .hero--cinematic .hero__ctas .btn { width: 100%; justify-content: center; padding: 14px 20px; min-height: 50px; font-size: 15px; } /* Call pills, single column, tighter */ .hero--cinematic .hero__calls { flex-direction: column; gap: 8px; margin-top: 8px; } .hero--cinematic .hero__call { width: 100%; padding: 10px 14px; } /* Status pill, compact, integrated */ .hero--cinematic .hero__status { margin-top: 12px; padding: 10px 14px; gap: 10px; font-size: 12px; } .hero--cinematic .hero__status-line { font-size: 15px; } .hero--cinematic .hero__status-sub { font-size: 12px; } /* Fine print, out of the absolute corner on mobile */ .hero--cinematic .hero__fine { position: relative; left: auto; transform: none; bottom: auto; margin-top: 8px; font-size: 11px; line-height: 1.4; } } @media (max-width: 420px) { .hero--cinematic .hero__inner { padding: 18px 18px; } .hero--cinematic .hero__headline { font-size: clamp(1.7rem, 8vw, 2.1rem); } .brand__logo { height: 40px; } } /* ===== Desktop refinement, calm, confident, luxury-local (1180+) ===== */ @media (min-width: 1180px) { .hero--cinematic { min-height: clamp(580px, 72vh, 740px); } .hero--cinematic .hero__content { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 6vw, 88px); } .hero--cinematic .hero__inner { max-width: 620px; padding: clamp(28px, 3vw, 42px) clamp(28px, 3vw, 44px); gap: 14px; /* Soften the border glow */ border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 10px 24px -16px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .hero--cinematic .hero__inner::after { /* 1.22.94: softened the wide-screen hero heritage line (was 0.4), kept a touch stronger than the generic 0.30 section separators. */ background: linear-gradient(90deg, transparent, rgba(232, 184, 51, 0.34), transparent); } .hero--cinematic .hero__headline { font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 13ch; } .hero--cinematic .hero__sub { font-size: 1.08rem; max-width: 48ch; margin-top: 2px; line-height: 1.5; } .hero--cinematic .hero__ctas .btn--lg { padding: 16px 26px; min-height: 52px; font-size: 0.98rem; } .hero--cinematic .hero__call { padding: 10px 16px; } .hero--cinematic .hero__eyebrow { font-size: 11px; padding: 6px 14px; letter-spacing: 0.18em; } } /* Extra refinement on truly large displays (1600+) */ @media (min-width: 1600px) { .hero--cinematic .hero__inner { max-width: 640px; padding: clamp(32px, 2.5vw, 44px) clamp(32px, 2.5vw, 48px); } .hero--cinematic .hero__headline { font-size: clamp(2.6rem, 3.6vw, 3.6rem); } .hero--cinematic .hero__sub { font-size: 1.1rem; max-width: 50ch; } .hero--cinematic .hero__content { padding-top: clamp(80px, 6vw, 110px); } } .hero--cinematic .hero__fine { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(251, 246, 236, 0.55); font-size: 11px; margin: 0; padding: 0 var(--space-5); text-align: center; pointer-events: none; } /* Ghost button variant tuned for dark hero */ .btn--ghost-light { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px); } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.20); color: #fff; border-color: rgba(232, 184, 51, 0.6); transform: translateY(-3px); } .hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; } .hero__blob { position: absolute; border-radius: 50%; filter: blur(110px); } .hero__blob--a { width: 620px; height: 620px; background: var(--c-primary); top: -180px; right: -160px; opacity: 0.14; animation: drift 18s var(--ease-in-out) infinite alternate; } .hero__blob--b { width: 520px; height: 520px; background: var(--c-accent); bottom: -200px; left: -160px; opacity: 0.18; animation: drift 22s var(--ease-in-out) infinite alternate-reverse; } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 72px 72px; background-position: -1px -1px; opacity: 0.12; mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 55%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 55%); } .hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center; } .hero__copy { position: relative; z-index: 2; } .hero__headline { margin: 0 0 var(--space-5); } .hero__headline-lead { display: block; } .hero__headline-emph { display: block; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .hero__sub { font-size: var(--fs-20); color: var(--c-ink-soft); max-width: 54ch; margin-bottom: var(--space-6); } .hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .hero__calls { display: flex; gap: var(--space-3); flex-wrap: wrap; } .hero__call { display: inline-flex; align-items: center; gap: var(--space-3); padding: 12px 18px; background: rgba(255,255,255,0.85); border-radius: var(--radius-pill); border: 1px solid var(--c-line); color: var(--c-ink); backdrop-filter: blur(8px); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .hero__call:hover { color: var(--c-primary-deep); transform: translateY(-2px); box-shadow: var(--shadow-2); background: #fff; } .hero__call-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; background: var(--c-cream); border-radius: var(--radius-pill); } .hero__call-label { display: block; font-size: var(--fs-12); color: var(--c-ink-soft); } .hero__call-num { display: block; font-weight: 600; } .hero__visual { position: relative; aspect-ratio: 5 / 4; min-height: 440px; } .hero__photo { position: absolute; inset: 6% 0 6% 8%; margin: 0; border-radius: var(--radius-xl); overflow: hidden; padding: 8px; /* cream-tinted seat around the photo */ background: linear-gradient(180deg, #FFFCF3, #F5EFDF); box-shadow: 0 28px 70px -22px rgba(15, 32, 43, 0.55), 0 14px 32px -16px rgba(15, 32, 43, 0.4), 0 0 0 1px rgba(232, 184, 51, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); transform-origin: center; z-index: 2; isolation: isolate; } .hero__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; border-radius: calc(var(--radius-xl) - 8px); filter: saturate(1.06) contrast(1.04); transition: transform 1.2s var(--ease-out); } .hero__photo:hover > img { transform: scale(1.04); } .hero__photo-glow { position: absolute; inset: 8px; pointer-events: none; border-radius: calc(var(--radius-xl) - 8px); background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(232, 184, 51, 0.30) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(27, 78, 143, 0.32) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(15, 32, 43, 0.45) 100%); mix-blend-mode: multiply; } /* Behind-the-photo accent ring, gold heritage seal */ .hero__ring { position: absolute; inset: -3% -7% 14% -1%; border-radius: var(--radius-xl); border: 1.5px solid rgba(232, 184, 51, 0.55); box-shadow: 0 0 0 1px rgba(232, 184, 51, 0.15) inset, 0 0 30px rgba(232, 184, 51, 0.10); z-index: 1; } .hero__accent { position: absolute; right: -10%; top: -8%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(232, 184, 51, 0.55) 0%, rgba(232, 184, 51, 0.12) 45%, transparent 70%); filter: blur(14px); z-index: 0; } /* Add a second behind-the-photo navy halo on the opposite corner for depth balance */ .hero__visual::before { content: ""; position: absolute; left: -8%; bottom: -6%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(27, 78, 143, 0.32) 0%, transparent 70%); filter: blur(20px); z-index: 0; pointer-events: none; } /* Premium service snapshot, overlapping the photo lower-left */ .hero__snapshot { position: absolute; left: -2%; bottom: -2%; width: min(330px, 80%); padding: 18px 20px; z-index: 3; background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.65)); border-radius: var(--radius-lg); box-shadow: 0 20px 50px -20px rgba(14, 30, 25, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.7); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } .hero__snapshot-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .hero__snapshot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 5px rgba(58, 139, 90, 0.18); animation: bob 2.4s var(--ease-in-out) infinite; } .hero__snapshot-status { display: block; font-weight: 700; color: var(--c-primary-deep); letter-spacing: 0.02em; font-size: 15px; } .hero__snapshot-sub { display: block; color: var(--c-ink-soft); font-size: 12px; } .hero__snapshot-row { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid rgba(27, 78, 143,0.10); } .hero__snapshot-row li { text-align: left; display: flex; flex-direction: column; gap: 1px; } .hero__snapshot-row strong { font-family: var(--font-display); color: var(--c-primary-deep); font-size: 20px; line-height: 1; letter-spacing: -0.01em; } .hero__snapshot-row span { color: var(--c-ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .hero__snapshot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-ink); } .hero__snapshot-list li { padding-left: 18px; position: relative; } .hero__snapshot-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--c-accent); border-radius: 50%; box-shadow: 0 0 0 3px rgba(232, 184, 51,0.18); } .hero__chip { position: absolute; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--c-primary); color: #fff; font-weight: 600; font-size: 13px; box-shadow: 0 12px 28px -12px rgba(27, 78, 143, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); letter-spacing: 0.02em; } .hero__chip--top { top: 0; right: -4%; animation: bob 6s var(--ease-in-out) infinite; z-index: 3; } .hero__fine { position: relative; z-index: 1; text-align: center; color: var(--c-ink-soft); font-size: var(--fs-12); margin: var(--space-6) auto 0; max-width: 720px; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__visual { aspect-ratio: 4 / 3; min-height: 320px; margin-top: var(--space-5); } .hero__photo { inset: 0 8% 12% 0; } .hero__ring { inset: 4% 0 0 6%; } .hero__snapshot { left: -2%; bottom: -4%; width: min(310px, 88%); } .hero__chip--top { right: 0; } .hero__accent { display: none; } } @media (max-width: 540px) { .hero__visual { min-height: 260px; } .hero__photo { inset: 0 4% 14% 0; } .hero__snapshot { padding: 14px 16px; } .hero__snapshot-list { display: none; } } /* ===== Trust strip ===== */ .trust-strip { background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-deep) 100%); color: #fff; padding-block: var(--space-5); position: relative; border-block: 1px solid rgba(232, 184, 51, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .trust-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; /* 1.22.94: thinned to 1px and softened gold (was 2px / 0.55). */ background: linear-gradient(90deg, transparent, rgba(232, 184, 51, 0.30), transparent); } .trust-strip__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); flex-wrap: wrap; justify-content: center; align-items: center; } .trust-strip__list li { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 500; font-size: var(--fs-14); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.95); } .trust-strip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 5px rgba(232, 184, 51, 0.22), 0 0 10px rgba(232, 184, 51, 0.5); } /* ===== Cards ===== */ .card-grid { display: grid; gap: var(--space-5); } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } } .card { display: flex; flex-direction: column; gap: var(--space-3); background: #fff; border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid rgba(230, 220, 201, 0.7); box-shadow: 0 2px 4px rgba(15, 30, 25, 0.04), 0 8px 20px -10px rgba(15, 30, 25, 0.10); color: var(--c-ink); position: relative; overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 184, 51,0.18), transparent 60%); transition: opacity var(--dur) var(--ease-out); pointer-events: none; } .card:hover { transform: translateY(-6px); box-shadow: 0 4px 8px rgba(15, 30, 25, 0.06), 0 24px 48px -16px rgba(15, 30, 25, 0.22); border-color: rgba(232, 184, 51, 0.6); } .card:hover::before { opacity: 1; } .card__image { display: block; width: 100%; height: clamp(140px, 18vw, 180px); object-fit: cover; border-radius: calc(var(--radius-lg) - 6px); margin-bottom: var(--space-3); background: var(--c-cream); } .card__title { margin: 0; font-size: var(--fs-20); font-family: var(--font-display); font-weight: 600; color: var(--c-ink); line-height: 1.1; letter-spacing: -0.01em; } /* SEO Support Block (Phase 2 plumbing). Classy, intentional microcopy, a centered narrow column with a soft accent rule, slightly distinct from the regular card panels but clearly part of the site. Only renders when an approved block exists; empty data outputs nothing. */ .section--seo-support { padding: clamp(16px, 2.5vw, 24px) 0; } .seo-support { max-width: 720px; margin: 0 auto; text-align: center; padding-top: var(--space-5); border-top: 2px solid var(--c-line); } .seo-support__eyebrow { margin: 0 0 var(--space-2); } .seo-support__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink); margin: 0 0 var(--space-2); } .seo-support__body { color: var(--c-ink-soft); line-height: 1.6; margin: 0; } /* ----- SEO Support Block: Visual Editor placement controls (B2) ----- These only render inside the Visual Editor (PP_VISUAL_EDIT_MODE), so they never appear to public visitors. */ .seo-ve { margin: 8px 0; } .seo-ve__add { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto; padding: 9px 16px; border: 1px dashed #0E5A4F; border-radius: 999px; background: rgba(14, 90, 79, 0.06); color: #0E5A4F; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; letter-spacing: 0.02em; } .seo-ve__add span { font-size: 16px; line-height: 1; } .seo-ve__add:hover { background: rgba(14, 90, 79, 0.12); } .seo-ve--center, .seo-ve { text-align: center; } .seo-ve__placed { position: relative; } .seo-ve__tools { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; } .seo-ve__tag { font: 700 10px/1.2 system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #0E5A4F; background: rgba(14,90,79,0.08); padding: 3px 8px; border-radius: 999px; } .seo-ve__remove { border: 1px solid #E6DCC9; background: #fff; color: #4A5867; font: 600 12px/1 system-ui, sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .seo-ve__remove:hover { background: rgba(0,0,0,0.05); } /* SEO block picker modal (built by visual-editor.js) */ .seo-picker { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; } .seo-picker__backdrop { position: absolute; inset: 0; background: rgba(20,43,72,0.5); backdrop-filter: blur(2px); } .seo-picker__sheet { position: relative; width: min(620px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(20,43,72,0.32); overflow: hidden; } .seo-picker__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #E6DCC9; } .seo-picker__x { width: 32px; height: 32px; border: 0; background: transparent; font-size: 22px; line-height: 1; border-radius: 6px; cursor: pointer; color: #4A5867; } .seo-picker__x:hover { background: rgba(0,0,0,0.06); } .seo-picker__list { padding: 14px 20px 20px; overflow-y: auto; display: grid; gap: 12px; } .seo-picker__empty { margin: 8px 0; color: #4A5867; font-size: 14px; } .seo-picker__card { display: block; width: 100%; text-align: left; cursor: pointer; border: 1px solid #E6DCC9; border-left: 4px solid #D9A441; border-radius: 10px; padding: 12px 14px; background: #fff; } .seo-picker__card:hover { border-color: #0E5A4F; background: rgba(14,90,79,0.04); } .seo-picker__eyebrow { display: block; font: 700 10px/1.3 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #0E5A4F; margin-bottom: 3px; } .seo-picker__title { display: block; font: 700 15px/1.3 system-ui, sans-serif; color: #15202B; margin-bottom: 4px; } .seo-picker__body { display: block; font-size: 13px; line-height: 1.5; color: #4A5867; } /* SEO Block Slots (S1): helper note, lock control, and greyed "already used" picker cards. */ .seo-slot-ve__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; font-style: italic; color: #4A5867; } .seo-ve__lock { border: 1px solid #E6DCC9; background: #fff; color: #0E5A4F; font: 600 12px/1 system-ui, sans-serif; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .seo-ve__lock:hover { background: rgba(14,90,79,0.08); } .seo-picker__hint { margin: 0; padding: 10px 20px 0; font-size: 12.5px; line-height: 1.5; color: #4A5867; } .seo-picker__card.is-used { opacity: 0.5; cursor: not-allowed; background: rgba(0,0,0,0.03); border-style: dashed; } .seo-picker__card.is-used:hover { border-color: #E6DCC9; background: rgba(0,0,0,0.03); } .seo-picker__usedtag { display: inline-block; margin-top: 6px; font: 700 10px/1.3 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #B98A1F; } .card__body { color: var(--c-ink-soft); margin: 0; } .card__num { font-family: var(--font-display); color: var(--c-accent); font-size: var(--fs-24); font-weight: 700; display: inline-block; } .card__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--c-primary), var(--c-primary-deep)); color: #fff; display: inline-grid; place-items: center; box-shadow: var(--shadow-2); position: relative; } .card__icon::before { content: ""; width: 24px; height: 24px; background: var(--c-accent); border-radius: 50%; box-shadow: 0 0 0 4px rgba(232, 184, 51,0.25); } /* No-image card fallback icon, 1.22.92: same soft branded blue/teal/gold language as the media-block placeholder so the two no-photo states match. Layout and size unchanged, just a richer (but quiet) fill and dot. */ .card__icon--soft { background: linear-gradient(150deg, rgba(27, 78, 143, 0.10), rgba(49, 138, 133, 0.12)); color: var(--c-primary); box-shadow: inset 0 0 0 1px rgba(27, 78, 143, 0.10); } .card__icon--soft::before { background: linear-gradient(135deg, var(--c-primary), #318a85); box-shadow: 0 0 0 4px rgba(232, 184, 51, 0.22); } .card__cta { margin-top: auto; color: var(--c-primary); font-weight: 600; } /* Bullet rows */ .bullet-row { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; } .bullet-row li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-ink-soft); font-size: var(--fs-16); } /* Gold applies only to the decorative star icon, not to the editable text span the Visual Editor wraps the bullet in (that span would otherwise turn the bullet text gold and hard to read). The bullet text inherits the readable .bullet-row li ink color in both public and editor views. */ .bullet-row li span[aria-hidden="true"] { color: var(--c-accent); } .check-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-3); } .check-list li { display: flex; align-items: flex-start; gap: var(--space-3); } /* The round green bubble is the decorative checkmark only. Scope it to the aria-hidden span so the Visual Editor's editable text span (a SECOND span the editor wraps each bullet in) is NOT squashed into a 24px white-on-green dot, which made the bullet text unreadable and impossible to click in the editor. Same fix already applied to .bullet-row above. Public view has only the one checkmark span, so nothing changes there. */ .check-list li span[aria-hidden="true"] { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--c-primary); color: #fff; display: inline-grid; place-items: center; font-size: var(--fs-12); } /* Location cards */ .loc-card { background: #fff; border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); } .loc-card__head h2, .loc-card__head h3 { margin: 0; } .loc-card__tag { color: var(--c-primary); font-size: var(--fs-14); margin-top: 4px; } .loc-card__meta { color: var(--c-ink-soft); font-size: var(--fs-16); } .loc-card__hours { color: var(--c-ink-soft); font-size: var(--fs-14); } .loc-card__highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .loc-card__highlights li { padding: 6px 14px; background: var(--c-cream); border-radius: var(--radius-pill); font-size: var(--fs-14); color: var(--c-primary-deep); } .loc-card__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; } /* When location cards carry a storefront photo they render as full-width media rows (photo beside the details) so the photo sits at a comfortable landscape size instead of a tall sliver inside a 2-up grid. Stacks on phones. */ .loc-rows { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .loc-card--has-photo { flex-direction: row; align-items: stretch; gap: var(--space-6); } .loc-card--has-photo .loc-card__body { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } .loc-card__photo { flex: 0 0 42%; margin: 0; border-radius: var(--radius-lg); overflow: hidden; align-self: stretch; min-height: 240px; background: var(--c-cream); } .loc-card__photo img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; } @media (max-width: 720px) { /* Tighter, more app-like location cards on phones: less padding, smaller gaps between the name, address, phone, hours and tags, and a shorter photo. Spacing only, the details themselves are unchanged. */ .loc-card { padding: var(--space-4); gap: var(--space-2); border-radius: var(--radius-lg); } .loc-card--has-photo { flex-direction: column; gap: var(--space-3); } .loc-card--has-photo .loc-card__body { gap: var(--space-2); } .loc-card--has-photo .loc-card__photo { flex-basis: auto; min-height: 0; } .loc-card--has-photo .loc-card__photo img { height: auto; min-height: 0; max-height: 190px; } .loc-card__tag { margin-top: 2px; } .loc-card__highlights { gap: 6px; } .loc-card__highlights li { padding: 4px 10px; } .loc-card__cta { margin-top: var(--space-2); gap: var(--space-2); } } /* Jingle */ .jingle { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; } @media (max-width: 900px) { .jingle { grid-template-columns: 1fr; } } .jingle__copy-block { font-family: var(--font-display); font-style: italic; font-size: var(--fs-20); color: var(--c-ink-soft); border-left: 3px solid var(--c-accent); padding-left: var(--space-5); margin: var(--space-5) 0; } .jingle__players { display: flex; flex-direction: column; gap: var(--space-4); } .jingle__player { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); } .jingle__player audio { width: 100%; } .jingle__player-head { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; } .jingle__player-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 24px; } /* 1.23.36 polish: bars previously used --c-primary dark navy on a dark navy glass card so they washed out. Switching to --c-accent gold reads cleanly against the dark card and matches the section's eyebrow accent color. */ .jingle__player-eq i { width: 4px; background: var(--c-accent); border-radius: 2px; animation: eq 1.2s var(--ease-in-out) infinite; } .jingle__player-eq i:nth-child(1) { height: 30%; animation-delay: -0.1s; } .jingle__player-eq i:nth-child(2) { height: 70%; animation-delay: -0.3s; } .jingle__player-eq i:nth-child(3) { height: 50%; animation-delay: -0.5s; } .jingle__player-eq i:nth-child(4) { height: 90%; animation-delay: -0.2s; } .jingle__player-eq i:nth-child(5) { height: 60%; animation-delay: -0.4s; } .jingle__player-empty { color: var(--c-ink-soft); font-size: var(--fs-14); margin: 0; } /* Community */ .community { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; } @media (max-width: 900px) { .community { grid-template-columns: 1fr; } } .community__art { position: relative; aspect-ratio: 1; } .community__art-card { position: absolute; background: #fff; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-2); font-family: var(--font-display); font-weight: 600; color: var(--c-primary-deep); border: 1px solid var(--c-line); } .community__art-card--1 { top: 5%; left: 10%; } .community__art-card--2 { top: 18%; right: 10%; background: var(--c-primary); color: #fff; } .community__art-card--3 { top: 45%; left: 5%; } .community__art-card--4 { top: 60%; right: 15%; background: var(--c-accent); color: var(--c-primary-deep); } .community__art-card--5 { bottom: 5%; left: 25%; } .community__art-card--6 { top: 33%; right: 32%; } .community__art-card--7 { bottom: 22%; right: 4%; } .community__art-card--8 { top: 6%; left: 44%; } /* FAQ */ .faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 880px; margin-inline: auto; } .faq-group__title { font-family: var(--font-display, inherit); font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--c-primary); margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-line); letter-spacing: 0.01em; } .faq-group__title:first-child { margin-top: 0; } .faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .faq-item[open] { border-color: var(--c-primary); box-shadow: var(--shadow-2); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-weight: 600; font-size: var(--fs-18); color: var(--c-ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item__chev { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--c-cream); color: var(--c-primary); display: inline-grid; place-items: center; font-size: var(--fs-20); transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .faq-item[open] .faq-item__chev { transform: rotate(45deg); background: var(--c-primary); color: #fff; } .faq-item__body { color: var(--c-ink-soft); padding-top: var(--space-3); } /* Final CTA */ .final-cta { padding: clamp(var(--space-7), 7vw, var(--space-9)); text-align: center; background: radial-gradient(80% 100% at 50% 0%, rgba(27, 78, 143,0.08), transparent 70%), linear-gradient(180deg, #fff, var(--c-cream)); } .final-cta h2 { font-size: clamp(var(--fs-30), 4vw, var(--fs-56)); margin-bottom: var(--space-4); } .final-cta p { color: var(--c-ink-soft); font-size: var(--fs-20); margin-bottom: var(--space-6); } .final-cta__buttons { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* Page hero */ .page-hero { padding-block: clamp(var(--space-5), 4vw, var(--space-7)); position: relative; } /* Collapse the dead vertical space between a page header and the first content section below it. Previously the hero bottom padding (up to 96px) stacked on top of the next .section's top padding (up to ~106px), leaving ~200px of blank space under every page title. This only fires when a .section is the immediate sibling of the hero (no SEO/custom panel injected between). */ .page-hero + .section { padding-top: clamp(var(--space-4), 3vw, var(--space-6)); } /* When a product category sets a hero background image, the page-hero becomes its own stacking context so the panel-bg layer (z-index:-1) sits behind the content, and the decorative gradient is dropped so the photo reads cleanly. */ .page-hero--has-bg { z-index: 0; } .page-hero--has-bg::before { display: none; } .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 80% 0%, rgba(232, 184, 51, 0.22), transparent 60%), radial-gradient(45% 50% at 10% 100%, rgba(27, 78, 143, 0.10), transparent 60%); } .page-hero__title { margin: 0 0 var(--space-4); position: relative; } .page-hero__lede { font-size: var(--fs-20); color: var(--c-ink-soft); max-width: 70ch; position: relative; } /* Detail grid */ .detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); align-items: start; } @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } .detail-grid__aside { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: 96px; } .detail-grid__aside .btn { justify-content: center; } /* Location detail map panel, sits inside the sticky aside on desktop and stacks * under the contact card on mobile (single-column at <=900px). */ .location-map { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-line); } .location-map__title { margin: 0 0 var(--space-3); } .location-map__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); box-shadow: var(--shadow-1); background: rgba(15, 30, 25, 0.04); } .location-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .location-map__link { margin-top: var(--space-3); } .big-addr { font-family: var(--font-display); font-size: var(--fs-24); color: var(--c-ink); } .big-phone { font-family: var(--font-display); font-size: var(--fs-30); color: var(--c-primary); } .hours { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; } .hours th, .hours td { padding: var(--space-3); border-bottom: 1px solid var(--c-line); text-align: left; } .hours th { color: var(--c-ink-soft); font-weight: 500; } .hours td { color: var(--c-ink); } /* ===== Insurance, premium frosted plan tray (1.22.91) ===== Visual-only glow-up: the plan list sits inside a soft frosted-glass tray, each plan is a clean white healthcare-style card with a blue checkmark badge and a gentle hover lift, and the headline gets a short gold rule. No plan data, markup logic, or Visual Editor behavior changes; the