/* Visible Agent niche-site theme. Niche palettes swap via the .niche-* class on ; everything else is shared. Baseline is senior-accessible (large type, high contrast, big tap targets) per the final-expense buyer research, styled after high-trust burial-insurance lead sites (clean hero + quote card). */ :root { --ink: #16202e; --ink-soft: #4b5768; --line: #e2e7ee; --line-soft: #eef2f7; --bg: #ffffff; --bg-soft: #f5f8fc; --bg-warm: #f7f4ec; --brand: #124a86; /* trust navy-blue */ --brand-dark: #0d3560; --brand-darker: #0a2647; --accent: #c99a2e; /* dignified gold */ --accent-dark: #b1861f; --accent-ink: #4a3a0c; --good: #1f7a4d; --radius: 14px; --radius-lg: 20px; --wrap: 1140px; --fs-base: 19px; /* senior-accessible base */ --shadow-sm: 0 1px 2px rgba(16,32,46,.06), 0 2px 6px rgba(16,32,46,.05); --shadow-md: 0 10px 30px rgba(13,53,96,.14); --shadow-lg: 0 24px 60px rgba(10,38,71,.28); } /* Final Expense: warm, dignified, senior-first. */ .niche-final-expense { --brand: #14507e; --brand-dark: #0e3a5c; --brand-darker: #0a2a45; --accent: #c99a2e; --bg-soft: #f6f8fb; --bg-warm: #f7f3ea; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } } body { margin: 0; font: var(--fs-base)/1.65 Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } a { color: var(--brand); } h1, h2, h3 { font-family: Sora, Inter, system-ui, sans-serif; line-height: 1.14; color: var(--ink); letter-spacing: -0.02em; } h1 { font-size: 2.15rem; margin: .1em 0 .35em; font-weight: 800; } h2 { font-size: 1.7rem; margin: 2rem 0 .7rem; font-weight: 700; } h3 { font-size: 1.24rem; margin: 1.4rem 0 .5rem; font-weight: 700; } p { margin: 0 0 1rem; } .skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; background: #fff; padding: 10px 16px; z-index: 60; border: 2px solid var(--brand); border-radius: 8px; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---- top bar + header ------------------------------------------------------ */ .topbar { background: var(--brand-darker); color: #d7e6f5; font-size: .86rem; } .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 6px 22px; } .tb-note { color: #bcd2ea; } .tb-tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; } .tb-tel .ci { display: inline-flex; } .tb-tel .ci svg { width: 16px; height: 16px; color: var(--accent); } .tb-tel strong { font-size: .96rem; } header.site { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.3) blur(10px); z-index: 40; } .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; } .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--brand-dark); letter-spacing: -0.02em; } .brand-mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(150deg, var(--brand), var(--brand-darker)); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(13,53,96,.28); } .brand-mark svg { width: 22px; height: 22px; color: var(--accent); } .brand-name { line-height: 1.1; } .bar-actions { display: flex; align-items: center; gap: 18px; } .tel { display: flex; flex-direction: column; text-align: right; text-decoration: none; color: var(--ink); line-height: 1.15; } .tel span { font-size: .78rem; color: var(--ink-soft); } .tel strong { font-size: 1.24rem; color: var(--brand-dark); } /* ---- buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 750; font-size: 1.06rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; } .btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(201,154,46,.32); } .btn.primary:hover { background: var(--accent-dark); transform: translateY(-1px); } .btn.primary:active { transform: translateY(0); } .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btn.ghost:hover { background: rgba(255,255,255,.12); } .btn.light { background: #fff; color: var(--brand-dark); box-shadow: 0 8px 20px rgba(4,16,33,.22); } .btn.light:hover { transform: translateY(-1px); background: #f4f8fd; } .btn-block { width: 100%; } .btn-sm { min-height: 46px; padding: 0 20px; font-size: .98rem; } .btn .ci { display: inline-flex; margin-right: 9px; } .btn .ci svg { width: 17px; height: 17px; } .bar-note { font-size: .9rem; font-weight: 600; color: var(--ink-soft); } /* ---- hero ------------------------------------------------------------------ */ .hero { position: relative; color: #fff; padding: 54px 0 60px; background-color: var(--brand-darker); background-image: linear-gradient(90deg, rgba(9,32,60,.88) 0%, rgba(9,32,60,.72) 30%, rgba(12,48,86,.44) 52%, rgba(12,48,86,.34) 74%, rgba(12,48,86,.30) 100%), var(--hero-img, none); background-size: cover, cover; background-position: center, center 28%; background-repeat: no-repeat, no-repeat; } /* On small screens the photo sits behind a near-solid overlay so copy stays readable */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; } .hero-copy .eyebrow { display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); padding: .4rem .8rem; border-radius: 999px; margin: 0 0 1rem; } .hero h1 { color: #fff; max-width: 18ch; font-size: 2.3rem; text-shadow: 0 2px 18px rgba(4,16,33,.45); } .hero .sub { font-size: 1.16rem; max-width: 46ch; color: #dbe6f2; margin-top: .6rem; } .hero-trust { list-style: none; padding: 0; margin: 22px 0 24px; display: grid; gap: 12px; } .hero-trust li { display: flex; align-items: center; gap: 12px; font-size: 1.06rem; font-weight: 600; color: #eaf1f8; } .hero-trust .ck { color: var(--accent); flex: 0 0 auto; } .hero-trust.dark li { color: var(--ink); } .hero-trust.dark .ck { color: var(--good); } .hero-call { display: inline-flex; } /* The sticky header is 74px, so an un-offset #quote jump lands under it */ .hero-aside, section.quote { scroll-margin-top: 88px; } /* quote card (hero + closing band) */ .quote-card { background: #fff; color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px 22px 22px; border: 1px solid rgba(255,255,255,.5); } .hero .quote-card { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid rgba(255,255,255,.55); } .qc-head { margin-bottom: 14px; } .qc-title { font-size: 1.42rem; font-weight: 800; color: var(--brand-dark); margin: 0; line-height: 1.15; } .qc-sub { font-size: .96rem; color: var(--ink-soft); margin: .25rem 0 0; } .qc-example { font-size: .86rem; color: var(--brand-dark); background: #eaf2fb; border: 1px solid rgba(18,80,126,.16); border-radius: 8px; padding: 7px 10px; margin: 10px 0 0; line-height: 1.35; } .qc-example strong { font-weight: 800; } .qc-field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; } .qc-field legend, .qc-field .lbl { display: block; font-size: .92rem; font-weight: 700; color: var(--ink); margin: 0 0 7px; padding: 0; } .qc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* segmented sex / tobacco toggle */ .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--ink); font-weight: 700; font-size: 1.02rem; cursor: pointer; transition: border-color .12s, background-color .12s, box-shadow .12s; } .seg label:hover { border-color: #c3ccd8; } .seg input:checked + label { border-color: var(--brand); background: #eaf2fb; color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); } .seg input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; } /* DOB selects + text inputs */ .dob { display: grid; grid-template-columns: 1.2fr .9fr 1fr; gap: 10px; } .quote-card select, .quote-card input[type="text"], .quote-card input[type="tel"], .quote-card input[type="email"] { width: 100%; min-height: 54px; padding: 0 14px; font-size: 1.05rem; color: var(--ink); border: 2px solid var(--line); border-radius: 12px; background: #fff; appearance: none; -webkit-appearance: none; } .quote-card select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234b5768' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .quote-card input:focus, .quote-card select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(18,80,126,.16); } .quote-card input::placeholder { color: #9aa5b3; } .quote-card .btn.primary { margin-top: 4px; } .qc-trust { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.4; } .qc-trust svg { color: var(--good); flex: 0 0 auto; margin-top: 1px; } /* ---- proof bar ------------------------------------------------------------- */ .proofbar { background: var(--bg-warm); border-bottom: 1px solid var(--line); } .proof-row { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; padding: 14px 22px; } .proof { display: inline-flex; align-items: center; gap: 9px; font-size: .96rem; font-weight: 650; color: var(--brand-dark); } .proof .ck { color: var(--good); } /* ---- main content: full-bleed alternating bands ---------------------------- */ main { display: block; } .lead-head { padding: 22px 0 4px; } .lead-head.has-h1 { padding: 30px 0 6px; } .crumbs { font-size: .9rem; color: var(--ink-soft); margin: 0; } .crumbs a { text-decoration: none; } .crumbs span { margin: 0 6px; } .page-h1 { text-align: center; max-width: 22ch; margin: .8rem auto .1rem; font-size: clamp(2rem, 4vw, 2.7rem); } .sec { padding: 4.4rem 0; } .sec--white { background: var(--bg); } .sec--paper { background: var(--bg-soft); } /* section header */ .sec-head { max-width: 46rem; margin: 0 auto 2.6rem; text-align: center; } .kicker { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: .5rem; } .sec-head h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); margin: 0 0 .55rem; } .sec-head p { color: var(--ink-soft); font-size: 1.08rem; margin: 0; } /* answer band */ .sec--answer { background: var(--bg-warm); padding: 3.2rem 0; } .answer { max-width: 54rem; margin: 0 auto; text-align: center; font-size: 1.22rem; font-weight: 500; line-height: 1.6; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 2.1rem; box-shadow: var(--shadow-md); } /* prose */ .prose-col { max-width: 44rem; margin: 0 auto; } .prose-col p { font-size: 1.08rem; color: var(--ink); margin: 0 0 1.05rem; } .prose-col p:last-child { margin-bottom: 0; } /* tables */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: #fff; } .table-wrap.narrow { max-width: 56rem; margin: 0 auto; } table { border-collapse: collapse; width: 100%; margin: 0; font-size: 1rem; } th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); } thead th { background: var(--brand-dark); color: #fff; font-size: .96rem; letter-spacing: .01em; } td.rowh { font-weight: 750; color: var(--brand-dark); } tbody tr:nth-child(even) { background: var(--bg-soft); } tbody tr:last-child td { border-bottom: 0; } .rate-note { max-width: 56rem; margin: 0 auto .9rem; text-align: center; font-size: .88rem; color: var(--ink-soft); } .table-wrap + .rate-note { margin-top: .9rem; margin-bottom: 0; } /* flow (steps) cards */ .flow-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; max-width: 62rem; margin: 0 auto; } .flow-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.6rem; box-shadow: var(--shadow-sm); } .flow-card .n { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(150deg, var(--brand), var(--brand-darker)); color: #fff; font-family: Sora, sans-serif; font-weight: 800; font-size: 1.2rem; display: grid; place-items: center; margin-bottom: 1.05rem; } .flow-card p { margin: 0; color: var(--ink); font-size: 1.02rem; } .flow-card .arrow { position: absolute; top: 2.6rem; right: -1.05rem; width: 2.1rem; height: 2.1rem; background: #fff; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; z-index: 2; } .flow-card .arrow svg { width: 15px; height: 15px; color: var(--brand); } /* callout / mini-CTA band */ .sec--cta-mini { background: linear-gradient(150deg, var(--brand-dark), var(--brand-darker)); } .cta-mini { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; } .cta-mini-txt { max-width: 42rem; } .cta-mini strong { display: block; font-family: Sora, sans-serif; font-size: 1.35rem; color: #fff; margin-bottom: .3rem; } .cta-mini p { margin: 0; color: #d7e3ef; font-size: 1.04rem; } .cta-mini-btn { flex: 0 0 auto; } .cta-mini-btn .ci { display: inline-flex; margin-right: 8px; } .cta-mini-btn .ci svg { width: 18px; height: 18px; color: var(--brand); } /* related links */ .linklist { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 auto; max-width: 60rem; } .linklist a { display: flex; align-items: center; gap: 10px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-weight: 700; color: var(--brand-dark); box-shadow: var(--shadow-sm); transition: border-color .12s, transform .12s, box-shadow .15s; } .linklist a::after { content: "\2192"; margin-left: auto; color: var(--accent); font-weight: 800; } .linklist a:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* faq */ .faq-wrap { max-width: 48rem; margin: 0 auto; } .faq-wrap details { border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 20px; margin: 0 0 .8rem; background: #fff; box-shadow: var(--shadow-sm); } .faq-wrap details[open] { box-shadow: var(--shadow-md); } .faq-wrap summary { cursor: pointer; font-weight: 750; padding: 17px 0; font-size: 1.08rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--brand-dark); } .faq-wrap summary::-webkit-details-marker { display: none; } .faq-wrap summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--accent); line-height: 1; } .faq-wrap details[open] summary::after { content: "\2013"; } .faq-wrap .fa { padding: 0 0 16px; color: var(--ink-soft); } .muted { color: var(--ink-soft); } .small { font-size: .85rem; } /* ---- closing quote band ---------------------------------------------------- */ .quote { background: radial-gradient(700px 380px at 12% 8%, rgba(201,154,46,.16), transparent 60%), linear-gradient(155deg, var(--brand-dark), var(--brand-darker)); color: #fff; padding: 4.6rem 0; margin-top: 0; } .quote-copy .kicker { color: var(--accent); } .quote-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; } .quote-copy h2 { color: #fff; margin-top: 0; } .quote-copy p { color: #d7e3ef; max-width: 42ch; } .quote-copy .hero-trust { background: rgba(255,255,255,.96); border-radius: var(--radius); padding: 16px 18px; } .tel.big { display: inline-block; margin-top: 18px; font-size: 1.14rem; font-weight: 750; color: #fff; } .tel.big:hover { color: var(--accent); } /* ---- footer ---------------------------------------------------------------- */ footer.site { background: var(--ink); color: #c3ccda; padding: 40px 0; } footer.site a { color: #a9cbea; } .foot-name { font-weight: 800; color: #fff; font-size: 1.15rem; margin: 0 0 .5rem; } .disclaimer { max-width: 80ch; } /* ---- responsive ------------------------------------------------------------ */ @media (max-width: 719px) { .hide-sm { display: none; } .tel span { display: none; } /* Phone appears in the hero and the closing band on mobile, so the top strip is a third redundant number above the fold. Kept on desktop, dropped here. */ .topbar { display: none; } .tb-note { display: none; } .topbar-in { justify-content: center; } /* Keep the nav CTA on one line; the brand may wrap instead */ .nav-quote { white-space: nowrap; padding: 0 16px; } .bar { gap: 10px; } .sec { padding: 3.2rem 0; } .cta-mini { justify-content: center; text-align: center; } .cta-mini-txt { max-width: 100%; } .flow-card .arrow { display: none; } .hero { background-image: linear-gradient(180deg, rgba(10,38,71,.90) 0%, rgba(10,38,71,.82) 55%, rgba(13,53,96,.86) 100%), var(--hero-img, none); background-position: center, center top; } } @media (min-width: 720px) { h1 { font-size: 2.5rem; } .linklist { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .hero { padding: 66px 0 70px; background-image: linear-gradient(90deg, rgba(9,32,60,.52) 0%, rgba(9,32,60,.40) 26%, rgba(12,48,86,.48) 38%, rgba(10,38,71,.90) 46%, rgb(10,42,69) 53%, rgb(10,42,69) 100%), var(--hero-img, none); background-size: cover, auto 120%; background-position: center, left 24%; } .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; } .hero h1 { font-size: 3rem; } .quote-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; } .quote-copy .hero-trust { max-width: 440px; } }