/* ============================================================= Maxim Terziyski — Design Tokens ВАЖНО ЗА ПОДДРЪЖКАТА Този файл е ФОРК на BulGhar Homes `colors_and_type.css`. Структурата, имената на променливите и типографските роли са идентични, за да работят компонентите от дизайн системата без промяна. Сменена е САМО палитрата: navy/gold/cream става black/bone/paper. Затова долу ще видиш --navy и --gold с черни и костени стойности. Това не е грешка: --navy е ролята "основен тъмен фон", --gold е ролята "акцент". Новите четими имена (--black, --bone, --paper) са дефинирани първи, а имената от дизайн системата сочат към тях. ============================================================= */ /* Шрифтовете се зареждат с в на всяка страница, не с @import. @import вътре в CSS сериализира заявките: браузърът трябва първо да изтегли и прочете този файл и чак тогава вижда шрифтовете. */ :root { /* ---------- Палитра на този сайт ---------- */ --black: #0a0a0a; /* основен фон, галерийно черно, не чисто #000 */ --black-void: #000000; /* full-bleed медия, drawer, overlay */ --black-soft: #161616; /* повдигнати повърхности, карти */ --black-line: #262626; /* косъм бордюр върху черно - ДЕКОРАТИВЕН */ --ui-line: #5d5d5d; /* граница на поле, чип, бутон - 3.01:1, WCAG 1.4.11 */ --bone: #c9bca6; /* акцент: костено, топло, тихо */ --bone-light: #e4dacb; /* hover / градиент */ --bone-deep: #8a7c66; /* акцент върху светъл фон */ --bone-tint: rgba(201, 188, 166, 0.10); --paper: #f2efe9; /* светъл фон, "галерийна стена" */ --paper-soft: #faf8f4; /* вложени светли повърхности */ --paper-line: #e3ded4; /* косъм бордюр върху светло */ --graphite: #111110; /* текст върху светло */ --graphite-2: #46443f; /* вторичен текст върху светло */ --graphite-3: #6b6862; /* метаданни върху светло (AA на paper) */ --white: #ffffff; /* ---------- Мост към имената на дизайн системата ---------- components.css ползва тези. Не ги пипай, пипай палитрата горе. */ --navy: var(--black); --navy-deep: var(--black-void); --navy-soft: var(--black-soft); --navy-line: var(--black-line); --gold: var(--bone); --gold-light: var(--bone-light); --gold-deep: var(--bone-deep); --gold-tint: var(--bone-tint); --cream: var(--paper); --cream-soft: var(--paper-soft); --cream-line: var(--paper-line); --ink: var(--graphite); --ink-2: var(--graphite-2); --ink-3: var(--graphite-3); /* ---------- Семантични роли ---------- */ --bg: var(--black); --bg-elev: var(--black-soft); --surface: var(--black-void); --surface-line: var(--black-line); --fg: #f4f2ee; --fg-2: rgba(244, 242, 238, 0.72); --fg-3: rgba(244, 242, 238, 0.48); --accent: var(--bone); --accent-hover: var(--bone-light); --accent-press: var(--bone-deep); --bg-cream: var(--paper); --bg-cream-elev: var(--paper-soft); --fg-cream: var(--graphite); --fg-cream-2: var(--graphite-2); --fg-cream-3: var(--graphite-3); /* ---------- Статуси (приглушени, галерийни) ---------- */ --success: #5f7a64; --warning: #a8894a; --danger: #9a5a4e; --info: #5f6f80; /* ---------- Градиенти ---------- */ --grad-gold: linear-gradient(135deg, #8a7c66 0%, #c9bca6 35%, #e4dacb 65%, #f4efe4 100%); --grad-gold-shine: linear-gradient(120deg, #c9bca6 0%, #f2ece0 50%, #c9bca6 100%); --grad-navy-deep: linear-gradient(180deg, #1c1c1c 0%, #0a0a0a 55%, #000000 100%); --grad-navy-radial: radial-gradient(ellipse at top, #1d1d1d 0%, #0a0a0a 55%, #000000 100%); --grad-navy-to-cream: linear-gradient(180deg, #0a0a0a 0%, #f2efe9 100%); --grad-scrim: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.78) 100%); --grad-scrim-top: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%); /* ---------- Типография ---------- ⚠️ Italiana НЯМА кирилица (само latin субсет). Затова тя НЕ носи заглавия: на български всяко заглавие падаше на Times New Roman. Заглавията минават на Cormorant Garamond, който е от същото семейство като вече заредения Cormorant SC и има кирилица. Italiana остава само за логотипа, който и без това е на латиница. */ --font-wordmark: 'Italiana', 'Cormorant Garamond', 'Times New Roman', serif; --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-tagline: 'Cormorant SC', 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --font-caption: 'Jura', 'Avenir Next', 'Helvetica Neue', sans-serif; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-56: 3.5rem; --fs-64: 4rem; --fs-80: 5rem; --fs-96: 6rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --ls-tag: 0.18em; --ls-caps: 0.12em; --ls-eyebrow: 0.22em; --ls-tight: -0.01em; /* ---------- Отстояния ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- Радиуси ---------- Галерийният език е правоъгълен. Държим скалата за съвместимост, но почти всичко на сайта е с радиус 0. */ --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-pill: 999px; /* ---------- Бордюри ---------- */ --border-hair-navy: 1px solid var(--black-line); --border-hair-cream: 1px solid var(--paper-line); --border-gold: 1px solid var(--bone); --border-gold-2: 1px solid var(--bone); /* ---------- Сенки (черни и плитки, не топли) ---------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.55); --shadow-lg: 0 28px 60px -18px rgba(0, 0, 0, 0.65); --shadow-xl: 0 48px 96px -28px rgba(0, 0, 0, 0.75); --shadow-gold-glow: 0 0 0 1px var(--bone); /* ---------- Движение ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-page: 640ms; /* ---------- Оформление ---------- */ --max-w: 1600px; --gutter: clamp(20px, 4vw, 56px); --web-gutter: clamp(18px, 4vw, 64px); --web-max-w: 1600px; --web-gap: clamp(16px, 2.4vw, 40px); --header-h: 72px; --web-fs-hero: clamp(40px, 7vw, 116px); --web-fs-h1: clamp(34px, 5vw, 72px); --web-fs-h2: clamp(26px, 3.4vw, 48px); --web-fs-h3: clamp(20px, 2.2vw, 32px); --web-fs-body: clamp(15px, 1.05vw, 18px); --web-fs-small: clamp(12px, 0.9vw, 14px); } /* =================== Базова типография =================== */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .bg-display-xl, h1.bg-display { font-family: var(--font-display); font-weight: 400; font-size: var(--web-fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .bg-display-lg { font-family: var(--font-display); font-weight: 400; font-size: var(--web-fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .bg-display-md { font-family: var(--font-display); font-weight: 400; font-size: var(--web-fs-h2); line-height: var(--lh-snug); } h1, .bg-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--web-fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; } h2, .bg-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--web-fs-h2); line-height: var(--lh-snug); margin: 0; } h3, .bg-h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-24); line-height: var(--lh-snug); margin: 0; } h4, .bg-h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-20); line-height: var(--lh-snug); margin: 0; } .bg-tagline { font-family: var(--font-tagline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-tag); font-size: var(--fs-14); color: var(--bone); } .bg-eyebrow { font-family: var(--font-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-12); color: var(--bone); } p, .bg-body { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-normal); } .bg-body-lg { font-family: var(--font-body); font-size: var(--fs-18); line-height: var(--lh-loose); } .bg-body-sm { font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-normal); } .bg-caption, .bg-label, small { font-family: var(--font-caption); font-weight: 400; font-size: var(--fs-13); letter-spacing: 0.04em; color: var(--fg-2); } .bg-meta { font-family: var(--font-caption); font-weight: 300; font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3); } /* Цените НИКОГА не са с Italiana - цифрите излизат прекалено фини. Правилото идва от дизайн системата и важи и тук. */ .bg-price { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; } .bg-text-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Светла тема (галерийна стена) ---------- */ .on-cream { background: var(--bg-cream); color: var(--fg-cream); } .on-cream .bg-tagline, .on-cream .bg-eyebrow { color: var(--bone-deep); } .on-cream .bg-caption, .on-cream .bg-meta { color: var(--graphite-3); } .on-cream h1, .on-cream h2, .on-cream h3, .on-cream h4 { color: var(--graphite); } /* ---------- Фокус (костен, никога син) ---------- */ :focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; border-radius: 0; }