/* ═══════════════════════════════════════════════════════════
ONE WAY — ONYX ENGINE v4.0 CSS
Professional eSports Clan Hub • Dark/Light Mode
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ── Theme Variables ── */
:root, [data-theme="dark"] {
--ow-bg: #0a0a0f;
--ow-bg-alt: #111118;
--ow-surface: #16161f;
--ow-surface-hover: #1e1e2a;
--ow-surface-active: #252535;
--ow-border: rgba(255,255,255,0.06);
--ow-border-hover: rgba(255,255,255,0.12);
--ow-text: #f0f0f5;
--ow-text-dim: #9595a8;
--ow-text-muted: #55556a;
--ow-accent: #3b82f6;
--ow-accent-dim: rgba(59,130,246,0.15);
--ow-gold: #f59e0b;
--ow-silver: #94a3b8;
--ow-bronze: #d97706;
--ow-green: #10b981;
--ow-red: #ef4444;
--ow-purple: #8b5cf6;
--ow-glass: rgba(16,16,30,0.85);
--ow-glass-border: rgba(255,255,255,0.08);
--ow-shadow: 0 8px 32px rgba(0,0,0,0.4);
--ow-shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
--ow-radius: 16px;
--ow-radius-sm: 10px;
--ow-radius-xs: 6px;
--ow-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--ow-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
--ow-modal-bg: rgba(0,0,0,0.7);
--ow-modal-surface: #16161f;
}
[data-theme="light"] {
--ow-bg: #f5f5f7;
--ow-bg-alt: #ebebef;
--ow-surface: #ffffff;
--ow-surface-hover: #f0f0f5;
--ow-surface-active: #e5e5ea;
--ow-border: rgba(0,0,0,0.08);
--ow-border-hover: rgba(0,0,0,0.15);
--ow-text: #1a1a2e;
--ow-text-dim: #4a4a60;
--ow-text-muted: #6b6b85;
--ow-accent: #2563eb;
--ow-accent-dim: rgba(37,99,235,0.1);
--ow-glass: rgba(255,255,255,0.9);
--ow-glass-border: rgba(0,0,0,0.06);
--ow-shadow: 0 4px 20px rgba(0,0,0,0.08);
--ow-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--ow-modal-bg: rgba(0,0,0,0.4);
--ow-modal-surface: #ffffff;
}
/* ── Base Reset ── */
.ow-clan-hub {
font-family: var(--ow-font);
background: var(--ow-bg);
color: var(--ow-text);
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.ow-clan-hub * { box-sizing: border-box; margin: 0; padding: 0; }
.ow-clan-hub img { max-width: 100%; }
/* ── Animations ── */
@keyframes owSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes owFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes owPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes owShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes owSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes owScaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.animate-slide-up {
animation: owSlideUp 0.5s ease-out forwards;
opacity: 0;
}
.animate-fade-in {
animation: owFadeIn 0.3s ease-out forwards;
}
.animate-scale-in {
animation: owScaleIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
/* ── Loader ── */
.onyx-loader {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.onyx-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--ow-border);
border-top-color: var(--ow-accent);
border-radius: 50%;
animation: owSpin 0.8s linear infinite;
}
/* ── Text Utilities ── */
.text-gradient {
background: linear-gradient(135deg, var(--ow-text) 0%, var(--ow-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ══════════════════════════════════════
DIRECTORY VIEW (Ranking / Podium)
══════════════════════════════════════ */
.ow-directory-hero {
text-align: center;
padding: 80px 20px 60px;
border-bottom: 1px solid var(--ow-border);
}
.ow-directory-hero h1 {
font-family: var(--ow-font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.ow-directory-hero p {
color: var(--ow-text-dim);
font-size: 1.15rem;
max-width: 600px;
margin: 0 auto;
font-weight: 500;
}
/* HUB-BADGES (2026-05-17): badge row sits over the clan banner — needs its
own dark glass backdrop so the chips read on white/light banners. User
reported "COMUNIDAD como legible dependiendo el fondo banner... si es color
blanco se ve feo y poco legible". */
.ow-hub-badges {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding: 4px 8px;
background: rgba(15, 17, 25, 0.55);
border-radius: 22px;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
[data-theme="light"] .ow-hub-badges {
background: rgba(15, 17, 25, 0.45);
}
/* Badge */
.ow-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(59,130,246,0.18);
color: #c7dafe;
border: 1px solid rgba(199,218,254,0.35);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ow-badge-official {
background: linear-gradient(135deg, rgba(245,158,11,0.28), rgba(245,158,11,0.10));
color: #fde68a;
border-color: rgba(253,230,138,0.45);
}
.ow-badge-top {
background: linear-gradient(135deg, rgba(236,72,153,0.30), rgba(124,92,255,0.16));
color: #ffe8f4;
border-color: rgba(255,232,244,0.5);
box-shadow: 0 0 14px rgba(236,72,153,0.25);
}
/* Podium */
.esports-podium {
display: flex;
align-items: stretch;
justify-content: center;
gap: 24px;
padding: 40px 0;
max-width: 1000px;
margin: 0 auto;
}
.esports-podium > div {
flex: 1;
max-width: 320px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.esports-podium > div:hover { transform: translateY(-10px) scale(1.02); }
.podium-card {
position: relative;
background: var(--ow-surface);
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
height: auto;
max-width: 340px; /* Prevent over-expansion */
}
.podium-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.05);
pointer-events: none;
}
.podium-banner {
width: 100%;
height: 140px;
object-fit: cover;
filter: brightness(0.7);
background: var(--ow-bg-alt);
}
.podium-logo-floating {
width: 84px;
height: 84px;
border-radius: 22px; /* iOS Squircle-ish */
border: 4px solid var(--ow-surface);
background: var(--ow-surface);
object-fit: cover;
margin: -42px auto 0;
position: relative;
z-index: 2;
box-shadow: var(--ow-shadow-lg);
}
.rank-1 .podium-banner { height: 160px; filter: brightness(0.85); }
.rank-1 .podium-card { border-color: rgba(245,158,11,0.2); }
.rank-1 .podium-logo-floating { width: 100px; height: 100px; margin-top: -50px; border-color: var(--ow-gold); }
.podium-body {
padding: 16px 20px 24px;
text-align: center;
}
.podium-rank {
font-size: 2.4rem;
font-weight: 800;
margin-bottom: 4px;
letter-spacing: -0.02em;
}
/* Leaderboard Rows */
.esports-leaderboard { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.leaderboard-row {
display: grid;
grid-template-columns: 60px 48px 1fr 120px 100px 120px;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 18px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
backdrop-filter: blur(10px);
}
.leaderboard-row:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.15);
transform: scale(1.01);
}
.lb-rank { font-size: 1.4rem; font-weight: 800; color: var(--ow-text-muted); opacity: 0.5; }
.lb-logo { width: 44px; height: 44px; flex-shrink: 0; }
.lb-logo img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); }
/* Apple-style Premium Button */
.btn-apple {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-apple:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.btn-apple:active { transform: scale(0.96); }
.btn-apple-glow {
background: var(--ow-accent);
border: none;
box-shadow: 0 4px 20px rgba(59,130,246,0.5);
}
.btn-apple-glow:hover {
box-shadow: 0 8px 30px rgba(59,130,246,0.7);
}
/* ══════════════════════════════════════
CLAN HUB DETAIL VIEW
══════════════════════════════════════ */
/* Hero Banner */
.ow-hub-banner {
position: relative;
height: 50vh;
min-height: 320px;
max-height: 500px;
overflow: hidden;
}
.ow-hub-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.6);
transform: scale(1.05);
}
.ow-hub-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--ow-bg) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
/* FIX MOBILE-NAV-01: this element used to be centered with the classic
`left:50%; transform: translateX(-50%)` pattern, but the same element
also has the `.animate-slide-up` class. The slideUp keyframe ends with
`transform: translateY(0)` which COMPLETELY OVERRIDES the centering
transform — so the element ended up positioned at left:50% with zero
horizontal translation, pushing the entire clan header off the right
edge of the viewport (clan name "ONE WAY |" got cut off, description
truncated, etc.). Switching to the `left:0; right:0; margin:0 auto`
centering pattern doesn't depend on transform, so the animation can
own transform exclusively. */
.ow-hub-banner-content {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
max-width: 1320px;
padding: 0 40px;
display: flex;
align-items: flex-end;
gap: 32px;
box-sizing: border-box;
}
.ow-hub-logo {
width: 140px;
height: 140px;
border-radius: 28px;
border: 3px solid var(--ow-glass-border);
box-shadow: var(--ow-shadow-lg);
object-fit: cover;
flex-shrink: 0;
}
.ow-hub-info { flex: 1; padding-bottom: 8px; }
.ow-hub-info h1 {
font-family: var(--ow-font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin-bottom: 8px;
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.ow-hub-info p {
font-size: 1.1rem;
color: rgba(255,255,255,0.7);
max-width: 600px;
font-weight: 500;
}
/* Back Button */
.ow-back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--ow-glass);
border: 1px solid var(--ow-glass-border);
border-radius: var(--ow-radius-sm);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
backdrop-filter: blur(12px);
flex-shrink: 0;
margin-bottom: 16px;
}
.ow-back-btn:hover { background: rgba(255,255,255,0.15); }
/* Tab Navigation */
.ow-hub-tabs {
position: sticky;
top: 0;
z-index: 100;
background: var(--ow-bg-alt);
border-bottom: 1px solid var(--ow-border);
backdrop-filter: blur(12px);
}
.ow-hub-tabs-inner {
max-width: 1320px;
margin: 0 auto;
/* TAB-OVERFLOW-FIX (2026-05-17): user reported last tab "Hall of Shame"
gets cut off at the right edge. Bumped right padding so the last
tab has breathing room even at narrow viewports + smoother scroll. */
padding: 0 56px 0 40px;
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.ow-hub-tabs-inner::-webkit-scrollbar { display: none; }
/* Visual hint that the tab nav scrolls — a soft fade on the right edge */
.ow-hub-tabs {
position: sticky;
top: var(--ow-nav-height, 76px);
z-index: 40;
}
.ow-hub-tabs::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 40px;
background: linear-gradient(to left, var(--ow-bg-alt, #111118), transparent);
pointer-events: none;
z-index: 1;
}
/* V28 TABS-POLISH (2026-05-18): per-tab accent via --tab-c, gradient
active underline, soft hover lift + colored glow, icon + label split.
--tab-c defaults to --ow-accent if not set on the button. */
.ow-tab-btn {
--tab-c: var(--ow-accent);
background: none;
border: none;
padding: 14px 18px 12px;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--ow-text-muted);
cursor: pointer;
white-space: nowrap;
transition: color 0.25s cubic-bezier(0.16,1,0.3,1),
transform 0.25s cubic-bezier(0.16,1,0.3,1),
background 0.25s ease;
border-bottom: 2px solid transparent;
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 10px 10px 0 0;
isolation: isolate;
}
.ow-tab-btn .ow-tab-ico {
font-size: 1.05rem;
line-height: 1;
filter: grayscale(0.45) brightness(0.85);
transition: filter 0.25s cubic-bezier(0.16,1,0.3,1),
transform 0.25s cubic-bezier(0.16,1,0.3,1);
display: inline-block;
}
.ow-tab-btn .ow-tab-lbl { position: relative; z-index: 1; }
/* Soft per-tab tint sliding in on hover */
.ow-tab-btn::before {
content: '';
position: absolute;
inset: 4px 4px 6px;
border-radius: 8px;
background: color-mix(in srgb, var(--tab-c) 12%, transparent);
opacity: 0;
transform: scale(0.92);
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
z-index: 0;
}
.ow-tab-btn:hover:not(.active) { color: var(--ow-text); transform: translateY(-1px); }
.ow-tab-btn:hover .ow-tab-ico { filter: grayscale(0) brightness(1.1); transform: scale(1.1) rotate(-3deg); }
.ow-tab-btn:hover::before { opacity: 1; transform: scale(1); }
/* Active tab: full color, gradient underline, soft glow */
.ow-tab-btn.active { color: var(--tab-c); border-bottom-color: transparent; }
.ow-tab-btn.active .ow-tab-ico { filter: none; transform: scale(1.08); }
.ow-tab-btn.active::before {
opacity: 1;
transform: scale(1);
background: color-mix(in srgb, var(--tab-c) 16%, transparent);
}
.ow-tab-btn.active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 3px;
border-radius: 3px 3px 0 0;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--tab-c) 40%, transparent),
var(--tab-c) 50%,
color-mix(in srgb, var(--tab-c) 40%, transparent)
);
box-shadow:
0 0 12px color-mix(in srgb, var(--tab-c) 55%, transparent),
0 0 2px color-mix(in srgb, var(--tab-c) 90%, transparent);
animation: owTabUnderline 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes owTabUnderline {
from { transform: scaleX(0.4); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
/* Browsers without color-mix: fallback to lighter rgba tint */
@supports not (background: color-mix(in srgb, red, blue)) {
.ow-tab-btn::before { background: rgba(255,255,255,0.05); }
.ow-tab-btn.active::before { background: rgba(255,255,255,0.08); }
.ow-tab-btn.active::after {
background: var(--tab-c);
box-shadow: 0 0 12px var(--tab-c);
}
}
/* Small viewports: trim padding so more tabs fit */
@media (max-width: 720px) {
.ow-tab-btn { padding: 12px 12px 10px; font-size: 0.78rem; gap: 6px; }
.ow-tab-btn .ow-tab-ico { font-size: 0.95rem; }
}
/* Tab Content */
.ow-tab-content {
max-width: 1320px;
margin: 0 auto;
padding: 40px;
min-height: 50vh;
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* ── Stat Cards ── */
.ow-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.ow-stat-card {
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius);
padding: 24px;
transition: all 0.2s;
}
.ow-stat-card:hover {
border-color: var(--ow-border-hover);
box-shadow: var(--ow-shadow);
}
.ow-stat-card .label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ow-text-muted);
margin-bottom: 8px;
}
.ow-stat-card .value {
font-size: 2rem;
font-weight: 900;
color: var(--ow-text);
letter-spacing: -0.03em;
}
.ow-stat-card.accent .value { color: var(--ow-accent); }
/* ── Section Card ── */
.ow-section-card {
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius);
padding: 32px;
margin-bottom: 24px;
}
.ow-section-card h2 {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
/* ══════════════════════════════════════
MEMBER DIRECTORY
══════════════════════════════════════ */
/* Search & Filters */
.ow-search-bar {
display: flex;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.ow-search-input {
flex: 1;
min-width: 200px;
padding: 12px 18px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius-sm);
color: var(--ow-text);
font-size: 0.9rem;
font-family: var(--ow-font);
font-weight: 500;
outline: none;
transition: all 0.2s;
}
.ow-search-input::placeholder { color: var(--ow-text-muted); }
.ow-search-input:focus { border-color: var(--ow-accent); box-shadow: 0 0 0 3px var(--ow-accent-dim); }
.ow-filter-btn {
padding: 10px 18px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius-sm);
color: var(--ow-text-dim);
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.ow-filter-btn:hover { border-color: var(--ow-border-hover); color: var(--ow-text); }
.ow-filter-btn.active {
background: var(--ow-accent-dim);
border-color: var(--ow-accent);
color: var(--ow-accent);
}
.ow-sort-select {
padding: 10px 16px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius-sm);
color: var(--ow-text);
font-size: 0.8rem;
font-weight: 600;
font-family: var(--ow-font);
cursor: pointer;
outline: none;
}
/* Member Grid */
.ow-member-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.ow-member-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius-sm);
cursor: pointer;
transition: all 0.2s;
}
.ow-member-card:hover {
background: var(--ow-surface-hover);
border-color: var(--ow-border-hover);
transform: translateY(-2px);
box-shadow: var(--ow-shadow);
}
.ow-member-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--ow-border);
flex-shrink: 0;
}
.ow-member-info { flex: 1; min-width: 0; }
.ow-member-name {
font-weight: 700;
font-size: 0.9rem;
color: var(--ow-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ow-member-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 0.75rem;
color: var(--ow-text-muted);
font-weight: 600;
}
.ow-member-kills {
font-weight: 800;
color: var(--ow-accent);
font-size: 0.85rem;
white-space: nowrap;
}
/* Phase badges */
.ow-phase-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.05em;
}
.ow-phase-badge.p1 { background: linear-gradient(135deg,#10b981,#059669); color: #fff; }
.ow-phase-badge.p2 { background: linear-gradient(135deg,#3b82f6,#1d4ed8); color: #fff; }
.ow-phase-badge.p3 { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; }
.ow-phase-badge.p4 { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.ow-phase-badge.p5 { background: linear-gradient(135deg,#ef4444,#b91c1c); color: #fff; }
/* Pagination */
.ow-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--ow-border);
}
.ow-page-btn {
padding: 8px 16px;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius-xs);
color: var(--ow-text-dim);
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.ow-page-btn:hover { border-color: var(--ow-accent); color: var(--ow-accent); }
.ow-page-btn.active { background: var(--ow-accent); color: #fff; border-color: var(--ow-accent); }
.ow-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ow-page-info { font-size: 0.8rem; color: var(--ow-text-muted); font-weight: 600; padding: 0 12px; }
/* ══════════════════════════════════════
USER PROFILE MODAL
══════════════════════════════════════ */
.ow-modal-overlay,
.ow-modal-overlay * { box-sizing: border-box; }
.ow-modal-overlay h1, .ow-modal-overlay h2, .ow-modal-overlay h3,
.ow-modal-overlay h4, .ow-modal-overlay p, .ow-modal-overlay div,
.ow-modal-overlay span, .ow-modal-overlay a, .ow-modal-overlay img,
.ow-modal-overlay button, .ow-modal-overlay ul, .ow-modal-overlay li {
margin: 0;
padding: 0;
}
.ow-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--ow-modal-bg);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: owFadeIn 0.2s ease-out;
}
.ow-modal {
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
background: var(--ow-modal-surface) !important;
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--ow-radius);
box-shadow: var(--ow-shadow-lg);
animation: owScaleIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .ow-modal {
border-color: rgba(0,0,0,0.08);
}
.ow-modal::-webkit-scrollbar { width: 4px; }
.ow-modal::-webkit-scrollbar-thumb { background: var(--ow-text-muted); border-radius: 4px; }
.ow-modal-banner-wrap {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
background-color: #08080f;
background-image:
radial-gradient(at 0% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(225,39%,20%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(225,39%,30%,1) 0, transparent 50%);
}
[data-theme="light"] .ow-modal-banner-wrap {
background-color: #e8e8ee;
background-image:
radial-gradient(at 0% 0%, hsla(225,30%,80%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(225,40%,90%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(225,30%,80%,1) 0, transparent 50%);
}
.ow-modal-banner {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
transition: opacity .4s ease;
}
.ow-modal-banner-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--ow-modal-surface) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
z-index: 2;
}
.ow-modal-head {
padding: 0 28px;
margin-top: -50px;
position: relative;
z-index: 3;
}
.ow-modal-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
border: 4px solid var(--ow-modal-surface);
object-fit: cover;
box-shadow:
0 0 0 2px var(--ow-accent-dim),
0 8px 24px rgba(0,0,0,0.35);
background: var(--ow-bg-alt);
position: relative;
z-index: 3;
}
.ow-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform .15s;
backdrop-filter: blur(6px);
z-index: 10;
}
.ow-modal-close:hover { background: rgba(0,0,0,0.78); transform: scale(1.06); }
.ow-modal-body {
padding: 16px 28px 28px;
}
.ow-modal-name {
font-size: 1.5rem;
font-weight: 900;
color: var(--ow-text);
margin-bottom: 4px;
}
.ow-modal-username {
font-size: 0.9rem;
color: var(--ow-text-dim);
font-weight: 600;
margin-bottom: 20px;
}
.ow-modal-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.ow-modal-stat {
text-align: center;
padding: 18px 8px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border-radius: var(--ow-radius-sm);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(8px);
transition: transform .25s ease, border-color .25s ease;
}
.ow-modal-stat:hover { transform: translateY(-2px); border-color: var(--ow-accent-dim); }
[data-theme="light"] .ow-modal-stat {
background: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
border-color: rgba(0,0,0,0.08);
}
.ow-modal-stat .val {
font-size: 1.3rem;
font-weight: 900;
color: var(--ow-accent);
display: block;
}
.ow-modal-stat .lbl {
font-size: 0.65rem;
font-weight: 700;
color: var(--ow-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.ow-modal-section {
margin-bottom: 20px;
}
.ow-modal-section h4 {
font-size: 0.75rem;
font-weight: 800;
color: var(--ow-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.ow-modal-roles {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.ow-role-pill {
padding: 4px 12px;
border-radius: 12px;
font-size: 0.72rem;
font-weight: 700;
border: 1px solid var(--ow-border);
background: var(--ow-bg-alt);
color: var(--ow-text-dim);
}
.ow-role-pill-divider {
opacity: 0.45;
font-style: italic;
background: transparent !important;
border-style: dashed !important;
border-color: var(--ow-text-muted) !important;
color: var(--ow-text-muted) !important;
font-size: 0.65rem;
letter-spacing: -0.02em;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 3px 10px;
}
.ow-role-toggle {
padding: 4px 12px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 700;
border: 1px dashed var(--ow-accent);
background: transparent;
color: var(--ow-accent);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.ow-role-toggle:hover { background: var(--ow-accent-dim); color: var(--ow-text); }
.ow-role-count {
display: inline-block;
font-size: 0.62rem;
color: var(--ow-text-muted);
font-weight: 800;
margin-left: 8px;
padding: 2px 8px;
background: var(--ow-bg-alt);
border-radius: 10px;
letter-spacing: 0;
}
.ow-modal-roles-hidden { display: contents; }
.ow-modal-roles-hidden[hidden] { display: none; }
.ow-modal-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--ow-accent);
color: #fff;
border-radius: var(--ow-radius-sm);
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
transition: all 0.2s;
margin-top: 4px;
}
.ow-modal-link:hover { filter: brightness(1.1); }
.ow-modal-detail {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--ow-border);
font-size: 0.85rem;
}
.ow-modal-detail:last-child { border-bottom: none; }
.ow-modal-detail .key { color: var(--ow-text-muted); font-weight: 600; }
.ow-modal-detail .val { color: var(--ow-text); font-weight: 700; }
/* ══════════════════════════════════════
LEADERBOARD TAB
══════════════════════════════════════ */
.ow-lb-pills {
display: flex;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.ow-lb-pill {
padding: 8px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
color: var(--ow-text-dim);
}
.ow-lb-pill:hover { border-color: var(--ow-border-hover); }
.ow-lb-pill.active { background: var(--ow-accent); color: #fff; border-color: var(--ow-accent); }
.ow-lb-table {
width: 100%;
}
.ow-lb-row {
display: grid;
grid-template-columns: 50px 48px 1fr 100px;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: var(--ow-radius-xs);
transition: background 0.15s;
cursor: pointer;
}
.ow-lb-row:hover { background: var(--ow-surface-hover); }
.ow-lb-row:nth-child(even) { background: var(--ow-bg-alt); }
.ow-lb-row:nth-child(even):hover { background: var(--ow-surface-hover); }
.ow-lb-row .rank {
font-family: var(--ow-font-display);
font-size: 1.1rem;
font-weight: 700;
text-align: center;
}
.ow-lb-row:nth-child(1) .rank { color: var(--ow-gold); }
.ow-lb-row:nth-child(2) .rank { color: var(--ow-silver); }
.ow-lb-row:nth-child(3) .rank { color: var(--ow-bronze); }
.ow-lb-row .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ow-lb-row .name { font-weight: 700; font-size: 0.9rem; }
.ow-lb-row .score { font-weight: 800; color: var(--ow-accent); text-align: right; font-size: 0.95rem; }
/* ══════════════════════════════════════
ROSTER TAB
══════════════════════════════════════ */
.ow-roster-section { margin-bottom: 40px; }
.ow-roster-section h3 {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--ow-border);
display: flex;
align-items: center;
gap: 8px;
}
.ow-roster-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
/* ══════════════════════════════════════
STAFF TAB
══════════════════════════════════════ */
.ow-staff-section { margin-bottom: 36px; }
.ow-staff-section h3 {
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ow-text-muted);
margin-bottom: 16px;
}
.ow-staff-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
/* ═══ Empty State ═══ */
.ow-empty {
text-align: center;
padding: 60px 20px;
color: var(--ow-text-muted);
}
.ow-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.ow-empty h3 { font-size: 1.2rem; font-weight: 700; color: var(--ow-text-dim); margin-bottom: 8px; }
.ow-empty p { font-size: 0.9rem; }
/* ═══ Error State ═══ */
.ow-error-card {
max-width: 500px;
margin: 0 auto;
text-align: center;
padding: 60px 32px;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: var(--ow-radius);
}
/* ═══ Responsive ═══ */
@media (max-width: 768px) {
.ow-hub-banner-content { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 20px; }
.ow-hub-logo { width: 80px; height: 80px; border-radius: 18px; }
.ow-hub-tabs-inner { padding: 0 16px; }
.ow-tab-content { padding: 24px 16px; }
.ow-member-grid { grid-template-columns: 1fr; }
.ow-stats-grid { grid-template-columns: repeat(2, 1fr); }
.leaderboard-row { grid-template-columns: 40px 40px 1fr 80px; }
.leaderboard-row .lb-metric:last-of-type { display: none; }
.leaderboard-row .esports-btn { display: none; }
.esports-podium { flex-direction: column; align-items: center; }
.esports-podium > div { max-width: 100%; }
.ow-modal { max-width: 100%; }
.ow-modal-stats { grid-template-columns: repeat(2, 1fr); }
.ow-lb-row { grid-template-columns: 40px 36px 1fr 70px; }
.ow-search-bar { flex-direction: column; }
.ow-directory-hero { padding: 50px 16px 40px; }
}
@media (max-width: 480px) {
.ow-modal-overlay { padding: 8px; }
.ow-modal-banner-wrap, .ow-modal-banner { height: 130px; }
.ow-modal-head { padding: 0 18px; }
.ow-modal-body { padding: 12px 18px 22px; }
.ow-modal-avatar { width: 78px; height: 78px; }
.ow-modal-stats { gap: 8px; }
.ow-modal-stat { padding: 12px 4px; }
}
/* ══════════════════════════════════════
LEADER STACK (Directory)
══════════════════════════════════════ */
.ow-leader-pile {
display: flex;
align-items: center;
margin-top: 10px;
gap: 0;
justify-content: center;
}
.ow-leader-avatar-mini {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--ow-surface);
margin-left: -8px;
transition: transform 0.2s, z-index 0s;
cursor: help;
background: var(--ow-bg-alt);
position: relative;
}
.ow-leader-avatar-mini:first-child { margin-left: 0; }
.ow-leader-avatar-mini:hover {
transform: translateY(-4px) scale(1.2);
z-index: 10;
border-color: var(--ow-accent);
}
/* Row specifically for the leaderboard rows (left aligned) */
.lb-leaders {
display: flex;
align-items: center;
margin-left: 10px;
}
.podium-leaders {
display: flex;
justify-content: center;
margin-top: 15px;
}
/* ══════════════════════════════════════
OVERVIEW GRID (2-Column)
══════════════════════════════════════ */
.ow-overview-grid {
display: grid;
grid-template-columns: 2fr 350px;
gap: 24px;
}
.ow-col-main { display: flex; flex-direction: column; gap: 24px; }
.ow-col-side { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 1000px) {
.ow-overview-grid { grid-template-columns: 1fr; }
}
/* MINI MEMBER CARDS (Overview) */
.ow-member-grid.mini {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.ow-member-card.mini {
padding: 8px;
background: var(--ow-bg-alt);
border-radius: var(--ow-radius-xs);
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
border: 1px solid var(--ow-border);
}
.ow-member-card.mini:hover {
transform: translateY(-2px);
background: var(--ow-surface-hover);
border-color: var(--ow-accent-dim);
}
.ow-member-card.mini .ow-member-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
.ow-member-card.mini .ow-member-name {
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-sm {
padding: 6px 12px;
font-size: 0.7rem;
}
/* ══════════════════════════════════════
PREMIUM DASHBOARD 2.0 (Apple Dark Modern)
══════════════════════════════════════ */
/* Banner & Logo Containment */
.podium-banner-wrapper {
position: relative;
width: 100%;
height: 140px;
overflow: hidden;
background: var(--ow-bg-alt);
}
.rank-1 .podium-banner-wrapper { height: 160px; }
.podium-banner {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.podium-card:hover .podium-banner { transform: scale(1.1); }
.podium-banner-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.85));
}
.podium-name {
font-size: 1.3rem;
font-weight: 950;
margin-top: 10px;
letter-spacing: -0.01em;
color: #fff;
text-shadow: 0 4px 12px rgba(0,0,0,0.5);
text-transform: uppercase;
}
/* Metrics Dashboard */
.ow-card-metrics {
display: flex;
justify-content: center;
gap: 16px;
margin: 20px 0;
padding: 12px;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.08);
}
.metric {
display: flex;
flex-direction: column;
align-items: center;
min-width: 65px;
}
.metric .icon { font-size: 1.1rem; margin-bottom: 4px; }
.metric .val { font-size: 1rem; font-weight: 900; color: var(--ow-accent); }
.metric.strikes .val { color: #ff3b30; }
.ow-card-footer {
margin-top: auto;
padding: 16px 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.stack-label {
font-size: 0.65rem;
font-weight: 900;
color: var(--ow-text-muted);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 10px;
opacity: 0.7;
}
/* LEADER PILE (Horizontal Stacks) */
.ow-leader-pile {
display: flex;
align-items: center;
justify-content: center;
gap: -8px; /* Negative margin for overlapping effect if desired, but 6px gap for now */
margin-bottom: 5px;
}
.ow-leader-pile {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
max-width: 100%;
overflow: hidden;
}
.ow-leader-avatar-mini {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
border-radius: 50% !important;
border: 2px solid var(--ow-surface);
object-fit: cover;
flex-shrink: 0;
background: var(--ow-bg-alt);
transition: transform 0.2s, border-color 0.2s;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.ow-leader-avatar-mini:hover {
transform: scale(1.1) translateY(-2px);
z-index: 10;
border-color: var(--ow-accent);
}
.ow-leader-avatar-mini:hover {
transform: scale(1.2) translateY(-2px);
z-index: 10;
border-color: var(--ow-accent);
}
/* GLOW SYSTEM */
.glow-gold { border-color: rgba(212,175,55, 0.3) !important; box-shadow: 0 0 20px rgba(212,175,55, 0.1) !important; }
.glow-gold:hover { border-color: #d4af37 !important; box-shadow: 0 0 40px rgba(212,175,55, 0.4) !important; }
.glow-cyan { border-color: rgba(0, 212, 255, 0.3) !important; box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important; }
.glow-cyan:hover { border-color: #00d4ff !important; box-shadow: 0 0 40px rgba(0, 212, 255, 0.4) !important; }
/* Leaderboard Matrix */
.lb-metrics-group {
display: flex;
align-items: center;
gap: 32px;
}
.lb-metric.strikes .val { color: #ff3b30; }
/* High-End Status Badge */
.ow-modal-full-status {
display: inline-block;
margin: 12px 0 24px;
padding: 8px 20px;
background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.1));
border: 1px solid rgba(59,130,246,0.3);
border-radius: 30px;
color: #60a5fa;
font-size: 0.85rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* Fix Giant Logos once and for all */
.lb-logo {
width: 48px !important;
height: 48px !important;
min-width: 48px;
max-height: 48px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.1);
background: var(--ow-bg-alt);
}
.lb-logo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* ══════════════════════════════════════
SOCIAL FEED (Community Pulse & News)
══════════════════════════════════════ */
.ow-feed-container {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.ow-feed-card {
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 20px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
backdrop-filter: blur(10px);
}
.ow-feed-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.15);
}
.ow-feed-header {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ow-feed-author-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--ow-border);
object-fit: cover;
}
.ow-feed-author-name {
font-size: 1rem;
font-weight: 800;
color: var(--ow-text);
}
.ow-feed-meta {
font-size: 0.75rem;
font-weight: 600;
color: var(--ow-text-muted);
margin-top: 2px;
}
.ow-feed-type {
color: var(--ow-accent);
font-weight: 900;
letter-spacing: 0.05em;
}
.ow-feed-body {
padding: 24px 20px;
}
.ow-feed-title {
font-size: 1.4rem;
font-weight: 950;
margin-bottom: 12px;
line-height: 1.25;
letter-spacing: -0.02em;
}
.ow-feed-content {
font-size: 1.05rem;
line-height: 1.6;
color: var(--ow-text-dim);
white-space: pre-line;
}
.ow-feed-image-wrapper {
margin-top: 20px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
background: #000;
}
.ow-feed-image {
width: 100%;
max-height: 500px;
object-fit: contain;
transition: transform 0.5s ease;
}
.ow-feed-image-wrapper:hover .ow-feed-image {
transform: scale(1.02);
}
/* Animations Scroll Reveal */
.ow-feed-card {
animation: feed-entry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes feed-entry {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Modal Fallbacks */
.broken-banner {
background: linear-gradient(135deg, var(--ow-accent-dim), var(--ow-surface)) !important;
min-height: 120px;
display: block;
}
@media (max-width: 768px) {
.ow-feed-container { padding: 0 10px; }
.ow-feed-title { font-size: 1.2rem; }
}
/* Leaderboard Premium & Enhanced Headers */
.ow-lb-header {
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ow-lb-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ow-lb-badge, .ow-lb-region, .ow-lb-slots {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--ow-accent-dim);
color: var(--ow-accent);
border: 1px solid rgba(255,255,255,0.05);
backdrop-filter: blur(4px);
}
.ow-lb-banner-premium {
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.1);
max-height: 200px;
object-fit: cover;
}
.ow-lb-row .name-box {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.ow-lb-row .desc {
font-size: 0.75rem;
color: var(--ow-text-muted);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.8;
}
.ow-lb-pills {
margin-bottom: 24px;
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: none;
}
.ow-lb-pills::-webkit-scrollbar { display: none; }
/* ══════════════════════════════════════
PREMIUM DIRECTORY v3.0 — Full Overhaul
Professional Gaming · Dark Glass · Animated
══════════════════════════════════════ */
/* ── Keyframes ── */
@keyframes heroGlow {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes bannerParallax {
from { transform: scale(1.08) translateY(0); }
to { transform: scale(1.08) translateY(-6px); }
}
/* ── HERO ── */
.dir-hero {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: radial-gradient(ellipse 120% 80% at 50% 0%,
rgba(59,130,246,0.25) 0%,
rgba(139,92,246,0.12) 40%,
transparent 70%),
var(--ow-bg);
}
.dir-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 600px at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%),
radial-gradient(circle 400px at 80% 30%, rgba(139,92,246,0.08) 0%, transparent 60%);
pointer-events: none;
}
.dir-hero-inner {
position: relative;
z-index: 2;
padding: 80px 20px 60px;
max-width: 700px;
}
.dir-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 18px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2));
border: 1px solid rgba(59,130,246,0.3);
color: #93c5fd;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 24px;
backdrop-filter: blur(8px);
}
.dir-hero-title {
font-family: var(--ow-font-display);
font-size: clamp(2.4rem, 6vw, 5rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1;
background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #c4b5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 16px;
}
.dir-hero-sub {
color: var(--ow-text-dim);
font-size: 1.05rem;
font-weight: 500;
max-width: 520px;
margin: 0 auto 32px;
line-height: 1.6;
}
.dir-hero-stats {
display: inline-flex;
align-items: center;
gap: 24px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 14px 28px;
backdrop-filter: blur(12px);
}
.dir-hero-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.dir-hero-stat strong {
font-size: 1.6rem;
font-weight: 900;
color: var(--ow-accent);
line-height: 1;
}
.dir-hero-stat span {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ow-text-muted);
margin-top: 4px;
}
.dir-hero-stat-sep {
width: 1px;
height: 32px;
background: rgba(255,255,255,0.1);
}
/* ── MAIN / SECTIONS ── */
.dir-main {
max-width: 1260px;
margin: 0 auto;
padding: 48px 24px 120px;
display: flex;
flex-direction: column;
gap: 64px;
}
.dir-section { display: flex; flex-direction: column; gap: 28px; }
.dir-section-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid var(--ow-border);
}
.dir-section-lbl {
font-family: var(--ow-font-display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ow-text-muted);
}
.dir-section-count {
font-size: 0.75rem;
font-weight: 600;
color: var(--ow-text-muted);
}
/* ── PODIUM ── */
.dir-podium {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 20px;
align-items: start;
}
.dir-pod-wrap { cursor: pointer; }
.dir-pod-wrap.rank-1 { order: 2; }
.dir-pod-wrap.rank-2 { order: 1; }
.dir-pod-wrap.rank-3 { order: 3; }
.dir-pod-card {
background: var(--ow-surface);
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.07);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 16px 48px rgba(0,0,0,0.35);
position: relative;
}
.dir-pod-card:hover {
transform: translateY(-10px);
border-color: var(--ow-accent);
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(59,130,246,0.2);
}
.dir-pod-card.is-official { border-color: rgba(245,158,11,0.25); }
.dir-pod-card.is-official:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(245,158,11,0.3); }
.rank-1 .dir-pod-card { border-color: rgba(245,158,11,0.3); }
.dir-pod-banner-wrap {
position: relative;
height: 140px;
overflow: hidden;
}
.rank-1 .dir-pod-banner-wrap { height: 170px; }
.dir-pod-banner {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.6);
transition: transform 0.6s ease, filter 0.4s ease;
}
.dir-pod-card:hover .dir-pod-banner { transform: scale(1.1); filter: brightness(0.8); }
.dir-pod-banner-grad {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--ow-surface) 0%, transparent 60%);
}
.dir-pod-rank {
position: absolute;
top: 14px;
right: 16px;
font-size: 1.4rem;
font-weight: 900;
background: rgba(0,0,0,0.5);
padding: 4px 10px;
border-radius: 14px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
}
.dir-pod-logo {
display: block;
width: 72px;
height: 72px;
border-radius: 20px;
border: 3px solid var(--ow-surface);
object-fit: cover;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
margin: -36px auto 0;
position: relative;
z-index: 5;
transition: transform 0.4s ease;
}
.rank-1 .dir-pod-logo { width: 90px; height: 90px; border-radius: 24px; margin-top: -45px; border-color: var(--ow-gold); }
.dir-pod-card:hover .dir-pod-logo { transform: scale(1.08) translateY(-4px); }
.dir-pod-body { padding: 20px 24px 28px; }
.dir-pod-name {
font-family: var(--ow-font-display);
font-size: 1.35rem;
font-weight: 700;
text-transform: uppercase;
text-align: center;
color: #fff;
margin-bottom: 18px;
letter-spacing: -0.01em;
}
.rank-1 .dir-pod-name { font-size: 1.6rem; }
.dir-pod-stats {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
background: rgba(255,255,255,0.04);
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
margin-bottom: 20px;
}
.dir-pod-stat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 12px;
}
.dpst-v {
font-size: 1.3rem;
font-weight: 900;
color: var(--ow-accent);
line-height: 1;
}
.dpst-l {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--ow-text-muted);
text-transform: uppercase;
margin-top: 5px;
}
.dpst-sep { width: 1px; background: rgba(255,255,255,0.07); margin: 10px 0; }
/* Leader Chips — Large */
.dir-pod-leaders { margin-bottom: 20px; }
.dir-pod-leaders-lbl {
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--ow-text-muted);
text-transform: uppercase;
margin-bottom: 10px;
}
.dir-pod-leaders-row { display: flex; flex-direction: column; gap: 8px; }
.dir-lchip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.dir-lchip:hover {
background: rgba(59,130,246,0.1);
border-color: rgba(59,130,246,0.3);
transform: translateX(4px);
}
.dir-lchip-av {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.15);
object-fit: cover;
flex-shrink: 0;
background: var(--ow-bg-alt);
}
.dir-lchip-info { display: flex; flex-direction: column; min-width: 0; }
.dir-lchip-name {
font-size: 0.85rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dir-lchip-role {
font-size: 0.65rem;
font-weight: 600;
color: var(--ow-accent);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dir-pod-cta {
width: 100%;
padding: 12px;
background: var(--ow-accent);
border: none;
border-radius: 14px;
color: #fff;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}
.dir-pod-cta:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,0.6); }
/* ═══════════════════════════════════════════════════
ONE WAY — DIRECTORY v4 (Bulletproof Edition)
No conflicts, iron-clad constraints everywhere
═══════════════════════════════════════════════════ */
/* HERO */
.dir-hero {
position: relative;
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background:
radial-gradient(ellipse 120% 80% at 50% -10%,rgba(59,130,246,.28) 0%,rgba(139,92,246,.12) 45%,transparent 70%),
#0a0a0f;
}
.dir-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 700px at 0% 60%,rgba(59,130,246,.07) 0%,transparent 60%),
radial-gradient(circle 500px at 100% 20%,rgba(139,92,246,.07) 0%,transparent 60%);
pointer-events: none;
}
.dir-hero-inner {
position: relative;
z-index: 2;
padding: 80px 20px 60px;
max-width: 700px;
margin: 0 auto;
}
.dir-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 18px;
border-radius: 30px;
background: linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));
border: 1px solid rgba(59,130,246,.35);
color: #93c5fd;
font-size: .7rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 24px;
backdrop-filter: blur(8px);
}
.dir-hero-title {
font-family: var(--ow-font-display);
font-size: clamp(2.4rem,6vw,5rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -.02em;
line-height: 1.05;
background: linear-gradient(135deg,#fff 0%,#93c5fd 50%,#c4b5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 16px;
}
.dir-hero-sub {
color: var(--ow-text-dim);
font-size: 1.05rem;
font-weight: 500;
max-width: 520px;
margin: 0 auto 32px;
line-height: 1.6;
}
.dir-hero-stats {
display: inline-flex;
align-items: center;
gap: 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 14px 28px;
backdrop-filter: blur(12px);
}
.dir-hero-stat { display: flex; flex-direction: column; align-items: center; }
.dir-hero-stat strong { font-size: 1.6rem; font-weight: 900; color: var(--ow-accent); line-height: 1; }
.dir-hero-stat span { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ow-text-muted); margin-top: 4px; }
.dir-hero-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.1); }
/* LAYOUT */
.dir-main {
max-width: 1280px;
margin: 0 auto;
padding: 48px 24px 120px;
display: flex;
flex-direction: column;
gap: 60px;
}
.dir-section { display: flex; flex-direction: column; gap: 24px; }
.dir-section-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.dir-section-lbl {
font-family: var(--ow-font-display);
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ow-text-muted);
}
.dir-section-count { font-size: .75rem; font-weight: 600; color: var(--ow-text-muted); }
/* PODIUM */
.dir-podium {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 20px;
align-items: end; /* bottom-align so rank1 towers above */
}
.dir-pod-wrap { cursor: pointer; }
.dir-pod-wrap.rank-1 { order: 2; }
.dir-pod-wrap.rank-2 { order: 1; }
.dir-pod-wrap.rank-3 { order: 3; }
.dir-pod-card {
background: var(--ow-surface);
border-radius: 28px;
overflow: hidden; /* CRITICAL — keeps children inside */
border: 1px solid rgba(255,255,255,.07);
transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.dir-pod-card:hover { transform: translateY(-10px); border-color: var(--ow-accent); box-shadow: 0 24px 60px rgba(0,0,0,.5),0 0 28px rgba(59,130,246,.2); }
.rank-1 .dir-pod-card { border-color: rgba(245,158,11,.3); }
.dir-pod-card.is-official { border-color: rgba(245,158,11,.25); }
.dir-pod-banner-wrap {
position: relative;
width: 100%;
height: 130px;
overflow: hidden;
flex-shrink: 0;
}
.rank-1 .dir-pod-banner-wrap { height: 160px; }
.dir-pod-banner {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(.6);
transition: transform .6s ease, filter .4s;
display: block;
}
.dir-pod-card:hover .dir-pod-banner { transform: scale(1.08); filter: brightness(.8); }
.dir-pod-banner-grad {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--ow-surface) 0%, transparent 60%);
pointer-events: none;
}
.dir-pod-rank {
position: absolute;
top: 12px;
right: 14px;
font-size: 1.3rem;
font-weight: 900;
background: rgba(0,0,0,.55);
padding: 3px 10px;
border-radius: 12px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.1);
line-height: 1.4;
}
.dir-pod-logo {
display: block;
width: 68px;
height: 68px;
min-width: 68px;
min-height: 68px;
border-radius: 18px;
border: 3px solid var(--ow-surface);
object-fit: cover;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
margin: -34px auto 0;
position: relative;
z-index: 5;
transition: transform .4s ease;
flex-shrink: 0;
}
.rank-1 .dir-pod-logo { width: 84px; height: 84px; min-width: 84px; min-height: 84px; border-radius: 22px; margin-top: -42px; border-color: var(--ow-gold); }
.dir-pod-card:hover .dir-pod-logo { transform: scale(1.08) translateY(-4px); }
.dir-pod-body { padding: 18px 20px 24px; }
.dir-pod-name {
font-family: var(--ow-font-display);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
text-align: center;
color: #fff;
margin-bottom: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-1 .dir-pod-name { font-size: 1.5rem; }
.dir-pod-stats {
display: flex;
align-items: stretch;
background: rgba(255,255,255,.04);
border-radius: 14px;
border: 1px solid rgba(255,255,255,.06);
overflow: hidden;
margin-bottom: 18px;
}
.dir-pod-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; }
.dpst-v { font-size: 1.2rem; font-weight: 900; color: var(--ow-accent); line-height: 1; }
.dpst-l { font-size: .55rem; font-weight: 800; letter-spacing: .1em; color: var(--ow-text-muted); text-transform: uppercase; margin-top: 5px; }
.dpst-sep { width: 1px; background: rgba(255,255,255,.07); margin: 8px 0; }
/* Leader chips — podium (large) */
.dir-pod-leaders { margin-bottom: 16px; }
.dir-pod-leaders-lbl {
font-size: .58rem;
font-weight: 800;
letter-spacing: .1em;
color: var(--ow-text-muted);
text-transform: uppercase;
margin-bottom: 8px;
}
.dir-pod-leaders-row { display: flex; flex-direction: column; gap: 6px; }
.dir-lchip {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
cursor: pointer;
transition: all .2s;
text-decoration: none;
}
.dir-lchip:hover { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); transform: translateX(3px); }
.dir-lchip-av {
width: 34px !important;
height: 34px !important;
min-width: 34px;
min-height: 34px;
border-radius: 50% !important;
object-fit: cover !important;
border: 2px solid rgba(255,255,255,.15) !important;
flex-shrink: 0 !important;
background: var(--ow-bg-alt);
display: block !important;
}
.dir-lchip-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dir-lchip-name {
font-size: .82rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.dir-lchip-role { font-size: .6rem; font-weight: 600; color: var(--ow-accent); text-transform: uppercase; letter-spacing: .05em; display: block; }
.dir-pod-cta {
display: block;
width: 100%;
padding: 11px;
background: var(--ow-accent);
border: none;
border-radius: 12px;
color: #fff;
font-size: .78rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
transition: all .3s;
box-shadow: 0 4px 16px rgba(59,130,246,.4);
}
.dir-pod-cta:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,.6); }
/* DIRECTORY GRID */
.dir-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 18px;
}
.dir-card {
position: relative;
background: var(--ow-surface);
border-radius: 20px;
overflow: hidden; /* CRITICAL */
border: 1px solid rgba(255,255,255,.06);
transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
cursor: pointer;
display: flex;
flex-direction: column;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.dir-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,.4); box-shadow: 0 20px 48px rgba(0,0,0,.4),0 0 20px rgba(59,130,246,.15); }
.dir-card.is-official { border-color: rgba(245,158,11,.2); }
.dir-card.is-official:hover { border-color: rgba(245,158,11,.5); }
.dir-card-banner-wrap {
position: relative;
width: 100%;
height: 95px;
min-height: 95px;
max-height: 95px;
overflow: hidden;
flex-shrink: 0;
}
.dir-card-banner {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(.55) blur(1px);
transition: transform .5s ease, filter .4s;
display: block;
}
.dir-card:hover .dir-card-banner { transform: scale(1.1); filter: brightness(.75) blur(0); }
.dir-card-banner-grad {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--ow-surface) 0%, transparent 60%);
pointer-events: none;
}
.dir-card-rank {
position: absolute;
top: 8px;
left: 12px;
font-size: .68rem;
font-weight: 900;
letter-spacing: .06em;
color: rgba(255,255,255,.65);
background: rgba(0,0,0,.45);
padding: 3px 8px;
border-radius: 8px;
backdrop-filter: blur(4px);
line-height: 1.4;
}
.dir-card-logo {
display: block !important;
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
border-radius: 14px !important;
border: 3px solid var(--ow-surface) !important;
background: var(--ow-surface);
object-fit: cover !important;
box-shadow: 0 6px 16px rgba(0,0,0,.3);
margin: -26px 0 0 18px !important;
position: relative;
z-index: 5;
flex-shrink: 0;
transition: transform .35s ease;
}
.dir-card:hover .dir-card-logo { transform: scale(1.1); }
.dir-card-body {
padding: 12px 18px 14px;
flex: 1;
min-width: 0;
}
.dir-card-name {
font-family: var(--ow-font-display);
font-size: 1.05rem;
font-weight: 700;
text-transform: uppercase;
color: #fff;
margin-bottom: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dir-card-metrics {
display: flex;
align-items: center;
gap: 6px;
font-size: .78rem;
font-weight: 700;
color: var(--ow-text-muted);
margin-bottom: 12px;
}
.dir-card-metrics em { font-style: normal; font-size: .6rem; letter-spacing: .05em; }
.dcm-sep { color: rgba(255,255,255,.2); }
.dir-card-leaders { }
.dir-card-leaders-lbl {
font-size: .55rem;
font-weight: 800;
letter-spacing: .1em;
color: var(--ow-text-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
.dir-card-leaders-row { display: flex; flex-direction: column; gap: 5px; }
.dir-lchip-sm {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 9px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.05);
border-radius: 9px;
cursor: pointer;
transition: all .2s;
font-size: .76rem;
font-weight: 700;
color: var(--ow-text-dim);
text-decoration: none;
}
.dir-lchip-sm:hover { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93c5fd; transform: translateX(3px); }
.dir-lchip-sm-av {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 2px solid rgba(255,255,255,.1) !important;
flex-shrink: 0 !important;
background: var(--ow-bg-alt);
display: block !important;
}
.dir-card-footer { padding: 0 18px 18px; flex-shrink: 0; }
.dir-card-btn {
display: block;
width: 100%;
padding: 9px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 11px;
color: rgba(255,255,255,.65);
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s;
text-align: center;
}
.dir-card-btn:hover { background: var(--ow-accent); border-color: var(--ow-accent); color: #fff; box-shadow: 0 4px 16px rgba(59,130,246,.4); }
/* LEADER QUICK MODAL */
.lqm-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.7);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
cursor: pointer;
}
.lqm-card {
position: relative;
background: var(--ow-surface);
border: 1px solid rgba(255,255,255,.1);
border-radius: 28px;
box-shadow: 0 32px 80px rgba(0,0,0,.6),0 0 40px rgba(59,130,246,.15);
width: 100%;
max-width: 300px;
text-align: center;
padding: 36px 24px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: default;
}
.lqm-close {
position: absolute;
top: 14px; right: 14px;
width: 30px; height: 30px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.08);
color: #fff;
font-size: .85rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.lqm-close:hover { background: rgba(239,68,68,.4); }
.lqm-av-wrap {
width: 84px; height: 84px;
border-radius: 50%;
border: 3px solid var(--ow-accent);
padding: 3px;
box-shadow: 0 0 20px rgba(59,130,246,.4);
}
.lqm-av {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--ow-bg-alt);
}
.lqm-name { font-size: 1.15rem; font-weight: 800; color: #fff; }
.lqm-role { font-size: .72rem; font-weight: 700; color: var(--ow-accent); text-transform: uppercase; letter-spacing: .08em; }
.lqm-id {
font-size: .64rem; color: var(--ow-text-muted);
font-family: monospace;
padding: 5px 12px;
background: rgba(255,255,255,.04);
border-radius: 8px;
border: 1px solid rgba(255,255,255,.06);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.dir-podium { grid-template-columns: 1fr; }
.dir-pod-wrap.rank-1, .dir-pod-wrap.rank-2, .dir-pod-wrap.rank-3 { order: unset; }
}
@media (max-width: 600px) {
.dir-grid { grid-template-columns: 1fr; }
.dir-main { padding: 28px 14px 80px; gap: 40px; }
.dir-hero-stats { flex-direction: column; gap: 10px; }
.dir-hero-stat-sep { width: 40px; height: 1px; }
.dir-pod-banner-wrap { height: 110px; }
.rank-1 .dir-pod-banner-wrap { height: 130px; }
}
/* ════════════════════════════════════════════════════════════════════
PROFILE MODAL V2 — Claude Design Handoff (zh-* prefix, isolated)
════════════════════════════════════════════════════════════════════ */
/* ========================================================================
OneWAY · tokens v2 — alineados a oneway.lat
======================================================================== */
:root {
/* Surfaces — near-black puro como en oneway.lat */
--zh-bg-0: #050608; /* page */
--zh-bg-1: #0c0d12; /* modal base */
--zh-bg-2: #12141b; /* card */
--zh-bg-3: #1a1d27; /* hover */
--zh-line: rgba(255,255,255,0.05);
--zh-line-strong: rgba(255,255,255,0.10);
/* Text */
--zh-fg: #f1f3f8;
--zh-fg-dim: #8e94a8;
--zh-fg-mute: #555a6c;
/* Accents — azul OneWAY como primario, violeta secundario */
--zh-blue: #3b82f6;
--zh-blue-glow: rgba(59,130,246,0.55);
--zh-blue-soft: rgba(59,130,246,0.12);
--zh-violet: #7c5cff;
--zh-violet-glow: rgba(124,92,255,0.55);
--zh-violet-soft: rgba(124,92,255,0.12);
--zh-magenta: #ec4899;
/* Status */
--zh-online: #22c55e;
--zh-idle: #f59e0b;
--zh-dnd: #ef4444;
--zh-offline:#6b7180;
/* Tier colors */
--zh-tier-bronze: #c47a3a;
--zh-tier-silver: #b8c0cf;
--zh-tier-gold: #f0c14a;
--zh-tier-plat: #3b82f6;
--zh-tier-diamond:#7c5cff;
/* Geometry */
--zh-radius: 16px;
--zh-radius-sm: 8px;
--zh-shadow:
0 30px 80px -20px rgba(0,0,0,0.85),
0 0 0 1px rgba(255,255,255,0.04),
0 0 60px -10px rgba(59,130,246,0.15);
--zh-glow-blue: 0 0 24px -4px var(--zh-blue-glow);
--zh-glow-violet: 0 0 24px -4px var(--zh-violet-glow);
/* Type */
--zh-font: "Inter", "Segoe UI", system-ui, sans-serif;
--zh-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
/* Motion */
--zh-ease: cubic-bezier(0.22, 1, 0.36, 1);
--zh-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ========================================================================
Modal shell + entrance animation
======================================================================== */
@keyframes zh-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zh-modal-in {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zh-backdrop-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes zh-modal-out {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(10px) scale(0.97); }
}
/* AVATAR-FIX (2026-05-17): user reported "en los perfiles de la gente sale
el banner pero no la pfp" — the avatar + name + handle row of the modal
was invisible. Root cause: this keyframe started at opacity:0 with
animation-fill-mode:both + a 0.2s delay; if the animation never fired
(browser throttling, layout glitch, missing zh-modal-ready safety class)
the header stayed at opacity:0 forever. Removed the opacity transition so
the slide-up animation can't accidentally hide the element. */
@keyframes zh-fade-up {
from { transform: translateY(8px); }
to { transform: translateY(0); }
}
@keyframes zh-glow-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
@keyframes zh-status-pulse {
0%, 100% { box-shadow: 0 0 0 0 currentColor; }
50% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes zh-shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
@keyframes zh-glitch {
0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
20% { transform: translate(-1px, 1px); filter: hue-rotate(5deg); }
40% { transform: translate(1px, -1px); filter: hue-rotate(-3deg); }
60% { transform: translate(-1px, -1px); }
80% { transform: translate(1px, 1px); }
}
@keyframes zh-scan-sweep {
from { transform: translateY(-100%); }
to { transform: translateY(200%); }
}
@keyframes zh-rotate-slow {
to { transform: rotate(360deg); }
}
@keyframes zh-counter-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.zh-modal-backdrop {
/* FIX K-14: was `position: absolute` which constrained the backdrop to the
nearest positioned ancestor — under the navbar/scroll container the modal
ended up clipped or hidden. `fixed` ties it to the viewport.
FIX NEW-09: previously z-index was 9999 but the .ow-navbar uses 99999.
The navbar covered the top ~76px of the modal (the banner badge + close
button area looked "mocho" / chopped). Bumped to 100000 to win. */
position: fixed;
inset: 0;
z-index: 100000;
background:
radial-gradient(ellipse at 50% 0%, var(--zh-violet-soft), transparent 60%),
radial-gradient(ellipse at 50% 100%, var(--zh-blue-soft), transparent 60%),
rgba(0,0,0,0.7);
backdrop-filter: blur(10px);
display: grid;
place-items: center;
font-family: var(--zh-font);
color: var(--zh-fg);
animation: zh-backdrop-in 0.3s var(--zh-ease) both;
}
.zh-modal {
width: 600px;
max-height: 88vh;
background: var(--zh-bg-1);
border-radius: var(--zh-radius);
border: 1px solid var(--zh-line-strong);
box-shadow: var(--zh-shadow);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
animation: zh-modal-in 0.5s var(--zh-ease-back) both;
animation-delay: 0.05s;
}
/* Animated ambient glow rim around the modal */
.zh-modal::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from 180deg,
transparent 0deg,
var(--zh-blue) 90deg,
transparent 180deg,
var(--zh-violet) 270deg,
transparent 360deg
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.25;
animation: zh-rotate-slow 12s linear infinite;
pointer-events: none;
z-index: 1;
}
/* Close button */
.zh-modal__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 20;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--zh-line-strong);
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
color: var(--zh-fg);
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s var(--zh-ease);
}
.zh-modal__close:hover {
background: rgba(239,68,68,0.18);
border-color: var(--zh-dnd);
color: var(--zh-dnd);
transform: rotate(90deg);
}
.zh-modal__close:active { transform: rotate(90deg) scale(0.9); }
.zh-modal__body {
padding: 0 24px 24px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--zh-line-strong) transparent;
position: relative;
z-index: 2;
}
.zh-modal__body::-webkit-scrollbar { width: 6px; }
.zh-modal__body::-webkit-scrollbar-thumb {
background: var(--zh-line-strong);
border-radius: 3px;
}
.zh-modal__body::-webkit-scrollbar-thumb:hover { background: var(--zh-blue); }
/* ========================================================================
Banner — parallax + scan sweep + glitch on hover
======================================================================== */
.zh-banner {
position: relative;
height: 200px;
overflow: hidden;
background: linear-gradient(135deg, #1a1d28, #0c0d12);
cursor: pointer;
}
.zh-banner__img {
width: 100%;
height: 110%;
object-fit: cover;
display: block;
transition: transform 8s linear, filter 0.4s var(--zh-ease);
transform: scale(1.05);
filter: saturate(1.05);
}
.zh-banner:hover .zh-banner__img {
transform: scale(1.12);
filter: saturate(1.3) contrast(1.1);
animation: zh-glitch 0.4s steps(2) 1;
}
.zh-banner__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, rgba(59,130,246,0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(59,130,246,0.08) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s var(--zh-ease);
}
.zh-banner:hover .zh-banner__grid { opacity: 1; }
.zh-banner__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(12,13,18,0.4) 60%, var(--zh-bg-1) 100%),
linear-gradient(90deg, rgba(124,92,255,0.15) 0%, transparent 50%);
pointer-events: none;
}
/* Scanline sweep */
.zh-banner__scan {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.zh-banner__scan::before {
content: "";
position: absolute;
left: 0; right: 0;
height: 60px;
background: linear-gradient(180deg,
transparent,
rgba(59,130,246,0.12) 50%,
transparent
);
animation: zh-scan-sweep 4s linear infinite;
}
/* Top-left status badge (pulsing) */
.zh-banner__badge {
position: absolute;
top: 16px;
left: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px 5px 8px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
font-family: var(--zh-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--zh-fg);
z-index: 3;
}
.zh-banner__badge .dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--zh-online);
color: var(--zh-online);
animation: zh-status-pulse 2s ease-in-out infinite;
}
/* ========================================================================
Hexagon avatar — animated border, hover lift
======================================================================== */
.zh-avatar {
width: 100px;
height: 100px;
position: relative;
flex-shrink: 0;
transition: transform 0.4s var(--zh-ease-back);
cursor: pointer;
}
.zh-avatar:hover { transform: translateY(-3px) scale(1.04); }
.zh-avatar__frame {
position: absolute;
inset: 0;
background: conic-gradient(
from 0deg,
var(--zh-blue),
var(--zh-violet),
var(--zh-magenta),
var(--zh-blue)
);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation: zh-rotate-slow 8s linear infinite;
}
.zh-avatar__inner {
position: absolute;
inset: 3px;
background: var(--zh-bg-1);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: grid;
place-items: center;
overflow: hidden;
}
.zh-avatar__inner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--zh-ease);
}
.zh-avatar:hover .zh-avatar__inner img { transform: scale(1.12); }
.zh-avatar__status {
position: absolute;
bottom: 4px;
right: 4px;
width: 22px;
height: 22px;
border-radius: 999px;
border: 3px solid var(--zh-bg-1);
z-index: 2;
transition: transform 0.2s;
}
.zh-avatar:hover .zh-avatar__status { transform: scale(1.15); }
.zh-avatar__status.is-online { background: var(--zh-online); animation: zh-status-pulse 2s infinite; color: var(--zh-online); }
.zh-avatar__status.is-idle { background: var(--zh-idle); color: var(--zh-idle); }
.zh-avatar__status.is-dnd { background: var(--zh-dnd); animation: zh-status-pulse 2s infinite; color: var(--zh-dnd); }
.zh-avatar__status.is-offline { background: var(--zh-offline); }
/* ========================================================================
Header (avatar + identity + actions) — staggered entry
======================================================================== */
.zh-header {
display: flex;
align-items: flex-end;
gap: 18px;
margin-top: -56px;
padding: 0 24px 0;
position: relative;
z-index: 5;
animation: zh-fade-up 0.6s var(--zh-ease) both;
animation-delay: 0.2s;
}
.zh-header__text {
flex: 1;
padding-bottom: 8px;
min-width: 0;
}
.zh-header__actions {
display: flex;
gap: 6px;
padding-bottom: 8px;
}
.zh-identity__name {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
color: var(--zh-fg);
background: linear-gradient(180deg, #fff 60%, #aaa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
cursor: default;
position: relative;
}
.zh-identity__name:hover {
animation: zh-glitch 0.5s steps(3) 1;
}
.zh-identity__handle {
font-family: var(--zh-font-mono);
font-size: 13px;
color: var(--zh-fg-dim);
margin-top: 5px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Icon buttons */
.zh-iconbtn {
width: 36px;
height: 36px;
border-radius: var(--zh-radius-sm);
background: var(--zh-bg-2);
border: 1px solid var(--zh-line-strong);
color: var(--zh-fg-dim);
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s var(--zh-ease);
position: relative;
overflow: hidden;
}
.zh-iconbtn::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, var(--zh-blue-soft), transparent 70%);
opacity: 0;
transition: opacity 0.3s;
}
.zh-iconbtn:hover {
color: var(--zh-blue);
border-color: var(--zh-blue);
transform: translateY(-2px);
box-shadow: var(--zh-glow-blue);
}
.zh-iconbtn:hover::before { opacity: 1; }
.zh-iconbtn:active { transform: translateY(0) scale(0.95); }
/* ========================================================================
Stat blocks — hover lift + animated counter underline
======================================================================== */
.zh-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 22px;
align-items: stretch;
animation: zh-fade-up 0.6s var(--zh-ease) both;
animation-delay: 0.3s;
}
.zh-stat {
position: relative;
background: var(--zh-bg-2);
border: 1px solid var(--zh-line);
border-radius: var(--zh-radius-sm);
padding: 14px 10px;
overflow: hidden;
cursor: default;
transition: all 0.25s var(--zh-ease);
text-align: center;
min-width: 0;
display: flex;
flex-direction: column;
}
/* Tier y SubTier — label arriba-izq, valor centrado verticalmente pero alineado a la izquierda */
.zh-stat--tier,
.zh-stat--subtier {
justify-content: center;
align-items: flex-start;
text-align: left;
padding: 12px 14px;
position: relative;
}
.zh-stat--tier .zh-stat__label,
.zh-stat--subtier .zh-stat__label {
position: absolute;
top: 10px;
left: 12px;
margin-bottom: 0;
}
.zh-stat--tier .zh-stat__value,
.zh-stat--subtier .zh-stat__value {
align-self: flex-start;
margin: 0;
transform-origin: left center;
}
.zh-stat::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 100%, var(--zh-blue-soft), transparent 70%);
opacity: 0;
transition: opacity 0.3s;
}
.zh-stat::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--zh-blue), transparent);
transform: scaleX(0);
transition: transform 0.4s var(--zh-ease);
}
.zh-stat:hover {
transform: translateY(-3px);
border-color: var(--zh-line-strong);
background: var(--zh-bg-3);
}
.zh-stat:hover::before { opacity: 1; }
.zh-stat:hover::after { transform: scaleX(1); }
.zh-stat__label {
font-family: var(--zh-font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--zh-fg-mute);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
position: relative;
}
.zh-stat__value {
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
position: relative;
display: inline-block;
}
/* Kills — color escala con cantidad. Por defecto azul → blanco→amarillo→naranja→rojo
La intensidad se controla con la clase .zh-kills-tier-{0..4} aplicada al stat */
.zh-stat--accent .zh-stat__value {
color: var(--zh-blue);
text-shadow: 0 0 24px var(--zh-blue-glow);
background-clip: text;
-webkit-background-clip: text;
}
/* tier 0: rookie (blue) */
.zh-kills-tier-0 .zh-stat__value { color: var(--zh-blue); text-shadow: 0 0 18px var(--zh-blue-glow); }
/* tier 1: 100+ (cyan/white) */
.zh-kills-tier-1 .zh-stat__value {
color: #67e8f9;
text-shadow: 0 0 22px rgba(103,232,249,0.6);
}
/* tier 2: 500+ (gold) */
.zh-kills-tier-2 .zh-stat__value {
color: #fbbf24;
text-shadow: 0 0 24px rgba(251,191,36,0.65);
}
/* tier 3: 2000+ (orange flame) */
.zh-kills-tier-3 .zh-stat__value {
background: linear-gradient(180deg, #fde047 0%, #fb923c 50%, #ef4444 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(251,146,60,0.55));
animation: zh-flame-flicker 1.6s ease-in-out infinite;
}
/* tier 4: 10000+ (white-hot inferno) */
.zh-kills-tier-4 .zh-stat__value {
background: linear-gradient(180deg, #ffffff 0%, #fde047 30%, #fb923c 65%, #dc2626 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 20px rgba(251,146,60,0.8));
animation: zh-flame-flicker 1.2s ease-in-out infinite;
}
/* Fuego: chispas que suben desde el valor de kills cuando tier >= 3 */
.zh-stat--accent { position: relative; }
.zh-stat--accent .zh-flames {
position: absolute;
inset: auto 0 0 0;
height: 70px;
pointer-events: none;
overflow: visible;
display: none;
}
.zh-kills-tier-3 .zh-flames,
.zh-kills-tier-4 .zh-flames { display: block; }
.zh-stat--accent .zh-flames span {
position: absolute;
bottom: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #fde047 0%, #fb923c 50%, transparent 75%);
filter: blur(0.5px);
opacity: 0;
animation: zh-flame-rise 2.2s linear infinite;
}
.zh-stat--accent .zh-flames span:nth-child(1) { left: 12%; animation-delay: 0.0s; }
.zh-stat--accent .zh-flames span:nth-child(2) { left: 28%; animation-delay: 0.4s; width: 4px; height: 4px; }
.zh-stat--accent .zh-flames span:nth-child(3) { left: 46%; animation-delay: 0.9s; width: 8px; height: 8px; }
.zh-stat--accent .zh-flames span:nth-child(4) { left: 64%; animation-delay: 0.2s; width: 5px; height: 5px; }
.zh-stat--accent .zh-flames span:nth-child(5) { left: 78%; animation-delay: 1.2s; }
.zh-stat--accent .zh-flames span:nth-child(6) { left: 90%; animation-delay: 0.7s; width: 4px; height: 4px; }
@keyframes zh-flame-flicker {
0%, 100% { filter: drop-shadow(0 0 14px rgba(251,146,60,0.55)) brightness(1); }
50% { filter: drop-shadow(0 0 22px rgba(251,146,60,0.85)) brightness(1.15); }
}
@keyframes zh-flame-rise {
0% { transform: translateY(0) scale(1); opacity: 0; }
15% { opacity: 1; }
100% { transform: translateY(-60px) scale(0.2); opacity: 0; }
}
.zh-stat__sub {
font-family: var(--zh-font-mono);
font-size: 10px;
color: var(--zh-fg-mute);
margin-top: 4px;
letter-spacing: 0.06em;
position: relative;
}
/* ========================================================================
Section headers
======================================================================== */
.zh-section {
margin-top: 22px;
animation: zh-fade-up 0.6s var(--zh-ease) both;
}
.zh-section:nth-of-type(1) { animation-delay: 0.4s; }
.zh-section:nth-of-type(2) { animation-delay: 0.5s; }
.zh-section:nth-of-type(3) { animation-delay: 0.6s; }
.zh-section__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.zh-section__title {
font-family: var(--zh-font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--zh-fg-mute);
display: flex;
align-items: center;
gap: 10px;
}
.zh-section__title::before {
content: "";
width: 7px;
height: 7px;
background: var(--zh-blue);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
box-shadow: 0 0 10px var(--zh-blue-glow);
}
.zh-section__count {
font-family: var(--zh-font-mono);
font-size: 11px;
color: var(--zh-fg-mute);
}
/* ========================================================================
Roles — animated chips
======================================================================== */
.zh-roles {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.zh-role {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
background: var(--zh-bg-3);
border: 1px solid var(--zh-line);
border-radius: 999px;
font-size: 12px;
color: var(--zh-fg);
white-space: nowrap;
transition: all 0.2s var(--zh-ease);
cursor: default;
animation: zh-fade-up 0.4s var(--zh-ease) both;
}
.zh-role:nth-child(1) { animation-delay: 0.45s; }
.zh-role:nth-child(2) { animation-delay: 0.50s; }
.zh-role:nth-child(3) { animation-delay: 0.55s; }
.zh-role:nth-child(4) { animation-delay: 0.60s; }
.zh-role:nth-child(5) { animation-delay: 0.65s; }
.zh-role:nth-child(6) { animation-delay: 0.70s; }
.zh-role:nth-child(7) { animation-delay: 0.75s; }
.zh-role:nth-child(8) { animation-delay: 0.80s; }
.zh-role:nth-child(9) { animation-delay: 0.85s; }
.zh-role:hover {
transform: translateY(-2px);
background: var(--zh-bg-3);
border-color: currentColor;
}
.zh-role::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
opacity: 0.8;
transition: box-shadow 0.2s;
}
.zh-role:hover::before { box-shadow: 0 0 8px currentColor; opacity: 1; }
.zh-role--blue { color: var(--zh-blue); border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.10); }
.zh-role--violet { color: var(--zh-violet); border-color: rgba(124,92,255,0.3); background: rgba(124,92,255,0.10); }
.zh-role--magenta { color: var(--zh-magenta); border-color: rgba(236,72,153,0.3); background: rgba(236,72,153,0.10); }
.zh-role--gold { color: var(--zh-tier-gold); border-color: rgba(240,193,74,0.3); background: rgba(240,193,74,0.10); }
.zh-role--green { color: var(--zh-online); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.10); }
.zh-role--more {
background: transparent;
border-style: dashed;
color: var(--zh-fg-dim);
cursor: pointer;
font-family: var(--zh-font);
font-size: 12px;
}
.zh-role--more::before { display: none; }
.zh-role--extra {
animation: zh-fade-up 0.35s var(--zh-ease) both;
}
.zh-role--extra.is-collapsing {
animation: zh-fade-down 0.3s var(--zh-ease) both;
}
@keyframes zh-fade-down {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-6px) scale(0.85); }
}
.zh-role--more:hover {
color: var(--zh-blue);
border-color: var(--zh-blue);
background: var(--zh-blue-soft);
}
/* ========================================================================
Detail rows
======================================================================== */
.zh-details {
display: grid;
gap: 1px;
background: var(--zh-line);
border: 1px solid var(--zh-line);
border-radius: var(--zh-radius-sm);
overflow: hidden;
}
.zh-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: var(--zh-bg-2);
font-size: 13px;
transition: background 0.2s, padding 0.2s;
position: relative;
}
.zh-detail::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--zh-blue);
transform: scaleY(0);
transition: transform 0.25s var(--zh-ease);
transform-origin: center;
}
.zh-detail:hover {
background: var(--zh-bg-3);
padding-left: 18px;
}
.zh-detail:hover::before { transform: scaleY(1); }
.zh-detail__label {
color: var(--zh-fg-dim);
display: flex;
align-items: center;
gap: 8px;
}
.zh-detail__value {
color: var(--zh-fg);
font-family: var(--zh-font-mono);
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.zh-copy-btn {
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid var(--zh-line-strong);
background: transparent;
color: var(--zh-fg-dim);
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s var(--zh-ease);
position: relative;
}
.zh-copy-btn:hover {
color: var(--zh-blue);
border-color: var(--zh-blue);
background: var(--zh-blue-soft);
transform: scale(1.1);
}
.zh-copy-btn.copied {
color: var(--zh-online);
border-color: var(--zh-online);
background: rgba(34,197,94,0.12);
}
.zh-copy-btn .copied-tooltip {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
background: var(--zh-online);
color: #000;
font-size: 10px;
font-family: var(--zh-font-mono);
padding: 3px 8px;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
pointer-events: none;
opacity: 0;
white-space: nowrap;
}
.zh-copy-btn.copied .copied-tooltip {
animation: zh-fade-up 0.3s var(--zh-ease) both;
opacity: 1;
}
/* ========================================================================
Platform pill + tag
======================================================================== */
.zh-platform {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
background: var(--zh-bg-3);
border: 1px solid var(--zh-line-strong);
border-radius: 4px;
font-family: var(--zh-font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.10em;
transition: all 0.2s;
cursor: default;
}
.zh-platform:hover {
transform: translateY(-1px);
border-color: currentColor;
}
.zh-platform.is-mobile { color: var(--zh-violet); border-color: rgba(124,92,255,0.3); background: rgba(124,92,255,0.08); }
.zh-platform.is-pc { color: var(--zh-blue); border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.08); }
.zh-platform.is-console { color: var(--zh-magenta); border-color: rgba(236,72,153,0.3); background: rgba(236,72,153,0.08); }
.zh-online-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--zh-online);
font-family: var(--zh-font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* PROFILE-VIEWS chip — sits in the identity handle row next to the platform
pill. Mono digits so the rollup animation reads cleanly. Subtle by default,
gold glow when it just bumped so the user sees the bragging-rights moment. */
.zh-views-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.72);
font-family: var(--zh-font-mono);
letter-spacing: 0.04em;
text-transform: lowercase;
transition: color 240ms ease, border-color 240ms ease, background 240ms ease,
box-shadow 600ms ease, transform 240ms ease;
cursor: default;
user-select: none;
}
.zh-views-chip svg {
opacity: 0.85;
flex-shrink: 0;
}
.zh-views-chip:hover {
color: #fde047;
border-color: rgba(253,224,71,0.35);
background: rgba(253,224,71,0.06);
}
.zh-views-chip--bumped {
color: #fde047;
border-color: rgba(253,224,71,0.55);
background: rgba(253,224,71,0.10);
box-shadow: 0 0 18px rgba(253,224,71,0.30);
transform: scale(1.04);
}
/* ========================================================================
Phase tier badge — color escalonado (0 mejor → 5 peor) + glow para 0
======================================================================== */
.zh-stat--phase .zh-stat__value {
font-family: var(--zh-font-mono);
letter-spacing: 0.04em;
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.zh-stat--phase .zh-stat__value::before {
content: "";
width: 10px;
height: 10px;
background: currentColor;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
box-shadow: 0 0 12px currentColor;
}
.zh-phase-0 .zh-stat__value {
color: #c4b5fd;
background: linear-gradient(135deg, #fde047 0%, #ec4899 35%, #7c5cff 70%, #38bdf8 100%);
background-size: 250% 250%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 30px rgba(124,92,255,0.6);
animation:
zh-phase0-pulse 2.4s ease-in-out infinite,
zh-phase0-hue 6s linear infinite;
position: relative;
}
.zh-phase-0 .zh-stat__value::after {
/* halo orbital alrededor del 0 */
content: "";
position: absolute;
inset: -4px -8px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(124,92,255,0.35), transparent 70%);
filter: blur(8px);
z-index: -1;
animation: zh-phase0-halo 2s ease-in-out infinite;
}
.zh-phase-0 .zh-stat__value::before {
background: linear-gradient(135deg, #c4b5fd, #7c5cff);
box-shadow: 0 0 14px #7c5cff, 0 0 24px #c4b5fd;
animation: zh-rotate-slow 4s linear infinite;
}
.zh-phase-0::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent, rgba(196,181,253,0.22), transparent);
background-size: 200% 100%;
animation: zh-shimmer 2.2s linear infinite;
pointer-events: none;
}
/* sparkles que orbitan el card de Phase 0 */
.zh-phase-0::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,0.9), transparent 60%),
radial-gradient(1.5px 1.5px at 78% 18%, rgba(196,181,253,0.9), transparent 60%),
radial-gradient(1.5px 1.5px at 88% 72%, rgba(255,255,255,0.9), transparent 60%),
radial-gradient(1.5px 1.5px at 18% 78%, rgba(236,72,153,0.9), transparent 60%);
opacity: 0.9;
pointer-events: none;
animation: zh-phase0-sparkle 3.2s ease-in-out infinite;
}
.zh-phase-1 .zh-stat__value { color: var(--zh-blue); }
.zh-phase-2 .zh-stat__value { color: var(--zh-online); }
.zh-phase-3 .zh-stat__value { color: var(--zh-tier-gold); }
.zh-phase-4 .zh-stat__value { color: #f97316; }
.zh-phase-5 .zh-stat__value { color: var(--zh-fg-mute); }
@keyframes zh-phase0-pulse {
0%, 100% { filter: brightness(1); transform: scale(1); }
50% { filter: brightness(1.35) drop-shadow(0 0 12px rgba(124,92,255,0.85)); transform: scale(1.04); }
}
@keyframes zh-phase0-hue {
0% { background-position: 0% 0%; }
100% { background-position: 250% 250%; }
}
@keyframes zh-phase0-halo {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.25); }
}
@keyframes zh-phase0-sparkle {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Phase legend strip — visible at hover of phase stat */
.zh-stat--phase .zh-phase-bar {
height: 3px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2px;
margin-top: 10px;
}
.zh-stat--phase .zh-phase-bar > span {
border-radius: 2px;
background: var(--zh-bg-3);
transition: all 0.3s var(--zh-ease);
}
.zh-stat--phase .zh-phase-bar > span.is-active {
box-shadow: 0 0 8px currentColor;
}
/* Phase bar — colores explícitos por phase para que sean visibles
incluso cuando el valor del stat es transparent (por background-clip:text) */
.zh-phase-0 .zh-phase-bar > span.is-active {
background: linear-gradient(90deg, #fde047, #ec4899, #7c5cff) !important;
box-shadow: 0 0 10px rgba(124,92,255,0.85), 0 0 4px #fde047;
}
.zh-phase-1 .zh-phase-bar > span.is-active { background: var(--zh-blue) !important; box-shadow: 0 0 8px var(--zh-blue-glow); }
.zh-phase-2 .zh-phase-bar > span.is-active { background: var(--zh-online) !important; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.zh-phase-3 .zh-phase-bar > span.is-active { background: var(--zh-tier-gold) !important; box-shadow: 0 0 8px rgba(240,193,74,0.6); }
.zh-phase-4 .zh-phase-bar > span.is-active { background: #f97316 !important; box-shadow: 0 0 8px rgba(249,115,22,0.6); }
.zh-phase-5 .zh-phase-bar > span.is-active { background: var(--zh-fg-mute) !important; box-shadow: 0 0 6px rgba(107,113,128,0.4); }
/* ========================================================================
Tier (H / M / L) y SubTier (S / T / W)
======================================================================== */
.zh-stat--tier .zh-stat__value,
.zh-stat--subtier .zh-stat__value,
.zh-stat__value--word {
font-family: "Inter", var(--zh-font-sans, system-ui), sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
font-size: 15px;
line-height: 1.1;
white-space: nowrap;
}
/* Sub-mark = letra grande tipo "E" / "H" / "S" debajo de la palabra,
misma fuente que el valor de Phase, animada con glow */
.zh-stat__sub--mark {
font-family: var(--zh-font-mono);
font-size: 13px !important;
font-weight: 700;
color: currentColor !important;
letter-spacing: 0.06em !important;
margin-top: 6px !important;
text-transform: uppercase;
opacity: 0.85;
text-shadow: 0 0 10px currentColor;
}
.zh-stat--phase .zh-stat__sub--mark { color: inherit; }
/* Animación leve para los marks (E / H / S etc.) */
.zh-stat__sub--mark {
animation: zh-mark-pulse 2.6s ease-in-out infinite;
}
@keyframes zh-mark-pulse {
0%, 100% { opacity: 0.85; text-shadow: 0 0 8px currentColor; }
50% { opacity: 1; text-shadow: 0 0 16px currentColor, 0 0 4px currentColor; }
}
/* Tier colors: H = cyan/blue (con animación porque es el más alto), M = silver, L = orange */
.zh-tier-H .zh-stat__value {
color: #38bdf8;
text-shadow: 0 0 14px rgba(56,189,248,0.55);
animation: zh-tier-h-pulse 2.2s ease-in-out infinite;
}
.zh-tier-M .zh-stat__value { color: #cbd5e1; }
.zh-tier-L .zh-stat__value { color: #f97316; }
@keyframes zh-tier-h-pulse {
0%, 100% {
text-shadow: 0 0 14px rgba(56,189,248,0.5);
filter: brightness(1);
transform: scale(1);
letter-spacing: 0.01em;
}
50% {
text-shadow:
0 0 28px rgba(56,189,248,0.95),
0 0 6px rgba(186,230,253,0.85),
0 0 50px rgba(56,189,248,0.4);
filter: brightness(1.3);
transform: scale(1.06);
letter-spacing: 0.05em;
}
}
/* SubTier colors: S = gold (animado, top tier), T = silver, W = warm-gray */
.zh-subtier-S .zh-stat__value {
color: #fbbf24;
text-shadow: 0 0 14px rgba(251,191,36,0.5);
animation: zh-subtier-pulse 2s ease-in-out infinite;
}
.zh-subtier-T .zh-stat__value { color: #a8b2c4; }
.zh-subtier-W .zh-stat__value { color: #71717a; }
@keyframes zh-subtier-pulse {
0%, 100% {
text-shadow: 0 0 14px rgba(251,191,36,0.5);
filter: brightness(1);
transform: scale(1);
letter-spacing: 0.01em;
}
50% {
text-shadow:
0 0 26px rgba(251,191,36,0.95),
0 0 6px rgba(254,240,138,0.85),
0 0 48px rgba(251,191,36,0.4);
filter: brightness(1.25);
transform: scale(1.06);
letter-spacing: 0.05em;
}
}
/* ========================================================================
Kebab menu (dropdown actions)
======================================================================== */
/* FIX KEBAB-01: the menu used to "fly to the top of the page" when the
user opened it after scrolling. Cause: .zh-iconbtn-wrap had no
`position` set, so the menu's `position:absolute; top:100%; right:0`
resolved against the next positioned ancestor — usually the entire
modal. Anchoring the wrap with position:relative pins the menu
directly below the kebab button regardless of scroll/viewport. */
.zh-iconbtn-wrap {
position: relative;
}
.zh-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--zh-bg-2);
border: 1px solid var(--zh-line-strong);
border-radius: var(--zh-radius-sm);
box-shadow: 0 20px 50px -10px rgba(0,0,0,0.7), 0 0 0 1px var(--zh-line);
padding: 6px;
z-index: 50;
animation: zh-fade-up 0.18s var(--zh-ease) both;
display: none;
}
.zh-menu.is-open { display: block; }
.zh-menu__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 6px;
font-size: 13px;
color: var(--zh-fg);
cursor: pointer;
background: transparent;
border: none;
width: 100%;
text-align: left;
font-family: inherit;
transition: all 0.15s;
}
.zh-menu__item:hover {
background: var(--zh-bg-3);
color: var(--zh-blue);
}
.zh-menu__item.is-danger:hover {
background: rgba(239,68,68,0.1);
color: var(--zh-dnd);
}
.zh-menu__item svg { opacity: 0.7; }
.zh-menu__item:hover svg { opacity: 1; }
.zh-menu__sep {
height: 1px;
background: var(--zh-line);
margin: 4px 0;
}
.zh-header__actions { position: relative; }
.zh-iconbtn-wrap { position: relative; }
/* ========================================================================
Particles (SVG dots floating in banner area)
======================================================================== */
@keyframes zh-particle-float {
0% { transform: translate(0,0); opacity: 0; }
20% { opacity: 0.6; }
100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.zh-particle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 999px;
background: var(--zh-blue);
box-shadow: 0 0 8px var(--zh-blue);
pointer-events: none;
animation: zh-particle-float linear infinite;
}
/* ════════════════════════════════════════════════════════════════════
PROFILE MODAL V2 — Safety overrides (post-handoff integration)
These rules are NOT part of the design handoff — they patch around
issues where the entry animations leave elements at opacity:0 in
environments with prefers-reduced-motion enabled or where the CSS
animations get throttled / skipped by the browser.
Behavior:
- Users with prefers-reduced-motion: reduce skip animations entirely
and see the end state immediately (avatar, name, kebab visible).
- Otherwise the animations run normally as designed.
════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.zh-modal-backdrop,
.zh-modal-backdrop *,
.zh-modal,
.zh-modal *,
.zh-banner,
.zh-banner *,
.zh-header,
.zh-stats,
.zh-stat,
.zh-section,
.zh-roles,
.zh-role,
.zh-role--extra,
.zh-details,
.zh-detail {
animation-duration: 0.001s !important;
animation-delay: 0s !important;
transition-duration: 0.001s !important;
}
}
/* Defensive fallback: if for any reason the entry animation does not
complete (browser throttling, scheduling glitch), ensure the header
and main sections remain visible. The .zh-modal-ready class is
added by clans-engine.js once the modal has been inserted. */
.zh-modal-backdrop.zh-modal-ready .zh-header,
.zh-modal-backdrop.zh-modal-ready .zh-stats,
.zh-modal-backdrop.zh-modal-ready .zh-section {
opacity: 1 !important;
transform: none !important;
}
/* AVATAR-FIX (2026-05-17): unconditional opacity:1 floor. The previous
safety-net was gated behind a `zh-modal-ready` class added 1.5s after
open via setTimeout — but the user reported the header invisible long
past that, meaning the safety class wasn't sticking on every code path.
This rule applies to the modal sections inside ANY backdrop, so the
avatar + name row can never be stuck at opacity 0 regardless of
animation state. Slide-up still runs via transform. */
.zh-modal-backdrop .zh-header,
.zh-modal-backdrop .zh-stats,
.zh-modal-backdrop .zh-section {
opacity: 1 !important;
}
/* ──────────────────────────────────────────────────────────
FIX (visual QA): Modal V2 mobile overflow.
The handoff CSS hardcodes `.zh-modal { width: 600px }` with
no max-width. On viewports < 600px (phones, narrow tablets)
the modal escaped horizontally — content cut, scroll bar
appears, kebab/close buttons partially off-screen.
We respect the 600px target on desktop and clamp to the
viewport with a sane gutter on mobile. Additionally, the
handoff modal didn't have horizontal padding inside the
backdrop, so we add a small one to keep edge contact tidy.
────────────────────────────────────────────────────────── */
.zh-modal-backdrop {
/* Allow some breathing room around the modal on small screens */
padding: 16px;
}
.zh-modal {
/* min(600px, viewport - gutters) preserves the design width on
desktop while staying inside the viewport on mobile. */
width: min(600px, calc(100vw - 32px)) !important;
max-width: 100% !important;
max-height: min(88vh, calc(100vh - 32px)) !important;
}
@media (max-width: 480px) {
.zh-modal-backdrop { padding: 8px; }
.zh-modal {
width: calc(100vw - 16px) !important;
border-radius: 18px !important; /* the design uses larger radius; tighten on phones */
}
/* Stat grid was 4 columns at desktop — at very narrow widths the
stat values clip; let it wrap to 2 columns. */
.zh-stats {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ──────────────────────────────────────────────────────────
FIX NEW-07: Modal banner looked "mocho" (chopped/empty) when
the user has no Discord banner. The handoff CSS forces the
.zh-banner area to 200px tall and the .zh-banner__img is
absolutely sized regardless of src. With banner=null, the
![]()
renders empty alt-text inside a 200px slab → reads as
wasted space. We:
1. Hide an empty-src banner image so it doesn't paint a
broken-image alt frame.
2. Shrink the banner area to 130px when no image is present
(the gradient fallback still looks intentional and the
avatar/name move up correspondingly).
The zh-header margin-top:-56px pulls the avatar up over the
banner so a 130px banner still leaves room for the polygon.
────────────────────────────────────────────────────────── */
.zh-banner__img:not([src]),
.zh-banner__img[src=""],
.zh-banner__img[src="null"] {
display: none !important;
}
/* When the image is hidden / src is empty, collapse the banner. */
.zh-banner:has(.zh-banner__img:not([src])),
.zh-banner:has(.zh-banner__img[src=""]),
.zh-banner:has(.zh-banner__img[src="null"]) {
height: 130px;
}
/* Fallback for browsers without :has() support — JS adds .zh-banner--empty */
.zh-banner.zh-banner--empty { height: 130px; }
.zh-banner.zh-banner--empty .zh-banner__img { display: none !important; }
/* ──────────────────────────────────────────────────────────
FEATURE ANIM-01: Microsoft Store-style hover for CLAN CARDS
The user requested a subtle "lift + scale + parallax inner-image"
reveal on hover, similar to how Microsoft Store cards behave.
This applies ONLY to clan-directory cards (.ow-dir-card / .dir-pod-card),
NOT to individual member profile cards inside a clan.
────────────────────────────────────────────────────────── */
.ow-dir-card.dir-pod-card,
.dir-pod-card {
/* Promote each card to its own compositing layer for smoother
transforms. Without this the card paint reflows. */
will-change: transform, box-shadow;
transform-origin: 50% 60%;
/* HOVER-POLISH-01 (2026-05-16): longer, softer easing so the lift floats
in instead of snapping. Previous 0.45s ease-out felt abrupt. */
transition:
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s ease;
}
/* FIX HOVER-MOBILE-01: only fire the lift/scale/glow on devices that have a
real hover-capable pointer. On touch devices (phones, tablets) ":hover"
gets latched on tap and doesn't release until the user taps elsewhere —
that produced a stuck/scaled card sitting above its row. We gate the
whole hover block behind @media (hover: hover) so taps just navigate
without animation. */
@media (hover: hover) and (pointer: fine) {
.ow-dir-card.dir-pod-card:hover,
.dir-pod-card:hover {
/* HOVER-POLISH-01: float-up rather than punch-forward.
translateY(-4px) + tiny scale(1.008) keeps motion subtle. */
transform: translateY(-4px) scale(1.008) !important;
border-color: var(--ow-border-hover) !important;
box-shadow:
0 18px 38px -12px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.04),
0 0 24px rgba(59, 130, 246, 0.08) !important;
z-index: 10;
}
/* Parallax-ish: inner image scales just enough to feel depth-aware. */
.ow-dir-card.dir-pod-card:hover .ow-dir-banner-img,
.dir-pod-card:hover .ow-dir-banner-img {
transform: scale(1.04) !important;
filter: brightness(0.88) saturate(1.08) !important;
}
.ow-dir-card.dir-pod-card:hover .ow-dir-banner-img--logo,
.dir-pod-card:hover .ow-dir-banner-img--logo {
/* Logo-as-backdrop variant — softer brightness step. */
transform: scale(1.04) !important;
filter: brightness(0.62) saturate(1.18) contrast(1.05) !important;
}
/* Rank #1 (champion) — softened gold glow (was 0 0 50px @ 0.32). */
.ow-rank-1.ow-dir-card.dir-pod-card:hover,
.rank-1.dir-pod-card:hover {
box-shadow:
0 22px 44px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(245, 158, 11, 0.1),
0 0 24px rgba(245, 158, 11, 0.14) !important;
}
}
/* Banner-image transition still applies on all devices — when the card
re-renders or animates in via owDirFadeUp it benefits from a smooth
transform. Just no hover transform on touch. */
.ow-dir-card.dir-pod-card .ow-dir-banner-img,
.dir-pod-card .ow-dir-banner-img {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
/* FIX MOBILE-CARDS-01: collapse the fixed-height leader chips wrapper on
narrow / single-column layouts. The fixed height (125/155px) was put in
place so cards in a multi-column grid stayed visually aligned even when
one had 1 leader and another had 3. In a 1-column mobile layout there's
nothing to align with → the height becomes dead empty space below the
sole chip. We override it back to auto on viewports where the directory
grid collapses to a single column. */
@media (max-width: 600px) {
.ow-dir-card .ow-dir-leader-chips,
.dir-pod-card .ow-dir-leader-chips {
height: auto !important;
min-height: 0 !important;
}
}
/* Honor reduced-motion users: no transform, just border color shift */
@media (prefers-reduced-motion: reduce) {
.ow-dir-card.dir-pod-card,
.dir-pod-card,
.ow-dir-card.dir-pod-card .ow-dir-banner-img,
.dir-pod-card .ow-dir-banner-img {
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
will-change: auto !important;
}
.ow-dir-card.dir-pod-card:hover,
.dir-pod-card:hover,
.ow-dir-card.dir-pod-card:hover .ow-dir-banner-img,
.dir-pod-card:hover .ow-dir-banner-img,
.ow-dir-card.dir-pod-card:hover .ow-dir-banner-img--logo,
.dir-pod-card:hover .ow-dir-banner-img--logo {
transform: none !important;
}
}
/* ══════════════════════════════════════
PREMIUM v2 — Hero, Champion, Particles,
Counters, Kills Rank1, Button Hovers
══════════════════════════════════════ */
/* ── Keyframes ── */
@keyframes owHeroGrad {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* HOVER-POLISH-01 (2026-05-16): softened champion pulse — peak glow opacity
roughly halved (0.55 → 0.22, 0.28 → 0.10) so the yellow whisper instead
of shouts. User feedback: "la animacion amarilla esa del clan campeon
se ve fea". */
@keyframes owChampGlow {
0%,100% {
box-shadow:
0 0 10px rgba(245,158,11,0.06),
0 0 24px rgba(245,158,11,0.03),
0 18px 36px rgba(0,0,0,0.36);
}
50% {
box-shadow:
0 0 26px rgba(245,158,11,0.22),
0 0 58px rgba(245,158,11,0.10),
0 0 100px rgba(245,158,11,0.05),
0 22px 46px rgba(0,0,0,0.45);
}
}
@keyframes owChampAuraSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes owChampBadgePulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.82; transform: scale(1.07); }
}
@keyframes owKillsRank1Bg {
0%,100% { background-color: rgba(245,158,11,0.05); }
50% { background-color: rgba(245,158,11,0.12); }
}
@keyframes owCardBorderSweep {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes owStatCountIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Hero H1 ── */
.ow-hero-h1-premium {
animation: owDirFadeUp .8s cubic-bezier(0.16,1,0.3,1) both;
will-change: opacity, transform;
}
.ow-hero-gradient-text {
background: linear-gradient(270deg, #93c5fd, #a78bfa, #f0abfc, #34d399, #93c5fd);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: owHeroGrad 6s ease infinite;
}
[data-theme="light"] .ow-hero-gradient-text {
background: linear-gradient(270deg, #2563eb, #7c3aed, #be185d, #047857, #2563eb);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: owHeroGrad 6s ease infinite;
}
/* ── Hero description (below H1) ── */
.ow-hero-desc {
color: rgba(240,240,245,0.72);
font-size: 1.05rem;
max-width: 520px;
margin: 0 auto;
font-weight: 500;
animation: owDirFadeUp .8s cubic-bezier(0.16,1,0.3,1) .15s both;
}
[data-theme="light"] .ow-hero-desc { color: rgba(30,30,50,0.65); }
/* ── Particles canvas ── */
.ow-particles-canvas {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.55;
}
.ow-banner-particles-canvas {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.4;
}
/* ── Uniform clan card hover (all .ow-dir-card) ── */
.ow-dir-card, .dir-pod-card {
position: relative !important;
}
/* Sweep shimmer overlay on hover */
.ow-dir-card::after, .dir-pod-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255,255,255,0.055) 50%,
transparent 70%
);
background-size: 200% 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.ow-dir-card:hover::after, .dir-pod-card:hover::after {
opacity: 1;
animation: owCardBorderSweep 1.2s linear infinite;
}
/* ── Champion card ── */
.ow-rank-1 {
overflow: visible !important;
}
/* Spinning aura ring (injected div) */
.ow-champ-ring {
position: absolute;
inset: -2px;
border-radius: 34px;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.ow-champ-ring::before {
content: '';
position: absolute;
width: 220%;
height: 220%;
top: -60%;
left: -60%;
/* HOVER-POLISH-01 (2026-05-16): user feedback "la animacion amarilla esa
del clan campeon se ve fea". Softened the gold ring — the saturated
#ffd73c peak is gone, replaced with a much more restrained amber whisper
that still reads as "champion" without screaming. Spin is slower too
(5.5s vs 3.5s) so it feels stately, not frantic. */
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 150deg,
rgba(245,158,11,0.22) 170deg,
rgba(250,200,90,0.36) 180deg,
rgba(245,158,11,0.22) 190deg,
transparent 210deg,
transparent 360deg
);
animation: owChampAuraSpin 5.5s linear 1.2s infinite;
}
/* Inner card div — glow animation (class injected in JS) */
.ow-rank1-inner {
/* HOVER-POLISH-01: softer base border + lower-opacity pulse via the
keyframe (owChampGlow lives in this same stylesheet). */
animation: owChampGlow 4.5s ease-in-out 1.5s infinite !important;
border-color: rgba(245,158,11,0.18) !important;
}
/* Champion badge text pulse */
.ow-champ-badge-text {
display: inline-block;
animation: owChampBadgePulse 2.2s ease-in-out infinite;
}
/* ── Kills rank #1 row ── */
.ow-kills-rank1 {
animation: owKillsRank1Bg 2.5s ease-in-out infinite;
border-radius: 10px;
}
.ow-kills-rank1 .rank {
color: var(--ow-gold) !important;
font-size: 1.25rem !important;
font-weight: 900 !important;
}
.ow-kills-rank1 .avatar {
box-shadow: 0 0 0 2px rgba(245,158,11,0.7), 0 0 14px rgba(245,158,11,0.35) !important;
}
.ow-kills-rank1 .name {
font-size: 1rem !important;
font-weight: 800 !important;
}
.ow-kills-rank1 .score {
color: var(--ow-gold) !important;
font-size: 1.05rem !important;
font-weight: 900 !important;
}
/* ── Animated counter ── */
.ow-stat-counting {
animation: owStatCountIn 0.35s ease-out both;
}
/* ── Enhanced nav/button hovers ── */
.btn-apple {
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
background 0.25s ease,
border-color 0.25s ease !important;
}
.btn-apple:hover {
transform: translateY(-3px) scale(1.04) !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.28) !important;
}
/* V28: tab transitions now defined in the primary .ow-tab-btn rule above.
Keeping only the !important hover color override for legacy compat. */
.ow-tab-btn:hover:not(.active) {
color: var(--ow-text) !important;
}
.ow-back-btn {
transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-back-btn:hover {
background: rgba(255,255,255,0.2) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}
.ow-filter-btn {
transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-filter-btn:hover:not(.active) {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
border-color: var(--ow-border-hover);
}
.ow-page-btn {
transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-page-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.ow-lb-pill {
transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-lb-pill:hover:not(.active) {
transform: translateY(-1px);
border-color: var(--ow-border-hover);
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
/* ── Reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
.ow-hero-gradient-text,
.ow-champ-ring::before,
.ow-rank1-inner,
.ow-kills-rank1,
.ow-champ-badge-text,
.ow-particles-canvas,
.ow-banner-particles-canvas,
.ow-dir-card::after,
.dir-pod-card::after {
animation: none !important;
transition: none !important;
}
}
/* ═══════════════════════════════════════════════════════════
OneWay Main HQ section — featured "headquarters" card on the
clans directory. Hardcoded guild 1417173139778965692 (live
data hydrated from /api/public/main-hq when available).
═══════════════════════════════════════════════════════════ */
.ow-hq-section {
--hq-accent: #3b82f6;
--hq-accent-2: #8b5cf6;
max-width: 1400px;
margin: 64px auto 80px;
padding: 0 24px;
animation: owDirFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.ow-hq-shell {
position: relative;
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: 40px;
padding: 44px 48px;
border-radius: 32px;
border: 1px solid var(--ow-border);
background: linear-gradient(135deg, var(--ow-surface) 0%, var(--ow-bg-alt) 100%);
overflow: hidden;
isolation: isolate;
}
.ow-hq-shell::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(800px circle at 0% 0%, rgba(59,130,246,0.10), transparent 50%),
radial-gradient(600px circle at 100% 100%, rgba(139,92,246,0.10), transparent 50%);
pointer-events: none;
}
.ow-hq-aura {
position: absolute;
inset: -2px;
z-index: -1;
border-radius: 34px;
padding: 1px;
background: linear-gradient(135deg, rgba(59,130,246,0.45), rgba(139,92,246,0.15) 45%, rgba(59,130,246,0) 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.ow-hq-media {
display: flex;
align-items: center;
justify-content: center;
}
.ow-hq-media__inner {
position: relative;
width: 220px;
height: 220px;
flex-shrink: 0;
}
.ow-hq-icon {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--ow-surface);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 30px 60px rgba(0,0,0,0.45),
0 0 80px rgba(59,130,246,0.18);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-hq-section:hover .ow-hq-icon { transform: scale(1.03); }
.ow-hq-icon-ring {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid transparent;
background:
conic-gradient(from 0deg, var(--hq-accent), var(--hq-accent-2), var(--hq-accent)) border-box;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: owHQSpin 14s linear infinite;
opacity: 0.7;
pointer-events: none;
}
@keyframes owHQSpin { to { transform: rotate(360deg); } }
.ow-hq-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.ow-hq-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ow-text-muted);
}
.ow-hq-eyebrow__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--hq-accent);
box-shadow: 0 0 14px var(--hq-accent);
animation: owHQPulse 2.2s ease-in-out infinite;
}
@keyframes owHQPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.7; }
}
.ow-hq-eyebrow__txt { color: var(--ow-text); }
.ow-hq-badge {
font-size: 0.6rem;
font-weight: 900;
letter-spacing: 0.16em;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18));
color: var(--hq-accent);
border: 1px solid rgba(59,130,246,0.35);
}
.ow-hq-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
color: var(--ow-text);
}
.ow-hq-desc {
font-size: 0.95rem;
line-height: 1.55;
color: var(--ow-text-muted);
margin: 0;
max-width: 70ch;
}
.ow-hq-stats {
display: flex;
flex-wrap: wrap;
gap: 28px;
padding: 16px 22px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 18px;
width: fit-content;
}
.ow-hq-stat__num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.4rem;
font-weight: 900;
color: var(--ow-text);
letter-spacing: -0.01em;
}
.ow-hq-stat--mono .ow-hq-stat__num {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 1.05rem;
}
.ow-hq-stat__lbl {
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ow-text-muted);
margin-top: 4px;
}
.ow-hq-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 6px;
}
.ow-hq-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
cursor: pointer;
border: 1px solid transparent;
}
.ow-hq-cta--primary {
background: linear-gradient(135deg, var(--hq-accent), var(--hq-accent-2));
color: #fff;
box-shadow: 0 10px 30px rgba(59,130,246,0.32);
}
.ow-hq-cta--primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(59,130,246,0.45);
}
.ow-hq-cta__arrow { transition: transform 0.25s ease; }
.ow-hq-cta--primary:hover .ow-hq-cta__arrow { transform: translateX(4px); }
.ow-hq-cta--ghost {
background: transparent;
color: var(--ow-text);
border-color: var(--ow-border);
}
.ow-hq-cta--ghost:hover {
background: var(--ow-surface-hover, var(--ow-bg-alt));
border-color: var(--ow-border-hover, var(--ow-border));
transform: translateY(-2px);
}
.ow-hq-cta--muted {
background: var(--ow-bg-alt);
color: var(--ow-text-muted);
border-color: var(--ow-border);
cursor: default;
}
/* Light theme tweaks */
[data-theme="light"] .ow-hq-shell {
background: linear-gradient(135deg, var(--ow-surface) 0%, #ffffff 100%);
}
[data-theme="light"] .ow-hq-icon {
box-shadow:
0 0 0 1px rgba(0,0,0,0.05),
0 28px 55px rgba(0,0,0,0.15),
0 0 80px rgba(59,130,246,0.12);
}
/* Responsive: stack on phones */
@media (max-width: 900px) {
.ow-hq-shell {
grid-template-columns: 1fr;
padding: 32px 26px;
gap: 26px;
}
.ow-hq-media__inner { width: 160px; height: 160px; margin: 0 auto; }
.ow-hq-body { text-align: center; align-items: center; }
.ow-hq-stats { margin: 0 auto; }
.ow-hq-actions { justify-content: center; }
.ow-hq-desc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.ow-hq-icon-ring,
.ow-hq-eyebrow__dot { animation: none !important; }
.ow-hq-section { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════
PAIR-COMPACT-01 (2026-05-16): cuando el HQ card y el clan oficial
se renderizan side-by-side dentro de .ow-top-pair, cada celda mide
~620px en escritorio. Las grids internas (logo + texto en 2 columnas)
exprimen el texto y el título se rompe en 3-4 líneas. Solución:
cuando están en el pair, los apilamos verticalmente (logo arriba
centrado, texto abajo) y bajamos los tamaños proporcionalmente.
═══════════════════════════════════════════════════════════ */
/* PAIR-COMPACT-02 (2026-05-16): pasada anterior apiló logo arriba + texto
abajo lo cual los hizo MÁS altos (no compactos). Esta versión los
mantiene HORIZONTALES con logo chico a la izquierda y texto comprimido
a la derecha. Resultado: cada card ~280px en vez de ~700px. */
/* HQ card en modo compact (dentro del pair) — horizontal, logo chico */
.ow-top-pair .ow-hq-shell {
grid-template-columns: 110px 1fr !important;
padding: 22px 24px !important;
gap: 22px !important;
align-items: center !important;
}
.ow-top-pair .ow-hq-media {
align-self: center;
}
.ow-top-pair .ow-hq-media__inner {
width: 100px !important;
height: 100px !important;
margin: 0 !important;
}
.ow-top-pair .ow-hq-icon-ring {
inset: -5px !important;
}
.ow-top-pair .ow-hq-body {
text-align: left;
align-items: flex-start;
gap: 10px !important;
}
.ow-top-pair .ow-hq-eyebrow {
font-size: 0.6rem !important;
gap: 8px !important;
flex-wrap: wrap;
}
.ow-top-pair .ow-hq-badge {
font-size: 0.55rem !important;
padding: 3px 8px !important;
}
.ow-top-pair .ow-hq-title {
font-size: clamp(1.2rem, 1.7vw, 1.5rem) !important;
line-height: 1.15 !important;
}
.ow-top-pair .ow-hq-desc {
max-width: 100% !important;
font-size: 0.78rem !important;
line-height: 1.45 !important;
/* Clamp a 2 líneas para mantener la card baja — display !important
porque sin él la regla de default (display:block) puede pisar. */
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden !important;
}
.ow-top-pair .ow-hq-stats {
margin: 4px 0 0 0;
gap: 12px !important;
padding: 8px 12px !important;
width: auto;
}
.ow-top-pair .ow-hq-stat__num { font-size: 1rem !important; }
.ow-top-pair .ow-hq-stat--mono .ow-hq-stat__num { font-size: 0.78rem !important; }
.ow-top-pair .ow-hq-stat__lbl { font-size: 0.5rem !important; }
.ow-top-pair .ow-hq-actions {
justify-content: flex-start;
gap: 8px !important;
margin-top: 2px !important;
}
.ow-top-pair .ow-hq-cta {
padding: 8px 14px !important;
font-size: 0.65rem !important;
border-radius: 9px !important;
}
/* Official clan card en modo compact (dentro del pair) — usa classes
explícitas (.ow-oc-logo-col / .ow-oc-body-col) en lugar de :nth-of-type
porque el __card tiene ![]()
+ overlay
+ 2 col divs y los
selectores posicionales pisaban el div equivocado. */
.ow-top-pair .ow-official-clan__card {
grid-template-columns: 130px 1fr !important;
}
.ow-top-pair .ow-oc-logo-col {
padding: 22px 18px !important;
gap: 10px !important;
justify-content: center !important;
}
.ow-top-pair .ow-oc-logo-col > img {
width: 95px !important;
height: 95px !important;
border-radius: 18px !important;
box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6), 0 0 35px rgba(91,140,255,0.22) !important;
}
.ow-top-pair .ow-oc-logo-col > .mono {
font-size: 9px !important;
padding: 4px 10px !important;
letter-spacing: 0.12em !important;
}
.ow-top-pair .ow-oc-body-col {
padding: 22px 24px 22px 14px !important;
gap: 10px !important;
text-align: left !important;
align-items: flex-start !important;
justify-content: center !important;
}
.ow-top-pair .ow-oc-body-col > h2 {
font-size: clamp(1.25rem, 1.8vw, 1.55rem) !important;
text-align: left !important;
line-height: 1.1 !important;
margin: 0 !important;
}
.ow-top-pair .ow-oc-body-col > .ow-oc-desc {
font-size: 0.78rem !important;
text-align: left !important;
max-width: 100% !important;
line-height: 1.45 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden !important;
margin: 0 !important;
}
.ow-top-pair .ow-oc-body-col > .mono {
justify-content: flex-start !important;
font-size: 9px !important;
}
.ow-top-pair .ow-oc-stats {
padding: 8px 12px !important;
gap: 14px !important;
}
.ow-top-pair .ow-oc-stats > div > div:first-child {
font-size: 1rem !important;
}
.ow-top-pair .ow-oc-stats > div > div:nth-child(2) {
font-size: 0.48rem !important;
}
.ow-top-pair .ow-oc-ctas {
gap: 8px !important;
margin-top: 0 !important;
}
.ow-top-pair .ow-oc-ctas > a {
padding: 8px 14px !important;
font-size: 12px !important;
border-radius: 9px !important;
}
/* Phones: cuando el pair colapsa a 1 columna, restauramos algo de
tamaño porque ahora cada card es full-width, no compite. */
@media (max-width: 1100px) {
.ow-top-pair .ow-hq-shell {
grid-template-columns: 130px 1fr !important;
padding: 24px 26px !important;
}
.ow-top-pair .ow-hq-media__inner {
width: 120px !important;
height: 120px !important;
}
.ow-top-pair .ow-hq-title { font-size: clamp(1.4rem, 3vw, 1.85rem) !important; }
.ow-top-pair .ow-hq-desc {
-webkit-line-clamp: 3;
font-size: 0.86rem !important;
}
}
/* Phones extra-narrow: caen a stack vertical */
@media (max-width: 700px) {
.ow-top-pair .ow-hq-shell,
.ow-top-pair .ow-official-clan__card {
grid-template-columns: 1fr !important;
}
.ow-top-pair .ow-hq-body,
.ow-top-pair .ow-official-clan__card > div:nth-of-type(2) {
text-align: center !important;
align-items: center !important;
}
.ow-top-pair .ow-hq-media__inner {
margin: 0 auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
.board content tabs · Galería + Anuncios + Sets
═══════════════════════════════════════════════════════════ */
.ow-loader-inline {
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 60px 24px; color: var(--ow-text-muted, #9aa0ab);
font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: 0.06em;
}
.ow-empty-state {
padding: 56px 24px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 14px;
color: var(--ow-text-muted, #9aa0ab);
}
.ow-empty-icon {
font-size: 36px; line-height: 1; opacity: 0.7;
background: var(--ow-bg-alt, rgba(255,255,255,0.04));
border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
border-radius: 14px; padding: 14px 18px;
}
.ow-empty-state h3 { color: var(--ow-text, #fff); font-weight: 700; }
.ow-empty-state p code, .ow-sets-footer code {
background: var(--ow-surface, #14171f); padding: 2px 6px; border-radius: 4px;
font-family: 'Geist Mono', monospace; font-size: 12px;
border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
}
.ow-sets-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; padding: 0 4px;
}
.ow-sets-header h3 {
font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
}
.ow-sets-count {
font-family: 'Geist Mono', monospace; font-size: 11px;
color: var(--ow-text-muted, #9aa0ab); letter-spacing: 0.08em;
padding: 4px 10px; border-radius: 999px;
background: var(--ow-bg-alt, rgba(255,255,255,0.04));
border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
}
.ow-sets-footer {
margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--ow-border);
font-size: 12px; color: var(--ow-text-muted); text-align: center;
}
/* ─────────────── Sets / Score history ─────────────── */
.ow-sets-wrap { padding: 4px 0 8px; }
.ow-sets-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ow-set-card {
background: var(--ow-surface, #14171f);
border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
border-radius: 14px; padding: 14px;
transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.ow-set-card:hover {
border-color: var(--ow-border-hover, rgba(255,255,255,0.16));
transform: translateY(-2px);
box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5);
}
.ow-set-card__header {
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
color: var(--ow-text-muted); text-transform: uppercase;
}
.ow-set-card__top {
background: color-mix(in srgb, var(--ow-accent, #5B8CFF) 12%, transparent);
color: var(--ow-accent, #5B8CFF);
padding: 3px 8px; border-radius: 5px; font-weight: 700;
}
.ow-set-card__autowin {
background: color-mix(in srgb, #f59e0b 16%, transparent);
color: #f59e0b; padding: 3px 8px; border-radius: 5px; font-weight: 700;
}
.ow-set-card__ago { margin-left: auto; font-size: 10px; }
.ow-set-card__match {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
}
.ow-set-card__vs {
font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
color: var(--ow-text-muted); text-transform: uppercase; padding: 0 6px;
}
.ow-set-player {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 8px;
background: var(--ow-bg-alt, rgba(255,255,255,0.03));
border: 1px solid var(--ow-border, rgba(255,255,255,0.06));
border-radius: 10px; text-align: center;
}
.ow-set-player--win {
background: color-mix(in srgb, #22c55e 10%, var(--ow-bg-alt));
border-color: color-mix(in srgb, #22c55e 35%, var(--ow-border));
}
.ow-set-player__avatar {
width: 40px; height: 40px; border-radius: 50%;
object-fit: cover; border: 1px solid var(--ow-border);
}
.ow-set-player__avatar--initial {
display: inline-flex; align-items: center; justify-content: center;
background: var(--ow-surface); color: var(--ow-text-dim);
font-weight: 700; font-size: 14px;
}
.ow-set-player__name {
font-size: 12px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.ow-set-player__rank {
font-family: 'Geist Mono', monospace; font-size: 10px;
color: var(--ow-text-muted); margin-left: 3px;
}
.ow-set-player__score {
font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 800;
color: var(--ow-text); letter-spacing: -0.02em; line-height: 1;
}
.ow-set-player--win .ow-set-player__score { color: #22c55e; }
.ow-set-card__notes {
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed var(--ow-border);
font-size: 12px; color: var(--ow-text-dim); line-height: 1.5;
}
/* ─────────────── Galería del clan ─────────────── */
.ow-gallery-wrap { padding: 4px 0 8px; }
.ow-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.ow-gal-item {
margin: 0;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 12px; overflow: hidden;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
display: flex; flex-direction: column;
}
.ow-gal-item:hover {
transform: translateY(-3px);
border-color: var(--ow-border-hover, rgba(255,255,255,0.18));
box-shadow: 0 16px 36px -16px rgba(0,0,0,0.55);
}
.ow-gal-item__media {
aspect-ratio: 4 / 3; background: var(--ow-bg-alt);
overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.ow-gal-item__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-gal-item:hover .ow-gal-item__media img { transform: scale(1.04); }
.ow-gal-broken { filter: grayscale(1) brightness(0.6); }
.ow-gal-item__cap {
font-size: 13px; padding: 10px 12px 4px; color: var(--ow-text);
line-height: 1.4;
}
.ow-gal-item__meta {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px 10px; font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.08em; color: var(--ow-text-muted);
}
.ow-gal-item__ago { white-space: nowrap; }
/* ─────────────── Anuncios cards ─────────────── */
.ow-anuncios-wrap { padding: 4px 0 8px; }
.ow-anuncios-list {
display: flex; flex-direction: column; gap: 14px;
}
.ow-anuncio-card {
display: grid; grid-template-columns: minmax(140px, 240px) 1fr;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 14px; overflow: hidden;
transition: border-color 0.22s ease, transform 0.22s ease;
}
.ow-anuncio-card:hover {
border-color: var(--ow-border-hover, rgba(255,255,255,0.16));
transform: translateY(-1px);
}
.ow-anuncio-card:not(:has(.ow-anuncio-card__img)) { grid-template-columns: 1fr; }
.ow-anuncio-card__img {
width: 100%; height: 100%; min-height: 140px; object-fit: cover;
border-right: 1px solid var(--ow-border);
}
.ow-anuncio-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ow-anuncio-card__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
}
.ow-anuncio-card__title {
font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.ow-anuncio-card__time {
font-family: 'Geist Mono', monospace; font-size: 10px;
color: var(--ow-text-muted); letter-spacing: 0.08em;
white-space: nowrap;
}
.ow-anuncio-card__text {
margin: 0; font-size: 14px; line-height: 1.55;
color: var(--ow-text-dim); white-space: pre-wrap;
}
.ow-anuncio-card__foot {
margin-top: auto; padding-top: 8px;
font-family: 'Geist Mono', monospace; font-size: 10px;
color: var(--ow-text-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.ow-anuncio-card__foot span { color: var(--ow-text); }
/* Responsive */
@media (max-width: 720px) {
.ow-anuncio-card { grid-template-columns: 1fr; }
.ow-anuncio-card__img { min-height: 180px; max-height: 220px; }
.ow-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ow-sets-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
CLANS-PUBLIC-01 (2026-05-17)
Premium UI for the new tabs (Galería, PvP/Sets, Postulaciones),
redesigned leaderboards (podium + bars), and overview sidebar
(InvitaCard + Anuncios + Vacancies). Works in dark & light mode
via the existing --ow-* token system.
═══════════════════════════════════════════════════════════════ */
/* ── Tab head (shared header for all new tabs) ── */
.ow-tab-head {
display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.ow-tab-head__bar {
width: 4px; height: 24px; border-radius: 4px;
}
.ow-tab-head__title {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.4rem; font-weight: 800;
color: var(--ow-text);
letter-spacing: -0.02em;
}
.ow-tab-head__count {
font-family: 'Geist Mono', 'JetBrains Mono', monospace;
font-size: 0.72rem; font-weight: 600;
color: var(--ow-text-muted);
letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 10px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 999px;
}
/* ── GALERÍA ── */
.ow-gal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.ow-gal-tile {
position: relative; margin: 0;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
aspect-ratio: 4 / 3;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
border-color 0.25s ease,
box-shadow 0.35s ease;
}
.ow-gal-tile:hover {
transform: translateY(-3px);
border-color: var(--ow-border-hover);
box-shadow: var(--ow-shadow);
}
.ow-gal-tile img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ow-gal-tile:hover img { transform: scale(1.06); }
.ow-gal-tile figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 28px 14px 10px;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
display: flex; align-items: flex-end; justify-content: space-between;
gap: 8px;
color: #fff;
pointer-events: none;
}
.ow-gal-cap {
font-size: 0.78rem; font-weight: 600;
line-height: 1.35;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ow-gal-cap--muted { opacity: 0.55; font-style: italic; }
.ow-gal-when {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem; opacity: 0.7;
white-space: nowrap;
}
/* Lightbox */
#ow-lightbox {
position: fixed; inset: 0; z-index: 10010;
background: rgba(0,0,0,0.93);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 20px 60px;
cursor: zoom-out;
animation: owFadeIn 0.18s ease;
}
#ow-lightbox img {
max-width: min(92vw, 1400px);
max-height: 82vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.ow-lightbox__close {
position: absolute; top: 20px; right: 24px;
width: 42px; height: 42px;
border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
background: rgba(0,0,0,0.5);
color: #fff; font-size: 18px; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.ow-lightbox__close:hover { background: rgba(255,255,255,0.15); transform: scale(1.05); }
.ow-lightbox__cap {
margin-top: 16px;
color: rgba(255,255,255,0.85);
font-size: 0.95rem; max-width: 92vw;
text-align: center; line-height: 1.5;
}
/* ── PVP / SETS ── */
.ow-pvp-list {
display: flex; flex-direction: column; gap: 14px;
max-width: 920px;
}
.ow-pvp-card {
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 18px;
padding: 16px 20px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ow-pvp-card:hover {
border-color: var(--ow-border-hover);
transform: translateY(-2px);
box-shadow: var(--ow-shadow);
}
.ow-pvp-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.ow-pvp-board {
font-family: 'Geist Mono', monospace;
font-size: 0.66rem; font-weight: 700;
color: #22C55E; letter-spacing: 0.12em; text-transform: uppercase;
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.3);
border-radius: 999px; padding: 4px 10px;
}
.ow-pvp-board--ghost {
color: var(--ow-text-muted);
background: var(--ow-bg-alt);
border-color: var(--ow-border);
}
.ow-pvp-when {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem; color: var(--ow-text-muted);
}
.ow-pvp-card__body {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.ow-pvp-side {
display: flex; align-items: center; gap: 12px;
min-width: 0;
}
.ow-pvp-side--loser { justify-content: flex-end; }
.ow-pvp-avatar {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--ow-border-hover);
}
.ow-pvp-side--winner .ow-pvp-avatar { border-color: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,0.12); }
.ow-pvp-side--loser .ow-pvp-avatar { border-color: rgba(239,68,68,0.5); opacity: 0.85; }
.ow-pvp-meta {
display: flex; flex-direction: column;
min-width: 0;
}
.ow-pvp-meta--right { align-items: flex-end; text-align: right; }
.ow-pvp-label {
font-family: 'Geist Mono', monospace;
font-size: 0.58rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ow-text-muted);
}
.ow-pvp-side--winner .ow-pvp-label { color: #22C55E; }
.ow-pvp-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.96rem; font-weight: 700;
color: var(--ow-text);
letter-spacing: -0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 220px;
}
.ow-pvp-score {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 8px 18px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 14px;
min-width: 84px;
}
.ow-pvp-score > span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.45rem; font-weight: 800;
color: var(--ow-text); letter-spacing: -0.03em;
line-height: 1;
}
.ow-pvp-score > small {
margin-top: 4px;
font-family: 'Geist Mono', monospace;
font-size: 0.6rem; font-weight: 600;
color: var(--ow-text-muted);
letter-spacing: 0.06em;
}
/* ── POSTULACIONES (vacancies) ── */
.ow-apply-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.ow-apply-card {
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 20px;
padding: 22px 22px 18px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ow-apply-card:hover {
border-color: var(--ow-border-hover);
transform: translateY(-3px);
box-shadow: var(--ow-shadow);
}
.ow-apply-card__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 14px;
}
.ow-apply-card__role { min-width: 0; flex: 1; }
.ow-apply-role-eyebrow {
display: block;
font-family: 'Geist Mono', monospace;
font-size: 0.62rem; font-weight: 700;
color: #F59E0B; letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 6px;
}
.ow-apply-card__role h3 {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.18rem; font-weight: 800;
color: var(--ow-text);
letter-spacing: -0.02em;
line-height: 1.25;
}
.ow-apply-status {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 11px;
border: 1px solid;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.ow-apply-desc {
margin: 0;
font-size: 0.88rem; line-height: 1.55;
color: var(--ow-text-dim);
}
.ow-apply-block h4 {
margin: 0 0 8px;
font-family: 'Geist Mono', monospace;
font-size: 0.62rem; font-weight: 700;
color: var(--ow-text-muted);
letter-spacing: 0.14em; text-transform: uppercase;
}
.ow-apply-reqs {
margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 5px;
}
.ow-apply-reqs li {
position: relative;
padding-left: 16px;
font-size: 0.85rem; line-height: 1.45;
color: var(--ow-text-dim);
}
.ow-apply-reqs li::before {
content: '';
position: absolute; left: 0; top: 9px;
width: 6px; height: 6px;
border-radius: 50%; background: #F59E0B;
opacity: 0.9;
}
.ow-apply-tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
.ow-apply-tags span {
font-family: 'Geist Mono', monospace;
font-size: 0.66rem; font-weight: 600;
color: var(--ow-text-dim);
padding: 3px 9px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 6px;
}
.ow-apply-card__foot {
margin-top: auto;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px dashed var(--ow-border);
}
.ow-apply-meta {
display: flex; flex-direction: column;
font-family: 'Geist Mono', monospace;
font-size: 0.66rem; color: var(--ow-text-muted);
gap: 2px;
}
.ow-apply-slots { color: var(--ow-text); font-weight: 700; letter-spacing: 0.04em; }
.ow-apply-deadline { letter-spacing: 0.04em; }
.ow-apply-cta {
display: inline-flex; align-items: center; justify-content: center;
padding: 9px 18px;
background: var(--ow-accent);
color: #fff;
border: 1px solid var(--ow-accent);
border-radius: 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.82rem; font-weight: 700;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ow-apply-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(59,130,246,0.35);
}
.ow-apply-cta--disabled {
background: var(--ow-bg-alt);
color: var(--ow-text-muted);
border-color: var(--ow-border);
cursor: not-allowed;
}
.ow-apply-cta--disabled:hover { transform: none; box-shadow: none; }
/* ── LEADERBOARD PREMIUM REDESIGN (podium + rows + bars) ── */
.ow-lb-header--v2 {
display: flex; align-items: center; gap: 14px;
padding-bottom: 16px;
border-bottom: 1px dashed var(--ow-border);
margin-bottom: 22px;
}
.ow-lb-podium {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 14px;
align-items: end;
margin-bottom: 30px;
max-width: 760px;
margin-left: auto; margin-right: auto;
}
.ow-lb-podium__slot {
position: relative;
display: flex; flex-direction: column;
align-items: center;
gap: 8px;
padding: 22px 14px 18px;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 18px;
cursor: pointer;
text-align: center;
font-family: inherit;
color: var(--ow-text);
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
border-color 0.25s ease,
box-shadow 0.35s ease;
animation: owDirFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) both;
}
.ow-lb-podium__slot:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(0,0,0,0.28);
}
.ow-lb-podium__slot--1 {
padding: 28px 16px 22px;
border-color: rgba(245,158,11,0.45);
background: linear-gradient(160deg, var(--ow-surface) 0%, rgba(245,158,11,0.08) 100%);
animation-delay: 0.18s;
}
.ow-lb-podium__slot--2 {
border-color: rgba(148,163,184,0.35);
animation-delay: 0.06s;
}
.ow-lb-podium__slot--3 {
border-color: rgba(217,119,6,0.35);
animation-delay: 0.28s;
}
.ow-lb-podium__crown { font-size: 1.4rem; line-height: 1; }
.ow-lb-podium__slot--1 .ow-lb-podium__crown { font-size: 1.9rem; }
.ow-lb-podium__avatar-wrap {
position: relative;
width: 72px; height: 72px;
border-radius: 50%;
border: 3px solid;
padding: 3px;
background: var(--ow-bg-alt);
}
.ow-lb-podium__slot--1 .ow-lb-podium__avatar-wrap {
width: 92px; height: 92px;
border-width: 4px;
box-shadow: 0 0 0 6px rgba(245,158,11,0.12);
}
.ow-lb-podium__avatar-wrap img {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
}
.ow-lb-podium__rank {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.7rem; font-weight: 900;
letter-spacing: 0.1em;
}
.ow-lb-podium__name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.94rem; font-weight: 700;
color: var(--ow-text);
letter-spacing: -0.01em;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ow-lb-podium__score {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.35rem; font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
}
.ow-lb-podium__slot--1 .ow-lb-podium__score { font-size: 1.7rem; }
.ow-lb-table--v2 { display: flex; flex-direction: column; gap: 8px; background: transparent; }
.ow-lb-row--v2 {
display: grid;
grid-template-columns: 48px 48px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 18px;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 14px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ow-lb-row--v2:hover {
background: var(--ow-surface-hover);
border-color: var(--ow-border-hover);
transform: translateX(2px);
}
.ow-lb-row__rank {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem; font-weight: 800;
color: var(--ow-text-muted);
text-align: center;
letter-spacing: -0.01em;
}
.ow-lb-row__avatar {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--ow-border-hover);
}
.ow-lb-row__name-block { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ow-lb-row__name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.94rem; font-weight: 700;
color: var(--ow-text);
letter-spacing: -0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ow-lb-row__meta {
font-family: 'Geist Mono', monospace;
font-size: 0.66rem;
color: var(--ow-text-muted);
letter-spacing: 0.04em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ow-lb-row__bar {
height: 4px;
background: var(--ow-bg-alt);
border-radius: 999px;
overflow: hidden;
margin-top: 4px;
}
.ow-lb-row__bar span {
display: block;
height: 100%;
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ow-lb-row__score {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.05rem; font-weight: 800;
color: var(--ow-accent);
letter-spacing: -0.02em;
text-align: right;
white-space: nowrap;
}
/* ── OVERVIEW SIDEBAR: InvitaCard + Anuncios + Vacancies ── */
.ow-side-eyebrow {
margin: 0 0 12px;
font-family: 'Geist Mono', monospace;
font-size: 0.66rem; font-weight: 700;
color: var(--ow-text-muted);
letter-spacing: 0.14em; text-transform: uppercase;
}
.ow-invita-card {
display: block;
position: relative;
padding: 22px 22px 20px;
background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
border-radius: 18px;
text-decoration: none;
color: #fff;
margin-bottom: 18px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
box-shadow: 0 10px 30px rgba(88,101,242,0.28);
}
.ow-invita-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 55%);
pointer-events: none;
}
.ow-invita-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 44px rgba(88,101,242,0.42);
}
.ow-invita-card__top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
position: relative;
}
.ow-invita-card__icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.18);
border-radius: 10px;
}
.ow-invita-card__live {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Geist Mono', monospace;
font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.85);
padding: 4px 9px;
background: rgba(0,0,0,0.25);
border-radius: 999px;
}
.ow-invita-card__dot {
width: 6px; height: 6px; border-radius: 50%;
background: #22C55E;
box-shadow: 0 0 8px #22C55E;
animation: owPulse 1.8s ease-in-out infinite;
}
.ow-invita-card__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.25rem; font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 6px;
position: relative;
}
.ow-invita-card__desc {
font-size: 0.84rem;
line-height: 1.45;
color: rgba(255,255,255,0.78);
margin: 0 0 16px;
position: relative;
}
.ow-invita-card__cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.85rem; font-weight: 700;
letter-spacing: -0.005em;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
}
.ow-invita-card__cta span {
transition: transform 0.25s ease;
}
.ow-invita-card:hover .ow-invita-card__cta { background: rgba(0,0,0,0.42); border-color: rgba(255,255,255,0.32); }
.ow-invita-card:hover .ow-invita-card__cta span { transform: translateX(4px); }
.ow-invita-card--empty {
background: var(--ow-surface);
color: var(--ow-text-dim);
border: 1px dashed var(--ow-border);
box-shadow: none;
text-align: center;
padding: 28px 20px;
}
.ow-invita-card--empty:hover { transform: none; box-shadow: none; }
.ow-invita-card--empty .ow-invita-card__icon {
margin: 0 auto 12px;
background: var(--ow-bg-alt);
color: var(--ow-text-muted);
font-size: 18px;
}
.ow-invita-card--empty h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; margin: 0 0 6px; color: var(--ow-text); }
.ow-invita-card--empty p { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.ow-side-anuncios { margin-bottom: 18px; }
.ow-side-anuncios__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.ow-side-anuncios__head h4 { margin: 0; }
.ow-side-link {
background: none; border: none;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.74rem; font-weight: 700;
color: var(--ow-accent);
cursor: pointer;
padding: 0;
letter-spacing: -0.005em;
}
.ow-side-link:hover { text-decoration: underline; }
.ow-side-anuncios__list { display: flex; flex-direction: column; gap: 10px; }
.ow-side-anuncio {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 14px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 12px;
text-align: left;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
font-family: inherit;
color: var(--ow-text);
}
.ow-side-anuncio:hover {
background: var(--ow-surface-hover);
border-color: var(--ow-border-hover);
transform: translateX(2px);
}
.ow-side-anuncio__pin {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem; font-weight: 700;
color: #F59E0B; letter-spacing: 0.12em; text-transform: uppercase;
}
.ow-side-anuncio h4 {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.92rem; font-weight: 700;
color: var(--ow-text); letter-spacing: -0.01em;
line-height: 1.3;
}
.ow-side-anuncio p {
margin: 0;
font-size: 0.78rem; line-height: 1.45;
color: var(--ow-text-dim);
}
.ow-side-anuncio__when {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem;
color: var(--ow-text-muted);
letter-spacing: 0.06em;
}
.ow-side-vacancies {
display: flex; align-items: center; gap: 14px;
width: 100%;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.05) 100%);
border: 1px solid rgba(245,158,11,0.35);
border-radius: 14px;
cursor: pointer;
margin-bottom: 18px;
text-align: left;
font-family: inherit;
color: var(--ow-text);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ow-side-vacancies:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(245,158,11,0.15);
border-color: rgba(245,158,11,0.55);
}
.ow-side-vacancies__icon {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(245,158,11,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.ow-side-vacancies__body { display: flex; flex-direction: column; flex: 1; }
.ow-side-vacancies__count {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.4rem; font-weight: 800;
color: #F59E0B; letter-spacing: -0.02em;
line-height: 1;
}
.ow-side-vacancies__label {
font-family: 'Geist Mono', monospace;
font-size: 0.68rem; font-weight: 700;
color: var(--ow-text-muted);
letter-spacing: 0.1em; text-transform: uppercase;
margin-top: 4px;
}
.ow-side-vacancies__arrow {
font-size: 1.1rem; color: #F59E0B;
transition: transform 0.25s ease;
}
.ow-side-vacancies:hover .ow-side-vacancies__arrow { transform: translateX(4px); }
.ow-side-desc__body {
margin: 0;
font-size: 0.86rem; line-height: 1.55;
color: var(--ow-text-dim);
}
/* ── Responsive ── */
@media (max-width: 720px) {
.ow-gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ow-lb-podium { grid-template-columns: 1fr; max-width: 360px; }
.ow-lb-podium__slot--1 { order: -1; }
.ow-lb-row--v2 { grid-template-columns: 36px 38px 1fr auto; gap: 10px; padding: 10px 12px; }
.ow-lb-row__avatar { width: 38px; height: 38px; }
.ow-pvp-card__body { grid-template-columns: 1fr; gap: 12px; text-align: center; }
.ow-pvp-side, .ow-pvp-side--loser { justify-content: center; flex-direction: column; gap: 8px; }
.ow-pvp-side--loser .ow-pvp-meta--right { align-items: center; text-align: center; }
.ow-pvp-score { margin: 0 auto; }
.ow-apply-grid { grid-template-columns: 1fr; }
.ow-tab-head__title { font-size: 1.15rem; }
}
/* ── Light-mode tweaks (variables already handle most) ── */
[data-theme="light"] .ow-invita-card {
/* Discord blue holds; just soften shadow on light */
box-shadow: 0 8px 22px rgba(88,101,242,0.22);
}
[data-theme="light"] .ow-pvp-side--winner .ow-pvp-avatar { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
[data-theme="light"] .ow-lb-podium__slot--1 {
background: linear-gradient(160deg, var(--ow-surface) 0%, rgba(245,158,11,0.12) 100%);
}
/* ═══════════════════════════════════════════════════════════════
LIGHT-MODE OVERHAUL (CLANS-PUBLIC-01b · 2026-05-17)
The original Onyx CSS assumed dark mode for everything that uses
var(--ow-bg), so the hub banner overlay, sticky tabs, and old
leaderboard rows all broke (white text on white in light mode).
This block surgically forces correct contrast WITHOUT touching
the dark-mode appearance.
═══════════════════════════════════════════════════════════════ */
/* ── HUB BANNER OVERLAY (BANNER-V5 2026-05-17) ──
User reports "el banner aun no se ve". Previous overlays were too dark;
the banner image existed but was lost in black. NEW: minimal overlay,
only enough at the very bottom edge to keep the clan name + back button
readable. The banner image is the hero of the page now. */
.ow-hub-banner-overlay {
background: linear-gradient(to top,
rgba(8, 8, 14, 0.62) 0%,
rgba(8, 8, 14, 0.20) 25%,
transparent 50%
) !important;
}
[data-theme="light"] .ow-hub-banner-img {
/* Slightly more aggressive dim in light mode so the dark overlay
doesn't clash with a too-bright image */
filter: brightness(0.5) saturate(1.05);
}
/* ── BACK BUTTON (visible in light mode) ── */
[data-theme="light"] .ow-back-btn {
background: rgba(10, 11, 15, 0.62);
border-color: rgba(255, 255, 255, 0.18);
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .ow-back-btn:hover {
background: rgba(10, 11, 15, 0.78);
border-color: rgba(255, 255, 255, 0.35);
}
/* ── BADGE inside hero (OFICIAL / COMUNIDAD) ── */
[data-theme="light"] .ow-hub-banner-content .ow-badge {
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] .ow-hub-banner-content .ow-badge-official {
background: linear-gradient(135deg, rgba(245,158,11,0.85), rgba(245,158,11,0.55));
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}
/* ── STICKY TAB NAV ── */
/* var(--ow-bg-alt) is #ebebef in light mode — already correct, but the
backdrop-blur was producing a glassy feel that broke at scroll. We add
an explicit border + shadow on scroll and ensure inactive tabs are
readable. */
[data-theme="light"] .ow-hub-tabs {
background: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .ow-tab-btn { color: #6A6F7B; }
[data-theme="light"] .ow-tab-btn:hover { color: #1a1a2e; }
/* V28: light theme also respects per-tab --tab-c so colored underlines work */
[data-theme="light"] .ow-tab-btn.active { color: var(--tab-c, var(--ow-accent)); }
/* ── OLD LEADERBOARD ROWS (top kills preview, etc.) ── */
/* The original .ow-lb-row used rgba(255,255,255,0.03) which is invisible
on a light background. v2 rows already use --ow-surface; the old rows
need explicit light tokens. */
[data-theme="light"] .ow-lb-row,
[data-theme="light"] .leaderboard-row {
background: var(--ow-surface);
border-color: var(--ow-border);
}
[data-theme="light"] .ow-lb-row:hover,
[data-theme="light"] .leaderboard-row:hover {
background: var(--ow-surface-hover);
border-color: var(--ow-border-hover);
}
[data-theme="light"] .ow-lb-row:nth-child(even) {
background: var(--ow-bg-alt);
}
[data-theme="light"] .ow-lb-row:nth-child(even):hover {
background: var(--ow-surface-hover);
}
[data-theme="light"] .ow-lb-row .rank,
[data-theme="light"] .leaderboard-row .lb-rank {
color: #6A6F7B;
opacity: 0.7;
}
/* ── BTN APPLE & GLASS BUTTONS (used in hero CTAs, overview links) ── */
/* btn-apple uses rgba(255,255,255,0.1) which is invisible on light bg.
Swap to a proper surface in light mode. */
[data-theme="light"] .btn-apple {
background: rgba(10, 11, 15, 0.04);
border-color: rgba(10, 11, 15, 0.12);
color: #1a1a2e;
box-shadow: 0 2px 8px rgba(10, 11, 15, 0.06);
}
[data-theme="light"] .btn-apple:hover {
background: rgba(10, 11, 15, 0.08);
border-color: rgba(10, 11, 15, 0.22);
box-shadow: 0 6px 18px rgba(10, 11, 15, 0.1);
}
/* ── PODIUM CARDS (directory ranking) ── */
/* Inner card uses --ow-surface (white in light) — fine — but the rank
text inside uses harsh colors and the inner "stats" grid was too
stark. Add a subtle inner contrast. */
[data-theme="light"] .podium-card,
[data-theme="light"] .dir-pod-card,
[data-theme="light"] .ow-dir-card {
background: var(--ow-surface);
box-shadow: 0 8px 24px rgba(10, 11, 15, 0.06), 0 1px 0 rgba(10, 11, 15, 0.04);
border-color: rgba(10, 11, 15, 0.07);
}
[data-theme="light"] .podium-card:hover,
[data-theme="light"] .dir-pod-card:hover,
[data-theme="light"] .ow-dir-card:hover {
box-shadow: 0 16px 36px rgba(10, 11, 15, 0.1), 0 2px 0 rgba(10, 11, 15, 0.06);
}
/* ── MEMBER CARDS (sidebar previews, members tab) ── */
[data-theme="light"] .ow-member-card,
[data-theme="light"] .ow-section-card {
box-shadow: 0 1px 0 rgba(10, 11, 15, 0.03);
}
[data-theme="light"] .ow-member-card:hover {
box-shadow: 0 8px 22px rgba(10, 11, 15, 0.08);
}
[data-theme="light"] .ow-stat-card {
box-shadow: 0 1px 0 rgba(10, 11, 15, 0.03);
}
[data-theme="light"] .ow-stat-card:hover {
box-shadow: 0 6px 18px rgba(10, 11, 15, 0.08);
}
/* ── PVP card winner avatar glow (already tweaked above, just polish) ── */
[data-theme="light"] .ow-pvp-side--loser .ow-pvp-avatar {
border-color: rgba(239, 68, 68, 0.35);
opacity: 0.95;
}
/* ── ANUNCIOS card (existing, used in tab Anuncios) ── */
[data-theme="light"] .ow-anuncio-card {
background: var(--ow-surface);
border-color: var(--ow-border);
}
/* ── LIGHTBOX (always dark — keep) ── */
/* No changes — lightbox is intentionally dark in both modes */
/* ── INVITA CARD on light mode: keep Discord brand colors but slightly
softer drop-shadow already handled earlier. Add subtle white inner
ring so the card pops off the white page. */
[data-theme="light"] .ow-invita-card {
box-shadow: 0 10px 28px rgba(88, 101, 242, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* ── SIDEBAR VACANCIES card on light: ámbar más visible ── */
[data-theme="light"] .ow-side-vacancies {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.06) 100%);
border-color: rgba(245, 158, 11, 0.45);
}
/* ── SIDE ANUNCIOS items: more contrast on light ── */
[data-theme="light"] .ow-side-anuncio {
background: #FBFCFE;
border-color: rgba(10, 11, 15, 0.08);
}
[data-theme="light"] .ow-side-anuncio:hover {
background: #F2F4F8;
border-color: rgba(10, 11, 15, 0.14);
}
/* ── PODIUM SLOT on light mode — already handled — but also nudge slot 2/3
so they don't blend in with the page bg. */
[data-theme="light"] .ow-lb-podium__slot {
box-shadow: 0 6px 18px rgba(10, 11, 15, 0.06);
}
[data-theme="light"] .ow-lb-podium__slot:hover {
box-shadow: 0 14px 32px rgba(10, 11, 15, 0.12);
}
/* ── LEADERBOARD V2 ROWS on light ── */
[data-theme="light"] .ow-lb-row--v2 {
box-shadow: 0 1px 0 rgba(10, 11, 15, 0.03);
}
[data-theme="light"] .ow-lb-row--v2:hover {
box-shadow: 0 6px 18px rgba(10, 11, 15, 0.08);
}
[data-theme="light"] .ow-lb-row__bar {
background: rgba(10, 11, 15, 0.06);
}
/* ── APPLY (vacancy) cards on light ── */
[data-theme="light"] .ow-apply-card {
box-shadow: 0 1px 0 rgba(10, 11, 15, 0.03);
}
[data-theme="light"] .ow-apply-card:hover {
box-shadow: 0 10px 26px rgba(10, 11, 15, 0.08);
}
[data-theme="light"] .ow-apply-cta {
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
[data-theme="light"] .ow-apply-cta:hover {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
/* ── GAL TILES on light ── */
[data-theme="light"] .ow-gal-tile {
box-shadow: 0 2px 8px rgba(10, 11, 15, 0.04);
}
[data-theme="light"] .ow-gal-tile:hover {
box-shadow: 0 12px 28px rgba(10, 11, 15, 0.1);
}
/* ── PVP cards on light ── */
[data-theme="light"] .ow-pvp-card {
box-shadow: 0 1px 0 rgba(10, 11, 15, 0.03);
}
[data-theme="light"] .ow-pvp-card:hover {
box-shadow: 0 8px 22px rgba(10, 11, 15, 0.08);
}
/* ── HALL OF SHAME cards on light ── */
[data-theme="light"] .ow-shame-card {
background: var(--ow-surface);
box-shadow: 0 1px 0 rgba(10, 11, 15, 0.03);
}
/* ── TAB CONTENT bg ── */
/* On dark, the tab content lives on top of var(--ow-bg). On light, the
same applies — page bg is var(--ow-bg) which is #f5f5f7 — and cards
inside use var(--ow-surface) = white. That contrast is correct, just
ensure the gap between the sticky tabs and the content reads. */
[data-theme="light"] .ow-tab-content {
/* Existing rule already centered; nothing more needed but keep this
selector handy for future tweaks. */
}
/* ── EMPTY STATES on light ── */
[data-theme="light"] .ow-empty {
background: var(--ow-surface);
border-color: var(--ow-border);
}
/* ═══════════════════════════════════════════════════════════════
OVERVIEW-PERSIST (2026-05-17): always-visible Anuncios + Galería
blocks on the clan overview, with empty-state CTAs.
═══════════════════════════════════════════════════════════════ */
.ow-ov-block { padding: 24px 26px; }
.ow-ov-block__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 18px;
}
.ow-ov-block__head h2 {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.15rem; font-weight: 800;
color: var(--ow-text); letter-spacing: -0.015em;
display: inline-flex; align-items: center; gap: 10px;
}
.ow-ov-count {
font-family: 'Geist Mono', monospace;
font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ow-text-muted);
padding: 3px 9px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 999px;
}
.ow-ov-empty {
text-align: center;
padding: 36px 20px;
background: var(--ow-bg-alt);
border: 1px dashed var(--ow-border);
border-radius: 14px;
color: var(--ow-text-muted);
}
.ow-ov-empty__icon {
font-size: 2rem; margin-bottom: 10px;
opacity: 0.55;
}
.ow-ov-empty__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.95rem; font-weight: 700;
color: var(--ow-text);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.ow-ov-empty__hint {
font-size: 0.82rem; line-height: 1.5;
color: var(--ow-text-dim);
}
.ow-ov-empty__hint code {
background: var(--ow-surface);
padding: 1px 6px;
border-radius: 5px;
font-family: 'Geist Mono', monospace;
font-size: 0.78rem;
border: 1px solid var(--ow-border);
}
/* Anuncios cards in overview */
.ow-ov-anuncios {
display: flex; flex-direction: column; gap: 10px;
}
.ow-ov-anuncio {
display: flex; flex-direction: column; gap: 6px;
width: 100%;
padding: 14px 16px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 14px;
text-align: left;
cursor: pointer;
font-family: inherit;
color: var(--ow-text);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ow-ov-anuncio:hover {
background: var(--ow-surface-hover);
border-color: var(--ow-border-hover);
transform: translateX(3px);
}
.ow-ov-anuncio__head {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.ow-ov-anuncio__pin {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem; font-weight: 800;
color: #F59E0B;
letter-spacing: 0.12em; text-transform: uppercase;
}
.ow-ov-anuncio__scope {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem; font-weight: 700;
color: #5B8CFF;
background: rgba(91,140,255,0.12);
border: 1px solid rgba(91,140,255,0.32);
border-radius: 999px;
padding: 2px 9px;
letter-spacing: 0.1em; text-transform: uppercase;
}
.ow-ov-anuncio__when {
margin-left: auto;
font-family: 'Geist Mono', monospace;
font-size: 0.66rem;
color: var(--ow-text-muted);
letter-spacing: 0.04em;
}
.ow-ov-anuncio h4 {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.95rem; font-weight: 700;
color: var(--ow-text); letter-spacing: -0.01em;
line-height: 1.3;
}
.ow-ov-anuncio p {
margin: 0;
font-size: 0.85rem; line-height: 1.5;
color: var(--ow-text-dim);
}
.ow-ov-anuncio__by {
font-family: 'Geist Mono', monospace;
font-size: 0.66rem;
color: var(--ow-text-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.ow-ov-anuncio__by span {
color: var(--ow-text);
font-weight: 700;
}
/* OVERVIEW-GALLERY-V2 (2026-05-17): 4-col grid with optional hero tile
spanning 2x2, 16:9 aspect ratio, caption overlay. Bigger + more
visually dominant than the previous 3-col 1:1 thumbs. */
.ow-ov-gal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 10px;
}
.ow-ov-gal-grid--hero {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
min-height: 360px;
}
.ow-ov-gal-tile {
position: relative; margin: 0;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
aspect-ratio: 16 / 9;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
border-color 0.25s ease,
box-shadow 0.35s ease;
}
.ow-ov-gal-tile--hero {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: unset;
}
.ow-ov-gal-tile:hover {
transform: translateY(-2px);
border-color: var(--ow-border-hover);
box-shadow: var(--ow-shadow);
}
.ow-ov-gal-tile img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ow-ov-gal-tile:hover img { transform: scale(1.06); }
.ow-ov-gal-tile figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 18px 12px 10px;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
color: #fff;
font-size: 0.74rem; font-weight: 600;
line-height: 1.35;
pointer-events: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ow-ov-gal-tile--hero figcaption {
font-size: 0.92rem;
padding: 26px 16px 14px;
}
/* OVERVIEW-SHAME (2026-05-17): card grid with image-top layout */
.ow-ov-shame-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.ow-ov-shame-card {
display: flex; flex-direction: column;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
text-align: left;
font-family: inherit;
color: var(--ow-text);
padding: 0;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ow-ov-shame-card:hover {
transform: translateY(-2px);
border-color: rgba(236,72,153,0.4);
box-shadow: 0 10px 22px rgba(236,72,153,0.12);
}
.ow-ov-shame-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
border-bottom: 1px solid var(--ow-border);
}
.ow-ov-shame-card__body {
padding: 12px 14px 14px;
display: flex; flex-direction: column; gap: 6px;
}
.ow-ov-shame-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.ow-ov-shame-card__chip {
font-family: 'Geist Mono', monospace;
font-size: 0.58rem; font-weight: 800;
color: #EC4899;
background: rgba(236,72,153,0.12);
border: 1px solid rgba(236,72,153,0.32);
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.1em; text-transform: uppercase;
}
.ow-ov-shame-card__when {
font-family: 'Geist Mono', monospace;
font-size: 0.64rem;
color: var(--ow-text-muted);
}
.ow-ov-shame-card h4 {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.95rem; font-weight: 800;
color: var(--ow-text); letter-spacing: -0.01em;
line-height: 1.3;
}
.ow-ov-shame-card p {
margin: 0;
font-size: 0.82rem; line-height: 1.5;
color: var(--ow-text-dim);
}
.ow-ov-empty--gal,
.ow-ov-empty--shame {
padding: 48px 24px;
}
@media (max-width: 720px) {
.ow-ov-block { padding: 18px 18px; }
.ow-ov-gal-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ow-ov-gal-grid--hero { grid-template-rows: auto; min-height: 0; }
.ow-ov-gal-tile--hero { grid-column: span 3; grid-row: span 1; aspect-ratio: 16 / 9; }
.ow-ov-block__head h2 { font-size: 1rem; }
.ow-ov-shame-grid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
.ow-ov-gal-grid { grid-template-columns: repeat(2, 1fr); }
.ow-ov-gal-tile--hero { grid-column: span 2; }
}
/* ── BANNER-V8 (2026-05-17): NUCLEAR — force all visible-state props ──
User STILL reports "no sale el banner" after V5/V6/V7. Forcing every
single CSS prop that could possibly hide it via !important. If the
element is rendered, it WILL be 360-540px tall, full opacity,
display:block, position:relative, visibility:visible. */
.ow-hub-banner,
header.ow-hub-banner,
.ow-clan-hub .ow-hub-banner {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 380px !important;
max-height: 560px !important;
height: 50vh !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
.ow-hub-tabs,
nav.ow-hub-tabs,
.ow-clan-hub .ow-hub-tabs {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
pointer-events: auto !important;
}
.ow-hub-banner--real .ow-hub-banner-img {
filter: brightness(0.92) saturate(1.08) !important;
}
.ow-hub-banner--logo-cover .ow-hub-banner-img {
filter: brightness(0.75) saturate(1.05) !important;
}
/* Force the img to fill its container even if base styles drift */
.ow-hub-banner-img,
header.ow-hub-banner .ow-hub-banner-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: absolute !important;
inset: 0 !important;
}
[data-theme="light"] .ow-ov-anuncio { background: #FBFCFE; }
[data-theme="light"] .ow-ov-anuncio:hover { background: #F2F4F8; }
/* ═══════════════════════════════════════════════════════════════
PHASE-PRIMARY (2026-05-17): chip + secondary kills label for LB rows
+ premium mini-LB preview cards in overview
═══════════════════════════════════════════════════════════════ */
.ow-lb-row__phase {
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.92rem; font-weight: 800;
letter-spacing: -0.005em;
padding: 4px 10px;
border: 1px solid;
border-radius: 999px;
margin-right: 6px;
min-width: 36px;
line-height: 1;
}
.ow-lb-row__kills {
font-family: 'Geist Mono', monospace;
font-size: 0.78rem; font-weight: 700;
color: var(--ow-text-muted);
letter-spacing: 0.04em;
}
.ow-lb-podium__sub {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem; font-weight: 600;
color: var(--ow-text-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
/* Mini-LB preview in overview — compact row list */
.ow-ov-block--lb .ow-ov-lb-list {
display: flex; flex-direction: column; gap: 8px;
}
.ow-lb-row--preview {
padding: 10px 14px !important;
background: var(--ow-bg-alt) !important;
}
.ow-lb-row--preview:hover {
background: var(--ow-surface-hover) !important;
}
.ow-lb-row--preview .ow-lb-row__avatar {
width: 36px; height: 36px;
}
.ow-lb-row--preview .ow-lb-row__name {
font-size: 0.88rem;
}
.ow-lb-row--preview .ow-lb-row__bar { display: none; }
/* OVERVIEW-LB-V3 (2026-05-17): two-column grid for the secondary leaderboard
previews so the page doesn't read as one giant vertical stack. On mobile we
collapse back to a single column. */
.ow-ov-lb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.ow-ov-block--lb-col { padding: 22px 22px; }
.ow-ov-block--lb-col .ow-ov-block__head h2 {
font-size: 1.05rem;
}
@media (max-width: 980px) {
.ow-ov-lb-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* Podium rows — top 3 get a subtle gold/silver/bronze edge tint so the
leaderboard reads as a competition, not a flat list. The medal emoji is in
the rank slot; this is the row-level chrome. */
.ow-lb-row--podium {
position: relative;
overflow: hidden;
}
.ow-lb-row--podium::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: currentColor;
opacity: 0.85;
}
.ow-lb-row--podium-1 { color: #F59E0B; }
.ow-lb-row--podium-2 { color: #94A3B8; }
.ow-lb-row--podium-3 { color: #D97706; }
.ow-lb-row--podium .ow-lb-row__rank {
font-size: 1.15rem;
filter: drop-shadow(0 1px 6px currentColor);
}
.ow-lb-row--podium-1 {
background: linear-gradient(90deg, rgba(245,158,11,0.10), var(--ow-bg-alt) 40%) !important;
}
.ow-lb-row--podium-2 {
background: linear-gradient(90deg, rgba(148,163,184,0.08), var(--ow-bg-alt) 40%) !important;
}
.ow-lb-row--podium-3 {
background: linear-gradient(90deg, rgba(217,119,6,0.08), var(--ow-bg-alt) 40%) !important;
}
.ow-lb-row--podium .ow-lb-row__name {
color: var(--ow-text);
font-weight: 800;
}
.ow-lb-row--podium .ow-lb-row__score {
font-size: 1.1rem;
}
@media (max-width: 720px) {
.ow-lb-row__phase { font-size: 0.82rem; padding: 3px 8px; min-width: 32px; }
.ow-lb-row__kills { font-size: 0.72rem; }
.ow-lb-row--preview { padding: 8px 12px !important; }
.ow-lb-row--podium .ow-lb-row__rank { font-size: 1rem; }
}
[data-theme="light"] ._boardEmptyCard,
[data-theme="light"] .ow-tab-panel > div[style*="dashed"] {
/* The inline-styled empty cards use border: 1px dashed var(--ow-border).
That works automatically because --ow-border is themed. No override. */
}
/* ════════════════════════════════════════════════════════════════════
SHAME-CARD-V2 + SHAME-LIGHTBOX (2026-05-17)
New card layout: subtle pin emoji, gradient body, poster avatar chip
in the footer, hover lift, click anywhere to open the lightbox.
Lightbox shows full-size image + full text + poster.
════════════════════════════════════════════════════════════════════ */
.ow-shame-card {
position: relative;
background: var(--ow-surface);
border: 1px solid var(--ow-border);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
border-color 0.25s ease,
box-shadow 0.3s ease;
animation: owDirFadeUp .6s cubic-bezier(0.16,1,0.3,1) both;
}
.ow-shame-card:hover {
transform: translateY(-3px);
border-color: rgba(236,72,153,0.45);
box-shadow: 0 12px 28px rgba(0,0,0,0.30), 0 0 14px rgba(236,72,153,0.18);
}
.ow-shame-card__pin {
position: absolute;
top: 14px; right: 14px;
z-index: 2;
font-size: 18px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
pointer-events: none;
}
.ow-shame-card img:not(.ow-shame-card__poster img) {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
border-bottom: 1px solid var(--ow-border);
}
.ow-shame-card__body {
padding: 18px 20px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ow-shame-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.ow-shame-card__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(236,72,153,0.14);
color: #EC4899;
border: 1px solid rgba(236,72,153,0.35);
font-size: 0.6rem; font-weight: 800;
letter-spacing: 0.1em; text-transform: uppercase;
}
.ow-shame-card__when {
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
color: var(--ow-text-muted);
}
.ow-shame-card__title {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.1rem; font-weight: 800;
color: var(--ow-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
.ow-shame-card__text {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ow-text-dim);
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ow-shame-card__poster {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 6px;
padding: 4px 10px 4px 4px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 999px;
align-self: flex-start;
font-size: 0.72rem;
color: var(--ow-text);
font-weight: 700;
letter-spacing: -0.01em;
}
.ow-shame-card__poster img {
width: 22px; height: 22px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.ow-shame-card__poster-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
/* Lightbox overlay */
.ow-shame-lightbox {
position: fixed; inset: 0;
z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.ow-shame-lightbox__backdrop {
position: absolute; inset: 0;
background: rgba(8, 9, 16, 0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: owFadeIn 0.2s ease both;
}
.ow-shame-lightbox__panel {
position: relative;
background: var(--ow-surface);
border: 1px solid var(--ow-border-hover);
border-radius: 22px;
overflow: hidden;
max-width: 720px;
width: 100%;
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(236,72,153,0.12);
}
.ow-shame-lightbox__close {
position: absolute;
top: 12px; right: 12px;
z-index: 3;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.ow-shame-lightbox__close:hover {
background: rgba(236,72,153,0.85);
transform: scale(1.06);
}
.ow-shame-lightbox__img {
width: 100%;
max-height: 60vh;
object-fit: contain;
display: block;
background: #0a0b12;
border-bottom: 1px solid var(--ow-border);
}
.ow-shame-lightbox__content {
padding: 22px 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.ow-shame-lightbox__head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.ow-shame-lightbox__when {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--ow-text-muted);
}
.ow-shame-lightbox__title {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.5rem; font-weight: 800;
color: var(--ow-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
.ow-shame-lightbox__body {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ow-text-dim);
white-space: pre-wrap;
word-wrap: break-word;
}
.ow-shame-lightbox__poster {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 6px;
background: var(--ow-bg-alt);
border: 1px solid var(--ow-border);
border-radius: 999px;
align-self: flex-start;
font-size: 0.8rem;
color: var(--ow-text);
font-weight: 700;
}
.ow-shame-lightbox__poster img {
width: 28px; height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
@media (max-width: 640px) {
.ow-shame-lightbox { padding: 12px; }
.ow-shame-lightbox__panel { max-height: 94vh; }
.ow-shame-lightbox__title { font-size: 1.25rem; }
.ow-shame-lightbox__content { padding: 16px 18px 20px; }
}