1/* Shared look for the Steam library art: the app's tokens and fonts. */2@font-face { font-family: "Shoulders"; src: url(../../../frontend/dist/fonts/big-shoulders-display-600.woff2) format("woff2"); font-weight: 600; }3@font-face { font-family: "Shoulders"; src: url(../../../frontend/dist/fonts/big-shoulders-display-800.woff2) format("woff2"); font-weight: 800; }4@font-face { font-family: "Plex Mono"; src: url(../../../frontend/dist/fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; }5@font-face { font-family: "Plex Mono"; src: url(../../../frontend/dist/fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; }67:root {8 --ink: #07080a;9 --ink-2: #0d0f12;10 --ink-3: #15181d;11 --ink-4: #1d2128;12 --line: rgba(237, 230, 214, .08);13 --paper: #ede6d6;14 --muted: #908a7c;15 --faint: #5d5850;16 --amber: #ffb224;17 --amber-2: #c98714;18 --f-display: "Shoulders", "Impact", sans-serif;19 --f-mono: "Plex Mono", "Menlo", monospace;20}2122* { box-sizing: border-box; }23html, body { margin: 0; padding: 0; }24body { background: var(--ink); color: var(--paper); -webkit-font-smoothing: antialiased; }2526.art { position: relative; overflow: hidden; background: var(--ink); }2728/* The wordmark, as on the app's boot screen. */29.mark {30 font: 800 100px/.8 var(--f-display);31 text-transform: uppercase; letter-spacing: .01em;32 color: var(--paper); white-space: nowrap;33}34.tag {35 font: 500 14px var(--f-mono); letter-spacing: .2em; text-transform: uppercase;36 color: var(--amber); white-space: nowrap;37}3839/* Guide grid motif, built by art.js. Sizes scale with --u (1 = the app's 58px row). */40.guide { position: absolute; --u: 1; }41.guide .ticks { position: absolute; left: 0; right: 0; top: 0; height: calc(34px * var(--u)); border-bottom: 1px solid var(--line); }42.guide .ticks span {43 position: absolute; top: 0; bottom: 0; display: flex; align-items: center;44 padding-left: calc(10px * var(--u)); border-left: 1px solid var(--line);45 font: 400 calc(12px * var(--u)) var(--f-mono); color: var(--faint);46}47.guide .row { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line); }48.guide .ch {49 position: absolute; top: 0; bottom: 0; left: 0;50 display: flex; align-items: center; padding-left: calc(26px * var(--u));51 font: 600 calc(28px * var(--u))/1 var(--f-display); color: var(--faint);52}53.guide .row.cur .ch { color: var(--amber); }54.guide .cell {55 position: absolute; top: calc(4px * var(--u)); bottom: calc(4px * var(--u));56 background: var(--ink-3); border-radius: calc(2px * var(--u));57}58.guide .cell.past { opacity: .45; }59.guide .cell.now { background: #1b1e24; box-shadow: inset calc(2px * var(--u)) 0 0 var(--amber-2); }60.guide .cell.sel { background: var(--amber); box-shadow: none; opacity: 1; }61.guide .now-line {62 position: absolute; top: 0; bottom: 0; width: calc(2px * var(--u)); margin-left: calc(-1px * var(--u));63 background: var(--amber); box-shadow: 0 0 calc(14px * var(--u)) rgba(255, 178, 36, .45);64}65.guide .now-line::before {66 content: ""; position: absolute; top: 0; left: calc(-5px * var(--u));67 border: calc(6px * var(--u)) solid transparent; border-top: calc(8px * var(--u)) solid var(--amber);68 border-bottom: 0;69}7071/* Film grain and faint scanlines, as over the app's chrome. */72.grain::after {73 content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50;74 background:75 repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),76 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");77 opacity: .07; mix-blend-mode: overlay;78}