/* ========================================================================= SHARKS — GAMES CARD Public-site card for "Next Game" + "Last Game". v1.0.0 - Two-column desktop layout: NEXT GAME on the left, LAST GAME aside on the right. Countdown tiles sit inside the NEXT GAME column. - Uses logical CSS properties for RTL support — under the card mirrors automatically. - All selectors scoped under .sgc to avoid theme collisions. ========================================================================= */ .sgc.sgc-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 32px; background: var(--surface-white); border: 1px solid var(--surface-stroke); border-radius: 16px; padding: 36px 40px; box-sizing: border-box; font-family: var(--font-body); color: var(--text-ink); } .sgc.sgc-card *, .sgc.sgc-card *::before, .sgc.sgc-card *::after { box-sizing: inherit; } /* Mode = next-only or last-only collapses to a single column. */ .sgc.sgc-mode-next, .sgc.sgc-mode-last { grid-template-columns: minmax(0, 1fr); } /* ========================================================================= NEXT GAME column ========================================================================= */ .sgc .sgc-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "slides countdown" "dots dots"; gap: 24px 32px; align-items: center; } .sgc .sgc-slides { grid-area: slides; position: relative; min-height: 180px; /* Stack all slides on top of each other — JS toggles [data-active]. */ display: grid; } .sgc .sgc-slide { grid-row: 1; grid-column: 1; opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; margin: 0; } .sgc .sgc-slide[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; position: relative; /* take part in flow so the column has height */ } /* Eyebrow — NEXT GAME · PREMIER */ .sgc .sgc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sharks-purple); } .sgc .sgc-eyebrow-sep { color: var(--sharks-powder-mid); } [dir="rtl"] .sgc .sgc-eyebrow { letter-spacing: 0.06em; text-transform: none; } /* Matchup headline — big, black, very bold to match the reference. */ .sgc .sgc-matchup { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-ink); margin: 0 0 14px; } .sgc .sgc-when { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--text-ink); margin: 0 0 6px; } .sgc .sgc-where { font-family: var(--font-body); font-size: 15px; color: var(--text-slate); margin: 0 0 6px; } /* Meta line ("Premier League · Regular season") — quiet slate text in sentence case, NOT a small-caps purple tag. */ .sgc .sgc-meta { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-slate); margin: 14px 0 0; } /* ========================================================================= COUNTDOWN tiles ========================================================================= */ .sgc .sgc-countdown { grid-area: countdown; display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 10px; } /* Solid purple tiles, white numbers, soft powder labels — matches the reference exactly. */ .sgc .sgc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sharks-purple); border-radius: 14px; padding: 18px 10px 14px; min-width: 64px; } .sgc .sgc-tile-num { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: #ffffff; font-variant-numeric: tabular-nums; } .sgc .sgc-tile-label { font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sharks-powder); margin-top: 8px; } [dir="rtl"] .sgc .sgc-tile-label { letter-spacing: 0.04em; text-transform: none; } /* ========================================================================= DOTS / division switcher ========================================================================= */ .sgc .sgc-dots { grid-area: dots; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .sgc .sgc-dot { appearance: none; border: 1.5px solid var(--sharks-powder-mid); background: transparent; color: var(--sharks-purple); font-family: var(--font-display); font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } [dir="rtl"] .sgc .sgc-dot { letter-spacing: 0.04em; text-transform: none; } .sgc .sgc-dot:hover, .sgc .sgc-dot:focus-visible { border-color: var(--sharks-purple); outline: none; } .sgc .sgc-dot[aria-current="true"] { background: var(--sharks-purple); color: #ffffff; border-color: var(--sharks-purple); } /* ========================================================================= LAST GAME aside — inline text, no panel-within-a-panel ========================================================================= */ .sgc .sgc-last { background: transparent; border-radius: 0; padding: 0; padding-inline-start: 32px; border-inline-start: 1px solid var(--surface-stroke); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: end; gap: 10px; } /* Eyebrow ("LAST GAME") sits flush, slightly muted to match the reference. */ .sgc .sgc-last .sgc-eyebrow { margin-bottom: 2px; color: var(--sharks-powder-mid); } .sgc .sgc-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; } /* One row per result: badge + line on the same baseline; division caption tucked underneath, very subtle. */ .sgc .sgc-result { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 6px; } .sgc .sgc-result-line { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-ink); } /* Text-only colored letter — the reference shows W as a green letter inline with the score, not a filled badge. */ .sgc .sgc-result-badge { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: 0; background: transparent; padding: 0; margin-inline-end: 4px; color: var(--text-slate); } .sgc .sgc-result.is-win .sgc-result-badge { color: #1F8F4A; } .sgc .sgc-result.is-loss .sgc-result-badge { color: #C53B3B; } .sgc .sgc-result.is-tie .sgc-result-badge { color: var(--sharks-powder-mid); } .sgc .sgc-result-team { font-weight: 700; } .sgc .sgc-result-score { font-weight: 900; font-variant-numeric: tabular-nums; } .sgc .sgc-result-dash { color: var(--text-slate); font-weight: 500; } /* Division caption is informational — show it small and slate so the multi-division case stays readable but it doesn't shout. */ .sgc .sgc-result-division { flex-basis: 100%; font-family: var(--font-body); font-weight: 500; font-size: 12.5px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-slate); } .sgc .sgc-schedule-link { margin-top: 6px; display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-ink); text-decoration: none; } .sgc .sgc-schedule-link span { display: inline-block; margin-inline-start: 6px; transition: transform 180ms ease; } .sgc .sgc-schedule-link:hover span, .sgc .sgc-schedule-link:focus-visible span { transform: translateX(2px); } [dir="rtl"] .sgc .sgc-schedule-link span { transform: scaleX(-1); } [dir="rtl"] .sgc .sgc-schedule-link:hover span, [dir="rtl"] .sgc .sgc-schedule-link:focus-visible span { transform: scaleX(-1) translateX(2px); } .sgc .sgc-schedule-link:focus-visible { outline: 2px solid var(--sharks-powder); outline-offset: 3px; border-radius: 4px; } /* ========================================================================= EMPTY STATE ========================================================================= */ .sgc.sgc-empty { background: var(--surface-cream); border: 1px dashed var(--sharks-powder-mid); padding: 28px; text-align: center; border-radius: 14px; } .sgc .sgc-empty-message { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: var(--text-slate); } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 900px) { .sgc.sgc-card { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; } .sgc .sgc-next { grid-template-columns: minmax(0, 1fr); grid-template-areas: "slides" "countdown" "dots"; gap: 20px; } .sgc .sgc-countdown { justify-self: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); } .sgc .sgc-matchup { font-size: 30px; } .sgc .sgc-tile-num { font-size: 26px; } .sgc .sgc-tile { padding: 14px 8px 11px; } .sgc .sgc-last { border-inline-start: none; padding-inline-start: 0; padding-top: 20px; border-top: 1px solid var(--surface-stroke); align-items: flex-start; text-align: start; } } @media (max-width: 480px) { .sgc .sgc-matchup { font-size: 26px; } .sgc .sgc-tile-num { font-size: 22px; } .sgc .sgc-tile-label { font-size: 9px; } } /* ========================================================================= REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { .sgc .sgc-slide { transition: none; transform: none; } .sgc .sgc-schedule-link span { transition: none; } .sgc .sgc-schedule-link:hover span { transform: none; } [dir="rtl"] .sgc .sgc-schedule-link:hover span { transform: scaleX(-1); } }