/* ========================================================================== downtimeinsight.com — site layer Sits on top of assets/ds/styles.css (the Industry design system, vendored verbatim). The DS owns tokens, .btn/.input/.table/.tag/.blueprint and the square-corner override. This file owns site-specific tokens, the type scale, layout and the section components. Rules of the house (see the handoff's "Definition of done"): - no hard-coded hex / font name / px that a token covers - square corners, hairlines, no shadows, no gradients - every numeral in mono with tabular figures ========================================================================== */ :root { /* — site-derived colour tokens (handoff § Design tokens) — */ --color-text-muted: #6c7075; --color-text-faint: #8b8f93; --color-hairline-soft: rgba(29, 31, 32, .09); /* chart gridlines */ --color-chart-idle: rgba(29, 31, 32, .12); /* hours not yet run */ /* on steel fields (--color-accent-900 ground) */ --color-on-steel: #fff; --rule-steel: rgba(255, 255, 255, .16); --rule-steel-strong: rgba(255, 255, 255, .2); --rule-steel-soft: rgba(255, 255, 255, .12); --fill-steel: rgba(255, 255, 255, .06); --fill-steel-soft: rgba(255, 255, 255, .05); --border-steel-input: rgba(255, 255, 255, .28); /* the winning column in the compare table */ --tint-win-head: color-mix(in srgb, var(--color-accent) 14%, transparent); --tint-win-cell: color-mix(in srgb, var(--color-accent) 8%, transparent); --color-placeholder-rule: color-mix(in srgb, var(--color-text) 28%, transparent); /* — type — */ --font-mono: "IBM Plex Mono", ui-monospace, monospace; --fs-h1: 60px; --fs-h2: 40px; --fs-h2-cta: 44px; --fs-h3: 26px; --fs-h3-sm: 19px; --fs-lead: 17px; --fs-body: 14.5px; --fs-steel-body: 16.5px; --fs-lbl: 10.5px; --fs-micro: 11.5px; /* — layout — */ --wrap-max: 1240px; --wrap-pad: 40px; --header-h: 62px; --section-pad-y: 64px; --section-pad-y-steel: 60px; --gap-split: 44px; --gap-panels: 24px; } /* ========================================================================== Base ========================================================================== */ /* ── Global scale ──────────────────────────────────────────────────────────── The site renders as though the browser were zoomed to 110%. `zoom` on is what actually reproduces browser zoom: the whole subtree lays out in a coordinate space 1/zoom the size of the viewport and is then painted 1.1x, so type, spacing, hairlines and layout all scale together AND the content still reflows to fit — no horizontal overflow. Scaling every px token instead would not do this: it would miss the design system's own paddings and border widths, and the layout would grow past the viewport. One consequence: media queries are evaluated against the real viewport and are NOT affected by `zoom`, so the breakpoints below are multiplied by this factor (1180 -> 1298, 820 -> 902). That keeps them firing at the same *effective* width, exactly as real browser zoom behaves. Change --zoom and those two numbers together, or the layout and its breakpoints drift apart. ─────────────────────────────────────────────────────────────────────────── */ :root { --zoom: 1.1; } body { zoom: var(--zoom); } /* scroll-padding lives on , which is outside the zoomed subtree, so it has to be scaled by hand to clear the sticky header */ html { scroll-padding-top: calc((var(--header-h) + 8px) * var(--zoom)); } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } a { color: var(--color-accent-700); text-decoration: none; } a:hover { color: var(--color-accent); } /* Focus is themed everywhere; #fff inside steel fields. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .steel :focus-visible { outline-color: var(--color-on-steel); outline-offset: -2px; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .hd { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; margin: 0; } h1.hd { font-size: var(--fs-h1); max-width: 15em; text-wrap: balance; } h2.hd { font-size: var(--fs-h2); } h3.hd { font-size: var(--fs-h3); } .lbl { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-lbl); letter-spacing: .14em; text-transform: uppercase; } .lead { font-size: var(--fs-lead); line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .body { font-size: var(--fs-body); line-height: 1.6; color: color-mix(in srgb, var(--color-text) 74%, transparent); } .muted { color: color-mix(in srgb, var(--color-text) 58%, transparent); } .faint { color: var(--color-text-faint); } .accent { color: var(--color-accent-700); } .micro { font-size: var(--fs-micro); color: var(--color-text-faint); } .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; } /* The logomark, one recoloured per context. On steel fields the strokes swap: sight-lines to accent-400, eye and pupil to white. */ .brand { --mark-line: var(--color-accent); --mark-eye: var(--color-accent-700); } .footer-brand { --mark-line: var(--color-accent-400); --mark-eye: var(--color-on-steel); } /* Data-bearing paragraphs are layout objects, not prose: the DS gives every

a bottom margin, so the ones used as labels and figures reset it and set their own top offset where the design has one. */ p.lbl, p.mono, .kpi-figure, .stats-figure, .story-figure, .result-figure, .result-sub, .recovered-figure, .case-metric-figure, .step-num, .spec, .micro, .ph-note, .cta-promise, .help-kicker, .board-clock, figcaption { margin: 0; } .stats-note { margin: 8px 0 0; } .story-p { margin: 18px 0 0; } .story-p + .story-p { margin-top: 14px; } /* ========================================================================== Blueprint frame — ONE component The DS draws its registration marks from four children. Here the same four marks are drawn from two pseudo-elements instead, with identical geometry (11px arms, -6px offset, 1px strokes), so a framed surface cannot be built with the marks left off. Do not also add .corner children — that would double them. ========================================================================== */ .blueprint { --bp-mark: color-mix(in srgb, var(--color-text) 55%, transparent); } .blueprint::before, .blueprint::after { content: ""; position: absolute; inset: -6px; pointer-events: none; background-repeat: no-repeat; } /* the four vertical arms */ .blueprint::before { background-image: linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)); background-size: 1px 11px; background-position: left 5px top 0, right 5px top 0, left 5px bottom 0, right 5px bottom 0; } /* the four horizontal arms */ .blueprint::after { background-image: linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)); background-size: 11px 1px; background-position: left 0 top 5px, right 0 top 5px, left 0 bottom 5px, right 0 bottom 5px; } .panel { padding: 18px 20px; } .panel-lg { padding: 22px 24px; } /* prose inside a framed panel sits under whatever it explains, never flush against it (the DS gives

a bottom margin only) */ .panel > .lbl + .body { margin: 8px 0 0; } .panel > .recovered-figure + .body { margin: 10px 0 0; } /* ========================================================================== Layout primitives Grid containers carry real classes so the media queries can target them rather than fighting inline styles. ========================================================================== */ .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); } .section { border-bottom: 1px solid var(--color-text); } .section > .wrap { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } .steel { background: var(--color-accent-900); color: var(--color-on-steel); } .steel > .wrap { padding-top: var(--section-pad-y-steel); padding-bottom: var(--section-pad-y-steel); } .steel .lbl { color: var(--color-accent-300); } .steel .body, .steel p { color: var(--color-accent-300); } .split { display: grid; gap: var(--gap-split); } .split-hero { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .split-story { grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: start; } .split-calc { grid-template-columns: 1.15fr 1fr; gap: var(--gap-panels); } .split-cases { grid-template-columns: 1.1fr 1fr; gap: var(--gap-panels); } .split-cta { grid-template-columns: 1.1fr 1fr; gap: 52px; align-items: center; } .split-help { grid-template-columns: 250px 1fr; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } /* section intro: heading left, lead right */ .split-intro { grid-template-columns: 1fr 1fr; align-items: end; } .g2 { display: grid; grid-template-columns: repeat(2, 1fr); } .g3 { display: grid; grid-template-columns: repeat(3, 1fr); } /* hairline grid: the 1px gap on a divider ground draws the rules */ .rules { gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } .rules > * { background: var(--color-bg); } .rules-steel { gap: 1px; background: var(--rule-steel); border: 1px solid var(--rule-steel); } .rules-steel > * { background: var(--color-accent-900); } .cell { padding: 16px 18px; } .cell-lg { padding: 22px 24px; } .stack { display: flex; flex-direction: column; } .eyebrow { color: var(--color-accent-700); } .intro-h { margin-top: 6px; } /* The page carries no inline style attributes, so the CSP needs no 'unsafe-inline' for style-src. These few spacing utilities exist to keep it that way. */ .sprite { position: absolute; } .board-chart { display: block; } .timeline-ref { font-size: 11px; } .mb-26 { margin-bottom: 26px; } .mb-28 { margin-bottom: 28px; } .mb-30 { margin-bottom: 30px; } .mt-14 { margin: 14px 0 0; } .mt-16 { margin: 16px 0 0; } .mt-20 { margin-top: 20px; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); } .site-header > .wrap { height: var(--header-h); display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--color-text); } .brand-word { display: flex; flex-direction: column; gap: 1px; } .brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.08; } .brand-sub { color: var(--color-accent-700); letter-spacing: .34em; font-size: 9.5px; } .site-nav { display: flex; gap: 20px; margin-left: 12px; } .site-nav a { color: var(--color-text); } .site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--color-accent); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .site-nav a, .btn { white-space: nowrap; } .btn-lg { min-height: 44px; font-size: 15px; padding-inline: 22px; } /* Hamburger toggle — hidden on desktop, shown on phones (≤640px). The bars morph to an X when the menu is open (respects prefers-reduced-motion via the global rule). Square corners, 1px hairline: consistent with the system. */ .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; cursor: pointer; align-items: center; justify-content: center; background: none; border: 1px solid var(--color-divider); color: var(--color-text); } .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .15s ease, top .15s ease, background .15s ease; } .nav-toggle .bars { position: relative; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; } .nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .bars { background: transparent; } .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .hero-lead { max-width: 34em; margin: 20px 0 0; } .hero-h1 { margin: 10px 0 0; } .hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .hero-quals { display: flex; gap: 24px; margin-top: 26px; flex-wrap: wrap; font-size: 12.5px; } .board-bar { background: var(--color-accent-900); padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .board-bar .lbl { color: var(--color-accent-300); } .board-clock { color: var(--color-on-steel); font-size: 11px; } .board-kpis { border-bottom: 1px solid var(--color-divider); } .kpi { padding: 14px 16px; border-right: 1px solid var(--color-divider); } .kpi:last-child { border-right: 0; } .kpi-figure { font-size: 30px; line-height: 1.1; font-weight: 500; } .kpi-unit { font-size: 15px; } .kpi-inverted { background: var(--color-accent-900); } .kpi-inverted .lbl { color: var(--color-accent-300); } .kpi-inverted .kpi-figure { color: var(--color-on-steel); } .kpi-inverted .kpi-unit { color: var(--color-accent-300); } .board-body { padding: 16px; } .board-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .board-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* ========================================================================== The problem — narrative on a steel field ========================================================================== */ .story-compare { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule-steel); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .story-figure { font-size: 26px; line-height: 1.2; margin-top: 4px; } .story-p { font-size: var(--fs-steel-body); line-height: 1.6; color: var(--color-accent-300); max-width: 34em; } .timeline { border: 1px solid var(--rule-steel-strong); } .timeline-head { padding: 12px 18px; border-bottom: 1px solid var(--rule-steel-strong); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .timeline-head .lbl { color: var(--color-on-steel); } .tl-row { display: grid; grid-template-columns: 78px 1fr 96px; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--rule-steel-soft); align-items: baseline; } .tl-row:last-of-type { border-bottom: 0; } .tl-row-repeat { background: var(--fill-steel); } .tl-time { font-size: 13px; color: var(--color-accent-300); } .tl-what { font-size: var(--fs-body); color: var(--color-on-steel); } .tl-dur { font-size: 13px; text-align: right; color: var(--color-on-steel); } .timeline-foot { padding: 16px 18px; border-top: 1px solid var(--rule-steel-strong); background: var(--fill-steel-soft); } .timeline-foot p { font-size: var(--fs-body); line-height: 1.6; color: var(--color-on-steel); margin: 8px 0 0; } .stats { margin-top: 44px; } .stats-figure { font-size: 42px; line-height: 1; font-weight: 500; } /* these two are

on a steel field, so they have to out-specify `.steel p`, which tints body prose to accent-300 — figures stay white */ .steel .stats-figure, .steel .story-figure { color: var(--color-on-steel); } .stats-note { font-size: 14px; color: var(--color-accent-300); margin-top: 8px; max-width: 22em; } /* ========================================================================== Calculator ========================================================================== */ .calc-intro { margin-bottom: 28px; } .calc-fields { gap: 16px 20px; } .field-calc { display: flex; flex-direction: column; gap: 5px; } input.calc { width: 100%; min-height: 38px; padding: 6px 10px; font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; background: transparent; color: var(--color-text); border: 1px solid var(--color-divider); border-radius: 0; } input.calc:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } input.calc:focus-visible { border-color: var(--color-accent); outline: none; } .calc-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-divider); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .calc-results { display: flex; flex-direction: column; gap: 14px; } .result { background: var(--color-accent-900); color: var(--color-on-steel); padding: 22px 24px; } .result .lbl { color: var(--color-accent-300); } .result-figure { font-size: 52px; line-height: 1; font-weight: 500; margin-top: 4px; } .result-split { margin-top: 20px; } .result-split > div { padding: 12px 14px; } .result-sub { font-size: 24px; line-height: 1.1; } .recovered-figure { font-size: 32px; line-height: 1.1; font-weight: 500; margin-top: 4px; } /* ========================================================================== How it works ========================================================================== */ .step { padding: 26px 26px 30px; } .step-num { font-size: 13px; color: var(--color-accent-700); } .step h3 { font-size: 24px; margin: 10px 0 0; } .step p { margin: 10px 0 0; } .spec { font-size: var(--fs-micro); color: var(--color-text-faint); margin-top: 14px; } /* ========================================================================== Use cases ========================================================================== */ .cases-grid { margin-top: 28px; } .case-full h3 { margin: 8px 0 0; } .case-full p { margin: 10px 0 0; } .case-metrics { margin-top: 18px; } .case-metrics > div { padding: 14px 16px; } .case-metric-figure { font-size: 26px; line-height: 1.15; } .case-list { display: flex; flex-direction: column; } .case { padding: 20px 22px; } .case h3 { font-size: var(--fs-h3-sm); margin: 6px 0 0; } .case p { margin: 6px 0 0; } .figs { gap: var(--gap-panels); margin-top: var(--gap-panels); } figure.blueprint { margin: 0; padding: 14px; } figure.blueprint:has(.ph-4x3) { padding: 12px; } .ph { border: 1px dashed var(--color-placeholder-rule); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; } .ph-16x10 { aspect-ratio: 16 / 10; } .ph-4x3 { aspect-ratio: 4 / 3; } .ph-note { font-size: 13px; color: var(--color-text-faint); max-width: 26em; } figcaption { margin-top: 8px; color: var(--color-text-faint); } /* ========================================================================== Compare table ========================================================================== */ .compare-panel { padding: 0; } table.table { margin: 0; } table.table th { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-muted); letter-spacing: .14em; } table.table th, table.table td { padding: 11px 14px; } table.table tbody tr:hover { background: transparent; } /* no zebra, no row fill */ /* row-label cells are for semantics; match the hairline so the first column's rules do not read darker than the rest */ table.table tbody th { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .col-label { width: 24%; } th.col-win { background: var(--tint-win-head); color: var(--color-accent-900); } td.col-win { background: var(--tint-win-cell); } /* ========================================================================== Help & support hub ========================================================================== */ /* .split-help draws its rule from a 1px gap over a divider ground, so both panes must paint the paper ground back over it. The rail column stretches to do that; the nav inside it is what actually sticks, since a stretched element is as tall as its track and could never move. */ .help-rail-col, .help-content { background: var(--color-bg); } .help-rail { padding: 18px 0; position: sticky; top: calc(var(--header-h) + 1px); } .help-rail-title { padding: 0 20px 10px; } .help-rail-item { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 10px 20px; width: 100%; text-align: left; font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--color-text); cursor: pointer; transition: background 120ms, color 120ms; } .help-rail-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .help-rail-item[aria-current="true"] { background: var(--color-accent); color: var(--color-bg); } .help-rail-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--color-text-faint); } .help-rail-item[aria-current="true"] .help-rail-num { color: rgba(255, 255, 255, .75); } .help-still { margin: 14px 20px 0; padding-top: 14px; border-top: 1px solid var(--color-divider); } .help-still a { font-size: 14px; display: block; margin-top: 4px; } .help-content { padding: 26px 28px; } .help-panel[hidden] { display: none; } .help-panel h3 { margin: 8px 0 0; } .help-panel > p { margin: 12px 0 0; max-width: 46em; } .help-cards { margin-top: 20px; } .help-cards h4 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.12; margin: 0; } .help-cards p { margin: 6px 0 0; } .help-kicker { font-size: 12px; color: var(--color-accent-700); } .help-cards h4.has-kicker { margin-top: 6px; } .help-steps-note { margin: 16px 0 0; } .join-list { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; } .help-steps-note { max-width: 46em; } /* — the three supporting calculators in help 05 — Same grammar as the front-page calculator: inputs on the paper ground inside a framed panel, the answer on a steel plate. Stacked rather than three-up, because the contribution-margin one alone carries six fields. */ .calc-block { margin-top: 20px; } .calc-block h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3-sm); line-height: 1.12; margin: 0; } .calc-block > .body { margin: 6px 0 0; max-width: 46em; } .calc-block .calc-fields { margin-top: 18px; } .calc-block .calc-foot { margin-top: 16px; } .calc-result { margin-top: 18px; display: grid; gap: 1px; background: var(--rule-steel); border: 1px solid var(--rule-steel); } .calc-result > div { background: var(--color-accent-900); padding: 12px 14px; } .calc-result .lbl { color: var(--color-accent-300); } .calc-result-figure { font-size: 24px; line-height: 1.1; font-weight: 500; color: var(--color-on-steel); margin: 4px 0 0; } .calc-result-1 { grid-template-columns: 1fr; } .calc-result-2 { grid-template-columns: 1fr 1fr; } .calc-note { margin: 14px 0 0; max-width: 46em; } /* ========================================================================== Call to action ========================================================================== */ .cta-h2 { font-size: var(--fs-h2-cta); margin: 8px 0 0; max-width: 20em; } .cta-form { border: 1px solid var(--rule-steel-strong); padding: 24px 26px; } .cta-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .field-steel { display: flex; flex-direction: column; gap: 5px; } .field-steel .lbl { color: var(--color-accent-300); } .cta-form input.calc { border-color: var(--border-steel-input); color: var(--color-on-steel); } .cta-form input.calc::placeholder { color: color-mix(in srgb, var(--color-accent-300) 65%, transparent); } .btn-on-steel { background: var(--color-on-steel); color: var(--color-accent-900); border-color: var(--color-on-steel); } .btn-on-steel:hover { background: var(--color-accent-300); } .cta-promise { font-size: 11px; color: var(--color-accent-300); } .form-error { font-size: 12px; color: var(--color-accent-900); background: var(--color-accent-300); padding: 4px 8px; margin: 0; } .cta-form input.is-invalid { border-left: 2px solid var(--color-on-steel); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cta-done p { color: var(--color-accent-300); margin: 8px 0 0; font-size: var(--fs-body); } /* ========================================================================== Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--rule-steel); background: var(--color-accent-900); color: var(--color-accent-300); } .site-footer > .wrap { padding: 26px var(--wrap-pad); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-on-steel); font-size: 16px; } .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; } .footer-nav a { color: var(--color-accent-300); } .footer-nav a:hover { color: var(--color-on-steel); } .footer-copy { margin-left: auto; font-size: var(--fs-micro); } /* ========================================================================== Responsive — two breakpoints, targeting the real grid classes ========================================================================== */ @media (max-width: 1298px) { /* 1180 x 1.1 — see --zoom */ .site-header > .wrap { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; column-gap: 20px; } .site-nav { margin-left: 0; gap: 16px; flex-wrap: wrap; } .header-actions { margin-left: auto; } /* every two-column split collapses */ .split { grid-template-columns: 1fr; gap: 32px; } .split-help { gap: 1px; } .help-rail { position: static; } .g3 { grid-template-columns: repeat(2, 1fr); } :root { --fs-h1: 46px; --fs-h2: 34px; --fs-h2-cta: 34px; } } /* The header is `height: auto` below 1180px, so it grows as the nav wraps. --header-h feeds scroll-padding-top, and an anchor landing behind a sticky header is worse than one landing slightly low — so these are measured heights rounded up. */ @media (max-width: 1298px) { /* 1180 x 1.1 — see --zoom */ :root { --header-h: 64px; } } @media (max-width: 902px) { /* 820 x 1.1 — see --zoom */ :root { --wrap-pad: 22px; --fs-h1: 36px; --fs-lead: 16px; --section-pad-y: 44px; --section-pad-y-steel: 44px; --header-h: 116px; } .split, .g2, .g3 { grid-template-columns: 1fr; } .story-compare, .result-split, .calc-result-2 { grid-template-columns: 1fr; } .board-kpis { grid-template-columns: 1fr; } .kpi { border-right: 0; border-bottom: 1px solid var(--color-divider); } .kpi:last-child { border-bottom: 0; } /* the mono columns must stay aligned, so the table scrolls */ .compare-scroll { display: block; overflow-x: auto; } table.table { white-space: nowrap; } /* touch targets */ input.calc { min-height: 44px; } .btn { min-height: 44px; } .help-rail-item { padding: 13px 20px; } } /* real app screenshots seated in a blueprint frame: full-bleed inside the frame's padding, on the paper ground, with the standard 1px hairline so the screenshot's own light background does not float. Natural aspect ratio kept (no forced .ph box) so charts and tables are never cropped. */ .fig-img { display: block; width: 100%; height: auto; border: 1px solid var(--color-divider); background: var(--color-bg); } .fig-solo { margin-top: var(--gap-panels); } /* Fig. 3 — the wiring diagram redrawn in the blueprint language as inline SVG (no raster, theme-crisp, a couple of KB). Styled here so the schematic needs no inline style attributes, which the strict CSP (style-src 'self') blocks. Traced from site/assets/img/wiring.png; the N.O. contact — the one signal that matters — carries the accent, everything else is neutral hairline. */ .wire-dia { display: block; width: 100%; height: auto; } .wire-dia .dev { fill: none; stroke: var(--color-text); stroke-width: 1.4; } .wire-dia .box { fill: none; stroke: color-mix(in srgb, var(--color-text) 60%, transparent); stroke-width: 1.1; } .wire-dia .term { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 1.1; } .wire-dia .screw { stroke: color-mix(in srgb, var(--color-text) 55%, transparent); stroke-width: 1; } .wire-dia .wire { fill: none; stroke: color-mix(in srgb, var(--color-text) 48%, transparent); stroke-width: 1.2; stroke-linecap: square; } .wire-dia .node { fill: var(--color-text); } .wire-dia .sig { fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linecap: round; } .wire-dia .sig-node { fill: var(--color-accent); } .wire-dia .title { fill: var(--color-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-anchor: middle; } .wire-dia .lead { fill: var(--color-text); font-family: var(--font-body); font-size: 12px; } .wire-dia .tnum { fill: var(--color-text); font-family: var(--font-mono); font-size: 9px; text-anchor: middle; } .wire-dia .tlbl { fill: color-mix(in srgb, var(--color-text) 62%, transparent); font-family: var(--font-mono); font-size: 8px; text-anchor: middle; letter-spacing: .02em; } .wire-dia .group { fill: color-mix(in srgb, var(--color-text) 62%, transparent); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-anchor: middle; } .wire-dia .tag { fill: var(--color-accent-700); font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; } .wire-dia .note { fill: var(--color-accent-700); font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em; text-anchor: middle; } /* ═══════════════════════ Mobile (phones, ≤ 640px) ═══════════════════════ Every rule here is desktop-safe: the desktop layout lives above the 902px breakpoint, so nothing below can change it. Phones are already below every other breakpoint, so these only refine what the 902px block set up. */ @media (max-width: 640px) { /* Browser-style zoom eats ~10% of a narrow screen for no benefit — off on phones. Only the paint scale changes, not the layout. */ :root { --zoom: 1; --wrap-pad: 18px; --fs-h1: 32px; --header-h: 68px; } /* Header: brand + Log in + hamburger on one row; the section links drop down as a menu the hamburger toggles, instead of a wrapped/scrolled row. */ .site-header > .wrap { flex-wrap: wrap; row-gap: 0; } .header-actions { order: 2; margin-left: auto; } .nav-toggle { display: inline-flex; } .site-nav { order: 3; width: 100%; display: none; flex-direction: column; gap: 0; margin-left: 0; margin-top: 8px; border-top: 1px solid var(--color-divider); } .site-nav.is-open { display: flex; } .site-nav .lbl { padding: 13px 2px; border-bottom: 1px solid var(--color-divider); white-space: nowrap; } .site-nav .lbl:last-child { border-bottom: 0; } /* Compare table → one card per criterion, so "Downtime Insight" (the point of the section) is never scrolled off-screen. Each value's column is labelled from CSS; the header row is hidden but kept for assistive tech. */ .compare-scroll { overflow-x: visible; } table.table, table.table tbody { display: block; white-space: normal; } table.table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); } table.table tr { display: block; border: 1px solid var(--color-divider); margin-top: -1px; } table.table th[scope="row"] { display: block; padding: 11px 14px 5px; font-size: 12px; background: var(--color-surface); } table.table td { display: block; padding: 8px 14px; border-top: 1px solid var(--color-divider); font-size: 14px; } table.table td::before { content: ""; display: block; margin-bottom: 1px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-faint); } table.table td:nth-of-type(1)::before { content: "Paper"; } table.table td:nth-of-type(2)::before { content: "Enterprise MES"; } table.table td:nth-of-type(3)::before { content: "Downtime Insight"; } table.table td.col-win { box-shadow: inset 3px 0 0 var(--color-accent); } /* Figures fit the screen fully — no right-edge cut-off. The wiring schematic is vector, so it stays crisp when small; dense screenshot detail is legible via pinch-zoom, which the viewport allows. Grid/flex items get min-width:0 so a figure can never force the column wider than the viewport. */ .split-help > *, .help-panel, .fig-solo, .fig-scroll { min-width: 0; } .fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Coded-shift timeline: time + duration on one line, description below. */ .tl-row { grid-template-columns: 1fr auto; grid-template-areas: "time dur" "what what"; gap: 3px 14px; } .tl-time { grid-area: time; } .tl-dur { grid-area: dur; } .tl-what { grid-area: what; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }