/* ============================================================ GAMING SIDE — neon-cyber overlay ------------------------------------------------------------ Entirely additive. Nothing here changes the work side. The whole gaming experience is driven by ONE class on : -> gaming side -> work side (default) When `mode-gaming` is present we: 1. retint every neobrutalism token to a dark violet/cyan palette 2. hide the work sections, reveal the .gaming-view sections 3. swap the nav + footer link groups The work components are reused (profile-card, stat, stack-card, timeline, contact-card, marquee...) so the gaming side inherits the same neobrutalism styling automatically, just retinted. ============================================================ */ /* ============================================================ 1. PALETTE (neon cyber: deep indigo-black + electric violet + neon-cyan structure) ------------------------------------------------------------ `[class]` is an always-true attribute selector. It only exists to raise specificity to (0,2,1) so this palette reliably beats neo.css's `.dark.theme-orange` rule (0,2,0) and wins regardless of which theme/dark classes are on . ============================================================ */ html.mode-gaming[class] { --background: oklch(16% 0.035 274); /* deep indigo-black */ --secondary-background: oklch(21% 0.045 277); /* panel */ --foreground: oklch(93% 0.020 250); /* soft cool white */ --main: oklch(66% 0.230 300); /* electric violet */ --main-foreground: oklch(14% 0.030 300); /* near-black on violet */ --border: oklch(82% 0.150 200); /* neon cyan structure */ --ring: oklch(82% 0.150 200); --overlay: oklch(0% 0 0 / 0.85); /* glow helpers used by the flourishes below */ --glow-violet: 0 0 22px color-mix(in oklab, var(--main) 60%, transparent); --glow-cyan: 0 0 16px color-mix(in oklab, var(--border) 55%, transparent); color-scheme: dark; } /* footer ships with a light-on-dark inversion that only knows about `.dark`; re-state it for gaming so it stays on-palette. */ html.mode-gaming .footer { background: var(--secondary-background); color: var(--foreground); border-top: var(--border-width) solid var(--border); } /* ============================================================ 2. SHOW / HIDE — flip which side is visible ============================================================ */ /* The gaming sections live in the DOM at all times but stay hidden on the work side. */ .gaming-view { display: none; } html.mode-gaming .gaming-view { display: block; } /* Hide the work sections while on the gaming side. (Listed by their top-level section classes — their markup is never modified.) */ html.mode-gaming .hero, html.mode-gaming .marquee, html.mode-gaming .now, html.mode-gaming .building, html.mode-gaming .about, html.mode-gaming .work, html.mode-gaming .stack, html.mode-gaming .contact { display: none; } /* The dark-mode toggle is meaningless on the always-dark gaming side. */ html.mode-gaming #themeToggle { display: none; } /* ---- nav + footer link groups ---------------------------- */ /* `display: contents` makes the wrapper vanish so the s stay direct flex items of .nav__links (no layout change on the work side). */ .nav__group, .footer__group { display: contents; } .nav__group--gaming, .footer__group--gaming { display: none; } /* hidden on work side */ html.mode-gaming .nav__group--work, html.mode-gaming .footer__group--work { display: none; } /* hidden on gaming side */ html.mode-gaming .nav__group--gaming, html.mode-gaming .footer__group--gaming { display: contents; } /* ============================================================ 3. MODE SWITCH (the Work / Play segmented control in the nav) ============================================================ */ .mode-switch { display: inline-flex; flex-shrink: 0; border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: 2px 2px 0 0 var(--border); overflow: hidden; } .mode-switch__btn { appearance: none; -webkit-appearance: none; border: 0; margin: 0; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--secondary-background); color: var(--foreground); font-family: var(--font-base); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.01em; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .mode-switch__btn + .mode-switch__btn { border-left: var(--border-width) solid var(--border); } .mode-switch__btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* Active segment is derived purely from the class — JS only has to flip that one class. */ html:not(.mode-gaming) .mode-switch__btn--work, html.mode-gaming .mode-switch__btn--play { background: var(--main); color: var(--main-foreground); } /* ============================================================ 4. GAMING SECTION WRAPPERS The inner components are reused work classes; these wrappers just re-supply the section chrome (padding / borders) that the hidden .hero/.marquee/.contact wrappers used to provide. ============================================================ */ .g-hero { position: relative; overflow: hidden; border-bottom: 4px solid var(--border); padding: var(--space-20) 0 var(--space-16); } .g-section { padding: var(--space-20) 0; border-bottom: 4px solid var(--border); } .g-connect { position: relative; overflow: hidden; padding: var(--space-20) 0; } /* gaming marquee — mirror of .marquee, reuses .marquee__track inside */ .g-marquee { background: var(--main); color: var(--main-foreground); border-bottom: 4px solid var(--border); overflow: hidden; padding: var(--space-3) 0; } /* ============================================================ 5. NEON FLOURISHES ============================================================ */ /* Glowing headline on the gaming hero. */ .g-hero .hero__title { text-shadow: var(--glow-violet); } /* Accent fills get a soft outer glow so the neon reads as "lit". */ html.mode-gaming .nb-btn, html.mode-gaming .hl, html.mode-gaming .nb-badge, html.mode-gaming .stat--main, html.mode-gaming .stack-card--main, html.mode-gaming .timeline__card--main, html.mode-gaming .contact-card--main { box-shadow: var(--shadow), var(--glow-violet); } html.mode-gaming .nb-btn:hover { box-shadow: var(--glow-violet); } /* The player card pops off the dark backdrop with a cyan rim-glow. */ .gaming-view .profile-card { box-shadow: var(--shadow-xl), var(--glow-cyan); } /* "Online" status dot — recolour to neon green + gentle pulse. */ .g-status-dot { background: oklch(82% 0.20 150); box-shadow: 0 0 0 3px color-mix(in oklab, oklch(82% 0.20 150) 28%, transparent), 0 0 12px color-mix(in oklab, oklch(82% 0.20 150) 60%, transparent); animation: g-pulse 2.4s ease-in-out infinite; } @keyframes g-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } } /* The decorative star / sun SVGs draw with fill:currentColor, which is black when loaded through . On the dark backdrop we invert them to white and add a neon rim-glow so they read. (Stars sitting on the violet marquee / fact-card keep the work CSS's forced black — they're on a light accent, so we leave those alone.) */ .gaming-view .hero__star, .gaming-view .contact__star, .gaming-view .stack-card__head img, .gaming-view .profile-card__sparkle { filter: invert(1) drop-shadow(0 0 6px color-mix(in oklab, var(--border) 55%, transparent)); } /* Responsive helper grids (used by the trophy row + gear grid). These live in CSS — not inline — so the media queries can win. */ .g-stat-row { grid-template-columns: repeat(4, 1fr); transform: none; margin-bottom: var(--space-10); } .g-gear-grid { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .g-stat-row { grid-template-columns: 1fr 1fr; } .g-gear-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .g-status-dot, .g-live__pulse { animation: none; } /* .marquee__track is shared with the (untouched) work marquee, so scope the stop to gaming only. */ html.mode-gaming .g-marquee .marquee__track { animation: none; } } /* ============================================================ 7. LIVE panel (Discord / Steam / Xbox real-time strip) ============================================================ */ .g-live { background: var(--secondary-background); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow), var(--glow-cyan); padding: var(--space-4) var(--space-5); } .g-live__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-3); } .g-live__pulse { width: 8px; height: 8px; border-radius: 50%; background: oklch(82% 0.20 150); box-shadow: 0 0 10px oklch(82% 0.20 150); animation: g-pulse 2s ease-in-out infinite; } .g-live__updated { margin-left: auto; font-size: 10px; letter-spacing: 0.04em; opacity: 0.55; text-transform: none; } .g-live__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .g-live__row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .g-live__pfp { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: var(--border-width) solid var(--border); overflow: hidden; background: var(--background); box-shadow: 0 0 10px color-mix(in oklab, var(--border) 28%, transparent); } .g-live__pfp img { width: 100%; height: 100%; object-fit: cover; display: block; visibility: hidden; } .g-live__info { flex: 1; min-width: 0; display: grid; gap: 1px; } .g-live__svc { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; } .g-live__val { font-weight: 700; font-size: var(--text-sm); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-live__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in oklab, var(--foreground) 28%, transparent); } .g-live__dot.is-online { background: oklch(82% 0.20 150); box-shadow: 0 0 8px oklch(82% 0.20 150); } .g-live__dot.is-idle { background: oklch(80% 0.16 85); box-shadow: 0 0 8px oklch(80% 0.16 85); } .g-live__dot.is-off { background: color-mix(in oklab, var(--foreground) 22%, transparent); box-shadow: none; } /* ============================================================ 8. LIBRARY — Xbox-style games list (live, from /api/gaming) ============================================================ */ .g-games { display: grid; grid-template-columns: minmax(0, 1fr); /* let cards shrink — no horizontal overflow/swipe */ gap: var(--space-3); } .g-games__msg { text-align: center; padding: var(--space-10); font-family: var(--font-mono); font-size: var(--text-sm); opacity: 0.6; } .g-xgame { display: flex; align-items: center; gap: var(--space-4); background: var(--secondary-background); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: var(--space-3) var(--space-4); transition: transform 120ms ease, box-shadow 120ms ease; } .g-xgame:hover { transform: translate(var(--box-shadow-x), var(--box-shadow-y)); box-shadow: var(--glow-violet); } .g-xgame__cover { width: 58px; height: 58px; flex-shrink: 0; object-fit: cover; border: var(--border-width) solid var(--border); border-radius: var(--border-radius); background: var(--background); } .g-xgame__cover--ph { display: grid; place-items: center; font-family: var(--font-base); font-weight: 800; font-size: 24px; line-height: 1; color: var(--main); background: color-mix(in oklab, var(--main) 16%, var(--secondary-background)); } .g-xgame__main { flex: 1; min-width: 0; display: grid; gap: 7px; } .g-xgame__name { font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-xgame__row { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); } .g-xgame__gs, .g-xgame__ach { display: inline-flex; align-items: center; gap: 5px; opacity: 0.9; } .g-xgame__gs b { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--main); color: var(--main-foreground); font-size: 9px; font-weight: 800; } .g-xgame__gs--none { opacity: 0.45; } .g-xgame__ach svg { color: var(--main); } .g-xgame__pct { margin-left: auto; flex-shrink: 0; font-weight: 800; font-size: var(--text-sm); } .g-xgame__bar { height: 6px; border: var(--border-width) solid var(--border); border-radius: 4px; background: var(--background); overflow: hidden; } .g-xgame__bar > span { display: block; height: 100%; background: var(--main); box-shadow: var(--glow-violet); } .g-xgame--empty .g-xgame__row { opacity: 0.6; } /* Expandable game -> achievements (native
) */ .g-xgame--exp { display: block; padding: 0; } .g-xgame--exp[open] { box-shadow: var(--shadow), var(--glow-violet); } .g-xgame__sum { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; } .g-xgame__sum::-webkit-details-marker { display: none; } .g-xgame__chev { flex-shrink: 0; opacity: 0.6; transition: transform 150ms ease; } .g-xgame--exp[open] .g-xgame__chev { transform: rotate(180deg); } .g-xgame__achwrap { border-top: var(--border-width) dashed color-mix(in oklab, var(--border) 35%, transparent); padding: var(--space-3) var(--space-4) var(--space-4); } .g-ach__msg { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.6; padding: var(--space-2) 0; } .g-ach__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .g-ach { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-2); border: 1px solid color-mix(in oklab, var(--border) 30%, transparent); border-radius: var(--border-radius); opacity: 0.5; } .g-ach.is-unlocked { opacity: 1; border-color: var(--border); background: color-mix(in oklab, var(--main) 8%, transparent); } .g-ach__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: var(--background); border: 1px solid color-mix(in oklab, var(--border) 40%, transparent); } .g-ach__body { flex: 1; min-width: 0; } .g-ach__name { font-weight: 700; font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; overflow-wrap: anywhere; } .g-ach__gs { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--main); } .g-ach__desc { font-size: var(--text-xs); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-ach__tick { flex-shrink: 0; color: oklch(82% 0.20 150); font-weight: 800; } @media (max-width: 480px) { .g-xgame__cover { width: 48px; height: 48px; } .g-xgame__name { font-size: var(--text-sm); } } /* ============================================================ 6. RESPONSIVE (re-supply the mobile padding the hidden work wrappers carried; the inner components keep their own MQs) ============================================================ */ @media (max-width: 760px) { .g-hero { padding: var(--space-12) 0 var(--space-10); } .g-section, .g-connect { padding: var(--space-16) 0; } .g-marquee .marquee__track { font-size: var(--text-sm); gap: var(--space-4); animation-duration: 30s; } .g-marquee .marquee__track img { width: 12px; height: 12px; } } @media (max-width: 480px) { .g-hero { padding: var(--space-10) 0 var(--space-8); } .mode-switch__btn { padding: 0 9px; } .mode-switch__btn .mode-switch__label { display: none; } /* icons only on phones */ .mode-switch__btn svg { width: 16px; height: 16px; } /* The work side hides .stack-list li em at <=480px (decorative "lead" labels). The gaming Arena cards reuse that to hold real VALUES (Role, Hours, Map...), so re-show them in gaming mode only. */ html.mode-gaming .stack-list li em { display: inline-block; } }