/* =========================================================================== BroadbandSwitch.uk ยท insights.html upgrade Everything is scoped to .bbs-* so it cannot affect the rest of the site. Brand pink: #E50571. Add this file and link it in the of insights.html. =========================================================================== */ .bbs-block,.bbs-block *{box-sizing:border-box;} .bbs-block{margin:22px 0;font-family:inherit;} /* ---- freshness / "last updated" line ---- */ .bbs-updated{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px; font-size:14px;line-height:1.5;color:#4a4a55; padding:12px 16px;background:#fdf2f8;border:1px solid #f7d3e6;border-radius:12px;} .bbs-updated strong{color:#17171f;} .bbs-updated .bbs-dot{width:7px;height:7px;border-radius:50%;background:#E50571; display:inline-block;flex:0 0 auto;} .bbs-updated a{color:#c70463;text-decoration:underline;text-underline-offset:2px;} /* ---- shared button ---- */ .bbs-btn{display:inline-flex;align-items:center;gap:.5em; background:#E50571;color:#fff !important;text-decoration:none; font-weight:700;font-size:16px;line-height:1; padding:15px 26px;border-radius:12px;border:0;cursor:pointer; transition:background-color .18s ease, transform .18s ease; box-shadow:0 6px 18px rgba(229,5,113,.28);} .bbs-btn:hover{background:#c70463;transform:translateY(-1px);} .bbs-btn:focus-visible{outline:3px solid #ffb3d4;outline-offset:3px;} .bbs-btn .bbs-arrow{transition:transform .18s ease;} .bbs-btn:hover .bbs-arrow{transform:translateX(3px);} /* ---- top CTA card (light) ---- */ .bbs-cta{position:relative;overflow:hidden; background:#ffffff;border:1px solid #f2d6e6;border-radius:18px; padding:clamp(22px,3.5vw,34px);box-shadow:0 10px 30px rgba(20,20,34,.06);} .bbs-cta::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:#E50571;} .bbs-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:#E50571;margin:0 0 10px;} .bbs-cta h2{margin:0 0 10px;font-size:clamp(21px,3vw,27px);line-height:1.2; letter-spacing:-.01em;color:#17171f;} .bbs-cta p{margin:0 0 20px;max-width:64ch;color:#3a3a45;font-size:16px;line-height:1.6;} .bbs-cta .bbs-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;} .bbs-micro{font-size:13.5px;color:#6a6a76;} /* ---- bottom CTA band (dark premium) ---- */ .bbs-band{position:relative;overflow:hidden;border-radius:20px; background:#121220;color:#fff;padding:clamp(28px,4.5vw,48px);} .bbs-band::after{content:"";position:absolute;pointer-events:none; width:520px;height:520px;right:-160px;top:-220px;border-radius:50%; background:radial-gradient(circle,rgba(229,5,113,.45),rgba(229,5,113,0) 62%);} .bbs-band>*{position:relative;z-index:1;} .bbs-band .bbs-eyebrow{color:#ff7ab6;} .bbs-band h2{margin:0 0 12px;font-size:clamp(24px,3.6vw,34px);line-height:1.18; letter-spacing:-.015em;max-width:20ch;} .bbs-band p{margin:0 0 24px;max-width:60ch;font-size:16.5px;line-height:1.65; color:rgba(255,255,255,.82);} .bbs-trust{margin:22px 0 0;font-size:13px;line-height:1.55; color:rgba(255,255,255,.6);max-width:60ch;} /* ---- FAQ ---- */ .bbs-faq h2{font-size:clamp(20px,2.8vw,26px);margin:0 0 6px;color:#17171f;} .bbs-faq details{border:1px solid #ececf1;border-radius:12px;padding:2px 18px; margin:10px 0;background:#fff;transition:border-color .18s ease;} .bbs-faq details[open]{border-color:#f2d6e6;} .bbs-faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:16.5px; color:#17171f;padding:15px 0;display:flex;justify-content:space-between; align-items:center;gap:16px;} .bbs-faq summary::-webkit-details-marker{display:none;} .bbs-faq summary::after{content:"+";color:#E50571;font-weight:800;font-size:22px; line-height:1;flex:0 0 auto;transition:transform .18s ease;} .bbs-faq details[open] summary::after{content:"-";} .bbs-faq .bbs-answer{padding:0 0 16px;color:#3a3a45;font-size:15.5px;line-height:1.62; max-width:70ch;} .bbs-faq .bbs-answer a{color:#c70463;text-decoration:underline;text-underline-offset:2px;} /* ---- the short version ---- */ .bbs-summary{background:#fafafc;border:1px solid #ececf1;border-radius:16px; padding:clamp(20px,3vw,30px);} .bbs-summary h2{margin:0 0 10px;font-size:clamp(19px,2.6vw,24px);color:#17171f;} .bbs-summary p{margin:0 0 14px;color:#3a3a45;font-size:16px;line-height:1.62;max-width:72ch;} .bbs-summary a.bbs-textlink{color:#c70463;font-weight:700;text-decoration:underline; text-underline-offset:2px;} /* =========================================================================== OPTIONAL: sticky "compare by postcode" bar. These rules do nothing unless the .bbs-sticky markup is present in the page, so they are safe to keep even if you decide not to use the bar. =========================================================================== */ .bbs-sticky{position:fixed;left:0;right:0;bottom:0;z-index:900; transform:translateY(110%);transition:transform .28s ease; background:#121220;color:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.25);} .bbs-sticky.is-visible{transform:translateY(0);} .bbs-sticky__inner{max-width:1040px;margin:0 auto;display:flex;align-items:center; gap:14px;padding:12px 16px;} .bbs-sticky__text{flex:1 1 auto;font-size:15px;font-weight:600;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bbs-sticky__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4em; background:#E50571;color:#fff !important;text-decoration:none;font-weight:700; font-size:15px;padding:11px 18px;border-radius:10px;transition:background-color .18s ease;} .bbs-sticky__btn:hover{background:#c70463;} .bbs-sticky__btn:focus-visible{outline:3px solid #ffb3d4;outline-offset:2px;} .bbs-sticky__close{flex:0 0 auto;background:transparent;border:0; color:rgba(255,255,255,.6);font-size:24px;line-height:1;cursor:pointer; padding:4px 8px;border-radius:8px;} .bbs-sticky__close:hover{color:#fff;} .bbs-sticky__close:focus-visible{outline:2px solid #ffb3d4;outline-offset:2px;} @media (max-width:520px){ .bbs-sticky__text{display:none;} .bbs-sticky__btn{flex:1 1 auto;justify-content:center;} } @media (prefers-reduced-motion:reduce){ .bbs-btn,.bbs-btn .bbs-arrow,.bbs-faq details,.bbs-faq summary::after,.bbs-sticky{ transition:none;} .bbs-btn:hover{transform:none;} } /* House rule: white text on pink CTAs in all states */ .bbs-btn:link,.bbs-btn:visited,.bbs-btn:hover,.bbs-btn:active{ color:#fff !important;-webkit-text-fill-color:#fff;text-decoration:none;} .bbs-sticky__btn:link,.bbs-sticky__btn:visited,.bbs-sticky__btn:hover,.bbs-sticky__btn:active{ color:#fff !important;-webkit-text-fill-color:#fff;text-decoration:none;}