/* ═══════════════════════════════════════════════════════════════════════════ FREEDOM BANK DS OVERRIDES Накладывается поверх styles.css и tl2.css, чтобы привести лендинг к официальному дизайн-системе Freedom Bank 2026. Чтобы откатить — удалите/закомментируйте подключение этого файла. Глоу-эффекты (.aurora) НЕ убираем, по решению заказчика. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* — Brand colors (точно по гайду) — */ --brand: #02B140; --brand-deep: #164734; --accent: #02B140; --accent-2: #164734; /* Тональные шкалы по гайду */ --fb-green-80: #0BAC3F; --fb-green-60: #108B37; --fb-green-40: #146D32; --fb-green-20: #17532F; /* Радиусы по гайду: 6 / 10 / 16 / 24 / 32 + pill */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; /* Нейтральные тени с inset-highlight (по гайду) */ --shadow-soft: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6); --shadow-lift: 0 2px 0 rgba(255,255,255,.06) inset, 0 24px 48px -20px rgba(0,0,0,.8); } /* ═══ ТЁМНАЯ ТЕМА — по ДС: Freedom Black, холодный синий-чёрный ═══ */ [data-theme="dark"] { --bg: #0B1015; /* Freedom Black */ --bg-2: #141A21; /* card on black */ --surface: rgba(237,248,255,.04); --surface-2: rgba(237,248,255,.06); --hairline: rgba(237,248,255,.08); --hairline-strong: rgba(237,248,255,.18); --fg: #EDF8FF; /* Freedom White */ --fg-dim: rgba(237,248,255,.66); --fg-mute: rgba(237,248,255,.44); --brand-fg: #02B140; /* зелёный читается на сине-чёрном */ --invert-fg: #0B1015; /* glow-пятна оставляем (заказчик попросил) — приглушаем, чтоб не выглядело "кислотно" */ --glow-a: rgba(2,177,64,.16); --glow-b: rgba(2,177,64,.10); --glow-c: rgba(22,71,52,.22); } /* ═══ СВЕТЛАЯ ТЕМА — по ДС (точно из colors_and_type.css) ═══ --bg → fb-white #EDF8FF --bg-raised → #FFFFFF --bg-sunken → #E2ECF1 --fg → fb-black #0B1015 --fg-muted → #4B5660 --fg-subtle → #7A8690 --border → rgba(11,16,21,.10) --border-strong → rgba(11,16,21,.18) */ [data-theme="light"] { --bg: #EDF8FF; --bg-2: #FFFFFF; /* приподнятые карточки */ --surface: #FFFFFF; --surface-2: #E2ECF1; /* утопленные блоки */ --hairline: rgba(11,16,21,.10); --hairline-strong: rgba(11,16,21,.18); --fg: #0B1015; --fg-dim: #4B5660; --fg-mute: #7A8690; --brand-fg: #02B140; --invert-fg: #EDF8FF; /* Glow убран — заменено на нейтральный фон */ --glow-a: transparent; --glow-b: transparent; --glow-c: transparent; } /* Глоу-слои в светлой теме скрываем целиком */ [data-theme="light"] .aurora, [data-theme="light"] .aurora::before, [data-theme="light"] .aurora::after, [data-theme="light"] .aurora .blob-3, [data-theme="light"] .grain { display: none !important; } /* В светлой теме фон сплошной — без зернения, аккуратные карточки на белом */ [data-theme="light"] body { background: var(--bg); } [data-theme="light"] .aside-card, [data-theme="light"] .reward-card, [data-theme="light"] .eres-card, [data-theme="light"] .carr-card, [data-theme="light"] .calc, [data-theme="light"] .tl, [data-theme="light"] .table-wrap, [data-theme="light"] .contact-card, [data-theme="light"] .cta-box, [data-theme="light"] .hv-card { background: var(--bg-2); border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(11,16,21,.04), 0 12px 32px -16px rgba(11,16,21,.10); } /* Утопленные элементы — sunken */ [data-theme="light"] .chips .chip, [data-theme="light"] .calc-output, [data-theme="light"] .tl2 { background: var(--surface-2); } /* ═══ ТИПОГРАФИКА — финальная подгонка к ДС ═══ */ html, body { letter-spacing: -.01em; /* tracking −1% по спеку */ font-feature-settings: normal; /* убрать ss01/cv11 от Inter — на CoFo не работают */ } h1, h2, h3, h4 { font-family: var(--ff-sans); /* единый CoFo Sans везде */ font-weight: 500; /* Medium по спеку */ letter-spacing: -.01em; line-height: 1.0; font-variation-settings: normal; /* зачистка остатков Fraunces */ } h1 { line-height: 1.0; } h2 { line-height: 1.0; } h3 { line-height: 1.12; } h4 { line-height: 1.12; } /* Все места, где в исходнике "крупные числа" были на serif — переводим на CoFo Black, характер цифр у CoFo подходит для монументальных значений */ .hv-card-title, .metric .m-val, .reward-card .r-big, .calc-out-val, .state-title, .calc-head h3, .eres-card h3, .carr-card h3, .faq-q, .ft td:first-child { font-family: var(--ff-sans) !important; font-variation-settings: normal !important; } .reward-card .r-big, .metric .m-val, .calc-out-val--big { font-weight: 900; /* CoFo Sans Black для больших цифр */ } /* mono-блоки в калькуляторе и футере — системный mono */ .calc-row output, .calc-out-lbl, .calc-scale span, .footer-col h4 { font-family: var(--ff-mono); } /* ═══ ВОРДМАРК «Freedom Bank» в герое ═══ */ .fb-mark { font-family: var(--ff-sans) !important; font-weight: 900 !important; letter-spacing: -.02em !important; font-variation-settings: normal !important; } /* ═══ КНОПКИ — pill, без зелёных теней ═══ */ .btn { box-shadow: none; } .btn-primary { background: var(--brand); color: #0B1015; /* accent-ink: текст на зелёном — Freedom Black */ } .btn-primary:hover { background: var(--fb-green-80); box-shadow: none; } /* ═══ КАРТОЧКИ И ПАНЕЛИ — нейтральные тени, без зелёного свечения ═══ */ .aside-card, .reward-card, .eres-card, .carr-card, .calc, .tl, .table-wrap, .contact-card, .cta-box, .hv-card { box-shadow: var(--shadow-soft); } /* Радиусы у крупных карточек — по ДС 16-24px */ .aside-card, .eres-card, .carr-card, .hv-card, .reward-card { border-radius: var(--radius-md); } .calc, .tl, .table-wrap, .contact-card, .cta-box { border-radius: var(--radius-lg); } /* ═══ NAV — pill бренд-сабтайтл нейтрально ═══ */ .brand-sub { letter-spacing: -.005em; }