/* ========================================================================== L2Hub.net — design mockup Two themes: graphite (default) and light. Switched via [data-theme] on . ========================================================================== */ /* ------------------------------------------------------ theme: graphite -- */ :root { --page-a: #262f3c; --page-b: #1e252f; --page-c: #1a2028; --srf: #2a3340; /* card */ --srf-2: #303b4a; /* card, raised */ --srf-3: #384454; /* chips, inputs */ --sunken: rgba(0,0,0,.2); --glass: rgba(38,47,60,.86); --drawer: #29323f; --edge: #45536571; --edge-hard: #4c5b6f; --edge-soft: #3a4756; --ink: #f2f6fb; --ink-dim: #b3c0d0; --ink-mute: #8593a4; --accent: #ff9300; --accent-hi: #ffb14a; --accent-tx: #ffa829; /* accent used as text */ --on-accent: #1b1f26; /* text on top of accent fills */ --gold: #ffcc4d; --gold-tx: #ffd569; --rgb-pvp: 255,90,114; --rgb-craft: 61,220,151; --rgb-low: 74,168,255; --rgb-newbie: 160,107,255; --rgb-add: 255,147,0; --rgb-gve: 51,214,208; --rgb-neutral: 190,205,222; --c-pvp: #ff8496; --c-craft: #5fe0ae; --c-low: #79bdff; --c-newbie: #b48cff; --c-add: #ffb14a; --c-gve: #58e2dd; --c-neutral: var(--ink-mute); --green: #3ddc97; --blue: #4aa8ff; --cyan: #33d6d0; --bar-off: #4a5769; /* how strongly each paid tier washes its row; light theme needs more */ --tint-1: .14; --tint-2: .2; --tint-3: .26; --shadow: 0 10px 32px rgba(0,0,0,.4); --shadow-sm: 0 3px 12px rgba(0,0,0,.24); --glow-gold: 0 6px 26px rgba(255,178,40,.26); --glow-org: 0 5px 20px rgba(255,147,0,.2); --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --container: 1560px; --sidebar-w: 262px; } /* --------------------------------------------------------- theme: light -- */ [data-theme="light"] { --page-a: #eef2f8; --page-b: #e7ecf4; --page-c: #eaeff6; --srf: #ffffff; --srf-2: #ffffff; --srf-3: #f1f5fa; --sunken: rgba(20,35,60,.045); --glass: rgba(255,255,255,.9); --drawer: #ffffff; --edge: #d5dee9; --edge-hard: #c2cedd; --edge-soft: #e3eaf3; --ink: #17202e; --ink-dim: #55637a; --ink-mute: #8492a6; --accent: #ff9300; --accent-hi: #e07d00; --accent-tx: #d97400; --on-accent: #ffffff; --gold: #f5a623; --gold-tx: #b26a00; --rgb-neutral: 90,110,135; --c-pvp: #d8324c; --c-craft: #128a5c; --c-low: #1a6fc4; --c-newbie: #6b39c9; --c-add: #c26a00; --c-gve: #0d8b86; --c-neutral: #5a6e87; --green: #16a06b; --blue: #2b7fd4; --cyan: #0f9d97; --bar-off: #cfd9e5; --tint-1: .16; --tint-2: .22; --tint-3: .42; --shadow: 0 12px 30px rgba(24,40,70,.14); --shadow-sm: 0 2px 8px rgba(24,40,70,.08); --glow-gold: 0 8px 24px rgba(245,166,35,.3); --glow-org: 0 6px 18px rgba(255,147,0,.22); } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.page { margin: 0; min-height: 100vh; font: 400 14px/1.5 "Inter", "Segoe UI", Arial, sans-serif; color: var(--ink); background: radial-gradient(1200px 600px at 15% -10%, rgba(255,147,0,.09), transparent 60%), radial-gradient(900px 500px at 85% 0%, rgba(74,168,255,.08), transparent 60%), linear-gradient(180deg, var(--page-a) 0%, var(--page-b) 45%, var(--page-c) 100%); background-attachment: fixed; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } svg { fill: currentColor; } ::selection { background: var(--accent); color: var(--on-accent); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--page-c); } ::-webkit-scrollbar-thumb { background: var(--edge-hard); border-radius: 6px; border: 2px solid var(--page-c); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* ---------------------------------------------------- image placeholders -- */ .ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 1px dashed var(--edge-hard); border-radius: var(--r-md); background: repeating-linear-gradient(135deg, rgba(128,150,180,.07) 0 12px, transparent 12px 24px), var(--srf); color: var(--ink-mute); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s, color .2s; } a:hover > .ph { border-color: var(--accent); color: var(--accent-tx); } .ph_wide { height: 80px; } .ph_tall { height: 400px; } /* ========================================================== HEADER BANNERS == */ /* two 480×80 slots in the header. They shrink together when the row is tight; on phones they drop under the logo and stack. */ .hdr__bnr { display: flex; align-items: center; justify-content: center; gap: 24px; flex: 1 1 auto; min-width: 0; } .hdr__bnr-slot { display: block; flex: 1 1 0; max-width: 480px; min-width: 0; line-height: 0; border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; transition: border-color .2s, box-shadow .2s; } .hdr__bnr-slot:hover { border-color: rgba(255,147,0,.5); box-shadow: 0 0 0 1px rgba(255,147,0,.12); } .hdr__bnr-slot img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 80; object-fit: cover; } /* =============================================================== HEADER == */ .hdr { position: sticky; top: 0; z-index: 200; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge-soft); } .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,147,0,.55), transparent); } .hdr__in { display: flex; align-items: center; gap: 18px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; } /* logo */ .logo-block { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; gap: 1px; min-width: 0; } .logo { display: flex; align-items: baseline; gap: 2px; font-family: "Oswald", "Inter", sans-serif; font-size: 28px; font-weight: 700; flex-shrink: 0; } .logo__l2 { color: var(--ink); } .logo__hub { padding: 0 8px 2px; border-radius: 5px; background: linear-gradient(180deg, #ffab24, var(--accent)); color: #14171c; box-shadow: 0 4px 14px rgba(255,147,0,.35); } .logo__dom { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-mute); } .logo__h1 { display: flex; flex-direction: column; margin: 0; font-family: "Inter", sans-serif; font-size: 8px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--ink-mute); } .logo__h1 span { white-space: nowrap; } .logo_sm { font-size: 22px; } .logo_sm .logo__hub { padding: 0 6px 1px; } /* nav */ .hdr__nav { display: flex; align-items: center; gap: 9px; margin-left: auto; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; } .btn__ico { width: 16px; height: 16px; flex-shrink: 0; } .btn_ghost { border-color: var(--edge); background: var(--srf); color: var(--ink-dim); } .btn_ghost:hover { border-color: var(--edge-hard); color: var(--ink); } .btn_primary { background: linear-gradient(180deg, #ffab24, #f58800); color: #16191e; box-shadow: 0 6px 18px rgba(255,147,0,.3); } .btn_primary:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(255,147,0,.42); } .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--srf); color: var(--ink-dim); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .2s, color .2s; } .icon-btn:hover { border-color: var(--accent); color: var(--accent-tx); } .icon-btn svg { width: 18px; height: 18px; } .theme__moon { display: none; } [data-theme="light"] .theme__sun { display: none; } [data-theme="light"] .theme__moon { display: block; } /* burger */ .burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--srf); cursor: pointer; } .burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink-dim); transition: transform .25s, opacity .2s; } .burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ============================================================ SWITCHER == */ .switcher { display: none; gap: 6px; margin: 18px 0 0; padding: 5px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--srf); } .switcher__btn { flex: 1; height: 38px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-dim); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; } .switcher__btn.is-active { background: linear-gradient(180deg, #ffab24, #f58800); color: #16191e; } /* ================================================================ GRID == */ .mid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) var(--sidebar-w); gap: 22px; align-items: start; margin-top: 20px; margin-bottom: 34px; } .side { min-width: 0; } .side__container { margin-top: 14px; } /* paid shelf: no horizontal padding so rows line up with date buckets */ .side__container_type_vip { padding: 2px 0 16px; border: 1px solid rgba(255,147,0,.28); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,147,0,.1), transparent 150px), var(--sunken); } .side__container_type_vip .ttl_theme_base { padding-left: 16px; padding-right: 16px; } /* =============================================================== TITLES == */ .ttl { display: flex; align-items: center; gap: 9px; } .ttl_theme_def { padding: 14px 18px; border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--srf-2); box-shadow: var(--shadow-sm); } .ttl_theme_def .ttl__name { font-family: "Oswald", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .ttl__ico { width: 20px; height: 20px; color: var(--accent-tx); } .ttl__count { margin-left: auto; padding: 3px 10px; border-radius: 20px; background: var(--sunken); color: var(--ink-dim); font-size: 12px; font-weight: 700; } .ttl_theme_base { padding: 14px 4px 9px; } .ttl_theme_base .ttl__name { font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .ttl__accent { padding: 2px 8px; border-radius: var(--r-sm); background: linear-gradient(180deg, var(--gold), var(--accent)); color: #16191e; font-family: "Oswald", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .ttl__day { margin-left: auto; font-size: 11.5px; color: var(--ink-mute); } .ttl__note { margin-left: auto; font-size: 11px; color: var(--ink-mute); } .ttl_theme_sub { position: relative; padding: 20px 4px 9px; } .ttl_theme_sub .ttl__name { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } .ttl_theme_sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); } .ttl_theme_bar { padding: 0 0 10px; margin-top: 22px; } .ttl_theme_bar:first-child { margin-top: 0; } .ttl_theme_bar .ttl__name { font-family: "Oswald", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } /* ========================================================================== SERVER ROW Weight ladder: free (parsed) < Standart < Premium < Elite ========================================================================== */ .servers { display: flex; flex-direction: column; gap: 5px; } /* one line per server: name / reach / rate / chronicle / date / arrow */ .server { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 66px 54px 76px 78px 14px; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px 4px 30px; border: 1px solid var(--edge-soft); border-radius: var(--r-md); background: var(--srf); transition: border-color .18s, transform .18s, box-shadow .18s; } .server:hover, .server:focus-within { transform: translateX(2px); border-color: var(--edge-hard); box-shadow: var(--shadow-sm); z-index: 5; } .server__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* left rail — the quickest tier tell */ .server::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; } .server__main { min-width: 0; } .server__name { font-size: 13.5px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: lowercase; transition: color .18s; } .server:hover .server__name { color: var(--accent-tx); } /* paid VIP is the only place names go uppercase */ .server_vip-1 .server__name, .server_vip-2 .server__name, .server_vip-3 .server__name { text-transform: uppercase; } /* rate / chron / date */ .server__rate { font-family: "Oswald", sans-serif; font-size: 15px; font-weight: 600; color: var(--ink-dim); text-align: center; } .server__rate_txt { font-size: 13px; } .server__chron { font-size: 12px; font-weight: 600; color: var(--ink-mute); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .server__date { font-size: 12px; color: var(--ink-mute); text-align: right; white-space: nowrap; } .when { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; } .when_today { background: rgba(var(--rgb-craft),.15); color: var(--green); box-shadow: inset 0 0 0 1px rgba(var(--rgb-craft),.3); } .when_tomorrow { background: rgba(var(--rgb-low),.15); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(var(--rgb-low),.3); } .when_yesterday { background: rgba(var(--rgb-neutral),.12); color: var(--ink-dim); box-shadow: inset 0 0 0 1px rgba(var(--rgb-neutral),.22); } .server__go { display: grid; place-items: center; color: var(--ink-mute); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s, color .18s; } .server__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .server:hover .server__go { opacity: 1; transform: translateX(0); color: var(--accent-tx); } /* ---------------------------------------------------------- rank medallion Paid tiers only. A struck-metal coin: gradient body lit from the top left, bevel on both edges, coloured rim, and a crown cut out of it. Everything scales with the tier, and each tier gets its own crown — a bare coronet, a banded crown, a five-point royal crown. */ .server__crown { position: absolute; left: 8px; top: 50%; display: grid; place-items: center; width: var(--rank-size); height: var(--rank-size); margin-top: calc(var(--rank-size) / -2); border-radius: 50%; color: #14171c; z-index: 2; pointer-events: none; background: linear-gradient(152deg, var(--rank-hi) 8%, var(--rank-mid) 52%, var(--rank-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4), 0 0 0 var(--rank-rim) var(--rank-halo), var(--rank-glow, 0 0 0 rgba(0,0,0,0)); } /* the crown itself, punched through the coin face */ .server__crown::after { content: ""; width: 60%; height: 60%; background: currentColor; -webkit-mask: var(--rank-crown) center / contain no-repeat; mask: var(--rank-crown) center / contain no-repeat; } /* ------------------------------------------------- tier 1 — VIP Standart */ .server_vip-1 { min-height: 44px; border-color: rgba(var(--rgb-low),.3); /* the tint layer must sit on an opaque base, otherwise whatever is behind the row (page or the gradient border) shows through it */ background: linear-gradient(90deg, rgba(var(--rgb-low), var(--tint-1)), transparent 45%), linear-gradient(var(--srf), var(--srf)); } .server_vip-1::before { background: var(--blue); width: 2px; } /* steel-blue coin, bare three-point coronet. No band, so the coronet is drawn taller to carry the same optical weight as the banded crowns above it. */ .server_vip-1 .server__crown { --rank-size: 18px; --rank-hi: #dcebff; --rank-mid: #93bffc; --rank-lo: #3f83e4; --rank-halo: rgba(var(--rgb-low),.22); --rank-rim: 2px; --rank-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.4 7.2 7.2 11.8 12 3.6 16.8 11.8 21.6 7.2 19.6 20.2H4.4L2.4 7.2z'/%3E%3C/svg%3E"); } .server_vip-1 .server__crown::after { width: 64%; height: 64%; } .server_vip-1 .server__name { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink); } .server_vip-1 .server__rate { color: var(--ink); } .server_vip-1:hover { border-color: var(--blue); } /* -------------------------------------------------- tier 2 — VIP Premium Deliberately quiet: flat border, no glow. Elite has to be the only row that shouts. */ .server_vip-2 { min-height: 50px; padding-left: 36px; border-color: rgba(var(--rgb-add),.42); background: linear-gradient(90deg, rgba(255,147,0, var(--tint-2)), transparent 52%), linear-gradient(var(--srf-2), var(--srf-2)); } .server_vip-2::before { background: var(--accent); width: 3px; } /* bronze coin, banded crown */ .server_vip-2 .server__crown { --rank-size: 22px; --rank-hi: #ffdca6; --rank-mid: #ffa32b; --rank-lo: #dd6f00; --rank-halo: rgba(255,147,0,.22); --rank-rim: 2.5px; --rank-glow: 0 0 10px rgba(255,147,0,.38); --rank-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.6 7.4 10.4 12 3.4 16.6 10.4 21 6.6 19.4 15.8H4.6L3 6.6z'/%3E%3Crect x='4.2' y='17.4' width='15.6' height='3.4' rx='1.4'/%3E%3C/svg%3E"); } .server_vip-2 .server__name { font-size: 14.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink); } .server_vip-2 .server__rate { font-size: 16px; color: var(--accent-tx); } .server_vip-2:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(255,147,0,.2); } /* ---------------------------------------------------- tier 3 — VIP Elite */ .server_vip-3 { min-height: 64px; padding-left: 46px; border: 2px solid transparent; background: linear-gradient(90deg, rgba(255,204,77, var(--tint-3)), transparent 62%) padding-box, linear-gradient(var(--srf-2), var(--srf-2)) padding-box, linear-gradient(100deg, var(--gold), #ffe9a8, var(--accent), var(--gold)) border-box; background-size: 100% 100%, 100% 100%, 300% 100%; background-position: 0 0, 0 0, 0 0; box-shadow: var(--glow-gold); animation: eliteEdge 9s linear infinite; } @keyframes eliteEdge { to { background-position: 0 0, 0 0, -300% 0; } } /* slow light sweep across the card; keep it inside the row so overflow stays visible and the reach tooltip is not clipped */ .server_vip-3::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent, rgba(255,240,200,.14), transparent) no-repeat; background-size: 45% 100%; background-position: -45% 0; animation: eliteSheen 6.5s ease-in-out infinite; } @keyframes eliteSheen { 0%, 62% { background-position: -45% 0; } 100% { background-position: 130% 0; } } .server_vip-3::before { background: linear-gradient(180deg, var(--gold), var(--accent)); width: 4px; } /* polished gold coin, five-point royal crown, slowly turning halo */ .server_vip-3 .server__crown { --rank-size: 28px; --rank-hi: #fff6d6; --rank-mid: #ffcb54; --rank-lo: #d98f0c; --rank-halo: rgba(255,204,77,.24); --rank-rim: 3px; --rank-glow: 0 0 18px rgba(255,196,60,.6); --rank-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.9 6.6 5 11 7.6 4.6 9.9 10.2 12 2.6 14.1 10.2 16.4 4.6 19.1 11 22.1 6.6 20.4 16.4H3.6L1.9 6.6z'/%3E%3Crect x='3.2' y='18' width='17.6' height='3.4' rx='1.4'/%3E%3C/svg%3E"); left: 7px; } .server_vip-3 .server__crown::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient( rgba(255,224,150,0), rgba(255,224,150,.85) 14%, rgba(255,224,150,0) 32%, rgba(255,224,150,0) 54%, rgba(255,224,150,.55) 68%, rgba(255,224,150,0) 86%); -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 76%); mask: radial-gradient(closest-side, transparent 74%, #000 76%); animation: rankHalo 7s linear infinite; } @keyframes rankHalo { to { transform: rotate(1turn); } } .server_vip-3 .server__name { font-size: 17px; font-weight: 800; letter-spacing: .03em; color: var(--gold-tx); } /* the glow only reads on the dark theme; on light it just muddies the text */ [data-theme="graphite"] .server_vip-3 .server__name { text-shadow: 0 0 18px rgba(255,204,77,.35); } .server_vip-3:hover .server__name { color: var(--gold); } .server_vip-3 .server__rate { font-size: 20px; color: var(--gold-tx); } .server_vip-3 .server__chron, .server_vip-3 .server__date { color: var(--ink-dim); } .server_vip-3:hover, .server_vip-3:focus-within { box-shadow: 0 10px 36px rgba(255,190,60,.42); } /* -------------------------------------------------------------- show more */ .more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 6px; border: 1px dashed var(--edge-hard); border-radius: var(--r-md); background: transparent; color: var(--ink-mute); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; } .more:hover { border-color: var(--accent); color: var(--accent-tx); } .more svg { width: 14px; height: 14px; } /* ============================================== REACH (announcers count) == */ .reach { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 3px 6px; border: 1px solid var(--edge); border-radius: 20px; background: var(--sunken); cursor: help; z-index: 3; transition: border-color .2s; } .reach:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .reach__bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; } .reach__bars i { display: block; width: 3px; border-radius: 2px; background: var(--bar-off); } .reach__bars i:nth-child(1) { height: 5px; } .reach__bars i:nth-child(2) { height: 7px; } .reach__bars i:nth-child(3) { height: 9px; } .reach__bars i:nth-child(4) { height: 11px; } .reach__bars i:nth-child(5) { height: 13px; } .reach__val { min-width: 15px; font-family: "Oswald", sans-serif; font-size: 13px; font-weight: 600; line-height: 1; text-align: center; color: var(--ink-dim); } .reach_lvl_1 { border-color: rgba(var(--rgb-neutral),.32); } .reach_lvl_1 .reach__bars i:nth-child(-n+1) { background: var(--c-neutral); } .reach_lvl_1 .reach__val { color: var(--c-neutral); } .reach_lvl_2 { border-color: rgba(var(--rgb-low),.36); } .reach_lvl_2 .reach__bars i:nth-child(-n+2) { background: var(--blue); } .reach_lvl_2 .reach__val { color: var(--c-low); } .reach_lvl_3 { border-color: rgba(var(--rgb-gve),.38); } .reach_lvl_3 .reach__bars i:nth-child(-n+3) { background: var(--cyan); } .reach_lvl_3 .reach__val { color: var(--c-gve); } .reach_lvl_4 { border-color: rgba(var(--rgb-add),.45); } .reach_lvl_4 .reach__bars i:nth-child(-n+4) { background: var(--accent); } .reach_lvl_4 .reach__val { color: var(--accent-tx); } .reach_lvl_5 { border-color: rgba(255,190,60,.6); background: rgba(255,190,60,.14); } .reach_lvl_5 .reach__bars i { background: var(--gold); } .reach_lvl_5 .reach__val { color: var(--gold-tx); font-weight: 700; } .reach_static { cursor: default; } .reach_mini { padding: 2px 5px; } .reach_mini .reach__bars { height: 11px; } .reach_mini .reach__bars i:nth-child(1) { height: 4px; } .reach_mini .reach__bars i:nth-child(2) { height: 6px; } .reach_mini .reach__bars i:nth-child(3) { height: 8px; } .reach_mini .reach__bars i:nth-child(4) { height: 9px; } .reach_mini .reach__bars i:nth-child(5) { height: 11px; } /* tooltip */ .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 60; width: 236px; padding: 11px 13px; border: 1px solid var(--edge-hard); border-radius: var(--r-md); background: var(--srf-2); box-shadow: var(--shadow); transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; cursor: default; text-align: left; } .tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin: -5px 0 0 -4.5px; border-right: 1px solid var(--edge-hard); border-bottom: 1px solid var(--edge-hard); background: var(--srf-2); transform: rotate(45deg); } .reach:hover .tip, .reach:focus-visible .tip, .reach.is-open .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .tip__ttl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } .tip__num { margin: 3px 0 7px; font-family: "Oswald", sans-serif; font-size: 17px; font-weight: 600; color: var(--ink); } .tip__list { padding-top: 7px; border-top: 1px solid var(--edge-soft); font-size: 11.5px; line-height: 1.6; color: var(--ink-dim); word-break: break-word; } .tip__more { color: var(--accent-tx); font-weight: 600; } /* ================================================================ EMPTY == */ .empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 70px; border: 1px dashed var(--edge-hard); border-radius: var(--r-md); background: var(--sunken); color: var(--ink-mute); font-size: 13px; } .empty__ico { width: 19px; height: 19px; opacity: .7; } /* ============================================================== SIDEBAR == */ .sidebar { position: sticky; top: 82px; padding: 16px; border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--srf); } .e-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .e-list__link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-dim); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .e-list__link:hover { border-color: rgba(255,147,0,.4); background: rgba(255,147,0,.1); color: var(--accent-tx); } .e-list__link_all { grid-column: 1 / -1; } .e-list__link.is-on { background: rgba(255,147,0,.14); border-color: rgba(255,147,0,.35); color: var(--accent-tx); font-weight: 700; } .e-list__cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-mute); } .e-list_tags { flex-direction: row; flex-wrap: wrap; gap: 5px; } .e-list__tag { padding: 5px 10px; border: 1px solid var(--edge); border-radius: 20px; background: var(--sunken); color: var(--ink-dim); font-size: 11.5px; font-weight: 600; transition: border-color .18s, color .18s, background .18s; } .e-list__tag:hover { border-color: var(--accent); background: rgba(255,147,0,.1); color: var(--accent-tx); } .bnr-240 { display: block; margin: 18px 0; } .bnr-240 img { display: block; width: 240px; max-width: 100%; height: auto; border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; transition: border-color .2s, box-shadow .2s; } .bnr-240:hover img { border-color: rgba(255,147,0,.5); box-shadow: 0 0 0 1px rgba(255,147,0,.12); } /* ------------------------------------------------------------ VIP promo -- */ .promo { margin: 18px 0; padding: 16px; border: 1px solid rgba(255,190,60,.45); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,204,77,.18), transparent 70%), var(--srf-2); box-shadow: var(--glow-gold); } .promo__ttl { display: flex; align-items: center; gap: 7px; font-family: "Oswald", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-tx); } .promo__ttl svg { width: 16px; height: 16px; } .promo__txt { margin: 8px 0 12px; font-size: 12px; line-height: 1.55; color: var(--ink-dim); } .promo__btn { width: 100%; } /* ================================================================== SEO == */ .seo { margin-bottom: 34px; padding: 26px 30px; border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--srf); } .seo__h1 { margin: 0 0 12px; font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 600; } .seo__h2 { margin: 24px 0 10px; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .04em; color: var(--accent-tx); } .seo__p { margin: 0 0 10px; max-width: 1000px; font-size: 13.5px; line-height: 1.75; color: var(--ink-dim); } .seo__p b { color: var(--ink); } .seo__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; } .seo__list li { position: relative; padding: 8px 12px 8px 32px; border: 1px solid var(--edge-soft); border-radius: var(--r-sm); background: var(--sunken); font-size: 13px; line-height: 1.55; color: var(--ink-dim); } .seo__list li::before { content: ""; position: absolute; left: 13px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .seo__list a { color: var(--accent-tx); text-decoration: none; font-weight: 600; } .seo__list a:hover { text-decoration: underline; } /* ============================================================== FOOTER == */ .footer { border-top: 1px solid var(--edge-soft); background: var(--sunken); } .footer__in { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-height: 72px; padding-top: 16px; padding-bottom: 16px; } .f-nav { display: flex; gap: 20px; flex-wrap: wrap; } .f-nav__link { font-size: 13px; color: var(--ink-dim); transition: color .18s; } .f-nav__link:hover { color: var(--accent-tx); } .copyr { margin-left: auto; font-size: 12.5px; color: var(--ink-mute); } /* ============================================================= OVERLAY == */ .overlay { position: fixed; inset: 0; z-index: 190; background: rgba(10,16,26,.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .overlay.is-visible { opacity: 1; visibility: visible; } /* ========================================================== RESPONSIVE == */ @media (max-width: 1360px) { .server { grid-template-columns: minmax(0,1fr) 62px 48px 68px 72px 0; gap: 8px; } .server__go { display: none; } } @media (max-width: 1180px) { :root { --sidebar-w: 232px; } .mid { grid-template-columns: minmax(0,1fr) var(--sidebar-w); } .side { display: none; } .side.is-active { display: block; } .switcher { display: flex; } .side > .ttl_theme_def { display: none; } } @media (max-width: 900px) { .hdr { position: static; margin-top: 12px; /* backdrop-filter would make .hdr the containing block for the fixed nav drawer, which then stretches the document horizontally */ backdrop-filter: none; -webkit-backdrop-filter: none; } .hdr__in { flex-wrap: wrap; height: auto; gap: 12px; padding-top: 11px; padding-bottom: 11px; } .burger { display: flex; } /* Own row: min-width:0 + flex-shrink would squash banners to 0px next to the off-screen 264px drawer and hide them on phones. */ .hdr__bnr { order: 5; flex: 0 0 100%; width: 100%; min-width: 100%; max-width: none; flex-direction: column; gap: 8px; } .hdr__bnr-slot { flex: 0 0 auto; width: 100%; max-width: none; } .hdr__nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; flex-direction: column; align-items: stretch; width: 264px; padding: 78px 18px 18px; border-left: 1px solid var(--edge); background: var(--drawer); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); } .hdr__nav.is-open { transform: translateX(0); } .btn, .icon-btn { width: 100%; } .mid { grid-template-columns: minmax(0,1fr); } /* the sidebar goes full width here, so lay its blocks out in a grid instead of one very tall column */ .sidebar { position: static; } .e-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .e-list_tags { display: flex; } .bnr-240, .promo { max-width: 300px; margin-left: auto; margin-right: auto; } } @media (max-width: 700px) { .container { padding: 0 12px; } .logo { font-size: 24px; } .logo__dom { display: none; } .server { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "main main reach" "rate chron date"; row-gap: 8px; column-gap: 10px; padding: 9px 12px 9px 30px; } .server_vip-2 { padding-left: 36px; } .server_vip-3 { padding-left: 46px; } .server__main { grid-area: main; } .server__reach { grid-area: reach; } .server__rate { grid-area: rate; } .server__chron { grid-area: chron; } .server__date { grid-area: date; } /* the row is two lines here, so pin the medallion to the first one */ .server__crown { top: calc(19px - var(--rank-size) / 2); margin-top: 0; } .server__reach { justify-self: end; align-self: start; } .server__rate { text-align: left; } .server__chron { text-align: center; align-self: center; } .server__date { text-align: right; align-self: center; } .server__go { display: none; } .server__rate, .server__chron, .server__date { padding-top: 8px; border-top: 1px solid var(--edge-soft); } .server__go { display: none; } /* the badge sits at the right edge here, so pin the tooltip instead of centering it */ .tip { left: auto; right: -8px; width: 210px; transform: translate(0, 6px); } .tip::after { left: auto; right: 22px; margin-left: 0; } .reach:hover .tip, .reach:focus-visible .tip, .reach.is-open .tip { transform: translate(0, 0); } .seo { padding: 20px 16px; } .seo__h1 { font-size: 19px; } .copyr { margin-left: 0; } .ph_tall { height: 250px; } } @media (prefers-reduced-motion: reduce) { .server_vip-3, .server_vip-3::after, .server_vip-3 .server__crown::before { animation: none; } }