/* ========================================================================== imotigreece-design — Токени Единствен източник на визуални стойности. Компонентните файлове НЕ съдържат hardcoded hex-ове — само променливи оттук. Спецификация: design/DESIGN.md ========================================================================== */ :root { /* --- Primary „Aegean" (дълбоко егейско синьо) ------------------------- */ --ig-primary: #1B3A4B; --ig-primary-dark: #122A38; --ig-primary-darker: #0D2029; --ig-primary-light: #2C5A72; /* --- Secondary „Olive" (маслинена горичка) ---------------------------- */ --ig-secondary: #5E6B45; --ig-secondary-dark: #46512F; /* --- Accent „Terracotta" (изпечена глина) ----------------------------- ВНИМАНИЕ: --ig-accent е само за едър текст (≥18px) и графични акценти. Контраст на бяло = 4.42:1 → не минава AA за малък текст. За малък текст и за цена се ползва --ig-accent-dark (6.60:1). */ --ig-accent: #B4623C; --ig-accent-dark: #8F4A2B; --ig-accent-darker: #733A21; --ig-accent-light: #D9A184; /* --- Ink (студено-варовикова неутрална скала) ------------------------- */ --ig-ink-950: #16191B; --ig-ink-800: #2C3134; --ig-ink-600: #5C6469; --ig-ink-400: #8B9398; /* --- Surface ---------------------------------------------------------- */ --ig-surface: #F6F4F0; --ig-surface-card: #FFFFFF; --ig-surface-alt: #EDEAE4; --ig-surface-dark: #122A38; --ig-border: #DEDAD2; --ig-border-subtle: #EAE6DF; /* Същите стойности под друго име — за светъл остров (`.ig-on-light`, бяла карта/панел) ВЪТРЕ в тъмна секция. `.ig-on-dark` презаписва `--ig-border`, затова островът се връща към тези, а не към `--ig-border` (самореференция = невалидна стойност). Виж `.ig-on-light` по-долу. */ --ig-border-on-light: #DEDAD2; --ig-border-on-light-subtle: #EAE6DF; /* --- Семантични -------------------------------------------------------- */ --ig-error: #A8382F; --ig-success: #2F7D4F; --ig-warning: #8A5A14; /* --- Роли (семантични псевдоними — използвай тези в компонентите) ------- */ --ig-text: var(--ig-ink-950); --ig-text-secondary: var(--ig-ink-800); --ig-text-tertiary: var(--ig-ink-600); --ig-text-muted: var(--ig-ink-400); /* само декорация / disabled */ --ig-text-on-dark: #FFFFFF; --ig-text-on-dark-soft: rgba(255, 255, 255, .80); --ig-text-on-dark-faint: rgba(255, 255, 255, .55); --ig-link: var(--ig-primary); --ig-link-hover: var(--ig-accent-dark); --ig-price: var(--ig-accent-dark); --ig-focus-ring: rgba(44, 90, 114, .45); --ig-focus-ring-soft: rgba(44, 90, 114, .25); /* --- Шрифтове --------------------------------------------------------- */ --ig-font-display: 'Playfair Display', 'PT Serif', Georgia, serif; --ig-font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- Типографска скала (fluid) ---------------------------------------- */ --ig-fs-hero: clamp(2.5rem, 5.5vw, 4rem); --ig-fs-display: clamp(2rem, 3.6vw, 2.75rem); --ig-fs-section: clamp(1.125rem, 1.8vw, 1.375rem); --ig-fs-card-title: 1.0625rem; /* Цена — стълбицата по DESIGN.md §8: 24 / 26 / 28px. Не е флуидна: преди clamp(1.5rem, 2vw, 1.75rem) даваше 25.6px при 1280, а картите на имотите (property.css) вече са фиксирани на 26/28px — цените се разминаваха. Стойностите по брейкпойнтите са по-долу, след `:root`. */ --ig-fs-price: 1.5rem; --ig-fs-subhead: 1.0625rem; --ig-fs-lead: clamp(1.0625rem, 1.4vw, 1.125rem); --ig-fs-body: 1rem; --ig-fs-body-sm: 0.9375rem; --ig-fs-meta: 0.8125rem; --ig-fs-small: 0.875rem; --ig-fs-caption: 0.75rem; --ig-fs-eyebrow: 0.75rem; /* --- Междуредово ------------------------------------------------------ */ --ig-lh-tight: 1.08; --ig-lh-display: 1.12; --ig-lh-heading: 1.3; --ig-lh-body: 1.65; /* --- Отстояния (базова единица 8px) ----------------------------------- */ --ig-s-1: 4px; --ig-s-2: 8px; --ig-s-3: 12px; --ig-s-4: 16px; --ig-s-5: 24px; --ig-s-6: 32px; --ig-s-7: 48px; --ig-s-8: 64px; --ig-s-9: 96px; --ig-s-10: 128px; --ig-s-11: 160px; /* --- Вертикален ритъм -------------------------------------------------- */ --ig-section-y: clamp(64px, 8vw, 112px); --ig-section-y-sm: clamp(40px, 5vw, 72px); /* --- Контейнер --------------------------------------------------------- */ --ig-container: 1280px; --ig-container-narrow: 760px; --ig-container-form: 620px; --ig-gutter: 16px; /* --- Дължина на реда (мярка за четене) --------------------------------- Текстовете в `.entry-content` вървят по цялата ширина на контейнера — 1184px при 1440. Golos Text 16px има средна ширина на знака 8,84px, тоест 134 знака на ред (измерено в браузър). Оптимумът за четене е 45–75 знака. 40rem = 640px дава ~72 знака. Ползва се само за текстови блокове — таблици, галерии и форми НЕ се ограничават от нея. */ --ig-measure: 40rem; /* --- Радиуси ----------------------------------------------------------- */ --ig-radius-sm: 2px; --ig-radius: 3px; --ig-radius-lg: 4px; --ig-radius-full: 9999px; /* --- Сенки (студено-синьо-черно, не чисто черно) ----------------------- */ --ig-shadow-1: 0 1px 2px rgba(18, 26, 32, .05); --ig-shadow-2: 0 4px 6px rgba(18, 26, 32, .07), 0 2px 4px rgba(18, 26, 32, .05); --ig-shadow-3: 0 10px 15px rgba(18, 26, 32, .10), 0 4px 6px rgba(18, 26, 32, .05); --ig-shadow-4: 0 20px 25px rgba(18, 26, 32, .15), 0 10px 10px rgba(18, 26, 32, .05); /* --- Движение ---------------------------------------------------------- */ --ig-ease: cubic-bezier(.22, .61, .36, 1); --ig-t-fast: 150ms; --ig-t-base: 200ms; --ig-t-slow: 250ms; /* --- Слоеве ------------------------------------------------------------ */ --ig-z-base: 1; --ig-z-sticky: 100; --ig-z-header: 500; --ig-z-overlay: 900; --ig-z-modal: 1000; /* --- Мерни единици ----------------------------------------------------- */ --ig-space-unit: 'm²'; /* BG: м² · EN: m² — сменя се от превода */ } /* Цена — стълбицата по DESIGN.md §8 (24 → 26 → 28px), същата като тази в property.css §1, за да съвпадат всички карти на имот. */ @media (min-width: 768px) { :root { --ig-fs-price: 1.625rem; } } @media (min-width: 1200px) { :root { --ig-fs-price: 1.75rem; } } /* --- Гръцки страници (``) ------------------------------ Нито Playfair Display, нито Golos Text имат гръцко подмножество (проверено в google/fonts METADATA.pb), значи на гръцките landing страници и заглавията, и текстът падаха на системен заменящ шрифт. Тук веригата се удължава с гръцките подмножества на Noto Serif Display / Noto Sans (self-hosted, само гръцки глифи — виж fonts.css). Двата шрифта стоят СЛЕД брандовите, така че латиницата и кирилицата на същите страници (напр. българското меню) продължават да идват от Playfair/Golos. `html:lang(el)` (специфичност 0,1,1) надделява над `:root` (0,1,0), а `` се задава от плъгина за страниците с `_ig_lang = el`. */ html:lang(el) { --ig-font-display: 'Playfair Display', 'Noto Serif Display', Georgia, serif; --ig-font-body: 'Golos Text', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Тъмна секция — превключва текстовите роли наведнъж */ .ig-on-dark { --ig-text: var(--ig-text-on-dark); --ig-text-secondary: rgba(255, 255, 255, .92); --ig-text-tertiary: var(--ig-text-on-dark-soft); --ig-text-muted: var(--ig-text-on-dark-faint); --ig-link: #FFFFFF; --ig-link-hover: var(--ig-accent-light); --ig-price: var(--ig-accent-light); --ig-border: rgba(255, 255, 255, .16); --ig-border-subtle: rgba(255, 255, 255, .10); } /* Светъл остров върху тъмна секция */ .ig-on-light { --ig-text: var(--ig-ink-950); --ig-text-secondary: var(--ig-ink-800); --ig-text-tertiary: var(--ig-ink-600); --ig-link: var(--ig-primary); --ig-link-hover: var(--ig-accent-dark); --ig-price: var(--ig-accent-dark); --ig-border: var(--ig-border-on-light); --ig-border-subtle: var(--ig-border-on-light-subtle); }