@font-face{font-family:"Kenao";src:url(/fonts/kenao.woff2) format("woff2");font-weight:400 700;font-display:swap} @font-face{font-family:"Cormorant";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:"Cormorant";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Cormorant";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"DM Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/dmsans-400-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"DM Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/dmsans-400-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Геометрия — единственное, что этот файл объявляет сам: styles.css на страницу политики не подключается, а /theme.css радиусов не знает. Палитра и шрифты приходят из theme.css, который build.py дописывает следом; держать здесь их копию нельзя — она была фиолетовой для обеих студий. */ :root { --radius-md:18px; --radius-pill:100px; --radius-lg:26px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.75} nav{ position:fixed;top:0;left:0;right:0;z-index:100; padding:1.1rem 3rem;display:flex;justify-content:space-between;align-items:center; background:var(--privacy-nav-bg);backdrop-filter:blur(20px); border-bottom:1px solid rgb(var(--footer-line-rgb) / 0.15); } .nav-back{color:var(--purple-pale);text-decoration:none;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:0.5rem;transition:color 0.2s} .nav-back:hover{color:var(--white)} .nav-logo-text{font-size:1rem;letter-spacing:0.12em;color:var(--white-muted)} .lang-toggle{display:flex} .lang-btn{background:transparent;border:1px solid var(--control-line-dark);color:var(--white-muted);padding:0.3rem 0.85rem;font-family:var(--font-body);font-size:0.7rem;cursor:pointer;transition:all 0.2s} .lang-btn:first-child{border-radius:var(--radius-pill) 0 0 var(--radius-pill)} .lang-btn:last-child{border-radius:0 var(--radius-pill) var(--radius-pill) 0;border-left:none} .lang-btn.active{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent-alt)} .page-wrap{max-width:760px;margin:0 auto;padding:8rem 2rem 5rem} .page-title{font-size:clamp(2rem,5vw,3rem);font-weight:500;line-height:1.1;margin-bottom:0.75rem;color:var(--ink)} .page-meta{font-size:0.8rem;color:var(--ink-soft);margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--line-soft)} h2{font-size:1.2rem;font-weight:500;color:var(--ink);margin:2.5rem 0 0.75rem} p{font-size:0.9rem;color:var(--ink-soft);margin-bottom:0.9rem} ul{font-size:0.9rem;color:var(--ink-soft);padding-left:1.4rem;margin-bottom:0.9rem} ul li{margin-bottom:0.4rem} a{color:var(--purple-900);text-decoration:none} a:hover{color:var(--purple-700)} .highlight-box{background:var(--paper2);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:1.5rem 1.75rem;margin:2rem 0;font-size:0.88rem;color:var(--ink-soft)} .highlight-box strong{color:var(--ink)} footer{background:var(--bg-dark);color:var(--white-muted);padding:2rem 3rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgb(var(--footer-line-rgb) / 0.14);font-size:0.72rem} footer a{color:var(--purple-pale);text-decoration:none} footer a:hover{color:var(--white)} /* hidden/show per lang */ [data-lang]{display:none} body.lang-lv [data-lang="lv"]{display:block} body.lang-ru [data-lang="ru"]{display:block} h2[data-lang], p[data-lang], ul[data-lang], .page-title[data-lang], .page-meta[data-lang], .highlight-box[data-lang]{display:none} body.lang-lv h2[data-lang="lv"],body.lang-lv p[data-lang="lv"],body.lang-lv ul[data-lang="lv"],body.lang-lv .page-title[data-lang="lv"],body.lang-lv .page-meta[data-lang="lv"],body.lang-lv .highlight-box[data-lang="lv"]{display:block} body.lang-ru h2[data-lang="ru"],body.lang-ru p[data-lang="ru"],body.lang-ru ul[data-lang="ru"],body.lang-ru .page-title[data-lang="ru"],body.lang-ru .page-meta[data-lang="ru"],body.lang-ru .highlight-box[data-lang="ru"]{display:block} @media(max-width:700px){ nav{padding:1rem 1.5rem} .page-wrap{padding:7rem 1.25rem 4rem} footer{flex-direction:column;gap:0.75rem;text-align:center} } /* ── Studio palette — SAFFRON ──────────────────────────────────────────────── Тёплая светлая система: бумага цвета слоновой кости, шафран как единственный насыщенный цвет и бордо как второй акцент. Источник значений — outputs/saffron-palette-2026-08-19.md: §3 (двадцать токенов), §5 (запреты), §6 (карта Yasha → Saffron), §10 (композиция). Файл дописывается build.py к shared/styles.css и shared/privacy.css, поэтому его :root выигрывает. Первая половина файла — цвет и шрифт, в конце добавлена раскладка Saffron: бенто зала, блок «что входит в цену» и лестница прайса. Она здесь, а не в shared, потому что shared принадлежит и живой Яше тоже. Героя в этом списке больше нет: 20.08 он сведён к общему полноэкранному. НИКОГДА не переопределять --gutter / --container / --pad-x: shared меняет их внутри @media, а тема идёт позже и молча побьёт медиазапрос. Шрифты те же, что у Яши, — Kenao (display) + DM Sans (body) + Cormorant для кириллицы. Решение клиента; вариант Piazzolla + Onest из §9 палитры отменён. Костыль body.lang-ru несущий: у Kenao нет кириллицы. ┌── ⚠ ЗАПРЕЩЁННЫЕ ПАРЫ (палитра §5). Каждая выглядит правдоподобно и │ проваливает контраст. Именно так у Яши появилась карточка «весь день» │ с 1.63:1. Проверять скриптом, а не глазом. │ │ белый на --saffron .................. 2.73 → --espresso (6.40) │ белый на --saffron-lift ............. 2.18 → --espresso (8.01) │ белый на --saffron-deep ............. 3.75 → --espresso (4.67) │ белый на --blush .................... 1.44 → --ink │ --ink на --saffron-deep ............. 4.33 → --espresso (4.67) │ --ink-soft на --saffron ............. 2.60 → --espresso │ --saffron ТЕКСТОМ по бумаге ......... 2.66 → --oxblood (10.10) │ --saffron-deep текстом по бумаге .... 3.65 → только крупный ≥24px │ --ink-dim в основном тексте ......... 3.12 на тинтах → --ink-soft │ кольцо фокуса --saffron ............. 2.66 → --oxblood │ --line рамкой поля ввода ............ 1.48 → --line-strong │ │ Одним предложением: НИКАКОГО БЕЛОГО ТЕКСТА НА ШАФРАНОВОЙ ЗАЛИВКЕ. │ Белый живёт только на бордовом (--oxblood 10.36) и на эспрессо (17.49). └────────────────────────────────────────────────────────────────────────── ────────────────────────────────────────────────────────────────────────── */ :root{ /* ══ 1. ПАЛИТРА ═════════════════════════════════════════════════════════ Единственное место во всём файле, где стоят литералы. Всё ниже — ссылки на эти имена. Двойная запись hex + OKLCh: hex для браузера, OKLCh как источник истины при правках. */ /* Бумага. Оттенок 76–82° — стены студии, сдвинутые на одну тёплую ось с шафраном. Хроматика ≤0.026: самым цветным на странице обязаны остаться фотографии, а не фон. */ --paper: #fdfaf4; /* oklch(98.6% 0.009 82) — фон страницы */ --paper-2: #faf4e9; /* oklch(96.8% 0.016 80) — чередующаяся полоса */ --card: #fefbf6; /* oklch(99.0% 0.008 82) — карточка над бумагой */ --sand: #f6e9d8; /* oklch(94.0% 0.026 76) — плотная карточка */ /* Розовый — шторы из кадров. Осветлён до тинта: на полной насыщенности спорил бы с самими шторами на фото. */ --blush-pale: #fbe7e9; /* oklch(94.5% 0.022 12) */ --blush: #f8cad0; /* oklch(88.0% 0.052 10) */ /* Шафран — терракотовый щит из img03, поднятый по насыщенности до специи. Единственный по-настоящему насыщенный цвет системы. ВСЕГДА несёт тёмную подпись --espresso. */ --saffron-pale: #fcdfc2; /* oklch(92.0% 0.050 68) — тинт, подложка */ --saffron-tint: #f9ca9c; /* oklch(87.0% 0.080 66) — плашка, текст на тёмном*/ --saffron: #e18518; /* oklch(70.0% 0.155 62) — ЗАЛИВКА КНОПКИ, покой */ --saffron-lift: #f09b40; /* oklch(76.0% 0.145 64) — ХОВЕР (светлее!) */ --saffron-deep: #c36d19; /* oklch(62.0% 0.140 58) — нажатие, крупный текст */ /* Бордо — пол студии. Второй акцент, и в отличие от шафрана он носит БЕЛЫЙ текст (10.36). Ссылки, вторичные заливки, featured-карточка, фокус. */ --oxblood: #6e2827; /* oklch(38.0% 0.100 24) */ --oxblood-soft: #8b4645; /* oklch(48.0% 0.095 22) */ /* Тёмное и текст. Никаких холодных серых: в этой комнате нет ни одного нейтрально-серого пикселя. */ --espresso: #2b100d; /* oklch(21.5% 0.045 28) — подвал, лайтбокс и ПОДПИСЬ НА ВСЕХ ШАФРАНОВЫХ ЗАЛИВКАХ */ --ink: #321813; /* oklch(24.5% 0.042 32) — основной текст */ --ink-soft: #69524c; /* oklch(46.0% 0.032 34) — вторичный текст */ /* ⚠ Отступление от §3 палитры, осознанное. Там --ink-dim = oklch(56%) с оговоркой «только крупный текст». Но shared/styles.css вешает его на .price-note, .contact-info-label, .hall-equip-title, .form-consent-note, .mm-hours — всё это 10–12px. На --sand такой токен даёт 3.92:1 и валит основной текст. Затянут до 52%: 4.67 на самой плотной поверхности, где он реально встречается, при сохранённых оттенке и хроме. */ --ink-dim: #76645f; /* oklch(52.0% 0.024 36) — третий уровень текста */ /* Линии. Два токена намеренно: у Яши один --card-border на всё, из-за чего рамки контролов давали ~1.5:1 и нарушали WCAG 1.4.11. */ --line: #e0cdbe; /* oklch(86.0% 0.030 62) — ТОЛЬКО декоративные разделители, 1.48:1, ничего не сообщают */ --line-strong: #8b725c; /* oklch(57.0% 0.045 62) — границы контролов, ≥3:1 на любой поверхности системы */ --white: #fffdfa; /* oklch(99.5% 0.004 85) — текст на тёмном */ /* ══ 2. ЛЕГАСИ-ИМЕНА ════════════════════════════════════════════════════ Их читают правила shared/*.css напрямую. Переименовывать все селекторы под шафрановые имена — отдельная работа; пока имя Яши держит роль, а не цвет. Роли разведены на шаге 1: см. --accent-* в разделе 3. */ --paper2: var(--paper-2); --card-bg: var(--sand); /* не используется shared */ --card-bg2: var(--saffron-pale); /* не используется shared */ --bg-dark: var(--espresso); /* подвал */ --bg-dark2: var(--oxblood); /* не используется shared */ --purple-cta: var(--saffron); /* заливка покоя: .btn-primary, .nav-cta, .mobile-cta-btn, .consent-accept, .btn-hall:hover */ --purple-600: var(--oxblood); /* акцентный ТЕКСТ и границы по светлому: .faq-q:hover, .map-btn */ --purple-700: var(--oxblood-soft); /* ховер мелких ссылок: меню, .social-link, политика */ --purple-900: var(--oxblood); /* самый плотный акцентный текст */ --purple-pale-text: var(--oxblood-soft); /* базовый цвет ссылок */ --purple-light: var(--saffron-deep); /* рамка карточки на ховере, буллит */ --purple-pale: var(--saffron-tint); /* ссылки на тёмной шапке политики */ --white-muted: rgba(255,253,250,0.72); /* 9.3:1 на --espresso */ --white-dim: rgba(255,253,250,0.62); /* 7.4:1 на --espresso */ --font-display:"Kenao",Georgia,serif; --font-body:"DM Sans",sans-serif; /* ══ 3. СЕМАНТИЧЕСКИЕ ТОКЕНЫ ════════════════════════════════════════════ */ /* ── Подписи на цветных заливках ───────────────────────────────────────── Ровно те места, из-за которых прямая перекраска shared дала бы ~2.7:1. Оба имени тёмные: белого на шафране не бывает. */ --on-accent: var(--espresso); /* 6.40 на --saffron, 4.67 на --saffron-deep */ --on-accent-alt: var(--espresso); /* у Яши тут второй белый, у нас разнобой схлопывается в один цвет */ /* ── Акцент по ролям ───────────────────────────────────────────────────── Светлая тема требует противоположных направлений: заливка на ховере СВЕТЛЕЕТ, а текст по бумаге обязан темнеть. Одним токеном это не выразить. */ --accent-lift: var(--saffron-lift); /* ховер кнопок, активный язык, 8.01 */ --accent-solid: var(--saffron); /* иконка открытого FAQ, кнопка в шторке */ --accent-display: var(--saffron-deep); /* em в заголовках (≥24px), полоски, иконки правил и контактов, 3.65 */ /* ── Линии ─────────────────────────────────────────────────────────────── --line-rgb — триплет --line-strong для всей лестницы альф (0.07…0.45): на низких альфах это тёплая волосяная линия, на высоких — тинт плашки. Границы КОНТРОЛОВ альфой не набрать: даже 0.5 даёт 1.90:1, поэтому у них сплошной --line-strong. */ --line-rgb: 139 114 92; --line-soft: var(--line); /* Saffron сводит две декоративные линии Яши в одну: §3 палитры определяет ровно две весовые */ --control-line: var(--line-strong); /* .btn-hall — 4.33 вместо 1.70 */ --plate-line: var(--line-strong); /* бургер на прокрученной шапке */ --control-line-dark: rgb(var(--footer-line-rgb) / 0.55); /* переключатель языка на тёмной шапке политики: 3.99 вместо 1.94 */ --pill-line: var(--line-strong); /* .social-link .wa-inline: 4.33 вместо 1.48 */ --map-line: var(--line-strong); /* .map-btn: 4.11 вместо 1.26 */ /* Тени. Мягкая — бордовая, плотная (плавающие элементы) — эспрессо. Тень в тёплой комнате не может быть холодной. */ --shadow-tint: 110 40 39; /* = --oxblood */ --shadow-tint-deep: 43 16 13; /* = --espresso */ /* Тёмная фурнитура поверх фото: подложка точек слайдера, фон стрелок, затемнение под шторкой меню. */ --ink-rgb: 50 24 19; /* = --ink */ /* Волосяные линии подвала: осветлённый тон студии на --espresso */ --footer-line-rgb: 249 202 156; /* = --saffron-tint */ /* Фирменный светлый Marketerra (White Jade) — наведение на подпись разработчика в подвале. Палитра чужая и в остальной странице не участвует: это подпись агентства, а не элемент студии. */ --made-by-hover:#DAE0B7; /* Бывший «четвёртый фиолетовый» Яши: рамка иконки FAQ, рамка кнопки карты, ореол под секцией контактов. У Saffron сводится к бордо. */ --accent-alt-rgb: 110 40 39; /* = --oxblood */ /* Матовые светлые плашки: шапка, бейдж зала, пилюли. Бумага, а не холодный белый, иначе плашка сидит на тёплом фоне сизым пятном. */ --plate-rgb: 253 250 244; /* = --paper */ /* ── Герой ─────────────────────────────────────────────────────────────── Палитра §10.1: «мы затемняем самую светлую студию Риги, чтобы положить текст» — прямое противоречие позиционированию. Поэтому скрим перевёрнут: не тёмная вуаль, а БУМАГА поверх фото, и текст героя тёмный. Порядок слоёв = порядок наложения, первый сверху. ⚠ Значения пересчитаны 20.08, вместе с переходом на полноэкранный герой. До этого у Шафрана стоял сплит, и .hero-scrim в нём был display:none — то есть эти три градиента не рисовались НИ РАЗУ и не были проверены ничем. Первый же полноэкранный прогон показал две вещи сразу: * подпись героя проваливала 4.5:1 (замер по пикселям под буквами: минимум 3.87 на .hero-subtitle, 360px); * при этом фотографии не было видно вообще — сплошная белёсая дымка, потому что даже дальний конец диагонали держал 0.26, а нижний слой 0.86. Полноэкранный герой, на котором не видно студии. Считается это НЕ по css: фон под буквой — скрим поверх фотографии, и он разный в каждой точке. Меряется двумя скриншотами одного кадра (с текстом и без) с маской различий — где пиксель изменился, там чернила буквы, а фон берётся из второго снимка. Инструмент — scratchpad hero_check2.py, метод описан в отчёте; hero_metrics.py рядом отвечает за обрезку. Логика двух наборов ниже. На широком экране текст стоит слева, поэтому вуаль диагональная: плотная у текста, почти прозрачная у правого края, где и должна читаться студия. На узком заголовок занимает ВСЮ ширину (на 320px «SAFFRON» — 265px из 272), и диагональ там вредна: её светлый конец приходится ровно на хвост заголовка. Ниже 900px вуаль становится вертикальной — плотная снизу под текстом, чистая сверху под фотографией. */ --hero-glow: radial-gradient(ellipse 65% 55% at 75% 35%,rgba(249,202,156,0.30) 0%,transparent 60%), radial-gradient(ellipse 50% 60% at 15% 75%,rgba(251,231,233,0.28) 0%,transparent 55%), radial-gradient(ellipse 40% 40% at 50% 10%,rgba(252,223,194,0.22) 0%,transparent 50%); --scrim-main: linear-gradient(100deg, rgba(253, 250, 244, 0.94) 0%, rgba(253, 250, 244, 0.86) 32%, rgba(253, 250, 244, 0.44) 64%, rgba(253, 250, 244, 0.10) 100%); /* Нижний слой вертикальный, поэтому он же закрывает правый нижний угол, куда диагональ не достаёт, — а там стоит индикатор прокрутки. Первые два стопа держат именно его и строку фактов: на 0.88/0.62 они давали 4.44:1 при пороге 4.5, потому что обе подписи набраны --ink-soft на 10–12px. */ --scrim-bottom:linear-gradient(to top, rgba(253, 250, 244, 0.93) 0%, rgba(253, 250, 244, 0.76) 22%, rgba(253, 250, 244, 0.22) 46%, transparent 60%); --scrim-top:linear-gradient(to bottom, rgba(253, 250, 244, 0.60) 0%, rgba(253, 250, 244, 0.18) 14%, transparent 22%); /* Текст и шапка ПОВЕРХ ГЕРОЯ — тёмные, вместе со скримом. */ --on-hero: var(--ink); --on-hero-rgb: 50 24 19; /* = --ink */ --on-hero-accent: var(--oxblood);/* не --saffron-deep: на затемнённых участках скрима у него не остаётся запаса */ /* Индикатор прокрутки. У Яши это белый с альфой 0.6 — на светлом скриме любая альфа ниже 0.8 не добирает 4.5:1, поэтому сплошной --ink-soft. */ --on-hero-quiet: var(--ink-soft); /* Фурнитура поверх СЫРОГО фото (точки и стрелки слайдшоу, хром лайтбокса) остаётся светлой: под ней фотография, а не скрим. */ --on-media: #fff; --on-media-rgb: 255 255 255; /* ── Featured-карточка прайса ──────────────────────────────────────────── Бордо, не шафран: шафран уже занят главной кнопкой, и карточка «весь день» не должна конкурировать с CTA (палитра §10.3). Белый текст здесь законен — 10.36 на --oxblood, 6.76 на --oxblood-soft. */ --featured-grad: linear-gradient(160deg,var(--oxblood-soft) 0%,var(--oxblood) 100%); --featured-border:var(--oxblood); --on-featured: var(--white); --on-featured-soft: rgba(255,253,250,0.86); /* ── Поверхности ───────────────────────────────────────────────────────── Отданы значениями целиком, поэтому переписывать селекторы shared не нужно. Все стопы — токены палитры, произвольных hex здесь нет. */ /* Полоса «что входит в стоимость»: плотнее бумаги, карточка на ней светлее полосы. Правило живёт в shared, тон — здесь. */ --band-bg: var(--sand); --band-card: var(--card); /* Карточка оборудования. Правило живёт в shared, тон — здесь: она обязана быть чуть светлее --paper, на котором стоит секция #studija. */ --equip-bg: var(--card); --card-grad: linear-gradient(160deg,var(--card) 0%,var(--sand) 100%); /* .hall-card .price-card .rule-item */ --card-grad-soft: linear-gradient(160deg,var(--card) 0%,var(--paper-2) 100%); /* .faq-item */ --form-grad: linear-gradient(160deg,var(--card) 0%,var(--sand) 100%); /* .booking-form */ --panel-grad: linear-gradient(160deg,var(--card) 0%,var(--paper-2) 100%); /* .contact-info-block */ --placeholder-grad:linear-gradient(135deg,var(--sand),var(--saffron-pale)); /* .hall-img под слайдшоу */ --skeleton-grad: linear-gradient(100deg,var(--paper-2) 30%,var(--sand) 50%,var(--paper-2) 70%); /* мерцание карты */ --combo-grad: linear-gradient(160deg,var(--saffron-tint) 0%,var(--saffron-pale) 100%); /* Одиночные поверхности */ --consent-bg: rgba(250,244,233,0.98); /* = --paper-2 */ --lightbox-bg: rgba(43,16,13,0.94); /* = --espresso */ --privacy-nav-bg: rgba(43,16,13,0.92); /* = --espresso */ --consent-link-line: rgba(139,70,69,0.45); /* = --oxblood-soft */ /* WhatsApp: заливка бордовая именно ради белого глифа. На шафране белый значок дал бы 2.73 — см. таблицу запретов выше. */ --wa-grad: linear-gradient(145deg,var(--oxblood-soft),var(--oxblood)); --on-wa: var(--white); --wa-pulse-ring:rgba(225,133,24,0.45); /* = --saffron, чистый декор */ /* Кольцо фокуса. НЕ шафрановое: 2.66 на бумаге. Только бордо — 10.10 на бумаге и 3.79 на самой шафрановой кнопке. */ --focus: var(--oxblood); } /* Подмена дисплейного шрифта на русском: у Kenao нет кириллицы, и русские заголовки им не набрать. Но вордмарк и заголовок героя — "SAFFRON Photo Studio" — чистая латиница на обоих языках, кириллического повода для подмены там нет. Без исключения марка на /saffron/ru набиралась антиквой, а на /saffron — своим шрифтом: один бренд в двух гарнитурах. У Яши то же место закрыто инлайн-стилем прямо на

; здесь — селектором, потому что инлайн перебивает любую тему и прячет причину. */ body.lang-ru{--font-display:"Cormorant","Cormorant Garamond",Georgia,serif} /* ══ ПАЛИТРА СОСЕДА ═══════════════════════════════════════════════════════ Блок «вторая студия» перед подвалом красится не нашими цветами, а цветами той студии, про которую он рассказывает: иначе на карточке Яши сиреневый бренд выходит шафрановым, и стилистика, ради которой блок и стоит, врёт. Значения ниже — КОПИИ литералов из src/yasha/theme.css. Копия здесь неизбежна: build.py склеивает shared + ТОЛЬКО СВОЮ тему, и палитре Яши больше неоткуда взяться в этом файле. Расхождение не молчаливое — цвет виден глазом на собственной странице Яши рядом. Переименование в Яше сюда НЕ доедет: при правке её палитры проверять этот блок вручную. Селектор по слагу, а не по слову «другая»: с третьей студией «другая» перестаёт быть одной, и тогда рядом просто встаёт второй такой блок [data-palette="<слаг>"], а правила в shared/styles.css не меняются. Контраст посчитан по WCAG 2.1 на заливке карточки #f8f5fe: --other-ink #1c1726 16.24 --other-ink-soft a=0.65 5.28 --other-accent #4a3580 9.22 белый на --other-fill #7a56bb 5.42 белый на --other-fill-lift #5a3f96 8.12 ⚠ Долг Яши сюда не переносится: у неё белый по #9d7ed5 = 3.29 и по #8b69c9 = 4.23 записаны в CONTRAST_DEBT, а на нашей странице пустой список обязан остаться пустым — поэтому заливка взята #7a56bb, а ховер ТЕМНЕЕТ (у Яши он светлеет), иначе пара уходит под порог. ══════════════════════════════════════════════════════════════════════════ */ [data-palette="yasha"]{ --other-card-bg: #f8f5fe; /* = yasha --paper2 */ --other-media-bg: #f2edfb; /* = yasha --card-bg */ --other-ink: #1c1726; /* = yasha --ink */ --other-ink-soft: rgba(28,23,38,0.65); /* = yasha --ink-soft */ --other-accent: #4a3580; /* = yasha --purple-900 */ --other-fill: #7a56bb; /* = yasha --purple-cta */ --other-fill-lift: #5a3f96; /* = yasha --featured-border */ --other-on-fill: #ffffff; --other-line: rgba(155,130,210,0.30); --other-shadow-rgb: 74 53 128; /* = yasha --shadow-tint-deep */ --other-focus: #4a3580; } /* Исключения из подмены шрифта: всё это — латинские имена собственные, и кириллического повода набирать их антиквой нет. .other-name в списке по той же причине, что и свой вордмарк: «YASHA Photo Studio» — марка соседней студии, а её фирменный шрифт тоже Kenao. */ body.lang-ru .nav-logo-word, body.lang-ru .hero-title, body.lang-ru .other-name{font-family:"Kenao",Georgia,serif} /* ══════════════════════════════════════════════════════════════════════════ ШАГ 2 — СТРУКТУРА СТРАНИЦЫ SAFFRON ────────────────────────────────────────────────────────────────────────── Ниже — не палитра, а раскладка. Она живёт здесь, а не в shared/styles.css, по одной причине: shared принадлежит обеим студиям, и любая правка в нём — риск регресса живой Яши. build.py дописывает theme.css ПОСЛЕ shared, поэтому при равной специфичности эти правила выигрывают, а на страницы Яши не попадают вообще. Что здесь описано: 1. герой: только длина слова «SAFFRON» и два факта первого экрана — раскладка общая с Яшей и живёт в shared 2. секция #studija: бенто из четырёх зон + плоский список оборудования 3. #ietilpst — что входит и что не входит в цену 4. лестница прайса (полоска падающей ставки) 5. мелочи: подзаголовки секций, адрес в подвале Правило из README, которое здесь НЕ нарушено: --gutter / --container / --pad-x не переопределяются. Все отступы берутся из них. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Герой ───────────────────────────────────────────────────────────── ПОЛНОЭКРАННЫЙ, как у Яши. Раскладку целиком отдаёт shared/styles.css: #hero — flex-колонка на 100vh, фотография во всю площадь, текст прижат к нижнему краю, скрим между ними. Здесь у темы остаётся ровно то, чего в общем файле быть не может: длина слова «SAFFRON» и два факта первого экрана. До 20.08 тут стоял сплит «текст слева | фотопанель справа» (grid на две колонки, .hero-scrim погашен). Он снят по решению клиента: обе студии обязаны читаться одной структурой, различаться им положено палитрой. Клиент предупреждён, что исходники 1350 px на широком мониторе дают ту же мягкость, что у Яши, — WIDTHS в build.py кончаются на 1200. ⚠ Вместе со сплитом снята и запись SIZES_BY_STUDIO["saffron"]["hero"] в build.py: она описывала панель 46vw. Полноэкранный кадр — «100vw», как у всех. ⚠ Скрим НЕ отменяется и не темнеет: у Шафрана он светлый и тёплый — бумага поверх фото, а не вуаль (палитра §10.1). Текст героя тёмный (--on-hero = --ink). Значения --scrim-* правлены в разделе «Герой» выше: при сплите они не участвовали в раскладке вообще, и их пришлось пересчитать по реальным кадрам. */ /* Шапка фиксированная и лежит ПОВЕРХ героя, а в shared у #hero padding-top:0 — Яше этого хватает, её первый экран короче. У Шафрана к тем же трём строкам заголовка добавлены лид в 4–6 строк и строка фактов, и на 320px весь блок переставал помещаться: надзаголовок «FOTOSTUDIJA · RĪGA, TEIKA · ROPAŽU 140» вставал на нулевой отметке, прямо под вордмарком шапки (замерено: firstTop=0.0 при высоте шапки 61px; на 360px оставалось 0.6px). Раскладка героя — flex-колонка с justify-content:flex-end, поэтому на широком экране этот отступ не двигает ничего: он вступает в силу ровно тогда, когда контент выше экрана, и только сверху. ⚠ У Яши на 320px то же самое: её заголовок начинается на 31.5px при шапке 61px. Это дефект shared, а не темы, и чинить его надо там — здесь трогать общий файл нельзя, он принадлежит и живой Яше. Вынесено в отчёт. */ #hero{padding-top:5.5rem} /* Нижняя граница shared-кегля — clamp(4rem,10vw,9rem), то есть 64px на всём мобильном диапазоне. Её подбирали под «YASHA»: пять букв Kenao при 64px дают 215px и спокойно живут в 272px, которые остаются от экрана в 320px после двух отступов по 24px. У «SAFFRON» букв семь — 311px, и он не влезает. Русская версия набрана Cormorant (в Kenao нет кириллицы), там 279px — тоже мимо. Второй член min() и есть это ограничение, выписанное явно: ширина колонки (100vw минус два гуттера по 1.5rem) поделённая на 5 — замеренный аппетит Kenao 4.87em на «SAFFRON» плюс небольшой запас; Cormorant с его 4.36em укладывается тем же числом. Ограничение вступает в силу только там, где оно нужно: 64px помещаются начиная с 368px ширины, и от 368px и выше кегль остаётся ровно таким, каким был. Ниже — уменьшается настолько, насколько не хватает места. ⚠ Второй член обязан остаться и в полноэкранном герое: раскладка сменилась, а слово — нет. Мерить обрезку scrollWidth'ом бесполезно (#hero{overflow:hidden}), только getBoundingClientRect().left и только после document.fonts.ready — в запасном Georgia «SAFFRON» уже и влезает. См. hero_metrics.py. */ .hero-title{font-size:min(clamp(4rem,10vw,9rem),calc((100vw - 3rem) / 5))} /* Вертикальная вуаль вместо диагональной — причина в комментарии к --scrim-* выше: ниже 900px заголовок занимает всю ширину, и светлый конец диагонали приходится ровно на его хвост. Переопределяются только --scrim-*: это собственные токены темы, shared их не трогает ни в одном медиазапросе (в отличие от --pad-x, который переопределять запрещено). */ @media(max-width:900px){ :root{ --scrim-main: linear-gradient(to top, rgba(253, 250, 244, 0.96) 0%, rgba(253, 250, 244, 0.93) 40%, rgba(253, 250, 244, 0.84) 60%, rgba(253, 250, 244, 0.40) 78%, rgba(253, 250, 244, 0.06) 100%); --scrim-bottom:linear-gradient(to top, rgba(253, 250, 244, 0.45) 0%, rgba(253, 250, 244, 0.12) 26%, transparent 40%); --scrim-top:linear-gradient(to bottom, rgba(253, 250, 244, 0.55) 0%, rgba(253, 250, 244, 0.16) 12%, transparent 20%); } } /* В shared .hero-actions — flex без переноса. У Яши обе подписи короткие, и строка помещалась; у Шафрана на русском «Забронировать» и «Посмотреть студию →» требуют в одну строку 322px при доступных 272px. Перенос ничего не меняет, пока кнопки помещаются рядом, и разводит их по строкам, когда нет. Порог 900px, а не «везде»: на широком экране пара помещается с запасом, и глобальный перенос только добавил бы риск сложить её без повода. */ @media(max-width:900px){ .hero-actions{flex-wrap:wrap} } /* ── 2. #studija ────────────────────────────────────────────────────────── Один зал вместо двух. Слайдшоу нет: бенто показывает те же кадры статикой, а слайдшоу прятало четыре из пяти за клик. */ #studija{background:var(--paper)} .studio-head{max-width:64ch;margin-bottom:2.75rem} .studio-intro{font-size:0.95rem;line-height:1.8;color:var(--ink-soft);margin-bottom:1rem} .studio-note{font-size:0.88rem;line-height:1.7;color:var(--ink-soft); border-left:2px solid var(--accent-display);padding-left:0.95rem;margin-bottom:1.5rem} .studio-head .hall-tags{margin-bottom:0} /* Четыре плитки четырёх разных размеров. Пропорции считаны от исходников: все девять кадров 5:4, поэтому ни одна плитка не уже 1:1 и не шире 3.1:1 — иначе object-fit:cover выбрасывает больше половины кадра. Самая широкая достаётся розовой шторе: она единственная переживает полосу, потому что занимает всю стену. */ .zones{display:grid;grid-template-columns:repeat(3,1fr); grid-template-rows:clamp(230px,26vw,400px) clamp(180px,19vw,300px); gap:0.9rem;margin-bottom:3rem} .zone{position:relative;overflow:hidden;border-radius:var(--radius-lg); border:1px solid var(--line);background:var(--sand); box-shadow:0 18px 40px -24px rgb(var(--shadow-tint) / 0.28)} .zone picture{display:block;width:100%;height:100%} .zone img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 0.5s ease} .zone:hover img{transform:scale(1.03)} .zone-name{position:absolute;left:1rem;bottom:1rem; background:rgb(var(--plate-rgb) / 0.88);border:1px solid rgb(var(--line-rgb) / 0.32); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); color:var(--ink);font-size:0.66rem;letter-spacing:0.15em;text-transform:uppercase; padding:0.4rem 0.95rem;border-radius:var(--radius-pill)} /* Циклорама — крупным блоком: это главный аргумент зала, разноразмерность здесь несёт смысл, а не декорацию. */ .zone-lead{grid-column:1/3;grid-row:1} /* циклорама, самая большая площадь */ .zone-side-a{grid-column:3;grid-row:1} /* визаж: почти квадрат, зеркало вертикальное */ .zone-side-b{grid-column:1;grid-row:2} /* фоны */ .zone-wide{grid-column:2/-1;grid-row:2} /* интерьер: широкая полоса */ /* Кроп по смыслу, а не по центру. Плитки режут кадр сильно — от 6% (визаж, почти квадрат) до 62% высоты (интерьер, полоса 3.3:1), поэтому позиция считается от того, что в плитке обязано остаться, а не от середины кадра: lead — циклораму видно только целиком, вместе с верхней кромкой и переходом в пол; центр обрезал верх, и плитка с подписью «Циклорама» показывала белую стену; side-b — рулоны фонов висят вплотную к потолку, любой сдвиг вниз режет их пополам, поэтому кадр прижат к верхнему краю; wide — лампа и телефон стоят в нижней трети, центр отрезал им верх. */ .zone-side-a img{object-position:30% center} .zone-lead img{object-position:center 25%} .zone-side-b img{object-position:center 0} .zone-wide img{object-position:center 58%} /* Сетка оборудования уехала в shared/styles.css: тот же блок понадобился Яше, а копия в двух темах расходится молча. Здесь остался только тон карточки — токеном --equip-bg в разделе поверхностей выше. */ .studio-suits{margin-top:1.5rem;font-size:0.78rem;color:var(--ink-soft);line-height:1.7} /* ── 3. #ietilpst ───────────────────────────────────────────────────────── Разметка и правила блока переехали в shared/styles.css: у Яши он такой же. Теме остались только два тона — полоса и карточка на ней. */ /* ── 4. Прайс: лестница ─────────────────────────────────────────────────── Полоска показывает падение ставки 35 → 22,50 €/ч. Цифры производной ставки в карточках 1–3 не выводим: в утверждённых текстах их нет, а полоска передаёт ровно тот же аргумент, ничего не утверждая. */ .price-rate{grid-column:1/-1;grid-row:3;align-self:center;display:block; height:3px;margin-top:0.8rem;border-radius:2px; background:rgb(var(--line-rgb) / 0.22);overflow:hidden} .price-rate i{display:block;height:100%;border-radius:inherit;background:var(--saffron-deep)} .rate-100 i{width:100%} .rate-95 i{width:95%} .rate-86 i{width:86%} .rate-64 i{width:64%} .price-card.featured .price-rate{background:rgb(var(--footer-line-rgb) / 0.28)} .price-card.featured .price-rate i{background:var(--saffron-tint)} .booking-ig{display:inline-block;margin-top:0.5rem;padding-top:0;font-size:0.78rem} /* Карточка контактов больше не тянется на высоту виджета: у Яши слабину добирала карта, а у Шафрана её нет, и растянутая карточка кончалась пустым полем в треть экрана. */ @media(min-width:1001px){ .offer-contacts{align-self:start} .offer-contacts .contact-info-block{flex:0 0 auto} } /* ── 5. Мелочи ────────────────────────────────────────────────────────────*/ .contact-sub{display:block;font-style:normal;font-size:0.76rem;color:var(--ink-soft); margin-top:0.15rem} .footer-addr{font-size:0.78rem;color:var(--white-dim);margin:0} @media(max-width:900px){ /* Бенто складывается в одну колонку: плитки в 5:4, как исходники. */ .zones{grid-template-columns:1fr;grid-template-rows:none; grid-auto-rows:auto;gap:0.75rem;margin-bottom:2.25rem} .zone{aspect-ratio:5/4} .zone-lead,.zone-side-a,.zone-side-b,.zone-wide{grid-column:auto;grid-row:auto} } @media(max-width:600px){ /* Боковые и нижний отступы героя здесь НЕ трогаются: их задаёт shared (padding:0 1.5rem 4rem внутри своего @media), и тема, которая идёт следом, молча побила бы его медиазапрос. Сверху — единственное исключение, и оно выписано отдельным правилом выше. */ .studio-head{margin-bottom:2rem} .studio-intro{font-size:0.88rem} }