/* * Дизайн-система Decoro: «чертёж и образец». * Бумага цвета штукатурки, тушь, один синий цвет «синьки» для выбранного и активного; краски интерьера — только как образцы. * Общий файл: его подключают и сайт (Django), и планировщик (Vite). */ @font-face { font-family: 'Jost Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/jost-cyrillic-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Jost Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/jost-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Onest Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/onest-cyrillic-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/onest-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* шрифты: Jost — заголовки и цифры (геометрика чертёжного лекала), Onest — интерфейс и тексты */ --font-display: 'Jost Variable', 'Jost', 'Segoe UI', system-ui, sans-serif; --font-ui: 'Onest Variable', 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif; /* бумага и тушь */ --paper: #eeeeea; --surface: #fafaf8; --sunken: #e4e5e0; --ink: #161a22; --ink-2: #4b5360; --ink-3: #7a818c; --line: #d3d5ce; --line-strong: #b4b8ae; /* синька: выбранное, активное, фокус; кнопка действия — тушью */ --accent: #2340c4; --accent-ink: #ffffff; --accent-soft: #e3e8fb; --action: #161a22; --action-ink: #fafaf8; --danger: #b8322e; --ok: #2e7d5b; --warn: #9a6a12; /* образцы красок: те же, что в палитре планировщика */ --sw-lime: #e8dfd2; --sw-sage: #8f9a7e; --sw-clay: #c28a6a; --sw-rose: #d1a79d; --sw-smoke: #7f95a6; --sw-graphite: #3f4a52; /* холст редактора */ --canvas: #f3f3ef; --grid: #dcdcd5; --wall: #1c212b; --ghost: #7f95a6; /* форма */ --r-s: 6px; --r: 10px; --r-l: 16px; --shadow-1: 0 1px 2px rgba(22, 26, 34, .06), 0 2px 8px rgba(22, 26, 34, .05); --shadow-pop: 0 14px 44px rgba(22, 26, 34, .2), 0 2px 6px rgba(22, 26, 34, .08); --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); --ease: cubic-bezier(.2, .7, .2, 1); /* имена, которые уже использует планировщик */ --bg: var(--paper); --panel: var(--surface); --text: var(--ink); --muted: var(--ink-2); } [data-theme='dark'] { color-scheme: dark; --paper: #12151b; --surface: #1a1f28; --sunken: #0e1116; --ink: #e8eaee; --ink-2: #a2abb9; --ink-3: #7c8594; --line: #2b3340; --line-strong: #3d485a; --accent: #8aa2ff; --accent-ink: #0b1020; --accent-soft: #232c4a; --action: #e8eaee; --action-ink: #12151b; --danger: #ff7d78; --ok: #5fcf9f; --warn: #e0b45a; --canvas: #161a21; --grid: #272e3a; --wall: #e8e4da; --ghost: #8aa0c8; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 14px 44px rgba(0, 0, 0, .55); } /* ---------- основа ---------- */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); background: var(--paper); color: var(--ink); font-feature-settings: 'tnum' 0; -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.012em; line-height: 1.08; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- размерная линия с подписью: .dimline — название раздела ---------- */ .dimline { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-family: var(--font-display); font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .dimline::before, .dimline::after { content: ''; flex: 1; height: 14px; color: var(--line-strong); background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) var(--dim-side) center / 1px 13px no-repeat; } .dimline::before { --dim-side: left; } .dimline::after { --dim-side: right; } /* ---------- полоса образцов красок ---------- */ .chips-strip { display: flex; height: 8px; border-radius: 999px; overflow: hidden; } .chips-strip i { flex: 1; } .chips-strip i:nth-child(1) { background: var(--sw-lime); } .chips-strip i:nth-child(2) { background: var(--sw-sage); } .chips-strip i:nth-child(3) { background: var(--sw-clay); } .chips-strip i:nth-child(4) { background: var(--sw-rose); } .chips-strip i:nth-child(5) { background: var(--sw-smoke); } .chips-strip i:nth-child(6) { background: var(--sw-graphite); } /* ---------- фирменный
: размерная линия с перпендикулярными засечками ---------- Любой
на сайте и в планировщике рисуется так; hr.dim — то же имя для явных мест, hr.wrap — на всю ширину контента. Для разделителя с подписью:
текст
. */ hr, hr.dim { border: 0; height: 14px; margin: 3rem 0; color: var(--line-strong); background: linear-gradient(currentColor, currentColor) center / calc(100% - 2px) 1px no-repeat, linear-gradient(currentColor, currentColor) left center / 1px 13px no-repeat, linear-gradient(currentColor, currentColor) right center / 1px 13px no-repeat; } hr.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; } /* ---------- смена темы: новый вид проявляется кругом от места нажатия (themeTransition.ts, site/static/site/theme.js) ---------- */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { animation: theme-circle-reveal .55s ease-out forwards; z-index: 2; } @keyframes theme-circle-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); } } /* «уменьшить анимацию»: без перехода (themeTransition.ts не запускает его), а если запущен — мгновенно */ @media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }