/* ========================================================================== AG / PF filters — 3D "tablet" pills (checkboxes / radios) Требование: неактивные = графитово‑синий/антрацит, активные = бордовый. Состояние выбранности должно быть видно сразу + эффект "вдавливания". ========================================================================== */ :root{ /* форма */ --ag-radius: 999px; /* палитра пилюль — чуть светлее, чтобы текст читался сразу */ --ag-pill-off: #3A4653; /* графитово‑синий / антрацит (осветлённый) */ /* бордовый "лампа": берём фирменный тон и делаем подсветку */ --ag-pill-on-base: var(--en-logo-bg, var(--burgundy, #7c2645)); --ag-pill-on: var(--burgundy-light, #c44d77); /* верхняя «светящаяся» часть */ --ag-pill-on-2: color-mix(in srgb, var(--ag-pill-on-base) 88%, black); /* нижняя/край */ /* текст */ --ag-pill-text: #ffffff; --ag-pill-text-dim: rgba(255,255,255,.94); /* бордеры */ --ag-pill-off-border: rgba(255,255,255,.18); --ag-pill-on-border: rgba(0,0,0,.22); /* glow */ --ag-pill-on-glow: rgba(196,77,119,.55); --ag-pill-on-glow-soft: rgba(196,77,119,.28); /* тени */ --ag-pill-shadow-raised: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 0 rgba(0,0,0,.26), 0 6px 14px rgba(15,23,42,.16); --ag-pill-shadow-pressed: inset 0 4px 10px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16), 0 3px 10px rgba(15,23,42,.12); } /* Generic pill group wrapper */ .ag-pills{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .ag-pills .ag-note{opacity:.85} /* Hide native inputs but keep them accessible */ .ag-pills input[type="checkbox"], .ag-pills input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; } /* Base pill look — "tablet" */ .ag-pill{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; min-height:38px; border-radius:var(--ag-radius); /* 3D + шероховатость (градиент + микро‑текстура) — чуть светлее */ background: radial-gradient(120% 120% at 18% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 55%), radial-gradient(120% 120% at 86% 88%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%), repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 7px), linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08) ), linear-gradient(180deg, color-mix(in srgb, var(--ag-pill-off) 62%, white), color-mix(in srgb, var(--ag-pill-off) 92%, black) ); border:1px solid var(--ag-pill-off-border); color:var(--ag-pill-text-dim); text-shadow:0 1px 0 rgba(0,0,0,.28); box-shadow:var(--ag-pill-shadow-raised); cursor:pointer; user-select:none; text-decoration:none; font-size:14px; line-height:1; font-weight:600; letter-spacing:.2px; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease, background .12s ease; -webkit-tap-highlight-color: transparent; } /* Fallback, если color-mix недоступен (старые браузеры) */ @supports not (color: color-mix(in srgb, black 50%, white)) { .ag-pill{ background: radial-gradient(120% 120% at 18% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 55%), radial-gradient(120% 120% at 86% 88%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%), repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 7px), linear-gradient(180deg, #6b7b8a, #2d3843); } } /* Hover: чуть "подсветить", но без смены палитры */ .ag-pill:hover{ filter: brightness(1.08) saturate(1.02); } /* Press (mouse down) — лёгкое вдавливание */ .ag-pills label:active .ag-pill, .ag-pill:active{ transform: translateY(1px); box-shadow:var(--ag-pill-shadow-pressed); } /* Focus: видимый контур для клавиатуры */ .ag-pills input:focus-visible + .ag-pill, .ag-pills label:focus-within .ag-pill, .ag-pill:focus-visible{ outline:2px solid rgba(196,77,119,.45); outline-offset:2px; } /* Checked / active — бордовый "лампа" + "вдавленный" */ .ag-pills input:checked + .ag-pill, input:checked + label.ag-pill, .ag-pill.is-active{ background: radial-gradient(85% 80% at 50% 38%, rgba(255,235,245,.38), rgba(255,235,245,0) 60%), radial-gradient(120% 120% at 18% 22%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%), radial-gradient(120% 120% at 86% 88%, rgba(0,0,0,.34), rgba(0,0,0,0) 60%), repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,0) 1px 7px), linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.10) ), linear-gradient(180deg, color-mix(in srgb, var(--ag-pill-on) 78%, white), var(--ag-pill-on-2) ); border-color:var(--ag-pill-on-border); color:var(--ag-pill-text); box-shadow: var(--ag-pill-shadow-pressed), 0 0 0 1px rgba(255,255,255,.10), 0 0 14px var(--ag-pill-on-glow-soft), 0 0 28px var(--ag-pill-on-glow); transform: translateY(1px); } /* Checked fallback (без color-mix) */ @supports not (color: color-mix(in srgb, black 50%, white)) { .ag-pills input:checked + .ag-pill, input:checked + label.ag-pill, .ag-pill.is-active{ background: radial-gradient(85% 80% at 50% 38%, rgba(255,235,245,.38), rgba(255,235,245,0) 60%), radial-gradient(120% 120% at 18% 22%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%), radial-gradient(120% 120% at 86% 88%, rgba(0,0,0,.34), rgba(0,0,0,0) 60%), repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,0) 1px 7px), linear-gradient(180deg, #c44d77, #7c2645); } } /* Disabled */ .ag-pills input:disabled + .ag-pill, .ag-pill.is-disabled{ opacity:.55; cursor:not-allowed; filter: grayscale(.15); box-shadow: none; } /* Small helper when markup is