/* style.css — the landing site wears the game's own paper. Every colour here is lifted from src/art/palettes.ts (the `suburbia` act) and src/art/sticker.ts, so the page and the screenshots on it are the same picture. GDD §7 applies: flat colour and hard-edged shadows, no gradients, no blur, no filters. */ :root { --ink: #1d1d2b; --paper: #fff6e5; /* palettes.suburbia.panel */ --sky: #9fd8ff; --ground: #79c267; --accent: #ff6b57; --accent2: #ffd166; --wall: #ffe9c2; --shadow: rgba(29, 29, 43, .28); --edge: 3px solid var(--ink); } * { box-sizing: border-box; } /* The canvas beyond the content takes the FOOTER's colour, not the sky's. A background on stops 's propagating to the canvas, so on a window taller than the page the strip under the ink footer is ink rather than a band of sky hanging below it. */ html { background: var(--ink); } body { margin: 0; color: var(--ink); background: var(--sky); font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } .wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; } /* ── the sticker recipe: cream die-cut, ink keyline, hard shadow, never a gradient ───────────────────────────── */ .stk { background: var(--paper); border: var(--edge); border-radius: 10px; box-shadow: 6px 8px 0 var(--shadow); } /* ── header: the lawn under the sky, the way every screen in the game is built ───────────────────────────────── */ header { background: var(--sky); padding: 56px 0 0; border-bottom: 46px solid var(--ground); position: relative; z-index: 1; /* the header's lawn draws over the lead shot's shadow, not under it */ } header .wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; } header img.icon { width: 132px; height: 132px; border-radius: 26px; border: var(--edge); box-shadow: 6px 8px 0 var(--shadow); } h1 { font-size: clamp(42px, 8vw, 68px); line-height: .95; margin: 0 0 6px; letter-spacing: -1px; font-weight: 900; } .sub { font-size: clamp(19px, 3.4vw, 25px); font-weight: 800; margin: 0 0 4px; } .pitch { margin: 0; font-weight: 600; max-width: 46ch; } .head-text { flex: 1 1 320px; min-width: 0; margin-bottom: 30px; } /* ── signs: the game's exits are boards, so the links are boards ─────────────────────────────────────────────── */ .signs { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 0; } .sign { display: inline-block; padding: 13px 22px; font-weight: 900; font-size: 16px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--paper); border: var(--edge); border-radius: 8px; box-shadow: 4px 6px 0 var(--shadow); } .sign.primary { background: var(--accent); color: var(--paper); } .sign:hover { transform: translate(1px, 2px); box-shadow: 2px 3px 0 var(--shadow); } .sign.soon { background: var(--accent2); color: var(--ink); cursor: default; } .sign.soon:hover { transform: none; box-shadow: 4px 6px 0 var(--shadow); } /* ── body sections ──────────────────────────────────────────────────────────────────────────────────────────── */ main { background: var(--ground); padding: 0 0 64px; } section { margin: 0 0 40px; } .panel { padding: 26px 28px; } h2 { font-size: 27px; margin: 0 0 14px; font-weight: 900; letter-spacing: -.3px; } h3 { font-size: 19px; margin: 24px 0 6px; font-weight: 900; } h3:first-of-type { margin-top: 0; } p { margin: 0 0 14px; } p:last-child { margin-bottom: 0; } a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ── the shots: each one a sticker on the lawn, with a hanging tag ───────────────────────────────────────────── */ /* The lead picture straddles the horizon, so the lawn reads as ground the stickers sit on rather than as a band between two sections. */ .shots { display: grid; gap: 22px; margin-top: -34px; } figure { margin: 0; } figure img { display: block; width: 100%; height: auto; border: var(--edge); border-radius: 10px; box-shadow: 6px 8px 0 var(--shadow); background: var(--sky); } figcaption { display: inline-block; margin: -14px 0 0 18px; position: relative; padding: 7px 14px; background: var(--accent2); border: var(--edge); border-radius: 4px; box-shadow: 3px 4px 0 var(--shadow); font-weight: 800; font-size: 14px; transform: rotate(-2deg); } /* ── the feature list: each line a tag ───────────────────────────────────────────────────────────────────────── */ ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { margin: 0 0 11px; padding-left: 26px; position: relative; } ul.plain li::before { content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 11px; background: var(--accent); border: 2px solid var(--ink); border-radius: 2px; } dl { margin: 0; } dt { font-weight: 900; margin: 18px 0 4px; } dt:first-child { margin-top: 0; } dd { margin: 0 0 4px; } footer { background: var(--ink); color: var(--paper); padding: 30px 0; font-size: 14px; } footer a { color: var(--accent2); } footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; } .note { font-size: 14px; opacity: .72; } .mail { font-weight: 900; font-size: 19px; } @media (min-width: 720px) { .shots { grid-template-columns: 1fr 1fr; } .shots figure.wide { grid-column: 1 / -1; } } @media (max-width: 480px) { header { padding-top: 34px; border-bottom-width: 54px; } .panel { padding: 20px 18px; } .sign { padding: 12px 17px; font-size: 15px; } } /* ── /s, where a shared sale lands (D136) ────────────────────────────────────────────────────────────────────── */ /* The card IS the page. It already says the house, the figure and the game, so repeating any of that underneath would be the duplicate caption the game's own words gate exists to refuse. One thing to do: play. */ .share-page { padding-top: 40px; padding-bottom: 56px; } .share-card { display: block; width: 100%; height: auto; padding: 0; } .share-page .signs { justify-content: center; }