:root { --clr-base: #0A0C10; --clr-panel: #12151C; --clr-panel-alt: #1A1F29; --clr-panel-hover: #1F2530; --clr-line: #232935; --clr-line-strong: #303847; --clr-brand: #E51B23; --clr-brand-soft: rgba(229,27,35,.14); --clr-brand-dark: #B31018; --clr-ink: #F3F5F8; --clr-ink-dim: #A2A9B5; --clr-ink-faint: #656D7A; --clr-ok: #3FDB93; --clr-code-bg: #0D0F14; --rad-sm: 6px; --rad-md: 10px; --rad-lg: 16px; --fx-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 28px rgba(0,0,0,.45); --fx-hover: 0 12px 34px rgba(229,27,35,.18); --ff-display: 'Lexend', sans-serif; --ff-body: 'Plus Jakarta Sans', sans-serif; --lay-sidebar: 240px; --lay-content-max: 820px; --lay-banner: 340px; /* Height of the theme's own fixed/sticky header — adjust this ONE value to match your theme so the sticky photo/TOC sidebar and right banner clear it instead of hiding underneath. */ --sticky-offset: 90px; } .blc-scope, .blc-scope *, .blc-scope *::before, .blc-scope *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Scoped to our own markup only (breadcrumbs + page shell) — never the theme's header/footer, which are siblings of .blc-scope inside the same and must keep the theme's own styling. */ .blc-scope { background: radial-gradient(900px 480px at 82% -6%, rgba(229,27,35,.10), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 34px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 34px), var(--clr-base); color: var(--clr-ink); font-family: var(--ff-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .pro-page-shell img { display: block; max-width: 100%; } /* Breadcrumbs */ .breadcrumbs { background: var(--clr-base); border-bottom: 1px solid var(--clr-line); padding: 12px 24px; } .breadcrumbs-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--clr-ink-faint); font-family: var(--ff-display); font-weight: 600; letter-spacing: .2px; } .breadcrumbs-inner a { color: var(--clr-ink-faint); text-decoration: none; } .breadcrumbs-inner a:hover { color: var(--clr-brand); } .breadcrumb-sep { opacity: .5; font-family: var(--ff-body); font-weight: 400; } /* Byline */ .credit-bar { margin-top: 8px; } .credit-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .credit-person { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--clr-ink-dim); } .credit-person strong { color: var(--clr-ink); font-weight: 600; } .credit-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--clr-panel-alt); } .credit-sep { width: 1px; height: 14px; background: var(--clr-line); } /* Page layout — left sidebar (photo/TOC) + main content + right banner rail */ .pro-page-shell { max-width: 1600px; margin: 0 auto; padding: 28px 24px 72px; display: grid; gap: 28px; grid-template-columns: 1fr; grid-template-areas: "toc" "main"; } @media (min-width: 861px) { .pro-page-shell { grid-template-columns: var(--lay-sidebar) minmax(0, 1fr); grid-template-areas: "toc main"; align-items: start; } } @media (min-width: 1440px) { .pro-page-shell { grid-template-columns: var(--lay-sidebar) minmax(0, var(--lay-content-max)) var(--lay-banner); grid-template-areas: "toc main banner"; justify-content: center; } } /* Sidebar */ aside.side-nav { grid-area: toc; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 861px) { aside.side-nav { position: sticky; top: var(--sticky-offset); max-height: calc(100vh - var(--sticky-offset) - 20px); overflow-y: auto; } .admin-bar aside.side-nav { top: calc(var(--sticky-offset) + 32px); max-height: calc(100vh - var(--sticky-offset) - 52px); } aside.side-nav::-webkit-scrollbar { width: 4px; } aside.side-nav::-webkit-scrollbar-thumb { background: var(--clr-line-strong); border-radius: 2px; } } .side-photo-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rad-lg); overflow: hidden; border: 1px solid var(--clr-line); box-shadow: var(--fx-card); background: repeating-linear-gradient(45deg, var(--clr-panel-alt) 0 10px, var(--clr-panel) 10px 20px); } .side-photo { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .side-photo-card .flag-chip { position: absolute; bottom: 10px; left: 10px; z-index: 2; } .side-nav-card { background: none; border: none; border-radius: 0; padding: 12px 0; box-shadow: none; position: relative; overflow: hidden; } .side-nav-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--clr-brand), transparent 75%); } .side-nav-card .side-nav-title { font-family: var(--ff-display); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--clr-ink-faint); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--clr-line); } .side-nav-card ul { list-style: none; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; } .side-nav-card ul li { position: relative; margin: 0; padding: 0; border: none; } .side-nav-card ul li a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--rad-sm); font-size: 12.5px; font-weight: 500; color: var(--clr-ink-dim); text-decoration: none; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s, border-color .15s; } .side-nav-card ul li a:hover, .side-nav-card ul li a.active { background: linear-gradient(90deg, rgba(229,27,35,.24), rgba(229,27,35,.05)); color: var(--clr-brand); border-color: var(--clr-brand); } .side-nav-card ul li a svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; } .side-nav-card ul li a:hover svg, .side-nav-card ul li a.active svg { opacity: 1; } /* Content column — single stack */ .pro-main { grid-area: main; display: flex; flex-direction: column; gap: 20px; min-width: 0; counter-reset: section-idx; } /* Right-rail promo banner (only present when Banner 3 is configured) */ .side-promo-rail { display: none; grid-area: banner; } @media (min-width: 1440px) { .side-promo-rail { display: block; position: sticky; top: var(--sticky-offset); } .admin-bar .side-promo-rail { top: calc(var(--sticky-offset) + 32px); } } .side-promo-rail-inner { position: relative; border-radius: var(--rad-lg); overflow: hidden; border: 1px solid var(--clr-line); box-shadow: var(--fx-card); } .side-promo-rail-inner::after { content: ''; position: absolute; inset: 0; border-radius: var(--rad-lg); box-shadow: inset 0 0 0 1px rgba(229,27,35,.4); pointer-events: none; } .side-promo-rail-inner img { width: 100%; height: auto; max-height: calc(100vh - var(--sticky-offset) - 20px); object-fit: cover; display: block; } /* Hero card — name, key facts, bio */ .pro-hero { padding: 24px 0 0; } .pro-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .pro-socials { display: flex; gap: 6px; flex-wrap: nowrap; flex-shrink: 0; } .pro-hero h1 { font-family: var(--ff-display); font-size: 32px; font-weight: 900; color: var(--clr-ink); letter-spacing: -1px; line-height: 1.05; } .pro-hero .pro-fullname { font-size: 14px; color: var(--clr-ink-dim); font-weight: 400; margin-top: 4px; } .fact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--clr-line); border: 1px solid var(--clr-line); border-radius: var(--rad-md); overflow: hidden; margin-bottom: 18px; } .fact-chip { background: var(--clr-panel-alt); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .fact-chip-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--clr-ink-faint); } .fact-chip-value { font-family: var(--ff-display); font-size: 16px; font-weight: 600; color: var(--clr-brand); display: flex; align-items: center; gap: 8px; } .fact-chip-value .fact-team-logo { width: 28px; height: 28px; flex-shrink: 0; background: #fff; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; } .fact-chip-value .fact-team-logo img { width: 22px; height: 22px; object-fit: contain; } .fact-chip-value .flag-icon { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; flex-shrink: 0; } @media (max-width: 640px) { .fact-strip { grid-template-columns: repeat(2, 1fr); } } .pro-bio { padding: 0 0 4px; font-size: 14px; color: var(--clr-ink-dim); line-height: 1.65; } .pro-settings-heading { font-family: var(--ff-display); font-size: 22px; font-weight: 800; color: var(--clr-ink); letter-spacing: -.3px; margin-top: 4px; } /* Section card */ .spec-block { background: none; border: none; border-radius: 0; overflow: hidden; box-shadow: none; position: relative; } .spec-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--clr-brand) 0%, rgba(229,27,35,.05) 55%, transparent 80%); opacity: .8; } .spec-block-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--clr-line); background: linear-gradient(90deg, rgba(229,27,35,.09), rgba(229,27,35,.02)); counter-increment: section-idx; } .spec-block-head::after { content: counter(section-idx, decimal-leading-zero); margin-left: auto; font-family: 'Courier New', monospace; font-size: 12px; color: var(--clr-line-strong); letter-spacing: 1px; } .spec-block-head .spec-icon { width: 46px; height: 46px; flex-shrink: 0; color: var(--clr-brand); display: flex; align-items: center; justify-content: center; background: var(--clr-brand-soft); border: none; border-radius: 0; } .spec-block-head .spec-icon svg { width: 26px; height: 26px; } .spec-block-head h2 { font-family: var(--ff-display); font-size: 19px; font-weight: 700; color: var(--clr-ink); letter-spacing: -.2px; margin: 0; } .spec-block-body { padding: 22px; } /* Settings table — rendered as a stat-card grid (not rows) */ .spec-grid { width: 100%; border-collapse: collapse; } .spec-grid tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .spec-grid tr { display: flex; flex-direction: column; gap: 6px; background: var(--clr-panel-alt); border: 1px solid var(--clr-line); border-radius: var(--rad-md); padding: 14px 16px; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; } .spec-grid tr::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 10px 10px; opacity: .6; } .spec-grid tr:hover { border-color: var(--clr-brand); transform: translateY(-2px); } .spec-grid td { display: block; padding: 0; border: none !important; background: transparent !important; width: auto; position: relative; z-index: 1; } .spec-grid td:first-child { font-size: 13.5px; color: var(--clr-ink-dim); font-weight: 500; order: 1; } .spec-grid td:last-child { font-size: 14px; font-weight: 600; color: var(--clr-ink); font-family: var(--ff-body); order: 2; text-align: left; } .spec-grid tr:hover td:last-child { color: var(--clr-brand); } /* H3 subsection labels */ .spec-subgroup { margin-top: 20px; } .spec-subgroup-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; } .spec-subgroup-label h3 { font-family: var(--ff-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--clr-brand); margin: 0; } /* Code / copyable fields */ .code-chip-wrap { margin-top: 16px; } .code-chip-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--clr-ink-faint); margin-bottom: 6px; } .code-chip { display: flex; align-items: stretch; border: 1px solid var(--clr-line); border-radius: var(--rad-sm); overflow: hidden; background: var(--clr-code-bg); position: relative; } .code-chip-text { flex: 1; padding: 14px; font-family: 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.8; color: #6FE8A6; word-break: break-all; white-space: pre-wrap; } .copy-trigger { display: flex; align-items: center; gap: 5px; padding: 0 14px; background: var(--clr-panel); border: none; border-left: 1px solid var(--clr-line); cursor: pointer; font-family: var(--ff-body); font-size: 12px; font-weight: 600; color: var(--clr-ink-dim); transition: background .15s, color .15s; white-space: nowrap; align-self: stretch; } .copy-trigger:hover { background: var(--clr-brand-soft); color: var(--clr-brand); } .copy-trigger.copied { color: var(--clr-ok); background: rgba(63,219,147,.16); } .copy-trigger svg { width: 14px; height: 14px; flex-shrink: 0; } /* Crosshair live preview */ .xhair-preview { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .xhair-preview-toolbar { display: flex; gap: 6px; } .xhair-zoom-btn { padding: 5px 12px; border: 1px solid var(--clr-line); background: var(--clr-panel-alt); color: var(--clr-ink-dim); border-radius: var(--rad-sm); font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--ff-display); transition: border-color .15s, color .15s, background .15s; } .xhair-zoom-btn.active, .xhair-zoom-btn:hover { border-color: var(--clr-brand); color: var(--clr-brand); background: var(--clr-brand-soft); } .xhair-stage { position: relative; width: 100%; height: 160px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px), var(--clr-code-bg); border: 1px solid var(--clr-line); border-radius: var(--rad-md); display: flex; align-items: center; justify-content: center; overflow: hidden; --xh-zoom: 1; } .xhair-render { position: relative; width: 100%; height: 100%; transform: scale(var(--xh-zoom)); transition: transform .2s; opacity: var(--xh-opacity, 1); } .xhair-line { position: absolute; background: var(--xh-color, #fff); left: 50%; top: 50%; box-shadow: var(--xh-outline, none); } .xhair-dot { position: absolute; left: 50%; top: 50%; width: var(--xh-thick); height: var(--xh-thick); background: var(--xh-color, #fff); border-radius: 1px; transform: translate(-50%, -50%); box-shadow: var(--xh-outline, none); display: none; } .xhair-render.xhair-has-dot .xhair-dot { display: block; } .xhair-top { width: var(--xh-thick); height: var(--xh-len); transform: translate(-50%, calc(-100% - var(--xh-gap))); } .xhair-bottom { width: var(--xh-thick); height: var(--xh-len); transform: translate(-50%, var(--xh-gap)); } .xhair-left { height: var(--xh-thick); width: var(--xh-len); transform: translate(calc(-100% - var(--xh-gap)), -50%); } .xhair-right { height: var(--xh-thick); width: var(--xh-len); transform: translate(var(--xh-gap), -50%); } .xhair-render.xhair-t-style .xhair-top { display: none; } /* Player socials */ .pro-social-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--clr-panel-alt); border: 1px solid var(--clr-line); transition: background .15s, border-color .15s, transform .15s; } .pro-social-link:hover { background: var(--clr-brand); border-color: var(--clr-brand); transform: translateY(-2px); } .pro-social-link svg { width: 16px; height: 16px; fill: var(--clr-ink-dim); transition: fill .15s; } .pro-social-link:hover svg { fill: #0A0C10; } .flag-chip { width: 28px; height: 20px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.4); } .flag-chip img { width: 100%; height: 100%; object-fit: cover; } /* Inline promo banner (banner 1 / banner 2) */ .partner-block { display: block; border-radius: var(--rad-md); overflow: hidden; border: 1px solid var(--clr-line); box-shadow: var(--fx-card); transition: opacity .2s; } .partner-block:hover { opacity: .92; } /* Skins grid */ .loadout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .loadout-card { border: 1px solid var(--clr-line); border-radius: var(--rad-md); overflow: hidden; background: var(--clr-panel-alt); transition: box-shadow .2s, transform .2s, border-color .2s; } .loadout-card:hover { box-shadow: var(--fx-hover); transform: translateY(-3px); border-color: var(--clr-line-strong); } .loadout-card > a { display: block; color: inherit; text-decoration: none; } .loadout-img { aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #1a1f29 0%, #10131a 100%); padding: 10px; } .loadout-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; } .loadout-card:hover .loadout-img img { transform: scale(1.05); } .loadout-info { padding: 8px 10px; } .loadout-name { font-size: 12px; font-weight: 600; color: var(--clr-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .loadout-card:hover .loadout-name { color: var(--clr-brand); } /* Teammates — large portrait cards */ .squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .squad-card { border: none; border-radius: 0; overflow: hidden; background: none; transition: transform .2s; } .squad-card:hover { transform: translateY(-3px); } .squad-card > a { display: block; color: inherit; text-decoration: none; } .squad-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--clr-panel-alt); border-bottom: 1px solid var(--clr-line); } .squad-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .squad-card:hover .squad-img img { transform: scale(1.05); } .squad-info { padding: 14px 2px 4px; display: flex; flex-direction: column; gap: 6px; } .squad-nick { font-family: var(--ff-display); font-size: 17px; font-weight: 700; color: var(--clr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; } .squad-card:hover .squad-nick { color: var(--clr-brand); } .squad-country { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--clr-ink-dim); padding-top: 6px; border-top: 1px solid var(--clr-line); } .squad-country img { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08); } /* FAQ — always open */ .qa-list { display: flex; flex-direction: column; } .qa-item { border-bottom: 1px solid var(--clr-line); } .qa-item:last-child { border-bottom: none; } .qa-question { padding: 14px 20px 0; } .qa-question h3 { font-family: var(--ff-display); font-size: 18px; font-weight: 600; color: var(--clr-ink); line-height: 1.3; margin: 0; } .qa-answer { padding: 8px 20px 16px; font-size: 14px; color: var(--clr-ink-dim); line-height: 1.65; } .qa-answer p { margin: 0 0 10px; } .qa-answer p:last-child { margin-bottom: 0; } /* Responsive */ @media (max-width: 860px) { .pro-page-shell { padding: 16px 16px 40px; } .side-photo-card { max-width: 220px; margin: 0 auto; } .pro-hero h1 { font-size: 27px; } .loadout-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .squad-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }