/* ============================================================================ ESCX · дизайн-язык «Тепло» — токены и утилиты Одна идея: структуру держат не линии, а свет. Подключение: sand | ash | clay Зависимостей нет. Шрифт Inter подключается отдельно и не обязателен — вёрстка рассчитана на деградацию к системному гротеску. ============================================================================ */ :root{ /* --- бумага и чернила --- */ --paper:#FCFBF8; --paper-2:#F6F4EE; --paper-3:#EFEBE2; --ink:#191817; --ink-2:#6E6A62; --ink-3:#A7A299; --ink-4:#C9C4B9; /* --- температурная шкала: пепел → песок → янтарь → глина → жар --- Намеренно не проходит через чистый красный и зелёный: красно-зелёная семантика нечитаема примерно для 8 % мужчин и тянет за собой оценку «хорошо / плохо», которой в данных нет. */ --t0:#7E8B92; --t1:#A0977F; --t2:#BE9750; --t3:#C4703B; --t4:#A83F2B; --accent:#C4703B; /* --- типографика --- */ --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* --- ритм: 8 пунктов --- */ --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:104px; /* --- радиусы: мягкие, теней нет --- */ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:100px; } :root[data-tint="ash"]{ --paper:#FBFBFC; --paper-2:#F2F3F5; --paper-3:#E9EBEE; --ink:#16181A; --ink-2:#666B72; --ink-3:#A0A5AC; --ink-4:#C4C8CE; --t0:#7C8B98; --t1:#8E93A0; --t2:#9C8FA6; --t3:#A9718A; --t4:#93414F; --accent:#5C7A93; } :root[data-tint="clay"]{ --paper:#FDFAF8; --paper-2:#F8F1EC; --paper-3:#F1E6DE; --ink:#1C1716; --ink-2:#75665F; --ink-3:#AE9F95; --ink-4:#D2C4B9; --t0:#8E8C8E; --t1:#B29079; --t2:#C58A5C; --t3:#BC5F45; --t4:#96322F; --accent:#BC5F45; } /* ============================================================================ БАЗА ============================================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit} /* Grayscale-тест. Правило продукта: интерфейс обязан оставаться читаемым без цвета. Держите класс в CI-скриншотах, а не только в голове. */ .escx-nocolor{filter:saturate(0)} /* ============================================================================ ТИПОГРАФИКА · контраст масштаба вместо контраста веса. Жирного начертания в продукте нет: оно грубит и создаёт «чёткую линию». ============================================================================ */ .display{font-size:clamp(56px,9vw,104px);font-weight:200;letter-spacing:-.05em;line-height:.9} .big {font-size:44px;font-weight:200;letter-spacing:-.04em;line-height:1} .mid {font-size:26px;font-weight:300;letter-spacing:-.025em} .h1 {font-size:26px;font-weight:400;letter-spacing:-.022em;line-height:1.25} .h2 {font-size:19px;font-weight:400;letter-spacing:-.018em} .lede {font-size:16px;font-weight:300;line-height:1.75;color:var(--ink-2)} .note {font-size:12.5px;line-height:1.7;color:var(--ink-3)} .micro {font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)} /* Числа всегда табличные: при ежедневном обновлении пропорциональные цифры «прыгают» по ширине, и глаз читает изменение там, где его нет. */ .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ============================================================================ ЧЕТЫРЕ ПРИЁМА, КОТОРЫМИ ЗАМЕНЕНЫ ЛИНИИ ============================================================================ */ /* 1. Растворяющийся край — вместо border. Не начинается и не заканчивается. */ .fade{ height:1px;border:0; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 11%, transparent) 22%, color-mix(in srgb, var(--ink) 11%, transparent) 62%, transparent 100%); } .fade-v{ width:1px;border:0; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent) 30% 70%, transparent); } /* 2. Мягкое поле — вместо рамки. */ .field{background:var(--paper-2);border-radius:var(--r-lg);padding:var(--s5)} .screen{ background:var(--paper);border-radius:var(--r-xl);padding:clamp(24px,4vw,54px); position:relative;overflow:hidden; box-shadow:0 1px 2px rgb(25 24 23 / .04), 0 22px 60px -30px rgb(25 24 23 / .16); } /* 3. Световое пятно — вместо тени. Ставится абсолютом внутри .screen. */ .glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(50px);z-index:0} /* 4. Тепловая заливка строки — накал выражается не цветом текста, а тем, насколько тёплым выглядит участок поверхности. Переменную --heat задаёт JS: escxHeatWash(value). */ .heatrow{position:relative;border-radius:var(--r-md);transition:background .3s ease} .heatrow::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(90deg, transparent 34%, var(--heat, transparent) 100%); opacity:.85; } .heatrow > *{position:relative;z-index:1} .heatrow:hover{background:color-mix(in srgb, var(--ink) 3%, transparent)} /* Слабые данные выглядят слабыми: тёплый свет к ним не применяется. Нельзя показывать уверенность, которой нет. */ .heatrow.is-stale{--heat:transparent} .heatrow.is-stale .num,.heatrow.is-stale .name{opacity:.42} /* ============================================================================ ЭЛЕМЕНТЫ ============================================================================ */ .track{height:3px;border-radius:2px;position:relative;overflow:hidden; background:color-mix(in srgb, var(--ink) 7%, transparent)} .track > i{position:absolute;inset:0 auto 0 0;border-radius:2px;display:block} .ember{width:9px;height:9px;border-radius:50%;background:var(--t3);display:inline-block; box-shadow:0 0 0 5px color-mix(in srgb, var(--t3) 16%, transparent), 0 0 18px color-mix(in srgb, var(--t3) 55%, transparent)} .pill{font-size:11.5px;color:var(--ink-3);padding:6px 12px;border-radius:var(--r-pill); transition:color .25s, background .25s} .pill:hover{color:var(--ink-2)} .pill[aria-pressed="true"],.pill.is-on{color:var(--ink);background:var(--paper-3)} .shell{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,72px)} /* ============================================================================ ДОСТУПНОСТЬ ============================================================================ */ @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} } :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}