/* Avakode Hub: the set calculator of the home page (lane/builder, 23.10; template-parts/builder.php, assets/js/builder.js). Home page only (inc/builder.php). It stands on the board like the strips of home.css: a .hub-strip with a .hub-wrap.hub-grid whose first column is empty (the bus of the board runs in it, past the strip, unbroken). The plaques are cards of the board in miniature (ground --bg-2, a hairline, 8 px), and each takes the colour of its tool from the same table as the cards (board.css: --brand, --brand-ink, --brand-line by data-product). Nothing here moves: the only change is a colour (border, ground, tick) with the hub's one curve. No glass, no shadow; focus is the hub's outline (hub.css). */ /* a hidden part is hidden whatever display its rule sets */ .hub-bld [hidden] { display: none !important; } .hub-bld { scroll-margin-top: calc(var(--hub-bar) + 8px); } /* #builder: the jump lands under the sticky bar */ .hub-bld__head { margin-bottom: 28px; } .hub-bld__lead { max-width: 60ch; margin: 12px 0 0; color: var(--fg-2); font-size: 16px; } /* the plaques and the board: one column; from 1200 px the board stands beside the plaques, and the two are one height (owner 23.10): both stretch to the row, which is as tall as the taller of them */ .hub-bld__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; } @media (min-width: 1200px) { .hub-bld__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; } } /* 4 columns, 3 up to 960 px, 2 up to 640 px, 1 up to 420 px (the widest logo, Clearway, needs about 131 px inside a plaque). From 1200 px, where the board stands beside the plaques (the step above), they are 3 columns, each wider (12 plaques are 4 rows), and as tall as the board (owner 23.10): the board grows with each picked tool, the rows of plaques share its height (1fr; a plaque keeps its logo on top and its price at the foot). Never lower than their content (an empty set: the board stretches to them instead) and never taller than the window under the bar: with a long set the board runs on and the plaques stay in view (sticky, as far from the bar as the gap). */ .hub-bld__plaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; } @media (max-width: 960px) { .hub-bld__plaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .hub-bld__plaques { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .hub-bld__plaques { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1200px) { .hub-bld__plaques { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; min-height: min-content; max-height: calc(100vh - var(--hub-bar) - 40px); position: sticky; top: calc(var(--hub-bar) + 20px); } } /* a plaque: the logo of the tool on top, its price line and the tick under it; a button that is pressed when the tool is in the set */ .hub-plaque { --brand: var(--signal); --brand-ink: var(--signal-hot); --brand-line: var(--signal); /* a tool without a colour of its own keeps the violet (board.css by data-product wins: it is more specific) */ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; align-items: center; gap: 12px 8px; min-width: 0; min-height: 92px; padding: 14px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .5s var(--ease), background .5s var(--ease); } .hub-plaque:hover { border-color: rgba(169,139,255,.5); } .hub-plaque[aria-pressed="true"] { border-color: var(--brand-line); background: var(--hub-bg-3); } .hub-plaque__logo { grid-column: 1 / -1; display: block; min-width: 0; line-height: 0; container-type: inline-size; } .hub-plaque .hub-plogo__img { height: min(40px, 18.27cqi); } /* the card's logo, smaller (owner 23.10: 24 px read too small); 18.27cqi = 100 / 5.468, the widest file's proportion: it never overflows its plaque, and at 1440 the widest (Clearway) fills it */ .hub-plaque__price { min-width: 0; color: var(--muted); font: 12px/1.4 var(--mono); } .hub-plaque[aria-pressed="true"] .hub-plaque__price { color: var(--fg-2); } .hub-plaque__tick { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--muted); border-radius: 50%; color: transparent; transition: color .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); } .hub-plaque__tick svg { display: block; width: 12px; height: 12px; } .hub-plaque[aria-pressed="true"] .hub-plaque__tick { color: var(--brand-ink); border-color: var(--brand-line); background: color-mix(in srgb, var(--brand) 22%, transparent); } /* a tool that is not on sale yet: grey, «Coming soon», nothing to press */ .hub-plaque[aria-disabled="true"] { cursor: default; } .hub-plaque[aria-disabled="true"]:hover { border-color: var(--line); } .hub-plaque[aria-disabled="true"] .hub-plaque__logo { filter: grayscale(1) brightness(.8); } .hub-plaque[aria-disabled="true"] .hub-plaque__tick { visibility: hidden; } /* the board: the picked tools with a plan each, the sums, the button. Stretched taller than its content (beside the plaques of an empty set), the picked tools stay on top and the sums with the button go to its foot, level with the last row of plaques: the live part takes the spare height and its sums the top margin; without a script (no live part) the button takes it. */ .hub-bld__board { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); } .hub-bld__hint, .hub-bld__empty { margin: 0; color: var(--fg-2); font-size: 14.5px; } .hub-bld__live { flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hub-bld__msg { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--fg-2); font-size: 13.5px; line-height: 1.5; } .hub-bld__rows { display: grid; gap: 10px; min-width: 0; overflow-wrap: anywhere; } .hub-bld__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .hub-bld__row-name { min-width: 0; color: var(--fg); font-size: 15px; line-height: 1.35; } .hub-bld__row-price { color: var(--fg-2); font: 13px/1.4 var(--mono); text-align: right; white-space: nowrap; } .hub-bld__row-plan { grid-column: 1 / -1; min-width: 0; color: var(--muted); font: 12px/1.4 var(--mono); } /* the plan list of a tool: a button (the current plan, a chevron) that opens a listbox under it; the page's own, not the browser's