/* ================================================================ CUSTM · тактический слой (dc.css) — по хайфай-макету Lobby.dc Подключается ПОСЛЕ app.css: доопределяет токены и даёт компоненты (срезанные углы, плитки игроков, баннеры, статус-пилюли). Раскатывается постранично: страница берёт слой одним . Акцент и фон живут в переменных — смена айдентики стоит одну строку здесь, а не правки во всех файлах. ================================================================ */ :root{ /* --- палитра макета --- */ --dc-bg:#0b0d10; --dc-accent:#ff4655; /* дефолт макета (валорантский красный) */ --dc-accent-text:#0c0f12; /* текст поверх акцента */ --dc-card:#12151a; --dc-text:#ece8e1; /* тёплый белый — основной текст */ --dc-white:#ffffff; --dc-sec:#aeb3b0; /* вторичный */ --dc-sec-2:#b7bcb9; /* мета в карточках */ --dc-muted:#7c827f; --dc-muted-2:#6f7773; --dc-dim:#565c58; --dc-dim-2:#4c524f; --dc-sep:#4d534f; --dc-stat-sub:#9aa09d; --dc-line:rgba(255,255,255,.08); --dc-line-2:rgba(255,255,255,.1); --dc-line-3:rgba(255,255,255,.12); --dc-dash:rgba(255,255,255,.14); /* производные от акцента (пересчитываются вместе с --dc-accent) */ --dc-accent-border:rgba(255,70,85,.4); --dc-accent-faint:rgba(255,70,85,.06); --dc-accent-glow:rgba(255,70,85,.11); /* золото — достижения и турнирные метки (по макету PlayerCard) */ --dc-gold:#f5b942; --dc-gold-border:rgba(245,185,66,.4); --dc-gold-faint:rgba(245,185,66,.07); --dc-font-display:'Archivo',system-ui,sans-serif; --dc-font-mono:'JetBrains Mono',ui-monospace,monospace; } /* Бирюзовая айдентика CUSTM тем же макетом: . Держим рядом с красной, чтобы переключение было одним классом. */ .dc-teal{ --dc-accent:#3ad6c0; --dc-accent-border:rgba(58,214,192,.4); --dc-accent-faint:rgba(58,214,192,.06); --dc-accent-glow:rgba(58,214,192,.11); } /* ---------------- каркас страницы ---------------- */ .dc{background:var(--dc-bg);color:var(--dc-text);font-family:var(--dc-font-display);} .dc-page{position:relative;overflow:hidden;min-height:100vh;} /* радиальное свечение + скан-линии: два неинтерактивных слоя поверх фона */ .dc-page::before,.dc-page::after{content:"";position:absolute;inset:0;pointer-events:none;} .dc-page::before{background:radial-gradient(1100px 560px at 8% -8%,var(--dc-accent-glow),transparent 58%);} .dc-page::after{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);opacity:.5;} .dc-wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:30px 44px 60px;} /* ---------------- срезанные углы (сигнатура макета) ---------------- */ .dc-cut-16{clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);} .dc-cut-14{clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);} .dc-cut-9{clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);} .dc-cut-8{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);} .dc-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);} /* ---------------- шапка страницы ---------------- */ .dc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px;} .dc-kicker{display:flex;align-items:center;gap:12px;margin-bottom:12px;} .dc-kicker i{width:26px;height:3px;background:var(--dc-accent);flex:none;} .dc-kicker span{font-family:var(--dc-font-mono);font-size:12px;letter-spacing:.4em;font-weight:700;color:var(--dc-accent);} .dc-title{font-size:66px;line-height:.9;font-weight:900;letter-spacing:-.02em;color:var(--dc-white);text-transform:uppercase;} .dc-counter{font-family:var(--dc-font-mono);text-align:right;line-height:1.5;} .dc-counter .k{font-size:12px;color:var(--dc-muted-2);letter-spacing:.12em;} .dc-counter .v{font-size:26px;font-weight:700;color:var(--dc-white);} .dc-counter .v b{color:var(--dc-accent);font-weight:700;} /* строка статуса */ .dc-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px;font-family:var(--dc-font-mono);font-size:12.5px;} .dc-pill{font-weight:700;letter-spacing:.12em;color:var(--dc-accent);border:1px solid var(--dc-accent-border); padding:7px 12px;background:var(--dc-accent-faint);} .dc-pill.live{animation:dc-blink 2s ease-in-out infinite;} @keyframes dc-blink{50%{opacity:.55;}} .dc-meta .lb{color:var(--dc-muted);} .dc-meta .vl{color:var(--dc-text);} .dc-meta .sep{color:var(--dc-sep);} /* ---------------- баннеры ---------------- */ .dc-banner{position:relative;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .dc-banner.accent{border:1px solid var(--dc-accent-border);background:var(--dc-accent-faint);} .dc-banner.plain{border:1px solid var(--dc-line-2);background:rgba(255,255,255,.015);padding:22px 26px;} .dc-banner .left{display:flex;align-items:center;gap:18px;} .dc-banner .badge{width:46px;height:46px;flex:none;background:var(--dc-accent);display:flex;align-items:center;justify-content:center;} .dc-banner h3{font-weight:900;font-size:21px;color:var(--dc-white);letter-spacing:-.01em;margin-bottom:3px;} .dc-banner h3 em{color:var(--dc-accent);font-style:normal;} .dc-banner h4{font-weight:800;font-size:16px;color:var(--dc-white);margin-bottom:3px;} .dc-banner p{font-size:13.5px;color:var(--dc-sec);} .dc-btn{font-family:var(--dc-font-mono);font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--dc-accent-text); background:var(--dc-accent);border:none;padding:16px 30px;cursor:pointer;white-space:nowrap;display:inline-block; text-decoration:none;transition:filter .15s ease;} .dc-btn:hover{filter:brightness(1.08);color:var(--dc-accent-text);} .dc-btn.ghost{font-size:13px;color:var(--dc-accent);background:transparent;border:1px solid var(--dc-accent-border);padding:14px 22px; transition:background .15s ease;} .dc-btn.ghost:hover{background:var(--dc-accent-faint);filter:none;color:var(--dc-accent);} /* ---------------- сетка игроков ---------------- */ .dc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;} /* плитка игрока: аватар во всю площадь + затемнение снизу под текст */ .dc-slot{position:relative;aspect-ratio:3/4;border:1px solid var(--dc-line);background:var(--dc-card); overflow:hidden;cursor:pointer;display:block;text-decoration:none;} .dc-slot .ava{position:absolute;inset:0;} .dc-slot .ava img{width:100%;height:100%;object-fit:cover;display:block;} /* аватарка Discord внутри имени: маленькая, со срезанным углом */ .dc-slot .nm{display:flex;align-items:center;gap:8px;} .dc-slot .nm .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} .dc-slot .face{width:26px;height:26px;flex:none;object-fit:cover;border:1px solid rgba(255,255,255,.22); clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);display:block;} .dc-slot .face.noav{display:flex;align-items:center;justify-content:center;background:#1b2028; font-size:13px;font-weight:900;color:#7d8791;} .dc-slot .scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,12,15,.1) 0%,rgba(10,12,15,0) 30%,rgba(10,12,15,.6) 60%,rgba(10,12,15,.97) 100%);} .dc-slot .rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dc-accent);pointer-events:none;} .dc-slot .tag{position:absolute;top:9px;right:9px;font-family:var(--dc-font-mono);font-size:9px;font-weight:700; letter-spacing:.1em;color:var(--dc-accent-text);background:var(--dc-accent);padding:3px 6px;pointer-events:none;} .dc-slot .tag.me{top:9px;right:auto;left:12px;background:var(--dc-white);color:#0c0f12;} .dc-slot .body{position:absolute;left:12px;right:12px;bottom:14px;pointer-events:none;} .dc-slot .nm{font-weight:900;font-size:17px;color:var(--dc-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-shadow:0 1px 4px rgba(0,0,0,.8);margin-bottom:8px;} .dc-slot .rr{display:flex;align-items:baseline;gap:5px;margin-bottom:6px;} .dc-slot .rr b{font-family:var(--dc-font-mono);font-weight:700;font-size:26px;line-height:1;color:var(--dc-accent); text-shadow:0 1px 6px rgba(0,0,0,.6);} .dc-slot .rr span{font-family:var(--dc-font-mono);font-weight:700;font-size:12px;color:var(--dc-stat-sub);} .dc-slot .sub{font-family:var(--dc-font-mono);font-size:11px;color:var(--dc-sec-2);display:flex;align-items:center;gap:7px; border-top:1px solid var(--dc-line-3);padding-top:8px;} .dc-slot .sub .dot{opacity:.5;} .dc-slot .delta{position:absolute;top:9px;left:12px;font-family:var(--dc-font-mono);font-weight:700;font-size:15px; text-shadow:0 1px 6px rgba(0,0,0,.9);} .dc-slot .delta.plus{color:#3ee6a0;} .dc-slot .delta.minus{color:#ff6470;} .dc-slot .delta.zero{color:var(--dc-stat-sub);} .dc-slot:hover{border-color:var(--dc-accent-border);} /* пустой слот */ .dc-slot.empty{border:1px dashed var(--dc-dash);background:rgba(255,255,255,.012);cursor:default; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;} .dc-slot.empty .plus{width:32px;height:32px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center; justify-content:center;font-size:20px;color:var(--dc-dim);animation:lb-pulse 2.4s ease-in-out infinite;} .dc-slot.empty .cap{font-family:var(--dc-font-mono);font-size:10px;letter-spacing:.14em;color:var(--dc-dim-2);} @keyframes lb-pulse{0%,100%{opacity:.35;}50%{opacity:.7;}} /* ---------------- команды (A — атака, B — защита) ---------------- */ /* Команды — не двумя колонками, а секциями на всю ширину: иначе 5 плиток ужимаются до ~100px и текст в них наезжает. Ряд из 5 = сетка макета 5×2. */ .dc-teams{display:flex;flex-direction:column;gap:18px;margin-top:22px;} .dc-team{border:1px solid var(--dc-line);background:rgba(255,255,255,.015);padding:18px;} .dc-team.win{border-color:var(--dc-accent-border);background:var(--dc-accent-faint);} .dc-team .th{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;} .dc-team .tn{font-weight:900;font-size:22px;color:var(--dc-white);text-transform:uppercase;letter-spacing:-.01em;} .dc-team .ts{font-family:var(--dc-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;} .dc-team .ts.atk{color:#ef7d54;} .dc-team .ts.def{color:#54b7ef;} .dc-team .tw{margin-left:auto;font-family:var(--dc-font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em; color:var(--dc-accent-text);background:var(--dc-accent);padding:3px 9px;} .dc-team .dc-grid{grid-template-columns:repeat(5,1fr);} .dc-note{margin-top:16px;font-family:var(--dc-font-mono);font-size:12px;color:var(--dc-muted);} .dc-note b{color:var(--dc-text);font-size:14px;} /* ---------------- адаптив ---------------- */ @media (max-width:1200px){ .dc-grid,.dc-team .dc-grid{grid-template-columns:repeat(4,1fr);} } @media (max-width:900px){ .dc-wrap{padding:22px 16px 50px;} .dc-title{font-size:42px;} .dc-grid,.dc-team .dc-grid{grid-template-columns:repeat(3,1fr);} .dc-teams{grid-template-columns:1fr;gap:16px;} .dc-banner{padding:16px 18px;} .dc-banner h3{font-size:17px;} .dc-btn{width:100%;text-align:center;} } @media (max-width:560px){ .dc-title{font-size:32px;} .dc-grid,.dc-team .dc-grid{grid-template-columns:repeat(2,1fr);} .dc-slot .nm{font-size:14px;} .dc-slot .rr b{font-size:20px;} } /* ================================================================ Сайдбар НЕ трогаем: он общий для всего сайта и остаётся родным (бирюзовая айдентика, шрифты из app.css). Здесь только возвращаем ему типографику — иначе он унаследовал бы Archivo от body.dc. ================================================================ */ .dc aside{font-family:var(--font-sans);} .dc .brand .name{font-family:var(--font-display);} .dc .brand .beta{font-family:var(--font-mono);} .dc .tab .tt{font-family:var(--font-display);} /* Oswald — как в app.css */ .dc .tab .ts{font-family:var(--font-sans);} /* подпись наследует IBM Plex Sans */ .dc .sidefoot .ver{font-family:var(--font-mono);} .dc aside a:hover{color:var(--accent);} /* карточка достижения (player.html): текстовый блок из вложенных span */ .pc-ach>span:last-child{display:block;min-width:0;} .pc-ach .pl,.pc-ach .meta{display:block;} .pc-ach .pl em{margin-left:6px;}