/* Токены дизайн-системы — DESIGN.md 2.2. Единственное место в проекте, где допустимы литеральные значения: цвет, размер или отступ в любом другом файле линтер считает дефектом. Палитра взята из их собственного зала, а не из шаблона: известковая побелка стен, кобальт логотипа и росписи Миконоса, латунно-жёлтые плетёные абажуры. На фотографиях зала ровно эти три цвета — это и есть узнаваемость. ⚠️ Зелёного в палитре нет. На синем фоне зелёная кнопка читается как элемент банковского интерфейса и спорит с кобальтом. */ :root{ /* --- поверхности --- */ --paper:#FFFFFF; /* основная */ --wash:#F6F5F1; /* побелка: вторая полоса, чередуется с paper */ --sky:#EAF1FA; /* только мелкие плашки, НЕ фон секции */ --deep:#0E3766; /* тёмная секция и подвал, одна на страницу */ /* --- шаблон v2, REDESIGN-v2 §2 --- Контрасты посчитаны там же: --ink на --sand 14,7, --ink-2 на --sand 4,95, --deep на --sky-2 9,0. --orn — только рисунки, не текст. */ --sand:#EFE8DC; /* карточка внахлёст, письмо Элен */ --sand-line:#D9CDB8; /* рамка и внутренняя линия на --sand */ --sky-2:#CFE2F3; /* лента оценок; только лента, не фон секции */ --orn:#8DB0DB; /* штриховые рисунки на светлом */ --orn-deep:#4C72A6; /* мельницы на --deep в подвале */ /* Вторая, внутренняя линия двойной рамки: та же --deep, приглушённая. Рамка «в две линии» — C5, ленты C3, карточки вечеров C8, печати. */ --deep-a35:rgba(14,55,102,.35); --deep-a45:rgba(14,55,102,.45); --deep-a50:rgba(14,55,102,.5); --deep-a90:rgba(14,55,102,.9); --inv-a35:rgba(255,255,255,.35); --inv-a60:rgba(255,255,255,.6); --pol-shadow:0 10px 24px -14px rgba(14,55,102,.5); /* Скрим слайда v2 — C2: плотнее и выше, чем у прежнего героя: на слайде четыре строки — «когда», заголовок, строка и кнопка. */ --slide-scrim:linear-gradient(to top,rgba(8,28,52,.92) 0%,rgba(8,28,52,.78) 36%, rgba(8,28,52,.36) 62%,rgba(8,28,52,0) 86%); /* --- чернила --- */ --ink:#13181D; /* 17,9 на paper */ --ink-2:#5A646E; /* 5,5 на wash, 6,0 на paper */ --ink-inv:#FFFFFF; /* 12,0 на deep */ --ink-inv-2:rgba(255,255,255,.76); /* 7,6 на deep */ /* --- бренд и акцент --- */ --blue:#1B64B8; /* цвет логотипа: главное действие, ссылки */ --blue-h:#164F92; --brass:#E0A526; /* латунь абажуров */ --brass-h:#C98A10; /* ⚠️ Латунь как ТЕКСТ на светлом не годится: #E0A526 на белом даёт 2,19, это ниже нормы даже для крупного кегля. Заливка, линия и точка — сколько угодно; буквы на светлом — только этим токеном (5,9 на paper, 5,4 на wash). На --deep текстом идёт сама --brass, там 5,5. */ --brass-ink:#8A5A00; /* --- сообщения формы --- Красный на светло-красном даёт 6,6. Зелёной плашки успеха нет: зелёный убран из палитры, и плашка тянула бы его обратно — успех показывается кобальтом. */ --err-bg:#FDECEC; --err-ink:#A32020; --err-line:#E7B9B9; /* --- линии --- */ --line:rgba(19,24,29,.14); --line-s:rgba(19,24,29,.07); --line-inv:rgba(255,255,255,.22); /* --- скрим поверх фотографии --- Читаемость текста на кадре делается градиентом от нижнего края, а не прозрачностью самого кадра: opacity — приём для плохого фото, а фото у нас хорошее. Верхние 40% кадра остаются нетронутыми. */ --scrim-0:rgba(8,28,52,0); --scrim-1:rgba(8,28,52,.18); --scrim-2:rgba(8,28,52,.68); --scrim-3:rgba(8,28,52,.88); --scrim-lb:rgba(8,20,36,.94); /* фон лайтбокса, REDESIGN-v2.2 U9 */ --scrim-zi:rgba(14,55,102,.78); /* кружок лупы на превью */ /* REDESIGN-v2.5: видео-обложка (X5), калькулятор (X9, X10). */ --play-bg:rgba(14,55,102,.88); /* круглая ▶ на обложке */ --dur-bg:rgba(0,0,0,.72); /* плашка длительности: белый 12,6 */ --scrim-sheet:rgba(8,20,36,.5); /* фон под листом расчёта */ --bar-shadow:0 -8px 24px -14px rgba(14,55,102,.45); --knob-shadow:0 1px 2px rgba(0,0,0,.2); --field:#C9D0D8; /* рамка полей и переключателей калькулятора */ --ink-dis:#8A929A; /* недоступный пункт: серый, не текст для чтения */ --note-bg:#FFF4D6; /* предупреждение в расчёте, текст --ink */ --brass-wash:#FFF8E6; /* подложка чипа сезонного меню и акции */ /* --- радиусы: ровно два плюс pill --- */ --r-s:4px; /* поля, чипы, кнопки */ --r-m:10px; /* карточки, фотографии */ --r-pill:999px; /* --- тень: ровно одна, только для всплывающего над контентом --- */ --elev:0 12px 32px -18px rgba(14,55,102,.35); /* Вторая тень — REDESIGN-v2 §2: только карточка внахлёст и письмо Элен. */ --lift:0 18px 40px -22px rgba(14,55,102,.45); /* --- шкала отступов: других значений нет --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* Вертикальный отступ секции — REDESIGN-v2.4 W4: 40 px на телефоне, 56 px от 1280. Между соседними секциями не больше 112 px пустоты. */ --sec-y:clamp(40px,4.4vw,56px); /* --- типографика: восемь размеров, других нет --- */ --t-display:clamp(2.125rem,7.5vw,4rem); /* 34 → 64, только H1 главной */ --t-h1:clamp(1.75rem,5vw,2.75rem); /* 28 → 44 */ --t-h2:clamp(1.4375rem,3.2vw,2rem); /* 23 → 32 */ --t-h3:1.1875rem; /* 19 */ --t-lede:1.125rem; /* 18 */ --t-body:1rem; /* 16 — основной текст */ --t-sm:.875rem; /* 14 */ --t-xs:.75rem; /* 12 */ /* ⚠️ У Prata одно начертание — 400. font-weight:700 на заголовке даёт синтетический жир браузера и грязные штрихи. Весовой контраст делается размером и цветом, не жиром. */ /* ⚠️ Manrope вторым не для красоты и вопреки букве DESIGN 2.2: в пакете Prata нет сабсета latin-ext, то есть нет ни ₽, ни №, ни многоточия. Подбор шрифта идёт посимвольно, так что буквы останутся в Prata, а ₽ возьмётся из Manrope, а не из системной Georgia — иначе цена в карточке набрана двумя гарнитурами сразу. Греческого у Prata нет тоже: греческие слова набираются --sans. */ --serif:'Prata','Manrope',Georgia,serif; --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; /* Рукописный — REDESIGN-v2 §2, ровно пять мест: подпись «когда» на слайде, заметка у блюда, подписи полароидов, подпись Элен, подзаголовок SEO-блока. Не мельче --t-hand: мельче Caveat не читается. Это единственный размер вне шкалы выше. */ --hand:'Caveat','Segoe Print',cursive; --t-hand:1.375rem; /* 22 */ --t-hand-l:1.625rem; /* 26: «когда» на слайде */ --t-hand-xl:2.25rem; /* 36: подпись Элен */ /* --- прочее, что нужно раскладке --- */ --wrap:1160px; /* контейнер */ --measure:68ch; /* колонка основного текста */ --hdr:64px; /* высота шапки */ /* Прилипшая лента категорий меню. ⚠️ Значение живёт здесь, а не в calc() у заголовков: по нему считается scroll-margin-top, и разъехавшись с настоящей высотой ленты, оно снова спрячет заголовок раздела под лентой — FIXES F17. */ --mtabs:73px; --tap:44px; /* минимальная зона нажатия */ --sq:104px; /* квадратная картинка сбоку карточки */ --av:74px; /* портрет в карточке менеджера */ --thumb:88px; /* превью блюда в строке хитов */ --island:140px; /* иллюстрация уровня лояльности */ --taphub:76px; /* зона нажатия в хабе ссылок /tap/ */ /* --- шаблон v2: размеры компонентов, REDESIGN-v2 C1–C11 --- */ --strip:36px; /* полоса адреса на десктопе */ --frame-gap:6px; /* поле двойной рамки .frame и .arch */ --pol-pad:10px; /* белое поле полароида */ --seal:80px; /* круглая печать: «открылись» в 12 px влезает в круг */ --overlap:56px; /* нахлёст карточки на фото, мобильный */ --overlap-l:80px; /* то же от 760 px */ --logo-m:34px; /* логотип в шапке на мобильном — §5 */ }