/* ============================================================
Love Chess — кастомная тема поверх Bootstrap 5
СХЕМА A «ВИНТАЖ-ЭНТЕРПРАЙЗ» (источник: Figma, docs/design/scheme-a-tokens.md).
Тёмно-зелёный фон + кремовый текст + бордовый CTA + ЗОЛОТОЙ
акцент; шрифт Inter; кремовые карточки; нижняя таб-навигация на мобиле.
ВАЖНО: имена CSS-переменных и классов сохранены 1:1 с прошлой темой,
чтобы не сломать протестированный функционал (JS/id не трогаем) —
меняются только их значения и оформление компонентов.
Подключение (порядок важен):
1.
2. <-- этот файл ПОСЛЕ Bootstrap
Шрифт: Inter (Google Fonts) с системным fallback.
============================================================ */
/* ---------- 1. Палитра бренда (схема A) ---------- */
:root {
/* Схема №50 «Лес · Латунь»: тёмно-зелёный фон + кремовый + латунный
акцент + терракотовая CTA (прототип prototype-interactive_1, №50). */
/* Тёмно-зелёный — фон страниц и тёмные поверхности */
--lc-green-deep: #0e2017; /* темнейший — контейнер таблицы, нижняя навигация, шапки */
--lc-green: #204130; /* шапка, строки таблицы, кнопка на кремовом */
--lc-green-2: #163124; /* фон , приподнятые поверхности */
--lc-green-300: #2e5a43; /* рамки/разделители на тёмном */
--lc-green-700: #0a1810; /* самый тёмный край (границы шапки) */
/* Кремовый / слоновая кость — текст и светлые акценты */
--lc-cream: #eeece7; /* основной текст на тёмном, фон карточек */
--lc-cream-200: #e4ddcf; /* приглушённый светлый (подзаголовок на тёмном) */
--lc-cream-300: #c8c0ac; /* приглушённый светлый */
--lc-cream-soft: rgba(238, 236, 231, .80); /* вторичный текст на тёмном (≥4.5:1) */
/* Терракота/рыжий — CTA, акценты, метки «БЛИЖАЙШИЙ ТУРНИР», вместимость */
--lc-wine: #9f532d; /* CTA / primary */
--lc-wine-700: #7b4023; /* hover CTA */
--lc-wine-300: #c07a52; /* мягкий рыжий: ссылки на тёмном при необходимости */
/* Латунь/золото — главный акцент: активная навигация, ранги, ссылки, обводки */
--lc-gold: #d4ad5e;
--lc-gold-200: #e2c182;
--lc-gold-line: #bf9b4f; /* обводка бейджа города / контур */
/* Тёмный текст на кремовых поверхностях */
--lc-ink: #152e21; /* заголовки карточек, значения на кремовом */
--lc-ink-soft: #478566; /* метки КОГДА/ГДЕ/ФОРМАТ на кремовом */
/* Муть на тёмном (W·Н·П, неактивная навигация) */
--lc-muted-dark: #93a89a;
/* Статусные */
--lc-danger: #EF4444;
--lc-success: #2f7d4f; /* «Открыта» — зелёная пилюля */
--lc-success-text:#23663e;
--lc-warning: #d4ad5e;
--lc-up: #59ba73; /* Δ рост */
--lc-down: #d1665c; /* Δ падение */
/* Линии на тёмном */
--lc-line: rgba(238, 236, 231, .12);
/* Геометрия (схема A: кнопки 3px, карточки 4px, контейнер таблицы 10px) */
--lc-radius: 4px;
--lc-radius-sm: 3px;
--lc-radius-lg: 10px;
--lc-shadow: 0 4px 14px rgba(0, 0, 0, .30);
--lc-shadow-lg: 0 12px 34px rgba(0, 0, 0, .45);
/* Разрядка заглавных меток */
--lc-track: .08em;
/* Шрифты (грузятся в ):
--lc-font-hero — Playfair Display: винтажный высококонтрастный сериф ТОЛЬКО
для плакатных заголовков (hero/афиша). Поддерживает кириллицу.
--lc-font-display — Inter: обычные заголовки, шапки таблиц, карточки.
--lc-font-body — Inter: текст, UI, кнопки. */
--lc-font-hero: "Playfair Display", serif;
--lc-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--lc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* ---- Переопределение токенов Bootstrap 5 (схема A) ---- */
--bs-primary: #9f532d;
--bs-primary-rgb: 159, 83, 45;
--bs-link-color: #d4ad5e;
--bs-link-color-rgb: 212, 173, 94;
--bs-link-hover-color: #e2c182;
--bs-body-bg: #163124;
--bs-body-color: #eeece7;
--bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-emphasis-color: #ffffff;
--bs-secondary-color: rgba(238, 236, 231, .72);
--bs-border-color: rgba(238, 236, 231, .12);
--bs-heading-color: #eeece7;
--bs-danger: #EF4444; --bs-danger-rgb: 239, 68, 68;
--bs-success: #2f7d4f; --bs-success-rgb: 47, 125, 79;
--bs-warning: #d4ad5e; --bs-warning-rgb: 212, 173, 94;
}
/* ---------- 2. База ---------- */
body {
background-color: var(--lc-green-2);
color: var(--lc-cream);
font-family: var(--lc-font-body);
letter-spacing: normal; /* как в макете (без доп. трекинга) */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--lc-font-hero); /* Playfair на всех заголовках (как в прототипе) */
color: var(--lc-cream);
font-weight: 700;
}
/* Hero/заголовок-плакат — крупный кремовый, Playfair Display (винтаж-афиша). */
.h-lc,
.display-lc {
font-family: var(--lc-font-hero);
font-weight: 700;
letter-spacing: 0; /* у Playfair отрицательный трекинг не нужен */
color: var(--lc-cream);
line-height: 1.15;
text-transform: none;
}
.display-lc { font-size: clamp(1.7rem, 5.5vw, 2.5rem); }
.h-lc { font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
/* На кремовых блоках заголовок снова тёмно-зелёный */
.bg-lc-cream .h-lc,
.bg-lc-cream .display-lc,
.bg-lc-panel .h-lc,
.bg-lc-panel .display-lc { color: var(--lc-ink); }
a { color: var(--lc-gold); text-decoration: none; }
a:hover { color: var(--lc-gold-200); text-decoration: underline; }
/* Единое видимое фокус-кольцо для кастомных интерактивов (клавиатура).
Bootstrap-кнопки/ссылки имеют свой фокус; здесь — элементы без него. */
.lc-tabbar__item:focus-visible,
.lc-clock__panel:focus-visible,
.lc-clock__ctrl:focus-visible,
.lc-day:focus-visible,
.lc-week__chip:focus-visible,
.lc-grid__chip:focus-visible,
.lc-segmented .btn:focus-visible,
.lc-month__cell:focus-visible,
.lc-privacy-corner__link:focus-visible,
.lc-live-pairs-summary:focus-visible {
outline: 2px solid var(--lc-gold);
outline-offset: 2px;
border-radius: var(--lc-radius-sm);
}
/* Иконки Phosphor (icon-font): мягкое выравнивание по тексту в строках. */
.ph { vertical-align: -0.125em; line-height: 1; }
.text-secondary { color: var(--lc-cream-soft) !important; }
.text-muted { color: var(--lc-cream-soft) !important; }
hr { border-color: var(--lc-line); opacity: 1; }
/* ---------- 3. Фоновые утилиты ---------- */
.bg-lc-green { background-color: var(--lc-green) !important; color: var(--lc-cream); }
.bg-lc-cream { background-color: var(--lc-cream) !important; color: var(--lc-ink); }
.bg-lc-panel { background-color: var(--lc-green) !important; color: var(--lc-cream); }
.bg-lc-wine { background-color: var(--lc-wine) !important; color: var(--lc-cream); }
.text-lc-green { color: var(--lc-ink) !important; }
.text-lc-wine { color: var(--lc-wine) !important; }
.text-lc-gold { color: var(--lc-gold) !important; }
.text-lc-cream { color: var(--lc-cream) !important; }
/* Декоративная полоса — тонкая золотая черта под шапкой (вместо клетки). */
.lc-checker {
background-color: var(--lc-gold);
background-image: none;
}
.lc-checker-strip { height: 3px; opacity: .5; }
/* Текст пустого состояния — на сплошном чипе для читаемости. */
.lc-empty-chip {
display: inline-block;
background: var(--lc-green);
color: var(--lc-cream);
padding: .65rem 1.1rem;
border-radius: var(--lc-radius);
box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
margin: 0;
}
/* ---------- 4. Навбар (шапка desktop: тёмно-зелёный + золотая активная) ---------- */
/* Шапка H: фон тёмно-зелёный «глубокий», высота ~62px (mobile). */
.navbar.navbar-lc {
/* Верхняя шапка (слой с логотипом) — чёрная (TASK-8). */
background-color: #000 !important;
border-bottom: 1px solid var(--lc-green-700);
box-shadow: var(--lc-shadow);
min-height: 62px;
padding-top: 0;
padding-bottom: 0;
/* Шапка остаётся над мобильной шторкой и её бэкдропом (drawer z-index 1210):
лого и бургер видны и кликабельны, шторка выезжает под чертой шапки. */
position: relative;
z-index: 1220;
}
.navbar-lc .navbar-brand { padding-top: .25rem; padding-bottom: .25rem; margin-right: .75rem; }
/* Бренд: единый логотип-локап «lovechess» (белые глифы на тёмной шапке). */
.navbar-lc .lc-brand-text {
color: var(--lc-cream);
display: inline-flex;
align-items: center;
}
.navbar-lc .lc-brand-logo {
height: 40px;
width: auto;
display: block;
}
@media (max-width: 575.98px) {
/* Mobile-фрейм: логотип крупнее под высоту шапки 62px. */
.navbar-lc .lc-brand-logo { height: 46px; }
}
/* Desktop (≥992px): шапка выше и «представительнее» — крупнее логотип,
больше воздуха по вертикали. На мобиле/планшете остаётся компактные 62px. */
@media (min-width: 992px) {
.navbar.navbar-lc { min-height: 84px; }
.navbar-lc .lc-brand-logo { height: 56px; }
.navbar-lc .navbar-brand { padding-top: .4rem; padding-bottom: .4rem; }
/* Пункты меню крупнее под высокую шапку. */
.navbar-lc .nav-link {
font-size: 1.0625rem; /* 17px */
padding-top: .85rem;
padding-bottom: .85rem;
}
/* Селект города в шапке — выше и крупнее, в ритме с пунктами и кнопкой. */
.navbar-lc .lc-city-menu .lc-city-select {
min-height: 44px;
font-size: 1rem; /* 16px */
padding-right: 34px;
}
}
.navbar-lc .nav-link {
color: var(--lc-cream-soft);
font-weight: 500;
letter-spacing: .01em;
padding-top: .6rem; padding-bottom: .6rem;
}
.navbar-lc .nav-link:hover,
.navbar-lc .nav-link:focus { color: var(--lc-cream); }
.navbar-lc .nav-link.active { color: var(--lc-gold); font-weight: 600; }
.navbar-lc .navbar-toggler {
border-color: rgba(242, 233, 216, .30);
padding: .5rem .7rem;
}
.navbar-lc .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F2E9D8' stroke-linecap='round' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Кнопка «Войти»/«Выйти» в шапке: по макету H — 37px, Inter Bold 14, r3,
вертикально по центру 62-пиксельной шапки. На desktop (где она в шапке)
снимаем тач-минимум 44px, чтобы кнопка не «вываливалась» под золотую черту
и не висел лишний воздух снизу. В мобильном меню (бургер) — полноразмерная. */
@media (min-width: 992px) {
.navbar-lc .navbar-nav .btn-on-green {
min-height: 44px;
padding: .6rem 1.5rem;
font-size: 1rem;
line-height: 1.2;
}
}
/* ---------- 5. Кнопки (CTA — бордо, ≥44px, mobile-first, r3) ---------- */
.btn { border-radius: var(--lc-radius-sm); font-weight: 600; letter-spacing: .005em; font-family: var(--lc-font-body); }
.btn-primary,
.btn-lc,
.btn-lg { min-height: 44px; }
/* Текст по центру кнопки по вертикали: при заданном min-height обычный
inline-block прижимает текст к верху и оставляет воздух снизу. */
.btn-primary,
.btn-lc,
.btn-lg,
.btn-outline-lc,
.btn-on-green,
.lc-hero__cta .btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary,
.btn-lc {
--bs-btn-color: var(--lc-cream);
--bs-btn-bg: var(--lc-wine);
--bs-btn-border-color: var(--lc-wine);
--bs-btn-hover-color: var(--lc-cream);
--bs-btn-hover-bg: var(--lc-wine-700);
--bs-btn-hover-border-color: var(--lc-wine-700);
--bs-btn-active-bg: var(--lc-wine-700);
--bs-btn-active-border-color: var(--lc-wine-700);
--bs-btn-disabled-bg: var(--lc-wine);
--bs-btn-disabled-border-color: var(--lc-wine);
--bs-btn-focus-shadow-rgb: 122, 34, 48;
}
/* Вторичная — золотой контур на тёмном */
.btn-outline-lc {
--bs-btn-color: var(--lc-gold);
--bs-btn-border-color: var(--lc-gold);
--bs-btn-hover-color: var(--lc-green);
--bs-btn-hover-bg: var(--lc-gold);
--bs-btn-hover-border-color: var(--lc-gold);
--bs-btn-active-bg: var(--lc-gold-200);
--bs-btn-active-border-color: var(--lc-gold-200);
--bs-btn-focus-shadow-rgb: 216, 177, 94;
border-radius: var(--lc-radius-sm);
font-weight: 600;
min-height: 44px;
}
/* «btn-on-green»: основное действие на КРЕМОВОЙ карточке — тёмно-зелёная заливка.
Используется также как светлая кнопка в шапке/навбаре. */
.btn-on-green {
--bs-btn-color: var(--lc-cream);
--bs-btn-bg: var(--lc-green);
--bs-btn-border-color: var(--lc-green);
--bs-btn-hover-color: var(--lc-cream);
--bs-btn-hover-bg: var(--lc-green-deep);
--bs-btn-hover-border-color: var(--lc-green-deep);
--bs-btn-active-bg: var(--lc-green-deep);
--bs-btn-active-border-color: var(--lc-green-deep);
border-radius: var(--lc-radius-sm);
font-weight: 600;
min-height: 44px;
}
/* В шапке кнопка «Войти» — бордовая (CTA), чтобы выделялась на тёмно-зелёном. */
.navbar-lc .btn-on-green {
--bs-btn-color: var(--lc-cream);
--bs-btn-bg: var(--lc-wine);
--bs-btn-border-color: var(--lc-wine);
--bs-btn-hover-color: var(--lc-cream);
--bs-btn-hover-bg: var(--lc-wine-700);
--bs-btn-hover-border-color: var(--lc-wine-700);
}
.btn-outline-secondary {
--bs-btn-color: var(--lc-cream);
--bs-btn-border-color: var(--lc-line);
--bs-btn-hover-color: var(--lc-green);
--bs-btn-hover-bg: var(--lc-cream);
--bs-btn-hover-border-color: var(--lc-cream);
}
/* ---------- 6. Карточки (схема A: КРЕМОВЫЕ, r4) ---------- */
.card {
--bs-card-bg: var(--lc-cream);
--bs-card-color: var(--lc-ink);
--bs-card-border-color: transparent;
--bs-card-border-radius: var(--lc-radius);
--bs-card-cap-bg: #e9dec8;
--bs-card-cap-color: var(--lc-ink);
color: var(--lc-ink);
box-shadow: var(--lc-shadow);
}
.card .card-title,
.card h1, .card h2, .card h3, .card h4, .card h5 { color: var(--lc-ink); }
.card .text-secondary, .card .text-muted { color: var(--lc-ink-soft) !important; }
.card a { color: var(--lc-wine); }
.card a:hover { color: var(--lc-wine-700); }
/* Кнопка-ссылка () внутри кремовой карточки должна сохранять
свой цвет текста кнопки, а не превращаться в бордовую ссылку — иначе «Управление»
(кремовый текст на бордовом btn-primary) сливается с фоном и не читается. */
.card a.btn,
.card a.btn:hover { color: var(--bs-btn-color); }
.card hr { border-color: rgba(31, 59, 46, .15); }
.card-lc-feature { /* карточка турнира/события (кремовая) */
border: 1px solid rgba(31, 59, 46, .08);
border-radius: 12px; /* макет «I desktop»: r12 */
background: var(--lc-cream);
color: var(--lc-ink);
box-shadow: var(--lc-shadow);
transition: box-shadow .15s ease, transform .15s ease;
}
/* Паддинг тела карточки и вертикальный ритм по макету (паддинг 20, зазор 10). */
.card-lc-feature .card-body { padding: 20px; }
/* Декоративный hover-подъём — только на устройствах с настоящим ховером
(мышь). На тач-экранах он «залипал» бы после тапа. */
@media (hover: hover) {
.card-lc-feature:hover { box-shadow: var(--lc-shadow-lg); transform: translateY(-2px); }
}
.card-lc-feature:active { box-shadow: var(--lc-shadow-lg); }
/* Курсор-рука на кликабельных элементах (карточки-ссылки, дни календаря, строки-сущности) */
[role="link"],
.lc-grid__chip,
.lc-day,
.lc-week__chip,
.lc-row-click {
cursor: pointer;
}
.card-lc-feature .card-title {
color: var(--lc-ink);
font-family: var(--lc-font-hero); /* название карточки турнира — Playfair */
font-weight: 700;
font-size: calc(1.1rem + 1px); /* макет 17.6px + 1px */
letter-spacing: normal; /* макет: без трекинга */
text-transform: none;
}
/* Формы/контролы внутри кремовой карточки — читаемые тёмные поля */
.card-lc-feature .form-control,
.card-lc-feature .form-select,
.card .form-control,
.card .form-select {
background-color: #fff;
color: var(--lc-ink);
border-color: rgba(31, 59, 46, .22);
}
.card-lc-feature .form-control::placeholder,
.card .form-control::placeholder { color: rgba(31, 59, 46, .45); }
.card-lc-feature .form-control:focus,
.card-lc-feature .form-select:focus,
.card .form-control:focus,
.card .form-select:focus {
background-color: #fff;
color: var(--lc-ink);
border-color: var(--lc-gold-line);
box-shadow: 0 0 0 .2rem rgba(216, 177, 94, .25);
}
.card-lc-feature .form-label,
.card .form-label,
.card-lc-feature .form-check-label,
.card .form-check-label { color: var(--lc-ink); }
.card-lc-feature .form-text,
.card .form-text { color: var(--lc-ink-soft); }
.card-lc-feature .form-select,
.card .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f3b2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.card-lc-feature .form-check-input,
.card .form-check-input { background-color: #fff; border-color: rgba(31, 59, 46, .35); }
.card-lc-feature .form-check-input:checked,
.card .form-check-input:checked { background-color: var(--lc-wine); border-color: var(--lc-wine); }
.card-lc-feature .input-group-text,
.card .input-group-text { background-color: #e9dec8; color: var(--lc-ink); border-color: rgba(31, 59, 46, .22); }
/* ---------- 7. Таблицы (контейнер тёмный, схема A) ---------- */
.table {
--bs-table-color: var(--lc-cream);
--bs-table-bg: var(--lc-green);
--bs-table-border-color: var(--lc-line);
--bs-table-striped-color: var(--lc-cream);
--bs-table-striped-bg: var(--lc-green-deep);
--bs-table-hover-color: var(--lc-cream);
--bs-table-hover-bg: rgba(216, 177, 94, .10);
color: var(--lc-cream);
}
.table > thead {
background-color: var(--lc-green-deep);
color: var(--lc-gold);
}
.table > thead th {
font-family: var(--lc-font-display);
text-transform: uppercase;
letter-spacing: .06em;
font-size: .72rem;
font-weight: 700;
color: var(--lc-gold);
border-bottom: 1px solid var(--lc-line);
white-space: nowrap;
background-color: var(--lc-green-deep);
}
.table > tbody > tr > td { vertical-align: middle; border-color: var(--lc-line); }
.table-lc-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--lc-radius-lg);
border: 1px solid var(--lc-line);
background: var(--lc-green-deep);
}
.table-lc-scroll > .table { margin-bottom: 0; min-width: 540px; background: transparent; }
@media (max-width: 575.98px) {
.table-lc-scroll > .table { min-width: 480px; }
}
/* Узкие таблицы (лидерборд: #, игрок, рейтинг) помещаются на 360px —
снимаем общий min-width, чтобы не было горизонтального скролла на мобиле. */
.table-lc-scroll.table-lc-fit > .table { min-width: 0; }
.table-lc-scroll.table-lc-fit .lc-place { padding-right: .25rem; }
/* Рамка панели таблицы 1:1 с Figma-плагином (.v58_570): фон #11201a,
внутренний отступ 10px, скругл. 8px на всех углах, без рамки. */
.table-lc-scroll.table-lc-fit {
padding: 10px;
border: 0;
border-radius: 8px;
background: #11201a;
}
/* Таблицы внутри кремовых карточек — светлые */
.card .table {
--bs-table-color: var(--lc-ink);
--bs-table-bg: transparent;
--bs-table-border-color: rgba(31, 59, 46, .12);
--bs-table-striped-color: var(--lc-ink);
--bs-table-striped-bg: rgba(31, 59, 46, .04);
--bs-table-hover-color: var(--lc-ink);
--bs-table-hover-bg: rgba(31, 59, 46, .06);
color: var(--lc-ink);
}
.card .table > thead,
.card .table > thead th { background-color: transparent; color: var(--lc-ink-soft); }
.card .table-lc-scroll { background: transparent; border-color: rgba(31, 59, 46, .12); }
/* ---------- 8. Бейджи ---------- */
.badge { font-weight: 600; letter-spacing: .03em; border-radius: var(--lc-radius-sm); }
.badge.text-bg-primary { background-color: var(--lc-wine) !important; color: var(--lc-cream) !important; }
.badge-lc-green { background-color: rgba(47, 125, 79, .16); color: var(--lc-success-text); border: 1px solid rgba(47, 125, 79, .4); }
.badge-lc-wine { background-color: var(--lc-wine); color: var(--lc-cream); }
.badge-lc-gold { background-color: var(--lc-gold); color: var(--lc-green); }
.badge-lc-soft { background-color: rgba(216, 177, 94, .16); color: var(--lc-gold); border: 1px solid rgba(216, 177, 94, .4); }
/* Статусные бейджи турнира */
.badge-lc-live { background-color: var(--lc-wine); color: var(--lc-cream); }
.badge-lc-done { background-color: rgba(47, 125, 79, .18); color: var(--lc-success-text); border: 1px solid rgba(47, 125, 79, .4); }
.badge-lc-soon { background-color: var(--lc-gold); color: var(--lc-green); }
/* Пилюля статуса «● Открыта» на кремовой карточке */
.lc-status-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .6rem;
border-radius: 12px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .02em;
background: rgba(47, 125, 79, .16);
color: var(--lc-success-text);
white-space: nowrap;
}
.lc-status-pill::before { content: "●"; font-size: .7em; color: var(--lc-success); }
/* Бейдж города (hero) — обводка золото, текст золото, uppercase */
.lc-city-badge {
display: inline-flex;
align-items: center;
padding: .3rem .65rem;
border: 1px solid var(--lc-gold-line);
border-radius: 2px;
color: var(--lc-gold);
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
}
/* ---------- 9. Формы (тёмные поля на тёмном фоне страницы) ---------- */
.form-control, .form-select {
border-color: rgba(242, 233, 216, .20);
border-radius: var(--lc-radius);
background-color: var(--lc-green);
color: var(--lc-cream);
min-height: 44px;
}
.form-control::placeholder { color: rgba(242, 233, 216, .45); }
.form-control:focus, .form-select:focus {
border-color: var(--lc-gold);
background-color: var(--lc-green);
color: var(--lc-cream);
box-shadow: 0 0 0 .2rem rgba(216, 177, 94, .22);
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F2E9D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-label { font-weight: 600; color: var(--lc-cream); font-family: var(--lc-font-body); }
.form-text { color: var(--lc-cream-soft); }
.form-check-input { background-color: var(--lc-green); border-color: var(--lc-line); }
.form-check-input:checked { background-color: var(--lc-wine); border-color: var(--lc-wine); }
.input-group-text { background-color: var(--lc-green); color: var(--lc-cream); border-color: var(--lc-line); }
/* ---------- 9b. Вкладки-пилюли ---------- */
.nav-pills:not(.navbar-nav) {
--bs-nav-pills-link-active-bg: var(--lc-gold);
--bs-nav-pills-link-active-color: var(--lc-green);
--bs-nav-pills-border-radius: var(--lc-radius);
}
.nav-pills:not(.navbar-nav) .nav-link {
color: var(--lc-cream);
font-weight: 600;
min-height: 44px;
display: inline-flex;
align-items: center;
border: 1px solid var(--lc-line);
}
.nav-pills:not(.navbar-nav) .nav-link:hover,
.nav-pills:not(.navbar-nav) .nav-link:focus {
background-color: var(--lc-green);
border-color: var(--lc-line);
}
.nav-pills:not(.navbar-nav) .nav-link.active {
background-color: var(--lc-gold);
color: var(--lc-green);
border-color: var(--lc-gold);
}
/* Lifecycle-вкладки на тулбаре (макет «I desktop»): плоские сегменты,
зазор 6, радиус 8, активная — бордо, неактивные — прозрачные. */
#lifecycle-tabs.nav-pills { gap: 6px; }
#lifecycle-tabs.nav-pills .nav-link {
border: none;
border-radius: 8px;
padding: 10px 18px;
min-height: 44px;
font-size: 15px;
font-weight: 600;
color: var(--lc-cream-200);
background-color: transparent;
}
#lifecycle-tabs.nav-pills .nav-link:hover,
#lifecycle-tabs.nav-pills .nav-link:focus {
background-color: rgba(242, 233, 216, .08);
color: var(--lc-cream);
border: none;
}
#lifecycle-tabs.nav-pills .nav-link.active {
background-color: var(--lc-wine);
color: var(--lc-cream);
font-weight: 700;
border: none;
}
/* ---------- 10. Прочее ---------- */
.modal-content { background-color: var(--lc-cream); color: var(--lc-ink); border: 1px solid rgba(31, 59, 46, .12); }
.modal-content .form-control, .modal-content .form-select {
background-color: #fff; color: var(--lc-ink); border-color: rgba(31, 59, 46, .22);
}
.modal-content .form-control::placeholder { color: rgba(31, 59, 46, .45); }
.modal-content .form-control:focus, .modal-content .form-select:focus {
border-color: var(--lc-gold-line); box-shadow: 0 0 0 .2rem rgba(216, 177, 94, .25);
}
.modal-content .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f3b2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.modal-content .form-label, .modal-content .form-check-label,
.modal-content h1, .modal-content h2,
.modal-content h3, .modal-content h4, .modal-content h5 { color: var(--lc-ink); }
.modal-content { color: var(--lc-ink); }
.modal-content .form-text, .modal-content .text-secondary, .modal-content .text-muted { color: var(--lc-ink-soft) !important; }
.modal-content .form-check-input { background-color: #fff; border-color: rgba(31, 59, 46, .35); }
.modal-content .form-check-input:checked { background-color: var(--lc-wine); border-color: var(--lc-wine); }
.modal-content .input-group-text { background-color: #e9dec8; color: var(--lc-ink); border-color: rgba(31, 59, 46, .22); }
.modal-header, .modal-footer { border-color: rgba(31, 59, 46, .12); }
.btn-close { filter: none; }
.dropdown-menu {
--bs-dropdown-bg: var(--lc-cream);
--bs-dropdown-color: var(--lc-ink);
--bs-dropdown-border-color: rgba(31, 59, 46, .12);
--bs-dropdown-link-color: var(--lc-ink);
--bs-dropdown-link-hover-bg: #e9dec8;
--bs-dropdown-link-hover-color: var(--lc-ink);
--bs-dropdown-link-active-bg: var(--lc-gold);
--bs-dropdown-link-active-color: var(--lc-green);
}
.list-group {
--bs-list-group-bg: var(--lc-cream);
--bs-list-group-color: var(--lc-ink);
--bs-list-group-border-color: rgba(31, 59, 46, .12);
--bs-list-group-action-color: var(--lc-ink);
--bs-list-group-action-hover-bg: #e9dec8;
--bs-list-group-action-hover-color: var(--lc-ink);
}
.alert-success { --bs-alert-color: #d6f5ea; --bs-alert-bg: rgba(47, 125, 79, .20); --bs-alert-border-color: var(--lc-success); }
.alert-danger { --bs-alert-color: #ffd9d9; --bs-alert-bg: rgba(239, 68, 68, .16); --bs-alert-border-color: var(--lc-danger); }
.footer-lc {
background-color: var(--lc-green);
color: var(--lc-cream-soft);
border-top: 1px solid var(--lc-line);
}
.footer-lc a { color: var(--lc-gold); }
code, kbd { color: var(--lc-gold); }
pre { color: var(--lc-cream); }
.table-lc-scroll::-webkit-scrollbar { height: 8px; }
.table-lc-scroll::-webkit-scrollbar-thumb { background: var(--lc-green); border-radius: 8px; }
/* ───────── M2: календарь / витрина / самозапись ───────── */
/* Полоса заполнения мест на карточке-анонсе (на кремовой карточке) */
.lc-seats {
height: 8px;
border-radius: 999px;
background: rgba(31, 59, 46, .12);
overflow: hidden;
}
.lc-seats__fill {
height: 100%;
background: var(--lc-wine);
border-radius: 999px;
transition: width .25s ease;
}
.lc-seats--full .lc-seats__fill { background: var(--lc-gold-line); }
/* Lifecycle-вкладки и переключатель вида — sticky под навбаром */
.lc-cal-sticky {
position: sticky;
top: 0;
z-index: 5;
background: var(--lc-green-2);
padding-top: .5rem;
padding-bottom: .5rem;
}
/* Панель фильтров одной строкой: вкладки слева, город + вид справа.
Макет «I desktop»: панель #16291f, радиус 12, паддинг 8, на всю ширину. */
.lc-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem;
padding: 0;
/* Без подсвеченной плашки — тулбар фильтров сливается с фоном страницы. */
background: transparent;
border: none;
border-radius: 0;
}
.lc-toolbar__right {
display: flex;
align-items: center;
gap: 10px;
}
.lc-toolbar .lc-chips { padding-bottom: 0; }
/* На узких экранах правый блок занимает всю ширину под вкладками */
@media (max-width: 575.98px) {
.lc-toolbar__right { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
/* Сегменты «Список/Календарь» уже, чтобы «Календарь» не вылезал за границу. */
.lc-segmented .btn { padding: 8px 12px; }
}
/* Сегмент-контрол «Список / Календарь» (макет «I desktop»):
тёмный контейнер #11211a, паддинг 4, радиус 8; сегменты радиус 6,
активный — бордо, неактивный — прозрачный. Тач ≥44px. */
.lc-segmented {
display: inline-flex;
gap: 0;
padding: 4px;
/* Тёмно-зелёная рамка вокруг самого тумблера «Список/Календарь».
(Внешний тулбар на всю ширину при этом остаётся прозрачным.) */
background: var(--lc-green-deep);
border-radius: 8px;
}
.lc-segmented .btn {
min-height: 36px;
border: none;
border-radius: 6px !important;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
}
.lc-segmented .btn.btn-outline-lc {
--bs-btn-color: var(--lc-muted-dark);
--bs-btn-border-color: transparent;
--bs-btn-bg: transparent;
--bs-btn-hover-color: var(--lc-cream);
--bs-btn-hover-bg: rgba(242, 233, 216, .06);
--bs-btn-hover-border-color: transparent;
min-height: 36px;
}
.lc-segmented .btn.btn-primary {
font-weight: 700;
color: var(--lc-cream);
}
/* Город — компактный селект-чип (макет «I desktop»):
прозрачный фон, рамка золото @50%, радиус 8, текст золото 15/600 + ▾. */
.lc-chips {
display: flex;
align-items: center;
}
.lc-city-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none; /* добиваем остатки нативной стрелки (Firefox) */
min-height: 44px;
padding: 0 18px 0 14px; /* справа чуть больше воздуха */
border-radius: 8px;
border: 1px solid rgba(196, 154, 69, .5);
background-color: transparent;
background-image: none;
color: var(--lc-gold);
font-size: 15px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.lc-city-select:focus {
outline: none;
border-color: var(--lc-gold);
box-shadow: 0 0 0 .2rem rgba(216, 177, 94, .22);
}
.lc-city-select option { color: var(--lc-ink); }
/* Селект города в МЕНЮ (TASK-3). Подпись «Город» + сам селект, на всю ширину
в мобильном раскрытом меню; на десктопе — компактно в ряд со ссылками. */
.lc-nav-city { width: 100%; }
.lc-city-menu {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
margin: .25rem 0;
}
.lc-city-menu__label {
font-size: 13px;
font-weight: 600;
color: var(--lc-cream-soft);
flex-shrink: 0;
}
.lc-city-menu .lc-city-select {
flex: 1 1 auto;
/* Стрелка-каретка (нативную мы погасили appearance:none) — чуть левее. */
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C49A45' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 12px 8px;
}
@media (min-width: 992px) {
.lc-nav-city { width: auto; margin-right: .75rem; }
.lc-city-menu { width: auto; margin: 0; }
.lc-city-menu .lc-city-select { flex: 0 0 auto; min-width: 160px; }
}
/* Плашка-подтверждение Гео-IP (TASK-4): «Похоже, вы из {город}?» — Да/Нет.
Снизу экрана на мобиле (над таб-баром), компактно по центру на десктопе. */
.lc-geo-confirm {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--lc-tabbar-h, 64px) + 12px);
z-index: 1080;
max-width: min(92vw, 480px);
width: max-content;
display: flex;
flex-direction: column;
gap: .5rem;
padding: 12px 14px;
border-radius: 12px;
background: var(--lc-green-2, #1d3327);
border: 1px solid rgba(196, 154, 69, .5);
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
color: var(--lc-cream);
}
.lc-geo-confirm__text { font-size: 14px; line-height: 1.35; }
.lc-geo-confirm__actions { display: flex; gap: .5rem; }
.lc-geo-confirm__actions .btn { min-height: 40px; flex: 1 1 auto; }
@media (min-width: 768px) {
.lc-geo-confirm { bottom: 20px; flex-direction: row; align-items: center; }
.lc-geo-confirm__actions { flex: 0 0 auto; }
.lc-geo-confirm__actions .btn { flex: 0 0 auto; }
}
/* Вид «Календарь»: одна неделя (7 колонок), сегодня — золотая рамка */
.lc-week-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lc-week-nav .btn { min-width: 44px; min-height: 44px; }
.lc-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: .5rem;
}
.lc-week__cell {
background: var(--lc-green);
border: 1px solid var(--lc-line);
border-radius: var(--lc-radius);
padding: .5rem;
min-height: 116px;
display: flex;
flex-direction: column;
gap: .4rem;
}
.lc-week__cell.is-today {
border-color: var(--lc-gold);
box-shadow: inset 0 0 0 1px var(--lc-gold);
}
.lc-week__head { display: flex; align-items: baseline; justify-content: space-between; }
.lc-week__wd { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lc-cream-soft); }
.lc-week__num { font-size: 1.1rem; font-weight: 700; color: var(--lc-cream); }
.lc-week__cell.is-today .lc-week__num { color: var(--lc-gold); }
.lc-week__items { display: flex; flex-direction: column; gap: .3rem; }
.lc-week__chip {
display: block; width: 100%; text-align: left;
background: var(--lc-cream); color: var(--lc-ink);
border: none; border-radius: var(--lc-radius-sm);
padding: .35rem .45rem; font-size: .78rem; line-height: 1.25;
}
.lc-week__time { font-weight: 700; color: var(--lc-wine); margin-right: .25rem; }
.lc-week__empty { color: var(--lc-cream-soft); opacity: .5; text-align: center; }
/* Мобайл: 7 дней не влезают — неделя скроллится по горизонтали */
@media (max-width: 575.98px) {
.lc-week {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 62vw;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Заголовок группы дат в агенде */
.lc-day-head {
text-transform: uppercase;
letter-spacing: .06em;
color: var(--lc-cream-soft);
font-size: .85rem;
font-weight: 600;
margin: 1.25rem 0 .6rem;
}
/* Скелетоны загрузки */
.lc-skeleton {
border-radius: var(--lc-radius);
background: linear-gradient(90deg, var(--lc-green) 25%, var(--lc-green-deep) 37%, var(--lc-green) 63%);
background-size: 400% 100%;
animation: lc-shimmer 1.3s ease-in-out infinite;
min-height: 150px;
}
@keyframes lc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* Лента дней месяца (телефон) */
.lc-month-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lc-month-nav .btn { min-width: 44px; min-height: 44px; }
.lc-daystrip {
display: flex;
gap: .4rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: .35rem;
scrollbar-width: none;
}
.lc-daystrip::-webkit-scrollbar { display: none; }
.lc-day {
flex: 0 0 auto;
width: 44px;
min-height: 56px;
border-radius: var(--lc-radius);
border: 1px solid var(--lc-line);
background: var(--lc-green);
color: var(--lc-cream);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
cursor: pointer;
}
.lc-day small { color: var(--lc-cream-soft); font-size: .68rem; }
.lc-day.is-selected { border-color: var(--lc-gold); background: var(--lc-green-deep); }
.lc-day .lc-dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--lc-wine);
font-size: .6rem; line-height: 1; color: var(--lc-cream); min-width: 6px; text-align: center;
}
.lc-day .lc-dot--count { width: auto; padding: 0 3px; border-radius: 999px; }
/* Сетка месяца (десктоп ≥768px) */
.lc-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.lc-grid__wd {
text-align: center;
color: var(--lc-cream-soft);
font-size: .8rem;
padding: .25rem 0;
}
.lc-grid__cell {
min-height: 96px;
border: 1px solid var(--lc-line);
border-radius: 8px;
background: var(--lc-green);
padding: .35rem;
display: flex;
flex-direction: column;
gap: 3px;
}
.lc-grid__cell.is-empty { background: transparent; border-color: transparent; }
.lc-grid__num { font-weight: 600; color: var(--lc-cream-soft); font-size: .85rem; }
.lc-grid__chip {
display: block;
background: rgba(122, 34, 48, .22);
color: var(--lc-cream);
border-left: 3px solid var(--lc-wine);
border-radius: 4px;
padding: 1px 5px;
font-size: .72rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
/* Кнопка записи на странице турнира — sticky-низ на телефоне */
.lc-reg-sticky {
position: sticky;
bottom: 0;
z-index: 6;
background: var(--lc-green-2);
padding: .65rem 0;
margin-top: 1rem;
border-top: 1px solid var(--lc-line);
}
.lc-reg-sticky .btn { min-height: 48px; }
/* Карточка заявки (организатор) — на кремовой карточке */
.lc-reg-card { border-left: 4px solid var(--lc-gold); }
.lc-reg-card.is-next { border-left-color: var(--lc-wine); box-shadow: var(--lc-shadow-lg); }
.lc-queue-num {
font-weight: 700;
font-size: 1.1rem;
color: var(--lc-gold-line);
min-width: 2.2rem;
}
.lc-reg-actions .btn { min-height: 44px; }
/* ---------- Угловая ссылка-политика + копирайт (только на главной) ---------- */
.lc-privacy-corner {
position: fixed;
right: max(.6rem, env(safe-area-inset-right));
bottom: max(.5rem, env(safe-area-inset-bottom));
z-index: 1030;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
line-height: 1.2;
text-align: right;
pointer-events: none; /* пропускаем клики мимо, кнопка ловит сама */
}
.lc-privacy-corner__copy {
font-size: .62rem;
color: rgba(242, 233, 216, .35);
letter-spacing: .02em;
}
.lc-privacy-corner__link {
pointer-events: auto;
background: none;
border: 0;
padding: 0;
font-size: .62rem;
color: rgba(242, 233, 216, .45);
text-decoration: underline;
cursor: pointer;
}
.lc-privacy-corner__link:hover { color: var(--lc-gold); }
/* На мобиле — не плавающий угол, а обычный блок ВСЕГДА под основным контентом
(в потоке, в конце body). Нижний отступ — чтобы не прятался за таб-навигацией. */
@media (max-width: 991.98px) {
.lc-privacy-corner {
position: static;
width: 100%;
align-items: center;
text-align: center;
margin: 1rem 0 calc(72px + env(safe-area-inset-bottom));
}
/* На экране таймера (body.clk-game) футер мешает игре — прячем его на мобиле. */
body.clk-game .lc-privacy-corner { display: none; }
}
/* ---------- Попап политики ---------- */
.lc-privacy-modal {
position: fixed;
inset: 0;
z-index: 1080;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(8, 16, 12, .66); /* затемнённый бэкдроп */
overflow-y: auto;
}
.lc-privacy-modal[hidden] { display: none; }
.lc-privacy-modal__dialog {
position: relative;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 2rem);
overflow-y: auto;
background: var(--lc-cream);
color: var(--lc-ink);
border-radius: var(--lc-radius-lg);
box-shadow: var(--lc-shadow-lg);
padding: 1.5rem 1.25rem;
}
.lc-privacy-modal__dialog h2,
.lc-privacy-modal__dialog h3 { color: var(--lc-ink); }
.lc-privacy-modal__body { color: var(--lc-ink); }
/* Длинная ссылка-контакт не должна упираться в край модалки на узких экранах. */
.lc-privacy-modal__body a { overflow-wrap: anywhere; }
.lc-privacy-modal__close {
position: absolute;
top: .5rem;
right: .5rem;
width: 44px;
height: 44px;
border: 0;
background: none;
font-size: 1.6rem;
line-height: 1;
color: var(--lc-ink-soft);
cursor: pointer;
}
.lc-privacy-modal__close:hover { color: var(--lc-wine); }