/** * Template fonts — THE single @font-face source (UNIFIED-TEMPLATE-1, * task 72). Golos Text (400/600, Cyrillic-first subsets) + Caveat 500 * (handwriting display accents; SIL OFL 1.1 — see apps/web/public/fonts/ * OFL.txt). Both surfaces import this sheet; app-local @font-face * declarations are retired. * * Font FILES stay origin-served under /fonts/ (apps/web/public/fonts/) — * the two surfaces share one origin by deployment design, so one URL set * serves both. The family stack itself is --snt-font in tokens.css. * * The latin subset carries the cabinet's (broader) unicode-range: it is a * superset of the site's previous range, so the cabinet renders * byte-identically while the site gains Golos glyphs for rare punctuation * it previously left to the system fallback. */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cyrillic-400-normal.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; font-display: swap; src: url("/fonts/latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: 600; font-display: swap; src: url("/fonts/cyrillic-600-normal.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: 600; font-display: swap; src: url("/fonts/latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Caveat (Google Fonts, OFL) — handwriting accents (slogans, hero lines); never body text or UI controls. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/caveat-500-cyr-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/caveat-500-cyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/caveat-500-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; } /* Design tokens — UX-1 step 1 (task 71-CABINET-REDESIGN-2): the PALETTE no longer lives here. This sheet imports the shared @snt/design-tokens palette and keeps only ROLE ALIASES (the web app's established --color-* names) so the whole existing site CSS keeps working while the VALUES come from the one consolidated source consumed by the cabinet too. Contrast contract (unchanged rule: text colors AA on their backgrounds): - Text never sits on the bright logo orange; text-grade accent is the deep amber --snt-accent; the alias --color-accent maps to it. - --color-accent-bright (the brand fill #F5820A) pairs with graphite ink labels (--snt-accent-bright-ink) and never carries text alone. - The cream family unifies onto the cabinet's accepted values (#FBF6F0 ground, #FFFDF9 sidebar-family) — the owner's «единый шаблон оформления» directive (mockup notes 2026-09-17, «проблемы общие»). The visual delta vs the previous #FDF8ED/#F4EFE6 pair is a subtle warm shift only. UNIFIED-TEMPLATE-1 (task 72): the spacing/type/radius/shadow primitives moved into the shared sheet too — the aliases below now POINT AT the @snt/design-tokens values (--snt-space-*, --snt-fs-*, --snt-radius-*, --snt-shadow-*) instead of redefining them. Only the site's own layout variables (grid, hero heights, z-order) stay site-local: they are not template vocabulary. Radii/shadows unify onto the cabinet v2 (accepted template) values — a subtle site-side shift toward the one look. *//** * Design tokens — THE single palette source (UX-1 step 1, task * 71-CABINET-REDESIGN-2; owner directive «единый шаблон оформления»). * * Consumed by the web cabinet (apps/cabinet) AND the public site (apps/web): * both import this sheet FIRST; app-local sheets may add layout/component * variables but MUST NOT redefine palette values. Theming is design-token * driven by this sheet (one template swap point for a future skin); * multi-identity (multi-tenant) product decisions are recorded outside * this repository. * * UNIFIED-TEMPLATE-1 (task 72): the sheet also owns the shared NON-color * primitives — spacing scale, type scale, the shadow family, the warm band * tones and the soft info-border — so radii/shadows/spacing/typography are * single-sourced next to the palette (see docs/agent/DESIGN_TEMPLATE.md). * * Values are the accepted CABINET-REDESIGN-1 system (owner mockups * 2026-09-14, evolved 2026-09-17) — the public site's near-identical palette * (#FDF8ED cream family) is unified onto these exact values. * * Accessibility floor is binding: AA text contrast decides values. Text * never sits on the bright fill orange; text-grade accent is the deep amber. */ /* ==== light (default) =================================================== */ :root { color-scheme: light; /* surfaces */ --snt-bg: #fbf6f0; /* cream page ground */ --snt-bg-sidebar: #fffdf9; --snt-card-bg: #ffffff; --snt-surface-subtle: #f6efe6; --snt-text: #2b2620; /* warm charcoal */ --snt-muted: #6e645a; --snt-faint: #97897b; --snt-border: #efe7da; --snt-border-strong: #dccfb9; /* brand accent */ --snt-accent: #b23a0a; /* text-grade deep amber: links/active (AA on peach + white) */ --snt-accent-hover: #9a3412; --snt-accent-bright: #f5820a; /* fills only, never text */ --snt-accent-bright-hover: #e07400; --snt-accent-bright-ink: #2b2620; --snt-accent-soft: #fceadb; /* peach tile/active background */ /* semantic */ --snt-danger: #b3382e; --snt-danger-ink: #a12f26; --snt-danger-soft: #fbecea; --snt-warn-ink: #8a5800; --snt-warn-soft: #fcf3dc; --snt-info: #2c5e9e; --snt-info-soft: #e9f0f9; /* success text uses the 01_V2_7 web a11y fix (#27733D reaches 5.1:1 on --snt-success-soft where #2e7d46 measured 4.45:1 — axe WCAG AA serious); --snt-success-ink stays the strong-emphasis variant. */ --snt-success: #27733d; --snt-success-ink: #1d5c33; --snt-success-soft: #e7f3e9; --snt-purple: #5b4bc4; --snt-purple-soft: #eeebfa; /* decorative warm-yellow accents (site hero/illustrations; never text) */ --snt-sun: #ffd166; --snt-sun-soft: #fff3d2; --snt-text-inverse: #ffffff; --snt-focus: #c2410c; /* shape + typography primitives (font FILES are loaded per-app — the paths are origin-specific — only the stack lives here) */ --snt-radius-control: 10px; --snt-radius-card: 16px; --snt-radius-pill: 999px; --snt-shadow-card: 0 1px 2px rgba(41, 37, 36, 0.05), 0 16px 32px -24px rgba(41, 37, 36, 0.28); --snt-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* ==== shared primitives (task 72) ====================================== */ /* spacing scale (xs..4xl) */ --snt-space-xs: 4px; --snt-space-sm: 8px; --snt-space-md: 12px; --snt-space-lg: 16px; --snt-space-xl: 24px; --snt-space-2xl: 32px; --snt-space-3xl: 48px; --snt-space-4xl: 64px; /* type scale — the public site's accepted display sizes; cabinet keeps its component-local sizes until a wave migrates it */ --snt-fs-h1: 2.125rem; /* 34 */ --snt-fs-h2: 1.625rem; /* 26 */ --snt-fs-h3: 1.25rem; /* 20 */ --snt-fs-body: 1.0625rem; /* 17 */ --snt-fs-small: 0.875rem; /* 14 */ --snt-fs-lead: 1.1875rem; /* 19 — page/section lead paragraphs */ --snt-fs-hero: clamp(2.375rem, 1.5rem + 3.6vw, 4rem); --snt-lh-body: 1.55; --snt-lh-heading: 1.15; /* shadow family (the dark blocks override every member) */ --snt-shadow-raised: 0 8px 24px rgba(41, 37, 36, 0.14); --snt-shadow-card-hover: 0 2px 4px rgba(41, 37, 36, 0.05), 0 18px 36px -20px rgba(41, 37, 36, 0.26); --snt-shadow-frame: 0 32px 72px -44px rgba(41, 37, 36, 0.35); /* warm band tones behind hero/internal-hero/login artwork + the cream wash that keeps cues readable over art; soft info-panel border; pressed-hover step for danger fills (site values, now tokenized) */ --snt-band: #FDF6E3; --snt-band-wash: rgba(253, 248, 237, 0.88); --snt-info-border: #D7E3F2; --snt-danger-hover: #92291F; } /* ==== dark (explicit toggle) ============================================ */ :root[data-theme="dark"] { color-scheme: dark; --snt-bg: #12100e; --snt-bg-sidebar: #181512; --snt-card-bg: #1c1916; --snt-surface-subtle: #26221d; --snt-text: #f1ebe2; --snt-muted: #b3a99c; --snt-faint: #8c8276; --snt-border: #2c2822; --snt-border-strong: #3a342c; --snt-accent: #f5a55c; /* AA text-grade on dark ground */ --snt-accent-hover: #f8b87e; --snt-accent-bright: #f5820a; --snt-accent-bright-hover: #ff9326; --snt-accent-bright-ink: #241505; --snt-accent-soft: rgba(245, 130, 10, 0.16); --snt-danger: #f0968d; --snt-danger-ink: #f4a89f; --snt-danger-soft: rgba(179, 56, 46, 0.2); --snt-warn-ink: #f2c15c; --snt-warn-soft: rgba(222, 164, 45, 0.16); --snt-info: #8fb6e8; --snt-info-soft: rgba(64, 120, 190, 0.2); --snt-success: #7cc98f; --snt-success-ink: #93d4a4; --snt-success-soft: rgba(46, 125, 70, 0.2); --snt-purple: #b4a7ee; --snt-purple-soft: rgba(109, 91, 208, 0.24); --snt-sun: #ffd166; --snt-sun-soft: rgba(255, 209, 102, 0.14); --snt-text-inverse: #ffffff; --snt-focus: #f5a55c; --snt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 32px -20px rgba(0, 0, 0, 0.55); --snt-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.5); --snt-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 36px -20px rgba(0, 0, 0, 0.6); --snt-shadow-frame: 0 32px 72px -44px rgba(0, 0, 0, 0.65); --snt-band: #26221d; --snt-band-wash: rgba(38, 34, 29, 0.88); --snt-info-border: rgba(143, 182, 232, 0.35); --snt-danger-hover: #f4a89f; } /* No explicit choice: follow the system. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --snt-bg: #12100e; --snt-bg-sidebar: #181512; --snt-card-bg: #1c1916; --snt-surface-subtle: #26221d; --snt-text: #f1ebe2; --snt-muted: #b3a99c; --snt-faint: #8c8276; --snt-border: #2c2822; --snt-border-strong: #3a342c; --snt-accent: #f5a55c; --snt-accent-hover: #f8b87e; --snt-accent-bright: #f5820a; --snt-accent-bright-hover: #ff9326; --snt-accent-bright-ink: #241505; --snt-accent-soft: rgba(245, 130, 10, 0.16); --snt-danger: #f0968d; --snt-danger-ink: #f4a89f; --snt-danger-soft: rgba(179, 56, 46, 0.2); --snt-warn-ink: #f2c15c; --snt-warn-soft: rgba(222, 164, 45, 0.16); --snt-info: #8fb6e8; --snt-info-soft: rgba(64, 120, 190, 0.2); --snt-success: #7cc98f; --snt-success-ink: #93d4a4; --snt-success-soft: rgba(46, 125, 70, 0.2); --snt-purple: #b4a7ee; --snt-purple-soft: rgba(109, 91, 208, 0.24); --snt-sun: #ffd166; --snt-sun-soft: rgba(255, 209, 102, 0.14); --snt-text-inverse: #ffffff; --snt-focus: #f5a55c; --snt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 32px -20px rgba(0, 0, 0, 0.55); } } /* elements.css (the .snt-* element layer) is NOT imported site-wide: only the login surface consumes it today, so login.astro imports it page-scoped to keep the global CSS bundle inside its budget (task 72, budget gate). */ :root { /* The public site is light-only for now: pin the theme explicitly so the shared sheet's prefers-color-scheme dark block can never flip the site palette on dark-system devices (the cabinet owns its own toggle). */ color-scheme: light; /* semantic color roles → shared palette */ --color-bg: var(--snt-bg); /* warm cream layer (hero band, soft fills) */ --color-page: var(--snt-bg); /* one continuous warm page surface */ --color-surface: var(--snt-card-bg); --color-surface-subtle: var(--snt-surface-subtle); --color-text: var(--snt-text); --color-text-muted: var(--snt-muted); --color-text-inverse: var(--snt-text-inverse); --color-border: var(--snt-border); --color-border-strong: var(--snt-border-strong); --color-accent: var(--snt-accent); --color-accent-hover: var(--snt-accent-hover); --color-accent-soft: var(--snt-accent-soft); --color-accent-bright: var(--snt-accent-bright); --color-accent-bright-ink: var(--snt-accent-bright-ink); --color-accent-bright-hover: var(--snt-accent-bright-hover); --color-danger-hover: var(--snt-danger-hover); --color-band: var(--snt-band); --color-band-wash: var(--snt-band-wash); --color-info-border: var(--snt-info-border); --color-sun: var(--snt-sun); --color-sun-soft: var(--snt-sun-soft); --color-ink-hero: var(--snt-text); --color-focus: var(--snt-focus); --color-success: var(--snt-success); --color-success-soft: var(--snt-success-soft); --color-warning: var(--snt-warn-ink); --color-warning-soft: var(--snt-warn-soft); --color-danger: var(--snt-danger); --color-danger-soft: var(--snt-danger-soft); --color-info: var(--snt-info); --color-info-soft: var(--snt-info-soft); /* shared primitives — aliased 1:1 onto the template values (task 72) */ --space-xs: var(--snt-space-xs); --space-sm: var(--snt-space-sm); --space-md: var(--snt-space-md); --space-lg: var(--snt-space-lg); --space-xl: var(--snt-space-xl); --space-2xl: var(--snt-space-2xl); --space-3xl: var(--snt-space-3xl); --space-4xl: var(--snt-space-4xl); /* radius / border / shadow — the template values (cabinet v2 authority) */ --radius-control: var(--snt-radius-control); --radius-card: var(--snt-radius-card); --radius-large: var(--snt-radius-card); --radius-pill: var(--snt-radius-pill); --border: 1px solid var(--color-border); --shadow-raised: var(--snt-shadow-raised); --shadow-card: var(--snt-shadow-card); --shadow-card-hover: var(--snt-shadow-card-hover); --shadow-frame: var(--snt-shadow-frame); /* typography — aliased onto the template scale (Golos Text 400/600 only; no 700 face is vendored, faux bold is not acceptable). --fs-hero is the homepage hero display size: ~38px mobile → 64px desktop, hero-only, never applied to page H1s. Page H1s keep the approved display scale (34px mobile → 46px desktop). */ --font-sans: var(--snt-font); --fs-h1: var(--snt-fs-h1); --fs-h2: var(--snt-fs-h2); --fs-h3: var(--snt-fs-h3); --fs-body: var(--snt-fs-body); --fs-small: var(--snt-fs-small); --fs-lead: var(--snt-fs-lead); --fs-hero: var(--snt-fs-hero); --lh-body: var(--snt-lh-body); --lh-heading: var(--snt-lh-heading); /* layout --content-max: global site grid (header/home/footer shell). --inner-max / --inner-wide-max: the single inner-page column: page-head and page content share one axis; the wide variant serves list/document/directory blocks. */ --content-max: 1200px; --inner-max: 840px; --inner-wide-max: 1040px; --gutter: 16px; --touch-target: 44px; /* 00_V2_3 fidelity: warm band behind the header row — one continuous warm surface with the page (the value rides the shared cream token). */ --header-bg: var(--snt-bg); /* 01_V2_6 MASTER INTERNAL HERO — fixed height contract (task §7): one height per breakpoint for EVERY internal route; long H1s/leads wrap inside the text container, they never size the band. Crop geometry is constant: object-fit/object-position are fixed per breakpoint in components.css and identical on all routes. */ --internal-hero-height-mobile: 232px; --internal-hero-height-tablet: 272px; --internal-hero-height-desktop: 320px; /* stacking order: page content < scroll-to-top (40) < sticky header and its menus (50) < skip link (100). The scroll control must never overlay an open mobile sheet or dropdown. */ --z-to-top: 40; --z-header: 50; } @media (min-width: 768px) { :root { --gutter: 24px; --fs-h1: 2.875rem; } } /* Base element styles and layout primitives — TASK 01_V2_1 redesign baseline (preserves the accepted page-shell/column system; palette follows the new tokens). */ *, *::before, *::after { box-sizing: border-box; } /* 62 MICRO-BATCH-1 (Item A): public font-scale (AAA). The control sets one root class (`font-scale-large` / `font-scale-xlarge`, remembered in localStorage and applied pre-paint by the BaseLayout head script). The scale rides the rem cascade: root font-size 100% → 125% → 150%, so every text size — token-driven or hardcoded rem/em — grows together, while the px-based layout system (container widths, spacing tokens, touch targets, breakpoints) is untouched. The internal hero re-declares its --internal-hero-height-* tokens per scale as proportionally larger MINIMUMS — since 81-WEB-VISUAL-FIX-1 the band grows with its content (long H1 + breadcrumbs are never clipped), so these tokens only set the short-title band height per scale. The size change is plain synchronous CSS — no animation or transition anywhere, so prefers-reduced-motion has nothing to accommodate. */ html { font-size: 100%; } html.font-scale-large { font-size: 125%; } html.font-scale-xlarge { font-size: 150%; } html.font-scale-large { --internal-hero-height-mobile: 264px; --internal-hero-height-tablet: 304px; --internal-hero-height-desktop: 368px; } html.font-scale-xlarge { --internal-hero-height-mobile: 296px; --internal-hero-height-tablet: 344px; --internal-hero-height-desktop: 416px; } html { -webkit-text-size-adjust: 100%; /* Anchor offsets sized to the responsive sticky header: header is 64px below 480px, 72px otherwise. */ scroll-padding-top: 84px; scroll-behavior: smooth; } @media (max-width: 479px) { html { scroll-padding-top: 76px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-page); } h1, h2, h3 { line-height: var(--lh-heading); margin: 0 0 var(--space-lg); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--space-lg); } small, .small { font-size: var(--fs-small); } .muted { color: var(--color-text-muted); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-muted); } ul { margin: 0 0 var(--space-lg); padding-left: 1.25em; } ol { margin: 0 0 var(--space-lg); padding-left: 1.25em; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-surface); padding: var(--space-md) var(--space-lg); z-index: 100; border-radius: var(--radius-control); } .skip-link:focus { left: var(--space-lg); top: var(--space-lg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Layout */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding-block: var(--space-3xl); } .section--tight { padding-block: var(--space-2xl); } .section + .section { padding-block-start: 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); } .grid { display: grid; gap: var(--space-xl); } /* Inner-page column system: one shared column per page. `.page-column` centers the default (prose/reference) column; the wide variant serves lists, document blocks and two-column layouts. The sections keep `padding-block` (not the `padding` shorthand) so `.container`'s horizontal gutter always survives — the pre-03E mobile flush-edge bug. */ .page-column { max-width: var(--inner-max); } .page-column--wide { max-width: var(--inner-wide-max); } /* Head → content join: the InternalPageHero band ends in its own border, so the first section keeps its regular top padding (no collapse rule needed). */ /* Desktop page frame: the whole site sits on a white surface over a warm neutral page background — a composed, framed editorial feel without turning inner pages into floating cards. Below 1280px the shell is simply full-width and invisible. Horizontal spill is clipped with `overflow-x: clip`, which — unlike the former `overflow: hidden` — does not create a scroll container, so the sticky header keeps working and dropdown panels stay visible. */ .page-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-surface); overflow-x: clip; } .page-shell > main { flex: 1 0 auto; } @media (min-width: 1280px) { body { padding: var(--space-lg) var(--space-xl) 0; } .page-shell { width: 100%; max-width: 1440px; margin: 0 auto; border-radius: var(--radius-large) var(--radius-large) 0 0; box-shadow: var(--shadow-frame); } /* The header paints the shell's rounded top corners (the shell itself no longer clips its children vertically). */ .site-header { border-radius: var(--radius-large) var(--radius-large) 0 0; } } /* Component language — TASK 01_V2_1 redesign. Preserves the accepted IA, interaction contracts and accessibility skeleton (dropdown click-toggle, labeled mobile menu, 44px targets, reduced-motion kill switch); retints the visual language to the logo-anchored amber/graphite/warm-neutral system. The pagination block is a small CHAT-03 addition consistent with the accepted component language. */ /* ---------- Header / navigation ----------------------------------------- */ /* Sticky global header: `position: sticky` keeps it in flow (no permanent hidden content), with a subtle scrolled state — a slightly stronger separator and a soft shadow, no shrinking animation. The transition is disabled globally under prefers-reduced-motion. */ .site-header { background: var(--header-bg); border-bottom: var(--border); position: sticky; top: 0; z-index: var(--z-header); transition: box-shadow 160ms ease, border-color 160ms ease; } .site-header.is-stuck { border-bottom-color: var(--color-border-strong); box-shadow: 0 8px 24px -18px rgba(41, 37, 36, 0.28); } .site-header__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; } /* Brand (UNIFIED-TEMPLATE-1, task 72): the shared template lockup — the package master mark + two-line wordmark, the SAME composition the cabinet header renders (the site-only raster wordmark is retired). The aria-label on the wrapping link carries the accessible name. */ .logo { display: flex; align-items: center; text-decoration: none; color: var(--color-text); min-width: 0; flex: none; } .brand-lockup { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; } /* 78-HEADER-LOGO-SIZE-1 (owner visual finding): the mark read too small — 56px desktop. The img CARRIES .brand-lockup__mark itself (no inner img: the old `.brand-lockup__mark img` descendant rule matched nothing and the rendered size silently rode the HTML width/height attributes), so anchor the sizes on .logo — the footer lockup keeps its own attribute sizing untouched. Fixed px: the mark never rides the public font-scale, and the 72px header row already contains it, so nothing below the header moves. */ .logo .brand-lockup__mark { display: block; height: 56px; width: auto; } /* Below 768px the lockup renders mark-only: at 150% public font-scale the 412px header row (compact CTA + «Меню») has no room for the wordmark — the old 69px raster fit with ~3px to spare. The accessible name lives on the wrapping link either way. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .main-nav { display: none; margin-left: auto; } /* Top-level list only: descendants (dropdown panels) must keep their own display state — a bare `.main-nav ul` flex rule would out-specify `.nav-sub__menu { display: none }` and leak closed menus (TASK-02D R-01). */ .main-nav > ul { display: flex; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; } .main-nav a, .main-nav .nav-sub > button { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--touch-target); padding: 0 var(--space-md); color: var(--color-text); text-decoration: none; font-size: 1rem; background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; font-family: inherit; } .main-nav a:hover, .main-nav .nav-sub > button:hover { background: var(--color-surface-subtle); } /* Active section: 600 text + bright-amber underline bar (non-text indicator). */ .main-nav a[aria-current="page"] { color: var(--color-text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--color-accent); border-radius: var(--radius-control) var(--radius-control) 0 0; } .nav-sub { position: relative; } .nav-sub > button::after { content: "▾"; color: var(--color-text-muted); font-size: 0.875em; } .nav-sub__menu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--color-surface); border: var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); padding: var(--space-sm); list-style: none; margin: 0; z-index: 20; } .nav-sub.is-open .nav-sub__menu { display: block; } .nav-sub__menu a { display: block; min-height: var(--touch-target); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); } .nav-sub__menu a[aria-current="page"] { color: var(--color-accent); font-weight: 600; box-shadow: none; border-radius: var(--radius-control); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); } .site-header__cta { min-height: 42px; padding: 0 var(--space-lg); box-shadow: 0 8px 16px -10px rgba(41, 37, 36, 0.4); } .nav-toggle { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-target); padding: 0 var(--space-md); background: none; border: var(--border); border-radius: var(--radius-control); font-family: inherit; font-size: 1rem; color: var(--color-text); cursor: pointer; } .nav-toggle:hover { background: var(--color-surface-subtle); } /* Cabinet CTA compact variant (TASK-02D R-02): full label ≥480px, short label below — the row must fit 360px without overflow. */ .btn__label-compact { display: none; } @media (max-width: 479px) { /* 78-HEADER-LOGO-SIZE-1: compact-row mark 44px — the one-line 360px header (mark + compact CTA + «Меню») still holds (header-lockup.spec.ts pins the geometry). */ .site-header__inner { gap: var(--space-sm); min-height: 64px; } .logo .brand-lockup__mark { height: 44px; } .site-header .mobile-menu { min-height: calc(100dvh - 64px); max-height: calc(100dvh - 64px); } .header-actions { gap: var(--space-sm); } .btn__label-full { display: none; } .btn__label-compact { display: inline; } .header-actions .site-header__cta { padding: 0 var(--space-md); box-shadow: none; } .nav-toggle { padding: 0 var(--space-md); } } /* 81-WEB-VISUAL-FIX-1 (owner finding, task-62 AAA contract): at the enlarged public font scales the 1024px row cannot hold nav + font-scale strip + CTA — measured live, the CTA left the viewport at 1024×125% and 1024×150% (and horizontal scroll cannot reach it). The desktop nav now engages from 1280px under the enlarged scales; below that the compact menu (nav toggle + sheet + header font-scale strip) keeps EVERY action reachable at EVERY font-size step. Standard scale keeps the 1024px breakpoint (fits with margin). The enhancement script in Header.astro mirrors these thresholds — keep them in sync. */ @media (min-width: 1024px) { html:not(.font-scale-large):not(.font-scale-xlarge) .main-nav { display: block; } html:not(.font-scale-large):not(.font-scale-xlarge) .header-actions { margin-left: 0; } html:not(.font-scale-large):not(.font-scale-xlarge) .nav-toggle { display: none; } } @media (min-width: 1280px) { html.font-scale-large .main-nav, html.font-scale-xlarge .main-nav { display: block; } html.font-scale-large .header-actions, html.font-scale-xlarge .header-actions { margin-left: 0; } html.font-scale-large .nav-toggle, html.font-scale-xlarge .nav-toggle { display: none; } } /* Mobile menu: a full-width sheet anchored under the sticky header (the header is `position: sticky`, so it is the containing block). It scrolls internally when taller than the viewport and `overscroll-behavior` keeps the scroll gesture contained; the page behind is scroll-locked via `body.menu-open` (added/removed by the enhancement script). */ .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: var(--border); box-shadow: 0 32px 48px -32px rgba(41, 37, 36, 0.35); min-height: calc(100dvh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-md) 0 var(--space-2xl); } .mobile-menu.is-open { display: block; } body.menu-open { overflow: hidden; } .mobile-menu__primary { list-style: none; margin: 0 0 var(--space-lg); padding: 0; } .mobile-menu__primary li { border-bottom: 1px solid var(--color-border); } .mobile-menu__primary a { display: flex; align-items: center; min-height: 52px; padding: var(--space-sm) var(--space-sm); color: var(--color-text); text-decoration: none; font-size: 1.125rem; } .mobile-menu__primary a:hover { background: var(--color-surface-subtle); } .mobile-menu__primary a[aria-current="page"] { font-weight: 600; color: var(--color-text); box-shadow: inset 3px 0 0 var(--color-accent); } .mobile-menu__quick { border-top: var(--border); padding-top: var(--space-lg); } .mobile-menu__quick-title { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .mobile-menu__quick ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; } .mobile-menu__quick a { display: flex; align-items: center; min-height: var(--touch-target); padding: 0 var(--space-sm); color: var(--color-text-muted); text-decoration: none; font-size: 1rem; border-radius: var(--radius-control); } .mobile-menu__quick a:hover { background: var(--color-surface-subtle); color: var(--color-text); } /* ---------- Buttons ------------------------------------------------------ */ /* Primary = brand: bright logo-orange fill with graphite ink label (7.0:1). White-on-bright-amber is never used (fails AA). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: var(--touch-target); padding: 0 var(--space-xl); border-radius: var(--radius-control); border: 1px solid transparent; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .btn--primary { background: var(--color-accent-bright); color: var(--color-accent-bright-ink); } .btn--primary:hover { background: var(--color-accent-bright-hover); } .btn--secondary { background: var(--color-surface); color: var(--color-accent); border-color: var(--color-border-strong); } .btn--secondary:hover { background: var(--color-accent-soft); border-color: var(--color-accent); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* ---------- Links --------------------------------------------------------- */ a { color: var(--color-accent); } p a, li a, td a { text-decoration: underline; text-underline-offset: 2px; } .navlink { text-decoration: none; } .muted-link { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; } a[target="_blank"]::after { content: " ↗"; font-size: 0.85em; color: var(--color-text-muted); } /* ---------- Hero (00_V2_3 visual-fidelity: final pastoral artwork) ---------- The approved mockups show one warm pastoral band: the owner-supplied artwork fills the hero surface (object-position keeps the house/tree composition on the right), the sky area carries the display title. The art is an imported repository asset — never a CSS imitation. */ .hero { position: relative; overflow: hidden; border-bottom: var(--border); background: linear-gradient(180deg, var(--color-band) 0%, var(--color-bg) 100%); } .hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Desktop: keep house/trees composition anchored right; the left part of the asset is open sky/meadow — the text zone stays visually clean. */ object-position: right center; pointer-events: none; } .hero__content { position: relative; z-index: 1; padding-top: var(--space-4xl); padding-bottom: var(--space-2xl); } .hero__title { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.015em; color: var(--color-ink-hero); margin-bottom: var(--space-md); max-width: 12em; } .hero__lead { font-size: var(--fs-lead); max-width: 30em; color: var(--color-text); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } .hero__actions .btn { min-height: 48px; padding: 0 var(--space-2xl); } .hero__cues { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-2xl); list-style: none; margin: var(--space-2xl) 0 0; padding: var(--space-md) var(--space-lg); background: var(--color-band-wash); /* cream wash: cues stay AA-readable over the meadow */ border-radius: var(--radius-card); width: fit-content; max-width: 100%; } .hero__cues li { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); } .hero__cue-icon { color: var(--color-accent-bright); display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; } .hero__cue-icon svg { width: 20px; height: 20px; } .hero__slogan { position: absolute; top: var(--space-lg); right: var(--space-lg); z-index: 1; margin: 0; text-align: left; font-family: "Caveat", var(--font-sans); font-weight: 500; font-size: 1.5rem; line-height: 1.12; color: var(--color-accent); transform: rotate(-2deg); user-select: none; pointer-events: none; } /* Mobile: the full banner would reduce to an unreadable strip, so the art becomes a soft right-anchored backdrop (text keeps a clean wash over it) and the slogan stays in flow above the title. */ @media (max-width: 899px) { .hero__content { padding-top: var(--space-lg); padding-bottom: var(--space-xl); } .hero__slogan { position: static; margin: 0 0 var(--space-md); } .hero__art { object-position: 78% center; opacity: 0.45; } } @media (min-width: 900px) { .hero__art { opacity: 1; } } /* ---------- Utility cards (homepage quick-access layer) --------------------- */ .qa-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } @media (min-width: 768px) and (max-width: 1099px) { .qa-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } @media (min-width: 1100px) { .qa-grid { grid-template-columns: repeat(6, 1fr); } } .qa-card { display: flex; flex-direction: column; gap: var(--space-sm); border: var(--border); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--color-surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .qa-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .qa-card__head { display: flex; align-items: center; gap: var(--space-md); font-weight: 600; color: var(--color-text); } .qa-card__icon { color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--color-accent-soft); } .qa-card__icon svg { display: block; width: 22px; height: 22px; } .qa-card__hint { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; } .qa-card__go { margin-top: auto; padding-top: var(--space-sm); font-size: var(--fs-small); font-weight: 600; color: var(--color-accent); } /* ---------- Homepage news cards --------------------------------------------- */ .news-grid { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } /* News landing variant: same card language, 2 columns below the hero band (3 columns needs ≥1100px to keep card text readable). */ .news-grid--listing { grid-template-columns: 1fr; } @media (min-width: 640px) { .news-grid--listing { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .news-grid--listing { grid-template-columns: repeat(3, 1fr); } } .news-card { display: flex; flex-direction: column; border: var(--border); border-radius: var(--radius-card); padding: 0; background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .news-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .news-card__media { background: var(--color-sun-soft); position: relative; } .news-card__media svg { width: 100%; height: 100%; display: block; } /* Final water asset variant (00_V2_3): covers the same 3/2 window with an intentional center crop of the wide artwork. */ .news-card__media-img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: 22% center; } /* 01_V2_6 managed cover (CMS-selected image): fills the 3/2 window with a center crop of the 4:3 master — width/height attributes keep CLS at zero. 01_V2_7: the 3/2 window is enforced ON the image itself (the former absolute-inset scheme let the 4:3 master paint over the card body, obscuring the publication date — task §5.1). */ .news-card__img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center; } .news-card__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1 1 auto; } .news-card__date { font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin: 0; } .news-card__title { font-size: var(--fs-h3); font-weight: 600; margin: 0; } .news-card__title a { text-decoration: none; color: inherit; } .news-card__title a:hover { color: var(--color-accent); text-decoration: underline; } .news-card__excerpt { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; } .news-card__go { margin-top: auto; padding-top: var(--space-sm); font-size: var(--fs-small); } .news-card__go a { font-weight: 600; text-decoration: none; } .news-card__go a:hover { text-decoration: underline; } /* ---------- Document lists: batch note + hub directory ------------------------ */ .doc-note { display: flex; gap: var(--space-md); align-items: flex-start; border: var(--border); border-left: 4px solid var(--color-info); background: var(--color-info-soft); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl); font-size: var(--fs-small); } .doc-note svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--color-info); } .doc-note p { margin: 0; } .doc-dir { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .doc-dir { grid-template-columns: 1fr 1fr; } } .doc-dir .card--link h2, .doc-dir .card--link h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); } .doc-dir .card--link p { margin-bottom: 0; } /* ---------- Notice band (Important notice pattern) ------------------------ */ .notice { border: var(--border); border-left-width: 4px; border-radius: var(--radius-card); padding: var(--space-lg) var(--space-xl); background: var(--color-surface); } .notice--warning { border-color: var(--color-warning); background: var(--color-warning-soft); } .notice__label { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-xs); } .notice--warning .notice__label { color: var(--color-warning); } .notice p:last-child { margin-bottom: 0; } /* ---------- Alerts (inline) ------------------------------------------------ */ .alert { border: var(--border); border-left-width: 4px; border-radius: var(--radius-card); padding: var(--space-lg); margin-bottom: var(--space-lg); background: var(--color-surface); } .alert--info { border-left-color: var(--color-info); background: var(--color-info-soft); } .alert--warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); } .alert p:last-child { margin-bottom: 0; } /* ---------- Badges / status ------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px var(--space-md); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; line-height: 1.6; white-space: nowrap; } .badge--neutral { background: var(--color-surface-subtle); color: var(--color-text); } .badge--accent { background: var(--color-accent-soft); color: var(--color-accent); } .badge--info { background: var(--color-info-soft); color: var(--color-info); } .badge--success { background: var(--color-success-soft); color: var(--color-success); } .badge--warning { background: var(--color-warning-soft); color: var(--color-warning); } .badge--danger { background: var(--color-danger-soft); color: var(--color-danger); } .badge--lock { background: var(--color-surface-subtle); color: var(--color-text-muted); border: var(--border); } .badge-stack { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* ---------- Cards / rows ----------------------------------------------------- */ .card { background: var(--color-surface); border: var(--border); border-radius: var(--radius-card); padding: var(--space-xl); box-shadow: var(--shadow-card); } .card--link { display: block; text-decoration: none; color: inherit; transition: border-color 140ms ease, box-shadow 140ms ease; } .card--link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); } .news-item { padding: var(--space-lg) 0; border-bottom: var(--border); } .news-item:last-child { border-bottom: 0; } .news-item__date { font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin-bottom: 0; } .news-item__title { font-size: var(--fs-h3); font-weight: 600; margin: var(--space-xs) 0; } .news-item__title a { text-decoration: none; color: inherit; } .news-item__title a:hover { color: var(--color-accent); text-decoration: underline; } .meeting-card__date { font-size: var(--fs-h3); font-weight: 600; font-variant-numeric: tabular-nums; } /* Historical meeting archive section (REPAIR-00R-3: inline styles → classes, declarations identical to the previous style attributes — C-008). */ .meeting-group { margin-bottom: var(--space-xl); } .meeting-group__head { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); } .meeting-group__title { margin: 0; } .meeting-group__meta { margin: 0; } .meeting-group__block { margin-top: var(--space-lg); } .meeting-group__label { font-size: var(--fs-body); } .meeting-group__links { list-style: none; margin: 0; padding: 0; } .meeting-group__links li { min-height: var(--touch-target); display: flex; align-items: center; } .doc-list { list-style: none; margin: 0; padding: 0; border-top: var(--border); } .doc-row { display: grid; grid-template-columns: var(--file-badge-size, 44px) 1fr auto; gap: var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-md); border-bottom: var(--border); background: var(--color-surface); } .doc-row:hover { background: var(--color-surface-subtle); } /* 01_V2_7 shared file-type badge (approved mockup: page-ustav-i-uchreditelnye): soft tile + page glyph; red-orange PDF / blue DOCX. */ .file-badge { width: var(--file-badge-size, 44px); height: var(--file-badge-size, 44px); border-radius: 10px; display: grid; place-items: center; flex: none; } .file-badge--pdf { background: var(--color-danger-soft); color: var(--color-danger); } .file-badge--docx { background: var(--color-info-soft); color: var(--color-info); } /* 01_V2_7 shared outlined download action (same approved mockup). */ .btn-download { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 20px; border: 1.5px solid var(--color-danger); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-danger); font-size: var(--fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; } .btn-download:hover { background: var(--color-danger-soft); } /* 01_V2_7 «Показать ещё документы» (approved mockup page-finansy-i-vznosy): no-JS progressive reveal — a closed
folds rows 11+; opening it shows the full list. All rows stay in the DOM. */ .doc-more { margin-top: var(--space-lg); } .doc-more__toggle { display: inline-flex; align-items: center; gap: var(--space-sm); list-style: none; cursor: pointer; padding: 10px 24px; border: var(--border); border-radius: 999px; background: var(--color-surface); font-size: var(--fs-small); font-weight: 600; color: var(--color-text); } .doc-more__toggle::-webkit-details-marker { display: none; } .doc-more__toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } .doc-list:has(+ .doc-more:not([open])) .doc-row:nth-child(n + 11) { display: none; } /* ---------- 01_V2_7 about-subpage card system -------------------------------- Approved mockups (page-pravlenie-i-komissii / page-vznosy-i-platezhi / page-infrastruktura / page-poleznoe): icon-headed content cards, tariff rows, emergency-number tiles, memo rows, blue info bands. Factual content always comes from the CMS snapshot seam — these classes are presentation only. */ .section-card { border: var(--border); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-card); } .section-card__head { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg); } .section-card__icon { width: 56px; height: 56px; border-radius: 12px; flex: none; background: var(--color-accent-soft); color: var(--color-accent-bright); display: grid; place-items: center; } .section-card__title { margin: 0; font-size: var(--fs-h3); font-weight: 700; } .section-card__body > :last-child { margin-bottom: 0; } .section-card__panel { border: var(--border); border-radius: var(--radius-control); background: var(--color-surface-subtle); padding: var(--space-lg); margin-bottom: var(--space-lg); } .section-card__panel:last-child { margin-bottom: 0; } /* Fee/tariff rows (page-vznosy-i-platezhi): icon tile + one tariff paragraph. */ .tariff-row { display: flex; gap: var(--space-lg); align-items: flex-start; border: var(--border); border-radius: var(--radius-control); padding: var(--space-lg); margin-bottom: var(--space-md); background: var(--color-surface); } .tariff-row:last-child { margin-bottom: 0; } .tariff-row__text { margin: 0; overflow-wrap: anywhere; } /* Tariff label/value presentation (page-infrastruktura): legacy «A — B» paragraphs render as label/value rows under tinted group headers. */ .tariff-group-head { background: var(--color-accent-soft); border-radius: var(--radius-control); padding: var(--space-xs) var(--space-lg); font-weight: 700; margin: var(--space-lg) 0 0; } .tariff-pair { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: baseline; padding: var(--space-md) var(--space-lg); border-bottom: var(--border); margin: 0; } .tariff-pair:last-child { border-bottom: 0; } .tariff-pair__label { color: var(--color-text); overflow-wrap: anywhere; } .tariff-pair__value { font-weight: 700; text-align: right; overflow-wrap: anywhere; } /* 81-WEB-VISUAL-FIX-1 (owner finding): at phone widths the `1fr auto` columns collapsed the label to ~1 character per line whenever the value was long («Однотарифный (круглосуточный)» next to a multi-line price). Phones render each pair as a vertical name-over-value pair; the label column can no longer be squeezed. */ @media (max-width: 599px) { .tariff-pair { grid-template-columns: 1fr; gap: var(--space-xs) 0; } .tariff-pair__value { text-align: left; } } /* page-poleznoe: memo/reference cards side by side above the emergency card. */ .useful-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; } @media (max-width: 767px) { .useful-duo { grid-template-columns: 1fr; } } /* page-poleznoe: local-services phone lines (two-column, icon + label/value). */ .emergency-local { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) 0; border-bottom: var(--border); margin: 0; } .emergency-local:last-child { border-bottom: 0; } .emergency-local__icon { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--color-info-soft); color: var(--color-info); display: grid; place-items: center; } .emergency-local__label { display: block; font-weight: 600; margin: 0 0 2px; overflow-wrap: anywhere; } .emergency-local__value { display: block; color: var(--color-danger); font-weight: 600; overflow-wrap: anywhere; } /* page-kontakty: message card CTA (honest mailto action, no form shell). */ .contacts-cta__intro { margin: 0 0 var(--space-lg); } .contacts-cta__actions { margin: 0 0 var(--space-lg); } /* Emergency number tiles (page-poleznoe). */ .emergency-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .emergency-tile { border: var(--border); border-radius: var(--radius-card); background: var(--color-surface-subtle); text-align: center; padding: var(--space-lg) var(--space-sm); } .emergency-tile__icon { color: var(--color-danger); display: inline-flex; margin-bottom: var(--space-sm); } .emergency-tile__number { font-size: 1.75rem; font-weight: 700; color: var(--color-danger); line-height: 1.1; } .emergency-tile__label { font-size: var(--fs-small); color: var(--color-text-muted); margin: var(--space-xs) 0 0; } @media (max-width: 767px) { .emergency-tiles { grid-template-columns: repeat(2, 1fr); } } /* Memo/reference rows (page-poleznoe): label + «Ознакомиться →». */ .memo-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); padding: var(--space-md) 0; border-bottom: var(--border); } .memo-row:last-child { border-bottom: 0; } .memo-row__label { margin: 0; overflow-wrap: anywhere; } .memo-row__go { flex: none; color: var(--color-accent); font-weight: 600; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } /* 01_V2_7 blue info band (same approved mockups). */ .info-band { display: flex; gap: var(--space-md); align-items: flex-start; border: var(--border); border-left: 4px solid var(--color-info); border-radius: var(--radius-control); background: var(--color-info-soft); padding: var(--space-md) var(--space-lg); margin-top: var(--space-xl); font-size: var(--fs-small); } .info-band__icon { flex: none; color: var(--color-info); margin-top: 2px; } .info-band__title { font-weight: 700; margin: 0 0 2px; } .info-band__body p { margin: 0; } .info-band__body > :last-child { margin-bottom: 0; } .doc-row__title { font-weight: 600; margin: 0 0 2px; overflow-wrap: anywhere; } .doc-row__title a { text-decoration: none; color: inherit; } .doc-row__title a:hover { color: var(--color-accent); text-decoration: underline; } /* 81-WEB-VISUAL-FIX-1 (owner finding): rows lead with a human-readable name; the technical filename renders separately, muted and small. */ .doc-row__file, .popular-row__file { margin: 0 0 2px; font-size: var(--fs-small); color: var(--color-text-muted); overflow-wrap: anywhere; } .doc-row__meta { font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 0; } .doc-row__meta .sep::before { content: " · "; } .doc-row__actions { display: flex; gap: var(--space-md); align-items: center; justify-self: end; } @media (max-width: 560px) { .doc-row { grid-template-columns: var(--file-badge-size, 44px) 1fr; } .doc-row__actions { grid-column: 1 / -1; padding-top: 0; justify-self: start; } } /* ---------- Forms ------------------------------------------------------------ */ .field { margin-bottom: var(--space-xl); } .field label, .field .label { display: block; font-weight: 600; margin-bottom: var(--space-sm); } .req { color: var(--color-danger); } .help { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-xs); } .input, .select { width: 100%; min-height: var(--touch-target); padding: var(--space-md); border: var(--border); border-color: var(--color-border-strong); border-radius: var(--radius-control); font: inherit; color: var(--color-text); background: var(--color-surface); } .input:hover, .select:hover { border-color: var(--color-text-muted); } .input:focus, .select:focus { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-accent); } .check { display: flex; gap: var(--space-md); align-items: flex-start; min-height: var(--touch-target); padding: var(--space-sm) 0; font-weight: 400; } .check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--color-accent); } /* Progress steps (registration sequence) were retired by 80-AUTH-PAGES-POLISH-1-R3: the register page rides the .journey stepper (below); .steps had no other consumer. */ /* ---------- Filters / chips ------------------------------------------------------ */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); } .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-lg); border: var(--border); border-color: var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-size: var(--fs-small); font-weight: 600; } .chip:hover { border-color: var(--color-accent); color: var(--color-accent); } .chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); } .result-count { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-md); } /* ---------- Empty states ----------------------------------------------------------- */ .empty { text-align: center; padding: var(--space-4xl) var(--space-lg); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-large); background: var(--color-surface); } .empty h3 { margin-bottom: var(--space-sm); } .empty p { color: var(--color-text-muted); margin-bottom: var(--space-xl); } /* ---------- Pagination (news archive) ------------------------------------------------ */ .pagination { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Number-only links are tiny without padding; pad to a ≥24px tap target (REPAIR-00R-3 accessibility pass). Visual separation is preserved by the reduced flex gap (12px → 4px) + padding (total ≥20px between numbers). */ .pagination a { text-decoration: none; padding: var(--space-sm); } .pagination a:hover { text-decoration: underline; } .pagination [aria-current="page"] { color: var(--color-text); font-weight: 600; padding: var(--space-sm); } /* ---------- Footer (TASK 01_V2_1) ------------------------------------------- Warm light band (the raster logo carries dark artwork, so the footer stays light), brand block with the raster logo + tagline, nav mirror + quick access, bottom reference row. Bottom padding doubles as clearance for the fixed scroll-to-top control (§33). */ .site-footer { background: var(--color-bg); border-top: var(--border); margin-top: var(--space-3xl); padding: var(--space-2xl) 0 var(--space-4xl); } .site-footer__main { display: grid; gap: var(--space-2xl); } @media (min-width: 768px) { .site-footer__main { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-xl); } } .site-footer__brand { display: flex; align-items: flex-start; gap: var(--space-lg); } .site-footer__brand .brand-lockup { margin-top: 2px; } .site-footer__brand .brand-lockup__mark img { display: block; height: 46px; width: auto; } .site-footer__tagline { margin: 0; max-width: 26em; } .site-footer__label { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 var(--space-sm); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer__main li { padding: 2px 0; } .site-footer__main a { text-decoration: none; font-size: 0.9375rem; color: var(--color-text-muted); } .site-footer__main a:hover { color: var(--color-accent); text-decoration: underline; } .site-footer__bottom { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--border); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); justify-content: space-between; font-size: var(--fs-small); color: var(--color-text-muted); } .site-footer__bottom p { margin: 0; } .site-copyright { font-size: var(--fs-small); color: var(--color-text-muted); } /* Mobile footer: compact groups that keep comfortable tap targets, shared side gutter, single centered bottom row. */ @media (max-width: 767px) { .site-footer { padding: var(--space-xl) 0 calc(var(--space-2xl) + 40px); } .site-footer__brand .brand-lockup__mark img { height: 38px; width: auto; } .site-footer__main { gap: var(--space-xl); } .site-footer__main li { padding: 3px 0; } .site-footer__main a { display: inline-block; padding: 4px 0; } .site-footer__bottom { margin-top: var(--space-lg); padding-top: var(--space-md); flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); } .site-copyright { font-weight: 600; text-align: center; } } /* ---------- Breadcrumbs (shared by InternalPageHero + wide columns) ------ */ .breadcrumb { font-size: var(--fs-small); margin-bottom: var(--space-md); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; } .breadcrumb li { display: flex; } .breadcrumb li + li::before { content: " → "; color: var(--color-text-muted); margin: 0 6px; } .breadcrumb a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; } .breadcrumb [aria-current="page"] { color: var(--color-text); } /* Auth-entry narrow-column styles (.auth-column/.auth-column--card) were retired by 80-AUTH-PAGES-POLISH-1-R3: /register/ and /forgot-password/ ride the login-cards composition now; no other page consumed them. */ /* ---------- Scroll-to-top + progress ---------------------------------------- One fixed circular control: light surface, amber progress ring around an arrow (SVG stroke-dashoffset, pathLength=100 → pure CSS math), semantic button markup. Hidden in static HTML (`hidden` attribute) — it only appears when the shared enhancement script runs and the page is scrolled past the threshold, so static-first rendering is preserved. Sits below the sticky header z-index so it can never overlay an open mobile sheet. */ .to-top { position: fixed; right: max(var(--space-lg), env(safe-area-inset-right)); bottom: max(var(--space-lg), calc(env(safe-area-inset-bottom) + var(--space-lg))); width: 48px; height: 48px; padding: 0; display: grid; place-items: center; background: var(--color-surface); color: var(--color-accent); border: var(--border); border-radius: 50%; box-shadow: 0 6px 20px -8px rgba(41, 37, 36, 0.35); cursor: pointer; z-index: var(--z-to-top); } .to-top[hidden] { display: none; } .to-top svg { display: block; width: 48px; height: 48px; } .to-top__track { stroke: var(--color-border); } .to-top__ring { stroke: var(--color-accent-bright); stroke-dasharray: 100; stroke-dashoffset: 100; } .to-top:hover { border-color: var(--color-accent); } .to-top:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } @media (min-width: 768px) { .to-top { right: var(--space-xl); bottom: var(--space-xl); } } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } /* 00_V2_3 fidelity: the final illustrated territory scheme (owner-approved asset) replaces the former honest-placeholder slot. Rounded to the card radius, intrinsic ratio preserved (no CLS), readable at every width. */ .territory-map { border: var(--border); border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-lg); background: var(--color-surface-subtle); } .territory-map__img { display: block; width: 100%; height: auto; } /* Full-page view («Схема территории»): bounded width so the tall map stays readable without dominating the column. */ .territory-map--page { max-width: 640px; margin-bottom: var(--space-md); } /* ---------- 01_V2_6 MASTER INTERNAL HERO ------------------------------------ ONE band + ONE asset for every internal route (approved mockups: page-dokumenty / page-sobraniya / page-kontakty / …). 81-WEB-VISUAL-FIX-1 (owner visual review): the fixed band CLIPPED long H1s + breadcrumbs (news pages hid the title under the banner bottom), so the band height is now a MINIMUM (--internal-hero-height-* tokens) that grows with the actual breadcrumb + H1 + lead content; the H1 scale is reduced one step on mobile/tablet (owner-permitted) to keep the growth moderate. Short titles still render the exact approved band heights. The handwritten slogan stays baked into the master artwork — no HTML text duplicate. */ .internal-hero { position: relative; overflow: hidden; border-bottom: var(--border); min-height: var(--internal-hero-height-mobile); background: var(--color-band); } .internal-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* System crop — identical on every route and breakpoint class. The master composition keeps the open sky left (text container) and the sun, house and slogan right; object-position preserves that geometry. */ object-position: 62% center; pointer-events: none; } /* 81-WEB-VISUAL-FIX-1 (owner finding): below 600px the ~52%-wide cover window at 62% keeps the baked slogan/sun/house in frame behind the H1 and lead. Anchor the crop to the inscription-free left meadow — the geometry the 01_V2_9 404 rule pioneered, promoted here to the system default for every internal route (the page-scoped 404 override is retired). */ @media (max-width: 599px) { .internal-hero__art { object-position: 10% center; } } .internal-hero__inner { position: relative; z-index: 1; display: flex; align-items: flex-start; } .internal-hero__text { /* Text container geometry (task §7): same left/top offsets, max-width and vertical rhythm on every internal route. 01_V2_7: the approved mockups anchor the text block at the TOP of the band (breadcrumb directly under the header). 81-WEB-VISUAL-FIX-1: the band now GROWS with its content, so the text block carries its own bottom padding — short titles never reach it (the band minimum still governs those). */ width: 100%; max-width: 640px; padding-top: var(--space-xl); padding-bottom: var(--space-lg); } /* 600–1099px: the cover window is ~88% of the artwork, so the baked slogan cannot be cropped out the way <600px does. The owner's contract «text and decorative elements must not overlap at 390 and 768px» is kept by narrowing the text container: its right edge stays clear of the lettering zone (~62% of the artwork width) across the whole range, at every public font scale. */ @media (min-width: 600px) and (max-width: 1099px) { .internal-hero__text { max-width: 480px; } } .internal-hero__title { font-size: 1.5rem; line-height: var(--lh-heading); letter-spacing: -0.01em; color: var(--color-ink-hero); margin: 0; overflow-wrap: break-word; } .internal-hero__lead { font-size: var(--fs-small); color: var(--color-text); margin: var(--space-sm) 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .internal-hero__text .breadcrumb { margin-bottom: var(--space-md); } .internal-hero__text .breadcrumb a { font-size: var(--fs-small); } @media (min-width: 768px) { .internal-hero { min-height: var(--internal-hero-height-tablet); } .internal-hero__title { font-size: 2rem; } .internal-hero__lead { font-size: var(--fs-body); } } @media (min-width: 1100px) { .internal-hero { min-height: var(--internal-hero-height-desktop); } .internal-hero__title { font-size: 2.625rem; } } /* ---------- 00_V2_3 main-surface composition system ------------------------ Shared building blocks from the accepted design package: landing hero band with pastoral art + handwritten slogan, section head, contact strip, document category cards, popular document rows, info panels. */ /* Section head: H2 + hint + right link. */ .section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-xl); justify-content: space-between; margin-bottom: var(--space-xl); } .section-head__titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); } .section-head__titles h2 { margin: 0; } .section-head__hint { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); } .section-head__link { font-size: var(--fs-small); font-weight: 600; } /* Contact strip: soft blue pre-footer band, three labelled cells. */ .contact-strip { background: var(--color-info-soft); border: var(--border); border-color: var(--color-info-border); border-radius: var(--radius-large); margin: var(--space-3xl) 0 var(--space-2xl); padding: var(--space-xl); } .contact-strip__grid { display: grid; gap: var(--space-xl); } @media (min-width: 900px) { .contact-strip__grid { grid-template-columns: 1.2fr 1fr 1fr; } } .contact-strip__cell { display: flex; gap: var(--space-md); align-items: flex-start; } .contact-strip__cell + .contact-strip__cell { border-top: 1px solid var(--color-info-border); padding-top: var(--space-lg); } @media (min-width: 900px) { .contact-strip__cell + .contact-strip__cell { border-top: 0; border-left: 1px solid var(--color-info-border); padding-top: 0; padding-left: var(--space-xl); } } .contact-strip__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-info); box-shadow: inset 0 0 0 1px var(--color-info-border); } .contact-strip__icon--alert { color: var(--color-danger); } .contact-strip__title { font-size: 1.0625rem; margin: 0 0 var(--space-xs); } .contact-strip__muted { margin: 0 0 var(--space-xs); font-size: var(--fs-small); color: var(--color-text-muted); } .contact-strip__link { margin: 0; font-size: var(--fs-small); font-weight: 600; } .contact-strip__more { margin: 0; font-size: var(--fs-small); font-weight: 600; } .contact-strip__phone { margin: 0 0 var(--space-xs); font-size: var(--fs-h3); font-weight: 600; } .contact-strip__phone a { text-decoration: none; } .contact-strip__phone a:hover { text-decoration: underline; } /* Document category cards (documents hub + home «Важные документы»). */ .doc-cards { display: grid; gap: var(--space-lg); } @media (min-width: 640px) { .doc-cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .doc-cards--7 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .doc-cards--4 { grid-template-columns: repeat(4, 1fr); } } .doc-card { display: flex; flex-direction: column; gap: var(--space-sm); border: var(--border); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--color-surface); text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .doc-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .doc-card__head { display: flex; align-items: center; gap: var(--space-md); } .doc-card__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); } .doc-card__title { margin: 0; font-size: 1.0625rem; } .doc-card__desc { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); } .doc-card__count { margin-top: auto; padding-top: var(--space-sm); font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .doc-card__go { font-size: var(--fs-small); font-weight: 600; color: var(--color-accent); } /* Popular documents panel (documents hub): rows + side info column. */ .popular-layout { display: grid; gap: var(--space-xl); align-items: start; } @media (min-width: 900px) { .popular-layout { grid-template-columns: 1.6fr 1fr; } } .popular-list { border: var(--border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); overflow: hidden; } .popular-row { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-lg); align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: var(--border); } .popular-row:last-child { border-bottom: 0; } .popular-row:hover { background: var(--color-surface-subtle); } .popular-row__title { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .popular-row__title a { text-decoration: none; color: inherit; } .popular-row__title a:hover { color: var(--color-accent); text-decoration: underline; } .popular-row__meta { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* 81-WEB-VISUAL-FIX-1 (owner finding): on phones the badge + «Скачать →» left the title a few characters per line (names wrapped mid-word). The action moves under the title (same shape as the .doc-row phone layout), the title takes the row width at the small size, and the technical filename renders as its own muted line (81-WEB-VISUAL-FIX-1, see .doc-row__file). */ @media (max-width: 599px) { .popular-row { grid-template-columns: 44px 1fr; } .popular-row__title { font-size: var(--fs-small); } .popular-row__file { font-size: 0.8125rem; } .popular-row .btn-download { grid-column: 1 / -1; justify-self: start; } } /* Info panel («Как это работает», «Важно знать», «Коротко»): soft blue card with an icon row list. */ .info-panel { background: var(--color-info-soft); border: var(--border); border-color: var(--color-info-border); border-radius: var(--radius-card); padding: var(--space-xl); } .info-panel__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .info-panel__head svg { color: var(--color-info); flex: none; } .info-panel__title { margin: 0; font-size: 1.0625rem; } .info-panel__row { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) 0; border-top: 1px solid var(--color-info-border); } .info-panel__row svg { flex: none; color: var(--color-info); margin-top: 2px; } .info-panel__row-title { margin: 0 0 2px; font-weight: 600; font-size: 0.9375rem; } .info-panel__row-text { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); } .info-panel p:last-child { margin-bottom: 0; } /* Meetings: honest upcoming card + archive grid. The upcoming surface keeps the warm accent treatment from the approved meetings mockup (icon shell + status chip in one head row). */ .meeting-upcoming { border: var(--border); border-radius: var(--radius-card); background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-surface) 70%); box-shadow: var(--shadow-card); padding: var(--space-xl); } .meeting-upcoming__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); } .meeting-upcoming__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-accent-bright); box-shadow: inset 0 0 0 1px var(--color-border); } .meeting-archive { display: grid; gap: var(--space-lg); } @media (min-width: 900px) { .meeting-archive { grid-template-columns: 1fr 1fr; } } .meeting-archive .meeting-group { margin-bottom: 0; } /* News detail (05-news-detail pattern): meta row under the H1, then a wide decorative cover for the water pattern. */ .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); } .article-meta p { margin: 0; } .article-meta__date { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .article-meta__icon { color: var(--color-accent-bright); display: inline-flex; } .article-cover { margin: 0 0 var(--space-xl); border-radius: var(--radius-card); overflow: hidden; border: var(--border); } .article-cover__img { display: block; width: 100%; height: auto; } /* CONTENT-AUTHORING-1: news cover presentation formats. `wide` (default / pre-field records) keeps the current rendering everywhere. `square` crops to 1:1 (detail window capped and centered so a square stays composed); `hero` is the large detail-first 16:9 window. object-fit: cover keeps the master binaries untouched — this is presentation-only. */ .news-card__media--square .news-card__img { aspect-ratio: 1 / 1; } .news-card__media--hero .news-card__img { aspect-ratio: 16 / 9; } .article-cover--square { max-width: min(100%, 520px); margin-inline: auto; } .article-cover--square .article-cover__img { aspect-ratio: 1 / 1; object-fit: cover; } .article-cover--hero .article-cover__img { aspect-ratio: 16 / 9; object-fit: cover; } /* TASK 01_V2_2: legacy news body images (deterministic migration renderer output). Fluid inside the prose column; lazy-loaded via attributes. */ .page-column img { max-width: 100%; height: auto; border-radius: var(--radius-card); } /* ---------- Contacts (00_V2_3 composition; global stylesheet — scoped