934aac41dc
Early theme initialization to prevent flashing Proper component and script loading order Enhanced error handling and fallbacks Better theme state persistence System theme preference detection The theme system will now work correctly in the production environment when deployed through Coolify with Nixpacks build pack.
108 lines
2.3 KiB
CSS
108 lines
2.3 KiB
CSS
header {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
background: linear-gradient(350deg, var(--header-gradient-1), var(--header-gradient-2));
|
|
backdrop-filter: blur(10px);
|
|
padding: var(--spacing-lg) var(--spacing-md);
|
|
z-index: 1000;
|
|
border-bottom: 1px solid var(--border-color);
|
|
left: 0;
|
|
right: 0;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
transition: background-color 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease;
|
|
max-height: var(--header-height);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
|
|
.logo-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 2.2rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.logo-text span:nth-child(1) { color: var(--primary-gradient-1); }
|
|
.logo-text span:nth-child(2) { color: var(--primary-gradient-2); }
|
|
.logo-text span:nth-child(3) { color: var(--primary-gradient-3); }
|
|
.logo-text span:nth-child(4) { color: var(--primary-gradient-4); }
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
gap: var(--spacing-lg);
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-menu a {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
transition: color var(--transition-speed) ease;
|
|
}
|
|
|
|
.nav-menu a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.theme-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
padding: var(--spacing-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color var(--transition-speed) ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mobile-menu-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: var(--header-height);
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg-card);
|
|
padding: var(--spacing-md);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.nav-menu.active {
|
|
display: flex;
|
|
}
|
|
}
|