/* ═══════════════════════════════════════════════════════════ Surya18 — style.css (non-critical, dimuat non-blocking) Critical CSS (header, hero, USP, token) ada di index.html ═══════════════════════════════════════════════════════════ */ .section{padding:4rem 0} .section-head{text-align:center;max-width:640px;margin:0 auto 2.6rem} .section-head h2{font-size:clamp(1.8rem,5.5vw,2.6rem);margin-top:.1rem} /* Ornamen: garis emas tipis dengan diamond di tengah */ .ornament{display:flex;align-items:center;gap:14px;max-width:260px;margin:1.2rem auto 0} .ornament::before,.ornament::after{content:"";height:1px;flex:1} .ornament::before{background:linear-gradient(90deg,transparent,var(--gold))} .ornament::after{background:linear-gradient(90deg,var(--gold),transparent)} .ornament span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none} .ornament-light{margin-bottom:1.6rem} /* Tekstur halus (trellis diamond emas, opasitas sangat rendah) */ .kategori,.tentang{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 6 50 28 28 50 6 28Z' fill='none' stroke='%23C9A24B' stroke-opacity='0.09'/%3E%3C/svg%3E"); } /* ── Koleksi Unggulan ───────────────────────────── */ .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem} .product-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid rgba(201,162,75,.18);display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease} .product-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(43,26,30,.14)} .product-card img{width:100%;aspect-ratio:4/5;object-fit:cover} .product-body{padding:.9rem .9rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1} .product-body h3{font-size:1.12rem;font-weight:600} .price{font-weight:700;color:var(--maroon);font-size:.95rem;margin-bottom:.5rem} .product-body .btn{margin-top:auto} /* ── Kategori ───────────────────────────────────── */ .category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem} .category-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft)} .category-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease} .category-card:hover img{transform:scale(1.05)} .category-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(74,14,28,.85))} .category-label{position:absolute;left:0;right:0;bottom:.9rem;z-index:1;text-align:center;color:var(--cream);font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:.04em} .category-label::after{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:.35rem auto 0} /* ── Tentang ────────────────────────────────────── */ .tentang-inner{max-width:780px} .tentang-body p{margin-bottom:1.2rem;color:#4a3338} .tentang-body p:last-child{margin-bottom:0} .tentang-body p:first-of-type::first-letter{font-family:var(--font-display);font-weight:700;font-size:3.3em;line-height:.82;float:left;padding:.06em .12em 0 0;color:var(--maroon)} /* ── Testimoni ──────────────────────────────────── */ .testi-grid{display:grid;grid-template-columns:1fr;gap:1rem} .testi-card{background:#fff;border-radius:var(--radius);padding:1.4rem 1.3rem;box-shadow:var(--shadow-soft);border-top:2px solid var(--gold);margin:0} .stars{color:var(--gold);letter-spacing:.25em;font-size:.95rem;margin-bottom:.6rem} .testi-card blockquote{font-size:.94rem;color:#4a3338;margin-bottom:.9rem} .testi-card blockquote::before{content:"\201C";font-family:var(--font-display);color:var(--gold);font-size:1.4em;line-height:0;margin-right:.15em} .testi-card figcaption{font-weight:700;font-size:.9rem;color:var(--maroon-dark)} .testi-card figcaption span{font-weight:400;color:#7a5f52} /* ── CTA Banner ─────────────────────────────────── */ .cta-banner{background:var(--maroon-dark) radial-gradient(ellipse 70% 90% at 50% -20%,rgba(139,41,66,.55),transparent);padding:4.2rem 0;text-align:center} .cta-banner h2{color:var(--cream);font-size:clamp(1.7rem,5.5vw,2.5rem);max-width:640px;margin:0 auto .9rem} .cta-banner p{color:var(--gold-light);max-width:520px;margin:0 auto 1.8rem;font-size:.98rem} .btn-lg{padding:1.05rem 2.7rem;font-size:1.02rem} /* ── Footer ─────────────────────────────────────── */ .site-footer{background:#380913;color:#e9dfd2;border-top:1px solid rgba(201,162,75,.4)} .footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:3.2rem 0 2.4rem} .logo-footer{display:block;width:168px;height:64px;overflow:hidden;margin-bottom:1rem} .logo-footer img{width:100%;height:100%;object-fit:cover;object-position:center} .site-footer a.logo-footer{text-decoration:none} .footer-desc{font-size:.9rem;color:#cbb9ab;max-width:30rem} .site-footer h3{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem} .site-footer address{font-style:normal} .site-footer p{font-size:.92rem;margin-bottom:.35rem} .site-footer a{color:var(--cream);text-decoration:underline;text-decoration-color:rgba(201,162,75,.5);text-underline-offset:3px} .site-footer a:hover{color:var(--gold-light)} .footer-social{list-style:none} .footer-social li{margin-bottom:.45rem} .footer-social a{text-decoration:none;border-bottom:1px solid rgba(201,162,75,.5);padding-bottom:2px} .footer-bottom{border-top:1px solid rgba(201,162,75,.22);padding:1.1rem 0} .footer-bottom p{font-size:.8rem;color:#a8917f;margin:0;text-align:center} /* ── Floating WhatsApp ──────────────────────────── */ #wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;border:1px solid var(--gold);box-shadow:0 8px 22px rgba(43,26,30,.28);transition:transform .25s ease} #wa-float:hover{transform:scale(1.08)} /* ── Breakpoint tablet & desktop ────────────────── */ @media (min-width:700px){ .testi-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:768px){ .section{padding:5.5rem 0} .product-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem} .category-grid{grid-template-columns:repeat(4,1fr)} } @media (min-width:1080px){ .product-grid{grid-template-columns:repeat(4,1fr)} .testi-grid{grid-template-columns:repeat(4,1fr)} } @media (prefers-reduced-motion:reduce){ .product-card,.category-card img,#wa-float,.btn{transition:none} .product-card:hover,#wa-float:hover,.btn:hover{transform:none} .category-card:hover img{transform:none} } @media print{ .site-header,.mobile-nav,#wa-float,.cta-banner{display:none} }