/* ========================================================================== Viva CraftBazaar — design system Loaded after the Tailwind Play CDN script + inline tailwind.config in each page's . This file holds things Tailwind utility classes don't cover cleanly: font-face-adjacent rules, custom animations, and a few component patterns reused across many pages. ========================================================================== */ :root { --walnut-900: #120D0B; --walnut-800: #1C1512; --walnut-700: #221A15; --walnut-600: #2B211A; --walnut-500: #3F3226; --walnut-400: #5F4C3B; --walnut-300: #8F7A64; --walnut-200: #B9A896; --walnut-100: #DFD6CC; --walnut-50: #F3F0ED; --parchment-500: #D2BF98; --parchment-400: #E3D6BC; --parchment-300: #EFE7D8; --parchment-200: #F6F1E7; --parchment-100: #FDFBF7; --parchment-50: #FFFFFF; --brass-900: #2A1F0C; --brass-800: #453313; --brass-700: #654B1B; --brass-600: #876524; --brass-500: #A9812E; --brass-400: #C29A45; --brass-300: #D6B463; --brass-200: #E6CD8B; --brass-100: #F3E6C2; --brass-50: #FBF6EA; --ink: #24303B; --moss: #4B5A3E; --clay: #9C4A3C; } html { scroll-behavior: smooth; } body { background-color: var(--parchment-200); color: var(--walnut-500); font-family: 'Work Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .font-display { font-family: 'Fraunces', Georgia, serif; } .font-mono-vcb { font-family: 'IBM Plex Mono', ui-monospace, monospace; } ::selection { background-color: var(--brass-300); color: var(--walnut-900); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 2px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.75rem 1.5rem; transition: background-color 0.2s, color 0.2s; cursor: pointer; border: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-brass { background-color: var(--brass-500); color: var(--walnut-800); } .btn-brass:hover:not(:disabled) { background-color: var(--brass-400); } .btn-dark { background-color: var(--walnut-600); color: var(--parchment-100); } .btn-dark:hover:not(:disabled) { background-color: var(--walnut-700); } .btn-outline { background: transparent; border: 1px solid var(--walnut-200); color: var(--walnut-600); } .btn-outline:hover:not(:disabled) { background-color: var(--walnut-50); } .btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; } /* ---- Cards / surfaces ---- */ .card { background-color: var(--parchment-100); border: 1px solid var(--walnut-50); border-radius: 2px; box-shadow: 0 1px 2px rgba(43,33,26,0.06), 0 8px 24px -12px rgba(43,33,26,0.18); } .input-field { width: 100%; height: 2.75rem; border-radius: 2px; border: 1px solid var(--walnut-100); background-color: var(--parchment-100); padding: 0 1rem; font-size: 0.875rem; color: var(--walnut-600); } .input-field:focus { outline: none; border-color: var(--brass-400); box-shadow: 0 0 0 1px var(--brass-400); } textarea.input-field { height: auto; padding: 0.75rem 1rem; min-height: 6rem; } .field-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--walnut-400); display: block; margin-bottom: 0.375rem; } .field-error { font-size: 0.75rem; color: var(--clay); margin-top: 0.25rem; } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; border-radius: 2px; padding: 0.15rem 0.6rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .badge-sale { background-color: var(--clay); color: #fff; } .badge-new { background-color: var(--ink); color: #fff; } .badge-muted { background-color: var(--walnut-100); color: var(--walnut-500); } .badge-success { background-color: var(--moss); color: #fff; } .badge-brass { background-color: var(--brass-500); color: var(--walnut-800); } /* ---- Skeleton loading ---- */ .skeleton { background: linear-gradient(90deg, var(--walnut-50) 25%, var(--parchment-300) 50%, var(--walnut-50) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite; border-radius: 2px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---- Fade-up reveal (applied via IntersectionObserver in common.js) ---- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---- Product grid ---- */ .product-card-image-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background-color: var(--parchment-300); } .product-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .product-card:hover .product-card-image-wrap img { transform: scale(1.05); } .product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--walnut-50), var(--parchment-300)); color: var(--walnut-300); } /* ---- Hero engraving demo ---- */ .engrave-plate { background: linear-gradient(135deg, var(--brass-200) 0%, var(--brass-500) 45%, var(--brass-600) 55%, var(--brass-300) 100%); box-shadow: inset 0 1px 1px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.06); } .engrave-text { text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.25); color: rgba(28,21,18,0.9); } /* ---- WhatsApp float button ---- */ .whatsapp-float { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 40; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background-color: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px -18px rgba(43,33,26,0.5); transition: transform 0.2s; } .whatsapp-float:hover { transform: scale(1.06); } .whatsapp-float::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background-color: rgba(37,211,102,0.5); animation: wa-ping 2s cubic-bezier(0,0,0.2,1) infinite; z-index: -1; } @keyframes wa-ping { 75%, 100% { transform: scale(1.8); opacity: 0; } } /* ---- Back to top ---- */ .back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; width: 3rem; height: 3rem; border-radius: 9999px; border: 1px solid var(--walnut-200); background-color: var(--parchment-100); color: var(--walnut-600); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px -18px rgba(43,33,26,0.35); transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translateY(1rem); pointer-events: none; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background-color: var(--brass-500); color: var(--walnut-800); } /* ---- Cart drawer ---- */ .cart-drawer-overlay { position: fixed; inset: 0; background: rgba(18,13,11,0.6); backdrop-filter: blur(2px); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .cart-drawer-overlay.open { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 26rem; background-color: var(--parchment-100); z-index: 51; box-shadow: -20px 0 40px -18px rgba(43,33,26,0.35); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; } .cart-drawer.open { transform: translateX(0); } /* ---- Mobile nav ---- */ .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(18,13,11,0.6); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .mobile-nav-overlay.open { opacity: 1; pointer-events: auto; } .mobile-nav-panel { position: fixed; top: 0; left: 0; height: 100%; width: 85%; max-width: 22rem; background-color: var(--parchment-100); z-index: 51; transform: translateX(-100%); transition: transform 0.3s ease; padding: 1.5rem; } .mobile-nav-panel.open { transform: translateX(0); } /* ---- Toast ---- */ #toast-container { position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .toast { background-color: var(--walnut-800); color: var(--parchment-100); padding: 0.75rem 1.25rem; border-radius: 2px; font-size: 0.875rem; box-shadow: 0 20px 40px -18px rgba(0,0,0,0.4); animation: toast-in 0.25s ease-out; } .toast.error { background-color: var(--clay); } .toast.success { background-color: var(--moss); } @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ---- Sticky mobile add-to-cart ---- */ .sticky-add-to-cart { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background-color: var(--parchment-100); border-top: 1px solid var(--walnut-50); padding: 0.75rem; box-shadow: 0 -8px 24px -12px rgba(43,33,26,0.18); transform: translateY(100%); transition: transform 0.3s ease; display: flex; align-items: center; gap: 0.75rem; } .sticky-add-to-cart.visible { transform: translateY(0); } @media (min-width: 1024px) { .sticky-add-to-cart { display: none; } } /* Utility used on quote/testimonial cards for consistent star rows */ .stars { display: flex; gap: 1px; color: var(--brass-500); }