/* ============================================================ I-RANGE PAGE FRAGMENT Page-specific styles for the HydroFLOW i Range (industrial) page. Direction-aware rules use [dir="rtl"] / [dir="ltr"] on . ============================================================ */ /* Direction helpers */ [dir="ltr"] .hero { text-align:left; } [dir="ltr"] .split { direction:ltr; } [dir="ltr"] .install-grid { direction:ltr; } [dir="ltr"] .challenges-list { direction:ltr; } [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:"−"; } [dir="ltr"] .cta-inner { direction:ltr; } [dir="ltr"] .specs-row { direction:ltr; } [dir="ltr"] .challenge-item { direction:ltr; } /* Product photo — sits inside the hero, facing the heading */ .hero-flex { display:flex; align-items:center; gap:48px; } .hero-flex .hero__inner { flex:1 1 auto; max-width:600px; } .hero-photo { flex:0 0 auto; width:390px; } .hero-photo img { display:block; width:100%; height:330px; object-fit:contain; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); padding:18px; } @media(max-width:1040px){ .hero-flex { flex-wrap:wrap; } .hero-flex .hero__inner { max-width:100%; } } @media(max-width:860px){ .hero-flex { flex-direction:column; gap:32px; } .hero-photo { width:100%; max-width:420px; } .hero-photo img { height:auto; aspect-ratio:390/330; } } /* Benefits grid variant for pages with exactly 4 cards — individual bordered cards instead of the shared-line table look, so it doesn't read as a table missing columns */ .benefits-grid.benefits-grid--2col { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; background:none; border:none; margin-top:36px; } .benefits-grid.benefits-grid--2col .ben-card { border:1px solid var(--line); transition:.15s; } .benefits-grid.benefits-grid--2col .ben-card:hover { background:#fff; border-color:var(--teal); } @media(max-width:640px){ .benefits-grid.benefits-grid--2col { grid-template-columns:1fr; } } /* ============================================================ HERO ============================================================ */ .hero { background:radial-gradient(1200px 600px at 15% -10%, #0B3A5C 0%, var(--navy) 55%, #04234C 100%); padding:72px 0 88px; position:relative; overflow:hidden; } .hero::before, .hero::after { display:none; } .hero__inner { position:relative; z-index:1; max-width:820px; } .hero__eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:20px; display:flex; align-items:center; gap:10px; } [dir="rtl"] .hero__eyebrow { font-family:'Rubik',sans-serif; } [dir="ltr"] .hero__eyebrow { font-family:'Inter',sans-serif; } [dir="rtl"] .hero__eyebrow::before { content:""; display:block; width:28px; height:2px; background:rgba(255,255,255,.5); } [dir="ltr"] .hero__eyebrow::after { content:""; display:block; width:28px; height:2px; background:rgba(255,255,255,.5); } .hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.1; color:#fff; margin-bottom:16px; } .hero h1 .c { color:#fff; } .hero__sub { font-size:1.05rem; color:rgba(255,255,255,.82); max-width:640px; line-height:1.7; margin-bottom:32px; } /* Spec chips */ .hero-chips { display:flex; gap:8px; flex-wrap:wrap; } .chip { font-size:.78rem; font-weight:700; padding:7px 14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; } [dir="rtl"] .chip { font-family:'Rubik',sans-serif; } [dir="ltr"] .chip { font-family:'Inter',sans-serif; } .chip--teal { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); color:#fff; } /* ============================================================ SECTIONS (page-specific variants) ============================================================ */ .sec--dark { background:transparent; color:#fff; } .sec--dark:has(.cta-inner) { background:transparent; color:inherit; } .sec--teal { background:transparent; color:#fff; } [dir="rtl"] .label { font-family:'Rubik',sans-serif; } [dir="ltr"] .label { font-family:'Inter',sans-serif; } .label { margin-bottom:12px; } .sec--dark .label,.sec--teal .label { color:rgba(255,255,255,.6); } h2.title { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; line-height:1.12; color:var(--navy); margin-bottom:14px; } .sec--dark h2.title,.sec--teal h2.title { color:#fff; } .body-l { font-size:1rem; color:var(--grey); line-height:1.75; max-width:700px; } .sec--dark .body-l,.sec--teal .body-l { color:rgba(255,255,255,.8); } /* ============================================================ BENEFITS GRID — 6 cards ============================================================ */ .benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; } .ben-card { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; padding:26px 24px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .ben-card:hover { border-color:var(--navy); transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,0,0,.28); } .ben-icon { width:44px; height:44px; border-radius:8px; background:#ECEBFB; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .ben-icon svg { width:22px; height:22px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .ben-h { font-size:.96rem; font-weight:700; color:var(--teal-d); margin-bottom:5px; } [dir="rtl"] .ben-h { font-family:'Rubik',sans-serif; } [dir="ltr"] .ben-h { font-family:'Inter',sans-serif; } .ben-p { font-size:.86rem; color:var(--grey); line-height:1.6; } @media(max-width:900px){ .benefits-grid { grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .benefits-grid { grid-template-columns:1fr; } } /* ============================================================ CHALLENGES ============================================================ */ .challenges-list { display:flex; flex-direction:column; margin-top:36px; } .challenge-item { display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line); } .challenge-item:last-child { border-bottom:none; } .challenge-ic { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .challenge-ic svg { width:22px; height:22px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .challenge-h { font-size:.96rem; font-weight:700; color:var(--orange); margin-bottom:4px; } [dir="rtl"] .challenge-h { font-family:'Rubik',sans-serif; } [dir="ltr"] .challenge-h { font-family:'Inter',sans-serif; } .challenge-p { font-size:.88rem; color:var(--grey); line-height:1.65; } /* ============================================================ HOW IT WORKS — split with before/after ============================================================ */ .split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:40px; } .split-text p { font-size:.95rem; color:var(--grey); line-height:1.75; margin-bottom:14px; } .how-benefits { display:flex; flex-direction:column; gap:0; margin-top:24px; border:1px solid var(--line); } .how-ben { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:#fff; } .how-ben:last-child { border-bottom:none; } .how-ben__ic { color:var(--teal-d); font-size:1.1rem; flex-shrink:0; margin-top:2px; font-weight:900; } .how-ben__t { font-size:.9rem; font-weight:700; color:var(--teal-d); margin-bottom:2px; } [dir="rtl"] .how-ben__t { font-family:'Rubik',sans-serif; } [dir="ltr"] .how-ben__t { font-family:'Inter',sans-serif; } .how-ben__p { font-size:.84rem; color:var(--grey); line-height:1.5; } /* Before/after */ .ba-wrap { display:flex; flex-direction:column; gap:0; } .ba-item { position:relative; } .ba-tag { position:absolute; top:12px; right:12px; z-index:2; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; } [dir="rtl"] .ba-tag { font-family:'Rubik',sans-serif; right:12px; } [dir="ltr"] .ba-tag { font-family:'Inter',sans-serif; right:auto; left:12px; } .ba-tag--before { background:#FEF0E9; color:#c5501e; } .ba-tag--after { background:var(--teal-light); color:var(--teal-d); } .ba-ph { height:190px; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; letter-spacing:.04em; } .ba-ph--before { background:linear-gradient(135deg,#b0913a,#d4a843); } .ba-ph--after { background:linear-gradient(135deg,var(--teal),var(--teal-d)); } .ba-cap { font-size:.78rem; color:var(--grey); padding:10px 14px; background:#fff; border:1px solid var(--line); border-top:none; line-height:1.5; } .split-media { align-self:center; } iframe.img-ph { width:100%; aspect-ratio:16/9; border:0; border-radius:10px; display:block; } @media(max-width:860px){ .split { grid-template-columns:1fr; } } /* ============================================================ INSTALLATION — 3 columns ============================================================ */ .sec--off:has(.install-grid) { background:var(--teal-light); padding-bottom:112px; } .install-card { border-top:3px solid var(--navy); } .install-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; } .install-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 24px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); } .install-ic { width:48px; height:48px; border-radius:8px; background:#ECEBFB; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .install-ic svg { width:24px; height:24px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .install-h { font-size:.96rem; font-weight:900; color:var(--teal-d); margin-bottom:8px; } [dir="rtl"] .install-h { font-family:'Rubik',sans-serif; } [dir="ltr"] .install-h { font-family:'Inter',sans-serif; } .install-p { font-size:.88rem; color:var(--grey); line-height:1.65; } .install-spec { display:inline-block; background:var(--off); border:1px solid var(--line); font-size:.8rem; font-weight:700; padding:5px 12px; color:var(--blue); margin-top:10px; } [dir="rtl"] .install-spec { font-family:'Rubik',sans-serif; } [dir="ltr"] .install-spec { font-family:'Inter',sans-serif; } @media(max-width:780px){ .install-grid { grid-template-columns:1fr; } } /* ============================================================ SPECS ROW ============================================================ */ .specs-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; } .spec-cell { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:12px; padding:18px 16px; text-align:center; } .spec-val { font-size:1.3rem; font-weight:900; color:var(--blue); } .spec-lbl { font-size:.74rem; color:var(--grey); margin-top:4px; line-height:1.4; } .specs-row--3 { grid-template-columns:repeat(3,1fr); } @media(max-width:640px){ .specs-row { grid-template-columns:1fr 1fr; } } /* ============================================================ FAQ ============================================================ */ .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:.96rem; 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); } .faq-body { padding:0 0 18px; font-size:.9rem; color:var(--grey); line-height:1.72; max-width:760px; } /* ============================================================ CTA ============================================================ */ .cta-inner { background:linear-gradient(120deg, var(--teal-d), var(--teal)); border-radius:20px; padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cta-inner h2 { font-size:clamp(1.4rem,2.8vw,2rem); font-weight:900; color:#fff; line-height:1.2; max-width:520px; } .cta-inner p { color:rgba(255,255,255,.75); margin-top:8px; font-size:.95rem; } .cta-btns { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; } @media(max-width:600px){ .cta-inner { flex-direction:column; padding:32px 28px; } .cta-btns { flex-direction:column; } } /* Page-specific button variant override (white button on dark CTA uses blue text) */ .sec--dark .btn--white { background:#fff; color:var(--navy); border:none; } .sec--dark .btn--white:hover { background:var(--off); } /* ============================================================ TRUST BADGES STRIP ============================================================ */ .trust-strip { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; } .trust-badge { flex:1; min-width:120px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:10px; padding:14px 18px; text-align:center; font-size:.78rem; color:var(--grey); display:flex; flex-direction:column; align-items:center; gap:4px; } .trust-badge strong { display:block; color:var(--blue); font-size:.82rem; } [dir="rtl"] .trust-badge strong { font-family:'Rubik',sans-serif; } [dir="ltr"] .trust-badge strong { font-family:'Inter',sans-serif; }