/* hotkhon.css — shared design system for Хотхон Intelligence. Light is the default (calm, print-like, matches the published HPI + note); [data-theme="dark"] is a deep near-black navy (NOT the old bright #0F2547). Two token families: - The full palette (--bg/--ink/--panel/…) — used by fully-themed pages (Deal Radar), whose own :root may still override these. - The nav-only palette (--hk-*) — used ONLY by the shared top-nav so it renders correctly on ANY page without colliding with that page's tokens. */ /* ── HOUSE SCALE (2026-08-10) ─────────────────────────────────────────────── Mirrors General\design-system\house.css. Before this, the public profile pages carried FOURTEEN distinct font sizes (10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 14.5 / 15 / 17 / 18 / 20 / 23 / 25 / 34px) across ~420 URLs. That is the amateur tell — not the colour. hotkhon puts BODY on --t-md (16px), not --t-base (14px), because it is a public reading surface rather than a dense cockpit. The scale is fixed; which step carries body is a per-surface decision. These are declared here rather than @import-ed so the public site keeps a single stylesheet request. If they drift from house.css, house.css wins. */ :root{ --t-micro:10px; --lh-micro:1.30; --tr-micro:.12em; --t-xs :11px; --lh-xs :1.45; --tr-xs :.02em; --t-sm :12.5px; --lh-sm :1.50; --tr-sm :.005em; --t-base :14px; --lh-base :1.55; --tr-base :0; --t-md :16px; --lh-md :1.58; --tr-md :-.005em; /* body on this site */ --t-lg :20px; --lh-lg :1.35; --tr-lg :-.012em; --t-xl :25px; --lh-xl :1.25; --tr-xl :-.018em; --t-2xl :31px; --lh-2xl :1.18; --tr-2xl :-.022em; --t-3xl :39px; --lh-3xl :1.10; --tr-3xl :-.026em; --t-hero :49px; --lh-hero :1.04; --tr-hero :-.030em; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --dur-fast:120ms; --dur:200ms; --dur-slow:320ms; --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.40,0,.20,1); } /* Phone: step the display end down, hold the UI end. Shrinking 16px body on a property listing is how you get a pinch-to-read experience. */ @media(max-width:420px){ :root{ --t-hero:39px; --t-3xl:31px; --t-2xl:25px; --t-xl:20px; --s-7:32px; --s-8:48px; --s-9:64px; } } /* Wide content scrolls inside its own box; the page body never does. */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:640px){ table{display:block;overflow-x:auto} } :root{ --bg:#f7f8fa; --bg2:#eef1f6; --panel:#ffffff; --panel2:#f2f5fa; --inset:#f3f6fa; /* --faint, corrected 2026-08-21 - an accessibility failure, not a matter of taste, and the same species as the --gold note below. --faint is ONLY ever text: its four use sites are .sh .rng, .stat .b and the two .noph placeholders, rendering on 902 pages. Every one of them failed its bar in light, and the two small-text ones failed in dark as well: .stat .b 10px on --panel light 2.62:1 dark 3.42:1 (bar 4.5) .sh .rng --t-xs on --bg light 2.47:1 dark 3.68:1 (bar 4.5) .noph --t-2xl/700 light 2.40:1 (bar 3.0) .stat .b is the BASIS LINE - the text saying where each number came from and as of when. The figure was legible and its provenance was not, which is the one pairing this product cannot afford. Hue and saturation are held exactly; only lightness moves, so the token still reads as itself. Worst site is now 4.42:1 light / 4.08:1 dark. Guarded by tests/test_token_contrast.py. */ --ink:#0f2547; --ink2:#37476b; --muted:#5f7085; --faint:#61738d; --line:#e5e9f0; /* LIGHT-THEME GOLD, corrected 2026-08-13 — this was an accessibility failure, not a matter of taste. `a{color:var(--gold)}` sets link text, and the old #a9761d measured 3.97:1 on white against the 4.5:1 minimum for body text. #8a5f00 is 5.65:1 and, with blue at 0, carries the maximum chroma available at that lightness — the least muddy gold that actually passes. --accent paints bars, dots and active borders, which are GRAPHICAL objects and need 3:1. #e3a93b measured 2.10:1; #c8880c is 3.01:1. ⚠️ A saturated gold cannot be both light-looking and accessible on near-white — the chroma floor and the contrast ceiling are disjoint, the same trap house-design already documents for Intelmind teal. The bright #f9bc4d stays where it works: the dark theme, where it measures 10.99:1, and the logo. Do not "brighten" these back. */ --gold:#8a5f00; --gold2:#a9761d; --accent:#c8880c; --good:#0f9d58; --green:#0f9d58; --red:#dc2626; --teal:#0d9488; --fire:#0d9488; --drop:#dc2626; --navbg:rgba(247,248,250,.88); --headbg:linear-gradient(180deg,#eef2f8,var(--bg)); --r:10px; --r-pill:999px; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --shadow:0 8px 26px rgba(15,37,71,.09); /* ── ELEVATION, ported from ai.cody.mn (taste-ai.cody.mn/ai.cody.mn.md) ────── Two rules taken from there, both brand-neutral: 1. NO PURE BLACK. Every shadow is tinted toward the surface's own hue. ai.cody.mn uses exactly one rgba(0,0,0,…) in three pages; we now use none. Dark-theme shadows are navy-black #030812, not #000. 2. The edge catches the light. They draw a 1px inset highlight inside the top edge instead of relying on a cast shadow alone. ⚠️ The highlight INVERTS between themes, and that is not a mistake. Their bezel works because their cards are translucent white over a coloured gradient. Ours are opaque white on near-white, where a white top-inset is invisible — so in LIGHT the edge is drawn by shading the BOTTOM instead, and in DARK the original top-highlight is used as-is. Same principle, two renderings. Copying their exact values here would have produced nothing. */ --sh-1:0 -1px 0 rgba(15,37,71,.05) inset, 0 1px 2px rgba(15,37,71,.05); --sh-2:0 -1px 0 rgba(15,37,71,.05) inset, 0 8px 26px -10px rgba(15,37,71,.16); --sh-3:0 -1px 0 rgba(15,37,71,.06) inset, 0 18px 44px -18px rgba(15,37,71,.20); --sh-accent:0 -1px 0 rgba(15,37,71,.06) inset, 0 8px 20px -8px rgba(200,136,12,.38); /* ── ONE HUE AT MANY ALPHAS ───────────────────────────────────────────────── ai.cody.mn gives #3aadfe four jobs at α .06/.10/.12/.14 rather than adding a second accent. Ours is gold. These are TINT SURFACES only — the contrast- critical golds above (--gold 5.65:1 for link text, --accent 3.01:1 for graphical marks) are untouched and must stay untouched. */ --acc-a06:rgba(200,136,12,.06); --acc-a12:rgba(200,136,12,.12); --acc-a20:rgba(200,136,12,.20); --acc-a32:rgba(200,136,12,.32); /* nav-only (collision-proof) */ --hk-navbg:rgba(247,248,250,.9); --hk-ink:#0f2547; --hk-muted:#5f7085; --hk-line:#e5e9f0; --hk-panel2:#eef2f8; --hk-accent:#d99a2b; --hk-splash-bg:#f7f8fa; --hk-splash-ink:#0f2547; --hk-splash-sub:#5f7085; color-scheme:light; } :root[data-theme="dark"]{ --bg:#0b1220; --bg2:#070d18; --panel:#111a2b; --panel2:#18233a; --inset:#0c1524; --ink:#e7eef7; --ink2:#c2cfe2; --muted:#8494ad; --faint:#73839e; --line:#22304a; --gold:#f9bc4d; --gold2:#ffd27a; --accent:#f9bc4d; --good:#49e092; --green:#49e092; --red:#ff8088; --teal:#3ad0c4; --fire:#3ad0c4; --drop:#ff8088; --navbg:rgba(9,14,24,.9); --headbg:linear-gradient(180deg,#132139,var(--bg)); /* was rgba(0,0,0,.45) — pure black on a navy surface. Tinted to #030812. */ --shadow:0 10px 30px rgba(3,8,18,.55); /* Dark keeps the ORIGINAL top-edge highlight: on a #111a2b panel a light 1px inset actually reads, which is the case their bezel was built for. */ --sh-1:0 1px 0 rgba(231,238,247,.07) inset, 0 1px 2px rgba(3,8,18,.45); --sh-2:0 1px 0 rgba(231,238,247,.09) inset, 0 10px 30px -12px rgba(3,8,18,.65); --sh-3:0 1px 0 rgba(231,238,247,.11) inset, 0 20px 48px -18px rgba(3,8,18,.75); --sh-accent:0 1px 0 rgba(255,255,255,.16) inset, 0 8px 20px -8px rgba(249,188,77,.32); --acc-a06:rgba(249,188,77,.06); --acc-a12:rgba(249,188,77,.12); --acc-a20:rgba(249,188,77,.20); --acc-a32:rgba(249,188,77,.32); --hk-navbg:rgba(9,14,24,.92); --hk-ink:#e7eef7; --hk-muted:#8494ad; --hk-line:#22304a; --hk-panel2:#18233a; --hk-accent:#f9bc4d; --hk-splash-bg:#0b1220; --hk-splash-ink:#e7eef7; --hk-splash-sub:#8494ad; color-scheme:dark; } /* The page GROUND. Neither palette painted html/body, so the ground was the browser's canvas: white for light (fine by luck), Chrome's own grey for dark instead of --bg, and black inside any host that paints a dark canvas behind a light page - black ink on black, every card invisible. Measured 2026-09-07 in the Claude browser pane at 375px. */ html{background:var(--bg)} /* ---- shared top-nav shell (self-contained via --hk-*) ---- */ .hk-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:9px 24px;background:var(--hk-navbg);backdrop-filter:blur(9px);border-bottom:1px solid var(--hk-line); box-shadow:var(--sh-1,none); font-family:Manrope,-apple-system,"Segoe UI",Roboto,sans-serif} .hk-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--hk-ink)} .hk-brand svg{width:25px;height:25px;color:var(--hk-ink);flex:none} .hk-brand b{font-family:Manrope,sans-serif;font-size:var(--t-md);font-weight:700;letter-spacing:var(--tr-md)} .hk-brand small{font-family:Manrope,sans-serif;font-size:var(--t-sm);font-weight:600;color:var(--hk-muted);margin-left:3px} .hk-links{display:flex;gap:3px;flex-wrap:wrap} /* PILL FOR ANYTHING PRESSABLE. ai.cody.mn makes calc(infinity) the default shape — 138 uses across three pages — so a control announces itself as pressable by silhouette before colour or label is read. Cards keep their rectangular radii; only controls become pills. TWO-SPEED MOTION, also theirs: geometry moves fast (0.15s), colour settles slow (0.5s). We keep the split but inside ban-list 13's 320ms cap, so colour rides --dur-slow and transform rides --dur-fast. */ .hk-links a{text-decoration:none;color:var(--hk-muted);font-size:var(--t-sm);font-weight:600;padding:6px 12px;border-radius:var(--r-pill,999px); transition:color var(--dur-slow) var(--ease-io),background var(--dur-slow) var(--ease-io)} .hk-links a:hover{color:var(--hk-ink);background:var(--acc-a12,var(--hk-panel2))} .hk-links a.on{color:var(--hk-ink);background:var(--acc-a20,var(--hk-panel2));box-shadow:inset 0 -2px 0 var(--hk-accent)} /* Language switcher. Pushed to the right edge with the theme toggle, and it takes the margin-left:auto so .hk-theme no longer needs it — the two sit as one control cluster. Mono + tracked, matching every other micro-label on the site. */ .hk-lang{margin-left:auto;display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:29px;padding:0 10px;border-radius:var(--r-pill,999px);text-decoration:none; font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-xs);font-weight:600; letter-spacing:.08em;color:var(--hk-muted);border:1px solid var(--hk-line); background:var(--hk-panel2); transition:color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)} .hk-lang:hover,.hk-lang:focus-visible{color:var(--hk-ink);border-color:var(--hk-accent)} .hk-lang+.hk-theme{margin-left:6px} .hk-theme{margin-left:auto;background:var(--hk-panel2);border:1px solid var(--hk-line);color:var(--hk-ink); width:34px;height:34px;border-radius:var(--r-pill,999px);cursor:pointer;font-size:var(--t-base);line-height:1;display:grid;place-items:center; transition:border-color var(--dur-slow) var(--ease-io),background var(--dur-slow) var(--ease-io)} .hk-theme:hover{border-color:var(--hk-accent);background:var(--acc-a12,var(--hk-panel2))} @media(max-width:640px){ /* ONE ROW THAT SCROLLS, not three that wrap. Measured 2026-09-09 at 375px on the apex, /hpi/, every profile, /developers/, /data/ and the map: the wrapped nav was 200 px of an 812 px screen — and on the map its search box and district chips sat BEHIND it, because the map shell assumes --navh. /bolomj/ had carried this rule page-locally since 2026-09-08 (200 -> 91 px); it belongs here, once. order:3 is load-bearing: without it the 100% basis breaks the line on both sides of the links instead of after the controls. */ .hk-nav{gap:var(--s-2);padding:var(--s-2) var(--s-4)} .hk-brand small{display:none} .hk-links{order:3;flex:1 0 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)} .hk-links::-webkit-scrollbar{display:none} .hk-links a{white-space:nowrap} } /* the theme toggle is an inline SVG on currentColor (ban-list 5), sized on the scale */ .hk-theme svg{width:16px;height:16px;display:block} /* ── THE THREE PREFERENCE SWITCHES ────────────────────────────────────────── Until 2026-08-19 this site honoured prefers-reduced-motion and nothing else — no reduced-transparency, no prefers-contrast, no print sheet, anywhere. They briefly *appeared* to exist because the landing-hero block carried versions scoped to .lhero-gl / .gl-*, elements no profile page contains; splitting the hero out of PAGE_CSS exposed that the other 964 pages had never had them. These are the real ones, for the shared chrome. Page components carry their own in PAGE_CSS. house-design: "three switches, not one". */ @media (prefers-reduced-transparency: reduce){ .hk-nav{backdrop-filter:none;background:var(--hk-panel2)} } @media (prefers-contrast: more){ .hk-nav{backdrop-filter:none;background:var(--hk-panel2)} .hk-links a,.hk-lang,.hk-theme{border:1px solid var(--hk-ink)} } @media print{ .hk-nav{display:none !important} } /* ---- one-app feel: cross-document page transitions --------------------- Every surface opts in, so same-origin navigations cross-fade instead of white-flashing. Browsers without support just navigate normally. */ @view-transition{ navigation: auto; } @media (prefers-reduced-motion: no-preference){ ::view-transition-old(root){ animation: hk-vt-out .16s ease both; } ::view-transition-new(root){ animation: hk-vt-in .20s ease both; } } @keyframes hk-vt-out{ to{ opacity:0 } } @keyframes hk-vt-in { from{ opacity:0 } } .hk-nav{ view-transition-name: hk-nav; } /* nav stays anchored when both pages show it */ /* ---- one-app feel: branded splash instead of a login flash ------------- When a session already exists, the pre-script stamps html.hk-authing BEFORE first paint. We then hide the login box and show a branded splash while the feed decrypts — so switching surfaces never shows the login form. Self-contained via --hk-* tokens: renders correctly on any surface. */ #gate .hk-splash{ display:none } html.hk-authing #gate .box{ display:none !important } html.hk-authing #gate .hk-splash{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; background:var(--hk-splash-bg); color:var(--hk-splash-ink); font-family:Manrope,-apple-system,"Segoe UI",Roboto,sans-serif; } .hk-splash svg{ width:42px; height:42px; color:var(--hk-splash-ink) } .hk-splash .hk-sp-name{ display:flex; align-items:baseline; gap:7px; font-size:var(--t-lg); font-weight:700; letter-spacing:var(--tr-lg) } .hk-splash .hk-sp-name small{ font-size:var(--t-sm); font-weight:600; color:var(--hk-splash-sub) } .hk-splash .hk-sp-bar{ width:130px; height:3px; border-radius:99px; background:var(--hk-line); overflow:hidden } .hk-splash .hk-sp-bar i{ display:block; height:100%; width:38%; border-radius:99px; background:var(--hk-accent); animation:hk-sp 1.1s ease-in-out infinite } @keyframes hk-sp{ 0%{transform:translateX(-120%)} 100%{transform:translateX(340%)} } @media (prefers-reduced-motion:reduce){ .hk-splash .hk-sp-bar i{ animation:none; width:100% } }