/* Venn wheel builder. The look of the studio's Claude Design canvas (order 28-oct-builder-build-design; 05_brand/builder-design-2026-10-28/Main.dc.html): Venn black for choices and buttons, the logo's red only in small accents (step numbers, the chosen-rim tag, the current phone step), 12 px cards, touch targets of 44 px or more. Inherits the theme's font (Poppins). The theme styles every button, list and heading, so the builder resets them under #venn-builder. No part of the catalogue is named here; every list comes from catalog.json (builder.js). */ .venn-builder { --vb-ink: #16181B; --vb-text: #3A3A3A; --vb-muted: #63666B; --vb-rule: #E2E3E5; --vb-hover: #A9ACB1; --vb-soft: #F6F6F7; --vb-well: #F1F1F2; --vb-red: #D71920; --vb-warn: #8E1712; --vb-warn-bg: #FDECEC; --vb-bg: #FFFFFF; max-width: 1200px; margin: 0 auto; color: var(--vb-text); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; } #venn-builder *, #venn-builder *::before, #venn-builder *::after { box-sizing: border-box; } #venn-builder button { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; line-height: inherit; box-shadow: none; text-transform: none; letter-spacing: normal; width: auto; height: auto; min-width: 0; float: none; cursor: pointer; } #venn-builder button:focus-visible, #venn-builder a:focus-visible { outline: 2px solid var(--vb-ink); outline-offset: 2px; } #venn-builder h2, #venn-builder h3, #venn-builder p, #venn-builder figure, #venn-builder dl, #venn-builder dd { margin: 0; } #venn-builder h2, #venn-builder h3 { color: var(--vb-ink); padding: 0; } #venn-builder dt, #venn-builder dd { padding: 0; border: 0; line-height: 1.4; } #venn-builder img { display: block; max-width: 100%; } /* The intro (server-rendered in venn-builder.php, above the widget) and the desktop step bar */ /* its own root, not .venn-builder: that one takes 150 px of bottom padding on a phone for the fixed bar */ #venn-builder-intro { --vb-red: #D71920; max-width: 1200px; margin: 0 auto; color: #3A3A3A; font-size: 15px; line-height: 1.5; } #venn-builder-intro .vb-intro { display: grid; gap: 8px; max-width: 760px; margin: 0 0 24px; } #venn-builder-intro p { margin: 0; } #venn-builder-intro .vb-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vb-red); } #venn-builder-intro .vb-intro__line { font-size: 16px; } @media (max-width: 1023px) { #venn-builder-intro .vb-intro { margin-bottom: 16px; } #venn-builder-intro .vb-intro__line { font-size: 15px; } } #venn-builder .vb-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--vb-rule); border-radius: 14px; margin: 0 0 28px; } #venn-builder .vb-nav__step { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; text-decoration: none; min-width: 0; flex: 1 1 0; } #venn-builder .vb-nav__step:hover { background: var(--vb-soft); } #venn-builder .vb-nav__num { font-size: 12px; font-weight: 600; color: var(--vb-red); } #venn-builder .vb-nav__name { font-size: 13.5px; font-weight: 600; color: var(--vb-ink); line-height: 1.3; } #venn-builder .vb-nav__value { font-size: 12.5px; color: var(--vb-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Steps */ #venn-builder .vb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: start; } #venn-builder .vb-steps { display: flex; flex-direction: column; gap: 20px; min-width: 0; } #venn-builder .vb-step { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--vb-rule); border-radius: 12px; background: var(--vb-bg); min-width: 0; scroll-margin-top: 90px; } #venn-builder .vb-step__title { font-size: 22px; font-weight: 700; line-height: 1.25; } #venn-builder .vb-label { font-size: 13px; font-weight: 600; color: var(--vb-muted); } #venn-builder .vb-stepweight { font-size: 13.5px; font-weight: 600; color: var(--vb-ink); } #venn-builder .vb-hint { font-size: 12.5px; color: var(--vb-muted); line-height: 1.45; } #venn-builder .vb-hint--top { font-size: 14px; color: var(--vb-text); max-width: 640px; } #venn-builder .vb-warn { padding: 12px 16px; border-radius: 10px; background: var(--vb-warn-bg); color: var(--vb-warn); font-size: 14px; font-weight: 500; } #venn-builder .vb-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } #venn-builder .vb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* Tabs, chips, cards */ #venn-builder .vb-tabs { display: flex; gap: 4px; padding: 4px; background: var(--vb-well); border-radius: 11px; max-width: 420px; } #venn-builder .vb-tab { flex: 1 1 0; min-height: 44px; border-radius: 8px; font-weight: 600; font-size: 14px; text-align: center; color: var(--vb-muted); } #venn-builder .vb-tab.is-on { background: var(--vb-bg); color: var(--vb-ink); box-shadow: 0 1px 3px rgba(22, 24, 27, .14); } #venn-builder .vb-chips { display: flex; flex-wrap: wrap; gap: 8px; } #venn-builder .vb-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--vb-rule); border-radius: 999px; background: var(--vb-bg); color: var(--vb-ink); font-weight: 500; font-size: 14px; white-space: nowrap; flex: none; } #venn-builder .vb-chip:hover { border-color: var(--vb-hover); } /* a body's extra price on its chip (the DT Swiss XDR and N3W, V-526 B): the flex box drops the space before it */ #venn-builder .vb-chip__extra { margin-left: 0.4em; font-weight: 400; } #venn-builder .vb-chip.is-on { background: var(--vb-ink); border-color: var(--vb-ink); color: #FFFFFF; } #venn-builder .vb-card { border: 1px solid var(--vb-rule); border-radius: 12px; background: var(--vb-bg); color: var(--vb-text); transition: border-color .15s, box-shadow .15s; } #venn-builder .vb-card:hover { border-color: var(--vb-hover); } #venn-builder .vb-card.is-on { border-color: var(--vb-ink); box-shadow: 0 0 0 1px var(--vb-ink); } #venn-builder .vb-card.is-off { opacity: .5; cursor: not-allowed; } #venn-builder .vb-card.is-off:hover { border-color: var(--vb-rule); } #venn-builder .vb-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--vb-hover); background: var(--vb-bg); } #venn-builder .is-on .vb-dot { border-color: var(--vb-ink); background: var(--vb-ink); box-shadow: inset 0 0 0 5px var(--vb-ink), inset 0 0 0 10px #FFFFFF; } #venn-builder .vb-tag { align-self: flex-start; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--vb-ink); background: var(--vb-well); border-radius: 6px; padding: 2px 8px; } /* 1. Rims */ #venn-builder .vb-rimgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; } #venn-builder .vb-rim { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; min-height: 96px; } #venn-builder .vb-rim__img { width: 72px; height: 72px; object-fit: contain; flex: none; } #venn-builder .vb-rim__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: 14px; } #venn-builder .vb-rim__use { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vb-muted); } #venn-builder .vb-rim__name { font-size: 14.5px; font-weight: 600; color: var(--vb-ink); line-height: 1.3; } #venn-builder .vb-rim__specs { font-size: 12.5px; line-height: 1.4; } #venn-builder .vb-rim__grams { font-size: 12.5px; font-weight: 600; color: var(--vb-ink); } #venn-builder .vb-rim__chosen { position: absolute; bottom: 8px; right: 8px; font-size: 11px; font-weight: 600; color: #FFFFFF; background: var(--vb-red); border-radius: 6px; padding: 2px 8px; } #venn-builder .vb-rimcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } #venn-builder .vb-rimcard { display: flex; gap: 16px; align-items: flex-start; padding: 16px; background: var(--vb-soft); border-radius: 12px; min-width: 0; } #venn-builder .vb-rimcard a { flex: none; background: var(--vb-bg); border-radius: 10px; } #venn-builder .vb-rimcard__img { width: 112px; height: 112px; object-fit: contain; } #venn-builder .vb-rimcard figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; min-width: 0; } #venn-builder .vb-rimcard figcaption b { color: var(--vb-ink); font-weight: 600; } /* 2. Hubs */ #venn-builder .vb-hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; } #venn-builder .vb-hub { display: flex; gap: 10px; align-items: flex-start; padding: 16px; } #venn-builder .vb-hub__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; align-self: stretch; } #venn-builder .vb-hub__head { font-size: 15px; font-weight: 600; color: var(--vb-ink); line-height: 1.35; } #venn-builder .vb-hub__sub { font-size: 13px; line-height: 1.4; } #venn-builder .vb-hub__note { font-size: 13px; color: var(--vb-muted); line-height: 1.45; margin-top: 4px; } #venn-builder .vb-hub__weight { font-size: 13.5px; font-weight: 600; color: var(--vb-ink); margin-top: auto; padding-top: 8px; } #venn-builder .vb-meter { display: block; height: 4px; border-radius: 2px; background: #EDEDEF; margin-top: 6px; } #venn-builder .vb-meter span { display: block; height: 4px; border-radius: 2px; background: var(--vb-ink); } /* 3. Spoke count */ #venn-builder .vb-countgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } #venn-builder .vb-count { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-height: 76px; } #venn-builder .vb-count__name { font-size: 20px; font-weight: 600; color: var(--vb-ink); letter-spacing: .01em; } #venn-builder .vb-count__note { font-size: 12.5px; color: var(--vb-muted); line-height: 1.35; } /* 4. Spoke type, 7. Tool access holes */ #venn-builder .vb-opt { display: flex; gap: 10px; align-items: center; padding: 12px 14px; min-height: 56px; } #venn-builder .vb-opt__text { display: flex; flex-direction: column; min-width: 0; } #venn-builder .vb-opt__name { font-size: 14px; font-weight: 600; color: var(--vb-ink); line-height: 1.35; } #venn-builder .vb-opt__note { font-size: 12.5px; color: var(--vb-muted); } #venn-builder .vb-tahgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } /* 6. Finish and decals */ #venn-builder .vb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; max-width: 520px; } #venn-builder .vb-swatch { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; text-align: center; } #venn-builder .vb-swatch__img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; } #venn-builder .vb-swatch__name { font-size: 13px; font-weight: 500; color: var(--vb-ink); line-height: 1.3; text-align: center; } /* Your build */ #venn-builder .vb-summary { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--vb-rule); border-radius: 16px; background: var(--vb-bg); min-width: 0; max-height: min(calc(100vh - 110px), 680px); overflow-y: auto; overscroll-behavior: contain; } #venn-builder .vb-summary__title { font-size: 24px; font-weight: 700; line-height: 1.2; } #venn-builder .vb-thumbs { display: flex; gap: 10px; } #venn-builder .vb-thumb { flex: 1 1 0; min-width: 0; display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--vb-soft); border-radius: 10px; } #venn-builder .vb-thumb__img { width: 52px; height: 52px; object-fit: contain; background: var(--vb-bg); border-radius: 8px; flex: none; } #venn-builder .vb-thumb > span { display: flex; flex-direction: column; min-width: 0; } #venn-builder .vb-thumb__label { font-size: 11.5px; font-weight: 600; color: var(--vb-muted); } #venn-builder .vb-thumb__name { font-size: 13px; font-weight: 600; color: var(--vb-ink); line-height: 1.3; } #venn-builder .vb-weight { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: var(--vb-soft); } #venn-builder .vb-weight__title { font-size: 13px; font-weight: 600; color: var(--vb-muted); } #venn-builder .vb-weight__set { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #venn-builder .vb-weight__set dt { font-size: 13.5px; color: var(--vb-muted); } #venn-builder .vb-weight__set dd { font-size: 24px; font-weight: 600; color: var(--vb-ink); line-height: 1.2; white-space: nowrap; } #venn-builder .vb-weight__set b { font-weight: 600; } #venn-builder .vb-sheet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 13fr); gap: 8px 14px; font-size: 13.5px; } #venn-builder .vb-sheet dt { color: var(--vb-muted); overflow-wrap: anywhere; hyphens: auto; } /* a long German label (Bremsscheibenaufnahme) breaks in its column, vennwheels.com 2 Nov 2026 */ #venn-builder .vb-sheet dd { color: var(--vb-ink); } #venn-builder .vb-sheet--build { padding-top: 16px; border-top: 1px solid var(--vb-rule); } #venn-builder .vb-buy { display: flex; flex-direction: column; gap: 4px; } #venn-builder .vb-price { font-size: 32px; font-weight: 700; color: var(--vb-ink); line-height: 1.15; } #venn-builder .vb-lead, #venn-builder .venn-ship-dates { font-size: 14px; color: var(--vb-ink); } #venn-builder .vb-listed { display: flex; flex-direction: column; gap: 12px; } #venn-builder .vb-listed p { font-size: 15px; color: var(--vb-ink); } #venn-builder .vb-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 10px; background: var(--vb-ink); color: #FFFFFF; font-weight: 600; font-size: 16px; text-decoration: none; text-align: center; border: 1.5px solid var(--vb-ink); } #venn-builder .vb-cta:hover { background: #000000; color: #FFFFFF; } #venn-builder .vb-cta--line { background: var(--vb-bg); color: var(--vb-ink); } #venn-builder .vb-cta--line:hover { background: var(--vb-soft); color: var(--vb-ink); } #venn-builder .vb-hint--listed { display: none; } #venn-builder .vb-bar, #venn-builder .vb-phonehead { display: none; } /* 28 Oct 2026 (order 28-oct-builder-summary-and-1060-start item 1): "Your build" stays beside the steps on desktop. The theme's #Wrapper has overflow: hidden, which makes it the scroll box the sticky summary sticks to, so the summary scrolled away with the page. On a page with the builder only, clip keeps the theme's clipping without that scroll box. The summary is at most 680 px and the screen less 110 px, so it stays below the menu bar beside the last steps; its build sheet scrolls inside it when it does not fit. */ #Wrapper:has(.venn-builder) { overflow: clip; } /* The Venn site chat's button sits fixed at the screen's bottom right, 16 px from the side and 88 px up (above the reCAPTCHA badge; 15_site_chat/sites/venn-cycling.json), about 155 px wide. Where the page's side margin is narrower than the button, the grid keeps that much room on its right, so the summary never runs under the button (desk, 28 Oct: at 1366 px it covered "Ride in January." and the build sheet); the step bar above ends with it. From 1024 px; below that the page has the phone and tablet layout. (100vw - 100%) / 2 is the margin beside the centred builder. */ @media (min-width: 1024px) { #venn-builder .vb-grid, #venn-builder .vb-nav { margin-right: max(0px, calc(196px - (100vw - 100%) / 2)); } } /* A phone or a tablet (up to 1023 px; builder.js phoneQ says the same): one step per screen with its progress at the top; the weight, the price, Back and Next in a bar at the bottom. Between 761 and 1023 px "Your build" beside the steps would run under the site chat's button, and making room for the button would leave the steps too narrow (order 28-oct-builder-tablet-chat); the bar keeps the weight, the price and the cart button in view, below the chat. */ @media (max-width: 1023px) { .venn-builder { padding-bottom: 150px; } #venn-builder .vb-phonehead { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; } #venn-builder .vb-phonehead__count { font-size: 12.5px; color: var(--vb-muted); } #venn-builder .vb-progress { display: flex; gap: 4px; } #venn-builder .vb-progress span { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--vb-rule); min-width: 0; } #venn-builder .vb-progress .is-done { background: var(--vb-ink); } #venn-builder .vb-progress .is-on { background: var(--vb-red); } #venn-builder .vb-phonehead__title { font-size: 17px; font-weight: 600; color: var(--vb-ink); line-height: 1.3; } #venn-builder .vb-step { border: 0; padding: 0; border-radius: 0; } #venn-builder .vb-step__title { display: none; } #venn-builder .vb-summary { position: static; max-height: none; overflow: visible; border: 0; padding: 0; border-radius: 0; } #venn-builder .vb-summary__title, #venn-builder .vb-add, #venn-builder .vb-listed__link { display: none; } #venn-builder .vb-hint--listed { display: block; } #venn-builder .vb-bar { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--vb-bg); border-top: 1px solid var(--vb-rule); box-shadow: 0 -6px 18px rgba(22, 24, 27, .06); } #venn-builder .vb-bar__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; font-size: 14px; color: var(--vb-ink); } #venn-builder .vb-bar__row span + span { font-size: 16px; } #venn-builder .vb-bar__warn { font-size: 13px; font-weight: 500; color: var(--vb-warn); } #venn-builder .vb-bar__buttons { display: flex; gap: 8px; } #venn-builder .vb-bar .vb-cta { min-height: 50px; font-size: 15px; flex: 1 1 auto; width: auto; } #venn-builder .vb-bar .vb-back { flex: 0 0 auto; } /* The Venn site chat's button (15_site_chat widget: bottom: var(--b)) floats above the bar, not over its price. */ body:has(#venn-builder) [data-site-chat] { --b: 150px !important; } } /* A phone: the cards one to a row, the group chips in one row that scrolls sideways. A tablet keeps the cards two to a row and the bar's contents in a 720 px column. */ @media (max-width: 760px) { #venn-builder .vb-chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; } #venn-builder .vb-rimcards, #venn-builder .vb-hubgrid { grid-template-columns: minmax(0, 1fr); } #venn-builder .vb-rimcard__img { width: 88px; height: 88px; } } @media (min-width: 761px) and (max-width: 1023px) { #venn-builder .vb-bar { padding-left: max(16px, calc((100vw - 720px) / 2)); padding-right: max(16px, calc((100vw - 720px) / 2)); } }