diff --git a/globals.css b/globals.css new file mode 100644 index 0000000..1f17196 --- /dev/null +++ b/globals.css @@ -0,0 +1,66 @@ +/* 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; }