/* ───────────────────────────────────────────────────────────── AMPACITIES · CALCULATOR DESIGN SYSTEM · "grouped cards" Single source of truth for the calculator-page look, v2. Established 2026-06-03 from the Voltage Drop redesign. The new calculator aesthetic — warm cream stage, near-black calculator cards, copper accent, Bricolage Grotesque — used by every migrated/new calculator. The editorial homepage (/index.html) and the site chrome (topbar/footer) are NOT affected: every rule here is scoped under `.vd`, `.vd-stage`, or `.vd-suite`, so it cannot leak into _shared.css or site-chrome.css. USAGE (per calculator page): ...fonts incl. Bricolage Grotesque... ← chrome tokens ← chrome ← THIS

…cards…

Reference implementation: library/voltage-drop/redesign.html Authoring / migration guide: templates/calculator-grouped/README.md PALETTE (locked): cream #ece4d6 · body #1a1a1e · display #fff copper #ea6a3a · pass #1f8a5b · fail #d23b2e TYPE: Bricolage Grotesque, tabular figures (.num) ───────────────────────────────────────────────────────────── */ /* ===== Cream stage band (sits between the dark topbar and footer) ===== */ .vd-stage { background: #ece4d6; display: flex; justify-content: center; padding: 40px 28px 64px; } .vd-suite { width: 900px; max-width: 100%; display: flex; flex-direction: column; gap: 13px; } /* ===== Indicative-data disclaimer (tables are approximated, not yet calibrated) ===== */ .vd-suite .vd-disclaimer { display: flex; align-items: baseline; gap: 11px; background: rgba(234,106,58,0.10); border: 1px solid rgba(234,106,58,0.28); border-left: 3px solid #ea6a3a; border-radius: 11px; padding: 11px 15px; font-family: 'Bricolage Grotesque', system-ui, sans-serif; } .vd-suite .vd-disclaimer .dl-tag { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: #ea6a3a; border-radius: 999px; padding: 3px 9px; } .vd-suite .vd-disclaimer .dl-txt { font-size: 12px; line-height: 1.5; color: #5a4636; } .vd-suite .vd-disclaimer strong { color: #b4471f; font-weight: 700; } @media print { .vd-suite .vd-disclaimer { display: none; } } /* ===== Shared shell — every rule scoped under .vd ===== */ .vd { --display: #ffffff; --ink: #181a1f; --input: #f2efe9; --ctrl: #e4ded3; --copper: #ea6a3a; --pass: #1f8a5b; --fail: #d23b2e; --ink-dim: rgba(24,26,31,0.55); --ink-fade: rgba(24,26,31,0.40); --hairline: rgba(24,26,31,0.12); --soft: rgba(24,26,31,0.08); --on-dark: rgba(255,255,255,0.92); --on-dark-dim: rgba(255,255,255,0.5); --on-dark-line: rgba(255,255,255,0.12); --pad: 15px; --gap: 11px; --hero-size: 58px; width: 100%; background: #1a1a1e; border-radius: 16px; padding: var(--pad); box-shadow: 0 30px 70px -30px rgba(20,16,10,0.5); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 500; font-optical-sizing: auto; color: var(--ink); text-align: left; } .vd, .vd * { box-sizing: border-box; } .vd button { font-family: inherit; cursor: pointer; } .vd input, .vd select { font-family: inherit; } .vd .num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* head */ .vd .vd-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 3px 6px 12px; } .vd .vd-head .t { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .vd .vd-head .tag { color: var(--on-dark-dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .vd .vd-head .hl { display: flex; align-items: center; gap: 12px; } .vd .vd-head .hr { display: flex; align-items: center; gap: 14px; } /* doc-status pill (in head) */ .vd .vd-status { position: relative; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1px solid var(--on-dark-line); border-radius: 999px; padding: 5px 10px 5px 11px; } .vd .vd-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); } .vd .vd-status[data-status="issued"] .dot { background: var(--pass); } .vd .vd-status[data-status="superseded"] .dot { background: var(--on-dark-dim); } .vd .vd-status select { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding-right: 14px; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; } .vd .vd-status select option { color: #181a1f; } /* body + cards */ .vd .vd-body { display: flex; flex-direction: column; gap: var(--gap); } .vd .vd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .vd .vd-card, .vd .vd-hero { background: var(--display); border-radius: 16.4px; padding: var(--pad); box-shadow: 0 6px 22px -10px rgba(20,16,10,0.28); } .vd .vd-card .ct { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .vd .vd-card .ct::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--copper); } .vd .vd-card .ct .ct-meta { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-fade); } /* hero */ .vd .vd-hero { display: flex; flex-direction: row; align-items: center; gap: 24px; } .vd .vd-hero-main { flex: none; padding-right: 24px; border-right: 1px solid var(--hairline); } .vd .vd-hero-viz { flex: 1; } .vd .vd-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .vd .vd-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); } .vd .vd-badge { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .vd .vd-badge.pass { color: var(--pass); background: rgba(31,138,91,0.12); } .vd .vd-badge.fail { color: var(--fail); background: rgba(210,59,46,0.12); } .vd .vd-figure { margin: 10px 0 2px; } .vd .vd-figure .big { display: flex; align-items: baseline; gap: 7px; } .vd .vd-figure .big .v { font-size: var(--hero-size); font-weight: 700; letter-spacing: -0.04em; line-height: 0.85; color: var(--copper); } .vd .vd-figure .big .u { font-size: calc(var(--hero-size) * 0.36); font-weight: 600; color: var(--ink-fade); } .vd .vd-figure .sub { margin-top: 7px; font-size: 15px; font-weight: 700; color: var(--ink-dim); } .vd .vd-thresh { position: relative; height: 16px; background: var(--soft); border-radius: 99px; } .vd .vd-thresh .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; } .vd .vd-thresh .line { position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--ink); } .vd .vd-thresh .line span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); white-space: nowrap; } .vd .vd-viz-scale { display: flex; justify-content: space-between; margin-top: 9px; font-size: 10px; font-weight: 600; color: var(--ink-fade); } .vd .vd-mini { display: flex; flex-wrap: wrap; gap: 15px 24px; margin-top: 15px; } .vd .vd-mini .m .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-fade); } .vd .vd-mini .m .v { font-size: 18px; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; color: var(--ink); } .vd .vd-mini .m .v i { font-style: normal; font-size: 11px; color: var(--ink-fade); margin-left: 2px; } .vd .vd-mini .m .v.hot { color: var(--copper); } /* fields */ .vd .vd-fld { margin-bottom: var(--gap); } .vd .vd-fld:last-child { margin-bottom: 0; } .vd .vd-fld .fl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; } .vd .vd-fld .fld-label { color: var(--ink-dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .vd .vd-fld[hidden] { display: none; } .vd .vd-fld .stepper, .vd .vd-fld .seg, .vd .vd-fld select.dd, .vd .vd-fld .field { width: 100%; } .vd .vd-fld .seg-btn { flex: 1; } .vd .vd-fld .stepper { justify-content: space-between; } /* segmented */ .vd .seg { display: inline-flex; background: var(--ctrl); border-radius: 8px; padding: 2px; gap: 2px; } .vd .seg-btn { border: none; background: transparent; color: var(--ink-dim); font-weight: 600; letter-spacing: -0.01em; padding: 6px 11px; border-radius: 6px; font-size: 12px; transition: all .15s ease; white-space: nowrap; } .vd .seg-btn:hover { color: var(--ink); } .vd .seg-btn.active { background: #1a1a1e; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); } /* stepper */ .vd .stepper { display: inline-flex; align-items: center; background: var(--ctrl); border-radius: 9px; overflow: hidden; } .vd .step-btn { border: none; background: transparent; color: var(--ink); width: 36px; height: 38px; font-size: 19px; font-weight: 500; line-height: 1; } .vd .step-btn:hover { background: var(--soft); } .vd .step-val { flex: 1; min-width: 52px; text-align: center; font-weight: 600; font-size: 15px; } .vd .step-locked { display: flex; align-items: center; justify-content: center; height: 38px; background: var(--ctrl); border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--ink-dim); } /* dropdown + plain field */ .vd select.dd { appearance: none; -webkit-appearance: none; background-color: var(--input); border: 1px solid var(--hairline); border-radius: 9px; padding: 0 34px 0 12px; height: 44px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23181a1f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .vd .field { display: flex; align-items: center; background: var(--input); border: 1px solid transparent; border-radius: 9px; padding: 0 12px; height: 44px; transition: border-color .14s ease; } .vd .field:focus-within { border-color: var(--copper); } .vd .field input { border: none; background: transparent; outline: none; font-size: 15px; font-weight: 600; color: var(--ink); width: 100%; padding: 0; font-variant-numeric: tabular-nums lining-nums; } .vd .field .unit { color: var(--ink-fade); font-size: 12px; font-weight: 600; padding-left: 6px; white-space: nowrap; } /* advanced disclosure */ .vd .vd-adv { margin-top: 2px; } .vd .vd-adv-toggle { width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--on-dark-line); color: var(--on-dark); border-radius: 12px; padding: 12px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: background .15s; } .vd .vd-adv-toggle:hover { background: rgba(255,255,255,0.08); } .vd .vd-adv-toggle .chev { margin-left: auto; transition: transform .2s; font-size: 10px; opacity: 0.6; } .vd .vd-adv-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .vd .vd-adv-toggle .hint { color: var(--on-dark-dim); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; } .vd .vd-adv-panel { margin-top: var(--gap); } .vd .vd-adv-panel[hidden] { display: none; } .vd .vd-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px var(--pad); } .vd .vd-adv-grid .span-2 { grid-column: span 2; } @media (max-width: 760px) { .vd .vd-adv-grid { grid-template-columns: 1fr; } .vd .vd-adv-grid .span-2 { grid-column: auto; } } /* tabs (Analysis) */ .vd .vd-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; flex-wrap: wrap; } .vd .vd-tab { border: none; background: none; color: var(--ink-dim); font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .vd .vd-tab:hover { color: var(--ink); } .vd .vd-tab.active { color: var(--ink); border-bottom-color: var(--copper); } .vd .vd-tabs .ref { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-fade); padding-right: 4px; } .vd .vd-pane[hidden] { display: none; } /* summary rows */ .vd .srow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dotted var(--hairline); font-size: 13px; } .vd .srow .lab { color: var(--ink-dim); font-weight: 500; } .vd .srow .lab .ref { font-size: 10px; color: var(--ink-fade); letter-spacing: 0.04em; margin-left: 4px; } .vd .srow .val { font-weight: 700; white-space: nowrap; } .vd .srow .val em { font-style: normal; color: var(--ink-fade); font-weight: 600; font-size: 0.84em; margin-left: 2px; } .vd .srow.sep { border-top: 1px solid var(--hairline); margin-top: 4px; } .vd .srow.gov { border-bottom: none; } .vd .srow.gov .val { color: var(--copper); font-size: 12px; } /* utilisation */ .vd .vd-util { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; } .vd .vd-util .uhead { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-fade); } .vd .urow .utop { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; } .vd .urow .ul { color: var(--ink-dim); font-weight: 600; } .vd .urow .uv { font-weight: 700; } .vd .urow .uv .um { color: var(--ink-fade); font-weight: 600; } .vd .ubar { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; } .vd .ubar .ufill { display: block; height: 100%; border-radius: 99px; background: var(--copper); transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; } .vd .ubar .ufill.over { background: var(--fail); } /* compliance reasons */ .vd .creason { padding: 8px 0; border-bottom: 1px dotted var(--hairline); } .vd .creason:last-child { border-bottom: none; } .vd .creason .ctag { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .vd .creason.pass .ctag { color: var(--pass); } .vd .creason.warn .ctag { color: var(--copper); } .vd .creason.fail .ctag { color: var(--fail); } .vd .creason .cmsg { margin-top: 4px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; } /* insight line */ .vd .vd-insight { border-left: 2px solid var(--copper); background: var(--soft); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 14px; line-height: 1.5; } .vd .vd-insight code { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* comparison + revision tables */ .vd table.vd-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .vd table.vd-tbl th { text-align: right; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-fade); padding: 6px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; } .vd table.vd-tbl th:first-child, .vd table.vd-tbl td:first-child { text-align: left; } .vd table.vd-tbl td { padding: 7px 10px; border-bottom: 1px dotted var(--hairline); text-align: right; white-space: nowrap; } .vd table.vd-tbl tr:last-child td { border-bottom: none; } .vd table.vd-tbl tbody tr.sel { background: rgba(234,106,58,0.09); } .vd table.vd-tbl tbody tr.sel td { font-weight: 700; } .vd .st-pass { color: var(--pass); font-weight: 700; } .vd .st-fail { color: var(--fail); font-weight: 700; } /* document section */ .vd .vd-docgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 760px) { .vd .vd-docgrid { grid-template-columns: 1fr; } } .vd .doc-h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 12px; } /* revision table */ .vd .rev-input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); width: 100%; padding: 4px 2px; border-bottom: 1px solid transparent; } .vd .rev-input:focus { border-bottom-color: var(--copper); } .vd table.vd-tbl td.del-col { width: 28px; text-align: center; padding: 6px 4px; } .vd .del-btn { border: none; background: none; color: var(--ink-fade); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 5px; } .vd .del-btn:hover { color: var(--fail); background: var(--soft); } .vd tr.add-row .rev-input { color: var(--ink-fade); } .vd .rev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .vd .add-btn { border: 1px dashed var(--hairline); background: none; color: var(--ink-dim); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; transition: all .15s; } .vd .add-btn:hover { border-color: var(--copper); color: var(--copper); } .vd .rev-foot .stamp-info { font-size: 11px; color: var(--ink-fade); } .vd .rev-foot code, .vd .vd-exports code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-dim); } /* notes + refs */ .vd .vd-notes ol { margin: 0; padding-left: 18px; } .vd .vd-notes li { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; padding: 3px 0; outline: none; } .vd .vd-notes li:focus { color: var(--ink); } .vd .vd-refs ul { margin: 0; padding: 0; list-style: none; } .vd .vd-refs li { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; padding: 4px 0; border-bottom: 1px dotted var(--hairline); } .vd .vd-refs li:last-child { border-bottom: none; } /* title-block */ .vd .vd-tb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; } .vd .tb-cell { background: var(--display); padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; min-height: 46px; } .vd .tb-cell.full { grid-column: 1 / -1; } .vd .tb-cell.brand { grid-column: 1 / -1; background: #1a1a1e; } .vd .tb-cell .k { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-fade); } .vd .tb-cell .v { font-size: 13px; font-weight: 700; color: var(--ink); } .vd .tb-cell.brand .v { color: #fff; } .vd .tb-cell.brand .k { color: var(--copper); } .vd .tb-cell input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); width: 100%; padding: 0; border-bottom: 1px solid transparent; } .vd .tb-cell input:focus { border-bottom-color: var(--copper); } /* export bar */ .vd .vd-exports { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: var(--gap); padding: 14px 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--on-dark-line); border-radius: 12px; flex-wrap: wrap; } .vd .vd-exports .meta { font-size: 11px; color: var(--on-dark-dim); } .vd .vd-exports .xb { display: flex; align-items: center; gap: 8px; } .vd .vd-exports .xlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-dim); margin-right: 4px; } .vd .vd-exports a { color: var(--on-dark); text-decoration: none; border: 1px solid var(--on-dark-line); border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; transition: all .15s; } .vd .vd-exports a:hover { border-color: var(--copper); color: var(--copper); } @media (max-width: 900px) { .vd .vd-cards { grid-template-columns: 1fr; } .vd .vd-hero { flex-direction: column; align-items: stretch; } .vd .vd-hero-main { border-right: none; padding-right: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 18px; } }