/* ========================================================== ДИЗАЙН-ТОКЕНИ СТУДІЇ Три готові стилі — обираються на тезі : світлий, мʼякий, Apple-естетика (за замовчуванням) камінь/грейж, заголовки капсом, прямі кути фото темний, кінематографічний, темне скло Акцент у заголовку: слово → сірий тон. Під клієнта міняйте значення тут. Решта підлаштується сама. ========================================================== */ :root { /* ---------- Кольори ---------- */ --color-bg: #FFFFFF; /* чисто білий (чорно-білий стиль, рішення Саші 2026-11-04) */ --color-bg-alt: #F4F4F4; /* світло-сірі плашки */ --color-surface: #FFFFFF; --color-ink: #111111; --color-ink-2: #444444; --color-muted: #6B6B6B; /* сірий акцент у заголовках */ --color-line: rgba(17, 17, 17, 0.12); --color-line-strong: rgba(17, 17, 17, 0.24); --color-hover: rgba(17, 17, 17, 0.05); --color-accent: #111111; /* кнопки — чорні */ --color-accent-hover: #000000; --color-on-accent: #FFFFFF; --gradient-accent: linear-gradient(180deg, #111111 0%, #111111 100%); --shadow-accent: 0 6px 18px rgba(0, 0, 0, 0.14); --color-accent-soft: #EDEDED; --color-error: #B3261E; --color-success: #2E6B4A; /* Заглушка під фото */ --placeholder-a: #EDEDED; --placeholder-b: #DADADA; /* Матове скло */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-strong: rgba(255, 255, 255, 0.88); --glass-border: rgba(255, 255, 255, 0.7); --glass-blur: saturate(180%) blur(20px); /* ---------- Шрифти ---------- */ --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-heading: var(--font-sans); --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem); --text-3xl: clamp(2.625rem, 1.8rem + 3.6vw, 5rem); --text-4xl: clamp(3rem, 2rem + 5vw, 6.5rem); --text-5xl: clamp(3.5rem, 1.5rem + 9vw, 10rem); /* гігантський заголовок */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* Характер заголовків */ --heading-weight: 300; --heading-transform: none; --heading-tracking: -0.02em; --heading-leading: 1.08; /* Характер дрібного інтерфейсного тексту (меню, кнопки) */ --ui-transform: none; --ui-tracking: 0.01em; --leading-snug: 1.3; --leading-body: 1.6; --tracking-wide: 0.14em; /* ---------- Відступи ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --section-y: clamp(40px, 4vw, 56px); /* однаковий компактний відступ для всіх блоків (між блоками — удвічі) */ --gutter: clamp(16px, 4vw, 40px); --container: 1200px; --container-narrow: 760px; /* ---------- Форма ---------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --radius-media: var(--radius-lg); /* кути фото */ --radius-card: var(--radius-lg); /* кути карток */ --shadow-sm: 0 1px 2px rgba(22, 22, 26, 0.05); --shadow-md: 0 8px 24px rgba(22, 22, 26, 0.06), 0 1px 2px rgba(22, 22, 26, 0.04); --shadow-lg: 0 24px 60px rgba(22, 22, 26, 0.10); /* ---------- Рух ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --duration: 0.35s; --nav-height: 64px; } /* ========================================================== СТИЛЬ: EDITORIAL — камінь, архітектура, журнальна подача ========================================================== */ [data-style="editorial"] { --color-bg: #E6E3DD; --color-bg-alt: #DAD6CF; --color-surface: #EFEDE9; --color-ink: #1A1A1A; --color-ink-2: #3F3E3A; --color-muted: #5E5C56; --color-line: rgba(26, 26, 26, 0.16); --color-line-strong: rgba(26, 26, 26, 0.32); --color-hover: rgba(26, 26, 26, 0.06); --color-accent: #1A1A1A; --color-accent-hover:#000000; --color-accent-soft: #D2CEC6; --placeholder-a: #CFCBC3; --placeholder-b: #B9B4AA; --heading-weight: 300; --heading-transform: uppercase; --heading-tracking: -0.01em; --heading-leading: 0.98; --ui-transform: uppercase; --ui-tracking: 0.12em; --radius-media: 0px; --radius-card: 0px; --shadow-md: none; } /* ========================================================== ТЕМНА ПАЛІТРА Використовується стилем cinematic, а також будь-де: .section--dark (темна секція), .hero--full (текст на фото) ========================================================== */ [data-style="cinematic"], .section--dark, .hero--full, .nav--overlay:not(.is-scrolled):not(.is-open) { --color-bg: #111112; --color-bg-alt: #19191B; --color-surface: #1E1E21; --color-ink: #F2F0EC; --color-ink-2: #BDBAB3; --color-muted: #9A978F; --color-line: rgba(255, 255, 255, 0.12); --color-line-strong: rgba(255, 255, 255, 0.30); --color-hover: rgba(255, 255, 255, 0.08); --color-accent: #F2F0EC; --color-accent-hover:#FFFFFF; --color-on-accent: #111112; --color-accent-soft: rgba(255, 255, 255, 0.10); --placeholder-a: #2A2A2D; --placeholder-b: #161618; --glass-bg: rgba(28, 28, 31, 0.42); --glass-bg-strong: rgba(28, 28, 31, 0.86); --glass-border: rgba(255, 255, 255, 0.14); } [data-style="cinematic"] { --heading-weight: 500; --heading-transform: uppercase; --heading-tracking: -0.025em; --heading-leading: 0.92; --ui-transform: uppercase; --ui-tracking: 0.1em; --radius-media: 4px; --radius-card: 20px; --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.4); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5); } /* ========================================================== ПАЛІТРА «Глибокий шоколадний» — основна (рішення Саші 2026-11-05): 60% #FFFFFF · 30% #E7E2DD · 10% #59463E Перекриває чорно-білі значення з :root вище; чорно-білий варіант — коміт 20eda86 ========================================================== */ :root { --color-bg-alt: #E7E2DD; --color-accent-soft: #E7E2DD; --placeholder-a: #E7E2DD; --placeholder-b: #D9D2CB; --color-muted: #59463E; --color-accent: #59463E; --color-accent-hover: #4A3A33; --gradient-accent: linear-gradient(180deg, #59463E 0%, #59463E 100%); --shadow-accent: 0 6px 18px rgba(89, 70, 62, 0.22); --color-line: rgba(89, 70, 62, 0.16); --color-line-strong: rgba(89, 70, 62, 0.3); }