/* style.css - shared styling for the Qurak front end. * * Layout note: the old sheet hard-coded `max-width: 480px` on .card, * .top-bar and .banner, which made every page - including the evaluate * workbench, where the whole point is looking at code and results side by * side - a narrow single column. Width is a token now, chosen per page by * the container class rather than baked into every component: * * .container-wide 1200px the evaluate workbench and the history table * .container 760px settings, billing, tokens - forms read badly wide * .container-auth 420px the login card, which genuinely wants to be small * * The palette is unchanged; this is a layout change, not a re-skin. */ :root { color-scheme: dark; --bg: #0f1115; --panel: #171a21; --panel-raised: #1d212a; --border: #2a2f3a; --border-strong: #39404f; --text: #e6e9ef; --muted: #8b92a3; --accent: #5b8cff; --danger: #ff6b6b; --success: #4fd18b; --warning: #f0b429; /* Cards on a dark ground are drawn with borders, not shadows; the light palette below swaps that for a soft shadow, so it is a token. */ --card-shadow: none; --content-wide: 1200px; --content: 760px; --content-auth: 420px; --gutter: clamp(1rem, 4vw, 2.5rem); --radius: 10px; } /* ---------------------------------------------------------- light palette The site was dark-only, which suits a function reference read beside a terminal at night and suits nobody reading a pricing page at noon. The palette is a set of tokens, so the light one is the same tokens with other values: it follows the reader's system setting by default, and a `data-theme` on - stamped by the server from the `theme` cookie the footer's switcher sets - wins over the system in either direction. No script anywhere: the switch is a form and the memory is a cookie. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f6f7f9; --panel: #ffffff; --panel-raised: #f0f2f6; --border: #d9dde6; --border-strong: #b9c0cf; --text: #1a1e27; --muted: #5d6577; --accent: #2f63e0; --danger: #c92a2a; --success: #1f8a4c; --warning: #9a6700; --card-shadow: 0 1px 2px rgba(20, 24, 40, 0.06); } } :root[data-theme="light"] { color-scheme: light; --bg: #f6f7f9; --panel: #ffffff; --panel-raised: #f0f2f6; --border: #d9dde6; --border-strong: #b9c0cf; --text: #1a1e27; --muted: #5d6577; --accent: #2f63e0; --danger: #c92a2a; --success: #1f8a4c; --warning: #9a6700; --card-shadow: 0 1px 2px rgba(20, 24, 40, 0.06); } :root[data-theme="dark"] { color-scheme: dark; } /* ------------------------------------------------------------ scripts Nine of the twenty-two interface languages are not Latin. A generic sans-serif stack lets the browser pick a face per glyph, which on a bare system means a fallback that was never designed for the script. Named faces per language first, the generic stack after. */ :lang(ar), :lang(ckb), :lang(fa) { font-family: "Vazirmatn", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; } :lang(hi) { font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", Arial, sans-serif; } :lang(te) { font-family: "Noto Sans Telugu", "Nirmala UI", "Gautami", Arial, sans-serif; } :lang(th) { font-family: "Noto Sans Thai", "Leelawadee UI", "Tahoma", Arial, sans-serif; } :lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif; } :lang(zh-Hans), :lang(zh-hans) { font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; } :lang(zh-Hant), :lang(zh-hant) { font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Hiragino Sans", sans-serif; } /* Expressions never mirror, whatever the page's language. */ :lang(ar) code, :lang(ckb) code, :lang(fa) code, :lang(ar) pre, :lang(ckb) pre, :lang(fa) pre, :lang(ar) .result, :lang(ckb) .result, :lang(fa) .result, :lang(ar) .log-input, :lang(ckb) .log-input, :lang(fa) .log-input, :lang(ar) .try-row input, :lang(ckb) .try-row input, :lang(fa) .try-row input, :lang(ar) .stat-value, :lang(ckb) .stat-value, :lang(fa) .stat-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; text-align: left; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; } /* ---------------------------------------------------------------- shell */ .app-header { border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 10; } .app-header-inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 1.5rem; min-height: 56px; flex-wrap: wrap; } .brand { font-weight: 700; letter-spacing: 0.02em; color: var(--text); text-decoration: none; font-size: 1.05rem; } .app-nav { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; } .app-nav a { color: var(--muted); text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.9rem; } .app-nav a:hover { color: var(--text); background: var(--panel-raised); } .app-nav a.active { color: var(--text); background: var(--panel-raised); box-shadow: inset 0 -2px 0 var(--accent); } .app-header-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--muted); } /* ------------------------------------------------------------ containers */ .container, .container-wide, .container-auth { margin: 0 auto; padding: 2rem var(--gutter) 4rem; width: 100%; } .container-wide { max-width: var(--content-wide); } .container { max-width: var(--content); } .container-auth { max-width: var(--content-auth); padding-top: 4rem; } .page-title { margin: 0 0 0.35rem; font-size: 1.35rem; } .page-sub { margin: 0 0 1.75rem; color: var(--muted); font-size: 0.9rem; } /* ----------------------------------------------------------------- cards */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; width: 100%; box-shadow: var(--card-shadow); } /* Cards stack with a gap between them - but only where they are *stacked*. * * As a bare sibling rule this also fired inside every grid and flex * container that happens to hold cards, where the container's own `gap` * is already doing the spacing. On the workbench that put a 1.25rem * margin on the second grid item and nothing on the first, so the editor * and the result panel sat twenty pixels out of line with each other for * no reason anyone could see in the markup. `:not()` on the layout * parents keeps the rule where it belongs. */ .card + .card { margin-top: 1.25rem; } .workbench > .card + .card, .plan-grid > .card + .card, .stat-grid > .card + .card { margin-top: 0; } /* The one card on a page whose contents cannot be undone by clicking again. Red edge, red heading, and enough space above it that it does not read as the next thing to do after the card before it. `.card.card-danger`, not `.card-danger`: `.card + .card` above sets the spacing between cards and would otherwise outrank a single class. */ .card.card-danger { border-color: var(--danger); margin-top: 2.5rem; } .card h2 { margin: 0 0 0.35rem; font-size: 1.05rem; } .card h2 + .muted { margin-top: 0; margin-bottom: 1rem; } .card-danger h2 { color: var(--danger); } /* ------------------------------------------------------- workbench split */ .workbench { display: grid; gap: 1.25rem; grid-template-columns: 1fr; /* stretch, not start: the editor is naturally the taller column, and a * result panel that hugs its content leaves a ragged gap beside it. */ align-items: stretch; } @media (min-width: 1000px) { .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .workbench-output { min-height: 12rem; } /* A card's opening heading, whatever element carries it. * * The workbench's two columns open with different elements - the editor's * heading is the textarea's own