/* ========================================================================== robodatech.com / cnc-machines — public catalog stylesheet (CONTRACT v2) One sheet for index.html, machine.html, compare.html. No external fonts, no external assets, no inline style: the CSP forbids external hosts and 'unsafe-inline'. v2 vocabulary: Roboda sells KITS the customer assembles, and each of the ten K-Series platforms ships in head VARIANTS (spindle / laser / dual / plasma). The buyer shops by variant, so the variant is the unit of price, of capability and of safety in this sheet. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ /* LIGHT IS THE DEFAULT AND THE BETTER-LOOKING ONE. * * SPEC-SHOP.md turns this catalogue into a storefront, and a storefront whose * hero imagery is 111 line drawings wants paper, not a dark room: the drawings * are dark strokes on a light field, so light is the theme they were drawn for. * Dark is still fully supported, but it is the alternative, not the origin. * * Three layers, in this order, and every colour is defined on bare `:root` * first so nothing has its ONLY definition inside a media query: * * 1. `:root` -- the light palette (default) * 2. `@media (prefers-color-scheme: dark)` -- the OS asked for dark * guarded by `:not([data-theme="light"])` so an explicit light choice wins * 3. `[data-theme="dark"]` -- the reader chose dark here * * The toggle in the header writes `data-theme` on (shop.js) and * remembers it. With no choice stored, nothing is stamped and the OS decides. */ :root { color-scheme: light; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Paper, not grey card: a hint of warmth at the page level, pure white for anything holding a drawing, so the drawings sit on their own ground. */ --bg: #f4f6f9; --bg-tint: #eef2f7; --surface: #ffffff; --surface-2: #eff2f6; --surface-3: #e3e8ee; --ink: #0f1419; --ink-2: #414c58; --ink-3: #68737f; --line: #dce2e9; --line-2: #c2cbd5; --line-3: #93a0ac; --accent: #0a4d86; --accent-hover: #073a66; --accent-ink: #ffffff; --accent-soft: #e6f0f9; --accent-line: #b9d4ea; --good: #13623d; --good-soft: #e2f2e9; --info: #0a4d86; --info-soft: #e6f0f9; --warn: #7a4705; --warn-soft: #fbeed9; --none: #5b6470; --none-soft: #e9ecf0; --danger: #95201f; --danger-soft: #fbe9e8; /* Money. The payable figure is ink, not colour: a price that is green reads as a discount, and none of these are discounted. */ --price-ink: #0f1419; --price-sub: #68737f; --focus: #0a4d86; --radius: 3px; --radius-lg: 5px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(15, 20, 25, .07); --shadow-2: 0 6px 18px -6px rgba(15, 20, 25, .18); --shadow-3: 0 18px 44px -12px rgba(15, 20, 25, .28); --shell-max: 1240px; --gutter: clamp(14px, 3.2vw, 32px); } /* The reader has explicitly chosen light: hold it, whatever the OS says. */ :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1114; --bg-tint: #131920; --surface: #161a1e; --surface-2: #1d2328; --surface-3: #252c33; --ink: #e9edf1; --ink-2: #b3bcc5; --ink-3: #8b959f; --line: #2b333a; --line-2: #3a444c; --line-3: #5a656f; --accent: #5aa8e8; --accent-hover:#7cbcf0; --accent-ink: #0c1116; --accent-soft: #16283a; --accent-line: #2b4a68; --good: #63c99a; --good-soft: #14291f; --info: #5aa8e8; --info-soft: #16283a; --warn: #d9a44e; --warn-soft: #2c2314; --none: #98a2ac; --none-soft: #21272c; --danger: #ef7f7d; --danger-soft: #2e1817; --price-ink: #e9edf1; --price-sub: #8b959f; --focus: #7cbcf0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 6px 18px -6px rgba(0, 0, 0, .6); --shadow-3: 0 18px 44px -12px rgba(0, 0, 0, .7); } } /* Same values again for the explicit choice, so the toggle wins in the other direction too -- an OS in light mode with dark chosen here. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1114; --bg-tint: #131920; --surface: #161a1e; --surface-2: #1d2328; --surface-3: #252c33; --ink: #e9edf1; --ink-2: #b3bcc5; --ink-3: #8b959f; --line: #2b333a; --line-2: #3a444c; --line-3: #5a656f; --accent: #5aa8e8; --accent-hover:#7cbcf0; --accent-ink: #0c1116; --accent-soft: #16283a; --accent-line: #2b4a68; --good: #63c99a; --good-soft: #14291f; --info: #5aa8e8; --info-soft: #16283a; --warn: #d9a44e; --warn-soft: #2c2314; --none: #98a2ac; --none-soft: #21272c; --danger: #ef7f7d; --danger-soft: #2e1817; --price-ink: #e9edf1; --price-sub: #8b959f; --focus: #7cbcf0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 6px 18px -6px rgba(0, 0, 0, .6); --shadow-3: 0 18px 44px -12px rgba(0, 0, 0, .7); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* `hidden` must beat every author `display` below it: the skeleton, the grid, the tray and the buybox rows are all flex or grid, and a bare [hidden] loses to an author display rule. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { margin: 0; /* The page body must never scroll sideways. Wide content scrolls in its own box. `clip` (not `hidden`) so position:sticky keeps working. */ overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-synthesis-weight: none; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -.012em; overflow-wrap: break-word; } h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); } h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); } h3 { font-size: 1.02rem; } p { margin: 0 0 .85em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } ul, ol { margin: 0 0 .85em; padding-left: 1.25em; } li { margin: .15em 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; } img, svg { max-width: 100%; } img { height: auto; } code, kbd, samp { font-family: var(--font-mono); font-size: .92em; } /* Every interactive thing gets a visible ring. */ :focus { outline: 2px solid var(--focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } /* -------------------------------------------------------------------------- 3. Utilities -------------------------------------------------------------------------- */ .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -.01em; } .mono { font-family: var(--font-mono); } .muted { color: var(--ink-3); } .nowrap { white-space: nowrap; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-weight: 600; } .skip-link:focus { top: 8px; } /* -------------------------------------------------------------------------- 4. Shell: header, footer -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--gutter); } .site-head { border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 20; } .site-head__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-height: 58px; padding-block: 9px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .86rem; } .brand:hover { color: var(--ink); } .brand__mark { display: block; flex: none; } .brand__sub { color: var(--ink-3); font-weight: 500; letter-spacing: .04em; border-left: 1px solid var(--line-2); padding-left: 9px; } .site-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; } .site-nav a { display: block; padding: 6px 11px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 550; } .site-nav a:hover { background: var(--surface-2); color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); } .site-foot { margin-top: 56px; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: .82rem; } .site-foot__in { padding-block: 22px 30px; display: grid; gap: 10px; } .site-foot p { margin: 0; max-width: 84ch; } main { display: block; } .crumbs { padding-top: 16px; font-size: .82rem; color: var(--ink-3); } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .crumbs li + li::before { content: "/"; color: var(--line-2); margin-right: 6px; } /* -------------------------------------------------------------------------- 5. Masthead (flat, technical — no gradient) -------------------------------------------------------------------------- */ .masthead { border-bottom: 1px solid var(--line); background: var(--surface); } .masthead__in { padding-block: clamp(22px, 4vw, 40px) clamp(18px, 3vw, 28px); display: grid; gap: 18px; } .masthead__lede { max-width: 72ch; color: var(--ink-2); font-size: 1.02rem; } .keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; } .keyfacts > div { background: var(--surface); padding: 10px 13px; } .keyfacts dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 650; } .keyfacts dd { margin: 3px 0 0; font-size: 1.02rem; font-weight: 600; } /* -------------------------------------------------------------------------- 6. KIT disclosure — this must be impossible to miss -------------------------------------------------------------------------- */ .kitband { border: 1px solid var(--line-2); border-left: 5px solid var(--warn); border-radius: var(--radius); background: var(--warn-soft); color: var(--ink); padding: 12px 15px; display: grid; gap: 8px; } .kitband__tag { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--warn); border: 1px solid currentColor; border-radius: 2px; padding: 1px 7px; justify-self: start; } .kitband__lead { font-size: .95rem; font-weight: 600; margin: 0; max-width: 90ch; } .kitband p { font-size: .86rem; color: var(--ink-2); margin: 0; max-width: 90ch; } .kitband strong { color: var(--ink); } .kitfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); margin: 0; } .kitfacts > div { background: var(--surface); padding: 9px 12px; } .kitfacts dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 700; } .kitfacts dd { margin: 2px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .96rem; font-weight: 600; } .kitfacts dd .unit { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-3); font-weight: 500; } /* Who builds what */ .scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .scope__col { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .scope__head { padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; } .scope--factory .scope__head { background: var(--good-soft); color: var(--good); } .scope--customer .scope__head { background: var(--warn-soft); color: var(--warn); } .scope__body { padding: 13px; font-size: .88rem; } .scope__body > :last-child { margin-bottom: 0; } .toollist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; } .toollist li { margin: 0; font-size: .78rem; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface-2); color: var(--ink-2); font-family: var(--font-mono); } .toollist--own li { border-left: 3px solid var(--warn); } .toollist--kit li { border-left: 3px solid var(--good); } .sublabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-3); margin: 12px 0 5px; display: block; } .sublabel:first-child { margin-top: 0; } /* -------------------------------------------------------------------------- 7. Filters -------------------------------------------------------------------------- */ .layout { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; padding-block: 26px 10px; } .layout > * { min-width: 0; } .filters { position: sticky; top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; } .filters > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 650; font-size: .9rem; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-lg); position: sticky; top: 0; background: var(--surface); z-index: 2; } .filters > summary::-webkit-details-marker { display: none; } .filters > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); } .filters[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .filters[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .filters__body { padding: 4px 14px 14px; } .fset { border: 0; margin: 0; padding: 14px 0; border-bottom: 1px dashed var(--line); min-width: 0; } .fset:last-of-type { border-bottom: 0; } .fset > legend { padding: 0; font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); } .fset__hint { margin: 4px 0 9px; font-size: .76rem; color: var(--ink-3); line-height: 1.4; } .check { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: .88rem; cursor: pointer; } .check input { margin: 3px 0 0; flex: none; accent-color: var(--accent); width: 15px; height: 15px; } .check span { min-width: 0; } .check__count { color: var(--ink-3); font-size: .78em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .check--off { opacity: .5; } .check--off input { cursor: not-allowed; } .field { display: grid; gap: 4px; margin-bottom: 10px; } .field > label { font-size: .78rem; font-weight: 600; color: var(--ink-2); } .field__hint { font-size: .74rem; color: var(--ink-3); } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { font: inherit; font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 7px 9px; width: 100%; min-width: 0; } input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } textarea { resize: vertical; min-height: 96px; line-height: 1.5; } select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: right 13px center, right 8px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .8; } .dimrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dimrow .field { margin-bottom: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: .88rem; font-weight: 620; line-height: 1.2; padding: 9px 15px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; text-align: center; } .btn:hover { background: var(--surface-2); color: var(--ink); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .btn--block { width: 100%; } .btn--sm { font-size: .8rem; padding: 6px 11px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .filters__actions { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } /* -------------------------------------------------------------------------- 8. Result bar + variant grid -------------------------------------------------------------------------- */ .resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .resultbar__count { font-size: .9rem; color: var(--ink-2); font-weight: 550; } .resultbar__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; } .resultbar__sort label { font-size: .8rem; color: var(--ink-3); white-space: nowrap; } .resultbar__sort select { width: auto; min-width: 178px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; padding: 3px 4px 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); } .chip button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font: inherit; line-height: 1; padding: 3px 5px; border-radius: 999px; } .chip button:hover { background: var(--surface-3); color: var(--ink); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .grid > li, .chips li, .tray__list li { margin: 0; } .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); } .card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .card__code { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); } .card__body { padding: 13px; display: grid; gap: 10px; } .card__title { font-size: 1.06rem; } .card__title a { color: var(--ink); text-decoration: none; } .card__title a:hover { color: var(--accent); text-decoration: underline; } .card__title a::after { content: ""; position: absolute; inset: 0; } .card__platform { font-size: .78rem; color: var(--ink-3); } .card__tagline { font-size: .85rem; color: var(--ink-2); margin: 0; } .card__foot { margin-top: auto; padding: 10px 13px; border-top: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* The compare control sits above the whole-card link overlay. */ .card__foot .check { position: relative; z-index: 2; font-size: .8rem; } /* Decorative affordance only: the card title is the real, focusable link. */ .card__cue { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--accent); } /* Kit line on a card — every card says it is a kit */ .card__kit { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .74rem; padding: 6px 9px; border: 1px dashed var(--line-2); border-left: 3px solid var(--warn); border-radius: var(--radius); background: var(--warn-soft); color: var(--ink-2); } .card__kit b { font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--warn); } .card__kit .num { font-size: .78rem; color: var(--ink); } /* -------------------------------------------------------------------------- 9. Prices — ex-GST is the headline, MRP incl. 18 % GST always beside it -------------------------------------------------------------------------- */ .card__price { display: grid; gap: 2px; } .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.02em; font-size: 1.3rem; color: var(--ink); } .price--lg { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); } .price__note { font-size: .72rem; color: var(--ink-3); } .price__mrp { font-size: .78rem; color: var(--ink-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .price__mrp .lbl { font-family: var(--font-sans); color: var(--ink-3); } /* Price difference between heads — the actual purchase decision */ .delta { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 650; padding: 1px 7px; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; } .delta--base { color: var(--ink-3); border-style: dashed; font-weight: 600; } .delta--up { color: var(--warn); background: var(--warn-soft); } .delta--down { color: var(--good); background: var(--good-soft); } .delta__note { font-family: var(--font-sans); font-weight: 500; font-size: .92em; } .pbar { --pct: 0; display: block; height: 6px; margin-top: 5px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface-2); overflow: hidden; } .pbar i { display: block; height: 100%; width: calc(var(--pct) * 1%); background: var(--accent); } .pbar--delta i { background: var(--warn); } /* -------------------------------------------------------------------------- 10. Head-variant badges — letter code + word, never colour alone -------------------------------------------------------------------------- */ .headbadge { display: inline-flex; align-items: stretch; border: 1px solid currentColor; border-radius: 2px; overflow: hidden; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); } .headbadge__code { font-family: var(--font-mono); padding: 2px 6px; background: currentColor; border-right: 1px solid currentColor; } .headbadge__code span { color: var(--surface); } .headbadge__name { padding: 2px 7px; } .headbadge[data-head="spindle"] { color: var(--info); } .headbadge[data-head="laser"] { color: var(--warn); } .headbadge[data-head="dual"] { color: var(--accent); } .headbadge[data-head="plasma"] { color: var(--danger); } /* tool_mount = the customer fits their own rotary tool; the kit ships no cutting motor. Deliberately NOT the spindle colour: these two must not read alike. */ .headbadge[data-head="toolmount"] { color: var(--none); } .tag { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 2px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); white-space: nowrap; } .tag--tier { margin-left: auto; } .tag--kit { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .oplist { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; } .oplist li { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 2px; background: var(--surface-3); color: var(--ink-2); margin: 0; } .minispecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px 12px; margin: 0; font-size: .8rem; } .minispecs dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 650; } .minispecs dd { margin: 1px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 11. Work-envelope diagram -------------------------------------------------------------------------- */ .bed { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 8px; } .bed svg { display: block; width: 100%; height: auto; } .bed figcaption { font-size: .7rem; color: var(--ink-3); margin-top: 5px; text-align: center; } .bed-rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; } .bed-ref { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 3; } .bed-label { fill: var(--ink-3); font-size: 9px; font-family: var(--font-mono); } .bed-dim { stroke: var(--line-3); stroke-width: 1; } /* -------------------------------------------------------------------------- 12. Capability meter — form + colour, never colour alone -------------------------------------------------------------------------- */ .cap { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .cap__bars { display: inline-grid; grid-auto-flow: column; gap: 2px; flex: none; } .cap__bars i { display: block; width: 7px; height: 13px; border: 1px solid var(--none); border-radius: 1px; background: transparent; } .cap__bars i.on { background: currentColor; border-color: currentColor; } .cap__label { font-size: .78rem; font-weight: 600; letter-spacing: .01em; } .cap[data-class="production"] { color: var(--good); } .cap[data-class="capable"] { color: var(--info); } .cap[data-class="light"] { color: var(--warn); } .cap[data-class="not_supported"] { color: var(--none); } /* "not supported" also gets a hatched slot so it reads with no colour at all */ .cap[data-class="not_supported"] .cap__bars i { border-style: solid; border-color: var(--line-3); background: repeating-linear-gradient( -45deg, transparent 0 2px, var(--line-3) 2px 3px ); } .cap[data-class="not_supported"] .cap__label { font-weight: 600; } .cap--mini { gap: 4px; } .cap--mini .cap__bars i { width: 4px; height: 9px; } .cap--mini .cap__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .capstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 6px 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .capstrip__item { display: grid; gap: 3px; justify-items: start; min-width: 0; } /* In the strip the class name may wrap: "Not supported" must never spill into the next column on a 360 px screen. */ .capstrip .cap { white-space: normal; align-items: flex-start; } .capstrip .cap__label { line-height: 1.2; } .capstrip__mat { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 0 0 16px; font-size: .8rem; } .legend__title { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-3); width: 100%; } .legend__item { display: flex; align-items: center; gap: 8px; color: var(--ink-2); } .legend__item .cap { flex: none; } .legend__desc { font-size: .76rem; color: var(--ink-3); } /* -------------------------------------------------------------------------- 13. Spec sheet layout -------------------------------------------------------------------------- */ .sheet { padding-bottom: 20px; } .sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: clamp(18px, 3vw, 34px); padding-block: 20px 26px; border-bottom: 1px solid var(--line); align-items: start; } .sheet-head__id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sheet-head__code { font-family: var(--font-mono); font-size: .88rem; font-weight: 650; letter-spacing: .04em; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface); } .sheet-head__arch { font-size: .82rem; color: var(--ink-3); font-family: var(--font-mono); margin-top: 8px; } .sheet-head__tagline { font-size: 1.05rem; color: var(--ink-2); max-width: 62ch; margin-top: 10px; } .buybox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px; display: grid; gap: 12px; box-shadow: var(--shadow-1); } .buybox__row { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 8px; } .buybox__row:first-of-type { border-top: 0; padding-top: 0; } .buybox__actions { display: grid; gap: 8px; } .section { padding-block: 28px; border-bottom: 1px solid var(--line); } .section:last-child { border-bottom: 0; } .section__head { margin-bottom: 14px; } .section__head h2 { margin-bottom: 4px; } .section__head p { color: var(--ink-3); font-size: .86rem; max-width: 82ch; margin: 0; } .prose { max-width: 76ch; } .prose h3 { margin: 1.2em 0 .4em; } .prose ul { padding-left: 1.15em; } .cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .panel__head { padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); } .panel__body { padding: 13px; } .panel__body > :last-child { margin-bottom: 0; } .boxlist { list-style: none; margin: 0; padding: 0; } .boxlist li { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; margin: 0; } .boxlist li:last-child { border-bottom: 0; } /* -------------------------------------------------------------------------- 14. Variant chooser + head comparison -------------------------------------------------------------------------- */ .varpick { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 12px 14px; margin: 0 0 16px; } .varpick > legend { padding: 0 6px; margin-left: -6px; font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); } .varpick__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; } .varopt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 9px; align-items: start; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; } .varopt input { grid-row: span 3; margin: 2px 0 0; accent-color: var(--accent); width: 16px; height: 16px; } .varopt__name { font-weight: 650; font-size: .9rem; } .varopt__code { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); } .varopt__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .86rem; font-weight: 650; } .varopt:hover { background: var(--surface-2); } /* `.is-on` is set by script so the selected state does not depend on :has() */ .varopt.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); } .varopt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } /* The head-to-head table: price difference is the point of this table */ .vtable th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line-2); min-width: 148px; max-width: 210px; } .vtable tbody tr:nth-child(even) th[scope="row"] { background: color-mix(in srgb, var(--surface-2) 88%, var(--surface)); } .vtable td { min-width: 168px; vertical-align: top; } .vtable thead th { position: sticky; top: 0; z-index: 3; } .vtable thead th:first-child { left: 0; z-index: 4; } .vtable tr.is-price th[scope="row"], .vtable tr.is-price td { background: var(--accent-soft); border-bottom-color: var(--line-2); } .vtable tr.is-price td .price { font-size: 1.06rem; } .vtable tr.is-delta th[scope="row"], .vtable tr.is-delta td { background: var(--surface-2); } .vtable .vhead { display: grid; gap: 4px; text-transform: none; letter-spacing: 0; } /* The link holds the code and the name: stack them, do not run them together. */ .vtable .vhead a, .cmp .cmp-machine a { display: grid; gap: 2px; } .vtable .vhead__code { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-3); } .vtable .vhead__name { font-size: .92rem; font-weight: 650; color: var(--ink); } .vtable .vhead a { text-decoration: none; } .vtable .vhead a:hover .vhead__name { text-decoration: underline; } /* -------------------------------------------------------------------------- 15. Safety disclosure — public, prominent, never fine print -------------------------------------------------------------------------- */ .hazard { border: 2px solid var(--danger); border-radius: var(--radius-lg); background: var(--danger-soft); overflow: hidden; margin: 0 0 16px; } .hazard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--danger); color: #fff; } .hazard__icon { flex: none; display: block; } .hazard__icon path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } .hazard__icon line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .hazard__title { font-size: .95rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .hazard__class { margin-left: auto; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; border: 1px solid currentColor; border-radius: 2px; padding: 1px 8px; } .hazard__body { padding: 13px 14px; display: grid; gap: 12px; } .hazard__body p { font-size: .88rem; max-width: 86ch; } .reqlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .reqlist li { margin: 0; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--danger); border-radius: var(--radius); } .reqlist li[data-mandatory="0"] { border-left-color: var(--line-3); } .reqlist__title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .89rem; font-weight: 700; margin-bottom: 3px; } .reqlist__must { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--danger); border: 1px solid currentColor; border-radius: 2px; padding: 1px 6px; } .reqlist__body { font-size: .85rem; color: var(--ink-2); } .reqlist__body p { margin-bottom: .5em; } .forbid { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .forbid li { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650; padding: 3px 9px 3px 6px; border: 1px solid var(--danger); border-radius: 2px; background: var(--surface); color: var(--danger); } .forbid li::before { content: "NO"; font-family: var(--font-mono); font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: 1px 4px; border: 1px solid currentColor; border-radius: 2px; } .safetyflag { display: flex; align-items: flex-start; gap: 7px; font-size: .76rem; font-weight: 600; padding: 6px 9px; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); } .safetyflag svg { flex: none; margin-top: 1px; } .safetyflag svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } .safetyflag svg line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* -------------------------------------------------------------------------- 16. Options catalogue -------------------------------------------------------------------------- */ .optbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 12px; } .optcat { font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); } table.opts td.optname { min-width: 200px; } table.opts .optsku { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); } table.opts .optnote { display: block; font-size: .82rem; color: var(--ink-2); margin-top: 2px; } table.opts .optreq { display: block; font-size: .78rem; color: var(--warn); margin-top: 3px; } table.opts .optfits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } table.opts .optfits span { font-family: var(--font-mono); font-size: .68rem; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-3); } /* -------------------------------------------------------------------------- 17. Tables — spec sheets, matrices and comparison -------------------------------------------------------------------------- */ .tablewrap { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); max-width: 100%; } .tablewrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } table.data { width: 100%; border-collapse: collapse; font-size: .87rem; } table.data caption { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); } table.data th, table.data td { padding: 8px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } table.data thead th { font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; } table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); } table.data th[scope="row"] { font-weight: 600; color: var(--ink); } table.data .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; } table.data .unit { color: var(--ink-3); font-size: .92em; } table.data .note { color: var(--ink-2); font-size: .93em; } .scrollhint { font-size: .74rem; color: var(--ink-3); margin: 6px 0 0; } /* Capability matrix — the centrepiece */ .matrix th[scope="row"] { white-space: nowrap; } .matrix td.capcell { white-space: nowrap; } .matrix tr[data-class="not_supported"] th[scope="row"] { color: var(--ink-2); } .matrix tr[data-class="not_supported"] { background: color-mix(in srgb, var(--none-soft) 55%, transparent); } .matrix .mat-name { display: block; font-weight: 650; } .matrix .mat-sub { display: block; font-size: .76rem; color: var(--ink-3); font-weight: 400; } /* -------------------------------------------------------------------------- 18. Enquiry form -------------------------------------------------------------------------- */ .enquiry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(14px, 2.4vw, 22px); max-width: 760px; } .formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; } .formgrid .field { margin-bottom: 0; } .field--wide { grid-column: 1 / -1; } .field > label .req { color: var(--danger); font-weight: 700; } .field__err { font-size: .78rem; color: var(--danger); font-weight: 600; min-height: 0; } .field__err:empty { display: none; } input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; padding: 6px 8px; } .enq-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 0 0 16px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: .86rem; color: var(--ink-2); } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .form-consent { font-size: .78rem; color: var(--ink-3); max-width: 48ch; margin: 0; } /* -------------------------------------------------------------------------- 19. States: alerts, loading, empty -------------------------------------------------------------------------- */ .alert { border: 1px solid var(--line-2); border-left-width: 4px; border-radius: var(--radius); padding: 12px 14px; background: var(--surface); font-size: .89rem; } .alert h3 { font-size: .95rem; margin-bottom: 4px; } .alert p:last-child { margin-bottom: 0; } .alert--ok { border-left-color: var(--good); background: var(--good-soft); } .alert--err { border-left-color: var(--danger); background: var(--danger-soft); } .alert--info { border-left-color: var(--info); background: var(--info-soft); } .alert--warn { border-left-color: var(--warn); background: var(--warn-soft); } .alert--ok h3 { color: var(--good); } .alert--err h3 { color: var(--danger); } .alert__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .refbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); } .refbox__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-3); } .refbox__id { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 650; letter-spacing: .04em; overflow-wrap: anywhere; } .state { padding: 40px 18px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); color: var(--ink-3); background: var(--surface); } .state h2 { margin-bottom: 6px; color: var(--ink); } .state p { max-width: 54ch; margin-inline: auto; } .state__actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; } .skeleton > div { height: 300px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } @media (prefers-reduced-motion: no-preference) { .skeleton > div { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: shimmer 1.5s linear infinite; } @keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } } /* -------------------------------------------------------------------------- 20. Compare -------------------------------------------------------------------------- */ .picker { margin: 0; padding: 0; border: 0; } .picker__group { margin-bottom: 12px; } .picker__group:last-child { margin-bottom: 0; } .picker__head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding-bottom: 4px; border-bottom: 1px dashed var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; } .picker__head .mono { color: var(--ink-3); font-size: .95em; } .picker__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 16px; padding-top: 5px; } .picker .check { padding: 4px 0; } .cmp { min-width: 100%; } .cmp th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line-2); min-width: 152px; max-width: 210px; } .cmp tbody tr:nth-child(even) th[scope="row"] { background: color-mix(in srgb, var(--surface-2) 88%, var(--surface)); } .cmp thead th { position: sticky; top: 0; z-index: 3; } .cmp thead th:first-child { left: 0; z-index: 4; } .cmp td { min-width: 168px; } .cmp .rowgroup th { background: var(--surface-3); font-size: .69rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); font-weight: 700; } .cmp .rowgroup th[scope="row"], .cmp .rowgroup td { background: var(--surface-3); } .cmp-machine { display: grid; gap: 3px; text-transform: none; letter-spacing: 0; } .cmp-machine__shot { display: block; width: 100%; max-width: 150px; margin-bottom: 3px; } .cmp-machine__shot .shot__frame { aspect-ratio: 4 / 3; padding: 4px; background-size: 13px 13px, 13px 13px; } .cmp-machine__shot .shot__ph { padding: 6px; } .cmp-machine__shot .shot__phtext { font-size: .62rem; } .cmp-machine__code { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-3); } .cmp-machine__name { font-size: .92rem; font-weight: 650; color: var(--ink); } .cmp-machine a { text-decoration: none; } .cmp-machine a:hover .cmp-machine__name { text-decoration: underline; } .cmp-drop { margin-top: 6px; } .cmp[data-hide-same="1"] tr[data-same="1"] { display: none; } .tray { position: sticky; bottom: 0; z-index: 30; margin-top: 22px; background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: var(--shadow-2); } .tray__in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; } .tray__list { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .tray__spacer { margin-left: auto; } .tray[hidden] { display: none; } /* -------------------------------------------------------------------------- 21. Technical illustrations Every drawing sits in a frame with a faint drafting grid behind it, so a line drawing on a white ground still reads as an object on a page. The frame owns the aspect ratio: the SVG can be any size and the grid never jumps while it loads. A drawing we do not have yet degrades to .shot__ph, a labelled neutral block — never a broken-image glyph. -------------------------------------------------------------------------- */ .shot { margin: 0; display: grid; gap: 7px; min-width: 0; } .shot__frame { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 22px 22px, 22px 22px; background-position: -1px -1px, -1px -1px; } /* The grid is a backdrop, not a feature: keep it at a whisper. */ @supports (background-image: linear-gradient(in srgb, red, red)) { .shot__frame { background-image: linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px); } } .shot__img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .shot__ph { display: grid; gap: 8px; justify-items: center; align-content: center; width: 100%; height: 100%; padding: 12px; text-align: center; color: var(--ink-3); background: repeating-linear-gradient( 135deg, var(--surface-2) 0 9px, var(--surface-3) 9px 18px ); border-radius: 2px; } .shot__phmark { width: 44px; height: auto; opacity: .75; } .shot__phmark rect, .shot__phmark path, .shot__phmark circle { fill: none; stroke: var(--line-3); stroke-width: 1.6; stroke-linejoin: round; } .shot__phtext { font-size: .72rem; line-height: 1.3; max-width: 22ch; } .shot__cap { display: grid; gap: 2px; font-size: .76rem; color: var(--ink-3); line-height: 1.4; } .shot__cap b { color: var(--ink-2); font-weight: 650; } .shot__note { color: var(--ink-3); } .shot__kind { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } /* -------------------------------------------------------------------------- 22. Product card — the catalog is a shopping grid, one card per machine -------------------------------------------------------------------------- */ .card__hero { border-bottom: 1px solid var(--line); background: var(--surface-2); } .card__hero .shot { gap: 0; } .card__hero .shot__frame { border: 0; border-radius: 0; aspect-ratio: 16 / 10; background-color: var(--surface); } .card__hero .shot__cap { padding: 7px 13px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: .72rem; } .card__heads { position: relative; z-index: 2; /* above the whole-card link overlay */ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .headchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px 3px 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .75rem; text-decoration: none; line-height: 1.4; } .headchip:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-3); } .headchip__code { font-family: var(--font-mono); font-weight: 700; font-size: .68rem; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: currentColor; align-self: center; } .headchip__code span { color: var(--surface); } .headchip__name { color: var(--ink-2); } .headchip__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--ink-3); } .headchip[data-head="spindle"] { color: var(--info); } .headchip[data-head="laser"] { color: var(--warn); } .headchip[data-head="dual"] { color: var(--accent); } .headchip[data-head="plasma"] { color: var(--danger); } .headchip[data-head="toolmount"] { color: var(--none); } /* A head that the current filters exclude still shows — greyed, so the buyer sees the whole ladder and knows what a filter is hiding. */ .headchip.is-off { color: var(--none); border-style: dashed; opacity: .7; } .pricefrom { display: grid; gap: 1px; } .pricefrom__lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-3); } .pricefrom__span { font-size: .74rem; color: var(--ink-3); } .capstrip__note { grid-column: 1 / -1; font-size: .68rem; color: var(--ink-3); line-height: 1.35; } .card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; color: var(--ink-3); } .card__meta .num { color: var(--ink-2); } /* -------------------------------------------------------------------------- 23. Product gallery — hero drawing plus a keyboard-driven thumbnail rail -------------------------------------------------------------------------- */ .gallery { display: grid; gap: 14px; } .gal { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; /* A drawing that fills a 1240 px shell is a poster, not a spec sheet: cap it so the caption keeps a readable measure and the page keeps its rhythm. */ max-width: 940px; } .gal__thumbs { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; } .gal__thumbs li { margin: 0; min-width: 0; } .gal__thumb { display: grid; gap: 4px; width: 100%; padding: 4px; font: inherit; text-align: center; cursor: pointer; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .gal__thumb:hover { border-color: var(--line-3); color: var(--ink-2); } .gal__thumb[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); background: var(--accent-soft); } .gal__thumb .shot__frame { aspect-ratio: 4 / 3; padding: 3px; border-radius: 2px; background-size: 11px 11px, 11px 11px; } .gal__thumb .shot__ph { padding: 4px; gap: 3px; } .gal__thumb .shot__phmark { width: 22px; } .gal__thumb .shot__phtext { display: none; } .gal__label { font-size: .63rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; line-height: 1.25; } .gal__view { min-width: 0; } .gal__view .shot__frame { aspect-ratio: 16 / 10; background-color: var(--surface); } .gal__view .shot__cap { font-size: .8rem; } .gal__count { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .gal__hint { font-size: .74rem; color: var(--ink-3); margin: 0; } /* -------------------------------------------------------------------------- 24. Kit honesty — the drawing of what is actually in the cartons -------------------------------------------------------------------------- */ .kitgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: start; } .kitgrid .shot__frame { aspect-ratio: 4 / 3; } .buildsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: buildstep; } .buildsteps li { position: relative; margin: 0; padding: 6px 10px 6px 34px; font-size: .84rem; color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius); } .buildsteps li::before { counter-increment: buildstep; content: counter(buildstep); position: absolute; left: 9px; top: 6px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 999px; background: var(--ink-3); color: var(--surface); font-size: .64rem; font-weight: 700; font-family: var(--font-mono); } /* -------------------------------------------------------------------------- 25. Safety kit — the equipment that ships because it must -------------------------------------------------------------------------- */ .safetykit { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .safetykit > div { background: var(--surface); padding: 9px 12px; } .safetykit dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-3); } .safetykit dd { margin: 3px 0 0; font-size: .88rem; font-weight: 600; color: var(--ink); overflow-wrap: break-word; } .safetykit dd .unit { font-weight: 500; color: var(--ink-3); font-size: .78rem; } /* -------------------------------------------------------------------------- 26. Responsive — 360 px upwards -------------------------------------------------------------------------- */ @media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); padding-top: 18px; } .filters { position: static; max-height: none; overflow: visible; } .filters > summary { position: static; } .sheet-head { grid-template-columns: minmax(0, 1fr); } .buybox { position: static; } .kitgrid { grid-template-columns: minmax(0, 1fr); } } /* Below this the thumbnail rail turns into a scrolling strip under the drawing, which is the only layout that still works at 360 px. */ @media (max-width: 760px) { .gal { grid-template-columns: minmax(0, 1fr); } .gal__view { order: 1; } .gal__thumbs { order: 2; grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; } } @media (max-width: 560px) { body { font-size: 14.5px; } .site-head__in { min-height: 52px; } .brand__sub { border-left: 0; padding-left: 0; width: 100%; } .site-nav { margin-left: 0; width: 100%; border-top: 1px solid var(--line); padding-top: 6px; } .grid { grid-template-columns: minmax(0, 1fr); } .skeleton { grid-template-columns: minmax(0, 1fr); } .resultbar__sort { margin-left: 0; width: 100%; } .resultbar__sort select { flex: 1; min-width: 0; } .dimrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .form-actions { flex-direction: column; align-items: stretch; } .form-actions .btn { width: 100%; } table.data th, table.data td { padding: 7px 10px; } .cmp th[scope="row"], .vtable th[scope="row"] { min-width: 120px; font-size: .82rem; } .cmp td, .vtable td { min-width: 142px; } .hazard__class { margin-left: 0; } .varpick__row { grid-template-columns: minmax(0, 1fr); } .card__hero .shot__frame { aspect-ratio: 16 / 9; } .gal__view .shot__frame { aspect-ratio: 4 / 3; } } @media (max-width: 380px) { :root { --gutter: 12px; } .capstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kitfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .safetykit { grid-template-columns: minmax(0, 1fr); } .gal__thumbs { grid-auto-columns: 74px; } } /* -------------------------------------------------------------------------- 27. Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .btn, .card, .site-nav a, .chip button, .varopt, .headchip, .gal__thumb { transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } .card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); } /* A hair of lift on the hero drawing, nothing that moves the layout. */ .card__hero .shot__img { transition: transform .18s ease; } .card:hover .card__hero .shot__img { transform: scale(1.025); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 28. Print — buyers print spec sheets and comparisons -------------------------------------------------------------------------- */ @media print { /* `:root[data-theme]` too: an explicit dark choice out-specifies a bare `:root` rule, and paper is always white. */ :root, :root[data-theme] { color-scheme: light; --bg: #fff; --bg-tint: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #fff; --ink: #000; --ink-2: #222; --ink-3: #444; --line: #999; --line-2: #666; --price-ink: #000; --price-sub: #444; } body { font-size: 10.5pt; } .site-nav, .filters, .tray, .buybox__actions, .form-actions, .enquiry, .skip-link, .cmp-drop, .picker, .resultbar__sort { display: none !important; } .site-head, .site-foot { border-color: #000; } .tablewrap { overflow: visible; border-color: #999; } .card, .panel, .tablewrap, .hazard, .kitband, .shot { break-inside: avoid; box-shadow: none; } /* A printed spec sheet keeps the drawing and its caption; the picker rail around it is screen furniture. */ .gal__thumbs { display: none !important; } .gal { grid-template-columns: minmax(0, 1fr); } .shot__frame { background-image: none; border-color: #999; } .shot__ph { background: #fff; border: 1px dashed #999; } .hazard__head { background: #fff; color: #000; border-bottom: 2px solid #000; } .hazard__title, .hazard__class { color: #000; } table.data { font-size: 9pt; } a { color: #000; text-decoration: none; } .section { break-inside: auto; } } /* Legal row in the public footer. Terms, refunds and shipping must be reachable from every page a customer can buy from -- both because a policy nobody can find is not a policy, and because payment-gateway onboarding checks for them. */ .site-foot__legal { display: flex; flex-wrap: wrap; gap: .4rem .55rem; align-items: baseline; margin-bottom: .6rem; } .site-foot__legal a { white-space: nowrap; }