/* Anomera38 — Design tokens Single source of truth for colors, type, spacing, radii, shadows. Accent CTA color is swappable via .accent-graphite / .accent-blue / .accent-gold class on , set by the Tweaks panel. */ /* Шрифт госзнака (ГОСТ 32207) — символы и регион на плашках avto22_render_plate(). */ @font-face { font-family: 'Motor4F'; src: url('fonts/Motor4F.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Surfaces */ --bg: #F7F6F2; /* warm off-white */ --surface: #FFFFFF; --surface-2: #FBFAF6; --line: #E5E3DD; --line-2: #EFEDE7; /* Text */ --ink: #1A1A1A; --ink-2: #3A3A3A; --muted: #6B6B6B; --muted-2: #9A9893; /* Brand / functional */ --accent: #0F1419; /* default — graphite */ --accent-ink: #FFFFFF; --gold: #B8965A; --gold-soft: #E9D8B0; --success: #4A7C59; --alert: #B8553A; /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* Shadows */ --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); --shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08); --ring: 0 0 0 3px rgba(15,20,25,0.12); /* Type */ --font-display: 'Manrope', 'Inter Tight', 'Inter', system-ui, sans-serif; --font-text: 'Inter', 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Spacing scale (8px base, with 4 for fine-tuning) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; } .accent-graphite { --accent: #0F1419; --accent-ink: #FFFFFF; } .accent-blue { --accent: #1B2A4E; --accent-ink: #FFFFFF; } .accent-gold { --accent: #8A6A2E; --accent-ink: #FFFFFF; } /* Base */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-text); color: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; } /* Type roles */ .t-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.04; } .t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.05; letter-spacing: -0.024em; } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.18; letter-spacing: -0.015em; } .t-h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; } .t-body { font-size: 16px; line-height: 1.5; } .t-body-lg { font-size: 18px; line-height: 1.55; color: var(--ink-2); } .t-small { font-size: 13px; line-height: 1.45; color: var(--muted); } .t-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Landing base ──────────────────────────────────────────── */ html { scroll-behavior: smooth; scroll-padding-top: 84px; } a { color: inherit; } button { font-family: inherit; } ::selection { background: rgba(184,150,90,0.28); } /* Focus visible — visible without hover (TZ accessibility) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } *:focus:not(:focus-visible) { outline: none; } /* Catalog — список строк (раскладка задаётся здесь, чтобы JS-фильтр, очищая inline display через '', корректно возвращал grid/flex). */ .catalog-grid { display: flex; flex-direction: column; gap: 14px; } .plate-card { position: relative; } .plate-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "plate info price"; column-gap: 28px; align-items: center; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s, border-color .18s; } .plate-row__plate { grid-area: plate; } .plate-row__info { grid-area: info; display: flex; flex-direction: column; gap: 10px; } .plate-row__price { grid-area: price; } .plate-row:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); border-color: #DAD7CF; } /* Закреплённые номера — тёплый фон, золотая рамка и левый акцент. */ .plate-row--pin { background: #FBF6EA; border-color: #EBDDB6; box-shadow: inset 5px 0 0 0 var(--gold); padding-left: 26px; } .plate-row--pin:hover { border-color: #E3CF9A; box-shadow: inset 5px 0 0 0 var(--gold), var(--shadow-1); } .plate-row__star { display: flex; align-items: center; } /* Каталог: на узких экранах фильтр уходит над списком. */ @media (max-width: 960px) { .catalog-layout { grid-template-columns: 1fr !important; } .catalog-layout > aside { position: static !important; } } /* Строка → колонка: знак сверху, город+признаки и цена в одну строку. */ @media (max-width: 720px) { .plate-row { grid-template-columns: 1fr auto; grid-template-areas: "plate plate" "info price"; column-gap: 14px; row-gap: 11px; padding: 16px 18px; } .plate-row__price { justify-self: end; align-self: end; } .plate-row--pin { padding-left: 22px; } .plate-row__star { position: absolute; top: 14px; right: 16px; } } /* Generic field focus */ .field:focus-within { border-color: var(--accent); box-shadow: var(--ring); } /* Hero plate-search cells — fluid so 6 cells + region fit small screens */ .hero-cell { width: clamp(40px, 11.5vw, 58px); height: clamp(64px, 16vw, 84px); font-size: clamp(32px, 9vw, 52px); } @media (max-width: 540px) { .hero-region { border-left: none !important; padding-left: 0 !important; height: auto !important; } } /* Intro motion — transform only, so resting state is always visible (an animation paused before it runs must never leave content hidden). */ @keyframes modal-in { from { transform: translateY(14px) scale(.985) } to { transform: none } } @keyframes toast-in { from { transform: translateY(16px) } to { transform: none } } .section { scroll-margin-top: 84px; } /* SEO-блок: раскрывающийся
(без JS), аккуратный summary. */ summary[data-seo-summary] { list-style: none; cursor: pointer; } summary[data-seo-summary]::-webkit-details-marker { display: none; } summary[data-seo-summary]::marker { content: ""; } details[data-seo-more][open] [data-seo-chevron] { transform: rotate(180deg); } .wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 760px) { .t-h1 { font-size: 34px; } .t-h2 { font-size: 28px; } .t-h3 { font-size: 22px; } .wrap { padding-left: 18px; padding-right: 18px; } } /* Plate-detail modal: stack to one column on narrow screens so the rendered plate never forces horizontal scroll. */ @media (max-width: 640px) { .modal-grid { grid-template-columns: minmax(0, 1fr) !important; } .modal-grid .modal-photo { min-height: 200px !important; padding: 24px 18px !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; } .modal-grid .modal-info { padding: 24px 20px 26px !important; } }