/* Fonts are loaded with tags in each page's instead of @import here. An @import cannot start downloading until this file has itself downloaded and parsed, which delayed every page's first paint. */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; } body { min-height: 100vh; margin: 0; padding: 0; background: linear-gradient(#181818, #111111); color: #dddddd; font-family: "Lexend Deca", sans-serif; scroll-behavior: smooth; overflow-x: hidden; } body::after { content: ""; position: fixed; top: 0; left: 0; width: 200%; height: 200%; background: radial-gradient(circle at center, #ffffff10, transparent); animation: rotate 30s linear infinite; z-index: -1; } header { position: sticky; top: 0; display: flex; justify-content: center; background: linear-gradient(#00000070 30%, transparent 90%); align-items: center; padding: 20px 30px; margin-bottom: 20px; z-index: 10; } header>div { width: 100%; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); } nav { display: flex; gap: 10px; align-items: center; } .nav-wrapper { background: rgba(43, 43, 43, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 5px; display: flex; justify-content: center; max-width: 100%; width: fit-content; margin: 0 auto; box-sizing: border-box; } .name { margin: 0 0 5PX 0; font-size: 1.3rem; } .job { margin: 0; font-size: 0.8rem; opacity: .6; } nav>a { text-align: center; min-width: 90px; padding: 12px 20px; border-radius: 100px; list-style: none; transition: all 0.2s ease-in-out; white-space: nowrap; } nav>a.selected { position: relative; background-color: #37373757; } nav>a.selected::before { content: ''; position: absolute; width: 20px; height: 2px; top: -7px; left: 40%; background-color: #dddddd; } nav>a.selected::after { content: ''; position: absolute; width: 25px; height: 6px; top: -7px; right: 35%; background-color: #ffffff; filter: blur(10px); } nav>a:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 15px #ffffff33; transform: translateY(-2px); } a { text-decoration: none; color: #dddddd; } .social-links { display: flex; justify-content: end; gap: 10px; } .social-links>a { font-size: 0.8rem; border-radius: 100px; padding: 15px; background-color: transparent; transition: background-color .2s ease-in-out; } .social-links>a:hover { background-color: #2b2b2b; } .social-toggle { display: none; margin-left: 10px; background-color: #2b2b2b; color: #fff; border-radius: 50%; padding: 8px 12px; cursor: pointer; font-size: 1rem; user-select: none; transition: background 0.2s ease; } main { width: 100%; } .social-toggle:hover { background-color: #444; } .window-outline { -webkit-backdrop-filter: none; backdrop-filter: none; outline-offset: -1px; background-image: radial-gradient(circle farthest-side at 50% 0, #7a7a7a23 1%, #0000); border-radius: 24px; outline: 1px solid #f2f2f226; padding: 8px; overflow: hidden; box-shadow: inset 0 0 8px #0006, 0 0 60px #0003, 0 30px 120px #000c; margin: 0 auto 150px auto; max-width: 80vw; width: max-content; } .window-glow { background-image: linear-gradient(to right, #0000 10%, #fff 50%, #0000 90%); height: 1px; margin-bottom: -1px; } .main-window { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid #f2f2f24d; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 10px #0000001a, 0 0 12px #0006; } .window-bar { z-index: 5; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); background-image: linear-gradient(to right, #f2f2f21a, #acacac80, #f2f2f21a); border-top-left-radius: 16px; border-top-right-radius: 16px; justify-content: space-between; align-items: center; height: 40px; padding-left: 20px; padding-right: 12px; display: flex; box-shadow: 0 10px 20px 4px #0003; } .window-dots-wrapper { grid-column-gap: 10px; display: flex; } .dot { background-color: #f46b5d; border-radius: 6px; width: 12px; height: 12px; } .dot.red { border: 1px solid #10101040; border-radius: 100px; box-shadow: 0 0 20px 2px #f46b5d; } .dot.yellow { background-color: #f9bd4e; border: 1px solid #10101040; border-radius: 100px; box-shadow: 0 0 20px 2px #f9bd4e; } .dot.green { background-color: #57c353; border: 1px solid #10101040; border-radius: 100px; box-shadow: 0 0 20px 2px #57c353; } .subtext-hero { position: relative; display: inline-block; overflow: hidden; color: inherit; font-family: PP Neue Montreal, sans-serif; font-size: 1.3rem; font-weight: 450; margin: 20px 0; filter: drop-shadow(0 0 10px #ffffff33); } .subtext-hero.serif { position: relative; display: inline; font-family: PP Neue Montreal, sans-serif; background: linear-gradient(120deg, rgba(138, 42, 194, 0.8) 0%, rgb(179, 66, 255) 50%, rgba(138, 42, 194, 0.8) 100%); filter: drop-shadow(0 0 10px rgb(153, 0, 255)); background-repeat: no-repeat; background-size: 200% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 4s infinite; } .main-window:hover>.window-content>.window-text>.browser { transform: translateY(5%); } .main-window.gradient-hover:hover .window-content::after { opacity: 1; } .window-content > * { position: relative; z-index: 2; } .window-content::after { content: ""; position: absolute; inset: 0; background: radial-gradient(at top, #70339470, transparent); opacity: 0; transition: opacity .2s ease-in-out; z-index: 1; pointer-events: none; } .browser { transform: translateY(20%); width: 100%; min-width: 200px; max-height: 500px; display: flex; flex-direction: column; background-color: #181818; padding: 2px; border-radius: 10px; overflow: hidden; transition: all .3s ease; } .browser-tab { border-radius: 10px 5px 0 0; width: 200px; height: 30px; padding: 8px; background-color: #242424; } .address-bar { width: 100%; height: 30px; padding: 8px; background-color: #111111; border-radius: 5px; color: #a8a8a8; font-size: 0.8rem; font-family: PP Neue Montreal, sans-serif; letter-spacing: 1px; } .navigation-bar i { opacity: 0.6; width: 20px; } .navigation-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px; background-color: #242424; border-radius: 0 0 10px 10px; gap: 10px; } .nav-buttons { display: flex; width: 100px; justify-content: space-around; align-items: center; opacity: 0.6; } .browser img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .game-name { letter-spacing: normal; font-weight: 500; font-size: 1.3rem; margin: 0; padding: 5px 0 10px 0; text-align: center; width: 100%; position: relative; display: inline-block; vertical-align: middle; font-family: PP Neue Montreal, sans-serif; background: linear-gradient(120deg, rgba(78, 78, 78, 0.5) 0%, rgb(255, 255, 255) 50%, rgba(78, 78, 78, 0.5) 100%); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.548)); background-repeat: no-repeat; background-size: 200% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 4s infinite; } @keyframes shine { 0% { background-position: 100% 0; } 50% { background-position: 0% 0; } 100% { background-position: 100% 0; } } .game-icon { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); display: flex; width: 100%; } .text-hero { text-align: center; letter-spacing: -2px; text-shadow: 0 5px 10px #0057ff26, 0 -5px 10px #ff5a001a, 0 -5px 25px #ffffff4d; font-family: PP Neue Montreal, sans-serif; font-size: 5rem; font-weight: 500; line-height: 110%; margin: 0 0 5vh 0; } .text-hero.serif { background-image: linear-gradient(to bottom, #c560ff 50%, #ad20ff77 90%); letter-spacing: -2px; text-shadow: 0 5px 15px #0057ff1a, 0 -5px 15px #9900ff8c, 0 0 30px #58009271; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; padding-right: 12px; font-family: Gloock, sans-serif; font-style: italic; font-weight: 400; } .window-content { padding: 10vh 5vw; overflow: hidden; } .first-wrapper { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100dvh; } .scroll-down { text-align: center; color: #fff; font-size: 1rem; animation: bounce 2s infinite; opacity: 0.5; } .fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease-out forwards; animation-delay: 0.2s; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } } .icon { background-image: linear-gradient(to bottom, #c560ff 50%, #ad20ff77 90%); text-shadow: 0 5px 15px #0057ff1a, 0 -5px 15px #9900ff8c, 0 0 30px #58009271; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; padding-right: 12px; } .hover { transition: all .3s ease-in-out; z-index: 10; } .hover:hover { z-index: 20; transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(176, 41, 255, 0.267)); cursor: pointer; } @media (max-width: 760px) { .browser { width: 100%; } .social-links-wrapper { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; flex-direction: column; gap: 5px; width: max-content; } nav { width: 100%; } .social-toggle { display: block; font-size: 0.8rem; border-radius: 100px; padding: 15px; background-color: #2b2b2b60; backdrop-filter: blur(20px); color: #dddddd; cursor: pointer; user-select: none; position: relative; z-index: 20; } .social-links { display: none; flex-direction: column; gap: 10px; margin-top: 5px; background: rgb(43, 43, 43); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: 15px 20px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px #222222; position: absolute; top: 55px; right: 0; z-index: 10; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; } #social-toggle:checked+.social-toggle+.social-links { display: flex; opacity: 1; transform: translateY(0); animation: fadeIn 0.3s ease forwards; } #social-toggle:not(:checked)+.social-toggle+.social-links.visible { animation: fadeOut 0.3s ease forwards; } .social-links>a { display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 0.9rem; color: #fff; text-decoration: none; padding: 10px 15px; border-radius: 10px; transition: background 0.2s ease; } .social-links>a:hover { background-color: rgba(255, 255, 255, 0.1); } } @media (max-width: 600px) { .window-outline { width: 100% !important; max-width: 600px !important; } header p { display: none; width: 0; } .text-hero { font-size: 3rem; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); visibility: hidden; } } /* ============================================================ Games grid - the cards are built by files/games.js Add or edit a game there, not here. ============================================================ */ .games-grid { margin-top: 60px; display: flex; align-items: flex-start; justify-content: center; gap: 20px; flex-wrap: wrap; } /* Beats the max-width:600px mobile rule above through specificity, the same way the old inline styles did. */ .games-grid .game-card { display: inline-block; margin: 0; width: 250px !important; min-width: 250px !important; max-width: 250px !important; } .games-grid .game-card .game-name { padding: 5px 0 2px 0; } .game-plays { text-align: center; padding: 6px 0 16px 0; } /* The play count is the headline number on a card, so it is styled as a lit badge rather than a caption. `shine` is the same keyframe the game titles already use. */ .plays-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 100px; font-family: PP Neue Montreal, sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; color: #ffffff; text-shadow: 0 1px 8px #33005a; background-image: linear-gradient(120deg, #6d17c4 0%, #c560ff 50%, #6d17c4 100%); background-repeat: no-repeat; background-size: 200% 100%; background-position: 100% 0; border: 1px solid #e0a9ff4d; box-shadow: 0 0 20px #9900ff5c, 0 2px 10px #00000059, inset 0 1px 0 #ffffff40; animation: shine 4s infinite; } .plays-pill i { font-size: 0.62rem; opacity: 0.9; } /* Unreleased games get the same shape with none of the shouting. */ .plays-pill.is-soon { color: #dddddd; text-shadow: none; background-image: none; background-color: #ffffff14; border-color: #ffffff26; box-shadow: none; animation: none; opacity: 0.7; } /* A card lighting up brings its badge up with it. */ .game-card:hover .plays-pill { box-shadow: 0 0 28px #b029ff8a, 0 2px 10px #00000059, inset 0 1px 0 #ffffff59; } .games-total { font-family: PP Neue Montreal, sans-serif; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; text-align: center; opacity: 0.55; margin: -3vh 0 0 0; } .games-total-plays { color: #d78dff; font-weight: 600; text-shadow: 0 0 16px #9900ff9e; } /* ============================================================ Footer - deliberately quiet. Used on every page. ============================================================ */ .site-footer { max-width: 900px; margin: 0 auto; padding: 0 20px 60px 20px; text-align: center; font-family: PP Neue Montreal, sans-serif; font-size: 0.78rem; letter-spacing: 0.5px; opacity: 0.32; transition: opacity .2s ease-in-out; } .site-footer:hover { opacity: 0.6; } .site-footer a { color: #dddddd; text-decoration: none; border-bottom: 1px solid #ffffff26; } .site-footer a:hover { border-bottom-color: #ffffff66; } .site-footer span { margin: 0 8px; opacity: 0.6; } /* ============================================================ Smoothness pass Everything below intentionally overrides rules earlier in this file. Delete this block to get the old behaviour back. ============================================================ */ /* scroll-behavior only works on the scrolling element. It was set on body, where it does nothing. */ html { scroll-behavior: smooth; } /* backdrop-filter is by far the most expensive effect here and it was used 11 times: each one re-blurs everything behind it, every frame. The backdrop behind these panels is nearly flat, so a large radius costs a lot and shows almost nothing. Halving it looks the same and is dramatically cheaper. Set these to `none` for maximum speed. */ .main-window { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .window-bar { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .nav-wrapper { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* Card hover. Two problems before: `transition: all` also watches layout properties, and drop-shadow() is a filter, so every frame repainted the whole card including its backdrop blur. box-shadow composites instead. */ .hover { transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease-out; } .hover:hover { transform: scale(1.05); filter: none; box-shadow: inset 0 0 8px #0006, 0 0 50px #b029ff3d, 0 30px 120px #000c; } /* Nav. Named properties and a softer curve - `transition: all` is what made this feel sticky. translateZ keeps the pill on its own layer so hovering never repaints the blurred bar behind it. */ nav>a { transition: background-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1); transform: translateZ(0); } nav>a:hover { transform: translateY(-2px) translateZ(0); } nav>a.selected::before, nav>a.selected::after { transition: opacity .25s ease, transform .25s ease; } /* Entrance animation: shorter, and no delay before anything appears. */ .fade-in { animation-duration: .6s; animation-delay: 0s; } /* Respect the OS "reduce motion" setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Nav indicator - the sliding pill (files/nav.js) ============================================================ */ nav { position: relative; } nav>a { position: relative; z-index: 1; } .nav-indicator { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 100px; background-color: #37373757; pointer-events: none; transition: none; } /* Added on the frame after a jump, so first paint and resize snap into place while hover-to-hover glides. */ .nav-indicator.is-ready { transition: transform .4s cubic-bezier(.34, 1.25, .64, 1), width .4s cubic-bezier(.34, 1.25, .64, 1), height .3s ease; } /* The bar and its glow now travel with the pill instead of being pinned to whichever link happens to be selected. */ .nav-indicator::before { content: ''; position: absolute; top: -7px; left: 50%; width: 20px; height: 2px; transform: translateX(-50%); background-color: #dddddd; } .nav-indicator::after { content: ''; position: absolute; top: -7px; left: 50%; width: 25px; height: 6px; transform: translateX(-50%); background-color: #ffffff; filter: blur(10px); } /* With the pill running, the old static highlight would double up. */ nav.nav-js>a.selected { background-color: transparent; } nav.nav-js>a.selected::before, nav.nav-js>a.selected::after { display: none; } nav.nav-js>a:hover { background-color: transparent; box-shadow: none; transform: translateZ(0); color: #ffffff; } nav.nav-js>a { transition: color .25s ease; } /* ============================================================ Cross-page transition - the pages are separate documents, so this is what animates an actual tab switch. Chromium only for now; every other browser simply navigates as before. ============================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } /* Naming the pill lets it morph across the navigation rather than cross-fading with the rest of the page. */ .nav-indicator { view-transition-name: nav-indicator; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }