/* ========================================================================= base.css — ручной слой: сброс, интерактивные состояния, оверлеи, тосты. Подключается ПОСЛЕ css/figma.css, поэтому переопределяет генерируемые классы при равной специфичности. Регенерация сайта этот файл не трогает. ========================================================================= */ /* --- токены дизайн-системы макета -------------------------------------- */ :root{ --c-ink:#0b0b0f; /* основной тёмный */ --c-accent:#facc15; /* жёлтый акцент */ --c-violet:#7c3aed; /* фиолетовый акцент */ --c-line:#1f2937; /* рамка на тёмном */ --c-line-2:#2a2f3d; --c-muted:#cbd5e1; --c-muted-2:#6b7280; --c-cream:#fff8f0; --c-white:#fff; --c-danger:#ef4444; --c-ok:#22c55e; } /* --- сброс -------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--c-ink);color:var(--c-white); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; overflow-x:hidden} p,h1,h2,h3,h4,figure,blockquote{margin:0} ul,ol{margin:0;padding:0;list-style:none} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{display:block;background:none;border:0;padding:0;margin:0;color:inherit; font:inherit;text-align:inherit;cursor:pointer;-webkit-appearance:none;appearance:none} input,select,textarea{font:inherit;color:inherit;margin:0} select{cursor:pointer} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px} /* --- каркас страницы ---------------------------------------------------- */ .page{width:100%} .fw{margin-inline:auto} .fw-m{max-width:520px} /* линия (нода LINE занимает 0px по высоте, как в Figma) ------------------ */ .fline{position:relative;overflow:visible} .fline::after{content:"";position:absolute;left:0;right:0;top:0; height:var(--lw,1px);background:var(--lc,currentColor)} /* --- поля ввода --------------------------------------------------------- */ .fld{cursor:text} .fld input,.fld select,.fld textarea{font-family:inherit} .fld input::placeholder,.fld textarea::placeholder{color:currentColor;opacity:.45} .fld:focus-within{box-shadow:inset 0 0 0 2px var(--c-accent)} .fld.has-error{box-shadow:inset 0 0 0 2px var(--c-danger)} .fld textarea{height:100%;min-height:100%} .field-error{display:block;margin-top:6px;color:var(--c-danger); font-size:12px;font-weight:600;line-height:16px;white-space:normal} .field-ok{color:var(--c-ok)} /* --- состояния из макета (нормализованы генератором) -------------------- */ [data-n="filter"],[data-n="tab"],[data-n="meeting"],[data-n^="meeting-"], [data-n^="topic-row"],[data-n^="subtopic"],[data-n^="runner-row"], [data-n^="race-item"],[data-n^="match-row"]{cursor:pointer} .is-active[data-n="filter"],.is-active[data-n="tab"]{ background-color:var(--c-accent)!important;box-shadow:none!important} .is-active[data-n="filter"] p,.is-active[data-n="tab"] p{color:var(--c-ink)!important} .is-active[data-n="meeting"]{ background-color:var(--c-accent)!important; box-shadow:inset 1px 0 0 0 var(--c-accent)!important} .is-active[data-n="meeting"] p{color:var(--c-ink)!important;opacity:1} .is-active[data-n="meeting"] [data-n="race-number-badge"]{background-color:var(--c-ink)!important} .is-active[data-n="meeting"] [data-n="race-number-badge"] p{color:var(--c-accent)!important} .is-active[data-n^="topic-row"]{background-color:var(--c-accent)} .is-active[data-n^="topic-row"] p{color:var(--c-ink)} /* тумблеры: нейтраль = выключен */ [data-n="toggle-box"]{cursor:pointer;justify-content:flex-start!important; background-color:var(--c-ink)!important;box-shadow:inset 0 0 0 1px var(--c-line-2)!important} [data-n="toggle-box"]>*{background-color:var(--c-muted-2)!important;transition:background-color .15s} [data-n="toggle-box"].is-on{justify-content:flex-end!important; background-color:var(--c-violet)!important;box-shadow:none!important} [data-n="toggle-box"].is-on>*{background-color:var(--c-accent)!important} [data-n="toggle-box"][aria-disabled="true"]{opacity:.55;cursor:not-allowed} /* чекбоксы: галочка видна только во включённом состоянии */ [data-n="checkbox"],[data-n="checkbox-box"]{cursor:pointer} [data-n="checkbox"]>*,[data-n="checkbox-box"]>*{visibility:hidden} [data-n="checkbox"].is-on>*,[data-n="checkbox-box"].is-on>*{visibility:visible} [data-n="checkbox"].is-on,[data-n="checkbox-box"].is-on{background-color:var(--c-accent)!important} [data-n="checkbox"].has-error,[data-n="checkbox-box"].has-error{ box-shadow:inset 0 0 0 2px var(--c-danger)!important} /* аккордеон */ .acc-item{cursor:pointer} .acc-item.is-open{height:auto!important;justify-content:flex-start!important} .acc-item>:not(:first-child){display:none} .acc-item.is-open>:not(:first-child){display:block} .acc-item .acc-arrow{transition:transform .15s} /* --- наведение / нажатие ----------------------------------------------- */ button:not([disabled]):hover,a:hover{filter:brightness(1.08)} button:not([disabled]):active{transform:translateY(1px)} button[disabled],button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none} [data-n^="match-row"]:hover,[data-n^="race-item"]:hover,[data-n^="runner-row"]:hover, [data-n^="topic-row"]:hover,[data-n="meeting"]:hover{filter:brightness(1.12)} [data-n^="odd-"]:hover,[data-n^="odds-"]:hover{outline:1px solid var(--c-accent);outline-offset:-1px} .is-picked{box-shadow:inset 0 0 0 2px var(--c-accent)!important} /* --- оверлеи (модалки из макета) ---------------------------------------- */ .ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center; justify-content:center;padding:24px;overflow:auto; background:rgba(11,11,15,.85);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .ov>div{margin:auto} .ov[hidden]{display:none} body.ov-open{overflow:hidden} @media (max-width:900px){.ov{padding:12px}} /* --- тосты -------------------------------------------------------------- */ .toasts{position:fixed;right:16px;bottom:16px;z-index:90;display:flex; flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))} .toast{background:var(--c-white);color:var(--c-ink);padding:12px 14px; border-left:6px solid var(--c-accent); box-shadow:0 8px 24px rgba(0,0,0,.4); font-size:13px;line-height:18px;font-weight:600; animation:toast-in .18s ease-out} .toast.err{border-left-color:var(--c-danger)} .toast.ok{border-left-color:var(--c-ok)} .toast .demo{display:inline-block;margin-left:6px;padding:1px 6px; background:var(--c-violet);color:var(--c-white); font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .toast code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px; font-weight:800;letter-spacing:.12em} @keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* --- служебное ---------------------------------------------------------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .is-hidden{display:none!important} [data-n="scrollable-nav-strip"],[data-n="scrollable-nav"],[data-n="meetings-scroller"], [data-n="tabs-row"]{overflow-x:auto;scrollbar-width:none} [data-n="scrollable-nav-strip"]::-webkit-scrollbar, [data-n="scrollable-nav"]::-webkit-scrollbar{display:none} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Шеврон для