/* ======================================================================= Theme Meta Information ========================================================================== */ /* Theme Name: Stack Theme URI: -- Description: -- Author: -- Author URI: -- Template: hello-elementor Version: 2.0.0 Text Domain: stack-child Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ======================================================================= Base Font Size & Responsive Typography ========================================================================== */ :root { --tec-color-accent-primary: #B02A37; --tec-color-accent-primary-hover: var(--e-global-color-primary); --tec-font-family-sans-serif: var(--e-global-typography-primary-font-family); } @import url("https://use.typekit.net/glv5rng.css"); html { font-size: 18px; /* Base font size for small screens */ } @media (min-width: 992px) { html { font-size: 18px; /* Increased font size for larger screens */ } } body { font-family: "montserrat", sans-serif; font-weight: 400; font-style: normal; overflow-x: hidden; } /*.elementor-widget-wrap { max-width: 100% !important; overflow-x: hidden; } */ li { margin-bottom: 0.5rem; line-height: 1.6em; } .wp-block-image img { box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom; border-radius: 1em; } a { font-weight: 600; } @media (max-width: 768px) { .elementor-kit-8 p, .elementor-kit-25 p { margin-block-end: 1.5rem; } } /* ======================================================================= Fonts ========================================================================== */ /* Block Headings Font Sizes */ .wp-block-heading.is-style-h1 { margin: 1rem auto; font-weight: var(--e-global-typography-c297f56-font-weight); font-style: normal; font-size: var(--e-global-typography-c297f56-font-size); line-height: var(--e-global-typography-c297f56-line-height); letter-spacing: var(--e-global-typography-c297f56-letter-spacing); text-transform: var(--e-global-typography-c297f56-text-transform); } .wp-block-heading.is-style-h2 { margin: 1rem auto; font-weight: var(--e-global-typography-21c5652-font-weight); font-style: normal; font-size: var(--e-global-typography-21c5652-font-size); line-height: var(--e-global-typography-21c5652-line-height); letter-spacing: var(--e-global-typography-21c5652-letter-spacing); text-transform: var(--e-global-typography-21c5652-text-transform); } @media (max-width:567px) { .wp-block-heading.is-style-h2.has-large-font-size { font-size: 1.8rem!important; } } .wp-block-heading.is-style-h3 { margin: 1rem auto; font-weight: var(--e-global-typography-9ddb4af-font-weight); font-style: normal; font-size: var(--e-global-typography-9ddb4af-font-size); line-height: var(--e-global-typography-9ddb4af-line-height); letter-spacing: var(--e-global-typography-9ddb4af-letter-spacing); text-transform: var(--e-global-typography-9ddb4af-text-transform); } .wp-block-heading.is-style-h4 { margin: 1rem auto; font-weight: var(--e-global-typography-2fe9092-font-weight); font-style: normal; font-size: var(--e-global-typography-2fe9092-font-size); line-height: var(--e-global-typography-2fe9092-line-height); letter-spacing: var(--e-global-typography-2fe9092-letter-spacing); text-transform: var(--e-global-typography-2fe9092-text-transform); } .wp-block-heading.is-style-h5 { margin: 1rem auto; font-weight: var(--e-global-typography-a73f9a2-font-weight); font-style: normal; font-size: var(--e-global-typography-a73f9a2-font-size); line-height: var(--e-global-typography-a73f9a2-line-height); letter-spacing: var(--e-global-typography-a73f9a2-letter-spacing); text-transform: var(--e-global-typography-a73f9a2-text-transform); } .wp-block-heading.is-style-h6 { margin: 1rem auto; font-weight: var(--e-global-typography-7b4f8fe-font-weight); font-style: normal; font-size: var(--e-global-typography-7b4f8fe-font-size); line-height: var(--e-global-typography-7b4f8fe-line-height); letter-spacing: var(--e-global-typography-7b4f8fe-letter-spacing); text-transform: var(--e-global-typography-7b4f8fe-text-transform); } /*** Let's move these into Global Styles and add aboce ***/ .elementor-kit-8 h1, .elementor-kit-8 h2, .elementor-kit-8 h3, .elementor-kit-8 h4, .elementor-kit-8 h5, .elementor-kit-8 h6, .elementor-kit-25 h1, .elementor-kit-25 h2, .elementor-kit-25 h3, .elementor-kit-25 h4, .elementor-kit-25 h5, .elementor-kit-25 h6 { margin: .5rem auto; font-style: normal; } .wp-block-heading.is-style-s1 { margin: 1rem auto; font-style: normal; font-size: var(--e-global-typography-45735d1-font-size); line-height: var(--e-global-typography-45735d1-line-height); letter-spacing: var(--e-global-typography-45735d1-letter-spacing); font-weight: var(--e-global-typography-45735d1-font-weight); text-transform: var(--e-global-typography-45735d1-text-transform); } .wp-block-heading.is-style-s2 { margin: 1rem auto; font-style: normal; font-size: var(--e-global-typography-43c312b-font-size); line-height: var(--e-global-typography-43c312b-line-height); letter-spacing: var(--e-global-typography-43c312b-letter-spacing); font-weight: var(--e-global-typography-43c312b-font-weight); text-transform: var(--e-global-typography-43c312b-text-transform); } .elementor-kit-8 p.is-style-c1, .elementor-kit-25 p.is-style-c1 { margin: 1rem auto; font-family: var(--e-global-typography-6d86073-font-family), Sans-serif!important; font-weight: var(--e-global-typography-6d86073-font-weight); font-size: var(--e-global-typography-6d86073-font-size); line-height: var(--e-global-typography-6d86073-line-height); letter-spacing: var(--e-global-typography-6d86073-letter-spacing); font-style: var(--e-global-typography-6d86073-font-style); } .elementor-kit-8 p.is-style-c2, .elementor-kit-25 p.is-style-c2 { margin: 1rem auto; font-family: var(--e-global-typography-6d86073-font-family), Sans-serif!important; font-weight: var(--e-global-typography-c6d21ea-font-weight); font-size: var(--e-global-typography-c6d21ea-font-size); line-height: var(--e-global-typography-c6d21ea-line-height); letter-spacing: var(--e-global-typography-c6d21ea-letter-spacing); font-style: var(--e-global-typography-c6d21ea-font-style); } .elementor-kit-8 p.is-style-lead, .elementor-kit-25 p.is-style-lead { margin: 1rem auto; font-family: var(--e-global-typograph-6c1f0bb-font-family), Sans-serif!important; font-weight: var(--e-global-typography-6c1f0bb-font-weight); font-size: var(--e-global-typography-6c1f0bb-font-size); line-height: var(--e-global-typography-6c1f0bb-line-height); letter-spacing: var(--e-global-typography-6c1f0bb-letter-spacing); font-style: var(--e-global-typography-6c1f0bb-font-style); } .elementor-kit-8 p.is-style-body-sm, .elementor-kit-25 p.is-style-body-sm { font-size: var(--e-global-typography-2b1aeb5-font-size); } /* ======================================================================= Header & Headroom ========================================================================== */ /*#header { background-color: var(--e-global-color-4a6002a);/* Initial 50% opacity } /* Sticky header behavior #header.headroom--pinned.headroom--top { } /* Sticky header behavior #header.headroom--pinned.headroom--not-top { } /* Sticky header behavior #header.headroom--pinned { transform: translateY(0%); /* Sticky header is visible } #header.headroom--unpinned { transform: translateY(-100%); /* Hide header when scrolled transition: background-color 0.3s ease; } */ /* ======================================================================= Header & Headroom – Default + Transparent Styles ========================================================================== */ /* DEFAULT STYLE */ .header-default #header { background-color: var(--e-global-color-5a0de86); /* Solid fill */ transition: background-color 0.3s ease, transform 0.3s ease; } /* TRANSPARENT STYLE */ .header-transparent #header { background-color: transparent; /* Initial transparent */ transition: background-color 0.3s ease, transform 0.3s ease; } /* White links on Transparent Header*/ .header-transparent #header .e-n-menu-title-text { color: #fff; } /* Transparent header logic with scroll */ .header-transparent #header.headroom--top { background-color: transparent; /* At top: stays transparent */ color: #fff !important; } /* After scroll: solid */ .header-transparent #header.headroom--not-top { background-color: var(--e-global-color-5a0de86); /* Solid fill */ color: #fff!important; } /* After scroll: change thext color */ .header-transparent #header.headroom--not-top .e-n-menu-title-text { color: #fff!important; } /* --- COMMON HEADROOM BEHAVIOR --- */ #header.headroom--pinned { transform: translateY(0%); /* Visible when pinned */ } #header.headroom--unpinned { transform: translateY(-100%); /* Hidden when unpinned */ } /* Smoother transitions */ #header { transition: background-color 0.3s ease, transform 0.3s ease; } /* Turn header solid*/ .header-transparent #header.headroom--not-top, .header-transparent #header:has(.e-active), .header-transparent #header:has(.e-n-menu-toggle[aria-expanded="true"]) { background-color: var(--e-global-color-5a0de86) !important; } /* Keep menu text white in those states */ .header-transparent #header.headroom--not-top .e-n-menu-title-text, .header-transparent #header:has(.e-active) .e-n-menu-title-text, .header-transparent #header:has(.e-n-menu-toggle[aria-expanded="true"]) .e-n-menu-title-text { color: #fff !important; } /**** Hide JetSearch AJAX results in header *****/ .jet-ajax-search__results-area { display: none !important; } /* ======================================================================= Main Nav ========================================================================== */ /* Mobile and Table Menu Content */ .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-content { overflow: hidden; max-width: 345px; background-color: var(--e-global-color-5a0de86); /* Solid fill */ } /* Mobile and Table Menu Title */ .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title { justify-content: space-between; max-width: 100%; } /* Mobile and Table Menu Item */ .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item { display: flex; flex-direction: column; width: 100%; } /* Inner Menu Heading */ .elementor-widget-n-menu .e-n-menu-heading { background-color: transparent; padding: 1rem; margin-left: auto; margin-right: 0; text-align: left; } /* Dropdown container */ .dropdown-container { padding: 0 2rem 2rem 2rem !important; } /* Mobile */ @media (max-width: 576px) { .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title { background-color: transparent !important; } .elementor-widget-n-menu .e-n-menu-heading { width: 100%; max-width: 100%; margin-left: auto; margin-right: 0; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2); /* bottom-only shadow */ background-color: var(--e-global-color-5a0de86); /* Solid fill */ padding: 2rem 1rem; } } /* Tablet */ @media (min-width: 577px) and (max-width: 992px) { .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title { justify-content: space-between; max-width: 450px !important; background-color: transparent !important; } .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item { display: flex; flex-direction: column; width: 425px!important; } .elementor-widget-n-menu .e-n-menu-heading { width: 100%; max-width: 450px; margin-left: auto; margin-right: 0; background-color: var(--e-global-color-5a0de86); padding: 2rem 1rem; } } /* Desktop */ @media (min-width: 993px) { .elementor-widget-n-menu .e-n-menu-heading { padding: 0; margin-top: 0; width: 100%; max-width: 100%; margin: 0 auto; height: auto; } } /* Mobile Menu List Items Paddings */ @media (max-width: 993px) { li.elementor-icon-list-item { padding-bottom: calc(0.6rem / 1); } } .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link), .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link) * { cursor: pointer!important; } /* ======================================================================= Main Nav – Smooth dropdown fade in (Desktop + Mobile, Elementor Mega Menu) ========================================================================== */ /* Keyframes for fade + slight slide */ @keyframes navDropdownFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* When the dropdown content is active (Elementor adds .e-active) */ .elementor-widget-n-menu .e-n-menu .e-n-menu-content.e-active .e-con-inner { animation: navDropdownFadeIn 0.25s ease-out; animation-fill-mode: both; /* keep final state after animation */ } /* (Optional) be nice with reduced motion users */ @media (prefers-reduced-motion: reduce) { .elementor-widget-n-menu .e-n-menu .e-n-menu-content.e-active .e-con-inner { animation: none; } } /* ============================================================ Fade-in animation for H1 inside #home-hero (Banff-style) ============================================================ */ #home-hero h1 { opacity: 0; transform: translateY(15px); animation: heroFadeIn 0.9s ease-out 0.2s forwards; } @keyframes heroFadeIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } /* ============================================================ Scroll Reveal (Fade Up) for any section using .scroll-reveal ============================================================ */ /* All direct children start hidden */ .scroll-reveal > * { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; transition-delay: var(--sr-delay, 0s); } /* When section enters viewport */ .scroll-reveal.is-inview > * { opacity: 1; transform: translateY(0); } /* ======================================================================= Footer ========================================================================== */ .footer-mask { background-repeat: no-repeat; background-size: 100% auto; } /* Responsive heights */ @media (min-width: 1400px) { #footer { } } @media (max-width: 1399px) { #footer { } } @media (max-width: 1199px) { #footer { } } @media (max-width: 992px) { #footer { } } @media (max-width: 768px) { #footer{ } } @media (max-width: 576px) { #footer{ } } /* ======================================================================= Dark & Light Theme Blocks ========================================================================== */ .dark { background-color: #444; /* Dark theme styling for blocks */ } /* ======================================================================= Page Heros ========================================================================== */ /* Home + Large Page Hero */ #home-hero, #large-hero { width: 100% !important; height: 100vh; min-height: 700px; max-height: 850px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; overflow: hidden; } #highlight { width: 100% !important; height: 70vh; min-height: 800px; max-height: 850px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; overflow: hidden; } /* Responsive heights */ @media (max-width: 1200px) { #home-hero, #large-hero { height: 90vh; min-height: 700px; max-height: 750px; } #highlight { height: 60vh; min-height: 600px; max-height: 650px; background-position: center top; } } @media (max-width: 992px) { #home-hero, #large-hero { height: 80vh; min-height: 600px; max-height: 650px; } #highlight { height: 50vh; min-height: 600px; max-height: 650px; background-position: center top; } } @media (max-width: 768px) { #home-hero, #large-hero { height: 65vh; min-height: 550px; max-height: 600px; background-position: center top; } #highlight { height: 50vh; min-height: 500px; max-height: 550px; background-position: center top; } } @media (max-width: 576px) { #home-hero, #large-hero { height: 55vh; min-height: 550px; max-height: 650px; background-position: center top; background-size: cover; } #highlight { height: 55vh; min-height: 500px; max-height: 550px; background-position: center top; background-size: cover; } } /* Default Page Hero */ #page-hero { width: 100%; height: 70vh; min-height: 600px; max-height: 650px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; } /* Large screens */ @media (max-width: 1200px) { #page-hero { height: 60vh; min-height: 500px; max-height: 550px; } } /* Medium screens */ @media (max-width: 992px) { #page-hero { height: 55vh; min-height: 500px; max-height: 550px; } } /* Tablets */ @media (max-width: 768px) { #page-hero { height: 50vh; min-height: 400px; max-height: 450px; background-position: center center; } } /* Mobile */ @media (max-width: 576px) { #page-hero { height: 45vh; min-height: 350px; max-height: 400px; background-position: center center; background-size: cover; } } /* Medium + Small Page Heros */ #medium-hero, #small-hero { width: 100%; background-repeat: no-repeat; object-fit: cover; background-position: center center; background-size: cover; } /* Desktop (1025px and above) */ @media (min-width: 1025px) { #medium-hero { max-height: 450px; min-height: 400px; } #small-hero { max-height: 350px; min-height: 300px; } #blog-hero { max-height: 550px; min-height: 450px; } /* Blog Hero Img */ .elementor-widget-theme-post-featured-image img { max-height: 400px; min-height: 350px; height: auto; object-fit: cover; } } /* Tablet (768px - 1024px) */ @media (max-width: 1024px) { #medium-hero { max-height: 450px; min-height: 400px; } #small-hero { max-height: 350px; min-height: 300px; } /* Blog Hero Img */ .elementor-widget-theme-post-featured-image img { max-height: 350px; min-height: 300px; height: auto; object-fit: cover; } } /* Mobile (below 768px) */ @media (max-width: 768px) { #medium-hero { max-height: 350px; min-height: 300px; } #small-hero { max-height: 350px; min-height: 300px; } } /* Small mobile (below 480px) */ @media (max-width: 480px) { #medium-hero { max-height: 350px; min-height: 300px; } #medium-hero { max-height: 350px; min-height: 300px; } } /*** Hero Preload Colour ***/ .elementor-background-video-container { background: radial-gradient(50% 50% at 50% 50%, rgba(88, 21, 28, 1) 0%, rgba(59, 14, 19, 1) 100%); } /* SK Hero Preload Colour */ .site-sk .elementor-background-video-container { background: radial-gradient(50% 50% at 50% 50%, rgba(3, 40, 48, 1) 0%, rgba(3, 27, 32, 1) 100%); } /* Responsive */ @media (min-width: 992px) { .elementor-background-video-container { background: radial-gradient(50% 50% at 50% 50%, rgba(88, 21, 28, 1) 0%, rgba(59, 14, 19, 1) 100%); } /* SK Hero Preload Colour */ .site-sk .elementor-background-video-container { background: radial-gradient(50% 50% at 50% 50%, rgba(3, 40, 48, 1) 0%, rgba(3, 27, 32, 1) 100%); } } .elementor-background-video-container video { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2.2s; } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } #blog-hero.Dark { background: url('/wp-content/themes/breeze/assets/imgs/dark-texture.webp') center center / cover no-repeat; } #blog-hero.Light { background: url('/wp-content/themes/breeze/assets/imgs/light-texture.webp') center center / cover no-repeat; } /* Scoped text color for all headings & paragraphs inside blog-hero */ #blog-hero .blog-content h1, #blog-hero .blog-content h2, #blog-hero .blog-content h3, #blog-hero .blog-content p, #blog-hero .elementor-heading-title { color: white; } /* When hero has Light class, override text color */ #blog-hero.Light .blog-content h1, #blog-hero.Light .blog-content h2, #blog-hero.Light .blog-content h3, #blog-hero.Light .blog-content p, #blog-hero.Light .elementor-heading-title { color: #343A40; } /* ======================================================================= Buttons ========================================================================== */ /*** Default Buttons ***/ .wp-block-button.is-style-btn-default a, .elementor-kit-8 .elementor-button, .tribe-block__event-website a, .tribe-events-c-subscribe-dropdown__button-text { font-size:0.875rem!important; font-family: var(--e-global-typography-21c5652-font-family), Sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: white; border-radius: 100px; padding: .75rem 1.25rem .5rem 1.25rem; display: inline-block; line-height: 1; text-align: center; transition: all .3s; margin-top: 1rem; background-color: var(--e-global-color-primary); } .wp-block-button.is-style-btn-default a:hover, .elementor-kit-8 .elementor-button:hover, .tribe-block__event-website a:hover, .tribe-events-c-subscribe-dropdown__button-text:hover { color: white; background-color: #58151C; } /* SK-specific button style Hover - Default*/ .site-sk .wp-block-button.is-style-btn-default a, .site-sk .elementor-kit-8 .elementor-button, .site-sk .tribe-block__event-website a, .site-sk .tribe-events-c-subscribe-dropdown__button-text { background-color: var(--e-global-color-accent); } .site-sk .wp-block-button.is-style-btn-default a:hover, .site-sk .elementor-kit-8 .elementor-button:hover, .site-sk .tribe-block__event-website a:hover, .site-sk .tribe-events-c-subscribe-dropdown__button-text:hover { background-color: var(--e-global-color-5a0de86); } /**** Event Buttons ***/ .tribe-block__event-website a, .tribe-events-c-subscribe-dropdown__button-text { min-height: auto; } /*** Outline Buttons ***/ .wp-block-button.is-style-btn-outline a, .elementor-kit-8 .elementor-button-info .elementor-button { font-size:0.875rem; font-family: var(--e-global-typography-21c5652-font-family), Sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--e-global-color-5a0de86); border-radius: 100px; border: solid 1px var(--e-global-color-primary); padding: .75rem 1.25rem .5rem 1.25rem; display: inline-block; line-height: 1; text-align: center; transition: all .3s; margin-top: 1rem; background-color: transparent; } .wp-block-button.is-style-btn-outline a:hover, .elementor-kit-8 .elementor-button-info .elementor-button:hover { color: white; background-color: #58151C; border: solid 1px var(--e-global-color-primary); } /* SK-specific button style Hover - Outline */ .site-sk .wp-block-button.is-style-btn-outline a, .site-sk .elementor-kit-8 .elementor-button-info .elementor-button { color: white; background-color: var(--e-global-color-primary); border: solid 1px var(--e-global-color-primary); } .site-sk .wp-block-button.is-style-btn-outline a:hover, .site-sk .elementor-kit-8 .elementor-button-info .elementor-button:hover { color: white; background-color: var(--e-global-color-accent); border: solid 1px var(--e-global-color-accent); } /* ======================================================================= Icon Buttons ========================================================================== */ /* Right-arrow icon */ .wp-block-button.is-style-btn-icon-right a, .elementor-kit-8 .elementor-button-icon-right .elementor-button a { font-size: 0.875rem; font-family: var(--e-global-typography-21c5652-font-family, sans-serif); text-transform: uppercase; letter-spacing: 1px; color: #343A40; border-radius: 100px; border: none; padding: 0; line-height: 1; text-align: center; background-color: transparent!important; transition: color .3s ease; /* Prepare for the icon */ position: relative; display: inline-flex; align-items: center; gap: .3rem; /* space between text and icon */ } .wp-block-button.is-style-btn-icon-right a::after, .elementor-kit-8 .elementor-button-icon-right .elementor-button a::after { content: ""; width: 1.125rem; height: 1.125rem; margin-bottom: .25rem; flex: 0 0 1.125rem; background: url('/wp-content/themes/breeze/assets/icons/arrow-right.svg') center / contain no-repeat; transition: transform .25s ease, opacity .25s ease; /* image swap is instant */ opacity: 1; } /* Hover color */ .wp-block-button.is-style-btn-icon-right a:hover, .elementor-kit-8 .elementor-button-icon-right .elementor-button:hover { color: #58151C; } /* Hover: swap icon + nudge to the right */ .wp-block-button.is-style-btn-icon-right a:hover::after, .elementor-kit-8 .elementor-button-icon-right .elementor-button:hover::after { background-image: url('/wp-content/themes/breeze/assets/icons/arrow-right-hover.svg'); } /* SK-specific button style - Icon Right Hover */ .site-sk .wp-block-button.is-style-btn-icon-right a:hover::after, .site-sk .elementor-kit-8 .elementor-button-icon-right .elementor-button:hover::after { background-image: url('/wp-content/themes/breeze/assets/icons/arrow-right-hover-sk.svg'); } .site-sk .wp-block-button.is-style-btn-icon-right a:hover, .site-sk .elementor-kit-8 .elementor-button-icon-right .elementor-button:hover { color: var(--e-global-color-accent); } /* Left-arrow icon */ .wp-block-button.is-style-btn-icon-left a, .elementor-kit-8 .elementor-button-icon-left .elementor-button a { font-size: 0.875rem; font-family: var(--e-global-typography-21c5652-font-family, sans-serif); text-transform: uppercase; letter-spacing: 1px; color: #343A40; border-radius: 100px; border: none; padding: 0; line-height: 1; text-align: center; background-color: transparent!important; transition: color .3s ease; /* Prepare for the icon */ position: relative; display: inline-flex; align-items: center; gap: .3rem; /* space between text and icon */ } .wp-block-button.is-style-btn-icon-left a::before, .elementor-kit-8 .elementor-button-icon-left .elementor-button a::before { content: ""; width: 1.125rem; height: 1.125rem; margin-bottom: .25rem; flex: 0 0 1.125rem; background: url('/wp-content/themes/breeze/assets/icons/arrow-left.svg') center / contain no-repeat; transition: transform .25s ease, opacity .25s ease; /* image swap is instant */ opacity: 1; } /* Hover color */ .wp-block-button.is-style-btn-icon-left a:hover, .elementor-kit-8 .elementor-button-icon-left .elementor-button:hover { color: #58151C; } /* Hover: swap icon + nudge to the right */ .wp-block-button.is-style-btn-icon-left a:hover::before, .elementor-kit-8 .elementor-button-icon-left .elementor-button:hover::before { background-image: url('/wp-content/themes/breeze/assets/icons/arrow-left-hover.svg'); } /* Arrow Icon Bounce Animation on hover */ @keyframes bounce-right { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(6px); } 60% { transform: translateX(0); } } @keyframes bounce-left { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-6px); } 60% { transform: translateX(0); } } /* Right arrow bounce on hover */ .wp-block-button.is-style-btn-icon-right a:hover::after, .elementor-kit-8 .elementor-button-icon-right .elementor-button:hover::after { background-image: url('/wp-content/themes/breeze/assets/icons/arrow-right-hover.svg'); animation: bounce-right 0.75s ease-in-out infinite; } /* Left arrow bounce on hover */ .wp-block-button.is-style-btn-icon-left a:hover::before, .elementor-kit-8 .elementor-button-icon-left .elementor-button:hover::before { background-image: url('/wp-content/themes/breeze/assets/icons/arrow-left-hover.svg'); animation: bounce-left 0.75s ease-in-out infinite; } /* ======================================================================= Icon Links ========================================================================== */ /* Base normalization for the Icon List widget */ .elementor-widget-icon-list .elementor-icon-list-item, .elementor-widget-icon-list .elementor-icon-list-item a { display:flex; align-items:center; gap:.3rem; /* space between icon & text */ margin-top: .5rem; } .elementor-widget-icon-list .elementor-icon-list-icon, .elementor-widget-icon-list .elementor-icon-list-text{ margin: 0 !important;; /* kill any theme margins */ padding: 0 !important;; /* kill any theme margins */ } /* ===== Direction controls (add class on the widget) ===== */ /* Icon on the LEFT */ .elementor-widget-icon-list.icon-left .elementor-icon-list-item, .elementor-widget-icon-list.icon-left .elementor-icon-list-item a { flex-direction:row; text-align:left; } /* Icon on the RIGHT */ .elementor-widget-icon-list.icon-right .elementor-icon-list-item, .elementor-widget-icon-list.icon-right .elementor-icon-list-item a{ flex-direction:row-reverse; text-align:right; } /* Optional: tighten SVG baseline alignment */ .elementor-widget-icon-list .elementor-icon-list-icon svg{ display:block; /* avoids extra descender gap */ } .elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg { margin:0; } /* card link */ span a { font-weight: 700!important; } .elementor-icon-wrapper { text-align: center; display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; } /* ======================================================================= Testimonials ========================================================================== */ .elementor-testimonial-wrapper .elementor-testimonial-content { position: relative; margin-bottom: 3rem; } /* Add opening curly quote */ .elementor-testimonial-content::before { content: "“"; margin-right: 0.1em; } /* Add closing curly quote */ .elementor-testimonial-content::after { content: "”"; margin-left: 0.1em; } /* meta details alignment */ .elementor-widget-testimonial .elementor-widget-container .elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-meta-inner .elementor-testimonial-details { flex-direction: row; display: flex; justify-content: center; gap: .5rem; align-items: center; } @media (max-width:576px) { .elementor-widget-testimonial .elementor-widget-container .elementor-testimonial-wrapper .elementor-testimonial-meta .elementor-testimonial-meta-inner .elementor-testimonial-details { flex-direction: row; display: flex; justify-content: center; gap: .5rem; align-items: center; flex-wrap: wrap; } } .elementor-testimonial-wrapper { text-align: center; display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; } /* comma after name */ .elementor-testimonial-name::after { content: ","; margin-left: 0.2em; /* optional spacing */ } /* ======================================================================= Halfbox - Elementor ========================================================================== */ /* Contained Default */ .halfbox-block { position: relative; /* needed so ::before positions correctly */ direction: ltr; display: grid; grid-template-columns: 45% 1fr; grid-template-rows: auto; gap: 3rem; margin-bottom: 3rem; margin-top: 3rem; padding: 3rem; z-index: 1; /* ensures content stays above the pseudo-element */ overflow: hidden; /* keeps ::before contained */ border-radius: 1em; color: #343A40; } /* img mask */ .halfbox-mask-img { position: relative; overflow: hidden; min-height: 0; /* override any earlier min-height */ height: auto; /* shrink-wrap */ } .halfbox-mask-img img { /* Mask fills the element’s box */ -webkit-mask: url('/wp-content/themes/breeze/assets/masks/halfbox-img-mask.webp') no-repeat center / 100% 100%; mask: url('/wp-content/themes/breeze/assets/masks/halfbox-img-mask.webp') no-repeat center / 100% 100%; /* optional: to make sure transparency works */ background-color: transparent; width: 100%; height: 600px; /* fill the wrapper’s height */ object-fit: cover; /* cover + crop as needed */ object-position: center; /* center center */ display: block; } /* Full-width image block */ @media (max-width: 768px) { .halfbox-block { /* direction: ltr; */ display: flex; grid-template-columns: 40% 1fr; grid-template-rows: auto; gap: 1rem; margin-bottom: 3rem; margin-top: 3rem; flex-direction: column; } .halfbox-mask-img { min-height: 320px; /* or adjust the aspect-ratio instead */ } .halfbox-mask-img img { height: auto; } } /* ======================================================================= Halfbox - Editor Default - Contained ========================================================================== */ /* Contained Default */ .wp-block-media-text { position: relative; /* needed so ::before positions correctly */ direction: ltr; display: grid; grid-template-columns: 45% 1fr; grid-template-rows: auto; gap: 3rem; margin-bottom: 3rem; margin-top: 3rem; padding: 3rem; z-index: 1; /* ensures content stays above the pseudo-element */ overflow: hidden; /* keeps ::before contained */ border-radius: 1em; color: #343A40; } .wp-block-media-text::before { content: ""; position: absolute; inset: 0; /* shorthand for top/right/bottom/left: 0 */ background: url('/wp-content/themes/breeze/assets/imgs/light-texture.webp') center center / cover no-repeat; opacity: 0.4; /* <<< adjust this value to control bg opacity */ z-index: -1; /* places it behind the content */ } .wp-block-media-text .wp-block-media-text__content { padding: 0; color:#343A40; } .elementor-widget-container p { max-width: 1140px!important; } /* img mask */ .wp-block-media-text__media { position: relative; overflow: hidden; min-height: 0; /* override any earlier min-height */ height: auto; /* shrink-wrap */ } .wp-block-media-text__media img { /* Mask fills the element’s box */ -webkit-mask: url('/wp-content/themes/breeze/assets/masks/halfbox-img-mask.svg') no-repeat center / 100% 100%; mask: url('/wp-content/themes/breeze/assets/masks/halfbox-img-mask.svg') no-repeat center / 100% 100%; /* optional: to make sure transparency works */ background-color: transparent; width: 100%; height: 600px; /* fill the wrapper’s height */ object-fit: cover; /* cover + crop as needed */ object-position: center; /* center center */ display: block; } /* Listing grid height*/ @media (max-width: 1140px) { .jet-listing-grid__item.jet-equal-columns>.elementor { height:auto!important; } } /* Full-width image block */ @media (max-width: 768px) { /* listing grid height */ .jet-listing-grid__item.jet-equal-columns>.elementor { height:auto!important; } .wp-block-media-text { position: relative;/* needed so ::before positions correctly */ /* width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);*/ display: flex; grid-template-columns: 40% 1fr; grid-template-rows: auto; gap: 2rem; margin-bottom: 3rem; margin-top: 3rem; flex-direction: column; padding: 2rem 1.6rem; } .wp-block-media-text__media { min-height: 320px; /* or adjust the aspect-ratio instead */ } .wp-block-media-text__media img { height: auto; } } /* ---------- Mobile fix: keep a real box for the image ---------- */ @media (max-width: 768px) { .wp-block-media-text__media { width: 100%; /* pick the shape you want; 4/5 works nicely with your mask */ aspect-ratio: 4 / 5; min-height: 320px; /* safety floor */ position: relative; } .wp-block-media-text__media img { width: 100%; height: 100%; /* fill the wrapper */ object-fit: cover; object-position: center; /* Safari + masks need explicit longhands */ -webkit-mask-image: url('/wp-content/themes/breeze/assets/masks/halfbox-img-mask.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 100% 100%; mask-image: url('/wp-content/themes/breeze/assets/masks/halfbox-img-mask.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: 100% 100%; } } /* ======================================================================= Halfbox - Editor Full With - Dark ========================================================================== */ .wp-block-media-text.is-style-full-width, .halfbox-block-full-width { position: relative;/* needed so ::before positions correctly */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); direction: ltr; display: grid; grid-template-columns: 50% 1fr;/* 50/50 split */ grid-template-rows: auto; gap: 0; margin-bottom: 0 !important; margin-top: 0 !important; padding: 0; z-index: 1;/* content above pseudo-element */ border-radius: 0 !important; color: #fff !important; align-items: stretch;/* grid items fill the row height */ } /* Full-width dark texture underlay */ .wp-block-media-text.is-style-full-width::before { content: ""; position: absolute; inset: 0; left: 0; right: 0; background: url('/wp-content/themes/breeze/assets/textures/dark-texture.webp') center center / cover no-repeat; opacity: 1; z-index: -1; } /* SK-specific button style - Halfbox Texture */ .site-sk .wp-block-media-text.is-style-full-width::before { content: ""; position: absolute; inset: 0; left: 0; right: 0; background: url('/wp-content/themes/breeze/assets/textures/dark-texture-sk.jpeg') center center / cover no-repeat; opacity: 1; z-index: -1; } /* Neutralize global paragraph max-width inside this block only */ .wp-block-media-text.is-style-full-width .wp-block-media-text__content p, .halfbox-block-full-width .halfbox-block-full-width-text p { max-width: none !important; } /* Properly scoped heading colors inside this block */ .wp-block-media-text.is-style-full-width .wp-block-media-text__content h2, .wp-block-media-text.is-style-full-width .wp-block-media-text__content h3, .wp-block-media-text.is-style-full-width .wp-block-media-text__content h4, .halfbox-block-full-width .halfbox-block-full-width-text h2, .halfbox-block-full-width .halfbox-block-full-width-text h3, .halfbox-block-full-width .halfbox-block-full-width-text h4 { color: #fff; } /* Content area spacing & centering */ .wp-block-media-text.is-style-full-width .wp-block-media-text__content, .halfbox-block-full-width .halfbox-block-full-width-text { min-height: 100%; padding: 5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff !important; } /* Force 4:3 aspect ratio on the media area */ /* 4:3 on the media container*/ .wp-block-media-text.is-style-full-width .wp-block-media-text__media, .halfbox-block-full-width .halfbox-block-full-width-img { height:100%; overflow: hidden;/* clean crop */ align-self: start;/* prevent stretching beyond 4:3 */ } /* Fills the media inside the 4:3 box */ .wp-block-media-text.is-style-full-width .wp-block-media-text__media > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media > picture > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media > video, .halfbox-block-full-width .halfbox-block-full-width-img > img, .halfbox-block-full-width .halfbox-block-full-width-img > picture > img, .halfbox-block-full-width .halfbox-block-full-width-img > video { display: block; width: 100%; object-fit: cover; object-position: center center; max-height: none; height: 100%; -webkit-mask: none; mask: none; border-radius: 0; } .halfbox-block-full-width .halfbox-block-full-width-img img { border-radius: 0!important; } /* Fallback for browsers without aspect-ratio support */ @supports not (aspect-ratio: 1 / 1) { .wp-block-media-text.is-style-full-width .wp-block-media-text__media, .halfbox-block-full-width .halfbox-block-full-width-img { position: relative; } .wp-block-media-text.is-style-full-width .wp-block-media-text__media::before, .halfbox-block-full-width .halfbox-block-full-width-img::before { content: ""; display: block; padding-top: 75%;/* 4:3 = 3/4 */ } .wp-block-media-text.is-style-full-width .wp-block-media-text__media > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media > picture > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media > video, .halfbox-block-full-width .halfbox-block-full-width-img > img, .halfbox-block-full-width .halfbox-block-full-width-img > picture > img, .halfbox-block-full-width .halfbox-block-full-width-img > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } /* Buttons (white outline )*/ .wp-block-media-text.is-style-full-width .wp-block-buttons .wp-block-button.is-style-btn-default a, .halfbox-block-full-width .wp-block-buttons .wp-block-button.is-style-btn-default a { font-size: 0.875rem; font-family: var(--e-global-typography-45735d1-font-family), Sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; border-radius: 100px; border: solid 1px #fff; padding: .75rem 1.25rem .5rem 1.25rem; display: inline-block; line-height: 1; text-align: center; transition: all .3s; margin-top: 1rem; margin-bottom: 1rem; background-color: transparent; } .wp-block-media-text.is-style-full-width .wp-block-buttons .wp-block-button.is-style-btn-default a:hover, .halfbox-block-full-width .wp-block-buttons .wp-block-button.is-style-btn-default a:hover { color: #fff; background-color: #58151C; border: solid 1px #58151C; } /* SK-specific button style */ .site-sk .wp-block-media-text.is-style-full-width .wp-block-buttons .wp-block-button.is-style-btn-default a:hover, .site-sk .halfbox-block-full-width .wp-block-buttons .wp-block-button.is-style-btn-default a:hover { color: white; background-color: var(--e-global-color-accent); border: solid 1px var(--e-global-color-accent); } /* Mobile */ @media (max-width: 768px) { /* Keep full-bleed, but stack for mobile */ .wp-block-media-text.is-style-full-width, .halfbox-block-full-width { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: flex; flex-direction: column; gap: 0; max-height: none; /* allow natural height */ overflow: visible; } .wp-block-media-text.is-style-full-width::before, .halfbox-block-full-width::before { left: 0; right: 0; } /* Put image first, keep 4:3 (remove fixed 500px height) */ .wp-block-media-text.is-style-full-width .wp-block-media-text__media, .halfbox-block-full-width .halfbox-block-full-width-img { order: -1; width: 100%; height: auto !important;/* kill fixed heights */ aspect-ratio: 4 / 3; } .wp-block-media-text.is-style-full-width .wp-block-media-text__media > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media > picture > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media > video, .halfbox-block-full-width .halfbox-block-full-width-img > img, .halfbox-block-full-width .halfbox-block-full-width-img > picture > img, .halfbox-block-full-width .halfbox-block-full-width-img > video { height: 100% !important; } /* Content spacing / alignment */ .wp-block-media-text.is-style-full-width .wp-block-media-text__content, .halfbox-block-full-width .halfbox-block-full-width-text { order: 0; padding: 2rem; align-items: center; justify-content: center; text-align: center; } } /* Fix: make media fill the row height between 768–1376px */ @media (min-width: 769px) and (max-width: 1376px) { /* let grid set equal heights */ .wp-block-media-text.is-style-full-width, .halfbox-block-full-width { align-items: stretch; /* (already set, but safe) */ } /* remove the 4:3 lock and stretch the media container */ .wp-block-media-text.is-style-full-width .wp-block-media-text__media, .halfbox-block-full-width .halfbox-block-full-width-img { aspect-ratio: auto; /* overrides 4/3 */ height: 100%; /* fill grid row height */ align-self: stretch; /* ensure it actually stretches */ } /* make any wrappers inside fill too (picture, video, etc.) */ .wp-block-media-text.is-style-full-width .wp-block-media-text__media > *, .halfbox-block-full-width .halfbox-block-full-width-img > * { width: 100%; height: 100%; display: block; } /* final cover fit */ .wp-block-media-text.is-style-full-width .wp-block-media-text__media img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media picture > img, .wp-block-media-text.is-style-full-width .wp-block-media-text__media video, .halfbox-block-full-width .halfbox-block-full-width-img img, .halfbox-block-full-width .halfbox-block-full-width-img picture > img, .halfbox-block-full-width .halfbox-block-full-width-img video { object-fit: cover; object-position: center; } } /* ======================================================================= CARDS ========================================================================== */ .card { border-radius: 1em; text-wrap: balance; } .card .featured img { aspect-ratio: 7 / 8; object-fit: cover; object-position: center; border-radius: 1em; transition: filter 0.3s ease; } .card:hover .featured img { filter: brightness(0.6); } /* Card Types */ .card.card-type-splash .featured img { aspect-ratio: 7 / 8; height: 100%; object-fit: cover; display: block; } .card.card-type-default .featured img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; display: block; } .card.card-type-splash { position: relative; } /* Aspect 7/8 */ .card.card-collection, .card.card-collection .featured img, .card.card-type-splash.card-blog, .card.card-type-splash.card-blog .featured img, .card.card-promo, .card.card-promo .featured img { aspect-ratio: 7 / 8; } /* Aspect 4/3 */ .card.card-listing .featured img, .card.card-event .featured img, .card.card-type-default.card-blog .featured img { aspect-ratio: 4 / 3; } .card.card-listing .featured img { border-radius: 1em 1em 0 0; } /* Aspect 4/2 */ .card.card-menu, .card.card-menu .featured img { aspect-ratio: 4 / 2.5; } @media screen and (min-width: 769px) and (max-width: 991px) { .card.card-promo, .card.card-promo .featured img { aspect-ratio: 4/4 !important; } } @media (max-width: 768px) { .card.card-promo, .card.card-promo .featured img, .card.card-listing .featured img { aspect-ratio: 4 / 2; } } @media (max-width: 567px) { .card.card-promo, .card.card-promo .featured img { aspect-ratio: 4 / 2; } .card.card-type-default.card-blog .featured img, .card.card-listing .featured img { aspect-ratio: 4 / 3; } .home-promos .card { max-width: 250px; } .home-promos { margin-left: 1rem; } .home-promos .jet-listing-grid__slider-icon.prev-arrow svg, .home-promos .jet-listing-grid__slider-icon.next-arrow svg { display: none!important; } } .home-promos .card-icon { display: none!important; } /* ======================================================================= CARD Carousel Slider ========================================================================== */ .jet-listing-grid__slider-icon { background: transparent!important; line-height: auto; margin-top: calc(-36px / 2); border-radius: 100px; border: none; padding:0; } /* Hide only the LEFT arrow when it's disabled */ .jet-listing-grid__slider-icon.prev-arrow[aria-disabled="true"] { display: none !important; opacity: 0 !important; pointer-events: none !important; } /* Card */ .jet-listing-grid__slider .jet-listing-grid__item .card { width: 350px!important; } @media (min-width:568px) and (max-width:767px) { .jet-listing-grid__slider .jet-listing-grid__item .card { width:300px!important; } } @media (max-width: 567px) { .jet-listing-grid__slider .jet-listing-grid__item .card { width: 80vw!important; } } /* JetEngine Slider Arrows – Shadow */ .card .card-icon, .jet-listing-grid__slider-icon.slick-arrow svg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); transition: filter 0.25s ease, transform 0.25s ease; } /* Optional hover effect */ .card .card-icon, .jet-listing-grid__slider-icon.slick-arrow:hover svg { filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.65)); transform: translateY(-1px); } .jet-listing-grid__item { padding:20px; } /* ======================================================================= CARD Carousel Container ========================================================================== */ .card-carousel-container{ /* Side offset = (100vw - container) / 2, clamped to >= 0 */ --container-offset: max(0px, calc((100vw - var(--container-max-width)) / 2)); /* Align left edge with site container */ margin-left: var(--container-offset) !important; margin-right: 0 !important; /* Let it extend to the right edge of the viewport */ width: calc(100vw - var(--container-offset)) !important; max-width: none !important; /* Prevent accidental horizontal scroll from inner transforms */ overflow: visible; } /* Make sure the JetEngine grid/slider uses the full container width */ .card-carousel-container .jet-listing-grid, .card-carousel-container .jet-listing-grid__slider{ width: 100%; max-width: 100%; } /* Mobile: just behave like a normal container (no bleed) */ @media (max-width: 767px){ .card-carousel-container{ margin-left: 0 !important; width: 100% !important; } } /* ======================================================================= CARD Grid ========================================================================== */ .jet-listing-grid__loader { display:none; } /* ======================================================================= CARD LISTINGS + EVENTS ========================================================================== */ .card-mask { position: relative; display: block; width: 100%; -webkit-mask: url("/wp-content/themes/breeze/assets/masks/card-mask.svg") no-repeat center / cover; mask: url("/wp-content/themes/breeze/assets/masks/card-mask.svg") no-repeat center / cover; -webkit-mask-composite: source-over; } .card-mask img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 1em 1em 0 0!important; } .listing-phone { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: 100%; margin: 0; } .listing-phone a { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .listing-icon-text .jet-listing-dynamic-link__link { align-self: flex-start; line-height: 1.1; padding: -0.25rem 0rem 0.5rem 0rem!important; flex-direction: row; display: flex; align-content: flex-start; align-items: flex-start; justify-content: flex-start; } .listing-icon-text span.jet-listing-dynamic-link__label { margin-top: .25rem; } /* ======================================================================= Listing Business Hours ========================================================================== */ .business-hours { position: relative; display: inline-block; font-family: inherit; cursor: pointer; } .business-hours .open-now { padding: 5px 0; color: var(--e-global-color-5bd865a); font-weight: 400; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: color 0.2s ease; } .business-hours:hover .open-now, .business-hours.is-active .open-now { color: var(--e-global-color-accent); } .business-hours .open-now::after { content: ''; border: solid var(--e-global-color-5bd865a); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg); transition: transform 0.3s ease; } .business-hours .dropdown { position: absolute; top: 100%; left: 0; min-width: 260px; margin: 8px 0 0 0; padding: 1rem 1.25rem; list-style: none; background-color: #F3F2ED; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); z-index: 99999; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .business-hours .dropdown li { padding: 5px 0; border-bottom: 1px solid #F3F2ED; font-size: 1rem; color: var(--e-global-color-5bd865a); cursor: default; text-wrap: wrap; } .business-hours.is-active .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .business-hours.is-active .open-now::after { transform: rotate(-135deg); } .hours-error { padding-top: 0.25rem; } @media (min-width: 576px) { .business-hours .dropdown { left: 0; min-width: 300px; } .business-hours .dropdown li { white-space: nowrap !important; } } /* ======================================================================= Dropdown stacking over card siblings ========================================================================== */ .jet-listing-grid__item { position: relative; z-index: 1; } .jet-listing-grid__item:has(.business-hours.is-active) { z-index: 100; } .jet-listing-grid__item:has(.business-hours.is-active) * { z-index: auto; } .jet-listing-grid__item:has(.business-hours.is-active) .business-hours { z-index: 100; } .jet-listing-grid__item:has(.business-hours.is-active) .business-hours .dropdown { z-index: 99999; } /* ======================================================================= CARD PROMO ========================================================================== */ /* --- Base card --- */ .card.card-promo { position: relative; overflow: hidden; display: flex; justify-content: space-between; min-height: auto; background-position: center; background-size: cover; background-repeat: no-repeat; perspective: 1200px; } /* Hide Dynamic Field of the onsite link */ .promo-onsite-url, .promo-onsite-source { display: none !important; } /* Overlay clickeable de los dynamic links (onsite / external) */ .card-splash.card-promo a.promo-link-overlay { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100%; height: 100%; z-index: 5; display: block; text-indent: -9999px; /* oculta el texto del link */ background: transparent; /* evita interferir visualmente */ } .card-splash.card-promo .elementor-widget { position: static; } /* Align Top */ .card.card-promo .card-promo-inner.alignment-top { justify-content: flex-start; align-items: flex-start; } /* Align Bottom */ .card.card-promo .card-promo-inner.alignment-bottom { justify-content: flex-end; align-items: flex-end; } @media (max-width: 567px) { /* --- Base card --- */ .card.card-promo { min-height: 250px; } } /* --- Flip Card Inner --- */ .card.card-splash.card-promo .card-promo-inner { position: absolute; inset: 0; display: flex; justify-content: space-between; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; flex-wrap: nowrap; } .card.card-splash.card-promo:hover .card-promo-inner { transform: rotateY(180deg); } /* --- Front face (default) --- */ .card.card-splash.card-promo .promo-title { position: relative; backface-visibility: hidden; transform: rotateY(0deg) translateZ(1px); padding: 0; text-align: left; transition: opacity .25s ease; } /* --- Back face (hover) --- */ .card.card-splash.card-promo .promo-flip-text { position: absolute; inset: 0; display: flex; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; padding: 0; text-align: left; opacity: 0; transition: opacity .25s ease; z-index: 2; } /* Reveal back face on hover */ .card.card-splash.card-promo:hover .promo-title { opacity: 0; display:none;} .card.card-splash.card-promo:hover .promo-flip-text { opacity: 1; } .card.card-splash.card-promo:hover { padding: 1.5rem; position: relative; overflow: hidden; display: flex; filter: brightness(100%)!important; min-height: auto; background-position: center; background-size: cover; background-repeat: no-repeat; perspective: 1200px; } /* --- The hover link layer --- */ .card.card-splash.card-promo .promo-flip-text { position: absolute; inset: 0; /* full cover */ display: flex; padding: 0; text-decoration: none; color: inherit; opacity: 0; pointer-events: none;/* off until hover */ z-index: 3; width: 100%; } /* Activate link only on hover */ .card.card-splash.card-promo:hover .promo-flip-text { opacity: 1; pointer-events: auto;/* now clickable */ } @media (max-width: 567px) { /* --- Base card --- */ .card.card-splash.card-promo:hover { min-height: 250px; padding: 1.5rem; } } /* Overlay clickeable inside the card */ .card-splash.card-promo .jet-listing-dynamic-link__link { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; */ width: 100%; height: 100%; z-index: 5; display: block; text-indent: -9999px; /* oculta el texto del link */ top: 0px; bottom: 0px; left: 0px; right: 0px; outline: 2px dashed orange; } /* Mobile: flip text + icon on SAME LINE, aligned left */ .card.card-splash.card-promo{ /* One source of truth for content padding */ --promo-inset-x: 1.5rem; --promo-inset-y: 1.5rem; } /* Match the normal (front) title positioning */ .card.card-splash.card-promo .promo-title, .card.card-splash.card-promo .promo-flip-text{ left: 0; right: 0; top: 0; bottom: 0; padding: 0 0 !important; text-align: left !important; } /* Flip layer: row layout, left aligned */ .card.card-splash.card-promo .promo-flip-text{ display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: .75rem; flex-wrap: wrap; /* allow wrapping */ } /* Ensure Elementor widgets inside don't center themselves */ .card.card-splash.card-promo .promo-title .elementor-widget, .card.card-splash.card-promo .promo-title .elementor-widget-container, .card.card-splash.card-promo .promo-flip-text .elementor-widget, .card.card-splash.card-promo .promo-flip-text .elementor-widget-container{ margin: 0 !important; text-align: left !important; justify-content: flex-start !important; } /* Mobile: tighter inset + keep alignment consistent */ @media (max-width: 567px){ .card.card-splash.card-promo{ --promo-inset-x: 1.25rem; --promo-inset-y: 1.25rem; } /* Allow text wrapping on mobile */ .card.card-splash.card-promo .promo-flip-text :is(p,h1,h2,h3){ white-space: normal !important; margin: 0 !important; } /* Keep icon from dropping */ .card.card-splash.card-promo .promo-flip-text .card-icon{ flex: 0 0 auto; } } /* ======================================================================= Images - Editor ========================================================================== */ .wp-block-image.is-style-full-width img { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; } /* ======================================================================= Gallery - Elementor ========================================================================== */ /* Style the footer */ .elementor-slideshow__footer { width: 100%; z-index: 5; padding: 1rem; background-color: rgba(0, 0, 0, 0.05); /* semi-transparent teal */ color: white; box-sizing: border-box; display: block; } /* ======================================================================= Gallery - Editor ========================================================================== */ .scrim { background-color: rgba(0, 0, 0, 0.5) !important; } .lightbox-trigger { display: none; } .wp-lightbox-container button:focus, .wp-lightbox-container button:hover, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) { background-color: #5a5a5a40; border: none; display: none; } .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 1em; } .is-style-masonry .wp-block-image { width: 100% !important; /* margin-bottom: var(--wp--style--unstable-gallery-gap) !important; */ } /* ======================================================================= Gallery Masonry - Editor ========================================================================== */ .elementor-widget-image img { border-radius: 1em; } .alignwide { margin-inline: 0; } .wp-block-gallery { margin-top: 3rem; margin-bottom: 3rem; } .wp-block-gallery.wp-block-gallery-1 { gap: 1rem!important; --wp--style--unstable-gallery-gap: 1rem!important; } .is-style-masonry.columns-default { -webkit-columns: 3; /* Chrome, Safari, Opera */ -moz-columns: 3; /* Firefox */ columns: 3; /* Standard syntax */ } .is-style-masonry{ display:block !important; } .is-style-masonry .wp-block-image { width:100% !important; margin-bottom:1rem !important; } .is-style-masonry.columns-1 { -webkit-columns: 1; /* Chrome, Safari, Opera */ -moz-columns: 1; /* Firefox */ columns: 1; /* Standard syntax */ } .is-style-masonry.columns-2 { -webkit-columns: 2; /* Chrome, Safari, Opera */ -moz-columns: 2; /* Firefox */ columns: 2; /* Standard syntax */ } .is-style-masonry.columns-3 { -webkit-columns: 3; /* Chrome, Safari, Opera */ -moz-columns: 3; /* Firefox */ columns: 3; /* Standard syntax */ } .is-style-masonry.columns-4 { -webkit-columns: 4; /* Chrome, Safari, Opera */ -moz-columns: 4; /* Firefox */ columns: 4; /* Standard syntax */ } .is-style-masonry.columns-5 { -webkit-columns: 5; /* Chrome, Safari, Opera */ -moz-columns: 5; /* Firefox */ columns: 5; /* Standard syntax */ } .is-style-masonry.columns-6 { -webkit-columns: 6; /* Chrome, Safari, Opera */ -moz-columns: 6; /* Firefox */ columns: 6; /* Standard syntax */ } .is-style-masonry.columns-7 { -webkit-columns: 7; /* Chrome, Safari, Opera */ -moz-columns: 7; /* Firefox */ columns: 7; /* Standard syntax */ } .is-style-masonry.columns-8 { -webkit-columns: 8; /* Chrome, Safari, Opera */ -moz-columns: 8; /* Firefox */ columns: 8; /* Standard syntax */ } /* Default: 3 columns (already handled by .columns-3) */ /* On mobile: switch to 1 column */ @media (max-width: 567px) { .wp-block-gallery.columns-3 { grid-template-columns: 1fr; position: relative; width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw!important; margin-right: -50vw!important; box-sizing: border-box; } } /* ======================================================================= Slider - Elementor ========================================================================== */ .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 40px!important; left: 0; width: 100%; } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px)); display: inline-block; border-radius: 25%; } .swiper .wp-block-image img { border-radius: 1em; width: 100%!important; } /* border radius on bg img */ .elementor-511 .elementor-element .swiper-slide-bg { border-radius: 1em; } .elementor-511 .elementor-element .elementor-background-overlay { border-radius: 1em; } /* border radius on bullets pagination */ .elementor-511 .elementor-element .swiper-pagination-bullet { border-radius: 100px; } /* ======================================================================= Slider - Editor ========================================================================== */ .wp-block-cb-carousel-v2 .cb-pagination .cb-pagination-bullet { width: var(--wp--custom--carousel-block--pagination-bullet-size, 12px); height: var(--wp--custom--carousel-block--pagination-bullet-size, 12px); background-color: #fff; opacity: .5; } .wp-block-cb-carousel-v2 .cb-pagination .cb-pagination-bullet.swiper-pagination-bullet-active { width: var(--wp--custom--carousel-block--pagination-bullet-size, 12px); height: var(--wp--custom--carousel-block--pagination-bullet-size, 12px); background-color: #fff; opacity: 1; } /* ======================================================================= Highlight - HOME Elementor ========================================================================== */ .home-highlight-arrow { margin-top: -310px!important; } /* Between 756px and 500px */ @media (min-width: 430px) and (max-width: 459px) { .home-highlight-arrow { margin-top: -350px!important; } } /* Between 756px and 500px */ @media (min-width: 460px) and (max-width: 545px) { .home-highlight-arrow { margin-top: -430px!important; } } /* Between 756px and 500px */ @media (min-width: 546px) and (max-width: 756px) { .home-highlight-arrow { margin-top: -240px!important; } } /* ======================================================================= Highlight - Editor - Default Img Cover ========================================================================== */ .wp-block-cover .wp-block-cover__background { opacity: .2; background-color: #000000!important; } .wp-block-cover .wp-block-cover__inner-container, .highlight-default .highlight-container { margin: 0 auto; } .wp-block-cover .wp-block-cover__inner-container h2, .highlight-default .highlight-container h2 { color:#fff; font-style: normal; font-size: var(--e-global-typography-21c5652-font-size); line-height: var(--e-global-typography-21c5652-line-height); letter-spacing: var(--e-global-typography-21c5652-letter-spacing); text-transform: var(--e-global-typography-21c5652-text-transform); } .wp-block-cover .wp-block-cover__inner-container p.is-style-c1, .highlight-default .highlight-container p.is-style-c1 { margin: -10px auto 1rem auto; } .wp-block-cover .wp-block-cover__inner-container p.is-style-c2, .highlight-default .highlight-container p.is-style-c2 { margin: -10px auto 1rem auto; } /* ========================================================= Highlight - Editor - Dark Arrow Cover ========================================================= */ /* Cover full-bleed and stack-safe */ .wp-block-cover.is-style-dark-arrow, .highlight-dark-arrow { position: relative; overflow: visible; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: auto; height: 750px; color: #fff; } /* Keep inner content above the masked layers */ .wp-block-cover.is-style-dark-arrow > .wp-block-cover__inner-container .highlight-dark-arrow > .highlight-container { position: relative; z-index: 1; margin: 0 auto; } /* Background layers fill the whole cover box */ .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background, .wp-block-cover.is-style-dark-arrow > img.wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > .wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > video.wp-block-cover__video-background, .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background, .highlight-dark-arrow > .wp-block-cover__background { position: absolute; inset: 0;/* top:0 right:0 bottom:0 left:0 */ width: 100%; height: 100%; display: block; object-fit: cover; z-index: 0;/* below inner content */ } /* Texture layer with the mask (most robust) */ .wp-block-cover.is-style-dark-arrow::before .highlight-dark-arrow::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* let clicks pass through */ /* Texture background to be masked */ background-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; /* Mask (desktop/tablet) */ -webkit-mask: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp') no-repeat center center / cover; mask: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp') no-repeat center center / cover; width: 100%; } /* Apply the same mask to Cover's built-in background layers */ .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background, .wp-block-cover.is-style-dark-arrow > img.wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > .wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > video.wp-block-cover__video-background, .highlight-dark-arrow > .wp-block-cover__background { -webkit-mask: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp') no-repeat center center / cover; mask: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp') no-repeat center center / cover; } @media (max-width: 767.98px) { .wp-block-cover.is-style-dark-arrow::before { -webkit-mask: url('/wp-content/themes/breeze/assets/masks/highlight-mobile-mask.webp') no-repeat center / cover; mask: url('/wp-content/themes/breeze/assets/masks/highlight-mobile-mask.webp') no-repeat center / cover; } .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background, .wp-block-cover.is-style-dark-arrow > img.wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > .wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > video.wp-block-cover__video-background { -webkit-mask: url('/wp-content/themes/breeze/assets/masks/highlight-mobile-mask.svg') no-repeat center / cover; mask: url('/wp-content/themes/breeze/assets/masks/highlight-mobile-mask.svg') no-repeat center / cover; } /* Widen inner content a bit on small screens */ .wp-block-cover .wp-block-cover__inner-container .highlight-dark-arrow .highlight-container { width: 85%; } /* Cover full-bleed and stack-safe */ .wp-block-cover.is-style-dark, .highlight-dark { min-height: 500px!important; } } @media (min-width: 1024px) { .wp-block-cover .wp-block-cover__inner-container, .highlight-dark-arrow .highlight-container { width: 55%; } } @media (min-width: 1440px) { .wp-block-cover.is-style-dark-arrow::before, .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background, .wp-block-cover.is-style-dark-arrow > img.wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > .wp-block-cover__image-background, .wp-block-cover.is-style-dark-arrow > video.wp-block-cover__video-background { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: bottom center; mask-position: bottom center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .wp-block-cover .wp-block-cover__inner-container, .highlight-dark-arrow .highlight-container { width: 55%; } } /* ========================================================= Highlight - Editor - Dark Arrow ========================================================= */ .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background { background-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; -webkit-mask-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp'); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: bottom center; mask-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-xl.webp'); mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: bottom center; } /* SK-specific button style - Highlight Texture Arrow */ .site-sk .wp-block-cover.is-style-dark-arrow > .wp-block-cover__background { background-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-sk.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; -webkit-mask-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-sk.webp'); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: bottom center; mask-image: url('/wp-content/themes/breeze/assets/masks/highlight-mask-sk.webp'); mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: bottom center; } /* ========================================================= Highlight - Editor - Dark Cover ========================================================= */ .wp-block-cover.is-style-dark, .highlight-dark { color: white!important; } .wp-block-cover.is-style-dark > .wp-block-cover__background { background-image: url('/wp-content/themes/breeze/assets/textures/dark-texture.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; /* adjust this value to control bg opacity */ } /* SK-specific button style - Highlight Texture */ .site-sk .wp-block-cover.is-style-dark, .site-sk .highlight-dark { color: white!important; } .site-sk .wp-block-cover.is-style-dark > .wp-block-cover__background { background-image: url('/wp-content/themes/breeze/assets/textures/dark-texture-highlight-sk.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; /* adjust this value to control bg opacity */ } /* ========================================================= Highlight - Editor - Light Cover ========================================================= */ .wp-block-cover.is-style-light, .highlight-light { color: #343A40; } .wp-block-cover.is-style-light > .wp-block-cover__background { background-image: url('/wp-content/themes/breeze/assets/textures/light-texture.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; /* adjust this value to control bg opacity */ } .wp-block-cover.is-style-light .wp-block-cover__inner-container h2, .highlight-dark .hightlight-container h2 { color: #343A40!important; } /* ======================================================================= Accordions - Editor ========================================================================== */ .plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-accordion__icon, .plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__tabby .pds-accordion__icon.plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-accordion__icon { right:0!important; } @media (max-width:567px) { .elementor-widget-n-accordion .e-n-accordion-item-title-icon span { width: 13px; } } @media (min-width:568px) and (max-width:767px) { .elementor-widget-n-accordion .e-n-accordion-item-title-icon span { width: 13px; } } @media (min-width:768px) { .elementor-widget-n-accordion .e-n-accordion-item-title-icon span { width: 18px; } } @media (min-width:992px) { .elementor-widget-n-accordion .e-n-accordion-item-title-icon span { width: 30px; } } @media (min-width:1200px) { .elementor-widget-n-accordion .e-n-accordion-item-title-icon span { width: 30px; } } .e-n-accordion-item[open] .e-n-accordion-item-title { border-bottom: none !important; } /* accordion bg*/ .plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic, .plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__tabby { background-color: var(--e-global-color-43bc68c); color: var(--pds-tabs-content-text-color); margin: var(--pds-tabs-margin); padding: 1rem 0!important; } /* accordion title block */ .plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-accordion__title { background: none!important; color: var(--n-accordion-title-normal-color); cursor: pointer; display: flex; flex-direction: row; flex-grow: var(--n-menu-title-flex-grow); gap: var(--n-accordion-icon-gap); justify-content: space-between; list-style: none; padding: var(--n-accordion-padding); } /* accordion title */ span.pds-accordion__heading { font-family: var(--e-global-typography-a73f9a2-font-family), Sans-serif; font-weight: var(--e-global-typography-a73f9a2-font-weight); line-height: var(--e-global-typography-a73f9a2-line-height); font-size: var(--e-global-typography-a73f9a2-font-size); } .plethoraplugins-accordion.plethoraplugins-theme__minimal .pds-accordion__item { padding: 1rem 0; border-style: solid; border-width: 0px 0px 1px 0px; border-color: #C3C7CA; } /* Hide the original SVG arrow */ .pds-accordion__icon svg { display: none !important; } /* Default icon: plus */ .pds-accordion__icon { width: 1.25rem!important; height: 1.25rem!important; background-image: url('/wp-content/themes/breeze/assets/icons/plus.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block; } /* Open state: minimize icon */ .pds-js-accordion-controller[aria-expanded="true"] .pds-accordion__icon { background-image: url('/wp-content/themes/breeze/assets/icons/minus.svg'); } /* Full-width image block */ @media (max-width: 567px) { .plethoraplugins-accordion { position: relative; /*width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw!important; margin-right: -50vw!important;*/ box-sizing: border-box; } .plethoraplugins-accordion.plethoraplugins-theme__minimal .pds-accordion__item { padding: 1rem 0; } } .pds-accordion__content { padding: 1rem 0!important; } span.pds-accordion__heading { text-wrap: balance; padding-right: 1rem; } /* ======================================================================= Events ========================================================================== */ /* Events header */ .tribe-events { margin-top: 5rem!important; padding: 0; } /* Search Bar */ .tribe-events-header__events-bar .tribe-events-c-events-bar { border-radius: 20px!important; } /* Seach Bar - Find Events button */ .tribe-common--breakpoint-medium.tribe-events .tribe-common-c-btn.tribe-events-c-search__button { font-size:0.875rem!important; font-family: var(--e-global-typography-45735d1-font-family), Sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: white; border-radius: 100px; padding: .75rem 1.25rem .75rem 1.25rem; display: inline-block; line-height: 1; text-align: center; transition: all .3s; margin-top: 0; background-color: var(--e-global-color-primary); } /* Seach Bar - Text */ .tribe-events .tribe-events-c-view-selector__list-item-text, .tribe-common--breakpoint-medium.tribe-common .tribe-common-form-control-text__input { font-size:1rem; } /* Event Template */ #tribe-events-pg-template { max-width: 100%!important; } /* Upcoming Events Button */ .tribe-events button.tribe-events-c-top-bar__datepicker-button:hover { background: transparent; } .tribe-events button.tribe-events-c-top-bar__datepicker-button:focus { outline: none; } /* Event List Container */ .tribe-common--breakpoint-medium.tribe-common .tribe-common-g-row--gutters>.tribe-common-g-col { padding-left: 0; padding-right: 0; } /* Event List Date */ .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-date-tag { min-width: 80px; width: auto; } /* Event List Text */ .tribe-common--breakpoint-medium.tribe-common .tribe-common-b2 { font-size: 1rem; } .tribe-events .tribe-events-calendar-list__event-title-link { font-size: 2rem!important; } .tribe-events-c-top-bar__today-button, span.tribe-events-c-top-bar__datepicker-desktop { font-size: 1rem!important; } .tribe-events p, .tribe-events span { font-size: 1rem!important; } span.tribe-events-calendar-list__event-date-tag-daynum { font-size: 2rem!important; } /* Multi Day Event */ .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__multiday-event-wrapper { height: 19px; margin-bottom: var(--tec-spacer-4)!important; position: relative; } .tribe-events .tribe-events-calendar-month__multiday-event-bar, .tribe-events .tribe-events-calendar-month__multiday-event-bar-inner { background-color: rgba(255, 255, 255, 0.215)!important; border-radius: 0!important; } .tribe-events .tribe-events-calendar-month__multiday-event-bar-inner:hover { background-color: var(--e-global-color-secondary); } .tribe-events .tribe-events-calendar-month__multiday-event-hidden-link .tribe-events-calendar-month__multiday-event-hidden-title, .tribe-events .tribe-events-calendar-month__multiday-event-hidden-title, .tribe-events .tribe-events-calendar-month__multiday-event-bar-link .tribe-events-calendar-month__multiday-event-bar-title, .tribe-events .tribe-events-calendar-month__multiday-event-bar-title { font-family: var(--e-global-typography-secondary-font-family), sans-serif!important; font-size: 1rem!important; font-weight: 600!important; color: #141827!important; } .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__multiday-event-wrapper { margin-bottom: 1rem; } /* Links */ .tec-events-elementor-event-widget__organizer a { text-decoration: none!important; font-size: 1rem!important; font-weight: 600!important; } /* Add to Calendar btn */ .tec-events-elementor-event-widget__export-dropdown .tec-events-elementor-event-widget__export-dropdown-button { border-radius: 100px!important; } /* Google map container */ .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-container { margin: 0!important; } [class*=tec-events-elementor-event-widget] [class*=tec-events-elementor-event-widget] { margin-bottom: 0!important; } /* Img: Aspect Ratio on Event Single Page*/ /* Force a small portrait "poster" box on the image wrapper and any inner wrappers */ .tec-events-elementor-event-widget__image, .tec-events-elementor-event-widget__image > a, .tec-events-elementor-event-widget__image > figure, .tec-events-elementor-event-widget__image > picture { width: 320px !important;/* set poster width */ height: 420px !important;/* set poster height (3:4) */ aspect-ratio: auto !important; /* ignore intrinsic aspect ratio */ display: block !important; overflow: hidden !important; position: relative !important; border-radius: 1em; flex: 0 0 320px !important; /* prevent flex layouts from stretching it */ max-width: none !important; /* defeat theme max-width */ } /* Make the image fill and crop inside that box */ .tec-events-elementor-event-widget__image img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;/* crop without distortion */ object-position: center !important; display: block !important; } /* If Elementor adds img width:100% globally inside widgets, keep ours fixed */ .elementor-widget img.attachment-large, .elementor-widget img.size-full { max-width: none !important; } /* Make it a bit smaller on mobile */ @media (max-width: 768px) { .tec-events-elementor-event-widget__image, .tec-events-elementor-event-widget__image > a, .tec-events-elementor-event-widget__image > figure, .tec-events-elementor-event-widget__image > picture { width: 160px !important; height: 240px !important; flex: 0 0 160px !important; } .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event { padding-right:0; } } /* Img: Aspect Ratio on Event List */ /* content alignment */ .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event { flex-direction: row-reverse; justify-content: space-between; padding-right:2rem; } /* Event List — force portrait poster on the actual */ img.tribe-events-calendar-list__event-featured-image, .tribe-events img.tribe-events-calendar-list__event-featured-image { width: 220px !important; /* poster width */ height: 300px !important; /* poster height (3:4) */ display: block !important; max-width: none !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: center !important; border-radius: 1em; } /* If there’s a link/wrapper around the img, size it too so flex doesn’t stretch */ .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper, .tribe-events a.tribe-events-calendar-list__event-featured-image-wrapper, .tribe-events .tribe-events-calendar-list__event-featured-image-link { width: 220px !important; height: 300px !important; flex: 0 0 220px !important; overflow: hidden !important; border-radius: 1em; position: relative; padding-left: 0; padding-right: 0; } /* Mobile: smaller poster */ @media (max-width: 768px) { img.tribe-events-calendar-list__event-featured-image, .tribe-events img.tribe-events-calendar-list__event-featured-image, .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper, .tribe-events a.tribe-events-calendar-list__event-featured-image-wrapper, .tribe-events .tribe-events-calendar-list__event-featured-image-link { width: 160px !important; height: 240px !important; flex: 0 0 160px !important; } } /* Event Details */ .tribe-events-gmap { display: none; } .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-container { border: none!important; padding: 0!important; } .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-details { padding: 0!important; display: flex; flex-direction: column; align-content: flex-start; justify-content: center; gap: 1rem; } .tec-events-elementor-event-widget__venue-address-address { font-style: normal; } .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-details .tec-events-elementor-event-widget__venue-phone-link { text-decoration: none!important; } /* Event Map */ .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-container { border: 1px solid var(--tec-color-border-secondary); border-radius: var(--tec-border-radius-default); display: flex!important; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: fit-content; margin: 100%; width: 100%!important; max-width: 100%!important; /* flex-direction: row; */ gap: 2rem; justify-content: space-between; } @media only screen and (min-width: 767px) { .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-container { border: 1px solid var(--tec-color-border-secondary); border-radius: var(--tec-border-radius-default); display: flex!important; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: fit-content; margin: auto; max-width: 100%!important; width: 100%!important; /* flex-direction: row; */ gap: 2rem; justify-content: space-between; } } /* ======================================================================= SK Event styles ========================================================================== */ /* SK text upcoming events */ .site-sk .tribe-events .tribe-events-c-messages__message-list-item-link { color: var(--e-global-color-primary); } /* SK text upcoming events Hover */ .site-sk .tribe-events .tribe-events-c-messages__message-list-item-link:hover { color: var(--e-global-color-5a0de86); } /* underline */ .site-sk .tribe-common .tribe-common-anchor-thin-alt { border-bottom: 1px solid var(--e-global-color-primary); } /* SK subscribe to calendar button */ .site-sk .tribe-common .tribe-common-c-btn-border, .site-sk .tribe-common a.tribe-common-c-btn-border { color: var(--e-global-color-primary); border: 1px solid var(--e-global-color-primary); } /* SK subscribe to calendar button hover */ .site-sk .tribe-common .tribe-common-c-btn-border:hover, .site-sk .tribe-common a.tribe-common-c-btn-border:hover { background-color: var(--e-global-color-5a0de86)!important; color: var(--e-global-color-4443d05); } .site-sk .tribe-common .tribe-common-c-svgicon { color: var(--e-global-color-primary); } .site-sk .datepicker .month.active, .site-sk .tribe-events .datepicker .month.active.focused { background: var(--e-global-color-primary); } /* ======================================================================= BLogs ========================================================================== */ .blog-content .wp-block-heading { margin-top: 2rem; } .blog-content p { max-width: 1140px!important; width: 100%; padding: 0 1rem 0 0rem; } .wp-block-gallery.has-nested-images figure.wp-block-image img { margin: 0 auto; } figure.wp-block-image { margin: 2rem auto; } .wp-block-embed__wrapper { position: relative; margin: 2rem auto; } /* ======================================================================= IG ========================================================================== */ .eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled { display: none!important; } /* border radiuso on ig imgs */ .eapps-instagram-feed-posts-item-template-tile .eapps-instagram-feed-posts-item-overlay { border-radius: .75em; } #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-overlay { background: rgba(0, 0, 0, 0.8); border-radius: .75em; } #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item { border-radius: .75em; } /* ======================================================================= LIVE WEBCAMS ========================================================================== */ /* Live Cam Gallery Flex grid on desktop Flex horizontal slider on tablet & mobile */ .livecam-gallery{ --gap: 2rem; --radius: 14px; /* Desktop item sizing */ --tile-min: 240px; /* Slider sizing */ --slide-w-tablet: 55%; --slide-w-mobile: 82%; display: flex !important; flex-wrap: wrap !important; gap: var(--gap) !important; align-items: stretch; } /* Items */ .livecam-gallery .livecam-item{ flex: 1 1 var(--tile-min) !important; min-width: var(--tile-min); } .livecam-gallery .livecam-item h3 { margin: 1rem auto; font-style: normal; font-size: var(--e-global-typography-43c312b-font-size); line-height: var(--e-global-typography-43c312b-line-height); letter-spacing: var(--e-global-typography-43c312b-letter-spacing); font-weight: var(--e-global-typography-43c312b-font-weight); text-transform: var(--e-global-typography-43c312b-text-transform); } /* Clickable tile */ .livecam-gallery .livecam-item > a{ display: block !important; width: 100%; border-radius: var(--radius); overflow: hidden; text-decoration: none; } /* Aspect ratios */ .livecam-gallery.ratio-4-3 .livecam-item > a{ aspect-ratio: 4 / 3; } .livecam-gallery.ratio-16-9 .livecam-item > a{ aspect-ratio: 16 / 9; } /* Image fill */ .livecam-gallery img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } @media (min-width: 1025px){ .livecam-gallery{ flex-wrap: wrap !important; } .livecam-gallery .livecam-item{ flex: 0 0 calc((100% - (2 * var(--gap))) / 3) !important; min-width: 0; } } /* Tablet + Mobile: slider */ @media (max-width: 1024px){ .livecam-gallery{ flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .livecam-gallery .livecam-item{ flex: 0 0 var(--slide-w-tablet) !important; min-width: 0; scroll-snap-align: start; } } /* Tablet: make slides ~15% smaller */ @media (max-width: 1024px) and (min-width: 768px){ .livecam-gallery .livecam-item{ flex-basis: 47% !important; } } /* Mobile: wider slides */ @media (max-width: 767px){ .livecam-gallery .livecam-item{ flex-basis: 50% !important; /* ~25% smaller than 82% */ } } /* Progress bar (only slider mode)*/ .livecam-progress{ display: none; height: 4px; border-radius: 999px; overflow: hidden; margin-top: 2rem; } .livecam-progress__bar{ display: block; height: 100%; width: 0%; border-radius: 999px; transform-origin: left center; } /* Show only when slider begins (tablet/mobile) */ @media (max-width: 1024px){ .livecam-progress{ display: block; margin-top: 2rem; } .livecam-gallery{ padding-bottom: 1rem; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .livecam-progress__bar{ transition: none !important; } } /* Desktop/tablet default: no break */ .livecam-item h3 .m-break{ display: inline; } /* Mobile only: break after the 2nd word */ @media (max-width: 767px){ .livecam-item h3 .m-break{ display: block; } }