/* ================================================================== puzzles.css — the one look for the whole puzzle site. Styled after the NYT Games hub. The rule that makes it work, and the one thing not to break: the PAGE is black and white — white paper, black type, thin grey rules — and ALL of the colour lives inside the little square game marks and the one accent a game page sets for itself. Nothing else is ever tinted. Tint the cards or the background and the whole effect collapses. Every game page links this file and sets ONE line: and then uses --accent for its own furniture. That is the entire theming system; do not hand-roll a per-game palette. House rules that differ from NYT on purpose: - NO pills. Text buttons are 6px rounded rectangles. (Circular icon buttons are the one exception.) - NO gradients. Flat solid fills only. ================================================================== */ :root{ --ink:#121212; --ink2:#5a5a5a; --ink3:#8b8b8b; --paper:#ffffff; --line:#e2e2e2; --rule:#121212; /* the heavy section rule */ --accent:#121212; /* each game page overrides this, once */ /* one flat colour per game — the only colour on the hub */ --c-nine:#1b4f9c; --c-set:#7d5ba6; --c-groups:#c9a227; --c-worlds:#3f7f78; --c-pretend:#b05a8f; --c-strand:#3f7fbf; --c-order:#c4603d; --c-odd:#2f7d7a; --c-crop:#a34e78; --c-pair:#4a5fa8; --c-mini:#5f7a3f; --c-rebus:#b0603a; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--paper); color:var(--ink); font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; } a{color:inherit;text-decoration:none} [hidden]{display:none !important} /* [hidden] loses to any author display rule */ /* ---------- top rule bar ---------- */ .topbar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 18px;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--paper);z-index:10; } .mark{font-family:'Zilla Slab',Georgia,serif;font-weight:700;font-size:17px;letter-spacing:.02em} .topdate,.topback{ font-size:11px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--ink2); } .topback:active{color:var(--ink)} .wrap{max-width:960px;margin:0 auto;padding:0 18px} .wrap.narrow{max-width:560px} /* ---------- masthead ---------- */ .mast{padding:34px 0 26px;text-align:center;border-bottom:1px solid var(--line)} .mast h1{ font-family:'Zilla Slab',Georgia,serif;font-weight:700; font-size:44px;line-height:1.02;margin:0;letter-spacing:-.01em; } .mast .date{ margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--ink2); } .mast .sub{margin:14px auto 0;max-width:30em;font-size:15px;line-height:1.5;color:var(--ink2)} /* a game page's masthead is tighter and carries its accent as one hairline */ body.game .mast{padding:26px 0 20px;border-bottom:2px solid var(--accent)} body.game .mast h1{font-size:36px} /* ---------- section headings ---------- */ .sec{padding:28px 0 6px} .sec h2{ font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; margin:0 0 2px;color:var(--ink); } .sec p{margin:0;font-size:13px;line-height:1.5;color:var(--ink2)} /* ---------- game marks ---------- */ .icon{ flex:0 0 auto;width:64px;height:64px;border-radius:6px; display:flex;align-items:center;justify-content:center; } .icon svg{width:38px;height:38px;display:block} /* ---------- buttons ---------- 6px rounded rectangles that HUG their text. Never full-width, never a pill. .btn-accent is for the one action a page is actually about. */ .btn{ display:inline-block;padding:11px 20px;border-radius:6px; background:var(--paper);color:var(--ink); border:1px solid var(--ink); font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.02em; cursor:pointer;-webkit-tap-highlight-color:transparent; } .btn:active{opacity:.72} .btn:disabled{opacity:.34;cursor:default} .btn-solid{background:var(--ink);color:#fff} .btn-accent{background:var(--accent);border-color:var(--accent);color:#fff} .btn-quiet{border-color:var(--line);color:var(--ink2);font-weight:500} /* a row of small choices (1 min / 2 min / 3 min) */ .choices{display:flex;gap:8px;flex-wrap:wrap} .choices .btn{padding:8px 14px;font-size:12.5px} .choices .btn.on{background:var(--accent);border-color:var(--accent);color:#fff} /* ---------- text input ---------- */ .field{ width:100%;font-family:inherit;font-size:16px;line-height:1.5;color:var(--ink); background:var(--paper);border:1px solid var(--line);border-radius:6px; padding:11px 12px;-webkit-text-size-adjust:100%; /* iOS must not zoom on focus */ } .field:focus{outline:none;border-color:var(--accent)} footer{ border-top:1px solid var(--rule);margin-top:34px;padding:22px 0 44px; text-align:center;font-size:12px;color:var(--ink3);line-height:1.6; } @media (min-width:720px){ .mast h1{font-size:60px} body.game .mast h1{font-size:44px} }