/* Единый стиль публичных витрин: стартовая студии «ВерЮ» (/) и страница кавер-группы «НаКавёр» (/band). Почему отдельный файл, а не инлайн в двух шаблонах, как было раньше: обе страницы повторяли друг друга почти построчно, расходились при любой правке и выглядели «текстом в столбик». Здесь один набор компонентов на обе. ВАЖНО: ни одного своего цвета. Всё построено на переменных из telegram-theme.css (--bg-app, --bg-card, --text-primary, --accent, --border и т.д.), поэтому витрины подчиняются палитре тем наравне с остальным сайтом: переключатель ставит data-theme на , и страница перекрашивается. Хардкод цвета здесь — это баг, тема его не перекрасит. Значения после запятой в var(...) — запасные, на случай если файл темы не подгрузился; менять палитру нужно в telegram-theme.css. ВНИМАНИЕ: файл отдаётся с ?v= из шаблонов (pub_ver). Правишь стиль — бампай pub_ver в templates/studio/home.html и templates/rehearsal/band.html, иначе service worker отдаст с телефона старую копию. */ /* ---------- Локальные псевдонимы токенов темы ---------- var() резолвится по элементу, а :root[data-theme=...] — тот же , поэтому при смене темы эти псевдонимы пересчитываются сами. */ :root { --fg: var(--text-primary, #e6e8eb); --muted: var(--text-secondary, #8b95a3); --dim: var(--text-muted, #6b7280); --line: var(--border-soft, #262d36); --line-strong: var(--border, #2e3742); --radius: var(--radius-xl, 12px); --radius-lg: 18px; --pill: var(--radius-pill, 999px); /* Ширина колонки страницы. Было 1080px — на широком мониторе витрина занимала чуть больше половины экрана, поля по бокам смотрелись пустыми. 1280px = ровно ширина шапки (.header-inner ниже), поэтому края контента и меню теперь совпадают по вертикали, а не «ступенькой». Дальше расширять смысла мало: сплошной текст ограничен не этим, а читаемой длиной строки (.prose max-width в ch). */ --page: 1280px; --gap: clamp(56px, 9vw, 104px); /* Две гарнитуры с разными ролями: --pub-font — интерфейс: навигация, кнопки, поля, подписи, служебные плашки. Здесь важна компактность и чёткость мелкого кегля. --read-font — содержание: заголовки, тексты, отзывы, ответы на вопросы. Антиква с засечками читается длинными кусками мягче и придаёт витрине характер, которого у гротеска нет. Смешивать роли нельзя: засечки в мелких подписях и кнопках выглядят неряшливо, поэтому Lora применяется точечно, а не на body. */ --pub-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --read-font: 'Lora', 'Georgia', 'Times New Roman', serif; } /* Псевдонимы ПОВЕРХНОСТЕЙ объявлены на body, а не на :root, намеренно: единую прозрачность telegram-theme.css подмешивает в токены тоже на body, и на :root сюда попали бы ещё сплошные цвета — витрина осталась бы без прозрачности, в отличие от кабинета. Текстовые и линейные псевдонимы выше остаются на :root: они прозрачности не касаются. */ body { --surface: var(--bg-card, #1c2128); --surface-2: var(--bg-hover, #303843); --field: var(--bg-input, #262d36); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { color: var(--fg); font-family: var(--pub-font); /* 17px, а не 16: витрину читают с телефона в руках и с ноутбука на диване, это не интерфейс с плотными таблицами. Ниже 17 текст на тёмном фоне заметно тяжелее читается. */ font-size: 17px; line-height: 1.65; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Пропорциональные цифры в тексте, табличные включаем точечно (даты, цены). */ font-feature-settings: 'kern' 1, 'liga' 1; } /* Мягкая подсветка сверху — страница перестаёт быть плоской простынёй. Цвет берём из акцента темы, поэтому свечение перекрашивается вместе с ней. Именно ::after, а не фон body: telegram-theme.css держит на body `background: transparent !important` (сплошная заливка перекрыла бы слой узора), и любой фон здесь молча пропал бы. Слой узора — body::before, мы рисуем поверх него и всё равно позади контента. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(900px 520px at 12% -8%, var(--accent-soft, rgba(59,130,246,0.16)), transparent 62%), radial-gradient(760px 460px at 92% 2%, var(--accent-soft, rgba(59,130,246,0.16)), transparent 64%); } /* Поверх фото-фона свечение выключаем: оно подсвечивает верхние углы, а скрим фото-фона рассчитан на то, что сверху ничего не добавляет света. */ html[data-bg="veru"] body::after, html[data-bg="custom"] body::after { background-image: none; } a { color: var(--accent, #3b82f6); text-decoration: none; } a:hover { color: var(--accent-hover, #2563eb); } img { max-width: 100%; } .page { max-width: var(--page); margin: 0 auto; padding: 0 20px; } /* ---------- Типографика ---------- Заголовки — антиквой: она задаёт тон странице. Вес 700 (у Lora это верх диапазона), а не 800 — у антиквы жир быстро превращается в кляксу, тогда как у гротеска 800 читается нормально. По той же причине разрядка почти не отрицательная: засечкам нужен воздух, иначе они слипаются. */ h1, h2, h3 { font-family: var(--read-font); line-height: 1.16; letter-spacing: -0.015em; color: var(--fg); font-weight: 700; } .display { font-family: var(--read-font); font-size: clamp(38px, 7vw, 78px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; /* Оптический трюк: у крупного кегля пробелы между словами кажутся шире. Чуть отрицательный word-spacing собирает заголовок в единый блок. */ word-spacing: -0.02em; } .display .accent { /* Цветной фолбэк идёт первым: если color-mix не поддержан, текст просто акцентного цвета, а не прозрачный. */ color: var(--accent, #3b82f6); background: linear-gradient(100deg, var(--accent, #3b82f6), color-mix(in srgb, var(--accent, #3b82f6) 55%, #ffffff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lede { font-family: var(--read-font); font-size: clamp(17px, 2.2vw, 22px); color: var(--muted); line-height: 1.55; max-width: 40ch; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #3b82f6); } /* ---------- Основной текст ---------- Главное здесь — max-width в ch. Строка длиной во всю колонку (1080px ≈ 130 знаков) физически плохо читается: глаз теряет начало следующей строки. 66ch держит строку в районе 70 знаков — это читаемый оптимум. pre-wrap больше не нужен: макрос studio/_prose.html режет текст на

, поэтому переносы задаёт вёрстка, а не пробелы в поле ввода. */ .prose { font-family: var(--read-font); /* 72ch, а не 66ch: после расширения --page до 1280px правая колонка .section-split даёт под текст ~730px, и на 66ch (~630px) он не добирал ширину — рядом оставалась пустая полоса. 72 знака всё ещё внутри читаемого диапазона (60–80), глаз не теряет начало строки. */ max-width: 72ch; font-size: 18px; /* Антикве нужен чуть больший интерлиньяж, чем гротеску: засечки визуально уплотняют строку. */ line-height: 1.78; /* Не чистый --muted: приглушённый серый годится для подписей, но длинный текст им читать утомительно. Смешиваем с основным — мягче заголовков, но контраста хватает для сплошного чтения. Первой строкой обычный цвет: браузеры без color-mix (Chrome < 111) вторую строку отбросят и покажут просто основной текст — читаемо. */ color: var(--fg); color: color-mix(in srgb, var(--text-secondary, #8b95a3) 45%, var(--fg)); /* Переносы длинных слов и адресов, чтобы ничего не распирало колонку. */ overflow-wrap: break-word; /* Выключка по формату (по обеим сторонам) — по просьбе владельца. hyphens ОБЯЗАТЕЛЕН вместе с justify: без переносов браузер растягивает пробелы, и в русском тексте с длинными словами появляются «дыры» и вертикальные реки. С переносами (работают по lang="ru" на ) межсловные пробелы остаются ровными. -webkit- нужен для Safari и всех браузеров на iOS. */ text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* Узкий экран — обратно по левому краю: на ~40 знаках в строке выключка по формату даёт слишком рваные пробелы даже с переносами. */ @media (max-width: 575.98px) { .prose { text-align: left; } } .prose p + p { margin-top: 1.05em; } /* Врезка: первый абзац крупнее и контрастнее — секция получает точку входа вместо ровной серой стены. */ .prose.has-lead > p:first-child { font-size: 21px; line-height: 1.55; color: var(--fg); letter-spacing: -0.011em; } @media (max-width: 560px) { .prose { font-size: 17px; } .prose.has-lead > p:first-child { font-size: 19px; } } .hint { color: var(--muted); font-size: 14px; line-height: 1.5; } /* ---------- Шапка ---------- */ .site-header { position: sticky; top: 0; z-index: 40; /* Прозрачность общая с остальными поверхностями (--surface-alpha), а не своя: раньше шапка была полупрозрачной только на широких экранах, и на телефоне бросалось в глаза, что она сплошная, а карточки нет. */ background: color-mix(in srgb, var(--bg-app, #14171c) calc(var(--surface-alpha, 0.7) * 100%), transparent); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .site-header.is-stuck { border-bottom-color: var(--line); } /* Размытие — только на широких экранах: на слабых телефонах backdrop-filter у липкой шапки заметно роняет скролл (уже наступали на это в календаре). Сама прозрачность при этом одинаковая везде. */ @media (min-width: 900px) { .site-header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } .header-inner { /* relative — точка отсчёта для выпадающего меню на телефоне. */ position: relative; display: flex; align-items: center; justify-content: space-between; /* Заметный зазор между названием и меню: раньше их разделяли 12px, и на главной пункты подходили к названию вплотную. */ gap: clamp(16px, 4vw, 48px); padding: 12px 20px; /* 1280px — минимум, при котором помещаются все пункты меню главной: в 1080px флексбокс отбирал ширину у названия студии, а у него обрезка многоточием, и название «съедалось». Раньше шапка была шире колонки страницы; теперь --page тоже 1280px, и края шапки с контентом совпадают. Значение держим общим с --page: если будешь менять одно — меняй и второе, иначе вернётся «ступенька». */ max-width: var(--page); margin: 0 auto; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--fg); white-space: nowrap; /* Название НЕ сжимается: именно из-за сжатия его обрезало многоточием, когда пунктов меню становилось много. Теперь ширину уступает меню — оно при нехватке места переносится или уходит под кнопку (см. медиазапрос ниже), а название остаётся целым. */ flex: 0 0 auto; /* min-width: 0 + ellipsis оставлены как страховка на очень узких экранах: без них длинное название распирало бы шапку и кнопка меню уехала за край. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } .brand:hover { color: var(--fg); } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent, #3b82f6); color: #fff; font-size: 17px; flex: 0 0 auto; } /* min-width: 0 — теперь ширину при нехватке места уступает МЕНЮ, а не название студии. justify-content: flex-end прижимает пункты к правому краю, чтобы зазор после названия оставался, даже когда пунктов мало. */ .nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; gap: 4px; } .nav a { color: var(--muted); font-size: 14.5px; font-weight: 600; padding: 9px 14px; border-radius: var(--pill); white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .nav a:hover { color: var(--fg); background: var(--surface); } /* Перекрёстная ссылка (студия ↔ группа) — не залитая кнопка, а пункт меню с лёгкой подложкой: заметна, но не спорит с «Записаться» и не разрастается. */ .nav a.is-cross { color: var(--accent, #3b82f6); background: var(--accent-soft, rgba(59,130,246,0.16)); font-size: 13.5px; padding: 7px 12px; } .nav a.is-cross:hover { color: var(--accent-hover, #2563eb); background: var(--accent-soft, rgba(59,130,246,0.16)); } .nav a.is-cross i { font-size: 12.5px; } .nav a.is-edit { color: var(--warning, #f59e0b); background: var(--warning-soft, rgba(245,158,11,0.16)); } .nav a.is-edit:hover { color: var(--fg); background: var(--warning-soft, rgba(245,158,11,0.16)); } /* Кнопка меню — на телефоне и на узких десктопах (см. порог 1200px ниже). */ .nav-toggle { display: none; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; color: var(--fg); font-size: 21px; cursor: pointer; padding: 0; } .nav-toggle:hover { border-color: var(--accent, #3b82f6); } /* ---------- Шапка, когда меню не помещается в строку ---------- Раньше ссылки просто переносились и шапка разрасталась в три ряда, съедая пол-экрана на липкой позиции. Теперь они убираются в выпадающее меню, а в самой шапке остаются только логотип и кнопка. Порог 1200px, а не 760px: на главной пунктов меню много (разделы + ссылка на кавер-группу + вход), и в строку они перестают помещаться задолго до телефонной ширины. Именно этот случай и «съедал» название студии на ноутбуке. Ниже порога ни один пункт не теряется — все они внутри выпадающего меню. */ @media (max-width: 1200px) { .nav-toggle { display: grid; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px 14px; background: var(--bg-app, #14171c); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.5)); } .nav.is-open { display: flex; } /* В выпадающем меню места хватает — показываем и второстепенные пункты. */ .nav a.opt-hide { display: block; } .nav a { font-size: 16px; padding: 13px 15px; border-radius: 10px; } .nav a.is-cross, .nav a.is-edit { text-align: center; } /* В выпадающем меню пункт снова наравне с соседями — там тесноты нет. */ .nav a.is-cross { font-size: 16px; padding: 13px 15px; } .nav a.is-cross i { font-size: 15px; } } /* Телефонная типографика шапки — отдельно от переезда меню под кнопку выше: уменьшать название и отступы нужно именно на телефоне, а не уже на ноутбуке. */ @media (max-width: 760px) { .header-inner { padding: 10px 16px; } .brand { font-size: 15.5px; } .brand-mark { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; } } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--pill); font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent, #3b82f6); color: #fff; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.45)); } .btn-primary:hover { background: var(--accent-hover, #2563eb); color: #fff; } .btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--fg); } .btn-danger { background: var(--danger-soft, rgba(239,68,68,0.16)); color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); } .btn-danger:hover { background: var(--danger, #ef4444); color: #fff; } .btn-sm { padding: 9px 16px; font-size: 13.5px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; } /* На узком экране кнопки в один столбец во всю ширину: две «половинки» рядом ужимаются до нечитаемых, а главное действие должно быть крупной мишенью. */ @media (max-width: 560px) { .cta-row { width: 100%; } .cta-row .btn { flex: 1 1 100%; } .btn { white-space: normal; padding: 14px 20px; } } /* ---------- Служебные плашки ---------- */ .flash { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius); font-size: 15px; border: 1px solid transparent; } .flash.success { background: var(--success-soft, rgba(16,185,129,0.16)); border-color: var(--success, #10b981); color: var(--success, #10b981); } .flash.warning { background: var(--warning-soft, rgba(245,158,11,0.16)); border-color: var(--warning, #f59e0b); color: var(--warning, #f59e0b); } .draft { background: var(--warning-soft, rgba(245,158,11,0.16)); border: 1px solid var(--warning, #f59e0b); color: var(--warning, #f59e0b); border-radius: var(--radius); padding: 13px 18px; font-size: 14.5px; } .stack-top { display: grid; gap: 10px; padding-top: 20px; } /* ---------- Герой ---------- */ .hero { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 6vw, 64px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 56px); align-items: center; } /* 899.98: выше в этом же файле есть @media (min-width: 900px) для размытия липкой шапки. На ровно 900px срабатывали оба правила разом, и результат зависел от их порядка в файле. */ @media (max-width: 899.98px) { .hero-grid { grid-template-columns: 1fr; } } .hero-copy { display: grid; gap: 22px; justify-items: start; } .hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.5)); border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--surface); } .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Без фото герой не должен зиять пустотой — рисуем «эквалайзер». */ .hero-media.is-empty { display: grid; place-items: center; } .bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; } .bars i { display: block; width: 10px; border-radius: 6px; background: var(--accent, #3b82f6); transform-origin: bottom; animation: bar 1.5s ease-in-out infinite; } .bars i:nth-child(1) { height: 36%; animation-delay: -0.1s; } .bars i:nth-child(2) { height: 72%; animation-delay: -0.5s; } .bars i:nth-child(3) { height: 50%; animation-delay: -0.9s; } .bars i:nth-child(4) { height: 92%; animation-delay: -0.3s; } .bars i:nth-child(5) { height: 60%; animation-delay: -0.7s; } @keyframes bar { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } } .badges { display: flex; flex-wrap: wrap; gap: 8px; } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); font-size: 14px; color: var(--fg); } .badge i { color: var(--accent, #3b82f6); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(28px, 5vw, 44px); } .stat { background: var(--surface); padding: 20px 22px; } .stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; } .stat span { color: var(--muted); font-size: 13.5px; } /* ---------- Секции ---------- */ .section { padding-top: var(--gap); } .section-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 720px; } .section-head h2 { font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -0.03em; } .section-head p { font-family: var(--read-font); color: var(--muted); font-size: 17.5px; line-height: 1.6; max-width: 56ch; } /* Полоска-акцент под надзаголовком: дешёвый способ дать секции «начало». Раньше все 12 секций стартовали одинаково и сливались в один поток. */ .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; flex: 0 0 auto; } /* ---------- Редакционная раскладка для текстовых секций ---------- Заголовок слева (липкий на десктопе), текст справа узкой колонкой. Так устроены современные лендинги и документация: глаз всегда видит, о чём раздел, а строка остаётся короткой. На узком экране всё складывается в стопку и ведёт себя как раньше. */ .section-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(24px, 5vw, 64px); align-items: start; } .section-split > .section-head { margin-bottom: 0; position: sticky; top: 92px; } @media (max-width: 860px) { .section-split { grid-template-columns: 1fr; } .section-split > .section-head { position: static; margin-bottom: 22px; } } /* ---------- Полоса-подложка на всю ширину экрана ---------- Чередование фона разбивает «простыню» на главы. box-shadow + clip-path — способ вылезти за пределы .page без обёрток и без горизонтального скролла (clip-path обрезает тень по вертикали, а overflow-x: hidden на body страхует). */ .section.band { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); padding-top: var(--gap); padding-bottom: var(--gap); /* Полоса сама даёт отбивку своим padding'ом — большой внешний отступ сверху оторвал бы её от предыдущей секции лишней дырой. */ margin-top: calc(var(--gap) * 0.35); } /* У полосы свой фон, поэтому карточки внутри неё должны быть на тон иначе — иначе они растворяются в подложке. */ .section.band .card, .section.band .step, .section.band .gig, .section.band .form-card { background: var(--bg-app, #14171c); } /* Появление при скролле: без него длинная страница ощущается мёртвой. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Карточки ---------- */ .grid { display: grid; gap: 14px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform 0.18s ease, border-color 0.18s ease; } .card-hover:hover { transform: translateY(-3px); border-color: var(--accent, #3b82f6); } .card-lg { padding: clamp(22px, 3.4vw, 34px); } .feature { display: grid; gap: 12px; justify-items: start; } .feature .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft, rgba(59,130,246,0.16)); color: var(--accent, #3b82f6); font-size: 19px; } .feature .t { font-weight: 700; font-size: 16.5px; } .price { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .price .what { font-weight: 600; font-size: 16px; } .price .much { font-weight: 800; font-size: 19px; color: var(--accent, #3b82f6); white-space: nowrap; letter-spacing: -0.02em; } .steps { counter-reset: step; display: grid; gap: 12px; } .step { counter-increment: step; display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .step::before { content: counter(step); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent, #3b82f6); color: #fff; font-weight: 800; font-size: 18px; } .faq { display: grid; gap: 10px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; } .faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary i { color: var(--muted); font-size: 14px; transition: transform 0.2s ease; flex: 0 0 auto; } .faq details[open] summary i { transform: rotate(180deg); } .faq .answer { font-family: var(--read-font); font-size: 17px; color: var(--muted); margin-top: 12px; line-height: 1.7; max-width: 66ch; white-space: pre-wrap; } .gigs { display: grid; gap: 10px; } .gig { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; color: var(--fg); transition: transform 0.15s ease, border-color 0.15s ease; } .gig:hover { color: var(--fg); transform: translateX(3px); border-color: var(--accent, #3b82f6); } .gig .d { font-weight: 800; color: var(--accent, #3b82f6); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 16px; } .gig .n { flex: 1 1 auto; font-weight: 600; } .gig .v { color: var(--muted); font-size: 14px; } .member { text-align: center; } .member .ava, .member .ava-stub { width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 13px; display: block; object-fit: cover; background: var(--field); } .member .ava-stub { display: grid; place-items: center; color: var(--muted); font-size: 30px; } .member .who { font-weight: 700; } .member .what { color: var(--muted); font-size: 13.5px; margin-top: 4px; } .song { padding: 14px 17px; } .song .t { font-weight: 600; } .song .a { color: var(--muted); font-size: 13.5px; margin-top: 3px; } .own-tag { background: var(--accent-soft, rgba(59,130,246,0.16)); color: var(--accent, #3b82f6); padding: 2px 8px; border-radius: var(--pill); font-size: 10.5px; font-weight: 800; margin-left: 7px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.06em; } .videos { display: grid; gap: 16px; } .video-frame { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-link { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } /* ---------- Галерея ---------- */ .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .shot { position: relative; display: block; border: 1px solid var(--line); padding: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; transition: transform 0.18s ease, border-color 0.18s ease; } .shot:hover { transform: translateY(-3px); border-color: var(--accent, #3b82f6); } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .shot .cap { position: absolute; inset: auto 0 0 0; padding: 22px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: #fff; font-size: 13px; text-align: left; line-height: 1.35; } /* Лайтбокс намеренно тёмный в любой теме — фото читаются на нейтральном фоне. */ .lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 13, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 84vh; border-radius: var(--radius); object-fit: contain; } .lightbox .cap { color: #cbd5e1; font-size: 15px; text-align: center; max-width: 720px; } .lightbox .close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 8px 14px; cursor: pointer; } /* ---------- Контакты и перекрёстная карточка ---------- */ .contacts { display: flex; flex-wrap: wrap; gap: 10px; } .contact { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 12px 20px; color: var(--fg); font-size: 15.5px; transition: border-color 0.15s ease; } .contact:hover { color: var(--fg); border-color: var(--accent, #3b82f6); } .contact i { color: var(--accent, #3b82f6); } .cross { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--accent, #3b82f6); border-radius: var(--radius-lg); padding: clamp(22px, 3.4vw, 32px); color: var(--fg); transition: transform 0.18s ease; } .cross:hover { color: var(--fg); transform: translateY(-3px); } .cross .t { font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; } .cross .s { color: var(--muted); } /* ---------- Формы ---------- */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.6vw, 34px); display: grid; gap: 16px; } .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; font-weight: 600; } input, textarea, select { width: 100%; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 13px 15px; color: var(--fg); font-family: inherit; font-size: 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 3px var(--accent-soft, rgba(59,130,246,0.16)); } textarea { min-height: 110px; resize: vertical; line-height: 1.6; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; align-items: center; gap: 11px; font-size: 15px; } .check input { width: auto; } /* ---------- Занятость группы ---------- */ .busy-list { display: flex; flex-wrap: wrap; gap: 8px; } .busy-day { display: inline-flex; align-items: center; gap: 6px; background: var(--field); border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 14px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; } .busy-day i { color: var(--danger, #ef4444); font-size: 12px; } .busy-warn { color: var(--warning, #f59e0b); margin-top: 8px; } .busy-warn[hidden] { display: none; } /* ---------- Посадочные страницы направлений ---------- */ .crumbs { padding-top: 18px; color: var(--muted); font-size: 13.5px; display: flex; gap: 8px; flex-wrap: wrap; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent, #3b82f6); } /* «Подробнее» появляется только на карточке-ссылке — у обычной карточки направления его нет, и подсказывать переход было бы враньём. */ .feature .more { color: var(--accent, #3b82f6); font-size: 13.5px; font-weight: 600; margin-top: 4px; } .feature .more i { font-size: 12px; transition: transform 0.15s ease; } a.feature:hover .more i { transform: translateX(3px); } /* ---------- Педагоги ---------- Отдельно от .member (состав группы): здесь портрет крупнее, есть опыт, чипы направлений и биография, а карточка выравнивается по левому краю. */ .teacher { display: flex; flex-direction: column; gap: 9px; } .teacher .ava, .teacher .ava-stub { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); object-fit: cover; /* Кадрируем от верха, а не от центра: на портретных снимках центр кадра — это грудь, и при object-fit: cover голова уходила за край. */ object-position: 50% 18%; background: var(--field); margin-bottom: 4px; } .teacher .ava-stub { display: grid; place-items: center; color: var(--dim); font-size: 40px; } .teacher .who { font-weight: 800; font-size: 17px; } .teacher .what { color: var(--accent, #3b82f6); font-size: 14px; font-weight: 600; } .teacher .exp { color: var(--muted); font-size: 13.5px; } .teacher .bio { font-family: var(--read-font); color: var(--muted); font-size: 15px; line-height: 1.65; white-space: pre-wrap; } /* На телефоне карточка идёт в одну колонку. Раньше здесь стояло 16/10, и вертикальный портрет резался сверху и снизу — люди оставались без головы. Держим книжный кадр, а от «полутора прокруток» спасаем не пропорцией, а потолком высоты: снимок остаётся портретным и целиком помещается в экран. */ @media (max-width: 560px) { .teacher .ava, .teacher .ava-stub { aspect-ratio: 3 / 4; max-height: 62vh; } } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--field); border: 1px solid var(--line); border-radius: var(--pill); padding: 4px 11px; font-size: 12.5px; color: var(--muted); } /* ---------- Отзывы ---------- */ .rating-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 22px; } .rating-line .avg { font-size: clamp(30px, 4.6vw, 42px); font-weight: 800; line-height: 1; } .rating-line .of { color: var(--muted); font-size: 15px; } /* Звёзды рисуем текстом (★/☆): своей картинки не требуется, а цвет берётся из акцента темы — значит перекрашивается вместе с палитрой. */ .stars { color: var(--accent, #3b82f6); letter-spacing: 0.14em; white-space: nowrap; } .rating-line .stars { font-size: 21px; } .reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .review { display: flex; flex-direction: column; gap: 11px; padding: 20px 22px; } .review .stars { font-size: 15px; } /* Отзыв — прямая речь человека: антиква здесь и уместнее, и теплее. */ .review .body { font-family: var(--read-font); font-size: 17px; color: var(--fg); line-height: 1.7; white-space: pre-wrap; } .review .who { font-weight: 700; font-size: 15px; } .review .meta { color: var(--muted); font-size: 13px; margin-top: 2px; } /* Выбор оценки в форме: радиокнопки скрыты, кликается сама звезда. Порядок в разметке обратный (5→1), поэтому подсветку «до наведённой» даёт соседний селектор ~ — без него пришлось бы городить скрипт. */ .rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; } .rate input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rate label { margin: 0; cursor: pointer; font-size: 27px; line-height: 1; color: var(--dim); transition: color 0.12s ease; } .rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: var(--accent, #3b82f6); } .rate input:focus-visible + label { outline: 2px solid var(--accent, #3b82f6); outline-offset: 3px; } /* ---------- Панель администратора ---------- */ .admin { margin-top: var(--gap); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 18px 22px; } .admin summary { cursor: pointer; color: var(--muted); font-size: 15px; font-weight: 600; } .admin form { display: grid; gap: 16px; margin-top: 20px; } .admin h3 { font-size: 17px; margin-top: 8px; } /* ---------- Статус связки «направление ↔ посадочная страница» ---------- Карточку в блоке «Чему учим» рисует список направлений, а ссылкой она становится только при ОПУБЛИКОВАННОЙ странице с тем же названием. Раньше это нигде не показывалось: владелец видел некликабельную карточку и не мог понять причину. Здесь — построчный разбор, что с каждым направлением. */ .dir-status { margin-top: 10px; display: grid; gap: 6px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .dir-status-head { color: var(--muted); font-size: 13px; line-height: 1.5; margin-bottom: 4px; } .dir-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; } .dir-status-name { font-weight: 600; min-width: 140px; } .dir-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12px; } .dir-badge.ok { background: rgba(16,185,129,0.16); color: var(--success, #10b981); } .dir-badge.warn { background: rgba(245,158,11,0.16); color: var(--warning, #f59e0b); } .dir-badge.off { background: rgba(148,163,184,0.16); color: var(--muted); } .dir-link { color: var(--accent, #3b82f6); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; } .ph-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .ph-card { background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 11px; display: grid; gap: 9px; margin: 0; } .ph-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; } .ph-card input { font-size: 14px; padding: 9px 11px; } .ph-row { display: flex; gap: 8px; } .ph-row .btn { flex: 1 1 auto; padding: 9px 10px; font-size: 13px; } .ph-meta { color: var(--dim); font-size: 12px; } /* ===================================================================== БЕГУЩАЯ СТРОКА --------------------------------------------------------------------- Направления студии / репертуар группы одной живой лентой. Даёт витрине характер и заодно решает утилитарную задачу: 40 песен в виде 40 одинаковых серых карточек читать невозможно, а лентой они пролистываются глазом за секунду. Лента дублируется в разметке дважды и едет на -50%: в момент стыка вторая копия стоит ровно там, где была первая, поэтому шов не виден. ===================================================================== */ .marquee { position: relative; overflow: hidden; padding: 6px 0; /* Края растворяются, а не обрубаются. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; gap: 14px; animation: marquee 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { /* Без анимации лента превращается в обычный горизонтальный список. */ .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } .marquee-track { animation: none; } } .marquee-item { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); /* Названия песен и направлений — содержание, а не интерфейс. */ font-family: var(--read-font); font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--fg); } .marquee-item i { color: var(--accent, #3b82f6); font-size: 13px; } .marquee-item .by { color: var(--muted); font-weight: 500; } /* Каждый четвёртый — акцентный: лента перестаёт быть однородной кашей. */ .marquee-item:nth-child(4n) { border-color: var(--accent, #3b82f6); } .marquee-item:nth-child(4n) i { color: var(--accent, #3b82f6); } /* ===================================================================== РЕПЕРТУАР СПИСКОМ --------------------------------------------------------------------- Вместо сетки карточек — плотный список в две колонки с волосяными линейками. Список сканируется глазом сверху вниз; сетка одинаковых плашек — нет. Плюс на той же высоте помещается вдвое больше песен. ===================================================================== */ .songlist { columns: 2; column-gap: clamp(24px, 5vw, 56px); border-top: 1px solid var(--line); } @media (max-width: 700px) { .songlist { columns: 1; } } .songlist .row { break-inside: avoid; display: flex; align-items: baseline; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); } .songlist .n { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 2.2ch; flex: 0 0 auto; } .songlist .t { font-family: var(--read-font); font-weight: 600; font-size: 17px; } .songlist .a { color: var(--muted); font-size: 14px; margin-left: auto; text-align: right; } /* ===================================================================== АФИША ЛЕНТОЙ ВРЕМЕНИ Дата — крупным табличным начертанием, слева вертикальная нить: это читается как расписание, а не как список ссылок. ===================================================================== */ .gigs.timeline { position: relative; padding-left: 26px; gap: 0; } .gigs.timeline::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent, #3b82f6), transparent); } .gigs.timeline .gig { position: relative; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 4px; } .gigs.timeline .gig::before { content: ""; position: absolute; left: -26px; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #3b82f6); box-shadow: 0 0 0 4px var(--bg-app, #14171c); } .gigs.timeline .gig:hover { transform: translateX(4px); border-color: var(--line); } .gigs.timeline .gig .d { font-size: 19px; letter-spacing: -0.02em; } /* ===================================================================== Полировка карточек: вместо плоской заливки — едва заметный градиент и светлая волосяная кромка сверху. На тёмных темах это даёт объём, на светлых почти не виден. Цвета по-прежнему только из токенов. ===================================================================== */ .card { background-image: linear-gradient(180deg, color-mix(in srgb, var(--fg) 3%, transparent), transparent 60%); } .card-hover:hover { box-shadow: 0 12px 32px -12px var(--accent-soft, rgba(59,130,246,0.16)); } /* Ступенчатое появление секции: элементы въезжают не разом, а с задержкой — страница оживает при прокрутке. Задержка мелкая, чтобы не тормозить чтение. */ .reveal.is-in > * > .card:nth-child(1), .reveal.is-in .grid > :nth-child(1) { animation: rise 0.5s ease backwards 0.02s; } .reveal.is-in .grid > :nth-child(2) { animation: rise 0.5s ease backwards 0.07s; } .reveal.is-in .grid > :nth-child(3) { animation: rise 0.5s ease backwards 0.12s; } .reveal.is-in .grid > :nth-child(4) { animation: rise 0.5s ease backwards 0.17s; } .reveal.is-in .grid > :nth-child(n+5) { animation: rise 0.5s ease backwards 0.2s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } /* ---------- Подвал ---------- */ .site-footer { margin-top: var(--gap); border-top: 1px solid var(--line); padding: 36px 0 60px; color: var(--muted); font-size: 14.5px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--fg); }