/* ================================================ iProtect — Light Theme @import this instead of styles.css on light pages. Requires class="light" (plus page class) on . ================================================ */ @import url('styles.css'); /* ─── BASE ────────────────────────────────────── */ body.light { background: #eef2f8; color: #1a2638; } /* ─── NAVIGATION ──────────────────────────────── */ body.light .nav { background: rgba(238,242,248,0.97); border-bottom-color: rgba(0,0,0,0.09); } body.light .nav-logo-name { color: #0f1929; } body.light .nav-links a { color: rgba(15,25,41,0.60); } body.light .nav-links a:hover { color: #0f1929; background: rgba(0,0,0,0.05); } body.light .nav-back { color: rgba(15,25,41,0.40); } body.light .nav-back:hover { color: rgba(15,25,41,0.70); } /* ─── PROPS BAR ───────────────────────────────── */ body.light .props-bar { background: #fff; border-color: rgba(0,0,0,0.09); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } body.light .prop-item { border-right-color: rgba(0,0,0,0.07); } body.light .prop-item span { color: rgba(15,25,41,0.80); } /* ─── SECTION TYPOGRAPHY ──────────────────────── */ body.light .section-title { color: #0f1929; } body.light .section-sub { color: rgba(15,25,41,0.65); } body.light .divider { background: linear-gradient(90deg, var(--accent), rgba(0,0,0,0.06), transparent); } /* ─── SECTION BACKGROUND TIERS ───────────────── 1. Top bar / page base: light grey (body bg) 2. Hero heading band: thick brand gradient (see .hero-bg below) 3. Content sections alternate grey / light gradient wash ────────────────────────────────────────────── */ body.light .hero-bg { background: linear-gradient(160deg, #2e2470 0%, #157a8c 55%, #00a887 100%); } body.light .bg-grey { background: #eef2f8; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); } body.light .bg-gradient-light { background: linear-gradient(160deg, rgba(225,235,255,0.65) 0%, rgba(212,242,240,0.60) 100%); border-top: 1px solid rgba(58,142,255,0.14); border-bottom: 1px solid rgba(0,229,200,0.12); } /* ─── BUTTONS ─────────────────────────────────── */ /* btn-primary: accent gradient with dark text — unchanged */ body.light .btn-secondary { border-color: var(--a-strong); color: var(--accent); } body.light .btn-secondary:hover { background: var(--a-subtle); } /* ─── TABS ────────────────────────────────────── */ body.light .tab { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.18); color: rgba(15,25,41,0.82); } body.light .tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } body.light .tab:hover:not(.active) { background: rgba(0,0,0,0.09); color: rgba(15,25,41,0.95); } /* ─── PRICE TABLE ─────────────────────────────── */ body.light .price-table-wrap { border: 1px solid rgba(0,0,0,0.09); background: #fff; } body.light .price-table thead tr { background: linear-gradient(90deg, rgba(58,142,255,0.22), rgba(0,0,0,0.04)); } body.light .price-table thead th { color: #0f1929; border-bottom-color: rgba(58,142,255,0.22); } body.light .price-table tbody tr { background: #fff; } body.light .price-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.025); } body.light .price-table tbody tr:hover { background: var(--a-subtle); } body.light .price-table tbody tr.band-hover { background: var(--a-subtle); } body.light .price-table tbody td { color: #1a2638; border-bottom-color: rgba(0,0,0,0.07); } body.light .device-band { color: #0f1929; } body.light .device-sub { color: rgba(15,25,41,0.50); } body.light .price-val { color: #0f1929; } body.light .mo-val { color: rgba(15,25,41,0.55); } body.light .vat-note { color: rgba(15,25,41,0.50); } /* ─── FEATURE CARDS ───────────────────────────── */ body.light .feature-card { background: #fff; border-color: rgba(0,0,0,0.09); box-shadow: 0 1px 4px rgba(0,0,0,0.05); } body.light .feature-card:hover { background: #f9fbff; border-color: var(--a-mid); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } body.light .feature-title { color: #0f1929; } body.light .feature-desc { color: rgba(15,25,41,0.65); } /* ─── GENIE SECTIONS (copy colour tweaks only — bg set by .bg-grey/.bg-gradient-light) ─ */ body.light #genie p[style], body.light #platform p[style] { color: rgba(15,25,41,0.70) !important; } body.light .genie-feat-title { color: #0f1929; } body.light .genie-feat-desc { color: rgba(15,25,41,0.65); } /* ─── SIGNOFF / CONTACT ───────────────────────── */ body.light .signoff { background: linear-gradient(135deg, var(--a-subtle), rgba(0,229,200,0.04)); border-color: var(--a-mid); } body.light .signoff h2 { color: #0f1929; } body.light .signoff p { color: rgba(15,25,41,0.72); } body.light .signoff strong[style] { color: #0f1929 !important; } body.light .contact-hint { color: rgba(15,25,41,0.45); } body.light .form-group label { color: rgba(15,25,41,0.70); } body.light .form-group input, body.light .form-group textarea { background: #fff; border-color: rgba(0,0,0,0.14); color: #1a2638; } body.light .form-group input:focus, body.light .form-group textarea:focus { background: #fff; border-color: var(--accent); } body.light .form-status { color: rgba(15,25,41,0.55); } /* ─── FOOTER ──────────────────────────────────── */ body.light footer { background: #e4e9f2; border-top-color: rgba(0,0,0,0.09); } body.light .footer-legal { color: rgba(15,25,41,0.50); } body.light .footer-genie { color: rgba(15,25,41,0.38); } /* ─── CORPORATE SPECIFIC ──────────────────────── */ body.corporate.light #cover.bg-grey { border-top: none; } body.supplier.light #benefits.bg-gradient-light { border-top: none; } body.supplier.light #earn-stats.bg-grey { border-top: none; } body.corporate.light .hero .btn-secondary { background: rgba(4,18,34,0.35); border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.92); } body.corporate.light .hero .btn-secondary:hover { background: rgba(4,18,34,0.5); } body.light .elig-callout strong { color: #0f1929; } body.light .elig-callout p { color: rgba(15,25,41,0.70); } body.light .cover-card { background: #fff; border-color: rgba(0,0,0,0.09); box-shadow: 0 1px 4px rgba(0,0,0,0.05); } body.light .cover-card:hover { background: #f9fbff; } body.light .cover-card.recommended { border-color: rgba(58,142,255,0.35); background: rgba(58,142,255,0.05); } body.light .cover-card.recommended:hover { background: rgba(58,142,255,0.08); } body.light .cover-title { color: #0f1929; } body.light .cover-desc { color: rgba(15,25,41,0.70); } body.light .cover-includes li { color: rgba(15,25,41,0.80); } body.light .cover-includes li.inactive { color: rgba(15,25,41,0.80); } body.light .cover-includes li.inactive i { color: rgba(15,25,41,0.38); } body.light .usp-list li { color: rgba(15,25,41,0.78); } body.light .usp-list li i { color: var(--accent); } body.light .step-title { color: #0f1929; } body.light .step-desc { color: rgba(15,25,41,0.65); } body.light .trust-bar { border-top-color: rgba(0,0,0,0.08); border-bottom-color: rgba(0,0,0,0.08); } body.light .trust-item-text strong { color: #0f1929; } body.light .trust-item-text span { color: rgba(15,25,41,0.55); } /* ─── PRICE TABLE — BADGES + COVER PILLS ─────── */ /* Term badges: pale tones need darkening for light bg */ body.light .badge-12 { background: rgba(160,90,0,0.09); color: #9a5c00; border-color: rgba(160,90,0,0.25); } body.light .badge-24 { background: rgba(20,100,190,0.09); color: #1464b8; border-color: rgba(20,100,190,0.25); } body.light .badge-36 { background: rgba(0,128,116,0.09); color: #007d72; border-color: rgba(0,128,116,0.25); } /* Cover pills */ body.light .cover-pill.ad { background: rgba(40,100,220,0.09); border-color: rgba(40,100,220,0.28); color: #1e5eb8; } body.light .cover-pill.mid { background: rgba(30,110,230,0.08); border-color: rgba(30,110,230,0.22); color: #1464cc; } body.light .cover-pill.full { background: rgba(0,128,116,0.09); border-color: rgba(0,128,116,0.25); color: #007d72; } /* ─── SUPPLIER SPECIFIC ───────────────────────── */ body.supplier.light { --accent: #007a6c; --accent-alt: #3a8eff; --accent-grad: linear-gradient(90deg, #007a6c, #3a8eff); --a-subtle: rgba(0,122,108,0.07); --a-light: rgba(0,122,108,0.12); --a-mid: rgba(0,122,108,0.22); --a-strong: rgba(0,122,108,0.38); --a-text: rgba(0,122,108,0.55); } body.supplier.light .hero { --accent: #00e5c8; --accent-alt: #3a8eff; --accent-grad: linear-gradient(90deg, #00e5c8, #3a8eff); --a-subtle: rgba(0,229,200,0.07); --a-light: rgba(0,229,200,0.12); --a-mid: rgba(0,229,200,0.22); --a-strong: rgba(0,229,200,0.38); --a-text: rgba(0,229,200,0.55); } body.light .testimonial cite { color: #007a6c; } body.light .earn-stat { background: rgba(0,168,152,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.05); } body.light .earn-stat-value { color: #007d72; } body.light .earn-stat-label { color: rgba(15,25,41,0.68); } body.light .testimonial { background: rgba(0,229,200,0.05); border-color: rgba(0,229,200,0.18); } body.light .testimonial blockquote { color: #1a2638; } body.light .testimonial .role { color: rgba(15,25,41,0.55); } /* ─── WELCOME PAGE ────────────────────────────── */ /* Same light gradient wash used for content sections site-wide */ body.welcome.light .bg-base { background: #eef2f8; } body.welcome.light .bg-overlay { background: linear-gradient( 160deg, rgba(225,235,255,0.65) 0%, rgba(212,242,240,0.60) 100% ); } body.welcome.light .eyebrow { color: #00a896 !important; } body.welcome.light h1 { color: #0f1929 !important; } body.welcome.light .gateway-sub { color: rgba(15,25,41,0.65) !important; } body.welcome.light footer { background: transparent; border-top-color: rgba(0,0,0,0.08); color: rgba(15,25,41,0.58); } body.welcome.light .choice-card { background: #fff; border-color: rgba(0,0,0,0.09); box-shadow: 0 1px 4px rgba(0,0,0,0.05); backdrop-filter: none; -webkit-backdrop-filter: none; } body.welcome.light .choice-card:hover { background: #f9fbff; border-color: rgba(0,0,0,0.14); transform: translateY(-4px); } body.welcome.light .card-title { color: #0f1929 !important; } body.welcome.light .card-desc { color: rgba(15,25,41,0.65) !important; } body.welcome.light .gateway-tagline { color: rgba(15,25,41,0.78) !important; } body.welcome.light .choice-card.supplier .pill { background: rgba(0,122,108,0.10); color: #007a6c; } body.welcome.light .choice-card.supplier .pill:hover { background: #007a6c; color: #fff; } body.welcome.light .choice-card.supplier .card-cta { color: #007a6c; } body.welcome.light .choice-card.supplier:hover { border-color: rgba(0,122,108,0.32); }