/* ========================================================================== BASE — переменные, сброс, типографика Стиль: тёмный неон, фиолетово-синий glassmorphism (ICVHACK-style) ========================================================================== */ :root { /* фон — почти чёрный, с лёгким холодным оттенком */ --bg: #06060a; --bg-2: #0b0b12; --bg-3: #101018; /* стекло */ --glass: rgba(255, 255, 255, 0.035); --glass-strong: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.09); --glass-border-hover: rgba(160, 130, 255, 0.55); /* совместимость со старой разметкой (карточки использовали var(--card)/var(--border)) */ --card: var(--glass); --border: var(--glass-border); --text: #f5f4fb; --text-dim: #a6a3c0; --text-muted: #6c6885; /* неон: фиолетовый + синий */ --accent: #8b5cf6; --accent-2: #b18aff; --accent-blue: #5b7cff; --accent-soft: rgba(139, 92, 246, 0.16); --grad-neon: linear-gradient(120deg, var(--accent-blue) 0%, var(--accent) 55%, #d68bff 100%); --glow-violet: 0 0 40px rgba(139, 92, 246, 0.35); --glow-blue: 0 0 40px rgba(91, 124, 255, 0.3); --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --ease: cubic-bezier(.22, 1, .36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; min-height: 100vh; overflow-x: hidden; scroll-behavior: smooth; } /* iOS Safari красит область "оттяжки" (rubber-band overscroll) цветом фона самого , а не — если он не задан, при быстрой прокрутке вверх/вниз на долю секунды мелькает чёрная/белая полоса. ВАЖНО: overscroll-behavior-y здесь специально НЕ трогаем — это отключает системный жест "потянуть вниз, чтобы обновить страницу" на телефоне. */ html { background: var(--bg); } body { position: relative; isolation: isolate; } ::selection { background: var(--accent); color: #fff; } /* тонкий неоновый скроллбар */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent-blue), var(--accent)); border-radius: 999px; border: 2px solid var(--bg); } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; } /* ===== СТРАНИЦЫ ===== Важно: видимость страниц завязана ИСКЛЮЧИТЕЛЬНО на этот файл (base.css), который подключён первым и не зависит от остальных css/*.css. Раньше #home скрывался в hero.css — если тот файл не грузился (кэш / порядок / блокировка одного файла), все страницы показывались одновременно и клики по вкладкам выглядели "нерабочими". */ .page, #home, #projects, #resources, #about { display: none; padding-top: 90px; min-height: 100vh; position: relative; } .page.active, #projects.active, #resources.active, #about.active { display: block; } #home.active { display: flex; flex-direction: column; } /* ===== ОБЁРТКА И ЗАГОЛОВКИ ===== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } .section-head { text-align: center; margin: 50px 0; } .section-head h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.02em; background: linear-gradient(120deg, #fff 30%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-head p { color: var(--text-dim); font-size: 17px; max-width: 620px; margin: 0 auto; line-height: 1.6; } .version-badge { display: inline-block; background: var(--accent-soft); color: var(--accent-2); padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; margin-left: 10px; vertical-align: middle; border: 1px solid var(--glass-border); } h2.block-title { font-size: 32px; font-weight: 800; margin: 60px 0 26px; } @media (max-width: 720px) { .container { padding: 0 20px; } }