67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
/* 1. Add spacing vars
|
|
Added for consistent responsive spacing
|
|
*/
|
|
:root {
|
|
--sp-base: 0.5rem;
|
|
--sp-sm: 1rem;
|
|
--sp-md: 1.5rem;
|
|
--sp-lg: 3rem;
|
|
}
|
|
|
|
/* Existing color vars remain */
|
|
:root {
|
|
--gold: #E8A849;
|
|
--cream: #f5f0e8;
|
|
--navy: #001321;
|
|
--ink: #1a1a1a;
|
|
--warm: #a6683c;
|
|
--bg: #FAF7F0;
|
|
--surface: #e8eff3;
|
|
}
|
|
|
|
/* 2. Responsive adjustments */
|
|
@media (min-width: 640px) {
|
|
.navbar {
|
|
padding: var(--sp-sm) var(--sp-lg);
|
|
}
|
|
}
|
|
|
|
/* 3. Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #111;
|
|
--ink: #faf7f0;
|
|
}
|
|
}
|
|
|
|
/* 4. Focus visible */
|
|
button:focus-visible,
|
|
a:focus-visible {
|
|
outline: 2px solid var(--gold);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* 5. Navbar link reuse */
|
|
.navbar-link {
|
|
display: inline-block;
|
|
color: rgba(245, 240, 232, 0.85);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
padding: 6px 0;
|
|
border-bottom: 1.5px solid transparent;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.navbar-link.active {
|
|
color: var(--gold);
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.navbar-link:hover {
|
|
color: var(--cream);
|
|
}
|
|
|
|
/* 6. Typography helpers */
|
|
h1 { font-size: 2.5rem; font-weight: 700; }
|
|
h2 { font-size: 2rem; font-weight: 600; }
|