) makes that element a scroll container and breaks position: sticky inside it. */ html { overflow-x: hidden; } img, video, iframe { max-width: 100%; } /* Long unbroken strings (URLs, emails in the footer) are the other way a narrow viewport gets pushed sideways. */ body { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 2. Fluid type + rhythm (applies at every width, no breakpoint needed) -------------------------------------------------------------------------- */ .banner-content h1 { font-size: clamp(34px, 4.6vw, 70px); line-height: 1.06; margin-bottom: clamp(20px, 2.6vw, 40px); } .banner-content p { font-size: clamp(15px, 1.2vw, 18px); } .banner-form h2 { font-size: clamp(24px, 2.4vw, 36px); margin-bottom: clamp(18px, 2vw, 28px); } .section-heading h2 { font-size: clamp(28px, 3.6vw, 55px); line-height: 1.14; } .category-info h3 { font-size: clamp(26px, 3.4vw, 52px); } .best-for ul li { font-size: clamp(16px, 1.35vw, 20px); } .process-num { font-size: clamp(34px, 3.2vw, 60px); } .process-text h4 { font-size: clamp(18px, 1.5vw, 22px); } ul.counter li h6 { font-size: clamp(30px, 3.3vw, 50px); } ul.counter li p { font-size: clamp(14px, 1.3vw, 20px); } .style-list li { font-size: clamp(15px, 1.2vw, 18px); } .style-features li h6 { font-size: clamp(14px, 1.2vw, 18px); } .newsletter h2 { font-size: clamp(24px, 2.2vw, 32px); } .backing-text h4, .patch-info h4 { font-size: clamp(18px, 1.5vw, 22px); } /* Section rhythm. style.css hard-codes 100px (120px on the FAQ) top and bottom on every band, which is most of a phone screen of dead space. */ section.trusted, section.categories, section.process, section.backing, section.instagram { padding-top: clamp(56px, 6vw, 100px); padding-bottom: clamp(56px, 6vw, 100px); } section.faq { padding-top: clamp(56px, 7vw, 120px); padding-bottom: clamp(56px, 7vw, 120px); } .trusted .section-heading { margin-bottom: clamp(32px, 5vw, 80px); } .category-box, .faq-row { margin-top: clamp(28px, 3.4vw, 50px); } .process-steps { margin-top: clamp(36px, 5vw, 80px); padding-inline: clamp(0px, 3vw, 60px); } ul.counter { margin-top: clamp(36px, 5vw, 80px); } .patch { margin-top: clamp(56px, 6vw, 100px); } .counter-wrapper { padding-bottom: clamp(56px, 6vw, 100px); } /* The marquees are decorative; full-height stills crowd out everything else once the viewport is short of them. */ .trusted-track img { height: clamp(140px, 20vw, 300px); } .trusted-track, .insta-track { gap: clamp(12px, 1.8vw, 25px); } .insta-item img { height: clamp(200px, 27vw, 400px); width: clamp(175px, 24vw, 350px); } /* -------------------------------------------------------------------------- 3. Header -------------------------------------------------------------------------- */ a.navbar-brand img { height: clamp(84px, 8.5vw, 150px); } section.home-banner { padding-top: clamp(150px, 16vw, 250px); } /* Between lg and xxl the seven nav links, the wordmark and two CTAs share a 1140px container with nothing to give. Tighten the parts that can shrink before the row is forced to scroll. */ @media (max-width: 1399.98px) { nav.navbar { padding: 14px 18px; } ul.navbar-nav { padding-left: 20px; } .navbar-nav li { margin: 0 8px; } a.nav-link { font-size: 15px; } .top-right .btn { padding: 10px 18px; font-size: 15px; white-space: nowrap; } .top-right { gap: 8px; } a.navbar-brand { left: -14px; } /* Seven tabs, one pill. Trimming the horizontal padding is enough to keep all seven on screen down to the 1200px container instead of clipping the last one mid-word. */ .category-tabs .nav-link { padding: 11px 12px; font-size: 14px; } } @media (max-width: 1199.98px) { .navbar-nav li { margin: 0 5px; } ul.navbar-nav { padding-left: 8px; } a.nav-link { font-size: 14px; } .top-right .btn { padding: 9px 14px; font-size: 14px; } /* Below the 1200px container the tabs genuinely cannot all fit. They scroll (style.css sets overflow-x: auto) — the fade tells the reader so, since the scrollbar is deliberately hidden. */ .category-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%); } /* Five across still fits here, but only by squeezing each step's body copy into a ~140px column that runs to seven lines. Three across gives the cards their intended width back; the arrows go with the single row that they describe. */ .process-steps { flex-wrap: wrap; gap: 30px; padding-inline: 0; } .process-item, .process-item.down { flex: 0 0 calc(33.333% - 20px); max-width: 300px; margin-top: 0; } .process-item::after { display: none; } } /* -------------------------------------------------------------------------- 4. ≤991.98px — the lg collapse. Bootstrap folds every col-lg-* to full width here, so this is where side-by-side layouts have to be re-thought rather than just scaled. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { header { padding: 12px 0; } a.navbar-brand { left: 0; position: relative; } nav.navbar { padding: 10px 16px; border-width: 2px; } .navbar-toggler { border-color: #132C74; padding: 6px 10px; } .navbar-toggler:focus { box-shadow: none; } /* The collapsed menu drops out of the pill and needs its own surface. */ .navbar-collapse { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(19, 44, 116, .15); } ul.navbar-nav { padding-left: 0; } .navbar-nav li { margin: 0; } a.nav-link { font-size: 16px; text-align: left; padding: 10px 4px !important; } /* The underline marker is drawn for a centred desktop link; left-aligned in a stacked list it reads as a stray rule under the whole row. */ a.nav-link:before { display: none; } .top-right { margin: 12px 0 6px; gap: 10px; } .top-right .btn { flex: 1; text-align: center; padding: 11px 12px; } .top-header ul { flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-bottom: 10px; } .top-header ul p { font-size: 12px; padding-right: 12px; margin-right: 12px; } /* Hero: the form follows the copy instead of sitting beside it. */ .banner-content { margin-top: 20px; } .banner-content p { max-width: none; } .banner-img { margin-top: 10px; max-width: 560px; } .banner-form { margin-top: 36px; padding: 28px 22px; } /* Backing cards wrap to two rows here, and every circle after the first row is pulled 100px up into the card above it. Give the rows that height. */ .backing-row { margin-top: 130px; row-gap: 130px; } .backing-option { justify-content: flex-start; margin-top: 20px; text-align: left; flex-wrap: wrap; gap: 14px; } /* "What sets us apart": the artwork is absolutely positioned over the right half of a two-column layout that no longer exists — it lands on top of the copy and the CTA. Put it back in flow underneath. */ .style { display: flex; flex-direction: column; padding: clamp(90px, 14vw, 160px) 0 clamp(48px, 7vw, 100px); clip-path: ellipse(150% 100% at 50% 0%); } .style > .container { order: 1; } .style-img { order: 2; position: static; width: 100%; max-width: 520px; margin: 34px auto 0; } .style-para { max-width: none; } .style-features { gap: clamp(18px, 4vw, 45px); flex-wrap: wrap; } /* Process: two per row, so the connecting arrows no longer describe the reading order and the .down offset just knocks the grid out of line. */ .process-steps { flex-wrap: wrap; gap: 32px; justify-content: center; } .process-item, .process-item.down { flex: 0 0 calc(50% - 16px); max-width: 340px; margin-top: 0; } .process-item::after { display: none; } .footer { padding-top: clamp(200px, 26vw, 350px); margin-top: clamp(-250px, -18vw, -150px); } .footer-links { padding: 40px 0; } } /* -------------------------------------------------------------------------- 5. ≤767.98px — phones and small tablets -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* The category card keeps its desktop 40/58 split all the way down, which squeezes the copy into a column a few words wide and clips the heading. */ .category-slide { flex-direction: column; gap: 0; border-radius: 30px; } .category-img, .category-info { flex: 0 0 100%; max-width: 100%; } .category-img { border-radius: 30px 30px 0 0; } .category-img img { height: 240px; border-radius: 0; } .category-info { padding: 26px 24px 30px; } .best-for { gap: 24px; margin-bottom: 22px; } /* Four steps in two columns leaves the text in a ~150px gutter. One up. */ .process-item, .process-item.down { flex: 0 0 100%; max-width: 320px; } .process-steps { gap: 28px; } .backing-row { margin-top: 120px; row-gap: 120px; } .video-wrapper video { border-radius: 24px; } ul.counter { flex-wrap: wrap; gap: 24px 0; justify-content: center; } ul.counter li { flex: 0 0 50%; } .patch-img { height: 260px; } .faq .accordion-button { font-size: 15px; padding: 15px 16px; } .faq .accordion-body { padding: 0 16px 18px; } .footer-bottom .container { padding: 14px 22px 12px; border-radius: 24px 24px 0 0; text-align: center; } .footer-social { justify-content: center; } } /* -------------------------------------------------------------------------- 6. ≤575.98px — small phones -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .banner-form { padding: 22px 16px; border-radius: 18px; } .banner-form .form-control, .banner-form .form-select { padding: 11px 16px; } .category-tabs { padding: 10px; } .process-item, .process-item.down { max-width: 100%; } ul.counter li { flex: 0 0 100%; } .backing-circle { width: 160px; height: 160px; border-width: 6px; margin-top: -80px; } .backing-row { margin-top: 100px; row-gap: 100px; } /* flex:1 on the input does not stop it claiming its default intrinsic width, which is wider than a small phone once the button is beside it. */ .newsletter-form { flex-wrap: wrap; border-radius: 22px; padding: 10px; gap: 10px; } .newsletter-form input { flex: 1 1 100%; min-width: 0; padding: 10px 14px; } .newsletter-form .btn-yellow { flex: 1 1 100%; } .footer-logo img { height: 100px; } .style-features { gap: 18px; } .style-features li { flex: 0 0 calc(33.333% - 12px); } } /* -------------------------------------------------------------------------- 7. ≤399.98px — the narrow end (iPhone SE / 360dp Android) -------------------------------------------------------------------------- */ @media (max-width: 399.98px) { .top-header ul p { font-size: 11px; padding-right: 8px; margin-right: 8px; } .btn-blue, .btn-yellow, .btn-explore, .btn-order { padding: 11px 16px; font-size: 14px; } .category-info { padding: 22px 18px 26px; } .best-for { flex-direction: column; gap: 0; } .style-features li { flex: 0 0 calc(33.333% - 12px); } } /* -------------------------------------------------------------------------- 8. Interior pages (pages.css) — it already carries a responsive layer from 1200 down; these fill the gaps that only show up between lg and xxl, plus the two rows that still overflow on a phone. -------------------------------------------------------------------------- */ .pg-title { font-size: clamp(30px, 3.9vw, 58px); } @media (max-width: 1399.98px) { .pg-hero { padding-top: clamp(190px, 19vw, 260px); } } @media (max-width: 575.98px) { /* Bootstrap's g-5 gutter is 48px, applied as -24px side margins on the row and 24px padding on each column. Inside a 12px container gutter that is wider than the viewport. */ .row.g-5, .row.g-4 { --bs-gutter-x: 24px; } }