/* Hacker Terminal Theme Styles - Enhanced Version */ /* Applied when .hacker-mode class is on element */ /* Base styles for hacker mode */ .hacker-mode { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 14px; letter-spacing: 0.02em; } /* Background and text colors - Pure black with bright accents */ .hacker-mode body { background-color: #000000; color: #00ff41; } .hacker-mode .bg-gray-50, .hacker-mode .dark\:bg-gray-900 { background-color: #000000 !important; } .hacker-mode .bg-white, .hacker-mode .dark\:bg-gray-800 { background-color: #0a0a0a !important; } .hacker-mode .bg-gray-100, .hacker-mode .dark\:bg-gray-700 { background-color: #1a1a1a !important; } /* Text colors - Green for primary, red for accents */ .hacker-mode .text-gray-900, .hacker-mode .dark\:text-white, .hacker-mode .text-gray-800, .hacker-mode .dark\:text-gray-100 { color: #00ff41 !important; } .hacker-mode .text-gray-500, .hacker-mode .dark\:text-gray-400 { color: #00aa00 !important; } .hacker-mode .text-gray-600, .hacker-mode .dark\:text-gray-300, .hacker-mode .text-gray-700 { color: #00cc00 !important; } /* Borders - Brighter red with glow */ .hacker-mode .border-gray-200, .hacker-mode .dark\:border-gray-700 { border-color: #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); } .hacker-mode .border-gray-300, .hacker-mode .dark\:border-gray-600 { border-color: #ff3333 !important; box-shadow: 0 0 8px rgba(255, 0, 0, 0.6); } /* Primary accent - Bright red with glow */ .hacker-mode .bg-indigo-600, .hacker-mode .hover\:bg-indigo-700 { background-color: #ff0000 !important; box-shadow: 0 0 15px rgba(255, 0, 0, 0.7); border: 1px solid #ff3333; } .hacker-mode .text-indigo-600, .hacker-mode .dark\:text-indigo-400, .hacker-mode .dark\:text-indigo-100, .hacker-mode .dark\:text-indigo-300 { color: #ff0000 !important; text-shadow: 0 0 5px rgba(255, 0, 0, 0.8); } .hacker-mode .hover\:bg-indigo-700:hover { background-color: #ff3333 !important; box-shadow: 0 0 20px rgba(255, 0, 0, 0.9); } /* Success states - Bright green with glow */ .hacker-mode .bg-green-600, .hacker-mode .text-green-600, .hacker-mode .bg-green-100, .hacker-mode .dark\:bg-green-900 { background-color: rgba(0, 255, 65, 0.15) !important; color: #00ff41 !important; border: 1px solid #00ff41; } .hacker-mode .text-green-800, .hacker-mode .dark\:text-green-200, .hacker-mode .dark\:text-green-300, .hacker-mode .dark\:text-green-400 { color: #00ff41 !important; text-shadow: 0 0 8px rgba(0, 255, 65, 0.8); } /* Enhanced glow effects on hover */ .hacker-mode button:hover, .hacker-mode a:hover { text-shadow: 0 0 10px rgba(255, 0, 0, 1); transition: all 0.2s ease; } .hacker-mode .bg-indigo-600:hover { box-shadow: 0 0 20px rgba(255, 0, 0, 0.9), 0 0 40px rgba(255, 0, 0, 0.5); } /* Code blocks - Bright green on pure black */ .hacker-mode pre, .hacker-mode code { background-color: #000000 !important; color: #00ff41 !important; border: 1px solid #00ff41; box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); font-size: 13px; } /* Cards with terminal brackets - Fixed positioning */ .hacker-mode .rounded-lg, .hacker-mode .rounded-md, .hacker-mode .shadow { position: relative; border: 1px solid #ff0000 !important; box-shadow: 0 0 10px rgba(255, 0, 0, 0.4) !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .hacker-mode .rounded-lg::before, .hacker-mode .rounded-md::before, .hacker-mode .shadow::before { content: '['; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: #ff0000; font-size: 1.2em; font-weight: bold; text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); } .hacker-mode .rounded-lg::after, .hacker-mode .rounded-md::after, .hacker-mode .shadow::after { content: ']'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: #ff0000; font-size: 1.2em; font-weight: bold; text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); } /* Status badges - Enhanced colors */ .hacker-mode .bg-yellow-100, .hacker-mode .dark\:bg-yellow-900, .hacker-mode .dark\:bg-yellow-900\/20 { background-color: rgba(255, 255, 0, 0.15) !important; border: 1px solid #ffff00; color: #ffff00 !important; text-shadow: 0 0 5px rgba(255, 255, 0, 0.8); } .hacker-mode .text-yellow-600, .hacker-mode .dark\:text-yellow-400 { color: #ffff00 !important; text-shadow: 0 0 5px rgba(255, 255, 0, 0.8); } .hacker-mode .bg-blue-100, .hacker-mode .dark\:bg-blue-900, .hacker-mode .dark\:bg-blue-900\/20 { background-color: rgba(0, 150, 255, 0.15) !important; border: 1px solid #0096ff; color: #0096ff !important; text-shadow: 0 0 5px rgba(0, 150, 255, 0.8); } .hacker-mode .text-blue-600, .hacker-mode .text-blue-700, .hacker-mode .dark\:text-blue-400, .hacker-mode .dark\:text-blue-300 { color: #0096ff !important; text-shadow: 0 0 5px rgba(0, 150, 255, 0.8); } .hacker-mode .bg-red-100, .hacker-mode .dark\:bg-red-900, .hacker-mode .dark\:bg-red-900\/20 { background-color: rgba(255, 0, 0, 0.15) !important; border: 1px solid #ff0000; color: #ff0000 !important; text-shadow: 0 0 5px rgba(255, 0, 0, 0.8); } .hacker-mode .text-red-600, .hacker-mode .text-red-700, .hacker-mode .text-red-800, .hacker-mode .dark\:text-red-200, .hacker-mode .dark\:text-red-300, .hacker-mode .dark\:text-red-400 { color: #ff0000 !important; text-shadow: 0 0 5px rgba(255, 0, 0, 0.8); } /* Input fields - Terminal style */ .hacker-mode input[type="text"], .hacker-mode input[type="email"], .hacker-mode input[type="password"], .hacker-mode textarea, .hacker-mode select { background-color: #000000 !important; border: 1px solid #ff0000 !important; color: #00ff41 !important; box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.2); font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; } .hacker-mode input[type="text"]:focus, .hacker-mode input[type="email"]:focus, .hacker-mode input[type="password"]:focus, .hacker-mode textarea:focus, .hacker-mode select:focus { border-color: #ff3333 !important; box-shadow: 0 0 15px rgba(255, 0, 0, 0.7), inset 0 0 10px rgba(255, 0, 0, 0.3); outline: none; } .hacker-mode input::placeholder, .hacker-mode textarea::placeholder { color: #006600 !important; opacity: 0.7; } /* Ensure critical workspace buttons are fully functional */ .hacker-mode #tab-code, .hacker-mode #tab-visualizer, .hacker-mode #edit-code-btn, .hacker-mode #validate-dsl-btn, .hacker-mode #copy-code-btn, .hacker-mode #download-code-btn, .hacker-mode button[data-tabs-target="tab"], .hacker-mode button[data-action*="tabs#switch"] { pointer-events: auto !important; cursor: pointer !important; text-transform: none !important; letter-spacing: normal !important; font-family: inherit !important; } /* Enhanced scanline effect */ .hacker-mode::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 9999; opacity: 0.5; animation: scanline 8s linear infinite; } @keyframes scanline { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } } /* ASCII art header decoration */ .hacker-mode h1::before { content: '┌─[ '; color: #ff0000; margin-right: 0.5rem; text-shadow: 0 0 10px rgba(255, 0, 0, 0.8); } .hacker-mode h1::after { content: ' ]─┐'; color: #ff0000; margin-left: 0.5rem; text-shadow: 0 0 10px rgba(255, 0, 0, 0.8); } .hacker-mode h2::before { content: '>> '; color: #ff0000; margin-right: 0.5rem; text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); } .hacker-mode h3::before { content: '> '; color: #00ff41; margin-right: 0.5rem; } /* Section dividers with ASCII art */ .hacker-mode hr { border: none; height: 1px; background: linear-gradient(to right, transparent, #ff0000, transparent); position: relative; margin: 2rem 0; } .hacker-mode hr::before { content: '━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'; position: absolute; top: -0.5em; left: 0; color: #ff0000; font-size: 0.5em; opacity: 0.5; } /* Enhanced scrollbar styling */ .hacker-mode ::-webkit-scrollbar { width: 12px; background-color: #000000; } .hacker-mode ::-webkit-scrollbar-track { background-color: #0a0a0a; border: 1px solid #ff0000; } .hacker-mode ::-webkit-scrollbar-thumb { background-color: #ff0000; border: 2px solid #000000; box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); } .hacker-mode ::-webkit-scrollbar-thumb:hover { background-color: #ff3333; box-shadow: 0 0 15px rgba(255, 0, 0, 1); } /* Blinking cursor effect for focused inputs */ .hacker-mode input:focus, .hacker-mode textarea:focus { animation: cursor-blink 1s infinite; } @keyframes cursor-blink { 0%, 49% { border-right: 2px solid #00ff41; } 50%, 100% { border-right: 2px solid transparent; } } /* CRT screen flicker effect (very subtle) */ @keyframes flicker { 0% { opacity: 0.98; } 50% { opacity: 1; } 100% { opacity: 0.98; } } .hacker-mode body { animation: flicker 0.15s infinite; } /* Glow on active/selected elements */ .hacker-mode *:focus { outline: 2px solid #ff0000; outline-offset: 2px; box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); } /* Special styling for deployment status */ .hacker-mode .bg-green-50, .hacker-mode .dark\:bg-green-900\/20 { background-color: rgba(0, 255, 65, 0.1) !important; border-color: #00ff41 !important; } .hacker-mode .bg-red-50, .hacker-mode .dark\:bg-red-900\/20 { background-color: rgba(255, 0, 0, 0.1) !important; border-color: #ff0000 !important; } .hacker-mode .bg-blue-50, .hacker-mode .dark\:bg-blue-900\/20 { background-color: rgba(0, 150, 255, 0.1) !important; border-color: #0096ff !important; }