/* =========================================================== Публичная страница. Mobile-first, резиновая вёрстка. Две темы. По умолчанию — тёмная (:root): квиз играется в полутёмном зале, светлый экран в лицо соседу никому не нужен. Светлая включается атрибутом data-theme="light" на , выбор живёт в localStorage. =========================================================== */ /* Метрики Giga Sans несимметричны (hhea 1000/-300 против typo 700/-300 плюс выставленный USE_TYPO_METRICS): Chrome берёт одни, Safari другие, и в Safari текст сидит в строке заметно выше центра. Переопределяем метрики руками — бокс 1.2em, базовая линия на 0.9em: capHeight и x-height оказываются симметрично вокруг центра строки, и текст центрируется по вертикали одинаково во всех браузерах. */ @font-face { font-family: 'Giga Sans'; src: url('../fonts/GigaSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; } @font-face { font-family: 'Giga Sans'; src: url('../fonts/GigaSans-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; } @font-face { font-family: 'Giga Sans'; src: url('../fonts/GigaSans-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; } @font-face { font-family: 'Giga Sans'; src: url('../fonts/GigaSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; } @font-face { font-family: 'Giga Sans'; src: url('../fonts/GigaSans-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; } @font-face { font-family: 'Giga Sans'; src: url('../fonts/GigaSans-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; } /* --- Тёмная тема (по умолчанию) --- */ :root { --bg: #0d0f16; --card: #171a25; --card-2: #1f2331; --line: #2b3042; --text: #f2f4f8; --muted: #9aa3b8; --accent: #6c8cff; --accent-ink: #0d0f16; --ok: #34d17f; --ok-wash: rgba(52, 209, 127, 0.12); --ok-line: rgba(52, 209, 127, 0.35); --err: #ff6b6b; --warn: #f0b429; --warn-wash: rgba(240, 180, 41, 0.1); --warn-line: rgba(240, 180, 41, 0.35); --radius: 14px; } /* --- Светлая тема --- Акценты пересчитаны под белую карточку: контраст к #fff у каждого не ниже 5:1, у белого текста на синей плашке — 6.4:1. */ :root[data-theme='light'] { --bg: #f2f4f8; --card: #ffffff; --card-2: #eef0f4; --line: #d8dde6; --text: #171a21; --muted: #5f6878; --accent: #3b4fd8; /* 6.4:1 на белом */ --accent-ink: #ffffff; --ok: #0f7a52; /* 5.4:1 на белом */ --ok-wash: rgba(15, 122, 82, 0.09); --ok-line: rgba(15, 122, 82, 0.4); --err: #b42318; /* 6.6:1 на белом */ --warn: #8a5a00; /* 5.9:1 на белом */ --warn-wash: rgba(138, 90, 0, 0.08); --warn-line: rgba(138, 90, 0, 0.35); } * { box-sizing: border-box; } /* Авторский display побеждает [hidden] из UA-стилей, а скрывать через атрибут hidden тут умеет почти каждый блок. Одно правило на всех. */ [hidden] { display: none !important; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Giga Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.35; -webkit-text-size-adjust: 100%; } body { padding-bottom: env(safe-area-inset-bottom); } /* --- Шапка --- Три зоны: логотип, раунд, служебное. Крайние колонки одинаковой ширины (1fr), иначе раунд съезжает с центра экрана. */ .top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; /* Вырез экрана добавляем только сверху: в шорткате padding он попадал ещё и в нижний отступ и приподнимал всё содержимое. */ padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); /* Оформление игры даёт шапке свою подложку: в кадре она темнее плашек, и на странице это та же иерархия. */ background: var(--head, var(--card)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .logo { height: 40px; width: auto; max-width: 100%; display: block; } /* Главное на экране: номер раунда игрок должен считывать не вчитываясь. Чуть мельче, чем было (6.4vw / 26px): под номером теперь стоит название раунда, и шапку из-за него растить не хочется — она sticky и ест высоту на всех экранах сразу. */ .round { grid-column: 2; text-align: center; font-weight: 900; /* На узком экране ужимается, чтобы не выдавить логотип и связь */ font-size: clamp(17px, 5.4vw, 22px); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; } .top-right { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-family: inherit; font-size: 15px; line-height: 1; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; } .theme-btn:active { background: var(--line); } .link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2; color: var(--muted); text-align: right; } .link::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .link[data-state='live']::before { background: var(--ok); } .link[data-state='reconnecting']::before { background: var(--warn); } .link[data-state='offline']::before { background: var(--err); } /* --- Общий контейнер --- */ .wrap { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; } /* --- Блок команды --- Шрифт меньше, чем у раунда: своё название команда и так знает, а раунд надо считывать с первого взгляда. */ .team-view { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .team-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; } .team-edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin-left: auto; border: none; border-radius: 10px; background: var(--card-2); color: var(--muted); cursor: pointer; } /* display:block — иначе svg стоит на базовой линии строки кнопки и визуально уезжает вверх. То же у всех иконок ниже. */ .team-edit svg { display: block; width: 18px; height: 18px; fill: currentColor; } .team-edit:active { background: var(--line); } .team-edit-screen { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .team-edit-title { margin: 0 0 12px; font-size: 17px; font-weight: 700; } .team-edit-current { background: var(--card-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; } .team-edit-current::before { content: 'Правим команду:'; display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 2px; } .team-edit-row { display: flex; gap: 8px; } .team-input { flex: 1 1 auto; min-width: 0; } /* Высота фиксированная, паддинг только по горизонтали: вертикаль держит line-height, и текст стоит ровно в середине поля. */ .team-input, .q-input { /* не меньше 16px — иначе iOS Safari зумит страницу при фокусе */ font-size: 16px; font-family: inherit; line-height: 1.2; height: 46px; color: var(--text); background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; } .team-input::placeholder, .q-input::placeholder { color: var(--muted); opacity: 1; } .team-input:focus, .q-input:focus { outline: none; border-color: var(--g-counter, var(--accent)); } .btn { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 46px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; color: var(--accent-ink); /* Акцент игры — тот же, что у иконки отправки: ОК на экране команды и есть отправка. Пока игра цвет не прислала, свой --accent. */ background: var(--g-timer, var(--accent)); border: none; border-radius: 10px; padding: 0 18px; cursor: pointer; } .btn:disabled { opacity: 0.6; } .btn-ghost { margin-top: 10px; font-family: inherit; font-size: 15px; color: var(--muted); background: none; border: none; padding: 6px 0; cursor: pointer; } .team-error { color: var(--err); font-size: 14px; margin-top: 8px; min-height: 1em; } .team-list-hint { color: var(--muted); font-size: 13px; margin: 14px 0 8px; } .team-list { display: flex; flex-wrap: wrap; gap: 8px; } .team-chip { display: inline-flex; align-items: center; min-height: 38px; font-family: inherit; font-size: 15px; line-height: 1.2; color: var(--text); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; } .team-chip.is-current { border-color: var(--g-counter, var(--accent)); color: var(--g-counter, var(--accent)); } .team-chip:active { background: var(--line); } /* --- Состояние страницы --- Открыт приём или закрыт — вопрос номер один для игрока, поэтому не серая строчка, а цветная плашка с точкой и рамкой. */ .state-note { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; } .state-note::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .state-note[data-kind='open'] { color: var(--ok); background: var(--ok-wash); border-color: var(--ok-line); } .state-note[data-kind='closed'] { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); } /* --- Вопросы --- */ .questions { display: flex; flex-direction: column; gap: 14px; } .q { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; transition: opacity 0.18s ease, background-color 0.18s ease; } .q-line { display: flex; align-items: center; gap: 8px; } .q-num { display: flex; align-items: center; flex: none; width: 26px; font-weight: 700; /* Акцент игры, пока он есть; иначе номер остаётся приглушённым, как был. Fallback внутри var() — единственное место, где решается, что будет без оформления. */ color: var(--g-counter, var(--muted)); font-variant-numeric: tabular-nums; } .q-input { flex: 1 1 auto; min-width: 0; } /* Отправка — сама иконка, без прямоугольника под ней. Кнопка-плашка спорила с плашкой карточки: два прямоугольника со своими радиусами в одной строке, из которых один внутри другого. Область нажатия осталась прежней, 46×46 — уменьшилось только то, что видно. Цвет — акцент игры (--g-timer), пока игра его не прислала, свой --accent. */ .q-send { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border: none; background: none; padding: 0; color: var(--g-timer, var(--accent)); cursor: pointer; } .q-send svg { display: block; width: 24px; height: 24px; fill: currentColor; } .q-send:disabled { opacity: 0.4; cursor: default; } .q-send:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 8px; } .q-send.is-loading svg { animation: pulse 0.8s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.3; } } /* Приём закрыт: карточка теряет заливку и садится на фон страницы, строка ввода гаснет. Принятый ответ остаётся в полную яркость — ради него экран и открывают после закрытия раунда. Класс вешает answers.js, состояние одно на весь список. */ .questions.is-locked .q { background: transparent; border-style: dashed; } /* Гасим строку поэлементно, а не всю .q-line разом. Раньше она уходила в opacity: 0.3 целиком, и вместе с мёртвой кнопкой отправки бледнели номер вопроса и рамка поля: принятый ответ на экране видно, а к какому вопросу он относится — уже нет. Номер и рамка остаются в полную силу, гаснет текст и кнопка: нажимать её всё равно некуда. opacity тут больше не используем нигде, кроме кнопки: прозрачность пропускает фон страницы сквозь текст, а фон бывает и с орнаментом (см. css/by.css). Приглушать нужно цветом. */ .questions.is-locked .q-input { color: var(--muted); } .questions.is-locked .q-send { opacity: 0.2; } .questions.is-locked .q-accepted, .questions.is-locked .q-status { opacity: 1; } .q-accepted { margin: 8px 0 0 34px; font-size: 14px; /* длинный ответ не должен ломать вёрстку */ overflow-wrap: anywhere; } .q-accepted-label { color: var(--muted); } .q-accepted-text { color: var(--g-answer, var(--ok)); font-weight: 700; } .q-status { margin: 6px 0 0 34px; font-size: 13px; display: flex; align-items: center; gap: 10px; } .q-status.is-error { color: var(--err); } .q-status.is-ok { color: var(--ok); } .q-status.is-pending { color: var(--muted); } .q-retry { font-family: inherit; font-size: 13px; color: var(--accent); background: none; border: none; padding: 2px 0; text-decoration: underline; cursor: pointer; } /* --- Десктоп --- */ @media (min-width: 720px) { .logo { height: 48px; } .round { font-size: 28px; } .team-name { font-size: 18px; } .wrap { padding: 24px 16px 48px; } } /* =========================================================== Игра и ставки =========================================================== */ /* Раунд переехал в обёртку вместе с названием игры — колонку сетки теперь занимает она, иначе шапка разъезжается. */ .round-box { grid-column: 2; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .round-box .round { grid-column: auto; } /* Ставочный раунд виден уже по заголовку: команда должна понимать, что происходит, ещё до того как долистает до галочек. */ .round.is-bet { color: var(--warn); } /* Название раунда: ведущий объявляет тему голосом, и на экране она должна совпадать с услышанным. Стоит между номером и названием игры — номер крупнее, игра мельче, порядок чтения сверху вниз. */ .round-name { /* Акцент игры; без оформления — обычный цвет текста, как было. .is-bet ниже перебивает его намеренно: «раунд со ставкой» — это предупреждение, и оно важнее оформления. */ color: var(--g-counter, var(--text)); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; text-align: center; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .round-name.is-bet { color: var(--warn); } .state-note[data-kind='bet'] { color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); } /* --- Галочка ставки --- */ /* Отдельной строкой под полем, а не в одном ряду с кнопкой отправки: на телефоне это зона большого пальца, и промах по чекбоксу рядом с «отправить» стоил бы команде балла. */ .q-bet { display: flex; align-items: center; gap: 9px; margin: 10px 0 0 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--muted); cursor: pointer; /* палец, а не курсор: цель должна быть крупной */ min-height: 40px; user-select: none; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .q-bet input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--warn); cursor: pointer; } .q-bet-text b { font-weight: 800; } .q.has-bet .q-bet { color: var(--warn); border-color: var(--warn-line); background: var(--warn-wash); font-weight: 700; } /* Поставленная ставка должна быть заметна и когда карточка свёрнута вниманием: подсвечиваем всю карточку рамкой. */ .q.has-bet { border-color: var(--warn-line); } /* Приём закрыт — галочка гаснет вместе с полем ввода, но остаётся читаемой: команда сверяет, на что поставила. */ .questions.is-locked .q-bet { opacity: 0.55; cursor: default; } .questions.is-locked .q-bet input { cursor: default; } @media (min-width: 720px) { .round-name { font-size: 16px; max-width: 40vw; } } /* =========================================================== Оформление игры. Цвета приходят из games.design вместе с конфигурацией идущей игры и расставляются по переменным в app.js (paintDesign). Сами цвета посчитаны в хабе — здесь их не считают и не правят. Переменные --g-* подставлены прямо в правила выше через var(--g-…, запасной): без оформления страница выглядит ровно так, как выглядела. Этот блок нужен для второго — для ПЛАШКИ: она отличается от обычной карточки не цветом, а тем, как сделан контур. Включается атрибутом data-design="game" на ; ставит и снимает его app.js. Без атрибута блок не делает ничего. =========================================================== */ /* Плашка вместо карточки. Контур внутренний (inset box-shadow), а не border. В кадре обводка плашки идёт ПО контуру и рисуется внутрь: рамка в 2px раздвинула бы бокс и сдвинула строку с полем ввода, а сама карточка стала бы на 4px шире соседних элементов. Радиус и толщина приходят слепком: --radius и --plate-stroke-w выставляет app.js. */ :root[data-design='game'] .q { border: none; box-shadow: inset 0 0 0 var(--plate-stroke-w, 2px) var(--plate-stroke, var(--line)); } /* Поле ввода внутри плашки — колодец, а не вторая плашка: заливка глубже плашки и своей обводки нет. Иначе в одной строке оказываются два контура, и читается это как вложенная карточка. */ :root[data-design='game'] .q-input { background: var(--card-2); border-color: transparent; } :root[data-design='game'] .q-input:focus { border-color: var(--g-counter, var(--accent)); } /* Ставка. Метка и галочка — тот же акцент, что у иконки отправки: и то и другое — «нажми меня», и разными цветами им быть незачем. */ :root[data-design='game'] .q-bet-box, :root[data-design='game'] .q-bet input { accent-color: var(--g-timer, var(--accent)); } :root[data-design='game'] .q-bet-text b { color: var(--g-timer, var(--accent)); }