/* Optional: load brand fonts here. @import must be at the top of the file. Cost: every widget page fetches this on first load (Google caches it). Delete the line to drop the external font fetch — themes that reference Inter will silently fall back to the system stack defined in --wg-font. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); /* Theme tokens. Each theme overrides the same eight vars; the rest of the file refers to them and never to literal colors/fonts, so swapping a theme = swapping this block. ?theme= on the embed URL flips data-theme on #widget. Default is light; dark and brand themes are opt-in via ?theme=. */ :root, [data-theme="default"] { --wg-bg: #ffffff; --wg-fg: #0f1115; --wg-muted: #6b7280; --wg-row: #f8fafc; --wg-accent: #16a34a; --wg-border: #e5e7eb; --wg-error: #dc2626; --wg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [data-theme="dark"] { --wg-bg: #0f1115; --wg-fg: #e8eaed; --wg-muted: #9aa0a6; --wg-row: #171a21; --wg-accent: #16a34a; --wg-border: #262b36; --wg-error: #f87171; --wg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* sportscasting */ [data-theme="23"] { --wg-bg: #ffffff; --wg-fg: #121212; --wg-muted: #6b7280; --wg-row: #f5f5f7; --wg-accent: #0859cf; --wg-border: #e4e4e4; --wg-error: #dc2626; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* theme 27 */ [data-theme="27"] { --wg-bg: #ffffff; --wg-fg: #121212; --wg-muted: #6b7280; --wg-row: #f5f5f7; --wg-accent: #7a1f69; --wg-border: #e4e4e4; --wg-error: #dc2626; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* esports-news (dark) */ [data-theme="30"] { --wg-bg: #151a1e; --wg-fg: #d9dce0; --wg-muted: #a0afbf; --wg-row: #22272b; --wg-accent: #20f4cb; --wg-border: #2c333a; --wg-error: #f87171; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* theme 36 */ [data-theme="36"] { --wg-bg: #ffffff; --wg-fg: #121212; --wg-muted: #6b7280; --wg-row: #f5f5f7; --wg-accent: #2269b3; --wg-border: #e4e4e4; --wg-error: #dc2626; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* thesportsrush */ [data-theme="109"] { --wg-bg: #ffffff; --wg-fg: #121212; --wg-muted: #6b7280; --wg-row: #f5f5f7; --wg-accent: #dc2626; --wg-border: #e4e4e4; --wg-error: #dc2626; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* footitalia */ [data-theme="121"] { --wg-bg: #ffffff; --wg-fg: #121212; --wg-muted: #6b7280; --wg-row: #f5f5f7; --wg-accent: #3350b8; --wg-border: #e4e4e4; --wg-error: #dc2626; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* totalfootballanalysis */ [data-theme="125"] { --wg-bg: #ffffff; --wg-fg: #121212; --wg-muted: #6b7280; --wg-row: #f5f5f7; --wg-accent: #f63c91; --wg-border: #e4e4e4; --wg-error: #dc2626; --wg-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: transparent; font-family: var(--wg-font); color: var(--wg-fg); } .widget { background: var(--wg-bg); /* Base text color is set HERE, on the element that carries data-theme — not on . body sits ABOVE the themed scope, so its `color: var(--wg-fg)` resolves against :root (the default light theme) and inherits that dark value into every descendant lacking an explicit color. Harmless on light themes, broken on dark (theme 30). Re-resolving the token on .widget makes all descendants inherit the in-scope themed foreground. */ color: var(--wg-fg); border: 1px solid var(--wg-border); border-radius: 12px; padding: 14px 16px; max-width: 520px; } .widget__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .widget__title { font-size: 15px; font-weight: 600; color: var(--wg-fg); } .widget__meta { font-size: 11px; color: var(--wg-muted); } .widget__loading, .widget__error { font-size: 13px; color: var(--wg-muted); padding: 24px 0; text-align: center; } .widget__error { color: var(--wg-error); } table { width: 100%; border-collapse: collapse; } tbody tr { background: var(--wg-row); border-bottom: 1px solid var(--wg-border); } tbody tr:last-child { border-bottom: 0; } td { padding: 9px 8px; font-size: 13px; vertical-align: middle; /* Default every cell to the themed foreground (team names .col-team and bookie names td.bk had no color and inherited the wrong default). Muted headers and accent-colored .badge cells override this explicitly. */ color: var(--wg-fg); } .col-team { font-weight: 500; } .col-odds { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .badge { display: inline-block; min-width: 56px; text-align: center; padding: 3px 8px; border-radius: 6px; /* 12% tint of the accent for the chip fill — themes flip automatically. */ background: color-mix(in srgb, var(--wg-accent) 12%, transparent); color: var(--wg-accent); font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- H2H multi-bookie table ---- */ table.h2h thead th { font-size: 11px; font-weight: 600; color: var(--wg-muted); text-align: right; padding: 4px 8px 8px; } table.h2h thead th:first-child { text-align: left; } table.h2h td.bk { font-weight: 500; } table.h2h td.col-odds { text-align: right; } /* ---- H2H single-bookie card ---- */ .h2h-bk { font-size: 11px; color: var(--wg-muted); margin-bottom: 6px; } .h2h-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .oc { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--wg-row); border: 1px solid var(--wg-border); border-radius: 8px; padding: 10px 6px; } .oc-label { font-size: 12px; color: var(--wg-fg); text-align: center; } .oc .badge { min-width: 64px; padding: 5px 10px; }