152 lines
2.7 KiB
CSS
152 lines
2.7 KiB
CSS
:root {
|
|
--primary-color: #6f42c1;
|
|
--secondary-color: #0df2c9;
|
|
--dark-bg: #1a1a2e;
|
|
--card-bg: #1f203a;
|
|
--light-text: #f0f0f0;
|
|
--muted-text: #a0a0b0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--dark-bg);
|
|
color: var(--light-text);
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
.navbar {
|
|
transition: background-color 0.3s ease, padding 0.3s ease;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar.scrolled {
|
|
background-color: rgba(26, 26, 46, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: bold;
|
|
color: var(--light-text);
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--muted-text);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
color: var(--light-text);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
transition: background-color 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #5a35a1;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero {
|
|
padding: 10rem 0;
|
|
background: linear-gradient(45deg, #1a1a2e, #16213e);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: var(--muted-text);
|
|
}
|
|
|
|
.store-buttons .btn {
|
|
background-color: #333;
|
|
color: white;
|
|
border: none;
|
|
margin: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
|
|
.phone-mockup {
|
|
margin-top: 4rem;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.section {
|
|
padding: 6rem 0;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.feature-card, .review-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
border: 1px solid #3a3b5c;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.feature-card:hover, .review-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.feature-card .icon {
|
|
font-size: 3rem;
|
|
color: var(--secondary-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.review-card img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#newsletter {
|
|
background-color: var(--card-bg);
|
|
padding: 4rem 0;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.form-control {
|
|
background-color: #2a2b4a;
|
|
border: 1px solid #3a3b5c;
|
|
color: var(--light-text);
|
|
}
|
|
|
|
.form-control:focus {
|
|
background-color: #2a2b4a;
|
|
border-color: var(--primary-color);
|
|
color: var(--light-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #16213e;
|
|
padding: 3rem 0;
|
|
margin-top: 6rem;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--muted-text);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--light-text);
|
|
} |