. Scoped to that * wrapper so casino lists, layout tables and other on-page tables are never * touched. * * The table is a self-contained card with its OWN surface/text colours, so it * stays readable regardless of the page background (light sites and the dark * ones — gamblesir, cassinoanalise — alike). The header takes each site's * brand colour from --main-focus-color (set per overview in * resources/overviews//theme/colors.blade.php), darkened by a fixed * overlay so white header text stays readable on every palette. */ .article-table { --at-surface: #ffffff; /* table card background */ --at-surface-fade: rgba(255, 255, 255, 0); /* same colour, 0 alpha — scroll-shadow cover */ --at-edge-shadow: rgba(0, 0, 0, 0.16); /* scroll-affordance shadow */ --at-border: #e3e8ef; --at-brand: var(--main-focus-color, #1f2a44); /* per-site brand; slate fallback */ --at-head-fg: #ffffff; --at-stripe: #f6f8fb; --at-hover: #eef2f8; --at-text: #243044; --at-radius: 12px; display: block; width: 100%; margin: 1.75rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; color: var(--at-text); background-color: var(--at-surface); border: 1px solid var(--at-border); border-radius: var(--at-radius); /* CSS-only horizontal-scroll affordance: the inner edge shadows appear only while there is more table to scroll to, hinting "swipe me" on mobile. The cover gradients use the surface colour so they blend on light AND dark. */ background-image: linear-gradient(90deg, var(--at-surface) 30%, var(--at-surface-fade)), linear-gradient(90deg, var(--at-surface-fade), var(--at-surface) 70%), radial-gradient(farthest-side at 0 50%, var(--at-edge-shadow), transparent), radial-gradient(farthest-side at 100% 50%, var(--at-edge-shadow), transparent); background-repeat: no-repeat; background-position: left center, right center, left center, right center; background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } .article-table table { width: 100%; margin: 0; border-collapse: collapse; background: transparent; /* let the container surface show through */ color: inherit; font-size: 0.95rem; line-height: 1.5; } .article-table th, .article-table td { min-width: 7rem; /* forces a graceful scroll instead of crushing columns */ padding: 0.8rem 1.1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--at-border); } .article-table thead th { /* Brand colour darkened by a 45% overlay so white header text always clears WCAG-AA contrast on every site palette — the bright green (#15DB95) is the tightest at ~5.5:1; all others are higher. */ background-color: var(--at-brand); background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)); color: var(--at-head-fg); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; /* headers are short — keep them on one line */ } .article-table tbody tr:nth-child(even) { background: var(--at-stripe); } .article-table tbody tr:hover { background: var(--at-hover); } .article-table tbody tr:last-child td { border-bottom: 0; } /* Let the first column (usually a label) breathe a little more. */ .article-table th:first-child, .article-table td:first-child { font-weight: 600; } /* Dark-themed sites (near-black wrapper, light text): give the table a matching dark surface so it reads natively instead of as a glaring white card. The brand header still works — gold (#C49B66) at the 45% overlay is ~7:1 on white. Hook is the per-overview body id (``). */ body#gamblesir .article-table, body#cassinoanalise .article-table { --at-surface: #1e1e20; --at-surface-fade: rgba(30, 30, 32, 0); --at-edge-shadow: rgba(0, 0, 0, 0.55); --at-border: rgba(255, 255, 255, 0.12); --at-stripe: #26262a; --at-hover: #2c2c31; --at-text: #e7e7ea; } @media (max-width: 600px) { .article-table { margin: 1.25rem 0; border-radius: 10px; } .article-table table { font-size: 0.9rem; } .article-table th, .article-table td { min-width: 6rem; padding: 0.65rem 0.85rem; } }