/* Growing Toolkit — garden design system. Grounded in what the category actually looks like rather than taste. Sampled from the real sites on 20 Aug 2026: Burpee #046A38 deep green, #346E4A mid green, #2E2E2C warm near-black RHS #006E50 deep green, #6E377D purple secondary, #3B3630 warm dark Both use a WARM near-black for structure, never a blue-black, and a deep saturated green as the primary. RHS's purple is the category's secondary. So: deep green carries the brand, warm bark-black carries the structure, parchment replaces cool grey, and frost blue is the warning colour — because in this subject the hazard is cold, not heat. Amber would be borrowed from the trade world and would mean nothing here. The motif that belongs to this site and no other is the drill row: the faint ruled seed rows behind the hero, drawn in CSS, no image and no request. Fonts: Fraunces (display — a warm, slightly agricultural serif), Source Sans 3 (body), Roboto Mono (figures and dates). All SIL Open Font License via Google Fonts. Icons: Lucide, ISC licence, inlined as SVG. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Sans+3:wght@400;600;700&family=Roboto+Mono:wght@400;500;700&display=swap'); :root{ --leaf:#0A6A46; /* the category colour, between Burpee and RHS */ --leaf-dark:#06563A; --leaf-soft:#E4F0E8; --bark:#2F2A24; /* warm near-black — the structure colour */ --bark-2:#453D33; --berry:#6E377D; /* RHS's purple, kept for seasonal markers */ --frost:#1F5F8B; /* the warning colour in this subject is cold */ --frost-soft:#E3EDF5; --paper:#F7F4EC; /* parchment, not cool grey */ --card:#FFFFFF; --sunk:#EFEBDF; --line:#D8D2C2; --line-2:#E6E1D4; --ink:#22201C; --ink-2:#4E4A42; --ink-3:#5E594F; /* carries real sentences, so it must clear 4.5:1 */ --good:#1B7A4B; --radius:10px; --shadow:0 1px 2px rgba(34,32,28,.06), 0 10px 28px -20px rgba(34,32,28,.4); --accent:var(--leaf); /* per-tool override, set on */ --on-leaf:#FFFFFF; /* white on the deep green is 6.6:1 */ /* Anything green sitting ON the bark header or footer needs a LIGHT green. --leaf-dark there was 1.63:1 — dark green on dark brown, effectively invisible. The QA gate cannot catch this one because it samples , and the offending colour is on an inside the link. */ --leaf-on-dark:#6FCB9C; /* 7.2:1 on --bark */ } /* Each tool takes its accent from its own subject, so eleven pages do not read as one template with the words swapped. */ body[data-tool="frost"] { --accent:#2E6C9E; } /* frost blue */ body[data-tool="calendar"] { --accent:#2E7D46; } /* leaf */ body[data-tool="bed"] { --accent:#8A5A2B; } /* cedar board */ body[data-tool="compost"] { --accent:#5C4326; } /* dark earth */ body[data-tool="spacing"] { --accent:#6B8E4E; } /* sage */ body[data-tool="water"] { --accent:#2A7B9B; } /* water */ body[data-tool="seed"] { --accent:#5A8A2E; } /* seedling */ body[data-tool="greenhouse"] { --accent:#3E8577; } /* glass */ body[data-tool="ph"] { --accent:#7B3F8F; } /* litmus */ body[data-tool="lawn"] { --accent:#4A7C2F; } /* turf */ body[data-tool="rain"] { --accent:#46708A; } /* rain slate */ /* Accents are chosen to work as blocks of colour; several fall below 4.5:1 as text on parchment. Links and figures use this darkened variant instead. 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) 72%, #000); } @media (prefers-color-scheme:dark){ :root{ --paper:#141613; --card:#1C201B; --sunk:#232823; --line:#39403A; --line-2:#2C322D; --ink:#EFF2EE; --ink-2:#B3BCB2; --ink-3:#8B948A; --leaf:#4FB783; --leaf-dark:#6FCB9C; --leaf-soft:#123024; --bark:#0E110D; --bark-2:#1E241F; --berry:#C08FD0; --frost:#7FB6E0; --frost-soft:#15252F; --on-leaf:#08251A; /* dark ink on the lighter dark-mode green */ --good:#4FBB86; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.9); } body[data-tool="frost"]{--accent:#79B4DE} body[data-tool="calendar"]{--accent:#63C285} body[data-tool="bed"]{--accent:#C08B55} body[data-tool="compost"]{--accent:#B08E62} body[data-tool="spacing"]{--accent:#A6C47F} body[data-tool="water"]{--accent:#61BAD6} body[data-tool="seed"]{--accent:#9DC85F} body[data-tool="greenhouse"]{--accent:#6FBDAE} body[data-tool="ph"]{--accent:#BE8ACD} body[data-tool="lawn"]{--accent:#8FBE63} body[data-tool="rain"]{--accent:#86AEC9} 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.12;text-wrap:balance; font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.015em} h1{font-size:clamp(2rem,5vw,3rem)} h2{font-size:clamp(1.35rem,2.6vw,1.7rem)} h3{font-size:1.1rem} p{margin:0} a{color:var(--accent-ink)} .mono{font-family:"Roboto Mono",Consolas,ui-monospace,monospace} /* ---------- header ---------- */ .top{background:var(--bark);border-bottom:4px solid var(--leaf)} .top .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap;padding:10px 22px} .logo{font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.02em;text-decoration:none; color:#fff;font-size:1.24rem;display:flex;align-items:center;gap:9px} .logo em{font-style:normal;color:var(--leaf-on-dark)} .logo svg{width:25px;height:25px;fill:var(--leaf-on-dark);flex:none} .nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap} .nav a{color:#CBD6CC;text-decoration:none;font-size:.9rem;font-weight:600; padding:7px 11px;border-radius:6px} .nav a:hover,.nav a:focus-visible{background:var(--bark-2);color:#fff} .nav a[aria-current="page"]{background:var(--leaf);color:var(--on-leaf)} /* ---------- hero on drill rows ---------- */ .hero{ /* drill rows: ruled horizontal lines, the spacing of a seed drill. A `to right` gradient is constant vertically and tiles into vertical corduroy, which is not what a planted row looks like. */ background: repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--leaf) 14%, transparent) 27px 28px), 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(--bark);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(--bark);color:#fff} .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px} .fields .wide{grid-column:1/-1} 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} select{font-family:"Source Sans 3",sans-serif} 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 ---------- */ .out{background:var(--card);border:2px solid var(--bark);border-radius:var(--radius); overflow:hidden;position:sticky;top:16px;box-shadow:var(--shadow)} .out header{background:var(--bark);color:#fff;padding:13px 18px; font:700 1rem/1.2 Fraunces,Georgia,serif;letter-spacing:-.01em; display:flex;align-items:center;gap:9px} .out header::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--leaf)} .hero-out{padding:20px 18px;background:var(--leaf);color:var(--on-leaf)} .hero-out .big{font:700 2.2rem/1.05 "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:.93;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;text-align:right} /* the hazard in this subject is cold, so the warning band is frost blue */ .warnrow{padding:12px 18px;background:var(--frost-soft);color:#123D5C;font-size:.86rem; border-top:3px solid var(--frost);font-weight:600} @media (prefers-color-scheme:dark){.warnrow{color:var(--frost)}} .note{padding:13px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3); background:var(--sunk)} /* ---------- season bar: the motif that only a growing site needs ---------- */ .season{display:flex;margin:16px 0 0;border:1px solid var(--line);border-radius:6px; overflow:hidden;background:var(--card)} .season i{flex:1;height:26px;position:relative;font-style:normal; border-right:1px solid var(--line-2); font:700 .58rem/26px "Roboto Mono",monospace;text-align:center;color:var(--ink-3)} .season i:last-child{border-right:0} .season i.on{background:color-mix(in srgb,var(--leaf) 26%,transparent);color:var(--ink)} .season i.edge{background:color-mix(in srgb,var(--frost) 22%,transparent)} .seasonkey{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px; font:600 .72rem/1 "Roboto Mono",monospace;color:var(--ink-3)} .seasonkey b{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px; vertical-align:-1px} /* ---------- costing block ---------- */ .cost{padding:15px 18px;background:var(--sunk);border-top:1px solid var(--line); display:flex;flex-direction:column;gap:9px} .cost:empty{display:none} .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(--bark);color:#fff;font:700 .95rem/1 Fraunces,Georgia,serif} .addbtn:hover{background:var(--bark-2)} .addbtn.added{background:var(--good)} /* ---------- grow 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(--bark);color:#fff; border:0;border-radius:10px;padding:11px 15px;cursor:pointer;box-shadow:var(--shadow); font:700 .88rem/1 Fraunces,Georgia,serif} .bp-tab svg{width:16px;height:16px;stroke:var(--leaf-on-dark);stroke-width:2.4;fill:none;stroke-linecap:round} .bp-tab b{background:var(--leaf);color:var(--on-leaf);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(--bark);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)} .bp-head{display:flex;align-items:center;gap:9px;background:var(--bark);color:#fff;padding:11px 14px} .bp-head strong{font:700 .95rem/1 Fraunces,Georgia,serif;flex:1} .bp-head select{width:auto;padding:4px 7px;border:1px solid #5A5145;background:var(--bark-2); 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(--leaf-dark)} .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(--leaf);color:var(--on-leaf);font-weight:700} .bp-total b{font:700 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;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(--bark);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:Fraunces,Georgia,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(--leaf))} .grid a:hover,.grid a:focus-visible{transform:translateY(-3px); box-shadow:0 3px 6px rgba(34,32,28,.08),0 16px 34px -18px rgba(34,32,28,.5)} .grid a b{display:block;font-family:Fraunces,Georgia,serif;font-weight:700;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(--bark);color:#C3CCC4;margin-top:44px;padding:30px 0 54px;font-size:.9rem; border-top:5px solid var(--leaf)} 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(--bark); border-top:4px solid var(--leaf);box-shadow:0 -6px 24px rgba(0,0,0,.25)} .consent p{font-size:.88rem;color:#CBD6CC;max-width:62ch;margin:0} .consent p a{color:#fff} .consent-btns{display:flex;gap:8px;flex-wrap:wrap} .consent button{border:2px solid #55604F;background:transparent;color:#DCE4DC; border-radius:7px;padding:10px 17px;cursor:pointer;font:700 .87rem/1 "Source Sans 3",sans-serif} .consent button:hover{border-color:var(--leaf);color:#fff} .consent button.primary{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf)}