/* ============================================ AARON GROVE — SITE STYLESHEET Shared across all pages. Each page sets a theme class on (theme-home / theme-journey / theme-accomplishments) which drives the palette; the hero photo is set per-page too, since each theme is derived from its own header image. ============================================ */ :root{ --bg: #14130F; --surface: #1C1A15; --surface-2: #221F19; --line: #34302A; --text: #ECE6D8; --muted: #8A8375; --accent: #7FC46B; --tally: #E8A33D; } /* ---- Per-page themes ---- */ body.theme-home{ --bg: #071627; --surface: #0C2138; --surface-2: #112A46; --line: #1E3A57; --text: #EDEAE0; --muted: #94ABBF; --accent: #7C9A5E; --tally: #D8BE86; } body.theme-journey{ --bg: #081C24; --surface: #0F2A32; --surface-2: #15343D; --line: #3D6672; --text: #EAF2F0; --muted: #8FB4BE; --accent: #4FB8C9; --tally: #D9C9A3; } body.theme-accomplishments{ --bg: #17120E; --surface: #221A14; --surface-2: #2A2018; --line: #3B2C22; --text: #F0E6D8; --muted: #B3A08C; --accent: #E07A3E; --tally: #C9A876; } body.theme-experience{ --bg: #0E1F1C; --surface: #16302B; --surface-2: #1C3A33; --line: #40695E; --text: #EAF2ED; --muted: #8FB8AC; --accent: #5BB894; --tally: #D9C48A; } body.theme-articles{ --bg: #071A1A; --surface: #0D2626; --surface-2: #123030; --line: #1F3D3D; --text: #E9F1F0; --muted: #82A3A3; --accent: #4C9FC0; --tally: #D98C74; } body.theme-reel{ --bg: #0A1214; --surface: #141D20; --surface-2: #1A2528; --line: #2B3A3E; --text: #EDEEEA; --muted: #8C9598; --accent: #B8C4C9; --tally: #D9CBA3; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ background:var(--bg); color:var(--text); font-family:'Source Serif 4', serif; line-height:1.65; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:900px; margin:0 auto; padding:0 32px; } .wrap-wide{ max-width:1080px; margin:0 auto; padding:0 32px; } h1,h2,h3{ font-family:'Oswald', sans-serif; font-weight:600; margin:0; color:var(--text); } .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:8px; } .eyebrow::before{ content:""; width:6px; height:6px; background:var(--accent); border-radius:1px; display:inline-block; } /* Hero eyebrows sit directly on a photo, so they need a solid badge rather than colored text alone — colored text alone was unreadable against busy image content. */ .hero .eyebrow{ display:inline-flex; background:var(--accent); color:#fff; padding:6px 14px; border-radius:3px; width:fit-content; } .hero .eyebrow::before{ content:none; } /* Selected Work's accent is a pale steel tone — white text on it is unreadable, so it gets dark text on its light badge instead. */ body.theme-reel .hero .eyebrow{ color:var(--bg); } /* ---- NAV ---- */ nav{ position:sticky; top:0; z-index:10; background:rgba(0,0,0,0.55); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); } nav .wrap-wide{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; } .logo-link{ font-family:'Oswald', sans-serif; font-weight:600; font-size:16px; letter-spacing:0.08em; text-transform:uppercase; transition:opacity .15s ease; } .logo-link:hover{ opacity:.75; } .logo-link span{ color:var(--accent); } .navlinks{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; display:flex; gap:28px; } .navlinks a{ color:var(--muted); border-bottom:1px solid transparent; padding-bottom:2px; } .navlinks a:hover{ color:var(--text); border-color:var(--accent); } .navlinks a.current{ color:var(--accent); border-color:var(--accent); } /* ---- Mobile nav (hamburger) ---- */ .nav-toggle{ display:none; background:none; border:none; color:var(--text); font-size:22px; line-height:1; cursor:pointer; padding:4px 6px; } @media (max-width: 860px){ .nav-toggle{ display:block; } .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 32px 16px; } .navlinks a{ padding:12px 0; border-bottom:1px solid var(--line); } .navlinks a:last-child{ border-bottom:none; } nav.nav-open .navlinks{ display:flex; } } /* ---- Slim header strip (used on individual article pages instead of a full hero — just a thin band of the theme photo, no gradient fade, then the standard divider line) ---- */ .article-strip{ height:88px; background-size:cover; background-position:center 50%; background-clip:padding-box; } /* ---- HERO (background-image set FULLY per-page in each page's own