/* * ╔══════════════════════════════════════════════════════════════╗ * ║ HOCKEYAPP — Design System · estilos-hk.css ║ * ║ Fuente: Barlow Condensed (display) + Barlow (body) ║ * ║ Requiere en : ║ * ║ fonts.googleapis.com/css2?family=Barlow+Condensed: ║ * ║ ital,wght@0,400;0,700;1,800;1,900& ║ * ║ family=Barlow:wght@400;500;600;700 ║ * ╚══════════════════════════════════════════════════════════════╝ * * ÍNDICE * ───────────────────────────────────────────────────────────── * 1. Variables & reset * 2. Tipografía utilitaria * 3. Sticky header / league bar * 4. Nav tabs (.liga-nav, .equipo-nav) * 5. Breadcrumb * 6. Bloque intro / texto SEO * 7. Stat cards * 8. Section card * 9. Partido card * 10. Jornada separador * 11. Tabla clasificación * 12. Ficha técnica (sidebar oscuro) * 13. Team hero (equipo) * 14. Plantilla / jugadores * 15. Campeón banner * 16. Equipos grid * 17. Goleadores * 18. Fases * 19. Otras ligas * 20. Liga switch pills * 21. Video card * 22. Day slider (videos.php) * 23. Sport card (sports.php) * 24. Seguir / modal * 25. Utilidades menores * 26. Responsive * ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════ 1. VARIABLES & RESET ═══════════════════════════════════════════════════════ */ :root { /* colores */ --clr-accent: #e8b004; /* dorado principal */ --clr-dark: #0d0f14; /* fondo oscuro cards */ --clr-mid: #1c2030; /* oscuro medio */ --clr-surface: #f4f7fb; /* fondo claro alterno */ --clr-border: #e4e8f0; /* borde claro */ --clr-text: #1a1d27; /* texto principal */ --clr-muted: #6b7280; /* texto secundario */ --clr-success: #16a34a; /* verde pista/éxito */ /* colores semánticos stats */ --clr-win: #16a34a; --clr-draw: #ca8a04; --clr-loss: #dc2626; --clr-gf: #2563eb; --clr-gc: #9333ea; /* espaciado & forma */ --radius: 12px; --radius-sm: 8px; /* sombras */ --shadow: 0 2px 16px rgba(0,0,0,.08); --shadow-lg: 0 6px 32px rgba(0,0,0,.14); /* tipografía */ --font-display: "Barlow Condensed", sans-serif; --font-body: "Barlow", sans-serif; /* transición global */ --t: .2s ease; } /* ═══════════════════════════════════════════════════════ 2. TIPOGRAFÍA UTILITARIA ═══════════════════════════════════════════════════════ */ /* Clase helper para titulares display */ .hk-display { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; } /* Muted label estilo label de ficha */ .hk-label { font-family: var(--font-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted); } /* ═══════════════════════════════════════════════════════ 3. STICKY HEADER / LEAGUE BAR ═══════════════════════════════════════════════════════ */ .titulo-sticky { border-bottom: 3px solid var(--clr-accent); } .title-sticky { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; margin: 0; color: var(--clr-text); } /* ── variante liga (logo + nombre) ── */ .titulo-sticky .league-bar { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; } .titulo-sticky .league-bar img { height: 48px; width: auto; object-fit: contain; } .league-bar__title, .titulo-sticky h1 { font-family: var(--font-display); font-size: clamp(1rem, 3vw, 1.5rem); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; margin: 0; color: var(--clr-text); } /* ── variante equipo (logo + nombre + sub) ── */ .sticky-inner { display: flex; align-items: center; gap: .75rem; padding: .4rem 0 0; } .sticky-inner .team-logo { height: 52px; width: auto; object-fit: contain; flex-shrink: 0; } .sticky-inner .team-name { font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .01em; color: var(--clr-text); margin: 0; line-height: 1; } .sticky-inner .team-sub { font-family: var(--font-body); font-size: .75rem; color: var(--clr-muted); font-weight: 400; } .follow-area { margin-left: auto; padding-bottom: .4rem; } /* ── variante simple (sólo texto) ── */ .titulo-sticky .page-title { font-family: var(--font-display); font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .02em; margin: 0; padding: .5rem 0; color: var(--clr-text); } /* ═══════════════════════════════════════════════════════ 4. NAV TABS ═══════════════════════════════════════════════════════ */ /* shared base */ .liga-nav, .equipo-nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.2rem; } .liga-nav::-webkit-scrollbar, .equipo-nav::-webkit-scrollbar { display: none; } .liga-nav { border-bottom: 2px solid var(--clr-border); } .equipo-nav { border-top: 1px solid var(--clr-border); margin-top: .3rem; margin-bottom: 0; } .liga-nav__item, .equipo-nav__item { font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--clr-muted); text-decoration: none; padding: .5rem .85rem; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color var(--t), border-color var(--t); } .liga-nav__item:hover, .equipo-nav__item:hover { color: var(--clr-text); border-color: var(--clr-accent); } .liga-nav__badge { display: inline-block; background: var(--clr-surface); color: var(--clr-muted); font-size: .65rem; font-weight: 600; padding: .05rem .35rem; border-radius: 10px; margin-left: .3rem; } /* ═══════════════════════════════════════════════════════ 5. BREADCRUMB ═══════════════════════════════════════════════════════ */ .breadcrumb { font-family: var(--font-body); font-size: .8rem; } /* ═══════════════════════════════════════════════════════ 6. BLOQUE INTRO / TEXTO SEO ═══════════════════════════════════════════════════════ */ .bloque-intro { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; margin-bottom: 1rem; } .bloque-intro h1, .bloque-intro h2, .bloque-intro h3 { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--clr-text); margin-bottom: .5rem; line-height: 1.2; } .bloque-intro h1 { font-size: 1.2rem; } .bloque-intro h2 { font-size: 1.05rem; } .bloque-intro h3 { font-size: .95rem; color: var(--clr-muted); margin-top: .8rem; padding-bottom: .3rem; border-bottom: 2px solid var(--clr-accent); display: inline-block; } .bloque-intro p { font-family: var(--font-body); font-size: .9rem; color: #444; line-height: 1.65; margin-bottom: .5rem; } /* ═══════════════════════════════════════════════════════ 7. STAT CARDS ═══════════════════════════════════════════════════════ */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1.2rem; } @media (min-width: 576px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } /* override para 6 columnas (equipo.php) */ .stats-grid--6 { grid-template-columns: repeat(3, 1fr); } @media (min-width: 768px) { .stats-grid--6 { grid-template-columns: repeat(6, 1fr); } } .stat-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1rem; border-top: 4px solid var(--clr-accent); display: flex; flex-direction: column; gap: .2rem; text-align: center; } /* modificadores semánticos */ .stat-card--win { border-top-color: var(--clr-win); } .stat-card--draw { border-top-color: var(--clr-draw); } .stat-card--loss { border-top-color: var(--clr-loss); } .stat-card--gf { border-top-color: var(--clr-gf); } .stat-card--gc { border-top-color: var(--clr-gc); } .stat-card__label { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--clr-muted); } .stat-card__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; font-style: italic; color: var(--clr-dark); line-height: 1; } .stat-card__value--sm { font-size: 1.1rem; } /* para nombres largos */ /* ═══════════════════════════════════════════════════════ 8. SECTION CARD ═══════════════════════════════════════════════════════ */ .section-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1rem; } .section-card__header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; background: var(--clr-dark); } .section-card__title { font-family: var(--font-display); font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-accent); margin: 0; } .section-card__subtitle { font-family: var(--font-body); font-size: .78rem; color: rgba(255,255,255,.4); margin: 0 0 0 auto; } .section-card__body { padding: .2rem .2rem; } .section-card__body--flush { padding: 0; } /* ═══════════════════════════════════════════════════════ 9. PARTIDO CARD ═══════════════════════════════════════════════════════ */ .partido-link { text-decoration: none; display: block; margin-bottom: .4rem; } .partido-card { display: flex; align-items: center; gap: .6rem; border-radius: var(--radius-sm); padding: .5rem .7rem; border-left: 3px solid transparent; transition: background var(--t), box-shadow var(--t); } .partido-link:hover .partido-card { background: #edf0f7; box-shadow: 0 2px 10px rgba(0,0,0,.08); } /* variantes local/visitante (equipo.php) */ .partido-card--home { border-left-color: #1a4a8a; } .partido-card--away { border-left-color: #8a1a1a; } .partido-card__thumb { width: 42px; height: 28px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .partido-card__teams { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .partido-card__team { display: flex; align-items: center; gap: .35rem; } /* equipo activo resaltado (equipo.php) */ .partido-card__team--active .partido-card__name { font-weight: 700; color: var(--clr-dark); } .partido-card__name { font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .partido-card__score { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; flex-shrink: 0; } .partido-card__goal { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--clr-text); line-height: 1.15; } .partido-card__date { font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--clr-text); } .partido-card__time { font-family: var(--font-body); font-size: .75rem; color: var(--clr-muted); } .partido-card__pista { font-size: .68rem; color: var(--clr-success); text-align: right; padding: 0 .7rem .2rem; margin-top: -.2rem; } /* ═══════════════════════════════════════════════════════ 10. JORNADA SEPARADOR ═══════════════════════════════════════════════════════ */ .jornada-sep { font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-accent); padding: .45rem 0 .2rem; border-bottom: 1px solid var(--clr-border); margin: .7rem 0 .35rem; } /* ═══════════════════════════════════════════════════════ 11. TABLA CLASIFICACIÓN ═══════════════════════════════════════════════════════ */ .tabla-clas { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: .83rem; } .tabla-clas thead tr { background: var(--clr-surface); } .tabla-clas th { font-family: var(--font-display); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted); padding: .55rem .8rem; border-bottom: 2px solid var(--clr-border); white-space: nowrap; } .tabla-clas td { padding: .5rem .8rem; border-bottom: 1px solid var(--clr-border); color: var(--clr-text); vertical-align: middle; } .tabla-clas tbody tr:last-child td { border-bottom: none; } .tabla-clas tbody tr:hover td { background: var(--clr-surface); } /* posiciones */ .tabla-clas tr.pos-1 td:first-child { border-left: 3px solid var(--clr-accent); } .tabla-clas tr.pos-top td:first-child { border-left: 3px solid #4ade80; } /* equipo activo (equipo.php) */ .tabla-clas tr.fila-actual td { background: rgba(232,176,4,.08); } .tabla-clas tr.fila-actual td:first-child { border-left: 3px solid var(--clr-accent); } .th-pos { width: 36px; text-align: center; } .th-num { width: 52px; text-align: center; } /* botón de puntos con popover */ .pts-btn { background: var(--clr-dark); color: #fff; border: none; border-radius: 20px; font-family: var(--font-display); font-size: .85rem; font-weight: 800; padding: .18rem .65rem; cursor: pointer; transition: background var(--t); } .pts-btn:hover { background: var(--clr-accent); color: var(--clr-dark); } /* contenido del popover */ .pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; font-size: .78rem; } .pop-stats span { font-weight: 700; color: var(--clr-muted); margin-right: .3rem; } /* ═══════════════════════════════════════════════════════ 12. FICHA TÉCNICA (sidebar oscuro) ═══════════════════════════════════════════════════════ */ .ficha { background: var(--clr-dark); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; } .ficha__header { background: var(--clr-accent); font-family: var(--font-display); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-dark); padding: .55rem 1.1rem; } .ficha__list { list-style: none; padding: .3rem 0; margin: 0; } .ficha__item { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); transition: background var(--t); } .ficha__item:last-child { border-bottom: none; } .ficha__item:hover { background: rgba(255,255,255,.04); } .ficha__label { font-family: var(--font-display); font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-accent); min-width: 78px; flex-shrink: 0; } .ficha__value { font-family: var(--font-body); font-size: .84rem; color: rgba(255,255,255,.82); font-weight: 500; } /* ═══════════════════════════════════════════════════════ 13. TEAM HERO (equipo.php) ═══════════════════════════════════════════════════════ */ .team-hero { background: var(--clr-dark); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; margin-bottom: 1rem; display: flex; align-items: stretch; } .team-hero__shield { background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; padding: 1.5rem; min-width: 130px; } .team-hero__shield img { max-height: 90px; max-width: 90px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); } .team-hero__info { flex: 1; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; gap: .4rem; } .team-hero__name { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; line-height: 1; margin: 0; } .team-hero__meta { display: flex; flex-wrap: wrap; gap: .4rem; } .team-hero__tag { font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.09); color: rgba(255,255,255,.7); padding: .2rem .6rem; border-radius: 4px; } .team-hero__tag--accent { background: rgba(232,176,4,.2); color: var(--clr-accent); } /* ═══════════════════════════════════════════════════════ 14. PLANTILLA / JUGADORES ═══════════════════════════════════════════════════════ */ .jugador-row { display: flex; align-items: center; gap: .5rem; padding: .38rem .5rem; border-radius: 6px; transition: background var(--t); } .jugador-row:hover { background: var(--clr-surface); } .jugador-pos { font-family: var(--font-display); font-size: .65rem; font-weight: 700; color: var(--clr-accent); min-width: 18px; text-align: right; } .jugador-nombre { font-family: var(--font-body); font-size: .83rem; font-weight: 500; color: var(--clr-text); flex: 1; } .jugador-goles { font-family: var(--font-display); font-size: .85rem; font-weight: 800; color: var(--clr-muted); } .jugador-pj { font-family: var(--font-body); font-size: .72rem; color: var(--clr-muted); } /* ═══════════════════════════════════════════════════════ 15. CAMPEÓN BANNER ═══════════════════════════════════════════════════════ */ .campeon-banner { display: flex; align-items: center; gap: .8rem; background: linear-gradient(135deg, var(--clr-dark) 0%, #1f2740 100%); border-radius: 10px; padding: .9rem 1.2rem; margin-bottom: 1rem; border-left: 4px solid var(--clr-accent); } .campeon-banner__trophy { font-size: 1.9rem; flex-shrink: 0; } .campeon-banner__text { font-family: var(--font-display); } .campeon-banner__label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-accent); } .campeon-banner__name { font-size: 1.1rem; font-weight: 800; font-style: italic; text-transform: uppercase; color: #fff; } .campeon-banner img { height: 36px; object-fit: contain; } /* ═══════════════════════════════════════════════════════ 16. EQUIPOS GRID ═══════════════════════════════════════════════════════ */ .equipos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } @media (min-width: 576px) { .equipos-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .equipos-grid { grid-template-columns: repeat(5, 1fr); } } .equipo-card { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .5rem; background: var(--clr-surface); border-radius: 10px; transition: background var(--t), transform var(--t), box-shadow var(--t); } .equipo-card:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); } .equipo-card img { max-height: 52px; width: auto; object-fit: contain; } .equipo-card__name { font-family: var(--font-display); font-size: .72rem; font-weight: 700; text-align: center; color: var(--clr-text); text-transform: uppercase; line-height: 1.2; } /* ═══════════════════════════════════════════════════════ 17. GOLEADORES ═══════════════════════════════════════════════════════ */ .goleador-row { display: flex; align-items: center; padding: .45rem .8rem; border-bottom: 1px solid var(--clr-border); transition: background var(--t); } .goleador-row:last-child { border-bottom: none; } .goleador-row:hover { background: var(--clr-surface); } .goleador-pos { font-family: var(--font-display); font-size: .85rem; font-weight: 800; font-style: italic; color: var(--clr-accent); min-width: 24px; } .goleador-name { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--clr-text); flex: 1; padding: 0 .5rem; } .goleador-goles { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--clr-dark); } /* ═══════════════════════════════════════════════════════ 18. FASES ═══════════════════════════════════════════════════════ */ .fase-wrap { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .8rem; } .fase-title { font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--clr-surface); color: var(--clr-text); padding: .45rem .8rem; border-bottom: 1px solid var(--clr-border); margin: 0; } /* ═══════════════════════════════════════════════════════ 19. OTRAS LIGAS ═══════════════════════════════════════════════════════ */ .otras-ligas { list-style: none; padding: 0; margin: 0; } .otras-ligas li { padding: .5rem .8rem; border-bottom: 1px solid var(--clr-border); font-family: var(--font-body); font-size: .85rem; color: var(--clr-text); } .otras-ligas li:last-child { border-bottom: none; } /* mensaje vacío genérico */ .no-data { font-family: var(--font-body); font-size: .85rem; color: var(--clr-muted); padding: .8rem; text-align: center; } /* ═══════════════════════════════════════════════════════ 20. LIGA SWITCH PILLS ═══════════════════════════════════════════════════════ */ .liga-switch { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-family: var(--font-body); margin-bottom: .75rem; } .liga-switch__label { font-size: .72rem; font-weight: 600; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .05em; } .liga-switch__pill { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--clr-border); background: #fff; color: var(--clr-muted); text-decoration: none; transition: all var(--t); } .liga-switch__pill:hover { border-color: var(--clr-accent); color: var(--clr-accent); } .liga-switch__pill--active { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-dark); font-weight: 800; } /* ═══════════════════════════════════════════════════════ 21. VIDEO CARD (videos.php) ═══════════════════════════════════════════════════════ */ .video-card { display: block; text-decoration: none; background: var(--clr-dark); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t); height: 100%; } .video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .video-card__thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #111; } .video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, opacity .35s ease; opacity: .85; } .video-card:hover .video-card__thumb img { transform: scale(1.06); opacity: 1; } .video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .video-card__play-btn { width: 48px; height: 48px; background: rgba(232,176,4,.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: transform var(--t), background var(--t); } .video-card:hover .video-card__play-btn { transform: scale(1.15); background: var(--clr-accent); } .video-card__play-btn svg { width: 20px; height: 20px; fill: var(--clr-dark); margin-left: 3px; } .video-card__liga { position: absolute; bottom: 0; left: 0; right: 0; padding: .5rem .65rem .4rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-family: var(--font-display); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-card__body { padding: .75rem .85rem .8rem; } .video-card__teams { font-family: var(--font-display); font-size: .95rem; font-weight: 800; font-style: italic; text-transform: uppercase; color: #fff; line-height: 1.2; margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-card__meta { display: flex; justify-content: space-between; align-items: center; } .video-card__time { font-family: var(--font-body); font-size: .75rem; color: rgba(255,255,255,.4); } .video-card__score { font-family: var(--font-display); font-size: 1rem; font-weight: 900; color: var(--clr-accent); } /* ═══════════════════════════════════════════════════════ 22. DAY SLIDER (videos.php) ═══════════════════════════════════════════════════════ */ .slider-wrap { background: var(--clr-dark); border-bottom: 1px solid rgba(255,255,255,.08); } .day-slider { display: flex; gap: .45rem; overflow-x: auto; padding: .75rem 1rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .day-slider::-webkit-scrollbar { display: none; } .day-card { position: relative; min-width: 52px; height: 70px; background: rgba(255,255,255,.07); border: 1px solid transparent; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; flex-shrink: 0; transition: background var(--t), border-color var(--t), transform var(--t); } .day-card:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); } .day-card.today { border-color: var(--clr-accent); } .day-card.active { background: var(--clr-accent); border-color: var(--clr-accent); transform: scale(1.06); } .day-card.active .day-name, .day-card.active .day-num, .day-card.active .day-month { color: var(--clr-dark) !important; } .day-name { font-family: var(--font-display); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); } .day-num { font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; color: #fff; line-height: 1; } .day-month { font-family: var(--font-display); font-size: .55rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.4); } .day-dot { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--clr-accent); } .day-card.active .day-dot { background: var(--clr-dark); } /* ═══════════════════════════════════════════════════════ 23. SPORT CARD (sports.php) ═══════════════════════════════════════════════════════ */ .sport-card { background: var(--clr-dark); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); } .sport-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.2); } .sport-card__header { padding: 1.8rem 1.4rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; background: linear-gradient(160deg, #161b28 0%, var(--clr-dark) 100%); border-bottom: 3px solid var(--clr-accent); } .sport-card__icon { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); transition: transform var(--t); } .sport-card:hover .sport-card__icon { transform: scale(1.08); } .sport-card__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; text-align: center; margin: 0; } .sport-card__body { padding: 1rem 1.2rem; flex: 1; } .sport-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; } .sport-card__stat { text-align: center; background: rgba(255,255,255,.05); border-radius: 8px; padding: .55rem .4rem; } .sport-card__stat-value { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; font-style: italic; color: var(--clr-accent); line-height: 1; display: block; } .sport-card__stat-label { font-family: var(--font-body); font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; margin-top: .15rem; } .sport-card__footer { padding: .8rem 1.2rem; background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.07); } .sport-card__btn { display: block; width: 100%; text-align: center; font-family: var(--font-display); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-accent); text-decoration: none; padding: .5rem; border: 1.5px solid rgba(232,176,4,.3); border-radius: 8px; transition: background var(--t), border-color var(--t); } .sport-card__btn:hover { background: rgba(232,176,4,.12); border-color: var(--clr-accent); color: var(--clr-accent); } /* tabla comparativa modalidades */ .tabla-modalidades { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: .83rem; table-layout: fixed; overflow-wrap: break-word; } .tabla-modalidades thead tr { background: var(--clr-dark); } .tabla-modalidades thead th { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-accent); padding: .65rem .8rem; border-bottom: 2px solid var(--clr-border); white-space: nowrap; } .tabla-modalidades thead th:first-child { color: rgba(255,255,255,.5); } .tabla-modalidades tbody tr:nth-child(even) { background: var(--clr-surface); } .tabla-modalidades tbody tr:hover { background: #edf0f7; } .tabla-modalidades td { padding: .6rem .8rem; border-bottom: 1px solid var(--clr-border); color: var(--clr-text); vertical-align: top; } .tabla-modalidades td:first-child { font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--clr-muted); } .tabla-modalidades tbody tr:last-child td { border-bottom: none; } /* ligas seguidas pill list */ .liga-seguida-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid var(--clr-border); transition: background var(--t); } .liga-seguida-item:last-child { border-bottom: none; } .liga-seguida-item:hover { background: var(--clr-surface); } .liga-seguida-item img { height: 28px; width: auto; object-fit: contain; flex-shrink: 0; } .liga-seguida-item a { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--clr-text); text-decoration: none; } .liga-seguida-item a:hover { color: var(--clr-accent); } /* ═══════════════════════════════════════════════════════ 24. SEGUIR / MODAL ═══════════════════════════════════════════════════════ */ .modal-content { border-radius: var(--radius); overflow: hidden; } .modal-seguir__body { padding: 1.5rem; text-align: center; } .modal-seguir__body p { font-family: var(--font-body); font-size: .9rem; color: var(--clr-muted); } /* ═══════════════════════════════════════════════════════ 25. UTILIDADES MENORES ═══════════════════════════════════════════════════════ */ /* fecha heading (videos.php) */ .fecha-heading { font-family: var(--font-display); font-size: 1rem; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--clr-text); letter-spacing: .04em; padding-bottom: .3rem; border-bottom: 2px solid var(--clr-accent); display: inline-block; margin-bottom: 1rem; } .fecha-heading span { font-weight: 400; font-style: normal; font-size: .75rem; color: var(--clr-muted); margin-left: .5rem; letter-spacing: 0; } /* filter bar (videos.php) */ .filter-bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 0; flex-wrap: wrap; } .filter-btn { font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 20px; border: 1.5px solid rgba(0,0,0,.15); background: #fff; color: var(--clr-muted); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); } .filter-btn:hover { border-color: var(--clr-accent); color: var(--clr-text); transform: translateY(-1px); } .filter-btn.active { background: var(--clr-dark); color: var(--clr-accent); border-color: var(--clr-dark); } .filter-count { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); color: inherit; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 .3rem; margin-left: .3rem; } .filter-btn.active .filter-count { background: rgba(232,176,4,.2); } /* empty state genérico */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--clr-muted); } .empty-state__icon { font-size: 3rem; display: block; margin-bottom: .75rem; opacity: .4; } .empty-state__text { font-family: var(--font-display); font-size: 1rem; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .06em; } /* animación fadeUp (videos.php) */ .video-item { animation: fadeUp .28s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .video-item.hidden { display: none !important; } .colab-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 600px) { .colab-grid { grid-template-columns: repeat(3, 1fr); } } .colab-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.1rem 1.1rem; border-top: 4px solid var(--clr-accent); display: flex; flex-direction: column; gap: .5rem; transition: transform var(--t), box-shadow var(--t); } .colab-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .colab-card--dark { background: var(--clr-dark); border-top-color: var(--clr-accent); } .colab-card--dark .colab-card__title { color: #fff; } .colab-card--dark .colab-card__desc { color: rgba(255,255,255,.5); } .colab-card__icon { font-size: 1.75rem; line-height: 1; } .colab-card__title { font-family: var(--font-display); font-size: .95rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-dark); margin: 0; } .colab-card__desc { font-family: var(--font-body); font-size: .82rem; color: var(--clr-muted); line-height: 1.55; margin: 0; flex: 1; } .colab-card__btn { display: inline-block; font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--clr-accent); color: var(--clr-dark); border-radius: 6px; padding: .38rem .9rem; text-decoration: none; align-self: flex-start; margin-top: .25rem; transition: background var(--t), transform var(--t); } .colab-card__btn:hover { background: #d4a004; transform: translateY(-1px); } .colab-card__cta { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-accent); margin-top: .25rem; } /* ═══════════════════════════════════════════════════════ 26. RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 576px) { .team-hero { flex-direction: column; } .team-hero__shield { min-width: unset; padding: 1rem; } .stats-grid--6 { grid-template-columns: repeat(3, 1fr); } .filter-bar .stats-bar { display: none; } }