/* site.css — page chrome, landing page, loading, menus, toast. sudoku.css owns the in-game styles. */ :root { --bg: oklch(0.96 0.014 70); --surface: oklch(0.985 0.008 70); --ink: oklch(0.28 0.025 35); --ink-soft: oklch(0.50 0.025 35); --ink-faint: oklch(0.70 0.020 35); --line: oklch(0.88 0.015 60); --line-strong: oklch(0.55 0.04 30); --accent: oklch(0.62 0.13 30); --accent-ink: oklch(0.99 0.005 80); --display: "Instrument Serif", "Newsreader", Georgia, serif; --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* When the React layer toggles dark mode, it adds .dark to . We match the page chrome so the body extends the dark bg outside .sk-root. */ :root.dark { --bg: oklch(0.20 0.018 35); --surface: oklch(0.25 0.020 35); --ink: oklch(0.95 0.012 70); --ink-soft: oklch(0.74 0.018 60); --ink-faint: oklch(0.55 0.018 60); --line: oklch(0.36 0.020 35); --line-strong: oklch(0.78 0.04 35); --accent: oklch(0.74 0.13 30); --accent-ink: oklch(0.20 0.018 35); } html, body { transition: background-color 0.2s ease; } @media (prefers-color-scheme: dark) { :root:not(.dark):not(.light) { --bg: oklch(0.20 0.018 35); --surface: oklch(0.25 0.020 35); --ink: oklch(0.95 0.012 70); --ink-soft: oklch(0.74 0.018 60); --ink-faint: oklch(0.55 0.018 60); --line: oklch(0.36 0.020 35); --line-strong: oklch(0.78 0.04 35); --accent: oklch(0.74 0.13 30); --accent-ink: oklch(0.20 0.018 35); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html, body, #root { min-height: 100vh; /* Use dynamic viewport units on iOS Safari to avoid the 100vh URL-bar bug. */ min-height: 100dvh; } #root { display: flex; flex-direction: column; } button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } a { color: inherit; } /* ─────────────────── Landing page ─────────────────── */ .landing { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 24px) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 24px); text-align: center; } .landing-inner { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 28px; padding: 24px 0 48px; } .landing-mark { width: 32px; height: 32px; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; border: 1.5px solid var(--line-strong); border-radius: 5px; padding: 3px; margin: 0 auto 4px; } .landing-mark span { background: currentColor; opacity: 0.18; border-radius: 1.5px; } .landing-mark span:first-child { background: var(--accent); opacity: 1; } .landing h1 { font-family: var(--display); font-size: clamp(40px, 9vw, 64px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; } .landing .tagline { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); } .landing form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; justify-content: center; } .landing input[type="text"] { flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 16px; font: 500 16px/1 var(--ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .landing input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .landing button { height: 48px; padding: 0 22px; font: 500 14px/1 var(--ui); letter-spacing: 0.02em; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 14px; cursor: pointer; transition: filter 0.15s, transform 0.08s; } .landing button:hover { filter: brightness(1.05); } .landing button:active { transform: translateY(1px); } .landing button.secondary { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .landing .difficulty { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .landing .difficulty button { height: 38px; padding: 0 16px; font-size: 13px; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; } .landing .difficulty button.on { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-color: var(--accent); color: var(--ink); } .landing .quick { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--ink-soft); } .landing .quick a { color: var(--ink-soft); border-bottom: 1px dotted var(--line-strong); text-decoration: none; padding-bottom: 1px; transition: color 0.15s; } .landing .quick a:hover { color: var(--ink); } .landing .hint { font-size: 13px; color: var(--ink-faint); line-height: 1.5; margin: 0; } .landing .hint code { background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--ink); padding: 2px 6px; border-radius: 6px; font: 500 12px var(--ui); } /* ─────────────────── Loading splash (game) ─────────────────── */ .sk-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 0; } .sk-loading-mark { width: 28px; height: 28px; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; border: 1.5px solid; border-radius: 5px; padding: 3px; animation: sk-pulse 1.6s ease-in-out infinite; } .sk-loading-mark span { background: currentColor; opacity: 0.18; border-radius: 1.5px; } .sk-loading-mark span:first-child { opacity: 1; } @keyframes sk-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } } /* ─────────────────── Header polish & menus ─────────────────── */ .sk-newgame-wrap { display: inline-flex; align-items: stretch; position: relative; border-radius: var(--btn-radius, 14px); } .sk-newgame-wrap .sk-newgame { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: -1px; } .sk-newgame-wrap .sk-newgame-more { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; width: 32px; } .sk-more-menu { position: absolute; right: 0; top: 100%; margin-top: 6px; display: flex; flex-direction: column; border: 1px solid; padding: 4px; min-width: 200px; z-index: 5; } .sk-meta-seed { font-size: 12px; letter-spacing: 0.02em; } .sk-puzzle-foot { text-align: center; font-size: 12px; letter-spacing: 0.01em; margin-top: 2px; } /* ─────────────────── Toast ─────────────────── */ .sk-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font: 500 13px var(--ui); letter-spacing: 0.01em; pointer-events: none; opacity: 0; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.2s; z-index: 100; box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--ink) 40%, transparent); } .sk-toast-on { opacity: 1; transform: translate(-50%, 0); } /* ─────────────────── iOS Safari polish ─────────────────── */ .sk-root { /* Use dynamic viewport so the iOS URL bar collapse doesn't fight us. */ height: 100dvh; max-height: 100dvh; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); } input, button, select, textarea { font-family: inherit; } /* Avoid iOS Safari font-size auto-zoom on input focus. */ @media (max-width: 640px) { .landing input[type="text"] { font-size: 16px; } }