/* ========================================================================== MM Group — design tokens Single source of truth. Nothing else in the theme hardcodes a colour, a font stack, a duration or an easing curve. Reference: docs/design-system.md TWO THEMES. The site ships a dark palette (the brand) and a light "gold" palette. The theme is an attribute on — `data-theme="light"` — and nothing else: no PHP branches on theme, because SiteGround's Speed Optimizer caches HTML and would otherwise serve one visitor's choice to the next. The whole light palette is the override block at the bottom of this file. Three groups of tokens, and the difference matters: 1. RAW palette — the two colour sets. Components never name these. 2. SEMANTIC — what components actually use. These flip with the theme. 3. FIXED — scrims and wells that sit over photography. White text on a photograph needs a dark scrim whatever the page around it is doing, so these do NOT flip. Inverting them is the one mistake that makes the hero and the brand cards unreadable. ========================================================================== */ /* --------------------------------------------------------------- Fonts --- Self-hosted woff2, Cyrillic + Latin subsets only. font-display: swap so text is never invisible. Cyrillic is declared first: it is the primary script and the browser then never fetches the Latin file for a page that has no Latin text. Switching typographic direction (see docs/design-system.md) is a change of --mm-font-display and --mm-font-text, nothing more. ------------------------------------------------------------------------- */ /* Both families are VARIABLE fonts: Google serves one file per subset covering the whole weight axis. Declaring a weight range means the browser downloads four files total instead of one per weight — 152 KB instead of 364 KB. */ @font-face{font-family:'Unbounded';font-style:normal;font-weight:300 600;font-display:swap; src:url('../fonts/unbounded-cyr.woff2') format('woff2-variations'), url('../fonts/unbounded-cyr.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Unbounded';font-style:normal;font-weight:300 600;font-display:swap; src:url('../fonts/unbounded-lat.woff2') format('woff2-variations'), url('../fonts/unbounded-lat.woff2') format('woff2'); 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:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/golos-cyr.woff2') format('woff2-variations'), url('../fonts/golos-cyr.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/golos-lat.woff2') format('woff2-variations'), url('../fonts/golos-lat.woff2') format('woff2'); 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: dark; /* ================================================== 1 · RAW palette ==== */ /* --- dark set --- Bronze is one colour in three tokens. Which one you use depends on the background, because #936E45 fails AA on dark (3.58:1) — the opposite of what the brief assumed. Numbers verified in docs/design-system.md. ---------------------------------------------------------------------- */ --mm-ink: #201F1A; /* warm near-black */ --mm-ink-90: #2A2822; /* alternating sections */ --mm-ink-80: #35322B; /* cards, inputs */ --mm-white: #FFFFFF; --mm-grey-100: #EDEDED; --mm-grey-300: #D2D2D2; --mm-grey-500: #A7A4A4; /* --- light set --- The same warm axis read from the other end: paper is warm off-white, not #FFF, and the type is warm graphite, not #000. Contrast for every pairing is computed in docs/design-system.md — none of it is assumed. ---------------------------------------------------------------------- */ --mm-paper: #FAF8F5; /* page */ --mm-paper-alt: #F2EEE8; /* alternating sections */ --mm-paper-2: #EAE4DB; /* cards, panels, media wells */ --mm-graphite: #1A1915; /* headings — 16.59:1 on paper */ --mm-graphite-80: #2E2B25; /* body — 13.31:1 */ --mm-graphite-60: #4E4940; /* secondary body — 8.43:1 */ --mm-graphite-40: #6B665C; /* labels, metadata — 5.38:1 */ /* --- bronze, shared by both themes --- */ --mm-bronze: #936E45; /* borders, rules, icons, fills */ --mm-bronze-lift: #BE9160; /* bronze text ON DARK — 5.82:1 */ --mm-bronze-deep: #7A5B39; /* bronze text ON LIGHT — 5.86:1 on paper */ --mm-ok: #369763; --mm-err: #C44E47; --mm-err-text: #E88C86; /* --- channel triplets --- Written as bare channels so a component can pick its own alpha without restating the colour. Which of these flips is the whole theme design: `scrim` and `scrim-accent` never do. */ --mm-scrim-rgb: 32 31 26; /* FIXED — ink over photography */ --mm-scrim-accent-rgb: 190 145 96; /* FIXED — bronze over photography */ --mm-accent-rgb: 147 110 69; /* FIXED — bronze, both themes */ --mm-bg-rgb: 32 31 26; /* flips — page background */ --mm-chrome-rgb: 32 31 26; /* flips — header, panels, sticky bars */ --mm-wash-rgb: 237 237 237; /* flips — hairlines and faint washes */ --mm-backdrop: rgb(15 14 12 / 82%); /* FIXED — dialog backdrop */ /* ============================================== 2 · SEMANTIC layer ===== */ /* Surfaces */ --mm-bg: var(--mm-ink); --mm-bg-alt: var(--mm-ink-90); --mm-surface: var(--mm-ink-90); /* media wells, dialogs */ --mm-surface-2: var(--mm-ink-80); /* cards, panels, plaques */ --mm-field-bg: var(--mm-ink-80); /* form controls */ /* Text */ --mm-fg: var(--mm-grey-100); --mm-fg-strong: var(--mm-white); --mm-fg-soft: var(--mm-grey-300); /* secondary body copy */ --mm-fg-muted: var(--mm-grey-500); /* labels, metadata */ /* Accent */ --mm-accent: var(--mm-bronze); /* borders, rules, fills, icons */ --mm-accent-text: var(--mm-bronze-lift); /* bronze AS TEXT in this theme */ --mm-accent-deep: var(--mm-bronze-deep); /* pressed/filled bronze */ --mm-on-accent: var(--mm-white); /* text on a bronze fill — 4.61:1 */ --mm-accent-wash: rgb(var(--mm-accent-rgb) / 8%); --mm-accent-wash-2:rgb(var(--mm-accent-rgb) / 16%); /* Lines and washes */ --mm-rule: rgb(var(--mm-wash-rgb) / 12%); --mm-rule-soft: rgb(var(--mm-wash-rgb) / 7%); --mm-hover-wash: rgb(var(--mm-wash-rgb) / 3%); --mm-ghost-border: rgb(var(--mm-wash-rgb) / 30%); --mm-ghost-fill: rgb(var(--mm-wash-rgb) / 10%); /* Chrome — the page's own furniture, which does flip */ --mm-chrome: rgb(var(--mm-chrome-rgb) / 86%); /* stuck header */ --mm-chrome-solid: rgb(var(--mm-chrome-rgb) / 97%); /* burger panel, sub-menu */ --mm-chrome-bar: rgb(var(--mm-chrome-rgb) / 94%); /* sticky bottom bars */ --mm-cta-scrim: rgb(var(--mm-scrim-rgb) / 88%); /* CTA over its photo */ /* Status */ --mm-ok-wash: rgb(54 151 99 / 10%); --mm-err-wash: rgb(196 78 71 / 10%); /* Misc that carries colour */ --mm-focus-color: var(--mm-bronze-lift); --mm-monogram-alpha: .26; /* ================================================= 3 · FIXED tokens ==== These never flip. A photograph does not change because the page around it did, and white type on a photograph needs a dark scrim in both themes. */ --mm-media-well: #35322B; /* the brand-card panel, which stays dark */ --mm-stage: #201F1A; /* lightbox */ --mm-stage-alt: #2A2822; /* lightbox slide letterbox */ --mm-scrim-accent: #BE9160; /* bronze that has to read on a photograph */ /* ------------------------------------------------------------ Type --- */ --mm-font-display: 'Unbounded', system-ui, sans-serif; --mm-font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --mm-size-display: clamp(48px, 7vw, 86px); --mm-size-h1: clamp(34px, 5.6vw, 80px); --mm-size-h2: clamp(26px, 3.6vw, 46px); --mm-size-h3: clamp(21px, 2.3vw, 30px); --mm-size-h4: clamp(18px, 1.6vw, 21px); --mm-size-lead: clamp(17px, 1.5vw, 20px); --mm-size-body: 18px; --mm-size-small: 15px; --mm-size-eyebrow: 12px; --mm-lh-display: 1.02; --mm-lh-heading: 1.14; --mm-lh-body: 1.65; --mm-track-tight: -.025em; --mm-track-eyebrow: .24em; /* ---------------------------------------------------------- Spacing --- */ --mm-gutter: clamp(20px, 5vw, 72px); /* 1360 → 1496 on 13.08.2026, +10%. On a 1920 screen 1360 left the filter rows on /proekti/ breaking onto an extra line while 280px of page sat empty on either side. Widening is NOT free and the two things it costs are handled with it, not after: the 1:1 card slot grows 389px → 435px, which pushes past the 400w rung of the square srcset ladder (hence mm-card-md, inc/setup.php) and past the measured `sizes` in card.php. Change this number alone and every card grid silently starts pulling the 800w crop — /proekti/ goes back from 391 KB to 1187 KB, which is the whole gain of 07.08.2026 handed back. */ --mm-max: 1496px; --mm-max-text: 68ch; --mm-section-y: clamp(72px, 10vw, 148px); /* The same interval, closed to ~0.61, for the boundary between two sections that share a background. Two full paddings meeting is 296px at 1480px and up — correct where the tone changes and the eye has an edge to hold, far too much where it does not. See the ".mm-section + .mm-section" block in main.css: this is a rule about the boundary, not an exception per section. */ --mm-section-y-tight: clamp(44px, 6vw, 88px); --mm-block-y: clamp(38px, 5vw, 64px); --mm-gap: clamp(14px, 1.6vw, 24px); /* ----------------------------------------------------------- Motion --- */ --mm-ease: cubic-bezier(.22, .61, .36, 1); --mm-dur-fast: .35s; --mm-dur: .5s; --mm-dur-slow: .8s; --mm-dur-reveal: .8s; /* ------------------------------------------------------------ Misc --- */ --mm-radius: 1px; /* the brand is square; this is a hairline, not a pill */ --mm-focus: 2px solid var(--mm-focus-color); --mm-header-h: 82px; } /* ========================================================================== The light theme — values only Every component below this line in main.css already speaks the semantic layer, so a second theme is a change of values, not of components. Not restated here, on purpose: · --mm-scrim-rgb / --mm-scrim-accent-rgb / --mm-media-well / --mm-stage — see group 3 above. · --mm-accent (#936E45) — a hairline, a rule or a fill, never small text. 4.35:1 on paper: fine for a 3:1 non-text border, not for body copy. · --mm-on-accent (#FFFFFF) — white on bronze is 4.61:1 in both themes. ========================================================================== */ :root[data-theme="light"]{ color-scheme: light; --mm-bg-rgb: 250 248 245; --mm-chrome-rgb: 250 248 245; --mm-wash-rgb: 32 31 26; --mm-bg: var(--mm-paper); --mm-bg-alt: var(--mm-paper-alt); --mm-surface: var(--mm-paper-alt); --mm-surface-2: var(--mm-paper-2); --mm-field-bg: #FFFFFF; --mm-fg: var(--mm-graphite-80); --mm-fg-strong: var(--mm-graphite); --mm-fg-soft: var(--mm-graphite-60); --mm-fg-muted: var(--mm-graphite-40); /* #BE9160 is 2.67:1 on paper — forbidden as text here. Deep is 5.86:1. */ --mm-accent-text: var(--mm-bronze-deep); --mm-accent-wash: rgb(var(--mm-accent-rgb) / 10%); --mm-accent-wash-2:rgb(var(--mm-accent-rgb) / 18%); /* Ink hairlines need a little more weight on paper than white ones do on ink. */ --mm-rule: rgb(var(--mm-wash-rgb) / 15%); --mm-rule-soft: rgb(var(--mm-wash-rgb) / 9%); --mm-hover-wash: rgb(var(--mm-wash-rgb) / 4%); --mm-ghost-border: rgb(var(--mm-wash-rgb) / 28%); --mm-ghost-fill: rgb(var(--mm-wash-rgb) / 8%); /* The CTA photograph is 88% obscured in either theme; here it goes pale rather than dark, so the last band of every page belongs to the page. */ --mm-cta-scrim: rgb(var(--mm-chrome-rgb) / 90%); /* #369763 is 3.44:1 and #C44E47 4.38:1 on paper — both short of AA for the 14px they are used at. Deepened until they pass. */ --mm-ok: #2C7C51; /* 4.82:1 */ --mm-err: #B23A33; /* 5.59:1 */ --mm-err-text: #B23A33; --mm-ok-wash: rgb(44 124 81 / 12%); --mm-err-wash: rgb(178 58 51 / 10%); --mm-focus-color: var(--mm-bronze-deep); /* 5.86:1 — lift is 2.67:1 */ --mm-monogram-alpha: .42; } @media (max-width: 760px){ :root{ --mm-size-body: 17px; --mm-header-h: 68px; } } /* No transition on the swap for anyone who has asked for less motion. */ @media (prefers-reduced-motion: no-preference){ html.mm-theme-anim, html.mm-theme-anim body, html.mm-theme-anim .mm-header, html.mm-theme-anim .mm-section--alt{ transition: background-color .32s var(--mm-ease), color .32s var(--mm-ease); } }