/* ════════════════════════════════════════════════════════════════════ Mundial2026 · MODOS — capa de skins celebratorios sobre M26 OS ════════════════════════════════════════════════════════════════════ Generaliza la idea de pride.css: una capa ORTOGONAL que inyecta una paleta temática en las superficies de marca (el "26" del logo, la stripe del opener, el campeón del bracket, el holo del prog-fill, la self-row del leaderboard, el underline del nav activo) MÁS dos superficies "grandes" (m29o, a pedido del owner — quería que se notara más que en tablas chicas): una ribbon de color debajo del header (visible en TODA vista, siempre en pantalla al hacer scroll porque el header es sticky) y un wash + acento superior en TODAS las `.card`. La UI funcional (accent rojo, estados, links) conserva su semántica. Activación: [data-mode=""] en . Persistido en localStorage('m26-mode'). Prepaint en evita FOUC. Compone con dark Y light, y es ortogonal a [data-pride] (legacy). Cada modo define dos contratos: --mode-soft : gradiente suave (logo, holo, campeón, nav, lb-fill) --mode-hard : gradiente segmentado duro (stripe del opener) y opcionalmente: --mode-champ : override del campeón (split diagonal para cruces) --mode-dot : color de la señal viva (status/chip dot) ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ PALETAS POR MODO ════════════════════════════════════════════════════════════════════ */ /* ── 🏳️‍🌈 ORGULLO — espectro de 6 franjas ──────────────────────── */ [data-mode="pride"] { --p1:#E40303; --p2:#FF8C00; --p3:#FFD400; --p4:#1FA02C; --p5:#1E63E9; --p6:#8A2BE2; --mode-soft: linear-gradient(90deg, var(--p1),var(--p2),var(--p3),var(--p4),var(--p5),var(--p6)); --mode-hard: linear-gradient(90deg, var(--p1) 0 16.66%, var(--p2) 16.66% 33.33%, var(--p3) 33.33% 50%, var(--p4) 50% 66.66%, var(--p5) 66.66% 83.33%, var(--p6) 83.33% 100%); --mode-dot: var(--p4); --mode-cycle: 1; /* habilita el ciclo de matiz en los dots */ } [data-theme="dark"][data-mode="pride"] { --p1:#FF3B3B; --p3:#FFE14D; --p4:#35C04A; --p5:#4D85FF; --p6:#A65CFF; } /* ── 🎆 4 DE JULIO — barras y estrellas ───────────────────────── */ [data-mode="usa"] { --mode-soft: linear-gradient(90deg, #B22234 0%, #D34B5A 30%, #F4F1E8 50%, #4A6AB8 70%, #3C3B6E 100%); --mode-hard: linear-gradient(90deg, #B22234 0 16.66%, #F4F1E8 16.66% 33.33%, #B22234 33.33% 50%, #F4F1E8 50% 66.66%, #3C3B6E 66.66% 83.33%, #F4F1E8 83.33% 100%); --mode-dot: #4A6AB8; } /* ── ⚔️ CRUCE · BRASIL × NORUEGA — verde/oro vs rojo/azul marino ── */ [data-mode="cruce-bra-nor"] { --mode-soft: linear-gradient(90deg, #009C3B 0%, #FFDF00 32%, #FFFFFF 50%, #EF2B2D 68%, #002868 100%); --mode-hard: linear-gradient(90deg, #009C3B 0 25%, #FFDF00 25% 50%, #FFFFFF 50% 75%, #002868 75% 100%); --mode-champ: linear-gradient(115deg, #009C3B 0%, #FFDF00 49%, #EF2B2D 51%, #002868 100%); --mode-dot: #EF2B2D; } /* ── ⚔️ CRUCE · MÉXICO × INGLATERRA — verde/rojo vs cruz de San Jorge ── */ [data-mode="cruce-mex-ing"] { --mode-soft: linear-gradient(90deg, #006847 0%, #0E8A5F 28%, #F6F3E7 50%, #E23148 75%, #C8102E 100%); --mode-hard: linear-gradient(90deg, #006847 0 33.33%, #F6F3E7 33.33% 66.66%, #C8102E 66.66% 100%); --mode-champ: linear-gradient(115deg, #006847 0%, #CE1126 49%, #FFFFFF 51%, #C8102E 100%); --mode-dot: #C8102E; } /* ── ⚔️ CRUCE · PORTUGAL × ESPAÑA — verde/rojo vs rojo/amarillo ─── */ [data-mode="cruce-por-esp"] { --mode-soft: linear-gradient(90deg, #046A38 0%, #DA020E 30%, #FFFFFF 50%, #F1BF00 70%, #AA151B 100%); --mode-hard: linear-gradient(90deg, #046A38 0 25%, #DA020E 25% 50%, #F1BF00 50% 75%, #AA151B 75% 100%); --mode-champ: linear-gradient(115deg, #046A38 0%, #DA020E 49%, #F1BF00 51%, #AA151B 100%); --mode-dot: #F1BF00; } /* ── ⚔️ CRUCE · ESTADOS UNIDOS × BÉLGICA — barras y estrellas vs tricolor ── */ [data-mode="cruce-usa-bel"] { --mode-soft: linear-gradient(90deg, #B22234 0%, #3C3B6E 30%, #FFFFFF 50%, #FDDA24 70%, #000000 100%); --mode-hard: linear-gradient(90deg, #B22234 0 25%, #3C3B6E 25% 50%, #FDDA24 50% 75%, #000000 75% 100%); --mode-champ: linear-gradient(115deg, #B22234 0%, #3C3B6E 49%, #FDDA24 51%, #000000 100%); --mode-dot: #FDDA24; } /* ════════════════════════════════════════════════════════════════════ APLICACIÓN A SUPERFICIES DE MARCA — vale para CUALQUIER data-mode ════════════════════════════════════════════════════════════════════ */ /* El holo del sistema (prog-fill, foil del modal) toma la paleta del modo */ [data-mode] { --bb-holo: var(--mode-soft); } /* El "26" del logo + el año del wordmark → gradiente del modo */ [data-mode] .logo-mark-num, [data-mode] .brand-year { background: var(--mode-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Stripe superior del opener → gradiente segmentado del modo */ [data-mode] .opener::before { background: var(--mode-hard); height: 4px; } /* ── Ribbon grande bajo el header (m29o) ────────────────────────── El header (.nav) es sticky, así que esta franja queda pegada arriba de la pantalla en TODA vista, todo el tiempo — el "color grande" que pedía el owner, más visible que el resto de los toques (que viven en detalles chicos: underline, dot, stripe de 4px). */ [data-mode] .nav { position: sticky; } /* contexto de posición para el ::after (ya sticky, explícito por claridad) */ [data-mode] .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--mode-hard); } /* ── Acento + wash en TODAS las cards (m29o) ────────────────────── Antes el modo solo tocaba detalles chicos dentro de la card (fills, dots). Ahora cada card recibe una franja de color arriba (misma idea que el stripe del opener, pero en TODAS las cards del bento, no solo en la de arriba) + un wash muy sutil de fondo para que el color "tiña" la superficie sin romper el contraste del texto. */ [data-mode] .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mode-hard); } [data-mode] .card { background-image: linear-gradient(160deg, color-mix(in srgb, var(--mode-dot, var(--red)) 7%, transparent) 0%, transparent 55%); } /* Campeón del bracket → soft (o split diagonal si el modo lo define) */ [data-mode] .br-slot.champion { background: var(--mode-champ, var(--mode-soft)); } [data-mode] .br-slot.champion .champ-arg { text-shadow: 0 1px 4px rgba(0,0,0,0.5); } [data-mode] .br-slot.champion .champ-tag { background: rgba(0,0,0,0.34); } [data-mode] .br-slot.champion .accent { text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* Underline del nav activo → gradiente del modo */ [data-mode] .nav-link.is-active::after { background: var(--mode-soft); width: 22px; } /* Self-row del leaderboard: el tinte ámbar de "tú" toma el modo */ [data-mode] .lb-row.lb-self { background: linear-gradient(to right, color-mix(in srgb, var(--mode-dot, var(--amber)) 18%, transparent), transparent 62%); } [data-mode] .lb-row.lb-self .lb-fill { background: var(--mode-soft); } /* Consenso del opener: la barra principal toma el tinte del modo */ [data-mode] .cons-bar .cons-fill:first-child { background: var(--mode-dot, var(--red)); } /* ── Señal viva: el status dot late en el color del modo ───────── */ [data-mode] .status-dot { background: var(--mode-dot, var(--green)); } /* Pride conserva su ciclo de matiz característico */ [data-mode="pride"] .status-dot { animation: mode-hue 5s linear infinite, ping 2.4s ease-out infinite; } [data-mode="pride"] .chip-dot { animation: mode-hue 5s linear infinite, pulse var(--bb-pulse) ease-in-out infinite; } @keyframes mode-hue { 0%{background:var(--p1)} 17%{background:var(--p2)} 34%{background:var(--p3)} 50%{background:var(--p4)} 67%{background:var(--p5)} 84%{background:var(--p6)} 100%{background:var(--p1)} } @media (prefers-reduced-motion: reduce) { [data-mode="pride"] .status-dot, [data-mode="pride"] .chip-dot { animation: none; background: var(--p4); } } /* Selección de texto teñida */ [data-mode] ::selection { background: var(--mode-dot, var(--green)); color: #fff; } /* CTA primario: aura del modo al hover (sin cambiar el ink-bg) */ [data-mode] .btn-primary:hover { box-shadow: 0 6px 22px -10px var(--mode-dot, var(--red)); }