/* ===================================================================== FAKTOR — ДИЗАЙН-ТОКЕНИ (єдине джерело правди) Кольори та типографіка для всього сайту. Підключати ПЕРШИМ, до style.css. Усі значення в розмітці беруться лише звідси через var(). Джерело шкали — Figma (див. REFERENCE.md). ===================================================================== */ :root{ /* ---------------- АДАПТИВ-ЛЕЙАУТ ---------------- */ /* Обернений коефіцієнт zoom-у .frame (1/zoom). На широких екранах zoom=1, тож counter=1. На вужчих — перевизначається в style.css на тих самих zoom- сходинках (1/.93, 1/.87, …). Навбар контр-масштабується ним, щоб лишатись 1:1 поверх стиснутого фрейма. Усе на CSS, без JS. */ --nav-counter:1; /* ---------------- ШРИФТИ ---------------- */ --font-brand:'NAMU-1990','Manrope','Inter',system-ui,sans-serif; /* H1 / великі категорії (ТЗ) */ --font-base :'Inter','SFT Schrifted Sans','Helvetica Neue',Arial,sans-serif; /* основний текст / UI */ /* ---------------- РОЗМІРИ ТЕКСТУ (кегль) ---------------- */ --fs-display:72px; /* hero-слова (КВАРТИРИ / БУДИНКИ …) */ --fs-h1 :56px; /* заголовки секцій */ --fs-h2 :40px; /* велика ціна (Ексклюзивні) */ --fs-h3 :24px; /* заголовки карток, ціни лістингу, імена у відгуках */ --fs-h4 :20px; /* заголовок суцільної картки */ --fs-lg :18px; /* назви ЖК, характеристики, підзаголовки */ --fs-base :15px; /* ОСНОВНИЙ текст, меню, посилання, поля, кнопки */ --fs-sm :13px; /* дрібні підписи: breadcrumb, чипи, офіс агента */ --fs-xs :12px; /* мікромітки: теги, дати, UA/USD */ /* ---------------- ТРЕКІНГ (letter-spacing, пара до кегля) ---------------- */ --ls-display:-2.88px; --ls-h1 :-2.24px; --ls-h2 :-1.6px; --ls-h3 :-.96px; --ls-h4 :-.6px; --ls-lg :-.72px; --ls-base :-.3px; --ls-sm :-.26px; --ls-xs :-.24px; /* ---------------- ІНТЕРЛІНЬЯЖ (line-height) ---------------- */ --lh-none :1; /* однорядкові кнопки / великі цифри */ --lh-tight :1.05; /* заголовки */ --lh-snug :1.2; /* підзаголовки карток */ --lh-base :1.3; /* основний текст */ --lh-relaxed:1.55; /* hero-підзаголовок */ /* ---------------- НАСИЧЕНІСТЬ (font-weight) ---------------- */ --fw-regular :400; --fw-medium :500; --fw-semibold:600; --fw-bold :700; --fw-heavy :800; --fw-black :900; /* ---------------- КОЛЬОРИ · бренд і текст ---------------- */ --navy :#001D4B; /* бренд: лого, кнопки, заливки, футер */ --dark :#141414; /* основний текст */ --slate:#2a3344; /* посилання навбару */ --muted:rgba(20,20,20,.55); /* вторинний текст (Dark 60%) */ --white:#fff; --btc :#f7931a; /* акцент Bitcoin (символ ₿ на сторінці об'єкта) */ --gold :#c8975a; /* золотисті іконки статів картки (Обране) */ --gold-deep:#9a7b3f; /* «Перший внесок» у картці новобудови (Обране) */ --danger :#b4422f; /* небезпечна дія «Очистити все» (Обране) */ --danger-bd :#f0d4d4; /* межа кнопки «Очистити все» у спокої */ --secondary :#5b6470; /* вторинний підпис («від», підзаголовки картки Обране) */ --addr :#8a90a0; /* адреса в картці об'єкта (Обране) */ --navy-82 :rgba(0,29,75,.82);/* напівпрозорий navy-бейдж типу на фото (Обране) */ /* ---------------- КОЛЬОРИ · поверхні ---------------- */ --soft :#f7f7f7; /* карткові фони */ --field :#F5F6F8; /* поля пошуку (головна) */ --field-2 :#f1f0ed; /* поля фільтрів (каталог) */ --chip-bg :#ededed; /* пігулка-лейбл під hero */ --pay-pill :#FAEFD5; /* фон пігулки «Перший внесок» (картка новобудови) */ --placeholder:#d9d9d9; /* плейсхолдери зображень (колір-fallback) */ --placeholder-img:url("../img/decor/property-placeholder.png"); /* картинка-заглушка фото об'єктів */ --hero-word :#C5C8D0; /* watermark-слова hero */ --hero-bg-fallback:#cccccc; /* суцільний fallback під hero-фото (.hero__bg) */ --img-fallback :#c9c7c2; /* fallback під inline-фото (.hw-img) */ --excl-ph-1 :#c9c4bd; /* теплий плейсхолдер-градієнт, верх (.excl__img) */ --excl-ph-2 :#b6b0a7; /* теплий плейсхолдер-градієнт, низ (.excl__img) */ --hero-sup :#aeb3bd; /* колір sup-міток UA/USD у hero-словах */ /* ---------------- КОЛЬОРИ · лінії та межі ---------------- */ --line :#ececec; /* розділювачі, тонкі межі */ --border-field:#E5E7EC; /* межа полів пошуку */ --border-soft:#d8d4ce; /* підкреслення полів форми */ --pick-div :#e2e6ec; /* вертикальні розділювачі в блоці ціни (пікер пошуку) */ --pick-cat :#eef1f5; /* фон неактивної категорії-pill у пікері локацій */ --hl-bg :#fbe6c8; /* підсвітка збігу в живому пошуку (фон) */ --hl-fg :#b4671f; /* підсвітка збігу в живому пошуку (текст) */ --navy-08 :rgba(0,29,75,.08); /* фокус-кільце полів пошуку (навколо --navy) */ --navy-hover :#0a2a57; /* hover navy-кнопки «Знайти» */ /* ---------------- КОЛЬОРИ · темна шкала (на світлому) ---------------- */ --ink-05:rgba(20,20,20,.05); --ink-08:rgba(20,20,20,.08); --ink-10:rgba(20,20,20,.10); --ink-12:rgba(20,20,20,.12); --ink-14:rgba(20,20,20,.14); --ink-18:rgba(20,20,20,.18); --ink-28:rgba(20,20,20,.28); --ink-40:rgba(20,20,20,.40); /* ---------------- КОЛЬОРИ · світла шкала (на темному футері/hero) ---------------- */ --white-06:rgba(255,255,255,.06); --white-22:rgba(255,255,255,.22); --white-55:rgba(255,255,255,.55); --white-60:rgba(255,255,255,.60); --white-82:rgba(255,255,255,.82); /* ---------------- РАДІУСИ (у макеті — гострі кути) ---------------- */ --r-ctrl :0; /* кнопки, перемикачі */ --r-field:0; /* поля вводу */ --r-nav :0; /* навбар */ --r-card :0; /* картки та зображення */ --r-pill :30px;/* пігулкові кнопки (CTA) */ --r-badge:14px;/* бейджі-оверлеї на фото (рік на картці новобудови) */ /* ---------------- ЛЕЙАУТ ---------------- */ /* ШИРИНА КОНТЕНТУ. Це БАЗОВЕ значення — для широких моніторів (>1600px). Для вужчих екранів перевизначається в style.css медіазапитами (шукай блок «ШИРИНА КОНТЕНТУ ПО ДІАПАЗОНАХ»). Один рядок = один діапазон, задаєш точну ширину в px. Менше = вужчі картки + ширші поля. */ --content:1344px; --content-fixed:1344px; /* стала ширина для .excl (його координати зашиті під 1344) — не чіпати */ /* коефіцієнт стиснення .excl під --content, щоб слайдер збігався завширшки з рештою на будь-якій ширині. Адаптивний: --content / 1344 (ширина .excl). Рахується автоматично, чіпати не треба. */ --excl-scale:calc(var(--content) / 1344px); --card-h :513px; /* єдина висота карток об'єктів на головній (суцільні + лістинг; крім карток агентів) */ /* Вертикальний ритм між секціями. Базове значення — макетні 160px; на вузьких екранах (13–14" ноутбуки) перевизначається меншим у медіазапитах style.css, щоб сторінка була компактнішою без горизонтального скролу. --sec-gap-half — рівно половина (футер: 80 над лінією + 80 під), тримає той самий ритм. Усі вертикальні проміжки секцій тягнуть лише ці токени. */ --sec-gap :85px; /* проміжок між секціями (.section, відгуки, агенти, забудовники) */ --sec-gap-half:80px; /* половина ритму (розділювач/мапа сайту/seo/футер) */ --sec-head-gap:36px; /* відступ під шапкою секції (заголовок → сітка карток) */ /* ===================================================================== СТОРІНКА «ПРО КОМПАНІЮ» (about.html) Hifi-хендоф design_handoff_about_company/ має власну, м'якшу дизайн-мову (заокруглені картки, тіні, темно-синій градієнт), відмінну від строгого лістингового стилю сайту. Її токени — лише тут; css/about.css тягне їх через var(), без magic-значень. Дублі базової шкали (#001738 ≈ навбарний navy, але інший hex із макета) свідомо ізольовані під --about-*, щоб не зачіпати решту. ===================================================================== */ --about-ink :#001738; /* акцент/бренд блоку (темні картки, заголовки, плашки іконок) */ --about-ink-2 :#3b434f; /* текст у параграфах місії */ --about-muted :#5b6470; /* вторинний текст (описи карток, підзаголовки) */ --about-muted-2 :#9aa1ad; /* uppercase-лейбли на світлому */ --about-crumb :#8a90a0; /* неактивний пункт хлібних крихт */ --about-bg :#f5f6f8; /* фон секції */ --about-surface :#fff; /* картки */ --about-chip :#eef1f7; /* світла плашка іконки / поле */ --about-line :#e6e9ef; /* бордери карток і роздільники */ --about-tl-line :#dde2ea; /* лінія таймлайна */ --about-hero-sub:#dbe4f0; /* підзаголовок hero */ --about-accent :#9fc0ec; /* світло-блакитний лейбл на темному */ --about-grad :radial-gradient(120% 140% at 85% 0%, #0a335f 0%, #001738 55%); /* hero / темна CTA-картка */ --about-shadow :0 1px 4px rgba(0,0,0,.06); /* тінь карток */ /* напівпрозорі білі на темних блоках цієї сторінки */ --about-w-04 :rgba(255,255,255,.04); --about-w-06 :rgba(255,255,255,.06); --about-w-07 :rgba(255,255,255,.07); --about-w-08 :rgba(255,255,255,.08); --about-w-10 :rgba(255,255,255,.10); --about-w-12 :rgba(255,255,255,.12); --about-w-28 :rgba(255,255,255,.28); --about-w-70 :rgba(255,255,255,.70); --about-w-74 :rgba(255,255,255,.74); --about-w-76 :rgba(255,255,255,.76); --about-w-78 :rgba(255,255,255,.78); /* радіуси блоку (відмінні від гострих кутів сайту) */ --about-r-lg :20px; /* hero, темні блоки, CTA-картки */ --about-r-md :16px; /* картки переваг, смуга фактів */ --about-r-sm :14px; /* картки послуг, кроки, плашки команди */ --about-r-icon:12px; /* плашки іконок */ --about-r-btn :11px; /* кнопки */ /* ---- спільні токени контент-сторінок (Власникам/Кар'єра/Франшиза/ Офіси/Блог/FAQ/Політика — той самий хендоф-стиль, що «Про компанію»). Усі ці сторінки тягнуть --about-* через css/handoff.css. ---- */ --about-ink-3 :#33404f; /* основний текст довгих абзаців (політика, статті) */ --about-ink-4 :#2a3340; /* тіло статті блогу */ --about-q :#1f2733; /* заголовок закритого питання (FAQ) */ --about-head :#141414; /* заголовки карток статей, ціни об'єктів */ --about-fieldbd :#d7dce4; /* межа полів форм */ --about-fieldbd2:#e2e6ec; /* тонша межа (пошук, TOC) */ --about-chip2 :#e7eaef; /* неактивний чип-фільтр */ --about-muted-3 :#b3bac6; /* номери TOC / дуже світлий muted */ --about-ok :#1f8a4c; /* зелена галочка (переваги вакансій) */ --about-w-14 :rgba(255,255,255,.14); /* межа плашок месенджерів на темному */ --about-w-60 :rgba(255,255,255,.60); /* субтекст у месенджерах */ --about-w-72 :rgba(255,255,255,.72); /* лід на темних блоках */ --about-card-hover:0 10px 26px rgba(0,23,56,.12); /* hover карток-лінків (офіси/блог) */ --about-form-shadow:0 10px 30px rgba(0,0,0,.18); /* тінь спливної форми оцінки (hero owners) */ }