.elementor-kit-5{--e-global-color-primary:#14295F;--e-global-color-secondary:#234691;--e-global-color-text:#45526E;--e-global-color-accent:#C7EF22;--e-global-color-turf_white:#FFFFFF;--e-global-color-turf_mist:#F1F4F9;--e-global-color-turf_line:#DAE1EC;--e-global-color-turf_steel:#70809E;--e-global-color-turf_blue:#014AA0;--e-global-color-turf_night:#0D1E4B;--e-global-color-turf_line_dark:#34508F;--e-global-color-turf_char:#0D1E4B;--e-global-color-turf_on_dark:#CBD6EC;--e-global-typography-primary-font-family:"Bebas Neue";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Source Sans 3";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Source Sans 3";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55em;--e-global-typography-accent-font-family:"Source Sans 3";--e-global-typography-accent-font-weight:600;--e-global-typography-turf_display-font-family:"Bebas Neue";--e-global-typography-turf_display-font-size:76px;--e-global-typography-turf_display-font-weight:400;--e-global-typography-turf_display-line-height:1em;--e-global-typography-turf_h1-font-family:"Bebas Neue";--e-global-typography-turf_h1-font-size:64px;--e-global-typography-turf_h1-font-weight:400;--e-global-typography-turf_h1-line-height:1em;--e-global-typography-turf_h2-font-family:"Bebas Neue";--e-global-typography-turf_h2-font-size:48px;--e-global-typography-turf_h2-font-weight:400;--e-global-typography-turf_h2-line-height:1.03em;--e-global-typography-turf_h3-font-family:"Source Sans 3";--e-global-typography-turf_h3-font-size:23px;--e-global-typography-turf_h3-font-weight:600;--e-global-typography-turf_h3-line-height:1.2em;--e-global-typography-turf_h4-font-family:"Source Sans 3";--e-global-typography-turf_h4-font-size:17px;--e-global-typography-turf_h4-font-weight:600;--e-global-typography-turf_h4-line-height:1.25em;--e-global-typography-turf_eyebrow-font-family:"Source Sans 3";--e-global-typography-turf_eyebrow-font-size:17px;--e-global-typography-turf_eyebrow-font-weight:600;--e-global-typography-turf_eyebrow-font-style:italic;--e-global-typography-turf_eyebrow-line-height:1.3em;--e-global-typography-turf_code-font-family:"Source Sans 3";--e-global-typography-turf_code-font-size:15px;--e-global-typography-turf_code-font-weight:600;--e-global-typography-turf_code-font-style:italic;--e-global-typography-turf_code-line-height:1.2em;--e-global-typography-turf_lead-font-family:"Source Sans 3";--e-global-typography-turf_lead-font-size:20px;--e-global-typography-turf_lead-font-weight:400;--e-global-typography-turf_lead-line-height:1.45em;--e-global-typography-turf_small-font-family:"Source Sans 3";--e-global-typography-turf_small-font-size:15px;--e-global-typography-turf_small-font-weight:400;--e-global-typography-turf_small-line-height:1.5em;--e-global-typography-turf_button-font-family:"Source Sans 3";--e-global-typography-turf_button-font-size:13px;--e-global-typography-turf_button-font-weight:700;--e-global-typography-turf_button-text-transform:uppercase;--e-global-typography-turf_button-line-height:1em;--e-global-typography-turf_button-letter-spacing:1px;background-color:#FFFFFF;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-turf_button-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_button-font-size );font-weight:var( --e-global-typography-turf_button-font-weight );text-transform:var( --e-global-typography-turf_button-text-transform );line-height:var( --e-global-typography-turf_button-line-height );letter-spacing:var( --e-global-typography-turf_button-letter-spacing );color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:15px 24px 15px 24px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-turf_white );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-turf_blue );}.elementor-kit-5 a:hover{color:var( --e-global-color-primary );}.elementor-kit-5 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h1-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h1-font-size );font-weight:var( --e-global-typography-turf_h1-font-weight );line-height:var( --e-global-typography-turf_h1-line-height );}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h2-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h2-font-size );font-weight:var( --e-global-typography-turf_h2-font-weight );line-height:var( --e-global-typography-turf_h2-line-height );}.elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h3-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h3-font-size );font-weight:var( --e-global-typography-turf_h3-font-weight );line-height:var( --e-global-typography-turf_h3-line-height );}.elementor-kit-5 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h4-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h4-font-size );font-weight:var( --e-global-typography-turf_h4-font-weight );line-height:var( --e-global-typography-turf_h4-line-height );}.elementor-kit-5 img{border-radius:0px 0px 0px 0px;}.elementor-kit-5 label{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_eyebrow-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_eyebrow-font-size );font-weight:var( --e-global-typography-turf_eyebrow-font-weight );font-style:var( --e-global-typography-turf_eyebrow-font-style );line-height:var( --e-global-typography-turf_eyebrow-line-height );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-turf_line );border-radius:0px 0px 0px 0px;padding:13px 15px 13px 15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-text-font-size:17px;--e-global-typography-turf_display-font-size:62px;--e-global-typography-turf_h1-font-size:52px;--e-global-typography-turf_h2-font-size:42px;--e-global-typography-turf_h3-font-size:22px;--e-global-typography-turf_h4-font-size:17px;--e-global-typography-turf_eyebrow-font-size:17px;--e-global-typography-turf_code-font-size:15px;--e-global-typography-turf_lead-font-size:19px;--e-global-typography-turf_small-font-size:15px;--e-global-typography-turf_button-font-size:13px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h1{font-size:var( --e-global-typography-turf_h1-font-size );line-height:var( --e-global-typography-turf_h1-line-height );}.elementor-kit-5 h2{font-size:var( --e-global-typography-turf_h2-font-size );line-height:var( --e-global-typography-turf_h2-line-height );}.elementor-kit-5 h3{font-size:var( --e-global-typography-turf_h3-font-size );line-height:var( --e-global-typography-turf_h3-line-height );}.elementor-kit-5 h4{font-size:var( --e-global-typography-turf_h4-font-size );line-height:var( --e-global-typography-turf_h4-line-height );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-turf_button-font-size );line-height:var( --e-global-typography-turf_button-line-height );letter-spacing:var( --e-global-typography-turf_button-letter-spacing );}.elementor-kit-5 label{font-size:var( --e-global-typography-turf_eyebrow-font-size );line-height:var( --e-global-typography-turf_eyebrow-line-height );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-text-font-size:16px;--e-global-typography-turf_display-font-size:48px;--e-global-typography-turf_h1-font-size:42px;--e-global-typography-turf_h2-font-size:36px;--e-global-typography-turf_h3-font-size:20px;--e-global-typography-turf_h4-font-size:16px;--e-global-typography-turf_eyebrow-font-size:16px;--e-global-typography-turf_code-font-size:14px;--e-global-typography-turf_lead-font-size:18px;--e-global-typography-turf_small-font-size:15px;--e-global-typography-turf_button-font-size:13px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h1{font-size:var( --e-global-typography-turf_h1-font-size );line-height:var( --e-global-typography-turf_h1-line-height );}.elementor-kit-5 h2{font-size:var( --e-global-typography-turf_h2-font-size );line-height:var( --e-global-typography-turf_h2-line-height );}.elementor-kit-5 h3{font-size:var( --e-global-typography-turf_h3-font-size );line-height:var( --e-global-typography-turf_h3-line-height );}.elementor-kit-5 h4{font-size:var( --e-global-typography-turf_h4-font-size );line-height:var( --e-global-typography-turf_h4-line-height );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-turf_button-font-size );line-height:var( --e-global-typography-turf_button-line-height );letter-spacing:var( --e-global-typography-turf_button-letter-spacing );}.elementor-kit-5 label{font-size:var( --e-global-typography-turf_eyebrow-font-size );line-height:var( --e-global-typography-turf_eyebrow-line-height );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* TURF Core – only what Elementor widgets cannot style: the JS-rendered quote list. */ .turf-quote-list { display: grid; gap: 10px; } .turf-quote-empty { margin: 0; padding: 20px; border: 1px dashed var(--e-global-color-turf_line, #d9dde5); color: var(--e-global-color-text, #4a5263); font-size: 15px; } .turf-quote-item { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 16px; padding: 10px 12px 10px 10px; background: #fff; border: 1px solid var(--e-global-color-turf_line, #d9dde5); } .turf-quote-item img { width: 64px; height: 64px; object-fit: contain; } .turf-quote-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .turf-quote-code { font-family: var(--e-global-typography-turf_code-font-family, sans-serif); font-weight: 700; letter-spacing: .04em; color: var(--e-global-color-turf_blue, #014AA0); font-size: 14px; } .turf-quote-meta a { color: var(--e-global-color-primary, #14295F); font-weight: 600; text-decoration: none; } .turf-quote-meta small { color: #6b7385; font-size: 12px; } .turf-quote-qty { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6b7385; } .turf-quote-qty input { width: 110px; padding: 8px 10px; border: 1px solid var(--e-global-color-turf_line, #d9dde5); border-radius: 0; font-size: 14px; } .turf-quote-remove { width: 36px; height: 36px; border: 0; background: transparent; color: #6b7385; font-size: 22px; line-height: 1; cursor: pointer; } .turf-quote-remove:hover, .turf-quote-remove:focus-visible { color: var(--e-global-color-turf_blue, #014AA0); } @media (max-width: 600px) { .turf-quote-item { grid-template-columns: 56px 1fr auto; } .turf-quote-item img { width: 56px; height: 56px; } .turf-quote-qty { grid-column: 2 / 4; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .elementor-invisible { visibility: visible !important; } } /* Product specification table ([turf_specs]). */ .turf-specs { margin: 0; border-top: 1px solid var(--e-global-color-turf_line, #d9dde5); } .turf-spec { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--e-global-color-turf_line, #d9dde5); } .turf-spec dt { font-family: var(--e-global-typography-turf_eyebrow-font-family, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6b7385; padding-top: 3px; } .turf-spec dd { margin: 0; color: var(--e-global-color-primary, #14295F); font-size: 15px; line-height: 1.55; } .turf-spec dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--e-global-color-turf_blue, #014AA0); text-underline-offset: 3px; } @media (max-width: 600px) { .turf-spec { grid-template-columns: 1fr; gap: 4px; } } /* TURF experience: signature sections plus shared brand details. Colours and fonts come from the Elementor kit. */ :root { --nv: var(--e-global-color-primary, #14295F); --bl: var(--e-global-color-secondary, #234691); --lm: var(--e-global-color-accent, #C7EF22); --st: var(--e-global-color-turf_blue, #014AA0); --mi: var(--e-global-color-turf_mist, #F1F4F9); --tx: var(--e-global-color-text, #45526E); --ln: var(--e-global-color-turf_line, #DAE1EC); --dp: 'Bebas Neue', 'Arial Narrow', sans-serif; --sn: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; --cut: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); --gut: clamp(20px, 3vw, 40px); --hh: 78px; --wrap: 1320px; } html { scroll-padding-top: calc(var(--hh) + 56px); } [class^="tx-"] h3, [class*=" tx-"] h3 { font: 600 21px/1.2 var(--sn) !important; color: var(--nv); margin: 0; } .tx-rib { display: inline-block; background: var(--lm); color: var(--nv) !important; font: italic 600 16px/1.2 var(--sn); padding: 4px 13px; margin: 0; transform: rotate(-2deg) skewX(-6deg); text-decoration: none; } h1 .tx-rib, h2 .tx-rib { font: inherit; padding: .03em .16em 0; } .tx-pill { display: inline-block; background: var(--lm); color: var(--nv) !important; font: 700 13px/1 var(--sn); letter-spacing: 1px; text-transform: uppercase; padding: 16px 24px; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background .2s, color .2s; } .tx-pill:hover { background: #fff; color: var(--nv) !important; } .tx-pill.is-dark { background: var(--nv); color: #fff !important; } .tx-pill.is-dark:hover { background: var(--st); color: #fff !important; } .tx-more { font: italic 600 17px/1.3 var(--sn); color: var(--st) !important; text-decoration: underline; text-decoration-color: var(--lm); text-decoration-thickness: 3px; text-underline-offset: 5px; } .tx-more:hover { color: var(--nv) !important; } .tx-more.is-light { color: #fff !important; } .tx-more.is-light:hover { color: var(--lm) !important; } .tx-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; } .tx-lead { font: 400 19px/1.5 var(--sn); color: var(--tx); margin: 0; } .tx-head { max-width: var(--wrap); margin: 0 auto 28px; } .tx-head p { margin: 8px 0 0; font: 400 19px/1.45 var(--sn); color: var(--tx); } .tx-head.is-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .tx-dl { margin: 0; } .tx-dl div { padding: 10px 0; border-top: 1px solid var(--ln); } .tx-dl dt { font: italic 600 14px/1.3 var(--sn); color: var(--st); } .tx-dl dd { margin: 0; font: 400 16px/1.4 var(--sn); color: var(--nv); } /* ---------- Hero carousel */ /* ---------- Range */ .tx-rs { display: flex; gap: 6px; height: clamp(380px, 58vh, 540px); max-width: var(--wrap); margin: 0 auto; } .tx-r { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--nv); color: #fff; text-decoration: none; transition: flex-grow .55s cubic-bezier(.2, .7, .2, 1); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); } .tx-r.is-open { flex-grow: 6; } .tx-r-ph { position: absolute; inset: 0; } .tx-r-ph img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; } .tx-r-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 30, 75, .9) 0, rgba(13, 30, 75, .55) 60%, rgba(13, 30, 75, .45) 100%); transition: opacity .4s; } .tx-r.is-open .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .86) 0, rgba(13, 30, 75, 0) 42%); } .tx-r-name { position: absolute; left: 50%; bottom: 22px; font: 400 clamp(26px, 2.4vw, 36px)/1 var(--dp); letter-spacing: .5px; white-space: nowrap; color: #fff; transform-origin: 0 50%; transform: rotate(-90deg); transition: transform .4s, left .4s; } .tx-r.is-open .tx-r-name { left: 22px; transform: none; font-size: clamp(36px, 3.6vw, 54px); color: var(--lm); } .tx-r-txt { position: absolute; right: 24px; bottom: 26px; max-width: 280px; text-align: right; font: 500 17px/1.3 var(--sn); opacity: 0; transition: opacity .25s; } .tx-r.is-open .tx-r-txt { opacity: 1; transition-delay: .25s; } /* ---------- Constructions */ /* ---------- What is Gelstrike */ /* ---------- Layer animation */ .tx-layer { position: absolute; top: 0; height: 100%; transform: translateX(calc(var(--d, 0) * (1 - var(--p)) * 1%)) scale(calc(var(--sc, 1) + (1 - var(--sc, 1)) * var(--p))); } .tx-layer img { display: block; width: 100% !important; height: auto !important; } .tx-lab { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding: 32px 9px 5px; text-align: center; white-space: nowrap; font: 600 16px/1.2 var(--sn); color: var(--nv); background: linear-gradient(#fff, #fff) no-repeat bottom / 100% calc(100% - 28px); opacity: calc((var(--p) - .82) * 6); } .tx-lab::before { content: ''; position: absolute; left: 50%; top: 2px; height: 26px; border-left: 2px solid var(--nv); } .tx-lab i { display: block; font: 400 15px/1 var(--dp); opacity: .7; margin-bottom: 3px; } .is-gel .tx-lab { color: var(--lm); background: linear-gradient(var(--nv), var(--nv)) no-repeat bottom / 100% calc(100% - 28px); } /* ---------- Factory story */ /* ---------- All Products: categories */ /* ---------- Contact routes */ /* ---------- In-page navigation */ .tx-sub { display: flex; gap: 4px 22px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--ln); padding: 13px max(var(--gut), calc((100% - var(--wrap)) / 2)); white-space: nowrap; scrollbar-width: none; } .tx-sub a { font: 600 15px/1.2 var(--sn); color: var(--tx) !important; text-decoration: none; padding-bottom: 3px; border-bottom: 3px solid transparent; } .tx-sub a:hover { color: var(--nv) !important; } .tx-sub a.is-on { color: var(--nv) !important; border-color: var(--lm); } /* ---------- Shared with Elementor pages */ .turf-ribbon .elementor-heading-title { display: inline-block; background: var(--lm); color: var(--nv) !important; font-style: italic; font-weight: 600; padding: 4px 13px; transform: rotate(-2deg) skewX(-6deg); } .turf-frame { position: relative; } .turf-frame::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; background: var(--lm); clip-path: var(--cut); } .turf-frame img { position: relative; clip-path: var(--cut); } .turf-cut img { clip-path: var(--cut); } .turf-ph img { aspect-ratio: 4 / 3; width: 100% !important; height: auto !important; object-fit: cover; } .turf-sticky-sub { position: sticky; top: var(--hh); z-index: 40; } .elementor-form .elementor-field-group .elementor-field { min-height: 48px; font-size: 16px; } .elementor-form .elementor-field-type-acceptance label { font-size: 14px; } .elementor-form .elementor-field:focus { box-shadow: 0 0 0 2px var(--lm) !important; border-color: var(--nv) !important; } .elementor-location-header .e-con > .e-con:first-child { flex-shrink: 0; } /* ---------- Tablet and phone: designed separately, not shrunk */ @media (max-width: 1024px) { :root { --hh: 64px; } .tx-rs { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; } .tx-r, .tx-r.is-open { flex: none; width: 72vw; max-width: 360px; height: 420px; scroll-snap-align: center; } .tx-r .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .9) 0, rgba(13, 30, 75, 0) 50%); } .tx-r .tx-r-name { left: 18px; bottom: 74px; transform: none; font-size: 40px; color: var(--lm); } .tx-r .tx-r-txt { opacity: 1; left: 18px; right: 18px; bottom: 16px; max-width: none; text-align: left; } } @media (max-width: 640px) { .tx-head.is-row { align-items: center; } } @media (prefers-reduced-motion: reduce) { } /* Light card inside a dark band keeps dark form labels */ .turf-light .elementor-field-label, .turf-light label { color: var(--nv) !important; } .turf-dark a { color: var(--lm); } .turf-dark .elementor-widget-text-editor a:hover { color: #fff; } .tx-r, .tx-r-txt { color: #fff !important; } @media (max-width: 1024px) { } /* ========== Revision: compact hero, light layouts, footer ========== */ .tx-hero { position: relative; display: grid; overflow: hidden; background: #fff; } /* Slide 2: text and product kept apart */ /* Range: photographs first, far less blue */ .tx-head.is-row p { margin-top: 6px; } .tx-r { background: #1b1f27; } .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .82) 0, rgba(13, 30, 75, .3) 55%, rgba(13, 30, 75, .12) 100%); } .tx-r.is-open .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .75) 0, rgba(13, 30, 75, 0) 40%); } .tx-rs { height: clamp(340px, 50vh, 460px); } .tx-r.is-open .tx-r-name { color: #fff; } /* What is Gelstrike */ /* Factory story: light green corner accents */ /* Closing */ /* Contact */ .tx-show-line { padding: 12px 14px; background: #F4FBD4; border-left: 3px solid var(--lm); font: 400 15px/1.4 var(--sn); color: var(--nv); } .tx-show-line span { display: block; font: italic 600 14px/1.3 var(--sn); color: var(--st); } /* Light page heroes */ .turf-disc { position: relative; } .turf-disc::before { content: ''; position: absolute; left: 50%; top: 50%; width: 88%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #E9F8AE; } .turf-disc img { position: relative; } .turf-center { text-align: center; } .turf-logos { justify-content: center; } /* Footer */ .turf-footer a { color: #D7DCE4 !important; text-decoration: none; transition: color .2s; } .turf-footer a:hover { color: var(--lm) !important; } .turf-footer .elementor-icon-list-text { color: #D7DCE4 !important; transition: color .2s; } .turf-footer a:hover .elementor-icon-list-text { color: var(--lm) !important; } .turf-footer .tx-pill { color: var(--nv) !important; } /* Back to top */ .tx-top { position: fixed; right: 25px; bottom: 86px; z-index: 97; width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; border: 1px solid var(--ln) !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 4px 14px rgba(13, 30, 75, .16); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s; } .tx-top.is-on { opacity: 1; pointer-events: auto; transform: none; } .tx-top i { position: absolute; left: 50%; top: 54%; width: 11px; height: 11px; border: solid var(--nv); border-width: 2px 0 0 2px; transform: translate(-50%, -50%) rotate(45deg); } .tx-top:hover { background: var(--lm) !important; } @media (max-width: 1024px) { } @media (max-width: 640px) { .tx-top { right: 19px; bottom: 80px; } } @media (max-width: 1024px) { .tx-rs { height: auto; } } .turf-footer a.elementor-button { color: var(--nv) !important; } .turf-footer a.elementor-button:hover { color: #fff !important; } .turf-footer a.elementor-button .elementor-button-text { color: inherit; } /* ========== Homepage refinement ========== */ /* Hero: one centred statement over the factory images */ .tx-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: min(calc(100svh - var(--hh) - 120px), 740px); padding: clamp(40px, 7vh, 72px) 0 clamp(36px, 6vh, 60px); background: linear-gradient(180deg, #fff 62%, #EDF6C4 100%); text-align: center; } .tx-hero h1 { font-size: clamp(46px, 5.6vw, 84px) !important; color: var(--nv); } /* GEL-STRIKE */ /* Product range: charcoal, so it stands apart from GEL-STRIKE above and the photographs lead */ .tx-range { background: #0D1E4B; padding: clamp(52px, 8vh, 80px) var(--gut); } .tx-range .tx-head h2 { color: #fff !important; } /* Manufacturing showcase */ /* See our factory at work */ .tx-fa { display: grid; grid-template-columns: 1fr 1.5fr; align-items: stretch; background: var(--lm); } .tx-fa-t { padding: clamp(36px, 6vh, 64px) clamp(24px, 4vw, 56px) clamp(36px, 6vh, 64px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); align-self: center; } .tx-fa-t h2 { font-size: clamp(40px, 4.4vw, 66px) !important; margin-bottom: 20px; } .tx-fa-v { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .tx-fa-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tx-fa-v.is-playing video { object-fit: contain; } .tx-play { position: absolute !important; left: 50%; top: 50%; width: 92px !important; min-width: 92px !important; height: 92px !important; margin: -46px 0 0 -46px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .25s, background .25s; } .tx-play:hover, .tx-play:focus-visible { transform: scale(1.08); background: var(--lm) !important; } .tx-play i { position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -8px; border: 15px solid transparent; border-left: 24px solid var(--nv); border-right: 0; } .tx-fa-v.is-playing .tx-play { display: none; } @media (max-width: 1024px) { .tx-hero { min-height: 0; padding-top: 36px; } .tx-fa { grid-template-columns: 1fr; } .tx-fa-t { padding: 40px var(--gut); } } @media (max-width: 640px) { .tx-hero h1 { font-size: 13vw !important; } .tx-play { width: 68px !important; min-width: 68px !important; height: 68px !important; margin: -34px 0 0 -34px; } .tx-play i { margin: -11px 0 0 -6px; border-width: 11px; border-left-width: 18px; } } /* ========== Hero sequence ========== */ .tx-hw-pin { position: sticky; top: var(--hh); } .tx-hero { min-height: 0; padding: clamp(32px, 5.5vh, 60px) 0 clamp(26px, 4vh, 44px); } /* About statement */ /* Ball layers: compact, pinned together with the section after it */ /* FAQ */ .tx-faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 5vw, 80px); max-width: var(--wrap); margin: 0 auto; padding: clamp(52px, 8vh, 84px) var(--gut); } .tx-faq-a h2 { margin: 12px 0 10px; } .tx-faq-a > p:not(.tx-rib) { margin: 0 0 18px; font: 400 18px/1.45 var(--sn); color: var(--tx); } .tx-faq-q details { border-top: 1px solid var(--ln); } .tx-faq-q details:last-child { border-bottom: 1px solid var(--ln); } .tx-faq-q summary { position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font: 600 19px/1.3 var(--sn); color: var(--nv); } .tx-faq-q summary::-webkit-details-marker { display: none; } .tx-faq-q summary i { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--lm); clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); transition: transform .25s; } .tx-faq-q details[open] summary i { transform: rotate(45deg); background: var(--nv); } .tx-faq-q details p { margin: 0 44px 20px 0; font: 400 17px/1.5 var(--sn); color: var(--tx); } /* WhatsApp list */ .tx-wa { position: fixed; right: 20px; bottom: 20px; z-index: 98; } .tx-wa-b { display: flex; align-items: center; justify-content: center; width: 56px !important; min-width: 56px !important; height: 56px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #25D366 !important; color: #fff !important; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); } .tx-wa-b:hover { background: #1DA851 !important; } .tx-wa-p { position: absolute; right: 0; bottom: 68px; width: 270px; background: #fff; padding: 14px; box-shadow: 0 14px 40px rgba(13, 30, 75, .24); clip-path: none; } .tx-wa-p[hidden] { display: none; } .tx-wa-p p { margin: 0 0 8px; font: 600 15px/1.3 var(--sn); color: var(--nv); } .tx-wa-p ul { list-style: none; margin: 0; padding: 0; } .tx-wa-p a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; font: 500 16px/1.2 var(--sn); color: var(--nv) !important; text-decoration: none; border-top: 1px solid var(--ln); } .tx-wa-p a:hover { background: #F4FBD4; } .tx-wa-p svg { width: 20px; height: 20px; color: #1DA851; flex: none; } /* ========== Banners ========== */ .tx-bn h1 { font-size: clamp(42px, 5.2vw, 78px) !important; margin: 10px 0 10px; } .tx-bn-l { margin: 0 0 16px; font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--sn); max-width: 560px; } .tx-bn-c { position: relative; z-index: 2; } .tx-bn img { display: block; max-width: none !important; } .tx-bn-split { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; min-height: clamp(360px, 52vh, 500px); background: var(--mi); } .tx-bn-split .tx-bn-c { align-self: center; padding: 40px clamp(24px, 4vw, 60px) 40px max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .tx-bn-m { position: relative; overflow: hidden; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); } .tx-bn-m img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .tx-bn-s { position: absolute; left: 42%; bottom: -26px; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border: 6px solid #fff; background: #fff; z-index: 3; } .tx-bn-s img { width: 100% !important; height: 100% !important; object-fit: cover; } .tx-bn-split.is-dark { background: #0D1E4B; } .tx-bn-split.is-dark h1, .tx-bn-split.is-dark .tx-bn-l { color: #fff !important; } .tx-bn-plain { background: var(--mi); padding: clamp(36px, 6vh, 56px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .tx-break { margin: 0; position: relative; height: clamp(240px, 44vh, 440px); overflow: hidden; } .tx-break img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; } .tx-break figcaption { position: absolute; left: max(var(--gut), calc((100vw - var(--wrap)) / 2)); bottom: 0; background: var(--lm); color: var(--nv); font: italic 600 15px/1 var(--sn); padding: 8px 14px; } /* ========== GEL-STRIKE page ========== */ /* ========== Manufacturing techniques: a different composition each ========== */ /* ========== OEM ========== */ /* ========== About ========== */ /* ========== Contact ========== */ .turf-contact-card { margin-top: -64px; position: relative; z-index: 3; box-shadow: 0 18px 50px rgba(13, 30, 75, .14); } .turf-reach-col { background: #0D1E4B; } /* ========== Product pages ========== */ .tx-crumb { font: 400 14px/1.4 var(--sn); color: var(--tx); margin-bottom: 14px; } .tx-crumb a { color: inherit !important; } .tx-pp h1 { font-size: clamp(38px, 4vw, 60px) !important; margin: 10px 0 14px; } .tx-pp h1 span { display: block; font: italic 600 clamp(18px, 1.6vw, 22px)/1.2 var(--sn); color: var(--st); margin-bottom: 4px; letter-spacing: 0; } .tx-pp .tx-rib a { color: inherit !important; text-decoration: none; } .tx-pp img { display: block; max-width: none; } .tx-pp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .tx-pp-note { margin: 10px 0 0; font: 400 14px/1.4 var(--sn); color: #70809E; } .tx-pill.is-line { background: none; color: var(--nv) !important; box-shadow: inset 0 0 0 2px var(--nv); clip-path: none; } .tx-pill.is-line:hover { background: var(--nv); color: #fff !important; } .tx-pp-b { max-width: var(--wrap); margin: 0 auto; padding: 36px var(--gut) 48px; } .tx-pp-b.is-cols .turf-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; } .tx-pp-b.is-cols .turf-spec { grid-template-columns: 1fr; gap: 2px; } .tx-pp-gal { display: flex; flex-wrap: wrap; gap: 10px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) 40px; } .tx-pp-gal img { width: 220px; height: 220px; object-fit: contain; border: 1px solid var(--ln); } .tx-pp-s { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; background: var(--mi); } .tx-pp-s.is-flip { grid-template-columns: 1fr 1.3fr; } .tx-pp-s.is-flip .tx-pp-st { order: -1; padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .tx-pp-si { position: relative; min-height: 340px; height: 100%; overflow: hidden; } .tx-pp-si img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .tx-pp-st { padding: clamp(32px, 5vh, 56px) clamp(24px, 4vw, 60px); } .tx-pp-st h2 { font-size: clamp(34px, 3.2vw, 48px) !important; margin-bottom: 8px; } .tx-pp-st p { margin: 0 0 12px; font: 400 18px/1.45 var(--sn); color: var(--tx); } /* ========== Tablet and phone ========== */ @media (max-width: 1024px) { .tx-faq { grid-template-columns: 1fr; } .tx-bn-split { grid-template-columns: 1fr; } .tx-bn-m { clip-path: none; height: 56vw; } .tx-bn-s { left: auto; right: var(--gut); } .tx-bn-split .tx-bn-c { padding: 32px var(--gut); } .tx-pp-s, .tx-pp-s.is-flip { grid-template-columns: 1fr; } .tx-pp-s.is-flip .tx-pp-st { order: 2; padding-left: var(--gut); } .tx-pp-st { padding: 28px var(--gut); } .tx-pp-si { height: 56vw; min-height: 0; } .turf-contact-card { margin-top: -48px; } } @media (max-width: 640px) { .tx-pp-b.is-cols .turf-specs { grid-template-columns: 1fr; } .tx-wa-b { width: 50px !important; min-width: 50px !important; height: 50px !important; } .tx-wa { right: 14px; bottom: 14px; } .tx-top { right: 17px; bottom: 74px; } } .tx-pp-si.is-contain img { object-fit: contain; padding: 18px; } /* ========== Hero: three images ========== */ .tx-hw-pin { position: sticky; top: var(--hh); } .tx-hero { background: #fff !important; padding: clamp(34px, 6vh, 64px) 0 clamp(36px, 6vh, 64px); } .tx-loc { margin: 0 0 10px; font: 600 clamp(14px, 1.1vw, 17px)/1.2 var(--sn); letter-spacing: 3px; text-transform: uppercase; color: var(--st); } .tx-arc { position: relative; height: clamp(260px, 46vh, 480px); margin: clamp(22px, 3.5vh, 38px) auto 0; width: 100%; perspective: 1400px; display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 26px; padding-inline: 40px; align-items: center; } .tx-tile { position: relative; margin: 0; overflow: hidden; clip-path: var(--cut); height: 100%; } .tx-tile:nth-child(1), .tx-tile:nth-child(3) { height: 80%; } .tx-tile:nth-child(n+4) { display: none; } .tx-tile img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .tx-tile figcaption { position: absolute; left: 0; bottom: 0; background: var(--lm); color: var(--nv); font: italic 600 15px/1 var(--sn); padding: 8px 13px; white-space: nowrap; } .tx-arc.is-live { display: block; padding: 0; } .tx-arc.is-live .tx-tile { display: block; position: absolute; left: 0; top: 0; will-change: transform; } /* About: full-height, on a neutral ground */ .tx-ab { background: var(--mi); min-height: calc(100svh - var(--hh)); display: flex; align-items: center; } /* The Difference: full-height, ball centred, layers held open before moving on */ .tx-anw-pin { position: sticky; top: var(--hh); } .tx-an { position: relative; background: linear-gradient(180deg, var(--bl) 0, #2c6088 55%, var(--lm) 100%); min-height: calc(100svh - var(--hh)); display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 44px); padding: 28px 0; overflow: hidden; } .tx-an-h { position: relative; flex: none; height: clamp(116px, 15vh, 140px); text-align: center; padding-inline: var(--gut); } .tx-an-h h2 { color: #fff !important; font-size: clamp(36px, 4vw, 60px) !important; } .tx-anw.is-open .tx-an-a { opacity: 0; transform: translateY(-14px); } .tx-anw.is-open .tx-an-b { opacity: 1; transform: none; pointer-events: auto; } .tx-an-view { flex: none; } .tx-an-stage { position: relative; width: min(94vw, 1440px, 138vh); margin: 0 auto 74px; aspect-ratio: 2172 / 490; --p: 1; } .tx-anw.is-static .tx-anw-pin { position: static; } .tx-anw.is-static .tx-an-a { display: none; } .tx-anw.is-static .tx-an-b { position: static; opacity: 1; transform: none; } .tx-anw.is-static .tx-an-h { height: auto; } /* What is GEL-STRIKE */ .tx-gs-w { background: #fff; } .tx-gs { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100svh - var(--hh)); } .tx-gs > * { min-width: 0; } .tx-gs-img { position: relative; overflow: hidden; } .tx-gs-img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 40% 20%; } .tx-gs-t { align-self: center; padding: clamp(36px, 6vh, 64px) max(var(--gut), calc((100vw - var(--wrap)) / 2)) clamp(36px, 6vh, 64px) clamp(28px, 5vw, 80px); } h2.tx-rib { font: 400 clamp(38px, 3.8vw, 58px)/1.1 var(--dp) !important; color: var(--nv) !important; padding: 4px 16px 2px; } .tx-gs-b { margin: 26px 0 22px; font: 500 clamp(24px, 2.5vw, 36px)/1.28 var(--sn); color: var(--nv); } /* Product range */ .tx-range { background: var(--mi); padding: clamp(64px, 10vh, 104px) var(--gut); } .tx-range .tx-head h2 { color: var(--nv) !important; } .tx-rs { height: clamp(420px, 62vh, 600px); gap: 10px; } .tx-fa { margin: 0; } /* ========== Banners ========== */ /* Categories: 3 / 3 / 1 centred */ /* Catalogue with filters */ .tx-cat-w { display: grid; grid-template-columns: 250px 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; } .tx-f { position: sticky; top: calc(var(--hh) + 18px); background: #fff; border: 1px solid var(--ln); padding: 18px; max-height: calc(100svh - var(--hh) - 36px); overflow-y: auto; } .tx-f-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .tx-f-h b { font: 400 26px/1 var(--dp); color: var(--nv); letter-spacing: .4px; } .tx-f-clear, .tx-f-clear2 { padding: 0 !important; background: none !important; border: 0 !important; color: var(--st) !important; font: 600 14px/1.2 var(--sn); text-decoration: underline; cursor: pointer; text-transform: none; letter-spacing: 0; } .tx-f fieldset { border: 0; border-top: 1px solid var(--ln); margin: 0; padding: 12px 0 8px; } .tx-f legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; font: 600 14px/1.3 var(--sn); color: var(--tx); } .tx-f label { clear: both; display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font: 400 16px/1.2 var(--sn); color: var(--nv); } .tx-f label span { flex: 1; } .tx-f label em { font-style: normal; font-size: 13px; color: #70809E; } .tx-f label.is-none { opacity: .4; } .tx-f input { width: 18px; height: 18px; margin: 0; accent-color: var(--nv); flex: none; } .tx-f-open { display: none; } .tx-cr-n { margin: 0 0 14px; font: 600 15px/1.2 var(--sn); color: var(--tx); } .tx-cr-e { padding: 30px; background: #fff; font: 400 17px/1.4 var(--sn); color: var(--tx); text-align: center; } .tx-cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .tx-pc[hidden] { display: none; } .tx-pc-i { display: block; aspect-ratio: 1; margin: 0 -6px 6px; overflow: hidden; } .tx-pc-i img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .tx-pc:hover .tx-pc-i img { transform: scale(1.04); } /* ========== GEL-STRIKE page ========== */ /* Comparison */ /* ========== Manufacturing timeline ========== */ /* ========== About page ========== */ .tx-sys { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(28px, 5vw, 72px); max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vh, 64px) var(--gut) clamp(64px, 10vh, 104px); } .tx-sys-a h2 { position: sticky; top: calc(var(--hh) + 28px); font-size: clamp(46px, 5.2vw, 78px) !important; } .tx-sys-b { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vh, 52px) clamp(20px, 3vw, 40px); } .tx-sy-i { overflow: hidden; margin-bottom: 12px; } .tx-sy-i img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .tx-sy > span { font: 400 clamp(38px, 3.6vw, 54px)/1 var(--dp); color: var(--st); } .tx-sy h3 { margin: 2px 0 4px; } .tx-sy p { margin: 0; font: 400 17px/1.45 var(--sn); color: var(--tx); } .tx-sy-0 { grid-column: 1 / -1; } .tx-sy-0 .tx-sy-i { aspect-ratio: 21 / 9; clip-path: var(--cut); } .tx-sy-1 .tx-sy-i, .tx-sy-2 .tx-sy-i { aspect-ratio: 4 / 3; } .tx-sy-2 { margin-top: 56px; } .tx-sy-3 { grid-column: 1 / -1; } .tx-sy-3 .tx-sy-i { aspect-ratio: 21 / 9; clip-path: var(--cut); } @media (max-width: 1024px) { .tx-arc { height: 54vw; grid-template-columns: 1fr 1.45fr 1fr; gap: 14px; padding-inline: 20px; } .tx-an-stage { width: max(860px, 150vw); margin: 0 0 74px; } .tx-an-h { height: 150px; } .tx-gs { grid-template-columns: 1fr; min-height: 0; } .tx-gs-img { aspect-ratio: 16 / 11; } .tx-gs-t { padding: 36px var(--gut) 48px; } .tx-cat-w { grid-template-columns: 1fr; } .tx-f-open { display: block; width: 100%; padding: 14px !important; background: var(--nv) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; font: 700 13px/1 var(--sn); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .tx-f { position: static; display: none; max-height: none; } .tx-f.is-open { display: block; } .tx-sys { grid-template-columns: 1fr; } .tx-sys-a h2 { position: static; } } @media (max-width: 760px) { } @media (max-width: 640px) { .tx-arc { height: 68vw; } .tx-an-h { height: 176px; } .tx-cg { grid-template-columns: 1fr 1fr; gap: 8px; } .tx-sys-b { grid-template-columns: 1fr; } .tx-sy-2 { margin-top: 0; } } /* ========== Revision fixes ========== */ .tx-f-open { display: none !important; } .tx-f-clear[hidden], .tx-f-clear2[hidden], .tx-cr-e[hidden] { display: none !important; } .tx-f label, .tx-f label span, .tx-f legend { font-style: normal !important; } /* Team contacts */ .tx-tm { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .tx-tm-c { min-width: 0; } .tx-tm h3 { margin: 0 0 6px; font: 400 22px/1.1 var(--dp) !important; letter-spacing: .4px; color: var(--lm) !important; } .tx-tm ul { list-style: none; margin: 0; padding: 0; } .tx-tm li { padding: 2px 0; } .tx-tm a { color: #fff !important; font: 400 15px/1.45 var(--sn); text-decoration: none; overflow-wrap: anywhere; } .tx-tm a:hover { color: var(--lm) !important; } .tx-wa-p span small { display: block; font: 400 13px/1.3 var(--sn); color: var(--st); } .tx-wa-p span { line-height: 1.2; } @media (max-width: 1024px) { .tx-f-open { display: block !important; } } /* ========== Homepage refinements ========== */ /* About: charcoal ground with pitch markings that draw in and a ball moving through a passing pattern */ .tx-ab { position: relative; overflow: hidden; background: #0D1E4B; --ab: 1; } /* The Difference: layer cards */ .tx-an-h { height: clamp(72px, 10vh, 100px); } .tx-an-stage { margin-bottom: 150px; } .tx-lab { width: 138px; white-space: normal; padding: 26px 0 0; background: none !important; color: var(--nv); } .tx-lab::before { top: 2px; height: 22px; } .tx-lab i { position: relative; display: block; background: var(--nv); color: var(--lm); font: 400 19px/1 var(--dp); opacity: 1; margin: 0; padding: 6px 10px 4px; text-align: left; font-style: normal; } .tx-lab b { display: block; background: #fff; padding: 8px 10px 0; text-align: left; font: 400 23px/1 var(--dp); letter-spacing: .3px; color: var(--nv); } .tx-lab small { display: block; min-height: 54px; background: #fff; padding: 3px 10px 9px; text-align: left; font: 500 13px/1.25 var(--sn); color: var(--tx); } .is-gel .tx-lab i { background: var(--lm); color: var(--nv); } .is-gel .tx-lab b, .is-gel .tx-lab small { background: var(--nv); color: #fff; } /* Product range: pinned while the categories open in turn */ .tx-rw-pin { position: sticky; top: var(--hh); } .tx-rw.is-static .tx-rw-pin { position: static; } .tx-range { display: flex; flex-direction: column; height: calc(100svh - var(--hh)); min-height: 520px; padding: clamp(24px, 4.5vh, 48px) var(--gut) clamp(20px, 3.5vh, 36px); } .tx-range .tx-head { width: 100%; flex: none; margin-bottom: clamp(16px, 2.8vh, 28px); } .tx-range .tx-head h2 { font-size: clamp(38px, 4vw, 60px) !important; } .tx-rs { flex: 1; min-height: 0; height: auto; width: 100%; } .tx-r.is-white { background: #fff; } .tx-r-trio { position: absolute; left: 50%; top: 42%; width: min(620px, 42vw); display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%); } .tx-r-trio img { flex: 0 0 33.33%; width: 33.33% !important; height: auto !important; max-width: none !important; mix-blend-mode: multiply; } .tx-r-trio img:nth-child(2) { flex-basis: 38%; width: 38% !important; } .tx-r.is-white .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .85) 0, rgba(13, 30, 75, .25) 55%, rgba(13, 30, 75, .08) 100%); } .tx-r.is-white.is-open .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .8) 0, rgba(13, 30, 75, 0) 26%); } @media (max-width: 1024px) { .tx-an-h { height: 96px; } .tx-an-stage { width: max(1120px, 190vw); margin-bottom: 150px; } .tx-rs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 6px; scroll-snap-type: none; } .tx-r, .tx-r.is-open { width: 100%; max-width: none; height: auto; flex: 1 1 0; min-height: 0; scroll-snap-align: none; } .tx-r.is-open { flex-grow: 7; } .tx-r .tx-r-name { left: 16px; top: 50%; bottom: auto; transform: translateY(-50%); font-size: 26px; color: #fff; } .tx-r.is-open .tx-r-name { top: auto; bottom: 42px; transform: none; font-size: 36px; color: #fff; left: 16px; } .tx-r .tx-r-txt { opacity: 0; left: 16px; right: 16px; bottom: 12px; font-size: 15px; } .tx-r.is-open .tx-r-txt { opacity: 1; } .tx-r .tx-r-ph::after { background: linear-gradient(90deg, rgba(13, 30, 75, .78) 0, rgba(13, 30, 75, .25) 100%); } .tx-r.is-open .tx-r-ph::after, .tx-r.is-white.is-open .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .86) 0, rgba(13, 30, 75, 0) 52%); } .tx-r-trio { top: 36%; width: min(520px, 92vw); } } @media (max-width: 760px) { } @media (max-width: 640px) { .tx-an-h { height: 104px; } .tx-range .tx-head h2 { font-size: 34px !important; } .tx-range .tx-more { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { } /* Layer cards keep a clear gap at every stage width */ .tx-an-stage { --sw: min(94vw, 1440px, 138vh); } .tx-lab { width: min(calc(var(--sw) * .105), 150px); } @media (max-width: 1024px) { .tx-an-stage { --sw: max(1120px, 190vw); } .tx-r.is-white:not(.is-open) .tx-r-ph::after { background: linear-gradient(90deg, rgba(13, 30, 75, .88) 0, rgba(13, 30, 75, .5) 100%); } } /* ========== Homepage refinements, round 3 ========== */ /* About: a pitch at night under floodlights */ .tx-ab { background: #0C1410; --ab: .5; } /* More about us: the ball rests upright and only rolls, at the right speed for its size, on hover */ /* The Difference: a controlled dark ground, spotlit behind the ball, closed by a lime line */ .tx-an { background: radial-gradient(ellipse 62% 56% at 50% 45%, rgba(46, 84, 160, .62) 0, rgba(46, 84, 160, 0) 74%), linear-gradient(180deg, #0D1E4B 0, #081130 100%); border-bottom: 4px solid var(--lm); } .tx-lab { padding: 20px 0 0; text-align: center; color: #fff; opacity: calc((var(--p) - .8 - var(--i, 0) * .018) * 14); translate: 0 calc(max(0, 1 - (var(--p) - .8) * 6) * 16px); } .tx-lab::before { top: 0; height: 16px; border-left: 1px solid rgba(255, 255, 255, .55); } .tx-lab i { background: none; padding: 0; text-align: center; font: 400 clamp(36px, 3.1vw, 48px)/1 var(--dp); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .72); } .tx-lab b { background: none; margin-top: 3px; padding: 6px 0 0; border-top: 2px solid rgba(255, 255, 255, .24); text-align: center; font: 400 clamp(20px, 1.6vw, 24px)/1 var(--dp); color: #fff; } .tx-lab small { background: none; min-height: 0; padding: 4px 2px 0; text-align: center; font: 400 13px/1.3 var(--sn); color: #B7C4E0; } .is-gel .tx-lab i { background: none; color: var(--lm); -webkit-text-stroke: 0; } .is-gel .tx-lab b { background: none; color: var(--lm); border-top-color: var(--lm); } .is-gel .tx-lab small { background: none; color: #fff; } .is-gel .tx-lab::before { border-left: 2px solid var(--lm); } /* What is GEL-STRIKE: room before the range */ .tx-gs-w { padding-bottom: clamp(56px, 11vh, 104px); } /* Product range: its own dark stage, with angled panels */ .tx-range { background: #0D1E4B; padding-top: clamp(28px, 5vh, 56px); } .tx-range .tx-head h2 { color: #fff !important; } .tx-range .tx-more { color: #fff !important; } .tx-rs { --s: 34px; gap: 0; } .tx-r { clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%); margin-left: calc(var(--s) * -1 + 7px); } .tx-r:first-child { margin-left: 0; } .tx-rs.is-live .tx-r { transition: none; } .tx-r-ph img { scale: calc(1.2 - .2 * var(--w, 0)); translate: calc(var(--side, 0) * 5%) 0; } .tx-r-trio { scale: calc(.84 + .16 * var(--w, 0)); } .tx-r-trio img { scale: 1; translate: 0 0; } .tx-r.is-open .tx-r-name { bottom: 56px; left: 26px; font-size: clamp(38px, 4vw, 60px); color: #fff; } .tx-r-txt { right: calc(var(--s) + 22px); bottom: 24px; } .tx-r-n { position: absolute; top: 10px; right: 20px; font: 400 clamp(60px, 7vw, 110px)/1 var(--dp); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .8); opacity: 0; translate: 0 -14px; transition: opacity .35s, translate .45s cubic-bezier(.2, .7, .2, 1); } .tx-r.is-open .tx-r-n { opacity: 1; translate: 0 0; transition-delay: .12s; } .tx-r.is-white .tx-r-n { -webkit-text-stroke-color: var(--nv); } .tx-r-go { position: absolute; left: 26px; bottom: 20px; padding: 6px 12px 5px; background: var(--lm); color: var(--nv); font: 700 12px/1 var(--sn); letter-spacing: 1px; text-transform: uppercase; transform: rotate(-2deg) skewX(-6deg); opacity: 0; translate: 0 12px; transition: opacity .3s, translate .4s cubic-bezier(.2, .7, .2, 1); } .tx-r.is-open .tx-r-go { opacity: 1; translate: 0 0; transition-delay: .18s; } /* Factory film */ .tx-fa-v::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(199, 239, 34, .34) 0, rgba(199, 239, 34, .08) 30%, rgba(199, 239, 34, 0) 52%); transition: opacity .4s; } .tx-fa-v.is-playing::after { opacity: 0; } .tx-play { z-index: 2; width: 128px !important; min-width: 128px !important; height: 128px !important; margin: -64px 0 0 -64px; background: transparent !important; box-shadow: none !important; overflow: visible; } .tx-play svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tx-play svg circle { fill: var(--lm); } .tx-play svg text { font: 700 11.500px/1 var(--sn); fill: var(--nv); letter-spacing: .4px; } .tx-play::before { content: ''; position: absolute; inset: 21%; z-index: 1; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(13, 30, 75, .28); transition: background .25s; } .tx-play::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(199, 239, 34, .85); animation: tx-halo 2.6s ease-out infinite; } @keyframes tx-halo { from { opacity: .9; transform: scale(.94); } to { opacity: 0; transform: scale(1.16); } } .tx-play i { z-index: 2; margin: -15px 0 0 -9px; } .tx-play:hover, .tx-play:focus-visible { background: transparent !important; transform: scale(1.06); } .tx-play:hover::before, .tx-play:focus-visible::before { background: var(--nv); } .tx-play:hover i, .tx-play:focus-visible i { border-left-color: var(--lm); } /* FAQ answers */ .tx-faq-q details p { padding-left: 14px; border-left: 3px solid var(--lm); } .tx-faq-q details p a { color: var(--nv) !important; font-weight: 600; text-decoration: none; box-shadow: inset 0 -2px 0 var(--lm); transition: background .2s; } .tx-faq-q details p a:hover { background: var(--lm); } .tx-faq-q details[open] summary { color: var(--nv); } /* Corner widget: WhatsApp, Facebook, Instagram */ .tx-wa { right: 0; bottom: 0; } .tx-soc { display: flex; flex-direction: column; background: #0D1E4B; box-shadow: -2px -2px 14px rgba(13, 30, 75, .22); } .tx-wa-b, .tx-soc-a { display: flex !important; align-items: center; justify-content: center; width: 46px !important; min-width: 46px !important; height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #0D1E4B !important; color: #fff !important; box-shadow: none !important; transition: background .2s, color .2s; } .tx-soc > * + * { border-top: 1px solid #2B4488 !important; } .tx-wa-b { color: #3DDC84 !important; } .tx-wa-b svg { width: 22px; height: 22px; } .tx-wa-b:hover, .tx-wa-b[aria-expanded="true"] { background: #25D366 !important; color: #fff !important; } .tx-soc-a:hover, .tx-soc-a:focus-visible { background: var(--lm) !important; color: var(--nv) !important; } .tx-wa-p { right: 52px; bottom: 0; width: 290px; } .tx-top { right: 0; bottom: 144px; width: 46px !important; min-width: 46px !important; height: 46px !important; border-radius: 0 !important; border: 0 !important; background: #fff !important; box-shadow: -2px 2px 12px rgba(13, 30, 75, .2); } @media (max-width: 1024px) { .tx-rs { --s: 0px; gap: 5px; } .tx-r { clip-path: none; margin-left: 0; } .tx-r.is-open .tx-r-name { bottom: 40px; left: 16px; font-size: 36px; } .tx-r .tx-r-txt { right: 16px; bottom: 12px; } .tx-r-go { display: none; } .tx-r-n { top: 6px; right: 12px; font-size: 54px; } .tx-play { width: 104px !important; min-width: 104px !important; height: 104px !important; margin: -52px 0 0 -52px; } .tx-play i { margin: -11px 0 0 -6px; border-width: 11px; border-left-width: 18px; } } @media (max-width: 640px) { .tx-lab i { font-size: 34px; } /* Corner widget lies flat along the bottom edge on phones */ .tx-soc { flex-direction: row; } .tx-wa-b, .tx-soc-a { width: 42px !important; min-width: 42px !important; height: 42px !important; } .tx-soc > * + * { border-top: 0 !important; border-left: 1px solid #2B4488 !important; } .tx-wa-p { right: 0; bottom: 48px; width: min(290px, calc(100vw - 24px)); } .tx-top { right: 0; bottom: 48px; width: 42px !important; min-width: 42px !important; height: 42px !important; } .tx-wa-p:not([hidden]) ~ .tx-soc { z-index: 2; } } @media (prefers-reduced-motion: reduce) { } /* ==================== Inner pages, round 4 ==================== */ .tx-rib { max-width: 100%; } @media (max-width: 640px) { .tx-r.is-open .tx-r-name { bottom: 60px; } } /* --- All Products hero: category navigation --- */ .ph { background: radial-gradient(ellipse 80% 70% at 50% 62%, #234691 0, #14295F 52%, #0D1E4B 100%); padding: clamp(36px, 6.5vh, 64px) var(--gut) clamp(32px, 5.5vh, 52px); text-align: center; } .ph h1 { color: #fff !important; font-size: clamp(40px, 5.6vw, 84px) !important; margin: 0 0 clamp(22px, 4vh, 40px); } .ph-r { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, 1.6vw, 24px); max-width: 1320px; margin: 0 auto; align-items: end; } .ph-b { display: block; text-decoration: none; cursor: pointer; } .ph-i { display: block; transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .3s; filter: drop-shadow(0 14px 12px rgba(5, 12, 36, .6)); } .ph-i img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: contain; } .ph-n { display: inline-block; margin-top: 12px; padding: 5px 9px 3px; font: 400 clamp(17px, 1.65vw, 24px)/1 var(--dp); letter-spacing: .4px; color: #fff; transition: background .25s, color .25s, transform .25s; } .ph-b:hover .ph-i, .ph-b:focus-visible .ph-i { transform: translateY(-12px) rotate(-5deg) scale(1.05); } .ph-b:hover .ph-n, .ph-b:focus-visible .ph-n, .ph-b.is-on .ph-n { background: var(--lm); color: var(--nv); transform: rotate(-2deg) skewX(-6deg); } .ph-b.is-on .ph-i { transform: translateY(-6px) scale(1.04); } .ph-l { margin: clamp(20px, 3.4vh, 32px) auto 0; max-width: 760px; font: 400 clamp(17px, 1.4vw, 21px)/1.4 var(--sn); color: #E6ECF8; } .tx-cr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; } .tx-cr-top .tx-cr-n { margin: 0; } .tx-cr-all { font: 700 13px/1 var(--sn); letter-spacing: .8px; text-transform: uppercase; color: var(--nv) !important; text-decoration: none; box-shadow: inset 0 -2px 0 var(--lm); padding-bottom: 3px; } .tx-cat-w { scroll-margin-top: calc(var(--hh) + 20px); } .tx-cat-w.is-plain { display: block; } .tx-cat-w.is-plain .tx-cg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .tx-pc-a a.is-added { color: #5A7A00 !important; } /* --- Category banners --- */ .cb { display: grid; grid-template-columns: 1fr 1.15fr; min-height: clamp(340px, 52vh, 500px); background: var(--nv); overflow: hidden; } .cb > * { min-width: 0; } .cb-t { align-self: center; padding: clamp(32px, 6vh, 56px) clamp(24px, 4vw, 64px) clamp(32px, 6vh, 56px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .cb h1 { color: #fff !important; font-size: clamp(38px, 4.6vw, 70px) !important; margin: 12px 0 10px; } .cb-l { margin: 0 0 18px; max-width: 520px; font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--sn); color: #E6ECF8; } .cb-m { position: relative; clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%); } .cb-m > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .cb.is-white .cb-m { background: #fff; display: flex; align-items: center; justify-content: center; } .cb .tx-r-trio { position: static; transform: none; scale: 1; width: min(640px, 90%); } .cb .tx-r-trio img { flex: 0 0 33.33%; width: 33.33% !important; height: auto !important; max-width: none !important; } /* --- GEL-STRIKE: the animation is the hero --- */ .tx-anw.is-hero .tx-an-h { height: clamp(150px, 23vh, 210px); } .tx-anw.is-hero .tx-an-a h1 { color: #fff !important; font-size: clamp(56px, 7vw, 112px) !important; line-height: .95 !important; margin: 0 0 8px; } .tx-anw.is-hero .tx-an-b h2 { margin-top: 18px; } .vs { background: var(--mi); padding: clamp(56px, 9vh, 96px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .vs > h2 { text-align: center; margin-bottom: clamp(24px, 4vh, 40px); } .vs-g { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .vs-p { min-width: 0; padding: clamp(24px, 3.6vh, 40px) clamp(18px, 3vw, 44px); text-align: center; } .vs-p h3 { font: 400 clamp(30px, 3vw, 46px)/1 var(--dp) !important; margin: 0 0 12px; } .vs-p.is-l { background: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); } .vs-p.is-r { background: var(--nv); color: #fff; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%); } .vs-p.is-r h3 { color: var(--lm) !important; } .vs-b img { display: block; width: clamp(130px, 15vw, 200px) !important; height: auto !important; margin: 0 auto 16px; } .vs-f { display: flex; justify-content: center; gap: 4px; min-height: 118px; } .vs-f figure { flex: 0 1 76px; min-width: 0; margin: 0; } .vs-f img { display: block; width: 100% !important; height: 84px !important; object-fit: contain; } .vs-f figcaption { margin-top: 6px; font: 600 12px/1.2 var(--sn); color: var(--tx); } .vs-p.is-r .vs-f figcaption { color: #CBD6EC; } .vs-f figure.is-g figcaption { display: inline-block; padding: 3px 5px; background: var(--lm); color: var(--nv) !important; } .vs-p dl { margin: 18px auto 0; max-width: 460px; text-align: left; } .vs-p dl div { padding: 10px 0; border-top: 1px solid rgba(20, 41, 95, .14); } .vs-p.is-r dl div { border-color: rgba(255, 255, 255, .22); } .vs-p dt { font: 400 21px/1.1 var(--dp); letter-spacing: .3px; color: var(--nv); } .vs-p.is-r dt { color: #fff; } .vs-p dd { margin: 3px 0 0; font: 400 16px/1.4 var(--sn); color: var(--tx); } .vs-p.is-r dd { color: #E6ECF8; } .vs-x { position: absolute; left: 50%; top: 88px; z-index: 2; width: 62px; height: 62px; margin-left: -31px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lm); color: var(--nv); font: 400 28px/1 var(--dp); box-shadow: 0 0 0 7px var(--mi); } /* --- OEM / Private Label --- */ .ox-s { background: var(--mi); padding: clamp(56px, 9vh, 96px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); text-align: center; scroll-margin-top: var(--hh); } .ox-s-g { display: grid; grid-template-columns: 1fr minmax(240px, 400px) 1fr; grid-template-rows: auto auto; gap: clamp(20px, 4vh, 44px) clamp(14px, 2vw, 34px); align-items: center; margin-top: clamp(24px, 4vh, 44px); text-align: left; } .ox-s-b { grid-column: 2; grid-row: 1 / span 2; } .ox-s-b img { display: block; width: 100% !important; height: auto !important; filter: drop-shadow(0 22px 20px rgba(13, 30, 75, .25)); } .ox-s-c { position: relative; padding-top: 12px; border-top: 3px solid var(--nv); } .ox-s-c::after { content: ''; position: absolute; top: -8px; width: 13px; height: 13px; border-radius: 50%; background: var(--lm); box-shadow: 0 0 0 3px var(--nv); } .ox-s-c.c0, .ox-s-c.c1 { grid-column: 1; text-align: right; } .ox-s-c.c0::after, .ox-s-c.c1::after { right: -7px; } .ox-s-c.c2, .ox-s-c.c3 { grid-column: 3; } .ox-s-c.c2::after, .ox-s-c.c3::after { left: -7px; } .ox-s-c.c0, .ox-s-c.c2 { grid-row: 1; } .ox-s-c.c1, .ox-s-c.c3 { grid-row: 2; } .ox-s-c b { display: block; font: 400 clamp(26px, 2.4vw, 36px)/1 var(--dp); letter-spacing: .4px; color: var(--nv); margin-bottom: 5px; } .ox-s-c span { font: 400 16px/1.4 var(--sn); color: var(--tx); } /* --- Film, shared by Manufacturing and About --- */ /* --- Manufacturing: constructions and quality --- */ /* --- About --- */ /* --- Contact --- */ .tc { background: var(--nv); padding: clamp(48px, 8vh, 84px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); scroll-margin-top: var(--hh); } .tc > h2 { color: #fff !important; font-size: clamp(40px, 4.6vw, 70px) !important; margin-bottom: clamp(24px, 4vh, 40px); } .tc .tx-tm { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3.4vw, 56px); } .tc .tx-tm-c { border-top: 4px solid var(--lm); padding-top: 16px; } .tc .tx-tm h3 { font-size: clamp(34px, 3.4vw, 52px) !important; line-height: 1 !important; color: #fff !important; margin-bottom: 12px; } .tc .tx-tm li { padding: 4px 0; } .tc .tx-tm a { font: 500 clamp(18px, 1.5vw, 21px)/1.3 var(--sn); } .tc .tx-tm-p small { font-size: 13px; color: var(--lm); margin-top: 2px; } .tc-o { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 20px 32px; margin-top: clamp(30px, 5vh, 52px); padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid #2B4488; } .tc-o h3 { font: 400 22px/1.1 var(--dp) !important; letter-spacing: .4px; color: var(--lm) !important; margin: 0 0 6px; } .tc-o p { margin: 0; font: 400 17px/1.45 var(--sn); color: #E6ECF8; } .tc-o a { color: #fff !important; text-decoration: none; } .tc-o a:hover { color: var(--lm) !important; } /* --- Quote list --- */ .turf-quote-btn .elementor-button { position: relative; } .turf-quote-count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; margin-left: 8px; padding: 0 5px; border-radius: 11px; background: var(--nv); color: var(--lm); font: 700 12px/1 var(--sn); letter-spacing: 0; vertical-align: 1px; } .turf-quote-count[hidden] { display: none; } .tq-toast { position: fixed; left: 50%; bottom: 22px; z-index: 9998; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; background: var(--nv); color: #fff; font: 500 15px/1.35 var(--sn); box-shadow: 0 12px 34px rgba(13, 30, 75, .32); transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1); } .tq-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .tq-toast a { margin-left: 6px; color: var(--lm) !important; font-weight: 700; } .tq-n { margin: 0 0 4px; font: 600 15px/1.2 var(--sn); color: var(--tx); } .tq { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 6px 16px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--ln); } .tq-i img { display: block; width: 92px !important; height: 92px !important; object-fit: contain; } .tq-m { min-width: 0; } .tq-m span { display: block; font: italic 600 15px/1.2 var(--sn); color: var(--st); } .tq-m a { display: block; margin: 1px 0; font: 600 17px/1.25 var(--sn); color: var(--nv) !important; text-decoration: none; } .tq-m small { font: 400 13px/1.3 var(--sn); color: #70809E; } .tq-q { display: flex; align-items: stretch; border: 1px solid var(--ln); } .tq-q button { width: 38px !important; min-width: 38px !important; height: 42px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--mi) !important; color: var(--nv) !important; font: 600 20px/1 var(--sn); cursor: pointer; } .tq-q button:hover { background: var(--lm) !important; } .tq-q input { width: 72px !important; height: 42px; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important; text-align: center; font: 600 16px/1 var(--sn); color: var(--nv); -moz-appearance: textfield; } .tq-q input::-webkit-outer-spin-button, .tq-q input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tq-x { padding: 6px 2px !important; background: none !important; border: 0 !important; color: var(--st) !important; font: 600 14px/1 var(--sn); text-decoration: underline; text-transform: none; letter-spacing: 0; cursor: pointer; } .tq-x:hover { color: var(--nv) !important; } .tq-t { grid-column: 2 / -1; display: block; margin-top: 4px; } .tq-t span { display: block; margin-bottom: 4px; font: 600 14px/1.2 var(--sn); color: var(--tx); font-style: normal; } .tq-t textarea { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 0; font: 400 15px/1.4 var(--sn); color: var(--nv); resize: vertical; } .turf-hide { display: none !important; } /* --- Social icons: centred on the right edge, in their own brand colours --- */ .tx-wa { right: 0; bottom: auto; top: 50%; transform: translateY(-50%); } .tx-soc { background: none; box-shadow: -2px 2px 16px rgba(13, 30, 75, .24); } .tx-soc > * + * { border-top: 0 !important; } .tx-wa-b, .tx-wa-b:hover, .tx-wa-b[aria-expanded="true"] { background: #25D366 !important; color: #fff !important; } .tx-soc-a.is-fb, .tx-soc-a.is-fb:hover { background: #1877F2 !important; color: #fff !important; } .tx-soc-a.is-ig, .tx-soc-a.is-ig:hover { background: radial-gradient(circle at 30% 107%, #FDF497 0, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important; color: #fff !important; } .tx-soc-a:hover, .tx-wa-b:hover { filter: brightness(1.08); } .tx-wa-p { right: 52px; top: 50%; bottom: auto; transform: translateY(-50%); } .tx-top { right: 0; bottom: 0; border-top: 1px solid var(--ln) !important; border-left: 1px solid var(--ln) !important; } @media (max-width: 1024px) { .ph-b:hover .ph-i { transform: none; } .cb { grid-template-columns: 1fr; } .cb-m { min-height: 46vw; clip-path: polygon(0 0, 100% 24px, 100% 100%, 0 100%); } .ox-s-g { grid-template-columns: 1fr 1fr; } .ox-s-b { grid-column: 1 / -1; grid-row: 1; width: min(320px, 70%); margin: 0 auto; } .ox-s-c.c0, .ox-s-c.c1, .ox-s-c.c2, .ox-s-c.c3 { grid-column: auto; grid-row: auto; text-align: left; } .ox-s-c::after { display: none; } .tc .tx-tm { grid-template-columns: 1fr 1fr; } .tc-o { grid-template-columns: 1fr 1fr; justify-content: stretch; } .tx-anw.is-hero .tx-an-h { height: 190px; } } @media (max-width: 760px) { .vs-g { grid-template-columns: 1fr; } .vs-p.is-l, .vs-p.is-r { clip-path: none; } .vs-x { position: relative; left: auto; top: auto; margin: -24px auto; grid-row: 2; } .vs-p.is-r { grid-row: 3; } .tq { grid-template-columns: 68px 1fr; } .tq-i img { width: 68px !important; height: 68px !important; } .tq-q { grid-column: 1 / span 2; justify-self: start; } .tq-x { grid-column: 2; grid-row: 2; justify-self: end; } .tq-t { grid-column: 1 / -1; } } @media (max-width: 640px) { .ph-r { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 4px; } .ph-b { flex: 0 0 calc(25% - 3px); } .ph-n { font-size: 15px; padding-inline: 3px; } .ox-s-g { grid-template-columns: 1fr; } .tc .tx-tm { grid-template-columns: 1fr; } .tc-o { grid-template-columns: 1fr; } .tx-anw.is-hero .tx-an-h { height: 208px; } .tx-cr-top { flex-wrap: wrap; } /* Social icons sit centred along the bottom edge on phones */ .tx-wa { top: auto; bottom: 0; right: auto; left: 50%; transform: translateX(-50%); } .tx-wa-p { top: auto; bottom: 48px; right: auto; left: 50%; transform: translateX(-50%); width: min(290px, calc(100vw - 24px)); } .tx-top { bottom: 0; right: 0; } .tq-toast { bottom: 54px; } } .elementor-field-group-quote_items { display: none !important; } @media (max-width: 760px) { } /* ==================== Round 5 ==================== */ :root { --bn: clamp(340px, 53vh, 480px); } /* --- Hero: one dominant image, neighbours glimpsed --- */ /* --- About: real footballs under a navy veil --- */ .tx-ab { background: #0D1E4B; } .tx-go { display: inline-flex; align-items: stretch; text-decoration: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .45); transition: background .25s, border-color .25s; } .tx-go i { position: relative; width: 52px; background: var(--lm); } .tx-go i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -8px; border: solid var(--nv); border-width: 2px 2px 0 0; transform: rotate(45deg); transition: translate .3s cubic-bezier(.2, .7, .2, 1); } .tx-go:hover { background: #fff; border-color: #fff; } .tx-go:hover span { color: var(--nv); } .tx-go:hover i::after { translate: 4px 0; } /* --- The Difference: heading stays put, the second line simply fades in --- */ .tx-an-h, .tx-anw.is-hero .tx-an-h { height: auto; min-height: 0; } .tx-an-h h2 { position: static; margin: 0; } .tx-an-sub { margin: 12px 0 0; opacity: 0; transition: opacity .8s ease; font: 400 clamp(26px, 2.6vw, 40px)/1.1 var(--dp); } .tx-an-sub .tx-rib { font: inherit; padding: .05em .28em 0; } .tx-anw.is-open .tx-an-sub, .tx-anw.is-static .tx-an-sub { opacity: 1; } .tx-lab { translate: none; } /* --- Product range: normal scrolling --- */ .tx-range { height: auto; min-height: 0; padding-top: clamp(52px, 8vh, 84px); padding-bottom: clamp(52px, 8vh, 84px); } .tx-rs { flex: none; height: clamp(440px, 66vh, 620px); } .tx-r { cursor: pointer; transition: flex-grow .65s cubic-bezier(.2, .7, .2, 1); } .tx-r:focus-visible { outline: 3px solid var(--lm); outline-offset: -3px; } .tx-r-ph img { scale: 1.12; translate: 0 0; transition: scale 1s cubic-bezier(.2, .7, .2, 1); } .tx-r.is-open .tx-r-ph img { scale: 1; } .tx-r:not(.is-open):hover .tx-r-ph img { scale: 1.17; } .tx-r-trio { scale: .84; transition: scale .8s cubic-bezier(.2, .7, .2, 1); } .tx-r.is-open .tx-r-trio { scale: 1; } .tx-r-trio img, .tx-r:not(.is-open):hover .tx-r-trio img { scale: 1 !important; } .tx-r-go { pointer-events: none; color: var(--nv) !important; text-decoration: none; padding: 9px 15px 8px; font-size: 13px; } .tx-r.is-open .tx-r-go { pointer-events: auto; } .tx-r-go:hover { background: #fff; } .tx-rs.is-pre .tx-r { opacity: 0; translate: 0 26px; } .tx-rs.is-rev .tx-r { transition: opacity .6s ease calc(var(--i) * 70ms), translate .75s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 70ms), flex-grow .65s; } /* --- Video and closing bands: clean, without gradients or green grounds --- */ .tx-fa-v::after { display: none; } .tx-fa, .tx-cta { background: var(--mi); } /* --- Standard banner size --- */ .cb { min-height: var(--bn); } /* --- Product pages: transparent ball with a shadow drawn by the page --- */ .tx-pp-h { position: relative; display: flex; align-items: center; min-height: var(--bn); overflow: hidden; background: radial-gradient(ellipse 60% 90% at 74% 55%, #234691 0, #14295F 58%, #0D1E4B 100%); } .tx-pp-bg { position: absolute; inset: 0; } .tx-pp-bg img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .tx-pp-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 30, 75, .95) 0, rgba(13, 30, 75, .86) 52%, rgba(13, 30, 75, .62) 100%); } .tx-pp-h .tx-pp-w { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gut); } .tx-pp-h .tx-pp-t { min-width: 0; padding: 0; } .tx-pp-h h1 { color: #fff !important; font-size: clamp(42px, 5vw, 76px) !important; } .tx-pp-h h1 span { color: var(--lm); } .tx-pp-h .tx-crumb, .tx-pp-h .tx-crumb a { color: #E6ECF8 !important; } .tx-pp-ball { position: relative; justify-self: center; display: flex; align-items: center; justify-content: center; height: calc(var(--bn) - 76px); aspect-ratio: 1; } .tx-pp-ball::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(3, 8, 26, .78) 0, rgba(3, 8, 26, .36) 48%, rgba(3, 8, 26, 0) 72%); filter: blur(4px); } .tx-pp-img { position: relative; z-index: 1; display: block; width: 100% !important; height: 100% !important; object-fit: contain; } .tx-pp-img.is-raw { clip-path: circle(48%); } .tx-pp-b.is-cols { padding-top: 36px; } .tx-pp-fg { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(24px, 4vw, 64px); align-items: center; background: var(--mi); padding: clamp(40px, 7vh, 72px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .tx-pp-fg > * { min-width: 0; } .tx-pp-fg h2 { font-size: clamp(34px, 3.2vw, 48px) !important; margin-bottom: 8px; } .tx-pp-fg p { margin: 0 0 12px; font: 400 18px/1.45 var(--sn); color: var(--tx); } .tx-pp-fg-f { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 1vw, 14px); } .tx-pp-fg-f figure { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; } .tx-pp-fg-f img { display: block; width: 100% !important; height: auto !important; } .tx-pp-fg-f figure.is-g { flex-grow: 1.45; } .tx-pp-fg-f figcaption { display: inline-block; margin-top: 8px; padding: 3px 7px 1px; font: 400 clamp(17px, 1.5vw, 22px)/1 var(--dp); letter-spacing: .3px; color: var(--nv); } .tx-pp-fg-f figure.is-g figcaption { background: var(--lm); transform: rotate(-2deg) skewX(-6deg); } /* --- GEL-STRIKE hero --- */ /* --- OEM --- */ /* --- Manufacturing --- */ /* --- About --- */ /* --- Contact details --- */ .tx-tm ul { margin: 0; padding: 0; list-style: none; } .tx-tm li { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; padding: 3px 0; } .tx-tm li svg { flex: none; width: 15px; height: 15px; color: var(--lm); } .tx-tm li small { padding: 2px 6px 1px; border: 1px solid rgba(199, 239, 34, .65); font: 600 11px/1.2 var(--sn); letter-spacing: .5px; text-transform: uppercase; color: var(--lm); } .tx-tm-em { margin-top: 7px !important; padding-top: 7px !important; border-top: 1px solid #2B4488; } .tc .tx-tm h3 { font-size: clamp(27px, 2.6vw, 38px) !important; } .tc .tx-tm li svg { width: 17px; height: 17px; } .tc .tx-tm-em a { font-size: clamp(16px, 1.3vw, 18px); font-weight: 400; } .tc .tx-tm-p small { margin: 0; } .tc-o { grid-template-columns: repeat(3, auto); } .tc-o h3 { font-size: 24px !important; } .tc-o p { font: 500 clamp(18px, 1.5vw, 21px)/1.4 var(--sn); color: #fff; } .tc-g { display: inline-block; margin-top: 8px; font-size: 16px; box-shadow: inset 0 -2px 0 var(--lm); } .tx-map { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; } .tx-mapcol, .tx-mapcol > .e-con-inner { padding: 0 !important; } .tx-mapcol .elementor-widget-shortcode, .tx-mapcol .elementor-widget-container, .tx-mapcol .elementor-shortcode { height: 100%; width: 100%; } /* --- Forms --- */ .tx-formcard { border-top: 4px solid var(--nv); } .elementor-form .elementor-field-group { margin-bottom: 16px; } .elementor-form .elementor-field-label { font: 600 15px/1.25 var(--sn) !important; font-style: normal !important; letter-spacing: 0; text-transform: none; color: var(--nv) !important; margin-bottom: 6px; } .elementor-form .elementor-field-textual, .elementor-form select.elementor-field { min-height: 50px; padding: 11px 14px !important; background: #fff !important; border: 1px solid #BFCADC !important; border-radius: 0 !important; font: 400 17px/1.35 var(--sn) !important; color: var(--nv) !important; transition: border-color .2s, box-shadow .2s; } .elementor-form .elementor-field-textual:focus, .elementor-form select.elementor-field:focus { outline: 0; border-color: var(--nv) !important; box-shadow: 0 0 0 3px rgba(199, 239, 34, .7); } .elementor-form .elementor-field-textual::placeholder { color: #70809E; } .elementor-form .elementor-field-textual.is-bad { border-color: #B3261E !important; } .elementor-form .elementor-field-type-acceptance .elementor-field-subgroup label, .elementor-form .elementor-field-option label { font: 400 16px/1.4 var(--sn) !important; font-style: normal !important; color: #33415C !important; } .elementor-form .elementor-field-option { display: flex; align-items: center; gap: 9px; } .elementor-form .elementor-field-option input { width: 19px; height: 19px; margin: 0; flex: none; accent-color: var(--nv); } .elementor-form .elementor-field-option a { color: var(--nv) !important; font-weight: 600; text-decoration: underline; } .elementor-form .elementor-button[type="submit"] { min-height: 58px; border: 0 !important; border-radius: 0 !important; background: var(--nv) !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: background .25s; } .elementor-form .elementor-button[type="submit"] .elementor-button-text { font: 400 25px/1 var(--dp) !important; letter-spacing: .8px; text-transform: uppercase; color: var(--lm) !important; } .elementor-form .elementor-button[type="submit"]:hover { background: #234691 !important; } .tq-err { display: block; margin-top: 5px; font: 600 14px/1.3 var(--sn); color: #B3261E; } .tq-err[hidden] { display: none; } /* --- Footer --- */ .tx-fv p { margin: 0 0 10px; font: 400 15px/1.5 var(--sn); color: #CBD6EC; } .tx-fv strong { color: #fff; } .tx-fv a { color: #fff !important; text-decoration: none; } .tx-fv a:hover { color: var(--lm) !important; } .tx-fs { display: flex; gap: 8px; margin-top: 4px; } .tx-fs a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #234691; color: #fff !important; transition: background .2s, color .2s; } .tx-fs a:hover { background: var(--lm); color: var(--nv) !important; } .tx-fs svg { width: 17px; height: 17px; } .tx-legal, .tx-legal p { font: 400 15px/1.5 var(--sn) !important; color: #E6ECF8 !important; } .tx-legal a { color: #fff !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lm); text-underline-offset: 3px; } .tx-legal a:hover { color: var(--lm) !important; } /* --- Quote goal --- */ .turf-quote-btn .elementor-button.is-goal { opacity: 0; } .tq-goal { position: fixed; z-index: 9997; pointer-events: none; overflow: hidden; box-shadow: 0 12px 28px rgba(13, 30, 75, .35); } .tq-goal svg { display: block; width: 100%; height: 100%; opacity: 0; } .tq-turf { fill: #3E8E2E; } .tq-post { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .tq-net { transform-box: fill-box; transform-origin: 50% 0; } .tq-net path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; } .tq-ball { position: fixed !important; z-index: 9998; margin: 0 !important; max-width: none !important; object-fit: contain; pointer-events: none; will-change: transform; } .tq-ball.is-raw { clip-path: circle(48%); } .tq-ball.is-ghost { z-index: 9996; } @media (max-width: 1024px) { .tx-rs { height: 680px; flex: none; } .tx-r { transition: flex-grow .55s cubic-bezier(.2, .7, .2, 1); } .tx-r-go { display: block; left: 16px; bottom: 12px; } .tx-r.is-open .tx-r-name { bottom: 52px; } .tx-r .tx-r-txt, .tx-r.is-open .tx-r-txt { right: 16px; left: auto; bottom: 14px; max-width: 58%; text-align: right; } .tx-pp-h .tx-pp-w { grid-template-columns: 1.1fr 1fr; } .tc-o { grid-template-columns: 1fr 1fr; } .tx-mapcol { width: 100%; } .tx-map { min-height: 380px; } } @media (max-width: 760px) { .tx-pp-fg { grid-template-columns: 1fr; } } @media (max-width: 640px) { :root { --bn: 320px; } .tx-rs { height: 640px; } .tx-r .tx-r-txt, .tx-r.is-open .tx-r-txt { display: none; } .tx-r.is-open .tx-r-name { bottom: 50px; } .tx-pp-h .tx-pp-w { grid-template-columns: 1fr; gap: 8px; padding: 20px var(--gut) 26px; } .tx-pp-ball { height: 58vw; order: -1; } .tc-o { grid-template-columns: 1fr; } /* Keeps the footer's last line clear of the social icons */ [data-elementor-type="footer"] { padding-bottom: 54px; } } @media (max-width: 640px) { .tx-loc { letter-spacing: 1.5px; font-size: 13px; } } /* ==================== Round 6 ==================== */ /* --- Homepage section under the hero: the football melts into one blue gradient --- */ .tx-ab { background: linear-gradient(180deg, #14295F 0, #1B3678 55%, #14295F 100%); } /* Buttons share one size */ .tx-go i { width: 42px; } .tx-go.is-line { background: transparent; border-color: var(--nv); } .tx-go.is-line span { color: var(--nv); } .tx-go.is-line:hover { background: var(--nv); border-color: var(--nv); } .tx-go.is-line:hover span { color: #fff; } /* --- The Difference: a green band behind a slightly smaller ball --- */ /* --- Product range: lighter ground, cards that show they open --- */ .tx-range { background: var(--mi); } .tx-range .tx-head h2 { color: var(--nv) !important; } .tx-r:not(.is-open):hover, .tx-r.is-hint { flex-grow: 1.7; } /* --- Expertise at every stage: green content panel beside the video --- */ .tx-fa { background: var(--lm); } /* --- GEL-STRIKE --- */ .tx-anw.is-hero .tx-an { background: #fff; border-bottom: 1px solid var(--ln); } .tx-anw.is-hero .tx-an-h h2 { color: var(--nv) !important; } .tx-anw.is-hero .tx-layer img { filter: brightness(.95) drop-shadow(0 8px 12px rgba(13, 30, 75, .2)); } .tx-anw.is-hero .tx-lab { color: var(--nv); } .tx-anw.is-hero .tx-lab::before { border-left-color: #9AA8C0; } .tx-anw.is-hero .tx-lab i { -webkit-text-stroke-color: var(--nv); } .tx-anw.is-hero .tx-lab b { color: var(--nv); border-top-color: var(--ln); } .tx-anw.is-hero .tx-lab small { color: var(--tx); } .tx-anw.is-hero .is-gel .tx-lab i { color: var(--nv); -webkit-text-stroke: 0; } .tx-anw.is-hero .is-gel .tx-lab b { color: var(--nv); border-top: 3px solid var(--lm); } .tx-anw.is-hero .is-gel .tx-lab small { color: var(--nv); font-weight: 600; } .tx-anw.is-hero .is-gel .tx-lab::before { border-left-color: var(--lm); } /* --- OEM: calmer scale and more air --- */ /* --- Manufacturing --- */ /* --- About --- */ /* --- Footer --- */ .tx-legal strong a { font-weight: 700; } /* --- Inner page reveals --- */ .tx-rv { opacity: 0; translate: 0 18px; transition: opacity .6s ease var(--rv, 0ms), translate .7s cubic-bezier(.2, .7, .2, 1) var(--rv, 0ms); } .tx-rv.is-in { opacity: 1; translate: 0 0; } /* --- Search --- */ .sr-b { display: flex; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--nv) !important; cursor: pointer; transition: background .2s; } .sr-b:hover { background: var(--mi) !important; } .sr { position: fixed; inset: 0; z-index: 9990; background: rgba(13, 30, 75, .45); } .sr[hidden] { display: none; } .sr-p { background: #fff; padding: clamp(16px, 3vh, 28px) max(var(--gut), calc((100vw - 960px) / 2)); box-shadow: 0 18px 44px rgba(13, 30, 75, .28); max-height: 86svh; overflow-y: auto; } .sr-p form { display: flex; gap: 8px; align-items: stretch; } .sr-p input[type=search] { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px !important; border: 2px solid var(--nv) !important; border-radius: 0 !important; font: 500 18px/1.2 var(--sn); color: var(--nv); outline: 0; } .sr-p button[type=submit] { padding: 0 22px !important; background: var(--lm) !important; color: var(--nv) !important; border: 0 !important; border-radius: 0 !important; font: 700 13px/1 var(--sn); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .sr-x { position: relative; width: 52px !important; min-width: 52px !important; padding: 0 !important; background: none !important; border: 0 !important; cursor: pointer; } .sr-x i::before, .sr-x i::after { content: ''; position: absolute; left: 15px; top: 25px; width: 22px; height: 2px; background: var(--nv); transform: rotate(45deg); } .sr-x i::after { transform: rotate(-45deg); } .sr-r h3 { margin: 16px 0 6px; font: 400 22px/1 var(--dp) !important; color: var(--nv); } .sr-i { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-top: 1px solid var(--ln); text-decoration: none; } .sr-i:hover, .sr-g2:hover { background: var(--mi); } .sr-i img { flex: none; width: 56px !important; height: 56px !important; object-fit: contain; } .sr-i span { min-width: 0; } .sr-i em { display: block; font: italic 600 14px/1.2 var(--sn); color: var(--st); } .sr-i b { display: block; font: 600 16px/1.25 var(--sn); color: var(--nv); } .sr-i small { font: 400 13px/1.3 var(--sn); color: #5D6B86; } .sr-g2 { display: block; padding: 10px 8px; border-top: 1px solid var(--ln); font: 600 16px/1.25 var(--sn); color: var(--nv) !important; text-decoration: none; } .sr-n { margin: 14px 0 0; font: 400 17px/1.45 var(--sn); color: var(--tx); } .sr-n a { color: var(--nv); font-weight: 600; } .sr-w { max-width: var(--wrap); margin: 0 auto; padding: clamp(32px, 6vh, 56px) var(--gut) clamp(52px, 8vh, 84px); } .sr-w h2 { font-size: clamp(28px, 2.6vw, 38px) !important; margin: 0 0 12px; } .sr-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; margin-bottom: 36px; } .sr-l { list-style: none; margin: 0; padding: 0; } .sr-l a { display: block; padding: 10px 2px; border-top: 1px solid var(--ln); font: 600 17px/1.3 var(--sn); color: var(--nv) !important; text-decoration: none; } /* --- 404 --- */ .e4 { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(20px, 4vw, 64px); min-height: calc(82svh - var(--hh)); max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 7vh, 72px) var(--gut); } .e4 > * { min-width: 0; } .e4 h1 { font-size: clamp(46px, 6vw, 88px) !important; margin: 14px 0 10px; } .e4-l { margin: 0 0 24px; max-width: 520px; font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--sn); color: var(--tx); } .e4-b { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .e4-m img { display: block; width: min(420px, 100%) !important; height: auto !important; margin: 0 auto; filter: drop-shadow(0 26px 22px rgba(13, 30, 75, .28)); } .e4 .tx-go { background: var(--nv); border-color: var(--nv); } @media (max-width: 1024px) { .tx-r:not(.is-open):hover, .tx-r.is-hint { flex-grow: 1.35; } } @media (max-width: 760px) { .e4 { grid-template-columns: 1fr; } .e4-m { order: -1; } .e4-m img { width: 52vw !important; } } @media (max-width: 640px) { .sr-p button[type=submit] { display: none; } .sr-b { width: 34px !important; min-width: 34px !important; } .sr-g { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .tx-rv { opacity: 1; translate: 0 0; transition: none; } } .tq-line { fill: none; stroke: #fff; stroke-width: 2; } /* Anchor links land directly under the header */ html { scroll-padding-top: var(--hh); } /* ==================== Round 7 ==================== */ .tx-go span { padding: 14px 20px; font: 700 13px/1.2 var(--sn); letter-spacing: 1px; text-transform: uppercase; color: #fff; transition: color .25s; } .tx-go.is-line span { color: var(--nv); } .tx-go.is-line:hover span { color: #fff; } /* --- Homepage About: green ground, clear hierarchy --- */ .ab3 { display: block; min-height: 0; background: var(--lm); overflow: visible; } .ab3-g { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 6vw, 96px); align-items: center; max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 11vh, 116px) var(--gut); } .ab3-g > * { min-width: 0; } .ab3-e { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 13px/1 var(--sn); letter-spacing: 3px; text-transform: uppercase; color: var(--nv); } .ab3 h2 { margin: 0; color: var(--nv) !important; font-size: clamp(44px, 5.4vw, 84px) !important; line-height: .98 !important; } .ab3-b p { margin: 0 0 22px; font: 400 clamp(17px, 1.3vw, 19px)/1.5 var(--sn); color: var(--nv); } .ab3-b .ab3-l { margin-bottom: 14px; font: 500 clamp(20px, 1.75vw, 26px)/1.36 var(--sn); } /* --- GEL-STRIKE: banner flows into the white technology section; three balls --- */ .gh2 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px)); } .gh2 h1 { margin-bottom: 8px; } .tx-anw.is-hero .tx-an { border-bottom: 0; padding-top: 10px; } .tx-an-view { position: relative; will-change: transform; } .tx-sb { position: absolute; left: 50%; top: var(--sy, 50%); z-index: 0; width: var(--sb, 300px); pointer-events: none; opacity: calc(1 - var(--q, 0) * 1.5); transform: translate(calc(-50% + var(--dir) * var(--sx, 300px) * (1 + var(--q, 0) * .9)), -50%) scale(calc(1 - var(--q, 0) * .18)); filter: drop-shadow(0 14px 14px rgba(13, 30, 75, .26)); } .tx-sb.is-l { --dir: -1; } .tx-sb.is-r { --dir: 1; } .tx-sb img { display: block; width: 100% !important; height: auto !important; } /* --- Inner page banners: one size, one heading scale, text centred on the height --- */ /* --- OEM --- */ /* --- Manufacturing: colour-blocked steps --- */ /* Seven ways */ /* --- About: editorial split headings --- */ /* --- Contact --- */ .tc { padding-top: clamp(40px, 7vh, 72px); } /* --- Footer: compact, team beside the visit details --- */ .turf-footer .tx-tm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(14px, 2vw, 28px); } .turf-footer .tx-tm h3 { margin: 0 0 4px; font: 400 18px/1.1 var(--dp) !important; color: var(--lm) !important; } .turf-footer .tx-tm li { padding: 1px 0; } .turf-footer .tx-tm a { font: 400 14px/1.4 var(--sn); } .turf-footer .tx-tm-em { margin-top: 3px !important; padding-top: 0 !important; border-top: 0; } .tx-fv p { margin: 0 0 7px; font-size: 14px; line-height: 1.45; } .tx-fs { margin-top: 2px; } .tx-fs a { width: 32px; height: 32px; } /* --- Quote list --- */ .turf-quote-list { gap: 0; border-top: 3px solid var(--nv); } .tq-n { margin: 0; padding: 14px 0 12px; font: 400 clamp(26px, 2.3vw, 34px)/1 var(--dp); letter-spacing: .4px; color: var(--nv); } .tq { grid-template-columns: 112px 1fr auto auto; gap: 8px 18px; padding: 18px 0; background: none; border: 0; border-top: 1px solid var(--ln); } .tq-i { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; background: var(--mi); grid-row: 1 / span 2; align-self: start; } .tq-i img { width: 92px !important; height: 92px !important; object-fit: contain; } .tq-m a { font-size: 18px; } .tq-t { grid-column: 2 / -1; margin-top: 0; } .tq-t textarea { background: #fff; min-height: 58px; } .tq-t textarea:focus { outline: 0; border-color: var(--nv); box-shadow: 0 0 0 3px rgba(199, 239, 34, .7); } .turf-quote-empty { padding: 32px 22px; border: 0 !important; background: var(--mi); text-align: center; font: 400 17px/1.45 var(--sn); color: var(--tx); } #quote { border-top: 4px solid var(--nv); } @media (min-width: 1025px) and (min-height: 880px) { #quote { position: sticky; top: calc(var(--hh) + 16px); } } /* --- Quote animation layers --- */ .tq-front { position: fixed; z-index: 9999; pointer-events: none; } .tq-front svg { display: block; width: 100%; height: 100%; } .tq-tape { fill: none; stroke: #fff; stroke-width: 3; } /* --- Search results: name, code and the whole ball --- */ .sr-i img { object-fit: contain !important; } @media (max-width: 1024px) { .ab3-g { grid-template-columns: 1fr; gap: 20px; } .gh2 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); } .turf-footer .tx-tm { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .turf-footer .tx-tm { grid-template-columns: 1fr; } .tq { grid-template-columns: 76px 1fr; } .tq-i { width: 76px; height: 76px; grid-row: auto; } .tq-i img { width: 64px !important; height: 64px !important; } .tq-t { grid-column: 1 / -1; } } @media (max-width: 640px) { } /* ==================== Round 8 ==================== */ /* --- Header --- */ .elementor-nav-menu--main .elementor-item { font-size: 15px !important; letter-spacing: .6px !important; padding-inline: 10px !important; } .elementor-nav-menu--main .sub-menu { min-width: 230px !important; border: 0 !important; border-top: 3px solid var(--lm) !important; box-shadow: 0 14px 30px rgba(13, 30, 75, .16); } .elementor-nav-menu--main .sub-menu a { font-size: 14px !important; letter-spacing: .4px !important; padding: 12px 18px !important; color: var(--nv) !important; background: #fff !important; } .elementor-nav-menu--main .sub-menu a:hover { background: var(--mi) !important; } @media (max-width: 1240px) { .elementor-nav-menu--main .elementor-item { font-size: 14px !important; padding-inline: 7px !important; letter-spacing: .3px !important; } } .elementor-nav-menu--dropdown a { font-size: 15px !important; } /* --- Search opens as a panel directly under the header, aligned to the page --- */ .sr { top: var(--hh); background: rgba(13, 30, 75, .35); } .sr-p { padding: 16px max(var(--gut), calc((100vw - var(--wrap)) / 2)) 18px; max-height: calc(100svh - var(--hh)); } .sr-p form { max-width: 820px; margin: 0 auto; } .sr-r { max-width: 820px; margin: 0 auto; } /* --- Shared two-line headings --- */ .elementor-heading-title .tx-rib, .tx-gs-t h2 .tx-rib, .tx-range h2 .tx-rib, .tx-an-h h2 .tx-rib, .ox-s h2 .tx-rib, .ox-t h2 .tx-rib { font: inherit !important; padding: .05em .22em 0; margin-top: .1em; line-height: 1.06; } .ab3-e { display: block; } .tx-gs-t h2 { font: 400 clamp(46px, 5vw, 76px)/1.02 var(--dp) !important; color: var(--nv) !important; margin: 0; } /* --- Homepage spacing --- */ .tx-gs-w { padding-bottom: 0; } .tx-gs { min-height: clamp(460px, 68vh, 640px); } .tx-gs-b { margin: 18px 0; } .tx-an { padding: 20px 0 12px; gap: 14px; justify-content: flex-start; min-height: 0; } .tx-an-h { height: auto; } .tx-an-h h2 { font-size: clamp(38px, 4.2vw, 62px) !important; line-height: 1.04 !important; } .tx-anw.is-hero .tx-an { padding-top: 14px; } .tx-an-stage { margin-bottom: 142px; } .tx-range { padding-top: clamp(40px, 6vh, 60px); } .tx-range .tx-head { align-items: flex-end; } .tx-faq-q details, .tx-faq-q details:last-child { border: 0; } .tx-faq-q summary { padding: 12px 44px 12px 0; text-decoration: none; } .tx-faq-q details p { margin-top: 2px; } /* --- Angled banner, the standard for inner pages --- */ .e-con.cb { display: grid; grid-template-columns: 1fr 1.15fr; min-height: var(--bn); background: var(--nv); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px)); } .cb { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px)); } .tx-pp-h { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 34px)); } .e-con.cb > .e-con { width: auto; min-width: 0; } .e-con.cb-t { align-self: center; padding: 24px clamp(24px, 4vw, 64px) 44px max(var(--gut), calc((100vw - var(--wrap)) / 2)) !important; } .cb-t .elementor-heading-title, .cb-t .cb-l { color: #fff; } .cb-t h1.elementor-heading-title { font-size: clamp(40px, 4.6vw, 68px) !important; line-height: 1.02 !important; margin: 10px 0 8px; } .cb-l p { margin: 0 0 16px; max-width: 520px; font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--sn); color: #E6ECF8; } .eb { width: auto; } .eb .elementor-heading-title { display: inline-block; padding: 4px 13px; background: var(--lm); color: var(--nv) !important; font: italic 600 16px/1.2 var(--sn) !important; letter-spacing: 0; text-transform: none; transform: rotate(-2deg) skewX(-6deg); } .cb-crumb, .cb-crumb a, .cb-crumb span { color: #CBD6EC !important; font-size: 14px; } .cb-crumb { margin-bottom: 10px; } .cb-crumb p { margin: 0; } .e-con.cb-m { position: relative; clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%); } .cb-m .elementor-widget-image { position: absolute; inset: 0; } .cb-m .elementor-widget-image img, .cb-m > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } /* --- Blocks shared by native sections --- */ .cv { position: relative; } .cv .elementor-widget-image { position: absolute; inset: 0; } .cv img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .ph43 img { display: block; width: 100% !important; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; } .ph43.is-ball img { object-fit: contain; background: #fff; } .rv { min-width: 0; } .tx-rv { opacity: 0; translate: 0 16px; transition: opacity .55s ease var(--rv, 0ms), translate .65s cubic-bezier(.2, .7, .2, 1) var(--rv, 0ms); } .tx-rv.is-in { opacity: 1; translate: 0 0; } .tx-fa-v.is-p { width: 100%; } .tx-fa-v.is-p::after { display: none; } /* Big green headings on About */ .bh .elementor-heading-title { font-size: clamp(54px, 7vw, 104px) !important; line-height: .98 !important; } .bh small { font: 400 clamp(26px, 3vw, 44px)/1.1 var(--dp); letter-spacing: .5px; color: var(--nv); } .bh .tx-rib { padding: .05em .2em 0 !important; } .ov-p p { margin: 0; } .ce-a4 { aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid #C5CFDF; box-shadow: 0 8px 22px rgba(13, 30, 75, .08); padding: 14px !important; } .ce-a4 .elementor-icon { font-size: 30px; color: #70809E; } .ce-a4 p { margin: 0; text-align: center; font-size: 14px; color: #5D6B86; } .ol.st, .st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; } .st li { font: 400 16px/1.4 var(--sn); color: var(--tx); } .st li span { display: block; font: 400 clamp(28px, 2.6vw, 38px)/1 var(--dp); color: var(--st); } .st li strong { display: block; margin: 2px 0 2px; font: 600 18px/1.25 var(--sn); color: var(--nv); } .e-con.sy3 { display: block; position: relative; aspect-ratio: 1 / .94; } .sy3 > .elementor-widget { position: absolute; } .sy3 .a { left: 0; top: 0; width: 78%; } .sy3 .b { right: 0; bottom: 0; width: 62%; } .sy3 .c { left: 4%; bottom: 3%; width: 30%; filter: drop-shadow(0 12px 10px rgba(13, 30, 75, .32)); } .sy3 .a img, .sy3 .b img { display: block; width: 100% !important; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; } .sy3 .b img { box-shadow: -10px -10px 0 var(--mi); } .sy3 .c img { display: block; width: 100% !important; height: auto !important; } /* OEM routes */ .rt.is-a { background: var(--mi); } .rt.is-b { background: var(--nv); } .rt.is-b .rt-ic .elementor-icon { background: #fff; } .rt-t .elementor-heading-title { font: 400 clamp(28px, 2.6vw, 38px)/1.04 var(--dp) !important; letter-spacing: .4px; } .rt-p p { margin: 0; } .ox-s, .ox-t { padding-top: clamp(48px, 8vh, 80px); padding-bottom: clamp(48px, 8vh, 80px); } /* Manufacturing */ .fl .elementor-icon-list-item { padding: 6px 0; font: 400 17px/1.4 var(--sn); color: var(--tx); align-items: flex-start !important; } .fl .elementor-icon-list-icon { color: var(--nv); margin-top: 4px; } .fl .elementor-icon-list-icon i, .fl .elementor-icon-list-icon svg { font-size: 15px; width: 15px; color: var(--nv); fill: var(--nv); } /* Closing sections, each its own shape and none like the footer */ .ct { min-height: clamp(300px, 40vh, 420px); } .ct .ct-p { align-self: center; padding: clamp(36px, 6vh, 60px) clamp(24px, 5vw, 76px) !important; } .ct-c { border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); } .tx-cta { background: #fff; } .ct .elementor-widget-text-editor p { margin: 0 0 6px; } /* FAQ */ .faq-b { border-top: 1px solid var(--ln); } .tx-acc .elementor-accordion-item { border: 0 !important; border-bottom: 1px solid var(--ln) !important; } .tx-acc .elementor-tab-title { padding: 15px 0 !important; border: 0 !important; } .tx-acc .elementor-accordion-title { font: 600 19px/1.3 var(--sn) !important; color: var(--nv) !important; text-decoration: none !important; } .tx-acc .elementor-accordion-icon { color: var(--lm) !important; } .tx-acc .elementor-accordion-icon i, .tx-acc .elementor-accordion-icon svg { color: var(--nv); fill: var(--nv); font-size: 15px; } .tx-acc .elementor-tab-content { padding: 0 0 16px !important; border: 0 !important; font: 400 17px/1.5 var(--sn); color: var(--tx); } .tx-acc .elementor-tab-content p { margin: 0; } .tx-acc a { color: var(--nv) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--lm); text-decoration: none; } /* --- GEL-STRIKE page --- */ .tx-sb { opacity: calc(1 - var(--q, 0) * 1.3); transform: translate(calc(-50% + var(--dir) * var(--sx, 300px) * (1 + var(--q, 0) * .8)), -50%); } /* --- Contact details --- */ .tc, .tc p, .tc li, .tc a { color: #fff !important; } .tc small { color: var(--lm) !important; } .tc .tx-tm li svg { color: var(--lm); } /* --- Footer --- */ .turf-footer .tx-tm h3 { margin-bottom: 8px; font-size: 20px !important; } .turf-footer .tx-tm li { padding: 2px 0; } .turf-footer .tx-tm a { font-size: 15px; } .turf-footer .tx-tm-em { margin-top: 6px !important; } .tx-fv p { margin-bottom: 12px; font-size: 15px; line-height: 1.55; } .tx-fs { margin-top: 6px; gap: 10px; } .tx-fs a { width: 38px; height: 38px; } .turf-footer .e-con:first-child > .e-con:first-child img { max-height: none; } @media (max-width: 1024px) { .e-con.cb { grid-template-columns: 1fr; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); } .e-con.cb-t { padding: 24px var(--gut) 26px !important; } .e-con.cb-m { min-height: 42vw; clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%); } .cb, .tx-pp-h { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); } .e-con.sy3 { width: 100%; max-width: 620px; margin: 0 auto; } } @media (max-width: 760px) { /* Conventional and GEL-STRIKE stay side by side */ .vs-g { grid-template-columns: 1fr 1fr; gap: 4px; } .vs-p { padding: 18px 10px; } .vs-p.is-r { grid-row: auto; } .vs-x { position: absolute; left: 50%; top: 56px; margin: 0 0 0 -22px; width: 44px; height: 44px; font-size: 20px; grid-row: auto; } .vs-p h3 { font-size: 24px !important; min-height: 50px; } .vs-f { flex-wrap: wrap; min-height: 0; } .vs-f figure { flex: 0 0 30%; } .vs-f img { height: 50px !important; } .vs-f figcaption { font-size: 10px; } .vs-p dt { font-size: 18px; } .vs-p dd { font-size: 14px; } .st { grid-template-columns: 1fr; } } @media (max-width: 640px) { .bh .elementor-heading-title { font-size: clamp(50px, 15vw, 66px) !important; } .tx-an-stage { margin-bottom: 138px; } .sr-p form { gap: 4px; } } @media (max-width: 1120px) { .elementor-nav-menu--main .elementor-item { font-size: 13px !important; padding-inline: 5px !important; letter-spacing: .2px !important; } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Footer button and team details */ .turf-footer .tx-tm { grid-template-columns: repeat(3, auto); justify-content: space-between; } .turf-footer .tx-tm a { font-size: 14px; overflow-wrap: normal; white-space: nowrap; } @media (max-width: 1320px) and (min-width: 761px) { .turf-footer .tx-tm { grid-template-columns: repeat(2, auto); justify-content: start; gap: 18px 36px; } } @media (max-width: 760px) { .turf-footer .tx-tm { grid-template-columns: 1fr; } } /* ==================== Round 9 ==================== */ /* --- Two-line headings sit tightly together --- */ .tx-gs-t h2, .tx-range .tx-head h2, .tx-an-h h2, .ox-s h2, .ox-t h2, .elementor-heading-title { line-height: 1 !important; } .elementor-heading-title .tx-rib, .tx-gs-t h2 .tx-rib, .tx-range h2 .tx-rib, .tx-an-h h2 .tx-rib, .ox-s h2 .tx-rib, .ox-t h2 .tx-rib { margin-top: .02em; line-height: 1 !important; padding: .06em .22em .02em; } .nw { white-space: nowrap; } /* --- Homepage --- */ .ab3-b p { line-height: 1.55; } .tx-anw:not(.is-hero) .tx-an { justify-content: center; min-height: calc(100svh - var(--hh)); padding: clamp(40px, 7vh, 72px) 0 clamp(28px, 4vh, 44px); gap: clamp(22px, 4vh, 40px); } /* --- Footer button --- */ .turf-footer .elementor-widget-button .elementor-button { background: var(--lm) !important; border: 0 !important; color: var(--nv) !important; } .turf-footer .elementor-widget-button .elementor-button * { color: var(--nv) !important; } .turf-footer .elementor-widget-button .elementor-button:hover { background: #fff !important; } /* --- GEL-STRIKE --- */ .tx-anw.is-hero .tx-an { padding: clamp(52px, 9vh, 92px) 0 clamp(36px, 6vh, 60px); gap: clamp(20px, 3.4vh, 34px); } .vs { padding-top: clamp(44px, 7vh, 72px); } .gr4 { background: #fff; padding: clamp(56px, 9vh, 92px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .gr4 > h2 { margin: 0 0 clamp(22px, 4vh, 38px); text-align: center; font-size: clamp(32px, 3.4vw, 50px) !important; } .gr4-g { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(14px, 2vw, 26px); } .gr4-c { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: clamp(22px, 3vw, 38px) clamp(16px, 2.4vw, 32px); background: var(--mi); text-align: center; } .gr4-i { display: flex; justify-content: center; align-items: center; width: 100%; min-height: clamp(170px, 18vw, 260px); margin-bottom: 14px; filter: drop-shadow(0 14px 12px rgba(13, 30, 75, .24)); } .gr4-i a { display: block; flex: 0 1 clamp(170px, 18vw, 260px); min-width: 0; transition: translate .4s cubic-bezier(.2, .7, .2, 1); } .gr4-i.is-many a { flex-basis: 30%; margin-inline: -2%; } .gr4-i a:hover { translate: 0 -7px; position: relative; z-index: 1; } .gr4-i img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: contain; } .gr4-c h3 { margin: 0 0 6px; font: 400 clamp(28px, 2.6vw, 38px)/1 var(--dp) !important; color: var(--nv); } .gr4-m { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 0 0 16px; } .gr4-m a { font: italic 600 15px/1.3 var(--sn); color: var(--st) !important; text-decoration: none; } .gr4-m a:hover { color: var(--nv) !important; } /* --- OEM --- */ .rt { padding: clamp(26px, 3vw, 40px) 0 clamp(26px, 3vw, 40px) !important; } .rt-ic { margin: 0 0 6px 24px; } .rt-ic .elementor-icon { width: 72px; height: 72px; font-size: 30px; background: var(--nv); color: var(--lm) !important; } .rt.is-b .rt-ic .elementor-icon { background: var(--lm); color: var(--nv) !important; } /* --- Manufacturing --- */ .spr { display: flex; flex-wrap: wrap; gap: 8px; } .ball-t { background: var(--mi); padding: 14px; } .ball-t img { display: block; width: 100% !important; aspect-ratio: 1; height: auto !important; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(13, 30, 75, .22)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .ball-t:hover img { transform: rotate(-6deg) scale(1.04); } .c4 p { margin: 0; } .q3 p { margin: 0; } .ct-m { background: var(--nv); } .ct-m .ct-p { align-self: center; } .ct-m .elementor-heading-title { color: #fff !important; } .ct-m p { color: #E6ECF8 !important; } .ct-m .cv { clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%); } /* --- About --- */ .bh .elementor-heading-title { font-size: clamp(46px, 5.6vw, 84px) !important; line-height: .96 !important; } .bh br { display: none; } .bh small, .bh .tx-rib { display: block !important; width: fit-content; } .bh small { line-height: 1.02; margin: 0; } .ct-a { background: var(--mi); } .ct-a .ct-p { position: relative; } .ct-a .ct-p { padding-left: clamp(84px, 8vw, 120px) !important; } /* --- Contact details on white --- */ .tc { background: #fff; } .tc, .tc p, .tc li, .tc a { color: var(--nv) !important; } .tc a:hover { color: var(--st) !important; } .tc .tx-tm h3 { color: var(--nv) !important; } .tc .tx-tm-c { border-top: 4px solid var(--nv); } .tc .tx-tm li svg { color: var(--st); } .tc small { color: var(--nv) !important; border-color: #9AA8C0 !important; } .tc .tx-tm-em { border-top-color: var(--ln); } .tc-o { border-top-color: var(--ln); } .tc-o h3 { color: var(--st) !important; } .tc-o p { color: var(--nv) !important; } .tc-g { box-shadow: inset 0 -2px 0 var(--lm); } /* --- Larger logos: the header keeps its height --- */ @media (max-width: 1240px) and (min-width: 1025px) { .elementor-nav-menu--main .elementor-item { font-size: 13px !important; padding-inline: 5px !important; } } @media (max-width: 1024px) { .gr4-g { grid-template-columns: 1fr; } .ct-m .cv { clip-path: none; } .ct-a .ct-p { padding-left: var(--gut) !important; } } @media (max-width: 640px) { .nw { white-space: normal; } .tx-an-sub { display: none; } .tx-anw:not(.is-hero) .tx-an { min-height: 0; padding-top: 36px; } .gr4-i.is-many { flex-wrap: wrap; } .gr4-i.is-many a { flex-basis: 46%; margin: 0; } } .rt-ic .elementor-icon-wrapper { display: block; line-height: 0; text-align: left; } .rt-ic .elementor-icon { display: inline-flex !important; align-items: center; justify-content: center; } .rt-ic .elementor-icon i, .rt-ic .elementor-icon svg { display: block; width: 32px !important; height: 32px !important; font-size: 30px; line-height: 32px; text-align: center; color: inherit; fill: currentColor; } .rt-ic .elementor-icon svg * { fill: currentColor; } .rt-ic .elementor-icon-wrapper { text-align: left !important; } .rt-ic.elementor-widget-icon { text-align: left; width: fit-content; } /* Video keeps its shape at every width */ .tx-fa-v.is-p { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9 !important; flex: none; } .e-con:has(> .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .tx-fa-v.is-p), .e-con:has(.tx-fa-v.is-p) { min-width: 0; } .elementor-widget-shortcode:has(.tx-fa-v.is-p) { width: 100%; } .tc-o h3 { color: var(--nv) !important; } .tc .tx-tm li svg { color: var(--nv); } @media (max-width: 1100px) and (min-width: 1025px) { .elementor-nav-menu--main .elementor-item { padding-inline: 3px !important; letter-spacing: 0 !important; } } /* ==================== Round 10 ==================== */ /* --- One container: closing sections match every other section --- */ .e-con.ct { width: calc(100% - 2 * max(var(--gut), 40px)); max-width: var(--wrap); margin: clamp(40px, 7vh, 72px) auto; min-height: clamp(360px, 46vh, 460px); } .e-con.ct-g { width: calc(100% - 2 * max(var(--gut), 40px)); max-width: var(--wrap); margin: clamp(40px, 7vh, 72px) auto; } .ct .ct-p { padding: clamp(40px, 6vh, 64px) clamp(26px, 4vw, 60px) !important; } .ct .elementor-widget-text-editor p { margin: 0; } .ct-a .ct-p { padding-left: clamp(84px, 8vw, 112px) !important; } .ct-a .ct-p { background: var(--mi); } .ct-q { background: var(--nv); } .ct-q .ct-p { align-self: center; } .ct-q .elementor-heading-title { color: #fff !important; } .qs { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; gap: 12px; } .qs li { counter-increment: q; position: relative; padding: 2px 0 2px 46px; font: 400 clamp(17px, 1.3vw, 19px)/1.4 var(--sn); color: #fff; } .qs li::before { content: counter(q); position: absolute; left: 0; top: -1px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--lm); color: var(--nv); font: 400 21px/1 var(--dp); } .ct-b { min-width: 0; } .nm p { margin: 0; max-width: 760px; } /* A slow, gentle drift: never a bounce */ @keyframes tx-drift { 0% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } 100% { transform: translateY(0) rotate(-4deg); } } .ball-o img, .sy3 .c img { animation: tx-drift 7s ease-in-out infinite; transform-origin: 50% 55%; } @media (prefers-reduced-motion: reduce) { .ball-o img, .sy3 .c img { animation: none; } } /* --- FAQ --- */ .faq-b .tx-acc .elementor-tab-title { padding: 19px 0 !important; } .tx-acc .elementor-tab-content { padding-bottom: 20px !important; max-width: 720px; } .tx-faq { padding-top: clamp(64px, 10vh, 100px); padding-bottom: clamp(64px, 10vh, 100px); } .tx-faq-q summary { padding: 16px 44px 16px 0; } /* --- Connected process flow, used on Manufacturing and OEM --- */ .e-con.flow, .flow { display: grid !important; gap: 0 !important; list-style: none; margin: 0; padding: 0; } .flow.is-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .flow.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow-s { position: relative; min-width: 0; padding-right: clamp(10px, 1.4vw, 20px); } .flow-s::before { content: ''; position: absolute; left: 50px; right: 0; top: 24px; height: 3px; background: linear-gradient(90deg, var(--nv), #7FA12A); } .flow-s::after { content: ''; position: absolute; right: 2px; top: 19.500px; width: 11px; height: 11px; border: solid #7FA12A; border-width: 3px 3px 0 0; transform: rotate(45deg); } .flow-s:last-child::before, .flow-s:last-child::after { display: none; } .flow-n, .flow-n .elementor-heading-title { display: flex !important; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--lm); color: var(--nv) !important; font: 400 28px/1 var(--dp) !important; font-style: normal !important; -webkit-text-stroke: 0; } .flow-n { margin-bottom: 12px; } .flow-n .elementor-heading-title { background: none; } .flow-s .ph43 img { aspect-ratio: 4 / 3; } .flow-t, .flow-t .elementor-heading-title { display: block; margin: 8px 0 3px; font: 400 clamp(20px, 1.55vw, 24px)/1.06 var(--dp) !important; letter-spacing: .3px; color: var(--nv) !important; } .flow-p, .flow-p p { margin: 0; font: 400 15px/1.42 var(--sn); color: var(--tx); } /* Product range cards */ .rg { background: var(--mi); padding: 14px 8px 12px !important; transition: background .25s; } .rg:hover { background: #E6ECF8; } .rg-i img { display: block; width: 100% !important; aspect-ratio: 1; height: auto !important; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(13, 30, 75, .22)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .rg:hover .rg-i img { transform: rotate(-6deg) scale(1.04); } .rg-t .elementor-heading-title, .rg-t a { font: 400 clamp(19px, 1.5vw, 23px)/1.05 var(--dp) !important; letter-spacing: .3px; color: var(--nv) !important; text-align: center; } /* Seven ways */ .c4 { border: 1px solid var(--ln); padding: 0 0 18px !important; } .c4 > .elementor-widget:not(.ball-t) { padding-inline: 18px; } .c4 .elementor-heading-title { font: 400 clamp(25px, 2vw, 30px)/1.04 var(--dp) !important; letter-spacing: .3px; } .ways > .e-con:first-child { padding-right: 12px !important; } .q4 .ph43 img { aspect-ratio: 16 / 11; } .q4 p { margin: 0; } .q4 .elementor-heading-title { font: 400 clamp(26px, 2.2vw, 32px)/1.04 var(--dp) !important; letter-spacing: .3px; } /* --- About heading scale --- */ .bh .elementor-heading-title { font-size: clamp(38px, 4.2vw, 58px) !important; line-height: 1 !important; } .bh small { font: 400 clamp(21px, 2.1vw, 29px)/1.04 var(--dp); } .mv4 { padding: clamp(32px, 5vh, 52px) clamp(24px, 3.6vw, 52px) !important; } .mv4.is-m { background: var(--mi); } .mv4.is-v { background: #F4FBD4; } .mv4 p { margin: 0; } .ov-p { max-width: 860px; } .ct-a .elementor-heading-title { margin-bottom: 2px; } /* --- Contact --- */ .tc .tx-tm { gap: clamp(24px, 3.4vw, 56px); } .tc { padding-bottom: clamp(48px, 8vh, 80px); } .of { padding: 14px 0 !important; border-top: 1px solid #C5CFDF; } .of p { margin: 0; font: 400 clamp(17px, 1.3vw, 19px)/1.5 var(--sn); color: var(--nv); } .of a { color: var(--nv) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--lm); text-decoration: none; } .of .elementor-heading-title { font: 400 clamp(23px, 1.9vw, 27px)/1.05 var(--dp) !important; letter-spacing: .3px; } .tx-map { min-height: 440px; } /* --- Right-edge stack: Quote List and Ask a Question join the social icons --- */ @media (max-width: 1199px) and (min-width: 1025px) { .flow.is-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px !important; } .flow.is-7 .flow-s:nth-child(4n)::before, .flow.is-7 .flow-s:nth-child(4n)::after { display: none; } } @media (max-width: 1024px) { .e-con.ct, .e-con.ct-g { width: calc(100% - 2 * var(--gut)); } .flow.is-7, .flow.is-4 { grid-template-columns: 1fr; row-gap: 0 !important; } .flow-s { padding: 0 0 26px 66px; } .flow-s::before { left: 24px; right: auto; top: 50px; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--nv), #7FA12A); } .flow-s::after { display: none; } .flow-s .flow-n { position: absolute; left: 0; top: 0; margin: 0; } .flow-s .flow-t { margin-top: 10px; } .flow-s .ph43 { max-width: 460px; } .ct-q { flex-direction: column !important; } .ct-q > .e-con { width: 100% !important; } .ct-q .ct-p:first-child { padding-bottom: 0 !important; } } @media (max-width: 640px) { .tx-soc-a, .tx-wa-b { width: 40px !important; min-width: 40px !important; height: 40px !important; } } /* Quote List button: navy on hover, never white */ .turf-quote-btn .elementor-button:hover, .turf-quote-btn .elementor-button:focus { background: var(--nv) !important; color: var(--lm) !important; } .turf-quote-btn .elementor-button:hover * { color: var(--lm) !important; } .turf-quote-btn .elementor-button:hover .turf-quote-count { background: var(--lm); color: var(--nv) !important; } .ct .ct-p { position: relative; overflow: visible; } .ct .ball-o { position: absolute !important; z-index: 2; left: -64px !important; top: 50% !important; width: 128px !important; max-width: 128px; translate: 0 -50%; margin: 0 !important; filter: drop-shadow(0 14px 12px rgba(13, 30, 75, .3)); } .ct .ball-o img { display: block; width: 100% !important; height: auto !important; } @media (max-width: 1024px) { .ct .ball-o { display: none !important; } } /* ==================== Round 11: width system and mobile ==================== */ /* Closing sections sit exactly on the page container: Elementor's own width rule is overridden here */ .e-con.ct, .e-con.ct-g { --width: 100%; width: calc(100% - 2 * max(var(--gut), 40px)) !important; max-width: var(--wrap) !important; margin-inline: auto !important; } .e-con.ct-b { max-width: var(--wrap) !important; margin-inline: auto !important; } @media (max-width: 1024px) { /* --- Mobile and tablet menu --- */ .elementor-nav-menu--dropdown.elementor-nav-menu__container { background: #fff !important; box-shadow: 0 18px 34px rgba(13, 30, 75, .18); border-top: 3px solid var(--lm); max-height: calc(100svh - var(--hh)) !important; overflow-y: auto !important; } .elementor-nav-menu--dropdown a.elementor-item { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 24px !important; border-bottom: 1px solid var(--ln); background: #fff !important; color: var(--nv) !important; font: 400 22px/1 var(--dp) !important; letter-spacing: .5px !important; text-transform: uppercase; } .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active, .elementor-nav-menu--dropdown a.elementor-item.highlighted { box-shadow: inset 4px 0 0 var(--lm); } .elementor-nav-menu--dropdown .sub-menu { background: var(--mi) !important; border: 0 !important; } .elementor-nav-menu--dropdown a.elementor-sub-item { display: flex; align-items: center; min-height: 46px; padding: 10px 24px 10px 36px !important; border-bottom: 1px solid #E2E8F2; background: transparent !important; color: var(--nv) !important; font: 500 16px/1.2 var(--sn) !important; letter-spacing: 0 !important; text-transform: none; } .elementor-nav-menu--dropdown .sub-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; margin: -8px -12px -8px 0; padding: 0 !important; } .elementor-menu-toggle { min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; } .sr-b { min-height: 44px; } } @media (max-width: 640px) { :root { --gut: 24px; } /* --- Social icons: right edge, vertically centred; the quote and question shortcuts stay on larger screens --- */ .tx-wa { top: 50% !important; bottom: auto !important; right: 0 !important; left: auto !important; transform: translateY(-50%) !important; } .tx-soc { flex-direction: column !important; } .tx-wa-b, .tx-soc-a { width: 32px !important; min-width: 32px !important; height: 40px !important; } .tx-wa-b svg, .tx-soc-a svg { width: 17px; height: 17px; } .tx-soc > * + * { border: 0 !important; } .tx-wa-p { top: 50% !important; bottom: auto !important; left: auto !important; right: 38px !important; transform: translateY(-50%) !important; width: min(270px, calc(100vw - 54px)) !important; } .tx-top { width: 36px !important; min-width: 36px !important; height: 36px !important; } /* --- Headings and banners --- */ .cb-t h1.elementor-heading-title, .cb h1 { font-size: clamp(30px, 8.6vw, 38px) !important; } .e-con.cb-t { padding: 18px var(--gut) 24px !important; } .e-con.cb-m { min-height: 0; aspect-ratio: 16 / 8; } .elementor-heading-title { overflow-wrap: break-word; } .tx-gs-t h2, .tx-range .tx-head h2, .tx-an-h h2, .ox-s h2, .ox-t h2, .gr4 > h2 { font-size: clamp(30px, 8.6vw, 38px) !important; } .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(29px, 8.4vw, 36px) !important; } .bh .elementor-heading-title { font-size: clamp(31px, 8.8vw, 38px) !important; } .bh small { font-size: 19px; } /* --- Clean product presentation: no photograph behind the ball --- */ .tx-pp-bg { display: none; } .tx-pp-h .tx-pp-w { padding: 16px var(--gut) 24px; } .tx-pp-ball { height: 50vw; max-height: 220px; } .tx-pp-h h1 { font-size: clamp(30px, 8.6vw, 38px) !important; } .cb:not(.e-con) { grid-template-columns: 1fr; min-height: 0; } .cb:not(.e-con) .cb-m { display: none; } .cb:not(.e-con).is-white .cb-m { display: flex; min-height: 0; padding: 8px 0 22px; clip-path: none; } .cb:not(.e-con) .cb-t { padding: 18px var(--gut) 34px; } .tx-cat-w { gap: 12px; } .tx-cg { gap: 10px; } .tx-pc-i img { padding: 2px; } /* --- GEL-STRIKE --- */ .gr4 { padding-block: 44px; } .gr4-c { padding: 20px 14px; } .gr4-i { min-height: 0; } .gr4-i.is-many { display: grid; grid-template-columns: repeat(2, minmax(0, 118px)); justify-content: center; gap: 8px 14px; } .gr4-i.is-many a { margin: 0; } .gr4-i:not(.is-many) a { flex: 0 0 128px; } .tx-anw.is-hero .tx-an { padding: 32px 0 22px; } .vs-b img { width: 96px !important; } /* --- OEM --- */ .rt { padding: 22px 0 !important; } .rt-ic { margin-left: 20px; } .rt-ic .elementor-icon { width: 54px; height: 54px; font-size: 24px; } .rt-ic .elementor-icon i, .rt-ic .elementor-icon svg { width: 24px !important; height: 24px !important; font-size: 24px; line-height: 24px; } .rt-t, .rt-p { padding-inline: 20px; } .ox-s, .ox-t { padding-block: 44px; } .ox-s-b { width: min(210px, 60%); } .ox-s-c b { font-size: 24px; } .e-con.ct, .e-con.ct-g { width: calc(100% - 2 * var(--gut)) !important; margin-block: 28px !important; min-height: 0; } .ct .ct-p { padding: 26px 22px !important; } .e-con.ct-g { padding: 44px 22px !important; } /* --- Manufacturing --- */ .flow-s { padding: 0 0 22px 60px; } .flow-n, .flow-n .elementor-heading-title { width: 44px; height: 44px; font-size: 25px !important; } .flow-s::before { left: 21px; top: 44px; } .flow-s .ph43 img { aspect-ratio: 16 / 9; } .rg-g { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .rg { padding: 8px 4px 9px !important; } .rg:last-child { grid-column: 2; } .rg-t .elementor-heading-title, .rg-t a { font-size: 16px !important; } .ways { gap: 10px !important; } .ways > .e-con:first-child { grid-column: 1 / -1; padding: 0 0 6px !important; } .c4 { padding-bottom: 12px !important; } .c4 > .elementor-widget:not(.ball-t) { padding-inline: 10px; } .c4 .elementor-heading-title { font-size: 22px !important; } .c4 p { font-size: 14px; line-height: 1.35; } .c4 .elementor-button { font-size: 12px !important; padding: 8px 0 !important; } .ball-t { padding: 8px; } .q4 .ph43 img { aspect-ratio: 16 / 9; } /* --- About --- */ .ce-g2 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } .ce-a4 { padding: 4px !important; box-shadow: none; } .ce-a4 .elementor-widget-text-editor { display: none; } .ce-a4 .elementor-icon { font-size: 18px; } .ce-g2::after { content: 'Certification images coming soon'; grid-column: 1 / -1; font: 400 14px/1.3 var(--sn); color: #5D6B86; text-align: center; } .st { gap: 14px; } .e-con.sy3 { max-width: 320px; } .sy3 .c { width: 26%; } .mv4 { padding: 24px 20px !important; } .wd2-g { gap: 12px; } /* --- Contact and quote forms --- */ .tc { padding: 28px var(--gut) 32px; } .tc .tx-tm { gap: 26px; } .tc .tx-tm h3 { font-size: 27px !important; } .tc .tx-tm a { font-size: 17px; overflow-wrap: anywhere; } .tc .tx-tm li { padding: 3px 0; min-height: 30px; } .of { padding: 12px 0 !important; } .tx-map { min-height: 280px; height: 280px; } .tx-mapcol .elementor-widget-shortcode, .tx-mapcol .elementor-widget-container, .tx-mapcol .elementor-shortcode { height: auto; } .elementor-form .elementor-field-group { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 12px; padding-inline: 0 !important; } .elementor-form .elementor-form-fields-wrapper { margin-inline: 0 !important; } .elementor-form .elementor-field-textual, .elementor-form select.elementor-field { min-height: 48px; font-size: 16px !important; } .qs { gap: 10px; } .tq { grid-template-columns: 72px 1fr; gap: 8px 12px; padding: 16px 0; } .tq-i { width: 72px; height: 72px; grid-row: auto; } .tq-i img { width: 62px !important; height: 62px !important; } .tq-q { grid-column: 1 / -1; justify-self: stretch; } .tq-q button { width: 48px !important; min-width: 48px !important; height: 46px !important; } .tq-q input { flex: 1; width: auto !important; min-width: 0; height: 46px; font-size: 17px !important; } .tq-x { grid-column: 1 / -1; justify-self: end; grid-row: auto; padding: 8px 0 !important; } .tq-t textarea { font-size: 16px; } #quote { padding: 18px !important; } /* --- Footer: compact, grouped, with dividers --- */ .turf-footer .elementor-icon-list-items .elementor-icon-list-item { padding-block: 2px !important; margin: 0 !important; } .turf-footer > .e-con-inner > .e-con, .turf-footer > .e-con > .e-con { padding-block: 18px !important; } .turf-footer .e-con { row-gap: 8px; } .tx-fv p { margin-bottom: 8px; } .turf-footer .tx-tm { gap: 14px; } .turf-footer .tx-tm-c + .tx-tm-c { border-top: 1px solid #2B4488; padding-top: 12px; } .turf-footer .tx-tm a { font-size: 15px; } } /* Search results banner */ .tx-bn-navy { background: var(--nv); padding: clamp(28px, 6vh, 56px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); } .tx-bn-navy h1 { color: #fff !important; margin: 10px 0 6px; } @media (max-width: 640px) { /* The header always fits, with or without a quote count */ [data-elementor-type="header"] .e-con { min-width: 0; } [data-elementor-type="header"] > .e-con, [data-elementor-type="header"] > .e-con > .e-con-inner { padding-inline: 12px !important; column-gap: 4px !important; flex-wrap: nowrap !important; } .hd-logos { width: auto !important; flex: 0 1 auto !important; gap: 8px !important; } .hd-logos .elementor-widget-image:first-child img { width: 92px !important; height: auto !important; } .hd-logos .elementor-widget-image:last-child img { width: 36px !important; height: auto !important; } .hd-logos .elementor-widget-image { width: auto !important; } [data-elementor-type="header"] .elementor-widget-nav-menu { flex: 1 1 auto !important; min-width: 0; } .elementor-menu-toggle { min-width: 40px; margin-left: auto; } .sr-b { width: 36px !important; min-width: 36px !important; } .turf-quote-btn { flex: none !important; } .turf-quote-btn .elementor-button { padding: 10px 9px !important; font-size: 11px !important; letter-spacing: .3px !important; white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center; } .turf-quote-btn .turf-quote-count { min-width: 18px; height: 18px; margin-left: 5px; font-size: 11px; padding: 0 3px; } /* Comfortable tap targets */ a.elementor-button, .tx-pc-a a, .tx-more, .tx-go { min-height: 42px; display: inline-flex; align-items: center; } .tx-go { min-height: 44px; } .tx-hero h1, .tx-loc { padding-inline: 18px; } .sr-p { padding: 12px var(--gut) 16px; } } @media (max-width: 360px) { .hd-logos { gap: 5px !important; } .hd-logos .elementor-widget-image:first-child img { width: 72px !important; } .hd-logos .elementor-widget-image:last-child img { width: 28px !important; } .elementor-menu-toggle { min-width: 36px; } .sr-b { width: 32px !important; min-width: 32px !important; } .turf-quote-btn .elementor-button { padding: 10px 7px !important; font-size: 10.500px !important; } .rg-t .elementor-heading-title, .rg-t a { font-size: 14px !important; } } @media (max-width: 1024px) and (min-width: 641px) { a.elementor-button { min-height: 42px; display: inline-flex; align-items: center; } } /* ==================== Round 12 ==================== */ /* --- One-line centred headings --- */ .h1l .elementor-heading-title { font-size: clamp(30px, 3.4vw, 50px) !important; line-height: 1.1 !important; } .h1l .tx-rib { margin-top: 0; } /* --- About hero: the main words carry the banner --- */ .ov-p { max-width: 860px; } .ov-l p { font: 500 clamp(21px, 2vw, 30px)/1.32 var(--sn) !important; color: var(--nv); } .ov-p p { margin: 0; } /* Certificates: same height, original proportions, nothing placed over them */ .e-con.cz-g { display: grid !important; grid-template-columns: .703fr 1.075fr; gap: 26px; width: 100%; max-width: 700px; margin-left: auto; align-items: start; } .e-con.cz { min-width: 0; width: 100% !important; box-shadow: 0 0 0 6px #fff, 0 16px 34px rgba(3, 8, 26, .34); } .cz .elementor-widget-image, .cz a { display: block; width: 100%; line-height: 0; } .cz img { display: block; width: 100% !important; height: auto !important; max-width: 100% !important; } /* Centred factory video */ .vd { width: 100%; margin-inline: auto; } .vh .elementor-heading-title { line-height: 1.02 !important; } .vh .tx-rib { margin-top: 2px; } /* SOFTEK */ .e-con.sk { width: calc(100% - 2 * max(var(--gut), 40px)) !important; max-width: var(--wrap) !important; margin: clamp(8px, 2vh, 20px) auto clamp(40px, 7vh, 72px) !important; background: var(--mi); align-items: stretch; min-height: clamp(380px, 48vh, 480px); } .sk-t { padding: clamp(36px, 6vh, 60px) clamp(26px, 4vw, 64px) !important; } .sk-t p { margin: 0; } .sk-h .elementor-heading-title { font-size: clamp(54px, 7vw, 104px) !important; line-height: .95 !important; letter-spacing: 1px; } .sk-m { background: linear-gradient(135deg, var(--nv), var(--bl)); clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%); } .sk-t p { font-size: clamp(17px, 1.3vw, 19px) !important; line-height: 1.5 !important; } .sk-i img { display: block; width: min(360px, 100%) !important; height: auto !important; margin: 0 auto; filter: drop-shadow(0 22px 20px rgba(3, 8, 26, .5)); } /* --- Manufacturing: four image-led stages --- */ .e-con.pr { position: relative; overflow: hidden; min-height: clamp(400px, 58vh, 540px); padding: 22px !important; } .pr .elementor-widget-image { position: absolute; inset: 0; } .pr .elementor-widget-image img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .pr:hover .elementor-widget-image img { transform: scale(1.04); } .pr::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 30, 75, .94) 0, rgba(13, 30, 75, .55) 38%, rgba(13, 30, 75, 0) 68%); pointer-events: none; } .pr > .elementor-widget:not(.elementor-widget-image) { position: relative; z-index: 1; } .pr-n .elementor-heading-title { font: 400 22px/1 var(--dp) !important; color: var(--lm) !important; letter-spacing: 1px; } .pr-t .elementor-heading-title { font-family: var(--dp) !important; font-weight: 400 !important; font-size: clamp(38px, 3.6vw, 54px) !important; line-height: 1 !important; letter-spacing: .5px; } .pr:nth-child(1) .elementor-widget-image img { object-position: 82% 50%; } .pr-p p { margin: 0; font: 500 16px/1.35 var(--sn); color: #fff; } /* Seven ways: a dark showcase with even, image-ready frames */ .ways .c4 { background: #fff; border: 0; } .ways .ball-t { aspect-ratio: 4 / 3; background: var(--mi); padding: 12px; display: flex; align-items: center; justify-content: center; } .ways .ball-t a { display: block; height: 100%; } .ways .ball-t img { width: auto !important; max-width: 100%; height: 100% !important; aspect-ratio: 1; } .c4 p { margin: 0; } /* --- OEM --- */ .e-con.e-grid:has(> .rt) { gap: clamp(20px, 2.4vw, 32px) !important; } .e-con.rt { justify-content: flex-start; align-items: center; text-align: center; padding: clamp(30px, 4vw, 48px) clamp(20px, 3vw, 44px) !important; min-height: 280px; } .rt-ic { margin: 0 0 8px; } .rt-ic .elementor-icon-wrapper { text-align: center !important; } .rt-t, .rt-p { padding-inline: 0; } .rt-p { max-width: 460px; } /* From Inquiry to Export: the approved layout */ .ox-t { padding: clamp(56px, 9vh, 96px) max(var(--gut), calc((100vw - var(--wrap)) / 2)); scroll-margin-top: var(--hh); } .ox-t ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.6vw, 40px); margin: clamp(24px, 4vh, 40px) 0 0; padding: 0; } .ox-t li { position: relative; min-width: 0; } .ox-t i { display: block; font: 400 clamp(72px, 8vw, 124px)/.9 var(--dp); font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--nv); } .ox-t li:not(:last-child)::after { content: ''; position: absolute; top: 38px; right: 8%; width: 42%; height: 3px; background: linear-gradient(90deg, var(--nv), var(--lm)); } .ox-t b { display: block; margin: 6px 0 5px; font: 400 clamp(24px, 2.1vw, 30px)/1.05 var(--dp); letter-spacing: .3px; color: var(--nv); } .ox-t p { margin: 0; font: 400 16px/1.45 var(--sn); color: var(--tx); } /* Your Own Ball Range: blue behind, so the green ribbon stands out */ .ct-oem { background: var(--nv) !important; } .ct-oem .ct-p { align-self: center; background: none; margin: 0; box-shadow: none; padding-left: clamp(84px, 8vw, 112px) !important; } .ct-oem .elementor-heading-title { color: #fff !important; } .ct-oem .elementor-heading-title .tx-rib { color: var(--nv) !important; } .ct-oem p { color: #E6ECF8 !important; } @media (max-width: 1024px) { .sk { flex-direction: column !important; } .sk > .e-con { width: 100% !important; } .sk-m { clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%); } .ox-t ol { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .ox-t li:not(:last-child)::after { display: none; } .ct-oem .ct-p { padding-left: 26px !important; } .e-con.pr { min-height: 340px; } } @media (max-width: 640px) { .e-con.sk { width: calc(100% - 2 * var(--gut)) !important; } .sk-t { padding: 28px 22px !important; } .sk-i img { width: 200px !important; } .ox-t ol { grid-template-columns: 1fr; } .ox-t i { font-size: 66px; } .ct-oem .ct-p { padding: 26px 22px !important; } .e-con.pr { min-height: 240px; padding: 16px !important; } .pr-t .elementor-heading-title { font-size: 34px !important; } .h1l .elementor-heading-title { font-size: clamp(26px, 7.4vw, 34px) !important; } .e-con.cz-g { grid-template-columns: 1fr; justify-items: center; gap: 22px; margin: 0 auto; } .e-con.cz:first-child { max-width: 240px; } .e-con.rt { padding: 24px 18px !important; min-height: 0; } .ways .ball-t { padding: 8px; } } .e-con.cb-xl .cb-t h1.elementor-heading-title { font-size: clamp(50px, 7.2vw, 108px) !important; line-height: .96 !important; } @media (max-width: 640px) { .e-con.cb-xl .cb-t h1.elementor-heading-title { font-size: clamp(42px, 13vw, 56px) !important; } } /* ==================== Round 13 ==================== */ .one-l .elementor-heading-title { white-space: nowrap; } .ov-p { max-width: 980px; } .ov-l p { font-size: clamp(19px, 1.55vw, 23px) !important; line-height: 1.45 !important; font-weight: 400 !important; } /* --- Quote buttons: one treatment, in the header and the footer --- */ .turf-quote-btn .elementor-button, .turf-quote-foot .elementor-button { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 22px !important; border: 0 !important; border-radius: 0 !important; background: var(--lm) !important; color: var(--nv) !important; font: 400 21px/1 var(--dp) !important; letter-spacing: .8px !important; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); transition: background-color .2s, color .2s; } .turf-quote-btn .elementor-button *, .turf-quote-foot .elementor-button * { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; } .turf-quote-btn .turf-quote-count { font: 700 12px/1 var(--sn) !important; letter-spacing: 0 !important; color: var(--lm) !important; } .turf-quote-foot .elementor-button:hover, .turf-quote-foot .elementor-button:focus { background: #fff !important; color: var(--nv) !important; } /* --- Map: a calm placeholder until Google's embed has arrived --- */ .tx-map-w { position: relative; height: 100%; background: #E3E9F2; } .tx-map-l { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: 600 15px/1 var(--sn); color: var(--nv); opacity: .7; } .tx-map-w.is-on .tx-map-l { display: none; } .tx-map-w .tx-map { position: relative; } /* --- Contact: form and quote banner --- */ .e-con.fm-c { min-width: 0; } .fm-c > .elementor-widget-text-editor p { margin: 0 0 4px; } .e-con.qb { position: relative; overflow: hidden; min-height: 520px; padding: clamp(24px, 3vw, 40px) !important; background: var(--nv); clip-path: var(--cut); } .qb-i { position: absolute !important; inset: 0; margin: 0 !important; } .qb-i img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .qb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 30, 75, .97) 0, rgba(13, 30, 75, .9) 34%, rgba(13, 30, 75, .25) 66%, rgba(13, 30, 75, 0) 82%); pointer-events: none; } .qb > .elementor-element:not(.qb-i) { position: relative; z-index: 1; } .qb-h .elementor-heading-title { font-size: clamp(34px, 3.3vw, 50px) !important; line-height: 1.02 !important; } .qb-p p { margin: 0; font: 400 clamp(16px, 1.25vw, 18px)/1.5 var(--sn); color: #fff; } .qb-a .elementor-button { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); } /* --- Searchable country --- */ .tx-cc { position: relative; width: 100%; } .elementor-field-group-country .elementor-select-wrapper::before { display: none; } .elementor-form .tx-cc-s { position: absolute !important; left: 0; bottom: 0; width: 1px !important; min-height: 0 !important; height: 1px; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; } .tx-cc-l { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 244px; margin: 2px 0 0; padding: 4px 0; overflow-y: auto; list-style: none; background: #fff; border: 1px solid #BFCADC; box-shadow: 0 14px 30px rgba(13, 30, 75, .18); } .tx-cc-l[hidden] { display: none; } .tx-cc-l li { padding: 9px 14px; font: 400 16px/1.25 var(--sn); color: var(--nv); cursor: pointer; } .tx-cc-l li:hover, .tx-cc-l li.is-a { background: var(--mi); box-shadow: inset 3px 0 0 var(--lm); } .tx-cc-l li.is-none { color: #5C6A86; cursor: default; background: none; box-shadow: none; } .elementor-form .elementor-field-group { position: relative; } .elementor-form .elementor-field-group .tq-err { flex: 0 0 100%; width: 100%; } .tq textarea.is-bad, .tq .tq-q input.is-bad { border-color: #B3261E !important; } .tq-list-err { margin: 0 0 12px; } @media (max-width: 1024px) { .e-con.qb { min-height: 460px; } .e-con.cz-g { margin: 0 auto; } } @media (max-width: 640px) { .e-con.qb { min-height: 480px; } .turf-quote-btn .elementor-button { min-height: 38px; padding: 9px 13px !important; font-size: 17px !important; letter-spacing: .4px !important; } .turf-quote-foot .elementor-button { font-size: 20px !important; } } @media (max-width: 370px) { .elementor-g-recaptcha { transform: scale(.86); transform-origin: 0 0; } .turf-quote-btn .elementor-button { padding: 8px 10px !important; font-size: 15px !important; } } /* ==================== Round 14 ==================== */ /* --- Product balls: the whole ball, centred in a circle, one soft shadow --- */ .tx-pc:hover .tx-pc-i img { transform: scale(1.03); } .tx-pp-ball::after { background: radial-gradient(ellipse at center, rgba(3, 8, 26, .55) 0, rgba(3, 8, 26, .24) 48%, rgba(3, 8, 26, 0) 72%); } .tx-pp-ball { padding-block: 2%; } /* --- Product FAQ --- */ .tx-pf { border-top: 1px solid var(--ln); } .tx-pf .tx-rib { margin-top: 2px; } /* --- Cut corner on CTA buttons --- */ .cx .elementor-button, .ct .elementor-button, .ct-g .elementor-button { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); } /* --- CTA banners --- */ .e-con.cx { position: relative; overflow: hidden; min-height: clamp(340px, 42vh, 430px); padding: clamp(36px, 5vh, 56px) clamp(26px, 5vw, 72px) !important; background: var(--nv); clip-path: var(--cut); } .cx-i { position: absolute !important; inset: 0; margin: 0 !important; } .cx-i img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .cx::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 30, 75, .98) 0, rgba(13, 30, 75, .94) 50%, rgba(13, 30, 75, .3) 76%, rgba(13, 30, 75, .06) 100%); pointer-events: none; } .cx > .elementor-element:not(.cx-i) { position: relative; z-index: 1; max-width: min(600px, 50%); } :is(.page-id-260, .page-id-262, .page-id-264) .cx::after { background: linear-gradient(270deg, rgba(13, 30, 75, .98) 0, rgba(13, 30, 75, .94) 50%, rgba(13, 30, 75, .3) 76%, rgba(13, 30, 75, .06) 100%); } :is(.page-id-260, .page-id-262, .page-id-264) .cx > .elementor-element:not(.cx-i) { margin-left: auto; width: min(600px, 50%); } .cx-h .elementor-heading-title { font-size: clamp(36px, 4vw, 60px) !important; line-height: 1.02 !important; } .cx-p p { margin: 0; color: #fff !important; } /* --- About: mission and vision --- */ .e-con.mv { position: relative; min-height: clamp(320px, 38vw, 430px); justify-content: flex-end; padding: clamp(28px, 3.4vw, 52px) !important; clip-path: var(--cut); } .mv.is-m { background: var(--nv); } .mv.is-v { background: var(--lm); } .e-con.mv .mv-l h2.elementor-heading-title { font: 700 14px/1 var(--sn) !important; letter-spacing: 1.6px; text-transform: uppercase; } .mv-s .elementor-heading-title { font-size: clamp(36px, 3.7vw, 56px) !important; line-height: 1.02 !important; letter-spacing: .3px; } .mv-p p { margin: 0; font: 400 clamp(16px, 1.25vw, 19px)/1.45 var(--sn); } .mv.is-m .mv-p p { color: #E6ECF8 !important; } .mv.is-v .mv-p p { color: var(--nv) !important; } /* --- Order CTA: no floating ball, so the text sits evenly --- */ .ct-a .ct-p { padding-left: clamp(26px, 4vw, 60px) !important; } /* --- Manufacturing: the journey, left to right and back along a second row --- */ @media (min-width: 1025px) { } @media (max-width: 1024px) { .mv-s .elementor-heading-title { font-size: clamp(30px, 4.6vw, 44px) !important; } .cx > .elementor-element:not(.cx-i), :is(.page-id-260, .page-id-262, .page-id-264) .cx > .elementor-element:not(.cx-i) { max-width: min(560px, 74%); } } @media (max-width: 640px) { .e-con.mv { min-height: 0; padding: 26px 22px !important; } .e-con.cx { min-height: 460px; justify-content: flex-end; padding: 24px 20px !important; } .cx::after, :is(.page-id-260, .page-id-262, .page-id-264) .cx::after { background: linear-gradient(0deg, rgba(13, 30, 75, .97) 0, rgba(13, 30, 75, .9) 48%, rgba(13, 30, 75, .25) 78%, rgba(13, 30, 75, 0) 100%); } .cx > .elementor-element:not(.cx-i), :is(.page-id-260, .page-id-262, .page-id-264) .cx > .elementor-element:not(.cx-i) { max-width: 100%; width: 100%; margin-left: 0; } .cx-h .elementor-heading-title { font-size: clamp(32px, 9vw, 40px) !important; } .tx-pc-i { margin-bottom: 6px; } } /* Empty until reCAPTCHA keys are saved: no gap above the button */ .elementor-field-type-recaptcha:has(.elementor-field:empty) { display: none; } .ov-l p { text-wrap: pretty; } @media (max-width: 640px) { .e-con.mv .mv-l h2.elementor-heading-title { font-size: 14px !important; } } /* ==================== Round 15 ==================== */ /* Banners without the green label */ .cb-t .cb-crumb { margin-bottom: 10px; } /* OEM cards heading on one line where it fits */ .ct-oem .elementor-heading-title { line-height: 1.02 !important; } /* --- Contact: quote guidance, the photo melts into the blue --- */ .e-con.qb { justify-content: flex-start; padding: clamp(190px, 21vw, 300px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 40px) !important; clip-path: var(--cut); } .e-con.qb .qb-i { inset: 0 0 auto 0; height: clamp(250px, 27vw, 380px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); } .qb::after { display: none; } .qb-h .elementor-heading-title { font-size: clamp(32px, 2.9vw, 44px) !important; } .qb-a .elementor-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; } .qb-q .elementor-button { background: #fff !important; color: var(--nv) !important; transition: background-color .2s, color .2s; } .qb-q .elementor-button * { color: inherit !important; } .qb-q .elementor-button:hover, .qb-q .elementor-button:focus { background: var(--bl) !important; color: #fff !important; } .sk-t .tx-go { margin-top: 4px; } @media (max-width: 1024px) { .e-con.qb { padding-top: 230px !important; min-height: 0; } .e-con.qb .qb-i { height: 300px; } } @media (max-width: 640px) { .e-con.qb { padding: 170px 20px 26px !important; justify-content: flex-start; } .e-con.qb .qb-i { height: 230px; } } /* --- Footer: supplied logos on white, so the blue stays readable on navy --- */ .ft-l { padding: 7px 10px; background: #fff; line-height: 0; } .ft-l img { display: block; width: auto !important; height: 62px !important; max-width: none !important; } /* ==================== Round 16 ==================== */ /* --- Product images: fixed area, whole product, one shadow beneath. No background behind the product --- */ .tx-pc-i { position: relative; display: flex; align-items: center; justify-content: center; margin: 2px 0 8px; overflow: visible; } .tx-pc-i img { position: relative; z-index: 1; display: block; width: 84% !important; height: 84% !important; max-width: 84%; padding: 0 !important; object-fit: contain; object-position: center; } .tx-pc-i::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 3.500%; height: 5.500%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(13, 30, 75, .34) 0, rgba(13, 30, 75, .14) 50%, rgba(13, 30, 75, 0) 72%); } /* Rugby balls are long: a wider area, so they read at the same visual scale */ .tx-pc-i.is-rugby-balls img { width: 98% !important; height: 98% !important; max-width: 98%; } .tx-pc-i.is-rugby-balls::after { left: 18%; right: 18%; bottom: 5%; } /* Elementor loop cards use the same image */ .e-loop-item .elementor-widget-shortcode .tx-pc-i { display: flex; aspect-ratio: 1; } .e-loop-item .elementor-shortcode { line-height: 0; } /* --- Homepage: closed categories stay sharp and readable --- */ .tx-r:not(.is-open) .tx-r-ph::after { background: linear-gradient(0deg, rgba(13, 30, 75, .78) 0, rgba(13, 30, 75, .16) 42%, rgba(13, 30, 75, .1) 100%); } .tx-range .tx-more { color: var(--nv) !important; } /* --- Category sidebar --- */ .tx-f a.tx-f-nv { clear: both; display: flex; align-items: center; gap: 9px; padding: 6px 0; font: 400 16px/1.2 var(--sn); color: var(--nv) !important; text-decoration: none; } .tx-f-nv i { flex: none; position: relative; width: 18px; height: 18px; background: #fff; border: 1px solid #767676; border-radius: 2px; } .tx-f-nv:hover i { border-color: var(--nv); } .tx-f-nv:hover span { text-decoration: underline; } .tx-f-nv.is-on { font-weight: 600 !important; } .tx-f-nv.is-on i { background: var(--nv); border-color: var(--nv); } .tx-f-nv.is-on i::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* --- OEM CTA --- */ .ct-oem .ct-p { padding-left: clamp(26px, 4vw, 60px) !important; } .ct-oem .elementor-heading-title { font-size: clamp(32px, 3.100vw, 44px) !important; } /* --- About --- */ .e-con.mv { min-height: clamp(220px, 25vw, 320px); justify-content: center; } .mv-s .elementor-heading-title { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.06 !important; } /* --- Manufacturing: a compact alternating journey on one central line --- */ .e-con.jr-g { position: relative; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100%; max-width: 1000px; margin-inline: auto; } .e-con.jr-g::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.500px; background: linear-gradient(180deg, var(--nv), var(--bl) 70%, var(--lm)); } .e-con.jr { position: relative; display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 72px; background: none; min-width: 0; } .jr-i { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 5 / 2; overflow: hidden; } .jr-i img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .jr-n { position: absolute !important; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px !important; display: flex; align-items: center; justify-content: center; background: var(--nv); border: 3px solid var(--mi); border-radius: 50%; } .jr-n .elementor-heading-title { font: 400 20px/1 var(--dp) !important; letter-spacing: .5px; color: var(--lm) !important; } .jr-t { grid-column: 2; grid-row: 2; } .jr-t .elementor-heading-title { font: 400 clamp(25px, 2.300vw, 32px)/1.04 var(--dp) !important; letter-spacing: .3px; } .jr-p { grid-column: 2; grid-row: 3; padding-top: 4px; } .jr-p p { margin: 0; font: 400 16px/1.4 var(--sn); color: var(--tx); } .jr:nth-child(even) .jr-i { grid-column: 2; } .jr:nth-child(even) .jr-t, .jr:nth-child(even) .jr-p { grid-column: 1; text-align: right; } .jr:nth-child(even) .jr-t .elementor-heading-title { text-align: right; } .jr-note p { margin: 0; font-size: 15px; color: #5C6A86; } /* --- Contact: four connected steps --- */ .qb-f { list-style: none; counter-reset: q; margin: 0; padding: 0; } .qb-f li { counter-increment: q; position: relative; padding: 0 0 13px 42px; } .qb-f li:last-child { padding-bottom: 0; } .qb-f li::before { content: counter(q); position: absolute; z-index: 1; left: 0; top: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lm); color: var(--nv); font: 400 18px/1 var(--dp); } .qb-f li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: rgba(199, 239, 34, .55); } .qb-f b { display: block; font: 400 clamp(21px, 1.7vw, 25px)/1.1 var(--dp); letter-spacing: .4px; color: #fff; } .qb-f span { display: block; margin-top: 2px; font: 400 15px/1.35 var(--sn); color: #E6ECF8; } /* --- Footer --- */ @media (max-width: 640px) { .e-con.jr-g { gap: 14px !important; } .e-con.jr-g::before { left: 17px; } .e-con.jr, .jr:nth-child(even) { grid-template-columns: 1fr !important; grid-template-rows: auto; column-gap: 0; padding-left: 48px !important; } .jr-i, .jr:nth-child(even) .jr-i { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 7; } .jr-t, .jr:nth-child(even) .jr-t { grid-column: 1; grid-row: 2; padding-top: 8px; text-align: left; } .jr-p, .jr:nth-child(even) .jr-p { grid-column: 1; grid-row: 3; text-align: left; } .jr:nth-child(even) .jr-t .elementor-heading-title { text-align: left; } .jr-n { left: 17px; top: 0; width: 36px; height: 36px; margin: 0 0 0 -18px !important; } .jr-n .elementor-heading-title { font-size: 17px !important; } .e-con.mv { min-height: 0; } } @media (min-width: 1025px) { .tx-legal { white-space: nowrap; } } /* ==================== Round 17 ==================== */ /* --- Footer team: one stacked column --- */ .ft-tm .tx-tm { grid-template-columns: 1fr; gap: 12px; } .ft-tm .tx-tm-c + .tx-tm-c { padding-top: 12px; border-top: 1px solid #2B4488; } .ft-tm .tx-tm-em { border-top: 0; margin-top: 2px !important; padding-top: 2px !important; } /* --- Product code in a green box --- */ .tx-pp-h h1 span { display: block !important; width: fit-content; margin-bottom: 10px; padding: 5px 12px 4px; background: var(--lm); color: var(--nv) !important; font: 700 clamp(15px, 1.300vw, 18px)/1.2 var(--sn) !important; font-style: normal !important; letter-spacing: .4px; } /* --- Manufacturing: show the whole activity, product-style cut corner, numbers truly centred --- */ .jr-i { aspect-ratio: 16 / 9; clip-path: var(--cut); } .jr:nth-child(7) .jr-i img { object-position: 38% 50%; } .jr-n { padding: 0 !important; } .jr-n .elementor-heading-title { display: flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; font: 400 20px/1 var(--dp) !important; letter-spacing: 0 !important; text-align: center; } /* --- Contact: supplied player photo, fading into the blue --- */ .e-con.qb { padding-top: clamp(320px, 27vw, 380px) !important; background: radial-gradient(75% 42% at 50% 24%, #2B56AE 0, rgba(35, 70, 145, 0) 100%), var(--nv); } .e-con.qb .qb-i { top: 10px; height: clamp(340px, 29vw, 410px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%); } .qb-i img { object-fit: contain !important; object-position: center top; } @media (max-width: 1024px) { .e-con.qb { padding-top: 330px !important; } .e-con.qb .qb-i { height: 370px; } } @media (max-width: 640px) { .jr-i, .jr:nth-child(even) .jr-i { aspect-ratio: 16 / 9; } .jr-n .elementor-heading-title { width: 30px; height: 30px; font-size: 17px !important; } .e-con.qb { padding-top: 268px !important; } .e-con.qb .qb-i { height: 300px; } } /* Bebas Neue sits high in its line box: optical correction, measured */ .jr-n .elementor-heading-title { transform: translateY(1.25px); } @media (max-width: 640px) { .jr-n .elementor-heading-title { transform: translateY(1.75px); } } /* ==================== Product card: most of it is set in the Product Card template ==================== */ .tx-cg .tx-pc, .tx-pc > .elementor { height: 100%; } .e-con.tx-pc-card { transition: border-color .25s; } .e-con.tx-pc-card:hover { border-color: var(--st); } .tx-pc-n a { color: var(--nv) !important; } .tx-pc-c .elementor-heading-title { line-height: 1.2 !important; } .tx-pc-n .elementor-heading-title { font-size: 16px !important; line-height: 1.25 !important; } .tx-pc-m .elementor-heading-title { line-height: 1.35 !important; } .e-con.tx-pc-a { margin-top: auto; } .tx-pc-a .elementor-button { padding: 0 !important; background: none !important; border: 0 !important; font: 700 12px/1 var(--sn) !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--st) !important; } .tx-pc-a .elementor-button * { color: inherit !important; } .tx-pc-a .elementor-button-icon { display: none !important; } .tx-pc-a .elementor-button:hover { color: var(--nv) !important; } .tx-pc-a .elementor-button.is-added { color: #5A7A00 !important; } .elementor-form .elementor-field-textual::placeholder { opacity: 1; color: #70809E !important; } .cx-p .elementor-heading-title { color: #fff !important; line-height: 1.45 !important; } @media (max-width: 640px) { .tx-pc-a .elementor-button { font-size: 11px !important; letter-spacing: .4px !important; padding-block: 6px !important; min-height: 42px; display: inline-flex; align-items: center; } .e-con.tx-pc-a { gap: 0 8px; } } /* ==================== Search: middle of the screen; just below the header on phones, clear of the keyboard ==================== */ .sr { top: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--gut); } .sr[hidden] { display: none !important; } .sr-p { width: min(760px, 100%); max-height: min(80svh, 720px); padding: clamp(16px, 2.6vw, 26px); } .sr-p form { align-items: stretch; flex-wrap: nowrap; } .sr-p input[type=search] { width: auto; height: 52px; } .sr-p button[type=submit] { display: block !important; height: 52px; white-space: nowrap; } .sr-x { flex: none; height: 52px; } .sr-x i { position: absolute; inset: 0; } .sr-x i::before, .sr-x i::after { left: 50%; top: 50%; margin: -1px 0 0 -11px; } /* ==================== Language .elementor-kit-5 ==================== */ .tx-lang { color: var(--nv); flex: none; cursor: pointer; } .ln { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: var(--gut); background: rgba(13, 30, 75, .55); } .ln[hidden] { display: none !important; } html.ln-open { overflow: hidden; } .ln-p { display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(82svh, 680px); padding: clamp(18px, 2.6vw, 28px); background: #fff; box-shadow: 0 24px 60px rgba(13, 30, 75, .32); clip-path: var(--cut); } .ln-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .ln-h h2 { margin: 0; font: 400 clamp(28px, 3vw, 38px)/1 var(--dp) !important; letter-spacing: .4px; color: var(--nv) !important; } .ln-x { width: 44px !important; min-width: 44px !important; height: 44px; } .ln-s { flex: none; width: 100%; height: 50px; padding: 0 14px !important; border: 2px solid var(--nv) !important; border-radius: 0 !important; font: 500 17px/1.2 var(--sn) !important; color: var(--nv); background: #fff; } .ln-s:focus { outline: 0; box-shadow: 0 0 0 3px rgba(199, 239, 34, .7); } .ln-l { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 6px; margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; } .ln-o { display: block; min-width: 0; padding: 9px 12px !important; text-align: left; background: var(--mi) !important; border: 0 !important; border-radius: 0 !important; color: var(--nv) !important; cursor: pointer; transition: background .15s; } .ln-o[hidden] { display: none; } .ln-o, .ln-o b, .ln-o small { text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; } .ln-o b { display: block; font: 600 16px/1.25 var(--sn); color: var(--nv); overflow-wrap: anywhere; } .ln-o small { display: block; margin-top: 1px; font: 400 13px/1.25 var(--sn); color: #5C6A86; } .ln-o:hover, .ln-o:focus { background: #E3E9F2 !important; } .ln-o.is-on { background: var(--lm) !important; } .ln-o.is-on small { color: var(--nv); } .ln-n { margin: 14px 0 0; font: 400 16px/1.4 var(--sn); color: var(--tx); } .ln-f { margin: 10px 0 0; font: 400 13px/1.3 var(--sn); color: #5C6A86; } /* Google's own bar and tooltips stay hidden */ .goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; } body { top: 0 !important; } font { background: none !important; box-shadow: none !important; } @media (max-width: 1024px) { .tx-r.is-hint { transform: translateX(-8px); } .tx-r { transition: flex-grow .55s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); } } @media (max-width: 640px) { .sr { align-items: flex-start; padding: calc(var(--hh) + 14px) 16px 16px; } .sr-p { width: 100%; max-height: calc(100svh - var(--hh) - 30px); padding: 14px; } .sr-p form { gap: 6px; } .sr-p input[type=search] { padding: 0 10px !important; font-size: 16px !important; } .sr-p button[type=submit] { padding: 0 12px !important; } .sr-x { width: 40px !important; min-width: 40px !important; } .ln { padding: 14px; } .ln-p { width: 100%; max-height: 86svh; } .ln-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .tx-r, .ln-o { transition: none !important; } .tx-r.is-hint { transform: none; } } /* ==================== Elementor base rules, kept last so links, labels and buttons follow Site Settings ==================== */ .elementor a { box-shadow: none; text-decoration: none; } button.elementor-button.elementor-size-md, select.elementor-field-textual.elementor-size-md { min-height: 47px; } .elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-turf_button-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_button-font-size );font-weight:var( --e-global-typography-turf_button-font-weight );text-transform:var( --e-global-typography-turf_button-text-transform );line-height:var( --e-global-typography-turf_button-line-height );letter-spacing:var( --e-global-typography-turf_button-letter-spacing );color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:15px 24px 15px 24px;} .elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-turf_white );} .elementor-kit-5 e-page-transition{background-color:#FFBC7D;} .elementor-kit-5 a{color:var( --e-global-color-turf_blue );} .elementor-kit-5 a:hover{color:var( --e-global-color-primary );} .elementor-kit-5 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h1-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h1-font-size );font-weight:var( --e-global-typography-turf_h1-font-weight );line-height:var( --e-global-typography-turf_h1-line-height );} .elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h2-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h2-font-size );font-weight:var( --e-global-typography-turf_h2-font-weight );line-height:var( --e-global-typography-turf_h2-line-height );} .elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h3-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h3-font-size );font-weight:var( --e-global-typography-turf_h3-font-weight );line-height:var( --e-global-typography-turf_h3-line-height );} .elementor-kit-5 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_h4-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_h4-font-size );font-weight:var( --e-global-typography-turf_h4-font-weight );line-height:var( --e-global-typography-turf_h4-line-height );} .elementor-kit-5 img{border-radius:0px 0px 0px 0px;} .elementor-kit-5 label{color:var( --e-global-color-primary );font-family:var( --e-global-typography-turf_eyebrow-font-family ), Sans-serif;font-size:var( --e-global-typography-turf_eyebrow-font-size );font-weight:var( --e-global-typography-turf_eyebrow-font-weight );font-style:var( --e-global-typography-turf_eyebrow-font-style );line-height:var( --e-global-typography-turf_eyebrow-line-height );} .elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-turf_line );border-radius:0px 0px 0px 0px;padding:13px 15px 13px 15px;} @media (max-width: 1024px) { .elementor-kit-5 h1{font-size:var( --e-global-typography-turf_h1-font-size );line-height:var( --e-global-typography-turf_h1-line-height );} .elementor-kit-5 h2{font-size:var( --e-global-typography-turf_h2-font-size );line-height:var( --e-global-typography-turf_h2-line-height );} .elementor-kit-5 h3{font-size:var( --e-global-typography-turf_h3-font-size );line-height:var( --e-global-typography-turf_h3-line-height );} .elementor-kit-5 h4{font-size:var( --e-global-typography-turf_h4-font-size );line-height:var( --e-global-typography-turf_h4-line-height );} .elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-turf_button-font-size );line-height:var( --e-global-typography-turf_button-line-height );letter-spacing:var( --e-global-typography-turf_button-letter-spacing );} .elementor-kit-5 label{font-size:var( --e-global-typography-turf_eyebrow-font-size );line-height:var( --e-global-typography-turf_eyebrow-line-height );} .elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );} } @media (max-width: 767px) { .elementor-kit-5 h1{font-size:var( --e-global-typography-turf_h1-font-size );line-height:var( --e-global-typography-turf_h1-line-height );} .elementor-kit-5 h2{font-size:var( --e-global-typography-turf_h2-font-size );line-height:var( --e-global-typography-turf_h2-line-height );} .elementor-kit-5 h3{font-size:var( --e-global-typography-turf_h3-font-size );line-height:var( --e-global-typography-turf_h3-line-height );} .elementor-kit-5 h4{font-size:var( --e-global-typography-turf_h4-font-size );line-height:var( --e-global-typography-turf_h4-line-height );} .elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:var( --e-global-typography-turf_button-font-size );line-height:var( --e-global-typography-turf_button-line-height );letter-spacing:var( --e-global-typography-turf_button-letter-spacing );} .elementor-kit-5 label{font-size:var( --e-global-typography-turf_eyebrow-font-size );line-height:var( --e-global-typography-turf_eyebrow-line-height );} .elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );} }/* End custom CSS */