/* Theme Name: Armedia Theme URI: https://armediapratama.com Author: CV Armedia Pratama Description: Tema buatan Armedia Pratama untuk website klien. Satu tema, empat bentuk (landing page, company profile, katalog + order WhatsApp, toko online), warna dan isi diatur dari Penyesuai. Pixel Meta/GA4/GTM/TikTok sudah menyatu. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 8.0 License: GPLv2 or later Text Domain: armedia Tags: business, portfolio, e-commerce, custom-colors, responsive-layout */ /* ========================================================================== Dasar Warna merek datang dari Penyesuai dan disuntik sebagai --merek di (lihat functions.php), jadi berkas ini tidak perlu ditulis ulang per klien. ========================================================================== */ :root { --merek: #0ea5e9; --merek-gelap: #0369a1; --merek-muda: #e0f2fe; --teks: #14181f; --samar: #5b6472; --garis: #e6e8ec; --latar: #ffffff; --latar-lembut: #f6f8fa; --gelap: #0f1620; --radius: 16px; --bayang: 0 1px 2px rgba(15, 22, 32, .04), 0 10px 30px rgba(15, 22, 32, .06); --bayang-naik: 0 2px 4px rgba(15, 22, 32, .05), 0 18px 45px rgba(15, 22, 32, .12); --lebar: 1160px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--latar); color: var(--teks); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--merek-gelap); } h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; } h1 { font-size: clamp(30px, 5vw, 50px); } h2 { font-size: clamp(25px, 3.4vw, 36px); } h3 { font-size: clamp(19px, 2.2vw, 23px); } p { margin: 0 0 1em; } .wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 20px; } .seksi { padding: clamp(52px, 8vw, 92px) 0; } .seksi.lembut { background: var(--latar-lembut); } .seksi.gelap { background: var(--gelap); color: #fff; } .seksi.gelap h2, .seksi.gelap h3 { color: #fff; } .seksi.gelap p { color: rgba(255, 255, 255, .78); } .kepala-seksi { max-width: 680px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; } .kepala-seksi p { color: var(--samar); font-size: 17px; margin: 0; } .seksi.gelap .kepala-seksi p { color: rgba(255, 255, 255, .72); } .label { display: inline-block; margin-bottom: 14px; padding: 6px 14px; background: var(--merek-muda); color: var(--merek-gelap); border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .seksi.gelap .label { background: rgba(255, 255, 255, .12); color: #fff; } /* Tombol ------------------------------------------------------------------ */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border: 0; border-radius: 12px; background: var(--merek); color: #fff; font: inherit; font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; box-shadow: 0 6px 18px color-mix(in srgb, var(--merek) 28%, transparent); } .tombol:hover { background: var(--merek-gelap); transform: translateY(-1px); box-shadow: var(--bayang-naik); color: #fff; } .tombol.garis { background: transparent; color: var(--teks); border: 1.5px solid var(--garis); box-shadow: none; } .tombol.garis:hover { background: var(--latar-lembut); border-color: var(--merek); color: var(--merek-gelap); } .tombol.wa { background: #22a45d; box-shadow: 0 6px 18px rgba(34, 164, 93, .3); } .tombol.wa:hover { background: #1b8b4e; } .tombol.kecil { padding: 10px 18px; font-size: 14px; border-radius: 10px; } .tombol.penuh { width: 100%; } .seksi.gelap .tombol.garis { color: #fff; border-color: rgba(255, 255, 255, .3); } /* Kepala halaman ---------------------------------------------------------- */ .tajuk { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--garis); } .tajuk-isi { display: flex; align-items: center; gap: 18px; min-height: 74px; position: relative; } .merek { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--teks); font-weight: 800; font-size: 19px; letter-spacing: -.02em; } .merek img { max-height: 46px; width: auto; } .merek .inisial { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; background: var(--merek); color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 800; } .merek small { display: block; font-size: 11.5px; font-weight: 500; color: var(--samar); letter-spacing: 0; } .menu { margin-left: auto; } .menu ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .menu a { display: block; padding: 9px 13px; border-radius: 9px; color: var(--samar); font-size: 15px; font-weight: 600; text-decoration: none; } .menu a:hover { color: var(--teks); background: var(--latar-lembut); } .menu .current-menu-item > a, .menu .current_page_item > a { color: var(--merek-gelap); } .tajuk .aksi { display: flex; align-items: center; gap: 10px; } .tombol-menu { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; background: var(--latar-lembut); border: 1px solid var(--garis); border-radius: 11px; cursor: pointer; } .tombol-menu span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--teks); border-radius: 2px; position: relative; } .tombol-menu span::before, .tombol-menu span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--teks); border-radius: 2px; } .tombol-menu span::before { top: -6px; } .tombol-menu span::after { top: 6px; } /* Hero -------------------------------------------------------------------- */ .hero { position: relative; padding: clamp(60px, 9vw, 110px) 0; background: var(--latar-lembut); overflow: hidden; } .hero.bergambar { color: #fff; background-size: cover; background-position: center; } .hero.bergambar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10, 15, 22, .86) 0%, rgba(10, 15, 22, .55) 58%, rgba(10, 15, 22, .3) 100%); } .hero .wadah { position: relative; } .hero-isi { max-width: 660px; } .hero h1 { margin-bottom: 18px; } .hero p.utama { font-size: clamp(16.5px, 2vw, 19.5px); color: var(--samar); margin-bottom: 30px; } .hero.bergambar p.utama { color: rgba(255, 255, 255, .88); } .hero.bergambar .label { background: rgba(255, 255, 255, .16); color: #fff; } .hero .aksi { display: flex; flex-wrap: wrap; gap: 12px; } .hero.bergambar .tombol.garis { color: #fff; border-color: rgba(255, 255, 255, .45); } .hero.bergambar .tombol.garis:hover { background: rgba(255, 255, 255, .14); color: #fff; } .hero-angka { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 44px; } .hero-angka b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; } .hero-angka span { font-size: 13.5px; color: var(--samar); } .hero.bergambar .hero-angka span { color: rgba(255, 255, 255, .75); } /* Kisi & kartu ------------------------------------------------------------ */ .kisi { display: grid; gap: 22px; } .kisi.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kisi.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kisi.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kartu { background: var(--latar); border: 1px solid var(--garis); border-radius: var(--radius); padding: 26px; box-shadow: var(--bayang); } .kartu h3 { margin-bottom: 8px; } .kartu p { color: var(--samar); margin: 0; font-size: 15px; } .seksi.gelap .kartu { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; } .ikon { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 13px; background: var(--merek-muda); color: var(--merek-gelap); display: grid; place-items: center; font-size: 22px; font-weight: 800; } .seksi.gelap .ikon { background: rgba(255, 255, 255, .12); color: #fff; } /* Produk ------------------------------------------------------------------ */ .produk { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .produk .gambar { aspect-ratio: 4 / 3; background: var(--latar-lembut); overflow: hidden; } .produk .gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .produk:hover .gambar img { transform: scale(1.04); } .produk .gambar.kosong { display: grid; place-items: center; color: var(--samar); font-size: 13px; } .produk .isi { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .produk h3 { font-size: 17.5px; margin: 0; } .produk h3 a { color: inherit; text-decoration: none; } .produk .ket { color: var(--samar); font-size: 14.5px; margin: 0; flex: 1; } .produk .harga { font-size: 20px; font-weight: 800; color: var(--merek-gelap); letter-spacing: -.02em; } .produk .harga small { font-size: 13px; font-weight: 600; color: var(--samar); } .produk .kategori { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--samar); } .saring { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; } .saring a { padding: 8px 16px; border: 1px solid var(--garis); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--samar); background: var(--latar); } .saring a:hover, .saring a.aktif { background: var(--merek); border-color: var(--merek); color: #fff; } /* Isi tulisan ------------------------------------------------------------- */ .isi-halaman { padding: clamp(40px, 6vw, 72px) 0; } /* Lebar kolom teks: "nyaman" menahan di 780px supaya barisnya tidak terlalu panjang untuk dibaca, "penuh" memakai seluruh lebar wadah. Diatur per situs di Penyesuai -> Bentuk & warna. */ .isi-teks { max-width: 780px; } body.lebar-penuh .isi-teks { max-width: none; } .isi-teks img { border-radius: var(--radius); margin: 1.4em 0; } .isi-teks ul, .isi-teks ol { padding-left: 1.2em; } .isi-teks li { margin-bottom: .4em; } .isi-teks blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--merek); color: var(--samar); font-size: 17px; } .isi-teks table { width: 100%; border-collapse: collapse; } .isi-teks th, .isi-teks td { padding: 10px 12px; border: 1px solid var(--garis); text-align: left; } .judul-halaman { padding: clamp(40px, 6vw, 66px) 0 0; } .judul-halaman .wadah { max-width: 780px; } body.lebar-penuh .judul-halaman .wadah { max-width: var(--lebar); } .judul-halaman p { color: var(--samar); margin: 0; } .remah { font-size: 13.5px; color: var(--samar); margin-bottom: 12px; } .remah a { color: var(--samar); text-decoration: none; } .remah a:hover { color: var(--merek-gelap); } /* Tulisan / blog ---------------------------------------------------------- */ .tulisan .gambar { aspect-ratio: 16 / 10; } .tulisan .tanggal { font-size: 13px; color: var(--samar); } .navigasi { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; flex-wrap: wrap; } /* Kontak ------------------------------------------------------------------ */ .kontak-kisi { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; } .kontak-baris { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--garis); } .kontak-baris:last-child { border-bottom: 0; } .kontak-baris .ikon { width: 40px; height: 40px; margin: 0; border-radius: 11px; font-size: 17px; } .kontak-baris b { display: block; font-size: 14px; } .kontak-baris span, .kontak-baris a { color: var(--samar); font-size: 15px; text-decoration: none; } .peta { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--garis); min-height: 300px; } .peta iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; } /* Kaki -------------------------------------------------------------------- */ .kaki { background: var(--gelap); color: rgba(255, 255, 255, .72); padding: clamp(44px, 6vw, 68px) 0 0; } .kaki a { color: rgba(255, 255, 255, .72); text-decoration: none; } .kaki a:hover { color: #fff; } .kaki-kisi { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; padding-bottom: 40px; } .kaki h4 { color: #fff; font-size: 15px; margin-bottom: 14px; } .kaki ul { list-style: none; margin: 0; padding: 0; } .kaki li { margin-bottom: 9px; font-size: 15px; } .kaki .merek { color: #fff; margin-bottom: 14px; } .kaki .merek small { color: rgba(255, 255, 255, .6); } .kaki-bawah { border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 13.5px; } .sosmed { display: flex; gap: 10px; } .sosmed a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; color: #fff; } .sosmed a:hover { background: var(--merek); } /* WhatsApp melayang ------------------------------------------------------- */ .wa-apung { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; background: #22a45d; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 30px rgba(34, 164, 93, .4); } .wa-apung:hover { background: #1b8b4e; color: #fff; } .wa-apung svg { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; } /* WooCommerce ------------------------------------------------------------- */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--merek); } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--merek); } .woocommerce span.onsale { background: var(--merek); } .woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--merek-gelap); font-weight: 800; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--merek); color: #fff; border-radius: 11px; padding: 12px 22px; font-weight: 700; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--merek-gelap); color: #fff; } .woocommerce ul.products li.product a img { border-radius: var(--radius); } .woocommerce-page .isi-halaman { padding-top: 30px; } /* Tampilan layar kecil ---------------------------------------------------- */ @media (max-width: 1000px) { .kisi.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kisi.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kaki-kisi { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .tombol-menu { display: block; } .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--garis); padding: 10px 20px 18px; box-shadow: var(--bayang); } .menu.buka { display: block; } .menu ul { flex-direction: column; align-items: stretch; gap: 2px; } .menu a { padding: 12px 10px; font-size: 16px; } .tajuk .aksi { display: none; } .kisi.k2, .kisi.k3, .kisi.k4 { grid-template-columns: 1fr; } .kontak-kisi { grid-template-columns: 1fr; } .kaki-kisi { grid-template-columns: 1fr; gap: 26px; } .hero-angka { gap: 22px; } .wa-apung { padding: 13px; } .wa-apung span { display: none; } } /* ========================================================================== Elementor Halaman yang digarap builder memakai kelas tema yang sama (seksi, kartu), tapi Elementor punya pembungkus sendiri: section > container > column > element-populated > widget. Tanpa penyesuaian di bawah, dua sistem tata letak saling tabrak — kartu menempel tanpa jarak, dan jarak antar bagian jadi dobel. ========================================================================== */ /* Lebar isi mengikuti wadah tema, bukan lebar bawaan kit Elementor. */ .elementor-section.seksi > .elementor-container { max-width: var(--lebar); } /* Section tema sudah punya jarak atas-bawah sendiri; punya Elementor dimatikan. */ .elementor-section.seksi > .elementor-container > .elementor-column > .elementor-element-populated { padding: 0; } /* Dua bagian berurutan yang sewarna (mis. kepala + kartu) tidak perlu jarak penuh dua kali: yang atas dirapatkan ke bawahnya. */ .elementor-section.seksi:has(+ .elementor-section.seksi) { padding-bottom: 0; } /* Kartu: kotaknya digambar di pembungkus dalam, bukan di kolomnya, supaya jarak antar kartu bisa diatur tanpa mengubah lebar kolom (mengubah lebar kolom membuat Elementor membungkusnya ke baris berikutnya). */ .elementor-column.kartu > .elementor-element-populated { background: var(--latar); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); padding: 26px; margin: 11px; height: calc(100% - 22px); } .elementor-column.kartu .elementor-widget:not(:last-child) { margin-bottom: 10px; } .elementor-column.kartu .elementor-widget-text-editor { color: var(--samar); font-size: 15px; } .elementor-column.kartu .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* Kepala bagian: judul dan kalimat penjelas rata tengah, selebar teks nyaman. */ .elementor-section.seksi .elementor-widget-heading .elementor-heading-title { margin: 0 0 .4em; } .elementor-widget-text-editor.kepala-seksi { max-width: 680px; margin: 0 auto; color: var(--samar); font-size: 17px; } /* Bagian gelap: teks builder ikut dibalik warnanya. */ .elementor-section.seksi.gelap .elementor-widget-text-editor, .elementor-section.seksi.gelap .elementor-heading-title { color: #fff; } .elementor-section.seksi.gelap .elementor-widget-text-editor { color: rgba(255, 255, 255, .78); } /* Tombol builder memakai gaya tombol tema, bukan biru bawaan Elementor. */ .elementor-widget-button.tombol .elementor-button, .elementor-widget-button.tombol .elementor-button:hover { background: var(--merek); color: #fff; border-radius: 12px; padding: 14px 26px; font: inherit; font-weight: 700; font-size: 15.5px; } .elementor-widget-button.tombol.wa .elementor-button { background: #22a45d; } .elementor-widget-button.tombol .elementor-button:hover { background: var(--merek-gelap); } .elementor-widget-button.tombol.wa .elementor-button:hover { background: #1b8b4e; } @media (max-width: 760px) { .elementor-column.kartu > .elementor-element-populated { margin: 8px 0; height: auto; } }