/* Home Renovation Calcs — trade-counter design system. Grounded in what this category actually looks like rather than personal taste: Home Depot #F96302, B&Q #FF6600, Lowe's navy #012169, Screwfix blue + hi-vis yellow. Orange is the category signal; navy carries the structure; hi-vis is the warning colour on every real site sign. Warm kraft paper instead of cool grey, because this world is timber and cardboard, not software. The graph-paper ground is drawn in CSS — no image, no request — and is the one motif that belongs specifically to a *calculator* site rather than a generic merchant. Fonts: Archivo (display) + Source Sans 3 (body) + Roboto Mono (figures), all SIL Open Font License via Google Fonts. Icons: Lucide, ISC licence, inlined as SVG. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&family=Roboto+Mono:wght@400;500;700&display=swap'); :root{ --trade:#E8590C; /* the category colour, distinct from any one brand */ --trade-dark:#C2410C; --trade-soft:#FDEBDD; --navy:#10243E; --navy-2:#1C3A5E; --hivis:#FFC53D; --hivis-soft:#FFF6DF; --paper:#FBF7F0; /* warm kraft, not cool grey */ --card:#FFFFFF; --sunk:#F2EDE4; --line:#DED5C7; --line-2:#EBE4D8; --ink:#16202B; --ink-2:#4A5866; --ink-3:#5F6C7B; /* was #7C8896 — only 3.6:1 on white, and it carries real sentences */ --good:#1B7A4B; --radius:10px; --shadow:0 1px 2px rgba(22,32,43,.06), 0 10px 28px -20px rgba(22,32,43,.35); --accent:var(--trade); /* per-tool override, set on */ --on-trade:#2A1206; /* dark ink on orange: 7:1, where white was only 3.58:1 */ } /* Each calculator gets its own accent so fourteen pages do not read as one template with the words swapped. Colours chosen from the material itself. */ body[data-tool="paint"] { --accent:#1F7A8C; } /* paint tin teal */ body[data-tool="flooring"] { --accent:#A0672B; } /* oak */ body[data-tool="tile"] { --accent:#2E6F7E; } /* glazed ceramic */ body[data-tool="concrete"] { --accent:#5A6570; } /* wet concrete */ body[data-tool="mulch"] { --accent:#5B7A2E; } /* bark */ body[data-tool="gravel"] { --accent:#7A6A56; } /* aggregate */ body[data-tool="wallpaper"] { --accent:#8A4F7D; } /* pattern book */ body[data-tool="insulation"] { --accent:#C2410C; } /* mineral wool */ body[data-tool="decking"] { --accent:#8A5A2B; } /* softwood */ body[data-tool="roofing"] { --accent:#3E4A5B; } /* slate */ body[data-tool="drywall"] { --accent:#6B7280; } /* plasterboard */ body[data-tool="fence"] { --accent:#6B7F3A; } /* treated timber */ body[data-tool="stairs"] { --accent:#9A6A3A; } /* stair pine */ body[data-tool="brick"] { --accent:#A8432A; } /* clay brick */ /* Accents are picked to look right as BLOCKS of colour. As TEXT on paper they are too light — trade orange is only 3.35:1 on white. Links and figures use this darkened variant so the palette survives and the text passes WCAG AA. It lives on `body`, not `:root`, so it re-resolves against the per-tool accent above rather than freezing at the root value. */ body { --accent-ink:color-mix(in srgb, var(--accent) 70%, #000); } @media (prefers-color-scheme:dark){ :root{ --paper:#12161B; --card:#1A2027; --sunk:#212831; --line:#333C46; --line-2:#28303A; --ink:#EEF1F4; --ink-2:#AEB9C4; --ink-3:#7E8996; --trade:#FF7A33; --trade-dark:#FF9052; --trade-soft:#31190D; --navy:#0B1620; --navy-2:#16283C; --hivis:#FFD262; --hivis-soft:#2E2510; --on-trade:#2A1206; /* dark ink on the lighter dark-mode orange */ --good:#4FBB86; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.9); } body[data-tool="paint"]{--accent:#4FB3C6} body[data-tool="flooring"]{--accent:#D19553} body[data-tool="tile"]{--accent:#5FA8B8} body[data-tool="concrete"]{--accent:#94A0AC} body[data-tool="mulch"]{--accent:#9CBF63} body[data-tool="gravel"]{--accent:#B5A187} body[data-tool="wallpaper"]{--accent:#C286B5} body[data-tool="insulation"]{--accent:#FF8A4D} body[data-tool="decking"]{--accent:#C08B55} body[data-tool="roofing"]{--accent:#8595A8} body[data-tool="drywall"]{--accent:#9AA3AE} body[data-tool="fence"]{--accent:#A4BC6A} body[data-tool="stairs"]{--accent:#CFA06A} body[data-tool="brick"]{--accent:#DC7A5F} body{--accent-ink:var(--accent)} /* already light enough on a dark ground */ } *{box-sizing:border-box} body{ margin:0;background:var(--paper);color:var(--ink); font:17px/1.65 "Source Sans 3","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:1020px;margin:0 auto;padding:0 22px} h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance; font-family:Archivo,"Segoe UI",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em} h1{font-size:clamp(2rem,5vw,3.1rem)} h2{font-size:clamp(1.35rem,2.6vw,1.75rem)} h3{font-size:1.1rem;font-weight:700} p{margin:0} a{color:var(--accent-ink)} .mono{font-family:"Roboto Mono",Consolas,ui-monospace,monospace} /* ---------- header: navy bar, hi-vis rule ---------- */ .top{background:var(--navy);border-bottom:4px solid var(--trade)} .top .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap;padding:10px 22px} .logo{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;text-decoration:none; color:#fff;font-size:1.22rem;display:flex;align-items:center;gap:9px} .logo em{font-style:normal;color:var(--trade)} .logo svg{width:26px;height:26px;fill:var(--trade);flex:none} .nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap} .nav a{color:#C6D2DE;text-decoration:none;font-size:.9rem;font-weight:600; padding:7px 11px;border-radius:6px} .nav a:hover,.nav a:focus-visible{background:var(--navy-2);color:#fff} .nav a[aria-current="page"]{background:var(--trade);color:var(--on-trade)} /* ---------- hero on graph paper ---------- */ .hero{ background: linear-gradient(rgba(232,89,12,.055) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(90deg, rgba(232,89,12,.055) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(rgba(16,36,62,.08) 1px, transparent 1px) 0 0/110px 110px, linear-gradient(90deg, rgba(16,36,62,.08) 1px, transparent 1px) 0 0/110px 110px, var(--sunk); border-bottom:1px solid var(--line);padding:34px 0 30px; } .hero .kicker{font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin-bottom:11px; display:flex;align-items:center;gap:8px} .hero .kicker::before{content:"";width:26px;height:3px;background:var(--accent);border-radius:2px} .lede{color:var(--ink-2);max-width:64ch;margin-top:13px;font-size:1.06rem} main{padding:26px 0 10px} .stack{display:flex;flex-direction:column;gap:12px} section.block{padding:30px 0;border-top:2px solid var(--line-2);margin-top:30px} section.block h2{position:relative;padding-left:16px} section.block h2::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em; width:5px;border-radius:3px;background:var(--accent)} .prose{max-width:70ch;display:flex;flex-direction:column;gap:14px;margin-top:14px} .prose ul,.prose ol{padding-left:1.2em;margin:0} .prose li{margin-bottom:8px;color:var(--ink-2)} .prose li::marker{color:var(--accent)} /* ---------- calculator ---------- */ .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:18px; align-items:start;margin-top:22px} @media (max-width:860px){.calc{grid-template-columns:1fr}} .inputs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:20px;display:flex;flex-direction:column;gap:17px;box-shadow:var(--shadow)} .units{display:flex;border:2px solid var(--navy);border-radius:8px;overflow:hidden;width:fit-content} .units button{background:var(--card);color:var(--ink-2);border:0;padding:9px 20px;cursor:pointer; font:700 .86rem/1 "Source Sans 3",sans-serif} .units button.on{background:var(--navy);color:#fff} .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px} label{font-size:.82rem;color:var(--ink-2);display:block;margin-bottom:5px;font-weight:700} input[type=number],select{width:100%;padding:11px 12px;border:2px solid var(--line); border-radius:8px;background:var(--paper);color:var(--ink); font:600 16px/1.3 "Roboto Mono",Consolas,monospace} input:focus,select:focus{outline:0;border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} /* result panel — the loud part, as it is on every trade site */ .out{background:var(--card);border:2px solid var(--navy);border-radius:var(--radius); overflow:hidden;position:sticky;top:16px;box-shadow:var(--shadow)} .out header{background:var(--navy);color:#fff;padding:13px 18px; font:800 1rem/1.2 Archivo,sans-serif;letter-spacing:-.01em; display:flex;align-items:center;gap:9px} .out header::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--trade)} .hero-out{padding:20px 18px;background:var(--trade);color:var(--on-trade)} .hero-out .big{font:800 2.5rem/1 "Roboto Mono",monospace;letter-spacing:-.04em; font-variant-numeric:tabular-nums;display:block} .hero-out .cap{font-size:.84rem;margin-top:6px;display:block;opacity:.92;font-weight:600} .detail{padding:13px 18px;background:var(--card);font-size:.88rem;color:var(--ink-2)} .detail div{display:flex;justify-content:space-between;gap:10px;padding:5px 0; border-bottom:1px dashed var(--line-2)} .detail div:last-child{border-bottom:0} .detail span:last-child{font-family:"Roboto Mono",monospace;font-variant-numeric:tabular-nums; color:var(--ink);font-weight:600} .warnrow{padding:12px 18px;background:var(--hivis-soft);color:#6B4A00;font-size:.86rem; border-top:3px solid var(--hivis);font-weight:600} @media (prefers-color-scheme:dark){.warnrow{color:var(--hivis)}} .note{padding:13px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3); background:var(--sunk)} /* ---------- costing block inside the result panel ---------- */ .cost{padding:15px 18px;background:var(--sunk);border-top:1px solid var(--line); display:flex;flex-direction:column;gap:9px} .cost label{font-size:.75rem;margin-bottom:0} .cost select{padding:9px 11px;font:600 15px/1.3 "Source Sans 3",sans-serif} .customname{width:100%;padding:10px 12px;border:2px solid var(--accent); border-radius:8px;background:var(--paper);color:var(--ink); font:600 15px/1.3 "Source Sans 3",sans-serif} .customname:focus{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .customname[hidden]{display:none} .pricerow{display:flex;align-items:stretch;border:2px solid var(--line);border-radius:8px; overflow:hidden;background:var(--paper)} .pricerow span{display:flex;align-items:center;padding:0 11px;background:var(--line-2); font:700 15px/1 "Roboto Mono",monospace;color:var(--ink-2)} .pricerow input{border:0;border-radius:0;background:transparent} .pricerow input:focus{box-shadow:none} .pricerow:focus-within{border-color:var(--accent)} .linetotal{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding-top:4px;font-size:.86rem;color:var(--ink-2)} .linetotal b{font:700 1.05rem/1 "Roboto Mono",monospace;color:var(--ink); font-variant-numeric:tabular-nums} .addbtn{width:100%;padding:13px;border:0;border-radius:8px;cursor:pointer; background:var(--navy);color:#fff;font:800 .95rem/1 Archivo,sans-serif} .addbtn:hover{background:var(--navy-2)} .addbtn.added{background:var(--good)} /* ---------- build plan ---------- */ .bp{position:fixed;top:80px;right:18px;z-index:60;display:flex;flex-direction:column; align-items:flex-end;gap:9px;max-width:calc(100vw - 36px)} .bp-tab{display:flex;align-items:center;gap:9px;background:var(--navy);color:#fff; border:0;border-radius:10px;padding:11px 15px;cursor:pointer;box-shadow:var(--shadow); font:800 .88rem/1 Archivo,sans-serif} .bp-tab svg{width:16px;height:16px;stroke:var(--trade);stroke-width:2.4;fill:none;stroke-linecap:round} .bp-tab b{background:var(--trade);color:var(--on-trade);border-radius:11px;min-width:22px;padding:2px 6px; font:700 .78rem/1.35 "Roboto Mono",monospace;text-align:center} .bp-tab b[hidden]{display:none} .bp-panel{width:330px;max-width:calc(100vw - 36px);background:var(--card); border:2px solid var(--navy);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)} .bp-head{display:flex;align-items:center;gap:9px;background:var(--navy);color:#fff;padding:11px 14px} .bp-head strong{font:800 .95rem/1 Archivo,sans-serif;flex:1} .bp-head select{width:auto;padding:4px 7px;border:1px solid #3C5470;background:#1C3A5E; color:#fff;font:600 .8rem/1 "Roboto Mono",monospace;border-radius:5px} .bp-head button{background:none;border:0;color:#fff;font-size:1.4rem;line-height:1; cursor:pointer;padding:0 2px} .bp-lines{max-height:min(46vh,340px);overflow-y:auto} .bp-line{display:flex;justify-content:space-between;gap:10px;padding:11px 14px; border-bottom:1px solid var(--line-2);font-size:.86rem} .bp-line b{display:block;font-weight:700} .bp-line span{display:block;color:var(--ink-2);font-size:.76rem;margin-top:2px} .bp-amt{display:flex;align-items:center;gap:7px;white-space:nowrap; font:700 .92rem/1 "Roboto Mono",monospace;font-variant-numeric:tabular-nums} .bp-amt button{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:1.1rem;padding:0 2px} .bp-amt button:hover{color:var(--trade)} .bp-empty{padding:16px 14px;color:var(--ink-2);font-size:.85rem;margin:0;line-height:1.55} .bp-total{display:flex;justify-content:space-between;align-items:baseline; padding:13px 14px;background:var(--trade);color:var(--on-trade);font-weight:700} .bp-total b{font:800 1.25rem/1 "Roboto Mono",monospace;font-variant-numeric:tabular-nums} .bp-rate{margin:0;padding:8px 14px;background:var(--sunk);font-size:.72rem; color:var(--ink-2);border-bottom:1px solid var(--line-2);line-height:1.45} .bp-rate[hidden]{display:none} .bp-line i{font-style:normal;opacity:.75} .bp-actions{display:flex;gap:8px;padding:11px 14px;background:var(--sunk)} .bp-actions button{flex:1;padding:9px;border:1px solid var(--line);background:var(--card); color:var(--ink-2);border-radius:7px;cursor:pointer;font:700 .8rem/1 "Source Sans 3",sans-serif} .bp-actions button:hover{border-color:var(--accent);color:var(--accent-ink)} .bp-note{padding:0 14px 13px;margin:0;font-size:.72rem;color:var(--ink-2); background:var(--sunk);line-height:1.5} @media (max-width:900px){ .bp{top:auto;bottom:14px;right:14px} .bp{flex-direction:column-reverse} } @media print{.bp{display:none}} /* ---------- tables ---------- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius); background:var(--card);box-shadow:var(--shadow)} table{border-collapse:collapse;width:100%;min-width:460px} th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line-2);font-size:.93rem} th{font:700 .7rem/1 "Roboto Mono",monospace;letter-spacing:.1em;text-transform:uppercase; color:#fff;background:var(--navy);padding:12px 15px} tbody tr:nth-child(even){background:var(--sunk)} tr:last-child td{border-bottom:0} td.n{font-family:"Roboto Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap; font-weight:600;color:var(--accent-ink)} /* ---------- faq ---------- */ details{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent); border-radius:8px;padding:14px 17px} details+details{margin-top:9px} summary{cursor:pointer;font-weight:700;font-family:Archivo,sans-serif} details p{color:var(--ink-2);margin-top:9px;font-size:.95rem} .ad{min-height:280px;display:flex;align-items:center;justify-content:center;background:var(--card); border:2px dashed var(--line);border-radius:var(--radius);color:var(--ink-3); font:.7rem/1 "Roboto Mono",monospace;letter-spacing:.15em;text-transform:uppercase;margin:28px 0} /* ---------- tool grid ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:13px;margin-top:18px} .grid a{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:0 0 15px;text-decoration:none;color:var(--ink);display:block;overflow:hidden; box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease} .grid a::before{content:"";display:block;height:6px;background:var(--tool,var(--trade))} .grid a:hover,.grid a:focus-visible{transform:translateY(-3px); box-shadow:0 3px 6px rgba(22,32,43,.08),0 16px 34px -18px rgba(22,32,43,.5)} .grid a b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1.06rem; padding:14px 16px 0} .grid a small{display:block;color:var(--ink-2);font-size:.82rem;margin-top:5px; line-height:1.5;padding:0 16px} footer{background:var(--navy);color:#B9C6D4;margin-top:44px;padding:30px 0 54px;font-size:.9rem; border-top:5px solid var(--trade)} footer a{color:#fff;font-weight:600} :focus-visible{outline:3px solid var(--accent);outline-offset:2px} @media print{.top,.nav,.ad,footer,section.block{display:none}.out{position:static}} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* cookie notice */ .consent{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:16px;flex-wrap:wrap; align-items:center;justify-content:center;padding:15px 20px;background:var(--navy); border-top:4px solid var(--trade);box-shadow:0 -6px 24px rgba(0,0,0,.25)} .consent p{font-size:.88rem;color:#C6D2DE;max-width:62ch;margin:0} .consent p a{color:#fff} .consent-btns{display:flex;gap:8px;flex-wrap:wrap} .consent button{border:2px solid #3C5470;background:transparent;color:#DDE6EF; border-radius:7px;padding:10px 17px;cursor:pointer;font:700 .87rem/1 "Source Sans 3",sans-serif} .consent button:hover{border-color:var(--trade);color:#fff} .consent button.primary{background:var(--trade);border-color:var(--trade);color:var(--on-trade)}