/* Theme Name: HydroFLOW Israel Theme URI: https://hydroflow-israel.co.il Author: HydroFLOW Israel Description: Custom bilingual (HE/EN) theme for HydroFLOW Israel, ported 1:1 from the approved HTML designs. RTL-first, Polylang-ready. Version: 0.2.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: hydroflow */ /* ============================================================ TOKENS ============================================================ */ :root { --teal: #05224C; --teal-d: #0272CE; --teal-light: #E9F2FC; --navy: #05224C; --navy-2: #04234C; --sky: #0272CE; --blue: var(--navy); --indigo: var(--navy-2); --orange: #B4453A; --grey: #4A5A62; --grey-lt:#CCC9C7; --off: #F7F8FA; --line: #E3E7E6; --caution-bg: #FBF3E4; --caution-line: #E4CFA0; --caution-ink: #7A5A16; } * { box-sizing:border-box; margin:0; padding:0; } html, body { max-width:100%; overflow-x:hidden !important; } /* Hero photo backgrounds: override the inline right-anchored position so more of each photo shows on wide screens instead of being cropped to mostly-dark. */ @media(min-width:701px){ [style*="right center/cover"] { background-position: center center !important; } } [class*="hero"][style*="right center/cover"] { background-size: cover !important; background-color: var(--navy); } /* Defensive cap for the third-party Hostinger AI chat widget, which can get stuck mid-transition at an off-screen width and blow out page scrollWidth. */ .float-box, .float-box--mobile { max-width:100vw !important; } body { color:#000; line-height:1.65; -webkit-font-smoothing:antialiased; background:#fff; } /* Justified body copy — headings, labels, buttons, nav and chips are untouched. text-align-last keeps the final (usually short) line anchored to the natural reading edge instead of stretching it, so RTL Hebrew paragraphs still read correctly. */ p, .faq-body { text-align: right; } [dir="ltr"] p, [dir="ltr"] .faq-body { text-align: left; } img, svg, video { max-width:100%; height:auto; } /* Language / direction. Hebrew pages are RTL (Heebo/Rubik), English pages LTR (Inter). WordPress sets dir on from the page language via Polylang. */ [dir="rtl"] body { font-family:'Heebo',sans-serif; } [dir="ltr"] body { font-family:'Inter',sans-serif; } [dir="rtl"] .fd, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .btn, [dir="rtl"] .nav-links a, [dir="rtl"] .nav-cta, [dir="rtl"] .nav-logo, [dir="rtl"] .nav-mob a, [dir="rtl"] .nav-drop__label, [dir="rtl"] .nav-mob-heading { font-family:'Rubik',sans-serif; } [dir="ltr"] .fd, [dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4, [dir="ltr"] .btn, [dir="ltr"] .nav-links a, [dir="ltr"] .nav-cta, [dir="ltr"] .nav-logo, [dir="ltr"] .nav-mob a, [dir="ltr"] .nav-drop__label, [dir="ltr"] .nav-mob-heading { font-family:'Inter',sans-serif; } img { max-width:100%; height:auto; } .wrap { max-width:1400px; margin:0 auto; padding:0 28px; } .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ============================================================ NAV ============================================================ */ .nav { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 1px 12px rgba(0,0,0,.05); } .nav-inner { display:flex; align-items:center; justify-content:flex-start; height:64px; gap:20px; } @media(min-width:901px){ .nav-inner { display:grid; grid-template-columns:1fr auto 1fr; } .nav-logo { justify-self:start; } .nav-links { justify-self:center; } .nav-actions { justify-self:end; } } .nav-logo { font-size:1.25rem; font-weight:900; color:var(--teal-d); text-decoration:none; flex-shrink:0; } .nav-logo--img { display:inline-flex; align-items:center; } .nav-logo--img img { height:46px; width:auto; display:block; } @media(max-width:600px){ .nav-logo--img img { height:36px; } } .nav-logo em { font-style:italic; } em { font-style:normal; } /* Extra letter-spacing for English (LTR) headings — heavy weight reads cramped without it */ html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] .title { letter-spacing: .02em; } .nav-links { display:flex; list-style:none; align-items:center; } .nav-links a { font-size:.95rem; font-weight:600; color:var(--grey); text-decoration:none; padding:8px 13px; transition:.15s; white-space:nowrap; line-height:1; display:inline-flex; align-items:center; } .nav-links a:hover { color:var(--teal-d); } .nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-inline-start:auto; } .nav-lang { display:flex; gap:4px; list-style:none; } .nav-lang a { font-family:'Inter',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border:1px solid var(--line); background:transparent; color:var(--grey); cursor:pointer; transition:.15s; text-decoration:none; display:inline-block; } .nav-lang a:hover { border-color:var(--teal); color:var(--teal-d); } .nav-lang .current-lang a { background:var(--off); color:var(--teal-d); border-color:var(--teal); } .nav-cta { font-size:.82rem; font-weight:700; padding:9px 20px; background:var(--teal); color:#fff; text-decoration:none; transition:.15s; } .nav-cta:hover { background:var(--teal-d); color:#fff; } /* Products dropdown */ .nav-drop { position:relative; } .nav-dropdown { position:absolute; top:100%; right:0; margin:0; padding:6px 0; list-style:none; min-width:190px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 28px rgba(0,0,0,.09); display:none; flex-direction:column; z-index:150; } [dir="ltr"] .nav-dropdown { right:auto; left:0; } .nav-drop:hover .nav-dropdown, .nav-drop:focus-within .nav-dropdown { display:flex; } .nav-dropdown a { padding:12px 18px; font-size:.92rem; display:block; } .nav-drop__label { cursor:default; font-size:.95rem; font-weight:600; color:var(--grey); padding:8px 13px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; line-height:1; } .nav-drop__label::after { content:""; display:inline-block; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.55; transition:transform .15s; } .nav-drop:hover .nav-drop__label::after, .nav-drop:focus-within .nav-drop__label::after { transform:rotate(225deg); margin-top:3px; } .nav-mob-sub { padding-right:44px !important; font-size:.84rem !important; color:var(--grey); } [dir="ltr"] .nav-mob-sub { padding-right:28px !important; padding-left:44px !important; } .nav-mob-heading { display:block; padding:14px 28px; font-size:.9rem; font-weight:600; color:var(--grey); border-bottom:1px solid var(--line); cursor:default; } .nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; } .nav-burger span { display:block; width:22px; height:2px; background:var(--grey); } .nav-mob { display:none; flex-direction:column; border-top:1px solid var(--line); background:#fff; } .nav-mob.open { display:flex; } .nav-mob a { padding:14px 28px; font-size:.9rem; font-weight:600; color:var(--grey); text-decoration:none; border-bottom:1px solid var(--line); } .nav-mob .nav-mob-langs { display:flex; gap:8px; padding:14px 28px; border-bottom:1px solid var(--line); list-style:none; } .nav-mob .nav-mob-langs a { padding:6px 14px; border:1px solid var(--line); font-family:'Inter',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); } .nav-mob .nav-mob-langs .current-lang a { background:var(--off); color:var(--teal-d); border-color:var(--teal); } @media(max-width:820px){ .nav { position:sticky; } .nav-inner { height:56px; flex-wrap:nowrap; } .nav-links { display:none; } .nav-burger { display:flex; } .nav-actions .nav-lang, .nav-actions .nav-cta { display:none; } /* hidden — moved into the burger drawer */ .nav-actions { gap:0; } .nav-logo { font-size:1.05rem; white-space:nowrap; } .wrap { padding:0 18px; } } /* ============================================================ HERO — teal, minimal ============================================================ */ .hero-wrap { background:radial-gradient(1200px 600px at 15% -10%, #0B3A5C 0%, var(--navy) 55%, #04234C 100%); position:relative; overflow:hidden; max-width:100%; } .hero-wrap::before { display:none; } .hero { padding:80px 0 96px; position:relative; z-index:1; } /* Uniform banner height across the whole site, matching the homepage */ @media(min-width:701px){ .hero { min-height:594px; display:flex; align-items:center; } .hero > * { width:100%; } } @media(min-width:701px){ body.page-id-34 .hero > div, body.page-id-35 .hero > div { padding-top:16px !important; padding-bottom:16px !important; } } .hero-inner { max-width:820px; } @media(max-width:640px){ .hero { padding:56px 0 64px; } .wrap { padding:0 20px; } .hero h1 { font-size:clamp(1.9rem, 8vw, 2.8rem); } .hero-sub { font-size:1rem; } } [dir="ltr"] .hero-inner { text-align:left; margin:0; } .hero-eyebrow { font-size:.85rem; font-weight:700; letter-spacing:.02em; text-transform:none; color:rgba(255,255,255,.85); margin-bottom:20px; display:flex; align-items:flex-start; gap:10px; line-height:1.5; max-width:480px; } .hero-eyebrow::before { content:""; display:block; flex-shrink:0; width:28px; height:2px; background:rgba(255,255,255,.4); margin-top:.85em; } .hero h1 { font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900; line-height:1.05; color:#fff; margin-bottom:24px; } .hero h1 .muted { color:rgba(255,255,255,.55); } .hero-sub { font-size:1.1rem; color:rgba(255,255,255,.82); max-width:600px; line-height:1.72; margin-bottom:36px; } .hero-btns { display:flex; gap:10px; flex-wrap:wrap; } /* Buttons */ .btn { font-size:.87rem; font-weight:700; letter-spacing:.02em; padding:13px 26px; text-decoration:none; display:inline-block; transition:.2s; cursor:pointer; border:none; border-radius:999px; } .btn--white { background:#9FDBF5; color:#0A2A38; } .btn--white:hover { background:#B8E5F8; color:#0A2A38; } .btn--outline { border:2px solid #9FDBF5; background:#9FDBF5; color:#0A2A38; } .btn--outline:hover { background:#B8E5F8; border-color:#B8E5F8; color:#0A2A38; } .hero__btns .btn, .hero-btns .btn { border-radius:999px; } /* Hero CTAs on phones — anchor and rail. The primary action takes a full-width row and the two secondary links sit beneath it as an equal pair, so the block keeps a shared edge on both sides and the hierarchy reads from size and position rather than colour. Grid does it without touching the page markup. Declared after the base .hero-btns flex rule above so it wins the cascade. */ @media(max-width:640px){ .hero-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; } .hero-btns .btn { min-width:0; /* long labels shrink instead of overflowing */ display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 14px; min-height:44px; } .hero-btns .btn:nth-child(1) { grid-column:1 / -1; min-height:50px; padding:14px 20px; } /* A fourth CTA, if ever added, joins the rail instead of breaking it. */ .hero-btns .btn:nth-child(n+4) { grid-column:1 / -1; } } @media(max-width:360px){ /* Narrowest phones: ease the pair's type down so it stays on one line. */ .hero-btns .btn:nth-child(n+2) { font-size:.82rem; padding-inline:8px; } } .btn--blue { background:var(--blue); color:#fff; } .btn--blue:hover { background:var(--indigo); color:#fff; } .btn--teal { background:var(--teal); color:#fff; } .btn--teal:hover { background:var(--teal-d); color:#fff; } .btn--blue-outline { border:2px solid rgba(255,255,255,.5); color:#fff; background:transparent; } .btn--blue-outline:hover { background:rgba(255,255,255,.08); } .btn--primary { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:#9FDBF5; color:#0A2A38; } .btn--primary:hover { background:#B8E5F8; transform:translateY(-1px); } .btn--ghost { display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:2px solid #9FDBF5; background:#9FDBF5; color:#0A2A38; } .btn--ghost:hover { background:#B8E5F8; border-color:#B8E5F8; transform:translateY(-1px); } .btn--solid { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--teal); color:#fff; } .btn--solid:hover { background:var(--teal-d); } .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--teal); background:var(--teal-light); padding:6px 14px; border-radius:100px; margin-bottom:16px; } .eyebrow--onDark { color:#BEE8DE; background:rgba(255,255,255,.08); } .eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--navy); flex-shrink:0; } .eyebrow--onDark .eyebrow-dot { background:#6FE3CE; } .diff-num { font-size:.72rem; font-weight:700; color:var(--navy); letter-spacing:.04em; margin-bottom:12px; } table.compare { width:100%; border-collapse:collapse; margin-top:48px; font-size:.9rem; } table.compare th, table.compare td { text-align:right; padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; } [dir="ltr"] table.compare th, [dir="ltr"] table.compare td { text-align:left; } table.compare th { font-size:.92rem; color:var(--grey); font-weight:600; border-bottom:2px solid var(--navy); } table.compare td:first-child { font-weight:600; color:var(--navy); width:20%; } table.compare td.win { color:var(--teal-d); font-weight:500; } table.compare tbody tr:hover { background:var(--teal-light); } @media(max-width:640px){ table.compare { font-size:.8rem; } table.compare th, table.compare td { padding:12px 10px; } } .table-media-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:stretch; } .table-media-grid .cmp-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:0; overflow:hidden; /* the card border doubles as the table frame */ box-shadow:0 10px 30px -18px rgba(0,0,0,.18); } /* Comparison table — two even columns, HydroFLOW carried in bold against the conventional column's lighter grey, with a rule between the columns so the two sides read as a pair rather than one block of text. */ .table-media-grid table.compare { margin-top:0; font-size:.85rem; table-layout:fixed; } .table-media-grid table.compare th, .table-media-grid table.compare td { width:50%; padding:13px 16px; vertical-align:middle; line-height:1.5; } /* first cell is always the conventional column: RTL puts it on the right, and the LTR flip below keeps it there, so one divider rule covers both. */ .table-media-grid table.compare th:first-child, .table-media-grid table.compare td:first-child { border-inline-end:1px solid var(--line); } .table-media-grid table.compare th { font-size:.9rem; font-weight:700; color:var(--grey); border-bottom:1px solid var(--navy); padding-block:15px; } .table-media-grid table.compare th:last-child { color:var(--teal); } .table-media-grid table.compare td:first-child { width:50%; font-weight:400; color:#6B7A80; } .table-media-grid table.compare td.win { font-weight:700; color:var(--navy); } /* ============================================================ CMP TABLE (secondary solutions-comparison table, e.g. homepage) ============================================================ */ .cmp-scroll { overflow-x:auto; margin-top:32px; } table.cmp { width:100%; border-collapse:collapse; font-size:.85rem; } .cmp thead th { padding:12px 14px; border-bottom:2px solid var(--navy); font-size:.8rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-align:right; } [dir="rtl"] .cmp thead th { font-family:'Rubik',sans-serif; } [dir="ltr"] .cmp thead th { font-family:'Inter',sans-serif; text-align:left; } .cmp thead th:first-child { color:var(--grey); } .cmp .th-plus { color:var(--teal-d); background:var(--teal-light); } .cmp .th-alt { color:var(--grey); background:var(--off); } .cmp td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; text-align:right; line-height:1.4; } [dir="ltr"] .cmp td { text-align:left; } .cmp tr:last-child td { border-bottom:none; } .cmp td:first-child { font-weight:700; color:#000; } .cmp tr:nth-child(even) td { background:var(--off); } .cmp .good { color:var(--teal-d); font-weight:600; } .cmp .bad { color:var(--orange); } .cmp .neu { color:var(--grey); } .table-media-grid table.compare tbody tr:last-child td { border-bottom:none; } .table-media-grid table.compare tbody tr:hover { background:transparent; } /* English page: flip the columns so HydroFLOW leads, as in Hebrew. The table direction does the flip; the cells stay LTR so the text reads normally. */ [dir="ltr"] .table-media-grid table.compare { direction:rtl; } [dir="ltr"] .table-media-grid table.compare th, [dir="ltr"] .table-media-grid table.compare td { direction:ltr; text-align:left; } .table-media-grid .prob-side { position:relative; overflow:hidden; background:var(--off); border:1px solid var(--line); border-radius:14px; } /* Fit the player by width and centre it, so the whole 16:9 frame stays visible. Sizing it by height instead made it overflow the column and cut the player's own title and controls. */ .table-media-grid iframe.prob-ph { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:auto; aspect-ratio:16/9; border:0; background:#fff; } @media(max-width:900px){ .table-media-grid { grid-template-columns:1fr; } .table-media-grid table.compare { font-size:.88rem; } /* Stacked in one column there is no sibling to stretch against, so an absolutely-positioned player leaves its box at zero height and overflow clips it out of sight. Put it back in flow and let it size itself. */ .table-media-grid iframe.prob-ph { position:static; transform:none; display:block; width:100%; height:auto; aspect-ratio:16/9; } } @media(max-width:520px){ .table-media-grid table.compare { font-size:.8rem; } .table-media-grid table.compare th, .table-media-grid table.compare td { padding:11px 12px; } .table-media-grid table.compare th { font-size:.84rem; } } .chip-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .chip { font-size:.8rem; color:#E7F2EF; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:8px 14px; border-radius:100px; } .caution-box { background:var(--caution-bg); border:1px solid var(--caution-line); color:var(--caution-ink); border-radius:12px; padding:18px 20px; font-size:.85rem; } .caution-box b { color:#5C420F; } .caution-box--dark { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); color:#C6D6DA; } .caution-box--dark b { color:#fff; } .hero--navy { background:radial-gradient(1200px 600px at 15% -10%, #0B3A5C 0%, var(--navy) 55%, #04234C 100%); color:#fff; } .hero--navy .hero-eyebrow { color:rgba(255,255,255,.85); } .hero--navy .hero-sub { color:#C9D8DC; } .hero--navy h1 .accent { color:#7FE0CC; } .final-cta { background:linear-gradient(120deg, var(--teal-d), var(--teal)); border-radius:20px; padding:44px 40px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .final-cta h3 { font-size:1.35rem; max-width:26ch; color:#fff; } .final-cta p { color:#DCF3EE; margin-top:8px; font-size:.9rem; } @media(max-width:640px){ .final-cta { padding:32px 28px; } } .monitor { background:transparent; color:#fff; } .monitor > .wrap { background:linear-gradient(160deg, var(--navy-2) 0%, #0A2029 100%); border-radius:20px; padding:48px 40px; } @media(max-width:600px){ .monitor > .wrap { padding:32px 24px; } } .monitor .title { color:#fff; } .monitor .label { color:rgba(255,255,255,.7); } .monitor .intro-p { color:#B9CBD0; max-width:660px; margin-bottom:44px; font-size:1rem; line-height:1.7; } .flow-row { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-bottom:40px; } .flow-card { flex:1; min-width:170px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px; } .flow-card h4 { font-size:.92rem; color:#8CEBD6; margin-bottom:8px; } .flow-card .role { font-size:.8rem; color:#DCE7E9; margin-bottom:8px; } .flow-card .msg { font-size:.76rem; color:#9FB4BA; line-height:1.55; } .flow-arrow { align-self:center; color:#4E6B73; font-size:1.2rem; padding:0 2px; } .monitor-advantages { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:32px; } .adv-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:16px; font-size:.85rem; color:#DCE7E9; } .adv-item b { display:block; color:#fff; font-size:.88rem; margin-bottom:4px; } @media(max-width:900px){ .monitor-advantages { grid-template-columns:repeat(2,1fr); } } @media(max-width:640px){ .flow-row { flex-direction:column; } .flow-arrow { display:none; } } .proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .proj-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; } .proj-tag { display:inline-block; font-size:.72rem; font-weight:700; color:var(--teal-d); background:var(--teal-light); padding:4px 10px; border-radius:100px; margin-bottom:14px; } .proj-card h4 { font-size:1rem; margin-bottom:6px; color:#000; } .proj-meta { font-size:.82rem; color:var(--grey); margin-bottom:14px; } .proj-placeholder { border:1.5px dashed #CBD3D2; border-radius:10px; padding:14px; font-size:.78rem; color:#8B9A97; text-align:center; } @media(max-width:900px){ .proj-grid { grid-template-columns:1fr; } } .docs-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .doc-card { background:var(--navy); color:#fff; border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px; } .doc-card h4 { font-size:.95rem; color:#fff; } .doc-card span { font-size:.78rem; color:#9FB4BA; } .doc-card a { margin-top:8px; font-size:.82rem; font-weight:600; color:#8CEBD6; display:inline-block; } @media(max-width:900px){ .docs-row { grid-template-columns:1fr; } } .app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media(max-width:900px){ .app-grid { grid-template-columns:1fr; } } body.page-id-52 .app-grid, body.page-id-550 .app-grid { grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto; } .app-card { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; padding:22px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; display:block; text-decoration:none; color:inherit; } .app-card:hover { border-color:var(--navy); transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,0,0,.28); } .app-card h4 { font-size:1.05rem; font-weight:800; margin-bottom:6px; color:#000; } .app-card .role { font-size:.82rem; color:var(--grey); } .app-card .arrow { display:block; margin-top:14px; color:var(--teal-d); font-size:.82rem; font-weight:700; } /* ============================================================ PROBLEM / SOLUTION — full-bleed editorial split ============================================================ */ .problem-split { display:grid; grid-template-columns:1fr 1fr; min-height:480px; } .problem-half { padding:64px 56px; display:flex; flex-direction:column; justify-content:center; } .problem-half--dark { background:#fff; color:#000; border-left:1px solid var(--line); } [dir="ltr"] .problem-half--dark { border-left:none; border-right:1px solid var(--line); } .problem-half--light { background:var(--off); } .problem-kicker { font-size:.68rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; display:block; opacity:.5; } .problem-heading { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; line-height:1.1; margin-bottom:20px; } .problem-half--dark .problem-heading { color:#000; } .problem-half--light .problem-heading { color:#000; } .problem-half--dark .problem-heading .accent { color:var(--orange); } .problem-half--light .problem-heading .accent { color:var(--teal-d); } .problem-body { font-size:.95rem; line-height:1.75; max-width:440px; } .problem-half--dark .problem-body { color:var(--grey); } .problem-half--light .problem-body { color:var(--grey); } .problem-list { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:10px; } .problem-list li { font-size:.92rem; display:flex; gap:10px; align-items:flex-start; } .problem-half--dark .problem-list li { color:var(--grey); } .problem-half--light .problem-list li { color:var(--grey); } .problem-list li::before { font-weight:900; flex-shrink:0; margin-top:1px; } .problem-half--dark .problem-list li::before { content:"✗"; color:var(--orange); } .problem-half--light .problem-list li::before { content:"✓"; color:var(--teal-d); } @media(max-width:720px){ .problem-split { grid-template-columns:1fr; } .problem-half { padding:44px 28px; } } /* ============================================================ BENEFITS — 3 tall columns ============================================================ */ .benefits-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .benefit { background:#fff; padding:44px 36px; } [dir="rtl"] .benefit { border-left:1px solid var(--line); } [dir="rtl"] .benefit:last-child { border-left:none; } [dir="ltr"] .benefit { border-right:1px solid var(--line); } [dir="ltr"] .benefit:last-child { border-right:none; } .benefit-num { font-size:3.8rem; font-weight:900; color:var(--grey-lt); line-height:1; margin-bottom:20px; } .benefit-h { font-size:1.15rem; font-weight:700; color:#000; margin-bottom:10px; } .benefit-p { font-size:1rem; color:var(--grey); line-height:1.72; } .benefit-link { display:inline-block; margin-top:20px; font-size:.84rem; font-weight:700; color:var(--teal-d); text-decoration:none; } .benefit-link:hover { color:var(--teal); } @media(max-width:700px){ .benefits-row { grid-template-columns:1fr; } } /* ============================================================ HOW IT WORKS — horizontal timeline ============================================================ */ .how-section { padding:80px 0; background:var(--off); } .how-label { font-size:.82rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-d); display:block; margin-bottom:10px; } .how-title { font-size:clamp(1.5rem,2.8vw,2rem); font-weight:900; color:var(--navy); margin-bottom:48px; } .steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; } .steps-row::before { content:""; position:absolute; top:22px; right:16.66%; left:16.66%; height:1px; background:var(--line); z-index:0; } .step { position:relative; z-index:1; } [dir="rtl"] .step { padding:0 24px 0 0; } [dir="ltr"] .step { padding:0 0 0 24px; } .step-dot { width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:900; margin-bottom:18px; flex-shrink:0; } .step-h { font-size:1rem; font-weight:700; color:#000; margin-bottom:8px; } .step-p { font-size:1rem; color:var(--grey); line-height:1.65; } @media(max-width:640px){ .steps-row { grid-template-columns:1fr; } .steps-row::before { display:none; } .step { padding:0 0 28px; border-bottom:1px solid var(--line); } .step:last-child { border-bottom:none; padding-bottom:0; } } .steps-row--4, .steps-row--6 { grid-template-columns:repeat(4,1fr); row-gap:36px; } .steps-row--6 { grid-template-columns:repeat(3,1fr); } .steps-row--4::before, .steps-row--6::before { display:none; } [dir="rtl"] .steps-row--4 .step, [dir="ltr"] .steps-row--4 .step, [dir="rtl"] .steps-row--6 .step, [dir="ltr"] .steps-row--6 .step { padding:0; } @media(max-width:900px){ .steps-row--4 { grid-template-columns:repeat(2,1fr); } } @media(max-width:640px){ .steps-row--4, .steps-row--6 { grid-template-columns:1fr; row-gap:0; } .steps-row--4 .step, .steps-row--6 .step { padding:0 0 28px; border-bottom:1px solid var(--line); } .steps-row--4 .step:last-child, .steps-row--6 .step:last-child { border-bottom:none; padding-bottom:0; } } @media(min-width:641px) and (max-width:900px){ .steps-row--6 { grid-template-columns:repeat(2,1fr); } } .how-section--tight { padding-top:40px; } .stat-strip-wrap { margin-top:0; } .step-dot--outline { background:#fff; border:2px solid var(--blue); color:var(--blue); } .step-dot--outline-white { background:transparent; border:2px solid rgba(255,255,255,.7); color:#fff; } .sec--teal { background:transparent; color:#fff; } .sec--teal > .wrap { background:var(--teal); border-radius:20px; padding:34px 30px; } .sec--dark:not(:has(.cta-inner)) > .wrap { background:var(--navy); border-radius:20px; padding:48px 40px; } @media(max-width:600px){ .sec--teal > .wrap, .sec--dark:not(:has(.cta-inner)) > .wrap { padding:32px 24px; } } .sec--teal .label { color:rgba(255,255,255,.75); } .sec--teal h2.title { color:#fff; } .sec--teal .step-h { color:#fff; } .sec--teal .step-p { color:rgba(255,255,255,.85); } .sec--teal p { color:rgba(255,255,255,.9); } /* ============================================================ TRUST ROW — stats + certs ============================================================ */ .trust-section { padding:72px 0; } .trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--line); border:1px solid var(--line); } .trust-cell { background:#fff; padding:24px 20px; text-align:center; } [dir="rtl"] .trust-cell { border-left:1px solid var(--line); } [dir="rtl"] .trust-cell:last-child { border-left:none; } [dir="ltr"] .trust-cell { border-right:1px solid var(--line); } [dir="ltr"] .trust-cell:last-child { border-right:none; } .trust-n { font-size:1.6rem; font-weight:900; color:var(--blue); line-height:1; } .trust-l { font-size:.74rem; color:var(--grey); margin-top:5px; line-height:1.35; } @media(max-width:600px){ .trust-row { grid-template-columns:1fr 1fr; } [dir="rtl"] .trust-cell:nth-child(even) { border-left:none; } [dir="ltr"] .trust-cell:nth-child(even) { border-right:none; } } .cert-row { display:flex; flex-wrap:wrap; border:1px solid var(--line); border-top:none; background:var(--line); gap:0; } .cert-pill { flex:1; min-width:90px; background:var(--off); padding:14px 12px; text-align:center; } [dir="rtl"] .cert-pill { border-left:1px solid var(--line); } [dir="rtl"] .cert-pill:last-child { border-left:none; } [dir="ltr"] .cert-pill { border-right:1px solid var(--line); } [dir="ltr"] .cert-pill:last-child { border-right:none; } .cert-pill__n { font-size:.78rem; font-weight:900; color:var(--blue); display:block; margin-bottom:2px; } .cert-pill__l { font-size:.68rem; color:var(--grey); display:block; } .cert-row--attached { margin-top:40px; border-top:1px solid var(--line); } .cert-row--attached .cert-pill { background:#fff; } /* ============================================================ CTA SPLIT ============================================================ */ .cta-split { display:grid; grid-template-columns:1fr 1fr; min-height:260px; } .cta-split--single { grid-template-columns:1fr; } .cta-split--single .cta-half { align-items:center; text-align:center; } .cta-split--single .cta-half p { max-width:520px; } .cta-half { padding:56px 52px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } .cta-half--blue { background:var(--blue); } .cta-half--teal { background:var(--teal); } .cta-half h3 { font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:10px; } .cta-half p { font-size:1rem; color:rgba(255,255,255,.8); line-height:1.6; margin-bottom:24px; } @media(max-width:640px){ .cta-split { grid-template-columns:1fr; } .cta-half { padding:40px 28px; } } /* ============================================================ GENERIC CONTENT SECTIONS (inner pages) ============================================================ */ .sec { padding:72px 0; } .sec + .sec, .how-section + .sec, .sec + .how-section, .how-section + .how-section { padding-top:0; } .sec--off { background:var(--off); } body.page-id-16 .sec--off, body.page-id-17 .sec--off { background:var(--teal-light); } .sec--white { background:#fff; } .label { font-size:.82rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-d); display:block; margin-bottom:10px; } .title { font-size:clamp(1.5rem,2.8vw,2rem); font-weight:900; color:var(--navy); margin-bottom:28px; } .diff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:36px; } .diff-grid--4 { grid-template-columns:repeat(4,1fr); } [dir="ltr"] .diff-grid { direction:ltr; } .diff-card { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; padding:28px 24px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); transition:transform .15s ease, box-shadow .15s ease; display:block; } .diff-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,0,0,.28); } .diff-h { font-size:.96rem; font-weight:700; color:#000; margin-bottom:6px; } [dir="rtl"] .diff-h { font-family:'Rubik',sans-serif; } [dir="ltr"] .diff-h { font-family:'Inter',sans-serif; } .diff-p { font-size:.86rem; color:var(--grey); line-height:1.65; } .diff-ic { width:48px; height:48px; border-radius:8px; background:var(--teal-light); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .diff-ic svg { width:24px; height:24px; stroke:var(--teal-d); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .diff-ic--teal { background:rgba(255,255,255,.15); } .diff-ic--teal svg { stroke:#fff; } @media(max-width:900px){ .diff-grid, .diff-grid--4 { grid-template-columns:1fr 1fr; } } @media(max-width:540px){ .diff-grid { grid-template-columns:1fr; } } /* Homepage "why HydroFLOW" 4-card section — enlarged & emphasized */ body.page-id-16 .diff-grid--4, body.page-id-17 .diff-grid--4 { gap:20px; background:transparent; border:none; border-radius:0; overflow:visible; } body.page-id-16 .diff-grid--4 .diff-card, body.page-id-17 .diff-grid--4 .diff-card { border-radius:16px; border-top-width:4px; padding:32px 26px; box-shadow:0 10px 30px -14px rgba(6,43,76,.28); } body.page-id-16 .diff-grid--4 .diff-num, body.page-id-17 .diff-grid--4 .diff-num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--teal-light); color:var(--teal-d); font-size:.86rem; font-weight:900; margin-bottom:16px; } body.page-id-16 .diff-grid--4 .diff-h, body.page-id-17 .diff-grid--4 .diff-h { font-size:1.14rem; margin-bottom:10px; } body.page-id-16 .diff-grid--4 .diff-p, body.page-id-17 .diff-grid--4 .diff-p { font-size:.92rem; } @media(max-width:900px){ body.page-id-16 .diff-grid--4, body.page-id-17 .diff-grid--4 { grid-template-columns:1fr 1fr; } } @media(max-width:540px){ body.page-id-16 .diff-grid--4, body.page-id-17 .diff-grid--4 { grid-template-columns:1fr; } } .cookie-consent { position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.35); padding:20px; } .cookie-consent[hidden] { display:none; } .cookie-consent__card { position:relative; background:#fff; border-radius:12px; max-width:480px; width:100%; padding:28px 28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.25); margin-bottom:24px; } .cookie-consent__close { position:absolute; top:14px; inset-inline-end:14px; background:none; border:none; font-size:1.4rem; line-height:1; color:var(--grey); cursor:pointer; padding:4px; } .cookie-consent__title { font-size:1.15rem; font-weight:900; color:var(--teal-d); margin-bottom:12px; } .cookie-consent__text { font-size:.9rem; color:var(--grey); line-height:1.6; margin-bottom:20px; } .cookie-consent__text a { color:var(--teal-d); text-decoration:underline; } .cookie-consent__actions { display:flex; gap:12px; flex-wrap:wrap; } .cookie-consent__actions .btn { flex:1; min-width:120px; text-align:center; } .cookie-consent__actions .btn--outline { border:2px solid var(--teal-d); color:var(--teal-d); background:transparent; } .cookie-consent__actions .btn--outline:hover { background:var(--off); color:var(--teal-d); } @media(max-width:520px){ .cookie-consent__actions { flex-direction:column; } } .stat-strip { display:flex; background:var(--off); border:1px solid var(--line); flex-wrap:wrap; } .stat-cell { flex:1; min-width:160px; text-align:center; padding:22px 16px; border-left:1px solid var(--line); } [dir="rtl"] .stat-cell:last-child { border-left:none; } [dir="ltr"] .stat-cell { border-left:none; border-right:1px solid var(--line); } [dir="ltr"] .stat-cell:last-child { border-right:none; } .stat-cell__n { font-size:1.6rem; font-weight:900; color:var(--navy); margin-bottom:6px; } .stat-cell__l { font-size:.85rem; color:var(--grey); line-height:1.5; } a.stat-cell { background:var(--teal-light); transition:background .15s; } a.stat-cell:hover { background:#DCEFEC; } a.stat-cell .stat-cell__n { color:var(--teal-d); } .faq-list { margin-top:32px; } .faq-item { border-bottom:1px solid var(--line); } .faq-item:first-child { border-top:1px solid var(--line); } .faq-item summary { list-style:none; padding:18px 0; font-weight:700; font-size:1.02rem; color:var(--navy); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item[open] summary { color:var(--teal-d); } [dir="ltr"] .faq-item summary { direction:ltr; } [dir="ltr"] .faq-item summary::after { font-family:'Inter',sans-serif; content:"+"; font-size:1.4rem; font-weight:900; color:var(--teal); flex-shrink:0; } [dir="ltr"] .faq-item[open] summary::after { content:"−"; } [dir="rtl"] .faq-item summary::before { font-family:'Rubik',sans-serif; content:"+"; font-size:1.4rem; font-weight:900; color:var(--teal); order:999; flex-shrink:0; } [dir="rtl"] .faq-item[open] summary::before { content:"−"; } /* Plain typographic content (fallback pages, legal etc.) */ .entry-plain { padding:56px 0; } .entry-plain h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; margin-bottom:24px; } .entry-plain h2 { font-size:1.4rem; font-weight:700; margin:32px 0 12px; } .entry-plain p, .entry-plain li { font-size:.95rem; color:var(--grey); line-height:1.8; margin-bottom:14px; } .entry-plain ul, .entry-plain ol { padding-inline-start:22px; } /* ============================================================ FOOTER ============================================================ */ .footer { background:var(--blue); color:#fff; padding:32px 0 20px; border-top:1px solid rgba(255,255,255,.14); box-shadow:0 -12px 24px -18px rgba(0,0,0,.4); } .footer-inner { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; } .footer-inner--compact { grid-template-columns:1fr auto; align-items:start; gap:32px; margin-bottom:20px; } .footer-inner--compact .footer-col ul { flex-direction:row; flex-wrap:wrap; gap:8px 24px; } [dir="rtl"] .footer-inner--compact { direction:rtl; } [dir="ltr"] .footer-inner--compact { direction:ltr; } @media(max-width:600px){ .footer-inner--compact { grid-template-columns:1fr; } .footer-inner--compact .footer-col ul { flex-direction:column; } } .footer-brand .logo { font-size:1.15rem; font-weight:900; color:#0272CE; margin-bottom:6px; } .footer-brand .auth { font-size:.88rem; color:rgba(255,255,255,.55); margin-bottom:14px; } .footer-brand p { font-size:.94rem; color:rgba(255,255,255,.65); line-height:1.8; } .footer-social { display:flex; gap:12px; margin-top:16px; } .footer-social a { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); transition:.15s; } .footer-social a:hover { background:var(--teal); color:#fff; } .footer-social a[aria-label="YouTube"] { background:#FF0000; color:#fff; } .footer-social a[aria-label="Facebook"] { background:#1877F2; color:#fff; } .footer-social a[aria-label="LinkedIn"] { background:#0A66C2; color:#fff; } .footer-social a[aria-label="YouTube"]:hover { background:#CC0000; color:#fff; } .footer-social a[aria-label="Facebook"]:hover { background:#145DC4; color:#fff; } .footer-social a[aria-label="LinkedIn"]:hover { background:#084E93; color:#fff; } .footer-social svg { width:16px; height:16px; } .footer-col h4 { font-size:.68rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:14px; } .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; } .footer-col ul a { font-size:.96rem; color:rgba(255,255,255,.7); text-decoration:none; transition:.15s; } .footer-col ul a:hover { color:#fff; } .footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; } .footer-bottom p { font-size:.82rem; color:rgba(255,255,255,.5); } .footer-badges { display:flex; gap:8px; } .footer-badges span { font-size:.76rem; font-weight:700; padding:4px 10px; border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.55); } @media(max-width:820px){ .footer-inner { grid-template-columns:1fr 1fr; } } @media(max-width:460px){ .footer-inner { grid-template-columns:1fr; } } @media(max-width:500px){ .hero-btns, .cta-btns { flex-direction:column; } } /* ============================================================ FLOATING CONTACT DOCK — one translucent button, fans out on click. Collapsed by default so it never covers page content. Draggable; JS writes --fdock-x / --fdock-y and flips [data-side] for RTL/LTR. ============================================================ */ .fdock { --fdock-size: 52px; --fdock-gap: 12px; position:fixed; /* Default rest position: bottom-left. Once dragged, JS sets --fdock-x/--fdock-y (and clears --fdock-bottom) to pin it wherever the visitor dropped it. */ left:var(--fdock-x, 18px); top:var(--fdock-y, auto); /* Top of the corner stack: accessibility sits below it, back-to-top below that. Dragging the dock replaces this, which is the point of the var. */ bottom:var(--fdock-bottom, 140px); right:auto; z-index:999; display:flex; flex-direction:column; align-items:center; gap:var(--fdock-gap); touch-action:none; } .fdock[hidden] { display:none; } /* --- items stack (hidden until open) --- */ .fdock__items { display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; } .fdock__item { position:relative; width:var(--fdock-size); height:var(--fdock-size); display:flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; color:#fff; background:var(--fdock-bg, rgba(20,20,20,.55)); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:0 6px 22px rgba(0,0,0,.22); opacity:0; transform:translateY(14px) scale(.75); transition:opacity .28s ease, transform .34s cubic-bezier(.34,1.4,.5,1), background-color .2s ease, box-shadow .2s ease; } .fdock__ico { display:flex; } .fdock__item svg { width:22px; height:22px; } .fdock__item--whatsapp svg { width:24px; height:24px; } /* brand tints, kept translucent */ .fdock__item--phone { --fdock-bg:rgba(18,114,104,.62); } .fdock__item--email { --fdock-bg:rgba(51,68,138,.62); } .fdock__item--whatsapp { --fdock-bg:rgba(37,211,102,.58); } .fdock__item:hover, .fdock__item:focus-visible { transform:translateY(0) scale(1.08); box-shadow:0 10px 28px rgba(0,0,0,.3); } .fdock__item--phone:hover { background:rgba(18,114,104,.95); } .fdock__item--email:hover { background:rgba(51,68,138,.95); } .fdock__item--whatsapp:hover { background:rgba(37,211,102,.95); } /* label bubble on hover (desktop) — sits opposite the screen edge it rests on */ .fdock__tip { position:absolute; top:50%; transform:translateY(-50%); left:calc(100% + 10px); white-space:nowrap; direction:ltr; font-size:.82rem; font-weight:700; line-height:1; padding:8px 12px; border-radius:8px; background:rgba(15,15,15,.82); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .fdock[data-side="right"] .fdock__tip { left:auto; right:calc(100% + 10px); } .fdock__item:hover .fdock__tip, .fdock__item:focus-visible .fdock__tip { opacity:1; } @media (hover:none) { .fdock__tip { display:none; } } /* --- open state: staggered fan-out --- */ .fdock.is-open .fdock__items { pointer-events:auto; } .fdock.is-open .fdock__item { opacity:1; transform:translateY(0) scale(1); } .fdock.is-open .fdock__item:nth-child(3) { transition-delay:.03s; } .fdock.is-open .fdock__item:nth-child(2) { transition-delay:.08s; } .fdock.is-open .fdock__item:nth-child(1) { transition-delay:.13s; } /* --- the single toggle button --- */ .fdock__toggle { position:relative; width:var(--fdock-size); height:var(--fdock-size); flex:0 0 auto; padding:0; cursor:grab; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:rgba(18,114,104,.5); border:1px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); box-shadow:0 8px 26px rgba(0,0,0,.24); transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .fdock__toggle:hover { background:rgba(18,114,104,.85); transform:scale(1.06); } .fdock__toggle:active { cursor:grabbing; } .fdock__toggle:focus-visible { outline:2px solid #fff; outline-offset:3px; } .fdock.is-dragging .fdock__toggle { cursor:grabbing; transform:scale(1.12); } .fdock.is-dragging .fdock__item { transition:none; } /* soft pulse ring so the collapsed button is noticeable but calm */ .fdock__toggle::after { content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(255,255,255,.4); opacity:0; animation:fdockPulse 3.4s ease-out infinite; } .fdock.is-open .fdock__toggle::after { animation:none; opacity:0; } @keyframes fdockPulse { 0% { opacity:.6; transform:scale(1); } 70% { opacity:0; transform:scale(1.45); } 100% { opacity:0; transform:scale(1.45); } } .fdock__toggle-ico { position:absolute; display:flex; transition:opacity .22s ease, transform .3s ease; } .fdock__toggle-ico svg { width:24px; height:24px; } .fdock__toggle-ico--close { opacity:0; transform:rotate(-90deg) scale(.6); } .fdock.is-open .fdock__toggle { background:rgba(20,20,20,.62); } .fdock.is-open .fdock__toggle-ico--open { opacity:0; transform:rotate(90deg) scale(.6); } .fdock.is-open .fdock__toggle-ico--close { opacity:1; transform:rotate(0) scale(1); } @media(max-width:600px){ .fdock { --fdock-size:48px; left:var(--fdock-x, 12px); bottom:var(--fdock-bottom, 124px); } .fdock__item svg { width:20px; height:20px; } .fdock__toggle-ico svg { width:22px; height:22px; } } @media (prefers-reduced-motion:reduce){ .fdock__item, .fdock__toggle, .fdock__toggle-ico { transition-duration:.01ms; } .fdock.is-open .fdock__item { transition-delay:0s; } .fdock__toggle::after { animation:none; } } /* ============================================================ HOME HERO — carousel of product photos beside the heading ============================================================ */ .hero-flex { display:flex; align-items:center; gap:60px; position:relative; z-index:1; } .hero-flex .hero-inner { flex:1 1 auto; max-width:600px; } .hero-carousel { flex:0 0 auto; position:relative; width:420px; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.25); box-shadow:0 20px 48px rgba(0,0,0,.22); background:rgba(255,255,255,.08); } .hero-ph { flex:0 0 auto; align-self:stretch; width:420px; min-height:380px; border-radius:16px; border:1px dashed rgba(255,255,255,.3); background:rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:rgba(255,255,255,.5); } .hero-ph svg { width:56px; height:56px; } .hero-ph span { font-size:.9rem; font-weight:600; } @media(max-width:1040px){ .hero-ph { width:340px; } } @media(max-width:860px){ .hero-ph { width:100%; max-width:none; min-height:260px; } } .hero-video { flex:0 0 auto; align-self:center; width:460px; aspect-ratio:4/5; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); background:#081820; } .hero-video video { width:100%; height:100%; object-fit:cover; display:block; } @media(max-width:860px){ .hero-video { width:100%; max-width:420px; } } .hero-carousel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:heroCarouselFade 24s infinite; } .hero-carousel img:nth-child(1){animation-delay:0s;} .hero-carousel img:nth-child(2){animation-delay:4s;} .hero-carousel img:nth-child(3){animation-delay:8s;} .hero-carousel img:nth-child(4){animation-delay:12s;} .hero-carousel img:nth-child(5){animation-delay:16s;} .hero-carousel img:nth-child(6){animation-delay:20s;} @keyframes heroCarouselFade { 0% { opacity:0; } 3% { opacity:1; } 13% { opacity:1; } 16% { opacity:0; } 100% { opacity:0; } } @media(max-width:1040px){ .hero-carousel { width:340px; } } @media(max-width:860px){ .hero-flex { flex-direction:column; gap:32px; } .hero-flex .hero-inner { max-width:100%; } .hero-carousel { width:100%; max-width:420px; } } /* Back-to-top button — fixed, appears on scroll */ .back-to-top { /* 21px, not 24: the contact dock is 52px wide at left:18px, so this lines the 46px circle up on the same centre. */ position:fixed; bottom:24px; left:21px; z-index:998; width:46px; height:46px; border-radius:50%; border:none; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .back-to-top svg { width:20px; height:20px; } .back-to-top:hover { background:var(--teal-d); } .back-to-top--visible { opacity:1; visibility:visible; transform:translateY(0); } @media(max-width:600px){ .back-to-top { bottom:16px; left:14px; width:40px; height:40px; } .back-to-top svg { width:18px; height:18px; } } /* LTR hero mirror: flip hero background photos horizontally for English pages, so the bright/illustration side sits on the right and the dark/text side sits on the left. */ [dir="ltr"] .hero::before, [dir="ltr"] header.hero::before, [dir="ltr"] div.hero::before { content:""; display:block; position:absolute; inset:0; background:inherit; transform:scaleX(-1); z-index:-1; pointer-events:none; } /* Benefits icon strip (EN home-page replacement for the HE benefits image) */ .benefit-icons-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; } .benefit-icons-grid .bi-item { text-align:center; } .benefit-icons-grid .bi-icon { width:58px; height:58px; margin:0 auto; } .benefit-icons-grid .bi-h { font-weight:800; color:var(--navy); margin:14px 0 8px; font-size:.92rem; } .benefit-icons-grid .bi-rule { height:3px; width:32px; margin:0 auto 10px; } .benefit-icons-grid .bi-p { font-size:.8rem; color:var(--grey); line-height:1.55; text-align:center; } @media(max-width:900px){ .benefit-icons-grid { grid-template-columns:repeat(3,1fr); row-gap:28px; } } @media(max-width:560px){ .benefit-icons-grid { grid-template-columns:repeat(2,1fr); } } /* Remote-management card (green building + every treatment-area page). The stored markup pins a 260px image column inline, which overflows a phone, so the class added by the content filter collapses it. */ @media(max-width:760px){ .mgmt-grid { grid-template-columns:1fr !important; } } /* ============================================================ ACCESSIBILITY A button in the corner stack, a panel of options, and the rules each option switches on. Everything is driven by a class on so a preference costs one class toggle and survives navigation (js/a11y.js re-applies it from storage). ============================================================ */ .a11y-btn { position:fixed; bottom:82px; left:21px; z-index:998; width:46px; height:46px; border-radius:50%; border:none; background:var(--navy); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:background .2s ease, transform .15s ease; } .a11y-btn:hover { background:var(--teal-d); transform:translateY(-2px); } .a11y-btn svg { width:24px; height:24px; } .a11y-panel { position:fixed; bottom:82px; left:78px; z-index:1001; width:min(280px, calc(100vw - 96px)); background:#fff; color:#000; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.22); padding:16px; text-align:start; } .a11y-panel[hidden] { display:none; } [dir="rtl"] .a11y-panel { font-family:'Rubik',sans-serif; } [dir="ltr"] .a11y-panel { font-family:'Inter',sans-serif; } .a11y-panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .a11y-panel__title { font-size:.95rem; font-weight:900; color:var(--navy); } .a11y-panel__close { border:none; background:none; cursor:pointer; font-size:1.4rem; line-height:1; color:var(--grey); padding:0 4px; } .a11y-panel__close:hover { color:#000; } .a11y-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .a11y-row__label { font-size:.85rem; font-weight:700; } .a11y-size { display:flex; align-items:center; gap:6px; } .a11y-size button { width:32px; height:32px; border:1px solid var(--line); background:var(--off); border-radius:8px; cursor:pointer; font-weight:900; font-size:.85rem; color:var(--navy); } .a11y-size button:hover { border-color:var(--teal); color:var(--teal-d); } .a11y-size__value { font-size:.8rem; font-weight:700; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; } .a11y-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .a11y-opts button { padding:9px 8px; border:1px solid var(--line); background:#fff; border-radius:8px; font-family:inherit; font-size:.78rem; font-weight:700; color:#000; cursor:pointer; transition:.15s; } .a11y-opts button:hover { border-color:var(--teal); color:var(--teal-d); } .a11y-opts button.is-on { background:var(--teal); border-color:var(--teal); color:#fff; } .a11y-reset { margin-top:12px; width:100%; padding:10px; border:1px solid var(--line); background:var(--off); border-radius:8px; font-family:inherit; font-size:.8rem; font-weight:700; color:var(--grey); cursor:pointer; } .a11y-reset:hover { color:#000; border-color:var(--grey); } @media(max-width:600px){ .a11y-btn { bottom:68px; left:14px; width:40px; height:40px; } .a11y-btn svg { width:21px; height:21px; } .a11y-panel { left:14px; right:14px; bottom:116px; width:auto; } } /* --- what each option does ------------------------------------------- */ /* Text size. Applied to the root font size, so everything set in rem or em follows it; the panel itself is pinned back to 16px so its own controls do not grow out of the corner. */ html.a11y-scaled { font-size:calc(100% * var(--a11y-scale, 1)); } html.a11y-scaled .a11y-panel, html.a11y-scaled .a11y-btn { font-size:16px; } /* Blunt on purpose: the theme colours text and panels through a dozen class-based rules, and a high-contrast mode that only wins some of them is worse than none. Media keeps its own colours; the accessibility panel keeps its own styling below. */ html.a11y-contrast body, html.a11y-contrast body *:not(img):not(svg):not(video):not(iframe):not(path):not(circle):not(rect):not(line):not(polyline) { background-color:#000 !important; background-image:none !important; color:#fff !important; border-color:#fff !important; box-shadow:none !important; text-shadow:none !important; } html.a11y-contrast a, html.a11y-contrast a * { color:#ffe14d !important; } html.a11y-contrast :where(.btn, .nav-cta, button, input[type="submit"]) { background-color:#ffe14d !important; color:#000 !important; border:2px solid #ffe14d !important; } html.a11y-contrast :where(.btn, .nav-cta, button) * { color:#000 !important; } /* The panel has to stay legible while it is the thing being used. */ html.a11y-contrast .a11y-panel { background-color:#000 !important; border:2px solid #fff !important; } html.a11y-contrast .a11y-panel button { background-color:#000 !important; color:#fff !important; border:1px solid #fff !important; } html.a11y-contrast .a11y-panel button.is-on { background-color:#ffe14d !important; color:#000 !important; } html.a11y-contrast .a11y-btn { background-color:#ffe14d !important; color:#000 !important; } html.a11y-grayscale body { filter:grayscale(1); } html.a11y-links a { text-decoration:underline !important; text-underline-offset:3px; outline:1px dashed currentColor; outline-offset:2px; } /* A plain, wide-spaced face for readers who find the display type hard going. */ html.a11y-readable :where(body, p, li, a, h1, h2, h3, h4, h5, h6, button, input, textarea, select) { font-family:Arial, Helvetica, sans-serif !important; letter-spacing:.02em; word-spacing:.08em; line-height:1.9 !important; } html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration:0s !important; animation-delay:0s !important; transition-duration:0s !important; transition-delay:0s !important; scroll-behavior:auto !important; } /* An outsized arrow, drawn inline so it needs no asset and no network. */ html.a11y-cursor, html.a11y-cursor * { cursor:url("data:image/svg+xml;utf8,") 4 2, auto !important; } /* Keyboard focus must always be visible; the panel is useless otherwise. */ .a11y-btn:focus-visible, .a11y-panel button:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid var(--teal); outline-offset:2px; } /* ============================================================ CART LINK IN THE NAV Sits after the shop link, so in RTL it reads to its left. The count is a WooCommerce fragment, replaced wholesale on every add, so nothing here may depend on its previous value. ============================================================ */ .nav-links .nav-cart-item { display:flex; align-items:center; } /* `.nav-links a` sets its own padding at a higher specificity, which squeezed the icon's content box down to 12px — the circle is sized here instead. */ .nav-links a.nav-cart { padding:0; } /* 32px, not 38: the text links are 31px tall, so a taller circle would set the height of the whole row and push the labels up off centre. */ .nav-cart { position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--navy); text-decoration:none; transition:background .15s ease, color .15s ease; } .nav-cart:hover { background:var(--off); color:var(--teal-d); } .nav-cart__icon { width:21px; height:21px; display:block; flex:0 0 auto; } .nav-cart__count { position:absolute; inset-block-start:-1px; inset-inline-end:-3px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px; background:var(--teal); color:#fff; font-size:.62rem; font-weight:900; line-height:16px; text-align:center; font-variant-numeric:tabular-nums; } .nav-cart__count[hidden] { display:none; } /* Burger menu: a normal row, icon beside its label. */ .nav-cart--mob { width:auto; height:auto; border-radius:0; gap:10px; justify-content:flex-start; padding:0; } .nav-cart--mob:hover { background:none; } .nav-cart--mob .nav-cart__count { position:static; margin-inline-start:2px; } /* ============================================================ CART TOAST Confirmation for add-to-cart. Sits bottom-centre so it never collides with the floating contact dock in either corner. ============================================================ */ .hf-toast { position:fixed; z-index:1200; left:50%; bottom:24px; transform:translate(-50%,16px); display:flex; align-items:center; gap:16px; max-width:min(92vw,520px); padding:14px 20px; background:var(--navy); color:#fff; border-radius:12px; border-inline-start:4px solid var(--teal); box-shadow:0 18px 40px -18px rgba(0,0,0,.55); font-size:.92rem; font-weight:600; line-height:1.45; opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; } .hf-toast.is-visible { opacity:1; transform:translate(-50%,0); pointer-events:auto; } .hf-toast--error { border-inline-start-color:#E8794A; } .hf-toast__msg { flex:1; min-width:0; } .hf-toast__link { flex-shrink:0; color:#fff; text-decoration:none; font-size:.84rem; font-weight:700; white-space:nowrap; padding:7px 14px; border-radius:8px; background:var(--teal); transition:background .15s ease; } .hf-toast__link:hover { background:var(--teal-d); } .hf-toast__link:focus-visible { outline:2px solid #fff; outline-offset:2px; } @media(max-width:520px){ .hf-toast { left:12px; right:12px; bottom:14px; max-width:none; transform:translateY(16px); flex-wrap:wrap; gap:10px; } .hf-toast.is-visible { transform:translateY(0); } .hf-toast__link { width:100%; text-align:center; } } @media(prefers-reduced-motion:reduce){ .hf-toast { transition:opacity .01s linear; } } .shop-card__btn.is-loading { opacity:.72; cursor:progress; } /* ============================================================ SECTOR BANNERS — artwork sizing Every banner image is the same composite at 1600x900: subject on the left fading into a dark field, ring motif on the right. The banner is roughly 3:1 and its proportions move with the viewport, so `cover` scaled each image up by width and cut about 40% of its height — the top and bottom off the subject. Both layers here are images, and that is deliberate. An earlier attempt ran the subject at `auto 100%` and let a CSS gradient carry the rest. The gradient was sampled to within one level of the image's edge and still showed a seam: a browser colour-manages a JPEG and a CSS gradient down different paths, so the two never match exactly on screen. Joining image to image avoids that entirely. So each banner is rebuilt as two pieces. The field is the subject, then its own fade stretched to finish at x=1500, then a flat run of the colour that fade lands on, out to 5.5:1 — wide enough at `auto 100%` to span the banner on anything up to a 2560px screen. The rings sit in a second layer pinned right. Where they overlap the field it is already that same flat colour, so the join is invisible. Nothing is ever cropped vertically, at any width, which is the whole point: no aspect ratio is assumed. Wide screens only. Below 1000px the subject would sit under the copy and wreck its contrast; there each page's own inline background still applies, untouched. !important because that inline background would otherwise win. The scrim gradient is carried across unchanged on every page. ============================================================ */ @media(min-width:1000px){ /* Product banners. Same crop problem, one photo each: the shot is 3:2 and the banner runs from 2.7:1 to over 5:1, so `cover` zoomed in about 1.8x and took the pipe brackets off the top and bottom. The photo now runs at `auto 100%` — whole frame, never cropped — and the space beside it is a continuation of the photo's own right edge, baked into the -wide file out to 4:1, with the mean of that edge as the colour past it. Image meeting image, for the reason above. */ /* sidrat-i */ body.page-id-24 .hero { background: linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('assets/img/heroes/product-i-range-wide.jpeg') left center / auto 100% no-repeat, rgb(1,20,51) !important; } /* sidrat-p */ body.page-id-38 .hero { background: linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('assets/img/heroes/product-p-range-wide.jpeg') left center / auto 100% no-repeat, rgb(0,28,64) !important; } /* sidrat-custom */ body.page-id-39 .hero { background: linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('assets/img/heroes/product-custom-range-wide.jpeg') left center / auto 100% no-repeat, rgb(37,48,70) !important; } /* pearl */ body.page-id-40 .hero { background: linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('assets/img/heroes/product-pearl-wide.jpeg') left center / auto 100% no-repeat, rgb(2,28,63) !important; } /* pearl-plus */ body.page-id-41 .hero { background: linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('assets/img/heroes/product-pearl-plus-wide.jpeg') left center / auto 100% no-repeat, rgb(0,27,62) !important; } /* hydroknct */ body.page-id-43 .hero { background: linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('assets/img/heroes/product-hydroknct-wide.jpeg') left center / auto 100% no-repeat, rgb(0,22,54) !important; } /* sidrat-multihead. A montage, plant above and unit below, and the only one of these that was never cropped — it ran at `contain`, so it stopped dead against the flat colour less than halfway across. Same file trick, but the photo carries content to its own right edge, so the extension starts as a fade out of the montage rather than a copy of one column. Its scrim is lighter than the others', because the montage is darker. */ body.page-id-1764 .hero { background: linear-gradient(to right, rgba(8,20,28,.15) 0%, rgba(8,20,28,.55) 45%, rgba(8,20,28,.82) 70%, rgba(8,20,28,.94) 100%), url('assets/img/heroes/multihead-wide.jpeg') left center / auto 100% no-repeat, #04234C !important; } }