/* ========================================================= Шрифт лежит в проекте (fonts/), а не грузится с Google — сайт не зависит от доступности чужих серверов. VT323, лицензия SIL Open Font License 1.1 ========================================================= */ @font-face { font-family: 'VT323'; src: url('../fonts/vt323-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* текст виден сразу, шрифт подменится по загрузке */ } /* ========================================================= Тема и общие переменные. Хочешь другой цвет — правь только эти три строки. ========================================================= */ :root { --accent: #22d3ee; /* циан — основной */ --accent-2:#a855f7; /* фиолет — второй */ --bg: #05070d; /* фон под видео */ /* свечение текста + тёмная тень, чтобы буквы читались на светлом кадре */ --glow: 0 0 12px rgba(34, 211, 238, .55), 0 0 34px rgba(168, 85, 247, .35), 0 2px 14px rgba(0, 0, 0, .85); --panel: rgba(12, 14, 22, .72); --border: rgba(255, 255, 255, .16); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; } html, body { width: 100%; height: 100%; overflow: hidden; color: #fff; font-family: VT323, 'Courier New', monospace; font-size: 18px; } /* ВАЖНО: фон задаём ТОЛЬКО на html. Если написать background и на body — фон body закрасит собой видео, которое лежит на слое z-index:-2, и вместо ролика будет чёрный экран. */ html { background: var(--bg); } /* ---------- Фоновое видео --------------------------------- position:fixed + z-index:-2 уводят его под весь контент. object-fit задаётся классом на из config.videoFit. */ .background video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: var(--bg); transform: translateZ(0); /* включает аппаратное ускорение */ will-change: transform; } body.fit-fill .background video { object-fit: fill; } body.fit-cover .background video { object-fit: cover; } body.fit-contain .background video { object-fit: contain; } /* Затемнение по краям — чтобы текст читался поверх яркого видео */ .vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.62) 100%); } /* Ретро-полоски (config.scanlines) */ .scanlines { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.10) 0 1px, transparent 1px 3px); } .scanlines.hidden { display: none; } /* ---------- Прелоадер -------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .8s, transform .8s, visibility .8s; } .preloader-circle { width: 60px; height: 60px; border-radius: 50%; border: 6px solid transparent; border-top-color: var(--accent); animation: spin .7s linear infinite; box-shadow: var(--glow); } @keyframes spin { to { transform: rotate(360deg); } } .preloader.loaded { opacity: 0; visibility: hidden; transform: scale(1.6); } /* ---------- Центральный блок ------------------------------- */ .page { position: relative; height: 100vh; height: 100dvh; /* dvh — корректная высота на мобильных */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; } .play, .title { font-family: inherit; color: var(--accent); text-shadow: var(--glow); line-height: 1; letter-spacing: 2px; } .play { background: none; border: 0; cursor: pointer; font-size: clamp(3.5rem, 13vw, 10rem); animation: bob 1s linear infinite alternate; transition: opacity .3s, transform .3s; } @keyframes bob { to { transform: translateY(10px); } } .play:hover { color: #7ee9fb; } .play.is-hidden { opacity: 0; visibility: hidden; height: 0; pointer-events: none; } .title { font-size: clamp(2.2rem, 10vw, 8rem); word-break: break-word; transform: scale(.4); opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; } .title.visible { transform: scale(1); opacity: 1; visibility: visible; } /* ---------- Соцсети ---------------------------------------- */ .social { display: flex; gap: 24px; margin-top: 28px; opacity: 0; visibility: hidden; transform: rotateY(40deg) translateY(80px); transition: .45s ease .15s; } .social.visible { opacity: 1; visibility: visible; transform: none; } .social a { color: var(--accent); font-size: clamp(1.8rem, 6vw, 3rem); text-decoration: none; line-height: 0; transition: transform .25s, color .25s; } /* иконки — локальные SVG, цвет берут от ссылки (fill="currentColor"), свечение делается фильтром: text-shadow на картинку не действует */ .social a svg { width: 1em; height: 1em; display: block; filter: drop-shadow(0 0 10px rgba(34,211,238,.7)) drop-shadow(0 2px 8px rgba(0,0,0,.8)); } .social a:hover { transform: translateY(-6px); color: var(--accent-2); } /* ---------- Громкость и подсказка --------------------------- */ .volume-control, .hint { position: fixed; top: 22px; z-index: 100; background: var(--panel); border: 1px solid var(--border); border-radius: 50px; backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: opacity .5s, transform .5s; } .volume-control { left: 22px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; } .hint { right: 22px; padding: 9px 16px; font-size: 1.05rem; color: rgba(255,255,255,.9); pointer-events: none; } .volume-control.hidden, .hint.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; } .volume-icon { background: none; border: 0; cursor: pointer; padding: 0; color: #fff; width: 20px; height: 18px; display: flex; align-items: center; justify-content: center; } .volume-icon svg { width: 18px; height: 16px; display: block; } .volume-icon:hover { color: var(--accent); } /* Ползунок громкости — обычный , просто покрашенный */ #volume-slider { -webkit-appearance: none; appearance: none; width: 130px; height: 5px; border-radius: 10px; background: rgba(255,255,255,.22); cursor: pointer; outline: none; } #volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); } #volume-slider::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--accent); } .key { display: inline-flex; padding: 2px 9px; margin-left: 4px; border-radius: 6px; color: var(--accent); border: 1px solid rgba(34,211,238,.45); background: rgba(34,211,238,.14); text-shadow: 0 0 10px var(--accent); animation: keyGlow 2s ease-in-out infinite; } @keyframes keyGlow { 50% { box-shadow: 0 0 22px rgba(34,211,238,.55); border-color: rgba(168,85,247,.6); } } .copyright { position: fixed; left: 22px; bottom: 16px; z-index: 100; color: rgba(255,255,255,.55); font-size: 1rem; } /* ---------- Мобильные --------------------------------------- */ @media (max-width: 768px) { .volume-control { top: 14px; left: 14px; padding: 8px 12px; gap: 10px; } #volume-slider { width: 92px; } .hint { top: 14px; right: 14px; font-size: .9rem; padding: 7px 12px; } .social { gap: 18px; } } @media (max-width: 480px) { .hint { display: none; } /* на телефоне клавиши Shift нет */ }