157 lines
11 KiB
CSS
157 lines
11 KiB
CSS
/* Premium Dark/Purple Design System */
|
|
:root{
|
|
--bg-900:#0F1220; --bg-800:#13162B;
|
|
--surface-700:#1A1F3A; --surface-600:#20264A;
|
|
--text-100:#F5F7FF; --text-300:#BDC3EA; --text-500:#9AA1D2;
|
|
--primary-400:#7C5CFF; --primary-500:#6A4DFF; --primary-600:#5A3FFF;
|
|
--accent-emerald:#3CE0A0; --warning-amber:#FFC857; --error-rose:#FF5C8A;
|
|
--glass:rgba(255,255,255,0.06); --shadow:0 10px 30px rgba(0,0,0,0.35);
|
|
--radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
|
|
--maxw:1200px; --px:clamp(16px,3.6vw,28px);
|
|
}
|
|
|
|
/* Base */
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%; overflow-x:hidden}
|
|
html{scroll-behavior:smooth}
|
|
body{margin:0; background:var(--bg-900); color:var(--text-100); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6}
|
|
a{color:inherit; text-decoration:none}
|
|
a:hover{text-decoration:underline; text-underline-offset:3px}
|
|
img{display:block; max-width:100%; height:auto}
|
|
|
|
/* Subtle noise/texture */
|
|
.site-bg{position:fixed; inset:0; pointer-events:none; z-index:-1;
|
|
background-image:radial-gradient(rgba(255,255,255,.03), transparent 40%),
|
|
repeating-linear-gradient(90deg, rgba(255,255,255,.01), rgba(255,255,255,.01) 1px, transparent 1px, transparent 2px);
|
|
mix-blend-mode:soft-light; opacity:.7}
|
|
|
|
/* Focus */
|
|
:focus-visible{outline:3px solid var(--primary-500); outline-offset:2px; border-radius:10px}
|
|
|
|
/* Premium One-Page Styles */
|
|
.onepage-container{width:min(100%, var(--maxw)); margin-inline:auto; padding-inline:var(--px)}
|
|
.onepage-section{padding-block:clamp(88px, 10vw, 120px); border-top:1px solid rgba(255,255,255,.06)}
|
|
.onepage-section:first-child{border-top:none}
|
|
|
|
/* Navigation */
|
|
.onepage-nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(8px) saturate(130%);
|
|
background:linear-gradient(180deg, rgba(19,22,43,.7), rgba(19,22,43,.4)); border-bottom:1px solid rgba(255,255,255,.06)}
|
|
.onepage-nav-row{display:flex; align-items:center; justify-content:space-between; height:68px; width:min(100%, var(--maxw)); margin-inline:auto; padding-inline:var(--px)}
|
|
.onepage-brand{display:flex; align-items:center; gap:12px; font-family:Poppins,system-ui,sans-serif; font-weight:800; letter-spacing:.02em}
|
|
.onepage-brand-logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, var(--primary-400), var(--primary-600)); box-shadow:0 10px 24px rgba(122,92,255,.35); display:flex; align-items:center; justify-content:center; color:white; font-weight:bold}
|
|
.onepage-nav-links{display:none; gap:18px}
|
|
.onepage-nav-cta{display:none}
|
|
@media(min-width:920px){ .onepage-nav-links{display:flex} .onepage-nav-cta{display:flex; align-items:center; gap:10px} }
|
|
.onepage-link{position:relative; padding:8px 10px; border-radius:10px; color:var(--text-300); transition:color 0.2s ease}
|
|
.onepage-link:hover{color:var(--text-100); text-decoration:none}
|
|
.onepage-link.active{color:var(--primary-400)}
|
|
.onepage-link.active::after{content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px; background:var(--primary-500); border-radius:var(--radius-pill)}
|
|
|
|
/* Buttons */
|
|
.onepage-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-pill); padding:12px 18px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; text-decoration:none}
|
|
.onepage-btn:hover{text-decoration:none}
|
|
.onepage-btn--primary{background:linear-gradient(90deg, var(--primary-500), var(--primary-400)); color:#0b0d1a; box-shadow:0 0 0 6px rgba(122,92,255,0.12)}
|
|
.onepage-btn--primary:hover{transform:translateY(-1px); box-shadow:0 0 0 6px rgba(122,92,255,0.18)}
|
|
.onepage-btn--ghost{background:transparent; color:var(--text-100); border:1px solid rgba(255,255,255,.2)}
|
|
.onepage-btn--ghost:hover{background:rgba(255,255,255,.1)}
|
|
|
|
/* Hero */
|
|
.onepage-hero{position:relative; padding-block:clamp(88px, 12vw, 140px); isolation:isolate;}
|
|
.onepage-hero .spotlight{position:absolute; inset:-10% -10% auto -10%; height:66vh; z-index:-1;
|
|
background:radial-gradient(900px 460px at 50% 0%, rgba(122,92,255,.25), transparent 60%),
|
|
radial-gradient(780px 400px at 10% 20%, rgba(122,92,255,.12), transparent 60%),
|
|
linear-gradient(180deg, var(--bg-800), var(--bg-900))}
|
|
.onepage-hero-grid{display:grid; gap:clamp(20px, 4vw, 36px)}
|
|
@media(min-width:980px){ .onepage-hero-grid{grid-template-columns: 1.1fr .9fr; align-items:center} }
|
|
|
|
/* Typography */
|
|
.onepage-eyebrow{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-pill); color:var(--text-500); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em}
|
|
.onepage-h1{font-family:Poppins,system-ui,sans-serif; font-weight:800; font-size:clamp(2.8rem, 5vw + 1rem, 4rem); line-height:1.06; margin:10px 0; color:var(--text-100)}
|
|
.onepage-h2{font-family:Poppins,system-ui,sans-serif; font-weight:800; font-size:clamp(1.8rem, 2.2vw + .8rem, 2.4rem); margin:0 0 16px; color:var(--text-100)}
|
|
.onepage-h3{font-family:Poppins,system-ui,sans-serif; font-weight:700; font-size:clamp(1.2rem, 1.5vw + .5rem, 1.5rem); margin:0 0 12px; color:var(--text-100)}
|
|
.onepage-lead{max-width:60ch; color:var(--text-300); font-size:1.125rem; line-height:1.7}
|
|
.onepage-text{color:var(--text-300); line-height:1.6}
|
|
|
|
/* Cards */
|
|
.onepage-card{background:var(--glass); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); border-radius:var(--radius-lg); padding:clamp(18px, 2.6vw, 26px)}
|
|
.onepage-card-hover{transition:transform 0.2s ease, box-shadow 0.2s ease}
|
|
.onepage-card-hover:hover{transform:translateY(-2px); box-shadow:0 20px 40px rgba(0,0,0,0.4)}
|
|
|
|
/* Media */
|
|
.onepage-media{position:relative; aspect-ratio:16/9; border-radius:var(--radius-xl); overflow:hidden; background:var(--surface-700);
|
|
border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
|
|
.onepage-media img{width:100%; height:100%; object-fit:cover}
|
|
.onepage-play-overlay{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)); cursor:pointer; transition:background 0.2s ease}
|
|
.onepage-play-overlay:hover{background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.4))}
|
|
.onepage-play-btn{display:inline-flex; align-items:center; gap:12px; background:linear-gradient(90deg, var(--primary-500), var(--primary-400)); color:#080a16; font-weight:800; border-radius:var(--radius-pill); padding:12px 18px; box-shadow:0 0 0 6px rgba(122,92,255,.15)}
|
|
|
|
/* Badges & Chips */
|
|
.onepage-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text-300); font-size:0.75rem; font-weight:500}
|
|
.onepage-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text-300); font-size:0.75rem; font-weight:500}
|
|
|
|
/* Grid */
|
|
.onepage-grid{display:grid; gap:clamp(16px, 2.4vw, 24px)}
|
|
.onepage-grid--2{grid-template-columns:1fr}
|
|
.onepage-grid--3{grid-template-columns:1fr}
|
|
.onepage-grid--4{grid-template-columns:repeat(2, 1fr)}
|
|
@media(min-width:768px){ .onepage-grid--2{grid-template-columns:repeat(2, 1fr)} }
|
|
@media(min-width:900px){ .onepage-grid--3{grid-template-columns:repeat(3, 1fr)} .onepage-grid--4{grid-template-columns:repeat(4, 1fr)} }
|
|
|
|
/* Forms */
|
|
.onepage-form-group{display:flex; flex-direction:column; gap:6px}
|
|
.onepage-label{color:var(--text-300); font-size:.95rem; font-weight:500}
|
|
.onepage-input, .onepage-select, .onepage-textarea{width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#151935; color:var(--text-100); padding:12px 12px; font:inherit; transition:border-color 0.2s ease, box-shadow 0.2s ease}
|
|
.onepage-input:focus, .onepage-select:focus, .onepage-textarea:focus{outline:none; border-color:var(--primary-400); box-shadow:0 0 0 3px rgba(122,92,255,0.1)}
|
|
.onepage-textarea{min-height:120px; resize:vertical}
|
|
.onepage-checkbox{accent-color:var(--primary-500)}
|
|
|
|
/* Testimonials */
|
|
.onepage-testimonial{position:relative; background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px}
|
|
.onepage-testimonial .quote{position:absolute; right:12px; top:12px; opacity:.15; font-size:24px; color:var(--text-300)}
|
|
.onepage-stars{color:var(--warning-amber)}
|
|
.onepage-rating{display:inline-flex; align-items:center; gap:8px; background:rgba(60,224,160,.16); color:var(--accent-emerald); border:1px solid rgba(60,224,160,.35); padding:4px 8px; border-radius:var(--radius-pill); font-weight:700; font-size:0.75rem}
|
|
|
|
/* FAQ */
|
|
.onepage-faq-item{background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:20px}
|
|
.onepage-faq-question{font-weight:700; color:var(--text-100); margin-bottom:12px; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
|
|
.onepage-faq-answer{color:var(--text-300); line-height:1.6}
|
|
.onepage-faq-toggle{transition:transform 0.2s ease; color:var(--text-500)}
|
|
.onepage-faq-item[open] .onepage-faq-toggle{transform:rotate(180deg)}
|
|
|
|
/* Footer */
|
|
.onepage-footer{padding-block:56px; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, var(--bg-800), var(--bg-900))}
|
|
.onepage-footer-content{display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center; text-align:center}
|
|
@media(min-width:768px){ .onepage-footer-content{flex-direction:row; justify-content:space-between; text-align:left} }
|
|
.onepage-footer-text{color:var(--text-500); font-size:.9rem}
|
|
|
|
/* Utilities */
|
|
.onepage-text-center{text-align:center}
|
|
.onepage-text-gradient{background:linear-gradient(135deg, var(--primary-400), var(--accent-emerald)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
|
|
.onepage-flex{display:flex}
|
|
.onepage-flex-center{display:flex; align-items:center; justify-content:center}
|
|
.onepage-flex-between{display:flex; align-items:center; justify-content:space-between}
|
|
.onepage-flex-wrap{flex-wrap:wrap}
|
|
.onepage-gap-2{gap:8px}
|
|
.onepage-gap-3{gap:12px}
|
|
.onepage-gap-4{gap:16px}
|
|
.onepage-gap-6{gap:24px}
|
|
.onepage-mt-4{margin-top:16px}
|
|
.onepage-mt-6{margin-top:24px}
|
|
.onepage-mb-4{margin-bottom:16px}
|
|
.onepage-mb-6{margin-bottom:24px}
|
|
.onepage-mb-8{margin-bottom:32px}
|
|
.onepage-mb-12{margin-bottom:48px}
|
|
.onepage-mb-16{margin-bottom:64px}
|
|
|
|
/* Responsive utilities */
|
|
@media(max-width:767px){
|
|
.onepage-nav-links, .onepage-nav-cta{display:none}
|
|
.onepage-hero-grid{text-align:center}
|
|
.onepage-grid--mobile-1{grid-template-columns:1fr}
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*{animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important}
|
|
html{scroll-behavior:auto}
|
|
} |