133 lines
2.8 KiB
CSS
133 lines
2.8 KiB
CSS
:root {
|
|
--color-bg: #0a0a0a;
|
|
--color-primary: #c77dff;
|
|
--color-text: #f5f5f5;
|
|
--color-muted: #9a9a9a;
|
|
}
|
|
* {
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
line-height:1.6;
|
|
}
|
|
a {
|
|
text-decoration:none;
|
|
color:inherit;
|
|
}
|
|
header {
|
|
position:fixed;
|
|
top:0; left:0; right:0;
|
|
background:rgba(10,10,10,.9);
|
|
backdrop-filter:blur(10px);
|
|
padding:1rem 2rem;
|
|
display:flex; align-items:center;
|
|
justify-content:space-between;
|
|
z-index:50;
|
|
}
|
|
nav ul {
|
|
display:flex;
|
|
gap:2rem;
|
|
list-style:none;
|
|
}
|
|
.btn {
|
|
padding:.75rem 1.25rem;
|
|
border-radius:.5rem;
|
|
font-weight:600;
|
|
transition:.3s;
|
|
}
|
|
.btn-primary {
|
|
background:var(--color-primary);
|
|
color:#000;
|
|
}
|
|
.btn-outline {
|
|
border:1px solid var(--color-primary);
|
|
color:var(--color-primary);
|
|
}
|
|
section {
|
|
padding:6rem 2rem;
|
|
max-width:1200px;
|
|
margin:auto;
|
|
}
|
|
.hero {
|
|
min-height:100vh;
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
justify-content:center; text-align:center;
|
|
}
|
|
.hero h1 {
|
|
font-size:3rem;
|
|
font-weight:700;
|
|
margin-bottom:1rem;
|
|
}
|
|
.hero p {
|
|
max-width:600px;
|
|
margin-bottom:2rem;
|
|
color:var(--color-muted);
|
|
}
|
|
.features {
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
|
|
gap:1.5rem; margin-top:3rem;
|
|
}
|
|
.card {
|
|
padding:2rem;
|
|
background:#111;
|
|
border-radius:1rem; text-align:center;
|
|
}
|
|
.steps {
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
|
|
gap:1rem; margin-top:3rem;
|
|
}
|
|
.step {
|
|
padding:1.5rem;
|
|
border:1px solid #222; border-radius:.75rem;
|
|
}
|
|
footer {
|
|
background:#111;
|
|
padding:3rem 2rem;
|
|
text-align:center;
|
|
font-size:.875rem;
|
|
color:var(--color-muted);
|
|
}
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.hero-video {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* keeps aspect ratio, fills screen */
|
|
z-index: -2; /* send video to back */
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background: rgba(10,10,10,0.6); /* dark overlay for readability */
|
|
z-index: -1; /* above video, below text */
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: relative;
|
|
max-width: 800px;
|
|
padding: 2rem;
|
|
}
|