/* ================================================================ */ /* BroadbandSwitch.uk guide components. Scoped under .bsw so they */ /* will not clash when transplanted into the live shell. */ /* CURSOR: link this once from the shell , or fold the rules */ /* into the site stylesheet. The preview chrome (.preview-*) is for */ /* standalone viewing only and can be dropped on the live site. */ /* ================================================================ */ :root{ --pink:#E50571; --pink-d:#B0044F; --pink-soft:#FCE4EF; --ink:#201826; --mute:#6B6577; --line:#ECECF1; --bg:#ffffff; } *{box-sizing:border-box} img{max-width:100%;height:auto;display:block} /* preview chrome only */ .preview-bar{background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px} .preview-bar .brand{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none} .preview-bar .brand span{color:var(--pink)} .preview-bar .cta{padding:9px 20px;font-size:14px} .preview-foot{background:#201826;color:#C9C4D2;padding:26px 20px;text-align:center;font-size:14px} .preview-foot a{color:#fff} /* content container: constrained width fixes the full-width issue */ .bsw{max-width:860px;margin:0 auto;padding:30px 22px 70px} .bsw .crumbs{font-size:14px;color:var(--mute);margin:6px 0 18px} .bsw .crumbs a{color:var(--mute);text-decoration:none} .bsw h1{font-size:clamp(30px,5vw,46px);font-weight:800;line-height:1.1;margin:0 0 14px} .bsw .byline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--mute);margin-bottom:22px} .bsw .byline a{color:var(--pink-d);text-decoration:none;font-weight:600} .bsw .hero{border-radius:16px;overflow:hidden;margin:0 0 26px;box-shadow:0 10px 30px rgba(32,24,38,.10)} .bsw h2{font-size:clamp(23px,3.4vw,30px);font-weight:700;line-height:1.2;margin:42px 0 12px;scroll-margin-top:80px} .bsw h3{font-size:19px;font-weight:600;margin:26px 0 8px} .bsw p{font-size:17px;line-height:1.7;color:#2c2636;margin:0 0 16px} .bsw ul,.bsw ol{font-size:17px;line-height:1.7;color:#2c2636;padding-left:22px;margin:0 0 16px} .bsw li{margin:0 0 8px} .bsw strong{color:var(--ink)} /* quick answer */ .answer{background:linear-gradient(180deg,#fff,#fffdfe);border:1px solid var(--line);border-left:5px solid var(--pink);border-radius:14px;padding:20px 22px;margin:0 0 26px;box-shadow:0 6px 18px rgba(32,24,38,.05)} .answer .lbl{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--pink);text-transform:uppercase;margin-bottom:8px} .answer p{font-size:18px;margin:0} /* key points */ .keys{background:var(--pink-soft);border-radius:14px;padding:18px 22px 6px;margin:0 0 30px} .keys .lbl{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--pink-d);text-transform:uppercase} .keys ul{list-style:none;padding:0;margin:10px 0 12px} .keys li{position:relative;padding-left:28px;font-size:16px;margin-bottom:10px} .keys li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--pink)} .keys li::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)} /* on this page */ .toc{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:0 0 34px;background:#fff} .toc .lbl{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--mute);text-transform:uppercase;margin-bottom:10px} .toc ol{columns:2;column-gap:26px;font-size:15px;padding-left:18px;margin:0} .toc a{color:var(--pink-d);text-decoration:none} @media(max-width:560px){.toc ol{columns:1}} /* figure */ .bsw figure{margin:26px 0} .bsw figure img{border-radius:14px;border:1px solid var(--line)} .bsw figcaption{font-size:13px;color:var(--mute);margin-top:8px;text-align:center} /* callout */ .tip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:22px 0;font-size:16px} .tip strong{color:var(--pink-d)} /* buttons */ .cta{display:inline-block;background:var(--pink);color:#fff;font-weight:700;font-size:16px;text-decoration:none;padding:13px 26px;border-radius:40px;box-shadow:0 8px 20px rgba(229,5,113,.28)} .cta:hover{background:var(--pink-d)} .cta-wrap{margin:28px 0;text-align:center} /* faq */ .faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:16px 46px 16px 18px;font-weight:600;font-size:17px;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--pink);font-weight:700;font-size:22px} .faq details[open] summary::after{content:"\2212"} .faq details p{padding:0 18px 16px;margin:0;font-size:16px} /* related cards */ .related{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:16px 0 0} .related a{display:block;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;text-decoration:none;color:var(--ink);transition:.15s} .related a:hover{border-color:var(--pink);box-shadow:0 8px 20px rgba(32,24,38,.08)} .related a b{display:block;font-size:16px;margin-bottom:4px} .related a span{font-size:13px;color:var(--mute)} /* references + editorial */ .refs{font-size:13px;color:var(--mute);line-height:1.6} .refs li{margin-bottom:10px} .editorial{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:14px;color:var(--mute)} .editorial a{color:var(--pink-d);text-decoration:none;font-weight:600} .bsw hr.soft{border:none;border-top:1px solid var(--line);margin:40px 0}