thejayman77
067e77ed5a
Make Daily Word feel like a focused mobile app screen, not a page with a keyboard. * True viewport: while view==='play' && game==='word', a $effect locks body scroll and hides the site footer (mobile only), so the keyboard is genuinely pinned, not riding the document scroll. Effect cleanup ALWAYS removes the class on re-run or unmount, so leaving /play (back button OR any navigation) can never strand it. * Keyboard restyled on-brand + modern: flat off-white (--surface) keys with a hairline border, soft 11px radius, no heavy raised shadow, ~46px tall, ↵ / ⌫ glyphs, centered (max-width 430) instead of a full-bleed beige slab. * Tiles now size to fit BOTH width and the height left above the keyboard (--tile = min(cap, width/cols, (100dvh-budget)/rows), gap 4px), so the active row and keyboard are always visible — Long Word's 6×7 gets slightly smaller tiles. Real-device Safari/Chrome is the final check (100dvh + safe-area handling). 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; } }
|
||
|
||
/* Daily Word on mobile becomes a focused, full-viewport screen: lock body scroll
|
||
and hide the site footer so the on-screen keyboard is truly pinned (not riding
|
||
the page's scroll). The .playing-word class is toggled by /play and always
|
||
removed on navigation via effect cleanup. Mobile only — desktop is unaffected. */
|
||
@media (max-width: 720px) {
|
||
html.playing-word, html.playing-word body { overflow: hidden; }
|
||
html.playing-word footer.site { display: none; }
|
||
}
|