/* Theme Name: canalpride Author: iuno.co Version: 24.0 */ /* montserrat-200 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url('webfonts/montserrat-v23-latin-200.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-200.woff') format('woff') /* Modern Browsers */ } /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('webfonts/montserrat-v23-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-regular.woff') format('woff') /* Modern Browsers */ } /* montserrat-700 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('webfonts/montserrat-v23-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-700.woff') format('woff') /* Modern Browsers */ } /* montserrat-200italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; font-display: swap; src: url('webfonts/montserrat-v23-latin-200italic.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-200italic.woff') format('woff') /* Modern Browsers */ } /* montserrat-300italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url('webfonts/montserrat-v23-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-300italic.woff') format('woff') /* Modern Browsers */ } /* montserrat-italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('webfonts/montserrat-v23-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-italic.woff') format('woff') /* Modern Browsers */ } /* montserrat-italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('webfonts/montserrat-v23-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-600italic.woff') format('woff') /* Modern Browsers */ } /* montserrat-700italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('webfonts/montserrat-v23-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-700italic.woff') format('woff') /* Modern Browsers */ } /* montserrat-900italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; font-display: swap; src: url('webfonts/montserrat-v23-latin-900italic.eot'); /* IE9 Compat Modes */ src: local(''), url('webfonts/montserrat-v23-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v23-latin-900italic.woff') format('woff') /* Modern Browsers */ } /* ROOT ==================================================== */ :root { --norm: #004cbb; --high: #ff00a4; --pink: #398aff; --white: #ffffff; --text: #004cbb; /*0068ff*/ --blue: #004cbb; --yellow: #ffd600; --black: #004cbb; --transparent: rgba(0,0,0,0); } * { box-sizing: border-box; outline: none; font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #hg { display: none; } body { min-height: 100vh; transition: padding 0.5s ease-in-out; background: var(--yellow); background-image: url('img/wave-dots-white.png'); background-position: top center; background-size: 150% auto; background-repeat: no-repeat; background-attachment: scroll; } @media all and (max-width: 750px) { body { padding-top: 3rem; } } .has-cp-blue-color { color: var(--blue) !important; } .has-cp-yellow-color { color: var(--yellow) !important; } .has-cp-text-color { color: var(--text) !important; } .has-cp-white-color { color: var(--white) !important; } .has-cp-black-color { color: var(--black) !important; } .has-cp-pink-color { color: var(--pink) !important; } .has-cp-transparent-color { color: var(--transparent) !important; } .is-style-iuno-group-center { max-width: 1000px; margin: 0 auto; } /* HEADER -------------------------------------------------------------------------------- */ header { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 70px; background-color: rgba(255,255,255,0); -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } header.menu, header:hover { background-color: rgba(255,255,255,0); } .top-position header { height: 110px; background-color: rgba(255,255,255,0); } header #cp-menu-switch { position: absolute; top: calc(1rem - 5px); right: 2rem; z-index: 99999; width: 3rem; height: 3rem; border-radius: 3rem; border: 1px var(--high) solid; cursor: pointer; transition: border 1s ease-in-out; -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } .top-position header #cp-menu-switch { top: 2rem; } header #cp-menu-switch span { position: absolute; transform-origin: center center; -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } header #cp-menu-switch .line-top { width: 1.2rem; height: 2px; left: calc(1.5rem - 1px); top: calc(1.2rem - 2px); margin: 0 -0.6rem; background-color: var(--high); z-index: 30; } header.menu #cp-menu-switch .line-top { width: 1.5rem; height: 2px; left: calc(1.5rem - 4px); top: calc(1.5rem - 2px); transform: rotate(135deg); } header #cp-menu-switch .line-mdl { width: calc(1.2rem - 6px); height: 2px; left: calc(1.5rem + 5px); top: calc(1.5rem - 2px); margin: 0 -0.6rem; background-color: var(--high); z-index: 20; } header.menu #cp-menu-switch .line-mdl { width: 3rem; height: 3rem; left: calc(1.5rem - 1px); top: calc(1.5rem - 1px); margin: -1.5rem; border-radius: 3rem; background-color: rgba(255,255,255,0); } header #cp-menu-switch .line-btm { width: 1.2rem; height: 2px; left: calc(1.5rem - 1px); top: calc(1.8rem - 2px); margin: 0 -0.6rem; background-color: var(--high); z-index: 30; } header.menu #cp-menu-switch .line-btm { width: 1.5rem; height: 2px; left: calc(1.5rem - 4px); top: calc(1.5rem - 2px); transform: rotate(-135deg); } header #cp-menu-background { position: fixed; top: 0px; right: 0px; width: 100vw; height: 0; z-index: 99998; background-color: var(--yellow); overflow: hidden; -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /*background-image: url('img/cads-menu.svg'); background-size: 80% auto; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed;*/ } header.menu #cp-menu-background { width: 100vw; height: 100vh; } header #cp-menu { height: 100vh; overflow: auto; opacity: 0; z-index: 200; -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } header.menu #cp-menu { opacity: 1; } header #logo-header { position: absolute; top: calc(1rem - 5px); left: 2rem; z-index: 99999; width: auto; height: auto; text-decoration: none; display: block; -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } .top-position header #logo-header { position: absolute; top: 2rem; } header #logo-header svg { width: auto; height: 3rem; } header #logo-header svg path { -webkit-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 700ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } header #logo-header svg path { fill: var(--high); transition: color 1s ease-in-out; } header.menu #logo-header svg path { } /* MENU -------------------------------------------------------------------------------- */ header #cp-menu ul { text-align: center; list-style: none outside none; } header #cp-menu ul li { display: block; } header #cp-menu ul li:first-of-type { margin-bottom: 2.5rem; } header #cp-menu ul li:last-of-type { margin-bottom: 2.5rem; } header #cp-menu ul li a { font-weight: 900; font-style: italic; display: inline-block; text-transform: uppercase; font-size: 3rem; text-decoration: none; color: #fff; } header #cp-menu ul li a:hover { color: var(--yellow); } /* FOOTER -------------------------------------------------------------------------------- */ footer { position: relative; top: 0; left: 0; width: 100%; height: auto; min-height: 200px; margin: 0 0 0 0; padding: 2rem 0 3rem 0; background-color: var(--high); color: var(--norm); z-index: 5000; } footer #logo-footer svg { max-width: 100%; height: auto; } footer #logo-footer svg path { fill: #fff; } footer a { color: #fff; text-decoration: none; } footer a:hover, footer a:focus, footer a:active { color: var(--yellow); text-decoration: none; } footer .menu-footer-container ul { list-style: none outside none; margin: 0; padding: 0; } footer .menu-footer-container ul li { display: block; } footer .menu-footer-container ul li a { display: inline-block; line-height: 1.5; font-size: 1.3rem; } footer .menu-imprint-container { border-top: 1px #fff solid; margin: 2rem 0 0 0; padding: 1rem 0 0 0; } footer .menu-imprint-container ul { list-style: none outside none; width: 100%; margin: 0; padding: 0; } footer .menu-imprint-container ul li { display: inline-block; padding: 0 2rem 0 0; } footer .menu-imprint-container ul li a { display: block; line-height: 1.4; font-size: 1rem; } footer .copyright { margin: 2rem 0 0 0; padding: 1rem 0 0 0; } @media all and (max-width: 768px) { footer .menu-imprint-container ul li { padding: 0 1rem 0 1rem; } } /* CONTENT -------------------------------------------------------------------------------- */ .puschel-content { min-height: 50vh; padding: 3rem 3rem 5rem 3rem; background-color: rgba(255,255,255,0.8); width: 100%; max-width: 1200px; margin: 0 auto 3rem auto; } .puschel-content.single { padding: 3rem 3rem 5rem 3rem; max-width: 1000px; margin: 0 auto; } .puschel-content.single::after { content: ""; clear: both; display: block; } .puschel-content.home { min-height: 50vh; padding: 3rem 0 0 0; background-color: var(--transparent); max-width: 100vw; margin: 0; } @media all and (max-width: 768px) { .puschel-content.single { padding: 3rem 2rem 5rem 2rem; } } .container { max-width: 80% !important; } .puschel-content h1 { color: var(--text); font-size: 2.4rem; line-height: 1.4; font-weight: 500; font-style: italic; margin: 0; padding: 0 0 1rem 0; } .puschel-content h2 { color: var(--text); font-size: 1.8rem; line-height: 1.4; font-weight: 600; font-style: italic; margin: 0; padding: 0 0 1rem 0; } .puschel-content h3 { color: var(--text); font-size: 1.8rem; line-height: 1.4; font-weight: 600; font-style: italic; margin: 0; padding: 0 0 1rem 0; } .puschel-content h4 { color: var(--text); font-size: 1.3rem; line-height: 1.4; font-weight: 600; font-style: italic; margin: 0; padding: 0; } .puschel-content h5 { color: var(--text); font-size: 1.3rem; line-height: 1.4; font-weight: 600; font-style: italic; margin: 0; padding: 0; } .puschel-content h6 { color: var(--text); font-size: 1.3rem; line-height: 1.4; font-weight: 600; font-style: italic; margin: 0; padding: 0; } .puschel-content p { color: var(--text); font-size: 1.3rem; line-height: 1.4; font-weight: 500; padding: 0 0 1rem 0; } .puschel-content ul { color: var(--text); padding: 0 0 2rem 1rem; } .puschel-content ol { color: var(--text); padding: 0 0 2rem 1rem; } .puschel-content li { color: var(--text); font-size: 1.3rem; line-height: 1.4; font-weight: 500; } .puschel-content a, .puschel-content a:visited, .puschel-content a:active { color: var(--high); } .puschel-content a:hover { color: var(--high); } .puschel-content.single h1 { border-bottom: 2px var(--high) solid; margin-bottom: 1rem; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } .container .alignwide { margin-left: -80px; margin-right: -80px; } .container .alignfull { margin-left: calc( -100vw / 2 + 100% / 2 ); margin-right: calc( -100vw / 2 + 100% / 2 ); max-width: 100vw; width: 100vw; } .alignfull img { width: 100vw; height: auto; } /* Partner Banner -------------------------------------------------------- */ .iuno-responsive-banner { clear: both; z-index: 500; width: 100vw; } .iuno-responsive-banner a { display: block; font-size: 0; line-height: 0; } .iuno-responsive-banner a img { width: 100%; height: auto; display: block; } @media all and (min-width: 1000px) { .iuno-responsive-banner .banner-1200 { display: block; } .iuno-responsive-banner .banner-800 { display: none; } .iuno-responsive-banner .banner-400 { display: none; } } @media all and (max-width: 1000px) { .iuno-responsive-banner .banner-1200 { display: none; } .iuno-responsive-banner .banner-800 { display: block; } .iuno-responsive-banner .banner-400 { display: none; } } @media all and (max-width: 600px) { .iuno-responsive-banner .banner-1200 { display: none; } .iuno-responsive-banner .banner-800 { display: none; } .iuno-responsive-banner .banner-400 { display: block; } } ::placeholder { color: var(--text); font-weight: 600; font-style: italic; font-size: 0.8rem; } :-ms-input-placeholder { color: var(--text); font-weight: 600; font-style: italic; font-size: 0.8rem; } ::-ms-input-placeholder { color: var(--text); font-weight: 600; font-style: italic; font-size: 0.8rem; } abbr[title] { -webkit-text-decoration: none; } .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { display: none !important; } .woocommerce-error, .woocommerce-message, .woocommerce-info { background-color: rgba(0,0,0,0) !important; padding: 1rem !important; color: var(--text); } .woocommerce-remove-coupon { text-decoration: none; font-size: 1rem !important; font-weight: 400; } .iuno-woo { } .iuno-woo .woocommerce-product-gallery__trigger { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; z-index: -5000 !important; } .iuno-woo h2, .iuno-woo h3 { text-align: center; } .iuno-woo p { padding: 0; } .iuno-woo .shop_table { width: 100%; background-color: rgba(0,0,0,0); } .iuno-woo .shop_table img, .iuno-woo .product-remove, .iuno-woo .product-thumbnail { /* display: none; */ } .woocommerce a.remove { background: var(--white); } .woocommerce #content table.cart img, .woocommerce table.cart img, .woocommerce-page #content table.cart img, .woocommerce-page table.cart img { height: auto; width: 100px; } .iuno-woo .product-price, .iuno-woo .product-quantity, .iuno-woo .product-subtotal { text-align: right; } .iuno-woo td, .iuno-woo th { padding: 0.5rem; } .iuno-woo td *, .iuno-woo td, .iuno-woo th *, .iuno-woo th { font-size: 1.3rem; line-height: 1.4; } .iuno-woo .product-name a { text-decoration: none; font-style: italic; } .iuno-woo .actions { background-color: rgba(0,0,0,0); text-align: center; } .iuno-woo .coupon { font-size: 0; line-height: 0; padding: 0 0 1rem 0; } .iuno-woo .coupon #coupon_code { margin-right: 1rem !important; } .iuno-woo .cart-collaterals { padding: 4rem 0 0 0; } .iuno-woo .wc-proceed-to-checkout, .iuno-woo .place-order { font-size: 0; line-height: 0; padding: 2rem 0 0 0; text-align: center; } .iuno-woo #customer_details { margin-bottom: 4rem; } .iuno-woo .woocommerce-billing-fields label { width: 200px; float: left; padding: 0 1rem; font-size: 0.8rem; line-height: 2.5rem; font-weight: 700; font-style: italic; text-transform: uppercase; text-align: left; background-color: var(--high); color: var(--white); } .iuno-woo .woocommerce-billing-fields input[type=text], .iuno-woo .woocommerce-billing-fields select, .iuno-woo .woocommerce-billing-fields input[type=email] { width: calc(100% - 200px); } @media all and (max-width: 600px) { .iuno-woo .woocommerce-billing-fields label { float: none; text-align: left; padding: 0 1.5rem; line-height: 2; } .iuno-woo .woocommerce-billing-fields input[type=text], .iuno-woo .woocommerce-billing-fields select, .iuno-woo .woocommerce-billing-fields input[type=email] { width: 100%; } } .iuno-woo .woocommerce-tabs h2:first-of-type { display: none; } .iuno-woo .woocommerce-checkout-payment { background: rgba(255,255,255,0) !important; color: var(--norm); border-radius: 5px !important; border: 1px var(--norm) solid !important; } .iuno-woo .woocommerce-checkout-payment ul.payment_methods { border: 0 !important; } .iuno-woo .woocommerce-checkout-payment ul.payment_methods .payment_box { background-color: rgba(255,255,255,0) !important; border: 1px var(--norm) solid !important; margin-bottom: 0 !important; } .iuno-woo .woocommerce-checkout-payment ul.payment_methods .payment_box::before { border: 1em solid rgba(255,255,255,0) !important; border: 1px var(--norm) solid !important; top: -1.2rem !important; border-right-color: transparent !important; border-left-color: transparent !important; border-top-color: transparent !important; } .iuno-woo .woocommerce-checkout-payment ul.payment_methods .payment_box p { font-size: 0.8rem !important; color: var(--norm); } .iuno-woo .wc-gzd-checkbox-placeholder-legal { margin: 2rem 0 2rem 0; padding: 0 !important; background-color: rgba(255,255,255,0); border: 1px var(--norm) solid !important; color: var(--norm); font-size: 0.8rem; } .iuno-woo .wc-gzd-checkbox-placeholder-legal * { font-size: 0.8rem; margin: 0; } .iuno-woo .woocommerce-gzd-legal-checkbox-text { padding-top: 0.25rem; display: inline-block; width: calc(100% - 3.5rem); float: left; } .iuno-woo .wc-gzd-checkbox-placeholder-legal::after { content: ""; clear: both; display: block; } .iuno-woo .wc-gzd-checkbox-placeholder-legal .checkbox-legal { padding: 1rem !important; margin: 0; } .iuno-woo .wc-gzd-checkbox-placeholder-legal .checkbox-legal.woocommerce-invalid { border: 2px red solid; } .iuno-woo .checkout_coupon.woocommerce-form-coupon { background-color: rgba(255,255,255,0); border: 1px var(--norm) solid !important; border-radius: 5px; border-width: 0; display: block !important; } .iuno-woo .woocommerce-thankyou-order-received { color: var(--norm); font-size: 2rem; line-height: 1.4; font-weight: 300; font-style: italic; margin: 0; padding: 0 0 1rem 0; text-align: center; } .iuno-woo .woocommerce-order .woocommerce-order-overview { list-style: none outside none; padding: 0 0 2rem 0; text-align: center; } .iuno-woo .woocommerce-order p { text-align: center; padding-bottom: 3rem; } .iuno-woo .woocommerce-order .shop_table p { text-align: left; margin: 0; padding: 0; } .iuno-woo .single-product .price { font-size: 2rem !important; line-height: 1; padding: 0.75rem 1rem; margin: 0 0 0.25rem 0 !important; color: var(--norm) !important; font-style: italic; font-weight: 400; width: auto; display: inline-block; border: 2px var(--norm) solid; border-radius: 1rem; } .iuno-woo .single-product .legal-price-info { padding: 0 0 2rem 1rem; } .iuno-woo ul.woocommerce-order-overview.woocommerce-thankyou-order-details { border: 1px solid rgba(0,0,0,.1); margin: 0 -1px 24px 0; text-align: left; width: 100%; border-collapse: separate; border-radius: 5px; padding: 1rem 1rem 0 0; background-color: rgba(0,0,0,0); } .iuno-woo ul.woocommerce-order-overview.woocommerce-thankyou-order-details li { padding: 0 0 0 0; margin: 0 0 1rem 1rem; text-overflow: ellipsis; overflow: hidden; display: inline-block; white-space: nowrap; border-right: 0; } .iuno-woo .zahlung { display: block; border: 1px solid rgba(0,0,0,.1); margin: 0 -1px 24px 0; width: 100%; border-collapse: separate; border-radius: 5px; padding: 1rem; background-color: rgba(0,0,0,0); } .iuno-woo .woocommerce-bacs-bank-details { display: none; } .iuno-woo .order-again { display: none; } .iuno-woo .woocommerce-notices-wrapper .button.wc-forward { display: none; } .iuno-woo .woocommerce-customer-details { padding: 4rem 0 0 0; } .iuno-woo .woocommerce-customer-details address { background-color: rgba(255,255,255,0.2) !important; padding: 1rem; font-size: 1.3rem; line-height: 1.4; } .iuno-woo .woocommerce-customer-details p { margin: 0; padding: 0; text-align: left; } .iuno-woo .wc-block-components-notice-banner { background-color: rgba(255,255,255,0) !important; border: 1px var(--norm) solid !important; color: #ffffff; } .iuno-woo .wc-block-components-notice-banner.is-success { background-color: rgba(255,255,255,0) !important; border: 1px var(--norm) solid !important; border-color: #4ab866; color: #ffffff; } .iuno-woo .wc-block-components-notice-banner.is-error { background-color: rgba(255,255,255,0) !important; border: 1px var(--norm) solid !important; border-color: #cc1818; color: #ffffff; } .iuno-woo .woocommerce form .form-row.woocommerce-invalid label { color: var(--text); } .iuno-woo .payment_box.payment_method_stripe { } .iuno-woo .stripe-card-element { background-color: transparent; height: 2.5rem; width: auto; padding: 0 1.5rem; border-radius: 0; border: 3px var(--norm) solid); color: var(--black) !important; font-size: 1rem !important; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; } .iuno-woo select { background-color: transparent; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .iuno-woo input[type=email] { background-color: transparent; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .iuno-woo input[type=text] { background-color: transparent; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .iuno-woo input[type=number] { background-color: transparent; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto !important; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 0.5rem 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .iuno-woo input[type=checkbox] { background-color: transparent; color: var(--black) !important; font-size: 0 !important; line-height: 0 !important; transition: all 0.25s ease-in-out; width: 1.5rem; height: 1.5rem; margin: 0 1rem 0 0; float: left; padding: 0; border-radius: 0; border: 1px var(--norm) solid; background-image: url('img/check-pink.svg'); background-size: 0 0; background-repeat: no-repeat; background-position: center center; } .iuno-woo input[type=radio] { background-color: transparent; color: var(--black) !important; font-size: 0 !important; line-height: 0 !important; transition: all 0.25s ease-in-out; width: 1.5rem; height: 1.5rem; margin: 0.5rem 1rem 0 0 !important; float: left; padding: 0; border-radius: 100%; border: 1px var(--norm) solid; background-image: url('img/check-pink.svg'); background-size: 0 0; background-repeat: no-repeat; background-position: center center; } .iuno-woo input[type=checkbox]:checked, .iuno-woo input[type=radio]:checked { background-size: 1rem auto; } .iuno-woo .button { background-color: var(--high) !important; color: var(--white) !important; font-size: 1rem !important; height: 2.5rem !important; width: auto !important; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: uppercase; padding: 0 1.5rem !important; border-radius: 0; border: 0; display: inline-block; box-shadow: 0 0 0 0 var(--yellow); transition: all 0.25s ease-in-out; } .iuno-woo .button:hover, .iuno-woo .button:active { box-shadow: 0 0 2rem 0 var(--yellow); } .iuno-woo #place_order.button { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; padding: 0 2.5rem !important; } .iuno-woo #wc-stripe-cc-form label { color: var(--text); } .iuno-woo .p-Tabs-group .Label { color: var(--text); } #wc-stripe-express-checkout-element { justify-content: left; } .mailster-block-form-type-content { width: 100%; max-width: 1000px; padding: 3rem 1rem 5rem 1rem; margin: 0 auto; } .mailster-block-form-type-content input[type=email] { background-color: transparent; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .mailster-block-form-type-content input[type=text] { background-color: transparent; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .mailster-block-form-type-content input[type=checkbox] { background-color: transparent; color: var(--black) !important; font-size: 0 !important; line-height: 0 !important; transition: all 0.25s ease-in-out; width: 1.5rem; height: 1.5rem; margin: 0 1rem 0 0; float: left; padding: 0; border-radius: 0; border: 1px var(--norm) solid; background-image: url('img/check-pink.svg'); background-size: 0 0; background-repeat: no-repeat; background-position: center center; } .mailster-block-form-type-content input[type=checkbox]:checked { background-size: 1rem auto; } .mailster-block-form-type-content input[type=submit] { background-color: var(--norm); color: var(--high) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: uppercase; padding: 0 1.5rem; border-radius: 0; border: 0; display: inline-block; box-shadow: 0 0 0 0 var(--yellow); transition: all 0.25s ease-in-out; } .mailster-block-form-type-content input[type=submit]:hover, .mailster-block-form-type-content input[type=submit]:active { box-shadow: 0 0 2rem 0 var(--yellow); } @media all and (max-width: 750px) { .iuno-woo select { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo input[type=email] { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo input[type=text] { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo input[type=number] { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo .button { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .mailster-block-form-type-content input[type=email] { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .mailster-block-form-type-content input[type=text] { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } .mailster-block-form-type-content input[type=submit] { font-size: 1.5rem !important; height: 4rem !important; line-height: 4rem !important; } } .mailster-form-fields { color: var(--text); } .mailster-form { width: 100%; max-width: 1000px; padding: 0 0 5rem 0; margin: 0 auto; } .mailster-form input[type=email] { background-color: transparent; color: var(--black) !important; margin: 0 0 1rem 0; font-size: 1rem !important; height: 2.5rem; width: 100%; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .mailster-form input[type=text] { background-color: transparent; color: var(--black) !important; margin: 0 0 1rem 0; font-size: 1rem !important; height: 2.5rem; width: 100%; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 1.5rem; border-radius: 0; border: 3px var(--high) solid; } .mailster-form input[type=checkbox] { background-color: transparent; color: var(--black) !important; font-size: 0 !important; line-height: 0 !important; transition: all 0.25s ease-in-out; width: 1.5rem; height: 1.5rem; margin: 0 1rem 0 0; float: left; padding: 0; border-radius: 0; border: 1px var(--norm) solid; background-image: url('img/check-pink.svg'); background-size: 0 0; background-repeat: no-repeat; background-position: center center; } .mailster-form input[type=checkbox]:checked { background-size: 1rem auto; } .mailster-form input[type=submit] { background-color: var(--high); color: var(--white) !important; margin: 1rem 0 0 0; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: uppercase; padding: 0 1.5rem; border-radius: 0; border: 0; display: inline-block; box-shadow: 0 0 0 0 var(--yellow); transition: all 0.25s ease-in-out; } .mailster-form input[type=submit]:hover, .mailster-form input[type=submit]:active { box-shadow: 0 0 2rem 0 var(--yellow); } @media all and (max-width: 750px) { .iuno-woo select { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo input[type=email] { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo input[type=text] { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo input[type=number] { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .iuno-woo .button { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .mailster-form input[type=email] { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .mailster-form input[type=text] { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } .mailster-form input[type=submit] { font-size: 1.25rem !important; height: 4rem !important; line-height: 4rem !important; } } @keyframes shake { 0% { transform: rotate(-3deg); } 65% { transform: rotate(4deg); } 100% { transform: rotate(-3deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .rainbow { position: relative; display: block; z-index: 0; width: 100%; height: 300px; padding: 0; margin: 2rem 0 4rem 0; border: 0; border-radius: 30px; cursor: pointer; transition: all 1s ease-in-out; background-color: var(--pink); border: 3px dashed var(--high); } .rainbow::before { /*content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(110deg, #fcffa9, #ffffff, #a9eaff); border-radius: 300px; transition: all 0.5s ease-in-out; filter: blur(3.5rem); opacity: 1; */ } .rainbow:hover::before { /* filter: blur(5rem); opacity: 0; */ } .rainbow .ship { position: absolute; z-index: -1; left: 5px; top: 5px; width: 390px; height: calc(100% - 10px); border-radius: 28px; opacity: 1; overflow: hidden; } .rainbow .ship-ani { position: absolute; z-index: 1; left: 20px; bottom: -70px; width: 280px; height: 280px; background: transparent; opacity: 1; -webkit-animation: shake 4s ease-in-out infinite; animation: shake 4s ease-in-out infinite; } .rainbow .ship-ani path { fill: var(--white); transition: all 0.5s ease-in-out; } .rainbow:hover .ship-ani path { } .rainbow .star { position: absolute; z-index: -1; left: 5px; top: 5px; width: 390px; height: calc(100% - 10px); border-radius: 298px; opacity: 1; overflow: hidden; } .rainbow .star-ani { position: absolute; z-index: 1; left: 20px; bottom: 0; width: 280px; height: 280px; background: transparent; opacity: 1; -webkit-animation: rotate 20s linear infinite; animation: rotate 20s linear infinite; } .rainbow .star-ani path { fill: var(--pink); transition: all 0.5s ease-in-out; } .rainbow:hover .star-ani path { } .rainbow .number { position: absolute; left: 260px; top: 110px; color: var(--yellow); width: 200px; opacity: 1; display: block; height: 100%; text-align: center; line-height: 0; font-size: 10rem; font-weight: 900; font-style: italic; letter-spacing: -1rem; transition: all 0.5s ease-in-out; } .rainbow:hover .number { } .rainbow .title { position: absolute; left: 430px; bottom: 130px; width: calc(100% - 730px); display: block; height: auto; z-index: +2; transform: skewX(-5deg); text-align: left; font-size: 2rem; line-height: 2rem; font-weight: 600; color: var(--white); text-transform: uppercase; text-shadow: var(--high) 4px 4px 0px; } .rainbow .logo { position: absolute !important; right: 1rem; top: 1rem; width: calc(300px - 2rem - 6px); height: calc(300px - 2rem - 6px); display: block; background-color: var(--norm); z-index: +2; border-radius: 17px; overflow: hidden; } .logo img { width: 100%; height: 100%; } .typewriter { width: calc(100% - 620px); top: 185px; left: 320px; padding: 1rem 0 0 0; text-decoration: none; font-style: italic; color: var(--white); text-transform: uppercase; height: auto; text-align: center; font-weight: 700; font-size: 1.5rem; line-height: 1.5rem; position: absolute; border-top: 2px var(--high) solid; transition: color 0.5s ease-in-out; } .rainbow:hover .typewriter { } .rainbow .book { position: absolute; left: 50%; bottom: -20px; margin: 0 -25%; z-index: 10; font-size: 1rem; transition: all 0.5s ease-in-out; padding: 0 2rem; height: 40px; width: 50%; display: block; border-radius: 0; font-weight: 900; line-height: 40px; text-transform: uppercase; font-style: italic; background-color: var(--high); color: var(--white); font-family: Montserrat, sans-serif; } .rainbow:hover .book { box-shadow: 0 0 2rem 0 var(--yellow); } .rainbow .book::after { content: ''; position: absolute; right: 0; top: 0; border-radius: 40px; height: 40px; } .rainbow .book.soldout::after { width: 40px; background-color: red; } .rainbow .book.available::after { width: 80px; background-color: green; } .rainbow .book.limited::after { width: 60px; background-color: yellow; } .rainbow .book.upcoming::after { width: 40px; background-color: grey; } @media all and (min-width: 750px) and (max-width: 1000px) { .rainbow { } .rainbow .ship { opacity: 0; } .typewriter { width: calc(100% - 320px); top: 185px; left: 20px; } .rainbow .number { left: 0px; } .rainbow .title { left: 150px; width: calc(100% - 450px); font-size: 2.5rem; line-height: 2.5rem; } } @media all and (max-width: 750px) { .rainbow { width: 500px; height: 550px; margin: 2rem auto 4rem auto; } .rainbow .ship { z-index: 10; top: auto; bottom: 5px; width: 290px; height: 190px; border-radius: 0 0 0 98px; opacity: 1; } .rainbow .ship-ani { left: 30px; bottom: -30px; width: 190px; height: 190px; } .rainbow .logo { right: 30px; top: 300px; border-radius: 100%; } .rainbow .book { left: 3rem; margin: 0; width: calc(100% - 6rem); } .rainbow::before { border-radius: 100px; filter: blur(2.5rem); } .typewriter { width: calc(100% - 180px); top: 200px; left: 90px; } .rainbow .number { left: 50px; text-align: left; } .rainbow .title { left: 150px; width: calc(100% - 200px); bottom: 380px; font-size: 2rem; line-height: 2rem; } } .single .logo-frame { position: relative ; left: 0; top: 0; width: calc(50% - 2rem); height: auto; aspect-ratio: 1 / 1; display: block; background-color: white; z-index: +2; border-radius: 100%; float: left; } .single .logo-frame::before { content: ''; position: absolute; top: -1rem; left: -1rem; width: calc(100% + 2rem); height: calc(100% + 2rem); z-index: -1; border-radius: 300px; opacity: 1; border: 3px var(--high) dashed; } .single .logo { position: relative ; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; border-radius: 100%; overflow: hidden; } @media all and (max-width: 750px) { .single .logo-frame { width: 80%; float: none; margin: 0 auto 2rem auto; } } .select2-container--default .select2-selection--single { background-color: transparent; border: 1px var(--black) solid; border-radius: 4px; color: var(--black) !important; font-size: 1rem !important; height: 2.5rem; width: auto; line-height: 2.5rem !important; font-weight: 700; font-style: italic; text-decoration: none; text-transform: none; padding: 0 0.5rem; } .select2-container .select2-selection--single { height: 2.5rem; line-height: 2.5rem !important; color: var(--black) !important; margin: 0; } .select2-dropdown { background-color: rgba(0,0,0,0.8); border: 0; border-radius: 0; color: var(--black); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--black); line-height: 1.5rem ; } .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; padding-right: 2rem; } .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] { background-color: rgba(255,255,255,0.25); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--pink); color: var(--white); } .select2-container--default .select2-search--dropdown { display: none; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 0; } .select2-results__option { padding: 0.3rem 0.5rem; font-weight: 400; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 1.5rem; top: 0; right: 0; width: 2rem; } .select2-container--default .select2-selection--single .select2-selection__arrow b {border-color: var(--black) transparent transparent transparent; border-width: 8px 5px 0 5px; left: 50%; margin-left: -4px; margin-top: 0; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--black) transparent; border-width: 0 5px 8px 5px; } #billing_country_field .woocommerce-input-wrapper { width: calc(100% - 200px) !important; display: block; float: left; background-color: white; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select { padding: 0 0.5rem; } /* HOME */ .is-style-iuno-grid { display: flex !important; justify-content: center; align-items: flex-start; flex-wrap: wrap !important; max-width: 1800px; margin: 0 auto; } .is-style-iuno-grid .wp-block-group { position: relative; width: 45vw; } @media (min-width: 1000px) { .is-style-iuno-grid .wp-block-group { width: 30vw; } } @media (min-width: 1300px) { .is-style-iuno-grid .wp-block-group { width: 22vw; } } @media (min-width: 1600px) { .is-style-iuno-grid .wp-block-group { width: 18vw; } } @media (min-width: 1900px) { .is-style-iuno-grid .wp-block-group { width: 15vw; } } @media (min-width: 2200px) { .is-style-iuno-grid .wp-block-group { width: 12vw; } } /* .is-style-iuno-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 1rem; grid-row-gap: 1rem; padding: 1rem; } @media (min-width: 700px) { .is-style-iuno-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1000px) { .is-style-iuno-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 1300px) { .is-style-iuno-grid { grid-template-columns: repeat(4, 1fr) !important; } } @media (min-width: 1600px) { .is-style-iuno-grid { grid-template-columns: repeat(5, 1fr) !important; } } @media (min-width: 1900px) { .is-style-iuno-grid { grid-template-columns: repeat(6, 1fr) !important; } } @media (min-width: 2200px) { .is-style-iuno-grid { grid-template-columns: repeat(7, 1fr) !important; } } .is-style-iuno-grid .wp-block-group { position: relative; } */ .home25-slider { position: absolute !important; top: 0; left: -0.5rem; width: 40%; height: auto; aspect-ratio: 1 / 1; border-radius: 100%; overflow: hidden; border: 0.25rem white solid; background-color: white; } .home25-slider img { width: 100%; }