/* ===================================================================== * wc-planner.css — "My World Cup Planner" widget. * Tokens only (auto-themes dark/light). WCAG-AA: every coloured surface * is paired with its on-* foreground. Mobile-first; widens at >=600px. * Add in * right after tools.css on each how-to-watch page. * ===================================================================== */ .wcp { font-family: var(--font); color: var(--text); } .wcp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------- TZ strip --------------------------- */ .wcp-tzstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.65rem 0.85rem; margin-bottom: 1rem; background: var(--info-bg-subtle, var(--surface)); border: 1px solid var(--border); border-left: 3px solid var(--info, var(--accent)); border-radius: 8px; font-size: var(--text-sm); color: var(--text-muted); } .wcp-tzstrip__icon { font-size: 1rem; color: var(--info, var(--accent)); line-height: 1; } .wcp-tzstrip__text { flex: 1 1 auto; min-width: 0; } .wcp-tzstrip__text strong { color: var(--heading); font-weight: 600; } .wcp-tzstrip__auto { color: var(--text-muted); } .wcp-tzstrip__change { display: inline-flex; } .wcp-tzstrip select { min-height: 44px; padding: 0.35rem 0.6rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: var(--text-sm); font-weight: 600; cursor: pointer; } /* --------------------------- Countdown --------------------------- */ .wcp-countdown { position: sticky; top: 0.5rem; z-index: 2; margin-bottom: 1.25rem; } .wcp-cd { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 4px 18px rgba(0,0,0,0.10); } .wcp-cd__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-bottom: 0.75rem; } .wcp-cd__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--text-muted); } .wcp-cd__teams { font-size: var(--text-h5); font-weight: 800; color: var(--heading); line-height: 1.1; } .wcp-cd__timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .wcp-cd__cell { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.25rem; text-align: center; } .wcp-cd__num { display: block; font-size: clamp(24px, 7vw, 38px); font-weight: 800; color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums; } .wcp-cd__unit { display: block; margin-top: 0.3rem; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; } .wcp-cd__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.85rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: var(--text-sm); } .wcp-cd__kick { color: var(--text); font-weight: 600; } .wcp-cd__chans { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; } .wcp-cd--done { text-align: center; } .wcp-cd--done .wcp-cd__title { font-size: var(--text-h5); font-weight: 800; color: var(--heading); } .wcp-cd--done .wcp-cd__sub { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--text-muted); } /* --------------------------- Team picker ------------------------- */ .wcp-picker { margin-bottom: 1rem; } .wcp-picker__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--text-muted); margin-bottom: 0.5rem; } .wcp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .wcp-chip { min-height: 44px; padding: 0.4rem 0.9rem; display: inline-flex; align-items: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; font-family: var(--font); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .wcp-chip:hover { border-color: var(--heading); } .wcp-chip.is-active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } /* ---------------------------- Actions ---------------------------- */ .wcp-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; } .wcp-btn { min-height: 44px; padding: 0.55rem 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 8px; border: 1px solid transparent; font-family: var(--font); font-size: var(--text-md); font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .wcp-btn svg { flex: 0 0 auto; } .wcp-btn--primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .wcp-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .wcp-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } .wcp-btn--ghost:hover { border-color: var(--heading); color: var(--heading); } /* --------------------------- Match list -------------------------- */ .wcp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .wcp-row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .wcp-row.is-tbc { opacity: 0.85; } .wcp-row__when { display: flex; align-items: baseline; gap: 0.6rem; } .wcp-row__date { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; } .wcp-row__time { font-size: var(--text-md); color: var(--heading); font-weight: 700; } .wcp-row__teams { font-size: var(--text-lg); font-weight: 700; color: var(--heading); } .wcp-row__vs { color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); } .wcp-row__meta { display: block; margin-top: 0.15rem; font-size: var(--text-sm); color: var(--text-muted); } .wcp-row__tbc { display: inline-block; padding: 0 0.4rem; border-radius: 4px; background: var(--warning-bg-subtle); color: var(--warning); border: 1px solid var(--warning-border); font-weight: 600; font-size: var(--text-xs); } .wcp-row__chans { display: flex; flex-wrap: wrap; gap: 0.4rem; } .wcp-row__act { display: flex; } /* Calendar button (>=44px) */ .wcp-cal { min-height: 44px; min-width: 44px; padding: 0.4rem 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .wcp-cal:hover { border-color: var(--accent); color: var(--heading); } .wcp-cal:disabled { opacity: 0.5; cursor: not-allowed; } .wcp-cal__txt { white-space: nowrap; } /* ----------------------------- Pills ----------------------------- */ .wcp-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 8px; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; border: 1px solid transparent; } .wcp-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .wcp-pill__tag { margin-left: 0.15rem; padding: 0 0.3rem; border-radius: 4px; font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; } /* FREE -> success trio (bg-subtle / success text / success border) */ .wcp-pill--free { background: var(--success-bg-subtle); color: var(--success); border-color: var(--success-border); } .wcp-pill--free .wcp-pill__dot { background: var(--success); } .wcp-pill--free .wcp-pill__tag { background: var(--success-bg); color: var(--success); } /* PAID -> warning trio */ .wcp-pill--paid { background: var(--warning-bg-subtle); color: var(--warning); border-color: var(--warning-border); } .wcp-pill--paid .wcp-pill__dot { background: var(--warning); } .wcp-pill--paid .wcp-pill__tag { background: var(--warning-bg); color: var(--warning); } /* Light-theme contrast fix: --warning (#e68a00) on the warning tint fails WCAG AA. Darken the Paid-pill foreground in light theme ONLY — shared --warning token untouched. */ html[data-theme="light"] .wcp-pill--paid, html[data-theme="light"] .wcp-pill--paid .wcp-pill__tag { color: #8a5200; } /* ----------------------------- Empty ----------------------------- */ .wcp-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); font-size: var(--text-md); background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; } /* ------------------------ Focus visibility ----------------------- */ .wcp button:focus-visible, .wcp select:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; border-radius: 8px; } /* --------------------------- >=600px ----------------------------- */ @media (min-width: 600px) { .wcp-row { grid-template-columns: 130px 1fr auto auto; align-items: center; gap: 0.75rem 1rem; } .wcp-row__when { flex-direction: column; align-items: flex-start; gap: 0.1rem; } .wcp-row__chans { justify-content: flex-start; } .wcp-cd__teams { font-size: var(--text-h4); } } /* --------------------- Reduced-motion respect -------------------- */ @media (prefers-reduced-motion: reduce) { .wcp-chip, .wcp-btn, .wcp-cal { transition: none; } }