/* ===================================================================== AqTEAM Realty — "We Buy Houses for Cash" landing page Faithful cash-homebuyer layout on AqTEAM Realty's real brand system. Tokens mirror the live aqteamrealty.com system for identity parity. ===================================================================== */ :root { --navy: #10295A; --navy-deep: #0B1D42; --navy-tint: #1C3B72; --green: #1A9175; --green-ink: #147661; --green-deep: #11604C; --green-bright: #2FB392; --ink: #334155; --slate: #5C6675; --misty: #E6E7E8; --barely: #F1F2F2; --white: #FFFFFF; --star: #F5A623; --no: #B0483F; --font-heading: 'Figtree', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --fs-display: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); --fs-h2: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); --fs-h3: clamp(1.2rem, 1rem + 0.9vw, 1.55rem); --fs-lead: clamp(1.02rem, 0.97rem + 0.45vw, 1.25rem); --container: 1200px; --radius: 6px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(16, 41, 90, 0.08); --shadow-md: 0 10px 34px rgba(16, 41, 90, 0.13); --shadow-lg: 0 24px 70px rgba(16, 41, 90, 0.24); --transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1); --z-nav: 100; --z-drawer-backdrop: 200; --z-drawer: 210; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.65; font-size: 1rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Clip horizontal overflow (e.g. the off-canvas drawer) on the root, not on — overflow on body propagates to the viewport in Chrome and can break vertical page scrolling. */ html { overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } :focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; border-radius: 3px; } /* ---------- Layout utils ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .section { padding-block: clamp(2rem, 1.6rem + 1.6vw, 3rem); } .section-heading { font-size: var(--fs-h2); } .lead { font-size: var(--fs-lead); color: var(--slate); max-width: 64ch; } .eyebrow-center { text-align: center; } .eyebrow-center .lead { margin-inline: auto; } .section-label { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 1rem; } .section-label::before { content: ""; width: 1.75rem; height: 2px; background: var(--green); border-radius: 2px; } .on-navy { background: var(--navy); color: #fff; position: relative; } .on-navy h2, .on-navy h3 { color: #fff; } .on-navy .lead { color: rgba(255, 255, 255, 0.82); } .on-navy .section-label { color: var(--green-bright); } .on-navy .section-label::before { background: var(--green-bright); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; padding: 0.9rem 1.6rem; border-radius: var(--radius); line-height: 1; white-space: nowrap; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition); } .btn svg { width: 1.05em; height: 1.05em; } .btn--primary, .btn--accent { background: var(--green-ink); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover, .btn--accent:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--primary:active, .btn--accent:active { transform: translateY(0); } .btn--block { width: 100%; padding-block: 0.9rem; font-size: 1rem; } .btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; } /* ---------- Topbar ---------- */ .topbar { background: var(--navy-deep); color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; } .topbar__tag { font-weight: 500; letter-spacing: 0.01em; } .topbar__call a { color: var(--green-bright); } .topbar__call a:hover { text-decoration: underline; } /* ---------- Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: var(--z-nav); background: var(--navy); transition: box-shadow var(--transition), padding var(--transition); padding-block: 0.7rem; } .navbar.is-stuck { box-shadow: 0 6px 24px rgba(11, 29, 66, 0.3); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .navbar__logo-group { display: flex; align-items: center; gap: 0.9rem; } .navbar__logo-stack { display: flex; flex-direction: column; gap: 2px; } .navbar__logo img { height: 38px; width: auto; } .navbar__dre { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.68); font-weight: 500; } .navbar__divider { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.24); } .navbar__roa { height: 32px; width: auto; opacity: 0.95; } .navbar__nav { display: flex; align-items: center; gap: 0.2rem; } .navbar__link { color: rgba(255, 255, 255, 0.9); font-family: var(--font-heading); font-weight: 600; font-size: 0.94rem; padding: 0.5rem 0.8rem; border-radius: var(--radius); transition: color var(--transition), background-color var(--transition); } .navbar__link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .navbar__actions { display: flex; align-items: center; gap: 1rem; } .navbar__phone { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 0.96rem; } .navbar__phone svg { width: 1rem; height: 1rem; color: var(--green-bright); } .navbar__phone span { border-bottom: 1px solid transparent; transition: border-color var(--transition); } .navbar__phone:hover span { border-color: var(--green-bright); } .navbar__hamburger { display: none; flex-direction: column; gap: 5px; padding: 0.55rem; border-radius: var(--radius); } .navbar__hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .navbar.is-open .navbar__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar.is-open .navbar__hamburger span:nth-child(2) { opacity: 0; } .navbar.is-open .navbar__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Drawer */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(11, 29, 66, 0.5); z-index: var(--z-drawer-backdrop); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .drawer-backdrop.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); z-index: var(--z-drawer); background: var(--navy-deep); padding: 2rem 1.75rem; transform: translateX(100%); transition: transform var(--transition); display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; } .drawer.is-open { transform: translateX(0); } .drawer a { color: rgba(255, 255, 255, 0.9); font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .drawer a:hover { color: var(--green-bright); } .drawer .btn { margin-top: 1.25rem; } .drawer__contact { margin-top: auto; color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; padding-top: 1.5rem; } .drawer__contact a { border: 0; padding: 0.2rem 0; font-size: 0.95rem; font-family: var(--font-body); } /* ---------- Hero ---------- */ .hero { position: relative; color: #fff; isolation: isolate; padding-block: 0.9rem clamp(1.4rem, 1rem + 1.5vw, 2.25rem); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 55%; } .hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,29,66,0.42), rgba(11,29,66,0.30)), radial-gradient(120% 90% at 50% 0%, rgba(11,29,66,0.18), rgba(11,29,66,0.58)); } .hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: 0; transition: opacity 0.8s ease; } .hero__video.is-playing { opacity: 1; } .hero__row { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.25rem, 2vw, 2rem); align-items: stretch; } /* Trust strip — top of the hero (replicated from cash-offer-san-diego-quiz.html) */ .hero__trustbar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.5rem; margin-bottom: 1.2rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); text-align: center; } .hero__trustbar-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; color: var(--white); text-shadow: 0 1px 12px rgba(11, 29, 66, 0.75), 0 1px 3px rgba(11, 29, 66, 0.55); } .hero__trustbar-badge svg { width: 18px; height: 18px; color: var(--green-bright); flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(11, 29, 66, 0.55)); } .hero__trustbar-phone { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none; text-shadow: 0 1px 12px rgba(11, 29, 66, 0.75), 0 1px 3px rgba(11, 29, 66, 0.55); } .hero__trustbar-phone svg { width: 16px; height: 16px; color: var(--green-bright); flex-shrink: 0; } .hero__trustbar-phone:hover { text-decoration: underline; text-underline-offset: 3px; } /* The column stretches to the card's height; the figure is absolutely positioned inside it so the tall cutout can never drive the row height itself */ .hero__cred { position: relative; } /* Google + BBB A+ + Zillow badges — inside the hero card, under the lock note */ .hero__proofrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 0.2rem; padding-top: 0.65rem; border-top: 1px solid rgba(255, 255, 255, 0.14); } .hero__proofrow img { height: 28px; width: auto; } .hero__proofrow a { display: block; transition: transform var(--transition), opacity var(--transition); } .hero__proofrow a:hover { transform: translateY(-2px); } .hero__proofrow a img { height: 36px; } /* Founder cutout — transparent WebP overlaid on the hero photo. The figure fills the (grid-stretched) column so the caption bottom aligns with the card bottom. */ .hero__founder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .hero__founder > img { flex: 1 1 0%; min-height: 0; width: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 24px 42px rgba(11, 29, 66, 0.55)); -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 99%); mask-image: linear-gradient(180deg, #000 86%, transparent 99%); } .hero__founder figcaption { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: -1.1rem; } .hero__founder-vet { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(11, 29, 66, 0.5)); } .hero__founder figcaption span { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.8rem; color: #fff; text-shadow: 0 2px 12px rgba(11, 29, 66, 0.8), 0 1px 3px rgba(11, 29, 66, 0.6); } .hero__founder figcaption strong { font-family: var(--font-heading); font-size: 1rem; color: #fff; } .hero__card { background: rgba(9, 22, 50, 0.66); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-lg); padding: clamp(1.25rem, 0.9rem + 1.5vw, 1.85rem); backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); } .hero__title { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); color: #fff; margin-bottom: 0.65rem; } .hero__title em { font-style: normal; color: var(--green-bright); } .hero__sub { font-size: 1rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 0.85rem; max-width: 46ch; } /* Proof points inside the hero card (mirrors the quiz page's .co-proof) */ .hero__points { display: grid; gap: 0.5rem; margin-bottom: 1rem; } .hero__points li { display: flex; align-items: flex-start; gap: 0.65rem; color: #fff; font-size: 0.94rem; line-height: 1.5; } .hero__points svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green-bright); margin-top: 2px; } /* Lead form (2-step) */ .lead-form { display: block; } .lead-step { display: grid; gap: 0.85rem; } .lead-step[hidden] { display: none; } .lead-step[data-step="1"] { gap: 0.75rem; } .lead-address { display: flex; align-items: stretch; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .lead-address__pin { display: grid; place-items: center; padding-left: 0.9rem; color: var(--green-ink); } .lead-address__pin svg { width: 1.25rem; height: 1.25rem; } .lead-address input { border: none; background: transparent; font-family: var(--font-body); font-size: 1.02rem; color: var(--ink); padding: 0.8rem 0.85rem; width: 100%; } .lead-address input:focus { outline: none; } /* The inputs are borderless inside the white pill — the pill itself carries the focus indicator (WCAG 2.4.7; ≥3:1 against the dark hero card). */ .lead-address:focus-within { box-shadow: 0 0 0 3px var(--green-bright); } .lead-address input::placeholder { color: var(--slate); } .lead-address__unit { max-width: 90px; border-left: 1px solid var(--misty) !important; flex: 0 0 auto; } .lead-form__foot { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); } .lead-form__foot svg { width: 0.95rem; height: 0.95rem; color: var(--green-bright); flex-shrink: 0; } .lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .lead-row--3 { grid-template-columns: 2fr 0.8fr 1fr; } .lead-back { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.85); font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; align-self: start; } .lead-back svg { width: 1rem; height: 1rem; } .lead-back:hover { color: #fff; } .lead-step__addr { font-size: 0.9rem; color: var(--green-bright); font-weight: 600; margin-top: -0.35rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; } .field label { font-size: 0.76rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); font-family: var(--font-heading); letter-spacing: 0.02em; } .field__opt { color: rgba(255, 255, 255, 0.5); font-weight: 500; } .field input { font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 0.8rem 0.9rem; border: 1.5px solid transparent; border-radius: var(--radius); background: #fff; transition: box-shadow var(--transition), border-color var(--transition); width: 100%; } .field input::placeholder { color: var(--slate); } .field input:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(47, 179, 146, 0.35); } .field.has-error input, .field.has-error select { border-color: #ff8a80; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25); } .field__error { font-size: 0.74rem; color: #ffb4ab; display: none; } .field.has-error .field__error { display: block; } .form-success { text-align: center; padding: 1.5rem 0.5rem; color: #fff; } .form-success svg { width: 3rem; height: 3rem; color: var(--green-bright); margin: 0 auto 0.75rem; } .form-success h3 { color: #fff; margin-bottom: 0.35rem; } .form-success p { color: rgba(255, 255, 255, 0.85); } /* ---------- As Seen On ---------- */ .as-seen { background: linear-gradient(120deg, var(--navy), var(--navy-tint)); color: #fff; text-align: center; padding-block: clamp(1.15rem, 0.9rem + 0.9vw, 1.8rem); } .as-seen__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 0.9rem; } .as-seen__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.25rem, 2.2vw, 2rem); } .as-seen__logo { height: clamp(22px, 2.4vw, 32px); width: auto; filter: brightness(0) invert(1); opacity: 1; transition: opacity var(--transition); } .as-seen__logo:hover { opacity: 1; } /* ---------- Steps ---------- */ .steps__head { text-align: center; max-width: 62ch; margin: 0 auto 1.75rem; } .steps__head .lead { margin-inline: auto; } .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); } .step-card { position: relative; background: var(--barely); border: 1px solid var(--misty); border-radius: var(--radius-lg); padding: 2.25rem 1.5rem 1.75rem; transition: transform var(--transition), box-shadow var(--transition); } .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .step-card__num { position: absolute; top: -18px; left: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: var(--green-ink); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; box-shadow: var(--shadow-sm); } .step-card__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: rgba(26, 145, 117, 0.12); color: var(--green-ink); margin-bottom: 1rem; } .step-card__ic svg { width: 1.6rem; height: 1.6rem; } .step-card h3 { font-size: var(--fs-h3); margin-bottom: 0.55rem; } .step-card p { color: var(--slate); font-size: 0.98rem; } .steps__cta { display: flex; justify-content: center; margin-top: 1.75rem; } /* ---------- Social band ---------- */ .social-band { background: linear-gradient(120deg, var(--navy-deep), var(--navy)); color: #fff; text-align: center; padding-block: clamp(2.25rem, 1.9rem + 1.4vw, 3.25rem); } .social-band__ic { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(47, 179, 146, 0.16); color: var(--green-bright); margin-bottom: 1.25rem; } .social-band__ic svg { width: 2rem; height: 2rem; } .social-band h2 { color: #fff; margin-bottom: 0.75rem; } .social-band p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; margin: 0 auto 1.4rem; font-size: var(--fs-lead); } .social-band__actions { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: center; } .social-band__phone { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: #fff; } .social-band__phone svg { width: 1.2rem; height: 1.2rem; color: var(--green-bright); } .social-band__phone:hover { color: var(--green-bright); } /* ---------- Split (guarantee / founder / intro) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--reverse .split__media { order: 2; } .split__media img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .split__body h2 { margin-bottom: 1rem; } .split__body p + p { margin-top: 0.9rem; } .split__body .lead { margin-bottom: 0.9rem; } .split__body p { color: var(--slate); } .split__body .btn { margin-top: 1.75rem; } /* ---------- Compare (two cards) ---------- */ .compare { background: var(--barely); } .compare__grid { display: grid; grid-template-columns: 0.9fr 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; } .compare__intro { align-self: center; padding-right: 1rem; } .compare__display { font-size: var(--fs-display); line-height: 1.05; margin-bottom: 0.85rem; } .compare__intro-cta { margin-top: 1.5rem; } .compare__card { border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 1vw, 2rem); box-shadow: var(--shadow-sm); } .compare__card--us { background: linear-gradient(160deg, var(--navy), var(--green-ink)); color: #fff; box-shadow: var(--shadow-lg); } .compare__card--them { background: #fff; border: 1px solid var(--misty); } .compare__card-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; margin-bottom: 1.4rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .compare__card--them .compare__card-title { color: var(--slate); border-bottom-color: var(--misty); } .compare__card--us .compare__card-title { color: #fff; } .compare__list { display: grid; gap: 1.15rem; } .compare__list li { display: flex; gap: 0.75rem; align-items: flex-start; } .compare__ic { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: 1px; color: var(--green-bright); } .compare__card--them .compare__ic--no { color: var(--no); } .compare__list strong { display: block; font-family: var(--font-heading); font-size: 1.02rem; margin-bottom: 0.15rem; } .compare__card--us .compare__list strong { color: #fff; } .compare__card--them .compare__list strong { color: var(--navy); } .compare__list small { display: block; font-size: 0.85rem; line-height: 1.5; } .compare__card--us .compare__list small { color: rgba(255, 255, 255, 0.82); } .compare__card--them .compare__list small { color: var(--slate); } /* ---------- When to sell ---------- */ .when { overflow: hidden; } .when__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.12; } .when .container { position: relative; z-index: 1; } /* Bare icon + label rows straight on the navy banner — no card boxes */ .when__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem 2.25rem; margin: 1.75rem 0; } .when__list li { display: flex; align-items: center; gap: 1.05rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.18rem; } .when__ic { flex-shrink: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; } .when__ic svg { width: 2.4rem; height: 2.4rem; color: var(--green-bright); } /* ---------- Any reason / condition / challenge ---------- */ .anylists__head { text-align: center; max-width: 66ch; margin: 0 auto 1.75rem; } .anylists__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: 1.75rem; } .anylist { background: var(--barely); border: 1px solid var(--misty); border-radius: var(--radius-lg); padding: 1.75rem 1.6rem; } .anylist h3 { font-size: 1.25rem; margin-bottom: 1.1rem; padding-bottom: 0.85rem; border-bottom: 2px solid var(--green); } .anylist ul { display: grid; gap: 0.65rem; } .anylist li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--ink); } .anylist li::before { content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 4px; background: rgba(26, 145, 117, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23147661' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E") center/0.85rem no-repeat; } .anylists .eyebrow-center { text-align: center; } .anylists__note { max-width: 66ch; margin: 0 auto 1.9rem; text-align: center; } .anylists__note a { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .regional a.inline, .split__body a:not(.btn) { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Regional ---------- */ .regional__cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.25rem auto; max-width: 780px; } .regional__cities li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; background: var(--barely); border: 1px solid var(--misty); border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--navy); } .regional__cities li::before { content: ""; width: 0.9rem; height: 0.9rem; background: var(--green-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z'/%3E%3C/svg%3E") center/contain no-repeat; } .regional__sub { font-size: var(--fs-h3); margin-top: 2rem; margin-bottom: 0.75rem; } .regional .btn { margin-top: 1.75rem; } .regional__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); text-align: left; margin-top: 1.5rem; } .regional__cols h3, .regional__cols h4 { margin-bottom: 0.6rem; } .regional__cols p { color: var(--slate); } .regional__cols p + p { margin-top: 0.65rem; } /* ---------- Founder ---------- */ .founder { background: var(--barely); } .founder__media { position: relative; } .founder__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 1082 / 1400; object-fit: cover; width: 100%; } /* matches the Real Producers cover exactly — no masthead crop */ /* Closing-day montage variant: portrait 9/16 video centered in the column; the quote tag drops into flow so it never covers the playback controls. */ .founder__media--video video { display: block; margin-inline: auto; aspect-ratio: 9 / 16; height: 560px; max-width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: #0B1D42; } .founder__media--video .founder__quote-tag { position: static; margin-top: 1rem; max-width: none; } .founder__quote-tag { position: absolute; right: -0.5rem; bottom: 1.75rem; background: #fff; padding: 1rem 1.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 15rem; border-left: 4px solid var(--green); } .founder__quote-tag p { font-family: var(--font-heading); font-weight: 600; color: var(--navy); font-size: 0.98rem; font-style: italic; } .founder__values { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0; } .value-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; background: #fff; border: 1px solid var(--misty); border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--navy); } .value-chip svg { width: 0.95rem; height: 0.95rem; color: var(--green-ink); } .founder__sig { margin-top: 1.5rem; } .founder__sig strong { font-family: var(--font-heading); color: var(--navy); font-size: 1.05rem; display: block; } .founder__sig span { color: var(--slate); font-size: 0.9rem; } /* ---------- Reviews ---------- */ .reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .reviews__rating { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; } .reviews__stars { display: inline-flex; gap: 2px; color: var(--star); } .reviews__stars svg { width: 1.15rem; height: 1.15rem; } .reviews__rating span { color: var(--slate); font-size: 0.9rem; } .carousel-controls { display: flex; gap: 0.6rem; } .carousel-arrow { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--misty); display: grid; place-items: center; color: var(--navy); transition: background-color var(--transition), color var(--transition), border-color var(--transition); } .carousel-arrow:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); } .carousel-arrow:disabled { opacity: 0.35; cursor: default; } .carousel-arrow svg { width: 1.2rem; height: 1.2rem; } .reviews__viewport { margin-top: 1.5rem; overflow: hidden; } .reviews__track { display: flex; gap: 1.5rem; scroll-snap-type: x mandatory; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 0.5rem; scrollbar-width: none; } .reviews__track::-webkit-scrollbar { display: none; } .review { scroll-snap-align: start; flex: 0 0 clamp(280px, 82vw, 370px); background: #fff; border: 1px solid var(--misty); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); } .review__stars { display: inline-flex; gap: 2px; color: var(--star); } .review__stars svg { width: 1rem; height: 1rem; } .review__body { color: var(--ink); font-size: 1rem; line-height: 1.6; flex: 1; } .review__author { display: flex; align-items: center; gap: 0.8rem; padding-top: 0.75rem; border-top: 1px solid var(--misty); } .review__avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; flex-shrink: 0; } .review__author strong { font-family: var(--font-heading); color: var(--navy); font-size: 0.95rem; display: block; } .review__author span { color: var(--slate); font-size: 0.82rem; } .reviews__dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1.5rem; flex-wrap: wrap; } /* 24px hit target (WCAG 2.5.8) around an 8px visual dot; inactive fill ≥3:1 on white (1.4.11) */ .reviews__dot { width: 24px; height: 24px; display: grid; place-items: center; background: transparent; } .reviews__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--slate); transition: background-color var(--transition), width var(--transition), border-radius var(--transition); } .reviews__dot.is-active::before { background: var(--green-ink); width: 22px; border-radius: 4px; } /* ---------- FAQ ---------- */ .faq__grid { max-width: 820px; margin: 1.75rem auto 0; display: grid; gap: 0.85rem; } .faq-item { border: 1px solid var(--misty); border-radius: var(--radius-lg); background: #fff; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); } .faq-item[open] { box-shadow: var(--shadow-sm); border-color: rgba(26, 145, 117, 0.4); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; cursor: pointer; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--green-ink); } .faq-item__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: var(--green-ink); transition: transform var(--transition); } .faq-item[open] .faq-item__icon { transform: rotate(45deg); } .faq-item__body { padding: 0 1.3rem 1.1rem; color: var(--ink); } .faq-item__body p { max-width: 68ch; } /* ---------- Privacy ---------- */ /* ---------- Footer ---------- */ .footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.72); padding-block: clamp(2.25rem, 2rem + 1vw, 3rem) 1.5rem; } .footer__cta { text-align: center; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer__cta h2 { color: #fff; margin-bottom: 1.5rem; max-width: 22ch; margin-inline: auto; } .footer__form { max-width: 640px; margin: 0 auto; } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer__brand img.footer__logo { height: 44px; width: auto; margin-bottom: 1rem; } .footer__brand p { font-size: 0.92rem; max-width: 32ch; margin-bottom: 1.25rem; } .footer__brandrow { display: flex; align-items: center; gap: 1rem; } .footer__brandrow img { height: 38px; width: auto; opacity: 0.9; } .footer__col h4 { color: #fff; font-size: 0.98rem; margin-bottom: 1.1rem; } .footer__col ul { display: grid; gap: 0.65rem; } .footer__col a { font-size: 0.92rem; transition: color var(--transition); } .footer__col a:hover { color: var(--green-bright); } .footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; margin-bottom: 0.85rem; } .footer__contact svg { width: 1.05rem; height: 1.05rem; color: var(--green-bright); flex-shrink: 0; margin-top: 3px; } .footer__socials { display: flex; gap: 0.7rem; margin-top: 0.5rem; } .footer__socials a { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: grid; place-items: center; transition: background-color var(--transition), border-color var(--transition); } .footer__socials a:hover { background: var(--green-ink); border-color: var(--green-ink); } .footer__socials svg { width: 1.1rem; height: 1.1rem; color: #fff; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: 0.82rem; } .footer__eho { display: inline-flex; align-items: center; gap: 0.5rem; } .footer__eho svg { width: 1.4rem; height: 1.4rem; } .footer__legal { max-width: 74ch; line-height: 1.6; margin-top: 1.25rem; font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); } /* ---------- Scroll reveal ---------- */ [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); transition-delay: var(--reveal-delay, 0s); } [data-animate].is-visible { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .compare__grid { grid-template-columns: 1fr 1fr; } .compare__intro { grid-column: 1 / -1; padding-right: 0; text-align: center; } .compare__intro .lead { margin-inline: auto; } .compare__intro-cta { display: none; } } @media (max-width: 980px) { .navbar__nav { display: none; } .navbar__phone span { display: none; } .navbar__hamburger { display: flex; } .hero__row { grid-template-columns: 1fr; } .hero__cred { order: 2; } .hero__main { order: 1; } /* single-column: no card to match — size the cutout naturally again */ .hero__cred { position: static; } .hero__founder { position: static; } .hero__founder > img { flex: none; width: auto; max-width: 100%; height: auto; max-height: 340px; } .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } .steps__grid { grid-template-columns: 1fr; gap: 2.5rem; } .anylists__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .topbar__tag { display: none; } .topbar__inner { justify-content: center; } .hero__video { display: none; } /* Lighter mobile payload: small hero still (!important beats the inline style), and skip the decorative when-section backdrop entirely */ .hero__bg { background-image: url('cash-offer-assets/images/hero-neighborhood-mobile.jpg') !important; } .when__bg { display: none; } .hero__founder > img { max-height: 300px; } .compare__grid { grid-template-columns: 1fr; } .regional__cols { grid-template-columns: 1fr; } .reviews__head { flex-direction: column; align-items: flex-start; } .founder__quote-tag { position: static; margin-top: 1rem; max-width: none; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; } } @media (max-width: 520px) { /* logo group + phone + CTA + hamburger can't all fit — the hero form and drawer CTA sit one tap away, and the topbar keeps the phone link */ .navbar__cta { display: none; } } @media (max-width: 480px) { .lead-row, .lead-row--3 { grid-template-columns: 1fr; } .hero__proofrow { gap: 0.9rem; } .hero__proofrow img { height: 26px; } .hero__proofrow a img { height: 32px; } .hero__proofrow a img.hero__proofrow-zillow { height: 18px; } .social-band__actions { flex-direction: column; } .lead-address { flex-wrap: wrap; } .lead-address__unit { max-width: none; border-left: none !important; border-top: 1px solid var(--misty) !important; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-animate] { opacity: 1 !important; transform: none !important; } .reviews__track { scroll-behavior: auto; } .hero__video { display: none; } } /* ============================================================ Additions: unit dropdown · offer bar · contact step page · Zillow proof badge · real press logos ============================================================ */ /* Unit number field inside the address bar (open text — users type their unit #) */ .lead-address input.lead-address__unit { max-width: 110px; padding-inline: 0.75rem; } /* Proof points moved BELOW the CTA button (owner direction 2026-07-02). Round 2: three compact columns so the row fills the card's full width. */ .hero__points--after { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.3rem 0 0; } .hero__points--after li { flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; font-size: 0.82rem; line-height: 1.35; } .hero__points--after svg { margin-top: 0; width: 22px; height: 22px; } @media (max-width: 560px) { .hero__points--after { grid-template-columns: 1fr; gap: 0.5rem; } .hero__points--after li { flex-direction: row; align-items: flex-start; text-align: left; gap: 0.65rem; font-size: 0.9rem; } } /* Hero card subtitle held to a single line on desktop (owner direction) */ .hero__sub--oneline { max-width: none; white-space: nowrap; } @media (max-width: 640px) { .hero__sub--oneline { white-space: normal; } } /* Card footer note now sits after the review quote */ .hero__quote + .lead-form__foot { margin-top: 0.15rem; } /* Google Places suggestion dropdown (sits above the hero card + offer bar) */ .pac-container { z-index: 10050; font-family: var(--font-body); border-radius: var(--radius); } /* Send-failure note under the contact form (shown only after a failed POST) */ .lead-form__senderr { display: block; margin: 0; } .lead-form__senderr[hidden] { display: none; } .lead-form__senderr a { color: #ffb4ab; text-decoration: underline; } /* Screen-reader-only live regions (quiz + contact announcements) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Honeypot — visually gone, still in the accessibility-hidden form payload for bots */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Exit-popup inline error (validation + send failure) */ .exit-modal__err { font-size: 0.8rem; color: #c0392b; font-weight: 600; margin: 0.35rem 0 0; } /* On light surfaces the global --green-bright focus ring is only ~2.6:1 — use the ink green (5.5:1 on white) wherever content sits on white/pale backgrounds. */ .aaq-card :focus-visible, .exit-modal__card :focus-visible, .faq :focus-visible, .steps :focus-visible, .story :focus-visible, .compare :focus-visible, .anylists :focus-visible, .regional :focus-visible, .founder :focus-visible, .guarantee__media :focus-visible, .as-seen :focus-visible { outline-color: var(--green-ink); } /* Consent text sitting on the dark contact card (base styling targets the white quiz card) */ .hero__card .form-consent { margin-top: 0.25rem; margin-bottom: 0; } .hero__card .form-consent__text { color: rgba(255, 255, 255, 0.7); } .hero__card .form-consent__text a { color: var(--green-bright); } .field label small { font-weight: 500; color: rgba(255, 255, 255, 0.55); text-transform: none; } /* Slide-down offer bar (appears below the sticky navbar after the hero scrolls past) */ .offerbar { position: fixed; left: 0; right: 0; top: 0; z-index: 150; background: rgba(11, 29, 66, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 30px rgba(11, 29, 66, 0.35); transform: translateY(-110%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s; } .offerbar.is-shown { transform: translateY(0); visibility: visible; } .offerbar__inner { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding-block: 0.6rem; } .offerbar__label { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap; } .offerbar__form { display: flex; align-items: stretch; gap: 0.35rem; flex: 0 1 500px; min-width: 0; background: #fff; border-radius: var(--radius); padding: 0.3rem 0.3rem 0.3rem 0; } .offerbar__form input { flex: 1; min-width: 0; border: none; background: transparent; border-radius: var(--radius); padding: 0.55rem 0.9rem; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); } .offerbar__form input::placeholder { color: var(--slate); } .offerbar__form .btn { padding: 0.55rem 1.1rem; font-size: 0.9rem; } @media (max-width: 680px) { .offerbar__label { display: none; } .offerbar__form { flex: 1; } } /* Contact step page */ .hero--contact { padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem); } .contact-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .contact-row .lead-step__addr { margin: -0.25rem 0 1rem; } .contact-benefits { align-self: start; } @media (max-width: 980px) { .contact-row { grid-template-columns: 1fr; } } /* Zillow badge in the hero proof row (white knockout for the dark card) */ .hero__proofrow a img.hero__proofrow-zillow { height: 20px; filter: brightness(0) invert(1); opacity: 0.95; } /* Real press logos in the As Seen On strip */ .as-seen__logo--wide { height: clamp(20px, 2.1vw, 28px); } /* squarish station marks (Fox 5 / NBC 7 / CBS 8) need extra height to stay legible */ .as-seen__logo--tall { height: clamp(36px, 3.6vw, 50px); } /* NBC 7 and CBS 8 are compact vertical marks — extra height evens their visual weight */ .as-seen__logo[src*="nbc7"], .as-seen__logo[src*="cbs8"] { height: clamp(40px, 4vw, 56px); } /* Fox 5 is a solid-box logo — the white-knockout filter would erase it; its own red box + white letters already read on navy */ .as-seen__logo[src*="fox5"] { filter: none; opacity: 1; } /* ============================================================ Seller story — trust video beneath How It Works (adapted from the quiz page's .aa-founders section) ============================================================ */ .story { background: var(--barely); padding-block: clamp(2rem, 1.6rem + 1.6vw, 3rem); } .story__split { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); } .story__media { display: flex; justify-content: center; } .story__figure { width: 100%; max-width: 380px; } .story__figure video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--navy-deep); } /* 600 is the heaviest DM Sans weight loaded on this page — do not use 700 */ .story__figure figcaption { margin-top: 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--ink); line-height: 1.55; text-align: center; } .story__points { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1.25rem; margin-top: 1.15rem; } .story__points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 1rem; color: var(--ink); line-height: 1.5; } .story__points svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--green); margin-top: 2px; } .story__cred { font-size: 0.88rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--misty); } /* Both rules below out-rank the base .split stack (they sit later in the file) */ @media (max-width: 980px) { .story__split { grid-template-columns: 1fr; } .story__figure { max-width: 340px; } } @media (max-width: 480px) { .story__points { grid-template-columns: 1fr; } } /* ============================================================ Additions: feature CTA band (logo + bg photo) · regional pin emphasis · contact-form select ============================================================ */ /* Feature band — AqTEAM logo beside the copy, photo backdrop under a navy scrim */ .social-band--feature { position: relative; isolation: isolate; overflow: hidden; } .social-band__bg { position: absolute; inset: 0; z-index: -2; background: url('cash-offer-assets/images/band-skyline.jpg') center/cover no-repeat; } .social-band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 29, 66, 0.86), rgba(11, 29, 66, 0.74)); } .social-band__head { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 3.5vw, 3rem); text-align: left; max-width: 1020px; margin: 0 auto; } .social-band__logo { height: clamp(96px, 15vw, 200px); width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 14px rgba(11, 29, 66, 0.6)); } .social-band__copy h2 { margin-bottom: 0.6rem; } .social-band--feature .social-band__copy p { margin: 0; max-width: 56ch; } /* CTA row sits inside the copy column — heading, paragraph, and button share one left edge */ .social-band__actions--inline { justify-content: flex-start; margin-top: 1.6rem; } @media (max-width: 680px) { .social-band__head { flex-direction: column; text-align: center; gap: 1.1rem; } .social-band__logo { height: 64px; } .social-band__actions--inline { justify-content: center; } } /* Regional city chips — bolder pin bullets */ .regional__cities li::before { width: 1.2rem; height: 1.2rem; background: var(--green); } .regional__cities li { border-color: rgba(26, 145, 117, 0.35); box-shadow: 0 1px 4px rgba(16, 41, 90, 0.07); } /* Contact-form select (matches .field input) */ .field select { font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 0.8rem 2.4rem 0.8rem 0.9rem; border: 1.5px solid transparent; border-radius: var(--radius); background-color: #fff; width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 0.9rem; transition: box-shadow var(--transition), border-color var(--transition); } .field select:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(47, 179, 146, 0.35); } /* Offer-bar form glow — ibuysd-style treatment on AqTEAM tokens: the form row slide-pops in, then carries a gentle infinite green pulse (the bar's action) */ .offerbar.is-shown .offerbar__form { animation: offerbar-pop 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards, offerbar-pulse 1.5s ease-in-out 0.5s infinite; } @keyframes offerbar-pop { 0% { transform: translateY(-20px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes offerbar-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(47, 179, 146, 0.5); } 50% { box-shadow: 0 0 20px rgba(47, 179, 146, 0.8), 0 0 40px rgba(47, 179, 146, 0.55); } } @media (prefers-reduced-motion: reduce) { .offerbar.is-shown .offerbar__form { animation: none; transform: none; opacity: 1; box-shadow: 0 0 16px rgba(47, 179, 146, 0.45); } } /* ============================================================ Zillow reviews carousel — "What Sellers Say" (cards baked by MD Files/_tools/bake-cash-offer-reviews.mjs) ============================================================ */ .reviews__rating a { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .reviews__rating a:hover { color: var(--green-deep); } .review { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(26, 145, 117, 0.35); } .review__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .review__zmark { height: 15px; width: auto; opacity: 0.9; } .review__more { margin-top: -0.5rem; } .review__more a { font-size: 0.88rem; font-weight: 700; color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; } .review__more a:hover { color: var(--green-deep); } .review__author > div { min-width: 0; } .review__via { margin-left: auto; align-self: center; flex-shrink: 0; font-size: 0.78rem; font-weight: 700; color: var(--slate); border: 1px solid var(--misty); border-radius: 999px; padding: 0.3rem 0.7rem; white-space: nowrap; text-decoration: none; transition: color var(--transition), border-color var(--transition); } .review__via:hover { color: var(--green-ink); border-color: var(--green-ink); } .carousel-arrow--pause .ico-play { display: none; } .carousel-arrow--pause.is-paused .ico-pause { display: none; } .carousel-arrow--pause.is-paused .ico-play { display: block; } .reviews__note { margin-top: 1.75rem; text-align: center; color: var(--slate); font-size: 0.85rem; } .reviews__note a { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .reviews__note a:hover { color: var(--green-deep); } @media (prefers-reduced-motion: reduce) { .review:hover { transform: none; } .carousel-arrow--pause { display: none; } } /* Guarantee — opens the grey trust chapter and flows straight into the benefits comparison below (same background, tightened seam) */ .section--guarantee { background: var(--barely); padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); } .section--guarantee + .compare { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .guarantee__media { position: relative; } .guarantee__media img { aspect-ratio: 4 / 3; max-height: none; } .guarantee__chip { position: absolute; left: 1.25rem; bottom: 1.25rem; display: inline-flex; align-items: center; gap: 0.6rem; background: #fff; padding: 0.8rem 1.15rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--navy); } .guarantee__chip svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green); } @media (max-width: 480px) { .guarantee__chip { left: 0.75rem; bottom: 0.75rem; font-size: 0.88rem; padding: 0.65rem 0.9rem; } } /* Address form inside the closing CTA band (merged from the old footer CTA) */ .social-band .footer__form { margin: 0 auto 1.75rem; } /* --- Reviews carousel: panel fixes (focus contrast, no-JS, aria-disabled, per-card score) --- */ /* The global :focus-visible outline is --green-bright (an on-navy green, ~2.6:1 on white); this section sits on white, so use the on-white green (5.5:1) per the Three Greens Rule. */ .reviews :focus-visible { outline-color: var(--green-ink); } /* `display: grid` on .carousel-arrow would otherwise defeat the [hidden] attribute — without this the no-JS page shows a dead pause button. */ .carousel-arrow[hidden] { display: none; } /* Arrows use aria-disabled (never the disabled property — it drops keyboard focus). */ .carousel-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; } .carousel-arrow[aria-disabled="true"]:hover { background: transparent; color: var(--navy); border-color: var(--misty); } .review__rated { display: inline-flex; align-items: center; gap: 0.45rem; } .review__score { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--ink); } /* ============================================================ Bottom CTA band: inline icon + heading row · stacked actions Discreet-sale note: compact disclaimer strip above the footer ============================================================ */ .discreet-note { background: var(--navy-deep); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 1.4rem; color: rgba(255, 255, 255, 0.68); } .discreet-note h2 { font-size: 0.88rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 0.35rem; letter-spacing: 0.01em; } .discreet-note p { font-size: 0.78rem; line-height: 1.65; max-width: 76ch; } .discreet-note p + p { margin-top: 0.35rem; } .discreet-note a { color: rgba(255, 255, 255, 0.88); text-decoration: underline; text-underline-offset: 2px; } .discreet-note a:hover { color: #fff; } .reviews__dots[hidden] { display: none; } /* ============================================================ Bottom offer band + discreet note — resized to mirror the ibuysd reference layout (Bootstrap-derived measurements): band: py-4/py-lg-5, container pt-3, 3/9 column grid (logo col ≥1200px only, whole section ≥768px only), display-3 heading, 1rem body, button below text; note: py-4 + pt-3, 1rem type. ============================================================ */ .social-band--offer { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-deep); padding-block: 1.5rem; text-align: center; } @media (min-width: 992px) { .social-band--offer { padding-block: 3rem; } } .social-band--offer .social-band__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; z-index: -2; } .social-band--offer .social-band__shade { position: absolute; inset: 0; background: rgba(11, 29, 66, 0.75); z-index: -1; } .social-band__offer-grid { display: grid; grid-template-columns: 3fr 9fr; gap: 1.5rem; align-items: center; padding-top: 1rem; } .social-band__offer-logo img { width: 100%; height: auto; display: block; } .social-band__offer-copy h2 { color: #fff; font-weight: 700; line-height: 1.2; font-size: calc(1.525rem + 3.3vw); margin-bottom: 0.5rem; letter-spacing: -0.02em; } @media (min-width: 1200px) { .social-band__offer-copy h2 { font-size: 4rem; } } .social-band__offer-copy p { color: #fff; font-size: 1rem; margin: 0 0 1rem; } .social-band__offer-copy p a { color: #fff; text-decoration: none; } .social-band__offer-cta .btn { padding: 0.9rem 1.6rem; } @media (min-width: 992px) { .social-band__offer-copy { text-align: left; } } @media (max-width: 1199px) { .social-band__offer-grid { grid-template-columns: 1fr; } .social-band__offer-logo { display: none; } } @media (max-width: 767px) { .social-band--offer { display: none; } } /* Discreet note at the reference spec: darker primary-tinted strip, 1rem type */ .discreet-note { background: #0E234E; border-top: 0; padding: 1.5rem 0; color: #fff; } .discreet-note .container { padding-top: 1rem; } .discreet-note h3 { font-size: 1rem; color: #fff; margin-bottom: 0.5rem; } .discreet-note p { font-size: 1rem; line-height: 1.5; max-width: none; color: #fff; } .discreet-note p + p { margin-top: 1rem; } .discreet-note a { color: #fff; text-decoration: underline; } /* Compaction pass (2026-07-02): cap the founder portrait so the section height tracks the text, not the 4:5 image */ .founder__media img { max-height: 560px; } /* July 2026 audit implementation: B5 call line, C1 hero quote, B10 note, C2 exit modal */ .lead-form__call { text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.25rem; } .lead-form__call a { color: var(--green-bright); font-weight: 700; } .hero__quote { margin: 1rem auto 0; max-width: 460px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); padding: 0.85rem 1.1rem; font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); text-align: left; } .hero__quote-stars { color: var(--star); letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 0.2rem; } .hero__quote blockquote { display: inline; font-style: italic; } .hero__quote figcaption { display: inline; font-weight: 600; margin-left: 0.35rem; color: #fff; } .guarantee__note { font-size: 0.85rem; color: var(--slate); margin-top: 0.6rem; } .exit-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; } .exit-modal[hidden] { display: none; } .exit-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 29, 66, 0.6); } .exit-modal__card { position: relative; background: #fff; max-width: 420px; width: 100%; padding: 2rem 1.75rem 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; } .exit-modal__close { position: absolute; top: 10px; right: 14px; font-size: 1.5rem; color: var(--slate); line-height: 1; padding: 0.25rem 0.5rem; } .exit-modal__close:hover { color: var(--navy); } .exit-modal__kicker { font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 0.5rem; } .exit-modal__card h3 { font-size: 1.35rem; margin-bottom: 0.5rem; } .exit-modal__sub { font-size: 0.92rem; color: var(--slate); margin-bottom: 1.1rem; } .exit-modal__sub a { color: var(--green-ink); font-weight: 600; text-decoration: underline; } .exit-modal form { display: flex; flex-direction: column; gap: 0.7rem; } .exit-modal input[type="text"], .exit-modal input[type="tel"] { padding: 0.75rem 0.9rem; border: 1.5px solid var(--misty); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--ink); width: 100%; } .exit-modal input[type="text"]:focus, .exit-modal input[type="tel"]:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(47, 179, 146, 0.25); } .exit-modal__consent { display: flex; gap: 0.5rem; align-items: flex-start; text-align: left; font-size: 0.72rem; color: var(--slate); line-height: 1.45; } .exit-modal__consent input { margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; } .exit-modal__fine { font-size: 0.75rem; color: var(--slate); margin-top: 0.8rem; } /* ============================================================ B-variant quiz (quiz.html) — ported from cash-offer-san-diego.html, tokens mapped to this stylesheet ============================================================ */ .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group.full { grid-column: 1 / -1; } .form-group--error input, .form-group--error select, .form-group--error textarea { border-color: #dc2626; background: #fff5f5; } /* Consent checkbox */ .form-consent { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1.5rem; margin-bottom: 1rem; } .form-consent input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--navy); cursor: pointer; } .form-consent__text { font-family: var(--font-body); font-size: 0.72rem; color: #6b7280; line-height: 1.5; } .form-consent--error .form-consent__text { color: #dc2626; } .form-consent__text a { color: var(--navy); text-decoration: underline; } .form-group label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #4b5563; } .form-group input, .form-group select, .form-group textarea { border: 1.5px solid var(--misty); border-radius: var(--radius); padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.95rem; color: var(--navy); background: var(--barely); transition: border-color var(--transition); outline: none; width: 100%; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--green); background: var(--white); } .form-group textarea { resize: vertical; min-height: 100px; } .co-hero .aaq-card { margin: 0; max-width: 560px; width: 100%; justify-self: end; } .co-card-head { text-align: center; margin-bottom: 1.25rem; } .co-card-head h2 { font-family: var(--font-heading); font-size: 1.45rem; color: var(--navy); margin-bottom: 0.3rem; } .co-card-head p { color: var(--slate); font-size: 0.92rem; } .co-card-phone { margin: 1.25rem 0 0; text-align: center; font-size: 0.92rem; color: var(--ink); } .co-card-phone a { color: var(--green-ink); font-weight: 700; } .aaq-card { background: var(--white); border-radius: 12px; padding: 2.25rem 2rem; max-width: 680px; margin: 2.25rem auto 0; box-shadow: var(--shadow-lg); scroll-margin-top: 1.5rem; } .aaq-progress__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 0.5rem; } .aaq-progress__track { height: 6px; background: var(--misty); border-radius: 99px; margin-bottom: 1.5rem; } .aaq-progress__fill { height: 100%; background: var(--green); border-radius: 99px; transition: width 0.35s ease; } .aaq-panel { display: none; } .aaq-panel.active { display: block; } .aaq-question { font-family: var(--font-heading); font-size: 1.3rem; color: var(--navy); margin-bottom: 1.25rem; } .aaq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .aaq-option { border: 1.5px solid var(--misty); border-radius: var(--radius-lg); padding: 1rem 1.25rem; cursor: pointer; font-family: var(--font-body); font-size: 0.95rem; color: var(--navy); background: var(--white); text-align: left; transition: border-color var(--transition), background var(--transition); } .aaq-option:hover { border-color: var(--green); background: rgba(26,145,117,0.06); } .aaq-option.selected { border-color: var(--green); background: rgba(26,145,117,0.1); font-weight: 700; } .aaq-back { margin-top: 1.25rem; background: none; border: none; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink); opacity: 0.75; cursor: pointer; padding: 0; text-decoration: underline; } .aaq-back:hover { opacity: 1; } .aaq-contact-sub { color: var(--ink); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; } .aaq-submit { width: 100%; justify-content: center; margin-top: 0.25rem; } .aaq-error { color: #B91C1C; font-size: 0.9rem; margin-bottom: 1rem; } .aaq-error a { color: #B91C1C; font-weight: 700; } .aaq-invalid { border-color: #B91C1C !important; border-width: 2px !important; } /* Visible per-field validation messages (55+ funnel) */ .aaq-field-error { color: #B91C1C; font-size: 0.9rem; line-height: 1.5; margin: 0.35rem 0 0; } /* 55+ audience: never below 16px in the funnel — also stops iOS focus-zoom */ .aaq-card .form-group input { font-size: 1rem; } .aaq-card .form-group label { font-size: 0.85rem; } .aaq-next-steps { margin: 0 0 1.25rem 1.25rem; padding: 0; color: var(--ink); line-height: 1.8; } .aaq-next-steps li { margin-bottom: 0.4rem; } /* ============================================= ibuysd-mirror cash-offer A/B landing pages (2026-06-30) Variant A: san-diego-cash-home-offer.html (address-first form) Variant B: cash-offer-san-diego-quiz.html (3-question quiz) Additive components only — everything else reuses .co-*/.aa-*/.aaq-*/.ocs-*. ============================================= */ /* Both hero anchors clear the fixed navbar on in-page CTA jumps */ #hero-form { scroll-margin-top: 92px; } /* Address-first hero lead form (Variant A) — reuses the .aaq-card shell */ /* Quiz card placement inside the dark hero card */ .hero__card .aaq-card { margin: 0.5rem auto 1.1rem; padding: 1.75rem 1.5rem; max-width: none; } .hero__card .aaq-card .co-card-head h2 { color: var(--navy); } /* ---------- Places (New) autocomplete dropdown (cash-offer.js) ---------- Body-appended so no card/pill overflow can clip it; rect-positioned under the active address input. Successor to the retired legacy .pac-container. */ .aq-ac { position: absolute; z-index: 10050; background: var(--white); border: 1px solid var(--misty); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden auto; max-height: 288px; font-family: var(--font-body); min-width: 250px; text-align: left; } .aq-ac__item { padding: 0.62rem 0.9rem; cursor: pointer; font-size: 0.95rem; line-height: 1.35; color: var(--ink); } .aq-ac__item.is-active { background: rgba(26, 145, 117, 0.12); } .aq-ac__main { font-weight: 700; color: var(--navy); } .aq-ac__sec { color: var(--slate); font-size: 0.86rem; } .aq-ac__foot { display: flex; justify-content: flex-end; padding: 0.35rem 0.75rem 0.45rem; border-top: 1px solid var(--barely); } .aq-ac__foot img { height: 16px; width: auto; opacity: 0.9; }