:root { --bg: #0a0c14; --bg-soft: #131726; --card: #181d31; --card-hover: #212945; --text: #eef1fb; --muted: #98a1c3; --accent: #8b5cff; --accent-2: #00e5c9; /* RGB triplets (set by theme.js) so rgba() tints can track the accent. These literals are the fallback if the script hasn't run yet. */ --accent-rgb: 139, 92, 255; --accent-2-rgb: 0, 229, 201; --ring: rgba(139, 92, 255, 0.5); --radius: 16px; --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); font-synthesis: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.55; } a { color: inherit; text-decoration: none; } /* Mobile safety: keep text legible without OS rescaling, kill the grey tap flash on touch, and never let a stray wide element scroll the page sideways. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Clip horizontal overflow on the ROOT (not ): a non-visible overflow on makes it the scroll container and breaks the sticky sidebar. */ html { overflow-x: clip; } * { -webkit-tap-highlight-color: transparent; } ::selection { background: rgba(var(--accent-rgb), 0.45); color: #fff; } /* Scrollbar (WebKit + Firefox) */ * { scrollbar-width: thin; scrollbar-color: #2c3354 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2c3354; border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #3a4370; } :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; } /* --------------------------------------------------------------------------- Animated ambient background --------------------------------------------------------------------------- */ /* Isolated + paint-contained so the background's animations never trigger a repaint of the page content (which was making the marquees stutter). */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; isolation: isolate; contain: layout paint; } .bg__orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.32; will-change: transform; } /* Calmer backdrop: drop the third (pink) orb so the page reads quieter. */ .bg__orb--3 { display: none; } .bg__orb--1 { width: 560px; height: 560px; top: -200px; right: -120px; background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.5), transparent 70%); } .bg__orb--2 { width: 480px; height: 480px; top: 35%; left: -200px; background: radial-gradient(closest-side, rgba(var(--accent-2-rgb), 0.32), transparent 70%); } .bg__orb--3 { width: 420px; height: 420px; bottom: -160px; right: 18%; background: radial-gradient(closest-side, rgba(255, 92, 184, 0.26), transparent 70%); } .bg__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 80%); } /* Twinkling pixel-star field — two dot grids at different scales, tinted to the theme, that gently pulse. Reads as arcade "character", not noise. */ .bg__stars { position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--accent-2-rgb), 0.9) 1px, transparent 1.6px), radial-gradient(rgba(var(--accent-rgb), 0.8) 1px, transparent 1.6px); background-size: 90px 90px, 140px 140px; background-position: 0 0, 45px 70px; opacity: 0.16; transform: translateZ(0); will-change: opacity; mask-image: radial-gradient(ellipse 95% 80% at 50% 25%, black 35%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 25%, black 35%, transparent 85%); } /* Faint CRT scanlines for a retro-cabinet feel. Plain alpha (no blend mode) so it never forces a full-screen recomposite. */ .bg__scan { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px); } /* A slow diagonal light beam sweeping across — subtle motion that gives the page life without pulling focus. Promoted to its own layer so the blur is rasterized once and the sweep is a cheap GPU transform. */ .bg__beam { position: absolute; top: -60%; left: -30%; width: 80%; height: 220%; transform: rotate(18deg) translateZ(0); background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.10) 45%, rgba(var(--accent-2-rgb), 0.08) 55%, transparent); filter: blur(24px); will-change: transform; } .bg__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); } @media (prefers-reduced-motion: no-preference) { .bg__stars { animation: twinkle 7s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.22; } } .bg__beam { animation: sweep 22s linear infinite; will-change: transform; } @keyframes sweep { from { transform: translateX(-30%) rotate(18deg); } to { transform: translateX(160%) rotate(18deg); } } } /* In light mode the white scanlines + dark dots need flipping to read. */ html[data-mode="light"] .bg__scan { mix-blend-mode: multiply; opacity: 0.4; } html[data-mode="light"] .bg__stars { opacity: 0.22; } @media (prefers-reduced-motion: no-preference) { .bg__orb--1 { animation: drift-1 26s ease-in-out infinite alternate; } .bg__orb--2 { animation: drift-2 32s ease-in-out infinite alternate; } .bg__orb--3 { animation: drift-3 38s ease-in-out infinite alternate; } @keyframes drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-90px, 70px, 0) scale(1.12); } } @keyframes drift-2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(110px, -60px, 0) scale(0.92); } } @keyframes drift-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-70px, -80px, 0) scale(1.08); } } } /* --------------------------------------------------------------------------- Header --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: rgba(10, 12, 20, 0.72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 1.3rem; white-space: nowrap; letter-spacing: -0.01em; } .brand__mark { display: inline-grid; place-items: center; } .brand__planet { display: block; filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.55)); } .brand__name { background: linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand__accent { color: var(--accent-2); } @media (prefers-reduced-motion: no-preference) { .brand:hover .brand__planet { animation: nebula-spin 1.6s ease; } @keyframes nebula-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } } .search { flex: 1; max-width: 420px; margin-left: auto; min-width: 0; } .search input { width: 100%; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--bg-soft); color: var(--text); font-size: 0.95rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); } .site-nav { display: flex; gap: 18px; font-weight: 600; color: var(--muted); white-space: nowrap; } .site-nav a:hover { color: var(--text); } /* --------------------------------------------------------------------------- Hero --------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding: 80px 24px 56px; } .hero__inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .hero__eyebrow { color: var(--accent-2); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; } .hero__title { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.05; margin: 12px 0 16px; font-weight: 900; letter-spacing: -0.02em; } .grad { background: linear-gradient(90deg, var(--accent), var(--accent-2), #ff5cb8, var(--accent)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { color: var(--muted); font-size: 1.1rem; margin: 0 auto 28px; max-width: 520px; } .hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero__glow { position: absolute; inset: -40% 20% auto; height: 380px; background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.32), transparent); filter: blur(24px); z-index: 0; } /* Calm hero: the floating emojis added clutter behind the title — hidden. */ .hero__floaters { display: none; } .hero__floaters--legacy { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .floater { position: absolute; font-size: 2.6rem; opacity: 0.18; filter: blur(0.5px); } .floater--1 { top: 18%; left: 10%; } .floater--2 { top: 60%; right: 12%; font-size: 3.2rem; } .floater--3 { bottom: 12%; left: 22%; font-size: 2.2rem; } .floater--4 { top: 24%; right: 26%; font-size: 1.6rem; } @media (prefers-reduced-motion: no-preference) { /* Headline gradient is now static — the constant pan competed for attention. */ .floater { animation: float 9s ease-in-out infinite; will-change: transform; } .floater--2 { animation-duration: 11s; animation-delay: -3s; } .floater--3 { animation-duration: 13s; animation-delay: -6s; } .floater--4 { animation-duration: 10s; animation-delay: -1.5s; } @keyframes float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); } 50% { transform: translate3d(12px, -22px, 0) rotate(6deg); } } } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; font-family: inherit; cursor: pointer; border: none; transition: transform 0.12s, box-shadow 0.15s, background 0.15s; } .btn--primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #0a0c14; box-shadow: var(--shadow); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(var(--accent-rgb), 0.35); } .btn--ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.12); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } /* --------------------------------------------------------------------------- Filters / chips / sort --------------------------------------------------------------------------- */ .filters { padding: 0 0 18px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { padding: 8px 16px; border-radius: 999px; background: var(--card); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; font-weight: 600; font-size: 0.9rem; font-family: inherit; transition: color 0.15s, background 0.15s, border-color 0.15s; } .chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.18); } .chip.is-active { background: var(--accent); color: #0a0c14; border-color: var(--accent); } .chip__count { opacity: 0.7; font-weight: 500; } .games__tools { display: flex; align-items: center; gap: 14px; } .sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; } .sort select { background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 6px 8px; cursor: pointer; } .sort select:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 1px; } /* --------------------------------------------------------------------------- Game sections & grids --------------------------------------------------------------------------- */ .games { max-width: 1100px; margin: 0 auto; padding: 40px 24px 24px; } .games__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .games__head h2 { margin: 0; font-size: 1.5rem; } .games__count { color: var(--muted); font-size: 0.9rem; } #all-games { padding-bottom: 48px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; } .grid--featured { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* Originals get a highlighted strip */ .originals { border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: calc(var(--radius) + 6px); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-2-rgb), 0.04)), rgba(255, 255, 255, 0.02); padding: 24px; margin-top: 16px; } .grid--originals { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* Horizontal "continue playing" row */ .row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; } .row-scroll > .card { scroll-snap-align: start; } /* Auto-scrolling "New games" marquee — slow, seamless, right-to-left. The JS track holds two identical card sets; translating by -50% lands the second set exactly where the first began. Per-card right margin (no flex gap) keeps that 50% perfectly even, so there is no jump at the loop seam. */ /* These sections stretch the full width of the content column instead of being capped at the 1100px grid width, so they fill the page. Their headings stay aligned with the other (centered) section titles. */ #new-games, #featured, #all-games { max-width: none; } #new-games > .games__head, #featured > .games__head, #all-games > .games__head { max-width: 1100px; margin-left: auto; margin-right: auto; } .marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee__track { display: flex; width: max-content; will-change: transform; } .marquee__track > .card { flex: 0 0 200px; width: 200px; margin-right: 18px; } @media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee-scroll var(--marquee-duration, 120s) linear infinite; } /* Pause on hover/focus so players can read or click a card. */ .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } } @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* --------------------------------------------------------------------------- Cards --------------------------------------------------------------------------- */ .card { position: relative; background: var(--card); border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s; display: flex; flex-direction: column; text-align: left; } .card:hover, .card:focus-visible { transform: translateY(-5px); background: var(--card-hover); border-color: rgba(var(--accent-rgb), 0.55); box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 24px rgba(var(--accent-rgb), 0.18); } .card:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; } .card__thumb { aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: 3.4rem; background: linear-gradient(135deg, var(--card-hover), var(--bg-soft)); overflow: hidden; } .card__thumb--emoji { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-2-rgb), 0.22)), var(--bg-soft); } .card__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; } .card:hover .card__thumb-img, .card:focus-visible .card__thumb-img { transform: scale(1.06); } .card__body { padding: 12px 14px 14px; } .card__title { font-weight: 700; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__cat { color: var(--muted); font-size: 0.8rem; text-transform: capitalize; } .card__desc { color: var(--muted); font-size: 0.82rem; margin: 4px 0 0; } /* Sonsaur-style corner badges (HOT / NEW) */ .card__badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px; border-radius: 7px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); pointer-events: none; } .card__badge--hot { background: linear-gradient(135deg, #ff5c3d, #ff2d78); } .card__badge--new { background: linear-gradient(135deg, #00b894, #00e5c9); color: #06281f; } /* Proximity colour reveal (All games). Cards rest fully grey (desaturated) and regain their true colours as the cursor nears — main.js sets --reveal (0..1) per card from cursor distance. The filter sits on the whole thumb so emoji Originals grey out too. A :hover fallback covers no-JS, and touch devices (no hover) always show true colour. */ .card--tint .card__thumb { position: relative; filter: grayscale(calc(1 - var(--reveal, 0))) brightness(calc(0.72 + 0.28 * var(--reveal, 0))); transition: filter 0.18s ease-out; } .card--tint:hover .card__thumb { filter: none; } @media (hover: none) { .card--tint .card__thumb { filter: none; } } .card__fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 12, 20, 0.65); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--muted); font-size: 1rem; cursor: pointer; transition: transform 0.12s, color 0.15s, border-color 0.15s; } .card__fav:hover { transform: scale(1.12); color: #ff5cb8; border-color: rgba(255, 92, 184, 0.5); } .card__fav.is-fav { color: #ff5cb8; border-color: rgba(255, 92, 184, 0.5); } .card__fav:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; } /* --------------------------------------------------------------------------- Empty state / about / footer --------------------------------------------------------------------------- */ /* Paged "Show more" control for the All games grid. */ .load-more { display: flex; justify-content: center; padding: 28px 0 8px; } .load-more .btn { min-width: 200px; } .empty { text-align: center; color: var(--muted); padding: 40px 0; } .empty__emoji { font-size: 3rem; margin: 0 0 8px; } .empty p { margin: 0 0 16px; } .about { max-width: 760px; margin: 0 auto; padding: 16px 24px 64px; color: var(--muted); } .about h2 { color: var(--text); } .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 28px 24px; text-align: center; color: var(--muted); font-size: 0.9rem; } .site-footer__fine { font-size: 0.8rem; opacity: 0.75; } .site-footer code { color: var(--accent-2); } /* --------------------------------------------------------------------------- Back to top --------------------------------------------------------------------------- */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0a0c14; border: none; font-size: 1.3rem; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.15s, opacity 0.2s; } .to-top:hover { transform: translateY(-3px); } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 800px) { .site-nav { display: none; } } @media (max-width: 640px) { /* Top row: brand left, account badge right (space-between). Search drops to a full-width row below (order: 3). The header "Random" is redundant on mobile — the hero's "Surprise me" covers it — so hide it to free up space. */ .site-header { flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 16px; } .brand { font-size: 1.12rem; min-width: 0; } #random-game { display: none; } .acctmenu { flex: 0 0 auto; } .search { order: 3; flex: 1 1 100%; max-width: none; } /* 16px form controls stop iOS Safari from zooming in when they're focused. */ .search input, .sort select { font-size: 16px; } .hero { padding: 52px 16px 36px; } .hero__sub { font-size: 1rem; } .games { padding-left: 16px; padding-right: 16px; } .originals { padding: 18px 14px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .grid--featured { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .grid--originals { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .row-scroll { grid-auto-columns: 150px; } .marquee__track > .card { flex-basis: 160px; width: 160px; margin-right: 12px; } } @media (max-width: 480px) { .games__head h2 { font-size: 1.3rem; } .hero__eyebrow { font-size: 0.72rem; } /* Two even columns on phones — avoids a lone stretched card at odd widths. */ .grid, .grid--featured, .grid--originals { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Stack hero CTAs full-width so they're easy to thumb-tap. */ .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn { width: 100%; } .card__title { font-size: 0.9rem; } .to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; } } /* --------------------------------------------------------------------------- Light mode — toggled by theme.js via . Overrides the dark palette and the few surfaces that assumed a dark background (white-alpha borders, dark glass bars, the ambient grid/vignette). The accent itself is theme-driven and shared with dark mode. --------------------------------------------------------------------------- */ html[data-mode="light"] { --bg: #eef1f8; --bg-soft: #ffffff; --card: #ffffff; --card-hover: #f3f5fc; --text: #161a2b; --muted: #5c6486; --shadow: 0 12px 30px rgba(26, 31, 64, 0.12); color-scheme: light; } html[data-mode="light"] body { background: var(--bg); } /* Ambient layer: hide the dark vignette, swap the grid to dark hairlines, and calm the orbs so they read as soft tints on white. */ html[data-mode="light"] .bg__vignette { display: none; } html[data-mode="light"] .bg__grid { background-image: linear-gradient(rgba(20, 24, 50, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 24, 50, 0.05) 1px, transparent 1px); } html[data-mode="light"] .bg__orb { opacity: 0.35; } /* Glass surfaces flip from dark-translucent to light-translucent. */ html[data-mode="light"] .site-header { background: rgba(255, 255, 255, 0.78); border-bottom-color: rgba(20, 24, 50, 0.1); } html[data-mode="light"] .search input { border-color: rgba(20, 24, 50, 0.14); } html[data-mode="light"] .site-footer { border-top-color: rgba(20, 24, 50, 0.1); } /* Cards / chips / controls: borders need to be dark-alpha to show on white. */ html[data-mode="light"] .card { border-color: rgba(20, 24, 50, 0.1); } html[data-mode="light"] .chip { border-color: rgba(20, 24, 50, 0.1); } html[data-mode="light"] .sort select { border-color: rgba(20, 24, 50, 0.14); } html[data-mode="light"] .btn--ghost { background: rgba(20, 24, 50, 0.05); border-color: rgba(20, 24, 50, 0.12); } html[data-mode="light"] .btn--ghost:hover { background: rgba(20, 24, 50, 0.1); } html[data-mode="light"] .card__fav { background: rgba(255, 255, 255, 0.82); border-color: rgba(20, 24, 50, 0.12); } /* Scrollbar to suit the lighter canvas. */ html[data-mode="light"] * { scrollbar-color: #c2c8de transparent; } html[data-mode="light"] ::-webkit-scrollbar-thumb { background: #c2c8de; border-color: var(--bg); } html[data-mode="light"] ::-webkit-scrollbar-thumb:hover { background: #a9b1cd; } /* Gradient buttons / chips sit on the accent — keep their text dark for contrast in both modes (the accent stays mid-bright). */ html[data-mode="light"] .chip.is-active { color: #fff; } /* =========================================================================== PERFORMANCE — make the page light The decorative background was the heavy part: drifting blurred orbs, a sweeping blurred "beam" (the sliding colour gradient), twinkling stars and scanlines — all repainting every frame, plus backdrop-filter blur on the sticky bars that re-blurs the page on every scroll. We replace all of it with a cheap STATIC gradient and solid translucent bars. No animation, no blur buffers — dramatically lighter, especially on phones and low-power machines. =========================================================================== */ /* 1. Kill every ambient/decorative animation. */ .bg__orb, .bg__stars, .bg__beam, .floater, .grad { animation: none !important; } /* 2. Remove the expensive blurred decorative layers outright. The sliding colour beam, the orbs (big offscreen blur buffers), stars and scanlines. */ .bg__orb, .bg__beam, .bg__stars, .bg__scan { display: none !important; } /* 3. A cheap static ambient gradient stands in for the orbs. It lives on the already-fixed .bg layer, so it's painted once and never repaints on scroll (no blur buffers, no background-attachment cost). */ .bg { background: radial-gradient(900px 620px at 82% -8%, rgba(var(--accent-rgb), 0.12), transparent 60%), radial-gradient(820px 600px at 0% 28%, rgba(var(--accent-2-rgb), 0.08), transparent 60%); } /* 4. Drop backdrop-filter blur on the sticky surfaces — it forces a full-page re-blur on every scroll frame. Solid translucent fills read the same. */ .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10, 12, 20, 0.92); } .sidebar, .card__fav, .acctmenu__panel, .hp-modal__backdrop, .hp-modal__card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Safety: the account badge must always be present in the header. */ .site-header .acctmenu { display: inline-flex !important; } /* Belt-and-suspenders: stack the hero CTAs on phones so they never overflow, regardless of any later same-specificity rule. */ @media (max-width: 480px) { .hero__actions { flex-direction: column !important; align-items: stretch !important; } .hero__actions .btn { width: 100% !important; } }