/* ══════════════════════════════════════════════════════════════════════════ Pulseready Medsystems — site layer. styles.css (the Modernist design system) is the source of truth for tokens and components and is loaded first, unchanged. This file carries three things it does not: 1. The baked theme. The canvas runtime used to write these onto as inline styles at load. The values are fixed, so they are static here. 2. The page layer: layout classes replacing the inline styles the canvas documents used throughout. 3. The responsive layer. The canvas documents had no media queries at all. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Baked theme ────────────────────────────────────────────────────── Was: applyTheme() with accentColor #c42b30, heroTreatment "Red poster", rhythm "Compact". */ :root { --color-accent: #c42b30; --color-accent-100: #fbeaea; --color-accent-200: #f3c6c6; --color-accent-300: #e79b9b; --color-accent-400: #d5605f; --color-accent-500: #c42b30; --color-accent-600: #ac2429; --color-accent-700: #8f1c22; --color-accent-800: #6d151a; --color-accent-900: #4a0e12; /* Mono scheme: accent-2 resolves to the same role. */ --color-accent-2: #c42b30; --color-accent-2-100: #fbeaea; --color-accent-2-200: #f3c6c6; --color-accent-2-300: #e79b9b; --color-accent-2-400: #d5605f; --color-accent-2-500: #c42b30; --color-accent-2-600: #ac2429; --color-accent-2-700: #8f1c22; --color-accent-2-800: #6d151a; --color-accent-2-900: #4a0e12; /* Hero: "Red poster" — the one place the accent runs as a full field. */ --hero-bg: var(--color-accent); --hero-fg: var(--color-bg); --hero-accent: color-mix(in srgb, var(--color-bg) 72%, var(--color-accent)); --hero-kicker: color-mix(in srgb, var(--color-bg) 78%, transparent); --hero-body: color-mix(in srgb, var(--color-bg) 88%, transparent); --hero-tag-bg: transparent; --hero-tag-fg: var(--color-bg); --hero-tag-bd: color-mix(in srgb, var(--color-bg) 70%, transparent); --hero-tag-bw: 2px; /* Rhythm: "Compact". */ --hero-pad-t: 96px; --hero-pad-b: 84px; --sec-pad: 48px; /* Page layer. */ --measure: 1200px; --gutter: clamp(20px, 5vw, 72px); --nav-overlap: 96px; --ink-80: color-mix(in srgb, var(--color-text) 80%, transparent); --ink-78: color-mix(in srgb, var(--color-text) 78%, transparent); --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent); --ink-62: color-mix(in srgb, var(--color-text) 62%, transparent); --deep-navy: #1d3557; } /* ── 2. Base ─────────────────────────────────────────────────────────────── */ body { margin: 0; text-wrap: pretty; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-700); } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--sec-pad) 0; } .section-tall { padding: var(--sec-pad) 0 calc(var(--sec-pad) + 14px); } .rule { margin: 0; } /* The uppercase accent kicker above each section. */ .section-label { display: block; font-size: 13px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 28px; } .section-label-tight { margin-bottom: 14px; } /* The recurring section heading. */ .h-section { font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 42px; letter-spacing: -0.015em; margin: 0; } .body-copy { font-size: 15.5px; line-height: 28px; margin: 20px 0 0; max-width: 48ch; color: var(--ink-78); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 14px; } .skip-link:focus { left: 12px; top: 12px; color: var(--color-bg); } /* ── 3. Navigation ───────────────────────────────────────────────────────── */ .nav-shell { position: sticky; top: 0; z-index: 30; padding: 20px clamp(16px, 4vw, 40px) 0; } .site-nav { display: flex; align-items: center; max-width: var(--measure); margin: 0 auto; border: 0; border-radius: 999px; background: #ffffff; box-shadow: 0 18px 40px -24px rgba(32, 30, 29, 0.45); gap: clamp(10px, 1.6vw, 28px); row-gap: 0; padding: 14px 18px; min-height: 76px; } .brand { white-space: nowrap; flex: 0 0 auto; text-decoration: none; color: var(--color-text); display: inline-flex; align-items: center; gap: 12px; margin-right: 0; } .brand:hover { color: var(--color-text); } .brand-mark { flex: 0 0 auto; overflow: visible; } .brand-lockup { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 20px; letter-spacing: 0.005em; } .brand-sub { font-family: var(--font-heading); font-weight: 600; font-size: 10.5px; line-height: 12px; letter-spacing: 0.22em; color: var(--color-accent); } .nav-collapse { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: clamp(10px, 1.6vw, 28px); } .nav-links { display: flex; align-items: center; gap: 10px clamp(12px, 1.8vw, 30px); flex: 1 1 auto; min-width: 0; justify-content: center; } .nav-bottom-row { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); flex: 0 0 auto; } .nav-link, .nav-trigger { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; color: var(--color-text); } .nav-link:hover, .nav-trigger:hover { color: var(--color-accent); } .site-nav a[aria-current="page"] { color: var(--color-accent); } .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-trigger { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; } .nav-trigger-caret { font-size: 11px; line-height: 1; transition: transform 0.15s; } .nav-trigger[aria-expanded="true"] .nav-trigger-caret { transform: rotate(180deg); } .nav-panel { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); z-index: 40; min-width: 268px; background: #ffffff; border-radius: 20px; box-shadow: 0 24px 50px -22px rgba(32, 30, 29, 0.5); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .nav-panel[hidden] { display: none; } .nav-panel-item { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--color-text); } .nav-panel-item:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); } .nav-panel-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 20px; } .nav-panel-sub { display: block; font-size: 13px; line-height: 18px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 68%, transparent); } .nav-cta { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-accent); padding-right: 6px; } .nav-cta:hover { color: var(--color-accent-700); } .nav-cta-chev { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 999px; font-size: 13px; line-height: 1; } .lang-switch { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 40px; padding: 6px 11px; border: 2px solid var(--color-divider); border-radius: 999px; font-family: var(--font-heading); font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: 0.04em; color: var(--ink-70); text-decoration: none; } .lang-switch:hover { color: var(--color-accent); border-color: var(--color-accent); } /* The mobile disclosure button, hidden until the nav collapses. */ .nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; margin-left: auto; flex: 0 0 auto; background: none; border: 2px solid var(--color-divider); border-radius: 999px; padding: 9px 14px; cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--color-text); } .nav-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); } .nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; } .nav-toggle-bars span { display: block; height: 2px; background: currentColor; } /* ── 4. Hero ─────────────────────────────────────────────────────────────── */ .hero { background: var(--hero-bg); color: var(--hero-fg); margin-top: calc(var(--nav-overlap) * -1); padding-top: var(--nav-overlap); } .hero-inner { max-width: var(--measure); margin: 0 auto; padding: var(--hero-pad-t) var(--gutter) var(--hero-pad-b); } .hero-eyebrow { margin: 0 0 30px; } .hero-eyebrow-name { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.01em; color: var(--hero-fg); } .hero-eyebrow-sub { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.3; letter-spacing: 0.01em; margin-top: 7px; color: var(--hero-kicker); } .hero-tag { display: inline-flex; align-items: center; align-self: flex-start; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: var(--hero-tag-bg); color: var(--hero-tag-fg); border: var(--hero-tag-bw) solid var(--hero-tag-bd); margin: 0 0 26px; } .hero-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0 -0.045em; max-width: 20ch; color: var(--hero-fg); } .hero-title span { display: block; } .hero-title .accent { color: var(--hero-accent); } .hero-lede { font-size: 17px; line-height: 32px; max-width: 56ch; margin: 40px 0 0; color: var(--hero-body); } /* ── 5. Statistic cards ──────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .stat { border: 2px solid var(--color-divider); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 8px; } .stat-figure { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 3.4vw, 48px); line-height: 56px; color: var(--color-accent); margin: 0 0 0 -0.045em; } .stat-body { font-size: 15.5px; line-height: 28px; margin: 0; color: var(--ink-78); } .source-note { font-size: 13px; line-height: 22px; margin: 20px 0 0; color: var(--ink-62); max-width: 76ch; } .source-note a { color: var(--color-accent-700); border-bottom: 1px solid color-mix(in srgb, var(--color-accent-700) 40%, transparent); } /* ── 6. Two-product panel ────────────────────────────────────────────────── */ .products-panel { background: var(--deep-navy); color: var(--color-bg); padding: clamp(32px, 4vw, 56px); } .products-panel .section-label { color: color-mix(in srgb, #f3f2f2 68%, transparent); } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-col { padding: 0 clamp(24px, 4vw, 56px) 0 0; border-right: 2px solid color-mix(in srgb, #f3f2f2 26%, transparent); } .product-col + .product-col { padding: 0 0 0 clamp(24px, 4vw, 56px); border-right: 0; } .product-title { font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 42px; letter-spacing: -0.015em; margin: 16px 0 0; color: var(--color-bg); } .product-body { font-size: 15.5px; line-height: 28px; margin: 14px 0 0; color: color-mix(in srgb, #f3f2f2 80%, transparent); max-width: 44ch; } .product-link-row { margin: 20px 0 0; } .product-link { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-bg); border-bottom: 2px solid color-mix(in srgb, #f3f2f2 45%, transparent); padding-bottom: 2px; } .product-link:hover { color: #ffffff; border-bottom-color: #ffffff; } .tag-on-dark { background: transparent; color: var(--color-bg); border: 2px solid color-mix(in srgb, #f3f2f2 55%, transparent); } .tag-beta { background: var(--color-accent); color: var(--color-bg); border: 2px solid var(--color-accent); } /* ── 7. Split sections ───────────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(24px, 5vw, 96px); align-items: start; } .email-list { display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; word-break: break-word; } /* ── 8. Closing poster ───────────────────────────────────────────────────── */ .poster { background: var(--color-accent); color: var(--color-bg); } .poster-inner { max-width: var(--measure); margin: 0 auto; padding: calc(var(--sec-pad) + 14px) var(--gutter); } .poster-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 0 -0.058em; } .poster-title span { display: block; } .poster-actions { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; } .btn-on-poster { min-height: 44px; padding: 0 22px; background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .btn-on-poster:hover { background: #000000; color: var(--color-bg); } .poster-aside { font-size: 15px; color: color-mix(in srgb, var(--color-bg) 88%, transparent); } .poster-aside a { color: var(--color-bg); border-bottom: 2px solid color-mix(in srgb, var(--color-bg) 45%, transparent); padding-bottom: 2px; font-family: var(--font-heading); font-weight: 800; } .poster-aside a:hover { color: #ffffff; border-bottom-color: #ffffff; } /* ── 8b. Founders ────────────────────────────────────────────────────────── */ .founder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); } .founder { display: flex; flex-direction: column; } .founder-portrait { border: 2px solid var(--color-divider); aspect-ratio: 1 / 1; max-width: 220px; overflow: hidden; display: flex; } .founder-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .founder-role { display: block; font-size: 12px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin: 18px 0 8px; } .founder-name { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; margin: 0; } .founder-bio { font-size: 15px; line-height: 27px; margin: 12px 0 0; color: var(--ink-78); } .founder-email { margin: 14px 0 0; font-size: 14px; line-height: 24px; word-break: break-word; } /* ── 8c. Milestone timeline ────────────────────────────────────────────── Horizontal on desktop, vertical on narrow screens. The canvas version was a fixed 4-column grid with no fallback, driven by hover alone. */ /* The instruction line above a switcher. Wording covers pointer, keyboard and touch: the canvas copy said "Hover", which was untrue for half the traffic. */ .switcher-hint { font-size: 14px; line-height: 24px; margin: 0 0 34px; color: var(--ink-62); } .timeline { position: relative; } .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--color-text); } .timeline-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; position: relative; margin: 0; padding: 0; list-style: none; } .tl-item { display: grid; grid-template-rows: 1fr 0 1fr; padding-right: clamp(16px, 2.5vw, 40px); } .tl-above { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 150px; } .tl-below { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; min-height: 150px; } .tl-mid { display: flex; align-items: center; gap: 10px; height: 0; } .tl-dot { width: 16px; height: 16px; flex: 0 0 16px; margin-left: -1px; border-radius: 50%; display: block; background: var(--color-text); transition: background 0.15s; } .tl-stem { width: 2px; height: 48px; flex: 0 0 48px; margin-left: 7px; display: block; background: var(--color-text); transition: background 0.15s; } .tl-date { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; padding: 2px 8px; background: var(--color-bg); color: color-mix(in srgb, var(--color-text) 64%, transparent); transition: color 0.15s; } .tl-trigger { flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--color-text) 32%, transparent); background: none; padding: 14px 16px; width: 100%; min-height: 118px; box-sizing: border-box; transition: border-color 0.15s; text-align: left; font-family: inherit; color: inherit; cursor: pointer; display: block; } .tl-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 24px; } .tl-body { display: block; font-size: 13.5px; line-height: 23px; margin: 8px 0 0; visibility: hidden; color: var(--ink-80); } /* Active milestone. */ .tl-item[data-active="true"] .tl-trigger { border-color: var(--color-accent); } .tl-item[data-active="true"] .tl-body { visibility: visible; } .tl-item[data-active="true"] .tl-dot, .tl-item[data-active="true"] .tl-stem { background: var(--color-accent); } .tl-item[data-active="true"] .tl-date { color: var(--color-accent-700); } /* ── 8d. Contact ─────────────────────────────────────────────────────────── */ /* The contact hero sets its statement larger than the others. */ .hero--display .hero-inner { padding-top: 132px; padding-bottom: 96px; } .hero--display .hero-title { font-size: clamp(46px, 7vw, 96px); line-height: 1.03; letter-spacing: -0.025em; margin-left: -0.06em; max-width: 14ch; } .hero--display .hero-lede { font-size: 18px; line-height: 34px; margin-top: 56px; } .hero-standalone-kicker { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -0.01em; color: var(--hero-kicker); margin: 0 0 34px; } .contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px clamp(32px, 6vw, 96px); align-items: start; padding: var(--sec-pad) 0 calc(var(--sec-pad) + 26px); } .contact-form { display: flex; flex-direction: column; gap: 24px; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .field > .field-label { display: block; font-size: 13px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-62); margin: 0 0 8px; } .req { color: var(--color-accent); } .contact-form .input { width: 100%; min-height: 48px; font-size: 15px; } .contact-form textarea.input { line-height: 26px; resize: vertical; min-height: 150px; } .consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 24px; color: var(--ink-78); } .consent input { margin-top: 5px; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--color-accent); } .form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .form-actions .btn { min-height: 48px; padding: 0 24px; } /* The canvas form had a success state only, and faked it. */ .form-status { font-size: 14px; line-height: 24px; } .form-status[data-state="success"] { color: var(--color-accent-700); } .form-status[data-state="error"] { color: var(--color-accent-700); font-weight: 600; } .form-status[data-state="pending"] { color: var(--ink-62); } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-aside { display: flex; flex-direction: column; gap: 42px; } .aside-label { display: block; font-size: 13px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-62); margin: 0 0 8px; } .aside-body { font-size: 15px; line-height: 28px; margin: 0; color: var(--ink-78); } .contact-people { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 26px; } .contact-people a { word-break: break-word; } .person-role { font-family: var(--font-heading); font-weight: 800; font-size: 13px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 2px; } .aside-links { display: flex; flex-direction: column; gap: 12px; } .aside-links a { font-family: var(--font-heading); font-weight: 800; font-size: 15px; } /* ── 8e. Forecast ────────────────────────────────────────────────────────── */ .hero-title--wide { max-width: 16ch; } .hero--display .hero-tag + .hero-title { margin-top: 34px; } .split-wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(24px, 5vw, 96px); align-items: center; } .split-narrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(24px, 5vw, 96px); align-items: start; } .lede-44 { font-size: 15.5px; line-height: 28px; margin: 20px 0 0; max-width: 44ch; color: var(--ink-78); } /* The chart figure. Presentational: it illustrates the output format rather than plotting live data, so it is exposed to assistive technology as a single labelled image, not as 24 anonymous bars. */ .chart { margin: 0; border: 2px solid var(--color-divider); background: var(--color-bg); } .chart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 2px solid var(--color-divider); } .chart-title { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.02em; } .chart-scope { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .chart-scope-current { padding: 4px 10px; background: var(--color-accent); color: #ffffff; } .chart-scope-of { color: var(--ink-62); } .chart-days { display: flex; padding: 0 18px; border-bottom: 1px solid var(--color-divider); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .chart-day { padding: 8px 12px 7px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .chart-day[data-current="true"] { color: var(--color-text); border-bottom: 2px solid var(--color-accent); margin-bottom: -1px; } .chart-plot-wrap { padding: 22px 18px 10px; } .chart-plot { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 160px; border-bottom: 2px solid var(--color-divider); } .chart-plot span { display: block; background: color-mix(in srgb, var(--color-text) 22%, transparent); } .chart-plot span[data-peak="true"] { background: var(--color-accent); } .chart-axis { display: flex; justify-content: space-between; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-62); padding-top: 6px; } .chart-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 10px 18px 14px; border-top: 1px solid var(--color-divider); } .chart-legend span { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-70); } .swatch { width: 10px; height: 10px; flex: 0 0 10px; display: block; background: color-mix(in srgb, var(--color-text) 22%, transparent); } .swatch--peak { background: var(--color-accent); } .figure-note { font-size: 13px; line-height: 22px; margin: 8px 0 0; color: var(--ink-70); } /* Metric tiles. */ .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } .metric { border-top: 2px solid var(--color-divider); padding: 16px 0 0; } .metric-label { font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); } .metric-value { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 2.6vw, 36px); line-height: 44px; margin: 6px 0 0; color: var(--color-text); } .metric-value--accent { color: var(--color-accent); } .metric-value--warn { color: #a45606; } .metric-note { font-size: 13px; line-height: 20px; color: var(--ink-70); } /* Turnout bands. */ .band-list { display: flex; flex-direction: column; margin-top: 20px; } .band { display: grid; grid-template-columns: 14px 108px 1fr; gap: 0 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--color-divider); } .band-chip { width: 14px; height: 14px; display: block; } .band-range { font-family: ui-monospace, Menlo, monospace; font-size: 13px; } .band-text { font-size: 14px; line-height: 22px; } .band-text strong { font-family: var(--font-heading); font-weight: 800; } .turnout-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 42px clamp(24px, 5vw, 96px); margin-top: 56px; } .h-sub { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 28px; margin: 0; } /* Audience columns. */ .audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .audience-col { padding: 0 clamp(24px, 4vw, 48px) 0 0; border-right: 2px solid var(--color-divider); } .audience-col:nth-child(2) { padding: 0 clamp(24px, 4vw, 48px); } .audience-col:last-child { padding: 0 0 0 clamp(18px, 3vw, 36px); border-right: 0; } .audience-col p { font-size: 15.5px; line-height: 28px; margin: 10px 0 0; color: var(--ink-78); } /* ── 8f. PulseReady ──────────────────────────────────────────────────────── */ /* Numbered process steps. */ .step { display: grid; grid-template-columns: minmax(64px, 120px) minmax(0, 360px) minmax(0, 1fr); gap: 14px clamp(24px, 4vw, 72px); align-items: baseline; padding: 42px 0; } .step + .step { border-top: 2px solid var(--color-divider); } .step-num { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 28px; margin: 0; } .step-title { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 28px; letter-spacing: -0.01em; margin: 0; } .step-body { font-size: 15.5px; line-height: 28px; margin: 0; max-width: 52ch; color: var(--ink-78); } /* Feature showcase. Was a 6fr/7fr split, which left the tablet about 600px wide: the app's 13px interface text rendered at roughly 7px, too small to read. The tablet now gets a full-width row of its own so the frame reaches its native 1024px and the screens are legible at 1:1. The feature list became a tab strip above. */ .showcase { display: block; } .feature-tabs { list-style: none; margin: 0 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--color-divider); } .feature-tabs li { display: flex; } /* Each tab is a real button: the canvas version used a div with a mouseenter handler, which no touch user could operate. */ .feature { display: block; width: 100%; padding: 20px 18px 20px 0; border: 0; border-top: 3px solid transparent; margin-top: -2px; background: none; font-family: inherit; color: var(--ink-70); text-align: left; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .feature:hover { color: var(--color-text); } .feature[data-active="true"] { border-top-color: var(--color-accent); color: var(--color-text); } .feature-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 25px; letter-spacing: -0.01em; } /* The description for the selected feature, shown under the strip. */ .feature-desc-wrap { border-top: 2px solid var(--color-divider); padding: 22px 0 36px; } .feature-desc { font-size: 16px; line-height: 29px; margin: 0; max-width: 74ch; color: var(--ink-80); } .feature-desc[hidden] { display: none; } /* Tablet frame. */ /* 1024px frame + 12px shell padding each side = 1048px, which is exactly the content width available inside the 1200px wrap. --screen-scale then resolves to 1.0 and the app screens render at native size. */ .tablet-shell { background: var(--color-text); border-radius: 22px; padding: 12px; box-shadow: 0 30px 60px -34px rgba(32, 30, 29, 0.6); max-width: 1048px; margin: 0 auto; } .tablet-frame { position: relative; --screen-scale: 0.39; width: 100%; aspect-ratio: 4 / 3; background: #f9fafb; border-radius: 10px; overflow: hidden; } .tablet-screen { position: absolute; top: 0; left: 0; } .tablet-screen[hidden] { display: none; } .tablet-screen-inner { width: 1024px; height: 768px; transform: scale(var(--screen-scale)); transform-origin: top left; } .tablet-note { font-size: 13px; line-height: 22px; margin: 14px auto 0; max-width: 1048px; color: var(--ink-62); } /* ── 9. Footer ───────────────────────────────────────────────────────────── */ .site-footer { padding: 56px 0; font-size: 13px; line-height: 28px; color: var(--ink-70); } .footer-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; } .footer-brand { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--color-text); } .footer-brand .accent { color: var(--color-accent); } .footer-tagline { max-width: 34ch; margin-top: 8px; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; } .footer-legal { display: flex; flex-wrap: wrap; gap: 24px; } .site-footer a { color: var(--ink-70); } .site-footer a:hover { color: var(--color-accent); } /* ── 10. Responsive ────────────────────────────────────────────────────── The canvas documents shipped zero media queries. Everything below is new. */ @media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1100px) { .split-wide, .split-narrow { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; } .turnout-split { grid-template-columns: minmax(0, 1fr); gap: 42px; margin-top: 42px; } } /* The three audience columns stack, and their dividers turn horizontal. */ /* The five tabs need room. Below 900px they go to two rows, then one column, rather than squeezing five headings across a phone. */ @media (max-width: 900px) { .feature-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .feature-tabs { grid-template-columns: minmax(0, 1fr); border-top: 0; } .feature { border-top: 2px solid var(--color-divider); border-left: 3px solid transparent; padding: 16px 0 16px 14px; margin-top: 0; } .feature[data-active="true"] { border-top-color: var(--color-divider); border-left-color: var(--color-accent); } .feature-desc-wrap { padding-top: 18px; padding-bottom: 28px; } } @media (max-width: 720px) { .step { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0; } .step-num { line-height: 20px; color: var(--color-accent-700); } } @media (max-width: 860px) { .audience-grid { grid-template-columns: minmax(0, 1fr); } .audience-col, .audience-col:nth-child(2), .audience-col:last-child { padding: 0 0 28px; border-right: 0; border-bottom: 2px solid var(--color-divider); margin-bottom: 28px; } .audience-col:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } } /* Wide data gets its own scroll container rather than forcing the page wide. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 460px) { .metric-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .band { grid-template-columns: 14px 88px 1fr; gap: 0 12px; } } @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Nav collapses to a disclosure panel. */ @media (max-width: 900px) { :root { --nav-overlap: 84px; } .site-nav { flex-wrap: wrap; min-height: 64px; padding: 12px 16px; } .nav-toggle { display: inline-flex; } .nav-collapse { flex: 1 0 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding-top: 12px; margin-top: 12px; border-top: 2px solid var(--color-divider); } .site-nav[data-open="true"] .nav-collapse { display: flex; } .nav-links { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; } .nav-link, .nav-trigger { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); width: 100%; } .nav-dropdown { display: block; } .nav-trigger { justify-content: space-between; text-align: left; } /* In the collapsed nav the product list sits inline, not as an overlay. */ .nav-panel { position: static; transform: none; min-width: 0; box-shadow: none; border-radius: 0; padding: 4px 0 8px 12px; border-left: 2px solid var(--color-accent); margin: 8px 0 8px 4px; } .nav-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex: 1 0 100%; padding-top: 16px; } .nav-cta { padding-right: 0; } } @media (max-width: 900px) { .founder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The timeline turns vertical rather than squeezing four columns onto a phone. */ @media (max-width: 760px) { .timeline::before { display: none; } .timeline-track { grid-template-columns: minmax(0, 1fr); } .tl-item { display: flex; flex-direction: column; padding: 0 0 28px 26px; border-left: 2px solid var(--color-text); } .tl-item:last-child { padding-bottom: 0; border-left-color: transparent; } .tl-mid { order: 1; height: auto; margin: 0 0 12px -34px; } .tl-above, .tl-below { order: 2; display: block; min-height: 0; } .tl-stem { display: none; } .tl-trigger { min-height: 0; } /* Vertical layout has room, so every milestone reads at once, which makes the "select a milestone" instruction redundant here. */ .tl-body { visibility: visible; } .timeline-hint { display: none; } } @media (max-width: 720px) { :root { --hero-pad-t: 64px; --hero-pad-b: 60px; --sec-pad: 40px; } .stat-grid { grid-template-columns: minmax(0, 1fr); } .product-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .product-col, .product-col + .product-col { padding: 0; border-right: 0; } .product-col + .product-col { padding-top: 40px; border-top: 2px solid color-mix(in srgb, #f3f2f2 26%, transparent); } .hero-title { max-width: none; } .hero--display .hero-inner { padding-top: 88px; padding-bottom: 64px; } .hero--display .hero-lede { margin-top: 36px; font-size: 17px; line-height: 31px; } .field-row { grid-template-columns: minmax(0, 1fr); } .footer-top { flex-direction: column; gap: 24px; } .footer-links { gap: 16px 24px; } } @media (max-width: 560px) { .founder-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .founder-portrait { max-width: 180px; } } @media (max-width: 460px) { .stat-figure { line-height: 48px; } .footer-bottom { flex-direction: column; gap: 10px; } } /* ── 11. Motion ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── 12. Prose pages (imprint, privacy, 404) ─────────────────────────────── */ .prose { max-width: 68ch; padding: var(--sec-pad) 0 calc(var(--sec-pad) + 26px); } .prose h2 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 34px; letter-spacing: -0.01em; margin: 48px 0 14px; } .prose h3 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 26px; margin: 28px 0 8px; } .prose h2:first-child { margin-top: 0; } .prose p, .prose li { font-size: 15.5px; line-height: 28px; color: var(--ink-80); } .prose p { margin: 0 0 14px; } .prose ul { margin: 0 0 14px; padding-left: 22px; } .prose li { margin-bottom: 6px; } .prose dl { margin: 0 0 14px; } .prose dt { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-62); margin-top: 16px; } .prose dd { margin: 2px 0 0; font-size: 15.5px; line-height: 28px; } .prose a { border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); } .prose-updated { font-size: 13px; color: var(--ink-62); margin: 0 0 34px; } /* Unmissable placeholder. Nothing carrying this class may reach production. */ .todo { display: block; border-left: 4px solid var(--color-accent); background: var(--color-accent-100); padding: 12px 16px; margin: 10px 0 18px; font-size: 14px; line-height: 24px; color: var(--color-accent-900); } .todo strong { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 4px; } /* Visually hidden, still announced. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── 13. Data protection page ──────────────────────────────────────────── Two tiers of placeholder, deliberately different in weight: .todo red — a claim that must not ship unverified .confirm neutral — drafted, but needs your sign-off before launch */ .confirm { display: block; border-left: 4px solid var(--color-neutral-500); background: var(--color-neutral-100); padding: 12px 16px; margin: 10px 0 18px; font-size: 14px; line-height: 24px; color: var(--color-neutral-900); } .confirm strong { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 4px; } /* Question-led subheadings: this page answers procurement questions. */ .q { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 28px; margin: 30px 0 8px; } .scope-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 18px; } .scope-table th, .scope-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--color-divider); line-height: 24px; } .scope-table thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-62); border-bottom: 2px solid var(--color-divider); } .scope-table tbody th { font-family: var(--font-heading); font-weight: 800; width: 30%; } .pill { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--color-divider); color: var(--ink-70); white-space: nowrap; } .pill--none { border-color: #146c34; color: #146c34; } .pill--health { border-color: var(--color-accent); color: var(--color-accent-700); } @media (max-width: 560px) { .scope-table, .scope-table thead, .scope-table tbody, .scope-table tr, .scope-table th, .scope-table td { display: block; width: auto; } .scope-table thead { display: none; } .scope-table tr { border-bottom: 2px solid var(--color-divider); padding: 8px 0; } .scope-table th, .scope-table td { border-bottom: 0; padding: 4px 0; } } /* Draft-language banner. Present only while a locale's reviewPending flag is set; those pages are also noindex and kept out of the sitemap. */ .review-banner { background: var(--color-text); color: var(--color-bg); } .review-banner p { margin: 0; padding: 12px 0; font-size: 13.5px; line-height: 22px; } /* ── 14. Long-word handling ────────────────────────────────────────────── German exposed this: compounds like Umsatzsteuer-Identifikationsnummer and long email addresses in prose overflowed narrow viewports. English never produced a word long enough to show the bug. */ .prose p, .prose li, .prose dd, .prose dt, .prose h1, .prose h2, .prose h3, .aside-body, .body-copy, .stat-body, .product-body, .feature-body, .metric-note, .figure-note { overflow-wrap: break-word; } /* Emails and URLs get to break anywhere; they have no useful break points. */ .prose a[href^="mailto:"], .prose a[href^="http"], .email-list a, .contact-people a, .founder-email a { overflow-wrap: anywhere; } /* German hyphenates well and needs it; the browser uses the lang attribute on to pick the right dictionary. */ :root[lang="de"] .prose p, :root[lang="de"] .prose li, :root[lang="de"] .prose dd, :root[lang="de"] .body-copy, :root[lang="de"] .lede-44, :root[lang="de"] .stat-body, :root[lang="de"] .product-body, :root[lang="de"] .feature-body, :root[lang="de"] .aside-body { hyphens: auto; } /* ── 15. Very narrow screens ───────────────────────────────────────────── The display hero's 46px floor is too large for a 360px screen once a word is long enough not to fit: German "Patientendaten," painted outside its box without widening it, so it produced page scroll that an element scan could not see. Lower the floor and allow a break as a safety net. */ @media (max-width: 480px) { .hero-title { font-size: clamp(30px, 8.2vw, 44px); } .hero--display .hero-title { font-size: clamp(32px, 9vw, 46px); } .poster-title { font-size: clamp(28px, 8vw, 40px); } } /* A long word must never paint outside the page, in any language. */ .hero-title, .poster-title, .h-section, .product-title, .feature-title, .step-title, .tl-title { overflow-wrap: break-word; } :root[lang="de"] .hero-title, :root[lang="de"] .poster-title, :root[lang="de"] .h-section { hyphens: auto; } /* ── 16. No-JavaScript fallbacks ───────────────────────────────────────── The switchers now render their first item active in the markup, so the tablet screen and the opening milestone are visible before any script runs. The dropdown keeps its hidden attribute, so it gets a hover/focus fallback that switches itself off as soon as site.js marks it enhanced. */ .nav-dropdown:not([data-enhanced]):hover .nav-panel[hidden], .nav-dropdown:not([data-enhanced]):focus-within .nav-panel[hidden] { display: flex; }