/* ============================================================
BAZAAR THEME — warm, ornamental, RTL-aware storefront design system.
Same class surface as editorial/theme.css (so every shared header/
footer/drawer/card/component class stays styled), restyled as a
sunlit-souk marketplace: parchment grounds, garnet ink, saffron-gold
hairlines + arabesque texture, and a pomegranate primary action.
FIXED IDENTITY: unlike classic, Bazaar uses its own jewel tokens
(--bz-*) for the prominent surfaces instead of the admin accent axis
(--theme-*), so the storefront always matches the demo. A handful of
incidental spots still read --theme-*-rgb (always globally defined).
RTL is driven by language (dir on ), not the theme — Bazaar is
built to read well in both directions.
============================================================ */
/* ── Bazaar design system ── */
:root {
--font-display: 'Marcellus', 'Amiri', Georgia, 'Times New Roman', serif;
--paper: #fbf4e6; /* warm parchment ground */
--paper-2: #fffbf2; /* lifted warm white — cards/fields */
--ink: #241016; /* deep garnet-black text */
--ink-2: #4c2e33; /* secondary text */
--ink-soft: #8a6d63; /* muted taupe */
--rule: rgba(120, 86, 32, 0.22); /* gold-brown hairline */
--rule-soft: rgba(120, 86, 32, 0.11);
/* Jewel accents — the Bazaar signature */
--bz-gold: #b8862f; /* saffron / brass */
--bz-gold-strong: #d9a83c;
--bz-primary: #9c2c46; /* pomegranate / ruby — primary action */
--bz-primary-strong:#7e2138;
--bz-teal: #14695a; /* emerald accent (badges/links, sparing) */
/* rgb components (for rgba() — referenced by some component overrides) */
--bz-gold-rgb: 184, 134, 47;
--bz-gold-strong-rgb: 217, 168, 60;
--bz-primary-rgb: 156, 44, 70;
/* Mashrabiya lattice — faint gold texture behind every page */
--pattern: url("data:image/svg+xml;utf8,");
--noise: var(--pattern);
--page-bg: var(--pattern) repeat, var(--paper);
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 1px 2px rgba(74, 30, 20, .06), 0 10px 26px -18px rgba(74, 30, 20, .35);
--shadow-md: 0 6px 22px -10px rgba(74, 30, 20, .30);
--hdr-strip-bg: var(--paper-2);
--hdr-strip-rule: var(--rule);
}
html.dark {
--paper: #1a0f14; /* deep aubergine-black — lantern-lit night */
--paper-2: #241620;
--ink: #f4e7d2; /* warm ivory */
--ink-2: #dbc9ae;
--ink-soft: #a08a78;
--rule: rgba(216, 168, 60, 0.20); /* gold hairlines glow */
--rule-soft: rgba(216, 168, 60, 0.10);
--bz-gold: #e6b84a;
--bz-gold-strong: #f2ce74;
--bz-primary: #e06a82; /* ruby lightened to read on dark */
--bz-primary-strong:#c9475f;
--bz-teal: #4fb79f;
--bz-gold-rgb: 230, 184, 74;
--bz-gold-strong-rgb: 242, 206, 116;
--bz-primary-rgb: 224, 106, 130;
--pattern: url("data:image/svg+xml;utf8,");
--noise: var(--pattern);
--page-bg:
radial-gradient(1200px 720px at 50% -140px, rgba(230, 184, 74, 0.10), transparent 60%) no-repeat,
var(--pattern) repeat,
var(--paper);
--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -16px rgba(0, 0, 0, .65);
--shadow-md: 0 6px 24px -10px rgba(0, 0, 0, .6);
--hdr-strip-bg: var(--paper-2);
}
body { background: var(--page-bg); color: var(--ink); }
/* Display headlines — Marcellus serif, gentle tracking */
.font-display, h1.display, h2.display, h3.display {
font-family: var(--font-display);
letter-spacing: 0.005em;
font-weight: 400;
}
.display-italic { font-style: italic; }
/* Gilt gradient text — gold into pomegranate */
.text-gradient-theme {
background: linear-gradient(105deg, var(--bz-gold-strong) 0%, var(--bz-gold) 40%, var(--bz-primary) 115%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Eyebrow label — small caps, gold */
.ed-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--bz-gold);
}
/* Section eyebrow — gold rule with a diamond ornament */
.section-eyebrow {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: 'Inter', sans-serif;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--bz-gold);
margin-bottom: 0.7rem;
}
.section-eyebrow::before {
content: ''; width: 1.6rem; height: 1px;
background: linear-gradient(90deg, transparent, var(--bz-gold));
flex-shrink: 0;
}
.section-eyebrow::after {
content: '\25C6'; /* ◆ */
font-size: 7px; color: var(--bz-gold); opacity: .8;
}
/* View-all hairline arrow */
.btn-view-all {
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: 'Inter', sans-serif;
font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
white-space: nowrap; flex-shrink: 0;
color: var(--ink);
padding-bottom: 3px;
border-bottom: 1px solid var(--bz-gold);
text-decoration: none;
transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-view-all svg { transition: transform 0.2s ease; }
.btn-view-all:hover { gap: 0.75rem; color: var(--bz-primary); border-bottom-color: var(--bz-primary); }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }
.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
/* Grain/texture overlay (used on hero) — reuse the lattice */
.ed-grain::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: var(--pattern);
}
/* Number ornament — italic serif flourish */
.ed-folio {
font-family: var(--font-display);
font-style: italic; font-weight: 400;
color: var(--bz-gold);
}
/* Header search — warm filled field with gold focus ring */
.ed-search {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ed-search:focus-within { border-color: var(--bz-gold); box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.14); }
/* Beat the legacy grey #desktopHeader .hdr-search (assets/css/header.css) */
#desktopHeader .hdr-search {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
}
#desktopHeader .hdr-search:hover { border-color: rgba(184, 134, 47, 0.5); }
#desktopHeader .hdr-search:focus-within {
border-color: var(--bz-gold);
box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.14);
}
html.dark #desktopHeader .hdr-search { background: var(--paper-2); border-color: var(--rule); }
html.dark #desktopHeader .hdr-search:focus-within { border-color: var(--bz-gold); }
/* Text link with arrow */
.ed-link-arrow {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: 'Inter', sans-serif;
font-size: 0.8rem; font-weight: 600;
color: var(--bz-primary); text-decoration: none;
transition: gap 0.18s ease, color 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; color: var(--bz-primary-strong); }
html.dark .ed-link-arrow:hover { color: var(--bz-gold); }
/* Primary CTA — pomegranate with a gilt inner hairline */
.ed-btn-primary {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.75rem 1.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
color: #fff5ec;
background: var(--bz-primary);
border-radius: 999px;
border: 1px solid var(--bz-primary);
box-shadow: inset 0 0 0 1px rgba(217, 168, 60, 0.35), var(--shadow);
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ed-btn-primary:hover {
background: var(--bz-primary-strong); border-color: var(--bz-primary-strong);
box-shadow: inset 0 0 0 1px rgba(217, 168, 60, 0.6), var(--shadow-md);
transform: translateY(-1px);
}
html.dark .ed-btn-primary { color: #1a0f14; }
/* …and index.php's homepage `.ed-btn-primary:hover { background: var(--paper) }`
(editorial invert) — re-assert the ruby chip so the dark ink stays legible. */
html.dark .ed-btn-primary:hover {
color: #1a0f14;
background: var(--bz-primary-strong);
border-color: var(--bz-primary-strong);
}
.ed-btn-secondary {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.72rem 1.4rem;
font-family: 'Inter', sans-serif;
font-size: 0.82rem; font-weight: 600;
color: var(--ink);
background: var(--paper-2);
border-radius: 999px;
border: 1px solid var(--rule);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ed-btn-secondary:hover { background: var(--paper); border-color: var(--bz-gold); color: var(--bz-primary); }
/* Shared pill CTA */
.ed-plan-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
padding: 0.75rem 1.5rem; border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-weight: 600;
background: var(--bz-primary); color: #fff5ec;
border: 1px solid var(--bz-primary);
box-shadow: inset 0 0 0 1px rgba(217, 168, 60, 0.35);
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
text-decoration: none;
}
.ed-plan-cta:hover { background: var(--bz-primary-strong); border-color: var(--bz-primary-strong); transform: translateY(-1px); }
html.dark .ed-plan-cta { color: #1a0f14; }
/* Re-assert ruby chip over index.php homepage `.ed-plan-cta:hover { background: var(--paper) }`. */
html.dark .ed-plan-cta:hover {
color: #1a0f14;
background: var(--bz-primary-strong);
border-color: var(--bz-primary-strong);
}
/* Plan / dossier cards — warm card, gold hairline, lift on hover */
.ed-plan {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ed-plan:hover { border-color: var(--bz-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ed-plan-featured {
position: relative;
background: linear-gradient(160deg, #2f131c 0%, var(--bz-primary-strong) 70%, var(--bz-primary) 130%);
color: #fbeede;
border: 1px solid var(--bz-primary);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ed-plan-featured:hover { transform: translateY(-2px); }
html.dark .ed-plan-featured {
background: linear-gradient(160deg, #3a1622 0%, var(--bz-primary-strong) 80%);
color: #fbeede; border-color: var(--bz-primary-strong);
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 233, 200, 0.22); }
html.dark .ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 233, 200, 0.22); }
.ed-plan-featured .ed-plan-cta { background: var(--bz-gold); color: #241016; border-color: var(--bz-gold); box-shadow: none; }
.ed-plan-featured .ed-plan-cta:hover { background: var(--bz-gold-strong); border-color: var(--bz-gold-strong); color: #241016; }
html.dark .ed-plan-featured .ed-plan-cta { background: var(--bz-gold); color: #241016; border-color: var(--bz-gold); }
html.dark .ed-plan-featured button.ed-plan-cta { color: #241016; }
/* Shop card — warm card, gold hairline */
.shop-card {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.shop-card:hover { border-color: var(--bz-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Header status strip */
.ed-status {
font-family: 'Inter', sans-serif;
font-size: 11px; letter-spacing: 0.05em;
color: var(--ink-soft);
}
/* Drawer typography */
.drawer-section-label {
display: flex; align-items: center; gap: 0.6rem;
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--bz-gold);
padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.65rem 1.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.92rem; font-weight: 500;
color: var(--ink-2);
transition: background 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper); color: var(--bz-primary); }
.drawer-logout, .drawer-login {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
margin: 1rem 1.5rem 1.25rem;
padding: 0.85rem 1rem;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.86rem; font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.drawer-logout { color: #b8431a; border: 1px solid rgba(184, 67, 26, 0.28); }
.drawer-logout:hover { background: rgba(184, 67, 26, 0.07); }
.drawer-login { color: #fff5ec; background: var(--bz-primary); }
.drawer-login:hover { background: var(--bz-primary-strong); }
html.dark .drawer-login { color: #1a0f14; }
html.dark .drawer-logout { color: #f0a284; border-color: rgba(240, 162, 132, 0.22); }
/* Mobile glass header */
.mobile-glass-header {
background: rgba(251, 244, 230, 0.85);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(26, 15, 20, 0.82); }
/* Avatar ring — thin gold */
.ed-avatar-ring {
box-shadow: 0 0 0 1px var(--paper-2), 0 0 0 2px var(--bz-gold);
}
/* Hide Alpine cloak */
[x-cloak] { display: none !important; }
/* Premium dropdown */
.ed-dropdown {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: 0 30px 60px -20px rgba(74, 30, 20, 0.28), 0 8px 20px -12px rgba(74, 30, 20, 0.18);
overflow: hidden;
}
html.dark .ed-dropdown { background: var(--paper-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.ed-dropdown-item {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.7rem 1rem;
font-family: 'Inter', sans-serif;
font-size: 0.88rem; font-weight: 500;
color: var(--ink-2);
text-decoration: none;
transition: background 0.14s ease, color 0.14s ease;
}
.ed-dropdown-item:hover { background: var(--paper); color: var(--bz-primary); }
html.dark .ed-dropdown-item:hover { background: rgba(230, 184, 74, 0.06); color: var(--bz-gold); }
.ed-section-cap {
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--bz-gold);
padding: 0.9rem 1rem 0.4rem;
}
/* Header elevation */
#desktopHeader { box-shadow: var(--shadow); }
/* ── Auth (login/register) brand panel — garnet & gold ── */
:root {
--brand-gradient: linear-gradient(150deg, #2b0f18 0%, #591d2e 55%, #7e2138 100%);
--brand-glow-1: rgba(184, 134, 47, 0.32);
--brand-glow-2: rgba(156, 44, 70, 0.22);
}
html.dark {
--brand-gradient: linear-gradient(150deg, #1a0f14 0%, #3a1622 60%, #591d2e 110%);
}
/* ── Home: mystery-box card frame + winner-ticker accent ── */
.ed-card-mystery {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.ed-card-mystery:hover { border-color: var(--bz-gold); box-shadow: var(--shadow-md); }
body .wt-card:hover { border-color: var(--bz-gold); }
/* Bazaar payment cluster (bz-pay-*) — ported from classic */
.bz-pay-topbar {
background: var(--paper); border-bottom: 1px solid var(--rule);
box-shadow: var(--shadow);
}
.bz-pay-crest {
width: 1.75rem; height: 1.75rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
color: #fff; background: var(--bz-primary, #9c2c46);
}
.bz-pay-card {
background: var(--paper-2); border: 1px solid var(--rule);
border-radius: var(--radius, 12px); box-shadow: var(--shadow);
}
.bz-pay-eyebrow {
font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-soft);
}
.bz-pay-collapse-btn { border-bottom: 1px solid var(--rule); background: none; }
.bz-pay-collapse-btn:hover { background: rgba(156,44,70,.03); }
.bz-pay-lineitem {
border-radius: var(--radius-sm, 8px); background: var(--paper);
border: 1px solid var(--rule);
}
.bz-pay-qty-hero {
position: absolute; top: .625rem; right: .625rem;
font-size: 12px; font-weight: 800; color: #fff;
background: rgba(15,23,42,.62); backdrop-filter: blur(4px);
padding: .125rem .625rem; border-radius: 999px;
}
.bz-pay-qty-badge {
position: absolute; bottom: -.375rem; right: -.375rem;
font-size: 10px; font-weight: 800; color: #fff;
background: var(--bz-primary, #9c2c46);
padding: .0625rem .375rem; border-radius: 999px; line-height: 1.5;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.bz-pay-countdown {
display: flex; align-items: center; gap: .5rem;
padding: .5rem .75rem; border-radius: var(--radius-sm, 8px);
background: rgba(156,44,70,.07);
}
.bz-pay-countdown-time {
font-size: 11px; font-weight: 700; color: var(--bz-primary, #9c2c46);
background: var(--paper-2); border-radius: 999px; padding: .125rem .625rem;
}
.bz-pay-row { border-bottom: 1px solid var(--rule); }
.bz-pay-total {
border-top: 2px solid var(--rule); font-size: 15px; font-weight: 800; color: var(--ink);
}
.bz-pay-address-inner {
border: 1.5px solid var(--rule); border-radius: var(--radius-sm, 8px);
background: var(--paper);
}
.bz-pay-gw {
border: 2px solid var(--rule); border-radius: var(--radius-sm, 8px);
background: var(--paper-2);
transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}
.bz-pay-gw:hover { border-color: var(--bz-gold-strong, #d9a83c); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.bz-pay-gw-on {
border-color: var(--bz-gold, #b8862f); background: rgba(156,44,70,.06);
box-shadow: 0 0 0 1px var(--bz-gold, #b8862f);
}
.bz-pay-gw-radio {
width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--rule);
transition: border-color .14s, background .14s;
}
.bz-pay-gw-radio-on { border-color: var(--bz-primary, #9c2c46); background: var(--bz-primary, #9c2c46); }
.bz-pay-cta {
font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: #fff;
border: none; border-radius: 999px; cursor: pointer;
background: var(--bz-primary, #9c2c46);
transition: filter .15s, transform .15s, box-shadow .15s;
}
.bz-pay-cta:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.bz-pay-cta:active:not(:disabled) { transform: scale(.99); }
.bz-pay-cta-off, .bz-pay-cta:disabled {
background: var(--rule); color: var(--ink-soft); cursor: not-allowed;
}
.bz-pay-fixed {
background: var(--paper-2); border-top: 1px solid var(--rule);
box-shadow: 0 -4px 24px rgba(0,0,0,.09);
}
.bz-pay-modal {
background: var(--paper-2); border: 1px solid var(--rule);
border-radius: 1.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
/* Result / status card (payment-success · -failed · -cancelled) */
.bz-pay-result { position: relative; overflow: hidden; }
.bz-pay-result-stripe {
height: 3px;
background: linear-gradient(90deg, var(--bz-gold, #b8862f), var(--bz-primary, #9c2c46));
}
.bz-pay-result-medallion {
width: 4rem; height: 4rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
border: 1px solid transparent;
box-shadow: inset 0 0 0 4px var(--paper), 0 6px 20px -10px rgba(0,0,0,.25);
}
.bz-pay-result-btn2 {
font-weight: 700; font-size: 13px; letter-spacing: -.01em;
color: var(--bz-primary, #9c2c46);
border: 1px solid var(--rule); border-radius: 999px;
background: var(--paper-2);
transition: border-color .15s, background .15s, color .15s;
}
.bz-pay-result-btn2:hover { border-color: var(--bz-gold-strong, #d9a83c); background: rgba(156,44,70,.06); }