/* ═══════════════════════════════════════════════════════════════ Ingeni Health · Marketing Pages · Light/Dark Mode Theme Toggle: html.light-mode Nav/hero/footer always stay dark. .body-sec = light sections (white on light, dark on dark) .body-sec-alt = alternate light sections (tinted bg) .cta-dark = always-dark CTA sections ══════════════════════════════════════════════════════════════ */ /* ── FOUC guard: applied immediately in ── */ html.light-mode { background: #EEF3F6; } /* ── Toggle button (shown in nav) ── */ .theme-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, border-color .18s, color .18s; color: rgba(255,255,255,.5); flex-shrink: 0; outline: none; font-size: 0; line-height: 0; } .theme-toggle:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; } html.light-mode .theme-toggle { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: #4A6172; } html.light-mode .theme-toggle:hover { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.2); color: #0C1B24; } /* ── Body background ── */ html.light-mode body { background: #EEF3F6 !important; } /* ═══════════════════════════════════════════════════════════════ SECTION BACKGROUNDS ══════════════════════════════════════════════════════════════ */ html.light-mode .body-sec { background: #FFFFFF !important; border-color: rgba(0,0,0,.06) !important; } html.light-mode .body-sec-alt { background: #F2F7F9 !important; border-color: rgba(0,0,0,.05) !important; } /* ═══════════════════════════════════════════════════════════════ TEXT — WHITE → DARK Use attribute selectors to beat inline styles ══════════════════════════════════════════════════════════════ */ /* Direct #fff / white text → near-black */ html.light-mode .body-sec [style*="color:#fff"], html.light-mode .body-sec-alt [style*="color:#fff"] { color: #0C1B24 !important; } /* Inherited white from body (no explicit color set) */ html.light-mode .body-sec, html.light-mode .body-sec-alt { color: #0C1B24; } /* rgba(255,255,255, X) — muted/dim white text → readable grey */ html.light-mode .body-sec [style*="color:rgba(255,255,255"], html.light-mode .body-sec-alt [style*="color:rgba(255,255,255"] { color: #3D6272 !important; } /* Very faint whites (.1, .15, .18) → light muted */ html.light-mode .body-sec [style*="color:rgba(255,255,255,.1"], html.light-mode .body-sec [style*="color:rgba(255,255,255,.18"], html.light-mode .body-sec-alt [style*="color:rgba(255,255,255,.1"], html.light-mode .body-sec-alt [style*="color:rgba(255,255,255,.18"] { color: #8AAABB !important; } /* ═══════════════════════════════════════════════════════════════ CARD / CONTAINER BACKGROUNDS — dark rgba → white ══════════════════════════════════════════════════════════════ */ /* Named component classes */ html.light-mode .body-sec .prod-card, html.light-mode .body-sec .feat-card, html.light-mode .body-sec .journey-card, html.light-mode .body-sec .audience-card, html.light-mode .body-sec .stat-card, html.light-mode .body-sec .rot-card, html.light-mode .body-sec .fmt-card, html.light-mode .body-sec .value-card, html.light-mode .body-sec .layer-card, html.light-mode .body-sec .layer-card-teal, html.light-mode .body-sec .layer-card-blue, html.light-mode .body-sec .layer-card-indigo, html.light-mode .body-sec .roi-stat, html.light-mode .body-sec-alt .prod-card, html.light-mode .body-sec-alt .feat-card, html.light-mode .body-sec-alt .journey-card, html.light-mode .body-sec-alt .audience-card, html.light-mode .body-sec-alt .stat-card, html.light-mode .body-sec-alt .rot-card, html.light-mode .body-sec-alt .fmt-card, html.light-mode .body-sec-alt .value-card { background: #FFFFFF !important; border-color: rgba(0,0,0,.09) !important; box-shadow: 0 2px 12px rgba(0,0,0,.06); } /* scenario rows (corporate page) */ html.light-mode .body-sec .scenario-row { background: rgba(99,130,220,.04) !important; border-color: rgba(99,130,220,.14) !important; } html.light-mode .body-sec .scenario-row.highlight { background: rgba(99,130,220,.09) !important; border-color: rgba(99,130,220,.28) !important; } /* Inline rgba dark backgrounds */ html.light-mode .body-sec [style*="background:rgba(7,30,38"], html.light-mode .body-sec [style*="background:rgba(7,12,42"], html.light-mode .body-sec [style*="background:rgba(7,20,50"], html.light-mode .body-sec [style*="background:rgba(10,30,40"], html.light-mode .body-sec [style*="background:rgba(10,40,52"], html.light-mode .body-sec [style*="background:rgba(10,42,54"], html.light-mode .body-sec [style*="background:rgba(10,45,58"], html.light-mode .body-sec [style*="background:rgba(10,20,55"], html.light-mode .body-sec [style*="background:rgba(10,55,65"], html.light-mode .body-sec [style*="background:rgba(12,26,60"], html.light-mode .body-sec [style*="background:rgba(12,52,58"], html.light-mode .body-sec [style*="background:rgba(16,28,68"], html.light-mode .body-sec [style*="background:rgba(18,14,55"], html.light-mode .body-sec [style*="background:rgba(8,32,42"], html.light-mode .body-sec [style*="background:rgba(8,35,46"], html.light-mode .body-sec-alt [style*="background:rgba(7,30,38"], html.light-mode .body-sec-alt [style*="background:rgba(10,30,40"], html.light-mode .body-sec-alt [style*="background:rgba(10,45,58"], html.light-mode .body-sec-alt [style*="background:rgba(10,20,55"], html.light-mode .body-sec-alt [style*="background:rgba(7,20,50"] { background: #FFFFFF !important; border-color: rgba(0,0,0,.08) !important; } /* Very dim white "glass" backgrounds → subtle light tint */ html.light-mode .body-sec [style*="background:rgba(255,255,255,.03"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.04"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.05"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.06"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.07"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.08"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.03"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.04"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.05"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.06"] { background: rgba(0,0,0,.03) !important; } /* Teal/indigo/amber tinted backgrounds → keep accent, lighten opacity */ html.light-mode .body-sec [style*="background:rgba(59,183,143,.06"], html.light-mode .body-sec [style*="background:rgba(59,183,143,.07"], html.light-mode .body-sec [style*="background:rgba(59,183,143,.08"], html.light-mode .body-sec-alt [style*="background:rgba(59,183,143,.06"], html.light-mode .body-sec-alt [style*="background:rgba(59,183,143,.07"] { background: rgba(59,183,143,.06) !important; } html.light-mode .body-sec [style*="background:rgba(75,192,200,.05"], html.light-mode .body-sec [style*="background:rgba(75,192,200,.06"], html.light-mode .body-sec [style*="background:rgba(75,192,200,.07"], html.light-mode .body-sec-alt [style*="background:rgba(75,192,200,.05"] { background: rgba(75,192,200,.06) !important; } /* ═══════════════════════════════════════════════════════════════ BORDERS — white-rgba → black-rgba ══════════════════════════════════════════════════════════════ */ html.light-mode .body-sec [style*="border:1px solid rgba(255,255,255"], html.light-mode .body-sec [style*="border-top:1px solid rgba(255,255,255"], html.light-mode .body-sec [style*="border-bottom:1px solid rgba(255,255,255"], html.light-mode .body-sec-alt [style*="border:1px solid rgba(255,255,255"], html.light-mode .body-sec-alt [style*="border-top:1px solid rgba(255,255,255"] { border-color: rgba(0,0,0,.09) !important; } /* ── Thin divider lines (width:1.5px or width:1px used as vertical lines) ── */ html.light-mode .body-sec [style*="background:rgba(255,255,255,.15"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.1)"], html.light-mode .body-sec [style*="background:rgba(255,255,255,.08"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.15"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.1)"] { background: rgba(0,0,0,.09) !important; } /* Progress bar tracks (thin dark lines in charts) */ html.light-mode .body-sec [style*="background:rgba(255,255,255,.06"], html.light-mode .body-sec-alt [style*="background:rgba(255,255,255,.06"] { background: rgba(0,0,0,.08) !important; } /* ═══════════════════════════════════════════════════════════════ NAMED COMPONENT OVERRIDES ══════════════════════════════════════════════════════════════ */ /* Check icon containers */ html.light-mode .body-sec .check-icon, html.light-mode .body-sec-alt .check-icon { background: rgba(59,183,143,.08) !important; border-color: rgba(59,183,143,.2) !important; } html.light-mode .body-sec .check-icon-blue, html.light-mode .body-sec-alt .check-icon-blue { background: rgba(99,130,220,.08) !important; border-color: rgba(99,130,220,.2) !important; } /* Journey/feat icons */ html.light-mode .body-sec .journey-icon, html.light-mode .body-sec-alt .journey-icon { background: rgba(75,192,200,.07) !important; border-color: rgba(75,192,200,.18) !important; box-shadow: none; } html.light-mode .body-sec .feat-icon, html.light-mode .body-sec-alt .feat-icon { background: rgba(59,183,143,.07) !important; border-color: rgba(59,183,143,.18) !important; } /* Pills / tags */ html.light-mode .body-sec .fmt-pill, html.light-mode .body-sec-alt .fmt-pill { background: rgba(59,183,143,.06) !important; border-color: rgba(59,183,143,.2) !important; color: #2A7D65 !important; } html.light-mode .body-sec .prov-tag, html.light-mode .body-sec-alt .prov-tag { background: rgba(59,183,143,.06) !important; border-color: rgba(59,183,143,.18) !important; color: #2A7D65 !important; } /* Rotating content card */ html.light-mode .body-sec .rot-card, html.light-mode .body-sec-alt .rot-card { box-shadow: 0 6px 30px rgba(0,0,0,.1) !important; } html.light-mode .body-sec .rot-dot, html.light-mode .body-sec-alt .rot-dot { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.1) !important; } html.light-mode .body-sec .rot-dot.active, html.light-mode .body-sec-alt .rot-dot.active { background: rgba(59,183,143,.1) !important; border-color: rgba(59,183,143,.45) !important; } /* Section label (small uppercase divider text) */ html.light-mode .body-sec .section-label, html.light-mode .body-sec-alt .section-label { color: #2A9E7A !important; border-color: rgba(59,183,143,.25) !important; } /* Step dots */ html.light-mode .body-sec .step-dot, html.light-mode .body-sec-alt .step-dot { background: rgba(59,183,143,.08) !important; border-color: rgba(59,183,143,.35) !important; } /* Format card icon containers */ html.light-mode .body-sec .fmt-icon, html.light-mode .body-sec-alt .fmt-icon { background: rgba(59,183,143,.07) !important; border-color: rgba(59,183,143,.18) !important; } /* Intel bars (corporate page) */ html.light-mode .body-sec .intel-bar-wrap { background: rgba(99,130,220,.12) !important; } /* ═══════════════════════════════════════════════════════════════ PRICING PAGE — PLAN CARDS (body-sec only) ══════════════════════════════════════════════════════════════ */ html.light-mode .body-sec .plan-card-standard { background: #FFFFFF !important; border-color: rgba(59,183,143,.25) !important; box-shadow: 0 2px 16px rgba(0,0,0,.07); } html.light-mode .body-sec .plan-card-teal { background: #FFFFFF !important; border-color: rgba(59,183,143,.5) !important; box-shadow: 0 2px 20px rgba(59,183,143,.12); } html.light-mode .body-sec .plan-card-teal::before { background: linear-gradient(145deg,rgba(59,183,143,.06),transparent) !important; } html.light-mode .body-sec .plan-card-amber { background: #FFFFFF !important; border-color: rgba(214,169,74,.55) !important; box-shadow: 0 2px 16px rgba(214,169,74,.1); } /* Full Suite (plan-card-dark) stays dark — don't override it */ html.light-mode .body-sec .plan-card-dark { /* intentionally keep dark gradient */ } /* Plan card text on light cards */ html.light-mode .body-sec .plan-card-standard .plan-price, html.light-mode .body-sec .plan-card-teal .plan-price, html.light-mode .body-sec .plan-card-amber .plan-price { color: #0C1B24 !important; } html.light-mode .body-sec .plan-card-standard .plan-tagline, html.light-mode .body-sec .plan-card-teal .plan-tagline, html.light-mode .body-sec .plan-card-amber .plan-tagline { color: #4A6172 !important; } html.light-mode .body-sec .plan-card-standard .plan-feature, html.light-mode .body-sec .plan-card-teal .plan-feature, html.light-mode .body-sec .plan-card-amber .plan-feature { color: #3D6272 !important; } html.light-mode .body-sec .income-note-teal { background: rgba(59,183,143,.06) !important; border-color: rgba(59,183,143,.2) !important; } html.light-mode .body-sec .btn-outline { border-color: rgba(0,0,0,.15) !important; color: #3D6272 !important; } html.light-mode .body-sec .btn-outline:hover { border-color: rgba(59,183,143,.5) !important; color: #0C1B24 !important; background: rgba(59,183,143,.05) !important; } /* ═══════════════════════════════════════════════════════════════ STAT CARDS — audience card images keep their look, just border ══════════════════════════════════════════════════════════════ */ html.light-mode .body-sec .audience-card, html.light-mode .body-sec-alt .audience-card { border-color: rgba(0,0,0,.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,.08); } /* ═══════════════════════════════════════════════════════════════ SMOOTH TRANSITIONS on theme switch ══════════════════════════════════════════════════════════════ */ .body-sec, .body-sec-alt, .body-sec *, .body-sec-alt * { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* But don't transition the hero or images */ .hero-dark, .hero-dark *, img { transition: none !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE NAV — hamburger + mobile dropdown (all pages) ══════════════════════════════════════════════════════════════ */ /* Desktop nav inner wrapper */ .mktg-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1.25rem; height: 60px; } /* Desktop nav links row */ .mktg-nav-links { display: flex; align-items: center; gap: 1.75rem; flex: 1; } /* Flex spacer pushes Sign In / CTA to far right */ .mktg-nav-divider { flex: 1; } /* Always-visible right cluster: theme toggle + burger */ .mktg-nav-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } /* Hamburger button — desktop: hidden */ .mktg-burger { display: none; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); cursor: pointer; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; } .mktg-burger:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); color: #fff; } .mktg-burger.mktg-open { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; } /* ── Mobile ≤768px ── */ @media (max-width: 768px) { /* No horizontal scroll */ html, body { overflow-x: hidden; } /* Show hamburger */ .mktg-burger { display: flex; } /* Nav links collapse to fixed full-width dropdown */ .mktg-nav-links { display: none; position: fixed; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(5,18,26,.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.07); padding: .25rem 0 1.25rem; z-index: 998; max-height: calc(100dvh - 60px); overflow-y: auto; } .mktg-nav-links.mktg-open { display: flex; } /* Each nav link full-width row */ .mktg-nav-links .nav-a { display: block !important; padding: .875rem 1.25rem !important; font-size: .95rem !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; color: rgba(255,255,255,.65) !important; } .mktg-nav-links .nav-a.active, .mktg-nav-links .nav-a:hover { color: #fff !important; } /* Divider hidden on mobile */ .mktg-nav-divider { display: none !important; } /* Sign In row */ .mktg-signin { color: rgba(255,255,255,.4) !important; font-size: .88rem !important; } /* CTA button: full-width block */ .mktg-nav-cta, .mktg-nav-cta-alt { display: block !important; margin: .875rem 1.25rem 0 !important; text-align: center !important; padding: .8rem 1rem !important; font-size: .9rem !important; box-sizing: border-box !important; width: calc(100% - 2.5rem) !important; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE SECTION CONTENT — ≤640px ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* 4-col stats bar → 2×2 on mobile */ .mktg-stats-bar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; width: 100% !important; box-sizing: border-box !important; } .mktg-stats-bar > div { border-right: none !important; border-bottom: 1px solid rgba(99,130,220,.1) !important; } /* Rein in very large decorative numbers (corporate-health background stats) */ .bg-stat-num { font-size: 4.5rem !important; line-height: 1 !important; } /* Hero sections: tighter vertical padding */ .hero-dark { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } /* Plan grid already 1-col via pricing.html media rule; ensure modal fits */ #modal-box { max-height: calc(100dvh - .75rem) !important; } /* Overflow guard for any stray wide element */ * { max-width: 100vw; box-sizing: border-box; } img { max-width: 100%; height: auto; } }