/* 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; } } /* bibtex-frag-paging-ekspla-paging */ /** * Ekspla numbered pager — the fragment's own styling. * * Section 3b (2026-08-30): these rules were EXTRACTED VERBATIM from the "Pagination * Section" of templates/record-full/style.css + record-compact/style.css, which carried * an identical copy each. They live here now because a fragment styles itself: only the * SELECTED Paging Template's style.css is enqueued (Plugin::enqueue_fragment_css), so * switching the pager in BibTex Options changes the look as well as the markup. While * they sat in the pack, every pager inherited the pack's rules whatever was selected — * and they were written `.paging--container .paging--item` (0,2,0), which out-specifies * a plain `.paging--item` (0,1,0), so a different fragment could not win them back. * * ⚠ Do not restore them to a pack. A pack styles the RECORD; a fragment styles itself. * * Values are unchanged from the deployed b8 pack — this is ekspla's live pager: 40x40 * pills, border-radius 20px, 8px side margins, the sand palette. Theme tokens are used * BARE (no hex fallback) on purpose: this fragment ships inside the ekspla theme, which * is what defines --Neutrals-*, so the variables cannot fail to resolve here. The * PLUGIN's `native` preset is the one that needs var(--Token, #hex), because it has to * render on any site. */ /* Pagination Section */ .cite--paging { margin-top: 56px; } .paging--container { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; } .paging--container .paging--item { display: block; margin: 0 8px; width: 40px; height: 40px; padding: 12px 0 14px; font-weight: 400; font-size: 14px; line-height: 1; text-transform: uppercase; white-space: nowrap; text-align: center; color: var(--Neutrals-Dark-Sand); border-radius: 20px; background-color: var(--Neutrals-White-Sand); transition: background-color 0.2s ease-in-out; cursor: default; } .paging--container a.paging--item { text-decoration: none; cursor: pointer; outline: none; } .paging--container .paging--item span { display: inline-block; } .paging--container .paging--item .arrow--color { fill: var(--Neutrals-Dark-Sand); } @media (hover: hover) { .paging--container a.paging--item:hover { background-color: var(--Neutrals-Sand); color: var(--Neutrals-Black); } .paging--container a.paging--item:hover .arrow--color { fill: var(--Neutrals-Black); } } .paging--container .paging--item.paging--item_active { background: var(--Neutrals-Light-Sand); color: var(--Neutrals-Black); } .paging--container .paging--item.paging--points { width: 32px; letter-spacing: 2px; color: var(--Neutrals-Dark-Sand); background-color: transparent; } .paging--container .paging--previous, .paging--container .paging--next { padding: 13px 0 13px; background-color: var(--Neutrals-White-Sand); } .paging--container .paging--item_disabled { background-color: transparent; } .paging--container .paging--item_disabled .arrow--color { fill: var(--Neutrals-Medium-Sand); } @media (max-width: 768px) { .cite--paging { flex-wrap: wrap; row-gap: 15px; margin-top: 48px; } } @media (max-width: 450px) { .paging--container .paging--item { margin: 0 4px; width: 36px; height: 36px; padding: 10px 0 12px; } .paging--container .paging--previous, .paging--container .paging--next { padding: 11px 0 11px; } } /* bibtex-frag-load-more-ekspla-load-more */ /** * Ekspla Load more button — the fragment's own styling. * * Section 3b (2026-08-30): extracted VERBATIM from the "Load More Section" of * templates/record-full/style.css + record-compact/style.css (an identical copy in * each). Only the SELECTED Load More Template's style.css is enqueued * (Plugin::enqueue_fragment_css), so the fragment carries the rules that render it. * * ⓘ Dormant on ekspla today — BibTex Options → Pagination is mode 1 (numbered), so * Repository never sets ->load_more and this markup is not emitted. It renders the * moment the mode flips, which is precisely why the styling has to be correct now. * * ⚠ ONE FIX applied during the extraction, not a restyle: the hover colour read * `var(---Neutrals-Black)` — THREE dashes. That names a different (undefined) custom * property, so the declaration was invalid at computed-value time and the hover text * colour simply never applied. Corrected to `var(--Neutrals-Black)`, matching the * pager's hover rule directly above it in the original file. Invisible today (dormant * path); it would have shipped a dead hover the day the mode changed. The same typo is * still present in the b8 backup of both packs — it did not come from this extraction. * * Theme tokens are used BARE: this fragment ships inside the theme that defines * --Neutrals-*. The plugin's `native` preset is the one that needs hex fallbacks. */ /* Load More Section */ .load_more--container { margin-top: 56px; text-align: center; } .load_more--container a { text-decoration: none; cursor: pointer; outline: none; } .load_more--container .load_more--button { display: inline-block; height: 44px; min-width: 200px; padding: 16px 20px 16px; font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.5px; text-align: center; color: var(--Neutrals-Dark-Sand); border-radius: 16px; background-color: var(--Neutrals-White-Sand); transition: background-color 0.2s ease-in-out; cursor: pointer; } .load_more--container .load_more--button span { display: inline-block; } @media (hover: hover) { .load_more--container .load_more--button:hover { background-color: var(--Neutrals-Sand); color: var(--Neutrals-Black); } } @media (max-width: 768px) { .load_more--container { margin-top: 48px; } } /* bibtex-pack-ekspla-publication */ /** * Ekspla publications pack — the record card styling. * * This is what ekspla serves. It was the PLUGIN preset templates/record-full/style.css * until 2026-08-30, when the LC v4.1.0 engine was ported back and the site's own * rendering moved into the theme. The geometry, the --Neutrals-* palette and every * value below are the deployed b8 file, unchanged. * * ⚠⚠ THE PAGER AND LOAD-MORE RULES ARE GONE FROM HERE — moved, not deleted. They now * live with the fragments that render them (section 3b): * * {theme}/bibtex/paging/ekspla-paging/style.css * {theme}/bibtex/load-more/ekspla-load-more/style.css * {plugin}/templates-paging/native/style.css * {plugin}/templates-load-more/native/style.css * * Plugin::enqueue_fragment_css() loads only the SELECTED fragment's file. Keeping the * rules here made this PACK style every pager whatever was selected — and not merely * inertly: they were written `.paging--container .paging--item` (0,2,0), which * out-specifies a fragment's own `.paging--item` (0,1,0), so choosing a different * pager still rendered these pills. * * ⚠ Do not restore them. A pack styles the RECORD; a fragment styles itself. * * Tokens are used BARE (no hex fallback): this pack ships inside the theme that defines * --Neutrals-*. The plugin's record-full/record-compact presets are the ones that need * var(--Token, #hex), because they must render on any site. */ /* Publications block */ .bibtex--block:where(.pack--ekspla-publication){ min-height: 100px; position: relative; } .bibtex--block:where(.pack--ekspla-publication) .bibtex--data .h3{ font-size: 32px; } @media (max-width: 450px) { .bibtex--block:where(.pack--ekspla-publication){ margin-left: calc(-1 * var(--Mobile-Padding) ); margin-right: calc(-1 * var(--Mobile-Padding) ); } .bibtex--block:where(.pack--ekspla-publication) .bibtex--data .h3{ margin-left: var(--Mobile-Padding); margin-right: var(--Mobile-Padding); } } /* Citations */ :where(.pack--ekspla-publication) .cite--item{ width: 100%; margin-bottom: 24px; background: var(--Neutrals-White-Sand); position: relative; } :where(.pack--ekspla-publication) .cite--toggler{ position: absolute; top: 0; right: 0; width: 72px; height: 72px; padding: 16px; cursor: pointer; } :where(.pack--ekspla-publication) .cite--toggler span{ display: block; width: 40px; height: 40px; border: none; border-radius: 20px; background-position: center; background-repeat: no-repeat; background-size: 20px; /** From ex-accordition.css */ background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .line%7Bstroke:%234E4E3E;stroke-linecap:round;%7D %3C/style%3E%3Cpath class='line' d='M13,0.5v25'/%3E%3Cpath class='line' d='M0.5,13h25'/%3E%3C/svg%3E"); } :where(.pack--ekspla-publication) .cite--expanded .cite--toggler span{ background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .line%7Bstroke:%234E4E3E;stroke-linecap:round;%7D %3C/style%3E%3Cpath class='line' d='M0.5,13h25'/%3E%3C/svg%3E"); } @media (hover: hover) { :where(.pack--ekspla-publication) .cite--toggler:hover span{ background-color: var(--Neutrals-White); } } :where(.pack--ekspla-publication) .cite--item_wrap{ width: 100%; padding: 32px; } @media (max-width: 450px) { :where(.pack--ekspla-publication) .cite--item_wrap{ padding: var(--Mobile-Padding); } } :where(.pack--ekspla-publication) .cite--tags{ line-height: 1.2em; margin-bottom: 24px; } .bibtex--block:where(.pack--ekspla-publication) .cite--tags a{ font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase; color: var(--Neutrals-Light-Grey); padding: 0; display: inline; margin-right: 24px; } :where(.pack--ekspla-publication) .cite--tags a:last-of-type{ margin-right: 0; } @media (hover: hover) { .bibtex--block:where(.pack--ekspla-publication) .cite--tags a:hover{ color: var(--Primary-Light-Green); } } :where(.pack--ekspla-publication) .cite--tags span{ position: relative; display: inline-block; width: 0; height: 12px; } :where(.pack--ekspla-publication) .cite--tags span::after{ content: ""; position: absolute; bottom: 2px; left: -12px; display: block; width: 4px; height: 4px; border-radius: 100%; background-color: var(--Neutrals-Light-Grey); } :where(.pack--ekspla-publication) .cite--tags span:last-of-type{ display: none; } .bibtex--block:where(.pack--ekspla-publication) .cite--item a{ text-decoration: none; } .bibtex--block:where(.pack--ekspla-publication) .cite--title{ display: inline-block; margin-bottom: 16px; } .bibtex--block:where(.pack--ekspla-publication) .cite--title .h4{ color: var(--Neutrals-Black); font-weight: 400; font-size: 24px; font-style: normal; letter-spacing: -0.01em; line-height: 1.25em; margin-bottom: 0; } @media (hover: hover) { .bibtex--block:where(.pack--ekspla-publication) .cite--item a:hover .h4{ color: var(--Primary-Light-Green); } } :where(.pack--ekspla-publication) .cite--abstract{ margin-top: 32px; } :where(.pack--ekspla-publication) .cite--abstract .buttons--container{ margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* the gap owns the spacing here — drop the global elements.css margin */ :where(.pack--ekspla-publication) .cite--abstract .buttons--container .button--item:not(:last-child){ margin-right: 0; } /* Export dropdown (B7, redesigned 2026-08-25 to the owner's mock). Toggle = the Open-publication button verbatim (.button--item .button--white .button--icon .button_icon--arrow) plus .button_icon--arrow_up, so size, type, colours and the icon-circle hover all come from the theme and stay in step with it. Only the open-state flip is ours. Panel = the AG Ribbon burger-menu look (rounded 16px, soft shadow, uppercase left-aligned rows, hairline separators), restated here because ag-ribbon.css does not load on the publications surfaces. Width is pinned to the button (left:0/right:0 on the wrapper), and it opens UPWARD (owner 2026-08-25) — these cards sit low in the abstract, so a downward panel would open past the card edge. */ :where(.pack--ekspla-publication) .cite--export{ position: relative; margin-left: auto; } /* arrow points UP when closed (the menu grows upward), down while it is open */ :where(.pack--ekspla-publication) .cite--export.is--open .button--item.button_icon--arrow_up::after{ transform: rotate(90deg); } :where(.pack--ekspla-publication) .ex_select--dropdown{ position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 20; overflow: hidden; /* keeps the row separators inside the 16px radius */ background: var(--Neutrals-White-Sand); border-radius: 16px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); } :where(.pack--ekspla-publication) .ex_select--dropdown[hidden]{ display: none; } .bibtex--block:where(.pack--ekspla-publication) .ex_select--option, :where(.pack--ekspla-publication) .ex_select--option{ display: block; padding: 15px 24px 13px; font-family: "open-sans", sans-serif; font-size: 12px; font-weight: 700; line-height: 24px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; white-space: nowrap; color: var(--Neutrals-Medium-Grey); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } :where(.pack--ekspla-publication) .ex_select--option + .ex_select--option{ border-top: 1px solid var(--Neutrals-Medium-Sand); } @media (hover: hover) and (pointer: fine) { .bibtex--block:where(.pack--ekspla-publication) .ex_select--option:hover{ color: var(--Neutrals-Black); background-color: var(--Neutrals-Light-Sand); } } :where(.pack--ekspla-publication) .ex_select--option:focus-visible{ color: var(--Neutrals-Black); background-color: var(--Neutrals-Light-Sand); } :where(.pack--ekspla-publication) .cite--ref a{ font-weight: 400; } :where(.pack--ekspla-publication) .cite--tags{ margin-right: 72px;; } :where(.pack--ekspla-publication) .cite--title, :where(.pack--ekspla-publication) .cite--abstract, :where(.pack--ekspla-publication) .cite--ref{ margin-right: 48px; } @media (max-width: 1024px) { :where(.pack--ekspla-publication) .cite--title, :where(.pack--ekspla-publication) .cite--abstract, :where(.pack--ekspla-publication) .cite--ref{ margin-right: 24px; } } @media (max-width: 768px) { :where(.pack--ekspla-publication) .cite--title, :where(.pack--ekspla-publication) .cite--abstract, :where(.pack--ekspla-publication) .cite--ref{ margin-right: 0; } /* Narrow layout (owner 2026-08-25): the two buttons centre as a group and stack once they no longer fit side by side, instead of sitting pinned to opposite edges. Releasing the auto margin is what lets them centre. */ :where(.pack--ekspla-publication) .cite--abstract .buttons--container{ justify-content: center; } :where(.pack--ekspla-publication) .cite--export{ margin-left: 0; } } @media (max-width: 450px) { .bibtex--block:where(.pack--ekspla-publication) .cite--tags a{ font-size: 11px; } .bibtex--block:where(.pack--ekspla-publication) .cite--title .h4{ font-size: 22px; } :where(.pack--ekspla-publication) .cite--ref{ font-size: 14px; line-height: 1.3; } :where(.pack--ekspla-publication) .cite--abstract .button--item{ width: 100%; } :where(.pack--ekspla-publication) .cite--export{ width: 100%; margin-left: 0; } } /* Spinner */ :where(.pack--ekspla-publication) .spinner--mask{ position: absolute; top: 0; bottom: 0; width: 100%; background-color: rgba(255,255,255,0.75); } :where(.pack--ekspla-publication) .spinner--block{ text-align: center; margin-top: 60px; margin-bottom: 60px; } :where(.pack--ekspla-publication) .spinner{ width: 50px; height: 50px; display: inline-block; } :where(.pack--ekspla-publication) .spinner svg{ width: 100%; height: auto; } :where(.pack--ekspla-publication) .spinner .spinner--long{ fill: var(--Neutrals-Dark-Sand); } :where(.pack--ekspla-publication) .spinner .spinner--short{ fill: var(--Neutrals-Dark-Grey); } /* 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