/* ========================================================================= VORTENXIA — Custom Styles Theme: Cyberpunk / Neon (black background, neon-green + lime accents) Font: Space Grotesk (sans) + JetBrains Mono (mono) NOTE: Utility classes come from Tailwind (CDN). This file holds only the custom base styles, cursor, and animations that Tailwind can't express. ========================================================================= */ /* ------------------------------------------------------------------------- Base Styles & Custom Cursor ------------------------------------------------------------------------- */ body { background-color: #000000; color: #ffffff; cursor: none; /* Hide default cursor — replaced by custom cursor */ overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #000000; } ::-webkit-scrollbar-thumb { background: #32CD32; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #ADFF2F; } /* Form inputs autofill fix for dark mode */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important; -webkit-text-fill-color: white !important; } /* ------------------------------------------------------------------------- Custom Cursor Elements ------------------------------------------------------------------------- */ .cursor-dot { width: 8px; height: 8px; background-color: #ADFF2F; } .cursor-outline { width: 40px; height: 40px; border: 1px solid #32CD32; transition: width 0.2s, height 0.2s, background-color 0.2s; } .cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 9999; pointer-events: none; } /* Cursor hover state (toggled by .cursor-hover on ) */ .cursor-hover .cursor-outline { width: 60px; height: 60px; background-color: rgba(50, 205, 50, 0.1); border-color: #ADFF2F; box-shadow: 0 0 15px rgba(173, 255, 47, 0.3); } /* ------------------------------------------------------------------------- Animations & Effects ------------------------------------------------------------------------- */ /* Glitch effect on hover for buttons/links */ .glitch-hover:hover { text-shadow: 2px 0 #32CD32, -2px 0 #ADFF2F; animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; } @keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(-2deg); } 40% { transform: skew(2deg); } 60% { transform: skew(-1deg); } 80% { transform: skew(1deg); } 100% { transform: skew(0deg); } } /* Tech marquee scroll */ @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } /* Hero scroll indicator */ @keyframes scroll-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } } /* ------------------------------------------------------------------------- SPA View Transitions Only the .active view is displayed; switchView() toggles this class. ------------------------------------------------------------------------- */ /* Use !important so these win over Tailwind's display utilities (e.g. `flex` on the contact view). The Tailwind CDN injects its rules AFTER this file in source order, and both selectors are single-class (equal specificity), so without !important a utility like `.flex` would override `display:none` and leak that view onto every page. */ .view-section { display: none !important; } .view-section.active { display: block !important; } /* ------------------------------------------------------------------------- Three.js Canvas Container (hero neon Rubik's cube) Sits above the page background but below hero content (which uses z-10). Decorative only — never intercepts pointer events. ------------------------------------------------------------------------- */ #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }