/* ========================================================================= TurnKey Pool Designers - shared responsive rules, fixes and utilities. MUST load last, after the per-page stylesheet: these @media blocks sat after the page rules in the original single stylesheet and have to keep winning over them. ========================================================================= */ /* ---------- [FIX] .media-plaque inside a framed image ---------- The 13 service-area pages use
inside .faq-media but never shipped a rule for it, so the caption fell out of the frame and sat as loose text under the picture. It is now the same overlay chip the hero uses. */ .faq-media .media-plaque{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--font-mono);font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,247,242,.92);background:rgba(1,19,33,.62);border:1px solid rgba(77,151,210,.38);border-radius:3px;padding:7px 10px;backdrop-filter:blur(4px);max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- [FIX] FAQ column rhythm ---------- Top-align the two FAQ columns so the accordion keeps its own 14px rhythm. */ .faq-grid{align-items:start} .faq-list{align-content:start} /* ---------- [FIX] copy measure inside the two-column rows ---------- These two paragraphs were capped for a 1160px shell. In the 1440px shell their columns grew but the copy did not, leaving a visible dead strip at the right of each row. Widened to track the column; every single-column reading measure (.section-head, .section-intro, .cta-inner, .about-lede) is left alone so long lines never happen. */ .pp-pane p{max-width:640px} .svc-desc{max-width:600px} /* ---------- header + footer type scale ---------- The nav and footer set type at 0.58-0.9rem, which reads as ~9-14px and was too small to scan in a 1440px shell. One deliberate step up; layout unchanged. */ nav.main a.top{font-size:.74rem;letter-spacing:.09em} .drop{min-width:250px} .drop a{font-size:.75rem} .nav-bar > .btn-primary{font-size:.72rem} .head-phone .mini{font-size:.63rem} .head-phone .num{font-size:1.06rem} .burger{font-size:.76rem} footer{font-size:1rem} .ftr h4{font-size:.75rem;margin-bottom:18px} .ftr a{font-size:1rem} .ftr li{margin-bottom:11px} .ftr-tag{font-size:1rem;max-width:320px} .ftr-meta{font-size:.98rem} .ftr-meta .m{font-size:.66rem} .socials a{font-size:.7rem;padding:8px 12px} .legal{font-size:.7rem} /* ---------- [FIX] floating quote capsule collisions ---------- It is position:fixed bottom-right, which put it underneath the LeadConnector chat launcher and on top of the footer's Privacy / Terms / Sitemap row. It now sits left of the launcher, and site.js parks it once the footer is on screen. */ .fab-quote{right:98px;bottom:22px} .fab-quote.is-parked{opacity:0;transform:translateY(16px);pointer-events:none} /* ---------- [FIX] keep the footer's legal row clear of the chat launcher ---------- The LeadConnector launcher is fixed in the bottom-right corner and was sitting on top of Privacy / Terms / Sitemap. A right-hand gutter on the legal row is enough to clear it horizontally - the launcher is ~60px wide at 20px from the edge, and its greeting bubble reaches ~270px in. Padding the whole footer to clear it vertically just left a dead band, so the footer keeps its normal bottom padding. */ /* ---------- back to top ---------- Sits in the same right-hand column as the LeadConnector chat launcher, above it. Not flush above it: the launcher opens a greeting bubble roughly 110px tall in that exact spot, so the button clears the bubble's full height and stays visible and clickable whether the bubble is showing or dismissed. Appears once you are about a screen down the page. */ .to-top{position:fixed;right:22px;bottom:200px;z-index:170;width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(77,151,210,.55);border-radius:50%;background:rgba(1,19,33,.9);backdrop-filter:blur(8px);color:var(--paper);cursor:pointer;box-shadow:0 12px 30px rgba(1,19,33,.45);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease} .to-top.on{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--accent-bright);border-color:var(--accent-bright)} .to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .to-top svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ---------- [FIX] nothing renders edge-to-edge any more ---------- .trust-checks is the scrolling ratings/licences ticker. It was the one content block that ran the full viewport width while every other section sat on the 1440 grid, so it now shares that grid and keeps a 24px gutter below 1440 - matching .section's own horizontal padding. Its overflow:hidden was already there for the marquee, so the rounded corners clip cleanly. Section backgrounds, the wave dividers and the hero video stay full-bleed: those are backdrops, not content. */ .trust-checks{max-width:var(--container);width:calc(100% - 48px);margin-left:auto;margin-right:auto;border-radius:10px} /* ---------- [FIX] article + legal pages on the 1440 grid ---------- Their containers now run the full width like every other section. The article grid gets a wider rail and gutter so the extra room is used rather than left as a dead strip, and the reading measure grows with it but stays sane. */ .art-grid{grid-template-columns:310px minmax(0,1fr);gap:72px} .art-body{max-width:920px} .legal-page .lp-intro{max-width:980px} /* ---------- article elements the template never had to style ---------- Angel's one blog mockup used only paragraphs, headings, images and tables. The other 28 posts also use lists and
accordions, and the live copy carried their styling as inline style="" attributes pasted out of a chat export. Those are stripped, so the styling lives here instead. */ .art-body ul,.art-body ol{margin:0 0 18px 24px;color:var(--body-dark);font-size:1.03rem;line-height:1.75} .art-body ul{list-style:disc} .art-body ol{list-style:decimal} .art-body li{margin-bottom:9px;padding-left:4px} .art-body li::marker{color:var(--accent-deep)} .art-body ul ul,.art-body ol ol,.art-body ul ol,.art-body ol ul{margin:9px 0 4px 22px} .art-body b,.art-body strong{font-weight:700;color:var(--ink-2)} .art-body details{border-bottom:1px solid var(--border-light);padding:14px 0} .art-body details:first-of-type{border-top:1px solid var(--border-light)} .art-body summary{position:relative;list-style:none;cursor:pointer;padding-right:30px;font-family:var(--font-serif);font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--ink-2)} .art-body summary::-webkit-details-marker{display:none} .art-body summary::after{content:"+";position:absolute;right:0;top:-1px;font-family:var(--font-sans);font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--accent-deep)} .art-body details[open] summary::after{content:"‘2"} .art-body details > p{margin:12px 0 0} .art-body summary:hover{color:var(--accent-deep)} /* ---------- layout utilities (replace the inline style="" attributes) ---------- */ .u-center{justify-content:center} .u-mb-0{margin-bottom:0} .u-pt-0{padding-top:0} .u-pt-64{padding-top:64px} .u-pt-56-pb-64{padding-top:56px;padding-bottom:64px} .u-mt-24{margin-top:24px} .u-mt-26{margin-top:26px} .u-mt-30{margin-top:30px} .u-mt-34{margin-top:34px} .u-mt-38{margin-top:38px} .u-mt-48{margin-top:48px} .u-m-0{margin:0} /* ---------- shared breakpoints (order-critical, see the header) ---------- */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @keyframes waveFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.trust .wave-top svg{animation:none}} @media (max-width:980px){.faq-grid{grid-template-columns:1fr;gap:34px}.faq-a-in{padding-left:22px}} @media (prefers-reduced-motion:reduce){.faq-item,.faq.is-in .faq-item,.faq-side,.faq.is-in .faq-side{opacity:1;transform:none;transition:none}.faq-a,.faq-q .fx,.faq-n{transition:none}} @keyframes pillSweep{from{width:0}to{width:100%}} @keyframes pillInk{0%{color:#F8F7F2}55%{color:#F8F7F2}100%{color:#021F35}} @media (prefers-reduced-motion:reduce){h1 em.animate::before,h1 em.animate{animation:none}} @keyframes starPulse{0%,100%{opacity:1}50%{opacity:.5}} @keyframes tbSlide{to{transform:translateX(-50%)}} @media (max-width:1100px){.trust-stats{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.trust-stats{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ .tr-item,.trust-checks{opacity:1;transform:none;transition:none} .trust.is-in .trust-checks .stars{animation:none} .tb-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:14px 16px;row-gap:8px} .tb-track span.dup{display:none} } @keyframes ppPop{0%{opacity:0;transform:translateY(26px) scale(.92);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}} @keyframes ppBubble{0%{opacity:0;transform:translateY(0) translateX(0)}12%{opacity:.9}55%{transform:translateY(-90px) translateX(6px)}100%{opacity:0;transform:translateY(-170px) translateX(-5px)}} @keyframes ppRipple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}} @media (max-width:900px){.proc-play{grid-template-columns:1fr;gap:34px}.pp-num{font-size:6rem}} @media (prefers-reduced-motion:reduce){ .pp-num.pop{animation:none;opacity:1} .pp-num{background-position:50% 100% !important;transition:none !important} .pp-pane{transition:none} .pp-bubbles,.pp-dots button.on::before,.pp-dots button.on::after{display:none} } @media (min-width:641px){ .svc-rows li{opacity:0;transform:translateX(64px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)} .svc-rows li:nth-child(even){transform:translateX(-64px)} .svc-rows li.is-in{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){.svc-rows li,.svc-rows li.is-in{opacity:1;transform:none;transition:none}} @keyframes abtDrift{from{transform:translate(0,0)}to{transform:translate(6%,8%)}} @keyframes abtDrift2{from{transform:translate(0,0)}to{transform:translate(-6%,-8%)}} @media (prefers-reduced-motion:reduce){.abt.is-in .abt-card:hover{transform:none}} @media (max-width:900px){.abt-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ .abt-glow::before,.abt-glow::after,.abt-bub{animation:none} .abt-bub{display:none} .abt-lede2,.abt.is-in .abt-lede2,.abt-card,.abt.is-in .abt-card{opacity:1;transform:none;filter:none;transition:none} } @media (max-width:980px){.tsl-card{flex-basis:calc((100% - 18px)/2)}} @media (max-width:640px){.tsl-card{flex-basis:100%}.tsl-arrow{width:40px;height:40px}} @media (prefers-reduced-motion:reduce){.tsl-track{transition:none}} @media (max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.stats{grid-template-columns:1fr}} @keyframes wwlFloat{from{transform:translateY(0)}to{transform:translateY(-11px)}} @keyframes wwlEmerge{0%{transform:scale(1.55);filter:blur(16px) brightness(1.18)}55%{transform:scale(1.12);filter:blur(4px) brightness(1.08)}80%{transform:scale(.978);filter:blur(.5px) brightness(1.02)}100%{transform:scale(1);filter:blur(0) brightness(1)}} @media (max-width:900px){.wwl{grid-template-columns:1fr;gap:30px}} @media (max-width:535px){.wwl-list{columns:1}.wwl-label .city{font-size:1.2rem}.wwl-go{padding:8px 10px;right:12px;bottom:14px}} @keyframes ctaPan{to{transform:scale(1.08)}} @media (prefers-reduced-motion:reduce){.cta-bg img{animation:none}} /* The header and the menu at every width are in assets/css/nav.css, which loads after this sheet. What stood here turned the navigation into a list under the header with every submenu already open and no way to shut it. */ /* ---------- breakpoints belonging to the fixes above ---------- */ @media (max-width:1100px){ .fab-quote{right:auto;left:16px;bottom:16px} } @media (min-width:1101px){ .legal{padding-right:150px} } @media (prefers-reduced-motion:reduce){ .to-top{transition:none} } @media (max-width:1100px){ .to-top{right:16px;bottom:186px;width:42px;height:42px} } @media (max-width:1240px){ .art-grid{grid-template-columns:270px minmax(0,1fr);gap:48px} } /* ---------- decorative bubbles (were inline style="") ---------- */ .abt-bub-1{left:7%;width:10px;height:10px;animation-delay:0s} .abt-bub-2{left:22%;width:6px;height:6px;animation-delay:2.2s;animation-duration:6.5s} .abt-bub-3{left:58%;width:12px;height:12px;animation-delay:1.1s;animation-duration:9s} .abt-bub-4{left:78%;width:7px;height:7px;animation-delay:3.4s;animation-duration:7s} .abt-bub-5{left:92%;width:9px;height:9px;animation-delay:4.6s;animation-duration:8.4s} .abt-bub-6{left:9%;width:9px;height:9px;animation-delay:0s} .abt-bub-7{left:46%;width:6px;height:6px;animation-delay:2.4s;animation-duration:6.5s} .abt-bub-8{left:84%;width:11px;height:11px;animation-delay:1.2s;animation-duration:8.6s}