/* ============================================================ theme.css — single source of truth for tokens + shared UI Unified from index.html, article.html, career.html on 2026-08-25. All 12 shared tokens had IDENTICAL values in all three files, so unifying changed no colours. The only real differences were additive: --bg-panel, --cta-border were defined only in index.html --bg-panel-hover was defined only in article/career All are kept below so every page can use the full set. Theme is driven by a data-theme attribute on : or data-theme="light" The legacy body.light-mode class is still honoured so any markup or script not yet migrated keeps working. ============================================================ */ :root, [data-theme="dark"] { --bg-core: #050505; --bg-gradient: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #050505 100%); --text-main: #ffffff; --text-muted: #9ca3af; --border-color: rgba(255, 255, 255, 0.1); --accent-cyan: #00f0ff; --accent-purple: #bc13fe; --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.1); --nav-bg: rgba(5, 5, 5, 0.8); --bg-panel: rgba(10, 10, 10, 0.8); --bg-panel-hover: rgba(255, 255, 255, 0.07); --glow-color: rgba(0, 240, 255, 0.5); --cta-border: rgba(255, 255, 255, 0.2); } [data-theme="light"], body.light-mode { /* Light mode: sharper text, stronger borders */ --bg-core: #eef2f6; --bg-gradient: radial-gradient(circle at 50% 0%, #f8fafc 0%, #eef2f6 100%); --text-main: #0f172a; /* Slate-900, sharper contrast */ --text-muted: #334155; /* Slate-700, legible subtext */ --border-color: rgba(15, 23, 42, 0.15); --accent-cyan: #0284c7; --accent-purple: #7c3aed; --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(15, 23, 42, 0.2); --nav-bg: rgba(238, 242, 246, 0.85); --bg-panel: rgba(255, 255, 255, 0.8); --bg-panel-hover: rgba(255, 255, 255, 0.95); --glow-color: rgba(2, 132, 199, 0.2); --cta-border: rgba(15, 23, 42, 0.4); /* stronger pill border in light */ } /* Layout tokens. Nav and footer heights live here so page padding can reference them instead of hardcoding magic numbers. */ :root { --nav-h: 5rem; /* 80px, matches nav h-20 */ --footer-h: 40px; --nav-h-sm: 4rem; /* 64px on small screens */ } @media (max-width: 640px) { :root { --nav-h: var(--nav-h-sm); } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Respect iOS safe areas and prevent text auto-inflation on rotate */ -webkit-text-size-adjust: 100%; } body { font-family: 'Space Grotesk', sans-serif; background-color: var(--bg-core); background-image: var(--bg-gradient); color: var(--text-main); transition: background 0.5s ease, color 0.5s ease; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; /* Keeps content clear of the fixed footer */ padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px) + 10px); margin: 0; } /* Offset for the fixed nav. Applied to
by each page. */ .page-main { padding-top: calc(var(--nav-h) + 2rem); } /* Anchor targets clear the fixed nav instead of hiding under it */ section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); } .font-syne { font-family: 'Syne', sans-serif; } .opacity-0 { opacity: 0; } /* ---------- Canvas background ---------- */ #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.4; pointer-events: none; } /* ---------- Glassmorphism ---------- */ .glass-panel { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .glass-panel:hover { background: var(--bg-panel-hover); border-color: var(--accent-cyan); box-shadow: 0 10px 30px -10px var(--glow-color); } /* index.html and career.html did not lift panels on hover; article.html did. Lift is opt-in via .glass-panel--lift so behaviour per page is explicit rather than an accident of which file you edited. */ .glass-panel--lift:hover { transform: translateY(-5px); } /* ---------- Typography effects ---------- */ .glow-text { text-shadow: 0 0 20px rgba(0, 240, 255, 0.3); } [data-theme="light"] .glow-text, body.light-mode .glow-text { text-shadow: none; } /* Glitch effect (index hero) */ .glitch-text { position: relative; display: inline-block; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; } .glitch-text::before { left: 1px; text-shadow: -1px 0 var(--accent-purple); clip: rect(0, 0, 0, 0); animation: glitch-anim 6s infinite linear alternate-reverse; opacity: 0.5; z-index: -1; } .glitch-text::after { left: -1px; text-shadow: -1px 0 var(--accent-cyan); clip: rect(0, 0, 0, 0); animation: glitch-anim2 5s infinite linear alternate-reverse; opacity: 0.5; z-index: -1; } @keyframes glitch-anim { 0%, 94%, 96%, 100% { clip: rect(0, 0, 0, 0); transform: skew(0); } 95% { clip: rect(44px, 9999px, 56px, 0); transform: skew(0.3deg); } 98% { clip: rect(12px, 9999px, 59px, 0); transform: skew(0.3deg); } } @keyframes glitch-anim2 { 0%, 80%, 82%, 85%, 87%, 100% { clip: rect(0, 0, 0, 0); transform: skew(0); } 81% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.3deg); } 86% { clip: rect(25px, 9999px, 66px, 0); transform: skew(0.3deg); } } /* ---------- Nav links ---------- */ .nav-link { position: relative; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--text-muted); transition: color 0.3s; text-decoration: none; } .nav-link:hover, .nav-link.active { color: var(--text-main); } .nav-link.active { color: var(--accent-cyan); } /* ---------- Tech badges (index) ---------- */ .tech-list-item { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 0.4rem 1rem; border-radius: 8px; display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-family: 'Syne', sans-serif; font-weight: 600; font-size: 0.75rem; transition: all 0.3s ease; width: auto; height: 36px; } .tech-list-item:hover { border-color: var(--accent-cyan); color: var(--text-main); transform: translateY(-2px); } .tech-list-item.active { border-color: var(--accent-cyan); color: var(--text-main); } .tech-list-item img { height: 16px; width: auto; max-width: 32px; object-fit: contain; border-radius: 0; } /* ---------- Filter buttons (article) ---------- */ .filter-btn { border: 1px solid var(--border-color); color: var(--text-muted); transition: all 0.3s ease; background: var(--glass-bg); /* 44px min touch target for mobile */ min-height: 44px; } .filter-btn:hover, .filter-btn.active { background: var(--accent-cyan); color: #fff; border-color: var(--accent-cyan); } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active, body:not(.light-mode) .filter-btn:hover, body:not(.light-mode) .filter-btn.active { color: #000; } /* Filter state. A class rather than an inline style so that cards retired via the [hidden] attribute stay hidden regardless of which filter is active. */ .article-card.is-filtered-out { display: none; } .article-card[hidden] { display: none !important; } /* ---------- Outcomes table (career) ---------- */ .outcomes-table { width: 100%; border-collapse: collapse; } .outcomes-table th { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding: 1.5rem; text-align: left; font-weight: 600; } .outcomes-table td { padding: 1.5rem; border-bottom: 1px solid var(--border-color); vertical-align: top; } .outcomes-table tr:last-child td { border-bottom: none; } /* Tables are the most common cause of mobile horizontal scroll. Wrap in .table-scroll to contain the overflow to the table. */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tighter cells on small screens. The table's own min-width is set in markup (min-w-[560px] md:min-w-[900px]) so Tailwind and this file do not fight over the same property. */ @media (max-width: 768px) { .outcomes-table th, .outcomes-table td { padding: 1rem 0.875rem; font-size: 0.875rem; } } /* ============================================================ THEME PILL — segmented Light / Dark / Auto control ============================================================ */ .theme-pill { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--cta-border); background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; flex: none; } .theme-pill__btn { -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: pointer; border-radius: 999px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color 0.25s ease, background 0.25s ease; position: relative; z-index: 1; padding: 0; line-height: 1; /* Stops iOS double-tap zoom on rapid taps */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .theme-pill__btn svg { width: 15px; height: 15px; display: block; } .theme-pill__btn:hover { color: var(--text-main); } .theme-pill__btn[aria-checked="true"] { color: var(--accent-cyan); background: var(--bg-panel-hover); } /* Visible keyboard focus. :focus-visible keeps it off mouse clicks. */ .theme-pill__btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } /* On phones the pill grows to a 44px touch target per Apple HIG */ @media (max-width: 640px) { .theme-pill__btn { width: 38px; height: 38px; } .theme-pill__btn svg { width: 17px; height: 17px; } } /* ---------- Mobile menu ---------- */ .mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--bg-core); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; /* Fallback first, then dvh for browsers that support it, so mobile browser chrome showing/hiding does not clip the menu */ height: 100vh; height: 100dvh; } .mobile-menu.is-open { transform: translateX(0); } /* Prevents background scroll while the menu is open */ body.menu-open { overflow: hidden; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-core); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .glitch-text::before, .glitch-text::after { display: none; } } /* Screen-reader-only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }