Untitled
unknown
plain_text
22 days ago
50 kB
3
Indexable
/* ========================================================================== RESPONSIVE DESIGN ========================================================================== */ @media screen and (max-width: 1280px) { .landing-image { position: absolute; top: 24%; left: 20%; width: 100% !important; /* Added !important to override other styles */ max-width: none; /* Remove max-width restriction */ height: auto; object-fit: contain; transform: none; /* Remove any transform that might affect width */ } } @media screen and (max-width: 1559px) { .landing-image { position: absolute; top: 40%; left: 40%; object-fit: contain; transform: none; /* Remove any transform that might affect width */ } } /* Medium-Large Screens (1201px - 1440px) */ @media screen and (max-width: 1440px) { /* Landing/Hero Section */ #landing { min-height: 90vh; position: relative; overflow: hidden; background: #FFFFFF; } .landing-content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 120px 5% 0; position: relative; z-index: 2; } .landing-text { max-width: 450px; margin-top: -70px; position: relative; z-index: 2; } .landing-text h1 { font-size: 33px; line-height: 1.3; color: #018E47; margin-bottom: -10px; margin-left: -40px; max-width: 350px; margin-top: -5px; } .landing-text p { font-size: 23px; line-height: 1.4; color: #181818; margin-bottom: 10px; max-width: 350px; margin-left: -40px; } .learn-more-btn { scale: 0.7; margin-left: -90px; margin-top: -50px; } .landing-image { position: absolute; right: 2%; top: 32%; width: 52%; height: 68%; z-index: 1; } .map-section { width: 140%; max-width: 1720px; height: 1030px; scale: 0.7; right: 17%; top: -150px; } .partners-section { scale: 0.7; margin-top: -380px; /* Reduced margin-top to bring it closer to map section */ margin-left: 3%; } /* Stats Section */ .stat-box { scale: 0.9; margin-bottom: -30px; margin-left: 250px; } .stats-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; } .stats-section { padding: 160px 0; scale: 1.0; } /* Bento Box Section */ #bento-box { width: 100%; max-width: 1440px; margin: 0 auto; padding: 60px 0; position: relative; z-index: 2; } #bento-box h2 { font-size: 42px; margin-bottom: -30px; text-align: center; color: #018E47; } .product-flex { scale: 0.8; padding: 0px 0; gap: 20px; /* Increased gap for better spacing */ max-width: 1200px; margin: 0 auto; margin-bottom: -150px; } .product-group { flex: 2 1 40%; min-height: fit-content; } .product-group p { font-size: 25px; } .product-group h3 { font-size: 34px; } .product-group a { scale: 0.8; } /* About Us Section */ #about-us { width: 100%; max-width: 1440px; margin: 80px auto; padding: 0 5%; padding-bottom: 15px; position: relative; display: flex; justify-content: space-between; align-items: center; } .about-image img { width: 100%; border-radius: 20px; position: relative; left: -3%; top: 10px; } .about-content { width: 100%; padding: 40px; position: relative; z-index: 2; left: -2%; top: 15px; } .about-content h2 { font-size: 30px; color: #018E47; margin-bottom: -30px; line-height: 1.2; max-width: 900px; } .about-content p:first-of-type { font-size: 20px; line-height: 1.4; color: #181818; margin-bottom: -10px; } .about-content p:last-of-type { font-size: 20px; line-height: 1.5; color: #181818; margin-bottom: 20px; margin-left: 0px; } .about-content .learn-more-btn { width: 280px; height: 70px; font-size: 24px; padding: 15px 30px; border: 3px solid #018E47; border-radius: 16px; background: transparent; color: #018E47; display: inline-flex; align-items: center; justify-content: center; margin-top: -50px; margin-left: -50px; } .about-content .learn-more-btn:hover { background: #018E47; color: #FFFFFF; transition: all 0.3s ease; } #testimonials { width: 100%; top: -80px; margin-bottom: -120px; } .testimonials-header h2 { font-size: 32px; margin-bottom: 30px; } .testimonials-header p { font-size: 17px; max-width: 700px; margin-bottom: 40px; } .testimonial-card { width: 500px; /* Fixed width for all cards */ height: 220px; /* Fixed height for all cards */ padding: 40px 60px; } .testimonial-card p { font-size: 18px; line-height: 26px; margin-bottom: 15px; } .testimonial-card cite { font-size: 20px; line-height: 26px; } .testimonial-card footer span { font-size: 20px; line-height: 26px; } .scroll-dot { scale: 0.7; } .scroll-progress { scale: 0.9; } #cta { margin-top: 10px; } } /* Tablet (iPad) and smaller screens */ @media screen and (max-width: 1024px) { /* Global Adjustments */ h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; margin-bottom: clamp(20px, 3vh, 40px); } /* Landing Section */ #landing { min-height: 100vh; display: grid; grid-template-columns: 1fr; align-items: center; } /* Atlas Layer Adjustments */ .atlas-layer { display: block; /* Re-enable the display */ position: absolute; top: 0; left: 0; width: 100%; height: 53%; background: url(../images/home-page/landing.webp) no-repeat center; background-size: cover; opacity: 0.9; /* Adjust opacity if needed */ z-index: 1; /* Ensure proper layering */ /* Optional: Add specific positioning for landscape mode */ transform: scale(1.2); /* Adjust scale to fit better */ transform-origin: center center; /* Add smooth transitions */ transition: all 0.3s ease-in-out; } /* Ensure proper container positioning */ .landing-background { position: absolute; top: 0; left: 0; /* Fixed the left value from 1 to 0 */ width: 100%; height: 100%; overflow: hidden; } .landing-content { display: grid; grid-template-columns: 1fr 1fr; /* Create two equal columns */ gap: clamp(20px, 4vw, 40px); padding: clamp(20px, 4vh, 40px); align-items: center; height: 100vh; bottom: 8rem; } .landing-image { width: 70% !important; top: 19.5% !important; left: 33% !important; } .landing-text { position: relative; grid-column: 1; transform: none; opacity: 1; top: -2rem; left: 1rem; /* Added negative left value to move text left */ padding: 0; /* Removed left padding to allow more leftward movement */ text-align: left; max-width: 80%; display: flex; flex-direction: column; gap: clamp(15px, 2vh, 25px); } .landing-text h1 { font-size: clamp(15px, 3.5vw, 24px); /* Adjusted font size for equalization */ line-height: 1.4; /* Adjusted line height for equalization */ margin: 0; text-align: left; max-width: 105%; /* Keep max-width to control line breaks */ } .landing-text p { font-size: clamp(13px, 3.5vw, 18px); /* Equalized font size with h1 */ line-height: 1.4; /* Equalized line height with h1 */ margin: 0; text-align: justify; /* Justify the text */ text-align-last: left; max-width: 97%; /* Keep max-width for paragraph */ } .learn-more-btn { /* Core button styles */ width: 160px; height: 50px; padding: 8px 16px; font-size: 18px; /* Positioning */ position: relative; left: 6rem; margin-top: -20px; align-self: flex-start; /* Visual styles */ border: 2px solid #018E47; border-radius: 15px; scale: 0.5; transform-origin: left; /* Fixed colors - no hover needed */ /* Green background */ color: #ffffff; /* White text */ } /* Remove hover state completely */ .learn-more-btn:hover, .learn-more-btn:active, .learn-more-btn:focus { background-color: #018E47; color: #ffffff; transform: none; } /* Map Section */ .map-section { height: auto; min-height: 80vh; /* Reduced from 100vh */ padding: 20px 0; /* Reduced padding */ scale: 0.7; /* Reduced scale */ width: 140%; /* Increased width to compensate for scale */ max-width: 1720px; overflow: hidden; position: relative; right: 50%; /* Center the scaled content */ top: -450px; /* Reduce gap from landing section */ margin-bottom: -200px; /* Reduce bottom space */ } .map-content { width: 90%; margin: 0 auto; /* Center the content */ padding: 0; text-align: center; } .map-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 20px; /* Reduced margin */ } .map-description, .map-description-2 { font-size: clamp(20px, 2.5vw, 28px); margin-bottom: 10px; /* Reduced margin */ width: 50%; margin-left: auto; margin-right: auto; } .map-container { height: 400px; margin-top: 10px; /* Reduced margin */ position: relative; width: 100%; max-width: 1371.77px; margin: 20px auto 0; } /* Adjust marker positions for better visibility */ .country-marker { transform: scale(0.6); /* Reduced scale */ } /* Update marker positions if needed */ .usa-marker { left: 12%; } .estonia-marker { left: 32%; } .austria-marker { left: 30%; } .israel-marker { left: 33%; } .taiwan-marker { left: 65%; } .philippines-marker { left: 65%; } /* Partners Section */ .partners-section { padding: 40px 20px; scale: 0.7; /* Scale down the entire section */ margin-top: -650px; /* Reduced margin-top to bring it closer to map section */ margin-left: 1%; /* Slight adjustment for centering */ width: 100%; } .partners-content { max-width: 1000px; margin: 0 auto 30px; /* Reduced bottom margin */ } .partners-section .section-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 20px; /* Reduced margin */ } .partners-section .section-text { font-size: clamp(20px, 2.5vw, 28px); margin-bottom: 30px; width: 90%; margin-left: auto; margin-right: auto; } /* Partners Grid */ .partners-grid { display: flex; /* Changed to flex for better control */ justify-content: center; align-items: center; gap: 30px; padding: 0; width: 100%; max-width: 1400px; margin: 0 auto; } .partner-logo { width: 130px; /* Slightly larger for better visibility */ height: 130px; padding: 15px; } /* Shop Links */ .shop-links { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; padding: 0 20px; width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; } .shop-link { height: 40px; /* Adjusted height */ transition: transform 0.3s ease; } /* Optional: Add hover effects */ .partner-logo:hover, .shop-link:hover { transform: scale(1.05); } /* Stats Section */ .stats-section { padding: 3rem 0; margin-top: 0px; position: relative; width: 100vw; left: 381px; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; overflow: hidden; } .stats-container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; transform: scale(0.3); /* Reduced scale further */ transform-origin: center center; } .stats-boxes { width: 450px; /* Reduced width */ margin: 0 auto; display: flex; flex-direction: column; gap: 12px; /* Reduced gap */ position: relative; } .stat-box { width: 350px; /* Reduced width */ height: 130px; /* Reduced height */ background: #FFFFFF; border-radius: 14px; /* Slightly reduced border radius */ padding: 25px 35px; /* Reduced padding */ display: flex; align-items: center; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15); margin-bottom: 0; } /* Image size adjustments */ .bottle-image, .leaf-image, .droplet-image { width: 200px; height: 50px; /* Fixed height instead of percentage */ margin-left: 220px; object-fit: contain; /* Ensure image maintains aspect ratio */ transform: scale(4); /* Additional scaling if needed */ } /* Optional: Individual image adjustments if needed */ .bottle-image { height: 75px; left: 6rem; /* Slightly smaller for bottle */ } .leaf-image { height: 150px; left: -5%; top: 6rem; /* Even smaller for leaf */ } .droplet-image { height: 65px; /* Smallest for droplet */ } /* Ensure proper alignment with text */ .stat-box { display: flex; align-items: center; gap: 15px; } .stat-text { font-size: 24px; /* Reduced font size */ color: #181818; line-height: 1.3; max-width: 280px; /* Reduced max-width */ padding-left: 6px; } /* Bento Box Section */ #bento-box { width: 100%; max-width: 1440px; margin: 0 auto; padding: 60px 0; position: relative; z-index: 2; } #bento-box h2 { font-size: 30px; margin-bottom: -30px; text-align: center; color: #018E47; } .product-flex { scale: 0.8; padding: 0px 0; gap: 20px; /* Increased gap for better spacing */ max-width: 1200px; margin: 0 auto; margin-bottom: -150px; } .product-group { flex: 2 1 40%; min-height: fit-content; position: relative; /* Ensure proper positioning */ } /* Remove hover effect and show content by default */ .product-group figcaption { opacity: 1.2; /* Always visible */ background: linear-gradient( 90deg, rgba(1, 142, 71, 0.90) 0%, rgba(141, 207, 79, 0.90) 100% ); padding: 30px 20px; gap: 1.5rem; /* Reduced gap */ } .product-group p { font-size: 17px; line-height: 1.3; max-width: 85%; margin: 0 auto; } .product-group h3 { font-size: 20px; margin-bottom: 10px; } /* Adjust button styling */ .product-group a { scale: 0.8; padding: 20px 50px; font-size: 30px; border: 2px solid #fff; border-radius: 15px; background: transparent; color: #fff; margin-top: 10px; } /* Remove hover effects */ .product-group a:hover { background: transparent; color: #fff; } /* Ensure images fit properly */ .product-group img { width: 100%; height: 100%; object-fit: cover; } /* About Section */ #about-us { padding: 1% 4%; /* Reduced padding for a more compact layout */ margin-top: 120px; /* Adjusted margin for better spacing */ width: 100%; /* Full width */ position: relative; left: 0; /* Centering adjustments */ background-color: #E7F5D9; /* Ensure background color is set */ margin-bottom: -200px; } .about-content { max-width: 90%; /* Limit max-width for better fit */ margin: 0 auto; /* Center the content */ } .about-content h2 { font-size: 24px; /* Adjusted font size for smaller screens */ margin: 0; /* Remove margin for compactness */ text-align: center; /* Center text */ margin-bottom: -50px; } .about-title { font-size: 20px; /* Adjusted font size */ color: #018E47; margin-bottom: 8px; /* Adjusted margin */ } .about-content { margin-bottom: 255px; /* Adjusted margin */ } .about-image img { width: 100%; /* Full width */ max-width: 100%; /* Allow full width on smaller screens */ height: auto; /* Maintain aspect ratio */ margin: 10px auto; /* Reduced margin for compactness */ margin-bottom: 350px; } /* Testimonials Section */ #testimonials { width: 100%; top: -80px; margin-bottom: -620px; } .testimonials-header h2 { font-size: 29px; margin-bottom: 30px; } .testimonials-header p { font-size: 15px; max-width: 600px; margin-bottom: 40px; } .testimonial-card { width: 400px; /* Fixed width for all cards */ height: 220px; /* Fixed height for all cards */ padding: 40px 60px; } .testimonial-card p { font-size: 13px; line-height: 26px; margin-bottom: 15px; } .testimonial-card cite { font-size: 15px; line-height: 20px; } .testimonial-card footer span { font-size: 20px; line-height: 26px; } .scroll-dot { scale: 0.7; } .scroll-progress { scale: 0.9; } } @media screen and (max-width: 1024px) and (orientation: landscape) { /* Global Adjustments */ h2 { font-size: clamp(28px, 3.5vw, 40px); /* Adjusted for landscape */ line-height: 1.2; margin-bottom: clamp(15px, 2vh, 30px); /* Adjusted for landscape */ } /* Landing Section */ #landing { min-height: 100vh; display: grid; grid-template-columns: 1fr; align-items: center; } .landing-image { width: 58%; /* Adjust image size for landscape */ top: 35.5% !important; /* Adjust vertical position */ left: 33% !important; /* Shift it to the right */ transform: translate(-50%, -50%); /* Keep it centered */ } /* Atlas Layer Adjustments */ .atlas-layer { display: block; /* Re-enable the display */ position: absolute; top: 0; left: -4%; width: 100%; height: 80%; background: url(../images/home-page/landing.webp) no-repeat center; background-size: cover; opacity: 0.9; /* Adjust opacity if needed */ z-index: 1; /* Ensure proper layering */ transform: scale(1.1); /* Adjust scale to fit better */ transform-origin: center center; transition: all 0.3s ease-in-out; } .landing-content { display: grid; grid-template-columns: 1fr 1fr; /* Create two equal columns */ gap: clamp(15px, 3vw, 30px); /* Adjusted gap for landscape */ padding: clamp(15px, 3vh, 30px); /* Adjusted padding for landscape */ align-items: center; height: 100vh; bottom: 8rem; } .landing-text { position: relative; grid-column: 1; transform: none; opacity: 1; top: 7rem; left: 3rem; /* Added negative left value to move text left */ padding: 0; /* Removed left padding to allow more leftward movement */ text-align: left; max-width: 80%; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); /* Adjusted gap for landscape */ } .landing-text h1 { font-size: clamp(24px, 3vw, 29px); /* Adjusted for landscape */ line-height: 1.3; margin: 0; text-align: left; max-width: 90%; /* Adjusted max-width to control line breaks */ overflow: hidden; /* Hide overflow text */ text-overflow: ellipsis; /* Add ellipsis for overflow text */ display: -webkit-box; /* Use flexbox for multi-line truncation */ display: block; /* Fallback for non-webkit browsers */ -webkit-box-orient: vertical; /* Set box orientation */ } .landing-text p { font-size: clamp(16px, 2vw, 24px); /* Adjusted for landscape */ line-height: 1.4; margin: 0; text-align: justify; /* Justify the text */ text-align-last: left; max-width: 81%; } .learn-more-btn { width: 140px; /* Adjusted width for landscape */ height: 45px; /* Adjusted height for landscape */ padding: 8px 14px; /* Adjusted padding for landscape */ font-size: 16px; /* Adjusted font size for landscape */ position: relative; left: 5.5rem; /* Adjusted left positioning for landscape */ margin-top: -15px; /* Adjusted margin for landscape */ align-self: flex-start; border: 2px solid #018E47; border-radius: 15px; color: #ffffff; /* White text */ } /* Remove hover state completely */ .learn-more-btn:hover, .learn-more-btn:active, .learn-more-btn:focus { background-color: #018E47; color: #ffffff; transform: none; } /* Map Section */ .map-section { height: auto; min-height: 70vh; width: 100%; max-width: 100%; overflow: hidden; position: relative; transform: translateX(-30%); } /* Targeting the SVG/Image */ .map-content { position: relative; width: 100%; scale: 0.34; margin-left: 0; transform: translateX(0); left: 27%; } /* Edit the h2 */ .map-section h2 { font-size: 64px; margin-bottom: 60px; text-align: center; line-height: 120%; position: relative; left: 0%; width: 80%; } /* Edit the p */ .map-section p { font-size: 45px; max-width: 90%; margin: 0 auto 20px; position: relative; left: 0%; margin-bottom: 60px; } /* Partners Section */ .partners-section { padding: 30px 15px; /* Adjusted padding for landscape */ scale: 0.8; /* Scale down the entire section */ margin-top: -600px; /* Adjusted margin-top to bring it closer to map section */ margin-left: 1%; /* Slight adjustment for centering */ width: 100%; } .partners-content { max-width: 1000px; margin: 0 auto 20px; /* Reduced bottom margin */ } .partners-section .section-title { font-size: clamp(28px, 3.5vw, 40px); /* Adjusted for landscape */ margin-bottom: 15px; /* Adjusted margin */ } .partners-section .section-text { font-size: clamp(18px, 2.5vw, 26px); /* Adjusted for landscape */ margin-bottom: 20px; width: 90%; margin-left: auto; margin-right: auto; } /* Partners Grid */ .partners-grid { display: flex; /* Changed to flex for better control */ justify-content: center; align-items: center; gap: 20px; /* Adjusted gap for landscape */ padding: 0; width: 100%; max-width: 1400px; margin: 0 auto; } .partner-logo { width: 120px; /* Adjusted for better visibility */ height: 120px; /* Adjusted for better visibility */ padding: 10px; /* Adjusted padding */ } /* Shop Links */ .shop-links { display: flex; justify-content: center; align-items: center; gap: 20px; /* Adjusted gap for landscape */ margin-top: 20px; /* Adjusted margin */ padding: 0 10px; /* Adjusted padding */ width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; } .shop-link { height: 40px; /* Adjusted height */ transition: transform 0.3s ease; } /* Optional: Add hover effects */ .partner-logo:hover, .shop-link:hover { transform: scale(1.05); } /* Stats Section */ .stats-section { padding: 2rem 0; /* Adjusted padding for landscape */ margin-top: 0px; position: relative; width: 100vw; left: 0; /* Adjusted for landscape */ transform: translateX(0); /* Reset translation */ display: flex; justify-content: center; align-items: center; overflow: hidden; } .stats-container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; transform: scale(0.3); /* Reduced scale further */ transform-origin: center center; } .stats-boxes { width: 400px; /* Adjusted width for landscape */ margin: 0 auto; display: flex; flex-direction: column; gap: 10px; /* Adjusted gap */ position: relative; } .stat-box { width: 400px; /* Adjusted width for landscape */ height: 120px; /* Adjusted height for landscape */ background: #FFFFFF; border-radius: 14px; /* Slightly reduced border radius */ padding: 20px 30px; /* Adjusted padding for landscape */ display: flex; align-items: center; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15); margin-bottom: 0; margin-left: 150px; } /* Image size adjustments */ .bottle-image, .leaf-image, .droplet-image { width: 180px; /* Adjusted width for landscape */ height: 50px; /* Fixed height instead of percentage */ margin-left: 200px; /* Adjusted margin for landscape */ object-fit: contain; /* Ensure image maintains aspect ratio */ transform: scale(3); /* Adjusted scaling for landscape */ } /* Optional: Individual image adjustments if needed */ .bottle-image { height: 90px; /* Adjusted for landscape */ left: 5rem; margin-left: 116px; margin-top: -73px; } .leaf-image { height: 140px; /* Adjusted for landscape */ left: -5%; top: 5rem; /* Adjusted for landscape */ } .droplet-image { height: 60px; /* Adjusted for landscape */ } /* Ensure proper alignment with text */ .stat-box { display: flex; align-items: center; gap: 10px; /* Adjusted gap */ } .stat-text { font-size: 22px; /* Adjusted font size for landscape */ color: #181818; line-height: 1.3; max-width: 260px; /* Adjusted max-width for landscape */ padding-left: 6px; } /* Bento Box Section */ #bento-box { width: 100%; max-width: 1440px; margin: 0 auto; padding: 40px 0; /* Adjusted padding for landscape */ position: relative; z-index: 2; } #bento-box h2 { font-size: 28px; /* Adjusted font size for landscape */ margin-bottom: -20px; /* Adjusted margin */ text-align: center; color: #018E47; } .product-flex { scale: 0.8; padding: 0px 0; gap: 15px; /* Adjusted gap for landscape */ max-width: 1200px; margin: 0 auto; margin-bottom: -100px; /* Adjusted margin */ } .product-group { flex: 2 1 40%; min-height: fit-content; } .product-group p { font-size: 25px; } .product-group h3 { font-size: 34px; } .product-group a { scale: 0.8; } /* About Us Section */ #about-us { width: 100%; max-width: 1440px; padding: 0 5%; padding-bottom: 15px; position: relative; display: flex; justify-content: space-between; align-items: center; } .about-image img { width: 100%; border-radius: 20px; position: relative; left: -3%; top: 10px; } .about-content { width: 100%; padding: 40px; position: relative; z-index: 2; left: -2%; top: 15px; } .about-content h2 { font-size: 30px; color: #018E47; margin-bottom: -30px; line-height: 1.2; max-width: 900px; } .about-content p:first-of-type { font-size: 20px; line-height: 1.4; color: #181818; margin-bottom: -10px; } .about-content p:last-of-type { font-size: 20px; line-height: 1.5; color: #181818; margin-bottom: 20px; margin-left: 0px; } .about-content .learn-more-btn { width: 280px; height: 70px; font-size: 24px; padding: 15px 30px; border: 3px solid #018E47; border-radius: 16px; background: transparent; color: #018E47; display: inline-flex; align-items: center; justify-content: center; margin-top: -50px; margin-left: -50px; } .about-content .learn-more-btn:hover { background: #018E47; color: #FFFFFF; transition: all 0.3s ease; } #cta { margin-top: 0px; } } @media only screen and (min-width: 320px) and (max-width: 600px) and (max-height: 1200px) { /* Global Adjustments */ h2 { font-size: clamp(24px, 5vw, 30px); /* Adjusted for mobile */ line-height: 1.2; margin-bottom: clamp(15px, 2vh, 25px); } /* Landing Section */ #landing { min-height: 100vh; display: flex; /* Changed to flex for better stacking */ flex-direction: column; /* Stack items vertically */ align-items: center; } .landing-content { display: grid; grid-template-columns: 1fr 1fr; /* Create two equal columns */ gap: clamp(20px, 4vw, 40px); padding: clamp(20px, 4vh, 40px); align-items: center; height: 100vh; bottom: 8rem; } .landing-text { position: relative; grid-column: 1; transform: none; opacity: 1; top: 4.0rem; left: 5.1rem; /* Center the text horizontally */ padding: 0; /* Removed left padding to allow more leftward movement */ text-align: center; /* Center text alignment */ max-width: 205%; display: flex; flex-direction: column; gap: clamp(15px, 2vh, 25px); } .landing-text h1 { font-size: clamp(22px, 3.5vw, 24px); /* Adjusted font size for equalization */ line-height: 1.4; /* Adjusted line height for equalization */ margin: 0; margin-left: -30px; /* Adjusted negative margin to move it left */ text-align: center; /* Center text alignment */ max-width: 100%; /* Adjusted max-width to control line breaks */ } .landing-text p { font-size: clamp(13px, 3.5vw, 18px); /* Equalized font size with h1 */ line-height: 1.4; /* Equalized line height with h1 */ margin: 0; text-align: center; /* Justify text alignment */ max-width: 77%; /* Keep max-width for paragraph */ } .landing-image { width: 110% !important; bottom: 33% !important; top: 68% !important; left: -5% !important; } .atlas-layer { position: relative; width: 180%; max-width: 600px; height: 100vh; /* Use viewport height */ margin: 0 auto; transform: none; overflow: hidden; background-position: center; background-size: cover; } /* Map Section */ .map-section { height: auto; min-height: 50vh; /* Adjusted for mobile */ padding: 10px 0; /* Reduced padding */ width: 100%; /* Full width */ max-width: 100%; /* Ensure it fits the screen */ overflow: hidden; position: relative; left: -149%; top: 0; /* Reset top positioning */ margin-top: -170px; margin-bottom: 10px; /* Adjusted bottom space */ scale: 0.4; } .map-title { font-size: clamp(40px, 5vw, 30px); /* Adjusted for mobile */ max-width: 40%; margin-bottom: 15px; /* Adjusted margin */ } .map-description { font-size: clamp(27px, 4vw, 20px); /* Adjusted for mobile */ margin-bottom: 10px; /* Adjusted margin */ max-width: 45%; text-align: center; /* Center text */ } .map-description-2 { font-size: clamp(27px, 4vw, 20px); /* Adjusted for mobile */ margin-bottom: 10px; /* Adjusted margin */ max-width: 35%; text-align: center; /* Center text */ } /* Partners Section */ .partners-section { padding: 40px 20px; scale: 0.3; /* Scale down the entire section */ margin-top: -400px; /* Reduced margin-top to bring it closer to map section */ margin-left: 1%; /* Slight adjustment for centering */ width: 100%; } .partners-content { max-width: 100%; margin: 0 auto 30px; /* Reduced bottom margin */ } .partners-section .section-title { font-size: clamp(50px, 5vw, 30px); margin-bottom: 20px; /* Reduced margin */ } .partners-section .section-text { font-size: clamp(35px, 2.5vw, 28px); margin-bottom: 30px; width: 300%; margin-left: -100%; margin-right: auto; } /* Partners Grid */ .partners-grid { display: flex; /* Changed to flex for better control */ justify-content: center; align-items: center; gap: 30px; padding: 0; width: 50%; max-width: 1400px; margin: 0 auto; } .partner-logo { width: 130px; /* Slightly larger for better visibility */ height: 130px; padding: 15px; } /* Shop Links */ .shop-links { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; padding: 0 20px; width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; } .shop-link { height: 40px; /* Adjusted height */ transition: transform 0.3s ease; } /* Optional: Add hover effects */ .partner-logo:hover, .shop-link:hover { transform: scale(1.05); } /* Stats Section */ .stats-section { padding: 1rem 0; /* Reduced padding for a more compact layout */ margin-top: -100px; position: relative; width: 100vw; left: 0; /* Reset left positioning */ transform: translateX(0); /* Reset translation */ display: flex; justify-content: center; align-items: center; overflow: hidden; } .stats-container { width: 90%; /* Increased width for better fit on mobile */ max-width: none; /* Remove max-width restriction */ margin: 0 auto; display: flex; justify-content: center; transform: scale(1); /* Reset scale for mobile */ } .stats-boxes { width: 50%; /* Full width for mobile */ margin: 0 auto; display: flex; flex-direction: column; gap: 2px; /* Reduced gap for mobile */ position: relative; left: -42%; } .stat-box { width: 100%; /* Full width for mobile */ height: 70px; /* Reduced height for mobile */ background: #FFFFFF; border-radius: 14px; /* Slightly reduced border radius */ padding: 15px 3px; /* Reduced padding for mobile */ display: flex; align-items: center; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Reduced shadow for mobile */ margin-bottom: 0; } /* Image size adjustments */ .bottle-image, .leaf-image, .droplet-image { width: 100px; height: 90px; /* Fixed height instead of percentage */ margin-left: 20px; object-fit: contain; /* Ensure image maintains aspect ratio */ transform: scale(2.5); /* Additional scaling if needed */ } /* Optional: Individual image adjustments if needed */ .bottle-image { height: 480px; left: 1.95rem; /* Slightly smaller for bottle */ } .leaf-image { height: 100px; left: 15%; top: 4rem; /* Even smaller for leaf */ } .droplet-image { height: 65px; /* Smallest for droplet */ } /* Ensure proper alignment with text */ .stat-box { display: flex; align-items: center; gap: 10px; /* Reduced gap for mobile */ } .stat-text { font-size: 12px; /* Reduced font size for mobile */ color: #181818; line-height: 1.2; /* Adjusted line height for mobile */ max-width: 400px; /* Reduced max-width for mobile */ padding-left: 0px; padding-right: 0px; } /* Green Circle */ .stat-icon-container { scale: 0.5; margin-left: -10px; margin-right: -20px; margin-top: 5px; } /* Bento Box Section */ #bento-box { width: 100%; max-width: 600px; margin: 0 auto; padding: 60px 0; position: relative; z-index: 2; } #bento-box h2 { font-size: 15px; margin-bottom: 10px; line-height: 20px; text-align: center; color: #018E47; margin-top: -20px; } .product-flex { scale: 0.7; padding: 0px 0; gap: 10px; /* Increased gap for better spacing */ max-width: 600px; margin: 0 auto; margin-bottom: -190px; margin-top: -140px; } .product-group { flex: 1 1 49%; min-height: fit-content; position: relative; /* Ensure proper positioning */ } /* Remove hover effect and show content by default */ .product-group figcaption { opacity: 1.2; /* Always visible */ background: linear-gradient( 90deg, rgba(1, 142, 71, 0.90) 0%, rgba(141, 207, 79, 0.90) 100% ); padding: 30px 20px; gap: 1.5rem; /* Reduced gap */ } .product-group p { font-size: 15px; line-height: 1.3; max-width: 85%; margin: 0 auto; } .product-group h3 { font-size: 20px; margin-bottom: 10px; } /* Adjust button styling */ .product-group a { scale: 0.9; padding: 20px 40px; font-size: 17px; border: 2px solid #fff; border-radius: 15px; background: transparent; color: #fff; margin-top: 10px; } /* Remove hover effects */ .product-group a:hover { background: transparent; color: #fff; } /* Ensure images fit properly */ .product-group img { width: 100%; height: 100%; object-fit: cover; } /* About Section */ #about-us { padding: 1% -100px; /* Reduced padding for a more compact layout */ margin-top: 50px; /* Adjusted margin for better spacing */ width: 100%; /* Full width */ position: relative; left: 0; /* Centering adjustments */ background-color: #E7F5D9; /* Ensure background color is set */ margin-bottom: -300px; } .about-content { max-width: 100%; /* Limit max-width for better fit */ margin: 0 auto; /* Center the content */ margin-bottom: 105%; /* Adjusted margin */ margin-left: -80%; margin-right: 20%; } .about-content .learn-more-btn { /* Corrected selector */ margin-top: -35%; /* Adjusted margin */ scale: 0.4; } .about-content h2 { font-size: 18px; /* Adjusted font size for smaller screens */ margin: 0; /* Remove margin for compactness */ max-width: 80%; text-align: center; /* Center text */ margin-bottom: -10px; margin-left: 40px; } /* Adjusting the paragraph size */ .about-content p { /* Assuming you have a <p> element here */ margin-top: -60px; line-height: 1.4; /* Adjust line height for readability */ scale: 0.7; } .about-image img { margin-bottom: 420px; margin-left: 85%; scale: 0.8; } /* Testimonials Section */ #testimonials { width: 100%; top: -80px; margin-bottom: 50px; } .testimonials-header h2 { font-size: 19px; margin-bottom: 30px; } .testimonials-header p { font-size: 14px; max-width: 300px; margin-bottom: 40px; line-height: normal; } .testimonial-card { width: 350px; /* Fixed width for all cards */ height: 180px; /* Fixed height for all cards */ padding: 40px 60px; } .testimonial-card p { font-size: 11px; line-height: 16px; margin-bottom: 15px; } .testimonial-card cite { font-size: 11px; line-height: 20px; } .testimonial-card footer span { font-size: 20px; line-height: 26px; } .testimonial-card img { scale: 0.5; margin-bottom: -15px; } .scroll-dot { scale: 0.7; } .scroll-progress { scale: 0.9; } } /* iphone resolution ================================================== */ /* ✅ iPhone XR (828×1792 px, DPR 2) - CSS Width: 414px */ @media screen and (min-width: 390px) and (max-width: 414px) and (max-height: 896px) { .landing-image { width: 100%; top: 65% !important; left: 50%; transform: translate(-50%, -50%); } .map-section { width: 100%; left: -140% !important; } .map-title { font-size: 55px; width: 60%; max-width: 100%; } .map-description, .map-description-2 { font-size: 45px; width: 60%; max-width: 100%; left: -50% !important; } .partners-section .section-title { font-size: 64px; margin-bottom: 20px; /* Reduced margin */ width: 180%; position: relative; left: -40%; /* Move title to the left */ } .partners-section .section-text { font-size: 48px; margin-bottom: 30px; width: 350%; position: relative; left: -25%; /* Move text to the left */ } #bento-box h2 { font-size: 20px; } .about-image img { position: relative; left: -19%; } } /* ✅ iPhone 12 Pro (1170×2532 px, DPR 3) - CSS Width: 390px */ @media screen and (max-width: 390px) and (max-height: 844px) { .landing-image { top: 65% !important; } .map-content { margin-left: -1% !important; } } /* ✅ iPhone 14 Pro Max (1290×2796 px, DPR 3) - CSS Width: 430px */ @media screen and (min-width: 415px) and (max-width: 430px) and (max-height: 932px) { .landing-image { top: 63% !important; } .map-content { margin-left: 15%; } .map-title, .map-description, .map-description-2 { font-size: 38px; max-width: 60%; width: 100%; } } /* TABLET RESOLUTION =========================================================== */ /* ✅ iPad (9.7", 10.2") - 768×1024 px */ @media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1024px) { .landing-image { width: 150px; top: 50%; left: 50%; } } /* ✅ iPad Pro 12.9" - 1024×1366 px */ @media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 1366px) { .landing-image { width: 180px; top: 16.2% !important; left: 50%; } } /* LANDSCAPE RESOLUTION =========================================================== */ /* ✅ iPad Landscape (1024×768) */ @media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 1024px) and (orientation: landscape) { .landing-image { width: 160px; top: 35.5% !important; left: 50%; } } /* ✅ iPad Pro 12.9" Landscape (1366×1024) */ @media screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) { .landing-image { width: 70%; top: 37% !important; left: 33%; } }
Editor is loading...
Leave a Comment