/** * Gridiron Elementor — the LIGHT scheme ("Daylight"). * * The plugin's toggle puts `.sfgi-light` on and its own gridiron.css * flips the --wp--preset--color-- presets and the --sfgi-* tokens. This sheet * is the theme's half of that contract: every --gx-* token the theme's own * sheets paint with is re-pointed here, so the chrome, route panels, cards, * tables and hairlines follow the switch exactly like the block edition. * * Values mirror the block theme's styles/light.json ("Daylight") and the * plugin's own :root.sfgi-light block, so the two demos share one palette. * * Rules of this file: * 1. Token DEFINITIONS first and foremost. A token flip changes nothing in * dark mode by construction; the dark values live in theme.css :root. * 2. Rule-level overrides only where a value cannot be reached by a token: * Elementor bakes widget-data colours into per-post CSS that loads after * the theme, and the kit's globals are literals on .elementor-kit-. * Those selectors are kept together at the bottom, each with the reason. * 3. Brand colours (accent, accent-2, neon, violet, turf, gold) are IDENTICAL * in both schemes as FILLS. Only their use as small TEXT changes, via the * *-ink tokens. * * Load order: enqueued LAST in functions.php. Specificity, not order, is what * beats the kit and the generated post CSS — see the counts noted below. */ :root.sfgi-light { /* ---- the core ramp (parity.css :root literals lose to this on specificity) ---- */ --gx-base: #f4f6fa; --gx-panel: #ffffff; --gx-panel-2: #eef1f7; --gx-line: rgba(6, 12, 24, 0.10); --gx-ink: #0b1220; --gx-muted: #5a6779; --gx-glass: rgba(255, 255, 255, 0.82); /* ---- depth ladder, re-lit for daylight (light.json depth-1..3, ring) ---- No white top-light inset in light: it would paint OVER the local ink hairlines that sit second in the same box-shadow lists. */ --gx-ring: inset 0 0 0 1px rgba(6, 12, 24, 0.10); --gx-d1: 0 1px 2px rgba(6, 12, 24, 0.06), 0 2px 10px rgba(6, 12, 24, 0.05); --gx-d2: 0 8px 24px rgba(6, 12, 24, 0.10), 0 1px 2px rgba(6, 12, 24, 0.06); --gx-d3: 0 18px 44px rgba(6, 12, 24, 0.14), 0 2px 6px rgba(6, 12, 24, 0.06); /* ---- channel tokens: rgba(var(--gx-*-rgb), a) keeps every alpha as written ---- */ --gx-hair-rgb: 6, 12, 24; /* white hairlines/washes -> ink hairlines/washes */ --gx-base-rgb: 244, 246, 250; /* night-base wells and chips -> day base */ --gx-panel-rgb: 255, 255, 255; --gx-panel-2-rgb: 238, 241, 247; --gx-panel-3-rgb: 255, 255, 255; /* the trophy-card gradient top */ --gx-mute-rgb: 90, 103, 121; /* muted-alpha rings/tracks -> day muted */ --gx-ink-rgb: 11, 18, 32; /* ---- drop shadows: the night alpha at roughly a third of the weight ---- */ --gx-shade-20: rgba(6, 12, 24, 0.06); --gx-shade-25: rgba(6, 12, 24, 0.07); --gx-shade-28: rgba(6, 12, 24, 0.08); --gx-shade-30: rgba(6, 12, 24, 0.08); --gx-shade-32: rgba(6, 12, 24, 0.09); --gx-shade-35: rgba(6, 12, 24, 0.10); --gx-shade-40: rgba(6, 12, 24, 0.11); --gx-shade-42: rgba(6, 12, 24, 0.12); --gx-shade-44: rgba(6, 12, 24, 0.12); --gx-shade-45: rgba(6, 12, 24, 0.13); --gx-shade-50: rgba(6, 12, 24, 0.14); --gx-shade-62: rgba(6, 12, 24, 0.17); --gx-shade-65: rgba(6, 12, 24, 0.18); /* ---- named surfaces and inks ---- */ --gx-prose: #2a3546; /* long-form body text; matches the plugin's light --e-global-color-text */ --gx-up: #067a4d; /* win green (turf-ink) */ --gx-down: #b42318; /* loss red — light.json has no red ink; derived, 6.6:1 on white */ --gx-cup-gold: #8a6f1c; /* trophy gold as text (gold-ink) */ --gx-callout-bg: #eef1f7; --gx-tile-bg: #ffffff; --gx-crest-well: #e3e7ee; --gx-on-plate: #0b1220; /* jersey number on the tinted team-mate plate */ --gx-hover-ink: #0b1220; /* filter/sort pill label on hover */ /* ---- brand colours as TEXT (rule 3) ---- */ --gx-accent-ink: #b8400e; --gx-accent-2-ink: #8a6f1c; --gx-gold-ink: #8a6f1c; --gx-turf-ink: #067a4d; --gx-neon-ink: #067a8a; --gx-violet-ink: #4c38b8; color-scheme: light; } /* ---- route-scoped ink aliases --------------------------------------------- The route sheets alias the brand tokens per scope so a widget's Style tab can re-colour one instance (`--gx-route-player-accent` etc.). In dark the *-ink aliases follow that override; in light they must resolve to the day inks, so they are re-pointed on the SAME scope selectors (0,3,0 beats the sheet's 0,1,0 definitions). */ :root.sfgi-light .gx-route-team-root, :root.sfgi-light .gx-route-team-single-hero, :root.sfgi-light .gx-route-team-single-season, :root.sfgi-light .gx-route-team-single-squad { --gx-route-team-accent-ink: var(--gx-accent-ink); --gx-route-team-accent2-ink: var(--gx-accent-2-ink); } :root.sfgi-light .gx-route-game-archive, :root.sfgi-light .gx-route-cup-games { --gx-route-game-accent-ink: var(--gx-accent-2-ink); } :root.sfgi-light .gx-route-player-single { --gx-route-player-accent-ink: var(--gx-accent-ink); --gx-route-player-accent-2-ink: var(--gx-accent-2-ink); --gx-route-player-gold-ink: var(--gx-gold-ink); } /* ---- the one value no token can reach ------------------------------------- The stat/profile tiles sink into the panel with color-mix(base 45%, transparent). In light that is #f4f6fa over #ffffff — the tiles vanish. Keep it TRANSLUCENT: the ::before team glow sits at z-index -1 under isolation:isolate and only shows through a semi-transparent ground. */ :root.sfgi-light .gx-route-player-single-stat-tile, :root.sfgi-light .gx-route-player-single-profile-tile { background-color: rgba(6, 12, 24, 0.05); } /* ========================================================================== ELEMENTOR — kit globals and baked widget-data literals. Elementor writes the kit's globals as literals on `.elementor-kit-` and writes every colour set in a widget's Style tab into `uploads/elementor/css/post-.css`, which loads AFTER this sheet. None of those can follow a token flip, so they are overridden here on specificity. ========================================================================== */ /* The active kit (3166) gives its globals these meanings: primary = the BLAZE accent (#FF5A1F) -> heading titles, icon-list icons, drop caps secondary = blaze bright / amber (#FFC93C) -> post titles, icon-list text, search submit text = ink (#F3F6FB) -> nav items, text editor, captions accent = neon (#00E5FF) -> button fills, read-more The plugin's generic remap in gridiron.css was written for the OLD kit (2778: primary = ink, secondary = muted) and turns the accent into dark ink here. Brand fills do not change with the scheme, so primary and secondary are restated as themselves; the neutral globals map onto the day ramp. (0,2,1) + descendant beats both the kit's (0,1,0) and the plugin's (0,2,1) on load order — this sheet is enqueued after gridiron.css. */ :root.sfgi-light body[class*="elementor-kit-"] { --e-global-color-primary: #ff5a1f; --e-global-color-secondary: #ffc93c; --e-global-color-text: #0b1220; --e-global-color-accent: #00e5ff; --e-global-color-gxbase: #f4f6fa; --e-global-color-gxpanel: #ffffff; --e-global-color-gxpanel2: #eef1f7; --e-global-color-gxline: rgba(6, 12, 24, 0.10); --e-global-color-gxmuted: #5a6779; } /* Widget-data literals. The generated selector shape is `.elementor- .elementor-element.elementor-element- ` = (0,4,0), or (0,4,1) with a trailing `a`. Everything below is (0,5,2) or more so it wins regardless of load order. The values restate the DARK token each literal was a copy of, on the day ramp. */ :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-tb-tile-l, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-row-title, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-card-title, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-ph-title, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .elementor-post__title, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .elementor-post__title a { color: var(--gx-ink); } :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-tb-tile-s, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-team-wall-abbr, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .elementor-post__meta-data, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .elementor-post__excerpt p, :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .elementor-pagination .page-numbers:not(.dots), :root.sfgi-light body.gridiron-elementor .elementor .elementor-element.gx-tb-ft-copy p { color: var(--gx-muted); } :root.sfgi-light body.gridiron-elementor .elementor .elementor-element .gx-news-card { background-color: var(--gx-panel-2); } /* The ghost CTA ("Standings" in the footer): panel-2 fill with white text in the widget data. On the day ramp panel-2 is #eef1f7, so the label goes ink. */ :root.sfgi-light body.gridiron-elementor .elementor .elementor-element.gx-tb-ghost .elementor-button { background-color: var(--gx-panel-2); color: var(--gx-ink); } /* ========================================================================== The player-archive widget prints its own