@layer base { /* ============================================================ THE MACHINE All artwork is authored SVG. Every colour here resolves from a token, which is why the colourway switcher only has to set one attribute on . ============================================================ */ .bike { inline-size: 100%; height: auto; overflow: visible; } .bike * { vector-effect: non-scaling-stroke; } /* ---- ground shadow ---- */ .p-shadow ellipse { fill: var(--c-ember); opacity: 0.14; filter: blur(22px); } /* ---- wheels ---- */ .p-wheel .tire { fill: none; stroke: oklch(0.225 0.010 42); stroke-width: 36; } .p-wheel .rim { fill: none; stroke: var(--c-ash-hi); stroke-width: 5; } .p-wheel .rim-inner { fill: none; stroke: var(--c-basalt-hi); stroke-width: 2; } .p-wheel .spokes path { fill: none; stroke: var(--c-ash); stroke-width: 1.6; opacity: 0.72; } .p-wheel .hub { fill: var(--c-basalt-hi); stroke: var(--c-ash); stroke-width: 2; } .p-wheel .hub-core { fill: var(--c-ash-hi); } .p-wheel .disc { fill: none; stroke: var(--c-basalt-hi); stroke-width: 7; } .p-wheel .disc-inner { fill: none; stroke: var(--c-ash); stroke-width: 1.4; stroke-dasharray: 5 9; opacity: 0.7; } .p-wheel .sprocket { fill: none; stroke: var(--c-ash); stroke-width: 4; stroke-dasharray: 4 8; opacity: 0.85; } .p-wheel .caliper { fill: var(--c-ember); stroke: var(--c-ember-deep); stroke-width: 2; } /* ---- frame tubing ---- */ .p-frame .tube { fill: none; stroke: var(--c-bone); stroke-width: 11; stroke-linecap: round; opacity: 0.9; } .p-frame .tube.thin { stroke-width: 7; } .p-frame .head { fill: var(--c-basalt-hi); stroke: var(--c-bone); stroke-width: 4; stroke-linejoin: round; } /* ---- generic machined metal ---- */ .p-metal [class] { fill: none; stroke: var(--c-ash-hi); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .p-metal .arm { fill: oklch(0.26 0.010 48); stroke: var(--c-ash-hi); stroke-width: 2.5; } .p-metal .chain { stroke-width: 2; opacity: 0.6; stroke-dasharray: 3 4; } .p-metal .pivot { fill: var(--c-basalt-up); stroke-width: 3; } .p-metal .eye { fill: var(--c-basalt-up); stroke-width: 3; } .p-metal .spring { stroke-width: 5; stroke: var(--c-ash-hi); stroke-linejoin: round; opacity: 0.95; } .p-metal .shock-body { stroke-width: 9; } .p-metal .stanchion { stroke-width: 12; stroke: var(--c-bone); } .p-metal .slider { stroke-width: 20; stroke: var(--c-ash-hi); } .p-metal .clamp-top { fill: var(--c-basalt-hi); stroke: var(--c-bone); stroke-width: 3; } .p-metal .fender { stroke-width: 10; stroke: var(--c-bone); opacity: 0.85; } .p-metal .peg { stroke-width: 6; } .p-metal .bar { stroke-width: 8; stroke: var(--c-bone); } .p-metal .grip { stroke-width: 13; stroke: oklch(0.28 0.012 42); } .p-metal .dial { fill: var(--c-basalt-hi); stroke-width: 4; } .p-metal .dial-face { fill: var(--c-basalt); stroke-width: 1.5; } .p-metal .needle { stroke: var(--c-ember); stroke-width: 3; } /* ---- engine ---- */ .p-engine .cases { fill: var(--c-basalt-up); stroke: var(--c-ash-hi); stroke-width: 3.5; stroke-linejoin: round; } .p-engine .barrel, .p-engine .head-cyl { fill: var(--c-basalt-hi); stroke: var(--c-ash-hi); stroke-width: 3.5; stroke-linejoin: round; } .p-engine .fins path { fill: none; stroke: var(--c-ash); stroke-width: 2.4; opacity: 0.85; } .p-engine .case-cover { fill: none; stroke: var(--c-ash); stroke-width: 2.5; } .p-engine .case-bolt { fill: var(--c-ash-hi); } .p-engine .carb { fill: var(--c-basalt-hi); stroke: var(--c-ash-hi); stroke-width: 3; stroke-linejoin: round; } .p-engine .carb-neck { fill: none; stroke: var(--c-ash-hi); stroke-width: 9; stroke-linecap: round; } /* ---- exhaust ---- */ .p-pipe .pipe { fill: none; stroke: var(--c-ash-hi); stroke-width: 12; stroke-linecap: round; } .p-pipe .can { fill: oklch(0.32 0.010 48); stroke: var(--c-ash-hi); stroke-width: 3; stroke-linejoin: round; } .p-pipe .can-tip { fill: var(--c-basalt); stroke: var(--c-ash-hi); stroke-width: 2.5; } .p-pipe .clamp { fill: none; stroke: var(--c-ash); stroke-width: 4; } /* ---- painted bodywork, driven by --paint ---- */ .p-body .paint { fill: var(--paint); } .p-body .scallop { fill: var(--paint-hi); opacity: 0.85; } .p-body .seat-pad { fill: oklch(0.20 0.012 48); } .p-body .stripe { fill: none; stroke: var(--paint-line); stroke-width: 3; opacity: 0.9; } .p-body .edge { fill: none; stroke: var(--c-bone); stroke-width: 2.5; opacity: 0.55; } .p-body .cap { fill: var(--c-basalt-hi); stroke: var(--c-ash-hi); stroke-width: 3; } .p-body .paint, .p-body .scallop, .p-body .stripe { transition: fill var(--d-slow) var(--e-out), stroke var(--d-slow) var(--e-out); } /* ---- number plate ---- */ .p-plate .plate-face { fill: var(--c-bone); stroke: var(--c-basalt); stroke-width: 3; } .p-plate .plate-num { stroke: none; font-family: var(--f-display); font-weight: 800; font-size: 38px; fill: var(--c-basalt); letter-spacing: -0.02em; } /* ---- lamp ---- */ .p-lamp .bucket { fill: var(--c-basalt-hi); stroke: var(--c-bone); stroke-width: 4; } .p-lamp .lens { fill: var(--c-sulphur); opacity: 0.26; } .p-lamp .rim-ring { fill: none; stroke: var(--c-ash-hi); stroke-width: 2.5; opacity: 0.8; } .p-lamp .glint { fill: none; stroke: var(--c-sulphur); stroke-width: 7; stroke-linecap: round; opacity: 0.75; } .p-lamp .mount { fill: none; stroke: var(--c-ash-hi); stroke-width: 5; stroke-linecap: round; } }