/* ============================================================ Funnel engine — default theme. Generic, sites override via funnel.yaml.brand tokens (--brand-primary, --brand-font), injected inline in . Mobile-first. Two visual halves: the marketing landing view and the funnel card view. Hero is part of the landing. ============================================================ */ :root { --brand-primary: #0d6efd; --brand-primary-hover: #0b5ed7; --brand-primary-soft: #e7f0ff; --brand-primary-border: #b6d4fe; --brand-font: 'Playfair Display', Georgia, 'Times New Roman', serif; --color-text: #0e1424; --color-text-muted: #6c757d; --color-bg-page: #ffffff; --color-bg-light: #f8f9fa; --color-bg-hero-start: #f8f9fa; --color-bg-hero-end: #eef2f7; --color-border: #dee2e6; --color-border-soft: #e9ecef; --color-error: #d32f2f; --color-success: #00b67a; --shadow-card: 0 4px 24px rgba(15, 23, 42, 0.06); --shadow-card-lg: 0 10px 40px rgba(15, 23, 42, 0.08); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body.funnel-body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand-primary); text-decoration: underline; } a:hover { color: var(--brand-primary-hover); } img { max-width: 100%; height: auto; display: block; } .funnel-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ============================================================ Landing-view + Funnel-view split. The runtime toggles .funnel-state-funnel on body when ZIP is captured; CSS hides the landing surface and shows the funnel card. ============================================================ */ .funnel-landing-view { display: block; } .funnel-funnel-view { display: none; } .funnel-body.funnel-state-funnel .funnel-landing-view { display: none; } .funnel-body.funnel-state-funnel .funnel-funnel-view { display: block; } /* ============================================================ Buttons ============================================================ */ .funnel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease; text-decoration: none; } .funnel-btn:active { transform: translateY(1px); } .funnel-btn:disabled { opacity: 0.5; cursor: not-allowed; } .funnel-btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .funnel-btn-primary:hover:not(:disabled) { background-color: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: #fff; } .funnel-btn-pill { border-radius: var(--radius-pill); padding-left: 1.75rem; padding-right: 1.75rem; } .funnel-btn-lg { font-size: 1.125rem; padding-top: 0.95rem; padding-bottom: 0.95rem; } .funnel-btn-block { width: 100%; } .funnel-arrow { display: inline-block; transform: translateY(-1px); } /* ============================================================ Site header (landing) ============================================================ */ .funnel-site-header { background: #fff; border-bottom: 1px solid var(--color-border-soft); } .funnel-site-header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; } .funnel-brand { font-family: var(--brand-font); font-weight: 700; font-size: 1.5rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; } .funnel-brand-default { color: var(--color-text); } .funnel-brand-primary { color: var(--brand-primary); } .funnel-brand-muted { color: var(--color-text-muted); } /* ============================================================ Hero ============================================================ */ .funnel-hero { background: linear-gradient(180deg, var(--color-bg-hero-start) 0%, var(--color-bg-hero-end) 100%); overflow: hidden; color: var(--color-text); } .funnel-hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; min-height: 540px; padding: 4rem 1.5rem 0; max-width: 1200px; margin: 0 auto; } .funnel-hero-copy { padding-bottom: 4rem; } .funnel-hero-headline { font-family: var(--font-body); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.1; color: var(--color-text); margin: 0 0 2rem; letter-spacing: -0.02em; } .funnel-hero-subhead { font-size: 1.0625rem; color: var(--color-text-muted); margin: -1rem 0 1.5rem; } .funnel-hero-form-label { display: block; font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: 0.5rem; } .funnel-hero-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: stretch; max-width: 520px; } .funnel-hero-zip { width: 100%; padding: 0.95rem 1rem; font-size: 1.125rem; font-family: var(--font-body); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .funnel-hero-zip:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); } .funnel-hero-zip.invalid { border-color: var(--color-error); } .funnel-hero-cta { background: var(--brand-primary); color: #fff; font-weight: 600; padding: 0.95rem 1.75rem; border: 1px solid var(--brand-primary); border-radius: var(--radius-pill); font-size: 1.125rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .funnel-hero-cta:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } .funnel-hero-trust-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; color: var(--color-text-muted); } .funnel-hero-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary); } .funnel-hero-trust-text { font-size: 0.95rem; font-weight: 500; } .funnel-hero-image-wrap { align-self: end; display: flex; justify-content: center; } .funnel-hero-image { display: block; max-height: 540px; width: auto; } /* ============================================================ Value props strip (3-up by default) ============================================================ */ .funnel-value-strip { padding: 4rem 0 3rem; background: #fff; } .funnel-value-headline { text-align: center; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); margin: 0 0 2.5rem; color: var(--color-text); } .funnel-value-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .funnel-value-cols[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .funnel-value-cols[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .funnel-value-prop h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; color: var(--color-text); } .funnel-value-prop p { margin: 0 0 1rem; color: var(--color-text-muted); } .funnel-value-link { font-weight: 600; color: var(--brand-primary); text-decoration: none; } /* ============================================================ Testimonials ============================================================ */ .funnel-testimonials { padding: 4rem 0; background: var(--color-bg-light); } .funnel-section-headline { text-align: center; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 1rem; color: var(--color-text); } .funnel-trustpilot { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .funnel-trustpilot-label { font-weight: 700; color: var(--color-success); } .funnel-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .funnel-review-card { background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-card); } .funnel-review-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; font-style: italic; } .funnel-review-quote { margin: 0 0 1.5rem; font-style: italic; color: var(--color-text); } .funnel-review-attrib { margin: 0; text-align: right; font-weight: 600; color: var(--color-text-muted); } /* ============================================================ Feature grid (why-X, what-you-get, etc.) ============================================================ */ .funnel-feature-grid-section { padding: 4rem 0; background: #fff; } .funnel-section-sub { text-align: center; max-width: 640px; margin: 0 auto 3rem; color: var(--color-text-muted); font-size: 1.0625rem; } .funnel-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; max-width: 960px; margin: 0 auto; } .funnel-feature-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .funnel-feature-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .funnel-feature-cell { text-align: center; } .funnel-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary); margin: 0 auto 1rem; } .funnel-feature-icon svg { width: 32px; height: 32px; display: block; } .funnel-feature-cell h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; } .funnel-feature-cell p { margin: 0 auto; color: var(--color-text-muted); max-width: 28ch; } /* ============================================================ Interstitial CTA strip ============================================================ */ .funnel-cta-strip { padding: 0 0 3rem; background: #fff; text-align: center; } .funnel-cta-strip .funnel-btn { min-width: 240px; } /* ============================================================ Trust bar (carrier logos / partner names) ============================================================ */ .funnel-trust-bar { padding: 3rem 0 4rem; background: #fff; border-top: 1px solid var(--color-border-soft); } .funnel-trust-bar-label { text-align: center; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; color: var(--color-text); margin: 0 0 2rem; } .funnel-trust-bar-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; opacity: 0.85; } .funnel-trust-logo { font-weight: 700; font-size: 1.25rem; color: var(--color-text-muted); } /* ============================================================ Site footer (landing) ============================================================ */ .funnel-site-footer { background: var(--color-bg-light); padding: 2rem 0; border-top: 1px solid var(--color-border-soft); } .funnel-site-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; color: var(--color-text-muted); font-size: 0.875rem; } .funnel-site-footer p { margin: 0; } .funnel-footer-links a { color: var(--color-text-muted); margin: 0 0.25rem; text-decoration: underline; } .funnel-footer-links span[aria-hidden] { color: var(--color-border); } /* Phase 031 A1a — footer trust line (SSL-encryption assurance). */ .funnel-site-footer-trust { color: var(--color-text-muted); font-size: 0.8125rem; } /* ============================================================ Funnel-view header (smaller, centered brand) ============================================================ */ .funnel-runtime-header { background: #fff; border-bottom: 1px solid var(--color-border-soft); padding: 1.25rem 1.5rem; text-align: center; } .funnel-runtime-header .funnel-brand { font-size: 1.75rem; } /* ============================================================ Funnel main + card ============================================================ */ .funnel-main { background: var(--color-bg-light); min-height: calc(100vh - 80px); padding: 2.5rem 1rem 4rem; } .funnel-card { max-width: 720px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-lg); padding: 2.5rem; position: relative; } /* Step transitions live inside the card. Keep the card persistent so the user sees a stable surface across step advances. */ .funnel-step { padding: 0; } .funnel-step[hidden] { display: none; } .funnel-step-title, .funnel-question { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.125rem); text-align: center; margin: 0 0 1.5rem; color: var(--color-text); letter-spacing: -0.01em; } .funnel-step-encouragement { text-align: center; color: var(--color-text-muted); margin: 0 0 2rem; } .funnel-step-body { display: flex; flex-direction: column; gap: 0; } .funnel-step-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; } .funnel-back, .funnel-next { font-family: var(--font-body); font-size: 1rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; padding: 0.85rem 1.5rem; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .funnel-back { background: none; color: var(--brand-primary); padding-left: 0; } .funnel-back:hover { color: var(--brand-primary-hover); } .funnel-back[hidden] { display: none; } .funnel-next { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; margin-left: auto; border-radius: var(--radius-pill); padding: 0.95rem 1.75rem; font-size: 1.125rem; } .funnel-next:hover:not(:disabled) { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } .funnel-next:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ Step components (inputs, labels, selects, autocomplete) ============================================================ */ .funnel-comp { display: block; margin-bottom: 1.75rem; } .funnel-comp[hidden] { display: none; } .funnel-label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; } .funnel-help { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem; } .funnel-input, .funnel-select, .funnel-autocomplete { width: 100%; padding: 0.85rem 1rem; font-size: 1rem; font-family: var(--font-body); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .funnel-input:focus, .funnel-select:focus, .funnel-autocomplete:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); } .funnel-input.invalid, .funnel-select.invalid, .funnel-autocomplete.invalid { border-color: var(--color-error); } .funnel-error { margin-top: 0.5rem; color: var(--color-error); font-size: 0.875rem; font-weight: 500; } .funnel-error[hidden] { display: none; } .funnel-form-error { margin: 0 0 1rem 0; padding: 0.75rem 1rem; background: rgba(220, 38, 38, 0.08); border: 1px solid var(--color-error); border-radius: 0.375rem; color: var(--color-error); font-size: 0.9375rem; font-weight: 500; } .funnel-form-error[hidden] { display: none; } /* ============================================================ Button grid (option pills) ============================================================ */ .funnel-button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .funnel-button-grid[data-cols="1"] { grid-template-columns: 1fr; } .funnel-button-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .funnel-button-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } .funnel-button-grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); } @media (min-width: 600px) { .funnel-button-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .funnel-button-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); } } .funnel-option-pill { background: #fff; border: 1.5px solid var(--color-border); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 0.95rem 1rem; border-radius: var(--radius-md); cursor: pointer; text-align: center; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; } .funnel-option-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .funnel-option-pill[data-selected="1"] { background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--brand-primary); } .funnel-btn-icon { display: inline-flex; align-items: center; justify-content: center; } .funnel-btn-icon svg { display: block; } /* Option-card — large picker with icon + label, used for property-type style steps (Own/Rent, etc.). Distinct from option-pill: vertical layout, bigger touch target, intended for low-cardinality first-step questions. */ .funnel-option-card { background: #fff; border: 1.5px solid var(--color-border); color: var(--color-text); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; padding: 2rem 1rem; border-radius: var(--radius-md); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1rem; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; } .funnel-option-card:hover { border-color: var(--brand-primary); } .funnel-option-card[data-selected="1"] { background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--brand-primary); } .funnel-option-card .funnel-btn-icon { color: var(--color-text); } .funnel-option-card .funnel-btn-icon svg { width: 56px; height: 56px; stroke-width: 1.6; } .funnel-option-card[data-selected="1"] .funnel-btn-icon, .funnel-option-card:hover .funnel-btn-icon { color: var(--brand-primary); } /* ============================================================ Autocomplete dropdown ============================================================ */ .funnel-comp-autocomplete { position: relative; } .funnel-autocomplete-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); margin: 0; padding: 0; list-style: none; z-index: 50; } .funnel-autocomplete-list[hidden] { display: none; } .funnel-autocomplete-option { padding: 0.75rem 1rem; cursor: pointer; font-size: 1rem; color: var(--color-text); border-bottom: 1px solid var(--color-border-soft); } .funnel-autocomplete-option:last-child { border-bottom: none; } .funnel-autocomplete-option:hover, .funnel-autocomplete-option[data-active="1"] { background: var(--brand-primary-soft); color: var(--brand-primary); } /* ============================================================ Group layouts ============================================================ */ .funnel-group { margin-bottom: 1.75rem; } .funnel-group-side-by-side { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .funnel-group-side-by-side { grid-template-columns: 1fr 1fr; } } .funnel-group-stacked { display: flex; flex-direction: column; gap: 1rem; } .funnel-group-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .funnel-group .funnel-comp { margin-bottom: 0; } /* ============================================================ TCPA bundle ============================================================ */ .funnel-tcpa-text { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-muted); text-align: center; } .funnel-tcpa-text a { color: var(--color-text-muted); text-decoration: underline; } .funnel-partners summary { font-size: 0.8125rem; cursor: pointer; color: var(--brand-primary); padding: 0.5rem 0; } .funnel-partners-body { font-size: 0.75rem; color: var(--color-text-muted); padding: 0.5rem; } /* ============================================================ Thank-you (inline success view) ============================================================ */ .funnel-thanks { text-align: center; padding: 2rem 0; } .funnel-thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary); margin: 0 auto 1.5rem; } .funnel-thanks-icon svg { width: 56px; height: 56px; } .funnel-thanks-image { display: inline-block; margin: 0 auto 1.5rem; } .funnel-thanks-headline { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem; color: var(--color-text); } .funnel-thanks-body { color: var(--color-text-muted); margin: 0 0 1.5rem; } .funnel-thanks-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .funnel-thanks-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem; font-size: 1rem; font-weight: 600; background: var(--brand-primary); color: #fff; border-radius: var(--radius-pill); text-decoration: none; } .funnel-thanks-cta:hover { background: var(--brand-primary-hover); color: #fff; } /* ============================================================ Misc ============================================================ */ .funnel-divider { border: 0; border-top: 1px solid var(--color-border); margin: 1.5rem 0; } .funnel-image { display: block; max-width: 100%; height: auto; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .funnel-hero-content { grid-template-columns: 1fr; gap: 0; min-height: auto; padding-top: 2.5rem; } .funnel-hero-copy { padding-bottom: 2rem; } .funnel-hero-image { max-height: 380px; } .funnel-value-cols { grid-template-columns: 1fr !important; gap: 2rem; } .funnel-reviews-grid { grid-template-columns: 1fr; } .funnel-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } .funnel-card { padding: 1.5rem; } } @media (max-width: 560px) { .funnel-hero-form-row { grid-template-columns: 1fr; } .funnel-feature-grid { grid-template-columns: 1fr !important; } /* Keep the header CTA on mobile (the header is sticky) — shrink the wordmark + button so "Local General Insurance" and "Compare" share one line without cramping on narrow phones. */ .funnel-site-header-inner { gap: 0.6rem; padding-top: 0.7rem; padding-bottom: 0.7rem; } .funnel-brand { font-size: 1.15rem; white-space: nowrap; } .funnel-header-cta { flex: 0 0 auto; padding: 0.4rem 0.85rem; font-size: 0.8125rem; } .funnel-site-footer-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 360px) { .funnel-brand { font-size: 1.02rem; } .funnel-header-cta { padding: 0.4rem 0.7rem; } .funnel-header-cta .funnel-arrow { display: none; } } /* ============================================================================ Date picker (Phase 028) — custom calendar popover. GENERAL (all sites); colors come from design tokens so it auto-themes under any theme (the selected day uses --brand-primary). Kept in the base layer (not the theme layer) on purpose, so it works for non-themed sites too. ============================================================================ */ .funnel-date { position: relative; } .funnel-date-input { cursor: pointer; padding-right: 2.5rem; } .funnel-date-icon { position: absolute; right: 0.85rem; top: 1.15rem; width: 1.15rem; height: 1.15rem; pointer-events: none; color: var(--color-text-muted); } .funnel-date-icon svg { width: 100%; height: 100%; } .funnel-date-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 18rem; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card-lg); padding: 0.75rem; } .funnel-date-pop.funnel-date-pop-above { top: auto; bottom: calc(100% + 6px); } .funnel-date-pop[hidden] { display: none; } .funnel-date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .funnel-date-title { font-weight: 700; } .funnel-date-nav { border: none; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); color: var(--color-text); } .funnel-date-nav:hover { background: var(--color-bg-light); } .funnel-date-selects { display: flex; gap: 0.4rem; } .funnel-date-select { font: inherit; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; padding: 0.25rem 0.4rem; color: var(--color-text); cursor: pointer; } .funnel-date-select:focus { outline: 2px solid var(--brand-primary-border); outline-offset: 1px; } .funnel-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .funnel-date-dow { text-align: center; font-size: 0.7rem; color: var(--color-text-muted); padding: 0.25rem 0; } .funnel-date-cell { border: none; background: transparent; cursor: pointer; /* FIXED height (not aspect-ratio): every cell — filled or empty padding — is the same height, so the 6-row grid is a constant height across all months. aspect-ratio let filled cells grow to content height, making months with more content-rows taller → CLS on navigation. */ height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-text); } .funnel-date-cell:hover:not(.funnel-date-empty):not([disabled]) { background: var(--color-bg-light); } .funnel-date-empty { cursor: default; } .funnel-date-cell[disabled] { opacity: 0.3; cursor: not-allowed; } .funnel-date-today { font-weight: 700; } .funnel-date-selected, .funnel-date-selected:hover { background: var(--brand-primary); color: #fff; } /* ============================================================================ Legal pages (Phase 028) — Privacy / Terms / Partners rendered from D1. General readable typography; tokens auto-theme it. Partners pages can be long, so the body is comfortably constrained + spaced. ============================================================================ */ .funnel-legal { padding: 3rem 0 4rem; } .funnel-legal .funnel-container { max-width: 760px; } .funnel-legal-title { font-family: var(--brand-font); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-text); margin: 0 0 1.5rem; } .funnel-legal-body { color: var(--color-text); line-height: 1.7; } .funnel-legal-body h2 { font-family: var(--brand-font); font-size: 1.375rem; margin: 2rem 0 0.75rem; } .funnel-legal-body h3 { font-family: var(--brand-font); font-size: 1.125rem; margin: 1.5rem 0 0.5rem; } .funnel-legal-body h4 { font-family: var(--brand-font); font-size: 1rem; margin: 1.25rem 0 0.5rem; } .funnel-legal-body p { margin: 0 0 1rem; } .funnel-legal-body ul, .funnel-legal-body ol { margin: 0 0 1rem; padding-left: 1.4rem; } .funnel-legal-body li { margin: 0.2rem 0; } .funnel-legal-body a { color: var(--brand-primary); } .funnel-legal-empty { color: var(--color-text-muted); } /* Partners directory: a long roster reads as a scannable multi-column list instead of a comma wall. Each name on its own line; columns flow + never break a name across columns. */ .funnel-legal-partners ul { list-style: none; padding-left: 0; margin: 1.25rem 0 0; columns: 2; column-gap: 2.25rem; font-size: 0.9375rem; } .funnel-legal-partners li { break-inside: avoid; margin: 0.25rem 0; color: var(--color-text-muted); padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border-soft); } @media (min-width: 700px) { .funnel-legal-partners ul { columns: 3; } } @media (min-width: 1024px) { .funnel-legal-partners ul { columns: 4; } } /* ============================================================================ THEME: Trust & Clarity (Phase 026) ---------------------------------------------------------------------------- A named, opt-in visual theme. Sites opt in via funnel.yaml `brand.theme: trust-clarity`; render.js validates against KNOWN_THEMES and emits . EVERY rule below is namespaced under that attribute selector, so a site that doesn't opt in matches NONE of it and its computed styles are byte-identical to the legacy default theme above. This is additive only — nothing above this banner is modified. Design language: calm, modern, trustworthy. Trust-blue structure; verify-green for trust/success ONLY; a single action-amber CTA color; Plus Jakarta Sans headlines + Inter body; soft rounded cards; gentle blue-tinted shadows. MAINTENANCE RULE: do not add a rule here unless it starts with `body[data-theme="trust-clarity"]`. A leak (un-namespaced rule) changes every site. tests/unit/funnel-engine-theme.test.mjs enforces this with a prefix scan. ============================================================================ */ /* --- Design tokens: override the legacy :root values for themed pages only. Custom properties cascade, so re-declaring them on the themed retones every component that consumes var(--brand-*) without touching the component rules. --brand-primary stays trust-blue (structure); the amber CTA gets its OWN token so it never bleeds into structural blue. --- */ body[data-theme="trust-clarity"] { --brand-primary: #0a3d91; /* trust-blue — structure, wordmark, links */ --brand-primary-hover: #082f6f; --brand-primary-soft: #eaf1fc; /* faint blue wash (selected/icon bg) */ --brand-primary-border: #1d6fe0; /* trust-blue-bright — rings/active borders */ --trust-blue-bright: #1d6fe0; /* interactive blue (progress, selected ring) */ --verify-green: #10b981; /* trust / success / checkmarks ONLY */ --brand-cta: #f59e0b; /* action-amber — the ONLY conversion color */ --brand-cta-hover: #e8920b; --brand-cta-text: #0f172a; /* near-black text on amber */ --color-text: #0f172a; --color-text-muted: #475569; --color-bg-page: #ffffff; --color-bg-light: #f4f7fc; --color-bg-hero-start: #f4f7fc; --color-bg-hero-end: #eef3fa; --color-border: #cbd5e1; --color-border-soft: #e2e8f0; --brand-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --shadow-card: 0 4px 24px -6px rgba(10, 61, 145, 0.10); --shadow-card-lg: 0 10px 40px -8px rgba(10, 61, 145, 0.16); } /* --- Headlines move to Plus Jakarta Sans (legacy default used Inter for these; only the wordmark used --brand-font). Tighten tracking for a bespoke feel. --- */ body[data-theme="trust-clarity"] .funnel-hero-headline, body[data-theme="trust-clarity"] .funnel-step-title, body[data-theme="trust-clarity"] .funnel-question, body[data-theme="trust-clarity"] .funnel-value-headline, body[data-theme="trust-clarity"] .funnel-section-headline, body[data-theme="trust-clarity"] .funnel-thanks-headline { font-family: var(--brand-font); letter-spacing: -0.02em; } /* --- Primary CTAs → amber, near-black text, heavier weight. This is the only amber on any themed screen. The back button + links stay trust-blue (they are not conversion actions), so they are intentionally NOT listed here. --- */ body[data-theme="trust-clarity"] .funnel-hero-cta, body[data-theme="trust-clarity"] .funnel-next, body[data-theme="trust-clarity"] .funnel-btn-primary, body[data-theme="trust-clarity"] .funnel-thanks-cta { background: var(--brand-cta); border-color: var(--brand-cta); color: var(--brand-cta-text); font-family: var(--brand-font); font-weight: 800; } body[data-theme="trust-clarity"] .funnel-hero-cta:hover, body[data-theme="trust-clarity"] .funnel-next:hover:not(:disabled), body[data-theme="trust-clarity"] .funnel-btn-primary:hover:not(:disabled), body[data-theme="trust-clarity"] .funnel-thanks-cta:hover { background: var(--brand-cta-hover); border-color: var(--brand-cta-hover); color: var(--brand-cta-text); } /* --- Focus glow: legacy hardcodes an old-blue rgba on inputs. Re-tint to trust-blue-bright under the theme so focus rings match the palette. --- */ body[data-theme="trust-clarity"] .funnel-hero-zip:focus, body[data-theme="trust-clarity"] .funnel-input:focus, body[data-theme="trust-clarity"] .funnel-select:focus, body[data-theme="trust-clarity"] .funnel-autocomplete:focus { border-color: var(--trust-blue-bright); box-shadow: 0 0 0 4px rgba(29, 111, 224, 0.16); } /* --- Quiz step card: airy, left-aligned question, comfortable reading width. The runtime toggles body.funnel-state-funnel; we keep the card surface clean and let the question lead. --- */ body[data-theme="trust-clarity"] .funnel-card { max-width: 600px; border: 1px solid var(--color-border-soft); } body[data-theme="trust-clarity"] .funnel-step-title, body[data-theme="trust-clarity"] .funnel-question { text-align: left; font-size: clamp(1.375rem, 3vw, 1.875rem); } /* --- Per-step icon badge (B2): soft blue square with the trust-blue glyph, sits above the question. Generic — driven by step.icon config. --- */ body[data-theme="trust-clarity"] .funnel-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--brand-primary-soft); color: var(--brand-primary); margin: 0 0 1rem; } body[data-theme="trust-clarity"] .funnel-step-icon svg { width: 24px; height: 24px; } /* --- Encouragement lead-in (B2): warm, benefit-forward, left-aligned. --- */ body[data-theme="trust-clarity"] .funnel-step-encouragement { text-align: left; color: var(--brand-primary); font-size: 1rem; font-weight: 500; margin: 0 0 1.75rem; padding: 0.65rem 0.9rem; background: var(--brand-primary-soft); border-left: 3px solid var(--brand-cta); border-radius: var(--radius-sm); } /* --- Option cards / pills selected state (B1): blue ring + faint wash + a green check. The runtime sets data-selected="1"; this is the only place the themed selected look is defined. Check is a CSS ::after so option markup stays generic (no per-option check element to author). --- */ body[data-theme="trust-clarity"] .funnel-option-card, body[data-theme="trust-clarity"] .funnel-option-pill { position: relative; border-width: 2px; border-color: var(--color-border-soft); box-shadow: var(--shadow-card); transition: border-color .14s ease, background .14s ease, transform .06s ease, box-shadow .14s ease; } body[data-theme="trust-clarity"] .funnel-option-card:hover, body[data-theme="trust-clarity"] .funnel-option-pill:hover { border-color: var(--trust-blue-bright); transform: translateY(-1px); } body[data-theme="trust-clarity"] .funnel-option-card[data-selected="1"], body[data-theme="trust-clarity"] .funnel-option-pill[data-selected="1"] { border-color: var(--trust-blue-bright); background: var(--brand-primary-soft); color: var(--brand-primary); box-shadow: 0 0 0 1px var(--trust-blue-bright) inset; } /* Green check badge in the corner of a selected option. */ body[data-theme="trust-clarity"] .funnel-option-card[data-selected="1"]::after, body[data-theme="trust-clarity"] .funnel-option-pill[data-selected="1"]::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 999px; background-color: var(--verify-green); /* white check glyph, inlined as a mask so it tints with verify-green bg */ 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='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* Pills are compact; nudge the check so it doesn't overlap short labels. */ body[data-theme="trust-clarity"] .funnel-option-pill[data-selected="1"] { padding-right: 2.25rem; } /* --- Back button stays a quiet trust-blue text link (NOT amber — not a conversion action). Continue (amber) is styled in Milestone A. --- */ body[data-theme="trust-clarity"] .funnel-back { color: var(--brand-primary); font-family: var(--brand-font); } /* ============================================================================ THEME: Trust & Clarity — LANDING surface (Milestone C). All namespaced. ============================================================================ */ /* --- Site header: sticky, blurred white, two-tone wordmark in Plus Jakarta. --- */ body[data-theme="trust-clarity"] .funnel-site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border-soft); } body[data-theme="trust-clarity"] .funnel-brand { font-family: var(--brand-font); font-weight: 800; letter-spacing: -0.02em; } body[data-theme="trust-clarity"] .funnel-brand-primary { color: var(--brand-primary); } /* --- Hero: trust-blue gradient over the photo, split on desktop. The engine markup is copy + zip form + side image-wrap; we tint + lay it out. --- */ body[data-theme="trust-clarity"] .funnel-hero { background: linear-gradient(180deg, var(--color-bg-hero-start) 0%, var(--color-bg-hero-end) 100%); } body[data-theme="trust-clarity"] .funnel-hero-headline { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; } body[data-theme="trust-clarity"] .funnel-hero-subhead { font-size: 1.0625rem; color: var(--color-text-muted); } /* ZIP capture as a lifted card on themed hero. */ body[data-theme="trust-clarity"] .funnel-hero-form { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-lg); padding: 1.5rem; max-width: 460px; } body[data-theme="trust-clarity"] .funnel-hero-form-label { font-family: var(--brand-font); font-weight: 700; color: var(--color-text); } body[data-theme="trust-clarity"] .funnel-hero-cta { font-weight: 800; } body[data-theme="trust-clarity"] .funnel-hero-trust-icon { background: transparent; color: var(--verify-green); width: auto; height: auto; } /* Hero figure = a transparent cutout, NOT a framed photo. It sits flush to the hero's bottom edge with a soft blue→green radial halo behind it so the figure reads as part of the hero mesh (no pasted-on box). The halo is a ::before on the wrap, layered behind the image. (E7 / AB-hybrid treatment.) */ body[data-theme="trust-clarity"] .funnel-hero-image-wrap { position: relative; align-self: end; justify-content: flex-end; overflow: visible; } body[data-theme="trust-clarity"] .funnel-hero-image-wrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 92%; background: radial-gradient(46% 60% at 64% 60%, rgba(29, 111, 224, 0.18), rgba(16, 185, 129, 0.07) 46%, transparent 72%); filter: blur(8px); z-index: 0; } body[data-theme="trust-clarity"] .funnel-hero-image { position: relative; z-index: 1; border-radius: 0; box-shadow: none; align-self: end; vertical-align: bottom; } /* --- Value props: checkmark list feel. --- */ body[data-theme="trust-clarity"] .funnel-value-strip { background: #fff; } body[data-theme="trust-clarity"] .funnel-value-prop h3 { font-family: var(--brand-font); font-weight: 700; } /* --- Testimonials: white cards, soft border, on the tinted band. --- */ body[data-theme="trust-clarity"] .funnel-testimonials { background: var(--color-bg-light); } body[data-theme="trust-clarity"] .funnel-review-card { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } body[data-theme="trust-clarity"] .funnel-review-title { font-family: var(--brand-font); font-style: normal; font-weight: 700; } body[data-theme="trust-clarity"] .funnel-review-quote { font-style: normal; } body[data-theme="trust-clarity"] .funnel-trustpilot-label { font-family: var(--brand-font); color: var(--color-text); } /* --- Feature grid: white cards w/ blue icon chips, up to 4-up. --- */ body[data-theme="trust-clarity"] .funnel-feature-grid-section { background: #fff; } /* Tighten the grid: cap the row width so 4 cards read as a set, not a sparse spread; equal gaps. align-items:stretch keeps cards equal-height, and the card's own flex layout below removes the bottom dead space. */ body[data-theme="trust-clarity"] .funnel-feature-grid { gap: 1.25rem; max-width: 1080px; } /* Card is a column flexbox: icon → title → body. The body grows to fill, so a short card has no bottom gap — the content distributes instead of pinning to the top of a stretched box. Icon centered (left-aligned text under it reads as a finished, intentional card). */ body[data-theme="trust-clarity"] .funnel-feature-cell { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; /* equal-height cards: center content so extra height splits evenly — no bottom dead space */ background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.75rem 1.5rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } body[data-theme="trust-clarity"] .funnel-feature-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); border-color: var(--brand-primary-border); } body[data-theme="trust-clarity"] .funnel-feature-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-primary-soft); color: var(--brand-primary-border); margin: 0 0 1rem; } body[data-theme="trust-clarity"] .funnel-feature-cell h3 { font-family: var(--brand-font); font-weight: 700; margin: 0 0 0.4rem; } body[data-theme="trust-clarity"] .funnel-feature-cell p { margin: 0; max-width: 24ch; color: var(--color-text-muted); } /* --- CTA strip: full-width trust-blue band, amber pill (amber from Milestone A). --- */ body[data-theme="trust-clarity"] .funnel-cta-strip { background: var(--brand-primary); padding: 3.5rem 0; } /* --- Carrier trust bar: brand-colored TEXT wordmarks (by design — not logos). Engine emits inline color/style via validated emitter; we set rhythm only. --- */ body[data-theme="trust-clarity"] .funnel-trust-bar { background: var(--color-bg-light); border-top: 1px solid var(--color-border-soft); } body[data-theme="trust-clarity"] .funnel-trust-bar-label { font-family: var(--brand-font); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--color-text-muted); } body[data-theme="trust-clarity"] .funnel-trust-bar-logos { gap: 1.5rem 2.5rem; opacity: 1; } body[data-theme="trust-clarity"] .funnel-trust-logo { font-size: 1.1875rem; font-weight: 700; } /* Independent-comparison disclaimer: fine print under the carrier wordmarks. */ body[data-theme="trust-clarity"] .funnel-trust-bar-disclaimer { margin: 1rem auto 0; max-width: 42rem; font-size: 0.75rem; line-height: 1.6; color: var(--color-text-muted); } /* --- Footer: light, centered, trust-blue links. --- */ body[data-theme="trust-clarity"] .funnel-site-footer { background: #fff; border-top: 1px solid var(--color-border-soft); } body[data-theme="trust-clarity"] .funnel-footer-links a { color: var(--brand-primary-border); } /* --- Runtime (in-funnel) header: smaller centered wordmark. --- */ body[data-theme="trust-clarity"] .funnel-runtime-header { border-bottom: 1px solid var(--color-border-soft); } /* --- Desktop: split hero into copy | image two-up. --- */ @media (min-width: 901px) { body[data-theme="trust-clarity"] .funnel-hero-content { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; /* figure column matches the copy column height — no dead space above the cutout */ min-height: 520px; } /* Cutout fills its column height and bottom-anchors, so the figure rises to meet the headline instead of floating short with dead space above it. Capped upscale (native 472px → 600px) keeps it crisp; width follows aspect + is clamped to the column so it never overflows on a narrow desktop. */ body[data-theme="trust-clarity"] .funnel-hero-image-wrap { height: 100%; align-items: flex-end; } body[data-theme="trust-clarity"] .funnel-hero-image { height: 100%; max-height: 600px; width: auto; max-width: 100%; object-fit: contain; object-position: bottom center; } body[data-theme="trust-clarity"] .funnel-feature-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================ THEME: Trust & Clarity — POLISH PASS (Phase 026, elegance layer) ---------------------------------------------------------------------------- Depth, atmosphere, deliberate hierarchy, motion — kept calm + fast. PERFORMANCE: animation only via transform/opacity (zero CLS). Scroll-reveal gated behind @supports(animation-timeline) AND prefers-reduced-motion, so unsupported / reduce-motion browsers see the final state (never opacity:0). All rules namespaced under body[data-theme="trust-clarity"]. ============================================================================ */ /* Atmosphere: subtle two-tone radial mesh behind the hero (blue + faint green) instead of a flat fill — reads modern, not loud. */ body[data-theme="trust-clarity"] .funnel-hero { background: radial-gradient(62% 80% at 12% 8%, rgba(29, 111, 224, 0.12), transparent 60%), radial-gradient(48% 64% at 92% 16%, rgba(16, 185, 129, 0.10), transparent 58%), linear-gradient(180deg, #f6f9fd 0%, #eef3fa 100%); } /* Hero headline: bigger + tighter, with a premium trust-blue→bright-blue text gradient (E1). Solid trust-blue is set FIRST as the fallback for browsers without background-clip:text; supporting browsers paint the gradient and the transparent fill reveals it. Non-themed sites are unaffected (namespaced). */ body[data-theme="trust-clarity"] .funnel-hero-headline { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; /* line-height + a little vertical padding so the gradient text box doesn't clip descenders (the "g"/"." on "guesswork.") — background-clip:text clips to the line box, so tight leading shaves descenders on the last line. */ line-height: 1.12; padding-bottom: 0.08em; color: var(--brand-primary); background: linear-gradient(105deg, #0a3d91 0%, #1457c7 45%, #1d6fe0 80%, #3b9af0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ZIP card earns real elevation + a faint ring so it reads as THE action. */ body[data-theme="trust-clarity"] .funnel-hero-form { box-shadow: 0 20px 60px -16px rgba(10, 61, 145, 0.28), 0 0 0 1px rgba(10, 61, 145, 0.04); } /* Amber CTAs: soft glow + lift on hover (transform only). */ body[data-theme="trust-clarity"] .funnel-hero-cta, body[data-theme="trust-clarity"] .funnel-next, body[data-theme="trust-clarity"] .funnel-btn-primary { box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.45); transition: transform .14s ease, box-shadow .14s ease, background .14s ease; } body[data-theme="trust-clarity"] .funnel-hero-cta:hover, body[data-theme="trust-clarity"] .funnel-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(245, 158, 11, 0.55); } /* Section eyebrows: a short amber accent rule above section/value headlines — a single deliberate flourish that gives each section a confident entry. */ body[data-theme="trust-clarity"] .funnel-section-headline::before, body[data-theme="trust-clarity"] .funnel-value-headline::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 999px; background: var(--brand-cta); margin: 0 auto 1rem; } /* Recessed carrier band: inset shadow → distinct lower layer, not another flat row. */ body[data-theme="trust-clarity"] .funnel-trust-bar { box-shadow: inset 0 1px 0 rgba(10, 61, 145, 0.04); } /* Quiz option tactile press. */ body[data-theme="trust-clarity"] .funnel-option-card:active, body[data-theme="trust-clarity"] .funnel-option-pill:active { transform: scale(0.985); } /* ----- MOTION (opt-in, accessibility-gated) ----- */ @media (prefers-reduced-motion: no-preference) { body[data-theme="trust-clarity"] .funnel-hero-copy { animation: tc-rise-in .6s cubic-bezier(.22,.61,.36,1) both; } body[data-theme="trust-clarity"] .funnel-hero-form { animation: tc-rise-in .6s cubic-bezier(.22,.61,.36,1) .12s both; } body[data-theme="trust-clarity"] .funnel-hero-image-wrap { animation: tc-fade-in .8s ease .1s both; } body[data-theme="trust-clarity"] .funnel-option-card[data-selected="1"]::after, body[data-theme="trust-clarity"] .funnel-option-pill[data-selected="1"]::after { animation: tc-pop .22s cubic-bezier(.34,1.56,.64,1) both; } } /* Scroll-reveal: only where supported; otherwise content renders normally. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { body[data-theme="trust-clarity"] .funnel-value-prop, body[data-theme="trust-clarity"] .funnel-review-card, body[data-theme="trust-clarity"] .funnel-feature-cell, body[data-theme="trust-clarity"] .funnel-cta-strip .funnel-btn { animation: tc-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; } body[data-theme="trust-clarity"] .funnel-value-cols > *:nth-child(2), body[data-theme="trust-clarity"] .funnel-reviews-grid > *:nth-child(2), body[data-theme="trust-clarity"] .funnel-feature-grid > *:nth-child(2) { animation-delay: .06s; } body[data-theme="trust-clarity"] .funnel-value-cols > *:nth-child(3), body[data-theme="trust-clarity"] .funnel-reviews-grid > *:nth-child(3), body[data-theme="trust-clarity"] .funnel-feature-grid > *:nth-child(3) { animation-delay: .12s; } body[data-theme="trust-clarity"] .funnel-feature-grid > *:nth-child(4) { animation-delay: .18s; } } } @keyframes tc-rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes tc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tc-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes tc-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } /* ============================================================================ THEME: Trust & Clarity — story-cards (E2) + how-it-works (E3) sections. All namespaced under body[data-theme="trust-clarity"]; non-themed sites that use these section types fall back to unstyled (still semantic) markup. ============================================================================ */ /* story-cards: elevated, hover-lifting cards with a soft blue icon chip. */ body[data-theme="trust-clarity"] .funnel-story-cards-section { background: #fff; padding: 4rem 0; } body[data-theme="trust-clarity"] .funnel-story-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1080px; margin: 0 auto; } body[data-theme="trust-clarity"] .funnel-story-cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } body[data-theme="trust-clarity"] .funnel-story-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } body[data-theme="trust-clarity"] .funnel-story-card { background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.75rem 1.5rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } body[data-theme="trust-clarity"] .funnel-story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); border-color: var(--brand-primary-border); } body[data-theme="trust-clarity"] .funnel-story-card-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-primary-soft); color: var(--brand-primary-border); margin: 0 auto 1rem; } /* Icons are drawn top-heavy (house roofs, shield tops) and bottom-anchored in the viewBox, so a geometrically-centered box reads slightly high with empty space below. Fill the chip a bit more + a small optical nudge down centers them to the eye. */ body[data-theme="trust-clarity"] .funnel-story-card-icon svg { width: 32px; height: 32px; display: block; } body[data-theme="trust-clarity"] .funnel-story-card-title { font-family: var(--brand-font); font-weight: 700; font-size: 1.1875rem; margin: 0 0 0.4rem; } body[data-theme="trust-clarity"] .funnel-story-card-body { margin: 0; color: var(--color-text-muted); } /* how-it-works: centered numbered steps with the number badge on the icon chip. */ body[data-theme="trust-clarity"] .funnel-how-it-works { background: var(--color-bg-light); padding: 4rem 0; } body[data-theme="trust-clarity"] .funnel-hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 960px; margin: 2.5rem auto 0; } body[data-theme="trust-clarity"] .funnel-hiw-step { text-align: center; } body[data-theme="trust-clarity"] .funnel-hiw-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border-soft); color: var(--brand-primary); margin-bottom: 0.75rem; } body[data-theme="trust-clarity"] .funnel-hiw-icon svg { width: 32px; height: 32px; display: block; } body[data-theme="trust-clarity"] .funnel-hiw-num { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 999px; background: var(--brand-primary); color: #fff; font-family: var(--brand-font); font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; } body[data-theme="trust-clarity"] .funnel-hiw-title { font-family: var(--brand-font); font-weight: 700; font-size: 1.0625rem; margin: 0 0 0.3rem; } body[data-theme="trust-clarity"] .funnel-hiw-body { margin: 0 auto; max-width: 28ch; color: var(--color-text-muted); font-size: 0.9375rem; } @media (max-width: 768px) { body[data-theme="trust-clarity"] .funnel-story-cards, body[data-theme="trust-clarity"] .funnel-hiw-steps { grid-template-columns: 1fr; } } /* Step eyebrow (Phase 028): small amber-accented label above a step title, marking a phase shift. Namespaced; non-themed sites show a plain label. */ body[data-theme="trust-clarity"] .funnel-step-eyebrow { display: inline-block; margin: 0 0 0.85rem; font-family: var(--brand-font); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-cta); background: rgba(245, 158, 11, 0.13); padding: 0.4rem 0.85rem; border-radius: 999px; } /* ============================================================================ THEME: Trust & Clarity — in-hero embedded first question (E5). `hero.embed_step` renders a step's first button-grid as a hero card via renderComponent. Styled as an elevated white card with compact 2-up option cards + a full-width amber Continue. Namespaced; non-themed sites render the embedded grid with their default (still-functional) component styles. ============================================================================ */ body[data-theme="trust-clarity"] .funnel-hero-embed { background: #fff; border-radius: var(--radius-md); padding: 1.25rem; max-width: 460px; box-shadow: 0 30px 80px -24px rgba(10, 61, 145, 0.4), 0 0 0 1px rgba(10, 61, 145, 0.05); } body[data-theme="trust-clarity"] .funnel-hero-embed .funnel-comp { margin: 0; } body[data-theme="trust-clarity"] .funnel-hero-embed .funnel-question { font-family: var(--brand-font); font-weight: 800; font-size: 1.125rem; margin: 0 0 0.75rem; } body[data-theme="trust-clarity"] .funnel-hero-embed .funnel-button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } body[data-theme="trust-clarity"] .funnel-hero-embed .funnel-option-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 0.9rem 0.75rem; } body[data-theme="trust-clarity"] .funnel-hero-embed .funnel-hero-cta { width: 100%; margin-top: 0.75rem; }