Twelve pages, one design system, four signature moments.
A working clickable prototype for orlaser.com. Industrial-density layout in the Bystronic tradition, with four signature moments: a scroll-driven exploded-view machine animation, a four-step quote-cart flow with engineer response state, an end-to-end bilingual EN ↔ DE toggle, and a live Tweaks panel for density, type scale, nav style, accent intensity, and hero variants.
Entry & navigation
Homepage
Three hero variants (editorial / product-forward / scroll-driven), bilingual section EN→DE, capability rail, machine series rail, services rail, signature wall.
02Machine Series Hub
Five machines in a comparison rail: HTS-F, HTS-L, LRS-F, LRS-L, LRS-Neu. Filterable by application + power + chassis.
03Machine Detail · HTS-F
Scroll-driven exploded-view animation. Spec table. Application stories. Service options. Quote CTA.
04Services Hub
Four services: Repair, Welding-as-a-Service, Training, OEM Parts. Each with SLA badge and engineer-owner.
05Service Detail · Repair
SLA matrix (Standard / Industrial / Critical 24/7), engineer roster, scope-of-work table, request-a-visit CTA.
Commerce — Shop & Quote
Shop · OEM Parts
Filterable grid, 9 SKUs across wear parts / optics / electronics / consumables / services. POR items routed to engineer. Floating quote-cart pill.
07Quote Cart · 4-step flow
Review → Details → Submitted → Engineer Response. Live qty edits, POR handling, simulated quote-back with engineer note + binding total.
08Account Dashboard
Customer with 3 machines + serial plates + service-due bars + ticket log + open quotes. 8-section side nav.
Story — Content & company
Guides & News
Field reports, application notes, press, trade fairs. Feature article + 8-row archive + three beginner application-note tiles.
10Company
Timeline (1995 → 2026, 7 milestone years), 8-person engineering roster, Groß-Zimmern plant photo + 3 stats.
11Contact
Four routes (Sales / Service / Parts / Training) each to a named engineer + phone + hours. General enquiry form. Plant address.
CCNavigation + Footer
Web component <or-chrome> — three nav styles, three densities, two languages, transparent-over-hero detection. <or-footer> — 5-column with engineer-on-call line.
Open any page, toggle Tweaks (top-right), switch DE↔EN.
Stack: Vanilla HTML + CSS custom-property tokens + one shared chrome.js web component + one tweaks.js controller. No build step. Drops into Claude Code as-is — every page is <~600 lines.
Tokens: or-tokens.css · OKLCH-based, RAL-2003 accent, Source Serif Pro display, Inter body, JetBrains Mono labels. Density and type scale are CSS custom properties — Tweaks rewrites them live and persists to localStorage.