/* Team detail page — team-specific pieces only. The sticky + compact behaviour lives in the shared `components/entity-sticky.css` (wrapper geometry) and `components/entity-hero.css` (nav, follow pill, compact title). This file keeps the team logo / title / subtitle / coach badge rendering, plus the tabs wrapper that sits inside the entity sticky. Token mapping (v1 → v2): --bg-primary → --color-bg --bg-card → --color-surface --text-primary → --color-text --text-muted → --color-text-muted --text-secondary → --color-text-secondary --border-color → --color-border --accent-primary → --color-accent --font-title → Oswald, sans-serif The `--team-color-1 / --team-color-2 / --team-glow` variables are injected inline on `body.team-page` by `pages/team.html.twig` from the builder output. The entity-sticky gradient picks them up via custom property inheritance — fallbacks use the Feeberse accent green so teams without extracted colors still look on-brand. */ @layer pages { /* ---------- Hero content (shared entity primitives) ---------- These rules style the stock logo / title / subtitle / country block that every entity detail page (team / league / player) reuses. Page- specific additions live below under the `.team-page` scope. Glow reads the page-level `--team-color-*` tokens, which each entity page sets on its `` from the extracted palette. */ .entity-hero-expanded__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px 24px; } .entity-logo-wrapper { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .entity-logo-wrapper .entity-logo { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px var(--team-glow, rgb(0 255 135 / 15%))); } /* Emoji-based logo (Mundial / torneos sin escudo Sportmonks). El icono ocupa el mismo box 80×80 que el `` para que la animación sticky-hero compact no salte cuando se intercambia. */ .entity-logo-wrapper .entity-logo--emoji { font-size: 56px; line-height: 1; object-fit: unset; filter: drop-shadow(0 2px 8px rgb(0 0 0 / 20%)); } .team-logo-placeholder { width: 80px; height: 80px; border-radius: 16px; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-family: Oswald, sans-serif; font-size: 24px; font-weight: 700; color: var(--color-text-muted); } .entity-title { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; color: var(--color-text); text-align: center; margin: 0; } .entity-subtitle { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-text-muted); } .entity-country { display: flex; align-items: center; gap: 4px; } .country-flag-small { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; } /* Emoji variant para competiciones internacionales: caja del mismo ancho que la flag-img para mantener la línea sin saltos. */ .country-flag-small--emoji { width: auto; height: auto; font-size: 14px; line-height: 1; border-radius: 0; } .team-league-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 999px; background: rgb(255 255 255 / 5%); color: var(--color-text-muted); text-decoration: none; font-size: 13px; line-height: 1; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .team-league-chip:hover, .team-league-chip:focus-visible { background: rgb(255 255 255 / 10%); color: var(--color-text); outline: none; } .team-league-chip:active { transform: scale(0.97); } .team-league-chip__logo { width: 16px; height: 16px; object-fit: contain; border-radius: 50%; flex-shrink: 0; } .team-league-chip__name { font-weight: 500; } .team-league-chip__badge { width: 10px; height: 10px; margin-left: 2px; color: var(--color-text-muted); opacity: 0.7; transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .team-league-chip:hover .team-league-chip__badge, .team-league-chip:focus-visible .team-league-chip__badge { color: var(--accent-primary); opacity: 1; transform: translateX(1px); } .team-league-chip--static { cursor: default; } .team-coach-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 12px 6px 6px; background: rgb(255 255 255 / 6%); border-radius: 999px; text-align: left; } .team-coach-badge__photo-wrap { position: relative; flex-shrink: 0; width: 32px; height: 32px; } .coach-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: rgb(255 255 255 / 6%); } .coach-flag { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 10px; border-radius: 2px; border: 1.5px solid var(--color-bg); object-fit: cover; } .team-coach-badge__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-start; text-align: left; } .coach-name { color: var(--color-text); font-size: 13px; font-weight: 600; line-height: 1.15; text-align: left; } .coach-meta { font-size: 10px; color: rgb(255 255 255 / 70%); font-variant-numeric: tabular-nums; text-align: left; } /* ---------- Tabs wrapper ---------- Lives inside `.entity-sticky` as a sibling of `.entity-hero-expanded`. Stays visible in every state — the compact bar is just nav + tabs. Shared across entity detail pages (team / league / player). Right-edge gradient fade — visual affordance that the nav is scrollable horizontally. Without it, the last tabs (e.g. Palmarés on mobile 390px player detail) sit off-screen with no hint. The fade sits above the tabs (`z-index: 1`) but accepts no pointer events so taps still hit the underlying tab text. */ .entity-tabs-wrapper { position: relative; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .entity-tabs-wrapper::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 28px; background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%); pointer-events: none; z-index: 1; } .entity-tabs { display: flex; overflow-x: auto; scrollbar-width: none; /* Right padding bumped so the last tab clears the wrapper's gradient fade and the active underline still reads when the nav doesn't overflow. */ padding: 0 32px 0 8px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .entity-tabs::-webkit-scrollbar { display: none; } .entity-tab { flex-shrink: 0; padding: 12px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--color-text-muted); font-family: var(--font-title); font-size: 13px; font-weight: var(--weight-semibold); text-transform: uppercase; cursor: pointer; white-space: nowrap; text-decoration: none; transition: color 0.2s, border-color 0.2s; } .entity-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .entity-tab.active, .entity-tab--active { color: var(--color-accent); border-bottom-color: var(--color-accent); } .entity-tab:hover:not(.active, .entity-tab--active) { color: var(--color-text-secondary); } /* min-height guarantees `max_scroll_compact > expandAt` even when the tab's own content is short. Without this, short tabs (e.g. Mejor XI on narrow / tall viewports like iPhone 14 Pro Max) produce a document where the compact state's max scroll falls below the expand threshold — scrolling down to trigger compact clamps scrollY into the expand band, re-expanding, growing the doc again, and oscillating indefinitely ("ping pong"). Math: `max_scroll_compact = stickyCompact (≈102) + content - dvh`. For it to exceed `expandAtValue` (150), content must be at least `dvh + 150 - 102 = dvh + 48`. Using `dvh + 200` adds a comfortable buffer and stays invisible (background fills the pad). */ .team-content { min-height: calc(100dvh + 200px); padding: 12px; } .team-tabpanel__skeleton { width: 100%; height: 280px; border-radius: 12px; background: var(--color-surface); } }