/* ========================================================================= WebCrafters Haghjoo — theme styles Ported from the approved homepage design (haghjoo-export/index.html). Brand colours are overridable from WebCrafters → Theme Settings → Brand. ========================================================================= */ /* ---------- Tokens ---------- */ :root { --green: #1B4927; --green-dark: #123A1E; --yellow: #F7D04C; --star: #D9A400; --ink: #14201A; --body: #3E4A43; --muted: #5A6660; --on-green: #D9E5DD; --bg: #FFFFFF; --bg-warm: #F6F5F0; --bg-tint: #F4F7F5; --bg-green-tint: #EEF3EF; --placeholder: #DCE5DF; --line: #E4E8E5; --input-line: #CBD4CE; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 24px; --shadow: 0 10px 30px rgba(20, 32, 26, .06); --shadow-lg: 0 18px 50px rgba(20, 32, 26, .08); --container: 1240px; --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-heading: var(--font); --heading-weight: 800; --heading-case: none; --heading-tracking: -.03em; --heading-scale: 1; --body-weight: 500; --ui-case: none; --ui-tracking: 0em; --ui-size: 15px; --section-y: clamp(80px, 9vw, 128px); --gutter: 24px; --header-h: 88px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.has-sticky-header { scroll-padding-top: var(--header-h); } html:has(body.has-sticky-header) { scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; font-family: var(--font); font-weight: 500; font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-dark); } img, video, iframe { max-width: 100%; } img { display: block; height: auto; } input, select, textarea, button { font: inherit; } :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } h1, h2, h3, h4 { font-weight: 800; color: var(--ink); } address { font-style: normal; } ul.pillars, ul.contact-list, ol.process-grid, ol.steps, .checklist, .footer-nav__list, .nav__list, .mobile-nav__list, .legal-nav, .breadcrumbs ol { list-style: none; margin: 0; padding: 0; } .sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--yellow); color: var(--ink); font-weight: 800; border-radius: 8px; } .skip-link:focus { top: 12px; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .container { max-width: var(--container); margin: 0 auto; } .container--narrow { max-width: 780px; } .section { padding: var(--section-y) var(--gutter); } .section--tight, .space-tight { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); } .space-no-top { padding-top: 0; } .space-no-bottom { padding-bottom: 0; } .bg-warm { background: var(--bg-warm); } .bg-tint { background: var(--bg-tint); } .bg-green-tint { background: var(--bg-green-tint); } .bg-white { background: #fff; } /* Elementor: our widgets handle their own layout. */ .elementor .e-con.e-parent:has(> .e-con-inner > [class*="elementor-widget-wch-"]), .elementor .e-con.e-parent:has(> [class*="elementor-widget-wch-"]) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; } .elementor .e-con.e-parent:has(> [class*="elementor-widget-wch-"]) > .e-con-inner { max-width: none; padding: 0; } .elementor-widget[class*="elementor-widget-wch-"] { width: 100%; } /* ---------- Type ---------- */ .eyebrow { display: block; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .h1 { margin: 0; font-weight: 800; font-size: clamp(42px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); } .h2 { margin: 0; font-weight: 800; font-size: clamp(34px, 4vw, 56px); line-height: 1.06; letter-spacing: -.03em; color: var(--ink); } .h3 { margin: 0; font-weight: 800; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.025em; color: var(--ink); } .h1 em, .h2 em, .h3 em { font-style: normal; color: var(--green); } .lead { margin: 0; font-size: 18px; line-height: 1.75; color: var(--body); } .lead p { margin: 0 0 1em; } .lead p:last-child { margin-bottom: 0; } .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; } .section-head .title { display: flex; flex-direction: column; gap: 14px; max-width: 680px; } .section-head > p { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.65; color: var(--body); } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; border: none; cursor: pointer; transition: background .25s, color .25s, transform .25s, box-shadow .25s, border-color .25s; } .btn .wch-icon { width: 18px; height: 18px; flex: none; transition: transform .25s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 32, 26, .18); } .btn:active { transform: translateY(0); box-shadow: none; } .btn:hover .btn-icon--arrow { transform: translateX(4px); } .btn:hover .btn-icon--external { transform: translate(2px, -2px); } .btn:hover .btn-icon--phone { animation: wch-ring .5s ease; } .btn:hover .btn-icon--calendar, .btn:hover .btn-icon--mail { transform: scale(1.12); } @keyframes wch-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } } .btn-green { background: var(--green); color: #fff; } .btn-green:hover { background: var(--green-dark); color: #fff; } .btn-yellow { background: var(--yellow); color: var(--ink); } .btn-yellow:hover { background: #F2C230; color: var(--ink); } .btn-white { background: #fff; color: var(--ink); } .btn-white:hover { background: var(--bg-tint); color: var(--ink); } .btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .btn-outline:hover { background: var(--ink); color: #fff; } .btn-lg { min-height: 58px; padding: 0 30px; font-size: 16px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Top bar + header ---------- */ .topbar { background: var(--green); color: #fff; padding: 0 var(--gutter); } .topbar .container { min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; font-size: 13px; font-weight: 600; padding: 6px 0; } .topbar a { color: #fff; } .topbar a:hover { color: var(--yellow); } .topbar__right { display: flex; gap: 10px; align-items: center; } .topbar .star { color: var(--yellow); } .site-header { position: relative; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); padding: 0 var(--gutter); } .has-sticky-header .site-header { position: sticky; top: 0; } .admin-bar.has-sticky-header .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar.has-sticky-header .site-header { top: 0; } } .site-header > .container { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 14px; color: var(--ink); flex: none; } .brand:hover { color: var(--ink); } .brand-logo { width: auto; max-width: min(280px, 52vw); object-fit: contain; } .brand-mark { width: 46px; height: 46px; background: var(--green); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex: none; } .brand-name { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .brand-sub { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .nav__list { display: flex; gap: clamp(18px, 2.2vw, 32px); font-size: 15px; font-weight: 700; } .nav__list > li { position: relative; } .nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); transition: color .2s; } .nav__list > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; } .nav__list > li > a:hover::after, .nav__list > li > a:focus-visible::after, .nav__list > .current-menu-item > a::after, .nav__list > .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; } .nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a { color: var(--green); } .nav__list .sub-menu { position: absolute; top: 100%; left: -16px; min-width: 220px; list-style: none; margin: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; } .nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav__list .sub-menu a { display: flex; padding: 8px 12px; border-radius: 8px; } .nav__list .sub-menu a:hover { background: var(--bg-tint); } .header-actions { display: flex; align-items: center; gap: 12px; } .header-actions .btn { min-height: 48px; padding: 0 24px; font-size: 14px; } .header-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 800; color: var(--ink); transition: color .2s; } .header-phone:hover { color: var(--green); } .header-phone:hover .wch-icon { animation: wch-ring .5s ease; } .header-phone .wch-icon { width: 18px; height: 18px; color: var(--green); } .menu-btn { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: #fff; border: 1px solid #D5DBD7; border-radius: 8px; color: var(--ink); cursor: pointer; } .menu-btn .wch-icon { width: 22px; height: 22px; } .menu-btn .icon-close, .menu-btn[aria-expanded="true"] .icon-open { display: none; } .menu-btn[aria-expanded="true"] .icon-close { display: block; } .mobile-nav { display: none; flex-direction: column; padding: 8px 0 24px; border-top: 1px solid var(--line); background: #fff; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .mobile-nav.open { display: flex; } .mobile-nav__list a { display: block; padding: 14px 0; font-size: 17px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); transition: color .2s, padding-left .2s; } .mobile-nav__list a:hover, .mobile-nav__list .current-menu-item > a { color: var(--green); padding-left: 8px; } .mobile-nav__list .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; } .mobile-nav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; } @media (max-width: 1180px) { .header-phone span { display: none; } } @media (max-width: 1060px) { .site-header .nav, .header-phone { display: none; } .menu-btn { display: inline-flex; } :root { --header-h: 76px; } } @media (max-width: 560px) { .header-actions .btn { display: none; } .topbar__left { display: none; } .topbar .container { justify-content: center; } } /* ---------- Hero ---------- */ .hero { padding: 24px var(--gutter) 0; } .hero-frame { max-width: 1392px; margin: 0 auto; position: relative; min-height: 720px; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: flex-end; background: #2F5A3C; isolation: isolate; } .hero-frame.is-full-bleed { max-width: none; border-radius: 0; min-height: calc(100vh - var(--header-h) - var(--topbar-h, 0px)); min-height: calc(100svh - var(--header-h) - var(--topbar-h, 0px)); } .hero-frame.is-full-bleed .hero-content { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(32px, 4vw, 56px); } body:has(.topbar) { --topbar-h: 40px; } .hero:has(.is-full-bleed) { padding: 0; } .hero-media { position: absolute; inset: 0; container-type: size; overflow: hidden; } .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-yt { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; } .hero-yt.is-playing { opacity: 1; } .hero-yt iframe { position: absolute; top: 50%; left: 50%; width: calc(max(100cqw, 177.78cqh) * (var(--yt-zoom, 1) + .02)); height: calc(max(100cqh, 56.25cqw) * (var(--yt-zoom, 1) + .02)); transform: translate(-50%, -50%); border: 0; pointer-events: none; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 46, 26, .86) 0%, rgba(18, 46, 26, .62) 42%, rgba(18, 46, 26, .1) 80%); } .hero-content { position: relative; z-index: 2; width: 100%; padding: clamp(28px, 5vw, 72px); display: flex; flex-direction: column; gap: 40px; } .hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 780px; } .pill { align-self: flex-start; padding: 8px 16px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: .04em; border-radius: 999px; } .hero .hero-title { color: #fff; } .hero .hero-title em { font-style: normal; color: var(--yellow); } .hero-text { margin: 0; max-width: 560px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #EAF0EC; } .hero-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .rating-chip { display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px; background: #fff; border-radius: 12px; color: var(--ink); } .rating-chip:hover { color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .rating-chip .score { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .rating-chip small { display: block; font-size: 13px; font-weight: 700; color: var(--body); margin-top: 4px; } .stars { display: inline-flex; gap: 2px; color: var(--star); } .stars .wch-icon { width: 15px; height: 15px; } .stars .is-empty { color: #CDD3CF; } .video-toggle { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: none; color: var(--ink); cursor: pointer; } .video-toggle .wch-icon { width: 14px; height: 14px; } .video-toggle .icon-play, .video-toggle.is-paused .icon-pause { display: none; } .video-toggle.is-paused .icon-play { display: block; } @media (max-width: 700px) { .hero { padding: 12px 12px 0; } .hero-frame:not(.is-full-bleed) { min-height: 620px; } .hero-overlay { background: linear-gradient(0deg, rgba(18, 46, 26, .9) 0%, rgba(18, 46, 26, .55) 55%, rgba(18, 46, 26, .2) 100%); } .hero .btn-row .btn { width: 100%; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero { padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(56px, 6vw, 88px); background: var(--bg-warm); } .page-hero--green { background: var(--green); } .page-hero--green .h1, .page-hero--green .lead { color: #fff; } .page-hero--green .eyebrow { color: var(--yellow); } .page-hero--green .breadcrumbs, .page-hero--green .breadcrumbs a { color: var(--on-green); } .page-hero--green .btn-outline { color: #fff; border-color: #fff; } .page-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); margin-top: 28px; } .page-hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; max-width: 860px; } .page-hero > .container > .page-hero__copy { margin-top: 28px; } .page-hero__title { font-size: clamp(38px, 5vw, 68px); } .page-hero__media { flex: 1 1 360px; min-width: 0; } .page-hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); } .page-hero .post-meta { margin-top: 4px; } .breadcrumbs { font-size: 14px; font-weight: 700; color: var(--muted); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--input-line); } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--green); } .breadcrumbs [aria-current] { color: var(--ink); } /* ---------- Stats ---------- */ .stats { padding: 40px var(--gutter) 0; } .stats.space-normal { padding-top: var(--section-y); padding-bottom: var(--section-y); } .stats.space-tight { padding-bottom: 0; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; } .stat { display: flex; flex-direction: column-reverse; padding: 28px; background: var(--bg-tint); border-radius: var(--radius); } .bg-tint .stat, .bg-warm .stat { background: #fff; } .stat dd { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--green); } .stat dt { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--body); } /* ---------- Service tabs ---------- */ .wch-tabs { display: flex; flex-direction: column; gap: 24px; } .tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--bg-tint); border-radius: var(--radius); align-self: flex-start; } .tab { min-height: 52px; padding: 0 26px; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--body); font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; } .tab:hover { color: var(--green); } .tab[aria-selected="true"] { background: var(--green); color: #fff; font-weight: 800; } .tab-panel { display: flex; flex-wrap: wrap; gap: 48px; padding: clamp(28px, 4vw, 52px); border: 1px solid var(--line); border-radius: var(--radius-lg); } .tab-panel[hidden] { display: none; } .tab-copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; } .tab-copy__text { display: flex; flex-direction: column; gap: 18px; } .tab-copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--body); max-width: 520px; } .steps { flex: 1 1 440px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .steps li { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--bg-tint); border-radius: var(--radius); } .steps .num { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .steps b { font-size: 17px; font-weight: 800; } .steps span:not(.num) { font-size: 15px; line-height: 1.55; color: #4A5650; } @media (max-width: 600px) { .tabs { align-self: stretch; } .tab { flex: 1 1 40%; padding: 0 12px; } } /* ---------- About ---------- */ .about > .container { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 88px); align-items: center; } .about--img-right > .container { flex-direction: row-reverse; } .about-media { flex: 1 1 380px; min-width: 0; position: relative; } .portrait { aspect-ratio: 4 / 5; width: 100%; background: var(--placeholder); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: flex-end; font-size: 13px; font-weight: 700; color: var(--body); } .portrait > span { padding: 28px; } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; } .broker-card { position: absolute; right: -12px; bottom: 40px; background: var(--green); border-radius: var(--radius); padding: 20px 24px; max-width: 250px; box-shadow: 0 18px 40px rgba(20, 32, 26, .18); } .about--img-right .broker-card { right: auto; left: -12px; } .broker-card small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); } .broker-card strong { display: block; font-size: 18px; font-weight: 800; color: #fff; margin: 4px 0; } .broker-card span { font-size: 14px; color: var(--on-green); line-height: 1.5; } .about-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .pillar { background: #fff; border-radius: var(--radius); padding: 22px; border-top: 4px solid var(--yellow); } .bg-white .pillar { background: var(--bg-tint); } .pillar b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 8px; } .pillar span { font-size: 15px; line-height: 1.55; color: #4A5650; } .about-copy .btn { align-self: flex-start; } @media (max-width: 600px) { .broker-card, .about--img-right .broker-card { right: 12px; left: auto; bottom: 16px; } } /* ---------- Valuation ---------- */ .valuation { padding-left: var(--gutter); padding-right: var(--gutter); } .valuation-card { border-radius: var(--radius-xl); background: var(--green); padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; } .valuation-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .valuation-copy .eyebrow { color: var(--yellow); } .valuation-copy .h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); } .valuation-copy .h2 em { color: var(--yellow); } .valuation-copy p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--on-green); } .valuation-card > .form { flex: 1 1 460px; min-width: 0; } /* ---------- Forms ---------- */ .form { display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: 16px; padding: 24px; } .form-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .form-row { display: flex; flex-wrap: wrap; gap: 14px; } .field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; } .field--wide { flex: 2 1 240px; } .field label { font-size: 14px; font-weight: 800; color: var(--ink); } .field label span { font-weight: 500; color: var(--muted); } .field input, .field select, .field textarea, .newsletter-form input { width: 100%; min-height: 54px; padding: 0 16px; background: var(--bg-tint); border: 1px solid var(--input-line); border-radius: var(--radius-sm); color: var(--ink); font-size: 16px; } .field textarea { padding: 14px 16px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus, .newsletter-form input:focus { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--green); } .form-note { font-size: 14px; color: var(--muted); } .form-status { margin: 0; padding: 14px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; } .form-status.is-success { background: #E5F1E8; color: var(--green-dark); } .form-status.is-error { background: #FBEAEA; color: #8A1F1F; } /* Gravity Forms — match the design */ .form--gf .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 16px; grid-column-gap: 14px; } .form--gf .gform_wrapper .gfield_label, .form--gf .gform_wrapper legend.gfield_label { font-size: 14px !important; font-weight: 800 !important; color: var(--ink); margin-bottom: 8px !important; } .form--gf .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]), .form--gf .gform_wrapper select, .form--gf .gform_wrapper textarea { min-height: 54px; padding: 0 16px !important; background: var(--bg-tint); border: 1px solid var(--input-line) !important; border-radius: var(--radius-sm) !important; font-size: 16px !important; color: var(--ink); } .form--gf .gform_wrapper textarea { padding: 14px 16px !important; } .form--gf .gform_wrapper .gform_footer { margin: 16px 0 0 !important; padding: 0 !important; } .form--gf .gform_wrapper .gform_button { display: inline-flex; align-items: center; gap: 10px; transition: transform .25s, box-shadow .25s, background .25s; min-height: 54px; padding: 0 26px !important; border: 0; border-radius: var(--radius-sm) !important; background: var(--green) !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; cursor: pointer; } .form--valuation.form--gf .gform_button, .valuation .form--gf .gform_button { background: var(--yellow) !important; color: var(--ink) !important; } .newsletter .form--gf { background: none; padding: 0; flex: 1 1 420px; } .newsletter .form--gf .gform_wrapper form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .newsletter .form--gf .gform_body { flex: 1 1 240px; } .newsletter .form--gf .gform_footer { margin: 0 !important; } .newsletter .form--gf input[type=email] { background: #fff !important; } /* ---------- Process ---------- */ .process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .process-card { padding: 30px 28px 34px; border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; background: #fff; } .process-card strong { font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--green); } .process-card h3 { margin: 0; font-size: 20px; font-weight: 800; } .process-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5650; } /* ---------- Reviews ---------- */ .reviews .section-head { margin-bottom: 48px; } .rating-box { display: flex; align-items: center; gap: 22px; padding: 22px 26px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); } .bg-white .rating-box { background: var(--bg-tint); box-shadow: none; } .rating-box .score { font-size: 54px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .rating-box .stars .wch-icon { width: 18px; height: 18px; } .rating-box b { display: block; font-size: 15px; font-weight: 800; margin: 6px 0; } .rating-box a { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } [data-wch-carousel].is-ready .review-grid { grid-template-columns: repeat(var(--per, 3), minmax(0, 1fr)); } [data-wch-carousel].is-ready .review[hidden] { display: none; } .review { margin: 0; background: #fff; border-radius: 18px; padding: 32px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 300px; box-shadow: var(--shadow); } .bg-white .review { background: var(--bg-tint); box-shadow: none; } .review-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); } .review-top .stars .wch-icon { width: 16px; height: 16px; } .review blockquote { margin: 18px 0 0; font-size: 18px; font-weight: 600; line-height: 1.55; } .review figcaption { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid #ECEFEC; } .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; flex: none; } .review figcaption b { display: block; font-size: 16px; font-weight: 800; } .review figcaption small { font-size: 13px; font-weight: 600; color: var(--muted); } .review-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; } .dots { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #4A5650; } .dot { width: 8px; height: 8px; border-radius: 4px; background: #C3CCC6; transition: width .2s; } .dot.active { width: 36px; background: var(--green); } .arrows { display: flex; flex-wrap: wrap; gap: 10px; } .arrow { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; border: 2px solid var(--ink); color: var(--ink); } .arrow.next { background: var(--green); border-color: var(--green); color: #fff; } .arrow .wch-icon { width: 20px; height: 20px; } .arrows .btn { min-height: 52px; padding: 0 22px; } /* ---------- Posts / insights ---------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px 24px; } .post__link { display: flex; flex-direction: column; gap: 16px; color: var(--ink); } .post__link:hover { color: var(--ink); } .post-thumb { aspect-ratio: 16 / 10; width: 100%; background: var(--placeholder); border-radius: 16px; overflow: hidden; display: block; } .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .post__link:hover .post-thumb img { transform: scale(1.04); } .post-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); } .tag { padding: 5px 10px; background: #FFF4CC; color: var(--ink); border-radius: 999px; } .post__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; transition: color .2s; } .post__link:hover .post__title { color: var(--green); } .newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; background: var(--bg-tint); border-radius: 18px; margin-top: 44px; } .newsletter__copy { flex: 1 1 320px; } .newsletter b { display: block; font-size: 20px; font-weight: 800; } .newsletter p { margin: 6px 0 0; font-size: 15px; color: #4A5650; } .newsletter-form { flex: 1 1 420px; display: flex; flex-wrap: wrap; gap: 10px; } .newsletter-form input { flex: 1 1 240px; width: auto; background: #fff; } .newsletter-form .form-status { flex-basis: 100%; } .empty-note { color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--bg-tint); color: var(--ink); font-weight: 700; font-size: 15px; } .chips a:hover { background: var(--placeholder); } .chips a[aria-current] { background: var(--green); color: #fff; } .pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; } .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--bg-tint); color: var(--ink); font-weight: 800; } .nav-links .page-numbers.current { background: var(--green); color: #fff; } /* ---------- Contact ---------- */ .contact > .container { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 88px); } .contact-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .contact-copy .h2 { font-size: clamp(36px, 4.4vw, 60px); } .contact-list { display: flex; flex-direction: column; gap: 12px; } .contact-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border-radius: var(--radius); color: var(--ink); } a.contact-item:hover { color: var(--ink); box-shadow: var(--shadow); } .bg-white .contact-item { background: var(--bg-tint); } .contact-item .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--green); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; flex: none; } .contact-item .wch-icon { width: 20px; height: 20px; } .contact-item small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); } .contact-item b { font-size: 19px; font-weight: 800; word-break: break-word; } .contact-item b.is-address { font-size: 16px; line-height: 1.45; } .contact > .container > .form { flex: 1 1 480px; min-width: 0; border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lg); align-self: flex-start; } /* ---------- FAQ ---------- */ .faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; } .faq-grid > .title { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-h) + 24px); } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .faq-q { display: block; color: var(--ink); margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; } .faq-item summary .wch-icon { flex: none; width: 22px; height: 22px; color: var(--green); transition: transform .2s; } .faq-item[open] summary .wch-icon { transform: rotate(45deg); } .faq-answer { padding: 0 24px 22px; color: var(--body); line-height: 1.7; } .faq-answer > :first-child { margin-top: 0; } .faq-answer > :last-child { margin-bottom: 0; } @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid > .title { position: static; } } /* ---------- Text + image ---------- */ .content-block > .container { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 6vw, 88px); } .content-block.img-left > .container { flex-direction: row-reverse; } .content-block__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .content-block.is-narrow .content-block__copy { max-width: 780px; margin: 0 auto; } .content-block__copy .btn { align-self: flex-start; } .content-block__media { flex: 1 1 380px; min-width: 0; } .content-block__media img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; } /* ---------- CTA band ---------- */ .cta { padding-left: var(--gutter); padding-right: var(--gutter); } .cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-xl); } .cta-card--green { background: var(--green); } .cta-card--green .eyebrow { color: var(--yellow); } .cta-card--green .h2 { color: #fff; } .cta-card--green .h2 em { color: var(--yellow); } .cta-card--green p { color: var(--on-green); } .cta-card--tint { background: var(--bg-tint); } .cta-card--tint .btn-white { background: #fff; border: 2px solid var(--ink); } .cta-card__copy { flex: 1 1 460px; display: flex; flex-direction: column; gap: 14px; } .cta-card__copy .h2 { font-size: clamp(30px, 3.4vw, 46px); } .cta-card__copy p { margin: 0; font-size: 17px; line-height: 1.65; max-width: 620px; } /* ---------- Booking ---------- */ .booking-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .booking-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--header-h) + 24px); } .booking-title { font-size: clamp(30px, 3.2vw, 44px); } .checklist { display: flex; flex-direction: column; gap: 12px; } .checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--body); } .checklist .wch-icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--yellow); color: var(--ink); margin-top: 1px; } .booking-call { margin: 0; font-weight: 700; } .booking-widget { min-height: 420px; padding: clamp(16px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); } .booking-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } @media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } .booking-aside { position: static; } } /* ---------- Prose (blog, legal, rich text) ---------- */ .prose { font-size: 18px; line-height: 1.8; color: var(--body); } .prose > :first-child { margin-top: 0; } .prose h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; margin: 1.8em 0 .6em; } .prose h3 { font-size: 22px; line-height: 1.3; margin: 1.6em 0 .5em; } .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--yellow); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .35em 0; } .prose li::marker { color: var(--green); font-weight: 800; } .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--yellow); font-size: 20px; font-weight: 600; color: var(--ink); } .prose img { border-radius: var(--radius); } .prose table { width: 100%; border-collapse: collapse; font-size: 16px; } .prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .rich > :first-child { margin-top: 0; } .rich > :last-child { margin-bottom: 0; } .post-cover { margin: 0 0 40px; } .post-cover img { width: 100%; border-radius: var(--radius-lg); } .author-box { display: flex; gap: 20px; align-items: flex-start; margin: 56px 0 32px; padding: 28px; background: var(--bg-warm); border-radius: var(--radius-lg); } .author-box b { font-size: 18px; } .author-box p { margin: 4px 0 16px; color: var(--body); } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .post-navigation a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); height: 100%; } .post-navigation .nav-next a { text-align: right; } .post-navigation small { color: var(--muted); font-weight: 700; } .search-form { display: flex; gap: 10px; } .search-form label { flex: 1; } .search-form .search-field { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid var(--input-line); border-radius: var(--radius-sm); background: var(--bg-tint); font-size: 16px; } .search-form .search-submit { min-height: 54px; padding: 0 22px; border: 0; border-radius: var(--radius-sm); background: var(--green); color: #fff; font-weight: 800; cursor: pointer; } /* ---------- Footer ---------- */ .site-footer { background: var(--green); color: #fff; padding: 64px var(--gutter) 28px; } .site-footer > .container { display: flex; flex-direction: column; gap: 40px; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; } .footer-brand { flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; gap: 18px; } .brand--footer, .brand--footer:hover { color: #fff; } .brand--footer .brand-mark { background: var(--yellow); color: var(--green); width: 44px; height: 44px; } .brand--footer .brand-logo { max-width: 280px; height: auto !important; max-height: 44px; } .footer-brand p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--on-green); } .social { display: flex; gap: 10px; } .social a { width: 46px; height: 46px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .12); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .2s; } .social a:hover { background: var(--yellow); color: var(--green); } .footer-nav { flex: 2 1 480px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; } .footer-nav__title { margin: 0 0 14px; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); } .footer-nav__list { display: flex; flex-direction: column; gap: 10px; } .footer-nav__list a, .footer-nav__list span, .footer-nav__list address { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.6; } .footer-nav__list a:hover { color: var(--yellow); } .footer-disclosure { margin: 0; font-size: 13px; line-height: 1.7; color: var(--on-green); max-width: 920px; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; color: var(--on-green); } .legal-nav { display: flex; flex-wrap: wrap; gap: 18px; } .legal-nav a { color: var(--on-green); } .legal-nav a:hover { color: #fff; } .footer-credit { margin: -16px 0 0; font-size: 12px; letter-spacing: .02em; color: rgba(217, 229, 221, .7); } .footer-credit a { color: rgba(217, 229, 221, .9); font-weight: 700; } .footer-credit a:hover { color: var(--yellow); } /* ---------- LatePoint (booking) ---------- */ .latepoint-w, .latepoint-lightbox-w, .latepoint-booking-form-element-w { --latepoint-brand-primary: var(--green); --latepoint-body-color: var(--body); --latepoint-headings-color: var(--ink); --latepoint-color-text-faded: var(--muted); --latepoint-border-radius: 10px; --latepoint-border-radius-sm: 6px; --latepoint-border-radius-md: 14px; --latepoint-border-radius-lg: 20px; font-family: var(--font) !important; } .latepoint-w *, .latepoint-lightbox-w * { font-family: var(--font) !important; } .latepoint-lightbox-w .latepoint-lightbox-i { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(20, 32, 26, .3); } .latepoint-lightbox-shadow { background: rgba(18, 46, 26, .55) !important; backdrop-filter: blur(4px); } /* Every appointment is free: hide prices, totals and payment details. */ .latepoint-w .os-item-price, .latepoint-w .os-item-price-w, .latepoint-w .os-price-breakdown-w, .latepoint-w .summary-price-breakdown-wrapper, .latepoint-w .os-summary-line-price, .latepoint-w .pb-amount, .latepoint-w .total-amount, .latepoint-w .os-item-price-label, .latepoint-w .os-payment-info-w, .latepoint-w .invoice-link, .latepoint-w .os-invoice-w { display: none !important; } .booking-widget .latepoint-w { box-shadow: none; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================================= Typography system — driven by WebCrafters → Theme Settings → Typography ========================================================================= */ body { font-weight: var(--body-weight); } .lead, .hero-text, .tab-copy p, .prose { font-weight: var(--body-weight); } /* Display headings */ .h1, .h2, .h3, .prose h2, .prose h3, h1, h2, h3, .feature-card__title, .area-card__title, .areas__title, .faq-item summary .faq-q { font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking); } .h1 { font-size: calc(clamp(42px, 5.6vw, 82px) * var(--heading-scale)); line-height: 1.02; } .h2 { font-size: calc(clamp(34px, 4vw, 56px) * var(--heading-scale)); line-height: 1.06; } .h3 { font-size: calc(clamp(28px, 2.8vw, 40px) * var(--heading-scale)); line-height: 1.1; } .page-hero__title { font-size: calc(clamp(38px, 5vw, 68px) * var(--heading-scale)); } .valuation-copy .h2, .cta-card__copy .h2 { font-size: calc(clamp(30px, 3.4vw, 46px) * var(--heading-scale)); } .contact-copy .h2 { font-size: calc(clamp(36px, 4.4vw, 60px) * var(--heading-scale)); } .booking-title { font-size: calc(clamp(30px, 3.2vw, 44px) * var(--heading-scale)); } .prose h2 { font-size: calc(clamp(26px, 2.6vw, 34px) * var(--heading-scale)); } /* Card titles and labels: heading font, normal case for readability */ .steps b, .pillar b, .process-card h3, .faq-item summary .faq-q, .post__title, .newsletter b, .form-title, .contact-item b, .review figcaption b, .brand-name, .rating-box b, .broker-card strong, .author-box b { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: 0; text-transform: none; } /* Numbers */ .stat dd, .process-card strong, .rating-chip .score, .rating-box .score, .steps .num { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: 0; } /* Buttons, navigation, tabs, eyebrows */ .btn, .tab, .nav__list, .mobile-nav__list a, .pill, .eyebrow, .footer-nav__title, .broker-card small, .chips a, .form--gf .gform_wrapper .gform_button { font-family: var(--font-heading); } .btn, .form--gf .gform_wrapper .gform_button { text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: var(--ui-size); font-weight: var(--heading-weight); } .btn-lg { font-size: calc(var(--ui-size) + 1px); } .nav__list { text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: calc(var(--ui-size) - 1px); font-weight: var(--heading-weight); } .tab { text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: var(--ui-size); font-weight: var(--heading-weight); } .eyebrow { font-weight: var(--heading-weight); letter-spacing: .1em; } .pill { font-weight: var(--heading-weight); text-transform: var(--ui-case); letter-spacing: max(.04em, var(--ui-tracking)); font-size: 13px; } .header-actions .btn { font-size: calc(var(--ui-size) - 1px); } /* ---------- Instagram feed ---------- */ .instagram .section-head { align-items: center; } .instagram .section-head .title { max-width: 560px; } .ig-intro { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--body); } .ig-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; } .ig-profile__id { display: flex; align-items: center; gap: 12px; color: var(--ink); } .ig-profile__id:hover { color: var(--green); } .ig-profile__id b { display: block; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 16px; } .ig-profile__id small { display: block; font-size: 13px; color: var(--muted); } .ig-ring { display: inline-flex; padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, #F7D04C, #E1306C, #833AB4, #F7D04C); } .ig-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 3px solid #fff; background: #fff; } .ig-avatar--mono { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--yellow); font-weight: 800; font-size: 15px; } .btn-ig { min-height: 48px; padding: 0 22px; } .ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ig-grid--mosaic .is-big { grid-column: span 2; grid-row: span 2; } .ig-grid--mosaic .is-big a { height: 100%; } .ig-tile a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--placeholder); } .ig-tile img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s; } .ig-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px; color: #fff; background: linear-gradient(180deg, rgba(18, 46, 26, 0) 35%, rgba(18, 46, 26, .85) 100%); opacity: 0; transition: opacity .35s; } .ig-overlay__icon { width: 26px; height: 26px; } .ig-overlay__text { font-size: 14px; line-height: 1.5; font-weight: 600; } .is-big .ig-overlay__text { font-size: 16px; } .ig-tile a:hover img, .ig-tile a:focus-visible img { transform: scale(1.07); } .ig-tile a:hover .ig-overlay, .ig-tile a:focus-visible .ig-overlay { opacity: 1; } .ig-badge { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; } .ig-badge .wch-icon { width: 14px; height: 14px; } @media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ig-profile { border-radius: var(--radius); width: 100%; justify-content: space-between; } } @media (hover: none) { .ig-overlay { opacity: 1; background: linear-gradient(180deg, rgba(18, 46, 26, 0) 60%, rgba(18, 46, 26, .7) 100%); } .ig-overlay__text { display: none; } } /* WebCrafters Calendar inside the Booking widget card */ .booking-widget .wcc-panel--inline { border: 0; box-shadow: none; padding: 0; } /* ---------- Hero achievement badge (e.g. MLS® Medallion Club) ---------- */ .award-badge { position: relative; display: inline-flex; align-items: center; gap: 20px; padding: 16px 26px 16px 16px; border-radius: 20px; color: #fff; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; } .award-badge::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: linear-gradient(120deg, #FCE7A2, #E8B83A 35%, rgba(255, 255, 255, .25) 55%, #E8B83A 80%, #A97A12); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .award-badge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: wch-shine 6s ease-in-out 1.2s infinite; } @keyframes wch-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } } a.award-badge:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .3); } .award-badge__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 216, 119, .45) 0%, rgba(247, 216, 119, .12) 55%, transparent 72%); } .award-badge__mark svg { width: 70px; height: 70px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); } .award-badge__mark.has-logo { width: auto; height: auto; min-width: 76px; max-width: 140px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 4px rgba(247, 216, 119, .35); } .award-badge__logo { display: block; max-height: 60px; width: auto; } .award-badge__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .award-badge__text small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #F7D877; } .award-badge__text strong { font-family: var(--font-heading); font-size: clamp(20px, 1.9vw, 27px); font-weight: var(--heading-weight); letter-spacing: -.01em; color: #fff; } .award-badge__text > span { font-size: 14px; font-weight: 600; color: #E6EEE9; } .award-badge__year { align-self: stretch; display: inline-flex; align-items: center; margin-left: 4px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .25); font-family: var(--font-heading); font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #F7D877; white-space: nowrap; } @media (max-width: 560px) { .award-badge { gap: 12px; padding: 12px 16px 12px 12px; } .award-badge__mark { width: 52px; height: 52px; } .award-badge__mark svg { width: 46px; height: 46px; } .award-badge__year { padding-left: 12px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .award-badge::after { animation: none; display: none; } } /* Full-screen hero: keep headline, buttons and badge on the first screen */ .hero-frame.is-full-bleed .hero-content { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(24px, 3vw, 44px); gap: clamp(22px, 3vh, 36px); } .hero-frame.is-full-bleed .hero-copy { max-width: 940px; gap: clamp(16px, 2.4vh, 24px); } .hero-frame.is-full-bleed .hero-text { max-width: 640px; } @media (max-height: 820px) and (min-width: 900px) { .hero-frame.is-full-bleed .hero-title { font-size: clamp(40px, 9.2vh, 76px); } } /* Round seal logos (e.g. MLS® Medallion Club) */ .award-badge__mark.has-logo { width: 84px; height: 84px; min-width: 0; max-width: none; padding: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #E8B83A, 0 0 0 6px rgba(247, 216, 119, .25), 0 10px 26px rgba(0, 0, 0, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .award-badge__mark.has-logo .award-badge__logo { width: 100%; height: 100%; max-height: none; border-radius: 50%; object-fit: contain; } a.award-badge:hover .award-badge__mark.has-logo { transform: rotate(-6deg) scale(1.04); } @media (max-width: 560px) { .award-badge__mark.has-logo { width: 64px; height: 64px; } } @media (prefers-reduced-motion: reduce) { a.award-badge:hover .award-badge__mark.has-logo { transform: none; } } /* Full-screen hero: headline block centred vertically, badge row at the bottom */ .hero-frame.is-full-bleed { align-items: stretch; } .hero-frame.is-full-bleed .hero-content { display: grid; grid-template-rows: 1fr auto 1fr; align-content: stretch; width: 100%; } .hero-frame.is-full-bleed .hero-copy { grid-row: 2; } .hero-frame.is-full-bleed .hero-bar { grid-row: 3; align-self: end; } /* Mobile: compact hero so headline, buttons and badge fit one screen and stay centred */ @media (max-width: 700px) { .hero-frame.is-full-bleed .hero-content { padding: 20px 20px 18px; gap: 18px; } .hero-frame.is-full-bleed .hero-copy { gap: 14px; } .hero-frame.is-full-bleed .hero-title { font-size: clamp(32px, 9vw, 40px); line-height: 1.05; } .hero-frame.is-full-bleed .hero-text { font-size: 15.5px; line-height: 1.55; } .hero-frame.is-full-bleed .pill { font-size: 11.5px; padding: 6px 12px; } .hero-frame.is-full-bleed .btn-row { gap: 10px; } .hero-frame.is-full-bleed .btn-row .btn { min-height: 50px; font-size: 15px; } .hero-frame.is-full-bleed .hero-overlay { background: linear-gradient(180deg, rgba(18, 46, 26, .55) 0%, rgba(18, 46, 26, .78) 45%, rgba(18, 46, 26, .9) 100%); } .award-badge { padding: 10px 14px 10px 10px; gap: 12px; } .award-badge__text strong { font-size: 18px; } .award-badge__text small { font-size: 10px; } .award-badge__text > span { font-size: 12.5px; } .award-badge__mark.has-logo { width: 56px; height: 56px; } .video-toggle { width: 44px; height: 44px; } } @media (max-width: 700px) { .hero-frame.is-full-bleed .hero-content { padding: 16px 18px 14px; gap: 14px; } .hero-frame.is-full-bleed .hero-copy { gap: 12px; } .hero-frame.is-full-bleed .hero-text { font-size: 15px; line-height: 1.5; } .hero-frame.is-full-bleed .btn-row .btn { min-height: 48px; } .hero-frame.is-full-bleed .btn-row { gap: 8px; } .award-badge { padding: 8px 14px 8px 8px; } .award-badge__mark.has-logo { width: 52px; height: 52px; } .hero-frame.is-full-bleed .hero-overlay { background: linear-gradient(180deg, rgba(18, 46, 26, .45) 0%, rgba(18, 46, 26, .68) 45%, rgba(18, 46, 26, .82) 100%); } } /* Hero media must always cover the frame (override global max-width / height:auto) */ .hero-yt iframe { max-width: none !important; max-height: none !important; } .hero-media .hero-poster { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; } @media (max-width: 700px) { .hero-frame.is-full-bleed .video-toggle { position: absolute; top: 14px; right: 14px; z-index: 3; } } /* Beat Elementor's ".elementor iframe { width: 100% }" so the video always covers */ .hero .hero-media .hero-yt iframe { width: calc(max(100cqw, 177.78cqh) * (var(--yt-zoom, 1) + .02)) !important; height: calc(max(100cqh, 56.25cqw) * (var(--yt-zoom, 1) + .02)) !important; } /* ===== Full-screen hero v3: true vertical centring in the visible screen ===== */ body { --wpab: 0px; } body.admin-bar { --wpab: 32px; } @media (max-width: 782px) { body.admin-bar { --wpab: 46px; } } .hero-frame.is-full-bleed { --bar-space: clamp(112px, 15vh, 150px); min-height: calc(100vh - var(--header-h) - var(--topbar-h, 0px) - var(--wpab)); min-height: calc(100svh - var(--header-h) - var(--topbar-h, 0px) - var(--wpab)); align-items: stretch; } .hero-frame.is-full-bleed .hero-content { display: flex; flex-direction: column; justify-content: center; padding-top: var(--bar-space); padding-bottom: var(--bar-space); } .hero-frame.is-full-bleed .hero-copy { grid-row: auto; } .hero-frame.is-full-bleed .hero-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 3vh, 36px); grid-row: auto; } @media (max-width: 700px) { .hero-frame.is-full-bleed { --bar-space: 92px; } .hero-frame.is-full-bleed .hero-content { padding-left: 18px; padding-right: 18px; } .hero-frame.is-full-bleed .hero-bar { left: 18px; right: 18px; bottom: 14px; } } /* Short desktop screens (laptops): scale by height so text + badge never collide */ @media (min-width: 701px) and (max-height: 860px) { .hero-frame.is-full-bleed { --bar-space: clamp(104px, 15vh, 128px); } .hero-frame.is-full-bleed .hero-title { font-size: clamp(36px, 7.6vh, 66px); } .hero-frame.is-full-bleed .hero-text { font-size: clamp(15px, 2.1vh, 18px); line-height: 1.55; } .hero-frame.is-full-bleed .hero-copy { gap: clamp(12px, 2vh, 20px); } .hero-frame.is-full-bleed .btn-lg { min-height: 50px; } .hero-frame.is-full-bleed .award-badge { padding: 10px 20px 10px 10px; gap: 14px; } .hero-frame.is-full-bleed .award-badge__mark.has-logo { width: 64px; height: 64px; } .hero-frame.is-full-bleed .award-badge__text strong { font-size: 21px; } .hero-frame.is-full-bleed .hero-bar { bottom: clamp(14px, 2.4vh, 26px); } } /* ===== Full-screen hero v4: text centred in the open space above the badge ===== */ .hero-frame.is-full-bleed .hero-content { display: flex; flex-direction: column; justify-content: flex-start; --edge: clamp(18px, 3vh, 36px); padding-top: var(--edge); padding-bottom: var(--edge); } .hero-frame.is-full-bleed .hero-copy { margin-top: auto; margin-bottom: auto; padding-bottom: var(--edge); } .hero-frame.is-full-bleed .hero-bar { position: static; left: auto; right: auto; bottom: auto; } @media (max-width: 700px) { .hero-frame.is-full-bleed .hero-content { --edge: 16px; padding-left: 18px; padding-right: 18px; } } .hero-frame.is-full-bleed .hero-copy { padding-bottom: 0; } .hero-frame.is-full-bleed .hero-bar { align-self: stretch; } /* ---------- Stats & achievements (v2) ---------- */ .stats--v2 { padding-top: clamp(28px, 4vw, 48px); } .stats-panel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(20, 32, 26, .08); overflow: hidden; position: relative; } .stats-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--yellow) 50%, var(--green)); } .stat2 { display: flex; align-items: center; gap: 18px; padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 30px); position: relative; transition: background .3s; } .stat2 + .stat2::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); } .stat2:hover { background: var(--bg-tint); } .stat2__icon { flex: none; width: 60px; height: 60px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #EEF3EF, #DCE8DF); color: var(--green); box-shadow: inset 0 0 0 1px rgba(27, 73, 39, .08); transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s; } .stat2__icon .wch-icon { width: 28px; height: 28px; } .stat2:hover .stat2__icon:not(.is-logo) { background: var(--green); color: var(--yellow); transform: translateY(-3px) rotate(-4deg); } .stat2__icon.is-logo { width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #E8B83A, 0 8px 20px rgba(20, 32, 26, .12); } .stat2__logo { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; } .stat2:hover .stat2__icon.is-logo { transform: rotate(-6deg) scale(1.05); } .stat2__body { display: flex; flex-direction: column; min-width: 0; } .stat2__value { font-family: var(--font-heading); font-size: clamp(30px, 2.8vw, 40px); font-weight: var(--heading-weight); line-height: 1; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; } .stat2__label { margin-top: 6px; font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: var(--ink); } .stat2__caption { margin-top: 2px; font-size: 13px; color: var(--muted); } @media (max-width: 1100px) { .stats-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat2:nth-child(odd)::before { display: none; } .stat2:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (max-width: 560px) { .stats-panel { grid-template-columns: 1fr; } .stat2::before { display: none; } .stat2 + .stat2 { border-top: 1px solid var(--line); } } /* Hero badge: stacked qualifying years */ .award-badge__years { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 3px; margin-left: 6px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .25); } .award-badge__years span { font-family: var(--font-heading); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; line-height: 1.15; color: #F7D877; } .award-badge__years span:last-child { color: #fff; } @media (max-width: 560px) { .award-badge__years { padding-left: 12px; } .award-badge__years span { font-size: 11px; } } /* Engraved seal icons (match the MLS® Medallion Club mark) */ .stat2__icon.is-seal { width: 66px; height: 66px; border-radius: 50%; background: #FBF8F1; color: #1F2420; box-shadow: 0 0 0 1.5px #1F2420, inset 0 0 0 4px #FBF8F1, inset 0 0 0 5.2px #1F2420, 0 8px 20px rgba(20, 32, 26, .1); } .stat2__icon.is-seal .wch-icon { width: 30px; height: 30px; } .stat2:hover .stat2__icon.is-seal { background: #FBF8F1; color: var(--green); transform: translateY(-3px) rotate(-4deg); box-shadow: 0 0 0 1.5px #B8892A, inset 0 0 0 4px #FBF8F1, inset 0 0 0 5.2px #B8892A, 0 12px 26px rgba(184, 137, 42, .22); } .stat2__icon.is-logo { width: 66px; height: 66px; box-shadow: 0 0 0 1.5px #1F2420, 0 8px 20px rgba(20, 32, 26, .1); } .stat2__caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Footer: MLS® Medallion Club award */ .footer-award { display: flex; align-items: center; gap: 16px; margin-top: 6px; padding: 14px 18px 14px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(247, 216, 119, .35); max-width: 380px; } .footer-award__seal { flex: none; width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #E8B83A, 0 8px 22px rgba(0, 0, 0, .25); } .footer-award__logo { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; } .footer-award__text { display: flex; flex-direction: column; gap: 3px; } .footer-award__text small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .footer-award__text b { font-family: var(--font-heading); font-size: 15px; line-height: 1.3; color: #fff; } .footer-award__years { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .footer-award__years span { padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(247, 216, 119, .55); font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #F7D877; } @media (max-width: 560px) { .award-badge { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; align-items: center; } .award-badge__mark { grid-row: span 2; } .award-badge__text small { font-size: 9.5px; letter-spacing: .08em; } .award-badge__text strong { font-size: 18px; white-space: nowrap; } .award-badge__text > span { font-size: 12px; } .award-badge__years { grid-column: 2; flex-direction: row; gap: 6px; margin: 0; padding: 0; border-left: 0; } .award-badge__years span { font-size: 10.5px; padding: 2px 7px; border: 1px solid rgba(247, 216, 119, .5); border-radius: 999px; } .award-badge__years span:last-child { color: #F7D877; } } /* Stats hover: keep the panel's top line visible + richer effects */ .stats-panel::before { z-index: 3; pointer-events: none; } .stat2 { z-index: 1; transition: background .35s ease; } .stat2::after { content: ""; position: absolute; top: 4px; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, #E8B83A 20%, #F7D877 50%, #E8B83A 80%, transparent); transform: scaleX(0); transform-origin: center; transition: transform .45s cubic-bezier(.2, .8, .2, 1); z-index: 2; } .stat2:hover { background: radial-gradient(120% 90% at 50% 0%, rgba(247, 216, 119, .16), rgba(244, 247, 245, .9) 55%, #fff 100%); } .stat2:hover::after { transform: scaleX(1); } .stat2__value, .stat2__label { transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .3s; } .stat2:hover .stat2__value { transform: translateY(-2px); color: var(--green-dark); } .stat2:hover .stat2__label { color: var(--green); } .stat2__icon.is-logo { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; } .stat2:hover .stat2__icon.is-logo { box-shadow: 0 0 0 1.5px #B8892A, 0 0 0 6px rgba(247, 216, 119, .25), 0 12px 26px rgba(184, 137, 42, .22); } @media (prefers-reduced-motion: reduce) { .stat2::after, .stat2__value, .stat2__label { transition: none; } } /* Stats band: panel centred on a wider background */ .stats.stats--v2 { position: relative; isolation: isolate; padding: clamp(48px, 6vw, 92px) var(--gutter); overflow: hidden; background: radial-gradient(60% 70% at 50% 50%, rgba(247, 216, 119, .18), transparent 70%), linear-gradient(180deg, #F6F5F0 0%, #EEF3EF 100%); } .stats.stats--v2::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(27, 73, 39, .09) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 75%); } .stats.stats--v2 .stats-panel { box-shadow: 0 30px 70px rgba(20, 32, 26, .10), 0 2px 0 rgba(255, 255, 255, .8) inset; } /* ---------- Service tabs v2: icons, sliding pill, animated panels ---------- */ .paths .tabs { position: relative; gap: 6px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 32, 26, .06); } .paths .tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 12px; border-radius: 13px; font-size: 16px; font-weight: 700; color: var(--body); transition: color .35s ease, background .25s ease; } .paths .tab:hover { color: var(--green); background: var(--bg-tint); } .paths .tab__icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #FBF8F1; color: #1F2420; box-shadow: 0 0 0 1.2px currentColor, inset 0 0 0 3px #FBF8F1, inset 0 0 0 4px currentColor; transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .35s, background .35s; } .paths .tab__icon .wch-icon { width: 19px; height: 19px; } .paths .tab[aria-selected="true"] { color: #fff; font-weight: 800; background: var(--green); } .paths .tab[aria-selected="true"] .tab__icon { background: rgba(255, 255, 255, .08); color: var(--yellow); box-shadow: 0 0 0 1.2px currentColor, inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(247, 216, 119, .55); transform: rotate(-8deg) scale(1.05); } /* With JS the green background becomes a pill that slides between tabs. */ .paths .tabs.has-indicator .tab[aria-selected="true"] { background: transparent; } .paths .tabs.has-indicator .tab[aria-selected="true"]:hover { background: transparent; } .tabs__indicator { display: none; } .tabs.has-indicator .tabs__indicator { display: block; position: absolute; top: 0; left: 0; z-index: 0; border-radius: 13px; pointer-events: none; background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 10px 24px rgba(27, 73, 39, .28), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .5s cubic-bezier(.3, 1.25, .45, 1), width .5s cubic-bezier(.3, 1.25, .45, 1), height .4s ease; } .tabs.has-indicator .tabs__indicator::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--yellow); opacity: .9; } .paths .tab-panel { position: relative; overflow: hidden; background: #fff; box-shadow: 0 20px 60px rgba(20, 32, 26, .06); } .tab-panel__mark { position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; color: var(--green); opacity: .045; pointer-events: none; } .tab-panel__mark .wch-icon { width: 100%; height: 100%; } .paths .steps li { position: relative; transition: transform .3s ease, box-shadow .3s ease, background .3s; } .paths .steps li:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px rgba(20, 32, 26, .08); } /* Panel entrance */ @keyframes wch-panel-next { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } } @keyframes wch-panel-prev { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } } @keyframes wch-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes wch-card { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes wch-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes wch-mark { from { opacity: 0; transform: rotate(-25deg) scale(.8); } to { opacity: .045; transform: none; } } .tab-panel.is-entering.from-next { animation: wch-panel-next .55s cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering.from-prev { animation: wch-panel-prev .55s cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering .h3 { animation: wch-rise .6s .08s cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering .tab-copy p { animation: wch-rise .6s .16s cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering .tab-copy .btn-row { animation: wch-rise .6s .24s cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering .steps li { animation: wch-card .55s calc(.18s + var(--i, 0) * .08s) cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering .steps .num { animation: wch-pop .5s calc(.32s + var(--i, 0) * .08s) cubic-bezier(.2, .8, .2, 1) both; } .tab-panel.is-entering .tab-panel__mark { animation: wch-mark .9s .1s cubic-bezier(.2, .8, .2, 1) both; } @media (max-width: 760px) { .paths .tabs { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; } .paths .tab { padding: 0 12px 0 8px; font-size: 15px; min-height: 52px; } .paths .tab__icon { width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { .tabs.has-indicator .tabs__indicator { transition: none; } .tab-panel.is-entering, .tab-panel.is-entering * { animation: none !important; } } /* Tabs: no gold underline or gold ring on the selected tab */ .tabs.has-indicator .tabs__indicator::after { content: none; } .paths .tab[aria-selected="true"] .tab__icon { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 0 0 1.2px rgba(255, 255, 255, .55); transform: none; } /* Split section header: heading left, intro with accent rule right */ .section-head--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(32px, 4vw, 48px); } .section-head--split .title { max-width: none; } .section-intro { position: relative; padding-left: clamp(20px, 2vw, 28px); padding-bottom: 6px; } .section-intro::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--green), var(--yellow)); } .section-intro p { margin: 0; max-width: 520px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: var(--body); } .section-intro p + p { margin-top: 14px; } .section-intro .section-intro__help { font-size: 15px; color: var(--muted); } .section-intro__link { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-weight: 800; color: var(--green); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s, gap .2s; } .section-intro__link .wch-icon { width: 16px; height: 16px; transition: transform .25s; } .section-intro__link:hover { color: var(--green-dark); } .section-intro__link:hover .wch-icon { transform: translateX(4px); } @media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; align-items: start; gap: 18px; } } /* "How can I help?" follows the stats band: less space on top */ .section.paths.space-normal { padding-top: clamp(40px, 4.5vw, 64px); } .section.paths.space-normal { padding-top: clamp(28px, 3vw, 44px); } /* Consistent rhythm: "How can I help?" → Meet Mehrdad */ .section.paths.space-normal { padding-bottom: clamp(44px, 5vw, 72px); } .section.about.space-normal { padding-top: clamp(52px, 6vw, 88px); padding-bottom: clamp(52px, 6vw, 88px); } /* ---------- Home valuation v2: full-width band with real estate pattern ---------- */ .valuation.valuation--full { padding: 0; } .valuation--full > .container { max-width: none; } .valuation--full .valuation-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; min-height: min(86vh, 760px); padding: clamp(64px, 8vw, 120px) max(var(--gutter), calc((100vw - var(--container)) / 2)) clamp(150px, 16vw, 230px); background: radial-gradient(70% 90% at 15% 20%, rgba(247, 208, 76, .10), transparent 60%), linear-gradient(160deg, #1F5530 0%, var(--green) 45%, #123A1E 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .valuation-card { position: relative; isolation: isolate; overflow: hidden; } .valuation-pattern { position: absolute; inset: 0; z-index: -1; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23F7D04C%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20opacity%3D%22.9%22%3E%3Cpath%20d%3D%22M20%2070%2048%2046l28%2024%22/%3E%3Cpath%20d%3D%22M26%2065v31h44V65%22/%3E%3Cpath%20d%3D%22M42%2096V80h12v16%22/%3E%3Cpath%20d%3D%22M60%2054v-9h6v14%22/%3E%3Cpath%20d%3D%22M130%20160l34-28%2034%2028%22/%3E%3Cpath%20d%3D%22M137%20154v38h54v-38%22/%3E%3Cpath%20d%3D%22M150%20168h10v10h-10zM170%20168h10v10h-10z%22/%3E%3Cpath%20d%3D%22M160%20192v-10h10%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2254%22%20r%3D%227%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2254%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M167%2054h22M182%2054v5M187%2054v4%22/%3E%3Cpath%20d%3D%22M28%20156h22v22H28zM39%20156v22M28%20167h22%22/%3E%3Cpath%20d%3D%22M96%20118l14-12%2014%2012M99%20116v14h22v-14%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, transparent 95%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, transparent 95%); } .valuation-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 15vw, 220px); z-index: -1; opacity: .28; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221440%22%20height%3D%22220%22%20viewBox%3D%220%200%201440%20220%22%20fill%3D%22none%22%20stroke%3D%22%23F7D04C%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20150%2090%2092l60%2034%2080-62%2070%2046%2060-30%2090%2058%2070-40%2080%2044%22%20opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M640%20102l60-28%2070%2040%2080-56%2090%2062%2070-30%2080%2044%2090-48%2080%2052%2080-30%20100%2050%22%20opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M0%20220V190h40v-26h26v26h18v-58h30v58h22v-40h24v40h30v-72l20-14%2020%2014v72h26v-30h24v30h30v-96h34v96h20v-44h28v44h26v-64h22v-18h20v18h22v64h30v-36h26v36h24v-80l18-16%2018%2016v80h26v-48h30v48h22v-30h24v30h40v-110h14v-22h8v22h14v110h26v-54h28v54h24v-38h24v38h30v-70h30v70h22v-46h28v46h26v-88h20v-12h14v12h20v88h24v-40h26v40h30v-60h26v60h22v-34h30v34h28v-74h32v74h24v-42h28v42h26v-26h28v26h40v-58h30v58h30V220%22/%3E%3Cpath%20d%3D%22M0%20206h1440%22%20opacity%3D%22.5%22/%3E%3C/svg%3E") center bottom / auto 100% repeat-x; } .valuation-copy .h2 em { font-style: normal; color: var(--yellow); } .valuation--full .valuation-copy .h2 { font-size: clamp(34px, 3.8vw, 54px); } .valuation--full .valuation-copy p { font-size: clamp(17px, 1.3vw, 19px); max-width: 520px; } .valuation-points { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .valuation-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: #fff; } .valuation-points__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(247, 208, 76, .16); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(247, 208, 76, .5); } .valuation-points__icon .wch-icon { width: 15px; height: 15px; } .valuation-form { min-width: 0; } .valuation--full .valuation-form .form { border-radius: 22px; padding: clamp(22px, 3vw, 38px); box-shadow: 0 40px 90px rgba(0, 0, 0, .35); } .valuation-form .form-title { display: block; margin-bottom: 4px; } @media (max-width: 960px) { .valuation--full .valuation-card { grid-template-columns: 1fr; min-height: 0; padding-left: var(--gutter); padding-right: var(--gutter); } } .valuation--full .valuation-card { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(130px, 13vw, 180px); } .valuation--full .form--gf .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 12px; } .valuation--full .form--gf .gform_wrapper .gfield_label { margin-bottom: 6px !important; } .valuation--full .form--gf .gform_wrapper .gfield_required { font-size: 11px; color: #9A6700 !important; } /* Custom select boxes (theme forms + Gravity Forms) */ .field select, .form--gf .gform_wrapper select, .newsletter-form select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px !important; background-color: var(--bg-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B4927' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; transition: border-color .2s, background-color .2s, box-shadow .2s; } .field select:hover, .form--gf .gform_wrapper select:hover { border-color: var(--green) !important; background-color: #fff; box-shadow: 0 4px 14px rgba(27, 73, 39, .08); } .field select:focus, .form--gf .gform_wrapper select:focus { border-color: var(--green) !important; background-color: #fff; outline: 3px solid rgba(247, 208, 76, .6); outline-offset: 1px; } .field select option, .form--gf .gform_wrapper select option { color: var(--ink); background: #fff; } .field input:hover, .field textarea:hover, .form--gf .gform_wrapper input:not([type=submit]):hover, .form--gf .gform_wrapper textarea:hover { border-color: #9DB3A4 !important; } /* ---------- Valuation v3: compact band + Vancouver landmarks ---------- */ .valuation--full .valuation-card { min-height: 0; padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(104px, 10vw, 150px); gap: clamp(28px, 4vw, 64px); } .valuation--full .valuation-copy { gap: 12px; } .valuation--full .valuation-copy .h2 { font-size: clamp(30px, 3.2vw, 46px); } .valuation--full .valuation-copy p { font-size: 17px; } .valuation-points { gap: 9px; margin-top: 6px; } .valuation-points li { font-size: 15px; } .valuation--full .valuation-form .form { padding: clamp(20px, 2.4vw, 30px); gap: 12px; } .valuation--full .valuation-form .form-title { font-size: 21px; } .valuation--full .form--gf .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 10px; grid-column-gap: 12px; } .valuation--full .form--gf .gform_wrapper input:not([type=submit]), .valuation--full .form--gf .gform_wrapper select { min-height: 46px; } .valuation--full .form--gf .gform_wrapper .gform_footer { margin-top: 12px !important; } .valuation--full .field input, .valuation--full .field select { min-height: 46px; } .valuation-pattern { opacity: .13; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%20fill%3D%22none%22%20stroke%3D%22%23F7D04C%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Cpath%20d%3D%22M14%2074h132%22/%3E%3Cpath%20d%3D%22M48%2074V36M112%2074V36%22/%3E%3Cpath%20d%3D%22M44%2036h8M108%2036h8%22/%3E%20%3Cpath%20d%3D%22M14%2070%2048%2038Q80%2070%20112%2038L146%2070%22/%3E%20%3Cpath%20d%3D%22M58%2074v-24M68%2074v-18M80%2074v-15M92%2074v-18M102%2074v-24M30%2074v-12M130%2074v-12%22/%3E%20%3Cpath%20d%3D%22M10%2082q8-3%2016%200t16%200%2016%200%2016%200%2016%200%2016%200%2016%200%2016%200%2016%200%22/%3E%20%20%3Cpath%20d%3D%22M190%20128l9-20%209%2020%209-24%209%2024%209-20%209%2020%209-16%209%2016%22/%3E%3Cpath%20d%3D%22M186%20128h80%22/%3E%3Cpath%20d%3D%22M190%20134h72%22/%3E%20%3Cpath%20d%3D%22M182%20142q7-3%2014%200t14%200%2014%200%2014%200%2014%200%2014%200%22/%3E%20%20%3Cpath%20d%3D%22M260%20230v-62h12v62%22/%3E%3Cpath%20d%3D%22M252%20166h28l-4-8h-20z%22/%3E%3Cpath%20d%3D%22M266%20158v-12%22/%3E%3Cpath%20d%3D%22M262%20182h8M262%20196h8M262%20210h8%22/%3E%20%20%3Cpath%20d%3D%22M40%20286v-56h20v56%22/%3E%3Cpath%20d%3D%22M36%20230h28l-14-12z%22/%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%22244%22%20r%3D%225%22/%3E%3Cpath%20d%3D%22M50%20244v-3M50%20244l2%201%22/%3E%3Cpath%20d%3D%22M44%20286v-24h12v24%22/%3E%3Cpath%20d%3D%22M50%20218v-6M46%20214q4-6%208%200%22/%3E%20%20%3Cpath%20d%3D%22M110%20222l14-20%209%2010%209-16%209%2014%2022%2012%22/%3E%3Cpath%20d%3D%22M118%20214l6-4%204%204M138%20204l4-4%204%206%22/%3E%20%20%3Cpath%20d%3D%22M190%2052h34l6-6%22/%3E%3Cpath%20d%3D%22M200%2052l-6-10h8l8%2010%22/%3E%3Cpath%20d%3D%22M196%2058h28M200%2052v6M218%2052v6%22/%3E%3Cpath%20d%3D%22M226%2046l8-2%22/%3E%20%20%3Cpath%20d%3D%22M150%20300h40l-6%208h-28z%22/%3E%3Cpath%20d%3D%22M170%20300v-36l16%2030z%22/%3E%3Cpath%20d%3D%22M168%20270l-12%2026h12%22/%3E%20%20%3Cpath%20d%3D%22M228%20300l10-18%2010%2018zM232%20290l6-11%206%2011M238%20300v6%22/%3E%3Cpath%20d%3D%22M286%20300l8-14%208%2014zM290%20292l4-8%204%208M294%20300v5%22/%3E%20%3Cpath%20d%3D%22M96%20300l8-14%208%2014zM104%20300v5%22/%3E%20%3C/svg%3E"); background-size: 320px 320px; } .valuation-skyline { height: clamp(90px, 10vw, 150px); opacity: .32; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221440%22%20height%3D%22200%22%20viewBox%3D%220%200%201440%20200%22%20fill%3D%22none%22%20stroke%3D%22%23F7D04C%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Cpath%20opacity%3D%22.55%22%20d%3D%22M0%20120%2070%2086%20130%20104%20200%2060%20250%2082%20300%2040%20318%2058%20336%2036%20380%2074%20450%2092%20520%2058%20600%2096%20680%2062%20760%2098%20840%2056%20920%2088%201000%2050%201080%2092%201160%2064%201240%2096%201320%2070%201440%20100%22/%3E%20%20%3Cpath%20d%3D%22M30%20168h330%22/%3E%3Cpath%20d%3D%22M110%20168V104M270%20168V104%22/%3E%3Cpath%20d%3D%22M104%20104h12M264%20104h12%22/%3E%20%3Cpath%20d%3D%22M30%20164%20110%20106Q190%20158%20270%20106L360%20164%22/%3E%20%3Cpath%20d%3D%22M130%20168v-46M150%20168v-36M170%20168v-31M190%20168v-30M210%20168v-31M230%20168v-36M250%20168v-46M60%20168v-22M80%20168v-38M300%20168v-38M330%20168v-20%22/%3E%20%20%3Cpath%20d%3D%22M372%20176l8-16%208%2016zM386%20176l9-18%209%2018zM402%20176l7-14%207%2014z%22/%3E%20%20%3Cpath%20d%3D%22M430%20176v-62h26v62M436%20124h14M436%20136h14M436%20148h14%22/%3E%20%3Cpath%20d%3D%22M462%20176v-90h22v90M468%2098h10M468%20112h10M468%20126h10%22/%3E%20%3Cpath%20d%3D%22M490%20176v-48h30v48%22/%3E%20%3Cpath%20d%3D%22M526%20176v-104l12-10%2012%2010v104M532%2088h12M532%20102h12%22/%3E%20%3Cpath%20d%3D%22M556%20176v-70h24v70%22/%3E%20%3Cpath%20d%3D%22M586%20176v-118h28v118M592%2072h16M592%2086h16M592%20100h16%22/%3E%20%3Cpath%20d%3D%22M620%20176v-56h22v56%22/%3E%20%3Cpath%20d%3D%22M648%20176v-86h26v86%22/%3E%20%3Cpath%20d%3D%22M680%20176v-132h20l8%2010v122M686%2060h14M686%2076h14%22/%3E%20%3Cpath%20d%3D%22M714%20176v-64h28v64%22/%3E%20%3Cpath%20d%3D%22M748%20176v-96h24v96%22/%3E%20%3Cpath%20d%3D%22M778%20176v-50h30v50%22/%3E%20%3Cpath%20d%3D%22M814%20176v-110h26v110M820%2080h14M820%2094h14%22/%3E%20%20%3Cpath%20d%3D%22M852%20176v-96h16v96%22/%3E%3Cpath%20d%3D%22M842%2078h36l-5-10h-26z%22/%3E%3Cpath%20d%3D%22M860%2068v-20%22/%3E%20%3Cpath%20d%3D%22M880%20176v-74h26v74%22/%3E%3Cpath%20d%3D%22M912%20176v-54h24v54%22/%3E%3Cpath%20d%3D%22M942%20176v-82h22v82%22/%3E%3Cpath%20d%3D%22M970%20176v-44h28v44%22/%3E%20%20%3Cpath%20d%3D%22M1010%20172l14-30%2014%2030%2014-36%2014%2036%2014-30%2014%2030%2014-24%2014%2024%22/%3E%3Cpath%20d%3D%22M1004%20172h130%22/%3E%20%20%3Cpath%20d%3D%22M1160%20176v-40h22v40M1188%20176v-58h24v58M1218%20176v-34h26v34M1250%20176v-48h20v48%22/%3E%20%3Cpath%20d%3D%22M1290%20176l8-16%208%2016zM1306%20176l10-20%2010%2020zM1324%20176l8-15%208%2015z%22/%3E%20%20%3Cpath%20d%3D%22M1370%20178h36l-5%206h-26z%22/%3E%3Cpath%20d%3D%22M1388%20178v-30l14%2026z%22/%3E%20%3Cpath%20opacity%3D%22.6%22%20d%3D%22M0%20186q12-4%2024%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200t24%200%22/%3E%20%3C/svg%3E"); background-size: auto 100%; background-repeat: repeat-x; background-position: center bottom; } /* Gravity Forms (Orbital/Foundation theme) spacing inside our forms */ .form--gf .gform_wrapper { --gf-form-gap-y: 14px; --gf-form-gap-x: 12px; --gf-label-space-primary: 6px; --gf-form-footer-margin-y-start: 14px; } .valuation--full .form--gf .gform_wrapper { --gf-form-gap-y: 10px; } .form--gf .gform_wrapper .gfield_description:empty, .form--gf .gform_wrapper .gfield_validation_message:empty { display: none; } /* Valuation background: back to the home pattern (Vancouver skyline stays at the bottom) */ .valuation-pattern { opacity: .12; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22%23F7D04C%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20opacity%3D%22.9%22%3E%3Cpath%20d%3D%22M20%2070%2048%2046l28%2024%22/%3E%3Cpath%20d%3D%22M26%2065v31h44V65%22/%3E%3Cpath%20d%3D%22M42%2096V80h12v16%22/%3E%3Cpath%20d%3D%22M60%2054v-9h6v14%22/%3E%3Cpath%20d%3D%22M130%20160l34-28%2034%2028%22/%3E%3Cpath%20d%3D%22M137%20154v38h54v-38%22/%3E%3Cpath%20d%3D%22M150%20168h10v10h-10zM170%20168h10v10h-10z%22/%3E%3Cpath%20d%3D%22M160%20192v-10h10%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2254%22%20r%3D%227%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2254%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M167%2054h22M182%2054v5M187%2054v4%22/%3E%3Cpath%20d%3D%22M28%20156h22v22H28zM39%20156v22M28%20167h22%22/%3E%3Cpath%20d%3D%22M96%20118l14-12%2014%2012M99%20116v14h22v-14%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; } /* How it works v2: one connected panel, matching the stats bar and "How can I help?" */ .section.process.process--v2 { padding-top: clamp(56px, 6vw, 92px); padding-bottom: clamp(56px, 6vw, 92px); } .process-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; --cols: var(--n, 4); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); container-type: inline-size; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(20, 32, 26, .10); overflow: hidden; isolation: isolate; } .process-track::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--green), var(--yellow) 50%, var(--green)); } .process-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 32px) clamp(30px, 3vw, 42px); transition: background .35s ease; } .process-step + .process-step::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); } /* Dashed path linking the seals */ .process-step:not(:last-child) .process-step__mark::after { content: ""; position: absolute; top: 50%; left: calc(100% + 14px); width: calc(100cqw / var(--cols) - 66px - 28px); height: 0; border-top: 1.5px dashed rgba(184, 137, 42, .45); z-index: -1; } .process-step::after { content: ""; position: absolute; top: 4px; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, #E8B83A 20%, #F7D877 50%, #E8B83A 80%, transparent); transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); z-index: 2; } .process-step:hover { background: radial-gradient(120% 90% at 50% 0%, rgba(247, 216, 119, .16), rgba(244, 247, 245, .9) 55%, #fff 100%); } .process-step:hover::after { transform: scaleX(1); } .process-step__mark { position: relative; width: 66px; height: 66px; margin-bottom: 8px; } .process-step__seal { width: 66px; height: 66px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #FBF8F1; color: #1F2420; box-shadow: 0 0 0 1.5px #1F2420, inset 0 0 0 4px #FBF8F1, inset 0 0 0 5.2px #1F2420, 0 8px 20px rgba(20, 32, 26, .1); transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .3s, box-shadow .3s; } .process-step__seal .wch-icon { width: 30px; height: 30px; } .process-step:hover .process-step__seal { color: var(--green); transform: translateY(-3px) rotate(-4deg); box-shadow: 0 0 0 1.5px #B8892A, inset 0 0 0 4px #FBF8F1, inset 0 0 0 5.2px #B8892A, 0 12px 26px rgba(184, 137, 42, .22); } .process-step__num { position: absolute; top: -6px; right: -12px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px; background: var(--yellow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 3px #fff; } .process-step h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; transition: color .3s; } .process-step:hover h3 { color: var(--green); } .process-step p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5650; } @media (max-width: 1024px) { .process-track { --cols: 2; } .process-step:nth-child(odd)::before { display: none; } .process-step:nth-child(n+3) { border-top: 1px solid var(--line); } .process-step:nth-child(even) .process-step__mark::after { display: none; } } @media (max-width: 640px) { .process-track { --cols: 1; } .process-step { display: grid; grid-template-columns: 66px 1fr; column-gap: 20px; row-gap: 6px; padding: 26px 22px; } .process-step + .process-step { border-top: 0; } .process-step__mark { grid-row: 1 / span 2; margin: 0; } .process-track .process-step .process-step__mark::after { display: none; } .process-track .process-step:last-child::before { display: none; } .process-track .process-step:not(:last-child)::before { display: block; content: ""; position: absolute; left: 55px; top: 102px; bottom: -16px; width: 0; background: none; border-left: 1.5px dashed rgba(184, 137, 42, .45); } .process-step h3 { align-self: end; font-size: 18px; } .process-step p { align-self: start; } } /* How it works: one clean line through the seal centres, no column dividers */ .process-step { --pad-x: clamp(20px, 2.2vw, 32px); --pad-top: clamp(28px, 3vw, 40px); padding: var(--pad-top) var(--pad-x) clamp(30px, 3vw, 42px); } .process-track .process-step::before, .process-track .process-step .process-step__mark::after { display: none; } .process-track .process-step:not(:last-child)::before { display: block; content: ""; position: absolute; z-index: -1; background: none; top: calc(var(--pad-top) + 33px); bottom: auto; left: calc(var(--pad-x) + 33px); width: 100%; height: 0; border-top: 1.5px dashed rgba(184, 137, 42, .5); } .process-step__seal { position: relative; z-index: 1; } @media (max-width: 1024px) { .process-track .process-step:nth-child(even)::before { display: none; } .process-step:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (max-width: 640px) { .process-step { --pad-x: 22px; --pad-top: 26px; padding: 26px 22px; } .process-step:nth-child(n+3) { border-top: 0; } .process-track .process-step:not(:last-child)::before, .process-track .process-step:nth-child(even):not(:last-child)::before { display: block; top: calc(var(--pad-top) + 33px); bottom: calc(-1 * var(--pad-top) - 33px); left: calc(var(--pad-x) + 33px); width: 0; height: auto; border-top: 0; border-left: 1.5px dashed rgba(184, 137, 42, .5); } } .process-step__num { z-index: 2; } /* How it works: centred seals, text stays left (tablet and desktop) */ @media (min-width: 641px) { .process-step__mark { align-self: center; } .process-track .process-step:not(:last-child)::before { left: 50%; width: 100%; } } /* ---------- Google reviews v2 ---------- */ .bg-warm-fade { background: linear-gradient(180deg, #fff 0%, var(--bg-warm) clamp(48px, 6vw, 96px), var(--bg-warm) calc(100% - clamp(48px, 6vw, 96px)), #fff 100%); } .section.reviews--v2 { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); } .reviews--v2 .section-head--split { align-items: end; } .rating-card { justify-self: end; display: flex; align-items: center; gap: 22px; padding: 20px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(20, 32, 26, .08); position: relative; overflow: hidden; } .rating-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--yellow) 50%, var(--green)); } .rating-card__score { display: flex; flex-direction: column; gap: 6px; padding-right: 22px; border-right: 1px solid var(--line); } .rating-card .score { font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .rating-card .stars .wch-icon { width: 16px; height: 16px; } .rating-card__meta { display: flex; flex-direction: column; gap: 8px; } .rating-card__meta b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; } .rating-card__meta a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--green); } .rating-card__meta a .wch-icon { width: 14px; height: 14px; transition: transform .25s; } .rating-card__meta a:hover .wch-icon { transform: translateX(3px); } .g-logo { width: 18px; height: 18px; flex: none; } .review.review--v2 { justify-content: flex-start; gap: 16px; min-height: 0; padding: 28px 28px 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 14px 34px rgba(20, 32, 26, .06); position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; } .review.review--v2::after { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, #E8B83A 20%, #F7D877 50%, #E8B83A 80%, transparent); transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .review.review--v2:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(20, 32, 26, .10); } .review.review--v2:hover::after { transform: scaleX(1); } .review--v2 .review__head { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; } .review--v2 .avatar { width: 48px; height: 48px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E8B83A; } .review--v2 .avatar.has-photo { background: var(--bg-tint); } .review--v2 .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .review__who { flex: 1; min-width: 0; } .review__who b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review__who b a { color: inherit; text-decoration: none; } .review__who b a:hover { color: var(--green); } .review__who small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); } .review--v2 .review__head .g-logo { width: 22px; height: 22px; align-self: flex-start; } .review--v2 > .stars .wch-icon { width: 17px; height: 17px; } .review__text { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.65; color: #2B332E; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .review__more { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: var(--green); } .review__more[hidden] { display: none; } .review__more .wch-icon { width: 14px; height: 14px; transition: transform .25s; } .review__more:hover .wch-icon { transform: translateX(3px); } .reviews--v2 .review-grid { align-items: stretch; } /* Modal */ .review-modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 40px 100px rgba(10, 20, 15, .3); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); } .review-modal.is-open { opacity: 1; transform: none; } .review-modal::backdrop { background: rgba(18, 28, 22, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .review-modal__inner { position: relative; } .review-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); transition: background .2s, transform .2s; } .review-modal__close:hover { background: var(--bg-tint); transform: rotate(90deg); } .review-modal__close .wch-icon { width: 18px; height: 18px; } .review-modal .review.is-full { box-shadow: none; border: 0; transform: none; padding: 34px 34px 32px; } .review-modal .review.is-full::after { display: none; } .review-modal .review.is-full .review__head { padding-right: 46px; } .review-modal .review.is-full .review__text { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 17px; } @media (max-width: 900px) { .rating-card { justify-self: start; } } @media (max-width: 480px) { .rating-card { gap: 16px; padding: 18px 20px; width: 100%; } .rating-card__score { padding-right: 16px; } .rating-card .score { font-size: 40px; } .review.review--v2 { padding: 24px 22px; } .review-modal .review.is-full { padding: 28px 22px; } } /* Reviews: dot pagination + page-change animation */ .reviews--v2 .dots { gap: 10px; } .reviews--v2 .dots[hidden] { display: none; } .reviews--v2 .dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: #C9D1CB; cursor: pointer; position: relative; overflow: hidden; transition: width .4s cubic-bezier(.2, .8, .2, 1), background .3s, transform .2s; } .reviews--v2 .dot:hover { background: #9FAEA4; transform: scale(1.15); } .reviews--v2 .dot.active { width: 34px; background: var(--green); transform: none; } .reviews--v2 .dot.active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(247, 216, 119, .9), transparent); animation: wch-dot-shine 1.1s ease .1s both; } .reviews--v2 .dot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } @keyframes wch-dot-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .reviews--v2 .review-grid { perspective: 1400px; } .review.review--v2.is-leaving { animation: wch-rv-out .3s calc(var(--i, 0) * .05s) cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; } .review.review--v2.is-entering { animation: wch-rv-in .62s calc(var(--i, 0) * .09s) cubic-bezier(.2, .9, .25, 1.05) both; } [data-dir="prev"] .review.review--v2.is-leaving { animation-name: wch-rv-out-prev; } [data-dir="prev"] .review.review--v2.is-entering { animation-name: wch-rv-in-prev; } @keyframes wch-rv-out { to { opacity: 0; transform: translateX(-40px) rotateY(12deg) scale(.96); filter: blur(4px); } } @keyframes wch-rv-out-prev { to { opacity: 0; transform: translateX(40px) rotateY(-12deg) scale(.96); filter: blur(4px); } } @keyframes wch-rv-in { from { opacity: 0; transform: translateX(70px) rotateY(-14deg) scale(.95); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } @keyframes wch-rv-in-prev { from { opacity: 0; transform: translateX(-70px) rotateY(14deg) scale(.95); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .review.review--v2.is-entering .avatar { animation: wch-rv-pop .5s calc(.2s + var(--i, 0) * .09s) cubic-bezier(.3, 1.5, .5, 1) both; } .review.review--v2.is-entering > .stars .wch-icon { animation: wch-rv-pop .4s both; } .review.review--v2.is-entering > .stars .wch-icon:nth-child(1) { animation-delay: calc(.3s + var(--i, 0) * .09s); } .review.review--v2.is-entering > .stars .wch-icon:nth-child(2) { animation-delay: calc(.35s + var(--i, 0) * .09s); } .review.review--v2.is-entering > .stars .wch-icon:nth-child(3) { animation-delay: calc(.4s + var(--i, 0) * .09s); } .review.review--v2.is-entering > .stars .wch-icon:nth-child(4) { animation-delay: calc(.45s + var(--i, 0) * .09s); } .review.review--v2.is-entering > .stars .wch-icon:nth-child(5) { animation-delay: calc(.5s + var(--i, 0) * .09s); } @keyframes wch-rv-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } .review-modal .review.is-full .review__text { white-space: pre-line; } .review__platform { display: inline-flex; align-self: flex-start; } .review__platform .g-logo { width: 22px; height: 22px; } .bg-warm-fade-top { background: linear-gradient(180deg, #fff 0%, var(--bg-warm) clamp(48px, 6vw, 96px), var(--bg-warm) 100%); } /* ---------- Market insights v2 ---------- */ .insight-grid { display: grid; gap: 24px; } .insight-grid--featured { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-rows: 1fr; } .insight-grid--featured .insight--big { grid-row: span 2; } .insight-grid--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .insight { position: relative; } .insight__link { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 14px 34px rgba(20, 32, 26, .06); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; } .insight__link::after { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; z-index: 2; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, #E8B83A 20%, #F7D877 50%, #E8B83A 80%, transparent); transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .insight__link:hover { color: var(--ink); transform: translateY(-4px); box-shadow: 0 26px 54px rgba(20, 32, 26, .12); } .insight__link:hover::after { transform: scaleX(1); } .insight__media { position: relative; display: block; overflow: hidden; background: var(--placeholder); aspect-ratio: 16 / 10; } .insight__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .insight__link:hover .insight__media img { transform: scale(1.05); } .insight__tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--green); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } .insight__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; } .insight__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); } .insight__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; transition: color .25s; } .insight__link:hover .insight__title { color: var(--green); } .insight__excerpt { font-size: 15px; line-height: 1.6; color: #4A5650; } .insight__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--green); } .insight__more .wch-icon { width: 14px; height: 14px; transition: transform .25s; } .insight__link:hover .insight__more .wch-icon { transform: translateX(4px); } /* Big card */ .insight--big .insight__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; } .insight--big .insight__body { flex: 0 0 auto; padding: 26px 30px 30px; } .insight--big .insight__title { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; } /* Side cards: image left, text right */ .insight-grid--featured .insight:not(.insight--big) .insight__link { flex-direction: row; } .insight-grid--featured .insight:not(.insight--big) .insight__media { flex: 0 0 42%; aspect-ratio: auto; } .insight-grid--featured .insight:not(.insight--big) .insight__body { padding: 22px 24px; justify-content: center; } @media (max-width: 960px) { .insight-grid--featured { grid-template-columns: 1fr; grid-auto-rows: auto; } .insight-grid--featured .insight--big { grid-row: auto; } .insight--big .insight__media { aspect-ratio: 16 / 9; min-height: 0; } } @media (max-width: 560px) { .insight-grid--featured .insight:not(.insight--big) .insight__link { flex-direction: column; } .insight-grid--featured .insight:not(.insight--big) .insight__media { flex: none; aspect-ratio: 16 / 10; } .insight--big .insight__body { padding: 22px 22px 24px; } } /* Insights: tighter proportions */ .insight-grid--featured { grid-auto-rows: auto; } .insight--big .insight__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; } .insight-grid--featured .insight:not(.insight--big) .insight__media img { position: absolute; inset: 0; } .insight-grid--featured .insight:not(.insight--big) .insight__media { min-height: 180px; } @media (min-width: 961px) { .insight-grid--featured .insight--big .insight__link { height: 100%; } .insight-grid--featured .insight--big .insight__media { aspect-ratio: auto; flex: 1 1 260px; } } .insights--v2 .insight__media img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; } /* ---------- Areas served showcase ---------- */ .bg-dark { background: radial-gradient(120% 80% at 0% 0%, #1F5530 0%, #14321D 45%, #0F2416 100%); color: #E9EFEA; } .section.areas-showcase { padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); position: relative; overflow: hidden; } .areas-showcase.bg-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(40% 50% at 85% 10%, rgba(247, 208, 76, .12), transparent 70%), radial-gradient(30% 40% at 10% 100%, rgba(247, 208, 76, .08), transparent 70%); } .areas { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; } .areas__head .eyebrow { color: var(--yellow); } .bg-dark .areas__head h2 { color: #fff; } .bg-dark .areas__head h2 em { color: var(--yellow); } .areas__intro { margin: 16px 0 0; max-width: 460px; font-size: 17px; line-height: 1.65; color: rgba(233, 239, 234, .78); } .bg-white .areas__intro, .bg-warm .areas__intro { color: var(--body); } .areas__list { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; } .areas__group { margin: 18px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 208, 76, .85); } .areas__group:first-child { margin-top: 0; } .areas__tab { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .09); color: rgba(233, 239, 234, .62); text-decoration: none; transition: color .3s, padding .35s cubic-bezier(.2, .8, .2, 1); } .bg-white .areas__tab, .bg-warm .areas__tab { color: var(--muted); border-color: var(--line); } .areas__num { font-size: 12px; font-weight: 800; letter-spacing: .04em; opacity: .6; font-variant-numeric: tabular-nums; } .areas__name { font-size: clamp(18px, 1.55vw, 22px); font-weight: 800; letter-spacing: -.015em; } .areas__arrow { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); opacity: 0; transform: translateX(-10px) scale(.8); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); } .areas__arrow .wch-icon { width: 14px; height: 14px; } .areas__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--yellow), #F7D877); } .areas__tab:hover, .areas__tab:focus-visible, .areas__tab.is-active { color: #fff; padding-left: 14px; } .bg-white .areas__tab.is-active, .bg-warm .areas__tab.is-active, .bg-white .areas__tab:hover, .bg-warm .areas__tab:hover { color: var(--ink); } .areas__tab.is-active .areas__num { opacity: 1; color: var(--yellow); } .areas__tab.is-active .areas__arrow, .areas__tab:hover .areas__arrow { opacity: 1; transform: none; } .areas__tab.is-active .areas__progress { width: 100%; transition: none; } .areas.is-playing .areas__tab.is-active .areas__progress { width: 0; animation: wch-area-progress var(--dur, 6.5s) linear forwards; } .areas.is-paused .areas__tab.is-active .areas__progress { animation-play-state: paused; } @keyframes wch-area-progress { to { width: 100%; } } .areas__tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 6px; } .areas__stage { position: relative; min-height: 620px; border-radius: 28px; overflow: hidden; background: #0B1A10; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); isolation: isolate; } .areas__panel { position: absolute; inset: 0; visibility: hidden; z-index: 1; } .areas__panel.is-active { visibility: visible; z-index: 2; } .areas__panel.is-leaving { visibility: visible; z-index: 1; } .areas__photo { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .9s cubic-bezier(.77, 0, .18, 1); } .areas__panel.is-active .areas__photo { clip-path: inset(0 0 0 0); } .areas__panel.is-leaving .areas__photo { clip-path: inset(0 0 0 0); } .areas__photo img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transform: scale(1.14); transition: transform 8s cubic-bezier(.2, .6, .2, 1); } .areas__panel.is-active .areas__photo img { transform: scale(1.02); } .areas__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 12, .05) 30%, rgba(8, 20, 12, .55) 75%, rgba(8, 20, 12, .82) 100%); } .areas__card { position: absolute; left: clamp(18px, 2.4vw, 32px); right: clamp(18px, 2.4vw, 32px); bottom: clamp(18px, 2.4vw, 32px); z-index: 3; padding: clamp(20px, 2.2vw, 30px); border-radius: 20px; color: #fff; background: rgba(12, 28, 17, .38); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .areas__card > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); } .areas__panel.is-active .areas__card > * { opacity: 1; transform: none; } .areas__panel.is-active .areas__card > :nth-child(1) { transition-delay: .35s; } .areas__panel.is-active .areas__card > :nth-child(2) { transition-delay: .42s; } .areas__panel.is-active .areas__card > :nth-child(3) { transition-delay: .5s; } .areas__panel.is-active .areas__card > :nth-child(4) { transition-delay: .58s; } .areas__panel.is-active .areas__card > :nth-child(5) { transition-delay: .66s; } .areas__region { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); } .areas__region .wch-icon { width: 14px; height: 14px; } .areas__title { margin: 8px 0 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; color: #fff; } .areas__tagline { margin: 10px 0 0; max-width: 540px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .86); } .areas__hoods { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .areas__hoods li { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); } .areas__cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 15px; font-weight: 800; text-decoration: none; transition: background .25s, transform .25s; } .areas__cta:hover { background: #fff; color: var(--ink); transform: translateY(-2px); } .areas__cta-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--yellow); transition: transform .3s; } .areas__cta:hover .areas__cta-icon { transform: rotate(-45deg); } .areas__cta-icon .wch-icon { width: 15px; height: 15px; } .areas__count { position: absolute; top: 20px; right: 22px; z-index: 4; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .8); background: rgba(12, 28, 17, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; } .areas__count b { color: #fff; } @media (prefers-reduced-motion: reduce) { .areas__photo, .areas__photo img, .areas__card > * { transition: none !important; } } /* Tablet and phone: swipeable photo cards */ @media (max-width: 960px) { .areas { grid-template-columns: 1fr; } .areas__list { display: none; } .areas__stage { min-height: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .areas__stage::-webkit-scrollbar { display: none; } .areas__panel { position: relative; inset: auto; visibility: visible; flex: 0 0 min(82%, 420px); height: clamp(440px, 120vw, 560px); border-radius: 22px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 20px 44px rgba(0, 0, 0, .25); } .areas__photo { clip-path: none !important; } .areas__photo img { transform: none !important; } .areas__card > * { opacity: 1 !important; transform: none !important; } .areas__card { padding: 18px; } .areas__title { font-size: 30px; } .areas__tagline { font-size: 15px; } .areas__hoods li:nth-child(n+4) { display: none; } .areas__count { display: none; } } /* Areas: heading above, list and photo side by side */ .areas__head .eyebrow { color: var(--yellow); } .bg-dark .areas__head h2 { color: #fff; } .bg-dark .section-intro p { color: rgba(233, 239, 234, .8); } .bg-dark .section-intro::before { background: linear-gradient(180deg, var(--yellow), rgba(247, 208, 76, .2)); } .areas__list { margin-top: 0; } .areas__tab { padding-top: 9px; padding-bottom: 9px; } .areas__name { font-size: clamp(17px, 1.4vw, 20px); } .areas__group { margin: 16px 0 2px; } .areas__stage { min-height: 560px; } @media (min-width: 961px) { .areas__card { right: auto; max-width: 470px; padding: 22px 24px; } .areas__title { font-size: clamp(30px, 3vw, 42px); } .areas__tagline { font-size: 15px; } } /* Areas: list items are buttons */ .areas__tab { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font: inherit; text-align: left; cursor: pointer; } .bg-white .areas__tab, .bg-warm .areas__tab { border-bottom-color: var(--line); } /* Phones: lighter card so the photo shows */ @media (max-width: 960px) { .areas__card { left: 12px; right: 12px; bottom: 12px; padding: 16px; } .areas__title { font-size: 26px; } .areas__tagline { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .areas__hoods { display: none; } .areas__cta { margin-top: 12px; font-size: 14px; } } @media (max-width: 960px) { .areas__stage { min-height: 0; } .areas__cta { max-width: 100%; font-size: 13.5px; padding-left: 16px; } } /* Areas: photos are decoration only, never dragged or clicked */ .areas__photo, .areas__photo img { pointer-events: none; -webkit-user-drag: none; user-select: none; } .areas__panel:not(.is-active) .areas__card { pointer-events: none; } @media (max-width: 960px) { .areas__panel .areas__card { pointer-events: auto; } } /* ---------- Get in touch v2 ---------- */ .contact--v2 > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: start; } .contact--v2 .contact-copy { gap: 22px; } .contact--v2 .contact-copy .h2 { font-size: clamp(36px, 4vw, 54px); } .contact--v2 .contact-list { gap: 10px; margin-top: 6px; } .contact--v2 .contact-item { position: relative; gap: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 10px 26px rgba(20, 32, 26, .05); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; } .contact--v2 a.contact-item:hover { transform: translateY(-3px); border-color: rgba(184, 137, 42, .45); box-shadow: 0 18px 38px rgba(20, 32, 26, .10); } .contact-item__seal { flex: none; width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #FBF8F1; color: #1F2420; box-shadow: 0 0 0 1.5px #1F2420, inset 0 0 0 3.5px #FBF8F1, inset 0 0 0 4.7px #1F2420; transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .3s, box-shadow .3s; } .contact-item__seal .wch-icon { width: 22px; height: 22px; } .contact--v2 a.contact-item:hover .contact-item__seal { color: var(--green); transform: rotate(-6deg); box-shadow: 0 0 0 1.5px #B8892A, inset 0 0 0 3.5px #FBF8F1, inset 0 0 0 4.7px #B8892A; } .contact-item__text { flex: 1; min-width: 0; } .contact--v2 .contact-item small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: var(--muted); } .contact--v2 .contact-item b { display: block; margin-top: 2px; font-size: 20px; } .contact--v2 .contact-item b.is-address { font-size: 16px; } .contact-item__go { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); } .contact-item__go .wch-icon { width: 15px; height: 15px; } .contact--v2 a.contact-item:hover .contact-item__go { opacity: 1; transform: none; } .contact-book { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--green); } .contact-book .wch-icon { width: 16px; height: 16px; } .contact-book .wch-icon:last-child { transition: transform .25s; } .contact-book:hover .wch-icon:last-child { transform: translateX(4px); } .contact-trust { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 22px; margin-top: 4px; border-top: 1px solid var(--line); } .contact-trust__item { display: inline-flex; align-items: center; gap: 12px; } .contact-trust__seal { width: 46px !important; height: 46px !important; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1.5px #1F2420; } .contact-trust__item b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); } .contact-trust__item small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); } .contact-trust__score { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); } .contact-trust .stars .wch-icon { width: 14px; height: 14px; } /* Form card */ .contact-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 30px 70px rgba(20, 32, 26, .10); overflow: hidden; } .contact-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--green), var(--yellow) 50%, var(--green)); } .contact--v2 .contact-card > .form { margin: 0; padding: clamp(26px, 3.4vw, 42px); box-shadow: none; border-radius: 0; background: none; } .contact--v2 .form-title { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; } .contact--v2 .form--gf .gform_wrapper { --gf-form-gap-y: 14px; } .contact--v2 .form--gf .gform_wrapper .gfield_label { font-size: 14px !important; font-weight: 700 !important; } .contact--v2 .form--gf .gform_wrapper .gfield_required { font-size: 11px; color: #9A6700 !important; } .contact--v2 .form--gf .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]), .contact--v2 .form--gf .gform_wrapper select { min-height: 50px; } .contact--v2 .form--gf .gform_wrapper textarea { min-height: 120px !important; height: 120px; } @media (max-width: 960px) { .contact--v2 > .container { grid-template-columns: 1fr; } } @media (max-width: 480px) { .contact--v2 .contact-item { padding: 14px; gap: 14px; } .contact-item__seal { width: 46px; height: 46px; } .contact--v2 .contact-item b { font-size: 18px; } } /* Areas: full-height photo bleeding off the right edge, fading into the list */ @media (min-width: 961px) { .section.areas-showcase { position: relative; min-height: min(100vh, 980px); display: flex; align-items: center; } .areas-showcase > .container { position: static; width: 100%; } .areas-showcase .areas__head, .areas-showcase .areas { position: relative; z-index: 2; max-width: 44%; } .areas-showcase .areas__head.section-head--split { grid-template-columns: 1fr; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); } .areas-showcase .areas__head .section-intro p { max-width: 440px; } .areas { display: block; position: static; } .areas__stage { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 60vw; min-height: 0; border-radius: 0; box-shadow: none; background: transparent; z-index: 1; } .areas__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 42%); } .areas__photo::after { background: linear-gradient(180deg, rgba(8, 20, 12, .35) 0%, rgba(8, 20, 12, 0) 22%, rgba(8, 20, 12, 0) 55%, rgba(8, 20, 12, .7) 100%); } .areas__card { left: auto; right: max(var(--gutter), calc((100vw - 1240px) / 2)); bottom: clamp(32px, 5vw, 64px); max-width: 460px; } .areas__count { top: clamp(24px, 3vw, 40px); right: max(var(--gutter), calc((100vw - 1240px) / 2)); } } @media (min-width: 961px) { .areas-showcase .areas { position: static; max-width: 44%; } .areas-showcase .areas__side { position: relative; z-index: 2; } } @media (min-width: 961px) { .section.areas-showcase { min-height: min(calc(100vh - 70px), 920px); padding-top: clamp(44px, 5vh, 64px); padding-bottom: clamp(44px, 5vh, 64px); } .areas-showcase .areas__head .h2, .areas-showcase .areas__head h2 { font-size: clamp(32px, 3.2vw, 46px); } .areas-showcase .areas__head .section-intro p { font-size: 16px; } .areas__tab { padding-top: 7px; padding-bottom: 7px; } .areas__group { margin: 12px 0 0; } .areas__photo img { object-position: center 60%; } } /* Areas: two-column list so every area fits on one screen */ .areas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; align-items: start; } .areas__block { display: flex; flex-direction: column; min-width: 0; margin-bottom: 14px; } .areas__block .areas__group { display: block; margin: 0 0 4px; } .areas__tab { grid-template-columns: 26px 1fr auto; gap: 8px; padding: 9px 6px 9px 2px; } .areas__tab:hover, .areas__tab:focus-visible, .areas__tab.is-active { padding-left: 8px; } .areas__name { font-size: clamp(16px, 1.25vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .areas__arrow { width: 26px; height: 26px; } .areas__arrow .wch-icon { width: 12px; height: 12px; } @media (min-width: 961px) { .section.areas-showcase { min-height: min(calc(100vh - 70px), 760px); } .areas-showcase .areas, .areas-showcase .areas__head { max-width: 48%; } } /* Areas: every area as a pill, grouped by region, so the whole list fits without scrolling */ .areas__list { display: flex; flex-direction: column; gap: 16px; } .areas__block { margin: 0; } .areas__block .areas__group { margin: 0 0 8px; } .areas__block { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .areas__block .areas__group { flex: 0 0 100%; } .areas__tab, .areas__tab:hover, .areas__tab:focus-visible, .areas__tab.is-active { width: auto; display: inline-flex; align-items: center; gap: 0; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .04); } .areas__tab { color: rgba(233, 239, 234, .82); overflow: hidden; transition: background .25s, color .25s, border-color .25s, transform .25s; } .areas__tab:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; transform: translateY(-1px); } .areas__tab.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .areas__tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 999px; } .areas__name { font-size: 15px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; overflow: visible; } .areas__arrow { display: none; } .areas__progress { left: 15px; right: 15px; width: auto; bottom: 4px; height: 2px; border-radius: 2px; transform-origin: left; transform: scaleX(0); background: rgba(20, 32, 26, .35); } .areas__tab.is-active .areas__progress { width: auto; } .areas.is-playing .areas__tab.is-active .areas__progress { width: auto; animation: wch-area-pill var(--dur, 6.5s) linear forwards; } @keyframes wch-area-pill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .bg-white .areas__tab, .bg-warm .areas__tab { border-color: var(--line); background: #fff; color: var(--body); } .bg-white .areas__tab.is-active, .bg-warm .areas__tab.is-active { background: var(--green); border-color: var(--green); color: #fff; } @media (min-width: 961px) { .section.areas-showcase { min-height: min(calc(100vh - 70px), 720px); padding-top: 40px; padding-bottom: 40px; } .areas-showcase .areas, .areas-showcase .areas__head { max-width: 46%; } } @media (max-width: 960px) { .areas__list { display: flex; margin: 0 0 22px; gap: 12px; } .areas__tab, .areas__tab:hover, .areas__tab.is-active { padding: 7px 13px; } .areas__name { font-size: 14px; } } .contact-trust__seal { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* ---------- Footer v2 ---------- */ .site-footer { position: relative; overflow: hidden; background: radial-gradient(110% 90% at 0% 0%, #1F5530 0%, #14321D 50%, #0F2416 100%); padding-top: clamp(56px, 6vw, 84px); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--yellow) 50%, var(--green)); } .site-footer::after { content: ""; position: absolute; right: -10%; top: -30%; width: 55%; height: 90%; pointer-events: none; background: radial-gradient(closest-side, rgba(247, 208, 76, .07), transparent); } .site-footer > .container { position: relative; z-index: 1; gap: 36px; } .footer-brand p { color: rgba(233, 239, 234, .78); } .site-footer .social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: background .25s, color .25s, transform .25s; } .site-footer .social a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-2px); } .footer-nav__list a { position: relative; transition: color .2s, padding .25s; } .footer-nav__list:not(.footer-contact) a:hover { padding-left: 6px; } /* Contact with icons */ .footer-contact { gap: 14px; } .footer-contact a, .footer-contact__row { display: flex; align-items: flex-start; gap: 12px; } .footer-contact__icon { flex: none; width: 32px; height: 32px; margin-top: -3px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(247, 208, 76, .12); border: 1px solid rgba(247, 208, 76, .35); color: var(--yellow) !important; transition: background .25s, color .25s; } .footer-contact__icon .wch-icon { width: 15px; height: 15px; } .footer-contact a:hover .footer-contact__icon { background: var(--yellow); color: var(--ink) !important; } .footer-contact address { font-style: normal; } /* Credentials row */ .footer-creds { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); } .footer-creds .footer-award, .footer-cred { margin: 0; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; min-height: 100px; } .footer-cred { transition: background .25s, border-color .25s, transform .3s cubic-bezier(.2, .8, .2, 1); } .footer-cred:hover { color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(247, 208, 76, .5); transform: translateY(-3px); } .footer-cred__mark { flex: none; width: 60px; display: inline-flex; align-items: center; justify-content: center; } .footer-cred__mark--wide { width: 150px; } .footer-cred__logo { width: 100% !important; height: auto !important; display: block; } .footer-cred__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .footer-cred__text small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .footer-cred__text b { font-size: 15px; font-weight: 800; color: #fff; } .footer-cred__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: rgba(233, 239, 234, .8); } .footer-cred__link .wch-icon { width: 12px; height: 12px; transition: transform .25s; } .footer-cred:hover .footer-cred__link { color: var(--yellow); } .footer-cred:hover .footer-cred__link .wch-icon { transform: translate(2px, -2px); } .footer-creds .footer-award__seal { width: 62px; height: 62px; background: none; box-shadow: none; } .footer-bottom { border-top-color: rgba(255, 255, 255, .12); } .footer-credit a { letter-spacing: .02em; } @media (max-width: 1024px) { .footer-creds { grid-template-columns: 1fr 1fr; } .footer-creds .footer-award { grid-column: 1 / -1; } } @media (max-width: 640px) { .footer-creds { grid-template-columns: 1fr; } .footer-cred__mark--wide { width: 120px; } } .footer-creds .footer-award { width: 100%; max-width: none; } .footer-creds .footer-award__seal { background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px #E8B83A, 0 8px 20px rgba(0, 0, 0, .25); } .footer-cred__mark--wide { width: 112px; } .footer-cred--bcfsa .footer-cred__text small { white-space: nowrap; } @media (max-width: 640px) { .footer-creds .footer-award, .footer-cred { min-width: 0; padding: 14px; gap: 14px; } .footer-cred--bcfsa { flex-direction: column; align-items: flex-start; } .footer-cred--bcfsa .footer-cred__text small { white-space: normal; } .footer-cred__text, .footer-award__text { min-width: 0; } } /* Page hero: full-screen image */ .page-hero--cover { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h, 120px)); padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(48px, 8vh, 96px); background: #0F2416; color: #fff; } .admin-bar .page-hero--cover { min-height: calc(100svh - var(--header-h, 120px) - 32px); } .page-hero__bg { position: absolute; inset: 0; z-index: -1; } .page-hero__bg img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 70% center; animation: wch-hero-zoom 14s ease-out both; } .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 26, 16, .88) 0%, rgba(10, 26, 16, .7) 38%, rgba(10, 26, 16, .25) 70%, rgba(10, 26, 16, .1) 100%), linear-gradient(0deg, rgba(10, 26, 16, .45), transparent 40%); } @keyframes wch-hero-zoom { from { transform: scale(1.08); } to { transform: none; } } .page-hero--cover .page-hero__grid { margin-top: auto; margin-bottom: auto; } .page-hero--cover .page-hero__copy { max-width: 640px; } .page-hero--cover .h1, .page-hero--cover .page-hero__title { color: #fff; } .page-hero--cover .h1 em, .page-hero--cover .page-hero__title em { color: var(--yellow); } .page-hero--cover .lead { color: rgba(255, 255, 255, .86); } .page-hero--cover .eyebrow { color: var(--yellow); } .page-hero--cover .breadcrumbs, .page-hero--cover .breadcrumbs a, .page-hero--cover .breadcrumbs span { color: rgba(255, 255, 255, .78); } .page-hero--cover .breadcrumbs a:hover { color: var(--yellow); } .page-hero--cover .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .8); } @media (max-width: 760px) { .page-hero__bg img { object-position: 62% center; } .page-hero__bg::after { background: linear-gradient(0deg, rgba(10, 26, 16, .92) 0%, rgba(10, 26, 16, .7) 45%, rgba(10, 26, 16, .35) 100%); } .page-hero--cover .page-hero__grid { margin-top: auto; margin-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .page-hero__bg img { animation: none; } } .page-hero--cover, .admin-bar .page-hero--cover { min-height: calc(100vh - var(--header-h) - var(--topbar-h, 0px) - var(--wpab, 0px)); min-height: calc(100svh - var(--header-h) - var(--topbar-h, 0px) - var(--wpab, 0px)); } /* Full-screen hero: breadcrumbs at the top, copy centred, lighter overlay */ .page-hero--cover > .container { display: flex; flex-direction: column; flex: 1; width: 100%; } .page-hero--cover .breadcrumbs, .page-hero--cover .breadcrumbs * { color: rgba(255, 255, 255, .82) !important; } .page-hero--cover .breadcrumbs [aria-current], .page-hero--cover .breadcrumbs li:last-child { color: #fff !important; } .page-hero--cover .breadcrumbs a:hover { color: var(--yellow) !important; } .page-hero--cover .page-hero__title em, .page-hero--cover h1 em { color: var(--yellow) !important; } .page-hero__bg img { object-position: right center; } .page-hero__bg::after { background: linear-gradient(90deg, rgba(8, 20, 12, .75) 0%, rgba(8, 20, 12, .45) 40%, rgba(8, 20, 12, 0) 70%); } @media (max-width: 760px) { .page-hero__bg img { object-position: 78% center; } .page-hero__bg::after { background: linear-gradient(0deg, rgba(8, 20, 12, .9) 0%, rgba(8, 20, 12, .6) 50%, rgba(8, 20, 12, .25) 100%); } } /* Cover hero: shorter, not full screen */ .page-hero--cover, .admin-bar .page-hero--cover { min-height: clamp(420px, 58vh, 600px); } @media (max-width: 760px) { .page-hero--cover, .admin-bar .page-hero--cover { min-height: 480px; } } /* Embed section that sits right under a hero */ .embed-section.space-no-top { padding-top: 40px; } /* Cover hero: no zoom animation, no tint on desktop */ .page-hero__bg img { animation: none !important; transform: none !important; } @media (min-width: 761px) { .page-hero__bg::after { display: none; } } /* ---------- FAQ v2 ---------- */ .faq-grid--v2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .faq-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--header-h) + 24px); } .faq-grid--v2 > .faq-side > .title { position: static; } .faq-side .section-intro p { font-size: 17px; } .faq-help { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(120% 120% at 0% 0%, #2A6A3D 0%, #1B4927 45%, #0F2416 100%); box-shadow: 0 24px 50px rgba(15, 36, 22, .2); } .faq-help::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--yellow) 50%, var(--green)); } .faq-help__title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; } .faq-help p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .82); } .faq-help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; } .faq-help__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; } .faq-help__phone .wch-icon { width: 18px; height: 18px; color: var(--yellow); } .faq-help__phone:hover { color: var(--yellow); } .faq-grid--v2 .faq-list { gap: 12px; } .faq-grid--v2 .faq-item { position: relative; overflow: hidden; border-radius: 18px; border-color: var(--line); transition: border-color .25s, box-shadow .25s; } .faq-grid--v2 .faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--yellow), #E8B83A); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .faq-grid--v2 .faq-item:hover { border-color: #CBD4CE; } .faq-grid--v2 .faq-item[open] { border-color: rgba(27, 73, 39, .35); box-shadow: 0 16px 36px rgba(20, 32, 26, .07); } .faq-grid--v2 .faq-item[open]::before { transform: scaleY(1); } .faq-grid--v2 .faq-item summary { gap: 16px; padding: 20px 22px; justify-content: flex-start; } .faq-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; background: #FFF4CC; color: var(--ink); transition: background .25s; } .faq-item[open] .faq-num { background: var(--yellow); } .faq-grid--v2 .faq-item summary .faq-q { flex: 1; font-size: 17.5px; } .faq-toggle { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--green); transition: background .25s, color .25s, transform .3s, border-color .25s; } .faq-toggle .wch-icon { width: 16px; height: 16px; transition: none; } .faq-grid--v2 .faq-item summary .faq-toggle .wch-icon { transform: none; } .faq-item[open] .faq-toggle { background: var(--green); border-color: var(--green); color: #fff; transform: rotate(45deg); } .faq-grid--v2 .faq-item summary:hover .faq-toggle { border-color: var(--green); } .faq-grid--v2 .faq-answer { padding: 0 22px 22px 72px; font-size: 16px; } .faq-item[open] .faq-answer { animation: wch-faq-in .35s ease both; } @keyframes wch-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .faq-side { position: static; } .faq-grid--v2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .faq-grid--v2 .faq-item summary { padding: 16px; gap: 12px; } .faq-grid--v2 .faq-answer { padding: 0 16px 18px 16px; } .faq-num { display: none; } } .faq-grid--v2 .faq-item[open] summary .faq-toggle .wch-icon { color: #fff; } .faq-grid--v2 .faq-item summary .faq-toggle .wch-icon { color: inherit; width: 16px; height: 16px; } @media (min-width: 901px) { .faq-grid--v2 { align-items: stretch; } .faq-grid--v2 .faq-side { position: static; height: 100%; } .faq-grid--v2 .faq-help { margin-top: auto; } } /* ---------- FAQ v3: header + two independent columns ---------- */ .faq-head { margin-bottom: clamp(28px, 3vw, 40px); } .faq-cols { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; } .faq-cols.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .faq-cols .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-help-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .faq-help-line__sep { color: var(--muted); } .faq-help-line__phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--green); } .faq-help-line__phone .wch-icon { width: 15px; height: 15px; } .faq-help-line__phone:hover { color: var(--green-dark); } /* Reuse the v2 question card look */ .faq-cols .faq-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .25s, box-shadow .25s; } .faq-cols .faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--yellow), #E8B83A); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .faq-cols .faq-item:hover { border-color: #CBD4CE; } .faq-cols .faq-item[open] { border-color: rgba(27, 73, 39, .35); box-shadow: 0 16px 36px rgba(20, 32, 26, .07); } .faq-cols .faq-item[open]::before { transform: scaleY(1); } .faq-cols .faq-item summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; } .faq-cols .faq-item summary::-webkit-details-marker { display: none; } .faq-cols .faq-item summary .faq-q { flex: 1; margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.35; } .faq-cols .faq-item summary .faq-toggle .wch-icon { transform: none; color: inherit; width: 16px; height: 16px; } .faq-cols .faq-item[open] summary .faq-toggle .wch-icon { color: #fff; } .faq-cols .faq-item summary:hover .faq-toggle { border-color: var(--green); } .faq-cols .faq-answer { padding: 0 20px 20px 68px; font-size: 15.5px; line-height: 1.7; color: var(--body); } .faq-cols .faq-item[open] .faq-answer { animation: wch-faq-in .35s ease both; } @media (max-width: 900px) { .faq-cols.is-two { grid-template-columns: 1fr; } } @media (max-width: 560px) { .faq-cols .faq-item summary { padding: 16px; gap: 12px; } .faq-cols .faq-answer { padding: 0 16px 18px; } } /* Cover hero tint (optional) */ @media (min-width: 761px) { .page-hero--cover.is-tinted .page-hero__bg::after { display: block; background: linear-gradient(90deg, rgba(8, 20, 12, .86) 0%, rgba(8, 20, 12, .62) 42%, rgba(8, 20, 12, .12) 78%); } } /* Page header with a YouTube background */ .page-hero--cover.is-tall { background: #14301E; } .page-hero--cover.is-tall .page-hero__bg { container-type: size; overflow: hidden; } .page-hero--cover.is-tall .page-hero__bg img { animation: none; } .page-hero__bg .hero-yt { z-index: 0; } .page-hero__bg .hero-yt iframe { max-width: none !important; max-height: none !important; } .page-hero__toggle { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: clamp(20px, 3vw, 36px); z-index: 2; background: rgba(255, 255, 255, .92); } .page-hero__toggle:hover { background: #fff; } .page-hero__toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } .page-hero--cover.is-tall, .admin-bar .page-hero--cover.is-tall { min-height: clamp(560px, 80vh, 860px); min-height: clamp(560px, 80svh, 860px); } @media (max-width: 760px) { .page-hero--cover.is-tall, .admin-bar .page-hero--cover.is-tall { min-height: clamp(620px, 88svh, 760px); } } .page-hero--cover .page-hero__bg .hero-yt iframe { width: calc(max(100cqw, 177.78cqh) * (var(--yt-zoom, 1) + .02)) !important; height: calc(max(100cqh, 56.25cqw) * (var(--yt-zoom, 1) + .02)) !important; } /* Scroll-down cue */ .scroll-cue { position: absolute; left: 50%; bottom: clamp(20px, 3vw, 36px); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; transition: opacity .2s; } .scroll-cue:hover { opacity: 1; color: var(--yellow); } .scroll-cue:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; border-radius: 8px; } .scroll-cue__mouse { width: 26px; height: 40px; border: 2px solid currentColor; border-radius: 14px; display: flex; justify-content: center; padding-top: 7px; } .scroll-cue__mouse span { width: 4px; height: 8px; border-radius: 2px; background: currentColor; animation: wch-scroll-cue 1.8s ease-in-out infinite; } @keyframes wch-scroll-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .scroll-cue__mouse span { animation: none; } } .page-hero--cover.is-tall:has(.scroll-cue) .page-hero__grid { padding-bottom: 72px; } @media (max-width: 760px) { .scroll-cue__label { display: none; } } /* Feature cards */ .feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; } .feature-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.4vw, 32px); background: var(--bg-tint); border-radius: var(--radius-lg); border: 1px solid transparent; overflow: hidden; transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .bg-warm .feature-card, .bg-tint .feature-card { background: #fff; } .feature-card::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--yellow); transform: scaleX(0); transition: transform .35s ease; } .feature-card:hover { background: #fff; border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-3px); } .feature-card:hover::after { transform: scaleX(1); } .feature-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .feature-card__icon { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #FBF8F1; color: #1F2420; box-shadow: inset 0 0 0 1px rgba(20, 32, 26, .06); transition: color .3s, transform .3s; } .bg-white .feature-card__icon { background: #fff; } .feature-card__icon .wch-icon { width: 24px; height: 24px; } .feature-card:hover .feature-card__icon { color: var(--green); transform: rotate(-4deg); } .feature-card__tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); } .feature-card__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } .feature-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5650; } .feature-card__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--green); text-decoration: none; } .feature-card__link .wch-icon { width: 16px; height: 16px; transition: transform .25s; } .feature-card__link:hover .wch-icon { transform: translateX(3px); } .feature-card__link::before { content: ""; position: absolute; inset: 0; } .feature-card__link:focus-visible { outline: none; } .feature-card:has(.feature-card__link:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; } @media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } } @media (max-width: 640px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } } /* Feature spotlight */ .spotlight__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; } .spotlight--visual-left .spotlight__visual { order: -1; } .spotlight__copy .h2 { margin-bottom: 18px; } .spotlight__list { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 30px; } .spotlight__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--body); } .spotlight__check { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); } .spotlight__check .wch-icon { width: 13px; height: 13px; } .spotlight__image { width: 100%; height: auto; border-radius: var(--radius-xl); display: block; } .spotlight__visual { position: relative; } .spotlight__visual::before { content: ""; position: absolute; inset: 8% -4% -6% 10%; border-radius: var(--radius-xl); background: var(--bg-warm); z-index: 0; } .bg-warm .spotlight__visual::before { background: #fff; } .mail-mock { position: relative; z-index: 1; margin: 0; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; } .mail-mock__bar { display: flex; align-items: center; gap: 6px; padding: 14px 18px; background: var(--bg-tint); border-bottom: 1px solid var(--line); } .mail-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5DDD8; } .mail-mock__badge { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mail-mock__head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 6px; } .mail-mock__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--yellow); } .mail-mock__avatar .wch-icon { width: 20px; height: 20px; } .mail-mock__head b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); } .mail-mock__head small { display: block; font-size: 13px; color: var(--muted); } .mail-mock__note { margin: 10px 24px 16px; font-size: 14.5px; line-height: 1.6; color: #4A5650; } .mail-mock__list { list-style: none; margin: 0; padding: 0 16px 18px; display: flex; flex-direction: column; gap: 8px; } .mail-mock__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg-tint); } .mail-mock__thumb { width: 64px; height: 52px; border-radius: 10px; overflow: hidden; background: #DDE4DF; } .mail-mock__thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .mail-mock__info b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); } .mail-mock__info small, .mail-mock__price em { display: block; font-size: 12.5px; color: var(--muted); font-style: normal; } .mail-mock__info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-mock__price { text-align: right; } .mail-mock__price b { display: block; font-size: 15px; font-weight: 800; color: var(--green); } .mail-mock__price em { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: #fff; font-weight: 700; color: var(--ink); } @media (max-width: 900px) { .spotlight__grid { grid-template-columns: minmax(0, 1fr); } .spotlight--visual-left .spotlight__visual { order: 0; } .spotlight__visual::before { inset: 6% -2% -4% 6%; } } @media (max-width: 420px) { .mail-mock__list li { grid-template-columns: 52px minmax(0, 1fr); } .mail-mock__thumb { width: 52px; height: 46px; } .mail-mock__price { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: center; } .mail-mock__price em { margin-top: 0; } } .checklist .spotlight__check .wch-icon { width: 13px; height: 13px; padding: 0; background: none; margin: 0; border-radius: 0; } .spotlight__list li { font-weight: 600; } /* Video header: 40px from the bottom on every screen size */ .page-hero--cover.is-tall { padding-bottom: 40px; } .page-hero--cover.is-tall .scroll-cue, .page-hero--cover.is-tall .page-hero__toggle { bottom: 40px; } .page-hero--cover.is-tall:has(.scroll-cue) .page-hero__grid { padding-bottom: 96px; } @media (max-width: 760px) { .page-hero--cover.is-tall:has(.scroll-cue) .page-hero__grid { padding-bottom: 64px; } .page-hero--cover.is-tall .page-hero__toggle { width: 40px; height: 40px; } } @media (max-width: 760px) { .page-hero--cover.is-tall, .admin-bar .page-hero--cover.is-tall { min-height: 0; } .page-hero--cover.is-tall .breadcrumbs { margin-bottom: 40px; } } /* Email rows without a photo (e.g. a report) */ .mail-mock__list li.is-text { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; } @media (max-width: 420px) { .mail-mock__list li.is-text { grid-template-columns: minmax(0, 1fr); } .mail-mock__list li.is-text .mail-mock__price { grid-column: 1; } } /* Areas: grid of area cards */ .area-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .area-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .area-filter span { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tint); font-size: 12px; font-weight: 800; } .area-filter:hover { border-color: var(--green); } .area-filter[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; } .area-filter[aria-pressed="true"] span { background: var(--yellow); color: var(--ink); } .area-filter:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } .area-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .area-grid .area-card.is-wide { grid-column: span 2; } .area-grid .area-card.is-wide .area-card__photo { aspect-ratio: 16 / 9; } .area-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease; } .area-card[hidden] { display: none; } .area-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .area-card__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-tint); } .area-card__photo img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; transition: transform .6s ease; } .area-card:hover .area-card__photo img { transform: scale(1.05); } .area-card__region { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .area-card__region .wch-icon { width: 14px; height: 14px; color: var(--green); } .area-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; } .area-card__title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } .area-card__body > p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5650; } .area-card__hoods { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .area-card__hoods li { padding: 4px 10px; border-radius: 999px; background: var(--bg-tint); font-size: 12.5px; font-weight: 600; color: #3D4A43; } .area-card__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--green); text-decoration: none; } .area-card__link .wch-icon { width: 16px; height: 16px; transition: transform .25s; } .area-card:hover .area-card__link .wch-icon { transform: translateX(4px); } .area-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; } .area-card__link:focus-visible { outline: none; } .area-card:has(.area-card__link:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; } @media (max-width: 1100px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .area-grid { grid-template-columns: minmax(0, 1fr); } .area-grid .area-card.is-wide { grid-column: auto; } .area-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; } .area-filter { flex: none; } } @media (prefers-reduced-motion: reduce) { .area-card, .area-card__photo img { transition: none; } .area-card:hover .area-card__photo img { transform: none; } } /* Data credits in the footer (Census, OpenStreetMap) */ /* Data sources note, just above the footer on pages that show Census or map data. */ .data-sources { padding: 16px var(--gutter); background: var(--bg); border-top: 1px solid var(--line); } .data-sources p { max-width: var(--container); margin: 0 auto; font-size: 12px; line-height: 1.6; color: var(--muted); } .data-sources b { color: var(--ink); font-weight: 800; } .data-sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .data-sources a:hover { color: var(--green); } /* Spotlight photo: keep tall photos in proportion */ .spotlight__visual .spotlight__image { position: relative; z-index: 1; aspect-ratio: 4 / 5; max-height: 620px; object-fit: cover; box-shadow: var(--shadow-lg); } @media (max-width: 900px) { .spotlight__visual .spotlight__image { aspect-ratio: 4 / 3; } } .spotlight__visual .spotlight__image { border-radius: var(--radius-xl) !important; } /* Compact section spacing: 40px above and below */ .section.space-compact { padding-top: 40px !important; padding-bottom: 40px !important; } .section.space-compact .section-head { margin-bottom: 28px; } .section.area-map { overflow-x: clip; } .section.area-map .wcad-map--full { margin-bottom: -40px; } /* Room for the offset backdrop under spotlight photos and emails */ .spotlight__visual { margin-bottom: 44px; } @media (max-width: 900px) { .spotlight__visual { margin-bottom: 28px; } } /* ===== Mega menus (Areas, Tools) ===== */ .nav__list > li.has-mega { position: static; } .nav__list > li.has-mega > .sub-menu { display: none; } .nav__list > li.has-mega > a { gap: 6px; } .nav__list > li.has-mega > a::before { content: ""; order: 2; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .nav__list > li.has-mega.is-open > a::before { transform: rotate(-135deg); margin-top: 4px; } .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 0 var(--gutter); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px rgba(20, 32, 26, .14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; text-transform: none; letter-spacing: 0; font-weight: 400; } .nav__list > li.has-mega.is-open > .mega, .nav__list > li.has-mega:focus-within:not(.is-closed) > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mega__inner { max-width: var(--container); margin: 0 auto; padding: 22px 0 26px; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 26px; } .mega--areas .mega__inner { grid-template-columns: 228px minmax(0, 1fr) 270px; } .mega__main { min-width: 0; } .nav__list .mega a { min-height: 0; } .nav__list .mega a::after { display: none; } .mega-areas, .mega-tools, .mega__facts { list-style: none; margin: 0; padding: 0; } /* Areas: region rail */ .mega-rail { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 20px; background: var(--bg-warm); } .mega-rail__title { margin: 4px 10px 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .mega-rail__list { display: flex; flex-direction: column; gap: 2px; } .mega-rail__tab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px 11px 16px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--body); text-align: left; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; } .mega-rail__tab::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--yellow); transform: scaleY(0); transition: transform .25s ease; } .mega-rail__tab:hover { color: var(--ink); background: rgba(255, 255, 255, .6); } .mega-rail__tab[aria-selected="true"] { background: #fff; color: var(--green); box-shadow: 0 4px 14px rgba(20, 32, 26, .07); } .mega-rail__tab[aria-selected="true"]::before { transform: none; } .mega-rail__tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; } .mega-rail__count { flex: none; min-width: 24px; padding: 2px 7px; border-radius: 999px; background: rgba(20, 32, 26, .06); font-size: 12px; font-weight: 800; text-align: center; color: var(--muted); } .mega-rail__tab[aria-selected="true"] .mega-rail__count { background: var(--green); color: #fff; } .nav__list .mega .mega-rail__all { display: inline-flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 14px 12px 4px 16px; font-size: 14px; font-weight: 800; color: var(--green); } .mega-rail__all .wch-icon { width: 15px; height: 15px; transition: transform .25s; } .mega-rail__all:hover .wch-icon { transform: translateX(4px); } /* Areas: region panel */ .mega-panel { animation: megaIn .28s ease both; } /* Panels share one grid cell, so the menu keeps the height of the tallest region. */ .mega__main--areas { display: grid; } .mega-panel { grid-area: 1 / 1; } .mega-panel[hidden] { display: block; visibility: hidden; animation: none; } @keyframes megaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .mega-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .mega-panel__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); } .mega-panel__text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .mega-panel__stat { flex: none; margin: 0; text-align: right; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .mega-panel__stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-transform: none; color: var(--green); } .mega-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .mega-area { display: flex !important; flex-direction: column; gap: 8px; padding: 6px !important; border-radius: 18px; color: var(--ink) !important; text-decoration: none; transition: background .2s; } .mega-area:hover, .mega-area.is-current { background: var(--bg-tint); } .mega-area:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; } .mega-area__thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--placeholder); } .mega-area__thumb::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(10, 22, 15, .72), rgba(10, 22, 15, 0)); } .mega-area__img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; transition: transform .5s ease; } .mega-area:hover .mega-area__img { transform: scale(1.06); } .mega-area__name { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #fff; } .mega-area__stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 2px; } .mega-area__stats span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); } .mega-area__stats span + span::before { content: ""; width: 3px; height: 3px; margin-right: 1px; border-radius: 50%; background: var(--input-line); } .mega-area__stats .wch-icon { width: 14px; height: 14px; color: var(--green); } /* Side card */ .mega__side { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--green); color: #fff; overflow: hidden; isolation: isolate; } .mega__side::after { content: ""; position: absolute; right: -60px; top: -60px; z-index: -1; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 208, 76, .22), rgba(247, 208, 76, 0) 70%); } .mega__side--photo { background: linear-gradient(to bottom, rgba(18, 58, 30, .35) 10%, rgba(18, 58, 30, .92) 62%), var(--green); } /* The side photo also waits until the menu has been opened once. */ .mega-ready .mega__side--photo { background: linear-gradient(to bottom, rgba(18, 58, 30, .05) 10%, rgba(18, 58, 30, .92) 62%), var(--mega-photo) center / cover no-repeat, var(--green); } .mega__side--photo::after { display: none; } .mega__side-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); } .mega__side--photo .mega__side-eyebrow { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(20, 32, 26, .55); backdrop-filter: blur(6px); } .mega__side-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #fff; } .mega__side-text { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .82); } .mega__stat { margin: auto 0 0; font-size: 14px; color: rgba(255, 255, 255, .85); } .mega__side--photo .mega__stat { padding-top: 70px; } .mega__stat b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; } .mega__facts { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 6px; } .mega__facts li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .88); } .mega__facts .wch-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: rgba(247, 208, 76, .16); color: var(--yellow); } .nav__list .mega .mega__btn { margin-top: 6px; align-self: stretch; justify-content: center; display: inline-flex; min-height: 46px; } .nav__list .mega .mega__btn .wch-icon { width: 16px; height: 16px; } .nav__list .mega--tools .mega__btn { margin-top: auto; } /* Tools */ .mega-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; } .mega-tool { position: relative; display: flex !important; align-items: flex-start; gap: 14px; height: 100%; padding: 14px 40px 14px 14px !important; border: 1px solid var(--line); border-radius: 16px; color: var(--ink) !important; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; } .mega-tool::before { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: rotate(45deg) translate(-4px, 4px); opacity: 0; transition: opacity .2s, transform .2s; } .mega-tool:hover, .mega-tool:focus-visible { border-color: transparent; background: #fff; box-shadow: 0 10px 28px rgba(20, 32, 26, .1); transform: translateY(-2px); } .mega-tool:hover::before, .mega-tool:focus-visible::before { opacity: 1; transform: rotate(45deg); } .mega-tools > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .mega-tool.is-current { background: var(--bg-tint); border-color: transparent; } .mega-tool:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; } .mega-tool__icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-green-tint); color: var(--green); transition: background .2s, color .2s; } .mega-tool__icon .wch-icon { width: 22px; height: 22px; } .mega-tool:hover .mega-tool__icon, .mega-tool.is-current .mega-tool__icon { background: var(--green); color: var(--yellow); } .mega-tool__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mega-tool__text b { font-size: 15px; font-weight: 800; line-height: 1.3; } .mega-tool__text small { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--muted); } @media (max-width: 1240px) { .mega--areas .mega__inner { grid-template-columns: 210px minmax(0, 1fr); } .mega--areas .mega__side { display: none; } .mega__inner { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; } } @media (prefers-reduced-motion: reduce) { .mega, .mega-area__img, .mega-tool { transition: none; } .mega-panel { animation: none; } } /* ===== Signature font (Mrs Saint Delafield, SIL OFL) ===== */ @font-face { font-family: 'Signature'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/mrs-saint-delafield-latin-400-normal.woff2) format('woff2'); } /* ===== Quote with signature ===== */ .sigq__card { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: stretch; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(135deg, #FBFAF6 0%, #EEF1EC 100%); border: 1px solid var(--line); } .sigq:not(.has-image) .sigq__card { grid-template-columns: minmax(0, 1fr); } .sigq__card::before { content: ""; position: absolute; right: 22%; top: -30%; width: 70%; height: 160%; background: linear-gradient(115deg, transparent 45%, rgba(27, 73, 39, .05) 45%, rgba(27, 73, 39, .05) 60%, transparent 60%); pointer-events: none; } .sigq__copy { position: relative; padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; } .sigq__mark { display: block; height: 64px; margin: 6px 0 -6px -6px; font-family: Georgia, serif; font-size: 120px; line-height: 1; color: var(--yellow); } .sigq__quote { margin: 0; padding: 0; border: 0; } .sigq__quote p { margin: 0 0 10px; font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); } .sigq__quote em { font-style: normal; color: var(--green); box-shadow: inset 0 -.32em 0 rgba(247, 208, 76, .55); } .sigq__note { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--body); } .sigq__sign { display: flex; flex-direction: column; margin-top: 26px; } .sigq__signature { font-family: 'Signature', 'Brush Script MT', cursive; font-size: clamp(54px, 5.4vw, 78px); line-height: 1; color: var(--green); transform: rotate(-4deg); transform-origin: left center; margin-left: -4px; } .sigq__role { margin-top: 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .sigq__media { position: relative; min-height: 420px; } .sigq__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(238, 241, 236, .9) 0%, rgba(238, 241, 236, 0) 28%); } .sigq__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; } .sigq--dark .sigq__card { background: linear-gradient(135deg, #1B4927 0%, #123A1E 100%); border-color: transparent; } .sigq--dark .sigq__quote p, .sigq--dark .sigq__quote em { color: #fff; } .sigq--dark .sigq__quote em { box-shadow: inset 0 -.32em 0 rgba(247, 208, 76, .4); } .sigq--dark .sigq__note { color: rgba(255, 255, 255, .8); } .sigq--dark .sigq__signature { color: var(--yellow); } .sigq--dark .sigq__role { color: rgba(255, 255, 255, .65); } .sigq--dark .eyebrow { color: var(--yellow); } .sigq--dark .sigq__media::before { background: linear-gradient(90deg, #163F21 0%, rgba(22, 63, 33, 0) 30%); } @media (max-width: 860px) { .sigq__card { grid-template-columns: minmax(0, 1fr); } .sigq__media { order: -1; min-height: 320px; } .sigq__media::before { background: linear-gradient(0deg, rgba(238, 241, 236, .95) 0%, rgba(238, 241, 236, 0) 35%); } .sigq--dark .sigq__media::before { background: linear-gradient(0deg, #1B4927 0%, rgba(27, 73, 39, 0) 35%); } } /* ===== Timeline ===== */ .tl { list-style: none; margin: 0; padding: 0; position: relative; } .tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--yellow), var(--green)); border-radius: 2px; } .tl__item { position: relative; width: 50%; padding: 0 44px 34px 0; } .tl__item.is-right { margin-left: 50%; padding: 0 0 34px 44px; } .tl__dot { position: absolute; top: 14px; right: -22px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--green); box-shadow: 0 0 0 4px var(--bg-warm), 0 0 0 5px var(--line); } .tl__item.is-right .tl__dot { right: auto; left: -22px; } .tl__dot .wch-icon { width: 20px; height: 20px; } .tl__card { position: relative; padding: 22px 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s ease; } .tl__card:hover { transform: translateY(-3px); } .bg-white .tl__card { background: var(--bg-tint); box-shadow: none; } .tl__year { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px; background: var(--yellow); font-size: 13px; font-weight: 800; color: var(--ink); } .tl__title { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } .tl__card p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5650; } @media (max-width: 860px) { .tl::before { left: 22px; } .tl__item, .tl__item.is-right { width: auto; margin-left: 0; padding: 0 0 22px 64px; } .tl__dot, .tl__item.is-right .tl__dot { left: 0; right: auto; top: 10px; } } /* ===== Photo stories ===== */ .stories__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 16px; } .story { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-tint); } .story:first-child { grid-column: span 2; grid-row: span 2; } .story img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s ease; } .story:hover img { transform: scale(1.05); } .story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 26, 16, .82) 0%, rgba(10, 26, 16, .25) 45%, rgba(10, 26, 16, 0) 70%); } .story__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 20px; color: #fff; } .story__tag { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .story__title { margin: 0; font-size: 19px; font-weight: 800; color: #fff; } .story:first-child .story__title { font-size: 26px; } .story__cap p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); } @media (max-width: 1000px) { .stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; } } @media (max-width: 560px) { .stories__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; } .story:first-child { grid-column: auto; grid-row: span 1; } } @media (prefers-reduced-motion: reduce) { .story img, .tl__card { transition: none; } } @media (min-width: 861px) { .tl__item + .tl__item { margin-top: -72px; } } /* Pull quote inside text blocks */ .prose blockquote { margin: 20px 0; padding: 18px 22px; border-left: 4px solid var(--yellow); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-warm); font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--ink); } .prose blockquote p { margin: 0; } /* ---------- 404: "This page is off the market" ---------- */ .e404 { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(40px, 5vw, 64px); background: radial-gradient(90% 80% at 85% 10%, #22603A 0%, #16391F 45%, #0E2215 100%); color: #fff; } .e404::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); } .e404__ghost { position: absolute; left: -2vw; bottom: -6vw; z-index: -1; font-size: clamp(220px, 34vw, 520px); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(247, 208, 76, .08); user-select: none; pointer-events: none; } .e404__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .e404__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .e404__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--yellow); } .e404__title { margin: 16px 0 0; font-size: clamp(46px, 7.2vw, 104px); font-weight: 800; line-height: .95; letter-spacing: -.045em; color: #fff; } .e404__title em { font-style: normal; color: var(--yellow); position: relative; white-space: nowrap; } .e404__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .07em; border-radius: 99px; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: left; animation: e404-strike .7s cubic-bezier(.7, 0, .2, 1) .6s forwards; } @keyframes e404-strike { to { transform: scaleX(1); } } .e404__text { margin: 22px 0 0; max-width: 520px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(233, 239, 234, .82); } .e404__search { display: flex; align-items: center; gap: 10px; max-width: 520px; margin-top: 28px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); transition: border-color .2s, background .2s; } .e404__search:focus-within { border-color: var(--yellow); background: rgba(255, 255, 255, .12); } .e404__search > .wch-icon { flex: none; width: 20px; height: 20px; color: var(--yellow); } .e404__search input { flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #fff; outline: none; } .e404__search input::placeholder { color: rgba(233, 239, 234, .55); } .e404__search button { flex: none; padding: 11px 20px; border: 0; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; transition: background .2s; } .e404__search button:hover { background: var(--yellow); } .e404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; } .e404__actions .btn .wch-icon { width: 16px; height: 16px; } .e404__call { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: rgba(247, 208, 76, .6); text-underline-offset: 4px; } .e404__call .wch-icon { width: 18px; height: 18px; color: var(--yellow); } .e404__call:hover { color: var(--yellow); } /* The yard sign */ .e404__sign { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 440 / 520; } .e404__post { position: absolute; left: 8%; top: 0; bottom: 6%; width: 18px; border-radius: 4px; background: linear-gradient(90deg, #EDEFEA, #fff 40%, #C9CEC8); box-shadow: 8px 10px 30px rgba(0, 0, 0, .35); } .e404__arm { position: absolute; left: 8%; top: 7%; right: 4%; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #fff, #CFD4CD); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); } .e404__arm::after { content: ""; position: absolute; right: -6px; top: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); } .e404__ground { position: absolute; left: -4%; right: 10%; bottom: 3%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); } .e404__swing { position: absolute; left: 24%; right: 6%; top: 10%; transform-origin: 50% 0; animation: e404-swing 4.5s ease-in-out infinite; } .e404__swing::before, .e404__swing::after { content: ""; position: absolute; top: 0; width: 2px; height: 34px; background: repeating-linear-gradient(180deg, #D8DCD6 0 5px, transparent 5px 7px); } .e404__swing::before { left: 16%; } .e404__swing::after { right: 16%; } @keyframes e404-swing { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } .e404__board { position: relative; margin-top: 34px; display: flex; flex-direction: column; align-items: center; padding: 22px 18px 24px; border-radius: 14px; background: #fff; color: var(--green); box-shadow: 0 30px 60px rgba(0, 0, 0, .4), inset 0 0 0 6px var(--green), inset 0 0 0 9px #fff, inset 0 0 0 11px var(--yellow); text-align: center; } .e404__brand { font-size: clamp(11px, 1vw, 13px); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); } .e404__num { display: inline-flex; align-items: center; margin-top: 4px; font-size: clamp(80px, 10vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -.06em; color: var(--green); } .e404__house { display: inline-flex; align-items: center; justify-content: center; width: .78em; height: .78em; margin: 0 .04em; border-radius: 50%; background: var(--yellow); color: var(--green); } .e404__house .wch-icon { width: 54%; height: 54%; } .e404__sub { margin-top: 2px; font-size: clamp(14px, 1.3vw, 17px); font-weight: 800; letter-spacing: .02em; color: var(--ink); } .e404__rider { position: relative; width: 82%; margin: 10px auto 0; padding: 10px 12px; border-radius: 8px; background: var(--yellow); color: var(--ink); font-size: clamp(15px, 1.5vw, 20px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; box-shadow: 0 16px 30px rgba(0, 0, 0, .3); transform: rotate(-2deg); } .e404__rider::before, .e404__rider::after { content: ""; position: absolute; top: -12px; width: 2px; height: 12px; background: #D8DCD6; } .e404__rider::before { left: 20%; } .e404__rider::after { right: 20%; } /* Popular pages */ .e404__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); } .e404__links-title { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 239, 234, .6); } .e404__links ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .e404__links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); font-size: 14.5px; font-weight: 700; color: #fff; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; } .e404__links a .wch-icon { width: 16px; height: 16px; color: var(--yellow); transition: color .2s; } .e404__links a:hover, .e404__links a:focus-visible { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: translateY(-2px); } .e404__links a:hover .wch-icon, .e404__links a:focus-visible .wch-icon { color: var(--ink); } @media (max-width: 900px) { .e404__inner { grid-template-columns: 1fr; } .e404__sign { order: -1; width: min(78%, 320px); } .e404__title { font-size: clamp(44px, 12vw, 72px); } } @media (max-width: 480px) { .e404__search button { padding: 11px 14px; } .e404__rider { letter-spacing: .04em; font-size: 14px; } .e404 { padding-top: 36px; } .e404__links-title { flex: 0 0 100%; } } @media (prefers-reduced-motion: reduce) { .e404__swing { animation: none; } .e404__title em::after { animation: none; transform: scaleX(1); } } /* ---------- Search results ---------- */ .search-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(40px, 5vw, 64px); background: radial-gradient(90% 90% at 90% 0%, #22603A 0%, #16391F 50%, #0E2215 100%); color: #fff; } .search-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 70%); } .search-hero .breadcrumbs, .search-hero .breadcrumbs a { color: rgba(233, 239, 234, .7); } .search-hero .breadcrumbs [aria-current] { color: #fff; } .search-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .search-hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--yellow); } .search-hero__title { margin: 12px 0 0; max-width: 900px; font-size: clamp(38px, 5.4vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; overflow-wrap: anywhere; } .search-hero__title em { font-style: normal; color: var(--yellow); } .search-hero__form { display: flex; align-items: center; gap: 10px; max-width: 720px; margin-top: 26px; padding: 7px 7px 7px 22px; border-radius: 999px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); } .search-hero__form > .wch-icon { flex: none; width: 22px; height: 22px; color: var(--green); } .search-hero__form input { flex: 1; min-width: 0; padding: 12px 4px; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); outline: none; } .search-hero__form input::-webkit-search-cancel-button { cursor: pointer; } .search-hero__form button { flex: none; padding: 13px 26px; border: 0; border-radius: 999px; background: var(--green); font: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; transition: background .2s, color .2s; } .search-hero__form button:hover { background: var(--yellow); color: var(--ink); } .search-hero__form:focus-within { box-shadow: 0 0 0 4px rgba(247, 208, 76, .55), 0 20px 50px rgba(0, 0, 0, .25); } .search-hero__count { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: rgba(233, 239, 234, .75); } .search-list { padding: 40px var(--gutter); background: var(--bg-warm); } .search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .search-filters a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14.5px; font-weight: 700; color: var(--body); text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .search-filters a .wch-icon { width: 16px; height: 16px; color: var(--green); } .search-filters a span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--bg-tint); font-size: 12px; font-weight: 800; text-align: center; color: var(--muted); } .search-filters a:hover { border-color: var(--green); color: var(--ink); } .search-filters a[aria-current] { background: var(--green); border-color: var(--green); color: #fff; } .search-filters a[aria-current] .wch-icon { color: var(--yellow); } .search-filters a[aria-current] span { background: rgba(255, 255, 255, .16); color: #fff; } .search-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .search-card { min-width: 0; } .search-card.is-new { animation: search-in .45s ease both; } @keyframes search-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .search-card__link { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; } .search-card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .search-card__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } .search-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--placeholder); } .search-card__img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center 25%; display: block; transition: transform .6s ease; } .search-card__link:hover .search-card__img { transform: scale(1.05); } .search-card__type { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); } .search-card__type .wch-icon { width: 14px; height: 14px; color: var(--green); } /* No image: a designed tile with the type colour, a big letter and the type icon */ .search-card__media.is-empty { --tile-a: #1B4927; --tile-b: #0F2A17; background: radial-gradient(120% 120% at 100% 0%, var(--tile-a), var(--tile-b)); } .search-card--tool .search-card__media.is-empty { --tile-a: #2A3A33; --tile-b: #14201A; } .search-card--insight .search-card__media.is-empty { --tile-a: #F7D04C; --tile-b: #E9B92E; } .search-card--page .search-card__media.is-empty { --tile-a: #2C6B42; --tile-b: #1B4927; } .search-card__media.is-empty::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 28px 28px; } .search-card--insight .search-card__media.is-empty::before { background-image: linear-gradient(rgba(20, 32, 26, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 32, 26, .07) 1px, transparent 1px); } .search-card__letter { position: absolute; right: -.06em; bottom: -.28em; font-size: clamp(150px, 15vw, 210px); font-weight: 800; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(247, 208, 76, .35); transition: transform .6s ease; } .search-card--insight .search-card__letter { -webkit-text-stroke-color: rgba(20, 32, 26, .22); } .search-card__icon { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -30px 0 0 -36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: var(--yellow); backdrop-filter: blur(4px); transition: transform .4s ease; } .search-card__icon .wch-icon { width: 34px; height: 34px; } .search-card--insight .search-card__icon { background: rgba(255, 255, 255, .4); border-color: rgba(20, 32, 26, .12); color: var(--ink); } .search-card__link:hover .search-card__icon { transform: translateY(-4px) rotate(-6deg); } .search-card__link:hover .search-card__letter { transform: translateX(-8px); } .search-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; } .search-card__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); } .search-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .search-card mark { padding: 0 .12em; border-radius: 4px; background: rgba(247, 208, 76, .55); color: inherit; } .search-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 800; color: var(--green); } .search-card__more .wch-icon { width: 15px; height: 15px; transition: transform .25s; } .search-card__link:hover .search-card__more .wch-icon { transform: translateX(4px); } .search-more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; } .search-more__status { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); } .search-more__btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 800; color: var(--green); text-decoration: none; transition: background .2s, color .2s; } .search-more__btn:hover { background: var(--green); color: #fff; } .search-more__spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: search-spin .8s linear infinite; } .search-more__btn.is-loading .search-more__spin { display: inline-block; } @keyframes search-spin { to { transform: rotate(360deg); } } .search-empty { max-width: 640px; margin: 10px auto; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: #fff; border: 1px solid var(--line); text-align: center; } .search-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--bg-green-tint); color: var(--green); } .search-empty__icon .wch-icon { width: 32px; height: 32px; } .search-empty__title { margin: 18px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; } .search-empty__text { margin: 10px auto 0; max-width: 480px; font-size: 16px; line-height: 1.6; color: var(--body); } .search-empty__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 26px; padding: 0; list-style: none; } .search-empty__links a { display: inline-flex; padding: 8px 15px; border-radius: 999px; background: var(--bg-tint); font-size: 14.5px; font-weight: 700; color: var(--ink); text-decoration: none; transition: background .2s, color .2s; } .search-empty__links a:hover { background: var(--yellow); } .search-empty .btn .wch-icon { width: 16px; height: 16px; } @media (max-width: 1000px) { .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .search-grid { grid-template-columns: 1fr; gap: 16px; } .search-hero__form { padding-left: 16px; } .search-hero__form button { padding: 12px 16px; } .search-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; } .search-filters a { flex: none; } } @media (prefers-reduced-motion: reduce) { .search-card.is-new, .search-more__spin { animation: none; } .search-card__link, .search-card__img, .search-card__icon, .search-card__letter { transition: none; } } /* Page header: full screen below the header, the same as the homepage hero */ .page-hero--cover.is-tall.is-full, .admin-bar .page-hero--cover.is-tall.is-full { min-height: calc(100vh - var(--header-h) - var(--topbar-h, 0px) - var(--wpab, 0px)); min-height: calc(100svh - var(--header-h) - var(--topbar-h, 0px) - var(--wpab, 0px)); } /* Gravity Forms errors: message under the input, so fields in a row stay lined up */ .wch-gf .gfield:not(.gform_validation_container) { display: flex; flex-direction: column; } .wch-gf .gfield > .gfield_label, .wch-gf .gfield > legend { order: 1; } .wch-gf .gfield > .gfield_description:not(.validation_message):not(.gfield_validation_message) { order: 2; } .wch-gf .gfield > .ginput_container, .wch-gf .gfield > .ginput_complex { order: 3; } .wch-gf .gfield > .gfield_validation_message, .wch-gf .gfield > .validation_message { order: 4; display: flex; align-items: center; gap: 6px; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; font-weight: 700; line-height: 1.4; color: #B42318 !important; } .wch-gf .gfield > .gfield_validation_message::before, .wch-gf .gfield > .validation_message::before { content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #B42318; font-size: 11px; font-weight: 800; color: #fff; } .wch-gf .gfield_error input:not([type=submit]), .wch-gf .gfield_error select, .wch-gf .gfield_error textarea { border-color: #D92D20 !important; background: #FEF3F2 !important; } .wch-gf .gfield_error .gfield_label { color: var(--ink) !important; } .gform_wrapper .gform_validation_errors { margin-bottom: 16px !important; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid #FECDCA !important; background: #FEF3F2 !important; box-shadow: none !important; } .gform_wrapper .gform_validation_errors > h2 { font-size: 14px !important; font-weight: 700 !important; color: #B42318 !important; } /* ---------- Office map (Contact page) ---------- */ .office-map__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; } .office-map__info { display: flex; flex-direction: column; gap: 18px; justify-content: center; } .office-map__info .title { margin-bottom: 4px; } .office-map__card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--bg-warm); border: 1px solid var(--line); } .office-map__seal { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--green); color: var(--yellow); } .office-map__seal .wch-icon { width: 24px; height: 24px; } .office-map__place { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); } .office-map__address { margin: 2px 0 0; font-style: normal; font-size: 15px; line-height: 1.5; color: var(--body); } .office-map__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; } .office-map__facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); } .office-map__facts .wch-icon { width: 18px; height: 18px; color: var(--green); } .office-map__facts a { color: inherit; text-decoration: none; } .office-map__facts a:hover { color: var(--green); text-decoration: underline; } .office-map__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); } .office-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; } .office-map__actions .btn .wch-icon { width: 16px; height: 16px; } .office-map__book { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--green); text-decoration: none; } .office-map__book .wch-icon { width: 18px; height: 18px; } .office-map__book:hover { text-decoration: underline; text-underline-offset: 4px; } .office-map__frame { position: relative; min-height: 440px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(20, 32, 26, .12); isolation: isolate; background: #EEECE6; } .office-map__frame::after { content: ""; position: absolute; inset: 0; z-index: 500; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .6); } .office-map__canvas { position: absolute; inset: 0; z-index: 0; } .office-map__canvas .leaflet-tile-pane { filter: grayscale(.92) sepia(.12) contrast(.92) brightness(1.06); } .office-map__canvas .leaflet-control-zoom { border: 0; box-shadow: 0 8px 20px rgba(20, 32, 26, .15); border-radius: 12px; overflow: hidden; } .office-map__canvas .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; color: var(--ink); } .office-map__canvas .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .8); } .office-pin { background: none; border: 0; } .office-pin__dot { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); color: var(--yellow); border: 3px solid #fff; box-shadow: 0 10px 24px rgba(20, 32, 26, .35); } .office-pin__dot svg { width: 22px; height: 22px; } .office-pin__pulse { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(247, 208, 76, .55); animation: office-pulse 2.2s ease-out infinite; } @keyframes office-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } } @media (max-width: 900px) { .office-map__grid { grid-template-columns: 1fr; } .office-map__frame { min-height: 340px; border-radius: 22px; } } @media (prefers-reduced-motion: reduce) { .office-pin__pulse { animation: none; opacity: .4; } } /* FAQ page: topic jump links */ .faq-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; } .faq-topics a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; } .faq-topics a span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--bg-tint); font-size: 12px; font-weight: 800; text-align: center; color: var(--muted); } .faq-topics a:hover, .faq-topics a:focus-visible { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-1px); } .faq-topics a:hover span, .faq-topics a:focus-visible span { background: rgba(255, 255, 255, .18); color: #fff; } .faq-note { margin: 18px 0 0 !important; font-size: 14px !important; color: var(--muted) !important; } html { scroll-padding-top: calc(var(--header-h, 90px) + 16px); } /* Video headers: the cover image shows at once, the video fades in over it */ .page-hero__poster.is-soft { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; filter: blur(8px); transform: scale(1.06); } /* Responsive QA fixes */ .comment-form input:not([type=submit]):not([type=checkbox]), .comment-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; } /* Comfortable tap targets (WCAG 2.2: at least 24px) */ .topbar a { display: inline-flex; align-items: center; min-height: 28px; } .footer-nav__list:not(.footer-contact) a { display: inline-block; padding: 3px 0; } .footer-contact a { min-height: 28px; } .review__more { min-height: 28px; } .reviews--v2 .dots { gap: 0; } .reviews--v2 .dot { box-sizing: content-box; border: 7px solid transparent !important; background-clip: padding-box; } /* Keep the page still while the phone menu is open */ html.menu-open, html.menu-open body { overflow: hidden; } /* ---------- Single post v2 ---------- */ .reading-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 3px; pointer-events: none; } .admin-bar .reading-progress { top: 32px; } .reading-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--yellow), #F7D877); } .post-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(120px, 12vw, 170px); background: radial-gradient(90% 90% at 90% 0%, #22603A 0%, #16391F 50%, #0E2215 100%); color: #fff; } .post-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 70%); } .post-hero .container { max-width: 980px; } .post-hero .breadcrumbs, .post-hero .breadcrumbs a { color: rgba(233, 239, 234, .7); } .post-hero .breadcrumbs [aria-current] { color: #fff; } .post-hero__cat { display: inline-flex; margin-top: 20px; padding: 6px 13px; border-radius: 999px; background: var(--yellow); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .post-hero__cat:hover { background: #fff; } .post-hero__title { margin: 16px 0 0; font-size: clamp(36px, 5.2vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: #fff; } .post-hero__excerpt { margin: 18px 0 0; max-width: 720px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: rgba(233, 239, 234, .85); } .post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; } .post-hero__author { display: inline-flex; align-items: center; gap: 12px; } .post-hero__avatar { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--yellow); } .post-hero__author b { display: block; font-size: 15.5px; font-weight: 800; color: #fff; } .post-hero__author small { display: block; font-size: 13px; color: rgba(233, 239, 234, .7); } .post-hero__fact { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: rgba(233, 239, 234, .85); } .post-hero__fact .wch-icon { width: 16px; height: 16px; color: var(--yellow); } .post-cover-wrap { position: relative; z-index: 2; max-width: 1180px; margin: calc(-1 * clamp(90px, 10vw, 140px)) auto 0; padding: 0 var(--gutter); } .post-cover-v2 { margin: 0; aspect-ratio: 21 / 9; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px rgba(20, 32, 26, .22); background: var(--placeholder); } .post-cover-v2 img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .post-layout { display: grid; grid-template-columns: 270px minmax(0, 720px); justify-content: center; gap: clamp(40px, 5vw, 80px); max-width: 1180px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) 56px; } .post-aside__inner { position: sticky; top: calc(var(--header-h, 90px) + 24px); display: flex; flex-direction: column; gap: 22px; } .post-aside__title { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .post-toc ol { list-style: none; margin: 0; padding: 0 0 0 2px; border-left: 2px solid var(--line); } .post-toc li { margin: 0; } .post-toc a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; } .post-toc a:hover { color: var(--ink); } .post-toc a.is-active { border-left-color: var(--green); color: var(--green); font-weight: 800; } .post-share { display: flex; flex-wrap: wrap; gap: 8px; } .post-share__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; } .post-share__btn .wch-icon { width: 18px; height: 18px; } .post-share__btn:hover, .post-share__btn:focus-visible { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); } .post-share__done { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: var(--ink); font-size: 12px; font-weight: 700; color: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; } .post-share__done:not(:empty) { opacity: 1; } .post-aside__cta { padding: 20px; border-radius: 20px; background: var(--green); color: #fff; } .post-aside__photo { width: 64px !important; height: 64px !important; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--yellow); } .post-aside__cta p { margin: 12px 0 14px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); } .post-aside__cta b { display: block; margin-bottom: 4px; font-size: 17px; color: #fff; } .post-aside__cta .btn { width: 100%; justify-content: center; } .post-toc-mobile { display: none; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-warm); } .post-toc-mobile summary { padding: 14px 18px; font-weight: 800; color: var(--ink); cursor: pointer; } .post-toc-mobile ol { margin: 0; padding: 0 18px 14px 36px; } .post-toc-mobile li { margin: 6px 0; } .post-toc-mobile a { color: var(--green); font-weight: 600; text-decoration: none; } .prose--post { font-size: 18.5px; } .prose--post > p:first-of-type { font-size: 21px; line-height: 1.65; color: var(--ink); } .prose--post h2 { scroll-margin-top: calc(var(--header-h, 90px) + 20px); } .prose--post figure { margin: 32px 0; } .prose--post figure img { width: 100%; height: auto; border-radius: 20px; } .prose--post figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; } .post-takeaways { margin: 0 0 36px; padding: 24px 26px; border-radius: 20px; background: var(--bg-green-tint); border: 1px solid rgba(27, 73, 39, .12); } .post-takeaways > p:first-child { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green) !important; } .post-takeaways ul { margin: 0; padding: 0; list-style: none; } .post-takeaways li { position: relative; margin: 8px 0; padding-left: 30px; font-size: 17px; line-height: 1.55; color: var(--ink); } .post-takeaways li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7D04C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; } .post-callout { margin: 30px 0; padding: 20px 22px 20px 58px; position: relative; border-radius: 16px; background: #FFF8E1; border: 1px solid #F3DE94; } .post-callout::before { content: "!"; position: absolute; left: 20px; top: 20px; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); font-weight: 800; font-size: 14px; line-height: 24px; text-align: center; color: var(--ink); } .post-callout p { margin: 0 !important; font-size: 16.5px !important; line-height: 1.6; color: var(--ink) !important; } .post-callout p + p { margin-top: 8px !important; } .post-checklist { margin: 24px 0; padding: 0; list-style: none; counter-reset: chk; } .post-checklist li { position: relative; margin: 0 0 12px; padding: 16px 18px 16px 62px; border-radius: 16px; border: 1px solid var(--line); background: #fff; counter-increment: chk; } .post-checklist li::before { content: counter(chk); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--green); font-size: 14px; font-weight: 800; line-height: 30px; text-align: center; color: var(--yellow); } .post-checklist li::marker { content: none; } .post-checklist strong { display: block; color: var(--ink); } .post-disclaimer { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); } .post-endshare { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; font-weight: 700; color: var(--ink); } .post-author { display: flex; gap: 24px; align-items: flex-start; margin-top: 40px; padding: 28px; border-radius: 24px; background: var(--bg-warm); border: 1px solid var(--line); } .post-author__photo { flex: none; width: 110px !important; height: 110px !important; border-radius: 22px; object-fit: cover; object-position: center 20%; } .post-author__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); } .post-author__name { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--ink); } .post-author p { margin: 8px 0 16px; font-size: 16px; line-height: 1.6; color: var(--body); } .post-author__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .post-author__links .btn .wch-icon { width: 16px; height: 16px; } .post-author__more { font-weight: 800; color: var(--green); } .post-related { padding: 56px var(--gutter); background: var(--bg-warm); } .post-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .post-related__head .h2 { margin: 6px 0 0; } .post-related__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--green); text-decoration: none; } .post-related__all .wch-icon { width: 16px; height: 16px; } .post-cta { padding: 48px var(--gutter); background: var(--green); color: #fff; } .post-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; } .post-cta__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); } .post-cta__title { margin: 8px 0 0; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; } .post-cta__title em { font-style: normal; color: var(--yellow); } .post-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .post-cta .btn .wch-icon { width: 16px; height: 16px; } .btn-outline-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7); } .btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; } @media (max-width: 1060px) { .post-layout { grid-template-columns: minmax(0, 720px); } .post-aside { display: none; } .post-toc-mobile { display: block; } } @media (max-width: 640px) { .post-cover-v2 { aspect-ratio: 4 / 3; border-radius: 20px; } .post-author { flex-direction: column; padding: 22px; } .post-author__photo { width: 88px !important; height: 88px !important; } .prose--post { font-size: 17.5px; } .prose--post > p:first-of-type { font-size: 19px; } .post-cta__actions, .post-cta__actions .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .reading-progress { display: none; } } /* Valuation band with 40px spacing: keep the skyline tight under the form */ .valuation.space-compact .valuation-card { padding-bottom: clamp(56px, 6vw, 80px); } .valuation.space-compact .valuation-skyline { height: clamp(56px, 6vw, 80px); } /* The full-width valuation band is its own coloured panel: no white spacing around it */ .section.valuation.valuation--full.space-compact { padding: 0 !important; } /* ---------- Market Insights (blog index) ---------- */ .blog-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(48px, 5vw, 72px); background: radial-gradient(90% 90% at 90% 0%, #22603A 0%, #16391F 50%, #0E2215 100%); color: #fff; } .blog-hero.has-featured { padding-bottom: clamp(150px, 14vw, 200px); } .blog-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 70%); } .blog-hero .breadcrumbs, .blog-hero .breadcrumbs a { color: rgba(233, 239, 234, .7); } .blog-hero .breadcrumbs [aria-current] { color: #fff; } .blog-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-top: 18px; } .blog-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); } .blog-hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--yellow); } .blog-hero__title { margin: 12px 0 0; font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: #fff; } .blog-hero__title em { font-style: normal; color: var(--yellow); } .blog-hero__intro { margin: 16px 0 0; max-width: 620px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(233, 239, 234, .82); } .blog-hero__search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); transition: border-color .2s, background .2s; } .blog-hero__search:focus-within { border-color: var(--yellow); background: rgba(255, 255, 255, .12); } .blog-hero__search > .wch-icon { flex: none; width: 20px; height: 20px; color: var(--yellow); } .blog-hero__search input[type=search] { flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #fff; outline: none; } .blog-hero__search input::placeholder { color: rgba(233, 239, 234, .55); } .blog-hero__search button { flex: none; padding: 11px 20px; border: 0; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; transition: background .2s; } .blog-hero__search button:hover { background: var(--yellow); } .blog-featured-wrap { position: relative; z-index: 2; max-width: var(--container); margin: calc(-1 * clamp(110px, 11vw, 150px)) auto 0; padding: 0 var(--gutter); } .blog-featured__link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px rgba(20, 32, 26, .18); color: var(--ink); text-decoration: none; transition: transform .3s, box-shadow .3s; } .blog-featured__link:hover { transform: translateY(-4px); box-shadow: 0 50px 90px rgba(20, 32, 26, .22); } .blog-featured__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; } .blog-featured__media { position: relative; display: block; min-height: 340px; overflow: hidden; background: var(--placeholder); } .blog-featured__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s; } .blog-featured__link:hover .blog-featured__media img { transform: scale(1.04); } .blog-featured__badge { position: absolute; left: 18px; top: 18px; padding: 6px 13px; border-radius: 999px; background: var(--yellow); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .blog-featured__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 3.5vw, 48px); } .blog-featured__title { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--ink); transition: color .2s; } .blog-featured__link:hover .blog-featured__title { color: var(--green); } .blog-featured__excerpt { font-size: 17px; line-height: 1.6; color: var(--body); } .blog-featured__more, .post__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 800; color: var(--green); } .blog-featured__more .wch-icon, .post__more .wch-icon { width: 16px; height: 16px; transition: transform .25s; } .blog-featured__link:hover .blog-featured__more .wch-icon, .post__link:hover .post__more .wch-icon { transform: translateX(4px); } .blog-list { padding: clamp(40px, 5vw, 56px) var(--gutter) 56px; } .blog-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .blog-topics a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 15px; font-weight: 700; color: var(--body); text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .blog-topics a span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--bg-tint); font-size: 12px; font-weight: 800; text-align: center; color: var(--muted); } .blog-topics a:hover { border-color: var(--green); color: var(--ink); } .blog-topics a[aria-current] { background: var(--green); border-color: var(--green); color: #fff; } .blog-topics a[aria-current] span { background: rgba(255, 255, 255, .16); color: #fff; } .blog-list__note { color: var(--muted); } /* Post cards v2 (also used in "Keep reading") */ .post-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; } .post__link { height: 100%; gap: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; } .post__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .post__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } .post-thumb { position: relative; border-radius: 0; } .post-thumb__tag { position: absolute; left: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); } .post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; } .post__title { font-size: 21px; } .post__excerpt { font-size: 15px; line-height: 1.6; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-related .post__link, .blog-list .post__link { background: #fff; } .blog-guides { padding: 48px var(--gutter) 56px; background: var(--bg-warm); } .blog-guides__head { margin-bottom: 24px; } .blog-guides__head .h2 { margin: 6px 0 0; } .blog-guides__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .blog-guide { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; } .blog-guide:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; } .blog-guide__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--bg-green-tint); color: var(--green); transition: background .2s, color .2s; } .blog-guide__icon .wch-icon { width: 22px; height: 22px; } .blog-guide:hover .blog-guide__icon { background: var(--green); color: var(--yellow); } .blog-guide__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .blog-guide__text b { font-size: 16px; font-weight: 800; } .blog-guide__text small { font-size: 13px; line-height: 1.4; color: var(--muted); } .blog-guide__arrow { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--green); } @media (max-width: 1000px) { .blog-hero__grid { grid-template-columns: 1fr; } .blog-featured__link { grid-template-columns: 1fr; } .blog-featured__media { min-height: 0; aspect-ratio: 16 / 10; } .blog-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .blog-guides__grid { grid-template-columns: 1fr; } .blog-featured__link { border-radius: 22px; } } @media (max-width: 1199px) { .blog-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .blog-guides__grid { grid-template-columns: 1fr; } } /* ---------- Tool guide (Tools page: which calculator to start with) ---------- */ .section.tool-guide { position: relative; overflow: hidden; isolation: isolate; } .tool-guide.bg-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 55% at 90% 0%, rgba(247, 208, 76, .14), transparent 70%), radial-gradient(30% 45% at 0% 100%, rgba(247, 208, 76, .08), transparent 70%); } .tool-guide .eyebrow { color: var(--yellow); } .tool-guide .title h2, .tool-guide .title .h2 { color: #fff; } .tool-guide .title em { color: var(--yellow); } .tool-guide .section-intro::before { background: linear-gradient(180deg, var(--yellow), rgba(247, 208, 76, .25)); } .tool-guide .section-intro p { color: rgba(233, 239, 234, .78); } .tool-guide__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: none; } .tool-guide__card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, background .35s; } .tool-guide__card:hover { transform: translateY(-6px); border-color: rgba(247, 208, 76, .55); background: rgba(255, 255, 255, .09); } .tool-guide__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1F5530; } .tool-guide__photo img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); } .tool-guide__card:hover .tool-guide__photo img { transform: scale(1.06); } .tool-guide__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 36, 22, 0) 45%, rgba(15, 36, 22, .72) 100%); } .tool-guide__tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; } .tool-guide__body { display: flex; flex-direction: column; flex: 1; padding: 22px 20px 20px; } .tool-guide__title { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 20px; line-height: 1.25; letter-spacing: -.01em; color: #fff; } .tool-guide__text { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: rgba(233, 239, 234, .74); } .tool-guide__path { position: relative; list-style: none; margin: auto 0 0; padding: 18px 0 0; display: grid; gap: 10px; } .tool-guide__path::before { content: ""; position: absolute; left: 25px; top: 44px; bottom: 26px; width: 2px; background: repeating-linear-gradient(180deg, rgba(247, 208, 76, .7) 0 5px, transparent 5px 10px); transform-origin: top; } .tool-guide__step a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .07); color: #fff; font-size: 14.5px; font-weight: 800; text-decoration: none; transition: background .25s, color .25s; } .tool-guide__step a:hover, .tool-guide__step a:focus-visible { background: var(--yellow); color: var(--ink); } .tool-guide__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #14321D; border: 2px solid var(--yellow); color: var(--yellow); font-size: 13px; transition: background .25s, color .25s; } .tool-guide__step a:hover .tool-guide__num, .tool-guide__step a:focus-visible .tool-guide__num { background: var(--ink); border-color: var(--ink); } .tool-guide__tool { flex: 1; } .tool-guide__step .wch-icon { flex: none; width: 16px; height: 16px; transition: transform .25s; } .tool-guide__step a:hover .wch-icon { transform: translateX(3px); } .tool-guide__cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 24px; padding: 22px 26px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .tool-guide__cta p { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: rgba(233, 239, 234, .88); } /* Reveal: cards rise in one after another, photos settle, the path draws. JS adds .reveal-ready, so no-JS shows everything. */ .tool-guide__grid.reveal-ready .tool-guide__card { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1), border-color .35s, background .35s; transition-delay: calc(var(--i) * 120ms); } .tool-guide__grid.reveal-ready .tool-guide__photo img { transform: scale(1.14); } .tool-guide__grid.reveal-ready .tool-guide__path::before { transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 120ms + .45s); } .tool-guide__grid.reveal-ready .tool-guide__step { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; } .tool-guide__grid.reveal-ready .tool-guide__step:nth-child(1) { transition-delay: calc(var(--i) * 120ms + .35s); } .tool-guide__grid.reveal-ready .tool-guide__step:nth-child(2) { transition-delay: calc(var(--i) * 120ms + .6s); } .tool-guide__grid.reveal-ready.is-in .tool-guide__card { opacity: 1; transform: none; } .tool-guide__grid.reveal-ready.is-in .tool-guide__card:hover { transform: translateY(-6px); transition-delay: 0s; } .tool-guide__grid.reveal-ready.is-in .tool-guide__photo img { transform: none; } .tool-guide__grid.reveal-ready.is-in .tool-guide__card:hover .tool-guide__photo img { transform: scale(1.06); } .tool-guide__grid.reveal-ready.is-in .tool-guide__path::before { transform: none; } .tool-guide__grid.reveal-ready.is-in .tool-guide__step { opacity: 1; transform: none; } @media (max-width: 1100px) { .tool-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .tool-guide__grid { grid-template-columns: 1fr; gap: 16px; } .tool-guide__photo { aspect-ratio: 16 / 9; } .tool-guide__cta { padding: 20px; } .tool-guide__cta .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .tool-guide__card, .tool-guide__photo img, .tool-guide__path::before, .tool-guide__step { transition: none !important; } } /* Links inside hero intros: readable on dark and photo heroes, green on light ones. */ .page-hero .lead a { color: var(--yellow); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .page-hero .lead a:hover { color: #fff; } .page-hero--light .lead a { color: var(--green); } .page-hero--light .lead a:hover { color: var(--ink); }