@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800;900&display=swap'); /* =========================================================== AI.ARGEDA.RU — общая тема «тёмное стекло» v4 Подключается ПОСЛЕ инлайн-стилей страницы, поэтому переопределяет токены страниц и общие компоненты. v4 — фирменная палитра ARGEDA: бирюза + синий + серый. - тёмный фон #0f1117 (серо-синий) с бирюзовыми свечениями; - акценты #14b8a6 / #2dd4bf, второй акцент #2563eb; - стеклянные поверхности вместо белых карточек; - Unbounded в крупных заголовках и логотипе. Важно: фиолетово-малиновый (#cb11ab и производные) — это цвет Wildberries, а не ARGEDA. Он остаётся ТОЛЬКО на wb.html, где уместен как цвет площадки; включается через в конце файла. Везде остальное — бирюза. Почему всё держится в одном файле, а не правится по страницам: 18 страниц — это работающие приложения с большим JS. Разметку и скрипты не трогаем вообще; тема меняет только внешний слой. На чём это стоит: - страницы описывают поверхности через токены, а не хардкодом (проверено: `color:var(--white)` не встречается нигде — --white всегда подложка, поэтому его можно сделать тёмным); - два семейства токенов: --ink/--line/--white (16 страниц) и --text/--border/--bg-card (chat, music) — переопределяем оба; - редкие захардкоженные светлые подложки перечислены поимённо в разделе «точечные заплатки» внизу файла. Что НЕ трогаем намеренно: - --teal / --blue / --green / --red / --amber и цвета маркетплейсов (--wb, --ozon) — страницы используют их как смысловые акценты; - собственные тёмные темы страниц (body.dark, [data-theme="light"]): они выигрывают у :root по специфичности и остаются рабочими — переключатель темы на странице продолжает работать. =========================================================== */ :root{ /* --- источник правды новой палитры --- */ --ag-accent:#14b8a6; --ag-accent-lt:#2dd4bf; --ag-accent-dk:#0d9488; --ag-accent-2:#2563eb; --ag-brand:linear-gradient(135deg,#14b8a6,#2563eb); --ag-brand-hot:linear-gradient(135deg,#2dd4bf 0%,#14b8a6 55%,#2563eb 100%); --ag-cta:linear-gradient(135deg,#14b8a6,#2563eb); /* --- тёмная основа --- */ --ag-bg:#0f1117; --ag-ink:#e8eaf0; --ag-slate:#8b91a3; --ag-muted:#6b7484; --ag-line:rgba(45,212,191,.16); --ag-line-bright:rgba(45,212,191,.40); /* Поверхности плотнее, чем на лендинге (.45): в плотных интерфейсах таблиц и форм полупрозрачность съедает читаемость текста. */ --ag-surface:rgba(26,29,39,.72); --ag-surface-2:rgba(35,39,51,.62); --ag-surface-3:rgba(46,52,66,.55); --ag-glow:rgba(20,184,166,.35); --ag-glow-brand:0 8px 26px rgba(20,184,166,.34); --ag-glow-cta:0 8px 26px rgba(20,184,166,.34); /* --- шкала радиусов: одна лестница на весь сайт --- */ --ag-r-xs:8px; --ag-r-sm:10px; --ag-r-md:12px; --ag-r-lg:16px; --ag-r-xl:20px; --ag-r-2xl:26px; --ag-r-pill:999px; /* --- фокус: один и тот же во всех формах и кнопках --- */ --ag-focus:0 0 0 4px rgba(45,212,191,.22); --ag-focus-ring:rgba(45,212,191,.75); --ag-ease:cubic-bezier(.16,1,.3,1); /* --- семейство токенов A: index, wb, ozon, cards, account… --- */ --ink:var(--ag-ink); --slate:var(--ag-slate); --muted:var(--ag-muted); --line:var(--ag-line); --bg:var(--ag-bg); --white:var(--ag-surface); --brand:var(--ag-brand); /* --- семейство токенов B: chat, music --- */ --text:var(--ag-ink); --text-dim:var(--ag-slate); --border:var(--ag-line); --bg-card:var(--ag-surface); --bg-soft:var(--ag-surface-2); /* На тёмном фоне тени почти не видны — работу «подъёма» берёт на себя свечение и подсветка рамки, тени оставляем как глубину. */ --shadow-sm:0 1px 2px rgba(0,0,0,.34), 0 2px 10px rgba(0,0,0,.28); --shadow:0 4px 12px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.42); --shadow-lg:0 8px 20px rgba(0,0,0,.44), 0 28px 70px rgba(0,0,0,.55); /* Акцентные пары страниц сводим к одному фирменному градиенту. */ --p1:var(--ag-accent); --p2:var(--ag-accent-lt); --grad:var(--ag-brand); --vid-grad:var(--ag-brand); --accent:var(--ag-accent-lt); --accent2:var(--ag-accent-2); --accent-dim:var(--ag-accent); } /* Страницы, тёмные по умолчанию через (chat). Специфичность (0,2,0) выше :root — задаём те же значения, иначе их старая сине-серая палитра осталась бы островом. */ :root[data-ag="dark"]{ --bg:var(--ag-bg); --line:var(--ag-line); --border:var(--ag-line); --ink:var(--ag-ink); --text:var(--ag-ink); --slate:var(--ag-slate); --text-dim:var(--ag-slate); --muted:var(--ag-muted); --white:var(--ag-surface); --bg-card:var(--ag-surface); --bg-soft:var(--ag-surface-2); --accent:var(--ag-accent-lt); --accent-dim:var(--ag-accent); } /* ---------- фон страницы ---------- У 13 страниц в инлайн-стилях свой светлый радиальный градиент. Селектор `body` (0,0,1) тот же, но наш файл идёт ниже — перебивает. background-attachment:fixed, чтобы свечения не «ехали» при скролле. */ body{ background: radial-gradient(900px 620px at 88% -8%, rgba(20,184,166,.20), transparent 62%), radial-gradient(760px 620px at 4% 4%, rgba(37,99,235,.16), transparent 62%), radial-gradient(700px 700px at 50% 118%, rgba(45,212,191,.10), transparent 62%), var(--ag-bg); background-attachment:fixed; color:var(--ag-ink); letter-spacing:-.008em; text-wrap:pretty; } /* chat.html держит высоту 100vh и свой скролл внутри — фиксированный фон там лишний слой перерисовки. */ :root[data-ag="dark"] body{ background-attachment:scroll; } /* ---------- типографика ---------- Unbounded даём только h1/h2 и логотипу. Он заметно шире Manrope, и в h3/h4 внутри плотных карточек и таблиц заголовки начали бы переноситься и ломать сетку — там остаётся Manrope. */ h1,h2,.logo,.hero-title,.section-title{ font-family:'Unbounded','Manrope',sans-serif; letter-spacing:-.03em; text-wrap:balance; } h1{ font-weight:800; line-height:1.08; } h2{ font-weight:800; line-height:1.18; } h3,h4{ letter-spacing:-.02em; text-wrap:balance; } h3{ line-height:1.3; font-weight:700; } h4{ line-height:1.35; } .lead,p.lead{ font-weight:500; color:var(--ag-slate); } ::selection{ background:rgba(45,212,191,.30); color:#fff; } /* ---------- фокус: видимый и единый ---------- */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, .btn:focus-visible, .btn-cta:focus-visible, .tab:focus-visible, .chip:focus-visible{ outline:2px solid var(--ag-focus-ring); outline-offset:2px; } /* ---------- скроллбар ---------- */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:rgba(45,212,191,.28); border:2px solid transparent; border-radius:var(--ag-r-pill); background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:rgba(45,212,191,.5); border:2px solid transparent; background-clip:content-box; } /* ---------- шапка ---------- */ header{ background:rgba(15,17,23,.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--ag-line); } .nav{ height:70px; } .logo{ font-size:20px; letter-spacing:-.03em; color:var(--ag-ink); } .logo .mark{ width:34px; height:34px; flex-shrink:0; font-size:17px; border-radius:11px; background:var(--ag-brand); box-shadow:0 6px 18px rgba(20,184,166,.5); } .navlinks a{ color:var(--ag-slate); transition:color .16s var(--ag-ease), background .16s var(--ag-ease); } .navlinks a:hover{ color:var(--ag-ink); background:rgba(45,212,191,.12); } .panel{ padding:20px 0 64px; } /* ---------- кнопки ---------- */ .btn{ font-weight:700; border-radius:var(--ag-r-pill); transition:transform .18s var(--ag-ease), box-shadow .18s, background .18s, border-color .18s, color .18s; } .btn:active{ transform:translateY(0) scale(.985); } .btn:disabled, .btn[disabled], .btn-cta:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; } .btn-sm{ border-radius:var(--ag-r-pill); } .btn.lg{ border-radius:var(--ag-r-pill); } .btn-grad{ background:var(--ag-brand); color:#fff; box-shadow:var(--ag-glow-brand); } .btn-grad:hover{ transform:translateY(-2px); box-shadow:0 12px 40px var(--ag-glow); filter:brightness(1.1); } /* Стеклянная второстепенная кнопка — аналог .btn-glass с лендинга. */ .btn-ghost{ background:var(--ag-surface-2); color:var(--ag-ink); border:1px solid var(--ag-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:none; } .btn-ghost:hover{ transform:translateY(-2px); background:var(--ag-surface-3); border-color:var(--ag-accent-lt); box-shadow:none; } /* Главная кнопка действия. Была оранжевой — в новой палитре оранжевый выпадает из фиолетовой гаммы, сводим к фирменному градиенту. */ .btn-cta{ font-family:inherit; font-weight:800; font-size:16px; border:none; cursor:pointer; border-radius:var(--ag-r-pill); padding:15px 30px; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--ag-cta); color:#fff; box-shadow:var(--ag-glow-cta); transition:transform .18s var(--ag-ease), box-shadow .18s, filter .18s; } .btn-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 44px var(--ag-glow); filter:brightness(1.1); } .btn-cta:active{ transform:translateY(0) scale(.985); } /* ---------- формы ---------- Три :not() дают (0,3,1) — хватает, чтобы перебить страничные `.field input` (0,1,1); ползунки и флажки остаются со своим видом. Фон задаём явно: на тёмном светлое поле выжигает глаз. */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea{ border-radius:var(--ag-r-md); border:1px solid var(--ag-line); background:rgba(22,25,34,.7); color:var(--ag-ink); font-family:inherit; outline:none; transition:border-color .16s var(--ag-ease), box-shadow .16s var(--ag-ease), background .16s; } /* background здесь обязателен, а не только рамка: music.html держит `textarea:focus,input:focus{background:#fff}` (0,1,1) — без явного значения поле вспыхивало бы белым при фокусе. Наши (0,4,1) перебивают. */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus{ border-color:var(--ag-accent-lt); background:rgba(22,25,34,.85); box-shadow:var(--ag-focus); } input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):disabled, select:disabled, textarea:disabled{ opacity:.5; cursor:not-allowed; } /* В выпадающих списках варианты рисует система — на тёмном фоне без явного цвета они остаются чёрными на чёрном. */ select option{ background:#161922; color:var(--ag-ink); } /* Поля в чате и у наставника живут внутри composer-полосы — ободок фокуса вокруг них читался бы как ошибка вёрстки. */ .composer textarea:focus{ box-shadow:none; } .composer textarea{ background:transparent; } ::placeholder{ color:var(--ag-muted); opacity:1; } textarea{ resize:vertical; } label{ letter-spacing:0; } input[type="checkbox"], input[type="radio"]{ accent-color:var(--ag-accent-lt); } input[type="range"]{ accent-color:var(--ag-accent-lt); } /* ---------- карточки и блоки ---------- */ .card{ border-radius:var(--ag-r-xl); border:1px solid var(--ag-line); background:var(--ag-surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); } a.card{ transition:transform .2s var(--ag-ease), box-shadow .2s, border-color .2s, background .2s; } a.card:hover{ transform:translateY(-4px); background:var(--ag-surface-2); box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 30px var(--ag-glow); border-color:var(--ag-line-bright); } .res-block{ border-radius:var(--ag-r-lg); } .auth-note{ border-radius:var(--ag-r-xl); background:var(--ag-surface); border:1px solid var(--ag-line); box-shadow:var(--shadow); } .stat{ border-radius:var(--ag-r-lg); } .opt-title{ border-radius:var(--ag-r-md); } /* ---------- вкладки и чипы ---------- */ .tab{ border-radius:var(--ag-r-pill); color:var(--ag-slate); transition:color .15s var(--ag-ease), background .15s, border-color .15s, box-shadow .15s; } .tab:hover{ color:var(--ag-ink); } .chip{ border-radius:var(--ag-r-pill); transition:transform .15s var(--ag-ease), border-color .15s, background .15s, color .15s; } .chip:hover{ transform:translateY(-1px); border-color:var(--ag-line-bright); } .chip:active{ transform:translateY(0); } .eng-btn{ border-radius:var(--ag-r-pill); transition:.15s var(--ag-ease); } /* ---------- мелкие элементы ---------- */ .ag-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ag-accent-lt); background:rgba(20,184,166,.12); border:1px solid var(--ag-line-bright); padding:7px 16px; border-radius:var(--ag-r-pill); letter-spacing:0; } .ag-grad-text{ background:linear-gradient(135deg,#ffffff 30%,#2dd4bf 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .ag-underline{ background:linear-gradient(180deg,transparent 62%,rgba(45,212,191,.35) 62%); padding:0 .06em; } .hint{ line-height:1.45; color:var(--ag-muted); } .err{ border-radius:var(--ag-r-md); } .empty{ line-height:1.5; color:var(--ag-muted); } .spinner{ border-top-color:var(--ag-accent-lt); } .hero-icon{ border-radius:var(--ag-r-lg); } /* строка цифр/результатов */ .ag-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--ag-line); border-radius:var(--ag-r-xl); background:var(--ag-surface); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); overflow:hidden; } .ag-stat{ padding:22px 24px; border-right:1px solid var(--ag-line); } .ag-stat:last-child{ border-right:none; } .ag-stat b{ display:block; font-family:'Unbounded','Manrope',sans-serif; font-size:clamp(24px,3.2vw,32px); font-weight:800; line-height:1.1; letter-spacing:-.03em; background:var(--ag-brand-hot); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .ag-stat span{ display:block; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--ag-slate); line-height:1.4; } /* =========================================================== Точечные заплатки: светлые подложки, захардкоженные в страницах. Селекторы повторены один в один — специфичность та же, а файл идёт ниже инлайн-стилей, поэтому выигрывает. =========================================================== */ /* admin.html — единственная страница со светлым градиентом не на body-токене */ body{ background-color:var(--ag-bg); } /* account.html */ .btn-out{ background:var(--ag-surface-2); color:var(--ag-ink); border-color:var(--ag-line); } .btn-out:hover{ background:rgba(225,29,72,.16); border-color:rgba(244,63,94,.5); } .bal-pill{ background:rgba(20,184,166,.16); border-color:var(--ag-line-bright); color:var(--ag-ink); } /* card-editor.html */ /* card-editor.html: кнопка ИИ была окрашена в цвет Wildberries (рамка rgba(203,17,171,.22) и текст --wb2) — это оформление, а не метка площадки, поэтому уводим в бирюзу. Кнопка публикации .btn-wb там намеренно остаётся малиновой: она обозначает именно WB. */ .btn-ai{ background:linear-gradient(135deg,rgba(20,184,166,.22),rgba(37,99,235,.22)); color:var(--ag-ink); border-color:var(--ag-line-bright); } .btn-ai:hover{ background:linear-gradient(135deg,rgba(20,184,166,.34),rgba(37,99,235,.34)); } /* .err намеренно НЕ красим глобально: на 9 страницах это просто красный текст без подложки и без padding — фон превратил бы его в полосу, а в admin.html .err вообще пустое состояние списка. Единственный светлый случай (card-editor) поправлен в самой странице. */ /* image.html, cards-photo.html */ .es-sk{ background:linear-gradient(100deg,rgba(35,39,51,.6) 30%,rgba(55,45,90,.7) 50%,rgba(35,39,51,.6) 70%); } .card-btns .cb:hover{ background:var(--ag-surface-3); } /* coach.html — «тёплые» бежевые плашки наставника */ .coach-card.on{ background:rgba(20,184,166,.16); } .msg.ai .av{ background:linear-gradient(135deg,rgba(20,184,166,.35),rgba(37,99,235,.35)); } .msg.ai .body{ background:var(--ag-surface-2); } .due-badge.late{ background:rgba(225,29,72,.2); color:#fecdd3; } .due-badge.today{ background:rgba(245,158,11,.2); color:#fde68a; } .pf-sex.on{ background:rgba(20,184,166,.16); } /* ---------- адаптив ---------- */ @media(max-width:640px){ /* страничные @media идут в файле выше — без дубля desktop-высота из темы перебила бы их на мобилке */ .nav{ height:60px; } .logo{ font-size:17.5px; } .logo .mark{ width:30px; height:30px; border-radius:9px; font-size:15px; } .panel{ padding:16px 0 48px; } /* фиксированный фон на мобильных даёт заметный джанк при скролле */ body{ background-attachment:scroll; } .ag-stats{ grid-template-columns:1fr; } .ag-stat{ border-right:none; border-bottom:1px solid var(--ag-line); } .ag-stat:last-child{ border-bottom:none; } .btn-cta{ width:100%; padding:14px 22px; font-size:15.5px; } /* меньше 16px — iOS зумит страницу при фокусе в поле */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px; } /* палец попадает в кнопку с первого раза */ .btn{ min-height:42px; } .btn-sm{ min-height:36px; } } /* ---------- собственные тёмные темы страниц ---------- wb / image / cards-photo переключаются в body.dark своей палитрой. Она уже тёмная, поэтому не переопределяем цвета — только приводим к общему виду те компоненты, что заданы в этом файле. */ body.dark .btn-ghost, :root[data-ag="dark"] .btn-ghost{ background:var(--ag-surface-2); color:var(--ag-ink); border-color:var(--ag-line); } body.dark .btn-ghost:hover, :root[data-ag="dark"] .btn-ghost:hover{ background:var(--ag-surface-3); border-color:var(--ag-accent-lt); } body.dark header, :root[data-ag="dark"] header{ background:rgba(15,17,23,.85); border-bottom-color:var(--ag-line); } body.dark .ag-stats, :root[data-ag="dark"] .ag-stats{ background:var(--ag-surface); border-color:var(--ag-line); } body.dark .ag-stat, :root[data-ag="dark"] .ag-stat{ border-right-color:var(--ag-line); } body.dark .ag-eyebrow, :root[data-ag="dark"] .ag-eyebrow{ color:var(--ag-accent-lt); border-color:var(--ag-line-bright); } body.dark ::-webkit-scrollbar-thumb, :root[data-ag="dark"] ::-webkit-scrollbar-thumb{ background:rgba(45,212,191,.3); border:2px solid transparent; background-clip:content-box; } body.dark ::selection, :root[data-ag="dark"] ::selection{ background:rgba(45,212,191,.3); } body.dark .spinner, :root[data-ag="dark"] .spinner{ border-top-color:var(--ag-accent-lt); } /* ---------- кнопка переключения темы ---------- На страницах со своей кнопкой (wb, image, cards-photo, chat) стили берутся из их вёрстки — theme.js только перехватывает клик. Этот класс получают кнопки, которые скрипт добавляет сам. */ .ag-theme-toggle{ margin-left:10px; flex-shrink:0; width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; cursor:pointer; border-radius:50%; border:1px solid var(--ag-line); background:var(--ag-surface-2); color:var(--ag-ink); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .18s var(--ag-ease), border-color .18s, background .18s; } .ag-theme-toggle:hover{ border-color:var(--ag-accent-lt); background:var(--ag-surface-3); transform:rotate(15deg) scale(1.05); } /* запасное положение: страницы без шапки (forgot, reset, chat) */ .ag-theme-toggle--float{ position:fixed; right:18px; bottom:18px; z-index:9999; margin:0; box-shadow:var(--shadow); } /* =========================================================== Светлый режим: ставит theme.js. :root[data-theme] даёт (0,2,0) — выше страничных :root (0,1,0) и выше chat-овского body[data-theme="light"] (0,1,1), поэтому палитра здесь одна на весь сайт. =========================================================== */ :root[data-theme="light"]{ --ag-bg:#f4f7fb; --ag-ink:#1e293b; --ag-slate:#64748b; --ag-muted:#94a3b8; --ag-line:rgba(20,184,166,.18); --ag-line-bright:rgba(20,184,166,.45); --ag-surface:rgba(255,255,255,.86); --ag-surface-2:rgba(255,255,255,.95); --ag-surface-3:#ffffff; --ag-accent-lt:#14b8a6; --ag-glow:rgba(13,148,136,.18); --ag-glow-brand:0 8px 24px rgba(13,148,136,.20); --ag-glow-cta:0 8px 24px rgba(13,148,136,.20); --ag-focus:0 0 0 4px rgba(20,184,166,.16); --ag-focus-ring:rgba(20,184,166,.55); /* семейство A */ --ink:var(--ag-ink); --slate:var(--ag-slate); --muted:var(--ag-muted); --line:var(--ag-line); --bg:var(--ag-bg); --white:#ffffff; /* семейство B */ --text:var(--ag-ink); --text-dim:var(--ag-slate); --border:var(--ag-line); --bg-card:#ffffff; --bg-soft:#eef3f9; --shadow-sm:0 1px 2px rgba(30,41,59,.05), 0 2px 8px rgba(30,41,59,.05); --shadow:0 2px 6px rgba(30,41,59,.05), 0 12px 32px rgba(51,65,85,.10); --shadow-lg:0 4px 12px rgba(30,41,59,.07), 0 24px 60px rgba(51,65,85,.16); } /* Фон и поля заданы селекторами body / input — токенов мало, их нужно перебить прицельно. */ :root[data-theme="light"] body{ background: radial-gradient(900px 620px at 88% -8%, rgba(20,184,166,.12), transparent 62%), radial-gradient(760px 620px at 4% 4%, rgba(37,99,235,.10), transparent 62%), #f4f7fb; background-attachment:fixed; color:var(--ag-ink); } :root[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), :root[data-theme="light"] select, :root[data-theme="light"] textarea{ background:#fff; color:var(--ag-ink); border-color:var(--ag-line); } :root[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus{ background:#fff; border-color:var(--ag-accent-lt); } :root[data-theme="light"] select option{ background:#fff; color:var(--ag-ink); } :root[data-theme="light"] header{ background:rgba(255,255,255,.86); border-bottom-color:var(--ag-line); } :root[data-theme="light"] .card, :root[data-theme="light"] .ag-stats, :root[data-theme="light"] .auth-note{ background:#fff; border-color:var(--ag-line); } :root[data-theme="light"] .btn-ghost{ background:#fff; color:var(--ag-ink); border-color:var(--ag-line); } :root[data-theme="light"] .ag-grad-text{ background:linear-gradient(135deg,#1e293b 20%,#0d9488 100%); } /* Точечные заплатки выше рассчитаны на тёмный фон — в светлом режиме возвращаем исходные светлые значения. */ :root[data-theme="light"] .btn-out{ background:#fff; } :root[data-theme="light"] .btn-out:hover{ background:#fef2f2; } :root[data-theme="light"] .bal-pill{ background:#fff7ed; } :root[data-theme="light"] .btn-ai{ background:linear-gradient(135deg,#e6fbf7,#e6efff); color:#0f766e; border-color:rgba(20,184,166,.28); } :root[data-theme="light"] .btn-ai:hover{ background:linear-gradient(135deg,#d3f6ef,#d6e6ff); } :root[data-theme="light"] .es-sk{ background:linear-gradient(100deg,#eef2f7 30%,#f6f9fc 50%,#eef2f7 70%); } :root[data-theme="light"] .card-btns .cb:hover{ background:#fff; } :root[data-theme="light"] .coach-card.on{ background:#fff7ed; } :root[data-theme="light"] .msg.ai .av{ background:linear-gradient(135deg,#fff7ed,#ffedd5); } :root[data-theme="light"] .msg.ai .body{ background:#fff7ed; } :root[data-theme="light"] .due-badge.late{ background:#fee2e2; color:#b91c1c; } :root[data-theme="light"] .due-badge.today{ background:#ffedd5; color:#9a3412; } :root[data-theme="light"] .pf-sex.on{ background:#fff7ed; } :root[data-theme="light"] .ag-theme-toggle{ background:#fff; color:#1e293b; } /* =========================================================== Исключение: страница Wildberries. Цвет площадки (#cb11ab) уместен там, где речь именно о WB, и ничего не говорит о бренде ARGEDA на остальных страницах. Включается атрибутом — только wb.html. Достаточно переопределить --ag-accent*: все компоненты этого файла (кнопки, фокус, рамки, свечения, скроллбар) ссылаются на них, поэтому акцент разворачивается целиком, без дублирования правил. =========================================================== */ :root[data-ag-brand="wb"]{ --ag-accent:#cb11ab; --ag-accent-lt:#e15fcd; --ag-accent-dk:#7c1d9e; --ag-accent-2:#7c1d9e; --ag-brand:linear-gradient(135deg,#cb11ab,#7c1d9e); --ag-brand-hot:linear-gradient(135deg,#e15fcd 0%,#cb11ab 55%,#7c1d9e 100%); --ag-cta:linear-gradient(135deg,#cb11ab,#7c1d9e); --ag-line:rgba(225,95,205,.16); --ag-line-bright:rgba(225,95,205,.40); --ag-glow:rgba(203,17,171,.35); --ag-glow-brand:0 8px 26px rgba(203,17,171,.34); --ag-glow-cta:0 8px 26px rgba(203,17,171,.34); --ag-focus:0 0 0 4px rgba(225,95,205,.22); --ag-focus-ring:rgba(225,95,205,.75); } /* фон и свечения страницы — в цвете площадки */ :root[data-ag-brand="wb"] body{ background: radial-gradient(900px 620px at 88% -8%, rgba(203,17,171,.20), transparent 62%), radial-gradient(760px 620px at 4% 4%, rgba(124,29,158,.16), transparent 62%), radial-gradient(700px 700px at 50% 118%, rgba(225,95,205,.10), transparent 62%), var(--ag-bg); background-attachment:fixed; } :root[data-ag-brand="wb"] ::selection{ background:rgba(225,95,205,.30); } :root[data-ag-brand="wb"] ::-webkit-scrollbar-thumb{ background:rgba(225,95,205,.28); } :root[data-ag-brand="wb"] ::-webkit-scrollbar-thumb:hover{ background:rgba(225,95,205,.5); } :root[data-ag-brand="wb"][data-theme="light"]{ --ag-line:rgba(203,17,171,.18); --ag-line-bright:rgba(203,17,171,.45); --ag-accent-lt:#cb11ab; } :root[data-ag-brand="wb"][data-theme="light"] body{ background: radial-gradient(900px 620px at 88% -8%, rgba(203,17,171,.12), transparent 62%), radial-gradient(760px 620px at 4% 4%, rgba(124,29,158,.10), transparent 62%), #f4f7fb; background-attachment:fixed; } /* ---------- уважаем системную настройку «меньше движения» ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }