/* Theme Name: More Yoga Description: A child theme for Divi. Template: Divi */ @import url("../Divi/style.css"); /* Customisations Go Under Here */ /* CSS Font Styles -------- */ body, button, input, select, optgroup, textarea {font-family: 'poppins', sans-serif; font-weight: 300; font-style: normal;} .store-locator-item-container .store-locator-item > div, .et_pb_testimonial_slider .et_pb_slide_content_testi {font-family: 'poppins', sans-serif !important; font-weight: 300 !important; font-style: normal !important;} b, strong, .bold, #top-menu li.mega-menu > ul > li, .store-list-address a, #moreyoga-studio-locator .search-options-btn, #moreyoga-studio-locator .wpsl-list-title, #moreyoga-studio-locator .wpsl-distance, #moreyoga-studio-locator #store_locatore_search_btn, #cookie-notice #cn-notice-text, #refresh_captcha {font-family: 'poppins', sans-serif; font-weight: 700; font-style: normal;} i, em, .italic, .oblique {font-family: 'poppins', sans-serif; font-weight: 300; font-style: italic;} h1, h2, h3, h4, h5, #top-menu-nav, .et_pb_button, .shopbtn, .topjoinbtn, #top-menu li.mega-menu > ul > li > a:first-child, #cookie-notice #cn-accept-cookie, #cookie-notice #cn-refuse-cookie, #cookie-notice #cn-more-info, #cookie-notice #cn-revoke-buttons a {font-family: 'Garet-Heavy', sans-serif; font-weight: 700; font-style: normal;} .map-listings .store-list-details div.wpsl-name {font-family: 'Garet-Heavy', sans-serif !important; font-weight: 700 !important; font-style: normal !important;} /* GENERAL HTML -------- */ .strikethrough, li.et_pb_not_available {text-decoration: line-through;} .notfeatured {color:#ccc;} .small, #refresh_captcha {font-size:80%; line-height:1.4em;} /* HEADER -------- */ #noticebar {width:100%; text-align:center; padding:10px 0; position:fixed; top:0; z-index:9999;} .noticebar-item {display:inline-block; margin:0; padding:0 5px;} .et_fixed_nav #top-header {top:50px !important;} #top-header, #myt-top-header {z-index:9999;} #top-header .container, #myt-top-header .container {font-weight:normal;} #main-header.et-fixed-header, #myt-main-header {box-shadow:none;} #et-info {padding-top:6px;} #et-info-phone {margin-right:0px;} #et-secondary-nav li.shopbtn {margin-right:5px;} #et-secondary-menu {font-family: 'Garet-Heavy', sans-serif; font-weight: 700; font-style: normal;} #et-secondary-menu > ul > li a {padding-bottom:1.1em;} #top-header #et-info-phone, #myt-top-header #et-info-phone {display:none;} #top-header .joinnowbtn a, #myt-top-header .joinnowbtn a { color:#000000; border:2px #ffd204 solid; background-color:#ffd204; padding:6px 8px 2px 8px; transition: all 0.5s;} #top-header .joinnowbtn a:hover, #myt-top-header .joinnowbtn a:hover {border:2px #ffd204 solid; background-color:#fff; color:#000000 !important;} #top-header .shopbtn a , #myt-top-header .shopbtn a {color:#FFFFFF !important; border:2px #000000 solid; background-color:#000000; padding:6px 8px 2px 8px; transition: all 0.5s;} #top-header .shopbtn a:hover, #myt-top-header .shopbtn a:hover {background-color:#FFFFFF; border:2px #000000 solid; color:#000000 !important;} #noticebar a.topjoinbtn {font-size:18px; padding:8px 10px 5px 10px; transition: all 0.5s; text-transform:uppercase;} #et-info-phone {font-weight:bold;} #top-header .et-social-icon a::before, #myt-top-header .et-social-icon a::before {font-weight:normal !important;} #top-header .fb_messenger, #myt-top-header .fb_messenger {display:block; width:14px; height:17px; background:url('images/icon_facebook-messenger.svg'); background-position-y:3px; background-size:14px 14px; background-repeat:no-repeat;} .et-social-youtube a:before {content: "\e0a3";} /* NEW HEADER 2023 ------------- */ #myt-top-header {left: 0; right: 0;position:fixed; background-color: #ffffff;} #myt-top-header, #myt-top-header a, #et-secondary-nav li li a, #myt-top-header .et-social-icon a::before {font-size: 18px; font-weight: bold; font-style: normal; text-transform: none; text-decoration: none;} #myt-top-header .container {padding-top: .75em;} #myt-top-header, #myt-top-header .container, #myt-top-header #et-info, #myt-top-header .et-social-icon a {line-height: 1em;} #myt-top-header .et-social-icons {float: none;display: inline-block;} #myt-top-header .et-social-icons li {margin-left: 12px;margin-top: -2px;} #myt-top-header .et-social-icon a {font-size: 14px;} #myt-top-header, #myt-top-header a {color: #000000;} #myt-top-header .et-cart-info {margin-left: 15px;} #myt-main-header {position:fixed; border-top: 1px solid #e8e8e8; z-index: 9999; line-height: 23px; font-weight: 500; background-color: #fff; width: 100%; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 0 rgba(0,0,0,.1);} /* NEW HEADER 2023 (CSS Variables Method) ------------- */ :root { --desktop-header-total-height: 180px; --desktop-top-header-position: 50px; --desktop-main-header-position: 105px; --mobile-header-total-height: 60px; } #myt-top-header { left: 0; right: 0; position:fixed; background-color: #ffffff; } #myt-top-header, #myt-top-header a, #et-secondary-nav li li a, #myt-top-header .et-social-icon a::before { font-size: 18px; font-weight: bold; font-style: normal; text-transform: none; text-decoration: none; } #myt-top-header .container { padding-top: .75em; } #myt-top-header, #myt-top-header .container, #myt-top-header #et-info, #myt-top-header .et-social-icon a { line-height: 1em; } #myt-top-header .et-social-icons { float: none; display: inline-block; } #myt-top-header .et-social-icons li { margin-left: 12px; margin-top: -2px; } #myt-top-header .et-social-icon a { font-size: 14px; } #myt-top-header, #myt-top-header a { color: #000000; } #myt-top-header .et-cart-info { margin-left: 15px; } #myt-main-header { position:fixed; border-top: 1px solid #e8e8e8; z-index: 9999; line-height: 23px; font-weight: 500; background-color: #fff; width: 100%; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 0 rgba(0,0,0,.1); } /* --- DESKTOP STYLES --- */ @media all and (min-width: 981px) { #myt-page-container { padding-top: var(--desktop-header-total-height); } #myt-top-header { top: var(--desktop-top-header-position); } #myt-main-header { top: var(--desktop-main-header-position); } } /* --- TABLET STYLES --- */ @media all and (min-width: 480px) and (max-width: 980px) { .et_fixed_nav #top-header { display:none !important; } #myt-page-container { padding-top: var(--mobile-header-total-height); } #myt-top-header { display:none; } #myt-main-header { top: 0; height: var(--mobile-header-total-height); } } /* --- MOBILE STYLES --- */ @media all and (max-width: 479px) { #myt-page-container { padding-top: var(--mobile-header-total-height); } #myt-top-header { display:none; } #myt-main-header { top: 0; height: var(--mobile-header-total-height); } } /* COOKIES ------ */ #cookie-notice #cn-accept-cookie, #cookie-notice #cn-refuse-cookie, #cookie-notice #cn-more-info {border-radius:0px; color:#000000; border:2px solid #FFFFFF; text-transform:uppercase;} #cookie-notice #cn-refuse-cookie, #cookie-notice #cn-more-info, #cookie-notice #cn-revoke-buttons a {border-radius:0px; color:#FFFFFF; background-color:#000000 !important; border:2px solid #FFFFFF; text-transform:uppercase;} #cookie-notice .cn-button:hover {background-color:#000000; color:#ffffff;} #cookie-notice #cn-refuse-cookie:hover, #cookie-notice #cn-more-info:hover, #cookie-notice #cn-revoke-buttons a:hover {background-color:#FFFFFF !important; color:#000000;} #cookie-notice .cn-text-container {padding-right:20px;} #cookie-notice .cn-text-container a {color:#ffd204;} #cookie-notice .cn-text-container a:hover {color:gray;} /* FOOTER -------- */ #main-footer {clear:both;} #footer-bottom .fb_messenger {display:block; width:25px; height:30px; background:url('images/icon_facebook-messenger_2.svg'); background-position-y:5px; background-size:25px 25px; background-repeat:no-repeat;} #footer-bottom .fb_messenger:hover {display:block; width:25px; height:30px; background:url('images/icon_facebook-messenger_3.svg'); background-position-y:5px; background-size:25px 25px; background-repeat:no-repeat;} a img.morefit-logo, .topjoinbtn {opacity:1; transition: all 0.5s;} a:hover img.morefit-logo {opacity:.6;} /* HOME PAGE -------- */ /* ---- Logo ---- */ .et_header_style_centered header#main-header.et-fixed-header .logo_container {padding-top:10px;} /* ---- Home Page Slider ---- */ .goverlay .et_pb_slide {padding:0;} .goverlay .et_pb_container, .et_pb_section.goverlay { width:100%; max-width: none; background-image: url('images/GauzeOverlay.png'); margin: 0px; } #homeslider .et_pb_slide {background-position: center center !important;} /* ---- Wanna become a yoga teacher? ---- */ #become-yoga-teacher .et_pb_button_module_wrapper {display:inline-block; margin-right:10px;} /* MAPS -------- */ .et_pb_map_container { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); } /* MENU -------- */ #top-menu a {line-height:1.2em;} #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a, .bottom-nav li.current-menu-item > a {color: #f9e000;} #top-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after {bottom:25px !important;} .nav li.sub-menu-columns ul.sub-menu {width:520px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0px; /* Chrome, Safari, Opera */ -moz-column-gap: 0px; /* Firefox */ column-gap: 0px;} #top-menu > li > a {margin-top:20px;} /* STUDIO GALLERY -------- */ .my-studio-gallery .et-pb-arrow-prev::before, .my-studio-gallery .et-pb-arrow-next::before {color:#ffffff;} @media all and (min-width: 981px) and (max-width: 1024px) { #logo {max-height:30px !important;} } @media all and (min-width: 981px) { .et_header_style_left #et-top-navigation {padding-top:15px !important;} #et_top_search {margin-top:20px;} } @media all and (max-width: 980px) { body.et_fixed_nav.et_secondary_nav_enabled #main-header {position:fixed;} #top-menu {display:none;} } #top-menu li.mega-menu-5col > ul > li {width: 20%; margin: 0;} #top-menu li.mega-menu-5col > ul > li:nth-of-type(4n+1) {clear: none;} #top-menu li.mega-menu-4col > ul > li {width: 25%; margin: 0;} #top-menu li.mega-menu-4col > ul > li:nth-of-type(3n+1) {clear: none;} #top-menu li.mega-menu > ul > li > a:first-child {color:#000000; border:none; padding-top: 0 !important; font-weight: 900; text-transform:uppercase; font-size:120%; pointer-events:none; cursor:default;} #top-menu .comingsoon a {color:#f9e000 !important;} /* .nav li.sub-menu-columns ul.sub-menu {width:500px;} #top-menu li.sub-menu-columns li {display: inline-block; float: left; width: 250px; box-sizing:border-box;} #top-menu li.sub-menu-columns li:nth-child(odd) {float: left; padding-right:5px;} #top-menu li.sub-menu-columns li:nth-child(even) {float: right;} #top-menu li.sub-menu-columns li a {width:100%;} #top-menu li#menu-item-743 ul {margin-left:-200px;} */ /* FOOTER -------- */ #footer-widgets .footer-widget li {padding-left:0px;} #footer-widgets .footer-widget li::before {content:none;} /* TYPOGRAPHY ---- */ h4.widgettitle {font-weight:900; text-transform:uppercase;} /* OTHER -------- */ .mobile {display:none;} .et_pb_button, .button {text-transform:uppercase; background:#000000 !important; color:#ffffff !important;} .et_pb_button:hover {background:#000000 !important;} .wide_button {width:100%;} .tracking_button, .tracking_button:hover {padding-top: .6em !important; padding-bottom: .6em !important;} .tracking_button.hc-small {font-size:16px;} .studio-jumpbutton-bar a.et_pb_button {margin:0 15px;} .et_pb_button.redblockbtn {background:#ffffff !important; color:#e02b20 !important; padding-top: .6em !important; padding-bottom: .6em !important;} p.nomargin {margin-bottom:0px;} .et_pb_pricing_content {text-align:center;} p.buynow {} p.buynow.buttonleft {text-align:left;} .widebutton {width:100%;} .darkbtn .et_pb_button {} .darkbtn .et_pb_button:hover {} .centerbtn .et_pb_button {text-align:center;} .rightbtn .et_pb_button {text-align:right;} ul.et_pb_social_media_follow_0 {background-color:transparent !important;} .imagebottom {height:100%; display:flex; justify-content:flex-end; flex-direction: column;} .imagebottom img {} .vertalign {display: flex; align-items:center;} .anchormodule {height:1px; overflow:hidden; visibility:hidden; margin: 0px !important;} .fbmessenger-inline .et-social-fbmessenger {width:32px; height:32px; display:inline-block; margin-right:10px;} .fbmessenger-inline .fb_messenger {display:block; width:32px; height:32px; background:url('images/icon_facebook-messenger.svg'); background-size:32px 32px; background-repeat:no-repeat; opacity:1;} .fbmessenger-inline .fb_messenger:hover {opacity:0.7;} .map-address {font-weight:bold; padding-left:25px;} .map-address:before {font-family: ETmodules !important; content:'\e081'; color:#f9e000; width:25px; display:inline-block; margin-left:-25px;} .map-address a:hover {color:#000000; text-decoration:underline;} .store-locator-item-container .store-locator-item div a.store-direction {padding:5px 8px; background-color:#000000; color:#ffffff; border:1px solid #000000; line-height:1em;} .store-locator-item-container .store-locator-item div a.store-direction:hover {background-color:#ffffff; color:#000000; border:1px solid #000000;} /* Bleedover Box */ @media all and (min-width: 769px) { .bleedover-row-right, .bleedover-row-left {} .bleedover-row-right .et_pb_column:nth-of-type(1), .bleedover-row-left .et_pb_column:nth-of-type(2) {z-index:999;} .bleedover-row-right .et_pb_column:nth-of-type(1) > .et_pb_module {width:calc(100% + 150px); margin-right:-150px;} .bleedover-row-left .et_pb_column:nth-of-type(2) > .et_pb_module {width:calc(100% + 150px); margin-left:-150px;} .bleedover-row-right .et_pb_column:nth-of-type(2) > .et_pb_module, .bleedover-row-right .et_pb_column:nth-of-type(2) > .et_pb_module img, .bleedover-row-left .et_pb_column:nth-of-type(1) > .et_pb_module, .bleedover-row-left .et_pb_column:nth-of-type(1) > .et_pb_module img {z-index:-1;} } /* --- Pricing Lists ---- */ .payu_pricing .et_pb_pricing li:nth-child(1), .payu_pricing .et_pb_pricing li:nth-child(3), .membership_pricing .et_pb_pricing li:nth-child(1), .membership_pricing .et_pb_pricing li:nth-child(3) {padding-bottom:0px;} .membership_pricing .et_pb_pricing li {min-height:65px;} .infoblock1 {text-align:center; height:30px;margin-bottom:10px;} .infoblock2 {text-align:center; height:65px;margin-bottom:10px;} #pricing_overlay h4 {font-size:22px; margin-bottom:10px; font-weight:bold;} @media all and (min-width: 981px) { .my-pricing-table .et_pb_pricing_table_wrap {align-items: normal;} .my-pricing-table .et_pb_pricing_table {position:relative;} .my-pricing-table .et_pb_pricing_table .et_pb_button_wrapper {position:absolute; bottom:25px; left:50%; transform: translateX(-50%); white-space: nowrap;} .my-pricing-table .et_pb_pricing_content {padding-bottom:60px !important;} } @media all and (max-width: 980px) { .et_pb_column .my-pricing-table .et_pb_pricing_table {width: 100% !important; max-width: 100.5% !important;} .my-pricing-table .et_pb_pricing_table {float:none;} .my-pricing-table .et_pb_featured_table {margin-top:30px;} .my-pricing-table .et_pb_pricing_content {text-align:center;} } /* ---- Price Counter ---- */ .price-counter span.percent-value:before {content:'\00A3';} /* ---- Testimonial Slider ---- */ .et_pb_testimonial_slider.dot_nav_class .swiper-pagination-bullets span {border-radius:50%;} /* --- Instructor Grid ----- */ #instructor-grid .et_pb_module_inner .et_pb_portfolio_items {padding-left:50px; padding-right:50px;} #instructor-grid .et_pb_portfolio_item {padding:8px; box-sizing:border-box;} #instructor-grid .et-pb-slider-arrows {z-index:999;} #instructor-grid .et-pb-arrow-prev {left:0px;} #instructor-grid .et-pb-arrow-next {right:0px;} #instructor-grid h1 {display:none;} #instructor-grid .meta {padding:20px;} #instructor-grid p {font-size:0.8em; line-height:1.5em;} #instructor-grid h2 {text-align:center;} #instructor-grid h4 {color:#666; text-align:center; text-transform:uppercase; margin-top:5px; margin-bottom:10px;} #instructor-grid .et_overlay, #instructor-grid a .meta {color:#666;} #instructor-grid .et_pb_portfolio_image {filter: grayscale(100%);} .et_pb_fullwidth_portfolio .et_pb_portfolio_image h4 { display: block; float: left; position: relative; z-index: 5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -o-backface-visibility: hidden; } /* ---- Classes ---- */ .et_pb_gutters3 .classes .et_pb_column_1_4 {width:22.875%;} .et_pb_gutters3 .classes .et_pb_column {margin-right:2.5%;} .classes .et_pb_toggle {border:none;} .classes .et_pb_row {padding:15px 0;} /* ---- Shop ---- */ /* Featured Products */ .featured-product-wrap {margin-top:15px;} body.woocommerce-page #main-content {padding-bottom:60px;} /* .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img, .flex-viewport, .flex-control-thumbs img {border:1px solid #e5e5e5;} */ .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {font-size:0.9em;} .woocommerce ul.products li.product .woocommerce-loop-product__title {padding:0px;} ul.products .woocommerce-Price-amount {font-size: 18px; font-weight:700; color:#666666;} /* .woocommerce-Price-amount {font-size: 24px; font-weight:700; color:#f9e000;} */ .et_pb_widget.woocommerce ul li, ul#menu-shop-menu li {margin-bottom:0px;} header.woocommerce-products-header {border-bottom:1px solid #e5e5e5; padding-bottom:15px; margin-bottom:10px;} .woocommerce-product-details__short-description, .woocommerce-tabs, .woocommerce-MyAccount-content {font-size:80%; line-height:1.4rem;} #left-area .woocommerce-product-details__short-description ul, #left-area .woocommerce-tabs ul {padding:0 0 15px 1em; line-height:1.4em;} .entry-summary p.price span {font-size: 30px !important; font-weight:700;} p.price {margin-bottom:15px; color:#666666 !important;} h1.woocommerce-products-header__title, h1.main_title {font-size:50px;} .product h4 {font-size:140%; font-weight:900; margin-top:20px;} h2.woocommerce-loop-product__title {font-size:26px; font-weight:900;} .woocommerce-message, .woocommerce-info {color:#333 !important;} .related h2.woocommerce-loop-product__title {font-size: 1em !important;} .woocommerce-MyAccount-navigation {padding:15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9e000;} #left-area .woocommerce-MyAccount-navigation ul {padding:0px; line-height:1.2em; margin-bottom:0px;} .woocommerce-MyAccount-navigation ul, .woocommerce-MyAccount-navigation ul li {list-style:none; margin-bottom:10px;} .woocommerce-MyAccount-navigation ul li a {font-weight:500; text-transform:uppercase; color:#323a46;} .woocommerce-MyAccount-navigation ul li a:hover {opacity: .7;} .woocommerce-orders-table a.button, .woocommerce-orders-table a.button:hover {font-size:16px; font-weight:bold; padding: .3em 1em;} .woocommerce-orders-table a.button:hover {background: #666 !important;} .woocommerce-orders-table a.button:hover:after {content:''; font-size:0.1px;} .woocommerce-page span.onsale, .woocommerce span.onsale {background: #ffd204 !important; font-weight: 700 !important;} /* WooCommerce Cart & Donations */ .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {float:none; width:100%;} #main-content table.cart .donation-block td {padding:20px;} table.shop_table_responsive tr.donation-block td::before {content:'' !important;} div.donation p.message {font-size:75%; text-transform:uppercase; margin-bottom:10px;} div.donation input[type="text"] {width:200px;} /* WooCommerce Checkout */ .woocommerce-terms-and-conditions-wrapper {margin-bottom:30px;} /* Social Media -------- */ p.sbi_bio {color:#505372;} #sb_instagram .sbi_follow_btn a {background: #fff; color:#ffd204; border:2px solid #ffd204;} /* Recatpcha */ #refresh_captcha {text-transform:uppercase;} /* Forms (to match Divi styles) -------- */ input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input.text, input.title, textarea { font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif; width: 100%; padding: 10px 4% border: none !important; -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; color: #666; background-color: #eee; font-size: 20px; font-weight: 400; } input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input.text, input.title { } div.healcode a.hc-button, div.healcode input.hc-button, .pum-trigger {min-width:75px !important; color: #fff !important; background:#ffd204 !important; border-radius:0px !important; -moz-border-radius:0px !important; padding: 0.3em 0.5em !important; display: inline-block !important; font-family: inherit; cursor: pointer; font-size: 20px !important; font-weight: 500; line-height: 1.7em !important; letter-spacing:0px !important; transition: all 0.2s; border: 2px solid #ffd204;} div.healcode a.hc-button, div.healcode input.hc-button {margin: 0 0 0 15px !important;} .pum-trigger {margin:15px 0 15px 0;} div.healcode a.hc-button:hover, div.healcode input.hc-button:hover {background: rgba(0, 0, 0, 0.05) !important; border: 2px solid transparent !important;} div.healcode a.hc-button::after, div.healcode input.hc-button::after {} div.healcode a.hc-button:hover:after, div.healcode input.hc-button:hover:after {margin-left: 0; opacity: 1;} textarea {padding: 14px 4%} select {font-size: 16px; width:100%; padding: 14px 4%; border:#eee 1px solid;} .hc-birth-date select {width:auto;} .hc-registration-field {margin: 8px 0 8px 0;} .hc-actions {padding-top:20px;} div.healcode .header .date_links .healcode-jump-to-date input {padding: 5px 5px 5px 30px !important;} table.enrollments a.hc-button, table.enrollments input.hc-button, table.schedule a.hc-button, table.schedule input.hc-button {font-size: 14px !important;} .btm-align-row .et_pb_column {padding-bottom:30px;} .btm-align {position:absolute; bottom:0px; left:0px;} .donation select {width:75px; display:inline-block;} /* DATE COUNTDOWN */ #top-bar-counter {width:320px; padding:0px;} #top-bar-counter.et_pb_countdown_timer .section.values { width: auto; max-width: 80px; vertical-align: top; padding:0 5px; } #top-bar-counter.et_pb_countdown_timer .section p {font-size:18px !important; line-height:18px;} #top-bar-counter.et_pb_countdown_timer .section p.value {font-weight:bold;} #top-bar-counter.et_pb_countdown_timer .section p.value, #top-bar-counter.et_pb_countdown_timer .section p.label {display:inline;} /* STORE LOCATOR */ #moreyoga-studio-locator custom:after {content: ""; display: table; clear: both;} .adp-step, .adp-substep {font-size:0.7em; line-height:1em;} table.adp-directions tr td {padding: 6px 12px;} .store-list-address a {margin-bottom:6px;} .store-list-address a:hover {color:#ffd204;} #store_locator_search_form #store_locatore_search_input {border:1px solid #ffd204 !important;} /* RESPONSIVE STYLES -------- */ @media all and (min-width: 1406px) { #top-menu li {padding-right: 18px;} .et_pb_bg_layout_dark .et_pb_slide_description {padding-left:300px; padding-right:300px;} } @media all and (max-width: 1405px) { #top-menu li {padding-right: 9px; font-size: 12px;} #top-menu li a {font-size: 12px !important;} } @media all and (max-width: 1365px) { #et-info-phone {display:none;} } @media all and (min-width: 981px) and (max-width: 1405px) { } @media all and (min-width: 981px) { #main-header.et-fixed-header {box-shadow:none !important;} #homeslider .et_pb_slider {max-height:800px; position:relative;} #homeslider .et_pb_slider .et_pb_slide_description {padding: 13% 8%;} } @media all and (max-width: 1100px) { } @media all and (min-width: 981px) and (max-width: 1100px) { #pricing_overlay h4 {font-size:18px;} #top-menu li.mega-menu-5col > ul > li a {padding: 6px 10px;} } @media all and (max-width: 980px) { .mobile {display:block;} .mobtopnav {display:inline; padding-left:7px; padding-right:3px; text-transform:uppercase;} .et_mobile_menu li.menu-item-73, .et_mobile_menu li.menu-item-71 {display:none;} } @media all and (max-width: 970px) { .infoblock1 {text-align:center; height:20px;margin-bottom:5px;} #sidebar {padding-top:15px; margin-top:15px; border-top:1px solid #eee;} } @media screen and (min-width: 811px) { .store-list-address a.store-direction {margin-left:10px;} } @media all and (max-width: 810px) { #main-header {top:50px !important;} .desktop-only {display:none;} span#et-info-phone, span#et-info-email {font-size:0px;} span#et-info-phone:before, span#et-info-email:before {font-size:20px;} h1 {font-size:32px !important;} h1.product_title {font-size:24px !important;} .et_pb_fullwidth_header_subhead {font-size:22px !important; line-height:1.2em;} .mobilestack .et_pb_row {padding:0px;} div.healcode .header select {width:100% !important;} .woocommerce-MyAccount-navigation {margin-bottom:15px;} .woocommerce-MyAccount-navigation ul {font-size:80%; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; line-height:1.1em;} .woocommerce table.shop_table_responsive tr.donation-block td, .woocommerce-page table.shop_table_responsive tr.donation-block td {text-align:left !important;} div.donation input[type="text"] {width:calc(100% - 20px); margin-bottom:10px;} .woocommerce-cart table.cart tr.donation-block input[type="submit"] {width:100%;} } @media all and (max-width: 767px) { } @media all and (max-width: 620px) { } @media all and (max-width: 479px) { #noticebar {display:none;} #main-header {top:0px !important;} .woocommerce-page button.button, .woocommerce-page button.button.alt {font-size:16px;} } @media all and (max-width: 400px) { .db_pb_button_2, .et_pb_button_two {margin-left:0 !important;} } } .mfp-title { display: none; } /* --- Countdown Timer --- */ #top-bar-counter.et_pb_countdown_timer .days.section p.value::first-letter {font-size:0px !important; vertical-align:top;} /* --- Disable Divi default mobile menu --- */ #et_mobile_nav_menu {display:none !important;} #main-header {border-top: 1px solid #e8e8e8; z-index:9999;} @media all and (min-width: 981px) { #main-header {top:105px !important;} } @media all and (max-width: 980px) { body.et_fixed_nav.et_secondary_nav_enabled #main-header {height:60px;} .et_header_style_left .logo_container, .et_header_style_left #logo {height:55px;} .shiftnav::after {box-shadow:none;} .shiftnav ul.shiftnav-menu li.menu-item > .shiftnav-target {padding:5px 25px; text-transform:uppercase; font-weight:bold; color:#000000;} .shiftnav ul.shiftnav-menu .sub-menu li.menu-item > .shiftnav-target {padding:5px 25px 5px 45px;} .shiftnav ul.shiftnav-menu > li.menu-item > .shiftnav-target {border-top:1px solid #ffd204;} } @media (max-width: 768px) { #main-header {top: 0px !important;} } /* --- Dropdown Menu Arrow Position ---- */ #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {top: auto; bottom:30px;} /* --- Hidden Single Variation On Product ---- */ .woocommerce-variation-description{ display:none!important; } .wpforms-container textarea.wpforms-field-medium { outline: 1px solid black; } div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea, .wp-core-ui div.wpforms-container-full input[type=date], .wp-core-ui div.wpforms-container-full input[type=datetime], .wp-core-ui div.wpforms-container-full input[type=datetime-local], .wp-core-ui div.wpforms-container-full input[type=email], .wp-core-ui div.wpforms-container-full input[type=month], .wp-core-ui div.wpforms-container-full input[type=number], .wp-core-ui div.wpforms-container-full input[type=password], .wp-core-ui div.wpforms-container-full input[type=range], .wp-core-ui div.wpforms-container-full input[type=search], .wp-core-ui div.wpforms-container-full input[type=tel], .wp-core-ui div.wpforms-container-full input[type=text], .wp-core-ui div.wpforms-container-full input[type=time], .wp-core-ui div.wpforms-container-full input[type=url], .wp-core-ui div.wpforms-container-full input[type=week], .wp-core-ui div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full textarea { outline: 1px solid black; } @media (min-width: 981px) { .page-id-61527 #myt-page-container { padding: 0 !important; } .page-id-61527 .et_pb_section { padding: 0 !important; } } div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) { background-color: #ffbc0b; color: #000000; } .wpforms-container .wpforms-field .wpforms-field-label { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; } .wpforms-container .wpforms-field ul.wpforms-likert-scale { display: flex; justify-content: space-between; padding: 0; list-style: none; margin: 20px 0; } .wpforms-container .wpforms-field ul.wpforms-likert-scale li { text-align: center; margin: 0 5px; } .wpforms-container .wpforms-field ul.wpforms-likert-scale li label { display: block; width: 60px; height: 60px; background-color: #2d2f33; color: white; border-radius: 50%; font-size: 1.25rem; line-height: 60px; text-align: center; cursor: pointer; transition: background-color 0.3s ease; font-weight: bold; } /* Selected circle — yellow background */ .wpforms-container .wpforms-field ul.wpforms-likert-scale li input[type="radio"]:checked + label { background-color: #ffdd00; color: #000; } /* Hide radio inputs */ .wpforms-container .wpforms-field ul.wpforms-likert-scale li input[type="radio"] { display: none; } /* Scale anchors (e.g., "Meh", "Absolutely Namastetastic") */ .wpforms-container .wpforms-likert-scale-description { display: flex; justify-content: space-between; font-size: 0.9rem; margin-top: -10px; margin-bottom: 20px; color: #666; } div.wpforms-container-full input[type=radio]:before { border-width: var(--wpforms-field-border-size); border-style: var(--wpforms-field-border-style); border-color: rgb(0 0 0); background-color: var(--wpforms-field-background-color); background-clip: padding-box; background-image: none; border-radius: 3px; } div.wpforms-container-full input[type=checkbox]:checked:before, div.wpforms-container-full input[type=radio]:checked:before { margin: 0; border-width: var(--wpforms-field-border-size, 0); border-style: solid; border-color: #ffbc0b; box-shadow: 0 0 0 1px #ffbc0b, 0 1px 2px rgb(0 0 0 / 0%); outline: none; } div.wpforms-container-full input[type=radio]:checked:after { border: 1px solid transparent; border-radius: 50%; background-color: #ffbc0b; transform: scale(0.5); -moz-transform: scale(0.47); left: calc(-3px + var(--wpforms-field-border-size, 1px)); top: calc(-3px + var(--wpforms-field-border-size, 1px)); } div.wpforms-container-full .wpforms-field-description, div.wpforms-container-full .wpforms-field-limit-text, .wp-core-ui div.wpforms-container-full .wpforms-field-description, .wp-core-ui div.wpforms-container-full .wpforms-field-limit-text { font-size: var(--wpforms-label-size-sublabel-font-size); line-height: var(--wpforms-label-size-sublabel-line-height); color: rgb(0 0 0); margin: var(--wpforms-field-size-sublabel-spacing) 0 0 0; } .wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field { padding: 25px 0; position: relative; } div.wpforms-container-full .wpforms-form .wpforms-field-divider h3 { color: rgb(0 0 0); padding-top: var(--wpforms-field-size-input-spacing); font-size: calc(2 * var(--wpforms-label-size-font-size)); font-weight: 700; } div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) { background-color: #000; color: #fff; } div.wpforms-container-full .wpforms-field-description, div.wpforms-container-full .wpforms-field-limit-text, .wp-core-ui div.wpforms-container-full .wpforms-field-description, .wp-core-ui div.wpforms-container-full .wpforms-field-limit-text { margin-top: 25px !important; max-width: 70%; } /* Base button style — always apply font and bold weight */ div.wpforms-container-full input[type=submit], div.wpforms-container-full button[type=submit], div.wpforms-container-full .wpforms-page-button, .wp-core-ui div.wpforms-container-full input[type=submit], .wp-core-ui div.wpforms-container-full button[type=submit], .wp-core-ui div.wpforms-container-full .wpforms-page-button { font-family: 'canada-type-gibson', sans-serif; font-weight: bold; } /* Hover & active background effect */ div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full input[type=submit]:active, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full button[type=submit]:active, div.wpforms-container-full .wpforms-page-button:hover, div.wpforms-container-full .wpforms-page-button:active, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:active, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:active, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:active { background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #fff; } .wpforms-container .wpforms-field .wpforms-field-label { font-size: 1.4rem; font-weight: 700; margin-bottom: 25px; } div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label { font-family: 'canada-type-gibson', sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1.3; color: inherit; margin-bottom: 1rem; } .mfp-title { display: none; } /* --- Countdown Timer --- */ #top-bar-counter.et_pb_countdown_timer .days.section p.value::first-letter {font-size:0px !important; vertical-align:top;} /* --- Disable Divi default mobile menu --- */ #et_mobile_nav_menu {display:none !important;} #main-header {border-top: 1px solid #e8e8e8; z-index:9999;} @media all and (min-width: 981px) { #main-header {top:105px !important;} } @media all and (max-width: 980px) { body.et_fixed_nav.et_secondary_nav_enabled #main-header {height:60px;} .et_header_style_left .logo_container, .et_header_style_left #logo {height:55px;} .shiftnav::after {box-shadow:none;} .shiftnav ul.shiftnav-menu li.menu-item > .shiftnav-target {padding:5px 25px; text-transform:uppercase; font-weight:bold; color:#000000;} .shiftnav ul.shiftnav-menu .sub-menu li.menu-item > .shiftnav-target {padding:5px 25px 5px 45px;} .shiftnav ul.shiftnav-menu > li.menu-item > .shiftnav-target {border-top:1px solid #ffd204;} } @media (max-width: 768px) { #main-header {top: 0px !important;} } /* --- Dropdown Menu Arrow Position ---- */ #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {top: auto; bottom:30px;} /* --- Hidden Single Variation On Product ---- */ .woocommerce-variation-description{ display:none!important; } .wpforms-container textarea.wpforms-field-medium { outline: 1px solid black; } div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea, .wp-core-ui div.wpforms-container-full input[type=date], .wp-core-ui div.wpforms-container-full input[type=datetime], .wp-core-ui div.wpforms-container-full input[type=datetime-local], .wp-core-ui div.wpforms-container-full input[type=email], .wp-core-ui div.wpforms-container-full input[type=month], .wp-core-ui div.wpforms-container-full input[type=number], .wp-core-ui div.wpforms-container-full input[type=password], .wp-core-ui div.wpforms-container-full input[type=range], .wp-core-ui div.wpforms-container-full input[type=search], .wp-core-ui div.wpforms-container-full input[type=tel], .wp-core-ui div.wpforms-container-full input[type=text], .wp-core-ui div.wpforms-container-full input[type=time], .wp-core-ui div.wpforms-container-full input[type=url], .wp-core-ui div.wpforms-container-full input[type=week], .wp-core-ui div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full textarea { outline: 1px solid black; } @media (min-width: 981px) { .page-id-61527 #myt-page-container { padding: 0 !important; } .page-id-61527 .et_pb_section { padding: 0 !important; } } div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) { background-color: #ffbc0b; color: #000000; } .wpforms-container .wpforms-field .wpforms-field-label { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; } .wpforms-container .wpforms-field ul.wpforms-likert-scale { display: flex; justify-content: space-between; padding: 0; list-style: none; margin: 20px 0; } .wpforms-container .wpforms-field ul.wpforms-likert-scale li { text-align: center; margin: 0 5px; } .wpforms-container .wpforms-field ul.wpforms-likert-scale li label { display: block; width: 60px; height: 60px; background-color: #2d2f33; color: white; border-radius: 50%; font-size: 1.25rem; line-height: 60px; text-align: center; cursor: pointer; transition: background-color 0.3s ease; font-weight: bold; } /* Selected circle — yellow background */ .wpforms-container .wpforms-field ul.wpforms-likert-scale li input[type="radio"]:checked + label { background-color: #ffdd00; color: #000; } /* Hide radio inputs */ .wpforms-container .wpforms-field ul.wpforms-likert-scale li input[type="radio"] { display: none; } /* Scale anchors (e.g., "Meh", "Absolutely Namastetastic") */ .wpforms-container .wpforms-likert-scale-description { display: flex; justify-content: space-between; font-size: 0.9rem; margin-top: -10px; margin-bottom: 20px; color: #666; } div.wpforms-container-full input[type=radio]:before { border-width: var(--wpforms-field-border-size); border-style: var(--wpforms-field-border-style); border-color: rgb(0 0 0); background-color: var(--wpforms-field-background-color); background-clip: padding-box; background-image: none; border-radius: 3px; } div.wpforms-container-full input[type=checkbox]:checked:before, div.wpforms-container-full input[type=radio]:checked:before { margin: 0; border-width: var(--wpforms-field-border-size, 0); border-style: solid; border-color: #ffbc0b; box-shadow: 0 0 0 1px #ffbc0b, 0 1px 2px rgb(0 0 0 / 0%); outline: none; } div.wpforms-container-full input[type=radio]:checked:after { border: 1px solid transparent; border-radius: 50%; background-color: #ffbc0b; transform: scale(0.5); -moz-transform: scale(0.47); left: calc(-3px + var(--wpforms-field-border-size, 1px)); top: calc(-3px + var(--wpforms-field-border-size, 1px)); } div.wpforms-container-full .wpforms-field-description, div.wpforms-container-full .wpforms-field-limit-text, .wp-core-ui div.wpforms-container-full .wpforms-field-description, .wp-core-ui div.wpforms-container-full .wpforms-field-limit-text { font-size: var(--wpforms-label-size-sublabel-font-size); line-height: var(--wpforms-label-size-sublabel-line-height); color: rgb(0 0 0); margin: var(--wpforms-field-size-sublabel-spacing) 0 0 0; } .wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field { padding: 25px 0; position: relative; } div.wpforms-container-full .wpforms-form .wpforms-field-divider h3 { color: rgb(0 0 0); padding-top: var(--wpforms-field-size-input-spacing); font-size: calc(2 * var(--wpforms-label-size-font-size)); font-weight: 700; } div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) { background-color: #000; color: #fff; } div.wpforms-container-full .wpforms-field-description, div.wpforms-container-full .wpforms-field-limit-text, .wp-core-ui div.wpforms-container-full .wpforms-field-description, .wp-core-ui div.wpforms-container-full .wpforms-field-limit-text { margin-top: 25px !important; max-width: 70%; } /* Base button style — always apply font and bold weight */ div.wpforms-container-full input[type=submit], div.wpforms-container-full button[type=submit], div.wpforms-container-full .wpforms-page-button, .wp-core-ui div.wpforms-container-full input[type=submit], .wp-core-ui div.wpforms-container-full button[type=submit], .wp-core-ui div.wpforms-container-full .wpforms-page-button { font-family: 'canada-type-gibson', sans-serif; font-weight: bold; } /* Hover & active background effect */ div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full input[type=submit]:active, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full button[type=submit]:active, div.wpforms-container-full .wpforms-page-button:hover, div.wpforms-container-full .wpforms-page-button:active, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:active, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:active, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:active { background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #fff; } .wpforms-container .wpforms-field .wpforms-field-label { font-size: 1.4rem; font-weight: 700; margin-bottom: 25px; } div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label { font-family: 'canada-type-gibson', sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1.3; color: inherit; margin-bottom: 1rem; } .vertical-scroll-gallery { height: 400px; overflow: hidden; position: relative; } .vertical-scroll-gallery .scroll-track { display: flex; flex-direction: column; animation: scrollUp 20s linear infinite; } @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } /* --- MAIN LAYOUT --- */ .studios-container { font-family: 'Poppins', sans-serif; max-width: 100%; margin-left: auto; margin-right: auto; } /* --- GRID --- */ .studios-grid { display: grid; grid-template-columns: 100%; margin: -0.75rem; } .studios-grid > * { padding: 0.75rem; } /* --- GENERAL CARD STYLES --- */ .studios-card { border-radius: 1rem; padding: 1.5rem; margin: 0.4rem; overflow: hidden; display: flex; transition: all 0.3s ease-in-out; color: #1f2937; text-decoration: none; box-sizing: border-box; } .studios-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transform: translateY(-4px); } /* --- IMAGE STYLES --- */ .studios-card-image { width: 100%; height: 100%; object-fit: contain; } .marquee-image { width: 70%; } /* --- MARQUEE CARD --- */ .studios-card-marquee { flex-direction: column; /* Mobile first layout */ } .studios-card-image-wrapper { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; transition: transform 0.5s ease-in-out; overflow: hidden; } .studios-pills-wrapper { display: flex; justify-content: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: nowrap; } .studios-pill-group { text-align: center; transition: transform 0.3s ease-in-out; } .studios-card-marquee:hover .studios-pill-group { transform: scale(1.05); } .studios-pill { color: black; font-weight: 900; font-size: 1rem; padding: 0.6rem 1.5rem; border-radius: 9999px; margin-bottom: 0.25rem; box-sizing: border-box; display: inline-block; text-align: center; white-space: nowrap; } .pill-purple { background-color: #E8A0E8; } .pill-green { background-color: #74E9D0; display: inline-flex; align-items: baseline; justify-content: center; gap: 0.5rem; } .pill-price-current { font-size: 1rem; font-weight: 900; } .pill-price-original { text-decoration: line-through; font-size: 0.7rem; font-weight: 600; opacity: 0.75; } .studios-pill-label { font-size: 0.75rem; font-weight: 600; line-height: 1.25; } .studios-card-text-group { margin-top: auto; } .studios-card-title { font-size: 33px; line-height: 1; margin-bottom: 0; } .studios-card-date { margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } /* --- SMALLER CARDS --- */ .studios-card-content-half { width: 40%; position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .studios-card-image-half { width: 60%; position: relative; z-index: 0; transition: transform 0.5s ease-in-out; } /* --- GRADIENT EFFECT --- */ .studios-card-image-wrapper::after, .studios-card-image-half::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, var(--card-bg-color) 15%, transparent 100%); pointer-events: none; z-index: 1; } /* --- HOVER EFFECTS --- */ .studios-card:hover .studios-card-image-wrapper, .studios-card:hover .studios-card-image-half { transform: scale(1.05); } .signup-button { display: inline-flex; align-items: center; white-space: nowrap; color: black; font-weight: 900; font-size: 1.125rem; padding: 0.75rem 1.5rem; border-radius: 9999px; margin-bottom: 0.5rem; transition: all 0.3s ease-in-out; } .studios-card:hover .signup-button { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .arrow { width: 1.5rem; height: 1.5rem; opacity: 0; max-width: 0; transition: all 0.3s ease-in-out; } .studios-card:hover .arrow { opacity: 1; max-width: 1.5rem; } .studios-sub-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; } .studios-card-text-group-small { text-align: left; margin-top: 1rem; } .studios-card-date-small { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .studios-card-title-small { font-size: 1.2rem; line-height: 1.2; } /* --- RESPONSIVE STYLES --- */ @media (max-width: 767px) { .studios-pills-wrapper { flex-wrap: nowrap; order: 1; /* Pills on top */ } .studios-card-image-wrapper { order: 2; /* Image in the middle */ } .studios-card-text-group { order: 3; /* Text at the bottom */ margin-top: 1.5rem; } .studios-pill { font-size: 1rem; padding: 0.6rem 1.5rem; } .pill-price-current, .pill-price-original { font-size: 1rem; } } @media (min-width: 768px) { .studios-grid { grid-template-columns: repeat(2, 50%); } .studios-card-marquee { grid-column: span 2 / span 2; display: grid; grid-template-columns: 40% 1fr; grid-template-rows: auto 1fr; gap: 1.5rem; } .studios-card-marquee .studios-pills-wrapper { grid-column: 1 / 2; grid-row: 1 / 2; } .studios-card-marquee .studios-card-text-group { grid-column: 1 / 2; grid-row: 2 / 3; align-self: end; } .studios-card-marquee .studios-card-image-wrapper { grid-column: 2 / 3; grid-row: 1 / 3; min-height: 0; } .studios-card-title { font-size: 2.25rem; } .studios-card-title-small { font-size: 1.5rem; } } @media (min-width: 1024px) { .studios-grid { grid-template-columns: repeat(3, 33.3333%); grid-auto-rows: 16em; } .studios-card-marquee { grid-column: span 2 / span 2; } .studios-card-title { font-size: 2.5rem; } .studios-card-title-small { font-size: 1.75rem; } } @media (min-width: 1440px) { .marquee-image { max-height: 100%; } } .woocommerce-product-gallery { opacity: 1 !important; } /* --- Base CSS & Reset --- */ .custom-yoga-page, .custom-yoga-page *, .custom-yoga-page *::before, .custom-yoga-page *::after { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } .custom-yoga-page ul, .custom-yoga-page li { list-style: none !important; } .custom-yoga-page h2, .custom-yoga-page h3, .custom-yoga-page p, .custom-yoga-page a, .custom-yoga-page li, .custom-yoga-page div { line-height: 1.5; } .custom-yoga-page { max-width: 100%; color: #252635; } /* --- Header & Navigation --- */ .custom-yoga-page .cyp-header { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5em; } .custom-yoga-page .cyp-nav-list { display: flex; width: 100%; justify-content: center; align-items: stretch; list-style: none; border-radius: 1em; overflow: hidden; padding-left: 0px !important; } .custom-yoga-page .cyp-nav-list li { flex: 1 1 0; text-align: center; display: flex; } .custom-yoga-page .cyp-nav-link { display: flex; justify-content: center; align-items: center; cursor: pointer; padding: 0.75em 1em; font-weight: 600; font-size: 1.125em !important; transition: all 0.2s ease-in-out; color: #252635; text-decoration: none; width: 100%; height: 100%; background-color: #FFFBEB; border-radius: 0 !important; } .custom-yoga-page .cyp-nav-link:hover { background-color: #FDF2B3; } .custom-yoga-page .cyp-nav-link.active { background-color: #F9E000; color: #252635; } /* --- Main Content & Tab Styling --- */ .custom-yoga-page .cyp-main-content { position: relative; overflow: hidden; } .custom-yoga-page .cyp-tab-content { display: none; opacity: 0; } .custom-yoga-page .cyp-tab-content.active { display: block; opacity: 1; transition: opacity 0.3s ease-in-out;} .custom-yoga-page .cyp-title { font-size: 33px !important; color: #252635;; text-align: center; } .custom-yoga-page #classes .cyp-title { font-weight: 900 !important; text-transform: uppercase !important; } /* --- UNIFIED PRICING LAYOUT (ALL SCREENS) --- */ .cyp-prices-section { max-width: 1200px; margin: 0 auto; padding: 0; } .cyp-pricing-heading h2 { text-align: center; font-size: 1.8em !important; font-weight: 900; color: #252635; margin-bottom: 0.5em; text-transform: uppercase; } .cyp-pricing-heading p { text-align: center; font-size: 0.9em !important; color: #252635; max-width: 700px; margin: 0 auto 2em auto; } .cyp-price-grid { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 2.5em; } .cyp-price-card { background-color: white; border-radius: 1em; padding: 1em; display: flex; flex-direction: column; border: 1px solid #252634; } .cyp-price-card-header { display: flex; justify-content: space-between; align-items: center; width: 100%; } .cyp-price-card-info-toggle { display: flex; cursor: pointer; background: #e5e7eb; border-radius: 50%; width: 24px; height: 24px; align-items: center; justify-content: center; font-style: normal; font-weight: bold; margin-left: 1em; flex-shrink: 0; } .cyp-price-card.no-info .cyp-price-card-info-toggle { display: none; } .cyp-price-card-content-mobile { flex-grow: 1; } .cyp-price-card-title { font-size: 1.1em !important; margin: 0; font-weight: 900; text-transform: uppercase;} .cyp-price-card-price { font-size: 1.3em !important; margin: 0; font-weight: 900;} .cyp-price-card-details { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .cyp-price-card.info-visible .cyp-price-card-details { max-height: 500px; } .cyp-price-card-details .cyp-features-list { margin-top: 1em; font-size: 0.9em !important; } .cyp-price-card-details .cyp-features-list li { position: relative; margin-bottom: 0.5em !important; padding-left: 1.5em !important; } .cyp-price-card-details .cyp-features-list li::before { content: '✓'; color: #252635; font-weight: bold; position: absolute; left: 0; top: 0.1em; } .cyp-price-card-footer { padding-top: 0; margin-top: 1em; width: 100%; } .cyp-price-card-button { display: inline-block; text-align: center; background-color: #F9E000; color: #252635; padding: 0.8em 2em; border-radius: 15px; text-decoration: none; font-weight: bold; transition: background-color 0.2s; white-space: nowrap; } .cyp-price-card-button:hover { background-color: #e0c800; } .cyp-price-card-disclaimer { font-size: 0.8em !important; color: #252635; margin-top: 1em; text-align: left; opacity: 0.8; } /* --- UNIFIED MEMBERSHIP PERKS LAYOUT --- */ .cyp-perks-section-creative { display: grid; align-items: center; gap: 10%; padding: 0; margin: 0; width: 100%; } .cyp-perks-mobile-view { display: none; } /* Hide mobile by default */ /* Desktop Perks (Floating Bubbles) */ @media (min-width: 768px) { .cyp-perks-section-creative { grid-template-columns: 1fr 1fr; } .cyp-perks-animation-container { position: relative; min-height: 350px; } .cyp-perks-background-blob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 400px; color: #FFFBEB; z-index: 1; } .cyp-perks-center-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 280px; width: 100%; z-index: 2; } .cyp-perks-center-image img { width: 100%; height: auto; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } .cyp-perk-pill { position: absolute; z-index: 3; background-color: white; padding: 0.6em 1em; border-radius: 9999px; font-weight: 600; color: #252635; white-space: nowrap; animation: float 6s ease-in-out infinite; border: 1px solid #f0f0f0; font-size: clamp( 0.7em, 1.2vw, 0.9em) !important; } .cyp-pill-1 { top: 5%; left: 5%; animation-delay: 0s; } .cyp-pill-2 { top: 20%; right: 0%; animation-delay: -1s; } .cyp-pill-3 { top: 50%; left: 0%; animation-delay: -2s; } .cyp-pill-4 { top: 55%; right: -5%; animation-delay: -3s; } .cyp-pill-5 { bottom: 15%; left: 10%; animation-delay: -4s; } .cyp-pill-6 { bottom: 5%; right: 5%; animation-delay: -5s; } .cyp-perks-text-content { padding-left: 2em; } .cyp-perks-text-content h2 { font-size: 2.2em !important; font-weight: 900; color: #252635; margin-bottom: 0.5em; text-transform: uppercase; } .cyp-perks-blurb { font-size: 1em !important; color: #252635; margin-bottom: 1.5em; } .cyp-perks-button { display: inline-block; background-color: #F9E000; color: #252635; padding: 1em 2em; border-radius: 15px; text-decoration: none; font-weight: bold; } .cyp-perks-button:hover { background-color: #FBBF24; } .cyp-perks-title-mobile { display: none; } } /* --- MOBILE STYLES (767px and below) --- */ @media (max-width: 767px) { .custom-yoga-page .cyp-nav-link { font-size: 0.8em !important; } /* Further reduced font size */ .custom-yoga-page .cyp-header { margin-bottom: 1em; } /* Reduced spacing */ .custom-yoga-page .cyp-title { font-size: 28px !important; } .cyp-pricing-heading h2 { font-size: 1.5em !important; } /* Mobile Perks (Static List) */ .cyp-perks-section-creative { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 600px; margin: 0 auto; } .cyp-perks-animation-container, .cyp-perks-text-content { display: none; } .cyp-perks-mobile-view { display: block; width: 100%; } .cyp-perks-mobile-image { max-width: 200px; margin-bottom: 1.5em; } /* Smaller image */ .cyp-perks-mobile-blurb { margin-bottom: 1.5em; } .cyp-perks-mobile-list { width: 100%; max-width: 400px; text-align: left; margin: 0 auto 1.5em auto; } @media (max-width: 767px) { .cyp-perks-mobile-image { margin-left: auto; margin-right: auto; } } .cyp-perks-mobile-list li { position: relative; padding-left: 1.5em !important; margin-bottom: 0.5em !important; font-size: 1em !important; } .cyp-perks-mobile-list li::before { content: '✓'; color: #252635; font-weight: bold; position: absolute; left: 0; top: 0.1em; } .cyp-perks-title-mobile { display: block; font-size: 1.8em !important; font-weight: 900; margin-bottom: 0.5em; text-transform: uppercase; } .cyp-perks-blurb-mobile { font-size: 1em !important; } .cyp-perks-button-mobile { display: inline-block; background-color: #F9E000; color: #252635; padding: 1em 2em; border-radius: 15px; text-decoration: none; font-weight: bold; } } .custom-centered-row { padding: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* 2. COLUMN STYLES */ /* Targets the columns inside that specific row */ .custom-centered-row > .et_pb_column { margin: 0px ; padding: 0px ; } © /* 3. MODULE STYLES */ /* Targets any module directly inside those columns */ .custom-centered-row > .et_pb_column > .et_pb_module { margin: 0px; padding: 0px ; } /* ======================================== RESPONSIVE ADJUSTMENTS ======================================== */ /* 4. LAPTOP SCREENS (MacBook Pro & smaller) */ @media (max-width: 1440px) { .custom-centered-row { padding-left: 20px !important; padding-right: 20px !important; } } /* 5. TABLET & MOBILE SCREENS */ @media (max-width: 980px) { .custom-centered-row { /* You can adjust this value for smaller screens if needed */ padding-left: 5% !important; padding-right: 5% !important; } } /* STUDIO ELEMENT STYLES - Z-INDEX & FLEXBOX FIX ---------------------- This version solves two key issues: 1. Z-INDEX: A hover effect lifts the active card to prevent its overflowing elements from being hidden by adjacent cards. 2. FLEXBOX: The main card is no longer a flex container. Instead, the inner content div is, providing stable vertical alignment without breaking the layout. */ /* --- MAIN LAYOUT --- */ #new-studios-section .studios-container-showcase { font-family: 'Poppins', sans-serif; max-width: 1200px; margin: 4rem auto; padding: 1rem 2.5rem; position: relative; } /* --- SLIDER STYLES --- */ #new-studios-section .studio-grid-horizontal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 1.5rem; /* Increased top padding to ensure rosettes have space */ padding: 4rem 1.5rem 3rem 1.5rem; margin: -4rem -1.5rem -3rem -1.5rem; -ms-overflow-style: none; scrollbar-width: none; } #new-studios-section .studio-grid-horizontal::-webkit-scrollbar { display: none; } /* --- SLIDER NAVIGATION BUTTONS --- */ .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; /* High z-index to stay above cards */ background-color: white; color: black; border: 1px solid rgba(0,0,0,0.05); border-radius: 50%; width: 3.5rem; height: 3.5rem; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, opacity 0.3s ease; } .slider-nav:hover { transform: translateY(-50%) scale(1.1); } .slider-nav.prev { left: 0; } .slider-nav.next { right: 0; } .slider-nav:disabled { opacity: 0.2; cursor: not-allowed; transform: translateY(-50%) scale(0.95); } @media (hover: none) { .slider-nav { display: none; } } /* --- INDIVIDUAL CARD STYLES --- */ #new-studios-section .studio-card-wide { container-type: inline-size; border-radius: 1.5rem; position: relative; padding: clamp(1rem, 5cqi, 2rem); min-height: 250px; flex-shrink: 0; scroll-snap-align: start; width: 80%; /* MODIFIED: Added for z-index stacking context */ z-index: 1; transition: transform 0.3s ease, z-index 0s 0.15s; } /* MODIFIED: New hover rule to solve overlapping images */ #new-studios-section .studio-card-wide:hover { z-index: 10; transform: scale(1.03); transition: transform 0.3s ease, z-index 0s 0s; } /* --- CARD CONTENT & IMAGE ZONES --- */ #new-studios-section .card-content-wide { width: 55%; padding-right: clamp(0.5rem, 4cqi, 2rem); position: relative; z-index: 2; /* MODIFIED: This is the flexbox fix. The content area is now the flex container. */ display: flex; flex-direction: column; justify-content: center; height: 100%; } #new-studios-section .card-image-wrapper-clipped { width: 45%; position: absolute; right: 0; bottom: 0; height: 100%; } /* --- CLIPPING IMAGE --- */ #new-studios-section .card-illustration-clipped { position: absolute; bottom: -20px; width: clamp(120px, 40cqi, 265px); right: clamp(-50px, -15cqi, -30px); max-width: none; height: auto; transition: transform 0.4s ease-in-out; } /* --- CARD DETAILS (CONTAINER-RELATIVE TYPOGRAPHY) --- */ #new-studios-section .card-title { font-size: clamp(1rem, 9cqi, 2.5rem); line-height: 1.1; margin: 0 0 clamp(0.5rem, 2cqi, 1rem) 0; color: black; white-space: nowrap; } /* --- "NOW SELLING" ROSETTE --- */ #new-studios-section .selling-rosette-clipped { position: absolute; width: clamp(60px, 25cqi, 100px); height: clamp(60px, 25cqi, 100px); top: clamp(-25px, -8cqi, -40px); right: clamp(-25px, -8cqi, -40px); z-index: 3; transform: rotate(15deg); } #new-studios-section .rosette-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(0.5rem, 2.5cqi, 0.9rem); font-weight: 800; color: black; text-align: center; line-height: 1; } /* --- PILLS & BUTTONS (CONTAINER-RELATIVE SIZING) --- */ #new-studios-section .pills-wrapper { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(0.75rem, 3cqi, 1.5rem); } #new-studios-section .pill { background: rgba(0, 0, 0, 0.08); border-radius: 9999px; padding: clamp(0.2rem, 1cqi, 0.5rem) clamp(0.5rem, 2cqi, 1rem); font-size: clamp(0.6rem, 3cqi, 0.9rem); font-weight: 600; white-space: nowrap; } #new-studios-section .cta-button { display: inline-block; border-radius: 15px; color: black; font-family: 'Poppins', sans-serif; font-weight: 900; transition: transform 0.3s; text-decoration: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); background-color: #F9E000; padding: clamp(0.5rem, 2cqi, 1rem) clamp(1rem, 4cqi, 2.5rem); font-size: clamp(0.7rem, 4cqi, 1.1rem); white-space: nowrap; } #new-studios-section .vip-status { font-size: clamp(0.6rem, 2.5cqi, 0.8rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: clamp(0.75rem, 3cqi, 1.5rem); white-space: nowrap; } /* --- BRAND COLORS --- */ #new-studios-section .manor-house-card { background-color: #EDCEC8; } #new-studios-section .fulham-card { background-color: #9BE6FB; } #new-studios-section .kentish-town-card { background-color: #F6D2B4; } #new-studios-section .canning-town-card { background-color: #EDCEC8; } #new-studios-section .walthamstow-card { background-color: #9BE6FB; } #new-studios-section .clerkenwell-card { background-color: #BEDDCD; } /* --- RESPONSIVE CARD WIDTHS --- */ @media (min-width: 768px) { #new-studios-section .studio-card-wide { width: calc(50% - (1.5rem / 2)); } } @media (min-width: 1024px) { #new-studios-section .studio-card-wide { width: calc((100% / 3) - 1rem); } } #studio-locator-container { font-family: 'Poppins', sans-serif; color: #1E1E1E; } #studio-locator-container #searchBanner { background-color: #FFFFFF; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); flex-shrink: 0; flex-wrap: wrap; border-bottom: none; } #studio-locator-container .search-actions-wrapper { display: flex; align-items: center; gap: 10px; flex-grow: 1; } #studio-locator-container .search-container { position: relative; display: flex; align-items: center; flex-grow: 1; max-width: 400px; } #studio-locator-container #postcodeSearchInput { padding: 10px 40px 10px 15px; border: 1px solid #D1D1D1; border-radius: 8px; flex-grow: 1; font-size: 15px; font-family: 'Poppins', sans-serif; width: 100%; height: 44px; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #studio-locator-container #postcodeSearchInput:focus { border-color: #1E1E1E; box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1); outline: none; } #studio-locator-container #searchIcon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; stroke: #5e5e5e; } #studio-locator-container #useLocationBtn { background-color: #1E1E1E; color: white; padding: 10px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; line-height: 0; height: 44px; width: 44px; box-sizing: border-box; } #studio-locator-container #useLocationBtn:hover { background-color: #333; } #studio-locator-container #messageBox { padding: 12px; margin: 10px 20px 0; border-radius: 8px; text-align: center; display: none; flex-shrink: 0; font-weight: 500; } #studio-locator-container #mobile-view-toggle { display: none; } #studio-locator-container #mapAndListContainer { display: flex; flex-grow: 1; width: 100%; min-height: 600px; padding: 20px; gap: 20px; box-sizing: border-box; } #studio-locator-container #map { height: 100%; width: 100%; flex-grow: 1; border-radius: 12px; overflow: hidden; min-height: 500px; } #studio-locator-container #locationListBanner { padding-right: 10px; border: none; flex-shrink: 0; width: 340px; overflow-y: auto; max-height: 75vh; box-sizing: border-box; } .main-signup-btn { display: block; width: 100%; padding: 15px; background-color: #F9E000; color: #1E1E1E; text-align: center; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; border-radius: 8px; margin-bottom: 20px; box-sizing: border-box; transition: background-color 0.3s ease; } .main-signup-btn:hover { background-color: #e9d000; } #studio-locator-container #locationListBanner::-webkit-scrollbar { width: 8px; } #studio-locator-container #locationListBanner::-webkit-scrollbar-track { background: transparent; } #studio-locator-container #locationListBanner::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } #studio-locator-container #locationListBanner::-webkit-scrollbar-thumb:hover { background: #aaa; } #studio-locator-container #locationsContainer { display: flex; flex-direction: column; gap: 10px; } #studio-locator-container .location-item { text-align: left; background-color: white; border-radius: 12px; padding: 16px; transition: box-shadow 0.2s ease; box-shadow: none; border: 1px solid #EAEAEA; } #studio-locator-container .location-item:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.08); } #studio-locator-container .location-item h4 { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; margin: 0 0 4px; color: #1E1E1E; cursor: pointer; } #studio-locator-container .location-item h4.new-studio-title::after { content: ' (Opening Soon)'; font-weight: 500; font-size: 14px; color: #F5A5E8; } #studio-locator-container .location-item h4:hover { text-decoration: underline; } #studio-locator-container .location-item p.address-text { font-size: 14px; margin: 0 0 4px; color: #5e5e5e; line-height: 1.5; } #studio-locator-container .location-item p.distance-display { font-weight: 600; color: #1E1E1E; margin-bottom: 8px; font-size: 14px; } #studio-locator-container .sale-tag { display: inline-block; padding: 4px 10px; background-color: #F5A5E8; color: #1E1E1E; font-weight: 600; font-size: 12px; border-radius: 6px; margin-bottom: 8px; } #studio-locator-container .price-duration { font-size: 13px; font-weight: 500; color: #5e5e5e; margin-top: 8px; margin-bottom: -10px; } #studio-locator-container .price-container { display: flex; align-items: baseline; gap: 0px; margin: 8px 0; } #studio-locator-container .price { font-size: 32px; font-weight: 700; color: #F5A5E8; } #studio-locator-container .original-price { font-size: 22px; font-weight: 600; text-decoration: line-through; color: #999; } #studio-locator-container .opening-soon-notice { text-align: left; font-weight: 700; font-size: 16px; color: #1E1E1E; margin-bottom: 10px; text-transform: uppercase; line-height: 1.4; } #studio-locator-container .vip-description { font-size: 14px; color: #5e5e5e; line-height: 1.6; margin: 8px 0; } .studio-card-buttons { display: flex; gap: 8px; margin-top: 8px; } .card-info-btn, .card-signup-btn { flex: 1; padding: 12px 10px; font-weight: 600; font-size: 14px; text-align: center; cursor: pointer; text-decoration: none; border-radius: 8px; transition: all 0.2s ease; } .card-info-btn { background: #1E1E1E; border: 1px solid #1E1E1E; color: white; } .card-info-btn:hover { background: #333; border-color: #333; } .card-signup-btn { background: #F9E000; border: 1px solid #F9E000; color: #1E1E1E; } .card-signup-btn:hover { background: #e9d000; border-color: #e9d000; } #studio-locator-container .info-button, #studio-locator-container .join-button, #studio-locator-container .sold-out-button { display: block; margin-top: 8px; padding: 12px 18px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; border-radius: 8px; text-align: center; text-decoration: none; transition: background-color 0.2s ease; } #studio-locator-container .info-button { background-color: #F9E000; color: #1E1E1E; border: 1px solid #F9E000; } #studio-locator-container .info-button:hover { background-color: #e9d000; } #studio-locator-container .join-button { background-color: #F9E000; color: #1E1E1E; } #studio-locator-container .join-button:hover { background-color: #e9d000; } #studio-locator-container .sold-out-button { background-color: #f5f5f5; color: #999; cursor: not-allowed; border: 1px solid #D1D1D1; } #map-legend { background: white; padding: 10px 15px; margin: 0 0 10px 10px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-size: 14px; } #map-legend h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; } .legend-item { display: flex; align-items: center; margin-bottom: 5px; } .legend-item:last-child { margin-bottom: 0; } .legend-color-box { width: 15px; height: 15px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(0,0,0,0.1); } .gm-style-iw.gm-style-iw-c { padding: 0 !important; max-width: 280px !important; min-width: 0 !important; background: white !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; border-radius: 12px !important; border: 1px solid #EAEAEA !important; } .gm-style-iw-d { overflow: hidden !important; } .info-window-content { padding: 16px; } .gm-style .gm-style-iw-t::after { background: white; box-shadow: -1px -1px 2px rgba(0,0,0,0.05); border-top: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA; } .gm-style-iw h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 4px; color: #1E1E1E; } .gm-style-iw .distance-display { font-size: 14px; margin-bottom: 10px; color: #5e5e5e; font-weight: 500; } .gm-style-iw .address { font-size: 15px; margin-bottom: 12px; line-height: 1.5; color: #1E1E1E; } .gm-style-iw .offer { font-weight: 600; font-size: 16px; margin-bottom: 16px; color: #1E1E1E; } .gm-style-iw .buttons { display: flex; gap: 8px; margin-top: 10px; } .gm-style-iw .info-btn, .gm-style-iw .signup-btn { flex: 1; padding: 12px 10px; font-weight: 600; font-size: 14px; text-align: center; cursor: pointer; text-decoration: none; border-radius: 8px; transition: all 0.2s ease; min-width: 90px; } .gm-style-iw .info-btn { background: #1E1E1E; border: 1px solid #1E1E1E; color: white; } .gm-style-iw .info-btn:hover { background: #333; border-color: #333; } .gm-style-iw .signup-btn { background: #F9E000; border: 1px solid #F9E000; color: #1E1E1E; } .gm-style-iw .signup-btn:hover { background: #e9d000; border-color: #e9d000; } @media (max-width: 768px) { #studio-locator-container #searchBanner { flex-direction: column; align-items: stretch; border-radius: 0; } #studio-locator-container .search-actions-wrapper, #studio-locator-container .map-controls { justify-content: center; } #studio-locator-container #mapAndListContainer { flex-direction: column; padding: 10px; gap: 10px; flex-grow: 1; height: auto; } #studio-locator-container #locationListBanner { width: 100%; height: 100%; max-height: none; padding-right: 0; } #studio-locator-container #map { width: 100%; height: 100%; min-height: 400px; } .gm-style-iw.gm-style-iw-c { max-width: 85vw !important; } #studio-locator-container #mobile-view-toggle { display: flex; padding: 0 10px 10px; gap: 5px; background-color: transparent; } #studio-locator-container #mobile-view-toggle button { flex: 1; width: 50%; padding: 12px; border: 1px solid #D1D1D1; border-radius: 8px; font-weight: 700; font-size: 16px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; background-color: #FFFFFF; color: #1E1E1E; transition: all 0.2s ease; } #studio-locator-container #mobile-view-toggle button.active { background-color: #F9E000; color: #1E1E1E; border-color: #F9E000; } #studio-locator-container #map { display: none; } #studio-locator-container.map-view-active #map { display: block; } #studio-locator-container.map-view-active #locationListBanner { display: none; } } /* ================================================================= FONT DEFINITION FOR GARET ================================================================= */ @font-face { font-family: 'Garet-Heavy'; src: url('/assets/uploads/et-fonts/Garet-Heavy.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } .cards { display: flex; justify-content: space-between; gap: 25.76px; } .cards-container:after { display: none; } @media (max-width: 1023px) { .cards-container { flex-wrap: wrap; justify-content: center; } } @media (max-width: 767px) { .cards-container { gap: 110px; } } /* Divi Carousel Fade and Scale CSS This CSS will make the non-centered items in the slick carousel smaller and add a static fade overlay to the left and right sides of the carousel. */ /* Style for the slides that are not in the center */ .ba_image_carousel .slick-slide:not(.slick-center) { /* Make the non-centered slides smaller */ transform: scale(0.5); /* Set the position to relative to allow for the overlay */ position: relative; opacity: 0.7; /* Slightly fade out the non-centered items */ /* No transition here, so the change is instant when leaving the center */ } /* Style for the centered slide */ .ba_image_carousel .slick-slide.slick-center { /* Ensure the centered slide is at its original size */ transform: scale(1); opacity: 1; /* Add a transition for a smooth scaling effect */ transition: transform 0.7s ease-in-out, opacity 0.4s ease-in-out; z-index: 1; /* Bring centered slide slightly forward if needed */ } /* Make the carousel container relative to position the fades */ .ba_image_carousel .slick-list { position: relative; } /* Add a pseudo-element for the left fade overlay */ .ba_image_carousel .slick-list::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; /* Adjust the width of the fade as needed */ height: 100%; /* Create a gradient to fade the left side */ background: linear-gradient(to right, rgba(254, 253, 244, 1) 0%, rgba(254, 253, 244, 0) 100%); /* Make sure the overlay is on top of the images */ z-index: 2; /* Prevent the overlay from blocking mouse events */ pointer-events: none; } /* Add a pseudo-element for the right fade overlay */ .ba_image_carousel .slick-list::after { content: ''; position: absolute; top: 0; right: 0; width: 40%; /* Adjust the width of the fade as needed */ height: 100%; /* Create a gradient to fade the right side */ background: linear-gradient(to left, rgba(254, 253, 244, 1) 0%, rgba(254, 253, 244, 0) 100%); /* Make sure the overlay is on top of the images */ z-index: 2; /* Prevent the overlay from blocking mouse events */ pointer-events: none; } /* --- Mobile Styles --- */ /* On screens 767px or smaller, remove the fade effect */ @media screen and (max-width: 767px) { .ba_image_carousel .slick-list::before, .ba_image_carousel .slick-list::after { display: none; } }