/* ========================================================================== Swimi — בריכות שחייה | Global stylesheet Palette: deep water teal + travertine sand. Light mode. ========================================================================== */ :root{ --ink:#06323C; --ink-soft:#355059; --aqua:#0E8FA3; --aqua-deep:#0A6B7C; --aqua-dark:#074A57; --aqua-mist:#DCEFF2; --sand:#E9DFCC; --sand-soft:#F6F1E6; --surface:#F4FAFB; --white:#FFFFFF; --card:#FFFFFF; --link:#085A69; --header-bg:rgba(244,250,251,.9); --footer-bg:#05303A; --row-alt:#F8FCFD; --line:#CFE2E6; --ok:#1E7A5A; --radius:14px; --radius-lg:26px; --shadow-sm:0 2px 10px rgba(6,50,60,.07); --shadow:0 14px 40px rgba(6,50,60,.10); --shadow-lg:0 28px 70px rgba(6,50,60,.16); --container:1200px; --gap:clamp(24px,3.6vw,44px); --section-y:clamp(76px,9.5vw,144px); --font:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } [data-theme="dark"]{ --ink:#E8F3F5; --ink-soft:#B4CDD3; --surface:#08222A; --card:#0D2C34; --line:#1D4752; --aqua:#3FC9DB; --aqua-deep:#0B7A8C; --aqua-dark:#0A6577; --aqua-mist:#123B45; --sand:#1A3B42; --sand-soft:#0F2C33; --link:#5FD8E8; --header-bg:rgba(8,34,42,.92); --footer-bg:#051A20; --row-alt:#0B2830; --shadow-sm:0 2px 10px rgba(0,0,0,.4); --shadow:0 14px 40px rgba(0,0,0,.45); --shadow-lg:0 28px 70px rgba(0,0,0,.55); } html{color-scheme:light} [data-theme="dark"]{color-scheme:dark} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{ margin:0; font-family:var(--font); font-weight:400; font-size:clamp(16px,1.05vw,17.5px); line-height:1.85; color:var(--ink); background:var(--surface); -webkit-font-smoothing:antialiased; } img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--aqua-dark)} ul,ol{padding-inline-start:1.15em} li{margin-block:.5em} :focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px} /* ---------- Type scale ---------- */ h1,h2,h3,h4{margin:0 0 .6em;font-weight:600;letter-spacing:-.018em;line-height:1.2;color:var(--ink)} h1{font-size:clamp(2rem,4.9vw,3.4rem);font-weight:600} h2{font-size:clamp(1.55rem,3.2vw,2.35rem);font-weight:600} h3{font-size:clamp(1.14rem,1.9vw,1.42rem);font-weight:600;letter-spacing:-.008em} h4{font-size:1.05rem;font-weight:600;letter-spacing:0} p{margin:0 0 1.25em} .lead{font-size:clamp(1.05rem,1.7vw,1.28rem);font-weight:300;color:var(--ink-soft);line-height:1.7} strong{font-weight:700} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px} .section{padding-block:var(--section-y)} .section--sand{background:var(--sand-soft)} .section--mist{background:linear-gradient(180deg,var(--aqua-mist),var(--surface))} .section--deep{background:var(--aqua-dark);color:#EAF6F8} .section--deep h2,.section--deep h3{color:#fff} .section--deep .lead{color:#BEDDE3} .section-head{max-width:66ch;margin-bottom:clamp(38px,5vw,68px)} .section-head--center{margin-left:auto;margin-right:auto;text-align:center} .grid{display:grid;gap:var(--gap)} .grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .split{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1.05fr .95fr;align-items:center} @media(max-width:860px){.split{grid-template-columns:1fr}} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 30px;border-radius:999px;border:2px solid transparent; font-family:var(--font);font-size:1rem;font-weight:600;line-height:1.2; text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } .btn:hover{transform:translateY(-2px)} .btn svg{width:19px;height:19px;flex:none} .btn--primary{background:var(--aqua-deep);color:#fff;box-shadow:0 10px 26px rgba(10,107,124,.32)} .btn--primary:hover{background:var(--aqua-dark);color:#fff} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--aqua-deep);color:var(--aqua-dark)} /* Ghost buttons default to dark ink on a light page. On the dark surfaces they also appear on — the deep band, the CTA band and the calculator's result panel — that ink is invisible, so the outline flips to white. */ .section--deep .btn--ghost,.cta-band .btn--ghost,.calc-result .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)} .section--deep .btn--ghost:hover,.cta-band .btn--ghost:hover,.calc-result .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff} .btn--light{background:#fff;color:var(--aqua-dark)} .btn--light:hover{color:var(--aqua-dark)} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:900; background:var(--header-bg);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } /* The mobile menu panel is a child of this header, and that broke it two ways. 1. `backdrop-filter` makes an element the containing block for its own fixed-position descendants. So the panel's `inset` was resolving against the 76px header instead of the viewport: measured, its background box came out 45px tall while the list inside it was 644px. The menu items spilled out over the page with nothing painted behind them. 2. The header is also a stacking context (the z-index and the backdrop-filter each make one), so the panel's z-index:1200 was capped at 900. Everything pinned over the viewport — the sticky action bar at 950, the accessibility button and back-to-top at 1000, the accessibility panel at 1001 — painted straight through it. Dropping the filter while the menu is open hands the panel back to the viewport, and lifting the header lifts the panel with it. 1300 clears all of the above and still leaves the skip link (2000) on top, where it belongs. With the blur gone the header's translucent background has nothing to blur, so it goes opaque for the duration. */ body.nav-open .site-header{z-index:1300;backdrop-filter:none;background:var(--card)} .header-inner{display:flex;align-items:center;gap:14px;min-height:76px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.35rem;letter-spacing:-.03em} .brand svg{width:34px;height:34px} .brand span small{display:block;font-size:.62rem;font-weight:500;letter-spacing:.22em;color:var(--aqua-deep);text-transform:uppercase;line-height:1} .nav{margin-inline-start:auto} .nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav a{ display:block;padding:9px 11px;border-radius:999px;white-space:nowrap; color:var(--ink);text-decoration:none;font-size:.94rem;font-weight:500; } .nav a:hover,.nav a[aria-current="page"]{background:var(--aqua-mist);color:var(--aqua-dark)} .nav a[aria-current="page"]{font-weight:700} .has-sub{position:relative} .has-sub>a{display:flex;align-items:center;gap:7px} .has-sub>a::after{ content:"";display:block;width:7px;height:7px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);margin-top:-4px;transition:transform .18s ease; } .has-sub:hover>a::after,.has-sub.is-open>a::after{transform:rotate(225deg);margin-top:2px} .sub{ position:absolute;inset-inline-start:0;top:100%;min-width:250px;padding-top:12px; background:transparent; display:none;flex-direction:column; } .sub-inner{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:2px; } .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.is-open .sub{display:flex} .sub a{border-radius:9px;font-size:.94rem;padding:11px 14px} .header-cta{display:flex;gap:10px;align-items:center} .header-cta .btn{padding:10px 18px;font-size:.92rem} @media(max-width:1280px){.header-cta .btn--ghost{display:none}} /* In the header the phone button is the icon alone. The number is already spelled out in the hero, in the sticky mobile bar and in the footer, and here it was the widest thing in a row that was running out of room. Sized and aligned to the theme and language buttons next to it so the three read as one strip of controls; round rather than squircle because this one is the action, not a setting. The label stays in the markup for anyone reading the page without CSS, and the anchor's aria-label carries the accessible name either way. */ .header-cta .btn--primary{width:42px;height:42px;padding:0;gap:0;border-radius:50%} .header-cta .btn--primary .btn-label{display:none} .header-cta .btn--primary svg{width:20px;height:20px} .nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--card);border-radius:12px;cursor:pointer;padding:0;align-items:center;justify-content:center} .nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:.2s} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;inset-inline-start:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} @media(max-width:1000px){ .nav-toggle{display:flex} .header-cta .btn--ghost{display:none} .nav{ /* Starts at the header's real height, which JS measures into --header-h; the old hard-coded 74px was already 3px short of the 77px header and would drift further the moment a line of it wrapped. */ position:fixed;inset:var(--header-h,76px) 0 0;z-index:1200; /* var(--card), not #fff: the panel has to be opaque so the page cannot be read through it, but a hard white one put light text on white in dark mode. */ background:var(--card);padding:22px;overflow-y:auto; transform:translateY(-14px);opacity:0;visibility:hidden;transition:.22s ease; border-top:1px solid var(--line);margin:0; } .nav.is-open{transform:none;opacity:1;visibility:visible} .nav ul{flex-direction:column;align-items:stretch;gap:2px} .nav a{padding:14px 12px;font-size:1.06rem;border-radius:12px} .has-sub>a::after{float:left;margin-top:9px} .sub{position:static;display:flex;padding-top:0;margin-inline-start:12px} .sub-inner{box-shadow:none;border:0;border-inline-start:2px solid var(--aqua-mist);border-radius:0;padding:0 0 0 0} } body.nav-open{overflow:hidden} /* ---------- Hero (light water field + wave divider) ---------- */ .hero{position:relative;background:linear-gradient(168deg,#FAFDFD 0%,#E8F5F7 52%,#D6EDF1 100%)} .hero::after{ content:"";position:absolute;inset-inline:0;bottom:-1px;height:clamp(38px,5vw,66px);pointer-events:none; background:var(--surface); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 34c120-30 240-30 360 0s240 30 360 0 240-30 360 0 120 20 120 20v16H0z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 34c120-30 240-30 360 0s240 30 360 0 240-30 360 0 120 20 120 20v16H0z'/%3E%3C/svg%3E"); -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } .hero-inner{ position:relative;z-index:2; padding-block:clamp(40px,5.5vw,76px) clamp(66px,9vw,120px); display:grid;gap:clamp(28px,4vw,58px);grid-template-columns:1.05fr .95fr;align-items:center; } @media(max-width:940px){.hero-inner{grid-template-columns:1fr}} .hero--text .hero-inner{grid-template-columns:1fr;max-width:74ch} .hero h1{max-width:16ch} .hero h1 em{font-style:normal;font-weight:300;display:block;color:var(--aqua-deep)} .hero .lead{max-width:54ch;color:var(--ink-soft)} .hero-figure{margin:0 auto;position:relative;max-width:640px;width:100%} .hero-figure img{ width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); border:6px solid var(--card);background:var(--card); } /* Lottie hero: the frame moves to the wrapper so the static SVG and the animation share identical geometry and swap without any layout shift. */ .hero-anim{ position:relative;width:100%;aspect-ratio:800/500;overflow:hidden; border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); border:6px solid var(--card);background:var(--card); } .hero-anim>img{width:100%;height:100%;display:block;border:0;border-radius:0;box-shadow:none;object-fit:cover} .hero-anim>svg{display:block;width:100%!important;height:100%!important} .hero-anim.is-playing>img{display:none} .hero-stats{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,34px);margin-top:32px;padding-top:24px;border-top:1px solid #C2DFE4} .hero-stats div{min-width:96px} .hero-stats b{display:block;font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:800;letter-spacing:-.03em;color:var(--aqua-dark);line-height:1.1} .hero-stats span{font-size:.85rem;color:var(--ink-soft);font-weight:500} .hero--inner::after{display:none} .hero--inner{background:linear-gradient(160deg,#FAFDFD,#E4F2F5 72%,#D3EAEE)} .hero--inner .hero-inner{padding-block:clamp(26px,3.5vw,48px) clamp(36px,4.5vw,64px)} /* ---------- Breadcrumbs ---------- */ .crumbs{font-size:.85rem;color:var(--ink-soft);padding-top:16px} .crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0} .crumbs li::after{content:"‹";margin-inline-start:6px;color:var(--aqua)} .crumbs li:last-child::after{content:""} .crumbs a{color:var(--ink-soft);text-decoration:none} .crumbs a:hover{color:var(--aqua-dark);text-decoration:underline} /* ---------- Cards ---------- */ .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; display:flex;flex-direction:column; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--aqua-mist)} .card h3{margin-bottom:.4em} .card p{color:var(--ink-soft);margin-bottom:1em} .card .card-link{margin-top:auto;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px} .card .card-link::after{content:"←";transition:transform .2s} .card:hover .card-link::after{transform:translateX(-4px)} .card-icon{width:52px;height:52px;border-radius:14px;background:var(--aqua-mist);display:grid;place-items:center;margin-bottom:16px} .card-icon svg{width:27px;height:27px;stroke:var(--aqua-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .card-media{margin:calc(-1 * clamp(26px,3vw,38px));margin-bottom:20px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden} .card-media img{width:100%;aspect-ratio:16/10;object-fit:cover} .card--flat{box-shadow:none;background:var(--sand-soft);border-color:var(--line)} /* Tile numerals — pool depth-marker device */ .steps{counter-reset:s;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px} .step::before{ counter-increment:s;content:counter(s,decimal-leading-zero); display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px; background:var(--aqua-mist);border:1px solid #B9DCE2;border-radius:8px; font-weight:800;font-size:1.02rem;color:var(--aqua-dark);letter-spacing:-.02em; } .step h3{font-size:1.1rem} .step p{margin:0;color:var(--ink-soft);font-size:.96rem} /* ---------- Prose ---------- */ .prose{max-width:74ch;margin-left:0;margin-right:0} .prose h2{margin-top:2.3em} .prose h3{margin-top:1.8em} .prose>:first-child{margin-top:0} .prose ul,.prose ol{margin-bottom:1.15em} .callout{ border-inline-start:4px solid var(--aqua);background:var(--aqua-mist); padding:24px 28px;border-radius:0 var(--radius) var(--radius) 0;margin:2em 0; } .callout p:last-child{margin-bottom:0} .callout strong{color:var(--aqua-dark)} /* ---------- Table ---------- */ .table-wrap{overflow-x:auto;margin:2em 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)} table{width:100%;border-collapse:collapse;min-width:520px;font-size:.96rem} caption{text-align:start;padding:16px 18px 0;font-weight:700;color:var(--ink)} th,td{padding:13px 18px;text-align:start;border-bottom:1px solid var(--line)} thead th{background:var(--aqua-dark);color:#fff;font-weight:700;border-bottom:0} tbody tr:last-child td{border-bottom:0} tbody tr:nth-child(even){background:var(--row-alt)} /* ---------- FAQ ---------- */ .faq{display:grid;gap:12px;max-width:80ch} .faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .faq summary{ cursor:pointer;padding:18px 22px;font-weight:700;font-size:1.03rem; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--aqua-deep);line-height:1;flex:none} .faq details[open] summary::after{content:"–"} .faq details[open] summary{background:var(--aqua-mist)} .faq .faq-body{padding:18px 22px;border-top:1px solid var(--line)} .faq .faq-body p:last-child{margin-bottom:0} /* ---------- Pills / lists ---------- */ .pills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0} .pills li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.9rem;font-weight:500} .checks{list-style:none;padding:0;margin:0 0 1.2em} .checks li{position:relative;padding-inline-start:30px;margin-block:.55em} .checks li::before{ content:"";position:absolute;inset-inline-start:0;top:.55em;width:16px;height:9px; border-inline-start:2.5px solid var(--ok);border-block-end:2.5px solid var(--ok);transform:rotate(-45deg); } .crosses{list-style:none;padding:0;margin:0 0 1.2em} .crosses li{position:relative;padding-inline-start:30px;margin-block:.55em} .crosses li::before{content:"×";position:absolute;inset-inline-start:2px;top:-.05em;font-size:1.3rem;color:#B4472F;font-weight:700} /* ---------- CTA band ---------- */ .cta-band{position:relative;overflow:hidden;isolation:isolate;background-color:var(--aqua-dark);color:#fff;border-radius:var(--radius-lg);padding:clamp(30px,4.5vw,56px);display:grid;gap:26px;grid-template-columns:1fr;justify-items:center;text-align:center} .cta-band .btn-row{flex-direction:column;align-items:center;justify-content:center} .cta-band h2{color:#fff;margin-bottom:.35em} .cta-band p{color:#C6E3E8;margin-bottom:0} .cta-band::before{ /* z-index:-1 (paired with the band's `isolation`) keeps the glow behind the text. At .55 the paragraph sat at 4.27:1 over the blob's peak, just under AA; .45 lifts it to 4.70:1 with no visible loss of glow. */ content:"";position:absolute;z-index:-1;inset-block-start:-40%;inset-inline-end:-8%;width:420px;height:420px; background:radial-gradient(circle,rgba(14,143,163,.45),transparent 68%);pointer-events:none; } /* ---------- Form ---------- */ .form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm)} .field{margin-bottom:16px} .field label{display:block;font-weight:600;font-size:.94rem;margin-bottom:6px} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px; font-family:var(--font);font-size:1rem;color:var(--ink);background:var(--surface); } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--aqua);background:var(--card);outline:2px solid rgba(14,143,163,.25)} .field textarea{min-height:118px;resize:vertical} .field-note{font-size:.85rem;color:var(--ink-soft);margin-top:8px} /* ---------- Footer ---------- */ .site-footer{background:var(--footer-bg);color:#BFDDE3;padding-block:clamp(48px,6vw,76px) 0;margin-top:0} .site-footer h3{color:#fff;font-size:1.02rem;font-weight:700;letter-spacing:0;margin-bottom:16px} .footer-grid{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr 1.1fr} @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr}} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer li{margin-block:.5em} .site-footer a{color:#BFDDE3;text-decoration:none;font-size:.95rem} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer .brand{color:#fff} .site-footer .brand span small{color:#7FC3CE} .footer-about p{font-size:.94rem;color:#9FC7CF;max-width:36ch} /* The two fixed round buttons (accessibility, back-to-top) sit 16px in from each bottom corner and are 52px wide, so the last row of the footer — the only content that ever scrolls under them — reserves 68px on both sides. */ .footer-bottom{margin-top:44px;border-top:1px solid rgba(255,255,255,.14);padding:20px 68px 26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem;color:#8FBAC3} @media(max-width:720px){ /* on mobile both buttons lift above the sticky action bar, clearing the footer entirely, so the reserve is not needed and the text gets the width */ .footer-bottom{padding-inline:0} } /* ---------- Mobile sticky action bar ---------- */ .mobile-bar{display:none} @media(max-width:720px){ .mobile-bar{ display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed; inset-inline:0;bottom:0;z-index:950;padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--header-bg);border-top:1px solid var(--line);backdrop-filter:blur(10px); } .mobile-bar .btn{padding:12px 10px;font-size:.95rem} body{padding-bottom:74px} } /* ---------- Back to top ---------- Mirrors the accessibility button on the opposite corner: same size, same pill, so the two read as one pair of utility controls rather than two unrelated widgets. RTL-safe — logical `inset-inline-end` puts it on the left in Hebrew and on the right if the site is ever run LTR. */ .to-top{ position:fixed;inset-inline-end:16px;bottom:16px;z-index:1000; width:52px;height:52px;border-radius:50%;border:2px solid #fff; background:var(--aqua-dark);color:#fff;cursor:pointer;display:grid;place-items:center; box-shadow:var(--shadow);padding:0; /* Hidden by opacity+transform (composited, no layout work) rather than display, so the fade actually animates. `visibility` is what takes it out of the tab order while hidden, and its transition is delayed until the fade-out has finished so the button does not vanish mid-animation. */ opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s; } .to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s} /* `display:grid` above outranks the UA stylesheet's [hidden]{display:none}, so the no-JS fallback has to be restated explicitly. */ .to-top[hidden]{display:none} .to-top:hover{background:var(--aqua-deep)} .to-top svg{width:24px;height:24px;fill:currentColor} /* clear the mobile action bar, exactly as .a11y-btn does */ @media(max-width:720px){.to-top{bottom:84px}} /* ---------- Accessibility widget ---------- */ .a11y-btn{ position:fixed;inset-inline-start:16px;bottom:16px;z-index:1000; width:52px;height:52px;border-radius:50%;border:2px solid #fff; background:var(--aqua-dark);color:#fff;cursor:pointer;display:grid;place-items:center; box-shadow:var(--shadow); } .a11y-btn svg{width:26px;height:26px;fill:currentColor} @media(max-width:720px){.a11y-btn{bottom:84px}} .a11y-panel{ position:fixed;inset-inline-start:16px;bottom:78px;z-index:1001;width:min(300px,calc(100vw - 32px)); background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:20px;display:none; } .a11y-panel.is-open{display:block} @media(max-width:720px){.a11y-panel{bottom:146px}} .a11y-panel h2{font-size:1.05rem;margin-bottom:14px} .a11y-panel button{ display:flex;width:100%;align-items:center;gap:10px;margin-bottom:7px;padding:11px 13px; background:var(--surface);border:1px solid var(--line);border-radius:11px; font-family:var(--font);font-size:.94rem;font-weight:500;color:var(--ink);cursor:pointer;text-align:start; } .a11y-panel button:hover{background:var(--aqua-mist);border-color:var(--aqua)} .a11y-panel button[aria-pressed="true"]{background:var(--aqua-dark);color:#fff;border-color:var(--aqua-dark)} body.a11y-contrast{--surface:#fff;--sand-soft:#fff;--aqua-mist:#EAF7F9;--ink:#000;--ink-soft:#1A1A1A;--aqua-deep:#004E5C;--line:#7A9AA1} body.a11y-contrast .hero,body.a11y-contrast .section--mist{background:#fff} body.a11y-contrast .hero-stats b{color:#003D49} body.a11y-contrast .hero-stats span{color:#1A1A1A} body.a11y-contrast .hero-stats{border-color:#7A9AA1} body.a11y-contrast .hero,body.a11y-contrast .hero--inner{background:#fff} body.a11y-contrast .hero::after{display:none} body.a11y-links a{text-decoration:underline !important;font-weight:600} body.a11y-nomotion *,body.a11y-nomotion *::before,body.a11y-nomotion *::after{animation:none !important;transition:none !important} .skip-link{position:fixed;top:0;inset-inline-start:0;z-index:2000;background:var(--aqua-dark);color:#fff; padding:12px 22px;border-radius:0 0 12px 12px;font-weight:700;text-decoration:none; transform:translateY(-130%);transition:transform .18s ease} .skip-link:focus{transform:translateY(0)} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- Entrance animation (pure CSS — never hides content) ---------- */ @keyframes swimiFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .reveal{animation:swimiFadeUp .55s ease both} /* ---------- Ambient background motion (soft drifting light, water-like) ---------- */ @keyframes swimiDrift{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,-5%) scale(1.14)} } @keyframes swimiDriftSlow{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5%,4%) scale(1.1)} } /* No `isolation` here on purpose. These sections paint an opaque background and are not stacking contexts, so the z-index:-1 glows below sit *behind* that background and never show. Giving them a stacking context would reveal the blobs — and the one under the hero would break the colour match that makes the hero's wave divider read as a seamless edge. Leave them dormant. */ .hero,.section--sand,.section--mist,.section--deep,.section--calc{position:relative;overflow:hidden} .hero::before,.section--sand::before,.section--mist::before,.section--deep::before,.section--calc::before, .section--sand::after,.section--mist::after,.section--deep::after{ content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(60px); } .hero::before{width:520px;height:520px;inset-inline-end:-8%;top:-20%;background:radial-gradient(circle,rgba(14,143,163,.34),transparent 70%);animation:swimiDrift 24s ease-in-out infinite} .section--sand::before{width:420px;height:420px;inset-inline-start:-8%;top:-16%;background:radial-gradient(circle,rgba(14,143,163,.24),transparent 70%);animation:swimiDrift 22s ease-in-out infinite} .section--sand::after{width:340px;height:340px;inset-inline-end:-6%;bottom:-18%;background:radial-gradient(circle,rgba(14,143,163,.18),transparent 70%);animation:swimiDriftSlow 27s ease-in-out infinite} .section--mist::before{width:460px;height:460px;inset-inline-end:-8%;top:-20%;background:radial-gradient(circle,rgba(14,143,163,.3),transparent 70%);animation:swimiDriftSlow 25s ease-in-out infinite} .section--mist::after{width:360px;height:360px;inset-inline-start:-6%;bottom:-16%;background:radial-gradient(circle,rgba(10,107,124,.2),transparent 70%);animation:swimiDrift 20s ease-in-out infinite} .section--deep::before{width:500px;height:500px;inset-inline-start:-10%;top:-22%;background:radial-gradient(circle,rgba(63,201,219,.32),transparent 70%);animation:swimiDrift 26s ease-in-out infinite} .section--deep::after{width:380px;height:380px;inset-inline-end:-6%;bottom:-20%;background:radial-gradient(circle,rgba(63,201,219,.22),transparent 70%);animation:swimiDriftSlow 30s ease-in-out infinite} .section--calc::before{width:400px;height:400px;inset-inline-end:-6%;top:-18%;background:radial-gradient(circle,rgba(14,143,163,.24),transparent 70%);animation:swimiDrift 24s ease-in-out infinite} .cta-band::before{animation:swimiDrift 20s ease-in-out infinite} /* ---------- 404 ---------- */ .err{min-height:62vh;display:grid;place-items:center;text-align:center;padding-block:var(--section-y)} .err b{display:block;font-size:clamp(5rem,17vw,10rem);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--aqua);margin-bottom:12px} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{animation:none} } @media print{.site-header,.site-footer,.mobile-bar,.a11y-btn,.a11y-panel,.to-top{display:none!important}} /* ---------- Cost calculator ---------- */ .section--calc{background:linear-gradient(180deg,var(--surface),var(--aqua-mist))} .calc{ display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1.25fr .75fr; background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(20px,2.8vw,36px);box-shadow:var(--shadow); } @media(max-width:880px){.calc{grid-template-columns:1fr}} .calc-controls{display:grid;gap:22px;align-content:start} .calc-field{border:0;padding:0;margin:0;min-width:0} .calc-field legend,.calc-field>label{ display:block;font-weight:700;font-size:.95rem;margin-bottom:10px;color:var(--ink);padding:0; } .calc-field output{color:var(--aqua-dark);font-variant-numeric:tabular-nums} .calc-radios,.calc-checks{display:flex;flex-wrap:wrap;gap:8px} .calc-radios label,.calc-checks label{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; border:1px solid var(--line);border-radius:999px;padding:9px 15px; font-size:.93rem;font-weight:500;background:var(--surface);transition:.15s; } .calc-radios label:hover,.calc-checks label:hover{border-color:var(--aqua);background:var(--aqua-mist)} .calc-radios input,.calc-checks input{accent-color:var(--aqua-deep);width:16px;height:16px;margin:0;flex:none} .calc-radios label:has(input:checked),.calc-checks label:has(input:checked){ background:var(--aqua-dark);border-color:var(--aqua-dark);color:#fff;font-weight:600; } .calc-radios label:has(input:checked) input,.calc-checks label:has(input:checked) input{accent-color:#fff} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px; background:linear-gradient(90deg,var(--aqua),var(--aqua-mist));outline-offset:6px; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:26px;height:26px;border-radius:50%; background:var(--aqua-dark);border:3px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer; } input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:var(--aqua-dark); border:3px solid #fff;cursor:pointer; } .calc-result{ background:var(--aqua-dark);color:#EAF6F8;border-radius:var(--radius); padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:4px; } .calc-result-label{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#9FD0D9;font-weight:600} .calc-total{ font-size:clamp(1.5rem,3vw,2.05rem);font-weight:800;color:#fff;letter-spacing:-.02em; line-height:1.2;margin-bottom:14px;font-variant-numeric:tabular-nums;direction:ltr;text-align:right; } .calc-lines{margin:0 0 16px;padding:0;font-size:.9rem;border-top:1px solid rgba(255,255,255,.18)} .calc-lines div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1)} .calc-lines dt{color:#BEDDE3} .calc-lines dd{margin:0;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr} .calc-note{font-size:.82rem;color:#A8CFD7;margin:0 0 16px;line-height:1.6} .calc-result .btn{width:100%} .calc-result .btn-row{flex-direction:column;gap:9px;margin-top:auto} /* ---------- Header tools: theme + language ---------- */ .header-tools{display:flex;align-items:center;gap:6px} .tool-btn{ width:42px;height:42px;flex:none;display:grid;place-items:center; border:1px solid var(--line);border-radius:12px;background:var(--card); color:var(--ink);cursor:pointer;padding:0;transition:.16s; } .tool-btn:hover{border-color:var(--aqua);color:var(--aqua-dark);background:var(--aqua-mist)} .tool-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .theme-btn .icon-moon{display:none} [data-theme="dark"] .theme-btn .icon-sun{display:none} [data-theme="dark"] .theme-btn .icon-moon{display:block} .lang{position:relative} .lang-menu{ position:absolute;inset-inline-end:0;top:100%;padding-top:10px;min-width:190px; display:none;flex-direction:column;z-index:960; } /* Open state is the class alone. `:focus-within` used to be here as well, but the entries are now buttons that act on this page instead of links that leave it: focus stays inside the menu after a choice, so focus-within would hold the menu open over the page it had just re-rendered. The class covers the keyboard just as well — it is set by the toggle and survives tabbing through the rows. */ .lang.is-open .lang-menu{display:flex} .lang-menu-inner{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:2px; } /* These entries act on the page that is already open — they swap its text in place — so they are buttons, not links. The extra declarations are the reset a