/* ============ GLOBAL ============ */ body { margin: 0; padding-top: 60px; /* space for topbar */ background: black; overflow-x: hidden; font-family: "VCR OSD Mono", monospace; } /* Make all links white by default, orange on hover */ a { color: white; text-decoration: none; font-family: "VCR OSD Mono", monospace; } a:hover { color: #ff7b00; text-shadow: 0 0 4px #ff7b00; } /* ============ TOPBAR ============ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); color: white; } .topbar .left a { font-size: 18px; text-shadow: 0 0 4px rgba(255,255,255,0.6); } .menu-icon { font-size: 22px; cursor: pointer; user-select: none; transition: transform 0.1s ease; } .menu-icon:active { transform: scale(0.9); } /* ============ FULLSCREEN MENU ============ */ .mobile-menu { position: fixed; top: -100vh; left: 0; right: 0; height: 100vh; z-index: 9998; display: flex; flex-direction: column; gap: 18px; padding: 90px 24px 32px; background: rgba(5, 5, 5, 0.95); backdrop-filter: blur(18px); transition: top 0.35s ease-out; } /* when menu-open is toggled on from your HTML onclick */ body.menu-open .mobile-menu { top: 0; } .mobile-menu a { font-size: 18px; letter-spacing: 1px; text-shadow: 0 0 3px rgba(255,255,255,0.4); } .mobile-menu a:hover { color: #ff7b00; text-shadow: 0 0 6px #ff7b00; transform: translateX(6px); } /* ============ HOMEPAGE TITLES (THUMBNAILS) ============ */ /* Caption under each gallery card */ .gallery_image_caption, .gallery_image_caption a, a.gallery_card.has_caption .gallery_image_caption { font-family: "VCR OSD Mono", monospace; font-size: 13px; letter-spacing: 0.5px; color: white; text-decoration: none; } /* Small hover nudge + glow on titles */ .gallery_image_caption a:hover { color: #ff7b00; text-shadow: 0 0 4px #ff7b00; transform: translateX(3px); } /* ============ MOBILE TWEAKS ============ */ @media (max-width: 768px) { body { padding-top: 56px; } .topbar { padding: 8px 12px; } .topbar .left a { font-size: 16px; } .mobile-menu { padding: 80px 20px 24px; } .mobile-menu a { font-size: 16px; } .gallery_image_caption, .gallery_image_caption a { font-size: 12px; } } /* =========================================================== RETRO EFFECT PACK 1 — SAFE VERSION ========================================================== */ /* --- CRT glow for homepage titles --- */ .gallery_image_caption, .gallery_image_caption a { text-shadow: 0 0 3px rgba(255,255,255,0.5); } /* --- Scanline overlay on homepage titles --- */ .gallery_image_caption, .gallery_image_caption a { background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,0.04) 0px, rgba(0,0,0,0.25) 1px, transparent 2px ); -webkit-background-clip: text; color: transparent; } /* On hover, remove scanlines + glow orange */ .gallery_image_caption a:hover { -webkit-background-clip: unset; color: #ff7b00 !important; text-shadow: 0 0 6px #ff7b00; } /* --- PS1 wobble for homepage titles --- */ .gallery_image_caption, .gallery_image_caption a { animation: ps1wobble 0.22s infinite; } @keyframes ps1wobble { 0% { transform: translateX(0px); } 50% { transform: translateX(0.4px); } 100% { transform: translateX(0px); } } /* --- Glitch hover slide --- */ .gallery_image_caption a:hover { transform: translateX(4px); } /* =========================================================== RETRO EFFECT PACK 2 — ENHANCED CLARITY + HOLOGRAM ========================================================== */ /* Make text bright white instead of transparent */ .gallery_image_caption, .gallery_image_caption a { color: white !important; -webkit-background-clip: unset !important; text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 6px rgba(255,255,255,0.5); } /* Scanlines only added as a LIGHT overlay */ .gallery_image_caption::after, .gallery_image_caption a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.05) 0px, rgba(0,0,0,0.35) 1px, transparent 2px ); opacity: 0.18; } /* Slight text pop on hover */ .gallery_image_caption a:hover { transform: translateX(4px) scale(1.05); color: #ff7b00 !important; text-shadow: 0 0 6px #ff7b00, 0 0 16px #ff7b00; } /* Ghost hologram hover clone (ANIME UI EFFECT) */ .gallery_image_caption a:hover::before { content: attr(data-title); position: absolute; left: 1px; top: 0; color: #ff7b00; opacity: 0.4; transform: translateX(-2px); pointer-events: none; text-shadow: 0 0 8px #ff7b00; } /* Add bottom glow behind titles for readability */ .gallery_image_caption { position: relative; } .gallery_image_caption::before { content: ""; position: absolute; bottom: -3px; left: 0; width: 100%; height: 8px; background: radial-gradient( ellipse at center, rgba(255,255,255,0.25), rgba(0,0,0,0) ); opacity: 0.35; } /* Slight CRT bending (subtle) */ .gallery_image_caption, .gallery_image_caption a { transform: perspective(600px) rotateX(1deg); } /* =========================================================== EFFECT PACK 3 — FINAL TUNING (VISIBLE SCANLINES + HOLOGRAM) ========================================================== */ /* Add spacing under thumbnails so titles don't hug the left */ .gallery_image_caption { padding-left: 4px; margin-top: 6px; } /* Stronger scanlines OVER text */ .gallery_image_caption, .gallery_image_caption a { position: relative; color: #ffffff !important; text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 6px rgba(255,255,255,0.5); } /* Scanline overlay (visible now) */ .gallery_image_caption::after, .gallery_image_caption a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.08) 0px, rgba(0,0,0,0.35) 1px, transparent 2px ); opacity: 0.25; } /* Ghost hologram hover */ .gallery_image_caption a:hover::before { content: attr(title); /* pulls actual text automatically */ position: absolute; left: 2px; top: 0; color: #ff7b00; opacity: 0.35; transform: translateX(-3px); text-shadow: 0 0 8px #ff7b00; pointer-events: none; } /* Apply title attribute automatically */ .gallery_image_caption a { position: relative; } .gallery_image_caption a { title: attr(data-title); } /* Glitch jitter on hover */ .gallery_image_caption a:hover { animation: glitchJitter 0.15s linear 2; transform: translateX(4px) scale(1.05); color: #ff7b00 !important; text-shadow: 0 0 6px #ff7b00, 0 0 16px #ff7b00; } @keyframes glitchJitter { 0% { transform: translateX(0px); } 30% { transform: translateX(1px); } 60% { transform: translateX(-1px); } 100% { transform: translateX(0px); } } /* Slight TV curvature */ .gallery_image_caption, .gallery_image_caption a { transform: perspective(600px) rotateX(1deg); } /* =========================================================== EFFECT PACK — FIXED HOLOGRAM + STRONGER SCANLINES + SPACING ========================================================== */ /* Better spacing under thumbnails */ .gallery_image_caption { padding-left: 10px; margin-top: 8px; } /* Stronger CRT glow */ .gallery_image_caption, .gallery_image_caption a { position: relative; color: white !important; letter-spacing: 0.5px; text-shadow: 0 0 4px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.6); } /* Visible scanlines */ .gallery_image_caption::after, .gallery_image_caption a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.12) 0px, rgba(0,0,0,0.4) 1px, transparent 3px ); opacity: 0.35; } /* Ghost hologram using aria-label (Cargo safe) */ .gallery_image_caption a:hover::before { content: attr(aria-label); /* pulls real text */ position: absolute; left: 3px; top: 0; opacity: 0.35; color: #ff7b00; transform: translateX(-4px); pointer-events: none; text-shadow: 0 0 10px #ff7b00; font-size: inherit; } /* Ensure aria-label exists (Cargo auto-sets alt/title/label) */ .gallery_image_caption a { aria-label: attr(title); } /* Hover snap + bloom */ .gallery_image_caption a:hover { transform: translateX(4px) scale(1.12); color: #ff7b00 !important; text-shadow: 0 0 6px #ff7b00, 0 0 20px #ff7b00; } /* Glitch jitter (stable) */ @keyframes glitchJitter2 { 0% { transform: translateX(0); } 30% { transform: translateX(2px); } 60% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .gallery_image_caption a:hover { animation: glitchJitter2 0.18s linear; } /* CRT curvature */ .gallery_image_caption, .gallery_image_caption a { transform: perspective(800px) rotateX(2deg); } /* =========================================================== HOMEPAGE TITLE IMPROVEMENTS — LARGER + MORE SPACING ========================================================== */ /* Bigger text under thumbnails */ .gallery_image_caption, .gallery_image_caption a { font-size: 15px !important; /* was 12–13px */ letter-spacing: 0.7px; } /* More vertical space between image and title */ .gallery_image_caption { margin-top: 14px; /* was 6–8px */ padding-left: 10px; /* keep the nice left indent */ } /* Slightly more breathing room around thumbnails */ .gallery_card { padding-bottom: 18px !important; /* adds space under each block */ } /* ============================ HOMEPAGE TITLE POLISH ============================ */ /* Bigger text under thumbnails */ .gallery_image_caption, .gallery_image_caption a { font-size: 16px !important; letter-spacing: 0.8px; } /* More spacing under images */ .gallery_image_caption { margin-top: 18px; /* increased from 14px */ padding-left: 14px; /* cleaner left alignment */ } /* More spacing between each row */ .gallery_card { padding-bottom: 26px !important; } /* Slightly stronger glow (clean) */ .gallery_image_caption, .gallery_image_caption a { text-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.6); } /* =========================================================== HACKER TERMINAL AESTHETIC UPGRADE ========================================================== */ /* More space at top and bottom of the entire page */ body { padding-top: 80px !important; /* was ~60px */ padding-bottom: 80px !important; } /* Terminal green-ish tint + glow */ .gallery_image_caption, .gallery_image_caption a { color: #c8facc !important; /* pale green terminal text */ text-shadow: 0 0 4px rgba(150,255,150,0.8), 0 0 8px rgba(100,255,100,0.5); font-size: 16px !important; letter-spacing: 0.8px; } /* Terminal-style hover highlight */ .gallery_image_caption a:hover { color: #00ff88 !important; text-shadow: 0 0 6px #00ff88, 0 0 12px #00ff88; transform: translateX(5px); } /* Fake command-line cursor underline */ .gallery_image_caption a:hover::after { content: "_"; margin-left: 6px; opacity: 1; animation: cursorBlink 0.6s infinite; color: #00ff88; text-shadow: 0 0 8px #00ff88; } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Slow jitter — terminal vibe */ .gallery_image_caption, .gallery_image_caption a { animation: termJitter 0.45s infinite; } @keyframes termJitter { 0% { transform: translateX(0); } 50% { transform: translateX(0.2px); } 100% { transform: translateX(0); } } /* Stronger spacing between image → title */ .gallery_image_caption { margin-top: 20px; padding-left: 16px; } /* More vertical spacing between rows */ .gallery_card { padding-bottom: 30px !important; } /* Soft grid noise overlay */ body::after { content: ""; position: fixed; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; background-image: linear-gradient(transparent 98%, rgba(0,255,0,0.1) 99%), linear-gradient(90deg, transparent 98%, rgba(0,255,0,0.1) 99%); background-size: 4px 4px, 4px 4px; opacity: 0.15; } /* =========================================================== RETRO LOADING SCREEN ========================================================== */ .boot-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: black; z-index: 999999; /* above EVERYTHING */ display: flex; justify-content: center; align-items: center; animation: bootFade 0.8s ease-out forwards; } .boot-text { font-family: "VCR OSD Mono", monospace; color: #00ff88; font-size: 24px; letter-spacing: 2px; text-shadow: 0 0 6px #00ff88, 0 0 12px #00ff88; animation: bootBlink 0.4s infinite; } @keyframes bootBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.3; } } @keyframes bootFade { 0% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; display: none; } } /* =========================================================== TERMINAL PULSE (APPLIED TO HOMEPAGE TITLES) ========================================================== */ .gallery_image_caption, .gallery_image_caption a { animation: terminalPulse 2.4s ease-in-out infinite; } @keyframes terminalPulse { 0% { text-shadow: 0 0 3px rgba(0,255,100,0.8), 0 0 6px rgba(0,255,100,0.4); } 50% { text-shadow: 0 0 6px rgba(0,255,150,1), 0 0 12px rgba(0,255,150,0.7), 0 0 18px rgba(0,255,150,0.45); } 100% { text-shadow: 0 0 3px rgba(0,255,100,0.8), 0 0 6px rgba(0,255,100,0.4); } } /* =========================================================== TERMINAL PACK — FULL SYSTEM EXPERIENCE ========================================================== */ /* ---------------------- GLOBAL CRT FLICKER ---------------------- */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: repeating-linear-gradient( rgba(0, 255, 100, 0.03) 0px, rgba(0, 255, 100, 0.01) 1px, transparent 2px ); opacity: 0.12; animation: crtFlicker 0.08s infinite; } @keyframes crtFlicker { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.18; } } /* ---------------------- RANDOM SCREEN GLITCH ---------------------- */ @keyframes glitchFlash { 0%, 95%, 100% { opacity: 0; } 96% { opacity: 0.25; } 97% { opacity: 0.4; } 98% { opacity: 0.2; } 99% { opacity: 0.1; } } body::after { content: ""; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,255,100,0.15); opacity: 0; animation: glitchFlash 6s infinite; mix-blend-mode: screen; } /* ---------------------- TERMINAL LOADING BAR ---------------------- */ .loading-bar { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); width: 60%; height: 6px; background: rgba(0,255,100,0.1); overflow: hidden; border-radius: 2px; animation: loadingFade 2.8s forwards ease-out; z-index: 999998; } .loading-bar::before { content: ""; position: absolute; left: -30%; width: 30%; height: 100%; background: #00ff88; box-shadow: 0 0 6px #00ff88; animation: loadingSlide 0.8s infinite linear; } @keyframes loadingSlide { 0% { left: -30%; } 100% { left: 100%; } } @keyframes loadingFade { 0% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; display: none; } } /* ---------------------- SYSTEM UNLOCK TEXT ---------------------- */ .unlock-message { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); color: #00ff88; font-family: "VCR OSD Mono", monospace; font-size: 16px; opacity: 0; animation: unlockFade 2.2s ease-out forwards; z-index: 999999; text-shadow: 0 0 6px #00ff88; } @keyframes unlockFade { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* ---------------------- TYPING INTRO ---------------------- */ @keyframes typing { from { width: 0; } to { width: 180px; } } .typing-line { position: fixed; top: 90px; left: 20px; font-family: "VCR OSD Mono", monospace; font-size: 14px; color: #00ff88; white-space: nowrap; overflow: hidden; border-right: 2px solid #00ff88; width: 0; animation: typing 2s steps(20) forwards, cursorBlink 0.6s infinite; z-index: 999998; } @keyframes cursorBlink { 0%, 50% { border-right-color: #00ff88; } 51%, 100% { border-right-color: transparent; } } /* ---------------------- TERMINAL FOOTER CURSOR ---------------------- */ .footer-cursor { position: fixed; bottom: 12px; right: 16px; font-family: "VCR OSD Mono", monospace; font-size: 18px; color: #00ff88; text-shadow: 0 0 5px #00ff88; animation: cursorBlink 0.6s infinite; z-index: 999999; } /* Fix typing line width */ .typing-line { width: 190px; /* increased to fit text */ animation: typing 2s steps(22) forwards, cursorBlink 0.6s infinite, typingFadeOut 3.2s forwards; } /* Fade the typing line completely */ @keyframes typingFadeOut { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; display: none; } } /* =========================================================== TERMINAL CINEMATIC ADD-ONS ========================================================== */ /* ASCII ACCESS GRANTED splash */ .access-granted { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); white-space: pre; color: #00ff88; font-family: "VCR OSD Mono", monospace; text-shadow: 0 0 12px #00ff88; opacity: 0; pointer-events: none; z-index: 9999999; animation: accessFade 3s ease-out forwards 1.1s; } @keyframes accessFade { 0% { opacity: 0; } 10% { opacity: 1; transform: translateX(-50%) scale(1.05); } 60% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; } } /* SCANNING LASER LINE */ .scan-line { position: fixed; top: -100px; left: 0; width: 100%; height: 2px; background: rgba(0,255,100,0.6); box-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88; animation: scanSweep 3.6s ease-out forwards 0.4s; z-index: 999999; } @keyframes scanSweep { 0% { top: -100px; opacity: 0; } 10% { opacity: 1; } 80% { top: 100vh; opacity: 1; } 100% { opacity: 0; } } /* TERMINAL GARBAGE TEXT */ .terminal-noise { position: fixed; top: 40px; left: 20px; font-family: "VCR OSD Mono", monospace; color: rgba(0,255,80,0.3); font-size: 11px; line-height: 11px; white-space: pre; pointer-events: none; opacity: 0; z-index: 999995; animation: noiseFade 2.2s ease-out forwards 0.3s; } @keyframes noiseFade { 0%, 20% { opacity: 0; } 30%, 50% { opacity: 1; } 100% { opacity: 0; } } /* Holographic ripple hover */ .gallery_image_caption a:hover { animation: ripple 0.5s ease-out; } @keyframes ripple { 0% { text-shadow: 0 0 6px #00ff88, 0 0 10px #00ff88; } 50% { text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88; } 100% { text-shadow: 0 0 6px #00ff88, 0 0 10px #00ff88; } } /* Fake terminal typing prompt at bottom left */ .bottom-prompt { position: fixed; bottom: 14px; left: 16px; font-family: "VCR OSD Mono", monospace; color: #00ff88; opacity: 0.7; z-index: 999999; } /* Error beep flash (soft green burst) */ @keyframes beepFlash { 0% { background: rgba(0,255,150,0); } 15% { background: rgba(0,255,150,0.2); } 30% { background: rgba(0,255,150,0.1); } 100% { background: rgba(0,255,150,0); } } .error-beep { animation: beepFlash 0.3s ease-out 1.2s; } /* CRT curvature warp */ body { transform: perspective(900px) rotateX(1deg); } body::before { content: ""; position: fixed; top: 0; left: -2px; /* pulls overlay offscreen */ right: -2px; /* prevents right-side artifact */ bottom: 0; pointer-events: none; background: repeating-linear-gradient( rgba(0, 255, 100, 0.03) 0px, rgba(0, 255, 100, 0.01) 1px, transparent 2px ); opacity: 0.12; animation: shimmer 6s infinite linear; } @keyframes shimmer { 0% { opacity: 0.10; } 50% { opacity: 0.18; } 100% { opacity: 0.10; } } /* Override CRT warp on body to remove white edge */ body { transform: none; } html { background: black; overflow-x: hidden; } /* =========================================================== POLISH PACK — OPTIONS 2–5 ========================================================== */ /* 2) Delay ACCESS GRANTED */ .access-granted { animation-delay: 0.5s !important; } /* 3) Stronger glow on homepage titles */ .gallery_image_caption, .gallery_image_caption a { text-shadow: 0 0 6px rgba(0,255,100,0.8), 0 0 12px rgba(0,255,100,0.6), 0 0 18px rgba(0,255,100,0.4); } /* 4) Safer CRT curvature on overlay only */ body::before { transform: perspective(1300px) rotateX(1.2deg); transform-origin: center top; } /* 5) Glow on @AdrianKlu_ username */ .topbar .left a { color: #00ff88; text-shadow: 0 0 6px #00ff88, 0 0 10px #00ff88; } /* =========================================================== FINAL POLISH PACK (clean upgrades) ========================================================== */ /* 1) Delay ACCESS GRANTED slightly for better timing */ .access-granted { animation-delay: 0.8s !important; /* smoother cinema timing */ } /* 2) Stronger green glow on homepage titles */ .gallery_image_caption, .gallery_image_caption a { text-shadow: 0 0 6px rgba(0,255,120,0.9), 0 0 14px rgba(0,255,120,0.7), 0 0 22px rgba(0,255,120,0.4); } /* 3) Safe CRT curvature ONLY on overlay (no white seams) */ body::before { transform: perspective(2000px) rotateX(1.5deg); transform-origin: center top; } /* 4) Add glow to @AdrianKlu_ username */ .topbar .left a { color: #00ff88 !important; text-shadow: 0 0 6px #00ff88, 0 0 12px #00ff88; } /* 5) Add subtle glow to menu icon */ .menu-icon { color: #00ff88; text-shadow: 0 0 6px #00ff88; } .menu-icon:hover { text-shadow: 0 0 8px #00ff88, 0 0 16px #00ff88; } /* 6) Slightly more breathing room at top of homepage */ body { padding-top: 70px !important; /* was ~60px, gives cleaner spacing */ } /* Smooth global fade-in after boot */ body { opacity: 0; animation: bodyFadeIn 1.8s ease-out forwards 1.2s; /* delay + duration */ } @keyframes bodyFadeIn { 0% { opacity: 0; } 40% { opacity: 0.3; } 70% { opacity: 0.6; } 100% { opacity: 1; } } /* REMOVE old fade-in */ body { opacity: 1 !important; animation: none !important; } /* Add fade ONLY to your site */ body.page-loaded { opacity: 0; animation: pageFade 1.8s ease-out forwards 1.2s; } @keyframes pageFade { 0% { opacity: 0; } 40% { opacity: 0.3; } 70% { opacity: 0.6; } 100% { opacity: 1; } }