/* ============================================================================ ROKOKST STOREFRONT — custom-store.css Dimuat di frontend/default/_template.php. Penambahan bertahap (R-tasks). Brand amber #F5BE17. Tidak mengubah logika/markup inti yang sudah berjalan. ========================================================================== */ /* Poppins dimuat via non-blocking di _template.php (bukan @import) */ :root{ --primary:#F5BE17; /* amber brand */ --primary-dark:#D4A017; /* amber hover/active */ --secondary:#1A1A2E; /* navy teks */ --accent:#E94560; /* coral CTA */ --success:#2ECC71; /* hijau */ --bg-light:#F8F9FA; --card-shadow:0 2px 12px rgba(0,0,0,.08); --radius:12px; --radius-sm:8px; } /* ---- R12: Bottom navigation mobile ------------------------------------- */ .store-bottomnav{ height:56px;z-index:1020;background:#fff;border-top:1px solid #eee; box-shadow:0 -2px 12px rgba(0,0,0,.08); } .store-bottomnav .sbn-item{ flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;min-height:56px;text-decoration:none;color:#8a8a8a;font-weight:500;position:relative; } .store-bottomnav .sbn-item i{font-size:20px;line-height:1;} .store-bottomnav .sbn-item small{font-size:10px;} .store-bottomnav .sbn-item.active{color:var(--primary-dark);} .store-bottomnav .sbn-item:hover{color:var(--primary-dark);text-decoration:none;} .store-bottomnav .sbn-badge{ position:absolute;top:7px;left:50%;margin-left:4px; background:var(--accent);color:#fff;border-radius:10px; font-size:9px;font-weight:700;padding:1px 5px;line-height:1.4; } /* beri ruang agar konten tak tertutup bottom-nav (mobile saja) */ @media (max-width:767px){ body{padding-bottom:56px;} } /* ---- R7/R14: badge GROSIR & helper harga ------------------------------- */ .badge-grosir{ position:absolute;top:8px;left:8px;z-index:11; background:var(--success);color:#fff;font-size:10px;font-weight:700; padding:3px 7px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase; } .badge-terlaris{ position:absolute;top:8px;left:8px;z-index:11; background:var(--accent);color:#fff;font-size:10px;font-weight:700; padding:3px 7px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase; } .badge-grosir + .badge-terlaris{top:32px;} /* ---- touch targets minimal 44px (aksesibilitas mobile) ----------------- */ @media (max-width:767px){ .store-bottomnav .sbn-item{min-height:56px;} } /* ---- R16 KONSERVATIF: Poppins utk heading & komponen baru (brand kuning dipertahankan, tombol/aksen existing TIDAK diubah) ------------------ */ h1,h2,h3,h4,h5,h6,.title,.card-title,.modal-title, .store-bottomnav,.hero-store,.kategori-pills,.tpc-now,.tpc-tiers-title{ font-family:'Poppins','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif; } /* ---- R2: tombol "Tambah ke Keranjang" (outline oranye, samakan btn-cta) -- */ .btn-cart-outline{ background:#fff;color:#e0531f;border:2px solid #e0531f;font-weight:700; border-radius:8px;transition:background .15s,color .15s; } .btn-cart-outline:hover,.btn-cart-outline:focus{background:#e0531f;color:#fff;} /* quick-add bulat di card (R2/R14) */ .card .card-image{position:relative;} .card .quick-add{ position:absolute;bottom:8px;right:8px;width:34px;height:34px;padding:0;border-radius:50%; display:flex;align-items:center;justify-content:center;z-index:12; background:var(--primary);border:0;color:#3a2e00;box-shadow:0 2px 8px rgba(0,0,0,.2); } .card .quick-add:hover{background:var(--primary-dark);color:#3a2e00;} /* ---- R11: header mobile 2-baris -------------------------------------- */ .mobile-head{padding:4px 0;min-height:50px;} .mobile-head .mh-logo img{height:34px;width:auto;} .mobile-head .mh-btn{ min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center; border-radius:10px;margin-left:4px;background:rgba(255,255,255,.9); } .mobile-head .mh-btn .badge{position:absolute;top:3px;right:3px;} .mobile-search .form-control{border-radius:30px 0 0 30px;} .mobile-search .input-group-append .btn:last-child{border-radius:0 30px 30px 0;} .top-bar-text{font-size:10px;opacity:.9;} @media (max-width:767px){ .top-bar-date{display:none;} } /* ---- R5: Hero banner -------------------------------------------------- */ .hero-store{ background:linear-gradient(135deg,#F5BE17 0%,#E8A800 100%); border-radius:16px;color:#3a2e00;padding:22px 18px;text-align:center; box-shadow:0 8px 24px rgba(245,190,23,.30); } .hero-store .hero-logo{max-height:64px;width:auto;margin-bottom:8px;} .hero-store .hero-tag{font-weight:700;font-size:18px;margin-bottom:10px;} .hero-store .hero-feats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:13px;font-weight:600;margin-bottom:14px;} .hero-store .hero-feats i{margin-right:4px;} .hero-store .hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;} .hero-store .btn-hero-primary{background:#3a2e00;color:#fff;font-weight:700;border-radius:10px;padding:8px 18px;} .hero-store .btn-hero-primary:hover{background:#241c00;color:#fff;} .hero-store .btn-hero-ghost{background:rgba(255,255,255,.85);color:#3a2e00;font-weight:700;border-radius:10px;padding:8px 18px;} .hero-store .btn-hero-ghost:hover{background:#fff;color:#3a2e00;} @media (max-width:767px){ .hero-store{padding:16px 14px;} .hero-store .hero-logo{max-height:48px;} .hero-store .hero-tag{font-size:15px;} .hero-store .hero-feats{gap:8px;font-size:11.5px;} } /* ---- R6: pill kategori (horizontal scroll) --------------------------- */ .kategori-pills{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:4px;} .kategori-pills::-webkit-scrollbar{height:0;} .kategori-pills .kp-item{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; padding:7px 16px;border-radius:30px;border:1px solid #e3e3e3;background:#fff; color:#555;font-weight:600;font-size:13px;text-decoration:none; } .kategori-pills .kp-item:hover{border-color:var(--primary);color:#3a2e00;} .kategori-pills .kp-item.active{background:var(--primary);border-color:var(--primary-dark);color:#3a2e00;} .kategori-pills .kp-count{background:rgba(0,0,0,.08);border-radius:10px;padding:0 6px;font-size:11px;} /* ---- R15: checkout progress steps -------------------------------------- */ .checkout-steps{display:flex;justify-content:space-between;} .checkout-step{flex:1;text-align:center;position:relative;font-size:12px;color:#999;font-weight:600;} .checkout-step::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#e2e2e2;z-index:0;} .checkout-step:first-child::before{display:none;} .checkout-step-number{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:#ddd;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;font-weight:700;font-size:13px;color:#fff;} .checkout-step.active{color:var(--primary-dark);} .checkout-step.active .checkout-step-number{background:var(--primary);color:#1A1A2E;} .checkout-step.done{color:var(--success);} .checkout-step.done .checkout-step-number{background:var(--success);color:#fff;} .checkout-step.done::before{background:var(--success);} /* ---- R15: touch target ≥44px utk radio/checkbox & opsi pembayaran ------ */ .payment-option .payment-label{min-height:60px;} .payment-methods input[type="radio"]{width:20px;height:20px;vertical-align:middle;} .custom-control-input{width:20px;height:20px;} .custom-control-label{padding-left:10px;line-height:24px;} @media (max-width:767px){ .checkout-step{font-size:11px;} .bank-options .bank-option{min-height:52px;} }