Studio Ukiyo Design System

/* ============================================================ STUDIO UKIYO — DESIGN SYSTEM Playfair Display + Archivo · Sage #6F7F5C ============================================================ */@import url(‘https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Archivo:wght@300;400;500;600&display=swap’);/* ─── Design Tokens ────────────────────────────────── */:root { –ink: #0C0A09; –ink-soft: #1C1917; –ink-muted: #292524; –stone-700: #44403C; –stone-500: #78716C; –stone-400: #A8A29E; –stone-200: #D6D3D1; –stone-100: #F5F5F4; –paper: #FAFAF9; –sage: #6F7F5C; –sage-dark: #536044; –sage-mid: #8A9E73; –sage-light: #B4C9A0; –sage-pale: #E6EDE0; –sage-ghost: #F2F5EE; –font-display: ‘Playfair Display’, Georgia, serif; –font-body: ‘Archivo’, ‘Helvetica Neue’, sans-serif; –ease: cubic-bezier(0.4, 0, 0.2, 1); –dur-fast: 150ms; –dur-base: 250ms;}/* ─── Global Typography ────────────────────────────── */body, p, li, td, th, label, span { font-family: var(–font-body); -webkit-font-smoothing: antialiased;}h1, h2, h3, h4, h5, h6,.elementor-heading-title,.entry-title,.woocommerce-loop-product__title,.product_title { font-family: var(–font-display) !important; font-weight: 400 !important; color: var(–ink) !important; line-height: 1.1 !important; letter-spacing: 0.01em;}/* ─── Navigation ────────────────────────────────────── */.elementor-nav-menu a,.elementor-nav-menu–main .elementor-nav-menu > li > a { font-family: var(–font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(–stone-700) !important; transition: color var(–dur-fast) var(–ease) !important;}.elementor-nav-menu a:hover,.elementor-nav-menu–main .elementor-nav-menu > li > a:hover { color: var(–ink) !important;}/* ─── Elementor Buttons ─────────────────────────────── */.elementor-button,.elementor-button-wrapper .elementor-button { font-family: var(–font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-radius: 0 !important; transition: background var(–dur-base) var(–ease), border-color var(–dur-base) var(–ease), color var(–dur-base) var(–ease) !important;}/* ─── WooCommerce Buttons ───────────────────────────── */.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.single_add_to_cart_button,.add_to_cart_button { font-family: var(–font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border-radius: 0 !important; background-color: var(–ink) !important; color: var(–paper) !important; border: 1px solid var(–ink) !important; padding: 14px 28px !important; transition: background var(–dur-base) var(–ease), border-color var(–dur-base) var(–ease) !important;}.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,.single_add_to_cart_button:hover,.add_to_cart_button:hover { background-color: var(–ink-muted) !important; border-color: var(–ink-muted) !important; color: var(–paper) !important;}/* ─── Product Grid ──────────────────────────────────── */.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(–font-display) !important; font-size: 1rem !important; font-weight: 400 !important; color: var(–ink) !important;}.woocommerce ul.products li.product img { transition: transform 400ms var(–ease);}.woocommerce ul.products li.product:hover img { transform: scale(1.03);}/* ─── Prices ────────────────────────────────────────── */.woocommerce-Price-amount,.price .woocommerce-Price-amount { font-family: var(–font-body) !important; font-weight: 600 !important; color: var(–ink) !important;}.woocommerce del .woocommerce-Price-amount { color: var(–stone-400) !important; font-weight: 400 !important;}/* ─── Sale Badge ────────────────────────────────────── */.woocommerce span.onsale { background-color: var(–sage) !important; color: #fff !important; border-radius: 0 !important; font-family: var(–font-body) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 4px 10px !important; min-height: auto !important; min-width: auto !important; line-height: 1.4 !important;}/* ─── Forms & Inputs ────────────────────────────────── */input[type=”text”], input[type=”email”], input[type=”tel”],input[type=”password”], input[type=”search”], input[type=”number”],textarea, select,.elementor-field-group input,.elementor-field-group select,.elementor-field-group textarea { font-family: var(–font-body) !important; font-size: 14px !important; font-weight: 400 !important; color: var(–ink) !important; border: 1px solid var(–stone-200) !important; border-radius: 0 !important; background: #fff !important; transition: border-color var(–dur-fast) var(–ease) !important; box-shadow: none !important;}input:focus, textarea:focus, select:focus { border-color: var(–sage) !important; box-shadow: none !important; outline: none !important;}::placeholder { color: var(–stone-400) !important; }/* ─── Product Page Title ────────────────────────────── */.product_title.entry-title { font-family: var(–font-display) !important; font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 400 !important; line-height: 1.1 !important; color: var(–ink) !important;}/* ─── WooCommerce Tabs ──────────────────────────────── */.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(–font-body) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(–stone-500) !important;}.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(–ink) !important;}/* ─── Scrollbar ─────────────────────────────────────── */::-webkit-scrollbar { width: 4px; }::-webkit-scrollbar-track { background: var(–paper); }::-webkit-scrollbar-thumb { background: var(–stone-200); }::-webkit-scrollbar-thumb:hover { background: var(–sage); }