/* assets/css/insurance.css Fully scoped to .insurance-page (safe). Modal uses #insModal so it stays stable even when JS moves it to . */ .insurance-page{ --i-card: rgba(255,255,255,0.86); --i-border: rgba(17,45,67,0.10); --i-shadow: 0 18px 55px rgba(0,0,0,0.10); --i-radius: 18px; } /* HERO */ .insurance-page .ins-hero{ padding: 52px 0 22px; background: radial-gradient(900px 420px at 10% 12%, rgba(95,147,204,0.16), transparent 60%), radial-gradient(900px 420px at 90% 18%, rgba(17,45,67,0.12), transparent 55%); } .insurance-page .ins-hero__grid{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: start; } .insurance-page .ins-pill{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; background: rgba(95,147,204,0.14); border: 1px solid rgba(95,147,204,0.22); color: var(--color-primary); font-weight: 800; font-size: 0.86rem; } .insurance-page .ins-pill.small{ font-size: 0.78rem; padding: 7px 10px; } .insurance-page .ins-hero h1{ margin-top: 14px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; color: var(--color-primary); letter-spacing: -0.2px; } .insurance-page .ins-lead{ margin-top: 12px; color: var(--color-muted); font-size: 1.02rem; max-width: 60ch; } .insurance-page .ins-hero__actions{ display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; } /* Buttons (TONAL + OUTLINED system) */ .insurance-page .ins-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 14px; font-weight: 800; border: 1px solid transparent; transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease; user-select: none; text-decoration: none; } .insurance-page .ins-btn:active{ transform: translateY(1px); } /* Tonal (Primary) */ .insurance-page .ins-btn--primary{ background: rgba(95,147,204,0.18); border-color: rgba(95,147,204,0.30); color: #112D43; box-shadow: none; } .insurance-page .ins-btn--primary:hover{ background: rgba(95,147,204,0.22); transform: translateY(-1px); } /* Outlined (Ghost) */ .insurance-page .ins-btn--ghost{ background: transparent; border-color: rgba(95,147,204,0.55); color: #112D43; box-shadow: none; } .insurance-page .ins-btn--ghost:hover{ background: rgba(95,147,204,0.12); transform: translateY(-1px); } .insurance-page .ins-badges{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 18px; } .insurance-page .ins-mini{ background: rgba(255,255,255,0.72); border: 1px solid var(--i-border); border-radius: 16px; padding: 12px 12px; box-shadow: 0 10px 26px rgba(0,0,0,0.06); } .insurance-page .ins-mini strong{ display: block; color: var(--color-primary); font-weight: 900; } .insurance-page .ins-mini span{ color: var(--color-muted); font-size: .92rem; } .insurance-page .ins-disclaimer{ margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; color: var(--color-muted); font-size: .92rem; } .insurance-page .ins-disclaimer i{ color: var(--color-secondary); margin-top: 3px; } /* Right card */ .insurance-page .ins-hero__card{ border-radius: 22px; border: 1px solid var(--i-border); background: rgba(255,255,255,0.84); box-shadow: var(--i-shadow); overflow: hidden; position: sticky; top: 92px; } .insurance-page .ins-card-top{ padding: 16px; border-bottom: 1px solid rgba(17,45,67,0.08); } .insurance-page .ins-card-top h2{ margin-top: 10px; color: var(--color-primary); } .insurance-page .ins-card-top p{ margin-top: 6px; color: var(--color-muted); } .insurance-page .ins-card-body{ padding: 16px; } .insurance-page .ins-step{ display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(17,45,67,0.10); background: rgba(255,255,255,0.70); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } .insurance-page .ins-step + .ins-step{ margin-top: 10px; } .insurance-page .dot{ width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); } .insurance-page .ins-step strong{ color: var(--color-primary); } .insurance-page .ins-step span{ display:block; color: var(--color-muted); font-size: .9rem; margin-top: 2px; } .insurance-page .ins-card-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .insurance-page .ins-note{ margin-top: 12px; color: var(--color-muted); font-size: .9rem; } /* Finder */ .insurance-page .ins-finder{ padding: 10px 0 22px; } .insurance-page .ins-finder__head h2{ color: var(--color-primary); } .insurance-page .ins-finder__head p{ margin-top: 6px; color: var(--color-muted); } .insurance-page .ins-controls{ margin-top: 14px; display: grid; gap: 12px; } .insurance-page .ins-search{ position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(17,45,67,0.12); background: rgba(255,255,255,0.78); box-shadow: 0 12px 30px rgba(0,0,0,0.06); } .insurance-page .ins-search i{ color: var(--color-secondary); } .insurance-page .ins-search input{ border: none; outline: none; background: transparent; width: 100%; font-size: 1rem; color: var(--color-text); } .insurance-page .ins-clear{ border: 0; background: transparent; cursor: pointer; color: var(--color-muted); padding: 6px 8px; border-radius: 10px; } .insurance-page .ins-clear:hover{ background: rgba(17,45,67,0.06); } .insurance-page .ins-tabs{ display: flex; gap: 10px; flex-wrap: wrap; } .insurance-page .ins-tab{ padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(17,45,67,0.12); background: rgba(255,255,255,0.78); color: var(--color-primary); font-weight: 900; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,0.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .insurance-page .ins-tab:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.09); } .insurance-page .ins-tab.is-active{ border-color: rgba(95,147,204,0.45); box-shadow: 0 18px 42px rgba(95,147,204,0.14); } .insurance-page .ins-results{ margin-top: 12px; display: flex; justify-content: space-between; align-items: center; } .insurance-page .ins-count{ color: var(--color-muted); font-weight: 700; } /* Plans grid */ .insurance-page .ins-grid{ margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .insurance-page .ins-plan{ display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 14px; border-radius: 18px; border: 1px solid rgba(17,45,67,0.10); background: rgba(255,255,255,0.80); box-shadow: 0 14px 36px rgba(0,0,0,0.07); transition: transform .2s ease, box-shadow .2s ease; } .insurance-page .ins-plan:hover{ transform: translateY(-2px); box-shadow: 0 20px 55px rgba(0,0,0,0.10); } .insurance-page .ins-plan__icon{ width: 44px; height: 44px; border-radius: 14px; background: rgba(95,147,204,0.18); border: 1px solid rgba(95,147,204,0.22); display: grid; place-items: center; color: var(--color-primary); } .insurance-page .ins-plan__meta h3{ margin: 0; color: var(--color-primary); font-size: 1.02rem; line-height: 1.2; } .insurance-page .ins-plan__tag{ margin-top: 6px; color: var(--color-muted); font-size: .9rem; } /* View details button (it's a