/* =========================================================================== Left category sidebar (Lumio-style). Self-contained so it composes with the evolving main.css without collisions. Owns: .layout, .sidebar, and the vertical styling of the category chips that live inside the sidebar. =========================================================================== */ :root { --hp-header-h: 66px; --hp-sidebar-w: 236px; } /* The horizontal clip lives on (see main.css). must keep a visible overflow — any non-visible overflow here makes the scroll container and stops the Browse rail from sticking. */ body { overflow-x: visible !important; } /* Ensure [hidden] always wins so category views can collapse home sections. */ [hidden] { display: none !important; } /* These live in their own sidebar tabs — never as rows on the home screen. */ #originals, #recent { display: none !important; } /* Remove the grayscale "proximity reveal" layer entirely — game thumbnails are always full colour and full brightness, everywhere. */ .card--tint .card__thumb { filter: none !important; } /* --------------------------------------------------------------------------- Polish --------------------------------------------------------------------------- */ /* Anchor jumps (header nav, hero "Browse the arcade ↓") must not tuck a section's heading up under the sticky header. */ main > section[id] { scroll-margin-top: calc(var(--hp-header-h) + 14px); } /* Thin, accent-tinted scrollbar for the sidebar when the list overflows. */ .sidebar { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb, 124, 92, 255), 0.45) transparent; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb, 124, 92, 255), 0.35); border-radius: 999px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb, 124, 92, 255), 0.55); } /* Gentle icon pop on hover/active makes the rail feel more tactile. */ .sidebar .chip__icon { transition: transform 0.14s ease; } .sidebar .chip:hover .chip__icon { transform: scale(1.12); } .sidebar .chip.is-active .chip__icon { transform: scale(1.05); } /* --- Smooth scrolling: freeze decorative animation work during active scroll. enhance.js toggles html.is-scrolling; animations resume the moment you stop, so this is invisible but removes the per-frame compositing that caused the marquee/background scroll jank. */ html.is-scrolling .marquee__track, html.is-scrolling .bg__orb, html.is-scrolling .floater, html.is-scrolling .grad { animation-play-state: paused !important; } /* The header's backdrop-blur is re-sampled every scroll frame — skip it while scrolling (its background is already semi-opaque, so it stays readable). */ html.is-scrolling .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --- Tame the ambient background (idle perf) ------------------------------- A smaller blur radius is dramatically cheaper to raster, and overriding the orb drift to translate-only (no scale) means the blurred layers composite instead of re-rastering every frame. Same gentle motion, a fraction of the cost. (Same @keyframes names as main.css; loaded later, so these win.) */ .bg__orb { filter: blur(46px) !important; will-change: transform; } @keyframes drift-1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-72px, 60px, 0); } } @keyframes drift-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(92px, -52px, 0); } } @keyframes drift-3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-60px, -70px, 0); } } /* --- Reduced-motion safety net: calm everything heavy for users who ask. */ @media (prefers-reduced-motion: reduce) { .marquee__track, .bg__orb, .floater, .grad { animation: none !important; } } /* --- Steady decorative game-icon backdrop (injected by enhance.js) --------- Fixed layer of scattered gaming glyphs behind the content. No animation, so it's free during scroll. Appended after .bg in the DOM, so (both at z-index -1) it paints above the orbs but still behind all page content. */ .hp-bg-icons { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .hp-bg-icons span { position: absolute; line-height: 1; opacity: 0.08; filter: grayscale(0.25); user-select: none; -webkit-user-select: none; } html[data-mode="light"] .hp-bg-icons span { opacity: 0.06; } /* --- Decorative lines for a more structured, polished look ----------------- */ /* Accent bar + gradient underline on each shelf heading. */ .games__head { position: relative; padding-bottom: 12px; align-items: center; } .games__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, rgba(var(--accent-rgb, 124, 92, 255), 0.55), rgba(var(--accent-2-rgb, 0, 229, 201), 0.18) 38%, transparent 72% ); } .games__head h2 { position: relative; padding-left: 14px; } .games__head h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1.05em; border-radius: 999px; background: linear-gradient(180deg, var(--accent, #8b5cff), var(--accent-2, #00e5c9)); } /* Underline under the sidebar "Browse" label. */ .sidebar__title { position: relative; padding-bottom: 10px; } .sidebar__title::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb, 124, 92, 255), 0.5), transparent 75%); } /* Hairline divider above the footer to close the page off cleanly. */ .site-footer { position: relative; } .site-footer::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(680px, 80%); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb, 124, 92, 255), 0.4), transparent); } /* Sidebar gets its own scroll only when it truly overflows. */ .sidebar { overflow-y: auto; overscroll-behavior: contain; } /* Center the search in the header and give it a magnifier icon. */ .site-header .search { margin: 0 auto !important; position: relative; } /* "/" keyboard hint — fades out on focus or once you start typing. */ .site-header .search::after { content: "/"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; font-size: 0.78rem; font-weight: 700; color: var(--muted, #98a1c3); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; pointer-events: none; transition: opacity 0.15s; } .site-header .search:focus-within::after, .site-header .search:has(input:not(:placeholder-shown))::after { opacity: 0; } @media (max-width: 560px) { .site-header .search::after { display: none; } } .site-header .search input { padding-left: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a1c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 15px center; background-size: 16px 16px; } /* Two-column shell: sticky sidebar on the left, scrolling content on the right. */ .layout { display: flex; align-items: flex-start; width: 100%; } .layout > main { flex: 1 1 auto; min-width: 0; /* let the grid shrink instead of overflowing */ } .sidebar { position: sticky; top: var(--hp-header-h); align-self: flex-start; flex: 0 0 var(--hp-sidebar-w); width: var(--hp-sidebar-w); height: calc(100vh - var(--hp-header-h)); overflow-y: auto; overscroll-behavior: contain; padding: 18px 12px 28px; border-right: 1px solid rgba(255, 255, 255, 0.07); background: rgba(10, 12, 20, 0.35); } .sidebar__title { margin: 4px 10px 12px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #98a1c3); } /* Header row holding the "Browse" label and the collapse toggle. */ .sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar__head .sidebar__title { margin: 4px 0 12px; } .sidebar__toggle { flex: none; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; line-height: 1; margin-bottom: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--muted, #98a1c3); font: inherit; font-size: 1rem; font-weight: 700; transition: background 0.14s, color 0.14s, border-color 0.14s; } .sidebar__toggle:hover { background: rgba(255, 255, 255, 0.1); color: var(--text, #eef1fb); } html[data-mode="light"] .sidebar__toggle { background: rgba(20, 24, 50, 0.05); border-color: rgba(20, 24, 50, 0.1); } /* Collapsed rail: narrow sidebar, icons only and smaller, labels/counts hidden. */ .sidebar.is-collapsed { flex-basis: 58px; width: 58px; padding-left: 8px; padding-right: 8px; } .sidebar.is-collapsed .sidebar__head { justify-content: center; } .sidebar.is-collapsed .sidebar__title { display: none; } .sidebar.is-collapsed .sidebar__toggle { margin-bottom: 4px; } .sidebar.is-collapsed .chip { justify-content: center; gap: 0; padding: 8px 0; } .sidebar.is-collapsed .chip__label, .sidebar.is-collapsed .chip__count { display: none; } .sidebar.is-collapsed .chip__icon { width: auto; font-size: 0.9rem; } /* The category container is reused from the top-bar chips, but laid out vertically. */ .sidebar .chips { display: flex; flex-direction: column; gap: 3px; padding: 0; } /* Reset the pill look the top-bar .chip would otherwise impose. */ .sidebar .chip { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--muted, #98a1c3); font: inherit; font-weight: 600; font-size: 0.95rem; text-align: left; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s; } .sidebar .chip:hover { background: rgba(255, 255, 255, 0.05); color: var(--text, #eef1fb); } .sidebar .chip:active { transform: translateX(1px); } /* Selected category tracks the active accent theme. */ .sidebar .chip.is-active { color: #fff; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-2-rgb), 0.55)); border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.3); } .sidebar .chip__icon { flex: none; width: 22px; font-size: 1.1rem; line-height: 1; text-align: center; } .sidebar .chip__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Count is hidden by default — it only appears on the open (active) category. */ .sidebar .chip__count { flex: none; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; opacity: 0.9; display: none; } .sidebar .chip.is-active .chip__count { display: inline; } /* Home never shows a count, even when it's the active tab. */ .sidebar .chip[data-cat="all"] .chip__count { display: none; } /* --------------------------------------------------------------------------- Mobile: sidebar collapses to a horizontal, sticky, scrollable strip. --------------------------------------------------------------------------- */ @media (max-width: 900px) { /* Stack the sidebar above the content. `align-items: stretch` is essential: without it the column keeps the base `flex-start`, so

shrinks to its content width and the hero collapses to nothing. */ .layout { flex-direction: column; align-items: stretch; } .layout > main { width: 100%; } .sidebar { position: sticky; top: var(--hp-header-h); z-index: 15; flex: none; width: 100%; height: auto; padding: 10px 12px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(10, 12, 20, 0.85); backdrop-filter: blur(10px); } .sidebar__title { display: none; } .sidebar .chips { flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; } .sidebar .chips::-webkit-scrollbar { display: none; } .sidebar .chip { width: auto; flex: 0 0 auto; border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, 0.05); } .sidebar .chip__label { white-space: nowrap; } } /* --------------------------------------------------------------------------- Light mode: dark-glass sidebar → light surfaces, dark hairline borders. --------------------------------------------------------------------------- */ html[data-mode="light"] .sidebar { background: rgba(255, 255, 255, 0.55); border-right-color: rgba(20, 24, 50, 0.1); } html[data-mode="light"] .sidebar .chip:hover { background: rgba(20, 24, 50, 0.05); } @media (max-width: 900px) { html[data-mode="light"] .sidebar { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(20, 24, 50, 0.1); } html[data-mode="light"] .sidebar .chip { background: rgba(20, 24, 50, 0.05); } }