/* ============================================================ FTG TOPNAV (Shared Styles) Location: /play/games/includes/ftg_topnav.css Purpose: Centralized, game-safe nav styling. Notes: - Scoped under .ftg-nav so game CSS won’t accidentally hit it. - Includes a HARD GATE to prevent any flash (including SVG). ============================================================ */ /* ------------------------------------------------------------ HARD GATE: hide ALL topnav until game explicitly unlocks it Add and remove via JS on "Play" ------------------------------------------------------------ */ body.ftg-nav-locked .ftg-nav{ display:none !important; /* prevents SVG flash */ visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* ------------------------------------------------------------ FIX: Stats modal readability on dark-themed pages (Sudoku etc.) Force a light modal text system regardless of page theme. ------------------------------------------------------------ */ #statsModal{ /* Bootstrap 5 color vars used by modal + text utilities */ --bs-body-color: #212529; /* main text */ --bs-secondary-color: #495057; /* used by some muted-ish text */ --bs-tertiary-color: #6c757d; /* used by other muted text */ } /* Ensure modal base is light + uses the vars above */ #statsModal .modal-content{ background: #fff; color: var(--bs-body-color); } /* Your biggest offenders */ #statsModal .text-muted{ color: var(--bs-secondary-color) !important; } /* Optional: make sure small/helper text isn't too faint */ #statsModal .small.text-muted{ color: var(--bs-secondary-color) !important; } /* ------------------------------------------------------------ Prevent flash until mode decided (ftg-not-ready) ------------------------------------------------------------ */ .ftg-nav.ftg-not-ready .ftg-nav-bar, .ftg-nav.ftg-not-ready .ftg-fab, .ftg-nav.ftg-not-ready .ftg-drawer, .ftg-nav.ftg-not-ready .ftg-drawer-backdrop{ display:none !important; } /* ------------------------------------------------------------ Button icon styling ------------------------------------------------------------ */ .ftg-nav .btn-icon{ --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255,255,255,.15); --bs-btn-active-bg: rgba(255,255,255,.25); padding:.35rem .45rem; line-height:1; } /* ------------------------------------------------------------ Mode handling ------------------------------------------------------------ */ .ftg-nav .ftg-nav-bar{ display:none; } .ftg-nav .ftg-fab{ display:none; } .ftg-nav .ftg-btn-menu{ display:none; } .ftg-nav[data-render="compact"] .ftg-btn-menu{ display:inline-flex; } .ftg-nav[data-render="bar"] .ftg-nav-bar, .ftg-nav[data-render="compact"] .ftg-nav-bar{ display:flex; position:fixed; top:0; left:0; right:0; z-index:1030; } .ftg-nav[data-render="overlay"] .ftg-fab{ display:flex; } /* ------------------------------------------------------------ Nav logo constraints (prevents any “SVG takes over” issues) ------------------------------------------------------------ */ .ftg-nav img{ height:30px !important; width:auto !important; max-width:140px !important; display:block; } /* ------------------------------------------------------------ Overlay pill (FAB) ------------------------------------------------------------ */ .ftg-nav .ftg-fab{ position: fixed; z-index: 1031; align-items:center; gap:8px; border:1px solid rgba(0,0,0,.12); border-radius:999px; padding:8px 12px; background: rgba(25,135,84,.96); color:#fff; box-shadow: 0 8px 20px rgba(0,0,0,.22); backdrop-filter: blur(10px); } .ftg-nav[data-nav-x="left"] .ftg-fab{ left:12px; } .ftg-nav[data-nav-x="center"] .ftg-fab{ left:50%; transform: translateX(-50%); } .ftg-nav[data-nav-x="right"] .ftg-fab{ right:12px; } .ftg-nav[data-nav-y="top"] .ftg-fab{ top: calc(env(safe-area-inset-top, 0px) + 10px); } .ftg-nav[data-nav-y="bottom"] .ftg-fab{ bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); } .ftg-nav .ftg-fab-logo{ height:20px; width:auto; filter:brightness(0) invert(1); opacity:.95; } /* ------------------------------------------------------------ Drawer ------------------------------------------------------------ */ .ftg-nav .ftg-drawer-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.35); z-index:1032; display:none; visibility:hidden; pointer-events:none; } .ftg-nav .ftg-drawer{ position: fixed; left:0; right:0; top:0; z-index:1033; background:#fff; border-radius:0 0 18px 18px; box-shadow:0 18px 40px rgba(0,0,0,.25); max-height: min(78vh, 640px); overflow:hidden; padding-top: env(safe-area-inset-top, 0px); transform: translateY(-110%); transition: transform .25s ease; visibility:hidden; pointer-events:none; } .ftg-nav.ftg-open .ftg-drawer-backdrop{ display:block; visibility:visible; pointer-events:auto; } .ftg-nav.ftg-open .ftg-drawer{ transform: translateY(0); visibility:visible; pointer-events:auto; } .ftg-nav .ftg-drawer-header{ background: linear-gradient(90deg,#198754,#157347) !important; color:#fff !important; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; } .ftg-nav .ftg-drawer-header a{ color:#fff !important; text-decoration:none; } .ftg-nav .ftg-drawer-body{ padding:14px; overflow:auto; -webkit-overflow-scrolling:touch; } body.ftg-no-scroll{ overflow:hidden !important; touch-action:none; } /* ------------------------------------------------------------ Modals: keep readable even if games set global body color ------------------------------------------------------------ */ .ftg-nav .modal-content{ color:#111; /* force readable text inside our modals */ } /* ------------------------------------------------------------ Leaderboard typography - Requires fonts loaded elsewhere (Google Fonts or local). ------------------------------------------------------------ */ .ftg-stats-modal .modal-title{ font-family: "Roboto Slab", ui-serif, Georgia, serif; font-weight: 900; } .ftg-stats-modal .modal-body, .ftg-stats-modal .modal-footer{ font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; font-weight: 500; } /* ------------------------------------------------------------ Backdrop tweak (optional) ------------------------------------------------------------ */ .modal-backdrop.show{ opacity:.30 !important; }