/* Собрано из src/css — правьте исходники и запускайте python3 build.py */ /* ==== 00-base.css ==== */ /* ========================================================================== «Ceram Studio» · стиль «Стол дизайнера» — фундамент. Страница = стол, на котором разложены образцы. Свет сверху-слева, тени уходят вправо-вниз (одно направление на весь сайт). Терракота — единственный «горячий» цвет: действие. Шалфей, дуб, глубокий синий — цвета материалов, не интерфейса. Платформа общая с papa и okna-v2: window.HM, секции, data-reveal, ?draft. ========================================================================== */ :root{ /* поверхность */ --table:#ECE9E3; /* стол: светлый тёплый бетон — фон страницы */ --table-2:#E1DDD5; /* стол глубже: вторая полоса */ --sheet:#FBF9F5; /* лист / карточка */ --board:#D9D4CA; /* планшет мудборда */ /* текст */ --ink:#26231F; --muted:#5C574F; --faint:#8A847A; --hair:rgba(38,35,31,.13); --hair-strong:rgba(38,35,31,.26); /* действие */ --clay:#A9502F; --clay-hover:#B45A38; --clay-press:#9E4A2C; --clay-soft:#F3E4DB; --clay-ink:#96462A; /* терракота для текста на столе (AA) */ --clay-glow:rgba(169,80,47,.28); /* материалы (для акцентов в иллюстрациях) */ --sage:#9DAA9C; --sage-ink:#4A5A48; --oak:#C9A57E; --walnut:#6E4A33; --teal:#33596B; --brass:#B8914A; --marble:#ECEBE8; /* тёмная полоса — «вода», глубокий сине-зелёный */ --deep:#1E3A44; --deep-2:#244652; --on-deep:#EEF0EC; --on-deep-muted:#A9BCC0; --clay-light:#E7A385; /* статусы */ --ok:#3F7A4E; --danger:#B0412E; --tg:#229ED9; --vk:#0077FF; /* шрифты */ --font-display:"Cormorant Garamond","Cormorant",Georgia,serif; --font-body:"Manrope",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; --fs-hero:clamp(2.75rem, 1.7rem + 4.4vw, 5.75rem); --fs-h2:clamp(2.25rem, 1.6rem + 2.6vw, 4rem); --fs-h3:clamp(1.5rem, 1.3rem + .8vw, 2rem); --fs-lead:clamp(1.125rem, 1.06rem + .3vw, 1.3125rem); --fs-body:1.0625rem; --fs-small:.9375rem; --fs-label:.8125rem; --lh-tight:.98; --lh-heading:1.04; --lh-body:1.6; /* пространство (база 8) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px; --section-y:clamp(88px, 7vw + 40px, 168px); --container:1280px; --pad-x:clamp(16px, 4vw, 48px); --header-h:76px; /* форма: плитка почти прямоугольная, интерфейс чуть мягче */ --r-tile:2px; --r-1:6px; --r-2:10px; --r-3:18px; --r-pill:999px; --tile-t:6px; /* толщина образца в 3D-сценах */ /* тени «флэтлэй»: всегда вправо-вниз */ --shadow-sample:1px 1px 0 rgba(38,35,31,.08), 4px 7px 10px -3px rgba(38,35,31,.20), 16px 26px 38px -14px rgba(38,35,31,.30); --shadow-lift:2px 3px 0 rgba(38,35,31,.06), 10px 16px 22px -6px rgba(38,35,31,.22), 30px 48px 64px -20px rgba(38,35,31,.34); --shadow-soft:0 1px 0 rgba(38,35,31,.05), 8px 14px 32px -16px rgba(38,35,31,.26); /* движение */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-drop:cubic-bezier(.22,1.18,.36,1); --dur-1:160ms; --dur-2:320ms; --dur-3:640ms; --dur-4:1100ms; --z-header:100; --z-mobilebar:110; --z-overlay:200; --mb-h:0px; /* зерно бетона: один SVG-шум на весь сайт */ --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .13 0 0 0 0 .11 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- контекстные цвета: светлая схема и тёмная полоса ---------- */ :root, .scheme-light, .panel{ --fg:var(--ink); --fg-muted:var(--muted); --line:var(--hair); --line-strong:var(--hair-strong); --surface:var(--sheet); --hover-tint:rgba(38,35,31,.05); --accent-text:var(--clay-ink); --focus:var(--clay); } .section--deep, .scheme-deep{ --fg:var(--on-deep); --fg-muted:var(--on-deep-muted); --line:rgba(238,240,236,.14); --line-strong:rgba(238,240,236,.3); --surface:var(--deep-2); --hover-tint:rgba(238,240,236,.07); --accent-text:var(--clay-light); --focus:var(--clay-light); color:var(--fg); } /* ---------- сброс ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px); -webkit-tap-highlight-color:transparent; color-scheme:light; } body{ min-height:100vh; min-height:100dvh; background-color:var(--table); color:var(--fg); font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip; } img,picture,video,canvas,svg{display:block;max-width:100%} img{height:auto} input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit} button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit} button:disabled{cursor:default} a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em} ul[role="list"],ol[role="list"]{list-style:none;padding:0} table{border-collapse:collapse} fieldset{border:0;padding:0;min-width:0} legend{padding:0} summary{cursor:pointer;list-style:none} summary::-webkit-details-marker{display:none} [hidden]{display:none !important} #main:focus{outline:none} address{font-style:normal} /* ---------- типографика ---------- Заголовки — антиква Cormorant Garamond 500–600: «каталожная» интонация студии. Курсив — только для одного акцентного слова в заголовке (.em). */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:var(--lh-heading);letter-spacing:-.012em;text-wrap:balance;color:var(--fg)} p,li,dd,figcaption{text-wrap:pretty} strong,b{font-weight:700} ::selection{background:var(--clay);color:#fff} .em{font-style:italic;font-weight:500;color:var(--accent-text)} .h-hero{font-family:var(--font-display);font-weight:500;font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:-.022em} .h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:-.018em;max-width:18ch} .h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.008em} .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--fg-muted);max-width:56ch} .muted{color:var(--fg-muted)} .tabular{font-variant-numeric:tabular-nums} /* маркировка образца: моно, капс, разрядка — «оборот плитки» */ .spec{ font-family:var(--font-mono);font-size:.75rem;font-weight:500;line-height:1.35; letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);font-variant-numeric:tabular-nums; } /* шифр раздела: один раз на секцию, над заголовком */ .sheet-code{display:flex;align-items:center;gap:12px} .sheet-code::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55;flex:none} /* заголовок секции */ .sec-head{display:grid;gap:clamp(14px, 1.4vw, 22px);max-width:860px;margin-bottom:clamp(40px, 5vw, 80px)} @media (min-width:900px){ .sec-head--split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;column-gap:clamp(32px,6vw,96px)} .sec-head--split .lead{justify-self:end} } /* ---------- раскладка ---------- */ .container{width:100%;max-width:calc(var(--container) + 2 * var(--pad-x));margin-inline:auto;padding-inline:var(--pad-x)} .section{position:relative;padding-block:var(--section-y);isolation:isolate} .section--table{background-color:var(--table)} .section--table-2{background-color:var(--table-2)} .section--sheet{background-color:var(--sheet)} .section--deep{background-color:var(--deep)} /* бетонное зерно поверх полосы: едва заметно, только на крупных плоскостях */ .grain::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--noise);opacity:.35;mix-blend-mode:multiply; } .section--deep.grain::after{opacity:.5;mix-blend-mode:soft-light} /* ---------- иконки ---------- */ .icon{ width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em; fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible; } .icon--fill{fill:currentColor;stroke:none} .icon--sm{width:1em;height:1em;vertical-align:-.14em} .icon--lg{width:1.6em;height:1.6em} /* ---------- кнопки ---------- Прямоугольные, радиус 6px — как у образца с фаской. Hover: кнопка «приподнимается» с тенью вправо-вниз (тот же свет, что у образцов). */ .btn{ --btn-h:54px; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:var(--btn-h);padding:0 26px;border-radius:var(--r-1); border:1.5px solid transparent;background:transparent;color:var(--fg); font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.15;letter-spacing:.005em; text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;user-select:none;touch-action:manipulation; transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } .btn .icon{width:1.2em;height:1.2em} .btn:active{transform:translate(1px,1px);transition-duration:80ms} .btn--primary{background:var(--clay);color:#fff} .btn--primary:hover{background:var(--clay-hover);transform:translate(-1px,-2px);box-shadow:3px 5px 0 -1px rgba(38,35,31,.18), 10px 16px 24px -12px var(--clay-glow)} .btn--primary:active{background:var(--clay-press);box-shadow:none} .btn--ink{background:var(--ink);color:#fff} .btn--ink:hover{background:#38342E;transform:translate(-1px,-2px);box-shadow:3px 5px 0 -1px rgba(38,35,31,.18)} .btn--light{background:var(--sheet);color:var(--ink);border-color:var(--hair-strong)} .btn--light:hover{border-color:var(--ink);transform:translate(-1px,-2px);box-shadow:3px 5px 0 -1px rgba(38,35,31,.14)} .btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)} .btn--ghost:hover{border-color:var(--fg);background:var(--hover-tint)} .btn--tg .icon{color:var(--tg)} .btn--vk .icon{color:var(--vk)} .section--deep .btn--light{background:var(--on-deep);border-color:transparent} .btn--lg{--btn-h:60px;padding:0 32px;font-size:1.0625rem} .btn--sm{--btn-h:44px;padding:0 18px;font-size:.9375rem;gap:8px} .btn--block{display:flex;width:100%} .btn--icon{padding:0;width:var(--btn-h);flex:none} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none} .btn[aria-busy="true"]{color:transparent !important;pointer-events:none} .btn[aria-busy="true"]::after{ content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%; border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:hm-spin .8s linear infinite; } @keyframes hm-spin{to{transform:rotate(360deg)}} @media (max-width:379px){.btn{padding-inline:18px}.btn--lg{padding-inline:22px}} /* текстовая ссылка: подчёркивание «прорисовывается» терракотой */ .link{ display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:600; text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.28em;text-decoration-thickness:1px; transition:text-decoration-color var(--dur-1) ease, color var(--dur-1) ease; } .link:hover{text-decoration-color:var(--clay);color:var(--accent-text)} .link .icon{transition:transform var(--dur-2) var(--ease-out)} .link:hover .icon{transform:translateX(3px)} /* ---------- чипы и сегменты ---------- */ .chip{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 18px;border-radius:var(--r-pill); border:1.5px solid var(--line-strong);background:transparent;color:var(--fg); font-size:.9375rem;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;user-select:none;position:relative; transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out); } .chip:hover{border-color:var(--fg)} .chip:active{transform:scale(.97)} .chip[aria-pressed="true"],.chip[aria-checked="true"],.chip[aria-selected="true"],.chip.is-active,.chip:has(input:checked){ background:var(--ink);border-color:var(--ink);color:#fff; } .section--deep .chip[aria-pressed="true"],.section--deep .chip[aria-selected="true"],.section--deep .chip.is-active,.section--deep .chip:has(input:checked){ background:var(--on-deep);border-color:var(--on-deep);color:var(--ink); } .chip input[type="radio"],.chip input[type="checkbox"]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px} .chip__dot{width:12px;height:12px;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px rgba(38,35,31,.18)} .seg{display:flex;flex-wrap:wrap;gap:8px} .seg > legend{font-size:var(--fs-small);font-weight:700;margin-bottom:12px;width:100%} /* ---------- панель (лист) ---------- */ .panel{ position:relative;background:var(--sheet);color:var(--fg); border-radius:var(--r-2);box-shadow:var(--shadow-soft); padding:clamp(22px, 1.5vw + 16px, 40px); } /* ---------- формы ---------- */ .field{display:grid;gap:8px;min-width:0} .field__label{font-size:var(--fs-small);font-weight:700;line-height:1.35;color:var(--fg)} .field__label .req{color:var(--danger);margin-left:2px} .field__hint{font-size:var(--fs-label);line-height:1.45;color:var(--fg-muted)} .field__error{display:none;align-items:flex-start;gap:8px;font-size:var(--fs-label);line-height:1.4;font-weight:600;color:var(--danger)} .field__error::before{ content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%; background:var(--danger);color:#fff;font-size:.75rem;font-weight:700;line-height:1; } .field.is-invalid .field__error{display:flex} .input,.textarea,.select{ width:100%;min-height:54px;padding:0 16px;border-radius:var(--r-1); border:1.5px solid var(--hair-strong);background:#fff;color:var(--ink); font-size:1.0625rem;line-height:1.4;outline:none;-webkit-appearance:none;appearance:none; transition:border-color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out); } .input::placeholder,.textarea::placeholder{color:#857F76;opacity:1} .input:hover,.textarea:hover,.select:hover{border-color:rgba(38,35,31,.45)} .input:focus,.textarea:focus,.select:focus{border-color:var(--clay);box-shadow:0 0 0 4px var(--clay-glow)} .textarea{min-height:120px;padding:14px 16px;resize:vertical} .select{ padding-right:44px;cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 24px) 50%, calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat; } .field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:var(--danger);box-shadow:0 0 0 4px rgba(176,65,46,.14)} .check{display:flex;align-items:flex-start;gap:14px;cursor:pointer;font-size:var(--fs-small);line-height:1.5;position:relative;min-height:44px;padding-top:10px} .check input{position:absolute;opacity:0;width:24px;height:24px;margin:0;top:10px;left:0;cursor:pointer} .check__box{ flex:none;position:relative;width:24px;height:24px;margin-top:-1px;border-radius:5px; border:1.5px solid var(--hair-strong);background:#fff; transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease; } .check__box::after{ content:"";position:absolute;left:7.5px;top:3px;width:6px;height:12px; border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.3);opacity:0; transition:transform var(--dur-2) var(--ease-spring), opacity var(--dur-1) ease; } .check input:checked + .check__box{background:var(--clay);border-color:var(--clay)} .check input:checked + .check__box::after{opacity:1;transform:rotate(45deg) scale(1)} .check input:focus-visible + .check__box{outline:3px solid var(--focus);outline-offset:3px} .check a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong)} .field.is-invalid .check__box,.check.is-invalid .check__box{border-color:var(--danger)} .stepper{ display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-1); border:1.5px solid var(--line-strong);background:var(--surface); } .stepper__btn{ width:44px;height:44px;border-radius:4px;display:grid;place-items:center;color:var(--fg);font-size:1.25rem;font-weight:600; transition:background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out); } .stepper__btn:hover{background:var(--hover-tint)} .stepper__btn:active{transform:scale(.92)} .stepper__btn:disabled{opacity:.35} .stepper__value{min-width:5ch;text-align:center;font-weight:700;font-size:1.0625rem;font-variant-numeric:tabular-nums} /* ---------- бейдж, заметка ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:4px; background:var(--table-2);color:var(--ink);font-family:var(--font-mono);font-size:.6875rem;font-weight:500; letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap; } .badge--clay{background:var(--clay-soft);color:var(--clay-ink)} .badge--ok{background:#E2EDE3;color:#2F5E3B} .note{padding:14px 18px;border-radius:var(--r-1);background:var(--clay-soft);color:var(--ink);font-size:var(--fs-small);line-height:1.55} /* ---------- фокус, доступность ---------- */ :focus{outline:none} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px} .chip:focus-visible{border-radius:var(--r-pill)} .visually-hidden,.sr-only{ position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important; overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important; } .skip-link{ position:fixed;left:var(--pad-x);top:12px;z-index:calc(var(--z-overlay) + 10); padding:14px 22px;border-radius:var(--r-1);background:var(--clay);color:#fff; font-weight:700;text-decoration:none; transform:translateY(calc(-100% - 24px));transition:transform var(--dur-2) var(--ease-out); } .skip-link:focus,.skip-link:focus-visible{transform:none;box-shadow:var(--shadow-lift)} /* ---------- reveal ---------- data-reveal="up|fade|lay" · data-reveal-stagger="ms" у родителя. «lay» — образец «кладут на стол»: опускается сверху с лёгким поворотом и тенью. */ html.js [data-reveal]:not(.is-revealed){opacity:0;transform:translate3d(0,24px,0)} html.js [data-reveal="fade"]:not(.is-revealed){transform:none} html.js [data-reveal="lay"]:not(.is-revealed){transform:perspective(1000px) translate3d(-10px,-18px,60px) rotate(-2deg)} html.js [data-reveal]{ transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay:var(--rv-delay, 0ms); } html.js [data-reveal="lay"]{transition-timing-function:var(--ease-out), var(--ease-drop);transition-duration:var(--dur-3), 820ms} html.js [data-reveal].is-revealed{opacity:1;transform:none} /* ---------- черновик (?draft): плейсхолдеры ---------- */ html.is-draft [data-placeholder]{outline:1.5px dashed var(--danger);outline-offset:2px} /* до загрузки стилей — без переходов */ html.js:not(.is-loaded) *,html.js:not(.is-loaded) *::before,html.js:not(.is-loaded) *::after{transition:none !important} /* скриншот-режим */ html.is-shot [data-reveal]{opacity:1 !important;transform:none !important} html.is-shot *,html.is-shot *::before,html.is-shot *::after{transition-duration:0s !important;transition-delay:0s !important} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important; } html.js [data-reveal]:not(.is-revealed){opacity:1;transform:none} } @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } /* ---------- печать ---------- */ @media print{ .site-header,.mobilebar{display:none !important} [data-reveal]{opacity:1 !important;transform:none !important} body{background:#fff} } /* ==== 01-materials.css ==== */ /* ========================================================================== Материалы «Стол дизайнера» — СГЕНЕРИРОВАНО tools/gen_materials.py, правьте генератор. .mat — поверхность образца. Цвет — --m, торец (толщина в 3D) — --m-edge. Мозаика/зеллидж: шов = фон .mat, плитки = ::before с маской. Глянец = ::after. ========================================================================== */ .mat{position:relative;overflow:hidden;background-color:var(--m, #ddd);isolation:isolate} .mat::before,.mat::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit} .mat::before{z-index:0} .mat::after{z-index:1;box-shadow:inset 0 0 0 .5px rgba(38,35,31,.14), inset 1px 1px 0 rgba(255,255,255,.28)} .mat--gloss::after{ background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%); } /* свотч: маленький кружок/квадрат материала в списках */ .swatch{display:inline-block;width:22px;height:22px;border-radius:3px;flex:none;box-shadow:var(--shadow-sample)} .mat--terrazzo-sage{--m:#9DAA9C;--m-edge:#C9C4B8;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpolygon fill='%23F2EFE7' points='88,144 90,144 91,146 87,147'/%3E%3Cpolygon fill='%237C3E2A' points='35,155 33,152 35,150 38,151 39,154 37,155'/%3E%3Cpolygon fill='%237C3E2A' points='140,-11 142,-6 136,-6 136,-11'/%3E%3Cpolygon fill='%237C3E2A' points='140,229 142,234 136,234 136,229'/%3E%3Cpolygon fill='%23F2EFE7' points='142,139 141,142 140,141 140,139'/%3E%3Cpolygon fill='%2346503F' points='172,49 174,51 170,52 170,49'/%3E%3Cpolygon fill='%23F2EFE7' points='185,210 184,210 183,209 185,208'/%3E%3Cpolygon fill='%23F2EFE7' points='144,9 143,8 144,7 145,8'/%3E%3Cpolygon fill='%23F2EFE7' points='144,249 143,248 144,247 145,248'/%3E%3Cpolygon fill='%23F2EFE7' points='123,153 126,154 126,156 124,156'/%3E%3Cpolygon fill='%23C4CCBE' points='131,3 131,1 133,1 133,5'/%3E%3Cpolygon fill='%23C4CCBE' points='131,243 131,241 133,241 133,245'/%3E%3Cpolygon fill='%23F2EFE7' points='179,4 178,8 175,6 175,2'/%3E%3Cpolygon fill='%23F2EFE7' points='179,244 178,248 175,246 175,242'/%3E%3Cpolygon fill='%2346503F' points='190,24 190,25 188,26 188,25'/%3E%3Cpolygon fill='%237C3E2A' points='143,227 145,228 144,229 143,228'/%3E%3Cpolygon fill='%2346503F' points='231,74 231,76 230,77 229,75'/%3E%3Cpolygon fill='%237C3E2A' points='107,155 109,151 115,148 115,154 111,158'/%3E%3Cpolygon fill='%23F2EFE7' points='205,158 203,163 199,161 199,160 199,156 201,155'/%3E%3Cpolygon fill='%237C3E2A' points='115,29 115,28 116,29 116,30'/%3E%3Cpolygon fill='%237C3E2A' points='12,52 17,48 19,55 15,57'/%3E%3Cpolygon fill='%2346503F' points='64,64 65,64 66,64 65,65'/%3E%3Cpolygon fill='%23C4CCBE' points='24,123 18,124 15,119 21,117 25,117'/%3E%3Cpolygon fill='%2346503F' points='9,109 12,108 12,112 9,111'/%3E%3Cpolygon fill='%23C4CCBE' points='4,54 3,53 4,51 6,53'/%3E%3Cpolygon fill='%23C4CCBE' points='244,54 243,53 244,51 246,53'/%3E%3Cpolygon fill='%2346503F' points='166,224 167,225 166,226 164,225'/%3E%3Cpolygon fill='%237C3E2A' points='92,126 94,126 94,127 93,128'/%3E%3Cpolygon fill='%2346503F' points='73,21 72,23 71,22 72,20'/%3E%3Cpolygon fill='%23F2EFE7' points='-2,155 -1,154 1,155 0,156'/%3E%3Cpolygon fill='%23F2EFE7' points='238,155 239,154 241,155 240,156'/%3E%3Cpolygon fill='%23F2EFE7' points='201,-14 207,-11 208,-3 202,-4 195,-9'/%3E%3Cpolygon fill='%23F2EFE7' points='201,226 207,229 208,237 202,236 195,231'/%3E%3Cpolygon fill='%237C3E2A' points='173,46 171,45 173,43 174,45'/%3E%3Cpolygon fill='%23F2EFE7' points='139,70 136,63 141,60 144,67'/%3E%3Cpolygon fill='%2346503F' points='46,138 50,137 53,137 52,140 51,143 46,141'/%3E%3Cpolygon fill='%2346503F' points='46,64 45,62 45,61 47,61'/%3E%3Cpolygon fill='%23F2EFE7' points='199,71 199,70 201,69 201,71'/%3E%3Cpolygon fill='%23C4CCBE' points='130,30 129,28 130,27 132,29'/%3E%3Cpolygon fill='%2346503F' points='162,156 163,158 162,158 161,157'/%3E%3Cpolygon fill='%2346503F' points='135,41 139,43 139,44 135,47 134,45 134,43'/%3E%3Cpolygon fill='%237C3E2A' points='170,21 172,26 170,31 166,27'/%3E%3Cpolygon fill='%23F2EFE7' points='82,80 82,76 86,76 88,81 84,82'/%3E%3Cpolygon fill='%2346503F' points='163,93 160,96 159,94 160,91'/%3E%3Cpolygon fill='%23F2EFE7' points='201,107 202,106 203,106 203,108'/%3E%3Cpolygon fill='%2346503F' points='46,153 45,153 45,152 46,151'/%3E%3Cpolygon fill='%23C4CCBE' points='31,62 30,70 28,73 23,73 23,65 27,61'/%3E%3Cpolygon fill='%23F2EFE7' points='148,227 145,226 140,226 140,221 145,218 149,221'/%3E%3Cpolygon fill='%23F2EFE7' points='17,206 14,205 16,203 17,204'/%3E%3Cpolygon fill='%2346503F' points='88,96 87,98 86,97 86,95'/%3E%3Cpolygon fill='%237C3E2A' points='32,147 32,144 35,145 35,147 34,149'/%3E%3Cpolygon fill='%23F2EFE7' points='113,39 114,38 115,40 113,41'/%3E%3Cpolygon fill='%23F2EFE7' points='63,195 65,195 64,196 63,196'/%3E%3Cpolygon fill='%23F2EFE7' points='14,156 14,158 12,158 12,156'/%3E%3Cpolygon fill='%237C3E2A' points='25,73 17,77 14,71 21,63 28,67'/%3E%3Cpolygon fill='%23F2EFE7' points='54,187 55,185 56,187 55,188'/%3E%3Cpolygon fill='%2346503F' points='111,181 113,182 112,183 111,183'/%3E%3Cpolygon fill='%2346503F' points='88,18 88,17 90,16 89,18'/%3E%3Cpolygon fill='%23F2EFE7' points='140,6 138,2 142,1 143,4'/%3E%3Cpolygon fill='%23F2EFE7' points='140,246 138,242 142,241 143,244'/%3E%3Cpolygon fill='%237C3E2A' points='12,194 10,195 9,195 7,193 9,191 12,192'/%3E%3Cpolygon fill='%237C3E2A' points='26,200 28,199 27,201 26,202'/%3E%3Cpolygon fill='%23F2EFE7' points='176,100 178,100 178,103 176,103'/%3E%3Cpolygon fill='%23F2EFE7' points='171,205 175,203 182,209 179,214 173,217 170,210'/%3E%3Cpolygon fill='%23C4CCBE' points='23,175 22,173 23,172 24,174'/%3E%3Cpolygon fill='%2346503F' points='24,73 24,71 26,71 25,73'/%3E%3Cpolygon fill='%23F2EFE7' points='110,126 111,125 112,127 111,127'/%3E%3Cpolygon fill='%2346503F' points='31,127 32,126 33,128 31,129'/%3E%3Cpolygon fill='%23F2EFE7' points='3,105 2,104 4,102 4,104'/%3E%3Cpolygon fill='%23F2EFE7' points='243,105 242,104 244,102 244,104'/%3E%3Cpolygon fill='%23F2EFE7' points='152,162 152,163 149,163 150,161'/%3E%3Cpolygon fill='%23F2EFE7' points='5,154 5,156 3,155 3,153'/%3E%3Cpolygon fill='%23F2EFE7' points='245,154 245,156 243,155 243,153'/%3E%3Cpolygon fill='%23F2EFE7' points='163,-2 164,-3 166,-2 164,-1'/%3E%3Cpolygon fill='%23F2EFE7' points='163,238 164,237 166,238 164,239'/%3E%3Cpolygon fill='%237C3E2A' points='205,198 205,200 203,199 204,197'/%3E%3Cpolygon fill='%23F2EFE7' points='87,125 87,121 89,122 91,123 92,125 89,125'/%3E%3Cpolygon fill='%237C3E2A' points='218,119 217,120 214,120 216,117'/%3E%3Cpolygon fill='%23C4CCBE' points='103,-2 100,-2 101,-7 105,-7 106,-2'/%3E%3Cpolygon fill='%23C4CCBE' points='103,238 100,238 101,233 105,233 106,238'/%3E%3Cpolygon fill='%23F2EFE7' points='182,44 181,43 182,41 183,42'/%3E%3Cpolygon fill='%23C4CCBE' points='33,36 31,36 31,33 32,34'/%3E%3Cpolygon fill='%23F2EFE7' points='110,169 115,163 120,164 121,170 116,174'/%3E%3Cpolygon fill='%2346503F' points='179,181 178,179 180,178 181,179'/%3E%3Cpolygon fill='%23F2EFE7' points='40,30 38,31 36,31 36,29 38,27'/%3E%3Cpolygon fill='%23F2EFE7' points='88,145 86,145 85,144 86,143'/%3E%3Cpolygon fill='%2346503F' points='156,67 155,69 154,68 155,66'/%3E%3Cpolygon fill='%23F2EFE7' points='205,187 202,188 202,186 204,185'/%3E%3Cpolygon fill='%2346503F' points='84,75 85,71 86,70 88,70 91,72 88,75'/%3E%3Cpolygon fill='%23F2EFE7' points='175,76 176,74 177,75 176,77'/%3E%3Cpolygon fill='%23F2EFE7' points='75,133 73,134 73,132 75,132'/%3E%3Cpolygon fill='%23F2EFE7' points='153,140 153,142 152,141 153,139'/%3E%3Cpolygon fill='%23F2EFE7' points='81,217 82,221 77,223 75,221 75,218 79,215'/%3E%3Cpolygon fill='%237C3E2A' points='56,112 56,114 55,113 55,112'/%3E%3Cpolygon fill='%23F2EFE7' points='150,83 150,86 149,87 147,85'/%3E%3Cpolygon fill='%2346503F' points='198,226 197,226 196,225 198,224'/%3E%3Cpolygon fill='%2346503F' points='97,94 95,94 96,93 97,93'/%3E%3C/svg%3E") 0 0/240px 240px, var(--noise),#9DAA9C} .mat--terrazzo-sand{--m:#E3DACB;--m-edge:#D8CFBF;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpolygon fill='%23B78B68' points='189,223 192,224 193,225 194,229 190,228 187,227'/%3E%3Cpolygon fill='%23FFFFFF' points='208,92 209,93 208,94 207,93'/%3E%3Cpolygon fill='%23FFFFFF' points='76,47 76,49 74,48 74,47'/%3E%3Cpolygon fill='%23CDBFA8' points='79,195 80,195 81,197 79,197'/%3E%3Cpolygon fill='%23FFFFFF' points='225,229 224,227 226,227 226,229'/%3E%3Cpolygon fill='%23CDBFA8' points='58,197 59,196 60,196 59,198'/%3E%3Cpolygon fill='%23B78B68' points='57,118 54,127 49,128 45,124 49,115'/%3E%3Cpolygon fill='%23FFFFFF' points='-4,129 -4,127 -3,128 -3,129'/%3E%3Cpolygon fill='%23FFFFFF' points='236,129 236,127 237,128 237,129'/%3E%3Cpolygon fill='%23B78B68' points='30,173 34,173 33,179 27,180'/%3E%3Cpolygon fill='%238C8579' points='107,123 104,116 106,111 110,109 114,118 113,122'/%3E%3Cpolygon fill='%23B78B68' points='14,192 14,190 17,189 17,192'/%3E%3Cpolygon fill='%238C8579' points='76,43 80,38 88,42 83,48'/%3E%3Cpolygon fill='%23FFFFFF' points='104,217 101,226 95,224 94,215'/%3E%3Cpolygon fill='%23B78B68' points='171,173 175,174 175,178 171,179'/%3E%3Cpolygon fill='%23FFFFFF' points='151,46 148,44 148,43 150,41 151,42 152,43'/%3E%3Cpolygon fill='%23FFFFFF' points='171,91 171,89 173,89 173,90'/%3E%3Cpolygon fill='%23FFFFFF' points='228,72 227,69 229,69 230,71'/%3E%3Cpolygon fill='%23FFFFFF' points='21,196 23,197 23,198 21,198'/%3E%3Cpolygon fill='%23CDBFA8' points='114,171 114,168 116,169 117,171'/%3E%3Cpolygon fill='%23FFFFFF' points='31,3 37,0 39,2 40,10 32,10 31,8'/%3E%3Cpolygon fill='%23FFFFFF' points='31,243 37,240 39,242 40,250 32,250 31,248'/%3E%3Cpolygon fill='%23CDBFA8' points='145,113 147,113 147,115 145,115'/%3E%3Cpolygon fill='%23B78B68' points='85,178 88,177 88,180 86,181'/%3E%3Cpolygon fill='%23B78B68' points='172,150 172,153 169,154 168,152 168,150'/%3E%3Cpolygon fill='%23B78B68' points='111,75 113,73 117,74 114,77'/%3E%3Cpolygon fill='%238C8579' points='157,9 157,5 158,2 162,6 163,10 158,10'/%3E%3Cpolygon fill='%238C8579' points='157,249 157,245 158,242 162,246 163,250 158,250'/%3E%3Cpolygon fill='%23FFFFFF' points='193,17 192,16 192,15 194,16'/%3E%3Cpolygon fill='%23FFFFFF' points='164,119 164,117 165,117 166,118'/%3E%3Cpolygon fill='%23B78B68' points='16,55 16,58 15,58 14,56'/%3E%3Cpolygon fill='%23FFFFFF' points='6,206 9,205 10,207 10,208 9,210 7,208'/%3E%3Cpolygon fill='%23FFFFFF' points='246,206 249,205 250,207 250,208 249,210 247,208'/%3E%3Cpolygon fill='%23FFFFFF' points='157,190 167,193 161,204 153,200'/%3E%3Cpolygon fill='%23FFFFFF' points='151,232 151,230 152,230 152,231'/%3E%3Cpolygon fill='%23B78B68' points='153,83 156,79 161,80 164,85 158,91'/%3E%3Cpolygon fill='%23FFFFFF' points='67,40 65,39 67,37 68,39'/%3E%3Cpolygon fill='%23B78B68' points='21,164 23,156 32,156 35,163 27,167'/%3E%3Cpolygon fill='%23FFFFFF' points='15,-2 16,-2 18,-2 17,0'/%3E%3Cpolygon fill='%23FFFFFF' points='15,238 16,238 18,238 17,240'/%3E%3Cpolygon fill='%23B78B68' points='38,6 40,5 42,6 43,10 41,11 39,11'/%3E%3Cpolygon fill='%23B78B68' points='38,246 40,245 42,246 43,250 41,251 39,251'/%3E%3Cpolygon fill='%23B78B68' points='211,230 208,229 209,226 213,227'/%3E%3Cpolygon fill='%23B78B68' points='48,9 48,4 48,0 56,0 56,6 54,8'/%3E%3Cpolygon fill='%23B78B68' points='48,249 48,244 48,240 56,240 56,246 54,248'/%3E%3Cpolygon fill='%238C8579' points='95,32 97,30 98,32 96,33'/%3E%3Cpolygon fill='%238C8579' points='208,215 210,208 216,211 213,216'/%3E%3Cpolygon fill='%238C8579' points='227,177 227,173 229,173 231,174 232,175 229,176'/%3E%3Cpolygon fill='%23FFFFFF' points='203,103 202,109 196,108 191,102 199,100'/%3E%3Cpolygon fill='%23B78B68' points='171,107 171,108 169,108 170,106'/%3E%3Cpolygon fill='%23CDBFA8' points='-6,144 -8,145 -9,142 -6,141'/%3E%3Cpolygon fill='%23CDBFA8' points='234,144 232,145 231,142 234,141'/%3E%3Cpolygon fill='%23FFFFFF' points='65,48 67,47 68,49 66,49'/%3E%3Cpolygon fill='%23B78B68' points='33,200 34,198 35,200 34,201'/%3E%3Cpolygon fill='%238C8579' points='146,188 154,189 155,193 148,197 145,192'/%3E%3Cpolygon fill='%238C8579' points='190,139 190,140 188,139 189,138'/%3E%3Cpolygon fill='%23FFFFFF' points='187,146 186,147 185,147 185,146'/%3E%3Cpolygon fill='%23CDBFA8' points='86,192 85,193 83,193 84,191'/%3E%3Cpolygon fill='%23CDBFA8' points='94,179 93,181 91,183 88,181 89,179 90,178'/%3E%3Cpolygon fill='%23B78B68' points='43,157 34,151 40,147 45,151'/%3E%3Cpolygon fill='%238C8579' points='68,145 68,146 66,145 67,144'/%3E%3Cpolygon fill='%23B78B68' points='176,16 174,17 171,14 176,12 179,14'/%3E%3Cpolygon fill='%23FFFFFF' points='24,79 29,78 30,82 26,84 23,82'/%3E%3Cpolygon fill='%23FFFFFF' points='15,50 15,49 16,49 16,50'/%3E%3Cpolygon fill='%23B78B68' points='165,119 164,121 163,119 164,118'/%3E%3Cpolygon fill='%238C8579' points='90,66 93,65 95,72 92,74 87,70'/%3E%3Cpolygon fill='%238C8579' points='-9,134 -8,132 -7,132 -7,134'/%3E%3Cpolygon fill='%238C8579' points='231,134 232,132 233,132 233,134'/%3E%3Cpolygon fill='%23FFFFFF' points='7,130 10,136 6,139 1,134 4,131'/%3E%3Cpolygon fill='%23FFFFFF' points='247,130 250,136 246,139 241,134 244,131'/%3E%3Cpolygon fill='%23FFFFFF' points='186,119 186,121 185,121 184,119'/%3E%3Cpolygon fill='%238C8579' points='216,2 217,4 215,4 214,3'/%3E%3Cpolygon fill='%238C8579' points='216,242 217,244 215,244 214,243'/%3E%3Cpolygon fill='%23FFFFFF' points='87,-1 88,-1 88,1 87,2'/%3E%3Cpolygon fill='%23FFFFFF' points='87,239 88,239 88,241 87,242'/%3E%3Cpolygon fill='%238C8579' points='75,111 76,109 77,110 77,112'/%3E%3Cpolygon fill='%23FFFFFF' points='71,215 71,216 69,216 70,214'/%3E%3Cpolygon fill='%238C8579' points='32,-1 38,4 33,10 27,5'/%3E%3Cpolygon fill='%238C8579' points='32,239 38,244 33,250 27,245'/%3E%3Cpolygon fill='%238C8579' points='120,10 119,8 121,8 121,10'/%3E%3Cpolygon fill='%238C8579' points='232,-8 232,-1 229,3 223,0 226,-8'/%3E%3Cpolygon fill='%238C8579' points='232,232 232,239 229,243 223,240 226,232'/%3E%3Cpolygon fill='%23FFFFFF' points='14,0 16,0 16,2 15,3'/%3E%3Cpolygon fill='%23FFFFFF' points='14,240 16,240 16,242 15,243'/%3E%3Cpolygon fill='%23B78B68' points='31,60 29,62 28,60 30,59'/%3E%3Cpolygon fill='%23B78B68' points='218,87 215,87 216,84 218,84'/%3E%3Cpolygon fill='%23B78B68' points='138,127 140,128 139,130 137,129'/%3E%3Cpolygon fill='%238C8579' points='162,61 169,61 167,72 161,69 158,65'/%3E%3Cpolygon fill='%23CDBFA8' points='22,85 21,85 20,84 22,84'/%3E%3Cpolygon fill='%23B78B68' points='31,63 33,61 38,62 40,67 34,69'/%3E%3Cpolygon fill='%238C8579' points='118,172 116,172 116,169 118,169'/%3E%3Cpolygon fill='%238C8579' points='41,78 43,81 41,82 40,80'/%3E%3Cpolygon fill='%23FFFFFF' points='10,22 10,23 10,24 8,23'/%3E%3Cpolygon fill='%238C8579' points='86,19 86,17 88,17 88,19'/%3E%3Cpolygon fill='%23FFFFFF' points='198,9 198,10 196,11 196,8'/%3E%3Cpolygon fill='%23FFFFFF' points='158,71 159,76 155,78 149,75 150,73 155,68'/%3E%3Cpolygon fill='%23FFFFFF' points='30,34 40,40 33,46 25,40'/%3E%3Cpolygon fill='%238C8579' points='135,50 132,52 131,49 134,48'/%3E%3Cpolygon fill='%23FFFFFF' points='71,87 72,89 70,90 69,88'/%3E%3Cpolygon fill='%23FFFFFF' points='137,110 141,108 145,107 146,111 143,114 141,113'/%3E%3C/svg%3E") 0 0/240px 240px, var(--noise),#E3DACB} .mat--stone-grey{--m:#8E8A83;--m-edge:#A8A399;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpolygon fill='%236A6760' points='35,208 34,209 32,208 33,206'/%3E%3Cpolygon fill='%236A6760' points='40,61 36,60 36,54 40,56'/%3E%3Cpolygon fill='%23B5B1A8' points='212,187 212,183 217,182 215,188'/%3E%3Cpolygon fill='%23B5B1A8' points='207,-6 203,-7 201,-10 205,-11'/%3E%3Cpolygon fill='%23B5B1A8' points='207,234 203,233 201,230 205,229'/%3E%3Cpolygon fill='%236A6760' points='102,92 107,95 105,97 99,102 95,97 98,93'/%3E%3Cpolygon fill='%23D6D2C9' points='216,38 218,37 219,39 218,41'/%3E%3Cpolygon fill='%23B5B1A8' points='48,226 48,227 48,228 47,227'/%3E%3Cpolygon fill='%23B5B1A8' points='12,91 14,90 15,92 13,94'/%3E%3Cpolygon fill='%236A6760' points='136,38 131,41 127,32 137,28 138,31'/%3E%3Cpolygon fill='%23B5B1A8' points='146,-7 146,-8 148,-9 148,-8'/%3E%3Cpolygon fill='%23B5B1A8' points='146,233 146,232 148,231 148,232'/%3E%3Cpolygon fill='%23D6D2C9' points='89,210 95,211 93,216 89,216'/%3E%3Cpolygon fill='%23D6D2C9' points='190,207 189,206 189,205 190,206'/%3E%3Cpolygon fill='%236A6760' points='138,104 139,102 142,104 142,107 140,107'/%3E%3Cpolygon fill='%236A6760' points='151,12 154,11 154,14 152,13'/%3E%3Cpolygon fill='%236A6760' points='165,98 162,99 161,96 164,95'/%3E%3Cpolygon fill='%23B5B1A8' points='76,112 77,111 78,111 77,112'/%3E%3Cpolygon fill='%234F4944' points='12,17 13,17 14,19 12,19'/%3E%3Cpolygon fill='%23D6D2C9' points='7,60 5,63 1,63 2,61 2,59 7,58'/%3E%3Cpolygon fill='%23D6D2C9' points='247,60 245,63 241,63 242,61 242,59 247,58'/%3E%3Cpolygon fill='%23D6D2C9' points='227,208 227,215 220,214 220,207 223,206'/%3E%3Cpolygon fill='%236A6760' points='136,107 135,105 137,104 139,108'/%3E%3Cpolygon fill='%23B5B1A8' points='229,138 234,141 236,147 230,149 225,146 224,143'/%3E%3Cpolygon fill='%23B5B1A8' points='18,2 18,4 15,3 16,1'/%3E%3Cpolygon fill='%23B5B1A8' points='18,242 18,244 15,243 16,241'/%3E%3Cpolygon fill='%23D6D2C9' points='32,167 31,165 34,164 33,166'/%3E%3Cpolygon fill='%23D6D2C9' points='115,206 116,207 115,209 114,208'/%3E%3Cpolygon fill='%23D6D2C9' points='145,130 145,132 143,132 143,130'/%3E%3Cpolygon fill='%23D6D2C9' points='47,165 48,163 49,164 49,166'/%3E%3Cpolygon fill='%236A6760' points='-7,132 -9,136 -11,133 -9,130'/%3E%3Cpolygon fill='%236A6760' points='233,132 231,136 229,133 231,130'/%3E%3Cpolygon fill='%236A6760' points='-7,38 -4,41 -6,44 -8,42'/%3E%3Cpolygon fill='%236A6760' points='233,38 236,41 234,44 232,42'/%3E%3Cpolygon fill='%23D6D2C9' points='111,168 110,166 112,165 113,167'/%3E%3Cpolygon fill='%23D6D2C9' points='201,7 199,10 198,8 199,6'/%3E%3Cpolygon fill='%23D6D2C9' points='201,247 199,250 198,248 199,246'/%3E%3Cpolygon fill='%23B5B1A8' points='184,203 186,203 186,204 185,205'/%3E%3Cpolygon fill='%23D6D2C9' points='70,2 72,3 71,4 70,3'/%3E%3Cpolygon fill='%23D6D2C9' points='70,242 72,243 71,244 70,243'/%3E%3Cpolygon fill='%234F4944' points='51,61 51,63 50,63 50,61'/%3E%3Cpolygon fill='%23B5B1A8' points='137,100 139,101 138,102 137,101'/%3E%3Cpolygon fill='%23B5B1A8' points='-6,100 -3,102 -5,103 -7,102'/%3E%3Cpolygon fill='%23B5B1A8' points='234,100 237,102 235,103 233,102'/%3E%3Cpolygon fill='%23D6D2C9' points='176,17 174,17 174,15 176,14'/%3E%3Cpolygon fill='%234F4944' points='145,56 147,57 147,60 144,58'/%3E%3Cpolygon fill='%234F4944' points='126,73 127,74 125,75 125,73'/%3E%3Cpolygon fill='%234F4944' points='204,13 206,12 208,15 206,15'/%3E%3Cpolygon fill='%234F4944' points='-4,116 -3,115 0,117 -1,120 -3,119'/%3E%3Cpolygon fill='%234F4944' points='236,116 237,115 240,117 239,120 237,119'/%3E%3Cpolygon fill='%23B5B1A8' points='127,106 127,109 122,112 120,107 119,101 123,103'/%3E%3Cpolygon fill='%236A6760' points='13,95 14,93 16,94 15,96'/%3E%3Cpolygon fill='%23B5B1A8' points='24,158 23,160 21,160 22,158'/%3E%3Cpolygon fill='%23B5B1A8' points='38,157 34,152 35,148 40,148 43,151'/%3E%3Cpolygon fill='%23B5B1A8' points='169,41 176,40 179,48 170,47'/%3E%3Cpolygon fill='%23B5B1A8' points='60,132 57,135 54,134 53,127 57,128 59,130'/%3E%3Cpolygon fill='%23B5B1A8' points='69,40 65,43 60,38 64,35'/%3E%3Cpolygon fill='%23D6D2C9' points='158,19 156,19 155,17 158,17'/%3E%3Cpolygon fill='%23B5B1A8' points='54,115 56,114 56,115 55,116'/%3E%3Cpolygon fill='%23D6D2C9' points='182,169 184,170 183,171 182,170'/%3E%3Cpolygon fill='%23B5B1A8' points='191,162 192,159 195,162 192,163'/%3E%3Cpolygon fill='%23B5B1A8' points='218,187 209,188 207,182 215,179 218,181'/%3E%3Cpolygon fill='%236A6760' points='87,18 84,20 81,16 84,15'/%3E%3Cpolygon fill='%236A6760' points='15,138 14,138 14,137 15,137'/%3E%3Cpolygon fill='%23B5B1A8' points='122,70 118,62 118,57 124,57 127,60 127,63'/%3E%3Cpolygon fill='%23D6D2C9' points='15,223 16,223 19,226 17,228 14,225'/%3E%3Cpolygon fill='%23B5B1A8' points='230,14 223,17 218,12 220,7 227,9'/%3E%3Cpolygon fill='%23D6D2C9' points='86,131 87,133 85,134 85,133'/%3E%3Cpolygon fill='%23B5B1A8' points='93,153 92,150 94,151 94,153'/%3E%3Cpolygon fill='%23D6D2C9' points='69,103 68,102 70,101 70,102'/%3E%3Cpolygon fill='%23B5B1A8' points='202,80 202,83 197,84 198,78'/%3E%3Cpolygon fill='%23B5B1A8' points='121,215 120,216 119,214 120,214'/%3E%3Cpolygon fill='%23D6D2C9' points='174,66 172,65 174,64 175,65'/%3E%3Cpolygon fill='%23D6D2C9' points='231,26 228,25 229,23 231,23 232,25'/%3E%3Cpolygon fill='%236A6760' points='160,128 164,130 162,132 160,131'/%3E%3Cpolygon fill='%23B5B1A8' points='33,167 33,159 47,161 41,169'/%3E%3Cpolygon fill='%23B5B1A8' points='22,132 21,133 20,134 20,132'/%3E%3Cpolygon fill='%236A6760' points='93,17 92,18 90,18 92,16'/%3E%3Cpolygon fill='%23B5B1A8' points='-2,13 -5,16 -9,11 -8,7 -1,9'/%3E%3Cpolygon fill='%23B5B1A8' points='238,13 235,16 231,11 232,7 239,9'/%3E%3Cpolygon fill='%23B5B1A8' points='77,91 73,86 81,81 83,89'/%3E%3Cpolygon fill='%236A6760' points='129,203 128,201 130,201 130,202'/%3E%3Cpolygon fill='%23B5B1A8' points='135,70 137,70 137,71 135,72'/%3E%3Cpolygon fill='%23B5B1A8' points='168,123 174,123 175,129 172,133 165,129'/%3E%3Cpolygon fill='%23B5B1A8' points='158,157 156,158 153,154 156,153'/%3E%3Cpolygon fill='%23D6D2C9' points='100,98 102,94 105,98 105,100 102,104 100,101'/%3E%3Cpolygon fill='%236A6760' points='17,97 17,96 18,96 18,97'/%3E%3Cpolygon fill='%23B5B1A8' points='120,103 121,108 117,113 114,109 115,104'/%3E%3Cpolygon fill='%23B5B1A8' points='100,-6 105,-5 107,1 100,3 97,1 98,-3'/%3E%3Cpolygon fill='%23B5B1A8' points='100,234 105,235 107,241 100,243 97,241 98,237'/%3E%3Cpolygon fill='%23B5B1A8' points='59,-7 59,-6 58,-5 57,-6'/%3E%3Cpolygon fill='%23B5B1A8' points='59,233 59,234 58,235 57,234'/%3E%3Cpolygon fill='%23D6D2C9' points='111,55 109,55 110,52 112,53'/%3E%3Cpolygon fill='%236A6760' points='144,132 146,133 147,135 144,137 142,134'/%3E%3Cpolygon fill='%236A6760' points='78,28 79,28 80,29 78,29'/%3E%3Cpolygon fill='%236A6760' points='163,216 165,216 165,218 163,219'/%3E%3Cpolygon fill='%23B5B1A8' points='99,220 102,219 102,221 100,222'/%3E%3Cpolygon fill='%236A6760' points='156,23 157,21 159,22 158,24'/%3E%3Cpolygon fill='%23B5B1A8' points='102,153 102,154 99,154 100,153'/%3E%3Cpolygon fill='%23B5B1A8' points='88,170 87,170 87,168 89,166 91,168 90,170'/%3E%3Cpolygon fill='%236A6760' points='136,7 138,6 138,9 137,9'/%3E%3Cpolygon fill='%236A6760' points='136,247 138,246 138,249 137,249'/%3E%3Cpolygon fill='%23B5B1A8' points='198,216 198,219 193,219 193,215 195,213'/%3E%3Cpolygon fill='%23D6D2C9' points='96,187 94,187 94,186 95,185'/%3E%3Cpolygon fill='%23B5B1A8' points='58,208 56,208 57,206 58,207'/%3E%3Cpolygon fill='%236A6760' points='199,149 204,153 204,159 195,156'/%3E%3Cpolygon fill='%23D6D2C9' points='215,28 216,29 214,30 213,28'/%3E%3Cpolygon fill='%23D6D2C9' points='125,43 125,46 122,46 122,43'/%3E%3Cpolygon fill='%23B5B1A8' points='23,88 25,89 24,91 23,91'/%3E%3Cpolygon fill='%236A6760' points='42,178 42,186 37,187 32,182 37,179'/%3E%3Cpolygon fill='%23D6D2C9' points='162,3 162,1 164,2 163,4'/%3E%3Cpolygon fill='%23D6D2C9' points='162,243 162,241 164,242 163,244'/%3E%3Cpolygon fill='%23B5B1A8' points='48,182 46,182 46,181 48,180'/%3E%3Cpolygon fill='%23B5B1A8' points='53,83 54,84 54,85 53,85'/%3E%3Cpolygon fill='%236A6760' points='85,99 83,99 83,96 86,96'/%3E%3C/svg%3E") 0 0/200px 200px, var(--noise),#8E8A83} .mat--concrete{--m:#BAB5AC;--m-edge:#C8C3B9;background-image:none;background:var(--noise), radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.18), transparent 70%),#BAB5AC} .mat--terracotta{--m:#B8653F;--m-edge:#9C5332;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpolygon fill='%23C97B55' points='162,201 166,203 167,206 162,205'/%3E%3Cpolygon fill='%23C97B55' points='2,1 -1,1 -2,-3 1,-3'/%3E%3Cpolygon fill='%23C97B55' points='2,241 -1,241 -2,237 1,237'/%3E%3Cpolygon fill='%23C97B55' points='242,1 239,1 238,-3 241,-3'/%3E%3Cpolygon fill='%23C97B55' points='242,241 239,241 238,237 241,237'/%3E%3Cpolygon fill='%23C97B55' points='129,-1 126,-4 131,-11 136,-8 135,-3 133,0'/%3E%3Cpolygon fill='%23C97B55' points='129,239 126,236 131,229 136,232 135,237 133,240'/%3E%3Cpolygon fill='%23C97B55' points='124,61 125,60 126,60 126,62'/%3E%3Cpolygon fill='%23C97B55' points='227,94 226,92 229,91 232,93 232,95 229,97'/%3E%3Cpolygon fill='%2398492B' points='157,215 159,216 158,218 156,217'/%3E%3Cpolygon fill='%23C97B55' points='190,132 190,134 188,134 188,132'/%3E%3Cpolygon fill='%2398492B' points='76,97 75,99 74,98 74,97'/%3E%3Cpolygon fill='%2398492B' points='198,55 196,54 197,52 199,53'/%3E%3Cpolygon fill='%2398492B' points='184,142 185,141 186,142 186,143'/%3E%3Cpolygon fill='%23C97B55' points='0,94 -2,95 -3,93 -2,92'/%3E%3Cpolygon fill='%23C97B55' points='240,94 238,95 237,93 238,92'/%3E%3Cpolygon fill='%23C97B55' points='23,117 24,117 25,119 23,119'/%3E%3Cpolygon fill='%23D99570' points='218,223 213,225 209,221 211,213 217,213 220,218'/%3E%3Cpolygon fill='%2398492B' points='219,27 217,31 212,29 213,23'/%3E%3Cpolygon fill='%23C97B55' points='127,66 125,67 125,64 126,65'/%3E%3Cpolygon fill='%23C97B55' points='94,94 92,94 92,93 95,93'/%3E%3Cpolygon fill='%237F3C22' points='38,200 39,201 37,202 36,200'/%3E%3Cpolygon fill='%23C97B55' points='119,123 112,123 111,116 118,115'/%3E%3Cpolygon fill='%2398492B' points='231,4 231,6 229,7 229,5'/%3E%3Cpolygon fill='%2398492B' points='231,244 231,246 229,247 229,245'/%3E%3Cpolygon fill='%2398492B' points='126,2 127,2 128,2 127,4'/%3E%3Cpolygon fill='%2398492B' points='126,242 127,242 128,242 127,244'/%3E%3Cpolygon fill='%23C97B55' points='222,190 228,194 228,201 220,197'/%3E%3Cpolygon fill='%2398492B' points='121,187 121,185 124,184 125,186 124,189'/%3E%3Cpolygon fill='%23D99570' points='17,115 18,113 20,114 19,116'/%3E%3Cpolygon fill='%23C97B55' points='79,71 78,73 77,72 78,71'/%3E%3Cpolygon fill='%23C97B55' points='52,38 51,40 49,38 51,37'/%3E%3Cpolygon fill='%23D99570' points='42,16 37,16 34,15 33,12 37,8 40,10'/%3E%3Cpolygon fill='%23D99570' points='203,20 201,22 201,20 202,19'/%3E%3Cpolygon fill='%23C97B55' points='132,37 126,37 128,31 135,28 136,34'/%3E%3Cpolygon fill='%23C97B55' points='125,59 124,59 125,58 126,58'/%3E%3Cpolygon fill='%2398492B' points='185,144 192,139 198,141 193,149'/%3E%3Cpolygon fill='%23C97B55' points='94,199 97,198 98,202 94,202'/%3E%3Cpolygon fill='%2398492B' points='43,59 44,57 47,57 45,59'/%3E%3Cpolygon fill='%23D99570' points='135,14 135,12 137,12 137,15'/%3E%3Cpolygon fill='%2398492B' points='212,31 210,33 208,32 210,31'/%3E%3Cpolygon fill='%23D99570' points='57,25 59,26 60,28 56,30 56,28'/%3E%3Cpolygon fill='%23D99570' points='42,9 49,14 46,21 37,20'/%3E%3Cpolygon fill='%23C97B55' points='45,135 42,137 41,134 43,133'/%3E%3Cpolygon fill='%2398492B' points='32,57 34,57 35,58 34,59'/%3E%3Cpolygon fill='%23C97B55' points='109,181 107,181 107,180 109,179'/%3E%3Cpolygon fill='%23C97B55' points='196,145 194,146 191,145 193,143'/%3E%3Cpolygon fill='%23D99570' points='18,215 15,215 15,213 18,213'/%3E%3Cpolygon fill='%23D99570' points='171,231 171,228 173,228 174,231'/%3E%3Cpolygon fill='%23C97B55' points='15,140 17,138 18,138 19,140 19,141 18,141'/%3E%3Cpolygon fill='%2398492B' points='72,153 74,152 75,155 73,155'/%3E%3Cpolygon fill='%23D99570' points='3,100 3,106 -1,105 -4,102 -2,100 2,99'/%3E%3Cpolygon fill='%23D99570' points='243,100 243,106 239,105 236,102 238,100 242,99'/%3E%3Cpolygon fill='%23C97B55' points='215,199 215,200 213,201 213,199'/%3E%3Cpolygon fill='%23C97B55' points='210,107 209,106 210,105 211,107'/%3E%3Cpolygon fill='%23C97B55' points='40,21 41,21 41,23 40,23'/%3E%3Cpolygon fill='%23C97B55' points='99,44 98,43 100,42 101,44'/%3E%3Cpolygon fill='%2398492B' points='138,99 139,98 141,100 139,100'/%3E%3Cpolygon fill='%23D99570' points='203,95 203,94 205,95 204,96'/%3E%3Cpolygon fill='%23C97B55' points='-8,85 -6,89 -6,94 -12,94 -14,88'/%3E%3Cpolygon fill='%23C97B55' points='232,85 234,89 234,94 228,94 226,88'/%3E%3Cpolygon fill='%23D99570' points='84,113 89,112 91,116 87,118'/%3E%3Cpolygon fill='%23D99570' points='100,43 98,41 99,40 100,41'/%3E%3Cpolygon fill='%2398492B' points='188,108 187,107 189,106 190,108'/%3E%3Cpolygon fill='%23D99570' points='89,184 89,186 87,187 86,185'/%3E%3Cpolygon fill='%2398492B' points='51,101 51,102 49,103 49,101'/%3E%3Cpolygon fill='%2398492B' points='218,228 219,231 218,232 217,231'/%3E%3Cpolygon fill='%23D99570' points='132,5 132,3 134,5 133,6'/%3E%3Cpolygon fill='%23D99570' points='132,245 132,243 134,245 133,246'/%3E%3Cpolygon fill='%23D99570' points='107,167 105,166 108,164 109,166'/%3E%3Cpolygon fill='%23C97B55' points='136,4 134,11 129,12 127,6 130,3'/%3E%3Cpolygon fill='%23C97B55' points='136,244 134,251 129,252 127,246 130,243'/%3E%3Cpolygon fill='%23D99570' points='222,148 221,150 219,149 221,148'/%3E%3Cpolygon fill='%2398492B' points='229,61 227,62 224,62 223,60 225,58 228,57'/%3E%3Cpolygon fill='%23D99570' points='151,36 151,35 153,34 153,36'/%3E%3Cpolygon fill='%23C97B55' points='139,179 140,177 141,179 140,179'/%3E%3Cpolygon fill='%23C97B55' points='221,167 219,168 218,167 218,164 220,163 223,165'/%3E%3Cpolygon fill='%23D99570' points='65,124 71,125 69,130 63,128'/%3E%3Cpolygon fill='%2398492B' points='31,211 32,213 30,214 29,212'/%3E%3Cpolygon fill='%23C97B55' points='168,211 170,211 170,213 169,213'/%3E%3Cpolygon fill='%237F3C22' points='10,230 10,229 12,230 11,232'/%3E%3Cpolygon fill='%237F3C22' points='79,29 81,29 81,30 80,31'/%3E%3Cpolygon fill='%23D99570' points='119,135 120,134 122,134 121,136'/%3E%3Cpolygon fill='%23C97B55' points='5,188 8,190 13,191 10,197 6,198 2,196'/%3E%3Cpolygon fill='%23C97B55' points='245,188 248,190 253,191 250,197 246,198 242,196'/%3E%3Cpolygon fill='%23D99570' points='138,204 136,203 139,203 138,204'/%3E%3Cpolygon fill='%2398492B' points='109,157 107,157 106,156 108,155'/%3E%3Cpolygon fill='%2398492B' points='130,24 128,27 126,23 127,21 129,22 131,23'/%3E%3Cpolygon fill='%23C97B55' points='124,13 119,14 119,8 124,6 127,8'/%3E%3Cpolygon fill='%23C97B55' points='121,29 122,29 122,30 121,30'/%3E%3Cpolygon fill='%23C97B55' points='72,201 71,196 73,196 75,200'/%3E%3Cpolygon fill='%23C97B55' points='45,-6 43,-5 39,-5 38,-9 41,-11'/%3E%3Cpolygon fill='%23C97B55' points='45,234 43,235 39,235 38,231 41,229'/%3E%3Cpolygon fill='%23C97B55' points='229,126 229,128 227,126 228,124'/%3E%3Cpolygon fill='%2398492B' points='217,40 224,40 225,46 218,45'/%3E%3Cpolygon fill='%23C97B55' points='86,25 84,22 85,18 89,19 91,22 88,26'/%3E%3Cpolygon fill='%23D99570' points='204,0 205,2 204,2 204,1'/%3E%3Cpolygon fill='%23D99570' points='204,240 205,242 204,242 204,241'/%3E%3Cpolygon fill='%23C97B55' points='136,159 136,157 138,157 138,159'/%3E%3Cpolygon fill='%2398492B' points='36,90 36,87 40,87 41,89 40,91'/%3E%3Cpolygon fill='%2398492B' points='148,7 146,6 147,5 148,5'/%3E%3Cpolygon fill='%2398492B' points='148,247 146,246 147,245 148,245'/%3E%3Cpolygon fill='%237F3C22' points='104,190 108,190 109,192 107,193 104,194 102,192'/%3E%3Cpolygon fill='%237F3C22' points='79,186 79,185 81,186 80,188'/%3E%3Cpolygon fill='%23D99570' points='99,6 99,5 100,4 101,6'/%3E%3Cpolygon fill='%23D99570' points='99,246 99,245 100,244 101,246'/%3E%3C/svg%3E") 0 0/240px 240px, var(--noise),#B8653F} .mat--marble{--m:#ECEBE8;--m-edge:#DEDBD4;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0035 .012' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .38 0 0 0 0 .40 -4.2 0 0 0 1.12'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E") center/300px 300px, radial-gradient(90% 70% at 20% 10%, #fff, transparent 70%),#ECEBE8} .mat--marble-grey{--m:#BDBCB8;--m-edge:#B2B0AA;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0035 .012' numOctaves='5' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .97 0 0 0 0 .96 -4.2 0 0 0 1.12'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E") 40px 20px/280px 280px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0035 .012' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .38 0 0 0 0 .40 -4.2 0 0 0 1.12'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E") 120px 60px/360px 360px, var(--noise),#BDBCB8} .mat--travertine{--m:#D9CAB2;--m-edge:#CDBDA4;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%237A5E3C'%3E%3Cellipse cx='42' cy='179' rx='2.6' ry='1.1' fill-opacity='0.3'/%3E%3Cellipse cx='206' cy='210' rx='2.2' ry='1.0' fill-opacity='0.3'/%3E%3Cellipse cx='0' cy='96' rx='2.4' ry='0.8' fill-opacity='0.5'/%3E%3Cellipse cx='60' cy='60' rx='0.9' ry='0.6' fill-opacity='0.5'/%3E%3Cellipse cx='227' cy='160' rx='0.9' ry='0.4' fill-opacity='0.4'/%3E%3Cellipse cx='30' cy='247' rx='1.8' ry='0.6' fill-opacity='0.5'/%3E%3Cellipse cx='32' cy='241' rx='2.1' ry='1.0' fill-opacity='0.4'/%3E%3Cellipse cx='126' cy='48' rx='0.9' ry='0.5' fill-opacity='0.3'/%3E%3Cellipse cx='202' cy='54' rx='3.5' ry='2.0' fill-opacity='0.5'/%3E%3Cellipse cx='198' cy='150' rx='2.8' ry='1.0' fill-opacity='0.4'/%3E%3Cellipse cx='215' cy='52' rx='3.4' ry='1.9' fill-opacity='0.4'/%3E%3Cellipse cx='94' cy='117' rx='1.9' ry='1.1' fill-opacity='0.4'/%3E%3Cellipse cx='6' cy='24' rx='2.8' ry='1.7' fill-opacity='0.4'/%3E%3Cellipse cx='127' cy='143' rx='2.9' ry='1.1' fill-opacity='0.4'/%3E%3Cellipse cx='144' cy='161' rx='1.3' ry='0.5' fill-opacity='0.4'/%3E%3Cellipse cx='241' cy='90' rx='2.5' ry='1.0' fill-opacity='0.3'/%3E%3Cellipse cx='17' cy='211' rx='3.0' ry='1.2' fill-opacity='0.5'/%3E%3Cellipse cx='175' cy='233' rx='3.5' ry='1.5' fill-opacity='0.5'/%3E%3Cellipse cx='249' cy='153' rx='3.3' ry='1.5' fill-opacity='0.4'/%3E%3Cellipse cx='64' cy='227' rx='1.3' ry='0.4' fill-opacity='0.5'/%3E%3Cellipse cx='201' cy='125' rx='3.1' ry='1.0' fill-opacity='0.3'/%3E%3Cellipse cx='75' cy='109' rx='1.3' ry='0.4' fill-opacity='0.4'/%3E%3Cellipse cx='233' cy='255' rx='2.9' ry='1.3' fill-opacity='0.3'/%3E%3Cellipse cx='249' cy='136' rx='2.8' ry='0.9' fill-opacity='0.3'/%3E%3Cellipse cx='217' cy='206' rx='3.3' ry='1.6' fill-opacity='0.4'/%3E%3Cellipse cx='151' cy='220' rx='1.7' ry='0.8' fill-opacity='0.3'/%3E%3Cellipse cx='199' cy='2' rx='2.7' ry='1.6' fill-opacity='0.3'/%3E%3Cellipse cx='154' cy='167' rx='3.2' ry='1.5' fill-opacity='0.3'/%3E%3Cellipse cx='105' cy='249' rx='3.3' ry='1.1' fill-opacity='0.3'/%3E%3Cellipse cx='24' cy='6' rx='2.1' ry='0.7' fill-opacity='0.5'/%3E%3Cellipse cx='170' cy='32' rx='2.3' ry='0.9' fill-opacity='0.4'/%3E%3Cellipse cx='57' cy='43' rx='1.3' ry='0.5' fill-opacity='0.5'/%3E%3Cellipse cx='143' cy='12' rx='2.8' ry='1.6' fill-opacity='0.5'/%3E%3Cellipse cx='205' cy='2' rx='2.1' ry='0.7' fill-opacity='0.5'/%3E%3Cellipse cx='45' cy='184' rx='1.5' ry='0.8' fill-opacity='0.3'/%3E%3Cellipse cx='10' cy='101' rx='1.7' ry='1.0' fill-opacity='0.3'/%3E%3Cellipse cx='130' cy='142' rx='3.5' ry='1.1' fill-opacity='0.4'/%3E%3Cellipse cx='132' cy='190' rx='3.5' ry='1.4' fill-opacity='0.5'/%3E%3Cellipse cx='136' cy='145' rx='1.0' ry='0.5' fill-opacity='0.5'/%3E%3Cellipse cx='92' cy='82' rx='3.6' ry='1.2' fill-opacity='0.3'/%3E%3Cellipse cx='19' cy='211' rx='2.9' ry='1.3' fill-opacity='0.4'/%3E%3Cellipse cx='5' cy='167' rx='2.0' ry='0.9' fill-opacity='0.4'/%3E%3Cellipse cx='104' cy='58' rx='0.9' ry='0.4' fill-opacity='0.3'/%3E%3Cellipse cx='183' cy='212' rx='2.8' ry='1.2' fill-opacity='0.3'/%3E%3Cellipse cx='100' cy='126' rx='2.6' ry='1.5' fill-opacity='0.3'/%3E%3Cellipse cx='124' cy='127' rx='2.8' ry='1.6' fill-opacity='0.5'/%3E%3Cellipse cx='162' cy='197' rx='2.7' ry='1.5' fill-opacity='0.5'/%3E%3Cellipse cx='177' cy='63' rx='3.4' ry='1.4' fill-opacity='0.4'/%3E%3Cellipse cx='214' cy='250' rx='3.6' ry='1.1' fill-opacity='0.3'/%3E%3Cellipse cx='81' cy='101' rx='1.2' ry='0.6' fill-opacity='0.3'/%3E%3Cellipse cx='78' cy='245' rx='2.9' ry='1.3' fill-opacity='0.3'/%3E%3Cellipse cx='248' cy='183' rx='1.4' ry='0.6' fill-opacity='0.4'/%3E%3Cellipse cx='177' cy='67' rx='3.5' ry='1.4' fill-opacity='0.3'/%3E%3Cellipse cx='219' cy='39' rx='2.7' ry='1.0' fill-opacity='0.4'/%3E%3Cellipse cx='72' cy='98' rx='3.4' ry='1.5' fill-opacity='0.4'/%3E%3Cellipse cx='160' cy='72' rx='1.3' ry='0.5' fill-opacity='0.3'/%3E%3Cellipse cx='48' cy='249' rx='0.9' ry='0.5' fill-opacity='0.5'/%3E%3Cellipse cx='183' cy='4' rx='2.2' ry='0.7' fill-opacity='0.4'/%3E%3Cellipse cx='182' cy='62' rx='0.8' ry='0.4' fill-opacity='0.3'/%3E%3Cellipse cx='80' cy='118' rx='3.3' ry='1.4' fill-opacity='0.3'/%3E%3Cellipse cx='205' cy='213' rx='2.3' ry='0.7' fill-opacity='0.3'/%3E%3Cellipse cx='104' cy='143' rx='1.4' ry='0.8' fill-opacity='0.5'/%3E%3Cellipse cx='240' cy='229' rx='0.8' ry='0.4' fill-opacity='0.3'/%3E%3Cellipse cx='233' cy='194' rx='2.9' ry='1.0' fill-opacity='0.3'/%3E%3Cellipse cx='211' cy='157' rx='2.5' ry='1.1' fill-opacity='0.5'/%3E%3Cellipse cx='87' cy='70' rx='1.8' ry='0.7' fill-opacity='0.4'/%3E%3Cellipse cx='231' cy='18' rx='1.0' ry='0.4' fill-opacity='0.5'/%3E%3Cellipse cx='49' cy='70' rx='1.0' ry='0.3' fill-opacity='0.4'/%3E%3Cellipse cx='176' cy='169' rx='1.2' ry='0.4' fill-opacity='0.5'/%3E%3Cellipse cx='140' cy='106' rx='2.7' ry='1.4' fill-opacity='0.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 260px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='300'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .09' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .33 2.2 0 0 0 -.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") center/260px 160px, var(--noise),#D9CAB2} .mat--oak{--m:#C9A57E;--m-edge:#B38D63;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='600'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22 .004' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .18 0 0 0 0 .09 2.6 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") center/180px 420px, linear-gradient(90deg, rgba(255,255,255,.08), transparent 40%, rgba(0,0,0,.05)), var(--noise),#C9A57E} .mat--walnut{--m:#6E4A33;--m-edge:#5A3B28;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='600'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22 .004' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .18 0 0 0 0 .09 2.6 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") center/140px 380px, linear-gradient(90deg, rgba(255,255,255,.06), transparent 50%), var(--noise),#6E4A33} .mat--olive{--m:#8B9178;--m-edge:#7A806A;background-image:none;background:var(--noise), linear-gradient(135deg, rgba(255,255,255,.08), transparent 60%),#8B9178} .mat--ribbed{--m:#DCD3C5;--m-edge:#CFC5B5;background-image:none;background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3px, rgba(255,255,255,0) 6px, rgba(90,75,55,.10) 12px, rgba(90,75,55,.20) 15px, rgba(255,255,255,.55) 18px), var(--noise),#DCD3C5} .mat--encaustic{--m:#ECE2CF;--m-edge:#D5C8B2;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23ECE2CF'/%3E%3Cg fill='%238FA08C'%3E%3Ccircle cx='0' cy='0' r='13'/%3E%3Ccircle cx='80' cy='0' r='13'/%3E%3Ccircle cx='0' cy='80' r='13'/%3E%3Ccircle cx='80' cy='80' r='13'/%3E%3C/g%3E%3Cpath d='M40 14 47 33 66 40 47 47 40 66 33 47 14 40 33 33Z' fill='%23C06A45'/%3E%3Ccircle cx='40' cy='40' r='5.5' fill='%23ECE2CF'/%3E%3Cpath d='M40 0V9M40 71V80M0 40H9M71 40H80' stroke='%23C06A45' stroke-width='3'/%3E%3Crect x='.5' y='.5' width='79' height='79' fill='none' stroke='%23D8CCB6'/%3E%3C/svg%3E") 0 0/64px 64px, var(--noise),#ECE2CF} .mat--gloss-rust{--m:#8E4133;--m-edge:#C7A38E;background-image:none;background:var(--noise),#8E4133} .mat--gloss-rust::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--gloss-slate{--m:#3B4550;--m-edge:#C9C3B8;background-image:none;background:var(--noise),#3B4550} .mat--gloss-slate::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--gloss-sky{--m:#BFD0DA;--m-edge:#D6D0C6;background-image:none;background:var(--noise),#BFD0DA} .mat--gloss-sky::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--gloss-blush{--m:#E7D8D0;--m-edge:#D8CFC4;background-image:none;background:var(--noise),#E7D8D0} .mat--gloss-blush::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--gloss-mint{--m:#AFC6C0;--m-edge:#D3CEC4;background-image:none;background:var(--noise),#AFC6C0} .mat--gloss-mint::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--gloss-white{--m:#F1F0EC;--m-edge:#D8D3CA;background-image:none;background:var(--noise),#F1F0EC} .mat--gloss-white::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--gloss-mustard{--m:#D9A536;--m-edge:#CFAE84;background-image:none;background:var(--noise),#D9A536} .mat--gloss-mustard::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--hex-teal{--m:#D5D1C9;--m-edge:#CFCAC0;background-image:none;background:var(--noise),#D5D1C9} .mat--hex-teal::before{background:radial-gradient(60% 50% at 30% 30%, rgba(255,255,255,.16), transparent 70%) 0 0/88px 88px,radial-gradient(50% 60% at 70% 60%, rgba(0,0,0,.12), transparent 70%) 0 0/132px 132px,radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.10), transparent 70%) 22px 0/44px 44px,radial-gradient(45% 45% at 50% 50%, rgba(0,0,0,.08), transparent 70%) 0 22px/44px 66px,linear-gradient(#33596B,#33596B);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpolygon points='13.00,1.60 24.60,8.30 24.60,21.70 13.00,28.40 1.40,21.70 1.40,8.30' fill='%23000'/%3E%3Cpolygon points='0.00,24.10 11.60,30.80 11.60,44.20 0.00,50.90 -11.60,44.20 -11.60,30.80' fill='%23000'/%3E%3Cpolygon points='26.00,24.10 37.60,30.80 37.60,44.20 26.00,50.90 14.40,44.20 14.40,30.80' fill='%23000'/%3E%3Cpolygon points='0.00,-20.90 11.60,-14.20 11.60,-0.80 0.00,5.90 -11.60,-0.80 -11.60,-14.20' fill='%23000'/%3E%3Cpolygon points='26.00,-20.90 37.60,-14.20 37.60,-0.80 26.00,5.90 14.40,-0.80 14.40,-14.20' fill='%23000'/%3E%3C/svg%3E") 0 0/26px 45px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpolygon points='13.00,1.60 24.60,8.30 24.60,21.70 13.00,28.40 1.40,21.70 1.40,8.30' fill='%23000'/%3E%3Cpolygon points='0.00,24.10 11.60,30.80 11.60,44.20 0.00,50.90 -11.60,44.20 -11.60,30.80' fill='%23000'/%3E%3Cpolygon points='26.00,24.10 37.60,30.80 37.60,44.20 26.00,50.90 14.40,44.20 14.40,30.80' fill='%23000'/%3E%3Cpolygon points='0.00,-20.90 11.60,-14.20 11.60,-0.80 0.00,5.90 -11.60,-0.80 -11.60,-14.20' fill='%23000'/%3E%3Cpolygon points='26.00,-20.90 37.60,-14.20 37.60,-0.80 26.00,5.90 14.40,-0.80 14.40,-14.20' fill='%23000'/%3E%3C/svg%3E") 0 0/26px 45px repeat;filter:drop-shadow(.6px .8px 0 rgba(38,35,31,.18))} .mat--hex-white{--m:#CBC6BD;--m-edge:#CFCAC0;background-image:none;background:var(--noise),#CBC6BD} .mat--hex-white::before{background:linear-gradient(#F2F0EB,#F2F0EB);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpolygon points='13.00,1.60 24.60,8.30 24.60,21.70 13.00,28.40 1.40,21.70 1.40,8.30' fill='%23000'/%3E%3Cpolygon points='0.00,24.10 11.60,30.80 11.60,44.20 0.00,50.90 -11.60,44.20 -11.60,30.80' fill='%23000'/%3E%3Cpolygon points='26.00,24.10 37.60,30.80 37.60,44.20 26.00,50.90 14.40,44.20 14.40,30.80' fill='%23000'/%3E%3Cpolygon points='0.00,-20.90 11.60,-14.20 11.60,-0.80 0.00,5.90 -11.60,-0.80 -11.60,-14.20' fill='%23000'/%3E%3Cpolygon points='26.00,-20.90 37.60,-14.20 37.60,-0.80 26.00,5.90 14.40,-0.80 14.40,-14.20' fill='%23000'/%3E%3C/svg%3E") 0 0/26px 45px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpolygon points='13.00,1.60 24.60,8.30 24.60,21.70 13.00,28.40 1.40,21.70 1.40,8.30' fill='%23000'/%3E%3Cpolygon points='0.00,24.10 11.60,30.80 11.60,44.20 0.00,50.90 -11.60,44.20 -11.60,30.80' fill='%23000'/%3E%3Cpolygon points='26.00,24.10 37.60,30.80 37.60,44.20 26.00,50.90 14.40,44.20 14.40,30.80' fill='%23000'/%3E%3Cpolygon points='0.00,-20.90 11.60,-14.20 11.60,-0.80 0.00,5.90 -11.60,-0.80 -11.60,-14.20' fill='%23000'/%3E%3Cpolygon points='26.00,-20.90 37.60,-14.20 37.60,-0.80 26.00,5.90 14.40,-0.80 14.40,-14.20' fill='%23000'/%3E%3C/svg%3E") 0 0/26px 45px repeat;filter:drop-shadow(.6px .8px 0 rgba(38,35,31,.18))} .mat--penny-white{--m:#C9C4BA;--m-edge:#CFCAC0;background-image:none;background:var(--noise),#C9C4BA} .mat--penny-white::before{background:linear-gradient(#F4F2EE,#F4F2EE);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34.64'%3E%3Ccircle cx='10' cy='0' r='8.7' fill='%23000'/%3E%3Ccircle cx='0' cy='17.32' r='8.7' fill='%23000'/%3E%3Ccircle cx='20' cy='17.32' r='8.7' fill='%23000'/%3E%3Ccircle cx='10' cy='34.64' r='8.7' fill='%23000'/%3E%3C/svg%3E") 0 0/20px 34.64px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34.64'%3E%3Ccircle cx='10' cy='0' r='8.7' fill='%23000'/%3E%3Ccircle cx='0' cy='17.32' r='8.7' fill='%23000'/%3E%3Ccircle cx='20' cy='17.32' r='8.7' fill='%23000'/%3E%3Ccircle cx='10' cy='34.64' r='8.7' fill='%23000'/%3E%3C/svg%3E") 0 0/20px 34.64px repeat;filter:drop-shadow(.6px .8px 0 rgba(38,35,31,.18))} .mat--metro-white{--m:#D2CDC4;--m-edge:#D5D0C6;background-image:none;background:var(--noise),#D2CDC4} .mat--metro-white::before{background:linear-gradient(#F3F1EC,#F3F1EC);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32'%3E%3Crect x='1' y='1' width='58' height='14' rx='2.2' fill='%23000'/%3E%3Crect x='-29' y='17' width='58' height='14' rx='2.2' fill='%23000'/%3E%3Crect x='31' y='17' width='58' height='14' rx='2.2' fill='%23000'/%3E%3C/svg%3E") 0 0/60px 32px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32'%3E%3Crect x='1' y='1' width='58' height='14' rx='2.2' fill='%23000'/%3E%3Crect x='-29' y='17' width='58' height='14' rx='2.2' fill='%23000'/%3E%3Crect x='31' y='17' width='58' height='14' rx='2.2' fill='%23000'/%3E%3C/svg%3E") 0 0/60px 32px repeat;filter:drop-shadow(.6px .8px 0 rgba(38,35,31,.18))} .mat--metro-white::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--zellige-aqua{--m:#DCD6CA;--m-edge:#CFC6B5;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cdefs%3E%3CradialGradient id='h' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.6' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(-1.0 22 22)' fill='%2358898c'%3E%3Crect x='1.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.7 22 66)' fill='%235d928a'%3E%3Crect x='1.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.2 22 110)' fill='%236da9a7'%3E%3Crect x='1.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.3 22 154)' fill='%2377b2bc'%3E%3Crect x='1.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.8 22 198)' fill='%23619298'%3E%3Crect x='1.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.9 66 22)' fill='%23659599'%3E%3Crect x='45.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 66 66)' fill='%23649f9f'%3E%3Crect x='45.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.8 66 110)' fill='%2378aea8'%3E%3Crect x='45.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 66 154)' fill='%2370aea7'%3E%3Crect x='45.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.9 66 198)' fill='%2365989a'%3E%3Crect x='45.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.5 110 22)' fill='%2380bcb9'%3E%3Crect x='89.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.1 110 66)' fill='%23649393'%3E%3Crect x='89.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.1 110 110)' fill='%23689494'%3E%3Crect x='89.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.8 110 154)' fill='%236e9ea1'%3E%3Crect x='89.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.2 110 198)' fill='%236e9ea2'%3E%3Crect x='89.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.9 154 22)' fill='%235c958a'%3E%3Crect x='133.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.0 154 66)' fill='%236a9e98'%3E%3Crect x='133.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.4 154 110)' fill='%2373adaf'%3E%3Crect x='133.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.5 154 154)' fill='%2359888e'%3E%3Crect x='133.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.4 154 198)' fill='%237eb4b9'%3E%3Crect x='133.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.9 198 22)' fill='%23629997'%3E%3Crect x='177.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.3 198 66)' fill='%235a9186'%3E%3Crect x='177.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.9 198 110)' fill='%235f9790'%3E%3Crect x='177.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.3 198 154)' fill='%236d9fa2'%3E%3Crect x='177.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.1 198 198)' fill='%2370a2a4'%3E%3Crect x='177.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3C/svg%3E") 0 0/176px 176px, var(--noise),#DCD6CA} .mat--zellige-aqua::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--zellige-blue{--m:#DCD6CA;--m-edge:#CFC6B5;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cdefs%3E%3CradialGradient id='h' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.6' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(0.9 22 22)' fill='%232b618c'%3E%3Crect x='1.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.1 22 66)' fill='%232f5982'%3E%3Crect x='1.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.7 22 110)' fill='%23315d86'%3E%3Crect x='1.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.1 22 154)' fill='%23325f83'%3E%3Crect x='1.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.9 22 198)' fill='%23254e74'%3E%3Crect x='1.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.1 66 22)' fill='%23305d7e'%3E%3Crect x='45.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.1 66 66)' fill='%23294d78'%3E%3Crect x='45.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.0 66 110)' fill='%23294a6f'%3E%3Crect x='45.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.6 66 154)' fill='%2335698b'%3E%3Crect x='45.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.6 66 198)' fill='%2330658a'%3E%3Crect x='45.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 110 22)' fill='%23305d8a'%3E%3Crect x='89.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.2 110 66)' fill='%232e5381'%3E%3Crect x='89.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.2 110 110)' fill='%232e598c'%3E%3Crect x='89.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.1 110 154)' fill='%23294f75'%3E%3Crect x='89.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.5 110 198)' fill='%232f5a80'%3E%3Crect x='89.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.6 154 22)' fill='%232d5e78'%3E%3Crect x='133.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.5 154 66)' fill='%23295f82'%3E%3Crect x='133.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.6 154 110)' fill='%232f4d79'%3E%3Crect x='133.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.2 154 154)' fill='%23356390'%3E%3Crect x='133.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.3 154 198)' fill='%232c516c'%3E%3Crect x='133.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 198 22)' fill='%2325537a'%3E%3Crect x='177.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.3 198 66)' fill='%232e5b87'%3E%3Crect x='177.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.0 198 110)' fill='%23386b97'%3E%3Crect x='177.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.3 198 154)' fill='%23285a82'%3E%3Crect x='177.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 198 198)' fill='%23305a88'%3E%3Crect x='177.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3C/svg%3E") 0 0/176px 176px, var(--noise),#DCD6CA} .mat--zellige-blue::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} .mat--zellige-mustard{--m:#DCD6CA;--m-edge:#CFC6B5;background-image:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cdefs%3E%3CradialGradient id='h' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.6' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='rotate(0.2 22 22)' fill='%23c7943b'%3E%3Crect x='1.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.2 22 66)' fill='%23dda43e'%3E%3Crect x='1.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.0 22 110)' fill='%23e4ae3c'%3E%3Crect x='1.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.3 22 154)' fill='%23bf8a35'%3E%3Crect x='1.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.0 22 198)' fill='%23ba8436'%3E%3Crect x='1.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='1.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.5 66 22)' fill='%23c3932f'%3E%3Crect x='45.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 66 66)' fill='%23c08f38'%3E%3Crect x='45.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.1 66 110)' fill='%23c89632'%3E%3Crect x='45.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.3 66 154)' fill='%23e4a940'%3E%3Crect x='45.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.0 66 198)' fill='%23dba335'%3E%3Crect x='45.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='45.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.1 110 22)' fill='%23d19b3b'%3E%3Crect x='89.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.2 110 66)' fill='%23eaac3a'%3E%3Crect x='89.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.1 110 110)' fill='%23ba8d34'%3E%3Crect x='89.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.7 110 154)' fill='%23d6a93d'%3E%3Crect x='89.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.7 110 198)' fill='%23d7a640'%3E%3Crect x='89.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='89.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.1 154 22)' fill='%23d09d36'%3E%3Crect x='133.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.6 154 66)' fill='%23ebaf42'%3E%3Crect x='133.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(1.1 154 110)' fill='%23e7b43d'%3E%3Crect x='133.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.3 154 154)' fill='%23e3a538'%3E%3Crect x='133.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.2 154 198)' fill='%23c08a30'%3E%3Crect x='133.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='133.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-1.1 198 22)' fill='%23bb8a35'%3E%3Crect x='177.3' y='1.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='1.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.0 198 66)' fill='%23f0b641'%3E%3Crect x='177.3' y='45.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='45.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.3 198 110)' fill='%23f2b63a'%3E%3Crect x='177.3' y='89.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='89.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(-0.9 198 154)' fill='%23edb141'%3E%3Crect x='177.3' y='133.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='133.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3Cg transform='rotate(0.3 198 198)' fill='%23e2a23c'%3E%3Crect x='177.3' y='177.3' width='41.4' height='41.4' rx='2'/%3E%3Crect x='177.3' y='177.3' width='41.4' height='41.4' rx='2' fill='url(%23h)'/%3E%3C/g%3E%3C/svg%3E") 0 0/176px 176px, var(--noise),#DCD6CA} .mat--zellige-mustard::after{background:linear-gradient(118deg, transparent 22%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.06) 44%, transparent 52%),linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%)} /* ==== 02-board.css ==== */ /* ========================================================================== 3D-стол (HM.board). Размеры — в px планшета (--bw × --bh), масштаб --k ставит JS. Наклон стола: --rx0 / --ry0 / --rz0 (секция может переопределить), живой наклон --tx / --ty. Высота образца над столом --zh (ярус × толщина), подъём при перекладке --lift. Никогда: opacity / filter / overflow / isolation на .brd-scene, .brd-rig, .brd-item, .brd-tile. ========================================================================== */ .brd{ --k:.6; --rx0:26deg; --ry0:-9deg; --rz0:-3deg; --persp:1900; position:relative;width:100%; height:calc(var(--bh) * var(--k) * .96px); -webkit-user-select:none;user-select:none; } .brd-scene{ position:absolute;inset:0; perspective:calc(var(--persp) * var(--k) * 1px);perspective-origin:50% 36%; } .brd-rig{ --tx:0; --ty:0; position:absolute;left:50%;top:50%; margin-left:calc(var(--bw) * -.5px);margin-top:calc(var(--bh) * -.5px); transform-style:preserve-3d; transform: scale3d(var(--k), var(--k), var(--k)) rotateX(calc(var(--rx0) - var(--ty) * 5deg)) rotateY(calc(var(--ry0) + var(--tx) * 7deg)) rotateZ(var(--rz0)); } .brd-item{ --t:var(--tile-t); --t-num:6; --lift:0; position:absolute;left:0;top:0;width:var(--w);height:var(--h); transform-style:preserve-3d; transform:translate3d(var(--x), var(--y), 0) rotateZ(var(--r)); transition:transform 700ms var(--ease-inout), width 500ms var(--ease-inout), height 500ms var(--ease-inout); } .brd-tile{ position:absolute;inset:0;transform-style:preserve-3d; transform:translateZ(calc((var(--zh) + var(--lift)) * 1px)); transition:transform 860ms var(--ease-drop) calc(var(--i) * 70ms); } .brd-face{ position:absolute;inset:0;border-radius:var(--r-tile); transition:opacity 380ms ease calc(var(--i) * 70ms); } .brd-edge{position:absolute;border-radius:0} .brd-edge.mat{background:var(--m-edge, #D3CCC0)} .brd-edge.mat::before,.brd-edge.mat::after{content:none} .brd-edge--b{ left:0;top:100%;width:100%;height:var(--t); transform-origin:50% 0;transform:rotateX(-90deg); box-shadow:inset 0 0 0 999px rgba(38,35,31,.06); transition:opacity 380ms ease calc(var(--i) * 70ms); } .brd-edge--r{ top:0;left:100%;width:var(--t);height:100%; transform-origin:0 50%;transform:rotateY(90deg); box-shadow:inset 0 0 0 999px rgba(38,35,31,.16); transition:opacity 380ms ease calc(var(--i) * 70ms); } /* тень лежит на поверхности под образцом (ярусом ниже) и уходит вправо-вниз */ .brd-shadow{ position:absolute;inset:0;border-radius:3px; background:rgba(38,35,31,.5); transform:translate3d(calc(2px + var(--lift) * .5px), calc(3px + var(--lift) * .75px), calc((var(--zh) - var(--t-num, 6)) * 1px + .3px)); filter:blur(calc(4px + var(--lift) * .08px)); opacity:calc(.5 - var(--lift) * .0019); transition:transform 860ms var(--ease-drop) calc(var(--i) * 70ms), filter 860ms ease calc(var(--i) * 70ms), opacity 860ms ease calc(var(--i) * 70ms); } /* подъём перед перекладкой: быстрее и без отскока */ .brd-item.is-up{--lift:240} .brd-item.is-up .brd-face,.brd-item.is-up .brd-edge{opacity:0} .brd.is-lifting .brd-tile{transition:transform 380ms var(--ease-inout) calc(var(--i) * 35ms)} .brd.is-lifting .brd-face,.brd.is-lifting .brd-edge{transition:opacity 260ms ease calc(var(--i) * 35ms + 60ms)} .brd.is-lifting .brd-shadow{transition:transform 380ms var(--ease-inout) calc(var(--i) * 35ms), filter 380ms ease, opacity 300ms ease calc(var(--i) * 35ms)} .brd.is-instant *,.brd-item.is-instant,.brd-item.is-instant *{transition:none !important} /* планшет: крупный «образец» бетона под мудбордом */ .mat--board{--m:#D6D0C5;--m-edge:#C2BAAB;background:var(--noise), radial-gradient(90% 70% at 25% 15%, rgba(255,255,255,.3), transparent 70%), #D6D0C5} .brd-item--plate{--t:14px;--t-num:14} .brd-item--plate .brd-shadow{ transform:translate3d(18px, 30px, -14px);filter:blur(26px);opacity:.42;border-radius:8px;transition:none; } .brd-item--plate .brd-face{border-radius:4px} /* без 3D: плоская раскладка сверху, тени остаются */ html.no-3d .brd-rig{transform:scale(var(--k))} html.no-3d .brd-edge{display:none} /* ==== brands.css ==== */ /* ========================================================================== 04 · Фабрики (#brands, .br-*). Тёмная полоса «вода» — смена полярности после стола. Карточка фабрики = бирка образца: название набрано шрифтом (логотипы не используем), страна, коллекции, «спросить о наличии». Наведение — лёгкий 3D-наклон (HM.tilt). ========================================================================== */ #brands .br-filters{display:grid;gap:16px;margin-bottom:22px} #brands .br-countries{display:flex;flex-wrap:wrap;gap:8px} #brands .br-countries .chip{border-color:var(--line-strong);color:var(--fg)} #brands .br-countries .chip[aria-checked="true"]{background:var(--on-deep);border-color:var(--on-deep);color:var(--ink)} #brands .br-flag{display:inline-block;width:18px;height:12px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)} #brands .br-flag--it{background:linear-gradient(90deg, #2E8B57 0 33.3%, #F4F2EE 33.3% 66.6%, #C8412F 66.6%)} #brands .br-flag--es{background:linear-gradient(180deg, #C8412F 0 25%, #F1BF3A 25% 75%, #C8412F 75%)} #brands .br-flag--ru{background:linear-gradient(180deg, #F4F2EE 0 33.3%, #2F5FB0 33.3% 66.6%, #C8412F 66.6%)} #brands .br-abc{display:flex;flex-wrap:wrap;gap:4px;padding-top:14px;border-top:1px solid var(--line)} #brands .br-abc button{ min-width:34px;height:36px;padding:0 6px;border-radius:4px; font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--fg); transition:background-color var(--dur-1) ease, color var(--dur-1) ease; } #brands .br-abc button:hover:not(:disabled){background:var(--hover-tint)} #brands .br-abc button[aria-pressed="true"]{background:var(--clay);color:#fff} #brands .br-abc button:disabled{color:rgba(238,240,236,.28);cursor:default} #brands .br-abc .br-abc__all{padding:0 12px;font-family:var(--font-body);font-weight:600;font-size:.8125rem} #brands .br-count{margin:6px 0 18px;color:var(--on-deep-muted)} #brands .br-grid{ display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));gap:16px; list-style:none;padding:0;margin:0;perspective:1400px; } #brands .br-card{ --rx:0deg; --ry:0deg; --fg:var(--ink); --fg-muted:var(--muted); --line:var(--hair); --line-strong:var(--hair-strong); --accent-text:var(--clay-ink); --focus:var(--clay); position:relative;display:flex;flex-direction:column;gap:14px;min-height:210px; padding:22px 20px 18px;border-radius:6px; background:var(--sheet);color:var(--ink); box-shadow:2px 3px 0 rgba(0,0,0,.18), 12px 20px 36px -16px rgba(0,0,0,.55); transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d; transition:box-shadow var(--dur-2) ease; animation:br-in .5s var(--ease-out) backwards;animation-delay:calc(var(--n, 0) * 30ms); } @keyframes br-in{from{opacity:0;transform:translateY(14px)}} /* дырочка бирки */ #brands .br-card::before{ content:"";position:absolute;right:18px;top:18px;width:12px;height:12px;border-radius:50%; background:var(--deep);box-shadow:inset 1px 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(38,35,31,.06); } #brands .br-card:hover{box-shadow:2px 3px 0 rgba(0,0,0,.18), 20px 32px 48px -18px rgba(0,0,0,.6)} #brands .br-word{ display:block;min-height:2.4em;padding-right:26px;line-height:1.05;color:var(--ink); font-size:1.625rem;overflow-wrap:anywhere;transform:translateZ(18px); } #brands .bw--1{font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:1.0625rem;line-height:1.3} #brands .bw--2{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.875rem} #brands .bw--3{font-family:var(--font-body);font-weight:800;letter-spacing:-.04em;text-transform:lowercase;font-size:1.625rem} #brands .bw--4{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;line-height:1.35} #brands .bw--5{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:1.375rem} #brands .br-meta{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)} #brands .br-cols{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0} #brands .br-cols li{padding:3px 9px;border-radius:4px;background:var(--table);font-size:.8125rem;font-weight:500} #brands .br-cols--none li{background:none;padding:0;color:var(--faint);font-style:italic} #brands .br-ask{margin-top:auto;align-self:flex-start;font-size:.875rem} #brands .br-foot{ display:flex;gap:12px;align-items:flex-start;margin-top:clamp(28px, 3vw, 40px);max-width:70ch; font-size:var(--fs-small);color:var(--on-deep-muted);line-height:1.55; } #brands .br-foot .icon{margin-top:2px;color:var(--clay-light)} #brands .br-empty{grid-column:1 / -1;padding:24px 0;color:var(--on-deep-muted)} /* ==== calc.css ==== */ /* ========================================================================== 05 · Расчёт (#calc). Комната в разрезе на CSS 3D: пол + задняя + левая стена. .calc-stage (perspective) → .calc-rig (preserve-3d, поворот --ax/--ay, масштаб --k) → .calc-face (размеры в px: --lp/--wp/--hp = метры × --s). Швы — SVG, рисует calc.js. ========================================================================== */ #calc .calc-layout{display:grid;gap:clamp(24px, 3vw, 48px);align-items:start} @media (min-width:1000px){ #calc .calc-layout{grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr)} #calc .calc-view{position:sticky;top:calc(var(--header-h) + 16px)} } /* ---------- сцена ---------- */ #calc .calc-stage{ --k:1; --ax:-24; --ay:-36; position:relative;height:calc(500px * var(--k)); border-radius:var(--r-3); background: radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.55), transparent 70%), var(--table); box-shadow:inset 0 0 0 1px var(--hair); cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none; } #calc .calc-stage.is-dragging{cursor:grabbing} #calc .calc-scene{position:absolute;inset:0;perspective:calc(1600px * var(--k));perspective-origin:50% 40%;overflow:visible} #calc .calc-rig{ position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d; transform:translateY(calc(var(--hp) * -.08px)) scale3d(var(--k), var(--k), var(--k)) rotateX(calc(var(--ax) * 1deg)) rotateY(calc(var(--ay) * 1deg)); transition:transform .5s var(--ease-out); } #calc .calc-stage.is-dragging .calc-rig{transition:none} #calc .calc-face{ position:absolute;left:0;top:0;transform-style:flat; transition:width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out), transform .5s var(--ease-out), opacity .3s ease; } #calc .calc-face--floor{ width:calc(var(--lp) * 1px);height:calc(var(--wp) * 1px); margin:calc(var(--wp) * -.5px) 0 0 calc(var(--lp) * -.5px); transform:translateY(calc(var(--hp) * .5px)) rotateX(90deg); box-shadow:0 0 0 1px rgba(38,35,31,.18); } #calc .calc-face--back{ width:calc(var(--lp) * 1px);height:calc(var(--hp) * 1px); margin:calc(var(--hp) * -.5px) 0 0 calc(var(--lp) * -.5px); transform:translateZ(calc(var(--wp) * -.5px)); } #calc .calc-face--left{ width:calc(var(--wp) * 1px);height:calc(var(--hp) * 1px); margin:calc(var(--hp) * -.5px) 0 0 calc(var(--wp) * -.5px); transform:translateX(calc(var(--lp) * -.5px)) rotateY(90deg); } /* стена без плитки — штукатурка */ #calc .calc-face{background:#E7E3DC} #calc .calc-face.is-off .calc-mat,#calc .calc-face.is-off .calc-grid{opacity:0} #calc .calc-mat,#calc .calc-grid{position:absolute;inset:0;transition:opacity .3s ease} #calc .calc-grid{background-repeat:no-repeat;background-size:100% 100%} /* свет: пол светлее у стен, стены темнее к углу */ #calc .calc-face--back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(38,35,31,.16), rgba(38,35,31,0) 40%), linear-gradient(0deg, rgba(38,35,31,.08), transparent 30%)} #calc .calc-face--left::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg, rgba(38,35,31,.2), rgba(38,35,31,.04) 60%), linear-gradient(0deg, rgba(38,35,31,.08), transparent 30%)} #calc .calc-face--floor::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(38,35,31,.14), transparent 35%), linear-gradient(90deg, rgba(38,35,31,.12), transparent 30%)} /* дверь на левой стене, у переднего края */ #calc .calc-door{ position:absolute;bottom:0;left:calc(var(--s) * .25px); width:calc(var(--s) * .7px);height:calc(var(--s) * 2px); background:#8B8378;box-shadow:0 0 0 calc(var(--s) * .05px) #F1EEE8;transition:opacity .3s ease; } #calc .calc-door__leaf{position:absolute;inset:4% 5% 0 5%;border-radius:1px} #calc .calc-door__leaf::after{content:"";position:absolute;right:12%;top:52%;width:12%;height:2%;border-radius:2px;background:#C9B27C;box-shadow:0 1px 1px rgba(0,0,0,.3)} #calc .calc-door.is-off{opacity:0} /* размеры */ #calc .calc-dim{ position:absolute;padding:3px 8px;border-radius:999px;background:rgba(38,35,31,.82);color:#fff; font:500 12px/1.2 var(--font-mono);white-space:nowrap;pointer-events:none; } #calc .calc-dim--l{left:50%;bottom:-30px;transform:translateX(-50%)} #calc .calc-dim--w{right:-10px;top:50%;transform:translate(100%,-50%)} #calc .calc-dim--h{left:-10px;top:50%;transform:translate(-100%,-50%)} #calc .calc-drag{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;align-items:center;gap:6px;font-size:.6875rem;pointer-events:none} #calc .calc-drag .icon{width:14px;height:14px} /* ---------- итог ---------- */ #calc .calc-out{margin-top:16px;display:grid;gap:16px} #calc .calc-lines{display:grid;gap:6px;margin:0} #calc .calc-lines div{display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px dashed var(--hair)} #calc .calc-lines dt{color:var(--muted);font-size:var(--fs-small)} #calc .calc-lines dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums} #calc .calc-total{display:grid;gap:2px} #calc .calc-total__num{font-family:var(--font-display);font-weight:500;font-size:clamp(2.75rem, 2.2rem + 2vw, 3.75rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} #calc .calc-total__sub{font-weight:600;color:var(--ink)} #calc .calc-note{display:flex;gap:10px;font-size:.8125rem;color:var(--muted);line-height:1.45} #calc .calc-note .icon{flex:none;margin-top:1px;color:var(--clay)} /* ---------- форма ---------- */ #calc .calc-form{display:grid;gap:26px} #calc .calc-fs{display:grid;gap:12px} #calc .calc-fs__title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;margin-bottom:12px} #calc .calc-fs__title .spec{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:.6875rem;letter-spacing:0} #calc .calc-dims{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:12px} #calc .calc-num{display:grid;gap:6px;font-size:var(--fs-small);font-weight:600} #calc .calc-num .stepper{width:100%;justify-content:space-between;background:#fff} #calc .calc-num__input{ width:100%;min-width:0;border:0;background:transparent;text-align:center;font-weight:700;font-size:1.125rem; font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;outline:none; } #calc .calc-num__input::-webkit-inner-spin-button,#calc .calc-num__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #calc .calc-num .stepper:focus-within{border-color:var(--clay);box-shadow:0 0 0 4px var(--clay-glow)} #calc .seg .chip{min-height:42px;padding:0 15px;font-size:.875rem;background:rgba(251,249,245,.6)} #calc .seg .chip[aria-checked="true"],#calc .seg .chip:has(input:checked){background:var(--ink);color:#fff} #calc .seg .chip:disabled{opacity:.35;cursor:not-allowed} #calc .calc-hint{font-size:.8125rem;color:var(--muted);min-height:1.3em} #calc .calc-mats{display:flex;flex-wrap:wrap;gap:10px} #calc .calc-sw{ position:relative;width:52px;height:52px;border-radius:var(--r-tile);box-shadow:var(--shadow-sample); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease; } #calc .calc-sw .mat{position:absolute;inset:0;border-radius:inherit} #calc .calc-sw:hover{transform:translate(-1px,-2px)} #calc .calc-sw[aria-checked="true"]{box-shadow:0 0 0 2px var(--table-2), 0 0 0 4px var(--ink), var(--shadow-sample)} /* ==== catalog.css ==== */ /* ========================================================================== 02 · Каталог (#catalog, .ct-*). Категории = образцы «своего» формата на стенде: керамогранит — большая плита, ванная — вертикаль кабанчика, напольная — доска. Этикетка — бумажный ярлык поверх образца; при наведении образец приподнимается. ========================================================================== */ #catalog .ct-grid{display:grid;gap:clamp(18px, 2.2vw, 30px)} #catalog .ct-card{ --rot:0deg; position:relative;min-height:340px;border-radius:var(--r-tile); box-shadow:var(--shadow-sample);transform:rotate(var(--rot)); transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); } #catalog .ct-card:hover,#catalog .ct-card:focus-within{transform:rotate(var(--rot)) translate(-3px,-6px);box-shadow:var(--shadow-lift)} #catalog .ct-face{position:absolute;inset:0;border-radius:inherit} /* торец образца: тонкая полоска снизу и справа — у плитки есть толщина */ #catalog .ct-card::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset -3px -4px 0 rgba(38,35,31,.10); } #catalog .ct-label{ position:absolute;left:clamp(12px, 1.6vw, 22px);bottom:clamp(12px, 1.6vw, 22px);z-index:2; width:min(330px, calc(100% - 24px));padding:18px 20px 16px;border-radius:4px; background:var(--sheet);box-shadow:var(--shadow-soft); display:grid;gap:8px;transform:rotate(calc(var(--rot) * -1.6)); } #catalog .ct-label .h3{font-size:clamp(1.5rem, 1.3rem + .7vw, 1.875rem)} #catalog .ct-label p:not(.spec){font-size:var(--fs-small);line-height:1.5;color:var(--muted)} #catalog .ct-label .link{justify-self:start;margin-top:2px} #catalog .ct-card--kg{min-height:420px} #catalog .ct-card--bath .ct-face::before{-webkit-mask-size:48px 25.6px !important;mask-size:48px 25.6px !important} #catalog .ct-stock{ display:grid;gap:12px;align-content:start;padding:clamp(22px, 2vw, 30px);border-radius:var(--r-2); background:var(--sheet);box-shadow:var(--shadow-soft); } #catalog .ct-stock .icon--lg{color:var(--clay)} #catalog .ct-stock p{font-size:var(--fs-small);color:var(--muted);line-height:1.55} #catalog .ct-stock .btn{margin-top:6px} @media (min-width:700px){ #catalog .ct-grid{grid-template-columns:repeat(2, minmax(0,1fr))} #catalog .ct-card--kg{grid-column:1 / -1;min-height:440px} } @media (min-width:1100px){ #catalog .ct-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:280px 280px auto; grid-template-areas: "kg kg kg kg kg kg bath bath bath mo mo mo" "kg kg kg kg kg kg bath bath bath hd hd hd" "fl fl fl fl fl fl fl fl st st st st"; } #catalog .ct-card--kg{grid-area:kg;min-height:0} #catalog .ct-card--bath{grid-area:bath;min-height:0} #catalog .ct-card--mosaic{grid-area:mo;min-height:0} #catalog .ct-card--hand{grid-area:hd;min-height:0} #catalog .ct-card--floor{grid-area:fl;min-height:300px} #catalog .ct-stock{grid-area:st} #catalog .ct-card--mosaic .ct-label,#catalog .ct-card--hand .ct-label{width:calc(100% - 28px);padding:14px 16px 12px;gap:4px} #catalog .ct-card--mosaic .ct-label p:not(.spec),#catalog .ct-card--hand .ct-label p:not(.spec){display:none} } #catalog .ct-card--kg .ct-face{background-size:620px 620px, 100% 100%} /* ==== delivery.css ==== */ /* 08 · Оплата, доставка, самовывоз, возврат (#delivery, .dl-*). ARIA-вкладки + карточка склада. */ #delivery .dl-layout{display:grid;gap:clamp(20px, 3vw, 40px);align-items:start} @media (min-width:1000px){#delivery .dl-layout{grid-template-columns:minmax(0, 1fr) 340px}} #delivery .dl-tabs{padding:0;overflow:hidden} #delivery .dl-tablist{display:flex;overflow-x:auto;border-bottom:1px solid var(--hair);scrollbar-width:none} #delivery .dl-tablist::-webkit-scrollbar{display:none} #delivery .dl-tab{ position:relative;display:inline-flex;align-items:center;gap:8px;flex:1 0 auto;justify-content:center; min-height:62px;padding:0 20px;font-weight:600;font-size:.9375rem;color:var(--muted);white-space:nowrap; transition:color var(--dur-1) ease, background-color var(--dur-1) ease; } #delivery .dl-tab:hover{color:var(--ink);background:var(--hover-tint)} #delivery .dl-tab::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--clay);transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)} #delivery .dl-tab[aria-selected="true"]{color:var(--ink)} #delivery .dl-tab[aria-selected="true"]::after{transform:none} #delivery .dl-tab:focus-visible{outline-offset:-3px} #delivery .dl-panel{display:grid;gap:14px;padding:clamp(22px, 3vw, 40px);max-width:78ch;font-size:var(--fs-small);line-height:1.65;color:var(--ink);animation:dl-in .4s var(--ease-out)} #delivery .dl-panel:focus-visible{outline-offset:-4px} @keyframes dl-in{from{opacity:0;transform:translateY(8px)}} #delivery .dl-lead{font-size:var(--fs-lead);line-height:1.5} #delivery .dl-h{font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:0;margin-top:6px} #delivery .dl-ways{display:grid;gap:12px;list-style:none;padding:0;margin:6px 0 0} @media (min-width:700px){#delivery .dl-ways{grid-template-columns:repeat(3, 1fr)}} #delivery .dl-ways li{display:grid;gap:10px;align-content:start;padding:18px;border-radius:var(--r-1);background:var(--table)} #delivery .dl-ways .icon{width:28px;height:28px;color:var(--clay-ink)} #delivery .dl-ways b{display:block;font-size:1rem} #delivery .dl-ways span{color:var(--muted);line-height:1.5} #delivery .dl-warn{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:16px 18px;border-radius:var(--r-1);background:var(--clay-soft)} #delivery .dl-warn .icon{color:var(--clay-ink);margin-top:1px} #delivery .dl-list{display:grid;gap:10px;padding-left:20px;margin:0} #delivery .dl-list li::marker{color:var(--clay)} #delivery .dl-side{display:grid;gap:16px} #delivery .dl-card{display:grid;gap:10px;padding:24px;border-radius:var(--r-2);background:var(--ink);color:#F4F1EA} #delivery .dl-card .spec{color:#B9B2A7} #delivery .dl-card .h3{color:#fff} #delivery .dl-card__text{font-size:var(--fs-small);color:#CFC8BD;line-height:1.55} #delivery .dl-card .link{--fg:#fff;--line-strong:rgba(255,255,255,.35);--accent-text:#E7A385;color:#fff;justify-self:start} #delivery .dl-facts{display:grid;gap:0;list-style:none;padding:0;margin:0} #delivery .dl-facts li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)} #delivery .dl-facts b{font-family:var(--font-display);font-weight:500;font-size:1.75rem;line-height:1} #delivery .dl-facts span{font-size:.875rem;color:var(--muted);text-align:right} /* ==== footer.css ==== */ /* Подвал — тёмная полоса «вода»: крупное слово-знак, три колонки, юр. строка. */ .site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);padding-block:clamp(64px, 7vw, 120px) calc(28px + var(--mb-h))} .site-footer .ftr-top{display:grid;gap:40px} @media (min-width:900px){.site-footer .ftr-top{grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px}} .site-footer .ftr-word{font-family:var(--font-display);font-weight:500;font-size:clamp(3.5rem, 2.4rem + 5vw, 7rem);line-height:.86;letter-spacing:-.02em;color:var(--on-deep)} .site-footer .ftr-word .em{color:var(--clay-light)} .site-footer .ftr-tag{margin-top:18px;max-width:30ch;color:var(--on-deep-muted);font-size:var(--fs-small)} .site-footer .ftr-col{display:grid;gap:12px;align-content:start} .site-footer .ftr-col .spec{color:var(--on-deep-muted)} .site-footer .ftr-col ul{display:grid;gap:8px;list-style:none;padding:0;margin:0} .site-footer .ftr-col a:not(.hdr-icon){color:var(--on-deep);text-decoration:none;font-size:var(--fs-small)} .site-footer .ftr-col a:not(.hdr-icon):hover{text-decoration:underline;text-decoration-color:var(--clay-light)} .site-footer .ftr-phone{font-weight:700;font-size:1.25rem !important} .site-footer .ftr-social{display:flex;gap:8px} .site-footer .hdr-icon{color:var(--on-deep);border-color:rgba(238,240,236,.25)} .site-footer .ftr-addr{font-size:var(--fs-small);color:var(--on-deep-muted)} .site-footer .ftr-legal{ display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(40px, 5vw, 72px);padding-top:22px;border-top:1px solid var(--line); font-size:.8125rem;color:var(--on-deep-muted); } .site-footer .ftr-legal a{color:var(--on-deep-muted)} .site-footer .ftr-legal a:hover{color:var(--on-deep)} /* ==== header.css ==== */ /* ========================================================================== header — прозрачная над столом hero → «лист» с тенью после 40px. Мобильный: знак + звонок + меню (светлая шторка на весь экран). ========================================================================== */ .site-header{ --hdr-fg:var(--ink); --hdr-muted:var(--muted); --hdr-line:rgba(38,35,31,.18); --hdr-tint:rgba(38,35,31,.05); --hdr-pane:var(--ink); position:fixed;top:0;left:0;right:0;z-index:var(--z-header); padding-top:env(safe-area-inset-top, 0px); color:var(--hdr-fg); transition:color var(--dur-2) ease; } /* фон — отдельным слоем: backdrop-filter на самой шапке сломал бы position:fixed у шторки меню */ .site-header::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(251,249,245,.96); -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px); box-shadow:0 1px 0 rgba(38,35,31,.08), 0 12px 32px -20px rgba(38,35,31,.35); opacity:0;transform:translateY(-8px); transition:opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-out); } .site-header.is-solid::before{opacity:1;transform:none} html.menu-open .site-header{z-index:var(--z-overlay)} .hdr{ display:flex;align-items:center;gap:clamp(12px, 2vw, 28px); height:var(--hdr-row, 76px); } /* ---------- знак и название ---------- */ .hdr-brand{ display:inline-flex;align-items:center;gap:12px;min-height:48px; color:inherit;text-decoration:none;flex:none;margin-right:auto;border-radius:12px; } .brand-mark{width:34px;height:34px;flex:none;overflow:visible} .brand-mark__tile{fill:var(--hdr-pane, currentColor);transition:fill var(--dur-2) ease, transform var(--dur-3) var(--ease-drop);transform-box:fill-box;transform-origin:50% 50%} .brand-mark__tile--clay{fill:var(--clay)} .brand-mark__tile--sage{fill:var(--sage)} .brand-mark__tile--sand{fill:#CFC6B5} .hdr-brand__text{display:grid;gap:3px;line-height:1} .hdr-brand__word{font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} .hdr-brand__addr{display:none;font-size:.875rem;font-weight:500;color:var(--hdr-muted);white-space:nowrap;letter-spacing:0;transition:color var(--dur-2) ease} /* знак «укладывается»: плитки ложатся по одной после загрузки */ @media (prefers-reduced-motion: no-preference){ html.is-booted .hdr-brand .brand-mark__tile{animation:hm-lay .7s var(--ease-drop) both} html.is-booted .hdr-brand .brand-mark__tile:nth-child(2){animation-delay:.08s} html.is-booted .hdr-brand .brand-mark__tile:nth-child(3){animation-delay:.16s} html.is-booted .hdr-brand .brand-mark__tile:nth-child(4){animation-delay:.24s} html.is-shot .hdr-brand .brand-mark__tile{animation:none} } @keyframes hm-lay{from{opacity:0;transform:translate(-3px,-5px) scale(1.25)}} /* ---------- навигация ---------- */ .hdr-nav{display:none} .hdr-nav__list{display:flex;align-items:center;gap:2px} .hdr-nav__link{ position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill); font-size:.9688rem;font-weight:500;color:inherit;text-decoration:none;white-space:nowrap; transition:background-color var(--dur-1) ease; } .hdr-nav__link::after{ content:"";position:absolute;left:50%;bottom:4px;width:6px;height:6px;margin-left:-3px;border-radius:2px; background:var(--clay); transform:scale(0);transition:transform var(--dur-2) var(--ease-spring); } .hdr-nav__link:hover{background:var(--hdr-tint)} .hdr-nav__link.is-current::after{transform:scale(1)} /* ---------- действия ---------- */ .hdr-actions{display:flex;align-items:center;gap:10px;flex:none} .hdr-phone{ display:none;flex-direction:column;align-items:flex-end;gap:2px;min-height:48px;justify-content:center; color:inherit;text-decoration:none;border-radius:12px;padding:0 4px; } .hdr-phone__num{font-family:var(--font-body);font-weight:700;font-size:1.0625rem;letter-spacing:0;white-space:nowrap;line-height:1.1} .hdr-phone:hover .hdr-phone__num{text-decoration:underline;text-decoration-color:var(--clay);text-underline-offset:.2em;text-decoration-thickness:2px} .hdr-phone__status{font-size:.875rem;color:var(--hdr-muted);transition:color var(--dur-2) ease} .chr-status{display:inline-flex;align-items:center;gap:8px;line-height:1.3;white-space:nowrap} .chr-status__dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none} .chr-status[data-state="open"] .chr-status__dot{background:#3FB877;box-shadow:0 0 0 3px rgba(63,184,119,.22)} .hdr-tg{display:none;--btn-h:48px;padding:0 18px;font-size:.9375rem;gap:8px} .hdr-social{display:none;align-items:center;gap:6px} .hdr-social .hdr-icon{width:44px;height:44px} .hdr-social .hdr-icon .icon{width:20px;height:20px} .hdr-social .hdr-icon--vk .icon{color:var(--vk)} .hdr-tg__short{display:none} .hdr-icon{ display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none; color:inherit;border:1.5px solid var(--hdr-line);background:transparent;text-decoration:none; transition:background-color var(--dur-1) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); } .hdr-icon:hover{background:var(--hdr-tint)} .hdr-icon:active{transform:scale(.94)} .hdr-icon .icon{width:22px;height:22px} .hdr-call{background:var(--clay);border-color:var(--clay);color:#fff} .hdr-call:hover{background:var(--clay-hover)} .hdr-burger__lines{position:relative;display:block;width:20px;height:12px} .hdr-burger__lines i{ position:absolute;left:0;height:2px;border-radius:2px;background:currentColor; transition:transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); } .hdr-burger__lines i:first-child{top:0;width:20px} .hdr-burger__lines i:last-child{bottom:0;width:13px} .hdr-burger:hover .hdr-burger__lines i:last-child{width:20px} @media (min-width:600px){ .hdr-brand__addr{display:block} .hdr-tg{display:inline-flex} .hdr-call{display:none} } @media (min-width:600px) and (max-width:899px){ .hdr-tg__long{display:none} .hdr-tg__short{display:inline} } @media (min-width:900px){ .hdr-phone{display:flex} .hdr-social{display:flex} } @media (min-width:1200px){ .hdr-nav{display:block;margin-inline:auto} .hdr-brand{margin-right:0} .hdr-burger{display:none} } @media (min-width:1200px) and (max-width:1359px){ .hdr-brand__addr,.hdr-phone__status{display:none} .hdr-tg__long{display:none} .hdr-tg__short{display:inline} .hdr-nav__link{padding:0 12px} } /* ========================================================================== Мобильное меню — светлая шторка. Открывается сверху вниз, как рулонная штора. ========================================================================== */ .msh{ position:fixed;inset:0;z-index:var(--z-overlay); color:var(--ink); } .msh__panel{ position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; padding-top:env(safe-area-inset-top, 0px);padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); background:var(--table); clip-path:inset(0 0 100% 0); transition:clip-path var(--dur-3) var(--ease-inout); } .msh.is-open .msh__panel{clip-path:inset(0 0 0 0)} .msh__top{display:flex;align-items:center;justify-content:space-between;height:76px;flex:none} .msh__brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:.14em;text-transform:uppercase} .msh .brand-mark__tile{fill:var(--ink)} .msh .brand-mark__tile--clay{fill:var(--clay)} .msh .brand-mark__tile--sage{fill:var(--sage)} .msh .brand-mark__tile--sand{fill:#CFC6B5} .msh .hdr-icon{border-color:rgba(38,35,31,.18);color:var(--ink)} .msh .hdr-icon:hover{background:rgba(38,35,31,.05)} .msh-nav{padding-block:8px 24px} .msh-nav__list > li{ border-bottom:1px solid rgba(38,35,31,.10); opacity:0;transform:translateY(18px); transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay:calc(120ms + var(--i, 0) * 50ms); } .msh.is-open .msh-nav__list > li{opacity:1;transform:none} .msh-link{ display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;row-gap:2px; padding:18px 0;min-height:72px;color:inherit;text-decoration:none; } .msh-link__label{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem, 1.6rem + 1.8vw, 2.75rem);letter-spacing:-.015em;line-height:1.02} .msh-link__desc{grid-column:1;font-size:.9375rem;color:var(--muted)} .msh-link .icon{grid-column:2;grid-row:1 / span 2;width:28px;height:28px;color:var(--muted);transition:transform var(--dur-2) var(--ease-out), color var(--dur-1) ease} .msh-link:hover .icon,.msh-link:focus-visible .icon{transform:translateX(4px);color:var(--clay-ink)} .msh-link.is-current .msh-link__label::after{ content:"";display:inline-block;width:8px;height:8px;margin-left:12px;vertical-align:.45em;border-radius:2px;background:var(--clay); } .msh-foot{ margin-top:auto;display:grid;gap:14px;padding-top:12px; opacity:0;transform:translateY(18px); transition:opacity var(--dur-3) var(--ease-out) 380ms, transform var(--dur-3) var(--ease-out) 380ms; } .msh.is-open .msh-foot{opacity:1;transform:none} .msh-foot__phone{font-family:var(--font-body);font-weight:700;font-size:1.5rem;letter-spacing:0;color:inherit;text-decoration:none;justify-self:start} .msh-foot__status{color:var(--muted);font-size:1rem;white-space:normal} .msh-foot__actions{display:grid;gap:10px;margin-top:6px} .msh-foot__addr{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:1rem;line-height:1.5;margin-top:6px} .msh-foot__addr .icon{margin-top:2px;color:var(--clay-ink)} @media (min-width:600px){ .msh-foot__actions{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion: reduce){ .msh__panel{clip-path:none;opacity:0;transition:opacity var(--dur-1) linear} .msh.is-open .msh__panel{opacity:1} .msh-nav__list > li,.msh-foot{opacity:1;transform:none} } /* ==== hero.css ==== */ /* ============ HERO «Стол дизайнера» ============ Слева — обещание студии, справа — 3D-стол с образцами (HM.board, 560 × 620). Настроения листаются стрелками и сами по кругу; образцы поднимаются и ложатся заново. Легенда под столом — текстовая копия сцены (сцена aria-hidden). */ #hero{ padding-block:calc(var(--header-h) + clamp(20px, 3.5vw, 56px)) clamp(48px, 5vw, 88px); background: radial-gradient(55% 60% at 78% 38%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%), radial-gradient(40% 40% at 10% 100%, rgba(157,170,156,.16), transparent 70%), var(--table); overflow-x:clip; } #hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--noise);opacity:.3;mix-blend-mode:multiply} #hero .hero__grid{display:grid;gap:clamp(24px, 4vw, 48px);align-items:center} @media (min-width:1000px){ #hero .hero__grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr);gap:clamp(32px, 4vw, 72px)} } /* ---------- текст ---------- */ #hero .hero__copy{position:relative;z-index:2;max-width:640px} #hero .hero__code{margin-bottom:clamp(18px, 2vw, 28px)} #hero .hero__title{max-width:12ch} #hero .hero__title .em{display:inline-block;position:relative} #hero .hero__title .em::after{ content:"";position:absolute;left:.04em;right:.06em;bottom:.02em;height:.07em;border-radius:1px; background:var(--clay);transform-origin:0 50%;transform:scaleX(0);opacity:.85; transition:transform 900ms var(--ease-out) 500ms; } html.is-booted #hero .hero__title .em::after,html:not(.js) #hero .hero__title .em::after{transform:none} #hero .hero__lead{margin-top:clamp(18px, 2vw, 28px);max-width:40ch} #hero .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px, 3vw, 40px)} #hero .hero__phone{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:22px; font-size:var(--fs-small);color:var(--muted); } #hero .hero__tel{ font-weight:700;font-size:1.0625rem;color:var(--ink);font-variant-numeric:tabular-nums; text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:5px;text-decoration-thickness:1.5px; } #hero .hero__tel:hover{text-decoration-color:var(--clay)} #hero .hero__social{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--hair);color:var(--tg);transition:border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out)} #hero .hero__social--vk{color:var(--vk)} #hero .hero__social:hover{border-color:var(--ink);transform:translateY(-2px)} #hero .hero__social .icon{width:20px;height:20px} @media (max-width:599px){ #hero .hero__cta .btn{flex:1 1 100%} } /* ---------- стол ---------- */ #hero .hero__visual{margin:0;min-width:0;position:relative} #hero .hero-board{--rx0:30deg;--ry0:-8deg;--rz0:-4deg;--persp:2100;margin-top:-2%} @media (min-width:1000px){ #hero .hero-board{margin-right:calc(var(--pad-x) * -.5)} } /* подпись-«этикетка» */ #hero .hero-mood{position:relative;z-index:2;margin-top:clamp(4px, 1vw, 12px)} #hero .hero-mood__bar{display:flex;align-items:center;gap:14px} #hero .hero-mood__name{display:grid;gap:2px;flex:1;min-width:0} #hero .hero-mood__name strong{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.005em} #hero .hero-mood__btn{ display:grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none; border:1.5px solid var(--hair-strong);background:rgba(251,249,245,.7);color:var(--ink); transition:border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out), background-color var(--dur-1) ease; } #hero .hero-mood__btn:hover{border-color:var(--ink);background:var(--sheet)} #hero .hero-mood__btn:active{transform:scale(.94)} #hero .hero-mood__btn .icon{width:20px;height:20px} #hero .hero-legend{ display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair); list-style:none;padding-left:0; } #hero .hero-legend li{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted);line-height:1.3;cursor:default;transition:color var(--dur-1) ease} #hero .hero-legend li:hover{color:var(--ink)} #hero .hero-legend .swatch{width:14px;height:14px;border-radius:2px;box-shadow:1px 1px 0 rgba(38,35,31,.12), 2px 3px 5px -2px rgba(38,35,31,.3)} /* образец из легенды приподнимается на столе */ #hero .brd-item.is-hl{--lift:34} #hero .brd-item.is-hl .brd-tile,#hero .brd-item.is-hl .brd-shadow{transition-delay:0s !important;transition-duration:420ms !important} /* ---------- факты ---------- */ #hero .hero-facts{ display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:22px 20px; margin-top:clamp(40px, 5vw, 72px);padding-top:clamp(22px, 2.5vw, 32px);border-top:1px solid var(--hair-strong); } @media (min-width:900px){#hero .hero-facts{grid-template-columns:repeat(4, minmax(0,1fr))}} #hero .hero-fact{display:grid;gap:6px;align-content:start} #hero .hero-fact dt{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem, 1.6rem + 1.4vw, 2.75rem);line-height:1;letter-spacing:-.01em} #hero .hero-fact dd{margin:0;font-size:var(--fs-small);color:var(--muted);max-width:24ch;line-height:1.45} /* ==== mobilebar.css ==== */ /* ========================================================================== mobilebar — «Позвонить» + Telegram. Плавающая светлая капсула снизу, только < 900px. Появляется, когда кнопка hero ушла вверх. html.mb-visible + --mb-h для секций (липкие элементы снизу поднимайте на var(--mb-h)). ========================================================================== */ .mobilebar{ position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobilebar); padding:0 12px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events:none; transform:translateY(calc(100% + 12px));opacity:0;visibility:hidden; transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease, visibility 0s linear var(--dur-3); } .mobilebar.is-visible{ transform:none;opacity:1;visibility:visible; transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease, visibility 0s; } .mb{ display:flex;gap:8px;max-width:480px;margin-inline:auto;padding:6px;border-radius:12px; background:rgba(251,249,245,.92); -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 0 0 1px rgba(38,35,31,.08), 0 18px 40px -14px rgba(38,35,31,.4); pointer-events:auto; } .mb .btn{min-height:56px} .mb-call{flex:1 1 auto;font-size:1.125rem} .mb-tg{flex:0 0 auto;padding:0 24px} html:not(.is-booted) .mobilebar{display:none} html.menu-open .mobilebar{visibility:hidden;opacity:0;transition:none} @media (min-width:900px){ .mobilebar{display:none} } @media (prefers-reduced-motion: reduce){ .mobilebar{transform:none} } /* ==== moodboard.css ==== */ /* ========================================================================== 03 · Мудборд (#moodboard, .mbd-*). Планшет 760 × 540 на столе (HM.board с plate). Палитра — кнопки-образцы (aria-pressed), список справа — текстовая копия стола. ========================================================================== */ #moodboard .mbd-layout{display:grid;gap:clamp(24px, 3vw, 40px);align-items:start} @media (min-width:1100px){ #moodboard .mbd-layout{grid-template-columns:minmax(0, 1fr) 380px} #moodboard .mbd-side{position:sticky;top:calc(var(--header-h) + 16px)} } #moodboard .mbd-stage{min-width:0} #moodboard .mbd-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:8px} #moodboard .mbd-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #moodboard .mbd-presets .chip{min-height:40px;padding:0 14px;font-size:.875rem} #moodboard .mbd-tools{display:flex;gap:8px} #moodboard .mbd-board{--rx0:34deg;--ry0:-6deg;--rz0:-2deg;--persp:2300;margin-block:clamp(8px, 2vw, 24px) 0} #moodboard .brd-item:not(.brd-item--plate) .brd-tile{cursor:pointer} @media (hover:hover){ #moodboard .brd-item:not(.brd-item--plate):hover{--lift:22} #moodboard .brd-item:not(.brd-item--plate):hover .brd-tile, #moodboard .brd-item:not(.brd-item--plate):hover .brd-shadow{transition-delay:0s;transition-duration:360ms} } #moodboard .brd-item.is-leaving .brd-tile{transition:transform 420ms var(--ease-inout)} #moodboard .brd-item.is-leaving .brd-face,#moodboard .brd-item.is-leaving .brd-edge{transition:opacity 300ms ease 80ms} #moodboard .mbd-empty{ position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:2; padding:10px 16px;border-radius:999px;background:rgba(251,249,245,.9);box-shadow:var(--shadow-soft); font-size:var(--fs-small);font-weight:600;color:var(--muted);white-space:nowrap;pointer-events:none; } #moodboard .mbd-hint{text-align:center;margin-top:6px;font-size:.6875rem} @media (hover:none){#moodboard .mbd-hint{display:none}} /* ---------- палитра ---------- */ #moodboard .mbd-palette{display:grid;gap:18px;margin-bottom:24px} #moodboard .mbd-palette__title{display:flex;align-items:baseline;justify-content:space-between;width:100%;font-family:var(--font-display);font-size:1.625rem;font-weight:600;margin-bottom:4px} #moodboard .mbd-group{display:grid;gap:10px} #moodboard .mbd-group__name{font-size:.6875rem} #moodboard .mbd-swatches{display:grid;grid-template-columns:repeat(auto-fill, minmax(62px, 1fr));gap:10px} @media (max-width:1099px){#moodboard .mbd-swatches{grid-template-columns:repeat(auto-fill, minmax(66px, 1fr))}} #moodboard .mbd-sw{ position:relative;aspect-ratio:1;border-radius:var(--r-tile); box-shadow:var(--shadow-sample);transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } #moodboard .mbd-sw:hover{transform:translate(-2px,-3px);box-shadow:var(--shadow-lift)} #moodboard .mbd-sw .mat{position:absolute;inset:0;border-radius:inherit} #moodboard .mbd-sw__mark{ position:absolute;right:-6px;top:-6px;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--clay);color:#fff;box-shadow:0 2px 4px rgba(38,35,31,.3); transform:scale(0);transition:transform var(--dur-2) var(--ease-spring); } #moodboard .mbd-sw__mark .icon{width:14px;height:14px;stroke-width:2.4} #moodboard .mbd-sw[aria-pressed="true"]{transform:translate(1px,2px);box-shadow:1px 1px 0 rgba(38,35,31,.1), 2px 3px 5px -2px rgba(38,35,31,.25)} #moodboard .mbd-sw[aria-pressed="true"] .mat{opacity:.55} #moodboard .mbd-sw[aria-pressed="true"] .mbd-sw__mark{transform:scale(1)} #moodboard .mbd-sw:focus-visible{outline-offset:4px} #moodboard .mbd-sw[aria-disabled="true"]{opacity:.4;cursor:not-allowed} /* ---------- на столе ---------- */ #moodboard .mbd-sum{padding:clamp(20px, 2vw, 26px)} #moodboard .mbd-sum__title{font-size:1.5rem;font-weight:600;margin-bottom:12px} #moodboard .mbd-list{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:mb} #moodboard .mbd-list li{ counter-increment:mb;display:grid;grid-template-columns:18px 30px 1fr auto;align-items:center;gap:10px; padding:7px 0;border-bottom:1px solid var(--hair);font-size:.875rem;line-height:1.3; animation:mbd-in .45s var(--ease-out) both; } #moodboard .mbd-list li::before{content:counter(mb);font-family:var(--font-mono);font-size:.6875rem;color:var(--faint)} #moodboard .mbd-list .swatch{width:30px;height:30px} #moodboard .mbd-list b{display:block;font-weight:700} #moodboard .mbd-list small{color:var(--muted);font-size:.75rem} #moodboard .mbd-rm{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);transition:background-color var(--dur-1) ease, color var(--dur-1) ease} #moodboard .mbd-rm:hover{background:var(--hover-tint);color:var(--danger)} #moodboard .mbd-rm .icon{width:16px;height:16px} @keyframes mbd-in{from{opacity:0;transform:translateY(-6px)}} #moodboard .mbd-sum__empty{font-size:var(--fs-small);color:var(--muted);padding:6px 0 4px} #moodboard .mbd-sum__actions{display:grid;gap:10px;margin-top:18px} #moodboard .mbd-sum__note{font-size:.8125rem;color:var(--muted);line-height:1.45} /* ==== order.css ==== */ /* 09 · Заявка (#order, .od-*). Форма-лист + прямые контакты. Отправка — Telegram с готовым текстом. */ #order .od-layout{display:grid;gap:clamp(24px, 3vw, 48px);align-items:start} @media (min-width:1000px){#order .od-layout{grid-template-columns:minmax(0, 1fr) 360px}} #order .od-form{display:grid;gap:22px;background:var(--table);box-shadow:none} #order .od-row{display:grid;gap:16px} @media (min-width:700px){#order .od-row{grid-template-columns:1fr 1fr}} #order .seg .chip{background:var(--sheet);min-height:42px;padding:0 15px;font-size:.875rem} #order .seg .chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff} #order .od-submit{display:grid;gap:10px;justify-items:start} #order .od-submit__note{font-size:.8125rem;color:var(--muted);max-width:52ch} @media (max-width:599px){#order .od-submit .btn{width:100%}} #order .od-done{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:18px;border-radius:var(--r-1);background:#E2EDE3;animation:dl-in .4s var(--ease-out)} #order .od-done > .icon{width:32px;height:32px;padding:6px;border-radius:50%;background:var(--ok);color:#fff;stroke-width:2.4} #order .od-done b{font-size:1.0625rem} #order .od-done p{font-size:var(--fs-small);color:var(--ink);margin-top:4px} #order .od-done__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} #order .od-done:focus{outline:none} #order .od-side{display:grid;gap:12px;align-content:start} #order .od-phone{font-family:var(--font-body);font-weight:700;font-size:clamp(1.625rem, 1.4rem + 1vw, 2rem);letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums} #order .od-phone:hover{color:var(--clay-ink)} #order .od-status{font-size:var(--fs-small);color:var(--muted);white-space:normal} #order .od-social{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} #order .od-info{display:grid;gap:0;margin:10px 0 0} #order .od-info div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--hair)} #order .od-info dt{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:700} #order .od-info dt .icon{width:18px;height:18px;color:var(--clay-ink)} #order .od-info dd{margin:0;font-size:var(--fs-small);color:var(--muted);line-height:1.5} .chr-status{display:inline-flex;align-items:center;gap:8px} /* ==== partners.css ==== */ /* 07 · Партнёры (#partners, .pt-*). Раздел готовится: карточки-направления с пометкой «скоро». */ #partners .pt-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));gap:16px;list-style:none;padding:0;margin:0} #partners .pt-card{ display:grid;gap:10px;align-content:start;padding:24px 22px;border-radius:var(--r-2); background:rgba(251,249,245,.72);box-shadow:inset 0 0 0 1px var(--hair); transition:background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease; } #partners .pt-card:hover{background:var(--sheet);transform:translate(-2px,-3px);box-shadow:var(--shadow-soft)} #partners .pt-card .icon{width:30px;height:30px;color:var(--clay-ink)} #partners .pt-card h3{font-size:1.5rem;font-weight:600;margin-top:4px} #partners .pt-card p{font-size:var(--fs-small);color:var(--muted);line-height:1.5} #partners .pt-card .badge{justify-self:start;margin-top:6px} /* ==== podbor.css ==== */ /* ========================================================================== 01 · Подбор под проект (#podbor, .pb-*). Светлый лист после стола hero. Три карточки = три пункта концепции студии; у каждой — маленькая «вещь» на столе. ========================================================================== */ #podbor .pb-grid{display:grid;gap:clamp(20px, 2.4vw, 32px)} @media (min-width:900px){#podbor .pb-grid{grid-template-columns:repeat(3, minmax(0,1fr))}} #podbor .pb-card{ display:flex;flex-direction:column;gap:14px; padding:clamp(20px, 2vw, 28px);border-radius:var(--r-2); background:var(--table);position:relative; } #podbor .pb-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:var(--noise);opacity:.28;mix-blend-mode:multiply} #podbor .pb-card > *{position:relative;z-index:1} #podbor .pb-card__title{margin-top:8px} #podbor .pb-card__text{color:var(--muted);font-size:var(--fs-small);line-height:1.6} #podbor .pb-visual{ position:relative;height:clamp(210px, 20vw, 250px);border-radius:var(--r-1); display:flex;align-items:center;justify-content:center; } /* --- 1: «пин» из Pinterest → образцы --- */ #podbor .pb-visual--pin{justify-content:flex-start;gap:10px;padding-left:4px} #podbor .pb-pin{ position:relative;width:46%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;flex:none; box-shadow:var(--shadow-sample);transform:rotate(-2.5deg);background:#E9E6E0; } #podbor .pb-pin__wall{position:absolute;inset:0 0 52% 0} #podbor .pb-pin__apron{position:absolute;inset:48% 0 0 0} #podbor .pb-pin__apron::before{-webkit-mask-size:13px 22.5px !important;mask-size:13px 22.5px !important} #podbor .pb-pin__mirror{ position:absolute;left:30%;top:9%;width:40%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 35% 30%, #F7F6F3, #CDD6D8 60%, #AEB9BC); box-shadow:0 0 0 3px #B8914A, 2px 4px 8px rgba(38,35,31,.25); } #podbor .pb-pin__vanity{position:absolute;left:16%;right:16%;bottom:6%;height:24%;border-radius:2px;box-shadow:2px 4px 8px rgba(38,35,31,.3)} #podbor .pb-pin__vanity i{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(38,35,31,.25)} #podbor .pb-pin__basin{position:absolute;left:30%;right:30%;bottom:29%;height:8%;border-radius:50% 50% 6px 6px / 70% 70% 6px 6px;background:linear-gradient(#FFFFFF, #E6E4DF);box-shadow:0 2px 3px rgba(38,35,31,.2)} #podbor .pb-pin__leaf{position:absolute;right:6%;bottom:30%;width:22%;height:26%} #podbor .pb-pin__leaf i{position:absolute;bottom:0;left:40%;width:40%;height:80%;border-radius:0 100% 0 100%;background:#5E7A4F;transform-origin:0 100%} #podbor .pb-pin__leaf i:nth-child(1){transform:rotate(-30deg)} #podbor .pb-pin__leaf i:nth-child(2){transform:rotate(8deg);background:#6F8C5E;height:95%} #podbor .pb-pin__leaf i:nth-child(3){transform:rotate(40deg);height:70%} #podbor .pb-pin__tag{ position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.9); font:600 .625rem/1.2 var(--font-body);color:#B3261E;letter-spacing:.02em; } #podbor .pb-pin__arrow{width:40px;flex:none;fill:none;stroke:var(--clay);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #podbor .pb-match{display:grid;gap:10px;list-style:none;padding:0;margin:0} #podbor .pb-match li{display:flex;align-items:center;gap:10px} #podbor .pb-match__s{width:48px;height:48px;border-radius:var(--r-tile);box-shadow:var(--shadow-sample);flex:none} #podbor .pb-match li:nth-child(1) .pb-match__s{transform:rotate(3deg)} #podbor .pb-match li:nth-child(3) .pb-match__s{transform:rotate(-2deg)} #podbor .pb-match .spec{font-size:.6875rem} /* подбор «сходится»: образцы выезжают по одному после появления карточки */ html.js #podbor .pb-match li{opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease-out), transform .6s var(--ease-drop)} html.js #podbor .is-revealed .pb-match li{opacity:1;transform:none} #podbor .is-revealed .pb-match li:nth-child(1){transition-delay:.45s} #podbor .is-revealed .pb-match li:nth-child(2){transition-delay:.6s} #podbor .is-revealed .pb-match li:nth-child(3){transition-delay:.75s} #podbor .pb-checks{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:auto 0 0;font-size:var(--fs-small);font-weight:600} #podbor .pb-checks li{display:inline-flex;align-items:center;gap:6px} #podbor .pb-checks .icon{color:var(--ok);width:18px;height:18px} /* --- 2: стиль → три образца веером --- */ #podbor .pb-trio{position:relative;width:78%;height:78%} #podbor .pb-trio__s{ position:absolute;width:52%;aspect-ratio:1;border-radius:var(--r-tile);box-shadow:var(--shadow-sample); transition:transform .6s var(--ease-drop), opacity .3s ease; } #podbor .pb-trio__s:nth-child(1){left:2%;top:14%;transform:rotate(-7deg)} #podbor .pb-trio__s:nth-child(2){left:26%;top:4%;transform:rotate(2deg);z-index:1} #podbor .pb-trio__s:nth-child(3){left:48%;top:22%;transform:rotate(9deg);z-index:2} #podbor .pb-trio.is-swap .pb-trio__s{opacity:0;transform:translateY(-18px) rotate(0deg) scale(1.04)} #podbor .pb-chips,#podbor .pb-seg{display:flex;flex-wrap:wrap;gap:8px} #podbor .pb-chips .chip,#podbor .pb-seg .chip{min-height:40px;padding:0 14px;font-size:.875rem;background:var(--sheet)} #podbor .pb-chips .chip[aria-checked="true"],#podbor .pb-seg .chip[aria-checked="true"]{background:var(--ink)} #podbor .pb-note{font-size:var(--fs-small);line-height:1.55;color:var(--ink);min-height:3.1em;padding-left:14px;border-left:2px solid var(--clay)} /* --- 3: бюджет → стопка образцов растёт --- */ #podbor .pb-stack{position:relative;width:62%;height:80%} #podbor .pb-stack__s{ position:absolute;left:10%;width:80%;height:44%;border-radius:var(--r-tile);box-shadow:var(--shadow-sample); transition:transform .6s var(--ease-drop), opacity .35s ease; } #podbor .pb-stack__s:nth-child(1){top:46%;transform:rotate(-2deg)} #podbor .pb-stack__s:nth-child(2){top:26%;transform:rotate(3deg) translateX(8%)} #podbor .pb-stack__s:nth-child(3){top:6%;transform:rotate(-4deg) translateX(-6%)} #podbor [data-pb-stack][data-level="economy"] .pb-stack__s:nth-child(n+2){opacity:0;transform:translateY(-30px) rotate(0)} #podbor [data-pb-stack][data-level="middle"] .pb-stack__s:nth-child(3){opacity:0;transform:translateY(-30px) rotate(0)} #podbor .pb-seg-out{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:2px 0 0;font-size:var(--fs-small);line-height:1.5} #podbor .pb-seg-out dt{padding-top:.2em;font-size:.6875rem} #podbor .pb-seg-out dd{margin:0} /* --- призыв --- */ #podbor .pb-cta{ display:grid;gap:18px;align-items:center;margin-top:clamp(32px, 4vw, 56px); padding-top:clamp(24px, 3vw, 36px);border-top:1px solid var(--hair); } #podbor .pb-cta p{font-family:var(--font-display);font-size:clamp(1.375rem, 1.2rem + .8vw, 1.875rem);line-height:1.2;max-width:34ch} #podbor .pb-cta__btns{display:flex;flex-wrap:wrap;gap:10px} @media (min-width:1000px){#podbor .pb-cta{grid-template-columns:1fr auto}} @media (max-width:599px){#podbor .pb-cta__btns .btn{flex:1 1 100%}} /* ==== studio.css ==== */ /* ========================================================================== 06 · О студии (#studio, .st-*). Веер образцов — как каталожный «веер» из шоурума: полосы вращаются вокруг латунной заклёпки и раскрываются при появлении. ========================================================================== */ #studio .st-grid{display:grid;gap:clamp(40px, 5vw, 88px);align-items:center} @media (min-width:1000px){#studio .st-grid{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr)}} #studio .st-visual{position:relative;display:grid;justify-items:center;gap:12px} #studio .st-fan{ --len:min(360px, 78vw); --wid:calc(var(--len) * .19); position:relative;width:calc(var(--len) * 1.05);height:calc(var(--len) * 1.05); } #studio .st-fan__strip{ position:absolute;left:calc(var(--wid) * .5);bottom:calc(var(--wid) * .5); width:var(--wid);height:var(--len);margin-left:calc(var(--wid) * -.5); transform-origin:50% calc(100% - var(--wid) * .5); transform:rotate(-4deg); border-radius:3px;box-shadow:var(--shadow-sample); transition:transform 1.1s var(--ease-drop), box-shadow .3s ease; transition-delay:calc(var(--i) * 70ms); } #studio .st-fan__strip .mat{position:absolute;inset:0;border-radius:inherit} #studio .st-fan__strip b{ position:absolute;left:50%;top:10px;z-index:2;transform:translateX(-50%);writing-mode:vertical-rl; padding:6px 3px;border-radius:3px;background:rgba(251,249,245,.92); font:500 .625rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap; } /* раскрытый веер: 0…84° */ #studio .st-fan.is-revealed .st-fan__strip,html:not(.js) #studio .st-fan__strip{transform:rotate(calc(var(--i) * 12deg))} @media (hover:hover){ #studio .st-fan.is-revealed .st-fan__strip:hover{ transform:rotate(calc(var(--i) * 12deg)) translateY(-22px);box-shadow:var(--shadow-lift);transition-delay:0s;transition-duration:.45s; } } #studio .st-fan__rivet{ position:absolute;left:calc(var(--wid) * .5);bottom:calc(var(--wid) * .5);z-index:10; width:22px;height:22px;margin:0 0 -11px -11px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #F1DDA6, #B8914A 55%, #7E5F2A); box-shadow:1px 2px 3px rgba(38,35,31,.4); } #studio .st-since{display:flex;align-items:baseline;gap:12px;align-self:end} #studio .st-since__num{font-family:var(--font-display);font-size:clamp(3.5rem, 2.8rem + 3vw, 5.5rem);line-height:.9;font-weight:500;color:var(--clay-ink)} #studio .st-lead{margin-top:20px} #studio .st-mission{ margin-top:18px;padding-left:18px;border-left:2px solid var(--clay);max-width:54ch; font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem, 1.12rem + .5vw, 1.5rem);line-height:1.35; } #studio .st-points{display:grid;gap:20px;list-style:none;padding:0;margin:clamp(28px, 3vw, 40px) 0 0} @media (min-width:700px){#studio .st-points{grid-template-columns:1fr 1fr;gap:24px 32px}} #studio .st-points li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start} #studio .st-points .icon{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--table);color:var(--clay-ink)} #studio .st-points h3{font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:0;line-height:1.3} #studio .st-points p{margin-top:4px;font-size:var(--fs-small);color:var(--muted);line-height:1.55} #studio .st-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(28px, 3vw, 40px)} #studio .st-addr{font-size:var(--fs-small);color:var(--muted)}