/* ============================================================ /administracija — public admin roster ------------------------------------------------------------ Everything below is scoped to `.admv-*`. The prefix is a leftover from an earlier variant-prototype phase; the winning V0 baseline (Stacked Sticker) was kept and the four variant designs + switcher were stripped. Rename would ripple through the razor markup + C# helpers for no visual gain, so we keep the prefix and just note the history here. Reads `--profile-tier-color` (r,g,b triplet) from the sibling `.profile-hero-tier-*` classes already defined in profile.css, so Owner / Developer / Manager palette stays consistent with the PlayerProfile hero. The four per-server sub-tiers (hadmin / sadmin / jadmin / tadmin) set their own tier colours via `.admv-tier-*` below. ============================================================ */ /* ---- Shared helpers ---- */ .admv-steam-link { color: rgba(255, 255, 255, 0.55); transition: color 0.15s ease, transform 0.15s ease; text-decoration: none; position: relative; z-index: 3; line-height: 1; } .admv-steam-link:hover { color: rgb(var(--profile-tier-color, 13, 202, 240)); transform: scale(1.15); } /* ============================================================ Admin-scoped per-server sub-tier palette (hadmin/sadmin/jadmin/tadmin) ------------------------------------------------------------ Owner / Developer / Manager keep reading their shared `profile-hero-tier-*` classes from profile.css (colours shared with PlayerProfile). The four per-server sub-tiers below get their own scoped `.admv-tier-*` classes so they can be tuned without touching profile.css. The V0 baseline card reads `--profile-tier-color` for borders / rings / badges / gradients, so setting it here propagates through the whole card. Hierarchy from top → bottom of sub-tier authority: hadmin — dark saturated red sadmin — soft pink leaning slightly red jadmin — warm mid-orange tadmin — bright lime (yellow-green) ============================================================ */ .admv-tier-hadmin { --profile-tier-color: 199, 48, 55; } /* #c73037 */ .admv-tier-sadmin { --profile-tier-color: 215, 92, 135; } /* #d75c87 */ .admv-tier-jadmin { --profile-tier-color: 255, 148, 51; } /* #ff9433 */ .admv-tier-tadmin { --profile-tier-color: 168, 255, 94; } /* #a8ff5e */ /* Admin-scoped avatar ring + badge modifiers — parity with the shared `profile-hero-avatar-*` and `profile-vip-badge-*` visual weight, but consume `--profile-tier-color` so they auto-follow whichever `.admv-tier-*` class is set on an ancestor. Kept available for any future consumer that wants the shared profile-hero look with per-server tier colouring. */ .admv-tier-avatar { border-color: rgba(var(--profile-tier-color), 0.5); box-shadow: 0 0 16px rgba(var(--profile-tier-color), 0.2), inset 0 0 0 1px rgba(15, 22, 33, 0.85); } .admv-tier-badge { border-color: rgba(var(--profile-tier-color), 0.6); background: linear-gradient(135deg, rgba(var(--profile-tier-color), 0.28) 0%, rgba(var(--profile-tier-color), 0.1) 100%); box-shadow: 0 0 20px rgba(var(--profile-tier-color), 0.2); } /* ============================================================ Section shelf wrapper ------------------------------------------------------------ Applied as `glass-card admv-section rounded-4 p-3 p-md-4 mb-4` around every major section (Owner / Devs / Managers / each per-server section). Neutralises the default `.glass-card:hover` cyan glow so the container reads as a passive shelf holding the denser admin cards; the cards do all the interactive lifting. ============================================================ */ .admv-section:hover { /* Restore the resting state of `.glass-card` (see app.css) so mousing over the inner grid doesn't light up the whole shelf. */ border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); } /* ============================================================ Baseline admin card (Stacked Sticker) ------------------------------------------------------------ Circular avatar medallion escapes the top edge of the card via negative margin. Layered shadows + tier-glow intensification on hover give a collectible-pin depth cue (no 3D tilt — reads flatter and calmer). SteamID64 removed — a tiny fa-steam link stays pinned top-right for external Steam profile access. Markup structure: three flat sibling s inside .admv-base-wrap — a medallion , a card (both to /profile/{steamId}), and the Steam . No stretched-link (medallion visually escapes the card's box and a stretched-link inside the card wouldn't cover it, breaking the "clickable avatar" affordance). ============================================================ */ .admv-base-wrap { position: relative; padding-top: 1.9rem; /* leaves room for the escaping medallion */ height: 100%; } .admv-base-medallion { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3.6rem; height: 3.6rem; z-index: 3; border-radius: 50%; overflow: hidden; background: rgba(15, 22, 33, 0.95); border: 3px solid rgb(var(--profile-tier-color, 13, 202, 240)); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(var(--profile-tier-color, 13, 202, 240), 0.55); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; } .admv-base-medallion img { width: 100%; height: 100%; object-fit: cover; } .admv-base-medallion-placeholder i { font-size: 1.25rem; } .admv-base-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 2.35rem 0.55rem 0.75rem; /* top clears the medallion overlap */ height: 100%; text-decoration: none; color: #fff; background: radial-gradient(circle at 50% 0%, rgba(var(--profile-tier-color, 13, 202, 240), 0.28) 0%, rgba(var(--profile-tier-color, 13, 202, 240), 0.05) 45%, rgba(15, 22, 33, 0.94) 90%), rgba(15, 22, 33, 0.94); border: 1px solid rgba(var(--profile-tier-color, 13, 202, 240), 0.35); border-radius: var(--bs-border-radius-xl); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 22px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.25s ease; } .admv-base-card:hover { color: #fff; } .admv-base-wrap:hover .admv-base-card { transform: translateY(-3px); border-color: rgba(var(--profile-tier-color, 13, 202, 240), 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 18px 32px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 24px rgba(var(--profile-tier-color, 13, 202, 240), 0.35); } .admv-base-wrap:hover .admv-base-medallion { transform: translateX(-50%) translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55), 0 0 20px rgba(var(--profile-tier-color, 13, 202, 240), 0.75); } .admv-base-name { max-width: 100%; color: #fff; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .admv-base-role { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(var(--profile-tier-color, 13, 202, 240), 0.22); border: 1px solid rgba(var(--profile-tier-color, 13, 202, 240), 0.5); color: #fff; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .admv-base-steam { position: absolute; /* Wrap has `padding-top: 1.9rem` for the medallion; offset another 0.45rem down so the Steam pill sits at the top-right of the card itself, not floating in the medallion's padding zone. */ top: 2.35rem; right: 0.55rem; z-index: 4; padding: 0.15rem 0.35rem; border-radius: 999px; background: rgba(15, 22, 33, 0.7); }