/* Страница ролика (ролик.html, прежняя главная; главная index.html живёт в v2.css): ролик сверху, под ним оглавление, восемь разделов подряд, заявка и подвал.
Подключается после style.css и ролик.css. Цвета, шрифты, кнопка-пилюля, форма, подвал — из style.css;
здесь — только то, чего у главной нет больше нигде: шапка, оглавление, разделы, заявка-раздел.
Классы shapka / oglavlenie / razdel / zov — свои, чтобы правила мира (.polosa, .sloy, .list) не задевали
главную и наоборот (тз-главная-ролик.md, п. 3). Правила вида — штаб/проект/стиль.md, раздел «Главная». */
/* ---------- Переменные главной ---------- */
:root {
--шапка: 56px; /* высота шапки: 56 на телефоне, 72 на компьютере (как полоса мира) */
--низ: 0px; /* у главной нет плашки телефона: подвал (style.css) не держит под неё места */
--колонка: 680px; /* ширина текста раздела: 60–75 знаков в строке */
--воздух: clamp(64px, 40px + 6vw, 128px); /* отступ раздела сверху и снизу: 64 → 128 */
}
@media (min-width: 900px) {
:root { --шапка: 72px; }
}
html { scroll-padding-top: var(--шапка); } /* якорь не уходит под шапку */
/* плавная прокрутка к якорю — только если человек не просил меньше движения, и только по нажатию:
у нажатой ссылки фокус, у страницы, открытой по ссылке с #, фокуса нет — она сразу встаёт на место
(иначе на длинной странице с догружающимися фото «доезд» до заявки тянулся больше 10 секунд) */
@media (prefers-reduced-motion: no-preference) {
html:focus-within { scroll-behavior: smooth; }
}
/* ---------- Шапка: знак и «Вамос» слева, «Подробно» и пилюля справа ----------
Прилипает к верху. Над роликом — прозрачная, с мягкой тенью неба под знаком (как полоса мира).
Ролик ушёл из вида (ролик.js ставит html.rolik-proshel) — сплошной глубокий зелёный: под шапкой
теперь светлые разделы, и знак цвета кости на них пропал бы. Без js — сплошная всегда */
.shapka {
position: fixed; inset: 0 0 auto 0; z-index: 60;
height: var(--шапка);
display: flex; align-items: center; gap: 8px;
padding: 0 var(--поле);
color: var(--фон);
background-color: rgba(20, 38, 28, 0);
}
.shapka::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--шапка) + 56px); z-index: -1;
background: linear-gradient(to bottom, rgba(20, 38, 28, 0.5), rgba(20, 38, 28, 0));
pointer-events: none;
}
html.rolik-proshel .shapka,
html:not(.js) .shapka {
background-color: var(--зелёный-глубокий);
box-shadow: 0 1px 0 rgba(246, 241, 231, 0.12);
}
html.rolik-proshel .shapka::before,
html:not(.js) .shapka::before { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.shapka { transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.shapka::before { transition: opacity 0.3s ease; }
}
.shapka .znak-ssylka { margin-right: auto; }
.shapka .knopka { min-height: 44px; padding: 0 20px; font-size: 1rem; }
/* «Подробно» — только на компьютере; на телефоне место у пилюли, к оглавлению ведёт зов вниз */
.shapka a:not(.knopka):not(.znak-ssylka) {
display: none;
align-items: center; min-height: 44px; padding: 0 18px;
border-radius: 999px;
background: rgba(14, 26, 20, 0.6); /* своя подложка: над светлым небом кость читается (не меньше 5.5) */
color: var(--фон); text-decoration: none;
font: 600 1rem/1 var(--шрифт-основной);
}
.shapka a:not(.knopka):not(.znak-ssylka):hover { text-decoration: underline; text-underline-offset: 6px; }
html.rolik-proshel .shapka a:not(.knopka):not(.znak-ssylka) { background: transparent; }
@media (min-width: 900px) {
.shapka a:not(.knopka):not(.znak-ssylka) { display: inline-flex; }
.shapka { gap: 12px; }
}
@media (max-width: 359px) {
.shapka .knopka { padding: 0 14px; }
.shapka .znak-ssylka__slovo { font-size: 1.25rem; }
}
/* ---------- Общая сетка разделов на компьютере ----------
Заголовок слева (прилипает, пока читаешь раздел), текст справа в колонке 680. Слева — 300, между ними
96: страница не растягивается строкой через весь экран, справа и слева остаётся воздух */
@media (min-width: 1100px) {
.oglavlenie,
.razdel {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, var(--колонка));
column-gap: clamp(48px, 6vw, 112px);
justify-content: center;
align-items: start;
}
.oglavlenie > *,
.razdel > * { grid-column: 2; min-width: 0; }
.oglavlenie > :is(h2, .oglavlenie__zagolovok):first-child,
.razdel > h2:first-of-type {
grid-column: 1; grid-row: 1 / span 60; /* стоит слева на всю высоту раздела; пустые ряды — нулевые */
position: sticky; top: calc(var(--шапка) + 32px);
}
}
/* ---------- Оглавление: заголовок и восемь пилюль ----------
Мост между тёмным роликом и светлыми разделами: фон — зелёный подвала, пилюли — контур кости.
Терракотовой тут нет: она только у «Получить программу» */
.oglavlenie {
padding: var(--воздух) var(--поле);
background: var(--зелёный); color: var(--фон);
scroll-margin-top: 0; /* сам блок встаёт под шапку — у него свой верхний воздух */
}
.oglavlenie h2,
.oglavlenie__zagolovok {
margin: 0 0 24px;
font-family: var(--шрифт-заголовков); font-weight: 600;
font-size: var(--размер-титра); line-height: 1.08; letter-spacing: -0.01em;
color: var(--фон);
}
.oglavlenie :is(ul, ol) {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 0; padding: 0; list-style: none;
}
.oglavlenie li { margin: 0; }
.oglavlenie a {
display: inline-flex; align-items: center;
min-height: 48px; padding: 0 20px;
border: 1.5px solid rgba(246, 241, 231, 0.6); border-radius: 999px;
color: var(--фон); text-decoration: none;
font: 600 1rem/1.2 var(--шрифт-основной);
white-space: nowrap;
}
.oglavlenie a:hover, .oglavlenie a:active { background: var(--фон); border-color: var(--фон); color: var(--текст); }
@media (prefers-reduced-motion: no-preference) {
.oglavlenie a { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
}
@media (min-width: 1100px) {
.oglavlenie h2, .oglavlenie__zagolovok { margin: 0; max-width: 8em; }
.oglavlenie :is(ul, ol) { gap: 12px; padding-top: 6px; }
.oglavlenie a { min-height: 52px; padding: 0 24px; font-size: 1.0625rem; }
}
/* ---------- Разделы: тексты слоёв мира подряд, на кости ----------
Тот же вид, что у слоя (style.css, «Слои подробностей»), но это обычные блоки страницы:
без «Закрыть», без прилипшей кнопки, без выезда */
.razdel {
padding: var(--воздух) var(--поле);
background: var(--фон); color: var(--текст);
font-size: var(--размер-основной); line-height: 1.6;
scroll-margin-top: 0; /* раздел встаёт ровно под шапку (отступ шапки — scroll-padding у html);
у раздела свой верхний воздух, полоска соседа сверху не видна */
}
.razdel + .razdel { border-top: 1px solid var(--линия); }
.razdel :focus-visible { outline-color: var(--текст); }
.razdel > * { max-width: var(--колонка); }
.razdel > h2:first-of-type,
.razdel .sloy__zagolovok,
.razdel__zagolovok {
margin: 0 0 24px;
font-size: var(--размер-титра); line-height: 1.08;
color: var(--текст);
}
.razdel h2:focus { outline: none; }
.razdel h3 { font-size: var(--размер-h3); line-height: 1.2; margin: 36px 0 12px; }
.razdel > h3:first-of-type { margin-top: 0; } /* сразу под заголовком раздела — без двойного воздуха */
.razdel p + p { margin-top: 10px; }
.razdel :is(ul, ol) { margin: 0; padding-left: 1.3em; }
.razdel li { padding-left: 4px; }
.razdel li + li { margin-top: 6px; }
.razdel li::marker { color: var(--текст-тихий); }
.razdel :is(ul, ol, div) + p { margin-top: 12px; }
.razdel strong { font-weight: 700; }
.razdel a:not(.knopka) { font-weight: 600; text-underline-offset: 4px; }
.razdel > .knopka { margin-top: 40px; }
@media (max-width: 599px) {
.razdel > .knopka { display: flex; width: 100%; } /* на телефоне — во всю ширину колонки, крупная цель */
}
@media (min-width: 1100px) {
.razdel > h2:first-of-type,
.razdel .sloy__zagolovok,
.razdel__zagolovok { margin: 0; }
.razdel > .knopka { justify-self: start; }
}
/* фото раздела (рисунок): во всю колонку, пропорции из width/height разметки — место держится до загрузки */
.razdel figure { margin: 0 0 32px; }
.razdel figure img {
display: block; width: 100%; height: auto; max-width: none;
aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--скругление-фото);
background: var(--поверхность); /* пока фото грузится — спокойная плашка, не дыра */
}
.razdel figcaption { margin-top: 8px; font-size: 1rem; line-height: 1.4; color: var(--текст-тихий); }
.razdel :is(h3, p) + figure { margin-top: 16px; }
@media (max-width: 899px) {
/* на телефоне фото выходит под самые края экрана — кадр крупнее, текст не теряет поля */
.razdel figure { margin-inline: calc(var(--поле) * -1); max-width: none; }
.razdel figure img { border-radius: 0; }
.razdel figcaption { padding-inline: var(--поле); }
}
/* карточки (тренеры, кому подойдёт, сезоны): прямые, на поверхности */
.razdel .sloy__kartochki,
.razdel .razdel__kartochki {
display: grid; gap: 12px;
margin: 24px 0; padding: 0; list-style: none;
}
.razdel :is(.sloy__kartochki, .razdel__kartochki) > li {
margin: 0; padding: 18px 20px;
background: var(--поверхность); border: 1px solid var(--линия);
}
.razdel :is(.sloy__kartochki, .razdel__kartochki) h3 { margin: 0 0 6px; font-size: 1.25rem; }
.razdel :is(.sloy__kartochki, .razdel__kartochki) p { color: var(--текст-тихий); }
.razdel :is(.sloy__kartochki, .razdel__kartochki) p + p { margin-top: 4px; }
@media (min-width: 700px) {
/* две карточки рядом (сезоны — тёплый и прохладный), три и больше — тоже по две */
.razdel :is(.sloy__kartochki, .razdel__kartochki) { grid-template-columns: 1fr 1fr; }
}
/* даты в «Даты и цена»: прошедшие прячет сайт.js, ближайшая — с чертой слева */
.razdel .daty {
list-style: none; padding: 0; margin: 12px 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px;
font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
}
.razdel .daty li { margin: 0; padding: 10px 0 10px 14px; border-top: 1px solid var(--линия); }
.razdel .daty .blizhayshiy { box-shadow: inset 3px 0 0 var(--текст); }
/* цена — главное число страницы: строки цены крупнее и шрифтом заголовков */
#cena [data-образец="цена"] > ul { list-style: none; padding: 0; }
#cena [data-образец="цена"] > ul > li {
padding: 0; margin: 0;
font-family: var(--шрифт-заголовков); font-weight: 600;
font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.25;
font-variant-numeric: lining-nums;
}
#cena [data-образец="цена"] > ul > li + li { margin-top: 4px; }
#cena [data-образец="цена"] > p { margin-top: 8px; color: var(--текст-тихий); }
/* вопросы: плюс справа, у открытого — минус */
.razdel details { border-bottom: 1px solid var(--линия); }
.razdel details:first-of-type { border-top: 1px solid var(--линия); }
.razdel summary {
position: relative; display: block; min-height: 44px;
padding: 18px 44px 18px 0;
font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none;
}
.razdel summary::-webkit-details-marker { display: none; }
.razdel summary::before, .razdel summary::after {
content: ""; position: absolute; right: 8px; top: 50%;
width: 16px; height: 2px; margin-top: -1px; background: var(--текст);
}
.razdel summary::after { transform: rotate(90deg); }
.razdel details[open] > summary::after { transform: none; }
.razdel summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.razdel details > p { padding: 0 0 18px; color: var(--текст-тихий); }
.razdel details + p { margin-top: 24px; }
/* кнопка «Закрыть» слоя на главной не нужна; если разметка её принесла — не показываем */
.razdel .sloy__zakryt { display: none; }
/* ---------- Заявка: последний раздел, на тёплом песочном фоне ----------
Отделена от разделов цветом, а не линией: здесь человек действует, а не читает. Форма — карточкой
на поверхности (style.css, «Форма заявки»). Тихий текст на этом фоне — 6.48 */
.razdel#zayavka {
background: var(--сезон-тёплый);
border-top: 0;
}
#zayavka .forma { margin-top: 28px; }
@media (min-width: 900px) {
#zayavka .forma { padding: 32px 36px 36px; }
}
/* ---------- Подвал: вид — style.css («Титры = подвал»). Здесь — ссылка на прогулку по сценам ---------- */
.titry { scroll-margin-top: var(--шапка); }
.titry #foto, .titry h2[id] { scroll-margin-top: calc(var(--шапка) + 16px); }
.titry a[href$="мир.html"],
.titry a[href*="%D0%BC%D0%B8%D1%80"] {
display: inline-flex; align-items: center; min-height: 44px;
font-weight: 600;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.titry a[href$="мир.html"]:hover { text-decoration-thickness: 2px; }
/* На компьютере края подвала — по краям разделов (300 + зазор + 680), а не по своей колонке 1120 из style.css:
иначе подвал на 27 точек шире всего, что над ним. Строка про данные формы — той же ширины, что строка
про фото (40em): обе мелкие пояснения, длинная строка во всю ширину читалась хуже */
@media (min-width: 1100px) {
.titry {
padding-inline: max(var(--поле), calc((100% - 300px - clamp(48px, 6vw, 112px) - var(--колонка)) / 2));
}
.titry > ul:first-of-type + p { padding-right: max(0px, calc(100% - 40em)); } /* линия сверху — во всю ширину, текст — 40em */
}
/* ---------- Ролик на главной: место под шапкой ---------- */
.rolik { scroll-margin-top: 0; } /* «Вамос» в шапке ведёт к самому верху, ролик — под шапкой */