/* Theme Name: FootXtra Kadence Child Description: Dark-default scoreboard theme for FootXtra with a light mode toggle, child of Kadence Template: kadence Version: 3.0 */ /* ============================================ THEME TOKENS - dark is the default (:root). Light mode activates by adding data-fx-theme="light" to , toggled via the switch in the header. ============================================ */ :root{ --fx-bg:#0B1410; --fx-bg-elevated:#101D16; --fx-panel:#101D16; --fx-line:#1B2B22; --fx-line-soft:#16241B; --fx-turf:#1B2B22; --fx-turf-hover:#223427; --fx-ink:#F2F4EF; --fx-ink-dim:#A9B3AC; --fx-ink-faint:#6B7570; --fx-lime:#D4FF3F; --fx-lime-dim:#9FBF2E; --fx-lime-ink:#10210B; --fx-lime-bg:#1B2B12; --fx-red-live:#FF4B4B; --fx-shadow:none; --fx-shadow-sm:none; } html[data-fx-theme="light"]{ --fx-bg:#F7F8F5; --fx-bg-elevated:#FFFFFF; --fx-panel:#FFFFFF; --fx-line:#E3E6DD; --fx-line-soft:#EDEFE9; --fx-turf:#EEF2E8; --fx-turf-hover:#E6EBDD; --fx-ink:#16201A; --fx-ink-dim:#4B5750; --fx-ink-faint:#8A938B; --fx-lime:#5C8A1E; --fx-lime-dim:#467015; --fx-lime-ink:#FFFFFF; --fx-lime-bg:#E8F2D9; --fx-red-live:#D6334B; --fx-shadow:0 1px 2px rgba(20,30,20,0.04), 0 4px 14px rgba(20,30,20,0.06); --fx-shadow-sm:0 1px 2px rgba(20,30,20,0.05); } /* Smooth theme transitions so toggling doesn't feel like a hard flash */ body, .fx-card, .fx-tick-card{ transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } body{ background:var(--fx-bg) !important; color:var(--fx-ink) !important; font-family:'Inter',system-ui,sans-serif; } h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a, .site-title, .site-title a, .page-title, .widget-title, p, span, div, li, label{ color:var(--fx-ink) !important; } a{color:var(--fx-lime-dim) !important;text-decoration:none;} a:hover{color:var(--fx-lime) !important;} .site-header .main-navigation a, .site-header .site-title a, nav a{ color:var(--fx-ink) !important; } .fx-section-head a, .fx-section-head h2{ color:var(--fx-ink) !important; } .site-header, .entry-header, #content, .site, .content-area{ background:var(--fx-bg) !important; } .fx-scoreline{ font-family:'Oswald',sans-serif; } .fx-mono{ font-family:'JetBrains Mono',monospace; } .fx-pulse{ width:7px;height:7px;border-radius:50%;background:var(--fx-red-live); display:inline-block; animation:fx-pulse 1.6s infinite; } @keyframes fx-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} } /* ============================================ THEME TOGGLE SWITCH ============================================ */ .fx-theme-toggle{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--fx-line); background:var(--fx-bg-elevated); border-radius:20px; padding:5px 10px; cursor:pointer; font-size:12px; color:var(--fx-ink-dim); box-shadow:var(--fx-shadow-sm); } .fx-theme-toggle:hover{border-color:var(--fx-ink-faint);} .fx-theme-toggle svg{width:15px;height:15px;flex-shrink:0;} /* ============================================ CRESTS (fallback badges when no logo image) ============================================ */ .fx-crest{ display:inline-flex;align-items:center;justify-content:center; flex-shrink:0;font-family:'Oswald',sans-serif;font-weight:600; border-radius:50%;color:#1A1A1A;letter-spacing:-0.5px; } .fx-crest-sm{width:22px;height:22px;font-size:9px;} .fx-crest-md{width:28px;height:28px;font-size:11px;} .fx-crest-lg{width:36px;height:36px;font-size:13px;} .fx-crest[data-c="1"]{background:#D4FF3F;} .fx-crest[data-c="2"]{background:#5DCAA5;} .fx-crest[data-c="3"]{background:#F0997B;} .fx-crest[data-c="4"]{background:#85B7EB;color:#042C53;} .fx-crest[data-c="5"]{background:#ED93B1;color:#4B1528;} .fx-crest[data-c="6"]{background:#EF9F27;color:#412402;} /* ============================================ CARDS / SURFACES ============================================ */ .fx-card{ background:var(--fx-panel); border:1px solid var(--fx-line); border-radius:10px; box-shadow:var(--fx-shadow); } .fx-tick-card{ background:var(--fx-bg-elevated); border:1px solid var(--fx-line); border-radius:10px; box-shadow:var(--fx-shadow-sm); transition:border-color 0.15s, box-shadow 0.15s; } .fx-tick-card:hover{ border-color:var(--fx-ink-faint); box-shadow:var(--fx-shadow); } .fx-match-row{ border-radius:8px; transition:background-color 0.15s; } .fx-match-row:hover{ background:var(--fx-turf); } .fx-ad-slot{ border:1px dashed var(--fx-line-soft); border-radius:8px; display:flex;align-items:center;justify-content:center; color:var(--fx-ink-faint);font-size:11px;letter-spacing:0.5px;text-transform:uppercase; background:var(--fx-bg-elevated); } /* ============================================ HERO / FEATURED COMPETITION BANNER (used for the World Cup spotlight section) ============================================ */ .fx-hero-banner{ background:linear-gradient(135deg, var(--fx-lime-bg) 0%, var(--fx-bg-elevated) 100%); border:1px solid var(--fx-line); border-radius:12px; box-shadow:var(--fx-shadow); } .fx-hero-badge{ display:inline-flex;align-items:center;gap:6px; background:var(--fx-lime); color:var(--fx-lime-ink); font-family:'Oswald',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; padding:4px 10px; border-radius:20px; } /* ============================================ SPACING & TYPE SCALE All spacing in templates should reference these, not arbitrary pixel values chosen per-component. ============================================ */ :root{ --fx-space-1:4px; --fx-space-2:8px; --fx-space-3:12px; --fx-space-4:16px; --fx-space-5:24px; --fx-space-6:32px; --fx-space-7:48px; --fx-radius:10px; --fx-radius-sm:6px; --fx-max-width:1240px; --fx-gutter:24px; } *{box-sizing:border-box;} /* ============================================ PAGE CONTAINER Every top-level section wraps in this so content never touches the viewport edge and stays aligned to a single consistent max-width. ============================================ */ .fx-container{ max-width:var(--fx-max-width); margin:0 auto; padding:0 var(--fx-gutter); } @media (max-width:700px){ :root{ --fx-gutter:16px; } } /* ============================================ TOP UTILITY BAR (theme toggle row) ============================================ */ .fx-utility-bar{ display:flex; align-items:center; justify-content:flex-end; padding:var(--fx-space-3) 0; } /* ============================================ LIVE TICKER ============================================ */ .fx-ticker-wrap{ border-bottom:1px solid var(--fx-line); background:var(--fx-bg); padding-bottom:var(--fx-space-4); } .fx-ticker-label{ display:flex; align-items:center; gap:var(--fx-space-2); padding:var(--fx-space-3) 0 var(--fx-space-3); } .fx-ticker-label span:last-child{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--fx-ink-faint) !important; font-weight:600; } .fx-ticker{ display:flex; gap:var(--fx-space-3); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:var(--fx-space-1); scrollbar-width:thin; } .fx-ticker-empty{ padding:var(--fx-space-4) 0; color:var(--fx-ink-faint) !important; font-size:13px; } .fx-tick-card{ flex:0 0 auto; min-width:200px; padding:var(--fx-space-3) var(--fx-space-4); scroll-snap-align:start; } .fx-tick-league{ font-size:10px; letter-spacing:0.8px; text-transform:uppercase; color:var(--fx-ink-faint) !important; margin-bottom:var(--fx-space-3); display:block; } .fx-tick-row{ display:flex; align-items:center; gap:var(--fx-space-2); margin-bottom:var(--fx-space-2); } .fx-tick-row:last-of-type{margin-bottom:0;} .fx-tick-team{ font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fx-tick-score{ font-weight:600; font-size:15px; min-width:16px; text-align:right; } .fx-tick-meta{ margin-top:var(--fx-space-3); font-size:11px; font-weight:600; display:flex; align-items:center; gap:var(--fx-space-1); } /* ============================================ AD SLOTS ============================================ */ .fx-ad-leaderboard{height:90px;margin:var(--fx-space-5) 0;} .fx-ad-infeed{height:90px;margin:var(--fx-space-5) 0;} .fx-ad-sidebar{height:250px;margin-bottom:var(--fx-space-5);} /* ============================================ HERO / SPOTLIGHT BANNER ============================================ */ .fx-hero-wrap{margin:var(--fx-space-5) 0;} .fx-hero-banner{padding:var(--fx-space-5);} .fx-hero-head{ display:flex; align-items:center; gap:var(--fx-space-2); margin-bottom:var(--fx-space-4); } .fx-hero-title{ font-family:'Oswald',sans-serif; font-size:19px; font-weight:600; margin:0; color:var(--fx-ink) !important; } .fx-hero-empty{ color:var(--fx-ink-faint) !important; font-size:13px; } .fx-hero-footer{ margin-top:var(--fx-space-4); padding-top:var(--fx-space-4); border-top:1px solid var(--fx-line); } .fx-hero-footer a{font-size:13px;font-weight:600;} /* ============================================ MAIN TWO-COLUMN LAYOUT This is the rule that was missing - content + sidebar side by side on desktop, stacked on mobile. ============================================ */ .fx-main{ display:grid; grid-template-columns:1fr 320px; gap:var(--fx-space-6); margin:var(--fx-space-5) 0 var(--fx-space-7); } @media (max-width:900px){ .fx-main{ grid-template-columns:1fr; gap:var(--fx-space-5); } } .fx-content{min-width:0;} .fx-sidebar{min-width:0;} .fx-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--fx-space-4); } .fx-section-head h2{ font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; margin:0; } .fx-section-head a{font-size:12px;font-weight:600;} /* ============================================ LEAGUE BLOCK + FIXTURE ROWS ============================================ */ .fx-league-block{ margin-bottom:var(--fx-space-5); } .fx-league-title{ display:flex; align-items:center; gap:var(--fx-space-2); padding-bottom:var(--fx-space-3); border-bottom:1px solid var(--fx-line); margin-bottom:var(--fx-space-1); } .fx-league-title span{ font-size:12px; letter-spacing:0.6px; text-transform:uppercase; color:var(--fx-ink-dim) !important; font-weight:600; } .fx-empty-note{ padding:var(--fx-space-4) 0; color:var(--fx-ink-faint) !important; font-size:13px; } .fx-match-row{ display:grid; grid-template-columns:42px 1fr 64px; align-items:center; gap:var(--fx-space-3); padding:var(--fx-space-3) var(--fx-space-2); margin:0 calc(var(--fx-space-2) * -1); border-bottom:1px solid var(--fx-line-soft); } .fx-league-block .fx-match-row:last-child{border-bottom:none;} .fx-match-time{ font-size:12px; border-left:2px solid var(--fx-line); padding-left:var(--fx-space-2); color:var(--fx-ink-faint) !important; } .fx-match-time.is-live{color:var(--fx-red-live) !important;border-color:var(--fx-red-live);font-weight:500;} .fx-match-teams{ display:flex; flex-direction:column; gap:var(--fx-space-2); } .fx-team-line{ display:flex; align-items:center; gap:var(--fx-space-2); } .fx-team-name{ font-size:14px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fx-team-score{ font-size:14px; font-weight:600; min-width:14px; text-align:right; } .fx-match-status{ text-align:right; font-size:11px; font-weight:600; } .fx-match-status.is-live{ color:var(--fx-red-live) !important; display:flex; align-items:center; gap:var(--fx-space-1); justify-content:flex-end; } .fx-round-note{ font-size:10px; color:var(--fx-ink-faint) !important; margin-top:2px; } /* ============================================ SIDEBAR CARDS ============================================ */ .fx-sidebar-card{ padding:var(--fx-space-4); margin-bottom:var(--fx-space-5); } .fx-sidebar-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--fx-space-3); } .fx-sidebar-card-head h3{ font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin:0; } .fx-h2h-desc{ font-size:12.5px; color:var(--fx-ink-dim) !important; line-height:1.6; margin:0 0 var(--fx-space-2) 0; } .fx-h2h-note{ font-size:12px; color:var(--fx-ink-faint) !important; margin:0; } .fx-standings-table{ width:100%; border-collapse:collapse; } .fx-standings-table th{ font-size:10px; color:var(--fx-ink-faint) !important; text-transform:uppercase; letter-spacing:0.4px; font-weight:600; text-align:left; padding-bottom:var(--fx-space-2); border-bottom:1px solid var(--fx-line); } .fx-standings-table th.fx-num{text-align:center;} .fx-standings-table td{ font-size:13px; padding:var(--fx-space-2) 0; border-bottom:1px solid var(--fx-line-soft); } .fx-standings-table tr:last-child td{border-bottom:none;} .fx-standings-table td.fx-num{text-align:center;font-size:12px;color:var(--fx-ink-dim) !important;} .fx-standings-table td.fx-rank{font-family:'Oswald',sans-serif;font-weight:600;width:20px;color:var(--fx-ink-faint) !important;} .fx-standings-table tr.fx-top4 td.fx-rank{color:var(--fx-lime) !important;} .fx-standings-table td.fx-pts{font-weight:600;text-align:center;} .fx-team-cell{display:flex;align-items:center;gap:var(--fx-space-2);} .fx-scorer-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--fx-space-2) 0; border-bottom:1px solid var(--fx-line-soft); } .fx-scorer-row:last-child{border-bottom:none;} .fx-scorer-left{display:flex;align-items:center;gap:var(--fx-space-3);} .fx-scorer-rank{font-family:'Oswald',sans-serif;font-size:12px;color:var(--fx-ink-faint) !important;width:14px;} .fx-scorer-name{font-size:13px;display:block;} .fx-scorer-club{font-size:11px;color:var(--fx-ink-faint) !important;display:block;} .fx-scorer-goals{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:var(--fx-lime) !important;} /* ============================================ SITE HEADER ============================================ */ .fx-site-header{ border-bottom:1px solid var(--fx-line); background:var(--fx-bg); position:sticky; top:0; z-index:100; } .fx-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:var(--fx-space-3) var(--fx-gutter); } .fx-logo{ font-family:'Oswald',sans-serif; font-weight:700; font-size:20px; letter-spacing:0.3px; color:var(--fx-ink) !important; display:inline-flex; align-items:center; gap:var(--fx-space-2); } .fx-logo-dot{ width:8px;height:8px;border-radius:50%; background:var(--fx-lime); flex-shrink:0; } .fx-main-nav{ display:flex; align-items:center; gap:var(--fx-space-2); } .fx-main-nav a{ font-size:13px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:var(--fx-ink-dim) !important; padding:var(--fx-space-2) var(--fx-space-3); border-radius:var(--fx-radius-sm); transition:background-color 0.15s, color 0.15s; } .fx-main-nav a:hover{background:var(--fx-turf);color:var(--fx-ink) !important;} .fx-main-nav a.is-active{color:var(--fx-lime) !important;} .fx-header-actions{ display:flex; align-items:center; gap:var(--fx-space-3); } .fx-burger{ display:none; width:36px;height:36px; align-items:center;justify-content:center; border:1px solid var(--fx-line); border-radius:var(--fx-radius-sm); background:var(--fx-bg-elevated); color:var(--fx-ink); cursor:pointer; } .fx-burger svg{width:18px;height:18px;} @media (max-width:860px){ .fx-main-nav{display:none;} .fx-burger{display:flex;} } /* ============================================ MOBILE MENU OVERLAY ============================================ */ .fx-mobile-menu{ display:none; position:fixed; inset:0; background:var(--fx-bg); z-index:200; flex-direction:column; } .fx-mobile-menu.is-open{display:flex;} .fx-mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--fx-space-3) var(--fx-gutter); border-bottom:1px solid var(--fx-line); } .fx-mobile-nav{ display:flex; flex-direction:column; padding:var(--fx-space-2) var(--fx-gutter); } .fx-mobile-nav a{ padding:var(--fx-space-4) var(--fx-space-1); font-size:17px; font-weight:500; color:var(--fx-ink) !important; border-bottom:1px solid var(--fx-line-soft); } /* ============================================ SITE FOOTER ============================================ */ .fx-site-footer{ border-top:1px solid var(--fx-line); background:var(--fx-bg); padding:var(--fx-space-7) 0 var(--fx-space-5); margin-top:var(--fx-space-7); } .fx-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--fx-space-6); margin-bottom:var(--fx-space-6); } @media (max-width:700px){ .fx-footer-grid{grid-template-columns:1fr;gap:var(--fx-space-5);} } .fx-footer-tagline{ font-size:13px; color:var(--fx-ink-faint) !important; margin-top:var(--fx-space-3); max-width:320px; line-height:1.6; } .fx-footer-col h4{ font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--fx-ink-faint) !important; margin-bottom:var(--fx-space-3); } .fx-footer-col{ display:flex; flex-direction:column; gap:var(--fx-space-2); } .fx-footer-col a{ font-size:13px; color:var(--fx-ink-dim) !important; } .fx-footer-col a:hover{color:var(--fx-lime) !important;} .fx-footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--fx-space-2); padding-top:var(--fx-space-4); border-top:1px solid var(--fx-line-soft); font-size:12px; color:var(--fx-ink-faint) !important; } .fx-footer-attribution{ color:var(--fx-ink-faint) !important; } /* ============================================ TEAMS PAGE GRID ============================================ */ .fx-team-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--fx-space-3); margin-bottom:var(--fx-space-3); } .fx-team-card{ display:flex; flex-direction:column; align-items:center; gap:var(--fx-space-2); padding:var(--fx-space-4) var(--fx-space-3); background:var(--fx-bg-elevated); border:1px solid var(--fx-line); border-radius:var(--fx-radius); text-align:center; transition:border-color 0.15s, transform 0.15s; } .fx-team-card:hover{ border-color:var(--fx-ink-faint); } .fx-team-card-name{ font-size:13px; font-weight:500; color:var(--fx-ink) !important; } .fx-team-card img, .fx-team-card .fx-crest{ width:48px !important; height:48px !important; }