/* 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;
}
/* ex-poster-article */
/**
* poster-article.css — shared poster / lifted-head article scaffolding
* (.ex--post scope) for poster-style CPT singles. Consumers: single-news.php,
* single-stories.php — both lift their AG Poster out of the content flow.
* Every rule is page scope over ag-poster.css (band 70, after this file), so each
* one carries a specificity step above the block rule it overrides: the title is
* keyed on .ag_poster--content .ag_poster--title (0,3,0) against ag-poster.css's
* (0,2,0); the mobile wrapper paddings carry an .ag_poster--container bump
* (user ruling 2026-07-10: ties resolve by specificity, not file order).
* The p.ag_poster--event_date rule only matches on news (the poster date line,
* fed by NewsPostType through the before_render_poster_block filters).
* Interim priority 10; re-band to the trait band is its own audited portion later.
*/
/* 1512 1280 p1150 1066 768 p650 450 */
/* WP 781 old 1024 */
/* Poster */
.ex--post .ag_poster--wrapper {
padding: 56px 0 42px;
}
.ex--post .ag_poster--content .ag_poster--title {
font-size: 54px;
letter-spacing: -0.03em;
}
.ex--post .ag_poster--content p {
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 1.33;
letter-spacing: -0.02em;
color: var(--Neutrals-White);
margin-top: 32px;
margin-bottom: 0;
}
.ex--post .ag_poster--content p ~ p.ag_poster--event_date {
margin-top: 0;
}
@media (min-width: 769px) {
.ex--post .ag_poster--bg_image .section--viewport_fixed .ag_poster--wrapper {
padding: 56px 0;
}
}
@media (max-width: 1024px) {
.ex--post .ag_poster--content .ag_poster--title {
font-size: 48px;
}
}
@media (max-width: 768px) {
/* .ag_poster--container adds specificity so this page-scoped padding beats the
block's own reset (.ag_poster--container .ag_poster--wrapper = 0) regardless
of file order. The 450px rule below carries the same bump — it must,
or this rule would out-rank it on phones. */
.ex--post .ag_poster--container .ag_poster--wrapper {
padding: 52px 0 36px;
}
.ex--post .ag_poster--content {
padding: 0;
}
.ex--post .ag_poster--content .ag_poster--title {
font-size: 42px;
}
.ex--post .section--viewport_fixed .ag_poster--content {
padding: 0 32px;
}
.ex--post .ag_poster--bg_image .section--viewport_fixed .ag_poster--wrapper {
padding-top: 0;
}
.ex--post .ag_poster--bg_image .section--viewport_fixed .ag_poster--content {
width: 100%;
padding-top: 42px;
padding-bottom: 32px;
}
}
@media (max-width: 450px) {
.ex--post .ag_poster--container .ag_poster--wrapper {
padding: 46px 0 32px;
}
.ex--post .ag_poster--content .ag_poster--title {
font-size: 38px;
}
.ex--post .section--viewport_fixed .ag_poster--content {
padding-left: 24px;
padding-right: 24px;
}
.ex--post .ag_poster--bg_image .section--viewport_fixed .ag_poster--content {
padding-top: 36px;
}
.ex--post .ag_poster--content p {
font-size: 20px;
}
}
/* ag-image */
/**
* AG Image Block
*/
.ag_image--container {
width: 100%;
}
.ag_image--align_center .ag_image--figure {
margin-left: auto;
margin-right: auto;
}
.ag_image--align_right .ag_image--figure {
margin-left: auto;
}
.ag_image--size_75 .ag_image--figure {
width: 75%;
}
.ag_image--size_50 .ag_image--figure {
width: 50%;
}
.ag_image--size_33 .ag_image--figure {
width: 33.333%;
}
.ag_image--size_window {
max-width: none !important;
}
.ag_image--size_window .ag_image--image {
width: calc(100vw - var(--Scroll-Width));
left: calc((100vw - 100% - var(--Scroll-Width)) / -2);
}
@media (max-width: 1512px) {
.ag_image--size_window .ag_image--image {
width: calc(100vw - var(--Scroll-Width));
}
}
@media (max-width: 1066px) {
.ag_image--size_75 .ag_image--figure {
width: 100%;
}
.ag_image--size_50 .ag_image--figure {
width: 75%;
}
.ag_image--size_33 .ag_image--figure {
width: 50%;
}
}
@media (max-width: 768px) {
.ag_image--size_50 .ag_image--figure {
width: 100%;
}
.ag_image--size_33 .ag_image--figure {
width: 75%;
}
}
@media (max-width: 500px) {
.ag_image--size_33 .ag_image--figure {
width: 100%;
}
}
/* Viewport-width breakout (old ex_image--viewport -> ag-image "vport"):
1290px, wider than the 1072px content column, centered via negative margins. */
.ag_image--container.ag_image--size_vport {
width: 1290px;
max-width: none;
margin-left: calc((1290px - 100%) / -2);
margin-right: calc((1290px - 100%) / -2);
}
@media (max-width: 1418px) {
.ag_image--container.ag_image--size_vport {
width: calc(100vw - 128px);
margin-left: calc((100vw - 100% - 128px) / -2);
margin-right: calc((100vw - 100% - 128px) / -2);
}
}
@media (max-width: 1072px) {
.ag_image--container.ag_image--size_vport {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 768px) {
.ag_image--container.ag_image--size_vport {
width: calc(100% + 64px);
margin-left: -32px;
margin-right: -32px;
}
}
@media (max-width: 450px) {
.ag_image--container.ag_image--size_vport {
width: calc(100% + 48px);
margin-left: -24px;
margin-right: -24px;
}
}
.ag_image--image {
position: relative;
background-color: var(--Neutrals-White);
cursor: default;
}
.ag_image--fancy .ag_image--image {
cursor: zoom-in;
}
.ag_image--fixed_8x5 .ag_image--image {
padding-bottom: 62.5%;
}
.ag_image--fixed_13x5 .ag_image--image {
padding-bottom: 38.5%;
}
.ag_image--square .ag_image--image {
padding-bottom: 100%;
}
.ag_image--border .ag_image--image {
border: 1px solid var(--Neutrals-Light-Sand);
}
.ag_image--image img {
width: 100%;
height: 100%;
}
.ag_image--image:not(.ag_image--chart) img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
object-fit: cover;
display: block;
}
.ag_image--flexible .ag_image--image:not(.ag_image--chart) img {
position: static;
}
.ag_image--image.ag_image--photo_full img {
object-fit: contain;
}
.ag_image--chart_wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 3%;
}
.ag_image--flexible .ag_image--chart_wrap {
position: static;
}
.ag_image--chart_wrap img {
object-fit: contain;
}
.ag_image--image .ag_image--mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: 0.3s;
}
.ag_fancy--photo .ag_image--mask,
.ag_fancy--chart .ag_image--mask {
background-color: var(--Neutrals-Black);
opacity: 0;
}
.ag_fancy--video .ag_image--mask {
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E .st_line%7Bfill:%23FFFFFF;fill-opacity:0.3;stroke:%23FFFFFF;stroke-width:2;%7D .st_fonas%7Bfill:none;stroke:%23FFFFFF;stroke-width:2;%7D%0A%3C/style%3E%3Ccircle class='st_fonas' cx='25' cy='25' r='24'/%3E%3Cpath class='st_line' d='M33.909,22.353c0.48,0.255,0.882,0.637,1.162,1.103c0.28,0.466,0.428,1,0.428,1.544 s-0.148,1.078-0.428,1.544c-0.28,0.466-0.682,0.848-1.162,1.103l-12.812,6.967c-2.063,1.123-4.597-0.337-4.597-2.646V18.033 c0-2.31,2.534-3.769,4.597-2.648L33.909,22.353z'/%3E%3C/svg%3E");
opacity: 0.5;
}
.ag_fancy--video.ag_image--chart .ag_image--mask {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E .st_line%7Bfill:none;stroke:%23191E5A;stroke-width:2;%7D .st_fonas%7Bfill:%23FFFFFF;stroke:%23191E5A;stroke-width:2;%7D %3C/style%3E%3Ccircle class='st_fonas' cx='25' cy='25' r='24'/%3E%3Cpath class='st_line' d='M33.909,22.353c0.48,0.255,0.882,0.637,1.162,1.103c0.28,0.466,0.428,1,0.428,1.544 s-0.148,1.078-0.428,1.544c-0.28,0.466-0.682,0.848-1.162,1.103l-12.812,6.967c-2.063,1.123-4.597-0.337-4.597-2.646V18.033 c0-2.31,2.534-3.769,4.597-2.648L33.909,22.353z'/%3E%3C/svg%3E");
}
.ag_fancy--chart .fancybox-image {
background-color: var(--Neutrals-White);
padding: 3%;
}
@media (hover: hover) and (pointer: fine) {
.ag_fancy--photo:hover .ag_image--mask {
opacity: 0.05;
}
.ag_fancy--chart:hover .ag_image--mask {
opacity: 0.03;
}
.ag_fancy--video:hover .ag_image--mask {
background-color: rgba(0,0,0,0.08);
opacity: 1;
}
.ag_fancy--video.ag_image--chart:hover .ag_image--mask {
background-color: rgba(0,0,0,0.03);
}
}
.ag_image--footer {
width: 100%;
padding: 16px 0;
text-align: center;
}
.ag_image--footer.ag_image--footer_no_gap {
padding-top: 0;
}
.ag_image--item .ag_image--footer p {
margin: 0;
}
.ag_image--item .ag_image--footer .ag_image--title {
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 1.2em;
color: var(--Neutrals-Black);
}
.ag_image--item .ag_image--footer .ag_image--title:last-child {
margin-bottom: 16px;
}
.ag_image--item .ag_image--footer .ag_image--caption {
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 1.3em;
color: var(--Neutrals-Dark-Grey);
margin-bottom: 8px;
}
.ag_image--item .ag_image--footer .ag_image--caption a {
font-weight: 400;
}
.ag_image--item .ag_image--title + .ag_image--caption {
margin-top: 8px;
}
.ag_image--item .ag_image--footer .ag_image--description {
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 1.2em;
color: var(--Neutrals-Grey);
}
.ag_image--item .ag_image--footer .ag_image--description a {
font-weight: 400;
}
.ag_image--item .ag_image--title + .ag_image--description {
margin-top: 12px;
}
.fancybox-show-caption .ag_image--fancy_caption {
letter-spacing: 0.02em;
}
.fancybox-show-caption .ag_image--fancy_description {
font-weight: 300;
font-size: 13px;
margin-top: 4px;
letter-spacing: 0.05em;
}
.ag_image--container.ag_image--dyn_desktop {
width: 70%;
margin: auto;
}
@media (max-width: 1280px){
.ag_image--container.ag_image--dyn_desktop {
width: 85%;
}
}
@media (max-width: 1150px){
.ag_image--container.ag_image--dyn_desktop {
width: 100%;
margin: 0;
}
}
@media (max-width: 1024px){
.ag_image--container.ag_image--dyn_mobile {
width: 60%;
margin: auto;
}
}
@media (max-width: 850px){
.ag_image--container.ag_image--dyn_mobile {
width: 70%;
}
}
@media (max-width: 768px){
.ag_image--container.ag_image--dyn_mobile {
width: 80%;
}
}
@media (max-width: 650px){
.ag_image--container.ag_image--dyn_mobile {
width: 100%;
margin: 0;
}
}
@media (max-width: 650px){
.ag_image--container.ag_image--full_mobile {
width: 100%;
max-width: none !important;
margin: 0;
}
.ag_image--container.ag_image--full_mobile .ag_image--image {
width: calc(100vw - var(--Scroll-Width));
left: calc((100vw - 100% - var(--Scroll-Width)) / -2);
}
}
/**
* AG Gallery Block
* Grid/columns/modes/controls come from the collection wrapper (collection.css);
* this file keeps the gallery's own row rhythm + image-specific rules.
*/
.ag_gallery--container {
width: 100%;
}
.ag_collection--content.ag_gallery--content {
row-gap: 25px;
}
.ag_gallery--item {
flex: 0 0 auto;
}
/* single column: release the fixed aspect, images keep natural height
(768px = the collection wrapper's column-collapse boundary) */
@media (max-width: 768px) {
.ag_gallery--container:not(.ag_collection--scroll) .ag_gallery--item .ag_image--image {
padding-bottom: 0;
}
.ag_gallery--container:not(.ag_collection--scroll) .ag_gallery--item .ag_image--image:not(.ag_image--chart) img {
position: static;
}
.ag_gallery--container:not(.ag_collection--scroll) .ag_gallery--item .ag_image--chart_wrap {
position: static;
}
}
@media (max-width: 450px) {
.ag_collection--content.ag_gallery--content {
row-gap: 20px;
}
}
/* 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-posts */
/**
* posts.css — general long-form article overrides for singles (.ex--post scope):
* headings, paragraphs, lists, blockquote, links, FAQ (columns: the global wp-blocks.css).
* Born in CSS remaster M2 from the generic post-v2.css rules. Consumers migrate
* per .claude/work/content-class-css-plan.md (news first; stories at M5).
* Band 50 — above the global wp-blocks.css (30), below the block sheets (70).
*/
/* (.start/.end spacing retired at U1 margin-unify — content renamed to the
global top--start / bottom--end utils in elements.css, identical values.) */
/** Headings */
.ex--post :is(h2, .h2) {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 32px;
}
.ex--post :is(h3, .h3) {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 20px;
}
.ex--post :is(h4, .h4) {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 20px;
}
.ex--post :is(h5, .h5) {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 8px;
}
@media (max-width: 768px) {
.ex--post :is(h2, .h2) {
margin-bottom: 28px;
}
}
/** Paragraphs */
.ex--post p {
margin-bottom: 1em;
}
/** Lists */
.ex--post ul {
padding: 0;
margin: 0;
list-style: none;
}
.ex--post ul li {
position: relative;
padding-left: 36px;
margin-bottom: 0.75em;
}
.ex--post ul li::before {
content: "";
height: 14px;
width: 14px;
position: absolute;
left: 0;
top: 5px;
border-radius: 4px;
background-color: var(--Neutrals-Light-Sand);
}
.ex--post ul ul {
margin-top: 0.5em;
}
.ex--post ul ul li {
padding-left: 28px;
margin-bottom: 0.5em;
}
.ex--post ul ul li::before {
height: 2px;
top: 11px;
border-radius: 1px;
}
/** Blockquote */
.ex--post blockquote {
background: var(--Neutrals-White-Sand);
color: var(--Primary-Green);
margin-bottom: 36px;
margin-top: 36px;
position: relative;
padding: 30px 150px;
border-radius: 12px;
}
.ex--post blockquote :is(h3, .h3, h4, .h4, p, li) {
color: var(--Primary-Green);
}
.ex--post blockquote ul li::before {
background-color: var(--Neutrals-Sand);
}
.ex--post blockquote:after,
.ex--post blockquote:before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: contain;
margin: 30px;
width: 80px;
height: 70px;
}
.ex--post blockquote:after {
left: auto;
right: 0;
bottom: 0;
top: auto;
transform: rotate(180deg);
}
.ex--post blockquote .citation {
font-style: italic;
font-weight: 500;
font-size: 14px;
margin-top: 1.5em;
margin-bottom: 0;
}
.ex--post blockquote .citation strong {
font-weight: 600;
}
.ex--post blockquote .citation a {
font-weight: 600;
}
.ex--post blockquote.quote--simple {
padding: 36px;
}
.ex--post blockquote.quote--simple:after,
.ex--post blockquote.quote--simple:before {
display: none;
}
@media (max-width: 768px) {
.ex--post blockquote {
margin-bottom: 30px;
margin-top: 30px;
padding: 130px 36px;
}
.ex--post blockquote:after,
.ex--post blockquote:before {
margin: 30px 36px;
width: 92px;
}
}
@media (max-width: 450px) {
.ex--post blockquote {
width: calc(100vw - var(--Scroll-Width));
margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
border-radius: 0;
padding: 104px 24px 96px;
}
.ex--post blockquote:after,
.ex--post blockquote:before {
margin: 24px;
width: 60px;
height: 53px;
}
}
/** Links & strong */
.ex--post a {
font-weight: 600;
}
.ex--post :is(h2, .h2, h3, .h3, h4, .h4) a {
font-weight: 500;
}
.ex--post cite a {
font-weight: 400;
}
.ex--post strong {
font-weight: 600;
}
.ex--post .schema-faq-section {
border-bottom: 1px solid var(--Neutrals-Sand);
padding-top: 20px;
padding-bottom: 20px;
}
.ex--post .schema-faq-section:first-child {
border-top: 1px solid var(--Neutrals-Sand);
}
.ex--post .schema-faq .schema-faq-question {
font-size: 20px;
font-weight: 400;
color: var(--Primary-Green);
}
.ex--post .schema-faq .schema-faq-answer {
margin-top: 4px;
margin-bottom: 0;
}
.ex--post .section--load_more {
padding: 32px 0;
text-align: center;
background: var(--Neutrals-Light-Sand);
}
/* 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