/** * VSLocks — Perbaikan feedback Figma (review klien 11 & 15 Juli 2026) * * Layer terpisah supaya mudah di-review dan di-revert. Dimuat SETELAH * woo-dark-theme.css dan micro-interactions.css. * * Semua warna merah memakai --vs-red yang sudah ada di woo-dark-theme.css. * JANGAN hard-code merah di sini — kalau klien memilih merah lain, cukup * ubah --vs-red di satu tempat. * * Sumber tiap aturan dicatat dengan node Figma-nya. */ /* ─────────────────────────────────────────────────────────────────────────── 1. BREADCRUMB / TABS — Figma 701:6232 (+ 558:18866, 558:17037, 712:7552) Client: "Active Tab color should always be Red, Inactive tab color to be White, usually inactive tab is Parent tab." woo-dark-theme.css sets: body.woocommerce-page a { color: var(--vs-red) !important; } /* 0,1,2 */ so breadcrumb parent links stay RED unless we beat that specificity. Every rule below must include body.woocommerce-page / body.woocommerce (or equal) AND !important. ─────────────────────────────────────────────────────────────────────────── */ /* Base trail colour (spans between links) */ body.woocommerce-page .woocommerce-breadcrumb, body.woocommerce .woocommerce-breadcrumb, body.woocommerce-page .wd-breadcrumbs, body.woocommerce .wd-breadcrumbs, .woocommerce .woocommerce-breadcrumb, .wd-breadcrumbs { color: #ffffff !important; } /* * INACTIVE / PARENT tabs — always white. * Covers plain , WoodMart .wd-last-link (parent of current), and * mid-trail category links on PDP. */ body.woocommerce-page .woocommerce-breadcrumb a, body.woocommerce .woocommerce-breadcrumb a, body.woocommerce-page .wd-breadcrumbs a, body.woocommerce .wd-breadcrumbs a, body.woocommerce-page .wd-breadcrumbs .wd-last-link, body.woocommerce .wd-breadcrumbs .wd-last-link, body.woocommerce-page .single-breadcrumbs-wrapper a, body.woocommerce .single-breadcrumbs-wrapper a, .single-product .woocommerce-breadcrumb a, .single-product .wd-breadcrumbs a, .single-product .wd-breadcrumbs .wd-last-link { color: #ffffff !important; } /* Hover on inactive: slight emphasis without stealing active red */ body.woocommerce-page .woocommerce-breadcrumb a:hover, body.woocommerce .woocommerce-breadcrumb a:hover, body.woocommerce-page .wd-breadcrumbs a:hover, body.woocommerce .wd-breadcrumbs a:hover, body.woocommerce-page .wd-breadcrumbs .wd-last-link:hover, body.woocommerce .wd-breadcrumbs .wd-last-link:hover, .single-product .woocommerce-breadcrumb a:hover, .single-product .wd-breadcrumbs a:hover { color: #ffffff !important; opacity: 0.85; } /* Separator "/" — muted so it does not compete with parent/active */ body.woocommerce-page .wd-breadcrumbs .wd-delimiter, body.woocommerce .wd-breadcrumbs .wd-delimiter, body.woocommerce-page .woocommerce-breadcrumb .delimiter, body.woocommerce .woocommerce-breadcrumb .delimiter, .wd-breadcrumbs .wd-delimiter, .woocommerce .woocommerce-breadcrumb .delimiter { color: #6b7280 !important; opacity: 1 !important; } /* * ACTIVE tab — always brand red. * WoodMart uses .wd-last; Woo uses .breadcrumb-last / .breadcrumb_last. */ body.woocommerce-page .wd-breadcrumbs .wd-last, body.woocommerce .wd-breadcrumbs .wd-last, body.woocommerce-page .woocommerce-breadcrumb .breadcrumb-last, body.woocommerce .woocommerce-breadcrumb .breadcrumb-last, body.woocommerce-page .woocommerce-breadcrumb .breadcrumb_last, body.woocommerce .woocommerce-breadcrumb .breadcrumb_last, body.woocommerce-page .single-breadcrumbs-wrapper .wd-last, body.woocommerce .single-breadcrumbs-wrapper .wd-last, .single-product .wd-breadcrumbs .wd-last, .single-product .woocommerce-breadcrumb .breadcrumb-last, .single-product .woocommerce-breadcrumb .breadcrumb_last, .wd-breadcrumbs .wd-last, .woocommerce .woocommerce-breadcrumb .breadcrumb-last { color: var(--vs-red) !important; opacity: 1 !important; } /* * PRODUCT DETAIL content tabs (Description / Reviews / Shipping …) * Same Figma rule 701:6232: active = red, inactive = white. * WoodMart: .wd-nav.wd-nav-tabs.tabs.wc-tabs.wd-style-underline-reverse * Active class is .active (Woo) and sometimes .wd-active. * Beats woo-dark-theme + WoodMart underline styles on single product. */ body.single-product .woocommerce-tabs .tabs li > a, body.single-product .wd-nav-tabs > li > a, body.single-product .wd-nav-tabs > li > a .nav-link-text, body.single-product .wd-tabs-header a, body.single-product .wd-accordion-title, body.single-product .wd-accordion-title .wd-accordion-title-text, body.woocommerce.single-product .woocommerce-tabs .tabs li > a, body.woocommerce-page.single-product .woocommerce-tabs .tabs li > a { color: #ffffff !important; } body.single-product .woocommerce-tabs .tabs li.active > a, body.single-product .woocommerce-tabs .tabs li.wd-active > a, body.single-product .wd-nav-tabs > li.active > a, body.single-product .wd-nav-tabs > li.wd-active > a, body.single-product .wd-nav-tabs > li.active > a .nav-link-text, body.single-product .wd-nav-tabs > li.wd-active > a .nav-link-text, body.single-product .wd-tabs-header .wd-active a, body.single-product .wd-tabs-header a.wd-active, body.single-product .wd-accordion-title.wd-active, body.single-product .wd-accordion-title.wd-active .wd-accordion-title-text, body.woocommerce.single-product .woocommerce-tabs .tabs li.active > a, body.woocommerce-page.single-product .woocommerce-tabs .tabs li.active > a { color: var(--vs-red) !important; } /* Active indicator line (top bar) + WoodMart .nav-link-text underline */ body.single-product .woocommerce-tabs .tabs li.active > a::after, body.single-product .woocommerce-tabs .tabs li.wd-active > a::after, body.single-product .wd-nav-tabs > li.active > a::after, body.single-product .wd-nav-tabs > li.wd-active > a::after, body.single-product .wd-tabs-header .wd-active > a::after, body.single-product .wd-nav-tabs > li.active > a .nav-link-text::after, body.single-product .wd-nav-tabs > li.wd-active > a .nav-link-text::after, body.woocommerce.single-product .woocommerce-tabs .tabs li.active > a::after, body.woocommerce-page.single-product .woocommerce-tabs .tabs li.active > a::after { background: var(--vs-red) !important; background-color: var(--vs-red) !important; } /* Hover inactive: stay white (do not flip to red and look “active”) */ body.single-product .woocommerce-tabs .tabs li:not(.active):not(.wd-active) > a:hover, body.single-product .wd-nav-tabs > li:not(.active):not(.wd-active) > a:hover, body.single-product .wd-nav-tabs > li:not(.active):not(.wd-active) > a:hover .nav-link-text { color: #ffffff !important; opacity: 0.85; } /* ─────────────────────────────────────────────────────────────────────────── 2. TOP BAR — Figma 618:553 (40px strip) ENGLISH | COUNTRY | FREE SHIPPING £50 ··· f X p | CONTACT US | FAQs FREE SHIPPING = red Ethnocentric · £50 = white Ethnocentric Hide NEWSLETTER + extra socials (LinkedIn/Telegram) not in Figma. ─────────────────────────────────────────────────────────────────────────── */ body:not(.home) .whb-top-bar, body.woocommerce-page .whb-top-bar, .whb-row.whb-top-bar { min-height: 40px !important; max-height: 40px !important; background: #101010 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } body:not(.home) .whb-top-bar .whb-top-bar-inner, body.woocommerce-page .whb-top-bar .whb-top-bar-inner, .whb-top-bar .whb-top-bar-inner { min-height: 40px !important; align-items: center !important; } /* Language / Country + right links: Ethnocentric 12 white uppercase */ .whb-top-bar .wd-nav-secondary > li > a, .whb-top-bar .wd-nav-secondary > li > a .nav-link-text, .whb-top-bar .wd-nav-header > li > a, .whb-top-bar .wd-nav-header > li > a .nav-link-text, .whb-top-bar .woodmart-nav-link, .whb-top-bar .woodmart-nav-link .nav-link-text { font-family: var(--vs-font-display, "ethnocentric", Arial, sans-serif) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.12px !important; line-height: normal !important; text-transform: uppercase !important; color: #ffffff !important; } /* FREE SHIPPING two-tone (markup from inc/top-bar.php) */ .whb-top-bar .wd-header-text, .whb-top-bar .wd-header-text strong { font-family: var(--vs-font-display, "ethnocentric", Arial, sans-serif) !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0.12px !important; line-height: normal !important; text-transform: uppercase !important; color: #ffffff !important; } .whb-top-bar .wd-header-text .vslocks-fs-label, .whb-top-bar .vslocks-fs-label { font-family: var(--vs-font-display, "ethnocentric", Arial, sans-serif) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.12px !important; color: #c62828 !important; text-transform: uppercase !important; } .whb-top-bar .wd-header-text .vslocks-fs-amount, .whb-top-bar .vslocks-fs-amount { font-family: var(--vs-font-display, "ethnocentric", Arial, sans-serif) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.12px !important; color: #ffffff !important; text-transform: uppercase !important; } /* Fallback if markup not yet rewritten: whole strong is red (old behaviour). Prefer .vslocks-fs-* when present. */ .whb-top-bar .wd-header-text strong:not(:has(.vslocks-fs-label)) { color: #c62828 !important; } /* Dividers between top-bar clusters */ .whb-top-bar .wd-header-divider { width: 1px !important; height: 18px !important; background: rgba(255, 255, 255, 0.25) !important; border: 0 !important; opacity: 1 !important; margin-inline: 8px !important; } /* Social icons — red, Figma only shows Facebook / X / Pinterest */ .whb-top-bar .wd-social-icons a, .whb-top-bar .wd-social-icons .wd-icon, .whb-top-bar .wd-social-icons a::before, .whb-top-bar .wd-social-icons .wd-icon::before { color: #c62828 !important; } .whb-top-bar .wd-social-icons a { min-width: 24px; width: 24px; height: 24px; padding: 6px !important; display: inline-flex !important; align-items: center; justify-content: center; } /* Hide socials not in Figma 618:553 */ .whb-top-bar .wd-social-icons a[href*="linkedin"], .whb-top-bar .wd-social-icons a[href*="telegram"], .whb-top-bar .wd-social-icons a[href*="instagram"], .whb-top-bar .wd-social-icons a[href*="youtube"], .whb-top-bar .wd-social-icons a[href*="whatsapp"], .whb-top-bar .wd-social-icons a[href*="tiktok"], .whb-top-bar .wd-social-icons .wd-social-linkedin, .whb-top-bar .wd-social-icons .wd-social-telegram, .whb-top-bar .wd-social-icons .wd-social-instagram, .whb-top-bar .wd-social-icons .social-linkedin, .whb-top-bar .wd-social-icons .social-telegram, .whb-top-bar .wd-social-icons .social-instagram { display: none !important; } /* Hide NEWSLETTER — not in Figma 618:553 */ .whb-top-bar .menu a[href*="newsletter"], .whb-top-bar .menu-item a[href*="newsletter"], .whb-top-bar li.menu-item a .nav-link-text { /* can't hide by text alone via attribute; use :has when available */ } /* Hide any top-bar menu item whose visible label is NEWSLETTER */ .whb-top-bar .wd-nav-secondary > li.menu-item, .whb-top-bar .wd-nav-header > li.menu-item { /* fine-tuned below with attribute selectors where possible */ } /* WoodMart top-right menu items — hide Newsletter by common slugs/IDs */ .whb-top-bar #menu-item-newsletter, .whb-top-bar .menu-item-newsletter, .whb-top-bar li.menu-item a[href*="#newsletter"], .whb-top-bar li.menu-item a[href*="newsletter"] { display: none !important; } /* Fallback: hide li whose only label is Newsletter (JS class also added) */ .whb-top-bar li.vslocks-hide-newsletter { display: none !important; } /* Country includes its storefront currency (for example, UK (GBP)). */ .whb-top-bar li.vslocks-hide-currency-selector { display: none !important; } .whb-top-bar .vslocks-selector > a { min-height: 40px; } .whb-top-bar .vslocks-selector-option > a { color: #ffffff !important; white-space: nowrap; } .whb-top-bar .vslocks-topbar-selector__options [role="menuitem"][aria-disabled="true"] { display: block; color: #ffffff !important; white-space: nowrap; cursor: default; } .whb-top-bar .vslocks-selector > a:hover, .whb-top-bar .vslocks-selector > a:focus-visible, .whb-top-bar .vslocks-selector > a:hover .nav-link-text, .whb-top-bar .vslocks-selector > a:focus-visible .nav-link-text, .whb-top-bar .vslocks-selector-option > a:hover, .whb-top-bar .vslocks-selector-option > a:focus-visible, .whb-top-bar .vslocks-selector-option.is-active > a { color: #c62828 !important; } /* Deterministic child-theme fallback for a stale WoodMart Top Bar Left widget. This keeps the launch selectors visible even when the imported header builder has not rendered the repaired menu yet. */ .whb-top-bar .vslocks-topbar-selector-bar { display: inline-flex; align-items: center; gap: 0; min-height: 40px; color: #fff; white-space: nowrap; } .whb-top-bar .vslocks-topbar-selector { position: relative; display: inline-flex; align-items: center; min-height: 40px; } .whb-top-bar .vslocks-topbar-selector__summary { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 9px; color: #fff !important; cursor: pointer; list-style: none; font-family: var(--vs-font-display, "ethnocentric", Arial, sans-serif) !important; font-size: 12px !important; line-height: 1 !important; text-transform: uppercase; } .whb-top-bar .vslocks-topbar-selector__summary::-webkit-details-marker { display: none; } .whb-top-bar .vslocks-topbar-selector__summary:hover, .whb-top-bar .vslocks-topbar-selector__summary:focus-visible, .whb-top-bar .vslocks-topbar-selector[open] > .vslocks-topbar-selector__summary { color: #c62828 !important; } .whb-top-bar .vslocks-topbar-selector__chevron { color: currentColor; font-size: 14px; line-height: 1; transform: translateY(-1px); } .whb-top-bar .vslocks-topbar-selector[open] .vslocks-topbar-selector__chevron { transform: rotate(180deg) translateY(1px); } .whb-top-bar .vslocks-topbar-selector__options { position: absolute; top: calc(100% - 1px); left: 0; z-index: 10003; min-width: 100%; margin: 0; padding: 7px 0; border: 1px solid rgba(255, 255, 255, 0.18); background: #111; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42); list-style: none; } .whb-top-bar .vslocks-topbar-selector__options li { margin: 0; padding: 0; } .whb-top-bar .vslocks-topbar-selector__options a { display: block; padding: 8px 12px; color: #fff !important; font-family: var(--vs-font-display, "ethnocentric", Arial, sans-serif) !important; font-size: 11px !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: uppercase; } .whb-top-bar .vslocks-topbar-selector__options a:hover, .whb-top-bar .vslocks-topbar-selector__options a:focus-visible, .whb-top-bar .vslocks-topbar-selector__options a.is-active { color: #c62828 !important; background: rgba(198, 40, 40, 0.1); } @media (max-width: 768px) { .whb-top-bar .wd-header-text, .whb-top-bar .wd-header-text strong, .whb-top-bar .vslocks-fs-label, .whb-top-bar .vslocks-fs-amount { font-size: 10px !important; } } /* ─────────────────────────────────────────────────────────────────────────── 3. JUDUL DUA WARNA — kata aksen berwarna merah Figma 558:14788 / 715:33024 — "Warranty Details", kata "Details" merah. Markup ditambahkan di inc/faq-returns-page.php. ─────────────────────────────────────────────────────────────────────────── */ .vs-accent { color: var(--vs-red); } /* ─────────────────────────────────────────────────────────────────────────── 4. MY ACCOUNT — nama pelanggan merah Figma 558:16687 & 715:23793 — klien: "Name in Red" (dikomentari 2×) Diverifikasi lewat WordPress lokal beneran (login sungguhan, bukan cuma baca kode): markup nyatanya "Welcome back, {name}" polos di dalam

, dirender oleh vslocks_render_dashboard_intro() di inc/customer-portal.php — TIDAK ADA elemen sama sekali. Selector lama di sini menyasar ".woocommerce-MyAccount-content strong" / markup default WooCommerce ("Hello Nama"), yang tidak pernah muncul di halaman ini karena dashboard kustom ini menimpanya. Aturan lama itu mati total sejak commit awal — tidak pernah cocok dengan apa pun. Nama sekarang dibungkus