/* LungMAP design tokens — the single source of truth for the site's look. * * Every value the site draws with lives here, once. A component reads a token; * a template reads a component class. Nothing else defines a colour, a size, a * radius or a duration. Change a token here and the whole site follows. * * The values are lifted from the approved home design, * docs/mockups/direction-c-one-screen/01-home.html, and from the template that * serves it, templates/pages/home_preview.html. Where that design used a bare * number, the number is kept exactly, so the home page renders identically * after it is moved onto these tokens. * * This file declares custom properties and nothing else. It sets no rule on * any element, so adding it to a page cannot change what that page renders. * The components layer, components.css, is what consumes these. */ :root { /* --- Brand and ink ------------------------------------------------ * `paper` is the light page ground, `night` the dark ground the hero and * the footer strip sit on. The three inks are the text ramp: body, * secondary, and the muted tone used for placeholders and captions. */ --lm-paper: #fbf9f6; --lm-paper-sunk: #f4f1ec; /* a panel that sits below the page ground */ --lm-white: #ffffff; --lm-night: #0d1b24; --lm-night-deep: #09141b; --lm-ink: #1c2530; --lm-ink-2: #56636f; --lm-ink-3: #8a949e; --lm-line: #e6e0d8; --lm-line-strong: #d5cec3; --lm-blue: #14527f; --lm-blue-lift: #2a7fbf; --lm-blue-sunk: #0f3f62; --lm-pine: #1f6b5e; --lm-mint: #7fc3b6; --lm-mint-lift: #a6e0d3; --lm-clay: #c2653f; /* Text placed on the dark ground, as a five-step ramp from white down to * the quietest footer link. */ --lm-on-dark: #ffffff; --lm-on-dark-2: #d3dde4; --lm-on-dark-3: #cddae2; --lm-on-dark-4: #c6d3dc; --lm-on-dark-5: #9fb3c1; /* Status. Used by the search page, the browse filters and the gate * messages, so a warning is one colour across the site. */ --lm-ok: #1f6b5e; --lm-warn: #c2653f; --lm-error: #a32e2e; --lm-info: #14527f; /* Tinted washes, for a selected row, a hovered card or a callout. Written * as rgba so they sit over any ground without a second opaque colour. */ /* Card surfaces. The paper tokens above are warm -- #fbf9f6 is a cream -- which read as off-yellow against the white page ground. These are cool neutrals pulled toward the brand blue instead, so a raised surface looks related to the site rather than tinted. */ --lm-surface: #f4f7fa; --lm-surface-lift: #ffffff; --lm-surface-line: #dbe4ec; --lm-blue-wash: rgba(20, 82, 127, .07); --lm-blue-wash-2: rgba(20, 82, 127, .13); --lm-blue-edge: rgba(20, 82, 127, .30); --lm-mint-wash: rgba(127, 195, 182, .14); --lm-clay-wash: rgba(194, 101, 63, .10); /* --- Type ---------------------------------------------------------- * Two families: a system sans for everything, and the serif the home * headline and the stat numerals use. */ --lm-font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --lm-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --lm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* The scale. `md` is the body size the home design sets on . The * three display sizes scale with the viewport so a headline never wraps * on a laptop and never overwhelms a wide display. */ --lm-text-2xs: 11.5px; --lm-text-xs: 12.5px; --lm-text-sm: 13.5px; --lm-text-base: 14px; --lm-text-md: 15px; --lm-text-lg: 16px; --lm-text-xl: 18px; --lm-text-2xl: 19px; --lm-text-3xl: 22px; --lm-text-4xl: 26px; --lm-display-sm: clamp(20px, 1.7vw, 25px); --lm-display-md: clamp(16px, 1.35vw, 20px); --lm-display-lg: clamp(34px, 3.5vw, 52px); --lm-leading-tight: 1.12; --lm-leading-snug: 1.35; --lm-leading-sub: 1.55; --lm-leading-body: 1.6; --lm-weight-regular: 400; --lm-weight-medium: 500; --lm-weight-semi: 600; --lm-weight-bold: 700; --lm-track-eyebrow: .19em; /* the uppercase eyebrow */ --lm-track-display: -.014em; /* the serif headline */ /* --- Space --------------------------------------------------------- * A 4px-based scale. Density comes from choosing a smaller step, never * from a hand-written pixel value in a template. */ --lm-space-0: 0; --lm-space-1: 2px; --lm-space-2: 4px; --lm-space-3: 6px; --lm-space-4: 8px; --lm-space-5: 12px; --lm-space-6: 16px; --lm-space-7: 20px; --lm-space-8: 24px; --lm-space-9: 32px; --lm-space-10: 40px; --lm-space-11: 48px; --lm-space-12: 64px; /* The page gutter and the maximum line the content runs to. The home * design uses a 1420px shell with a 34px gutter. */ --lm-shell-max: 1420px; --lm-shell-wide: 1640px; --lm-gutter: 34px; --lm-gutter-sm: 18px; /* Vertical rhythm for a dense page. `tight` is the compact default the * redesign uses; `loose` stays available where a page needs air. */ --lm-pad-tight: 10px; --lm-pad-snug: 14px; --lm-pad-loose: 22px; /* --- Radius --------------------------------------------------------- */ --lm-radius-xs: 6px; --lm-radius-sm: 9px; --lm-radius-md: 12px; --lm-radius-lg: 15px; --lm-radius-xl: 18px; --lm-radius-pill: 999px; /* --- Shadow and glass ----------------------------------------------- */ --lm-shadow-sm: 0 1px 3px rgba(9, 20, 27, .10); --lm-shadow-md: 0 4px 14px rgba(0, 0, 0, .35); --lm-shadow-lg: 0 18px 50px rgba(9, 20, 27, .34); --lm-shadow-card: 0 2px 8px rgba(9, 20, 27, .08); --lm-glass-bg: rgba(255, 255, 255, .09); --lm-glass-bg-hover: rgba(255, 255, 255, .18); --lm-glass-border: rgba(255, 255, 255, .55); --lm-glass-border-hi: rgba(255, 255, 255, .92); --lm-glass-blur: blur(14px) saturate(150%); --lm-strip-bg: rgba(9, 20, 27, .55); --lm-strip-border: rgba(255, 255, 255, .34); --lm-strip-blur: blur(10px); /* --- Motion --------------------------------------------------------- * One easing curve for the whole site. `lift` is the card hover the * approved design uses on `.way`. */ --lm-ease: cubic-bezier(.2, .7, .3, 1); --lm-dur-fast: .15s; --lm-dur: .2s; --lm-dur-slow: .28s; --lm-lift: -4px; --lm-lift-sm: -1px; /* --- Layers ---------------------------------------------------------- */ --lm-z-base: 1; --lm-z-raised: 2; --lm-z-sticky: 30; --lm-z-header: 40; --lm-z-overlay: 60; }