/* Theme Name: Estland Description: A custom child theme created by Estland Design in Harrisonburg. Version: 1.0 Author: Estland Author URI: https://estland.us Template: enfold */ /********************************************************** =TOC (Table Of Contents) /********************************************************** TOC (Table Of Contents) Reference Imports/Includes Debug Fonts Spacing fixes Forms Buttons Header Menu (Desktop) Menu (Mobile) Footer Components: - Map - Timeline - Lists - Promobox - Hero - HR - Cards - Cards grid - Background color row - Tabs - Tiles - Sliders - Testimonials slider Global Styles Special Pages /********************************************************** =Reference /********************************************************** /* Media breakpoints / screen sizes /* Phone: ~499px Smartphone: 500px~ Tablet: 768px~ Desktop: 990px~ Widescreen: 1200px~ /********************************************************** =Imports (must be before styles to work) **********************************************************/ /* Colors & Variables */ @import url('styles/variables.css'); /* Resets */ @import url('styles/resets.css'); /* Standard components */ /* @import url('styles/common-header.css'); */ /* @import url('styles/common-button.css'); */ /* @import url('styles/common-tabs--top.css'); */ /* @import url('styles/common-tabs--left.css'); */ /* @import url('styles/common-tiles.css'); */ /* @import url('styles/common-cards.css'); */ /* @import url('snippets/snippet-hr.css'); */ /* @import url('snippets/snippet-blogroll.css'); */ /* @import url('snippets/snippet-timeline.css'); */ /********************************************************** =Font imports (must be before styles to work) **********************************************************/ /* Adobe fonts */ @import url('https://use.typekit.net/bpa2fdj.css'); /********************************************************** =Debug /*********************************************************/ /* Debug box shadow: change min width or comment out to disable */ /*@media( min-width:1px ) { #top { box-shadow: inset 0 0 1rem 0 pink; background-clip: content-box; } #top * > * { box-shadow: inset 0 0 1rem 0 red; } #top * > * > * { box-shadow: inset 0 0 1rem 0 orange; } #top * > * > * > * { box-shadow: inset 0 0 1rem 0 yellow; } #top * > * > * > * > * { box-shadow: inset 0 0 1rem 0 green; } #top * > * > * > * > * > * { box-shadow: inset 0 0 1rem 0 blue; } #top * > * > * > * > * > * > * { box-shadow: inset 0 0 1rem 0 indigo; } #top * > * > * > * > * > * > * > * { box-shadow: inset 0 0 1rem 0 violet; } }*/ /********************************************************** =Fonts /*********************************************************/ /* Headings */ #top h1, #top h2, #top h3, #top h4, #top h5 { color: var(--navy); font-family: var(--family--bold); text-transform: capitalize; } #top :is(h1,h2) strong { color: var(--blue); } #top :is(h3,h4,h5) strong { color: var(--navy); } #top .est-text--on-dark :is(h1,h2,h3,h4,h5) strong { color: var(--green); } /* Fake supertitles above headings */ #top h3:has(+ h1), #top h3:has(+ h2) { color: var(--blue); font-family: var(--family--attention); font-style: italic; font-weight: var(--weight--light); line-height: 1; margin-bottom: calc( ( -1 * var(--padding--small) ) + var(--padding--smaller) ); /* use calculation b/c JS replaces H3 with P */ } /* Alternate H3 style */ #top h3.est-h3--alternate, #top .est-h3--alternate h3 { background: var(--blue); border-radius: var(--radius--small); color: var(--white); line-height: 1; padding: var(--padding--small); } /* Alternate H4 style */ #top#top h4.est-h4--alternate, #top#top .est-h4--alternate h4 { background: var(--white); border-radius: var(--radius--small); color: var(--navy); line-height: 1; padding: var(--padding--small); } /* Basic elements */ p { color: var(--grey); } /* Lists */ .avia_textblock li { color: var(--grey); } /* List items with bold text */ #main .avia_textblock li strong { /* keep under #main so doesn't affect navigation */ color: var(--blue); } #main .est-text--on-dark .avia_textblock li strong { /* keep under #main so doesn't affect navigation */ color: var(--blue); } /* Links */ a { color: var(--blue); } a:where(:hover,:focus-visible) { color: var(--green); } /* Links in headers */ :is(h1,h2,h3,h4,h5,h6) a { color: inherit; } :is(h1,h2,h3,h4,h5,h6) a:where(:hover,:focus-visible) { color: var(--green); } /********************************************************** =Spacing fixes /*********************************************************/ /********************************************************** =Forms /*********************************************************/ /********************************************************** =Buttons /*********************************************************/ /* Arrow within standard button */ #top#top .avia-button::after, #top .more-link::after, #top .est-button a::after { background: currentcolor; content: ""; flex: none; height: 1.5em; margin: -0.25rem; margin-left: 1ch; mask-image: url("./images/est-icon--circled-arrow.svg"); mask-position: center; mask-repeat: no-repeat; mask-size: contain; width: 1.5em; } /* Alternate color buttons */ .est-button--alternate, /* manually specified */ .avia-buttonrow-wrap:not(.est-button--normal) > .avia-button:first-child, /* first button in button row */ form [type="submit"], /* buttons in forms */ .av_searchform_search { /* button on search page */ --button__background: var(--blue); --button__color: var(--white); --button__border: var(--blue); } /* Read more link within header */ #top #avia-menu .more-link { --button__border: transparent; --button__radius: 0; --button__background--hover: transparent; --button__border--hover: transparent; --button__color--hover: var(--red); --padding--input: 0; } #top .more-link::after { margin-left: 0; margin-right: 1ch; order: -1; transition: margin 0.2s ease-in-out; } #top .more-link:where(:hover,:focus-visible)::after { margin-right: 1.5ch; } /* Button with only arrow */ .est-button--arrow { --button__arrow: 3rem; --button__margin: 0.5rem; } .est-button--arrow .avia-button, .est-button--arrow .glide__arrow { transition: margin 0.2s ease-in-out; } #top#top#top .est-button--arrow .avia-button, .est-button--arrow .glide__arrow { /* override resets */ margin-right: var(--button__margin); /* give artificial margin so we make sure no elements move when button widens */ } .est-button--arrow .avia-button:where(:hover,:focus-visible), .est-button--arrow .glide__arrow:where(:hover,:focus-visible) { --button__arrow: 3.5rem; --button__margin: 0; } #top#top#top .est-button--arrow .more-link { font-size: 0; } .est-button--arrow .avia_iconbox_title, #top#top .est-button--arrow .glide__arrow::after, #top .est-button--arrow .more-link::after { background: currentcolor; content: "" !important; height: var(--size--input); mask-image: url("./images/est-icon--arrow-head.svg"), url("./images/est-icon--arrow-line.svg"); mask-position: right center, center; mask-repeat: no-repeat; mask-size: auto 100%, 100%; display: block !important; overflow: hidden; transition: width 0.2s ease-in-out; white-space: nowrap; width: var(--button__arrow); } /* Fix sliders with arrow buttons */ .est-button--arrow { --pagination__color: var(--blue); --pagination__color--hover: var(--white); --pagination__border: var(--blue); --pagination__border--hover: var(--red); --pagination__background: transparent; --pagination__background--hover: var(--red); --pagination__padding: var(--padding--input); } #top#top .est-button--arrow .glide__arrow::after { background: var(--pagination__color); } #top#top .est-button--arrow .glide__arrow:where(:hover,:focus-visible)::after { background: var(--pagination__color--hover); } /* Hide circled arrows from arrow buttons */ #top .est-button--arrow .avia-button::after { display: none; } /* Form buttons only */ #top#top .gform_wrapper button, #top#top .gform_wrapper [type="submit"], #top#top .gform_wrapper .avia-button { margin-right: auto; /* make centered in forms */ } /* Dark rows form buttons */ #top .est-text--on-dark button, #top .est-text--on-dark [type="submit"] { --button__background: transparent; --button__border: var(--white); --button__color: var(--white); --button__background--hover: var(--white); --button__border--hover: transparent; --button__color--hover: var(--blue); } /* Dark rows first button in row */ #top .est-text--on-dark .avia-buttonrow-wrap > .avia-button:first-child { --button__background: var(--white); --button__border: var(--white); --button__color: var(--blue); --button__background--hover: var(--red); --button__border--hover: var(--red); --button__color--hover: var(--white); } /********************************************************** =Header /*********************************************************/ /* Remove categories from blog breadcrumbs */ #top [itemtype="https://schema.org/BreadcrumbList"]:has(a[href*="/category/"]), #top [itemtype="https://schema.org/BreadcrumbList"]:has(a[href*="/category/"]) + .sep { display: none; } /* Make header bar have semi-transparent background */ /* @property --header__bottom-color { syntax: ""; inherits: true; initial-value: transparent; } @property --header__bottom-opacity { syntax: ""; inherits: true; initial-value: 1; } :root { --header__bottom-color: var(--navy--light); } */ #top #header { /* --header__bottom-opacity: 0.95; background: linear-gradient( to bottom, var(--navy--dark), rgb( from var(--header__bottom-color) r g b / var(--header__bottom-opacity) ) ); transition: --header__bottom-color 0.2s ease-in-out, --header__bottom-opacity 0.2s ease-in-out; */ background: var(--blue); } /* When using hero, header should be be transparent */ #top #header:has(+ #main > .est-hero:first-child) { background: transparent; } /* When open submenu, header transparency and color should change */ /* #top #header:has(li.menu-item-top-level.menu-item-has-children:where(:hover,:focus-visible,:focus-within)), .av-burger-overlay-active #top #header { --header__bottom-color: var(--navy--dark); --header__bottom-opacity: 1; } */ /* Since header is semi-transparent, need to set top of #main to use same gradient so it looks opaque at top of page */ /* #top #wrap_all { background-image: linear-gradient( to bottom, var(--navy--dark), rgb( from var(--header__bottom-color) r g b / var(--header__bottom-opacity) ) ); background-position: center top; background-repeat: no-repeat; background-size: 100% calc( var(--header--secondary__height) + var(--header__height) ); } #top #main { background: transparent; } */ /* Header resets */ #top #header_main * { align-items: center; border: none; flex: none; font-size: inherit; height: auto; line-height: 1; max-width: 100%; min-height: 0; min-width: 0; padding: 0; vertical-align: middle; width: auto; } /* Header structure */ #top#top #header_main .inner-container { display: flex; gap: var(--padding--normal); height: var(--header__height); } /* Secondary header (contact info) */ @media( max-width:767px ) { :root { --header--secondary__height: 0px; } #top #header_meta { display: none; } } #top #header_meta, #top #header_meta * { float: none; height: auto; line-height: 1; margin-block: 0; min-height: 0; padding: 0; position: static; } #top #header_meta { height: var(--header--secondary__height); position: relative; } #top #header_meta .menu { display: flex; gap: 0; justify-content: flex-end; } @media( min-width:990px ) { #top #header_meta .menu { gap: var(--padding--smaller); } } /* Must explicitly set so we can move logo into top bar */ #header_meta { z-index: 1; } #header_main { z-index: 2; } /* Header logo */ #header .logo, #header .logo * { display: inline-block; height: var(--logo__height) !important; /* override inline */ width: var(--logo__width); vertical-align: top; } #header .logo { align-items: center; display: flex; margin-right: auto; overflow: visible; top: calc( -1 * var(--header--secondary__height) ); /* have to make logo appear as if it's in top bar */ } #top #header .logo { height: var(--header--secondary__height) !important; /* override layout.css */ z-index: 110; } #header .logo a { transform: scale(1); transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } #header .logo a:where(:hover,:focus-visible) { opacity: 0.75; transform: scale(1.05); } /* Hide admin bar stuff */ #top#top #wp-admin-bar-updates, #top#top #wp-admin-bar-gform-forms, #top#top #wp-admin-bar-my-account, #top#top #wp-admin-bar-customize, #top#top #wp-admin-bar-comments, #top#top #wp-admin-bar-wpseo-menu, #top#top #wp-admin-bar-toolset_admin_bar_menu { display: none; } #wp-admin-bar-edit .ab-item { font-size: 0; } #wp-admin-bar-edit .ab-item::before { font-size: 20px; } #wp-admin-bar-edit .ab-item::after { content: "Edit"; font-size: 13px; } /********************************************************** =Menu (Desktop) /*********************************************************/ /* Dropdown icon for all links */ #top #avia-menu { --arrow__direction: 90deg; } #top #avia-menu::before { background: var(--white); bottom: 100%; content: ""; height: 2px; left: 0; opacity: 0.2; position: absolute; transform: translateY( -50% ); width: 100%; } #top #avia-menu li.menu-item-has-children > a span { margin-right: auto; } #top #avia-menu li.menu-item-has-children > a::after { background-color: currentcolor; content: ""; display: inline-block; flex: none; height: 0.6em; margin-left: 0.5ch; mask-image: url("images/est-icon--caret.svg"); mask-position: center; mask-repeat: no-repeat; mask-size: contain; transform: rotate( var(--arrow__direction) ); transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; width: 0.6em; } /* Top bar structure */ #top #header_meta .menu-item:has(+ .menu-item-avia-special) { margin-right: calc( -1 * var(--padding--small) ); } #top #header_meta li { padding-block: var(--header--secondary__padding); } #top #header_meta li:last-child { margin-right: calc( -1 * var(--padding--smaller) ); /* make right edge of text align with right edge of content */ } /* Top bar links */ #top #header_meta a { background-position: center bottom; background-size: calc( 100% - var(--padding--smaller) - var(--padding--smaller) ) 0; color: var(--white); display: inline-block; font-family: var(--family--normal); font-size: var(--header--secondary__size); font-weight: var(--weight--medium); line-height: var(--header--secondary__size); margin-block: calc( -1 * var(--padding--smaller) ); /* make link float within li but still have some padding */ padding: var(--padding--smaller); } #top #header_meta li:not(:last-child) a:where(:hover,:focus-visible) { color: var(--white); } #top#top #header_meta a:where(:hover,:focus-visible) { background-size: calc( 100% - var(--padding--smaller) - var(--padding--smaller) ) 2px; } /* Top bar telephone link */ @media( min-width:800px ) { #top #header a[href^="tel:"]::before { content: ""; display: inline-block; font-family: var(--family--icon); margin-right: 0.25rem; transform: scaleX(-100%); } } /* Top bar account link */ #top #header_meta .est-button, #top .est-menu__meta .est-button { --button__color: var(--blue); --button__border: var(--white); --button__background: var(--white); --button__color--hover: var(--white); --button__border--hover: var(--red); --button__background--hover: var(--red); --button__height: calc( var(--padding--input) + var(--size--input) + var(--padding--input) ); margin-block: calc( ( var(--button__height) - var(--header--secondary__size) ) / 2 * -1 ); transform: translateY( 2px ); } #top #header_meta .est-button a::after, #top .est-menu__meta .est-button a::after { order: -1; margin-left: -0.25rem; margin-right: 1ch; mask-image: url("./images/est-icon--user.svg"); } /* Main bar structure */ #top #avia-menu > li:first-child { /* make last top level link touch edge */ margin-left: calc( -1 * var(--padding--small) ); } #top #avia-menu > li:has(+ .av-burger-menu-main) { /* make last top level link touch edge */ margin-right: calc( -1 * var(--padding--small) ); } #top .av-main-nav-wrap, #top #avia-menu, #top #avia-menu > li { position: static; /* allow submenus to take full width of content container */ } @media( min-width:768px ) { #top#top .main_menu, #top#top .av-main-nav-wrap, #top#top .av-main-nav { width: 100%; } } #top#top .av-main-nav { justify-content: space-between; } /* Main bar links */ #top#top #avia-menu > li > a { color: var(--white); display: inline-flex; font-size: var(--header-link__size); font-weight: var(--weight--medium); padding-bottom: var(--header-link__padding--bottom); padding-top: var(--header-link__padding--top); padding-inline: var(--padding--small); position: relative; } #top #avia-menu > li > a:where(:hover,:focus-visible,:focus-within) { background-size: 0; } #top #avia-menu > li > a .avia-menu-text { position: relative; } #top #avia-menu > li > a .avia-menu-text::after { background: currentcolor; content: ""; height: 2px; left: 0; opacity: 0; position: absolute; top: 100%; transition: opacity 0.2s ease-in-out; width: 100%; } #top #avia-menu > li:where(:hover,:focus-visible,:focus-within) > a .avia-menu-text::after { opacity: 1; } @media( max-width: 989px ) { #top#top#top#top .est-menu__hide { display: none; } } /* Main submenu structure */ #top #avia-menu > li > ul { background: var(--white); border-radius: var(--radius--normal); margin: 0; max-height: calc( 100vh - var(--admin-bar-height) - var(--header--secondary__height) - var(--header__height) ); /* prevent page overflow */ overflow-x: hidden; overflow-y: auto; padding: var(--padding--normal); width: 100%; } #top #avia-menu > li > ul[style*="visible"] { /* have to target visible b/c no class is added */ display: grid !important; /* override inline */ grid-template-columns: 2fr 2fr 3fr; grid-template-rows: repeat( 10, minmax( 0, min-content ) ); } #top #avia-menu > li > ul::before, #top #avia-menu > li > ul::after { border-bottom: 2px solid var(--blue--light); color: var(--blue); content: "Services"; font-family: var(--family--attention); font-size: var(--size--h3); font-style: italic; grid-column: 1 / 3; grid-row: 1; line-height: 1; padding: 0; padding-bottom: var(--padding--smaller); z-index: 100; /* to overcome blog section */ } #top #avia-menu > li#menu-item-712 > ul::before { content: "Services"; } #top #avia-menu > li#menu-item-874 > ul::before { content: "Products"; } #top #avia-menu > li#menu-item-714 > ul::before { content: "Service Areas"; } #top #avia-menu > li#menu-item-715 > ul::before { content: "About Us"; } #top #avia-menu > li > ul::after { content: "Latest Blogs"; grid-column: 3; padding-left: var(--padding--normal); } /* Submenu main level (left column) */ #top #avia-menu > li > ul > li { display: grid; grid-column: 1 / -1; grid-row: 2 / -1; grid-template-columns: subgrid; /* have to make li cover entire ul so we can use subgrid throughout */ grid-template-rows: subgrid; pointer-events: none; /* disable clicks on container b/c subgrid will have them overlapping */ } /* Submenu main level - links */ #top #avia-menu > li > ul > li > a { --arrow__direction: 0deg; background: transparent; color: var(--navy); display: flex; font-size: var(--size--h4); font-weight: var(--weight--medium); padding: var(--padding--small) var(--padding--smaller); padding-left: 0; pointer-events: initial; position: relative; } #top #avia-menu > li > ul > li:focus-within > a, #top #avia-menu > li > ul > li:has(> ul:hover) > a { color: var(--white); } #top #avia-menu > li > ul > li:nth-child(1) > a { /* have to manually assign row for each link in main level of submenu since using subgrid */ grid-row: 1; } #top #avia-menu > li > ul > li:nth-child(2) > a { grid-row: 2; } #top #avia-menu > li > ul > li:nth-child(3) > a { grid-row: 3; } #top #avia-menu > li > ul > li:nth-child(4) > a { grid-row: 4; } #top #avia-menu > li > ul > li:nth-child(5) > a { grid-row: 5; } #top #avia-menu > li > ul > li:nth-child(6) > a { grid-row: 6; } #top #avia-menu > li > ul > li:nth-child(7) > a { grid-row: 7; } #top #avia-menu > li > ul > li:nth-child(8) > a { grid-row: 8; } #top #avia-menu > li > ul > li:nth-child(9) > a { grid-row: 9; } /* Submenu main level - links decoration */ #top #avia-menu > li > ul > li > a::after { margin-left: auto; } #top #avia-menu > li > ul > li > a:not(:hover,:focus-visible)::after { color: var(--blue--light); } #top #avia-menu > li > ul > li > a::before { background: var(--blue--lighter); border-radius: 0 var(--radius--small) var(--radius--small) 0; bottom: 0; content: ""; left: calc( -1 * var(--padding--normal) ); opacity: 0; position: absolute; right: calc( 100% + var(--padding--normal) ); top: 0; transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out, right 0.2s ease-in-out; z-index: -1; } #top #avia-menu > li > ul > li:where(:hover,:focus-visible,:focus-within) > a::before { opacity: 1; right: 0; } #top #avia-menu > li > ul > li:focus-within > a::before, #top #avia-menu > li > ul > li:has(> ul:hover) > a::before { background: var(--green); } /* Submenu main level - blog posts */ #top #avia-menu > li > ul > li.est-menu__blog { } #top #avia-menu > li > ul > li.est-menu__blog .template-blog { align-self: stretch; display: flex !important; /* override inline styles */ flex-direction: column; grid-column: 3; grid-row: 1 / -1; margin-left: var(--padding--normal); opacity: 1 !important; padding-top: var(--padding--small); /* make flush with top link */ position: relative; right: auto !important; visibility: visible !important; } #top #avia-menu > li > ul > li.est-menu__blog .template-blog::before { background: var(--blue--lighter); content: ""; inset: calc( -1 * var(--padding--normal) ); position: absolute; top: -500px; /* arbitrary value to make sure top of menu is covered (overflow is hidden) */ } #top#top #avia-menu .post-entry { background: transparent; border-radius: 0; box-shadow: none; flex-direction: row; gap: var(--padding--small); overflow: visible; padding: 0; width: 100%; } #top#top #avia-menu .big-preview { align-self: stretch; background: var(--blue--lighter); border-radius: var(--radius--small); display: none; height: auto; margin: 0; overflow: hidden; width: 150px; } @media( min-width:1100px ) { #top#top #avia-menu .big-preview { display: block; } } #top#top #avia-menu .big-preview * { height: 100%; object-position: center 30%; width: 100%; } #top#top #avia-menu .entry-content-wrapper, #top#top #avia-menu .entry-content { align-items: stretch; display: flex; flex-direction: column; flex: 1; overflow: visible; } @media( min-width:1100px ) { #top#top #avia-menu .entry-content-wrapper { padding-block: var(--padding--small); } } #top#top #avia-menu .entry-content-header { display: block; } #top#top #avia-menu .post-title { font-size: var(--size--h4); } #top#top #avia-menu .post-meta-infos, #top#top #avia-menu .post_author_timeline { display: none; } #top#top #avia-menu .entry-content-wrapper p { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media( min-width:1100px ) { #top#top #avia-menu .entry-content-wrapper p { display: block; } } #top#top #avia-menu .read-more-link { grid-column: 1 / -1; } /* Submenu inner links (middle column) */ #top #avia-menu > li > ul > li > ul { align-items: stretch; box-shadow: none; flex-direction: column; height: 100%; grid-column: 2 / 2; grid-column: 2; grid-row: 1 / -1; left: 0; /* override layout.css */ pointer-events: initial; position: relative; /* override layout.css */ width: 100%; } #top #avia-menu > li > ul > li > ul[style*="visible"] { /* targets when Enfold is making submenu visible */ display: flex !important; /* override inline style */ } #top #avia-menu > li > ul > li > ul > li { } #top #avia-menu > li > ul > li > ul > li a { background: transparent; color: var(--navy); font-size: var(--size--p); font-weight: var(--weight--medium); padding: var(--padding--small); width: 100%; } #top#top #avia-menu > li > ul > li > ul > li a:where(:hover,:focus-visible) .avia-menu-text { /* override resets */ background-image: linear-gradient( currentcolor, currentcolor ); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; color: var(--blue); } /* Debug */ /* #top #avia-menu li.menu-item-top-level > ul > li:where(:hover,:focus-visible,:focus-within) > ul { transition: opacity 0.2s ease-in-out; } #avia-menu * { transition-delay: 0.5s !important; } */ /* #menu-item-712 > .sub-menu { display: grid !important; opacity: 1 !important; visibility: visible !important; display: grid !important; grid-template-columns: 2fr 2fr 3fr; grid-template-rows: repeat(10, minmax(0, min-content)); } */ /********************************************************** =Menu (Mobile) /*********************************************************/ /* Add padding to header only on mobile */ @media( max-width:767px ) { :root { --header__padding--top: var(--padding--small); --header__padding--bottom: var(--padding--small); } } /* Fixes to make hamburger menu scroll on mobile */ @media( max-width:767px ) { /* Make admin bar fixed on mobile b/c hamburger button is fixed */ #top#top#top #wpadminbar { /* overcome layout.css */ position: fixed; } /* Specify header wrapper height on mobile so we can make logo fixed */ #top#top#top #header { /* override layout.css */ height: var(--header__height); } /* Animation to give logo time to fade in */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Make logo fixed only when menu is open */ .av-burger-overlay-active-delayed .av-logo-container { position: fixed; } .av-burger-overlay-active-delayed .logo { animation: fadeIn; animation-delay: 0.3s; animation-duration: 0.2s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; opacity: 0; } } /* Hamburger button wrapper */ #top#top .av-burger-menu-main { --hamburger__padding: var(--padding--smaller); --hamburger__color: var(--blue); background: transparent; height: var(--header__height); /*margin: calc( -1 * var(--calculated-gutter-width) );*/ padding-block: var(--header__padding--top); position: fixed; right: var(--page-gutter); transition: background 0.2s ease-in-out; width: calc( var(--hamburger__padding) + var(--padding--normal) + var(--hamburger__padding) ); z-index: 110; } #top#top .av-burger-menu-main > a::before { display: none; } /* Hamburger button inner container */ #top#top#top#top .av-hamburger-box { padding: var(--hamburger__padding); } @media( max-width:767px ) { #top .av-hamburger-box { background: var(--blue--light); border-radius: var(--radius--small); } #top .is-active .av-hamburger-box { background: var(--blue); } } #top#top .av-hamburger-box:where(:hover,:focus-visible) { --hamburger__color: var(--white); background: var(--red); } /* Hamburger lines */ #top#top#top#top .burger-menu-open .av-burger-menu-main:not(:hover,:focus-visible) .av-hamburger-inner { /* background: var(--navy); */ } /* Hamburger menu structure */ #top#top .av-burger-overlay, #top#top .av-burger-overlay-scroll, #top#top .av-burger-overlay-inner { /* height: 100%; */ margin: 0 !important; /* override Enfold */ padding: 0 !important; /*max-height: 100%; overflow-x: visible; overflow-y: visible;*/ width: 100%; } #top#top .av-main-nav-wrap { overflow: visible; /* background: yellow; */ /* box-shadow: inset 0 0 1rem 0 yellow; */ } #top#top .av-burger-overlay { /* background: green; */ /* box-shadow: 0 0 20px 0 green; */ height: -webkit-fill-available; /* account for shifting URL bar, etc on iOS */ height: 100dvh; height: 100lvh; /* height: stretch; */ /*height: 50%; overflow: scroll; pointer-events: none; top: 0;*/ top: 10dvh; top: 20px; top: 0; transform: translate3d(0, 0, 0); overflow: visible; } #top .av-burger-overlay::before, #top .av-burger-overlay::after { /* cover the transparent section at top when hamburger menu is open */ /*content: ""; background: var(--blue); height: var(--header__height); top: var(--admin-bar-height); left: 0; width: 100%; position: absolute; z-index: 1;*/ /* content: ""; */ /* box-shadow: inset 0 0 0 1rem green; */ left: 0; top: 0; height: 50svh; position: absolute; width: 50px; z-index: 999; } #top .av-burger-overlay::before { top: calc( 50lvh - 50svh ); } #top .av-burger-overlay::after { /* box-shadow: inset 0 0 0 1rem yellow; */ height: 50lvh; left: auto; right: 0; } #top#top .av-burger-overlay-scroll { /*border: 30px solid blue;*/ background: rgb( 255,255,255, 0 ); /* mobile bug where transparent border isn't rendered so had to use transparent background to force it */ background: var(--blue); border-top: calc( var(--admin-bar-height) + var(--header--secondary__height) + var(--header__height) ) solid transparent; /* set below header w/out affecting height */ overflow-y: scroll; overflow: scroll; pointer-events: none; overflow-x: hidden; overflow-y: auto; height: 200px; height: 100vh; max-height: -webkit-fill-available; max-height: 100vh; } #top .av-burger-overlay-scroll * { pointer-events: initial; } #top#top .av-burger-overlay-inner { /*--header__bottom-color: var(--navy--light); overflow: scroll;*/ height: 100%; /* height: 50vh; max-height: 300px; */ overflow-x: hidden; overflow-y: auto; /* box-shadow: 0 0 0 1rem yellow; */ display: block; } #top #av-burger-menu-ul { align-items: stretch; background: var(--white); border-radius: var(--radius--normal); display: flex; flex-direction: column; height: auto; margin-inline: var(--padding--small); overflow: hidden; padding: 0 !important; /* override inline style */ /* max-height: 300px; */ } /* Hamburger menu links */ #top .av-burger-overlay a { --mobile__background: transparent; --mobile__color: var(--navy); --mobile__padding: var(--padding--small); --mobile__size: var(--size--h3); } #top#top#top .av-burger-overlay a { /* override Enfold layout.css */ font-family: var(--family--p); font-weight: var(--weight--medium); font-size: var(--mobile__size); line-height: var(--mobile__size); padding: var(--mobile__padding) var(--page-gutter); transition: color 0.2s ease-in-out; } #top#top#top#top .av-burger-overlay a { /* override layout.css */ background: var(--mobile__background); color: var(--mobile__color); display: flex; } #top#top#top .av-burger-overlay li:where(:hover,:focus-visible) > a, #top#top#top .av-burger-overlay li.av-show-submenu > a { --mobile__color: var(--green); } #top .av-burger-overlay a:where(:hover,:focus-visible) { --mobile__background: var(--blue--lighter); } #top#top#top .av-burger-overlay a * { color: inherit; display: inline-block; font: inherit; line-height: inherit; vertical-align: middle; } #top#top .av-burger-overlay .avia-menu-text { flex: 1; margin-right: auto; white-space: normal; } /* Hamburger menu dropdown arrow */ #top#top#top .av-burger-overlay .av-submenu-indicator { --mobile__rotate: 0deg; align-self: stretch; border-radius: 50%; bottom: auto; box-shadow: inset 0 0 0 2px currentcolor; flex: none; left: auto; margin: 0; margin-left: 1ch; opacity: 1; position: relative; right: auto; top: auto; transform: none; width: 1em; } #top#top#top .av-burger-overlay li:where(:hover,:focus-visible) > a > .av-submenu-indicator, #top#top#top .av-burger-overlay li.av-show-submenu > a > .av-submenu-indicator { background: var(--green); box-shadow: inset 0 0 0 2px var(--green); color: var(--white); } #top#top#top .av-burger-overlay .av-submenu-indicator::before, #top#top#top .av-burger-overlay .av-submenu-indicator::after { background: currentcolor; border-radius: 2px; content: ""; height: 2px; left: 50%; position: absolute; top: 50%; transform: translate( -50%, -50% ) rotate( var(--mobile__rotate) ); transition: transform 0.2s ease-in-out; width: 50%; } #top#top#top .av-burger-overlay .av-submenu-indicator::after { --mobile__rotate: 90deg; } #top#top#top .av-burger-overlay .av-show-submenu > a > .av-submenu-indicator::after { --mobile__rotate: 0deg; } /* Border between hamburger links */ #top .av-burger-overlay-inner > ul > li + li:not(.est-menu__meta) > a::before { background: var(--blue--light); background-clip: content-box; bottom: 100%; content: ""; height: 2px; left: 0; padding-inline: inherit; position: absolute; right: 0; transform: translateY( 50% ); } /* Hamburger submenus */ #top#top .av-burger-overlay .av-show-submenu > ul { align-items: stretch; display: flex !important; /* override inline style */ flex-direction: column; margin-top: 0; } /* Hamburger menu submenu links */ #top .av-burger-overlay .sub-menu a { --mobile__size: var(--size--p); } /* Hamburger menu submenu submenu links */ #top#top .av-burger-overlay .sub-menu .sub-menu a { /* override enfold.css */ border-left: 2px solid var(--blue--light); margin-left: var(--padding--small); } /* Manually adjust all hamburger menu links */ .menu-item-712 .menu-item-712 .avia-menu-text::before, .menu-item-871 .menu-item-871 .avia-menu-text::before, .menu-item-874 .menu-item-874 .avia-menu-text::before, .menu-item-714 .menu-item-714 .avia-menu-text::before { content: "Our "; } .menu-item-715 .menu-item-715 .avia-menu-text::before { content: "Learn "; } .menu-item-888 .menu-item-888 .avia-menu-text::before { content: "Learn More: "; } .menu-item-892 .menu-item-892 .avia-menu-text::before { content: "About "; } .menu-item-718 .menu-item-718 .avia-menu-text::after, .menu-item-719 .menu-item-719 .avia-menu-text::after, .menu-item-861 .menu-item-861 .avia-menu-text::after, .menu-item-866 .menu-item-866 .avia-menu-text::after, .menu-item-869 .menu-item-869 .avia-menu-text::after { content: " Services"; } .menu-item-898 .menu-item-898 .avia-menu-text::after { content: " With Burch"; } /* Hamburger meta links */ #top#top .est-menu__meta { padding-inline: var(--page-gutter); padding-bottom: var(--padding--normal); } #top#top#top .est-menu__meta a { --mobile__background: transparent; --mobile__color: var(--white); --mobile__size: var(--size--p); margin-top: -0.5px; padding-block: 1rem; } #top#top#top .est-menu__meta a:where(:hover,:focus-visible) { text-decoration: underline; } #top .est-menu__meta a::before { display: none; } #top#top .est-menu__meta .est-button { --button__background: var(--white); --button__border: var(--white); --button__color: var(--blue); --button__background--hover: var(--red); --button__border--hover: var(--red); --button__color--hover: var(--white); margin-top: var(--padding--small); text-align: left; } #top#top#top#top .est-menu__meta .est-button a { background: var(--button__background); box-shadow: inset 0 0 0 2px var(--button__border); color: var(--button__color); display: inline-flex; font-size: var(--size--input); line-height: var(--size--input); margin-left: var(--padding--small); padding-block: var(--padding--input); text-decoration: none; } #top#top#top#top .est-menu__meta .est-button a:where(:hover,:focus-visible) { background: var(--button__background--hover); box-shadow: inset 0 0 0 2px var(--button__border--hover); color: var(--button__color--hover); } #top#top .est-menu__meta .est-button a::before { display: none; } /********************************************************** =Footer /*********************************************************/ /* Footer has .est-bg--blue .est-bg--swoop .est-text--on-dark applied via JS */ #footer { --row-bottom-padding: var(--padding--normal); background-image: url("/wp-content/uploads/2025/11/burch-truck-background-min.png"); } #top #footer { background-position: center top; background-repeat: no-repeat; background-size: auto 500px; } @media( min-width:990px ) { #top #footer { background-size: 100% auto; } } #top #footer, #top #footer::before { border-bottom-right-radius: 0; } /* Footer inner column */ #footer .flex_column { display: flex; flex-direction: column; } @media( min-width:989px ) { #footer .flex_column { display: grid; gap: var(--padding--normal); grid-template-columns: repeat( 12, 1fr ); grid-template-rows: repeat( 3, minmax( 0, min-content ) ); } } #footer .flex_column::before, #footer .flex_column::after { display: none; } /* Footer all widgets */ #top #footer .widget { width: 100%; } @media( max-width:989px ) { #top #footer .widget + .widget { margin-top: var(--padding--normal); } } #footer .widget::before, #footer .widget::after, #footer .separator { display: none; } /* Footer logo, tagline, address, socials */ #footer .widget:nth-child(1) { grid-column: 1 / span 6; grid-row: 1 / span 2; } #footer .widget:nth-child(1) .custom-html-widget { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--padding--normal); } @media( max-width:989px ) { #footer .widget:nth-child(1) .custom-html-widget > * { width: 100%; } } @media( min-width:990px ) { #footer .widget:nth-child(1) .custom-html-widget { flex-direction: row; } } /* Footer logo */ #footer .est-footer__logo, #footer .est-footer__logo a, #footer .est-footer__logo img { height: auto; width: 100%; } #footer .est-footer__logo a { transform: scale( 0.95 ); transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } #footer .est-footer__logo a:where(:hover,:focus-visible) { transform: scale( 1 ); } /* Footer HR */ #footer .est-footer__hr { background: var(--blue--light); height: 2px; opacity: 0.5; width: 100%; } /* Footer tagline */ #footer .est-footer__tagline { flex-grow: 1; font-size: var(--size--h3); line-height: 1.1; width: 30%; } /* Footer address */ #footer .est-footer__contact { --icon__size: 2em; display: flex; flex-direction: column; flex-grow: 1; gap: var(--padding--smaller); width: 50%; } #footer .est-footer__contact a { text-decoration: underline; } #footer .est-footer__contact a:where(:hover,:focus-visible) { font-weight: var(--weight--medium); } /* Footer button */ #footer .est-footer__buttons { flex-grow: 1; width: 30%; } /* Footer socials */ @media( max-width:989px ) { #footer .widget:nth-child(1) .est-footer__socials { display: none; } } #footer .est-footer__socials--mobile .est-footer__socials { justify-content: center; width: 100%; } @media( min-width:990px ) { #footer .est-footer__socials--mobile { display: none; } } #footer .est-footer__socials { display: flex; flex-grow: 1; gap: var(--padding--smaller); justify-content: center; width: 50%; } @media( min-width:990px ) { #footer .est-footer__socials { justify-content: flex-start; } } /* Footer quick links, customer care, newsletter */ #footer .widget:nth-child(2), #footer .widget:nth-child(3), #footer .widget:nth-child(4) { background: var(--blue--lighter); border-radius: var(--radius--normal); box-shadow: var(--box-shadow--inset); padding: var(--padding--small); } /* Footer quick links, customer care */ #footer .widget:nth-child(2) h3, #footer .widget:nth-child(3) h3 { border-bottom: 2px solid var(--blue--light); padding-bottom: var(--padding--small); } /* Footer quick links */ #footer .widget:nth-child(2) { grid-column: 7 / span 3; grid-row: 1; } /* Footer customer care */ #footer .widget:nth-child(3) { grid-column: 10 / span 3; grid-row: 1; } /* Footer newsletter */ #footer .widget:nth-child(4) { grid-column: 7 / span 6; grid-row: 2; } /* Footer service area pages */ #footer .widget:nth-child(5), #footer .widget:nth-child(5) > div, #footer .widget:nth-child(5) > div > ul { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; width: 100%; } #footer .widget:nth-child(5) { grid-row: 3; text-align: left; } /* Footer service area columns */ #footer .widget:nth-child(5) > div > ul > li:nth-child(1) { grid-column: 1 / span 2; } #footer .widget:nth-child(5) > div > ul > li:nth-child(2) { grid-column: 3 / span 2; } #footer .widget:nth-child(5) > div > ul > li:nth-child(3) { grid-column: 5 / span 2; } #footer .widget:nth-child(5) > div > ul > li:nth-child(4) { grid-column: 7 / span 2; } #footer .widget:nth-child(5) > div > ul > li:nth-child(5) { grid-column: 9 / span 2; } #footer .widget:nth-child(5) > div > ul > li:nth-child(6) { grid-column: 11 / span 2; } #top #footer .widget:nth-child(5) ul { margin-top: 0; position: relative; } #top #footer .widget:nth-child(5) > div > ul > li + li::before { background: var(--blue--light); bottom: 0; content: ""; display: block; left: calc( -1 * ( var(--padding--normal) / 2 ) ); opacity: 0.5; position: absolute; top: 0; transform: translateX( -50% ); width: 2px; } /* Footer service area links */ #footer .widget:nth-child(5) > div > ul > li > a { font-weight: var(--weight--bold); } #top #footer .widget:nth-child(5) li { margin-top: 0; } #top #footer .widget:nth-child(5) li + li { margin-top: var(--padding--normal); } @media( min-width:990px ) { #top #footer .widget:nth-child(5) li + li { margin-top: 0; } } #footer .widget:nth-child(5) a { background: transparent; margin: 0; } #top #footer .widget:nth-child(5) a:where(:hover,:focus-visible) { text-decoration: underline; } /* Footer service area submenu */ #top #footer .widget:nth-child(5) .sub-menu, #top #footer .widget:nth-child(5) .sub-menu li + li { margin-top: var(--padding--smaller); } @media( max-width:989px ) { #footer .widget:nth-child(5) > div > ul > li > ul { border-top: 1px solid var(--blue--light); padding-top: var(--padding--smaller); } } /* Socket */ #socket { background: var(--navy); } #socket .container { background-image: linear-gradient( var(--blue--light), var(--blue--light) ); background-position: center 0; background-repeat: no-repeat; background-size: var(--calculated-content-width) 2px; padding-top: var(--padding--small); } #socket span, #socket a:not(:hover,:focus-visible) { color: var(--white); } /********************************************************** =Blogroll /*********************************************************/ /* Blogroll container */ #top .av-alb-blogposts { gap: var(--padding--normal); } /* Individual blog in blogroll */ #top .av-alb-blogposts .post-entry { --blog__padding: var(--padding--normal); background: var(--blue--lighter); border-radius: var(--radius--normal); box-shadow: var(--box-shadow--inset); display: flex; flex-direction: column; overflow: hidden; } @media( min-width:990px ) { #main .av-alb-blogposts .post-entry { max-width: 50%; } } /* Blogroll content wrapper */ #top .av-alb-blogposts .entry-content-wrapper { display: grid; gap: var(--padding--small); grid-template-columns: 1fr minmax( 0, auto ); grid-template-rows: repeat( 3, minmax( 0, auto ) ); } #top .av-alb-blogposts .entry-content-header, #top .av-alb-blogposts .entry-content { align-items: center; display: grid; gap: inherit; grid-column: 1 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; pointer-events: none; } #top .av-alb-blogposts .entry-content-header *, #top .av-alb-blogposts .entry-content * { pointer-events: initial; } #top .av-alb-blogposts .post-title { grid-column: 1 / -1; grid-row: 1; } #top .av-alb-blogposts .entry-content p { grid-column: 1 / -1; grid-row: 2; } #top .av-alb-blogposts .post-meta-infos { grid-column: 1; grid-row: 3; } #top .av-alb-blogposts .read-more-link { grid-column: 2; grid-row: 3; } /* Blogroll text */ #top#top .av-alb-blogposts .post-title { font-size: var(--size--h3); } #top .av-alb-blogposts .post-meta-infos { color: var(--blue); font-size: var(--size--s); font-weight: var(--weight--medium); text-transform: uppercase; } /* Image */ #top#top .av-alb-blogposts .big-preview { background: var(--grey); height: 250px; } /********************************************************** =Accordion /*********************************************************/ /* Accordions - Individual */ .single_toggle { overflow: visible; } #top#top .togglecontainer { --accordion-icon-width: var(--size--h4); } #top#top .togglecontainer, #top#top .togglecontainer * { border: none; bottom: auto; box-shadow: none; left: auto; list-style-type: none; margin: 0; padding: 0; right: auto; top: auto; } #top#top .av_toggle_section { background: var(--white); border-radius: var(--radius--small); box-shadow: var(--box-shadow); position: relative; } #top#top .av_toggle_section::before { border-radius: 0 0 var(--radius--small) var(--radius--small); bottom: 0; display: block; content: ""; height: var(--accent-border-weight); left: 0; opacity: 0; position: absolute; right: 0; transition: background 0.2s ease-in-out; visibility: visible; z-index: 1; } #top#top .av_toggle_section:has(.toggler:where(:hover,:focus-visible):not(.activeTitle))::before { background: var(--blue--lighter); opacity: 1; } #top#top .av_toggle_section:has(.activeTitle) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #top#top .toggle_wrap { background-color: var(--white); border-radius: 0 0 var(--radius--small) var(--radius--small); box-shadow: var(--box-shadow); } #top#top .est-accordion--overlap .toggle_wrap.active_tc { position: absolute; z-index: 3; } :root { --toggler-padding: var(--padding--normal); } #top#top .toggler { align-items: center; background: var(--white); border-radius: 0; color: var(--navy); display: flex; font-family: var(--family--normal); font-size: var(--size--h3); gap: var(--padding--smaller); line-height: 1; padding: var(--toggler-padding); } #top#top#top .toggler:where(:hover,:focus-visible) { background: var(--blue--lighter); } #top#top#top .active_tc { border-bottom: solid var(--accent-border-weight) var(--green--bright); } #top#top .single_toggle:has(.active_tc) .toggler { background: var(--navy); border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--white); } #top#top .toggler:has(+ .active_tc) { z-index: 4; } #top#top .av_toggle_section:has(.active_tc) ~ .av_toggle_section .toggler:has(+ .active_tc) { z-index: 2; } #top#top .av_toggle_section:has(.active_tc) ~ .av_toggle_section .active_tc { z-index: 1; } /* Toggle icon */ #top#top .toggle_icon { border-radius: 50%; box-shadow: 0 0 0 2px currentcolor; flex: none; height: var(--accordion-icon-width); margin-left: auto; opacity: 1; padding: 2px; position: relative; width: var(--accordion-icon-width); } #top#top .toggle_icon * { background: currentcolor; height: 3px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(0deg); transition: background 0.2s ease-in-out,transform 0.2s ease-in-out; width: calc( var(--accordion-icon-width) - 5px ); } #top#top .toggler:not(.activeTitle) .vert_icon { transform: translate(-50%,-50%) rotate(-90deg); } /* Accordion content */ #top#top .toggle_content { background: transparent; padding: var(--padding--normal); } #top#top#top .toggle_content > :not(:first-child) { margin-top: var(--padding--small); } .toggle_content a { background-image: linear-gradient(transparent); font-weight: var(--weight--bold); } .toggle_content a:hover { background-image: linear-gradient(currentcolor); } /********************************************************** =Maps /*********************************************************/ /* Filtered map */ #top .mapsvg-disabled { opacity: 0.1 !important; } /* Map filters (just used in JS, not shown) */ #top .est-map__filters { display: none; } /* Force header hidden even on mobile */ #top .mapsvg-header { display: none !important; /* override mapsvg inline */ } /* Filtered map buttons */ #top .est-map__buttons { /*--button__background--hover: var(--blue); --button__radius: var(--padding--small);*/ } #top .est-map__buttons a { /*--button__background--hover: var(--blue);*/ cursor: pointer; } #top .est-map__button--active { --button__background: var(--blue); --button__border: var(--blue); --button__color: var(--white); } /* Map styling */ #top .mapsvg-region { cursor: pointer; fill: rgb( from var(--red) r g b / 0.3 ) !important; /* all importants required to get around inline styling from mapsvg */ opacity: 1 !important; stroke: var(--red) !important; stroke-miterlimit: 1 !important; stroke-width: 1px !important; vector-effect: non-scaling-stroke !important; } #top .mapsvg-region[id^="extended"] { stroke-width: 0.5 !important; } #top .mapsvg-region[id^="primary"], #top .mapsvg-region[id^="service"], #top .mapsvg-region[id^="law"] { stroke-width: 0.25 !important; } #top .mapsvg-region:hover { fill: rgb( from var(--red) r g b / 0.6 ) !important; } #top .mapsvg-region[id*="bounding"] { fill: transparent !important; opacity: 0 !important; } #top .mapsvg-region-active, #top .mapsvg-region-active:hover { fill: rgb( from var(--green) r g b / 0.6 ) !important; } #top .mapsvg-disabled { opacity: 0 !important; pointer-events: none; } /* Fix Google info in map */ #top :is(.gmnoprint,.gm-style-cc) :is(span,a) { color: black !important; /* override inline styles */ font-family: var(--family--normal) !important; font-size: var(--size--xxs) !important; font-weight: var(--weight--normal) !important; } /* Info accordion w/ map */ #top .est-map h3 { background: var(--blue--lighter); border-radius: var(--radius--small); font-size: var(--size--h4); padding: var(--padding--smaller); } #top .est-map__accordion { --toggler-padding: 0.5rem; } /* Accordion container */ #top#top#top .est-map__accordion .av_toggle_section { background: transparent; border-radius: 0; border-top: 2px solid var(--blue--light); box-shadow: none; margin-top: 0; } #top#top#top .est-map__accordion .av_toggle_section:first-child { border-top: none; } #top#top#top .est-map__accordion .av_toggle_section::before { display: none; } #top#top .est-map__accordion .av_textblock_section + .togglecontainer { margin-top: var(--padding--smaller); } #top#top .est-map__accordion .av_textblock_section + .togglecontainer + .av_textblock_section { margin-top: var(--padding--normal); } /* Accordion title */ #top#top#top .est-map__accordion .toggler { background: transparent; border-radius: 0; color: var(--navy); font-size: var(--size--h4); padding-inline: var(--padding--smaller); } #top#top#top .est-map__accordion .toggler:where(:hover,:focus-visible) { background: var(--blue--lighter); } #top#top#top .est-map__accordion .activeTitle { background: transparent; } /* Accordion content */ #top#top#top .est-map__accordion .toggle_wrap { background: transparent; border: none; box-shadow: none; padding: var(--padding--smaller); } #top#top#top .est-map__accordion .toggle_content { padding-inline: 0; padding-top: 0; } /* Accordion inner content */ #top#top .est-map__accordion h4 { color: var(--blue); font-family: var(--family--attention); font-size: var(--size--h5); font-style: italic; margin-top: var(--padding--smaller); } #top#top#top .est-map__accordion li { padding-left: 0; } #top#top#top .est-map__accordion .toggle_content { padding-bottom: 0.5rem; } @media( min-width:768px ) { #top#top#top .est-map__accordion .toggle_content { display: grid; gap: var(--padding--smaller); grid-template-columns: 1fr 1fr; } #top#top#top .est-map__accordion .toggle_content :nth-child(1) { grid-column: 1; grid-row: 1; } #top#top#top .est-map__accordion .toggle_content :nth-child(2) { grid-column: 1; grid-row: 2; } #top#top#top .est-map__accordion .toggle_content :nth-child(3) { grid-column: 2; grid-row: 1; } #top#top#top .est-map__accordion .toggle_content :nth-child(4) { grid-column: 2; grid-row: 2; } #top#top#top .est-map__accordion .toggle_content h4, #top#top#top .est-map__accordion .toggle_content ul { margin: 0; } } /* Entire map */ #top .mapsvg { background: var(--navy--dark); } #top .est-map--services .mapsvg { padding-bottom: max( 400px, min( 80vh, 500px ) ) !important; /* override inline style */ } /* Map buttons container */ #top#top#top#top .mapsvg-buttons { background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0; margin-right: var(--padding--small); margin-top: var(--padding--small); padding: 0; } #top .mapsvg-btn-group { box-shadow: none; display: flex; flex-direction: column; gap: var(--padding--smaller); } /* Map buttons */ #top .mapsvg-btn-map { background: var(--navy); border: none; border-radius: var(--radius--small); box-shadow: none; height: var(--padding--normal); margin: 0; opacity: 0.7; position: relative; transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out; width: var(--padding--normal); } #top .mapsvg-btn-map:where(:hover,:focus-visible) { background: var(--navy); opacity: 1; } #top .mapsvg-btn-map::before, #top .mapsvg-btn-map::after { background: var(--white); height: 2px; left: 50%; position: absolute; top: 50%; transform: translate( -50%, -50% ); width: 50%; } #top .mapsvg-btn-map::after { height: 50%; width: 2px; } /* Hide advanced controls */ #top .mapsvg .gm-bundled-control { display: none; } /* Loading */ #top .mapsvg .mapsvg-loading { background: var(--white); border: none; border-radius: var(--radius--small); box-shadow: none; } #top .mapsvg .spinner-border { border-color: var(--navy); border-top-color: transparent; } #top .mapsvg .mapsvg-loading-text { color: var(--navy); font-weight: var(--weight--bold); } /* Map within split row */ :root { --map__height: 500px; } #top .est-split__media:has(.mapsvg), #top .est-split__media .av_textblock_section, #top .est-split__media .avia_textblock, #top .est-split__media .mapsvg, #top .est-split__media .mapsvg-wrap-all, #top .est-split__media .mapsvg-wrap, #top .est-split__media .mapsvg-with-google-map { height: var(--map__height) !important; /* overcome MapSVG styles */ padding-bottom: 0 !important; /* overcome MapSVG styles */ } @media( min-width:768px ) { :root { --map__height: 100%; } } #top .est-split__media .mapsvg, #top .est-split__media .mapsvg-wrap-all { cursor: pointer; } #top .est-split__media .mapsvg *, #top .est-split__media .mapsvg-wrap-all * { pointer-events: none; } /********************************************************** =Timeline /*********************************************************/ /* Timeline spacing */ #top .av_textblock_section + .avia-timeline-container { margin-top: var(--padding--normal); } /* Timeline wrapper */ #top .avia-timeline, #top .avia-timeline *, #top .av-milestone-indicator::before { align-items: center; border: none; display: inline-flex; float: none; margin: 0; max-width: 100%; padding: 0; position: static; } #top .avia-timeline { --timeline__gap: var(--padding--small); --timeline__circle: var(--padding--large); --timeline__color: var(--blue--light); display: flex; flex-direction: column; flex-wrap: wrap; } /* Timeline each milestone */ #top#top .av-milestone { /* override reset */ flex-wrap: wrap; margin: 0; position: relative; width: 100%; } #top .av-milestone + .av-milestone { padding-top: var(--padding--small); } @media( min-width:768px ) { #top#top .av-milestone { flex-wrap: nowrap; } #top .av-milestone + .av-milestone { padding-top: var(--padding--normal); } } @media( min-width:768px ) { #top .av-milestone:first-child { align-items: flex-start; } #top .av-milestone:last-child { align-items: flex-end; } #top .av-milestone > :nth-child(1) { justify-content: flex-end; } #top .av-milestone::before { background: var(--timeline__color); bottom: 0; content: ""; left: 50%; position: absolute; top: 0; transform: translateX( -50% ); width: 2px; z-index: -1; } } /* Timeline year */ #top .av-milestone-date { min-height: var(--timeline__circle); } @media( max-width:767px ) { #top .av-milestone-date { flex: none; order: -1; width: 100%; } } #top .av-milestone-date strong { gap: var(--padding--small); } #top .av-milestone-indicator { background: var(--timeline__color); height: 2px; width: var(--padding--large); } @media( max-width:767px ) { #top .av-milestone-indicator { display: none; } } @media( min-width:768px ) { #top .av-milestone > :nth-child(3) .av-milestone-indicator { flex-direction: row-reverse; order: -1; } } /* Timeline circle */ @media( max-width:767px ) { #top .av-milestone-icon-wrap { display: none; } } #top .av-milestone-icon-wrap { background: var(--timeline__color); border-radius: 50%; box-shadow: none; flex: none; height: var(--timeline__circle) !important; /* override inline */ width: var(--timeline__circle) !important; } #top .av-milestone-icon-wrap::after, #top .av-milestone-icon { display: none; } /* Timeline content */ @media( max-width:767px ) { #top .av-milestone-content-wrap { flex: none; /* justify-content: center; */ /* text-align: center; */ width: 100%; } } @media( min-width:768px ) { #top .av-milestone-content-wrap:first-child .av-milestone-contentbox { padding-right: var(--timeline__gap); text-align: right; } #top .av-milestone-content-wrap:last-child .av-milestone-contentbox { padding-left: var(--timeline__gap); } } /********************************************************** =Lists /*********************************************************/ /* Column list */ #top .est-ul--columns { columns: 1; gap: var(--padding--small); } @media( min-width:768px ) { #top .est-ul--columns { columns: 2; } } /* List with alternate styling and icons */ #top .est-ul--icons { --icon__size: var(--size--s); --icon__width: 3rem; margin-top: calc( -1 * var(--padding--small) ); } #top#top .est-ul--icons li { align-items: center; background: var(--blue--lighter); border-radius: var(--radius--small); box-shadow: var(--box-shadow--inset); color: var(--navy); display: inline-flex; font-weight: var(--weight--bold); gap: var(--padding--smaller); list-style-type: none; margin: 0; margin-top: var(--padding--small); overflow: hidden; padding: var(--padding--smaller); padding-left: calc( var(--icon__width) + var(--padding--smaller) ); width: 100%; } #top#top .est-ul--icons li::before { align-items: center; background: transparent; border-radius: 50%; box-shadow: 0 0 0 2px currentcolor; color: var(--white); content: ""; display: inline-flex; flex: none; font-family: var(--family--icon); font-weight: var(--weight--normal); height: var(--icon__size); justify-content: center; left: calc( var(--icon__width) / 2 ); padding: 4px; position: absolute; top: 50%; transform: translate( -50%, -50% ); width: var(--icon__size); z-index: 1; } #top#top .est-ul--icons li::after { background: var(--green); bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: var(--icon__width); z-index: 0; } /********************************************************** =Promobox /*********************************************************/ /* Promobox wrapper */ #top .av_promobox { align-items: center; background: var(--white); border-radius: var(--radius--normal); display: flex; flex-direction: column; gap: var(--padding--small); padding: var(--padding--normal); text-align: center; } @media( min-width:768px ) { #top .av_promobox { flex-direction: row; text-align: left; } } #top .av_promobox .avia-promocontent { flex: 1; } #top .av_promobox .avia-button-wrap { flex: none; } /********************************************************** =Hero /*********************************************************/ /* Hero wrapper */ #top .est-hero { --row-top-padding: calc( var(--header__height) + var(--header--secondary__height) ); margin-top: calc( -1 * ( var(--header__height) + var(--header--secondary__height) ) ); } #top#top .est-hero::before { background-color: transparent; background-image: linear-gradient( to bottom, rgb( from var(--navy) r g b / 0.95 ), rgb( from var(--blue) r g b / 0.6 ) 40%, rgb( from var(--blue) r g b / 0.6 ) 60%, rgb( from var(--navy) r g b / 0.95 ) ), linear-gradient( to bottom, rgb( from var(--blue) r g b / 1 ), rgb( from var(--blue) r g b / 0.8 ) 30%, rgb( from var(--blue) r g b / 0.4 ) 45%, rgb( from var(--blue) r g b / 0.4 ) 55%, rgb( from var(--blue) r g b / 0.8 ) 70%, rgb( from var(--blue) r g b / 1 ) ); } /* Adjust swoop positioning on hero */ #top#top .est-hero, #top#top .est-hero::before, #top .est-hero .avia-slideshow, #top .est-hero img { border-radius: 0 0 0 var(--swoop__radius); } /* Video in hero */ #top .est-hero .avia-slideshow { z-index: 0; } /* Image in hero */ #top .est-hero .content, #top .est-hero .flex_column:has(img), #top .est-hero .avia-image-container { position: static; } #top .est-hero img { filter: contrast(0.8); height: 100%; left: calc( -1 * var(--calculated-gutter-width) + var(--desired-content-gutter) ); object-fit: cover; object-position: center 30%; max-width: none; position: absolute; top: 0; width: 100vw; } /* Hero breadcrumbs */ #top .est-hero .breadcrumbs { font-size: var(--size--xs); padding-top: var(--padding--small); } #top .est-hero .breadcrumbs * { font-size: var(--size--xs); } /* Hero content */ #top .est-hero .av_textblock_section:not(:has(.breadcrumb)) { padding-top: var(--padding--large); } /* Homepage hero */ #top.home .est-hero .post-entry { padding-top: calc( var(--padding--huge) + min( 100px, 20vh ) ); } /********************************************************** =HR /*********************************************************/ #top .hr-inner, #top hr { background: var(--blue--light); border: none; height: 1px; } /********************************************************** =Cards /*********************************************************/ /* Standard card */ #top .est-card { --card__image: 200px; --card__padding: var(--padding--small); background: var(--blue--lighter); border-radius: var(--radius--normal); box-shadow: var(--box-shadow--inset); padding: var(--card__padding); } @media( min-width:768px ) { #top .est-card { --card__image: 250px; --card__padding: var(--padding--normal); } } /* Card w/ image */ #top .est-card .avia-image-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: var(--card__image); margin-inline: calc( -1 * var(--card__padding) ); margin-top: calc( -1 * var(--card__padding) ); max-width: none; width: auto; } #top .est-card .avia-image-container * { height: 100%; object-fit: cover; object-position: center 30%; width: 100%; } #top .est-card .avia-image-container + .av_textblock_section { margin-top: var(--card__padding); } /* Functionality where hovering on card in grid changes image (and text color changes by JS) */ #top#top .est-cards .est-card a { transition: none; /* prevent button from transitioning since text doesn't transition cleanly */ } #top .est-cards .est-card--hovered { background: var(--green); box-shadow: none; } #top .est-cards .est-card--hovered.first { background: var(--red); } #top .est-cards img { transition: transform 0.2s ease-in-out; } #top .est-cards .flex_column.first:not(.est-card--hovered):has(+ .est-card--hovered) img, /* hovered card is 2nd */ #top .est-cards .est-card--hovered.first + .flex_column img { transform: scale( 1.1 ); } /* Card with tall image */ #top .est-card--tall .avia-image-container { --card__image: 300px; } #top .est-card--tall .avia-image-container img { object-position: center top; } /* Card with callout background */ #top .est-card--callout { background: linear-gradient( to bottom, var(--blue), var(--navy) ); } #top .est-card--callout h3 { font-family: var(--family--attention); font-weight: var(--weight--normal); } /********************************************************** =Cards grid /*********************************************************/ /* Group of two cards and two images */ @media( min-width:768px ) { #top .est-cards .entry-content-wrapper::before, #top .est-cards .entry-content-wrapper::after { display: none; /* undo grid.css */ } #top .est-cards .entry-content-wrapper { /* normal container */ /* container when doing row-reverse in Enfold settings */ display: grid; gap: var(--padding--normal); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #top .est-cards .av-column-wrapper-individual { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } #top .est-cards .flex_column { height: 100%; position: relative; width: 100%; } #top#top#top .est-cards .flex_column { /* override resets */ margin: 0; } #top .est-cards .avia-image-container { inset: 0; position: absolute; } #top .est-cards .avia-image-container * { height: 100%; object-fit: cover; object-position: center 30%; width: 100%; } } /********************************************************** =Background color row /*********************************************************/ /* Grey background */ #top .est-bg--grey { --bg__color: var(--blue--lighter); } /* Sky (very light) backgrounds */ #top .est-bg--sky { --bg__color: var(--blue--lightest); } /* Sky to white gradient */ #top .est-bg--top-sky { --bg__color: var(--blue--lightest); } #top .est-bg--top-sky::before { --bg__color: transparent; background-image: linear-gradient( to bottom, var(--blue--lighter), var(--white) ); } /* White to sky gradient */ #top .est-bg--bottom-sky { --bg__color: var(--blue--lightest); } #top .est-bg--bottom-sky::before { background-image: linear-gradient( to bottom, var(--white), var(--blue--lightest) ); } /* Blue background */ #top .est-bg--blue { --bg__color: var(--blue); } #top .est-bg--blue::before { background-image: linear-gradient( to bottom, var(--blue), var(--navy) ); } /* Blue gradient w/ 3 colors */ #top .est-bg--blue-gradient { --bg__color: var(--blue); } #top .est-bg--blue-gradient::before { background-image: linear-gradient( to bottom, var(--navy), var(--blue), var(--navy) ); } /* Navy background */ #top .est-bg--navy { --bg__color: var(--navy); } #top .flex_column.est-bg--navy { background: var(--bg__color); box-shadow: none; } /* Row w/ swoop in corners */ #top .est-bg--swoop { --swoop__before: var(--white); /* the background color of the previous/next row */ --swoop__after: var(--white); --swoop__radius: calc( var(--padding--huge) - 1rem ); } @media( min-width:1300px ) { #top .est-bg--swoop { --swoop__radius: calc( var(--padding--huge) * 1.5 ); } } #top .est-bg--swoop, #top .est-bg--swoop::before { border-radius: var(--swoop__radius) 0 var(--swoop__radius) 0; } /* The outer box shadow around the swoop */ #top .est-bg--swoop::before { box-shadow: 0 0 0 var(--padding--smaller) var(--blue--light), 0 0 0 var(--padding--small) var(--blue--lighter); z-index: 1; /* required so box shadow isn't cut off by following row */ } /* This is a false background color to the left and right so can emulate the color of previous/next row outside of swoop */ #top .est-bg--swoop { box-shadow: calc( -1 * var(--swoop__radius) ) 0 0 0 var(--swoop__before), var(--swoop__radius) 0 0 0 var(--swoop__after); } /* Grey > swoop */ #top .est-bg--grey + .est-bg--swoop { --swoop__before: var(--blue--lighter); } /* Blue > swoop */ #top .est-bg--blue + .est-bg--swoop { --swoop__before: var(--navy); } /* Sky > swoop */ #top .est-bg--sky + .est-bg--swoop { --swoop__before: var(--blue--lighter); } /* Bottom sky > swoop */ #top .est-bg--bottom-sky + .est-bg--swoop { --swoop__before: var(--blue--lighter); } /* Swoop > grey */ #top .est-bg--swoop:has(+ .est-bg--grey) { --swoop__after: var(--blue--lighter); } /* Swoop > blue */ #top .est-bg--swoop:has(+ .est-bg--blue) { --swoop__after: var(--blue); } /* Swoop > sky */ #top .est-bg--swoop:has(+ .est-bg--sky) { --swoop__after: var(--blue--lighter); } /* Swoop > top sky */ #top .est-bg--swoop:has(+ .est-bg--top-sky) { --swoop__after: var(--blue--lighter); } /********************************************************** =Tabs (Top Navigation) /*********************************************************/ /* Entire container */ #top .tabcontainer { --content__width: 50%; --content__padding: var(--padding--normal); background: transparent; border: none; box-shadow: none; overflow: visible; } /* Tabs column */ #top .tab_titles { gap: var(--padding--smaller); margin-bottom: var(--padding--small); max-width: none; } @media( min-width:768px ) { #top .tab_titles { display: flex; } } /* Individual tab titles */ #top .tab { align-items: center; background: var(--white); border: none; border-radius: var(--radius--small); box-shadow: inset 0 0 0 2px var(--blue--light); color: var(--navy); display: inline-flex; flex: 1; font-size: var(--size--h4); font-weight: var(--weight--medium); justify-content: center; line-height: 1; margin: 0; padding: var(--padding--small); text-align: center; width: 100%; } @media( min-width:768px ) { #top .tab { font-size: var(--size--p); } #top .av_tab_section .tab { display: none; } } #top#top .tab:where(:hover,:focus-visible) { background: var(--blue--lighter); color: var(--navy); } #top .av_tab_section + .av_tab_section > .tab, /* space between tab titles when collapsed on mobile */ #top .av_tab_section .active_tab { /* hide active tab title on mobile but keep spacing */ margin-top: var(--padding--small); } /* Tab title decoration */ /* (see Plus Symbol under Global Styles) */ /* Active tab title */ #top#top .active_tab { background: var(--green); box-shadow: none; color: var(--white); } @media( max-width:767px ) { #top .active_tab { /* hide active tab on mobile, but can't display:none b/c need to use margin */ height: 0; overflow: hidden; padding: 0; } } /* Tab content */ #top .tab_content { border: none; border-radius: var(--radius--small); box-shadow: var(--box-shadow--inset); left: auto; margin: 0; padding: var(--content__padding); } @media( min-width:768px ) { #top .tab_content { --content__padding: var(--padding--large); border-radius: var(--radius--normal); padding: var(--content__padding); padding-left: calc( var(--content__width) + var(--content__padding) ); } } #top#top .tab_content { background: var(--blue--lighter); /* override Enfold on-page styles */ } #top .tab_inner_content { margin: 0; position: static; } /* Tab image */ #top .tab_content img { height: 300px; margin: calc( -1 * var(--padding--small) ); margin-bottom: var(--padding--small); max-width: none; object-fit: cover; object-position: center; width: calc( var(--padding--small) + 100% + var(--padding--small) ) } @media( min-width:768px ) { #top .tab_content img { height: 100%; left: 0; margin: 0; position: absolute; top: 0; width: var(--content__width); } } /* Tab content text */ #top .tab_content h3 { margin-top: 0; } /********************************************************** =Tiles **********************************************************/ /* Tiles container */ @media( min-width:768px ) { #top .flex_column_table:has(.est-tile) { /* Enfold uses table for equal height, but we need flex to make cards work */ display: flex; } #top#top#top .flex_column_table:has(.est-tile) .est-tile { /* fix margins when replacing table with flex */ margin-left: 0; } } /* Individual tile */ #top .est-tile { --tile__padding: var(--padding--small); --tile__background: var(--green); background: var(--white); border-radius: var(--radius--normal); box-shadow: var(--box-shadow); min-height: 300px; /* arbitrary height for cards with little content */ overflow: hidden; position: relative; transition: background 0.2s ease-in-out; } #top#top .est-tile { /* override resets */ padding: 0; } @media( min-width:768px ) { #top .est-tile { --tile__padding: var(--padding--normal); } } #top#top .est-tile { /* override grid.css */ display: flex; } #top .est-tile:where(:hover,:focus-visible) { --tile__background: var(--blue); } /* Tile image */ #top .est-tile .avia-image-container { border-radius: 0; bottom: calc( var(--tile__padding) + var(--size--h3) ); /* aproximate title size so more of image is visible */ left: 0; position: absolute; right: 0; top: 0; z-index: -1; } #top .est-tile .avia-image-container * { height: 100%; object-fit: cover; object-position: center 30%; width: 100%; } /* Tile content */ #top .est-tile .av_textblock_section { background: var(--tile__background); margin: 0; padding: var(--tile__padding); transform: translateY( 100% ); transition: transform 0.2s ease-in-out; width: 100%; } #top .est-tile:where(:hover,:focus-visible) .av_textblock_section { transform: translateY( 0% ); } #top .est-tile .avia_textblock > * { position: relative; /* fix z-index weirdness caused by heading background */ } #top .est-tile h3 { display: flex; gap: var(--padding--smaller); line-height: var(--size--h3); position: relative; transform: translateY( calc( -1 * ( 100% + ( 2 * var(--tile__padding) ) ) ) ); /* when not hovered, move h3 up so it's visible and fake block padding */ transition: transform 0.2s ease-in-out; } @media( min-width:768px ) { #top .est-tile h3 { justify-content: center; text-align: center; } } #top .est-tile h3::before { content: ""; background: var(--tile__background); inset: calc( -1 * var(--tile__padding) ); /* fake padding around h3 */ position: absolute; z-index: -1; /* make sure heading background is underneath text */ } #top .est-tile:where(:hover,:focus-visible) h3 { justify-content: flex-start; text-align: left; transform: translateY( 0% ); } #top .est-tile .av_textblock_section ~ .av_textblock_section { /* any text blocks after first */ background: var(--tile__background); } /********************************************************** =Blogroll **********************************************************/ /********************************************************** =Sliders /*********************************************************/ /* Each slide inner container */ #top .est-slider__inner { } /********************************************************** =Testimonials slider /*********************************************************/ /* Testimonials track */ #top .est-testimonials .glide__track { position: relative; } #top .est-testimonials .glide__track::before, #top .est-testimonials .glide__track::after { background: var(--white); bottom: 0; content: ""; mask-image: linear-gradient( to left, transparent, white 1rem ); position: absolute; right: 100%; top: 0; width: 50vw; z-index: 1; } #top .est-testimonials .glide__track::after { left: 100%; mask-image: linear-gradient( to right, transparent, white 1rem ); right: auto; } #top .est-bg--top-sky .est-testimonials .glide__track::before, #top .est-bg--top-sky .est-testimonials .glide__track::after { background: transparent; background-image: linear-gradient( to bottom, transparent 1rem, var(--blue--lighter) 0, var(--white) ); bottom: calc( -1 * var(--row-top-padding) ); top: calc( -1 * var(--row-top-padding) ); } /* Testimonials individual slide */ #top#top .est-testimonials .glide__slide { align-items: stretch; background: var(--blue--lighter); border-radius: var(--radius--normal); box-shadow: var(--box-shadow--inset); display: flex; overflow: hidden; position: relative; } @media( min-width:768px ) { #top .est-testimonials .glide__slide { flex-direction: row; } } /* Testimonials image */ #top .est-slider__image { flex: none; height: 250px; position: relative; } @media( min-width:768px ) { #top .est-slider__image { height: auto; width: 50%; } } #top .est-slider__image * { height: 100%; inset: 0; object-fit: cover; object-position: center 30%; position: absolute; width: 100%; } /* Testimonials content wrapper */ #top .est-slider__inner { --quote__height: 1.5rem; --quote__background: calc( var(--quote__height) * 2 ); --slide__padding: var(--padding--normal); flex: 1; gap: var(--padding--small); padding: var(--slide__padding); } /* Quote symbol at start of content */ #top .est-slider__inner::before { background: var(--white); content: ""; display: block; height: var(--quote__height); mask-image: url("images/est-icon--quote.svg"); mask-position: left center; mask-repeat: no-repeat; mask-size: contain; width: var(--quote__height); z-index: 1; } #top .est-slider__inner::after { background: var(--red); border-radius: 50%; content: ""; height: var(--quote__background); position: absolute; left: calc( var(--slide__padding) + ( var(--quote__height) / 2 ) ); opacity: 1; top: calc( var(--slide__padding) + ( var(--quote__height) / 2 ) ); transform: translate( -50%, -50% ); width: var(--quote__background); z-index: 0; } @media( min-width:768px ) { #top .est-slider__inner::after { left: calc( var(--slide__padding) + ( var(--quote__height) / 2 ) ); } } /* Testimonial slider content */ #top .est-slider__title { color: var(--blue); font-family: var(--family--normal); font-size: var(--size--p); font-weight: var(--weight--medium); line-height: 1; margin: 0; } #top#top .est-slider__content { color: var(--navy); font-family: var(--family--normal); font-size: var(--size--h4); } /* Testimonials buttons (arrow styling is defined in Buttons section) */ #top .est-testimonials .glide__arrows { justify-content: center; width: 100%; } #top#top#top#top .est-testimonials .glide__arrow { border-radius: var(--button__radius); width: var(--button__width); } @media( min-width:1400px ) { #top .est-testimonials { } #top#top .est-testimonials .glide__track { padding-bottom: 0; } #top .est-testimonials .glide__arrows { --button__width: calc( var(--padding--input) + var(--button__arrow) + var(--padding--input) ); justify-content: space-between; left: calc( -1 * ( var(--button__width) + var(--padding--normal) ) ); padding: 0; pointer-events: none; position: absolute; top: 50%; transform: translateY( -50% ); width: calc( var(--button__width) + var(--padding--normal) + 100% + var(--padding--normal) + var(--button__width) ); z-index: 1; } #top .est-testimonials .glide__arrow { pointer-events: initial; } } /********************************************************** =Global Styles **********************************************************/ /* Icon links */ #top [class*="est-icon"] { border-radius: 50%; box-shadow: inset 0 0 0 2px currentcolor; display: inline-block; flex: none; font-size: 0; height: var(--input-height); overflow: hidden; position: relative; text-indent: 200%; width: var(--input-height); } #top [class*="est-icon"]:where(:hover,:focus-visible) { background: var(--red); box-shadow: none; } #top [class*="est-icon"]::after { content: ""; font-family: var(--family--icon); font-size: var(--size--p); left: 50%; position: absolute; text-indent: 0; top: 50%; transform: translate( -50%, -50% ); } #top .est-icon--facebook::after { content: ""; } #top .est-icon--twitter::after { content: ""; } #top .est-icon--instagram::after { content: ""; } #top .est-icon--linkedin::after { content: ""; } #top .est-icon--youtube::after { content: ""; } /* Text w/ icon floating to left */ #top#top [class^="est-text--"] { /* override reset */ --icon__background: var(--green); --icon__color: var(--white); --icon__size: 1.7em; --icon__line: 1em; align-items: center; display: inline-flex; flex-direction: row; line-height: var(--icon__line); margin-right: var(--padding--small); min-height: var(--icon__size); overflow: visible; padding-left: calc( var(--icon__size) + var(--padding--smaller) ); padding-top: 0; position: relative; vertical-align: top; } @media( min-width:990px ) { #top#top [class^="est-text--"] { /* override reset */ /*flex-direction: row; padding-left: calc( var(--icon__size) + var(--padding--smaller) ); padding-top: 0;*/ } } @media( max-width:989px ) { #top#top [class^="est-text--"] { display: flex; margin-right: 0; margin-top: var(--padding--small); } #top #footer [class^="est-text--"] { flex-direction: column; padding-left: 0; padding-top: calc( var(--icon__size) + var(--padding--smaller) ); } } #top [class^="est-text--"]::before, #top [class^="est-text--"]::after { align-items: center; background: var(--icon__background); border-radius: 50%; content: ""; display: inline-flex; flex: none; height: var(--icon__size); justify-content: center; left: 0; position: absolute; top: calc( var(--icon__size) / 2 ); transform: translateY( -50% ); width: var(--icon__size); } @media( min-width:990px ) { /*#top [class^="est-text--"]::before, #top [class^="est-text--"]::after { left: 0; top: calc( var(--icon__size) / 2 ); transform: translateY( -50% ); }*/ } @media( max-width:989px ) { #top #footer [class^="est-text--"]::before, #top #footer [class^="est-text--"]::after { left: 50%; top: 0; transform: translateX( -50% ); } } #top [class^="est-text--"]::after { background: transparent; border-radius: 0; color: var(--icon__color); content: ""; font-family: var(--family--icon); } #top .est-text--address::after { content: ""; } #top .est-text--phone::after { content: ""; } #top#top [class^="est-text--"] a { background: transparent; } #top#top [class^="est-text--"] a:where(:hover,:focus-visible) { text-decoration: underline; } /* Plus symbol */ #top .tab::after, /* tabs/accordion */ #top .est-tile h3::after { /* tiles */ align-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px currentcolor; color: currentcolor; content: ""; /* plus */ display: inline-flex; flex: none; font-family: var(--family--icon); font-size: 1rem; height: var(--size--h4); justify-content: center; margin-left: auto; transition: background 0.2s ease-in-out, color 0.2s ease-in-out; width: var(--size--h4); } /* Tabs/accordion only */ #top .tab:where(:hover,:focus-visible)::after { background: var(--green); box-shadow: inset 0 0 0 2px var(--green); color: var(--white); } @media( min-width:768px ) { #top .tab::after { display: none; } } /* Tiles only */ #top .est-tile h3::after { margin-top: calc( ( var(--size--h3) - var(--size--h4) ) / 2 ); } #top .est-tile:where(:hover,:focus-visible) h3::after { content: ""; /* minus */ } @media( min-width:768px ) { #top .est-tile h3::after { display: none; } } /********************************************************** =Special Pages **********************************************************/ /* Custom three-part gradient for homepage */ #top#top .est-bg--custom-gradient-1::before, #top#top .est-bg--custom-gradient-2::before, #top#top .est-bg--custom-gradient-3::before { display: none; } #top#top .est-bg--custom-gradient-1 { --bg__color: transparent; background-image: linear-gradient( to bottom, var(--white), rgb( from var(--blue--lighter) r g b / 0.3 ) ); } #top#top .est-bg--custom-gradient-2 { --bg__color: transparent; background-image: linear-gradient( to bottom, rgb( from var(--blue--lighter) r g b / 0.3 ), rgb( from var(--blue--lighter) r g b / 0.6 ) ); } #top#top .est-bg--custom-gradient-3 { --bg__color: transparent; background-image: linear-gradient( to bottom, rgb( from var(--blue--lighter) r g b / 0.6 ), var(--blue--lighter) ); } /* Cards with logos */ #top .est-cards--logos .avia-image-container { --card__image: 100px; background: var(--white); border-radius: var(--radius--small); margin: 0; } #top .est-cards--logos .avia-image-container-inner { padding: var(--padding--smaller); } #top .est-cards--logos .avia-image-container * { object-fit: contain; object-position: center; } /* Blog page */ #top#top.page-id-393 .av-alb-blogposts { --blog__columns: 1; } @media( min-width:768px ) { #top#top.page-id-393 .av-alb-blogposts { --blog__columns: 2; } } @media( min-width:990px ) { #top#top.page-id-393 .av-alb-blogposts { --blog__columns: 3; } } /* Heating oil page */ #top .est-bioheat, #top .est-bioheat * { border-radius: 0; height: 50px; vertical-align: top; width: auto; } /* Service area page phone */ #top .est-promobox--phone { --button__background: var(--white); --button__border: var(--white); align-items: start; background: transparent; border-radius: 0; padding: 0; text-align: left; } #top#top .est-promobox--phone .avia-button { width: auto; } #top#top .est-promobox--phone .avia-button::after { align-items: center; background: var(--green); border-radius: 50%; color: var(--white); content: ""; display: inline-flex; font-family: var(--family--icon); font-size: var(--size--s); justify-content: center; order: -1; margin-left: -0.25rem; margin-right: 1ch; mask: none; } /* Phone image on homepage is pulled down */ @media( max-width:767.99px ) { #top#top .est-image--phone { margin-top: calc( ( -1 * var(--row-top-padding) ) + var(--padding--normal) ); mask-image: linear-gradient( to top, transparent, white 30% ); max-height: 300px; } } #top#top .est-image--phone { height: calc( 100% + var(--row-bottom-padding) ); } #top#top .est-image--phone, #top#top .est-image--phone * { object-position: center top; }