/* ============================================================ Dark developer portfolio theme Accent: terminal green + cyan on deep navy ============================================================ */ :root { --bg: #0a0e1a; --bg-soft: #0e1426; --surface: #111a2e; --surface-2: #16203a; --border: #1f2a44; --text: #cbd5e1; --muted: #64748b; --accent: #00ff9c; --accent-dim: rgba(0, 255, 156, 0.15); --cyan: #00d9ff; --warn: #ffd166; --danger: #ff6b6b; --mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius: 14px; --maxw: 1080px; --nav-h: 64px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font-display: var(--mono); --on-accent: #04231a; --nav-bg: rgba(10, 14, 26, 0.72); --nav-bg-strong: rgba(10, 14, 26, 0.92); } /* ---------------- Project theme palettes (applied to ) ---------------- */ body[data-theme="restaurant"] { --bg: #faf6f0; --bg-soft: #f2ece2; --surface: #ffffff; --surface-2: #f2ece2; --border: rgba(34, 29, 23, 0.14); --text: #221d17; --muted: #6b6156; --accent: #c2410c; --accent-dim: rgba(194, 65, 12, 0.12); --cyan: #9a3412; --nav-bg: rgba(250, 246, 240, 0.82); --nav-bg-strong: rgba(250, 246, 240, 0.96); --on-accent: #ffffff; --font-display: "Playfair Display", Georgia, serif; } body[data-theme="futsurf"] { --bg: #0a192f; --bg-soft: #0d1f3c; --surface: #112240; --surface-2: #1a3054; --border: rgba(148, 163, 184, 0.16); --text: #cbd5e1; --muted: #94a3b8; --accent: #64ffda; --accent-dim: rgba(100, 255, 218, 0.12); --cyan: #64ffda; --nav-bg: rgba(10, 25, 47, 0.82); --nav-bg-strong: rgba(10, 25, 47, 0.96); --on-accent: #0a192f; --font-display: var(--mono); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--on-accent); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } .mono { font-family: var(--mono); } .accent { color: var(--accent); } .warn { color: var(--warn); } .prompt { color: var(--cyan); font-weight: 700; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 100px 0; position: relative; } .section__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 40px; letter-spacing: -0.02em; } .section__title .accent { font-size: 0.75em; margin-right: 8px; } /* ---------------- Scroll progress ---------------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--cyan)); z-index: 1000; box-shadow: 0 0 12px var(--accent); } /* ---------------- Buttons ---------------- */ .btn { display: inline-block; padding: 14px 28px; border-radius: 10px; font-family: var(--mono); font-size: 0.9rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); will-change: transform; } .btn--sm { padding: 8px 16px; font-size: 0.8rem; } .btn--primary { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 0 24px var(--accent-dim); } .btn--primary:hover { box-shadow: 0 0 40px rgba(0, 255, 156, 0.45); transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--text); border-color: var(--border); } .btn--outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 20px var(--accent-dim); transform: translateY(-2px); } /* ---------------- Navigation ---------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; z-index: 900; transition: border-color 0.3s, background 0.3s; } .nav.scrolled { border-bottom-color: var(--border); background: var(--nav-bg-strong); } .nav__inner { max-width: var(--maxw); margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .nav__logo { font-family: var(--mono); color: var(--text); text-decoration: none; font-size: 1.05rem; } .nav__logo:hover { color: var(--accent); } .nav__menu { display: flex; gap: 28px; align-items: center; list-style: none; } .nav__link { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); text-decoration: none; position: relative; padding: 6px 0; transition: color 0.2s; } .nav__link .accent { font-size: 0.8em; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--accent); transition: width 0.3s var(--ease); } .nav__link:hover, .nav__link.active { color: var(--accent); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } /* hamburger */ .nav__toggle { display: none; background: none; border: none; cursor: pointer; width: 34px; height: 34px; flex-direction: column; justify-content: center; gap: 6px; padding: 4px; } .nav__toggle span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; } .nav__toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ---------------- Hero ---------------- */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 255, 156, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 156, 0.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 40%, transparent 100%); transform: translateZ(0); } .hero__glow { position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(0, 255, 156, 0.12) 0%, transparent 60%); filter: blur(10px); pointer-events: none; } .hero__content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; width: 100%; } .hero__intro { color: var(--cyan); margin-bottom: 18px; font-size: 0.95rem; } .hero__title { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; } .hero__title .accent { color: var(--accent); } .hero__role { font-size: clamp(1.05rem, 2.4vw, 1.5rem); color: var(--text); min-height: 1.6em; margin-bottom: 22px; } .caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 4px; vertical-align: text-bottom; background: var(--accent); animation: blink 1s steps(1) infinite; } .caret--static { animation: blink 1s steps(1) infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero__bio { max-width: 46ch; color: var(--muted); margin-bottom: 34px; } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: var(--muted); text-decoration: none; font-size: 0.8rem; animation: float 2s ease-in-out infinite; z-index: 2; } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* terminal widget */ .hero__terminal { position: relative; } .terminal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 255, 156, 0.08); overflow: hidden; } .terminal__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); } .terminal__title { margin-left: 6px; letter-spacing: 0.04em; } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot--r { background: #ff5f57; } .dot--y { background: #febc2e; } .dot--g { background: #28c840; } .terminal__body { padding: 20px; font-size: 0.85rem; color: var(--text); } .terminal__body p { white-space: pre-wrap; line-height: 1.7; } .terminal__body .blank { line-height: 0.6; } /* ---------------- About ---------------- */ .about__grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: center; } .about__text p { margin-bottom: 16px; color: var(--text); max-width: 62ch; } .about__text strong { color: var(--accent); font-weight: 600; } .about__muted { color: var(--muted) !important; font-size: 0.95rem; } .about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 12px; text-align: center; transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; } .stat:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 0 24px var(--accent-dim); } .stat__num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--accent); } .stat__label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ---------------- Skills ---------------- */ .skills { display: flex; flex-wrap: wrap; gap: 12px; max-width: 720px; } .chip { font-family: var(--mono); font-size: 0.82rem; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); } .chip:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px var(--accent-dim); transform: translateY(-2px); } .chip--link { text-decoration: none; display: inline-block; margin-right: 10px; margin-bottom: 10px; } .skills__note { margin-top: 26px; font-size: 0.78rem; color: var(--muted); } /* ---------------- Projects ---------------- */ .pbands { display: flex; flex-direction: column; gap: 28px; } .pband { --pb-bg: var(--surface); --pb-text: var(--text); --pb-muted: var(--muted); --pb-accent: var(--accent); --pb-cyan: var(--cyan); --pb-border: var(--border); position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding: 44px 48px; border-radius: 18px; border: 1px solid var(--pb-border); background: var(--pb-bg); color: var(--pb-text); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .pband::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pb-accent), transparent); opacity: 0.75; } .pband.reveal:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35); } /* restaurant — warm cream / terracotta, serif name */ .pband--restaurant { --pb-bg: linear-gradient(135deg, #faf6f0 0%, #f2ece2 100%); --pb-text: #221d17; --pb-muted: #6b6156; --pb-accent: #c2410c; --pb-cyan: #9a3412; --pb-border: rgba(34, 29, 23, 0.16); } .pband--restaurant .pband__name { font-family: "Playfair Display", Georgia, serif; } /* futsurf brand lockup */ .pband--futsurf .pband__name--logo { font-family: var(--sans); font-weight: 700; letter-spacing: -0.05em; color: #ffffff; } .pband--futsurf .pband__logo-fut { color: var(--pb-accent); } /* futsurf — deep navy glass / mint */ .pband--futsurf { --pb-bg: linear-gradient(135deg, #0d1f3c 0%, #112240 100%); --pb-text: #cbd5e1; --pb-muted: #94a3b8; --pb-accent: #64ffda; --pb-cyan: #64ffda; --pb-border: rgba(100, 255, 218, 0.18); } .pband--futsurf::before { opacity: 1; box-shadow: 0 0 30px rgba(100, 255, 218, 0.35); } .pband__rail { display: flex; align-items: center; } .pband__index { font-size: 0.9rem; color: var(--pb-accent); border: 1px solid var(--pb-border); border-radius: 999px; padding: 10px 18px; white-space: nowrap; } .pband__body { min-width: 0; } .pband__eyebrow { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--pb-accent); margin-bottom: 10px; } .pband__name { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--pb-text); margin-bottom: 10px; } .pband__desc { color: var(--pb-muted); max-width: 52ch; margin-bottom: 16px; } .pband__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .pband__tags li { font-size: 0.7rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--pb-border); background: color-mix(in srgb, var(--pb-text) 6%, transparent); color: var(--pb-cyan); } .pband__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; } .pband__links { display: flex; gap: 18px; } .pband .badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pb-accent) 40%, transparent); color: var(--pb-accent); background: color-mix(in srgb, var(--pb-accent) 10%, transparent); } .pband .badge .dot { width: 8px; height: 8px; background: var(--pb-accent); animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pb-accent) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .pband .link { color: var(--pb-accent); text-decoration: none; font-size: 0.85rem; transition: text-shadow 0.2s; } .pband .link:hover { text-shadow: 0 0 14px color-mix(in srgb, var(--pb-accent) 70%, transparent); } .pband .link--ghost { color: var(--pb-muted); } .pband .link--ghost:hover { color: var(--pb-cyan); text-shadow: 0 0 14px color-mix(in srgb, var(--pb-cyan) 70%, transparent); } /* ---------------- Contact ---------------- */ .contact__lead { font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--text); margin-bottom: 14px; } .contact__sub { color: var(--muted); margin-bottom: 32px; } .contact__links { margin-bottom: 40px; } .contact__cta { margin-top: 8px; } /* ---------------- Footer ---------------- */ .footer { border-top: 1px solid var(--border); padding: 60px 0 40px; background: var(--bg-soft); } .footer__term { cursor: pointer; font-size: 0.85rem; line-height: 2; max-width: 46ch; } .footer__hint { color: var(--muted); font-size: 0.72rem; margin-top: 10px; } .footer__legal { margin-top: 32px; color: var(--muted); font-size: 0.78rem; } /* ---------------- Easter egg terminal ---------------- */ .egg { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .egg.open { display: flex; } .egg__backdrop { position: absolute; inset: 0; background: rgba(4, 7, 14, 0.8); backdrop-filter: blur(6px); } .egg__window { position: relative; width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden; animation: pop 0.3s var(--ease); } @keyframes pop { from { transform: scale(0.92) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .egg__body { padding: 20px; min-height: 160px; font-size: 0.85rem; line-height: 1.8; max-height: 40vh; overflow-y: auto; } .egg__body p { white-space: pre-wrap; } .egg__body .accent { color: var(--accent); } .egg__body .cyan { color: var(--cyan); } .egg__input { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding: 14px 20px; background: var(--bg-soft); } .egg__input input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 0.85rem; caret-color: var(--accent); } /* ---------------- Back to top ---------------- */ .to-top { position: fixed; right: 24px; bottom: 24px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 0.75rem; padding: 10px 14px; border-radius: 8px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease), color 0.2s, border-color 0.2s; z-index: 800; } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { color: var(--accent); border-color: var(--accent); } /* ---------------- Reveal on scroll ---------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.visible { opacity: 1; transform: none; } /* stagger for project bands */ .pbands .reveal:nth-child(2) { transition-delay: 0.08s; } /* ---------------- Responsive ---------------- */ @media (max-width: 900px) { .hero__content { grid-template-columns: 1fr; gap: 40px; } .hero__terminal { max-width: 560px; } .pband { grid-template-columns: 1fr; gap: 22px; padding: 34px 28px; } .pband__rail { display: none; } .pband__meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } .about__grid { grid-template-columns: 1fr; gap: 28px; } .nav__toggle { display: flex; } .nav__menu { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--nav-bg-strong); border-bottom: 1px solid var(--border); padding: 12px 24px 20px; transform: translateY(-110%); transition: transform 0.35s var(--ease); align-items: flex-start; } .nav__menu.open { transform: none; } .nav__menu li { width: 100%; } .nav__link { display: block; padding: 12px 0; border-bottom: 1px solid rgba(31, 42, 68, 0.5); } .nav__menu .btn { margin-top: 14px; } } @media (max-width: 560px) { .section { padding: 70px 0; } .about__stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .stat { padding: 14px 8px; } .hero__actions .btn { width: 100%; text-align: center; } .footer__term { font-size: 0.78rem; } } /* ---------------- Reduced motion ---------------- */ @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; } .reveal { opacity: 1; transform: none; } } /* ---------------- Print (page doubles as CV) ---------------- */ @media print { :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --bg-soft: #fff; --text: #111; --muted: #444; --border: #ccc; --accent: #0a7a50; --cyan: #0a4a7a; } body { background: #fff; color: #111; } .nav, .scroll-progress, .hero__scroll, .to-top, .egg, .hero__glow, .hero__grid, .nav__toggle, .footer__hint { display: none !important; } .section { padding: 40px 0; } .pband, .stat, .chip { break-inside: avoid; border-color: #ccc; box-shadow: none !important; } .pband, .pband--restaurant, .pband--futsurf { --pb-bg: #fff; --pb-text: #111; --pb-muted: #444; --pb-accent: #0a7a50; --pb-cyan: #0a4a7a; --pb-border: #ccc; background: #fff; color: #111; } .pband__name { font-family: var(--mono); } .pband--futsurf .pband__name--logo { font-family: var(--mono); color: #111; } .pband--futsurf .pband__logo-fut { color: #0a7a50; } .pband__tags, .pband__links, .pband__rail { display: none; } .hero { min-height: auto; padding-top: 0; } .hero__content { grid-template-columns: 1fr; } .hero__terminal { display: none; } a { color: #0a4a7a; text-decoration: none; } .reveal { opacity: 1; transform: none; } }