.elementor-kit-3579{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-3579 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS */.teal-hero { position: relative; isolation: isolate; overflow: hidden; } .teal-hero .hero-copy { position: relative; z-index: 2; } .hero-window { position: relative; width: 100%; max-width: 420px; aspect-ratio: 316 / 334.28; margin-left: auto; } .hero-veil { position: absolute; left: -3000px; top: -3000px; width: calc(100% + 6000px); height: calc(100% + 6000px); background: rgba(14, 42, 71, 0.82); pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(#000, #000), url(/wp-content/uploads/teal/teal-mark-mask.svg); -webkit-mask-position: 0 0, 3000px 3000px; -webkit-mask-size: 100% 100%, calc(100% - 6000px) calc(100% - 6000px); -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-image: linear-gradient(#000, #000), url(/wp-content/uploads/teal/teal-mark-mask.svg); mask-position: 0 0, 3000px 3000px; mask-size: 100% 100%, calc(100% - 6000px) calc(100% - 6000px); mask-repeat: no-repeat; mask-composite: exclude; } /* Mobile hero: still photo (the video fallback image) with a navy fade behind the text */ @media (max-width: 767px) { .teal-hero { justify-content: flex-end !important; } .teal-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(14,42,71,.95) 0%, rgba(14,42,71,.82) 30%, rgba(14,42,71,.25) 55%, rgba(14,42,71,0) 75%); } } /* ---------- Quick links card ---------- */ .qcard .elementor-widget-icon-box { padding: 16px 20px; } .qcard .elementor-widget-icon-box + .elementor-widget-icon-box { border-left: 1px solid #E4EAF0; } /* ---------- Product range cards ---------- */ .range-card { overflow: hidden; transition: border-color .2s, transform .2s; } .range-card:hover { border-color: #4EC0AE !important; transform: translateY(-2px); } .range-card img { transition: transform .5s cubic-bezier(.2,.7,.2,1); } .range-card:hover img { transform: scale(1.05); } .range-card .arrow { color: #2E7F7C; font-weight: 700; } .img-placeholder { height: 220px; display: flex; align-items: center; justify-content: center; background: #DCE5EC; color: #3E4A57; font-size: 13px; font-weight: 600; } /* Mobile: product cards and brand logos become one swipeable row */ @media (max-width: 767px) { .range-row { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; margin: 0 -20px; padding: 4px 20px 14px; scrollbar-width: none; } .range-row::-webkit-scrollbar { display: none; } .range-row > .range-card { flex: 0 0 78%; scroll-snap-align: start; } .sb-row { display: flex !important; overflow-x: auto; scrollbar-width: none; } .sb-row > * { flex: 0 0 120px; } } /* ---------- Brand tiles ---------- */ .brand-tile { transition: transform .2s; } .brand-tile:hover { transform: translateY(-2px); } /* ---------- Guide FAQs (inside the Tabs widget) ---------- */ .g-qa { border-bottom: 1px solid #DCE5EC; border-radius: 4px; } .g-qa[open] { border: 1px solid #CDE8E7; margin-bottom: 6px; } .g-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; font-weight: 700; font-size: 15px; color: #0E2A47; } .g-qa summary::-webkit-details-marker { display: none; } .g-qa summary::after { content: "+"; font-size: 22px; font-weight: 500; } .g-qa[open] summary { background: #E3F3F2; } .g-qa[open] summary::after { content: "\2212"; color: #2E7F7C; } .g-qa > div { padding: 2px 18px 18px; color: #3E4A57; font-size: 14.5px; } .g-qa a { color: #2E7F7C; font-weight: 700; text-decoration: none; } /* ---------- Mobile bottom action bar (HTML widget in the footer template) ---------- */ .m-bar { display: none; } @media (max-width: 1024px) { .m-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #DCE5EC; box-shadow: 0 -8px 24px rgba(14,42,71,.10); } .m-bar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 4px; font-weight: 700; font-size: 15px; text-decoration: none; } .m-bar .m-call, .m-bar .m-mail { border: 1.5px solid #0E2A47; color: #0E2A47; } .m-bar .m-quote { flex: 1.4 1 0; background: #4EC0AE; color: #fff; } body { padding-bottom: 72px; } } /* ---------- Enquiry pop-up: product pre-fill banner ---------- */ .sheet-prod { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 4px; background: #E3F3F2; border-left: 3px solid #4EC0AE; font-size: 13px; color: #1F6461; } .sheet-prod[hidden] { display: none; } .sheet-prod strong { font-size: 15px; color: #0E2A47; } /* Teal Products — guide tabs CSS FIX (v3, 13 November 2026) Corrected to use the REAL rendered Elementor widget ID: 1873c7f1. Previous fixes used the JSON ID, 6ae3021, which does not exist on the live page. Replace previous v1/v2 CSS overrides rather than stacking the files. */ /* Teal Products guide-tab appearance patch Append AFTER the supplied teal-custom.css in Site Settings > Custom CSS. Targets the live Tabs widget via its observed Elementor ID (1873c7f1) OR its optional class (g-tabs-el). Does not depend on the class being set. The original importer uses the legacy Elementor Tabs widget. */ @media (min-width: 768px) { :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tabs-wrapper { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100% !important; overflow: visible !important; border: 0 !important; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tabs-wrapper > .elementor-tab-desktop-title { display: flex !important; position: relative; justify-content: center; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 10px 14px !important; border: 1px solid #DCE5EC !important; border-radius: 4px; background: #fff !important; color: #0E2A47 !important; text-align: center; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; transition: border-color .15s, background-color .15s; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tabs-wrapper > .elementor-tab-desktop-title:hover { border-color: #4EC0AE !important; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tabs-wrapper > .elementor-tab-desktop-title.elementor-active { background: #0E2A47 !important; border-color: #0E2A47 !important; color: #fff !important; } /* Replace Elementor's huge active-tab border pseudo-elements with guide icons. */ :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title::after { display: none !important; content: none !important; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title::before { content: "" !important; display: inline-block !important; position: static !important; width: 18px !important; height: 18px !important; flex: 0 0 18px; border: 0 !important; background: currentColor; transform: none !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tabs-content-wrapper { margin-top: 22px; padding: 6px 6px 0; background: #fff; border: 1px solid #DCE5EC !important; border-radius: 4px; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-content { border: 0 !important; padding: 0 !important; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-mobile-title { display: none !important; } } /* Keep Elementor's native mobile accordion behavior, but make it visually consistent. */ @media (max-width: 767px) { :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-mobile-title { padding: 14px 16px !important; border: 1px solid #DCE5EC !important; background: #fff !important; color: #0E2A47 !important; font-weight: 600; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-mobile-title.elementor-active { background: #0E2A47 !important; color: #fff !important; border-color: #0E2A47 !important; } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-content { background: #fff; border: 1px solid #DCE5EC !important; border-top: 0 !important; padding: 6px !important; } } /* Match the supplied reference FAQ padding and remove the final separator. */ :is(.g-tabs-el, .elementor-element-1873c7f1) .g-qa:last-child { border-bottom: 0; } :is(.g-tabs-el, .elementor-element-1873c7f1) .g-qa summary::after { line-height: 1; } :is(.g-tabs-el, .elementor-element-1873c7f1) .g-qa > div p { margin: 12px 0 0; } @media (min-width: 768px) { :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title[data-tab="1"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204h6a4%204%200%200%201%204%204v13a3%203%200%200%200-3-3H2zM22%204h-6a4%204%200%200%200-4%204v13a3%203%200%200%201%203-3h7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204h6a4%204%200%200%201%204%204v13a3%203%200%200%200-3-3H2zM22%204h-6a4%204%200%200%200-4%204v13a3%203%200%200%201%203-3h7z%22%2F%3E%3C%2Fsvg%3E"); } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title[data-tab="2"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%2F%3E%3Cpath%20d%3D%22M14%203v6h6M8%2013h8M8%2017h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%2F%3E%3Cpath%20d%3D%22M14%203v6h6M8%2013h8M8%2017h5%22%2F%3E%3C%2Fsvg%3E"); } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title[data-tab="3"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V8l7-5%207%205v13M9%2021v-6h6v6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V8l7-5%207%205v13M9%2021v-6h6v6%22%2F%3E%3C%2Fsvg%3E"); } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title[data-tab="4"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.8-3.8a6%206%200%200%201-7.9%207.9l-6.9%206.9a2.1%202.1%200%200%201-3-3l6.9-6.9a6%206%200%200%201%207.9-7.9z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.8-3.8a6%206%200%200%201-7.9%207.9l-6.9%206.9a2.1%202.1%200%200%201-3-3l6.9-6.9a6%206%200%200%201%207.9-7.9z%22%2F%3E%3C%2Fsvg%3E"); } :is(.g-tabs-el.elementor-widget-tabs, .elementor-element-1873c7f1.elementor-widget-tabs) .elementor-tab-desktop-title[data-tab="5"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%2F%3E%3Cpath%20d%3D%22M14%203v6h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%2F%3E%3Cpath%20d%3D%22M14%203v6h6%22%2F%3E%3C%2Fsvg%3E"); } }/* End custom CSS */