/* ==========================================================================
COSTA � SPRINT 3: GLOBAL PREMIUM EXPERIENCE
==========================================================================
UI / UX polish layer only. No business logic, no markup restructuring
beyond a few additive, presentation-only hooks (empty states, icons,
loading/shimmer states). Loads LAST in so these rules safely win
over style.css / custom.css / promo-visibility.css without !important.
Sections:
1. Tokens
2. Motion & accessibility baseline
3. Header / Navbar
4. Announcement bar (scroll behaviour)
5. Homepage hero
6. Section entrance / transitions
7. Product card
8. Product list toolbar (filter / sort / breadcrumb / search)
9. Search experience (smart-search panel, loading, empty)
10. Empty states (wishlist, cart, search, 404)
11. Skeleton / shimmer loading
12. Footer
13. Global button system
14. Icon system
15. Mobile refinements
========================================================================== */
:root {
--gp-ink: #14151a;
--gp-ink-soft: #565b66;
--gp-hairline: #e8e9ee;
--gp-cream: #faf8f4;
--gp-gold: #b8874f;
--gp-gold-soft: #d9b98c;
--gp-ease: cubic-bezier(0.22, 1, 0.36, 1);
--gp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--gp-dur-fast: 200ms;
--gp-dur: 280ms;
--gp-radius: 14px;
--gp-radius-lg: 20px;
--gp-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
--gp-shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.05);
--gp-shadow-md: 0 10px 24px rgba(16, 24, 40, 0.09), 0 2px 6px rgba(16, 24, 40, 0.06);
--gp-shadow-lg: 0 24px 48px rgba(16, 24, 40, 0.14), 0 8px 16px rgba(16, 24, 40, 0.08);
--gp-announce-h: 0px;
}
/* --------------------------------------------------------------------------
2. Motion & accessibility baseline
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
a, button, .pcard__action, .js-wishlist-toggle, input, select, textarea, .shop-toolbar__view a {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 2px solid var(--gp-gold);
outline-offset: 2px;
border-radius: 4px;
}
.header-menu-list a:focus-visible,
.shop-toolbar__view a:focus-visible {
outline-offset: -2px;
}
/* Comfortable minimum touch targets for icon-only controls */
.pcard__action,
.cart-box > ul > li > a,
.shop-toolbar__view a,
.smart-search-toggle {
min-width: 40px;
min-height: 40px;
}
/* --------------------------------------------------------------------------
3. Header / Navbar � sticky blur, shadow fade-in, logo shrink
-------------------------------------------------------------------------- */
.header-sticky {
transition: top var(--gp-dur) var(--gp-ease);
}
.header-sticky.sticky {
top: var(--gp-announce-h, 0px);
background: rgba(15, 16, 20, 0.82);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
transition: background var(--gp-dur) var(--gp-ease), box-shadow var(--gp-dur) var(--gp-ease),
top var(--gp-dur) var(--gp-ease);
animation: none !important;
}
.header-style-two.header-sticky.sticky {
background: rgba(255, 255, 255, 0.86);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
backdrop-filter: blur(16px) saturate(1.3);
}
.header-area .logo img {
transition: transform var(--gp-dur) var(--gp-ease-out);
transform-origin: left center;
}
.header-sticky.sticky .logo img {
transform: scale(0.86);
}
.header-menu-list > li > a {
position: relative;
transition: color var(--gp-dur-fast) var(--gp-ease);
}
.header-menu-list > li > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 1.5px;
background: currentColor;
opacity: 0;
transform: scaleX(0.4);
transform-origin: center;
transition: opacity var(--gp-dur-fast) var(--gp-ease), transform var(--gp-dur-fast) var(--gp-ease);
}
.header-menu-list > li:hover > a::after,
.header-menu-list > li.active > a::after {
opacity: 0.9;
transform: scaleX(1);
}
.cart-box > ul > li > a {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--gp-dur-fast) var(--gp-ease), opacity var(--gp-dur-fast) var(--gp-ease);
}
.cart-box > ul > li > a:hover {
transform: translateY(-1px);
opacity: 0.82;
}
.ht-dropdown {
border-radius: var(--gp-radius);
overflow: hidden;
box-shadow: var(--gp-shadow-lg);
border: 1px solid rgba(20, 21, 26, 0.06);
}
/* --------------------------------------------------------------------------
4. Announcement bar � always sticky, shrinks on scroll, soft pulse + shine
-------------------------------------------------------------------------- */
.promo-announce {
position: sticky;
top: 0;
z-index: 1055;
transition: padding var(--gp-dur) var(--gp-ease), font-size var(--gp-dur) var(--gp-ease);
overflow: hidden;
}
body.is-scrolled .promo-announce {
padding: 5px 14px;
font-size: 11px;
}
.promo-announce a {
position: relative;
}
.promo-announce__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gp-gold-soft);
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(217, 185, 140, 0.6);
animation: gpAnnouncePulse 2.4s ease-in-out infinite;
}
@keyframes gpAnnouncePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 185, 140, 0.55); transform: scale(1); }
50% { box-shadow: 0 0 0 5px rgba(217, 185, 140, 0); transform: scale(1.15); }
}
.promo-announce::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
transform: translateX(-120%);
animation: gpAnnounceShine 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes gpAnnounceShine {
0%, 60% { transform: translateX(-120%); }
85%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
.promo-announce__dot, .promo-announce::before { animation: none; }
}
/* --------------------------------------------------------------------------
5. Homepage hero (slider) � quality on par with the Flash Sale hero
-------------------------------------------------------------------------- */
.slider-area { position: relative; }
.slider-activation .slide {
position: relative;
}
.slider-activation .slide::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(10, 11, 14, 0.62) 0%, rgba(10, 11, 14, 0.28) 45%, rgba(10, 11, 14, 0.08) 75%);
pointer-events: none;
}
.slider-content {
position: relative;
z-index: 2;
}
p.custom-p-atastitle-slider {
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 12.5px;
font-weight: 600;
color: var(--gp-gold-soft) !important;
}
p.custom-p-atastitle-slider::before {
content: "" !important;
display: block !important;
width: 22px;
height: 1.5px;
background: var(--gp-gold-soft);
flex-shrink: 0;
}
p.custom-p-title-slider {
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.slider-content p:not([class]) {
max-width: 46ch;
opacity: 0.92;
}
.slide-btn {
display: flex;
gap: 14px;
margin-top: 8px;
}
.slide-btn a {
position: relative;
overflow: hidden;
padding: 14px 30px;
font-weight: 600;
letter-spacing: 0.02em;
transition: transform var(--gp-dur) var(--gp-ease), box-shadow var(--gp-dur) var(--gp-ease),
background var(--gp-dur-fast) ease, color var(--gp-dur-fast) ease, border-color var(--gp-dur-fast) ease;
}
.slide-btn a::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-18deg);
transition: left 0.55s var(--gp-ease);
pointer-events: none;
}
.slide-btn a:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
}
.slide-btn a:hover::before { left: 130%; }
/* Category feature area � a touch more breathing room */
.category-area { padding-top: 6px; }
.single-category,
.category-banner {
transition: transform var(--gp-dur) var(--gp-ease), box-shadow var(--gp-dur) var(--gp-ease);
}
.single-category:hover,
.category-banner:hover {
transform: translateY(-3px);
}
/* --------------------------------------------------------------------------
6. Section entrance / transitions (pure CSS, content-safe)
-------------------------------------------------------------------------- */
[data-reveal] {
animation: gpFadeUp 0.7s var(--gp-ease) both;
}
@keyframes gpFadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] { animation: none; opacity: 1; transform: none; }
}
.section-title,
.why-costa,
.our-product-area,
.testimonial-area {
transition: opacity var(--gp-dur) var(--gp-ease);
}
/* --------------------------------------------------------------------------
7. Product card
-------------------------------------------------------------------------- */
.pcard {
border-radius: 16px;
border-color: #eef0f4;
box-shadow: var(--gp-shadow-xs);
transition: box-shadow var(--gp-dur) var(--gp-ease), transform var(--gp-dur) var(--gp-ease),
border-color var(--gp-dur) var(--gp-ease);
}
.pcard:hover {
border-color: #e2e5ec;
box-shadow: var(--gp-shadow-md);
transform: translateY(-4px);
}
.pcard__media { border-radius: 16px 16px 0 0; overflow: hidden; }
.pcard__img {
transition: transform 0.5s var(--gp-ease), opacity 0.4s ease;
}
.pcard:hover .pcard__img:not(.pcard__img--alt) {
transform: scale(1.045);
}
.pcard__brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--gp-ink-soft);
}
.pcard__brand::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gp-gold);
flex-shrink: 0;
}
.pcard__name a {
transition: color var(--gp-dur-fast) ease;
}
.pcard:hover .pcard__name a { color: var(--gp-ink); }
.pcard__action {
border-radius: 50%;
box-shadow: var(--gp-shadow-sm);
transition: transform var(--gp-dur-fast) var(--gp-ease-out), box-shadow var(--gp-dur-fast) ease,
background var(--gp-dur-fast) ease, color var(--gp-dur-fast) ease;
}
.pcard__action:hover {
transform: translateY(-2px) scale(1.06);
box-shadow: var(--gp-shadow-md);
}
.pcard__action--wish[aria-pressed="true"] .fas.fa-heart {
animation: gpHeartBeat 0.4s var(--gp-ease-out);
}
@keyframes gpHeartBeat {
0% { transform: scale(0.7); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.pcard__highlights {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pcard__highlights li {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--gp-ink-soft);
line-height: 1.3;
}
.pcard__highlights li::before {
content: "";
flex-shrink: 0;
width: 13px;
height: 13px;
background-color: var(--gp-gold);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.pcard__warranty {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 600;
color: #7a8a76;
background: #f1f6ef;
border-radius: 999px;
padding: 3px 9px;
margin-top: 4px;
}
.pcard__warranty::before {
content: "";
width: 11px;
height: 11px;
flex-shrink: 0;
background-color: #7a8a76;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.pcard__cart-btn {
position: relative;
overflow: hidden;
border-radius: 10px;
transition: transform var(--gp-dur-fast) var(--gp-ease-out), box-shadow var(--gp-dur-fast) ease;
}
.pcard__cart-btn::before {
content: "";
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-18deg);
transition: left 0.5s var(--gp-ease);
pointer-events: none;
}
.pcard__cart-btn:not(:disabled):not(.is-disabled):hover {
transform: translateY(-1px);
box-shadow: var(--gp-shadow-sm);
}
.pcard__cart-btn:not(:disabled):not(.is-disabled):hover::before { left: 130%; }
/* --------------------------------------------------------------------------
8. Product list toolbar � filter / sort / breadcrumb / search
-------------------------------------------------------------------------- */
.breadcrumb-area {
background: var(--gp-cream);
border-bottom: 1px solid var(--gp-hairline);
}
.breadcrumb-area .breadcrumb-item a {
transition: color var(--gp-dur-fast) ease;
}
.breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
color: #c7cad2;
}
.shop-toolbar {
border-radius: var(--gp-radius);
border: 1px solid var(--gp-hairline);
box-shadow: var(--gp-shadow-xs);
}
.shop-toolbar__select,
.shop-toolbar__input {
transition: border-color var(--gp-dur-fast) ease, box-shadow var(--gp-dur-fast) ease,
background var(--gp-dur-fast) ease;
}
.shop-toolbar__select:hover,
.shop-toolbar__search:hover {
border-color: #d7dbe3;
}
.shop-toolbar__select:focus,
.shop-toolbar__input:focus {
border-color: var(--gp-gold);
box-shadow: 0 0 0 3px rgba(184, 135, 79, 0.14);
outline: none;
}
.shop-toolbar__view a {
transition: transform var(--gp-dur-fast) var(--gp-ease-out), background var(--gp-dur-fast) ease,
color var(--gp-dur-fast) ease, border-color var(--gp-dur-fast) ease;
}
.shop-toolbar__view a:hover { transform: translateY(-1px); }
/* AJAX result refresh: premium shimmer bar + soft blur instead of an
abrupt opacity flip. Hooks the existing #shopResults.is-loading class
already toggled by shop-toolbar.js � no JS changes needed. */
#shopResults {
position: relative;
transition: opacity var(--gp-dur) var(--gp-ease), filter var(--gp-dur) var(--gp-ease);
}
#shopResults.is-loading {
opacity: 0.5;
filter: saturate(0.9) blur(0.3px);
transition-duration: var(--gp-dur-fast);
}
#shopResults.is-loading::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 5;
background: linear-gradient(90deg, transparent, var(--gp-gold), transparent);
background-size: 50% 100%;
animation: gpBarSweep 1.1s ease-in-out infinite;
}
@keyframes gpBarSweep {
0% { background-position: -60% 0; }
100% { background-position: 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
#shopResults.is-loading::before { animation: none; }
}
/* --------------------------------------------------------------------------
9. Search experience
-------------------------------------------------------------------------- */
.categorie-search-box input,
.shop-toolbar__input {
transition: box-shadow var(--gp-dur-fast) ease, border-color var(--gp-dur-fast) ease;
}
.categorie-search-box input:focus {
box-shadow: 0 0 0 3px rgba(184, 135, 79, 0.18);
}
.smart-search__panel {
border-radius: var(--gp-radius);
box-shadow: var(--gp-shadow-lg);
border: 1px solid rgba(20, 21, 26, 0.06);
overflow: hidden;
animation: gpFadeUp 0.22s var(--gp-ease) both;
}
.smart-search__item {
transition: background var(--gp-dur-fast) ease;
}
.smart-search__item:hover,
.smart-search__item:focus {
background: var(--gp-cream);
}
.smart-search__thumb img { border-radius: 8px; }
.smart-search__state {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 26px 18px;
text-align: center;
color: var(--gp-ink-soft);
font-size: 13px;
}
.smart-search__state .promo-icon {
width: 26px;
height: 26px;
color: #c7cad2;
}
.smart-search__loading-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
}
.smart-search__loading-row .gp-skeleton {
border-radius: 8px;
}
.smart-search__loading-row .gp-skeleton--thumb { width: 40px; height: 40px; flex-shrink: 0; }
.smart-search__loading-row .gp-skeleton--lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.smart-search__loading-row .gp-skeleton--line { height: 10px; border-radius: 5px; }
.smart-search__loading-row .gp-skeleton--line.is-short { width: 55%; }
/* --------------------------------------------------------------------------
10. Empty states � wishlist / cart / search / 404
-------------------------------------------------------------------------- */
.wishlist-empty,
.cart-empty-state,
.shop-empty-premium,
.error-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 46vh;
padding: 56px 24px;
gap: 10px;
}
.wishlist-empty__icon,
.cart-empty-state__icon,
.shop-empty-premium__icon,
.error-container__icon {
width: 64px;
height: 64px;
color: var(--gp-gold-soft);
margin-bottom: 6px;
}
.wishlist-empty__title,
.cart-empty-state__title,
.shop-empty-premium__title,
.error-container__title {
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--gp-ink);
margin: 0;
}
.wishlist-empty__hint,
.cart-empty-state__hint,
.shop-empty-premium__hint,
.error-container__message {
color: var(--gp-ink-soft);
max-width: 46ch;
margin: 0;
font-size: 14.5px;
line-height: 1.55;
}
.error-container__code {
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--gp-gold);
margin: 0;
}
.wishlist-empty__cta,
.cart-empty-state__cta,
.shop-empty-premium__cta,
.error-container__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 13px 26px;
border-radius: 999px;
background: var(--gp-ink);
color: #fff !important;
font-weight: 600;
font-size: 14px;
text-decoration: none !important;
box-shadow: var(--gp-shadow-sm);
transition: transform var(--gp-dur) var(--gp-ease-out), box-shadow var(--gp-dur) var(--gp-ease),
background var(--gp-dur-fast) ease;
}
.wishlist-empty__cta:hover,
.cart-empty-state__cta:hover,
.shop-empty-premium__cta:hover,
.error-container__cta:hover {
transform: translateY(-2px);
box-shadow: var(--gp-shadow-md);
background: #24262e;
}
.wishlist-empty__cta .promo-icon,
.cart-empty-state__cta .promo-icon,
.shop-empty-premium__cta .promo-icon,
.error-container__cta .promo-icon {
width: 15px;
height: 15px;
}
.search-empty__hero { text-align: center; }
.search-empty__icon {
width: 52px;
height: 52px;
color: var(--gp-gold-soft);
margin-bottom: 8px;
}
/* --------------------------------------------------------------------------
11. Skeleton / shimmer loading (CSS-only, no JS required)
-------------------------------------------------------------------------- */
.gp-skeleton {
position: relative;
overflow: hidden;
background: #eef0f4;
}
.gp-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
animation: gpShimmer 1.6s ease-in-out infinite;
}
@keyframes gpShimmer {
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.gp-skeleton::after { animation: none; }
}
/* Product image shimmer while the image is still loading. A tiny script
(see main.js) adds .is-loaded to the media wrapper once the ![]()
has
loaded/errored, so the shimmer is a genuine transient loading state and
never lingers behind a fully-rendered photo. */
.wl-card__media { position: relative; overflow: hidden; }
.pcard__media:not(.is-loaded)::before,
.wl-card__media:not(.is-loaded)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
background-size: 200% 100%;
animation: gpMediaShimmer 1.8s ease-in-out infinite;
}
.pcard__media-link,
.wl-card__media img {
position: relative;
z-index: 1;
}
/* NOTE: .pcard__soldout and .pcard__promo-badges are intentionally NOT
touched here � they rely on position: absolute (set in custom.css /
promo-visibility.css) to pin themselves to the top-left/full-bleed of
.pcard__media. Elevating .pcard__media-link's stacking context above is
enough to keep them above the shimmer without breaking their placement. */
@keyframes gpMediaShimmer {
0% { background-position: 140% 0; }
100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
.pcard__media::before, .wl-card__media::before { animation: none; }
}
/* --------------------------------------------------------------------------
12. Footer
-------------------------------------------------------------------------- */
.site-footer {
background: #fff;
border-top: 1px solid var(--gp-hairline);
}
.site-footer__top {
padding: 72px 0 48px;
}
.site-footer .footer-title-p-custom {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gp-ink);
margin-bottom: 20px;
position: relative;
padding-bottom: 12px;
}
.site-footer .footer-title-p-custom::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 22px;
height: 2px;
background: var(--gp-gold);
}
.site-footer .footer-list li { margin-bottom: 11px; }
.site-footer .footer-list li a {
transition: color var(--gp-dur-fast) ease, padding-left var(--gp-dur-fast) ease;
}
.site-footer .footer-list li a:hover {
color: var(--gp-gold);
padding-left: 3px;
}
.site-footer__about { line-height: 1.75; color: var(--gp-ink-soft); max-width: 42ch; }
.site-footer__social-col ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__social-col ul li { margin: 0 !important; }
.site-footer__social-col ul li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--gp-hairline);
color: var(--gp-ink);
transition: transform var(--gp-dur-fast) var(--gp-ease-out), box-shadow var(--gp-dur-fast) ease,
background var(--gp-dur-fast) ease, border-color var(--gp-dur-fast) ease, color var(--gp-dur-fast) ease;
}
.site-footer__social-col ul li a span,
.site-footer__social-col ul li a i { font-size: 15px; }
.site-footer__social-col ul li a:hover {
transform: translateY(-2px);
background: var(--gp-ink);
border-color: var(--gp-ink);
color: #fff;
box-shadow: var(--gp-shadow-sm);
}
.footer-bottom.site-footer__bottom {
background: var(--gp-cream) !important;
padding: 22px 0;
border-top: 1px solid var(--gp-hairline);
}
.footer-copy-right p { color: var(--gp-ink-soft); font-size: 12.5px; margin: 0; }
/* --------------------------------------------------------------------------
13. Global button system
-------------------------------------------------------------------------- */
.buttons-cart input[type="button"],
.buttons-cart a,
.wc-proceed-to-checkout a,
.cart-checkout,
.btn-reviews--primary,
.pcard__cart-btn,
.slide-btn a,
.pro-cart {
transition: transform var(--gp-dur) var(--gp-ease-out), box-shadow var(--gp-dur) var(--gp-ease),
background var(--gp-dur-fast) ease, color var(--gp-dur-fast) ease, border-color var(--gp-dur-fast) ease;
}
.buttons-cart input[type="button"]:hover,
.wc-proceed-to-checkout a:hover,
.cart-checkout:hover,
.btn-reviews--primary:hover,
.pro-cart:hover {
transform: translateY(-2px);
box-shadow: var(--gp-shadow-sm);
}
.quatity-stock input.quantity {
transition: border-color var(--gp-dur-fast) ease, box-shadow var(--gp-dur-fast) ease;
}
.quatity-stock input.quantity:focus {
border-color: var(--gp-gold);
box-shadow: 0 0 0 3px rgba(184, 135, 79, 0.14);
outline: none;
}
/* --------------------------------------------------------------------------
14. Icon system � consistent stroke / size / alignment
-------------------------------------------------------------------------- */
.promo-icon,
.wishlist-empty__icon,
.cart-empty-state__icon,
.error-container__icon,
.search-empty__icon {
vertical-align: middle;
flex-shrink: 0;
}
.pcard__action i,
.cart-box .icon,
.header-menu-list .fa-angle-down {
line-height: 1;
vertical-align: middle;
}
/* --------------------------------------------------------------------------
15. Mobile refinements
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.site-footer__top { padding: 52px 0 32px; }
.wishlist-empty, .cart-empty-state, .error-container { padding: 44px 18px; min-height: 38vh; }
}
@media (max-width: 767px) {
body.is-scrolled .promo-announce { padding: 4px 10px; font-size: 10.5px; }
.slide-btn { flex-wrap: wrap; }
.slide-btn a { padding: 12px 22px; }
.pcard:hover { transform: none; }
.site-footer__social-col ul { justify-content: center; }
}
@media (hover: none) {
.pcard__actions { opacity: 1; transform: none; pointer-events: auto; }
}
/* ==========================================================================
SPRINT 3.1 � GLOBAL PREMIUM LAYOUT REFINEMENT
==========================================================================
Layout/usability fixes on top of the Sprint 3 visual layer. No redesign:
only height/spacing/proportion corrections so the premium look holds up
from 344px to 2560px. Loads after everything else in this file, so these
rules win without needing !important.
========================================================================== */
/* --------------------------------------------------------------------------
16. Header height � collapse the oversized 35px/8px nav padding (was
~110px navbar + announce = ~143px total) down to the 60�64px navbar /
30�34px announce target (~96px total), on every viewport, scrolled or not.
-------------------------------------------------------------------------- */
.header-menu-list > li,
.cart-box > ul > li,
.sticky .header-menu-list > li,
.sticky .cart-box > ul > li {
padding: 11px 0;
}
.header-menu-list > li > a {
padding: 6px clamp(10px, 1.1vw, 18px);
line-height: 24px;
}
.logo img {
height: clamp(24px, 2.2vw, 30px);
}
@media (max-width: 575px) {
.promo-announce { padding: 7px 12px; }
}
/* --------------------------------------------------------------------------
17. Adaptive spacing � clamp() instead of fixed px so the nav never feels
cramped on a 1366 laptop nor absurdly wide on a 2560 ultra-wide monitor.
-------------------------------------------------------------------------- */
.padding-area {
padding-left: clamp(16px, 5vw, 75px);
padding-right: clamp(16px, 5vw, 75px);
}
.cart-box > ul > li:not(:first-child) {
margin-left: clamp(14px, 2vw, 28px);
}
.header-menu-list > li:not(:first-child) {
margin-left: clamp(0px, 0.3vw, 6px);
}
/* --------------------------------------------------------------------------
18. Product image � never crop the subject. The Sprint 3 hover zoom could
push tripod heads/legs past the overflow:hidden edge; premium hover cue
now stays on the card lift only (translateY), never on the photo itself.
-------------------------------------------------------------------------- */
.pcard:hover .pcard__img:not(.pcard__img--alt) {
transform: none;
}
.pcard__media-link {
padding: 12px;
}
/* --------------------------------------------------------------------------
19. Filter toolbar � slightly more compact, everything same height.
-------------------------------------------------------------------------- */
.shop-toolbar {
padding: 8px 10px;
}
.shop-toolbar__filters {
gap: 8px;
}
.shop-toolbar__input,
.shop-toolbar__select {
height: 40px;
}
/* --------------------------------------------------------------------------
20. PDP promo / flash-sale cards � tidy spacing only, same design.
-------------------------------------------------------------------------- */
.flash-hero--hero .flash-hero__inner {
padding: 36px 38px 34px;
gap: 18px;
}
.promo-berlaku {
margin: 16px 0;
}
/* --------------------------------------------------------------------------
21. Footer � trim resting height a touch, keep hierarchy/whitespace.
-------------------------------------------------------------------------- */
.site-footer__top {
padding: 60px 0 40px;
}
/* --------------------------------------------------------------------------
22. Responsive safety net - guard against accidental overflow without
touching html/body overflow (that would break position: sticky on the
announcement bar / header).
-------------------------------------------------------------------------- */
.container, .container-fluid { max-width: 100%; }
img, svg { max-width: 100%; }
@media (max-width: 420px) {
.header-menu-list > li > a { padding: 6px 10px; }
}
/* ==========================================================================
SPRINT 3.2 � GLOBAL EXPERIENCE & INTERACTION
==========================================================================
UI/UX experience layer only. Sections:
23. Bug fixes (active nav, cart badge)
24. Global loading system (page transition, button, skeleton, image, search)
25. Global toast / feedback
26. Empty states (additional)
27. Micro interactions (consistency pass)
28. prefers-reduced-motion
========================================================================== */
/* --------------------------------------------------------------------------
23a. Active navigation � give the route-matched menu item a visible,
premium indicator (gold underline) instead of relying on default
styling. Presentation-only; the "active" class is now computed per-route
in header.blade.php instead of being hardcoded on "Home".
-------------------------------------------------------------------------- */
.header-menu-list > li.active > a {
color: var(--gp-gold, #b8874f);
position: relative;
}
.header-menu-list > li.active > a::after {
content: "";
position: absolute;
left: clamp(10px, 1.1vw, 18px);
right: clamp(10px, 1.1vw, 18px);
bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--gp-gold, #b8874f);
}
/* --------------------------------------------------------------------------
23b. Cart badge � Sprint 3.1 shrank the navbar from ~110px to ~62px per
item, but the badge's absolute top/left offsets were tuned for the old
tall cell, so the count bubble ended up sitting almost fully on top of
the cart glyph instead of at its corner. Recompute the offset for the
new compact height and pin it as a rigid corner badge that can never
drift independently of the icon (no separate transform/animation that
could desync during momentum/overscroll bounce on mobile browsers).
-------------------------------------------------------------------------- */
.cart-box > ul > li > a {
position: relative;
}
.cart-box > ul > li > a span + span.total-pro,
.sticky .cart-box > ul > li > a span + span.total-pro {
top: 4px;
left: 20px;
right: auto;
bottom: auto;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 10px;
/* Keep the badge glued to the icon as one rigid layer; avoids any
sub-pixel jitter/drift relative to the icon during rubber-band /
overscroll bounce scrolling on iOS Safari. */
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
@media (max-width: 575px) {
.cart-box > ul > li > a span + span.total-pro {
top: 2px;
left: 18px;
}
}
/* --------------------------------------------------------------------------
24. Global page-transition loader � a slim gold progress line at the very
top of the viewport that appears the instant a user clicks an internal
link or submits a form, so full-page navigations always get a premium,
branded "something is happening" cue instead of a blank/frozen tab.
No JS framework, no browser spinner: pure CSS animation driven by a class
toggle from costa-experience.js.
-------------------------------------------------------------------------- */
.costa-page-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 100000;
pointer-events: none;
opacity: 0;
transition: opacity 150ms var(--gp-ease);
}
.costa-page-loader.is-active {
opacity: 1;
}
.costa-page-loader__bar {
display: block;
height: 100%;
width: 40%;
background: linear-gradient(90deg, transparent, var(--gp-gold, #b8874f), var(--gp-gold-soft, #d9b98c), transparent);
box-shadow: 0 0 10px rgba(184, 135, 79, 0.55);
}
.costa-page-loader.is-active .costa-page-loader__bar {
animation: gpPageLoaderSweep 900ms ease-in-out infinite;
}
@keyframes gpPageLoaderSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
.costa-page-loader.is-active .costa-page-loader__bar {
animation: none;
transform: translateX(0);
width: 100%;
}
}
/* --------------------------------------------------------------------------
25. Button loading state � "Memproses..." affordance for Add to Cart,
Buy Now, Checkout, Voucher, Validate actions. A small CSS-only spinner
replaces the button's leading edge; text swap (if any) is handled by
costa-experience.js. Never a browser-default spinner/cursor.
-------------------------------------------------------------------------- */
.gp-btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
opacity: 0.85;
}
.gp-btn-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
animation: gpBtnSpin 700ms linear infinite;
}
/* Dark-on-light buttons (outline/ghost variants) get a dark spinner instead
of white, so it stays visible against a light background. */
.gp-btn-loading.pcard__cart-btn--outline::after,
.gp-btn-loading.wl-card__btn--ghost::after {
border-color: rgba(20, 21, 26, 0.25);
border-top-color: var(--gp-ink, #14151a);
}
@keyframes gpBtnSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.gp-btn-loading::after { animation-duration: 1400ms; }
}
/* Checkout "Apply Voucher" button already toggles this class via existing
JS (no JS change needed) � it just never had a visual definition. */
.voucher-loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.voucher-loading::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-left: 8px;
vertical-align: -2px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
animation: gpBtnSpin 700ms linear infinite;
}
/* --------------------------------------------------------------------------
26. Toast / Global Feedback � success / error / warning / info. Dark
Luxury card with a gold-accented icon chip, stacked top-right on desktop
and full-width top on mobile. Auto-dismiss, swipe-free, keyboard-safe.
-------------------------------------------------------------------------- */
.costa-toast-region {
position: fixed;
top: max(16px, env(safe-area-inset-top));
right: 16px;
z-index: 100001;
display: flex;
flex-direction: column;
gap: 10px;
max-width: min(380px, calc(100vw - 32px));
pointer-events: none;
}
.costa-toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 14px 14px 16px;
border-radius: 12px;
background: #14151a;
color: #f4f1ec;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(184, 135, 79, 0.25);
font-size: 13.5px;
line-height: 1.45;
pointer-events: auto;
opacity: 0;
transform: translateY(-10px) scale(0.98);
transition: opacity 240ms var(--gp-ease), transform 240ms var(--gp-ease);
}
.costa-toast.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.costa-toast.is-leaving {
opacity: 0;
transform: translateY(-6px) scale(0.98);
transition-duration: 180ms;
}
.costa-toast__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
background: rgba(184, 135, 79, 0.18);
color: var(--gp-gold-soft, #d9b98c);
}
.costa-toast--success .costa-toast__icon {
background: rgba(60, 179, 113, 0.18);
color: #6bd39a;
}
.costa-toast--error .costa-toast__icon {
background: rgba(224, 90, 90, 0.18);
color: #ee8686;
}
.costa-toast--warning .costa-toast__icon {
background: rgba(216, 160, 60, 0.2);
color: #e8bd6a;
}
.costa-toast__msg {
flex: 1 1 auto;
padding-top: 2px;
}
.costa-toast__close {
flex: 0 0 auto;
background: none;
border: none;
color: rgba(244, 241, 236, 0.55);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 2px;
transition: color 150ms ease;
}
.costa-toast__close:hover {
color: #fff;
}
@media (max-width: 575px) {
.costa-toast-region {
left: 16px;
right: 16px;
top: max(12px, env(safe-area-inset-top));
max-width: none;
}
.costa-toast {
transform: translateY(-14px) scale(1);
}
}
/* ==========================================================================
SPRINT 3.2A - HEADER STABILITY & OPTICAL ALIGNMENT
==========================================================================
Root causes found (measured with Playwright, see scripts/header-*-audit.mjs):
1. "Jitter" in the announcement bar text: the text itself NEVER moves
(0.000px variance sampled at 60fps over 9s). The perceived vibration is
an optical illusion caused by the gold dot's pulse (scale 1 -> 1.15 +
animated box-shadow) sitting only 6px from the text - a large, frequent
motion right next to static text tricks peripheral vision into reading
the text as unstable. Fix: reduce pulse amplitude + isolate the dot's
paint into its own compositor layer so it never forces a repaint of the
sibling text.
2. Announcement bar height: already constant (33.4px, 0.000 variance) -
there is no live countdown inside this bar, so nothing to fix here -
kept as a locked assertion via a fixed line-height below for safety.
3. "Leaning left" perception: geometry is perfectly symmetric (12px / 12px
measured at 375 / 1440 / 1920px). The imbalance is visual WEIGHT, not
layout: a solid, glowing gold dot on the left vs. a thin 2px outline
chevron on the right. Fix: soften the dot, strengthen the chevron so
both sides read with similar "ink".
4. Navbar balance: Search/Cart/Profile render an 18px icon glyph inside a
40x40 box, but Language renders bare 14px text in the same box with no
icon - a real weight mismatch, not just perception. Fix: give the
language control a matching pill treatment so it reads as a control of
the same visual family as its icon siblings.
5. Scrollbar: no `100vw` usage found on header/announcement bar, so a
Windows reserved scrollbar gutter does not by itself break centering.
Added `scrollbar-gutter: stable` defensively so the centered column
never jumps a few pixels between pages that do/don't scroll.
-------------------------------------------------------------------------- */
/* 3.2A-1: soften the announcement dot so its motion no longer reads as
text jitter, and promote it to its own compositor layer so its
box-shadow repaint never touches the sibling text's paint pass. */
.promo-announce__dot {
will-change: transform, box-shadow;
transform: translateZ(0) scale(1);
animation: gpAnnouncePulseSoft 2.4s ease-in-out infinite;
}
@keyframes gpAnnouncePulseSoft {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 185, 140, 0.45); transform: translateZ(0) scale(1); }
50% { box-shadow: 0 0 0 3px rgba(217, 185, 140, 0); transform: translateZ(0) scale(1.08); }
}
/* Isolate the shine sweep on its own layer too, and give the sticky bar a
stable stacking context (transform: none but a dedicated layer) so the
continuously-running pseudo-element animation never forces the browser to
re-rasterize the text glyphs alongside it. */
.promo-announce::before {
will-change: transform;
}
.promo-announce__text {
/* Locks glyph rasterization to its own layer: guarantees the text paint
is never re-composited as a side effect of the dot/shine animations. */
transform: translateZ(0);
backface-visibility: hidden;
}
/* 3.2A-3: rebalance visual weight between the dot (left) and chevron
(right) so the line reads as optically centered, not just mathematically
centered. Chevron gets a touch more stroke + full opacity to match the
dot's "ink" without changing its 6x6px footprint (geometry untouched). */
.promo-announce a::after {
border-right-width: 1.6px;
border-bottom-width: 1.6px;
opacity: 1;
}
/* Locked height guard: line-height + padding are fixed values only (no
content-length-dependent sizing), so the bar cannot change height when
countdown/label text changes length. */
.promo-announce {
line-height: 1.4;
}
/* 3.2A-4: give the language switcher the same visual "weight class" as its
icon siblings (Search / Cart / Profile) - a small pill instead of bare
text - so the right-hand icon cluster reads as one consistent family. */
.cart-box > ul > li:last-child > a {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
padding: 5px 10px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
min-width: 40px;
transition: transform var(--gp-dur-fast) var(--gp-ease), opacity var(--gp-dur-fast) var(--gp-ease),
border-color var(--gp-dur-fast) var(--gp-ease), background var(--gp-dur-fast) var(--gp-ease);
}
.cart-box > ul > li:last-child > a:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.06);
}
.header-style-two .cart-box > ul > li:last-child > a {
border-color: rgba(20, 21, 26, 0.22);
}
.header-style-two .cart-box > ul > li:last-child > a:hover {
border-color: rgba(20, 21, 26, 0.4);
background: rgba(20, 21, 26, 0.05);
}
/* 3.2A-5: scrollbar-gutter audit conclusion (no CSS change applied here -
see report). `scrollbar-gutter: stable` was tested and rejected: it
forces a permanent reserved strip on EVERY platform (including macOS /
mobile / overlay-scrollbar systems that never had this "problem"),
which measurably shrank the announcement bar and every full-bleed
section by ~17px on platforms that didn't need it - a regression, not a
fix. The header/announcement bar already center using `%`/flex-based
widths (no `100vw` anywhere in the header), which are computed against
`document.documentElement.clientWidth` and therefore already exclude a
classic Windows scrollbar automatically. Verified: 12px/12px symmetric
padding holds at 375 / 1440 / 1920px regardless of scrollbar presence. */
@media (prefers-reduced-motion: reduce) {
.promo-announce__dot { animation: none; }
.promo-announce__text, .promo-announce::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.costa-toast { transition-duration: 1ms; }
}
/* --------------------------------------------------------------------------
27. Skeleton loading - reusable ghost-block utilities for any container
opting in via [data-skeleton] children, toggled with .gp-skeleton-active
by CostaLoading.skeleton(). Same shimmer language as product image
loading (gpShimmer), so it always reads as "COSTA premium", never a
generic gray box.
-------------------------------------------------------------------------- */
[data-skeleton] {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #eee 25%, #f6f3ee 37%, #eee 63%);
background-size: 400% 100%;
border-radius: 8px;
color: transparent !important;
}
[data-skeleton] * { visibility: hidden; }
.gp-skeleton-active [data-skeleton] {
animation: gpShimmerSlide 1.4s ease-in-out infinite;
}
@keyframes gpShimmerSlide {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.gp-skeleton-active [data-skeleton] { animation: none; }
}
/* ==========================================================================
SPRINT 3.3 - PRODUCTION EXPERIENCE COMPLETION & CONTENT VALIDATION
==========================================================================
Root cause (confirmed via CSSOM rule inspection, not guessing): when the
footer was restyled from dark (custom.css era) to light (global-premium.css,
Sprint 3), several legacy dark-theme text-color rules in custom.css were
never migrated and still win the cascade because they use `!important`:
custom.css .single-footer li a { color: #fff !important; }
custom.css .site-footer .footer-list li a:hover { color: #fff !important; }
custom.css .site-footer .contact-area li { color: rgba(255,255,255,.88); }
custom.css .store-rating--footer .store-rating__label/
.store-rating__count/.store-rating__max { color: rgba(255,255,255,.7); }
custom.css .store-rating--footer .store-rating__score { color: #fff; }
custom.css .store-rating--footer .store-rating__cta { color: #ffb4ba; }
Result: white (or near-white/pink) text on the now-white footer background
- i.e. genuinely invisible content, not "empty sections" as it first
appears. This is the actual root cause behind "footer masih berupa
template dan beberapa section kosong": Ekstra links, contact list
(address/WhatsApp/email/hours), social icon labels, and the whole store
rating block (score, count, CTA) were all present in the DOM but
unreadable. Fixed below by re-asserting the light-theme ink colors with
matching (or higher) specificity/importance, last in the stylesheet.
-------------------------------------------------------------------------- */
.site-footer .single-footer li a {
color: var(--gp-ink) !important;
}
.site-footer .footer-list li a:hover {
color: var(--gp-gold) !important;
}
.site-footer .contact-area li {
color: var(--gp-ink-soft) !important;
}
.site-footer .contact-area li a {
color: var(--gp-ink-soft) !important;
text-decoration: none;
}
.site-footer .contact-area li a:hover {
color: var(--gp-gold) !important;
}
.store-rating--footer .store-rating__label,
.store-rating--footer .store-rating__count,
.store-rating--footer .store-rating__max {
color: var(--gp-ink-soft) !important;
}
.store-rating--footer .store-rating__score {
color: var(--gp-ink) !important;
}
.store-rating--footer .store-rating__cta,
.store-rating--footer.store-rating--link .store-rating__cta {
color: var(--gp-gold) !important;
}
a.store-rating--footer.store-rating--link:hover .store-rating__cta {
color: var(--gp-ink) !important;
}
/* Local WhatsApp icon (replaces a hotlinked Wikipedia SVG - see Phase 2/3
asset audit). Sized to match the previous 60x60 floating button. */
.whatsapp-icon img {
width: 60px;
height: 60px;
cursor: pointer;
}
/* Homepage "service" big-image fallback (Phase 2/3 asset audit): shown only
when the CMS-configured banner file is missing on disk, so the section
never renders a broken image icon or collapses to an empty gap. Keeps a
banner-like aspect ratio so surrounding spacing/CLS stays unchanged
whether the real image loads or the fallback shows. */
.dron-img__fallback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
aspect-ratio: 16 / 6.2;
width: 100%;
max-width: 1100px;
margin: 0 auto;
border-radius: var(--gp-radius-lg);
background: linear-gradient(180deg, var(--gp-cream) 0%, #fff 100%);
border: 1px solid var(--gp-hairline);
color: var(--gp-ink-soft);
}
.dron-img__fallback i {
font-size: 42px;
color: var(--gp-gold);
}
.dron-img__fallback span {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 767px) {
.dron-img__fallback { aspect-ratio: 16 / 9; border-radius: var(--gp-radius); }
}
/* ==========================================================================
SPRINT 4 - CUSTOMER FEEDBACK & TRUST ECOSYSTEM
========================================================================== */
.feedback-page { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); background: var(--gp-cream); }
.feedback-card {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--gp-hairline);
border-radius: var(--gp-radius-lg);
padding: clamp(24px, 4vw, 48px);
box-shadow: 0 20px 60px rgba(20, 21, 26, 0.06);
}
.feedback-card--center { text-align: center; }
.feedback-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.feedback-badge--verified { background: rgba(184, 135, 79, 0.12); color: var(--gp-gold); }
.feedback-card__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--gp-ink); margin: 0 0 12px; }
.feedback-card__intro { color: var(--gp-ink-soft); font-size: 15px; line-height: 1.7; max-width: 56ch; margin: 0 auto 12px; }
.feedback-card--center .feedback-card__intro { margin-left: auto; margin-right: auto; }
.feedback-card__reward {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--gp-gold);
background: rgba(184, 135, 79, 0.08);
border-radius: 999px;
padding: 8px 16px;
margin-top: 8px;
}
.feedback-alert { border-radius: var(--gp-radius); padding: 14px 18px; margin: 20px 0; font-size: 14px; }
.feedback-alert--error { background: #fdecec; color: #a12626; border: 1px solid #f3c4c4; }
.feedback-alert ul { padding-left: 18px; margin: 0; }
.feedback-section { border: 0; padding: 0; margin: 32px 0 0; }
.feedback-section legend {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gp-gold);
padding: 0 0 12px;
width: 100%;
border-bottom: 1px solid var(--gp-hairline);
margin-bottom: 20px;
}
.feedback-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.feedback-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feedback-grid--span2 { grid-column: 1 / -1; }
@media (max-width: 575px) { .feedback-grid--2 { grid-template-columns: 1fr; } }
.feedback-field { display: flex; flex-direction: column; gap: 6px; }
.feedback-field label { font-size: 13px; font-weight: 600; color: var(--gp-ink); }
.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field input[type="date"],
.feedback-field select,
.feedback-field textarea {
border: 1px solid var(--gp-hairline);
border-radius: 10px;
padding: 12px 14px;
font-size: 14.5px;
color: var(--gp-ink);
background: #fff;
transition: border-color var(--gp-dur-fast) var(--gp-ease), box-shadow var(--gp-dur-fast) var(--gp-ease);
font-family: inherit;
}
.feedback-field input:focus-visible,
.feedback-field select:focus-visible,
.feedback-field textarea:focus-visible {
outline: none;
border-color: var(--gp-gold);
box-shadow: 0 0 0 3px rgba(184, 135, 79, 0.15);
}
.feedback-field input[readonly] { background: var(--gp-cream); color: var(--gp-ink-soft); }
.feedback-hint { font-size: 12.5px; color: var(--gp-ink-soft); margin: 2px 0 0; }
.feedback-field--checkbox { margin-top: 8px; }
.feedback-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--gp-ink); cursor: pointer; }
.feedback-checkbox input { width: 18px; height: 18px; accent-color: var(--gp-gold); }
.feedback-ratings { display: flex; flex-direction: column; gap: 14px; }
.feedback-rating-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 10px 0;
border-bottom: 1px dashed var(--gp-hairline);
}
.feedback-rating-row:last-child { border-bottom: 0; }
.feedback-rating-row__label { font-size: 14px; font-weight: 600; color: var(--gp-ink); }
.feedback-star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.feedback-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feedback-star-input label { color: #d9d9d9; cursor: pointer; line-height: 1; display: inline-flex; border-radius: 4px; transition: color var(--gp-dur-fast) var(--gp-ease); }
.feedback-star-input input:focus-visible ~ label { outline: 2px solid var(--gp-gold); outline-offset: 2px; }
.feedback-star-input input:checked ~ label,
.feedback-star-input label:hover,
.feedback-star-input label:hover ~ label { color: var(--gp-gold); }
.feedback-photo-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.feedback-photo-slot {
position: relative;
width: 84px;
height: 84px;
border-radius: 12px;
overflow: hidden;
border: 1.5px dashed var(--gp-hairline);
background: var(--gp-cream);
}
.feedback-photo-slot.has-image { border-style: solid; }
.feedback-photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feedback-photo-slot--empty { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gp-gold); cursor: pointer; }
.feedback-photo-slot__remove {
position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 999px;
background: rgba(20, 21, 26, 0.72); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
}
.feedback-submit {
margin-top: 32px;
width: 100%;
background: var(--gp-gold);
color: #fff;
border: 0;
border-radius: 999px;
padding: 16px 24px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform var(--gp-dur-fast) var(--gp-ease), box-shadow var(--gp-dur-fast) var(--gp-ease), opacity var(--gp-dur-fast) var(--gp-ease);
}
.feedback-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(184, 135, 79, 0.32); }
.feedback-submit:disabled { opacity: 0.6; cursor: progress; }
.feedback-submit-note { font-size: 12px; color: var(--gp-ink-soft); text-align: center; margin: 12px 0 0; }
.feedback-thanks-icon {
width: 64px; height: 64px; border-radius: 50%; background: rgba(184, 135, 79, 0.12); color: var(--gp-gold);
display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 20px;
}
.feedback-voucher-reveal {
margin: 28px auto 0;
max-width: 360px;
background: var(--gp-cream);
border: 1px dashed var(--gp-gold);
border-radius: var(--gp-radius);
padding: 20px;
}
.feedback-voucher-reveal__label { font-size: 12.5px; color: var(--gp-ink-soft); margin: 0 0 8px; }
.feedback-voucher-reveal__code {
font-size: 24px; font-weight: 800; letter-spacing: 0.1em; color: var(--gp-ink);
border: 1.5px dashed var(--gp-gold); border-radius: 10px; padding: 10px 16px; background: #fff;
}
.feedback-voucher-reveal__note { font-size: 12px; color: var(--gp-ink-soft); margin: 10px 0 0; }
.feedback-thanks-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.feedback-btn {
display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border-radius: 999px;
font-size: 14px; font-weight: 700; text-decoration: none; transition: transform var(--gp-dur-fast) var(--gp-ease);
}
.feedback-btn:hover { transform: translateY(-1px); }
.feedback-btn--gold { background: var(--gp-gold); color: #fff; }
.feedback-btn--ghost { background: transparent; color: var(--gp-ink); border: 1px solid var(--gp-hairline); }
/* Homepage "Suara Pelanggan" — Sprint 4 order-feedback testimonial section */
.of-testimonials { padding: clamp(48px, 6vw, 88px) 0; background: #fff; }
.of-testimonials__head { text-align: center; max-width: 560px; margin: 0 auto clamp(28px, 4vw, 44px); }
.of-testimonials__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gp-gold); }
.of-testimonials__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--gp-ink); margin: 8px 0 10px; }
.of-testimonials__intro { color: var(--gp-ink-soft); font-size: 14.5px; line-height: 1.7; }
.of-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .of-testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .of-testimonials__grid { grid-template-columns: 1fr; } }
.of-card {
background: var(--gp-cream);
border: 1px solid var(--gp-hairline);
border-radius: var(--gp-radius-lg);
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform var(--gp-dur-fast) var(--gp-ease), box-shadow var(--gp-dur-fast) var(--gp-ease);
}
.of-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 21, 26, 0.08); }
.of-card__stars { color: var(--gp-gold); font-size: 13px; letter-spacing: 2px; }
.of-card__comment { color: var(--gp-ink); font-size: 14.5px; line-height: 1.7; margin: 0; }
.of-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.of-card__name { font-size: 13.5px; font-weight: 700; color: var(--gp-ink); }
.of-card__meta { font-size: 12px; color: var(--gp-ink-soft); display: block; }
.of-card__badge { font-size: 11px; font-weight: 700; color: var(--gp-gold); background: rgba(184,135,79,0.1); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.of-card__reply { background: #fff; border-left: 3px solid var(--gp-gold); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--gp-ink-soft); }
.of-card__reply strong { color: var(--gp-gold); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.of-testimonials__cta { text-align: center; margin-top: clamp(24px, 4vw, 36px); }