71 lines
11 KiB
CSS
71 lines
11 KiB
CSS
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,PingFang SC,Helvetica,Arial,sans-serif;color:#e6f2ff;background:#0b1220}:root{--bg-start:#07121f;--bg-end:#0d2137;--primary:#1fb6ff;--primary-2:#00c9a7;--accent:#22d3ee;--text:#e6f2ff;--muted:#9fb7c9;--card-bg:#0f1a2b;--card-border:#16324a;--divider:#133047}.container{max-width:1140px;margin:0 auto;padding:0 20px}.nav{position:sticky;top:0;background:rgba(7,18,31,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--divider)}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:36px;height:36px;border-radius:8px;object-fit:contain}.brand-name{font-weight:700;letter-spacing:.5px;color:var(--text)}.nav a{margin-left:16px;color:var(--muted);text-decoration:none}.nav a:hover{color:var(--text)}.btn{display:inline-block;padding:12px 18px;min-height:44px;border-radius:8px;text-decoration:none;font-weight:600}.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#04121f}.btn-secondary{background:#0c2a43;color:var(--text);border:1px solid var(--card-border)}.btn-outline{border:1px solid var(--card-border);color:var(--text);background:transparent}.hero{position:relative;overflow:hidden;padding:96px 0 56px;background:linear-gradient(180deg, var(--bg-start), var(--bg-end))}.hero::before{content:"";position:absolute;inset:-20%;background:radial-gradient(1000px 600px at 20% -10%, rgba(31,182,255,.20), rgba(0,201,167,.12) 40%, rgba(11,18,32,0) 70%), conic-gradient(from 180deg at 70% 10%, rgba(31,182,255,.10), rgba(0,201,167,.08), rgba(31,182,255,.10));filter:blur(40px);animation:heroGlow 12s ease-in-out infinite alternate}.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);background-size:24px 24px, 24px 24px;mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));pointer-events:none}.hero h1{font-size:56px;line-height:1.1;margin:0 0 14px;color:var(--text)}.hero .sub{color:var(--muted);max-width:760px;font-size:18px}.cta{margin:22px 0;display:flex;gap:12px;flex-wrap:wrap}.entry-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.entry-ctas .pill{padding:8px 12px;border-radius:999px;border:1px solid var(--card-border);background:rgba(13,33,55,.6);color:#cfe7ff;text-decoration:none;font-size:13px}.entry-ctas .pill:hover{border-color:#245279}.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.badge{border:1px solid var(--card-border);border-radius:12px;padding:14px;background:linear-gradient(180deg,#0f1a2b,#0b1829);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,0.03) inset}.trusted{margin-top:28px;opacity:.9}.trusted .trusted-logos{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.trusted .trusted-logos img{height:28px;opacity:.85;filter:grayscale(100%)}@keyframes heroGlow{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-20px) scale(1.05)}}.section{padding:48px 0;background:linear-gradient(180deg, var(--bg-start), var(--bg-end))}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.card{padding:16px;border:1px solid var(--card-border);border-radius:12px;background:var(--card-bg);box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .2s ease, box-shadow .2s ease}.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)}.stats .stat-card{display:flex;flex-direction:column;gap:6px}.stats .num{font-size:32px;font-weight:800;color:#e6f7ff}.stats .label{color:#cfe7ff}
|
|
|
|
/* Testimonials (dark theme colors) */
|
|
.testimonials{position:relative}
|
|
.testimonials::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 260px at 25% 12%, rgba(31,182,255,.12), rgba(0,201,167,0) 70%);opacity:.9;pointer-events:none}
|
|
.testimonials .overline{display:inline-flex;align-items:center;gap:8px;color:#9fb7c9;margin-bottom:16px;font-size:12px;background:rgba(115,85,255,.08);border:1px solid rgba(115,85,255,.18);padding:6px 10px;border-radius:999px}
|
|
.testimonials h2{color:#e6f2ff;font-size:30px;font-weight:800;text-align:center;margin:0 0 8px}
|
|
.testimonials .subtitle{color:#9fb7c9;text-align:center;margin:0 0 24px}
|
|
.testimonials .card{background:#0f1a2b;border:1px solid #16324a;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.25)}
|
|
.testimonials .card .stars{color:#1fb6ff;margin-bottom:8px}
|
|
.testimonials .card .quote{color:#cfe7ff}
|
|
.testimonials .card .meta{display:flex;flex-direction:column;margin-top:12px;color:#9fb7c9}
|
|
.testimonials .card .label{display:inline-flex;align-items:center;border:1px solid #2b3f5a;background:rgba(67,56,202,.12);color:#c9b8ff;padding:4px 10px;border-radius:999px;font-size:12px;width:max-content}
|
|
.card h3{color:var(--text)}.card p{color:var(--muted)}.cases{padding:40px 0;background:linear-gradient(180deg, var(--bg-end), var(--bg-start))}.case-card{border:1px solid var(--card-border);border-radius:12px;padding:16px;background:var(--card-bg);box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .2s ease, box-shadow .2s ease}.case-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)}.case-thumb{height:140px;border-radius:8px;margin-bottom:10px;border:1px solid var(--card-border);overflow:hidden}.case-thumb img{width:100%;height:100%;object-fit:cover}.blog-thumb{height:120px;border-radius:8px;margin-bottom:10px;border:1px solid var(--card-border);overflow:hidden}.blog-thumb img{width:100%;height:100%;object-fit:cover}.avatar{width:56px;height:56px;border-radius:50%;border:1px solid var(--card-border);background:#0a1929;overflow:hidden;margin-bottom:10px}.avatar img{width:100%;height:100%;object-fit:cover}.flow{border:1px solid var(--card-border);border-radius:12px;overflow:hidden}.flow img{width:100%;display:block}.cta-block{padding:28px;border:1px solid var(--card-border);background:#0d2137;border-radius:12px;text-align:center}
|
|
/* Pro CTA */
|
|
.cta-pro{position:relative;}
|
|
.cta-pro::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 300px at 30% 10%, rgba(31,182,255,.18), rgba(0,201,167,.0) 60%), radial-gradient(600px 400px at 80% 60%, rgba(31,182,255,.12), rgba(0,201,167,.0) 70%);opacity:.9;pointer-events:none}
|
|
.cta-pro .card-big{position:relative;padding:56px 56px;border:0;background:transparent;border-radius:20px;box-shadow:none;max-width:1160px;margin:0 auto;text-align:center}
|
|
.cta-pro .overline{display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em;color:#722ED1;margin-bottom:16px;font-size:13px;background:#F3EBFF;border:1px solid #e8dbff;padding:6px 10px;border-radius:999px}
|
|
.cta-pro h2{margin:0 0 20px;color:#333;font-size:34px;line-height:1.35;font-weight:800}
|
|
.cta-pro .desc{color:#666;margin:0 0 24px;line-height:1.8}
|
|
.cta-pro .feature-list{display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:20px 36px;margin:24px 0 32px;align-items:start;justify-items:center}
|
|
.cta-pro .feature{display:inline-flex;align-items:center;gap:10px;color:#cfe7ff;font-size:16px;line-height:1.8}
|
|
.cta-pro .actions{display:flex;gap:16px 20px;flex-wrap:wrap;margin-top:16px;justify-content:center}
|
|
.cta-pro .btn{min-height:48px;padding:14px 22px}
|
|
.cta-pro .btn-primary{background:#409EFF;color:#fff;border:1px solid #409EFF}
|
|
.cta-pro .btn-primary:hover{background:#2f7fd6;border-color:#2f7fd6}
|
|
.cta-pro .btn-secondary{background:#fff;color:#333;border:1px solid #e6e8ef}
|
|
.cta-pro .btn-secondary:hover{background:#f7f9fc}
|
|
.cta-pro .trust{margin-top:22px;color:#666;border-top:1px solid #e6e8ef;padding-top:16px}
|
|
@media(max-width:900px){.cta-pro .card-big{padding:32px 24px} .cta-pro .feature-list{grid-template-columns:1fr;gap:14px 16px;margin:16px 0 20px} .cta-pro h2{font-size:24px;line-height:1.4}}.footer{padding:40px 0;border-top:1px solid var(--divider);background:linear-gradient(180deg,var(--bg-end),var(--bg-start));color:var(--muted)}.footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}.footer h4{margin:0 0 10px;color:#e6f2ff}.footer a{color:#cfe7ff;text-decoration:none;display:block;margin:6px 0}.footer a:hover{color:#ffffff}.footer .brand-desc{color:#9fb7c9}.footer .contact p{margin:6px 0}.footer .bottom{border-top:1px solid var(--divider);margin-top:20px;padding-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.footer .policy{display:flex;gap:12px;flex-wrap:wrap}.footer .icp{color:#9fb7c9}@media(max-width:900px){.footer .grid{grid-template-columns:1fr}.footer .bottom{flex-direction:column;align-items:flex-start}}@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr}.badges{grid-template-columns:repeat(2,1fr)}}
|
|
|
|
/* Section head (shared title style like CTA) */
|
|
.section-head{display:block;text-align:center;margin:0 0 24px}
|
|
.section-head .overline{display:inline-flex;align-items:center;gap:8px;color:#9fb7c9;font-size:12px;background:rgba(115,85,255,.08);border:1px solid rgba(115,85,255,.18);padding:6px 10px;border-radius:999px;margin-bottom:12px}
|
|
.section-head h2{color:#e6f2ff;font-size:30px;line-height:1.35;font-weight:800;margin:0 0 10px}
|
|
.section-head .subhead{color:#9fb7c9;margin:0 0 16px}
|
|
|
|
/* Light section (2-9 screens) */
|
|
.section-lite{background:#F5F7FA;color:#333}
|
|
.section-lite h2{color:#333;font-weight:800;font-size:26px;text-align:center;margin:0 0 8px}
|
|
.section-lite .subhead{color:#666;font-size:15px;text-align:center;margin:0 0 24px}
|
|
.section-lite .grid-2,.section-lite .grid-3,.section-lite .grid-4{gap:32px}
|
|
.section-lite .card{background:#FFF;border:1px solid #e6e8ef;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
|
|
.section-lite .card h3{color:#333;font-size:20px;font-weight:700;margin:0 0 6px}
|
|
.section-lite .card p{color:#666;font-size:14px;line-height:1.6}
|
|
|
|
/* Buttons for light sections */
|
|
.btn-blue{background:#409EFF;color:#fff;border-radius:4px;border:1px solid #409EFF}
|
|
.btn-blue:hover{background:#2f7fd6;border-color:#2f7fd6}
|
|
.btn-purple{background:#722ED1;color:#fff;border-radius:4px;border:1px solid #722ED1}
|
|
.btn-purple:hover{background:#5b23a8;border-color:#5b23a8}
|
|
.btn-outline-blue{background:#fff;color:#409EFF;border:1px solid #409EFF;border-radius:4px}
|
|
.btn-outline-blue:hover{background:#ECF5FF}
|
|
|
|
/* Case cards mapping to light style */
|
|
.section-lite .case-card{background:#fff;border:1px solid #e6e8ef;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
|
|
.section-lite .case-card h3{color:#333}
|
|
.section-lite .case-card .sub{color:#666}
|
|
.section-lite .case-thumb{border:1px solid #eef1f5;background:#fafbff}
|
|
|
|
/* Blog cards */
|
|
.section-lite .blog-thumb{border:1px solid #eef1f5;background:#fafbff}
|
|
|
|
/* Testimonials */
|
|
.section-lite .testimonial-card .stars{color:#409EFF;margin-bottom:8px}
|
|
.section-lite .testimonial-card .customer{display:flex;gap:8px;align-items:center;margin-top:8px}
|
|
.section-lite .testimonial-card .name{color:#333;font-weight:600}
|
|
.section-lite .testimonial-card .tag{background:#F3EBFF;color:#722ED1;border-radius:999px;padding:2px 8px;font-size:12px}
|
|
|
|
/* CTA Pro ad |