/* themes.css — store-facing theming. Loaded only on store.html and product.html, never on Zyentora's own marketing or admin pages. Applied as a class on (theme-dark / theme-minimal / theme-balanced / theme-premium), always set explicitly by store.js/product.js after reading the store's `theme` column — never left implicit. --------------------------------------------------------------------------- REDESIGNED 2026-08-26, at Lakshay's direction. The previous version varied only surface/text/border/shadow, and its own comment admitted the result: all three storefronts felt like "the same page with the lights turned up or down". Each theme now carries a genuine identity — its own accent, its own radius language, its own elevation and its own display face. This is a deliberate departure from the "accent colours, typography and radius are brand-constant across themes" rule in .claude/rules/frontend-conventions.md. That rule describes the old Indigo/Space-Grotesk brand system; Lakshay has explicitly asked for per-theme identity on these customer-facing pages. NOTHING here touches behaviour. No JS, no ids, no checkout. --------------------------------------------------------------------------- Every theme must define this full token set, or a page will fall back to whatever variables.css last set and look half-themed: --surface-0/1/2 page, card, raised --text-primary/secondary/tertiary --border-subtle/default --shadow-soft resting elevation --shadow-lift hover elevation (tuned per theme: a shadow built for near-black is invisible on white) --thumb-mat mount behind a product cover --t-accent the theme's own accent --t-accent-hover --t-accent-ink text colour that sits ON the accent --t-accent-soft low-opacity accent, for tints and badges --t-radius card/panel radius --t-radius-sm control radius --t-display display face for the product title --t-display-weight */ /* ============================================================ DARK Near-black and cool. High contrast, tight radii, an electric accent. Reads technical and confident — the default. */ .theme-dark { --surface-0: #0A0A0D; --surface-1: #131318; --surface-2: #1C1C24; --text-primary: #FAFAFA; --text-secondary: rgba(250, 250, 250, 0.70); --text-tertiary: rgba(250, 250, 250, 0.52); --border-subtle: rgba(250, 250, 250, 0.08); --border-default: rgba(250, 250, 250, 0.16); --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.5); --shadow-lift: 0 6px 14px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.45); --thumb-mat: radial-gradient(120% 90% at 50% 0%, rgba(99, 102, 241, 0.20), rgba(255, 255, 255, 0.02) 55%, transparent 80%); /* #5B5EE8 rather than the #6366F1 this started at: white on #6366F1 is 4.47:1 and misses AA for the Buy button's 17px semibold label. #5B5EE8 clears it at 4.99:1. The trade is accent-on-page dropping 4.43 -> 3.96, which is fine — icons and the tab underline are UI indicators needing 3:1, not body text needing 4.5:1. */ --t-accent: #5B5EE8; --t-accent-hover: #818CF8; /* Accent as TEXT needs 4.5:1; the fill accent is only 3.96 on this ground. The lighter shade clears it. */ --t-accent-text: #818CF8; --t-accent-ink: #FFFFFF; --t-accent-soft: rgba(91, 94, 232, 0.18); --t-radius: 12px; --t-radius-sm: 8px; --t-display: 'Space Grotesk', sans-serif; --t-display-weight: 700; } /* ============================================================ MINIMAL Paper white, near-black ink, almost no chrome. Hairline borders, barely any shadow, small radii. Restraint is the identity. */ .theme-minimal { --surface-0: #FFFFFF; --surface-1: #FFFFFF; --surface-2: #F4F4F5; --text-primary: #101014; --text-secondary: rgba(16, 16, 20, 0.66); --text-tertiary: rgba(16, 16, 20, 0.62); /* 0.44 was 2.96:1 on white */ --border-subtle: rgba(16, 16, 20, 0.09); --border-default: rgba(16, 16, 20, 0.18); --shadow-soft: 0 1px 2px rgba(16, 16, 20, 0.05); --shadow-lift: 0 2px 6px rgba(16, 16, 20, 0.07), 0 12px 28px rgba(16, 16, 20, 0.08); /* Cool grey rather than white-on-white, so a pale cover still reads as a distinct object sitting on a mount. */ --thumb-mat: linear-gradient(165deg, rgba(16, 16, 20, 0.06), rgba(16, 16, 20, 0.015) 60%); --t-accent: #101014; /* ink as accent — the most restrained choice */ --t-accent-hover: #2E2E36; --t-accent-text: #101014; --t-accent-ink: #FFFFFF; --t-accent-soft: rgba(16, 16, 20, 0.06); --t-radius: 4px; --t-radius-sm: 3px; --t-display: 'Inter', sans-serif; --t-display-weight: 600; } /* ============================================================ BALANCED Warm charcoal with a plum cast and a terracotta accent. Softer edges, deeper radii. Reads editorial and human rather than technical. */ .theme-balanced { --surface-0: #211E26; --surface-1: #2A2630; --surface-2: #352F3D; --text-primary: #F6F2EC; --text-secondary: rgba(246, 242, 236, 0.72); --text-tertiary: rgba(246, 242, 236, 0.58); /* 0.48 was 4.43:1 */ --border-subtle: rgba(246, 242, 236, 0.10); --border-default: rgba(246, 242, 236, 0.20); --shadow-soft: 0 18px 44px rgba(12, 9, 16, 0.45); --shadow-lift: 0 6px 14px rgba(12, 9, 16, 0.45), 0 26px 56px rgba(12, 9, 16, 0.44); --thumb-mat: linear-gradient(165deg, rgba(224, 138, 96, 0.16), rgba(246, 242, 236, 0.02) 60%); --t-accent: #E08A60; --t-accent-hover: #EFA37C; --t-accent-text: #E08A60; --t-accent-ink: #2A1810; --t-accent-soft: rgba(224, 138, 96, 0.18); --t-radius: 18px; --t-radius-sm: 12px; --t-display: 'Space Grotesk', sans-serif; --t-display-weight: 600; } /* ============================================================ PREMIUM ZYENTORA New, 2026-08-26. Rewritten the same day after review: the first attempt was a deep ink-blue and read as a generic premium storefront rather than as Zyentora. This is Zyentora's own editorial language, carried over from the homepage — warm ivory ground, charcoal ink, bronze accent, Cormorant Garamond. The point of difference from the other three: those are each their own personality, this one should make someone think "this is Zyentora". The only light-ground theme besides Minimal, and it reads very differently from it: Minimal is cool paper and near-zero chrome, this is warm ivory with real elevation and a serif display face. Contrast is why the accent is #8A4C1D rather than the brand's #B56A2D: base bronze on ivory is 3.75:1 and fails AA for text, while #8A4C1D is 6.06:1 on ivory and takes white at 6.70:1. Base bronze is kept as the hover. LIVE since 2026-08-26. Migration 31 widened stores_theme_check to accept 'premium', and the reseller dashboard's theme picker carries a fourth swatch, so applyTheme() can now emit `theme-premium`. */ .theme-premium { --surface-0: #F6F3EE; /* warm ivory — the homepage ground */ --surface-1: #FFFFFF; /* cards and panels */ --surface-2: #EFEAE1; /* recessed / muted */ --text-primary: #171717; --text-secondary: #5F5A52; --text-tertiary: #6E685E; --border-subtle: #E7E1D8; /* the brand border, 1px, never darker */ --border-default: #D8D0C2; --shadow-soft: 0 4px 12px rgba(23, 23, 23, 0.05); --shadow-lift: 0 6px 16px rgba(23, 23, 23, 0.07), 0 18px 40px rgba(23, 23, 23, 0.09); --thumb-mat: linear-gradient(165deg, rgba(181, 106, 45, 0.12), rgba(23, 23, 23, 0.02) 62%); --t-accent: #8A4C1D; --t-accent-hover: #B56A2D; --t-accent-text: #8A4C1D; --t-accent-ink: #FFFFFF; --t-accent-soft: rgba(181, 106, 45, 0.10); --t-radius: 14px; --t-radius-sm: 10px; --t-display: 'Cormorant Garamond', Georgia, serif; --t-display-weight: 600; } /* --------------------------------------------------------------------- Legacy overrides. A few components hardcode a lighter tint tuned for dark backgrounds (badge text, primary-button hover). Those need a theme-scoped override or they stay dark-mode-tuned on the light Minimal theme. Scoped so none of this reaches the admin dashboard, which never carries a .theme-* class. --------------------------------------------------------------------- */ .theme-minimal .badge-featured { background: rgba(16, 16, 20, 0.06); color: #101014; } .theme-minimal .badge-bestseller { background: rgba(16, 16, 20, 0.06); color: #101014; } .theme-minimal .badge-new { background: rgba(15, 122, 84, 0.12); color: #0B5C3E; } /* The discount badge stays solid in every theme — it is meant to be the loudest thing on the card, and a 0.12 wash on a light surface would make it the quietest. Only the ink changes. */ .theme-minimal .badge-discount { background: #0B5C3E; color: #FFFFFF; } /* Premium sits on a light ground, so it needs dark ink on tinted badges — the dark-theme treatment would be invisible here. */ .theme-premium .badge-featured, .theme-premium .badge-bestseller { background: var(--t-accent-soft); color: #8A4C1D; } .theme-premium .badge-new { background: rgba(47, 125, 75, 0.12); color: #24603A; } .theme-premium .badge-discount { background: #8A4C1D; color: #FFFFFF; } .theme-balanced .badge-featured, .theme-balanced .badge-bestseller { background: var(--t-accent-soft); color: var(--t-accent-hover); } .theme-balanced .badge-discount { background: var(--t-accent); color: var(--t-accent-ink); }