/* Smokescreen website. Same tokens as the extension (popup.css): smoke silver = UI, FACEIT orange = blocking. */ @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: dark; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bg: #0a0c10; --surface: #11141a; --surface-2: #171b22; --surface-3: #1f242d; --border: #1e232b; --border-2: #2a303a; --text: #eef0f4; --text-2: #a4aab6; --muted: #6a7180; --brand: #e4e8ee; --brand-2: #f7f8fa; --brand-ink: #0b0d11; --brand-soft: rgba(220, 226, 236, .08); --brand-line: rgba(220, 226, 236, .42); --accent: #ff5500; --accent-2: #ff7a2e; --accent-text: #ff9a5c; --accent-soft: rgba(255, 85, 0, .10); --accent-line: rgba(255, 85, 0, .5); --info-text: #9db8ff; --info-soft: rgba(110, 150, 255, .14); --bad-text: #ff8a84; --bad-soft: rgba(248, 81, 73, .13); --good-text: #63d27b; --good-soft: rgba(63, 185, 80, .13); --lvl-1: #dddddd; --lvl-2: #47e36e; --lvl-4: #ffc800; --lvl-8: #ff6309; --lvl-10: #fe1f00; /* FACEIT's own (1-3: their help page) */ --r-lg: 16px; --r: 11px; --r-sm: 8px; --page: 1080px; --gutter: 16px; } * { box-sizing: border-box; } html { background: var(--bg); scrollbar-gutter: stable; } /* the header stays put whether or not a page scrolls */ body { margin: 0; font: 16px/1.6 var(--font); color: var(--text); -webkit-font-smoothing: antialiased; background: radial-gradient(900px 420px at 50% -160px, rgba(220, 226, 236, .07), transparent 72%) no-repeat, var(--bg); min-height: 100vh; display: flex; flex-direction: column; } [hidden] { display: none !important; } /* /app: the extension's full page fills the window under the header (dashboard.js) */ body.app-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } body.app-page main { display: flex; flex-direction: column; min-height: 0; overflow: auto; } .app-frame { flex: 1; display: block; width: 100%; border: 0; background: var(--bg); } /* The footer goes under a notice, the lock card or the Overview (dashboard.js / overview.js move it there); not under the framed full view. The smoke too, where the page doesn't draw its own. */ body.app-page > .site-foot { display: none; } #appMain > .site-foot { margin-top: auto; } body.app-page:has(.ov:not([hidden]), .app-frame:not([hidden])) > .smoke-bg { display: none; } .app-frame[hidden], .ov[hidden] { display: none; } /* /app tabs and the Overview (overview.js, extension 1.15.0+). The Overview itself is drawn with the extension's full-page classes inside .ui.full (ui.css); only the page-specific bits are here. */ .app-tabs { flex: none; padding: 10px 0; border-bottom: 1px solid var(--border); background: var(--bg); } .app-tabs .seg { height: 40px; } .ov { flex: 1; overflow: auto; } .ov .ui.full { min-height: 100%; background: transparent; } .ov .ov-lock-cta { margin-top: 12px; } /* /app is wider than the other pages (the dashboard needs room: the list and the player card side by side, as in the extension's full page, 1600 px): its header, update bar, footer and the Overview share that column, so their edges still line up. */ body.app-page .wrap { max-width: 1600px; } .ov .ui.full { --page: 1600px; --gutter: 32px; } .ui.full.ov-ui .list-head { margin-top: 0; } .ov-ui .ov-summary { margin: 0 0 14px; } .ov-ui .ov-contents { display: contents; } .ov .ui.full #detailCard { top: 16px; } /* overview.js placeCard() moves it */ .ui.ov-ui.ov-settings #layout { display: none; } /* over ui.css .ui.full #layout (loaded later) */ .ov-ui .ov-gear { margin-left: auto; } /* The save bar after the last card (the full page pulls it over the page's bottom padding with negative margins, which here hid the end of the last card), still sticky at the bottom. */ .ui.ov-ui .settings-wrap .save-bar { margin: 14px 0 0; border-radius: var(--r); } .ov-ui .ov-summary { display: flex; align-items: center; gap: 6px; } .ov-ui .ov-add { margin-bottom: 14px; } /* Under 760 px: the popup's compact layout (no .full), at the page's width. */ .ov .ui:not(.full) { width: auto; background: transparent; } .ov .ui:not(.full) main { padding: 14px 12px 32px; } .ov .ui:not(.full) .card + .card { margin-top: 12px; } .ov-ui .ov-summary { flex-wrap: wrap; row-gap: 2px; } .app-notice { max-width: 680px; } /* the install / update steps under the download button */ .install { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .install h4 { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .install-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 12px; } .install-steps li { counter-increment: step; position: relative; padding-left: 36px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; } .install-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface-3); box-shadow: 0 0 0 1px var(--border-2); } .install .muted { margin: 16px 0 0; line-height: 1.5; } .copy-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 1px 2px 1px 8px; vertical-align: middle; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); white-space: nowrap; } .copy-chip code { color: var(--text); overflow-wrap: normal; } .copy-chip button { padding: 4px 6px; box-shadow: none; background: transparent; } .copy-chip button svg { width: 15px; height: 15px; } @media (max-width: 480px) { .app-notice .page-actions .btn { flex: 1 1 100%; } } /* over the framed dashboard when a newer zip is published */ .update-bar { flex: none; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 0; } .update-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; } .update-row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); flex: 1 1 320px; } .update-row strong { color: var(--text); font-weight: 650; } .update-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .update-actions .btn, .update-actions button { font-size: 13px; padding: 7px 12px; } .update-actions button.later { padding: 7px 8px; } .update-bar .install { margin-top: 12px; padding-top: 12px; } ::selection { background: rgba(220, 226, 236, .28); } a { color: var(--text); } a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; } .wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } @media (min-width: 720px) { :root { --gutter: 32px; } } /* ---------- header ---------- */ .site-head { border-bottom: 1px solid var(--border); background: rgba(10, 12, 16, .72); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; } .site-head .wrap { max-width: calc(1080px + 2 * var(--gutter)); display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, #3a414d, #1a1e25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 18px rgba(220, 226, 236, .12); } .logo svg { width: 24px; height: 24px; fill: #fff; } .logo.big { width: 64px; height: 64px; border-radius: 18px; } .logo.big svg { width: 44px; height: 44px; } /* ---------- buttons ---------- */ .btn, button { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; border-radius: var(--r-sm); padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; color: var(--brand-ink); background: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 14px rgba(220, 226, 236, .14); transition: filter .12s; } .btn:hover, button:hover { filter: brightness(1.05); } .btn.secondary, button.secondary { background: var(--surface-3); color: var(--text); font-weight: 550; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px var(--border-2); } .btn.lg { font-size: 15px; padding: 13px 22px; border-radius: var(--r); } .btn svg, button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- account chip ---------- */ .account { display: flex; align-items: center; gap: 10px; min-height: 40px; } .chip { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-width: 0; } .chip-region { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .02em; color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); } .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22vw; } .navlink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 7px 10px; border-radius: var(--r-sm); } .navlink:hover, .navlink.on { color: var(--text); background: var(--surface-2); } .navlink svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .account .btn .short { display: none; } /* One login button per screen: when the page itself offers one (/app, My list, Explore, a shared list…), the header's goes. */ body:has(main a[href^="/auth/login"]) .account a[href^="/auth/login"] { display: none; } /* Very narrow phones: the logo alone, so the nav and the login button fit (the name is a bare text node). */ @media (max-width: 400px) { .brand { font-size: 0; gap: 0; } } @media (max-width: 560px) { .chip-name, .navlink span, .brand-name { display: none; } .navlink { padding: 8px; } .account .btn .long { display: none; } .account .btn .short { display: inline; } } .av { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-2); } .av.big { width: 56px; height: 56px; font-size: 22px; } .av.initial { background: hsl(var(--h) 30% 22%); color: hsl(var(--h) 70% 82%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } .account form { margin: 0; } .account button { padding: 7px 12px; font-size: 13px; } /* ---------- landing ---------- */ main { flex: 1; } html { scroll-behavior: smooth; } body.landing main { position: relative; overflow-x: clip; } .landing section { position: relative; z-index: 1; scroll-margin-top: 72px; } /* drifting smoke behind every page (silver = UI chrome), the same values as the extension's full page (popup.css). In each page's markup; not on /app (the framed extension draws its own). */ body { isolation: isolate; } .smoke-bg { position: fixed; inset: -10% -20%; pointer-events: none; filter: blur(60px); z-index: -1; } .smoke-bg i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(210, 216, 228, .10), transparent); will-change: transform; } .smoke-bg i:nth-child(1) { width: 60vmax; height: 40vmax; left: -5%; top: 0; animation: smoke1 40s ease-in-out infinite alternate; } .smoke-bg i:nth-child(2) { width: 50vmax; height: 45vmax; right: -5%; top: 25%; animation: smoke2 48s ease-in-out infinite alternate; } .smoke-bg i:nth-child(3) { width: 34vmax; height: 26vmax; left: 52%; top: 8%; background: radial-gradient(closest-side, rgba(255, 85, 0, .07), transparent); animation: smoke3 34s ease-in-out infinite alternate; } @keyframes smoke1 { to { transform: translate(14vw, 6vh) scale(1.12); } } @keyframes smoke2 { to { transform: translate(-16vw, -6vh) scale(.92); } } @keyframes smoke3 { to { transform: translate(-10vw, 8vh) scale(1.2); } } @media (prefers-reduced-motion: reduce) { .smoke-bg i { animation: none; } } .hero { padding: 64px var(--gutter) 56px; display: grid; gap: 48px; align-items: center; } @media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; padding-top: 96px; padding-bottom: 80px; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 5px 12px; border-radius: 99px; background: var(--brand-soft); border: 1px solid var(--border-2); } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } h1 { font-size: clamp(38px, 6.4vw, 64px); line-height: 1.04; letter-spacing: -.035em; margin: 20px 0 20px; font-weight: 800; text-wrap: balance; } h1 em { display: block; padding-bottom: .14em; margin-bottom: -.14em; font-style: normal; background: linear-gradient(90deg, var(--accent-2), var(--accent-text) 60%, #ffc29a); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { font-size: clamp(16px, 2vw, 18.5px); color: var(--text-2); max-width: 33em; margin: 0 0 30px; text-wrap: pretty; } .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } @media (max-width: 480px) { .hero .cta .btn { flex: 1 1 100%; } } .note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 14px; color: var(--muted); } .alert { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad-text); font-size: 14px; } /* the hero demo: the dashboard's block plan (overview.js ovPlan, ui.css) with made-up players, cycling (app.js heroDemo) */ .demo-wrap { position: relative; max-width: 560px; width: 100%; justify-self: center; } .demo-wrap::before { content: ''; position: absolute; inset: 8% -6% -4%; background: radial-gradient(closest-side, rgba(255, 85, 0, .16), transparent); filter: blur(30px); z-index: -1; } .ui.hero-demo { width: auto; background: transparent; font-size: 13px; } .ui.hero-demo #planCard { margin: 0; padding: 16px; border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 80px rgba(0, 0, 0, .55); } @media (min-width: 960px) { .ui.hero-demo #planCard { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); } } .ui.hero-demo .section-head { margin-bottom: 12px; } .ui.hero-demo .slot-card { cursor: default; } .ui.hero-demo .slot-card:hover { transform: none; } .ui.hero-demo .slot-card.demo-in { animation: demo-in .55s cubic-bezier(.2, .8, .2, 1) both; } @keyframes demo-in { from { opacity: 0; transform: translateY(8px) scale(.97); } } .ui.hero-demo #status { margin-top: 12px; } .ui.hero-demo .plan-side { margin-top: 4px; } .ui.hero-demo .side-title { margin-top: 12px; } .demo-tag { color: var(--muted); font-weight: 500; } .demo-foot { display: flex; align-items: center; gap: 10px; margin: 14px 4px 0; min-height: 40px; } .demo-live { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .demo-caption { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--text-2); text-wrap: pretty; } .demo-dots { display: flex; gap: 2px; flex: none; } .ui.hero-demo .demo-dot { width: 22px; height: 22px; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; } .ui.hero-demo .demo-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); transition: background .2s, transform .2s; } .ui.hero-demo .demo-dot:hover::before { background: var(--text-2); } .ui.hero-demo .demo-dot[aria-current="step"]::before { background: var(--accent); transform: scale(1.25); } .ui.hero-demo .demo-dot:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 1px; } @media (max-width: 520px) { .ui.hero-demo #planCard { padding: 12px; } .ui.hero-demo .slots { gap: 5px; } .ui.hero-demo .slot-sub { display: none; } } @media (prefers-reduced-motion: reduce) { .ui.hero-demo .slot-card.demo-in { animation: none; } } .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .tag.match { background: var(--info-soft); color: var(--info-text); } .tag.ban { background: var(--bad-soft); color: var(--bad-text); } .tag.wait { background: var(--surface-3); color: var(--text-2); } @media (max-width: 420px) { .drow { grid-template-columns: auto minmax(0, 1fr) 38px; } .dbar { display: none; } .demo { padding: 14px; } } section.block { padding: 72px 0; } section.block + section.block { border-top: 1px solid var(--border); } h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 10px; text-wrap: balance; } .sub { color: var(--text-2); margin: 0 0 36px; max-width: 40em; font-size: 16.5px; text-wrap: pretty; } .grid { display: grid; gap: 16px; } @media (min-width: 760px) { .grid.three { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; } .grid > .card + .card { margin-top: 0; } .card h3 { margin: 12px 0 6px; font-size: 17px; } .card p { margin: 0; color: var(--text-2); font-size: 15px; } /* icon tile, shared by steps, features and the welcome links */ .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--border-2); } .ic svg { width: 21px; height: 21px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .steps { display: grid; gap: 16px; counter-reset: step; } @media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface), rgba(17, 20, 26, .6)); border: 1px solid var(--border); } .step-head { display: flex; align-items: center; justify-content: space-between; } .step-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; } .step h3, .feat h3 { margin: 18px 0 6px; font-size: 17.5px; letter-spacing: -.01em; } .step p, .feat p { margin: 0; color: var(--text-2); font-size: 15px; text-wrap: pretty; } .features { display: grid; gap: 16px; } @media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .features { grid-template-columns: repeat(3, 1fr); } } .feat { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s, background .2s; } .feat:hover { border-color: var(--border-2); background: #13161d; transform: translateY(-2px); } /* party sync: text + a picture of pooled slots (app.js partyDemo) */ .kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } .party { display: grid; gap: 32px 56px; align-items: center; } @media (min-width: 960px) { .party { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .party .sub { margin-bottom: 24px; } .ui.party-demo { width: auto; background: transparent; } .ui.party-demo .pd-card { margin: 0; padding: 16px; border-radius: 18px; border-color: var(--border-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } .ui.party-demo .section-head { margin-bottom: 12px; } .pd-list { display: grid; gap: 8px; } .pd-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .pd-who { display: flex; flex-direction: column; min-width: 0; } .pd-who b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-set { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--good-text); } .pd-set .i { width: 12px; height: 12px; } .pd-picks { display: flex; } .pd-picks .av { --s: 30px; box-shadow: 0 0 0 2px var(--surface-2), inset 0 0 0 1px rgba(255, 85, 0, .45); } .pd-picks .av + .av { margin-left: -6px; } .pd-picks .av .lvl.mini { display: none; } .pd-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 2px; font-size: 12.5px; color: var(--muted); } .pd-foot b { color: var(--good-text); font-weight: 600; } @media (max-width: 480px) { .pd-member { grid-template-columns: auto minmax(0, 1fr); } .pd-picks { grid-column: 1 / -1; padding-left: 2px; } } /* FAQ */ .faq { max-width: 860px; } .faq h2 { margin-bottom: 24px; } .faq-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s; } .faq-item + .faq-item { margin-top: 10px; } .faq-item[open] { border-color: var(--border-2); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16.5px; font-weight: 600; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .faq-item[open] summary svg { transform: rotate(180deg); } .faq-item summary:focus-visible { outline: 2px solid var(--brand-line, #8a93a3); outline-offset: -2px; border-radius: var(--r-lg); } .faq-item p { margin: 0; padding: 0 22px 20px; color: var(--text-2); font-size: 15px; max-width: 46em; text-wrap: pretty; } .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 15.5px; } .checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--good-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .final { padding: 88px 0 104px; text-align: center; border-top: 1px solid var(--border); background: radial-gradient(700px 300px at 50% 100%, rgba(220, 226, 236, .07), transparent 70%); } .final .logo.big { margin: 0 auto 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 48px rgba(220, 226, 236, .18); } .final .sub { margin: 0 auto 28px; } /* the queue pulse: the level picks the color (status: good / neutral / critical), always with its icon and title, never color alone; the chart is match data, so FACEIT orange */ .pulse-section { padding-top: 40px; } .welcome .pulse-section { padding: 40px 0 0; } .pulse-card { --lv: var(--brand); --lv-soft: rgba(220, 226, 236, .10); position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--border-2); padding: 24px; background: radial-gradient(520px 260px at 0% 0%, var(--lv-soft), transparent 70%), linear-gradient(180deg, rgba(23, 27, 34, .92), rgba(16, 19, 25, .94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 70px rgba(0, 0, 0, .45); } @media (min-width: 720px) { .pulse-card { padding: 32px; } } .pulse-card.lv-calm { --lv: var(--good-text); --lv-soft: rgba(99, 210, 123, .10); } .pulse-card.lv-danger { --lv: var(--bad-text); --lv-soft: rgba(248, 81, 73, .14); } .pulse-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .pulse-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .pulse-region { padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); } .pulse-region:empty { display: none; } .pulse-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); } .pulse-kicker .live { width: 7px; height: 7px; border-radius: 50%; background: var(--lv); animation: pulse-live 2.4s ease-out infinite; } @keyframes pulse-live { 0% { box-shadow: 0 0 0 0 var(--lv-soft); opacity: 1; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } .pulse-updated { font-size: 13px; color: var(--muted); } .pulse-main { display: grid; gap: 24px; align-items: center; } @media (min-width: 900px) { .pulse-main { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; } } .pulse-status { display: flex; gap: 20px; align-items: flex-start; } .pulse-status h2 { margin: 2px 0 8px; font-size: clamp(24px, 3.4vw, 32px); } .pulse-status p { margin: 0; color: var(--text-2); font-size: 16px; max-width: 36em; text-wrap: pretty; } .pulse-orb { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--lv); background: radial-gradient(circle, var(--lv-soft), transparent 70%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lv) 45%, transparent); } .pulse-orb svg { position: relative; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pulse-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--lv); opacity: 0; animation: ring 3.2s ease-out infinite; } .pulse-orb i:nth-child(2) { animation-delay: 1.6s; } @keyframes ring { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.9); opacity: 0; } } .lv-calm .pulse-orb i { animation-duration: 5s; } .lv-danger .pulse-orb i { animation-duration: 1.8s; } @media (max-width: 560px) { .pulse-status { gap: 14px; } .pulse-orb { width: 42px; height: 42px; } .pulse-orb svg { width: 20px; height: 20px; } } /* The meter as an LED VU strip (app.js renderPulse): 16 segments in a recessed panel, green / amber / red at the real thresholds (calm under 0.7 of the usual, dangerous over 1.3: 35% and 65% of the strip), lit up to the value with a sweep on load. The lit LEDs light the card: each throws a bloom past the panel, and a wash in the level's LED colour spreads from the middle of the lit part (--gx) over the card around it, fading out before its box ends. */ .pulse-card { --led: #ffb42e; } .pulse-card.lv-calm { --led: #3cf07a; } .pulse-card.lv-danger { --led: #ff3b3b; } .pulse-meter { --gx: 50%; position: relative; isolation: isolate; } .pulse-meter::before { content: ""; position: absolute; left: var(--gx); top: 22px; width: 820px; height: 460px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--led) 24%, transparent), color-mix(in srgb, var(--led) 8%, transparent) 42%, transparent); } .vu-panel { padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, #07080b, #0c0f13); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .05); } .vu { display: flex; gap: 4px; } .vu i { --c: #ffb42e; flex: 1; height: 24px; border-radius: 3px; background: color-mix(in srgb, var(--c) 10%, #0b0d11); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), inset 0 0 0 1px color-mix(in srgb, var(--c) 12%, rgba(255, 255, 255, .03)); } .vu i.z-calm { --c: #3cf07a; } .vu i.z-danger { --c: #ff3b3b; } .vu i.on { position: relative; z-index: 1; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 25%, #fff) 0, var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000) 100%); box-shadow: 0 0 5px var(--c), 0 0 14px var(--c), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent), 0 0 46px color-mix(in srgb, var(--c) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); animation: vu-in .2s steps(1, end) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes vu-in { from { background: color-mix(in srgb, var(--c) 10%, #0b0d11); box-shadow: none; } } .vu-labels { display: grid; grid-template-columns: 35fr 30fr 35fr; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .vu-labels span { white-space: nowrap; } .vu-labels span:nth-child(2) { text-align: center; } .vu-labels span:nth-child(3) { text-align: right; } .vu-labels span.lit { color: var(--led); text-shadow: 0 0 12px color-mix(in srgb, var(--led) 65%, transparent); } .pulse-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 28px 0 0; border-radius: var(--r-lg); overflow: hidden; background: var(--border); border: 1px solid var(--border); } @media (min-width: 760px) { .pulse-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pstat { background: rgba(14, 17, 22, .92); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pstat b { font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pstat span { font-size: 13px; color: var(--text-2); line-height: 1.4; } .pulse-chart { margin-top: 26px; } .chart-box { color: var(--accent-2); } /* the gradients use currentColor */ .chart-box svg { display: block; width: 100%; height: auto; } .chart-box .area { fill: url(#pulseWash); } .chart-box .line { fill: none; stroke: url(#pulseFade); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-box .area-ahead { fill: url(#pulseAheadWash); } .chart-box .line-ahead { fill: none; stroke: url(#pulseAhead); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; } .chart-box .now-line { stroke: var(--text-2); stroke-width: 1; opacity: .18; } .chart-box .now-dot { fill: var(--accent-2); stroke: #12151b; stroke-width: 2.5; } .pulse-foot { margin: 16px 0 0; font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .pulse-orb i, .pulse-kicker .live, .vu i.on { animation: none; } } /* logged in: welcome + where to go */ .welcome { padding: 64px var(--gutter) 88px; } .me { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .me > div { min-width: 0; } .me p { margin: 2px 0 0; color: var(--text-2); } .welcome-title { font-size: clamp(28px, 4.4vw, 40px); margin: 0; letter-spacing: -.03em; overflow-wrap: anywhere; } .go-grid { display: grid; gap: 14px; margin-top: 8px; } @media (min-width: 640px) { .go-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .go-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } /* 3 or 4 shortcuts */ .go { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-decoration: none; transition: border-color .2s, transform .2s; } .go:hover { border-color: var(--border-2); transform: translateY(-2px); } .go .ic { margin-bottom: 10px; } .go b { font-size: 16px; } .go > span:last-child { color: var(--text-2); font-size: 14.5px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .smoke-bg i, .pulse, .dbar i { animation: none; } .feat, .go { transition: none; } .feat:hover, .go:hover { transform: none; } } /* ---------- app pages (connect, list, shared list) ---------- */ .page { padding: 48px var(--gutter) 72px; } .narrow { max-width: 640px; } .page-title { font-size: clamp(28px, 4.5vw, 38px); margin: 0 0 6px; } .page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .page-head .sub { margin: 0; } .page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .owner { display: flex; gap: 16px; align-items: center; min-width: 0; } .owner .page-title { overflow-wrap: anywhere; } .loading { color: var(--muted); padding: 24px 0; } .muted { color: var(--muted); font-size: 14px; } .msg { color: var(--text-2); font-size: 14px; margin: 10px 0 0; min-height: 1em; } .page-actions .msg { margin: 0; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .card + .card { margin-top: 16px; } .card.empty h3 { margin-top: 0; } .card .cta { margin-top: 18px; } .alert { overflow-wrap: anywhere; } .status { display: flex; gap: 14px; align-items: flex-start; } .status > svg { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); } .status strong { font-size: 17px; } .status p { margin: 4px 0 0; color: var(--text-2); font-size: 15px; } .status.ok > svg { color: var(--good-text); } .status.bad > svg { color: var(--bad-text); } .status + .status { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } button:disabled { opacity: .6; cursor: default; filter: none; } button.busy svg { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* share card */ .share-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; } .share h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; } .share h3 svg, .tag svg, .search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .share p { margin: 0; color: var(--text-2); font-size: 14px; } input[type="text"], input[type="search"] { font: inherit; font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 9px 12px; outline: none; } input[type="text"]:focus, input[type="search"]:focus { border-color: var(--brand-line); } .switch-wrap { flex: none; cursor: pointer; padding-top: 2px; } input.switch { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border-2); position: relative; cursor: pointer; transition: background .15s; margin: 0; } input.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background .15s; } input.switch:checked { background: var(--brand); border-color: var(--brand); } input.switch:checked::after { transform: translateX(18px); background: var(--brand-ink); } input.switch:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; } /* player list */ .search { position: relative; flex: 1 1 auto; max-width: 340px; display: flex; } .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search input { width: 100%; padding-left: 34px; } .plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } @media (min-width: 760px) { .plist { grid-template-columns: 1fr 1fr; column-gap: 16px; } } @media (min-width: 1040px) { .plist { grid-template-columns: 1fr 1fr 1fr; } } .prow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-sm); min-width: 0; } .prow:hover { background: var(--surface-2); } .prow.paused .prow-av, .prow.paused .prow-name { opacity: .55; } .prow-av { position: relative; flex: none; } .prow-av .av { width: 36px; height: 36px; } .prow-av .lvl { position: absolute; right: -4px; bottom: -4px; } .prow-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } .prow-name { font-weight: 600; font-size: 15px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.prow-name:hover { text-decoration: underline; } .prow-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Player rows: whole parts that wrap to a second line in a narrow row (common.js playerRow). */ .prow-sub.parts { white-space: normal; line-height: 1.35; } .prow-sub.parts > span { white-space: nowrap; } .prow-tags { flex: none; display: flex; align-items: center; gap: 8px; } .prow-action { display: flex; } .prow-action:empty { display: none; } .tag.listed { background: var(--accent-soft); color: var(--accent-text); } button.small { font-size: 13px; padding: 6px 10px; } button.small svg { width: 15px; height: 15px; } .tag { display: inline-flex; align-items: center; gap: 4px; } .tag svg { width: 12px; height: 12px; } /* FACEIT's level badge, as the extension's (popup.css; drawn by common.js levelArcSvg here, ui-icons.js levelArc on the dashboard): dark disc, horseshoe track, coloured arc, white number 6 px tall. */ .lvl { position: relative; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 8.25px; font-weight: 700; letter-spacing: -.03em; background: #111; color: #fff; } .lvl .lvl-arc { position: absolute; inset: 0; width: 100%; height: 100%; } .lvl .lvl-arc .trk { fill: rgba(205, 205, 205, .1); } .lvl .lvl-arc .arc { fill: var(--lc); } .lvl .lvl-n { position: relative; font-variant-numeric: normal; text-box: trim-both cap alphabetic; } .lvl.l1 { --lc: var(--lvl-1); } .lvl.l2 { --lc: var(--lvl-2); } .lvl.l4 { --lc: var(--lvl-4); } .lvl.l8 { --lc: var(--lvl-8); } .lvl.l10 { --lc: var(--lvl-10); } /* ---------- prose pages (privacy, terms) ---------- */ .prose { max-width: 720px; padding: 56px 0 72px; } .prose h1 { font-size: clamp(30px, 5vw, 40px); } .prose h2 { font-size: 20px; margin: 32px 0 8px; } .prose p, .prose li { color: var(--text-2); } .prose .updated { color: var(--muted); font-size: 14px; } /* ---------- footer ---------- */ .site-foot { border-top: 1px solid var(--border); padding: 28px 0; font-size: 14px; color: var(--muted); } .site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; } .site-foot nav { display: flex; gap: 20px; } .site-foot a { color: var(--text-2); text-decoration: none; } .site-foot a:hover { color: var(--text); } /* ---------- admin ---------- */ .card-title { margin: 0 0 6px; font-size: 17px; } .card > .muted { margin: 0 0 14px; } .tag.ok { background: var(--good-soft); color: var(--good-text); } .plist.one { grid-template-columns: 1fr; } .plist.one .prow { border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 8px; } .plist.one .prow:last-child { border-bottom: 0; } .approve { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .approve input[type="text"] { flex: 1 1 220px; min-width: 0; } .until { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; } input[type="date"] { font: inherit; font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 10px; color-scheme: dark; } /* my list: add form, visibility choice */ .share h3 svg { color: var(--text-2); } button.danger, .btn.danger { background: var(--bad-soft); color: var(--bad-text); box-shadow: inset 0 0 0 1px rgba(248, 81, 73, .35); } /* explore */ select { font: inherit; font-size: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 9px 10px; color-scheme: dark; } /* search + sort: one row, same height */ .seg { display: inline-flex; gap: 2px; padding: 3px; height: 44px; border-radius: var(--r); background: rgba(23, 27, 34, .85); border: 1px solid var(--border-2); } .seg button { height: 100%; padding: 0 14px; border-radius: 8px; background: none; box-shadow: none; color: var(--text-2); font-weight: 600; font-size: 13.5px; gap: 7px; } .seg button svg { width: 16px; height: 16px; } .seg button:hover { color: var(--text); filter: none; } .seg button.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--border-2); } .seg .short { display: none; } @media (max-width: 520px) { .seg { flex: 1 1 100%; } .seg button { flex: 1; } .seg .long { display: none; } .seg .short { display: inline; } } /* the list cards */ .face { --lc: var(--border-2); position: relative; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--lc), 0 0 0 4px #141820; } .face.l1 { --lc: var(--lvl-1); } .face.l2 { --lc: var(--lvl-2); } .face.l4 { --lc: var(--lvl-4); } .face.l8 { --lc: var(--lvl-8); } .face.l10 { --lc: var(--lvl-10); } .face .av { width: 30px; height: 30px; font-size: 12px; } .blocked-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .blocked-list li { display: flex; align-items: center; gap: 10px; min-width: 0; } .blocked-list .face { margin-left: 4px; flex: none; } .blocked-list .bl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); text-decoration: none; } .blocked-list .bl-name:hover { text-decoration: underline; } /* loading and empty */ .sk { display: block; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .08), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .ex-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 56px 16px; border: 1px dashed var(--border-2); border-radius: var(--r-lg); color: var(--text-2); } .ex-empty p { margin: 0; max-width: 30em; } @media (prefers-reduced-motion: reduce) { .sk { animation: none; } .pg-lcard, .pg-lc-foot .i { transition: none; } .pg-lcard:hover { transform: none; } } .more-row { justify-content: center; margin-top: 20px; } .more-row button[hidden] { display: none; } .mix-bar { display: flex; gap: 2px; height: 8px; } .mix-bar span { border-radius: 99px; min-width: 6px; } .mix-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .mix-legend span { display: inline-flex; align-items: center; gap: 5px; } .mix-legend i { width: 7px; height: 7px; border-radius: 50%; } .mix-bar .l1, .mix-legend .l1 { background: var(--lvl-1); } .mix-bar .l2, .mix-legend .l2 { background: var(--lvl-2); } .mix-bar .l4, .mix-legend .l4 { background: var(--lvl-4); } .mix-bar .l8, .mix-legend .l8 { background: var(--lvl-8); } .mix-bar .l10, .mix-legend .l10 { background: var(--lvl-10); } .ex-empty h2 { margin: 0; font-size: 20px; } /* A card title with something on the right (admin). */ .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .card-head .card-title { margin: 0; } /* ---------- /admin (admin.js) ---------- */ :root { --warn-text: #e8b64c; --warn-soft: rgba(232, 182, 76, .13); } .tag.warn { background: var(--warn-soft); color: var(--warn-text); } .adm-tabs { display: flex; gap: 4px; margin: -4px 0 22px; padding-bottom: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .adm-tabs::-webkit-scrollbar { display: none; } .adm-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 10px 12px 12px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; } .adm-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .adm-tab:hover, .adm-tab.on { color: var(--text); } .adm-tab.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -3px; height: 2px; border-radius: 2px; background: var(--brand); } .tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; } .tab-badge.warn { background: var(--warn-soft); color: var(--warn-text); } .tab-badge.bad { background: var(--bad-soft); color: var(--bad-text); } @media (max-width: 560px) { .adm-tab .tab-label { display: none; } .adm-tab.on .tab-label { display: inline; } } .adm-view { display: flex; flex-direction: column; gap: 16px; } .adm-view > .card + .card, .ov-col > .card + .card { margin-top: 0; } .adm-body > .stale { opacity: .55; pointer-events: none; transition: opacity .15s; } .tab-intro { margin: 0; } .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tab-acts { margin-top: -6px; } a.btn.small { font-size: 13px; padding: 6px 10px; } a.btn.small svg { width: 15px; height: 15px; } button.armed { box-shadow: inset 0 0 0 1.5px var(--bad-text); color: var(--bad-text); } .link-btn { background: none; box-shadow: none; padding: 0 2px; color: var(--text-2); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .link-btn:hover { color: var(--text); } code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } /* KPI tiles */ .kpis { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; background: var(--border); border: 1px solid var(--border); } @media (min-width: 720px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; background: var(--surface); text-decoration: none; min-width: 0; } a.kpi:hover { background: var(--surface-2); } .kpi-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .kpi b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .kpi-sub { font-size: 12.5px; color: var(--text-2); } .kpi.warn b { color: var(--warn-text); } .kpi.bad b { color: var(--bad-text); } .kpi.good b { color: var(--good-text); } .ov-grid { display: grid; gap: 16px; align-items: start; } @media (min-width: 900px) { .ov-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .ov-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .todo { list-style: none; margin: 8px 0 0; padding: 0; } .todo .prow { padding: 10px 4px; border-bottom: 1px solid var(--border); border-radius: 0; } .todo-more, .todo-issue { padding: 10px 4px; font-size: 14px; border-bottom: 1px solid var(--border); } .todo-issue { display: flex; align-items: center; gap: 10px; } .todo li:last-child { border-bottom: 0; } .todo-issue svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--warn-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .todo a { color: var(--text); } .card p.all-clear { display: flex; align-items: center; gap: 8px; color: var(--good-text); font-size: 14px; margin-top: 10px; } .all-clear svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .facts { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 7px 16px; margin: 4px 0 0; font-size: 13.5px; } .facts dt { color: var(--muted); } .facts dd { margin: 0; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; } .facts dd a { color: var(--text); } .facts.small { font-size: 12.5px; gap: 4px 14px; } @media (max-width: 420px) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: 8px; } } .loglist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; } .loglist li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .loglist li:last-child { border-bottom: 0; } .log-when { flex: none; width: 104px; color: var(--muted); } .log-what { min-width: 0; color: var(--text-2); overflow-wrap: anywhere; } .log-what b { color: var(--text); font-weight: 600; } .log-what a { color: var(--text); } @media (max-width: 480px) { .loglist li { flex-direction: column; gap: 0; } .log-when { width: auto; font-size: 12px; } } /* search, sort, filter chips, pages */ .adm-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .adm-tools .search { flex: 1 1 260px; max-width: none; } .sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-2); } .pill:hover { color: var(--text); filter: none; } .pill.on { background: var(--brand-soft); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--brand-line); } .pill-n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .pill.on .pill-n { color: var(--text-2); } .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 4px; font-size: 13px; } p.pager { display: block; text-align: center; margin: 10px 0 2px; } .list-card { padding: 8px 12px; } .list-card .ex-empty { border: 0; padding: 40px 16px; } /* rows that open a detail panel */ .adm-list .arow { flex-wrap: wrap; } .arow > .prow-main { cursor: pointer; border-radius: var(--r-sm); } .arow > .prow-main:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 4px; } .pick { width: 16px; height: 16px; flex: none; margin: 0; accent-color: #d6dbe3; cursor: pointer; } .pick-space { width: 16px; flex: none; } .chev { display: inline-flex; color: var(--muted); } .chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; transform: rotate(90deg); } .arow.open .chev svg { transform: rotate(-90deg); } .plist.one .arow.open { background: var(--surface-2); border-radius: var(--r-sm); } .prow-note { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; } .prow-note.bad { color: var(--bad-text); font-style: normal; } @media (max-width: 560px) { .adm-list .prow-tags { gap: 6px; } .adm-list .prow-tags .tag { max-width: 104px; overflow: hidden; text-overflow: ellipsis; } .adm-list .prow-tags .tag svg { display: none; } } .detail { flex: 1 0 100%; padding: 14px 4px 6px 64px; } @media (max-width: 720px) { .detail { padding-left: 0; } } .detail-grid { display: grid; gap: 4px 28px; } @media (min-width: 820px) { .detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } @media (max-width: 819px) { .detail-grid > div + div { margin-top: 16px; } } .detail-grid > div { min-width: 0; } .sub-block { margin-top: 16px; } .detail-grid > div > .sub-block:first-child { margin-top: 0; } .sub-block h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .detail .acts { margin-top: 12px; } .sub-block h4 + .acts { margin-top: 0; } .detail .mix-legend { margin-top: 6px; } .settings summary { cursor: pointer; font-size: 13px; color: var(--text-2); } .settings .facts { margin-top: 10px; } textarea { display: block; width: 100%; font: inherit; font-size: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 9px 11px; resize: vertical; min-height: 44px; } textarea:focus { outline: none; border-color: var(--brand-line); } .faces-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 0 4px; } .faces-row .face { margin-left: 0; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .uchip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--surface-3); font-size: 13px; font-weight: 600; text-decoration: none; max-width: 100%; } .uchip .av { width: 22px; height: 22px; font-size: 10px; } .uchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uchip.paused { opacity: .55; } .uchip:hover { background: var(--border-2); } /* the model's chances: match data, so FACEIT orange */ .chance { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); padding: 3px 0; } .chance-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; } .chance-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .chance b { text-align: right; color: var(--accent-text); font-variant-numeric: tabular-nums; } .card .chance + p.muted { margin-top: 8px; } .table-wrap { overflow-x: auto; } .mtable { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; } .mtable th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); } .mtable td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text-2); } .mtable tr:last-child td { border-bottom: 0; } .mtable .num, .mtable th:nth-child(2), .mtable th:nth-child(n+5) { text-align: right; } .mtable a { display: inline-flex; color: var(--muted); } .mtable a:hover { color: var(--text); } .ctable th:not(:first-child) { text-align: right; } .ctable tr.clickable { cursor: pointer; } .ctable tr.clickable:hover td { background: var(--surface-2); } .ctable .miss-row td { white-space: normal; background: var(--surface-2); } .miss-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .miss-list li { display: inline-flex; align-items: center; gap: 5px; } .mtable svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .res { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800; } .res.w { background: var(--good-soft); color: var(--good-text); } .res.l { background: var(--bad-soft); color: var(--bad-text); } /* bulk actions */ .bulk { position: sticky; bottom: 16px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: rgba(23, 27, 34, .96); border: 1px solid var(--border-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); } .bulk b { font-size: 14px; margin-right: auto; } .approve-card { padding: 0; } .approve-card summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; } .approve-card summary::-webkit-details-marker { display: none; } .approve-card summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; } .approve-card[open] summary svg { transform: rotate(45deg); } .approve-card summary .muted { font-weight: 400; font-size: 13px; } .approve-card .approve { padding: 0 18px 16px; } /* bar charts: one series in smoke silver; red marks = runs with errors */ .chart { position: relative; margin-top: 12px; } .chart-max { position: absolute; top: -4px; right: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .bars { position: relative; } .bars svg { display: block; width: 100%; overflow: visible; } .bars .grid { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; } .bars .bar { fill: var(--brand); opacity: .5; } .bars .bar.on { opacity: 1; } .bars .flag { fill: var(--bad-text); } .bars .hit { fill: transparent; } .chart-tip { position: absolute; top: -30px; transform: translateX(-50%); padding: 4px 9px; border-radius: 7px; background: var(--surface-3); border: 1px solid var(--border-2); font-size: 12px; color: var(--text); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); } .chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); } .card .chart-gap { margin-top: 22px; } /* refresher */ .status-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; } .status-main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; flex: 1 1 300px; } .status-main .card-title { font-size: 19px; } .status-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--muted); margin-top: 7px; } .good .status-dot, .party.live .status-dot { background: var(--good-text); box-shadow: 0 0 0 4px var(--good-soft); } .warn .status-dot { background: var(--warn-text); box-shadow: 0 0 0 4px var(--warn-soft); } .bad .status-dot { background: var(--bad-text); box-shadow: 0 0 0 4px var(--bad-soft); } .status-card.bad { border-color: rgba(248, 81, 73, .35); } .status-card.warn { border-color: rgba(232, 182, 76, .35); } .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .tier { display: flex; flex-direction: column; gap: 1px; padding: 12px; border-radius: var(--r); background: var(--surface-2); font-size: 13px; color: var(--text-2); min-width: 0; } .tier b { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; } .tier .muted { font-size: 12px; } .load { margin-top: 16px; } .load-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; color: var(--text-2); } .load-head b { color: var(--text); font-weight: 600; } .load-bar { height: 8px; margin: 8px 0 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; } .load-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); opacity: .7; } .load-bar.hot i { background: var(--warn-text); opacity: 1; } .plan-row { margin: 12px 0 10px; } .cf-check { margin-top: 12px; display: grid; gap: 8px; font-size: 13.5px; } .cf-check .muted { margin: 0; } .cf-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-2); } .cf-line .status-dot { margin-top: 0; } .cf-text { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; } .cf-line.warn .cf-text { color: var(--warn-text); } .cf-line.bad .cf-text { color: var(--bad-text); } .cf-subs summary { cursor: pointer; font-size: 12.5px; color: var(--muted); } .cf-subs ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); } .plan-seg { height: 38px; } .plan-calls { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); } .plan-calls[hidden] { display: none; } .plan-calls input { width: 84px; font: inherit; font-size: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 7px 9px; color-scheme: dark; } @media (max-width: 520px) { .plan-seg { flex: 1 1 100%; } } /* parties */ .party-grid { display: grid; gap: 16px; } @media (min-width: 820px) { .party-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .party-grid > .card + .card { margin-top: 0; } .party .card-title { display: flex; align-items: center; gap: 10px; } .party .status-dot { margin-top: 0; } .party-members { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 4px; } .party-members li { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-width: 0; } .party-members li.not-joined { opacity: .55; } .pm-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pm-name { font-weight: 600; font-size: 14px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-sub { font-size: 12.5px; color: var(--muted); } .adm-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r); background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); } .adm-toast.bad { color: var(--bad-text); border-color: rgba(248, 81, 73, .4); } .card p.cf-auto { margin: 0; font-size: 12.5px; } /* ---------- App pages in the dashboard's look (My list, Explore, shared lists) ---------- The dashboard is the app's main screen; these pages are drawn with its parts (ui.css, the extension's popup.css scoped to .ui: cards, section heads, buttons, inputs, .p rows, avatars with the level badge) inside a `.ui full pg-ui` wrapper, on the same 1600 px column, so moving between them changes the content, not the style. Only what the dashboard has no part for is here. */ body.ui-page .wrap { max-width: 1600px; } .ui.pg-ui { --page: 1600px; --gutter: 32px; background: transparent; } .ui.pg-ui .pg { max-width: var(--page); margin: 0 auto; padding: 22px var(--gutter) 40px; } @media (max-width: 1000px) { .ui.pg-ui { --gutter: 16px; } } .ui.pg-ui .loading { padding: 8px 2px; font-size: 12.5px; color: var(--muted); } .ui.pg-ui .alert { font-size: 12.5px; } /* page head: a compact title (the dashboard's scale), its subline, actions on the right */ .pg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 16px; } .pg-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .ui.pg-ui h1.pg-title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--text); text-wrap: balance; } .pg-sub { margin: 2px 0 0; font-size: 12px; color: var(--text-2); max-width: 64em; } .pg-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ui.pg-ui a.linkbtn { display: inline-flex; align-items: center; text-decoration: none; } .pg-back { margin: -8px 0 10px -5px; } /* links that look like the dashboard's buttons (its