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..761948e 100644
--- a/cart.php
+++ b/cart.php
@@ -181,6 +181,7 @@ $view .= '
';
}
$view .= '
'.currency_code.''.number_format($product['options_price'] * $product['quantity'],2).' |
+ 🗑️ |
';
}
}
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..c08346a 100644
--- a/custom/css/main.css
+++ b/custom/css/main.css
@@ -81,7 +81,7 @@ body {
/* Container */
.container {
- max-width: 1200px;
+ max-width: 90%;
margin: 0 auto;
padding: 0 15px;
}
@@ -168,11 +168,11 @@ nav {
background-image: url('../../custom/assets/header.jpg');
background-size: cover;
background-position: center;
- height: 500px;
+ height: 60vh;
display: flex;
align-items: center;
position: relative;
- max-width: 1200px; /* Match container max-width to constrain image */
+ max-width: 90%; /* Match container max-width to constrain image */
margin: 0 auto; /* Center the hero section */
}
@@ -186,6 +186,10 @@ nav {
.hero h1 {
color: var(--color-white);
font-size: 42px;
+ 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);
line-height: 1.2;
margin-bottom: 20px;
}
@@ -212,10 +216,15 @@ nav {
.store-description {
text-align: center;
padding: 50px 20px;
- max-width: 600px;
+ max-width: 1000px;
margin: 0 auto;
}
+.section-footer {
+ text-align: center;
+ margin-top: 20px;
+}
+
.store-description p {
font-size: 20px;
line-height: 1.6;
@@ -411,7 +420,7 @@ nav {
min-width: 140px;
display: none;
z-index: 20;
- margin-top: 8px;
+ margin-top: 2px;
}
.language-dropdown.show {
@@ -446,6 +455,17 @@ nav {
display: block;
}
+/* 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;
+}
+
/* Responsive adjustments */
@media (max-width: 768px) {
.language-selector {
@@ -459,7 +479,7 @@ nav {
}
.watches-section {
- max-width: 1200px;
+ max-width: 90%;
margin: 0 auto;
padding: 20px 15px;
background-color: var(--color-lighter-gray);
@@ -527,6 +547,11 @@ nav {
color: var(--color-dark-gray);
}
+.price-from{
+ font-size: 0.8em;
+ opacity: 0.8;
+}
+
.slider-nav {
position: absolute;
top: 50%;
@@ -601,6 +626,9 @@ nav {
padding: 0 0px 10px 10px;
padding-bottom: 10px;
border-bottom: solid 2px var(--color-dark-blue);
+ margin-top: 5em;
+ height: 12em;
+ margin-bottom: 5em;
}
.feature-item h2 {
@@ -631,14 +659,14 @@ nav {
.watch-ad-section {
display: flex;
flex-direction: column;
- max-width: 1200px;
+ max-width: 90%;
margin: 0 auto;
}
.top-section {
position: relative;
height: 400px;
- background-image: url('../../custom/assets/watchad1.jpg');
+ background-image: url('../../custom/assets/comp2.png');
background-size: cover;
background-position: center;
display: flex;
@@ -667,7 +695,10 @@ nav {
.top-content h2 {
font-size: 2.5rem;
- 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);
margin-bottom: 20px;
line-height: 1.2;
}
@@ -690,9 +721,12 @@ nav {
.bottom-content h2 {
font-size: 2.5rem;
- font-weight: 600;
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);
}
.btn {
display: inline-block;
@@ -1267,7 +1301,7 @@ nav {
/* Main Product Container */
.product.content-wrapper {
- max-width: 1200px;
+ max-width: 90%;
margin: 2rem auto;
display: grid;
grid-template-columns: 1fr 1fr;
@@ -1640,7 +1674,7 @@ nav {
/* Global Reset and Base Styles */
.cart.content-wrapper {
- max-width: 1200px;
+ max-width: 90%;
margin: 0 auto;
padding: 2rem;
color: var(--color-text-dark);
@@ -1653,7 +1687,7 @@ nav {
/* Header Styles */
.cart-container {
- max-width: 1200px;
+ max-width: 90%;
margin: 2rem auto;
padding: 0 1rem;
}
@@ -1780,94 +1814,309 @@ nav {
color: var(--color-primary);
}
- /* Extras Section */
- .cart .add_products {
- background-color: var(--color-lighter-gray);
- padding: 2rem;
- margin-bottom: 2rem;
- border: 1px solid var(--color-gray);
- }
-
- .cart .add_products h2 {
- font-size: 1.5rem;
- margin-bottom: 1.5rem;
- color: var(--color-heading);
- text-align: center !important;
- text-transform: uppercase;
- letter-spacing: 1px;
- position: relative;
- }
-
- .cart .add_products h2:after {
- content: "";
- display: block;
- width: 50px;
- height: 1px;
- background-color: var(--color-primary);
- margin: 10px auto 0;
- }
-
- .cart .add_product {
- display: flex;
- align-items: center;
- padding: 1rem;
- border-bottom: 1px solid var(--color-gray);
- margin-bottom: 1rem;
- transition: background-color 0.3s ease;
- }
-
- .cart .add_product:hover {
- background-color: var(--color-light-gray);
- }
.cart .add_product img {
min-width: 60px;
max-width: 60px !important;
height: auto;
- margin-right: 1rem;
object-fit: cover;
transition: opacity 0.3s ease;
}
- .cart .add_product img:hover {
- opacity: 0.8;
+/* 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);
}
- .cart .add_product form {
- margin: 0 1rem;
+ .add_product {
+ width: calc(25% - 0.75rem);
}
- .cart .add_product input[type="submit"] {
- width: 30px;
- height: 30px;
- background-color: var(--color-primary);
- color: var(--color-white);
- font-size: 1.2rem;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background-color 0.3s ease;
+ .add_product:nth-child(5n+2) { /* h2 + 4 products */
+ margin-right: 0;
}
- .cart .add_product input[type="submit"]:hover {
- background-color: var(--color-primary-dark);
+ .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);
}
- .cart .add_name {
- font-weight: 400;
- color: var(--color-text-dark);
+ .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;
- flex-grow: 1;
}
- .cart .add_price {
- font-weight: 600;
- color: var(--color-primary);
- white-space: nowrap;
+ .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;
+ }
+}
+
/* Cart Totals */
.cart .total {
border-top: 2px solid var(--color-dark-text);
@@ -2098,7 +2347,7 @@ nav {
.checkout {
font-family: 'Inter', 'Helvetica Neue', sans-serif;
color: var(--color-text-dark);
- max-width: 1200px;
+ max-width: 90%;
margin: 0 auto;
padding: 2rem 1rem;
}
@@ -2498,7 +2747,7 @@ nav {
}
.content-section {
- max-width: 1200px;
+ max-width: 90%;
margin: 40px auto;
line-height: 1.6;
}
@@ -2572,7 +2821,7 @@ nav {
.myaccount.content-wrapper {
- max-width: 1200px;
+ max-width: 90%;
margin: 3rem auto;
padding: 0 1.5rem;
}
@@ -2959,4 +3208,549 @@ input[type="password"] {
.order.new {
animation: highlight 2s ease-out;
+}
+
+/* ===================================
+ 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;
+ }
}
\ No newline at end of file
diff --git a/custom/css/style.css b/custom/css/style.css
deleted file mode 100644
index bb5ba2b..0000000
--- a/custom/css/style.css
+++ /dev/null
@@ -1,1692 +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;
-}
-
-/* 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;
- }
-}
-
-.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..f30dfd5 100644
--- a/custom/customfunctions.php
+++ b/custom/customfunctions.php
@@ -176,7 +176,7 @@ $view = '
★★★★★
- '.($header_rating ?? 'Client rate 4.7/5.0').'
+ '.($header_rating ?? 'Client rate 5.0/5.0').'
@@ -193,6 +193,7 @@ $view = '
@@ -250,6 +251,7 @@ $view = '
- '.$home_text.'
- '.$products_text.'
+ - '.($dealer_text ?? 'Dealers').'
- '.$about_text.'
- Cart
- Account
@@ -434,6 +436,7 @@ function template_menu(){
$num_items_in_cart = isset($_SESSION['cart']) ? array_sum(array_column($_SESSION['cart'], 'quantity')) : 0;
$home_link = url('index.php');
$products_link = url(link_to_collection);
+ $dealer_link = url('index.php?page=dealers');
$about_link = url('index.php?page=about');
$myaccount_link = url('index.php?page=myaccount');
$cart_link = url('index.php?page=cart');
@@ -461,6 +464,7 @@ function template_menu(){
@@ -512,7 +516,7 @@ function template_menu(){
// Template footer
function template_footer() {
include './custom/translations/translations_'.strtoupper($_SESSION['country_code']).'.php';
-
+ /*
$footer = '
@@ -536,7 +540,9 @@ function template_footer() {
-
+ ';
+ */
+ $footer = '