/* ============================================================ Terminal-themed portfolio — Niket Gupta Plain CSS, no build step. Theme is controlled by the data-theme attribute on (see script.js `theme` cmd). ============================================================ */ :root { /* Default theme: classic green phosphor */ --bg: #0d0d0d; --bg-elev: #121212; --fg: #00ff41; --dim: #1f9e3a; --accent: #57ff7a; --muted: #0c6b22; --glow: rgba(0, 255, 65, 0.45); --selection: rgba(0, 255, 65, 0.25); } html[data-theme="amber"] { /* Retro amber CRT */ --bg: #1a1a1a; --bg-elev: #1f1b14; --fg: #ffb000; --dim: #b87b06; --accent: #ffd166; --muted: #8a5a04; --glow: rgba(255, 176, 0, 0.45); --selection: rgba(255, 176, 0, 0.25); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--fg); font-family: "Courier New", "DejaVu Sans Mono", ui-monospace, monospace; font-size: 16px; line-height: 1.5; overflow: hidden; text-shadow: 0 0 4px var(--glow); transition: background 0.3s ease, color 0.3s ease; } ::selection { background: var(--selection); } /* ---------------- CRT scanline + flicker overlays ---------------- */ .crt-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 3px ); background-size: 100% 4px; mix-blend-mode: multiply; } /* very subtle whole-screen flicker + vignette */ .crt-flicker { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100% ); animation: flicker 6s infinite steps(60); opacity: 0.9; } @keyframes flicker { 0%, 100% { opacity: 0.9; } 47% { opacity: 0.88; } 48% { opacity: 0.78; } 49% { opacity: 0.9; } 92% { opacity: 0.86; } 93% { opacity: 0.95; } } /* ---------------- Terminal window ---------------- */ .terminal { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(960px, 100%); height: 100vh; height: 100dvh; margin: 0 auto; background: var(--bg); border-left: 1px solid var(--muted); border-right: 1px solid var(--muted); } .terminal-header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--muted); user-select: none; } .dots { display: flex; gap: 8px; } .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .dot-red { background: #ff5f56; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #27c93f; } .terminal-header .title { flex: 1; text-align: center; font-size: 0.85rem; color: var(--dim); text-shadow: none; letter-spacing: 0.5px; } .header-spacer { width: 52px; /* balances the dots so title stays centered */ } /* ---------------- Scrollable body ---------------- */ .terminal-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 28px; scrollbar-color: var(--dim) var(--bg); scrollbar-width: thin; } /* Custom terminal-style scrollbar (WebKit/Blink) */ .terminal-body::-webkit-scrollbar { width: 12px; } .terminal-body::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--muted); } .terminal-body::-webkit-scrollbar-thumb { background: var(--dim); border: 2px solid var(--bg); border-radius: 0; box-shadow: 0 0 6px var(--glow); } .terminal-body::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ---------------- Output content ---------------- */ #output { white-space: pre-wrap; word-break: break-word; } .line { animation: fadein 0.18s ease-out; } @keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } /* echoed command line: prompt + the command the user typed */ .echo .prompt { margin-right: 8px; } .prompt { color: var(--accent); font-weight: bold; text-shadow: 0 0 5px var(--glow); white-space: nowrap; } .cmd-text { color: var(--fg); } /* generic helpers used by command output */ .accent { color: var(--accent); } .dim { color: var(--dim); } .muted { color: var(--muted); } .error { color: #ff5f56; text-shadow: 0 0 4px rgba(255, 95, 86, 0.5); } .label { color: var(--accent); font-weight: bold; } #output a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } #output a:hover { background: var(--selection); } /* ASCII art header */ .ascii { color: var(--accent); text-shadow: 0 0 8px var(--glow); line-height: 1.05; font-size: clamp(6px, 1.7vw, 13px); overflow-x: auto; white-space: pre; margin-bottom: 6px; } .block { margin: 6px 0 14px; } .help-grid { display: grid; grid-template-columns: max-content 1fr; gap: 2px 18px; } .help-grid .cmd { color: var(--accent); } .skill-row { display: block; } .skill-row .label { display: inline-block; min-width: 11ch; } .project { margin-bottom: 10px; } .project .pname { color: var(--accent); font-weight: bold; } /* ---------------- Input line ---------------- */ .input-line { display: flex; align-items: center; margin-top: 2px; } .input-line .prompt { margin-right: 8px; } #cmd-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--fg); font-family: inherit; font-size: inherit; text-shadow: 0 0 4px var(--glow); caret-color: transparent; /* we draw our own blinking cursor */ } .cursor { display: inline-block; width: 9px; height: 1.1em; margin-left: -2px; background: var(--fg); box-shadow: 0 0 6px var(--glow); animation: blink 1s steps(1) infinite; vertical-align: text-bottom; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---------------- Responsive ---------------- */ @media (max-width: 600px) { body { font-size: 14px; } .terminal { border-left: none; border-right: none; } .terminal-body { padding: 12px 12px 22px; } .header-spacer { width: 40px; } } /* ---------------- Reduced motion ---------------- */ @media (prefers-reduced-motion: reduce) { .crt-flicker { animation: none; } .cursor { animation: none; opacity: 1; } .line { animation: none; } }