/* 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-Dark-Grey); } 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; } .strong--medium strong, .strong--medium b { font-weight: 600; } /* 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); } /* Left-only sibling of .section--screen: the element's LEFT edge reaches the window edge while its right edge stays exactly where the layout already put it. Added 2026-09-10 for the AG Membership strip, whose right edge is owned by the certificate column beside it. ⚠ MARGIN ONLY, no width — deliberately. That is what makes it work on a FLEX ITEM as well as a block: a negative inline-start margin hands a flex item that much extra space, and on a `width: auto` block the auto width absorbs it. `.section--screen` can set a width because it is only ever used on block-level children. ⚠ The `100%` resolves against the CONTAINING BLOCK, so this reaches the window edge only while that box spans the content column — the same caveat `.section--screen` carries. Nest it deeper inside a narrower box and it under-shoots. */ .section--viewport .section--screen_left { margin-left: 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--small, .section--viewport_small { width: 850px; } .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: 768px) { .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: 768px) { .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; } /* 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 — every rule for the default WordPress blocks. Band 30, loaded on every page by * Ekspla.php right after layout.css (frontend only). Core-block base (columns, video, spacer, math), * the theme's extensions of them (columns--* variants, features--*), and the typography rhythm of the * heading / paragraph / list blocks. That rhythm is scoped to .content — the #content section — so the * header and footer stay out of it; .content does not exist in the editor canvas. * Per-CPT overrides come later in the cascade: css/posts.css (news, stories; band 50) and * library/products/products.css (products; band 60). * TODO Track H: the columns !importants exist to beat Gutenberg inline flex-basis — re-audit per * template before dropping any of them. */ /** Headings */ .content h2 { color: var(--Neutrals-Dark-Grey); margin-bottom: 42px; } .content h3 { margin-bottom: 24px; } .content h4 { margin-bottom: 16px; } .content h5 { margin-bottom: 8px; } @media (max-width: 768px) { .content h2 { margin-bottom: 36px; } } /** Paragraphs */ .content p { margin-bottom: 1em; } /* Poster exception: the company poster

(/career/, /about-us/ — page marker on #content or on the block root) never carried the 1em; news sets its poster p to 0 too. */ .poster--company .ag_poster--content p, .poster--company.ag_poster--container .ag_poster--content p { margin-bottom: 0; } /** Nested lists */ .content li ul { margin-top: 0.4em; margin-bottom: 1em; } .content li ul li { padding-left: 48px; } .content li ul li::before { height: 2px; width: 10px; left: 24px; top: 0.75em; border-radius: 1px; } /** * Columns — core base + the theme's variants (a class on the Columns block) * * .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 * .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 * .colums--image_mob - text & image, image 75% on 1024px */ .wp-block-columns { box-sizing: border-box; display: flex; flex-wrap: nowrap; 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-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%; } .wp-block-columns, .wp-block-columns.columns--text_text { gap: 80px; } .wp-block-columns.columns--text_image, .wp-block-columns.columns--image_text { gap: 50px; } .wp-block-columns > .wp-block-column { flex-basis: 30% !important; } @media (max-width: 1024px) { .wp-block-columns, .wp-block-columns.columns--text_text { gap: 64px; } .wp-block-columns.columns--text_image, .wp-block-columns.columns--image_text { flex-wrap: wrap !important; gap: 48px; } .wp-block-columns.colums--image_mob { gap: 36px; } .wp-block-columns.colums--image_mob .ag_image--figure { width: 75%; margin-left: auto; margin-right: auto; } .wp-block-columns.columns--text_table, .wp-block-columns.columns--table_text, .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_text .wp-block-column, .columns--table_table .wp-block-column { flex-basis: 100% !important; } .wp-block-columns.columns--text_image.columns--swap { gap: 24px; } .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, .wp-block-columns.columns--text_text, .wp-block-columns.columns--text_image, .wp-block-columns.columns--image_text { flex-wrap: wrap !important; gap: 32px; } .wp-block-columns.columns--list_list, .wp-block-columns.columns--table_table { gap: 52px; } .wp-block-columns.columns--double_list, .wp-block-columns.columns--double_text { gap: 0; } .wp-block-columns.colums--image_mob .ag_image--figure { width: 100%; } .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } .wp-block-columns.columns--double_list .wp-block-column:last-child, .wp-block-columns.columns--double_text .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; } } /** * Features lists/columns — site-wide content component (ruling 2026-07-11). Products keep their own * .ex--products-scoped copies in products.css (higher specificity — no conflict when co-loaded). * Nested-list variants deliberately NOT carried — only products content uses them. */ .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); } /** 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; } /** Spacer */ .wp-block-spacer { clear: both; } /** Math */ .wp-block-math { font-size: 20px; } /** * Legacy block exceptions — markup of not-yet-remastered blocks that the generics above must NOT * restyle; equal-specificity ties resolve by in-file order, so they stay last. Each goes when its * block is remastered. ⚠ A pin records what the OLD markup did — never copy its value into a remaster. */ /* ex-about-s block wrapper (frozen legacy block emits product-flavored classes; the old products.css owned this rule): the section's closing gap. Products carry their own identical copies. */ .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, .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, .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, .gb--warranty .h3, .gb--sale_conditions .h3 { margin-top: 1.7em; margin-bottom: 24px; } .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 the retired EX Poster's css/poster-section.css into the ag_poster--* namespace. * The map still reads legacy class names typed into older blocks' CSS fields: * * 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