/* ===================================================================== assets/light-theme.css — 1stNlast LIGHT (white) THEME v2 — FIX: brand names / Limited-Edition headings rendered white --------------------------------------------------------------------- HOW TO LOAD (one line per page, nothing else changes): <-- ADD LAST WHY v2 EXISTS index.html carries its own . Both fixes work; only pick one.) Nothing else changed from v1. No layout box, class name, id, font-family, font-size, animation or JS hook is touched, so every existing behaviour (burger menu, AOS, FAQ accordion, tabs, counters, 10:00 AM countdown, PIN demo, partner API form, toasts, tsParticles) keeps working exactly as before. ===================================================================== */ /* ------------------------------------------------------- 1. TOKENS -- */ :root{ --bg:#ffffff; --bg2:#f6f8fb; --panel:#ffffff; --line:rgba(15,23,42,.10); --tx:#0f172a; /* ink */ --mut:#5b6b85; /* muted body */ /* accents darkened for AA contrast on white, same hue family */ --teal:#0d9488; --cyan:#0284c7; --pur:#7c3aed; --pink:#db2777; --amb:#b45309; /* light-theme helpers */ --ink2:#334155; --soft:#f8fafc; --soft2:#f1f5f9; --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.06); --shadow-lg:0 18px 44px rgba(15,23,42,.12); } html{background:var(--bg);} body{background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;} ::selection{background:rgba(13,148,136,.18);color:var(--tx);} ::placeholder{color:#9aa7ba;opacity:1;} /* ---------------------------------------------------------- 2. NAV -- */ header.nav{ background:rgba(255,255,255,.88); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(15,23,42,.03); } .logo{color:var(--tx);} .logo sup{color:var(--mut);} .logo .dot{box-shadow:0 0 14px rgba(13,148,136,.32);} .menu>li>a{color:var(--ink2);} .menu>li>a:hover,.menu>li.active>a{color:var(--tx);background:rgba(15,23,42,.05);} .drop{ background:#ffffff; border:1px solid var(--line); box-shadow:0 18px 44px rgba(15,23,42,.14); } .drop a{color:var(--mut);} .drop a:hover{background:rgba(13,148,136,.09);color:var(--teal);} .burger{color:var(--tx);border:1px solid var(--line);background:#fff;} /* buttons */ .btn-p{color:#fff;box-shadow:0 8px 22px rgba(13,148,136,.22);} .btn-p:hover{box-shadow:0 14px 30px rgba(13,148,136,.30);} .btn-g{background:#fff;color:var(--tx);border:1px solid rgba(15,23,42,.16);} .btn-g:hover{border-color:var(--teal);color:var(--teal);background:rgba(13,148,136,.05);} .launch{color:#fff;} /* --------------------------------------------------------- 3. HERO -- */ .hero-glow{background:radial-gradient(circle,rgba(2,132,199,.12),transparent 62%);} .chip{background:var(--soft2);border:1px solid var(--line);color:var(--ink2);} .pulse{background:var(--teal);} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(13,148,136,.45)}70%{box-shadow:0 0 0 12px rgba(13,148,136,0)}100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}} h1.hero-t{color:var(--tx);} .hero-sub{color:var(--ink2);} .hero-p{color:var(--mut);} /* ---------------------------------------------------- 4. COUNTDOWN -- */ .cd-card{ background:linear-gradient(180deg,#ffffff,var(--soft)); border:1px solid var(--line); box-shadow:var(--shadow); } .cd-lbl{color:var(--mut);} .cd-u{background:var(--soft);border:1px solid rgba(13,148,136,.22);} .cd-u b{background:linear-gradient(180deg,var(--tx),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;} .cd-u span{color:var(--mut);} .pinbar input{background:#fff;border:1px solid var(--line);color:var(--tx);box-shadow:inset 0 1px 2px rgba(15,23,42,.04);} .pinbar input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.14);} /* main.js sets #pinmsg colour inline (#22e6c3 ok / #f472b6 error) */ #pinmsg{color:var(--teal);} #pinmsg[style*="22e6c3"]{color:#0d9488 !important;} #pinmsg[style*="f472b6"]{color:#dc2626 !important;} /* -------------------------------------------------------- 5. STATS -- */ .stats{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} .stat b{color:var(--tx);} .stat span{color:var(--mut);} .tagp{background:#fff;border:1px solid var(--line);color:var(--ink2);} /* ----------------------------------------------------- 6. SECTIONS -- */ .eyebrow{color:var(--teal);} h2.st{color:var(--tx);} .lead{color:var(--mut);} .alt{background:linear-gradient(180deg,#ffffff,var(--bg2),#ffffff);} .card{ background:linear-gradient(180deg,#ffffff,var(--soft)); border:1px solid var(--line); box-shadow:var(--shadow); } .card:hover{border-color:rgba(13,148,136,.34);box-shadow:var(--shadow-lg);} .card h3{color:var(--tx);} .card p{color:var(--mut);} .ic{background:rgba(13,148,136,.10);color:var(--teal);} .ic.p{background:rgba(124,58,237,.10);color:var(--pur);} .ic.k{background:rgba(219,39,119,.10);color:var(--pink);} .ic.a{background:rgba(180,83,9,.10);color:var(--amb);} .num{color:rgba(15,23,42,.07);} /* ------------------------------------------------------ 7. PRODUCT -- */ .p-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} .p-card:hover{border-color:rgba(13,148,136,.34);box-shadow:var(--shadow-lg);} .p-img{ background:linear-gradient(135deg,#eef2f7,#e3e9f1); color:rgba(15,23,42,.38); border-bottom:1px solid var(--line); } .b-av{background:rgba(13,148,136,.10);color:var(--teal);border:1px solid rgba(13,148,136,.34);} .b-fast{background:rgba(180,83,9,.10);color:var(--amb);border:1px solid rgba(180,83,9,.34);} .b-out{background:rgba(219,39,119,.09);color:var(--pink);border:1px solid rgba(219,39,119,.30);} .p-body h4{color:var(--tx);} .p-brand{color:var(--mut);} .price b{color:var(--tx);} .price s{color:#94a3b8;} .bar{background:rgba(15,23,42,.09);} .mini{color:var(--mut);} /* --------------------------------------------------------- 8. MISC -- */ .pill{background:#fff;border:1px solid var(--line);color:var(--ink2);} .cat{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} .cat:hover{border-color:var(--teal);background:rgba(13,148,136,.06);box-shadow:var(--shadow-lg);} .cat span{color:var(--tx);} .brandtile{background:#fff;border:1px solid var(--line);color:var(--ink2);box-shadow:var(--shadow);} .brandtile:hover{color:var(--pur);border-color:var(--pur);background:rgba(124,58,237,.06);} .step{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} .step b.n{color:#fff;} .step h3,.step h4{color:var(--tx);} .step p{color:var(--mut);} .faq{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} .faq .q{color:var(--tx);} .faq .a{color:var(--mut);} .faq.open .q i{color:var(--teal);} .quote{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} .quote p{color:var(--ink2);} .who b,.who strong{color:var(--tx);} .av{color:#fff;} .stars{color:#d97706;} .cta-band{ background:linear-gradient(120deg,rgba(13,148,136,.09),rgba(124,58,237,.09)); border:1px solid var(--line); box-shadow:var(--shadow); } .news input{background:#fff;border:1px solid var(--line);color:var(--tx);} .news input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.14);} /* tables */ th,td{border-bottom:1px solid var(--line);} th{color:var(--teal);} td{color:var(--mut);} td strong{color:var(--tx);} tbody tr:hover td{background:var(--soft);} /* page header / sub nav */ .ph{background:radial-gradient(700px 340px at 50% -10%,rgba(13,148,136,.12),transparent);} .ph h1{color:var(--tx);} .crumb{color:var(--mut);} .crumb a:hover{color:var(--teal);} .sub-nav a{background:#fff;border:1px solid var(--line);color:var(--ink2);} .sub-nav a:hover{border-color:var(--teal);color:var(--teal);} /* forms */ .form input,.form select,.form textarea{ background:#fff;border:1px solid var(--line);color:var(--tx); box-shadow:inset 0 1px 2px rgba(15,23,42,.04); } .form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.14); } label{color:var(--mut);} /* tabs / flow / ring */ .tabs{background:var(--soft2);border:1px solid var(--line);} .tabs button{color:var(--mut);} .tabs button.on{color:#fff;} .flow .node{background:#fff;border:1px solid var(--line);color:var(--tx);box-shadow:var(--shadow);} .flow .node small{color:var(--mut);} .flow .arw{color:var(--teal);} .ring{background:conic-gradient(var(--teal) var(--pct,70%),rgba(15,23,42,.08) 0);} .ring:after{background:#fff;} .ring b{color:var(--tx);} /* inline feedback (.out) */ .out.ok{color:var(--teal);} .out.err{color:#dc2626;} /* ------------------------------------------------------- 9. FOOTER -- */ footer{background:var(--bg2);border-top:1px solid var(--line);} footer h5{color:var(--tx);} footer a{color:var(--mut);} footer a:hover{color:var(--teal);} footer p{color:var(--mut);} .soc a{background:#fff;border:1px solid var(--line);color:var(--mut);} .soc a:hover{color:var(--teal);border-color:var(--teal);} .fbot{border-top:1px solid var(--line);color:var(--mut);} /* ===================================================================== 10. index.html SCOPED COMPONENTS — .bp-* and .le-* --------------------------------------------------------------------- These live in an embedded