@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');} html,body{font-family:'Geist','Inter Tight',system-ui,sans-serif !important;background:#0a0e13 !important;color:#d8dee5 !important;} /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* symbols2 */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* symbols2 */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* symbols2 */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* greek */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* greek */ /* vietnamese */ /* latin-ext */ /* latin */ /* cyrillic-ext */ /* cyrillic */ /* greek */ /* vietnamese */ /* latin-ext */ /* latin */ /* =========================================================================== HackerLab — общая дизайн-система (извлечено из «Главная hi-fi») Шрифты Geist / Geist Mono подключаются в HTML. =========================================================================== */ @property --angle { syntax: ''; inherits: false; initial-value: 0deg; } @property --angleBtn { syntax: ''; inherits: false; initial-value: 0deg; } :root{ /* — palette — */ --bg: #0a0e13; --bg-2: #0c1218; --surface-h: rgba(255,255,255,.022); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.22); --line-bright: rgba(255,255,255,.35); --ink: #e6ebf0; --ink-2: #aeb8c4; --ink-3: #8b95a3; --ink-4: #76818e; --green: #3fe093; --green-soft: #2bd99e; --green-dim: rgba(63,224,147,.14); --green-line: rgba(63,224,147,.30); --green-glow: rgba(63,224,147,.50); --surface: rgba(255,255,255,.024); /* — avatars (external files) — */ --user-avatar: url("/newassets/avatar-user.webp"); --ava-term1nal: url("/newassets/avatar-term1nal.webp"); --ava-sashka: url("/newassets/avatar-sashka.webp"); --ava-k01s3y: url("/newassets/avatar-k01s3y.webp"); --ava-anya: url("/newassets/avatar-anya.webp"); --ava-mrgreen24: url("/newassets/avatar-mrgreen24.webp"); --ava-alexander_ai: url("/newassets/avatar-alexander_ai.webp"); --ava-segnetik: url("/newassets/avatar-segnetik.webp"); --ava-kalibri: url("/newassets/avatar-kalibri.webp"); --ava-ar1se4101: url("/newassets/avatar-ar1se4101.webp"); --ava-leschas9: url("/newassets/avatar-leschas9.webp"); --ava-huobase: url("/newassets/avatar-huobase.webp"); --ava-draf4g: url("/newassets/avatar-draf4g.webp"); --ava-phantom_v: url("/newassets/avatar-phantom_v.webp"); --ava-sn1per_ko: url("/newassets/avatar-sn1per_ko.webp"); --ava-dr_volt: url("/newassets/avatar-dr_volt.webp"); --ava-cipher_kid: url("/newassets/avatar-cipher_kid.webp"); --ava-b1tcrasher: url("/newassets/avatar-b1tcrasher.webp"); --ava-osint_anya: url("/newassets/avatar-osint_anya.webp"); --ava-rev_master: url("/newassets/avatar-rev_master.webp"); --ava-web_h0und: url("/newassets/avatar-web_h0und.webp"); --ava-x0r: url("/newassets/avatar-x0r.webp"); --red: #ff5571; --red-dim: rgba(255,85,113,.14); --amber: #f0b232; --amber-dim: rgba(240,178,50,.14); /* — type — */ --sans:'Geist','Inter Tight',system-ui,sans-serif; --body:'Geist',system-ui,sans-serif; --mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace; --mono-2:'JetBrains Mono',ui-monospace,monospace; /* — scale — */ --fz-micro:10px; --fz-cap:12px; --fz-sm:12px; --fz-body:13px; --fz-md:14px; --fz-lg:17px; --fz-xl:22px; --fz-display:38px; --fz-hero:56px; } *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fz-md);line-height:1.45;-webkit-font-smoothing:antialiased;} /* — background: green ambient + subtle scan lines — */ body{ background-color: var(--bg); background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(63,224,147,.045), transparent 55%), repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.013) 3px 4px); background-repeat: no-repeat, repeat; background-attachment: fixed; min-height:100vh; overflow-x:hidden; } .doc{max-width:none;margin:0;position:relative;z-index:2;width:100%;} .app{display:grid;grid-template-columns:240px 1fr;gap:0;min-height:100vh;} /* ===================================================================== SIDEBAR ===================================================================== */ .nav{ border-right:1px solid var(--line); padding:20px 0; display:flex;flex-direction:column;gap:4px; position:sticky;top:0;height:100vh;align-self:start; background:linear-gradient(180deg, rgba(255,255,255,.008), transparent 200px); overflow-y:auto; } .nav-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;margin-bottom:80px;} .nav-brand img{height:34px;width:auto;display:block;} .nav-section{display:flex;flex-direction:column;padding:0;gap:2px;} .navi{ position:relative; display:flex;align-items:center;gap:12px;height:40px;padding:0 20px; border-radius:0;border:0; color:var(--ink-3);background:transparent;cursor:pointer;text-align:left; font-family:var(--body);font-size:var(--fz-body);font-weight:500; transition:color .15s, background .15s; } .navi svg{width:16px;height:16px;flex:none;} .navi:hover{color:var(--ink);background:rgba(255,255,255,.04);} .navi.on{color:var(--ink);background:rgba(255,255,255,.04);} .navi.on::after{ content:"";position:absolute;right:0;top:0;bottom:0; width:2px;background:var(--green); box-shadow:0 0 10px rgba(63,224,147,.5); } .nav-spacer{flex:1;min-height:20px;} .nav-social{display:flex;gap:8px;padding:8px 20px;} .soc-btn{flex:1;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink-2);cursor:pointer;} .soc-btn:hover{color:var(--ink);border-color:var(--line-strong);} .soc-btn svg{width:16px;height:16px;} .support-btn{ margin:6px 20px 0;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:6px; background:transparent;color:var(--ink-2);font-family:var(--mono);font-size:var(--fz-cap); display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;letter-spacing:.02em; } .support-btn:hover{color:var(--ink);border-color:var(--line-strong);} .support-btn svg{width:14px;height:14px;} .nav-email{ margin-top:8px;padding:0 20px;font-family:var(--mono);font-size:11px;color:var(--ink-2); text-decoration:none; } .nav-email:hover{color:var(--ink);} /* ===================================================================== MAIN + TOPBAR ===================================================================== */ main{padding:18px 32px 24px;min-width:0;position:relative;} /* section divider */ .sect-div{ height:1px; background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.10) 12%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.10) 88%,transparent 100%); margin:26px 0; position:relative; } .sect-div::after{ content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) rotate(45deg); width:6px;height:6px;background:var(--bg); border:1px solid var(--line-strong); } .topbar{display:flex;align-items:center;gap:10px;height:44px;margin-bottom:32px;} .search{ flex:0 0 300px;height:36px;border:1px solid var(--line);border-radius:6px; display:flex;align-items:center;padding:0 12px;gap:10px; color:var(--ink-3);font-family:var(--body);font-size:var(--fz-body); background:rgba(255,255,255,.015);cursor:pointer; } .search:hover{border-color:var(--line-strong);color:var(--ink-2);} .search svg{width:14px;height:14px;} .search kbd{ margin-left:auto;font-family:var(--mono);font-size:10px;padding:2px 6px; border:1px solid var(--line);border-radius:3px;color:var(--ink-4); } .top-cta{ height:32px;padding:0 14px;border:1px solid var(--green-line);border-radius:6px; background:var(--green-dim);color:var(--green); font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.04em; display:flex;align-items:center;gap:8px;cursor:pointer; position:relative; } .top-cta::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px; background:conic-gradient(from var(--angleBtn,0deg), transparent 0deg, transparent 240deg, var(--green) 280deg, transparent 320deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.55;transition:opacity .25s; animation: spinBtn 4s linear infinite; pointer-events:none; } @keyframes spinBtn { to { --angleBtn: 360deg; } } .top-cta:hover{background:rgba(63,224,147,.22);} .top-cta:hover::before{opacity:1;} .top-cta svg{width:13px;height:13px;position:relative;} .top-chip{ height:32px;padding:0 12px;border:1px solid var(--line);border-radius:6px; background:rgba(255,255,255,.015);color:var(--ink-2); font-family:var(--mono);font-size:var(--fz-cap); display:flex;align-items:center;gap:8px;cursor:pointer;position:relative; } .top-chip:hover{color:var(--ink);border-color:var(--line-strong);} .top-chip svg{width:13px;height:13px;color:var(--ink-3);} .top-chip .dot{ position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%; background:var(--green);box-shadow:0 0 0 2px var(--bg); } .avatar-btn{ height:32px;padding:0 8px 0 4px;border:1px solid var(--line);border-radius:6px; background:rgba(255,255,255,.015);display:flex;align-items:center;gap:8px;cursor:pointer; font-family:var(--body);font-size:var(--fz-body);color:var(--ink); } .avatar-btn:hover{border-color:var(--line-strong);background:rgba(255,255,255,.04);} .avatar-btn .ava{ width:22px;height:22px;border-radius:50%;flex:none; background:var(--user-avatar) center/cover no-repeat, linear-gradient(135deg,#1c2632,#0e1620); border:1px solid var(--line); } .avatar-btn .nm{font-weight:500;letter-spacing:-.005em;line-height:1;} .avatar-btn .chev{color:var(--ink-3);width:14px;height:14px;} /* ===================================================================== CARD SYSTEM — frosted hairline blocks ===================================================================== */ .card{ position:relative; border:0; background:var(--surface); border-radius:8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.22); transition:background .2s; } .card:hover{background:rgba(255,255,255,.04);} /* hide legacy corner dots */ .card > .cd{display:none;} /* tag label on card border */ .card-tag{ position:absolute;top:0;left:14px;transform:translateY(-50%); background:var(--bg);padding:0 8px;z-index:2; font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3); } /* card-effect: rotating gradient highlight on hover */ .card.glow{position:relative;} .card.glow::before{ content:"";position:absolute;inset:-1px;border-radius:inherit; padding:1px; background:conic-gradient(from var(--angle), transparent 0deg, transparent 260deg, var(--green-glow) 300deg, transparent 340deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0;transition:opacity .3s; animation: spinGlow 6s linear infinite paused; pointer-events:none;z-index:2; } .card.glow:hover::before{opacity:1;animation-play-state:running;} @keyframes spinGlow { to { --angle: 360deg; } } /* scan-line: one-shot green scan on first load */ .card::after{ content:"";position:absolute;left:0;right:0;height:1.5px; background:linear-gradient(90deg, transparent, var(--green), transparent); filter:blur(.5px); box-shadow:0 0 12px var(--green-glow); opacity:0;pointer-events:none;z-index:3; top:-3px; animation: scanCard 1.6s cubic-bezier(.4,.0,.2,1) .15s 1 forwards; } @keyframes scanCard{ 0%{top:-3px;opacity:0;} 15%{opacity:.9;} 85%{opacity:.9;} 100%{top:100%;opacity:0;} } /* ===================================================================== HERO crosshair grid (decorative crosshair across hero area) ===================================================================== */ .hero{ position:relative; padding:18px 0 0; margin-bottom:0; } /* Floating decorative shapes behind hero cards */ .hero-deco{ position:absolute;inset:-40px -20px -20px;pointer-events:none;z-index:0; color:rgba(63,224,147,.65); } .hd-shape{ position:absolute; width:8px;height:8px; opacity:0; } /* tiny circles slightly smaller */ .hd-shape circle{transform-origin:center;} .hd-shape.s3, .hd-shape.s5, .hd-shape.s7, .hd-shape.s9, .hd-shape.s11, .hd-shape.s13{ width:5px;height:5px; } /* small diamonds */ .hd-shape.s1, .hd-shape.s4, .hd-shape.s8, .hd-shape.s12{ width:10px;height:10px; } .hd-shape.s2, .hd-shape.s6, .hd-shape.s10, .hd-shape.s14{ width:7px;height:7px; } /* random placement + drift animations */ .hd-shape.s1 { top: 6%; left: 4%; animation: hdDrift1 14s ease-in-out -1s infinite; } .hd-shape.s2 { top: 18%; left: 22%; animation: hdDrift2 16s ease-in-out -4s infinite; } .hd-shape.s3 { top: 38%; left: 9%; animation: hdDrift3 12s ease-in-out -7s infinite; } .hd-shape.s4 { top: 64%; left: 16%; animation: hdDrift1 18s ease-in-out -2s infinite; } .hd-shape.s5 { top: 86%; left: 6%; animation: hdDrift2 13s ease-in-out -5s infinite; } .hd-shape.s6 { top: 4%; left: 48%; animation: hdDrift3 15s ease-in-out -9s infinite; } .hd-shape.s7 { top: 92%; left: 42%; animation: hdDrift1 17s ease-in-out -3s infinite; } .hd-shape.s8 { top: 8%; left: 72%; animation: hdDrift2 14s ease-in-out -6s infinite; } .hd-shape.s9 { top: 32%; left: 88%; animation: hdDrift3 16s ease-in-out -11s infinite; } .hd-shape.s10 { top: 56%; left: 95%; animation: hdDrift1 13s ease-in-out -8s infinite; } .hd-shape.s11 { top: 80%; left: 80%; animation: hdDrift2 18s ease-in-out -2s infinite; } .hd-shape.s12 { top: 24%; left: 60%; animation: hdDrift3 14s ease-in-out -10s infinite; } .hd-shape.s13 { top: 70%; left: 56%; animation: hdDrift1 15s ease-in-out -5s infinite; } .hd-shape.s14 { top: 50%; left: 40%; animation: hdDrift2 17s ease-in-out -7s infinite; } @keyframes hdDrift1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .08; } 25% { transform: translate(8px, -6px) rotate(45deg); opacity: .18; } 50% { transform: translate(12px, 4px) rotate(0deg); opacity: .12; } 75% { transform: translate(-4px, 10px) rotate(-45deg); opacity: .08; } } @keyframes hdDrift2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .10; } 33% { transform: translate(-10px, 6px) rotate(-30deg); opacity: .20; } 66% { transform: translate(6px, -8px) rotate(30deg); opacity: .14; } } @keyframes hdDrift3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .12; } 40% { transform: translate(4px, 10px) rotate(0deg); opacity: .22; } 80% { transform: translate(-8px, -4px) rotate(0deg); opacity: .15; } } .hero__cards{ position:relative;z-index:1; display:grid;grid-template-columns: 1.45fr 1fr 1fr;gap:14px; } .hero__grid{ position:absolute;inset:-20px -20px -10px;pointer-events:none;z-index:0; background-image: /* vertical lines at 16.6%, 50%, 83.3% */ linear-gradient(90deg, transparent calc(16.66% - 0.5px), rgba(255,255,255,.025) 16.66%, rgba(255,255,255,.025) calc(16.66% + 1px), transparent calc(16.66% + 1px)), linear-gradient(90deg, transparent calc(83.33% - 0.5px), rgba(255,255,255,.025) 83.33%, rgba(255,255,255,.025) calc(83.33% + 1px), transparent calc(83.33% + 1px)), linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(255,255,255,.025) 50%, rgba(255,255,255,.025) calc(50% + 1px), transparent calc(50% + 1px)); } /* ===================================================================== PROFILE card (hero col 1) ===================================================================== */ .profile{padding:22px 22px 20px;display:flex;flex-direction:column;height:100%;} .profile-top{display:flex;gap:16px;align-items:flex-start;} .profile-ava{ width:88px;height:88px;flex:none;border-radius:12px; border:1px solid var(--line-strong); background:var(--user-avatar) center/cover no-repeat, linear-gradient(135deg,#1a2330,#0c1218); position:relative;overflow:hidden; } .profile-info{flex:1;min-width:0;} .name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .profile-name{ font-family:var(--sans);font-weight:600;font-size:26px;line-height:1.1;color:var(--ink); letter-spacing:-.01em; } .chip{ display:inline-flex;align-items:center;height:18px;padding:0 7px; border:1px solid var(--line);border-radius:0; font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3); } .chip.pro{color:var(--green);border-color:var(--green-line);background:var(--green-dim);} .chip.role{color:var(--ink-2);} .reg-line{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);margin-top:4px;} .reg-line .n{color:var(--ink);} .profile-bottom{ margin-top:auto;padding-top:13px; display:flex;flex-direction:column;min-height:43px; } /* unified footer row for all three hero cards */ .foot-row{ display:flex;justify-content:space-between;align-items:center;gap:10px; min-height:18px;margin-bottom:7px; } .foot-spacer{height:6px;} .xp-line{display:flex;align-items:center;gap:10px;} /* XP bar tooltip wrapper */ .bar-tip{position:relative;flex:1;display:flex;align-items:center;cursor:default;} .bar-tip .tooltip{ position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px); min-width:200px;padding:8px 12px; background:rgba(21,24,29,.97);border:1px solid rgba(255,255,255,.16);border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.5); display:flex;flex-direction:column;gap:2px; font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2); white-space:nowrap;text-align:center;align-items:center; opacity:0;visibility:hidden;transition:opacity .14s, transform .14s; pointer-events:none;z-index:60; } .bar-tip .tooltip-meta{color:var(--ink-3);font-size:10px;} .bar-tip .tooltip::after{ content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:5px solid transparent;border-top-color:rgba(21,24,29,.97); } .bar-tip:hover .tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} /* Streak hero card */ .streak-card{display:flex;flex-direction:column;} .streak-card .streak-big{ display:flex;align-items:baseline;gap:10px;margin:6px 0 14px; } .streak-card .streak-big .num{ font-family:var(--mono);font-size:var(--fz-display);font-weight:600;line-height:1; color:var(--ink);letter-spacing:-.02em; font-variant-numeric:tabular-nums; background:linear-gradient(180deg, #fff, #b8c0c8); -webkit-background-clip:text;background-clip:text;color:transparent; } .streak-card .streak-flame{ width:17px;height:20px;flex:none;margin-left:auto;align-self:center; filter:drop-shadow(0 0 3px rgba(255,138,58,.18)); } .streak-card .weekly-prog{ margin-top:auto;padding-top:13px;border-top:1px dashed var(--line); display:flex;flex-direction:column;min-height:43px; } .streak-card .weekly-prog-row{ display:flex;justify-content:space-between;align-items:center; } .streak-card .weekly-prog-label{ font-family:var(--mono);font-size:11px;color:var(--ink-2); display:inline-flex;align-items:center;gap:6px; } .streak-card .xp-badge{ font-family:var(--mono);font-size:9px;color:var(--green); border:1px solid var(--green-line);background:var(--green-dim); padding:1px 5px;border-radius:3px;letter-spacing:.04em; } .streak-card .weekly-prog-val{ font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);font-variant-numeric:tabular-nums; } .streak-card .weekly-bar{ height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden; } .streak-card .weekly-bar i{ display:block;height:100%;background:var(--green);width:0; box-shadow:0 0 6px rgba(63,224,147,.35); transition:width 1.2s cubic-bezier(.2,.7,.3,1) .25s; border-radius:3px; } .streak-card .streak-unit{ font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2); margin-top:6px; } /* Tooltip on info icon (legacy — used elsewhere) */ .info-tip{position:relative;display:inline-block;} .info-tip .tooltip{ position:absolute;bottom:calc(100% + 10px);right:-6px; width:260px;padding:10px 12px; background:rgba(21,24,29,.97);border:1px solid rgba(255,255,255,.16);border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.5); font-family:var(--body);font-size:var(--fz-body);color:var(--ink-2); line-height:1.5; opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity .14s, visibility .14s, transform .14s; pointer-events:none;z-index:60; } .info-tip .tooltip::after{ content:"";position:absolute;top:100%;right:10px; border:5px solid transparent;border-top-color:rgba(21,24,29,.97); } .info-tip .tooltip .strong{color:var(--ink);font-weight:500;} .info-tip:hover .tooltip{opacity:1;visibility:visible;transform:translateY(0);} .streak{ position:relative; display:inline-flex;align-items:center;gap:5px; font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2); cursor:default; } .streak .flame{width:13px;height:15px;flex:none;display:block;} .streak-count{color:var(--ink);font-weight:600;} .streak .tooltip{ position:absolute;bottom:calc(100% + 10px);right:0; min-width:230px;padding:10px 12px; background:rgba(21,24,29,.97);border:1px solid rgba(255,255,255,.16);border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.5); display:flex;flex-direction:column;gap:4px; font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2); white-space:nowrap;text-align:left; opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity .14s, visibility .14s, transform .14s; pointer-events:none;z-index:60; } .streak .tooltip::after{ content:"";position:absolute;top:100%;right:16px; border:5px solid transparent;border-top-color:rgba(21,24,29,.97); } .streak .tooltip .strong{color:var(--ink);} .streak .tooltip .hint{color:var(--ink-3);font-size:10px;margin-top:2px;} .streak:hover .tooltip{opacity:1;visibility:visible;transform:translateY(0);} .lvl-tag{ font-family:var(--mono);font-size:var(--fz-cap); color:var(--ink); } .bar{flex:1;height:6px;background:rgba(255,255,255,.08);position:relative;overflow:hidden;border-radius:3px;} .bar i{display:block;height:100%;background:var(--ink-2);position:relative;width:0;transition:width 1.0s cubic-bezier(.2,.7,.3,1) .15s;} .bar.accent i{background:var(--green);box-shadow:0 0 8px var(--green-dim);} .bar.accent i::after{ content:"";position:absolute;right:-1px;top:-2px;width:1px;height:9px;background:var(--green); box-shadow:0 0 4px var(--green); } .xp-meta-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;} .xp-meta{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);} .delta{font-family:var(--mono);font-size:var(--fz-cap);font-weight:500;white-space:nowrap;} .delta.up{color:var(--green);} .delta.dn{color:var(--red);} .delta.eq{color:var(--ink-3);} /* ===================================================================== STAT card (rank, solved) ===================================================================== */ .stat{padding:22px 22px 20px;display:flex;flex-direction:column;height:100%;} .stat-head{ font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.18em;text-transform:uppercase; color:var(--ink);margin-bottom:8px;font-weight:500; } .stat-head .ctx{color:var(--ink-2);} .stat-big{display:flex;align-items:baseline;gap:12px;margin:6px 0 16px;} .stat-num{ font-family:var(--mono);font-size:var(--fz-display);font-weight:600;line-height:1; color:var(--ink);letter-spacing:-.02em; font-variant-numeric: tabular-nums; background:linear-gradient(180deg, #fff, #b8c0c8); -webkit-background-clip:text;background-clip:text;color:transparent; } .solved-row{display:flex;align-items:baseline;gap:10px;margin:6px 0 16px;} .solved-total{font-family:var(--mono);font-size:var(--fz-md);color:var(--ink-3);} .solved-pct{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);margin-left:auto;} .sub-stats{ display:flex;flex-direction:column; margin-top:auto;padding-top:13px;border-top:1px dashed var(--line); min-height:43px; } .sub-stats .foot-row{margin-bottom:0;} .sub-stats .sub-stat-label{margin-bottom:0;} .sub-stats .sub-stat-val{font-family:var(--mono);font-size:var(--fz-md);color:var(--ink);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;} .sub-stat-val.empty{color:var(--ink-3);} .blood-flame{width:13px;height:15px;flex:none;display:block;filter:drop-shadow(0 0 3px rgba(227,65,58,.18));} .sub-stat-label{ font-family:var(--mono);font-size:11px;color:var(--ink-2); display:flex;align-items:center;gap:6px; } .sub-stat-val{font-family:var(--mono);font-size:var(--fz-md);color:var(--ink);} .sub-stat-val.empty{color:var(--ink-4);} /* legacy duplicate, neutralized */ .blood-dot-legacy{display:none;} /* ===================================================================== MAIN GRID ===================================================================== */ .grid{display:grid;grid-template-columns: 1.55fr 1fr;gap:16px;align-items:stretch;} .col{display:flex;flex-direction:column;gap:16px;min-width:0;} .col > .stretch{flex:1;display:flex;flex-direction:column;min-height:0;} .col > .stretch > .lb-list, .col > .stretch > .live-list, .col > .stretch > .ach-grid, /* rating rows stretch to fill leftover space — equal-height grid */ .col > .stretch > [data-tab-content]{flex:1;display:grid;grid-auto-rows:1fr;min-height:0;} .col > .stretch > [data-tab-content] > .lb-row{min-height:0;} .col > .stretch > .panel-foot, .col > .stretch > .rating-foot{margin-top:auto;} .card-head{ padding:14px 18px;display:flex;align-items:center;justify-content:space-between; border-bottom:1px dashed var(--line); } .card-head h3{ font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.18em;text-transform:uppercase; color:var(--ink);margin:0;font-weight:500; display:flex;align-items:center;gap:10px; } .head-meta{font-family:var(--mono);font-size:11px;color:var(--ink-2);} /* ===================================================================== EVENTS ===================================================================== */ .events{display:flex;flex-direction:column;} .events-content{display:grid;grid-template-columns: 1.15fr 1fr;gap:20px;padding:20px;height:280px;} .ev-cover{ border:1px solid var(--line);border-radius:8px; background: linear-gradient(135deg, rgba(63,224,147,.04), transparent 60%), rgba(255,255,255,.015); display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; isolation:isolate; } .ev-cover::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.018) 24px 25px), repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.018) 24px 25px); } /* keep ev-cover bg stable when parent card is hovered */ .card:hover .ev-cover{ background: linear-gradient(135deg, rgba(63,224,147,.04), transparent 60%), rgba(255,255,255,.015); } .ev-cover::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.018) 24px 25px), repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.018) 24px 25px); } .ev-cover-inner{position:relative;z-index:1;text-align:center;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;} .ev-cover-inner .badge{ display:inline-block;background:var(--green-dim);color:var(--green); font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase; padding:4px 10px;border-radius:3px;border:1px solid var(--green-line); } .ev-cover-inner .head{font-family:var(--sans);font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.1;color:var(--ink-2);} .ev-cover-inner .head .accent{color:var(--ink);font-weight:700;} .ev-cover-inner .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;} .ev-info{display:flex;flex-direction:column;min-width:0;} .ev-tags{display:flex;gap:6px;margin-bottom:12px;} .ev-tag{ font-family:var(--mono);font-size:11px;text-transform:uppercase; color:var(--ink-2);border:1px solid var(--line);padding:3px 7px; } .ev-tag.solid{color:var(--ink);border-color:var(--line-strong);} .ev-tag.live{color:var(--green);border-color:var(--green-line);} .ev-tag.live::before{content:"";display:inline-block;width:5px;height:5px;background:var(--green);border-radius:50%;margin-right:6px;vertical-align:middle;} .ev-title{ font-family:var(--sans);font-size:var(--fz-lg);font-weight:600;color:var(--ink); margin:0 0 8px;line-height:1.3;letter-spacing:-.005em; } .ev-desc{font-size:var(--fz-body);color:var(--ink-2);margin:0 0 auto;line-height:1.6;} .ev-desc .accent{color:var(--green);font-weight:500;} .ev-cta{display:flex;gap:10px;margin-top:18px;align-items:center;} .btn{ height:36px;padding:0 16px;border-radius:6px;border:1px solid var(--line-strong);background:transparent; color:var(--ink);font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.06em;text-transform:uppercase; cursor:pointer;display:inline-flex;align-items:center;gap:8px; transition:border-color .15s, color .15s, background .15s; position:relative; } .btn:hover{border-color:var(--ink-2);background:rgba(255,255,255,.03);} .btn.primary{ border-color:var(--green-line);color:var(--green);background:var(--green-dim); position:relative; } .btn.primary:hover{background:rgba(63,224,147,.22);} .btn-link{ border:none;padding:0 6px;color:var(--ink-3);background:transparent; font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.06em;text-transform:uppercase;cursor:pointer; } .btn-link:hover{color:var(--ink);} .events-dots{display:flex;gap:6px;} .events-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);} .events-dot.on{background:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.06);} /* ===================================================================== RATING ===================================================================== */ .rating-head{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed var(--line);} .rating-head .l{display:flex;align-items:center;gap:10px;} .rating-head h3{font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0;font-weight:500;} .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(63,224,147,.5);} .rating-head .r{display:flex;gap:6px;} .tabs{display:flex;gap:18px;padding:0 14px;border-bottom:1px dashed var(--line);position:relative;} .tab{ flex:0 0 auto;height:46px;padding:0;background:transparent;border:0; color:var(--ink-3);font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.04em;text-transform:uppercase; cursor:pointer;display:flex;align-items:center;gap:8px; border-bottom:0;margin-bottom:0; transition:color .18s; } .tab .sub{font-size:9px;color:var(--ink-4);letter-spacing:0;text-transform:none;font-weight:400;} .tab.on{color:var(--ink);} .tab.on .sub{color:var(--ink-3);} .tab:hover{color:var(--ink-2);} .tab-ink{ position:absolute; bottom:0;left:0;width:0; height:1px; background:linear-gradient(90deg, transparent, var(--green) 35%, var(--green) 65%, transparent); transition:left .34s cubic-bezier(.5,.1,.2,1), width .34s cubic-bezier(.5,.1,.2,1); pointer-events:none;z-index:2; } .lb-row{ display:grid;grid-template-columns:40px 32px 1fr 80px 70px 60px; align-items:center;gap:10px;padding:10px 18px;border-bottom:1px dashed var(--line-2); font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-3);cursor:pointer; transition:background .12s; font-variant-numeric: tabular-nums; } .lb-row:hover{background:rgba(255,255,255,.025);} .lb-row .rk{color:var(--ink-3);text-align:right;} .lb-row .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1a2330,#0c1218);border:1px solid var(--line);display:grid;place-items:center;font-size:9px;color:var(--ink-3);background-size:cover;background-position:center;} .lb-row .nm{color:var(--ink);font-family:var(--body);font-size:var(--fz-body);font-weight:500;} .lb-row .nm .hold{display:block;font-family:var(--mono);font-size:9px;color:var(--ink-3);font-weight:400;letter-spacing:.04em;} .lb-row .pts{text-align:right;color:var(--ink);} .lb-row .sol{text-align:right;} .lb-row .dl{text-align:right;} .lb-row.you{background:rgba(63,224,147,.04);border-left:2px solid var(--green);} .lb-row.you:hover{background:rgba(63,224,147,.07);} .lb-row.you .nm{color:var(--green);} .lb-row.you .av{border-color:var(--green-line);background:linear-gradient(135deg, var(--green-dim), #0c1218);} .lb-row .you-tag{color:var(--ink-2);font-family:var(--mono);font-size:11px;margin-left:4px;} .lb-row .crown{color:var(--amber);margin-right:3px;} .rating-foot{padding:12px 18px;display:flex;justify-content:flex-end;border-top:1px dashed var(--line);} /* ===================================================================== TASKS ===================================================================== */ .panel-task{ display:grid;grid-template-columns: 1fr 96px;gap:10px;align-items:center; padding:14px 18px;border-bottom:1px dashed var(--line-2);cursor:pointer; transition:background .12s; } .panel-task:hover{background:rgba(255,255,255,.025);} .pt-name{font-family:var(--sans);font-size:15px;color:var(--ink);font-weight:500;letter-spacing:-.005em;} .pt-meta{display:flex;gap:8px;margin-top:6px;align-items:center;} .pt-meta .ch{font-family:var(--mono);font-size:9px;color:var(--ink-3);border:1px solid var(--line);padding:2px 6px;letter-spacing:.06em;text-transform:uppercase;} .pt-lvl{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink-2);} .pt-lvl.hard{color:#ff8896;} .pt-lvl.medium{color:var(--amber);} .pt-lvl.easy{color:var(--green);} .pt-date{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-left:auto;} .pt-xp{font-family:var(--mono);text-align:right;font-size:18px;color:var(--ink);font-weight:500;} .pt-xp .u{font-size:10px;color:var(--ink-3);margin-left:2px;} .panel-foot{padding:12px 18px;display:flex;justify-content:flex-end;border-top:1px dashed var(--line);} /* history rows / tasks compact rows */ .hist-row{ display:grid;grid-template-columns: 60px 1fr 70px 60px 50px;align-items:center;gap:10px; padding:13px 18px;border-bottom:1px dashed var(--line-2); font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-3);cursor:pointer; transition:background .12s; } .hist-row:hover{background:rgba(255,255,255,.025);} .hist-row:hover .hist-name{color:var(--green);} .hist-cat{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:3px 7px;justify-self:start;} .hist-name{font-family:var(--sans);color:var(--ink);font-size:var(--fz-body);font-weight:500;transition:color .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} .hist-lvl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-align:right;color:var(--ink-3);} .hist-lvl.hard{color:#ff8896;} .hist-lvl.medium{color:var(--amber);} .hist-lvl.easy{color:var(--green);} .hist-xp{text-align:right;color:var(--ink);font-weight:500;} .hist-ago{text-align:right;color:var(--ink-2);} /* ===================================================================== ACHIEVEMENTS ===================================================================== */ .ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;} .ach{ border:1px solid var(--line);padding:14px;display:grid;grid-template-columns:54px 1fr; gap:14px;align-items:center;position:relative; background:rgba(255,255,255,.012);border-radius:6px; } .ach.locked{opacity:.85;} .ach.locked .ach-ic{filter:grayscale(.85) opacity(.6);} .ach-ic{width:54px;height:54px;display:block;flex:none;} .ach-body{display:flex;flex-direction:column;gap:5px;min-width:0;} .ach-name{font-family:var(--sans);font-size:var(--fz-md);font-weight:600;color:var(--ink-2);line-height:1.1;letter-spacing:-.005em;} .ach.got .ach-name{color:var(--ink);} .ach .bar{width:100%;height:4px;margin-top:2px;} .ach-meta{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:center;} .ach-meta.got{color:var(--green);} .ach-meta.got::before{content:"●";margin-right:4px;} /* ===== Достижения tab: grouped by category + summary + condition (redesign 2026-08) ===== */ [data-ptab-content="achv"] .ach{align-items:start;padding:13px 14px;} [data-ptab-content="achv"] .ach.got{background:rgba(63,224,147,.045);border-color:var(--green-line);} [data-ptab-content="achv"] .ach-body{gap:5px;} .ach-cond{font-family:var(--sans);font-size:12px;color:var(--ink-3);line-height:1.35;} .ach-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:3px;} .ach-bar>i{display:block;height:100%;border-radius:3px;background:var(--green);opacity:.85;} .ach-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;} .ach-prog{font-family:var(--mono);font-size:11px;color:var(--ink-2);} .ach-prog b{color:var(--ink);} .ach-link{font-family:var(--mono);font-size:11px;color:var(--green);text-decoration:none;white-space:nowrap;} .ach-link:hover{text-decoration:underline;} .ach-got{font-family:var(--mono);font-size:11px;color:var(--green);margin-top:2px;} .ach-got::before{content:"●";margin-right:5px;} .ach-sum{padding:18px 20px;margin-bottom:16px;} .ach-sum-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;} .ach-sum-title{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);} .ach-sum-frac{font-family:var(--mono);font-size:13px;color:var(--ink-2);} .ach-sum-frac b{color:var(--ink);} .ach-sum-frac .pct{color:var(--green);} .ach-sum-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);overflow:hidden;} .ach-sum-bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--green-soft),var(--green));box-shadow:0 0 10px var(--green-glow);} .ach-sum-rows{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;} .ach-sum-item{display:flex;flex-direction:column;gap:3px;} .ach-sum-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);} .ach-sum-val{font-family:var(--sans);font-size:14px;color:var(--ink);} .ach-sum-val .dim{color:var(--ink-3);} .ach-sum-val .g{color:var(--green);} .ach-sect{margin-bottom:14px;} /* Steam-style achievement hover preview */ .ach{position:relative;} .ach-preview{ position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px); width:280px;padding:14px 16px; background:rgba(21,24,29,.98);border:1px solid rgba(255,255,255,.16);border-radius:8px; box-shadow:0 12px 36px rgba(0,0,0,.6); display:flex;flex-direction:column;gap:8px; opacity:0;visibility:hidden;transition:opacity .18s, transform .18s; pointer-events:none;z-index:200; } .ach:hover{z-index:50;} .ach:hover .ach-preview{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:.2s;} .ach-preview::after{ content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:6px solid transparent;border-top-color:rgba(21,24,29,.98); } .ach-pv-head{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);padding-bottom:8px;} .ach-pv-title{font-family:var(--sans);font-size:var(--fz-md);font-weight:600;color:var(--ink);letter-spacing:-.005em;} .ach-pv-rare{font-family:var(--mono);font-size:11px;color:var(--ink-2);} .ach-pv-desc{font-family:var(--body);font-size:var(--fz-body);color:var(--ink-2);line-height:1.5;} .ach-pv-row{font-family:var(--mono);font-size:11px;color:var(--ink-2);} .ach-pv-row.got{color:var(--green);} .next-goal{ padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px; border-top:1px dashed var(--line); } .next-goal > div{min-width:0;flex:1;} .ng-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px;white-space:nowrap;} .ng-name{font-family:var(--sans);font-size:var(--fz-body);color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ng-name .dim{color:var(--ink-3);} /* categories */ .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;} .cat-cell{border:1px solid var(--line);padding:12px;background:rgba(255,255,255,.01);border-radius:6px;} .cat-cell .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;} .cat-cell .nm{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);text-transform:uppercase;letter-spacing:.06em;} .cat-cell .ct{font-family:var(--mono);font-size:11px;color:var(--ink-2);} .cat-cell .pct{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:4px;} /* ===================================================================== LIVE ===================================================================== */ .live-list{display:flex;flex-direction:column;padding:4px 0 10px;} .live-row{ display:grid;grid-template-columns: 32px 1fr auto;gap:12px;align-items:center; padding:11px 18px;border-bottom:1px dashed var(--line-2);cursor:pointer; transition:background .12s; } .live-row:last-child{border-bottom:0;} .live-row:hover{background:rgba(255,255,255,.025);} .live-row .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1a2330,#0c1218);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);background-size:cover;background-position:center;} .live-row .who{font-family:var(--body);font-size:var(--fz-body);color:var(--ink);font-weight:500;} .live-row .what{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);margin-top:2px;} .live-row .what .t{color:var(--ink);font-weight:500;} .live-row .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;} .live-row .tg{font-family:var(--mono);font-size:9px;border:1px solid var(--line);padding:2px 6px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);} .live-row .tg.blood{color:var(--red);border-color:rgba(255,85,113,.32);background:var(--red-dim);} .live-row .tg.solve{color:var(--green);border-color:var(--green-line);background:var(--green-dim);} .live-row .ago{font-family:var(--mono);font-size:11px;color:var(--ink-2);} /* ===================================================================== misc ===================================================================== */ /* === VPN chip + panel === */ .vpn-chip{ color:var(--green); } .vpn-chip:hover{ color:var(--green); border-color:var(--line-strong); background:rgba(255,255,255,.03); } .vpn-chip svg{color:inherit;} .vpn-chip .chev{ width:12px;height:12px;margin-left:2px;opacity:.7; transition:transform .2s; } .vpn-chip.on .chev{transform:rotate(180deg);} #vpnPanel{ position:fixed;top:62px;right:0;width:340px; } .vpn-head{ padding:16px 18px 12px;border-bottom:1px solid var(--line); } .vpn-head h4{ font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);margin:0; letter-spacing:-.005em; } .vpn-body{padding:14px 18px 4px;display:flex;flex-direction:column;gap:9px;} .vpn-row{ font-family:var(--body);font-size:13px;color:var(--ink-2);line-height:1.45; display:flex;gap:6px;flex-wrap:wrap; } .vpn-row .label{color:var(--ink-2);} .vpn-row .val{color:var(--ink);font-family:var(--mono);font-size:12px;} .vpn-help{ padding:6px 18px 14px; } .vpn-help a{ color:var(--green);font-family:var(--body);font-size:13px;text-decoration:none; display:inline-flex;align-items:center;gap:6px; } .vpn-help a:hover{color:var(--green);text-decoration:underline;} .vpn-help a svg{width:13px;height:13px;} .vpn-foot{ padding:0 18px 18px; } .vpn-foot .download-btn{ width:100%;height:42px; background:var(--green-dim);color:var(--green); border:1px solid var(--green-line);border-radius:6px; font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; transition:background .15s; } .vpn-foot .download-btn:hover{background:rgba(63,224,147,.22);} .vpn-foot .download-btn svg{width:14px;height:14px;} .foot{margin-top:48px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.2em;text-transform:uppercase;} /* === Staggered fade-in on load === */ @keyframes cardFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .app > main > section .card, .app > main > section .col > .card { animation: cardFade .6s cubic-bezier(.22,.7,.3,1) both; } /* hero cards */ .hero > .card:nth-child(1){ animation-delay: .04s; } .hero > .card:nth-child(2){ animation-delay: .12s; } .hero > .card:nth-child(3){ animation-delay: .20s; } /* main grid: left col / right col */ .grid > .col:nth-child(1) > .card:nth-child(1){ animation-delay: .28s; } .grid > .col:nth-child(1) > .card:nth-child(2){ animation-delay: .36s; } .grid > .col:nth-child(2) > .card:nth-child(1){ animation-delay: .28s; } .grid > .col:nth-child(2) > .card:nth-child(2){ animation-delay: .36s; } .grid > .col:nth-child(2) > .card:nth-child(3){ animation-delay: .44s; } /* Rare achievement — visual emphasis removed by request */ .ach-pv-rare.rare{color:var(--green);} /* ===================================================================== POPOVERS / OVERLAYS ===================================================================== */ .overlay-backdrop{ position:fixed;inset:0;z-index:200; background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .18s, visibility .18s; } .overlay-backdrop.open{opacity:1;visibility:visible;} .popover{ position:absolute;z-index:120; background:rgba(21,24,29,.97); border:1px solid rgba(255,255,255,.14); border-radius:8px; box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s, visibility .16s, transform .16s; } .popover.open{opacity:1;visibility:visible;transform:translateY(0);} /* === NOTIFICATION PANEL === */ #notifPanel{ position:fixed;top:62px;right:184px;width:380px;max-height:520px; display:flex;flex-direction:column; } .notif-head{ padding:14px 16px;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;flex:none; } .notif-head h4{ font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0;font-weight:500; } .notif-head h4 .badge{ display:inline-block;margin-left:8px;padding:1px 7px;border-radius:10px; background:var(--green-dim);color:var(--green); font-size:9px;letter-spacing:.05em; } .notif-clear{ background:transparent;border:0;cursor:pointer; font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em; } .notif-clear:hover{color:var(--ink);} .notif-body{overflow-y:auto;flex:1;} .notif-section-head{ padding:8px 16px 6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink-2); } .notif-row{ position:relative; display:grid;grid-template-columns:34px 1fr auto;gap:12px; padding:12px 16px;align-items:flex-start; border-bottom:1px dashed var(--line-2);cursor:pointer; transition:background .12s; } .notif-row:hover{background:rgba(255,255,255,.025);} .notif-row.unread{background:rgba(63,224,147,.025);} .notif-row.unread::before{ content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%); width:4px;height:4px;border-radius:50%;background:var(--green); } .notif-ico{ width:30px;height:30px;border-radius:50%; display:grid;place-items:center;flex:none; background:rgba(255,255,255,.04);border:1px solid var(--line); color:var(--ink-2); } .notif-ico.green{background:var(--green-dim);border-color:var(--green-line);color:var(--green);} .notif-ico.amber{background:rgba(240,178,50,.12);border-color:rgba(240,178,50,.3);color:var(--amber);} .notif-ico.red{background:rgba(255,85,113,.12);border-color:rgba(255,85,113,.3);color:#ff8896;} .notif-ico svg{width:14px;height:14px;} .notif-text{ font-family:var(--body);font-size:13px;color:var(--ink-2);line-height:1.45;min-width:0; } .notif-text .strong{color:var(--ink);font-weight:500;} .notif-text .tag{ display:inline-block;padding:0 5px;border:1px solid var(--line);border-radius:3px; font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-3); margin:0 1px; } .notif-ago{ font-family:var(--mono);font-size:11px;color:var(--ink-2); flex:none;align-self:flex-start;padding-top:3px; } .notif-foot{ padding:10px 16px;border-top:1px solid var(--line); text-align:center;flex:none; } .notif-foot a{ font-family:var(--mono);font-size:11px;color:var(--ink-2);text-decoration:none;letter-spacing:.04em; } .notif-foot a:hover{color:var(--ink);} /* === AVATAR DROPDOWN === */ #avaMenu{ position:fixed;top:62px;right:24px;width:260px;padding:8px; } .ava-menu-head{ padding:10px 10px 14px;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center; border-bottom:1px solid var(--line);margin-bottom:6px; } .ava-menu-ava{ width:42px;height:42px;border-radius:50%; background:var(--user-avatar) center/cover no-repeat; border:1px solid var(--line-strong); } .ava-menu-name{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:14px;line-height:1.2;} .ava-menu-email{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px;} .ava-menu-item{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:4px;cursor:pointer; color:var(--ink-2);font-family:var(--body);font-size:13px; transition:background .1s, color .1s; } .ava-menu-item:hover{background:rgba(255,255,255,.04);color:var(--ink);} .ava-menu-item svg{width:14px;height:14px;opacity:.65;} .ava-menu-item .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);} .ava-menu-sep{height:1px;background:var(--line);margin:6px 0;} .ava-menu-item.danger:hover{color:#ff8896;} /* === COMMAND PALETTE === */ #cmdK{ position:fixed;left:50%;top:14%;width:640px;max-width:90vw;z-index:210; border-radius:10px; display:flex;flex-direction:column;max-height:72vh; opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px); transition:opacity .18s, visibility .18s, transform .18s; } #cmdK.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .cmdK-input-row{ padding:14px 18px;display:flex;gap:12px;align-items:center; border-bottom:1px solid var(--line);flex:none; } .cmdK-input-row svg{width:16px;height:16px;color:var(--ink-3);flex:none;} .cmdK-input{ flex:1;background:transparent;border:0;outline:0; color:var(--ink);font-family:var(--body);font-size:15px; } .cmdK-input::placeholder{color:var(--ink-4);} .cmdK-esc{ font-family:var(--mono);font-size:10px;color:var(--ink-4); padding:3px 7px;border:1px solid var(--line);border-radius:3px; } .cmdK-list{flex:1;overflow-y:auto;padding:6px 0 10px;} .cmdK-section-head{ padding:10px 18px 6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink-2); } .cmdK-item{ padding:10px 18px;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px; cursor:pointer;color:var(--ink-2);transition:background .1s, color .1s; border-left:2px solid transparent; } .cmdK-item:hover, .cmdK-item.on{ background:rgba(63,224,147,.05);color:var(--ink);border-left-color:var(--green); } .cmdK-item svg{width:16px;height:16px;color:var(--ink-3);} .cmdK-item:hover svg, .cmdK-item.on svg{color:var(--green);} .cmdK-label{font-family:var(--body);font-size:14px;} .cmdK-meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em;} .cmdK-foot{ padding:10px 18px;display:flex;justify-content:space-between; border-top:1px solid var(--line); font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.04em;flex:none; } .cmdK-foot .keys{display:flex;gap:14px;} .cmdK-foot kbd{padding:1px 5px;border:1px solid var(--line);border-radius:3px;color:var(--ink-3);} /* === EMPTY STATE === */ .empty-state{ padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center; } .empty-state .icon{ width:48px;height:48px;border-radius:50%; border:1px dashed var(--line); display:grid;place-items:center;color:var(--ink-3); } .empty-state .icon svg{width:24px;height:24px;} .empty-state .title{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-2);} .empty-state .sub{font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.04em;max-width:280px;line-height:1.5;} /* tasks filter pills (next to tabs to demo empty state) */ .task-filters{ position:absolute;top:8px;right:14px;display:flex;gap:4px;z-index:1; } .task-filter{ font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase; padding:4px 8px;border:1px solid var(--line);border-radius:3px; background:transparent;color:var(--ink-3);cursor:pointer;transition:color .12s, border-color .12s; } .task-filter:hover{color:var(--ink-2);border-color:var(--line-strong);} .task-filter.on{color:var(--green);border-color:var(--green-line);background:var(--green-dim);} .hide{display:none !important;} /* === Rating tabs (removed sticky — was blocking achievement preview and removing border) === */ .rating .tabs{background:transparent;} /* =========================================================================== HackerLab — компоненты страницы ПРОФИЛЬ (новые механики) Дополняет profile.css. Уровни/XP · Серия + Заморозки · Радар · Бары категорий =========================================================================== */ :root{ /* лёд — акцент механики заморозок (новый, гармоничен тёмной теме) */ --ice: #5cc6e0; --ice-dim: rgba(92,198,224,.14); --ice-line: rgba(92,198,224,.42); --ice-glow: rgba(92,198,224,.50); } /* sidebar group divider (как в «Главная (правки)») */ .nav-div{flex:none;height:1px;background:rgba(255,255,255,.08);margin:9px 20px;} /* unified footer for the 3 header cards (Уровень / Место / Решено) */ .hcard-foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--mono);font-variant-numeric:tabular-nums;padding-top:13px;} .hcard-foot .hf-l{font-size:11px;color:var(--ink-2);letter-spacing:.04em;} .hcard-foot .hf-v{font-size:var(--fz-md);color:var(--ink);display:inline-flex;align-items:center;gap:5px;} .hcard-foot .hf-v .blood-flame{width:14px;height:16px;} .hcard-foot.div{border-top:1px dashed var(--line);} /* activity rows without XP column — 4 columns */ .hist-row{grid-template-columns:92px 1fr 70px 50px;column-gap:10px;} /* ── page heading ───────────────────────────────────────────────── */ .page-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;} .page-head h1{ font-family:var(--sans);font-size:var(--fz-xl);font-weight:600;color:var(--ink); letter-spacing:-.01em;margin:0; } .page-head .crumb{ font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); } /* ── profile tabs (Главная / Активность / Достижения / Сертификаты) ─ */ .ptabs{ display:flex;gap:30px;align-items:flex-end; border-bottom:1px solid var(--line); margin-bottom:26px;position:relative;padding:0 2px; } .ptab{ appearance:none;background:none;border:0;cursor:pointer; height:46px;display:flex;align-items:center;gap:8px;padding:0; font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);position:relative;transition:color .16s; } .ptab:hover{color:var(--ink-2);} .ptab.on{color:var(--ink);} .ptab.on::after{ content:"";position:absolute;left:-2px;right:-2px;bottom:-1px;height:2px; background:linear-gradient(90deg,transparent,var(--green) 30%,var(--green) 70%,transparent); box-shadow:0 0 10px var(--green-glow); } .ptab .pt-lock{width:11px;height:11px;opacity:.6;} .ptab.stub{color:var(--ink-4);} .ptab.stub:hover{color:var(--ink-3);} /* stub empty-state panel */ .stub-panel{ border:1px dashed var(--line);border-radius:10px; padding:64px 24px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:10px; background:var(--surface); } .stub-panel svg{width:30px;height:30px;color:var(--ink-4);} .stub-panel .st-h{font-family:var(--sans);font-size:var(--fz-lg);font-weight:600;color:var(--ink-2);} .stub-panel .st-s{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-3);letter-spacing:.04em;} /* ── identity header (avatar + name + share) ────────────────────── */ .id-head{display:flex;gap:20px;align-items:flex-start;padding:24px 24px 22px;} .id-ava{ width:96px;height:96px;flex:none;border-radius:14px; border:1px solid var(--line-strong); background:var(--user-avatar) center/cover no-repeat, linear-gradient(135deg,#1a2330,#0c1218); position:relative;overflow:hidden; } .id-ava::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-radius:inherit;} .id-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;} .id-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);} .id-name{font-family:var(--sans);font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink);} .id-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;} .id-since{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);} .id-since .n{color:var(--ink);} .id-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;} .id-actions .hint{font-family:var(--mono);font-size:11px;color:var(--ink-3);max-width:200px;text-align:right;line-height:1.5;} .share-btn{ height:36px;padding:0 16px;border:1px solid var(--line-strong);border-radius:6px;background:transparent; color:var(--ink);font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.06em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s,background .15s; } .share-btn:hover{border-color:var(--ink-2);background:rgba(255,255,255,.03);} .share-btn svg{width:14px;height:14px;} /* ── stat tiles row ─────────────────────────────────────────────── */ .statile-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .statile{ padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface); display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden; } .statile .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);} .statile .big{ font-family:var(--mono);font-size:27px;font-weight:600;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums;white-space:nowrap; background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent; } .statile .big.empty{background:none;color:var(--ink-3);} .statile .sub{font-family:var(--mono);font-size:11px;color:var(--ink-2);} .statile .sub .up{color:var(--green);} .statile .blood-flame{width:14px;height:16px;vertical-align:-3px;margin-right:2px;} /* ── LEVEL / XP card (новая механика) ───────────────────────────── */ .level-card{padding:22px 22px 20px;display:flex;flex-direction:column;height:100%;} .level-top{display:flex;align-items:baseline;gap:12px;margin:4px 0 14px;flex-wrap:wrap;} .level-top > *{flex:none;} .level-num{ font-family:var(--mono);font-size:var(--fz-display);font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap; background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent; } .level-tier{font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:.06em;color:var(--green); border:1px solid var(--green-line);background:var(--green-dim);padding:3px 9px;border-radius:4px;text-transform:uppercase;} .level-delta{margin-left:auto;font-family:var(--mono);font-size:var(--fz-cap);color:var(--green);font-weight:500;} .level-xpbar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;position:relative;} .level-xpbar i{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 10px var(--green-dim); transition:width 1.1s cubic-bezier(.2,.7,.3,1) .2s;border-radius:4px;} .level-xpbar i::after{content:"";position:absolute;right:-1px;top:-3px;width:1px;height:14px;background:var(--green);box-shadow:0 0 6px var(--green);} .level-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px; font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);font-variant-numeric:tabular-nums;} .level-meta .next{color:var(--ink-3);} .level-xpval{margin-left:auto;font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:baseline;} /* ── СЕРИЯ + ЗАМОРОЗКИ module (новая механика) ──────────────────── */ .streak-mod{padding:22px 22px 20px;display:flex;flex-direction:column;} .sm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;} .sm-big{display:flex;align-items:baseline;gap:10px;margin:2px 0 16px;} .sm-big .num{ font-family:var(--mono);font-size:var(--fz-display);font-weight:600;line-height:1;letter-spacing:-.02em; background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent; } .sm-big .unit{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-2);} .sm-big .flame{width:18px;height:21px;margin-left:auto;align-self:center;filter:drop-shadow(0 0 4px rgba(255,138,58,.25));} /* week calendar */ .wk-cal{display:flex;gap:5px;margin-bottom:6px;} .wk{ flex:1;height:34px;border-radius:4px;border:1px solid var(--line); background:rgba(255,255,255,.018);position:relative;cursor:default; display:flex;align-items:center;justify-content:center; transition:transform .12s; } .wk:hover{transform:translateY(-2px);} .wk svg{width:13px;height:13px;} .wk.done{background:var(--green-dim);border-color:var(--green-line);color:var(--green);} .wk.frozen{background:var(--ice-dim);border-color:var(--ice-line);color:var(--ice);} .wk.miss{background:transparent;border-color:var(--line-2);} .wk.miss::after{content:"";width:8px;height:1.5px;background:var(--ink-4);border-radius:1px;} .wk.current{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green-line),0 0 10px var(--green-dim);color:var(--green);} .wk.current::before{content:"";position:absolute;inset:0;border-radius:3px;border:1px solid var(--green);opacity:.5;animation:wkPulse 2s ease-in-out infinite;} @keyframes wkPulse{0%,100%{opacity:.15}50%{opacity:.6}} /* tooltip */ .wk .wtt{ position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(3px); white-space:nowrap;padding:6px 9px;border-radius:5px; background:rgba(21,24,29,.97);border:1px solid rgba(255,255,255,.16);box-shadow:0 6px 20px rgba(0,0,0,.5); font-family:var(--mono);font-size:10px;color:var(--ink-2); opacity:0;visibility:hidden;transition:opacity .14s,transform .14s;pointer-events:none;z-index:60;text-align:center; } .wk .wtt b{color:var(--ink);font-weight:500;} .wk .wtt .ice{color:var(--ice);} .wk .wtt::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(21,24,29,.97);} .wk:hover .wtt{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .wk-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;} .wk-legend span{font-family:var(--mono);font-size:10px;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px;} .wk-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;} .wk-legend i.g{background:var(--green);} .wk-legend i.f{background:var(--ice);} .wk-legend i.m{background:transparent;border:1px solid var(--line-strong);} /* weekly xp progress (mini) */ .sm-week{margin-top:auto;padding-top:13px;border-top:1px dashed var(--line);} .sm-week-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;} .sm-week-row .l{font-family:var(--mono);font-size:11px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;} .sm-week-row .l .xp-badge{font-family:var(--mono);font-size:9px;color:var(--green);border:1px solid var(--green-line);background:var(--green-dim);padding:1px 5px;border-radius:3px;} .sm-week-row .v{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);font-variant-numeric:tabular-nums;} .sm-weekbar{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;} .sm-weekbar i{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 6px rgba(63,224,147,.35);border-radius:3px;transition:width 1.2s cubic-bezier(.2,.7,.3,1) .3s;} .wk-status{font-family:var(--mono);font-size:var(--fz-cap);color:var(--green);display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;} .wk-status::before{content:"✓";font-size:11px;} .wk-status.pending{color:var(--amber);} .wk-status.pending::before{content:"!";} .wk-hint{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:8px;letter-spacing:.02em;} /* freeze sub-block */ .freeze{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;border:1px solid var(--ice-line);border-radius:8px;background:var(--ice-dim);position:relative;} .freeze .snow{width:24px;height:24px;flex:none;color:var(--ice);filter:drop-shadow(0 0 5px var(--ice-glow));} .freeze .ft{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .freeze .ft .t{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:7px;} .freeze .ft .s{font-family:var(--mono);font-size:11px;color:var(--ink-2);} .freeze .cnt{font-family:var(--mono);font-size:var(--fz-lg);color:var(--ice);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;} .freeze .cnt .max{font-size:11px;color:var(--ink-3);} .freeze.spent{border-color:var(--line);background:var(--surface);} .freeze.spent .snow{color:var(--ink-3);filter:none;} .freeze.spent .cnt{color:var(--ink-3);} /* info icon + tooltip inside freeze */ .fz-info{width:14px;height:14px;color:var(--ink-3);cursor:help;position:relative;} .fz-info:hover{color:var(--ice);} .fz-tip{ position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px); width:260px;padding:11px 13px;border-radius:7px; background:rgba(21,24,29,.98);border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.55); font-family:var(--body);font-size:var(--fz-body);color:var(--ink-2);line-height:1.55; opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;pointer-events:none;z-index:70;text-transform:none;letter-spacing:normal;font-weight:400; } .fz-tip b{color:var(--ink);font-weight:500;} .fz-tip .ice{color:var(--ice);} .fz-tip ul{margin:6px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:3px;} .fz-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(21,24,29,.98);} .fz-info:hover .fz-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} /* ── platform progress (Задачи / Pentest / Курсы / Pro Labs) ────── */ .prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px;} .prog-cell{border:1px solid var(--line);border-radius:8px;padding:16px;background:rgba(255,255,255,.012);} .prog-cell .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .prog-cell .nm{font-family:var(--sans);font-size:var(--fz-md);font-weight:600;color:var(--ink);letter-spacing:-.005em;} .prog-cell .ct{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);font-variant-numeric:tabular-nums;} .prog-cell .ct .tot{color:var(--ink-3);} .prog-cell .bar{height:6px;} .prog-cell .cap{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:9px;} .prog-list{display:flex;flex-direction:column;} /* ── COMPETENCIES — radar ───────────────────────────────────────── */ .comp-wrap{display:grid;grid-template-columns:1fr 230px;gap:8px;padding:18px;align-items:stretch;} .radar-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:330px;} .radar{width:100%;max-width:430px;display:block;} .radar-box svg{width:100%;height:auto;overflow:visible;display:block;} .radar-grid{fill:none;stroke:rgba(255,255,255,.07);} .radar-axis{stroke:rgba(255,255,255,.07);} .radar-poly{fill:rgba(63,224,147,.09);stroke:var(--green-soft);stroke-width:1.4;} .radar-dot{fill:var(--green-soft);} .radar-label{font-family:var(--mono);font-size:10px;fill:var(--ink-2);letter-spacing:.04em;} .radar-label.val{fill:var(--ink);font-weight:600;} .comp-side{display:flex;flex-direction:column;gap:16px;border-left:1px dashed var(--line);padding-left:18px;} .comp-side .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;} .comp-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:15px 20px 4px;border-top:1px dashed var(--line);} .comp-foot .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;} .cf-zones{min-width:0;} .cf-count{display:flex;align-items:baseline;gap:9px;flex:none;} .cf-count .big{font-family:var(--mono);font-size:38px;font-weight:600;line-height:1;background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent;} .cf-count .cap{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.35;text-align:left;} .growth-tags{display:flex;flex-wrap:wrap;gap:7px;} .gtag{font-family:var(--mono);font-size:11px;color:var(--ink-2);border:1px solid var(--line);padding:4px 9px;border-radius:4px;letter-spacing:.02em;} .gtag.weak{color:var(--amber);border-color:var(--amber-dim);background:var(--amber-dim);} .comp-count{margin-top:auto;} .comp-count .big{font-family:var(--mono);font-size:42px;font-weight:600;line-height:1;color:var(--ink); background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent;} .comp-count .cap{font-family:var(--body);font-size:var(--fz-body);color:var(--ink-2);line-height:1.5;margin-top:6px;} /* ── COMPETENCIES — horizontal category bars (вариант B) ────────── */ .catbars{display:flex;flex-direction:column;padding:8px 18px 16px;} .catbar{display:grid;grid-template-columns:140px 1fr 64px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line-2);} .catbar:last-child{border-bottom:0;} .catbar .cnm{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);text-transform:uppercase;letter-spacing:.05em;} .catbar .ctrack{height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;} .catbar .ctrack i{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 8px var(--green-dim);border-radius:4px;transition:width 1s cubic-bezier(.2,.7,.3,1) .2s;} .catbar.low .ctrack i{background:var(--amber);box-shadow:0 0 8px var(--amber-dim);} .catbar.zero .ctrack i{background:var(--ink-4);box-shadow:none;} .catbar .cval{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;} .catbar .cval b{color:var(--ink);} /* ── identity rail (вариант B) ──────────────────────────────────── */ .rail{display:flex;flex-direction:column;} .rail .id-head{flex-direction:column;align-items:flex-start;gap:16px;text-align:left;padding:24px;} .rail .id-ava{width:84px;height:84px;} .rail .id-name{font-size:30px;} .rail-sec{padding:18px 24px;border-top:1px dashed var(--line);} .rail-sec .rs-ttl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;} .rail-stats{display:flex;flex-direction:column;gap:0;} .rail-stat{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line-2);} .rail-stat:last-child{border-bottom:0;} .rail-stat .l{font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;} .rail-stat .v{font-family:var(--mono);font-size:var(--fz-md);color:var(--ink);font-variant-numeric:tabular-nums;} .rail .share-btn{width:100%;justify-content:center;} /* ── bento (вариант C) ──────────────────────────────────────────── */ .bento{display:grid;gap:14px;grid-template-columns:repeat(12,1fr);} .bento > .card{min-width:0;} .b-12{grid-column:span 12;} .b-8{grid-column:span 8;} .b-7{grid-column:span 7;} .b-6{grid-column:span 6;} .b-5{grid-column:span 5;} .b-4{grid-column:span 4;} .b-3{grid-column:span 3;} /* section title (used between blocks) */ .block-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;} .block-head h2{font-family:var(--sans);font-size:var(--fz-lg);font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0;} .block-head .more{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;background:none;border:0;} .block-head .more:hover{color:var(--ink);} /* ── competencies view toggle (радар ↔ бары) ────────────────────── */ .comp-toggle{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;} .ctg{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;background:transparent;border:0;color:var(--ink-3);cursor:pointer;transition:color .14s,background .14s;} .ctg + .ctg{border-left:1px solid var(--line);} .ctg.on{background:var(--green-dim);color:var(--green);} .ctg:not(.on):hover{color:var(--ink-2);} /* generic card heading reuse */ .mini-cap{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);} /* ── level strip in profile header ──────────────────────────────── */ .level-strip{display:flex;align-items:center;gap:18px;margin:0 24px;padding:15px 0;border-top:1px dashed var(--line);} .ls-lvl{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap; background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent;} .ls-bar{flex:1;min-width:140px;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;} .ls-bar i{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 10px var(--green-dim);border-radius:4px;transition:width 1.1s cubic-bezier(.2,.7,.3,1) .25s;} .ls-xp{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;} .ls-next{font-family:var(--mono);font-size:var(--fz-cap);color:var(--ink-3);white-space:nowrap;} .ls-delta{font-family:var(--mono);font-size:var(--fz-cap);color:var(--green);font-weight:500;white-space:nowrap;} /* ── segmented stat bar in profile header ───────────────────────── */ .id-statbar{display:flex;margin:15px 24px 22px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;} .idstat{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:7px;min-width:0;} .idstat + .idstat{border-left:1px solid var(--line);} .idstat .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);} .idstat .val{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .idstat .big{font-family:var(--mono);font-size:28px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap; background:linear-gradient(180deg,#fff,#b8c0c8);-webkit-background-clip:text;background-clip:text;color:transparent;} .idstat .big .tot{font-size:14px;-webkit-text-fill-color:var(--ink-3);} .idstat .dlt{font-family:var(--mono);font-size:var(--fz-cap);color:var(--green);font-weight:500;white-space:nowrap;} .idstat-foot{margin-top:auto;padding-top:11px;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;} .idstat-foot .fl{font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.04em;} .idstat-foot .fv{font-family:var(--mono);font-size:var(--fz-md);color:var(--ink);display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;} .idstat-foot .fv .blood-flame{width:14px;height:16px;} /* ── variant B layout (левый рейл) ──────────────────────────────── */ .b-layout{display:grid;grid-template-columns:384px 1fr;gap:16px;align-items:start;} .rail-wrap{position:sticky;top:18px;} .rail .id-head{gap:12px;} .rail .id-since{margin-top:-2px;} .rail .share-btn{margin-top:6px;} .b-main{display:flex;flex-direction:column;gap:16px;min-width:0;} /* ── variant C bento helpers ────────────────────────────────────── */ .bento .level-card,.bento .streak-mod{height:100%;} .c-statcol{display:flex;flex-direction:column;gap:12px;height:100%;} /* ── responsive fallbacks (laptop / narrow preview) ─────────────── */ @media (max-width:1180px){ .comp-wrap{grid-template-columns:1fr;} .comp-side{border-left:0;border-top:1px dashed var(--line);padding-left:0;padding-top:16px;} .b-layout{grid-template-columns:1fr;} .rail-wrap{position:static;} .bento{grid-template-columns:repeat(6,1fr);} .bento .b-8,.bento .b-7{grid-column:span 6;} .bento .b-5,.bento .b-4{grid-column:span 3;} } @media (max-width:820px){ .statile-row{grid-template-columns:1fr 1fr;} .prog-grid{grid-template-columns:1fr;} .bento{grid-template-columns:1fr;} .bento .b-8,.bento .b-7,.bento .b-6,.bento .b-5,.bento .b-4,.bento .b-3{grid-column:span 1;} .hero__cards{grid-template-columns:1fr !important;} .catbar{grid-template-columns:104px 1fr 52px;} } /* RESPONSIVE mobile net (2026-07-15): home-reused grids not covered by @1180/@820 */ @media (max-width:680px){ .grid{ grid-template-columns:1fr; } .events-content{ grid-template-columns:1fr; min-height:0; } .ach-grid{ grid-template-columns:1fr; } .lb-row{ grid-template-columns:28px 24px 1fr 48px 40px 34px; gap:6px; padding:9px 10px; } .lb-head-inline{ grid-template-columns:48px 40px 34px; gap:6px; margin-right:0; } }