/* * Etalase vertikal web — zasha.online/{elektronik,digital,mlijo,tumbuhan,mebel} * Vanilla CSS, tanpa framework/build. Dipakai resources/views/listing/*. * * KENAPA BUKAN TAILWIND: server Hostinger tidak punya Node, jadi langkah * `npm run build` di deploy.sh selalu dilewati dan CSS Tailwind yang live * masih tertanggal 21 Agustus 2026. Kelas utility baru tidak punya aturan CSS * sama sekali — elemennya tampil polos TANPA error apa pun, jadi tidak * ketahuan dari log maupun dari halaman yang "kelihatan jalan". File statis + * cache-buster mtime bebas dari jebakan itu. Pola sama dengan properti.css. * * SATU berkas untuk kelima etalase. Yang membedakan tampilan tiap vertikal * ditulis sebagai kelas pengubah pada (mis. .et-mlijo), bukan lima * berkas terpisah — lima salinan berarti setiap perbaikan dikerjakan lima * kali, masalah yang sama dengan lima modul PHP yang sudah dihindari. * * PRIORITAS MOBILE: ukuran dasar ditulis untuk HP dulu, pelebaran ke * tablet/desktop lewat @media di bagian bawah. * * Warna brand mengikuti home.css & properti.css: navy #1F2F65 + gold #C9A227. * Hijau WhatsApp #25D366 KHUSUS tombol hubungi supaya langsung dikenali. */ :root { --et-navy: #1f2f65; --et-navy-dark: #172548; --et-navy-50: #f0f3fa; --et-gold: #c9a227; --et-wa: #25d366; --et-slate-900: #0f172a; --et-slate-700: #334155; --et-slate-500: #64748b; --et-slate-400: #94a3b8; --et-slate-200: #e2e8f0; --et-slate-100: #f1f5f9; --et-slate-50: #f8fafc; --et-white: #fff; --et-radius: 14px; --et-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); } * { box-sizing: border-box; } body.et-page { margin: 0; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--et-slate-900); background: var(--et-slate-50); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── Navbar ───────────────────────────────────────────────────────────── */ .et-navbar { background: var(--et-navy); position: sticky; top: 0; z-index: 30; } .et-navbar-inner { max-width: 1180px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .et-brand { color: var(--et-white); font-weight: 800; font-size: 17px; letter-spacing: -.01em; } .et-brand span { color: var(--et-gold); } .et-navbar-link { color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 600; } .et-navbar-link:hover { color: var(--et-white); } /* Pindah etalase — dipakai di halaman indeks supaya pengunjung yang mendarat dari Google tahu ada etalase lain. */ .et-switch { background: var(--et-navy-dark); overflow-x: auto; -webkit-overflow-scrolling: touch; } .et-switch-inner { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 8px; white-space: nowrap; } .et-switch a { color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); } .et-switch a.is-active { background: var(--et-gold); color: var(--et-navy-dark); } /* ── Kepala halaman ───────────────────────────────────────────────────── */ .et-hero { background: linear-gradient(160deg, var(--et-navy) 0%, var(--et-navy-dark) 100%); color: var(--et-white); padding: 26px 16px 30px; } .et-hero-inner { max-width: 1180px; margin: 0 auto; } .et-hero h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .et-hero p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .75); max-width: 640px; } /* ── Wadah ────────────────────────────────────────────────────────────── */ .et-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 56px; } /* ── Penyaring ────────────────────────────────────────────────────────── */ .et-filter { background: var(--et-white); border: 1px solid var(--et-slate-200); border-radius: var(--et-radius); box-shadow: var(--et-shadow); padding: 14px; margin-bottom: 18px; display: grid; gap: 10px; } .et-filter input, .et-filter select { width: 100%; padding: 11px 13px; border: 1px solid var(--et-slate-200); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--et-slate-900); background: var(--et-white); outline: none; } .et-filter input:focus, .et-filter select:focus { border-color: var(--et-navy); } .et-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .et-btn-filter { background: var(--et-navy); color: var(--et-white); border: 0; border-radius: 10px; padding: 11px 18px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; } .et-btn-filter:hover { background: var(--et-navy-dark); } .et-hasil { font-size: 13px; color: var(--et-slate-500); margin: 0 0 12px; } /* ── Kategori — chip level-kedua DI DALAM satu vertikal (mis. Digital → Template Blog / Aplikasi / Source Code). Beda dari .et-switch (pemindah ANTAR vertikal, navy penuh): ini di atas kartu putih .et-wrap, jadi dibuat ringan (outline, bukan solid) supaya tidak bersaing dengan hero navy di atasnya. Permintaan user 9 September 2026. ───────────────── */ .et-kategori { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .et-kategori a { font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--et-white); border: 1px solid var(--et-slate-200); color: var(--et-slate-500); } .et-kategori a.is-active { background: var(--et-navy); border-color: var(--et-navy); color: var(--et-white); } /* ── Kartu daftar ─────────────────────────────────────────────────────── */ .et-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .et-card { background: var(--et-white); border: 1px solid var(--et-slate-200); border-radius: var(--et-radius); box-shadow: var(--et-shadow); overflow: hidden; display: flex; flex-direction: column; } .et-card:hover { border-color: var(--et-navy); } .et-card-foto { position: relative; aspect-ratio: 4 / 3; background: var(--et-slate-100); } .et-card-foto img { width: 100%; height: 100%; object-fit: cover; } .et-card-kosong { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--et-slate-400); } .et-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--et-gold); color: var(--et-navy-dark); } .et-badge-booked { background: #f59e0b; color: #fff; } .et-card-isi { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .et-card-judul { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .et-card-harga { font-size: 15px; font-weight: 800; color: var(--et-navy); margin: 2px 0 0; } .et-card-satuan { font-size: 12px; font-weight: 600; color: var(--et-slate-500); } .et-card-meta { font-size: 11.5px; color: var(--et-slate-500); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .et-card-spek { font-size: 11.5px; color: var(--et-slate-400); margin: 2px 0 0; } /* ── Kosong ───────────────────────────────────────────────────────────── */ .et-empty { background: var(--et-white); border: 1px solid var(--et-slate-200); border-radius: var(--et-radius); padding: 44px 20px; text-align: center; } .et-empty-ikon { font-size: 34px; margin: 0 0 10px; } .et-empty h2 { font-size: 15px; margin: 0 0 6px; } .et-empty p { font-size: 13px; color: var(--et-slate-500); margin: 0; } /* ── Paginasi ─────────────────────────────────────────────────────────── */ .et-paginasi { margin-top: 22px; font-size: 13px; } .et-paginasi svg { width: 16px; height: 16px; } /* ── Halaman detail ───────────────────────────────────────────────────── */ .et-detail { display: grid; gap: 16px; } .et-galeri { background: var(--et-white); border: 1px solid var(--et-slate-200); border-radius: var(--et-radius); overflow: hidden; } /* object-fit: contain (BUKAN cover) — foto utama TIDAK BOLEH terpotong. Konversi 'besar' di Listing::registerMediaConversions() sudah Fit::Contain (utuh, tidak dipotong); kalau ditampilkan dengan object-fit:cover di kotak rasio 4:3 tetap, foto yang bukan 4:3 (screenshot produk digital biasanya 16:9, potret HP 3:4, dst) akan kepotong sisi/atas-bawahnya — dikeluhkan 9 September 2026. Latar slate-100 jadi letterbox untuk foto yang rasionya tidak pas. */ .et-galeri-utama { aspect-ratio: 4 / 3; background: var(--et-slate-100); } .et-galeri-utama img { width: 100%; height: 100%; object-fit: contain; } .et-galeri-strip { display: flex; gap: 6px; padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .et-galeri-strip img { width: 68px; height: 52px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; cursor: pointer; } .et-panel { background: var(--et-white); border: 1px solid var(--et-slate-200); border-radius: var(--et-radius); box-shadow: var(--et-shadow); padding: 16px; } .et-panel h1 { font-size: 19px; font-weight: 800; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.01em; } .et-harga-besar { font-size: 24px; font-weight: 800; color: var(--et-navy); margin: 0; } .et-harga-nego { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--et-gold); background: #fdf8e8; padding: 3px 9px; border-radius: 999px; margin-top: 6px; } .et-panel h2 { font-size: 14px; font-weight: 800; margin: 0 0 10px; color: var(--et-navy); } .et-spek-grup { margin-bottom: 16px; } .et-spek-grup:last-child { margin-bottom: 0; } .et-spek-judul { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--et-slate-400); margin: 0 0 8px; } .et-spek { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--et-slate-200); border-radius: 10px; overflow: hidden; } .et-spek-item { background: var(--et-white); padding: 9px 11px; } .et-spek-label { font-size: 11px; color: var(--et-slate-500); margin: 0 0 2px; } .et-spek-nilai { font-size: 13px; font-weight: 700; margin: 0; } .et-deskripsi { font-size: 13.5px; line-height: 1.65; color: var(--et-slate-700); white-space: pre-line; margin: 0; } /* ── Kontak ───────────────────────────────────────────────────────────── */ .et-wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--et-wa); color: #fff; font-size: 15px; font-weight: 800; padding: 14px; border-radius: 12px; margin-top: 4px; } .et-wa-btn:hover { background: #1fb857; } .et-maps-btn { display: block; text-align: center; width: 100%; background: var(--et-white); border: 1px solid var(--et-slate-200); color: var(--et-slate-700); font-size: 13.5px; font-weight: 700; padding: 11px; border-radius: 12px; margin-top: 8px; } .et-maps-btn:hover { border-color: var(--et-navy); color: var(--et-navy); } .et-kontak-catatan { font-size: 11.5px; color: var(--et-slate-400); line-height: 1.5; margin: 10px 0 0; text-align: center; } /* Ditampilkan saat listing TIDAK punya nomor WA sama sekali. Tombol yang mengarah ke nomor kosong lebih buruk daripada tombol yang tidak ada. */ .et-kontak-kosong { background: var(--et-slate-100); border-radius: 12px; padding: 14px; text-align: center; font-size: 13px; color: var(--et-slate-500); } /* ── Lainnya ──────────────────────────────────────────────────────────── */ .et-lainnya-judul { font-size: 15px; font-weight: 800; margin: 26px 0 12px; } /* ── Footer ───────────────────────────────────────────────────────────── */ .et-footer { background: var(--et-navy); color: rgba(255, 255, 255, .65); padding: 26px 16px; text-align: center; font-size: 12.5px; } .et-footer a { color: var(--et-gold); font-weight: 700; } /* ── Pengubah per vertikal ──────────────────────────────────────────────── * * Perbedaan tampilan antaretalase ditulis di sini sebagai kelas pada , * bukan berkas CSS terpisah. Mebel & tumbuhan dijual lewat foto, jadi * kartunya diberi ruang gambar lebih besar; mlijo dibaca seperti daftar * belanja, jadi kartunya dipadatkan supaya lebih banyak muat dalam satu * layar. * ------------------------------------------------------------------------ */ body.et-mlijo .et-card-foto { aspect-ratio: 1 / 1; } body.et-mlijo .et-card-isi { padding: 9px 10px 11px; } body.et-mlijo .et-card-judul { font-size: 12.5px; -webkit-line-clamp: 1; } body.et-mlijo .et-card-harga { font-size: 14px; } body.et-mebel .et-card-foto, body.et-tumbuhan .et-card-foto { aspect-ratio: 3 / 4; } body.et-digital .et-card-foto { aspect-ratio: 16 / 9; } /* ── Layar lebih besar ────────────────────────────────────────────────── */ @media (min-width: 640px) { .et-hero { padding: 34px 16px 38px; } .et-hero h1 { font-size: 27px; } .et-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .et-filter { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; } .et-filter-row { display: contents; } .et-panel { padding: 20px; } .et-panel h1 { font-size: 23px; } body.et-mlijo .et-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .et-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } .et-detail { grid-template-columns: 1.6fr 1fr; align-items: start; } .et-detail-kiri { display: grid; gap: 16px; } .et-detail-kanan { position: sticky; top: 78px; display: grid; gap: 16px; } .et-hero h1 { font-size: 30px; } body.et-mlijo .et-grid { grid-template-columns: repeat(5, 1fr); } }