/* ========================================================================== NSSoftDev — Custom Stylesheet Author: Nikolay Savosin (NSSoftDev) -------------------------------------------------------------------------- This file layers on top of Tailwind CSS (loaded via CDN in the of index.html / resume.html). Tailwind handles layout, spacing and the base responsive grid; everything here is the "cinematic" layer that Tailwind utility classes can't express cleanly: glassmorphism, neon glow effects, the custom cursor, the canvas background container, capsule buttons and the fine-grained brand animations (float, pulse, gradient shimmer, etc). Table of contents: 1. Design tokens (CSS custom properties) 2. Base / global resets & typography 3. Scrollbar & selection 4. Canvas background layer 5. Custom cursor (magnetic, active-mode only) 6. Glassmorphism utilities 7. Glow utilities 8. Capsule buttons 9. Rounded container utility 10. Header & navigation 11. Language switcher 12. Hero section 13. Floating tech tags 14. About & tech stack 15. Portfolio showcase 16. Footer & social capsule links 17. Resume page specific styles 18. Preloader 19. Scroll reveal helpers (paired with GSAP in animations.js) 20. Keyframe animations 21. Responsive tweaks 22. Print styles (resume PDF) 23. Reduced motion support ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS Central source of truth for the brand palette & geometry. Tailwind config (inline in ) references some of these via CSS variables so both systems stay perfectly in sync. -------------------------------------------------------------------------- */ :root { /* Brand core */ --color-bg: #0A0A0C; /* premium near-black background */ --color-bg-elevated: #111114; /* slightly lifted panels */ --color-bg-soft: #16161A; /* cards, inputs */ --color-purple: #8A2BE2; /* primary brand violet */ --color-purple-soft: #A855F7; /* lighter violet for text/hover */ --color-emerald: #00E599; /* neon emerald accent */ --color-emerald-soft: #34F5B3; /* lighter emerald for hover */ /* Text */ --color-text-primary: #F5F5F7; --color-text-secondary: #A0A0AC; --color-text-muted: #6B6B75; /* Gradients */ --gradient-brand: linear-gradient(135deg, var(--color-purple) 0%, var(--color-emerald) 100%); --gradient-brand-reverse: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-purple) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(138,43,226,0.35) 0%, rgba(0,229,153,0.12) 45%, transparent 70%); /* Geometry */ --radius-container: 20px; /* 16px–24px range required by spec */ --radius-container-lg: 24px; --radius-container-sm: 16px; --radius-capsule: 9999px; /* Elevation / glow */ --shadow-glow-purple: 0 0 40px rgba(138, 43, 226, 0.45); --shadow-glow-emerald: 0 0 40px rgba(0, 229, 153, 0.45); --shadow-glow-mixed: 0 0 60px rgba(138, 43, 226, 0.25), 0 0 30px rgba(0, 229, 153, 0.2); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45); /* Glass */ --glass-bg: rgba(255, 255, 255, 0.035); --glass-bg-strong: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.09); --glass-blur: 20px; /* Motion */ --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.25s; --duration-base: 0.45s; --duration-slow: 0.8s; /* Fonts */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; } /* -------------------------------------------------------------------------- 2. BASE / GLOBAL -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background-color: var(--color-bg); } body { background-color: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body); overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Only hide the native cursor once we know we're on a fine-pointer (mouse) device AND JS has confirmed the custom cursor initialized successfully. This class is toggled on by main.js — touch devices never get it, so mobile/tablet users keep their normal cursor/tap behaviour. */ body.custom-cursor-active { cursor: none; } body.custom-cursor-active a, body.custom-cursor-active button, body.custom-cursor-active [data-cursor-hover] { cursor: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.02em; } .font-mono-brand { font-family: var(--font-mono); } /* Reusable gradient text treatment for headings/accents */ .text-gradient-brand { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: gradient-shift 6s ease infinite; } /* Section container rhythm */ .section-padding { padding-top: clamp(4rem, 10vw, 8rem); padding-bottom: clamp(4rem, 10vw, 8rem); } /* -------------------------------------------------------------------------- 3. SCROLLBAR & SELECTION -------------------------------------------------------------------------- */ ::selection { background: var(--color-purple); color: #fff; } html { scrollbar-width: thin; scrollbar-color: var(--color-purple) var(--color-bg); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--gradient-brand); border-radius: var(--radius-capsule); border: 2px solid var(--color-bg); } /* -------------------------------------------------------------------------- 4. CANVAS BACKGROUND LAYER The