/* ========================================================================== Unity Life and Health LLC — Conversion Funnel Styles Palette: Treasure Coast coastal teal / sand / warm white (see tokens.css) Art direction: docs/design-direction.md tokens.css is linked before this file in page . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: radial-gradient(1100px 480px at 8% -8%, rgba(31, 122, 120, 0.1), transparent 55%), radial-gradient(900px 420px at 92% 0%, rgba(217, 139, 106, 0.08), transparent 50%), radial-gradient(800px 360px at 50% 100%, rgba(79, 127, 98, 0.06), transparent 55%), var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--navy-800); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--green-700); } :focus-visible { outline: 3px solid rgba(31, 122, 120, 0.55); outline-offset: 3px; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--navy-900); color: var(--white); padding: 0.75rem 1rem; border-radius: var(--radius-sm); } .skip-link:focus { top: 1rem; } .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } .narrow { width: min(100% - 2rem, var(--narrow)); } .placeholder-inline { display: inline; padding: 0.05em 0.35em; border-radius: 0.35em; background: rgba(31, 122, 120, 0.12); color: var(--green-700); font-weight: 600; } .placeholder-caption { margin: 0.65rem 0 0; font-size: 0.85rem; color: var(--muted); } /* Typography helpers */ .eyebrow { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-700); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--navy-900); } h2 { font-size: clamp(1.85rem, 3.4vw, 2.55rem); margin: 0 0 1rem; } h3 { font-size: 1.25rem; margin: 0 0 0.65rem; } .section-lede { margin: 0; color: var(--ink-soft); font-size: 1.1rem; max-width: 46ch; } .section { padding: clamp(4rem, 8vw, 6.5rem) 0; } .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 40rem; } /* Buttons */ .btn { --btn-bg: var(--navy-900); --btn-color: var(--white); --btn-border: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.8rem 1.35rem; border-radius: 999px; border: 1.5px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-color); font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: transform 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease); box-shadow: var(--shadow-sm); } .btn:hover { transform: translateY(-1px); color: var(--btn-color); } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--ocean-teal); --btn-color: var(--white); box-shadow: 0 8px 22px rgba(31, 122, 120, 0.22); } .btn--primary:hover { --btn-bg: var(--ocean-teal-deep); } .btn--sunrise { --btn-bg: var(--sunrise); --btn-color: var(--white); box-shadow: 0 8px 22px rgba(217, 139, 106, 0.28); } .btn--sunrise:hover { --btn-bg: var(--sunrise-deep); color: var(--white); } .btn--secondary { --btn-bg: rgba(255, 255, 255, 0.92); --btn-color: var(--navy-900); --btn-border: rgba(11, 37, 69, 0.14); } .btn--secondary:hover { --btn-bg: var(--white); } .btn--ghost { --btn-bg: transparent; --btn-color: var(--navy-900); --btn-border: rgba(11, 37, 69, 0.18); box-shadow: none; } .btn--ghost:hover { --btn-bg: rgba(11, 37, 69, 0.04); } .btn--lg { min-height: 54px; padding-inline: 1.6rem; font-size: 1.02rem; } .btn--block { width: 100%; } .text-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-weight: 700; color: var(--green-700); text-decoration: none; } .text-link::after { content: "→"; transition: transform 180ms var(--ease); } .text-link:hover::after { transform: translateX(3px); } /* Utility bar */ .utility-bar { background: var(--navy-950); color: rgba(255, 255, 255, 0.86); font-size: 0.84rem; } .utility-bar__inner { min-height: var(--utility-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 0.45rem; } .utility-bar__license { margin: 0; } .utility-bar__contacts { display: flex; gap: 1.1rem; flex-wrap: wrap; } .utility-link { color: rgba(255, 255, 255, 0.92); text-decoration: none; display: inline-flex; gap: 0.4rem; align-items: baseline; } .utility-link:hover { color: #b8e0cf; } .utility-link__label { opacity: 0.65; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } .utility-link--phone { font-weight: 700; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(244, 247, 250, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease); } .site-header.is-scrolled { border-bottom-color: rgba(11, 37, 69, 0.08); box-shadow: 0 8px 24px rgba(11, 37, 69, 0.05); background: rgba(255, 255, 255, 0.92); } .site-header__inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--navy-900); min-width: 0; } .brand__mark { flex-shrink: 0; border-radius: 11px; box-shadow: var(--shadow-sm); } .brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; } .brand__llc { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .nav__list { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; } .nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; } .nav a:hover, .nav a[aria-current="true"] { color: var(--navy-900); } .header-actions { display: flex; align-items: center; gap: 0.6rem; } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid rgba(11, 37, 69, 0.12); border-radius: 12px; background: var(--white); padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle__bar { display: block; width: 18px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform 180ms var(--ease), opacity 180ms var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Hero — full-bleed composition */ .hero { position: relative; min-height: min(92vh, 820px); display: grid; align-items: end; overflow: clip; color: var(--white); isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); animation: hero-drift 18s var(--ease) infinite alternate; } .hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 61, 76, 0.2) 0%, rgba(15, 61, 76, 0.48) 40%, rgba(10, 42, 53, 0.78) 100%), linear-gradient(90deg, rgba(15, 61, 76, 0.52) 0%, rgba(15, 61, 76, 0.12) 72%); } .hero__content { padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(3.5rem, 7vw, 5rem); max-width: 40rem; margin-left: max((100% - var(--container)) / 2, 1rem); margin-right: auto; width: min(100% - 2rem, 40rem); } .hero__brand { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-weight: 600; letter-spacing: -0.02em; color: #f2f7fb; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.2); } .hero__title { margin: 0 0 1rem; color: var(--white); font-size: clamp(2.15rem, 5vw, 3.35rem); max-width: 14ch; text-wrap: balance; } .hero__lede { margin: 0 0 1.75rem; color: rgba(242, 247, 251, 0.9); font-size: 1.12rem; max-width: 38ch; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.85rem; } .hero__reassure { margin: 0 0 1.15rem; color: rgba(242, 247, 251, 0.86); font-size: 0.95rem; font-weight: 600; } .page-hero .hero__reassure { color: var(--ink-soft); } .hero__trust { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; list-style: none; margin: 0; padding: 0; color: rgba(242, 247, 251, 0.88); font-size: 0.92rem; font-weight: 600; } .hero__trust li { display: inline-flex; align-items: center; gap: 0.4rem; } .hero__trust li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ocean-teal-light); box-shadow: 0 0 0 3px rgba(58, 155, 152, 0.28); } .hero__positioning { margin: 0 0 1.35rem; color: rgba(255, 252, 248, 0.92); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; max-width: 40ch; } .hero__badge { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(255, 252, 248, 0.16); border: 1px solid rgba(255, 252, 248, 0.28); color: #fffcf8; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .hero__badge img { width: 18px; height: 18px; } .reveal { opacity: 0; transform: translateY(14px); animation: rise-in 700ms var(--ease) forwards; } .reveal--delay-1 { animation-delay: 120ms; } .reveal--delay-2 { animation-delay: 220ms; } .reveal--delay-3 { animation-delay: 320ms; } .reveal--delay-4 { animation-delay: 420ms; } @keyframes rise-in { to { opacity: 1; transform: translateY(0); } } @keyframes hero-drift { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.2%, -1%, 0); } } /* Trust strip */ .trust-strip { background: var(--white); border-block: 1px solid rgba(11, 37, 69, 0.06); padding: 1.5rem 0; } .trust-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } .trust-strip__list li { display: grid; gap: 0.2rem; padding: 0.35rem 0.25rem; } .trust-strip__list strong { color: var(--navy-900); font-size: 0.95rem; } .trust-strip__list span:last-child { color: var(--muted); font-size: 0.88rem; line-height: 1.4; } .trust-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 11px; background: rgba(61, 139, 110, 0.1); color: var(--green-700); margin-bottom: 0.35rem; } /* Audience */ .audience { text-align: left; } .audience .section-lede { margin-bottom: 1.5rem; } .audience__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; } .audience__list li { position: relative; padding: 0.95rem 1rem 0.95rem 2.6rem; background: var(--white); border: 1px solid rgba(11, 37, 69, 0.06); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--ink-soft); font-weight: 600; } .audience__list li::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--green-600); box-shadow: inset 0 0 0 3px rgba(61, 139, 110, 0.2); } /* Coverage */ .coverage { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.9)), var(--surface); } .coverage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } .coverage-card { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.07); border-radius: var(--radius-lg); padding: 1.5rem 1.45rem 1.35rem; box-shadow: var(--shadow-sm); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease); } .coverage-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(61, 139, 110, 0.28); } .coverage-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, rgba(61, 139, 110, 0.14), rgba(22, 58, 95, 0.08)); color: var(--navy-800); margin-bottom: 1rem; } .coverage-card p { margin: 0 0 0.75rem; color: var(--ink-soft); font-size: 0.98rem; } .coverage-card__for strong, .coverage-card__why strong { color: var(--navy-900); font-weight: 700; } /* Why Unity */ .why__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; } .why__list { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 1rem; } .why__list li { display: grid; gap: 0.2rem; padding-left: 1rem; border-left: 3px solid rgba(61, 139, 110, 0.55); } .why__list strong { color: var(--navy-900); } .why__list span { color: var(--ink-soft); } .why__panel { background: radial-gradient(500px 280px at 20% 0%, rgba(61, 139, 110, 0.22), transparent 60%), linear-gradient(165deg, var(--navy-900), var(--navy-800)); color: rgba(242, 247, 251, 0.92); border-radius: calc(var(--radius-lg) + 4px); padding: clamp(1.75rem, 4vw, 2.5rem); display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; box-shadow: var(--shadow-lg); } .why__panel blockquote { margin: 0; } .why__panel blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.35; color: var(--white); } .why__panel-note { margin: 2rem 0 0; font-size: 0.92rem; color: rgba(242, 247, 251, 0.78); } /* Process */ .process { background: var(--white); border-block: 1px solid rgba(11, 37, 69, 0.05); } .process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; counter-reset: none; } .process__steps li { position: relative; padding: 1.5rem 1.35rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid rgba(11, 37, 69, 0.06); } .process__num { display: block; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--green-600); margin-bottom: 0.7rem; } .process__steps p { margin: 0; color: var(--ink-soft); } .process__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* Advisor */ .advisor__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .advisor__photo { margin: 0; border-radius: calc(var(--radius-lg) + 2px); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy-900); } .advisor__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .advisor__content p { color: var(--ink-soft); } .advisor__points { margin: 1.35rem 0 1.75rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; } .advisor__points li { padding-left: 1.4rem; position: relative; font-weight: 600; color: var(--navy-900); } .advisor__points li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green-600); } /* Quote / conversion */ .quote { background: linear-gradient(180deg, rgba(11, 37, 69, 0.03), transparent 30%), var(--surface); } .quote__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .quote__phone-card { margin-top: 1.75rem; padding: 1.25rem 1.3rem; border-radius: var(--radius-md); background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); box-shadow: var(--shadow-sm); } .quote__phone-label { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.9rem; font-weight: 600; } .quote__phone { display: inline-block; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.1rem); font-weight: 600; color: var(--navy-900); text-decoration: none; letter-spacing: -0.02em; } .quote__phone:hover { color: var(--green-700); } .quote__phone-note { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.88rem; } .quote__form-wrap { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); border-radius: calc(var(--radius-lg) + 4px); padding: clamp(1.35rem, 3vw, 2rem); box-shadow: var(--shadow-md); } .quote-form { display: grid; gap: 1rem; } .form-row { display: grid; gap: 0.4rem; } .form-row--split { grid-template-columns: 1fr 1fr; gap: 0.85rem; } .form-row label { font-size: 0.9rem; font-weight: 700; color: var(--navy-900); } .optional { font-weight: 500; color: var(--muted); } .quote-form input, .quote-form select, .quote-form textarea { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; font: inherit; color: var(--ink); background: #fbfcfd; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease); } .quote-form input:hover, .quote-form select:hover, .quote-form textarea:hover { border-color: #b7c7d6; } .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(61, 139, 110, 0.16); background: var(--white); } .quote-form textarea { resize: vertical; min-height: 110px; } .form-reassure { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--navy-800); line-height: 1.45; } .form-disclaimer { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; } .form-status { margin: 0; padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.95rem; font-weight: 600; } .form-status.is-success { background: rgba(61, 139, 110, 0.12); color: var(--green-700); } .form-status.is-error { background: rgba(170, 50, 50, 0.1); color: #8a2a2a; } .quote-form input.is-invalid, .quote-form select.is-invalid, .quote-form textarea.is-invalid { border-color: #c45b5b; } /* FAQ */ .faq__list { display: grid; gap: 0.75rem; } .faq-item { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); border-radius: var(--radius-md); padding: 0.35rem 1rem; box-shadow: var(--shadow-sm); } .faq-item summary { cursor: pointer; list-style: none; padding: 0.95rem 1.8rem 0.95rem 0; font-weight: 700; color: var(--navy-900); position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.35rem; color: var(--green-700); font-weight: 500; } .faq-item[open] summary::after { content: "–"; } .faq-item p { margin: 0 0 1rem; color: var(--ink-soft); max-width: 58ch; } /* Final CTA */ .final-cta { padding: clamp(4rem, 8vw, 6rem) 0; background: radial-gradient(700px 320px at 15% 20%, rgba(61, 139, 110, 0.22), transparent 60%), linear-gradient(155deg, var(--navy-900), #123252 55%, var(--navy-800)); color: rgba(242, 247, 251, 0.9); } .final-cta__inner { max-width: 42rem; text-align: left; } .final-cta h2 { color: var(--white); margin-bottom: 0.85rem; } .final-cta p { margin: 0 0 1.6rem; font-size: 1.1rem; max-width: 42ch; } .final-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .final-cta .btn--secondary { --btn-bg: rgba(255, 255, 255, 0.1); --btn-color: var(--white); --btn-border: rgba(255, 255, 255, 0.35); } .final-cta .btn--secondary:hover { --btn-bg: rgba(255, 255, 255, 0.18); } /* Footer */ .site-footer { background: var(--navy-950); color: rgba(232, 238, 244, 0.82); padding: 3.5rem 0 6.5rem; } .site-footer a { color: rgba(232, 238, 244, 0.88); text-decoration: none; } .site-footer a:hover { color: #b8e0cf; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; } .site-footer__brand p { margin: 1rem 0 0; max-width: 34ch; color: rgba(232, 238, 244, 0.72); } .brand--footer .brand__name, .brand--footer { color: var(--white); } .brand--footer .brand__llc { color: rgba(232, 238, 244, 0.55); } .footer-heading { margin: 0 0 0.85rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232, 238, 244, 0.55); } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.95rem; } .site-footer__bottom { border-top: 1px solid rgba(232, 238, 244, 0.12); padding-top: 1.35rem; display: grid; gap: 0.75rem; font-size: 0.88rem; color: rgba(232, 238, 244, 0.62); } .site-footer__bottom p { margin: 0; } .compliance-note { max-width: 78ch; line-height: 1.55; } /* Mobile sticky CTA */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 0.55rem; padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); border-top: 1px solid rgba(11, 37, 69, 0.1); box-shadow: 0 -10px 30px rgba(11, 37, 69, 0.08); } .mobile-cta a { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; text-decoration: none; } .mobile-cta__call { background: var(--navy-900); color: var(--white); } .mobile-cta__quote { background: var(--green-600); color: var(--white); box-shadow: 0 8px 18px rgba(61, 139, 110, 0.28); font-weight: 800; } .mobile-cta__call:hover, .mobile-cta__quote:hover { filter: brightness(1.05); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .hero__media img, .btn, .coverage-card, .text-link::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* Responsive */ @media (max-width: 980px) { .trust-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why__grid, .advisor__grid, .quote__grid, .site-footer__grid { grid-template-columns: 1fr; } .process__steps { grid-template-columns: 1fr; } } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .header-actions__call { display: none; } .nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(11, 37, 69, 0.08); box-shadow: var(--shadow-md); padding: 0.75rem 1rem 1.1rem; display: none; } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; } .nav a { display: block; padding: 0.8rem 0.4rem; } .coverage__grid { grid-template-columns: 1fr; } .mobile-cta { display: flex; } body { padding-bottom: var(--mobile-cta-h); } .site-footer { padding-bottom: 7.5rem; } } @media (max-width: 640px) { .utility-bar__inner { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .utility-bar__contacts { width: 100%; justify-content: space-between; } .brand__name { font-size: 1rem; } .hero { min-height: min(78vh, 680px); padding-block: 3.5rem 3rem; } .hero__title { max-width: none; font-size: clamp(1.85rem, 8vw, 2.4rem); } .hero__lede { font-size: 1.02rem; margin-bottom: 1.25rem; } .hero__ctas { flex-direction: column; } .hero__ctas .btn { width: 100%; min-height: 52px; } .trust-strip__list { grid-template-columns: 1fr 1fr; } .form-row--split { grid-template-columns: 1fr; } .quote-form { gap: 1.15rem; } .final-cta__actions, .mid-cta__actions, .process__cta { flex-direction: column; } .final-cta__actions .btn, .mid-cta__actions .btn, .process__cta .btn { width: 100%; min-height: 52px; } .next-steps__list { grid-template-columns: 1fr; } .proof-grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .trust-strip__list { grid-template-columns: 1fr; } } /* ========================================================================== Multi-page system additions + complete UI states ========================================================================== */ .site-header { position: sticky; } .nav a[aria-current="page"] { color: var(--navy-900); box-shadow: inset 0 -2px 0 var(--green-600); } .btn:disabled, .btn[disabled], .btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none; pointer-events: none; } .btn.is-active { box-shadow: 0 0 0 3px rgba(61, 139, 110, 0.25), 0 10px 24px rgba(61, 139, 110, 0.22); } .btn.is-loading { position: relative; pointer-events: none; color: transparent !important; } .btn.is-loading .btn-spinner, .btn.is-loading [data-btn-label] + .btn-spinner { opacity: 1; } .btn-spinner { position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--white); opacity: 0; animation: spin 0.8s linear infinite; } .btn.is-loading .btn-spinner { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } } .btn--sm { min-height: 40px; padding: 0.55rem 1rem; font-size: 0.9rem; } /* Demo hover/focus for QA page */ .is-hover-demo, .btn.is-hover-demo { transform: translateY(-1px); border-color: rgba(61, 139, 110, 0.28); box-shadow: var(--shadow-md); } .focus-demo, .force-focus-demo { outline: 3px solid rgba(61, 139, 110, 0.55); outline-offset: 3px; border-color: var(--green-600) !important; box-shadow: 0 0 0 4px rgba(61, 139, 110, 0.16); } /* Page heroes */ .page-hero { padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 247, 250, 0.2)), radial-gradient(900px 320px at 10% 0%, rgba(61, 139, 110, 0.1), transparent 60%); } .page-hero--compact { padding-bottom: 1rem; } .page-hero--service { padding-bottom: 0; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--navy-900); margin: 0 0 1rem; } .page-hero__lede { margin: 0 0 1.5rem; color: var(--ink-soft); font-size: 1.12rem; max-width: 48ch; } .page-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .page-hero__panel { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); } .page-hero__panel p { color: var(--ink-soft); margin-top: 0; } .h3-like { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.65rem; color: var(--navy-900); } .section--muted { background: rgba(255, 255, 255, 0.55); border-block: 1px solid rgba(11, 37, 69, 0.05); } .section-follow { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .inline-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .cta-trust { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; list-style: none; margin: 1.1rem 0 0; padding: 0; color: var(--muted); font-size: 0.92rem; font-weight: 600; } .cta-trust li { display: inline-flex; align-items: center; gap: 0.4rem; } .cta-trust li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--green-500); } .final-cta .cta-trust { color: rgba(242, 247, 251, 0.82); } .final-cta .cta-trust a { color: inherit; } .card-actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1.1rem; margin-top: 0.85rem; align-items: center; } .coverage-card--detailed { display: flex; flex-direction: column; } .coverage-card--detailed .card-actions { margin-top: auto; padding-top: 0.75rem; } .coverage-card:focus-within, .coverage-card.is-selected { border-color: rgba(61, 139, 110, 0.45); box-shadow: var(--shadow-md); } .coverage-card.is-selected { outline: 2px solid rgba(61, 139, 110, 0.35); outline-offset: 2px; } .card-copy-short { font-size: 0.95rem; } .card-copy-long { font-size: 1rem; } .coverage-card--skeleton { min-height: 180px; pointer-events: none; } .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .feature-card { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.07); border-radius: var(--radius-md); padding: 1.25rem 1.2rem; box-shadow: var(--shadow-sm); } .feature-card h3 { margin-bottom: 0.4rem; } .feature-card p { margin: 0; color: var(--ink-soft); } .split-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .check-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; } .check-list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--green-600); } .soft-panel { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); } .soft-panel--tight { margin-top: 1.25rem; } .soft-panel__note { margin: 1rem 0 0; color: var(--muted); font-size: 0.95rem; } .mini-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.65rem; color: var(--ink-soft); } /* Form states */ .field-hint { margin: 0; font-size: 0.85rem; line-height: 1.4; } .field-hint.is-error { color: #8a2a2a; } .field-hint.is-success { color: var(--green-700); } .quote-form input.is-valid, .quote-form select.is-valid, .quote-form textarea.is-valid { border-color: var(--green-600); background: rgba(61, 139, 110, 0.04); } .quote-form input:disabled, .quote-form select:disabled, .quote-form textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; } .form-state-banner { margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.95rem; font-weight: 600; } .form-state-banner.is-error { background: rgba(170, 50, 50, 0.1); color: #8a2a2a; } .form-state-banner.is-success { background: rgba(61, 139, 110, 0.12); color: var(--green-700); } .form-status { display: block; } /* Skeletons */ .skeleton { display: block; background: linear-gradient(90deg, #e6edf3 25%, #f5f8fb 50%, #e6edf3 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 10px; } .skeleton-line { height: 0.9rem; margin-bottom: 0.75rem; } .skeleton-line.short { width: 45%; } .skeleton-input { height: 48px; margin-bottom: 0.75rem; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Empty / state pages */ .empty-state, .state-page__card { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--shadow-md); } .empty-state__title { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--navy-900); } .state-page { padding: clamp(4rem, 10vw, 7rem) 0; } .state-page__card--success { border-color: rgba(61, 139, 110, 0.28); background: radial-gradient(500px 200px at 0% 0%, rgba(61, 139, 110, 0.1), transparent 60%), var(--white); } .notice-banner { margin-bottom: 1.5rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(36, 80, 122, 0.08); color: var(--navy-800); font-weight: 700; font-size: 0.95rem; } .prose h2 { font-size: 1.45rem; margin-top: 2rem; } .prose p { color: var(--ink-soft); } /* Image fallback */ .media-fallback, .advisor__photo { background: linear-gradient(145deg, var(--navy-800), var(--navy-900)); min-height: 220px; } .media-fallback img { min-height: 220px; object-fit: cover; background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04) 12px, rgba(255, 255, 255, 0.08) 12px, rgba(255, 255, 255, 0.08) 24px ); } img[alt].is-broken, .media-fallback img:not([src]), .advisor__photo img:not([src]) { content: ""; } /* Mobile CTA hide when quote in view */ .mobile-cta.is-hidden { transform: translateY(110%); pointer-events: none; opacity: 0; } .mobile-cta { transition: transform 220ms var(--ease), opacity 220ms var(--ease); } /* QA states page */ .states-stack { display: grid; gap: 2.5rem; } .states-block h2 { margin-bottom: 1rem; } .states-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.85rem; align-items: center; } .page-ui-states .btn.is-loading { min-width: 140px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: rgba(11, 37, 69, 0.06); padding: 0.1em 0.35em; border-radius: 6px; } @media (max-width: 980px) { .page-hero__grid, .split-2, .feature-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .skeleton, .btn-spinner, .mobile-cta { animation: none !important; transition: none !important; } } /* ========================================================================== Funnel upgrade: next steps, mid CTA, proof, help lists, hesitation ========================================================================== */ .next-steps { padding: 2.25rem 0; background: var(--white); border-bottom: 1px solid rgba(11, 37, 69, 0.06); } .section-head--compact { margin-bottom: 1.35rem; } .section-head--compact h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-bottom: 0; } .next-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .next-steps__list li { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--surface); border: 1px solid rgba(11, 37, 69, 0.06); } .next-steps__num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 800; font-size: 0.9rem; color: var(--white); background: var(--navy-900); } .next-steps__list strong { display: block; color: var(--navy-900); margin-bottom: 0.2rem; } .next-steps__list span { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; } .mid-cta { padding: 2.5rem 0; background: linear-gradient(135deg, rgba(11, 37, 69, 0.96), rgba(22, 58, 95, 0.94)); color: rgba(242, 247, 251, 0.92); } .mid-cta__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: center; } .mid-cta h2, .mid-cta .h3-like { color: var(--white); margin: 0 0 0.55rem; } .mid-cta p { margin: 0 0 0.65rem; max-width: 48ch; } .mid-cta__reassure { font-size: 0.92rem; font-weight: 600; color: rgba(242, 247, 251, 0.82); } .mid-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .mid-cta .btn--secondary { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: var(--white); } .mid-cta .btn--secondary:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); } .help-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.85rem; } .help-list li { display: grid; gap: 0.2rem; padding: 1rem 1.15rem; border-radius: var(--radius-md); background: var(--white); border: 1px solid rgba(11, 37, 69, 0.07); box-shadow: var(--shadow-sm); } .help-list strong { color: var(--navy-900); font-size: 1.05rem; } .help-list span { color: var(--ink-soft); } .check-list--spaced { margin-bottom: 1.5rem; } .feel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .feel-list li { position: relative; padding-left: 1.35rem; color: var(--ink-soft); font-weight: 600; } .feel-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green-600); } .proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } .proof-card { background: var(--white); border: 1px solid rgba(11, 37, 69, 0.08); border-radius: var(--radius-md); padding: 1.35rem 1.4rem; box-shadow: var(--shadow-sm); } .proof-card h3 { margin-bottom: 0.85rem; } .proof-card--pending { background: linear-gradient(180deg, rgba(61, 139, 110, 0.06), transparent 40%), var(--white); border-style: dashed; } .proof-card--inline { margin-top: 1.75rem; } .hesitation-panel { margin: 1.25rem 0; padding: 1.1rem 1.2rem; border-radius: var(--radius-md); background: rgba(61, 139, 110, 0.08); border: 1px solid rgba(61, 139, 110, 0.18); } .hesitation-panel .h3-like, .hesitation-panel h3 { margin: 0 0 0.45rem; font-size: 1.1rem; } .hesitation-panel p { margin: 0; color: var(--ink-soft); } .hesitation-panel .check-list { margin: 0.35rem 0 0; } .panel-note { margin: 0.85rem 0 0; font-size: 0.9rem; color: var(--muted); text-align: center; } .thank-you-note { font-weight: 700; color: var(--navy-900); } @media (max-width: 980px) { .next-steps__list { grid-template-columns: 1fr; } .mid-cta__inner { grid-template-columns: 1fr; } .mid-cta__actions { justify-content: flex-start; } .proof-grid { grid-template-columns: 1fr; } } /* ========================================================================== Homepage funnel: Noelia lead capture + Treasure Coast system ========================================================================== */ .utility-bar__identity { display: grid; gap: 0.15rem; } .utility-bar__hours { margin: 0; font-size: 0.82rem; color: rgba(233, 226, 212, 0.78); } .hero--funnel { min-height: min(78vh, 700px); } .hero--funnel .hero__title { max-width: 16ch; } .wave-divider { display: block; width: min(100% - 2rem, var(--container)); margin: -0.35rem auto 0; height: 48px; pointer-events: none; } .wave-divider img { width: 100%; height: 100%; object-fit: cover; } .hero-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; color: rgba(242, 247, 251, 0.9); font-size: 0.95rem; } .hero-steps strong { color: var(--green-500); margin-right: 0.25rem; } .section--funnel { padding-top: 2.5rem; margin-top: -1.5rem; position: relative; z-index: 2; } .funnel-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 1.75rem; align-items: start; } .funnel-intro .section-lede { margin-bottom: 1rem; } .funnel-trust { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; color: var(--ink-soft); font-weight: 600; } .funnel-trust li::before { content: "•"; color: var(--green-600); margin-right: 0.45rem; } .quote__form-wrap--funnel { border: 1px solid rgba(15, 61, 76, 0.1); border-radius: var(--radius-sea); background: radial-gradient(500px 220px at 100% 0%, rgba(31, 122, 120, 0.08), transparent 55%), var(--shell); box-shadow: var(--shadow-sea); } .section--funnel { background: linear-gradient(180deg, rgba(233, 226, 212, 0.45), transparent 40%), var(--warm-white); } .section--funnel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(31, 122, 120, 0.35), transparent); } .quote-form--funnel { gap: 1.05rem; } .field-helper { margin: 0; font-size: 0.88rem; color: var(--green-700); font-weight: 600; line-height: 1.4; } .form-callout { margin: 0; text-align: center; font-weight: 700; color: var(--navy-900); } .form-callout a { color: var(--green-700); } .coverage__grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .advisor-contact { margin: 1rem 0 1.25rem; color: var(--ink-soft); line-height: 1.7; } .final-cta__contact { margin: 1rem 0 0; color: rgba(242, 247, 251, 0.88); font-size: 0.95rem; } .final-cta__contact a { color: #d7f0e4; } @media (max-width: 980px) { .funnel-layout { grid-template-columns: 1fr; } .coverage__grid--six { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .utility-bar__inner { align-items: stretch; } .hero--funnel { min-height: auto; padding-block: 3rem 2.25rem; } .hero-steps { flex-direction: column; gap: 0.35rem; } .section--funnel { margin-top: 0; padding-top: 1.5rem; } .coverage__grid--six { grid-template-columns: 1fr; } .quote-form--funnel .form-row--split { grid-template-columns: 1fr; } .brand-trust-bar__grid { grid-template-columns: 1fr; } } /* Branded trust bar — local roots + nationwide reach */ .brand-trust-bar { background: linear-gradient(180deg, rgba(233, 226, 212, 0.65), rgba(255, 252, 248, 0.95)); border-block: 1px solid rgba(15, 61, 76, 0.08); padding: 1.35rem 0; } .brand-trust-bar__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.25rem; align-items: center; } .brand-trust-bar__identity { display: flex; gap: 0.85rem; align-items: flex-start; } .brand-trust-bar__identity img { width: 40px; height: 40px; flex: 0 0 auto; margin-top: 0.15rem; } .brand-trust-bar__identity strong { display: block; color: var(--coastal-blue); font-size: 1.05rem; } .brand-trust-bar__identity p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 36ch; } .brand-trust-bar__contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; color: var(--ink-soft); } .brand-trust-bar__contacts a { color: var(--coastal-blue-mid); font-weight: 700; text-decoration: none; } .brand-trust-bar__contacts a:hover { color: var(--ocean-teal-deep); } .brand-trust-bar__meta { display: grid; gap: 0.35rem; justify-items: start; } .brand-trust-bar__badge { display: inline-flex; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(31, 122, 120, 0.12); color: var(--ocean-teal-deep); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .brand-trust-bar__meta span { color: var(--muted); font-size: 0.9rem; } /* Homepage promo panel (ad system on-site) */ .promo-panel { padding: clamp(2rem, 5vw, 3rem) 0; } .promo-panel__card { display: grid; gap: 1rem; padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--radius-sea); background: var(--shell); border: 1px solid rgba(15, 61, 76, 0.08); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .promo-panel__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--ocean-teal), var(--palm)); } .promo-panel__card h2 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 1.9rem); } .promo-panel__card p { margin: 0; color: var(--ink-soft); max-width: 52ch; } .promo-panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .promo-panel__trust { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 0.9rem; font-weight: 600; } .coverage-card { border-radius: var(--radius-sea); } .final-cta { background: linear-gradient(155deg, var(--coastal-blue), #123f4f 55%, var(--coastal-blue-mid)); } .final-cta__contact a { color: #e8d5c4; } .site-footer { background: var(--navy-950); } /* ========================================================================== Funnel v2 additions — hero, chips, Noelia panel, vCard block, pull-quote Added 2026-07-17. Does not modify or override any existing class. ========================================================================== */ /* --- Oversized-type hero ---------------------------------------------------*/ .hero--oversize { background: radial-gradient(1200px 700px at 85% -10%, rgba(127,184,92,.18), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(31,122,120,.14), transparent 60%), linear-gradient(180deg, var(--shell) 0%, var(--warm-white) 100%); padding: clamp(56px, 8vw, 108px) 0 clamp(48px, 6vw, 88px); position: relative; overflow: hidden; } .hero--oversize .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-oversize__eyebrow { color: var(--ocean-teal-deep); font-family: var(--font-body); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } .hero-oversize__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6.5vw, 4.8rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--coastal-blue); margin: 0 0 8px; } .hero-oversize__title .accent { color: var(--leaf-deep); } .hero-oversize__title .accent-teal { color: var(--ocean-teal-deep); } .hero-oversize__lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 46ch; margin: 18px 0 28px; line-height: 1.55; } .hero-oversize__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .hero-oversize__reassure { color: var(--muted); font-size: .95rem; margin: 0 0 20px; } /* --- Hero photo card (Noelia) ---------------------------------------------*/ .hero-photo-card { position: relative; border-radius: var(--radius-sea); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; background: var(--sand); isolation: isolate; } .hero-photo-card::before { /* soft leafy arc BEHIND the card, echoes postcard shape */ content: ""; position: absolute; z-index: -1; inset: -8% -8% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle at 35% 65%, var(--leaf-light) 0%, transparent 65%); border-radius: 50%; pointer-events: none; } .hero-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-sea); position: relative; z-index: 1; } .hero-photo-badge { position: absolute; left: 16px; bottom: 16px; right: 16px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(15, 61, 76, 0.86); backdrop-filter: blur(6px); color: var(--warm-white); } .hero-photo-badge__mark { width: 34px; height: 34px; background: var(--warm-white); border-radius: 10px; padding: 4px; display: grid; place-items: center; } .hero-photo-badge__mark img { width: 100%; height: 100%; object-fit: contain; } .hero-photo-badge__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.1; } .hero-photo-badge__meta { font-size: .78rem; opacity: .85; letter-spacing: .04em; } /* --- Trust chip strip ------------------------------------------------------*/ .trust-chips { background: var(--warm-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; } .trust-chips__row { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; align-items: center; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .92rem; font-weight: 600; font-family: var(--font-body); color: var(--coastal-blue); background: var(--chip-teal-bg); border: 1px solid var(--chip-teal-ring); line-height: 1; white-space: nowrap; } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-teal-ring); display: inline-block; } .chip--leaf { background: var(--chip-leaf-bg); border-color: var(--chip-leaf-ring); color: var(--palm-deep); } .chip--leaf::before { background: var(--chip-leaf-ring); } .chip--coral { background: var(--chip-coral-bg); border-color: var(--chip-coral-ring); color: var(--sunrise-deep); } .chip--coral::before { background: var(--chip-coral-ring); } .chip--sand { background: var(--chip-sand-bg); border-color: var(--chip-sand-ring); color: var(--ink-soft); } .chip--sand::before { background: var(--chip-sand-ring); } /* --- Noelia trust panel ----------------------------------------------------*/ .noelia-panel { background: linear-gradient(180deg, var(--sand) 0%, #efe6d2 100%); padding: clamp(48px, 6vw, 88px) 0; } .noelia-panel__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .noelia-panel__photo { border-radius: var(--radius-sea); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; background: var(--warm-white); margin: 0; } .noelia-panel__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .noelia-panel__eyebrow { color: var(--leaf-deep); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; margin: 0 0 12px; } .noelia-panel__signature { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--ocean-teal-deep); margin: 0 0 6px; line-height: 1.1; } .noelia-panel__title { color: var(--muted); font-weight: 600; letter-spacing: .04em; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--leaf); display: inline-block; } .noelia-panel__contact { display: grid; gap: 10px; margin: 20px 0 22px; font-size: 1.02rem; } .noelia-panel__contact a { color: var(--coastal-blue); font-weight: 600; } .noelia-panel__contact li { display: flex; align-items: center; gap: 12px; list-style: none; } .noelia-panel__contact .badge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); flex: none; } .noelia-panel__tagline { font-family: var(--font-display); font-style: italic; color: var(--ocean-teal-deep); font-size: 1.15rem; margin-top: 12px; } /* --- Footer vCard/QR block -------------------------------------------------*/ .vcard-block { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin-top: 18px; padding: 12px; border-radius: var(--radius-md); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); } .vcard-block__qr { background: var(--warm-white); padding: 8px; border-radius: 12px; display: grid; place-items: center; } .vcard-block__qr img { display: block; width: 100%; height: auto; } .vcard-block__eyebrow { font-family: var(--font-body); font-weight: 700; color: var(--leaf-light); letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; margin: 0 0 4px; } .vcard-block__lede { color: rgba(255,255,255,.85); font-size: .92rem; margin: 0 0 6px; } .vcard-block__meta { color: rgba(255,255,255,.7); font-size: .88rem; margin: 0; } .vcard-block__meta a { color: var(--sunrise-soft); } /* --- Pull quote (Life Insurance) -------------------------------------------*/ .pull-quote { background: var(--coastal-blue); color: var(--warm-white); padding: clamp(40px, 5vw, 72px) 0; } .pull-quote__inner { max-width: 780px; margin: 0 auto; padding: 0 24px; text-align: center; } .pull-quote__text { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.35; margin: 0 0 20px; } .pull-quote__attribution { font-family: var(--font-body); color: var(--sunrise-soft); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; font-weight: 600; } /* --- Responsive ------------------------------------------------------------*/ @media (max-width: 860px) { .hero--oversize .container { grid-template-columns: 1fr; } .hero--oversize .hero-photo-card { max-width: 420px; margin: 0 auto; } .noelia-panel__grid { grid-template-columns: 1fr; } .noelia-panel__photo { max-width: 420px; margin: 0 auto; } .vcard-block { grid-template-columns: 100px 1fr; } } @media (max-width: 480px) { .hero-photo-badge { grid-template-columns: auto 1fr; padding: 10px 12px; } .hero-photo-badge__name { font-size: .95rem; } .hero-photo-badge__meta { font-size: .72rem; } .chip { font-size: .84rem; padding: 7px 12px; } .vcard-block { grid-template-columns: 1fr; text-align: center; } .vcard-block__qr { max-width: 160px; margin: 0 auto; } } /* ========================================================================== Funnel v2 — mobile header + hero polish (added 2026-07-17) ========================================================================== */ /* At <=760px, hide the desktop primary quote CTA (mobile sticky bar handles it) and let the wordmark shrink cleanly. */ @media (max-width: 760px) { .site-header .header-actions .btn--primary { display: none; } .site-header__inner { gap: 12px; } .brand__text { max-width: 60vw; overflow: hidden; } .brand__name { font-size: 0.95rem; line-height: 1.05; } .brand__llc { font-size: 0.7rem; } } /* At <=420px, drop wordmark text entirely; keep only the mark. */ @media (max-width: 420px) { .brand__text { display: none; } } /* Hero: tighter vertical padding on mobile so photo is visible above the fold. */ @media (max-width: 860px) { .hero--oversize { padding: 40px 0 32px; } .hero--oversize .container { gap: 24px; } .hero-oversize__title { font-size: clamp(2.2rem, 9vw, 3.4rem); } .hero-oversize__lede { font-size: 1rem; margin: 12px 0 20px; } .hero-photo-card { max-width: 380px; margin: 0 auto; } } /* ========================================================================== Funnel v2 — hardened overrides (added 2026-07-17, fixes staging CDN drift) These rules use hex fallbacks so they render correctly even if custom properties are shadowed or an older cached tokens.css is served. ========================================================================== */ /* Hero grid + colors — force explicit values, do not rely on --var only */ .hero--oversize { background: radial-gradient(1200px 700px at 85% -10%, rgba(127,184,92,.18), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(31,122,120,.14), transparent 60%), linear-gradient(180deg, #fffcf8 0%, #fbf8f3 100%) !important; padding: clamp(56px, 8vw, 108px) 0 clamp(48px, 6vw, 88px) !important; overflow: hidden; position: relative; } .hero--oversize .container { display: grid !important; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-oversize__content { min-width: 0; } /* prevent grid overflow */ .hero-oversize__eyebrow { color: #165e5c !important; font-family: "Source Sans 3", "Segoe UI", sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; } .hero-oversize__title { color: #0f3d4c !important; font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: clamp(2.6rem, 6.5vw, 4.8rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 8px; } .hero-oversize__title .accent { color: #5a9440 !important; } .hero-oversize__title .accent-teal { color: #165e5c !important; } .hero-oversize__lede { color: #3d525c !important; font-family: "Source Sans 3", "Segoe UI", sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 46ch; margin: 18px 0 28px; line-height: 1.55; } .hero-oversize__reassure { color: #5e727c !important; font-size: .95rem; margin: 0 0 20px; } /* Hero primary CTA — coral, not navy */ .hero-oversize__ctas .btn--sunrise, .btn--sunrise { background: linear-gradient(135deg, #e08a5f 0%, #c47554 100%) !important; background-color: #e08a5f !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 8px 20px rgba(196, 117, 84, .28); } .hero-oversize__ctas .btn--sunrise:hover, .btn--sunrise:hover { background: linear-gradient(135deg, #c47554 0%, #a95f43 100%) !important; transform: translateY(-1px); } /* Hero photo card — clip the leaf blob behind image, never over her face */ .hero-photo-card { position: relative; border-radius: 28px; box-shadow: 0 22px 50px rgba(15, 61, 76, 0.16); aspect-ratio: 4 / 5; background: #e9e2d4; isolation: isolate; overflow: visible; max-width: 520px; margin-left: auto; } .hero-photo-card::before { content: ""; position: absolute; z-index: -1; inset: -8% -8% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle at 35% 65%, #a7d380 0%, transparent 65%); border-radius: 50%; pointer-events: none; } .hero-photo-card > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 28px; position: relative; z-index: 1; } .hero-photo-badge { position: absolute !important; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(15, 61, 76, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #ffffff; margin: 0; } /* Trust chips — force flex + explicit colors */ .trust-chips { background: #ffffff !important; border-top: 1px solid #e6ded1; border-bottom: 1px solid #e6ded1; padding: 20px 0 !important; } .trust-chips__row { display: flex !important; flex-wrap: wrap; gap: 10px 12px; justify-content: center; align-items: center; } .chip { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 14px !important; border-radius: 999px !important; font-family: "Source Sans 3", "Segoe UI", sans-serif; font-size: .9rem; font-weight: 600; color: #0f3d4c !important; background: #d6ede9 !important; border: 1px solid #1f7a78 !important; line-height: 1; white-space: nowrap; } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f7a78; display: inline-block; flex: none; } .chip--leaf { background: #e8f3dc !important; border-color: #5a9440 !important; color: #3d6650 !important; } .chip--leaf::before { background: #5a9440; } .chip--coral { background: #fce3d5 !important; border-color: #c47554 !important; color: #a05f43 !important; } .chip--coral::before { background: #c47554; } .chip--sand { background: #f5eedd !important; border-color: #b09b73 !important; color: #6b5a3d !important; } .chip--sand::before { background: #b09b73; } /* Mobile: hero stacks + tightens */ @media (max-width: 860px) { .hero--oversize .container { grid-template-columns: 1fr !important; } .hero--oversize { padding: 40px 0 32px !important; } .hero-oversize__title { font-size: clamp(2.2rem, 9vw, 3.4rem) !important; } .hero-oversize__lede { font-size: 1rem !important; margin: 12px 0 20px !important; } .hero-photo-card { max-width: 380px !important; margin: 0 auto !important; } } /* Header mobile — hide desktop CTA + long wordmark cleanly */ @media (max-width: 760px) { .site-header .header-actions .btn--primary { display: none !important; } .brand__text { max-width: 55vw; overflow: hidden; } .brand__name { font-size: .95rem !important; line-height: 1.05; } .brand__llc { font-size: .7rem !important; } } @media (max-width: 420px) { .brand__text { display: none !important; } } /* Chip smaller on tiny screens */ @media (max-width: 480px) { .trust-chips { padding: 14px 0 !important; } .chip { font-size: .82rem; padding: 6px 12px !important; } .hero-photo-badge__name { font-size: .95rem; } .hero-photo-badge__meta { font-size: .72rem; } } /* Noelia panel — belt-and-suspenders explicit colors */ .noelia-panel { background: linear-gradient(180deg, #e9e2d4 0%, #efe6d2 100%) !important; padding: clamp(48px, 6vw, 88px) 0 !important; } .noelia-panel__grid { display: grid !important; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .noelia-panel__eyebrow { color: #5a9440 !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; margin: 0 0 12px; } .noelia-panel__signature { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); color: #165e5c !important; margin: 0 0 6px; line-height: 1.1; } .noelia-panel__title { color: #5e727c !important; font-weight: 600; letter-spacing: .04em; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid #7fb85c; display: inline-block; } .noelia-panel__contact { list-style: none; padding: 0; } .noelia-panel__contact li { display: flex !important; align-items: center; gap: 12px; } .noelia-panel__contact a { color: #0f3d4c !important; font-weight: 600; } .noelia-panel__contact .badge-dot { width: 10px; height: 10px; border-radius: 50%; background: #7fb85c; flex: none; display: inline-block; } .noelia-panel__tagline { font-family: "Fraunces", Georgia, serif; font-style: italic; color: #165e5c !important; font-size: 1.15rem; margin-top: 12px; } @media (max-width: 860px) { .noelia-panel__grid { grid-template-columns: 1fr !important; } .noelia-panel__photo { max-width: 420px; margin: 0 auto; } } /* Footer vCard block — legibility on dark footer */ .vcard-block__eyebrow { color: #a7d380 !important; } .vcard-block__lede { color: rgba(255,255,255,.9) !important; } .vcard-block__meta { color: rgba(255,255,255,.75) !important; } .vcard-block__meta a { color: #f4c9b3 !important; } /* Pull quote — Life Insurance */ .pull-quote { background: #0f3d4c !important; color: #fbf8f3 !important; padding: clamp(40px, 5vw, 72px) 0 !important; } .pull-quote__text { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.35; color: #fbf8f3 !important; margin: 0 0 20px; } .pull-quote__attribution { color: #f4c9b3 !important; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; font-weight: 600; } /* ========================================================================== Form additions — state, tobacco, height, weight (added 2026-07-17) ========================================================================== */ .form-row--triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .form-row--triple { grid-template-columns: 1fr; gap: 12px; } } .form-row--about { border: 1px solid #e6ded1; border-radius: 14px; padding: 14px 16px 6px; margin: 4px 0 0; background: rgba(233, 226, 212, 0.28); } .form-legend { padding: 0 6px; font-family: "Source Sans 3", "Segoe UI", sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #165e5c; } .form-legend .optional { text-transform: none; letter-spacing: 0; font-weight: 500; color: #5e727c; font-size: .78rem; } .input-inline-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .input-inline-group input { width: 100%; min-width: 0; } .form-row--about .input-inline-group input, .form-row .input-inline-group input { padding: 10px 12px; }