/* Mhomentum — typography v1.1 (2026-09-06) Display: Space Grotesk 500/700 — a grotesk drawn from engineering drawings. Slightly odd, entirely competent. That is the brand. UI/body: Inter 400/500/600 — the best small-size UI face there is, and its ae/o-slash/aa are properly drawn, which matters when half our nouns are "malerlokk", "kabelgroft" and "innmaling". Data: JetBrains Mono 400/500 — job numbers, meter numbers, coordinates, EFO numbers, cable IDs. Anything a montor might read aloud over a radio goes in mono. No fourth font. No serif. No condensed. */ /* FONTS ARE NOT LOADED HERE ANY MORE. v1.0 shipped an @import to fonts.googleapis.com from inside this file. That is render-blocking and chained — the browser has to fetch this stylesheet before it learns the fonts exist, then does two more DNS + TLS round trips. Removed in v1.1. Load `../fonts.css` (self-hosted variable woff2, 70.6 KB on the critical path) BEFORE this file: Preload instructions and the reasoning are at the top of `fonts.css`. If you genuinely cannot self-host, the fallback is preconnect + ONE stylesheet link in the — never an @import: Self-hosting is the documented default. Say so in the build if you deviate. */ :root { --mh-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mh-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Scale */ --mh-t-display: 700 clamp(40px, 6.5vw, 76px)/1.02 var(--mh-font-display); --mh-t-h1: 700 clamp(30px, 4.5vw, 44px)/1.08 var(--mh-font-display); --mh-t-h2: 700 28px/1.16 var(--mh-font-display); --mh-t-h3: 700 21px/1.25 var(--mh-font-display); --mh-t-eyebrow: 500 13px/1.2 var(--mh-font-display); /* pair with --mh-track-caps */ --mh-t-lead: 400 20px/1.5 var(--mh-font-ui); --mh-t-body: 400 17px/1.55 var(--mh-font-ui); --mh-t-row: 500 17px/1.35 var(--mh-font-ui); /* list rows — read at arm's length, in a van */ --mh-t-label: 600 14px/1.3 var(--mh-font-ui); --mh-t-small: 400 15px/1.45 var(--mh-font-ui); --mh-t-caption: 500 13px/1.35 var(--mh-font-ui); --mh-t-button: 600 17px/1 var(--mh-font-ui); --mh-t-field: 600 20px/1 var(--mh-font-ui); /* buttons in the montor app */ --mh-t-mono: 400 15px/1.45 var(--mh-font-mono); --mh-t-mono-lg: 500 20px/1.3 var(--mh-font-mono); /* the job number on the job screen */ --mh-track-display: -0.03em; /* Space Grotesk is loose by default. Tighten headlines. */ --mh-track-tight: -0.01em; --mh-track-caps: 0.08em; } .mh-display { font: var(--mh-t-display); letter-spacing: var(--mh-track-display); } .mh-h1 { font: var(--mh-t-h1); letter-spacing: var(--mh-track-display); } .mh-h2 { font: var(--mh-t-h2); letter-spacing: var(--mh-track-tight); } .mh-h3 { font: var(--mh-t-h3); letter-spacing: var(--mh-track-tight); } .mh-eyebrow { font: var(--mh-t-eyebrow); letter-spacing: var(--mh-track-caps); text-transform: uppercase; } .mh-lead { font: var(--mh-t-lead); } .mh-body { font: var(--mh-t-body); } .mh-row { font: var(--mh-t-row); } .mh-label { font: var(--mh-t-label); } .mh-small { font: var(--mh-t-small); } .mh-caption { font: var(--mh-t-caption); } .mh-button { font: var(--mh-t-button); } .mh-field { font: var(--mh-t-field); } /* ------------------------------------------------------------------------ THE WORDMARK Capital M, everything else lowercase. Never MHOMENTUM, never MHOmentum, never mhomentum. Keep text-transform away from it. The hidden word is Mho. It is highlighted — Copper on light, Current on dark — and the highlight is DROPPED BELOW 24px, because at small sizes a three-letter colour change stops reading as a word and starts reading as a rendering fault. v1.0 stated that as prose and left every implementer to override it by hand. v1.1 makes it a token. The highlight colour is `--mh-wordmark-mho`; the size steps below set it correctly for you. Use a step, not a bare font-size, and the rule enforces itself. Mhomentum | Class | Size | Highlight | Where | |------------------------|------|-----------|-------| | `--hero` | 44px | yes | landing hero, covers, slide 1 | | `--head` | 28px | yes | site header, app bar, sign-in | | (no modifier) | 1em | inherits | inside running text | | `--foot` | 20px | NO | footers, sidebars, print rules | | `--micro` | 15px | NO | legal lines, dense chrome, favicons' alt | Need a size the steps do not cover? Set `--mh-wordmark-mho: currentColor` yourself if it lands under 24px. That is the only hand-override left, and it is one declaration rather than a colour lookup. ------------------------------------------------------------------------ */ :root { --mh-wordmark-mho: var(--mh-copper); /* Copper on light — 5.4:1 on Papir */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="dagslys"]) { --mh-wordmark-mho: var(--mh-current); } } :root[data-theme="natt"] { --mh-wordmark-mho: var(--mh-current); } :root[data-theme="felt"] { --mh-wordmark-mho: var(--mh-copper); } .mh-wordmark { font: 700 1em/1 var(--mh-font-display); letter-spacing: -0.03em; text-transform: none; white-space: nowrap; } .mh-wordmark__mho { color: var(--mh-wordmark-mho); } .mh-wordmark--hero { font-size: 44px; } .mh-wordmark--head { font-size: 28px; } .mh-wordmark--foot { font-size: 20px; --mh-wordmark-mho: currentColor; } .mh-wordmark--micro { font-size: 15px; --mh-wordmark-mho: currentColor; } /* Belt and braces, for a size the steps do not cover. Put `--mh-wordmark-size: small` on the wordmark alongside your font-size and the highlight drops itself. Style container queries need no container-type — every element is a style container — and this queries the parent .mh-wordmark from the child. Progressive enhancement: in a browser without style queries the size steps still hold, which is why they, not this, are the contract. */ @container style(--mh-wordmark-size: small) { .mh-wordmark__mho { color: currentColor; } } /* Identifiers. A job number that reflows between renders is a job number that gets read out wrong on the phone. Everything countable is tabular. */ .mh-num, .mh-id, .mh-sum, .mh-qty, .mh-coord { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .mh-id, .mh-coord { font: var(--mh-t-mono); letter-spacing: 0.01em; } /* Rules, not suggestions: - Body copy is never below 16px. In the montor app, never below 17px. - Support OS text scaling to 200% without truncating a job row. - Norwegian is longer than English. Design every button for "Send til fakturering", not for "Invoice". - ALL CAPS only for eyebrows and tiny labels, always with --mh-track-caps. Never a caps headline: it reads as a warning sign, and we are not one. - No serif, no script, no condensed, not even for the funny bits. - Never italic. Space Grotesk has no true italic and the synthesised slant is ugly at every size. Emphasis is weight, not slant. - The Mho highlight is off below 24px. Use a `.mh-wordmark--*` size step and you cannot get this wrong. */