/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */ /* ========================================================================== The new design layer. One file, loaded AFTER a page's own stylesheet, that carries the design the founder chose in September 2026: the layout grammar measured off qoder.com/en, in Qder's own palette, with Instrument Sans for Latin and IBM Plex Sans Hebrew for Hebrew. WHY A LAYER AND NOT A REWRITE The site is twenty-odd pages, and the operational ones — the floor, the pass, the printed stickers — are read mid-service by somebody holding a plate. Rewriting all of them at once would be one large untestable change on a platform with venues on it. So the new look arrives page by page: a page adds this and the class `next` to its , and its own stylesheet is rewritten in the new language. A page that has not been done yet looks exactly as it did. WHAT IS IN HERE the faces Instrument Sans for Latin, IBM Plex Sans Hebrew for Hebrew, and headings at 500 rather than 900. The restraint IS the design. the tokens the palette (brand.css's own values, restated so a page that loads only this layer still has them), and the three radii the design uses: 16 for a card, 12 for a field, 32 for a pill. the ground the cobalt-leaning bone the new pages sit on. WHAT IS NOT Components. Buttons, fields, labels and cards belong to the stylesheet of the page that loads after this one — see the note above `body.next`, which is there because getting that wrong cost a round of debugging. Nothing here changes behaviour and no class a script uses is renamed. ========================================================================== */ /* ------------------------------------------------------------------- type */ /* Latin. Google's, under the OFL (public/fonts/OFL-instrument-plex.txt). */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/instrument-sans-400-latin.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/instrument-sans-400-ext.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* * Hebrew, in four weights. * * Chosen by looking rather than by taste: the same sentence was set in * Assistant, Heebo, Rubik and this at the page's real sizes, and Plex Hebrew * is the one that carries Instrument Sans's density and its squared curves. * Hebrew range only, so the Latin inside a Hebrew sentence — "Qder", a price, * a branch count — still comes from Instrument Sans and the two read as one * family. */ @font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-hebrew-400-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/plex-hebrew-500-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plex-hebrew-600-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plex-hebrew-700-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* * The wordmark's own face, which is not a design choice but a brand asset: * "Qder.ai" is set in Readex Pro 600 wherever it appears as the lockup. It is * here because the panels' own stylesheet used to pull it from Google on every * load, and a page that shows the wordmark should not need a second stylesheet * to spell it right. */ @font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/readex-pro-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------- tokens */ :root { --n-font: "Instrument Sans", "Plex Hebrew", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif; /* The palette is brand.css's, restated here so a page that loads only this layer still has it. */ --n-cobalt: #0B3FD9; --n-cobalt-press: #0830A8; --n-cobalt-lift: #3767ED; --n-cobalt-wash: #EDF2FE; --n-cobalt-line: #C7D5FB; --n-cobalt-deep: #0A2FA6; --n-ink: #080D1C; --n-ink-2: #1F2942; --n-body: #4A5570; --n-muted: #7A849C; --n-line: #E4E9F4; --n-line-2: #F0F3FA; --n-bg: #FFFFFF; --n-ground: #F7F9FE; --n-card: #F9FBFF; --n-ok: #0E7C4A; --n-ok-bg: #E6F4F1; --n-warn: #A15C00; --n-warn-bg: #FFF4DC; --n-crit: #C0341D; --n-crit-bg: #FDE8E8; --n-r-card: 16px; --n-r-field: 12px; --n-r-pill: 32px; --n-ease: cubic-bezier(.22, .61, .36, 1); } /* --------------------------------------------------------------- the base */ /* * Scoped to `.next`, not to `html`. * * A page opts in by carrying the class on , which means this file can be * linked from a page for review without changing it, and a page that is not * ready keeps exactly the look it has. No half-migrated page. * * DELIBERATELY SMALL. This layer carries the faces, the tokens, the ground and * the type — and stops. It used to size headings and restyle buttons, inputs * and labels too, and that was a mistake: `body.next h1` is a class AND TWO * type selectors, so it quietly outranks a page's own `.panel h1` and the page * could not take its heading back. Components belong to the page stylesheet * that loads after this one. What is here is only what every page must share * and no page wants to argue with. */ body.next { background: var(--n-ground); color: var(--n-ink); font-family: var(--n-font); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* The faces and the restraint. Sizes are the page's business. */ body.next h1, body.next h2, body.next h3, body.next h4, body.next input, body.next textarea, body.next select, body.next button { font-family: var(--n-font); } body.next h1, body.next h2, body.next h3 { /* 500 for a title: the restraint IS the design, and a heavier heading is the single fastest way to lose it. */ font-weight: 500; letter-spacing: 0; } body.next h4 { font-weight: 600; letter-spacing: 0; } /* The selection is ours, not the operating system's blue. */ body.next ::selection { background: var(--n-cobalt-wash); color: var(--n-ink); } /* `hidden` outranks any class that sets display: a button the script hid must stay hidden. This codebase has been caught by it twice. */ body.next [hidden] { display: none !important; }