/* ======================================= GLOBAL VARIABLES & RESET ======================================= */ :root { --color-primary-red: #ff0000; --color-primary-cyan: #00ffff; /* New futuristic accent color */ --color-darkest-bg: #0a0a0a; --color-dark-bg: #121212; --color-medium-bg: #1e1e1e; --color-light-text: #e0e0e0; --color-faded-text: #888888; --font-primary: 'Orbitron', monospace; /* Futuristic font */ --font-secondary: 'Rajdhani', sans-serif; /* Techy sans-serif */ --font-code: 'Fira Code', monospace; /* For code blocks */ } /* Importing Google Fonts for futuristic look (add this to your HTML ) */ * { box-sizing: border-box; } body { background-color: var(--color-darkest-bg); color: var(--color-light-text); font-family: var(--font-secondary); line-height: 1.6; margin: 0; padding: 0; text-align: center; overflow-x: hidden; /* Prevent horizontal scroll from glitch effects */ } /* ======================================= 1. INTRO ANIMATION (Anarchy Glitch Welcome) - FIXED VISIBILITY ======================================= */ #welcome-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-darkest-bg); z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; pointer-events: all; /* FIX: Ensure it is visible by default (opacity 1) */ opacity: 1; visibility: visible; /* FIX: Remove the delay so the JS timer controls when it disappears. */ transition: opacity 1s ease-out, visibility 1s ease-out; } /* This is the class added by JavaScript to hide it */ #welcome-overlay.hidden { opacity: 0 !important; /* Added !important for certainty */ visibility: hidden !important; /* Added !important for certainty */ pointer-events: none !important; } .welcome-text-wrapper { position: relative; font-family: var(--font-primary); font-size: 3.5em; /* Large size */ color: var(--color-primary-red); text-transform: uppercase; font-weight: 700; letter-spacing: 5px; white-space: nowrap; overflow: hidden; /* For the text reveal effect */ border-right: 5px solid var(--color-primary-red); /* Typing cursor */ animation: typing 2s steps(20, end) forwards, blink-caret 0.75s step-end infinite; max-width: 0; /* Starts hidden for typing effect */ will-change: max-width, border-right; margin-bottom: 20px; } /* Typing effect */ @keyframes typing { from { max-width: 0 } to { max-width: 100% } /* Adjust to cover text width */ } /* Blinking cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--color-primary-red) } } .welcome-subtext { font-family: var(--font-secondary); font-size: 1.2em; color: var(--color-primary-cyan); opacity: 0; animation: fade-in 1s ease-out 2.5s forwards; /* Fades in after typing */ } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Glitch overlay on intro */ #welcome-overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 50%), linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.1) 1%, transparent 2%, rgba(0,0,0,0.1) 3%, transparent 4%, rgba(0,0,0,0.05) 5%, transparent 6%); background-size: 100% 4px, 10px 100%; /* Horizontal scanlines, vertical noise */ pointer-events: none; animation: static-noise 0.5s infinite steps(2), glitch-transform 1.5s infinite alternate; opacity: 0.3; } @keyframes static-noise { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 4px, 10px 0; } } @keyframes glitch-transform { 0% { transform: translate(0, 0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-3px, 0); } 80% { transform: translate(0, 3px); } 100% { transform: translate(0, 0); } } /* ======================================= 2. HEADER/BANNER - FUTURISTIC ANARCHY ======================================= */ header { background-color: var(--color-dark-bg); padding: 30px 20px; border-bottom: 3px solid var(--color-primary-red); letter-spacing: 2px; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(255, 0, 0, 0.2); } header h1 { font-family: var(--font-primary); font-size: 3.5em; margin-bottom: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--color-primary-red); position: relative; letter-spacing: 4px; text-shadow: 0 0 10px var(--color-primary-red), 0 0 20px var(--color-primary-red); /* Text glitch effect for main title - using pseudo-elements */ display: inline-block; } /* Base text for glitch - Hidden by default, then revealed */ header h1 span.glitch-text { position: relative; display: inline-block; color: var(--color-light-text); z-index: 1; } /* Glitch layer 1 (red) */ header h1 span.glitch-text::before { content: attr(data-text); /* Pulls text from data-text attribute */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-dark-bg); overflow: hidden; color: var(--color-primary-red); text-shadow: 0 0 5px var(--color-primary-red); animation: glitch-anim-1 2s infinite linear alternate-reverse; } /* Glitch layer 2 (cyan) */ header h1 span.glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-dark-bg); overflow: hidden; color: var(--color-primary-cyan); text-shadow: 0 0 5px var(--color-primary-cyan); animation: glitch-anim-2 2s infinite linear alternate; } @keyframes glitch-anim-1 { 0% { transform: translate(2px, 0) scaleX(1); clip-path: inset(0 0 0 0); } 10% { transform: translate(-2px, -2px) scaleX(1.02); clip-path: inset(10% 0 80% 0); } 20% { transform: translate(0, 2px) scaleX(0.98); clip-path: inset(40% 0 30% 0); } 30% { transform: translate(1px, -1px) scaleX(1.01); clip-path: inset(70% 0 10% 0); } 40% { transform: translate(-1px, 1px) scaleX(0.99); clip-path: inset(5% 0 85% 0); } 50% { transform: translate(2px, -2px) scaleX(1); clip-path: inset(50% 0 20% 0); } 60% { transform: translate(-2px, 0) scaleX(1.03); clip-path: inset(0 0 0 0); } 70% { transform: translate(1px, 1px) scaleX(0.97); clip-path: inset(60% 0 20% 0); } 80% { transform: translate(-1px, -1px) scaleX(1.01); clip-path: inset(15% 0 75% 0); } 90% { transform: translate(0, 2px) scaleX(0.99); clip-path: inset(30% 0 50% 0); } 100% { transform: translate(0, 0) scaleX(1); clip-path: inset(0 0 0 0); } } @keyframes glitch-anim-2 { 0% { transform: translate(-2px, 0) scaleX(1); clip-path: inset(0 0 0 0); } 10% { transform: translate(2px, 2px) scaleX(1.02); clip-path: inset(20% 0 70% 0); } 20% { transform: translate(0, -2px) scaleX(0.98); clip-path: inset(50% 0 30% 0); } 30% { transform: translate(-1px, 1px) scaleX(1.01); clip-path: inset(80% 0 10% 0); } 40% { transform: translate(1px, -1px) scaleX(0.99); clip-path: inset(10% 0 80% 0); } 50% { transform: translate(-2px, 2px) scaleX(1); clip-path: inset(60% 0 10% 0); } 60% { transform: translate(2px, 0) scaleX(1.03); clip-path: inset(0 0 0 0); } 70% { transform: translate(-1px, -1px) scaleX(0.97); clip-path: inset(70% 0 10% 0); } 80% { transform: translate(1px, 1px) scaleX(1.01); clip-path: inset(5% 0 85% 0); } 90% { transform: translate(0, -2px) scaleX(0.99); clip-path: inset(40% 0 40% 0); } 100% { transform: translate(0, 0) scaleX(1); clip-path: inset(0 0 0 0); } } header p { font-family: var(--font-secondary); font-style: normal; font-size: 1.1em; opacity: 0.7; color: var(--color-light-text); } /* ======================================= 3. NAVIGATION - CYBERPUNK WIRED ======================================= */ nav { background-color: var(--color-medium-bg); padding: 12px 0; border-top: 2px solid var(--color-primary-red); border-bottom: 2px solid var(--color-primary-cyan); margin-bottom: 30px; box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); } nav a { font-family: var(--font-primary); color: var(--color-light-text); text-decoration: none; padding: 10px 20px; margin: 0 15px; transition: all 0.3s ease; text-transform: uppercase; font-size: 1.1em; position: relative; overflow: hidden; display: inline-block; border: 1px solid transparent; } nav a::before { /* Underline effect */ content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--color-primary-red); transition: width 0.3s ease-out; } nav a:hover::before { width: 100%; } nav a:hover { color: var(--color-primary-red); text-shadow: 0 0 5px var(--color-primary-red); border-color: var(--color-primary-cyan); transform: scale(1.02); } /* ======================================= 4. MAIN CONTENT - DATA PANELS ======================================= */ .container { max-width: 960px; margin: 30px auto 60px auto; padding: 25px; background-color: var(--color-medium-bg); border: 1px solid #3a3a3a; box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 10px rgba(0, 255, 255, 0.05); text-align: left; border-radius: 5px; position: relative; overflow: hidden; transition: all 0.4s ease-in-out; } .container::before { /* Internal border glow */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--color-primary-cyan); opacity: 0.1; pointer-events: none; transition: opacity 0.3s ease; } .container:hover::before { opacity: 0.3; } .container:hover { transform: translateY(-8px) scale(1.005); box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(255, 0, 0, 0.1); } h2 { font-family: var(--font-primary); color: var(--color-primary-cyan); border-bottom: 2px solid var(--color-primary-red); padding-bottom: 8px; margin-top: 0; text-transform: uppercase; font-size: 2em; letter-spacing: 2px; text-shadow: 0 0 5px var(--color-primary-cyan); } h3 { font-family: var(--font-secondary); color: var(--color-light-text); font-size: 1.6em; margin-top: 20px; margin-bottom: 10px; } p { color: var(--color-light-text); } .anarchy-logo-img { height: 1.5em; /* Slightly larger logo */ vertical-align: middle; margin-right: 8px; position: relative; top: -2px; filter: drop-shadow(0 0 5px var(--color-primary-red)); } /* Code Block Formatting */ pre, code { background-color: var(--color-darkest-bg); color: var(--color-primary-cyan); /* Code in cyan */ font-family: var(--font-code); padding: 15px; border-left: 3px solid var(--color-primary-red); border-radius: 5px; display: block; overflow-x: auto; margin: 20px 0; box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); white-space: pre-wrap; /* Ensure long lines wrap */ word-break: break-all; } /* ======================================= 5. SERVICE/PRODUCT STATUS STYLES ======================================= */ .service-item, .product-item { position: relative; border: 1px solid #333333; padding: 20px; margin-bottom: 25px; background-color: var(--color-dark-bg); border-left: 5px solid var(--color-primary-red); transition: all 0.3s ease; border-radius: 3px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .service-item:hover, .product-item:hover { transform: translateX(5px); box-shadow: 0 0 15px rgba(255, 0, 0, 0.4); } .service-item h3, .product-item h3 { font-family: var(--font-secondary); color: var(--color-light-text); margin-top: 0; font-size: 1.6em; border-bottom: 1px dotted var(--color-faded-text); padding-bottom: 10px; } /* Style the word 'Description' to be red and bold */ .service-item p strong, .product-item p strong { color: var(--color-primary-red); font-size: 1.1em; } /* Status Badge common style */ .status-badge { position: absolute; top: 20px; right: 20px; padding: 8px 15px; font-weight: bold; text-transform: uppercase; font-size: 0.95em; border-radius: 5px; letter-spacing: 1px; transition: background-color 0.3s, color 0.3s, transform 0.2s; font-family: var(--font-code); box-shadow: 0 0 5px rgba(0,0,0,0.5); } /* Status: Inactive */ .service-item.status-inactive, .product-item.status-inactive { filter: grayscale(100%); opacity: 0.6; border-color: var(--color-faded-text); border-left-color: var(--color-faded-text); } .service-item.status-inactive .status-badge, .product-item.status-inactive .status-badge { background-color: #333333; color: var(--color-faded-text); text-shadow: none; } /* Status: Active (Neon Green) */ .service-item.status-active .status-badge, .product-item.status-active .status-badge { background-color: #006600; color: #ffffff; text-shadow: 0 0 8px #00ff00; border: 1px solid #00ff00; } /* Status: Updating (Neon Yellow/Cyan) */ .service-item.status-updating, .product-item.status-updating { border-left-color: var(--color-primary-cyan); box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); } .service-item.status-updating .status-badge, .product-item.status-updating .status-badge { background-color: #005555; color: #ffffff; text-shadow: 0 0 8px var(--color-primary-cyan); animation: cyan-pulse 1.5s infinite alternate; border: 1px solid var(--color-primary-cyan); } /* Keyframe for the cyan pulsing glow */ @keyframes cyan-pulse { from { box-shadow: 0 0 2px var(--color-primary-cyan); } to { box-shadow: 0 0 15px var(--color-primary-cyan); } } /* ======================================= 6. PRODUCT PAGE STYLES (products.html) ======================================= */ .product-item { display: grid; grid-template-columns: 180px 1fr; /* Slightly larger image column */ grid-template-rows: auto auto auto; gap: 20px 30px; /* Increased gap */ align-items: start; background-color: var(--color-dark-bg); border: 1px solid #333333; border-left: 5px solid var(--color-primary-red); padding: 25px; border-radius: 5px; } .product-item:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4); } .product-header { grid-column: 2 / 3; grid-row: 1 / 2; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dotted var(--color-faded-text); padding-bottom: 10px; } .product-item h3 { margin: 0; color: var(--color-light-text); font-family: var(--font-primary); font-size: 1.8em; letter-spacing: 1px; } .price-tag { color: var(--color-primary-red); font-family: var(--font-code); font-size: 1.5em; font-weight: bold; margin: 0; text-shadow: 0 0 5px var(--color-primary-red); } .product-image { grid-column: 1 / 2; grid-row: 1 / 3; width: 100%; height: 180px; border: 2px solid var(--color-primary-cyan); object-fit: cover; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transition: all 0.3s ease; } .product-image:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--color-primary-cyan); } .product-item p { grid-column: 2 / 3; grid-row: 2 / 3; margin: 0; color: var(--color-faded-text); } .buy-button { grid-column: 1 / 3; grid-row: 3 / 4; text-align: center; display: block; background-color: var(--color-primary-red); color: var(--color-darkest-bg); text-decoration: none; padding: 15px 0; margin-top: 15px; font-weight: bold; letter-spacing: 3px; transition: all 0.3s ease; border-radius: 5px; font-family: var(--font-primary); font-size: 1.1em; border: 1px solid var(--color-primary-red); text-shadow: 0 0 3px rgba(0,0,0,0.5); } .buy-button:hover { background-color: var(--color-darkest-bg); color: var(--color-primary-red); box-shadow: 0 0 15px var(--color-primary-red); border-color: var(--color-primary-red); transform: translateY(-3px); } /* ======================================= 7. Custom Dynamic Effects (index.html) ======================================= */ /* 1. Neon Glow for the Name (DINO) */ .dino-title { font-family: var(--font-primary); color: #fff; text-shadow: 0 0 10px var(--color-primary-red), 0 0 20px var(--color-primary-red); animation: neon-glow-red 1.5s ease-in-out infinite alternate; } @keyframes neon-glow-red { from { text-shadow: 0 0 5px var(--color-primary-red), 0 0 10px var(--color-primary-red), 0 0 15px #ff4444; } to { text-shadow: 0 0 10px var(--color-primary-red), 0 0 20px var(--color-primary-red), 0 0 30px #ff6666; } } /* 2. Breathing/Pulsing Effect for Key Words (now using cyan) */ .breathing-text { color: var(--color-primary-cyan); text-transform: uppercase; font-weight: bold; animation: pulse-cyan 2s infinite ease-in-out; display: inline-block; text-shadow: 0 0 5px var(--color-primary-cyan); font-family: var(--font-code); } @keyframes pulse-cyan { 0% { color: var(--color-primary-cyan); text-shadow: 0 0 0 rgba(0, 255, 255, 0.7); } 50% { color: var(--color-light-text); text-shadow: 0 0 10px rgba(0, 255, 255, 1); } 100% { color: var(--color-primary-cyan); text-shadow: 0 0 0 rgba(0, 255, 255, 0.7); } } /* ======================================= 8. DYNAMIC FOOTER STYLES ======================================= */ /* Spacer for Fixed Footer Scroll Detection */ .footer-spacer { height: 70px; width: 100%; } footer { background-color: var(--color-darkest-bg); color: var(--color-faded-text); text-align: center; padding: 15px 0; border-top: 2px solid transparent; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 100; font-size: 0.9em; line-height: 1.5; transition: border-top 0.4s ease-out; box-shadow: 0 0 15px rgba(0,0,0,0.5); } /* Class added by JavaScript when scrolled to bottom */ footer.show-border { border-top: 2px solid var(--color-primary-cyan); box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } footer a { color: var(--color-primary-red); text-decoration: none; margin: 0 5px; text-transform: uppercase; font-weight: bold; transition: color 0.3s; display: inline-block; font-family: var(--font-secondary); } footer a:hover { color: var(--color-primary-cyan); text-shadow: 0 0 5px var(--color-primary-cyan); } /* ======================================= 9. INSTANT FULL-SCREEN TRANSITION WITH LOGO (X15) ======================================= */ #transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-darkest-bg); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; } #transition-logo-container { display: block; width: 350px; height: 350px; } #transition-logo-container img { width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: drop-shadow(0 0 20px var(--color-primary-red)); } /* Active State: Instantly covers the screen */ #transition-overlay.is-slashing { opacity: 1; visibility: visible; pointer-events: all; }