/* Shared design tokens: brand colors + typography + optional dark theme. Linked from BEFORE each page's inline styles, so a page may still override a token locally (e.g. the landing page's --bg: transparent). */ :root { --primary: #7A25BA; --primary-hover: #551A82; --primary-soft: #F2E9F8; --accent: #F39023; --accent-soft: #FEF2E5; --deep: #2A0D40; --bg: #FCFBFE; --surface: #FFFFFF; --surface-2: #F7F7F7; --ink: #1E0F2E; --muted: #6B5B7B; --border: color-mix(in srgb, var(--ink) 10%, transparent); --font-sans: "Year of Handicrafts", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-ar: "Year of Handicrafts", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-latin: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif; } /* Dark theme — opt-in via , else follows the OS. nav.js injects the toggle and persists the choice in localStorage. */ [data-theme="dark"] { color-scheme: dark; --primary: #A85BE0; --primary-hover: #C084F0; --primary-soft: #2C1744; --accent: #F8A94E; --accent-soft: #3A2415; --bg: #150A21; --surface: #1E1030; --surface-2: #241338; --ink: #F3ECFA; --muted: #B9A7C9; --border: color-mix(in srgb, var(--ink) 16%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --primary: #A85BE0; --primary-hover: #C084F0; --primary-soft: #2C1744; --accent: #F8A94E; --accent-soft: #3A2415; --bg: #150A21; --surface: #1E1030; --surface-2: #241338; --ink: #F3ECFA; --muted: #B9A7C9; --border: color-mix(in srgb, var(--ink) 16%, transparent); } } /* Shared self-hosted typeface (declared once here; pages may repeat it). */ @font-face { font-family: "Year of Handicrafts"; src: url("../fonts/TheYearofHandicrafts-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Year of Handicrafts"; src: url("../fonts/TheYearofHandicrafts-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Year of Handicrafts"; src: url("../fonts/TheYearofHandicrafts-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Year of Handicrafts"; src: url("../fonts/TheYearofHandicrafts-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Year of Handicrafts"; src: url("../fonts/TheYearofHandicrafts-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* ---- Injected site chrome (wishlist heart, cart badge, counts, product badges) ---- */ .iconbtn-wish { position: relative; } .wish-count { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--deep); font-size: 11px; font-weight: 800; line-height: 1; transform: scale(0); transition: transform .25s var(--ease, ease); } .wish-count.on { transform: scale(1); } .cart-slot { position: relative; display: grid; place-items: center; } .cart-count { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--ink); font-family: var(--font-latin, inherit); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; transform: scale(0); transition: transform .25s var(--ease, ease); } .cart-count.on { transform: scale(1); } .icon-btn[data-theme-toggle] svg { transition: none; } .icon-btn[data-theme-toggle] .icon-sun { display: none; } [data-theme="dark"] .icon-btn[data-theme-toggle] .icon-sun { display: block; } [data-theme="dark"] .icon-btn[data-theme-toggle] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn[data-theme-toggle] .icon-sun { display: block; } :root:not([data-theme="light"]) .icon-btn[data-theme-toggle] .icon-moon { display: none; } } .heart-btn { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(30, 15, 46, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .2s var(--ease, ease), color .2s var(--ease, ease), background .2s var(--ease, ease); } .heart-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; } .heart-btn:hover { transform: scale(1.08); color: #E11D48; } .heart-btn[aria-pressed="true"] { background: #E11D48; color: #fff; } .heart-btn[aria-pressed="true"] svg { fill: currentColor; } .heart-btn.pop { animation: heartPop .32s var(--ease, ease); } @keyframes heartPop { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } } .pb { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 2; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(30, 15, 46, .45); } .pb-new { background: var(--primary); color: #fff; } .pb-hot { background: var(--accent); color: #2A0D40; } .pb-sale { background: #E11D48; color: #fff; } .heart-btn ~ .prod-hit, .prod-media .heart-btn { pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .heart-btn, .wish-count { transition: none; } .heart-btn.pop { animation: none; } }