:root { --primary: #ffd000; /* kuning emas lembut */ --bg: #f9fafb; /* abu muda */ --text-dark: #111827; --text-light: #ffffff; } /* ========================= */ /* Animasi Loading */ /* ========================= */ /* Overlay untuk animasi loading */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 2000; display: flex; justify-content: center; align-items: center; visibility: visible; opacity: 1; transition: visibility 0.3s, opacity 0.3s ease; } /* Sembunyikan overlay ketika loading selesai */ .loading-overlay.hidden { visibility: hidden; opacity: 0; } /* Animasi spinner */ .spinner { width: 50px; height: 50px; border: 5px solid rgba(0, 0, 0, 0.1); border-top-color: #2e7d32; border-radius: 50%; animation: spin 1s linear infinite; } /* Keyframe animasi spinner */ @keyframes spin { to { transform: rotate(360deg); } } /* ========================= */ /* Reset gaya default elemen */ /* ========================= */ * { margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; } html { scroll-behavior: smooth; } /* ========================== */ /* Gaya dasar untuk */ /* ========================== */ body { font-family: "Poppins", Arial, sans-serif; background-color: var(--bg); color: black; } /* ========================== */ /* Navigasi Atas (Navbar) */ /* ========================== */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 7%; background-color: transparent; /* Transparan */ border-bottom: 1px solid transparent; /* Sembunyikan border */ position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; backdrop-filter: blur(10px); transition: background-color 0.3s ease, border-bottom-color 0.3s ease; /* Animasi perubahan warna */ } /* Navbar saat di-scroll (semi-transparan) */ .navbar.scrolled { background-color: rgba(0, 61, 0, 0.8); /* Warna semi-transparan */ border-bottom-color: #014901; /* Tampilkan border bawah */ padding: 2.5rem; } .navbar-logo img { width: 264px; /* Ubah ukuran sesuai kebutuhan */ height: auto; /* Menjaga rasio aspek gambar */ } .navbar .navbar-nav a { color: white; display: inline-block; font-size: 1.3rem; margin: 0 1rem; transition: color 0.3s ease; } .navbar .navbar-nav a:hover { color: var(--primary); } .navbar .navbar-nav a::after { content: ""; display: block; padding-bottom: 0.5rem; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.336); transform: scaleX(0); transition: 0.2s linear; } .navbar .navbar-nav a:hover::after { transform: scaleX(0.5); } .navbar .navbar-nav .contact-button, .navbar .navbar-nav .phone-list { display: none; /* Sembunyikan elemen pada layar desktop */ } .navbar .navbar-extra a { color: white; margin: 0 0.5rem; } .navbar .navbar-extra a:hover { color: var(--primary); } #hamburger-menu { display: none; } /* Navbar search Form */ .navbar .search-form { position: absolute; top: 100%; right: 7%; width: 50rem; height: 5rem; display: flex; align-items: center; background-color: var(--bg); border-radius: 0.5rem; padding: 0.5rem 1rem; transform: scaleY(0); transform-origin: top; } .navbar .search-form.active { transform: scaleY(1); transition: transform 0.3s ease-in-out; } .navbar .search-form input { height: 100%; width: 100%; font-size: 1.6rem; padding: 1rem; color: var(--text-dark); border-radius: 0.5rem; } .navbar .search-form label { cursor: pointer; font-size: 2rem; color: var(--text-dark); margin-right: 1.5rem; } /* ========================= */ /* Hero Section */ /* ========================= */ .hero { min-height: 100vh; display: flex; align-items: center; background-image: url("../img/header-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; -webkit-mask-image: linear-gradient(rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0)); mask-image: linear-gradient(rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0)); } .hero .content { padding: 1.4rem 7%; width: 100%; text-align: center; position: fixed; top: 150px; } .hero .content h1 { font-size: 4rem; font-weight: 700; color: #fff; text-shadow: 1px 1px 3px rgba(1, 1, 1, 0.5); line-height: 1.2; } .hero .content h1 span { color: var(--primary); } .hero .content p { font-size: 1.3rem; margin-top: 1rem; line-height: 1.4; font-weight: 300; text-shadow: 1px 1px 3px rgba(1, 1, 1, 0.5); color: #fff; mix-blend-mode: difference; padding: 0 13%; } .hero .content .cta { margin-top: 8rem; /* Mengurangi margin top agar lebih kecil */ display: inline-block; padding: 0.8rem 1.5rem; /* Mengurangi padding agar tombol lebih kecil */ font-size: 1rem; /* Ukuran font lebih kecil */ background-color: var(--primary); color: black; border-radius: 0.3rem; /* Mengurangi radius agar sudut lebih kecil */ box-shadow: 1px 1px 3px rgba(1, 1, 1, 0.5); } .hero .content .cta:hover { background-color: #014901; /* Warna lebih gelap saat hover */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan saat hover */ color: #fff; } .hero .content .cta:active { transform: scale(0.95); /* Perkecil tombol saat diklik */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Kurangi bayangan saat klik */ } /* ========================= */ /* About Section */ /* ========================= */ .about { padding: 7rem 7% 1.4rem; opacity: 0; /* Awalnya tidak terlihat */ transform: translateY(50px); /* Awalnya bergeser ke bawah */ transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .about.scrolled { opacity: 1; /* Muncul */ transform: translateY(0); /* Kembali ke posisi semula */ } .about h2, .fotoproduct h2, .pelayanan h2, .customer h2, .gallery h2, .contact h2 { text-align: center; font-size: 2.6rem; margin-bottom: 3rem; color: black; } .sayuran_eksotis h2 { text-align: center; font-size: 2rem; margin-bottom: 3rem; margin-top: 3rem; color: green; } .product h2 { text-align: center; font-size: 2.6rem; margin-bottom: 3rem; color: #ffff; } .product h2 span { color: var(--primary); } .left-section { position: relative; top: -120px; /* Menggeser elemen ke atas */ } .left-section h2 { font-size: 3rem; margin-bottom: 15px; text-align: left; } .highlighted-text { font-size: 18px; /* Membesarkan ukuran teks pada paragraf */ padding: 10px; border-radius: 5px; /* Membuat sudut bingkai melengkung */ background-color: #4d9c4d; /* Warna latar belakang hijau pucat */ text-align: left; } .about h2 span, .about h3 span, .fotoproduct h2 span, .pelayanan h2 span, .customer h2 span, .gallery h2 span, .contact h2 span { color: green; } .about .row { display: flex; } .about .row .about-img { flex: 1 1 45rem; border-radius: 12px; /* Menambahkan lengkungan pada sudut gambar */ overflow: hidden; /* Mencegah konten gambar melampaui lengkungan */ } .about .row .about-img img { width: 100%; border-radius: 12px; /* Menambahkan lengkungan pada gambar */ } .about .row .content { flex: 1 1 35rem; padding: 0 1rem; } /* Wrapper dua-kolom di dalam .content */ .content-two-column { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; } /* Teks (kiri) mengambil ruang fleksibel */ .content-two-column .left-text { flex: 1 1 60%; } /* Gambar (kanan) dengan lebar tetap relatif */ .content-two-column .right-image { flex: 0 0 40%; max-width: 40%; border-radius: 12px; overflow: hidden; align-self: flex-start; background: #f3f3f3; } /* Pastikan gambar responsif dan mengikuti lengkungan */ .content-two-column .right-image img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 12px; } /* Tweak: jarak tombol jika perlu */ .content-two-column .left-text .btn-view-product { display: inline-block; margin-top: 0.8rem; } /* Responsive: pada layar sempit, tumpuk kolom secara vertikal */ @media (max-width: 900px) { .content-two-column { flex-direction: column-reverse; /* gambar di atas, teks di bawah; ganti jika mau teks dulu */ gap: 1rem; } .content-two-column .right-image, .content-two-column .left-text { max-width: 100%; flex: 1 1 100%; } } .about .row .content h3 { font-size: 1.8rem; margin-bottom: 1rem; } .about .row .content p { font-size: 1.3rem; line-height: 1.6; margin-bottom: 0.8rem; font-weight: 300; } .about .row .content p span { font-size: 1.3rem; line-height: 1.6; margin-bottom: 0.8rem; font-weight: 700; color: #2e7d32; } /* Style for the "Lihat Foto Produk" button */ .btn-view-product { display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #ffd000; color: #010101; text-decoration: none; font-size: 1rem; border-radius: 8px; transition: background-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan */ } .btn-view-product:hover { background-color: #014901; color: #ffff; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.35); /* Bayangan lebih besar saat hover */ } /* ========================= */ /* Product Section */ /* ========================= */ /* Efek Tambahan */ .highlight-link { font-weight: bold; /* Membuat teks tebal */ text-decoration: none; /* Menghapus garis bawah */ color: inherit; /* Menggunakan warna teks bawaan */ transition: color 0.3s ease; /* Menambahkan efek transisi pada perubahan warna */ } .highlight-link:hover { color: var(--primary); /* Mengubah warna teks menjadi kuning saat hover */ } /* End */ .product { background-image: url("../img/bg/bg-product.jpeg"); /* Ubah warna background menjadi gambar */ background-size: cover; /* Gambar memenuhi seluruh area */ background-position: center; /* Pusatkan gambar */ background-repeat: no-repeat; /* Jangan ulang gambar */ height: 730px; /* Tambahkan tinggi gambar (contoh: 500px, sesuaikan sesuai kebutuhan) */ padding: 50px 20px; color: white; } .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .left-section { flex: 1; margin-right: 20px; max-width: 600px; } .right-section { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 500px; } .product-card { background-color: white; color: black; padding: 2.5rem; border-radius: 8px; text-align: center; } .product-card img { width: 40px; height: 40px; margin-bottom: 5px; } .product h2, .fotoproduct h2, .pelayanan h2, .customer h2, .contact h2 { margin-bottom: 1rem; } .fotoproduct p, .pelayanan p, .customer p, .contact p { text-align: center; max-width: 50rem; margin: auto; font-size: 1.3rem; font-weight: 300; line-height: 1.6; } .product .row { display: flex; flex-wrap: wrap; margin-top: 5rem; justify-content: center; } .product .row .product-card { text-align: center; padding: 10px; box-sizing: border-box; } .product .row .product-card img { width: 100%; max-width: 400px; height: 300px; object-fit: cover; border-radius: 8px; margin: 0 auto; display: block; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* ===================== */ /* Section Foto Product */ /* ===================== */ .fotoproduct { padding: 7rem 7% 1.4rem; } .fotoproduct-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; margin-top: 2rem; padding: 0 2rem; } .fotoproduct-card { text-align: center; padding: 15px 0 0; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(36, 68, 109, 0.08); border: 1.5px solid #e0e3ea; /* Bingkai luar kartu produk */ overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; } /* Bingkai foto produk */ .fotoproduct-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 0; /* margin bawah dihilangkan, digantikan garis pembatas */ display: block; transition: transform 0.3s ease-in-out; border-bottom: 1.5px solid #e0e3ea; /* Pembatas antara foto dan nama produk */ border-radius: 10px 10px 0 0; /* Bingkai hanya di atas */ } .fotoproduct-card img:hover { transform: scale(1.1); } /* Nama produk */ .product-name { font-size: 1rem; color: #014901; font-weight: 600; padding: 10px 4px 10px 4px; background: #f8fafc; border-radius: 0 0 10px 10px; border-top: 1.5px solid #e0e3ea; /* Garis pemisah (opsional jika ingin lebih tebal) */ } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.9); } .modal-content { margin: auto; display: block; max-width: 90%; max-height: 90%; } .modal-content:hover { transform: scale(1.05); transition: transform 0.2s ease-in-out; } #image-caption { margin: auto; display: block; text-align: center; color: white; padding: 10px 0; } .slider-button.left { display: none; } .close { position: absolute; top: 20px; right: 35px; color: white; font-size: 30px; font-weight: bold; cursor: pointer; display: none; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* Section Foto Product End */ /* ========================= */ /* Pelayanan Section */ /* ========================= */ .pelayanan { padding: 7rem 7% 1.4rem; background-color: #e9e9e9; opacity: 0; /* Awalnya tidak terlihat */ transform: translateY(50px); /* Awalnya bergeser ke bawah */ transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .pelayanan.scrolled { opacity: 1; /* Muncul */ transform: translateY(0); /* Kembali ke posisi semula */ } .pelayanan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Mengatur agar elemen memiliki kolom responsif */ gap: 2rem; /* Jarak antar elemen */ margin-top: 2rem; /* Menyesuaikan margin atas */ padding: 0 2rem; /* Memberikan padding di kiri dan kanan */ } .pelayanan-card { background-color: #ffffff; text-align: center; padding: 15px; border-radius: 12px; /* Menambahkan lengkungan pada bingkai kartu */ box-sizing: border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Tambahkan bayangan */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek animasi saat hover */ } .pelayanan-card:hover { transform: translateY(-5px); /* Efek melayang saat hover */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Bayangan lebih besar saat hover */ } .pelayanan-card img { width: 100%; aspect-ratio: 1 / 1; /* Membuat gambar menjadi kotak dengan rasio 1:1 */ object-fit: cover; /* Memastikan gambar memenuhi bingkai tanpa distorsi */ border-radius: 12px; /* Menambahkan lengkungan pada sudut gambar */ margin-bottom: 10px; /* Memberikan jarak antara gambar dan teks */ display: block; } .pelayanan-card p { font-size: 1rem; font-weight: bold; color: #333; margin: 0; /* Menghilangkan margin default */ } /* ========================= */ /* Customer Section */ /* ========================= */ .customer { text-align: center; background-color: #fff; padding: 2rem 11% 0; } .customer-caption { font-size: 1.1rem; color: #010101; margin-bottom: 2rem; } .customer-row { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .customer-row.center { justify-content: center; } .customer-row img { width: 110px; height: 110px; object-fit: contain; background: transparent; border-radius: 12px; transition: transform 0.3s; } .customer-row img:hover { transform: scale(1.07) translateY(-3px); } .customer-label { font-weight: bold; font-size: 1.2rem; color: #045d34; margin-bottom: 1rem; margin-top: 2rem; } /* ========================= */ /* Gallery Section */ /* ========================= */ /* Gallery Section Styles */ #gallery-bg { background: #f8f8f8; padding: 40px 0; } .gallery { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .gallery-item { opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1); will-change: opacity, transform; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07); background: #fff; } .gallery-item.visible { opacity: 1; transform: translateY(0) scale(1); } .gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1); cursor: pointer; } .gallery-item.visible img:hover { transform: scale(1.04); } /* Modal Styles */ .gallery-modal { position: fixed; z-index: 9999; inset: 0; background: rgba(20, 21, 24, 0.88); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-modal.open { opacity: 1; pointer-events: all; } .gallery-modal-content { position: relative; max-width: 95vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.45s cubic-bezier(0.42, 0, 0.58, 1); } @keyframes modalFadeIn { 0% { transform: scale(0.88) translateY(40px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .gallery-modal-img { width: auto; height: auto; max-width: 95vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 6px 32px rgba(0, 0, 0, 0.25); background: #fff; object-fit: contain; display: block; animation: imgZoomIn 0.5s cubic-bezier(0.42, 0, 0.58, 1); } @keyframes imgZoomIn { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } .gallery-modal-close { position: absolute; top: -16px; right: -16px; background: #fff; color: #111; border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 1.5rem; font-weight: bold; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); transition: background 0.2s, color 0.2s; z-index: 2; } .gallery-modal-close:hover { background: #1ab07a; color: #fff; } /* ========================= */ /* Contact Section */ /* ========================= */ .contact { padding: 7rem 7% 1.4rem; text-align: center; background-color: #f9f9f9; opacity: 0; /* Awalnya tidak terlihat */ transform: translateY(50px); /* Awalnya bergeser ke bawah */ transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .contact.scrolled { opacity: 1; /* Muncul */ transform: translateY(0); /* Kembali ke posisi semula */ } .contact-container { display: flex; flex-direction: column; gap: 2rem; align-items: center; } /* Map Styling */ .map-container { width: 100%; max-width: 1250px; height: 400px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .map { width: 100%; height: 100%; border: 0; } /* Contact Info Styling */ .contact-info { display: flex; gap: 3rem; /* Jarak antar item lebih besar */ align-items: flex-start; justify-content: left; width: 100%; max-width: 1250px; } .info-item { display: flex; /* Mengatur elemen secara horizontal */ align-items: flex-start; gap: 1rem; /* Jarak antara ikon dan teks */ background: none; /* Hapus background */ box-shadow: none; /* Hapus bayangan */ padding: 0; /* Hapus padding */ text-align: left; } .info-item i { font-size: 28px; /* Ukuran ikon lebih besar */ color: #f4a100; /* Warna oranye */ } .info-item p { font-size: 16px; font-weight: bold; color: #333; margin: 0; text-align: left; } .info-item span { font-size: 16px; color: #555; line-height: 1.5; } /* Tampilan lebih rapi untuk link email dan alamat */ .info-item a { text-decoration: none; color: #555; transition: color 0.3s ease; } .info-item a span { text-decoration: none; color: #045d34; transition: color 0.3s ease; } .info-item a span:hover { color: #f4a100; /* Warna oranye saat hover */ } .tautan-singkat { display: flex; justify-content: center; align-items: center; width: 100%; } .tautan-singkat p { font-weight: bold; font-size: 1.35rem; color: var(--primary, #fff); letter-spacing: 0.5px; margin-bottom: 1rem; position: relative; overflow: hidden; white-space: nowrap; width: 14ch; min-width: 14ch; max-width: 14ch; text-align: center; margin-left: auto; margin-right: auto; opacity: 1; transition: opacity 0.5s; box-sizing: border-box; } .tautan-singkat p::after { content: ""; display: inline-block; width: 3px; height: 1.3em; background: var(--primary, #fff); margin-left: 3px; vertical-align: -0.2em; animation: blink-caret 0.7s steps(1) infinite; } @keyframes blink-caret { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Footer */ footer { background-image: url("../img/bg/bg-footer.jpeg"); /* Ganti dengan URL gambar Anda */ background-size: cover; /* Gambar menyesuaikan ukuran container */ background-position: center; /* Gambar dipusatkan */ background-repeat: no-repeat; /* Gambar tidak diulang */ text-align: center; padding: 1rem 0 3rem; margin-top: 7rem; color: white; } footer .socials { padding: 1rem 0; } footer .socials a { color: white; margin: 1rem; } footer .socials a:hover, footer .links a:hover { color: var(--primary); } /* Style for image and Feather icons */ footer .socials a img, footer .socials a i { display: inline-block; transition: transform 0.2s; border-radius: 50%; padding: 2px; color: #fff; box-sizing: border-box; } footer .socials a:hover img, footer .socials a:hover i { transform: scale(1.12) rotate(-8deg); background: var(--primary); } footer .links { margin-bottom: 1.4rem; } footer .links a { color: white; padding: 0.7rem 1rem; } footer .credit { font-size: 0.7rem; margin-top: 3.3rem; margin-bottom: -2rem; } footer .credit a { color: var(--bg); font-weight: 700; } footer .credit a:hover { color: var(--primary); } /* Modal Box */ /* Contact Person Box */ .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .modal-container { position: relative; background-color: #fefefe; color: #014901; margin: 15% auto; padding: 1.2rem; border: 1px solid #666; width: 50%; border-radius: 1rem; } .modal-container .close-icon { position: absolute; right: 1rem; } .modal-content { display: flex; flex-wrap: nowrap; padding: 1rem; } .modal-content img { width: 50px; /* Ukuran lebar gambar */ height: 50px; /* Ukuran tinggi gambar */ margin-right: 10px; /* Jarak kanan antara gambar dan teks */ border-radius: 50%; /* Membuat gambar menjadi lingkaran */ border: 2px solid #25d366; /* Garis luar dengan warna khas WhatsApp */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Efek bayangan */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transisi untuk hover */ } .modal-content img:hover { transform: scale(1.1); /* Perbesar sedikit saat hover */ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan saat hover */ } .modal-content p { font-size: 1.2rem; line-height: 1.8rem; margin-top: 1.2rem; } /* Gaya untuk tombol close (X) */ .modal .close-icon { position: absolute; /* Posisi absolut di dalam modal */ top: 10px; /* Jarak dari atas */ right: 10px; /* Jarak dari kanan */ background-color: #ff4d4d; /* Warna latar belakang merah */ color: white; /* Warna teks putih */ border: none; /* Tidak ada border */ border-radius: 25%; /* Membuat bentuk lingkaran */ width: 20px; /* Lebar tombol */ height: 20px; /* Tinggi tombol */ display: flex; /* Menggunakan flexbox */ align-items: center; /* Pusatkan secara vertikal */ justify-content: center; /* Pusatkan secara horizontal */ cursor: pointer; /* Mengubah kursor menjadi pointer */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan untuk tombol */ transition: background-color 0.3s ease; /* Transisi untuk efek hover */ } .modal .close-icon i { font-size: 18px; /* Ukuran ikon */ } .modal .close-icon:hover { background-color: #e60000; /* Warna latar belakang saat hover */ } /* Popup Social Media */ /* TikTok Social Media */ .tiktok-button { position: fixed; bottom: 215px; right: 20px; z-index: 1000; background-color: #222222; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s ease-in-out; } .tiktok-button:hover { transform: scale(1.1); } .tiktok-icon { width: 45px; height: 45px; } /* Instagram Social Media */ .instagram-button { position: fixed; bottom: 150px; right: 20px; z-index: 1000; background-color: #e1306c; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s ease-in-out; } .instagram-button:hover { transform: scale(1.1); } .instagram-icon { width: 32px; height: 32px; } /* Facebook Social Media */ .facebook-button { position: fixed; bottom: 85px; right: 20px; z-index: 1000; background-color: #3b5998; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s ease-in-out; } .facebook-button:hover { transform: scale(1.1); } .facebook-icon { width: 30px; height: 30px; } /* Popup WhatsApp */ /* WhatsApp Floating Button */ .whatsapp-button { position: fixed; bottom: 20px; right: 20px; z-index: 1000; background-color: #25d366; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s ease-in-out; } .whatsapp-button:hover { transform: scale(1.1); } .whatsapp-icon { width: 30px; height: 30px; } /* WhatsApp Popup */ .whatsapp-popup-container { position: fixed; bottom: 90px; right: 20px; z-index: 1000; width: 400px; background: white; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); display: none; /* Initially hidden */ flex-direction: column; overflow: hidden; } .whatsapp-popup-header { background-color: #25d366; color: white; padding: 15px; display: flex; align-items: center; justify-content: space-between; } .whatsapp-popup-title { display: flex; align-items: center; gap: 10px; font-size: 16px; } .whatsapp-popup-title img { width: 25px; height: 25px; } .close-popup { background: none; border: none; color: white; font-size: 20px; cursor: pointer; } .whatsapp-popup-body { padding: 15px; font-size: 14px; } .reply-notice { font-size: 12px; color: #888; margin-bottom: 10px; } .contact-card { display: flex; align-items: flex-start; justify-content: space-between; background: #f9f9f9; padding: 10px; border-radius: 5px; margin-top: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .contact-avatar { width: 40px; height: 40px; border-radius: 50%; } .contact-info { margin-left: 10px; flex-grow: 1; align-items: flex-start; } .contact-info h4 { font-size: 14px; margin: 0; } .contact-info p { font-size: 14px; color: #888; margin-right: 2px; } .contact-whatsapp-link img { width: 25px; height: 25px; } .footer-divider-socials { border: none; border-top: 1px solid #f1f1f169; width: 30%; margin: 0 auto 1rem auto; } .footer-divider { border: none; border-top: 1px solid #f1f1f169; width: 70%; margin: 2rem auto -2rem auto; } /* ========================= */ /* Media Queries */ /* ========================= */ /* Laptop */ @media (max-width: 1366px) { html { font-size: 75%; } } /* Tablet */ @media (max-width: 768px) { html { font-size: 62.5%; } .navbar-logo img { width: 164px; /* Ubah ukuran sesuai kebutuhan */ height: auto; /* Menjaga rasio aspek gambar */ } #hamburger-menu { display: inline-block; } .navbar .navbar-nav .contact-button, .navbar .navbar-nav .phone-list { display: block; /* Tampilkan elemen Tablet Kebawah */ } .navbar .navbar-nav { position: absolute; top: 100%; right: -100%; background-color: rgba(0, 30, 20, 0.952); /* Default warna gelap */ backdrop-filter: blur(57px); /* Efek blur */ width: 30rem; height: 100vh; flex-direction: column; padding: 1rem; transition: right 0.3s ease-in-out, background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; } .navbar .navbar-nav.active { right: 0; } .navbar .navbar-nav a { color: white; /* Default teks terang untuk background gelap */ display: block; margin: 1.5rem; padding: 0.5rem; font-size: 2rem; transition: color 0.3s ease-in-out; /* Perubahan warna teks lebih halus */ } .navbar .navbar-nav .contact-button { margin-top: auto; /* Posisikan di bagian bawah */ text-align: center; padding: 1rem; z-index: 10; /* Pastikan elemen tidak tertutupi */ } .navbar .navbar-nav .contact-button a { display: inline-block; color: white; /* Default warna teks tombol */ background-color: #045d34; /* Warna hijau solid */ text-shadow: none; padding: 0.75rem 1.5rem; border-radius: 5px; text-decoration: none; font-size: 1.5rem; cursor: pointer; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Tambahkan properti untuk menyesuaikan lebar */ width: 100%; /* Tombol akan mengambil seluruh lebar elemen induknya */ max-width: 200px; /* Tetapkan batas maksimum lebar */ text-align: center; /* Pastikan teks di dalam tombol tetap rata tengah */ box-sizing: border-box; /* Tambahkan padding ke dalam lebar tombol */ } .navbar .navbar-nav .contact-button a:hover { background-color: #023f23; /* Warna hijau lebih gelap saat hover */ } .navbar .navbar-nav .phone-list { display: none; /* Disembunyikan secara default */ margin-top: 1rem; text-align: center; color: white; font-size: 1.5rem; } .navbar .navbar-nav .phone-list.active { display: block; /* Tampilkan saat aktif */ } .navbar .navbar-nav .phone-list a { display: flex; align-items: center; color: white !important; /* Warna default teks putih */ text-decoration: none !important; margin: 0.5rem 0; font-size: 1.5rem; background-color: transparent !important; /* Hilangkan latar belakang */ padding: 0 !important; /* Hilangkan padding */ border: none !important; /* Hilangkan border */ cursor: default !important; /* Nonaktifkan hover efek tombol */ transition: color 0.3s ease-in-out; /* Transisi perubahan warna */ } /* Warna teks berubah menjadi gelap */ .navbar .navbar-nav .phone-list a.scrolled { color: #023f23 !important; /* Warna gelap untuk teks */ } .navbar .navbar-nav .phone-list:hover a { color: #023f23; /* Warna teks lebih gelap */ } .navbar .navbar-nav .phone-list .whatsapp-logo { width: 24px; /* Ukuran logo WhatsApp */ height: 24px; margin-right: 10px; /* Jarak antara logo dan teks */ } .navbar .search-form { width: 90%; right: 2rem; } .hero .content { padding: 1.0 7%; width: 100%; text-align: center; position: fixed; top: 100px; } .hero .content h1 { font-size: 4rem; font-weight: 700; color: #fff; text-shadow: 1px 1px 3px rgba(1, 1, 1, 0.5); line-height: 1.2; } .hero .content .cta { margin-top: 4rem; } .about .row { flex-wrap: wrap; } .about .row .about-img img { height: 24rem; object-fit: cover; object-position: center; } .about .row .content { padding: 0; } .about .row .content h3 { margin-top: 1rem; font-size: 2rem; } .about .row .content p { font-size: 1.6rem; } @media (max-width: 900px) { .fotoproduct { padding: 5rem 5% 1rem; } .fotoproduct-row { gap: 1.5rem; padding: 0 1rem; } .fotoproduct-card img { margin-bottom: 0; } .product-name { font-size: 0.97rem; padding: 8px 2px 8px 2px; } } @media (max-width: 600px) { .fotoproduct-row { gap: 1rem; padding: 0 0.5rem; } .fotoproduct-card { padding: 8px 0 0; } .product-name { font-size: 0.92rem; padding: 6px 2px 6px 2px; } } .contact-info { flex-direction: column; /* Ubah menjadi kolom (vertikal) */ gap: 1.5rem; /* Jarak antar item lebih kecil */ align-items: left; /* Pusatkan elemen */ text-align: left; /* Teks menjadi rata tengah */ } .info-item { flex-direction: column; /* Ikon dan teks menjadi vertikal */ align-items: left; /* Pusatkan ikon dan teks */ text-align: left; /* Teks menjadi rata tengah */ } .info-item i { margin-bottom: 0.5rem; /* Jarak bawah ikon */ } .info-item a { margin-bottom: 0.5rem; /* Jarak bawah ikon */ font-size: 16px; } /* Product Section */ .product { height: 1000px; } .product p { font-size: 1.6rem; } .container { flex-direction: column; text-align: center; } .left-section { position: relative; top: -20px; /* Menggeser elemen ke atas */ } .left-section h2 { font-size: 3rem; margin-bottom: 15px; text-align: left; } .highlighted-text { font-size: 18px; /* Membesarkan ukuran teks pada paragraf */ padding: 10px; border-radius: 5px; /* Membuat sudut bingkai melengkung */ background-color: #4d9c4d; /* Warna latar belakang hijau pucat */ text-align: left; margin-right: -2rem; } .right-section { grid-template-columns: 1fr; } /* Contact Section */ .contact .row { flex-wrap: wrap; } .contact .row .map { height: 30rem; } .contact .row form { padding: 2rem; } .modal-content { flex-wrap: wrap; } .pelayanan { padding: 5rem 5% 1rem; } .pelayanan-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.5rem; padding: 0 1rem; } .pelayanan-card { padding: 10px; } .pelayanan-card p { font-size: 0.9rem; } /* Style for image and Feather icons */ footer .socials a img, footer .socials a i { padding: 2px; width: 27px; height: 27px; } /* popup tiktok */ .tiktok-button { bottom: 145px; right: 10px; width: 40px; height: 40px; } .tiktok-icon { width: 30px; height: 30px; } /* popup Instagram */ .instagram-button { bottom: 100px; right: 10px; width: 40px; height: 40px; } .instagram-icon { width: 20px; height: 20px; } /* popup Facebook */ .facebook-button { bottom: 55px; right: 10px; width: 40px; height: 40px; } .facebook-icon { width: 20px; height: 20px; } /* popup WhatsApp */ .whatsapp-button { bottom: 10px; right: 10px; width: 40px; height: 40px; } .whatsapp-icon { width: 20px; height: 20px; } .whatsapp-popup-container { bottom: 60px; right: 15px; z-index: 1000; width: 300px; } } /* Ponsel */ @media (max-width: 450px) { html { font-size: 55%; } }