/* ============================================================ THEMES — data-theme overrides on ============================================================ */ /* ══════════════════════════════════════════════════════════ THEME 2 · TRON LEGACY Dark navy/black with electric cyan neon accents ══════════════════════════════════════════════════════════ */ [data-theme="tron"] { --bg: #020810; --ink: #B8E8FF; --ink-2: #3A6E88; --accent: #00E5FF; --surface: #060F20; --border: rgba(0, 229, 255, 0.16); --font-display: 'Orbitron', 'Courier New', monospace; --font-ui: 'Orbitron', 'Courier New', monospace; } [data-theme="tron"] body { background-color: var(--bg); background-image: linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px); background-size: 48px 48px; } [data-theme="tron"] .nav { border-bottom: 1px solid rgba(0, 229, 255, 0.25); box-shadow: 0 0 24px rgba(0, 229, 255, 0.08); } [data-theme="tron"] .nav.scrolled { background: rgba(2, 8, 16, 0.96); backdrop-filter: blur(12px); } [data-theme="tron"] .nav-logo { color: var(--accent); letter-spacing: 0.18em; font-size: 0.7rem; text-shadow: 0 0 12px rgba(0, 229, 255, 0.5); } [data-theme="tron"] .nav-links a { letter-spacing: 0.1em; } [data-theme="tron"] .nav-links a:hover { color: var(--accent); } [data-theme="tron"] .nav-links a::after { background: var(--accent); } [data-theme="tron"] .hero-eyebrow { color: var(--accent); letter-spacing: 0.22em; } [data-theme="tron"] .hero-headline { font-size: clamp(2.25rem, 6.5vw, 6rem); font-weight: 700; line-height: 1.05; letter-spacing: 0.05em; text-shadow: 0 0 30px rgba(0, 229, 255, 0.35), 0 0 80px rgba(0, 229, 255, 0.12); } [data-theme="tron"] .hero-headline em { color: #FF6B00; font-style: normal; font-weight: 700; text-shadow: 0 0 20px rgba(255, 107, 0, 0.5), 0 0 60px rgba(255, 107, 0, 0.2); } [data-theme="tron"] .hero-sub { font-size: 0.6rem; letter-spacing: 0.1em; line-height: 2; } [data-theme="tron"] .scroll-hint { color: var(--accent); } [data-theme="tron"] .scroll-line { background: var(--accent); box-shadow: 0 0 6px var(--accent); } [data-theme="tron"] .ring-text { fill: var(--accent); } [data-theme="tron"] .pixel-frame { border: 2px solid var(--accent); background: #020810; box-shadow: 0 0 0 1px var(--accent), 0 0 28px rgba(0, 229, 255, 0.35), 0 0 60px rgba(0, 229, 255, 0.12); } [data-theme="tron"] .section-header { border-bottom-color: rgba(0, 229, 255, 0.25); } [data-theme="tron"] .section-num { color: rgba(0, 229, 255, 0.4); } [data-theme="tron"] .section-title { color: var(--accent); letter-spacing: 0.2em; text-shadow: 0 0 8px rgba(0, 229, 255, 0.4); } [data-theme="tron"] .work { border-top-color: rgba(0, 229, 255, 0.12); } [data-theme="tron"] .work-grid { background: rgba(0, 229, 255, 0.06); } [data-theme="tron"] .work-card { background: var(--surface); border: 1px solid var(--border); transition: border-color 0.35s, box-shadow 0.35s; } [data-theme="tron"] .work-card:hover { border-color: var(--accent); box-shadow: 0 0 32px rgba(0, 229, 255, 0.14), inset 0 0 32px rgba(0, 229, 255, 0.03); } [data-theme="tron"] .work-tag { color: var(--accent); letter-spacing: 0.16em; } [data-theme="tron"] .work-title { letter-spacing: 0.04em; font-weight: 500; } [data-theme="tron"] .work-card:hover .work-title { color: var(--accent); text-shadow: 0 0 8px rgba(0, 229, 255, 0.3); } [data-theme="tron"] .work-card-meta { border-top-color: var(--border); } [data-theme="tron"] .about { border-top-color: rgba(0, 229, 255, 0.12); } [data-theme="tron"] .about-pull { color: var(--accent); font-style: normal; font-weight: 500; letter-spacing: 0.04em; text-shadow: 0 0 20px rgba(0, 229, 255, 0.2); } [data-theme="tron"] .about-skills { border-top-color: var(--border); } [data-theme="tron"] .skill-label { color: var(--accent); } [data-theme="tron"] .contact { background: #010509; border-top: 1px solid var(--accent); position: relative; overflow: hidden; } [data-theme="tron"] .contact::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 229, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } [data-theme="tron"] .contact-headline { font-size: clamp(1.8rem, 5.5vw, 5rem); font-weight: 700; letter-spacing: 0.05em; text-shadow: 0 0 30px rgba(0, 229, 255, 0.25); } [data-theme="tron"] .contact-headline em { color: #FF6B00; font-style: normal; text-shadow: 0 0 20px rgba(255, 107, 0, 0.4); } [data-theme="tron"] .contact-email { font-family: 'Orbitron', monospace; font-size: clamp(0.75rem, 1.5vw, 1.1rem); font-style: normal; letter-spacing: 0.08em; border-bottom-color: rgba(0, 229, 255, 0.3); } [data-theme="tron"] .contact-email:hover { color: var(--accent); border-color: var(--accent); } [data-theme="tron"] .footer { background: #010509; border-top-color: rgba(0, 229, 255, 0.1); } /* ══════════════════════════════════════════════════════════ THEME 3 · 16-BIT Retro game aesthetic, pixel font, scanlines, bold colors ══════════════════════════════════════════════════════════ */ [data-theme="16bit"] { --bg: #0D1B2A; --ink: #E8E8E0; --ink-2: #6868A0; --accent: #FFD700; --surface: #16213E; --border: rgba(255, 215, 0, 0.55); --font-display: 'Press Start 2P', monospace; --font-ui: 'Press Start 2P', monospace; } [data-theme="16bit"] body { background-color: var(--bg); } /* CRT scanlines */ [data-theme="16bit"] body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.09) 2px, rgba(0, 0, 0, 0.09) 4px ); pointer-events: none; z-index: 9997; } [data-theme="16bit"] .nav { border-bottom: 3px solid var(--accent); } [data-theme="16bit"] .nav.scrolled { background: rgba(13, 27, 42, 0.96); backdrop-filter: none; } [data-theme="16bit"] .nav-logo { font-size: 0.5rem; color: var(--accent); letter-spacing: 0.04em; } [data-theme="16bit"] .nav-links a { font-size: 0.4rem; letter-spacing: 0.04em; color: var(--ink-2); } [data-theme="16bit"] .nav-links a:hover { color: var(--accent); } [data-theme="16bit"] .nav-links a::after { background: var(--accent); } [data-theme="16bit"] .hero-eyebrow { font-size: 0.45rem; color: #00FF88; letter-spacing: 0.08em; } [data-theme="16bit"] .hero-headline { font-size: clamp(0.85rem, 2.8vw, 1.9rem); line-height: 1.9; letter-spacing: 0.02em; } [data-theme="16bit"] .hero-headline em { color: #FF4444; font-style: normal; } [data-theme="16bit"] .hero-sub { font-size: 0.45rem; line-height: 2.2; letter-spacing: 0.04em; } [data-theme="16bit"] .scroll-hint { font-size: 0.4rem; color: var(--accent); } [data-theme="16bit"] .scroll-line { background: var(--accent); height: 2px; } [data-theme="16bit"] .ring-text { fill: var(--accent); font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 3px; } [data-theme="16bit"] .pixel-frame { border: 3px solid var(--accent); box-shadow: 5px 5px 0 0 var(--accent); background: #0D1B2A; } [data-theme="16bit"] .section-header { border-bottom: 3px solid var(--accent); } [data-theme="16bit"] .section-num { font-size: 0.4rem; color: var(--accent); } [data-theme="16bit"] .section-title { font-size: 0.45rem; color: var(--accent); letter-spacing: 0.06em; } @keyframes px-flicker { 0%,94%,100% { opacity: 1; } 95% { opacity: 0.7; } 97% { opacity: 1; } 99% { opacity: 0.6; } } [data-theme="16bit"] .hero-headline em, [data-theme="16bit"] .section-title { animation: px-flicker 7s ease-in-out infinite; } [data-theme="16bit"] .work { border-top: 3px solid var(--accent); } [data-theme="16bit"] .work-grid { gap: 10px; background: transparent; } [data-theme="16bit"] .work-card { background: var(--surface); border: 3px solid var(--accent); transition: transform 0.15s, box-shadow 0.15s; } [data-theme="16bit"] .work-card:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 0 var(--accent); } [data-theme="16bit"] .work-card-meta { border-top: 2px solid var(--accent); padding: 1rem 1.25rem 1.25rem; } [data-theme="16bit"] .work-tag { font-size: 0.38rem; color: #00FF88; letter-spacing: 0.04em; } [data-theme="16bit"] .work-title { font-size: 0.55rem; line-height: 2; letter-spacing: 0.02em; } [data-theme="16bit"] .work-card:hover .work-title { color: var(--accent); text-shadow: none; } [data-theme="16bit"] .work-role { font-size: 0.38rem; color: #FF4444; margin-top: 0.5rem; } [data-theme="16bit"] .about { border-top: 3px solid var(--accent); } [data-theme="16bit"] .about-pull { font-size: clamp(0.5rem, 1.4vw, 0.8rem); line-height: 2.2; color: var(--accent); font-style: normal; position: static; } [data-theme="16bit"] .about-bio-lead { font-size: 0.48rem; line-height: 2.2; } [data-theme="16bit"] .about-bio p:not(.about-bio-lead) { font-size: 0.42rem; line-height: 2.4; } [data-theme="16bit"] .skill-label { font-size: 0.38rem; color: #00FF88; letter-spacing: 0.04em; } [data-theme="16bit"] .skill-value { font-size: 0.42rem; } [data-theme="16bit"] .about-skills { border-top: 2px solid var(--accent); } [data-theme="16bit"] .contact { background: #050A14; border-top: 4px solid var(--accent); } [data-theme="16bit"] .contact-num { color: rgba(255,215,0,0.3); } [data-theme="16bit"] .contact-headline { font-size: clamp(0.7rem, 2.2vw, 1.4rem); line-height: 2; letter-spacing: 0.02em; } [data-theme="16bit"] .contact-headline em { color: #FF4444; font-style: normal; } [data-theme="16bit"] .contact-email { font-size: 0.55rem; font-style: normal; letter-spacing: 0.04em; border-bottom: 2px solid var(--accent); } [data-theme="16bit"] .contact-links a { font-size: 0.38rem; letter-spacing: 0.04em; } [data-theme="16bit"] .footer { background: #050A14; border-top: 3px solid var(--accent); font-size: 0.38rem; color: var(--accent); letter-spacing: 0.06em; } /* ══════════════════════════════════════════════════════════ THEME 4 · BRICK (LEGO-inspired) Primary colors, chunky type, stud motifs, drop-shadow blocks ══════════════════════════════════════════════════════════ */ [data-theme="lego"] { --bg: #FFD500; --ink: #1B1B1B; --ink-2: #4A4A4A; --accent: #D9131A; --surface: #FFFFFF; --border: rgba(27, 27, 27, 0.85); --brick-blue: #006DB7; --brick-green: #00A651; --font-display: 'Fredoka', 'Inter', sans-serif; --font-ui: 'Fredoka', 'Inter', sans-serif; } /* Subtle stud-pattern background: dot grid evoking brick studs */ [data-theme="lego"] body { background-color: var(--bg); background-image: radial-gradient(circle at center, rgba(27,27,27,0.10) 2.5px, transparent 3px); background-size: 32px 32px; } [data-theme="lego"] .nav { border-bottom: 3px solid var(--ink); background: rgba(255, 213, 0, 0.92); } [data-theme="lego"] .nav.scrolled { background: rgba(255, 213, 0, 0.98); } [data-theme="lego"] .nav-logo { font-family: 'Bungee', 'Fredoka', sans-serif; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); } [data-theme="lego"] .nav-links a { font-weight: 700; letter-spacing: 0.06em; font-size: 0.75rem; text-transform: uppercase; padding: 0.4rem 0.75rem; border: 2px solid transparent; border-radius: 4px; transition: all 0.18s ease; } [data-theme="lego"] .nav-links a:hover { background: var(--accent); color: #FFD500; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: translateY(-1px); } [data-theme="lego"] .hero-eyebrow { display: inline-block; font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 0.08em; color: #FFD500; background: var(--accent); padding: 0.4rem 0.85rem; border: 3px solid var(--ink); border-radius: 4px; box-shadow: 0 3px 0 var(--ink); font-size: 0.7rem; text-transform: uppercase; } [data-theme="lego"] .hero-headline { font-family: 'Bungee', 'Fredoka', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.92; font-size: clamp(2.1rem, 6.3vw, 5.95rem); color: var(--ink); text-shadow: 4px 4px 0 var(--accent), 8px 8px 0 var(--brick-blue); } [data-theme="lego"] .hero-headline em { font-style: normal; color: var(--brick-blue); text-transform: uppercase; text-shadow: 4px 4px 0 #FFD500, 8px 8px 0 var(--ink); } [data-theme="lego"] .hero-sub { font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: clamp(0.7rem, 1vw, 0.85rem); background: var(--ink); color: #FFD500; padding: 0.35rem 0.75rem; display: inline-block; border-radius: 4px; } [data-theme="lego"] .scroll-hint { font-family: 'Bungee', sans-serif; letter-spacing: 0.12em; font-size: 0.6rem; color: var(--ink); } [data-theme="lego"] .scroll-line { background: var(--ink); } [data-theme="lego"] .ring-text { fill: var(--ink); font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 4px; } /* Avatar = yellow brick with two studs */ [data-theme="lego"] .pixel-frame { border: 4px solid var(--ink); background: #FFD500; border-radius: 12px; box-shadow: 0 8px 0 var(--ink), 8px 8px 0 var(--accent); position: relative; } [data-theme="lego"] .pixel-frame::before, [data-theme="lego"] .pixel-frame::after { content: ''; position: absolute; top: -14px; width: 28px; height: 28px; background: #FFD500; border: 4px solid var(--ink); border-radius: 50%; z-index: 2; } [data-theme="lego"] .pixel-frame::before { left: 24%; } [data-theme="lego"] .pixel-frame::after { right: 24%; } /* Section header as a brick label */ [data-theme="lego"] .section-header { gap: 0.85rem; border-bottom: 4px solid var(--ink); padding-bottom: 0.85rem; } [data-theme="lego"] .section-num { font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 0.04em; color: #FFD500; background: var(--ink); padding: 0.3rem 0.55rem; border-radius: 4px; font-size: 0.7rem; } [data-theme="lego"] .section-title { font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 0.1em; font-size: 0.8rem; text-transform: uppercase; color: var(--ink); } /* Brand marquee bar */ [data-theme="lego"] .brands { border-top: 4px solid var(--ink); background: var(--surface); } [data-theme="lego"] .brands-eyebrow { font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 0.08em; color: #FFD500; background: var(--accent); padding: 0.35rem 0.7rem; border: 3px solid var(--ink); border-radius: 4px; box-shadow: 0 3px 0 var(--ink); font-size: 0.65rem; } [data-theme="lego"] .brand-logo { filter: grayscale(1) contrast(1.1) brightness(0.15); opacity: 0.85; } [data-theme="lego"] .work { border-top: 4px solid var(--ink); } [data-theme="lego"] .work-grid { gap: 1.25rem; background: transparent; } [data-theme="lego"] .work-card { background: var(--surface); border: 4px solid var(--ink); border-radius: 10px; box-shadow: 0 8px 0 var(--ink); overflow: visible; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } [data-theme="lego"] .work-card::before, [data-theme="lego"] .work-card::after { content: ''; position: absolute; top: -16px; width: 24px; height: 24px; background: #FFD500; border: 3px solid var(--ink); border-radius: 50%; z-index: 3; } [data-theme="lego"] .work-card::before { left: 18%; } [data-theme="lego"] .work-card::after { left: 42%; } [data-theme="lego"] .work-card:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--ink); } [data-theme="lego"] .work-card:nth-child(1) { background: #FFD500; } [data-theme="lego"] .work-card:nth-child(2) { background: var(--brick-blue); color: #FFFFFF; } [data-theme="lego"] .work-card:nth-child(2) .work-tag, [data-theme="lego"] .work-card:nth-child(2) .work-title, [data-theme="lego"] .work-card:nth-child(2) .work-role { color: #FFFFFF; } [data-theme="lego"] .work-card:nth-child(3) { background: var(--accent); color: #FFFFFF; } [data-theme="lego"] .work-card:nth-child(3) .work-tag, [data-theme="lego"] .work-card:nth-child(3) .work-title, [data-theme="lego"] .work-card:nth-child(3) .work-role { color: #FFFFFF; } [data-theme="lego"] .work-card-meta { border-top: 4px solid var(--ink); padding: 1.5rem 1.5rem 1.75rem; } [data-theme="lego"] .work-tag { font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 0.06em; font-size: 0.6rem; text-transform: uppercase; color: var(--ink); } [data-theme="lego"] .work-title { font-family: 'Fredoka', sans-serif; font-weight: 700; text-transform: none; letter-spacing: -0.005em; font-size: clamp(1rem, 1.8vw, 1.55rem); color: var(--ink); } [data-theme="lego"] .work-card:hover .work-title { color: var(--ink); } [data-theme="lego"] .work-role { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em; font-style: normal; color: var(--ink); } [data-theme="lego"] .about { border-top: 4px solid var(--ink); } [data-theme="lego"] .about-pull { font-family: 'Bungee', sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0; color: #FFD500; background: var(--ink); padding: 1.5rem 1.75rem; border-radius: 10px; box-shadow: 6px 6px 0 var(--accent); font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.1; } [data-theme="lego"] .about-bio-lead { font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: 0; font-size: clamp(0.95rem, 1.15vw, 1.1rem); color: var(--ink); } [data-theme="lego"] .about-bio p:not(.about-bio-lead) { font-family: 'Fredoka', sans-serif; font-weight: 500; letter-spacing: 0; color: var(--ink); } [data-theme="lego"] .skill-label { font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: 0.04em; font-size: 0.6rem; color: #FFD500; background: var(--ink); padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-block; } [data-theme="lego"] .skill-value { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 0.85rem; letter-spacing: 0; color: var(--ink); } [data-theme="lego"] .about-skills { border-top: 3px solid var(--ink); } [data-theme="lego"] .contact { background: var(--accent); border-top: 4px solid var(--ink); background-image: radial-gradient(circle at center, rgba(255,255,255,0.10) 2.5px, transparent 3px); background-size: 32px 32px; } [data-theme="lego"] .contact-num { font-family: 'Bungee', sans-serif; color: var(--ink); background: #FFD500; padding: 0.3rem 0.55rem; border-radius: 4px; font-size: 0.7rem; display: inline-block; } [data-theme="lego"] .contact-headline { font-family: 'Bungee', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(2.5rem, 7vw, 7rem); line-height: 0.95; color: #FFFFFF; text-shadow: 5px 5px 0 var(--ink); } [data-theme="lego"] .contact-headline em { font-style: normal; text-transform: uppercase; color: #FFD500; text-shadow: 5px 5px 0 var(--ink); } [data-theme="lego"] .contact-email { font-family: 'Bungee', sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(0.9rem, 1.8vw, 1.5rem); color: var(--ink); background: #FFD500; padding: 0.5rem 1rem; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 4px 0 var(--ink); display: inline-block; } [data-theme="lego"] .contact-email:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); } [data-theme="lego"] .contact-links a { font-family: 'Fredoka', sans-serif; font-weight: 700; letter-spacing: 0.08em; font-size: 0.7rem; text-transform: uppercase; color: var(--ink); background: #FFFFFF; padding: 0.4rem 0.85rem; border: 3px solid var(--ink); border-radius: 4px; box-shadow: 0 3px 0 var(--ink); } [data-theme="lego"] .contact-links a:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); background: #FFD500; } [data-theme="lego"] .footer { background: var(--ink); color: #FFD500; font-family: 'Bungee', sans-serif; font-size: 0.55rem; letter-spacing: 0.12em; font-weight: 400; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════ THEME 5 · WINDOWS 95 Classic gray chrome, teal desktop, raised/sunken borders ══════════════════════════════════════════════════════════ */ [data-theme="win95"] { --bg: #C0C0C0; --ink: #000000; --ink-2: #444444; --accent: #000080; --surface: #C0C0C0; --border: #808080; --font-display: 'Courier New', Courier, monospace; --font-ui: 'Courier New', Courier, monospace; } [data-theme="win95"] body { background: #008080; background-image: none; cursor: default; } /* Kill the custom cursor in Win95 */ [data-theme="win95"] .cursor { display: none; } /* ── Window chrome helper ──────────────────────────── */ [data-theme="win95"] .hero, [data-theme="win95"] .work, [data-theme="win95"] .about { background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 2px 2px 0 0 #404040; max-width: calc(var(--max-w) - 30px); margin: 10px auto; padding-top: 0; } /* Title bars via ::before */ [data-theme="win95"] .hero::before, [data-theme="win95"] .work::before, [data-theme="win95"] .about::before { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, #000080 0%, #1084D0 100%); color: #FFFFFF; font-family: 'Courier New', monospace; font-size: 0.7rem; font-weight: bold; padding: 3px 6px; margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); margin-bottom: clamp(2rem, 5vh, 3.5rem); letter-spacing: 0; text-transform: none; user-select: none; } [data-theme="win95"] .hero::before { content: '📁 Portfolio.exe ─ □ ✕'; } [data-theme="win95"] .work::before { content: '🖥 Work.exe ─ □ ✕'; } [data-theme="win95"] .about::before { content: '👤 About.exe ─ □ ✕'; } /* ── Navigation = menu bar ─────────────────────────── */ [data-theme="win95"] .nav { background: #C0C0C0; border-bottom: 2px solid #808080; box-shadow: 0 2px 0 #404040; } [data-theme="win95"] .nav.scrolled { background: #C0C0C0; backdrop-filter: none; } [data-theme="win95"] .nav-logo { background: linear-gradient(90deg, #000080, #1084D0); color: #FFFFFF; padding: 2px 10px; font-size: 0.72rem; font-weight: bold; letter-spacing: 0; text-transform: none; } [data-theme="win95"] .nav-links a { background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; padding: 1px 8px; font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: #000000; font-family: 'Courier New', monospace; } [data-theme="win95"] .nav-links a:hover { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; color: #000000; } [data-theme="win95"] .nav-links a::after { display: none; } /* ── Hero text ─────────────────────────────────────── */ [data-theme="win95"] .hero-eyebrow { font-size: 0.75rem; color: #000080; font-weight: bold; letter-spacing: 0; text-transform: none; } [data-theme="win95"] .hero-headline { font-size: clamp(1.4rem, 4vw, 3rem); font-weight: bold; letter-spacing: 0; line-height: 1.25; color: #000080; text-shadow: 1px 1px 0 #FFFFFF; } [data-theme="win95"] .hero-headline em { font-style: normal; color: #000080; } [data-theme="win95"] .hero-sub { font-size: 0.8rem; line-height: 1.65; font-weight: normal; } [data-theme="win95"] .scroll-hint { font-size: 0.65rem; letter-spacing: 0; color: #444; } [data-theme="win95"] .scroll-line { background: #000080; } /* ── Avatar frame ──────────────────────────────────── */ [data-theme="win95"] .avatar-ring { animation: none; } [data-theme="win95"] .ring-text { fill: #000080; font-size: 9px; letter-spacing: 1px; } [data-theme="win95"] .pixel-frame { border: 2px solid #808080; background: #C0C0C0; box-shadow: 2px 2px 0 #FFFFFF inset, -1px -1px 0 #404040 inset; } /* ── Section headers ───────────────────────────────── */ [data-theme="win95"] .section-header { border-bottom: 2px solid #808080; } [data-theme="win95"] .section-num { font-weight: bold; color: #000080; letter-spacing: 0; } [data-theme="win95"] .section-title { font-size: 0.72rem; letter-spacing: 0; text-transform: none; font-weight: bold; } /* ── Work cards ────────────────────────────────────── */ [data-theme="win95"] .work-grid { gap: 8px; background: transparent; } [data-theme="win95"] .work-card { background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; } [data-theme="win95"] .work-card:hover { transform: none; box-shadow: none; } [data-theme="win95"] .work-card-meta { border-top: 2px solid #808080; } [data-theme="win95"] .work-tag { font-size: 0.62rem; letter-spacing: 0; text-transform: none; color: #000080; font-weight: bold; } [data-theme="win95"] .work-title { font-size: 0.8rem; line-height: 1.4; letter-spacing: 0; } [data-theme="win95"] .work-card:hover .work-title { color: #000080; text-shadow: none; } [data-theme="win95"] .work-role { font-size: 0.65rem; font-style: italic; } /* ── About ─────────────────────────────────────────── */ [data-theme="win95"] .about-body { gap: 2rem; } [data-theme="win95"] .about-pull { font-size: clamp(0.9rem, 1.8vw, 1.35rem); font-style: italic; font-weight: normal; line-height: 1.5; color: #000080; position: static; background: #DFDFDF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; padding: 1rem; } [data-theme="win95"] .about-bio-lead { font-size: 0.82rem; line-height: 1.65; } [data-theme="win95"] .about-bio p:not(.about-bio-lead) { font-size: 0.76rem; line-height: 1.65; } [data-theme="win95"] .skill-label { font-size: 0.65rem; letter-spacing: 0; text-transform: none; font-weight: bold; color: #000080; } [data-theme="win95"] .skill-value { font-size: 0.72rem; } [data-theme="win95"] .about-skills { border-top: 2px solid #808080; } /* ── Contact ───────────────────────────────────────── */ [data-theme="win95"] .contact { background: #000080; } [data-theme="win95"] .contact-inner { padding-top: clamp(3rem, 7vh, 5rem); } [data-theme="win95"] .contact-num { color: rgba(255,255,255,0.35); } [data-theme="win95"] .contact-headline { font-size: clamp(1.3rem, 3.5vw, 2.75rem); font-weight: bold; letter-spacing: 0; line-height: 1.3; color: #FFFFFF; text-shadow: 1px 1px 0 #000040; } [data-theme="win95"] .contact-headline em { font-style: normal; color: #FFD700; } [data-theme="win95"] .contact-email { font-family: 'Courier New', monospace; font-size: clamp(0.85rem, 1.5vw, 1.1rem); font-style: normal; border: 2px solid rgba(255,255,255,0.4); padding: 4px 14px; letter-spacing: 0; } [data-theme="win95"] .contact-email:hover { color: #FFD700; border-color: #FFD700; } [data-theme="win95"] .contact-links a { font-size: 0.65rem; letter-spacing: 0; text-transform: none; } [data-theme="win95"] .footer { background: #C0C0C0; border-top: 2px solid #808080; color: #000000; font-size: 0.65rem; letter-spacing: 0; text-transform: none; }