thejayman77
6ef58e3915
Per Codex audit. test_wordsearch_endpoint now asserts the exact promise — small 6, med 9, large 13, pairwise-disjoint. app.css comment updated to .playing-game (the class was renamed when the focused viewport was generalized to both games). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
77 lines
2.7 KiB
CSS
77 lines
2.7 KiB
CSS
/* Inter (variable, latin) — self-hosted, no external font calls. Used for
|
||
refined UI labels / kicker tags. The weight axis (100–900) is free to tune. */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
|
||
font-weight: 100 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* Upbeat Bytes calm design system.
|
||
Sand, sea, and sun: warm paper surfaces, a vivid-azure accent, gold highlight,
|
||
a serif voice for headlines, strong readable contrast, generous space.
|
||
No urgency colors (no red). Built around the logo's #0083ad azure. */
|
||
:root {
|
||
--bg: #f7f4ec;
|
||
--surface: #fffdf8;
|
||
--ink: #16263a;
|
||
--muted: #5d6b78;
|
||
--accent: #0083ad;
|
||
--accent-deep: #006b8e;
|
||
--accent-soft: #e0eef3;
|
||
--line: #e8e3d8;
|
||
--gold: #b3892b;
|
||
--gold-bright: #e6cd42;
|
||
|
||
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
|
||
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
--label: "Inter", var(--sans);
|
||
|
||
--maxw: 880px;
|
||
--radius: 16px;
|
||
--shadow: 0 1px 2px rgba(40, 38, 28, 0.04), 0 10px 30px rgba(40, 38, 28, 0.055);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
font-size: 17px;
|
||
line-height: 1.62;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
h1, h2, h3 {
|
||
font-family: var(--serif);
|
||
font-weight: 600;
|
||
line-height: 1.18;
|
||
letter-spacing: -0.012em;
|
||
margin: 0;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
img { max-width: 100%; display: block; }
|
||
button { font-family: inherit; cursor: pointer; }
|
||
::selection { background: var(--accent-soft); }
|
||
|
||
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
|
||
.muted { color: var(--muted); }
|
||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
|
||
|
||
/* a soft, slow fade for content as it arrives — calm, not flashy */
|
||
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
|
||
.rise { animation: rise 0.5s ease both; }
|
||
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } html { scroll-behavior: auto; } }
|
||
|
||
/* A puzzle on mobile becomes a focused, full-viewport screen: lock body scroll and
|
||
hide the site footer so it feels like a game, not a web page (keyboard/grid
|
||
truly pinned, not riding the page scroll). The .playing-game class is toggled by
|
||
/play and always removed on navigation via effect cleanup. Mobile only. */
|
||
@media (max-width: 720px) {
|
||
html.playing-game, html.playing-game body { overflow: hidden; }
|
||
html.playing-game footer.site { display: none; }
|
||
}
|