/** * 7M Theme - Design System * Component-based | State classes | Size variants | Dark mode ready */ :root { /* Spacing */ --spacing-1: 8px; --spacing-2: 16px; --spacing-3: 24px; --spacing-4: 32px; --spacing-5: 40px; --spacing-6: 48px; /* Transitions */ --transition-fast: 0.15s; --transition-base: 0.2s; --transition-slow: 0.5s; --transition-ease: ease; /* Z-index scale */ --z-below: -1; --z-base: 0; --z-above: 1; --z-sticky: 50; --z-dropdown: 100; --z-modal: 200; --z-tooltip: 300; /* Focus */ --focus-outline: 2px solid var(--color-focus-ring); --focus-outline-offset: 2px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); /* Layout */ --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --container-max: 1200px; --container-narrow: 1024px; /* Switcher grid */ --switcher-min: 200px; --switcher-gap: var(--spacing-2); /* Colors - Light (default) */ --color-primary: #136dec; --color-primary-hover: #0d5bc4; --color-primary-dark: #1d4ed8; --color-primary-light: rgba(19, 109, 236, 0.1); --color-primary-alpha-2: rgba(19, 109, 236, 0.2); --color-primary-alpha-3: rgba(19, 109, 236, 0.3); --color-background: #f6f7f8; --color-background-dark: #101822; --color-surface: #ffffff; --color-surface-alt: #f1f5f9; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-light: #94a3b8; --color-border: #e2e8f0; --color-border-dark: #334155; --color-success: #22c55e; --color-success-dark: #16a34a; --color-success-bg: rgba(34, 197, 94, 0.1); --color-success-alpha: rgba(34, 197, 94, 0.15); --color-danger: #ef4444; --color-danger-alpha: rgba(239, 68, 68, 0.15); --color-danger-badge: rgba(248, 113, 113, 0.75); --color-warning: #eab308; --color-on-primary: #ffffff; --color-overlay-light: rgba(255, 255, 255, 0.1); --color-overlay-light-2: rgba(255, 255, 255, 0.2); --color-overlay-light-6: rgba(255, 255, 255, 0.6); --color-overlay-light-8: rgba(255, 255, 255, 0.8); --color-overlay-light-9: rgba(255, 255, 255, 0.9); --color-overlay-dark: rgba(0, 0, 0, 0.4); --color-overlay-dark-7: rgba(0, 0, 0, 0.7); --color-focus-ring: rgba(19, 109, 236, 0.5); --color-neutral-200: #cbd5e1; --color-neutral-400: #94a3b8; --color-accent-blue: #3b82f6; --color-accent-blue-light: #60a5fa; } /* Dark mode: set data-theme="dark" on to enable. Optional: use JS to toggle based on user pref or system (prefers-color-scheme). */ [data-theme="dark"] { --color-background: #0f172a; --color-background-dark: #020617; --color-surface: #1e293b; --color-surface-alt: #334155; --color-text: #f8fafc; --color-text-muted: #94a3b8; --color-text-light: #64748b; --color-border: #334155; --color-border-dark: #475569; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --color-primary-light: rgba(19, 109, 236, 0.2); } /* Dark mode: btn--white stays light for contrast on gradient backgrounds */ [data-theme="dark"] .btn--white { background: #f8fafc; color: var(--color-primary); } [data-theme="dark"] .btn--white:hover { background: #e2e8f0; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } img, svg, video, iframe { max-width: 100%; /* height: auto; */ } html, body { width: 100%; max-width: 100%; overflow-x: clip; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--color-background); color: var(--color-text); min-height: 100vh; margin: 0; } .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 1; } .material-symbols-outlined svg { width: 1em; height: 1em; display: block; fill: currentColor; } /* Focus-visible: keyboard focus only, avoids focus ring on mouse click */ :focus { outline: none; } :focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; } a:focus-visible, [tabindex]:focus-visible { border-radius: var(--radius); } /* ========================================================================== Layout ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--spacing-2); padding-right: var(--spacing-2); } @media (min-width: 640px) { .container { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } } @media (min-width: 1024px) { .container { padding-left: var(--spacing-4); padding-right: var(--spacing-4); } } .container--narrow { max-width: var(--container-narrow); } /* ========================================================================== Layout Primitives (semantic, not Tailwind) ========================================================================== */ .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--spacing-2)); } .cluster--between { justify-content: space-between; } .cluster--end { justify-content: flex-end; } .cluster--center { justify-content: center; } .cluster--1 { --cluster-gap: var(--spacing-1); } .cluster--2 { --cluster-gap: var(--spacing-2); } .cluster--3 { --cluster-gap: var(--spacing-3); } .cluster--4 { --cluster-gap: var(--spacing-4); } .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--spacing-3)); } .stack--1 { --stack-gap: var(--spacing-1); } .stack--2 { --stack-gap: var(--spacing-2); } .stack--4 { --stack-gap: var(--spacing-4); } .stack--center { align-items: center; } /* Auto-fit grid: items grow/shrink with container */ .switcher { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--switcher-min), 100%), 1fr)); gap: var(--switcher-gap); } .switcher--2 { --switcher-min: 180px; } .switcher--3 { --switcher-min: 120px; --switcher-gap: var(--spacing-4); } .switcher--4 { --switcher-min: 100px; } /* ========================================================================== Semantic tokens (minimal) ========================================================================== */ .muted { color: var(--color-text-muted); } .primary { color: var(--color-primary); } .danger { color: var(--color-danger); } .warning { color: var(--color-warning); } .text-center { text-align: center; } .text-right { text-align: right; } /* ========================================================================== State classes (reusable) ========================================================================== */ .is-active { cursor: default; } .is-active:not(button):not([type="button"]):not([type="submit"]):not(a) { pointer-events: auto; } .is-disabled, [disabled], [aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .is-loading { position: relative; color: transparent !important; pointer-events: none; } .is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border: 2px solid var(--color-text-muted); border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Site Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .site-header__inner--top { height: 64px; } .site-header__inner--nav { height: auto; min-height: 46px; border-top: 1px solid var(--color-border); } @media (max-width: 767px) { .site-header__inner--top { height: 56px; } } .site-header--compact .site-header__inner { height: 64px; } .header__logo { display: flex; align-items: center; gap: var(--spacing-2); text-decoration: none; color: inherit; } .header__logo:hover { color: inherit; } .custom-logo-link { display: inline-flex; align-items: center; } .custom-logo-link img { } .header__logo-icon { display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-on-primary); padding: 6px; border-radius: var(--radius); transition: background var(--transition-base) var(--transition-ease); } .header__logo-icon--sm { width: 32px; height: 32px; padding: 4px; } .header__title { margin: 0; } .header__logo--icon-only { padding: var(--spacing-1); } .header__logo:hover .header__logo-icon { background: var(--color-primary-hover); } .header__logo-text { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.05em; } .header__nav { display: none; } .site-header__inner--nav .header__nav { display: flex; align-items: center; gap: var(--spacing-3); overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: 100%; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; } .site-header__inner--nav .header__nav::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .header__nav { display: flex; align-items: center; gap: var(--spacing-3); } } .header__nav a { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-base) var(--transition-ease); padding: 10px 0; border-bottom: 2px solid transparent; } .header__nav a:hover { color: var(--color-primary); } .header__nav a.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .header__actions { display: flex; align-items: center; gap: var(--spacing-2); } .header__top-menu { flex: 1; min-width: 0; display: none; } .header__top-menu-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); white-space: nowrap; overflow: hidden; } .header__top-menu-list li { margin: 0; padding: 0; } .header__top-menu-list a { display: inline-flex; align-items: center; font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--transition-base) var(--transition-ease); } .header__top-menu-list a:hover, .header__top-menu-list .current-menu-item > a, .header__top-menu-list .current_page_item > a, .header__top-menu-list .current-menu-ancestor > a { color: var(--color-primary); border-bottom-color: var(--color-primary); } @media (min-width: 1024px) { .header__top-menu { display: block; } } .header__search { position: relative; display: none; } @media (min-width: 640px) { .header__search { display: block; } } .header__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-light); font-size: 0.875rem; } .header__search input { width: 256px; padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 40px; border: none; background: var(--color-surface-alt); border-radius: var(--radius); font-size: 0.875rem; } .header__search input:focus-visible { outline: var(--focus-outline); outline-offset: 0; } .header__btn { padding: var(--spacing-1); border: none; background: transparent; border-radius: 50%; color: var(--color-text-muted); cursor: pointer; transition: background var(--transition-base) var(--transition-ease), color var(--transition-base) var(--transition-ease); } .header__btn:hover { background: var(--color-surface-alt); } .header__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--color-surface-alt); border: 1px solid var(--color-border); } .header__avatar img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== Main ========================================================================== */ .main { padding: var(--spacing-4) 0; } .main--sidebar { display: flex; flex-direction: column; gap: var(--spacing-3); } @media (min-width: 640px) { .main--sidebar { flex-direction: row; padding: var(--spacing-3); } } @media (min-width: 1024px) { .main--sidebar { flex-direction: row; padding: var(--spacing-4); } } .main--sidebar .content-main { flex: 1; } /* ========================================================================== Section spacing ========================================================================== */ .section { margin-bottom: var(--spacing-4); } .section--lg { margin-bottom: var(--spacing-6); } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); overflow: hidden; } .card + .card { margin-top: var(--spacing-3); } /* Card size variants */ .card--sm .card__header, .card--sm .card__body { padding: var(--spacing-1); } .card--sm .card__body > * + * { margin-top: var(--spacing-2); } .card--lg .card__header, .card--lg .card__body { padding: var(--spacing-3); } .card--lg .card__body > * + * { margin-top: var(--spacing-4); } .card--lg { border-radius: var(--radius-lg); } .card__header { padding: var(--spacing-2); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .card__body { padding: var(--spacing-2); } .card__body > * + * { margin-top: var(--spacing-4); } .card__body.card__body--alt { background: var(--color-surface-alt); } .card__title { font-weight: 700; display: flex; align-items: center; gap: var(--spacing-1); } .card__heading { font-size: 1.25rem; font-weight: 700; margin: 0; } .card__meta { font-size: 0.875rem; color: var(--color-text-muted); } .card__meta--xs { font-size: 0.75rem; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--color-background-dark); color: var(--color-on-primary); min-height: 320px; display: flex; align-items: center; padding: var(--spacing-4); background-size: cover; background-position: center; } @media (min-width: 768px) { .hero { min-height: 400px; padding: var(--spacing-4); } } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--color-overlay-dark), var(--color-overlay-dark-7)); } .hero__content { position: relative; max-width: 576px; } .hero__badge { display: inline-flex; align-items: center; gap: var(--spacing-1); background: var(--color-danger); padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-2); } .hero__badge-dot { position: relative; width: 8px; height: 8px; } .hero__badge-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--color-danger-badge); animation: pulse 1.5s infinite; } .hero__badge-dot::after { content: ''; position: relative; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-primary); } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } } .hero__title { font-size: 1.875rem; font-weight: 800; line-height: 1.2; margin: 0 0 var(--spacing-2); } @media (min-width: 768px) { .hero__title { font-size: 3rem; } } .hero__desc { font-size: 1.125rem; color: var(--color-overlay-light-8); margin: 0 0 var(--spacing-4); max-width: 448px; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius); font-weight: 700; font-size: 0.875rem; text-decoration: none; border: none; cursor: pointer; transition: background var(--transition-base) var(--transition-ease), color var(--transition-base) var(--transition-ease); } .btn--primary { background: var(--color-primary); color: var(--color-on-primary); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--ghost { background: var(--color-overlay-light); color: var(--color-on-primary); border: 1px solid var(--color-overlay-light-2); } .btn--ghost:hover { background: var(--color-overlay-light-2); } .btn--secondary { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } .btn--secondary:hover { border-color: var(--color-primary); } .btn--white { background: var(--color-surface); color: var(--color-primary); } .btn--white:hover { background: var(--color-surface-alt); } .btn--full { width: 100%; text-align: center; } /* Button size variants */ .btn--sm { padding: var(--spacing-1) var(--spacing-2); font-size: 0.8125rem; } .btn--lg { padding: var(--spacing-3) var(--spacing-4); font-size: 1rem; } /* ========================================================================== Tabs ========================================================================== */ .tabs { display: flex; border-bottom: 1px solid var(--color-border); padding: 0 var(--spacing-2); } .tabs__btn { flex: 1; min-width: 100px; padding: var(--spacing-2) var(--spacing-3); font-size: 0.875rem; font-weight: 700; background: none; border: none; border-bottom: 2px solid transparent; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-base) var(--transition-ease); } .tabs__btn:hover { color: var(--color-text); } .tabs__btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* ========================================================================== Match list ========================================================================== */ .match-group { background: var(--color-surface-alt); padding: var(--spacing-1) var(--spacing-2); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); } .match-group__title { display: flex; align-items: center; gap: var(--spacing-3); font-size: 0.875rem; font-weight: 700; color: var(--color-text); } .match-row { display: flex; align-items: center; padding: var(--spacing-2); text-decoration: none; color: inherit; transition: background var(--transition-base) var(--transition-ease); border-bottom: 1px solid var(--color-surface-alt); } .match-row:hover { background: var(--color-surface-alt); } .match-row__minute { width: 64px; text-align: center; font-size: 0.875rem; } .match-row__minute.is-live { color: var(--color-danger); font-weight: 700; } .match-live-pulse { position: relative; } .match-live-pulse::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--color-danger); border-radius: 50%; right: -12px; top: 50%; transform: translateY(-50%); } .match-row__content { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--spacing-2); } .match-row__team { display: flex; align-items: center; gap: var(--spacing-3); width: 33.33%; font-weight: 600; } .match-row__team--away { justify-content: flex-end; } .match-row__score { display: flex; align-items: center; gap: var(--spacing-2); padding: 4px var(--spacing-2); background: var(--color-surface-alt); border-radius: var(--radius); } .match-row__score span { font-size: 1.25rem; font-weight: 800; } .match-row__score .sep { color: var(--color-text-light); } .match-row__star { width: 40px; display: flex; justify-content: flex-end; color: var(--color-text-light); transition: color var(--transition-base) var(--transition-ease); } .match-row:hover .match-row__star, .match-row__star.is-active { color: var(--color-warning); } .team-logo { width: 24px; height: 24px; object-fit: contain; } .team-logo--sm { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--color-surface-alt); padding: 4px; display: flex; align-items: center; justify-content: center; } .team-logo--sm img { width: 100%; height: 100%; object-fit: contain; } .avatar-sm { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; border-radius: var(--radius); } .avatar-sm--rounded { border-radius: 50%; } .avatar-sm--primary { background: var(--color-primary); color: var(--color-on-primary); } .avatar-sm--surface { background: var(--color-surface-alt); color: var(--color-text); } /* Modularized: content components loaded via wp_enqueue_style (inc/enqueue.php) */ /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--spacing-4) 0; margin-top: var(--spacing-4); } .footer__intro { text-align: center; margin-bottom: var(--spacing-4); } .footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-4); margin-bottom: var(--spacing-4); } .footer__title { font-weight: 700; margin-bottom: var(--spacing-2); } .footer__list { list-style: none; padding: 0; margin: 0; } .footer__list li { margin-bottom: var(--spacing-1); } .footer__list a { font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-base) var(--transition-ease); } .footer__list a:hover { color: var(--color-primary); } .footer__brand { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); } .footer__brand-logo, .footer__brand .custom-logo-link img { display: block; width: auto; height: auto; object-fit: contain; } .footer__brand .custom-logo-link { display: inline-flex; align-items: center; } .footer__brand-desc { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; } .footer__social { display: flex; gap: var(--spacing-2); } .footer__social a { width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface-alt); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); text-decoration: none; transition: background var(--transition-base) var(--transition-ease), color var(--transition-base) var(--transition-ease); } .footer__social a:hover { background: var(--color-primary); color: var(--color-on-primary); } .footer__social .material-symbols-outlined { font-size: 0.875rem; } .footer__bottom { padding-top: var(--spacing-4); border-top: 1px solid var(--color-surface-alt); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); } @media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; } } .footer__copyright { display: flex; align-items: center; gap: var(--spacing-1); font-size: 0.875rem; font-weight: 700; color: var(--color-text-muted); } .footer__links { display: flex; gap: var(--spacing-3); font-size: 0.75rem; font-weight: 500; color: var(--color-text-light); flex-wrap: wrap; justify-content: center; } .footer__links a { color: inherit; text-decoration: none; } .footer__links a:hover { color: var(--color-primary); } .footer__disclaimer { font-size: 0.75rem; font-style: italic; color: var(--color-text-muted); } /* ========================================================================== Form ========================================================================== */ .form-inline { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; } .form-inline input { flex: 1; width: 100%; min-width: 0; max-width: 100%; padding: var(--spacing-2) var(--spacing-3); border: none; background: var(--color-surface-alt); border-radius: var(--radius) 0 0 var(--radius); font-size: 0.875rem; } .form-inline input:focus-visible { outline: 1px solid var(--color-focus-ring); outline-offset: 0; } .form-inline button { flex: 0 0 auto; padding: var(--spacing-2) 12px; background: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: 0 var(--radius) var(--radius) 0; font-weight: 700; font-size: 0.875rem; line-height: 1; white-space: nowrap; cursor: pointer; } @media (max-width: 380px) { .form-inline input { padding-left: 10px; padding-right: 10px; } .form-inline button { padding-left: 10px; padding-right: 10px; font-size: 0.8125rem; } } /* ========================================================================== Content layout ========================================================================== */ .content-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); } @media (min-width: 1024px) { .content-grid { grid-template-columns: 2fr 1fr; } } .content-grid--stack { grid-template-columns: 1fr; } @media (min-width: 1024px) { .content-grid--stack { grid-template-columns: 2fr 1fr; } } .content-main { display: flex; flex-direction: column; gap: var(--spacing-3); } /* ========================================================================== Scoreboard ========================================================================== */ .scoreboard { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); } .scoreboard__banner { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); padding: 4px; text-align: center; } .scoreboard__banner span { font-size: 10px; font-weight: 700; color: var(--color-on-primary); text-transform: uppercase; letter-spacing: 0.1em; } .scoreboard__body { padding: var(--spacing-3); display: flex; flex-direction: column; align-items: center; } @media (min-width: 768px) { .scoreboard__body { padding: var(--spacing-4); } } .scoreboard__teams { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); } .scoreboard__team { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); } .scoreboard__team-img { width: 100%; height: 100%; object-fit: contain; } .scoreboard__team-logo { width: 64px; height: 64px; background: var(--color-surface-alt); border-radius: 50%; padding: var(--spacing-1); display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .scoreboard__team-logo { width: 96px; height: 96px; } } .scoreboard__team-name { font-size: 0.875rem; font-weight: 700; text-align: center; } @media (min-width: 768px) { .scoreboard__team-name { font-size: 1.125rem; } } .scoreboard__score { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); } .scoreboard__numbers { display: flex; align-items: center; gap: var(--spacing-2); } .scoreboard__numbers span { font-size: 2.25rem; font-weight: 800; } @media (min-width: 768px) { .scoreboard__numbers span { font-size: 3.75rem; } } .scoreboard__numbers .sep { font-size: 1.5rem; font-weight: 300; color: var(--color-text-light); } .scoreboard__live { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--color-danger-alpha); color: var(--color-danger); border-radius: 9999px; font-size: 0.75rem; font-weight: 700; } .scoreboard__live-dot { width: 6px; height: 6px; background: var(--color-danger); border-radius: 50%; animation: pulse 1.5s infinite; } .scoreboard__venue { font-size: 10px; font-weight: 500; color: var(--color-text-muted); margin-top: 4px; } /* ========================================================================== Header variants ========================================================================== */ .header--leagues { background: var(--color-overlay-light-9); backdrop-filter: blur(12px); } .header--leagues .site-header__inner { height: auto; padding: var(--spacing-2) 0; } .header--leagues .header__logo-icon { width: 40px; height: 40px; } .header--leagues .header__search { flex: 1; max-width: 448px; } @media (min-width: 768px) { .header--leagues .header__search { display: flex; } } .header--leagues .header__search input { border-radius: 9999px; width: 100%; } .header--leagues .header__avatar { border: 2px solid var(--color-primary-alpha-2); } .header--leagues .header__logo-text { font-size: 1.25rem; } .header--match .site-header__inner { padding: 0 var(--spacing-2); } .header--match .container { max-width: var(--container-narrow); } .header__avatar--outline { background: var(--color-primary-light); border: 1px solid var(--color-primary-alpha-2); } .header__avatar--primary { background: var(--color-primary-light); border: 1px solid var(--color-primary-alpha-3); display: flex; align-items: center; justify-content: center; } .header__btn--filled { background: var(--color-surface-alt); } .header__btn--filled:hover { background: var(--color-primary-light); } .header--insights { border-bottom-color: var(--color-primary-alpha-2); } .header--insights .site-header__inner { padding: var(--spacing-2); flex-wrap: wrap; } .header--insights .header__search { flex: 1; max-width: 576px; } @media (min-width: 768px) { .header--insights .header__search { display: flex; } } .header--insights .header__logo-icon { padding: var(--spacing-1); text-decoration: none; color: inherit; } .header--insights .header__logo-text { margin: 0; } /* ========================================================================== Mobile nav ========================================================================== */ .nav-mobile { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 6px 8px; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-mobile::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .nav-mobile { display: none; } } .nav-mobile a { flex: 0 0 auto; min-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; border-radius: 10px; color: var(--color-text-muted); text-decoration: none; font-size: 10px; font-weight: 700; line-height: 1.2; } .nav-mobile a span:last-child { max-width: 70px; overflow: hidden; text-overflow: ellipsis; } .nav-mobile a.is-active { color: var(--color-primary); background: var(--color-primary-light); } /* ========================================================================== Page wrapper ========================================================================== */ .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .page-wrapper .main { flex: 1; } .pb-mobile { padding-bottom: 80px; } /* ========================================================================== Misc ========================================================================== */ .divider-v { width: 1px; height: 32px; background: var(--color-surface-alt); } .win-prob__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ========================================================================== Select ========================================================================== */ select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 8px center; background-repeat: no-repeat; background-size: 1.25em 1.25em; padding: 10px 40px 10px var(--spacing-2); border-radius: var(--radius); background-color: var(--color-surface-alt); border: 1px solid var(--color-border); font-size: 0.875rem; } select:focus-visible { outline: var(--focus-outline); outline-offset: 0; } /* ========================================================================== App banner ========================================================================== */ .app-banner { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: var(--radius); padding: var(--spacing-3); color: var(--color-on-primary); text-align: center; position: relative; overflow: hidden; } .app-banner__deco { position: absolute; right: -32px; bottom: -32px; opacity: 0.1; font-size: 120px; transition: transform var(--transition-slow) var(--transition-ease); } .app-banner:hover .app-banner__deco { transform: scale(1.1); } .app-banner__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-2); } .app-banner__title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--spacing-1); } .app-banner__subtitle { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--spacing-4); } .app-banner__subtitle--muted { opacity: 0.8; } .app-banner__teams { display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); margin-bottom: var(--spacing-4); } .app-banner__team { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); } .app-banner__kickoff { display: flex; flex-direction: column; align-items: center; } .app-banner__kickoff-time { font-size: 1.5rem; font-weight: 800; } .app-banner__kickoff-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; opacity: 0.6; } .app-banner__actions { display: flex; flex-direction: column; gap: var(--spacing-3); position: relative; z-index: var(--z-above); } /* ========================================================================== Stats card ========================================================================== */ .stats-card { background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); padding: var(--spacing-3); } .stats-card--row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--spacing-4); } @media (min-width: 768px) { .stats-card--row { flex-direction: row; } } .stats-card__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--spacing-3); display: flex; align-items: center; gap: var(--spacing-1); } .stats-bar { height: 8px; display: flex; width: 100%; border-radius: 9999px; overflow: hidden; background: var(--color-surface-alt); } .stats-bar__fill { height: 100%; border-radius: 9999px; } .stats-bar__fill--primary { background: var(--color-primary); } .stats-bar__fill--muted { background: var(--color-neutral-200); } .stats-bar__fill--dark { background: var(--color-neutral-400); } .stats-row { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-2) 0; border-bottom: 1px solid var(--color-surface-alt); font-size: 0.875rem; } .stats-row:last-child { border-bottom: none; } .stats-row__value { font-weight: 700; } .stats-row__value--muted { color: var(--color-text-muted); font-weight: 700; } .stats-possession { margin-bottom: var(--spacing-4); } .stats-possession__labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-2); font-size: 0.875rem; font-weight: 500; } .stats-row__label { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--color-text-muted); } .venue-stat__value { font-weight: 700; text-transform: none; } /* Bar widths (stats) */ .bar-58 { width: 58%; } .bar-42 { width: 42%; } .bar-65 { width: 65%; } .bar-20 { width: 20%; } .bar-15 { width: 15%; } /* ========================================================================== Sidebar nav ========================================================================== */ .sidebar-nav { width: 100%; flex-shrink: 0; } @media (min-width: 640px) { .sidebar-nav { width: 256px; } } .sidebar-nav__list { display: flex; flex-direction: column; gap: var(--spacing-1); } .sidebar-nav__list a { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; font-weight: 500; transition: background var(--transition-base) var(--transition-ease), color var(--transition-base) var(--transition-ease); } .sidebar-nav__list a:hover { background: var(--color-primary-light); color: var(--color-primary); } .sidebar-nav__list a.is-active { background: var(--color-primary); color: var(--color-on-primary); } .sidebar-nav__item { font-size: 0.875rem; padding: var(--spacing-2) var(--spacing-3); display: flex; align-items: center; gap: var(--spacing-3); } .sidebar-nav__divider { margin: var(--spacing-2) 0; border-top: 1px solid var(--color-border); } .sidebar-nav__label { padding: 0 var(--spacing-3); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); } .sidebar-nav__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: var(--spacing-3); } .sidebar-nav__dot--blue { background: var(--color-accent-blue); } .sidebar-nav__dot--red { background: var(--color-danger); } .sidebar-nav__dot--yellow { background: var(--color-warning); } .sidebar-nav__dot--primary { background: var(--color-primary); } .sidebar-nav__dot--light { background: var(--color-accent-blue-light); } /* ========================================================================== Standings ========================================================================== */ .standings-filter { background: var(--color-surface); border-radius: var(--radius); padding: var(--spacing-3); box-shadow: var(--shadow-sm); } .standings-filter__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-bottom: var(--spacing-2); } .standings-filter__title { font-size: 1.5rem; font-weight: 700; margin: 0; } .standings-filter__subtitle { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; } .standings-filter__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2); } @media (min-width: 640px) { .standings-filter__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .standings-filter__grid { grid-template-columns: repeat(3, 1fr); } } .standings-filter__field { display: flex; flex-direction: column; gap: var(--spacing-2); } .standings-filter__field label { font-size: 0.875rem; font-weight: 500; } /* ========================================================================== Insights ========================================================================== */ .insights-hero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-4); } @media (min-width: 768px) { .insights-hero { flex-direction: row; align-items: flex-end; } } .insights-hero__title { font-size: 1.875rem; font-weight: 700; margin: 0 0 var(--spacing-1); } .insights-hero__desc { color: var(--color-text-muted); margin: 0; } .insights-hero__filters { display: flex; flex-wrap: wrap; gap: var(--spacing-1); } /* ========================================================================== Chart ========================================================================== */ .chart-placeholder { height: 192px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary-alpha-2), var(--color-primary-light)); border: 1px dashed var(--color-primary-alpha-3); border-radius: var(--radius); display: flex; align-items: flex-end; justify-content: space-around; padding: 0 var(--spacing-2) var(--spacing-2); } .chart-bar { width: 32px; background: var(--color-primary); border-radius: var(--radius) var(--radius) 0 0; } .chart-bar:nth-child(1) { height: 66%; opacity: 0.4; } .chart-bar:nth-child(2) { height: 75%; opacity: 0.6; } .chart-bar:nth-child(3) { height: 100%; } .chart-bar:nth-child(4) { height: 83%; opacity: 0.8; } .chart-bar:nth-child(5) { height: 50%; opacity: 0.4; } .chart-bar:nth-child(6) { height: 66%; opacity: 0.5; } .chart-bar:nth-child(7) { height: 80%; opacity: 0.7; } .chart-bar:nth-child(8) { height: 33%; opacity: 0.3; } .chart-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-top: var(--spacing-3); } .chart-stat { text-align: center; } .chart-stat__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); } .chart-stat__value { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); } .chart-divider { border-left: 1px solid var(--color-surface-alt); border-right: 1px solid var(--color-surface-alt); } /* ========================================================================== Badge ========================================================================== */ .badge { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius); } .badge--primary { background: var(--color-primary-light); color: var(--color-primary); } .badge--solid { background: var(--color-primary); color: var(--color-on-primary); } .badge--outline-light { background: var(--color-overlay-light-2); color: var(--color-on-primary); } .badge--neutral { background: var(--color-surface-alt); color: var(--color-text); } .badge--success { background: var(--color-success-bg); color: var(--color-success); } .badge--live { background: var(--color-success-alpha); color: var(--color-success-dark); } /* ========================================================================== Newsletter CTA ========================================================================== */ .newsletter-cta { background: var(--color-primary); border-radius: var(--radius); padding: var(--spacing-3); color: var(--color-on-primary); position: relative; overflow: hidden; } .newsletter-cta__title { font-weight: 700; font-size: 1.125rem; margin-bottom: var(--spacing-1); } .newsletter-cta__desc { font-size: 0.875rem; opacity: 0.8; margin-bottom: var(--spacing-2); } .newsletter-cta input { width: 100%; padding: var(--spacing-2) var(--spacing-2); border: none; background: var(--color-overlay-light-2); border-radius: var(--radius); color: var(--color-on-primary); font-size: 0.875rem; margin-bottom: var(--spacing-3); } .newsletter-cta input::placeholder { color: var(--color-overlay-light-6); } .newsletter-cta .btn { width: 100%; } /* ========================================================================== Table row highlight / Odds ========================================================================== */ .table-row--highlight { background: var(--color-primary-light); } .odds-best { background: var(--color-success-bg); color: var(--color-success-dark); padding: 2px 8px; border-radius: var(--radius); font-weight: 700; } /* ========================================================================== Form badges ========================================================================== */ .form-badge { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 10px; font-weight: 700; color: var(--color-on-primary); } .form-badge--w { background: var(--color-success); } .form-badge--d { background: var(--color-neutral-400); } .form-badge--l { background: var(--color-danger); } /* ========================================================================== Timeline ========================================================================== */ .timeline-card { background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); overflow: hidden; } .timeline-card__header { padding: var(--spacing-2) var(--spacing-3); border-bottom: 1px solid var(--color-surface-alt); } .timeline-card__body { padding: var(--spacing-3); position: relative; } .timeline-card__line { position: absolute; left: 33px; top: var(--spacing-3); bottom: var(--spacing-3); width: 2px; background: var(--color-surface-alt); } .timeline-item { position: relative; display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-3); } .timeline-item:last-child { margin-bottom: 0; } .timeline-item__icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-on-primary); position: relative; z-index: var(--z-above); box-shadow: 0 0 0 4px var(--color-surface); } .timeline-item__icon--goal { background: var(--color-primary); } .timeline-item__icon--card { background: var(--color-warning); } .timeline-item__text { flex: 1; } .timeline-item__label { font-size: 0.875rem; font-weight: 700; } .timeline-item__meta { font-size: 0.75rem; color: var(--color-text-muted); } .timeline-item__score { font-size: 0.75rem; color: var(--color-text-light); font-family: monospace; } /* ========================================================================== Insights card ========================================================================== */ .insights-card { background: var(--color-primary-light); border: 1px solid var(--color-primary-alpha-2); border-radius: var(--radius); padding: var(--spacing-3); } .insights-card__item { background: var(--color-surface); padding: var(--spacing-3); border-radius: var(--radius); border: 1px solid var(--color-border); margin-bottom: var(--spacing-2); } .insights-card__item:last-of-type { margin-bottom: var(--spacing-2); } /* Tip row */ .tip-row { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); } @media (min-width: 768px) { .tip-row { flex-direction: row; } .tip-row__prediction { margin-left: auto; justify-content: flex-end; } } .tip-row__teams { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); } .tip-row__team { display: flex; align-items: center; gap: var(--spacing-2); flex: 1; } .tip-row__team--home { justify-content: flex-start; } .tip-row__team--away { justify-content: flex-end; text-align: right; } .tip-row__vs { padding: 0 var(--spacing-4); font-size: 1.5rem; font-weight: 300; font-style: italic; color: var(--color-text-muted); } .tip-row__prediction { display: flex; align-items: center; gap: var(--spacing-2); flex: 1; } .tip-row__analyst { font-weight: 700; margin: 0; } .tip-row__prediction-label { font-style: italic; } /* ========================================================================== Win probability ========================================================================== */ .win-prob { background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); padding: var(--spacing-3); } .win-prob .stats-card__title { margin-bottom: var(--spacing-4); } .win-prob__bar { height: 12px; display: flex; border-radius: 9999px; overflow: hidden; margin-bottom: var(--spacing-2); } .win-prob__legend { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); } /* ========================================================================== Live widget ========================================================================== */ .live-widget-header { background: var(--color-background-dark); color: #fff; padding: var(--spacing-2); display: flex; justify-content: space-between; align-items: center; } .live-widget-header__title { font-size: 0.875rem; font-weight: 700; } .live-widget-header__badge { display: flex; align-items: center; gap: var(--spacing-1); } .live-widget-header__badge span:last-child { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; } .live-widget-header__dot { width: 8px; height: 8px; background: var(--color-danger); border-radius: 50%; animation: pulse 1.5s infinite; } .live-match { border-bottom: 1px solid var(--color-surface-alt); } .live-match__meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: var(--spacing-2); } .live-match__teams { display: flex; flex-direction: column; gap: var(--spacing-1); } .live-match__row { display: flex; justify-content: space-between; align-items: center; } .live-match__row span:first-child { font-size: 0.875rem; font-weight: 500; } .live-match__row span:last-child { font-size: 0.875rem; font-weight: 700; } /* Live widget footer button */ .live-widget__footer-btn { width: 100%; padding: var(--spacing-3); font-size: 0.875rem; font-weight: 700; color: var(--color-text-muted); background: transparent; border: none; border-top: 1px solid var(--color-surface-alt); cursor: pointer; } /* ========================================================================== Entry / Content ========================================================================== */ .entry-header { margin-bottom: var(--spacing-4); } .entry-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--spacing-1); } .entry-title a { color: inherit; text-decoration: none; } .entry-title a:hover { color: var(--color-primary); } .entry-date { font-size: 0.875rem; color: var(--color-text-muted); } .empty-state { text-align: center; } .empty-state__title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--spacing-4); } .empty-state__text { color: var(--color-text-muted); } /* ========================================================================== Betting insights ========================================================================== */ .betting-insights__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4); } .betting-insights__title { font-size: 0.875rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; display: flex; align-items: center; gap: var(--spacing-2); } .betting-insights__list { display: flex; flex-direction: column; gap: var(--spacing-4); } .betting-insights__item { font-size: 0.75rem; font-weight: 500; } .betting-insights__item strong { color: var(--color-primary); font-weight: 700; } /* ========================================================================== Standings table / scorers ========================================================================== */ .scorers-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4); } .btn-link { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: none; border: none; cursor: pointer; text-decoration: none; } .scorers-card__list { display: flex; flex-direction: column; gap: var(--spacing-4); } .scorers-row { display: flex; align-items: center; justify-content: space-between; } .scorers-row__player { display: flex; align-items: center; gap: var(--spacing-3); } .scorers-row__name { font-size: 0.875rem; font-weight: 700; } .scorers-row__team { font-size: 0.75rem; color: var(--color-text-muted); } .scorers-row__goals { font-size: 1.125rem; font-weight: 700; color: var(--color-primary); } /* Standings legend */ .standings-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-4); font-size: 0.75rem; color: var(--color-text-muted); } .standings-legend__item { display: flex; align-items: center; gap: var(--spacing-2); } /* ========================================================================== Responsive stability fixes (non-visual) ========================================================================== */ .page-wrapper, .section, .card, .sidebar, .content-grid, .content-main, .site-header, .site-header__inner, .header__actions, .header__nav, .match-row, .news-grid, .footer__grid { max-width: 100%; min-width: 0; } .content-grid > *, .news-grid > *, .footer__grid > *, .switcher > * { min-width: 0; } .table-wrap, .no-scrollbar, .tabs, .header__nav, .site-header__inner--nav { overflow-x: auto; overflow-y: hidden; } @media (max-width: 767px) { .container { padding-left: 12px; padding-right: 12px; } .content-grid, .footer__grid, .news-grid, .switcher, .chart-stats { grid-template-columns: minmax(0, 1fr); } .match-row__content { min-width: 0; } body, main, section, article, aside { max-width: 100%; } } /* ========================================================================== Mobile-first responsive hardening (keep visual design) ========================================================================== */ /* Prevent fixed-width overflow while preserving look */ .card, .sidebar-widget, .scoreboard, .hero, .news-card, .match-row, .entry-content, .footer__grid > div { width: 100%; max-width: 100%; } /* Header stability */ .site-header__inner { gap: var(--spacing-2); } .header__actions, .header__search, .header__search .search-form { min-width: 0; } .header__search input { width: 100%; max-width: 100%; } /* Grid/card responsiveness */ .news-grid, .content-grid, .footer__grid, .switcher, .chart-stats { grid-auto-rows: minmax(min-content, max-content); } .news-card__title, .entry-title, .card__heading, .hero__title, .scoreboard__team-name { overflow-wrap: anywhere; word-break: break-word; } /* Improve small-screen behavior without changing desktop design */ @media (max-width: 991px) { .site-header__inner { height: auto; min-height: 56px; } .site-header__inner--top { align-items: center; } .hero { min-height: 280px; padding: var(--spacing-3); } .match-row { padding-left: var(--spacing-1); padding-right: var(--spacing-1); } .match-row__team { gap: var(--spacing-1); } } @media (max-width: 575px) { .header__logo-text { font-size: 1.125rem; } .header__nav a { font-size: 0.8125rem; } .hero__title { font-size: 1.5rem; line-height: 1.25; } .hero__desc { font-size: 0.95rem; } .card__body, .card__header, .sidebar-widget__body { padding: var(--spacing-2); } } @media (max-width: 991px) { /* Full-width tablet/mobile lock */ html, body, .page-wrapper, .site-header, .main, .site-footer, .section, .content-grid, .content-grid--stack, .content-main, .sidebar, .hero, .card, .sidebar-widget, .news-card { width: 100%; max-width: 100%; min-width: 0; } .container, .container--narrow { width: 100% !important; max-width: 100% !important; min-width: 0; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; } .main--sidebar { display: block; padding: 0; } .sidebar-nav { width: 100% !important; } .content-grid, .content-grid--stack, .news-grid, .footer__grid, .chart-stats, .standings-filter__grid { grid-template-columns: minmax(0, 1fr) !important; } .hero__content { max-width: none; } /* Mobile tabs: horizontal scroll only (page stays fixed) */ .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; } .tabs::-webkit-scrollbar { display: none; } .tabs__btn { flex: 0 0 auto; min-width: 104px; } .match-row__team, .match-row__content, .match-row__score, .header__search, .header__actions, .header__nav { min-width: 0; } } @media (max-width: 767px) { /* Keep match cards readable without causing horizontal squeeze */ .match-row { display: block; } .match-row__minute { width: auto; text-align: left; padding: 0 0 6px; } .match-row__content { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; } .match-row__team { width: auto; } } /* ========================================================================== Utility compatibility (used in templates) ========================================================================== */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--spacing-2); } .gap-3 { gap: var(--spacing-3); } .text-sm { font-size: 0.875rem; } /* WP accessibility helper fallback */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Extra small screens (<= 360px) */ @media (max-width: 360px) { .site-header__inner, .site-header__inner--top { min-height: 52px; } .header__logo-text { font-size: 1rem; } .scoreboard__numbers span { font-size: 1.75rem; } .scoreboard__team-logo { width: 52px; height: 52px; } .nav-mobile a { font-size: 9px; } } @media (max-width: 767px) { .table th, .table td { padding: 10px 8px; font-size: 0.8125rem; } .table-cell--bookmaker { gap: 8px; } .tip-row__teams { gap: var(--spacing-2); } .tip-row__vs { padding: 0 var(--spacing-1); font-size: 1.125rem; } } /* ========================================================================== Core Web Vitals: media stability (CLS) ========================================================================== */ .news-card__img { aspect-ratio: 16 / 9; } .header__avatar { aspect-ratio: 1 / 1; } .scoreboard__team-logo, .team-logo, .team-logo--sm, .avatar-sm { aspect-ratio: 1 / 1; } /* ========================================================================== Header/Nav responsive cleanup (authoritative) ========================================================================== */ /* Global horizontal safety */ html, body { width: 1005; max-width: 100%; overflow-x: clip; } @media (min-width: 768px) { .site-header__inner--nav { display: flex; overflow: hidden; } .site-header__inner--nav .header__nav { display: flex; flex-wrap: nowrap; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; } .site-header__inner--nav .header__nav a { flex: 0 1 auto; min-width: 0; } .tabs, .nav-mobile { overflow: hidden; } } @media (max-width: 767px) { /* Lock page width to viewport */ html, body, .page-wrapper, .main, .section, .content-grid, .content-main, .sidebar, .site-footer, .site-header, .site-header .container { max-width: 100%; overflow-x: clip; } /* Remove top nav row on mobile (use search + bottom nav) */ .site-header__inner--nav { display: none !important; } /* Keep mobile search visible next to logo */ .site-header__inner--top { gap: 8px; } .header__actions { display: none !important; } .header__actions .header__search { display: block !important; flex: 1; min-width: 0; width: auto; max-width: none; } .header__actions .header__search .search-form { display: block; width: 100%; } .header__actions .header__search input { display: block; width: 100%; height: 36px; font-size: 0.875rem; } /* Bottom nav + tabs can self-scroll without pushing page width */ .nav-mobile, .tabs { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-mobile::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; } }