/* База редизайна: типографика, сетка, утилиты. Два корня: .rd-page — страница целиком на редизайне, класс на , старый CSS не подключается; .rd — остров редизайна внутри старой страницы. Пока идёт переход, правила пишем для обоих. */ .rd-page, .rd-page *, .rd-page *::before, .rd-page *::after, .rd, .rd *, .rd *::before, .rd *::after { box-sizing: border-box; } .rd-page { margin: 0; } .rd-page, .rd { font-family: var(--rd-font); font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--rd-ink); background: var(--rd-w); -webkit-font-smoothing: antialiased; /* весь интерфейс в нижнем регистре; в CMS текст хранится как есть */ text-transform: lowercase; } /* Имена собственные и аббревиатуры, которым нижний регистр не нужен */ .rd-page .rd-keep-case, .rd .rd-keep-case { text-transform: none; } .rd-page p, .rd p, .rd-page h1, .rd h1, .rd-page h2, .rd h2, .rd-page h3, .rd h3, .rd-page h4, .rd h4, .rd-page ul, .rd ul, .rd-page ol, .rd ol, .rd-page dl, .rd dl, .rd-page dd, .rd dd, .rd-page figure, .rd figure { margin: 0; padding: 0; } .rd-page ul, .rd ul, .rd-page ol, .rd ol { list-style: none; } .rd-page :where(h1, h2, h3, h4), .rd :where(h1, h2, h3, h4) { font-weight: 400; letter-spacing: -.02em; line-height: 1.1; } .rd-page :where(a), .rd :where(a) { color: inherit; text-decoration: none; } .rd-page :where(img), .rd :where(img) { max-width: 100%; display: block; } .rd-page button, .rd button, .rd-page input, .rd input, .rd-page select, .rd select, .rd-page textarea, .rd textarea { font: inherit; color: inherit; } .rd-page :where(button), .rd :where(button) { background: none; border: none; cursor: pointer; } /* видимый фокус для клавиатуры */ .rd-page a:focus-visible, .rd a:focus-visible, .rd-page button:focus-visible, .rd button:focus-visible, .rd-page select:focus-visible, .rd select:focus-visible { outline: 2px solid var(--rd-a); outline-offset: 3px; } /* ── Сетка и отступы ─────────────────────── */ /* Боковые поля страницы */ .rd-pad { padding-left: var(--rd-pad); padding-right: var(--rd-pad); } /* Раздел: вертикальный шаг между блоками */ .rd-sec { margin-top: var(--rd-gap); } .rd-sec:first-child { margin-top: 0; } /* Контент под фиксированной шапкой */ .rd-below-header { display: block; padding-top: var(--rd-hh); } /* ── Типографика ─────────────────────────── */ /* Заголовок раздела: «ближайшие спектакли», «даты и билеты» */ .rd-h2 { font-size: 25px; font-weight: 400; } /* Название в обложке: слайд, спектакль, событие */ .rd-title { font-size: clamp(2.4rem, 4.2vw, 3.75rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; text-wrap: balance; } /* Второстепенный текст: подписи, даты, роли */ .rd-muted { color: var(--rd-mid-text); } /* Хлебные крошки */ .rd-page .rd-crumbs, .rd .rd-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; letter-spacing: .04em; color: var(--rd-mid-text); } .rd-page .rd-crumbs a:hover, .rd .rd-crumbs a:hover { color: var(--rd-ink); } /* ── Фотографии ──────────────────────────── */ /* Все фото сайта — чёрно-белые; в карточках при наведении частично возвращают цвет */ .rd-bw { filter: grayscale(100%); transition: filter .3s ease, transform .45s ease; } .rd-bw-hover:hover .rd-bw { filter: grayscale(60%); transform: scale(1.03); } /* Заглушка вместо фото */ .rd-ph { background: var(--rd-off); } /* ── Утилиты ─────────────────────────────── */ .rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Горизонтальная прокрутка без полосы (ленты дат, табы, карусели) */ .rd-scroll-x { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rd-scroll-x::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .rd-page *, .rd-page *::before, .rd-page *::after, .rd *, .rd *::before, .rd *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }