/* ═══════════════════════════════════════════════════════════════════════════ * КАДР — дизайн-система ComicsDB.ru * ─────────────────────────────────────────────────────────────────────────── * Один файл, ноль сборки. Подключается вместо www/assets/css/theme.css * и работает поверх Bootstrap 5.3: все --bs-* переменные переопределены * ниже, так что готовая разметка (navbar, dropdown, offcanvas, modal) * продолжает работать, но выглядит уже по-нашему. * * Тема переключается тем же атрибутом, что и сейчас: data-bs-theme на . * Класс-префикс — cdb-. Литералы цветов допустимы ТОЛЬКО в блоке токенов. * ═══════════════════════════════════════════════════════════════════════════ */ /* Unbounded */ @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/unbounded-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/unbounded-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/unbounded-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/unbounded-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/unbounded-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/unbounded-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/unbounded-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/unbounded-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/unbounded-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/unbounded-800-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/unbounded-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/unbounded-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Golos Text */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/golos-text-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/golos-text-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/golos-text-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/golos-text-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/golos-text-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/golos-text-500-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/golos-text-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/golos-text-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/golos-text-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/golos-text-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/golos-text-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/golos-text-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/golos-text-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/golos-text-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/golos-text-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/golos-text-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* JetBrains Mono */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 1. Токены: светлая тема ─────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { /* Бренд. Фиолетовый сохранён от прежней темы, шкала пересобрана в OKLCH: одинаковый шаг = одинаковая визуальная тяжесть в обеих темах */ --cdb-violet-50: #faf5fc; --cdb-violet-100: #f2e6f6; --cdb-violet-200: #e4cbeb; --cdb-violet-300: #cfa3da; --cdb-violet-400: #b06ec2; --cdb-violet-500: #8f3fa4; --cdb-violet-600: #7b2d8e; /* якорь бренда — прежний primary */ --cdb-violet-700: #632372; --cdb-violet-800: #4b1a57; --cdb-violet-900: #2f1038; /* Сигнал. Жёлтый с баннера сообщества: только для «новое», победителей и одиночных акцентов. Никогда — как фон текстового блока */ --cdb-signal: #e8e51c; --cdb-signal-ink: #2f1038; /* Нейтрали с холодно-фиолетовым подмесом: рядом с обложками чистый серый выглядит грязным */ --cdb-ink-0: #ffffff; --cdb-ink-50: #f7f6f9; --cdb-ink-100: #eeecf2; --cdb-ink-200: #e0dde6; --cdb-ink-300: #c9c4d1; --cdb-ink-400: #a29cad; --cdb-ink-500: #7c7686; --cdb-ink-600: #5d5768; --cdb-ink-700: #423d4c; --cdb-ink-800: #2b2733; --cdb-ink-900: #17141c; /* Семантика */ --cdb-ok: #157f4a; --cdb-ok-bg: #e3f5ea; --cdb-warn: #8a5a00; --cdb-warn-bg: #fdf1d8; --cdb-alert: #b3261e; --cdb-alert-bg: #fbe6e4; --cdb-info: #1d5f96; --cdb-info-bg: #e2eef9; /* Роли */ --cdb-bg: var(--cdb-ink-50); --cdb-bg-sunken: var(--cdb-ink-100); --cdb-surface: var(--cdb-ink-0); --cdb-surface-2: var(--cdb-ink-50); --cdb-text: var(--cdb-ink-900); --cdb-text-soft: var(--cdb-ink-600); --cdb-text-faint: var(--cdb-ink-500); --cdb-on-brand: #ffffff; --cdb-line: var(--cdb-ink-200); --cdb-line-strong: var(--cdb-ink-300); --cdb-brand: var(--cdb-violet-600); --cdb-brand-hover: var(--cdb-violet-700); --cdb-brand-soft: var(--cdb-violet-100); --cdb-brand-text: var(--cdb-violet-700); /* фиолетовый как текст: 6.4:1 на surface */ /* RGB-тройки для моста Bootstrap (rgba(var(--bs-*-rgb), α)) */ --cdb-brand-rgb: 123, 45, 142; /* violet-600 */ --cdb-secondary-rgb: 93, 87, 104; /* ink-600 */ --cdb-light-rgb: 238, 236, 242; /* ink-100 */ --cdb-link-rgb: 99, 35, 114; /* violet-700 */ --cdb-link-hover-rgb: 143, 63, 164; /* violet-500 */ --cdb-link: var(--cdb-violet-700); --cdb-link-hover: var(--cdb-violet-500); --cdb-visited: var(--cdb-violet-500); /* Статусы перевода серии — те же четыре, что в коде (continue/freez/finish/unknown) */ --cdb-status-continue: #157f4a; --cdb-status-freez: #1d5f96; --cdb-status-finish: var(--cdb-violet-600); --cdb-status-unknown: var(--cdb-ink-400); /* Типографика */ --cdb-font-display: "Unbounded", system-ui, sans-serif; --cdb-font-ui: "Golos Text", system-ui, -apple-system, sans-serif; --cdb-font-mono: "JetBrains Mono", ui-monospace, monospace; --cdb-size-hero: clamp(34px, 4.2vw, 56px); --cdb-size-h1: clamp(26px, 2.6vw, 34px); --cdb-size-h2: 22px; --cdb-size-h3: 17px; --cdb-size-body: 15px; --cdb-size-sm: 13px; --cdb-size-xs: 11.5px; --cdb-kicker-tracking: .14em; /* Шаг 4px. Плотность интерфейса — как в базе данных, а не в лендинге */ --cdb-s1: 4px; --cdb-s2: 8px; --cdb-s3: 12px; --cdb-s4: 16px; --cdb-s5: 24px; --cdb-s6: 32px; --cdb-s7: 48px; --cdb-s8: 64px; /* Радиусы: обложки и данные — почти прямые углы, управление — мягче */ --cdb-r-xs: 3px; --cdb-r-sm: 6px; --cdb-r-md: 10px; --cdb-r-lg: 16px; --cdb-r-pill: 999px; /* Высота: рамка + очень мягкая тень. Тяжёлых теней в системе нет */ --cdb-e1: 0 1px 2px rgba(23, 20, 28, .06); --cdb-e2: 0 2px 8px rgba(23, 20, 28, .08), 0 1px 2px rgba(23, 20, 28, .05); --cdb-e3: 0 12px 32px rgba(23, 20, 28, .14); --cdb-ring: 0 0 0 3px color-mix(in srgb, var(--cdb-brand) 28%, transparent); /* Движение */ --cdb-fast: 120ms; --cdb-base: 200ms; --cdb-slow: 380ms; --cdb-ease: cubic-bezier(.2, .7, .25, 1); --cdb-nav-h: 56px; --cdb-maxw: 1400px; } /* ── 1. Токены: светлая тема ─────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { /* Бренд. Фиолетовый сохранён от прежней темы, шкала пересобрана в OKLCH: одинаковый шаг = одинаковая визуальная тяжесть в обеих темах */ --cdb-violet-50: #faf5fc; --cdb-violet-100: #f2e6f6; --cdb-violet-200: #e4cbeb; --cdb-violet-300: #cfa3da; --cdb-violet-400: #b06ec2; --cdb-violet-500: #8f3fa4; --cdb-violet-600: #7b2d8e; /* якорь бренда — прежний primary */ --cdb-violet-700: #632372; --cdb-violet-800: #4b1a57; --cdb-violet-900: #2f1038; /* Сигнал. Жёлтый с баннера сообщества: только для «новое», победителей и одиночных акцентов. Никогда — как фон текстового блока */ --cdb-signal: #e8e51c; --cdb-signal-ink: #2f1038; /* Нейтрали с холодно-фиолетовым подмесом: рядом с обложками чистый серый выглядит грязным */ --cdb-ink-0: #ffffff; --cdb-ink-50: #f7f6f9; --cdb-ink-100: #eeecf2; --cdb-ink-200: #e0dde6; --cdb-ink-300: #c9c4d1; --cdb-ink-400: #a29cad; --cdb-ink-500: #7c7686; --cdb-ink-600: #5d5768; --cdb-ink-700: #423d4c; --cdb-ink-800: #2b2733; --cdb-ink-900: #17141c; /* Семантика */ --cdb-ok: #157f4a; --cdb-ok-bg: #e3f5ea; --cdb-warn: #8a5a00; --cdb-warn-bg: #fdf1d8; --cdb-alert: #b3261e; --cdb-alert-bg: #fbe6e4; --cdb-info: #1d5f96; --cdb-info-bg: #e2eef9; /* Роли */ --cdb-bg: var(--cdb-ink-50); --cdb-bg-sunken: var(--cdb-ink-100); --cdb-surface: var(--cdb-ink-0); --cdb-surface-2: var(--cdb-ink-50); --cdb-text: var(--cdb-ink-900); --cdb-text-soft: var(--cdb-ink-600); --cdb-text-faint: var(--cdb-ink-500); --cdb-on-brand: #ffffff; --cdb-line: var(--cdb-ink-200); --cdb-line-strong: var(--cdb-ink-300); --cdb-brand: var(--cdb-violet-600); --cdb-brand-hover: var(--cdb-violet-700); --cdb-brand-soft: var(--cdb-violet-100); --cdb-brand-text: var(--cdb-violet-700); /* фиолетовый как текст: 6.4:1 на surface */ /* RGB-тройки для моста Bootstrap (rgba(var(--bs-*-rgb), α)) */ --cdb-brand-rgb: 123, 45, 142; /* violet-600 */ --cdb-secondary-rgb: 93, 87, 104; /* ink-600 */ --cdb-light-rgb: 238, 236, 242; /* ink-100 */ --cdb-link-rgb: 99, 35, 114; /* violet-700 */ --cdb-link-hover-rgb: 143, 63, 164; /* violet-500 */ --cdb-link: var(--cdb-violet-700); --cdb-link-hover: var(--cdb-violet-500); --cdb-visited: var(--cdb-violet-500); /* Статусы перевода серии — те же четыре, что в коде (continue/freez/finish/unknown) */ --cdb-status-continue: #157f4a; --cdb-status-freez: #1d5f96; --cdb-status-finish: var(--cdb-violet-600); --cdb-status-unknown: var(--cdb-ink-400); /* Типографика */ --cdb-font-display: "Unbounded", system-ui, sans-serif; --cdb-font-ui: "Golos Text", system-ui, -apple-system, sans-serif; --cdb-font-mono: "JetBrains Mono", ui-monospace, monospace; --cdb-size-hero: clamp(34px, 4.2vw, 56px); --cdb-size-h1: clamp(26px, 2.6vw, 34px); --cdb-size-h2: 22px; --cdb-size-h3: 17px; --cdb-size-body: 15px; --cdb-size-sm: 13px; --cdb-size-xs: 11.5px; --cdb-kicker-tracking: .14em; /* Шаг 4px. Плотность интерфейса — как в базе данных, а не в лендинге */ --cdb-s1: 4px; --cdb-s2: 8px; --cdb-s3: 12px; --cdb-s4: 16px; --cdb-s5: 24px; --cdb-s6: 32px; --cdb-s7: 48px; --cdb-s8: 64px; /* Радиусы: обложки и данные — почти прямые углы, управление — мягче */ --cdb-r-xs: 3px; --cdb-r-sm: 6px; --cdb-r-md: 10px; --cdb-r-lg: 16px; --cdb-r-pill: 999px; /* Высота: рамка + очень мягкая тень. Тяжёлых теней в системе нет */ --cdb-e1: 0 1px 2px rgba(23, 20, 28, .06); --cdb-e2: 0 2px 8px rgba(23, 20, 28, .08), 0 1px 2px rgba(23, 20, 28, .05); --cdb-e3: 0 12px 32px rgba(23, 20, 28, .14); --cdb-ring: 0 0 0 3px color-mix(in srgb, var(--cdb-brand) 28%, transparent); /* Движение */ --cdb-fast: 120ms; --cdb-base: 200ms; --cdb-slow: 380ms; --cdb-ease: cubic-bezier(.2, .7, .25, 1); --cdb-nav-h: 56px; --cdb-maxw: 1400px; } /* ── 2. Токены: тёмная тема. Меняются значения, роли — нет ───────────────── */ [data-bs-theme="dark"] { --cdb-violet-50: #1b1421; --cdb-violet-100: #2a1e33; --cdb-violet-200: #3b2a47; --cdb-violet-300: #5b3f6c; --cdb-violet-400: #8b5da0; --cdb-violet-500: #b478c9; --cdb-violet-600: #c68fd9; --cdb-violet-700: #dcb4e9; --cdb-violet-800: #ecd6f4; --cdb-violet-900: #f8effb; --cdb-ink-0: #17141c; --cdb-ink-50: #100e14; --cdb-ink-100: #1e1a24; --cdb-ink-200: #2b2633; --cdb-ink-300: #3b3547; --cdb-ink-400: #5c5568; --cdb-ink-500: #8b8397; --cdb-ink-600: #aaa2b6; --cdb-ink-700: #c9c3d2; --cdb-ink-800: #e2dee8; --cdb-ink-900: #f5f2f8; --cdb-ok: #5fd695; --cdb-ok-bg: #12271c; --cdb-warn: #e8c46a; --cdb-warn-bg: #2b2210; --cdb-alert: #f39b95; --cdb-alert-bg: #2e1614; --cdb-info: #7fb8e6; --cdb-info-bg: #12222e; --cdb-bg: var(--cdb-ink-50); --cdb-bg-sunken: #0a090d; --cdb-surface: var(--cdb-ink-0); --cdb-surface-2: var(--cdb-ink-100); /* Роли, ссылающиеся на ink-*, обязаны повторяться здесь: значение custom property подставляется на том элементе, где объявлено, — переопределения одной только шкалы ink-* недостаточно */ --cdb-text: var(--cdb-ink-900); --cdb-text-soft: var(--cdb-ink-600); --cdb-text-faint: var(--cdb-ink-500); --cdb-on-brand: #ffffff; --cdb-line: var(--cdb-ink-200); --cdb-line-strong: var(--cdb-ink-300); /* Кнопке на тёмном нужен насыщенный фон, надписи — светлый тон */ --cdb-brand: #9b4fb0; --cdb-brand-hover: #ac60c1; --cdb-brand-rgb: 155, 79, 176; --cdb-secondary-rgb: 170, 162, 182; --cdb-light-rgb: 30, 26, 36; --cdb-link-rgb: 198, 143, 217; --cdb-link-hover-rgb: 220, 180, 233; --cdb-brand-soft: var(--cdb-violet-100); --cdb-brand-text: var(--cdb-violet-600); --cdb-link: var(--cdb-violet-600); --cdb-link-hover: var(--cdb-violet-700); --cdb-visited: var(--cdb-violet-500); --cdb-status-continue: #5fd695; --cdb-status-freez: #7fb8e6; --cdb-status-finish: #c68fd9; --cdb-status-unknown: var(--cdb-ink-400); --cdb-e1: 0 1px 2px rgba(0, 0, 0, .5); --cdb-e2: 0 2px 8px rgba(0, 0, 0, .55); --cdb-e3: 0 12px 32px rgba(0, 0, 0, .6); } /* ── 3. Мост в Bootstrap 5.3 ─────────────────────────────────────────────── */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--cdb-bg); --bs-body-color: var(--cdb-text); --bs-body-font-family: var(--cdb-font-ui); --bs-body-font-size: var(--cdb-size-body); --bs-body-line-height: 1.5; --bs-primary: var(--cdb-brand); --bs-link-color: var(--cdb-link); --bs-link-hover-color: var(--cdb-link-hover); --bs-border-color: var(--cdb-line); --bs-border-radius: var(--cdb-r-sm); --bs-border-radius-sm: var(--cdb-r-xs); --bs-border-radius-lg: var(--cdb-r-md); --bs-secondary-color: var(--cdb-text-soft); --bs-emphasis-color: var(--cdb-text); --bs-primary-rgb: var(--cdb-brand-rgb); --bs-secondary-rgb: var(--cdb-secondary-rgb); --bs-light-rgb: var(--cdb-light-rgb); --bs-link-color-rgb: var(--cdb-link-rgb); --bs-link-hover-color-rgb: var(--cdb-link-hover-rgb); --bs-success-text-emphasis: var(--cdb-ok); --bs-info-text-emphasis: var(--cdb-info); --bs-warning-text-emphasis: var(--cdb-warn); --bs-danger-text-emphasis: var(--cdb-alert); --bs-font-monospace: var(--cdb-font-mono); --bs-bg-opacity: 1; } /* Компонентные --bs-* Bootstrap объявляет на самих компонентах (.btn-primary и т.д.) — переопределение в :root они бы перекрыли. Поэтому мост здесь повторяет селекторы Bootstrap с той же специфичностью */ .btn { --bs-btn-border-radius: var(--cdb-r-sm); --bs-btn-font-weight: 600; --bs-btn-focus-box-shadow: var(--cdb-ring); } .btn-primary { --bs-btn-bg: var(--cdb-brand); --bs-btn-color: var(--cdb-on-brand); --bs-btn-border-color: var(--cdb-brand); --bs-btn-hover-bg: var(--cdb-brand-hover); --bs-btn-hover-color: var(--cdb-on-brand); --bs-btn-hover-border-color: var(--cdb-brand-hover); --bs-btn-active-bg: var(--cdb-brand-hover); --bs-btn-active-color: var(--cdb-on-brand); --bs-btn-active-border-color: var(--cdb-brand-hover); --bs-btn-disabled-bg: var(--cdb-bg-sunken); --bs-btn-disabled-color: var(--cdb-text-faint); --bs-btn-disabled-border-color: var(--cdb-line); } .table { --bs-table-bg: var(--cdb-surface); --bs-table-color: var(--cdb-text); --bs-table-bg-state: var(--cdb-brand-soft); --bs-table-color-state: var(--cdb-text); --bs-table-hover-bg: var(--cdb-surface-2); --bs-table-striped-bg: var(--cdb-surface-2); } .dropdown-menu { --bs-dropdown-bg: var(--cdb-surface); --bs-dropdown-border-color: var(--cdb-line); --bs-dropdown-link-color: var(--cdb-text); --bs-dropdown-link-hover-bg: var(--cdb-surface-2); --bs-dropdown-link-hover-color: var(--cdb-text); --bs-dropdown-link-active-bg: var(--cdb-brand); } .nav-tabs { --bs-nav-tabs-border-color: var(--cdb-line); --bs-nav-tabs-link-active-bg: var(--cdb-surface); --bs-nav-tabs-link-active-color: var(--cdb-text); --bs-nav-tabs-link-active-border-color: var(--cdb-line); } .nav-pills { --bs-nav-pills-link-active-bg: var(--cdb-brand); } .navbar { --bs-navbar-color: var(--cdb-text-soft); --bs-navbar-hover-color: var(--cdb-text); --bs-navbar-active-color: var(--cdb-text); } .pagination { --bs-pagination-active-bg: var(--cdb-brand); --bs-pagination-active-border-color: var(--cdb-brand); } .card { --bs-card-cap-bg: var(--cdb-surface-2); } .offcanvas, .offcanvas-bottom { --bs-offcanvas-height: 40vh; } /* ── 4. База ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--cdb-bg); color: var(--cdb-text); font-family: var(--cdb-font-ui); font-size: var(--cdb-size-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--cdb-s2); line-height: 1.1; } h1, h2 { font-family: var(--cdb-font-display); font-weight: 700; letter-spacing: -.02em; } h3, h4, h5, h6 { font-family: var(--cdb-font-ui); font-weight: 600; letter-spacing: -.01em; } p { margin: 0 0 var(--cdb-s3); } img { display: block; max-width: 100%; } a { color: var(--cdb-link); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--cdb-link-hover); text-decoration: underline; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--cdb-brand); outline-offset: 2px; border-radius: var(--cdb-r-xs); } ::selection { background: color-mix(in srgb, var(--cdb-brand) 26%, transparent); } [x-cloak] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* Иконки — FontAwesome 4, тот же набор, что уже подключён на сайте. Никаких эмодзи: они цветные и выпадают из монохромной палитры */ .fa { line-height: 1; } .cdb-btn .fa, .cdb-nav .fa, .cdb-tag .fa, .cdb-chip .fa { font-size: 1em; } .cdb-hero { font-family: var(--cdb-font-display); font-weight: 800; font-size: var(--cdb-size-hero); line-height: .98; letter-spacing: -.035em; margin: 0; } .cdb-kicker { font-family: var(--cdb-font-ui); font-size: var(--cdb-size-xs); font-weight: 600; letter-spacing: var(--cdb-kicker-tracking); text-transform: uppercase; color: var(--cdb-text-soft); } .cdb-mono { font-family: var(--cdb-font-mono); font-variant-numeric: tabular-nums; } .cdb-num { font-family: var(--cdb-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .cdb-muted { color: var(--cdb-text-soft); } .cdb-faint { color: var(--cdb-text-faint); } .cdb-rule { height: 1px; background: var(--cdb-line); border: 0; margin: var(--cdb-s5) 0; } .cdb-rule--strong { height: 2px; background: var(--cdb-text); } /* ── 5. Кнопки ───────────────────────────────────────────────────────────── */ .cdb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--cdb-s2); min-height: 36px; padding: 0 var(--cdb-s4); font-family: var(--cdb-font-ui); font-size: var(--cdb-size-sm); font-weight: 600; color: var(--cdb-text); background: var(--cdb-surface); border: 1px solid var(--cdb-line-strong); border-radius: var(--cdb-r-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--cdb-fast) var(--cdb-ease), border-color var(--cdb-fast) var(--cdb-ease), color var(--cdb-fast) var(--cdb-ease); } .cdb-btn:hover { background: var(--cdb-bg-sunken); color: var(--cdb-text); text-decoration: none; } .cdb-btn:active { background: var(--cdb-ink-200); } .cdb-btn:disabled, .cdb-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .cdb-btn--primary { background: var(--cdb-brand); border-color: var(--cdb-brand); color: var(--cdb-on-brand); } .cdb-btn--primary:hover { background: var(--cdb-brand-hover); border-color: var(--cdb-brand-hover); color: var(--cdb-on-brand); } .cdb-btn--primary:active { background: var(--cdb-violet-800); } .cdb-btn--ghost { background: transparent; border-color: transparent; color: var(--cdb-brand-text); } .cdb-btn--ghost:hover { background: var(--cdb-brand-soft); } /* Включённое состояние кнопки-переключателя («прочитано», активный фильтр). Держит рамку и размер: ghost без рамки читался как кнопка другого размера */ .cdb-btn--on { background: var(--cdb-brand-soft); border-color: var(--cdb-brand); color: var(--cdb-brand-text); } .cdb-btn--on:hover { background: var(--cdb-brand-soft); border-color: var(--cdb-brand-hover); color: var(--cdb-brand-text); } .cdb-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--cdb-alert) 45%, transparent); color: var(--cdb-alert); } .cdb-btn--danger:hover { background: var(--cdb-alert-bg); color: var(--cdb-alert); } .cdb-btn--signal { background: var(--cdb-signal); border-color: var(--cdb-signal); color: var(--cdb-signal-ink); } /* «Ссылки нет» — не ошибка страницы, а отсутствующие данные и повод сообщить о них. Пунктирная рамка в размер соседних кнопок: колонка остаётся однородной, а красный остаётся только на иконке */ .cdb-btn--empty { background: transparent; border-style: dashed; border-color: var(--cdb-line-strong); color: var(--cdb-text-soft); } .cdb-btn--empty .fa { color: var(--cdb-alert); } .cdb-btn--empty:hover { background: var(--cdb-alert-bg); border-color: color-mix(in srgb, var(--cdb-alert) 45%, transparent); color: var(--cdb-alert); } .cdb-btn--sm { min-height: 28px; padding: 0 var(--cdb-s3); font-size: var(--cdb-size-xs); } .cdb-btn--lg { min-height: 46px; padding: 0 var(--cdb-s5); font-size: var(--cdb-size-body); } .cdb-btn--icon { width: 36px; padding: 0; } .cdb-btn--sm.cdb-btn--icon { width: 28px; } .cdb-btn--lg.cdb-btn--icon { width: 46px; } .cdb-btn--block { width: 100%; } .cdb-btn__group { display: inline-flex; } .cdb-btn__group .cdb-btn { border-radius: 0; margin-left: -1px; } .cdb-btn__group .cdb-btn:first-child { border-radius: var(--cdb-r-sm) 0 0 var(--cdb-r-sm); margin-left: 0; } .cdb-btn__group .cdb-btn:last-child { border-radius: 0 var(--cdb-r-sm) var(--cdb-r-sm) 0; } /* ── 6. Метки и чипы ─────────────────────────────────────────────────────── */ .cdb-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; min-height: 22px; font-size: var(--cdb-size-xs); font-weight: 600; /* Радиус совпадает с кнопкой: метка и кнопка часто стоят в одной колонке, и разные скругления читаются как дефект вёрстки, а не как иерархия */ border-radius: var(--cdb-r-sm); background: var(--cdb-bg-sunken); color: var(--cdb-text-soft); border: 1px solid transparent; } .cdb-tag--brand { background: var(--cdb-brand-soft); color: var(--cdb-brand-text); } .cdb-tag--signal { background: var(--cdb-signal); color: var(--cdb-signal-ink); letter-spacing: .06em; text-transform: uppercase; } .cdb-tag--outline { background: transparent; border-color: var(--cdb-line-strong); color: var(--cdb-text-soft); } .cdb-tag--ok { background: var(--cdb-ok-bg); color: var(--cdb-ok); } .cdb-tag--alert { background: var(--cdb-alert-bg); color: var(--cdb-alert); } /* Метка на месте кнопки (нет ссылки на перевод) — та же высота и радиус, чтобы колонка действий не «дышала» */ .cdb-tag--slot { min-height: 28px; padding: 0 10px; justify-content: center; } .cdb-chips { display: flex; flex-wrap: wrap; gap: var(--cdb-s2); } .cdb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--cdb-size-sm); border-radius: var(--cdb-r-pill); background: var(--cdb-surface); border: 1px solid var(--cdb-line); color: var(--cdb-text); cursor: pointer; transition: all var(--cdb-fast) var(--cdb-ease); } .cdb-chip:hover { border-color: var(--cdb-brand); color: var(--cdb-brand-text); text-decoration: none; } .cdb-chip[aria-pressed="true"], .cdb-chip[aria-current] { background: var(--cdb-brand); border-color: var(--cdb-brand); color: var(--cdb-on-brand); } .cdb-chip__n { font-family: var(--cdb-font-mono); font-size: var(--cdb-size-xs); color: var(--cdb-text-faint); } .cdb-chip[aria-pressed="true"] .cdb-chip__n, .cdb-chip[aria-current] .cdb-chip__n { color: color-mix(in srgb, var(--cdb-on-brand) 75%, transparent); } /* Точка статуса перевода серии */ .cdb-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--cdb-status-unknown); } .cdb-status--continue { background: var(--cdb-status-continue); } .cdb-status--freez { background: var(--cdb-status-freez); } .cdb-status--finish { background: var(--cdb-status-finish); } /* ── 7. Обложка — центральный объект системы ─────────────────────────────── */ .cdb-cover { position: relative; display: block; border-radius: var(--cdb-r-sm); overflow: hidden; background: var(--cdb-bg-sunken); } .cdb-cover img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform var(--cdb-slow) var(--cdb-ease); } .cdb-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23, 20, 28, .16); pointer-events: none; } a.cdb-cover:hover img { transform: scale(1.035); } .cdb-cover__num { position: absolute; left: 0; bottom: 0; padding: 3px 8px; font-family: var(--cdb-font-mono); font-size: var(--cdb-size-xs); font-weight: 600; background: var(--cdb-ink-900); color: var(--cdb-ink-0); border-radius: 0 var(--cdb-r-xs) 0 0; } .cdb-cover__flag { position: absolute; top: var(--cdb-s2); right: var(--cdb-s2); display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: var(--cdb-size-xs); font-weight: 600; border-radius: var(--cdb-r-xs); background: var(--cdb-signal); color: var(--cdb-signal-ink); } .cdb-cover__read { position: absolute; top: var(--cdb-s2); left: var(--cdb-s2); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--cdb-brand); color: var(--cdb-on-brand); font-size: 11px; } .cdb-cover--read img { opacity: .55; } .cdb-cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--cdb-s4); } .cdb-tile { display: flex; flex-direction: column; gap: 6px; } .cdb-tile__title { font-size: var(--cdb-size-sm); font-weight: 600; line-height: 1.25; color: var(--cdb-text); } .cdb-tile__meta { font-size: var(--cdb-size-xs); color: var(--cdb-text-faint); } /* Горизонтальная лента обложек — «Новое в моих сериях» и любые ряды на телефоне. Прокрутка вбок вместо переноса: ряд обязан читаться как «ещё есть правее» */ /* flex: none обязателен: strip часто лежит внутри flex-колонки, а overflow-x:auto обнуляет его автоминимум — колонка ужимает ленту в полоску скроллбара */ .cdb-strip { display: flex; flex: none; align-items: stretch; gap: var(--cdb-s3); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x proximity; } .cdb-strip > * { flex: none; scroll-snap-align: start; } /* Подписи в ленте разной длины — кнопку прижимаем к низу, иначе ряд «разъезжается» */ .cdb-strip > .cdb-tile { display: flex; flex-direction: column; } .cdb-strip > .cdb-tile > .cdb-btn, .cdb-strip > .cdb-tile > .cdb-meter { margin-top: auto; } .cdb-strip::-webkit-scrollbar { height: 6px; } .cdb-strip::-webkit-scrollbar-thumb { background: var(--cdb-line-strong); border-radius: var(--cdb-r-pill); } .cdb-strip__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--cdb-line-strong); border-radius: var(--cdb-r-sm); color: var(--cdb-brand-text); font-size: var(--cdb-size-sm); font-weight: 600; } /* ── 8. Поверхности ──────────────────────────────────────────────────────── */ .cdb-card { background: var(--cdb-surface); border: 1px solid var(--cdb-line); border-radius: var(--cdb-r-md); box-shadow: var(--cdb-e1); } .cdb-card--flat { box-shadow: none; } .cdb-card--hover { transition: border-color var(--cdb-fast) var(--cdb-ease), box-shadow var(--cdb-fast) var(--cdb-ease); } .cdb-card--hover:hover { border-color: var(--cdb-line-strong); box-shadow: var(--cdb-e2); } .cdb-panel { background: var(--cdb-surface); border: 1px solid var(--cdb-line); border-radius: var(--cdb-r-md); padding: var(--cdb-s4); } .cdb-panel__head { display: flex; align-items: center; gap: var(--cdb-s2); padding-bottom: var(--cdb-s3); margin-bottom: var(--cdb-s3); border-bottom: 1px solid var(--cdb-line); } .cdb-panel__title { font-size: var(--cdb-size-xs); font-weight: 600; letter-spacing: var(--cdb-kicker-tracking); text-transform: uppercase; color: var(--cdb-text-soft); margin: 0; } .cdb-panel__more { margin-left: auto; font-size: var(--cdb-size-xs); font-weight: 600; } /* Фиолетовое поле — единственное место, где бренд идёт заливкой */ .cdb-poster { background: var(--cdb-violet-600); color: #fff; border-radius: var(--cdb-r-md); padding: var(--cdb-s5); } .cdb-poster .cdb-kicker { color: var(--cdb-signal); } .cdb-poster a { color: #fff; text-decoration: underline; } /* Строка выпуска — основная единица списков переводов (неделя, серия, поиск). Не таблица: на телефоне таблица из шести колонок нечитаема, а строка переносит действия под заголовок без переверстки */ .cdb-issue { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: var(--cdb-s3); align-items: center; padding: 7px var(--cdb-s3); border-bottom: 1px solid var(--cdb-line); transition: background var(--cdb-fast) var(--cdb-ease); } .cdb-issue:last-child { border-bottom: 0; } .cdb-issue:hover { background: var(--cdb-brand-soft); } .cdb-issue__title { display: block; font-weight: 600; font-size: var(--cdb-size-sm); color: var(--cdb-text); } .cdb-issue__title:hover { color: var(--cdb-brand-text); } .cdb-issue__meta { font-size: var(--cdb-size-xs); color: var(--cdb-text-faint); } .cdb-issue__actions { display: flex; gap: 2px; } .cdb-issue--read .cdb-issue__title, .cdb-issue--read .cdb-issue__meta { color: var(--cdb-text-faint); } .cdb-issue--read .cdb-cover img { opacity: .5; } /* Заголовок дня внутри списка: единственная группировка на главной и в неделях */ .cdb-daygroup { margin: 0; padding: var(--cdb-s3) var(--cdb-s3) var(--cdb-s2); font-size: var(--cdb-size-xs); font-weight: 600; letter-spacing: var(--cdb-kicker-tracking); text-transform: uppercase; color: var(--cdb-text-soft); background: var(--cdb-surface-2); border-bottom: 1px solid var(--cdb-line); } .cdb-daygroup + .cdb-issue { border-top: 0; } .cdb-issue + .cdb-daygroup { border-top: 1px solid var(--cdb-line); } /* Панель инструментов списка: фильтр + счётчик найденного */ .cdb-listbar { display: flex; align-items: center; gap: var(--cdb-s3); padding: var(--cdb-s3); background: var(--cdb-surface-2); border-bottom: 1px solid var(--cdb-line); } .cdb-listbar .cdb-search { flex: 1; min-height: 32px; max-width: 380px; } .cdb-listbar__count { margin-left: auto; font-family: var(--cdb-font-mono); font-size: var(--cdb-size-sm); color: var(--cdb-text-faint); } /* Нижняя шторка мобильной навигации (offcanvas-bottom в разметке Bootstrap) */ .cdb-sheet { background: var(--cdb-surface); border-radius: var(--cdb-r-lg) var(--cdb-r-lg) 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); padding: 6px 0 calc(var(--cdb-s8) + 18px); } .cdb-sheet--full { border-radius: 0; padding-top: 0; } .cdb-sheet__grip { display: block; width: 38px; height: 4px; border-radius: var(--cdb-r-pill); background: var(--cdb-line-strong); margin: 4px auto var(--cdb-s3); } .cdb-sheet__head { display: flex; align-items: center; gap: var(--cdb-s3); padding: 0 var(--cdb-s5) var(--cdb-s3); } .cdb-sheet__head h3 { margin: 0; font-size: var(--cdb-size-h3); } .cdb-sheet__list { list-style: none; margin: 0; padding: 0; } .cdb-sheet__list a { display: flex; align-items: center; gap: var(--cdb-s3); padding: 13px var(--cdb-s5); font-size: var(--cdb-size-body); color: var(--cdb-text); border-bottom: 1px solid var(--cdb-line); min-height: 48px; } .cdb-sheet__list a:hover { text-decoration: none; background: var(--cdb-bg-sunken); } .cdb-sheet__list a.is-active { color: var(--cdb-brand-text); font-weight: 600; } .cdb-sheet__subtitle { margin: var(--cdb-s5) 0 0; padding: 0 var(--cdb-s5) var(--cdb-s2); font-size: var(--cdb-size-xs); font-weight: 600; letter-spacing: var(--cdb-kicker-tracking); text-transform: uppercase; color: var(--cdb-text-soft); } /* Слот баннера: место команды под собственный креатив — рамка, а не заливка, чтобы пустой слот не выглядел сломанным блоком */ .cdb-slot { display: grid; place-items: center; text-align: center; border: 1px dashed var(--cdb-line-strong); border-radius: var(--cdb-r-md); color: var(--cdb-text-faint); font-size: var(--cdb-size-sm); padding: var(--cdb-s4); } .cdb-slot:hover { border-color: var(--cdb-brand); color: var(--cdb-brand-text); text-decoration: none; } /* ── 9. Данные: факты и таблицы ──────────────────────────────────────────── */ .cdb-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--cdb-s2) var(--cdb-s4); margin: 0; font-size: var(--cdb-size-sm); } .cdb-facts dt { font-size: var(--cdb-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cdb-text-faint); padding-top: 2px; } .cdb-facts dd { margin: 0; } /* Обёртка широкой таблицы (issue-table-wrap в исходной вёрстке): на узком экране таблица прокручивается вбок вместо того, чтобы обрезаться по краю карточки. Скругления гасим у обёртки, а не у карточки — иначе угол таблицы вылезает. overflow-x: auto делает обёртку контейнером прокрутки и по обеим осям, поэтому она перехватывает sticky-контекст: смещение th, рассчитанное на липкую шапку страницы, увело бы шапку таблицы на 56px внутрь и положило на первую строку */ .cdb-tablewrap { overflow-x: auto; overflow-y: visible; border-radius: inherit; scrollbar-width: thin; } .cdb-tablewrap .cdb-table th { top: 0; } .cdb-tablewrap::-webkit-scrollbar { height: 6px; } .cdb-tablewrap::-webkit-scrollbar-thumb { background: var(--cdb-line-strong); border-radius: var(--cdb-r-pill); } .cdb-tablewrap > table { min-width: 100%; } .cdb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cdb-size-sm); } .cdb-table th { position: sticky; top: var(--cdb-nav-h); z-index: 2; text-align: left; padding: var(--cdb-s2) var(--cdb-s3); font-size: var(--cdb-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cdb-text-soft); background: var(--cdb-surface); border-bottom: 1px solid var(--cdb-line-strong); } .cdb-table td { padding: var(--cdb-s2) var(--cdb-s3); border-bottom: 1px solid var(--cdb-line); vertical-align: middle; } .cdb-table tbody tr { transition: background var(--cdb-fast) var(--cdb-ease); } .cdb-table tbody tr:hover { background: var(--cdb-brand-soft); } .cdb-table tbody tr[aria-selected="true"] { background: var(--cdb-brand-soft); } .cdb-table--dense td, .cdb-table--dense th { padding: 5px var(--cdb-s2); } /* Таблица внутри карточки: шапка не липнет (карточка сама уезжает за экран), стоит на утопленном фоне, а нижняя граница последней строки не дублирует рамку */ .cdb-table--inset th { position: static; background: var(--cdb-surface-2); } .cdb-table--inset td { padding: 6px var(--cdb-s3); } .cdb-table--inset tbody tr:last-child td { border-bottom: 0; } .cdb-table__num { font-family: var(--cdb-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Кликабельный заголовок колонки — сортировка */ .cdb-table__sort a { color: inherit; } .cdb-table__sort a:hover { color: var(--cdb-brand-text); text-decoration: none; } /* Прочитанная строка гасится, но остаётся читаемой */ .cdb-table tr.is-read td { color: var(--cdb-text-faint); } .cdb-table tr.is-read a { color: var(--cdb-text-soft); } /* То же для строк, выключенных не чтением, а состоянием записи (блокировка, скрытие) */ .cdb-table tr.cdb-table--muted td { color: var(--cdb-text-faint); } .cdb-table tr.cdb-table--muted a { color: var(--cdb-text-soft); } /* ── 10. Формы ───────────────────────────────────────────────────────────── */ .cdb-field { display: flex; flex-direction: column; gap: 5px; } .cdb-field > label { font-size: var(--cdb-size-xs); font-weight: 600; color: var(--cdb-text-soft); } .cdb-input { width: 100%; min-height: 36px; padding: 6px var(--cdb-s3); font-family: var(--cdb-font-ui); font-size: var(--cdb-size-sm); color: var(--cdb-text); background: var(--cdb-surface); border: 1px solid var(--cdb-line-strong); border-radius: var(--cdb-r-sm); caret-color: var(--cdb-brand); transition: border-color var(--cdb-fast) var(--cdb-ease), box-shadow var(--cdb-fast) var(--cdb-ease); } .cdb-input::placeholder { color: var(--cdb-text-faint); } .cdb-input:hover { border-color: var(--cdb-ink-400); } .cdb-input:focus-visible { border-color: var(--cdb-brand); box-shadow: var(--cdb-ring); outline: none; } textarea.cdb-input { min-height: 96px; resize: vertical; } .cdb-input--sm { min-height: 30px; padding: 4px var(--cdb-s2); font-size: var(--cdb-size-xs); } /* Выбор файла: нативный input отдаёт браузерные подписи по-английски и не знает наших рамок, поэтому его прячем и показываем label в виде кнопки с русским текстом */ .cdb-file { display: inline-flex; align-items: center; gap: var(--cdb-s2); min-height: 36px; padding: 0 var(--cdb-s3); border: 1px solid var(--cdb-line-strong); border-radius: var(--cdb-r-sm); background: var(--cdb-surface); font-size: var(--cdb-size-sm); cursor: pointer; } .cdb-file:hover { border-color: var(--cdb-ink-400); } .cdb-file:focus-within { border-color: var(--cdb-brand); box-shadow: var(--cdb-ring); } .cdb-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cdb-file__btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--cdb-s2); border-radius: var(--cdb-r-xs); background: var(--cdb-bg-sunken); font-size: var(--cdb-size-xs); font-weight: 600; white-space: nowrap; } .cdb-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cdb-text-faint); } .cdb-file__name--set { color: var(--cdb-text); } .cdb-search { display: flex; align-items: center; gap: var(--cdb-s2); background: var(--cdb-surface); border: 1px solid var(--cdb-line-strong); border-radius: var(--cdb-r-pill); padding: 0 var(--cdb-s2) 0 var(--cdb-s4); min-height: 40px; min-width: 0; max-width: 100%; } .cdb-search:focus-within { border-color: var(--cdb-brand); box-shadow: var(--cdb-ring); } .cdb-search input { flex: 1; border: 0; background: transparent; color: var(--cdb-text); font: inherit; min-width: 0; } .cdb-search input:focus { outline: none; } .cdb-search select { border: 0; background: transparent; color: var(--cdb-text-soft); font: inherit; font-size: var(--cdb-size-sm); } .cdb-seg { display: inline-flex; background: var(--cdb-bg-sunken); border: 1px solid var(--cdb-line); border-radius: var(--cdb-r-sm); padding: 2px; gap: 2px; } .cdb-seg__opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--cdb-s3); font-size: var(--cdb-size-sm); font-weight: 600; color: var(--cdb-text-soft); border-radius: calc(var(--cdb-r-sm) - 2px); cursor: pointer; border: 0; background: transparent; } .cdb-seg__opt:hover { color: var(--cdb-text); } .cdb-seg__opt[aria-selected="true"], .cdb-seg__opt.is-active { background: var(--cdb-surface); color: var(--cdb-text); box-shadow: var(--cdb-e1); } /* ── 11. Прогресс ────────────────────────────────────────────────────────── */ .cdb-bar { display: block; height: 5px; border-radius: var(--cdb-r-pill); background: var(--cdb-ink-200); overflow: hidden; } .cdb-bar > span { display: block; height: 100%; background: var(--cdb-brand); border-radius: inherit; transition: width var(--cdb-slow) var(--cdb-ease); } .cdb-bar--signal > span { background: var(--cdb-signal); } .cdb-meter { display: flex; align-items: center; gap: var(--cdb-s2); font-size: var(--cdb-size-xs); color: var(--cdb-text-soft); } .cdb-meter .cdb-bar { flex: 1; min-width: 60px; } /* Вкладки-пилюли раздела (серия, выпуск): один активный, остальные — ссылки. Активное состояние объявлено последним и с той же специфичностью, что и базовое правило, — иначе цвет текста не перебивается. Пункт бывает и