/* steamprofiler.org - /g/, the game on its own. Written against the token set and nothing else: every colour, radius and typeface here comes from a custom property that games.css redefines per theme. That is the whole reason this file is short. A page about Dota gets Cinzel and gold, one about Rust gets its rust, and none of it is written twice - `data-game` on is the only thing that changes. The one rule that is not a token: this page has to stay legible at the top of a search result and on a phone, so nothing here depends on hover, and the achievement rows are a list that reflows rather than a grid that overflows. */ /* ── The wait ──────────────────────────────────────────────────────── */ .gpw { min-height: min(76vh, 760px); margin: 0; padding: 0; position: relative; } .gpw .boot-map { position: relative; inset: auto; width: 100%; min-height: min(68vh, 680px); height: auto; overflow: hidden; } .gpw-status { position: fixed; z-index: 5; left: 50%; bottom: 28px; width: min(60ch, calc(100% - 40px)); transform: translateX(-50%); padding: 13px 16px; text-align: center; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); } .gpw-head { font-family: var(--label); font-weight: var(--label-w); letter-spacing: var(--label-ls); text-transform: uppercase; font-size: .78rem; color: var(--dim); margin: 0 0 14px; } .gpw-track { height: 2px; background: var(--bar-rest); overflow: hidden; border-radius: 2px; } .gpw-track i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: inherit; animation: gpw-slide 1.4s ease-in-out infinite; } @keyframes gpw-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } @media (prefers-reduced-motion: reduce) { .gpw-track i { animation: none; opacity: .4; } .gpw-track i { width: 100%; } } @media (max-width: 560px) { .gpw .boot-map { min-height: 70vh; } .gpw-status { bottom: 16px; } } /* ── The game ──────────────────────────────────────────────────────── */ #gp { padding-bottom: calc(var(--edge) * 2); } .repo-public-title { margin: clamp(20px, 3vw, 30px) 0 0; font-family: var(--display); font-weight: var(--display-w); font-size: clamp(2.8rem, 10vw, 6.5rem); line-height: .9; letter-spacing: var(--display-ls); color: var(--accent); } .repo-public .repo-pill { margin-top: clamp(20px, 3vw, 30px); } .repo-public .repo-pill em { max-width: 11ch; line-height: 1.1; text-transform: uppercase; } .repo-public .repo-bot { position: relative; } .repo-public .repo-bot::after { content: '✦ ･ ✦'; position: absolute; top: -22px; left: 50%; opacity: 0; color: var(--accent); font-size: 18px; letter-spacing: 12px; white-space: nowrap; text-shadow: 0 0 10px #ffd21e99; pointer-events: none; } .repo-public[data-dizzy="1"] .repo-bot { animation: repo-public-dizzy-bot .52s ease-in-out var(--delay, 0ms) infinite; } .repo-public[data-dizzy="1"] .repo-pupil { animation: repo-public-dizzy-eye .38s linear infinite; } .repo-public[data-dizzy="1"] .repo-eye:nth-child(2) .repo-pupil { animation-direction: reverse; } .repo-public[data-dizzy="1"] .repo-bot::after { animation: repo-public-dizzy-stars .8s linear infinite; } @keyframes repo-public-dizzy-bot { 0%, 100% { transform: translate(-4px, 1px) rotate(-6deg); } 50% { transform: translate(4px, -5px) rotate(6deg); } } @keyframes repo-public-dizzy-eye { from { transform: translate(-50%, -50%) rotate(0deg) translateX(7px); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(7px); } } @keyframes repo-public-dizzy-stars { 0% { opacity: 0; transform: translate(-50%, 8px) rotate(0deg); } 25%, 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -9px) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .repo-public[data-dizzy="1"] .repo-bot, .repo-public[data-dizzy="1"] .repo-pupil, .repo-public[data-dizzy="1"] .repo-bot::after { animation: none; } } /* Full bleed, and the only thing on the page that is. The art is 616x353 from Steam and is being shown much wider than that, so it is blurred slightly and sat behind a gradient rather than presented as a picture worth looking at - it is the wallpaper for the title, which is the thing worth looking at. */ .gp-art { position: relative; height: clamp(180px, 30vh, 340px); overflow: hidden; border-bottom: 1px solid var(--line); } .gp-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) blur(1px); transform: scale(1.04); } .gp-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, transparent), var(--bg) 96%); } .gp-head, .gp-panel { max-width: 78ch; margin-inline: auto; padding-inline: var(--edge); } .gp-head { margin-top: -1px; padding-top: var(--pad); position: relative; z-index: 1; } .gp-kicker { font-family: var(--label); font-weight: var(--label-w); letter-spacing: var(--label-ls); text-transform: uppercase; font-size: .72rem; color: var(--dim); margin: 0 0 10px; } .gp-title { font-family: var(--display); font-weight: var(--display-w); text-transform: var(--display-tt); letter-spacing: var(--display-ls); line-height: var(--display-lh, 1); font-size: clamp(2.1rem, 7vw, 4rem); margin: 0 0 16px; color: var(--text); } .gp-steam { margin: 0 0 8px; } /* ── Panels ────────────────────────────────────────────────────────── */ .gp-panel { margin-top: calc(var(--edge) * 1.6); } .gp-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .gp-bar b { font-family: var(--mono); color: var(--accent); font-size: 1.05rem; } .gp-h { font-family: var(--label); font-weight: var(--label-w); letter-spacing: var(--label-ls); text-transform: uppercase; font-size: .78rem; color: var(--dim); margin: 0 0 10px; } .gp-bar .gp-h { margin: 0; } .gp-label { font-family: var(--label); font-weight: var(--label-w); letter-spacing: var(--label-ls); text-transform: uppercase; font-size: .68rem; color: var(--faint); margin: 0 0 6px; } .gp-sub { margin-top: 20px; } .gp-note { color: var(--dim); font-size: .87rem; line-height: 1.6; max-width: 66ch; margin: 14px 0 0; } .gp-half { color: var(--text); } /* ── The rarest one ────────────────────────────────────────────────── */ .gp-rarest { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); } .gp-rarest-icon { width: 64px; height: 64px; border-radius: calc(var(--r) / 2); background: var(--panel-2); flex: none; } .gp-rarest-body { flex: 1 1 14ch; min-width: 0; } .gp-rarest-name { margin: 0; font-weight: 600; font-size: 1.15rem; color: var(--text); } .gp-rarest-desc { margin: 4px 0 0; color: var(--dim); font-size: .9rem; } .gp-rarest-pct { margin: 0; text-align: right; flex: none; } .gp-rarest-pct b { display: block; font-family: var(--mono); font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--accent); line-height: 1; } .gp-rarest-pct small { display: block; margin-top: 4px; color: var(--faint); font-family: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; font-size: .62rem; } /* ── The set ───────────────────────────────────────────────────────── */ .gp-list { list-style: none; margin: 10px 0 0; padding: 0; } .gp-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .gp-row-icon { width: 40px; height: 40px; flex: none; border-radius: calc(var(--r) / 2); background: var(--panel-2); } .gp-row-icon--none { border: 1px solid var(--line); } .gp-row-body { flex: 1 1 auto; min-width: 0; } .gp-row-name { margin: 0; font-size: .95rem; color: var(--text); overflow-wrap: anywhere; } .gp-row-desc { margin: 2px 0 0; font-size: .82rem; color: var(--dim); overflow-wrap: anywhere; } /* fillBar() from lib.js builds this: a track with one inside it whose width is the percentage. Here the percentage is the rarity itself, unscaled - a sliver is what 0.4% looks like. */ .gp-row-bar { margin-top: 6px; height: 3px; background: var(--bar-rest); border-radius: 2px; overflow: hidden; } .gp-row-bar i { display: block; height: 100%; background: var(--bar-fill); border-radius: inherit; } .gp-row-pct { flex: none; width: 7ch; text-align: right; font-family: var(--mono); font-size: .85rem; color: var(--dim); } /* ── Store catalogue ──────────────────────────────────────────────── */ .gp-catalogue { max-width: 1120px; margin: calc(var(--edge) * 2) auto 0; padding: 0 var(--edge); } .gp-cat-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .gp-cat-title { margin: 0; font-family: var(--display); font-weight: var(--display-w); text-transform: var(--display-tt); letter-spacing: var(--display-ls); font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1; } .gp-cat-time { flex: none; color: var(--faint); font-family: var(--mono); font-size: .72rem; } .gp-cat-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin-top: 16px; border: 1px solid var(--line); background: var(--panel); } .gp-cat-fact { min-width: 0; padding: 16px; border-right: 1px solid var(--line); } .gp-cat-fact:last-child { border-right: 0; } .gp-cat-fact b { display: block; font-family: var(--mono); font-size: clamp(1.05rem, 2.4vw, 1.8rem); color: var(--text); white-space: nowrap; } .gp-cat-fact span, .gp-cat-inventory span { display: block; margin-top: 5px; color: var(--faint); font-family: var(--label); font-size: .62rem; letter-spacing: var(--label-ls); text-transform: uppercase; } .gp-cat-about, .gp-cat-group, .gp-cat-media, .gp-cat-reqs, .gp-cat-news { margin-top: 34px; } .gp-cat-lede { max-width: 72ch; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; } .gp-cat-copy { max-width: 82ch; color: var(--dim); line-height: 1.72; white-space: pre-line; } .gp-cat-credits { display: grid; grid-template-columns: minmax(120px, .28fr) 1fr; margin: 30px 0 0; border-top: 1px solid var(--line); } .gp-cat-credits dt, .gp-cat-credits dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); } .gp-cat-credits dt { color: var(--faint); font-family: var(--label); font-size: .68rem; letter-spacing: var(--label-ls); text-transform: uppercase; } .gp-cat-credits dd { color: var(--text); } .gp-cat-tags { display: flex; flex-wrap: wrap; gap: 7px; } .gp-cat-tags span { padding: 7px 9px; color: var(--dim); background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) / 2); font-size: .75rem; } .gp-cat-inventory { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); } .gp-cat-inventory p { flex: 1 1 130px; margin: 0; padding: 14px; background: var(--panel); } .gp-cat-inventory b { font-family: var(--mono); font-size: 1.25rem; } .gp-cat-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 8px; } .gp-shot { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; background: var(--panel); cursor: zoom-in; } .gp-cat-shots img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease, filter 180ms ease; } .gp-shot:hover img, .gp-shot:focus-visible img { transform: scale(1.025); filter: brightness(1.08); } .gp-lightbox { width: min(96vw, 1500px); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line); background: #050605; color: var(--text); box-shadow: 0 24px 90px #000; } .gp-lightbox::backdrop { background: rgb(0 0 0 / .88); backdrop-filter: blur(5px); } .gp-lightbox-stage { position: relative; display: grid; place-items: center; min-height: min(75vh, 900px); } .gp-lightbox-image { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; } .gp-lightbox-close, .gp-lightbox-nav { position: absolute; z-index: 1; display: grid; place-items: center; border: 1px solid #ffffff40; border-radius: 50%; color: #fff; background: #000a; cursor: pointer; } .gp-lightbox-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 1.8rem; } .gp-lightbox-nav { top: 50%; width: 48px; height: 64px; transform: translateY(-50%); font-size: 2.5rem; } .gp-lightbox-prev { left: 14px; } .gp-lightbox-next { right: 14px; } .gp-lightbox-close:hover, .gp-lightbox-nav:hover { background: #000; border-color: #fff9; } .gp-lightbox-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; color: #fff; background: #000b; font-family: var(--mono); font-size: .72rem; } .gp-cat-reqs { display: grid; gap: 8px; } .gp-cat-reqs > .gp-h { margin-bottom: 2px; } .gp-cat-reqs details { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); } .gp-cat-reqs summary { cursor: pointer; font-family: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; } .gp-cat-reqs details div { margin-top: 16px; } .gp-cat-reqs details b { color: var(--accent); font-family: var(--mono); font-size: .78rem; } .gp-cat-reqs details p { color: var(--dim); line-height: 1.6; white-space: pre-line; } .gp-cat-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .gp-cat-news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; } .gp-cat-news article { padding: 16px; border: 1px solid var(--line); background: var(--panel); } .gp-cat-news-image { display: block; width: calc(100% + 32px); aspect-ratio: 16 / 9; margin: -16px -16px 16px; object-fit: cover; border-bottom: 1px solid var(--line); } .gp-cat-news h4 { margin: 8px 0; font-size: 1rem; } .gp-cat-news article > p:last-child { margin: 0; color: var(--dim); font-size: .82rem; line-height: 1.55; } @media (max-width: 620px) { .gp-cat-head { display: block; } .gp-cat-time { display: block; margin-top: 12px; } .gp-cat-credits { grid-template-columns: 1fr; } .gp-cat-credits dt { border-bottom: 0; padding-bottom: 0; } .gp-cat-fact { border-bottom: 1px solid var(--line); } } /* ── Price ─────────────────────────────────────────────────────────── */ .gp-price-body { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .gp-price-now { font-family: var(--mono); font-size: clamp(1.4rem, 4vw, 2rem); color: var(--text); } .gp-price-was { color: var(--faint); font-family: var(--mono); } .gp-price-cut { font-style: normal; font-family: var(--mono); color: var(--bg); background: var(--accent); padding: 2px 7px; border-radius: calc(var(--r) / 2); } /* ── The cards ─────────────────────────────────────────────────────── */ .gp-cards-body { margin: 0 0 14px; font-size: 15px; } .gp-cards-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; } .gp-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); } /* Steam draws these at 96 wide and 3:4 tall, which is the shape of the card itself. Anything else letterboxes an illustration people recognise. */ .gp-card-art { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: var(--line); border-radius: calc(var(--r) / 2); } .gp-card-name { font-size: 11.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .gp-card-price { font-family: var(--mono); font-size: 11px; color: var(--faint); } /* ── The way back in ───────────────────────────────────────────────── */ .gp-find { margin-top: calc(var(--edge) * 2); padding-top: calc(var(--edge) * 1.4); border-top: 1px solid var(--line); } .gp-find-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .gp-find-in { flex: 1 1 22ch; min-width: 0; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; font: inherit; } .gp-find-in::placeholder { color: var(--faint); } .gp-find-go { flex: none; cursor: pointer; font: inherit; font-weight: 600; background: var(--accent); color: var(--bg); border: 1px solid transparent; border-radius: var(--r); padding: 12px 20px; } .gp-find-in:focus-visible, .gp-find-go:focus-visible { outline: 2px solid transparent; border-color: var(--accent); } @media (max-width: 520px) { .gp-rarest-pct { text-align: left; } .gp-row-pct { width: 6ch; } } /* The error state. `.state` in style.css caps its width and does not centre it, which is right on the profile pages - their whole layout starts at the left edge - and wrong here, where everything else on the page is a centred column. Scoped to this shell so nothing else moves. */ #failure { margin-inline: auto; }