/* ============================================================ Шрифты ============================================================ Лежат у нас, а не тянутся с fonts.googleapis.com. Раньше в стоял стилевой файл с чужого домена, и он блокировал отрисовку: пока Google не ответит, страница не показывается. Для сайта, который читают из России, это лишняя точка отказа — заголовки набраны Russo One, и без него вёрстка поехала бы на системный шрифт. Подмножества только кириллица и латиница: греческий, вьетнамский и расширенные наборы сайту не нужны, а японский и китайский в этих шрифтах отсутствуют и всё равно падают на системный. unicode-range оставлен как у Google: браузер качает только те файлы, символы из которых реально встретились на странице. font-display: swap — текст виден сразу системным шрифтом и подменяется, когда файл доедет. Пустого места вместо текста не бывает. Кэширование настроено в .htaccess: font/woff2 на год. Сжимать их не нужно, woff2 уже сжат внутри себя. */ /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-300-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/inter-900-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/inter-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/russo-one-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/russo-one-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --bg:#050506; --bg-soft:#0c0c0f; --fg:#f4f2ee; --muted:#8a8a94; --accent:#e2483d; /* Фирменная заливка: тот же цвет, что у кнопок панели. */ --solid:#ab0000; --line:#232326; --maxw:1180px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;background:#030304} body{ position:relative; z-index:0; background: radial-gradient(1100px 760px at 10% -4%, rgba(226,72,61,.07), transparent 58%), radial-gradient(1200px 900px at 4% 44%, rgba(226,72,61,.035), transparent 62%), radial-gradient(1300px 900px at 100% 78%, rgba(123,45,250,.035), transparent 62%), radial-gradient(1000px 800px at 50% 112%, rgba(226,72,61,.055), transparent 60%), linear-gradient(180deg,#060608 0%,#08080b 42%,#050507 74%,#030304 100%); background-color:var(--bg); color:var(--fg); font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:96px 96px; } a{color:inherit;text-decoration:none} ul{list-style:none} img{display:block;max-width:100%} h1,h2,h3{font-family:'Russo One','Inter',system-ui,sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.05} /* Header */ /* Три колонки, а не флекс с автоотступами: логотип и набор иконок разной ширины, и при выравнивании отступами меню съезжало влево ровно на эту разницу. Крайние колонки равны (1fr), поэтому средняя стоит по центру окна независимо от того, что в них лежит. */ .site-header{ position:sticky; top:0; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 32px; background:rgba(10,10,11,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .logo{justify-self:start} .logo-img{height:60px;width:auto;display:block} .nav{display:flex;align-items:center;justify-content:center} .nav-item{display:inline-block;margin:0 16px;position:relative} .nav-item a{ font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#696c6f; transition:color .3s ease; } .nav-item a:hover{color:#fff} .nav-item.is-active a{color:#fff} .header-social{display:flex;align-items:center;gap:16px;justify-self:end} .social-link{ width:var(--icon,16px);height:var(--icon,16px); display:inline-flex;align-items:center;justify-content:center; } .social-link img{width:100%;height:100%;object-fit:contain;opacity:.6;transition:opacity .3s ease} .social-link:hover img{opacity:1} /* Тот же стиль, крупнее: подвал. */ .social-link-lg{--icon:24px} /* Hero */ /* Высоту первого экрана задаёт сама съёмка, а не высота окна: подложка и текст лежат в одной ячейке сетки, подложка держит пропорцию снимка, и под ней не остаётся пустой полосы. Пропорция считается от ширины самой подложки, а не от 100vw: полоса прокрутки в vw входит, и снимок оказался бы на её ширину ниже дна. */ .hero{ position:relative; display:grid; grid-template-areas:'stack'; align-items:stretch; background:transparent; overflow:hidden; } .hero-backdrop, .hero-content{grid-area:stack} .hero-backdrop{ position:relative; /* align-self:start — иначе сетка растянула бы подложку под высоту текста и пропорция сломалась бы. */ align-self:start; width:100%; aspect-ratio:3/2; max-height:100vh; max-height:100svh; /* Пока играет ролик, пропорция меняется на его собственную 16:9; переход совпадает по времени с проявлением ролика. */ transition:aspect-ratio .45s ease; background:transparent; overflow:hidden; } .hero:has(.hero-video.is-playing) .hero-backdrop{aspect-ratio:16/9} /* Съёмка вписывается целиком и прижата к верху. cover раздувал её: на широком мониторе за край уходили головы и ноги, на телефоне срезало крайних людей. На сверхшироком окне снимок упирается в высоту и стоит по центру — по бокам остаётся пусто, зато видно всех. */ .hero-photo{ position:absolute;inset:0;width:100%;height:100%; z-index:1; object-fit:contain;object-position:50% 0;opacity:1;filter:saturate(1.06); /* Пока идёт перебивка, фотография уходит целиком: полосы второго кадра видны на пустом фоне, а не поверх первого. Тот же хронометраж, что и у .hero-glitch, — обе анимации стартуют вместе и не расходятся. */ animation:hero-photo-cut 17s steps(1, end) infinite; } /* Фотография уходит ровно на время перебивки: её окно совпадает с окном hero-glitch, иначе на стыке мелькнёт то оба кадра сразу, то ни одного. */ @keyframes hero-photo-cut{ 0%, 85.9% {opacity:1} 86% {opacity:0} 92.7% {opacity:0} 92.8% {opacity:1} 100% {opacity:1} } .hero-video{ position:absolute;inset:0;width:100%;height:100%; z-index:2; object-fit:contain;object-position:50% 0;opacity:0;filter:saturate(1.06); transition:opacity .5s ease; } .hero-video.is-playing{opacity:1} /* Второй кадр съёмки поверх первого: та же композиция, другой образ. Появляется редко и рывками — это перебивка, а не переход, поэтому steps(1, end): значения меняются скачком, без плавного проявления. Кадры совпадают по геометрии с фотографией, так что подмена читается как сбой картинки, а не как второй снимок. Слой лежит на одном уровне с фотографией и выше её только порядком в разметке. Ролик идёт следующим слоем и перебивку закрывает: она накладывается на фотографию, а не на видео. На время перебивки фотография под ней пропадает целиком — её гасит парная анимация hero-photo-cut. Полупрозрачных кадров нет, только 0 или 1: на промежуточных значениях два снимка смешивались бы. Смещение полосы идёт вместе с scale(1.07): увеличенный кадр перекрывает окно среза с запасом, и сдвиг не оставляет щели. */ .hero-glitch{ position:absolute;inset:0;width:100%;height:100%; z-index:1; object-fit:contain;object-position:50% 0; opacity:0; pointer-events:none; animation:hero-glitch 17s steps(1, end) infinite; } /* Длительности здесь важнее, чем кажется. Каждая полоса — отдельное состояние с `steps(1, end)`, то есть кадр держится ровно столько, сколько занимает его доля цикла. При 0.4% от семнадцати секунд это 68 миллисекунд: на быстрой машине четыре кадра, а на медленной — ни одного, и от всей перебивки оставался только длинный сплошной кадр. Полосы удлинены до 0.7% (119 мс), сплошной кадр укорочен, чтобы окно перебивки почти не выросло. */ @keyframes hero-glitch{ 0%, 85.9% {opacity:0; clip-path:inset(0 0 0 0); transform:none; filter:none} /* Первая серия рывков: видны только полосы кадра */ 86% {opacity:1; clip-path:inset(11% 0 62% 0); transform:translateX(-1.6%) scale(1.07); filter:saturate(1.35)} 86.7% {opacity:1; clip-path:inset(45% 0 21% 0); transform:translateX(2.1%) scale(1.07)} 87.4% {opacity:0} 88% {opacity:1; clip-path:inset(68% 0 8% 0); transform:translateX(-2.4%) scale(1.07)} 88.7% {opacity:0} /* Кадр держится целиком — около трёхсот миллисекунд. Отдельного кадра на конец удержания не нужно: при steps(1, end) состояние живёт до следующей отметки. */ 89.2% {opacity:1; clip-path:inset(0 0 0 0); transform:none; filter:none} /* Возврат обратно, снова рывками */ 91% {opacity:1; clip-path:inset(58% 0 12% 0); transform:translateX(2.6%) scale(1.07); filter:saturate(1.3)} 91.7% {opacity:1; clip-path:inset(0 0 0 0); transform:none} 92.1% {opacity:1; clip-path:inset(6% 0 74% 0); transform:translateX(-1.8%) scale(1.07)} 92.8% {opacity:0} 100% {opacity:0} } /* Крестик нарисован клинками в духе блэк-метал-логотипа: два зазубренных росчерка с шипами вместо обычного знака умножения. */ .hero-close{ position:absolute; top:16px; right:20px; z-index:6; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; cursor:pointer; opacity:.78; /* Тень нужна поверх светлых кадров ролика, иначе белое на белом пропадает. */ filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)); transition:opacity .2s, transform .2s; } .hero-close img{width:30px;height:30px;display:block} .hero-close:hover{opacity:1;transform:rotate(-8deg) scale(1.06)} /* Логотип первого экрана объёмный: в разметке лежит стопка копий одной картинки, здесь они разносятся по оси Z и наклоняются. Слои разложены на .hero-logo-stage, а анимация и позиция остались на .hero-logo — снаружи. Так и должно быть: `filter` и `opacity` делают элемент группирующим и расплющивают трёхмерность своих детей, поэтому анимации место над сценой, а не на ней. */ .hero-logo{ position:absolute; z-index:6; left:50%; top:66%; transform:translate(-50%,-50%); height:min(46%,30vw); /* Ширину задаёт пропорция viewBox самого файла: у
нет собственного размера, а раньше её давала картинка. */ aspect-ratio:1000/714; /* Прозрачности нет намеренно. Полупрозрачная группа заставляет браузер собирать всю стопку слоёв в отдельный буфер и смешивать его с фоном, а знак от этого только терялся на светлых кадрах ролика. `mix-blend-mode:normal` здесь тоже стояло зря: это значение по умолчанию, оно ничего не меняло. */ user-select:none; pointer-events:none; /* Ровный ход, а не ease-in-out: с ускорениями и замедлениями смена цвета читалась как биение, даже когда размер перестал меняться. */ animation:nu-metal 9s linear infinite; /* Стопка слоёв не меняется никогда — по кругу идёт только оттенок. Подсказка разрешает браузеру растрировать её один раз в отдельный слой и дальше каждый кадр гонять по готовой текстуре только цветовой шейдер, вместо того чтобы пересобирать шестнадцать картинок. Заодно перерисовка знака перестаёт тянуть за собой область с роликом под ним. Ценой лишней текстуры в памяти — здесь это доли мегабайта. */ will-change:filter; } .hero-logo-stage{ position:absolute; inset:0; perspective:1000px; transform-style:preserve-3d; } /* Наклон назад верхом — постоянный, логотип не вращается. Поворот стоит у каждого слоя, а не у общей обёртки: он одинаков для всех, и смещение вглубь идёт уже по наклонённой оси — это то же самое, что повернуть всю стопку, только без лишнего элемента в разметке. */ .hero-logo-face{ position:absolute; inset:0; width:100%; height:100%; /* Шаг вглубь считается от ширины экрана, а не в жёстких пикселях: сам логотип тоже привязан к ней (min(46%,30vw)), и с постоянным шагом на телефоне грань выходила во всю треть высоты знака. Пределы держат её осмысленной и на узком экране, и на большом мониторе. */ transform:rotateX(22deg) translateZ(calc(var(--layer) * clamp(1.1px, 0.32vw, 2.8px) * -1)); } /* Задние копии — это боковая грань: чем дальше, тем темнее. */ .hero-logo-face.is-side{filter:brightness(var(--shade))} /* Лицевая грань отделяется от граней собственной тенью. */ .hero-logo-face:not(.is-side){filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))} /* Логотип не пульсирует: размер и прозрачность постоянные, по кругу идёт только оттенок — ровным ходом, без остановок на промежуточных кадрах. Раньше вместе с цветом дышали масштаб, прозрачность, насыщенность и контраст, и знак заметно бился. Ни transform, ни opacity здесь больше не упоминаются: незаявленное в кадрах свойство берётся из самого правила .hero-logo, а там и позиция, и прозрачность заданы раз и навсегда. */ /* Перелив в трёх цветах: оранжевый, красный, фиолетовый. Отсчёт идёт от заливки самого файла (#e2483d, красный), поэтому в кадрах не сами цвета, а сдвиг от неё: +25 уводит в оранжевый, 0 оставляет красным, -85 доводит до фиолетового. Знак минус здесь принципиален. К фиолетовому можно прийти и через +275, но тогда оттенок пойдёт длинной дорогой — через жёлтый, зелёный и синий, и логотип по пути позеленеет. Через минус путь короткий: красный, розовый, фиолетовый. Весь перелив укладывается в 110 градусов и других цветов не показывает. Пределы выбраны по расчёту, а не на глаз: +40 даёт оттенок 23 градуса (#de5500, оранжевый), дальше цвет темнеет и к +60 уходит в жёлтый; -85 даёт 284 градуса (#c831ff, фиолетовый), дальше синеет. Насыщенность и контраст постоянные: стоит им задышать вместе с оттенком — и знак снова начнёт пульсировать. */ @keyframes nu-metal{ 0%,100%{filter:hue-rotate(40deg) saturate(1.6) contrast(1.16)} 34%{filter:hue-rotate(0deg) saturate(1.6) contrast(1.16)} 67%{filter:hue-rotate(-85deg) saturate(1.6) contrast(1.16)} } /* Первый экран уехал из виду — всё, что на нём двигалось, замирает: работать вхолостую незачем, а увидеть паузу некому. Класс ставит main.js по IntersectionObserver, он же останавливает ролик; без скрипта анимации продолжают идти, как раньше. */ .hero.is-idle .hero-photo, .hero.is-idle .hero-glitch, .hero.is-idle .hero-logo{animation-play-state:paused} /* Слабая отрисовка. Класс ставит main.js, померив частоту кадров: отдельного признака «рисуем программно» браузер не даёт, а с выключенным аппаратным ускорением каждый кадр считает процессор, и украшения первого экрана становятся дорогими. Что выключаем и почему именно это: - подсветка фона — слой 2277 на 1685 точек, который иначе перекладывается каждый кадр; на процессоре это самая тяжёлая позиция из всех; - перелив логотипа — цветовая матрица по стопке из шестнадцати картинок каждый кадр; без анимации стопка растрируется один раз; - размытие под шапкой — оно пересчитывается всякий раз, когда меняется то, что под ним, а под ним играет ролик, то есть каждый его кадр; - зерно поверх страницы — полноэкранное смешивание на каждый кадр. Сам логотип, его объём и ролик остаются: это содержимое, а не украшение. */ html.is-slow .bg-drift::before{animation:none} html.is-slow .hero-logo{animation:none;will-change:auto} html.is-slow .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; /* Без размытия фон шапки должен быть плотнее, иначе под ней читается ролик. */ background:rgba(10,10,11,.96); } html.is-slow body::after{display:none} @media (prefers-reduced-motion: reduce){ /* Анимации нет — отдельный слой под неё держать незачем: подсказка стоила бы памяти под текстуру, которую никто не перерисовывает. */ .hero-logo{animation:none;will-change:auto} /* Мерцание перебивки — ровно то, от чего защищает эта настройка. */ .hero-glitch{animation:none;opacity:0} .hero-photo{animation:none;opacity:1} } .hero-content{position:relative;z-index:3;padding:clamp(20px,4vw,48px) clamp(16px,3vw,32px);display:flex;flex-direction:column;gap:clamp(14px,2vw,24px);align-items:flex-start;justify-content:flex-start} .hero-text{display:inline-block;max-width:100%;text-align:center} .hero-tag{color:var(--accent);text-transform:uppercase;letter-spacing:.16em;font-size:.85rem;max-width:34ch;margin:0 auto;text-shadow:0 2px 14px rgba(0,0,0,.9)} .hero-heading{ font-size:clamp(2rem,5.5vw,4rem); width:max-content; max-width:100%; margin:0 auto; text-transform:uppercase; line-height:1.02; letter-spacing:.02em; text-shadow:0 2px 18px rgba(0,0,0,.95); } .hero-sub{ width:100%; font-size:clamp(.9rem,1.8vw,1.2rem); font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--fg); text-shadow:0 2px 14px rgba(0,0,0,.9); } .hero-cta{display:flex;flex-wrap:wrap;gap:18px;margin:18px auto 0;justify-content:center} .hero .social-icon.platform{ width:34px;height:34px;border-radius:8px; background:transparent;border:1px solid var(--line); opacity:.85; } .hero .social-icon.platform img{width:18px;height:18px} .hero .social-icon.platform:hover{ transform:none;filter:none;box-shadow:none; opacity:1;border-color:var(--muted); } .word-censor{ display:inline-block; background:var(--accent); color:transparent; border-radius:3px; padding:0 3px; user-select:none; transition:background .25s,color .25s,text-shadow .25s; } .word-censor:hover{ background:transparent; color:#ffb0a8; text-shadow:0 0 10px rgba(226,72,61,.5); } /* Sections */ .section{padding:96px 32px;max-width:var(--maxw);margin:0 auto} .section#about{padding-top:48px} /* Videos */ .video-pane[hidden]{display:none} .video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} .video-card{display:block;color:inherit;text-decoration:none} .video-thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:10px;margin-bottom:12px} .video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease} .video-card:hover .video-thumb img{transform:scale(1.05)} .video-title{display:block;font-weight:700;font-size:.95rem;line-height:1.35;text-transform:none} .premiere-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden} .premiere-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* Обложка вместо плеера. Плеер подключается по нажатию, поэтому здесь кнопка, а не картинка: до неё можно дойти с клавиатуры и нажать пробелом. */ .premiere-play{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; display:block; } .premiere-poster{width:100%;height:100%;object-fit:cover;display:block} /* Треугольник плеера. Рисуется рамкой, чтобы не тащить ещё одну картинку. */ .premiere-icon{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; background:rgba(10,10,11,.62); border:2px solid rgba(244,242,238,.85); transition:background .2s, transform .2s; } .premiere-icon::after{ content:""; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent var(--fg); } .premiere-play:hover .premiere-icon{background:var(--solid);transform:translate(-50%,-50%) scale(1.06)} .premiere-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Подпись на месте картинки, которая не пришла. Лежит под обложкой и видна, только когда та не загрузилась: сама обложка непрозрачна и её закрывает. */ .premiere-fallback, .video-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; background:#101014; } /* Картинка пришла — подпись не нужна вовсе. Класс ставит main.js: до его решения подпись просто лежит под обложкой и не мешает. */ .premiere-play.is-loaded .premiere-fallback, .video-thumb.is-loaded .video-fallback{display:none} /* Не пришла — убираем саму картинку, иначе браузер покажет её значок «битая». */ .premiere-play.is-broken .premiere-poster, .video-thumb.is-broken img{display:none} .premiere-title{margin-top:16px;font-weight:700;font-size:1.1rem;line-height:1.35;text-align:center;text-transform:none} .video-empty, .tour-empty{text-align:center;padding:24px 0;color:var(--muted)} .tour-empty a{color:var(--fg);text-decoration:underline} .section-title{ font-size:clamp(1.5rem,3vw,2.4rem); text-transform:uppercase; margin-bottom:48px; } /* About */ .about-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; } .about-body{font-size:1.1rem;color:var(--muted);max-width:60ch} .members li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--fg)} .members li:first-child{border-top:1px solid var(--line)} /* Линейный состав */ .lineup{margin-top:56px} .subsection-title{ font-size:1.2rem; text-transform:uppercase; letter-spacing:.16em; color:var(--fg); margin-bottom:24px; } .lineup-grid{ display:flex; flex-wrap:wrap; gap:24px; list-style:none; } .member-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; background:none; border:none; color:inherit; font-family:inherit; padding:0; cursor:pointer; } .member-card.is-static{cursor:default} /* Карточка без описания и ссылок не раскрывается, поэтому и не приподнимается: подъём при наведении обещал бы нажатие, которого не будет. */ .member-card.is-static:hover .member-photo{transform:none;border-color:var(--line)} .member-photo{ display:block; position:relative; width:112px; height:112px; border-radius:50%; overflow:hidden; background:#000; border:1px solid var(--line); transition:transform .2s,border-color .2s; } .member-card:hover .member-photo{transform:translateY(-4px);border-color:var(--accent)} .member-photo img{width:100%;height:100%;object-fit:cover;display:block} .member-video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;z-index:2;background:#000; transition:opacity .25s ease; } .member-card:hover .member-video{opacity:1} .member-initial{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-size:2.4rem;font-weight:800;color:var(--fg); background:#15151b; } .member-name{font-weight:700;font-size:1rem} .member-role{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em} /* Интерактивный состав (как в дискографии): клик по фото — деталь справа */ .lineup-layout{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; } .lineup-layout.is-open{grid-template-columns:minmax(280px,420px) 1fr} .lineup-left.is-selected .lineup-pane{display:none} .lineup-selected{display:block} .lineup-selected[hidden]{display:none} .lineup-detail[hidden]{display:none} .lineup-back{ display:inline-block; background:none; border:none; color:var(--muted); font-family:inherit; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; padding:0 0 18px; cursor:pointer; transition:color .2s; } .lineup-back:hover{color:var(--accent)} .lineup-detail{ position:sticky; top:96px; background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:28px; min-height:340px; } .detail-note{color:var(--muted);font-size:.95rem;line-height:1.5;max-width:52ch} /* Личные ссылки участника: те же кнопки-иконки, что и у релиза. */ .detail-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px} .detail-links .social-icon.platform{ width:34px;height:34px;border-radius:8px; background:transparent;border:1px solid var(--line); opacity:.85; } .detail-links .social-icon.platform img{width:18px;height:18px} .detail-links .social-icon.platform:hover{ transform:none;filter:none;box-shadow:none; opacity:1;border-color:var(--muted); } .detail-dates{display:block;color:var(--muted);font-size:.9rem;margin-bottom:14px} .detail-birthday{display:block;color:var(--muted);font-size:.9rem;margin-bottom:8px} /* История состава — горизонтальные полоски */ .history{margin-top:56px} .hist-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .hist-row{display:grid;grid-template-columns:minmax(150px,200px) 1fr;align-items:center;gap:16px} .hist-name{font-size:.9rem;line-height:1.25;color:var(--fg)} .hist-role{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-style:normal} .hist-track{position:relative;height:26px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--line)} .hist-bar{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--accent);opacity:.85;display:block} .hist-scale{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:16px;margin-top:10px} .hist-axis{position:relative;height:18px;color:var(--muted);font-size:.72rem} .hist-tick{position:absolute;top:0;transform:translateX(-50%)} /* Период текстом под именем. На телефоне это единственный способ его узнать: подсказка `title` при касании не показывается вовсе. */ .hist-period{display:block;font-size:.72rem;color:var(--muted);font-style:normal} /* Tour */ .tour-list{border-top:1px solid var(--line)} .tour-row{ display:grid; grid-template-columns:1fr 2fr auto; gap:24px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); } .tour-date{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem} .tour-venue{display:flex;flex-direction:column} .tour-venue strong{font-weight:700} .tour-venue em{color:var(--muted);font-style:normal;font-size:.9rem} .tour-price{display:inline-block;margin-top:6px;color:var(--accent);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em} .tour-actions{display:flex;gap:12px} /* Скрытая строка остаётся в разметке ради поиска по странице, но у .tour-row свой display:grid — атрибут hidden без этого правила не сработает. */ .tour-row[hidden]{display:none} .tour-more{margin-top:22px;text-align:center} /* История тура: годы, каждый раскрывается отдельно. */ .tour-history{margin-top:56px} .tour-year{border-top:1px solid var(--line)} .tour-year:last-child{border-bottom:1px solid var(--line)} .tour-year-head{ display:flex; align-items:center; gap:12px; width:100%; padding:16px 0; background:none; border:0; color:var(--fg); font-family:inherit; text-align:left; cursor:pointer; transition:color .2s; } .tour-year-head:hover{color:var(--accent)} .tour-year-num{font-size:1.1rem;font-weight:700;letter-spacing:.06em} .tour-year-count{ margin-left:auto; padding:2px 10px; /* Рамка цвета --line на тёмном фоне не видна, и число повисает непонятно чем: кружок рисуется приглушённым цветом. */ border:1px solid var(--muted); border-radius:999px; color:var(--muted); font-size:.8rem; } /* Уголок показывает, свёрнут год или раскрыт. */ .tour-year-head::after{ content:''; width:8px;height:8px;flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; } .tour-year-head[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)} .tour-year-list{border-top:0;margin-bottom:10px} .tour-year-list[hidden]{display:none} /* Buttons */ .btn{ display:inline-block; padding:11px 24px; border-radius:6px; background:var(--fg); color:#09090b; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:background .16s,transform .1s,filter .16s; } .btn:hover{filter:brightness(.96)} .btn.large{font-size:.8rem;padding:13px 32px} .btn.solid{ background:#ab0000; color:#ffffff; border-radius:5px; font-weight:700; filter:none; } .btn.solid:hover{ background:#ffffff; color:#ab0000; filter:none; } /* Discography */ .disco-tabs{ display:flex; gap:12px; margin-bottom:28px; } .disco-tab{ background:none; border:none; border-bottom:2px solid var(--line); color:var(--muted); font-family:inherit; font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; padding:10px 4px; cursor:pointer; transition:color .2s,border-color .2s; } .disco-tab:hover{color:var(--fg)} .disco-tab.is-active{color:var(--accent);border-color:var(--accent)} .disco-layout{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; } .disco-layout:has(.disco-detail:not([hidden])){grid-template-columns:minmax(280px,420px) 1fr} .disco-left.is-selected .disco-tabs, .disco-left.is-selected .disco-grid-pane{display:none} /* Переход по ссылке на релиз уводит экран к заголовку раздела, а не сюда: высота липкой шапки зависит от ширины экрана, и одного отступа на все случаи не хватало — верх карточки уезжал под неё вместе с обложкой. */ .disco-selected{display:block} .disco-selected[hidden]{display:none} .disco-detail[hidden]{display:none} .disco-back{ display:inline-block; background:none; border:none; color:var(--muted); font-family:inherit; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; padding:0 0 18px; cursor:pointer; transition:color .2s; } .disco-back:hover{color:var(--accent)} .disco-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; } .album-card{ display:block; background:var(--bg-soft); border:none; color:inherit; font-family:inherit; text-align:left; padding:0; cursor:pointer; transition:transform .2s,border-color .2s; border:1px solid transparent; } .album-card:hover{transform:translateY(-4px);border-color:var(--accent)} .album-card.is-static{cursor:default} .album-cover{display:block;aspect-ratio:1;background:#000;overflow:hidden;border-radius:10px} .album-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s} .album-card:hover .album-cover img{opacity:.85} .album-meta{display:flex;flex-direction:column;gap:4px;padding:12px 4px} .album-title{font-weight:700;font-size:.95rem} .album-info{color:var(--muted);font-size:.76rem;line-height:1.4} .disco-detail{ position:sticky; top:96px; background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:28px; min-height:340px; } .detail-cover{aspect-ratio:1;max-width:280px;background:#000;border-radius:12px;overflow:hidden;margin-bottom:20px} .detail-cover img{width:100%;height:100%;object-fit:cover;display:block} .detail-kind{ display:inline-block; color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; margin-bottom:8px; } .detail-title{font-size:1.6rem;text-transform:uppercase;line-height:1.1;margin-bottom:6px} .detail-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:20px} .detail-performers{display:block;color:var(--fg);font-size:1rem;opacity:.85;margin-bottom:12px} .detail-year{color:var(--fg);font-size:.95rem;font-weight:500} .detail-stats{color:var(--muted);font-size:.85rem} .detail-tracks{ list-style:none; margin:0 0 24px; padding:0; border-top:1px solid var(--line); } .detail-tracks li{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; } .detail-tracks .t-num{color:var(--muted);min-width:20px;flex:none;font-size:.8rem} /* min-width:0 обязателен: без него флекс не даёт названию сжаться ниже собственной ширины, и длинный трек выпирает за край на телефоне. */ .detail-tracks .t-name{color:var(--fg);flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .t-row{cursor:pointer;transition:background .2s} .t-row:hover{background:rgba(226,72,61,.05)} .lyr-badge{ display:inline-block; flex-shrink:0; padding:0 4px; background:var(--muted); border-radius:3px; color:var(--bg-soft); font-size:.55rem; line-height:1.5; font-weight:700; vertical-align:middle; } .lyrics-view[hidden]{display:none} .lyrics-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .age-btn{ background:none; border:1px solid var(--accent); border-radius:6px; color:var(--accent); font-family:inherit; font-size:.78rem; font-weight:700; padding:10px 16px; cursor:pointer; transition:background .2s,color .2s; } .age-btn.active{background:var(--accent);color:#fff} .lyrics-text .censor{ background:var(--accent); color:transparent; border-radius:3px; user-select:none; } .lyrics-view.uncensored .censor{background:none;color:inherit;user-select:text} .lyrics-title{ font-size:1.1rem; text-transform:uppercase; margin:0 0 16px; color:var(--fg); } .lyrics-text{ white-space:pre-wrap; font-family:inherit; font-size:.95rem; color:var(--fg); line-height:1.8; margin:0 0 24px; padding:20px 0; border-top:1px solid var(--line); } .mat-badge{ display:inline-block; flex-shrink:0; padding:0 5px; background:#e0243c; border-radius:3px; color:var(--bg-soft); font-size:.55rem; line-height:1.5; font-weight:700; vertical-align:middle; } /* Кнопки площадок в карточке релиза: иконки без подписей, иначе строка из семи площадок разъезжается на несколько рядов. Оформление то же, что у иконок на первом экране. */ .detail-listen{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px} /* Кнопка «Скопировать ссылку» стоит в одном ряду с иконками, но остаётся текстовой: действие, а не площадка, и знакомой иконки у него нет. */ .copy-link{height:34px;padding:0 14px;font-size:.72rem;letter-spacing:.08em} .copy-link.is-done{border-color:var(--accent);color:var(--accent)} .detail-listen .social-icon.platform{ width:34px;height:34px;border-radius:8px; background:transparent;border:1px solid var(--line); opacity:.85; } .detail-listen .social-icon.platform img{width:18px;height:18px} .detail-listen .social-icon.platform:hover{ transform:none;filter:none;box-shadow:none; opacity:1;border-color:var(--muted); } /* Footer */ .site-footer{ border-top:1px solid var(--line); padding:40px 32px; text-align:center; color:var(--muted); } .footer-social{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-bottom:28px; } .social-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:var(--brand,#222); transition:transform .2s,filter .2s,box-shadow .2s; } .social-icon img{width:26px;height:26px;display:block} .social-icon:hover{ transform:translateY(-3px) scale(1.04); filter:brightness(1.15); box-shadow:0 8px 20px rgba(0,0,0,.5); } .social-icon span{color:#fff;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:0 6px} .site-footer p{font-size:.85rem} .site-footer a:hover{color:var(--fg)} .footer-fan{ margin-top:32px; padding-top:32px; border-top:1px solid var(--line); max-width:64ch; margin-left:auto; margin-right:auto; } .fan-head{ font-size:.72rem; text-transform:uppercase; letter-spacing:.24em; color:var(--accent); margin-bottom:16px; } .fan-body{color:var(--muted);line-height:1.8;max-width:58ch;margin:0 auto} .fan-body strong{color:var(--fg);font-weight:500} /* Контакты — форма */ .contact .section-title{margin-bottom:28px} .contact-wrap{max-width:560px;margin:0 auto} .contact-form{display:flex;flex-direction:column;gap:18px} .form-row{display:flex;flex-direction:column;gap:8px} .form-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .contact-form input, .contact-form select, .contact-form textarea{ width:100%; background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; color:var(--fg); font-family:inherit; font-size:1rem; padding:12px 14px; transition:border-color .2s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--accent); } .contact-form textarea{resize:vertical;min-height:120px} .contact-form .btn{align-self:flex-start} .form-status{max-width:560px;margin:0 auto 16px;padding:12px 16px;border-radius:8px;font-size:.92rem} .form-status.ok{background:rgba(46,160,86,.14);border:1px solid rgba(46,160,86,.5)} .form-status.bad{background:rgba(224,36,60,.14);border:1px solid rgba(224,36,60,.5)} .form-error{color:#e0243c;font-size:.82rem;margin:0} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* Модалка подтверждения 18+ */ .age-modal{ position:fixed;inset:0;z-index:100; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.7); padding:24px; } .age-modal[hidden]{display:none} .age-modal-card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:360px; text-align:center; box-shadow:0 0 40px rgba(0,0,0,.6); } .age-modal-text{color:var(--fg);margin:0 0 24px;font-size:1.05rem} .age-modal-actions{display:flex;gap:14px;justify-content:center} @media (max-width:760px){ /* Навигация не прячется, а переезжает строкой под логотип и прокручивается вбок, если не помещается. */ /* Логотип и иконки в одной строке, лента навигации — во второй. Места в сетке заданы явно: иначе автоматическая расстановка уводит иконки на третью строку, следом за навигацией. */ .site-header{grid-template-columns:auto 1fr;padding:10px 16px;row-gap:8px} .logo{grid-area:1 / 1} .header-social{grid-area:1 / 2} .logo-img{height:44px} .nav{ grid-area:2 / 1 / 3 / -1; width:100%; margin:0; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; -ms-overflow-style:none; } .nav::-webkit-scrollbar{display:none} .nav-item{margin:0 18px 0 0;white-space:nowrap} .nav-item:last-child{margin-right:0} .header-social{justify-self:end;gap:14px} .about-grid{grid-template-columns:1fr} .tour-row{grid-template-columns:1fr;gap:12px} .tour-actions{justify-content:flex-start} /* Селектор с :has() весомее простого класса, а медиазапрос веса не даёт: без этой пары раскрытый релиз оставался в две колонки и уезжал за правый край экрана вместе со списком треков. */ .disco-layout, .disco-layout:has(.disco-detail:not([hidden])){grid-template-columns:1fr} .disco-detail{position:static} .lineup-layout.is-open{grid-template-columns:1fr} .lineup-detail{position:static} } /* Keyboard focus */ :where(a, button, input, select, textarea, [role="button"], .t-row):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .nav a:focus-visible{outline-offset:6px} /* Interactive states */ .btn:active{transform:translateY(0) scale(.99)} .btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none} .t-row:active{background:var(--bg-soft)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* Нижняя строка подвала: язык слева, хостинг по центру, копирайт справа. Раскладка повторяет ту, что на watchlist.lostvault.ru. */ .footer-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); } .footer-left{display:flex;align-items:center;gap:8px} .footer-hosting{ color:var(--muted); white-space:nowrap; transition:color .2s ease; } .footer-hosting:hover{color:var(--fg)} .footer-hosting-mark{ color:#fff; background:rgba(227,31,37,.7); padding:.05em .16em; } .footer-copyright{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .footer-cat{color:var(--muted);letter-spacing:.05em;transition:color .2s ease} .footer-cat:hover{color:var(--accent)} /* Выбор языка */ .lang-dropdown{position:relative} .lang-toggle{ display:inline-flex;align-items:center;gap:6px; background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 12px; color:var(--fg); font-family:inherit; font-size:.82rem; cursor:pointer; transition:border-color .2s ease,background .2s ease; } .lang-toggle:hover{border-color:#3a3a40;background:var(--bg-soft)} .lang-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .lang-toggle-label{color:var(--muted)} .lang-toggle-current{font-weight:700} .lang-menu{ position:absolute; bottom:calc(100% + 8px); left:0; min-width:180px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 -8px 28px rgba(0,0,0,.55); z-index:70; } .lang-menu form{display:flex;flex-direction:column;margin:0;padding:0} .lang-item{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%; background:transparent; border:0; border-radius:6px; padding:8px 10px; color:var(--fg); font-family:inherit; font-size:.85rem; line-height:1.2; text-align:left; cursor:pointer; transition:background .15s ease; } .lang-item:hover{background:rgba(255,255,255,.06)} .lang-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .lang-item.is-active{color:var(--accent);font-weight:700} .lang-item-check{color:var(--accent)} @media (max-width:700px){ .footer-bar{justify-content:center;text-align:center} .lang-menu{left:50%;transform:translateX(-50%)} } /* Перелив за фото вверху страницы. Цвета прежние: фирменный красный и фиолетовый из фона тела. Градиент растянут вдвое и плавно ходит по своей ширине — отсюда ощущение перелива. Слой ровно по ширине окна, поэтому горизонтальной прокрутки он не создаёт. */ /* Подсветка фона. Сам слой неподвижен и только обрезает и растворяет то, что внутри; двигается вложенный ::before. Раньше движение делалось анимацией background-position, и это заставляло браузер перерисовывать слой каждый кадр — а он немаленький, около 1265x936 на обычном мониторе, и работает на всей странице всегда, а не только на первом экране. Теперь двигается transform: его браузер считает на композиторе, без перерисовки. Вид не изменился: ::before ровно того размера, каким раньше был градиент (180% на 180%), сдвиг подобран так, чтобы повторить прежние крайние положения фона. */ .bg-drift{ position:absolute; top:0; left:0; right:0; height:min(1100px,130vh); z-index:-1; pointer-events:none; /* Внутренний слой шире рамки — лишнее обрезаем. */ overflow:hidden; /* Книзу слой растворяется, чтобы не обрывался ровной чертой. */ -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); } .bg-drift::before{ content:""; position:absolute; left:0; /* По вертикали слой выше рамки на те же 80%, и раньше он центрировался (background-position ... 50%). Отсюда смещение вверх на половину превышения: -40%. */ top:-40%; width:180%; height:180%; background:linear-gradient(334deg, rgba(123,45,250,.10) 0%, rgba(226,72,61,.085) 34%, rgba(123,45,250,.08) 58%, rgba(226,72,61,.065) 100%); animation:bgDrift 22s ease infinite; } /* Крайнее положение — это прежний background-position:100%: градиент уезжал влево на 80% ширины рамки. Слой шире рамки в 1.8 раза, поэтому те же 80% рамки составляют 44.4444% его собственной ширины. */ @keyframes bgDrift{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-44.4444%,0,0)} } /* ========================================================================== Задание для фанатов: красная закладка у левого края. По нажатию она сама раздвигается, подпись сменяется текстом задания. ========================================================================== */ .quest{ position:fixed; top:50%; left:0; z-index:60; /* Ширина по самой длинной надписи из lang/ — «ПОРУЧЕНИЕ»; высота на три строки. Шире делать нечего: закладка держится на словах. */ width:136px; max-height:84px; overflow:hidden; color:#fff; background:linear-gradient(160deg,#c40000 0%,var(--solid) 52%,#8d0000 100%); /* Вырез справа делает ленту похожей на книжную закладку. */ clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); filter:drop-shadow(5px 0 16px rgba(0,0,0,.55)); transform:translateY(-50%); transition:width .34s cubic-bezier(.22,.61,.36,1), max-height .34s cubic-bezier(.22,.61,.36,1); } .quest.is-open{ width:min(360px,84vw); max-height:min(70vh,520px); overflow-y:auto; } /* Закрытое состояние: подпись во всю закладку, текст горизонтальный. */ .quest-teaser{ display:block; width:100%; padding:13px 30px 13px 18px; line-height:1.35; background:transparent; border:0; color:inherit; font-family:inherit; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:left; cursor:pointer; text-shadow:0 1px 6px rgba(0,0,0,.4); } .quest-teaser-line{display:block;white-space:nowrap} .quest-teaser:hover{filter:brightness(1.08)} .quest-teaser:focus-visible{outline:2px solid #fff;outline-offset:-6px} /* При открытии подпись исчезает и уступает место тексту задания. */ .quest.is-open .quest-teaser{display:none} .quest-panel{ display:none; position:relative; padding:20px 28px 20px 18px; } .quest.is-open .quest-panel{ display:block; animation:questFade .28s ease .06s both; } @keyframes questFade{ from{opacity:0} to{opacity:1} } /* Две кнопки в углу: минус складывает закладку обратно в ленту, крестик убирает её до конца сессии. */ .quest-collapse,.quest-hide{ position:absolute;top:6px; width:28px;height:28px; display:flex;align-items:center;justify-content:center; background:transparent;border:0;border-radius:8px; color:rgba(255,255,255,.75);font-size:1.35rem;line-height:1;cursor:pointer; } .quest-hide{right:16px} .quest-collapse{right:48px} .quest-collapse:hover,.quest-hide:hover{color:#fff;background:rgba(0,0,0,.22)} .quest-collapse:focus-visible,.quest-hide:focus-visible{outline:2px solid #fff;outline-offset:2px} .quest-title{ color:rgba(255,255,255,.72); font-size:.7rem;text-transform:uppercase;letter-spacing:.16em; margin-bottom:10px; /* Место для двух кнопок в углу. */ padding-right:64px; } .quest-text{font-size:.94rem;line-height:1.7;color:#fff} .quest-text p{margin-bottom:10px} .quest-text p:last-child{margin-bottom:0} .quest-text ul{margin:0 0 10px 18px} .quest-text li{margin-bottom:6px} /* На красном фоне ссылки белые с подчёркиванием: красный на красном не читается. */ .quest-text a{color:#fff;border-bottom:1px solid rgba(255,255,255,.55);font-weight:700} .quest-text a:hover{border-bottom-color:#fff} .quest-text strong{color:#fff} .quest-text code{ background:rgba(0,0,0,.24); border-radius:5px;padding:1px 5px; font-family:ui-monospace,Consolas,monospace;font-size:.85em; } @media (max-width:760px){ .quest{ top:auto; bottom:0; left:0; width:100%; transform:none; clip-path:polygon(0 0, 50% 12px, 100% 0, 100% 100%, 0 100%); } .quest.is-open{width:100%;max-height:64vh} .quest-teaser{padding:18px 18px 16px;text-align:center} .quest-panel{padding:26px 18px 20px} .quest-collapse,.quest-hide{top:12px} .quest-hide{right:12px} .quest-collapse{right:44px} } /* ========================================================================== Размеры экранов ========================================================================== */ /* Широкий монитор: содержимое не растягивается на всю ширину, но полям даётся больше воздуха, а первый экран не становится непомерно высоким — предел задан в самом .hero. */ @media (min-width:1600px){ .site-header{padding:18px 48px} .hero-content{padding-left:48px;padding-right:48px} } /* Сверхширокий: заголовок считается от меньшей стороны окна, иначе он распухает вместе с шириной. */ @media (min-aspect-ratio:2/1){ .hero-heading{font-size:clamp(2rem,4vmin,3.4rem)} } /* Телефон: высоту первого экрана задаёт съёмка и текст под ней, отдельного предела не нужно. */ @media (max-width:760px){ .hero-heading{font-size:clamp(1.7rem,8vw,2.6rem)} .hero-content{align-items:center;text-align:center} .hero-text{width:100%} .hero-cta{justify-content:center;width:100%} .hero-close{top:10px;right:12px} /* История состава. На двух колонках имя съедало полэкрана, полоске оставалось около двухсот пикселей, и полтора десятка годов сливались в кашу. Складываем в одну колонку: имя с периодом строкой, полоска под ним во всю ширину — читать её так заметно легче. Из шкалы остаются только главные годы, остальные при такой ширине наезжают друг на друга и не значат ничего. */ .hist-row{grid-template-columns:1fr;gap:6px} .hist-track{height:20px} .hist-scale{grid-template-columns:1fr;gap:0} .hist-gap{display:none} .hist-tick:not(.is-major){display:none} /* Крайние подписи прижимаются к краям, иначе половина уходит за экран. */ .hist-tick:first-child{transform:none} .hist-tick.is-major:last-child{transform:translateX(-100%)} } /* Узкий телефон: убираем лишние поля, чтобы текст не жался в колонку. */ @media (max-width:420px){ .section{padding-left:14px;padding-right:14px} .hero-content{padding-left:14px;padding-right:14px} .logo-img{height:38px} .nav-item{margin-right:13px} .nav-item a{font-size:11px;letter-spacing:.06em} }