/* ============================================================ Hacker / Terminal Mode Activated by adding class "hacker-mode" to ============================================================ */ /* --- Mode toggle button (visible in professional mode) --- */ #mode-toggle { position: absolute; bottom: 1.5em; right: 1.5em; background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.35); font-family: 'Courier New', Consolas, monospace; font-size: 0.75em; padding: 0.3em 0.6em; border-radius: 3px; cursor: pointer; letter-spacing: 0.05em; transition: color 0.2s, border-color 0.2s, opacity 0.2s; z-index: 10; } #mode-toggle:hover { color: #49bf9d; border-color: #49bf9d; } /* --- Hide professional content in hacker mode --- */ body.hacker-mode #header, body.hacker-mode #main, body.hacker-mode #footer { display: none !important; } /* --- Hacker shell: hidden by default --- */ #hacker-shell { display: none; } body.hacker-mode #hacker-shell { display: flex; flex-direction: column; position: fixed; inset: 0; background: #0a0c0a; color: #00e676; font-family: 'Courier New', Consolas, 'Lucida Console', monospace; font-size: 14px; line-height: 1.5; overflow: hidden; z-index: 9999; } /* CRT scanline overlay */ body.hacker-mode #hacker-shell::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px ); pointer-events: none; z-index: 1; } /* --- Terminal title bar --- */ #terminal-header { flex-shrink: 0; display: flex; align-items: center; gap: 6px; background: #1a1d1a; border-bottom: 1px solid #2a2d2a; padding: 6px 12px; user-select: none; } .th-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .th-dot.red { background: #ff5f57; } .th-dot.yellow { background: #febc2e; } .th-dot.green { background: #28c840; } #terminal-title { flex: 1; text-align: center; color: #4a6a4a; font-size: 0.85em; letter-spacing: 0.03em; } #exit-hacker { background: none; border: 1px solid #2a4a2a; color: #4a8a4a; font-family: inherit; font-size: 0.78em; padding: 2px 8px; border-radius: 3px; cursor: pointer; letter-spacing: 0.04em; transition: color 0.15s, border-color 0.15s; } #exit-hacker:hover { color: #00e676; border-color: #00e676; } /* --- Scrollable output area --- */ #terminal-output { flex: 1; overflow-y: auto; padding: 16px 20px 8px; position: relative; z-index: 2; scrollbar-width: thin; scrollbar-color: #2a4a2a #0a0c0a; } #terminal-output::-webkit-scrollbar { width: 6px; } #terminal-output::-webkit-scrollbar-track { background: #0a0c0a; } #terminal-output::-webkit-scrollbar-thumb { background: #2a4a2a; border-radius: 3px; } .t-line { white-space: pre; color: #00e676; text-shadow: 0 0 6px rgba(0, 230, 118, 0.4); min-height: 1.5em; } .t-line.dim { color: #3a8a5a; text-shadow: none; } .t-line.bright { color: #69ff9e; text-shadow: 0 0 10px rgba(105, 255, 158, 0.6); } .t-line.cmd-echo { color: #a0c8a0; text-shadow: none; } .t-line.error { color: #ff6b6b; text-shadow: 0 0 6px rgba(255, 107, 107, 0.4); } .t-line.skull { color: #00c853; font-size: 13px; text-shadow: 0 0 8px rgba(0, 200, 83, 0.5); } /* Boot sequence fade-in */ @keyframes fadeInLine { from { opacity: 0; } to { opacity: 1; } } .t-line.boot { animation: fadeInLine 0.15s ease-in both; } /* --- Input row --- */ #terminal-input-row { flex-shrink: 0; display: flex; align-items: center; padding: 8px 20px 14px; border-top: 1px solid #1a2a1a; position: relative; z-index: 2; } #prompt { color: #69ff9e; text-shadow: 0 0 8px rgba(105, 255, 158, 0.5); white-space: pre; flex-shrink: 0; user-select: none; } #terminal-input { flex: 1; background: none; border: none; outline: none; color: #00e676; font-family: inherit; font-size: inherit; line-height: inherit; caret-color: transparent; /* hide native caret; we use CSS cursor */ text-shadow: 0 0 6px rgba(0, 230, 118, 0.4); padding: 0; margin: 0; } /* Blinking block cursor after the input text */ @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } #cursor-block { display: inline-block; width: 8px; height: 1.1em; background: #00e676; box-shadow: 0 0 8px rgba(0, 230, 118, 0.8); vertical-align: text-bottom; animation: blink 1s step-start infinite; flex-shrink: 0; margin-left: 1px; }