143 lines
3.0 KiB
CSS
143 lines
3.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
|
|
|
|
:root {
|
|
--primary-color: #5A67D8;
|
|
--secondary-color: #38B2AC;
|
|
--text-color: #2D3748;
|
|
--bg-gradient-start: #f5f7fa;
|
|
--bg-gradient-end: #c3cfe2;
|
|
--card-bg: rgba(255, 255, 255, 0.6);
|
|
--card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
|
|
--card-border: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
|
color: var(--text-color);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.navbar-sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1020;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
|
}
|
|
|
|
.navbar-sticky.scrolled {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.brand-logo {
|
|
font-weight: 900;
|
|
font-size: 1.75rem;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.hero-section {
|
|
padding: 6rem 0;
|
|
}
|
|
|
|
.hero-title {
|
|
font-weight: 900;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.25rem;
|
|
color: #4A5568;
|
|
}
|
|
|
|
.search-bar-wrapper {
|
|
position: relative;
|
|
max-width: 600px;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
.search-input {
|
|
border-radius: 50px;
|
|
border: 1px solid #E2E8F0;
|
|
padding: 1rem 2rem 1rem 3.5rem;
|
|
font-size: 1.1rem;
|
|
transition: all 0.3s ease-in-out;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.search-input:focus {
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 1.25rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #A0AEC0;
|
|
}
|
|
|
|
.category-card {
|
|
background: var(--card-bg);
|
|
border-radius: 1rem;
|
|
border: 1px solid var(--card-border);
|
|
box-shadow: var(--card-shadow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
transition: all 0.3s ease-in-out;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.category-card:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
|
|
transform: scale(0);
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-10px) scale(1.03);
|
|
box-shadow: 0 16px 40px rgba(31, 38, 135, 0.15);
|
|
}
|
|
|
|
.category-card:hover:before {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.category-card .card-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--primary-color);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.category-card:hover .card-icon {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.card-title {
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.footer {
|
|
background: transparent;
|
|
border-top: 1px solid rgba(0,0,0,.05);
|
|
} |