/* Тёмная тема единственная: ролик чёрный, светлый вариант под него не встанет. */ :root { --bg: #000; --fg: #f2f4f8; --fg-dim: #98a2b3; /* #2f6fdb на #000 давал 4.42:1 — ниже пола спеки (§8, ≥4.5:1). Это цвет единственной действующей ссылки на странице (mailto:), поэтому контраст здесь не косметика. 4d86ea даёт 5.91:1, посчитано формулой WCAG (относительная яркость по sRGB-коэффициентам, затем (L1+0.05)/(L2+0.05)). */ --accent: #4d86ea; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Шапка. Во время заставки JS растягивает её на весь экран, в конечном состоянии — размеры ниже. Соотношение сторон коробки задано равным соотношению ролика намеренно: при совпадении cover обрезает ноль. Задать вместо этого width:100% и одну высоту нельзя — на десктопе получилась бы коробка 1440×304 (соотношение 4,7), cover показал бы 28 % высоты кадра, и от логотипа осталась бы полоса. Заметно это было бы только на путях, где заставка пропущена, — то есть у всех, кто зашёл второй раз. */ .stage { position: relative; aspect-ratio: 4 / 3; height: min(38vh, 320px); max-width: 100%; margin-inline: auto; background: var(--bg); overflow: hidden; /* Переход не висит здесь безусловно: на первой отрисовке JS ещё не выполнился (модуль отложенный), страница уже показывает конечное состояние, и когда main.js берёт коробку под управление (expandStage — задача 6), растягивание на весь экран должно случиться мгновенно, а не анимированно. Анимировать нужно только схлопывание — transition живёт в .stage--collapsing, класс на время схлопывания добавляет сам JS. */ } .stage--collapsing { /* Ширина и высота анимируются в пикселях (их выставляет JS) — переход заставки в шапку описан в задаче 6, спека §4.2: конечная ширина ведёт коробку к соотношению сторон ролика, поэтому cover в конце совпадает с contain и обрезка сходит на нет плавно, без переключения object-fit. Целевой размер JS не считает сам (38vh/320px не дублируются здесь и там — vh на мобильных резолвится не так, как innerHeight, и дублирование разошлось бы), а измеряет getBoundingClientRect после снятия инлайновых px, так что число одно — то, что здесь. */ transition: width 750ms cubic-bezier(0.22, 0.61, 0.36, 1), height 750ms cubic-bezier(0.22, 0.61, 0.36, 1); } @media (orientation: portrait) { .stage { aspect-ratio: 9 / 16; } } .stage__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Без этого правила атрибут hidden молча не работает: [hidden]{display:none} браузера — обычное правило слоя user-agent, а .stage__media{display:block} — обычное правило слоя author, и author всегда побеждает user-agent независимо от специфичности. Итог без явного переопределения — картинка still постоянно перекрывает видео (still позже в разметке), и заставка никогда не видна. Обнаружено в браузере при проверке Task 5 (getComputedStyle показывал display:block у элемента с hidden=true), не по спеке. */ .stage__media[hidden] { display: none; } /* Сверхширокие окна — единственный случай, где cover срезал бы и верх щита, и надпись (спека §5.2). Поля не видны: фон ролика чёрный. */ @media (min-aspect-ratio: 2/1) { .stage__media { object-fit: contain; } } /* Контент проявляется, пока шапка сжимается. Классом на , а не соседними селекторами: между .stage и .content стоит кнопка пропуска, и связка через ~ ломается от любой перестановки узлов. */ body.intro-playing .content { opacity: 0; } body.intro-playing { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .stage--collapsing, .content { transition: none; } } .content { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem 4rem; text-align: center; transition: opacity 500ms ease 250ms; } .content__title { margin: 0 0 1.75rem; font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; } .content__list { margin: 0 0 2rem; padding: 0; list-style: none; color: var(--fg-dim); } .content__list li { padding: 0.4rem 0; } .content__status { margin: 0 0 0.75rem; font-weight: 600; } .content__contact { margin: 0 0 2.5rem; color: var(--fg-dim); } .content__contact a { color: var(--accent); } .langs { display: flex; gap: 0.5rem; justify-content: center; } .langs button { background: none; border: 1px solid #2a2f3a; border-radius: 999px; padding: 0.35rem 0.9rem; color: var(--fg-dim); font: inherit; font-size: 0.85rem; cursor: pointer; } .langs button[aria-current="true"] { border-color: var(--accent); color: var(--fg); } .skip { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; background: rgba(0, 0, 0, 0.55); border: 1px solid #2a2f3a; border-radius: 999px; padding: 0.5rem 1rem; color: var(--fg-dim); font: inherit; font-size: 0.85rem; cursor: pointer; } .skip:focus-visible, .langs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }