/* ═══════════════════════════════════════════════════════════════ Bridge CA — theme.css Один слой поверх базы. Раньше это были пять файлов, и порядок их подключения на русских и английских страницах отличался — каскад мог давать разный результат. Здесь порядок зафиксирован. Работает и поверх styles.css (внутренние страницы, там нужен data-theme="dark"), и поверх night.css (главная и три новые): правила палитры привязаны к [data-theme], а подвал и форма — нет. Порядок частей менять нельзя. ═══════════════════════════════════════════════════════════════ */ /* ══════ skin-night.css ══════ */ /* ═══════════════════════════════════════════════════════════════ Bridge CA — skin-night.css Ночная палитра v4 поверх боевой site/styles.css. Меняются только значения цвета. Разметка, раскладка и типографика страниц остаются прежними. Подключать после styles.css, на нужен data-theme="dark". ═══════════════════════════════════════════════════════════════ */ /* ─── 1. Токены ─────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #07080C; /* страница */ --bg-elev: #0D0F16; /* панель, карточка */ --ink: #F2F0EC; /* заголовки и основной текст */ --ink-2: #B9BDC7; /* абзацы */ --ink-3: #767C8B; /* мета, подписи */ --ink-4: #4E5462; /* самый тихий, декор */ --line: #1C1F2A; --line-2: #2C3040; --paper: #0D0F16; /* поверхность карточек */ --accent: #F2F0EC; /* монохромный акцент шёл «чернилами», в ночи это светлый */ --accent-pop: #FF4F5E; /* коралл вместо бирюзы */ } /* ─── 2. Инвертированные блоки ────────────────────────────────── В светлой теме они красились чернилами по бумаге: background: var(--ink), color: var(--bg). Меняем значения токенов местами внутри самого блока — правила страниц при этом трогать не нужно. */ [data-theme="dark"] .section--ink, [data-theme="dark"] .cta-section, [data-theme="dark"] .cta-modal__panel, [data-theme="dark"] .hero, [data-theme="dark"] .ch-index, [data-theme="dark"] .ch-nda, [data-theme="dark"] .commercial-card.is-featured, [data-theme="dark"] .application-modal { --ink: #0D0F16; --bg: #F2F0EC; --bg-elev: #141722; --paper: #141722; --line: #2C3040; --line-2: #3A3F52; } /* ─── 3. Шрифты как на новых страницах ────────────────────────── Дисплейная гарнитура была Fraunces — переводим на Geist: вес 600, плотный трекинг, курсив в системе не используется. */ [data-theme="dark"] { --serif: 'Geist', system-ui, -apple-system, sans-serif; } [data-theme="dark"] em, [data-theme="dark"] i, [data-theme="dark"] cite { font-style: normal; } [data-theme="dark"] :is( h1, h2, h3, h4, h5, h6, .display, .display em, .s-head .lead, .hero h1, .hero-partner-note strong, .ch-hero__title, .ch-index__client, .ch-card__title, .ch-nda__text, .ch-cta__title, .bh__title, .post-card__title, .ah__title, .article-body h2, .pullquote p, .author__name, .pricing-hero h1, .commercial-card__title, .payment-flow__intro h2, .cta-grid h2, .cta-modal h3, .cta-success h3, .footer .word, .contact-name, .application-modal h3, .benefit-table .b-title, .prog-table .col-focus, .industry-section__head h2 ) { font-weight: 600; letter-spacing: -.038em; font-variation-settings: normal; } /* крупные заголовки идут ещё плотнее и с низкой интерлиньяжной высотой */ [data-theme="dark"] :is( .display, .hero h1, .ch-hero__title, .bh__title, .ah__title, .pricing-hero h1, .cta-grid h2, .ch-cta__title ) { letter-spacing: -.045em; line-height: .95; } /* цифры — моноширинные, как в полосах фактов на новых страницах */ [data-theme="dark"] :is( .hero-stamp .k, .cred-num, .benefit-table .b-num, .prog-table .col-week .n, .ch-index__metric strong, .ch-card__metric-n, .commercial-card__price, .total__num, .access__stat .n, .ladder__row .lv, .gmt__val ) { font-family: var(--mono); font-weight: 500; letter-spacing: -.03em; } /* ─── 4. Точечные правки под новый акцент ───────────────────── */ /* на коралле белый текст блёклый — берём цвет страницы */ [data-theme="dark"] .btn--accent { color: #07080C; } /* текущий пункт шапки */ [data-theme="dark"] .nav-links a[aria-current="page"] { color: var(--accent-pop); } /* поля ввода на тёмном: подложка чуть светлее фона */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color: var(--ink); } /* фейковые скриншоты продуктов в кейсах остаются светлыми: это снимки интерфейса, а не поверхность страницы */ /* ─── 5. Метка мокапа ───────────────────────────────────────── */ .mock-flag { position: fixed; left: 0; bottom: 0; z-index: 99; background: #FF4F5E; color: #07080C; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; font-weight: 600; } /* ══════ v11-pages.css ══════ */ /* ═══════════════════════════════════════════════════════════════ Bridge CA — v1.1, добор для внутренних страниц. skin-night.css перекрашивает боевые страницы в ночную палитру, но собирался под набор страниц v4 — карточек кейсов там не было. Здесь дописаны только те блоки, которые скин не знает. Подключать ПОСЛЕ skin-night.css. Разметка и контент не трогаются. ═══════════════════════════════════════════════════════════════ */ /* ─── Инвертированные блоки страниц кейсов ────────────────────── Правила страниц красят их как «чернила по бумаге» (background: var(--ink)). Меняем значения токенов внутри блока, как это делает skin-night.css для .section--ink и .cta-section. */ [data-theme="dark"] .band, [data-theme="dark"] .cta__btn, [data-theme="dark"] .brand--sap-box, [data-theme="dark"] .brand--ey-box { --ink: #0D0F16; --bg: #F2F0EC; } /* .band задаёт текст напрямую белым по «чернилам» — в ночи фон уже тёмный, поэтому белый текст остаётся читаемым, но подложку поднимаем до цвета панели, чтобы блок не сливался со страницей. */ [data-theme="dark"] .band { background: #0D0F16; } [data-theme="dark"] .band + .band { border-top: 1px solid #1C1F2A; } /* Кнопка-призыв в кейсах: коралловая плашка вместо чернильной */ [data-theme="dark"] .cta__btn { background: #FF4F5E; color: #07080C; border-color: #FF4F5E; } [data-theme="dark"] .cta__btn:hover { background: #ff6b78; border-color: #ff6b78; color: #07080C; } /* Тонкая линейка внутри карточек DCA — на тёмном должна быть коралловой */ [data-theme="dark"] .slide-card__rule { background: #FF4F5E; } /* Логотипные плашки в кейсе hh.ru: на тёмном оставляем контурными */ [data-theme="dark"] .brand--sap-box, [data-theme="dark"] .brand--ey-box { background: #0D0F16; border: 1px solid #2C3040; } /* ─── Блоки с жёстко прошитым белым фоном ─────────────────────── В светлой теме это белая карточка с тёмным текстом. Скин цвет #fff перебить не может — он записан значением, а не токеном. Поэтому переводим такие блоки в тёмную панель: иначе .client и .lw-brand дают светлый текст по белому, то есть пустое место. */ [data-theme="dark"] .client, [data-theme="dark"] .lw-brand { background: #0D0F16; border-color: #2C3040; } [data-theme="dark"] .client:hover { border-color: #FF4F5E; } /* Рамки вокруг слайдов и скриншотов: сама картинка остаётся как есть, тёмной делаем только подложку и поля вокруг неё. */ [data-theme="dark"] .breakaway__frame, [data-theme="dark"] .inline-deck__item { background: #0D0F16; border-color: #2C3040; box-shadow: none; } [data-theme="dark"] .inline-deck__img { background: #141722; } /* ─── Документы и слайды внутри кейсов ────────────────────────── Эти поверхности лежат внутри инвертированных секций, где токен --ink становится тёмным. Раньше они были кремовыми и тёмный текст на них читался. После перевода подложек в тёмное текст совпал с фоном (контраст 1.00). Восстанавливаем ночную палитру внутри. */ [data-theme="dark"] :is( .slide-card, .ed-spread, .hero__img, .hero__scene, .breakaway__frame, .inline-deck__item, .doc, .deck ) { --ink: #F2F0EC; --ink-2: #B9BDC7; --ink-3: #8F96A5; --ink-4: #767C8B; --bg: #0D0F16; --paper: #0D0F16; --line: #1C1F2A; --line-2: #2C3040; color: #F2F0EC; } /* мелкие номера и метки на документах шли самым тихим токеном — на тёмном это 2.5:1, поднимаем до читаемого */ [data-theme="dark"] :is( .inline-deck__no, .slide-card__module-no, .slide-card__no, .ed-spread__no, .doc__no ) { color: #8F96A5; } /* ══════ v11-night.css ══════ */ /* ═══════════════════════════════════════════════════════════════ Bridge CA — v1.1, язык night.css для внутренних страниц. skin-night.css менял только палитру, поэтому страницы оставались на Fraunces со скруглениями и тенями. Здесь доводим их до визуального языка v4: гротеск вместо засечек, острые углы, hairline-границы, моно для данных. Разметка и контент страниц не трогаются. Подключать ПОСЛЕ skin-night.css и v11-pages.css. ═══════════════════════════════════════════════════════════════ */ /* ─── 1. Шрифт ────────────────────────────────────────────────── Все 50 правил styles.css и инлайновые стили страниц ссылаются на токен --serif. Подменяем сам токен — засечки исчезают везде разом, включая блоки внутри