/* ═════════════════════════════════════════════════════════════════════════ NADIS Public Site — Design Tokens The pages a visitor sees BEFORE logging in. Everything is prefixed `--nx-` ("nadis public") so it can never collide with the app's `--bx-*` tokens. THE THESIS — "the clinic day, on paper" The signed-in product is a premium clinical ledger: warm paper, deep ink, Inter, tabular numerals. This site is the COVER of that ledger. Same paper, same ink, same figures — more air. A doctor who signs up should feel they walked through a door, not changed buildings. So the five neutrals below are lifted verbatim from `css/common/tokens.css`. They are not "close to" the app's colours; they are the same hex values. Keep them in sync if that file ever moves. WHERE THE BRAND HUES COME FROM The logo (`images/logo/logo_mark.svg`) is two helical strands, blue into green, on grey: #36A9E1 strand — blue #00BF35 strand — green #575756 wordmark — grey Those are display values: bright, saturated, correct for a mark that sits in whitespace at 40px. As TEXT on paper the blue lands at 3.1:1 and the green at 2.6:1 — both fail WCAG AA, and both read startup-bright rather than clinical. So each is taken to text weight: same hue, deeper, calmer. `--nx-green` is also nudged 8° warmer, toward moss, because a cold emerald on warm paper looks like a mistake. #36A9E1 → #1C6B96 hue 200 → 202, 5.59:1 ✓ AA #00BF35 → #33693F hue 137 → 129, 6.21:1 ✓ AA The literal logo hues appear in exactly one place on the whole site: inside the mark itself. That restraint is the difference between premium and loud. THE TWO HUES CARRY FIXED MEANING — never decoration: BLUE what the system does for you front desk, records, billing GREEN what grows your practice diagnostics, recall, revenue Contrast is stated next to every colour below and was measured, not estimated. If you add a value, measure it and write the number down. ═════════════════════════════════════════════════════════════════════════ */ /* ── Inter Variable, self-hosted ───────────────────────────────────────── No Google Fonts anywhere on the public site. Three reasons, in order: privacy (clinic networks and DPDP — no font request should tell a third party who visited a healthcare site), speed (three fewer network hops before first paint), and continuity (the app is already Inter). Same declaration as `css/billing/typography.css`, deliberately duplicated rather than imported: the public pages must not pull in the billing stylesheet, and a repeated @font-face for an already-cached file costs nothing. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/Inter/InterVariable.woff2") format("woff2-variations"), url("/static/fonts/Inter/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/fonts/Inter/InterVariable-Italic.woff2") format("woff2-variations"), url("/static/fonts/Inter/InterVariable-Italic.woff2") format("woff2"); } :root { /* ── Neutrals — identical to the app's --bx-* values ─────────────────── */ --nx-paper: #fafaf7; /* page background — warm off-white */ --nx-paper-raised: #ffffff; /* cards that need to lift off the paper */ --nx-sand: #f4f2eb; /* alternating band, input rest state */ --nx-ink: #1a1a17; /* display type, primary button fill 16.7:1 */ --nx-ink-muted: #5c5b55; /* body prose, captions 6.5:1 6.1:1 on --nx-sand, the tightest pair on the site. Was #6b6a64 (5.2 / 4.8) — legal AA, but thin for long prose read on a clinic screen. Do not lighten it. */ --nx-ink-faint: #94928a; /* placeholders, disabled 3.0:1 DECORATIVE AND PLACEHOLDER TEXT ONLY. Never put information a reader needs in this colour — it does not clear AA. */ --nx-rule: #e8e6df; /* hairlines, dividers, input borders */ --nx-rule-strong: #c9c5b8; /* emphasised rules, input hover */ /* ── Brand, at text weight ───────────────────────────────────────────── */ --nx-blue: #1c6b96; /* system stations, links, active nav 5.6:1 */ --nx-blue-deep: #14506f; /* link hover, pressed 8.3:1 */ --nx-blue-tint: #e6eff4; /* station chip fill on paper */ --nx-green: #33693f; /* growth stations, "Live", trial 6.2:1 */ --nx-green-deep: #264e2f; /* pressed 9.1:1 */ --nx-green-tint: #e7f0e9; /* trial badge fill on paper */ /* ── The dark band ─────────────────────────────────────────────────────── The parent company's deep green. ONE dark colour for the whole site — the home trust band, the Nadis AI band, the About commitments, both auth side panels, the Terms and Privacy modal header, and the footer. A dark section should always read as the same surface rather than as a new idea each time, and using Nurev's own green means the product and the company are not arguing with each other. The lights on it are a pale mint rather than white: on a green this deep, pure white reads clinical-cold, and the mint keeps the surface feeling lit from inside rather than merely inverted. ───────────────────────────────────────────────────────────────────── */ --nx-band: #072b26; /* the dark surface */ --nx-band-raised: #0e3f37; /* cards sitting on it */ --nx-band-rule: #1c584d; /* hairlines inside it */ /* Text and accents ON --nx-band. Separate tokens because the paper versions are far too dark to use here. */ --nx-on-band: #e4eeea; /* headings and body 12.8:1 */ --nx-on-band-muted: #a3c2b8; /* captions, secondary copy 7.9:1 */ --nx-on-band-accent: #7fd9c4; /* the inner light — labels 9.1:1 */ --nx-on-band-bright: #6ee7a5; /* growth markers, "Live" 9.9:1 */ /* The Day Line keeps its meaning on the dark surface: blue = what the system does, green = what grows the practice. A blue is retained here for exactly that reason — dropping it would make both marker types green and the distinction would be lost. */ --nx-on-band-system: #8ec8e8; /* system markers 8.4:1 */ --nx-on-band-growth: #6ee7a5; /* growth markers 9.9:1 */ /* The pale mint as a LIGHT surface, for panels that need to lift off the paper without going dark. Ink on it is 14.7:1. */ --nx-mint: #e4eeea; /* ── Amber ─────────────────────────────────────────────────────────────── ONE meaning, and only one: NOT FINISHED YET. It marks "In progress", "Target" and "Coming soon", and nothing else on the site. That is worth a hue of its own. Before this, an honest "In progress" and a shipped "Live" wore the same accent and differed only by the word inside them — which meant the most important thing about the trust band (that some rows are not done) had to be read rather than seen. Two values, because amber is a light hue: #f0b95e sings on the dark band at 8.5:1 but is 1.7:1 on paper and unusable there. On paper it drops to #9a5614 — the same value the signed-in product uses for money outstanding, so "pending" looks identical either side of the login. ───────────────────────────────────────────────────────────────────── */ --nx-amber: #f0b95e; /* on the dark band 8.5:1 */ --nx-amber-ink: #9a5614; /* on paper 5.4:1 */ --nx-amber-fill: #f0b95e24; /* 14% tint — chip fill on dark */ --nx-amber-tint: #f6ecdc; /* chip fill on paper */ /* ── The footer ────────────────────────────────────────────────────────── The footer is now the SAME surface as every other dark band — one dark colour across the site. These aliases stay so footer styling reads for what it is, and so the footer can be pulled apart again later without hunting through base.css. Safe today only because no page ends with a dark band directly above the footer; every one closes on paper. If that changes, the two would merge into one slab and the footer would need its own value back. ───────────────────────────────────────────────────────────────────── */ --nx-footer: var(--nx-band); --nx-footer-rule: var(--nx-band-rule); --nx-on-footer: var(--nx-on-band); --nx-on-footer-muted: var(--nx-on-band-muted); --nx-on-footer-hover: var(--nx-on-band-accent); /* ── Focus ───────────────────────────────────────────────────────────── */ /* One bright blue, used for nothing except "this has keyboard focus". Same value as the app's --bx-focus-ring so the ring a user learns before login is the ring they keep seeing after. */ --nx-focus: #2d6cdf; --nx-focus-width: 2px; --nx-focus-offset: 2px; /* ── Type ───────────────────────────────────────────────────────────── One family, three registers. The personality of this site comes from figure treatment and tracking, not from a novelty display face — which is honest, because the product's own voice is a ledger. Register 1 DISPLAY 620 weight, tight negative tracking, set large Register 2 TEXT 400/500, normal tracking, generous leading Register 3 LABEL 500, 11px, uppercase, wide tracking, tabular Register 3 is the ledger voice: it is how the app labels a table column, and it is how this site labels a section. That repetition is the join between the two halves of the product. ─────────────────────────────────────────────────────────────────────── */ --nx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fluid display sizes. The clamp middle terms are in rem + vw so they scale with the viewport but still respect a user's browser font size. */ --nx-text-display: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem); --nx-text-title: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); --nx-text-lead: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem); --nx-text-heading: 1.125rem; --nx-text-body: 1.0625rem; --nx-text-small: 0.9375rem; --nx-text-label: 0.6875rem; --nx-track-display: -0.028em; --nx-track-title: -0.02em; --nx-track-heading: -0.01em; --nx-track-label: 0.12em; --nx-leading-display: 1.05; --nx-leading-title: 1.14; --nx-leading-body: 1.6; /* ── Space — the app's Fibonacci ladder, extended by two rungs ──────── 4 8 13 21 34 55 are used verbatim in the signed-in product. Marketing pages need bigger separations than a data table does, so the ladder continues rather than restarting: 89 and 144 are the next two Fibonacci numbers, not round figures picked to look tidy. Never invent an intermediate. If a gap feels wrong, step up or down. */ --nx-space-1: 4px; --nx-space-2: 8px; --nx-space-3: 13px; --nx-space-4: 21px; --nx-space-5: 34px; --nx-space-6: 55px; --nx-space-7: 89px; /* between major sections on tablet */ --nx-space-8: 144px; /* between major sections on desktop */ /* ── Radii — same ladder, same rule ──────────────────────────────────── */ --nx-radius-1: 5px; /* chips, small controls */ --nx-radius-2: 8px; /* inputs, secondary buttons */ --nx-radius-3: 13px; /* cards */ --nx-radius-4: 21px; /* large panels, the screenshot frame */ --nx-radius-pill: 999px; /* ── Measure ─────────────────────────────────────────────────────────── */ --nx-measure: 68ch; /* comfortable reading width for prose */ --nx-measure-tight: 22ch; /* display headlines — forces a 2–3 line break*/ --nx-page-max: 1240px; /* outer container */ --nx-gutter: clamp(21px, 4vw, 55px); /* ── Elevation — barely there. Paper does not float. ─────────────────── */ --nx-shadow-1: 0 1px 2px rgba(26, 26, 23, 0.04), 0 2px 8px rgba(26, 26, 23, 0.03); --nx-shadow-2: 0 2px 4px rgba(26, 26, 23, 0.05), 0 8px 24px rgba(26, 26, 23, 0.06); --nx-shadow-3: 0 4px 8px rgba(26, 26, 23, 0.06), 0 24px 64px rgba(26, 26, 23, 0.10); /* ── Motion ────────────────────────────────────────────────────────── The brief is "calm, never cinematic". So: short durations, no bounce, no spring. The only easing with any character is --nx-ease-settle, and it exists for exactly one thing — the Day Line markers coming to rest. Every one of these collapses to 0.01ms under prefers-reduced-motion (see the block at the bottom of this file). */ --nx-dur-fast: 120ms; /* hover, focus — must feel instant */ --nx-dur-base: 220ms; /* buttons, chips, disclosure */ --nx-dur-slow: 420ms; /* section reveal on scroll */ --nx-dur-settle: 900ms; /* the Day Line sequence, once per page load */ --nx-ease: cubic-bezier(0.4, 0.0, 0.2, 1); --nx-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --nx-ease-settle: cubic-bezier(0.16, 0.84, 0.28, 1); /* ── Layers ────────────────────────────────────────────────────────── Deliberately far below the app's --bx-* z-index scale (which starts at 2000) so that if a public page ever renders alongside app chrome, the app always wins. */ --nx-z-sticky: 100; /* the header */ --nx-z-backdrop: 200; /* "Talk to us" backdrop */ --nx-z-dialog: 210; /* "Talk to us" panel */ --nx-z-skiplink: 300; /* skip-to-content, must beat everything */ } /* ── Reduced motion ─────────────────────────────────────────────────────── Honoured as a real preference, not a nicety. Someone with vestibular sensitivity gets the fully settled page immediately: every animation and transition is collapsed rather than merely shortened, so nothing moves. Placed in the token file so it applies to every public stylesheet without each one having to remember. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --nx-dur-fast: 0.01ms; --nx-dur-base: 0.01ms; --nx-dur-slow: 0.01ms; --nx-dur-settle: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* Delays must be killed too, and this is not a nicety. A staggered reveal built with `animation-fill-mode: both` holds its FROM state — opacity 0 — for the whole delay. Collapsing only the duration therefore removes the movement but keeps the withholding: the auth tagline's second line stayed invisible for 130ms and its closing full stop for 460ms, then appeared abruptly. That is worse than the animation it was meant to replace, and it is exactly what someone with vestibular sensitivity asked not to happen. With the delays zeroed as well, the settled page is simply there. */ animation-delay: 0s !important; transition-delay: 0s !important; } }