We MANAGE
You DEVELOP

/* --- PC MODE (MAXIMUM IMPACT) --- */ .cyber-hero-heading { font-family: inherit; font-size: 3.5rem; /* Maintained at full cinematic size for desktop browsers */ font-weight: 900; line-height: 1.5; color: #0b132b; margin-bottom: 20px; text-transform: uppercase; } .cyber-swipe { position: relative; display: inline-block; z-index: 1; padding: 0 10px; /* Generous padding for desktop viewports */ cursor: pointer; } .cyber-text { display: inline-block; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) !important; transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important; will-change: clip-path; } .cyber-swipe::after { content: "" !important; position: absolute; height: 80% !important; top: 12% !important; left: 0; width: 100%; background: rgba(0, 240, 255, 0.15) !important; z-index: -1; transform: scaleX(0) !important; transform-origin: left !important; border-right: 3px solid #00f0ff !important; box-shadow: 4px 0 8px #00f0ff, inset -2px 0 4px rgba(0, 240, 255, 0.3); transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important; will-change: transform; } /* --- THE HOVER ACTIVATION STATES --- */ .cyber-swipe:hover .cyber-text, .cyber-swipe.revealed .cyber-text { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; } .cyber-swipe:hover::after, .cyber-swipe.revealed::after { transform: scaleX(1) !important; } /* =================================================== --- STEP 3: MOBILE FINE-TUNING OVERRIDES --- =================================================== */ @media (max-width: 768px) { .cyber-hero-heading { font-size: 2.2rem !important; /* Optimizes readability to fit mobile screens perfectly */ line-height: 1.6 !important; /* Provides clean vertical spacing between your rows */ } .cyber-swipe { padding: 0 5px !important; /* Trims block padding width so the phrase stays on one line */ } .cyber-swipe::after { height: 84% !important; /* Micro-scales highlight heights for mobile layouts */ top: 8% !important; /* Re-centers the laser accent behind smaller text metrics */ } } (function() { var cyberWords = document.querySelectorAll('.cyber-swipe'); cyberWords.forEach(function(word) { word.addEventListener('mouseenter', function() { word.classList.add('revealed'); }); word.addEventListener('touchstart', function() { word.classList.add('revealed'); }); }); })();