67 lines
3.4 KiB
CSS
67 lines
3.4 KiB
CSS
:root{
|
|
--bg:#07060a;
|
|
--card:#0f0e14;
|
|
--neon1: #ff2d95; /* magenta */
|
|
--neon2: #00f0ff; /* cyan */
|
|
--glass: rgba(255,255,255,0.04);
|
|
--text:#e6e6ea;
|
|
--muted:#a8a8b3;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body{
|
|
margin:0;
|
|
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
|
|
background:radial-gradient(1200px 600px at 10% 10%, rgba(0,240,255,0.04), transparent),
|
|
radial-gradient(900px 500px at 90% 90%, rgba(255,45,149,0.04), transparent),
|
|
var(--bg);
|
|
color:var(--text);
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
}
|
|
.page{max-width:1100px;margin:0 auto;padding:32px}
|
|
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
|
|
.logo{font-weight:800;letter-spacing:0.6px;color:var(--text);font-size:20px}
|
|
.logo span{color:var(--neon1);text-shadow:0 0 8px rgba(255,45,149,0.6)}
|
|
nav a{color:var(--muted);margin-left:20px;text-decoration:none}
|
|
nav a.cta{padding:8px 12px;border-radius:8px;background:linear-gradient(90deg,var(--neon1),var(--neon2));color:#05060a;font-weight:700}
|
|
|
|
.hero{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:center;padding:40px 0}
|
|
.hero-content h1{font-size:40px;margin:0 0 12px;color:linear-gradient(var(--neon1),var(--neon2))}
|
|
.hero-content h1{font-weight:800;line-height:1.02;text-shadow:0 4px 30px rgba(0,0,0,0.6)}
|
|
.lead{color:var(--muted);margin:0 0 20px}
|
|
.hero-actions{display:flex;gap:12px}
|
|
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;color:var(--text);font-weight:600}
|
|
.btn.primary{background:linear-gradient(90deg,var(--neon1),var(--neon2));box-shadow:0 8px 30px rgba(0,0,0,0.6),0 0 20px rgba(0,240,255,0.06);color:#05060a}
|
|
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
|
|
.btn.big{padding:14px 26px;font-size:18px;border-radius:14px}
|
|
|
|
.hero-visual{display:flex;align-items:center;justify-content:center}
|
|
.device-mock{width:260px;height:520px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(0,0,0,0.08));box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 60px rgba(0,240,255,0.06) inset;border:1px solid rgba(255,255,255,0.03);position:relative}
|
|
.device-mock::after{content:'';position:absolute;inset:18px;border-radius:18px;background:conic-gradient(from 180deg at 50% 50%, rgba(0,240,255,0.06), rgba(255,45,149,0.06));backdrop-filter:blur(4px)}
|
|
|
|
.features{padding:40px 0}
|
|
.features h2{margin-top:0}
|
|
.cards{display:flex;gap:16px}
|
|
.card{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:18px;border-radius:12px;flex:1;border:1px solid rgba(255,255,255,0.02)}
|
|
.card h3{margin:0 0 8px;color:var(--neon2);text-shadow:0 0 12px rgba(0,240,255,0.08)}
|
|
.card p{margin:0;color:var(--muted)}
|
|
|
|
.how{padding:30px 0}
|
|
.how ol{color:var(--muted);margin:10px 0 0;padding-left:18px}
|
|
|
|
.cta-panel{margin:48px 0;padding:36px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(0,0,0,0.04));display:flex;align-items:center;justify-content:center}
|
|
.cta-inner{text-align:center}
|
|
.cta-inner h2{margin:0 0 8px;color:var(--neon1);text-shadow:0 0 18px rgba(255,45,149,0.12)}
|
|
.cta-inner p{color:var(--muted);margin:0 0 18px}
|
|
|
|
.site-footer{text-align:center;padding:28px 0;color:var(--muted);font-size:13px}
|
|
|
|
@media (max-width:900px){
|
|
.page{padding:20px}
|
|
.hero{grid-template-columns:1fr;gap:20px}
|
|
.hero-visual{order:2}
|
|
.cards{flex-direction:column}
|
|
nav a{margin-left:12px}
|
|
}
|