/* ========================================================================== BOTSOL landing page — redesign (Commit B). Namespaced .lp-* / --lp-* so it CANNOT clobber botsol.css's form components (.card/.btn/.field/.copyable/.badge), which the embedded order/payment forms still use. Loaded AFTER botsol.css, only from index.html. FE-1: self-hosted Poppins (Latin subset), zero external requests. ========================================================================== */ /* ---- self-hosted fonts (Latin subset; 700 + 300 dropped, unused/decorative) */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fonts/poppins-400.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fonts/poppins-500.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('assets/fonts/poppins-600.woff2') format('woff2')} :root{ --lp-bg-deep:#0E0D22; --lp-bg-mid:#16152F; --lp-panel:rgba(255,255,255,.045); --lp-panel-hi:rgba(255,255,255,.075); --lp-line:rgba(255,255,255,.10); --lp-accent:#3EDCD6; --lp-grad-a:#4ADE80; --lp-grad-b:#35D6D6; --lp-text:#FFFFFF; --lp-muted:#A5A3C6; --lp-dim:#7C7AA0; --lp-warn:#F0B45E; --lp-radius:22px; --lp-maxw:1140px; --lp-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; } /* The landing page goes dark. data-theme="dark" (set on ) makes botsol.css render the embedded forms in its dark theme; this sets the page shell. */ body{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--lp-bg-deep);color:var(--lp-text); font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; } html{scroll-behavior:smooth} /* Visible keyboard focus everywhere (incl. copy buttons + accordion summaries). */ :focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px;border-radius:6px} .lp-wrap{max-width:var(--lp-maxw);margin:0 auto;padding:0 28px} .lp-shell a,.lp-section a,.lp-footer a{color:inherit;text-decoration:none} /* Reset only the flow elements the landing components rely on — scoped to lp-* so it never touches the botsol form markup nested in #buy / #builder-pro. */ .lp-nav,.lp-hero,.lp-facts,.lp-shot,.lp-section,.lp-footer, .lp-h1,.lp-h2,.lp-sub,.lp-lede, .lp-card h3,.lp-card p,.lp-step h3,.lp-step p,.lp-fact p,.lp-fit-col h3, .lp-callout h3,.lp-callout p,.lp-control h3,.lp-buy-item h3,.lp-buy-item p, .lp-costs h3,.lp-builder-intro p{margin:0} /* ---- shell (nav + hero + facts + shot share the gradient) ---- */ .lp-shell{position:relative;overflow:hidden; background: radial-gradient(900px 520px at 80% 6%, rgba(62,220,214,.15), transparent 60%), radial-gradient(760px 520px at 10% 34%, rgba(126,88,214,.20), transparent 62%), linear-gradient(170deg,#1D1B40 0%,#16152F 55%,#111029 100%); } .lp-shell::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:140px; background:linear-gradient(to bottom,transparent,var(--lp-bg-deep));pointer-events:none} /* ---- nav ---- */ .lp-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:26px 0} .lp-brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:.22em;font-size:15px} .lp-mark{width:26px;height:26px;flex:none;position:relative;display:inline-block} .lp-mark span{position:absolute;bottom:0;width:5px;border-radius:2px;background:linear-gradient(180deg,var(--lp-grad-a),var(--lp-grad-b))} .lp-mark span:nth-child(1){left:0;height:11px} .lp-mark span:nth-child(2){left:7px;height:19px} .lp-mark span:nth-child(3){left:14px;height:14px} .lp-mark span:nth-child(4){left:21px;height:26px} .lp-nav-links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--lp-muted)} .lp-nav-links a:hover{color:#fff} .lp-pill{border:1px solid rgba(255,255,255,.30);padding:9px 26px;border-radius:999px;font-size:14px;transition:border-color .18s,background .18s} .lp-pill:hover{border-color:var(--lp-accent);background:rgba(62,220,214,.10)} /* ---- hero ---- */ .lp-hero{position:relative;z-index:4;padding:48px 0 40px} .lp-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .lp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-muted);margin-bottom:24px} .lp-dot{width:7px;height:7px;border-radius:50%;background:var(--lp-grad-a);box-shadow:0 0 10px var(--lp-grad-a);animation:lp-pulse 2.4s ease-in-out infinite} @keyframes lp-pulse{0%,100%{opacity:1}50%{opacity:.35}} .lp-h1{font-size:50px;line-height:1.13;font-weight:600;letter-spacing:-.6px} .lp-h1 .lp-accent{color:var(--lp-accent)} .lp-sub{color:var(--lp-muted);font-size:16.5px;max-width:480px;margin:22px 0 34px} .lp-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .lp-btn{display:inline-block;background:linear-gradient(95deg,var(--lp-grad-a),var(--lp-grad-b));color:#0C1024;font-weight:600;font-size:15px;padding:14px 40px;border-radius:999px;transition:transform .18s,box-shadow .18s} .lp-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(62,220,214,.28)} .lp-btn-text{color:var(--lp-muted);font-size:15px} .lp-btn-text:hover{color:#fff} /* ---- hero robot (SVG added in Commit C) ---- */ .lp-hero-art{position:relative;display:flex;justify-content:center} .lp-hero-art svg{width:100%;max-width:460px;height:auto;overflow:visible} .bot-float{animation:lp-bob 6s ease-in-out infinite;transform-origin:center} .bot-card{animation:lp-bob 6s ease-in-out infinite;animation-delay:-2.2s;transform-origin:center} .bot-eye{animation:lp-blink 6.5s steps(1,end) infinite} @keyframes lp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes lp-blink{0%,94%,100%{opacity:1}96%,98%{opacity:.15}} /* ---- facts ---- */ .lp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:58px 0 0} .lp-fact{background:var(--lp-panel);border:1px solid var(--lp-line);border-radius:18px;padding:24px 26px} .lp-fact .lp-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-dim);margin-bottom:8px} .lp-fact .lp-v{font-size:22px;font-weight:600;margin-bottom:6px} .lp-fact .lp-v.num{font-family:var(--lp-mono)} .lp-fact p{font-size:13.5px;color:var(--lp-muted);line-height:1.6} /* ---- dashboard shot ---- */ .lp-shot{position:relative;z-index:4;padding:56px 0 110px} .lp-shot-frame{border:1px solid var(--lp-line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.03);box-shadow:0 34px 90px rgba(0,0,0,.5);margin:0} .lp-shot-frame img{display:block;width:100%;height:auto} .lp-shot-cite{display:block;margin:20px auto 0;max-width:720px;text-align:center;font-style:normal;font-size:13.5px;color:var(--lp-dim);line-height:1.8} /* ---- sections ---- */ .lp-section{padding:96px 0} .lp-section.lp-tight{padding-top:0} .lp-h2{font-size:36px;font-weight:600;letter-spacing:-.4px;line-height:1.2} .lp-lede{color:var(--lp-muted);max-width:640px;margin-top:14px;font-size:15.5px} /* ---- folder cards ---- */ .lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px} .lp-cards .lp-card{position:relative;background:var(--lp-panel);border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:32px 28px 30px;margin-top:16px;transition:transform .2s,border-color .2s,background .2s} .lp-cards .lp-card::before{content:"";position:absolute;top:-16px;left:-1px;width:74px;height:17px;background:var(--lp-panel);border:1px solid var(--lp-line);border-bottom:none;border-radius:12px 12px 0 0} .lp-cards .lp-card:hover{transform:translateY(-4px);border-color:rgba(62,220,214,.42);background:var(--lp-panel-hi)} .lp-card h3{font-size:19px;font-weight:600;margin-bottom:12px} .lp-card p{color:var(--lp-muted);font-size:14.5px} .lp-card code{font-family:var(--lp-mono);font-size:13px;color:var(--lp-accent)} /* ---- steps ---- */ .lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px} .lp-step{border-top:1px solid var(--lp-line);padding-top:22px} .lp-step .lp-n{font-family:var(--lp-mono);font-size:12px;color:var(--lp-accent);letter-spacing:.1em;margin-bottom:14px} .lp-step h3{font-size:18px;font-weight:600;margin-bottom:10px} .lp-step p{color:var(--lp-muted);font-size:14px} .lp-step-key{border-top-color:var(--lp-accent)} .lp-callout{margin-top:52px;border:1px solid var(--lp-line);border-radius:var(--lp-radius); background:radial-gradient(600px 240px at 12% 0%, rgba(62,220,214,.10), transparent 60%), rgba(255,255,255,.03); padding:38px 40px} .lp-callout h3{font-size:21px;font-weight:600;margin-bottom:12px} .lp-callout p{color:var(--lp-muted);font-size:15px;max-width:760px} .lp-control{margin-top:44px} .lp-control h3{font-size:19px;font-weight:600;margin-bottom:20px} .lp-control ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 34px;margin:0;padding:0} .lp-control li{color:var(--lp-muted);font-size:14.5px;padding-left:26px;position:relative} .lp-control li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;border-radius:2px;background:var(--lp-grad-a)} /* ---- pricing ---- */ .lp-price-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;margin-top:52px;align-items:start} .lp-price-box{border:1px solid rgba(62,220,214,.34);border-radius:var(--lp-radius);padding:38px 34px;background:radial-gradient(500px 300px at 50% 0%, rgba(62,220,214,.12), transparent 65%), rgba(255,255,255,.035)} .lp-price-box .lp-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-dim);margin-bottom:12px} /* #price-block is filled by storefront.js: .stat-value (now), .price-was (struck), .stat-meta (discount-ends), plus the optional .lp-promo pill (DISCOUNT_LABEL). */ .lp-price-box .stat-value{font-size:44px;font-weight:600;line-height:1.1;font-family:var(--lp-mono)} .lp-price-box .price-was{font-size:18px;color:var(--lp-dim);text-decoration:line-through;font-family:var(--lp-mono);margin-bottom:4px} .lp-price-box .stat-meta{font-size:12.5px;color:var(--lp-warn);margin-top:10px} .lp-promo{display:inline-block;margin-top:12px;padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:#0C1024;background:linear-gradient(95deg,var(--lp-grad-a),var(--lp-grad-b))} .lp-price-term{color:var(--lp-muted);font-size:14px;margin:18px 0 26px} .lp-paid{font-size:12.5px;color:var(--lp-dim);margin-top:16px} .lp-costs{border:1px solid var(--lp-line);border-radius:var(--lp-radius);overflow:hidden;background:rgba(255,255,255,.025)} .lp-costs h3{font-size:17px;font-weight:600;padding:24px 28px 18px} .lp-costs table{width:100%;border-collapse:collapse} .lp-costs th,.lp-costs td{text-align:left;padding:15px 28px;font-size:14px;border-top:1px solid rgba(255,255,255,.07)} .lp-costs th{font-weight:400;color:#fff} .lp-costs td{color:var(--lp-muted);text-align:right} .lp-costs em{color:var(--lp-warn);font-style:normal} .lp-costs-foot{padding:20px 28px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;color:var(--lp-dim);line-height:1.8} /* ---- buy summary cards + warning ---- */ .lp-buy{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px} .lp-buy-item{background:var(--lp-panel);border:1px solid var(--lp-line);border-radius:18px;padding:28px 26px} .lp-buy-item .lp-n{font-family:var(--lp-mono);font-size:12px;color:var(--lp-accent);margin-bottom:14px} .lp-buy-item h3{font-size:17px;font-weight:600;margin-bottom:10px} .lp-buy-item p{color:var(--lp-muted);font-size:14px} .lp-warnbox{margin-top:28px;border:1px solid rgba(240,180,94,.32);background:rgba(240,180,94,.06);border-radius:16px;padding:24px 28px} .lp-warnbox strong{display:block;margin-bottom:8px;font-size:15px;font-weight:600} .lp-warnbox p{color:var(--lp-muted);font-size:14px} .lp-warnbox a{color:var(--lp-accent)} /* Space above the (botsol-styled) order/payment forms embedded in #buy. */ .lp-form-shell{margin-top:40px} /* ---- fit ---- */ .lp-fit{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px} .lp-fit-col{border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:32px 30px;background:rgba(255,255,255,.03)} .lp-fit-col.lp-yes{border-color:rgba(74,222,128,.30)} .lp-fit-col.lp-no{border-color:rgba(255,255,255,.14)} .lp-fit-col h3{font-size:19px;font-weight:600;margin-bottom:20px} .lp-fit-col ul{list-style:none;display:grid;gap:13px;margin:0;padding:0} .lp-fit-col li{color:var(--lp-muted);font-size:14.5px;padding-left:28px;position:relative;line-height:1.6} .lp-fit-col.lp-yes li::before{content:"+";position:absolute;left:0;top:0;color:var(--lp-grad-a);font-weight:600} .lp-fit-col.lp-no li::before{content:"−";position:absolute;left:0;top:0;color:var(--lp-dim);font-weight:600} .lp-fit-col code{font-family:var(--lp-mono);font-size:13px;color:var(--lp-accent)} .lp-risk{margin-top:30px;border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:32px 34px;background:rgba(255,255,255,.025)} .lp-risk strong{display:block;font-size:16px;font-weight:600;margin-bottom:10px} .lp-risk p{color:var(--lp-muted);font-size:14.5px;max-width:840px;margin:0} /* ---- builder pro ---- */ .lp-builder{border:1px solid var(--lp-line);border-radius:26px;padding:44px 42px; background:radial-gradient(600px 300px at 85% 0%, rgba(126,88,214,.16), transparent 65%), rgba(255,255,255,.03); display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:52px} .lp-builder-intro p{color:var(--lp-muted);margin-top:14px;font-size:15px} .lp-builder-forms{display:grid;gap:18px} /* ---- faq ---- */ .lp-faq{margin-top:48px;border-top:1px solid var(--lp-line)} .lp-faq details{border-bottom:1px solid var(--lp-line)} .lp-faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font-size:16.5px;font-weight:500;position:relative;transition:color .18s} .lp-faq summary::-webkit-details-marker{display:none} .lp-faq summary::after{content:"+";position:absolute;right:8px;top:22px;font-size:20px;color:var(--lp-accent);font-weight:400;transition:transform .2s} .lp-faq details[open] summary::after{content:"−"} .lp-faq summary:hover{color:var(--lp-accent)} .lp-faq details p{color:var(--lp-muted);font-size:14.5px;padding:0 60px 26px 0;max-width:880px;margin:0} .lp-faq details p a{color:var(--lp-accent)} /* ---- footer ---- */ .lp-footer{background:#0B0A1C;padding:60px 0 28px;margin-top:96px} .lp-footer-inner{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start} .lp-footer-inner p{color:var(--lp-dim);font-size:13.5px;max-width:460px;margin-top:14px;line-height:1.8} .lp-f-links{display:flex;gap:28px;flex-wrap:wrap;font-size:13.5px;color:var(--lp-dim)} .lp-f-links a:hover{color:var(--lp-accent)} .lp-f-bottom{border-top:1px solid rgba(255,255,255,.07);margin-top:44px;padding-top:22px;font-size:12.5px;color:var(--lp-dim)} /* ---- responsive ---- */ @media (max-width:940px){ .lp-nav-links{display:none} .lp-h1{font-size:38px} .lp-h2{font-size:28px} .lp-hero-grid{grid-template-columns:1fr;gap:16px} .lp-hero-art{order:-1} .lp-hero-art svg{max-width:320px} .lp-facts,.lp-cards,.lp-steps,.lp-buy,.lp-fit,.lp-price-grid,.lp-builder{grid-template-columns:1fr} .lp-control ul{grid-template-columns:1fr} .lp-section{padding:70px 0} .lp-callout,.lp-risk,.lp-builder{padding:30px 26px} } @media (max-width:560px){ .lp-h1{font-size:31px} .lp-price-box .stat-value{font-size:36px} .lp-costs th,.lp-costs td{padding:13px 18px;font-size:13px} } /* ---- reduced motion: kill all landing motion ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .lp-dot,.bot-float,.bot-card,.bot-eye{animation:none!important} .lp-btn,.lp-pill,.lp-cards .lp-card,.lp-faq summary,.lp-btn-text,.lp-nav-links a{transition:none!important} .lp-btn:hover,.lp-cards .lp-card:hover{transform:none!important} }