/* ========================================== hperez.dev — Themes ========================================== The base stylesheet (style.css) defines the structure and consumes only tokens. Each theme below is a token override block plus a few scoped signature rules. The installed theme is a DEPLOY-TIME choice: the data-theme attribute on in each page. Switch it with: ./scripts/set-theme.sh or pin it during deploy with HPEREZ_SITE_THEME= ./scripts/deploy.sh There is intentionally no client-side switcher. Themes: phosphor (default) — terminal-native: mint glow, grid texture, all-mono aurora — gradient glows, glass surfaces, color-graded accents cyan — the original GitHub-dark + blue look "cyan" is the :root default in style.css; it needs no block here. ========================================== */ /* ========================================== Theme: phosphor ========================================== */ [data-theme="phosphor"] { --bg-primary: #060907; --bg-secondary: #0a0f0c; --bg-card: #0c1410; --bg-terminal: #080d0a; --text-primary: #d8efe4; --text-secondary: #6f8a7e; --accent: #4af6c3; --accent-hover: #7dfad6; --accent-tint: rgba(74, 246, 195, 0.08); --accent-dim: #1f8f6e; --white: #eafff7; --green: #4af6c3; --border: #1b2a23; --shadow-lg: 0 0 40px rgba(74, 246, 195, 0.08), 0 24px 56px rgba(0, 0, 0, 0.6); --shadow-card: inset 0 1px 0 rgba(74, 246, 195, 0.04), 0 4px 16px rgba(1, 6, 4, 0.35); --glow-accent: rgba(74, 246, 195, 0.3); --glow-soft: rgba(74, 246, 195, 0.06); --nav-bg: rgba(6, 9, 7, 0.85); --nav-bg-solid: rgba(6, 9, 7, 0.95); --radius-sm: 0; --radius-md: 0; --radius-lg: 0; /* Everything terminal: headings AND body text go monospace */ --font-display: var(--font-mono); --font-body: var(--font-mono); } /* Phosphor grid texture replaces the hero photo */ [data-theme="phosphor"] body { background-image: linear-gradient(rgba(74, 246, 195, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 246, 195, 0.025) 1px, transparent 1px); background-size: 44px 44px; } [data-theme="phosphor"] .hero::before { display: none; } /* Only 400/500 mono is shipped — cap weights so nothing renders faux-bold */ [data-theme="phosphor"] h1, [data-theme="phosphor"] h2, [data-theme="phosphor"] h3, [data-theme="phosphor"] h4, [data-theme="phosphor"] strong, [data-theme="phosphor"] b, [data-theme="phosphor"] .hero h1, [data-theme="phosphor"] .experience-item .company { font-weight: 500; } /* Signature details */ [data-theme="phosphor"] .card h3::before { content: '// '; color: var(--accent); } [data-theme="phosphor"] .btn::before { content: '[ '; } [data-theme="phosphor"] .btn::after { content: ' ]'; } [data-theme="phosphor"] .btn { box-shadow: 0 0 24px rgba(74, 246, 195, 0.12), inset 0 0 12px rgba(74, 246, 195, 0.05); } [data-theme="phosphor"] .t-cursor { box-shadow: 0 0 8px rgba(74, 246, 195, 0.8); } [data-theme="phosphor"] ::selection { background: rgba(74, 246, 195, 0.28); color: #eafff7; } /* ========================================== Theme: aurora ========================================== */ [data-theme="aurora"] { --bg-primary: #0a0e1a; --bg-secondary: #0d1322; --bg-card: rgba(255, 255, 255, 0.04); --bg-terminal: rgba(10, 13, 22, 0.72); --text-primary: #e8edf7; --text-secondary: #94a3c0; --accent: #6ea8ff; --accent-hover: #8fbcff; --accent-tint: rgba(110, 168, 255, 0.12); --accent-dim: #4c7dd9; --white: #f2f6ff; --green: #4ade80; --border: rgba(255, 255, 255, 0.09); --shadow-lg: 0 0 0 1px rgba(110, 168, 255, 0.12), 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 80px rgba(110, 168, 255, 0.10); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.35); --glow-accent: rgba(110, 168, 255, 0.35); --glow-soft: rgba(110, 168, 255, 0.08); --nav-bg: rgba(10, 14, 26, 0.7); --nav-bg-solid: rgba(10, 14, 26, 0.95); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 16px; --aurora-violet: #a78bfa; --aurora-teal: #5eead4; } /* Aurora radial glows replace the hero photo */ [data-theme="aurora"] body { background-image: radial-gradient(ellipse 700px 480px at 18% 6%, rgba(110, 168, 255, 0.14), transparent 60%), radial-gradient(ellipse 640px 500px at 85% 18%, rgba(167, 139, 250, 0.11), transparent 60%), radial-gradient(ellipse 800px 420px at 60% 100%, rgba(94, 234, 212, 0.06), transparent 60%); background-attachment: fixed; } [data-theme="aurora"] .hero::before { display: none; } /* Color-graded name */ [data-theme="aurora"] .hero h1 { background: linear-gradient(96deg, #ffffff 20%, var(--accent) 60%, var(--aurora-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="aurora"] .hero-subtitle, [data-theme="aurora"] .t-prompt { color: var(--aurora-teal); } [data-theme="aurora"] .t-cursor { background: var(--aurora-teal); } /* Glass surfaces */ [data-theme="aurora"] .card, [data-theme="aurora"] .project-featured-content, [data-theme="aurora"] .terminal { backdrop-filter: blur(12px); } /* Gradient primary action */ [data-theme="aurora"] .btn-primary { background: linear-gradient(120deg, var(--accent), var(--aurora-violet)); color: #0a0e1a; border-color: transparent; box-shadow: 0 8px 32px rgba(110, 168, 255, 0.35); } [data-theme="aurora"] .btn-primary:hover { background: linear-gradient(120deg, var(--accent-hover), var(--aurora-violet)); color: #0a0e1a; } [data-theme="aurora"] ::selection { background: rgba(110, 168, 255, 0.3); color: #f2f6ff; }