/* Anomera23 — 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. */ :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 card interactions */ .plate-card { position: relative; } .plate-card__more { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; } .plate-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: #DAD7CF; } .plate-card:hover .plate-card__more { opacity: 1; transform: translateY(0); } /* 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; } .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; } } /* ── Hero v2: two-column layout (heading + WhatsApp widget) ──────── */ .hero2 { background: var(--bg); padding-top: 64px; padding-bottom: 64px; } .hero2__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 980px) { .hero2__grid { grid-template-columns: 1fr; gap: 36px; } .hero2 { padding-top: 44px; padding-bottom: 48px; } } /* ── "Оцени свой госномер" — WhatsApp banner ─────────────────────── */ .wa-banner{ --card-bg:#121715; --card-bg-2:#0B0E0D; --wa-ink:#EDF2EF; --wa-ink-2:#9AA6A0; --wa-line:rgba(196,214,205,0.10); --wa-line-strong:rgba(196,214,205,0.18); --wa-gold:#C9A35C; --wa-gold-soft:#F0DDA8; --wa-gold-deep:#9C7B3C; --wa:#2BE36A; --wa-2:#15A84E; --wa-deep:#0E7C3A; --wa-font:'Golos Text', system-ui, -apple-system, sans-serif; --wa-plate:'Oswald','Arial Narrow', sans-serif; position:relative; isolation:isolate; width:100%; display:flex; align-items:center; gap:clamp(16px,3vw,28px); padding:clamp(22px,3.4vw,32px); overflow:hidden; text-decoration:none; border-radius:18px; color:var(--wa-ink); font-family:var(--wa-font); background:linear-gradient(180deg, var(--card-bg), var(--card-bg-2)); border:1px solid var(--wa-line); box-shadow:0 2px 8px rgba(0,0,0,0.40), 0 22px 56px rgba(0,0,0,0.46); transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s; } .wa-banner:hover{ transform:translateY(-3px); border-color:var(--wa-line-strong); box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 30px 70px rgba(0,0,0,0.55); } .wa-banner:focus-visible{ outline:2px solid var(--wa-gold); outline-offset:3px; } .wa-banner__plate{ position:absolute; inset:0; z-index:-1; overflow:hidden; -webkit-mask-image:linear-gradient(95deg,#000 0%,#000 42%,transparent 78%); mask-image:linear-gradient(95deg,#000 0%,#000 42%,transparent 78%); } .wa-banner__plate span{ position:absolute; font-family:var(--wa-plate); font-weight:700; color:rgba(220,232,226,0.05); letter-spacing:.04em; white-space:nowrap; text-transform:uppercase; line-height:1; } .wa-banner__plate .p1{ top:-14px; left:-30px; font-size:120px; transform:rotate(-7deg); filter:blur(1px); } .wa-banner__plate .p2{ bottom:-26px; left:54px; font-size:88px; transform:rotate(-7deg); color:rgba(220,232,226,0.035); } .wa-banner__glow{ position:absolute; z-index:-1; top:-40%; right:-14%; width:60%; height:180%; border-radius:50%; background:radial-gradient(closest-side, rgba(43,227,106,0.16), transparent 72%); pointer-events:none; } .wa-banner__main{ flex:1 1 auto; min-width:0; } .wa-banner__title{ margin:0; font-family:var(--wa-plate); font-weight:700; text-transform:uppercase; font-size:clamp(28px,4.4vw,44px); line-height:0.96; letter-spacing:0.005em; color:var(--wa-ink); text-shadow:0 2px 14px rgba(0,0,0,0.5); } .wa-banner__title b{ display:block; font-weight:700; background:linear-gradient(180deg, var(--wa-gold-soft), var(--wa-gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .wa-banner__sub{ margin:10px 0 0; font-size:clamp(13px,1.5vw,14.5px); color:var(--wa-ink-2); line-height:1.45; max-width:30ch; } .wa-banner__cta{ margin-top:clamp(16px,2.6vw,22px); display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:12px; font-weight:600; font-size:clamp(13px,1.6vw,15px); letter-spacing:0.06em; text-transform:uppercase; color:#1B1407; background:linear-gradient(168deg, var(--wa-gold-soft) 0%, var(--wa-gold) 58%, var(--wa-gold-deep) 100%); box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.12) inset, 0 10px 24px rgba(156,123,60,0.32); transition:transform .2s, box-shadow .2s, filter .2s; } .wa-banner:hover .wa-banner__cta{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 -2px 0 rgba(0,0,0,0.12) inset, 0 14px 30px rgba(156,123,60,0.42); } .wa-banner__cta svg{ width:18px; height:18px; flex:0 0 auto; } .wa-icon{ position:relative; flex:0 0 auto; width:clamp(86px,16vw,120px); aspect-ratio:1; border-radius:26px; display:grid; place-items:center; background:linear-gradient(155deg, var(--wa) 0%, var(--wa-2) 55%, var(--wa-deep) 100%); box-shadow:0 2px 0 rgba(255,255,255,0.45) inset, 0 -10px 22px rgba(0,0,0,0.18) inset, 0 14px 34px rgba(14,124,58,0.45); transition:transform .26s cubic-bezier(.2,.7,.2,1); } .wa-banner:hover .wa-icon{ transform:scale(1.04) rotate(-2deg); } .wa-icon::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(150deg, rgba(255,255,255,0.32), transparent 46%); pointer-events:none; } .wa-icon svg{ width:62%; height:62%; position:relative; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.22)); } .wa-icon__badge{ position:absolute; top:-9px; right:-9px; min-width:30px; height:30px; padding:0 8px; border-radius:999px; display:grid; place-items:center; font-family:var(--wa-font); font-size:14px; font-weight:700; line-height:1; color:#fff; background:linear-gradient(180deg,#FF5A52,#E5342B); border:3px solid var(--card-bg-2); box-shadow:0 4px 12px rgba(229,52,43,0.45); } @media (max-width:520px){ .wa-banner{ flex-direction:column-reverse; align-items:flex-start; text-align:left; } .wa-banner__plate{ -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); } .wa-banner__glow{ top:-20%; right:auto; left:-20%; } } /* ── Каталог: горизонтальная строка номера ───────────────────────── */ .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); cursor: pointer; position: relative; text-decoration: none; color: inherit; transition: box-shadow .16s, transform .16s, border-color .16s, background .16s; } .plate-row:hover { box-shadow: var(--shadow-2); border-color: #DAD7CF; transform: translateY(-1px); } .plate-row__plate { grid-area: plate; display: flex; flex-direction: column; gap: 7px; } .plate-row__info { grid-area: info; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .plate-row__price { grid-area: price; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } /* Закреплённый (featured) — тёплая золотистая подсветка бренда */ .plate-row.is-pinned { background: linear-gradient(180deg, #FDF7E9, #FBF1D9); border-color: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); } .plate-row.is-pinned:hover { border-color: var(--gold); } /* Индикатор «закреплён» — статичная звезда (закрепление задаётся в админке) */ .pin-flag { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } @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__plate svg { max-width: 100%; height: auto; } .plate-row__price { justify-self: end; align-self: end; } .plate-row.is-pinned { padding-left: 22px; } .plate-row .pin-flag { position: absolute; top: 14px; right: 16px; width: auto; height: auto; } }