/*
* FINXO — CSS Variables
* =====================
* Все цвета, размеры и стили управляются отсюда.
* Меняйте значения здесь — изменения применятся по всему сайту.
*
* Design: Dark Intelligence (Neo-Brutalism meets Dark Fintech)
*/
:root {
/* ============================================================
BACKGROUNDS
============================================================ */
--bg: #0f1117; /* основной фон страницы */
--bg-panel: #151822; /* фон панелей / сайдбара */
--bg-card: #1a1f2e; /* фон карточек */
--bg-card-h: #1f2538; /* фон карточки при hover */
--bg-inner: #131720; /* фон внутренних секций */
--bg-ticker: #090c12; /* фон бегущей строки */
/* ============================================================
BORDERS
============================================================ */
--bd: #232b3e; /* основная граница */
--bd-card: #2a3350; /* граница карточки */
--bd-hover: #3d5080; /* граница при hover */
/* ============================================================
TEXT
============================================================ */
--text-h: #f1f5f9; /* заголовки */
--text-b: #94a3b8; /* основной текст */
--text-m: #64748b; /* второстепенный текст */
--text-dim: rgba(241, 245, 249, 0.45); /* приглушённый текст */
--text-dim2: rgba(241, 245, 249, 0.65); /* полупрозрачный текст */
/* ============================================================
ACCENT — BLUE (основной акцент)
============================================================ */
--blue: #4f8ef7;
--blue-h: #3b7eff;
--blue-dim: rgba(79, 142, 247, 0.12);
--blue-bd: rgba(79, 142, 247, 0.3);
/* ============================================================
ACCENT — NEON CYAN (React proto, hero / кредиты)
============================================================ */
--cyan: #00D4FF;
--cyan-dark: #0099BB; /* для градиентов кнопок */
--cyan-dim: rgba(0, 212, 255, 0.08);
--cyan-dim2: rgba(0, 212, 255, 0.1);
--cyan-dim3: rgba(0, 212, 255, 0.12);
--cyan-bd: rgba(0, 212, 255, 0.15);
--cyan-bd2: rgba(0, 212, 255, 0.2);
--cyan-bd3: rgba(0, 212, 255, 0.3);
--cyan-glow: 0 0 25px rgba(0, 212, 255, 0.35);
--cyan-glow-h: 0 0 35px rgba(0, 212, 255, 0.5);
/* ============================================================
ACCENT — NEON GREEN (вклады / savings)
============================================================ */
--green: #22c55e; /* стандартный зелёный */
--green-dim: rgba(34, 197, 94, 0.1);
--green-bd: rgba(34, 197, 94, 0.25);
--neon-green: #00E676; /* яркий зелёный (savings, badges) */
--neon-green-dim: rgba(0, 255, 136, 0.1);
--neon-green-dim2: rgba(0, 255, 136, 0.12);
--neon-green-bd: rgba(0, 255, 136, 0.1);
--neon-green-bd2: rgba(0, 255, 136, 0.3);
/* ============================================================
ACCENT — PURPLE (ипотека / скоринг / features)
============================================================ */
--purple: #a855f7; /* стандартный фиолетовый */
--neon-purple: #C084FC; /* приглушённый фиолетовый (features badge) */
--purple-dim: rgba(123, 94, 167, 0.1);
--purple-dim2: rgba(123, 94, 167, 0.12);
--purple-bd: rgba(123, 94, 167, 0.2);
--purple-bd2: rgba(123, 94, 167, 0.25);
--purple-glow: rgba(123, 94, 167, 0.35);
/* ============================================================
ACCENT — ORANGE (инвестиции)
============================================================ */
--orange: #FF6B35;
--orange-dim: rgba(255, 107, 53, 0.1);
--orange-bd: rgba(255, 107, 53, 0.2);
/* ============================================================
ACCENT — AMBER / RED
============================================================ */
--amber: #f59e0b;
--amber-dim: rgba(245, 158, 11, 0.1);
--amber-bd: rgba(245, 158, 11, 0.25);
--red: #ef4444;
--red-dim: rgba(239, 68, 68, 0.1);
--red-bd: rgba(239, 68, 68, 0.25);
--teal: #14b8a6;
/* ============================================================
HERO
============================================================ */
--hero-bg-opacity: 0.20; /* прозрачность фонового изображения */
--hero-overlay: linear-gradient(135deg, rgba(8,12,20,0.95) 0%, rgba(8,12,20,0.7) 50%, rgba(8,12,20,0.9) 100%);
--hero-glow-1-color: #00D4FF;
--hero-glow-1-opacity: 0.08;
--hero-glow-2-color: #7B5EA7;
--hero-glow-2-opacity: 0.07;
/* ============================================================
HERO BADGE
============================================================ */
--hero-badge-bg: rgba(0, 212, 255, 0.08);
--hero-badge-bd: rgba(0, 212, 255, 0.2);
--hero-badge-color: var(--cyan);
/* ============================================================
GRADIENT TEXT (hero h1)
============================================================ */
--gradient-text: linear-gradient(135deg, #00D4FF, #7B5EA7);
/* ============================================================
BUTTONS
============================================================ */
--btn-primary-bg: linear-gradient(135deg, var(--cyan), var(--cyan-dark));
--btn-primary-color: #080C14;
--btn-primary-shadow: var(--cyan-glow);
--btn-primary-shadow-h: var(--cyan-glow-h);
/* ============================================================
PRODUCT CARDS (главная)
Каждый продукт имеет свой цвет акцента
============================================================ */
--product-credit-color: var(--cyan);
--product-credit-bg: var(--cyan-dim2);
--product-credit-bd: var(--cyan-bd2);
--product-deposit-color: var(--neon-green);
--product-deposit-bg: var(--neon-green-dim);
--product-deposit-bd: rgba(0, 255, 136, 0.2);
--product-mortgage-color: var(--neon-purple);
--product-mortgage-bg: var(--purple-dim);
--product-mortgage-bd: var(--purple-bd);
--product-invest-color: var(--amber);
--product-invest-bg: var(--amber-dim);
--product-invest-bd: var(--amber-bd);
/* ============================================================
SAVINGS WIDGET
============================================================ */
--savings-bg: rgba(15, 22, 35, 0.7);
--savings-bd: rgba(0, 255, 136, 0.1);
--savings-amount-color: var(--neon-green);
--savings-badge-bg: rgba(0, 255, 136, 0.1);
--savings-line-color: #00FF88;
/* ============================================================
FEATURES BADGE ("Технологии Finxo")
============================================================ */
--features-badge-bg: var(--purple-dim);
--features-badge-bd: var(--purple-bd2);
--features-badge-color: var(--neon-purple);
/* ============================================================
FEATURE ICONS (features list)
============================================================ */
--feat-icon-1-bg: var(--purple-dim);
--feat-icon-1-bd: var(--purple-bd);
--feat-icon-1-color: var(--neon-purple);
--feat-icon-2-bg: var(--cyan-dim2);
--feat-icon-2-bd: var(--cyan-bd2);
--feat-icon-2-color: var(--cyan);
--feat-icon-3-bg: var(--neon-green-dim);
--feat-icon-3-bd: rgba(0, 255, 136, 0.2);
--feat-icon-3-color: var(--neon-green);
--feat-icon-4-bg: var(--orange-dim);
--feat-icon-4-bd: var(--orange-bd);
--feat-icon-4-color: var(--orange);
/* ============================================================
AI CHAT WIDGET
============================================================ */
--chat-bg: rgba(21, 24, 34, 0.9);
--chat-bd: rgba(0, 212, 255, 0.12);
--chat-avatar-bg: linear-gradient(135deg, #7B5EA7, #00D4FF);
--chat-bubble-ai-bg: rgba(123, 94, 167, 0.1);
--chat-bubble-ai-bd: rgba(123, 94, 167, 0.2);
--chat-bubble-user-bg: rgba(0, 212, 255, 0.08);
--chat-bubble-user-bd: rgba(0, 212, 255, 0.15);
/* ============================================================
SECTION LABEL (маленький бейдж над заголовком)
============================================================ */
--label-bg: rgba(79, 142, 247, 0.08);
--label-bd: rgba(79, 142, 247, 0.2);
--label-color: var(--blue);
/* ============================================================
BORDER RADIUS
============================================================ */
--r: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-pill: 100px;
/* ============================================================
SHADOWS
============================================================ */
--shadow-card: 0 2px 0 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.45);
--shadow-glow-blue: 0 0 20px rgba(79, 142, 247, 0.3);
--shadow-glow-green: 0 0 20px rgba(34, 197, 94, 0.3);
--shadow-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
/* ============================================================
TRANSITIONS
============================================================ */
--t: .15s ease;
--t-med: .25s ease;
--t-slow: .4s ease;
--ease-out: cubic-bezier(.16, 1, .3, 1); /* framer-motion easeOut */
/* ============================================================
LAYOUT
============================================================ */
--max-w: 96rem;
--nav-h: 56px;
--ticker-h: 30px;
/* ============================================================
BANK COLORS — card-top-bar
Используйте класс .bar-{name} на карточке банка.
Добавляет цветную полоску 3px сверху карточки.
-------------------------------------------------------
Цвета максимально приближены к фирменным цветам банков,
но адаптированы для тёмного фона (чуть ярче оригинала).
============================================================ */
/* Т-Банк (бывший Тинькофф) — жёлтый */
--bank-tbank: #FFD700;
--bank-tbank-dim: rgba(255, 215, 0, 0.08);
/* Сбербанк — зелёный */
--bank-sber: #21A038;
--bank-sber-dim: rgba(33, 160, 56, 0.08);
/* ВТБ — синий */
--bank-vtb: #009FDF;
--bank-vtb-dim: rgba(0, 159, 223, 0.08);
/* Альфа-Банк — красный */
--bank-alfa: #EF3124;
--bank-alfa-dim: rgba(239, 49, 36, 0.08);
/* Газпромбанк — тёмно-синий / стальной */
--bank-gazprom: #1E5FA8;
--bank-gazprom-dim: rgba(30, 95, 168, 0.08);
/* Открытие — оранжевый */
--bank-open: #FF6600;
--bank-open-dim: rgba(255, 102, 0, 0.08);
/* Россельхозбанк — зелёный (другой оттенок) */
--bank-rshb: #00A651;
--bank-rshb-dim: rgba(0, 166, 81, 0.08);
/* Райффайзен — жёлтый */
--bank-raiffeisen: #FFD100;
--bank-raiffeisen-dim: rgba(255, 209, 0, 0.08);
/* Совкомбанк — фиолетовый */
--bank-sovcom: #8B2FC9;
--bank-sovcom-dim: rgba(139, 47, 201, 0.08);
/* МТС Банк — красный (другой оттенок) */
--bank-mts: #E30611;
--bank-mts-dim: rgba(227, 6, 17, 0.08);
/* Почта Банк — синий */
--bank-pochta: #0066CC;
--bank-pochta-dim: rgba(0, 102, 204, 0.08);
/* Росбанк — розово-красный */
--bank-rosbank: #D6001C;
--bank-rosbank-dim: rgba(214, 0, 28, 0.08);
/* Уралсиб — синий */
--bank-uralsib: #003DA5;
--bank-uralsib-dim: rgba(0, 61, 165, 0.08);
/* Универсальные цвета для bar (если банк не в списке) */
--bank-default: var(--cyan);
--bank-default-dim: var(--cyan-dim);
/* ============================================================
CARD RATE & AMOUNT COLORS
Управляют цветом ставки и суммы во всех карточках банков.
Меняйте здесь — изменится везде.
============================================================ */
--card-rate-color: var(--neon-green); /* процентная ставка — всегда зелёная */
--card-rate-bg: rgba(0, 230, 118, 0.08);
--card-rate-bd: rgba(0, 230, 118, 0.2);
--card-amount-color: var(--cyan); /* сумма — всегда синяя (cyan) */
}
/* ============================================================
CARD TOP BAR — цветные полоски банков
Использование: добавьте класс .bar-{name} к карточке банка
Пример: ...
Полоска 3px сверху — тонкий акцент, не перебивает данные.
Фон карточки при hover слегка подсвечивается цветом банка.
============================================================ */
/* Базовый стиль полоски — переопределяется через --_bar-color */
[class*="bar-"] {
--_bar-color: var(--bank-default);
--_bar-dim: var(--bank-default-dim);
/* Градиент: яркий цвет банка слева → прозрачность справа */
border-top: none !important;
position: relative;
}
[class*="bar-"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--_bar-color) 0%, transparent 75%);
border-radius: inherit;
pointer-events: none;
}
[class*="bar-"]:hover {
background: color-mix(in srgb, var(--bg-card-h) 92%, var(--_bar-color) 8%) !important;
}
.bar-tbank { --_bar-color: var(--bank-tbank); --_bar-dim: var(--bank-tbank-dim); }
.bar-sber { --_bar-color: var(--bank-sber); --_bar-dim: var(--bank-sber-dim); }
.bar-vtb { --_bar-color: var(--bank-vtb); --_bar-dim: var(--bank-vtb-dim); }
.bar-alfa { --_bar-color: var(--bank-alfa); --_bar-dim: var(--bank-alfa-dim); }
.bar-gazprom { --_bar-color: var(--bank-gazprom); --_bar-dim: var(--bank-gazprom-dim); }
.bar-open { --_bar-color: var(--bank-open); --_bar-dim: var(--bank-open-dim); }
.bar-rshb { --_bar-color: var(--bank-rshb); --_bar-dim: var(--bank-rshb-dim); }
.bar-raiffeisen { --_bar-color: var(--bank-raiffeisen); --_bar-dim: var(--bank-raiffeisen-dim); }
.bar-sovcom { --_bar-color: var(--bank-sovcom); --_bar-dim: var(--bank-sovcom-dim); }
.bar-mts { --_bar-color: var(--bank-mts); --_bar-dim: var(--bank-mts-dim); }
.bar-pochta { --_bar-color: var(--bank-pochta); --_bar-dim: var(--bank-pochta-dim); }
.bar-rosbank { --_bar-color: var(--bank-rosbank); --_bar-dim: var(--bank-rosbank-dim); }
.bar-uralsib { --_bar-color: var(--bank-uralsib); --_bar-dim: var(--bank-uralsib-dim); }
/* ============================================================
CARD RATE — зелёный блок ставки
Использование: ...
============================================================ */
.card-rate-block {
background: var(--card-rate-bg);
border: 1px solid var(--card-rate-bd);
border-radius: var(--r);
padding: 12px 16px;
}
.card-rate-value {
color: var(--card-rate-color);
font-size: 28px;
font-weight: 800;
font-family: 'JetBrains Mono', 'Courier New', monospace;
line-height: 1;
}
.card-rate-label {
color: var(--card-rate-color);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.8;
margin-bottom: 4px;
}
.card-rate-sub {
color: var(--card-rate-color);
font-size: 11px;
opacity: 0.7;
margin-top: 4px;
}
/* ============================================================
CARD AMOUNT — синяя сумма
Использование: до 7 млн ₽
============================================================ */
.card-amount {
color: var(--card-amount-color);
font-weight: 700;
}