/* Theme Name: Vanuatu Bijouterie Theme URI: https://vanuatubijouterie.com Author: Vanuatu Bijouterie Description: A black-and-gold block theme for Vanuatu Bijouterie, Fine Jewellers since 1971. Built for WooCommerce. Version: 1.0.0 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: vanuatu-bijouterie */ /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } ::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--black); } :where(a):focus-visible, :where(button):focus-visible, :where(input,select,textarea):focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; } /* Eyebrow labels */ .is-style-eyebrow, .vb-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: 0.75rem !important; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--gold); } /* Outline button style */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid var(--wp--preset--color--line-strong); color: var(--wp--preset--color--ivory); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); } /* Underlined text link */ .vb-link a, a.vb-link { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--gold); padding-bottom: 6px; } /* ---------- Header ---------- */ .vb-announce { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; } .vb-announce a { text-decoration: none; } .vb-header { position: sticky; top: 0; z-index: 50; } .admin-bar .vb-header { top: 32px; } @media (max-width: 782px) { .admin-bar .vb-header { top: 46px; } } .vb-header .wp-block-navigation { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; } .vb-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold); } .vb-logo img { height: 34px; width: auto !important; } @media (max-width: 600px) { .vb-logo img { height: 26px; } } .vb-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--black) !important; color: var(--wp--preset--color--ivory) !important; padding: 32px; } .vb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 22px; font-size: 1rem; } .vb-header .wc-block-mini-cart__button, .vb-header .wc-block-customer-account a { color: var(--wp--preset--color--ivory); } .vb-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--black); } /* ---------- Cards & images ---------- */ .vb-card img, .vb-photo img { width: 100%; object-fit: cover; display: block; } .vb-card { text-decoration: none; } .vb-card .wp-block-image { overflow: hidden; margin-bottom: 0; } .vb-card .wp-block-image img { transition: transform .6s ease; aspect-ratio: 4/5; } .vb-card:hover .wp-block-image img { transform: scale(1.04); } .vb-card h3 a { text-decoration: none; color: inherit; } .vb-portrait img { aspect-ratio: 3/4; object-fit: cover; width: 100%; } .vb-hero-img img { aspect-ratio: 4/5; object-fit: cover; width: 100%; max-height: 720px; } .vb-tall img { aspect-ratio: 4/5; object-fit: cover; width: 100%; } /* ---------- WooCommerce ---------- */ .woocommerce-store-notice, p.demo_store { display: none !important; } .wc-block-components-product-name, .wp-block-post-title a { text-decoration: none; } .wc-block-grid__product-title, .wp-block-woocommerce-product-collection .wp-block-post-title, .wc-block-product-template .wp-block-post-title { font-family: var(--wp--preset--font-family--display); font-size: 1.375rem !important; font-weight: 400; line-height: 1.3; } .wc-block-grid__product-image img, .wc-block-components-product-image img, .wp-block-woocommerce-product-image img { background: #fff; } .wc-block-grid__product-price, .wc-block-components-product-price, .wp-block-woocommerce-product-price { color: var(--wp--preset--color--gold-light); } .wc-block-grid__product { text-align: left; } .wc-block-grid__product-add-to-cart .wp-block-button__link, .wp-block-button.wc-block-components-product-button .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--ivory) !important; border: 1px solid var(--wp--preset--color--line-strong) !important; font-size: 0.75rem !important; } .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wp-block-button.wc-block-components-product-button .wp-block-button__link:hover { border-color: var(--wp--preset--color--gold) !important; color: var(--wp--preset--color--gold) !important; } .wc-block-components-sale-badge, .wc-block-grid__product-onsale { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--black); border: 0; } /* Forms on dark */ .woocommerce input.input-text, .woocommerce select, .woocommerce textarea, .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select select, .wp-block-search__input, select.orderby { background: var(--wp--preset--color--panel) !important; color: var(--wp--preset--color--ivory) !important; border: 1px solid var(--wp--preset--color--line-strong) !important; border-radius: 0 !important; } .wc-block-components-text-input label, .wc-block-components-combobox label { color: var(--wp--preset--color--muted) !important; } .wc-block-components-panel, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-cart-items, .wc-block-components-sidebar-layout .wc-block-components-main { border-color: var(--wp--preset--color--line) !important; } .wc-block-checkout__payment-method .wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option { background: transparent; } /* PayPal / Stripe iframes keep a white field — give them a light card so they stay legible */ .wc-block-components-radio-control-accordion-content, .payment_box, #stripe-payment-data, .wc-stripe-elements-field { background: #fff; color: #111; padding: 12px; } /* Quantity + variation selects */ .quantity input.qty { width: 4.5em; text-align: center; } .variations select { min-width: 12em; padding: .6em .8em; } .woocommerce-tabs .tabs li a, .wc-tabs li a { color: var(--wp--preset--color--muted); text-decoration: none; } .woocommerce-tabs .tabs li.active a { color: var(--wp--preset--color--gold); } /* Breadcrumbs */ .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; } /* ---------- Footer ---------- */ .vb-footer a { text-decoration: none; } .vb-footer a:hover { color: var(--wp--preset--color--gold-light); } .vb-footer .wp-block-heading { font-family: var(--wp--preset--font-family--body); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .vb-card .wp-block-image img { transition: none; } } /* ---------- Front page details ---------- */ .vb-gold-italic { font-style: italic; color: var(--wp--preset--color--gold-light); } .vb-stat-label { letter-spacing: .14em; text-transform: uppercase; font-size: .75rem !important; } .wp-block-search__button { background: transparent !important; color: var(--wp--preset--color--ivory) !important; padding: 10px !important; min-width: 44px; min-height: 44px; } .wp-block-search__button svg { fill: currentColor; } /* ---------- Product grid refinements ---------- */ .wc-block-grid .wc-block-grid__product-link { text-decoration: none !important; color: var(--wp--preset--color--ivory) !important; } .wc-block-grid .wc-block-grid__product-title { font-family: var(--wp--preset--font-family--display) !important; font-weight: 400 !important; font-size: 1.375rem !important; line-height: 1.3 !important; color: var(--wp--preset--color--ivory) !important; text-decoration: none !important; } .wc-block-grid .wc-block-grid__product-link:hover .wc-block-grid__product-title { color: var(--wp--preset--color--gold-light) !important; } .wc-block-grid .wc-block-grid__product-price { color: var(--wp--preset--color--gold-light) !important; font-weight: 300; } .wc-block-grid__product-image img { transition: transform .6s ease; } .wc-block-grid__product-image { overflow: hidden; } .wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.03); } .wc-block-product-template .wp-block-post-title a, .wp-block-woocommerce-product-collection .wp-block-post-title a { color: var(--wp--preset--color--ivory); font-weight: 400; } .wp-block-woocommerce-product-details .wc-tabs li a, .wc-block-components-tab__link { font-weight: 400 !important; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; } .vb-portrait img { aspect-ratio: 4/5; } @media (max-width: 781px) { .vb-announce p { font-size: .6875rem; letter-spacing: .08em; } } /* Keep the main menu on one line */ .vb-header .wp-block-navigation__container { flex-wrap: nowrap; white-space: nowrap; } @media (max-width: 1400px) { .vb-header .wp-block-navigation { font-size: .75rem; letter-spacing: .12em; } .vb-header .wp-block-navigation__container { gap: 20px !important; } } @media (max-width: 1180px) { .vb-header .wp-block-navigation { letter-spacing: .08em; } .vb-header .wp-block-navigation__container { gap: 14px !important; } } /* Use the menu button below 1100px so the 9-item menu never overflows */ @media (max-width: 1100px) { .vb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .vb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .vb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-wrap: wrap; flex-direction: column; white-space: normal; } } /* Étoile du Sud tile grid */ .vb-eds-tile { margin: 0 !important; background: #fff; } .vb-eds-tile img { aspect-ratio: 1/1; object-fit: contain; width: 100%; transition: transform .6s ease; } .vb-eds-tile:hover img { transform: scale(1.04); } .vb-eds-tile a { display: block; overflow: hidden; } /* Language switcher (TranslatePress) on the dark header */ .vb-lang { display: flex; align-items: center; font-size: .75rem; letter-spacing: .14em; } .vb-lang .trp-language-switcher, .vb-lang [class*="trp-shortcode"], .vb-lang [class*="trp-ls"] { background: transparent !important; border-color: var(--wp--preset--color--line-strong) !important; color: var(--wp--preset--color--ivory) !important; } .vb-lang a, .vb-lang span { color: var(--wp--preset--color--ivory) !important; background: transparent !important; text-decoration: none !important; } .vb-lang [class*="dropdown"], .vb-lang .trp-ls-shortcode-language { background: var(--wp--preset--color--panel) !important; } .vb-lang a:hover { color: var(--wp--preset--color--gold) !important; } /* Launch fixes */ html, body { overflow-x: clip; } .vb-lang p { margin: 0 !important; display: contents; } .vb-lang .trp-shortcode-switcher__wrapper { --bg: transparent !important; --bg-hover: rgba(201,166,107,.12) !important; --text: #EFE7DA !important; --text-hover: #C9A66B !important; --border: 1px solid #26231F !important; --border-color: #26231F !important; --border-radius: 0px !important; --font-size: 12px !important; } .vb-lang .trp-language-switcher { min-height: 0 !important; padding: 0 !important; } .vb-lang .trp-language-item { padding: 6px 10px !important; line-height: 1.2 !important; letter-spacing: .14em; } .vb-lang .trp-switcher-dropdown-list, .vb-lang .trp-ls-dropdown .trp-language-item__wrapper { background: #121110 !important; } /* Checkout: Ship / Local Pickup toggle legible on dark */ .wc-block-checkout__shipping-method-option { background: transparent !important; color: #EFE7DA !important; border-color: #6B6357 !important; } .wc-block-checkout__shipping-method-option--selected { background: #C9A66B !important; color: #0A0A0A !important; border-color: #C9A66B !important; } .wc-block-checkout__shipping-method-option--selected svg { fill: #0A0A0A !important; } /* CITES certificate offer */ .vb-cites { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid #6B6357; font-size: .9rem; } .vb-cites p { margin: 0 0 .75rem; color: #B9B0A3; } .vb-cites strong { color: #EFE7DA; font-weight: 500; } .vb-cites__btn { display: inline-block; padding: .7rem 1.2rem; border: 1px solid #C9A66B; color: #C9A66B !important; text-decoration: none; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; } .vb-cites__btn:hover { background: #C9A66B; color: #0A0A0A !important; } .vb-cites__more { margin-left: .75rem; font-size: .8rem; } /* Shop: collection band */ .vb-ranges-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0 !important; padding-bottom: .9rem; border-bottom: 1px solid #2A2724; } .vb-ranges-head h2 { font-size: 1.35rem !important; margin: 0 !important; letter-spacing: .01em; } .vb-eyebrow { display: block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--gold); margin-bottom: .45rem; } .vb-ranges-head p { margin: 0; font-size: .82rem; color: var(--wp--preset--color--muted); } .vb-ranges { margin-top: 1.6rem !important; } .vb-ranges .vb-card { position: relative; } .vb-range-img { margin: 0 0 1.1rem !important; padding: 10%; background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, #F3EEE4 70%, #E9E2D4 100%); border: 1px solid #2A2724; box-shadow: inset 0 0 0 1px rgba(201,166,107,0); overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .vb-range-img a { display: block; } .vb-range-img img { aspect-ratio: 4/5; object-fit: contain; width: 100%; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .vb-card:hover .vb-range-img { border-color: var(--wp--preset--color--gold); box-shadow: inset 0 0 0 1px rgba(201,166,107,.35), 0 18px 40px rgba(0,0,0,.45); transform: translateY(-4px); } .vb-card:hover .vb-range-img img { transform: scale(1.06); } .vb-ranges h3 { font-size: 1.15rem !important; margin: 0 0 .35rem !important; letter-spacing: .01em; } .vb-ranges h3 a { color: inherit; text-decoration: none; } .vb-ranges h3 a:hover { color: var(--wp--preset--color--gold-light); } .vb-ranges p { margin: 0 0 .8rem; line-height: 1.5; } .vb-ranges .vb-explore { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--gold); text-decoration: none; } .vb-ranges .vb-explore::after { content: " \2192"; transition: margin-left .3s ease; } .vb-card:hover .vb-explore::after { margin-left: .35rem; } .vb-ranges .vb-explore:hover { color: var(--wp--preset--color--gold-light); } .vb-all-head { margin: 3.5rem 0 0 !important; padding-top: 2.2rem; border-top: 1px solid #2A2724; } .vb-all-head h2 { font-size: 1.35rem !important; margin: 0 0 .25rem !important; } .vb-all-head p { margin: 0 0 1.4rem; font-size: .82rem; color: var(--wp--preset--color--muted); } .vb-all-head > *, .vb-ranges-head > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } @media (max-width: 781px) { .vb-ranges { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 14px; } .vb-ranges .wp-block-column { flex-basis: auto !important; } .vb-ranges .wp-block-column:first-child { grid-column: 1 / -1; } .vb-ranges .wp-block-column:first-child .vb-range-img img { aspect-ratio: 16/10; } } /* Header: Shop dropdown on dark */ .vb-header .wp-block-navigation__submenu-container { background: #121110 !important; color: #EFE7DA !important; border: 1px solid #26231F !important; padding: 10px 0 !important; min-width: 240px !important; } .vb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 20px !important; } .vb-header .wp-block-navigation__submenu-container .wp-block-navigation-item:nth-child(4) { border-bottom: 1px solid #26231F; margin-bottom: 6px; padding-bottom: 6px; } .vb-header .wp-block-navigation-submenu__toggle svg { stroke: currentColor; } /* Signature collections: 3 x 2 grid on larger screens */ @media (min-width: 782px) { #collections > .wp-block-columns { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 44px 20px; } #collections > .wp-block-columns > .wp-block-column { margin: 0 !important; } } /* Size filter above product grids */ .vb-size-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; margin: 0 0 18px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; } .vb-size-filter__label { color: var(--wp--preset--color--muted); margin-right: 6px; } .vb-size-filter a { padding: 7px 14px; border: 1px solid var(--wp--preset--color--line-strong); color: var(--wp--preset--color--ivory); text-decoration: none; transition: border-color .2s, color .2s; } .vb-size-filter a:hover, .vb-size-filter a.is-active { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); } /* Currency switch (USD / VT) in the header */ .vb-cur { display: flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .14em; margin-right: 4px; } .vb-cur a { color: var(--wp--preset--color--muted); text-decoration: none; padding: 4px 2px; } .vb-cur a:hover, .vb-cur a.is-active { color: var(--wp--preset--color--gold); } .vb-cur span { color: var(--wp--preset--color--line-strong); } @media (max-width: 600px) { .vb-cur { font-size: .66rem; gap: 4px; } } /* Vatu-for-reference note */ .vb-usd-note { font-size: .74rem; letter-spacing: .04em; color: var(--wp--preset--color--muted); margin: .4rem 0 1rem !important; max-width: 36rem; } .single-product .vb-usd-note { margin-top: -.4rem !important; } /* Accessibility: links in running text are underlined so they do not rely on colour alone */ .wp-block-paragraph a, .vb-announce a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }