/* ============================================================================= DINDI & PILVI GAMES — style.css Theme-Aware Design System All colours flow from CSS custom properties set by setTheme() in main.js. No #000000. No hardcoded theme colours outside the :root / theme blocks. ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── 1. CSS CUSTOM PROPERTY DESIGN TOKENS Blue is the default; setTheme() overwrites these on at runtime. ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── Page background ── */ --bg-color: #f0f9ff; /* ── Primary theme palette (set per-theme by JS) ── */ --theme-light: #e0f2fe; /* light tint — backgrounds, fills */ --theme-mid: #bae6fd; /* mid tint — borders, inputs */ --theme-strong: #38bdf8; /* strong tint — active borders, accents */ --theme-dark: #0c4a6e; /* dark shade — headings, icon colours */ --theme-darker: #082f49; /* darkest — hover states */ --theme-text: #0c4a6e; /* body text on theme backgrounds */ /* ── Semantic / functional colours (theme-neutral) ── */ --success-color: #22c55e; --danger-color: #ef4444; --danger-dark: #dc2626; --neutral-dark: #475569; --neutral-darker: #334155; /* ── Typography ── */ --font-main: 'Nunito', system-ui, -apple-system, sans-serif; /* ── Shared radii & shadows ── */ --radius-xl: 30px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --card-shadow: 0 8px 24px rgba(0,0,0,0.07); --card-shadow-hover: 0 16px 32px rgba(0,0,0,0.12); /* Aliases kept for backward compatibility with game files */ --border-radius-lg: var(--radius-xl); --border-radius-md: var(--radius-lg); /* ── Nav logo size ────────────────────────────────────────────────── nav height is fixed (54px mobile / 60px desktop, set in the `nav` rule below) and includes its own 3px border-bottom (box-sizing: border-box), so the real vertical space available to centre the logo in is nav-height MINUS 3px: mobile: 54px nav → 51px usable desktop: 60px nav → 57px usable Pick ONE of the three presets below by uncommenting it (comment out whichever is currently active) — do not exceed the "usable" figures above or the logo will visually touch/overlap the border. PRESET A — Comfortable (clear breathing room, safest default) */ --logo-h-mobile: 49px; --logo-h-desktop: 55px; /* Width ceiling — stops a wide/landscape logo from crashing into the search box or hamburger icon. Loosened slightly from the old fixed 190px/230px since a taller logo needs more width to stay in proportion. If your logo still looks smaller/shorter than the height above suggests, IT IS HITTING THIS CAP — raise it. */ --logo-maxw-mobile: 210px; --logo-maxw-desktop: 260px; } /* ───────────────────────────────────────────────────────────────────────────── 2. THEME PALETTES setTheme() in main.js writes matching --theme-* variables onto :root. These body classes are also set so pure-CSS fallback works without JS. ───────────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── THEME PALETTE KEY --theme-light = very pale tint (page bg, card fills) --theme-mid = dot colour (nav border, search border) --theme-strong = THE brand colour used for all card borders & header band Matches the exact dot colours: blue #bfdbfe, pink #fbcfe8, green #bbf7d0, yellow #fed7aa — soft, consistent palette. --theme-accent = saturated shade for timer bar, active focus rings --theme-dark = dark shade for text, icon tints, button backgrounds --theme-darker = darkest shade for hover states --theme-text = body-level text colour (never black) ─────────────────────────────────────────────────────────────────────────── */ body.theme-blue { --bg-color: #f0f9ff; --theme-light: #e0f2fe; --theme-mid: #bae6fd; --theme-strong: #bfdbfe; /* blue dot colour — borders & header band */ --theme-accent: #38bdf8; /* saturated blue — timer, focus rings */ --theme-dark: #1e3a5f; --theme-darker: #0f2240; --theme-text: #1e3a5f; } body.theme-pink { --bg-color: #fdf2f8; --theme-light: #fce7f3; --theme-mid: #fbcfe8; --theme-strong: #fbcfe8; /* pink dot colour — borders & header band */ --theme-accent: #f472b6; /* saturated pink — timer, focus rings */ --theme-dark: #831843; --theme-darker: #500724; --theme-text: #831843; } body.theme-green { --bg-color: #f0fdf4; --theme-light: #dcfce7; --theme-mid: #bbf7d0; --theme-strong: #bbf7d0; /* green dot colour — borders & header band */ --theme-accent: #22c55e; /* saturated green — timer, focus rings */ --theme-dark: #14532d; --theme-darker: #052e16; --theme-text: #14532d; } body.theme-yellow { --bg-color: #fefce8; --theme-light: #fef9c3; --theme-mid: #fde047; --theme-strong: #fed7aa; /* orange/yellow dot — borders & header band */ --theme-accent: #f59e0b; /* saturated amber — timer, focus rings */ --theme-dark: #713f12; --theme-darker: #431407; --theme-text: #713f12; } /* ───────────────────────────────────────────────────────────────────────────── 3. GLOBAL RESET & BODY ───────────────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--font-main); background-color: var(--bg-color); color: var(--theme-text); display: flex; flex-direction: column; min-height: 100vh; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; transition: background-color 0.35s ease, color 0.35s ease; } /* ───────────────────────────────────────────────────────────────────────────── 4. SESSION TIMER PROGRESS BAR ───────────────────────────────────────────────────────────────────────────── */ .timer-container { width: 100%; height: 6px; background: var(--theme-light); position: fixed; top: 0; left: 0; z-index: 1100; transition: background 0.35s ease; } #timer-progress { height: 100%; background: var(--theme-accent, var(--theme-strong)); width: 100%; transition: width 1s linear, background 0.35s ease; } /* ───────────────────────────────────────────────────────────────────────────── 5. NAVIGATION ───────────────────────────────────────────────────────────────────────────── */ nav { width: 100%; height: 54px; /* Sit directly below the 6px timer progress bar */ margin-top: 6px; padding: 0 15px; background: rgba(255,255,255,0.97); backdrop-filter: blur(6px); box-shadow: 0 2px 12px rgba(0,0,0,0.05); border-bottom: 3px solid var(--theme-strong); z-index: 1000; display: flex; flex-wrap: nowrap; align-items: center; /* vertical centring of all nav children */ position: relative; gap: 8px; overflow: visible; /* allow theme-dot hover glow to show */ transition: border-color 0.35s ease; } .nav-left { cursor: pointer; white-space: nowrap; /* Mobile: flex:1 pushes search + hamburger to the far right. Desktop: overridden below to flex:0 so the logo only takes its natural width. */ flex: 1 0 auto; min-width: 0; display: flex; align-items: center; } .site-logo { display: block; width: auto; height: var(--logo-h-mobile); max-width: min(var(--logo-maxw-mobile), 46vw); object-fit: contain; } /* Search wrapper — collapses to icon-only on mobile; never pushes other nav items */ .search-wrapper-header { display: flex; align-items: center; justify-content: flex-end; gap: 5px; /* Width tracks the button (≈44px) + input when open; never shrinks below button */ width: auto; flex-shrink: 0; min-width: 0; overflow: hidden; } .search-trigger-btn { background: var(--theme-mid) !important; border: none !important; font-size: 1.1rem !important; padding: 6px 10px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; flex-shrink: 0 !important; line-height: 1 !important; transform: none !important; transition: background 0.35s ease !important; } .search-trigger-btn:hover { background: var(--theme-strong) !important; transform: none !important; } #game-search { width: 0; opacity: 0; visibility: hidden; height: 40px; padding: 0; font-size: 1rem; font-weight: 700; font-family: var(--font-main); border: 0 solid transparent; border-radius: 20px; outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--theme-dark); /* Constrain expansion so it can never exceed available nav space */ max-width: min(170px, calc(100vw - 160px)); } #game-search::placeholder { color: var(--theme-strong); font-weight: 400; opacity: 0.7; } .search-wrapper-header.search-open #game-search { width: clamp(80px, 26vw, 150px); opacity: 1; visibility: visible; padding: 0 12px; border: 2px solid var(--theme-mid); background: white; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE ONLY — hamburger button + full-screen vertical panel Hidden on desktop via display:none on #menu-toggle ═══════════════════════════════════════════════════════════════════════════ */ /* Hamburger button — mobile only (hidden on desktop below). All global `button { ... }` rules are overridden here with !important so the hamburger is never affected by the shared button base style. */ #menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: none !important; box-shadow: none !important; font-size: 1.8rem !important; color: var(--theme-dark) !important; cursor: pointer !important; padding: 4px 8px !important; margin: 0 !important; flex-shrink: 0 !important; line-height: 1 !important; border-radius: 0 !important; transform: none !important; transition: color 0.35s ease !important; /* Ensure it is always in the nav flow */ position: static !important; } #menu-toggle:hover { background: none !important; transform: none !important; color: var(--theme-darker) !important; } /* ─── Mobile nav panel ──────────────────────────────────────────────────── Hidden by default. JS adds .active to show it. Full-width, covers entire viewport below the nav bar. position:fixed is safe here because this element is OUTSIDE