diff --git a/admin/countries.php b/admin/countries.php index 30d4a09..0f88601 100644 --- a/admin/countries.php +++ b/admin/countries.php @@ -9,7 +9,6 @@ $countries = ioAPIv2($api_url,'',$clientsecret); //Decode Payload if (!empty($countries)){$countries = json_decode($countries,true);}else{$countries = null;} -var_dump($countries); //CountryID mapping $countryMap = array_column($countries, 'country', 'id'); diff --git a/cart.php b/cart.php index bc18d14..158e5d2 100644 --- a/cart.php +++ b/cart.php @@ -181,6 +181,10 @@ $view .= ' '; } $view .= ' '.currency_code.''.number_format($product['options_price'] * $product['quantity'],2).' +<<<<<<< HEAD +======= + 🗑️ +>>>>>>> development '; } } diff --git a/checkout.php b/checkout.php index 460e8a4..7047ea8 100644 --- a/checkout.php +++ b/checkout.php @@ -29,7 +29,7 @@ $weighttotal = 0; $shipping_methods = []; $checkout_input = [ - "selected_country" => isset($_POST['address_country']) ? $_POST['address_country'] : $account['address_country'], + "selected_country" => isset($_POST['address_country']) ? $_POST['address_country'] : (isset($account['address_country']) ? $account['address_country'] : 21) , "selected_shipment_method" => isset($_POST['shipping_method']) ? $_POST['shipping_method'] : '', "business_type" => 'b2c', "discount_code" => isset($_SESSION['discount']) ? $_SESSION['discount'] : '' @@ -64,16 +64,30 @@ if (isset($_POST['discount_code']) && !empty($_POST['discount_code'])) { } else if (isset($_POST['discount_code']) && empty($_POST['discount_code']) && isset($_SESSION['discount'])) { unset($_SESSION['discount']); } -if (isset($_POST['address_country'])){ - // Retrieve shipping methods - $shipping_methods = ioAPIv2('/v2/shipping/list=methods&country='.$checkout_input['selected_country'].'&price_total='.$subtotal.'&weight_total='.$weighttotal,'',$clientsecret); - $shipping_methods = json_decode($shipping_methods,true); -} //------------------------------- // If there are products in cart handle the checkout //------------------------------- if ($products_in_cart) { - //Calculate shopping_cart + + // First, calculate cart to get initial totals (without shipping) + $initial_payload = json_encode(array("cart" => $products_in_cart, "checkout_input" => $checkout_input), JSON_UNESCAPED_UNICODE); + $initial_cart = ioAPIv2('/v2/checkout/',$initial_payload,$clientsecret); + $initial_cart = json_decode($initial_cart,true); + + // Get initial totals for shipping method calculation + $initial_subtotal = $initial_cart['totals']['subtotal'] ?? 0; + $initial_weighttotal = $initial_cart['totals']['weighttotal'] ?? 0; + + // Now retrieve shipping methods with correct totals + $shipping_methods = ioAPIv2('/v2/shipping/list=methods&country='.$checkout_input['selected_country'].'&price_total='.$initial_subtotal.'&weight_total='.$initial_weighttotal,'',$clientsecret); + $shipping_methods = json_decode($shipping_methods,true); + + // If no shipping method is selected and shipping methods are available, select the first one as default + if (empty($checkout_input['selected_shipment_method']) && !empty($shipping_methods) && count($shipping_methods) > 0) { + $checkout_input['selected_shipment_method'] = $shipping_methods[0]['id']; + } + + // Recalculate shopping_cart with selected shipping method $payload = json_encode(array("cart" => $products_in_cart, "checkout_input" => $checkout_input), JSON_UNESCAPED_UNICODE); $products_in_cart = ioAPIv2('/v2/checkout/',$payload,$clientsecret); $products_in_cart = json_decode($products_in_cart,true); @@ -86,10 +100,6 @@ if ($products_in_cart) { $tax_rate = $products_in_cart['totals']['tax_rate']; $weighttotal = $products_in_cart['totals']['weighttotal']; $total = $products_in_cart['totals']['total']; - - // Retrieve shipping methods - $shipping_methods = ioAPIv2('/v2/shipping/list=methods&country='.$checkout_input['selected_country'].'&price_total='.$subtotal.'&weight_total='.$weighttotal,'',$clientsecret); - $shipping_methods = json_decode($shipping_methods,true); // Redirect the user if the shopping cart is empty if (empty($products_in_cart)) { diff --git a/custom/assets/comp2 kopie.png b/custom/assets/comp2 kopie.png new file mode 100644 index 0000000..0bbde26 Binary files /dev/null and b/custom/assets/comp2 kopie.png differ diff --git a/custom/assets/comp2-1.jpg b/custom/assets/comp2-1.jpg new file mode 100644 index 0000000..a02c077 Binary files /dev/null and b/custom/assets/comp2-1.jpg differ diff --git a/custom/assets/comp2.png b/custom/assets/comp2.png new file mode 100644 index 0000000..c244ac0 Binary files /dev/null and b/custom/assets/comp2.png differ diff --git a/custom/assets/comp2_2.png b/custom/assets/comp2_2.png new file mode 100644 index 0000000..0bbde26 Binary files /dev/null and b/custom/assets/comp2_2.png differ diff --git a/custom/css/custom.css b/custom/css/custom.css deleted file mode 100644 index 23d89e2..0000000 --- a/custom/css/custom.css +++ /dev/null @@ -1,2091 +0,0 @@ -.picture_select_label > input[type="checkbox"] { - display: none; -} - -.picture_select_label > input[type="radio"] { - display: none; -} - -.picture_select { - display: block; - position: relative; - margin: 10px; - cursor: pointer; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.picture_select::before { - - color: white; - content: " "; - display: block; - border-radius: 50%; - border: 1px solid #03337a; - position: absolute; - top: -5px; - left: -5px; - width: 25px; - height: 25px; - text-align: center; - line-height: 28px; - transition-duration: 0.4s; - transform: scale(0); - z-index:1 -} - -.picture_select img { - height: 50px; - width: 50px; - transition-duration: 0.2s; - transform-origin: 50% 50%; -} - -:checked+.picture_select { - border-color: #ddd; -} - -.product_category_nav { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: center; - align-items: center; -} - -.product_category_nav a { - white-space: nowrap; - text-decoration: none; - color: #555555; - padding: 10px 10px; - margin: 0 10px; - border: 1px solid #555555; - border-radius: 5px; -} - -:checked+.picture_select::before { - content: "✓"; - background-color: #03337a; - transform: scale(1); -} - -:checked+.picture_select img { - transform: scale(0.9); - box-shadow: 0 0 5px #333; -} - -.container.highlight-section { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - -ms-flex-align: center; - padding: 48px 24px; - min-height: 40vh; - background-color: #ececec; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - align-items: center; -} - -h2.title-message { - margin-top: 0; - margin-bottom: 0; - max-width: 800px; - text-align: center; - font-size: 36px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - - -h2.neutral-cover-heading { - margin-top: 0; - margin-bottom: 0; - letter-spacing: -1px; - font-weight: 500; - font-size: 36px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 1.4; -} - -h4.neutral-headline-footer { - margin-top: 0; - margin-bottom: 0; - text-align: left; - font-weight: 500; - font-size: 20px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 1.4; -} - -h4.neutral-feature-title-1 { - margin-top: 16px; - margin-bottom: 16px; - text-align: left; - font-weight: 500; - font-size: 20px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 1.4; -} - -p.paragraph.neutral-paragraph-text { - margin-top: 16px; - color: #666; - text-align: left; - font-weight: 300; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 25px; -} - -p.paragraph.direction-footer { - margin-top: 0; - margin-bottom: 16px; - color: #666; - text-align: right; - font-weight: 400; - font-size: 14px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 25px; -} - -p.paragraph.neutral-paragraph-text-1 { - margin-top: 16px; - color: #000; - text-align: left; - font-weight: 300; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 25px; -} - -span.text-element.slider-text { - position: absolute; - top: 45%; - right: 0; - bottom: 45%; - left: 0; - padding: 8px 12px; - color: #f2f2f2; - text-align: center; - text-transform: uppercase; - font-weight: 600; - font-size: 48px; - font-family: 'Syne', sans-serif; - line-height: 1; -} - -a.link-text.neutral-nav-link-menu { - padding: 4px 16px; - color: #000; - text-align: center; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 0; - font-weight: 600; - font-size: 14px; - font-family: 'Fahkwang', sans-serif; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-duration: .25s; - -moz-transition-duration: .25s; - -o-transition-duration: .25s; - transition-duration: .25s; -} - -a.link-text.logo-navbar-link { - padding: 4px 16px 4px 0; - color: #000; - text-align: center; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 0; - font-weight: 800; - font-size: 26px; - font-family: 'Fahkwang', sans-serif; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-duration: .25s; - -moz-transition-duration: .25s; - -o-transition-duration: .25s; - transition-duration: .25s; -} - -a.link-text.neutral-text-link { - color: #000; - text-decoration: none; - font-weight: 500; - font-size: 16px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - -webkit-transition-duration: .2s; - -moz-transition-duration: .2s; - -o-transition-duration: .2s; - transition-duration: .2s; -} - -a.link-text.neutral-nav-link-footer { - margin-bottom: 16px; - color: #666; - text-align: right; - text-decoration: none; - font-weight: 400; - font-size: 14px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-duration: .25s; - -moz-transition-duration: .25s; - -o-transition-duration: .25s; - transition-duration: .25s; -} - -a.link-text.nav-link-footer { - margin-bottom: 16px; - color: #666; - text-align: right; - text-decoration: none; - font-weight: 400; - font-size: 14px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-duration: .25s; - -moz-transition-duration: .25s; - -o-transition-duration: .25s; - transition-duration: .25s; -} - -a.link-text.neutral-text-link-1 { - color: #000; - text-decoration: none; - font-weight: 500; - font-size: 16px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - -webkit-transition-duration: .2s; - -moz-transition-duration: .2s; - -o-transition-duration: .2s; - transition-duration: .2s; -} - -a.link-text.neutral-nav-link-menu:hover { - color: #7c7737; -} - -a.link-text.logo-navbar-link:hover { - color: #b5b5b5; -} - -a.link-text.neutral-text-link:hover { - -webkit-transform: translateX(2px); - -moz-transform: translateX(2px); - -o-transform: translateX(2px); - transform: translateX(2px); -} - -a.link-text.neutral-nav-link-footer:hover { - color: #12141d; -} - -a.link-text.nav-link-footer:hover { - color: #12141d; -} - -a.link-text.neutral-text-link-1:hover { - -webkit-transform: translateX(2px); - -moz-transform: translateX(2px); - -o-transform: translateX(2px); - transform: translateX(2px); -} - -/* Layout Elements */ - -.container.neutral-navbar { - position: absolute; - top: 0; - right: 0; - bottom: auto; - left: 0; - z-index: 1000; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - -ms-flex-align: start; - margin-right: auto; - margin-left: auto; - padding: 24px; - max-width: none; - width: auto; - border-bottom-width: 0; - border-bottom-style: solid; - background-color: transparent; - background-image: none; - background-attachment: scroll; - background-position: left top; - background-clip: border-box; - background-origin: padding-box; - background-size: 0 0; - background-repeat: no-repeat; - - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -moz-box-pack: justify; - justify-content: space-between; - -webkit-box-align: start; - -webkit-align-items: flex-start; - -moz-box-align: start; - align-items: flex-start; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - background-blend-mode: normal; -} - -.container.navigation-links { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - -ms-flex-align: center; - width: 100%; - - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -moz-box-pack: justify; - justify-content: space-between; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; -} - -.container.space-img-background-section { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - -ms-flex-align: center; - min-height: 85vh; - background-image: url('../pictures/PHOTO-2023-02-17-19-33-19%202.jpg'); - background-attachment: scroll; - background-position: left top; - background-clip: border-box; - background-origin: padding-box; - background-size: cover; - background-repeat: repeat; - - background-blend-mode: normal; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; -} - -.container.space-big-text-wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: start; - padding-right: 24px; - padding-left: 24px; - max-width: 1600px; - - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - -webkit-box-align: start; - -webkit-align-items: flex-start; - -moz-box-align: start; - align-items: flex-start; -} - -.container.neutral-cover-section-1 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - -ms-flex-align: center; - padding: 48px 24px; - min-height: 50vh; - background-color: #e9e8e7; - - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; -} - -.container.neutral-two-columns { - display: grid; - -ms-flex-pack: center; - -ms-flex-align: center; - margin-right: 0; - margin-left: 0; - padding-left: 0; - max-width: 1280px; - width: 100%; - - grid-template-columns: repeat(2 , 1fr); - grid-template-rows: auto; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; - justify-items: center; - grid-row-gap: 48px; - grid-column-gap: 24px; -} - -.container.neutral-container-picture-wrap { - overflow: hidden; - border-radius: 8px; -} - -.container.neutral-column-text-right { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - -ms-flex-align: start; - margin-left: 24px; - max-width: 800px; - - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - -webkit-box-align: start; - -webkit-align-items: flex-start; - -moz-box-align: start; - align-items: flex-start; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; -} - -.container.neutral-features-section-4 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - -ms-flex-align: center; - padding: 96px 24px; - - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; -} - -.container.neutral-footer-section-1 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - -ms-flex-align: center; - padding: 96px 24px; - background-color: #e2e1df; - - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; -} - -.container.neutral-footer-three-columns { - display: grid; - max-width: 1280px; - - grid-template-columns: 50% repeat(2 , 25%); - grid-template-rows: auto; - grid-template-areas: 'description links direction'; -} - -.container.description-logos-footer { - grid-area: description; -} - -.container.social-footer-wrapper { - margin-top: 16px; -} - -.container.container-links-footer-wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - padding-right: 16px; - padding-left: 16px; - - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - grid-area: links; -} - -.container.container-direction-footer { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: start; - -ms-flex-align: end; - - -webkit-box-align: end; - -webkit-align-items: flex-end; - -moz-box-align: end; - align-items: flex-end; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -moz-box-pack: start; - justify-content: flex-start; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - grid-area: direction; -} - -.container.container-telephone-footer { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; -} - -.container.container-1 { - min-height: 100px; -} - -.container.t-column { - float: left; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 12.5%; -} - -.container.t-row { - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.container.mySlides { - position: relative; - display: none; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.container.lightbox-wrapper { - position: relative; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-right: auto; - margin-left: auto; - padding-top: 0; - min-width: 60px; - min-height: auto; - max-width: 1400px; - width: 60%; -} - -.container.neutral-features-section-4-1 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - -ms-flex-align: center; - padding: 96px 24px; - - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; -} - -.container.neutral-three-columns-1 { - display: grid; - margin-right: auto; - margin-left: auto; - max-width: 1280px; - - grid-template-columns: repeat(3 , 1fr); - grid-template-rows: auto; - grid-row-gap: 48px; - grid-column-gap: 24px; -} - -.container.neutral-feature-wrapper-1 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: start; - -ms-flex-align: center; - max-width: none; - - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -moz-box-pack: start; - justify-content: flex-start; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; -} - -.container.container-feature-icon-wrapper-1 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - -ms-flex-align: center; - - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; -} - -.container#about { - background-image: url('../pictures/Morval_Andelot_Morval.jpg'); -} - -a.glyph.mobile-nav-button { - display: none; -} - -.html-element.navigation-code { - display: none; -} - -div.responsive-picture.neutral-picture { - margin-bottom: 0; - background-image: url('../pictures/PHOTO-2023-03-12-22-01-14.jpg'); - background-attachment: scroll; - background-position: left top; - background-clip: border-box; - background-origin: padding-box; - background-size: auto auto; - background-repeat: repeat; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-duration: .25s; - -moz-transition-duration: .25s; - -o-transition-duration: .25s; - transition-duration: .25s; - - background-blend-mode: normal; -} - -a.social-image.neutral-social-icon { - margin-right: 8px; - margin-left: 8px; - padding: 4px; - max-width: 24px; - border-radius: 50px; - background-color: #0064fa; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-duration: .25s; - -moz-transition-duration: .25s; - -o-transition-duration: .25s; - transition-duration: .25s; -} - -a.social-image.left-align.neutral-social-icon { - margin-left: 0; -} - -span.glyph.icon-footer { - margin-right: 4px; - color: #666; -} - -li.list-item { - color: #666; - font-weight: 300; - font-family: 'mont', sans-serif; - line-height: 18px; -} - -li.list-item.list-item-1 { - color: #666; - line-height: 25px; -} - -a.responsive-picture.mini-photo { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-right: auto; - margin-left: auto; - min-width: 60px; - width: 60%; - opacity: .8; -} - -a.glyph.next { - position: absolute; - top: 45%; - right: 0; - margin-top: 0; - padding: 16px; - border-top-left-radius: 5px; - color: #fff; - font-size: 24px; - line-height: 20px; - cursor: pointer; -} - -a.glyph.prev { - position: absolute; - top: 45%; - margin-top: 0; - padding: 16px; - border-radius: 5px; - background-color: transparent; - color: #fff; - font-size: 24px; - line-height: 20px; - cursor: pointer; -} - -div.responsive-picture.picture-1 { - margin-right: auto; - margin-left: auto; - min-width: 100px; - width: 100%; -} - -span.glyph.neutral-feature-icon-1 { - margin-bottom: 8px; - color: #0c408d; - text-align: center; - font-size: 40px; -} - -div.responsive-picture.neutral-picture:hover { - -webkit-transform: scaleX(1.04) scaleY(1.04); - -moz-transform: scaleX(1.04) scaleY(1.04); - -o-transform: scaleX(1.04) scaleY(1.04); - transform: scaleX(1.04) scaleY(1.04); -} - -a.social-image.neutral-social-icon:hover { - -webkit-transform: translateY(-2px); - -moz-transform: translateY(-2px); - -o-transform: translateY(-2px); - transform: translateY(-2px); -} - -a.responsive-picture.mini-photo:hover { - opacity: 1; -} - -a.glyph.next:hover { - border-top-left-radius: 0; - background-color: #000; -} - -a.glyph.prev:hover { - border-radius: 0; - background-color: #000; -} - -a.responsive-picture.mini-photo:active { - opacity: 1; -} - -@media screen and (max-width: 80rem) { - /* Layout Elements */ - - .container.neutral-two-columns { - grid-template-columns: repeat(2 , 50%); - grid-template-rows: auto; - } -} - -@media screen and (max-width: 60rem) { - /* Text Elements */ - - a.link-text.neutral-nav-link-menu { - padding-right: 24px; - padding-left: 24px; - } - - a.link-text.logo-navbar-link { - padding-right: 24px; - padding-left: 24px; - } - - /* Layout Elements */ - - .container.container-8 { - margin-top: 16px; - } - - .container.space-img-background-section { - background-attachment: scroll; - } - - .container.neutral-two-columns { - grid-template-columns: 1fr; - grid-template-rows: repeat(2 , auto); - justify-items: center; - } - - .container.neutral-column-text-right { - margin-top: 16px; - margin-left: 0; - } - - .container.neutral-footer-three-columns { - grid-template-areas: 'description' 'links' 'direction'; - grid-template-rows: repeat(3 , auto); - grid-template-columns: 1fr; - grid-row-gap: 48px; - grid-column-gap: 24px; - } - - .container.social-footer-wrapper { - margin-top: 16px; - } - - .container.neutral-three-columns-1 { - grid-template-rows: repeat(3 , auto); - grid-template-columns: auto; - } -} - -@media screen and (max-width: 48rem) { - /* Text Elements */ - - p.paragraph.direction-footer { - text-align: left; - } - - a.link-text.neutral-nav-link-menu { - display: block; - margin-top: 0; - margin-right: auto; - margin-left: auto; - padding: 24px; - width: 100%; - color: #26261e; - text-align: center; - font-weight: 400; - font-size: 20px; - font-family: 'Tenor Sans', sans-serif; - } - - a.link-text.logo-navbar-link { - display: block; - margin-top: 0; - margin-right: auto; - margin-left: auto; - padding: 24px; - width: 100%; - color: #26261e; - text-align: center; - font-weight: 700; - font-size: 24px; - font-family: 'Tenor Sans', sans-serif; - } - - a.link-text.neutral-text-link { - margin-top: 8px; - } - - a.link-text.neutral-nav-link-footer { - text-align: left; - } - - a.link-text.nav-link-footer { - text-align: left; - } - - a.link-text.neutral-text-link-1 { - margin-top: 8px; - } - - a.link-text.neutral-nav-link-menu:hover { - color: #7c7737; - } - - /* Layout Elements */ - - .container.neutral-navbar { - position: fixed; - z-index: 1000; - -ms-flex-pack: end; - -ms-flex-align: start; - margin-right: 0; - margin-left: 0; - padding-top: 16px; - padding-bottom: 16px; - max-height: 80px; - background-color: transparent; - - -webkit-box-align: start; - -webkit-align-items: flex-start; - -moz-box-align: start; - align-items: flex-start; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -moz-box-pack: end; - justify-content: flex-end; - } - - .container.navigation-links { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 500; - visibility: hidden; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - -ms-flex-align: center; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; - width: 100%; - background-color: #f9f9f9; - opacity: 0; - -webkit-transition-duration: .3s; - -moz-transition-duration: .3s; - -o-transition-duration: .3s; - transition-duration: .3s; - - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - justify-content: center; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - align-items: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; - } - - .container.neutral-two-columns { - display: grid; - margin-right: auto; - margin-left: auto; - } - - .container.container-links-footer-wrapper { - margin-top: 24px; - padding-left: 0; - } - - .container.container-direction-footer { - -ms-flex-align: start; - margin-top: 24px; - - -webkit-box-align: start; - -webkit-align-items: flex-start; - -moz-box-align: start; - align-items: flex-start; - } - - .container.neutral-three-columns-1 { - grid-template-columns: auto; - grid-template-rows: repeat(3 , auto); - } - - .container.navigation-links.show-menu { - top: 0; - visibility: visible; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - opacity: 1; - - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-orient: vertical; - -moz-box-direction: normal; - } - - a.glyph.mobile-nav-button { - display: block; - color: #1d1d1d; - text-align: right; - font-size: 34px; - line-height: 1; - } - - a.glyph.close-button-cross.mobile-nav-button { - position: absolute; - top: 0; - right: 0; - left: auto; - padding-top: 20px; - padding-right: 24px; - color: #26261e; - } - - div.responsive-picture.neutral-picture { - margin-bottom: 0; - max-width: 800px; - } -} - -@media screen and (max-width: 35.3125rem) { - /* Text Elements */ - - h2.neutral-cover-heading { - font-size: 6.52vw; - } - - /* Layout Elements */ - - .container.neutral-cover-section-1 { - padding-right: 16px; - padding-left: 16px; - } - - .container.neutral-features-section-4 { - padding-right: 16px; - padding-left: 16px; - } - - .container.neutral-footer-section-1 { - padding-right: 16px; - padding-left: 16px; - } - - .container.neutral-footer-three-columns { - grid-template-areas: 'description description' 'links links' 'direction direction'; - grid-template-rows: repeat(3 , auto); - } - - .container.neutral-features-section-4-1 { - padding-right: 16px; - padding-left: 16px; - } -} - -@media screen and (max-width: 20rem) { - /* Text Elements */ - - h2.neutral-cover-heading { - font-size: 20px; - } - - h4.neutral-headline-footer { - text-align: left; - } - - h4.neutral-feature-title-1 { - text-align: left; - } -} - -blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,select,td,textarea,th,ul { - font-family: 'mont', 'Helvetica Neue',Helvetica,Arial,sans-serif; -} - -body { - min-height: 100vh; - position: relative -} - -.form-container,.link-container,[class*=container] { - min-width: 10px -} - -.link-container,label.label-container { - display: block -} - -.responsive-picture { - width: 65%; - margin:auto; - overflow: hidden; - display: block -} - -.responsive-picture picture { - line-height: 0; - display: block -} - -.responsive-picture img { - width: 100%; - height: 100%; - border-radius: 5px; -} - -.placeholder { - background-color: lightgrey; - text-align: center; - padding: 10px 0 -} - -h3.smallhero-header { - font-size: 1.25em; - color: #464646 -} - -h3.smallhero-tagline { - color: #646464; - font-style: normal; - padding: 0 -} - -.placeholder-hero { - background-color: lightgrey; - text-align: left; - padding: 10px 0 10px 20px -} - -h1.hero-header { - color: #464646 -} - -p.hero-tagline { - color: #646464; - font-style: normal; - padding: 0 -} - -code { - font-family: Consolas,monaco,monospace -} - -.social-element { - display: inline-block; - text-align: center -} - -.social-element a.social-label { - text-align: center; - font-family: Georgia,Times,'Times New Roman',serif; - display: block -} - -.social-image { - background-color: #525252; - border-radius: 3px; - max-width: 32px; - display: inline-block -} - -.social-image img { - margin: 0 auto; - display: block; - width: 100%; - height: 100% -} - -a.glyph,span.glyph { - display: block; - text-decoration: none -} - -a.glyph i,span.glyph i { - line-height: 1 -} - -.image-for-button { - height: auto; - overflow: hidden; - width: 100%; - max-width: 24px; - display: inline-block; - vertical-align: inherit -} - -.image-for-button picture { - max-width: none; - height: auto; - display: block; - line-height: 0 -} - -.image-for-button img { - width: 100%; - height: 100% -} - -button.button-glyph,button.button-image { - font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif -} - -a.glyph-for-button,span.glyph-for-button { - font-size: 22px; - text-decoration: none -} - -a.glyph-for-button i,span.glyph-for-button i { - line-height: 1 -} - -a[class*=link-button] .image-for-button { - vertical-align: middle -} - -button[data-coffeebuilder-button][data-disabled],button[disabled] { - opacity: .25; - cursor: auto -} - -.responsive-video { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; - max-width: 100% -} - -.responsive-video.square { - padding-bottom: 120%; - max-width: initial -} - -.responsive-video embed,.responsive-video iframe,.responsive-video object { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100% -} - -video { - width: 50%; - background-color: #000 -} - -audio { - display: inline-block; - box-sizing: border-box; - background-color: transparent; - padding: 0 20px 30px; - height: 95px; - width: 50%; - margin: 10px -} - -.responsive-map { - position: relative; - overflow: hidden; - max-width: 100%; - width: 100%; - height: 350px; - min-height: 50px; - background-color: #dcdcdc -} - -.responsive-map embed,.responsive-map iframe,.responsive-map object { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100% -} - -.rule { - padding: 5px 0; - width: 100%; - margin: 7px 0 -} - -.rule hr { - margin: 0; - padding: 0; - border: none; - border-top: 1px solid #ddd; - width: 100% -} - -form.paypal-button,form.paypal-image { - display: inline-block; - padding: 0; - overflow: hidden -} - -form.paypal-button { - background-color: silver -} - -form.paypal-button button { - padding: .5em 1em; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - border-radius: 0; - background: 0 0; - line-height: 1; - color: inherit; - cursor: inherit; - display: block; - margin: 0; - width: 100%; - height: 100% -} - -form.paypal-image input[type=image] { - width: 100%; - margin: 0 -} - -textarea { - resize: none -} - -.label-container span.text-element { - display: inline-block; - font-size: 1em -} - -.bg-full-screen-container { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -100; - overflow: hidden -} - -video.full-screen-video { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -100; - width: 100%; - height: 100%; - background-color: transparent; - -o-object-fit: cover; - object-fit: cover -} - -.bg-content-size-container { - position: relative; - display: block; - overflow: hidden; - margin: 0; - min-height: 100px; - width: 100% -} - -video.content-size-video { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - width: 100%; - height: 100%; - background-color: transparent; - -o-object-fit: cover; - object-fit: cover -} - -label.checkbox>[type=checkbox],label.radio>[type=radio] { - margin-right: .5rem -} - -.container.sd-four-cols,.container.sd-three-cols,.container.sd-two-cols { - display: grid; - padding-left: .75rem; - padding-right: .75rem; - grid-column-gap: 1.5rem -} - -.container.sd-two-cols { - grid-template-columns: repeat(2,1fr) -} - -.container.sd-three-cols { - grid-template-columns: repeat(3,1fr) -} - -.container.sd-four-cols { - grid-template-columns: repeat(4,1fr) -} - -.icon { - background: url('./MORVALFavicon.svg'); - height: 20px; - width: 20px; - display: block; - /* Other styles here */ -} - -a.link-button.action-btn { - display: block; - margin-top: 24px; - margin-right: auto; - margin-left: auto; - padding: 16px 32px; - max-width: 250px; - background-color: #03337a; - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-attachment: scroll; - background-position: left top; - background-clip: border-box; - background-origin: padding-box; - background-size: auto auto; - background-repeat: repeat; - color: #fff; - text-align: center; - text-decoration: none; - text-transform: none; - font-weight: 500; - background-blend-mode: lighten; - border-radius: 5px; -} -a.link-button { - color: #010101; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.breadcrum p{ - font-size: 0.8em; - display: inline; -} -.breadcrum a{ - text-decoration: none; - color: #4a90e2; - cursor: pointer; - font-family: inherit; - font-size: 0.8em; -} - -.img_config { - border-radius:5px; - width: 25px; - height: 25px; - margin: 1px; -} -.footer-low { - text-align: center; - border-top: 1px solid #fff; - padding: 10px; - background-color: #e2e1df; -} - -.footer-low a{ - text-decoration: none; - color: #555555; - cursor: pointer; - font-family: inherit; - font-size: 0.8em; -} - -.footer_logo { - max-width: 100px; -} - -.logos img { - mix-blend-mode: multiply; - margin-left: 20px; - margin-right: 20px; - max-width: 90%; - vertical-align: middle; - border-style: none; -} - -.home_text p { - margin-top: 16px; - color: #666; - text-align: left; - font-weight: 300; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; - line-height: 25px; -} - -.home_text { - padding: 10px; - font-style: italic; -} - -.stock p { - font-size: 10px; - margin: auto; - padding: 5px; - width: fit-content; - border-radius: 5px; - color: white; -} - -.stock p:before { - content : '\1F4E6'; -} - -.stock_product p { - font-size: 10px; - font-weight: normal; - margin: 10px; - padding: 0px; -} - -.stock_product p:before { - content : '\1F4E6'; -} - -.delivery p { - font-size: 10px; - font-weight: normal; - margin: 10px; - padding: 0px; -} - -.delivery p:before { - content : '\26DF'; -} - - -#simple-cookie-consent { - height: 100vh; - width: 100vw; - position: fixed; - top: 0; - left: 0; - resize: vertical; - overflow: auto; - z-index: 999999999; - background: rgba(0, 0, 0, 0.7); -} -#simple-cookie-consent .cookie-consent-container { - position: absolute; - top: 50%; - left: 20px; - right: 20px; - margin: -100px auto 0; - background: #fff; - padding: 20px; - max-width: 500px; -} - -.cookie-consent-notice h4{ - font-family: 'good'; - font-size:24px; -} - -#simple-cookie-consent .cookie-consent-selection { - text-align: right; -} -#simple-cookie-consent input { - border: none; - padding: 10px 20px; - margin: 10px 0 0 10px; - background: none; - font-size: 1.1em; -} -#simple-cookie-consent input.cookie-consent-allow { - background-color: #04aa6d; - color: #fff; -} -#simple-cookie-consent input.cookie-consent-allow:focus, -#simple-cookie-consent input.cookie-consent-allow:hover { - background-color: #059862; - cursor: pointer; -} -#simple-cookie-consent input.cookie-consent-deny { - padding: 5px 0; - font-size: 0.9em; - opacity: 0.8; -} -#simple-cookie-consent input.cookie-consent-deny:focus, -input.cookie-consent-deny:hover { - opacity: 1; - cursor: pointer; -} -#simple-cookie-consent hr { - margin: 15px 0; -} - -a.action-btn:after { - content: ' '; - display: inline-block; - border-bottom: 1px solid #fff; - border-right: 1px solid #fff; - height: 8px; - width: 8px; - transform: rotate(-45deg); - margin-left: 1rem; -} - -@media screen and (max-width: 600px){ - .container.highlight-section { - min-height: 25vh; - } - - h2.title-message { - margin-top: 0; - margin-bottom: 0; - max-width: 800px; - text-align: center; - font-size: 20px; - font-family: 'mont', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -} - -#banner { - height: 100vh; - width: 100vw; - position: fixed; - top: 0; - left: 0; - resize: vertical; - overflow: auto; - z-index: 999999999; - background: rgba(0, 0, 0, 0.7); -} -#banner .banner_container { - position: absolute; - top: 50%; - left: 20px; - right: 20px; - margin: -100px auto 0; - background: #fff; - padding: 20px; - max-width: 500px; -} - -.banner_notice h4{ - font-family: 'gerb'; - font-size:24px; - color:#fda104; - text-shadow: 0 0 1px #12141d; -} - -#banner .banner_selection { - text-align: right; -} -#banner input { - border: none; - padding: 10px 20px; - margin: 10px 0 0 10px; - background: none; - font-size: 1.1em; -} -#banner input.banner_allow { - background-color: #03337a; - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%); - color: #fff; -} -#banner input.banner_allow:focus, -#banner input.banner_allow:hover { - cursor: pointer; -} -#banner input.banner_deny { - padding: 5px 0; - font-size: 0.9em; - opacity: 0.8; - font-weight: 600; -} -#banner input.banner_deny:focus, -input.banner_deny:hover { - opacity: 1; - cursor: pointer; -} -#banner hr { - margin: 15px 0; -} - - /* Main Container */ - .filtersection { - display: flex; - margin: 0 auto; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - background: white; - border-radius: 12px; - margin-bottom: 50px; - padding: 10px; - width: 95%; -} - -/* Filter Section */ -.filter-section { - width: 250px; - padding: 20px; - border-right: 1px solid #e0e0e0; -} - -.filter-section h2 { - margin-bottom: 15px; - color: #333; -} - -.filter-group { - margin-bottom: 20px; -} - -.filter-group label { - margin-bottom: 10px; -} - -.filter-group input[type="checkbox"] { - margin-right: 10px; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .filtersection { - flex-direction: column; - text-align: center; - } - - .filter-section { - width: 100%; - border-right: none; - border-bottom: 1px solid #e0e0e0; - } -} - -.news-section { - padding: 80px 20px; - background-color: #f8f8f8; -} - -.news-container { - max-width: 1200px; - margin: 0 auto; -} - -.news-header { - text-align: center; - margin-bottom: 50px; -} - -.news-header h2 { - font-size: 2rem; - margin-bottom: 15px; - font-family: 'gerb', sans-serif; -} - -.news-header p { - color: #666; - font-size: 1.1rem; -} - -.news-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 30px; - margin-bottom: 50px; -} - -.news-card { - background: white; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - transition: box-shadow 0.3s ease; -} - -.news-card:hover { - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -} - -.news-card-content { - padding: 20px; -} - -.news-meta { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; -} - -.news-date { - color: #666; - font-size: 0.9rem; -} - -.news-tag { - background: #e6f0ff; - color: #0066cc; - padding: 4px 12px; - border-radius: 15px; - font-size: 0.8rem; -} - -.news-title { - font-size: 1.25rem; - margin-bottom: 15px; - color: #333; - font-weight: 600; -} - -.news-preview { - color: #666; - margin-bottom: 20px; - line-height: 1.5; -} - -.read-more { - color: #0066cc; - text-decoration: none; - display: inline-flex; - align-items: center; - font-weight: 500; -} - -.read-more:hover { - color: #0052a3; -} - -.read-more::after { - content: '>'; - margin-left: 5px; -} - -.view-all-container { - text-align: center; -} - -.view-all-btn { - background: #0066cc; - color: white; - padding: 12px 24px; - border-radius: 4px; - text-decoration: none; - display: inline-block; - transition: background-color 0.3s ease; -} - -.view-all-btn:hover { - background: #0052a3; -} - -@media (max-width: 1024px) { - .news-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 768px) { - .news-grid { - grid-template-columns: 1fr; - } -} - -.dropdown { - position: relative; - display: inline-block; -} -.dropdown-content { - display: none; - position: absolute; - background-color: #f1f1f1; - min-width: 80px; - box-shadow: 0px 8px 16px rgba(0,0,0,0.2); - z-index: 1; -} -.dropdown:hover .dropdown-content { - display: block; -} -.dropdown-content a { - text-decoration: none; - display: flex; - align-items: center; -} -.dropdown-content a:hover { - background-color: #ddd; -} -.dropdown-content img { - width: 20px; - height: auto; -} - -.loading-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(255, 255, 255, 0.8); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - z-index: 9999; - opacity: 0; - visibility: hidden; - transition: opacity 0.3s, visibility 0.3s; -} - -.loading-container.active { - opacity: 1; - visibility: visible; -} - -.loading-bar { - width: 200px; - height: 10px; - background-color: #f0f0f0; - border-radius: 5px; - overflow: hidden; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -} - -.progress { - height: 100%; - width: 0%; - background-color: #4CAF50; - animation: progressAnimation 2s infinite ease-in-out; -} - -.loading-text { - margin-top: 10px; - font-size: 14px; - color: #333; -} - -@keyframes progressAnimation { - 0% { width: 0%; } - 50% { width: 100%; } - 100% { width: 0%; } -} - -/* Hide the loading bar when page is loaded */ -.loaded .loading-container { - display: none; -} \ No newline at end of file diff --git a/custom/css/main.css b/custom/css/main.css index 420fd15..7493dc2 100644 --- a/custom/css/main.css +++ b/custom/css/main.css @@ -81,7 +81,11 @@ body { /* Container */ .container { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 0 auto; padding: 0 15px; } @@ -168,11 +172,19 @@ nav { background-image: url('../../custom/assets/header.jpg'); background-size: cover; background-position: center; +<<<<<<< HEAD height: 500px; display: flex; align-items: center; position: relative; max-width: 1200px; /* Match container max-width to constrain image */ +======= + height: 60vh; + display: flex; + align-items: center; + position: relative; + max-width: 90%; /* Match container max-width to constrain image */ +>>>>>>> development margin: 0 auto; /* Center the hero section */ } @@ -186,6 +198,13 @@ nav { .hero h1 { color: var(--color-white); font-size: 42px; +<<<<<<< HEAD +======= + background: transparent !important; + font-weight: 900; + text-shadow: 1px 1px 2px rgb(114 90 90 / 90%), 2px 2px 4px rgba(0, 0, 0, 0.7); + filter: brightness(1.5); +>>>>>>> development line-height: 1.2; margin-bottom: 20px; } @@ -212,10 +231,22 @@ nav { .store-description { text-align: center; padding: 50px 20px; +<<<<<<< HEAD max-width: 600px; margin: 0 auto; } +======= + max-width: 1000px; + margin: 0 auto; +} + +.section-footer { + text-align: center; + margin-top: 20px; +} + +>>>>>>> development .store-description p { font-size: 20px; line-height: 1.6; @@ -411,7 +442,11 @@ nav { min-width: 140px; display: none; z-index: 20; +<<<<<<< HEAD margin-top: 8px; +======= + margin-top: 2px; +>>>>>>> development } .language-dropdown.show { @@ -446,6 +481,20 @@ nav { display: block; } +<<<<<<< HEAD +======= +/* Add invisible bridge to prevent dropdown from closing */ +.language-selector::before { + content: ''; + position: absolute; + top: 100%; + right: 0; + width: 100%; + height: 4px; + z-index: 19; +} + +>>>>>>> development /* Responsive adjustments */ @media (max-width: 768px) { .language-selector { @@ -459,7 +508,11 @@ nav { } .watches-section { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 0 auto; padding: 20px 15px; background-color: var(--color-lighter-gray); @@ -527,6 +580,14 @@ nav { color: var(--color-dark-gray); } +<<<<<<< HEAD +======= +.price-from{ + font-size: 0.8em; + opacity: 0.8; +} + +>>>>>>> development .slider-nav { position: absolute; top: 50%; @@ -601,6 +662,12 @@ nav { padding: 0 0px 10px 10px; padding-bottom: 10px; border-bottom: solid 2px var(--color-dark-blue); +<<<<<<< HEAD +======= + margin-top: 5em; + height: 12em; + margin-bottom: 5em; +>>>>>>> development } .feature-item h2 { @@ -631,14 +698,22 @@ nav { .watch-ad-section { display: flex; flex-direction: column; +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 0 auto; } .top-section { position: relative; height: 400px; +<<<<<<< HEAD background-image: url('../../custom/assets/watchad1.jpg'); +======= + background-image: url('../../custom/assets/comp2.png'); +>>>>>>> development background-size: cover; background-position: center; display: flex; @@ -667,7 +742,14 @@ nav { .top-content h2 { font-size: 2.5rem; +<<<<<<< HEAD font-weight: 600; +======= + background: transparent !important; + font-weight: 900; + text-shadow: 1px 1px 2px rgb(114 90 90 / 90%), 2px 2px 4px rgba(0, 0, 0, 0.7); + filter: brightness(1.5); +>>>>>>> development margin-bottom: 20px; line-height: 1.2; } @@ -690,9 +772,18 @@ nav { .bottom-content h2 { font-size: 2.5rem; +<<<<<<< HEAD font-weight: 600; line-height: 1.2; margin-bottom: 20px; +======= + line-height: 1.2; + margin-bottom: 20px; + background: transparent !important; + font-weight: 900; + text-shadow: 1px 1px 2px rgb(114 90 90 / 90%), 2px 2px 4px rgba(0, 0, 0, 0.7); + filter: brightness(1.5); +>>>>>>> development } .btn { display: inline-block; @@ -1267,7 +1358,11 @@ nav { /* Main Product Container */ .product.content-wrapper { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 2rem auto; display: grid; grid-template-columns: 1fr 1fr; @@ -1640,7 +1735,11 @@ nav { /* Global Reset and Base Styles */ .cart.content-wrapper { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 0 auto; padding: 2rem; color: var(--color-text-dark); @@ -1653,7 +1752,11 @@ nav { /* Header Styles */ .cart-container { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 2rem auto; padding: 0 1rem; } @@ -1780,6 +1883,7 @@ nav { color: var(--color-primary); } +<<<<<<< HEAD /* Extras Section */ .cart .add_products { background-color: var(--color-lighter-gray); @@ -1868,6 +1972,311 @@ nav { white-space: nowrap; } +======= + + .cart .add_product img { + min-width: 60px; + max-width: 60px !important; + height: auto; + object-fit: cover; + transition: opacity 0.3s ease; + } + +/* Extras Section Layout - 4 items per row on large screens - Version 1 with Centering */ + +.add_products { + background-color: var(--color-lighter-gray); + padding: 2rem; + margin-bottom: 2rem; + border: 1px solid var(--color-gray); + border-radius: 8px; + text-align: center; /* Center the content */ +} + +.add_products h2 { + font-size: 1.5rem; + margin-bottom: 1.5rem; + color: var(--color-heading); + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; + position: relative; +} + +.add_products h2:after { + content: ""; + display: block; + width: 50px; + height: 2px; + background-color: var(--color-primary); + margin: 10px auto 0; +} + +/* Create an inner container to center the floated items */ +.add_products { + position: relative; +} + +.add_products::before { + content: ""; + display: table; + width: 100%; +} + +.add_products::after { + content: ""; + display: table; + clear: both; +} + +/* Float layout for the product items */ +.add_product { + display: flex; + flex-direction: column; /* Stack content vertically */ + align-items: center; /* Center content horizontally */ + padding: 1rem; + border: 1px solid var(--color-gray); + border-radius: 8px; + margin-bottom: 1rem; + transition: all 0.3s ease; + background-color: var(--color-white); + box-shadow: 0 2px 4px var(--color-shadow); + text-align: center; /* Center text content */ + + /* Float layout for side-by-side positioning */ + float: left; + width: calc(25% - 0.75rem); /* 4 items per row */ + margin-right: 1rem; +} + +/* Remove margin from every 4th item */ +.add_product:nth-child(4n+2) { /* Adjust for h2 being first child */ + margin-right: 0; +} + +/* Clear float after every 4th item */ +.add_product:nth-child(4n+2)::after { + content: ""; + display: table; + clear: both; +} + +.add_product:hover { + background-color: var(--color-light-gray); + transform: translateY(-2px); + box-shadow: 0 4px 8px var(--color-shadow); +} + +.add_product img { + width: 60px; + height: 60px; + object-fit: cover; + margin-bottom: 0.5rem; /* Space below image */ + border-radius: 4px; + transition: opacity 0.3s ease; +} + +.add_product img:hover { + opacity: 0.8; +} + +.add_product form { + margin: 0.5rem 0; /* Space above and below form */ + flex-shrink: 0; +} + +.add_product input[type="submit"] { + width: 30px; + height: 30px; + background-color: var(--color-primary); + color: var(--color-white); + font-size: 1.2rem; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + box-shadow: 0 2px 4px var(--color-shadow); +} + +.add_product input[type="submit"]:hover { + background-color: var(--color-primary-dark); + transform: scale(1.1); +} + +.add_product .product { + text-decoration: none; + color: inherit; +} + +.add_name { + font-weight: 500; + color: var(--color-text-dark); + display: block; + font-size: 0.9rem; + line-height: 1.3; + margin-bottom: 0.25rem; + text-align: center; /* Center the product name */ +} + +.add_price { + font-weight: 600; + color: var(--color-primary); + font-size: 1rem; + display: block; + text-align: center; /* Center the price */ +} + +/* Centering logic for different screen sizes */ + +/* Large screens (1200px+) - 4 items per row centered */ +@media (min-width: 1200px) { + .add_products { + /* Calculate centering: container width minus total items width, divided by 2 */ + padding-left: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem); + padding-right: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem); + } + + .add_product { + width: calc(25% - 0.75rem); + } + + .add_product:nth-child(5n+2) { /* h2 + 4 products */ + margin-right: 0; + } + + .add_product:nth-child(5n+2)::after { + content: ""; + display: table; + clear: both; + } +} + +/* Large screens (992px-1199px) - 4 items per row centered */ +@media (max-width: 1199px) and (min-width: 992px) { + .add_products { + padding-left: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem); + padding-right: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem); + } + + .add_product { + width: calc(25% - 0.75rem); + } +} + +/* Medium screens (768px-991px) - 3 items per row centered */ +@media (max-width: 991px) and (min-width: 768px) { + .add_products { + padding-left: calc((100% - (3 * calc(33.33% - 0.67rem) + 2rem)) / 2 + 1.5rem); + padding-right: calc((100% - (3 * calc(33.33% - 0.67rem) + 2rem)) / 2 + 1.5rem); + } + + .add_product { + width: calc(33.33% - 0.67rem); + } + + .add_product:nth-child(4n+2) { + margin-right: 1rem; + } + + .add_product:nth-child(4n+4) { /* h2 + 3 products */ + margin-right: 0; + } + + .add_product:nth-child(4n+2)::after { + display: none; + } + + .add_product:nth-child(4n+4)::after { + content: ""; + display: table; + clear: both; + } +} + +/* Small screens (576px-767px) - 2 items per row centered */ +@media (max-width: 767px) and (min-width: 576px) { + .add_products { + padding-left: calc((100% - (2 * calc(50% - 0.5rem) + 1rem)) / 2 + 1.5rem); + padding-right: calc((100% - (2 * calc(50% - 0.5rem) + 1rem)) / 2 + 1.5rem); + } + + .add_product { + width: calc(50% - 0.5rem); + } + + .add_product:nth-child(4n+2), + .add_product:nth-child(4n+4) { + margin-right: 1rem; + } + + .add_product:nth-child(odd) { + margin-right: 1rem; + } + + .add_product:nth-child(even) { + margin-right: 0; + } + + .add_product:nth-child(4n+2)::after, + .add_product:nth-child(4n+4)::after { + display: none; + } + + .add_product:nth-child(even)::after { + content: ""; + display: table; + clear: both; + } +} + +/* Extra small screens (575px and below) - 1 item per row centered */ +@media (max-width: 575px) { + .add_product { + float: none; + width: 100%; + margin-right: 0; + margin-left: auto; + margin-right: auto; + flex-direction: column; /* Already set, but keeping for clarity */ + text-align: center; + padding: 1rem; + max-width: 300px; /* Limit width on very small screens */ + } + + .add_product:nth-child(n) { + margin-right: 0; + } + + .add_product:nth-child(n)::after { + display: none; + } + + .add_product img { + margin-bottom: 0.5rem; /* Already set correctly */ + } + + .add_product form { + margin: 0.5rem 0; /* Already set correctly */ + } + + .add_name { + text-align: center; + margin-bottom: 0.25rem; + } + + .add_price { + text-align: center; + } + + .add_products { + padding: 1rem; + } +} + +>>>>>>> development /* Cart Totals */ .cart .total { border-top: 2px solid var(--color-dark-text); @@ -2098,7 +2507,11 @@ nav { .checkout { font-family: 'Inter', 'Helvetica Neue', sans-serif; color: var(--color-text-dark); +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 0 auto; padding: 2rem 1rem; } @@ -2498,7 +2911,11 @@ nav { } .content-section { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 40px auto; line-height: 1.6; } @@ -2572,7 +2989,11 @@ nav { .myaccount.content-wrapper { +<<<<<<< HEAD max-width: 1200px; +======= + max-width: 90%; +>>>>>>> development margin: 3rem auto; padding: 0 1.5rem; } @@ -2959,4 +3380,552 @@ input[type="password"] { .order.new { animation: highlight 2s ease-out; +<<<<<<< HEAD +======= +} + +/* =================================== + DEALERS PAGE STYLES + =================================== */ + +/* Dealers Section */ +.dealers-section { + padding: 80px 0; + background-color: var(--color-lighter-gray); +} + +.section-intro { + text-align: center; + max-width: 800px; + margin: 0 auto 60px; +} + +.section-intro h2 { + font-size: 2.5rem; + font-weight: 600; + color: var(--color-heading); + margin-bottom: 20px; + position: relative; +} + +.section-intro h2::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 3px; + background-color: var(--color-primary); +} + +.section-intro p { + font-size: 1.2rem; + line-height: 1.6; + color: var(--color-text-gray); +} + +/* Dealers Grid */ +.dealers-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 30px; + max-width: 1200px; + margin: 0 auto; +} + +/* Dealer Card */ +.dealer-card { + background-color: var(--color-white); + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + padding: 30px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; +} + +.dealer-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); +} + +.dealer-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); +} + +/* Dealer Header */ +.dealer-header { + margin-bottom: 25px; + padding-bottom: 20px; + border-bottom: 1px solid var(--color-light-gray); +} + +.dealer-header h3 { + font-size: 1.5rem; + font-weight: 600; + color: var(--color-heading); + margin-bottom: 5px; +} + +.dealer-location { + font-size: 1rem; + color: var(--color-primary); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Dealer Info */ +.dealer-info { + margin-bottom: 25px; +} + +.info-item { + display: flex; + align-items: flex-start; + margin-bottom: 15px; + gap: 12px; +} + +.info-item:last-child { + margin-bottom: 0; +} + +.info-item i { + font-size: 1.1rem; + color: var(--color-primary); + margin-top: 2px; + min-width: 20px; +} + +/* Icons using CSS pseudo-elements */ +.icon-location::before { + content: "📍"; +} + +.icon-phone::before { + content: "📞"; +} + +.icon-email::before { + content: "✉️"; +} + +.icon-whatsapp::before { + content: "💬"; +} + +.info-item div { + display: flex; + flex-direction: column; +} + +.info-item span { + font-size: 0.95rem; + color: var(--color-text-gray); + line-height: 1.4; +} + +.info-item a { + color: var(--color-text-dark); + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; +} + +.info-item a:hover { + color: var(--color-primary); +} + +/* Dealer Actions */ +.dealer-actions { + display: flex; + gap: 10px; +} + +.dealer-actions .btn { + flex: 1; + text-align: center; + padding: 10px 15px; + font-size: 0.9rem; + font-weight: 500; + border-radius: 6px; + text-decoration: none; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; +} + +.btn-secondary { + background-color: var(--color-primary); + color: var(--color-white); + border: 1px solid var(--color-primary); +} + +.btn-secondary:hover { + background-color: var(--color-primary-dark); + border-color: var(--color-primary-dark); +} + +.btn-outline { + background-color: transparent; + color: var(--color-primary); + border: 1px solid var(--color-primary); +} + +.btn-outline:hover { + background-color: var(--color-primary); + color: var(--color-white); +} + +/* Become a Dealer Section */ +.become-dealer-section { + padding: 80px 0; + background-color: var(--color-white); +} + +.become-dealer-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.become-dealer-text h2 { + font-size: 2.2rem; + font-weight: 600; + color: var(--color-heading); + margin-bottom: 20px; + line-height: 1.3; +} + +.become-dealer-text p { + font-size: 1.1rem; + line-height: 1.6; + color: var(--color-text-gray); + margin-bottom: 30px; +} + +.contact-options { + display: flex; + flex-direction: column; + gap: 15px; +} + +.contact-options .btn { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 12px 20px; + font-size: 1rem; + font-weight: 500; + border-radius: 6px; + text-decoration: none; + transition: all 0.3s ease; + width: fit-content; +} + +.btn-primary { + background-color: var(--color-primary); + color: var(--color-white); + border: 1px solid var(--color-primary); +} + +.btn-primary:hover { + background-color: var(--color-primary-dark); + border-color: var(--color-primary-dark); + transform: translateY(-2px); +} + +.btn-whatsapp { + background-color: #25D366; + color: var(--color-white); + border: 1px solid #25D366; +} + +.btn-whatsapp:hover { + background-color: #128C7E; + border-color: #128C7E; + transform: translateY(-2px); +} + +.become-dealer-image { + display: flex; + justify-content: center; + align-items: center; +} + +.image-placeholder { + width: 100%; + height: 300px; + background-image: url(../../custom/assets/header.jpg); + background-size: cover; + background-position: center; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +/* Responsive Design */ +@media (max-width: 992px) { + .dealers-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; + } + + .become-dealer-content { + grid-template-columns: 1fr; + gap: 40px; + text-align: center; + } + + .section-intro h2 { + font-size: 2.2rem; + } + + .become-dealer-text h2 { + font-size: 2rem; + } +} + +@media (max-width: 768px) { + .dealers-section { + padding: 60px 0; + } + + .become-dealer-section { + padding: 60px 0; + } + + .dealers-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .dealer-card { + padding: 25px; + } + + .section-intro h2 { + font-size: 2rem; + } + + .section-intro p { + font-size: 1.1rem; + } + + .become-dealer-text h2 { + font-size: 1.8rem; + } + + .contact-options { + align-items: center; + } + + .contact-options .btn { + width: 100%; + justify-content: center; + max-width: 300px; + } +} + +@media (max-width: 576px) { + .dealer-card { + padding: 20px; + } + + .dealer-actions { + flex-direction: column; + } + + .dealer-actions .btn { + width: 100%; + } + + .section-intro h2 { + font-size: 1.8rem; + } + + .become-dealer-text h2 { + font-size: 1.6rem; + } + + .hero h1 { + font-size: 2rem; + } + + .hero p { + font-size: 1.1rem; + } +} + +/* Animation for cards on scroll */ +@media (prefers-reduced-motion: no-preference) { + .dealer-card { + opacity: 0; + transform: translateY(30px); + animation: fadeInUp 0.6s ease forwards; + } + + .dealer-card:nth-child(1) { + animation-delay: 0.1s; + } + + .dealer-card:nth-child(2) { + animation-delay: 0.2s; + } + + .dealer-card:nth-child(3) { + animation-delay: 0.3s; + } + + @keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } + } +} + +/* Reviews section */ +.reviews { + padding: 60px 0; + background-color: var(--color-light-gray); +} + +.reviews .container { + max-width: 90%; + margin: 0 auto; +} + +.reviews h2 { + text-align: center; + color: var(--color-dark-blue); + font-size: 2.2rem; + margin-bottom: 50px; + font-weight: 600; +} + +.reviews-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 40px; + max-width: 1200px; + margin: 0 auto; +} + +.review-item { + background: var(--color-white); + padding: 30px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + border-left: 4px solid var(--color-dark-blue); +} + +.review-item:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); +} + +.review-item .stars { + color: var(--color-star); + font-size: 1.3rem; + margin-bottom: 20px; + letter-spacing: 2px; +} + +.review-item p { + color: var(--color-text-dark); + font-size: 0.8rem; + line-height: 1.6; + margin-bottom: 20px; + font-style: italic; + position: relative; +} + +.review-item p::before { + content: '"'; + font-size: 3rem; + color: var(--color-dark-blue); + position: absolute; + left: -15px; + top: -10px; + opacity: 0.3; + font-family: serif; +} + +.review-item p::after { + content: '"'; + font-size: 3rem; + color: var(--color-dark-blue); + position: absolute; + right: -10px; + bottom: -20px; + opacity: 0.3; + font-family: serif; +} + +.reviewer { + color: var(--color-dark-blue); + font-weight: 600; + font-size: 1.1rem; + text-align: right; + position: relative; +} + +.reviewer::before { + content: ''; + width: 40px; + height: 2px; + background-color: var(--color-dark-blue); + position: absolute; + right: 0; + top: -10px; +} + +/* Mobile responsiveness for reviews */ +@media (max-width: 768px) { + .reviews { + padding: 40px 0; + } + + .reviews h2 { + font-size: 1.8rem; + margin-bottom: 30px; + } + + .reviews-container { + grid-template-columns: 1fr; + gap: 25px; + } + + .review-item { + padding: 25px 20px; + } + + .review-item p { + font-size: 0.95rem; + } + + .review-item p::before, + .review-item p::after { + font-size: 2.5rem; + } +>>>>>>> development } \ No newline at end of file diff --git a/custom/css/style.css b/custom/css/style.css deleted file mode 100644 index 921efec..0000000 --- a/custom/css/style.css +++ /dev/null @@ -1,1458 +0,0 @@ -* { - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; - font-size: 16px; -} - -@font-face { - font-family: 'mont'; - src: url('font/Montserrat-VariableFont_wght.ttf'); -} - -@font-face { - font-family: 'gerb'; - src: url('font/Gerb.ttf'); -} - -@font-face { - font-family: 'gerb_bold'; - src: url('font/Gerb-Bold.ttf'); -} - -html { - height: 100%; -} - -body { - position: relative; - min-height: 100%; - color: #555555; - background-color: #e9e8e7; - margin: 0; - padding-bottom: 100px; - /* Same height as footer */ -} - -h1, h2, h3, h4, h5 { - color: #394352; -} - -.content-wrapper { - width: 1050px; - margin: 0 auto; -} - -.content-wrapper.error { - padding: 40px 0; -} - -header { - position: relative; -} - -header .content-wrapper { - display: flex; -} - -header h1, header img { - display: flex; - flex-grow: 1; - flex-basis: 0; - font-size: 20px; - margin: 0; - padding: 24px 0; -} - -header nav { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: center; - align-items: center; -} - -header nav a { - white-space: nowrap; - text-decoration: none; - color: #555555; - padding: 10px 10px; - margin: 0 10px; - font-family: 'gerb'; -} - -header nav a:hover { - border-bottom: 1px solid #d9d9d9; -} - -header .link-icons { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: flex-end; - align-items: center; - position: relative; -} - -header .link-icons .search i { - font-size: 18px; - padding: 9px; - border-radius: 50%; - cursor: pointer; -} - -header .link-icons .search i:hover { - background-color: #f7f7f7; -} - -header .link-icons .search input { - display: none; - border: 0; - border-bottom: 1px solid #EEEEEE; - padding: 10px 0; - max-width: 200px; - outline: none; - margin-right: 10px; -} - -header .link-icons .responsive-toggle { - display: none; -} - -header .link-icons a { - position: relative; - text-decoration: none; - color: #394352; - padding: 9px; - border-radius: 50%; - margin-left: 5px; -} - -header .link-icons a:hover { - background-color: #f2f2f2; -} - -header .link-icons a i { - font-size: 18px; -} - -header .link-icons a span { - display: inline-flex; - justify-content: center; - align-items: center; - text-align: center; - background-color: #63748e; - background-color: #eea965; - border-radius: 50%; - color: #000; - font-size: 12px; - width: 16px; - height: 16px; - font-weight: 500; - position: absolute; - top: 0; - right: 0; -} - -/*Header_menu items*/ -header_menu { - position: absolute; - top: 0; - left: 0; - z-index: 999; - width: 100%; -} - -header_menu .content-wrapper { - display: flex; -} - -header_menu h1, header_menu img { - display: flex; - flex-grow: 1; - flex-basis: 0; - font-size: 20px; - margin: 0; - padding: 24px 0; -} - -header_menu nav { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: center; - align-items: center; -} - -header_menu nav a { - white-space: nowrap; - text-decoration: none; - color: #555555; - padding: 10px 10px; - margin: 0 10px; - font-family: 'gerb'; -} - -header_menu nav a:hover { - border-bottom: 1px solid #d9d9d9; -} - -header_menu .link-icons { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: flex-end; - align-items: center; - position: relative; -} - -header_menu .link-icons .search i { - font-size: 18px; - color: #555555; - padding: 9px; - border-radius: 50%; - cursor: pointer; -} - -header_menu .link-icons .search i:hover { - background-color: #555555; - color: #394352; -} - -header_menu .link-icons .search input { - display: none; - border: 0; - border-bottom: 1px solid #EEEEEE; - padding: 10px 0; - max-width: 200px; - outline: none; - margin-right: 10px; -} - -header_menu .link-icons .responsive-toggle { - display: none; -} - -header_menu .link-icons a { - position: relative; - text-decoration: none; - color: #555555; - padding: 9px; - border-radius: 50%; - margin-left: 5px; -} - -header_menu .link-icons a:hover { - background-color: #f2f2f2; - color:#394352; -} - -header_menu .link-icons a i { - font-size: 18px; -} - -header_menu .link-icons a span { - display: inline-flex; - justify-content: center; - align-items: center; - text-align: center; - background-color: #63748e; - background-color: #eea965; - border-radius: 50%; - color: #000; - font-size: 12px; - width: 16px; - height: 16px; - font-weight: 500; - position: absolute; - top: 0; - right: 0; -} - -main .featured { - display: flex; - flex-direction: column; - background-repeat: no-repeat; - background-size: cover; - height: 700px; - align-items: center; - justify-content: center; - text-align: center; -} - -main .featured h2 { - display: inline-block; - margin: 0; - width: 1050px; - font-family: 'mont', "Courier Bold", Courier, Georgia, Times, "Times New Roman", sans-serif; - font-size: 68px; - color: #fda104; - padding-bottom: 10px; - font-weight: bold; -} -main .featured h5 { - font-family: 'Nunito',sans-serif; - color: #959B8E; - font-size: 16px; -} -main .featured p { - display: inline-block; - margin: 0; - width: 1050px; - font-size: 24px; - color: #FFFFFF; -} - -main .recentlyadded h2 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; - white-space: nowrap; -} - - -main .limited { - padding: 4px 7px; - border-radius: 4px; - background-color: #136b24; - font-weight: 500; - font-size: 12px; - color: #fff; - vertical-align: top; - margin-left: 20px; - font-style: italic; - white-space: nowrap; -} - - - -main .recentlyadded .products, main .products .products-wrapper { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - padding: 40px 0 0 0; - justify-content: center -} - -main .recentlyadded .products .product, main .products .products-wrapper .product { - display: block; - overflow: hidden; - text-decoration: none; - padding-bottom: 30px; - text-align: center; - margin: 5px; -} - -main .recentlyadded .products .product img, main .products .products-wrapper .product img { - transform: scale(1); - transition: transform 1s; -} - -main .products .product .name, main .products .products-wrapper .product .name { - display: block; - color: #555555; - padding: 20px 0 2px 0; - text-align: center; - font-family: 'gerb'; - word-wrap: break-word; -} - -main .recentlyadded .productname { - display: block; - color: #555555; - padding: 20px 0 2px 0; - text-align: center; - font-size: 15px; - font-family: gerb_bold; - max-width: 169px; - word-wrap: break-word; -} - -main .products .product .price, main .products .products-wrapper .product .price { - display: block; - color: #999999; - text-align: center; -} - -main .recentlyadded .productprice { - display: block; - color: #555555; - text-align: center; - font-size:20px; -} - -main .products .product .rrp, main .products .products-wrapper .product .rrp { - color: #BBBBBB; - text-decoration: line-through; -} - - -main .recentlyadded .productrrp { - color: #BBBBBB; - text-decoration: line-through; -} -main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img { - transform: scale(1.05); - transition: transform 1s; -} - -main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name { - text-decoration: underline; -} - -main > .product { - display: flex; - padding: 40px 0; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - background: white; - border-radius: 12px; - margin-bottom: 50px; - padding: 10px; - width: 95%; -} - -main > .product h1 { - font-size: 34px; - font-weight: normal; - margin: 0; - padding: 20px 0 10px 0; - font-family: 'gerb'; -} - -main > .product .product-img-large { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 500px; - mix-blend-mode: multiply; -} - -main > .product .product-small-imgs { - display: flex; - flex-flow: wrap; -} - -main > .product .product-small-imgs .product-img-small { - display: flex; - align-items: center; - justify-content: center; - flex-basis: 31%; - border: 1px solid #EEEEEE; - cursor: pointer; - margin: 20px 12px 0 0; - mix-blend-mode: multiply; -} - -main > .product .product-small-imgs .product-img-small:nth-child(3n) { - margin-right: 0; -} - -main > .product .product-small-imgs .product-img-small.selected { - border: 1px solid #c8c8c8; -} - -main > .product .product-img-large img, main > .product .product-img-small img { - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; - object-fit: contain; -} - -main > .product .product-imgs { - flex: 1; - padding: 15px; -} - -main > .product .product-wrapper { - padding-left: 25px; - flex: 1; -} - -main > .product .prices { - display: flex; -} - -main > .product .price { - display: block; - font-size: 22px; - color: #999999; -} - -main > .product .rrp { - color: #BBBBBB; - text-decoration: line-through; - font-size: 22px; - padding-left: 10px; -} - -main > .product form { - display: flex; - flex-flow: column; - margin: 25px 0 40px 0; -} - -main > .product form label { - padding-bottom: 10px; -} - -main > .product form select, main > .product form input[type="number"], main > .product form input[type="text"], main > .product form input[type="datetime-local"] { - width: 400px; - padding: 8px 10px; - margin-bottom: 15px; - border: 1px solid #d5d5d5; - color: #555555; - border-radius: 4px; - background-color: #fff; -} - -main > .product form .radio-checkbox { - display: flex; - flex-flow: wrap; - max-width: 400px; -} - -main > .product form .radio-checkbox input { - margin: 0 10px 10px 0; -} - -main > .product form .radio-checkbox label { - padding-right: 1px; -} - -main > .product form .btn { - margin-top: 10px; - width: 400px; - text-transform: uppercase; - padding: 16px; - background: #4a90e2; - color: white; - border: none; - border-radius: 8px; - font-size: 1.1rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s; -} - -main > .products h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; -} - -main > .products .products-header { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 40px; - font-size: 10px; -} - -main > .products .products-header p { - margin: 0; -} - -main > .products .products-header label { - padding-left: 20px; - font-size: 10px; -} - -main > .products .products-header select { - padding: 5px; - margin-left: 15px; - border: 1px solid #d5d5d5; - color: #555555; - border-radius: 4px; - font-size: 10px; -} - -main > .products .buttons { - text-align: right; - padding-bottom: 40px; -} - -main > .products .buttons a:first-child { - margin-right: 5px; -} - -main .cart h1, main .myaccount h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; -} - -main .cart table, main .myaccount table { - width: 100%; -} - -main .cart table thead td, main .myaccount table thead td { - padding: 30px 0; - border-bottom: 1px solid #EEEEEE; -} - -main .cart table thead td:last-child, main .myaccount table thead td:last-child { - text-align: right; -} - -main .cart table tbody td, main .myaccount table tbody td { - padding: 20px 0; - border-bottom: 1px solid #EEEEEE; -} - -main .cart table tbody td:last-child, main .myaccount table tbody td:last-child { - text-align: right; -} - -main .cart table .img, main .myaccount table .img { - width: 80px; - mix-blend-mode: multiply; -} - -main .cart table .remove, main .myaccount table .remove { - color: #777777; - font-size: 12px; - padding-top: 3px; -} - -main .cart table .remove:hover, main .myaccount table .remove:hover { - text-decoration: underline; -} - -main .cart table .price, main .cart table .options, main .myaccount table .price, main .myaccount table .options { - color: #999999; -} - -main .cart table .options, main .myaccount table .options { - font-size: 14px; - max-width: 200px; -} - -main .cart table a, main .myaccount table a { - text-decoration: none; - color: #555555; -} - -main .cart table input[type="number"], main .myaccount table input[type="number"] { - width: 68px; - padding: 10px; - border: 1px solid #d5d5d5; - color: #555555; - border-radius: 4px; -} - -main .cart .total, main .myaccount .total { - text-align: right; - padding: 30px 0 40px 0; -} - -main .cart .total .text, main .myaccount .total .text { - padding-right: 40px; - font-size: 18px; -} - -main .cart .total .price, main .myaccount .total .price { - font-size: 18px; - color: #999999; -} - -main .cart .total .note, main .myaccount .total .note { - display: block; - padding-top: 15px; -} - -main .cart .buttons, main .myaccount .buttons { - text-align: right; - padding-bottom: 40px; -} - -main .cart .buttons .btn, main .myaccount .buttons .btn { - margin: 0 0 10px 5px; -} - -main .placeorder h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; -} - -main .placeorder p { - text-align: center; -} - -main .checkout h1, main .myaccount h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; -} - -main .checkout .shipping-details, main .myaccount .shipping-details { - width: 600px; - display: flex; - flex-flow: wrap; - padding-bottom: 40px; -} - -main .checkout .shipping-details h2, main .myaccount .shipping-details h2 { - width: 100%; - font-weight: normal; - font-size: 20px; - padding: 30px 0 20px 0; - margin: 0 0 10px 0; - border-bottom: 1px solid #EEEEEE; -} - -main .checkout .shipping-details h2:first-child, main .myaccount .shipping-details h2:first-child { - padding: 20px 0 20px 0; -} - -main .checkout .shipping-details label, main .myaccount .shipping-details label { - display: block; - padding: 15px 0 10px 0; -} - -main .checkout .shipping-details .row1, main .checkout .shipping-details .row2, main .myaccount .shipping-details .row1, main .myaccount .shipping-details .row2 { - width: 50%; - display: inline-block; -} - -main .checkout .shipping-details .row1, main .myaccount .shipping-details .row1 { - padding-right: 10px; -} - -main .checkout .shipping-details .row2, main .myaccount .shipping-details .row2 { - padding-left: 10px; -} - -main .checkout .container { - display: flex; - align-items: flex-start; -} - -main .checkout .shipping-details { - margin-right: 25px; - width: 100%; -} - -main .checkout .payment-methods { - display: flex; - flex-flow: wrap; - width: 100%; - justify-content: space-between; -} - -main .checkout .payment-methods label { - text-decoration: none; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid #EEEEEE; - border-radius: 5px; - height: 60px; - width: 159px; - margin: 10px; - font-weight: 500; - color: #434f61; - padding: 0; - cursor: pointer; - text-align: center; -} - -main .checkout .payment-methods label .fa-stripe { - color: #6671E4; -} - -main .checkout .payment-methods label:nth-child(2), main .checkout .payment-methods label:nth-child(8) { - margin-left: 0; -} - -main .checkout .payment-methods label:nth-child(3n) { - margin-right: 0; -} - -main .checkout .payment-methods label:hover { - border: 1px solid #d5d5d5; -} - -main .checkout .payment-methods input { - position: absolute; - top: -9999px; - left: -9999px; - visibility: hidden; -} - -main .checkout .payment-methods input:checked + label { - border: 2px solid #7ed1a1; -} - -main .checkout .cart-details { - width: 90%; - box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15); - border-radius: 4px; - margin-left: 25px; - margin-bottom: 50px; -} - -main .checkout .cart-details h2 { - margin: 0; - padding: 23px 15px; - font-weight: 500; - border-bottom: 1px solid #EEEEEE; -} - -main .checkout .cart-details table { - width: 100%; - padding: 20px; -} - -main .checkout .cart-details table .price { - text-align: right; - font-weight: 500; -} - -main .checkout .cart-details table td { - padding: 5px; - mix-blend-mode: multiply; -} - -main .checkout .cart-details .discount-code { - padding: 0 23px 23px 23px; -} - -main .checkout .cart-details .discount-code .result { - display: block; - padding-top: 10px; -} - -main .checkout .cart-details .shipping-methods { - border-top: 1px solid #EEEEEE; - padding: 23px; -} - -main .checkout .cart-details .shipping-methods h3 { - margin: 0; - padding: 0 0 10px; - font-weight: 500; -} - -main .checkout .cart-details .shipping-methods .shipping-method { - padding-top: 10px; - margin: 0; -} - -main .checkout .cart-details .total { - border-top: 1px solid #EEEEEE; - display: flex; - justify-content: space-between; - padding: 23px; - font-size: 18px; - font-weight: 500; -} - -main .checkout .cart-details .alt { - font-size: 14px; - color: #a6aab1; - padding-left: 5px; -} - -main .checkout .cart-details .summary { - border-top: 1px solid #EEEEEE; - padding: 23px 0; -} - -main .checkout .cart-details .summary div { - display: flex; - justify-content: space-between; - padding: 10px 23px; -} - -main .checkout .cart-details .summary div span { - font-size: 14px; - font-weight: 500; -} - -main .checkout .cart-details .summary .discount span { - color: #de0000; -} - -main .checkout .cart-details .buttons { - margin: 0 23px 23px 23px; -} - -main .checkout .cart-details .buttons .btn { - width: 100%; -} - -main .myaccount { - display: flex; - flex-flow: wrap; -} - -main .myaccount .menu { - padding-right: 35px; - width: 300px; -} - -main .myaccount .menu a { - display: block; - text-decoration: none; - color: #888888; - padding: 15px 0; - border-bottom: 1px solid #f6f6f6; -} - -main .myaccount .menu a:hover { - color: #3c3c3c; -} - -main .myaccount .myorders, main .myaccount .mydownloads, main .myaccount .settings { - flex: 1; - padding-bottom: 50px; -} - -main .myaccount .myorders .order { - box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); - margin: 30px 0 30px 0; -} - -main .myaccount .myorders .order .order-header { - display: flex; - justify-content: space-between; - border-bottom: 1px solid #f6f6f6; -} - -main .myaccount .myorders .order .order-header > div { - display: flex; - padding: 15px; -} - -main .myaccount .myorders .order .order-header > div div { - padding-right: 35px; -} - -main .myaccount .myorders .order .order-header > div div:last-child { - padding-right: 0; -} - -main .myaccount .myorders .order .order-header > div div span { - display: block; - font-size: 14px; -} - -main .myaccount .myorders .order .order-items { - padding: 15px; -} - -main .myaccount .myorders .order .order-items table { - margin: 0; - padding: 0; -} - -main .myaccount .settings form { - max-width: 400px; -} - -main .myaccount .settings form .btn { - margin-top: 25px; -} - -main .myaccount form { - width: 100%; -} - -main .myaccount h2 { - width: 100%; - font-weight: normal; - font-size: 20px; - padding: 30px 0 20px 0; - margin: 0 0 10px 0; - border-bottom: 1px solid #EEEEEE; -} - -main .myaccount table { - padding-bottom: 40px; -} - -main .myaccount table tr:last-child td { - border-bottom: 0; -} - -main .myaccount table a { - display: inline-flex; - justify-content: center; - align-items: center; - height: 40px; - border: 1px solid #EEEEEE; - border-radius: 4px; - padding: 0 10px; - font-size: 14px; - color: #de0000; - margin: 0 5px 5px 0; -} - -main .myaccount table a:hover { - color: #ab0000; -} - -main .myaccount table a i { - display: inline-flex; - align-items: center; - justify-content: center; - align-self: center; - padding-right: 10px; - margin-right: 10px; - height: 100%; - border-right: 1px solid #EEEEEE; -} - -main .myaccount table .name { - word-break: break-all; -} - -main .myaccount .login-register { - display: flex; - width: 100%; - justify-content: space-between; - margin-top: 40px; -} - -main .myaccount .login-register h1 { - text-align: left; - padding-top: 15px; -} - -main .myaccount .login-register .login { - width: 100%; - border-right: 1px solid #f6f6f6; - padding-right: 45px; -} - -main .myaccount .login-register .register { - width: 100%; - padding-left: 45px; -} - -main .myaccount .login-register .btn { - margin-top: 25px; -} - -main p.error { - color: red; -} - -.img-modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); -} - -.img-modal div { - position: absolute; - display: flex; - flex-flow: column; - width: 800px; - height: 800px; - max-width: 90%; - max-height: 90%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #e9e8e7; - padding: 15px; -} - -.img-modal div a { - display: inline-flex; - align-self: flex-end; - text-decoration: none; - font-size: 34px; - line-height: 26px; - color: #bbbbbb; -} - -.img-modal div a:hover { - color: #a2a2a2; -} - -.img-modal div img { - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - object-fit: contain; - padding-top: 20px; - padding-bottom: 25px; -} - -.btn { - text-decoration: none; - background: #03337a; - border: 0; - color: #FFFFFF; - padding: 11px 16px; - font-size: 14px; - font-weight: 500; - border-radius: 4px; - cursor: pointer; -} - -.btn:hover { - background: #444954; -} - -.btn:disabled { - background: #ddd; -} - -.btn2 { - text-decoration: none; - background: #03337a; - border: 0; - color: #FFFFFF; - padding: 1px 1px; - font-size: 18px; - font-weight: 500; - border-radius: 4px; - cursor: pointer; - font-family: good; - } - .btn2:hover { - background: #444954; - } - -.form-label { - display: block; - padding: 20px 0 10px 0; -} - -.form-field { - width: 100%; - padding: 10px; - border: 1px solid #d5d5d5; - border-radius: 4px; - background-color: #fff; -} - -footer { - position: absolute; - border-top: 1px solid #e9e8e7; - width: 100%; -} - -footer a { - text-decoration: none; - color: #555555; -} - -footer a:hover { - text-decoration: underline; -} -/* Responsive CSS below */ -@media screen and (max-width: 1050px){ - main .recentlyadded .products .product, main .products .products-wrapper .product { - margin: 0px; - } -} - -@media screen and (max-width: 1050px) { - .rhide { - display: none; - } - .content-wrapper { - width: 100%; - padding: 0 10px; - } - header { - justify-content: space-between; - } - header h1 { - font-size: 16px; - flex-basis: auto; - } - header nav { - display: none; - position: absolute; - left: 0; - top: calc(100% + 1px); - width: 100%; - background-color: #e9e8e7; - } - header nav a { - display: block; - padding: 10px 12px; - margin: 0; - border-bottom: 1px solid #f6f6f6; - } - header .link-icons { - display: inline-flex; - width: 100px; - } - header .link-icons .responsive-toggle { - display: block; - } - header .link-icons .search input { - max-width: 150px; - } - header_menu { - justify-content: space-between; - } - header_menu h1 { - font-size: 16px; - flex-basis: auto; - } - header_menu nav { - display: none; - position: absolute; - left: 0; - top: calc(100% + 1px); - width: 100%; - background-color: #e9e8e7; - } - header_menu nav a { - display: block; - padding: 10px 12px; - margin: 0; - border-bottom: 1px solid #f6f6f6; - } - header_menu .link-icons { - display: inline-flex; - width: 100px; - } - header_menu .link-icons .responsive-toggle { - display: block; - } - header_menu .link-icons .search input { - max-width: 150px; - } - main .recentlyadded .products, main .products .products-wrapper { - justify-content: center; - } - main .recentlyadded .products .product, main .products .products-wrapper .product { - width: auto; - } - main .featured { - height: 400px; - } - main .featured h2 { - font-size: 40px; - width: 100%; - padding: 0 10px; - } - main .featured p { - font-size: 22px; - width: 100%; - padding: 0 10px; - } - main > .products .products-header { - flex-flow: column; - } - main > .products .products-header p { - padding-bottom: 10px; - } - main > .products .products-header form { - display: flex; - flex-flow: column; - } - main > .products .products-header form label { - padding-top: 15px; - } - main > .product { - padding: 0 10px; - flex-flow: column; - } - main > .product .product-imgs { - padding: 20px 10px 0 10px; - } - main > .product .product-imgs .product-img-large { - height: 300px; - } - main > .product .product-imgs .product-small-imgs .product-img-small { - height: 80px; - flex-basis: 30%; - } - main > .product form input[type="number"], main > .product form input[type="text"], main > .product form input[type="datetime-local"], main > .product form input[type="submit"], main > .product form select { - width: 100%; - } - main > .product .product-wrapper { - padding: 0; - } - main .cart table input[type="number"] { - width: 40px; - } - main .checkout .container, main .myaccount .container { - flex-flow: column; - } - main .checkout .shipping-details .payment-methods, main .myaccount .shipping-details .payment-methods { - flex-flow: column; - } - main .checkout .shipping-details .payment-methods label, main .myaccount .shipping-details .payment-methods label { - margin: 0 0 10px 0; - } - main .checkout .cart-details, main .myaccount .cart-details { - margin: 0 0 40px 0; - width: 100%; - } - main .checkout form, main .myaccount form { - width: 100%; - } - main .myaccount .login-register { - flex-flow: column; - } - main .myaccount .login-register .login { - border-right: 0; - padding: 10px; - } - main .myaccount .login-register .register { - padding: 10px; - } - main .myaccount .menu { - width: 100%; - padding-right: 0; - } -} - -.about-wrapper{ - display: flex; - justify-content: center; - align-items: center; -} - -.add_products { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - padding: 40px 0 0 0; -} - -.add_products h2 { - display: block; - font-weight: normal; - margin: 0; - width: 100%; -} - -.add_product{ - display: block; - overflow: hidden; - text-decoration: none; - padding: 10px; - text-align: center; - mix-blend-mode: multiply; - width: min-content; -} - -.add_product a{ - text-decoration: none; -} - -.add_name { - display: block; - color: #555555; - text-align: center; - font-size: 10px; -} - -.add_price { - display: block; - color: #999999; - text-align: center; - font-size: 10px; -} - -.add_rrp { - color: #BBBBBB; - text-decoration: line-through; - font-size: 10px; -} - -.add_product input[type='submit']{ - border-radius: 90px; - background-color: green; - color: #fff; - border: none; - position: relative; - top: -15px; - left: 20px; - z-index: 999; -} - -.top { - max-width: 50%; - text-align: left; - margin: 40px; -} - - -.add_samples{ - overflow-x: scroll; - overflow-y: hidden; - white-space: nowrap; - width:60%; - display: inline-block; - vertical-align: middle; -} - -.add_sample{ - width:fit-content; - display: inline-block; - padding: 10px; - text-align: center; - mix-blend-mode: multiply; -} - -.add_sample input[type='submit']{ - border-radius: 90px; - background-color: green; - color: #fff; - border: none; - position: relative; - top: -15px; - left: 20px; - z-index: 999; -} - -.add_sample a{ - text-decoration: none; -} - -.add_sample_button{ - vertical-align: middle; - display: inline-block; -} - -.scrollButton{ - text-decoration: none; - background: #2e38462b; - border: 0; - color: #FFFFFF; - padding: 11px 5px; - font-size: 14px; - font-weight: 500; - border-radius: 4px; - cursor: pointer; -} \ No newline at end of file diff --git a/custom/css/style.scss b/custom/css/style.scss deleted file mode 100644 index 963ffad..0000000 --- a/custom/css/style.scss +++ /dev/null @@ -1,974 +0,0 @@ -$font: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; -$font-size: 16px; -$background-color: #FFFFFF; -$content-wrapper-width: 1050px; -$content-border-color: #EEEEEE; -$text-color: #555555; -$header-color: #394352; -$price-color: #999999; -$rrp-color: #BBBBBB; -$featured-header-font: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", sans-serif; -$featured-header-color: #FFFFFF; -$btn-color: #4b505c; -* { - box-sizing: border-box; - font-family: $font; - font-size: $font-size; -} -html { - height: 100%; -} -body { - position: relative; - min-height: 100%; - color: $text-color; - background-color: $background-color; - margin: 0; - padding-bottom: 100px; /* Same height as footer */ -} -h1, h2, h3, h4, h5 { - color: $header-color; -} -.content-wrapper { - width: $content-wrapper-width; - margin: 0 auto; - &.error { - padding: 40px 0; - } -} -header { - position: relative; - border-bottom: 1px solid $content-border-color; - .content-wrapper { - display: flex; - } - h1, img { - display: flex; - flex-grow: 1; - flex-basis: 0; - font-size: 20px; - margin: 0; - padding: 24px 0; - } - nav { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: center; - align-items: center; - a { - white-space: nowrap; - text-decoration: none; - color: $text-color; - padding: 10px 10px; - margin: 0 10px; - &:hover { - border-bottom: 1px solid darken($background-color, 15); - } - } - } - .link-icons { - display: flex; - flex-grow: 1; - flex-basis: 0; - justify-content: flex-end; - align-items: center; - position: relative; - .search { - i { - font-size: 18px; - padding: 9px; - border-radius: 50%; - cursor: pointer; - &:hover { - background-color: darken($background-color, 3); - } - } - input { - display: none; - border: 0; - border-bottom: 1px solid $content-border-color; - padding: 10px 0; - max-width: 200px; - outline: none; - margin-right: 10px; - } - } - .responsive-toggle { - display: none; - } - a { - position: relative; - text-decoration: none; - color: #394352; - padding: 9px; - border-radius: 50%; - margin-left: 5px; - &:hover { - background-color: darken($background-color, 5); - } - i { - font-size: 18px; - } - span { - display: inline-flex; - justify-content: center; - align-items: center; - text-align: center; - background-color: lighten($header-color, 20); - background-color: #eea965; - border-radius: 50%; - color: #000; - font-size: 12px; - width: 16px; - height: 16px; - font-weight: 500; - position: absolute; - top: 0; - right: 0; - } - } - } -} -main { - .featured { - display: flex; - flex-direction: column; - background-repeat: no-repeat; - background-size: cover; - height: 500px; - align-items: center; - justify-content: center; - text-align: center; - h2 { - display: inline-block; - margin: 0; - width: $content-wrapper-width; - font-family: $featured-header-font; - font-size: 68px; - color: $featured-header-color; - padding-bottom: 10px; - } - p { - display: inline-block; - margin: 0; - width: $content-wrapper-width; - font-size: 24px; - color: $featured-header-color; - } - } - .recentlyadded { - h2 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; - border-bottom: 1px solid $content-border-color; - } - } - .recentlyadded .products, .products .products-wrapper { - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 40px 0 0 0; - .product { - display: block; - overflow: hidden; - text-decoration: none; - width: 25%; - padding-bottom: 60px; - img { - transform: scale(1.0); - transition: transform 1s; - } - .name { - display: block; - color: $text-color; - padding: 20px 0 2px 0; - } - .price { - display: block; - color: $price-color; - } - .rrp { - color: $rrp-color; - text-decoration: line-through; - } - &:hover { - img { - transform: scale(1.05); - transition: transform 1s; - } - .name { - text-decoration: underline; - } - } - } - } - > .product { - display: flex; - padding: 40px 0; - h1 { - font-size: 34px; - font-weight: normal; - margin: 0; - padding: 20px 0 10px 0; - } - .product-img-large { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 500px; - } - .product-small-imgs { - display: flex; - flex-flow: wrap; - .product-img-small { - display: flex; - align-items: center; - justify-content: center; - flex-basis: 31%; - border: 1px solid $content-border-color; - cursor: pointer; - margin: 20px 12px 0 0; - &:nth-child(3n) { - margin-right: 0; - } - &.selected { - border: 1px solid darken($content-border-color, 15); - } - } - } - .product-img-large img, .product-img-small img { - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; - object-fit: contain; - } - .product-imgs { - flex: 1; - padding: 15px; - } - .product-wrapper { - padding-left: 25px; - flex: 1; - } - .prices { - display: flex; - } - .price { - display: block; - font-size: 22px; - color: $price-color; - } - .rrp { - color: $rrp-color; - text-decoration: line-through; - font-size: 22px; - padding-left: 10px; - } - form { - display: flex; - flex-flow: column; - margin: 25px 0 40px 0; - label { - padding-bottom: 10px; - } - select, input[type="number"], input[type="text"], input[type="datetime-local"] { - width: 400px; - padding: 8px 10px; - margin-bottom: 15px; - border: 1px solid darken($content-border-color, 10); - color: $text-color; - border-radius: 4px; - background-color: #fff; - } - .radio-checkbox { - display: flex; - flex-flow: wrap; - max-width: 400px; - input { - margin: 0 10px 10px 0; - } - label { - padding-right: 15px; - } - } - .btn { - margin-top: 10px; - width: 400px; - text-transform: uppercase; - } - } - } - > .products { - h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; - } - .products-header { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 40px; - p { - margin: 0; - } - label { - padding-left: 20px; - } - select { - padding: 5px; - margin-left: 15px; - border: 1px solid darken($content-border-color, 10); - color: $text-color; - border-radius: 4px; - } - } - .buttons { - text-align: right; - padding-bottom: 40px; - a:first-child { - margin-right: 5px; - } - } - } - .cart, .myaccount { - h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; - } - table { - width: 100%; - thead td { - padding: 30px 0; - border-bottom: 1px solid $content-border-color; - &:last-child { - text-align: right; - } - } - tbody td { - padding: 20px 0; - border-bottom: 1px solid $content-border-color; - &:last-child { - text-align: right; - } - } - .img { - width: 80px; - } - .remove { - color: #777777; - font-size: 12px; - padding-top: 3px; - &:hover { - text-decoration: underline; - } - } - .price, .options { - color: $price-color; - } - .options { - font-size: 14px; - max-width: 200px; - } - a { - text-decoration: none; - color: $text-color; - } - input[type="number"] { - width: 68px; - padding: 10px; - border: 1px solid darken($content-border-color, 10); - color: $text-color; - border-radius: 4px; - } - } - .total { - text-align: right; - padding: 30px 0 40px 0; - .text { - padding-right: 40px; - font-size: 18px; - } - .price { - font-size: 18px; - color: $price-color; - } - .note { - display: block; - padding-top: 15px; - } - } - .buttons { - text-align: right; - padding-bottom: 40px; - .btn { - margin: 0 0 10px 5px; - } - } - } - .placeorder { - h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; - } - p { - text-align: center; - } - } - .checkout, .myaccount { - h1 { - display: block; - font-weight: normal; - margin: 0; - padding: 40px 0; - font-size: 24px; - text-align: center; - width: 100%; - } - .shipping-details { - width: 600px; - display: flex; - flex-flow: wrap; - padding-bottom: 40px; - h2 { - width: 100%; - font-weight: normal; - font-size: 20px; - padding: 30px 0 20px 0; - margin: 0 0 10px 0; - border-bottom: 1px solid $content-border-color; - &:first-child { - padding: 20px 0 20px 0; - } - } - label { - display: block; - padding: 15px 0 10px 0; - } - .row1, .row2 { - width: 50%; - display: inline-block; - } - .row1 { - padding-right: 10px; - } - .row2 { - padding-left: 10px; - } - } - } - .checkout { - .container { - display: flex; - align-items: flex-start; - } - .shipping-details { - margin-right: 25px; - width: 100%; - } - .payment-methods { - display: flex; - flex-flow: wrap; - width: 100%; - justify-content: space-between; - label { - text-decoration: none; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid $content-border-color; - border-radius: 5px; - height: 60px; - width: 159px; - margin: 10px; - font-weight: 500; - color: lighten($header-color, 5); - padding: 0; - cursor: pointer; - .fa-stripe { - color: #6671E4; - } - &:nth-child(2), &:nth-child(8) { - margin-left: 0; - } - &:nth-child(3n) { - margin-right: 0; - } - &:hover { - border: 1px solid darken($content-border-color, 10); - } - } - input { - position: absolute; - top: -9999px; - left: -9999px; - visibility: hidden; - &:checked + label { - border:2px solid #7ed1a1; - } - } - } - .cart-details { - width: 90%; - box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15); - border-radius: 4px; - margin-left: 25px; - margin-bottom: 50px; - h2 { - margin: 0; - padding: 23px 15px; - font-weight: 500; - border-bottom: 1px solid $content-border-color; - } - table { - width: 100%; - padding: 20px; - .price { - text-align: right; - font-weight: 500; - } - td { - padding: 5px; - } - } - .discount-code { - padding: 0 23px 23px 23px; - .result { - display: block; - padding-top: 10px; - } - } - .shipping-methods { - border-top: 1px solid $content-border-color; - padding: 23px; - h3 { - margin: 0; - padding: 0 0 10px; - font-weight: 500; - } - .shipping-method { - padding-top: 10px; - margin: 0; - } - } - .total { - border-top: 1px solid $content-border-color; - display: flex; - justify-content: space-between; - padding: 23px; - font-size: 18px; - font-weight: 500; - } - .alt { - font-size: 14px; - color: mix($header-color, #fff, 45); - padding-left: 5px; - } - .summary { - border-top: 1px solid $content-border-color; - padding: 23px 0; - div { - display: flex; - justify-content: space-between; - padding: 10px 23px; - span { - font-size: 14px; - font-weight: 500; - } - } - .discount span { - color: #de0000; - } - } - .buttons { - margin: 0 23px 23px 23px; - .btn { - width: 100%; - } - } - } - } - .myaccount { - display: flex; - flex-flow: wrap; - .menu { - padding-right: 35px; - width: 300px; - a { - display: block; - text-decoration: none; - color: lighten($text-color, 20); - padding: 15px 0; - border-bottom: 1px solid lighten($content-border-color,3); - &:hover { - color: darken($text-color, 10); - } - } - } - .myorders, .mydownloads, .settings { - flex: 1; - padding-bottom: 50px; - } - .myorders { - .order { - box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15); - margin: 30px 0 30px 0; - .order-header { - display: flex; - justify-content: space-between; - border-bottom: 1px solid lighten($content-border-color,3); - > div { - display: flex; - padding: 15px; - div { - padding-right: 35px; - &:last-child { - padding-right: 0; - } - span { - display: block; - font-size: 14px; - } - } - } - } - .order-items { - padding: 15px; - table { - margin: 0; - padding: 0; - } - } - } - } - .settings { - form { - max-width: 400px; - .btn { - margin-top: 25px; - } - } - } - form { - width: 100%; - } - h2 { - width: 100%; - font-weight: normal; - font-size: 20px; - padding: 30px 0 20px 0; - margin: 0 0 10px 0; - border-bottom: 1px solid $content-border-color; - } - table { - padding-bottom: 40px; - tr:last-child td { - border-bottom: 0; - } - a { - display: inline-flex; - justify-content: center; - align-items: center; - height: 40px; - border: 1px solid $content-border-color; - border-radius: 4px; - padding: 0 10px; - font-size: 14px; - color: #de0000; - margin: 0 5px 5px 0; - &:hover { - color: darken(#de0000, 10); - } - i { - display: inline-flex; - align-items: center; - justify-content: center; - align-self: center; - padding-right: 10px; - margin-right: 10px; - height: 100%; - border-right: 1px solid $content-border-color; - } - } - .name { - word-break: break-all; - } - } - .login-register { - display: flex; - width: 100%; - justify-content: space-between; - margin-top: 40px; - h1 { - text-align: left; - padding-top: 15px; - - } - .login { - width: 100%; - border-right: 1px solid lighten($content-border-color, 3); - padding-right: 45px; - } - .register { - width: 100%; - padding-left: 45px; - } - .btn { - margin-top: 25px; - } - } - } - p.error { - color: red; - } -} -.img-modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,.7); - div { - position: absolute; - display: flex; - flex-flow: column; - width: 800px; - height: 800px; - max-width: 90%; - max-height: 90%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #FFFFFF; - padding: 15px; - a { - display: inline-flex; - align-self: flex-end; - text-decoration: none; - font-size: 34px; - line-height: 26px; - color: lighten($text-color, 40); - &:hover { - color: lighten($text-color, 30); - } - } - img { - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - object-fit: contain; - padding-top: 20px; - padding-bottom: 25px; - } - } -} -.btn { - text-decoration: none; - background: $btn-color; - border: 0; - color: #FFFFFF; - padding: 11px 16px; - font-size: 14px; - font-weight: 500; - border-radius: 4px; - cursor: pointer; - &:hover { - background: darken($btn-color, 3); - } - &:disabled { - background: #ddd; - } -} -.form-label { - display: block; - padding: 20px 0 10px 0; -} -.form-field { - width: 100%; - padding: 10px; - border: 1px solid darken($content-border-color, 10); - border-radius: 4px; - background-color: #fff; -} -footer { - position: absolute; - bottom: 0; - border-top: 1px solid $content-border-color; - padding: 20px 0; - width: 100%; - a { - text-decoration: none; - color: $text-color; - &:hover { - text-decoration: underline; - } - } -} -/* Responsive CSS below */ -@media screen and (max-width: $content-wrapper-width) { - .rhide { - display: none; - } - .content-wrapper { - width: 100%; - padding: 0 10px; - } - header { - justify-content:space-between; - h1 { - font-size: 16px; - flex-basis: auto; - } - nav { - display: none; - position: absolute; - left: 0; - top: calc(100% + 1px); - width: 100%; - background-color: #FFFFFF; - a { - display: block; - padding: 10px 12px; - margin: 0; - border-bottom: 1px solid lighten($content-border-color, 3); - } - } - .link-icons { - display: inline-flex; - width: 100px; - .responsive-toggle { - display: block; - } - .search input { - max-width: 150px; - } - } - } - main { - .recentlyadded .products, .products .products-wrapper { - justify-content: center; - .product { - width: auto; - } - } - .featured { - height: 300px; - h2 { - font-size: 48px; - width: 100%; - padding: 0 10px; - } - p { - font-size: 22px; - width: 100%; - padding: 0 10px; - } - } - > .products { - .products-header { - flex-flow: column; - p { - padding-bottom: 10px; - } - form { - display: flex; - flex-flow: column; - label { - padding-top: 15px; - } - } - } - } - > .product { - padding: 0 10px; - flex-flow: column; - .product-imgs { - padding: 20px 10px 0 10px; - .product-img-large { - height: 300px; - } - .product-small-imgs { - .product-img-small { - height: 80px; - flex-basis: 30%; - } - } - } - form { - input[type="number"], input[type="text"], input[type="datetime-local"], input[type="submit"], select { - width: 100%; - } - } - .product-wrapper { - padding: 0; - } - } - .cart { - table { - input[type="number"] { - width: 40px; - } - } - } - .checkout, .myaccount { - .container { - flex-flow: column; - } - .shipping-details { - .payment-methods { - flex-flow: column; - label { - margin: 0 0 10px 0; - } - } - } - .cart-details { - margin: 0 0 40px 0; - width: 100%; - } - form { - width: 100%; - } - } - .myaccount { - .login-register { - flex-flow: column; - .login { - border-right: 0; - padding: 10px; - } - .register { - padding: 10px; - } - } - .menu { - width: 100%; - padding-right: 0; - } - } - } -} \ No newline at end of file diff --git a/custom/customfunctions.php b/custom/customfunctions.php index 1607107..f02ad63 100644 --- a/custom/customfunctions.php +++ b/custom/customfunctions.php @@ -78,6 +78,7 @@ $view = ' // Show loading when page initially loads showLoading(); +<<<<<<< HEAD // Hide loading when everything is loaded window.addEventListener(\'load\', hideLoading); @@ -92,6 +93,22 @@ $view = ' interceptNetworkRequests(); +======= + + // Hide loading when everything is loaded + window.addEventListener(\'load\', hideLoading); + + // In case the page loads very quickly + setTimeout(hideLoading, 500); + + // Intercept form submissions + setupFormInterception(); + + // Intercept fetch and XMLHttpRequest + interceptNetworkRequests(); + + +>>>>>>> development // Intercept all form submissions function setupFormInterception() { const forms = document.querySelectorAll(\'form\'); @@ -176,7 +193,11 @@ $view = '
★★★★★ +<<<<<<< HEAD '.($header_rating ?? 'Client rate 4.7/5.0').' +======= + '.($header_rating ?? 'Client rate 5.0/5.0').' +>>>>>>> development
@@ -193,6 +214,10 @@ $view = ' @@ -250,6 +275,10 @@ $view = '