/* === Reset & Base === */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; /* overflow-x on html (not body) prevents horizontal scroll in all browsers without breaking position:sticky — works in all Safari versions */ overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-heading); } h1 { font-size: 2.5rem; } :root { --color-bg: #0b0d10; --color-text: #ffffff; --color-accent: #00f7ff; --color-secondary: #12151a; --color-light: #cfd2dc; --color-dark: #1a1d24; --font-main: 'Inter', sans-serif; --font-heading: 'Outfit', sans-serif; --transition-fast: 0.3s ease; --transition-smooth: 0.8s ease; --border-radius-sm: 6px; --border-radius-md: 12px; --border-radius-lg: 16px; --shadow-sm: 0 2px 10px rgba(0, 247, 255, 0.05); --shadow-md: 0 4px 20px rgba(0, 247, 255, 0.2); --shadow-lg: 0 0 30px rgba(0, 247, 255, 0.4); } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-main); line-height: 1.4; padding: 0; } /* === Fade-in transition (used in JS) === */ /* NOTE: no transform here — any transform on makes it a containing block for position:fixed children (mobile-menu, backdrop), breaking their positioning when the user has scrolled down. Opacity-only is safe. */ body.fade-in { opacity: 0; transition: opacity var(--transition-smooth); } body.fade-in.loaded { opacity: 1; } /* Общие стили для кнопок */ .btn, .explore-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 2rem; background: var(--color-accent); color: #000; border-radius: 30px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: all 0.4s ease; border: 2px solid transparent; position: relative; overflow: hidden; cursor: pointer; text-transform: uppercase; } .btn::before, .explore-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s; } .btn:hover, .explore-btn:hover { background: transparent; color: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 20px rgba(0, 247, 255, 0.4); } .btn:hover::before, .explore-btn:hover::before { left: 100%; } /* Общие стили для карточек */ .card { background-color: var(--color-secondary); border-radius: var(--border-radius-md); padding: 1.5rem; transition: all var(--transition-fast); } .card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); } .no-scroll { overflow: hidden; position: fixed; width: 100%; height: 100%; }