/* ═══════════════════════════════════════════════════════════════════════════ Word Unscrambler — style.css Clean, modern, minimal. System font stack (no external fonts = fast load). Dark/light themes via [data-theme] on . ═════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ─────────────────────────────────────────────────────────── */ :root { --bg: #f6f7fb; --bg-elevated: #ffffff; --text: #1a1d29; --text-soft: #5a6072; --border: #e3e6ef; --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef0ff; --danger: #dc2626; --chip-bg: #f0f2f9; --chip-hover: #e6e9f6; --ad-bg: #f1f2f7; --shadow: 0 1px 3px rgba(20, 24, 48, 0.06), 0 8px 24px rgba(20, 24, 48, 0.06); --radius: 14px; --radius-sm: 9px; } html[data-theme="dark"] { --bg: #0f1117; --bg-elevated: #191c26; --text: #e8eaf2; --text-soft: #9aa1b5; --border: #2a2f3e; --accent: #818cf8; --accent-hover: #a5b0fb; --accent-soft: #232844; --danger: #f87171; --chip-bg: #222636; --chip-hover: #2b3044; --ad-bg: #14161f; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); } /* ── Base ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); transition: background 0.2s ease, color 0.2s ease; min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; } main.container { flex: 1; padding-top: 28px; padding-bottom: 48px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .link { font-weight: 600; } kbd { font-family: inherit; font-size: 0.85em; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); box-shadow: 0 1px 0 var(--border); } h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ── Header ────────────────────────────────────────────────────────────────── */ .site-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { font-size: 1.3rem; } .site-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; } .site-nav a { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-soft); font-weight: 500; font-size: 0.95rem; } .site-nav a:hover { background: var(--chip-bg); text-decoration: none; color: var(--text); } .site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; } .theme-toggle { font-size: 1.1rem; padding: 6px 10px; } /* ── Buttons & inputs ──────────────────────────────────────────────────────── */ .btn { font-family: inherit; font-size: 0.95rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; padding: 10px 18px; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.primary { background: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-hover); } .btn.ghost { background: var(--bg-elevated); border-color: var(--border); color: var(--text); } .btn.ghost:hover { border-color: var(--accent); color: var(--accent); } .btn.ghost.danger:hover { border-color: var(--danger); color: var(--danger); } .btn.small { padding: 6px 12px; font-size: 0.85rem; border-radius: 7px; } .input, .select { font-family: inherit; font-size: 1rem; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .input:focus, .select:focus, .rack-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .input.num { width: 84px; } /* ── Page title ────────────────────────────────────────────────────────────── */ .page-title { font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 800; text-align: center; letter-spacing: -0.02em; margin-bottom: 8px; } .page-subtitle { text-align: center; color: var(--text-soft); max-width: 560px; margin: 0 auto 28px; font-size: 1.02rem; } /* ── Tool card ─────────────────────────────────────────────────────────────── */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 24px; } .tool-card { padding: 20px; } .input-row { display: flex; gap: 10px; } .rack-input { flex: 1; font-family: inherit; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text); background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; min-width: 0; } .solve-btn { padding: 13px 22px; font-size: 1.05rem; } .hint { margin: 10px 2px 0; font-size: 0.88rem; color: var(--text-soft); } .example-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .example-label { font-size: 0.88rem; color: var(--text-soft); font-weight: 600; } /* ── Results toolbar ───────────────────────────────────────────────────────── */ .results-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .status { margin: 0; color: var(--text-soft); font-size: 0.95rem; flex: 1 1 240px; } .status strong { color: var(--text); } .status em { color: var(--text-soft); font-size: 0.85rem; } .toolbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctrl { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-soft); } .ctrl-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; } /* ── Filters panel ─────────────────────────────────────────────────────────── */ .filters-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; padding: 14px; background: var(--chip-bg); border-radius: var(--radius-sm); } .filters-panel[hidden] { display: none; } .filters-panel.open { display: grid; } /* ── Results ───────────────────────────────────────────────────────────────── */ .results { margin-top: 18px; } .empty { color: var(--text-soft); text-align: center; padding: 26px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); margin: 0; } .word-group { margin-bottom: 18px; } .group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .group-head h3 { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; color: var(--text-soft); } .group-count { font-size: 0.8rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; } .word-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .word-chip { display: inline-flex; align-items: baseline; gap: 7px; font-family: inherit; font-size: 1rem; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--chip-bg); color: var(--text); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease; } .word-chip:hover { background: var(--chip-hover); border-color: var(--accent); transform: translateY(-1px); } .chip-score { font-size: 0.75rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; } /* ── Ad slots (reserved space so ads don't shift layout) ──────────────────── */ .ad-slot { background: var(--ad-bg); border: 1px dashed var(--border); border-radius: var(--radius); min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-size: 0.8rem; margin-bottom: 24px; overflow: hidden; } .ad-top { min-height: 70px; margin: 0 0 0; border-radius: 0 0 var(--radius) var(--radius); border-top: none; } .ad-slot:empty::after { content: "Advertisement space — paste your AdSense unit here (see index.html comments)"; text-align: center; padding: 8px; opacity: 0.65; } /* Once a real ad unit is pasted, the placeholder text is hidden. */ .ad-slot:not(:empty)::after { display: none; } /* ── About section ─────────────────────────────────────────────────────────── */ .about-section h2 { font-size: 1.25rem; } .about-section p { color: var(--text-soft); margin: 0 0 12px; } /* ── Static pages (about / privacy) ───────────────────────────────────────── */ .prose h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); } .prose h2 { font-size: 1.2rem; margin-top: 28px; } .prose p, .prose li { color: var(--text-soft); } .prose ul, .prose ol { padding-left: 22px; } .prose li { margin-bottom: 6px; } .last-updated { font-size: 0.85rem; color: var(--text-soft); } /* ── Footer ────────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-elevated); padding: 24px 0 32px; margin-top: auto; } .footer-inner { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; } .footer-inner p { margin: 0; color: var(--text-soft); font-size: 0.9rem; } .footer-nav { display: flex; gap: 16px; } .footer-nav a { color: var(--text-soft); font-size: 0.9rem; font-weight: 500; } .footer-nav a:hover { color: var(--accent); text-decoration: none; } .footer-note { font-size: 0.78rem !important; opacity: 0.8; max-width: 560px; } /* ── Definition popup ──────────────────────────────────────────────────────── */ .def-panel { position: fixed; inset: 0; background: rgba(10, 12, 20, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; } .def-panel[hidden] { display: none; } .def-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 440px; width: 100%; max-height: 70vh; overflow-y: auto; padding: 20px; } .def-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .def-head h2 { margin: 0; font-size: 1.3rem; } .def-body p { color: var(--text-soft); margin: 0 0 10px; } .def-body p.def-loading { font-style: italic; } .def-foot { font-size: 0.85rem; margin-top: 12px; } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 560px) { .page-subtitle { font-size: 0.95rem; } .input-row { flex-direction: column; } .solve-btn { width: 100%; } .toolbar-controls { width: 100%; } .results-toolbar { flex-direction: column; align-items: stretch; } .toolbar-controls { justify-content: space-between; } .card { padding: 16px; } .header-inner { flex-wrap: wrap; } .site-nav a { padding: 6px 8px; } } /* ── Reduced motion ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }