wrapper holding the plus a brand veil span on top. The veil tints ANY raw banner (incl. bright ones like "ZERO HEX") so it reads as part of the dark card instead of a jarring white block. */ .oc-champ-banner{display:block;position:relative;width:100%;height:128px;overflow:hidden;background:linear-gradient(135deg,#11132a,#0a0b14);} /* BANNER 2026-06-02 (feedback "muy exagerado el difuminado, feo e ilegible"): antes blur(4px)+brightness(.7) dejaba la foto como una mancha turbia. Ahora se muestra NÍTIDA (sin blur), con un scrim en degradado abajo (la veil) que tinta solo donde se apoyan logo/nombre → la foto se reconoce y el texto se lee. */ .oc-champ-banner-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.06) contrast(1.02);opacity:1;transform:scale(1.03);} .oc-champ-banner-veil{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,rgba(10,11,20,.06) 0%,rgba(10,11,20,.34) 46%,rgba(10,11,20,.80) 80%,var(--oc-bg-2) 100%), linear-gradient(100deg,rgba(82,88,236,.24),rgba(8,145,178,.12) 55%,transparent); } /* LIGHT-MODE CHAMP BANNER FIX 2026-06-01: en claro, la foto borrosa del banner (ej. "ZERO HEX") se leía como un fantasma gris sucio con texto visible. Ahora el banner es una BANDA DE MARCA limpia (índigo→cyan) con la foto como textura casi imperceptible (blur fuerte + opacidad baja) → premium, nunca un ghost. */ [data-theme="light"] .oc-champ-banner{background:linear-gradient(120deg,#5257ec,#0891b2);} [data-theme="light"] .oc-champ-banner-img{filter:blur(1px) saturate(1.05) contrast(1.02);opacity:.55;transform:scale(1.04);} [data-theme="light"] .oc-champ-banner-veil{ background: linear-gradient(180deg,rgba(82,88,236,.20) 0%,rgba(8,145,178,.12) 34%,rgba(248,249,252,.82) 78%,var(--oc-bg-2) 100%), linear-gradient(110deg,rgba(82,88,236,.30),rgba(8,145,178,.16) 55%,transparent); } .oc-champ-banner--empty{background:var(--oc-grad);opacity:.5;} .oc-champ-body{position:relative;display:flex;gap:16px;align-items:center;padding:18px;margin-top:-44px;} .oc-champ-logo{ width:84px;height:84px;flex:none;border-radius:18px;object-fit:cover; border:3px solid var(--oc-surface-3);background:var(--oc-surface-2);box-shadow:var(--oc-shadow); } .oc-champ-info{min-width:0;} .oc-champ-name{font-family:var(--oc-font-display);font-weight:750;font-size:1.4rem;letter-spacing:-.01em;line-height:1.1;} .oc-champ-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:.5em;color:var(--oc-text-dim);font-size:.9rem;} .oc-champ-points,.oc-champ-members{display:inline-flex;align-items:center;gap:.4em;} .oc-champ-points{font-family:var(--oc-font-mono);color:var(--oc-gold);font-weight:650;} /* ------------------------------------------------------------------ */ /* 6. SECTION NAV — sticky TAB BAR (sits below the hero) */ /* -------------------------------------------------------------------- Chips act as tabs (switch the visible section). The bar must NOT read as a second navbar stacked under the fixed OneWay navbar: it lives below the hero, carries its own surface + top border + a soft drop shadow, and a small top gap so it floats as part of the page. Sticks at the navbar height once the hero scrolls past. ------------------------------------------------------------------ */ /* DOUBLE-BAR FIX 2026-06-01: the directory section nav used to be a full-width sticky band pinned right under the fixed OneWay navbar → looked like a SECOND top bar. Now it's a CONTAINED, inset, rounded segmented control that floats inside the content column (not full-bleed, not stuck to the navbar) so there is zero "bar under a bar" redundancy. */ .ow-clan-secnav{ position:relative;z-index:30; max-width:var(--oc-maxw); margin:clamp(14px,2.4vw,26px) auto 0; padding:0 clamp(12px,4vw,32px); } .oc-secnav-inner{ position:relative; display:flex;gap:6px;align-items:center; padding:7px; border-radius:999px; background:var(--oc-surface); border:1px solid var(--oc-border); box-shadow:0 8px 26px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04); overflow-x:auto;scrollbar-width:none; scroll-snap-type:x proximity; width:max-content;max-width:100%; } .oc-secnav-inner::-webkit-scrollbar{display:none;} .oc-secnav-chip{ flex:none;scroll-snap-align:start; font-family:var(--oc-font-display);font-weight:600;font-size:.88rem; color:var(--oc-text-dim); padding:.55em 1.05em;border-radius:999px; border:1px solid transparent;background:transparent; cursor:pointer;white-space:nowrap; transition:color .2s,background .2s,border-color .2s,box-shadow .2s; } .oc-secnav-chip:hover{color:var(--oc-text);background:var(--oc-surface);} /* SCROLL-HINT 2026-06-01: right/left edge fade + nudge button shown when a tab rail overflows (mobile mainly). Cues only appear via .oc-can-next/.oc-can-prev toggled in JS, so a non-overflowing rail stays clean. */ .oc-scrollrail{position:relative;} .oc-scroll-cue{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:30px;height:30px;border-radius:50%; display:none;align-items:center;justify-content:center; border:1px solid var(--oc-border-2); background:var(--oc-surface-2);color:var(--oc-text); font-size:1.25rem;line-height:1;font-weight:700;cursor:pointer; box-shadow:0 4px 14px -4px rgba(0,0,0,.6); transition:background .15s,transform .15s; } .oc-scroll-cue svg{width:16px;height:16px;display:block;} .oc-scroll-cue:hover{background:var(--oc-accent);color:#fff;transform:translateY(-50%) scale(1.08);} .oc-scroll-cue:active{transform:translateY(-50%) scale(0.94);} .oc-scroll-cue--next{right:6px;} .oc-scroll-cue--prev{left:6px;} .oc-scrollrail.oc-can-next .oc-scroll-cue--next{display:flex;} .oc-scrollrail.oc-can-prev .oc-scroll-cue--prev{display:flex;} /* soft fade under the cue so chips slide out gracefully */ .oc-scrollrail.oc-can-next::after, .oc-scrollrail.oc-can-prev::before{ content:"";position:absolute;top:0;bottom:0;width:46px;z-index:4;pointer-events:none; } .oc-scrollrail.oc-can-next::after{right:0;background:linear-gradient(90deg,transparent,var(--oc-surface) 78%);} .oc-scrollrail.oc-can-prev::before{left:0;background:linear-gradient(270deg,transparent,var(--oc-surface) 78%);} /* LESS-RAINBOW 2026-06-01: serious, competitive active state — a single deep indigo (subtle one-hue gradient) instead of the indigo→cyan→purple rainbow that read childish. */ .oc-secnav-chip.is-active{ color:#fff;border-color:rgba(99,102,241,.55); background:linear-gradient(180deg,#4f54e8,#4036c9); box-shadow:0 6px 18px -8px rgba(79,70,229,.6),inset 0 1px 0 rgba(255,255,255,.12); } /* ------------------------------------------------------------------ */ /* 7. SECTION HEADS / EMPTY / STRONG */ /* ------------------------------------------------------------------ */ .ow-clan-sechead{margin-bottom:clamp(22px,3vw,38px);max-width:60ch;} .ow-clan-sectitle{ font-family:var(--oc-font-display);font-weight:780; font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.08;letter-spacing:-.02em; } .ow-clan-sectitle em{ font-style:normal; background:var(--oc-grad);background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .ow-clan-secsub{color:var(--oc-text-dim);font-size:clamp(.96rem,1.4vw,1.08rem);margin-top:.5em;} .ow-clan-strong{color:var(--oc-text);} .ow-clan-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;text-align:center; padding:clamp(34px,6vw,64px) 20px; border:1px dashed var(--oc-border-2);border-radius:var(--oc-radius); background:var(--oc-surface);color:var(--oc-text-dim); } .oc-empty-ico{font-size:2.4rem;line-height:1;opacity:.7;color:var(--oc-muted);} .oc-empty-txt{font-size:.98rem;max-width:40ch;} /* ------------------------------------------------------------------ */ /* 8. BADGES + TIER PILLS + LEADER CHIP */ /* ------------------------------------------------------------------ */ .oc-leader-chip{ display:inline-flex;align-items:center;gap:.5em; padding:.26em .7em .26em .3em;border-radius:999px; background:var(--oc-surface-2);border:1px solid var(--oc-border); font-size:.82rem;color:var(--oc-text-dim); transition:border-color .18s,background .18s,transform .15s,box-shadow .18s; } /* clickable → /u/slug: realce sutil al hover */ .oc-leader-chip[role="button"]:hover{border-color:var(--oc-accent);background:var(--oc-surface);transform:translateY(-1px);box-shadow:var(--oc-glow-accent);} .oc-leader-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid var(--oc-border-2);background:var(--oc-surface-3);} .oc-leader-name{font-weight:600;color:var(--oc-text);} .oc-badge-row{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;vertical-align:middle;} .oc-badge{ display:inline-flex;align-items:center;gap:.35em; font-family:var(--oc-font-mono);font-size:.66rem;font-weight:650; letter-spacing:.05em;text-transform:uppercase; padding:.32em .62em;border-radius:8px; border:1px solid var(--oc-border-2); background:var(--oc-surface-2);color:var(--oc-text-dim); white-space:nowrap; } .oc-badge-ico{display:inline-block;line-height:0;} .oc-badge-txt{line-height:1;} .oc-badge-leader{color:#fde68a;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12);} .oc-badge-director{color:#c4b5fd;border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.12);} .oc-badge-staff{color:#93c5fd;border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.12);} .oc-badge-dev{color:#67e8f9;border-color:rgba(6,182,212,.45);background:rgba(6,182,212,.12);} .oc-badge-donor{color:#f9a8d4;border-color:rgba(236,72,153,.45);background:rgba(236,72,153,.12);} /* FOUNDER / CO-FOUNDER (2026-06-01): badges PREMIUM sólidos (resaltan sobre los demás, que son outline translúcido). Oro = FOUNDER, violeta = CO-FOUNDER. */ .oc-badge-founder{color:#1a1405;border:0;background:linear-gradient(135deg,#fde68a,#fbbf24 55%,#f59e0b);box-shadow:0 4px 14px -5px rgba(251,191,36,.65),inset 0 1px 0 rgba(255,255,255,.45);font-weight:800;} .oc-badge-cofounder{color:#fff;border:0;background:linear-gradient(135deg,#a78bfa,#7c3aed 60%,#6d28d9);box-shadow:0 4px 14px -5px rgba(124,58,237,.6),inset 0 1px 0 rgba(255,255,255,.3);font-weight:800;} .oc-badge-founder .oc-badge-ico,.oc-badge-cofounder .oc-badge-ico{opacity:.92;} [data-theme="light"] .oc-badge-leader{color:#92660a;} [data-theme="light"] .oc-badge-director{color:#5b21b6;} [data-theme="light"] .oc-badge-staff{color:#3730a3;} [data-theme="light"] .oc-badge-dev{color:#0e7490;} [data-theme="light"] .oc-badge-donor{color:#9d174d;} /* donor tier accents (engine appends one of these to .oc-badge-donor) */ .oc-tier-bronze{border-color:rgba(217,119,87,.55);background:rgba(217,119,87,.14);} .oc-tier-silver{border-color:rgba(203,213,225,.6);background:rgba(203,213,225,.14);} .oc-tier-gold{border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.14);} .oc-tier-diamond{border-color:rgba(34,211,238,.6);background:rgba(34,211,238,.14);} .oc-tier-obsidian{border-color:rgba(139,92,246,.55);background:rgba(59,59,84,.4);} /* ------------------------------------------------------------------ */ /* 9. ANNOUNCEMENTS */ /* ------------------------------------------------------------------ */ .ow-clan-announce{overflow:hidden;} .oc-announce-track{ display:flex;gap:18px;padding-bottom:8px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; } .oc-announce-track::-webkit-scrollbar{display:none;} .oc-announce-card{ flex:0 0 clamp(280px,80vw,380px);scroll-snap-align:start; position:relative;overflow:hidden; border-radius:var(--oc-radius); border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); padding:18px;box-shadow:var(--oc-shadow); transition:transform .25s,border-color .25s,box-shadow .25s; } .oc-announce-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--oc-grad);opacity:.85;} .oc-announce-card:hover{transform:translateY(-4px);border-color:var(--oc-border-2);box-shadow:var(--oc-glow-accent);} .oc-announce-title{font-family:var(--oc-font-display);font-weight:700;font-size:1.08rem;margin-bottom:.4em;} .oc-announce-body{color:var(--oc-text-dim);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} .oc-announce-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:.78rem;color:var(--oc-muted);} .oc-announce-by{font-weight:600;color:var(--oc-text-dim);} .oc-announce-time{font-family:var(--oc-font-mono);} /* ------------------------------------------------------------------ */ /* 10. PODIUM + RANKED LIST */ /* ------------------------------------------------------------------ */ .oc-podium{ display:grid;grid-template-columns:repeat(3,1fr); align-items:end;gap:clamp(10px,2vw,22px); margin-bottom:clamp(28px,4vw,44px); } .oc-podium-col{display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;} /* visual order: 2 (left) · 1 (center) · 3 (right) */ .oc-podium-2{order:1;} .oc-podium-1{order:2;} .oc-podium-3{order:3;} .oc-podium-medal{font-size:1.6rem;line-height:1;margin-bottom:6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));} .oc-podium-logo{ width:clamp(56px,9vw,88px);height:clamp(56px,9vw,88px); border-radius:20px;object-fit:cover; border:3px solid var(--oc-surface-3);background:var(--oc-surface-2);box-shadow:var(--oc-shadow); transition:transform .25s; } .oc-podium-col:hover .oc-podium-logo{transform:translateY(-4px) scale(1.04);} .oc-podium-1 .oc-podium-logo{width:clamp(72px,11vw,108px);height:clamp(72px,11vw,108px);} .oc-podium-name{font-family:var(--oc-font-display);font-weight:700;font-size:1rem;text-align:center;margin-top:10px;line-height:1.15;max-width:14ch;} .oc-podium-points{font-family:var(--oc-font-mono);font-weight:700;font-size:1.05rem;margin-top:2px;} .oc-podium-members{font-size:.78rem;color:var(--oc-muted);} .oc-podium-base{ width:100%;margin-top:14px;border-radius:14px 14px 0 0; display:flex;flex-direction:column;align-items:center;justify-content:flex-start; padding:14px 8px 18px; border:1px solid var(--oc-border-2);border-bottom:none; position:relative;overflow:hidden; } .oc-podium-base::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent);} .oc-podium-1 .oc-podium-base{height:clamp(120px,16vw,168px);} .oc-podium-2 .oc-podium-base{height:clamp(92px,12vw,128px);} .oc-podium-3 .oc-podium-base{height:clamp(76px,10vw,108px);} .oc-podium-place{font-family:var(--oc-font-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1;opacity:.9;} /* place colours */ .oc-place-gold .oc-podium-base{background:linear-gradient(180deg,rgba(251,191,36,.30),rgba(251,191,36,.06));border-color:rgba(251,191,36,.6);} .oc-place-gold .oc-podium-points,.oc-place-gold .oc-podium-place{color:var(--oc-gold);} .oc-place-silver .oc-podium-base{background:linear-gradient(180deg,rgba(203,213,225,.26),rgba(203,213,225,.05));border-color:rgba(203,213,225,.5);} .oc-place-silver .oc-podium-points,.oc-place-silver .oc-podium-place{color:var(--oc-silver);} .oc-place-bronze .oc-podium-base{background:linear-gradient(180deg,rgba(217,119,87,.26),rgba(217,119,87,.05));border-color:rgba(217,119,87,.55);} .oc-place-bronze .oc-podium-points,.oc-place-bronze .oc-podium-place{color:var(--oc-bronze);} /* ranked list */ .oc-ranklist{display:flex;flex-direction:column;gap:8px;} .oc-rankrow{ display:grid;grid-template-columns:auto auto 1fr auto; align-items:center;gap:14px;padding:12px 16px; border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border);background:var(--oc-surface); cursor:pointer; transition:transform .18s,border-color .2s,background .2s,box-shadow .2s; } .oc-rankrow:hover{transform:translateX(4px);border-color:var(--oc-border-2);background:var(--oc-surface-2);box-shadow:var(--oc-shadow);} .oc-rank-num{font-family:var(--oc-font-mono);font-weight:700;font-size:1rem;color:var(--oc-muted);min-width:2.2ch;text-align:center;} .oc-rank-logo{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid var(--oc-border-2);background:var(--oc-surface-2);} .oc-rank-mid{min-width:0;} .oc-rank-name{font-family:var(--oc-font-display);font-weight:650;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .oc-rank-stats{display:flex;gap:14px;align-items:center;} .oc-rank-points{font-family:var(--oc-font-mono);font-weight:700;color:var(--oc-text);} .oc-rank-members{font-size:.82rem;color:var(--oc-muted);white-space:nowrap;} /* ------------------------------------------------------------------ */ /* 11. OFFICIAL + COMMUNITY GRIDS + CLAN CARDS + TOOLBAR */ /* ------------------------------------------------------------------ */ .ow-clan-official,.ow-clan-community,.ow-clan-tournaments,.ow-clan-directory,.ow-clan-manage{color:var(--oc-text);} .oc-clan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,2.2vw,24px);} .oc-clan-grid--light{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));} .oc-clan-card{ position:relative;overflow:hidden; border-radius:var(--oc-radius); border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow);cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s; } .oc-clan-card:hover{transform:translateY(-5px);border-color:var(--oc-border-2);box-shadow:var(--oc-glow-accent);} /* HUD shine sweep on featured/official */ .oc-clan-card--official::after, .oc-clan-card--hq::after{ content:"";position:absolute;top:0;left:0;width:40%;height:100%;z-index:3; background:linear-gradient(120deg,transparent,rgba(255,255,255,.14),transparent); transform:translateX(-120%) skewX(-18deg);pointer-events:none; } .oc-clan-card--official:hover::after, .oc-clan-card--hq:hover::after{animation:oc-shine 1.1s ease;} .oc-clan-card--official{border-color:rgba(99,102,241,.4);} /* clipped HUD corner on HQ */ .oc-clan-card--hq{border-color:rgba(6,182,212,.45);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);} .oc-card-banner{height:96px;position:relative;background:var(--oc-grad-soft);overflow:hidden;} .oc-card-banner-img{width:100%;height:100%;object-fit:cover;display:block;} .oc-card-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,11,20,.6));} [data-theme="light"] .oc-card-banner::after{background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.35));} .oc-card-tag{ position:absolute;top:10px;left:10px;z-index:2; font-family:var(--oc-font-mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:.36em .72em;border-radius:999px;color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.5); } .oc-tag-official{background:var(--oc-grad);} .oc-tag-hq{background:linear-gradient(135deg,var(--oc-accent2),var(--oc-accent));} .oc-card-body{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;margin-top:-34px;} .oc-card-logowrap{flex:none;} .oc-card-logo{ width:64px;height:64px;border-radius:16px;object-fit:cover; border:3px solid var(--oc-surface-3);background:var(--oc-surface-2);box-shadow:var(--oc-shadow);display:block; } .oc-card-info{min-width:0;flex:1;padding-top:36px;} .oc-card-name{font-family:var(--oc-font-display);font-weight:700;font-size:1.12rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;} .oc-card-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:.6em;color:var(--oc-text-dim);font-size:.86rem;} .oc-card-points{font-family:var(--oc-font-mono);font-weight:650;color:var(--oc-gold);display:inline-flex;align-items:center;gap:.35em;} .oc-card-members{display:inline-flex;align-items:center;gap:.35em;} /* toolbar (community) */ .oc-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:clamp(18px,2.5vw,28px);} .oc-search{ flex:1 1 220px;min-width:0; font-family:var(--oc-font);font-size:.92rem;color:var(--oc-text); padding:.7em 1em;border-radius:999px; border:1px solid var(--oc-border-2);background:var(--oc-surface); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); transition:border-color .2s,box-shadow .2s; } .oc-search::placeholder{color:var(--oc-muted);} .oc-search:focus{outline:none;border-color:var(--oc-accent);box-shadow:var(--oc-glow-accent);} .oc-count{font-size:.82rem;color:var(--oc-muted);font-family:var(--oc-font-mono);white-space:nowrap;} .oc-sort{ font-family:var(--oc-font);font-size:.88rem;color:var(--oc-text); padding:.6em 2.2em .6em 1em;border-radius:999px;cursor:pointer; border:1px solid var(--oc-border-2);background:var(--oc-surface); appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right .9em center; } .oc-sort:focus{outline:none;border-color:var(--oc-accent);} .oc-more{ display:block;margin:clamp(22px,3vw,34px) auto 0; font-family:var(--oc-font-display);font-weight:600; padding:.75em 1.6em;border-radius:999px;cursor:pointer; color:var(--oc-text);border:1px solid var(--oc-border-2);background:var(--oc-surface-2); transition:transform .2s,border-color .2s,box-shadow .2s; } .oc-more:hover{transform:translateY(-2px);border-color:var(--oc-accent);box-shadow:var(--oc-glow-accent);} /* ------------------------------------------------------------------ */ /* 12. WALL OF SHAME + LIGHTBOX */ /* ------------------------------------------------------------------ */ .ow-clan-shame{color:var(--oc-text);} /* ------------------------------------------------------------------ */ /* HALL OF SHAME — dramatic "exposed/dossier" cards */ /* ------------------------------------------------------------------ */ .oc-shame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,2.2vw,22px);} .oc-shame-card{ position:relative;overflow:hidden; display:flex;flex-direction:column; border-radius:var(--oc-radius);border:1px solid var(--oc-border); background: radial-gradient(120% 80% at 0% 0%,rgba(239,68,68,.10),transparent 60%), linear-gradient(160deg,rgba(14,7,9,.55),rgba(10,8,12,.30)); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); padding:18px 18px 16px 22px;box-shadow:var(--oc-shadow); transition:transform .25s,border-color .25s,box-shadow .25s; } /* red/amber accent bar down the left edge */ .oc-shame-accent{ position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--oc-red),#f97316 60%,#fbbf24); box-shadow:0 0 18px -2px rgba(239,68,68,.6); } .oc-shame-card:hover{ transform:translateY(-4px); border-color:rgba(239,68,68,.42); box-shadow:0 0 0 1px rgba(239,68,68,.3),0 22px 54px -22px rgba(239,68,68,.42); } /* subject = protagonist */ .oc-shame-head{display:flex;margin-bottom:13px;} .oc-shame-subject{ display:flex;gap:13px;align-items:center;min-width:0;flex:1; border-radius:12px;padding:4px;margin:-4px; transition:background .2s; } .oc-shame-subject--click{cursor:pointer;} .oc-shame-subject--click:hover{background:rgba(239,68,68,.10);} .oc-shame-subject--click:focus-visible{outline:2px solid var(--oc-red);outline-offset:2px;} .oc-shame-avwrap{position:relative;flex:none;line-height:0;} .oc-shame-avatar{ width:54px;height:54px;border-radius:14px;object-fit:cover; border:2px solid rgba(239,68,68,.45);background:var(--oc-surface-2); filter:grayscale(.18) contrast(1.05); } .oc-shame-who{min-width:0;display:flex;flex-direction:column;gap:4px;} .oc-shame-name{ font-family:var(--oc-font-display);font-weight:800;font-size:1.08rem;line-height:1.15; letter-spacing:-.01em;color:var(--oc-text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .oc-shame-clan{ align-self:flex-start;display:inline-flex;align-items:center; font-size:.7rem;font-weight:650;letter-spacing:.03em;text-transform:uppercase; color:#ff8a7d;padding:.22em .6em;border-radius:999px; background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3); } .oc-shame-title{ font-family:var(--oc-font-display);font-weight:750;font-size:1.12rem;line-height:1.25; margin-bottom:.4em;color:var(--oc-text);letter-spacing:-.01em; } .oc-shame-body{ color:var(--oc-text-dim);font-size:.9rem;line-height:1.5; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; } /* evidence image with zoom affordance */ .oc-shame-thumb{ position:relative;display:block;width:100%;margin-top:14px;padding:0; border-radius:var(--oc-radius-sm);overflow:hidden;cursor:zoom-in; border:1px solid rgba(239,68,68,.22);aspect-ratio:16/9;background:var(--oc-surface-2); } .oc-shame-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;} .oc-shame-zoom{ position:absolute;right:9px;bottom:9px; display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:9px; background:rgba(8,8,12,.7);color:#fff;border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s; } .oc-shame-thumb:hover .oc-shame-img{transform:scale(1.06);} .oc-shame-thumb:hover .oc-shame-zoom,.oc-shame-thumb:focus-visible .oc-shame-zoom{opacity:1;transform:translateY(0);} .oc-shame-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding-top:12px;border-top:1px solid var(--oc-border); font-size:.76rem;color:var(--oc-muted); } .oc-shame-by{font-weight:600;color:var(--oc-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .oc-shame-time{font-family:var(--oc-font-mono);white-space:nowrap;flex:none;} /* shame — light mode */ [data-theme="light"] .oc-shame-card{ background: radial-gradient(120% 80% at 0% 0%,rgba(220,38,38,.08),transparent 60%), linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.7)); } [data-theme="light"] .oc-shame-avatar{filter:none;border-color:rgba(220,38,38,.4);} [data-theme="light"] .oc-shame-clan{color:#b91c1c;background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.28);} [data-theme="light"] .oc-player-rbxchip{color:#c2342a;background:rgba(220,38,38,.1);} /* lightbox */ .ow-clan-lightbox{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center; padding:clamp(12px,4vw,48px); background:var(--oc-scrim); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s ease,visibility .25s ease; } .ow-clan-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto;} .oc-lb-inner{position:relative;max-width:min(1000px,94vw);max-height:88vh;display:flex;flex-direction:column;gap:10px;} .oc-lb-img{max-width:100%;max-height:82vh;border-radius:var(--oc-radius-sm);object-fit:contain;box-shadow:var(--oc-shadow-lg);border:1px solid var(--oc-border-2);} .oc-lb-cap{text-align:center;color:var(--oc-text-dim);font-size:.9rem;} .oc-lb-close{ position:absolute;top:-14px;right:-14px; width:40px;height:40px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center; color:#fff;background:var(--oc-surface-3);border:1px solid var(--oc-border-2);box-shadow:var(--oc-shadow); } .oc-lb-close:hover{background:var(--oc-red);} /* ------------------------------------------------------------------ */ /* 13. USER DIRECTORY */ /* ------------------------------------------------------------------ */ .oc-user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(14px,2vw,20px);} .oc-user-card{ position:relative;overflow:hidden; display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px; padding:20px 16px;border-radius:var(--oc-radius); border:1px solid var(--oc-border);background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow);cursor:pointer; transition:transform .25s,border-color .25s,box-shadow .25s; } .oc-user-card:hover{transform:translateY(-5px);border-color:var(--oc-border-2);box-shadow:var(--oc-glow-cyan);} .oc-user-avwrap{position:relative;} .oc-user-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--oc-surface-3);background:var(--oc-surface-2);box-shadow:var(--oc-shadow);} .oc-user-clanlogo{position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:9px;object-fit:cover;border:2px solid var(--oc-bg-2);background:var(--oc-surface-2);} .oc-user-info{min-width:0;width:100%;} .oc-user-name{font-family:var(--oc-font-display);font-weight:700;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .oc-user-stats{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px;} .oc-user-kills{display:flex;flex-direction:column;align-items:center;line-height:1;} .oc-user-killsnum{font-family:var(--oc-font-mono);font-weight:700;font-size:1.3rem;color:var(--oc-accent2);} .oc-user-killslbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--oc-muted);margin-top:3px;} .oc-user-phase{font-size:.78rem;color:var(--oc-text-dim);} /* user tier accents */ .oc-user-tier{font-family:var(--oc-font-display);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;border:1px solid var(--oc-border-2);} .oc-tier-h{color:#fde68a;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12);} .oc-tier-m{color:#a5f3fc;border-color:rgba(6,182,212,.5);background:rgba(6,182,212,.12);} .oc-tier-l{color:var(--oc-text-dim);border-color:var(--oc-border-2);background:var(--oc-surface-2);} [data-theme="light"] .oc-tier-h{color:#92660a;} [data-theme="light"] .oc-tier-m{color:#0e7490;} /* ------------------------------------------------------------------ */ /* 14. TOURNAMENTS */ /* ------------------------------------------------------------------ */ .oc-tour-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(16px,2.4vw,24px);} .oc-tour-card{ position:relative;overflow:hidden; border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow); transition:transform .25s,border-color .25s,box-shadow .25s; } .oc-tour-card:hover{transform:translateY(-5px);border-color:var(--oc-border-2);box-shadow:var(--oc-glow-accent);} .oc-tour-banner{height:120px;position:relative;background:var(--oc-grad-soft);overflow:hidden;} .oc-tour-banner-img{width:100%;height:100%;object-fit:cover;display:block;} .oc-tour-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,11,20,.7));} [data-theme="light"] .oc-tour-banner::after{background:linear-gradient(180deg,transparent 30%,rgba(255,255,255,.4));} .oc-tour-body{padding:18px;display:flex;flex-direction:column;gap:12px;} .oc-tour-toprow{display:flex;align-items:center;justify-content:space-between;gap:10px;} .oc-tour-name{font-family:var(--oc-font-display);font-weight:750;font-size:1.18rem;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;} .oc-tour-chip{flex:none;font-family:var(--oc-font-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.34em .7em;border-radius:999px;border:1px solid;} .oc-tour-active{color:#86efac;border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.14);} .oc-tour-pending{color:#fcd34d;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.14);} .oc-tour-completed{color:var(--oc-text-dim);border-color:var(--oc-border-2);background:var(--oc-surface-2);} [data-theme="light"] .oc-tour-active{color:#15803d;} [data-theme="light"] .oc-tour-pending{color:#92660a;} .oc-tour-guild{font-size:.84rem;color:var(--oc-text-dim);display:inline-flex;align-items:center;gap:.4em;} .oc-tour-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--oc-text-dim);} .oc-tour-team,.oc-tour-part{display:inline-flex;align-items:center;gap:.4em;} .oc-tour-part{font-family:var(--oc-font-mono);} .oc-tour-progress{display:flex;flex-direction:column;gap:6px;} .oc-tour-proglbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--oc-muted);display:flex;justify-content:space-between;} .oc-tour-progval{font-family:var(--oc-font-mono);color:var(--oc-text);font-weight:650;} .oc-tour-bar{height:8px;border-radius:999px;background:var(--oc-surface-3);overflow:hidden;border:1px solid var(--oc-border);} .oc-tour-barfill{height:100%;border-radius:inherit;background:var(--oc-grad);background-size:200% auto;box-shadow:0 0 12px rgba(99,102,241,.5);transition:width .6s cubic-bezier(.2,.8,.2,1);} .oc-tour-champ{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--oc-radius-sm);background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(251,191,36,.04));border:1px solid rgba(251,191,36,.35);} .oc-tour-champ-logo{width:48px;height:48px;border-radius:12px;object-fit:cover;border:2px solid rgba(251,191,36,.5);flex:none;} .oc-tour-champ-info{min-width:0;} .oc-tour-champ-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--oc-gold);font-weight:700;} .oc-tour-champ-name{font-family:var(--oc-font-display);font-weight:700;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ------------------------------------------------------------------ */ /* 15. MANAGEMENT COMPOSERS + TOASTS */ /* ------------------------------------------------------------------ */ .oc-manage-card{ border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow);padding:clamp(18px,3vw,26px); } .oc-manage-global{border-color:rgba(99,102,241,.35);background:linear-gradient(160deg,rgba(99,102,241,.10),rgba(255,255,255,.02));} .oc-manage-cardtitle{font-family:var(--oc-font-display);font-weight:750;font-size:1.3rem;margin-bottom:.4em;} .oc-manage-subhead{font-size:.9rem;color:var(--oc-text-dim);margin-bottom:1.2em;} .oc-manage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2.4vw,24px);margin-top:18px;} .oc-manage-clanhead{display:flex;align-items:center;gap:14px;margin-bottom:16px;} .oc-manage-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;border:2px solid var(--oc-border-2);background:var(--oc-surface-2);flex:none;} .oc-manage-clanname{font-family:var(--oc-font-display);font-weight:700;font-size:1.16rem;line-height:1.1;} .oc-manage-roles{display:flex;flex-direction:column;gap:6px;margin-top:4px;} .oc-manage-roleslbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--oc-muted);} .oc-manage-rolechips{display:flex;flex-wrap:wrap;gap:6px;} /* composer */ .oc-composer{display:flex;flex-direction:column;gap:12px;} .oc-composer-input, .oc-composer-title, .oc-composer-body, .oc-composer-image{ width:100%;font-family:var(--oc-font);font-size:.94rem;color:var(--oc-text); padding:.8em 1em;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border-2);background:var(--oc-surface); transition:border-color .2s,box-shadow .2s; } .oc-composer-input::placeholder, .oc-composer-title::placeholder, .oc-composer-body::placeholder, .oc-composer-image::placeholder{color:var(--oc-muted);} .oc-composer-input:focus, .oc-composer-title:focus, .oc-composer-body:focus, .oc-composer-image:focus{outline:none;border-color:var(--oc-accent);box-shadow:var(--oc-glow-accent);} .oc-composer-title{font-family:var(--oc-font-display);font-weight:600;font-size:1.02rem;} .oc-composer-body{min-height:110px;resize:vertical;line-height:1.5;} .oc-composer-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;} .oc-composer-send{ font-family:var(--oc-font-display);font-weight:650;color:#fff;cursor:pointer; padding:.7em 1.5em;border-radius:999px;border:1px solid transparent; background:var(--oc-grad);background-size:160% 160%; box-shadow:0 12px 28px -12px rgba(99,102,241,.55); transition:transform .2s,box-shadow .25s,filter .2s; } .oc-composer-send:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 36px -12px rgba(99,102,241,.6);} .oc-composer-send:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none;} /* toasts */ .ow-clan-toast-host{ position:fixed;top:calc(var(--oc-navh) + 14px);right:16px;z-index:1100; display:flex;flex-direction:column;gap:10px; max-width:min(360px,calc(100vw - 32px));pointer-events:none; } .ow-clan-toast{ pointer-events:auto;display:flex;align-items:center;gap:10px; padding:.85em 1.1em;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border-2);background:var(--oc-surface-3);color:var(--oc-text); box-shadow:var(--oc-shadow-lg); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transform:translateX(120%);opacity:0; transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s; } .ow-clan-toast.is-in{transform:translateX(0);opacity:1;} .ow-clan-toast::before{content:"";width:4px;align-self:stretch;border-radius:99px;background:var(--oc-muted);} .oc-toast-ok::before{background:var(--oc-green);} .oc-toast-err::before{background:var(--oc-red);} .oc-toast-ok{border-color:rgba(34,197,94,.4);} .oc-toast-err{border-color:rgba(239,68,68,.4);} .oc-toast-txt{font-size:.9rem;line-height:1.35;} /* ------------------------------------------------------------------ */ /* 16. CTA + FOOTER */ /* ------------------------------------------------------------------ */ .ow-clan-cta{position:relative;} .oc-cta-inner{ position:relative;overflow:hidden; max-width:var(--oc-maxw);margin:0 auto;text-align:center; padding:clamp(36px,6vw,64px) clamp(20px,4vw,48px); border-radius:var(--oc-radius-lg);border:1px solid var(--oc-border-2); background:radial-gradient(700px 300px at 50% -20%,rgba(99,102,241,.25),transparent 70%),var(--oc-card-grad); box-shadow:var(--oc-shadow-lg); } .oc-cta-inner::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:var(--oc-grad);opacity:.45;pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } .oc-cta-title{font-family:var(--oc-font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;letter-spacing:-.02em;} .oc-cta-sub{color:var(--oc-text-dim);font-size:clamp(1rem,1.6vw,1.16rem);max-width:50ch;margin:1em auto 1.8em;} .oc-cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;} .ow-clan-foot{border-top:1px solid var(--oc-border);background:var(--oc-glass);} .oc-foot-inner{ max-width:var(--oc-maxw);margin:0 auto; display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between; padding:clamp(28px,4vw,44px) clamp(16px,4vw,32px); } .oc-foot-brand{display:flex;flex-direction:column;gap:4px;} .oc-foot-name{font-family:var(--oc-font-display);font-weight:800;font-size:1.2rem;background:var(--oc-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .oc-foot-tag{font-size:.86rem;color:var(--oc-muted);} .oc-foot-links{display:flex;flex-wrap:wrap;gap:18px;} .oc-foot-link{color:var(--oc-text-dim);text-decoration:none;font-size:.9rem;transition:color .2s;} .oc-foot-link:hover{color:var(--oc-text);} .oc-foot-copy{width:100%;text-align:center;font-size:.8rem;color:var(--oc-muted);border-top:1px solid var(--oc-border);padding-top:18px;margin-top:6px;font-family:var(--oc-font-mono);} /* ------------------------------------------------------------------ */ /* 17. BOOT LOADER */ /* ------------------------------------------------------------------ */ .ow-clan-bootloading{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; min-height:60vh;padding:60px 20px;text-align:center; } .oc-spinner{ width:46px;height:46px;border-radius:50%; border:3px solid var(--oc-border-2);border-top-color:var(--oc-accent); animation:oc-spin .9s linear infinite; } .oc-loading-txt{color:var(--oc-text-dim);font-family:var(--oc-font-mono);font-size:.9rem;letter-spacing:.05em;animation:oc-pulse 1.6s ease-in-out infinite;} /* ------------------------------------------------------------------ */ /* 18. CLAN HUB (sub-page) */ /* ------------------------------------------------------------------ */ .ow-clan-hubpage{padding-bottom:60px;} .ow-clan-backbtn{ display:inline-flex;align-items:center;gap:.5em; margin:clamp(20px,4vw,32px) auto 0;max-width:var(--oc-maxw); padding:0 clamp(16px,4vw,32px); font-family:var(--oc-font-display);font-weight:600;font-size:.92rem; color:var(--oc-text-dim);background:none;border:none;cursor:pointer; width:100%;justify-content:flex-start;transition:color .2s; } .ow-clan-backbtn:hover{color:var(--oc-text);} .ow-clan-hubhead{ position:relative;max-width:var(--oc-maxw);margin:18px auto 0; border-radius:var(--oc-radius-lg);overflow:hidden; border:1px solid var(--oc-border-2);background:var(--oc-card-grad); box-shadow:var(--oc-shadow-lg),0 0 80px -40px rgba(99,102,241,.5); } /* gradient edge so the whole header reads as a premium HUD plate */ .ow-clan-hubhead::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:1; background:var(--oc-grad);opacity:.4;pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } .oc-hubhead-banner{height:clamp(140px,22vw,240px);position:relative;background:linear-gradient(135deg,#11132a,#0a0b14);overflow:hidden;} .oc-hubhead-banner-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06) contrast(1.02);opacity:1;transform:scale(1.03);} /* LIGHT-HUB-BANNER FIX 2026-06-01 (feedback "el banner no se ve bien"): en claro la foto borrosa del banner (ej "ZERO HEX") se leía como fantasma gris. Banda de marca limpia índigo→cyan + foto como textura casi imperceptible (igual que la champion card). */ [data-theme="light"] .oc-hubhead-banner{background:linear-gradient(120deg,#5257ec,#0891b2);} [data-theme="light"] .oc-hubhead-banner-img{filter:blur(1px) saturate(1.05) contrast(1.02);opacity:.55;transform:scale(1.04);} /* HUB-BANNER FIX 2026-05-31: veil span sits ON TOP of the (::after renders UNDER sibling imgs, leaving raw banners showing). Blends bright banners into the dark header. */ .oc-hubhead-banner-veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,11,20,.08) 0%,rgba(10,11,20,.36) 46%,rgba(10,11,20,.82) 80%,var(--oc-bg-2) 100%),linear-gradient(100deg,rgba(82,88,236,.20),transparent 60%);} [data-theme="light"] .oc-hubhead-banner-veil{ background:linear-gradient(180deg,rgba(82,88,236,.20) 0%,rgba(8,145,178,.12) 32%,rgba(248,249,252,.84) 78%,var(--oc-bg-2) 100%),linear-gradient(110deg,rgba(82,88,236,.30),rgba(8,145,178,.16) 55%,transparent);} .oc-hubhead-body{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,28px);align-items:flex-end;padding:clamp(16px,3vw,28px);margin-top:clamp(-66px,-8.5vw,-48px);} .oc-hubhead-logo{ width:clamp(96px,15vw,140px);height:clamp(96px,15vw,140px); border-radius:26px;object-fit:cover;flex:none; border:4px solid var(--oc-surface-3);background:var(--oc-surface-2); box-shadow:var(--oc-shadow-lg),0 0 0 1px color-mix(in srgb,var(--oc-accent) 40%,transparent),0 18px 50px -18px rgba(99,102,241,.6); } .oc-hubhead-info{flex:1;min-width:200px;} .oc-hubhead-namerow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;} .oc-hubhead-name{font-family:var(--oc-font-display);font-weight:800;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.05;letter-spacing:-.02em;} .oc-hubhead-tag{font-family:var(--oc-font-mono);font-size:.8rem;color:var(--oc-accent2);padding:.3em .7em;border-radius:999px;border:1px solid var(--oc-border-2);background:var(--oc-surface-2);} .oc-hubhead-stats{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);margin-top:16px;} .oc-hubhead-leaders{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .oc-hubhead-invite{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} /* ---- EPIC HUB BADGE ROW: prominent glowing gaming-HUD chips ---- */ .oc-hubhead-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;} .oc-hub-badge{ --_bc:var(--oc-accent); position:relative; display:inline-flex;align-items:center;gap:.5em; font-family:var(--oc-font-display);font-weight:750; font-size:.84rem;letter-spacing:.04em; padding:.5em .95em;border-radius:11px; color:#fff; border:1px solid color-mix(in srgb,var(--_bc) 55%,transparent); background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0)), color-mix(in srgb,var(--_bc) 22%,transparent); box-shadow: 0 0 0 1px color-mix(in srgb,var(--_bc) 35%,transparent), 0 10px 26px -12px color-mix(in srgb,var(--_bc) 75%,transparent), inset 0 1px 0 rgba(255,255,255,.18); text-shadow:0 1px 2px rgba(0,0,0,.35); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); white-space:nowrap;line-height:1; } /* animated gradient hairline border on top so they read as HUD plates */ .oc-hub-badge::after{ content:"";position:absolute;left:.7em;right:.7em;top:0;height:1px;border-radius:99px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--_bc) 90%,white),transparent); opacity:.8;pointer-events:none; } .oc-hub-badge-ico{display:inline-flex;line-height:0;color:color-mix(in srgb,var(--_bc) 30%,white);} .oc-hub-badge-ico svg{display:block;} .oc-hub-badge-txt{line-height:1;} .oc-hub-badge--official{--_bc:var(--oc-gold);color:#fff6dd;} .oc-hub-badge--community{--_bc:var(--oc-accent2);color:#e0fbff;} .oc-hub-badge--top{--_bc:var(--oc-gold);color:#fff6dd;} .oc-hub-badge--members{--_bc:var(--oc-accent);color:#eef0ff;} .oc-hub-badge--elo{--_bc:var(--oc-purple);color:#f3ecff;} /* official/top get a stronger gold glow pulse to feel imponente */ .oc-hub-badge--official, .oc-hub-badge--top{ box-shadow: 0 0 0 1px rgba(251,191,36,.45), 0 12px 30px -10px rgba(251,191,36,.7), inset 0 1px 0 rgba(255,255,255,.25); } [data-theme="light"] .oc-hub-badge{ color:#1a1f3a;text-shadow:none; background: linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2)), color-mix(in srgb,var(--_bc) 16%,white); border-color:color-mix(in srgb,var(--_bc) 45%,transparent); } [data-theme="light"] .oc-hub-badge--official, [data-theme="light"] .oc-hub-badge--top{color:#7a5400;} [data-theme="light"] .oc-hub-badge--community{color:#0b5566;} [data-theme="light"] .oc-hub-badge--members{color:#2a2f8a;} [data-theme="light"] .oc-hub-badge--elo{color:#5b21b6;} [data-theme="light"] .oc-hub-badge-ico{color:color-mix(in srgb,var(--_bc) 70%,black);} .oc-hubstat{display:flex;flex-direction:column;gap:2px;transition:transform .25s cubic-bezier(.22,1,.36,1);} .oc-hubstat:hover{transform:translateY(-2px);} .oc-hubstat-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;margin-bottom:5px;color:var(--oc-accent,#7c83ff);background:color-mix(in srgb,var(--oc-accent,#7c83ff) 16%,transparent);border:1px solid color-mix(in srgb,var(--oc-accent,#7c83ff) 28%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;} .oc-hubstat:hover .oc-hubstat-ico{transform:scale(1.08);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--oc-accent,#7c83ff) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.12);} .oc-hubstat-ico svg{width:14px;height:14px;fill:currentColor;} [data-theme="light"] .oc-hubstat-ico{color:color-mix(in srgb,var(--oc-accent,#5257ec) 78%,black);background:color-mix(in srgb,var(--oc-accent,#5257ec) 12%,white);border-color:color-mix(in srgb,var(--oc-accent,#5257ec) 24%,transparent);} .oc-hubstat-val{font-family:var(--oc-font-mono);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);background:var(--oc-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .oc-hubstat-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--oc-muted);} /* tabs — REDESIGN 2026-06-01: NOT a 2nd navbar. The strip is a CONTAINED, rounded, inset segmented control that lives in the content column with side margin so it reads unambiguously as page content attached to the header card (tightened top margin so header + tabs feel like one unit). It stays sticky, but because it's rounded + inset + shadowed (a floating pill rail, not a full-bleed band flush at the navbar) it never mimics the fixed navbar. */ .ow-clan-tabs{ position:sticky;top:calc(var(--oc-navh) + 10px);z-index:30; max-width:var(--oc-maxw); margin:10px auto 0; /* side gutter matches the header card so the rail sits flush under it */ padding:0 clamp(16px,4vw,32px); } .oc-tabs-inner{ position:relative; display:flex;gap:6px;align-items:center; padding:6px; border-radius:999px; border:1px solid var(--oc-border-2); background:var(--oc-glass); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); box-shadow:var(--oc-shadow),inset 0 1px 0 rgba(255,255,255,.06); overflow-x:auto;scrollbar-width:none; scroll-snap-type:x proximity; } .oc-tabs-inner::-webkit-scrollbar{display:none;} .oc-tab{ flex:none;scroll-snap-align:start; font-family:var(--oc-font-display);font-weight:600;font-size:.88rem; color:var(--oc-text-dim);cursor:pointer;white-space:nowrap; padding:.52em 1.05em;border-radius:999px;border:1px solid transparent;background:transparent; transition:color .2s,background .2s,border-color .2s,box-shadow .2s; } .oc-tab:hover{color:var(--oc-text);background:var(--oc-surface-2);} .oc-tab.is-active{color:#fff;border-color:rgba(99,102,241,.55);background:linear-gradient(180deg,#4f54e8,#4036c9);box-shadow:0 6px 18px -8px rgba(79,70,229,.6),inset 0 1px 0 rgba(255,255,255,.12);} .ow-clan-tabpanel{max-width:var(--oc-maxw);margin:clamp(20px,2.6vw,30px) auto 0;padding:0 clamp(16px,4vw,32px);} /* hub loading skeleton */ .ow-clan-hubloading{max-width:var(--oc-maxw);margin:22px auto 0;padding:0 clamp(16px,4vw,32px);display:flex;flex-direction:column;gap:14px;} /* explicit "Cargando clan…" pill so a slow load never reads as a crash */ .oc-hub-loadbar{display:inline-flex;align-items:center;gap:12px;align-self:flex-start; padding:10px 18px;border-radius:999px;border:1px solid var(--oc-border-2); background:var(--oc-surface);box-shadow:var(--oc-shadow); font-family:var(--oc-font-display);font-weight:650;color:var(--oc-text);font-size:.95rem;} .oc-hub-loadtxt{letter-spacing:.01em;} .oc-hub-loaddots{display:inline-flex;gap:4px;} .oc-hub-loaddots i{width:5px;height:5px;border-radius:50%;background:var(--oc-accent2);animation:oc-loaddot 1.2s infinite ease-in-out;} .oc-hub-loaddots i:nth-child(2){animation-delay:.18s;} .oc-hub-loaddots i:nth-child(3){animation-delay:.36s;} @keyframes oc-loaddot{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}} .oc-hub-skel{display:flex;flex-direction:column;gap:14px;} .oc-hub-skel-banner,.oc-hub-skel-row,.oc-hub-skel-stat,.oc-hub-skel-block{border-radius:var(--oc-radius);background:linear-gradient(100deg,var(--oc-surface) 30%,var(--oc-surface-2) 50%,var(--oc-surface) 70%);background-size:200% 100%;animation:oc-skel 1.4s linear infinite;} .oc-hub-skel-banner{height:180px;} .oc-hub-skel-row{height:48px;} .oc-hub-skel-statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .oc-hub-skel-stat{height:70px;} .oc-hub-skel-block{height:160px;} /* hub error */ .ow-clan-error{max-width:640px;margin:60px auto;padding:40px 24px;text-align:center;border:1px solid var(--oc-border-2);border-radius:var(--oc-radius);background:var(--oc-surface);} .oc-error-txt{color:var(--oc-text-dim);font-size:1rem;} /* hub overview */ /* OVERVIEW REDESIGN 2026-06-01: two explicit columns; each column is a flex stack with even gaps (no orphan margins / mismatched-height blocks). */ .oc-hub-overview{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(16px,2.4vw,24px);align-items:start;} .oc-hub-col{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,24px);min-width:0;} .oc-hub-block{ border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); padding:clamp(16px,2.6vw,24px);box-shadow:var(--oc-shadow); } .oc-hub-annmini{padding:12px 0;border-top:1px solid var(--oc-border);} .oc-hub-annmini:first-of-type{border-top:0;padding-top:6px;} .oc-hub-annmini-title{font-family:var(--oc-font-display);font-weight:700;font-size:.98rem;color:var(--oc-text);margin-bottom:4px;} .oc-hub-annmini-body{color:var(--oc-text-dim);font-size:.9rem;line-height:1.5;} .oc-hub-annmini-foot{display:flex;gap:10px;margin-top:6px;font-size:.76rem;color:var(--oc-muted);} .oc-hub-annmini-time{margin-left:auto;} .oc-hub-blocktitle{font-family:var(--oc-font-display);font-weight:700;font-size:1.2rem;margin-bottom:.7em;} /* invite / join call-to-action — spans the full overview grid */ .oc-hub-join{ grid-column:1 / -1; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px; border-color:rgba(99,102,241,.35); background:radial-gradient(600px 220px at 0% -40%,rgba(99,102,241,.20),transparent 70%),var(--oc-card-grad); } .oc-hub-join-info{min-width:200px;flex:1;} .oc-hub-join .oc-hub-blocktitle{margin-bottom:.25em;} .oc-hub-join-sub{color:var(--oc-text-dim);font-size:.94rem;line-height:1.55;margin:0;} .oc-hub-join-btn{flex:none;} .oc-hub-blocktitle em{font-style:normal;background:var(--oc-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .oc-hub-desc{color:var(--oc-text-dim);font-size:.96rem;line-height:1.6;} .oc-hub-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;} .oc-hub-leaders{display:flex;flex-direction:column;gap:10px;} /* lineups */ .oc-lineups{display:flex;flex-direction:column;gap:14px;} .oc-lineup-card{border-radius:var(--oc-radius-sm);border:1px solid var(--oc-border);background:var(--oc-surface);padding:14px 16px;} .oc-lineup-name{font-family:var(--oc-font-display);font-weight:700;font-size:1rem;margin-bottom:10px;display:flex;align-items:center;gap:.5em;} .oc-lineup-users{display:flex;flex-wrap:wrap;gap:8px;} .oc-lineup-user{display:inline-flex;align-items:center;gap:.45em;padding:.35em .7em;border-radius:999px;background:var(--oc-surface-2);border:1px solid var(--oc-border);font-size:.84rem;color:var(--oc-text-dim);} /* hub announcements */ .oc-hub-announce{display:block;} .oc-hub-annlist{display:flex;flex-direction:column;gap:14px;} .oc-hub-anncard{ position:relative;border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); padding:18px;box-shadow:var(--oc-shadow); } .oc-hub-anncard.is-pinned{border-color:rgba(251,191,36,.45);background:linear-gradient(160deg,rgba(251,191,36,.10),rgba(255,255,255,.02));} .oc-ann-pin{display:inline-flex;align-items:center;gap:.35em;font-family:var(--oc-font-mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oc-gold);margin-bottom:8px;} .oc-ann-title{font-family:var(--oc-font-display);font-weight:700;font-size:1.12rem;margin-bottom:.4em;} .oc-ann-body{color:var(--oc-text-dim);font-size:.94rem;line-height:1.6;} .oc-ann-thumb{display:block;margin-top:14px;border-radius:var(--oc-radius-sm);overflow:hidden;cursor:zoom-in;border:1px solid var(--oc-border);max-width:420px;} .oc-ann-img{width:100%;height:auto;display:block;transition:transform .4s;} .oc-ann-thumb:hover .oc-ann-img{transform:scale(1.04);} .oc-ann-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:.78rem;color:var(--oc-muted);} .oc-ann-by{font-weight:600;color:var(--oc-text-dim);} .oc-ann-time{font-family:var(--oc-font-mono);} /* hub gallery */ .oc-hub-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;} .oc-gallery-cell{position:relative;border-radius:var(--oc-radius-sm);overflow:hidden;cursor:zoom-in;border:1px solid var(--oc-border);aspect-ratio:4/3;background:var(--oc-surface-2);} .oc-gallery-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;} .oc-gallery-cell:hover .oc-gallery-img{transform:scale(1.06);} .oc-gallery-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 8px;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));} /* ------------------------------------------------------------------ */ /* hub OVERVIEW PREVIEW (top members / top leaderboard) */ /* ------------------------------------------------------------------ */ .oc-hub-preview{grid-column:1 / -1;} .oc-hub-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;} .oc-hub-preview-head .oc-hub-blocktitle{margin-bottom:0;} .oc-hub-preview-link{ flex:none;font-family:var(--oc-font-display);font-weight:600;font-size:.82rem; color:var(--oc-accent2);background:var(--oc-surface-2);cursor:pointer; padding:.4em .9em;border-radius:999px;border:1px solid var(--oc-border-2); max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; transition:color .2s,border-color .2s,background .2s; } .oc-hub-preview-link:hover{color:var(--oc-text);border-color:var(--oc-accent);background:var(--oc-surface-3);} .oc-hub-topmembers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;} .oc-hub-topmember{ display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer; padding:10px 12px;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border);background:var(--oc-surface); transition:transform .18s,border-color .2s,background .2s,box-shadow .2s; } .oc-hub-topmember:hover{transform:translateX(3px);border-color:var(--oc-border-2);background:var(--oc-surface-2);box-shadow:var(--oc-shadow);} .oc-hub-topmember-rank{font-family:var(--oc-font-mono);font-weight:700;font-size:.9rem;color:var(--oc-muted);min-width:1.6ch;text-align:center;flex:none;} .oc-hub-topmember-av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--oc-border-2);flex:none;} .oc-hub-topmember-mid{display:flex;flex-direction:column;min-width:0;} .oc-hub-topmember-name{font-family:var(--oc-font-display);font-weight:650;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .oc-hub-topmember-kills{font-family:var(--oc-font-mono);font-size:.76rem;color:var(--oc-accent2);} /* ------------------------------------------------------------------ */ /* hub STAFF / LIDERAZGO — big leader cards */ /* ------------------------------------------------------------------ */ .oc-hub-staffwrap{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px);} .oc-hub-staffsec .oc-hub-blocktitle{margin-bottom:.7em;} .oc-hub-leadgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,2vw,20px);} .oc-lead-card{ position:relative;overflow:hidden; display:flex;align-items:center;gap:16px; padding:18px;border-radius:var(--oc-radius); border:1px solid var(--oc-border);background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow);cursor:pointer; transition:transform .22s,border-color .22s,box-shadow .22s; } .oc-lead-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(180deg,var(--oc-gold),var(--oc-accent));opacity:.85;} .oc-lead-card:hover{transform:translateY(-4px);border-color:rgba(251,191,36,.45);box-shadow:0 0 0 1px rgba(251,191,36,.25),0 20px 50px -22px rgba(251,191,36,.4);} .oc-lead-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--oc-surface-3);background:var(--oc-surface-2);box-shadow:0 0 0 1px rgba(251,191,36,.35);} .oc-lead-info{min-width:0;display:flex;flex-direction:column;gap:8px;} .oc-lead-name{font-family:var(--oc-font-display);font-weight:750;font-size:1.12rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;} /* ------------------------------------------------------------------ */ /* hub LEADERBOARDS (.lb) */ /* ------------------------------------------------------------------ */ .oc-hub-lb{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(16px,2.4vw,22px);align-items:start;} .oc-lb-card{ position:relative;overflow:hidden; border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow);padding:clamp(16px,2.4vw,22px); } .oc-lb-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--oc-grad);opacity:.85;} .oc-lb-head{margin-bottom:14px;} .oc-lb-titlewrap{display:flex;flex-direction:column;gap:8px;} .oc-lb-name{font-family:var(--oc-font-display);font-weight:750;font-size:1.2rem;line-height:1.15;} .oc-lb-chips{display:flex;flex-wrap:wrap;gap:6px;} .oc-lb-chip{ font-family:var(--oc-font-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em; padding:.3em .65em;border-radius:8px; border:1px solid var(--oc-border-2);background:var(--oc-surface-2);color:var(--oc-text-dim); } /* ------------------------------------------------------------------ */ /* SHARED RICH PLAYER ROW (leaderboards / sets / shame subjects) */ /* ------------------------------------------------------------------ */ .oc-player-row{ display:flex;align-items:center;gap:11px;min-width:0; padding:8px 11px;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border);background:var(--oc-surface); transition:transform .2s,border-color .2s,box-shadow .2s,background .2s; } .oc-player-row--click{cursor:pointer;} .oc-player-row--click:hover{ transform:translateY(-2px); border-color:var(--oc-border-2); background:var(--oc-surface-2); box-shadow:0 12px 30px -18px rgba(0,0,0,.6); } .oc-player-row--click:focus-visible{outline:2px solid var(--oc-accent2);outline-offset:2px;} /* rank medal / number */ .oc-player-rank{ font-family:var(--oc-font-mono);font-weight:700;font-size:.92rem; color:var(--oc-muted);min-width:2.1ch;text-align:center;flex:none; } .oc-player-rank--medal{font-size:1.18rem;line-height:1;} /* avatar + roblox corner badge */ .oc-player-avwrap{position:relative;flex:none;line-height:0;} .oc-player-avatar{ width:42px;height:42px;border-radius:50%;object-fit:cover; border:2px solid var(--oc-border-2);background:var(--oc-surface-2); } .oc-player-rbxbadge{ position:absolute;right:-3px;bottom:-3px; width:17px;height:17px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#e2241a;color:#fff;border:2px solid var(--oc-bg-2); box-shadow:0 2px 6px -1px rgba(226,36,26,.6); } .oc-player-rbxbadge svg{display:block;} /* text block */ .oc-player-mid{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1;} .oc-player-name{ font-family:var(--oc-font-display);font-weight:650;font-size:.97rem;line-height:1.15; color:var(--oc-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .oc-player-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;} .oc-player-user{ font-size:.78rem;color:var(--oc-text-dim); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14ch; } .oc-player-rbxchip{ display:inline-flex;align-items:center;gap:4px;flex:none; font-size:.68rem;font-weight:650;letter-spacing:.02em; padding:.15em .5em;border-radius:7px; background:rgba(226,36,26,.14);color:#ff6a5e;border:1px solid rgba(226,36,26,.32); } .oc-player-rbxchip svg{display:block;} .oc-player-rbxtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12ch;} .oc-player-id{ font-family:var(--oc-font-mono);font-size:.66rem;color:var(--oc-muted); opacity:.62;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* ------------------------------------------------------------------ */ /* leaderboard list (built on the shared player row) */ /* ------------------------------------------------------------------ */ .oc-lb-list{display:flex;flex-direction:column;gap:6px;} .oc-lb-list .oc-player-row--medal .oc-player-rank{font-size:1.18rem;} .oc-lb-list .oc-player-row--p1{background:linear-gradient(100deg,rgba(251,191,36,.16),var(--oc-surface));border-color:rgba(251,191,36,.45);} .oc-lb-list .oc-player-row--p2{background:linear-gradient(100deg,rgba(203,213,225,.14),var(--oc-surface));border-color:rgba(203,213,225,.4);} .oc-lb-list .oc-player-row--p3{background:linear-gradient(100deg,rgba(217,119,87,.14),var(--oc-surface));border-color:rgba(217,119,87,.4);} .oc-lb-entrydesc{ flex:none;font-family:var(--oc-font-mono);font-weight:650;font-size:.82rem; color:var(--oc-text-dim);padding:.2em .6em;border-radius:8px; background:var(--oc-surface-2);border:1px solid var(--oc-border); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10ch; } /* ------------------------------------------------------------------ */ /* hub SANCTIONS (this clan) */ /* ------------------------------------------------------------------ */ .oc-hub-sanctions{display:flex;flex-direction:column;gap:8px;} .oc-sanction-row{ display:flex;align-items:center;gap:14px; padding:12px 16px;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border);background:var(--oc-surface); transition:transform .18s,border-color .2s,background .2s,box-shadow .2s; } .oc-sanction-row[role="button"]{cursor:pointer;} .oc-sanction-row:hover{transform:translateX(3px);border-color:rgba(239,68,68,.35);background:var(--oc-surface-2);box-shadow:var(--oc-shadow);} .oc-sanction-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--oc-border-2);flex:none;} .oc-sanction-mid{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;} .oc-sanction-namerow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;} .oc-sanction-name{font-family:var(--oc-font-display);font-weight:650;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;} .oc-sanction-reason{font-size:.84rem;color:var(--oc-text-dim);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .oc-sanction-time{font-family:var(--oc-font-mono);font-size:.74rem;color:var(--oc-muted);white-space:nowrap;flex:none;} .oc-sanction-chip{ flex:none;font-family:var(--oc-font-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:.3em .6em;border-radius:8px;border:1px solid;white-space:nowrap; } .oc-sanction-chip--warn{color:#fcd34d;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.14);} .oc-sanction-chip--strike{color:#fdba74;border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.14);} .oc-sanction-chip--ban{color:#fca5a5;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.14);} .oc-sanction-chip--sancion{color:var(--oc-text-dim);border-color:var(--oc-border-2);background:var(--oc-surface-2);} [data-theme="light"] .oc-sanction-chip--warn{color:#92660a;} [data-theme="light"] .oc-sanction-chip--strike{color:#b45309;} [data-theme="light"] .oc-sanction-chip--ban{color:#b91c1c;} /* ------------------------------------------------------------------ */ /* hub MANAGE — leader-only inline editor */ /* ------------------------------------------------------------------ */ .oc-hub-manage{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,24px);} .oc-manage-sec{ border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); box-shadow:var(--oc-shadow);padding:clamp(16px,2.6vw,24px); } .oc-manage-sechead{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .oc-manage-secico{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;flex:none;border-radius:10px; color:var(--oc-accent2);border:1px solid var(--oc-border-2); background:var(--oc-surface-2); } .oc-manage-secico svg{display:block;} .oc-manage-sectitle{font-family:var(--oc-font-display);font-weight:750;font-size:1.18rem;line-height:1.1;} .oc-manage-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .oc-manage-fieldlbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--oc-muted);font-weight:600;} .oc-manage-input{ width:100%;box-sizing:border-box; font-family:var(--oc-font);font-size:.92rem;color:var(--oc-text); padding:.72em 1em;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border-2);background:var(--oc-surface); transition:border-color .2s,box-shadow .2s; } .oc-manage-input::placeholder{color:var(--oc-muted);} .oc-manage-input:focus{outline:none;border-color:var(--oc-accent);box-shadow:var(--oc-glow-accent);} .oc-manage-input.is-invalid{border-color:var(--oc-red);box-shadow:0 0 0 2px rgba(239,68,68,.2);} .oc-manage-textarea{min-height:90px;resize:vertical;line-height:1.5;} .oc-manage-actions{display:flex;justify-content:flex-end;margin-top:6px;} .oc-manage-btn,.oc-manage-addbtn{font-family:var(--oc-font-display);font-weight:650;} .oc-manage-btn:disabled,.oc-manage-addbtn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none;} /* composer rows (gallery / shame add forms) */ .oc-manage-composer{display:flex;flex-direction:column;gap:10px;margin-bottom:16px; padding:14px;border-radius:var(--oc-radius-sm);border:1px dashed var(--oc-border-2);background:var(--oc-surface);} .oc-manage-composer .oc-manage-addbtn{align-self:flex-start;} .oc-manage-composer-wrap{margin-bottom:16px;} /* deletable item lists */ .oc-manage-itemlist{display:flex;flex-direction:column;gap:8px;} .oc-manage-item{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border);background:var(--oc-surface);overflow:hidden; } .oc-manage-itemmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;} .oc-manage-itemtitle{font-weight:650;font-size:.92rem;color:var(--oc-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .oc-manage-itemsub{font-size:.82rem;color:var(--oc-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .oc-manage-emptyrow{font-size:.88rem;color:var(--oc-muted);padding:12px;text-align:center;border:1px dashed var(--oc-border-2);border-radius:var(--oc-radius-sm);background:var(--oc-surface);} .oc-manage-thumb{flex:none;width:54px;height:42px;border-radius:8px;overflow:hidden;border:1px solid var(--oc-border-2);background:var(--oc-surface-2);} .oc-manage-thumbimg{width:100%;height:100%;object-fit:cover;display:block;} .oc-manage-del{ flex:none;width:30px;height:30px;border-radius:8px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; color:var(--oc-text-dim);border:1px solid var(--oc-border-2);background:var(--oc-surface-2); transition:color .2s,background .2s,border-color .2s; } .oc-manage-del:hover{color:#fff;background:var(--oc-red);border-color:var(--oc-red);} .oc-manage-del:disabled{opacity:.5;cursor:not-allowed;} .oc-manage-del svg{display:block;} /* hub members */ .oc-hub-members{display:flex;flex-direction:column;gap:24px;} .oc-hub-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(14px,2vw,20px);} .oc-hub-staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;} .oc-staff-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--oc-radius-sm);border:1px solid var(--oc-border);background:var(--oc-surface);transition:border-color .2s,box-shadow .2s,transform .2s;} .oc-staff-card:hover{transform:translateY(-3px);border-color:var(--oc-border-2);box-shadow:var(--oc-shadow);} .oc-staff-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--oc-border-2);flex:none;} .oc-staff-info{min-width:0;} .oc-staff-name{font-family:var(--oc-font-display);font-weight:650;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* hub pvp / sets — match-result cards */ .oc-hub-pvp{display:flex;flex-direction:column;gap:10px;} .oc-pvp-row{ position:relative;overflow:hidden; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,1.6vw,18px); padding:12px clamp(12px,1.8vw,16px);border-radius:var(--oc-radius-sm); border:1px solid var(--oc-border);background:var(--oc-surface); } .oc-pvp-row::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--oc-green),rgba(34,197,94,.25)); } .oc-pvp-side{display:flex;align-items:center;min-width:0;} /* the shared chip fills the side; loser column mirrors to the right edge */ .oc-pvp-side .oc-player-row{flex:1;background:transparent;border-color:transparent;padding:4px 6px;} .oc-pvp-side .oc-player-row--click:hover{background:var(--oc-surface-2);border-color:var(--oc-border);} .oc-pvp-loser{justify-content:flex-end;} .oc-pvp-loser .oc-player-row{flex-direction:row-reverse;text-align:right;} .oc-pvp-loser .oc-player-mid{align-items:flex-end;} .oc-pvp-loser .oc-player-meta{justify-content:flex-end;} /* winner accent / loser dim */ .oc-pvp-winner .oc-player-name{color:var(--oc-green);} .oc-pvp-winner .oc-player-avatar{border-color:rgba(34,197,94,.6);box-shadow:0 0 0 2px rgba(34,197,94,.28);} .oc-pvp-loser{opacity:.72;} .oc-pvp-loser .oc-player-avatar{border-color:var(--oc-border);} /* middle: score / won-badge / elo / date */ .oc-pvp-mid{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;} .oc-pvp-score{font-family:var(--oc-font-mono);font-weight:750;font-size:1.32rem;line-height:1;color:var(--oc-text);letter-spacing:.02em;} .oc-pvp-wonbadge{ display:inline-flex;align-items:center;gap:4px; font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; padding:.3em .7em;border-radius:999px; background:rgba(34,197,94,.16);color:var(--oc-green);border:1px solid rgba(34,197,94,.4); } .oc-pvp-wonbadge svg{display:block;} .oc-pvp-elo{font-size:.7rem;color:var(--oc-muted);font-family:var(--oc-font-mono);} .oc-pvp-time{font-size:.68rem;color:var(--oc-muted);} /* hub apply / vacancies */ .oc-hub-apply{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(16px,2.4vw,22px);} .oc-vacancy-card{ position:relative;overflow:hidden; border-radius:var(--oc-radius);border:1px solid var(--oc-border); background:var(--oc-card-grad); backdrop-filter:blur(var(--oc-blur));-webkit-backdrop-filter:blur(var(--oc-blur)); padding:20px;box-shadow:var(--oc-shadow); display:flex;flex-direction:column;gap:12px; transition:transform .25s,border-color .25s,box-shadow .25s; } .oc-vacancy-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--oc-grad);} .oc-vacancy-card:hover{transform:translateY(-4px);border-color:var(--oc-border-2);box-shadow:var(--oc-glow-accent);} .oc-vacancy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;} .oc-vacancy-title{font-family:var(--oc-font-display);font-weight:750;font-size:1.16rem;line-height:1.2;} .oc-vacancy-status{flex:none;font-family:var(--oc-font-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.34em .7em;border-radius:999px;color:#86efac;border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.14);} [data-theme="light"] .oc-vacancy-status{color:#15803d;} .oc-vacancy-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--oc-text-dim);} .oc-vacancy-role,.oc-vacancy-slots,.oc-vacancy-deadline{display:inline-flex;align-items:center;gap:.4em;} .oc-vacancy-slots{font-family:var(--oc-font-mono);} .oc-vacancy-deadline{color:var(--oc-muted);} .oc-vacancy-desc{color:var(--oc-text-dim);font-size:.92rem;line-height:1.55;} .oc-vacancy-reqs{display:flex;flex-direction:column;gap:6px;} .oc-vacancy-reqlbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--oc-muted);} .oc-vacancy-reqlist{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;} .oc-vacancy-req{display:flex;align-items:flex-start;gap:.5em;font-size:.88rem;color:var(--oc-text-dim);} .oc-vacancy-req::before{content:"\25B8";color:var(--oc-accent2);flex:none;} .oc-vacancy-tags{display:flex;flex-wrap:wrap;gap:6px;} .oc-vacancy-tag{font-family:var(--oc-font-mono);font-size:.7rem;padding:.3em .6em;border-radius:8px;border:1px solid var(--oc-border-2);background:var(--oc-surface-2);color:var(--oc-text-dim);} .oc-vacancy-apply{ margin-top:auto;align-self:flex-start; font-family:var(--oc-font-display);font-weight:650;color:#fff;cursor:pointer; padding:.7em 1.5em;border-radius:999px;border:1px solid transparent; background:var(--oc-grad);background-size:160% 160%; box-shadow:0 12px 28px -12px rgba(99,102,241,.55); transition:transform .2s,filter .2s,box-shadow .25s; } .oc-vacancy-apply:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 36px -12px rgba(99,102,241,.6);} .oc-vacancy-apply:disabled{opacity:.6;cursor:default;transform:none;filter:none;box-shadow:none;} /* apply: login gate + question form */ .oc-apply-gate{margin-top:6px;padding:18px;text-align:center;border:1px dashed var(--oc-border-2);border-radius:var(--oc-radius-sm);background:var(--oc-surface-2);display:flex;flex-direction:column;align-items:center;gap:10px;} .oc-apply-gate-msg{margin:0;font-size:.92rem;color:var(--oc-text-dim);} .oc-apply-login{align-self:center;} .oc-apply-form{display:flex;flex-direction:column;gap:12px;margin-top:6px;} .oc-apply-field{display:flex;flex-direction:column;gap:6px;} .oc-apply-q{font-size:.85rem;font-weight:650;color:var(--oc-text);} .oc-apply-input{width:100%;box-sizing:border-box;resize:vertical;min-height:54px;padding:10px 12px;border-radius:var(--oc-radius-sm);border:1px solid var(--oc-border-2);background:var(--oc-surface);color:var(--oc-text);font-family:inherit;font-size:.9rem;line-height:1.5;} .oc-apply-input:focus{outline:none;border-color:var(--oc-accent);box-shadow:0 0 0 2px rgba(99,102,241,.18);} .oc-apply-input::placeholder{color:var(--oc-muted);} /* ------------------------------------------------------------------ */ /* 19. RESPONSIVE */ /* ------------------------------------------------------------------ */ @media (max-width:1180px){ :root,[data-theme="dark"],[data-theme="light"]{--oc-maxw:980px;} .oc-clan-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));} .oc-tour-grid,.oc-hub-apply{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));} } @media (max-width:1024px){ .oc-hub-overview{grid-template-columns:1fr;} .oc-user-grid,.oc-hub-roster{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));} } @media (max-width:900px){ .oc-hero-inner{grid-template-columns:1fr;} .oc-champ-card{order:2;max-width:520px;} .oc-hero-left{order:1;} .oc-clan-grid,.oc-shame-grid,.oc-tour-grid,.oc-hub-apply{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));} .oc-manage-grid{grid-template-columns:1fr;} } @media (max-width:768px){ .ow-clan-section{padding:clamp(34px,8vw,56px) 18px;} .oc-clan-grid,.oc-clan-grid--light,.oc-shame-grid,.oc-tour-grid,.oc-hub-apply{grid-template-columns:1fr;} .oc-user-grid,.oc-hub-roster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));} .oc-hub-staff,.oc-hub-leadgrid,.oc-hub-lb,.oc-hub-topmembers{grid-template-columns:1fr;} .oc-rankrow{grid-template-columns:auto auto 1fr;} .oc-rank-stats{flex-direction:column;align-items:flex-end;gap:2px;} .oc-pvp-row .oc-player-name{font-size:.86rem;} .oc-pvp-side .oc-player-id{display:none;} .oc-pvp-score{font-size:1.15rem;} .ow-clan-toast-host{left:16px;right:16px;max-width:none;} } @media (max-width:600px){ .oc-hero-stats{gap:18px 24px;} .oc-podium-medal{font-size:1.3rem;} .oc-podium-name{font-size:.86rem;} .oc-toolbar{flex-direction:column;align-items:stretch;} .oc-search{flex:1 1 auto;} .oc-sort,.oc-count{align-self:flex-start;} .oc-hubhead-body{margin-top:-50px;} .oc-hubhead-namerow{gap:8px;} .oc-tour-meta,.oc-vacancy-meta{gap:10px;} } @media (max-width:480px){ .ow-clan-section{padding:30px 14px;} .oc-hero-ctas{flex-direction:column;align-items:stretch;} .oc-hero-ctas .ow-clan-btn{width:100%;} .oc-cta-btns{flex-direction:column;align-items:stretch;} .oc-cta-btns .ow-clan-btn{width:100%;} .oc-user-grid,.oc-hub-roster{grid-template-columns:1fr 1fr;} .oc-champ-body{flex-direction:column;text-align:center;align-items:center;margin-top:-50px;} .oc-card-body{flex-direction:column;align-items:center;text-align:center;margin-top:-40px;} .oc-card-info{padding-top:0;} .oc-podium-name{max-width:10ch;} .oc-podium-place{font-size:1.5rem;} .oc-lb-close{top:6px;right:6px;} .oc-foot-inner{flex-direction:column;align-items:flex-start;text-align:left;} /* sets: keep score centred but shrink the player chips */ .oc-pvp-row{gap:6px;padding:10px 12px 10px 14px;} .oc-pvp-side .oc-player-row{padding:2px 4px;gap:8px;} .oc-pvp-side .oc-player-avatar{width:36px;height:36px;} .oc-pvp-side .oc-player-meta{display:none;} /* leaderboard rows: drop the id line on tiny screens */ .oc-lb-list .oc-player-id{display:none;} } /* hard guard: no horizontal overflow at 360px */ @media (max-width:380px){ .oc-hero-title{font-size:2rem;} .oc-hubhead-name{font-size:1.5rem;} .oc-secnav-inner{padding-inline:10px;} .ow-clan-tabs{padding-inline:10px;} .oc-user-grid,.oc-hub-roster{grid-template-columns:1fr;} .oc-podium{gap:6px;} .oc-podium-logo{width:48px;height:48px;} .oc-podium-1 .oc-podium-logo{width:60px;height:60px;} } /* ===== CLASIFICACIONES · más vida / aire / épico (2026-06-02, feedback owner: "dale más vida, más aire, más épico, sin cringe, más animaciones para celular"). Pulido del podio en CSS puro → se ve también en celular aunque GSAP/CDN tarde: medallas tipo chip con el color del puesto, anillo + glow dorado en el campeón, un brillo lento que recorre la base del #1, y más aire entre columnas. ===== */ .ow-clan-strong{padding-top:clamp(6px,1.5vw,14px);} .oc-podium{gap:clamp(10px,3vw,30px);margin:clamp(22px,4vw,40px) auto clamp(30px,5vw,50px);max-width:780px;} /* medalla = chip circular con degradado del puesto */ .oc-podium-medal{ width:clamp(28px,6vw,36px);height:clamp(28px,6vw,36px);display:flex;align-items:center;justify-content:center; border-radius:50%;font-family:var(--oc-font-display);font-weight:800;font-size:clamp(.85rem,2.4vw,1.05rem); color:#0a0b14;margin:0 auto 8px;box-shadow:0 6px 16px -6px rgba(0,0,0,.6); } .oc-place-gold .oc-podium-medal{background:linear-gradient(135deg,#fde68a,#f59e0b);} .oc-place-silver .oc-podium-medal{background:linear-gradient(135deg,#f8fafc,#94a3b8);} .oc-place-bronze .oc-podium-medal{background:linear-gradient(135deg,#fcd9b6,#c2703f);color:#1a0f08;} /* anillo + glow segun el puesto en el logo */ .oc-place-gold .oc-podium-logo{box-shadow:0 0 0 3px rgba(251,191,36,.55),0 12px 32px -8px rgba(251,191,36,.55);} .oc-place-silver .oc-podium-logo{box-shadow:0 0 0 2px rgba(203,213,225,.5),0 10px 26px -10px rgba(203,213,225,.4);} .oc-place-bronze .oc-podium-logo{box-shadow:0 0 0 2px rgba(217,119,87,.55),0 10px 26px -10px rgba(217,119,87,.4);} .oc-place-gold .oc-podium-points{text-shadow:0 0 14px rgba(251,191,36,.4);} /* brillo sutil recorriendo la base del campeón (respeta prefers-reduced-motion) */ .oc-podium-1 .oc-podium-base{position:relative;overflow:hidden;} @media (prefers-reduced-motion:no-preference){ .oc-podium-1 .oc-podium-base::before{ content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent); transform:skewX(-18deg);animation:oc-sheen 4.4s ease-in-out infinite; } } @keyframes oc-sheen{0%{left:-60%;}60%,100%{left:140%;}} [data-perf="low"] .oc-podium-1 .oc-podium-base::before{animation:none;}