/* * global.css — Godwin Eats * Shared tokens, reset, nav, footer, and dark mode base. * Link this on EVERY page before any page-specific CSS. * * Usage: * Depends on: Google Fonts (DM Serif Display + DM Sans) loaded in */ /* ─── DESIGN TOKENS ─── */ :root { --terra: #c9521a; --terra-lt: #e06830; --terra-dk: #9a3c0e; --char: #1c1814; --char2: #2a2420; --char3: #3a3028; --cream: #f5ede0; --sand: #e8d8c0; --parchment: #f9f4ea; --text: #1c1814; --text2: #5a4e44; --text3: #9a8c7e; --bg: #f5ede0; --bg2: #ede0cc; --surface: #faf6ee; --border: rgba(201, 82, 26, 0.18); --border2: rgba(201, 82, 26, 0.32); --gold: #c9a84c; --silver: #8a9aaa; --bronze: #a87856; --max: 720px; } /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ─── ANIMATIONS ─── */ @keyframes bar-slide { 0% { background-position: 0% } 100% { background-position: 300% } } @keyframes pip { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.65); } } /* ─── ACCENT BAR ─── */ .accent-bar { height: 3px; background: linear-gradient(90deg, var(--terra-dk), var(--terra), var(--terra-lt), var(--gold), var(--terra-lt), var(--terra-dk)); background-size: 300% 100%; animation: bar-slide 8s linear infinite; } /* ─── NAV (sticky variant — used by blog, leaderboard, article pages) ─── */ /* Note: index.html uses a fixed + .scrolled variant — override in home.css */ nav { position: sticky; top: 0; z-index: 100; width: 100%; background: rgba(245, 237, 224, 0.92); backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--border); } .nav-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; } .nav-logo { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--char); text-decoration: none; } .nav-logo em { font-style: italic; color: var(--terra); } .nav-links { display: flex; gap: 24px; align-items: center; } .nav-links a { font-size: 12px; color: var(--text2); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--terra); } .nav-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--terra); animation: pip 2.4s ease-in-out infinite; } /* ─── DARK TOGGLE ─── */ .dark-toggle { width: 32px; height: 18px; border-radius: 100px; background: var(--border2); border: 0.5px solid var(--border2); cursor: pointer; position: relative; transition: background 0.3s; flex-shrink: 0; } .dark-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--terra); transition: transform 0.25s; } body.dark .dark-toggle::after { transform: translateX(14px); background: var(--terra-lt); } /* ─── MOBILE NAV ─── */ .mob-controls { display: none; align-items: center; gap: 12px; } .hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 4px; gap: 5px; flex-direction: column; justify-content: center; width: 28px; height: 28px; } .hamburger-btn span { display: block; width: 22px; height: 1.5px; background: var(--text2); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; transform-origin: center; } .hamburger-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger-btn.open span:nth-child(2) { opacity: 0; } .hamburger-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 900px) { .mob-controls { display: flex !important; } .nav-links { display: none !important; } .hamburger-btn { display: flex !important; } } .mob-menu { position: fixed; top: 57px; left: 0; right: 0; z-index: 199; background: rgba(245, 237, 224, 0.97); backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--border); flex-direction: column; display: flex; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.22s ease, transform 0.22s ease; } .mob-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); } .mob-menu a { font-size: 15px; color: var(--text2); text-decoration: none; letter-spacing: 0.06em; padding: 16px 28px; border-bottom: 0.5px solid var(--border); transition: color 0.2s, background 0.2s; } .mob-menu a:last-child { border-bottom: none; } .mob-menu a:hover { color: var(--terra); background: rgba(201, 82, 26, 0.04); } .mob-overlay { display: none; position: fixed; inset: 0; z-index: 198; background: rgba(0, 0, 0, 0.15); } .mob-overlay.open { display: block; } /* ─── FOOTER ─── */ footer { border-top: 0.5px solid var(--border); padding: 24px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: var(--max); margin: 0 auto; } .footer-logo { font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--text2); text-decoration: none; } .footer-logo em { font-style: italic; color: var(--terra); } .footer-center { text-align: center; font-size: 12px; color: var(--text3); } .footer-right { text-align: right; display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 12px; color: var(--text3); } .footer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); } /* ─── DARK MODE BASE ─── */ body.dark { --char: #f0e8dc; --char2: #e0d4c4; --char3: #c8bca8; --cream: #f0e8dc; --sand: #d8c8b0; --parchment: #2a2420; --text: #e8ddd0; --text2: #a89880; --text3: #6a5e52; --bg: #141210; --bg2: #1c1814; --surface: #201c18; --border: rgba(201, 82, 26, 0.14); --border2: rgba(201, 82, 26, 0.26); } body.dark nav { background: rgba(20, 18, 16, 0.94) !important; } body.dark .mob-menu { background: rgba(20, 18, 16, 0.97) !important; } /* ─── RESPONSIVE FOOTER ─── */ @media (max-width: 600px) { footer { padding: 20px; } }