/* * Shared styling for the CONTENT SURFACE: the static pages that exist so a * crawler has something to read (COMPETITORS.md §6 calls this the entire * discovery plan on a web-only product). * * These pages cannot import the app's CSS: Vite emits hashed filenames, so any * href would rot on the next build. This file is the alternative to inlining the * same palette into every page and watching them drift, which is exactly what * started happening once there was more than one of them. * * The palette below is copied from the `--c-*` tokens in `src/index.css`. If * those move, move these. It is a small, deliberate duplication in exchange for * pages with no build step that cannot break the bundle. * * It IS precached by the service worker (the glob covers `**\/*.css`), so the * content pages work offline like the rest of the app. */ :root { --bg: rgb(7 13 36); --panel: rgb(13 22 54); --chip: rgb(22 36 92); --edge: 59 108 255; --neon: rgb(56 232 255); --magenta: rgb(255 77 216); --gold: rgb(255 201 60); --good: rgb(61 220 132); --bad: rgb(255 85 102); --ink: rgb(240 244 255); --dim: rgb(148 163 204); } * { box-sizing: border-box; } body { margin: 0; background: repeating-linear-gradient(0deg, transparent 0 43px, rgb(var(--edge) / 0.045) 43px 44px), repeating-linear-gradient(90deg, transparent 0 43px, rgb(var(--edge) / 0.045) 43px 44px), var(--bg); color: var(--ink); font-family: Outfit, 'Segoe UI', system-ui, -apple-system, sans-serif; line-height: 1.65; -webkit-text-size-adjust: 100%; } .wrap { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; /* viewport-fit=cover lets an installed app draw under the status bar; 0 in a browser tab. */ padding-top: calc(2rem + env(safe-area-inset-top, 0px)); } /* * The way back into the app (ROADMAP decision 31). Hidden unless the page's head * script finds the reader came from inside the app, or is using the installed * app, and marks with `in-app`. A visitor from a search result keeps the * browser's own back instead: this button would take them into a game they have * never seen, which is not "back". * * The same round glass chrome and SVG chevron as the app's BackButton (never a * glyph arrow: DESIGN.md §9), so the page reads as a screen of the game. Fixed, * so it is one tap away however far down the page the reader has got. On a wide * screen it sits just outside the 44rem column rather than over the text. On a * phone text scrolls beneath it, which the app's own BackButton never has to * survive, so its panel is more opaque than `.glass` (0.85 against 0.7): at 0.7 * the words passing under it showed through and crowded the chevron. */ .back { display: none; } .in-app .back { position: fixed; z-index: 10; top: 12px; left: 12px; top: max(env(safe-area-inset-top, 0px), 12px); left: max(env(safe-area-inset-left, 0px), 12px, calc(50% - 22rem - 3.25rem)); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; color: var(--ink); background: rgb(13 22 54 / 0.85); border: 1px solid rgb(var(--edge) / 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px rgb(0 0 0 / 0.35); -webkit-tap-highlight-color: transparent; } /* A hit area 4px bigger all round than the painted circle, like the app's chrome (DESIGN.md §6). */ .in-app .back::before { content: ''; position: absolute; inset: -4px; } .in-app .back:active { transform: scale(0.9); } header { text-align: center; margin-bottom: 2.25rem; } .lock { font-size: 2.75rem; line-height: 1; } h1 { font-size: 1.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); margin: 0.5rem 0 0.25rem; } .tagline { color: var(--dim); font-size: 0.95rem; margin: 0; } h2 { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); margin: 2.5rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--edge) / 0.25); } h3 { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin: 1.5rem 0 0.35rem; } p, li { color: var(--dim); } p { margin: 0 0 1rem; } strong, b { color: var(--ink); font-weight: 700; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: 0.5rem; } a { color: var(--neon); } /* A clue row, as it appears in the game. */ .row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: var(--panel); border: 1px solid rgb(var(--edge) / 0.35); border-radius: 0.9rem; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; } .digits { display: flex; gap: 0.4rem; } .d { width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--chip); border: 1px solid rgb(var(--edge) / 0.5); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink); } .say { flex: 1 1 12rem; font-size: 0.9rem; color: var(--ink); } .v { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; } /* Drawn, not typed, like the game's own badges: a fallback font put ⇄ off-centre on Android (decision 32). */ .v svg { width: 1rem; height: 1rem; } .v-good { background: rgb(61 220 132 / 0.15); color: var(--good); border: 1px solid var(--good); } .v-gold { background: rgb(255 201 60 / 0.15); color: var(--gold); border: 1px solid var(--gold); } .v-bad { background: rgb(255 85 102 / 0.15); color: var(--bad); border: 1px solid var(--bad); } /* * Mixed: some right and well placed, some right but misplaced. Both halves on neutral blue, as the * game's own badge does it, so gold keeps meaning "right digit, wrong place" and nothing else. * Only the archive pages meet this: the hand-written rules examples never use a mixed row. */ .v-mixed { width: auto; gap: 1px; padding: 0 0.3rem; background: rgb(var(--edge) / 0.18); color: rgb(var(--edge)); border: 1px solid rgb(var(--edge) / 0.7); } .v-mixed svg { width: 0.8rem; height: 0.8rem; } /* Archive: the pager under a past code, and the index of them all. */ .pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; padding-top: 0.9rem; border-top: 1px solid rgb(var(--edge) / 0.25); } .pager a { flex: 1 1 8rem; text-align: center; padding: 0.6rem 0.75rem; border-radius: 0.7rem; background: var(--panel); border: 1px solid rgb(var(--edge) / 0.35); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; } .archive { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; } .archive li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 0.7rem; background: var(--panel); border: 1px solid rgb(var(--edge) / 0.35); } .archive a { font-weight: 800; color: var(--neon); text-decoration: none; } .archive .say { flex: 0 1 auto; color: var(--dim); font-size: 0.85rem; } /* Chapter cards on the levels index. */ .cards { display: grid; gap: 0.6rem; } .card { background: var(--panel); border: 1px solid rgb(var(--edge) / 0.35); border-radius: 0.9rem; padding: 0.75rem 0.9rem; } .card h3 { margin: 0 0 0.15rem; font-size: 1rem; letter-spacing: 0.04em; } .card .meta { font-size: 0.78rem; color: var(--dim); margin: 0; } .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; } .tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid rgb(var(--edge) / 0.5); color: var(--dim); } .tag-gold { border-color: rgb(255 201 60 / 0.5); color: var(--gold); } .tag-bad { border-color: rgb(255 85 102 / 0.5); color: var(--bad); } .cta { display: inline-block; margin-top: 0.5rem; padding: 0.85rem 1.75rem; border-radius: 0.9rem; background: var(--neon); color: #04121a; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 0 rgb(14 116 144); } .center { text-align: center; } nav.more { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.25rem; } nav.more a { font-size: 0.82rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid rgb(var(--edge) / 0.4); text-decoration: none; } footer { margin-top: 3rem; padding-top: 1.5rem; font-size: 0.8rem; color: var(--dim); border-top: 1px solid rgb(var(--edge) / 0.25); text-align: center; }