/* ========================================================== ДИЗАЙН-ТОКЕНИ СТУДІЇ Три готові стилі — обираються на тезі : світлий, мʼякий, Apple-естетика (за замовчуванням) камінь/грейж, заголовки капсом, прямі кути фото темний, кінематографічний, темне скло Акцент у заголовку: слово → сірий тон. Під клієнта міняйте значення тут. Решта підлаштується сама. ========================================================== */ :root { /* ---------- Кольори ---------- */ /* Світлий стиль бренду (ребрендинг 2026-10-29, «Бренд Make Your Design/README.md» → «Стиль»). 60 / 30 / 10: світлий фон · графіт і сірий текст · акценти. */ --color-bg: #F5F5F7; /* фон */ --color-bg-alt: #FFFFFF; /* білі секції й картки */ --color-surface: #FFFFFF; --color-ink: #1D1D1F; /* графіт */ --color-ink-2: #6E6E73; /* другорядний текст */ --color-muted: #6E6E73; /* дрібні підписи (контраст 4.8:1) */ --color-subtle: #86868B; /* сірий акцент у заголовках */ --color-line: rgba(29, 29, 31, 0.10); --color-line-strong: rgba(29, 29, 31, 0.20); --color-hover: rgba(29, 29, 31, 0.05); /* легка підсвітка при наведенні */ --color-accent: #2F6BFF; /* синій — лише дії: кнопки, посилання */ --color-accent-hover: #1F55E0; --color-on-accent: #FFFFFF; --color-accent-soft: rgba(47, 107, 255, 0.10); --color-brand: #FF6A2B; /* помаранчевий — фірмовий підпис: myd™, надзаголовки, номери, кола */ --color-brand-deep: #C8461A; --color-brand-soft: rgba(255, 106, 43, 0.12); --brand-glow: rgba(255, 106, 43, 0.13); /* тепле світло в кутку першого екрана */ --color-error: #C4291C; --color-success: #1E7A46; /* Заглушка під фото */ --placeholder-a: #E9E6E0; --placeholder-b: #D9D5CD; /* Матове скло */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.88); --glass-border: rgba(255, 255, 255, 0.7); --glass-blur: saturate(180%) blur(20px); /* Скляні кнопки (рішення 2026-10-29) */ --btn-glass-bg: rgba(255, 255, 255, 0.55); --btn-glass-bg-hover: rgba(255, 255, 255, 0.88); --btn-glass-border: rgba(255, 106, 43, 0.55); /* тонка помаранчева рамка */ --btn-glass-border-hover: #FF6A2B; --btn-glass-shadow: 0 10px 30px -12px rgba(29, 29, 31, 0.28); /* ---------- Шрифти ---------- */ --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; --weight-semibold: 600; --weight-bold: 700; /* велика типографіка MAKE U R DESIGN (референс Tone E-commerce) */ /* Характер заголовків */ --heading-weight: 400; --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(56px, 6.67vw, 96px); /* 96px при 1440 */ --gutter: clamp(16px, 4vw, 40px); --container: 1200px; /* ---------- Сітка (як Layout grid у Figma): 12 колонок на десктопі, 8 на планшеті, 4 на телефоні ---------- */ --cols: 12; --col-gap: 24px; --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 2px 6px rgba(29, 29, 31, 0.05), 0 30px 70px -24px rgba(29, 29, 31, 0.26); /* картки бренду */ /* ---------- Рух ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --duration: 0.35s; --nav-height: 64px; } /* Сітка на планшеті й телефоні (поля сторінки — --gutter: 40px → 16px) */ @media (max-width: 1024px) { :root { --cols: 8; } } @media (max-width: 640px) { :root { --cols: 4; --col-gap: 16px; } } /* ========================================================== СТИЛЬ: 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); }