/* ex-variables */ /** * Variables — design tokens (colors, gradients, shadows). * Split from definitions.css (remaster A2). Band 0. Shared: frontend + block editor. */ :root { --Black: #101008; --Neutrals-Black: #282819; --Neutrals-Dark-Grey: #4E4E3E; --Neutrals-Grey: #70705F; --Neutrals-Medium-Grey: #8A8A7E; --Neutrals-Light-Grey: #929283; --Neutrals-Dark-Sand: #B4B4A2; --Neutrals-Sand: #C6C6B3; --Neutrals-Medium-Sand: #DADAC8; --Neutrals-Light-Sand: #E6E6D7; --Neutrals-White-Sand: #F7F6F2; --Neutrals-White: #FFFFFF; --Primary-Dark-Green: #003C19; --Primary-Green: #006432; --Primary-Green-40: rgba(0, 100, 50, 0.4); --Primary-Middle-Green: #0F9129; --Primary-Light-Green: #19AF23; --Primary-Soft-Green: #9ADF9F; --Primary-White-Green: #D1EFD3; --Secondary-Dark-Electro: #00413C; --Secondary-Middle-Electro: #00544D; --Secondary-Electro: #00786E; --Secondary-Light-Electro: #BFDDDB; --Primary-Gradient: linear-gradient(290deg, #006432 0%, #267D9E 100%); --Gradient-Sand: linear-gradient(135deg, #F7F6F2 5%, #E6E6D7 100%); --Gradient-Green: linear-gradient(139deg, #19AF23 0%, #006432 130%); --Gradient-Electro: linear-gradient(320deg, #006432 0%, #3882A6 100%); --Gradient-Black: linear-gradient(123deg, #4E4E3E 0%, #282819 100%); --Gradient-Product-Real: linear-gradient(90deg, #F7F6F2 0%, #E6E6D7 100%); --Gradient-Product: linear-gradient(180deg, #F7F6F2 0%, #E6E6D7 100%); --Shadow-White: box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); --Shadow-Dark: box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.15); --Shadow-Up: box-shadow: 0px -15px 30px 0px rgba(0, 0, 0, 0.05); --Secondary-Dark-Blue: #206985; --Secondary-Blue: #267D9E; --Secondary-Light-Blue: #3882A6; --Secondary-Red: #B90523; --Hover-on-Green: #5AD062; } /* ex-elements */ /** * Elements — base typography + common element/utility styles. * Split from definitions.css (remaster A2). Band 1 (after variables, before layout). * NOTE: colors/body/margins/buttons here move to layout.css in a later portion; kept * together now to preserve the exact cascade order (render-identical to definitions.css). */ /* Colors */ .color--black { color: var(--Neutrals-Black) } .color--dark-grey { color: var(--Neutrals-Dark-Grey) } .color--grey { color: var(--Neutrals-Grey) } .color--light-grey { color: var(--Neutrals-Light-Grey) } .color--dark-sand { color: var(--Neutrals-Dark-Sand) } .color--sand { color: var(--Neutrals-Sand) } .color--light-sand { color: var(--Neutrals-Light-Sand) } .color--white-sand { color: var(--Neutrals-White-Sand) } .color--white { color: var(--Neutrals-White) } .color--green { color: var(--Primary-Green) } .color--light-green { color: var(--Primary-Light-Green) } .color--electronics { color: var(--Secondary-Electronics) } /* Body styles */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; } html { min-height: 100%; height: 100%; } body { position: relative; width: 100%; min-width: 360px; min-height: 100vh; padding: 64px 0 0 0; margin: 0; background-color: var(--Neutrals-White); font-family: "open-sans", "Open Sans", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--Neutrals-Dark-Grey); overflow-anchor: none; overflow-y: scroll; overflow-x: clip; } body.no_scroll { position: fixed; left: 0; right: 0; width: 100%; } .seo--title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-style: normal; font-weight: 300; color: var(--Neutrals-Black); } h1 { font-size: 56px; line-height: 1.15; letter-spacing: -0.05em; } h2 { font-size: 48px; line-height: 1.17; letter-spacing: -0.04em; } h3 { font-size: 32px; line-height: 1.25; letter-spacing: -0.03em; } h4 { font-size: 24px; line-height: 1.33; letter-spacing: -0.02em; } h5 { font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; } h6 { font-size: 16px; line-height: 1.5; letter-spacing: 0; } .h1 { font-size: 56px; line-height: 1.15; letter-spacing: -0.05em; } .h2 { font-size: 48px; line-height: 1.17; letter-spacing: -0.04em; } .h3 { font-size: 32px; line-height: 1.25; letter-spacing: -0.03em; } .h4 { font-size: 24px; line-height: 1.33; letter-spacing: -0.02em; } .h5 { font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; } .h6 { font-size: 16px; line-height: 1.5; letter-spacing: 0; } @media (max-width: 768px) { h1 { font-size: 52px; } h2 { font-size: 44px; } h3 { font-size: 32px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } .h1 { font-size: 52px; } .h2 { font-size: 44px; } .h3 { font-size: 32px; } .h4 { font-size: 24px; } .h5 { font-size: 20px; } .h6 { font-size: 16px; } } @media (max-width: 450px) { h1 { font-size: 48px; } h2 { font-size: 40px; } h3 { font-size: 32px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } .h1 { font-size: 48px; } .h2 { font-size: 40px; } .h3 { font-size: 32px; } .h4 { font-size: 24px; } .h5 { font-size: 20px; } .h6 { font-size: 16px; } } /* Paragraphs */ p { font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5em; color: var(--Neutrals-Dark-Grey); } p.large, p.has-medium-font-size { font-size: 20px; font-style: normal; font-weight: 300; line-height: 1.5em; letter-spacing: -0.01em; color: var(--Neutrals-Dark-Grey); } p.small, p.has-small-font-size { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5em; /* color: var(--Neutrals-Grey); */ color: var(--Neutrals-Dark-Grey); } p.indent { padding-left: 36px; } /** List/Unordered */ ul { padding: 0; margin: 0; list-style: none; } ul li { position: relative; padding-left: 24px; margin-bottom: 0.25em; } ul li::before { content: ""; height: 7px; width: 7px; position: absolute; left: 0; top: 0.6em; border-radius: 4px; background-color: var(--Neutrals-Light-Grey); } /* Link/Regular */ a { outline: none; text-decoration: none; font-weight: 600; color: inherit; transition: color 0.2s ease; } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration: none; color: var(--Primary-Light-Green); } } a:focus { outline: none !important; box-shadow: none !important; } body.touch_device { -webkit-tap-highlight-color: rgba(25, 175, 35, 0.4); } /* Subcripts / Supercripts */ sup { vertical-align: baseline; position: relative; font-size: 0.7em; font-weight: 600; top: -0.4em; } sub { vertical-align: baseline; position: relative; font-size: 0.7em; font-weight: 600; bottom: -0.3em; } strong sup, strong sub, sup strong, sub strong { font-weight: 700; } p.large sup, p.has-medium-font-size sup { font-weight: 300; } :is(h1, h2, h3, .h1, .h2, .h3) sup, :is(h1, h2, h3, .h1, .h2, .h3) sub { font-weight: 300; } :is(h4, h5, h6, .h4, .h5, .h6) sup, :is(h4, h5, h6, .h4, .h5, .h6) sub { font-weight: 400; } /* Layout helpers */ .clear--float::after { content: ""; clear: both; display: table; } .flex--fit { display: block; flex: 10 0 auto; } .text--no_break { white-space: nowrap; } /** Margins */ .top--start { padding-top: 60px; margin-top: 0; } .top--0em { margin-top: 0 !important; } .top--0p25em { margin-top: 0.25em !important; } .top--0p5em { margin-top: 0.5em !important; } .top--0p75em { margin-top: 0.75em !important; } .top--1em { margin-top: 1em !important; } .top--1p5em { margin-top: 1.5em !important; } .top--2em { margin-top: 2em !important; } .top--2p5em { margin-top: 2.5em !important; } .top--3em { margin-top: 3em !important; } .top--4em { margin-top: 4em !important; } .top--5em { margin-top: 5em !important; } .bottom--0em { margin-bottom: 0 !important; } .bottom--0p25em { margin-bottom: 0.25em !important; } .bottom--0p5em { margin-bottom: 0.5em !important; } .bottom--0p75em { margin-bottom: 0.75em !important; } .bottom--1em { margin-bottom: 1em !important; } .bottom--1p5em { margin-bottom: 1.5em !important; } .bottom--2em { margin-bottom: 2em !important; } .bottom--2p5em { margin-bottom: 2.5em !important; } .bottom--3em { margin-bottom: 3em !important; } .bottom--4em { margin-bottom: 4em !important; } .bottom--5em { margin-bottom: 5em !important; } .bottom--end { padding-bottom: 120px; margin-bottom: 0; } .margin--title { margin-top: 52px; padding-top: 0; margin-bottom: 58px; padding-bottom: 0; } @media (max-width: 768px) { .top--start { padding-top: 48px; } .bottom--end { padding-bottom: 80px; } .margin--title { margin-top: 40px; margin-bottom: 46px; } } /** Width utils (U2: single global source; replaced pages.css .ex--document .width--small and the never-used wp-blocks p--limited) */ .width--small { max-width: 1024px !important; } /** Buttons */ .button--text { display: inline-block; font-size: 12px; font-style: normal; font-weight: 600; line-height: 22px; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s ease; } .button--text.button--white { color: var(--Neutrals-White); } @media (hover: hover) and (pointer: fine) { .button--text.button--white:hover { color: var(--Hover-on-Green); } } /** Button Round. Default color: --Neutrals-White * button--round button--green button--arrow button--arrow_down */ .button--round { display: inline-block; height: 40px; width: 40px; border: none; border-radius: 20px; cursor: pointer; outline: none; background-color: var(--Neutrals-White); background-position: center; background-repeat: no-repeat; } .button--small { height: 32px; width: 32px; border-radius: 16px; } .button--round.button--arrow, .button--round.button--arrow_down, .button--round.button--arrow_up { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .button--round.button--arrow_down { transform: rotate(90deg); } .button--round.button--arrow_up { transform: rotate(-90deg); } .button--round.button--arrow_left { transform: rotate(180deg); } .button--round.button--close { background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E"); } .button--round.button--green { background-color: var(--Primary-Light-Green); } .button--round.button--green.button--arrow, .button--round.button--green.button--arrow_down, .button--round.button--green.button--arrow_up { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .button--round.button--green.button--close { background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E"); } /** Buttons. Default color: --Primary-Light-Green * button--item button--white button--arrow button--arrow_down button--arrow_up */ .buttons--container .button--item:not(:last-child) { margin-right: 16px; } .button--item { display: inline-block; position: relative; height: 48px; padding: 18px 32px 18px 32px; font-family: "open-sans", sans-serif; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: nowrap; border: none; border-radius: 24px; cursor: pointer; outline: none; background: var(--Primary-Light-Green); } .button--item span { display: inline-block; overflow: hidden; text-overflow: ellipsis; color: var(--Neutrals-White); } .button--item.button--icon { padding-right: 58px; } .button--item.button--icon::after { position: absolute; content: ""; top: 9px; right: 9px; width: 30px; height: 30px; border: none; border-radius: 15px; background-color: var(--Primary-Green-40); background-position: center; background-repeat: no-repeat; } .button--item.button_icon--arrow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .button--item.button_icon--arrow_down::after { transform: rotate(90deg); } .button--item.button_icon--arrow_up::after { transform: rotate(-90deg); } .button--item.button_icon--close::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E"); } .button--item.button_icon--load_more::after { transform: rotate(45deg); } .button--item.button--white { background: var(--Neutrals-White); } .button--item.button--white span { color: var(--Neutrals-Black); } .button--item.button--white.button--icon::after { background-color: var(--Neutrals-White-Sand); } .button--item.button--white.button_icon--arrow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .button--item.button--white.button_icon--close::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.2;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E"); } .button--item.button--grey { background: var(--Neutrals-Light-Sand); } .button--item.button--grey span { color: var(--Neutrals-Light-Grey); } .button--item.button--grey.button--icon::after { background-color: var(--Neutrals-Dark-Sand); } /* Additions for the AG Link block (2026-07-27). Purely additive — every rule above is untouched, so all existing buttons render byte-identically. * * ICON PLACEMENT. `.button--icon` keeps its historical meaning: icon on the RIGHT, with * padding-right 58px and the ::after pinned right. A left-icon button carries BOTH * `.button--icon` (so it inherits the shared circle, the per-colour circle backgrounds and * the arrow images) AND `.button--icon_left`, which mirrors only the padding and the side. * That is why nothing above needed editing. * The block also emits `.button--icon_right` / `.button--icon_none` as markers; neither * needs a rule — right IS `.button--icon`, and "none" simply omits the icon classes. */ .button--item.button--icon_left { padding-left: 58px; padding-right: 32px; } .button--item.button--icon_left::after { left: 9px; right: auto; } /* ARROW DIRECTION. `button_icon--arrow` already points right, so arrow_right is the unrotated form; stated explicitly so it cannot pick up a rotation from a sibling class. */ .button--item.button_icon--arrow_right::after { transform: none; } .button--item.button_icon--arrow_left::after { transform: rotate(180deg); } /* Green is the `.button--item` default background. The class exists so the AG Link colour field has an explicit home and keeps working if that default ever changes. */ .button--item.button--green { background: var(--Primary-Light-Green); } .button--send_request { padding-right: 58px; } .button--send_request::after { position: absolute; content: ""; top: 9px; right: 9px; width: 30px; height: 30px; border: none; border-radius: 15px; background-color: var(--Primary-Green-40); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .button--send_request.button--action_button { position: fixed; display: none; right: 50px; bottom: 24px; z-index: 500; transition: top 1s, bottom 1s; } .button--send_request.button--action_button.button--show_action { display: block; z-index: 1500; } .button--send_request.button--action_button.button--footer_fix { position: absolute; top: -72px; bottom: unset; z-index: 500; } @media (max-width: 1024px) { .button--send_request.button--action_button { right: 34px; } } @media (max-width: 768px) { .button--send_request.button--action_button { right: 18px; } } @media (max-width: 450px) { .button--send_request.button--action_button { right: 10px; bottom: 16px; } } @media (hover: hover) and (pointer: fine) { .button--item.button--icon:hover::after, .button--send_request:hover::after { background-color: var(--Primary-Green); } .button--item.button--white.button--icon:hover::after { background-color: var(--Neutrals-Medium-Sand); } .button--item.button--grey:hover span { color: var(--Neutrals-Black); } .button--item.button--grey.button--icon:hover::after { background-color: var(--Neutrals-Light-Grey); } } /* ex-layout */ /* 1512 1280 1024 768 450 */ /* 1150 630 */ :root { --Mobile-Padding: 24px; } /** Section */ .section--viewport { width: 1290px; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; } .section--small, .section--viewport_small { width: 850px; max-width: 100%; } .section--screen, .section--full_width { width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .section--viewport_fixed { width: 1072px; max-width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; } .section--viewport .section--screen, .section--viewport .section--full_width { width: calc(100vw - var(--Scroll-Width)); margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2); margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2); } .section--window_height { min-height: 100vh; } @media (max-width: 1512px) { .section--viewport { width: calc(100% - 128px); } .section--viewport_fixed { width: 1072px; } .section--viewport .section--screen { width: calc(100vw - var(--Scroll-Width)); } } @media (max-width: 1200px) { .section--viewport_fixed { width: calc(100% - 128px); } } @media (max-width: 1024px) { .section--viewport, .section--viewport_fixed { width: calc(100% - 96px); } } @media (max-width: 768px) { .section--viewport, .section--viewport_fixed { width: calc(100% - 64px); } } @media (max-width: 450px) { .section--viewport, .section--viewport_fixed { width: calc(100% - 48px); } } /** Header block */ .header { position: fixed; z-index: 1000; top: 0; width: 100%; } .header--dropped .header { z-index: 1600; } .header--menu_container { background: var(--Neutrals-White); position: relative; z-index: 10; /* */ --SVG-Black-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%23282819' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* */ --SVG-Light-Green-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%2319AF23' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .compensate-for-scrollbar .header--menu_container { margin-right: var(--Scroll-Width); } .header--shadow { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 999; pointer-events: none; mix-blend-mode: multiply; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); } .header--dropped .header--shadow { z-index: 1599; } .compensate-for-scrollbar .header--shadow { margin-right: var(--Scroll-Width); } .header--menu_wrap { display: flex; flex-wrap: nowrap; } /** Header Logo */ .header--logo { display: block; flex: 0 0 auto; margin-right: 100px; padding: 16px 0; } .header--logo img { display: block; height: 32px; width: auto; } @media (max-width: 768px) { .header--logo { margin-right: 70px; } } @media (max-width: 450px) { .header--logo { margin-right: 40px; } } /** Header Top Menu */ .header--top_menu { flex: 1 0 auto; display: flex; justify-content: flex-start; flex-wrap: nowrap; } .menu--item_lvl0 .menu--top_handler { display: block; padding: 26px 12px; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--Neutrals-Black); } .menu--item_lvl0.menu--has_children .menu--top_handler { padding-right: 29px; } .menu--item_lvl0 .menu--top_handler span { display: block; position: relative; transition: color .1s ease; } .menu--item_lvl0.menu--has_children .menu--top_handler span::after { position: absolute; content: ""; top: 0; right: -17px; width: 12px; height: 12px; background-position: center; background-repeat: no-repeat; background-image: var(--SVG-Black-Arrow); transform: rotate(90deg); transition: transform .3s ease-in-out 0s, top 0.3s ease-in-out 0s; } @media (hover: hover) and (pointer: fine) { .menu--item_lvl0 .menu--top_handler:hover span { color: var(--Primary-Light-Green); } .menu--item_lvl0.menu--has_children .menu--top_handler:hover span::after { background-image: var(--SVG-Light-Green-Arrow); } } .menu--item_lvl0.menu--has_children.menu--item_dropped .menu--top_handler span::after { top: -1px; transform: rotate(-90deg); } .menu--item_lvl0.menu--current_item .menu--top_handler, .menu--item_lvl0.menu--current_ancestor .menu--top_handler { color: var(--Primary-Light-Green); } .menu--item_lvl0.menu--has_children.menu--current_item .menu--top_handler span::after, .menu--item_lvl0.menu--has_children.menu--current_ancestor .menu--top_handler span::after { background-image: var(--SVG-Light-Green-Arrow); } /** Divider Item */ .menu--divider { flex: 1 1 auto; margin-right: 18px; } /** Search Item */ .menu--search .menu--top_handler { padding: 22px 12px; font-size: 0; } .menu--search .menu--top_handler span { width: 20px; height: 20px; } .menu--search.menu--item_dropped .menu--search_closed, .menu--search:not(.menu--item_dropped) .menu--search_open { display: none; } .menu--search .svg-close, .menu--search .svg-search { stroke:var(--Neutrals-Black); stroke-linecap:round; } @media (hover: hover) and (pointer: fine) { .menu--search .menu--top_handler:hover .svg-search, .menu--search .menu--top_handler:hover .svg-close { stroke: var(--Primary-Light-Green); } } /** Burger handler */ .menu--burger { display: none; } .menu--burger button { border: none; cursor: pointer; outline: none; background-color: transparent; } .menu--burger .menu--top_handler { padding: 22px 20px 22px 12px; font-size: 0; height: 100%; width: 52px; position: relative; } .menu--burger .menu--top_handler span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1.2px; background: var(--Neutrals-Black); transform: translateX(-50%) translateY(-50%); } .menu--burger .menu--top_handler span:before, .menu--burger .menu--top_handler span:after { content: ""; position: absolute; right: 0; margin: auto; height: 1.2px; background: var(--Neutrals-Black); opacity: 1; transition-property: transform, width; transition-duration: 0.1s; transition-timing-function: ease-in-out; transition-delay: 0s; } .menu--burger .menu--top_handler span:before { top: -8px; width: 17px; } .menu--burger .menu--top_handler span:after { bottom: -8px; width: 12px; } .menu--burger.menu--item_dropped .menu--top_handler span { background-color: transparent; } .menu--burger.menu--item_dropped .menu--top_handler span:before { transform: rotate(-45deg); top: 0; width: 20px; } .menu--burger.menu--item_dropped .menu--top_handler span:after { transform: rotate(45deg); bottom: 0; width: 20px; } @media (hover: hover) and (pointer: fine) { .menu--burger .menu--top_handler:hover span:before, .menu--burger .menu--top_handler:hover span:after { background: var(--Primary-Light-Green); } .menu--burger:not(.menu--item_dropped) .menu--top_handler:hover span { background: var(--Primary-Light-Green); } } /** Drop Container */ .menu--drop_container { display: none; background: var(--Neutrals-White-Sand); box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15); padding-left: 40px; padding-right: 40px; margin-left: -28px; } .menu--drop_container.menu--drop_open { display: block; position: absolute; top: 64px; overflow-y: auto; overflow-x: clip; } .menu--drop_container .simplebar-track.simplebar-vertical { width: 4px; right: 4px; top: 4px; bottom: 8px; background-color: var(--Neutrals-Light-Sand); } .menu--drop_container .simplebar-scrollbar { background-color: var(--Neutrals-Dark-Sand); } .menu--drop_container .simplebar-scrollbar:before { display: none; } .menu--drop_category .menu--drop_container, .menu--drop_full_width .menu--drop_container { left: 0; right: 0; padding-left: 0; padding-right: 0; margin-left: 0; } .menu--content_container { position: relative; display: inline-block; opacity: 0; padding: 28px 0; transition: opacity 0.2s ease; } .menu--drop_category .menu--content_container, .menu--drop_full_width .menu--content_container { padding-bottom: 48px; } .menu--drop_full_width.menu--drop_fixed .menu--content_container::after { position: absolute; content: ""; top: 28px; bottom: 48px; left: -28px; width: 1px; background: var(--Neutrals-Medium-Sand); } .no_scroll .menu--drop_category .menu--content_container { padding-bottom: 32px; } .menu--content_container .button--text { display: block; font-weight: 700; padding-top: 6px; padding-bottom: 6px; color: var(--Neutrals-Grey); } .menu--drop_category .menu--content_container .button--text { padding-top: 10px; padding-bottom: 10px; } .menu--drop_category .menu--content_container .menu--category_bottom { padding-bottom: 12px; } .menu--content_container .menu--item_lvl1.menu--current_item, .menu--content_container .menu--item_lvl1.menu--current_ancestor, .menu--content_container .menu_drop--content .menu--item_lvl1.menu--current_item, .menu--content_container .menu_drop--content .menu--item_lvl1.menu--current_ancestor, .menu--content_container .menu--item_lvl3.menu--current_item .menu--title { color: var(--Primary-Light-Green); } @media (max-width: 768px) { .menu--drop_category .menu--content_container .button--text { line-height: 18px; } .menu--drop_category .menu--content_container .menu--category_bottom { padding-bottom: 14px; } } /** Drop with Content */ .menu--drop_category .menu--content_container { display: flex; } .menu_drop--content { position: relative; flex: 0 0 auto; width: 25%; min-height: 200px; padding-right: 42px; padding-bottom: 0; display: flex; flex-direction: column; } .menu--drop_category .menu--category_space { flex-grow: 1; min-height: 54px; } .menu--drop_category .menu--item_lvl1 { padding-top: 12px; padding-bottom: 12px; transition: color .1s ease; } .menu_drop--content .button--text.button--content { position: absolute; bottom: 0; left: 0; padding-top: 13px; padding-bottom: 13px; } .menu_drop--content .button--item { position: absolute; bottom: 0; left: -10px; } .menu_drop--content .button--item.button--white span { color: var(--Neutrals-Grey); } .menu_drop--content .menu--item_lvl1.menu--item_selected { color: var(--Neutrals-Black); } @media (hover: hover) and (pointer: fine) { .menu_drop--content .button--item.button--white:hover span { color: var(--Neutrals-Black); } .menu--content_container .menu_drop--content .menu--item_lvl1:hover { color: var(--Primary-Light-Green); } } .menu_drop--items { flex-grow: 1; position: relative; padding-left: 80px; padding-bottom: 54px; } .menu_drop--items::before { position: absolute; content: ""; top: -36px; bottom: -48px; left: 0; width: 100vw; background: rgba(255, 255, 255, 0.70); border-top: 1px solid var(--Neutrals-White-Sand); } .no_scroll .menu--content_container .menu_drop--items::before { bottom: -32px; } .menu_drop--item { position: relative; display: none; height: 100%; } .menu_drop--item.menu--target_selected { display: block; } .menu_drop--item .button--item { position: absolute; bottom: -54px; left: 0; } .menu_drop--category { display: flex; flex-wrap: wrap; align-content: flex-start; margin-left: -16px; margin-right: -16px; margin-bottom: 24px; } .menu_drop--category:last-child { margin-bottom: 0; } .menu_drop--category_title { display: block; font-size: 24px; font-style: normal; font-weight: 300; line-height: 24px; letter-spacing: -0.02em; margin-bottom: 24px; color: var(--Neutrals-Grey); transition: color .15s ease; } .menu_drop--item .menu--item_lvl3 { width: 33.3333%; padding-left: 16px; padding-right: 16px; margin-bottom: 16px; } .menu_drop--item .menu--item_lvl3 .menu--title { font-size: 16px; font-style: normal; line-height: 1.5; font-weight: 600; color: var(--Neutrals-Black); margin-bottom: 4px; transition: color .15s ease; } .menu_drop--item .menu--item_lvl3 .small { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5em; color: var(--Neutrals-Grey); } @media (hover: hover) and (pointer: fine) { .menu_drop--item .menu--item_lvl3:hover p { color: var(--Neutrals-Black); } .menu_drop--item .menu--item_lvl3:hover .menu--title { color: var(--Primary-Light-Green); } } @media (max-width: 1024px) { .menu_drop--content { width: 28%; } .menu_drop--item .menu--item_lvl3 { width: 50%; } } @media (max-width: 768px) { .menu_drop--content { width: 32%; } .menu_drop--items { padding-left: 48px; } } /** Search Drop Container */ .menu--search .menu--content_container { display: block; padding-bottom: 64px; } .menu--search_form { display: flex; flex-wrap: nowrap; margin-top: 24px; } .menu--search_form .menu--search_input { flex-grow: 1; margin-right: 42px; } .menu--search_input { height: 48px; width: 100%; padding: 16px 0 16px; font-family: "open-sans", sans-serif; font-size: 16px; line-height: 1; font-weight: 400; color: var(--Neutrals-Grey); background-color: var(--Neutrals-White-Sand); border: none; border-bottom: 1px solid var(--Neutrals-Light-Grey); outline: none; } .menu--search_input::placeholder { color: var(--Neutrals-Light-Grey); opacity: 0.7; } .menu--search_input::-webkit-input-placeholder { color: var(--Neutrals-Light-Grey); opacity: 0.7; } .menu--search_input::-moz-placeholder { color: var(--Neutrals-Light-Grey); opacity: 0.7; } .menu--search_input::-ms-input-placeholder { color: var(--Neutrals-Light-Grey); opacity: 0.7; } /* Autofill partial tuning */ .menu--search_input:autofill, .menu--search_input:autofill::first-line, .menu--search_input:autofill:hover, .menu--search_input:autofill:focus, .menu--search_input:autofill:active, .menu--search_input:-webkit-autofill, .menu--search_input:-webkit-autofill::first-line, .menu--search_input:-webkit-autofill:hover, .menu--search_input:-webkit-autofill:focus, .menu--search_input:-webkit-autofill:active { box-shadow: 0 0 0 50px var(--Neutrals-White-Sand) inset !important; -webkit-box-shadow: 0 0 0 50px var(--Neutrals-White-Sand) inset !important; color: var(--Neutrals-Grey) !important; -webkit-text-fill-color: var(--Neutrals-Grey) !important; font-family: "open-sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; } .menu--search_form .button--item { flex-grow: 0; } @media (max-width: 530px){ .menu--search .menu--content_container { padding-bottom: 48px; } .menu--search_form { flex-wrap: wrap; margin-top: 16px; } .menu--search_form .menu--search_input { width: 100%; margin-right: 0; } .menu--search_form .button--item { width: 100%; margin-top: 32px; } } /** Burger menu dropdown */ .burger--menu { display: block; padding: 0; width: 100%; } .menu--burger .menu--drop_container { right: 0; padding-left: 0; padding-right: 0; margin-left: 0; background: var(--Neutrals-Medium-Sand); } .menu--burger .menu--drop_container .simplebar-track.simplebar-vertical { width: 4px; right: 2px; top: 2px; bottom: 2px; background-color: var(--Neutrals-Light-Sand); } .menu--burger .burger--handler { display: block; padding: 0; border-top: 1px solid var(--Neutrals-Light-Sand); } .menu--burger .burger--handler.burger_item--has_childs, .menu--burger .burger--handler.burger--language { display: flex; flex-wrap: nowrap; } .menu--burger .burger--handler.burger--complex_handler .menu--handler { display: flex; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; padding-right: 0; } .burger--complex_left { flex: 1 1 auto; padding-top: 12px; padding-bottom: 12px; } .burger--complex_right { display: block; width: 86px; flex: 0 0 auto; position: relative; cursor: pointer; } .burger--complex_right img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .menu--item_lvl0 > .burger--handler, .burger--handler.burger--language { background: var(--Neutrals-White-Sand); } .menu--burger .burger--item { padding: 0; } .burger--handler .menu--handler { display: block; padding: 22px 24px; flex: 1 1 auto; } .burger--handler.menu--item_lvl3 .menu--handler { padding-top: 12px; padding-bottom: 12px; padding-right: 72px; } .burger--handler .menu--handler span { display: block; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--Neutrals-Black); transition: color .1s ease; } .burger--handler .menu--handler p { font-size: 15px; line-height: 1.2; color: var(--Neutrals-Grey); margin-top: 0.5em; } .burger--handler .burger--expand { display: none; width: 100px; padding-right: 64px; flex: 0 0 auto; border-left: 1px solid var(--Neutrals-Light-Sand); cursor: pointer; } .burger--handler.burger_item--has_childs .burger--expand { display: block; } .burger--expand span { display: block; height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-image: var(--SVG-Black-Arrow); transform: rotate(90deg); transition: transform .3s ease-in-out 0s; } .burger--item_expanded > .burger--handler .burger--expand span { transform: rotate(-90deg); } .burger--item_expanded.menu--item_lvl0 > .burger--handler { background: var(--Neutrals-Light-Sand); } .burger--item_expanded.menu--item_lvl0 > .burger--handler .burger--expand { border-left-color: var(--Neutrals-White); } .burger--children_container { display: none; background: var(--Neutrals-White); } .burger--item.menu--item_lvl1 > .burger--children_container { margin-left: 24px; } @media (hover: hover) and (pointer: fine) { .burger--menu .menu--handler:hover span { color: var(--Primary-Light-Green); } .burger--menu .burger--expand:hover span { background-image: var(--SVG-Light-Green-Arrow); } } .burger--language { border-bottom: 1px solid var(--Neutrals-Light-Sand); } .burger--language .menu--handler:not(:last-child) { border-right: 1px solid var(--Neutrals-Light-Sand); } .burger--divider { height: 52px; background: var(--Neutrals-Medium-Sand); border-top: 1px solid var(--Neutrals-Light-Sand); } .burger--item.menu--current_item > .burger--handler .menu--handler span, .burger--item.menu--current_ancestor > .burger--handler .menu--handler span, .burger--handler.menu--current_item > .menu--handler span, .burger--language .menu--current_item span { color: var(--Primary-Light-Green); } /* Move items to burger */ .burger--menu .menu--item_lvl0 { display: none; } .header--menu_wrap { margin-right: -12px; } @media (max-width: 1200px) { .header--top_menu { justify-content: flex-end; } .menu--divider { display: none; } } @media (max-width: 1100px) { .header--menu_wrap { margin-right: -12px; } .menu--company, .menu--contacts, .menu--language { display: none; } .menu--burger { display: block; } .burger--menu .menu--company, .burger--menu .menu--contacts { display: block; } .menu--burger .menu--drop_container { width: 50vw; } } @media (max-width: 1024px) { .burger--handler .burger--expand { width: 84px; padding-right: 48px; } } @media (max-width: 850px) { .menu--support { display: none; } .burger--menu .menu--support { display: block; } } @media (max-width: 768px) { .burger--handler .burger--expand { width: 70px; padding-right: 28px; } .burger--complex_right { width: 92px; } } @media (max-width: 700px) { .menu--products, .menu--applications { display: none; } .burger--menu .menu--products, .burger--menu .menu--applications { display: block; } .menu--burger .menu--drop_container { width: 100%; } .burger--handler > .menu--handler { padding-left: 32px; } } @media (max-width: 450px){ .burger--handler .burger--expand { width: 64px; padding-right: 20px; } .burger--complex_right { width: 78px; } .burger--handler > .menu--handler { padding-left: var(--Mobile-Padding); } } /** Content block */ .content { width: 100%; min-height: 100vh; position: relative; } /** Content heading section */ .section--heading { background-color: var(--Primary-Dark-Green); background-size: cover; background-repeat: no-repeat; background-position-x: right; } .content_heading--container { padding: 72px 0; } .content_heading--content { display: inline-block; max-width: 50%; padding: 48px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(60px); backdrop-filter: blur(60px); } .content_heading--content h1 { color: var(--Neutrals-White-Sand); line-height: 1.1; } .content_heading--content p { margin-top: 32px; color: var(--Neutrals-White-Sand); } .content_heading--content .buttons--container { margin-top: 48px; } @media (max-width: 1280px) { .content_heading--content { max-width: 70%; } } @media (max-width: 1024px) { .content_heading--container { padding: 48px 0; } .content_heading--content h1 { font-size: 48px; } } @media (max-width: 768px) { .content_heading--container { padding: 32px 0; } .content_heading--content { padding: 32px; max-width: 100%; } } @media (max-width: 450px) { .content_heading--content h1 { font-size: 42px; } .content_heading--content .buttons--container { margin-top: 32px; } .content_heading--content .button--item { width: 100%; } } .section--container { width: 100%; } /** Footer block */ .footer { position: relative; width: 100%; background: var(--Gradient-Electro); padding-top: 64px; padding-bottom: 24px; } .footer--container { position: relative; } .footer--anchor { position: absolute; top: -40px; right: -6px; display: inline-flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; column-gap: 16px; min-height: 40px; min-width: 40px; } .footer--logo { display: inline-block; } .footer--logo img { display: block; height: 32px; width: auto; } .footer--menu { margin-top: 52px; display: flex; flex-wrap: nowrap; margin-left: -32px; margin-right: -32px; } .footer_menu--column { flex: 1 1 auto; padding-left: 32px; padding-right: 32px; } .footer_menu--column .button--text { display: block; line-height: 22px; margin-top: 8px; padding-top: 4px; padding-bottom: 4px; transition: color .1s ease; } .footer_menu--column .button--text.menu--item_lvl0 { font-size: 16px; font-weight: 400; line-height: 26px; text-transform: none; letter-spacing: 0.06em; margin-bottom: 22px; margin-top: 0; } .footer--address { font-size: 16px; font-weight: 300; line-height: 26px; letter-spacing: 0.04em; white-space: nowrap; color: var(--Neutrals-White); display: block; margin-top: 12px; } .footer--address.menu--item_lvl0 { margin-top: 0; padding-top: 4px; } .footer--social_block { white-space: nowrap; margin-top: 46px; } .footer--social { display: inline-block; width: 24px; margin-right: 18px; } .footer--social:last-child { margin-right: 0; } .footer--social_icon { fill: var(--Neutrals-White); } @media (hover: hover) and (pointer: fine) { .footer--anchor:hover .button--text { color: var(--Hover-on-Green); } .footer--anchor:hover .button--round { background-color: var(--Hover-on-Green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .footer--address.footer--email:hover { color: var(--Hover-on-Green); } .footer--social:hover .footer--social_icon { fill: var(--Hover-on-Green); } } .footer_column--bottom { display: none; } .footer--bottom { display: flex; flex-wrap: nowrap; align-items: baseline; margin-top: 56px; } .footer--copyright { flex-grow: 1; font-size: 13px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--Neutrals-White); opacity: 0.8; } .footer--bottom_links { flex-grow: 0; margin-left: 32px; } @media (max-width: 1280px) { .footer--menu { margin-left: -24px; margin-right: -24px; } .footer_menu--column { padding-left: 24px; padding-right: 24px; } } @media (max-width: 1100px) { .footer--anchor { right: -3px; } } @media (max-width: 1024px) { .footer--menu { flex-wrap: wrap; } .footer_menu--column { width: 33.33333%; } .footer_column--1 { order: 1; margin-bottom: 64px; } .footer_column--3 { order: 2; margin-bottom: 64px; } .footer_column--address { order: 3; margin-bottom: 64px; } .footer_column--2 { order: 4; } .footer_column--4 { order: 5; } .footer_column--bottom { order: 6; display: block; } .footer_column--bottom .button--text:first-child { margin-top: 0; } .footer--bottom_links { display: none; } } @media (max-width: 768px) { .footer_column--3, .footer_column--4 { width: 20%; } } @media (max-width: 650px) { .footer_menu--column { width: 50%; margin-bottom: 64px; } .footer_column--1 { order: 1; } .footer_column--2 { order: 2; } .footer_column--3 { order: 4; } .footer_column--4 { order: 3; } .footer_column--address { order: 5; margin-bottom: 0; } .footer_column--bottom { order: 6; } .footer_menu--column .button--text { line-height: 20px; } .footer_menu--column .button--text.menu--item_lvl0 { margin-bottom: 16px; } } @media (max-width: 450px) { .footer { padding-top: 46px; } .footer--anchor { top: -5px; } .footer--anchor_text { display: none; } .footer_menu--column .button--text.menu--item_lvl0 { margin-bottom: 10px; font-size: 15px; font-weight: 600; text-transform: uppercase; } .footer_menu--column .button--text.menu--item_lvl1 { display: none; } .footer_menu--column { margin-bottom: 0; } .footer_menu--column.footer_column--address { width: 100%; margin-top: 32px; margin-bottom: 46px; } .footer--fax { margin-top: 0; } .footer_menu--column.footer_column--bottom { width: 100%; } .footer--bottom { margin-top: 36px; } } /** * FancyBox */ .fancybox-caption__body > * { font-size: 14px; color: #FFFFFF; } .fancybox-caption__body h4 { margin-bottom: 3px; } .fancybox-caption__body .fancy_pop--description { font-size: 12px; font-style: italic; margin-top: 2px; } @media (max-width: 785px) { .fancybox-caption__body > * { font-size: 13px; } .fancybox-caption__body .fancy_pop--description { font-size: 11px; } } /* FancyBox: Remove background from all buttons */ .fancybox-navigation .fancybox-button { background: transparent; } /* FancyBox: Navigation arrows */ .fancybox-navigation .fancybox-button div { padding: 6px; background: transparient; border-radius: 16px; transition: opacity .2s; border: 1px solid var(--Neutrals-Medium-Grey); opacity: .7; } .fancybox-navigation .fancybox-button:not([disabled]):hover div { opacity: .9; background: var(--Neutrals-White-Sand); border-color: var(--Neutrals-White-Sand); } .fancybox-navigation .fancybox-button[disabled] { color: var(--Neutrals-Dark-Grey); } .fancybox-navigation .fancybox-button:not([disabled]) { color: var(--Neutrals-Sand); } .fancybox-navigation .fancybox-button:not([disabled]):hover { color: var(--Primary-Green); } /* .h4 { font-size: 24px; font-weight: normal; line-height: 32px; letter-spacing: -0.02em; color: var(--Neutrals-Black); } @media screen and (max-width: 767px) { .h4 { font-size: 20px; line-height: 28px; } } */ .disabled, [disabled]:not(.brlbs-cmpnt-list-item) { pointer-events: none; opacity: .3; } .section--page-heading { padding-top: 72px; padding-bottom: 72px; background: var(--Gradient-Sand); } body:not(.single-news) .section--page-heading { background: var(--Gradient-Electro); position: relative; } body:not(.single-news) .section--page-heading:after { content: ''; position: absolute; left: 0; right: 0; top: 0; background: url("data:image/svg+xml;utf8,") no-repeat 0% 50%; bottom: 0; background-size: 75% 100%; } body:not(.single-news) .section--page-heading h1 { color: var(--Neutrals-White); position: relative; z-index: 1; } /** Header */ .section--page_header { background-color: var(--Neutrals-Black); background-size: cover; background-repeat: no-repeat; min-height: 432px; background-position: 50% 70%; } .page--header_container { padding: 72px 0; } .page--header_content { max-width: 550px; padding: 48px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(120px); backdrop-filter: blur(120px); } .page--header_content h1 { color: var(--Neutrals-White); } .page--header_content p { margin-top: 24px; color: var(--Neutrals-Light-Sand); } @media screen and (max-width: 767px) { .page--header_container { padding: 0; min-height: 338px; } .section--page_header .section--viewport { padding: 0; } .page--header_content { padding: 36px 24px 42px; border: 0; max-width: none; } .section--page-heading { padding-top: 32px; padding-bottom: 32px; } } /** Debug screen */ .debug--screen { position: fixed; top: 0; left: 0; padding: 5px 10px; background-color: var(--Neutrals-White-Sand); font-size: 13px; font-weight: 400; color: var(--Neutrals-Dark-Grey); z-index: 50000; } pre { font-size: 15px; line-height: 1.2; } /** WP Columns */ .wp-block-columns { box-sizing: border-box; display: flex; flex-wrap: nowrap; gap: 80px; } .wp-block-columns { align-items: normal } .wp-block-columns.are-vertically-aligned-top { align-items: flex-start } .wp-block-columns.are-vertically-aligned-center { align-items: center } .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end } .wp-block-column { flex-basis: 30% !important; flex-grow: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .wp-block-column.is-vertically-aligned-top { align-self: flex-start } .wp-block-column.is-vertically-aligned-center { align-self: center } .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end } .wp-block-column.is-vertically-aligned-stretch { align-self: stretch } .wp-block-column.is-vertically-aligned-bottom, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-top { width: 100% } @media (max-width: 1024px) { .wp-block-columns.columns--text_image, .wp-block-columns.columns--image_text { flex-wrap: wrap !important; gap: 48px; } .wp-block-columns.columns--text_table, .wp-block-columns.columns--table_table { flex-wrap: wrap !important; gap: 24px; } .columns--text_image .wp-block-column, .columns--image_text .wp-block-column, .columns--text_table .wp-block-column, .columns--table_table .wp-block-column { flex-basis: 100% !important; } .wp-block-columns.columns--swap .wp-block-column:last-child { order: 1; } .wp-block-columns.columns--swap .wp-block-column:first-child { order: 2; } } @media (max-width: 768px) { .wp-block-columns { flex-wrap: wrap !important; } .wp-block-columns .wp-block-column { flex-basis: 100% !important; } .wp-block-columns.columns--list_list { gap: 54px; } .wp-block-columns.columns--text_image, .wp-block-columns.columns--image_text { gap: 32px; } .wp-block-columns.columns--double_list, .wp-block-columns.columns--text_text { gap: 0; } .wp-block-columns.columns--double_list .wp-block-column:last-child { padding-top: 0; } } @media (max-width: 450px) { .wp-block-columns.columns--text_image, .wp-block-columns.columns--image_text { gap: 24px; } } /** WP Video */ .wp-block-video { box-sizing: border-box } .wp-block-video video { height: auto; vertical-align: middle; width: 100% } @supports (position: sticky) { .wp-block-video [poster] { object-fit:cover } } .wp-block-video.aligncenter { text-align: center } .wp-block-video :where(figcaption) { margin-bottom: 1em; margin-top: .5em } /** WP Spacer */ .wp-block-spacer{clear:both} /** WP Math */ .wp-block-math { font-size: 20px; } /* ag-accord */ /** * Agvila Accordion Block */ .ag_accord--container { display: block; transition: padding-top 0.4s; } .ag_accord--container.ag_accord--no_transition { transition: none; } .ag_accord--container + .ag_accord--container.ag_accord--active.ag_accord--expanded { padding-top: 40px; } :not(.ag_accord--container) + .ag_accord--container { padding-top: 0; } .ag_ctrl--block + .ag_accord--container { margin-top: 28px; } @media (max-width: 450px) { .ag_ctrl--block + .ag_accord--container { margin-top: 16px; } } .ag_accord--active > .ag_accord--head { border-top: 1px solid transparent; border-bottom: 1px solid transparent; transition: border-color 0.3s; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } @media (max-width: 1024px) { .ag_accord--active > .ag_accord--head { margin-left: -48px; margin-right: -48px; padding-left: 48px; padding-right: 48px; } } @media (max-width: 768px) { .ag_accord--active > .ag_accord--head { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; } } @media (max-width: 450px) { .ag_accord--active > .ag_accord--head { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } } .ag_accord--design_lvl1.ag_accord--active > .ag_accord--head { border-bottom-color: var(--Primary-Green); } .ag_accord--design_lvl1.ag_accord--active.ag_accord--expanded + .ag_accord--design_lvl1.ag_accord--active:not(.ag_accord--expanded) > .ag_accord--head, .ag_accord--design_headless.ag_accord--active.ag_accord--expanded + .ag_accord--design_lvl1.ag_accord--active:not(.ag_accord--expanded) > .ag_accord--head { border-top-color: var(--Primary-Green); } .ag_accord--design_lvl1.ag_accord--active > .ag_accord--head svg .ag_accord--line { stroke: var(--Primary-Green); } .ag_accord--design_lvl2.ag_accord--active > .ag_accord--head { border-top-color: var(--Neutrals-Light-Sand); border-bottom-color: var(--Neutrals-Light-Sand); } .ag_accord--lvl2.ag_accord--active.ag_accord--expanded > .ag_accord--head { border-top-color: transparent; } .ag_accord--lvl2.ag_accord--active:not(.ag_accord--expanded) + .ag_accord--design_lvl2.ag_accord--active > .ag_accord--head { border-top-color: transparent; } .ag_accord--design_lvl1.ag_accord--active.ag_accord--expanded > .ag_accord--top_margin_0x > .ag_accord--design_lvl2.ag_accord--active.ag_accord--expanded { margin-top: 30px; } .ag_accord--design_lvl3.ag_accord--active > .ag_accord--head { border-top-color: var(--Neutrals-Light-Sand); border-bottom-color: var(--Neutrals-Light-Sand); } .ag_accord--lvl3.ag_accord--active.ag_accord--expanded > .ag_accord--head { border-top-color: transparent; } .ag_accord--lvl3.ag_accord--active:not(.ag_accord--expanded) + .ag_accord--design_lvl3.ag_accord--active > .ag_accord--head { border-top-color: transparent; } .ag_accord--design_lvl2.ag_accord--active.ag_accord--expanded > .ag_accord--top_margin_0x > .ag_accord--design_lvl3.ag_accord--active.ag_accord--expanded { margin-top: 30px; } .ag_accord--container.ag_accord--active.ag_accord--on_show > .ag_accord--head { border-top-color: transparent !important; } /** * Head border overrides — the ACF "Top Border" field. Its stored values ARE these class * names, and ag-accordion.php whitelists them, so exactly one combination is always present. * * Default top_border + bottom_border → no rule matches, the design rules above rule * Top only closed top_closed + bottom_border → top hidden while expanded * Only when closed top_closed + bottom_closed → both hidden while expanded * Only bottom bottom_border → top hidden always (matched by ABSENCE) * * ⚠ Colour only, never `border: none` — the box is a permanent 1px transparent border set on * .ag_accord--active > .ag_accord--head, and removing it would shift the head by a pixel. * ⚠ !important is required, not lazy: the design rules that paint these borders reach (0,7,1) * with the sibling + :hover combinators. The on_show rule above uses it for the same reason. */ .ag_accord--top_closed.ag_accord--expanded > .ag_accord--head { border-top-color: transparent !important; } .ag_accord--container:not(.ag_accord--top_border):not(.ag_accord--top_closed) > .ag_accord--head { border-top-color: transparent !important; } .ag_accord--bottom_closed.ag_accord--expanded > .ag_accord--head { border-bottom-color: transparent !important; } .ag_accord--head .ag_accord--title { padding: 42px 0 16px 0; display: flex; flex-wrap: nowrap; gap: 40px; align-items: center; } .ag_accord--active > .ag_accord--head .ag_accord--title { padding: 26px 0 32px 0; } .ag_accord--head .ag_accord--name { display: block; flex-grow: 1; transition: color 0.4s; margin: 0; font-style: normal; font-weight: 300; } .ag_accord--head svg { margin-top: 6px; width: 28px; height: auto; flex: 0 0 auto; transition: stroke 0.4s, transform 0.4s; } .ag_accord--expanded > .ag_accord--head svg .ag_accord--vertical_line { display: none; } .ag_accord--active.ag_accord--expanded > .ag_accord--head svg { transform: rotate(180deg); } .ag_accord--active > .ag_accord--head .ag_accord--line { stroke: var(--Neutrals-Medium-Grey); } .ag_accord--design_lvl1 > .ag_accord--head .ag_accord--name { font-size: 42px; line-height: 1.17; letter-spacing: -0.04em; color: var(--Neutrals-Dark-Grey); } .ag_accord--design_lvl1.ag_accord--active > .ag_accord--head .ag_accord--name { font-size: 48px; letter-spacing: -0.04em; line-height: 1; color: var(--Primary-Green); } .ag_accord--design_lvl2 > .ag_accord--head .ag_accord--name { font-size: 32px; line-height: 1.25; letter-spacing: -0.03em; color: var(--Neutrals-Black); } .ag_accord--design_lvl2.ag_accord--active > .ag_accord--head .ag_accord--name { line-height: 1; color: var(--Neutrals-Dark-Grey); } .ag_accord--design_lvl2.ag_accord--design_lvl2_large > .ag_accord--head .ag_accord--name { font-size: 42px; letter-spacing: -0.04em; } .ag_accord--design_lvl3 > .ag_accord--head .ag_accord--name { font-size: 24px; line-height: 1.33; letter-spacing: -0.02em; color: var(--Neutrals-Black); } .ag_accord--design_lvl3.ag_accord--active > .ag_accord--head .ag_accord--name { line-height: 1; color: var(--Neutrals-Dark-Grey); } .ag_accord--design_lvl3 > .ag_accord--head .ag_accord--title { padding: 38px 0 12px 0; } .ag_accord--design_lvl3.ag_accord--active > .ag_accord--head .ag_accord--title { padding: 22px 0 28px 0; } .ag_accord--design_lvl3.ag_accord--active > .ag_accord--head .ag_accord--title svg { width: 24px; } .ag_accord--container.ag_accord--design_headless > .ag_accord--head { border-bottom-color: transparent; border-top-color: transparent; } .ag_accord--design_headless > .ag_accord--head .ag_accord--title { display: none; } @media (hover: hover) { .ag_accord--active > .ag_accord--head .ag_accord--title:hover > * { color: var(--Primary-Light-Green); } .ag_accord--active > .ag_accord--head .ag_accord--title:hover .ag_accord--line { stroke: var(--Primary-Light-Green); } .ag_accord--design_lvl1.ag_accord--active > .ag_accord--head:hover { border-bottom-color: var(--Primary-Light-Green); } .ag_accord--design_lvl1.ag_accord--active.ag_accord--expanded + .ag_accord--design_lvl1.ag_accord--active:not(.ag_accord--expanded) > .ag_accord--head:hover { border-top-color: var(--Primary-Light-Green); } } @media (max-width: 768px) { .ag_accord--design_lvl1.ag_accord--active > .ag_accord--head .ag_accord--name { font-size: 44px; } .ag_accord--design_lvl2.ag_accord--active > .ag_accord--head .ag_accord--name { font-size: 30px; } } @media (max-width: 450px) { .ag_accord--title svg { margin-top: 8px; width: 24px; } .ag_accord--design_lvl1.ag_accord--active > .ag_accord--head .ag_accord--name { font-size: 40px; } .ag_accord--design_lvl2.ag_accord--active > .ag_accord--head .ag_accord--name { font-size: 28px; } } .ag_accord--content { display: none; } .ag_accord--expanded > .ag_accord--content { display: block; /* padding-bottom: 30px; */ } .ag_accord--top_margin_0x { margin-top: 0; } .ag_accord--top_margin_025x { margin-top: 16px; } .ag_ctrl--block + .ag_accord--container.ag_accord--design_headless > .ag_accord--top_margin_025x { margin-top: 24px; } .ag_accord--top_margin_05x { margin-top: 36px; } .ag_accord--top_margin_10x { margin-top: 60px; } .ag_accord--top_margin_15x { margin-top: 90px; } .ag_accord--top_margin_20x { margin-top: 120px; } .ag_accord--bottom_margin_0x { margin-bottom: 0; } .ag_accord--bottom_margin_025x { margin-bottom: 8px; } .ag_accord--bottom_margin_05x { margin-bottom: 16px; } .ag_accord--bottom_margin_10x { margin-bottom: 36px; } .ag_accord--bottom_margin_15x { margin-bottom: 60px; } .ag_accord--bottom_margin_20x { margin-bottom: 90px; } .ag_accord--bottom_margin_30x { margin-bottom: 120px; } @media (max-width: 450px) { .ag_accord--top_margin_10x { margin-top: 50px; } .ag_accord--top_margin_15x { margin-top: 70px; } .ag_accord--top_margin_20x { margin-top: 90px; } .ag_accord--bottom_margin_05x { margin-bottom: 8px; } .ag_accord--bottom_margin_10x { margin-bottom: 10px; } .ag_accord--bottom_margin_15x { margin-bottom: 20px; } .ag_accord--bottom_margin_20x { margin-bottom: 30px; } .ag_accord--bottom_margin_30x { margin-bottom: 40px; } } /* ag-collection */ /** * AG Collection wrapper * Modes: show_all | load_more | scroll (Swiper 12) * Breakpoints: 450 / 768 / 1066 */ .acf-block-component .ag_collection--container * { box-sizing: border-box; } .ag_collection--container { width: 100%; } .ag_collection--content { display: flex; align-items: stretch; flex-direction: row; flex-wrap: wrap; gap: 30px; } .ag_collection--columns_1 .ag_collection--content, .ag_collection--columns_2 .ag_collection--content { gap: 40px; } .ag_collection--item { flex: 0 0 auto; } .ag_collection--columns_1 .ag_collection--item { width: 100%; } .ag_collection--columns_2 .ag_collection--item { width: calc(50% - 20px); } .ag_collection--columns_3 .ag_collection--item { width: calc(33.33333% - 20px); } @media (max-width: 1066px) { .ag_collection--columns_2 .ag_collection--content { gap: 30px; } .ag_collection--columns_2 .ag_collection--item, .ag_collection--columns_3 .ag_collection--item { width: calc(50% - 15px); } } @media (max-width: 768px) { .ag_collection--columns_2 .ag_collection--item, .ag_collection--columns_3 .ag_collection--item { width: 100%; } } @media (max-width: 450px) { .ag_collection--container.ag_collection--full_mobile { width: calc(100vw - var(--Scroll-Width)); margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2); margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2); } .ag_collection--full_mobile .ag_collection--content { gap: 46px; } } /* Load more classes */ .ag_collection--load_more .ag_collection--item { display: none; } .ag_collection--more { display: none; text-align: right; margin-top: 24px; margin-right: -3px; } .ag_collection--load_more .ag_collection--more { display: block; } .ag_collection--more button { min-width: 150px; } .acf-block-component .ag_collection--more button { pointer-events: none; } @media (min-width: 1067px) { .ag_collection--load_more .ag_collection--item.ag_collection--desktop { display: block; } .ag_collection--load_more .ag_collection--more.ag_collection--desktop { display: block; } } @media ( (min-width: 769px) and (max-width: 1066px) ) { .ag_collection--load_more .ag_collection--item.ag_collection--tablet { display: block; } .ag_collection--load_more .ag_collection--more.ag_collection--tablet { display: block; } } @media (max-width: 768px) { .ag_collection--load_more .ag_collection--item.ag_collection--mobile { display: block; } .ag_collection--load_more .ag_collection--more.ag_collection--mobile { display: block; } } @media (max-width: 450px) { .ag_collection--more { margin-right: 0; padding-right: 20px; } } /** * Scroll mode (Swiper 12, custom wrapper/slide classes — core rules replicated here; * Swiper's own CSS is never loaded) */ .ag_collection--scroll { position: relative; overflow-x: clip; touch-action: pan-y; } .ag_collection--scroll .ag_collection--content { flex-wrap: nowrap; gap: 0; /* Swiper spaceBetween margins replace the grid gap */ box-sizing: content-box; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); transform: translate3d(0, 0, 0); opacity: 0; } .ag_collection--scroll.swiper-initialized .ag_collection--content { opacity: 1; } .ag_collection--scroll .ag_collection--item { flex-shrink: 0; transition-property: transform; } /* Full Screen: container bleeds to the screen edges, content stays column-aligned; Swiper subtracts the padding, so slide math is identical to viewport mode. */ .ag_collection--scroll.ag_collection--full_screen { width: auto; margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2); margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2); padding-left: calc((100vw - var(--Scroll-Width) - 100%) / 2); padding-right: calc((100vw - var(--Scroll-Width) - 100%) / 2); } /* Wide on Mobile, scroll mode (<=450): slides span the full screen (±24px, the ag_image--size_vport pattern); padding 0 also cancels full_screen's restore when combined (wide_mobile). Controls re-inset to the content column. */ @media (max-width: 450px) { .ag_collection--scroll.ag_collection--full_mobile { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; padding-left: 0; padding-right: 0; } .ag_collection--scroll.ag_collection--full_mobile .ag_collection--scroll_controls { padding-left: 24px; padding-right: 24px; } } /* Scroll controls: bullets left, arrows + optional show-all right */ .ag_collection--scroll_controls { display: none; align-items: center; justify-content: space-between; margin-top: 24px; } @media (min-width: 1067px) { .ag_collection--scroll .ag_collection--scroll_controls.ag_collection--desktop { display: flex; } } @media ( (min-width: 769px) and (max-width: 1066px) ) { .ag_collection--scroll .ag_collection--scroll_controls.ag_collection--tablet { display: flex; } } @media (max-width: 768px) { .ag_collection--scroll .ag_collection--scroll_controls.ag_collection--mobile { display: flex; } } .ag_collection--bullets { display: flex; align-items: center; gap: 8px; min-width: 0; /* allow flex squeeze so JS can detect when bullets don't fit */ overflow: hidden; /* no-JS worst case: clip instead of overlapping the arrows */ } .ag_collection--bullets .swiper-pagination-bullet { display: block; flex: 0 0 auto; /* never squeeze bullets — the JS fit-check measures true width */ width: 8px; height: 8px; border-radius: 4px; background-color: var(--Neutrals-Light-Sand); cursor: pointer; transition: background-color 0.2s; } .ag_collection--bullets .swiper-pagination-bullet-active { background-color: var(--Neutrals-Sand); cursor: default; } .ag_collection--arrows { display: flex; align-items: center; gap: 16px; margin-left: auto; /* keeps arrows right when the gauge is disabled */ flex-shrink: 0; /* arrows never squeeze — the gauge yields instead */ padding-left: 50px; /* minimal distance to the gauge; mirrored in the JS fit-check */ } .ag_collection--arrows button { display: block; padding: 0; border: none; background: none; cursor: pointer; outline: none; } /* Button states: active = Light-Sand circle, Light-Grey icon hover = Black icon (bg unchanged) disabled = same colors as active, faded */ .ag_collection--arrows button .button--round { display: block; background-color: var(--Neutrals-Light-Sand); } .ag_collection--arrow_prev .button--round { transform: scaleX(-1); } /* active idle icon (hover falls back to the dark default from elements.css) */ .ag_collection--arrows .ag_collection--arrow:not(:hover) .button--round.button--arrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23929283;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } /* disabled buttons: Swiper sets the attribute; layout.css `[disabled]` styles it */ .ag_collection--bullets.swiper-pagination-lock, .ag_collection--arrows .swiper-button-lock { display: none; } /* "Read all" link (scroll_show_link) — first item inside .ag_collection--arrows (link | grid | prev | next); styled like the section/catalog title-link. */ .ag_collection--arrows .ag_collection--show_link { margin: 0 22px; } .ag_collection--show_link { flex-shrink: 0; font-size: 12px; font-style: normal; font-weight: 700; line-height: 2.5em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--Neutrals-Dark-Grey); outline: none; text-decoration: none; } @media (max-width: 768px) { .ag_collection--arrows .ag_collection--show_link { margin-right: 12px; } } /* Editor preview: static scroll layout, no interaction (no Swiper in the iframe). Restores visibility + grid gaps that the frontend hands over to Swiper. */ .acf-block-component .ag_collection--scroll .ag_collection--content { opacity: 1; gap: 30px; } .acf-block-component .ag_collection--columns_1.ag_collection--scroll .ag_collection--content, .acf-block-component .ag_collection--columns_2.ag_collection--scroll .ag_collection--content { gap: 40px; } .acf-block-component .ag_collection--scroll_controls button, .acf-block-component .ag_collection--show_link, .acf-block-component .ag_collection--bullets .swiper-pagination-bullet { pointer-events: none; /* clicks fall through and select the block */ } /* Preview mock buttons — self-contained (no elements.css in the editor iframe) */ .ag_collection--preview_button { display: block; height: 40px; width: 40px; border-radius: 20px; background-color: var(--Neutrals-Light-Sand); background-position: center; background-repeat: no-repeat; } .ag_collection--preview_arrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23929283;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .ag_collection--preview_prev { transform: scaleX(-1); } .ag_collection--preview_controls .ag_collection--grid_icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E"); } /* show-all grid icon (dark base = hover state; Light-Grey when idle) */ .ag_collection--grid_icon { background-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E"); } .ag_collection--show_all_button:not(:hover) .ag_collection--grid_icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E"); } /* ag-apps */ .acf-block-component .ag_apps--container p { margin-top: 0; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5em; color: var(--Neutrals-Grey); } .ag_apps--item { display: block; width: 100%; height: 100%; position: relative; } .ag_apps--background .ag_apps--item { background: var(--Neutrals-White-Sand); transition: background-color .2s ease; } .ag_apps--negative .ag_apps--item { background: var(--Neutrals-White); } .ag_apps--border .ag_apps--item { border: 1px solid var(--Neutrals-Light-Sand); transition: border-color .2s ease; } /** Highlight Current (2026-07-29) — the card pointing at the post being viewed. * A 1:1 port of .ex_apps--active (ex-products-apps.css:495) so an AG grid marks the current * item exactly as the applications-class grids do. * * ⚠ The background was Neutrals-Light-Sand here while nothing emitted the class. Light Sand * is the HOVER colour in this file, so an active card was indistinguishable from a hovered * one; Medium Sand is the reference value and the only one that reads as "current". * * ⚠ !important is load-bearing, not laziness — and it is what the ex rules use. The hover * block below is (0,5,1) (`.ag_apps--hover.ag_apps--background :not(…) > a.ag_apps--item:hover`) * against (0,2,0) here, so without it a hovered current card repaints and its arrow returns. */ .ag_apps--active .ag_apps--item { background: var(--Neutrals-Medium-Sand) !important; cursor: default; } .ag_apps--active .ag_apps--description p { color: var(--Neutrals-Dark-Grey); } .ag_apps--active .ag_apps--text .ag_apps--button { display: none !important; } .ag_apps--image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .ag_apps--border .ag_apps--image { width: calc(100% + 2px); left: -1px; position: relative; } .ag_apps--text { width: 100%; padding: 24px 0; } .ag_apps--text_padded .ag_apps--text { padding: 28px 32px 32px; } .ag_apps--content .ag_apps--text .ag_apps--title { font-size: 26px; font-style: normal; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; color: var(--Neutrals-Black); margin-top: 0; margin-bottom: 16px; } .ag_collection--columns_2 .ag_apps--text .ag_apps--title { font-size: 28px; } .ag_apps--text .ag_apps--description p { margin-bottom: 1em; } .ag_apps--text .ag_apps--button { display: none; position: absolute; bottom: 16px; right: 16px; } @media (hover: hover) and (pointer: fine) { .ag_apps--hover.ag_apps--background :not(.ag_apps--text_container) > a.ag_apps--item:hover { background-color: var(--Neutrals-Light-Sand); } .ag_apps--hover.ag_apps--border :not(.ag_apps--text_container) > a.ag_apps--item:hover { border-color: var(--Neutrals-Medium-Sand); } a.ag_apps--item:hover .ag_apps--title { color: var(--Neutrals-Black); } a.ag_apps--item:hover .ag_apps--description p { color: var(--Neutrals-Dark-Grey); } .ag_apps--hover :not(.ag_apps--text_container) > a.ag_apps--item:hover .ag_apps--button { display: block; } .ag_apps--hover:not(.ag_apps--background) a.ag_apps--item:hover .ag_apps--button { background-color: var(--Neutrals-Light-Sand); } } @media (max-width: 1066px) { .ag_apps--text_padded .ag_apps--text { padding: 24px 28px 32px; } .ag_apps--content .ag_apps--text .ag_apps--title { font-size: 26px; } } @media (max-width: 450px) { .ag_apps--content .ag_apps--text { padding: 24px 24px 32px; } .ag_apps--content .ag_apps--text .ag_apps--title { margin-bottom: 16px; } .ag_apps--text .ag_apps--button { right: 19px; } } /** Text Card */ .ag_apps--text_container .ag_apps--item { padding: 32px 0; } .ag_apps--text_padded .ag_apps--text_container .ag_apps--item { padding: 32px; } .ag_apps--text_container .ag_apps--item :is(h3, .h3), .ag_apps--text_container .ag_apps--item :is(h4, .h4), .ag_apps--text_container .ag_apps--item :is(h5, .h5) { font-size: 26px; font-style: normal; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; color: var(--Neutrals-Black); margin-top: 0; margin-bottom: 24px; } .ag_apps--text_container .ag_apps--item ul { padding: 0; margin: 0; list-style: none; } .ag_apps--text_container .ag_apps--item ul li { position: relative; padding-left: 36px; margin-bottom: 1em; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--Neutrals-Grey); } .ag_apps--text_container .ag_apps--item ul li::before { content: ""; height: 14px; width: 14px; position: absolute; left: 0; top: 5px; border-radius: 4px; background-color: var(--Neutrals-Sand); } @media (max-width: 1066px) { .ag_apps--text_container .ag_apps--item { padding: 32px 0; } .ag_apps--text_padded .ag_apps--text_container .ag_apps--item { padding: 32px 28px; } } @media (max-width: 450px) { .ag_apps--text_container .ag_apps--item { padding: 28px 0; } .ag_collection--full_mobile .ag_apps--text_container .ag_apps--item { padding: 28px 24px; } .ag_apps--text_padded .ag_apps--text_container .ag_apps--item { padding: 28px 24px; } } /* ag-tabs-control */ /** Scroll control */ .ag_ctrl--scroll_content { width: 100%; overflow-x: scroll; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .ag_ctrl--scroll_content::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .ag_ctrl--scroll_arrow { position: absolute; display: none; width: 40px; top: 0; bottom: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; background: var(--Neutrals-Light-Sand); } /* Show an arrow only when there is actually hidden content in that direction (scroll_visible). Copying the legacy ex-tabs rule: the arrow's solid sand block must NOT sit over the first/last tab at rest — otherwise, with no title (padding-left:0), the left arrow masks the first tab (e.g. "ABOUT" -> "OUT"). */ .ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible { display: block; } .ag_ctrl--scroll_arrow::after { position: absolute; content: ""; top: 15px; right: 0; width: 32px; height: 32px; border: none; border-radius: 16px; background-color: var(--Neutrals-Sand); background-position: center; background-repeat: no-repeat; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, background-color 0.2s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } .ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible::after { opacity: 1; visibility: visible; } .ag_ctrl--scroll_arrow div { content: ""; position: absolute; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } .ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible > div { opacity: 1; visibility: visible; } .ag_ctrl--scroll_arrow > div { left: -100%; background: linear-gradient(to right, rgba(230,230,215,0), rgba(230,230,215,1)); } .ag_ctrl--scroll_right { right: 0; } .ag_ctrl--scroll_left { left: 0; transform: scaleX(-1); } @media (hover: hover) and (pointer: fine) { .ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible:hover::after { background-color: var(--Neutrals-White); } } /** AG Tabs Controller */ .ag_ctrl--block { position: sticky; width: 100%; padding-top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; z-index: 1500; } /* Disable all transitions during layout changes (orientation/resize) */ /* Don't disable display property changes for burger menu */ .ag_ctrl--no_transition *:not(.ag_ctrl--tabs_container), .ag_ctrl--no_transition *::before, .ag_ctrl--no_transition *::after { transition: none !important; } .ag_ctrl--block.ag_ctrl--on_poster:not(.ag_ctrl--burger_mode ) { margin-top: -64px; } .ag_ctrl--sticked .ag_ctrl--block { padding-top: 64px; } .ag_ctrl--sticked .ag_ctrl--block.ag_ctrl--title_top { padding-top: 107px; } .ag_ctrl--shadow { position: fixed; top: 117px; width: 100%; height: 10px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4); display: none; z-index: 1400; } .ag_ctrl--title_top .ag_ctrl--shadow { top: 160px; } .ag_ctrl--sticked:not(.ag_table--sticked) .ag_ctrl--shadow { display: block; } .ag_ctrl--container { background: var(--Neutrals-Light-Sand); z-index: 1500; overflow: hidden; width: 100%; max-width: calc(100vw - var(--Scroll-Width, 0px)); top: 64px; height: 64px; } /* Allow burger dropdown to be visible */ .ag_ctrl--burger_mode .ag_ctrl--container { overflow: visible; } /* Prevent overflow on very narrow screens */ @media (max-width: 500px) { .ag_ctrl--container { max-width: 100%; overflow: hidden; } .ag_ctrl--burger_mode .ag_ctrl--container { overflow: visible; } } .ag_ctrl--block.ag_ctrl--title_top .ag_ctrl--container { height: 107px; } .ag_ctrl--sticked .ag_ctrl--container { position: fixed; } body:not(.ag_ctrl--sticked) .ag_ctrl--ribbon_white .ag_ctrl--container { background: var(--Neutrals-White); } /* Tabs controller sections */ .ag_ctrl--content { display: flex; justify-content: flex-start; flex-wrap: nowrap; position: relative; max-width: 100%; /* overflow: hidden; */ } .ag_ctrl--title_top .ag_ctrl--content { flex-wrap: wrap; } /* Allow burger dropdown overflow on narrow screens */ @media (max-width: 500px) { .ag_ctrl--burger_mode .ag_ctrl--content { overflow: visible; } } /* Title section */ .ag_ctrl--title { display: none; flex: 0 0 auto; padding: 17px 44px 21px 0; font-size: 26px; font-weight: 300; font-style: normal; line-height: 26px; letter-spacing: -0.02em; white-space: nowrap; color: var(--Neutrals-Black); visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out; } .ag_ctrl--title_ribbon .ag_ctrl--title { display: block; } .ag_ctrl--title_ribbon.ag_ctrl--ready .ag_ctrl--title { visibility: visible; opacity: 1; } .ag_ctrl--title_top .ag_ctrl--title { padding-bottom: 0; width: 100%; } /* Tabs section, scrolled */ .ag_ctrl--tabs_container { display: none; flex: 1 1 auto; position: relative; min-width: 0; visibility: hidden; opacity: 0; padding-left: 40px; padding-right: 40px; } /* Enable smooth width transitions for tabs when CTA animates - only after ready */ .ag_ctrl--ready.ag_ctrl--cta_transition .ag_ctrl--tabs_container { transition: flex-basis var(--cta-transition-time, 300ms) ease-in-out, opacity 0.2s ease-in-out; } .ag_ctrl--tabs_ribbon .ag_ctrl--tabs_container { display: block; } .ag_ctrl--tabs_ribbon.ag_ctrl--ready .ag_ctrl--tabs_container { visibility: visible; opacity: 1; } .ag_ctrl--tabs_ribbon:not(.ag_ctrl--title_ribbon) .ag_ctrl--tabs_container { padding-left: 0; } .ag_ctrl--tabs { display: flex; justify-content: flex-start; flex-wrap: nowrap; } .ag_ctrl--tab_item { display: block; flex: 0 0 auto; padding: 20px 18px; font-size: 12px; font-style: normal; font-weight: 700; line-height: 24px; letter-spacing: 0.08em; text-decoration: none; /* color: var(--Neutrals-Light-Grey); */ color: var(--Neutrals-Medium-Grey); white-space: nowrap; text-transform: uppercase; transition: color 0.2s ease; } /* No title: pull the first tab flush to the content boundary (aligns with the page H1 below). Mirrors ex-tabs .ex_ctrl--tab_first. */ .ag_ctrl--tabs_ribbon:not(.ag_ctrl--title_ribbon) .ag_ctrl--tab_item.ag_ctrl--tab_first { padding-left: 2px; } .ag_ctrl--block .ag_ctrl--tab_item { /* color: var(--Neutrals-Light-Grey); */ color: var(--Neutrals-Medium-Grey); } .ag_ctrl--tab_item.ag_ctrl--item_active { /* color: var(--Neutrals-Black); */ /* color: var(--Primary-Dark-Green); */ color: var(--Black); } .ag_ctrl--tab_item.ag_ctrl--link_cta { display: none; padding-top: 8px; padding-bottom: 8px; } /* CTA link only visible in burger mode, not in ribbon mode */ .ag_ctrl--cta_burger .ag_ctrl--link_cta { display: block; } .ag_ctrl--cta_burger .ag_ctrl--link_cta .button--send_request { margin: 0; } .ag_ctrl--cta_burger .ag_ctrl--tab_item.ag_ctrl--link_cta { padding: 15px 12px 13px; text-align: center; } @media (hover: hover) and (pointer: fine) { .ag_ctrl--tab_item:hover { color: var(--Light-Green); } /* .ag_ctrl--tab_item.ag_ctrl--item_active:hover { color: var(--Neutrals-Black); } */ } /* Burger section */ .ag_ctrl--burger_container { display: none; flex: 1 1 auto; position: relative; width: 10%; cursor: pointer; } .ag_ctrl--burger_mode .ag_ctrl--burger_container { display: flex; justify-content: flex-end; flex-wrap: nowrap; } .ag_ctrl--burger_target { flex: 1 1 auto; width: 100%; } .ag_ctrl--burger_target { padding: 20px 0 20px 0; font-size: 14px; font-style: normal; font-weight: 700; line-height: 24px; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; color: var(--Neutrals-Black); } .ag_ctrl--title_ribbon .ag_ctrl--burger_target { text-align: right; } .ag_ctrl--title_top .ag_ctrl--burger_target { text-align: left; } .ag_ctrl--burger_target.ag_ctrl--target_dimmed { color: var(--Neutrals-Medium-Grey); } .ag_ctrl--burger_icon { flex: 0 0 auto; width: 64px; padding: 16px 0 16px 32px; margin-right: -4px; } .ag_ctrl--burger_icon span { display: block; width: 32px; height: 32px; border: none; border-radius: 16px; background-color: var(--Neutrals-White); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23282819;%7D %3C/style%3E%3Ccircle class='st0' cx='3.266' cy='10' r='2'/%3E%3Ccircle class='st0' cx='10.223' cy='10' r='2'/%3E%3Ccircle class='st0' cx='16.734' cy='10' r='2'/%3E%3C/svg%3E%0A"); transition: transform .3s ease-in-out 0s; } body:not(.ag_ctrl--sticked) .ag_ctrl--ribbon_white .ag_ctrl--burger_icon span { background-color: var(--Neutrals-Light-Sand); } @media (hover: hover) and (pointer: fine) { .ag_ctrl--burger_container:hover .ag_ctrl--burger_icon span { background-color: var(--Neutrals-Sand); } } .ag_ctrl--burger_pointer { display: none; position: absolute; height: 15px; width: 15px; bottom: 0; right: 12px; background-position: center; background-repeat: no-repeat; /* */ background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,0L0,15h15V0z' fill='%23F7F6F2'/%3E%3C/svg%3E"); } .ag_ctrl--burger_open .ag_ctrl--burger_pointer { display: block; } .ag_ctrl--burger_mode .ag_ctrl--tabs_container { display: none; position: absolute; width: auto; overflow-y: auto; right: -20px; top: 64px; background: var(--Neutrals-White-Sand); border-radius: 16px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); opacity: 1; visibility: visible; } .ag_ctrl--burger_mode.ag_ctrl--burger_open .ag_ctrl--tabs_container { display: block; padding-left: 0; padding-right: 0; } .ag_ctrl--title_top.ag_ctrl--burger_mode .ag_ctrl--tabs_container { top: 107px; } .ag_ctrl--burger_mode .ag_ctrl--tabs_container .ag_ctrl--scroll_arrow { display: none; } .ag_ctrl--burger_mode .ag_ctrl--tabs { display: block; overflow: unset; scrollbar-width: auto; -ms-overflow-style: unset; } .ag_ctrl--burger_mode .ag_ctrl--tabs::-webkit-scrollbar { display: initial; } .ag_ctrl--burger_mode .ag_ctrl--tab_item { padding: 15px 48px 13px; } .ag_ctrl--burger_mode .ag_ctrl--tab_item:not(:first-child) { border-top: 1px solid var(--Neutrals-Medium-Sand); } @media (max-width: 450px) { .ag_ctrl--burger_icon { width: 56px; padding-left: 24px; } .ag_ctrl--burger_mode .ag_ctrl--tabs_container { right: -12px; } } /* CTA section */ .ag_ctrl--cta_container { flex: 0 0 auto; padding: 8px 0 8px 0; max-width: 0; max-height: 64px; opacity: 0; visibility: hidden; } .ag_ctrl--burger_mode .ag_ctrl--cta_container { display: none; } /* Enable smooth transitions - only after ready to avoid initial animation */ .ag_ctrl--ready.ag_ctrl--cta_transition .ag_ctrl--cta_container { transition: max-width var(--cta-transition-time, 300ms) ease-in-out, opacity var(--cta-transition-time, 300ms) ease-in-out, padding-left var(--cta-transition-time, 300ms) ease-in-out, visibility 0s linear var(--cta-transition-time, 300ms); } .ag_ctrl--cta_ribbon .ag_ctrl--cta_container { display: flex; } .ag_ctrl--cta_ribbon.ag_ctrl--ready .ag_ctrl--cta_container { visibility: visible; } .ag_ctrl--cta_ribbon.ag_ctrl--cta_visible .ag_ctrl--cta_container { max-width: 250px; padding-left: 44px; opacity: 1; transition-delay: 0s; overflow: visible; } .ag_ctrl--cta_ribbon .ag_ctrl--cta_container .button--send_request { margin-right: -6px; min-width: 150px; white-space: nowrap; } @media (max-width: 900px) { .ag_ctrl--cta_ribbon.ag_ctrl--cta_visible .ag_ctrl--cta_container { max-width: 220px; } } /* Force hide tabs and CTA in ribbon on narrow screens to prevent distortion */ @media (max-width: 500px) { .ag_ctrl--tabs_ribbon .ag_ctrl--tabs_container, .ag_ctrl--cta_ribbon .ag_ctrl--cta_container { display: none !important; } } /* ── Hide Title on Mobile (ACF `settings > hide_title_on_mobile`) ───────────────────────── When the burger row cannot hold title + label side by side, the ribbon drops the title from the bar instead of going two-line, and shows it as the first dropdown row. The two-line layout stays as the last resort — see AG_RibbonController.resolveTitleMode(). */ /* (0,3,0) so it beats `.ag_ctrl--title_ribbon .ag_ctrl--title { display: block }` (0,2,0) on specificity rather than on source order. */ .ag_ctrl--block.ag_ctrl--title_hidden .ag_ctrl--title { display: none; } /* ⚠ Deliberately NOT an `.ag_ctrl--tab_item`. AG_TabsController measures every `.ag_ctrl--tab_item` for contentWidth/minContentWidth and iterates them for the gauge and the scroll-into-view, so a burger-only row carrying that class would register as a phantom 0-width tab (it is display:none while the widths are taken) and skew all three. It therefore restates the burger item's own padding/type instead of inheriting it. */ .ag_ctrl--burger_title_item { display: none; } .ag_ctrl--burger_mode.ag_ctrl--title_hidden .ag_ctrl--burger_title_item { display: block; padding: 15px 48px 13px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--Black); } .ag_ctrl--burger_mode.ag_ctrl--title_hidden .ag_ctrl--burger_title_item:hover { color: var(--Light-Green); } /* The row below it is a real tab item, and its `:not(:first-child)` border already draws the separator — so this row must not add one of its own. */ /* ex-wp-blocks */ /** * wp-blocks.css — generic Gutenberg content styling (CSS remaster M3, band 30). * Successor of gb-styles.css: headings/paragraph margins, * wp-block-columns variants, nested lists. (margin-- spacing utils retired at * U1 margin-unify — content renamed to the global bottom--/top-- utils in * elements.css.) Scope :is(.ex--page, .ex--post) * replaces .gb--styles (equal specificity 0,1,1) — the M1 ContentClasses tiers * provide the classes on #content (front) / root container (editor). * Consumers migrate one template per portion (M4); gb-styles.css stays frozen * for the rest. NOT copied here: .section--header hero (live on search/landing * templates — moves at their slot) and .gb--warranty/.gb--sale_conditions * (currently DEAD — template-default never enqueued gb-styles; M6 decides). * TODO Track H: the columns !importants exist to beat Gutenberg inline * flex-basis — re-audit per template before dropping any of them. */ /** Headings */ :is(.ex--page, .ex--post) h2 { color: var(--Neutrals-Dark-Grey); margin-bottom: 42px; } :is(.ex--page, .ex--post) h3 { margin-bottom: 24px; } :is(.ex--page, .ex--post) h4 { margin-bottom: 16px; } :is(.ex--page, .ex--post) h5 { margin-bottom: 8px; } @media (max-width: 768px) { :is(.ex--page, .ex--post) h2 { margin-bottom: 36px; } } /** Paragraphs */ :is(.ex--page, .ex--post) p { margin-bottom: 1em; } /* Applications poster exception: on the apps views the poster sits OUTSIDE the old gb--styles wrappers, so its

never had the 1em (elements.css * reset → 0). Scoped per-CPT on purpose — tiny pages' posters DID have the 1em (poster inside the wrapper) and keep it. Design-intent match: news sets poster p bottom to 0 too. */ .ex--applications .poster--content p { margin-bottom: 0; } /* Same exception for the career page (remaster M7-3): its ex-poster description

sat outside the old gb--styles wrapper → never had the 1em. Scoped via the template-about_us content class (.poster--company) — among wp-blocks consumers only /career/ carries it. */ .poster--company .poster--content p { margin-bottom: 0; } /* (p--limited retired at U2 — DB-proven ZERO usage; the width job is done by the global .width--small util in elements.css.) */ /** * WP BLOCKS */ /** * wp-block-columns * * X.columns--text_text - two separate texts side by side * .columns--table_table - two tables side by side * .columns--list_list - two lists side by side * .columns--text_image, .columns--image_text - text & image * .columns--text_table, .columns--table_text - text & table * X.columns--text_list, .columns--list_text - text & list (== generic columns; * NO dedicated rules BY DESIGN — ruling 2026-07-11) * .columns--double_text - continuous text in two columns * .columns--double_list - continuous list in two columns * .columns--swap - swap columns on mobile */ :is(.ex--page, .ex--post) .wp-block-columns { gap: 80px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { gap: 50px; } :is(.ex--page, .ex--post) .wp-block-columns > .wp-block-column { flex-basis: 30% !important; } @media (max-width: 1024px) { :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { flex-wrap: wrap !important; gap: 48px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_table, :is(.ex--page, .ex--post) .wp-block-columns.columns--table_text, :is(.ex--page, .ex--post) .wp-block-columns.columns--table_table { flex-wrap: wrap !important; gap: 24px; } :is(.ex--page, .ex--post) .columns--text_image .wp-block-column, :is(.ex--page, .ex--post) .columns--image_text .wp-block-column, :is(.ex--page, .ex--post) .columns--text_table .wp-block-column, :is(.ex--page, .ex--post) .columns--table_text .wp-block-column, :is(.ex--page, .ex--post) .columns--table_table .wp-block-column { flex-basis: 100% !important; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image.columns--swap { gap: 24px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--swap .wp-block-column:last-child { order: 1; } :is(.ex--page, .ex--post) .wp-block-columns.columns--swap .wp-block-column:first-child { order: 2; } } @media (max-width: 768px) { :is(.ex--page, .ex--post) .wp-block-columns { flex-wrap: wrap !important; gap: 0; } :is(.ex--page, .ex--post) .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } :is(.ex--page, .ex--post) .wp-block-columns.columns--list_list, :is(.ex--page, .ex--post) .wp-block-columns.columns--table_table { gap: 54px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { gap: 32px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--double_list, :is(.ex--page, .ex--post) .wp-block-columns.columns--double_text { gap: 0; } :is(.ex--page, .ex--post) .wp-block-columns.columns--double_list .wp-block-column:last-child, :is(.ex--page, .ex--post) .wp-block-columns.columns--double_text .wp-block-column:last-child { padding-top: 0; } } @media (max-width: 450px) { :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { gap: 24px; } } :is(.ex--page, .ex--post) li ul { margin-top: 0.4em; margin-bottom: 1em; } :is(.ex--page, .ex--post) li ul li { padding-left: 48px; } :is(.ex--page, .ex--post) li ul li::before { height: 2px; width: 10px; left: 24px; top: 0.75em; border-radius: 1px; } /** * Features lists/columns — site-wide content component (user ruling 2026-07-11, * U1-c: features--* is a site-wide feature and lives with the wp-columns * redefinitions). Born in old products.css; the products CPT keeps its own * .ex--products-scoped copies (higher specificity — no conflict if co-loaded). * Self-contained (metrics + coloring); nested-list variants deliberately NOT * carried — only products content uses them, covered by library/products css. */ .features--column h2 { color: var(--Primary-Green); } .features--column ul li, ul.features--list li { position: relative; padding-left: 36px; margin-bottom: 1em; color: var(--Primary-Green); } .features--column ul li::before, ul.features--list li::before { content: ""; height: 14px; width: 14px; position: absolute; left: 0; top: 5px; border-radius: 4px; background-color: var(--Primary-Light-Green); } /** * Legacy block-section exceptions (U1-c, added with the about-us enqueue) — * these sections are styled by frozen slider.css (P10, shared — cannot re-band) * or by block css re-banded to P70 (ex-about / ex-history / ex-bottom-cta), and * the generics above must NOT restyle them: rules below pin the pre-wp-blocks * values. Equal-specificity ties resolve by in-file source order (these come * last). Each exception dies when its owner block migrates (E-slot/Collections). * Verified 2026-07-11: no other current wp-blocks consumer renders these * sections — the exceptions can only fire on about-us today. */ /* slider.css intro headings (frozen owner): pin margin, keep Black */ .section-slider-intro h2, .section-slider-s-intro h2 { margin-bottom: 56px; color: var(--Neutrals-Black); } /* clients/membership + cta h2 color: margins live in their P70 block css, but no legacy file ever set a color — keep Black */ :is(.section--clients, .section--cta) h2 { color: var(--Neutrals-Black); } /* history timeline h4s: ex-history.css (P70) styles .history-item-sm h4 (24px); any other h4 in the section was reset-0 — keep it so */ .history-intro h4 { margin-bottom: 0; } /* stories-intro cards: stories.css (P70) owns the real values; unstyled card h3/p were reset-0 — keep */ .section-stories-intro .story-item :is(h3, p) { margin-bottom: 0; } /* awards + cta paragraphs were reset-0; the real gaps come from higher-specificity .awards-item p+p and .section--cta .box p:not(:last-child) */ .awards-item p, .section--cta .box p { margin-bottom: 0; } /* ex-about-s block wrapper (frozen legacy block php emits product-flavored classes; the old products.css owned this rule — library/products css now loads only on product views): restore the section's closing gap, values byte-equal to the old file. Products carry their own identical copies. Dies at the ex-about-s E-slot. */ .section--product_content { margin-bottom: 100px; } @media (max-width: 630px) { .section--product_content { margin-bottom: 80px; } } /* ex-pages */ /** * pages.css — general .ex--page overrides + page-type layers (target band 50). * Born in remaster M6 from the live parts of page-default.css (deleted). * Enqueued by template-default.php only for now; grows as page templates migrate. * `.ex--document` = tier-1 marker for the plain document pages * (template-default.php — support / legal / info docs), emitted by ContentClasses. * Layering note: `.ex--document h2` deliberately TIES wp-blocks' h2 (0,1,1) and * wins by band order (50 > 30) — the page-type layer overriding the generic * layer is the band system working as designed. */ /* Scroll anchoring off — carried from page-default.css (body-level rule; applies wherever this file loads). */ body { overflow-anchor: none; } /** Document pages — h2 keeps the wider 56px rhythm (wp-blocks default is 42px) */ .ex--document h2 { margin-bottom: 56px; } @media (max-width: 768px) { .ex--document h2 { margin-bottom: 42px; } } /* (Spacing + width utils fully retired here: U1 renamed margin--0p5em/start/end content to the global bottom--0p5em / top--start / bottom--end utils; U2 promoted width--small to the global util set. Single source for all of them: elements.css. NB U1 adopted the posts start/end values: 56px→60px, @768 42px→48px.) */ /** Support page columns (wp-block-columns.columns--support). * The flex-basis guard undoes wp-blocks' generic 30%/100% !important on these * columns — they have always sized by content. Keep the guard ABOVE the @1024 * last-child rule: same specificity + !important, source order decides. */ .ex--document .wp-block-columns.columns--support { gap: 50px 40px; } .ex--document .wp-block-columns.columns--support > .wp-block-column { flex-basis: auto !important; } .ex--document .wp-block-columns.columns--support h4 { margin-bottom: 18px; font-size: 14px; font-weight: 600; line-height: 24px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--Neutrals-Black); } .ex--document .wp-block-columns.columns--support h5 { margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--Neutrals-Grey); text-transform: uppercase; } .ex--document .wp-block-columns.columns--support p { margin-bottom: 20px; } .ex--document .wp-block-columns.columns--support a { font-weight: 400; } @media (max-width: 1024px) { .ex--document .wp-block-columns.columns--support { flex-wrap: wrap !important; } .ex--document .wp-block-columns.columns--support > .wp-block-column:last-child { flex-basis: 100% !important; } } /** Warranty / Sales-conditions document rules (user decision 2026-07-11: * this trio stays live; the old group max-width was dropped — the pages' * own `width--small` markup covers the narrowing). Scoped by content classes * that live in those pages' Gutenberg markup. Their nested-list styling * (.gb--warranty li ul) is NOT duplicated here — wp-blocks' identical li ul * rules cover it. */ .gb--warranty h3, .gb--sale_conditions h3 { margin-top: 1.7em; } .gb--sale_conditions .group--shift { margin-left: 2em; } .gb--sale_conditions ul.list--none li::before { display: none; } /* ag-poster */ /* AG Poster (acf/ag-poster) — the page/section banner block. Self-contained: this is the * only stylesheet the block needs, and it depends on no page-level wrapper. * * Port of css/poster-section.css into the ag_poster--* namespace. The legacy EX Poster * keeps that file and its own markup — the two blocks share nothing: * * EX (css/poster-section.css) AG (here) * .section--poster → .ag_poster--container (root) * .poster--viewport → .ag_poster--inner (carries the width class) * .poster--container → .ag_poster--wrapper * .poster--content → .ag_poster--content * .poster--bg_* → .ag_poster--bg_* * .poster--textbg_* → .ag_poster--textbg_* * .poster--text_* → .ag_poster--text_* * .poster--no_text → .ag_poster--no_text * .poster--has_image → .ag_poster--has_image * .poster_image--object → .ag_poster--image_object * .poster_scenario--* → .ag_poster--scenario_* * * Deliberately NOT renamed, because they are global and arrive from outside the block: * section--full_width / section--viewport / section--viewport_fixed / section--viewport_small * (layout.css), buttons--container (elements.css), poster--company and * poster--viewport_large (page markers), single-applications (body class). * * Dropped: the `.section--container_width` rules. EX's `container` width mode has no width * declaration anywhere in the CSS and is used by zero of the 55 live EX Poster instances; * the AG group replaces it with `viewport`. * * Priority 70 — the block band, so this beats the wp-blocks.css content layer at band 30 * (owner ruling 2026-07-11). See conventions.md "Priority bands". * * ⚠ EDITOR PARITY. Registered shared+block, so it also loads inside the block editor * iframe — which does NOT load elements.css or wp-blocks.css * ([[editor-iframe-lacks-elements-css]]). Everything this block inherits from those on the * frontend is restated below and marked [inherited]; each restated value is the one that * actually wins on the front, so the frontend render is unchanged. */ /* [inherited] elements.css `* { box-sizing: border-box }`. NB no font-family anywhere in this file, on purpose: it INHERITS — from `body` on the front and from `.editor-styles-wrapper` (admin-assets.css) in the editor canvas. The only elements that must have it stated are form controls (input/textarea/select/button), which the UA gives its own font instead of inheriting; the request