/* THE FONT (Sam, 9 Sep 2026: "I want the same font" — the app he pointed at sets Inter): one face, the same on iPhone and Android, served from this site. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/login/kit/fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/login/kit/fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/login/kit/fonts/inter-700.woff2') format('woff2')} /* ===================================================================== QnQ TOKENS — the one place a colour, a size, a font or a pixel lives. NO SCREEN FILE MAY WRITE A COLOUR, A SIZE, A FONT OR A PIXEL VALUE. Not ops.html, not site/index.html, not any screen added later. If a screen needs a value, it uses a token from this file through a kit class in qnq-kit.css. If the kit lacks something, the KIT is extended once, here and in qnq-kit.css, and then used everywhere — never patched locally in one screen. The pre-push gate (scripts/check-ui-consistency.mjs) refuses drift. Only two files in the whole app may carry raw values: this one and site/assets/qnq-kit.css. Every value below is the value the signed golden screens were drawn from (docs/design/reskin/goldens/gen.py, the LIGHT and DARK dicts). Changing a number here changes every screen and breaks the goldens — regenerate and re-sign before you do. Light is the default. Dark is switched by data-theme="dark" on (or on any wrapper, so a preview can show both at once). Dark is NOT wired to prefers-color-scheme on purpose: Sam has signed dark in the tokens but has not yet seen it live on his phone (PLAN.md, step 2). ===================================================================== */ /* --- Astra's faces (Sam, 7 Sep 2026: one app, identical): Barlow Condensed for titles and the logotype, Nunito 900 for big numbers. The paths are relative to this file, so the same stylesheet works served from /assets/ and opened straight off disk in a preview. -- */ @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("/login/kit/fonts/barlow-condensed-600.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/login/kit/fonts/barlow-condensed-700.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("/login/kit/fonts/barlow-condensed-800.woff2") format("woff2")} @font-face{font-family:"Nunito";font-style:normal;font-weight:900;font-display:swap;src:url("/login/kit/fonts/nunito-900.woff2") format("woff2")} :root, [data-theme="light"]{ /* ---- the two layers. A screen is never white on white. ---------- */ --qk-ground:#F3F3F0; --qk-card:#FFFFFF; /* ---- the writing ---------------------------------------------- */ --qk-ink:#131313; /* navy: names, titles, the primary button */ --qk-ink-2:#4A4946; /* secondary lines */ --qk-ink-3:#6B6A65; /* captions, icons at rest - 5.2:1 on white, over the 4.5:1 floor for small text (the one kit, 29 Sep 2026; was #7A7974, 4.4:1) */ /* ---- the lines and the flat grey ------------------------------- */ --qk-rule:#EAEAE8; /* hairline, quiet button outline, switch off */ --qk-soft:#F0EFEC; /* behind an unavailable button, a loading bar */ /* ---- QnQ's signature. Three places only: the logo lockup on the door, the live marker, the tint behind the active tab. ----- */ --qk-gold:#FFCE05; --qk-gold-bg:rgba(255,206,5,.18); /* THE ACCENT COLOURS ON OFFER (Sam, 19 Sep 2026: "Accent color" as ChatGPT's row): --qk-accent is the one in use */ --qk-accent-gold:#A87A00;--qk-accent-blue:#1F6FEB;--qk-accent-green:#1E8E4C;--qk-accent-yellow:#B58A00;--qk-accent-pink:#D0357F;--qk-accent-orange:#D9651B;--qk-accent-purple:#7A4FD8;--qk-accent-silver:#6B6B66; --qk-accent:#A87A00; /* the gold as a mark on the light ground: the search glyph, the chosen tab's icon, the initials' ring (18 Sep 2026) */ --qk-gold-halo:rgba(255,206,5,.18); --qk-on-pill:#E7E6E1; /* the active tab's pill — a soft ink tint (Sam, 2 Sep: the gold one was ugly) */ /* ---- the primary button and the + disc ------------------------- */ --qk-primary-bg:#131313; --qk-primary-fg:#FFFFFF; /* a selected chip and the toast take the primary's fill in the light look; in the dark look they take the pill tint, so the one white thing on a dark screen is the primary button (Sam, 10 Sep 2026: "stop using white buttons everywhere") */ --qk-chip-on-bg:var(--qk-primary-bg); --qk-chip-on-fg:var(--qk-primary-fg); --qk-toast-bg:var(--qk-primary-bg); --qk-toast-fg:var(--qk-primary-fg); /* ---- a colour always means something --------------------------- */ --qk-ok:#1E7A46; --qk-ok-bg:#DDF0E4; --qk-warn:#8A5A00; --qk-warn-bg:#FBEFD2; --qk-bad:#B23A2A; --qk-bad-bg:#F8E0DB; --qk-bad-fg:#FFFFFF; /* the writing on a red button */ --qk-ok-fg:#FFFFFF; /* the writing on a green one (the door's accepted tick) */ /* ---- surfaces -------------------------------------------------- */ --qk-scrim:rgba(28,36,48,.55); --qk-skeleton:#E7E6E1; --qk-field:#F0EFEC; --qk-tile:#E7E6E1; /* THE SEAT (Sam, 9 Sep 2026: "Yes. Implement it everywhere"): a soft rounded square in the ground's grey behind every icon, the glyph in ink — quieter than the dark tile, firmer than a bare glyph */ --qk-tile-ink:#131313; /* ---- the frosted bar ------------------------------------------- */ --qk-bar:rgba(249,249,247,.96); --qk-bar-line:rgba(28,36,48,.10); /* ---- shadows. edge is the 1px inset a card needs in dark. ------- */ --qk-shadow:0 1px 2px rgba(28,36,48,.06), 0 8px 24px rgba(28,36,48,.08); /* real paper under every card (Sam on Astra, 15 Sep 2026: not a hairline alone; taken into the kit 16 Sep) */ /* THE DARK CARD's own small palette (Sam on Astra, 15 Sep 2026: "It can still look more premium"): the one card that carries the number sits dark on the pale page; its writing, bars and day letters keep their contrast in both modes */ --qk-hero-bg:#1B1B1B; --qk-hero-bg2:#2C2C2C; --qk-hero-ink:#F3F3F0; --qk-hero-ink2:#C3C2B7; --qk-hero-ink3:#97958D; --qk-hero-soft:rgba(255,255,255,.14); --qk-seg:rgba(0,0,0,.06); --qk-seg-on:#FFFFFF; /* the capsule and its raised thumb */ --qk-shadow-primary:0 6px 18px rgba(28,36,48,.22); --qk-shadow-sheet:0 -12px 40px rgba(0,0,0,.18); --qk-shadow-dialog:0 20px 60px rgba(0,0,0,.3); --qk-edge:rgba(28,36,48,.05); /* a hairline round every card, so it never melts into the ground (the UI polish, 24 Sep 2026) */ --qk-chev:#B6B5B4; /* the chevron, ChatGPT's light grey */ /* ---- the switch knob ------------------------------------------- */ --qk-knob:#FFFFFF; --qk-knob-shadow:0 1px 3px rgba(0,0,0,.25); /* ---- paper: a signature is shown as it was drawn, on white, in either mode ---------------------------------------------- */ --qk-paper:#FFFFFF; color-scheme:light; } [data-theme="dark"]{ --qk-float:rgba(44,44,44,.97); /* audit 22: the floating bar and the + stand off the dark ground (was 31 on a 21 ground) */ --qk-float-edge:rgba(255,255,255,.10); --qk-ground:#151515; --qk-card:#1F1F1F; --qk-ink:#EDECE6; --qk-ink-2:#C3C2B7; --qk-ink-3:#97958D; --qk-rule:#303030; --qk-soft:#2A2A2A; --qk-gold:#FFD84D; --qk-gold-bg:rgba(255,206,5,.18); --qk-accent-gold:#FFD84D;--qk-accent-blue:#5B9CFF;--qk-accent-green:#4ADE80;--qk-accent-yellow:#FFD84D;--qk-accent-pink:#F472B6;--qk-accent-orange:#FB923C;--qk-accent-purple:#A78BFA;--qk-accent-silver:#C8C8C2; --qk-accent:#FFD84D; /* on the dark ground the logo's own gold */ --qk-gold-halo:rgba(255,206,5,.18); --qk-on-pill:rgba(255,255,255,.12); /* navy on a dark ground is invisible, so the primary and the + disc take the light ink with dark writing */ --qk-primary-bg:#F9F9F7; --qk-primary-fg:#151515; --qk-chip-on-bg:#3A3A3A; --qk-chip-on-fg:#EDECE6; --qk-toast-bg:#3A3A3A; --qk-toast-fg:#EDECE6; --qk-ok:#6BCB8E; --qk-ok-bg:#1E3A2A; --qk-warn:#E5B85C; --qk-warn-bg:#3D3115; --qk-bad:#E88A7B; --qk-bad-bg:#44241F; --qk-bad-fg:#151515; --qk-ok-fg:#151515; --qk-scrim:rgba(0,0,0,.6); --qk-skeleton:#2A2A2A; --qk-field:#262626; --qk-tile:#3C3C3C; /* the seat in the dark: a step up from the card, the glyph in the light ink */ --qk-tile-ink:#EDECE6; --qk-bar:rgba(24,24,24,.97); --qk-bar-line:rgba(255,255,255,.08); --qk-shadow:0 1px 2px rgba(0,0,0,.3); --qk-hero-bg:#242424; --qk-hero-bg2:#333333; --qk-hero-ink:#F3F3F0; --qk-hero-ink2:#C3C2B7; --qk-hero-ink3:#97958D; --qk-hero-soft:rgba(255,255,255,.14); /* in the dark the card lifts a shade above the page */ --qk-seg:rgba(255,255,255,.08); --qk-seg-on:#3A3A3A; --qk-shadow-primary:0 6px 18px rgba(0,0,0,.4); --qk-shadow-sheet:0 -12px 40px rgba(0,0,0,.5); --qk-shadow-dialog:0 20px 60px rgba(0,0,0,.55); --qk-edge:rgba(255,255,255,.06); --qk-knob:#E8ECF0; --qk-knob-shadow:0 1px 3px rgba(0,0,0,.5); --qk-paper:#FFFFFF; color-scheme:dark; --qk-chev:#6B6B6B; } /* ===================================================================== THE SIZES. These do not change between light and dark, so they are declared once. They are still tokens: no screen writes them. ===================================================================== */ :root{ /* ---- type (Astra): Barlow Condensed 700 for titles and the logotype, Nunito 900 for big numbers; the body is the phone's own font */ --qk-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Text",'Inter',Roboto,"Helvetica Neue",system-ui,sans-serif; --qk-font-number:-apple-system,BlinkMacSystemFont,"SF Pro Text",'Inter',Roboto,"Helvetica Neue",system-ui,sans-serif; --qk-font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text",'Inter',Roboto,"Helvetica Neue",system-ui,sans-serif; --qk-size-hero:64px; /* the one number that is the point */ --qk-size-display:48px; --qk-size-big:30px; /* hours on the crane card */ --qk-size-stat:36px; /* the number on a small stat tile (Office-Binder, Office-Expiries: .disp style="font-size:36px") */ --qk-size-number:28px; /* the PIN field, a secondary big number */ --qk-size-title:24px; /* a sheet or dialog title */ --qk-size-title-sm:20px; --qk-size-title-md:22px; /* the dead link's headline */ --qk-size-body:17px; /* body, the header title, a button */ --qk-size-name:17px; /* a card's own name line */ --qk-size-row:17px; /* a row's name (Astra: 17/500) */ --qk-size-sub:15px; /* secondary */ --qk-size-caption:15px; /* caption, a row's sub-line */ --qk-size-small:13px; --qk-size-tiny:12px; /* the caption under a big number */ --qk-size-pill:13px; --qk-size-eyebrow:12px; --qk-size-tab:10.5px; --qk-size-credit:10.5px; --qk-weight-display:900; --qk-weight-title:700; --qk-weight-bold:700; --qk-weight-semi:600; --qk-weight-medium:500; --qk-track-display:-.01em; --qk-track-title:-.005em; --qk-track-tight:-.01em; --qk-track-eyebrow:.1em; --qk-track-credit:.14em; --qk-line-body:1.35; --qk-line-tight:1.2; --qk-line-prose:1.5; --qk-line-flat:1; /* ---- spacing. 4 / 8 / 12 / 16 / 24 / 32 / 48. No other values. --- */ --qk-space-1:4px; --qk-space-2:8px; --qk-space-3:12px; --qk-space-4:16px; --qk-space-5:24px; --qk-space-6:32px; --qk-space-7:48px; --qk-body-gap:24px; /* between a list body's blocks (FleetLight, Office-Plus, Office-Search) */ --qk-body-gap-cards:14px; /* between Today's cards (TodayLight, Office-TodayQuiet) */ --qk-col-gap:14px; /* the desktop columns' rhythm: the fill column's blocks 14 apart under its title line (Desktop-Pair .col{gap:14px}) */ --qk-air:10px; /* the one exception: the air Sam chose between the cards of a list (style B) */ --qk-body-top:6px; /* the air under the header before the first object: every signed golden's .body pads 6 (goldens/FleetLight.html .body{padding:6px 16px 0}), half the 12 gap. A host column that plays the body (the office's .ops>.wrap, .bnd__b) pads this, never its own number (C8, C1) */ /* ---- radii ----------------------------------------------------- */ --qk-radius-card:16px; /* a card, a row */ --qk-radius-sheet:24px; /* a sheet, a dialog */ --qk-radius-pill:999px; /* every button, every pill, every chip */ --qk-radius-field:14px; /* a text field, a note area */ --qk-radius-tile:10px; /* the 40 tile a crane or a section sits on (Astra) */ --qk-radius-box:12px; /* a banner, a red box */ --qk-radius-check:8px; /* a tick box */ /* ---- the fixed heights ----------------------------------------- */ --qk-tap:44px; /* every touch target */ --qk-hdr-title-inset:64px; /* the header title's inset from the header's edge: the tap's 44 and 20 (every golden .t at 64) */ --qk-btn:52px; /* a full button */ --qk-btn-mini:44px; /* a mini button */ --qk-chip:34px; --qk-row:52px; /* a plain row */ --qk-field:48px; /* a field row (Astra) */ --qk-row-tile:76px; /* a row with a tile */ --qk-row-check:66px; /* a check row on a board (TPC: the whole row is the tap) */ --qk-okdisc:84px; /* the green disc on the finish moment */ --qk-tile-size:40px; --qk-status-h:54px; /* the phone's status bar */ --qk-header-h:44px; --qk-bar-h:58px; --qk-home-h:30px; /* the phone's home indicator */ --qk-switch-w:50px; --qk-switch-h:30px; --qk-plus:52px; /* the + disc */ --qk-tab-w:70px; --qk-tab-pill-w:56px; --qk-tab-pill-h:30px; /* THE THREE WIDTHS (goldens v2, signed 5 Sep 2026 — Sam: "make sure sidebar is always used like this on desktop"; goldens/gen.py CSS3). From 1024 the bar stands down the left as a rail: 96 wide on a tablet landscape (the mark at 60, the + disc, the sections as bar tabs 72 wide), 232 wide on a desktop (the mark at 110, Add as a 44 pill, the sections as 44 rows of 15, the credit at the foot). Beside it the list pane is 400 (392 on a tablet portrait, where the bar stays at the bottom) and the detail pane takes the rest; every pane gives its header 20 of air above. Save follows its form on the rail layouts, a 420 pill at most; a two-column grid is 10 apart; prose is 640 wide. */ --qk-rail-w:240px; --qk-desk-inner:1120px; /* the desktop's content column, centred in the main column (Astra) */ --qk-rail-w-sm:96px; --qk-rail-pad:24px 16px; --qk-rail-pad-sm:20px 0; --qk-rail-gap:6px; --qk-rail-gap-sm:6px; --qk-rail-mark:110px; --qk-rail-mark-sm:60px; --qk-rail-tab-w:72px; --qk-rail-tab-radius:12px; --qk-rail-tab-pill:28px; --qk-reader-w:708px; /* the reader's column (its Sign pill spans it: 2 x 354) */ --qk-pane-line:0.5px 0 0 var(--qk-bar-line); /* the hairline down a pane's right edge (the list, the rail) */ --qk-pane-list-w:390px; --qk-pane-list-w-tp:392px; --qk-pane-top:20px; --qk-pane-btn-max:390px; --qk-measure:640px; --qk-measure-tp:720px; /* a screen's one column on a tablet portrait (Tablet-P-Check: .body max-width 720) */ --qk-measure-wide:760px; /* the desktop's single column (Desktop-Check: .column max-width 760 — two 351 cards and 10 between, 24 a side) */ --qk-row-max:520px; /* a lone row's width on the rail layouts (Tablet-L-Check: the crane row max-width 520) */ --qk-bar-gap-wide:56px; /* the tablet bar: centred, the tabs 56 apart (Astra) */ /* ---- the door: the mark, and how far the card sits above centre ---- */ --qk-door-logo:168px; --qk-door-w:480px; /* the door column on a tablet or a desktop (Astra) */ --qk-door-lift:120px; /* the card sits this much above centre on a phone */ --qk-door-lift-sm:80px; /* the name card, which is taller */ /* ---- the layers a page host stacks. Not sizes, but one place. ---- */ --qk-z-hdr:20; --qk-z-bar:70; --qk-z-scrim:90; /* a sheet's scrim over the bar */ --qk-z-sheet:91; --qk-z-toast:95; --qk-z-lock:200; /* ---- icons: one family, one weight, at every size --------------- */ --qk-icon:24px; --qk-icon-sm:20px; --qk-icon-stroke:1.6; /* ---- motion is a settle: one duration, one ease ----------------- */ --qk-duration:240ms; --qk-ease:cubic-bezier(.2,.7,.2,1); --qk-stagger:50ms; /* the beat between a door's pieces settling in */ /* ---- the bottom inset. On a real phone it is the home indicator / gesture bar; a 390x844 preview frame draws its own. -------- */ --qk-safe-bottom:env(safe-area-inset-bottom,0px); --qk-safe-top:env(safe-area-inset-top,0px); } /* at width the air under the header is 8, not the phone's 6 (Tablet-P-Today: .column{padding:8px 24px 110px}; Desktop-Today: .cols{padding:8px 24px 0}) */ @media (min-width:780px){ :root{--qk-body-top:8px} } @media (prefers-reduced-motion:reduce){ :root{--qk-duration:1ms} }