/* ═══════════════════════════════════════════════════════════════════════════ COGWAVE · DRAWN AS A SPECIFICATION The app is a set of four drawing sheets on pale drafting stock, and the game is the plate set into sheet 2. Type does everything: a display serif for the headlines and the figures, a humanist sans for the annotations, hairline rules for structure, and empty paper for separation. Rules this sheet keeps, without exception: · Structure has NO radius. Only the few things a finger operates get 2px. · There is NO elevation anywhere. No shadow, no glow, no gradient. A rule and a margin do every job a shadow would have done. · The measure is asymmetric: rubrics and headlines run to the page margin, numbered clauses are indented 30px under them, and their numerals hang out in the margin to the left of the rule. · Rhythm is 24px. A clause is separated by a rule and 22 to 26px. · Motion is a 240ms ease-out crossfade. Nothing travels, nothing scales, nothing bounces, nothing loops. · One glyph exists, a drafting centre mark. Everything else is a word. The page tokens below deliberately do NOT use --ink, --bg or --accent: those names belong to brand.js and are read off by game.js for the plate. Keeping the two vocabularies separate is what lets the sheet be light while the drawing on it stays dark. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Written from JS by applySafeArea(). 0 outside Telegram fullscreen, so every utility that reads them collapses on its own. */ --tg-safe-top: 0px; --tg-safe-bottom: 0px; /* the sheet */ --stock: #E6E9E4; /* pale drafting stock, cool, never a screen white */ --graphite: #171A16; /* the drawn line and the text, 14:1 on stock */ --graphite-2: #3E453C; /* secondary prose, 8.6:1 */ --graphite-3: #5F665D; /* annotations, captions, small print, 4.8:1 */ --hair: #C3CABF; /* the hairline: rules, graduations, gauge tracks */ --blue: #1D4E89; /* the annotation ink: underlines, your line, marks */ --oxide: #A33C1E; /* the one destructive word, and a gauge running out */ --done: #2C6740; /* a work order completed */ --f-display: "Spectral", Georgia, "Times New Roman", serif; --f-text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* the page margin, the clause indent, and the right inset that stops the column short of the edge */ --mg: 26px; --ind: 30px; --short: 16px; --t: 240ms ease-out; } *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Overlays set their own display, which outranks the UA rule for [hidden]. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--stock); overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body { font-family: var(--f-text); font-size: 15px; line-height: 1.62; color: var(--graphite); -webkit-font-smoothing: antialiased; } h1, h2, p, ol, ul, dl, dd, dt, figure, figcaption { margin: 0; padding: 0; } ol, ul { list-style: none; } button, input { font: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; } /* The glyph sheet itself never renders. */ .glyphs { position: absolute; width: 0; height: 0; overflow: hidden; } .gl { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; } .gl-lg { width: 52px; height: 52px; stroke-width: 0.6; } /* ── type roles ──────────────────────────────────────────────────────────── */ /* The annotation: sans, small, letterspaced, quiet. Every label in the app. */ .anno { font-size: 10px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--graphite-3); line-height: 1.4; } .title { font-family: var(--f-display); font-weight: 500; font-size: clamp(27px, 7.7vw, 32px); line-height: 1.16; letter-spacing: -0.008em; margin-top: 14px; padding-right: var(--short); text-wrap: balance; } .sub-h { font-family: var(--f-display); font-weight: 500; font-size: 21px; line-height: 1.25; margin-top: 30px; } .para { margin-top: 8px; color: var(--graphite-2); padding-right: var(--short); } .colophon { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.55; color: var(--graphite-3); } /* Deliberately NOT pushed to the floor with margin-top:auto. auto REPLACES the 30px whenever a sheet overflows, which lands the rule on top of the last line on exactly the sheets that scroll. One fixed gap everywhere. */ /* ── actions ───────────────────────────────────────────────────────────── One bordered primary, sitting inline with the text rather than spanning the width, and underlined words for everything else. */ .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; } .act { display: inline-block; flex: none; border: 1px solid var(--graphite); border-radius: 2px; padding: 10px 17px; font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.15; color: var(--graphite); background: transparent; transition: background var(--t), color var(--t), border-color var(--t); } .act:active { background: var(--graphite); color: var(--stock); } .act:disabled { color: var(--graphite-3); border-color: var(--hair); } .link { font-size: 14.5px; color: var(--graphite); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--blue); text-underline-offset: 4px; transition: color var(--t), text-decoration-color var(--t); } .link:active { color: var(--blue); } .link:disabled { color: var(--graphite-3); text-decoration-color: var(--hair); } .is-destructive { color: var(--oxide); text-decoration-color: var(--oxide); } /* ── the graduated scale ───────────────────────────────────────────────── Not a progress bar: a ruler. A hairline axis, graduations every tenth, and a filled portion sitting on it. shell.js only ever sets the width of the i. */ .scale { position: relative; height: 9px; margin-top: 11px; } .scale::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background-image: repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px 10%); } .scale::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair); } .scale i { position: absolute; left: 0; bottom: 0; z-index: 1; display: block; height: 3px; width: 0; background: var(--graphite); transition: width var(--t), background var(--t); } .scale i.is-low { background: var(--oxide); } /* ── title page ──────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 90; background: var(--stock); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--graphite); transition: opacity var(--t); } #splash.out { opacity: 0; } .tp-name { font-family: var(--f-display); font-size: 44px; font-weight: 400; letter-spacing: -0.012em; margin-top: 26px; } .tp-line { font-family: var(--f-display); font-style: italic; font-size: 15.5px; color: var(--graphite-2); margin-top: 2px; } /* ── frame ───────────────────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--stock); } main { position: relative; flex: 1; min-height: 0; z-index: 0; } .leaf { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; } .leaf.is-active { display: flex; } /* One slow crossfade per sheet change. No stagger, no travel. */ @keyframes fade { from { opacity: 0; } } .leaf.is-active { animation: fade var(--t) ease-out; } /* There is no chrome bar, so the sheet itself carries the fullscreen top inset and begins clear of Telegram's floating Close / ⋯ row. */ .leaf--spec { padding: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 18px) var(--mg) 30px; } /* Fullscreen already reserves the chrome inset; trim a cosmetic sliver so the sheet does not open on a gap, floored at the inset itself. */ [data-fullscreen="1"] .leaf--spec { padding-top: max(var(--tg-safe-top), calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 1.4vh + 18px)); } /* The rubric: two annotations over the heavy rule that opens every sheet. */ .rubric { display: flex; align-items: baseline; padding-bottom: 8px; border-bottom: 1.5px solid var(--graphite); } .rubric-r { margin-left: auto; color: var(--graphite-3); } /* ── the numbered clause ───────────────────────────────────────────────── The rule starts at the indent and the numeral hangs outside it, in the page margin, which is what makes the measure asymmetric without a second column. */ .clause { position: relative; margin-top: 24px; padding: 17px 0 0 var(--ind); } .clause::before { content: ""; position: absolute; left: var(--ind); right: 0; top: 0; height: 1px; background: var(--hair); } .clause-n { position: absolute; left: 0; top: 13px; font-family: var(--f-display); font-size: 17px; font-weight: 400; color: var(--graphite-3); font-variant-numeric: tabular-nums; } .clause-h { font-size: 10px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--graphite); } /* ── Fig. 1: the alignment band ────────────────────────────────────────── The figure breaks the measure, out past the clause indent on the left and almost to the page margin on the right, the way a figure is set on a page. */ .fig { margin: 22px calc(var(--ind) * -1) 0; padding-right: 4px; } .dwg { display: block; width: 100%; height: auto; color: var(--graphite-2); fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: butt; } .dwg text { stroke: none; fill: currentColor; font-family: var(--f-text); font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; } /* extension lines are thinner than the objects they measure */ .dwg-x { stroke: var(--hair); } .dwg-core { fill: var(--blue); } .fig-cap { margin-top: 12px; padding: 0 var(--short) 0 var(--ind); font-family: var(--f-display); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--graphite-2); } .fig-cap b { font-style: normal; font-weight: 600; color: var(--graphite); } /* ── the record, set as a dimension callout ──────────────────────────────── */ .dim { margin-top: 14px; } .dim-v { display: block; font-family: var(--f-display); font-size: 58px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } /* A dimension line: a rule with a tick standing at each end. */ .dim-line { display: block; position: relative; height: 1px; width: 128px; margin-top: 12px; background: var(--graphite); } .dim-line::before, .dim-line::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--graphite); } .dim-line::before { left: 0; } .dim-line::after { right: 0; } .dim-k { display: block; margin-top: 7px; font-family: var(--f-display); font-style: italic; font-size: 15px; color: var(--graphite-2); } /* ── work order, and the addendum ────────────────────────────────────────── */ .order { font-family: var(--f-display); font-size: 19px; line-height: 1.32; margin-top: 7px; padding-right: var(--short); } .order-m { margin-top: 9px; font-size: 12.5px; color: var(--graphite-3); font-variant-numeric: tabular-nums; } .order-m .dot { margin: 0 6px; } [data-daily-state].is-done { color: var(--done); } /* shell.js writes the daily cap here and leaves it EMPTY when there is none, so the line has to disappear on its own rather than leave a hole. */ .cap { display: block; margin-top: 5px; font-family: var(--f-display); font-style: italic; font-size: 13.5px; color: var(--graphite-3); } .cap:empty { display: none; } [data-offer] .link { display: inline-block; margin-top: 13px; } /* ── the title block ───────────────────────────────────────────────────── Where a drawing keeps its own record. Ruled cells, small figures, and the identity of the sheet, at the foot. Low emphasis on purpose: it is metadata, not the subject. */ .block { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--graphite); } .block-c { padding: 9px 11px 10px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .block-c:nth-child(2n) { border-right: 0; } .block-c--wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; display: flex; align-items: baseline; gap: 8px; } .block-k { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--graphite-3); } .block-v { display: block; margin-top: 3px; font-family: var(--f-display); font-size: 21px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; } .block-v--tx { font-size: 16px; font-weight: 400; margin-top: 0; } .block-c--wide .block-k { flex: none; } .block-gl { margin-left: auto; width: 13px; height: 13px; color: var(--graphite-3); align-self: center; } .block-nm { font-family: var(--f-display); font-size: 15px; color: var(--graphite-3); align-self: center; } /* ── run sheet ───────────────────────────────────────────────────────────── */ /* The plate owns the screen: the tab row steps aside. */ [data-screen="play"] .tabs { display: none; } .leaf--run { overflow: hidden; padding: 0 20px 10px; } .rd { flex: none; display: flex; align-items: baseline; gap: 13px; padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 14px); } .rd-count { margin-right: auto; } .rd-count .anno { display: block; } .rd-num { display: block; font-family: var(--f-display); font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; } /* The run of true aligns. A figure in the margin, never a badge. */ .rd-chain { font-family: var(--f-display); font-style: italic; font-size: 19px; color: var(--blue); opacity: 0; transition: opacity var(--t); } .rd-chain.is-on { opacity: 1; } .rd-hold { font-size: 10px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--graphite-2); } .rd-acts { display: flex; gap: 16px; flex: none; } .rd-acts .link { font-size: 13.5px; } .rd-gauge { flex: none; margin-top: 18px; } .rd-gauge .anno { display: block; } .rd-gauge .scale { margin-top: 8px; } /* The plate: the one dark surface in the app, framed like a figure. 0 radius, one graphite hairline, no shadow. */ .frame { flex: 1; min-height: 0; position: relative; margin-top: 16px; border: 1px solid var(--graphite); background: var(--bg, #101210); } #stage { display: block; width: 100%; height: 100%; background: var(--bg, #101210); touch-action: none; } .frame-note { flex: none; margin-top: 9px; font-family: var(--f-display); font-style: italic; font-size: 13px; color: var(--graphite-3); } /* The operating notes, on stock, over the plate until the run starts. */ .notes { position: absolute; inset: 0; background: var(--stock); display: flex; align-items: center; padding: 20px; overflow-y: auto; } .notes-in { width: 100%; max-width: 340px; margin: auto; } .notes-h { font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1.15; margin-top: 5px; } /* A key of reference numerals: the numeral in a fixed gutter, the part named in the definition beside it. */ .key { margin-top: 16px; } .key-r { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); } .key-r:last-child { border-bottom: 1px solid var(--hair); } .key dt { flex: none; width: 26px; font-family: var(--f-display); font-size: 14.5px; color: var(--graphite-3); font-variant-numeric: tabular-nums; } .key dd { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--graphite-2); } .key dd b { font-weight: 600; color: var(--graphite); } .fault { margin-top: 14px; padding-left: 11px; border-left: 2px solid var(--oxide); font-size: 13.5px; line-height: 1.5; color: var(--graphite-2); } .notes .acts { margin-top: 18px; } /* ── register ────────────────────────────────────────────────────────────── */ .scope { display: flex; gap: 24px; margin-top: 20px; border-bottom: 1px solid var(--hair); } .seg-btn { padding: 0 0 9px; font-family: var(--f-display); font-size: 18px; font-weight: 400; color: var(--graphite-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t), border-color var(--t); } .seg-btn.is-on { color: var(--graphite); border-bottom-color: var(--graphite); } /* A ruled ledger: the position sits in its own gutter cell behind a vertical rule, the way a numbered register is ruled. */ .board { margin-top: 16px; border-top: 1px solid var(--graphite); } .rw { display: grid; grid-template-columns: 32px 1fr auto; align-items: baseline; border-bottom: 1px solid var(--hair); } .rw-pos { padding: 11px 9px 11px 0; border-right: 1px solid var(--hair); font-family: var(--f-display); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--graphite-3); text-align: right; } /* Icons are almost absent in this language, and an avatar disc is an icon. */ .rw-av { display: none; } .rw-nm { padding: 11px 12px; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw-sc { padding: 11px 0; font-family: var(--f-display); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; } .rw--top .rw-pos { color: var(--graphite); } /* Your own line is marked in the gutter, the way a checker rings a row. */ .rw--me .rw-pos { background: var(--blue); color: var(--stock); border-right-color: var(--blue); } .rw--me .rw-nm { font-weight: 600; } .rw--me .rw-sc { color: var(--blue); } /* ── settings ────────────────────────────────────────────────────────────── */ .opts { margin-top: 22px; border-top: 1px solid var(--hair); } .opt { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); } .opt span { flex: 1; min-width: 0; } /* A slide on a rail, not a pill: a square knob that runs the length of a hairline and inks solid when it lands. */ .sw { appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; width: 46px; height: 17px; background: none; border: 0; } .sw::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--hair); transition: background var(--t); } .sw::after { content: ""; position: absolute; top: 0; left: 0; width: 17px; height: 17px; border: 1px solid var(--graphite); border-radius: 2px; background: var(--stock); transition: transform var(--t), background var(--t); } .sw:checked::before { background: var(--graphite); } .sw:checked::after { transform: translateX(29px); background: var(--graphite); } /* The schedule of attached documents, lettered the way a drawing letters its attachments. */ .docs { margin-top: 14px; border-top: 1px solid var(--hair); } .docs li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); } /* The colophon's own rule closes the schedule, so the list does not draw a second one 30px above it. */ .docs li:last-child { border-bottom: 0; } .docs-n { flex: none; width: 14px; font-family: var(--f-display); font-size: 14px; color: var(--graphite-3); } /* ── bottom tab row ────────────────────────────────────────────────────── A flex-column child of #app, so it pins to the bottom of the fixed viewport above the scrolling sheet. The active tab thickens into the rule. */ .tabs { flex: none; display: flex; background: var(--stock); border-top: 1px solid var(--graphite); padding-bottom: max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)); } .tab { flex: 1; padding: 13px 4px 14px; margin-top: -1px; border-top: 3px solid transparent; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--graphite-3); transition: color var(--t), border-color var(--t); } .tab.is-on { color: var(--graphite); border-top-color: var(--graphite); } /* ── overlays ────────────────────────────────────────────────────────────── */ .veil { position: fixed; inset: 0; z-index: 40; background: rgba(16, 18, 16, .6); } .dossier { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: var(--stock); border-top: 1.5px solid var(--graphite); display: flex; flex-direction: column; padding-bottom: max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) - 40px); /* Deliberately NOT animated. A panel that slides up from below sits, for the length of the animation, with its own Close control under the fold, and if a client throttles animations it stays there. It just appears. */ } .dossier-hd { flex: none; position: relative; padding: 18px var(--mg) 13px; border-bottom: 1px solid var(--graphite); } .dossier-ti { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.15; margin-top: 4px; padding-right: 66px; } .dossier-x { position: absolute; right: var(--mg); bottom: 15px; font-size: 13.5px; } .dossier-bd { flex: 1; min-height: 0; overflow-y: auto; padding: 18px var(--mg) 4px; color: var(--graphite-2); } .dossier-bd p { margin-bottom: 15px; padding-right: var(--short); } .dossier-bd ul { margin-bottom: 15px; } .dossier-bd li { position: relative; padding: 0 var(--short) 11px 22px; } /* A drawn bullet: a small open square on the baseline of the first line. */ .dossier-bd li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border: 1px solid var(--blue); } .dossier-bd b { font-weight: 600; color: var(--graphite); } .dossier-ft { flex: none; padding: 13px var(--mg) 18px; border-top: 1px solid var(--hair); } .overlay { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 22px; pointer-events: none; } /* A revision slip, pasted on the drawing: bordered, square, unlifted. */ .slip { pointer-events: auto; width: 100%; max-width: 330px; background: var(--stock); border: 1.5px solid var(--graphite); padding: 20px 20px 22px; animation: fade var(--t) ease-out; } .slip-n { font-family: var(--f-display); font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 10px; } .slip-u { font-family: var(--f-display); font-style: italic; font-size: 16.5px; color: var(--graphite-2); margin-top: 2px; } .slip-s { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--graphite-2); } .slip-h { font-family: var(--f-display); font-weight: 500; font-size: 25px; line-height: 1.15; margin-top: 7px; } .slip-alt { display: inline-block; margin-top: 17px; } /* The ad offer: a bordered notice that prints its reward and its free route before the tap, never a bright button. */ .slip-ad { display: block; width: 100%; margin-top: 17px; padding: 13px; border: 1px solid var(--hair); border-radius: 2px; transition: border-color var(--t); } .slip-ad:active { border-color: var(--graphite); } .slip-ad b { display: block; font-size: 14.5px; font-weight: 600; } .slip-ad i { display: block; font-family: var(--f-display); font-size: 13px; line-height: 1.4; color: var(--graphite-3); margin-top: 3px; } .slip-ad i:empty { display: none; } .tick { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(16, 18, 16, .64); pointer-events: none; } .tick span { font-family: var(--f-display); font-size: 140px; font-weight: 400; line-height: 1; color: var(--stock); font-variant-numeric: tabular-nums; animation: fade var(--t) ease-out; } .strip { position: fixed; z-index: 70; left: var(--mg); right: var(--mg); bottom: calc(94px + max(var(--tg-safe-bottom), env(safe-area-inset-bottom, 0px))); background: var(--graphite); color: var(--stock); border-radius: 2px; padding: 12px 17px; font-size: 13.5px; text-align: center; } /* ── reduce motion: kill all of it ───────────────────────────────────────── */ [data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Short phones: the display sizes give first, the measure never does. */ @media (max-height: 690px) { .leaf--spec { padding-top: calc(max(var(--tg-safe-top), env(safe-area-inset-top, 0px)) + 13px); } .title { font-size: 26px; margin-top: 11px; } .clause { margin-top: 20px; } .dim-v { font-size: 48px; } .rd-num { font-size: 34px; } .slip-n { font-size: 54px; } .notes-h { font-size: 22px; } .key-r { padding: 9px 0; } }