/* Every colour goes through a variable so the dark theme below can swap the whole palette. Glyph SVGs use currentColor and inherit --ink, so they follow the theme without touching the generated manifest. */ :root { --ink: #3a2a20; --paper: #f2e2c4; --accent: #8a3b2a; --line: #c9b083; --card: #fffaf0; --surface: #ffffff; --muted: #6b5a45; --muted-2: #7a6a55; --faint: #9a8a72; --hover: #fff0d8; --code-bg: #f3e7d2; --warn: #bb3322; --tint-placeholder: #fdf4ec; color-scheme: light; } /* Dark theme. Follows the OS by default; the toggle stamps data-theme on and must win in both directions, hence the explicit light block. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #ece0cc; --paper: #161210; --accent: #d98e6d; --line: #4a3d2e; --card: #211b15; --surface: #29221a; --muted: #bcab90; --muted-2: #a8967c; --faint: #8a7a63; --hover: #372c20; --code-bg: #2f2619; --warn: #ff9080; --tint-placeholder: #251e15; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #ece0cc; --paper: #161210; --accent: #d98e6d; --line: #4a3d2e; --card: #211b15; --surface: #29221a; --muted: #bcab90; --muted-2: #a8967c; --faint: #8a7a63; --hover: #372c20; --code-bg: #2f2619; --warn: #ff9080; --tint-placeholder: #251e15; color-scheme: dark; } /* Links had no rule at all, so they fell back to the browser's blue and purple — which reads as unstyled against the theme, and is unreadable on the dark palette. */ a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ink); } body { font-family: "Georgia", serif; background: var(--paper); color: var(--ink); max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; } /* Two columns: the working surface on the left, the (long) glyph reference on the right. The left column is sticky so the sounds box and the drawing stay on screen while the reference scrolls — the whole point being that you can see what you're doing while you pick glyphs. */ .layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 22px; align-items: start; } .col-work { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; } .col-ref { min-width: 0; } /* Stacked below the breakpoint, where sticky would eat the whole screen. */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } /* `display: contents` dissolves the column's own box so its children become grid items of .layout directly. That matters for the sticky below: a sticky element can never escape its parent's box, and the glyph reference is a SIBLING of this column — so while it was still a box, scrolling down into the reference left the output behind no matter what `top` said. */ .col-work { display: contents; } /* The reference is long, and scrolling it used to take the drawing off screen entirely. On narrow viewports the output pins to the top instead — it is the thing you are trying to look at while you scroll. Capped and scrollable so a long passage can't grow to eat the whole screen, which is what dropping the sticky originally avoided. */ .out-card { position: sticky; top: 0; z-index: 5; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 14px -10px rgba(0,0,0,.6); } /* Grid items, now that the column box is gone. */ .layout > .card, .layout > .col-ref { margin: 10px 0; } } .page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .page-head h1 { margin-bottom: 0; } .backlink { font-weight: bold; font-size: 0.95rem; white-space: nowrap; } .theme-toggle { margin-left: auto; padding: 6px 12px; font-family: inherit; font-size: 0.82rem; cursor: pointer; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 6px; } .theme-toggle:hover { background: var(--hover); color: var(--ink); } h1 { font-size: 1.6rem; margin-bottom: 4px; } .subtitle { color: var(--muted); margin-top: 0; font-size: 0.95rem; } .card { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: var(--card); margin: 20px 0; } .card h2 { margin: 0 0 4px; font-size: 1.15rem; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .syntax-help { font-size: 0.82rem; color: var(--muted-2); line-height: 1.55; margin: 6px 0 2px; } .syntax-help code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95em; } textarea, input[type=text] { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 10px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; } button.primary { margin-top: 10px; padding: 9px 16px; background: var(--accent); color: var(--paper); border: none; border-radius: 6px; cursor: pointer; font-size: 0.95rem; } button.primary:hover { opacity: 0.9; } .avatarian-output { margin-top: 16px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-height: 90px; display: flex; flex-wrap: wrap; align-items: stretch; } /* One rendered word plus its English/IPA caption. Captioning per word keeps a long sentence checkable without counting along the combined IPA line above the output. */ .avatarian-unit { display: inline-flex; flex-direction: column; align-items: center; margin: 6px 22px 12px 0; } .avatarian-unit .avatarian-word { margin: 0; } /* margin-top:auto pushes every caption to the bottom of the row, so they line up even though words differ in height (a block with two consonants is taller than one with a vowel). */ .avatarian-caption { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-top: 7px; line-height: 1.3; text-align: center; } .avatarian-caption .cap-en { font-size: 0.85rem; color: var(--ink); } /* B4 (item 21): a line under an attested word — one the corpus has actually seen written, as opposed to a spelling the pipeline derived or guessed. The corpus page (corpus.html, .word-en) is the working example and its legend; this is the same mark in the translator output. */ .avatarian-caption .cap-en.is-attested { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } .avatarian-caption .cap-ipa { font-size: 0.72rem; color: var(--muted-2); } /* A word whose sources are roughly evenly split on its spelling gets an asterisk — "your*" — rather than a badge. inline-block so the attested underline on the word doesn't draw through the mark; accent so it reads as a note without shouting. Rare by design (only a near-even split qualifies), so it never clutters a line. */ .avatarian-caption .cap-star { display: inline-block; margin-left: 1px; color: var(--accent); font-weight: 700; cursor: help; } /* Block layout lives in blocks.css — the site, the wiki gadget and the designer's live preview all have to agree on it, so it is one file rather than three copies. What stays here is page chrome. */ /* ── the writing surface ─────────────────────────────────────────── */ .field-label { display: block; font-weight: bold; margin-bottom: 6px; } #englishInput { font-size: 1.15rem; } .examples { font-size: 0.85rem; color: var(--muted-2); margin: 10px 0 0; } .chip { font-family: inherit; font-size: 0.85rem; padding: 3px 10px; margin: 0 4px 4px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; } .chip:hover { background: var(--hover); color: var(--ink); border-color: var(--accent); } /* ── the output, which is the point of the page ──────────────────── */ .out-card { padding-top: 12px; } .out-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .out-title { font-weight: bold; } .spacer { flex: 1 1 auto; } .out-bar button { font-family: inherit; font-size: 0.82rem; padding: 4px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; } .out-bar button:hover:not(:disabled) { background: var(--hover); color: var(--ink); border-color: var(--accent); } .out-bar button:disabled { opacity: 0.4; cursor: default; } .size-ctl { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); } .size-ctl input { width: 92px; } /* Export colour. Follows the page unless explicitly picked; the accent ring marks a pinned choice. See the handlers in index.html. */ .ink-ctl { display: inline-flex; align-items: center; } .ink-ctl input[type="color"] { width: 26px; height: 22px; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: 5px; background: none; } .ink-ctl input[type="color"].is-pinned { border-color: var(--accent); } .out-foot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; font-size: 0.8rem; color: var(--muted-2); } .out-foot .hint { color: var(--muted-2); } .out-foot .legend { margin: 0; } /* ── the sounds half of the writing card ─────────────────────────── */ /* Your text and the sounds it became live in ONE card, both always visible. They were split for a while, with the sounds collapsed behind a summary — but the sounds are what actually gets drawn, and seeing them change as you type is how the relationship between the two becomes obvious. A rule separates them without implying they are different things. */ .sounds-part { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .sounds-part .field-label { font-weight: bold; } /* Enough to build a line without the keyboard. `/` is the one you cannot click your way to from the glyph reference, which is what made click-only transcription impossible. */ .sound-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; } .tool-btn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; padding: 3px 9px; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); } .tool-btn:hover { background: var(--hover); color: var(--ink); border-color: var(--accent); } .sounds-part .fine { font-weight: normal; color: var(--muted-2); } #soundsInput { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; /* Grows to fit (see fitSounds), then scrolls. The cap is what stops a long transcription pushing the drawing off screen. */ max-height: 30vh; overflow-y: auto; resize: vertical; } /* Tighter on mobile, where the output is pinned to the top and every row the sounds box takes is a row the drawing doesn't get. */ @media (max-width: 900px) { #soundsInput { max-height: 22vh; } } .write.is-edited .sounds-part { border-top-color: var(--accent); } /* `display: flex` beats the [hidden] attribute's UA `display: none`, so without this rule the "you've edited these sounds by hand" banner was shown to everyone on every load, including people who had edited nothing. The JS was right all along — it sets .hidden, and .hidden was simply having no effect. */ .tune-note[hidden] { display: none; } .tune-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; } .tune-note button { font-family: inherit; font-size: 0.8rem; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; } .tune-note button:hover { background: var(--hover); color: var(--ink); } /* --- sounds -> likely English (js/reverse.js) ---------------------- */ .decode { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; } /* [hidden] loses to any display rule — the banner above shipped that bug for a week, so every hideable block here declares it. */ .decode[hidden] { display: none; } .decode-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .decode-label { font-size: 0.8rem; color: var(--faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .decode-hit { font-family: inherit; font-size: 0.82rem; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; } .decode-hit:hover { background: var(--hover); color: var(--ink); } /* A word somebody has actually seen written outranks any dictionary guess, and should look like it does. */ .decode-hit.from-corpus { border-color: var(--accent); color: var(--ink); } /* The vowel key. Four pairs across, so it reads as a small chart rather than a wall of codes — the point is that you can find your sound at a glance, not that you memorise it. */ .sound-key { border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; } .sound-key td { padding: 2px 10px 2px 0; color: var(--muted); } .sound-key td:nth-child(odd) { text-align: right; padding-right: 4px; } .sound-key code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; } .sound-key b { color: var(--ink); font-weight: 600; } .syntax-details { margin-top: 10px; } .syntax-details > summary { cursor: pointer; color: var(--muted-2); } .syntax-details .syntax-help p { margin: 8px 0; } .ipa-hint { margin-left: 10px; font-size: 0.8rem; color: var(--warn); } /* --- the drawing pad (js/draw.js) ---------------------------------- */ /* The pad is square, so an uncapped width makes it as TALL as the column is wide — which on the stacked mobile layout is a screen and a half of empty box. Cap it and let it sit left. */ .drawpad-surface { position: relative; max-width: 300px; } .drawpad-canvas { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); /* Without this a stylus or finger scrolls the page instead of drawing. */ touch-action: none; cursor: crosshair; } .drawpad-hint { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 0.9rem; pointer-events: none; } .drawpad-hint[hidden] { display: none; } .drawpad-bar { display: flex; gap: 6px; margin: 8px 0; } .drawpad-btn { font-family: inherit; font-size: 0.8rem; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; } .drawpad-btn:hover { background: var(--hover); color: var(--ink); } .drawpad-results { display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); } .drawpad-hit { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); } .drawpad-hit:hover { background: var(--hover); } .drawpad-hit svg { width: 26px; height: 26px; color: var(--ink); } .drawpad-hit-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.7rem; color: var(--muted-2); } .drawpad-hit.is-best { border-color: var(--accent); } /* A bottom-slot match shows the form you actually drew, not the form the glyph is stored in. Offering a cap and drawing a cup would make the answer look wrong when it is right. */ .drawpad-hit.is-flipped svg { transform: scaleY(-1); } /* How sure the match is, in colour as well as in the tooltip. The failure mode of a recogniser is a confident wrong answer, so a loose match should look loose. */ .drawpad-close .drawpad-hit-code { color: var(--accent); } .drawpad-loose { opacity: 0.6; } .legend { font-size: 0.8rem; color: var(--muted-2); margin-top: 10px; } .legend .dot { display: inline-block; width: 10px; height: 10px; border: 1px dashed var(--accent); margin-right: 4px; } footer { margin-top: 40px; font-size: 0.8rem; color: var(--faint); text-align: center; } footer p { margin: 4px 0; } /* The tool's own credit leads, and is the one line that isn't faint. */ .footer-by { font-size: 0.9rem; color: var(--muted); } .footer-by a { font-weight: bold; } /* Contact row: icon + handle links, centred under the credit. Icons are inline SVG in currentColor so they inherit the link's hover colour. */ .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 8px 0; } .social { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); text-decoration: none; } a.social:hover, a.social:focus-visible { color: var(--accent); } .social svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; } /* Discord has no public profile URL, so it is a label, not a link. */ .social-static { color: var(--muted-2); } .footer-note { color: var(--faint); } /* Glyph key grid — each cell pairs the drawn glyph with the traced shape from the hand-lettered key, so the two can be compared. */ .key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 7px; } .key-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px; text-align: center; font: inherit; color: inherit; display: block; width: 100%; } .key-cell.is-clickable { cursor: pointer; } .key-cell.is-clickable:hover { background: var(--hover); border-color: var(--accent); } .key-cell.is-clickable:active { transform: translateY(1px); } .key-cell.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .key-cell.is-placeholder { background: var(--tint-placeholder); } .key-art { color: var(--accent); width: 52px; height: 52px; margin: 0 auto; } .key-art svg { width: 100%; height: 100%; display: block; } .key-art.is-empty { border: 1px dashed var(--line); border-radius: 6px; box-sizing: border-box; } .key-lab { font-size: 13px; color: var(--ink); margin-top: 6px; } .key-lab .key-code { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: bold; font-size: 13px; color: var(--accent); } .key-lab .key-ipa { display: block; font-size: 11px; color: var(--muted); } .key-lab .key-name { display: block; font-size: 11px; color: var(--faint); } .key-note { font-size: 11px; color: var(--accent); margin-top: 3px; } .key-section { grid-column: 1 / -1; font-weight: bold; font-size: 0.9rem; color: var(--muted); margin-top: 10px; } .key-section span { font-weight: normal; font-size: 0.82rem; color: var(--faint); }