/* Phase 2 — the workshop shell, the help card, the summary strip and Access. * * One sheet for four pieces of chrome that have to look like they came out of * the same house: the badge row on the Workshop cards, the first-run How to * play card on a stage, the compact market strip at the top of the Ticker * Room, and the Access control that sits in the corner of every page that * loads this. * * Every colour here is a picture-house colour — ink, film stock, sepia, fisik * green, soot — so nothing added below reads as a control panel bolted onto a * 1903 programme. The state classes at the foot (.sk-rm, .sk-hc, .sk-lt) are * set on by sk-a11y.js and are the only thing in the sheet allowed to * reach outside its own components. */ :root { --sk-p2-ink: #14110F; --sk-p2-ink-2: #1b1712; --sk-p2-stock: #EDE3D0; --sk-p2-sepia: #C9A876; --sk-p2-fisik: #7A8B54; --sk-p2-soot: #4A4136; --sk-p2-soot-2: #8a7f6d; --sk-p2-claret: #8B3A2E; --sk-p2-mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace; } /* ===================================================================== * 1. Workshop hub — badges and the genre line * ===================================================================== */ /* A row of small stamps under the blurb. They answer the four questions a * visitor asks before clicking Play — will it work on my phone, can I use a * keyboard, does it remember me, how long is it — without making any card * taller than its neighbours, which is what keeps the grid an equal * hierarchy rather than a ranking. */ .sk-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.15rem 0 0; padding: 0; list-style: none; } .sk-badge { font-family: var(--sk-p2-mono); font-size: 9px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-p2-soot-2); border: 1px solid var(--sk-p2-soot); border-radius: 2px; padding: 0.32rem 0.42rem; white-space: nowrap; } /* Four tints, so the row can be read at a glance without reading the words. */ .sk-badge.is-device { border-color: #554b3d; color: #a2967f; } .sk-badge.is-input { border-color: #554b3d; color: #a2967f; } .sk-badge.is-save { border-color: rgba(122, 139, 84, 0.62); color: #93a469; } .sk-badge.is-shape { border-color: rgba(201, 168, 118, 0.55); color: var(--sk-p2-sepia); } /* The genre and session line. Deliberately one line: it is a caption under a * card, not a spec sheet, and a second line would push the buttons of the * tallest card out of step with the rest of the row. */ .sk-genre { font-family: var(--sk-p2-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sk-p2-soot-2); margin: 0.15rem 0 0; line-height: 1.6; } .sk-genre b { color: var(--sk-p2-sepia); font-weight: 400; } /* The blurb stops being the flexing element once a badge row sits below it — * otherwise the badges float away from the text they describe and the cards * stop lining up along the bottom. The slack goes to whichever of the two * lines comes first instead, so the caption and the stamps stay together as * one block above the buttons no matter how long the blurb ran. */ .sk-hub-card p { flex: 0 1 auto; } .sk-hub-card .sk-genre { margin-top: auto; padding-top: 0.5rem; } .sk-hub-card .sk-badges { margin-top: auto; padding-top: 0.5rem; } .sk-hub-card .sk-genre + .sk-badges { margin-top: 0; padding-top: 0.45rem; } @media (max-width: 720px) { .sk-badge { font-size: 8.5px; letter-spacing: 0.1em; } } /* ===================================================================== * 2. The first-run help card on a stage * ===================================================================== */ .sk-help-scrim { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: rgba(12, 10, 8, 0.86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overscroll-behavior: contain; } .sk-help-scrim[hidden] { display: none; } .sk-help-card { width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--sk-p2-ink-2); border: 1px solid var(--sk-p2-soot); border-radius: 2px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); color: var(--sk-p2-stock); padding: 1.4rem 1.4rem 1.2rem; text-align: left; } .sk-help-card .sk-help-rx { display: flex; justify-content: space-between; gap: 0.8rem; font-family: var(--sk-p2-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-p2-soot-2); border-bottom: 1px dashed var(--sk-p2-soot); padding-bottom: 0.6rem; margin-bottom: 1rem; } .sk-help-card h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.1; margin: 0 0 0.4rem; color: var(--sk-p2-stock); } .sk-help-card .sk-help-sub { font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 0.98rem; line-height: 1.55; color: #cfc5b1; margin: 0 0 1rem; } .sk-help-card dl { margin: 0 0 1rem; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem 0.8rem; align-items: baseline; } .sk-help-card dt { font-family: var(--sk-p2-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-p2-sepia); } .sk-help-card dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #d8cfba; } .sk-help-card dd kbd { font-family: var(--sk-p2-mono); font-size: 10px; border: 1px solid var(--sk-p2-soot); border-radius: 2px; padding: 0.08rem 0.3rem; color: var(--sk-p2-stock); } .sk-help-card .sk-help-start { font-family: var(--sk-p2-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; width: 100%; min-height: 50px; padding: 0.9rem 1rem; border: 1px solid var(--sk-p2-fisik); border-radius: 2px; background: var(--sk-p2-fisik); color: var(--sk-p2-ink); cursor: pointer; } .sk-help-card .sk-help-start:hover { background: #8a9c60; } .sk-help-card .sk-help-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.85rem; font-family: var(--sk-p2-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sk-p2-soot-2); } .sk-help-card .sk-help-again { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; cursor: pointer; } .sk-help-card .sk-help-again input { width: 16px; height: 16px; accent-color: var(--sk-p2-fisik); cursor: pointer; } .sk-help-card .sk-help-out { color: var(--sk-p2-sepia); text-decoration: none; } .sk-help-card .sk-help-out:hover { color: var(--sk-p2-stock); } @media (max-width: 480px) { .sk-help-card { padding: 1.1rem 1rem 1rem; } .sk-help-card dl { grid-template-columns: 1fr; gap: 0.15rem 0; } .sk-help-card dd { margin-bottom: 0.5rem; } } /* ===================================================================== * 3. The Ticker Room summary strip * ===================================================================== */ /* Five readings across the top of the room, so the answer to "what is it * doing" is above the fold on a phone rather than four scrolls down inside * the quote board. It reads the same numbers the board does — see * sk-ticker-summary.js — so the two can never disagree. */ .sk-tsum { border: 1px solid var(--sk-p2-soot); background: var(--sk-p2-ink-2); margin: 1.4rem 0 0.4rem; padding: 0.85rem 1rem 0.9rem; border-radius: 2px; } .sk-tsum-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; font-family: var(--sk-p2-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-p2-soot-2); margin-bottom: 0.75rem; } .sk-tsum-head .sk-tsum-state { color: var(--sk-p2-sepia); } .sk-tsum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem 1rem; } .sk-tsum-cell { min-width: 0; } .sk-tsum-cell .k { display: block; font-family: var(--sk-p2-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-p2-soot-2); margin-bottom: 0.3rem; } .sk-tsum-cell .v { display: block; font-family: var(--sk-p2-mono); font-size: clamp(14px, 3.4vw, 17px); letter-spacing: 0.02em; color: var(--sk-p2-stock); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-tsum-cell .v.up { color: #93a469; } .sk-tsum-cell .v.down { color: #bd6350; } .sk-tsum-cell .v.none { color: var(--sk-p2-soot-2); } .sk-tsum-note { font-family: var(--sk-p2-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-p2-soot); margin: 0.8rem 0 0; line-height: 1.7; } @media (max-width: 520px) { .sk-tsum { padding: 0.75rem 0.8rem 0.8rem; } .sk-tsum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================================================================== * 4. The Access control * ===================================================================== */ .sk-a11y-btn { position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 99990; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 42px; padding: 0.55rem 0.8rem; font-family: var(--sk-p2-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-p2-sepia); background: rgba(27, 23, 18, 0.94); border: 1px solid var(--sk-p2-soot); border-radius: 2px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } .sk-a11y-btn:hover { border-color: var(--sk-p2-sepia); color: var(--sk-p2-stock); } .sk-a11y-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sk-p2-fisik); flex: 0 0 auto; } .sk-a11y-btn[aria-expanded="true"] { border-color: var(--sk-p2-fisik); color: var(--sk-p2-stock); } /* On a stage the corner belongs to the game's own thumb controls, so the * button travels into the escape row instead of floating over the picture. */ .sk-a11y-btn.in-row { position: static; box-shadow: none; background: none; border-color: var(--sk-p2-soot); min-height: 40px; padding: 0.35rem 0.55rem; font-size: 9px; letter-spacing: 0.12em; } /* The projector and accompaniment switches travel into the same row, for the * same reason, so they are cut to the same pattern. Before this they carried * their own inline block sized for a full-width title bar, which is why the * Nursery's caption clipped one and the Fever Walk's title collided with the * other. */ .play-escape .pe-right .sk-projector-switch.in-row, .play-escape .pe-right .sk-accompaniment.in-row { appearance: none; -webkit-appearance: none; position: static; background: none; border: 1px solid var(--sk-p2-soot); border-radius: 2px; color: var(--sk-p2-soot-2); font-family: var(--sk-p2-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; /* A