/* =========================================================================== DIY Calculator — assets/style.css Mobile-first. No external fonts, no CDN, no images. Works offline and can be dropped straight onto nginx. --------------------------------------------------------------------------- THEME QUICK-START — the whole look is driven by ONE token block (:root) --------------------------------------------------------------------------- Every colour, spacing step, radius, type size and shadow in this file comes from a variable in section 1. There is no raw colour below the token/preset blocks, so re-skinning the site means editing a handful of variables rather than hunting through 500 lines of rules. 1) SWITCH PALETTE — set one attribute on : "CyberAware" (default, no attribute) "Orange Trade" orange-led, DIY / trade "Blue Trust" blue-led, corporate "High Contrast" accessibility palette Nothing else needs to change: each preset block simply re-declares the colour tokens, and everything downstream follows. 2) CHANGE ONE COLOUR — edit that single variable in the relevant palette: :root { --color-primary: #0056d2; } (the default brand blue) [data-theme="blue-trust"] { --color-primary: #1d4ed8; } (that preset's real value) 3) CHANGE SPACING / RADII / TYPE / SHADOWS — edit the scale tokens in section 1. Spacing tokens are named after their value in rem x 100, so --space-150 is 1.5rem (24px at the default 16px root size); type tokens use the same rule, so --text-875 is .875rem. The default palette is the CyberAware UK design language: brand blue #0056d2 on white cards over a #f5f5f7 page, with the signature DARK header and footer bands (--color-band #0b1220) and light-on-dark navigation. Cyan #00c8ff is decorative only (--color-accent-cyan) and paints the brand dot and the nav hover — never a focus ring or body text. The focus ring uses the brand blue #0056d2, because cyan measures only ~1.8:1 on this palette's light surfaces and misses the 3:1 non-text requirement. Contrast: body text, text-on-primary and the focus ring meet WCAG AA (4.5:1 text, 3:1 non-text) in all four palettes — measured with tools/check-contrast.js, never eyeballed. Contents 1. Tokens (single source of truth) 1b. Palette presets (one attribute) 2. Reset and base 3. Layout 4. Header / footer 5. Cards and grids 6. Forms 7. Results 8. Shopping list 9. Price-check placeholder 10. SEO copy, FAQ, related links 11. Utilities and print 12. Diagrams (the two-tier inline SVG on every calculator page) =========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ /* The ONLY place raw values live. Change a value here and the whole site moves. Default palette: "CyberAware" — the CyberAware UK design language. surfaces/text bg #f5f5f7 · surface #ffffff · text #1e232b text-muted #5a6b85 · text-subtle #5f6f88 border #d7dce2 · border-strong #b9c1cb · border-soft #e2e8f0 brand primary #0056d2 · primary-strong #0046a8 primary-soft #e8f0fe · primary-contrast #ffffff accent (focus ring) #0056d2 · accent-cyan (decorative) #00c8ff states success #22c55e/#e8f5e9 warning #f59e0b/#fff8e1, text #8a6d00 error #ef4444/#fef2f2, text #b91c1c dark bands band #0b1220 · band-2 #101b33 · band-3 #16233c band-text #ffffff · band-text-muted #c7d2e0 The cyan is decorative. At ~1.80:1 on #f5f5f7 it fails the 3:1 non-text requirement, so --color-accent (which paints the focus ring) is the brand blue #0056d2 instead — 5.91:1 on the page background. */ :root { /* --- Surfaces & text ---------------------------------------------------- */ --color-bg: #f5f5f7; /* page background (--secondary) */ --color-surface: #ffffff; /* cards, inputs, hero (--card) */ --color-text: #1e232b; /* body copy (--text) */ --color-text-muted: #5a6b85; /* secondary copy / labels (--text-muted) */ --color-text-subtle: #5f6f88; /* captions, hints — darkened to clear AA */ --color-border: #d7dce2; /* hairlines, dividers (--border) */ --color-border-strong: #b9c1cb; /* input edges, table heads (--border-dark) */ --color-border-soft: #e2e8f0; /* card edges (--border-light) */ /* --- Dark bands (CyberAware header / footer signature) ------------------- */ --color-band: #0b1220; /* header + footer band (--dark) */ --color-band-2: #101b33; /* deepest band (--dark2) */ --color-band-3: #16233c; /* band edges, raised dark (--dark3) */ --color-band-text: #ffffff; /* copy on a dark band (18.72:1) */ --color-band-text-muted: #c7d2e0; /* nav links on a dark band (12.23:1) */ /* --- Brand -------------------------------------------------------------- */ --color-primary: #0056d2; /* buttons, rims, accent marks (--primary) */ --color-primary-strong: #0046a8; /* hover/pressed, headings (--primary-hover) */ --color-primary-soft: #e8f0fe; /* tinted panels, badges (--primary-light) */ --color-primary-contrast: #ffffff; /* text ON a primary surface */ --color-accent: #0056d2; /* focus ring / interactive highlight */ --color-accent-cyan: #00c8ff; /* decorative highlights ONLY (brand dot, */ /* nav hover) — fails 3:1 on light surfaces */ /* --- States ------------------------------------------------------------- */ --color-success: #22c55e; --color-success-soft: #e8f5e9; --color-warning: #f59e0b; /* amber fill / accent bar (--warning) */ --color-warning-soft: #fff8e1; /* (--warning-bg) */ --color-warning-text: #8a6d00; /* warning text on its tint, 4.63:1 */ --color-error: #ef4444; /* red fill / ring (--danger) */ --color-error-soft: #fef2f2; /* (--danger-light) */ --color-error-text: #b91c1c; /* error text on its tint, 5.91:1 */ /* --- Spacing scale ------------------------------------------------------ */ /* Named after the value in rem x 100: --space-150 = 1.5rem = 24px. */ --space-05: .05rem; --space-10: .1rem; --space-15: .15rem; --space-20: .2rem; --space-25: .25rem; --space-35: .35rem; --space-40: .4rem; --space-45: .45rem; --space-50: .5rem; --space-55: .55rem; --space-60: .6rem; --space-70: .7rem; --space-75: .75rem; --space-85: .85rem; --space-90: .9rem; --space-100: 1rem; --space-125: 1.25rem; --space-150: 1.5rem; --space-175: 1.75rem; --space-200: 2rem; --space-300: 3rem; --space-400: 4rem; /* --- Radii -------------------------------------------------------------- */ /* CyberAware's 12px / 16px rungs have no consumer in this stylesheet, so they are not declared: every token in this file is used by something. */ --radius-xs: 8px; /* focus ring, inline tags (--radius-sm) */ --radius-sm: 8px; /* controls, buttons (--radius-sm) */ --radius-md: 14px; /* cards and panels (--radius) */ --radius-pill: 999px; /* badges, chips (--radius-full) */ /* --- Typography --------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --leading-display: 1.1; --leading-heading: 1.25; --leading-body: 1.6; /* Type scale — named after the value in rem x 100: --text-875 = .875rem. */ --text-75: .75rem; --text-78: .78rem; --text-80: .8rem; --text-85: .85rem; --text-875: .875rem; --text-90: .9rem; --text-925: .925rem; --text-95: .95rem; --text-100: 1rem; --text-105: 1.05rem; --text-108: 1.08rem; --text-110: 1.1rem; --text-130: 1.3rem; --text-165: 1.65rem; --text-200: 2rem; --text-210: 2.1rem; /* --- Shadows ------------------------------------------------------------ */ --shadow-1: 0 1px 3px rgba(0, 0, 0, .06); /* cards at rest (--shadow-sm) */ --shadow-2: 0 2px 8px rgba(0, 0, 0, .08); /* hover lift (--shadow-md) */ --shadow-3: 0 4px 20px rgba(0, 0, 0, .08); /* reserved for overlays */ --shadow-card: var(--shadow-1); /* cards sit at --shadow-1 */ /* --- Transitions -------------------------------------------------------- */ --transition-fast: .15s ease; --transition: .2s ease; --transition-slow: .3s ease; /* --- Sizing ------------------------------------------------------------- */ --control-max: 22rem; /* inputs and buttons */ --control-height: 2.75rem; /* comfortable touch target */ --measure: 68ch; /* readable prose width */ --wrap: 1120px; /* page container */ /* --- Print -------------------------------------------------------------- */ --color-print-bg: #ffffff; /* was #fff */ --color-print-text: #000000; /* was #000 */ --color-print-border: #999999; /* was #999 */ } /* 1b. Palette presets ------------------------------------------------------ */ /* Swap a palette by adding ONE attribute to ; see the quick-start above. Each block only re-declares colour tokens — spacing, type and radii are shared, so the geometry never shifts when the palette changes. NAME: "Orange Trade" — orange-led, DIY / building-trade feel. Hex bg #faf6f1 · surface #ffffff · text #211a14 · muted #574a3f · subtle #6d5f52 · border #e4d9cd / #c3b5a5 / #ece3d9 primary #c2410c · strong #9a3412 · soft #fdece2 · contrast #ffffff accent #0f6b5c · accent-cyan (decorative) #ffc978 success #146c43/#e8f4ec · warning #7a4a00/#fdf3e0 · error #a1231b/#fdecea bands #1a1310 / #231a14 / #2c2118 · band text #ffffff / muted #e0d3c4 NOTE distinctive burnt orange chosen for accessibility and character; it is deliberately NOT any UK retailer's brand shade, so the site can never be mistaken for an affiliated store. */ [data-theme="orange-trade"] { --color-bg: #faf6f1; --color-surface: #ffffff; --color-text: #211a14; --color-text-muted: #574a3f; --color-text-subtle: #6d5f52; --color-border: #e4d9cd; --color-border-strong: #c3b5a5; --color-border-soft: #ece3d9; --color-band: #1a1310; --color-band-2: #231a14; --color-band-3: #2c2118; --color-band-text: #ffffff; --color-band-text-muted: #e0d3c4; --color-primary: #c2410c; --color-primary-strong: #9a3412; --color-primary-soft: #fdece2; --color-primary-contrast: #ffffff; --color-accent: #0f6b5c; --color-accent-cyan: #ffc978; --color-success: #146c43; --color-success-soft: #e8f4ec; --color-warning: #7a4a00; --color-warning-soft: #fdf3e0; --color-warning-text: #7a4a00; --color-error: #a1231b; --color-error-soft: #fdecea; --color-error-text: #a1231b; } /* NAME: "Blue Trust" — blue-led, calmer and more corporate. Hex bg #f2f5fa · surface #ffffff · text #16202c · muted #46566a · subtle #5a6b80 · border #d5dde8 / #b3c0d1 / #e4eaf2 primary #1d4ed8 · strong #1e3a8a · soft #e8eefb · contrast #ffffff accent #b45309 · accent-cyan (decorative) #00c8ff success #146c43/#e8f4ec · warning #7a4a00/#fdf3e0 · error #a1231b/#fdecea bands #0b1220 / #101b33 / #16233c · band text #ffffff / muted #c7d2e0 */ [data-theme="blue-trust"] { --color-bg: #f2f5fa; --color-surface: #ffffff; --color-text: #16202c; --color-text-muted: #46566a; --color-text-subtle: #5a6b80; --color-border: #d5dde8; --color-border-strong: #b3c0d1; --color-border-soft: #e4eaf2; --color-band: #0b1220; --color-band-2: #101b33; --color-band-3: #16233c; --color-band-text: #ffffff; --color-band-text-muted: #c7d2e0; --color-primary: #1d4ed8; --color-primary-strong: #1e3a8a; --color-primary-soft: #e8eefb; --color-primary-contrast: #ffffff; --color-accent: #b45309; --color-accent-cyan: #00c8ff; --color-success: #146c43; --color-success-soft: #e8f4ec; --color-warning: #7a4a00; --color-warning-soft: #fdf3e0; --color-warning-text: #7a4a00; --color-error: #a1231b; --color-error-soft: #fdecea; --color-error-text: #a1231b; } /* NAME: "High Contrast" — accessibility-first; pure white paper, near-black text, strong borders and a high-contrast focus ring. Hex bg #ffffff · surface #ffffff · text #0b0b0b · muted #3d3d3d · subtle #5a5a5a · border #767676 / #4a4a4a / #767676 primary #0a3d62 · strong #062b46 · soft #eef4fa · contrast #ffffff accent #5b21b6 · accent-cyan (decorative) #00c8ff success #146c43/#e8f4ec · warning #7a4a00/#fdf3e0 · error #a1231b/#fdecea bands #000000 (flat) · band text #ffffff / muted #ffffff */ [data-theme="high-contrast"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-text: #0b0b0b; --color-text-muted: #3d3d3d; --color-text-subtle: #5a5a5a; --color-border: #767676; --color-border-strong: #4a4a4a; --color-border-soft: #767676; --color-band: #000000; --color-band-2: #000000; --color-band-3: #000000; --color-band-text: #ffffff; --color-band-text-muted: #ffffff; --color-primary: #0a3d62; --color-primary-strong: #062b46; --color-primary-soft: #eef4fa; --color-primary-contrast: #ffffff; --color-accent: #5b21b6; --color-accent-cyan: #00c8ff; --color-success: #146c43; --color-success-soft: #e8f4ec; --color-warning: #7a4a00; --color-warning-soft: #fdf3e0; --color-warning-text: #7a4a00; --color-error: #a1231b; --color-error-soft: #fdecea; --color-error-text: #a1231b; } /* 2. Reset and base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-100); line-height: var(--leading-body); color: var(--color-text); background: var(--color-bg); overflow-wrap: break-word; } h1, h2, h3, h4 { line-height: var(--leading-heading); margin: 0 0 .5em; font-weight: 700; } h1 { font-size: var(--text-165); letter-spacing: -.01em; } h2 { font-size: var(--text-130); } h3 { font-size: var(--text-108); } p, ul, ol, dl { margin: 0 0 1em; } p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; } ul, ol { padding-left: var(--space-125); } li { margin-bottom: .35em; } a { color: var(--color-primary-strong); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-primary); } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-xs); } small, .small { font-size: var(--text-875); color: var(--color-text-muted); } /* 3. Layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-100); } main { padding: var(--space-150) 0 var(--space-300); } .prose { max-width: var(--measure); } .prose h2 { margin-top: var(--space-175); } .prose h3 { margin-top: var(--space-125); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary-strong); color: var(--color-primary-contrast); padding: var(--space-60) var(--space-100); z-index: 10; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; color: var(--color-primary-contrast); } /* 4. Header / footer ------------------------------------------------------ */ /* Dark CyberAware bands: the header and footer are deep navy (--color-band #0b1220) with white copy and light-on-dark nav links. Restyled through the tokens only — no markup, class-name or geometry change. */ .site-header { background: var(--color-band); border-bottom: 1px solid var(--color-band-3); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-50) var(--space-100); padding-top: var(--space-125); padding-bottom: var(--space-125); } .brand { font-weight: 800; font-size: var(--text-130); color: var(--color-band-text); text-decoration: none; letter-spacing: -.01em; } .brand:hover { color: var(--color-accent-cyan); } .brand span { color: var(--color-accent-cyan); } .site-nav { width: 100%; } .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-35) var(--space-90); list-style: none; margin: 0; padding: 0; font-size: var(--text-100); } .site-nav li { margin: 0; } .site-nav a { text-decoration: none; color: var(--color-band-text-muted); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent-cyan); text-decoration: underline; } .site-footer { background: var(--color-band); border-top: 1px solid var(--color-band-3); padding: var(--space-150) 0; font-size: var(--text-875); color: var(--color-band-text-muted); } /* .site-footer p outranks the global `small' muted grey, so the footer's small print stays legible on the dark band (12.23:1) without a markup change. */ .site-footer p { margin-bottom: .5em; color: var(--color-band-text-muted); } .footer-nav { margin: var(--space-85) 0 var(--space-75); } .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-35) var(--space-90); list-style: none; margin: 0; padding: 0; } .footer-nav li { margin: 0; } .footer-nav a { color: var(--color-band-text-muted); } /* 5. Cards and grids ------------------------------------------------------ */ .card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-100); margin-bottom: var(--space-125); transition: box-shadow var(--transition), border-color var(--transition); } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-100); list-style: none; margin: 0; padding: 0; } .card-grid li { margin: 0; } .calc-card { display: block; height: 100%; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-100); text-decoration: none; color: inherit; transition: box-shadow var(--transition), border-color var(--transition); } .calc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .calc-card h3 { margin-bottom: .25em; color: var(--color-primary-strong); } .calc-card p { margin: 0; font-size: var(--text-90); color: var(--color-text-muted); } .calc-card .tag { display: inline-block; font-size: var(--text-75); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-strong); background: var(--color-primary-soft); border-radius: var(--radius-pill); padding: var(--space-10) var(--space-50); margin-bottom: var(--space-50); } .hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-150) 0 var(--space-125); } .hero h1 { margin-bottom: .35em; } .hero p { max-width: var(--measure); color: var(--color-text-muted); margin-bottom: 0; } .breadcrumb { font-size: var(--text-85); color: var(--color-text-subtle); margin-bottom: var(--space-50); } .breadcrumb a { color: var(--color-text-subtle); } /* 6. Forms ---------------------------------------------------------------- */ fieldset { border: 0; padding: 0; margin: 0 0 var(--space-100); } legend { font-weight: 700; font-size: var(--text-100); padding: 0; margin-bottom: var(--space-50); } .field { margin-bottom: var(--space-90); } .field label, .field .label { display: block; font-weight: 600; font-size: var(--text-95); margin-bottom: var(--space-25); } .field .hint { display: block; font-size: var(--text-80); color: var(--color-text-subtle); font-weight: 400; margin-top: var(--space-15); } input[type="text"], input[type="number"], select { width: 100%; max-width: var(--control-max); padding: var(--space-55) var(--space-60); font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); min-height: var(--control-height); /* comfortable touch target */ } input:invalid { border-color: var(--color-border-strong); } /* we validate ourselves, not the browser */ .check { display: flex; align-items: flex-start; gap: var(--space-50); font-weight: 500; font-size: var(--text-95); margin-bottom: var(--space-50); } .check input { width: var(--space-125); height: var(--space-125); margin: var(--space-15) 0 0; min-height: 0; flex: 0 0 auto; } .check label { font-weight: 500; } .tin-grid { display: flex; flex-wrap: wrap; gap: var(--space-35) var(--space-100); } .form-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-100); } .btn { display: inline-block; width: 100%; max-width: var(--control-max); padding: var(--space-70) var(--space-125); font: inherit; font-weight: 600; color: var(--color-primary-contrast); background: var(--color-primary); border: 1px solid var(--color-primary-strong); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--control-height); /* 44px comfortable touch target */ transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn:hover { background: var(--color-primary-strong); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn:active { transform: translateY(1px); } .error { background: var(--color-error-soft); border: 1px solid var(--color-error); color: var(--color-error-text); border-radius: var(--radius-sm); padding: var(--space-60) var(--space-75); font-size: var(--text-95); font-weight: 600; margin: 0 0 var(--space-75); } /* 7. Results -------------------------------------------------------------- */ .results-panel { border-left: 4px solid var(--color-primary); } .headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-35) var(--space-60); padding-bottom: var(--space-75); margin-bottom: var(--space-75); border-bottom: 1px solid var(--color-border); } .headline-label { display: block; width: 100%; font-size: var(--text-90); font-weight: 600; color: var(--color-text-muted); } .headline-value { font-size: var(--text-210); font-weight: 800; line-height: var(--leading-display); color: var(--color-primary-strong); letter-spacing: -.02em; } .headline-unit { font-size: var(--text-100); color: var(--color-text-muted); } .stats { margin: 0; } .stat { display: flex; flex-wrap: wrap; gap: 0 var(--space-50); justify-content: space-between; padding: var(--space-45) 0; border-bottom: 1px solid var(--color-border); } .stat:last-child { border-bottom: 0; } .stat dt { font-size: var(--text-925); color: var(--color-text-muted); } .stat dd { margin: 0; font-weight: 700; text-align: right; } .stat-hint { display: block; width: 100%; font-size: var(--text-80); font-weight: 400; color: var(--color-text-subtle); text-align: right; } .placeholder { color: var(--color-text-subtle); margin: 0; } .note { margin-top: var(--space-75); padding: var(--space-60) var(--space-75); background: var(--color-warning-soft); border-left: 3px solid var(--color-warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-875); color: var(--color-text); } /* 8. Shopping list -------------------------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: var(--text-95); } caption { text-align: left; font-size: var(--text-875); color: var(--color-text-subtle); padding-bottom: var(--space-50); } th, td { text-align: left; padding: var(--space-55) var(--space-50); border-bottom: 1px solid var(--color-border); vertical-align: top; } thead th { font-size: var(--text-80); text-transform: uppercase; letter-spacing: .04em; color: var(--color-band-text); background: var(--color-band); border-bottom: 2px solid var(--color-band-3); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } td:nth-child(2), th:nth-child(2) { font-weight: 700; white-space: nowrap; } td:nth-child(3), th:nth-child(3) { color: var(--color-text-muted); font-size: var(--text-875); } /* 9. Price-check placeholder --------------------------------------------- */ .price-check { background: var(--color-primary-soft); border: 1px dashed var(--color-primary); border-radius: var(--radius-md); padding: var(--space-100); margin-bottom: var(--space-125); } .price-check h2, .price-check h3 { margin-bottom: .35em; font-size: var(--text-105); } .price-check p { font-size: var(--text-925); } .price-check ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-50); } .price-check li { margin: 0; } .merchant-placeholder { display: inline-block; padding: var(--space-35) var(--space-70); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--text-85); color: var(--color-text-subtle); } .todo { display: inline-block; font-size: var(--text-78); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--color-warning-text); background: var(--color-warning-soft); border-radius: var(--radius-xs); padding: var(--space-05) var(--space-35); } /* 10. SEO copy, FAQ, related links --------------------------------------- */ .faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-60) 0; } .faq details:last-of-type { border-bottom: 0; } .faq summary { cursor: pointer; font-weight: 700; font-size: var(--text-100); padding: var(--space-20) 0; } .faq summary::marker { color: var(--color-primary); } .faq details[open] summary { color: var(--color-primary-strong); margin-bottom: var(--space-40); } .faq p:last-child { margin-bottom: var(--space-25); } .related ul { list-style: none; padding: 0; } .related li { margin-bottom: var(--space-50); } .related a { font-weight: 600; } .related span { display: block; font-size: var(--text-85); color: var(--color-text-subtle); } /* 11. Utilities and print ------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* Wider screens: forms go two-up, then the header nav sits inline ---------- */ @media (min-width: 34em) { h1 { font-size: var(--text-200); } .card { padding: var(--space-125); } .card-grid { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: repeat(2, 1fr); } .btn { width: auto; } } @media (min-width: 52em) { main { padding: var(--space-200) 0 var(--space-400); } .site-header .wrap { flex-wrap: nowrap; } .site-nav { width: auto; margin-left: auto; } .card-grid { grid-template-columns: repeat(3, 1fr); } .col-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-125); align-items: start; } .col-split > * { margin-bottom: var(--space-125); } .stat dt { flex: 0 0 auto; } } /* Stacked shopping list on very small screens ----------------------------- */ @media (max-width: 26em) { thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } table, tbody, tr, td { display: block; width: 100%; } tr { padding: var(--space-50) 0; border-bottom: 1px solid var(--color-border); } tbody tr:last-child { border-bottom: 0; } td { border: 0; padding: var(--space-10) 0; } td:nth-child(2), td:nth-child(3) { white-space: normal; } td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--color-text-muted); font-size: var(--text-85); } td:nth-child(1) { font-weight: 700; } td:nth-child(1)::before { content: ""; } } /* 12. Diagrams ------------------------------------------------------------- */ /* Every calculator page carries one inline with two tiers: a hand-written, labelled .dgm-base that renders with JavaScript off, and a .dgm-live group that calc.js redraws from the real inputs. Colours come from the tokens above — if you re-skin the site, these follow. The svg carries data-diagram-state (empty | error | ready): once the live layer has drawn the real job, the static base steps aside. */ .diagram-figure { margin: 0; margin-top: var(--space-175); } .diagram-figure figcaption { margin-top: var(--space-75); font-size: var(--text-85); color: var(--color-text-subtle); line-height: var(--leading-body); } .diagram { display: block; width: 100%; height: auto; font-family: var(--font-sans); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); } .diagram[data-diagram-state="ready"] .dgm-base { display: none; } /* diagram type */ /* Sized in viewBox units, so a 360 px phone renders these at 0.51x: the dimension values come out at 12.3 px and the layer labels at 10.2 px, measured in headless chromium rather than eyeballed. */ .diagram .dgm-title { font-size: 26px; font-weight: 700; fill: var(--color-text); } .diagram .dgm-text { font-size: 19px; fill: var(--color-text-muted); } .diagram .dgm-dimtext { font-size: 24px; font-weight: 600; fill: var(--color-text); } .diagram .dgm-caption { font-size: 18px; fill: var(--color-text-muted); } .diagram .dgm-strong { font-size: 20px; font-weight: 700; fill: var(--color-primary-strong); } .diagram .dgm-note { font-size: 17px; fill: var(--color-text-subtle); } .diagram .dgm-layerlabel { font-size: 20px; font-weight: 600; fill: var(--color-text); } .diagram .dgm-badge-text { font-size: 22px; font-weight: 700; fill: var(--color-primary-strong); } .diagram .dgm-state { font-size: 22px; fill: var(--color-text-muted); } .diagram .dgm-state-error { font-weight: 700; fill: var(--color-error-text); } .diagram .dgm-cutlabel { font-size: 19px; font-weight: 600; fill: var(--color-error-text); } .diagram .dgm-ruglabel { font-size: 18px; font-weight: 600; fill: var(--color-text); } /* diagram shapes — every colour a token, no literals */ .diagram .dgm-shape { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2; } .diagram .dgm-fill { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1.5; } .diagram .dgm-ceiling { fill: var(--color-border-soft); stroke: none; } .diagram .dgm-layer { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2; } .diagram .dgm-layer-alt { fill: var(--color-warning-soft); stroke: var(--color-warning-text); stroke-width: 2; } .diagram .dgm-layer-gravel { fill: var(--color-border-soft); stroke: var(--color-text-subtle); stroke-width: 2; } .diagram .dgm-layer-sub { fill: var(--color-border); stroke: var(--color-text-muted); stroke-width: 2; } .diagram .dgm-layer-soil { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2; } .diagram .dgm-layer-slab { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2; } .diagram .dgm-wall { stroke: var(--color-primary); stroke-width: 7; fill: none; stroke-linecap: round; } .diagram .dgm-rule { stroke: var(--color-primary); stroke-width: 1; opacity: .4; fill: none; } .diagram .dgm-joist { stroke: var(--color-primary-strong); stroke-width: 2; fill: none; } .diagram .dgm-course { stroke: var(--color-primary); stroke-width: 1; opacity: .45; fill: none; } .diagram .dgm-perp { opacity: .22; } .diagram .dgm-module { fill: var(--color-warning-soft); stroke: var(--color-warning-text); stroke-width: 1.5; } .diagram .dgm-post { fill: var(--color-text); stroke: none; } .diagram .dgm-gravelboard { stroke: var(--color-text-subtle); stroke-width: 4; fill: none; } .diagram .dgm-dimline { stroke: var(--color-primary-strong); stroke-width: 1.4; fill: none; } .diagram .dgm-tick { stroke: var(--color-primary-strong); stroke-width: 1.4; fill: none; } .diagram .dgm-ground { stroke: var(--color-border-strong); stroke-width: 2; fill: none; } .diagram .dgm-membrane { stroke: var(--color-text-subtle); stroke-width: 1.6; fill: none; stroke-dasharray: 7 5; } .diagram .dgm-cut { fill: var(--color-error-soft); stroke: var(--color-error); stroke-width: 2; stroke-dasharray: 6 4; } .diagram .dgm-seam { stroke: var(--color-error); stroke-width: 2.5; fill: none; stroke-dasharray: 9 6; } .diagram .dgm-strip { fill: none; stroke: var(--color-border); stroke-width: 1; } .diagram .dgm-paid { fill: var(--color-primary-soft); stroke: var(--color-border); stroke-width: 1.5; } .diagram .dgm-offcut { fill: var(--color-warning-soft); stroke: var(--color-warning-text); stroke-width: 1.5; stroke-dasharray: 6 4; } .diagram .dgm-rug { fill: var(--color-border-soft); stroke: var(--color-text-muted); stroke-width: 2; stroke-dasharray: 8 5; } .diagram .dgm-bead { fill: none; stroke: var(--color-primary-strong); stroke-width: 1.6; stroke-dasharray: 6 4; } .diagram .dgm-piece { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 2; } .diagram .dgm-mitre { stroke: var(--color-error-text); stroke-width: 2.5; fill: none; stroke-dasharray: 8 4; } .diagram .dgm-butt { stroke-dasharray: none; } .diagram .dgm-cutout { fill: var(--color-surface); stroke: var(--color-text-subtle); stroke-width: 1.8; } .diagram .dgm-upstand { stroke: var(--color-primary-strong); stroke-width: 5; fill: none; stroke-dasharray: 12 5; } .diagram .dgm-badge-box { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; } @media print { .diagram { border-color: var(--color-print-border); } } @media print { body { background: var(--color-print-bg); } .site-header, .site-footer, .price-check, .btn, .related { display: none; } .card { box-shadow: none; border-color: var(--color-print-border); page-break-inside: avoid; } a { color: var(--color-print-text); } }