/* ========================================================================= Peach State Life Insurance — design system ("warm Georgia morning") Evergreen + honey on ivory · Fraunces / Mulish · faith-warm, high-trust. Fonts linked in . Mobile-first. WCAG-AA, large type for 45–75 audience. ========================================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ---- palette ---- */ --ivory: #FAF4E9; /* page background, warm cream */ --ivory-2: #FFFDF7; /* raised cards / inputs */ --ivory-3: #F2E9D6; /* soft sunken panels */ --ink: #2A2420; /* primary text, warm near-black */ --ink-soft: #5C5247; /* secondary text */ --pine: #1E4B3A; /* primary brand — deep evergreen */ --pine-deep: #15382B; --pine-soft: #2F6149; --sage: #E4EADF; /* soft green tint panels */ --sage-line: #C7D4C2; --honey: #D08A2C; /* CTA accent — warm honey/amber */ --honey-deep: #B5731C; --honey-soft: #F4E4C8; --clay: #B85C3C; /* warm terracotta — small accents/underlines */ --line: rgba(42,36,32,0.14); --line-soft: rgba(42,36,32,0.08); --shadow-sm: 0 2px 10px rgba(30,40,30,0.06); --shadow-md: 0 10px 30px rgba(30,45,35,0.10); --shadow-lg: 0 24px 60px rgba(20,40,30,0.16); /* ---- type ---- */ --display: "Fraunces", "Georgia", serif; --body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif; --container: 1140px; --radius: 16px; --radius-sm: 10px; --radius-lg: 28px; } /* scroll-padding-top clears the 74px sticky header so #quote anchor jumps land the "Get your free quote" heading fully in view (not behind the header). */ html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } body { font-family: var(--body); font-size: 18px; line-height: 1.65; color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* subtle warm paper grain */ background-image: radial-gradient(1200px 700px at 88% -8%, rgba(208,138,44,0.10), transparent 60%), radial-gradient(900px 600px at -10% 10%, rgba(30,75,58,0.06), transparent 55%); background-attachment: fixed; } /* faint grain overlay for warmth/depth */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; display: block; } a { color: var(--pine-soft); text-underline-offset: 3px; } /* ---- type scale ---- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.12; color: var(--pine-deep); letter-spacing: -0.01em; } h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); } h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); } h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); } p { max-width: 68ch; } .lead { font-size: clamp(1.1rem, 2.4vw, 1.35rem); color: var(--ink-soft); line-height: 1.55; } strong { font-weight: 800; color: var(--ink); } em.mark { font-style: normal; color: var(--clay); position: relative; white-space: nowrap; } em.mark::after { content:""; position:absolute; left:-2px; right:-2px; bottom:2px; height:.42em; background:rgba(208,138,44,.28); z-index:-1; border-radius:3px; } /* ---- layout ---- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; } .section { padding: clamp(56px, 9vw, 104px) 0; position: relative; } .section--pine { background: var(--pine); color: #F6EFDF; } .section--pine h2, .section--pine h3 { color: #FBEAC8; } .section--sage { background: var(--sage); } .section--tight { padding: clamp(40px,6vw,68px) 0; } .eyebrow { font-family: var(--body); font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--honey-deep); display:inline-flex; align-items:center; gap:.55em; } .eyebrow::before { content:""; width:26px; height:2px; background:var(--honey); border-radius:2px; } .section--pine .eyebrow { color: var(--honey); } .center { text-align: center; } .center p { margin-inline: auto; } /* ---- buttons ---- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--body); font-weight:800; font-size:1.05rem; line-height:1; padding:18px 30px; min-height:56px; border-radius:999px; border:2px solid transparent; text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; -webkit-tap-highlight-color:transparent; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background:var(--honey); color:#3a2503; border-color:var(--honey); box-shadow:0 8px 22px rgba(176,115,28,.30); } .btn--primary:hover { background:var(--honey-deep); box-shadow:0 12px 28px rgba(176,115,28,.40); transform:translateY(-2px); } .btn--ghost { background:transparent; color:var(--pine); border-color:var(--pine); } .btn--ghost:hover { background:var(--pine); color:#fff; } .btn--call { background:var(--pine); color:#fff; border-color:var(--pine); } .btn--call:hover { background:var(--pine-deep); transform:translateY(-2px); } .section--pine .btn--ghost { color:#FBEAC8; border-color:rgba(251,234,200,.6);} .section--pine .btn--ghost:hover { background:#FBEAC8; color:var(--pine-deep); } .btn--lg { font-size:1.15rem; padding:20px 36px; min-height:62px; } .btn--block { width:100%; } /* ---- header ---- */ .site-header { position:sticky; top:0; z-index:100; background:rgba(250,244,233,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); transition:box-shadow .3s; } .site-header.scrolled { box-shadow: var(--shadow-sm); } .header-inner { display:flex; align-items:center; justify-content:space-between; height:74px; } .brand { display:flex; align-items:center; gap:11px; text-decoration:none; } .brand svg { height:40px; width:auto; display:block; } .brand-name { font-family:var(--display); font-weight:600; font-size:1.18rem; color:var(--pine-deep); line-height:1; letter-spacing:-.01em; } .brand-name small { display:block; font-family:var(--body); font-weight:700; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--honey-deep); margin-top:3px; } .nav { display:flex; align-items:center; gap:26px; } .nav a { font-weight:700; font-size:.96rem; color:var(--ink); text-decoration:none; opacity:.84; transition:opacity .15s,color .15s; } .nav a:hover, .nav a.active { opacity:1; color:var(--pine); } .nav .btn { padding:12px 20px; min-height:46px; font-size:.95rem; } .header-phone { display:inline-flex; align-items:center; gap:7px; font-weight:800; color:var(--pine); text-decoration:none; white-space:nowrap; } .header-phone svg { width:17px; height:17px; } .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; } .hamburger span { width:26px; height:2.5px; background:var(--pine); border-radius:3px; transition:.3s; } .hamburger.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg);} .hamburger.active span:nth-child(2){ opacity:0;} .hamburger.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg);} /* ---- hero ---- */ .hero { position:relative; overflow:hidden; padding:clamp(40px,7vw,76px) 0 clamp(48px,8vw,92px); } .hero::before { /* sunrise glow */ content:""; position:absolute; top:-30%; right:-12%; width:70vw; height:70vw; max-width:760px; max-height:760px; background:radial-gradient(circle at 60% 40%, rgba(208,138,44,.22), rgba(208,138,44,0) 62%); z-index:0; pointer-events:none; } .hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; } .hero h1 { margin-bottom:18px; } .hero .lead { margin-bottom:26px; max-width:34ch; } .hero-cred { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:24px; font-weight:700; font-size:.95rem; color:var(--ink-soft); } .hero-cred span { display:inline-flex; align-items:center; gap:7px; } .hero-cred svg { width:18px; height:18px; color:var(--pine-soft); flex:none; } .rating { display:inline-flex; align-items:center; gap:9px; font-weight:800; color:var(--ink); } .stars { color:var(--honey); letter-spacing:2px; font-size:1.15rem; } /* ---- arch image / form frame ---- */ .arch { border-radius:1000px 1000px var(--radius) var(--radius); overflow:hidden; } /* ---- lead form card ---- */ .quote-card { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-lg); position:relative; } .quote-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg, rgba(208,138,44,.5), rgba(30,75,58,.18) 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .quote-card h3 { font-size:1.45rem; margin-bottom:4px; } .quote-card .sub { color:var(--ink-soft); font-size:.98rem; margin-bottom:18px; } .field { margin-bottom:14px; } .field label { display:block; font-weight:700; font-size:.92rem; margin-bottom:6px; color:var(--ink); } .field input, .field select { width:100%; font-family:var(--body); font-size:1.05rem; padding:15px 16px; min-height:54px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink); transition:border .15s, box-shadow .15s; } .field input:focus, .field select:focus { outline:none; border-color:var(--honey); box-shadow:0 0 0 4px rgba(208,138,44,.18); } .consent { display:flex; gap:10px; align-items:flex-start; margin:6px 0 16px; } .consent input { margin-top:4px; width:20px; height:20px; flex:none; accent-color:var(--pine); } .consent label { font-size:.78rem; line-height:1.45; color:var(--ink-soft); font-weight:500; } .consent a { color:var(--pine-soft); } .form-reassure { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; font-size:.85rem; color:var(--ink-soft); font-weight:600; } .form-reassure svg { width:15px; height:15px; color:var(--pine-soft); } /* ---- trust strip ---- */ .trust-strip { background:var(--pine-deep); color:#EBE2CF; } .trust-strip .container { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 38px; padding-block:18px; text-align:center; } .trust-strip span { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.95rem; } .trust-strip svg { width:19px; height:19px; color:var(--honey); flex:none; } /* ---- pills / risk reversal ---- */ .pills { display:flex; flex-wrap:wrap; gap:10px; } .pill { display:inline-flex; align-items:center; gap:8px; background:var(--ivory-2); border:1px solid var(--sage-line); color:var(--pine); font-weight:800; font-size:.94rem; padding:10px 16px; border-radius:999px; } .pill svg { width:16px; height:16px; color:var(--honey-deep); } /* ---- steps ---- */ .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:step; } .step { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm); } .step-num { counter-increment:step; width:48px; height:48px; border-radius:50%; background:var(--pine); color:#FBEAC8; font-family:var(--display); font-weight:700; font-size:1.35rem; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .step-num::before { content:counter(step); } .step h3 { font-size:1.25rem; margin-bottom:8px; } .step p { font-size:.98rem; color:var(--ink-soft); } /* ---- benefit / service cards ---- */ .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .cards--2 { grid-template-columns:repeat(2,1fr); } .card { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; } .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); } .card .ico { width:52px; height:52px; border-radius:14px; background:var(--sage); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .card .ico svg { width:26px; height:26px; color:var(--pine); } .card h3 { font-size:1.25rem; margin-bottom:8px; } .card p { font-size:.98rem; color:var(--ink-soft); } .card--link { text-decoration:none; color:inherit; display:block; } .card--link .more { color:var(--honey-deep); font-weight:800; font-size:.95rem; margin-top:12px; display:inline-flex; gap:6px; align-items:center; } /* ---- testimonials ---- */ .quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .tquote { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); position:relative; } .tquote .stars { display:block; margin-bottom:10px; } .tquote p { font-size:1.02rem; line-height:1.55; } .tquote .who { margin-top:14px; font-weight:800; color:var(--pine); font-size:.95rem; } .tquote .who span { display:block; font-weight:600; color:var(--ink-soft); font-size:.85rem; } /* ---- faith / pull quote ---- */ .pullquote { max-width:760px; margin:0 auto; text-align:center; } .pullquote blockquote { font-family:var(--display); font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.32; color:#FBEAC8; font-weight:500; } .pullquote cite { display:block; margin-top:18px; font-family:var(--body); font-style:normal; font-weight:800; letter-spacing:.04em; color:var(--honey); font-size:.95rem; } /* ---- FAQ ---- */ .faq { max-width:840px; margin:0 auto; } .faq details { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); margin-bottom:12px; box-shadow:var(--shadow-sm); overflow:hidden; } .faq summary { list-style:none; cursor:pointer; padding:22px 24px; font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--pine-deep); display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; font-family:var(--body); font-weight:700; font-size:1.6rem; color:var(--honey-deep); transition:transform .2s; flex:none; } .faq details[open] summary::after { transform:rotate(45deg); } .faq .answer { padding:0 24px 22px; color:var(--ink-soft); } .faq .answer p { font-size:1rem; } /* ---- about / split ---- */ .split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; } .portrait-slot { aspect-ratio:4/5; border-radius:1000px 1000px var(--radius) var(--radius); background:linear-gradient(165deg,var(--sage),var(--ivory-3)); border:1px solid var(--sage-line); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--pine-soft); padding:24px; box-shadow:var(--shadow-md); } .portrait-slot span { font-weight:700; opacity:.7; font-size:.9rem; } /* ---- final CTA band ---- */ .cta-band { text-align:center; } .cta-band .phone-xl { font-family:var(--display); font-weight:600; font-size:clamp(2rem,6vw,3rem); color:#FBEAC8; text-decoration:none; display:inline-block; margin:6px 0 4px; } .cta-band .phone-xl:hover { color:var(--honey); } /* ---- footer / compliance ---- */ .site-footer { background:var(--pine-deep); color:#CDC3AE; font-size:.9rem; padding:54px 0 30px; } .footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.12); } .footer-top h4 { color:#FBEAC8; font-family:var(--display); font-size:1.15rem; margin-bottom:12px; } .footer-top a { color:#CDC3AE; text-decoration:none; display:block; margin-bottom:8px; } .footer-top a:hover { color:var(--honey); } .footer-disclaimer { font-size:.78rem; line-height:1.6; color:#9C927E; margin-top:24px; max-width:none; } .footer-disclaimer strong { color:#BDB39C; } .footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:22px; font-size:.8rem; color:#8F856F; } .footer-bottom a { color:#9C927E; } /* ---- sticky mobile call bar ---- */ .callbar { position:fixed; left:0; right:0; bottom:0; z-index:120; display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(21,56,43,.97); backdrop-filter:blur(8px); box-shadow:0 -6px 22px rgba(0,0,0,.22); gap:10px; } .callbar a { flex:1; } .callbar .btn { min-height:52px; width:100%; } /* ---- reveal: transform-only settle — never hides content (LCP/no-JS/crawler safe) ---- */ @keyframes revealUp { from { transform: translateY(16px); } to { transform: none; } } .reveal { animation: revealUp .6s cubic-bezier(.2,.7,.2,1) both; } .reveal.in { transform: none; } /* legacy hook; harmless */ .reveal.d1{animation-delay:.07s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.21s} /* ---- scrollbar (match design) ---- */ * { scrollbar-width: thin; scrollbar-color: var(--pine-soft) var(--ivory-3); } *::-webkit-scrollbar { width:11px; height:11px; } *::-webkit-scrollbar-track { background:var(--ivory-3); } *::-webkit-scrollbar-thumb { background:var(--pine-soft); border-radius:8px; border:2px solid var(--ivory-3); } *::-webkit-scrollbar-thumb:hover { background:var(--pine); } /* ---- helpers ---- */ .mt-s{margin-top:14px}.mt{margin-top:24px}.mt-l{margin-top:40px} .maxw{max-width:720px}.center .maxw{margin-inline:auto} .hide-mobile{} .only-mobile{display:none} /* =========================== responsive =========================== */ @media (max-width: 900px) { .hero-grid { grid-template-columns:1fr; } .hero-media { order:-1; } .steps, .cards, .cards--2, .quotes { grid-template-columns:1fr; } .footer-top { grid-template-columns:1fr 1fr; } .split { grid-template-columns:1fr; } .split .portrait-slot { max-width:360px; margin:0 auto; } } @media (max-width: 720px) { body { font-size:17px; } .nav { position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--ivory); border-bottom:1px solid var(--line); padding:8px 22px 18px; display:none; box-shadow:var(--shadow-md); } .nav.open { display:flex; } .nav a { padding:14px 4px; border-bottom:1px solid var(--line-soft); opacity:1; } .nav .btn { margin-top:12px; } .header-phone.hide-sm { display:none; } .hamburger { display:flex; } .callbar { display:flex; } body { padding-bottom:74px; } .footer-top { grid-template-columns:1fr; } .trust-strip .container { gap:12px 22px; } } @media (max-width: 420px) { .quote-card { padding:20px 18px; } .btn { width:100%; } .hero-cred { font-size:.9rem; } } /* =========================== inner pages =========================== */ .page-hero { position:relative; overflow:hidden; padding:clamp(40px,7vw,72px) 0 clamp(30px,4vw,44px); text-align:center; } .page-hero::before { content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:90vw; max-width:820px; height:520px; background:radial-gradient(ellipse at 50% 40%, rgba(208,138,44,.16), transparent 62%); z-index:0; pointer-events:none; } .page-hero > * { position:relative; z-index:1; } .page-hero h1 { margin:14px auto 16px; max-width:18ch; } .page-hero .lead { max-width:60ch; margin:0 auto; } .page-hero .cta-row { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; } .crumbs { font-size:.85rem; color:var(--ink-soft); font-weight:700; } .crumbs a { color:var(--pine-soft); text-decoration:none; } .crumbs a:hover{ text-decoration:underline; } /* article / prose */ .prose { max-width:760px; margin:0 auto; } .prose > * + * { margin-top:1.15em; } .prose h2 { font-size:clamp(1.5rem,3.4vw,2rem); margin-top:1.8em; } .prose h3 { font-size:1.3rem; margin-top:1.4em; } .prose p, .prose li { font-size:1.08rem; color:var(--ink); line-height:1.7; } .prose ul, .prose ol { padding-left:1.3em; } .prose li { margin-top:.5em; } .prose ul li::marker { color:var(--honey-deep); } .prose strong { color:var(--ink); } .prose a { color:var(--pine-soft); font-weight:700; } /* answer-first highlight box (BLUF for AI citation) */ .answer-box { background:var(--sage); border-left:5px solid var(--pine); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:22px 26px; } .answer-box p { font-size:1.12rem; color:var(--pine-deep); font-weight:600; margin:0; max-width:none; } /* inline compliance disclosure / callout */ .disclosure { background:var(--honey-soft); border:1px solid #E6C98D; border-radius:var(--radius-sm); padding:16px 20px; font-size:.95rem; color:#6b4a14; } .disclosure strong { color:#5a3d0f; } .callout { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow-sm); } /* stat callouts */ .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:1.5em 0; } .stat { background:var(--ivory-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px; text-align:center; box-shadow:var(--shadow-sm); } .stat b { display:block; font-family:var(--display); font-weight:600; font-size:2rem; color:var(--pine); line-height:1; } .stat span { display:block; margin-top:8px; font-size:.9rem; color:var(--ink-soft); } .stat cite { display:block; margin-top:6px; font-size:.72rem; color:var(--ink-soft); opacity:.7; font-style:normal; } /* internal crosslink chips */ .crosslinks { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .crosslinks a { background:var(--ivory-2); border:1px solid var(--sage-line); color:var(--pine); font-weight:700; font-size:.95rem; padding:11px 18px; border-radius:999px; text-decoration:none; transition:.15s; } .crosslinks a:hover { background:var(--pine); color:#fff; transform:translateY(-2px); } /* legal prose (privacy / sms) */ .legal { max-width:780px; margin:0 auto; } .legal h2 { font-size:1.4rem; margin-top:1.8em; } .legal h3{ font-size:1.12rem; margin-top:1.3em; } .legal p, .legal li { font-size:1rem; color:var(--ink-soft); line-height:1.7; max-width:none; } .legal ul { padding-left:1.3em; margin-top:.6em; } .legal li{ margin-top:.4em; } .legal a { color:var(--pine-soft); font-weight:700; } @media (max-width:720px){ .stat-grid{ grid-template-columns:1fr; } .prose p,.prose li{ font-size:1.04rem; } } /* ---- accessibility ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } } :focus-visible { outline:3px solid var(--honey); outline-offset:2px; border-radius:4px; }