/* ============================================================================ CBRUK - Compare Bamboo Removal, shared stylesheet. PALETTE - "INDIGO & ROSE" (2026-08-12) --brand-d #1E2559 deep indigo trust anchor: headings, dark bands, footer --brand #3B5BDB vivid indigo links, icons, accents --cta #D6285C magenta-rose the one colour that should catch the eye --accent #8FD3FF bright sky highlights ON the dark indigo bands NO GREEN AND NO ORANGE, deliberately. Two earlier passes lived in the green family (muted teal + bamboo gold, then jade + orange) and both looked like every other plant-removal site. This one leaves that family entirely. The reasoning is not only aesthetic: every bamboo and knotweed competitor is green, the sister knotweed site IS forest green + terracotta, and two sites run from the same Ads account family must be tellable apart at a glance in a screenshot, a logo or an ad preview. Indigo is also the UK convention for comparison and trades marketplaces - the category this actually competes in, rather than horticulture. WHAT STAYS GREEN, AND SHOULD: the bamboo in the root-barrier diagram (CBRUKDiagrams), the species plates and the photographs. Those depict a plant; they are not brand colour, and a blue bamboo cane in a technical cross-section would read as a mistake. Brand is indigo; subject is still a plant. CONTRAST. All 19 text/background pairs are verified by tools/palette.py, which REFUSES to apply a palette that fails AA. Worth knowing why the ink changed back to white: the outgoing orange was so bright that white on it was only 2.6:1, so it needed near-black ink. The rose CTA is darker and white passes at 4.86:1 - so --cta-ink is plain white again. One CTA colour sitewide. Alternating white / --bg-soft bands, with one dark --brand-d feature band. Headings Nunito Sans, body Inter - the same type stack as the sister site, which is intentional: it lets both sites share the two self-hosted woff2 files, and the palettes now share nothing at all. ============================================================================ */ :root{ --brand:#3B5BDB; /* vivid indigo, primary */ --brand-d:#1E2559; /* deep indigo, headings + dark bands */ --brand-l:#EEF1FE; /* pale wash, soft panels */ --brand-b:#C3CEFB; /* border on brand-l */ --bg-soft:#F5F7FF; /* alternating band */ --brand-chip:#DDE4FE; --cta:#D6285C; /* magenta-rose - the single attention colour */ --cta-d:#B81E4C; --cta-ink:#FFFFFF; /* white passes 4.86:1 on the rose - see above */ --txt:#151833; --muted:#5B6382; --footer:#161C42; --line:#C3CEFB; --shadow:0 12px 26px rgba(30,37,89,.10); } html,body{margin:0;padding:0} *{box-sizing:border-box} body{background:#fff;color:var(--txt);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4,.cbr-head{font-family:'Nunito Sans','Inter',sans-serif;letter-spacing:-0.015em;color:var(--brand-d)} /* On dark sections the wrapper sets color:#fff; headings must inherit white or they render dark-on-dark. This attribute selector is the sister site's fix for exactly that bug - keep it, several pages rely on it. */ [style*="color:#fff"] h1,[style*="color:#fff"] h2,[style*="color:#fff"] h3, [style*="color:#fff"] h4,[style*="color:#fff"] .cbr-head{color:#fff} a{color:var(--brand)} img,svg{max-width:100%} /* --- eyebrow --- */ .cbr-eyebrow{font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)} /* --- primary CTA (magenta-rose + white ink, sitewide) --- */ .cbr-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--cta);color:var(--cta-ink)!important;text-decoration:none;font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:16.5px;line-height:1;padding:15px 26px;min-height:44px;border:none;border-radius:13px;cursor:pointer;box-shadow:0 12px 26px rgba(214,40,92,.34);transition:filter .15s ease,transform .15s ease,box-shadow .15s ease} .cbr-cta:hover{filter:brightness(.96);transform:translateY(-1px)} .cbr-cta:active{transform:translateY(0)} .cbr-cta:focus-visible{outline:3px solid var(--brand);outline-offset:2px} /* hero CTA pulse + shine */ @keyframes cbr-pulse{0%,100%{box-shadow:0 12px 26px rgba(214,40,92,.34)}50%{box-shadow:0 14px 34px rgba(214,40,92,.58)}} .cbr-cta-hero{position:relative;overflow:hidden;animation:cbr-pulse 2.8s ease-in-out infinite} @keyframes cbr-shine{0%{transform:translateX(-120px) skewX(-18deg)}55%,100%{transform:translateX(440px) skewX(-18deg)}} .cbr-cta-hero::after{content:"";position:absolute;top:0;left:0;width:70px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120px) skewX(-18deg);animation:cbr-shine 3.4s ease-in-out infinite;pointer-events:none} @media(prefers-reduced-motion:reduce){.cbr-cta-hero{animation:none}.cbr-cta-hero::after{display:none}} /* --- secondary / phone buttons --- */ .cbr-btn2{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--brand-b);color:var(--brand-d);text-decoration:none;font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:15px;padding:12px 20px;min-height:44px;border-radius:12px;transition:border-color .15s} .cbr-btn2:hover{border-color:var(--brand)} /* --- "In short" AEO answer box --------------------------------------------- The single most important component on the guide pages. Answer engines and featured snippets lift a short, self-contained, directly-phrased answer; this box is where every page puts one, immediately under the H1 and above any marketing. Keep it to 40-70 words and make it answer the title question literally. */ .cbr-inshort{background:var(--brand-l);border:1px solid var(--brand-b);border-left:5px solid var(--brand);border-radius:16px;padding:24px 28px} .cbr-inshort .lbl{font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)} .cbr-inshort p{font-size:17px;line-height:1.7;color:var(--txt);margin:10px 0 0} /* ============================================================================ CONTENT GRIDS .cbr-g2 / .cbr-g3 / .cbr-g4 ============================================================================ THESE LIVE HERE, SITE-WIDE, AND MUST NOT MOVE BACK INTO A CONTROL. They were originally defined in an inline