/* ===================================================================== TOYS Media — общие стили Статический сайт, три страницы: /, /cases/, /verify/ Подход: mobile-first, без сборки, без зависимостей. Визуальная система: — почти чёрный фон, много воздуха, крупная типографика, строгие карточки; — оживление: свечение границ у курсора, градиентный след, мягкая фоновая волна, «живые» разделительные линии. Палитра только фирменная: чёрный, графит, тёплый белый, оранжевый, красно-оранжевый, янтарный. Других оттенков на сайте нет. ===================================================================== */ /* ================= ТОКЕНЫ ================= */ :root{ /* поверхности: почти чёрный → графит */ --ink-900:#050507; /* самый глубокий фон, виньетка */ --ink-800:#08080b; /* фон страницы */ --ink-700:#0c0c10; /* капсула шапки, футер */ --ink-600:#111116; /* карточка */ --ink-500:#16161c; /* карточка при наведении */ --graphite:#1d1d25; /* поля ввода, вспомогательные плашки */ --line:rgba(246,243,238,.09); --line-strong:rgba(246,243,238,.2); --glow-inset:rgba(255,255,255,.05); /* текст — тёплый белый, контраст проверен на --ink-800/--ink-600 */ --paper:#f6f3ee; --text-primary:#f4f1ec; /* 17.4:1 / 15.9:1 */ --text-muted:#b3aea6; /* 8.8:1 / 8.0:1 */ --text-dim:#8b867e; /* 5.3:1 / 4.9:1 */ --text-ink:#0c0c10; /* текст на тёплом белом блоке */ --text-ink-soft:#4b4842; /* ---- АКЦЕНТНАЯ ТЕМА ---- Три фирменных режима переключаются атрибутом data-accent на . Тёмный фон одинаков во всех режимах: это не светлая/тёмная тема, а только смена акцента. Значение по умолчанию — Orange, поэтому без JS и без атрибута сайт выглядит штатно. */ --accent:#ff6a00; --accent-secondary:#ff9820; --accent-rgb:255,106,0; --accent-secondary-rgb:255,152,32; /* производные оттенки считаются из --accent-rgb один раз: тема переопределяет только четыре строки выше */ --accent-soft:rgba(var(--accent-rgb),.12); --accent-border:rgba(var(--accent-rgb),.42); --accent-glow:rgba(var(--accent-rgb),.45); --accent-ink:#140600; /* текст на акцентной заливке */ /* предупреждение — красно-оранжевый, не зависит от выбранной темы */ --warn:#ff5a2a; --warn-rgb:255,90,42; /* шкала отступов */ --s2:4px; --s4:8px; --s5:12px; --s6:16px; --s7:24px; --s8:32px; --s9:40px; --s10:48px; --s11:56px; --s12:64px; --s13:80px; --s14:96px; /* радиусы и габариты */ --r:18px; --r-lg:26px; --r-sm:12px; --r-pill:9999px; --maxw:1180px; --hdr-h:76px; /* мелкое зерно поверх фона — оригинальная текстура, не картинка */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); color-scheme:dark; } :root[data-accent="ember"]{ --accent:#ff3d24; --accent-secondary:#ff7600; --accent-rgb:255,61,36; --accent-secondary-rgb:255,118,0; } :root[data-accent="amber"]{ --accent:#ff9800; --accent-secondary:#ffc247; --accent-rgb:255,152,0; --accent-secondary-rgb:255,194,71; } /* смена режима — плавная, но переход живёт только те 450 мс, пока скрипт держит класс: постоянных transition на всём документе нет */ html.accent-anim, html.accent-anim *, html.accent-anim *::before, html.accent-anim *::after{ transition:background-color .45s ease,background-image .45s ease, color .45s ease,border-color .45s ease,box-shadow .45s ease, outline-color .45s ease!important; } /* ================= БАЗА ================= */ *{box-sizing:border-box} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--ink-800); color:var(--text-primary); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } a{color:inherit;text-decoration:none} p{margin:0} h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08} ul{margin:0;padding:0;list-style:none} button,input,textarea,select{font-family:inherit;font-size:inherit} img,svg{max-width:100%} :focus-visible{ outline:2px solid var(--accent-secondary); outline-offset:3px; border-radius:var(--s4); } /* якорные цели не уезжают под липкую шапку */ [id]{scroll-margin-top:calc(var(--hdr-h) + var(--s7))} /* ================= СЛУЖЕБНОЕ ================= */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:var(--s6);top:-100px;z-index:200; background:var(--accent);color:var(--accent-ink); padding:var(--s5) var(--s7);border-radius:var(--r-pill); font-weight:600;transition:top .18s ease; } .skip-link:focus{top:var(--s5)} .wrap{ width:100%;max-width:var(--maxw); margin:0 auto;padding:0 var(--s6); position:relative;z-index:2; } .section{padding-block:var(--s12)} .section.section-numbers{padding-bottom:0} .section.section-clients{padding-top:60px} .section-head{margin-bottom:var(--s10)} .section-head p{color:var(--text-muted);margin-top:var(--s6);max-width:60ch} .center{text-align:center} .muted{color:var(--text-muted)} .dim{color:var(--text-dim)} .na{color:var(--text-dim)} .stack{display:flex;flex-direction:column;gap:var(--s6)} .grid{display:grid;gap:var(--s6)} /* ================= ТИПОГРАФИКА ================= */ /* крупный сухой гротеск + курсивная антиква на акцентных словах */ .display{ font-weight:600; font-size:clamp(34px,7.2vw,68px); line-height:1.04;letter-spacing:-.04em; } .display em, .display mark{ font-family:'IBM Plex Serif',Georgia,serif; font-style:italic;font-weight:400; letter-spacing:-.02em; background:none;color:var(--accent); } .h2{font-size:clamp(24px,3.9vw,40px);letter-spacing:-.035em} .h2 em{ font-family:'IBM Plex Serif',Georgia,serif; font-style:italic;font-weight:400;color:var(--accent); } .h3{font-size:clamp(18px,2.4vw,21px);letter-spacing:-.02em} .label{ font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent-secondary); } /* точка-индикатор перед мономарками */ .label::before{ content:"";display:inline-block;vertical-align:middle; width:5px;height:5px;border-radius:50%;margin-right:8px; background:var(--accent); box-shadow:0 0 8px 1px var(--accent-glow); } mark{background:none;color:var(--accent)} /* линия под заголовком секции */ .h2-line::after{ content:"";display:block;width:64px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),0)); margin-top:var(--s6); } .center.h2-line::after{margin-left:auto;margin-right:auto} /* ================= ФОН СТРАНИЦЫ ================= */ /* фиксированный слой: глубина, виньетка и зерно. Никаких ярких шаров — только очень мягкие поля цвета. */ .bg{ position:fixed;inset:0;z-index:0;pointer-events:none; overflow:hidden;background:var(--ink-800); } .bg i{position:absolute;display:block;border-radius:50%;opacity:.75} .bg-1{ width:1000px;height:1000px;left:-300px;top:-420px; background:radial-gradient(circle,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),0) 66%); } .bg-2{ width:820px;height:820px;right:-280px;bottom:-320px; background:radial-gradient(circle,rgba(var(--accent-secondary-rgb),.07),rgba(var(--accent-rgb),0) 68%); } /* затемнение по краям */ .bg::before{ content:"";position:absolute;inset:0; background:radial-gradient(125% 85% at 50% 22%,transparent 38%,var(--ink-900) 100%); } /* слабая текстура */ .bg::after{ content:"";position:absolute;inset:-100%; background-image:var(--grain); opacity:.045; } /* ================= ФОНОВАЯ ВОЛНА HERO ================= */ /* одна цельная энергетическая форма: радиальное ядро + конический перелив, собранные общей маской. Цвет полностью зависит от темы. */ .hero-wave{ position:absolute;left:50%;top:-18vh;z-index:-1; width:min(1560px,152vw);height:min(1180px,124vh); transform:translateX(-50%); pointer-events:none; } .hero-wave i{ position:absolute;inset:0;display:block; -webkit-mask-image:radial-gradient(58% 46% at 50% 46%,#000 8%,rgba(0,0,0,.62) 46%,transparent 78%); mask-image:radial-gradient(58% 46% at 50% 46%,#000 8%,rgba(0,0,0,.62) 46%,transparent 78%); } /* ядро волны */ .wave-core{ background: radial-gradient(46% 34% at 50% 44%,rgba(var(--accent-rgb),.34),rgba(var(--accent-rgb),.10) 48%,transparent 74%), conic-gradient(from 192deg at 52% 46%, rgba(var(--accent-rgb),0) 0deg, rgba(var(--accent-rgb),.30) 64deg, rgba(var(--accent-secondary-rgb),.20) 148deg, rgba(var(--accent-rgb),.24) 226deg, rgba(var(--accent-rgb),0) 330deg); } /* полупрозрачные переливы поверх ядра */ .wave-veil{ background: conic-gradient(from 8deg at 46% 52%, rgba(var(--accent-secondary-rgb),0) 0deg, rgba(var(--accent-secondary-rgb),.16) 90deg, rgba(var(--accent-rgb),.10) 190deg, rgba(var(--accent-secondary-rgb),0) 300deg); opacity:.85; } /* ================= ГРАДИЕНТНЫЙ СЛЕД КУРСОРА ================= */ /* три фиксированных слоя, которые догоняют курсор с разной задержкой. Ближний — ярче и меньше, дальние — крупнее и мягче. Слой существует в разметке всегда, включается только скриптом. */ .trail{ position:fixed;inset:0;z-index:1;pointer-events:none; opacity:0;transition:opacity .7s ease; /* слой не участвует в раскладке и не рисуется за пределами экрана */ contain:layout paint style; } .trail.is-on{opacity:var(--trail-a,0)} /* Центрируем слой относительно его собственного размера. Процентные margin считались бы от ширины контейнера (всего экрана), поэтому смещение задаём внутри transform — там проценты берутся от размеров самого элемента. */ .trail i{ position:absolute;left:0;top:0;display:block;border-radius:50%; will-change:transform; } .trail-1{ width:300px;height:300px; background:radial-gradient(circle,rgba(var(--accent-rgb),.34),rgba(var(--accent-rgb),.10) 42%,transparent 68%); } .trail-2{ width:560px;height:560px; background:radial-gradient(circle,rgba(var(--accent-secondary-rgb),.16),rgba(var(--accent-rgb),.06) 46%,transparent 72%); } .trail-3{ width:880px;height:880px; background:radial-gradient(circle,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),0) 70%); } /* ================= ШАПКА ================= */ /* капсула внутри общего контейнера: почти чёрное полупрозрачное стекло, тонкая обводка и мягкое акцентное свечение у CTA */ .hdr{ position:sticky;top:0;z-index:70; padding:10px 0; transition:padding .28s ease; } .hdr-in{ display:flex;align-items:center;gap:var(--s5); min-height:56px; padding:7px 8px 7px var(--s6); border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(8,8,11,.62); box-shadow:0 14px 34px -24px #000,inset 0 1px 0 var(--glow-inset); transition:min-height .28s ease,background .28s ease, border-color .28s ease,box-shadow .28s ease; } @supports (backdrop-filter:blur(14px)){ .hdr-in{backdrop-filter:blur(14px) saturate(140%)} } @supports not (backdrop-filter:blur(14px)){ .hdr-in{background:rgba(8,8,11,.94)} } /* прокрутка: плотнее фон, заметнее граница, чуть ниже капсула */ .hdr.is-stuck{padding:6px 0} .hdr.is-stuck .hdr-in{ min-height:50px; background:rgba(5,5,7,.88); border-color:var(--line-strong); box-shadow:0 18px 40px -26px #000,inset 0 1px 0 var(--glow-inset); } @supports not (backdrop-filter:blur(14px)){ .hdr.is-stuck .hdr-in{background:rgba(5,5,7,.97)} } .logo{ display:flex;align-items:center;gap:var(--s4); font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase; flex:0 0 auto; } .logo svg{width:20px;height:20px;flex:0 0 auto} .logo svg path{fill:var(--accent)} .logo-full{display:none} .hdr-nav{display:flex;align-items:center;gap:var(--s7);margin-left:auto} .hdr-link{ position:relative; font-size:15px;color:var(--text-muted);padding:var(--s2) 0; white-space:nowrap;transition:color .2s ease; } .hdr-link::after{ content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px; border-radius:2px;background:var(--accent); box-shadow:0 0 10px 0 var(--accent-glow); transition:width .24s ease; } .hdr-link:hover{color:var(--text-primary)} .hdr-link:hover::after{width:100%} .hdr-link[aria-current="page"]{color:var(--text-primary)} .hdr-link[aria-current="page"]::after{width:100%} /* длинные хвосты подписей прячем, когда для них мало места */ .hdr-link-full, .hdr-cta-full{display:none} /* переключатель акцентной темы: три точки, активная — светится */ .accent-switch{ flex:0 0 auto; display:inline-flex;align-items:center;gap:5px; padding:8px 10px;border-radius:var(--r-pill); background:rgba(246,243,238,.04); border:1px solid var(--line); cursor:pointer; transition:border-color .2s ease,background .2s ease; } .accent-switch:hover{border-color:var(--accent-border);background:rgba(var(--accent-rgb),.09)} .accent-switch i{ width:8px;height:8px;border-radius:50%;display:block; background:var(--dot);opacity:.3; transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease; } .accent-switch i:nth-child(1){--dot:#ff6a00} .accent-switch i:nth-child(2){--dot:#ff3d24} .accent-switch i:nth-child(3){--dot:#ff9800} /* текущий режим виден без скрипта: состояние читается из data-accent */ :root:not([data-accent]) .accent-switch i:nth-child(1), :root[data-accent="orange"] .accent-switch i:nth-child(1), :root[data-accent="ember"] .accent-switch i:nth-child(2), :root[data-accent="amber"] .accent-switch i:nth-child(3){ opacity:1;transform:scale(1.35); box-shadow:0 0 10px 1px var(--dot); } /* без JS кнопка ничего не переключает — не показываем */ html:not(.js) .accent-switch{display:none} /* компактное мобильное меню */ .hdr-burger{ flex:0 0 auto;order:-1; width:34px;height:34px;border-radius:50%; display:none;place-items:center;gap:4px; background:transparent;border:1px solid var(--line); color:var(--text-muted);cursor:pointer;padding:0; transition:border-color .2s ease,color .2s ease; } .hdr-burger:hover{border-color:var(--accent-border);color:var(--text-primary)} .hdr-burger span{ display:block;width:14px;height:1.5px;border-radius:2px;background:currentColor; transition:transform .24s ease,opacity .24s ease; } .hdr-burger[aria-expanded="true"] span:first-child{transform:translateY(2.8px) rotate(45deg)} .hdr-burger[aria-expanded="true"] span:last-child{transform:translateY(-2.8px) rotate(-45deg)} /* ================= КНОПКИ ================= */ .btn{ position:relative; display:inline-flex;align-items:center;justify-content:center;gap:var(--s4); padding:15px var(--s8);border-radius:var(--r-pill); font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em; background:var(--accent);color:var(--accent-ink); border:1px solid transparent;cursor:pointer;text-align:center; box-shadow:0 10px 30px -14px var(--accent-glow); transition:background .2s ease,transform .2s ease,box-shadow .25s ease,border-color .2s ease; } .btn:hover{ background:var(--accent-secondary); box-shadow:0 14px 38px -12px var(--accent-glow); } .btn:active{transform:translateY(1px)} .btn-quiet{ background:transparent;color:var(--text-primary); border-color:var(--line-strong); box-shadow:inset 0 1px 0 var(--glow-inset); } .btn-quiet:hover{ background:rgba(var(--accent-rgb),.08); border-color:var(--accent-border); color:var(--text-primary); box-shadow:0 12px 30px -20px var(--accent-glow); } .btn-sm{padding:10px var(--s6);font-size:14px;white-space:nowrap} /* Кнопка-заглушка: ничего не делает и не притворяется рабочей */ .btn[disabled]{ opacity:.45;cursor:default;box-shadow:none;pointer-events:none; } .btn-wide{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s5)} .btn-row .btn{flex:0 1 auto;width:auto} .btn-row.center{justify-content:center} /* CTA в шапке — с постоянным мягким свечением */ .hdr-cta{ flex:0 0 auto; box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28),0 10px 26px -12px var(--accent-glow); } /* круглая кнопка-стрелка */ .fab{ width:52px;height:52px;border-radius:50%;flex:0 0 auto; display:grid;place-items:center;font-size:19px;line-height:1; background:var(--accent);color:var(--accent-ink); border:1px solid transparent;cursor:pointer; box-shadow:0 10px 26px -14px var(--accent-glow); transition:background .2s ease,box-shadow .25s ease; } .fab:hover{background:var(--accent-secondary);box-shadow:0 14px 32px -12px var(--accent-glow)} .fab-ghost{ background:var(--ink-500);color:var(--text-primary); border-color:var(--line-strong);box-shadow:inset 0 1px 0 var(--glow-inset); } .fab-ghost:hover{background:var(--graphite);box-shadow:0 12px 28px -20px var(--accent-glow)} .link-back{ display:inline-flex;align-items:center;gap:var(--s4); color:var(--text-muted);font-size:15px;transition:color .2s ease; } .link-back:hover{color:var(--accent-secondary)} /* ================= БЛОКИ ================= */ .block{ position:relative;overflow:hidden; background:var(--ink-600); border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--glow-inset); border-radius:var(--r); padding:var(--s8) var(--s7); transition:border-color .28s ease,background .28s ease,transform .28s ease; } .block:hover{border-color:var(--line-strong);background-color:var(--ink-500)} .block-lg{border-radius:var(--r-lg);padding:var(--s10) var(--s7)} /* тёплый белый блок — единственная светлая поверхность на сайте */ .block-white{ position:relative;overflow:hidden; background:var(--paper);color:var(--text-ink); border-radius:var(--r);padding:var(--s9) var(--s7); background-image:linear-gradient(90deg,var(--accent),var(--accent-secondary) 32%,transparent 72%); background-repeat:no-repeat;background-size:100% 3px;background-position:0 0; } .block-white .strip{ position:absolute;left:0;bottom:0;width:100%;height:6px; background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),0)); } .block-white p{color:var(--text-ink-soft)} .block h3 + p, .block p + p{margin-top:var(--s5)} /* «живая» разделительная линия: тонкая нить с медленным бликом */ .rule{ position:relative;height:1px;margin:var(--s10) 0 0; background:linear-gradient(90deg,transparent,var(--line-strong) 22%, rgba(var(--accent-rgb),.45) 50%,var(--line-strong) 78%,transparent); } .rule::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent 42%,rgba(var(--accent-rgb),.85) 50%,transparent 58%); background-size:250% 100%; animation:sweep 11s linear infinite; } @keyframes sweep{ from{background-position:120% 0} to{background-position:-120% 0} } /* ================= HERO ================= */ .hero{ position:relative; /* только вертикальные отступы: боковые приходят из .wrap, шорткат padding обнулил бы их и текст упёрся бы в край экрана */ padding-block:var(--s13) var(--s11); text-align:center; } .hero .display{margin:0 auto var(--s7);max-width:17ch} .hero-sub{ color:var(--text-muted);font-size:17px; max-width:56ch;margin:0 auto var(--s9); } .hero-rule{ position:relative;width:min(560px,84%);height:1px;margin:var(--s12) auto 0; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); } .hero-rule::after{ content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px; margin-left:-3.5px;border-radius:50%;background:var(--accent); box-shadow:0 0 14px 2px var(--accent-glow); } /* компактный hero внутренних страниц */ .hero-sm{padding-block:var(--s12) var(--s9);text-align:left} .hero-sm .display{margin:0 0 var(--s6);max-width:20ch} .hero-sm p{color:var(--text-muted);max-width:60ch} .hero-sm .link-back{margin-top:var(--s7)} /* ================= ТОЧКИ ВХОДА ================= */ .entry{display:flex;flex-direction:column;height:100%} .entry .label{display:block;margin-bottom:var(--s5)} .entry h3{margin-bottom:var(--s6)} .entry ul{ margin:var(--s6) 0 var(--s8); display:flex;flex-direction:column;gap:var(--s5); color:var(--text-muted);font-size:15px; } .entry li{position:relative;padding-left:var(--s7)} .entry li::before{ content:"";position:absolute;left:0;top:8px; width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 9px 1px var(--accent-glow); } .entry .btn{margin-top:auto} /* ================= ИНВЕНТАРЬ ================= */ .badge{ display:inline-flex;align-items:center;gap:7px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;letter-spacing:.1em;text-transform:uppercase; padding:5px var(--s5);border-radius:var(--r-pill); background:var(--accent-soft);border:1px solid var(--accent-border); color:var(--accent-secondary);margin-bottom:var(--s6); } .badge::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 8px 1px var(--accent-glow); } .badge-soft{ background:rgba(246,243,238,.05);border-color:var(--line-strong); color:var(--text-muted); } .badge-soft::before{background:var(--text-dim);box-shadow:none} .badge-draft{ background:rgba(246,243,238,.04);border-color:var(--line); color:var(--text-dim); } .badge-draft::before{background:var(--text-dim);box-shadow:none} .metrics{ display:flex;flex-wrap:wrap;gap:var(--s6); margin-top:var(--s7);padding-top:var(--s7); border-top:1px solid var(--line); } .metrics div{padding-left:var(--s6);border-left:2px solid var(--accent-border)} .metrics b{ display:block;font-family:'JetBrains Mono',ui-monospace,monospace; font-size:18px;font-weight:500;color:var(--accent-secondary); } .metrics span{display:block;font-size:11px;letter-spacing:.05em;color:var(--text-dim);margin-top:2px} /* ================= КАТАЛОГ ИСТОЧНИКОВ ================= */ /* Переключатель категорий и полка площадок. Карточка — вертикальная обложка с логотипом и название под ней; действие показывается поверх обложки только при наведении. Поверхности, радиусы и акцент те же, что у остальных блоков. */ /* Лента вкладок. На узком экране прокручивается пальцем, полосу прокрутки не показываем — как в карусели команды. */ .src-tabs{ display:flex;gap:var(--s5); margin-bottom:var(--s8); overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .src-tabs::-webkit-scrollbar{display:none} .src-tab{ flex:0 0 auto;scroll-snap-align:start; padding:10px var(--s7);border-radius:var(--r-pill); background:var(--ink-600);border:1px solid var(--line); color:var(--text-muted);cursor:pointer; font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap; transition:color .2s ease,border-color .2s ease,background .2s ease; } .src-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* активная категория — фирменный градиент */ .src-tab.is-active{ background:linear-gradient(100deg,var(--accent),var(--accent-secondary)); border-color:transparent;color:var(--accent-ink);font-weight:600; box-shadow:0 10px 26px -16px var(--accent-glow); } /* Панели. Смена категории — короткое мягкое проявление. */ .src-panel[hidden]{display:none} .src-panel{animation:src-in .28s ease both} @keyframes src-in{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } /* Сетка каталога. Строки шире карточек, поэтому колонок меньше, а площадок на экране помещается больше. Ширину держит общий контейнер страницы (--maxw). */ .src-grid{display:grid;gap:var(--s2) var(--s7);grid-template-columns:1fr} .src-more{display:flex;justify-content:center;margin-top:var(--s8)} /* Строка каталога: плитка логотипа, домен площадки и действие, которое проявляется под курсором. Своей рамки и фона в покое нет — двадцать обводок подряд читались как стена прямоугольников. Строка целиком это