/* Hide the "Home" page title on the homepage only */ #post-14 .entry-header { display: none; } /* Mobile footer bar: swap the "Search" icon for a football icon since it links to Games, not search */ .storefront-handheld-footer-bar ul.columns-3 li.search > a::before { content: "\f1e3" !important; font-weight: 900 !important; } /* "Why Players Choose" cards: fade/slide in as the section scrolls into view (progressive enhancement - JS adds js-scroll-reveal to , so cards show normally if JS is off) */ .fme-why-item { transition: opacity 0.6s ease, transform 0.6s ease; } .js-scroll-reveal .fme-why-item { opacity: 0; transform: translateY(24px); } .js-scroll-reveal .fme-why-item.fv-visible { opacity: 1; transform: translateY(0); } .fme-why-item:nth-child(1) { transition-delay: 0s; } .fme-why-item:nth-child(2) { transition-delay: 0.08s; } .fme-why-item:nth-child(3) { transition-delay: 0.16s; } .fme-why-item:nth-child(4) { transition-delay: 0.24s; } .fme-why-item:nth-child(5) { transition-delay: 0.32s; } /* About page: stat strip under the hero */ .fme-stat-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 28px 20px; } .fme-stat-badge { border: 1.5px solid #cd0505; color: #cd0505; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; padding: 8px 18px; border-radius: 30px; } /* About page: section spacing for the checklist groups */ .fme-about-section { padding: 36px 0; } /* About page: checklist items with pop/bounce icon animation on scroll-in */ .fme-check-grid { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; } .fme-check-item { display: flex; align-items: flex-start; gap: 14px; transition: opacity 0.5s ease, transform 0.5s ease; } .fme-check-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #cd0505; color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: transform 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s; } .fme-check-text strong { display: block; } .fme-check-text span { color: #666; } .js-scroll-reveal .fme-check-item { opacity: 0; transform: translateY(14px); } .js-scroll-reveal .fme-check-item .fme-check-icon { transform: scale(0); } .js-scroll-reveal .fme-check-item.fv-visible { opacity: 1; transform: translateY(0); } .js-scroll-reveal .fme-check-item.fv-visible .fme-check-icon { transform: scale(1); } .fme-check-item:nth-child(1) { transition-delay: 0s; } .fme-check-item:nth-child(2) { transition-delay: 0.08s; } .fme-check-item:nth-child(3) { transition-delay: 0.16s; } .fme-check-item:nth-child(4) { transition-delay: 0.24s; } /* Stats page: podium flanked by big Hall of Fame stat tiles */ .fme-podium-section { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 56px; margin: 28px 0 8px; } .fme-hof-tile { background: #f6f1ef; border-radius: 14px; padding: 20px 26px; text-align: center; flex: 0 1 160px; box-sizing: border-box; } .fme-hof-tile:first-child { order: 1; } .fme-podium-wrap { order: 2; margin: 0; } .fme-hof-tile:last-child { order: 3; } /* Below this width the podium + two tiles can't sit in one row cleanly, so stack them full-width instead of letting them wrap into an off-center card */ @media (max-width: 820px) { .fme-podium-section { flex-direction: column; align-items: stretch; } .fme-hof-tile { flex: none; width: 100%; } .fme-podium-wrap { width: 100%; } } .fme-hof-icon-circle { width: 44px; height: 44px; border-radius: 50%; background: #d4a017; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .fme-hof-icon-circle .fme-hof-icon { color: #fff; display: flex; } .fme-hof-icon svg { width: 22px; height: 22px; display: block; } .fme-hof-value { font-size: 2.2rem; font-weight: 800; color: #1c1c1c; line-height: 1; } .fme-hof-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #999; font-weight: 700; margin-top: 6px; } .fme-hof-player { font-size: 0.95rem; font-weight: 700; color: #cd0505; margin-top: 4px; } /* Stats page: podium - ranked by points, real stepped blocks like an actual podium */ .fme-podium-caption { text-align: center; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 700; color: #999; margin-bottom: 14px; } .fme-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; max-width: 460px; margin: 0 auto; } .fme-podium-card { background: #f6f1ef; border-radius: 10px 10px 0 0; padding: 16px 14px 0; text-align: center; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; } .fme-podium-name { font-weight: 700; color: #1c1c1c; font-size: 0.95rem; } .fme-podium-meta { color: #666; font-size: 0.8rem; margin: 2px 0 12px; } .fme-podium-block { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; border-radius: 6px 6px 0 0; color: #fff; font-weight: 800; font-size: 1.4rem; } .fme-podium-1 { order: 2; } .fme-podium-2 { order: 1; } .fme-podium-3 { order: 3; } .fme-podium-1 .fme-podium-block { background: #d4a017; height: 90px; } .fme-podium-2 .fme-podium-block { background: #9aa0a6; height: 62px; } .fme-podium-3 .fme-podium-block { background: #c07a4a; height: 42px; } /* Stats page: inline win% bar under each row's Win % value */ .fme-winbar-track { margin-top: 4px; height: 5px; width: 60px; background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden; } .fme-winbar-fill { height: 100%; background: #cd0505; border-radius: 3px; } /* Stats page: player search box */ .fme-search-wrap { max-width: 320px; margin: 20px auto 16px; padding: 0; } .fme-player-search { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 30px; font-size: 0.9rem; box-sizing: border-box; } .fme-player-search:focus { outline: none; border-color: #cd0505; } /* Stats page: player achievement badges next to a name in the table -- one games-played tier badge (Regular or Iron Man, highest only) plus any goal-scoring milestones (50 Club, Hat-trick Hero), all stacking inline. Two-color system: red for "notable", gold for "elite tier", matching the gold used on the Most games / Top scorer icon circles above. */ .fme-badge-icon { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; cursor: default; } .fme-badge-icon svg { width: 18px; height: 18px; } .fme-badge-regular, .fme-badge-hattrick { color: #cd0505; } .fme-badge-ironman, .fme-badge-fifty { color: #d4a017; } /* Fix: 'Fair and secure' tinted section on About page was centering its content in a fixed 960px box, which doesn't match the theme's actual (responsive) content column width used by the 'What we do' section above it -- causing misalignment on both mobile and desktop. Fix: give this section's inner content the theme's own .col-full responsive column math (same breakpoints/values as Storefront's style.css) instead of a fixed width, so it lines up with the rest of the page at every screen size. */ .fme-about-section.fme-section-tint { padding: 36px 0; } .fme-about-section.fme-section-tint > .wp-block-group__inner-container { max-width: 66.4989378333em; margin-left: auto; margin-right: auto; padding: 0 2.617924em; box-sizing: content-box; width: auto; } @media (max-width: 66.4989378333em) { .fme-about-section.fme-section-tint > .wp-block-group__inner-container { max-width: none; margin-left: 2.617924em; margin-right: 2.617924em; padding: 0; } } @media (max-width: 568px) { .fme-about-section.fme-section-tint > .wp-block-group__inner-container { margin-left: 1.41575em; margin-right: 1.41575em; } } /* Fix: after removing the Elfsight branding badge from the Google Reviews widget on Home, its box now sits with zero space before the grey 'How it works' section on desktop's two-column layout (mobile's carousel dots already provide enough visual breathing room, so this is scoped to desktop only) */ @media (min-width: 769px) { .elfsight-app-fcdd385f-a60e-4813-9716-2df80e4793d1 { margin-bottom: 48px; } } /* Fix: the site's red icon-color rule for the mobile handheld footer bar only applies inside