/** Theme Name: OuterBox Web Presence Child Author: Brainstorm Force Author URI: http://wpastra.com/about/ Description: Child Theme by OuterBox Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-child Template: astra */ /* TOC: - Variables - Contextual Blocks (dark/light/white) - Utility - Typography - Slider - Carousel - Video - Image - Tabbed Content - Tables - Forms - Mobile Menu - Breadcrumbs - Jumplinks - Posts - Search */ :root { /* ============================================================ OpCo BASE TOKENS — shared baseline across OpCo brands. Structural tokens (spacing, type scale, radii) live here; per-brand values are in the BRAND OVERRIDES block below. ============================================================ */ /* Spacing */ --space-base: 16px; --space-xxs: calc(var(--space-base)*0.25); --space-xs: calc(var(--space-base)*0.5); --space-sm: calc(var(--space-base)*0.75); --space-md: calc(var(--space-base)*1.5); --space-lg: calc(var(--space-base)*2); --space-xl: calc(var(--space-base)*2.5); --space-xxl: calc(var(--space-base)*4); --space-xxxl: calc(var(--space-base)*5); --section-space: var(--space-xxxl); --section-side-space: var(--space-xxl); --gutter: var(--space-xxl); --gutter-sm: var(--space-lg); --content-max: 920px; --content-padded-max: 1100px; --container-max: 1320px; /* Padding Rules */ --card-padding: var(--space-lg); --callout-padding: var(--space-xxl); --content-button-padding: var(--space-md); --eyebrow-padding: var(--space-lg); --list-padding: var(--space-sm); --text-padding: var(--space-base); /* Fonts */ --text-base: 16px; --text-sm: calc(var(--text-base)*0.875); --text-lg: calc(var(--text-base)*1.125); --heading-xxs: calc(var(--text-base)*0.875); --heading-xs: calc(var(--text-base)*1); --heading-sm: calc(var(--text-base)*1.25); --heading-md: calc(var(--text-base)*1.5); --heading-lg: calc(var(--text-base)*2); --heading-xl: calc(var(--text-base)*2.5); --heading-xxl: calc(var(--text-base)*3); --heading-xxxl: calc(var(--text-base)*3.5); --font-weight-regular: 400; --font-weight-bold: 700; --line-height-body:1.5; --line-height-heading:1.25; /* Font families — OpCo base default (Poppins); overridden per brand below */ --font-family-heading: "Poppins", sans-serif; --font-family-body: "Poppins", sans-serif; /* Border Radius */ --border-radius-xs: 4px; --border-radius-sm: 8px; --border-radius-md: 16px; --border-radius-lg: 24px; --border-radius-xl: 32px; --border-radius-full: 100%; --border-radius-element: var(--border-radius-lg); --border-radius-button: 4px; --border-radius-input: var(--border-radius-md); --card-border-radius: var(--border-radius-xs); --media-border-radius: var(--border-radius-xs); --button-border-radius: var(--border-radius-xs); --input-border-radius: var(--border-radius-xs); --element-border-radius: var(--border-radius-xs); /* Button stroke width. Figma draws the button stroke INSIDE the 48px box, so it is subtracted from the vertical padding rather than added on top of it — see .elementor-button. */ --button-border-width: 2px; /* Colors — OpCo BASE palette (shared default; brand overrides below) */ --color-primary: #0A2240; --color-secondary: #87B7E8; --color-tertiary: #00C08B; --color-accent-dark: var(--color-primary); --color-accent-light: var(--color-tertiary); --color-bg-dark: var(--color-primary); --color-bg-dark-a30: #0A22404D; --color-bg-light: var(--color-ui-01); --color-ui-01: #F8F8F9; --color-ui-02: #CED3D9; --color-ui-03: #9DA7B3; --color-ui-04: #6C7A8C; --color-ui-05: #3B4E66; --color-ui-white: #FFFFFF; --color-ui-white-a30: #FFFFFF4D; --color-ui-warning: #AA0000; --color-ui-divider: var(--color-ui-02); --color-input-border-dark: var(--color-ui-05); --color-input-border-light: #FFFFFF; --color-btn-primary-default: var(--color-primary); --color-btn-primary-hover: var(--color-ui-05); --color-btn-secondary-default: #FFFFFF; --color-btn-secondary-hover: var(--color-secondary); --color-link-light-default: var(--color-primary); --color-link-light-hover: var(--color-ui-04); --color-link-dark-default: #87B7E8; --color-link-dark-hover: #FFFFFF; --color-headings-dark: var(--color-primary); --color-headings-light: #FFFFFF; --color-text-black: var(--color-ui-04); --color-text-dark: var(--color-ui-04); --color-text-light: var(--color-ui-01); --color-text-white: #FFFFFF; --color-site-bg: #FFFFFF; /* Button tokens — default (light/white) context. The Figma Button is built on these; context blocks (.dark-block / .light-block / .white-block) override them to match Figma's modes. Defined here so buttons still resolve when not wrapped in a context block. */ --primary-btn-border: var(--color-btn-primary-default); --primary-btn-fill: var(--color-btn-primary-default); --primary-btn-text: var(--color-headings-light); --primary-btn-border-hover: var(--color-btn-primary-default); --primary-btn-fill-hover: transparent; --primary-btn-text-hover: var(--color-btn-primary-default); --secondary-btn-border: var(--color-btn-secondary-default); --secondary-btn-fill: transparent; --secondary-btn-text: var(--color-headings-dark); --secondary-btn-border-hover: var(--color-btn-secondary-hover); --secondary-btn-fill-hover: var(--color-btn-secondary-hover); --secondary-btn-text-hover: var(--color-headings-light); /* Dropdown chevron in the primary/utility menus. Context blocks override it so the caret stays legible on whatever background the header sits on. Default matches the light/white case, since a menu outside a context block is on the page background. */ --menu-chevron-color: var(--color-accent-dark); /* Fake button — an Elementor Heading styled to read like a button */ --fake-btn-fill: transparent; --fake-btn-border: var(--color-bg-dark-a30); --fake-btn-text: var(--color-headings-dark); --tertiary-btn-text: var(--color-headings-dark); --tertiary-btn-border: var(--color-accent-dark); --tertiary-btn-text-hover: var(--color-headings-dark); --tertiary-btn-border-hover: var(--color-btn-secondary-default); --tertiary-btn-text-active: var(--color-headings-dark); --tertiary-btn-border-active: transparent; --icon-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 8L8 16L8.89062 15.1094L2.41016 8.62988H16V7.37012H2.41016L8.89062 0.890625L8 0L0 8Z' fill='black'/%3E%3C/svg%3E"); /* ============================================================ BRAND OVERRIDES — Cortez Heating & Air Swap this block per site/OpCo. Source: OpCo/Cortez brand style-variables doc. Base structural tokens are above. ============================================================ */ /* Brand · Fonts */ --font-family-heading: "Jost", sans-serif; --font-family-body: "Jost", sans-serif; /* Brand · Colors */ --color-primary: #0A2240; --color-secondary: #A1B2C3; --color-tertiary: #EC1C24; --color-accent-dark: var(--color-tertiary); --color-accent-light: #FFDE00; --color-bg-dark: var(--color-primary); --color-bg-dark-a30: #0A22404D; --color-bg-light: var(--color-ui-01); --color-ui-01: #F8F8F9; --color-ui-02: #C7D1DB; --color-ui-03: #798592; --color-ui-04: #515962; --color-ui-05: #282D31; --color-ui-white: #FFFFFF; --color-ui-white-a30: #FFFFFF4D; --color-ui-warning: #AA0000; --color-ui-divider: var(--color-ui-02); --color-input-border-dark: var(--color-ui-05); --color-input-border-light: #FFFFFF4D; --color-btn-primary-default: var(--color-primary); --color-btn-primary-hover: var(--color-ui-04); --color-btn-secondary-default: var(--color-primary); --color-btn-secondary-hover: var(--color-ui-04); --color-link-light-default: var(--color-primary); --color-link-light-hover: var(--color-ui-04); --color-link-dark-default: #87B7E8; --color-link-dark-hover: #FFFFFF; --color-headings-dark: #000000; --color-headings-light: #FFFFFF; --color-text-black: var(--color-ui-04); --color-text-dark: var(--color-ui-04); --color-text-light: #F0F0F0; --color-text-white: #FFFFFF; --color-site-bg: #FFFFFF; } @media only screen and (max-width : 991px) { :root { --heading-xxs: calc(var(--text-base)*0.875); --heading-xs: calc(var(--text-base)*1); --heading-sm: calc(var(--text-base)*1.125); --heading-md: calc(var(--text-base)*1.25); --heading-lg: calc(var(--text-base)*1.5); --heading-xl: calc(var(--text-base)*2); --heading-xxl: calc(var(--text-base)*2.5); --heading-xxxl: calc(var(--text-base)*3); --section-space: var(--space-xl); --section-side-space: var(--space-base); --gutter: var(--space-lg); --gutter-sm: var(--space-md); --card-padding: var(--space-base); --callout-padding: var(--space-base); --content-button-padding: var(--space-md); --eyebrow-padding: var(--space-lg); --list-padding: var(--space-sm); --text-padding: var(--space-base); --card-border-radius: var(--border-radius-xs); --media-border-radius: var(--border-radius-xs); --button-border-radius: var(--border-radius-xs); --input-border-radius: var(--border-radius-xs); --element-border-radius: var(--border-radius-xs); } } /* Contextual Block Themes (optional) — dark/light/white section wrappers. Each sets --background-color, --heading-color, --text-color and the --primary-btn-* / --secondary-btn-* token set for content inside the block. The .primary-btn / .secondary-btn classes consume these tokens, so a button re-colors automatically based on the context block it sits in (Figma modes). Headings/text token consumption is still pending. Source: OpCo/Cortez brand style-variables doc. */ .dark-block { --primary-btn-border: var(--color-ui-white); --primary-btn-fill: var(--color-ui-white); --primary-btn-text: var(--color-headings-dark); --primary-btn-border-hover: var(--color-ui-white); --primary-btn-fill-hover: transparent; --primary-btn-text-hover: var(--color-headings-light); --secondary-btn-border: var(--color-ui-white); --secondary-btn-fill: transparent; --secondary-btn-text: var(--color-headings-light); --secondary-btn-border-hover: var(--color-ui-white); --secondary-btn-fill-hover: var(--color-ui-white); --secondary-btn-text-hover: var(--color-headings-dark); --fake-btn-border: var(--color-ui-white-a30); --fake-btn-text: var(--color-headings-light); --heading-color: var(--color-headings-light); --text-color: var(--color-text-light); --menu-chevron-color: var(--color-accent-light); --background-color: var(--color-bg-dark); } .light-block, .white-block { --primary-btn-border: var(--color-btn-primary-default); --primary-btn-fill: var(--color-btn-primary-default); --primary-btn-text: var(--color-headings-light); --primary-btn-border-hover: var(--color-btn-primary-default); --primary-btn-fill-hover: transparent; --primary-btn-text-hover: var(--color-btn-primary-default); --secondary-btn-border: var(--color-btn-secondary-default); --secondary-btn-fill: transparent; --secondary-btn-text: var(--color-headings-dark); --secondary-btn-border-hover: var(--color-btn-secondary-hover); --secondary-btn-fill-hover: var(--color-btn-secondary-hover); --secondary-btn-text-hover: var(--color-headings-light); --heading-color: var(--color-headings-dark); --text-color: var(--color-text-dark); --menu-chevron-color: var(--color-accent-dark); } .light-block { --background-color: var(--color-bg-light); } .white-block { --background-color: #fff; } /* Off-canvas (hamburger) toggle. Elementor pins this icon to a fixed global color, which only reads on a dark header. Cortez is the only site with a .dark-block header; the base template and every other brand run .white-block, where a white icon is invisible. Following --heading-color keeps it correct in both contexts with no per-site Elementor setting. */ .off-canvas-toggle { .elementor-icon { color: var(--heading-color) !important; border-color: var(--heading-color) !important; } .elementor-icon svg { fill: var(--heading-color) !important; } } /* Utility */ .border-radius-element { span, .elementor-slides .swiper-slide { border-radius: var(--border-radius-element); } } .border-radius-element { img { border-radius: var(--media-border-radius); } } .padding-full { padding: var(--section-space) var(--section-side-space); } .padding-top { padding: var(--section-space) var(--section-side-space) 0 var(--section-side-space); } .padding-bottom { padding: 0 var(--section-side-space) var(--section-space) var(--section-side-space); } .padding-none { padding: 0px var(--section-side-space); } .add-hover-arrow { a::after { content: '\f061'; /* fa-arrow-right */ font-family: 'Font Awesome 7 Pro'; font-weight: 900; font-style: normal; display: inline-block; margin-left: var(--space-xxs); /* 4px */ text-decoration: none; opacity: 0; } a:hover::after, a:focus::after { opacity: 1; } } /* Button label collapses to nothing until its card is hovered, leaving an icon-only 80x48 button that slides open to 182x48. `.hide-until-hover-parent` goes on the card, `.hide-text-until-hover` on the button widget. Three things here are load-bearing: - !important on max-width: `span, h1..p { max-width: 768px !important }` below is a bare type selector, so it outranks anything we can write. Without it the collapse silently does nothing. - min-width: 0: the label is a flex item of .elementor-button-content-wrapper, and a flex item's automatic minimum size won't shrink below its content. - clipping, not display/visibility: the icon is aria-hidden, so removing the label from the box would leave these links with no accessible name at all. display:none also drops the button to 40px tall, breaking the 48px height. The hover guard leaves the label permanently visible on touch, which never hovers. */ @media (hover: hover) and (pointer: fine) { .hide-until-hover-parent .hide-text-until-hover { .elementor-button-text { max-width: 0 !important; min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.25s ease, opacity 0.15s ease; } /* Or the collapsed button keeps 8px of dead space where the label was. */ .elementor-button-content-wrapper { gap: 0; transition: gap 0.25s ease; } } /* :focus-within so keyboard users tabbing to the button also get the label. */ .hide-until-hover-parent:hover, .hide-until-hover-parent:focus-within { .hide-text-until-hover .elementor-button-text { max-width: 12rem !important; opacity: 1; } .hide-text-until-hover .elementor-button-content-wrapper { gap: var(--space-xs); /* 8px */ } } .hide-until-hover-parent .fake-btn.hide-text-until-hover { .elementor-heading-title { display: inline-flex; align-items: center; gap: 0; font-size: 0 !important; transition: font-size 0.25s ease, gap 0.25s ease; } .elementor-heading-title::after { content: '\f061'; /* fa-arrow-right */ font-family: 'Font Awesome 7 Pro'; font-weight: 900; font-style: normal; font-size: var(--heading-xs); line-height: var(--line-height-body); } } .hide-until-hover-parent:hover, .hide-until-hover-parent:focus-within { .fake-btn.hide-text-until-hover .elementor-heading-title { font-size: var(--heading-xs) !important; gap: var(--space-xs); /* 8px */ } } } /* Typography */ a.elementor-element{ text-decoration: none !important; } .wordpress-menu-utility { a { /* Text/Small */ font-family: var(--font-family-body) !important; font-size: var(--heading-xxs) !important; font-style: normal !important; font-weight: var(--font-weight-regular) !important; line-height: 150% !important; } .sub-arrow { padding-left: var(--space-xs) !important; padding-top: 0 !important; padding-bottom: 0 !important; } .fas { color: var(--menu-chevron-color) !important; font-size: var(--space-sm) !important; /*transition: transform 0.2s ease;*/ } /* Flip the dropdown chevron when its menu item is hovered/focused */ li:hover > a .sub-arrow .fas, li:focus-within > a .sub-arrow .fas { transform: rotate(180deg); } .sub-menu { a:hover { border-left: 2px solid var(--menu-chevron-color) !important; } } } .wordpress-menu-primary { /* Text/Bold */ font-family: var(--font-family-body) !important; font-size: var(--heading-xs) !important; font-style: normal !important; font-weight: var(--font-weight-bold) !important; line-height: 150% !important; .sub-arrow { padding-left: var(--space-xs) !important; padding-top: 0 !important; padding-bottom: 0 !important; } .fas { color: var(--menu-chevron-color) !important; font-size: var(--text-base) !important; /*transition: transform 0.2s ease;*/ } /* Flip the dropdown chevron when its menu item is hovered/focused */ li:hover > a .sub-arrow .fas, li:focus-within > a .sub-arrow .fas { transform: rotate(180deg); } .sub-menu { a:hover { border-left: 2px solid var(--menu-chevron-color) !important; } } } /* Adjust font size on smaller screens to prevent wrapping */ @media (min-width: 1200px) and (max-width: 1400px) { .elementor-location-header { .wordpress-menu-primary, .wordpress-menu-primary .elementor-item, .wordpress-menu-utility .elementor-item { font-size: var(--text-sm) !important; /* 14px */ } .secondary-btn .elementor-button { padding-left: 12px !important; padding-right: 12px !important; } } } /* Just above the tablet breakpoint the 14px menus still wrap, so also tighten the space between menu items (Elementor's default here is 12px), the gap before each dropdown chevron, and keep the phone number on one line. */ @media (min-width: 1200px) and (max-width: 1279px) { .elementor-location-header { .wordpress-menu-primary, .wordpress-menu-utility { --e-nav-menu-horizontal-menu-item-margin: 4px !important; .sub-arrow { padding-left: 4px !important; } } .elementor-icon-list-text { white-space: nowrap; } } } .eyebrow-heading { span, h1, h2, h3, h4, h5, h6 { color: var(--text-color); /* Headings/Eyebrow */ font-family: var(--font-family-body); font-size: var(--heading-xxs); font-style: normal; font-weight: var(--font-weight-regular); line-height: 150%; /* 21px */ letter-spacing: 3px; text-transform: uppercase; } } .eyebrow-heading--chip { padding: var(--space-xxs) var(--space-sm) !important; border: 1px solid var(--color-ui-02); } .blog--chip { background: var(--color-bg-dark); display: flex; padding: var(--space-xxs) var(--space-sm); justify-content: center; align-items: center; gap: 8px; h2 { color: var(--color-ui-white) !important; } } .headline-heading { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-size: var(--heading-xxxl); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .heading1 { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-size: var(--heading-xxl); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .heading2 { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-size: var(--heading-xl); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .heading3 { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-size: var(--heading-lg); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .heading4 { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-size: var(--heading-md); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .heading5 { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); font-size: var(--heading-sm); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .heading6 { span, h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-body); font-size: var(--heading-xs); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }} .regular, .text-regular { p, div, span, a { color: var(--text-color); /* Text/Regular */ font-family: var(--font-family-body); font-size: var(--heading-xs); font-style: normal; font-weight: var(--font-weight-regular); line-height: 150%; /* 24px */ } } .text-small { p, div, span, a { color: var(--text-color); /* Text/Small */ font-family: var(--font-family-body); font-size: var(--heading-xxs); font-style: normal; font-weight: var(--font-weight-regular); line-height: 150%; /* 21px */ } } span, h1, h2, h3, h4, h5, h6, p { max-width: 768px !important; } p { margin-bottom: 0!important; font-size: var(--text-base); font-family: var(--font-family-body); line-height: var(--line-height-body); } .p--small { font-size: var(--text-sm); } .p--large { font-size: var(--text-lg); } p + p { margin-top: var(--space-base)!important; } /* Elementor's kit rule (.elementor-kit-NNN) outranks a bare `body` selector, and for a multi-word Google font it emits an unquoted fallback ("font-family: var(...), Exo 2") that is invalid at computed-value time and resolves to unset. Body text then inherits the browser default instead of the brand font, so this declaration has to win outright. */ body { font-family: var(--font-family-body) !important; } button, input, select, textarea { font-family: var(--font-family-body); } .elementor-button{ border-radius:var(--button-border-radius); padding:calc(var(--space-sm) - var(--button-border-width)) var(--space-md) !important; border:var(--button-border-width) solid transparent; font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--heading-xs); line-height: var(--line-height-body) !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .elementor-button .elementor-button-text, .elementor-button i { transition: color 0.2s ease; } .mobile-header-top-bar-btn { .elementor-button { background: var(--color-primary) !important; border: none !important; } .elementor-button-text { /* The fill above is pinned to --color-primary, so the label is pinned to match. Letting it follow block context put dark text on the primary fill inside a .white-block header. */ color: var(--color-headings-light); text-align: center; /* Text/Button */ font-family: var(--font-family-body); font-size: var(--heading-xs); font-style: normal; font-weight: var(--font-weight-bold); line-height: 150%; /* 24px */ } } .mobile-btn-accent-light, .mobile-header-top-bar-btn { a { border: none !important; } .elementor-button { padding-top: 0 !important; padding-bottom: 0 !important; } i:before { color: var(--color-accent-light) !important; fill: var(--color-accent-light) !important; } } /* Light-header variant of the mobile top bar. */ .white-block { .mobile-top-bar { background-color: var(--color-ui-white); } .mobile-header-top-bar-btn .elementor-button { background: transparent !important; } .mobile-header-top-bar-btn .elementor-button-text, .mobile-btn-accent-light .elementor-button-text { color: var(--color-primary) !important; } .mobile-btn-accent-light i:before, .mobile-header-top-bar-btn i:before { color: var(--color-accent-dark) !important; fill: var(--color-accent-dark) !important; } } /* Header icon lists for white block version of header */ .elementor-location-header .white-block .elementor-icon-list-icon { i { color: var(--color-accent-dark) !important; } svg { fill: var(--color-accent-dark) !important; } } .primary-btn-light, .secondary-btn-light, .form-light { --primary-btn-border: var(--color-ui-white); --primary-btn-fill: var(--color-ui-white); --primary-btn-text: var(--color-headings-dark); --primary-btn-border-hover: var(--color-ui-white); --primary-btn-fill-hover: transparent; --primary-btn-text-hover: var(--color-headings-light); --secondary-btn-border: var(--color-ui-white); --secondary-btn-fill: transparent; --secondary-btn-text: var(--color-headings-light); --secondary-btn-border-hover: var(--color-ui-white); --secondary-btn-fill-hover: var(--color-ui-white); --secondary-btn-text-hover: var(--color-headings-dark); } .primary-btn, .primary-btn-light { .elementor-button { background: var(--primary-btn-fill)!important; border: 2px solid var(--primary-btn-border)!important; } .elementor-button-text { color: var(--primary-btn-text)!important; } i { color: var(--primary-btn-text)!important; } } .primary-btn:hover, .primary-btn-light:hover { .elementor-button { background: var(--primary-btn-fill-hover)!important; border: 2px solid var(--primary-btn-border-hover)!important; } .elementor-button-text { color: var(--primary-btn-text-hover)!important; } i { color: var(--primary-btn-text-hover)!important; } } .fake-btn { .elementor-heading-title { display: inline-block; background: var(--fake-btn-fill); border: var(--button-border-width) solid var(--fake-btn-border); border-radius: var(--button-border-radius); padding: calc(var(--space-sm) - var(--button-border-width)) var(--space-md); margin: 0; color: var(--fake-btn-text) !important; font-family: var(--font-family-body) !important; font-size: var(--heading-xs) !important; font-weight: var(--font-weight-bold) !important; line-height: var(--line-height-body) !important; } } .fake-btn-light { .elementor-heading-title { border-color: var(--color-ui-white-a30) !important; color: var(--color-headings-light) !important; } } .secondary-btn, .secondary-btn-light { .elementor-button { background: var(--secondary-btn-fill)!important; border: 2px solid var(--secondary-btn-border)!important; } .elementor-button-text { color: var(--secondary-btn-text)!important; } i { color: var(--secondary-btn-text)!important; } } .secondary-btn:hover, .secondary-btn-light:hover { .elementor-button { background: var(--secondary-btn-fill-hover)!important; border: 2px solid var(--secondary-btn-border-hover)!important; } .elementor-button-text { color: var(--secondary-btn-text-hover)!important; } i { color: var(--secondary-btn-text-hover)!important; } } .tertiary-btn, .tertiary-btn-light { .elementor-button { background: transparent!important; border-radius: 0px!important; padding:var(--space-sm) 0 !important; border-width: 0px 0px 2px 0px!important; border-style: solid!important; border-color: var(--tertiary-btn-border)!important; transition: border-color 0.2s ease, color 0.2s ease; } .elementor-button-text { color: var(--tertiary-btn-text)!important; } i { color: var(--tertiary-btn-text)!important; } } /* Dark-context variant: white label, white rule, accent rule on hover. */ .tertiary-btn-light, .fake-btn-tertiary-light { --tertiary-btn-text: var(--color-headings-light); --tertiary-btn-border: var(--color-ui-white); --tertiary-btn-text-hover: var(--color-headings-light); --tertiary-btn-border-hover: var(--color-accent-light); --tertiary-btn-text-active: var(--color-headings-light); --tertiary-btn-border-active: transparent; } /* :focus-within, not :focus — the class sits on the widget wrapper, the is the thing that takes focus. */ .tertiary-btn:hover, .tertiary-btn:focus-within, .tertiary-btn-light:hover, .tertiary-btn-light:focus-within { .elementor-button { border-color: var(--tertiary-btn-border-hover)!important; } .elementor-button-text { color: var(--tertiary-btn-text-hover)!important; } i { color: var(--tertiary-btn-text-hover)!important; } } .tertiary-btn:active, .tertiary-btn-light:active { .elementor-button { border-color: var(--tertiary-btn-border-active)!important; } .elementor-button-text { color: var(--tertiary-btn-text-active)!important; } i { color: var(--tertiary-btn-text-active)!important; } } .fake-btn-tertiary, .fake-btn-tertiary-light { .elementor-heading-title { display: inline-block; background: var(--fake-btn-fill); border-radius: 0 !important; border-width: 0 0 2px 0 !important; border-style: solid !important; border-color: var(--tertiary-btn-border) !important; padding: var(--space-sm) 0 !important; margin: 0; color: var(--tertiary-btn-text) !important; font-family: var(--font-family-body) !important; font-size: var(--heading-xs) !important; font-weight: var(--font-weight-bold) !important; line-height: var(--line-height-body) !important; transition: border-color 0.2s ease, color 0.2s ease; } } .fake-btn-tertiary:hover, .fake-btn-tertiary:focus-within, .fake-btn-tertiary-light:hover, .fake-btn-tertiary-light:focus-within, .blog-card-parent:hover .fake-btn-tertiary, .blog-card-parent:focus-within .fake-btn-tertiary, .blog-card-parent:hover .fake-btn-tertiary-light, .blog-card-parent:focus-within .fake-btn-tertiary-light { .elementor-heading-title { border-color: var(--tertiary-btn-border-hover) !important; color: var(--tertiary-btn-text-hover) !important; } } .elementor-widget-text-editor{ ul{ margin: 0 0 0 20px; padding: 0; li{ padding-bottom: var(--list-padding); &:last-child{ padding-bottom: 0; } } } } /* Slider */ .elementor-swiper{ margin-bottom: 16px; } .elementor-element.elementor-arrows-position-outside .swiper{ width: calc(100% - 80px); padding-bottom:50px !important; } .elementor-slides .swiper-slide{ position: relative; overflow: hidden; } /* Carousel */ .swiper-pagination-bullet{ opacity: 1; position: relative; mask-image: url('data:image/svg+xml,'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background: var(--color-accent-dark); } .swiper-pagination-bullet:hover, .swiper-pagination-bullet-active{ mask: none; } .elementor-swiper-button .fa-arrow-left, .elementor-swiper-button .fa-arrow-right, .eicon-chevron-left, .eicon-chevron-right{ mask-image: url('data:image/svg+xml,'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; display: block; } .elementor-swiper-button .fa-arrow-left:before, .elementor-swiper-button .fa-arrow-right:before, .eicon-chevron-left:before, .eicon-chevron-right:before{ background-color: currentColor; } .elementor-swiper-button .fa-arrow-left, .eicon-chevron-left{ transform: rotate(180deg); } /* Video */ .elementor-widget-video{ border-radius: var(--border-radius-element); position: relative; overflow: hidden; } .elementor-custom-embed-image-overlay:after{ content: ''; background-color: var(--color-text-black); opacity: .3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .elementor-custom-embed-play{ z-index: 2; } .elementor-custom-embed-image-overlay:hover .eicon-play{ opacity: .8 !important; } .eicon-play{ background-color: currentColor; border-radius: 100%; opacity: 1 !important; } .eicon-play:before{ opacity: 0; } .eicon-play:after{ content: ''; background: url('data:image/svg+xml,') center center no-repeat transparent; background-size: 16px; display: block; width: 100%; height: 100%; position: absolute; left: 2px; top: 1px; } /* Image */ .widget-image-caption{ margin-bottom: 0 !important; } /* Tabbed Content */ .tabs-left .e-n-tabs-heading button{ position: relative; } .tabs-left .e-n-tabs-heading button:after{ content:''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; display: block; background-color: var(--color-ui-01); } @media only screen and (max-width: 767px) { .tabs-top .e-n-tabs-heading button{ position: relative; } .tabs-top .e-n-tabs-heading button:after{ content:''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; display: block; background-color: var(--color-ui-01); } } /* Tables */ .html-table{ table{ border: 0; } thead{ background-color: var(--color-bg-dark); } th{ border-color: var(--color-ui-white); color: var(--color-headings-light); line-height: 1.5; font-size: var(--text-base); font-family: var(--font-family-body); text-transform: uppercase; font-weight:var(--font-weight-regular); padding: var(--space-sm) var(--space-base); } tbody tr:nth-child(odd){ background-color: var(--color-ui-white); } tbody tr:nth-child(even){ background-color: var(--color-bg-light); } td{ border: 0; border-bottom: 1px solid var(--color-ui-02); text-align: center; font-size: var(--text-base); padding: var(--space-sm) var(--space-base); } } .html-table::-webkit-scrollbar-track { background: var(--color-headings-light); border: 1px solid var(--color-brand-03); height: 8px; border-radius: 12px; } .html-table::-webkit-scrollbar { width: 8px; background: var(--color-headings-light); height: 8px; border-radius: 12px; } .html-table::-webkit-scrollbar-thumb { background: var(--color-brand-03); width: 40px; border-radius: 12px; } @media only screen and (max-width: 1024px) { .html-table{ overflow: auto; table{ width: 1024px; } } } /* Forms */ .gform_heading { display: none; } form{ .gfield_label{ color: var(--color-text-black) !important; line-height: 1.5; font-size: var(--text-base) !important; font-family: var(--font-family-body); font-weight:var(--font-weight-bold) !important; float: left; } .gfield_required{ text-transform: lowercase; color: var(--color-accent-dark); font-size: var(--text-sm) !important; } .ginput_container input[type="text"], .ginput_container input[type="tel"], .ginput_container input[type="email"]{ border: 1px solid var(--color-ui-03) !important; padding: var(--space-sm) var(--space-base) !important; height: 48px !important; line-height: 48px !important; } .ginput_container textarea{ border: 1px solid var(--color-ui-03) !important; padding: var(--space-sm) var(--space-base) !important; height: 96px !important; } .ginput_container select{ border: 1px solid var(--color-ui-03) !important; height: 48px !important; line-height: 48px !important; padding: 0 calc(var(--space-base) * 2) 0 var(--space-base) !important; background-position: calc(100% - var(--space-base)) 50% !important; } label + .gfield_description{ text-transform: lowercase; color: var(--color-text-black); font-size: var(--text-sm) !important; left: 8px; top: 1px; position: relative; } .gform_fields{ row-gap: var(--space-md) !important; } .gform_button{ border-radius: var(--button-border-radius); padding: calc(var(--space-sm) - var(--button-border-width)) var(--space-md) !important; border: var(--button-border-width) solid var(--primary-btn-border) !important; background-color: var(--primary-btn-fill) !important; color: var(--primary-btn-text) !important; font-family: var(--font-family-body) !important; font-weight: var(--font-weight-bold) !important; font-size: var(--heading-xs) !important; line-height: var(--line-height-body) !important; text-transform: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .gform_button:hover{ border: var(--button-border-width) solid var(--primary-btn-border-hover) !important; background-color: var(--primary-btn-fill-hover) !important; color: var(--primary-btn-text-hover) !important; } } form .gfield_label_before_complex{ float: none; width: 100%; } form .ginput_complex.gform-grid-row{ --gf-field-gap-x: var(--space-base); } form .gform-field-label--type-sub{ color: var(--color-text-black) !important; font-family: var(--font-family-body); font-size: var(--text-sm) !important; font-weight: var(--font-weight-regular) !important; line-height: 1.5; } form .ginput_complex .gf_clear_complex{ display: none; } .form-wide form .gfield--width-half{ grid-column: 1 / -1; } .form-light form .gfield_label, .form-light form .gfield_required, .form-light form .gfield_description, .form-light form .gform-field-label--type-sub{ color: var(--color-text-white) !important; } .blog-search-bar { .e-search-input { border: 1px solid var(--color-input-border-dark) !important; transition: border-color 0.2s ease; } .e-search-input:focus { border-color: var(--color-accent-dark) !important; } } .sub-menu .menu-item { border-bottom: 1px solid var(--color-ui-01); } /* Footer */ .footer-menu a { color: var(--color-text-dark); text-decoration: none!important; border-bottom: 1px solid var(--color-ui-divider); width: 100%; display: block; padding: var(--list-padding) 0; } .footer-menu a:last-of-type{ border-bottom: none; } .footer-menu a::hover { color: var(--color-link-dark-hover); } .wordpress-footer-menu-utility .elementor-nav-menu--main .elementor-item { width: fit-content; } .wordpress-footer-menu-utility .e--pointer-underline .elementor-item::after, .wordpress-footer-menu-utility .e--pointer-underline .elementor-item::before { height: 1px; } .wordpress-footer-menu-utility .elementor-nav-menu a, .wordpress-footer-menu-utility .elementor-nav-menu a:hover, .wordpress-footer-menu-utility .elementor-nav-menu a:focus { line-height: 150%; transition: none; } .wordpress-footer-menu-utility .elementor-item::after, .wordpress-footer-menu-utility .elementor-item::before { transition: none; } /* Mobile Menu */ .e-off-canvas__no-scroll{ position: fixed; width: 100%; } .off-canvas-toggle a[aria-expanded="true"] i:before{ content: '\f00d'; } .elementor-widget-off-canvas{ .e-off-canvas__overlay{ background-color: transparent !important; } .e-off-canvas__content{ width: 100%; padding-bottom: 143px; overflow-y: auto; height: 100%; } .e-off-canvas__main{ height: calc(100% - var(--header-height, 143px)); top: var(--header-height, 143px); overflow-y: auto; } .e-off-canvas__main::-webkit-scrollbar{ display: none; } } .e-off-canvas .elementor-nav-menu--main{ .menu-item-home, .submenu-headline{ display: none; } .menu-item-home-text, .submenu-headline-button{ font-size: 24px; border: 0; line-height: 1.25; color: var(--color-text-black); font-weight: var(--font-weight-bold); padding: 0 0 16px 0; display: block; /* Underline beneath the "Menu" heading, disabled. Shared with .submenu-headline-button, so this also removes the rule under submenu panel headings. */ /* border-bottom: 1px solid var(--color-ui-03); */ } .submenu-headline-button{ padding-top: 16px; } ul { position: relative; height: 100%; width: 100% !important; max-width: none !important; } ul li{ position: relative; } ul li > .submenu-toggle { cursor: pointer; position: absolute; width: 40px; right: 0; top: 50%; transform: translateY(-50%); text-align: right; } ul li a{ margin: 0; border: 0; color: var(--color-headings-dark) !important; /* Text/Bold */ font-family: var(--font-family-body) !important; font-size: var(--heading-xs) !important; font-style: normal !important; font-weight: var(--font-weight-bold) !important; line-height: 150% !important; /* 24px */ } /* Elementor's hover/active treatments, disabled inside the panel only. Two sources, both Elementor defaults rather than theme styles: - .elementor-item::before/::after is the "Pointer" underline. The widget has no pointer value set, so it falls back to the widget default (underline) and paints a 3px #3f444b bar on :hover, :focus and .elementor-item-active. - .elementor-sub-item:hover/:focus/.elementor-item-active fills submenu links with #3f444b (widget-nav-menu.min.css, where the .elementor-sub-item half of the selector is not scoped to dropdown menus). Touch keeps :hover alive after a tap and :focus stays until the next tap, so both read as a stuck highlight. Scoped to .e-off-canvas; desktop menus are unaffected. */ .elementor-item::before, .elementor-item::after{ content: none; } .elementor-sub-item:hover, .elementor-sub-item:focus, .elementor-sub-item.highlighted, .elementor-sub-item.elementor-item-active{ background-color: transparent; } /* Keyboard users lose their only focus indicator above, so put one back. */ ul li a:focus-visible{ outline: 2px solid var(--color-accent-dark); outline-offset: 2px; } /* Submenu panels only. Two overrides: - padding-left comes from Elementor's own widget-nav-menu.min.css (`.elementor-nav-menu a { padding-left: 20px }`), not from this theme. - border-bottom comes from `.sub-menu .menu-item` further up this file, which is intentionally left in place for the desktop header dropdowns. */ ul.sub-menu > li.menu-item{ border-bottom: 0; } ul.sub-menu > li.menu-item > a{ padding-left: 0; } /* Per-item separator lines, disabled. This is not a border — it repurposes Elementor's e--pointer-underline ::after and forces it permanently visible with opacity:1, drawing a 1px rule at the bottom of every off-canvas menu anchor. Re-enable to bring the separators back. */ /* ul li a:after{ content: ''; opacity: 1 !important; height: 1px; width: 100%; background-color: var(--color-ui-03); display: block; position: absolute; left: 0; bottom: 0; } */ ul li a > span{ display: none !important; } ul ul { position: absolute; left: 100vw !important; transition: left 0.2s ease-in-out; z-index: 3; background-color: white; width: 100% !important; top: 0 !important; transition: none; margin-left: 0 !important; margin-top: 0 !important; } ul li.submenu-active { position: static; } ul li.submenu-active > ul { left: 0 !important; transition: left 0.2s ease-in-out; z-index: 9; display: block !important; } button.submenu-toggle{ position: relative; width: 40px; height: 40px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; border: 0; line-height: 1.5; color: var(--color-text-black); font-weight: var(--font-weight-bold); background-color: transparent; padding: 0; } button.submenu-toggle:before{ content:''; width: 20px; height: 20px; display: block; background-color: var(--color-accent-dark); mask-image: url('data:image/svg+xml,'); mask-repeat: no-repeat; mask-position: right center; mask-size: contain; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* Rule under the submenu "back" row, disabled. Whole block commented since border-bottom was its only declaration. */ /* .submenu-back{ border-bottom: 1px solid var(--color-ui-03); } */ button.submenu-back-button{ position: relative; display: flex; align-items: center; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; border: 0; line-height: 1.5; padding: 13px 0; color: var(--color-text-black); font-weight: var(--font-weight-bold); background-color: transparent; } .submenu-back-button:before{ content:''; width: 20px; height: 20px; display: block; background-color: var(--color-accent-dark); mask-image: url('data:image/svg+xml,'); mask-repeat: no-repeat; mask-position: left center; mask-size: contain; } } .e-off-canvas__content:has(.submenu-active) .elementor-widget:not([data-widget_type^="nav-menu"]){ display: none; } #mobile-nav .search-container{ padding: var(--space-md) 0; .search-form input{ width: 100%; } } .mobile-nav__utility{ display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); i{ width: 20px; color: var(--color-brand-03); } a{ text-decoration: none; color: var(--color-text-black); } } /* Breadcrumbs*/ @media(max-width: 767px){ .elementor-widget-hfe-breadcrumbs-widget{ width: 100%; > div{ width: 100%; } nav{ position: relative; width: 100%; } nav:after{ content: ''; width: 100px; height: 100%; display: block; right: 0; top: 0; position: absolute; pointer-events: none; background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); } ul{ white-space: nowrap; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; padding-right: 100px; } ul::-webkit-scrollbar { display: none; } } } /* Jumplinks */ .jumplinks{ .elementor-icon-list-icon{ order: 2; margin-left: 4px; } .elementor-icon-list-text{ padding-left: 0 !important; } a:hover, a:active, a:focus{ outline: 0; .elementor-icon-list-text{ text-decoration: underline; } } } /* Posts */ .e-loop-item.ast-article-single{ padding: 0 !important; } .ast-grid-common-col:has(> .blog-card-parent) { padding-left: 0 !important; padding-right: 0 !important; } .blog-card-parent { .elementor-widget-image, .elementor-widget-image .elementor-widget-container, .elementor-widget-image img { border-radius: 0 var(--media-border-radius) 0 0 !important; } } @media (hover: hover) and (pointer: fine) { .blog-card-parent { .elementor-widget-image, .elementor-widget-image .elementor-widget-container { overflow: hidden; } .elementor-widget-image img { transition: transform 0.5s ease; } &:hover .elementor-widget-image img, &:focus-within .elementor-widget-image img { transform: scale(1.06); } } } @media (prefers-reduced-motion: reduce) { .blog-card-parent .elementor-widget-image img { transition: none; transform: none !important; } } .elementor-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-md); text-align: left; } .elementor-pagination .page-numbers { color: var(--tertiary-btn-text) !important; font-family: var(--font-family-body); font-size: var(--heading-xs); font-weight: var(--font-weight-bold); line-height: var(--line-height-body); text-decoration: none !important; padding: var(--space-sm) 0; min-width: 1.25rem; text-align: center; border-bottom: 2px solid var(--tertiary-btn-border); transition: border-color 0.2s ease, color 0.2s ease; } .elementor-pagination a.page-numbers:hover, .elementor-pagination a.page-numbers:focus-visible { color: var(--tertiary-btn-text-hover) !important; border-bottom-color: var(--tertiary-btn-border-hover); } .elementor-pagination .page-numbers.current { color: var(--tertiary-btn-text-active) !important; border-bottom-color: var(--tertiary-btn-border-active); } .elementor-pagination .page-numbers.prev, .elementor-pagination .page-numbers.next { display: inline-flex; align-items: center; justify-content: center; font-size: 0; border-bottom-color: transparent; } .elementor-pagination .page-numbers.prev::before, .elementor-pagination .page-numbers.next::before { content: ''; width: 16px; height: 24px; background-color: currentColor; -webkit-mask: var(--icon-arrow-long) no-repeat center / 16px 16px; mask: var(--icon-arrow-long) no-repeat center / 16px 16px; } .elementor-pagination .page-numbers.next::before { transform: scaleX(-1); } .elementor-pagination a.page-numbers.prev:hover, .elementor-pagination a.page-numbers.prev:focus-visible, .elementor-pagination a.page-numbers.next:hover, .elementor-pagination a.page-numbers.next:focus-visible { color: var(--tertiary-btn-border-hover) !important; border-bottom-color: transparent; } /* On the first/last page Elementor renders the arrow as a , not a link. */ .elementor-pagination span.page-numbers.prev, .elementor-pagination span.page-numbers.next { opacity: 0.35; } /* Category filter */ .elementor-widget-taxonomy-filter.tax-filter { --e-filter-normal-text-color: var(--color-headings-dark); --e-filter-hover-text-color: var(--color-link-light-hover); --e-filter-active-text-color: var(--color-accent-dark); } .elementor-widget-taxonomy-filter.tax-filter .e-filter-item { font-family: var(--font-family-heading); font-size: var(--text-base); font-weight: var(--font-weight-bold); line-height: var(--line-height-body); padding: 17px 0; border-style: solid; border-width: 0 0 1px 0; border-color: var(--color-ui-divider); border-radius: 0; } /* The widget hard-codes border-color #0c0d0e on hover and active. */ .elementor-widget-taxonomy-filter.tax-filter .e-filter-item:hover:not([aria-pressed="true"]), .elementor-widget-taxonomy-filter.tax-filter .e-filter-item[aria-pressed="true"] { border-color: var(--color-ui-divider); } /* Cards */ @media(min-width: 1200px){ .card-c:hover { background: var(--color-bg-dark); span, p { color: #fff!important; } .elementor-icon { color: var(--color-accent-light)!important; } } .hover-card-content{ opacity: 0; transition: opacity 0.4s ease-in-out; transform: translateY(20px); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; } .hover-container:hover .hover-card-content { opacity: 1; transform: translateY(0); } } /* Footer bucket */ .fsp-bucket:hover, .fsp-card:hover { background-color: var(--color-primary) !important; img { content: url('/wp-content/uploads/2026/07/fsp-full-color-logo-white.png'); } .text-regular p { color: var(--color-headings-light); } } .aspect-4-3 { aspect-ratio: 4/3 !important; } .aspect-4-3.elementor-widget-image-carousel { aspect-ratio: auto !important; } .aspect-4-3 .swiper-slide-inner { display: block; } .aspect-4-3 .swiper-slide-image { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4/3 !important; object-fit: cover; } .aspect-1-1 { aspect-ratio: 1/1 !important; } .aspect-1-1.elementor-widget-image-carousel { aspect-ratio: auto !important; } .aspect-1-1 .swiper-slide-inner { display: block; } .aspect-1-1 .swiper-slide-image { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; object-fit: cover; } .aspect-3-2 { aspect-ratio: 3/2 !important; } /* Image widget: crop the image to the box instead of letting it overflow. */ .aspect-3-2 img { display: block; width: 100% !important; height: 100% !important; aspect-ratio: 3/2 !important; object-fit: cover; } .aspect-3-2.elementor-widget-image-carousel { aspect-ratio: auto !important; } .aspect-3-2 .swiper-slide-inner { display: block; } .aspect-3-2 .swiper-slide-image { height: auto !important; } .aspect-1-1--628 { height: 628px !important; border-radius: var(--border-radius-xs) !important; } /* Tablet-only divider, matching Elementor's tablet range (768px–1024px). */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .tablet-bottom-border { border-bottom: 1px solid var(--color-ui-white-a30); } /* The translucent white rule above only shows on a dark header. */ .white-block .tablet-bottom-border { border-bottom-color: var(--color-ui-divider); } } /* Search */ /* Astra's .ast-container wrapper is commented out in the parent theme (astra/header.php:69 and astra/footer.php:19), so #primary is a direct child of #content and nothing constrains it. Astra's own container-width CSS targets .ast-container, so the Customizer has no effect here either. This reproduces what the Elementor boxed containers do everywhere else: --container-max at wide viewports, otherwise the viewport less a gutter on each side. --section-side-space already carries the 64px/16px switch at 991px, so there is no breakpoint to duplicate here. Verified to match the site's content containers to the pixel from 390px to 1920px. */ .search .site-content > #primary { width: min(var(--container-max), 100% - var(--section-side-space) * 2); margin-inline: auto; } /* Astra caps the archive heading block separately, via `.search .ast-archive-description { max-width: 1200px }` built from the Customizer Container Width. Left alone it sits 112px narrower than the result cards below it, which reads as a step in the white background. Astra already sets width: 100% on it, so releasing the cap is enough to fill #primary. */ .search .site-content .ast-archive-description { max-width: none; } .search-results .site-content .ast-archive-description { margin-bottom: var(--space-lg); } .search-no-results .site-content .ast-archive-description { padding-bottom: 0; } .search-no-results .site-content .ast-archive-description .page-title { margin-bottom: 0; } .search-no-results .no-results { padding-top: var(--space-md); } .search-no-results .no-results .search-form { margin-top: var(--space-base); } @media (max-width: 921px) { .search .site-content > #primary { padding-block: var(--space-lg); } .search .site-content .ast-archive-description { padding: var(--space-md); } .search.ast-separate-container .ast-blog-layout-5-grid .post-content { padding: var(--space-md); } .search .ast-blog-layout-5-grid .ast-blog-featured-section { margin-bottom: 0; } .search .ast-blog-layout-5-grid .ast-blog-featured-section img { aspect-ratio: 16 / 9; object-fit: cover; } } @media (min-width: 768px) and (max-width: 921px) { .search .ast-blog-layout-5-grid .ast-blog-featured-section { width: 33%; } .search .ast-blog-layout-5-grid .post-content { width: 67%; } .search .ast-blog-layout-5-grid .ast-no-thumb .ast-blog-featured-section { width: unset; } .search .ast-blog-layout-5-grid .ast-no-thumb .post-content { width: 100%; } .search .ast-blog-layout-5-grid .ast-blog-featured-section img { aspect-ratio: auto; height: 100%; } } .error-404 .page-title, .error-404 .page-sub-title { margin-inline: auto; } /* Override Astra theme's search input color */ .elementor-widget-search .e-search-input:focus { color: var(--e-search-input-color); } /* Collapse the gap between FAQ accordion items; padding unchanged */ .elementor-widget-n-accordion { --n-accordion-item-title-space-between: 0px !important; }