/* ===== THEME TOKENS ===== */ /* Default: Violet-Gold */ :root { --bg: #211139; /* deep indigo background */ --surface: #180f25; --card: #241135; --text: #f2edf8; /* soft warm white */ --muted: #9a8fb5; /* muted lavender-gray */ --brand: #8b75ff; /* violet/purple brand */ --accent: #f7b731; /* golden accent */ --ring: rgba(139,117,255,.35); /* violet glow */ --border: rgba(255,255,255,.07); --shadow: 0 10px 30px rgba(0,0,0,.35); } /* Light mode override */ @media (prefers-color-scheme: light) { :root { --bg: #f7f9fc; --surface: #ffffff; --card: #ffffff; --text: #101522; --muted: #5b6b7a; --brand: #3d7cff; --accent: #6c57ff; --ring: rgba(61,124,255,.22); --border: rgba(16,21,34,.10); --shadow: 0 8px 24px rgba(16,21,34,.08); } } /* Alternate themes (toggle with ) */ :root[data-theme="ember"] { --bg: #0a0a0b; --surface: #111217; --card: #14161d; --text: #f4e9e9; /* slightly warm white */ --muted: #b88f8f; --brand: #e03636; /* fire red */ --accent: #ff8a65; /* ember orange */ --ring: rgba(224,54,54,.35); } :root[data-theme="forest"] { --bg: #08120e; --surface: #0f160b; --card: #0e1b17; --text: #eaf4ee; --muted: #9db9a8; --brand: #228b22; /* forest green */ --accent: #ffd60a; /* signal yellow */ --ring: rgba(34,139,34,.35); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 700px at 20% -10%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 60%), radial-gradient(1000px 600px at 120% 0%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 55%), var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.15; margin: 0 0 8px; } .muted { color: var(--muted); } a { color: inherit; text-decoration: none; } a:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Layout */ .container { max-width: 1100px; padding: 24px; margin: 0 auto; } .section { padding: 20px 0 32px; } .center { text-align: center; } /* Header */ header { position: sticky; top: 0; z-index: 10; background: rgba(11,15,26,.88); backdrop-filter: blur(6px); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; } .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg,var(--brand),var(--accent)); box-shadow: 0 0 0 6px var(--ring); } /* Buttons */ .actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #1a2238; color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .12s ease, background .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); } .btn.primary { background: linear-gradient(135deg,var(--brand),var(--accent)); border: none; } .btn.ghost { background: transparent; border: 1px solid var(--border); } /* Pills */ .pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 24px; } .pill, .tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #151b2f; color: #c7d6ea; border: 1px solid var(--border); font-size: 12px; } /* Cards */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; } .card.flat { box-shadow: none; } /* Grids */ .grid { display: grid; gap: 18px; } .grid.auto-300 { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); } .grid.auto-280 { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); } .grid.center { justify-items: center; } /* Hero */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 46px 0 10px; text-align: center; } .hero h1 { font-size: clamp(28px,4.6vw,48px); } .hero p { max-width: 700px; margin: 0 auto; color: var(--muted); } /* Project cards */ .thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 20%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)); display: flex; align-items: center; justify-content: center; } .thumb span {font-weight: 600; color: var(--accent); /* use accent instead of hard-coded #cfe0ff */} .card .body { display: flex; flex-direction: column; gap: 8px; } .links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } /* Resume tweaks */ .job { display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 780px; margin: 0 auto; } .wins { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); justify-items: center; margin-top: 10px; } .win { background: #0e1427; border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; max-width: 160px; } /* Footer */ footer { padding: 36px 0 50px; color: var(--muted); text-align: center; } .footer-links { margin-top: 10px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* Utilities */ .max-320 { max-width: 320px; } .max-500 { max-width: 500px; } .max-700 { max-width: 700px; } .mx-auto { margin-left: auto; margin-right: auto; } .text-left { text-align: left; } .text-center { text-align: center; } .align-center { justify-content: center; align-items: center; } .hide { display: none !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .btn { transition: none; } } /* ===== Sticky left rail (global) ===== */ .side-nav { position: fixed; left: 20px; top: 96px; /* below sticky header */ display: flex; flex-direction: column; gap: 10px; z-index: 11; } .side-nav .group { display: flex; flex-direction: column; gap: 10px; } .side-nav .btn { width: 140px; justify-content: center; } .side-nav .nav-sep { height: 8px; } .side-nav .btn.active { outline: 2px solid var(--text); } /* Hide rail on smaller screens */ @media (max-width: 1000px){ .side-nav { display: none !important; } } /* ===== Reserve space for the rail when present ===== */ /* Add class="with-rail" on to opt-in on pages that use the sidebar */ @media (min-width: 1001px){ /* keep header flush to the left */ body.with-rail main.container, body.with-rail footer .container { padding-left: 180px; /* space for rail */ } } /* space out resume job cards */ .job { margin-bottom: 20px; /* adjust px to taste (16–24 works well) */ } /* Header layout */ .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; } /* Keep the dot next to your name */ .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 0 0 6px var(--ring); } /* ===== THEME-NEUTRAL SURFACE TOKENS (fix lingering blue) ===== */ :root { /* Slight lifts from the current theme surfaces */ --elev-1: color-mix(in oklab, var(--surface) 88%, black 12%); /* used for .btn default */ --chip-bg: color-mix(in oklab, var(--surface) 85%, var(--text) 15%); /* pills/tags */ --win-bg: color-mix(in oklab, var(--surface) 90%, black 10%); /* small stat cards */ --header-bg: color-mix(in oklab, var(--bg) 84%, black 16%); /* sticky header glass */ } /* Ember tweaks: lean warmer for subtle surfaces */ :root[data-theme="ember"] { --elev-1: color-mix(in oklab, var(--surface) 86%, var(--brand) 14%); --chip-bg: color-mix(in oklab, var(--surface) 80%, var(--accent) 20%); --win-bg: color-mix(in oklab, var(--surface) 88%, var(--brand) 12%); --header-bg: color-mix(in oklab, var(--bg) 82%, var(--brand) 18%); } /* Forest tweaks: lean greener/yellow for subtle surfaces */ :root[data-theme="forest"] { --elev-1: color-mix(in oklab, var(--surface) 86%, var(--brand) 14%); --chip-bg: color-mix(in oklab, var(--surface) 80%, var(--accent) 20%); --win-bg: color-mix(in oklab, var(--surface) 88%, var(--brand) 12%); --header-bg: color-mix(in oklab, var(--bg) 82%, var(--brand) 18%); } /* Replace old hard-coded blues with semantic tokens */ header { background: color-mix(in oklab, var(--header-bg) 88%, transparent); backdrop-filter: blur(6px); } .btn { background: var(--elev-1); /* replaces #1a2238 */ } .pill, .tag { background: var(--chip-bg); /* replaces #151b2f */ color: color-mix(in oklab, var(--text) 90%, var(--bg) 10%); } .win { background: var(--win-bg); /* replaces #0e1427 */ } /* Make gradients a touch stronger so the theme hue reads clearly */ body { background: radial-gradient(1200px 700px at 20% -10%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 60%), radial-gradient(1000px 600px at 120% 0%, color-mix(in oklab, var(--accent) 32%, transparent), transparent 55%), var(--bg); } /* Thumbnails already updated to theme colors; keep this */ .thumb { background: linear-gradient( 135deg, color-mix(in oklab, var(--brand) 24%, transparent), color-mix(in oklab, var(--accent) 22%, transparent) ); } .thumb span { color: var(--accent); } /* ===== Header top links (match look site-wide) ===== */ .top-links { display: flex; gap: 14px; align-items: center; } .top-links a { padding: 6px 10px; border-radius: 8px; color: var(--text); } .top-links a:hover { background: #151b2f; } /* --- Demo map container --- */ .map-wrap { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, var(--card)); overflow: hidden; /* smooth expand/collapse */ height: 0; transition: height .25s ease; } .map { /* the real map height; wrap will animate to this */ height: 340px; } /* Optional: tweak default Leaflet control look to match theme a bit */ .leaflet-control-container .leaflet-control { border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 10px; overflow: hidden; } /* Reserve space for the fixed left rail */ @media (min-width: 1000px){ body.with-rail header .container, body.with-rail main.container, body.with-rail footer .container { padding-left: 180px; /* try 200px if your buttons feel cramped */ } }