/* ---------- Шрифты (самостоятельный хостинг, /fonts) --------- */ /* ------------------------- Токены --------------------------- */ :root{ /* краска — brandbook/src/palette.mjs, единственный источник */ --accent:#D97757; --accent-dark:#B85535; --black:#000000; --white:#FFFFFF; --paper:#FFFFFF; --paper-2:#E8E8E8; --tint:#E8E8E8; --ink:#000000; --muted:#4D4D4D; --muted-2:#808080; --muted-dark:#A6A6A6; /* линии — чёрное и белое с прозрачностью: краска палитры, тон вёрстки */ --line:rgba(0,0,0,.12); --line-dark:rgba(255,255,255,.14); --error:#D97757; /* ПЛАШКА ПОВЕРХНОСТИ: полный контраст берётся от грунта, а не от секции. Прецедент — словарь акцентов КП (--em). На светлом чёрная плашка с белым текстом, на чёрном белая с чёрным. */ --em-fill:#000000; --em-ink:#FFFFFF; --em-fill-2:#4D4D4D; /* АКЦЕНТ В РОЛИ ПЛАШКИ — ОТДЕЛЬНЫЙ ТОКЕН, ТА ЖЕ КРАСКА (SITE-7 п. 3). Новой краски нет: значение — тот же #D97757 палитры. Токен нужен потому, что у акцента ДВЕ роли, и поверхность влияет на них по-разному. Как ЧЕРНИЛА на тинте акцент обязан темнеть (--accent → #B85535, 2,5479 → 3,9051), а как ПЛАШКА — нет: тёмный акцент под чёрным текстом даёт 4,39 при пороге 4,5, светлый — 6,7267 на обеих поверхностях. Тот же приём, что у --em-fill/--em-ink: краску решает РОЛЬ. */ --accent-plate:#D97757; /* ПАТТЕРН вместо сот — КРУПНЫЕ КВАДРАТЫ ПО СЕТКЕ (SITE-5, пункт 2). Модуль 85.9059 px — КОЛОНКА сетки брендбука на нашей мере; шаг 107.8267 px — колонка плюс межколонник; плитка 12 шагов = 1293.92 px, то есть вся ширина сетки. Плотность 37.58 % клеток — снята с поля PAT_HERO коммерческого предложения (124 из 330). КРАСКА — палитра с прозрачностью, и прозрачность ВЫВЕДЕНА из полос контраста (SITE-8 п. 2: полос ДВЕ, у каждого грунта своя): светлый 1.04…1.06, цель 1.049952 — альфа 0.022288, K 1.05, ΔL* 1.9647; тёмный 1.13…1.17, цель 1.149826 — альфа 0.082294, K 1.1498, ΔL* 6.7669. Плитки блоков объявлены ниже: у каждого блока своё зерно. */ --pat-ink:rgba(0,0,0,0.022288); --pat-ink-dark:rgba(255,255,255,0.082294); --pat-size:1293.92px; /* ШАГ СЕТКИ ПАТТЕРНА отдельным токеном (SITE-8 п. 3.3): по нему лист сам округляет заселяемую область слоя ВНИЗ до целого числа шагов по обеим осям, и обрезанных модулей не остаётся. Шесть знаков после запятой, а не два: на плитке в 12 шагов округление до сотых дало бы расхождение 0.0392 px между шагом и плиткой. */ --pat-step:107.826735px; --pat-mod:85.905910px; /* РЕЗЕРВНАЯ ПОЛОСА НА СТЫКАХ (SITE-7 п. 2): слой отступает от верхней и нижней границы блока на ОДИН ШАГ сетки 107.8267 px. Первый и последний ряд клеток блока не заселяется, и граница двух соседних секций приходится на пустую полосу шире модуля (85.9059 px). Величина выведена из шага, не назначена. */ --pat-band:107.826735px; --pat-1:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27215.653%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-2:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%270%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-3:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27107.827%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-4:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27215.653%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-5:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%270%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-6:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27107.827%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-7:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27754.787%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-8:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27107.827%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-9:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27107.827%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); --pat-10:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271293.9208%27%20height=%271293.9208%27%20viewBox=%270%200%201293.9208%201293.9208%27%3E%3Crect%20x=%27754.787%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%270%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27107.827%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27215.653%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27323.48%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27431.307%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27431.307%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27539.134%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27646.96%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%27754.787%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%270%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27215.653%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27862.614%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27862.614%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271078.267%27%20y=%27970.441%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27754.787%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%271186.094%27%20y=%271078.267%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27107.827%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27323.48%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27539.134%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27646.96%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3Crect%20x=%27970.441%27%20y=%271186.094%27%20width=%2785.906%27%20height=%2785.906%27%20fill=%27%23fff%27/%3E%3C/svg%3E"); /* мера и межколонник — эталонные, см. CONTAINER выше. Сетка брендбука на меру ложится: колонка 85.91 px, межколонник 21.92 px, 12×колонка + 11×межколонник = 1272.00 px. */ --container:1340px; --gutter:20px; --ease:cubic-bezier(.22,.61,.36,1); --case-pause:45vh; --case-tail:6vh; /* ДЛИНА ОКНА РЕЦЕССИИ КЕЙСА. Величина эталонная, как и две соседние: она вместе с ними задаёт стопку кейсов, а не сотовую графику. Пропала она не решением, а дефектом обхода листа: обходчик знал два уровня вложенности и молча терял всё, что лежит на третьем, — весь блок @supports/@media со стопкой и блюром. Замер это и показал (tools/measure-site5.mjs, раздел 4). */ --case-anim:90vh; --gap-eyebrow:clamp(14px,1.8vw,22px); --gap-lead:clamp(14px,1.8vw,22px); /* ШКАЛА КЕГЛЕЙ. База 17.0665 px = 16 px эталона × 1.066655 (подстановка Montserrat 400 → Golos Text 400). Знаменатель 1.08. Ступеней 30; число выведено из данных, а не назначено. */ --fs-1:9.22px; --fs-2:9.96px; --fs-3:10.75px; --fs-4:11.62px; --fs-5:12.54px; --fs-6:13.55px; --fs-7:14.63px; --fs-8:15.8px; --fs-9:17.07px; --fs-10:18.43px; --fs-11:19.91px; --fs-12:21.5px; --fs-13:23.22px; --fs-14:25.08px; --fs-15:27.08px; --fs-16:29.25px; --fs-17:31.59px; --fs-18:34.12px; --fs-19:36.85px; --fs-20:39.79px; --fs-21:42.98px; --fs-22:46.41px; --fs-23:50.13px; --fs-24:54.14px; --fs-25:58.47px; --fs-26:63.15px; --fs-27:68.2px; --fs-28:73.65px; --fs-29:79.55px; --fs-30:85.91px; } /* ПЛАШКА НА ТЁМНОЙ ПОВЕРХНОСТИ. Перечень выведен ЗАМЕРОМ КРАСКИ ПОД ПЛАШКОЙ (tools/surfaces.json, 128 замеров, 20 контекстов, порог яркости 0.1833), а не объявленным фоном предка. */ .actions{--em-fill:#FFFFFF;--em-ink:#000000;--em-fill-2:#A6A6A6} /* замеров 12, яркость 0.0057 */ .hero{--em-fill:#FFFFFF;--em-ink:#000000;--em-fill-2:#A6A6A6} /* замеров 12, яркость 0 */ body:not(.page-light) .site-header:not(.is-scrolled){--em-fill:#FFFFFF;--em-ink:#000000;--em-fill-2:#A6A6A6} /* замеров 2, яркость 0 */ .mobile-nav.is-open{--em-fill:#FFFFFF;--em-ink:#000000;--em-fill-2:#A6A6A6} /* замеров 6, яркость 0 */ .section.section--dark:not(.contact){--em-fill:#FFFFFF;--em-ink:#000000;--em-fill-2:#A6A6A6} /* замеров 6, яркость 0 */ .page-portfolio .site-header.pf-header.is-scrolled{--em-fill:#FFFFFF;--em-ink:#000000;--em-fill-2:#A6A6A6} /* замеров 6, яркость 0 */ @font-face{font-family:'Play';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/play-700.woff2') format('woff2')} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/golos-400.woff2') format('woff2')} @font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/golos-700.woff2') format('woff2')} /* --------------------------- База --------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-weight:400; font-size:var(--fs-10); /* базовый крупнее (A1) */ line-height:1.5; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--em-fill);outline-offset:2px;border-radius:0;box-shadow:none} [id]{scroll-margin-top:96px} /* --------------------- Типографика -------------------------- */ h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.0141}h1,h2,h3,h4,h5,h6,.h1,.h2{font-family:'Play',sans-serif;font-weight:700;letter-spacing:.005em} .h1{font-size:clamp(var(--fs-18),min(7.0609vw,8.3448vh),var(--fs-28));line-height:0.9859;text-transform:uppercase} .h2{font-size:clamp(var(--fs-17),calc(-2.46px + 5.152vw),var(--fs-25));line-height:1.0141;text-transform:uppercase} .h3{font-family:'Golos Text',sans-serif;font-weight:700;font-size:clamp(var(--fs-11),calc(2.92px + 2.031vw),var(--fs-14));line-height:1.1719} .lead{font-size:clamp(var(--fs-10),calc(3.38px + 1.3941vw),var(--fs-12));line-height:1.5;color:var(--muted)} .accent{color:var(--accent)} .section:not(.section--dark) .lead .accent, .section:not(.section--dark) p .accent{color:var(--ink);font-weight:700} .nowrap{white-space:nowrap} /* Метка секции (01 · …) */ .eyebrow{ display:inline-flex;align-items:center;gap:.6em; font-weight:700;font-size:var(--fs-7);letter-spacing:.16em;text-transform:uppercase; color:var(--muted); } .eyebrow::before{content:"";width:28px;height:2px;background:var(--accent);border-radius:0} /* ------------------------- Раскладка ------------------------ */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container--narrow{max-width:860px} .section{position:relative;padding-block:clamp(52px,7vw,116px)} .section--tight{padding-block:clamp(48px,6vw,84px)} .section--dark{background:var(--black);color:var(--white)} .section--paper2{background:var(--paper-2)} .section--dark .lead{color:#D1D1D1} .section--dark .eyebrow{color:var(--muted-dark)} /* заголовки секций — единое выравнивание слева (A4) */ .section__head{max-width:820px} .section__head .h2{margin-top:var(--gap-eyebrow)} .section__head .lead{margin-top:var(--gap-lead)} .stack-sm>*+*{margin-top:12px} .pat-deco{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden} .pat-deco::before{content:"";position:absolute;left:0;right:0;margin-inline:auto;width:round(down,100%,var(--pat-step));top:var(--pat-band);height:round(down,max(0px,calc(100% - 2 * var(--pat-band))),var(--pat-step));background-color:var(--pat-ink);-webkit-mask-image:var(--pat-1);mask-image:var(--pat-1);-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:var(--pat-size) auto;mask-size:var(--pat-size) auto;-webkit-mask-position:0 0;mask-position:0 0} /* тёмные секции и hero: еле светлее фона (~.03) */ .section--dark .pat-deco::before, .hero .pat-deco::before{--pat-ink:var(--pat-ink-dark)} .section>.container{position:relative;z-index:1} /* --------------------------- Кнопки ------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; min-height:64px;padding:20px 46px; font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-11); letter-spacing:.01em;text-align:center; border-radius:0;border:2px solid transparent; transition:transform .2s var(--ease),background-color .2s var(--ease), color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease); user-select:none; } .btn:active{transform:translateY(1px) scale(.99)} .btn--primary{background:var(--em-fill);color:var(--em-ink);border-color:var(--em-fill);box-shadow:none} .btn--primary:hover{background:var(--accent-plate);color:var(--ink);border-color:var(--em-fill);transform:translateY(-2px);box-shadow:none} /* Вторичная на тёмном */ .btn--outline{background:transparent;color:var(--white);border-color:#808080} .btn--outline:hover{background:var(--white);color:var(--black);border-color:var(--white);transform:translateY(-2px)} /* Вторичная на светлом */ .btn--ghost{background:transparent;color:var(--ink);border-color:#808080} .btn--ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink);transform:translateY(-2px)} /* сплошная чёрная (первичная на светлом фоне): чёрная заливка, белый текст */ .btn--dark{background:var(--black);color:var(--white);border-color:var(--black);box-shadow:none} .btn--dark:hover{background:#000;border-color:#000;color:var(--white);transform:translateY(-2px);box-shadow:none} .btn--sm{min-height:48px;padding:12px 24px;font-size:var(--fs-9)} /* только шапка */ .btn--lg{min-height:64px;padding:20px 46px;font-size:var(--fs-11)} /* = базовый (единый размер) */ .btn--block{width:100%} /* Подводка-микротекст у кнопки */ .cta-row{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;margin-top:40px} .cta-note{font-size:var(--fs-9);color:var(--muted);font-weight:400} .section--dark .cta-note{color:var(--muted-dark)} /* ========================== ШАПКА =========================== */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; padding-top:env(safe-area-inset-top,0px); /* десктоп/базово: честный env (=0 без выреза, ~47px на notch). Десктоп не сдвигается. Мобильный фолбэк — ниже, в @media */ transition:background-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); } .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px} .site-header{--hdr-fg:#fff} .site-header .nav__link,.site-header .logo__name,.site-header .logo__sub{color:var(--hdr-fg)} .site-header.is-scrolled, .page-light .site-header{ background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(8px); box-shadow:none; --hdr-fg:var(--ink); } .page-light .site-header{position:sticky} .logo{display:inline-flex;align-items:center;gap:11px} /* Логотип — реальный вектор картинкой. Белый (--dk) для тёмной шапки, тёмный (--lt) для светлой (is-scrolled). */ .logo__img{display:block;height:42px;width:auto;max-width:none} .logo__img--lt{display:none} .site-header.is-scrolled .logo__img--dk{display:none} .site-header.is-scrolled .logo__img--lt{display:block} /* pf-header (портфолио/кейсы) всегда чёрная — всегда белый логотип; перебивает is-scrolled (те же 3 класса, позже по порядку) */ .site-header.pf-header .logo__img--dk{display:block} .site-header.pf-header .logo__img--lt{display:none} .bee__body{;transition:fill .3s var(--ease)} .logo__text{display:flex;flex-direction:column;line-height:0.9375} .logo__name{font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-13);letter-spacing:-.01em} .logo__sub{font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-1);letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2)!important;margin-top:3px} .site-header:not(.is-scrolled) .logo__sub{color:rgba(255,255,255,.6)!important} .nav{display:none} .nav__list{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0} .nav__link{position:relative;font-weight:700;font-size:var(--fs-10);padding:6px 0;transition:color .2s} .nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)} .nav__link:hover::after{transform:scaleX(1)} .header-actions{display:none;align-items:center;gap:12px} .site-header.is-scrolled .btn--outline, .page-light .site-header .btn--outline{color:var(--ink);border-color:#808080} .site-header.is-scrolled .btn--outline:hover, .page-light .site-header .btn--outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* Задача 2: минимальный верхний отступ шапки ТОЛЬКО на мобильных. iPhone Safari: env≈47px берётся сам (max выбирает его). Telegram-webview iOS часто отдаёт env=0 → минимум 12px, чтобы шапка не наезжала на свою верхнюю панель. Android (env=0) получает те же 12px — внутренний отступ, безобиден. Десктоп (>900px) сюда не попадает и не сдвигается. */ @media (max-width:900px){ .site-header{padding-top:max(env(safe-area-inset-top,0px),12px)} } .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;padding:11px;border:none;background:transparent} .burger span{display:block;height:2.5px;width:100%;background:var(--hdr-fg);border-radius:0;transition:transform .3s var(--ease),opacity .2s} .burger.is-open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} .mobile-nav{ position:fixed;inset:0 0 0 auto;z-index:99;width:min(88vw,380px); background:var(--black);color:#fff;padding:96px 28px 40px; transform:translateX(100%);visibility:hidden; transition:transform .38s var(--ease),visibility .38s var(--ease); display:flex;flex-direction:column;box-shadow:none;overflow-y:auto; } .mobile-nav.is-open{transform:translateX(0);visibility:visible} .mobile-nav__list{list-style:none;margin:0 0 26px;padding:0} .mobile-nav__list li+li{margin-top:4px} .mobile-nav__link{display:block;font-family:'Play',sans-serif;font-weight:700;font-size:var(--fs-14);text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--line-dark)} .mobile-nav__link:hover{color:var(--accent)} .mobile-nav__actions{display:flex;flex-direction:column;gap:12px;margin-top:auto} .mobile-nav__contacts{margin-top:24px;font-size:var(--fs-8);color:var(--muted-dark)} .mobile-nav__contacts a{display:flex;align-items:center;min-height:44px;padding:6px 0;color:#fff} .mobile-nav__contacts a:hover{color:var(--accent)} .backdrop{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .backdrop.is-open{opacity:1;visibility:visible} body.no-scroll{overflow:hidden} /* ========================== HERO ============================ */ .hero{position:relative;background:var(--black);color:#fff;min-height:100svh;display:flex;align-items:center;padding-top:clamp(84px,11vh,124px);padding-bottom:clamp(34px,6vh,80px);overflow:hidden} .hero__inner{position:relative;z-index:1;text-align:center;max-width:1000px;margin-inline:auto} .hero__eyebrow{color:var(--muted-dark);letter-spacing:.18em;font-weight:700;font-size:clamp(var(--fs-8),calc(-1.85px + 1.1739vw),var(--fs-10));text-transform:uppercase} /* симметрия: eyebrow→H1 = H1→подзаголовок (одинаковый отступ) */ .hero h1{margin:clamp(14px,2.4vh,24px) 0 0} .hero__sub{margin:clamp(14px,2.4vh,24px) auto 0;max-width:680px;color:#D1D1D1;font-size:clamp(var(--fs-10),calc(5.55px + 1.3035vw),var(--fs-12));line-height:1.4531} .hero__cta{margin-top:clamp(22px,3.6vh,40px);justify-content:center} .hero__marks{margin-top:clamp(16px,2.6vh,32px);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;color:var(--muted-dark);font-weight:700;font-size:var(--fs-8);letter-spacing:.06em} /* Разделитель принадлежит ПРЕДЫДУЩЕМУ пункту (::after), а не следующему: при переносе точка остаётся в конце строки, новая строка начинается с названия. Интервалы равны: «название → точка» = margin-left, «точка → название» = column-gap. */ .hero__marks span{display:inline-flex;align-items:center;white-space:nowrap} .hero__marks span:not(:last-child)::after{content:"·";margin-left:22px;color:var(--accent)} /* ===================== 01 · Эффект =========================== */ .effect__cols{display:grid;gap:18px;margin-top:44px} .pane{padding:30px 28px;border-radius:0;border:1px solid var(--line);background:var(--paper);box-shadow:none} .pane--win{border-color:rgba(217,119,87,.5);background:linear-gradient(180deg,#FFFFFF,#fff)} .pane--lose{background:var(--paper-2)} .pane__ic{width:46px;height:46px;border-radius:0;display:grid;place-items:center;font-size:var(--fs-14);font-weight:700;margin-bottom:16px} .pane--win .pane__ic{background:var(--accent);color:#000000} /* зелёная плашка, белая галочка */ .pane--lose .pane__ic{background:#808080;color:#000000} .pane__title{font-weight:700;font-size:var(--fs-12);margin-bottom:8px} .pane p{margin:0;color:#4D4D4D;font-size:var(--fs-10);line-height:1.4063} /* акцентная строка-«панч» (перенос из КП): средний вес → жирный акцент виден */ .punch{margin:clamp(24px,3vw,34px) 0 0;font-size:clamp(var(--fs-13),calc(-0.39px + 2.9513vw),var(--fs-18));font-weight:700;line-height:1.2023;color:var(--ink);max-width:660px} #effect .lead b{color:var(--ink)} #effect .lead .accent,#effect .punch .accent{color:var(--accent);font-weight:700;font-size:max(1em,var(--fs-11))} /* вопрос-подводка перед кнопкой — синхронно в блоках 01 и 06: слева от кнопки, одинаковый крупный+жирный шрифт */ #effect .cta-note,.reviews__cta .cta-note{font-size:clamp(var(--fs-10),calc(-2.71px + 2.1192vw),var(--fs-13));font-weight:700;color:var(--ink)} .stat-banner{ margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px; padding:34px 36px;border-radius:0; background:var(--black);color:#fff;box-shadow:none;position:relative;overflow:hidden; } .stat-banner__num{font-family:'Play',sans-serif;font-weight:700;font-size:clamp(var(--fs-21),calc(-3.86px + 9.0077vw),var(--fs-27));color:var(--accent);line-height:0.939;position:relative;z-index:1} .stat-banner__txt{max-width:480px;color:#E8E8E8;font-size:var(--fs-10);line-height:1.4063;position:relative;z-index:1} /* ===================== 02 · Кейсы ============================ */ /* крупные плашки друг под другом (без карусели/ползунка). Плашка НЕПРОЗРАЧНАЯ. Верх: пара фото «Было|Стало» слева + бренд/метрики справа. Задача/Решение/Результат — внизу во всю ширину. */ .cases__list{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(24px,4vw,40px)} /* .case — позиционный контейнер (sticky на десктопе). Фон и scroll-анимация — на ВЛОЖЕННОМ .case__panel, чтобы sticky и transform жили на РАЗНЫХ элементах: их совмещение на одном давало рывок картинок при защёлкивании sticky. */ .case__panel{ background:#000000;border:1px solid rgba(255,255,255,.08); /* сплошной непрозрачный фон */ border-radius:0; transition:border-color .35s var(--ease),box-shadow .35s var(--ease); } .case:hover .case__panel{border-color:rgba(217,119,87,.30);box-shadow:none} /* внутренний контейнер: держит отступы контента (в т.ч. при full-bleed) и раскладку. Мобайл — одна колонка (медиа → бренд/метрики/история), десктоп — две (см. ≥992). */ .case__inner{display:grid;gap:clamp(22px,3vw,34px);padding:clamp(18px,3vw,30px)} .case__media{min-width:0} .case__side{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,24px);min-width:0} .case__divider{border:0;height:1px;width:100%;margin:0;background:rgba(255,255,255,.12)} /* пара «Было | Стало»: две крупные картинки рядом, маленькие отступы */ .case__ba{display:flex;align-items:stretch;justify-content:center;gap:10px} .ba-fig{margin:0;text-align:center;flex:1 1 0;min-width:0;display:flex;flex-direction:column} .ba-cap{align-self:center;font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-6);letter-spacing:.09em;text-transform:uppercase;color:#fff;padding:5px 15px;border-radius:0;margin-bottom:10px} .ba-cap--before{background:rgba(255,255,255,.18)} .ba-cap--after{background:var(--accent);color:var(--black)} .ba-shot{border-radius:0;overflow:hidden;background:#000000;aspect-ratio:3/4;width:100%} .ba-fig--after .ba-shot{box-shadow:none} .ba-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .55s var(--ease)} .ba-arrow{flex:none;align-self:center;color:var(--accent);opacity:.9;transition:transform .4s var(--ease)} .ba-arrow svg{width:clamp(20px,3.5vw,30px);height:clamp(20px,3.5vw,30px);display:block} /* «Было» слегка гаснет при наведении. Увеличение (scale) «Стало» убрано: оно обрезало логотип/предметы по краям. Картинки при hover неподвижны. */ .case:hover .ba-fig--before .ba-shot img{filter:grayscale(.3) brightness(.82)} .case:hover .ba-arrow{transform:translateX(3px) scale(1.08)} /* бренд + площадка + крупные метрики */ .case__info{display:flex;flex-direction:column;justify-content:center} .case__brand{font-family:'Play',sans-serif;font-weight:700;font-size:clamp(var(--fs-17),calc(4.9px + 3.3357vw),var(--fs-22));color:#fff;letter-spacing:.01em} .case__meta{margin-top:10px;color:var(--muted-dark);font-weight:700;font-size:var(--fs-8);letter-spacing:.06em;text-transform:uppercase} .case__metrics{display:flex;flex-wrap:wrap;gap:18px 34px;margin-top:24px} /* ПРАВКА 4: на телефоне метрики жёстко в столбец (три строки, по одной метрике на строку). Число строк не зависит от ширины цифры, поэтому докрутка счётчика не даёт перескок 2→3. Только телефон — десктопную раскладку (одна строка) не трогаем. */ @media (max-width:767px){ .case__metrics{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:14px} } .metric{display:flex;align-items:baseline;gap:8px} .metric b{font-family:'Play',sans-serif;font-weight:700;font-size:clamp(var(--fs-18),calc(-1.47px + 4.4477vw),var(--fs-23));color:var(--accent);line-height:0.939} /* > span — только подпись рядом с цифрой (прямой потомок). Без «>» правило ловило бы и служебные span внутри , ужимая само число. Вид подписи не меняется. */ .metric>span{font-size:var(--fs-9);color:var(--muted-dark);font-weight:700} /* Служебная часть показателя (%, дн., шт.) мельче числа — число держит доминанту. Общее правило: подключено на всех страницах (style.css есть везде), в portfolio.css не дублируется. Размер основного числа не меняется: .metric-num — только обёртка. Знаки + − × остаются в основном кегле. Надстрочность не используется. */ .metric-unit{ font-size:.65em; line-height:0.939; vertical-align:baseline; margin-left:.03em; } /* Задача / Решение / Результат — вертикально в правой колонке, под разделителем */ .case__story{display:grid;gap:clamp(14px,1.8vw,20px)} .story-row{display:grid;gap:9px} .story-row__label{justify-self:start;font-weight:700;font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--black);background:var(--accent);border-radius:0;padding:6px 16px} .story-row p{margin:0;color:#D1D1D1;font-size:var(--fs-9);line-height:1.4531} .cases__foot{margin-top:clamp(40px,5vw,60px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px} /* ---- Слайдер «до/после» — ТОЛЬКО мобильный. Десктоп (две картинки рядом) не трогаем. По умолчанию элементы слайдера скрыты; включаются в @media (max-width:767px). ---- */ .ba-slider,.ba-range,.ba-labels,.ba-zoom{display:none} @media (hover:hover) and (pointer:fine){.ba-shot img[data-lb]{cursor:zoom-in}} @media (max-width:767px){ /* .case__ba → один крупный кадр 3:4 с before/after шторкой. Кейс целиком может не влезать в экран — приоритет крупное фото (по ТЗ). */ .case__ba{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:0;overflow:hidden;background:#000000;--x:50%;touch-action:pan-y} .case__ba .ba-arrow{display:none} .case__ba .ba-fig{position:absolute;inset:0;margin:0;display:block} .case__ba .ba-shot{position:absolute;inset:0;height:100%;border-radius:0;box-shadow:none} .case__ba .ba-shot img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;filter:none!important;transform:none!important} /* низ — «стало» (целиком); верх — «было», обрезано до левой части по --x */ .case__ba .ba-fig--after{z-index:1} .case__ba .ba-fig--before{z-index:2;clip-path:inset(0 calc(100% - var(--x)) 0 0)} /* бейджи «Было»/«Стало» — НАД фото, в ряд (2.3). Наложенные бейджи скрываем. */ .case__ba .ba-cap{display:none} .ba-labels{display:flex;gap:8px;margin:0 0 10px} .ba-labels span{flex:1;text-align:center;font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-5);letter-spacing:.09em;text-transform:uppercase;color:#fff;padding:7px 10px;border-radius:0;line-height:1.125} .ba-labels__before{background:rgba(255,255,255,.18)} .ba-labels__after{background:var(--accent);color:var(--black)} .case__ba .ba-slider{display:block;position:absolute;top:0;bottom:0;left:var(--x);z-index:4;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:none} .case__ba .ba-slider::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:0;background:var(--accent) no-repeat center/22px;box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-4 6 4 6M15 6l4 6-4 6'/%3E%3C/svg%3E")} /* прозрачный range на всю площадь: touch-drag + тап в любое место */ .case__ba .ba-range{display:block;position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;background:transparent;-webkit-appearance:none;appearance:none;touch-action:pan-y} .case__ba .ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;border-radius:0} .case__ba .ba-range::-moz-range-thumb{width:44px;height:44px;border:none;border-radius:0;background:transparent} .case__ba .ba-range:focus-visible ~ .ba-slider::after{box-shadow:none} /* кнопка «на весь экран» (лайтбокс) поверх слайдера — только мобайл */ .ba-zoom{display:grid;place-items:center;position:absolute;right:10px;bottom:10px;z-index:6;width:40px;height:40px;border-radius:0;border:none;background:rgba(0,0,0,.6);color:#fff} .ba-zoom svg{width:20px;height:20px} } @supports (animation-timeline: view()) { @media (min-width:992px) and (prefers-reduced-motion:no-preference) { /* Пауза между плашками — через grid GAP, а НЕ через margin-bottom плашки. Критично: margin-bottom входит в margin-box sticky-элемента, поэтому плашка отлипала на целый --case-pause РАНЬШЕ, чем следующая её накрывала → недожатие и полоса сверху (замерено). gap разносит плашки так же, но в margin-box не входит → плашка держится до накрытия. */ .cases__list{gap:var(--case-pause);view-timeline-name:--stack;view-timeline-axis:block} .cases__list .case{position:sticky;top:clamp(84px,10vh,150px)} /* последняя плашка: margin-bottom = хвост-запас. Держит ПРЕДЫДУЩУЮ приклеенной, пока третья её накрывает (это content-box, в отличие от padding — тот для sticky бесполезен), даёт третьей короткую паузу и задаёт отступ до кнопок. Правится --case-tail одним числом. */ .cases__list .case:last-child{margin-bottom:var(--case-tail)} /* визуальная плашка: несёт фон. Саму рецессию (animation + animation-range) навешивает JS-модуль stackAnim — окна считаются от геометрии по единой формуле, длина = --case-anim (одинаковые vh для обоих переходов), окончание РОВНО в точке полного накрытия, у последней плашки рецессии нет (её никто не накрывает → ни одно окно не упирается в 100%). Хардкод-процентов здесь больше нет. Без JS плашки просто стекаются (sticky+z-index), без рецессии — чистая деградация. view-timeline --stack (на списке) остаётся: это опора, к которой JS привязывает окна. */ .cases__list .case__panel{ transform-origin:50% 50%; opacity:1;transform:none;filter:none;transition:none; /* reveal этими плашками больше не управляет */ will-change:transform,filter,opacity;backface-visibility:hidden; } /* глубина стопки: z-index на sticky-обёртке (порядок наложения) */ .cases__list .case:nth-child(1){z-index:1} .cases__list .case:nth-child(2){z-index:2} .cases__list .case:nth-child(3){z-index:3} /* уход вглубь: заметное уменьшение + блюр + затемнение, привязано к прокрутке. from задан явно (scale(1)/blur(0)/opacity 1), чтобы transform-часть точно интерполировалась на всех экранах, а не только blur/opacity. */ @keyframes case-recede{ from{transform:scale(1);filter:blur(0);opacity:1} to{transform:scale(.85);filter:blur(10px);opacity:.4} } } } /* Метрики строго в ОДНУ строку на 1280–2560. Кегль цифр и подписей задан в ≥992 через --u (растёт вместе с картинкой, проблема 2/3). Здесь только nowrap и сжатие пробелов. .metric-unit не трогаем — он em от цифры, масштабируется сам. */ @media (min-width:1280px){ .case__metrics{flex-wrap:nowrap;column-gap:clamp(8px,1vw,18px);row-gap:0} .metric{gap:clamp(2px,.3vw,6px)} .metric>span{white-space:nowrap} } /* ============= Юридическая страница (политика конфиденциальности) ========= Длинный текст: колонка ограничена по ширине для читаемости. Заголовки Play, тело Golos Text. Своих цветов не вводит, только токены. */ .legal{max-width:820px} .legal__lead{margin-top:18px;font-size:clamp(var(--fs-9),calc(-3.22px + 1.9017vw),var(--fs-11));line-height:1.5;color:var(--muted)} .legal__upd{margin-top:12px;font-size:var(--fs-7);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted-2)} .legal h2{ margin:clamp(30px,3.4vw,46px) 0 12px; font-family:'Play',sans-serif;font-weight:700;text-transform:uppercase; font-size:clamp(var(--fs-9),calc(0.92px + 1.8798vw),var(--fs-12));line-height:1.125;color:var(--ink); } .legal p{margin:10px 0;line-height:1.5469;color:var(--ink)} .legal ul{margin:10px 0;padding-left:20px} .legal li{margin:7px 0;line-height:1.5} .legal li::marker{color:var(--accent-dark)} .legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} @media (hover:hover) and (pointer:fine){.legal a:not(.btn):hover{color:var(--accent-dark)}} .legal__box{ margin-top:clamp(28px,3vw,42px);padding:clamp(18px,2.2vw,26px); border:1px solid var(--line);border-radius:0;background:var(--paper-2); } .legal__box p{margin:4px 0} .legal__cta{margin-top:clamp(28px,3vw,42px)} /* ============= Универсальный лайтбокс (v4 · карусель) ==================== */ .lb{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);touch-action:none;overscroll-behavior:contain} .lb.is-open{opacity:1;visibility:visible} .lb[hidden]{display:none} /* область-«окно» карусели; клипает соседей, торчащих за краями */ .lb__viewport{position:absolute;inset:0;overflow:hidden} .lb__track{position:absolute;inset:0;transition:transform .3s var(--ease),opacity .3s var(--ease)} /* слайд: несёт раскладку карусели (translateX/scale), задаётся из JS */ .lb__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .38s cubic-bezier(.25,.8,.25,1),opacity .38s cubic-bezier(.25,.8,.25,1),filter .38s cubic-bezier(.25,.8,.25,1);will-change:transform,opacity;backface-visibility:hidden} .lb--instant .lb__slide{transition:none} /* первая раскладка без анимации */ /* медиа: несёт зум/панораму (translate/scale), независимо от раскладки слайда. Пропорция --r ставится из JS по data-aspect каждого слайда (Блок 5): вертикальное фото не растягивается, широкое не обрезается — слайд вписывается в экран целиком. height = min(82vh, 90vw/r) → ширина = height*r ≤ 90vw при любом формате. */ .lb__media{position:relative;aspect-ratio:var(--r,.75);height:min(82vh,calc(90vw / var(--r,.75)));transition:transform .25s var(--ease);transform-origin:center center;will-change:transform} .lb--zoomed .lb__media{cursor:grab} .lb--panning .lb__media{transition:none;cursor:grabbing} .lb__img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0;box-shadow:none;transition:opacity .25s var(--ease);user-select:none;-webkit-user-drag:none} .lb__img[hidden]{display:none} .lb__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#F4F4F4;color:var(--black);font-weight:700;border-radius:0;text-align:center;padding:20px;font-size:var(--fs-10)} .lb__ph[hidden]{display:none} /* фикс 1.1: не даём заглушке висеть рядом с фото */ .lb__spinner{position:absolute;top:50%;left:50%;margin:-22px 0 0 -22px;width:44px;height:44px;border-radius:0;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);animation:lbspin .8s linear infinite} @keyframes lbspin{to{transform:rotate(360deg)}} .lb__btn{position:absolute;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;line-height:0.9375;transition:background-color .2s,color .2s,border-color .2s;z-index:20;-webkit-tap-highlight-color:transparent} @media (hover:hover) and (pointer:fine){ .lb__btn:hover{background:var(--accent);color:var(--black);border-color:var(--accent)} } /* на тач подсветка только в момент нажатия — :active снимается при отпускании, не залипает */ .lb__btn:active{background:var(--accent);color:var(--black);border-color:var(--accent)} .lb__close{top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);width:50px;height:50px;border-radius:0;font-size:var(--fs-16)} .lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:0;font-size:var(--fs-18)} .lb__prev{left:clamp(6px,2vw,24px)} .lb__next{right:clamp(6px,2vw,24px)} .lb__zoombar{position:absolute;bottom:clamp(12px,2.4vw,26px);left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:20} .lb__zoombar .lb__btn{position:static;width:46px;height:46px;border-radius:0} .lb__zoombar .lb__btn svg{width:22px;height:22px} .lb__counter{position:absolute;bottom:clamp(16px,2.6vw,30px);right:clamp(14px,3vw,28px);color:#fff;font-weight:700;letter-spacing:.05em;z-index:20} @media (prefers-reduced-motion:reduce){.lb,.lb__track,.lb__slide,.lb__media,.lb__img{transition:none}.lb__spinner{animation:none}} /* ================== Модалка успешной отправки (Блок 2) =================== */ .modal{position:fixed;inset:0;z-index:360;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease)} /* ---- Модалка с формой заявки (портфолио/кейсы). z-350 — ниже модалки успеха (360). ---- */ .formmodal{position:fixed;inset:0;z-index:350;display:flex;align-items:flex-start;justify-content:center;padding:clamp(20px,5vh,56px) 16px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch} .formmodal.is-open{opacity:1;visibility:visible} .formmodal__card{position:relative;width:100%;max-width:600px} .formmodal .form-card{margin:0} .formmodal__close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:0;border:none;background:var(--paper-2);color:var(--muted);font-size:var(--fs-16);line-height:0.9375;cursor:pointer;display:grid;place-items:center;z-index:2;transition:background-color .2s,color .2s} .formmodal__close:hover{background:var(--ink);color:#fff} @media (max-width:600px){.formmodal{padding:0;align-items:stretch}.formmodal__card{max-width:none}.formmodal .form-card{min-height:100vh;border-radius:0;padding-top:52px}} .modal.is-open{opacity:1;visibility:visible} .modal[hidden]{display:none} .modal__card{position:relative;width:min(90vw,420px);background:var(--paper);color:var(--ink);border-radius:0;box-shadow:none;padding:clamp(32px,5vw,46px) clamp(24px,4vw,40px);text-align:center;transform:scale(.9);opacity:0;transition:transform .28s var(--ease),opacity .28s var(--ease)} .modal.is-open .modal__card{transform:scale(1);opacity:1} .modal__close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:0;border:none;background:transparent;color:var(--muted);font-size:var(--fs-15);line-height:0.9375;cursor:pointer;display:grid;place-items:center;transition:background-color .2s,color .2s} .modal__close:hover{background:rgba(0,0,0,.06);color:var(--ink)} .modal__check{display:inline-grid;place-items:center;width:84px;height:84px;margin-bottom:18px} .modal__check svg{width:84px;height:84px} .modal__check-c{fill:none;stroke:#D97757;stroke-width:3;opacity:.35} .modal__check-p{fill:none;stroke:#D97757;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48} .modal.is-open .modal__check{animation:modalPop .42s var(--ease) both} .modal.is-open .modal__check-p{animation:modalDraw .4s .16s var(--ease) forwards} @keyframes modalPop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}} @keyframes modalDraw{to{stroke-dashoffset:0}} .modal__title{font-family:'Play',sans-serif;font-weight:400;font-size:clamp(var(--fs-13),calc(-2.82px + 3.4875vw),var(--fs-17));color:var(--ink);margin-bottom:10px} .modal__sub{color:var(--muted);font-size:var(--fs-9);line-height:1.4063} @media (prefers-reduced-motion:reduce){.modal,.modal__card{transition:none}.modal__check,.modal.is-open .modal__check-p{animation:none}.modal__check-p{stroke-dashoffset:0}} /* ==================== Кнопки «наверх / вниз» (Блок 1) =================== */ .scroll-nav{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:10px;transition:opacity .3s var(--ease),visibility .3s var(--ease)} .scroll-nav.is-hidden{opacity:0;visibility:hidden;pointer-events:none} .scroll-btn{width:48px;height:48px;border-radius:0;border:0;background:var(--accent);color:var(--black);display:grid;place-items:center;cursor:pointer;box-shadow:none;transition:background-color .2s,transform .2s var(--ease),opacity .3s var(--ease)} .scroll-btn svg{width:22px;height:22px} .scroll-btn:active{transform:scale(.95)} /* короткое нажатие — на всех устройствах */ .scroll-btn.is-off{opacity:0;transform:translateY(10px);pointer-events:none} /* hover только для настоящего курсора — на тач-устройствах не залипает (1.2) */ @media (hover:hover) and (pointer:fine){ .scroll-btn:hover{background:#D97757;transform:scale(1.05)} .scroll-btn:hover:active{transform:scale(.95)} } @media (max-width:600px){ .scroll-nav{right:16px;bottom:16px;gap:8px} .scroll-btn{width:44px;height:44px} .scroll-btn svg{width:20px;height:20px} } @media (prefers-reduced-motion:reduce){.scroll-nav,.scroll-btn{transition:none}} /* ===================== 03 · Услуги =========================== */ .svc-group{margin-top:clamp(36px,4vw,48px)} .svc-group__title{display:flex;align-items:center;gap:12px;font-weight:700;font-size:var(--fs-13);letter-spacing:.01em;margin-bottom:20px} .svc-group__title::before{content:"";width:13px;height:13px;background:var(--accent);border-radius:0;transform:rotate(45deg);flex:none} .svc-grid{display:grid;gap:14px} .svc-card{ display:flex;gap:18px;align-items:flex-start; /* мобайл: иконка слева, текст справа */ padding:26px;border-radius:0;background:var(--paper);border:1px solid var(--line); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease); } .svc-card:hover{transform:translateY(-4px);box-shadow:none;border-color:rgba(217,119,87,.5)} .svc-card__ic{width:62px;height:62px;flex:none;border-radius:0;background:var(--accent);display:grid;place-items:center;color:var(--black);box-shadow:none} .svc-card__ic svg{width:32px;height:32px;stroke-width:2} .svc-card__txt{min-width:0} .svc-card h3{font-size:var(--fs-13);font-weight:700;margin-bottom:7px;line-height:1.0902;color:var(--ink)} .svc-card p{margin:0;color:var(--muted);font-size:var(--fs-10);line-height:1.3864;font-weight:400} /* ================ 04 · Опыт и команда ======================= */ .about__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,5vw,40px) 16px;margin-top:clamp(40px,5vw,56px)} .stat{text-align:center;padding:8px 4px} .stat__num{font-family:'Play',sans-serif;font-weight:700;font-size:clamp(var(--fs-22),calc(-8.06px + 12.1605vw),var(--fs-28));color:var(--accent);line-height:0.939} .stat__label{margin-top:12px;color:#D1D1D1;font-weight:700;font-size:var(--fs-9);letter-spacing:.04em;text-transform:uppercase} .about__stats--plates{gap:12px} .about__stats--plates .stat{padding:clamp(20px,3.4vw,32px) 10px;border-radius:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)} .about__stats--plates .stat:nth-child(even){background:var(--accent);border-color:var(--accent)} .about__stats--plates .stat:nth-child(even) .stat__num{color:var(--black)} .about__stats--plates .stat:nth-child(even) .stat__label{color:rgba(0,0,0,.72)} .about__points{display:grid;gap:18px;margin-top:48px} .point{display:flex;gap:16px;align-items:flex-start} .point__dot{flex:none;width:30px;height:30px;border-radius:0;background:var(--accent);color:var(--black);display:grid;place-items:center} .point__dot svg{width:18px;height:18px;display:block} .point b{font-weight:700} .point__txt{color:#D1D1D1;font-size:var(--fs-11);line-height:1.3864;padding-top:3px;font-weight:400} .point__txt b{color:var(--accent)} /* ==================== 05 · География ======================== */ .geo{display:grid;gap:40px;margin-top:44px} .geo__map{width:100%;border-radius:0;border:1px solid rgba(255,255,255,.08);background:#000000;padding:clamp(14px,2.4vw,22px)} .geo__map img{display:block;width:100%;height:auto;border-radius:0} .geo__lead{line-height:1.8281} .mp-tag{display:inline-flex;align-items:center;padding:5px 14px;border-radius:0;background:var(--accent);color:var(--black);font-weight:700;font-size:var(--fs-9);letter-spacing:.01em;line-height:0.8936;vertical-align:middle} .geo__reg{color:var(--muted-dark)} .geo__label{font-weight:700;font-size:var(--fs-9);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} .geo__countries{display:flex;flex-wrap:wrap;gap:12px} .chip{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:0;border:1px solid var(--line-dark);background:rgba(255,255,255,.03);font-weight:700;font-size:var(--fs-10);transition:border-color .2s,background-color .2s} .chip:hover{border-color:rgba(217,119,87,.5);background:rgba(217,119,87,.06)} .chip .flag{width:1.7em;height:1.13em;flex:none;display:block;border-radius:0;box-shadow:none} /* SVG-флаги: единый бокс 3:2 у всех 11, швейцарский не выбивается */ .tag{display:inline-flex;padding:12px 20px;border-radius:0;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);font-size:var(--fs-9);font-weight:700;transition:border-color .2s,background-color .2s} .tag:hover{border-color:rgba(217,119,87,.5);background:rgba(217,119,87,.06)} .geo__tags{display:flex;flex-wrap:wrap;gap:10px} /* ===================== 06 · Отзывы =========================== */ .reviews{position:relative} .reviews__grid{display:grid;gap:22px;margin-top:48px} .review{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:0;padding:30px 28px;box-shadow:none} .review__head{display:flex;align-items:center;gap:15px;margin-bottom:16px} .mod-ava{--sz:62px;width:var(--sz);height:calc(var(--sz)*1.06);flex:none;clip-path:none;background:var(--accent);display:grid;place-items:center;overflow:hidden} .mod-ava img{width:100%;height:100%;object-fit:cover} .mod-ava__ini{font-family:'Play',sans-serif;font-weight:700;color:var(--black);font-size:var(--fs-10);letter-spacing:.02em} .review__name{font-weight:700;font-size:var(--fs-11)} .review__role{font-size:var(--fs-8);color:var(--muted-2);font-weight:700} .review__stars{color:var(--accent);letter-spacing:2px;font-size:var(--fs-9);margin-bottom:10px} .review p{margin:0;color:#4D4D4D;font-size:var(--fs-10);line-height:1.4788;font-weight:400} .reviews .lead{font-size:clamp(var(--fs-11),calc(-4.7px + 2.5629vw),var(--fs-15))} /* подзаголовок крупнее */ .reviews__cta{margin-top:48px} /* размер/жирность вопроса — общий с блоком 01 (см. #effect .cta-note) */ /* ============ 07 · Заявка + контакты ======================== */ .contact{position:relative} .contact__head{max-width:820px} /* карточка формы (идёт ВЫШЕ контактов) */ /* форма во всю ширину контентной области — ровно по краям ряда контакт-плашек */ .form-card{margin:44px 0 0;background:var(--paper);color:var(--ink);border-radius:0;padding:clamp(26px,4vw,44px);box-shadow:none} .form-card__title{font-weight:700;font-size:var(--fs-14);margin-bottom:8px} .form-card__note{color:var(--muted);font-size:var(--fs-9);margin-bottom:28px} .form-grid{display:grid;gap:22px} .field{position:relative;display:flex;flex-direction:column;min-width:0} .field label{font-weight:700;font-size:var(--fs-8);margin-bottom:9px;color:var(--ink)} .field label .req{color:var(--ink)} .field input,.field textarea{ font-family:inherit;font-size:var(--fs-10);color:var(--ink); padding:14px 4px;border:none;border-bottom:2px solid var(--line); background:transparent;transition:border-color .2s;resize:vertical;width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere; } .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)} .field textarea{ min-height:50px;max-height:340px;line-height:1.125;padding:14px 4px;transition:min-height .18s var(--ease); /* в покое ~1 строка как инпут; растёт при фокусе/вводе */ resize:vertical;overflow-y:auto;overflow-x:hidden; /* видимый вертикальный скролл */ scrollbar-width:thin;scrollbar-color:var(--line) transparent; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMic+PHBhdGggZD0nTTExIDRMNCAxMU0xMSA4TDggMTEnIGZpbGw9J25vbmUnIHN0cm9rZT0nIzhmODc3YScgc3Ryb2tlLXdpZHRoPScxLjUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg=="); /* видимый уголок resize (правка 4) */ background-repeat:no-repeat;background-position:right 5px bottom 5px;background-size:13px 13px; } /* при фокусе/вводе textarea растёт вниз (resize:vertical тоже работает) */ .field textarea:focus, .ta-wrap.is-filled textarea{min-height:120px} .field textarea::-webkit-scrollbar{width:10px} .field textarea::-webkit-scrollbar-thumb{background:var(--line);border-radius:0} .field textarea::-webkit-scrollbar-track{background:transparent} .field__count{align-self:flex-end;margin-top:6px;font-size:var(--fs-6);color:var(--muted);font-weight:700} /* Кастомный плейсхолдер textarea — гарантированно в верх-лево на любом устройстве (вкл. iOS) */ .ta-wrap{position:relative;display:flex;flex-direction:column} .ta-ph{position:absolute;top:14px;left:4px;right:14px;font-family:inherit;font-size:var(--fs-10);line-height:1.125; color:var(--muted-dark);pointer-events:none;transition:opacity .15s var(--ease)} .ta-wrap.is-filled .ta-ph{opacity:0} /* единый цвет нативных плейсхолдеров (имя/телефон) как у оверлея */ .field input::placeholder{color:var(--muted-dark);opacity:1} .field--invalid input,.field--invalid textarea,.field--invalid .phone,.field--invalid .filedrop{border-bottom-color:var(--error)} .field__err{color:var(--error);font-size:var(--fs-7);margin-top:7px;min-height:1em;font-weight:700} /* телефон с кодом страны. Мобайл: код страны (флаг+название+код) отдельной строкой НАД номером — длинные названия стран не сжимают поле номера. С ≥560px — код и номер в одну строку. */ .phone{display:flex;flex-direction:column;align-items:stretch;gap:0} .phone__code{ width:100%;font-family:inherit;font-size:var(--fs-9);font-weight:700;color:var(--ink); border:none;border-bottom:2px solid var(--line);background:transparent;padding:14px 28px 14px 4px;cursor:pointer; appearance:none;-webkit-appearance:none;transition:border-color .2s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center; } .phone input{width:100%;border:none;border-bottom:2px solid var(--line);padding:14px 4px;transition:border-color .2s} .phone__code:focus,.phone input:focus{outline:none;border-bottom-color:var(--accent)} @media(min-width:560px){ .phone{flex-direction:row;align-items:center;gap:8px;border-bottom:2px solid var(--line);transition:border-color .2s} .phone:focus-within{border-bottom-color:var(--accent)} .phone__code{width:auto;flex:none;border-bottom:none;padding:14px 22px 14px 6px;background-position:right 4px center} .phone input{width:auto;flex:1;border-bottom:none;padding:14px 0} } /* кастомный список стран (4.3): нативный select скрыт, флаги-эмодзи видны, список в стиле сайта */ .phone__code--native{display:none!important} .csel{position:relative;width:100%} .csel__btn{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:var(--fs-9);font-weight:700;color:var(--ink);border:none;border-bottom:2px solid var(--line);background:transparent;padding:14px 6px;cursor:pointer;transition:border-color .2s} .csel__btn:focus-visible{outline:none;border-bottom-color:var(--accent)} .csel__flag{font-size:var(--fs-13);line-height:0.9249} .csel__code{font-weight:700} /* Флаги телефонного селектора — самохостируемый WebP-спрайт (images/flags/flags.webp), сетка 16 колонок, показ 20x15 (спрайт @2x). Фон включается классом .flags-on при ПЕРВОМ открытии списка → ленивая загрузка, начальная загрузка страницы не тяжелеет. */ .csel .fl{display:block;width:20px;height:15px;flex:none;background-repeat:no-repeat;background-size:320px 180px;border-radius:0;box-shadow:none} .csel.flags-on .fl{background-image:url(../images/flags/flags.webp)} .csel__flag svg{display:block;width:20px;height:15px;border-radius:0} /* inline-дефолт до загрузки спрайта */ .csel__chev{width:12px;height:8px;margin-left:auto;color:var(--muted);transition:transform .2s var(--ease)} .csel.is-open .csel__chev{transform:rotate(180deg)} .csel__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:min(320px,86vw);background:var(--paper);border-radius:0;box-shadow:none;padding:8px;border:1px solid var(--line)} .csel__panel[hidden]{display:none} /* специфичность .csel__panel .csel__search (0,2,0) перебивает .field input (0,1,1) — иначе текст был бы цвета --ink и невидим (баг 4.2 «видно только плейсхолдер») */ .csel__panel .csel__search{width:100%;font-family:inherit;font-size:var(--fs-8);color:var(--ink);-webkit-text-fill-color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;padding:10px 12px;margin-bottom:8px;outline:none} .csel__panel .csel__search::placeholder{color:var(--muted-2)} .csel__panel .csel__search:focus{border-color:var(--accent)} .csel__list{max-height:280px;overflow-y:auto;overscroll-behavior:contain} .csel__opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:0;color:var(--ink);cursor:pointer;font-size:var(--fs-9)} .csel__of{font-size:var(--fs-11);line-height:0.9375} .csel__on{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csel__oc{color:var(--muted-2);font-weight:700} .csel__opt:hover,.csel__opt.is-hi{background:rgba(217,119,87,.15)} .csel__opt.is-sel{background:var(--accent);color:var(--black)} .csel__opt.is-sel .csel__oc{color:rgba(0,0,0,.7)} .csel__sep{height:1px;margin:8px 4px;background:var(--line)} /* тонкая серая линия */ .csel__empty{padding:14px 12px;text-align:center;color:var(--muted);font-size:var(--fs-8)} .csel__empty[hidden]{display:none} @media(min-width:560px){ .phone .csel{width:auto;flex:none} .csel__btn{border-bottom:none;padding:14px 6px} } /* прикрепить файл */ .filedrop{ display:flex;align-items:center;gap:14px;cursor:pointer; padding:16px;border:2px dashed var(--line);border-radius:0; transition:border-color .2s,background-color .2s; } .filedrop:hover,.filedrop.is-drag{border-color:var(--accent);background:var(--tint)} .filedrop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .filedrop__ic{width:42px;height:42px;flex:none;border-radius:0;background:var(--accent);display:grid;place-items:center;color:#000000} .filedrop__ic svg{width:22px;height:22px} .filedrop__text{font-size:var(--fs-9);color:var(--muted);line-height:1.2948} .filedrop__text b{color:var(--ink);font-weight:700} .filedrop__name{margin-top:8px;font-size:var(--fs-8);font-weight:700;color:var(--accent-dark);display:none} .filedrop__name.is-shown{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .filedrop__file{display:flex;align-items:center;gap:8px;max-width:100%} .filedrop__file .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .filedrop__file .fsize{flex:none;color:var(--muted)} .filedrop__name button{border:none;background:none;color:var(--muted);font-size:var(--fs-10);line-height:0.9375;padding:0 2px;cursor:pointer;flex:none} .form-consent{font-size:var(--fs-7);color:var(--muted);line-height:1.4063} .form-consent a{color:var(--ink);text-decoration:underline;font-weight:700} .form-submit{margin-top:6px} .form-status{margin-top:8px;padding:15px 20px;border-radius:0;background:var(--tint);border:1px solid rgba(217,119,87,.5);color:var(--black);font-weight:700;font-size:var(--fs-9);display:none} .form-status.is-shown{display:block} /* контакты — под формой, плашки одинаковой ширины */ /* контакт-плашки: 3 в ряд одинаковой ширины, во всю ширину (телефон в одну строку) */ .contact__methods{display:grid;gap:14px;margin-top:36px} .method{ display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:0; background:rgba(255,255,255,.04);border:1px solid var(--line-dark); transition:border-color .2s,background-color .2s,transform .2s; } .method:hover{border-color:rgba(217,119,87,.5);transform:translateY(-2px)} .method__ic{width:48px;height:48px;flex:none;border-radius:0;background:var(--accent);color:var(--black);display:grid;place-items:center} .method__ic svg{width:23px;height:23px} .method__label{display:block;font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);font-weight:700;margin-bottom:3px} .method__value{display:block;font-weight:700;font-size:var(--fs-10);color:#fff} /* ========================= ФУТЕР ============================ */ .site-footer{background:#000000;color:#fff;padding:64px 0 34px} .footer__top{display:grid;gap:36px} .footer__brand{max-width:340px} .footer__brand .logo__name,.footer__brand .logo__sub{color:#fff} .footer__brand .logo__sub{color:rgba(255,255,255,.55)!important} .footer__tagline{margin-top:18px;color:var(--muted-dark);font-size:var(--fs-9);max-width:300px;line-height:1.4531} .footer__col h2{font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--fs-7);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:14px} .footer__col ul{list-style:none;margin:0;padding:0} .footer__col li+li{margin-top:2px} .footer__col a{display:inline-flex;align-items:center;min-height:44px;color:#E8E8E8;font-size:var(--fs-9);transition:color .2s} .footer__col a:hover{color:var(--accent)} .footer__socials{display:flex;gap:12px;margin-top:6px} .soc{width:46px;height:46px;border-radius:0;border:1px solid var(--line-dark);display:grid;place-items:center;color:#fff;transition:background-color .2s,color .2s,transform .2s,border-color .2s} .soc:hover{background:var(--accent);color:var(--black);border-color:var(--accent);transform:translateY(-2px)} .soc svg{width:21px;height:21px} .footer__bottom{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;color:var(--muted-dark);font-size:var(--fs-8)} .footer__bottom a{color:var(--muted-dark)} .footer__bottom a:hover{color:var(--accent)} /* ===================== Страницы-заглушки ==================== */ .stub{min-height:70vh;display:grid;place-items:center;text-align:center;padding:150px 0 110px;position:relative;overflow:hidden} .stub .container{position:relative;z-index:1} .stub__eyebrow{color:var(--muted-2);letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-size:var(--fs-8)} .stub h1{font-family:'Play',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(var(--fs-20),calc(-2.78px + 8.8686vw),var(--fs-30));margin:20px 0 0;line-height:0.9844} .stub__soon{display:inline-block;margin-top:24px;padding:10px 22px;border-radius:0;background:var(--accent);color:var(--black);font-weight:700;font-size:var(--fs-8);letter-spacing:.02em} .stub p{margin:24px auto 0;max-width:560px;color:var(--muted);font-size:var(--fs-10)} .stub__cta{margin-top:38px;justify-content:center} /* ===================== Reveal-анимации ====================== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-visible{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.08s} .reveal[data-delay="2"]{transition-delay:.16s} .reveal[data-delay="3"]{transition-delay:.24s} .reveal[data-delay="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .case{transition:none} .btn,.svc-card,.method,.soc{transition:none} } /* =================== Адаптив (min-width) ==================== */ /* ≥ 560px */ @media (min-width:560px){ .effect__cols{grid-template-columns:1fr 1fr} .svc-grid{grid-template-columns:1fr 1fr} .contact__methods{grid-template-columns:repeat(3,1fr)} .footer__top{grid-template-columns:1.4fr 1fr 1fr} } /* ≥ 768px — планшет */ @media (min-width:768px){ :root{--gutter:34px} .about__stats{grid-template-columns:repeat(5,1fr);gap:20px} .about__points{grid-template-columns:1fr 1fr;gap:24px} .geo{grid-template-columns:1.25fr .75fr;align-items:start;gap:56px} .reviews__grid{grid-template-columns:repeat(2,1fr)} .footer__top{grid-template-columns:1.6fr 1fr 1fr 1fr} } /* ≥ 992px — десктоп */ @media (min-width:992px){ body{font-size:var(--fs-11)} .burger{display:none} .nav{display:block} .header-actions{display:flex} .site-header__inner{height:84px} /* Кейсы (02) на десктопе: full-bleed плашка (фон во всю ширину вьюпорта), контент внутри — центрирован и ограничен по ширине. Заголовок секции и всё остальное на странице остаются в узком .container (их не трогаем). */ .cases__list{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)} .case__panel{border-radius:0;border-inline:0} /* КОРЕНЬ 1: обе колонки в одной grid-сетке с заданной пропорцией. --u = ширина медиа-колонки = та же формула, что управляет картинкой (НЕ меняем). Текстовая колонка = фиксированная доля от --u, подогнанная под ширину строки метрик (по факту метрики ≈ .595·u + 19) + ~24px дыхания. Колонку задают МЕТРИКИ, а не story-параграфы (они лишь заполняют трек и переносятся вниз). Пустой зоны справа нет; max-content не берём — там параграфы (max-width 44ch) раздували колонку на широких экранах. width:max-content + margin-inline:auto → блок центрируется: отступ слева до картинки = отступ справа до края текстовой колонки (симптом 1А). align-items:start → обе колонки к верху; текст не центрируется по вертикали. Кегли/вертикальные отступы правой колонки — доля от --u (растут как картинка). */ .case__inner{ --u:min(55vw,98vh); grid-template-columns:var(--u) calc(var(--u)*.595 + 48px); gap:clamp(18px,1.7vw,40px);align-items:start; width:max-content;margin-inline:auto; padding-block:clamp(20px,2.4vw,44px);padding-inline:0; } .case__ba{gap:clamp(8px,1.2vw,16px)} .case__side{max-width:none;gap:calc(var(--u)*.030);margin-top:40px} .case__brand{font-size:clamp(var(--fs-18),calc(var(--u) * 0.06177),var(--fs-30))} .case__meta{margin-top:calc(var(--u)*.014);font-size:clamp(var(--fs-4),calc(var(--u) * 0.02144),var(--fs-17))} .case__metrics{margin-top:calc(var(--u)*.034)} .metric b{font-size:clamp(var(--fs-17),calc(var(--u) * 0.05964),var(--fs-30))} .metric>span{font-size:clamp(var(--fs-3),calc(var(--u) * 0.02),var(--fs-16))} .case__story{gap:calc(var(--u)*.026)} .story-row{gap:calc(var(--u)*.012)} .story-row__label{font-size:clamp(var(--fs-2),calc(var(--u) * 0.01791),var(--fs-15))} .story-row p{font-size:clamp(var(--fs-6),calc(var(--u) * 0.02453),var(--fs-19));max-width:44ch} .svc-grid{grid-template-columns:repeat(3,1fr)} .svc-card{flex-direction:column;padding:34px 30px} /* десктоп: иконка сверху */ .svc-card__ic{width:66px;height:66px} .svc-card__ic svg{width:34px;height:34px} .reviews__grid{grid-template-columns:repeat(3,1fr)} .reviews__grid .review:nth-child(2){transform:translateY(30px)} .reviews__grid .review:nth-child(3){transform:translateY(-16px)} .about__stats{margin-top:56px} } /* ≥ 1024px */ @media (min-width:1024px){ .form-grid--2{grid-template-columns:1fr 1fr} .form-grid--2 .field--full{grid-column:1 / -1} } .logo__img--bee-dk,.logo__img--bee-lt{display:none} @media (max-width:768px){ .site-header.pf-header .logo__img--dk, .site-header.pf-header .logo__img--lt{display:none} .site-header.pf-header .logo__img--bee-dk{display:block} } /* Ошибка отправки формы (fetch на https://api.web3forms.com/submit) */ .form-err{color:#D97757;font-weight:700;font-size:var(--fs-9);line-height:1.2948;margin:0 0 14px;text-align:center} .form-err[hidden]{display:none} /* Подсказка под лейблом поля (мелкий серый текст) */ .field__hint{font-size:var(--fs-7);color:var(--muted);line-height:1.3125;margin:-4px 0 9px} /* ===== Site-9: мобильные фиксы (модалка, меню, safe-area) ===== */ /* Bug 2 — модалка формы: непрозрачный фон полей, чтобы при скролле сквозь них не просвечивал фон (backdrop-filter на скролл-контейнере глючит композитинг iOS/Android). */ .formmodal .form-card{isolation:isolate} .formmodal .field input, .formmodal .field textarea, .formmodal .phone__code, .formmodal .filedrop{background-color:var(--paper)} .mobile-nav:focus,.mobile-nav:focus-visible{outline:none} /* Bug 1 — с viewport-fit=cover модалку/крестик сдвигаем ниже выреза (notch/home). */ @media (max-width:600px){ .formmodal .form-card{padding-top:calc(52px + env(safe-area-inset-top,0px));padding-bottom:calc(clamp(26px,4vw,44px) + env(safe-area-inset-bottom,0px))} .formmodal__close{top:calc(14px + env(safe-area-inset-top,0px))} } /* ===== Site-10: моб-меню — safe-area отступ сверху/снизу ===== */ /* Первый пункт (Контакты) не наезжает на статус-бар/вырез (iPhone/Fold). После viewport-fit=cover меню идёт под вырез — компенсируем env + запас, с фикс. минимумом. Двигается всё меню как блок (padding контейнера), интервалы пунктов не меняются. */ .mobile-nav{ padding-top:max(calc(env(safe-area-inset-top,0px) + 64px), 108px); padding-bottom:max(calc(env(safe-area-inset-bottom,0px) + 24px), 40px); } /* ===== Site-11: модалка формы — сплошной непрозрачный фон контейнера ===== */ /* Причина бага: backdrop-filter + overflow-y:auto + -webkit-overflow-scrolling висели на ОДНОМ элементе (.formmodal). iOS/Android композитят затемнение отдельным слоем размером во вьюпорт — фон карточки НИЖЕ первого экрана не прокрашивался, и сквозь него просвечивала страница (лейблы, зона файлов, согласие). Лечение: затемнение и блюр — на отдельный слой ПОЗАДИ карточки (::before, fixed), скролл-контейнер без фона/фильтра, карточке — сплошной непрозрачный фон на всю площадь. */ .formmodal{ background:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; -webkit-overflow-scrolling:auto; } /* подложка-оверлей: затемнение + блюр, ПОЗАДИ карточки, не скроллится и не ловит клики */ .formmodal::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } /* карточка формы — над подложкой, фон сплошной на всю площадь (вкл. зоны между полями) */ .formmodal__card{position:relative;z-index:1;background-color:var(--paper)} .formmodal .form-card{background-color:var(--paper)} @media (max-width:600px){ .formmodal{align-items:flex-start} .formmodal__card{align-self:flex-start} } /* ===== Site-12: hero-строка маркетплейсов — 5 площадок вместо 3 ===== */ /* Разделитель занимал 44px (gap 22 + margin-right 22), из-за чего пять названий разъезжались на 4 строки и hero переставал влезать в первый экран. Ужимаем ТОЛЬКО интервалы и ТОЛЬКО на мобиле: кегль, цвет и сами разделители «·» не меняются. */ @media (max-width:600px){ .hero__marks{gap:6px 12px} .hero__marks span:not(:last-child)::after{margin-left:12px} } /* ===== Site-13: юридические реквизиты и режим работы в футере ===== */ .footer__legal{ margin-top:22px;font-style:normal;max-width:300px; color:var(--muted-dark);font-size:var(--fs-6);line-height:1.6406; } .footer__legal a{ color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.22); text-underline-offset:2px;transition:color .2s,text-decoration-color .2s; } .footer__legal a:hover{color:var(--accent);text-decoration-color:var(--accent)} /* ПАТТЕРН: своя раскладка у каждого блока. Основание — src/pattern.mjs. */ .pat-deco[data-pat="1"]::before{-webkit-mask-image:var(--pat-1);mask-image:var(--pat-1)} /* index.html блок 0, зерно 2596434073 */ .pat-deco[data-pat="2"]::before{-webkit-mask-image:var(--pat-2);mask-image:var(--pat-2)} /* index.html блок 1, зерно 2579656454 */ .pat-deco[data-pat="3"]::before{-webkit-mask-image:var(--pat-3);mask-image:var(--pat-3)} /* index.html блок 3, зерно 2546101216 */ .pat-deco[data-pat="4"]::before{-webkit-mask-image:var(--pat-4);mask-image:var(--pat-4)} /* index.html блок 4, зерно 2663544549 */ .pat-deco[data-pat="5"]::before{-webkit-mask-image:var(--pat-5);mask-image:var(--pat-5)} /* index.html блок 5, зерно 2646766930 */ .pat-deco[data-pat="6"]::before{-webkit-mask-image:var(--pat-6);mask-image:var(--pat-6)} /* index.html блок 6, зерно 2629989311 */ .pat-deco[data-pat="7"]::before{-webkit-mask-image:var(--pat-7);mask-image:var(--pat-7)} /* index.html блок 7, зерно 2613211692 */ .pat-deco[data-pat="8"]::before{-webkit-mask-image:var(--pat-8);mask-image:var(--pat-8)} /* portfolio.html блок 0, зерно 276315553 */ .pat-deco[data-pat="9"]::before{-webkit-mask-image:var(--pat-9);mask-image:var(--pat-9)} /* portfolio.html блок 1, зерно 259537934 */ .pat-deco[data-pat="10"]::before{-webkit-mask-image:var(--pat-10);mask-image:var(--pat-10)} /* privacy.html блок 0, зерно 3390809949 */ /* ПЛАШКА: дожим краски и заливки от поверхности. Основание — tokens.mjs, plateCss(). */ a.btn--primary,button.btn--primary,span.btn--primary,a.pf-video__play,button.pf-video__play,span.pf-video__play{background:var(--em-fill);color:var(--em-ink);border-color:var(--em-fill)} /* ОБВОДКА ФОКУСА КНОПКИ ПРОКРУТКИ: двойное кольцо, только в фокусе. Основание — tokens.mjs, focusRingCss(). */ .scroll-btn:focus-visible{outline:2px solid var(--paper);outline-offset:0;border:2px solid var(--ink)} /* АКЦЕНТ НА ТИНТЕ — тёмный вариант палитры. Основание — tokens.mjs, tintAccentCss(). */ .section--paper2{--accent:#B85535} /* #D97757 на #E8E8E8 даёт 2.5479, #B85535 — 3.9051 */ /* ПАТТЕРН: носитель слоя — контекст наложения, слой под содержимым. Основание — src/build.mjs. */ :is(section,header,footer,div):has(> .pat-deco){isolation:isolate}