/* ====================================================================== * Ruh Eljamal — FEMALE (Pink) Theme overlay * * Applied only when is present (a tiny inline * script in sharedHead reads localStorage.ruheljamal_gender and sets the * attribute as early as possible to avoid a flash of the dark theme). * * Strategy: rather than re-skin every Tailwind utility used across the * storefront, we override the *underlying CSS custom properties* and a * handful of base background/color rules so the existing gold-on-black * boutique re-paints itself in a soft pink palette while keeping the * exact same layout and component structure. This means we never break * any existing code — the male (gold/dark) theme is the default and * stays untouched. * * Palette: * Primary pink: #E85397 (CTA, accents) * Deep rose ink: #6B1F3A (headings, body text on pink) * Soft cream pink: #FFF0F5 (page background) * Card surface: #FFFFFF (cards, panels) * Surface variant: #FFE4EF (subtle backgrounds) * Outline: rgba(232,83,151,0.25) * ==================================================================== */ html[data-gender="female"] { /* Brand-y pink + cream variables that other rules can reference. */ --rj-pink-50: #fff0f5; --rj-pink-100: #ffe4ef; --rj-pink-200: #ffcfe1; --rj-pink-300: #ffb8cd; --rj-pink-400: #ff8fb7; --rj-pink-500: #e85397; --rj-pink-600: #d63d83; --rj-pink-700: #b32168; --rj-rose-ink: #6b1f3a; --rj-rose-ink-soft: #8a3855; } /* --- Body / page background ------------------------------------------ */ html[data-gender="female"] body { background: linear-gradient(180deg, var(--rj-pink-50) 0%, #ffe9f1 50%, var(--rj-pink-100) 100%) !important; color: var(--rj-rose-ink) !important; } /* --- Headers / footer / surfaces ------------------------------------- */ html[data-gender="female"] header, html[data-gender="female"] footer, html[data-gender="female"] aside#sidebar-drawer { background: rgba(255, 240, 245, 0.92) !important; border-color: rgba(232, 83, 151, 0.18) !important; color: var(--rj-rose-ink) !important; box-shadow: 0 12px 30px rgba(232, 83, 151, 0.08) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } html[data-gender="female"] footer { border-top-color: rgba(232,83,151,0.22) !important; } /* Header / brand wordmark — replace gold with deep rose */ html[data-gender="female"] header .text-\[\#D4AF37\], html[data-gender="female"] aside#sidebar-drawer .text-\[\#D4AF37\], html[data-gender="female"] footer .text-\[\#D4AF37\] { color: var(--rj-pink-600) !important; } /* Hamburger lines + simple gold icons → pink */ html[data-gender="female"] header .bg-\[\#D4AF37\] { background-color: var(--rj-pink-500) !important; } /* Nav links: muted rose with hot-pink hover */ html[data-gender="female"] header nav a, html[data-gender="female"] aside#sidebar-drawer nav a, html[data-gender="female"] footer a { color: var(--rj-rose-ink-soft) !important; } html[data-gender="female"] header nav a:hover, html[data-gender="female"] aside#sidebar-drawer nav a:hover, html[data-gender="female"] footer a:hover { color: var(--rj-pink-600) !important; } /* Material icons inside the header that were colored gold */ html[data-gender="female"] header .material-symbols-outlined, html[data-gender="female"] aside#sidebar-drawer .material-symbols-outlined, html[data-gender="female"] .text-primary-container, html[data-gender="female"] [class*="text-[#D4AF37]"] { color: var(--rj-pink-600) !important; } /* --- Cart badge + buttons (primary container ≈ gold by default) ------ */ html[data-gender="female"] .bg-primary-container { background-color: var(--rj-pink-500) !important; color: #ffffff !important; } html[data-gender="female"] .text-on-primary-container { color: #ffffff !important; } html[data-gender="female"] .border-primary-container { border-color: var(--rj-pink-500) !important; } html[data-gender="female"] .hover\:bg-primary-container:hover { background-color: var(--rj-pink-500) !important; color: #ffffff !important; } html[data-gender="female"] .hover\:text-on-primary-container:hover { color: #ffffff !important; } /* --- Surface containers (cards, panels, modal sheets) ---------------- */ html[data-gender="female"] .bg-surface-container, html[data-gender="female"] .bg-surface-container-high, html[data-gender="female"] .bg-surface-container-highest, html[data-gender="female"] .bg-surface-container-low, html[data-gender="female"] .bg-surface-container-lowest { background-color: #ffffff !important; color: var(--rj-rose-ink) !important; } html[data-gender="female"] .bg-surface, html[data-gender="female"] .bg-zinc-950\/80, html[data-gender="female"] .bg-zinc-950\/95, html[data-gender="female"] .bg-zinc-900 { background-color: rgba(255, 240, 245, 0.92) !important; color: var(--rj-rose-ink) !important; } /* Glass cards used in catalog / product */ html[data-gender="female"] .glass-panel, html[data-gender="female"] .glass-card { background: rgba(255, 255, 255, 0.65) !important; border-color: rgba(232, 83, 151, 0.18) !important; backdrop-filter: blur(12px) !important; } /* --- Borders / outlines ---------------------------------------------- */ html[data-gender="female"] .border-outline, html[data-gender="female"] .border-outline\/20, html[data-gender="female"] .border-outline\/30, html[data-gender="female"] .border-outline\/40, html[data-gender="female"] .border-zinc-800\/50, html[data-gender="female"] .border-zinc-900, html[data-gender="female"] .border-zinc-900\/40 { border-color: rgba(232, 83, 151, 0.18) !important; } /* --- Text colors used across the storefront --------------------------- */ html[data-gender="female"] .text-surface-container-lowest, html[data-gender="female"] .text-surface-bright, html[data-gender="female"] .text-on-surface { color: var(--rj-rose-ink) !important; } html[data-gender="female"] .text-surface-variant, html[data-gender="female"] .text-surface-dim, html[data-gender="female"] .text-on-surface-variant { color: var(--rj-rose-ink-soft) !important; } html[data-gender="female"] .text-zinc-400, html[data-gender="female"] .text-zinc-500, html[data-gender="female"] .text-zinc-600, html[data-gender="female"] .text-zinc-300, html[data-gender="female"] .text-zinc-100 { color: var(--rj-rose-ink-soft) !important; } /* text-zinc-200 is used for body content like the product description and volume on the product page. On the dark (male) theme this is a near-white that sits readably on the dark background; on the pink (female) theme that near-white blends into the cream/pink page background and becomes essentially invisible. Map it to the deep rose ink so the product description and similar copy stay readable against the pink palette. */ html[data-gender="female"] .text-zinc-200 { color: var(--rj-rose-ink) !important; } /* Headings / display */ html[data-gender="female"] h1, html[data-gender="female"] h2, html[data-gender="female"] h3, html[data-gender="female"] h4 { color: var(--rj-rose-ink) !important; } /* Gold gradient text → pink gradient */ html[data-gender="female"] .gold-gradient-text { background: linear-gradient(to right, var(--rj-pink-500), #ffb8cd) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* --- Forms / inputs --------------------------------------------------- */ html[data-gender="female"] input[type="text"], html[data-gender="female"] input[type="email"], html[data-gender="female"] input[type="tel"], html[data-gender="female"] input[type="number"], html[data-gender="female"] input[type="search"], html[data-gender="female"] textarea, html[data-gender="female"] select { background-color: #ffffff !important; border-color: rgba(232, 83, 151, 0.25) !important; color: var(--rj-rose-ink) !important; } /* Cart / checkout-style "floating-label" inputs use bg-transparent + absolutely-positioned labels with -z-10 sitting BEHIND the input. The opaque-white override above hid those labels on the female theme so the field captions ("الاسم الكامل", "رقم الهاتف"...) effectively disappeared. We restore the male-theme behavior for these specific inputs (the ones that ship with the bg-transparent Tailwind utility) and tint the floating labels into the rose palette so they remain readable on the pink page. */ html[data-gender="female"] input.bg-transparent[type="text"], html[data-gender="female"] input.bg-transparent[type="email"], html[data-gender="female"] input.bg-transparent[type="tel"], html[data-gender="female"] input.bg-transparent[type="number"], html[data-gender="female"] input.bg-transparent[type="search"], html[data-gender="female"] textarea.bg-transparent { background-color: transparent !important; color: var(--rj-rose-ink) !important; } /* Floating-label captions (peer labels) — keep them visible on the pink page background. The cart uses `text-outline-variant` which is a near- invisible beige on light pink, so we re-tint it to soft rose ink. */ html[data-gender="female"] label.text-outline-variant, html[data-gender="female"] form label[for] { color: var(--rj-rose-ink-soft) !important; } /* And the focused / floated state uses `text-primary-container` which we already tint pink — make sure it stays the brand pink on focus. */ html[data-gender="female"] label.peer-focus\:text-primary-container:focus, html[data-gender="female"] .peer:focus ~ label { color: var(--rj-pink-600) !important; } html[data-gender="female"] input::placeholder, html[data-gender="female"] textarea::placeholder { color: rgba(107, 31, 58, 0.45) !important; } html[data-gender="female"] input:focus, html[data-gender="female"] textarea:focus, html[data-gender="female"] select:focus { border-color: var(--rj-pink-500) !important; outline-color: var(--rj-pink-500) !important; box-shadow: 0 0 0 2px rgba(232, 83, 151, 0.18) !important; } /* Cart inputs use a bottom-only border (border-0 + border-b). Make sure the bottom border stays a visible rose tone on the female theme. */ html[data-gender="female"] input.border-b, html[data-gender="female"] textarea.border-b { border-bottom-color: rgba(232, 83, 151, 0.45) !important; } html[data-gender="female"] input.border-b:focus, html[data-gender="female"] textarea.border-b:focus { border-bottom-color: var(--rj-pink-600) !important; } /* --- Checkout / cart floating-label form (extra hardening) ------------- On some Android browsers (in-app Chromium, Samsung Internet, etc.) the broad input[type=text] white-background rule above was still winning over the .bg-transparent override below — leaving the checkout fields as solid white boxes and the floating captions hidden behind them. These rules force the checkout-form inputs to stay fully transparent and lift the floating labels in front so the captions ("الاسم الكامل", "رقم الهاتف", "عنوان التوصيل التفصيلي"…) are always readable. */ #checkout-form input, #checkout-form textarea { background-color: transparent !important; background: transparent !important; } #checkout-form label { z-index: 5 !important; } html[data-gender="female"] #checkout-form input, html[data-gender="female"] #checkout-form textarea { background-color: transparent !important; background: transparent !important; color: var(--rj-rose-ink) !important; } html[data-gender="female"] #checkout-form label { color: var(--rj-rose-ink-soft) !important; z-index: 5 !important; } html[data-gender="female"] #checkout-form .peer:focus ~ label, html[data-gender="female"] #checkout-form .peer:not(:placeholder-shown) ~ label { color: var(--rj-pink-600) !important; } /* Radio buttons */ html[data-gender="female"] input[type="radio"] { border-color: var(--rj-pink-400) !important; } html[data-gender="female"] input[type="radio"]:checked { border-color: var(--rj-pink-500) !important; } html[data-gender="female"] input[type="radio"]::before { background-color: var(--rj-pink-500) !important; } /* --- Hero / dark gradients become soft pink gradients ----------------- */ html[data-gender="female"] .bg-gradient-to-br.from-zinc-900, html[data-gender="female"] .bg-gradient-to-br.from-zinc-900.via-zinc-950.to-black { background: linear-gradient(135deg, #ffe4ef 0%, #ffd6e3 50%, #ffb8cd 100%) !important; } html[data-gender="female"] .bg-gradient-to-t.from-zinc-950 { background: linear-gradient(to top, rgba(255,240,245,0.95), rgba(255,228,235,0.35), transparent) !important; } html[data-gender="female"] .bg-gradient-to-br.from-yellow-600\/10.to-zinc-900 { background: linear-gradient(135deg, rgba(232,83,151,0.18), #ffe4ef) !important; } /* --- Logo: swap the small header/sidebar medallion to the PINK logo --- */ html[data-gender="female"] .rj-brand-logo { background: radial-gradient(circle at 50% 45%, #ffffff 0%, #ffe4ef 75%, #ffb8cd 100%) !important; box-shadow: 0 0 0 1px rgba(232, 83, 151, 0.55), 0 4px 14px rgba(232, 83, 151, 0.18), 0 0 18px rgba(232, 83, 151, 0.18) !important; } html[data-gender="female"] .rj-brand-logo:hover { box-shadow: 0 0 0 1px rgba(232, 83, 151, 0.85), 0 6px 20px rgba(232, 83, 151, 0.35), 0 0 28px rgba(232, 83, 151, 0.35) !important; } /* WhatsApp tooltip pill */ html[data-gender="female"] .text-\[\#D4AF37\].bg-zinc-900\/90, html[data-gender="female"] .bg-zinc-900\/90 { background: rgba(255, 240, 245, 0.95) !important; color: var(--rj-pink-600) !important; } /* --- Language toggle: rose theme ------------------------------------- */ html[data-gender="female"] .lang-toggle { border-color: rgba(232, 83, 151, 0.5) !important; color: var(--rj-pink-600) !important; background: rgba(255, 255, 255, 0.5) !important; } html[data-gender="female"] .lang-toggle:hover { background: rgba(232, 83, 151, 0.15) !important; } /* --- Custom scrollbar in pink ---------------------------------------- */ html[data-gender="female"] .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--rj-pink-500) !important; } html[data-gender="female"] .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 228, 239, 0.5) !important; } /* --- Generic primary / accent utilities ------------------------------ */ html[data-gender="female"] .text-yellow-600, html[data-gender="female"] .text-yellow-500, html[data-gender="female"] .text-amber-500 { color: var(--rj-pink-600) !important; } html[data-gender="female"] .bg-yellow-600, html[data-gender="female"] .bg-yellow-500 { background-color: var(--rj-pink-500) !important; color: #ffffff !important; } /* Make sure dark utility classes don't override us on this theme */ html[data-gender="female"] .text-on-background { color: var(--rj-rose-ink) !important; } html[data-gender="female"] .bg-background { background-color: var(--rj-pink-50) !important; } /* Subtle pink accent under the heading underline */ html[data-gender="female"] .border-b.border-primary-container { border-color: var(--rj-pink-500) !important; } /* Cart / catalog: chip backgrounds we kept as semi-transparent */ html[data-gender="female"] .bg-zinc-900\/80, html[data-gender="female"] .bg-zinc-900\/60, html[data-gender="female"] .bg-zinc-900\/50 { background-color: rgba(255, 240, 245, 0.85) !important; color: var(--rj-rose-ink) !important; } /* Override "dark" Tailwind variant so any dark:bg-* classes flip to pink */ html[data-gender="female"].dark { background-color: var(--rj-pink-50) !important; }