/* Letter Toolbox ------------------------------------------------------------------ The visual idea is the wooden letter tile: warm paper in light mode, deep slate in dark, with the results grid as the one loud element on the page. Everything else stays quiet so a 500-word answer list is still scannable. Themes are driven by [data-theme] on , which the inline script in the sets before first paint. prefers-color-scheme only supplies the initial guess; the explicit attribute always wins so the toggle works in both directions. */ :root { --bg: #faf8f4; --surface: #ffffff; --surface-2: #f2ede4; --line: #e2dbcf; --text: #1b1917; --muted: #6f6960; --accent: #0e7c6b; --accent-ink:#ffffff; --tile: #f0c674; --tile-ink: #4a3410; --tile-edge: #d9a94a; --ok: #197a4a; --no: #a63c2f; --shadow: 0 1px 2px rgba(28,25,23,.06), 0 4px 14px rgba(28,25,23,.05); --radius: 12px; --wrap: 1080px; } :root[data-theme="dark"] { --bg: #14161a; --surface: #1c2027; --surface-2: #232830; --line: #333a45; --text: #e9e7e3; --muted: #9aa3af; --accent: #37c7ad; --accent-ink:#0b1512; --tile: #e0b25c; --tile-ink: #2a1d06; --tile-edge: #a97f33; --ok: #4ec98a; --no: #f08b7c; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; } a:hover { text-decoration-color: currentColor; } h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; } h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 780; } h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); font-weight: 700; } h3 { font-size: 1.02rem; font-weight: 700; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .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 { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } :where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- header ------------------------------------------------------ */ .site-head { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .head-inner { display: flex; align-items: center; gap: 18px; min-height: 62px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 0 0 auto; } .brand-tiles { display: inline-flex; gap: 3px; } .brand-tiles span { width: 22px; height: 22px; display: grid; place-items: center; background: var(--tile); color: var(--tile-ink); border-radius: 5px; border-bottom: 2px solid var(--tile-edge); font-size: .74rem; font-weight: 800; letter-spacing: 0; } .brand-name { font-weight: 750; letter-spacing: -.02em; font-size: 1.06rem; white-space: nowrap; } .brand-name span { color: var(--muted); font-weight: 600; } .nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; } .nav a { padding: 7px 11px; border-radius: 8px; font-size: .9rem; font-weight: 550; color: var(--muted); text-decoration: none; white-space: nowrap; } .nav a:hover { background: var(--surface-2); color: var(--text); } .nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 650; } .theme-btn { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); cursor: pointer; } .theme-btn:hover { color: var(--text); border-color: var(--muted); } .theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } .theme-btn .i-moon { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: none; } :root[data-theme="dark"] .theme-btn .i-moon { display: block; } /* ---- hero -------------------------------------------------------- */ main { padding-block: 34px 60px; } .hero { text-align: center; padding-block: 26px 10px; } .hero h1 { margin-bottom: .3em; } .hero h1 span { color: var(--accent); display: inline-block; } .sub { color: var(--muted); font-size: 1.08rem; max-width: 46ch; margin: 0 auto 26px; } .lede { color: var(--muted); margin: -.2em 0 1.4em; max-width: 62ch; } /* ---- breadcrumbs ------------------------------------------------- */ .crumbs { margin: -8px 0 14px; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: .82rem; color: var(--muted); } .crumbs li { display: inline-flex; align-items: center; gap: 6px; } .crumbs li + li::before { content: "\203A"; color: var(--line); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--accent); } .crumbs [aria-current] { color: var(--text); font-weight: 600; } /* ---- search ------------------------------------------------------ */ .search { margin: 0 0 26px; } .hero-search { max-width: 620px; margin-inline: auto; } .search-row { display: flex; gap: 8px; } .q { flex: 1 1 auto; min-width: 0; padding: 14px 16px; font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; background: var(--surface); color: var(--text); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .q::placeholder { color: var(--muted); font-weight: 400; letter-spacing: normal; opacity: .75; } .q:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .go { flex: 0 0 auto; padding: 0 22px; font-size: 1rem; font-weight: 650; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius); cursor: pointer; } .go:hover { filter: brightness(1.07); } .go:active { transform: translateY(1px); } .hint { font-size: .85rem; color: var(--muted); margin: 9px 2px 0; } .hint b { color: var(--text); font-family: ui-monospace, monospace; } .adv { margin-top: 12px; } .adv summary { cursor: pointer; font-size: .88rem; color: var(--muted); font-weight: 550; width: fit-content; } .adv summary:hover { color: var(--text); } .adv[open] summary { margin-bottom: 12px; } .filter-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .f { display: flex; flex-direction: column; gap: 5px; } .f span { font-size: .78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .f input { padding: 11px 13px; font-size: .95rem; font-family: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; } .f input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .rack-note { color: var(--muted); font-size: .92rem; margin: -12px 0 18px; } .rack-note b { color: var(--text); font-family: ui-monospace, monospace; letter-spacing: .08em; } /* ================================================================== Wordle grid ------------------------------------------------------------------ Five tiles, each a letter input plus a hidden three-state radio group. The radios stay in the DOM (visually hidden, never display:none) so the form submits and works without JavaScript, and so keyboard and screen-reader users get real radio semantics. ================================================================== */ .wordle-form { margin-bottom: 30px; } .wgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 440px; } .wtile { position: relative; } .wtile-l { width: 100%; aspect-ratio: 1; padding: 0; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.5rem, 1rem + 2.6vw, 2.1rem); font-weight: 700; text-transform: uppercase; background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: 10px; transition: background .14s ease, border-color .14s ease, color .14s ease; cursor: pointer; } .wtile-l:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* Colours match the game so the grid is readable at a glance. They are not theme variables: green and yellow mean the same thing in both themes, and re-tinting them per theme would break the mapping. */ .wtile.state-1 .wtile-l { background: #c9a227; border-color: #c9a227; color: #fff; } .wtile.state-2 .wtile-l { background: #3a8a52; border-color: #3a8a52; color: #fff; } /* Colour-blind safety: colour alone never carries the meaning. Each tile also shows a positional marker. */ .wtile::after { position: absolute; right: 5px; top: 3px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; opacity: .85; pointer-events: none; } .wtile.state-1::after { content: "?"; color: #fff; } .wtile.state-2::after { content: "\2713"; color: #fff; } .wtile.state-0::after { content: "\2717"; color: var(--muted); } /* The radio group: visually hidden, fully operable. */ .wstates { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wstates input:focus-visible + span { outline: 2px solid var(--accent); } .wactions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; } .wreset { font-size: .88rem; color: var(--muted); text-decoration: none; } .wreset:hover { color: var(--accent); } .wempty { color: var(--muted); margin-top: 22px; } /* Suggested next guess — the single most useful thing on the page, so it is the loudest element after the grid. */ .wsuggest { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 24px 0 22px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); } .ws-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .ws-word { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .1em; color: var(--accent); text-decoration: none; } .ws-why { font-size: .85rem; color: var(--muted); } .wordle-words a { text-transform: uppercase; letter-spacing: .08em; } .wordle-words.dim a { opacity: .72; } .wother { margin-top: 6px; } .wother summary { list-style: none; cursor: pointer; padding: 10px 0; font-size: .88rem; color: var(--muted); font-weight: 550; display: inline-flex; align-items: center; gap: 7px; } .wother summary::-webkit-details-marker { display: none; } .wother summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; } .wother[open] summary::before { transform: rotate(90deg); } .wother summary:hover { color: var(--text); } /* ---- results ----------------------------------------------------- */ .results { margin-top: 6px; } .results-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .count { margin: 0; font-size: 1.15rem; } .capped { font-size: .87rem; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin: 0 0 18px; } .grp { margin-bottom: 26px; } .grp-h { display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 10px; } .grp-n { font-size: .74rem; font-weight: 650; letter-spacing: 0; background: var(--surface-2); color: var(--muted); padding: 1px 7px; border-radius: 20px; } .words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .words li { display: flex; } .words a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 9px; color: var(--text); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .96rem; font-weight: 600; letter-spacing: .04em; transition: transform .08s ease, border-color .12s ease, background .12s ease; } .words a:hover { background: var(--tile); color: var(--tile-ink); border-color: var(--tile-edge); transform: translateY(-1px); } .pts { font-size: .72rem; font-weight: 700; letter-spacing: 0; color: var(--muted); background: var(--surface-2); padding: 0 5px; border-radius: 4px; min-width: 18px; text-align: center; } .words a:hover .pts { background: color-mix(in srgb, var(--tile-ink) 15%, transparent); color: var(--tile-ink); } .words.inline a { font-size: 1rem; } .empty { text-align: center; padding: 48px 20px; background: var(--surface-2); border-radius: var(--radius); } .empty-t { font-size: 1.1rem; font-weight: 650; margin: 0 0 6px; } .empty-h { color: var(--muted); margin: 0; } /* JS swaps this on while a fetch is in flight — results dim rather than disappear, so the page does not jump. */ .results.busy { opacity: .5; transition: opacity .12s ease .06s; } /* ---- definitions -------------------------------------------------- */ /* A word with a gloss becomes a full-width row rather than a tile, so the definition has somewhere to live. Words without one keep the compact tile shape, and the two sit together in the same wrapping list. */ .words li.has-def { flex: 1 1 100%; } .words li.has-def a { border-radius: 9px 9px 0 0; border-bottom-width: 1px; } .words li.has-def { flex-direction: column; align-items: flex-start; gap: 0; } .words .def { display: block; width: 100%; padding: 7px 12px 9px; background: var(--surface-2); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; font-size: .84rem; line-height: 1.45; color: var(--muted); } .defs { margin-top: 30px; } .defs h2 { font-size: 1.1rem; } .def-lemma { color: var(--muted); font-size: .92rem; margin: -.3em 0 1em; } .def-group { margin-bottom: 18px; } .def-pos { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 7px; } .def-list { margin: 0; padding-left: 1.3em; color: var(--text); } .def-list li { margin-bottom: 7px; line-height: 1.55; } .def-src { font-size: .78rem; color: var(--muted); opacity: .8; margin-top: 16px; } .def-src a { color: inherit; } /* ---- copy button + scrambler list --------------------------------- */ .copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .85rem; font-weight: 550; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .copy-btn:hover { border-color: var(--accent); color: var(--accent); } .copy-btn.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .scrambles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .scrambles li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 10px; } .sc-out { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .16em; color: var(--tile-ink); background: var(--tile); padding: 4px 11px; border-radius: 6px; } :root[data-theme="dark"] .sc-out { color: var(--tile-ink); } .sc-arrow { color: var(--muted); } .sc-in { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); text-decoration: none; font-size: .95rem; } .sc-in:hover { color: var(--accent); } .go-block { width: 100%; margin-top: 14px; padding-block: 13px; } /* ---- cards / chips / intro --------------------------------------- */ .tools-grid { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .card { position: relative; display: block; padding: 20px 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease; } .card:hover { transform: translateY(-2px); border-color: var(--accent); } .card h3 { margin-bottom: .35em; } .card p { margin: 0; color: var(--muted); font-size: .92rem; } .card-go { position: absolute; right: 18px; top: 18px; color: var(--accent); font-size: 1.05rem; opacity: 0; transition: opacity .12s ease; } .card:hover .card-go { opacity: 1; } .browse { margin-top: 46px; } .browse h2 { margin-top: 30px; font-size: 1.05rem; } .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .chips a { display: inline-block; padding: 6px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; font-size: .88rem; text-decoration: none; color: var(--text); } .chips a:hover { border-color: var(--accent); color: var(--accent); } .intro { margin-top: 34px; max-width: 66ch; } .intro h2 { margin-top: 28px; } .intro p { color: var(--muted); } .intro b { color: var(--text); font-family: ui-monospace, monospace; } /* ---- word page --------------------------------------------------- */ .word-page h1 { font-family: ui-monospace, monospace; letter-spacing: .06em; } .verdict { font-size: 1.1rem; font-weight: 600; margin: 0 0 22px; } .verdict.yes { color: var(--ok); } .verdict.no { color: var(--no); } .scorecards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .scorecard { flex: 1 1 130px; padding: 16px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: var(--radius); } .sc-n { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent); } .sc-l { display: block; font-size: .8rem; color: var(--muted); margin-top: 6px; } /* ---- related / prose --------------------------------------------- */ .related { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); } .related h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .related a { display: inline-block; padding: 6px 13px; border-radius: 20px; background: var(--surface-2); font-size: .87rem; text-decoration: none; color: var(--text); } .related a:hover { background: var(--accent); color: var(--accent-ink); } .prose { max-width: 66ch; } .prose h2 { margin-top: 32px; } .prose p { color: var(--muted); } .prose .fine { font-size: .82rem; margin-top: 34px; } /* ---- footer ------------------------------------------------------ */ .site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 56px; padding-top: 40px; } .foot-grid { display: grid; gap: 32px; /* Brand column takes the space; the three link columns size to content and wrap under it on narrow screens without a breakpoint. */ grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, auto)); padding-bottom: 34px; } .foot-brand .brand { margin-bottom: 14px; } .foot-tag { color: var(--muted); font-size: .92rem; margin: 0 0 12px; max-width: 34ch; } .foot-note { color: var(--muted); font-size: .82rem; margin: 0; opacity: .85; max-width: 40ch; } .foot-col h2 { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; } .foot-col ul { list-style: none; margin: 0; padding: 0; } .foot-col li { margin-bottom: 9px; } .foot-col a { font-size: .9rem; color: var(--text); text-decoration: none; } .foot-col a:hover { color: var(--accent); } .foot-bottom { border-top: 1px solid var(--line); padding-block: 20px 34px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; } .foot-copy { margin: 0; font-size: .86rem; color: var(--text); font-weight: 550; } .foot-fine { margin: 0; font-size: .76rem; color: var(--muted); opacity: .8; max-width: 72ch; flex: 1 1 320px; } /* ================================================================== Length pills — the replacement for a native