:root { --bg: #f5f5f5; --surface: #ffffff; --surface-alt: #fef1e2; --text: #1a1a1a; --text-muted: #666666; --border: #e6e6e6; --primary: #ff8a16; --primary-dark: #e67a0f; --accent: #60b258; --paid: #ff8a16; --paid-soft: #fef1e2; --crypto: #7c3aed; --crypto-soft: #ede9fe; --radius: 12px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.06); --font: "Golos Text", Arial, sans-serif; --font-heading: "Commissioner", "Golos Text", Arial, sans-serif; /* Organization logo slots (banks, MFOs) — fixed canvas, object-fit: contain */ --org-logo-xs: 28px; --org-logo-md-w: 56px; --org-logo-md-h: 40px; --org-logo-lg-w: 72px; --org-logo-lg-h: 52px; --org-logo-xl-w: 88px; --org-logo-xl-h: 64px; } /* ── Dark theme ─────────────────────────────────────────────── Toggled via [data-theme="dark"] on (see theme-toggle.js). Most components already read color tokens below, so overriding them here re-themes header, cards, tables, footer, etc. */ :root[data-theme="dark"] { --bg: #0f1115; --surface: #171a21; --surface-alt: #1f232c; --text: #eef0f3; --text-muted: #9aa2ae; --border: #2a2f3a; --primary: #ff9a35; --primary-dark: #ff8a16; --accent: #4ade80; --paid: #ff9a35; --paid-soft: #3a2a17; --crypto: #a78bfa; --crypto-soft: #2a2340; --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .section-title, .page-hero h1, .hero h1, .home-hero h1, .content-page__head h1, .product-page h1, .static-page h1, .static-page__body h1, .list-card h2, .sitemap h1, .sitemap h2, .blog-card h2, .cabinet-card__head h2 { font-family: var(--font-heading); } a { color: #1a1a1a; text-decoration: none; } a:hover { color: var(--primary-dark); } .container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; } .container.page { background: color-mix(in srgb, var(--surface-alt) 50%, transparent); border-radius: 18px; padding: 20px; margin-bottom: 4px; } .site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--text); } .brand__mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #ffb347); display: grid; place-items: center; color: #fff; font-size: 0.85rem; } .nav-tabs { display: flex; gap: 8px; background: var(--bg); padding: 4px; border-radius: 999px; } .nav-tabs a { padding: 8px 16px; border-radius: 999px; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; } .nav-tabs a.is-active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .nav-tabs a.nav-tabs__crypto.is-active { color: var(--crypto); } .hero { padding: 28px 0 12px; } .hero h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; } .hero p { margin: 0; color: var(--text-muted); max-width: 640px; } .city-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; } .city-chip { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 0.875rem; font-weight: 500; } .city-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .city-highlights { display: block; margin-bottom: 4px; } .highlight-card { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .highlight-card__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .highlight-card__value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } .highlight-card__sub { font-size: 0.8rem; color: var(--text-muted); } .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; padding: 14px 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); } .toolbar select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); font: inherit; } .rates-table-wrap { overflow-x: auto; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .rates-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .rates-table th, .rates-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; } .rates-table th { background: var(--surface-alt); font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); } .rates-table tr:hover td { background: #fafbff; } .rates-table .office-name { font-weight: 600; min-width: 180px; } .rates-table .rate { font-variant-numeric: tabular-nums; font-weight: 600; } .rates-table .rate.is-empty { color: #cbd5e1; font-weight: 400; } .badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; } .badge--paid { background: var(--paid-soft); color: #b45309; } .badge--crypto { background: var(--crypto-soft); color: var(--crypto); } .badge--stale { background: #f1f5f9; color: #64748b; text-transform: none; font-weight: 600; font-size: 0.72rem; } /* "Only fresh" toggle on the exchange city page */ .fresh-toggle-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; } .fresh-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); font-size: 0.875rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .fresh-toggle:hover { border-color: rgba(234, 88, 12, 0.4); } .fresh-toggle__dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; transition: background 0.15s; } .fresh-toggle.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } .fresh-toggle.is-active .fresh-toggle__dot { background: var(--primary); } .fresh-toggle__hint { font-size: 0.8125rem; color: var(--text-muted); } /* Exchange offices table header (title + "only fresh" toggle) */ .exchange-table-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; padding: 10px 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border); border-radius: 12px 12px 0 0; border-bottom: none; } .exchange-table-header__title { font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); } .exchange-table-header + .exchange-offices-mobile, .exchange-table-header + .rates-table-wrap { border-radius: 0 0 12px 12px; } /* Clickable rate rows in ticker cards */ .home-ticker-card__label { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .home-ticker-card__rate--clickable { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: background 0.15s; } .home-ticker-card__rate--clickable:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } /* Best-offices modal */ .best-offices-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .best-offices-modal.is-open { display: flex; } .best-offices-modal__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } .best-offices-modal__dialog { position: relative; width: 100%; max-width: 540px; max-height: 80vh; display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); overflow: hidden; } .best-offices-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border, #e2e8f0); } .best-offices-modal__title { margin: 0; font-size: 1.125rem; font-weight: 800; } .best-offices-modal__close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted, #64748b); padding: 4px 8px; border-radius: 6px; } .best-offices-modal__close:hover { background: #f1f5f9; } .best-offices-modal__body { padding: 16px 24px 24px; overflow-y: auto; } .best-offices-modal__subtitle { margin: 0 0 16px; padding: 10px 14px; background: color-mix(in srgb, var(--primary, #f97316) 8%, transparent); border-radius: 10px; font-size: 0.875rem; font-weight: 600; color: var(--text); } .best-offices-modal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .best-offices-modal__item { padding: 14px 16px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; transition: border-color 0.15s; } .best-offices-modal__item:hover { border-color: rgba(234, 88, 12, 0.3); } .best-offices-modal__item.is-best { border-color: var(--primary, #f97316); background: color-mix(in srgb, var(--primary, #f97316) 6%, transparent); } .best-offices-modal__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .best-offices-modal__name { font-weight: 700; font-size: 0.9375rem; text-decoration: none; color: var(--text, #1e293b); flex: 1; } .best-offices-modal__name:hover { color: var(--primary, #f97316); } .best-offices-modal__best { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; background: var(--primary, #f97316); color: #fff; white-space: nowrap; } .best-offices-modal__rate-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .best-offices-modal__rate { font-size: 1rem; font-variant-numeric: tabular-nums; } .best-offices-modal__rate strong { font-weight: 800; font-size: 1.125rem; color: var(--primary, #f97316); } .best-offices-modal__calc { font-size: 0.875rem; color: var(--text, #1e293b); } .best-offices-modal__calc strong { font-weight: 800; font-variant-numeric: tabular-nums; } .best-offices-modal__addr { margin: 4px 0 0; font-size: 0.8125rem; color: var(--text-muted, #64748b); } .best-offices-modal__empty, .best-offices-modal__loading { text-align: center; color: var(--text-muted, #64748b); padding: 24px; } .pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 24px 0; } .pagination a, .pagination span { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.875rem; transition: border-color 0.15s, background 0.15s, color 0.15s; } .pagination a:hover { border-color: var(--primary); color: var(--primary); } .pagination .is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .pagination .is-disabled, .pagination .is-ellipsis { opacity: 0.45; cursor: default; } .pagination-summary { margin: -12px 0 24px; text-align: center; font-size: 0.875rem; color: var(--text-muted); } .nbk-table .nbk-code { font-weight: 600; letter-spacing: 0.04em; } .nbk-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; } .nbk-delta--up { background: #ecfdf5; color: #047857; } .nbk-delta--down { background: #fef2f2; color: #b91c1c; } .profile-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; margin: 24px 0 40px; } @media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } } .card { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card h2 { margin: 0 0 16px; font-size: 1.1rem; } .meta-list { list-style: none; padding: 0; margin: 0; } .meta-list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; } .meta-list strong { min-width: 100px; color: var(--text-muted); font-size: 0.85rem; } .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .footer { margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; text-align: center; } .btn { display: inline-flex; padding: 10px 18px; border-radius: 10px; font-weight: 600; } .btn--primary { background: var(--primary); color: #fff; } .cross-link { margin: 4px 0; padding: 14px 18px; background: var(--crypto-soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cross-link a { color: var(--crypto); font-weight: 700; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; white-space: nowrap; } .cross-link a:hover { border-color: var(--primary); color: var(--primary); } .cross-link__btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--crypto); font: 700 0.875rem system-ui, sans-serif; cursor: pointer; white-space: nowrap; } .cross-link__btn:hover { border-color: var(--primary); color: var(--primary); } .rates-modal__field select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text); font: 600 0.9375rem system-ui, sans-serif; width: 100%; } .calculator-card { margin: 20px 0; } .calculator-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: stretch; } .calculator-form--compact .calculator-form__row { grid-template-columns: minmax(100px, 1fr) minmax(90px, 1fr) minmax(110px, 1.2fr) auto; align-items: center; } @media (max-width: 640px) { .calculator-form--compact .calculator-form__row { grid-template-columns: 1fr 1fr; } .calculator-form--compact .calculator-form__row .btn { grid-column: 1 / -1; } } .field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .field-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; } .field-input--rate { max-width: 120px; } .section-title { margin: 28px 0 16px; font-size: 1.25rem; } .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .result-card h3 { margin: 0 0 8px; font-size: 1rem; } .result-card__address { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 12px; } .result-card__totals { display: flex; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .result-card__totals span { display: block; font-size: 0.75rem; color: var(--text-muted); } .cabinet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 20px 0 40px; } .cabinet-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .cabinet-card__head h2 { margin: 0; font-size: 1.05rem; } .cabinet-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .auth-card { max-width: 420px; margin: 24px auto; } .auth-form label { display: block; margin-bottom: 14px; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } /* Bulletproof inline checkbox rows in auth forms (force checkbox + text on one line) */ .auth-card .checkbox-row, .auth-form .checkbox-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 14px 0; } .auth-card .checkbox-row > input[type="checkbox"], .auth-form .checkbox-row > input[type="checkbox"] { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; } .auth-card .checkbox-row > span, .auth-form .checkbox-row > span { flex: 1 1 auto; line-height: 1.45; } .alert { padding: 12px 16px; border-radius: 10px; margin: 16px 0; } .alert--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .alert--success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .alert--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .rates-form__actions { display: flex; gap: 12px; margin-top: 20px; } .rates-table tr.is-locked { opacity: 0.45; } .rate-hint { font-size: 0.8rem; color: var(--text-muted); } .offices-map { height: 420px; border-radius: 12px; overflow: hidden; } .map-section { margin-bottom: 24px; } .office-form label { display: block; margin-bottom: 14px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .form-hint { font-size: 0.85rem; color: var(--text-muted); margin: 8px 0 16px; padding: 10px 12px; background: var(--surface-alt); border-radius: 8px; } .phone-block { padding: 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fafbff; } /* ── Homepage ─────────────────────────────────────────────── */ .home-page { padding: 16px 0 56px; } .home-tv-ticker { margin: 0 0 4px; height: 46px; overflow: hidden; background: transparent; border: none; } .home-tv-ticker tv-ticker-tape { display: block; } .home-tv-ticker .tradingview-widget-copyright { display: none !important; } .home-hero-shell { position: relative; margin: 0 0 32px; padding: clamp(24px, 4vw, 40px) clamp(20px, 3.5vw, 36px); border-radius: 22px; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 138, 22, 0.14) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 179, 71, 0.12) 0%, transparent 50%), linear-gradient(160deg, #fff 0%, #fffaf5 48%, #fff5eb 100%); border: 1px solid #ffe4c4; box-shadow: 0 18px 48px rgba(255, 138, 22, 0.11); overflow: hidden; } .home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px); gap: clamp(24px, 3.5vw, 36px); align-items: stretch; margin-bottom: 0; } .home-hero__lead { margin: 0; font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.5; color: var(--text-muted); max-width: 54ch; } .home-hero__deals-heading { margin: clamp(20px, 2.5vw, 28px) 0 12px; font-size: 22px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); } .home-hero__deals-slider { margin-top: 8px; min-width: 0; } /* Статичная сетка предложений: все карточки видны сразу */ .home-hero__deals-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; min-width: 0; } .home-hero__deals-item { display: flex; min-width: 0; } .home-hero__deals-item--wide { grid-column: 1 / -1; } .home-hero__deals-item > .home-deal-card { flex: 1; width: 100%; box-sizing: border-box; } .home-hero__deals-item .home-deal-card { padding: 14px 16px; } .home-hero__deals-item .home-deal-card__title { margin-bottom: 6px; font-size: 0.9375rem; } .home-hero__deals-viewport { overflow: hidden; border-radius: 16px; } .home-hero__deals-track { display: flex; align-items: stretch; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .home-hero__deals-slide { flex: 0 0 100%; min-width: 0; display: flex; padding: 2px; box-sizing: border-box; } .home-hero__deals-slide > .home-deal-card { flex: 1; width: 100%; box-sizing: border-box; } .home-hero__deals-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; } .home-hero__deals-nav[hidden] { display: none !important; } .home-hero__deals-btn { flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 1px solid #ffd4a8; border-radius: 999px; background: #fff; color: var(--primary); font-size: 1.375rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 138, 22, 0.12); transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s; } .home-hero__deals-btn:hover { border-color: var(--primary); color: #fff; background: var(--primary); transform: scale(1.05); } .home-hero__deals-dots { display: flex; align-items: center; gap: 8px; } .home-hero__deals-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px; background: #e8dccf; cursor: pointer; transition: width 0.25s ease, background 0.25s ease; } .home-hero__deals-dot.is-active { width: 28px; background: var(--primary); } .home-deal-card { display: block; padding: 18px 20px; border-radius: 16px; border: 1px solid #ebe6df; background: #fff; text-decoration: none; color: inherit; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); transition: border-color 0.2s, box-shadow 0.2s; } .home-deal-card--rate { background: linear-gradient(160deg, #fffaf5 0%, #fff 70%); border-color: #f5e6d6; } .home-deal-card--rate .home-deal-card__title { font-size: 1.125rem; } .home-deal-card--rate .home-deal-card__tag { font-size: 0.6875rem; } .home-deal-card--rate .home-market-places__label { font-size: 0.8125rem; } .home-deal-card--rate .home-market-places__rate { font-size: 1.5rem; } .home-deal-card--rate .home-market-places__office { font-size: 0.8125rem; } .home-deal-card--credit { background: linear-gradient(160deg, #f8fbff 0%, #fff 70%); border-color: #e3edf8; } .home-deal-card--deposit { background: linear-gradient(160deg, #f6fdf9 0%, #fff 70%); border-color: #dff5ea; } .home-deal-card--bank { background: linear-gradient(160deg, #f3f8ff 0%, #fff 70%); border-color: #d6e4f5; } .home-deal-card--mfo { background: linear-gradient(160deg, #fdf4ff 0%, #fff 70%); border-color: #ecd4f5; } .home-deal-card:hover { border-color: #ffd4a8; box-shadow: 0 10px 28px rgba(255, 138, 22, 0.12); color: inherit; } .home-deal-card__tag { display: inline-block; margin-bottom: 6px; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); line-height: 1.2; } .home-deal-card--credit .home-deal-card__tag { color: #2563eb; } .home-deal-card--deposit .home-deal-card__tag { color: #059669; } .home-deal-card--bank .home-deal-card__tag { color: #1d4ed8; } .home-deal-card--mfo .home-deal-card__tag { color: #7c3aed; } .home-deal-card__title { display: block; font-size: clamp(0.9375rem, 1.5vw, 1.125rem); font-weight: 800; line-height: 1.25; margin-bottom: 8px; color: #1a1a1a; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .home-deal-card__metrics { display: flex; flex-wrap: wrap; gap: 8px 20px; } .home-deal-card__metric small { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; } .home-deal-card__metric em { font-style: normal; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); font-weight: 800; font-variant-numeric: tabular-nums; color: #1a1a1a; line-height: 1.1; } .home-deal-card__link, .home-deal-card__meta { display: block; margin-top: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); line-height: 1.2; } .home-deal-card__link { color: var(--primary); } .home-map-section { margin-bottom: 36px; padding: 22px 22px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); } .home-map-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .city-bar--map { margin-bottom: 14px; } .home-map-wrap { position: relative; } .offices-map--home { height: 460px; border: 1px solid var(--border); } .home-map-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; font-size: 0.8125rem; color: var(--text-muted); } .home-map-legend__item { display: inline-flex; align-items: center; gap: 6px; } .home-map-legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .home-map-legend__dot--buy { background: #16a34a; } .home-map-legend__dot--sale { background: #ea580c; } .home-map-legend__dot--paid { background: #7c3aed; } .home-map-marker-wrap { background: transparent; border: none; } .home-map-marker { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--marker-hue, 120), 65%, 42%); color: #fff; font-size: 0.6875rem; font-weight: 800; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .home-map-marker.is-paid { box-shadow: 0 0 0 2px #7c3aed, 0 2px 8px rgba(0, 0, 0, 0.25); } .home-map-popup__addr { margin: 4px 0 8px; font-size: 0.8125rem; color: var(--text-muted); } .home-map-popup__phone { margin: 0 0 8px; font-size: 0.875rem; font-weight: 600; } .home-map-popup__phone a { color: var(--primary, #ff8a16); text-decoration: none; } .home-map-popup__phone a:hover { text-decoration: underline; } .home-map-popup__best { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #60b258) 16%, transparent); color: var(--accent, #60b258); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; } .home-map-popup__rates { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin-bottom: 4px; } .home-map-popup__rates td { padding: 3px 8px 3px 0; font-variant-numeric: tabular-nums; } .home-map-popup__rates td:first-child { font-weight: 700; width: 2.5rem; } .home-map-popup__hint { color: var(--text-muted); font-size: 0.75rem; } .home-hero__content { padding: 0; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; } .home-hero__eyebrow { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); } .home-hero h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 3.8vw, 2.625rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; } .home-hero__text { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--text-muted); line-height: 1.65; max-width: 580px; } .home-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .btn--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .btn--ghost:hover { border-color: var(--primary); color: var(--primary); } .home-hero__spotlight { padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(145deg, #e67a0f 0%, #ff8a16 55%, #ffb347 100%); color: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; } .home-hero__spotlight-label { font-size: 0.8rem; font-weight: 600; opacity: 0.85; letter-spacing: 0.02em; } .home-hero__spotlight-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .home-hero__spotlight-rates strong { display: block; font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; } .home-hero__spotlight-dir { font-size: 0.75rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.04em; } .home-hero__spotlight-link { margin-top: auto; color: #fff; font-size: 0.875rem; font-weight: 600; opacity: 0.95; } .home-hero__spotlight-link:hover { color: #fff; opacity: 1; text-decoration: underline; } .home-hero__calculator { padding: clamp(20px, 2.5vw, 26px); border-radius: 18px; background: #fff; border: 1px solid #ffe4c4; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; box-sizing: border-box; } .home-hero__assistant { padding: clamp(16px, 2vw, 22px); border-radius: 18px; background: #fff; border: 1px solid #ffe4c4; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; box-sizing: border-box; } .home-hero__assistant-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #faf6f1; border: 1px solid #f0e6da; } .home-hero__assistant-tab { flex: 1; min-height: 40px; padding: 8px 12px; border: none; border-radius: 9px; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .home-hero__assistant-tab.is-active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .home-hero__assistant-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; } .home-hero__assistant-panel[hidden] { display: none !important; } .home-hero__assistant .home-hero__assistant-tab { font-size: 0.9375rem; } .home-hero__assistant .home-chat__title { font-size: clamp(1.125rem, 1.8vw, 1.375rem); } .home-hero__assistant .home-chat__sub { font-size: 0.9375rem; } .home-hero__assistant .home-chat__message { font-size: 1.0625rem; line-height: 1.55; padding: 12px 14px; } .home-hero__assistant .home-chat__prompt { font-size: 0.8125rem; padding: 7px 12px; } .home-hero__assistant .home-chat__input { font-size: 1rem; } .home-hero__assistant .home-chat__disclaimer { font-size: 0.75rem; } .home-hero__calculator-inner { display: flex; flex-direction: column; gap: 14px; } .home-chat { display: flex; flex-direction: column; gap: 12px; min-height: 380px; } .home-chat.is-loading .home-chat__send { opacity: 0.7; pointer-events: none; } .home-chat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #f0e6da; } .home-chat__title { margin: 0 0 2px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 800; color: #1a1a1a; } .home-chat__sub { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } .home-chat__city { max-width: 180px; } .home-chat__messages { flex: 1; min-height: 160px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; } .home-chat__message { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 0.875rem; line-height: 1.45; } .home-chat__message p { margin: 0; } .home-chat__message p + p { margin-top: 8px; } .home-chat__message--assistant { align-self: flex-start; background: #f8fafc; border: 1px solid #e8edf3; color: #1a1a1a; } .home-chat__message--user { align-self: flex-end; background: linear-gradient(135deg, #fff4e8 0%, #ffe8cc 100%); border: 1px solid #ffd4a8; color: #1a1a1a; } .home-chat__message--typing { opacity: 0.75; } .home-chat__message a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .home-chat__message a:hover { text-decoration: underline; } .home-chat__error { color: #b45309; } .home-chat__prompts { display: flex; flex-wrap: wrap; gap: 6px; } .home-chat__prompt { padding: 6px 10px; border-radius: 999px; border: 1px solid #e8dccf; background: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; color: #5c534a; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .home-chat__prompt:hover { border-color: var(--primary); background: #fffaf5; color: var(--primary); } .home-chat__form { display: flex; gap: 8px; align-items: flex-end; } .home-chat__input { flex: 1; min-height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 12px; font: inherit; font-size: 0.9375rem; resize: vertical; background: #fafafa; } .home-chat__input:focus { outline: none; border-color: var(--primary); background: #fff; } .home-chat__send { flex-shrink: 0; min-height: 44px; padding: 0 16px; } .home-chat__disclaimer { margin: 0; font-size: 0.6875rem; line-height: 1.4; color: var(--text-muted); } .home-hero__calculator-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #f0e6da; } .home-hero__calculator-intro { flex: 1; min-width: 0; } .home-hero__calculator-title { margin: 0 0 2px; font-size: clamp(1.125rem, 1.8vw, 1.3125rem); font-weight: 800; color: #1a1a1a; letter-spacing: -0.02em; } .home-hero__calculator-sub { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } .home-hero__calculator-form { display: flex; flex-direction: column; gap: 10px; } .home-hero__calculator-row { display: flex; gap: 10px; align-items: stretch; } .home-hero__city-select { flex: 1; min-width: 120px; max-width: 200px; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 0.9375rem; font-weight: 700; border: 1px solid #ddd; border-radius: 12px; background: #fafafa; color: var(--primary); } .home-hero__city-select:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 138, 22, 0.18); } .home-hero__field { flex: 1; min-width: 0; } .home-hero__field--grow { flex: 1.4; } .home-hero__field-label { display: block; margin-bottom: 5px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .home-hero__field-input { display: block; width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 0.9375rem; font-weight: 500; border: 1px solid #ddd; border-radius: 12px; background: #fafafa; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .home-hero__field-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 138, 22, 0.18); } .home-hero__calculator-form.is-loading { opacity: 0.72; pointer-events: none; } .home-hero__calculator-form.is-loading .home-hero__calc-btn { position: relative; color: transparent; } .home-hero__calculator-form.is-loading .home-hero__calc-btn::after { content: attr(data-loading-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .home-hero__calc-btn { flex-shrink: 0; min-height: 44px; padding: 0 20px; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; border-radius: 12px; } .home-hero__calc-result { padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #fff8f0 0%, #fff 100%); border: 1px solid #ffe4c4; } .home-hero__calc-result-badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); background: rgba(255, 138, 22, 0.12); border-radius: 999px; line-height: 1.2; } .home-market-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .home-market-places--deal { margin-bottom: 8px; } .home-market-places--calc { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ffe4c4; } .home-market-places__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .home-market-places__label { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); } .home-market-places__rate { color: #1a1a1a; font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .home-market-places__office { font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); line-height: 1.3; letter-spacing: 0.01em; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-hero__calc-operation { display: flex; flex-direction: column; gap: 0; } .home-hero__calc-result-label { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); } .home-hero__calc-result .home-hero__calc-result-office { margin: 10px 0 0; font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); line-height: 1.3; letter-spacing: 0.01em; opacity: 0.85; max-width: none; } .home-hero__calc-result-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .home-hero__calc-result-rate { display: flex; flex-direction: column; gap: 4px; } .home-hero__calc-result-rate span { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .home-hero__calc-result-rate strong { color: #1a1a1a; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .home-hero__calc-result-stats { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 6px; font-size: 0.875rem; color: var(--text-muted); } .home-hero__calc-result-stats div { display: flex; flex-direction: column; gap: 4px; } .home-hero__calc-result-stats span { font-size: 0.75rem; font-weight: 600; } .home-hero__calc-result-stats strong { color: #1a1a1a; font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; } .home-hero__calc-empty { margin: 0; font-size: 1rem; color: var(--text-muted); padding: 16px 18px; background: #fafafa; border-radius: 14px; } .home-hero__calc-hint { padding: 18px 20px; border-radius: 16px; background: linear-gradient(145deg, #fff8f0 0%, #fff 100%); border: 1px solid #ffe4c4; } .home-hero__calc-hint-label { display: block; font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; } .home-hero__calc-hint-rates { display: flex; gap: 24px; font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); } .home-hero__calculator-more { margin-top: auto; font-size: 0.9375rem; font-weight: 700; font-weight: 600; color: var(--primary); } .home-hero__calculator-more:hover { color: #c45a00; } .home-quick-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; } .home-quick-nav__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 22px; min-height: 168px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text); font-size: 0.9375rem; font-weight: 600; text-align: left; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .home-quick-nav__item:hover { border-color: #ffd4a8; box-shadow: 0 8px 28px rgba(255, 138, 22, 0.12); transform: translateY(-2px); color: var(--text); } .home-quick-nav__item--exchange:hover { border-color: #ffc285; box-shadow: 0 10px 32px rgba(255, 138, 22, 0.16); } .home-quick-nav__item--bank:hover { border-color: #93c5fd; box-shadow: 0 10px 32px rgba(37, 99, 235, 0.14); } .home-quick-nav__item--credit:hover { border-color: #fca5a5; box-shadow: 0 10px 32px rgba(220, 38, 38, 0.12); } .home-quick-nav__item--deposit:hover { border-color: #6ee7b7; box-shadow: 0 10px 32px rgba(16, 185, 129, 0.14); } .home-quick-nav__item--micro:hover { border-color: #fdba74; box-shadow: 0 10px 32px rgba(217, 119, 6, 0.14); } .home-quick-nav__item--crypto:hover { border-color: #c4b5fd; box-shadow: 0 10px 32px rgba(124, 58, 237, 0.14); color: var(--text); } .home-quick-nav__icon { display: block; line-height: 0; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14); transition: transform 0.2s ease, box-shadow 0.2s ease; } .home-quick-nav__item:hover .home-quick-nav__icon { transform: scale(1.06); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18); } .home-quick-nav__icon img { display: block; width: 56px; height: 56px; } .home-quick-nav__label { font-size: 1.0625rem; font-weight: 700; color: #1a1a1a; } .home-quick-nav__hint { margin-top: auto; font-size: 0.8125rem; font-weight: 400; color: #777; line-height: 1.4; } /* Компактная навигация по разделам: одна строка, иконка + текст */ .home-quick-nav--compact { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 32px; } .home-quick-nav--compact .home-quick-nav__item { flex-direction: row; align-items: center; gap: 10px; padding: 12px 16px; min-height: 0; border-radius: 12px; } .home-quick-nav--compact .home-quick-nav__icon, .home-quick-nav--compact .home-quick-nav__icon img { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; } .home-quick-nav--compact .home-quick-nav__label { font-size: 0.9375rem; white-space: nowrap; } @media (max-width: 1100px) { .home-quick-nav--compact { grid-template-columns: repeat(2, 1fr); } .home-quick-nav--compact .home-quick-nav__label { white-space: normal; } } @media (max-width: 640px) { .home-quick-nav--compact { grid-template-columns: repeat(2, 1fr); } .home-hero__deals-grid { grid-template-columns: 1fr; } } .home-section { margin-bottom: 4px; } .home-section--card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); } .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .section-title { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; } .section-subtitle { margin: 4px 0 0; font-size: 0.875rem; color: var(--text-muted); } .section-subtitle__updated { color: #16a34a; font-weight: 500; white-space: nowrap; } /* ── Курсы валют: единый блок с табами ──────────────────────── */ .home-rates-hub { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-radius: 18px; margin-bottom: 0; overflow: hidden; background: color-mix(in srgb, var(--surface-alt) 50%, transparent); } .home-rates-hub + .home-section { margin-top: 4px; } .home-block { background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); } .home-section > .home-block { background: color-mix(in srgb, var(--surface-alt) 50%, transparent); } .home-block--alt { background: color-mix(in srgb, var(--surface-alt) 50%, transparent); } .home-rates-hub > .home-block { background: color-mix(in srgb, var(--surface) 60%, transparent); } .home-block .rates-table-wrap { border: none; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } .home-block .home-credit-highlight { border: none; background: transparent; box-shadow: none; padding: 0; } .home-block .home-credit-highlight:hover { border: none; box-shadow: none; } .home-rates-hub .section-title { font-size: 1.4rem; } .home-rates-hub .section-subtitle { font-size: 1.0625rem; } .home-tabs { display: flex; gap: 6px; margin: 14px 0 18px; padding: 4px; border-radius: 12px; background: #f6f2ec; width: fit-content; max-width: 100%; overflow-x: auto; } .home-tabs__btn { flex-shrink: 0; padding: 9px 18px; border: none; border-radius: 9px; background: transparent; font-size: 0.9375rem; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .home-tabs__btn:hover { color: #1a1a1a; } .home-tabs__btn.is-active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); } .home-tabs__panel[hidden] { display: none !important; } .home-tabs__more { display: inline-block; margin-top: 16px; font-size: 0.875rem; font-weight: 700; color: var(--primary); text-decoration: none; } .home-tabs__more:hover { text-decoration: underline; color: var(--primary); } .home-tabs__note { margin: 12px 0 0; font-size: 0.8125rem; color: var(--text-muted); } /* Список городов в две колонки внутри таба */ .home-city-list--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; } @media (max-width: 860px) { .home-city-list--columns { grid-template-columns: 1fr; } .home-rates-hub { padding: 16px 14px; } } /* ── Новости: magazine layout на главной ───────────────────── */ .home-news-magazine { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } .home-news-magazine__featured { min-width: 0; } .home-news-magazine__list { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .home-news-card { display: flex; flex-direction: column; gap: 0; border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .home-news-card:hover { border-color: #ffd4a8; box-shadow: 0 10px 28px rgba(255, 138, 22, 0.12); transform: translateY(-2px); color: inherit; } .home-news-card--featured { height: 100%; } .home-news-card--compact { flex-direction: row; align-items: stretch; min-height: 108px; } .home-news-card__media { position: relative; flex-shrink: 0; } .home-news-card--featured .home-news-card__media { aspect-ratio: 16 / 9; } .home-news-card--compact .home-news-card__media { width: 112px; } .home-news-card__thumb { width: 100%; height: 100%; min-height: 100%; border-radius: 0; } .home-news-card--compact .home-news-card__thumb { width: 112px; min-height: 108px; } .home-news-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; flex: 1; min-width: 0; } .home-news-card--featured .home-news-card__body { padding: 18px 20px 20px; } .home-news-card--compact .home-news-card__body { padding: 12px 14px; justify-content: center; } .home-news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .home-news-card__source { color: var(--primary); } .home-news-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: #1a1a1a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-news-card--featured .home-news-card__title { font-size: 1.25rem; -webkit-line-clamp: 2; } .home-news-card--compact .home-news-card__title { font-size: 0.875rem; -webkit-line-clamp: 2; } .home-news-card__excerpt { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-news-card--compact .home-news-card__excerpt { display: none; } /* ── Блог на главной ─────────────────────────────────────── */ .home-blog-magazine { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } .home-blog-magazine__featured { min-width: 0; } .home-blog-magazine__list { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .home-blog-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; } .home-blog-card { display: flex; flex-direction: column; border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; height: 100%; } .home-blog-card:hover { border-color: #ffd4a8; box-shadow: 0 8px 24px rgba(255, 138, 22, 0.1); transform: translateY(-2px); color: inherit; } .home-blog-card--featured { height: 100%; } .home-blog-card--compact { flex-direction: row; align-items: stretch; min-height: 108px; height: auto; } .home-blog-card__media { aspect-ratio: 16 / 10; flex-shrink: 0; } .home-blog-card--featured .home-blog-card__media { aspect-ratio: 16 / 9; } .home-blog-card--compact .home-blog-card__media { width: 112px; aspect-ratio: auto; } .home-blog-card__thumb { width: 100%; height: 100%; border-radius: 0; } .home-blog-card--compact .home-blog-card__thumb { width: 112px; min-height: 108px; } .home-blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; min-width: 0; } .home-blog-card--featured .home-blog-card__body { padding: 18px 20px 20px; } .home-blog-card--compact .home-blog-card__body { padding: 12px 14px; justify-content: center; } .home-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .home-blog-card__rubric { font-size: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--primary); } .home-blog-card--featured .home-blog-card__meta { margin-bottom: 2px; } .home-blog-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; color: #1a1a1a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-blog-card--featured .home-blog-card__title { font-size: 1.25rem; -webkit-line-clamp: 3; } .home-blog-card--compact .home-blog-card__title { font-size: 0.875rem; -webkit-line-clamp: 2; } .home-blog-card__excerpt { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-blog-card--featured .home-blog-card__excerpt { font-size: 0.9375rem; line-height: 1.65; -webkit-line-clamp: 12; flex: 1; } .home-blog-card__more { margin-top: auto; padding-top: 4px; font-size: 0.875rem; font-weight: 600; color: var(--primary); } .home-blog-card--compact .home-blog-card__excerpt { display: none; } .home-blog-card__date { margin-top: auto; font-size: 0.75rem; color: var(--text-muted); } /* ── Превью контента (новости / блог) ──────────────────────── */ .content-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 88px; overflow: hidden; border-radius: 12px; background: #f3f4f6; } .content-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .content-thumb__logo { width: auto; height: auto; max-width: 72%; max-height: 72%; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)); } .content-thumb__label { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); font-size: 0.6875rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.04em; } .content-thumb--g0 { background: linear-gradient(135deg, #fff4e8 0%, #ffd4a8 100%); } .content-thumb--g1 { background: linear-gradient(135deg, #e8f4ff 0%, #93c5fd 100%); } .content-thumb--g2 { background: linear-gradient(135deg, #ecfdf5 0%, #6ee7b7 100%); } .content-thumb--g3 { background: linear-gradient(135deg, #fdf2f8 0%, #f9a8d4 100%); } .content-thumb--g4 { background: linear-gradient(135deg, #f5f3ff 0%, #c4b5fd 100%); } .content-thumb--g5 { background: linear-gradient(135deg, #fef9c3 0%, #fcd34d 100%); } .content-thumb--cover { background: #0f172a; } .content-thumb__cover { object-fit: cover; } .content-thumb--cover .content-thumb__cover { width: 100%; height: 100%; } .content-card__thumb-inner { border-radius: 0; min-height: 100%; } @media (max-width: 860px) { .home-news-magazine { grid-template-columns: 1fr; } .home-news-card--compact { flex-direction: column; min-height: 0; } .home-news-card--compact .home-news-card__media, .home-news-card--compact .home-news-card__thumb { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } .home-news-card--compact .home-news-card__excerpt { display: -webkit-box; } .home-blog-magazine { grid-template-columns: 1fr; } .home-blog-grid { grid-template-columns: 1fr; } .home-blog-card--compact { flex-direction: column; } .home-blog-card--compact .home-blog-card__media, .home-blog-card--compact .home-blog-card__thumb { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } .home-blog-card--featured { grid-row: auto; } } /* ── Хлебные крошки (общий партиал) ────────────────────────── */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 0.8125rem; color: var(--text-muted); } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--primary); } .breadcrumbs__sep { opacity: 0.5; } .breadcrumbs__current { color: #1a1a1a; font-weight: 600; } /* ── Комментарии (современный вид поверх легаси-разметки) ──── */ .comments--modern { margin: 28px 0 8px; } .comments--modern .comments__count { color: var(--text-muted); font-weight: 600; font-size: 0.9em; } .comments--modern .comments__body { display: flex; flex-direction: column; gap: 12px; } .comments--modern .comments__item { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .comments--modern .comments__item .comments__item { margin-top: 12px; margin-left: clamp(10px, 3vw, 28px); background: var(--surface-alt, #faf8f5); box-shadow: none; } .comments--modern .comments__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .comments--modern .avatar { border-radius: 999px; border: 1px solid var(--border); } .comments--modern .comments__name { font-weight: 700; } .comments--modern .comments__name a { color: inherit; text-decoration: none; } .comments--modern .comments__name a:hover { color: var(--primary); } .comments--modern .comments__date { font-size: 0.8125rem; color: var(--text-muted); } .comments--modern .comments__text { margin: 0 0 10px; line-height: 1.6; } .comments--modern .comments__btn { padding: 0; border: none; background: none; color: var(--primary); font-weight: 700; font-size: 0.8125rem; cursor: pointer; } .comments--modern .comments__btn:hover { text-decoration: underline; } .comments--modern .deleted_comment { color: var(--text-muted); font-style: italic; } .leave-comment--modern { margin: 24px 0 36px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); } .leave-comment--modern .leave-comment__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .leave-comment--modern .leave-comment__row { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--text-muted); } .leave-comment--modern .leave-comment__link { color: var(--primary); font-weight: 700; text-decoration: none; } .leave-comment--modern .leave-comment__link:hover { text-decoration: underline; } .leave-comment--modern .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .leave-comment--modern .form__input--textarea { width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box; } .leave-comment--modern .form__bottom { margin-top: 12px; } .comment_reply_form { display: grid; gap: 10px; margin-top: 12px; } @media (max-width: 640px) { .leave-comment--modern .form__row { grid-template-columns: 1fr; } } .author-page__experience { max-width: 800px; margin-bottom: 24px; } /* ── Кабинет и профиль пользователя ────────────────────────── */ .user-profile__head { display: flex; align-items: center; gap: 16px; } .user-profile__avatar { border-radius: 999px; border: 1px solid var(--border); background: #fff; } .user-profile__card, .office-card { max-width: 720px; } .user-edit__meta { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .office-card__title { margin: 0 0 12px; font-size: 1.125rem; } .office-stats { list-style: none; margin: 0; padding: 0; } .office-stats li { padding: 10px 0; line-height: 1.6; } .office-stats li + li { border-top: 1px solid var(--border); } .office-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ── Код подтверждения (auth/confirm) ──────────────────────── */ .confirm-code-hint { margin: 14px 0; padding: 12px 14px; background: var(--surface-alt, #faf8f5); border: 1px solid var(--border); border-radius: 12px; } .confirm-code { font-size: 1.05em; letter-spacing: 0.05em; word-break: break-all; } .section-link { flex-shrink: 0; padding-top: 4px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: #c45a00; } .home-currency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } /* ── Hero ticker (reference match) ─────────────────────────── */ .home-ticker { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 20px; } .home-ticker-card { flex: 1 1 200px; min-width: 200px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .home-ticker-card__flag { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center; display: block; background: var(--surface-alt); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(15, 23, 42, 0.22), 0 1px 2px rgba(15, 23, 42, 0.15); } span.home-ticker-card__flag { display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); } .home-ticker-card__pair { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.03em; margin-right: auto; } .home-ticker-card__rates { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; } .home-ticker-card__row { display: flex; align-items: center; gap: 7px; line-height: 1.1; white-space: nowrap; } .home-ticker-card__delta-slot { display: inline-block; min-width: 58px; text-align: right; } .home-ticker-card__dir { font-size: 0.9375rem; font-weight: 800; line-height: 1; width: 1em; text-align: center; } .home-ticker-card__dir--buy { color: var(--accent); } .home-ticker-card__dir--sale { color: #ef4444; } .home-ticker-card__row strong { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .home-ticker-card__delta { font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .home-ticker-card__delta.is-up { color: var(--accent); } .home-ticker-card__delta.is-down { color: #ef4444; } .home-ticker-card__avg { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* City exchange table polish */ .rates-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-alt) 35%, transparent); } :root[data-theme="dark"] .rates-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-alt) 25%, transparent); } /* ── Rates modal (ticker card click) ────────────────────────── */ .rates-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; } .rates-modal[hidden] { display: none; } .rates-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } .rates-modal__panel { position: relative; z-index: 1; width: min(460px, 100%); max-height: 88vh; overflow-y: auto; padding: 24px 24px 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); border: 1px solid color-mix(in srgb, var(--primary, #ff8a16) 14%, var(--border)); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .rates-modal__title { margin: 0 0 18px; font-size: 1.125rem; font-weight: 800; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .rates-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--surface-alt) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text-muted); font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.2s; } .rates-modal__close:hover { background: var(--border); color: var(--text); transform: rotate(90deg); } .rates-modal__calc { padding: 16px; background: color-mix(in srgb, var(--surface-alt) 50%, transparent); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; } .rates-modal__calc-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; } .rates-modal__field { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; flex: 1; } .rates-modal__field input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text); font: 600 0.9375rem system-ui, sans-serif; width: 100%; } .rates-modal__toggle { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--surface) 50%, transparent); } .rates-modal__toggle button { padding: 9px 14px; border: none; background: transparent; color: var(--text-muted); font: 600 0.8125rem system-ui, sans-serif; cursor: pointer; } .rates-modal__toggle button.is-active { background: var(--primary); color: #fff; } .rates-modal__calc-result { font-size: 0.875rem; color: var(--text-muted); min-height: 1.2em; } .rates-modal__calc-line { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; } .rates-modal__calc-line strong { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .rates-modal__calc-office { margin-top: 4px; font-size: 0.8125rem; color: var(--primary); font-weight: 600; } .rates-modal__offices { display: flex; flex-direction: column; gap: 10px; } .rates-modal__office { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--surface) 50%, transparent); backdrop-filter: blur(8px); } .rates-modal__office:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(255, 138, 22, 0.14); } .rates-modal__office-tag { font-size: 0.6875rem; font-weight: 700; padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--surface-alt) 50%, transparent); color: var(--text-muted); white-space: nowrap; } .rates-modal__office-name { flex: 1; font-weight: 700; font-size: 0.9375rem; } .rates-modal__office-rate { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1rem; white-space: nowrap; } .rates-modal__empty { padding: 12px 14px; color: var(--text-muted); font-size: 0.875rem; border: 1px dashed var(--border); border-radius: 12px; text-align: center; } /* Delta arrows for rates table + city cards */ .rate-delta { font-size: 0.625rem; margin-left: 4px; font-weight: 700; } .rate-delta.is-up { color: var(--accent); } .rate-delta.is-down { color: #ef4444; } .home-city-card__delta { font-size: 0.625rem; font-weight: 700; margin-left: 3px; } .home-city-card__delta.is-up { color: var(--accent); } .home-city-card__delta.is-down { color: #ef4444; } .home-currency-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .home-currency-card__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border); } .home-currency-card__symbol { width: 28px; height: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 0.95rem; font-weight: 700; } .home-currency-card__code { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; } .home-currency-card__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); } .home-currency-card__rate { padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; } .home-currency-card__dir { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .home-currency-card__rate--buy .home-currency-card__dir { color: var(--accent); } .home-currency-card__rate--sale .home-currency-card__dir { color: #ef4444; } .home-currency-card__rate strong { font-size: 0.9375rem; font-variant-numeric: tabular-nums; } .home-currency-card__rate small { font-size: 0.6875rem; color: var(--text-muted); } .home-currency-card--soon { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-style: dashed; border-color: #c4b5fd; background: linear-gradient(160deg, #faf5ff 0%, #fff 55%); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .home-currency-card--soon:hover { border-color: #a78bfa; box-shadow: 0 6px 20px rgba(124, 58, 237, 0.15); transform: translateY(-2px); } .home-currency-card__symbol--btc { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); border-color: #f59e0b; color: #fff; font-size: 1.2rem; } .home-currency-card__symbol--usdt { background: linear-gradient(135deg, #059669 0%, #10b981 100%); border-color: #059669; color: #fff; font-size: 1rem; font-weight: 800; } .home-currency-card__symbol--eth { background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); border-color: #6366f1; color: #fff; font-size: 1.1rem; font-weight: 800; } .home-currency-card__badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--crypto-soft, #ede9fe); color: var(--crypto, #7c3aed); } .home-currency-card__soon { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 16px; text-align: center; } .home-currency-card__soon-text { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); } .home-currency-card__soon-link { font-size: 0.8125rem; font-weight: 700; color: var(--crypto, #7c3aed); } .home-currency-card--crypto { border-color: #ddd6fe; background: linear-gradient(160deg, #faf5ff 0%, #fff 45%); } .home-currency-card--crypto .home-currency-card__rate strong { font-size: 0.875rem; } .home-currency-card__crypto-link { display: block; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 0.75rem; font-weight: 700; color: var(--crypto, #7c3aed); text-decoration: none; background: var(--surface); } .home-currency-card__crypto-link:hover { color: var(--crypto, #7c3aed); text-decoration: underline; } .home-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; } .home-city-list { display: flex; flex-direction: column; gap: 6px; } .home-city-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 10px; color: inherit; text-decoration: none; transition: background 0.15s; } .home-city-row:hover { background: var(--surface-alt); } .home-city-row__name { font-weight: 600; font-size: 0.9rem; } .home-city-row__rates { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .home-city-row__meta { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; min-width: 52px; text-align: right; } .rate-pill { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; } .rate-pill--buy { background: #ecfdf5; color: #047857; } .rate-pill--sale { background: #fef2f2; color: #b91c1c; } .rate-pill--empty { background: #f1f5f9; color: #94a3b8; } .home-bank-table .office-name a { color: inherit; font-weight: 600; } .home-bank-table .office-name a:hover { color: var(--primary); } .home-offers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .home-micro-grid, .product-cards-grid--compact.home-micro-grid { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .home-micro-grid .product-list-card { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 14px; } .home-micro-grid .product-list-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(255, 138, 22, 0.15); } .home-micro-grid .product-list-card__metrics--tiles .product-list-card__metric, .product-list-card--offer .product-list-card__metrics--tiles .product-list-card__metric { background: transparent; padding: 4px 0; } .home-offer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 6px; } .home-offer-card__title { margin: 0; font-size: 0.875rem; line-height: 1.35; } .home-offer-card__mfo { margin: 0; font-size: 0.75rem; color: var(--text-muted); } .home-offer-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--border); } .home-offer-card__stats div { display: flex; flex-direction: column; gap: 2px; } .home-offer-card__stats dt { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .home-offer-card__stats dd { margin: 0; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; } .home-offer-card__link { margin-top: auto; font-size: 0.875rem; font-weight: 600; } .home-news-list { list-style: none; padding: 0; margin: 0; } .home-news-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border); } .home-news-item:last-child { border-bottom: none; padding-bottom: 0; } .home-news-item__date { font-size: 0.8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .home-news-item__title { color: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1.4; } .home-news-item__title:hover { color: var(--primary); } .home-news-item__bank { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } @media (max-width: 960px) { .home-hero-shell { padding: 20px 16px; border-radius: 18px; margin-bottom: 24px; } .home-hero { grid-template-columns: 1fr; } .home-hero__deals-grid { grid-template-columns: 1fr; } .home-hero__city-select { max-width: none; width: 100%; } .home-chat__head { flex-direction: column; align-items: stretch; } .home-chat__city { max-width: none; width: 100%; } .home-hero__calculator-head { flex-direction: column; align-items: stretch; } .home-hero__calculator-row { flex-direction: column; align-items: stretch; } .home-hero__calc-btn { width: 100%; } .home-city-row { grid-template-columns: 1fr; gap: 6px; } .home-city-row__rates { justify-content: flex-start; } .home-city-row__meta { text-align: left; } .offices-map--home { height: 360px; } .home-split { grid-template-columns: 1fr; } .home-quick-nav { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .home-page { padding: 12px 0 40px; } .home-hero-shell { padding: 16px 12px; margin-bottom: 20px; border-radius: 16px; } .home-hero h1 { font-size: 1.5rem; } .home-hero__deals-heading { margin-top: 16px; } .home-hero__assistant-tab { font-size: 0.8125rem; padding: 8px; } .home-chat { min-height: 0; } .home-chat__messages { min-height: 120px; max-height: 200px; } .home-chat__form { flex-direction: column; align-items: stretch; } .home-chat__send { width: 100%; } .home-market-places { grid-template-columns: 1fr; } .home-market-places__office { white-space: normal; } .home-tabs { width: 100%; overflow-x: visible; } .home-tabs__btn { flex: 1; min-width: 0; padding: 9px 6px; font-size: 0.8125rem; text-align: center; } .section-head { flex-direction: column; align-items: stretch; gap: 8px; } .section-link { white-space: normal; padding-top: 0; } .section-subtitle__updated { white-space: normal; } .home-rates-hub { padding: 14px 12px; border-radius: 14px; } .rates-table--readable { font-size: 0.875rem; } .rates-table--readable th, .rates-table--readable td { padding: 10px 8px; } .rates-table--readable .rate { font-size: 0.9375rem; } .rates-table--readable .office-name { font-size: 0.875rem; } .home-bank-table .bank-rate-link__logo { width: 24px; height: 24px; } .footer__legal .footer__inner { flex-direction: column; align-items: center; gap: 8px; text-align: center; } .home-hero__calculator-row { flex-direction: column; align-items: stretch; } .home-hero__calc-btn { width: 100%; } .home-quick-nav { grid-template-columns: 1fr; } .home-quick-nav__item { min-height: 0; } .home-currency-card__body { grid-template-columns: 1fr; } .home-city-row { grid-template-columns: 1fr; gap: 6px; } .home-city-row__rates { justify-content: flex-start; } .home-city-row__meta { text-align: left; } .home-news-item { grid-template-columns: 1fr; gap: 4px; } .home-offer-card__stats { grid-template-columns: 1fr 1fr; } } /* ── Unified public pages ─────────────────────────────────── */ .page { padding: 24px 0 56px; } .page-hero { margin-bottom: 16px; } .page-hero h1 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.15; } .page-hero__lead { margin: 0; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.65; max-width: 720px; } .page-hero__lead a { font-weight: 600; } .page-hero--compact { margin-bottom: 20px; } .page-hero--compact h1 { font-size: clamp(1.45rem, 2.8vw, 2rem); } /* ── Product search pages ── */ .search-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 18px 22px; background: linear-gradient(135deg, #fff7ed 0%, #fff 55%); border: 1px solid rgba(234, 88, 12, 0.18); border-radius: 14px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); } .search-context__main { display: flex; align-items: center; gap: 14px; min-width: 0; } .search-context__logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; flex-shrink: 0; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; } .search-context__logo--placeholder { display: flex; align-items: center; justify-content: center; width: var(--org-logo-md-w); height: var(--org-logo-md-h); font-size: 1.25rem; font-weight: 700; color: var(--primary); background: #fff; border: 1px solid var(--border); border-radius: 10px; } .search-context__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .search-context__name { display: block; margin-top: 2px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; } .search-context__actions { display: flex; flex-wrap: wrap; gap: 10px; } .product-search-form { border-radius: 16px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); } .platform-form__grid--primary { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .product-search-form__advanced { margin-top: 4px; border-top: 1px dashed #ececec; padding-top: 16px; } .product-search-form__advanced-toggle { cursor: pointer; font-size: 0.9375rem; font-weight: 600; color: var(--primary); list-style: none; user-select: none; } .product-search-form__advanced-toggle::-webkit-details-marker { display: none; } .product-search-form__advanced-toggle::before { content: "▸ "; } .product-search-form__advanced[open] .product-search-form__advanced-toggle::before { content: "▾ "; } .product-search-form__advanced .platform-form__grid { margin-top: 16px; } .search-results { margin-top: 8px; } .search-results__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .search-results__count { margin: 0; font-size: 1rem; color: var(--text); } .search-results__range { margin: 4px 0 0; font-size: 0.875rem; color: var(--text-muted); } .search-results__hint { font-size: 0.8125rem; font-weight: 600; color: #15803d; background: #dcfce7; padding: 6px 12px; border-radius: 999px; } .btn--sm { min-height: 36px; padding: 8px 14px; font-size: 0.875rem; } .list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 28px; } .list-card { padding: 24px 26px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s; } .list-card:hover { border-color: #ffd4a8; box-shadow: 0 8px 24px rgba(255, 138, 22, 0.1); } .list-card h2 { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.35; } .list-card h2 a { color: inherit; text-decoration: none; } .list-card h2 a:hover { color: #c45a00; } .list-card p { margin: 0; font-size: 0.875rem; color: var(--text-muted); } .list-card .muted { margin-top: 4px; font-size: 0.8125rem; color: #94a3b8; } .list-grid--mfo { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .list-card--mfo { padding: 0; overflow: hidden; } .list-card__link-wrap { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; height: 100%; color: inherit; text-decoration: none; } .list-card__link-wrap:hover h2 { color: var(--primary); } .list-card__logo { width: var(--org-logo-lg-w); height: var(--org-logo-lg-h); object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; } .list-card__logo--placeholder { display: flex; align-items: center; justify-content: center; width: var(--org-logo-lg-w); height: var(--org-logo-lg-h); font-size: 1.5rem; font-weight: 700; color: var(--primary); background: var(--surface-alt); border-radius: 10px; } .list-card__cta { margin-top: auto; font-size: 0.9375rem; font-weight: 600; color: var(--primary); } .list-card--bank { display: flex; flex-direction: column; gap: 14px; min-height: 200px; } .list-card__metrics { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: auto; } .list-card__metric { font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: none; } .list-card__metric:hover { text-decoration: underline; } .bank-logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; flex-shrink: 0; } .bank-logo--placeholder { width: var(--org-logo-md-w); height: var(--org-logo-md-h); border-radius: 14px; background: var(--surface-alt); color: #c45a00; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; } .bank-rate-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .bank-rate-link:hover { color: var(--primary); } .bank-rate-link__logo { width: var(--org-logo-xs); height: var(--org-logo-xs); object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--border); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; } .data-table th { background: var(--surface-alt); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .data-table a { color: inherit; text-decoration: none; font-weight: 500; } .data-table a:hover { color: var(--primary); } .best-rate { color: #16a34a; font-weight: 700; } .home-bank-table .bank-rate-link span { font-weight: 600; } .rates-table--readable { font-size: 1rem; } .rates-table--readable th, .rates-table--readable td { padding: 14px 16px; } .rates-table--readable th { font-size: 0.8125rem; } .rates-table--readable .rate { font-size: 1.0625rem; } .rates-table--readable .office-name { font-size: 1rem; } .rates-table-wrap--readable { border-radius: 14px; } .rates-table--exchange .rates-table__office-col { min-width: 220px; } .rates-table__office-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .rates-table__office-col-label { flex-shrink: 0; font-size: 0.8125rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; } .rates-table__office-search { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; width: auto; max-width: 168px; margin-left: auto; margin-right: 0; padding: 3px 6px 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--surface-alt) 90%, var(--surface)); } :root[data-theme="dark"] .rates-table__office-search { background: color-mix(in srgb, white 7%, var(--surface-alt)); } .rates-table__office-search-input { flex: 1 1 auto; width: 118px; min-width: 0; max-width: 118px; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 0.75rem; font-weight: 500; line-height: 1.2; color: var(--text); appearance: none; -webkit-appearance: none; } .rates-table__office-search-input::placeholder { color: var(--text-muted); opacity: 0.85; } .rates-table__office-search-input:hover, .rates-table__office-search-input:focus { outline: none; border: none; background: transparent; box-shadow: none; } .rates-table__office-search-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: auto; height: auto; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 0; } .rates-table__office-search-btn svg { width: 14px; height: 14px; } .rates-table__office-search-btn:hover { color: var(--primary, #ff8a16); background: transparent; } .exchange-offices-mobile-search { display: none; } @media (max-width: 640px) { .exchange-offices-mobile-search { display: flex; justify-content: flex-end; padding: 0 0 10px; margin-bottom: 4px; } .exchange-offices-mobile-search .rates-table__office-search { max-width: 180px; } .exchange-offices-mobile-search .rates-table__office-search-input { width: 130px; max-width: 130px; } } .rates-table--exchange .rates-table__currency-col { min-width: 104px; text-align: center; vertical-align: bottom; padding-bottom: 10px; } .rates-table__currency-label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: 0.01em; } .rates-table__sort-links { display: flex; justify-content: center; gap: 8px; font-size: 0.6875rem; font-weight: 600; text-transform: none; } .rates-table__sort { color: var(--text-muted); text-decoration: none; } .rates-table__sort:hover, .rates-table__sort.is-active { color: var(--primary); } .rates-table__address { margin: 4px 0 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: var(--text-muted); } .rates-table__pair { text-align: center; vertical-align: middle; } .rates-table__pair .rate { display: block; width: 100%; box-sizing: border-box; padding: 3px 6px; border-radius: 8px; line-height: 1.5; text-align: center; } .rates-table__pair .rate + .rate { margin-top: 4px; } .rates-table .rate--best { color: #15803d; background: color-mix(in srgb, #22c55e 14%, transparent); font-weight: 800; } .rates-table__empty { padding: 28px 16px; text-align: center; color: var(--text-muted); } .entity-map { height: 320px; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #e2e8f0; position: relative; z-index: 1; } .entity-map--geocoding { background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%); } .entity-map--geocoding::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, transparent 70%); pointer-events: none; } .entity-map .leaflet-container { height: 100%; width: 100%; font: inherit; } .entity-panel--map { position: relative; z-index: 1; } .bank-page { max-width: 860px; } .bank-page__head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .bank-page__head h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); } .bank-page__logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; flex-shrink: 0; } .bank-page__info, .bank-page__branches, .bank-page__stats, .bank-page__news { margin-bottom: 28px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .bank-page__info h2, .bank-page__branches h2, .bank-page__news h2 { margin: 0 0 14px; font-size: 1.1rem; } .bank-page__info ul, .bank-page__branches ul { margin: 0; padding-left: 1.2rem; } .bank-page__stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.9rem; } .sitemap h1 { margin: 0 0 2rem; font-size: 2rem; } .sitemap h2 { font-size: 1.125rem; margin: 2rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .sitemap h2:first-of-type { border-top: none; padding-top: 0; } .sitemap__list { list-style: none; padding: 0; margin: 0 0 1rem; columns: 2; gap: 2rem; } .sitemap__list--compact { columns: 3; font-size: 0.875rem; } @media (max-width: 768px) { .sitemap__list, .sitemap__list--compact { columns: 1; } } .sitemap__list li + li { margin-top: 0.35rem; } .sitemap__list a { color: inherit; text-decoration: none; } .sitemap__list a:hover { color: var(--primary); } .list-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .list-filters a { padding: 6px 14px; border-radius: 999px; background: var(--surface-alt); color: inherit; text-decoration: none; font-size: 0.875rem; font-weight: 500; } .list-filters a:hover { background: #e2e8f0; } .list-card img { width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: 10px; } .list-card__meta { margin-top: 10px; font-size: 0.8125rem; color: #94a3b8; display: flex; gap: 12px; } .mfo-logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); margin: 0 auto 10px; display: block; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; } .content-page { max-width: 760px; } .content-page__head { margin-bottom: 24px; } .content-page__head h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; } .content-page__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.875rem; color: var(--text-muted); } .content-page__body { line-height: 1.75; color: #334155; } .content-page__body p { margin: 0 0 1rem; } .blog-rubrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .blog-rubrics a { padding: 6px 14px; border-radius: 999px; background: var(--surface-alt); color: inherit; text-decoration: none; font-size: 0.875rem; } .blog-rubrics a.is-active, .blog-rubrics a:hover { background: var(--primary); color: #fff; } .blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; } .blog-card { padding: 20px 0; border-bottom: 1px solid var(--border); } .blog-card h2 { margin: 0 0 8px; font-size: 1.2rem; } .blog-card h2 a { color: inherit; text-decoration: none; } .blog-card h2 a:hover { color: var(--primary); } .blog-card__excerpt { margin: 0 0 10px; color: var(--text-muted); line-height: 1.65; } .blog-card__meta { display: flex; gap: 12px; font-size: 0.8125rem; color: #94a3b8; } .blog-sidebar { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .blog-sidebar h3 { margin: 0 0 14px; font-size: 1rem; } .blog-popular { list-style: none; padding: 0; margin: 0; } .blog-popular li + li { margin-top: 10px; } .blog-popular a { color: inherit; text-decoration: none; font-size: 0.9rem; } .blog-popular a:hover { color: var(--primary); } @media (max-width: 768px) { .blog-layout { grid-template-columns: 1fr; } } .product-page { max-width: 760px; } .deposit-card__bank { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .deposit-card__logo { width: var(--org-logo-lg-w); height: var(--org-logo-lg-h); object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 4px; } .deposit-card__bank-link { font-size: 1.125rem; font-weight: 600; } .home-offer-card__logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; margin-bottom: 4px; border-radius: 8px; background: #fff; border: 1px solid var(--border); padding: 3px; } .micro-card__logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; margin-bottom: 8px; display: block; border-radius: 8px; background: #fff; border: 1px solid var(--border); padding: 3px; } .product-page__body h2 { margin: 0 0 12px; font-size: 1.125rem; } .credit-card__highlights { margin-bottom: 28px; } .credit-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } .credit-conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .credit-conditions__item { padding: 14px 16px; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 10px; } .credit-conditions__title { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .credit-conditions__text { margin: 0; line-height: 1.55; color: #333; } .credit-related { margin-top: 36px; } .credit-related .section-title { margin-bottom: 16px; } .product-page h1 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); } .product-page__bank { margin: 0 0 20px; color: var(--text-muted); } .product-page__bank a { font-weight: 600; } .product-page__specs { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0 0 28px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .product-page__specs dt { color: var(--text-muted); font-size: 0.875rem; } .product-page__specs dd { margin: 0; font-weight: 600; } .product-page__body { line-height: 1.75; color: #334155; } .product-page__body h2 { font-size: 1.125rem; margin: 0 0 12px; } .static-page h1 { margin: 0 0 20px; font-size: clamp(1.5rem, 3vw, 2rem); } .static-page { max-width: 800px; } .static-page--catalog { max-width: none; } .static-page--catalog .page-hero, .static-page--catalog .static-page__top, .static-page--catalog .static-page__bottom, .static-page--catalog .sub-pages { max-width: none; } .static-page--catalog .product-cards-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .static-page__body { padding: 24px 26px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); line-height: 1.7; } .static-page__body img { max-width: 100%; height: auto; border-radius: 12px; } .static-page__body h1 { margin: 0 0 16px; font-size: clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing: -0.02em; } .static-page__body h2 { margin: 22px 0 10px; font-size: 1.2rem; } .static-page__body p, .static-page__body ul, .static-page__body ol { margin: 0 0 14px; } .static-page__body ul, .static-page__body ol { padding-left: 20px; } @media (max-width: 640px) { .static-page__body { padding: 18px 16px; } } .micro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; } .micro-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.875rem; } .micro-card span { display: block; color: var(--text-muted); margin-top: 4px; } .micro-card a { display: inline-block; margin-top: 10px; font-weight: 600; } .sub-pages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .sub-pages a { padding: 6px 14px; background: var(--surface-alt); border-radius: 999px; text-decoration: none; color: inherit; font-size: 0.875rem; } .sub-pages a:hover { background: #e2e8f0; } .news-article__back, .blog-article__back { margin: 0 0 8px; } /* ── Статья / новость: единый layout ───────────────────────── */ .content-article { display: flex; flex-direction: column; gap: 18px; max-width: 860px; margin: 0 auto; } .content-article--compact { max-width: 920px; } .content-article__nav { margin-bottom: 4px; } .content-article__back { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.875rem; } .content-article__back:hover { text-decoration: underline; } .content-article__sheet { overflow: hidden; padding: 28px 28px 32px; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); background: #fff; } .content-article__header { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: start; } .content-article__header:not(:has(.content-article__cover)) { grid-template-columns: minmax(0, 1fr); } .content-article__cover { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--surface-alt); } .content-article__thumb { width: 100%; height: 100%; min-height: 0; border-radius: 12px; } .content-article__intro { padding: 0; } .content-article__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .content-article__chips a, .content-article__chips span { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; } .content-article__chips a:hover { background: #ffedd5; } .content-article__title { margin: 0 0 14px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; color: #111827; } .content-article__lead { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: #475569; } .content-article__body { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .content-article__text { line-height: 1.8; color: #1e293b; font-size: 1rem; } .content-article__text p { margin: 0 0 1em; } .content-article__text h2, .content-article__text h3 { margin: 1.6em 0 0.6em; line-height: 1.3; color: #111827; } .content-article__text ul, .content-article__text ol { margin: 0 0 1em; padding-left: 1.4em; } .content-article__text img { max-width: 100%; height: auto; border-radius: 12px; } .content-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } .content-article__tags span { padding: 6px 12px; background: var(--surface-alt); border-radius: 999px; font-size: 0.8125rem; color: #475569; } @media (max-width: 640px) { .content-article__sheet { padding: 22px 20px 26px; } .content-article__header { grid-template-columns: 1fr; gap: 18px; } .content-article__cover { max-width: 200px; } } /* Legacy hero styles kept for cached views — compact layout replaces them */ .content-article__hero { overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); background: #fff; } .news-article__back a, .blog-article__back a { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.875rem; } .news-article__head h1, .blog-article__head h1 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; } .news-article__meta, .blog-article__meta { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 24px; } .news-article__meta a, .blog-article__meta a { color: inherit; } .news-article__preview img { max-width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 24px; } .news-article__lead, .blog-article__lead { font-size: 1.125rem; line-height: 1.7; color: #334155; margin-bottom: 24px; } .news-article__body, .blog-article__body { line-height: 1.75; color: #1e293b; } .news-article__body img, .blog-article__body img { max-width: 100%; height: auto; } .news-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .news-article__tags span { padding: 4px 12px; background: var(--surface-alt); border-radius: 999px; font-size: 0.8125rem; } .news-related, .blog-related { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--border); } .news-related h2, .blog-related h2 { font-size: 1.125rem; margin: 0 0 16px; } .news-related ul, .blog-related ul { list-style: none; padding: 0; margin: 0; } .news-related li + li, .blog-related li + li { margin-top: 10px; } .news-related a, .blog-related a { color: inherit; text-decoration: none; } .news-related a:hover, .blog-related a:hover { color: var(--primary); } /* ── Product list cards (holdings, credits, micro) ── */ .product-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 0; } .product-cards-grid--compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .product-cards-empty { grid-column: 1 / -1; padding: 32px 24px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); } .product-list-card { display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .product-list-card:hover { border-color: rgba(234, 88, 12, 0.35); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .product-list-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .product-list-card__logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; flex-shrink: 0; } .product-list-card__logo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--primary); background: var(--surface-alt); object-fit: unset; padding: 0; } .product-list-card__intro { min-width: 0; flex: 1; } .product-list-card__eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .product-list-card__org-title { margin: 4px 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .product-list-card--org:hover .product-list-card__org-title { color: var(--primary); } .product-list-card__org, .product-list-card__org-link { font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); line-height: 1.3; } .product-list-card__org-link { text-decoration: none; } .product-list-card__org-link:hover { color: var(--primary); } .product-list-card__link { display: flex; flex-direction: column; flex: 1; gap: 12px; color: inherit; text-decoration: none; } .product-list-card__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--text); } .product-list-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .product-list-card__metrics--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-list-card__metrics--tiles .product-list-card__metric { padding: 4px 0; background: transparent; border-radius: 0; } .product-list-card--org .product-list-card__link { gap: 14px; } .product-list-card--org .product-list-card__head { margin-bottom: 0; } .product-list-card--offer .product-list-card__title { margin-top: 2px; } .product-list-card__metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .product-list-card__metric-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; } .product-list-card__metric strong { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .product-list-card__metric--accent strong { font-size: 1.125rem; color: var(--primary); } .product-list-card__metric--best strong { color: #16a34a; } .product-list-card--best { border-color: rgba(22, 163, 74, 0.4); background: linear-gradient(135deg, #f0fdf4 0%, #fff 58%); box-shadow: 0 4px 18px rgba(22, 163, 74, 0.1); } .product-list-card__badge { align-self: flex-start; margin: -2px 0 2px; padding: 4px 10px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #15803d; background: #dcfce7; border-radius: 999px; } .product-list-card__cta { margin-top: auto; font-size: 0.9375rem; font-weight: 600; color: var(--primary); } .product-list-card__meta { margin: 0; font-size: 0.875rem; color: var(--text-muted); line-height: 1.45; } .product-list-card__tags { display: flex; flex-wrap: wrap; gap: 8px; } .product-list-card__tags span { padding: 4px 10px; border-radius: 999px; background: var(--surface-alt); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); } .product-list-card--bank .product-list-card__head { margin-bottom: 0; } /* ── Entity profile (bank, MFO) ── */ .entity-profile { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .entity-profile--exchange .entity-hero, .entity-profile--exchange .entity-panel { margin-bottom: 0; } .entity-profile--bank { display: flex; flex-direction: column; gap: 12px; } .entity-profile--bank .entity-hero, .entity-profile--bank .entity-panel { margin-bottom: 0; } .entity-hero--bank { position: relative; overflow: hidden; background: linear-gradient(135deg, #eff6ff 0%, #fff 48%, #f8fafc 100%); } .entity-hero--bank::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%); } .entity-hero__logo--bank { object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 8px; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12); } .entity-hero--exchange { position: relative; overflow: hidden; } .entity-hero--exchange::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff8a16 0%, #f97316 55%, #ea580c 100%); } .entity-hero--exchange .entity-hero__main { margin-bottom: 0; } .exchange-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; margin-bottom: 18px; } .exchange-hero__identity { display: flex; align-items: flex-start; gap: 18px; min-width: 0; } .exchange-hero__title { min-width: 0; } .exchange-hero__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; } .exchange-hero__title h1 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15; } .exchange-hero__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #c2410c; background: color-mix(in srgb, #ea580c 12%, #fff); border: 1px solid color-mix(in srgb, #ea580c 24%, transparent); border-radius: 999px; } .exchange-hero__badge svg { width: 13px; height: 13px; display: block; } .exchange-hero__spotlight { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; min-width: 168px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } .exchange-hero__spotlight-code { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .exchange-hero__spotlight-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .exchange-hero__spotlight-rate { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt, #fafafa); } .exchange-hero__spotlight-rate--buy { border-color: color-mix(in srgb, #2563eb 24%, transparent); background: color-mix(in srgb, #2563eb 8%, #fff); } .exchange-hero__spotlight-rate--buy strong { color: #2563eb; } .exchange-hero__spotlight-rate--sale { border-color: color-mix(in srgb, #16a34a 24%, transparent); background: color-mix(in srgb, #16a34a 8%, #fff); } .exchange-hero__spotlight-rate--sale strong { color: #16a34a; } .exchange-hero__spotlight-rate--best { box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a 35%, transparent); } .exchange-hero__spotlight-rate--buy.exchange-hero__spotlight-rate--best { box-shadow: inset 0 0 0 1px color-mix(in srgb, #2563eb 35%, transparent); } .exchange-hero__chip--primary { color: #fff; border-color: color-mix(in srgb, var(--primary) 20%, transparent); background: linear-gradient(135deg, #ff8a16 0%, #f97316 100%); } .exchange-hero__chip--primary .exchange-hero__chip-icon { color: #fff; } .exchange-hero__chip--primary:hover { filter: brightness(1.05); } .exchange-hero__spotlight-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .exchange-hero__spotlight-rate strong { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .exchange-spotlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; } .exchange-spotlights--panel .exchange-hero__spotlight { min-width: 0; width: 100%; } .exchange-contact-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } .exchange-contact-card--wide { grid-column: 1 / -1; } .exchange-contact-card__head { display: flex; align-items: center; gap: 8px; } .exchange-contact-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); } .exchange-contact-card__icon svg { width: 16px; height: 16px; display: block; } .exchange-contact-card__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .exchange-contact-card__value { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--text); word-break: break-word; } .exchange-contact-card__value a { color: var(--primary); text-decoration: none; font-weight: 700; } .exchange-contact-card__value a:hover { text-decoration: underline; } .exchange-hero__details { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); } .exchange-hero__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; } .exchange-hero__chip > span:last-child { min-width: 0; } .exchange-hero__chip-icon { flex: 0 0 auto; display: inline-flex; width: 16px; height: 16px; color: var(--text-muted); } .exchange-hero__chip-icon svg { width: 16px; height: 16px; display: block; } .exchange-hero__chip--action { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 28%, transparent); background: color-mix(in srgb, var(--primary) 8%, #fff); transition: background 0.15s, border-color 0.15s; } .exchange-hero__chip--action:hover { background: color-mix(in srgb, var(--primary) 14%, #fff); border-color: color-mix(in srgb, var(--primary) 45%, transparent); } .exchange-hero__chip--warn { color: #b45309; border-color: color-mix(in srgb, #f59e0b 35%, transparent); background: color-mix(in srgb, #f59e0b 10%, #fff); } .exchange-hero__chip-route { display: none; } @media (max-width: 680px) { .exchange-hero__top { grid-template-columns: 1fr; } .exchange-hero__spotlight { width: 100%; min-width: 0; } .exchange-hero__identity { gap: 14px; } .exchange-hero__chip { border-radius: 12px; width: 100%; } .exchange-hero__chip--route { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 28%, transparent); background: color-mix(in srgb, var(--primary) 8%, #fff); -webkit-tap-highlight-color: transparent; } .exchange-hero__chip--route:active { background: color-mix(in srgb, var(--primary) 14%, #fff); } .exchange-hero__chip--route .exchange-hero__chip-icon { color: var(--primary); } .exchange-hero__chip-route { display: inline-flex; flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--primary); white-space: nowrap; } } @media (min-width: 681px) { .exchange-hero__chip--route { pointer-events: none; cursor: default; } } .entity-back__icon { display: inline-flex; width: 18px; height: 18px; color: var(--primary); } .entity-back__icon svg { width: 18px; height: 18px; display: block; } .entity-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; } .entity-hero__eyebrow-icon { display: inline-flex; width: 16px; height: 16px; color: var(--primary); opacity: 0.85; } .entity-hero__eyebrow-icon svg { width: 16px; height: 16px; display: block; } .entity-hero__subtitle { display: flex; align-items: flex-start; gap: 8px; } .entity-hero__subtitle-icon { flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; margin-top: 3px; color: var(--text-muted); opacity: 0.75; } .entity-hero__subtitle-icon svg { width: 18px; height: 18px; display: block; } .entity-hero__phone { display: inline-flex; align-items: center; gap: 10px; } .entity-hero__phone-icon { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; } .entity-hero__phone-icon svg { width: 22px; height: 22px; display: block; } .entity-hero__meta { display: inline-flex; align-items: center; gap: 6px; } .entity-hero__meta-icon { display: inline-flex; width: 15px; height: 15px; color: var(--text-muted); opacity: 0.8; } .entity-hero__meta-icon svg { width: 15px; height: 15px; display: block; } .entity-stat--with-icon { flex-direction: row; align-items: center; gap: 10px; } .entity-stat__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } .entity-stat__icon svg { width: 18px; height: 18px; display: block; } .entity-stat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .entity-stat--buy .entity-stat__icon { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; } .entity-stat--buy strong { color: #2563eb; } .entity-stat--sale .entity-stat__icon { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; } .entity-stat--sale strong { color: #16a34a; } .entity-stat--paid .entity-stat__icon { background: color-mix(in srgb, #ea580c 12%, transparent); color: #ea580c; } .entity-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .entity-panel__head--split { align-items: flex-start; justify-content: space-between; } .entity-panel__head-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .entity-panel__head .entity-panel__title { margin: 0; } .entity-panel__head-main .section-subtitle { margin: 4px 0 0; } .entity-panel__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; } .entity-panel__icon svg { width: 20px; height: 20px; display: block; } .entity-facts--cards > .entity-facts__card { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } .entity-facts__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } .entity-facts__icon svg { width: 18px; height: 18px; display: block; } .entity-facts__card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .entity-rate-chart { position: relative; height: 280px; padding: 12px 8px 4px; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 12px; } .entity-rate-chart canvas { display: block; width: 100% !important; height: 100% !important; } .entity-panel--chart { margin-bottom: 0; } .entity-hero { padding: 20px 24px; margin-bottom: 4px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); } .entity-hero--mfo { background: color-mix(in srgb, var(--surface) 60%, transparent); } .entity-hero__main { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .entity-hero__logo { width: var(--org-logo-xl-w); height: var(--org-logo-xl-h); object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px; flex-shrink: 0; } .entity-hero__logo--exchange-brand { padding: 0; background: transparent; border: none; box-shadow: 0 8px 20px rgba(234, 88, 12, 0.18); } .entity-hero__logo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; color: var(--primary); background: #fff; } .entity-hero__eyebrow { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .entity-hero__intro h1 { margin: 0; font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.2; } .entity-hero__subtitle { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--text-muted); } .entity-hero__stats { display: flex; flex-wrap: wrap; gap: 12px; } .entity-hero__highlights { margin-bottom: 16px; } .entity-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .entity-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color 0.15s; } .entity-back:hover { color: var(--primary); } .entity-hero__meta { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-muted); } .entity-hero__phone { display: inline-block; margin: 10px 0 4px; padding: 6px 18px; font-size: 1.5rem; font-weight: 800; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 12px; text-decoration: none; line-height: 1.3; transition: background 0.15s; } .entity-hero__phone:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); } .account-type-picker { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .account-type-picker__label { flex: 1 1 180px; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .account-type-picker__label:hover { border-color: rgba(234, 88, 12, 0.4); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } .account-type-picker__label input[type="radio"] { margin-top: 3px; accent-color: var(--primary); flex: 0 0 auto; } .account-type-picker__text strong { display: block; font-size: 1rem; font-weight: 700; } .account-type-picker__text small { color: var(--text-muted); font-size: 0.85rem; } .account-type-picker__label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); } /* Two-column auth layout: description on the left, form on the right */ .auth-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1120px; margin: 24px auto 48px; align-items: start; } .auth-split__form .auth-card { max-width: none; margin: 0; } .auth-info { position: relative; overflow: hidden; padding: 32px; background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12); } .auth-info::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ff8a16 0%, #f97316 100%); } .auth-info__title { margin: 0 0 10px; font-size: 1.5rem; font-weight: 800; line-height: 1.25; } .auth-info__lead { margin: 0 0 24px; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; } .auth-info__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .auth-info__item { display: flex; gap: 14px; align-items: flex-start; } .auth-info__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; } .auth-info__icon svg { width: 22px; height: 22px; display: block; } .auth-info__item-title { margin: 2px 0 4px; font-size: 1rem; font-weight: 700; line-height: 1.3; } .auth-info__item-desc { margin: 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; } @media (max-width: 880px) { .auth-split { grid-template-columns: 1fr; gap: 18px; max-width: 520px; } } .entity-stat { display: flex; flex-direction: column; gap: 2px; min-width: 84px; padding: 10px 14px; background: transparent; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .entity-stat:hover { border-color: rgba(234, 88, 12, 0.4); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } .entity-stat strong { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); line-height: 1; } .entity-stat span { font-size: 0.875rem; color: var(--text-muted); } .entity-panel { margin-bottom: 4px; padding: 20px 24px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); } .entity-panel__title { margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; } .entity-panel__body { line-height: 1.75; font-size: 1rem; } .entity-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 24px; margin: 0; } .entity-facts div { display: flex; flex-direction: column; gap: 4px; } .entity-facts dt { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .entity-facts dd { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; } .entity-facts--compact { margin-top: 0; } .entity-facts--cards > div { padding: 14px 16px; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 12px; } .entity-facts--cards dd a { color: var(--primary); text-decoration: none; font-weight: 700; } .entity-facts--cards dd a:hover { text-decoration: underline; } .entity-facts--cards .entity-facts__item--wide { grid-column: 1 / -1; } .entity-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .entity-branch { padding: 14px 16px; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 12px; } .entity-branch__city { margin-left: 8px; font-size: 0.875rem; color: var(--text-muted); font-weight: 500; } .entity-branch__address, .entity-branch__phone { margin: 6px 0 0; font-size: 0.9375rem; color: var(--text-muted); } .entity-reviews { display: grid; gap: 14px; } .entity-reviews--page { margin: 20px 0 24px; max-width: 800px; } .entity-reviews--page .entity-review { background: var(--surface); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .entity-review { margin: 0; padding: 16px 18px; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 12px; } .entity-review__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .entity-review__rate { font-size: 0.875rem; font-weight: 700; color: var(--primary); } .entity-review p { margin: 0 0 8px; line-height: 1.6; font-size: 0.9375rem; } .entity-review footer { font-size: 0.8125rem; color: var(--text-muted); } /* ── Product detail card ── */ .detail-back { margin: 0 0 16px; } .detail-card { max-width: 820px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); overflow: hidden; } .detail-card__hero { padding: 28px 32px; background: linear-gradient(135deg, #fff7ed 0%, #fff 60%); border-bottom: 1px solid var(--border); } .detail-card--micro .detail-card__hero { background: linear-gradient(135deg, #eff6ff 0%, #fff 60%); } .detail-card__org { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .detail-card__logo { width: var(--org-logo-lg-w); height: var(--org-logo-lg-h); object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; } .detail-card__org-name { display: block; font-size: 1.0625rem; font-weight: 700; color: inherit; text-decoration: none; } .detail-card__org-name:hover { color: var(--primary); } .detail-card__org-type { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--text-muted); } .detail-card__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; } .detail-card__highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .detail-card__highlight { display: flex; flex-direction: column; gap: 3px; min-width: 112px; padding: 10px 14px; background: transparent; border: 1px solid var(--border); border-radius: 12px; } .detail-card__highlight span { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .detail-card__highlight strong { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; } .detail-card__highlight--primary strong { font-size: 1.3rem; color: var(--primary); } .detail-card__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 32px 0; } .detail-card__tag { padding: 6px 12px; font-size: 0.8125rem; font-weight: 600; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); } .detail-card__specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; margin: 0; padding: 24px 32px; border-bottom: 1px solid var(--border); } .detail-card__specs div { display: flex; flex-direction: column; gap: 4px; } .detail-card__specs dt { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .detail-card__specs dd { margin: 0; font-size: 1.0625rem; font-weight: 700; } .detail-card__section { padding: 24px 32px; border-bottom: 1px solid var(--border); } .detail-card__section:last-child { border-bottom: none; } .detail-card__section h2 { margin: 0 0 14px; font-size: 1.125rem; font-weight: 700; } .detail-card__text { line-height: 1.75; font-size: 1rem; color: #334155; } .detail-card__actions, .detail-card__footer { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 32px; } .detail-card__footer--actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 180px; padding: 12px 24px; font-size: 1rem; line-height: 1.2; text-decoration: none; border-radius: 10px; } @media (max-width: 640px) { .product-list-card__metrics, .product-list-card__metrics--tiles { grid-template-columns: 1fr 1fr; } .entity-hero, .detail-card__hero { padding: 20px; } .entity-panel, .detail-card__section, .detail-card__specs, .detail-card__actions, .detail-card__footer { padding-left: 20px; padding-right: 20px; } .entity-hero__main { flex-direction: column; } } /* ── Bank exchange rate cards ── */ .rates-section { margin-bottom: 32px; } .rates-section__title { margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; } .bank-rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .bank-rate-card { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); transition: border-color 0.15s, box-shadow 0.15s; } .bank-rate-card:hover { border-color: rgba(234, 88, 12, 0.3); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .bank-rate-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .bank-rate-card__logo { width: var(--org-logo-md-w); height: var(--org-logo-md-h); object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--border); padding: 3px; flex-shrink: 0; } .bank-rate-card__logo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; color: var(--primary); background: var(--surface-alt); object-fit: unset; } .bank-rate-card__bank-name { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: inherit; text-decoration: none; } .bank-rate-card__bank-name:hover { color: var(--primary); } .bank-rate-card__currencies { display: flex; flex-direction: column; gap: 12px; } .bank-rate-card__currency { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; } .bank-rate-card__code { font-size: 0.9375rem; font-weight: 700; color: var(--text-muted); } .bank-rate-card__values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bank-rate-card__value { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface-alt, #fafafa); border-radius: 10px; border: 1px solid transparent; } .bank-rate-card__value small { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; } .bank-rate-card__value strong { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .bank-rate-card__value--best { background: #ecfdf5; border-color: #a7f3d0; } .bank-rate-card__value--best strong { color: #047857; } .bank-rate-card--compact { border: none; box-shadow: none; padding: 0; } .bank-rate-card--compact:hover { box-shadow: none; transform: none; } /* ── Exchange office cards (unified with product-list-card) ── */ .product-list-card--exchange .product-list-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .product-list-card__address { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--text-muted); font-weight: 400; } .product-list-card__empty-rates { margin: 0 0 12px; font-size: 0.9375rem; } .product-list-card__logo--crypto { color: #7c3aed; background: #f5f3ff; } .entity-hero--exchange { background: linear-gradient(135deg, #fff7ed 0%, #fff 48%, #f8fafc 100%); } .entity-hero--crypto { background: linear-gradient(135deg, #f5f3ff 0%, #fff 48%, #f8fafc 100%); } .entity-hero__logo--crypto { color: #7c3aed; } .exchange-rate-tiles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .exchange-rate-tiles--panel { margin-bottom: 0; } .exchange-rate-tiles__currency { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface-alt, #fafafa); border: 1px solid var(--border); border-radius: 12px; } .exchange-rate-tiles__code { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); } .exchange-rate-tiles__values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .exchange-rate-tiles__value { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: transparent; border: 1px solid var(--border); border-radius: 10px; } .exchange-rate-tiles__value small { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; } .exchange-rate-tiles__value strong { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .exchange-rate-tiles__value--best { background: color-mix(in srgb, #16a34a 14%, transparent); border-color: color-mix(in srgb, #16a34a 30%, transparent); } .exchange-rate-tiles__value--best strong { color: #047857; } .product-list-card--exchange .product-list-card__org-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--text); } .product-list-card--exchange:hover .product-list-card__org-title { color: var(--primary); } /* ── NBK rate cards ── */ .nbk-rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .nbk-rates-grid--featured { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .nbk-rate-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05); } .nbk-rate-card--featured { padding: 22px 24px; background: linear-gradient(135deg, #fff7ed 0%, #fff 55%); border-color: rgba(234, 88, 12, 0.15); } .nbk-rate-card__head { display: flex; align-items: center; gap: 12px; min-height: 52px; } .nbk-rate-card__meta { min-width: 0; flex: 1; } .nbk-rate-card__symbol { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.25rem; font-weight: 800; color: var(--primary); background: #fff; border: 1px solid var(--border); border-radius: 12px; flex-shrink: 0; } .nbk-rate-card--featured .nbk-rate-card__symbol { width: 52px; height: 52px; font-size: 1.5rem; } .nbk-rate-card__code { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; } .nbk-rate-card__name { margin: 2px 0 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .nbk-rate-card--featured .nbk-rate-card__name { font-size: 1rem; } .nbk-rate-card__rate { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text); white-space: nowrap; } .nbk-rate-card--featured .nbk-rate-card__rate { font-size: 1.625rem; } .nbk-rate-card__rate small { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); margin-left: 0.15em; } .nbk-rate-card__foot { margin-top: auto; } .nbk-rate-card__unchanged { font-size: 0.8125rem; color: var(--text-muted); } .nbk-delta--lg { padding: 4px 10px; font-size: 0.875rem; } @media (max-width: 640px) { .bank-rates-grid { grid-template-columns: 1fr; } .bank-rate-card__currency { grid-template-columns: 1fr; gap: 6px; } .nbk-rates-grid, .nbk-rates-grid--featured { grid-template-columns: 1fr; } } @media (max-width: 420px) { .nbk-rates-grid, .nbk-rates-grid--featured { grid-template-columns: 1fr; } } /* ── Filter chips (news, blog) ── */ .filter-chips, .list-filters, .blog-rubrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .filter-chips a, .list-filters a, .blog-rubrics a { padding: 6px 14px; border-radius: 999px; background: var(--surface-alt); color: inherit; text-decoration: none; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } .filter-chips a.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Content feed (news, blog) ── */ .content-feed { display: flex; flex-direction: column; gap: 12px; background: transparent; border: none; border-radius: 0; box-shadow: var(--shadow); overflow: hidden; } .content-feed--compact .content-card__thumb { display: none; } .content-feed--compact .content-card { grid-template-columns: minmax(0, 1fr); } .content-feed--related .content-card { grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 18px 22px; align-items: start; } .content-feed--related .content-card__thumb { aspect-ratio: 4 / 3; border-radius: 10px; } .content-feed--related .content-card__title { font-size: 1rem; line-height: 1.4; } .content-feed--related .content-card__excerpt { font-size: 0.875rem; line-height: 1.55; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .content-feed--related .content-card__meta { font-size: 0.75rem; gap: 10px; } @media (max-width: 560px) { .content-feed--related .content-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 18px; } } .content-card { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px 24px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .content-card:last-child { border: 1px solid var(--border); } .content-card:not(:has(.content-card__thumb)) { grid-template-columns: 1fr; } .content-card__thumb { display: block; border-radius: 10px; overflow: hidden; background: var(--surface-alt); aspect-ratio: 16 / 10; } .content-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .content-card__title { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.35; } .content-card__title a { color: inherit; text-decoration: none; } .content-card__title a:hover { color: var(--primary); } .content-card__excerpt { margin: 0 0 10px; color: var(--text-muted); line-height: 1.65; font-size: 0.9375rem; } .content-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8125rem; color: var(--text-muted); } .content-card__meta a { color: inherit; text-decoration: none; font-weight: 600; } .content-card__meta a:hover { color: var(--primary); } .content-related { max-width: 920px; margin: 36px auto 0; } .content-related__title { margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; } /* ── Platform chrome (legacy header/footer polish) ── */ .header { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); } .header .header__btn.btn, .header .btn { background: var(--primary); border-color: var(--primary); color: #fff; border-radius: 999px; font-weight: 600; transition: background 0.15s, transform 0.15s; } .header .header__btn.btn:hover, .header .btn:hover { background: var(--primary-dark); color: #fff; } .nav__link:hover, .footer__link:hover { color: var(--primary); } .footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 48px; } .footer__legal { margin-top: 10px; padding-bottom: 8px; font-size: 0.875rem; } .footer__legal a { color: var(--text-muted); } .footer__legal a:hover { color: var(--primary); } .footer__logo { pointer-events: none; } /* ── Site footer (unified) ── */ .site-footer { margin-top: 48px; background: #fff; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; } .site-footer__main { padding: 40px 0 32px; } .site-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px 24px; align-items: start; } .site-footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 280px; } .site-footer__logo img { display: block; height: 40px; width: auto; } .site-footer__tagline { margin: 0; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.55; } .site-footer__email { font-weight: 700; color: #1a1a1a; text-decoration: none; } .site-footer__email:hover { color: var(--primary); } .site-footer__social { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; } .site-footer__social-link { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fafafa; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s; } .site-footer__social-link:hover { border-color: #ffd4a8; background: #fffaf5; color: var(--primary); } .site-footer h3.site-footer__title { margin: 0 0 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #1a1a1a; line-height: 1.3; } .site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer__links a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; } .site-footer__links a:hover { color: var(--primary); } .site-footer__links--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .site-footer__bar { border-top: 1px solid var(--border); background: #fafafa; padding: 16px 0 20px; } .site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } .site-footer__copy { font-weight: 600; color: #1a1a1a; white-space: nowrap; } .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .site-footer__legal a { color: var(--text-muted); text-decoration: none; } .site-footer__legal a:hover { color: var(--primary); } .site-footer__note { flex: 1 1 100%; margin: 0; font-size: 0.75rem; color: var(--text-muted); } .nav__contacts.nav__contacts--second { display: none; } .page { padding-top: 8px; padding-bottom: 32px; } @media (max-width: 768px) { .content-card { grid-template-columns: 1fr; } .content-card__thumb { max-height: 180px; aspect-ratio: 16 / 9; } .blog-layout { grid-template-columns: 1fr; } } /* ── Internal pages: mobile ─────────────────────────────────── */ .exchange-offices-mobile { display: none; } @media (max-width: 640px) { .page { padding: 16px 0 40px; } .page-hero { margin-bottom: 18px; } .page-hero h1 { font-size: 1.45rem; } .cross-link { flex-direction: column; align-items: flex-start; padding: 12px 14px; } .city-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; padding-bottom: 4px; scrollbar-width: none; } .city-bar::-webkit-scrollbar { display: none; } .city-chip { flex-shrink: 0; } .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .exchange-offices-desktop { display: none; } .exchange-offices-mobile { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; } .search-context { flex-direction: column; align-items: stretch; padding: 14px 16px; } .search-context__actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; } .search-context__actions .btn { flex: 1 1 auto; min-width: 0; } .search-results__bar { flex-direction: column; align-items: flex-start; padding: 12px 14px; } .product-cards-grid, .product-cards-grid--compact, .list-grid { grid-template-columns: 1fr; gap: 12px; } .product-list-card__metrics, .product-list-card__metrics--tiles { grid-template-columns: 1fr 1fr; } .detail-card__tags { padding: 12px 20px 0; } .detail-card__highlights { gap: 8px; } .detail-card__highlight { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 14px; } .detail-card__footer--actions { flex-direction: column; } .detail-card__footer--actions .btn { width: 100%; min-width: 0; } .entity-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .entity-stat { min-width: 0; } .entity-panel { padding: 16px 20px; } .offices-map { height: 320px; } .map-section.card { padding: 14px 16px; } } @media (max-width: 480px) { .highlights { grid-template-columns: 1fr; } .product-list-card__metrics { grid-template-columns: 1fr; } .detail-card__highlight { flex: 1 1 100%; } .entity-hero__stats { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 768px) { .site-footer__main { padding: 28px 0 24px; } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .site-footer__col--cities { grid-column: 1 / -1; } .site-footer__bar-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } .site-footer__links--columns { grid-template-columns: 1fr; } } /* ── Internal pages: mobile ─────────────────────────────────── */ .exchange-offices-mobile { display: none; } @media (max-width: 640px) { .page { padding: 16px 0 40px; } .page-hero { margin-bottom: 18px; } .page-hero h1 { font-size: 1.45rem; } .cross-link { flex-direction: column; align-items: flex-start; padding: 12px 14px; } .city-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; padding-bottom: 4px; scrollbar-width: none; } .city-bar::-webkit-scrollbar { display: none; } .city-chip { flex-shrink: 0; } .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .exchange-offices-desktop { display: none; } .exchange-offices-mobile { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; } .search-context { flex-direction: column; align-items: stretch; padding: 14px 16px; } .search-context__actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; } .search-context__actions .btn { flex: 1 1 auto; min-width: 0; } .search-results__bar { flex-direction: column; align-items: flex-start; padding: 12px 14px; } .product-cards-grid, .product-cards-grid--compact, .list-grid { grid-template-columns: 1fr; gap: 12px; } .product-list-card__metrics, .product-list-card__metrics--tiles { grid-template-columns: 1fr 1fr; } .detail-card__tags { padding: 12px 20px 0; } .detail-card__highlights { gap: 8px; } .detail-card__highlight { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 14px; } .detail-card__footer--actions { flex-direction: column; } .detail-card__footer--actions .btn { width: 100%; min-width: 0; } .entity-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .entity-stat { min-width: 0; } .entity-panel { padding: 16px 20px; } .offices-map { height: 320px; } .map-section.card { padding: 14px 16px; } } @media (max-width: 480px) { .highlights { grid-template-columns: 1fr; } .product-list-card__metrics { grid-template-columns: 1fr; } .detail-card__highlight { flex: 1 1 100%; } .entity-hero__stats { grid-template-columns: 1fr; } } /* ── Dark theme fixups for hardcoded (non-token) colors ────────── */ :root[data-theme="dark"] .site-footer { background: var(--surface); } :root[data-theme="dark"] .site-footer__email, :root[data-theme="dark"] .site-footer h3.site-footer__title { color: var(--text); } :root[data-theme="dark"] .site-footer__social-link { background: var(--surface-alt); } :root[data-theme="dark"] .site-footer__social-link:hover { border-color: var(--primary); background: var(--surface-alt); } :root[data-theme="dark"] .rates-table tr:hover td { background: var(--surface-alt); } :root[data-theme="dark"] .rates-table .rate.is-empty { color: #4b5563; } :root[data-theme="dark"] .nbk-delta--up { background: rgba(74, 222, 128, 0.12); color: #4ade80; } :root[data-theme="dark"] .nbk-delta--down { background: rgba(248, 113, 113, 0.12); color: #f87171; } :root[data-theme="dark"] .home-hero-shell { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 138, 22, 0.16) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 179, 71, 0.1) 0%, transparent 50%), linear-gradient(160deg, #171a21 0%, #14171d 48%, #14161b 100%); border-color: #3a2c1c; } :root[data-theme="dark"] .btn--ghost { box-shadow: none; } :root[data-theme="dark"] .toolbar select, :root[data-theme="dark"] .home-hero__field-input, :root[data-theme="dark"] .home-hero__city-select { background: var(--surface); color: var(--text); } :root[data-theme="dark"] img.bank-rate-link__logo, :root[data-theme="dark"] .home-bank-logo img, :root[data-theme="dark"] .brand img { background: #fff; border-radius: 6px; } .header__img { color: #1f2937; } /* Logo scales inside header on narrow screens (legacy style.min.css fixed box clips it) */ .header__logo { display: flex; align-items: center; min-width: 0; } .header__logo .header__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 40px; object-fit: contain; } @media (max-width: 1099.98px) { .header__inner { gap: 8px; } .header__logo { flex: 1 1 auto; width: auto !important; height: auto !important; max-width: min(160px, calc(100vw - 200px)); } .header__logo .header__img { max-height: clamp(26px, 7vw, 36px); } .header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } } @media (max-width: 480px) { .header__logo { max-width: min(140px, calc(100vw - 168px)); } .header__logo .header__img { max-height: 28px; } } :root[data-theme="dark"] .header__img { color: #f8fafc; } /* ══════════════════════════════════════════════════════════════ Homepage v2 — hero skyline, city/banks grid, credit highlight ══════════════════════════════════════════════════════════════ */ .home-hero__skyline { position: absolute; top: 0; right: -40px; height: 100%; width: 460px; max-width: 42%; pointer-events: none; z-index: 0; opacity: 0.9; } .home-hero { position: relative; z-index: 1; } .home-grid-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 4px; margin-top: 0; align-items: start; } .home-aside-offers { display: flex; flex-direction: column; gap: 4px; } .home-aside-offers__cell { display: flex; flex-direction: column; gap: 12px; } .home-offers-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .home-offers-row__cell { display: flex; flex-direction: column; gap: 12px; } .home-subsection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .home-subsection-title { margin: 0; font-size: 1.05rem; font-weight: 700; } /* City rate cards */ .home-city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .home-city-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px; text-align: center; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .home-city-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(255, 138, 22, 0.15); } .home-city-card__name { font-weight: 700; font-size: 0.95rem; } .home-city-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--orange-soft, var(--surface-alt)); color: var(--primary); } .home-city-card__icon svg { width: 34px; height: 34px; } .home-city-card__rates { width: 100%; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; } .home-city-card__rate { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.875rem; font-variant-numeric: tabular-nums; } .home-city-card__delta-slot { display: inline-block; min-width: 34px; text-align: right; } .home-city-card__code { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; min-width: 26px; text-align: left; } .home-city-card__rate strong { font-weight: 800; font-size: 1.0625rem; } .home-city-card__rate strong.is-empty { color: var(--text-muted); font-weight: 400; } .home-city-card__delta { font-size: 0.7rem; font-weight: 700; } .home-city-card__delta.is-up { color: #28a745; } .home-city-card__delta.is-down { color: #dc3545; } .home-city-card__meta { font-size: 0.75rem; color: var(--text-muted); } /* Popular banks logo grid */ .home-banks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .home-bank-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.7; padding: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden; } .home-bank-logo:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(255, 138, 22, 0.15); } .home-bank-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; } .home-bank-logo__fallback { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--orange-soft, var(--surface-alt)); color: var(--primary); font-weight: 700; } /* Best credit highlight card */ .home-credit-highlight { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .home-credit-highlight:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(255, 138, 22, 0.16); } .home-credit-highlight__bank { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); font-weight: 600; } .home-credit-highlight__bank img { height: 20px; width: auto; object-fit: contain; } .home-credit-highlight__title { font-size: 1rem; line-height: 1.3; } .home-credit-highlight__rate { display: flex; align-items: baseline; gap: 6px; } .home-credit-highlight__rate small { color: var(--text-muted); font-size: 0.8125rem; } .home-credit-highlight__rate em { font-style: normal; font-size: 1.75rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; } .home-credit-highlight__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); } .home-credit-highlight__bullets li { position: relative; padding-left: 16px; } .home-credit-highlight__bullets li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .home-credit-highlight__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.8125rem; color: var(--text-muted); } .home-credit-highlight__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; padding: 10px 16px; background: var(--primary); color: #fff; border-radius: 8px; font-weight: 600; font-size: 0.875rem; text-align: center; } @media (max-width: 980px) { .home-hero__skyline { max-width: 34%; opacity: 0.7; } } @media (max-width: 880px) { .home-grid-2col { grid-template-columns: 1fr; } .home-offers-row { grid-template-columns: 1fr; } .home-micro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-banks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .home-hero__skyline { display: none; } .home-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-banks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Bank rates table → compact card per bank with 2×2 rate grid */ .home-bank-table thead { display: none !important; } .home-bank-table, .home-bank-table tbody { display: block !important; width: 100% !important; } .home-bank-table tr { display: block !important; padding: 12px 14px !important; border-bottom: 1px solid var(--border) !important; } .home-bank-table td { display: inline-block !important; width: calc(50% - 6px) !important; vertical-align: top !important; box-sizing: border-box !important; border: none !important; padding: 4px 6px 4px 0 !important; background: transparent !important; } .home-bank-table td.office-name { display: block !important; width: 100% !important; padding-bottom: 6px !important; font-weight: 700; min-width: 0 !important; } .home-bank-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; } .home-bank-table td.rate { font-variant-numeric: tabular-nums; } .home-bank-table td.rate .rate-value { font-size: 1rem; font-weight: 700; } .home-bank-table .bank-rate-link__logo { width: 26px; height: 26px; } } @media (max-width: 420px) { .home-city-grid, .home-banks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ══════════════════════════════════════════════════════════════ Hero v2 — matches design reference: headline + lead + 2 CTAs left, warm gradient visual panel right. Normal flow only (no position:absolute tricks) to avoid containing-block bugs. ══════════════════════════════════════════════════════════════ */ .home-hero-v2 { position: relative; display: flex; align-items: center; --hero-fade-at: 420px; --hero-img-scale: 1; --hero-img-x: 3px; --hero-img-y: -1px; min-height: 220px; margin: 0 0 4px; padding: clamp(16px, 2.2vw, 28px) clamp(16px, 3vw, 32px); border-radius: 16px; overflow: hidden; isolation: isolate; } .home-hero-v2__bg { position: absolute; inset: 0; z-index: 0; background: var(--surface); } .home-hero-v2__bg-photo { position: absolute; inset: 0; } .home-hero-v2__bg-photo::before { display: none; } .home-hero-v2__bg-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 100% 50%; transform: translate(var(--hero-img-x, 3px), var(--hero-img-y, -1px)) scale(var(--hero-img-scale, 1)); transform-origin: right center; } .home-hero-v2__bg-overlay { display: none; } .home-hero-v2__bg-overlay::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(104deg, rgba(255, 243, 215, 0.6) 0 4px, transparent 4px 32px, rgba(255, 236, 195, 0.4) 32px 37px, transparent 37px 62px); -webkit-mask-image: radial-gradient(ellipse 55% 75% at 22% 22%, #000 0%, rgba(0,0,0,0.72) 30%, transparent 66%); mask-image: radial-gradient(ellipse 55% 75% at 22% 22%, #000 0%, rgba(0,0,0,0.72) 30%, transparent 66%); opacity: 0.7; } :root[data-theme="dark"] .home-hero-v2__bg-overlay { background: linear-gradient(90deg, var(--surface) 0%, var(--surface) var(--hero-fade-at), rgba(15, 17, 21, 0.95) calc(var(--hero-fade-at) + 24px), rgba(15, 17, 21, 0.78) calc(var(--hero-fade-at) + 70px), rgba(15, 17, 21, 0.4) calc(var(--hero-fade-at) + 130px), rgba(15, 17, 21, 0.12) calc(var(--hero-fade-at) + 200px), transparent calc(var(--hero-fade-at) + 260px)); } :root[data-theme="dark"] .home-hero-v2__bg-overlay::after { opacity: 0.4; } .home-hero-v2__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 380px; } .home-hero-v2 h1 { margin: 0; font-size: clamp(1.89rem, 3.02vw, 2.43rem); line-height: 1.16; letter-spacing: -0.02em; font-weight: 800; color: var(--text); } .home-hero-v2__lead, .home-hero-v2__text { margin: 0; font-size: clamp(1.08rem, 1.51vw, 1.28rem); line-height: 1.5; color: var(--text-muted); max-width: 44ch; } .home-hero-v2__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .home-hero-v2__actions .btn { padding: 14px 26px; font-size: 1.03125rem; border-radius: 9px; } .home-hero-companion { margin-top: 0; } /* ── Hero tool (dev only, ?hero-tool=1) ────────────────────── */ #hero-tool { position: fixed; top: 80px; right: 16px; z-index: 9999; width: 250px; padding: 14px 14px 12px; background: #0f172a; color: #e2e8f0; border-radius: 12px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35); font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; } #hero-tool.is-dragging { opacity: 0.85; box-shadow: 0 16px 50px rgba(15, 23, 42, 0.5); } #hero-tool .hero-tool__head { font-weight: 700; font-size: 13px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; cursor: move; user-select: none; -webkit-user-select: none; padding: 2px 0; } #hero-tool .hero-tool__hint { font-weight: 400; font-size: 10px; color: #94a3b8; } #hero-tool label { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 2px; color: #cbd5e1; } #hero-tool input[type="range"] { width: 100%; accent-color: #ff8a16; } #hero-tool .hero-tool__btns { display: flex; gap: 8px; margin-top: 12px; } #hero-tool button { flex: 1; padding: 7px 8px; border: 1px solid #334155; border-radius: 7px; background: #1e293b; color: #e2e8f0; font: inherit; cursor: pointer; } #hero-tool button:hover { background: #334155; } #hero-tool .hero-tool__out { margin: 10px 0 0; padding: 9px; background: #000; color: #facc15; border-radius: 7px; font: 10px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; max-height: 130px; overflow: auto; } .hero-tool__toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 9999; padding: 9px 18px; background: #ff8a16; color: #fff; border-radius: 8px; font: 13px system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .hero-tool__toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 900px) { .home-hero-v2 { --hero-fade-at: 0%; min-height: 340px; align-items: flex-end; padding: 20px 18px; } .home-hero-v2__bg-photo img { object-position: center top; } .home-hero-v2__bg-overlay { background: linear-gradient(to top, var(--surface) 0%, var(--surface) 38%, rgba(255, 255, 255, 0.88) 52%, rgba(255, 250, 243, 0.48) 64%, rgba(255, 232, 205, 0.18) 78%, transparent 92%); } :root[data-theme="dark"] .home-hero-v2__bg-overlay { background: linear-gradient(to top, var(--surface) 0%, var(--surface) 38%, rgba(15, 17, 21, 0.88) 52%, rgba(15, 17, 21, 0.48) 64%, rgba(15, 17, 21, 0.18) 78%, transparent 92%); } .home-hero-v2__content { max-width: none; } } @media (max-width: 560px) { .home-hero-v2__actions .btn { flex: 1 1 auto; text-align: center; } } /* ══════════════════════════════════════════════════════════════ Crypto hub (/obmenniki-kripto) — TradingView widgets + announce ══════════════════════════════════════════════════════════════ */ .crypto-hub__section { margin-bottom: 36px; } .crypto-hub__section--ticker { margin-bottom: 28px; } .crypto-hub__section-head { margin-bottom: 16px; } .crypto-hub__section-head .section-title { margin: 0 0 4px; } /* TradingView widget containers — reserve height to avoid CLS */ .crypto-hub__ticker { min-height: 46px; border-radius: 14px; overflow: hidden; } /* TradingView widget containers — site-style cards (warm border, soft shadow) */ .crypto-hub__heatmap, .crypto-hub__screener, .crypto-hub__chart, .crypto-hub__market { height: clamp(360px, 52vw, 560px); border: 1px solid color-mix(in srgb, var(--primary, #ff8a16) 18%, var(--border)); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } .crypto-hub__heatmap .tradingview-widget-container__widget, .crypto-hub__screener .tradingview-widget-container__widget, .crypto-hub__chart .tradingview-widget-container__widget, .crypto-hub__market .tradingview-widget-container__widget { height: 100%; } .crypto-hub__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .crypto-hub__duo { grid-template-columns: 1fr; } } @media (min-width: 900px) { .crypto-hub__trading { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } } /* Announcement + notify form */ .crypto-hub__soon { padding: 24px 26px; margin-bottom: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #ff8a16) 8%, var(--surface)) 0%, var(--surface) 100%); border: 1px solid color-mix(in srgb, var(--primary, #ff8a16) 18%, var(--border)); } .crypto-hub__soon-title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 800; } .crypto-hub__soon-text { margin: 0; color: var(--text-muted); line-height: 1.6; max-width: 720px; } .crypto-hub__notify { padding: 26px 28px 24px; margin-top: 8px; background: var(--surface); } .crypto-hub__notify-head { margin-bottom: 18px; } .crypto-hub__notify-title { margin: 0 0 6px; font-size: 1.125rem; font-weight: 800; } .crypto-hub__notify-text { margin: 0; color: var(--text-muted); line-height: 1.55; max-width: 620px; } .crypto-hub__notify-success { margin: 0; font-weight: 600; } .crypto-hub__form .form-field { margin-bottom: 14px; } .crypto-hub__form .platform-form__actions { border-top: none; padding-top: 0; margin-top: 0; } .crypto-hub__form .btn--primary { width: 100%; } @media (min-width: 640px) { .crypto-hub__form .btn--primary { width: auto; min-width: 220px; } } .crypto-hub__consent { margin: 14px 0 0; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; } .crypto-hub__consent a { color: var(--primary, #ff8a16); font-weight: 600; } /* City chips inherit .city-bar / .city-chip */ /* Education links */ .crypto-hub__links { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .crypto-hub__links { grid-template-columns: 1fr 1fr; } } .crypto-hub__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font-weight: 700; color: var(--text); text-decoration: none; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; } .crypto-hub__link::after { content: "→"; color: var(--primary, #ff8a16); font-weight: 800; } .crypto-hub__link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary, #ff8a16) 30%, var(--border)); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); } /* FAQ */ .crypto-hub__faq { display: grid; gap: 10px; } .crypto-hub__faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 4px 18px; transition: border-color 0.15s; } .crypto-hub__faq-item[open] { border-color: color-mix(in srgb, var(--primary, #ff8a16) 25%, var(--border)); } .crypto-hub__faq-q { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; gap: 12px; align-items: center; } .crypto-hub__faq-q::-webkit-details-marker { display: none; } .crypto-hub__faq-q::after { content: "+"; color: var(--primary, #ff8a16); font-size: 1.25rem; font-weight: 800; transition: transform 0.2s; } .crypto-hub__faq-item[open] .crypto-hub__faq-q::after { transform: rotate(45deg); } .crypto-hub__faq-a { margin: 0 0 16px; color: var(--text-muted); line-height: 1.6; } .crypto-hub__disclaimer { margin: 8px 0 32px; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; } /* TradingView iframes should not overflow their containers */ .crypto-hub__chart iframe, .crypto-hub__symbol iframe, .crypto-hub__market iframe, .crypto-hub__heatmap iframe, .crypto-hub__screener iframe, .crypto-hub__ticker iframe { max-width: 100%; } /* ══════════════════════════════════════════════════════════════ Mobile polish (≤640px) — home + crypto hub ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Home rates ticker cards — one per row, fit without right-edge overflow */ .home-ticker-card { flex: 1 1 100%; min-width: 0; padding: 12px 14px; gap: 10px; } .home-ticker-card__delta-slot { min-width: 44px; } .home-ticker-card__row strong { font-size: 1rem; } .home-ticker-card__avg, .home-ticker-card__delta { font-size: 0.625rem; } /* City rates grid — compact 2-col cards (smaller icon, tighter) */ .home-city-card { padding: 12px 10px; gap: 8px; } .home-city-card__icon { width: 40px; height: 40px; border-radius: 10px; } .home-city-card__icon svg { width: 26px; height: 26px; } .home-city-card__name { font-size: 0.875rem; } .home-city-card__rate, .home-city-card__rate strong { font-size: 0.9rem; } /* Home section blocks — tighter padding/typography */ .home-block { padding: 14px 14px; } .home-rates-hub .section-title { font-size: 1.15rem; } .home-rates-hub .section-subtitle { font-size: 0.9375rem; } /* Crypto hub widgets — shorter on mobile, still usable */ .crypto-hub__heatmap, .crypto-hub__screener, .crypto-hub__chart, .crypto-hub__market { height: clamp(320px, 78vw, 460px); } .crypto-hub__duo { gap: 12px; } } /* ══════════════════════════════════════════════════════════════ Mobile: hide home hero — rates (ticker + Курсы валют) go first ══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .home-hero-v2 { display: none; } } /* ══════════════════════════════════════════════════════════════ Mobile polish II (≤640px) — full-width container + city card fix ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Content nearly full-width — force with !important (base .container sets calc(100% - 32px)) */ .container { width: 100% !important; padding-left: 6px; padding-right: 6px; box-sizing: border-box; } /* Rates section — minimal side padding so the white card is nearly full-width */ .home-rates-hub { padding: 14px 6px; } .home-block { padding: 14px 12px; } /* City rates cards — compact rate row so numbers don't overflow */ .home-city-card { padding: 12px 8px; } /* Bank rates table — horizontal scroll fallback (card layout above may not apply in all browsers) */ .home-block .rates-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .home-city-card__rates { gap: 4px; padding-top: 8px; } .home-city-card__rate { gap: 4px; justify-content: flex-start; } .home-city-card__delta-slot { min-width: 18px; } .home-city-card__code { min-width: 20px; font-size: 0.6875rem; } .home-city-card__rate strong { font-size: 0.875rem; } } /* Exchange city listing — larger mobile blocks for readability */ @media (max-width: 640px) { .city-highlights .home-ticker { flex-direction: column; gap: 12px; margin-bottom: 16px; } .city-highlights .home-ticker-card { flex: 1 1 100%; min-width: 0; padding: 18px 20px; gap: 14px; border-radius: 16px; } .city-highlights .home-ticker-card__flag { width: 48px; height: 48px; } .city-highlights .home-ticker-card__pair { font-size: 0.875rem; } .city-highlights .home-ticker-card__label { font-size: 0.75rem; } .city-highlights .home-ticker-card__row strong { font-size: 1.125rem; } .exchange-offices-mobile { gap: 14px; } .exchange-offices-mobile-search { padding: 0 0 12px; } .exchange-offices-mobile-search .rates-table__office-search { max-width: 200px; padding: 5px 8px; } .exchange-offices-mobile-search .rates-table__office-search-input { width: 136px; max-width: 136px; font-size: 0.8125rem; } .exchange-offices-mobile .product-list-card--exchange { padding: 20px 18px; border-radius: 16px; } .exchange-offices-mobile .product-list-card__head { gap: 14px; margin-bottom: 14px; } .exchange-offices-mobile .product-list-card__logo, .exchange-offices-mobile .product-list-card__logo--placeholder { width: 52px; height: 44px; font-size: 1.375rem; } .exchange-offices-mobile .product-list-card__eyebrow { font-size: 0.75rem; } .exchange-offices-mobile .product-list-card__org-title { font-size: 1.125rem; line-height: 1.4; } .exchange-offices-mobile .product-list-card__address { font-size: 0.9375rem; line-height: 1.5; } .exchange-offices-mobile .exchange-rate-tiles { gap: 12px; margin-bottom: 14px; } .exchange-offices-mobile .exchange-rate-tiles__currency { grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 14px; border-radius: 14px; } .exchange-offices-mobile .exchange-rate-tiles__code { font-size: 0.9375rem; } .exchange-offices-mobile .exchange-rate-tiles__values { gap: 10px; } .exchange-offices-mobile .exchange-rate-tiles__value { padding: 10px 12px; border-radius: 12px; } .exchange-offices-mobile .exchange-rate-tiles__value small { font-size: 0.75rem; } .exchange-offices-mobile .exchange-rate-tiles__value strong { font-size: 1.0625rem; } .exchange-offices-mobile .product-list-card__cta { font-size: 0.9375rem; padding-top: 2px; } .map-section .offices-map { min-height: 280px; border-radius: 16px; } }