/* ViRush 2026 — светлый блочный стиль. Страница белая, каждая секция — крупный скруглённый блок (R 40px). Гарнитура и палитра — по бренд-буку Visiology (Onest, #171717 / #FEE121). */ /* Шрифт Onest подключается общим файлом сайта — /css/fonts-onest.css (ссылка в страницы). Свои @font-face здесь не нужны. */ :root { /* палитра бренд-бука */ --ink: #171717; --muted: #6F7271; --muted-on-dark: #9A9C9B; --page: #FFFFFF; --block: #F2F3F3; /* основная заливка блока */ --block-soft: #F8F9F9; /* заливка карточки внутри светлого блока */ --surface: #FFFFFF; --line: #E8E9E9; --dark: #171717; --dark-card: #272727; --dark-line: #383838; --yellow: #FEE121; --yellow-hover: #E6CC1E; --page-width: 1240px; --radius-block: 40px; --radius-card: 24px; --radius-sm: 14px; --radius-btn: 8px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--page); font-family: 'Onest', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; letter-spacing: inherit; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* ===== ТИПОГРАФИКА ===== */ h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.03em; } h1 { font-size: clamp(44px, 6.6vw, 92px); line-height: 0.98; } h2 { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; } h3 { font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -0.02em; } h4 { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* ===== СЕТКА БЛОКОВ ===== */ .page-width { width: min(calc(100% - 64px), var(--page-width)); margin-inline: auto; } main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 20px 24px 32px; } /* .screen — большой блок; по умолчанию во всю ширину сетки */ .screen { grid-column: span 2; padding: 76px 0; border-radius: var(--radius-block); background: var(--block); } /* парные блоки-половинки (бенто-ряды) */ .expo, .partners, .venue, .media-partners { grid-column: span 1; } /* белые блоки получают тонкую обводку, чтобы читались на белой странице */ .audience, .expo, .media-partners { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } /* тёмные блоки */ .awards, .registration { background: var(--dark); color: #FFFFFF; } /* ===== КНОПКИ ===== */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 1px solid transparent; border-radius: var(--radius-btn); background: var(--yellow); color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .button:hover { background: var(--yellow-hover); } .button-small { min-height: 44px; padding: 0 22px; font-size: 15px; } .button-outline { background: transparent; border-color: var(--ink); color: var(--ink); } .button-outline:hover { background: rgba(23, 23, 23, 0.06); } /* ===== ШАПКА ===== */ .site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px max(24px, calc((100vw - var(--page-width)) / 2)); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); } /* логотип Visiology — тот же файл, что в шапке ru.visiology.su */ .wordmark, .footer-logo { display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .wordmark { justify-self: start; } .wordmark img { display: block; width: auto; height: 24px; } .footer-logo img { display: block; width: auto; height: 20px; } /* по бренд-буку ховер логотипа — прозрачностью, без перекраски */ .wordmark:hover, .footer-logo:hover { opacity: 0.75; } .site-nav { display: flex; gap: 6px; justify-content: center; } .site-nav a { padding: 8px 16px; border-radius: 999px; color: var(--muted); font-size: 15px; font-weight: 500; transition: background 0.2s ease, color 0.2s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); background: var(--block); } .site-header .button { justify-self: end; } /* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */ .section-heading { max-width: 900px; margin-bottom: 44px; } .section-heading-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 40px; max-width: none; } .section-intro { font-size: 19px; color: var(--muted); } .split-layout { display: grid; gap: 32px; } /* в узких блоках-половинках заголовку не нужен большой отбив */ .expo .section-heading, .partners .section-heading, .venue .section-heading, .media-partners .section-heading { margin-bottom: 20px; } .section-copy > p { margin-bottom: 18px; font-size: 19px; line-height: 1.45; } .section-copy > p:last-child { margin-bottom: 0; } .status-line, .section-copy .status-line { display: inline-block; margin-top: 8px; padding: 13px 28px; border-radius: 999px; background: var(--block); color: var(--muted); font-size: 15px; line-height: 1.35; } .expo .status-line, .media-partners .status-line { background: var(--block); } .partners .status-line, .venue .status-line, .history .status-line { background: var(--surface); } /* ===== ГЕРОЙ ===== */ .hero { padding-top: 84px; } .hero-main { padding-bottom: 72px; } .hero-main .eyebrow { display: block; margin-bottom: 26px; } .hero h1 { font-size: clamp(52px, 9vw, 132px); letter-spacing: -0.045em; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 48px; } .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .hero-facts div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 12px 22px; border-radius: var(--radius-sm); background: var(--surface); } .hero-facts dt { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; } .hero-facts dd { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* результаты дня — карточки внутри блока героя */ .outcomes h2 { max-width: 900px; margin-bottom: 32px; font-size: clamp(26px, 2.6vw, 38px); } .outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .outcome-grid li { display: flex; flex-direction: column; gap: 18px; min-height: 200px; padding: 28px; border-radius: var(--radius-card); background: var(--surface); } .outcome-grid span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: var(--yellow); font-size: 15px; font-weight: 600; letter-spacing: 0; } .outcome-grid strong { margin-top: auto; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } /* ===== ЦИТАТА (жёлтый блок) ===== */ .quote-section { background: var(--yellow); padding: 84px 0; } /* Блок цитаты складывается по содержимому, а не по брейкпоинтам: пока колонке текста хватает 420px, фото стоит справа; как только перестаёт хватать — фото переносится под цитату и центрируется. */ .quote-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; } .quote-layout blockquote { flex: 1 1 420px; margin: 0; } .quote-main { font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; } /* второй абзац цитаты: отбив меньше строки, чтобы абзацы читались как одна реплика, а не как два разных высказывания */ .quote-main + .quote-main { margin-top: 20px; } .quote-layout cite { display: block; margin-top: 28px; font-size: 17px; font-style: normal; font-weight: 600; } /* должность под именем: на жёлтом фоне серый --muted блёкнет, поэтому берём затемнение самого фона */ .quote-layout cite span { display: block; margin-top: 3px; font-size: 15px; font-weight: 500; color: rgba(23, 23, 23, 0.66); } .quote-photo { flex: 0 1 280px; /* когда фото переносится на свою строку, auto-поля его центрируют; в раскладке «в ряд» свободного места нет, поэтому они не работают */ margin: 0 auto; } .quote-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius-card); } /* ===== ДЛЯ КОГО ===== */ .audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .audience-card { padding: 36px; border-radius: var(--radius-card); background: var(--block-soft); } .card-index { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 22px; border-radius: 999px; background: var(--yellow); font-size: 15px; font-weight: 600; } .audience-card h3 { margin-bottom: 12px; } .audience-card > p:not(.card-index) { color: var(--muted); } .audience-card ul { display: grid; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); } .audience-card li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; } .audience-card li::before { content: ''; position: absolute; /* точка по центру первой строки: половина интерлиньяжа минус половина точки. Фиксированные 10px давали смещение вниз на 2px и «съезжали» тем заметнее, чем длиннее пункт. */ top: calc((1.5em - 8px) / 2); left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); } /* две строки формулы делят общую сетку: колонка плашки одна на обе, поэтому «Понять,» и «Разобраться,» начинаются с одного отступа */ .audience-formula { display: grid; grid-template-columns: max-content minmax(0, 1fr); row-gap: 14px; column-gap: 16px; margin-top: 16px; padding: 32px 36px; border-radius: var(--radius-card); background: var(--ink); color: #FFFFFF; } .audience-formula p { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; /* плашка центрируется по высоте строки, а не сидит на её базовой линии */ align-items: center; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25; letter-spacing: -0.02em; } .audience-formula .formula-when { justify-self: stretch; text-align: center; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--muted-on-dark); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .audience-formula .formula-what { text-wrap: balance; } .audience-formula strong { font-weight: 500; color: var(--yellow); } /* ===== ПРОГРАММА ===== */ .program-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 24px; padding: 20px 26px; border-radius: var(--radius-sm); background: var(--yellow); } .program-status strong { font-size: 17px; font-weight: 600; } .program-status span { font-size: 16px; color: rgba(23, 23, 23, 0.72); } /* Общая сетка строк для карточек: метка блока и текст выравниваются между карточками по одной линии (карточки тянут строки через subgrid). Строк две — метка и текст. Вернёте в разметку блок анонсов (он лежит закомментированным в index.html) — добавьте сюда третью строку `auto`, иначе он окажется вне общего выравнивания. */ .day-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; row-gap: 24px; column-gap: 16px; } .day-part { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 32px; border-radius: var(--radius-card); background: var(--surface); } .day-marker { display: flex; align-items: center; gap: 12px; } .day-marker span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--yellow); font-size: 14px; font-weight: 600; } .day-marker p { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .day-copy h3 { margin-bottom: 12px; } .day-copy p { color: var(--muted); } .program-future { padding: 20px; border: 1px dashed #D9DBDA; border-radius: var(--radius-sm); } .program-future span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .program-future p { font-size: 15px; line-height: 1.4; color: var(--muted); } /* ===== ФОТО В ТЕКСТОВЫХ БЛОКАХ ===== */ /* Кадр прошлой конференции внутри текстового блока: пропорция 3:2 задана жёстко, чтобы блоки-половинки в паре оставались одной высоты. */ .section-photo { margin: 28px 0 0; } .section-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); } .section-photo figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); } /* на тёмном фоне подпись серым не читается */ .awards .section-photo figcaption { color: var(--muted-on-dark); } /* ===== ВЫСТАВКА / ПАРТНЁРЫ / МЕСТО ===== */ .partners-layout { display: grid; gap: 32px; } .partners-copy p { margin-bottom: 18px; font-size: 19px; line-height: 1.45; } /* кнопка после текста-статуса должна занимать свою строку: строчный поток поставил бы её рядом с плашкой «Состав партнёров…» */ .partners-copy .button-outline { display: flex; width: fit-content; margin-top: 12px; } /* ===== ViRush Awards (тёмный блок) ===== */ .awards h2, .registration h2 { color: #FFFFFF; } .awards .section-copy > p { color: rgba(255, 255, 255, 0.78); } /* Заголовок и описание премии — левой колонкой, статус партнёра и кадр награждения — правой. Так ни одна строка не тянется через весь блок: слева мера около 45 знаков, в карточке — короткие строки. Раскладки «всё в одну колонку» и «плашка полосой во всю ширину» пробовали — обе давали длинные одинокие строки. Колонки — два самостоятельных блока, а не области сетки: с областями строка под описание растягивалась по высоте правой колонки, и описание зависало на её середине. */ .awards-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; gap: 20px 48px; margin-bottom: 40px; } .awards-main { display: grid; gap: 20px; } .awards-intro .section-heading { margin-bottom: 0; } /* полоса-кадр между шапкой премии и номинациями */ .awards-banner { margin: 0 0 44px; } .awards-banner img { aspect-ratio: 3 / 1; } .award-status { display: grid; gap: 8px; padding: 22px 26px; border: 1px solid var(--dark-line); border-radius: var(--radius-sm); background: var(--dark-card); } .award-status strong { font-size: 17px; font-weight: 600; color: var(--yellow); } /* мера строки: в стопке плашка растягивается на всю ширину блока, и без ограничения пояснение читалось бы одной строкой через весь экран */ .award-status span { max-width: 54ch; font-size: 15px; color: var(--muted-on-dark); } /* Подзаголовок со статусом слева, кнопка заявки — справа на той же линии, вплотную к карточкам номинаций: у самих карточек она и нужна. */ .nominations-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 20px; } .nominations-heading h3 { font-size: clamp(24px, 2.4vw, 34px); color: #FFFFFF; } .nominations-title { max-width: 640px; } /* строка-статус под подзаголовком: удаляется вместе с разметкой, когда номинации утвердят — на сетку блока это не влияет */ .nominations-note { margin-top: 10px; font-size: 15px; color: var(--muted-on-dark); } .nominations-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } /* 5 номинаций: первый ряд — три карточки, второй — две широкие, чтобы в сетке не оставалось пустой ячейки */ .nominations-grid article { grid-column: span 2; } .nominations-grid article:nth-child(4), .nominations-grid article:nth-child(5) { grid-column: span 3; } .nominations-grid article { padding: 30px; border: 1px solid var(--dark-line); border-radius: var(--radius-card); background: var(--dark-card); } .nominations-grid span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 20px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 14px; font-weight: 600; } .nominations-grid h4 { margin-bottom: 12px; color: #FFFFFF; } .nominations-grid p { font-size: 15px; line-height: 1.45; color: var(--muted-on-dark); } /* ===== ИСТОРИЯ (карусель) ===== */ /* заголовок блока по центру, как в референсе */ .history-heading { max-width: none; margin-bottom: 36px; text-align: center; } .history-slider { position: relative; } /* дорожка карточек: нативная горизонтальная прокрутка с прилипанием */ .history-track { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; outline: none; } .history-track::-webkit-scrollbar { display: none; } /* на время протяжки: без прилипания и без плавности, лента идёт за курсором */ .history-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } /* три карточки в ряд + «выглядывающая» четвёртая справа (56px) */ .history-slide { flex: 0 0 calc((100% - 32px - 56px) / 3); margin: 0; scroll-snap-align: start; border-radius: var(--radius-card); background: var(--surface); overflow: hidden; } /* последняя карточка прилипает правым краем: иначе крайняя точка прилипания оказывается раньше конца ленты, хвост недокручивается и седьмое фото никогда не видно целиком */ .history-slide:last-child { scroll-snap-align: end; } .history-slide figure { display: flex; flex-direction: column; height: 100%; margin: 0; } .history-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; user-select: none; -webkit-user-drag: none; /* события ловит дорожка — иначе браузер начинает свой драг картинки */ pointer-events: none; } .history-slide figcaption { padding: 20px 22px 24px; font-size: 15px; line-height: 1.35; color: var(--muted); } /* круглые стрелки поверх дорожки, по центру её высоты */ .carousel-button { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(23, 23, 23, 0.14); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: background 0.2s ease, box-shadow 0.2s ease; } .carousel-button:hover { background: var(--yellow); box-shadow: 0 8px 24px rgba(23, 23, 23, 0.2); } .carousel-button-prev { left: 12px; } .carousel-button-next { right: 12px; } /* на краю ленты стрелка не нужна */ .carousel-button[hidden] { display: none; } /* ===== РЕГИСТРАЦИЯ (тёмный блок, форма — белая карточка) ===== */ /* Колонки равные: в карточке теперь только перечисление и кнопка, и при прежнем перевесе в её сторону (1.15fr) справа от кнопки зияла пустота. */ .registration-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; } .registration-copy .eyebrow { display: block; margin-bottom: 20px; color: var(--yellow); } .registration-copy > p:last-child { max-width: 460px; margin-top: 24px; font-size: 19px; color: rgba(255, 255, 255, 0.78); } /* Панель регистрации: сама форма живёт в общем попапе сайта, здесь — карточка с составом полей и кнопкой, которая его открывает. */ .registration-panel { display: grid; justify-items: start; gap: 18px; padding: 32px; border-radius: var(--radius-block); background: var(--surface); color: var(--ink); } /* кнопка — последняя в карточке, поэтому от списка её отделяем отдельно: так она не липнет к перечислению и карточка остаётся невысокой */ .registration-panel .button { margin-top: 6px; } .registration-panel h3 { font-size: clamp(21px, 1.9vw, 28px); } .registration-list { display: grid; gap: 12px; width: 100%; padding-top: 20px; border-top: 1px solid var(--line); } .registration-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--muted); } /* точка по центру первой строки — тот же расчёт, что в карточках «Для кого» */ .registration-list li::before { content: ''; position: absolute; top: calc((1.5em - 8px) / 2); left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); } /* ===== ПОДВАЛ ===== */ .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; padding-bottom: 36px; font-size: 14px; font-weight: 500; color: var(--muted); } /* ===== ФОКУС ===== */ :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .awards :focus-visible, .registration :focus-visible { outline-color: var(--yellow); } /* внутри белой панели фокус снова тёмный — на жёлтом его не видно */ .registration-panel :focus-visible { outline-color: var(--ink); } /* ===== АДАПТИВ ===== Брейкпоинты: 1920 / 1600 / 1200 / 1024 / 992 / 768 / 480 / 375 / 320. Ниже 1920 — каскад max-width, поэтому правила наследуются вниз: что задано на 768, действует и на 480, если там не переопределено. */ /* 1920+ — широкие мониторы: полезная ширина больше, воздуха больше */ @media (min-width: 1920px) { :root { --page-width: 1440px; --radius-block: 48px; } main { gap: 32px; padding: 24px 32px 40px; } .screen { padding: 96px 0; } .hero h1 { font-size: 150px; } .quote-layout { gap: 64px; } .quote-photo { flex-basis: 340px; } } /* 1600 — стандартный ноутбучный десктоп: чуть плотнее вертикальный ритм */ @media (max-width: 1600px) { main { gap: 24px; } .screen { padding: 72px 0; } .hero { padding-top: 80px; } } /* 1200 — узкий десктоп: сетка блоков ещё двухколоночная, но поля уже */ @media (max-width: 1200px) { .page-width { width: calc(100% - 56px); } main { gap: 20px; padding: 16px 20px 28px; } .screen { padding: 64px 0; } .quote-layout { gap: 40px; } .quote-photo { flex-basis: 240px; } .awards-intro { gap: 36px; } } /* 1024 — планшет-«ландшафт»: двухколоночные блоки внутри секций складываются */ @media (max-width: 1024px) { .quote-section { padding: 64px 0; } .quote-main + .quote-main { margin-top: 16px; } .quote-layout { gap: 32px; } .quote-photo { flex-basis: 220px; } .quote-main { font-size: 22px; } .section-heading-row { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; } /* интро премии остаётся двухколоночным до 768: в одной колонке описание и плашка растягивались бы в длинные строки через весь блок */ .awards-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 18px 32px; margin-bottom: 56px; } /* в стопке кнопка встаёт под подзаголовок по левому краю: тянуть её во всю ширину блока на планшете незачем — получается жёлтая полоса */ .nominations-heading { align-items: flex-start; gap: 24px; } .registration-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } /* галерея: две карточки в ряд */ .history-slide { flex: 0 0 calc((100% - 16px - 48px) / 2); } } /* 992 — планшет-«портрет»: бенто-пары во всю ширину, меню сворачивается */ @media (max-width: 992px) { main { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 14px 16px 24px; } .screen { grid-column: span 1; padding: 56px 0; border-radius: 32px; } .page-width { width: calc(100% - 48px); } .hero { padding-top: 60px; } .hero-main { padding-bottom: 52px; } .site-header { grid-template-columns: 1fr auto; padding: 12px 20px; } .site-nav { display: none; } .site-header .button { grid-column: 2; } .site-footer { padding-inline: 0; } /* карточки программы в столбик — общая сетка строк больше не нужна */ .day-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; } .day-part { grid-row: auto; grid-template-rows: auto 1fr; row-gap: 24px; } /* номинации — по две в ряд */ .nominations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nominations-grid article, .nominations-grid article:nth-child(4) { grid-column: auto; } /* пятая карточка занимает весь нижний ряд: пять номинаций в два столбца иначе оставляют её одну с пустой ячейкой справа */ .nominations-grid article:nth-child(5) { grid-column: span 2; } } /* 768 — телефон-«ландшафт» и крупные телефоны: всё в одну колонку */ @media (max-width: 768px) { body { font-size: 16px; } /* интро премии складывается в стопку только здесь; мера строки ограничена, чтобы описание не растянулось через весь блок */ .awards-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* панорама 3:1 на узком экране вырождается в полоску — кадрируем мягче */ .awards-banner img { aspect-ratio: 16 / 9; } .awards-banner { margin-bottom: 32px; } .awards .section-copy > p { max-width: 62ch; } main { gap: 16px; padding: 10px 10px 20px; } .screen { padding: 48px 0; border-radius: 28px; } .page-width { width: calc(100% - 40px); } .section-heading { margin-bottom: 32px; } .hero-actions { gap: 20px; } .hero-actions .button { width: 100%; } .hero-facts { width: 100%; } .hero-facts div { flex: 1 1 140px; } .outcome-grid li, .audience-card, .day-part, .nominations-grid article { padding: 24px; } .outcome-grid li { min-height: 0; } .audience-formula { grid-template-columns: minmax(0, 1fr); padding: 24px; } .audience-formula p { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .audience-formula .formula-when { justify-self: start; } .nominations-grid, .nominations-grid article, .nominations-grid article:nth-child(4), .nominations-grid article:nth-child(5) { grid-template-columns: minmax(0, 1fr); grid-column: auto; } .registration-panel { padding: 24px; border-radius: 26px; } /* на узком экране кнопка во всю ширину карточки */ .registration-panel .button { justify-self: stretch; } /* галерея: одна карточка с подглядыванием следующей */ .history-slide { flex: 0 0 calc(100% - 48px); } .carousel-button { width: 46px; height: 46px; font-size: 24px; } /* на планшете портрет мельче, но остаётся справа: перенос сработает сам, когда колонке текста станет тесно (примерно с 600px) */ /* Порог переноса подогнан к 480: 190 + 28 + 260 = 478. Ниже этой ширины включается телефонная раскладка (фото сверху), поэтому промежуточного состояния «портрет под подписью» не возникает. */ .quote-photo { flex-basis: 190px; } .quote-layout { gap: 28px; } .quote-layout blockquote { flex-basis: 260px; } /* в узкой колонке кегль ещё меньше, иначе строки рвутся */ .quote-main { font-size: 20px; } } /* 480 — обычный телефон: крупные заголовки уменьшаем вручную, иначе clamp держит их слишком большими для такой ширины */ @media (max-width: 480px) { main { gap: 14px; padding: 8px 8px 18px; } .screen { padding: 40px 0; border-radius: 24px; } .page-width { width: calc(100% - 32px); } .hero h1 { font-size: 44px; } .hero { padding-top: 44px; } .hero-main { padding-bottom: 40px; } .site-header { padding: 10px 14px; } .wordmark img { height: 20px; } .button { min-height: 50px; padding: 0 22px; font-size: 15px; } .button-small { min-height: 40px; padding: 0 16px; font-size: 14px; } /* факты о событии — по одному в строку, иначе «12 ноября 2026» ломается */ .hero-facts div { flex: 1 1 100%; } /* на телефоне кнопка заявки на премию занимает всю ширину колонки */ .nominations-heading .button { justify-content: center; width: 100%; } .outcome-grid li, .audience-card, .day-part, .nominations-grid article { padding: 20px; } .audience-formula { padding: 20px; } .history-slide { flex: 0 0 calc(100% - 36px); } .history-slide figcaption { padding: 16px 18px 20px; font-size: 14px; } .carousel-button { width: 42px; height: 42px; font-size: 22px; } .registration-panel { padding: 20px; border-radius: 22px; } /* на телефоне портрет идёт первым и во всю ширину контентной области: под подписью он смотрелся оторванным от неё */ .quote-photo { order: -1; flex: 1 1 100%; margin: 0; } /* во всю ширину пропорция 3:4 дала бы 456px высоты и увела цитату за пределы экрана — на телефоне кадрируем в квадрат */ .quote-photo img { aspect-ratio: 1 / 1; } .quote-layout { gap: 24px; } .quote-main { font-size: 18px; } .status-line, .section-copy .status-line { padding: 11px 20px; font-size: 14px; } } /* 375 — iPhone SE/13 mini и подобные */ @media (max-width: 375px) { .screen { padding: 36px 0; border-radius: 22px; } .page-width { width: calc(100% - 28px); } .hero h1 { font-size: 38px; } .outcomes h2 { font-size: 24px; } .history-slide { flex: 0 0 calc(100% - 30px); } .carousel-button { width: 38px; height: 38px; font-size: 20px; } } /* 320 — самый узкий рабочий размер: следим, чтобы ничего не выпирало */ @media (max-width: 320px) { body { font-size: 15px; } main { gap: 12px; padding: 6px 6px 16px; } .screen { padding: 32px 0; border-radius: 18px; } .page-width { width: calc(100% - 24px); } .hero h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 19px; } .quote-main { font-size: 17px; } .outcome-grid li, .audience-card, .day-part, .nominations-grid article { padding: 16px; } .registration-panel { padding: 16px; } .button { min-height: 48px; padding: 0 18px; font-size: 14px; } .site-header { padding: 8px 10px; } } @media (prefers-reduced-motion: reduce) { html, .history-track { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }