/*! GP RealEstate · 01-tokens.css - ЄДИНЕ джерело правди для дизайну. * * ПРАВИЛО ПРОЄКТУ: жоден інший файл не містить «сирих» кольорів, відступів * чи розмірів шрифту. Тільки var(--…). Це те, через що в GlapInvest з'явився * 99-overrides.css на 17 КБ - там значення дублювались і розповзались. * * Змінюєш бренд → змінюєш ТІЛЬКИ цей файл. */ :root{ /* ── Бренд (наразі 1:1 з GlapInvest - спільна айдентика групи) ───────── */ --green: #33821D; --green-hover: #4AAA28; --green-dark: #1E4D11; --green-darker: #0D2409; --green-soft: #EAF3E6; /* новий: світлий фон під бейджі/чіпи */ /* ── Акцент Real Estate: тепла латунь для «преміум»-сигналів ─────────── */ /* Використовується точково: ціна на картці об'єкта, бейдж «Нова оферта». */ --brass: #B08A3E; --brass-soft: #F5EFE2; /* ── Тип угоди (кольорове кодування каталогу) ─────────────────────────── */ --deal-sale: var(--green); --deal-rent: #1F6FD0; --deal-invest: var(--green-darker); /* ── Нейтральні ───────────────────────────────────────────────────────── */ --bg: #F5F5F7; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #FAFAFB; --ink: #1D1D1F; --ink-2: #6E6E73; --ink-3: #9A9AA0; --line: rgba(0,0,0,.08); --line-strong: rgba(0,0,0,.14); /* ── Стани ────────────────────────────────────────────────────────────── */ --danger: #C0392B; --success: var(--green); /* ── Тіні ─────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.05); --shadow: 0 4px 16px rgba(0,0,0,.07); --shadow-lg: 0 12px 40px rgba(0,0,0,.12); /* ── Радіуси ──────────────────────────────────────────────────────────── */ --radius: 22px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 999px; /* ── Шкала відступів (крок 4px) ───────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ── Типографіка ──────────────────────────────────────────────────────── */ --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* clamp() = адаптив без медіа-запитів. У GlapInvest розміри правились у 3 різних файлах через @media - тут вони задані один раз. */ --fs-hero: clamp(34px, 5.2vw, 58px); --fs-h1: clamp(28px, 4.2vw, 46px); --fs-h2: clamp(23px, 3vw, 34px); --fs-h3: clamp(18px, 2vw, 21px); --fs-lede: clamp(16px, 1.5vw, 19px); --fs-body: 15.5px; --fs-sm: 13.5px; --fs-xs: 12px; --lh-tight: 1.15; --lh-body: 1.65; /* ── Каркас ───────────────────────────────────────────────────────────── */ --container: 1200px; --container-text: 760px; /* для статей - комфортна довжина рядка */ --nav-h: 72px; --section-y: clamp(56px, 8vw, 104px); /* ── Z-шари (єдина шкала - щоб не було «z-index: 99999») ──────────────── */ --z-base: 1; --z-sticky: 50; --z-nav: 80; --z-overlay: 90; --z-modal: 100; --z-loader: 110; /* ── Рух (усі тривалості й криві - тільки звідси) ─────────────────────── */ --ease: cubic-bezier(.22, 1, .36, 1); /* фірмовий «м'який вихід» */ --dur-fast: .15s; --dur: .25s; --dur-slow: .55s; --dur-reveal: .7s; } /* Темна тема - задекларована наперед, щоб не переписувати компоненти пізніше. Вмикається класом .theme-dark на (перемикач додається за потреби). */ .theme-dark{ --bg: #0E1210; --bg-alt: #151A17; --surface: #171D19; --surface-2: #1D2420; --ink: #F2F4F2; --ink-2: #A8AEA9; --ink-3: #6E756F; --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.18); --green-soft: rgba(51,130,29,.16); --brass-soft: rgba(176,138,62,.14); --shadow: 0 4px 16px rgba(0,0,0,.4); --shadow-lg: 0 12px 40px rgba(0,0,0,.55); }