/*-------------------------------------------------------------- # Sudoku page — design system --------------------------------------------------------------*/ :root { /* Ink / neutrals */ --ink-950: #15161b; --ink-800: #2b2d34; --ink-600: #565a65; --slate-500: #767c8a; --slate-300: #dadde4; --line: #e8eaef; /* Surfaces */ --paper: #fdfcfa; --canvas: #f3f1ec; --page-bg: #f7f6f2; /* Brand accent — brass / gold, restrained */ --gold-700: #8a6b1e; --gold-600: #a8863a; --gold-500: #c7a45c; --gold-100: #f7eed4; /* Status */ --success-700: #1f7a4d; --success-100: #e2f4ea; --error-600: #c0392b; --error-100: #fbe9e7; /* Elevated surfaces (cells, pills, buttons-on-card) and the translucent action bar — these flip in the dark override below */ --surface-0: #ffffff; --overlay-bg: rgba(253, 252, 250, 0.92); --scrim: rgba(21, 22, 27, 0.5); /* Geometry */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(21, 22, 27, 0.06); --shadow-md: 0 10px 30px -12px rgba(21, 22, 27, 0.22); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Type */ --font-display: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", sans-serif; /* Motion */ --duration-fast: 150ms; --duration-base: 420ms; --ease-standard: cubic-bezier(0.22, 0.8, 0.24, 1); /* Mobile action bar height, used to pad content above it */ --action-bar-h: 76px; } /*-------------------------------------------------------------- # Dark theme # Same token names, night-appropriate values. Toggled by # Sudoku-theme.js setting data-theme="dark" on ; the inline # head script sets it pre-paint so there's no flash. --------------------------------------------------------------*/ :root[data-theme="dark"] { --ink-950: #f4f3f0; --ink-800: #dadbe0; --ink-600: #a7abb6; --slate-500: #8b909c; --slate-300: #3b3e48; --line: #2e313b; --paper: #1c1e25; --canvas: #23262f; --page-bg: #15161b; --gold-700: #e0bb73; --gold-600: #c7a45c; --gold-500: #a8863a; --gold-100: #3a3220; --success-700: #5fd39a; --success-100: #163526; --error-600: #e58a7c; --error-100: #3a201d; --surface-0: #23262f; --overlay-bg: rgba(21, 22, 27, 0.85); --scrim: rgba(0, 0, 0, 0.6); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55); } /*-------------------------------------------------------------- # Reset & base --------------------------------------------------------------*/ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.sudoku-page { margin: 0; font-family: var(--font-body); color: var(--ink-800); background: var(--page-bg); -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); } .sudoku-page h1, .sudoku-page h2, .sudoku-page h3 { font-family: var(--font-display); color: var(--ink-950); margin: 0; } .sudoku-page p { line-height: 1.6; } .sudoku-page a { color: var(--gold-700); } .sudoku-page :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; } /*-------------------------------------------------------------- # Ambient background canvas # Sits fixed behind everything; drawn/animated by # Sudoku-background.js. Calm, low-opacity, respects # prefers-reduced-motion (handled in JS). --------------------------------------------------------------*/ .ambient-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /*-------------------------------------------------------------- # Page shell / layout --------------------------------------------------------------*/ .page-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px) + var(--space-5)); } .site-brand { padding: var(--space-4) var(--space-5) var(--space-2); display: flex; align-items: center; justify-content: center; position: relative; } /*-------------------------------------------------------------- # Theme toggle --------------------------------------------------------------*/ .theme-toggle { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--slate-300); background: var(--paper); color: var(--gold-700); cursor: pointer; font-size: 1rem; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .theme-toggle:hover { border-color: var(--gold-600); background-color: var(--gold-100); } .theme-toggle:active { transform: translateY(-50%) scale(0.92); } .theme-toggle .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-flex; } @media (min-width: 640px) { .theme-toggle { right: var(--space-5); } } .brand-mark { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-600) !important; text-decoration: none; opacity: 0.8; } .brand-mark:hover { color: var(--gold-700) !important; opacity: 1; } .container { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 var(--space-4) var(--space-6); flex: 1; } @media (min-width: 640px) { .container { padding: 0 var(--space-5) var(--space-7); } } /*-------------------------------------------------------------- # Hero --------------------------------------------------------------*/ .hero { text-align: center; padding: var(--space-4) 0 var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .hero-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); } .hero-title { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -0.01em; } .hero-sub { color: var(--ink-600); font-size: 0.98rem; max-width: 34ch; margin: 0; } /* Small decorative 3x3 glyph — a miniature echo of the board itself */ .hero-glyph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 34px; height: 34px; margin-top: var(--space-2); padding: 3px; border: 1.5px solid var(--ink-950); border-radius: 6px; background: var(--paper); } .glyph-cell { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.5rem; font-weight: 700; color: var(--gold-600); background: var(--canvas); border-radius: 2px; } .glyph-cell.is-empty { background: transparent; } /*-------------------------------------------------------------- # How-to-play disclosure --------------------------------------------------------------*/ details.how-to-play { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); } details.how-to-play summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink-950); list-style: none; display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) 0; } details.how-to-play summary::-webkit-details-marker { display: none; } details.how-to-play summary::after { content: "+"; font-size: 1.1rem; color: var(--gold-600); transition: transform var(--duration-fast) var(--ease-standard); } details.how-to-play[open] summary::after { transform: rotate(45deg); } details.how-to-play p { color: var(--ink-600); font-size: 0.92rem; margin: var(--space-2) 0 0; } /*-------------------------------------------------------------- # Generic card --------------------------------------------------------------*/ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } /*-------------------------------------------------------------- # Controls panel --------------------------------------------------------------*/ .controls-panel { padding: var(--space-4); margin-bottom: var(--space-5); display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 560px) { .controls-panel { grid-template-columns: 1fr 1fr; } .field-toggles { grid-column: 1 / -1; display: flex; gap: var(--space-5); } } .field label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate-500); margin-bottom: var(--space-2); } .select-wrap { position: relative; } .select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-600); border-bottom: 2px solid var(--ink-600); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .sudoku-select { appearance: none; -webkit-appearance: none; width: 100%; padding: 13px 40px 13px 16px; border: 1.5px solid var(--slate-300); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.98rem; font-weight: 500; color: var(--ink-800); background-color: var(--paper); min-height: 48px; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .sudoku-select:hover { border-color: var(--gold-500); } .sudoku-select:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 4px var(--gold-100); } .field-toggles { display: flex; flex-direction: column; gap: var(--space-3); } .toggle-row { display: flex; align-items: center; gap: var(--space-3); } /* Checkbox restyled as a switch */ .toggle-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 25px; border-radius: var(--radius-pill); background: var(--slate-300); cursor: pointer; flex: 0 0 auto; transition: background-color var(--duration-fast) var(--ease-standard); } .toggle-row input[type="checkbox"]::before { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-standard); } .toggle-row input[type="checkbox"]:checked { background: var(--gold-600); } .toggle-row input[type="checkbox"]:checked::before { transform: translateX(17px); } .toggle-row label { font-size: 0.92rem; font-weight: 500; color: var(--ink-800); cursor: pointer; } /*-------------------------------------------------------------- # Message box --------------------------------------------------------------*/ .message-box { border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: 0.92rem; font-weight: 500; margin-bottom: var(--space-5); border: 1px solid transparent; animation: message-in var(--duration-base) var(--ease-standard) both; } .message-box.hidden { display: none; } .message-box.info { background: var(--success-100); color: var(--success-700); border-color: rgba(31, 122, 77, 0.18); } .message-box.error { background: var(--error-100); color: var(--error-600); border-color: rgba(192, 57, 43, 0.18); } @keyframes message-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /*-------------------------------------------------------------- # Board section --------------------------------------------------------------*/ .board-section { display: flex; flex-direction: column; align-items: center; } .board-frame { padding: var(--space-4); width: 100%; display: flex; flex-direction: column; align-items: center; } @media (min-width: 480px) { .board-frame { padding: var(--space-5); } } #sudokuGridWrap { display: flex; justify-content: center; width: 100%; overflow-x: auto; padding-bottom: var(--space-1); } table.sudoku-grid { border-collapse: collapse; border: 2.5px solid var(--ink-950); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md); animation: rise var(--duration-base) var(--ease-standard) both; } @keyframes rise { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } } .sudoku-grid td { position: relative; width: clamp(30px, 9vw, 46px); height: clamp(30px, 9vw, 46px); text-align: center; vertical-align: middle; border: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(0.85rem, 3.4vw, 1.2rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-700); background-color: var(--surface-0); cursor: pointer; user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .sudoku-grid td.cell-given { color: var(--ink-950); font-weight: 800; background-color: var(--canvas); cursor: default; } .sudoku-grid td.cell-hint { color: var(--success-700); } .sudoku-grid td.box-border-right { border-right: 2px solid var(--ink-950); } .sudoku-grid td.box-border-bottom { border-bottom: 2px solid var(--ink-950); } .sudoku-grid td.cell-peer { background-color: var(--canvas); } .sudoku-grid td.cell-same-value { background-color: var(--gold-100); } .sudoku-grid td.cell-selected { background-color: var(--gold-100) !important; box-shadow: inset 0 0 0 2px var(--gold-600); } .sudoku-grid td.cell-conflict { color: var(--error-600); background-color: var(--error-100) !important; } .sudoku-grid td.cell-complete { background-color: var(--success-100); } .sudoku-grid td.cell-given.cell-complete { background-color: var(--success-100); } .sudoku-grid td:focus-visible { outline: 3px solid var(--gold-500); outline-offset: -3px; } .sudoku-grid td.cell-in { opacity: 0; transform: scale(0.85); animation: cell-in var(--duration-base) var(--ease-standard) forwards; } @keyframes cell-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } } .puzzle-solved { animation: solved-glow 1.4s var(--ease-standard); } @keyframes solved-glow { 0% { box-shadow: var(--shadow-md); } 35% { box-shadow: 0 0 0 6px var(--gold-100), var(--shadow-md); } 100% { box-shadow: var(--shadow-md); } } @media (prefers-reduced-motion: reduce) { .sudoku-grid td.cell-in, table.sudoku-grid, .puzzle-solved, .message-box { animation: none !important; opacity: 1 !important; transform: none !important; } } /*-------------------------------------------------------------- # Number pad --------------------------------------------------------------*/ #numberPad { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); max-width: 100%; } .numpad-btn { min-width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-sm); background-color: var(--surface-0); border: 1.5px solid var(--slate-300); color: var(--ink-800); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .numpad-btn:hover { background-color: var(--gold-100); border-color: var(--gold-600); } .numpad-btn:active { transform: scale(0.95); background-color: var(--gold-100); } .numpad-btn.numpad-erase { color: var(--error-600); font-size: 1.1rem; } /*-------------------------------------------------------------- # Stats line --------------------------------------------------------------*/ #statsLine { text-align: center; font-size: 0.78rem; color: var(--slate-500); font-variant-numeric: tabular-nums; margin-top: var(--space-4); } /*-------------------------------------------------------------- # Action bar — fixed bottom on mobile (thumb reach), # becomes an inline row above the board on larger screens. --------------------------------------------------------------*/ .action-row { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--overlay-bg); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; cursor: pointer; border: 1.5px solid transparent; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } .btn:active { transform: translateY(1px); } .btn-primary { flex: 1.3 1 0; color: #ffffff; background: linear-gradient(180deg, var(--gold-600), var(--gold-700)); box-shadow: 0 6px 16px -6px rgba(138, 107, 30, 0.55); } .btn-primary:hover { filter: brightness(1.05); } .btn-primary[aria-busy="true"] { opacity: 0.85; cursor: progress; } .btn-secondary { color: var(--ink-800); background-color: var(--surface-0); border-color: var(--slate-300); } .btn-secondary:hover { background-color: var(--gold-100); border-color: var(--gold-600); } .btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; background-color: var(--surface-0); } .button-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #ffffff; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .button-spinner { animation-duration: 1.6s; } } @media (min-width: 720px) { .action-row { position: static; background: none; backdrop-filter: none; border-top: none; padding: 0; margin-bottom: var(--space-5); } .btn { flex: 0 1 auto; padding: 0 var(--space-5); } .btn-primary { flex: 0 1 auto; } .page-shell { padding-bottom: var(--space-6); } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .footer { text-align: center; padding: var(--space-5) var(--space-4); font-size: 0.78rem; color: var(--slate-500); } .footer.center { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; } .footer_text { color: var(--slate-500); } .footer_text a.footer_text { color: var(--gold-700) !important; text-decoration: none; font-weight: 600; } .footer_text a.footer_text:hover { text-decoration: underline; } /*-------------------------------------------------------------- # Small-screen tightening --------------------------------------------------------------*/ @media (max-width: 380px) { .btn { font-size: 0.84rem; padding: 0 var(--space-2); } .numpad-btn { min-width: 38px; min-height: 38px; font-size: 0.92rem; } } /*-------------------------------------------------------------- # by: Gamal Nabih | 1LineArt Studio | https://1lineart.com --------------------------------------------------------------*/