/* ============================================================ DE VATCHI — theme.css Loaded LAST so it can re-assign component colours safely. · Light / Dark tokens via [data-theme] on · Arabic (RTL) typography + logical-direction fixes · Theme / language toggle buttons, WhatsApp buttons ============================================================ */ /* ---------- design tokens ---------- */ :root { --bg: #f5eee4; --bg-soft: #ece0cd; --surface: rgba(255, 253, 249, .7); --surface-soft: rgba(255, 253, 249, .6); --surface-strong: rgba(255, 253, 249, .66); --float: #f5eee4; --overlay: rgba(245, 238, 228, .97); --text: #27110e; --muted: #8a7466; --border: rgba(101, 0, 0, .16); --accent: #650000; --soft: rgba(101, 0, 0, .82); --soft-strong: rgba(101, 0, 0, .9); --soft-faint: rgba(101, 0, 0, .66); --soft-placeholder: rgba(101, 0, 0, .38); --tint: rgba(101, 0, 0, .08); --tint-weak: rgba(101, 0, 0, .04); --tint-table: rgba(101, 0, 0, .035); --tint-row: rgba(101, 0, 0, .03); --empty-mark: rgba(101, 0, 0, .25); --scroll-thumb: rgba(101, 0, 0, .35); /* Arabic stacks lead with the faces actually loaded in index.html (Cairo 300–700 + Amiri 400/700/italic). Noto names stay as local fallbacks. */ --sans-ar: 'Cairo', 'Noto Sans Arabic', 'DM Sans', system-ui, sans-serif; --serif-ar: 'Amiri', 'Instrument Serif', Georgia, serif; --ar-sans: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'DM Sans', system-ui, sans-serif; --ar-display: 'Cairo', 'Noto Kufi Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --ar-serif: 'Amiri', 'Traditional Arabic', Georgia, serif; } [data-theme="dark"] { --bg: #0d0b09; --bg-soft: #16110e; --surface: rgba(255, 244, 233, .05); --surface-soft: rgba(255, 244, 233, .04); --surface-strong: rgba(255, 244, 233, .06); --float: #14100d; --overlay: rgba(13, 11, 9, .97); --ink: #e9dccd; --text: #e9dccd; --border: rgba(245, 238, 228, .14); --accent: #d88a68; --muted: #a28c7b; --sand: #16110e; --line: rgba(245, 238, 228, .14); --line-strong: rgba(245, 238, 228, .3); --soft: rgba(233, 220, 205, .8); --soft-strong: rgba(233, 220, 205, .9); --soft-faint: rgba(233, 220, 205, .65); --soft-placeholder: rgba(233, 220, 205, .38); --tint: rgba(245, 238, 228, .08); --tint-weak: rgba(245, 238, 228, .05); --tint-table: rgba(245, 238, 228, .04); --tint-row: rgba(245, 238, 228, .03); --empty-mark: rgba(245, 238, 228, .22); --scroll-thumb: rgba(245, 238, 228, .25); --shadow: 0 24px 64px -22px rgba(0, 0, 0, .75); } /* ---------- apply tokens to components (loaded last → wins) ---------- */ body { background: var(--bg); color: var(--text); } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); } .eyebrow, .page-sub, .search-label, .story-lede, .story-copy p, .story-intro p, .contact-info p, .faq-item p, .article-body p, .conf-block p, .conf-side p, .order-eta, .order-total, .intro-text p, .edit-copy p, .journal-card p, .value-card p, .pdp-desc { color: var(--soft); } .field label { color: var(--soft-faint); } .field input::placeholder, .field textarea::placeholder, #search-input::placeholder { color: var(--soft-placeholder); } .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px var(--tint-weak); } .qty button:hover, .ghost-button:hover, .search-hit:hover { background: var(--tint); } .cart-line:hover { background: var(--tint-row); } .admin-table tr:hover td { background: var(--tint-table); } .drawer-empty-mark { color: var(--empty-mark); } .drawer-meta, .drawer-note, .drawer-remove, .search-hit-cat, .search-none, .order-date { color: var(--muted); } .login-card, .stat-card, .panel, .sec-card, .order-card, .conf-block, .summary-card { background: var(--surface); } .contact-info, .conf-side, .story-quote, .faq-cta { background: var(--bg-soft); } .drawer, .modal, .preloader, .nav-more-panel, .upload-label { background: var(--float); } .search-root { background: var(--overlay); } /* media placeholders use the soft background */ .cart-thumb, .drawer-thumb, .pdp-stage, .edit-media, .j-feature-media, .article-hero { background: var(--bg-soft); } /* header stays red in both themes — only the glassy scroll state adjusts */ #site-header.scrolled { background: rgba(82, 0, 0, .82); } /* hero / film keep their deep-red gradient in both themes */ .hero { background: radial-gradient(120% 90% at 50% 20%, #4d0a0a 0%, #2b0505 58%, #180202 100%); } .film { background: linear-gradient(180deg, #2b0505, #4d0a0a); } /* ---------- theme toggle ---------- */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } .lang-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(245, 238, 228, .4); border-radius: 999px; min-width: 46px; padding: 7px 10px; font-size: 10px; letter-spacing: .1em; font-weight: 600; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); } .lang-toggle:hover { background: var(--cream); color: var(--red); border-color: var(--cream); transform: translateY(-1px); } .lang-current { text-transform: uppercase; } .menu-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(245, 238, 228, .16); } .menu-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(245, 238, 228, .35); padding: 10px 16px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 238, 228, .85); transition: background .3s, color .3s; } .menu-toggle:hover { background: rgba(245, 238, 228, .1); color: var(--cream); } .theme-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ---------- WhatsApp button in admin ---------- */ .wa-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(46, 107, 52, .45); border-radius: 999px; color: #2e6b34; background: rgba(46, 107, 52, .07); white-space: nowrap; font-size: 11px; transition: background .25s, border-color .25s, color .25s; } [data-theme="dark"] .wa-btn { color: #7ec98a; border-color: rgba(126, 201, 138, .4); background: rgba(126, 201, 138, .1); } .wa-btn:hover { background: #2e6b34; border-color: #2e6b34; color: #fff; } /* ---------- Arabic / RTL typography ---------- */ /* body: a dedicated Arabic sans, zero letter-spacing (letter-spacing breaks the joining of Arabic letters), taller leading for diacritics */ html[dir="rtl"] body { font-family: var(--ar-sans); letter-spacing: 0; word-spacing: .02em; line-height: 1.8; -webkit-font-smoothing: antialiased; font-synthesis: none; } /* display headings: a compact Arabic display face, no negative tracking */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .drawer-title, html[dir="rtl"] .empty-mark, html[dir="rtl"] .login-mark, html[dir="rtl"] .drawer-empty p { font-family: var(--ar-display); font-weight: 700; letter-spacing: 0; line-height: 1.22; } html[dir="rtl"] h1 { font-weight: 600; } /* no fake italic for Arabic emphasis — Amiri serif as an elegant accent */ html[dir="rtl"] h1 em, html[dir="rtl"] h2 em, html[dir="rtl"] h3 em, html[dir="rtl"] blockquote em, html[dir="rtl"] figcaption em { font-family: var(--ar-serif); font-style: normal; font-weight: 400; letter-spacing: 0; } /* labels that render in Arabic must never letter-space or uppercase */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .nav-links a, html[dir="rtl"] .nav-more-btn, html[dir="rtl"] .menu-button, html[dir="rtl"] .footer-head, html[dir="rtl"] .field label, html[dir="rtl"] .journal-meta, html[dir="rtl"] .track-step, html[dir="rtl"] .search-label, html[dir="rtl"] .ticker-track span, html[dir="rtl"] .preloader-name, html[dir="rtl"] .nav-notice, html[dir="rtl"] .sec-head span, html[dir="rtl"] .summary-trust { letter-spacing: 0 !important; text-transform: none; font-family: var(--ar-sans); } /* keep original Latin tracking on the pieces that stay Latin */ html[dir="rtl"] .brand-name, html[dir="rtl"] .nav-cta, html[dir="rtl"] .lang-current, html[dir="rtl"] .bag-count, html[dir="rtl"] .order-id, html[dir="rtl"] .card-index, html[dir="rtl"] .size-btn, html[dir="rtl"] .size-chip, html[dir="rtl"] .qty, html[dir="rtl"] .pdp-reviews { letter-spacing: normal; direction: ltr; unicode-bidi: embed; } /* native form widgets render Arabic text too — give them the Cairo face */ html[dir="rtl"] select, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: var(--ar-sans); } /* directional helpers */ html[dir="rtl"] .page-head h1::after { left: auto; right: 0; } html[dir="rtl"] .search-close { right: auto; left: 4vw; } html[dir="rtl"] .card-arrow, html[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); } html[dir="rtl"] .article-body p:first-child::first-letter { float: right; padding-right: 0; padding-left: 12px; } html[dir="rtl"] .field select { background-position: calc(0% + 18px) 50%, calc(0% + 13px) 50%; padding-right: 14px; padding-left: 34px; } html[dir="rtl"] .crumbs { text-align: right; } /* numbers & prices stay LTR inside RTL */ html[dir="rtl"] .card-price, html[dir="rtl"] .pdp-price, html[dir="rtl"] .summary-row strong, html[dir="rtl"] .drawer-subtotal strong, html[dir="rtl"] .order-id, html[dir="rtl"] .bag-count { direction: ltr; unicode-bidi: embed; } /* ---------- dark mode: wishlist / colour / stock / inventory components ---------- */ [data-theme="dark"] .wish-fab { background: rgba(22, 17, 14, .92); color: var(--ink); } [data-theme="dark"] .wish-fab.active { color: #ff8a7a; background: rgba(194, 37, 37, .22); } [data-theme="dark"] .wish-pdp { color: var(--ink); } [data-theme="dark"] .wish-pdp.active { color: #ff8a7a; border-color: rgba(255, 138, 122, .4); background: rgba(194, 37, 37, .12); } [data-theme="dark"] .swatch { box-shadow: inset 0 0 0 2px #0d0b09; } [data-theme="dark"] .pdp-stock.stock-in { color: #7ec98a; } [data-theme="dark"] .pdp-stock.stock-low { color: #e2b45a; } [data-theme="dark"] .pdp-stock.stock-out { color: #ff8a7a; } [data-theme="dark"] .pdp-sku span { color: #e2b8a0; } [data-theme="dark"] .breadcrumbs .bc-cat { color: var(--soft); } [data-theme="dark"] .breadcrumbs em { color: #e2b8a0; } [data-theme="dark"] .inv-pill.in { color: #7ec98a; background: rgba(126, 201, 138, .12); } [data-theme="dark"] .inv-pill.low { color: #e2b45a; background: rgba(226, 180, 90, .12); } [data-theme="dark"] .inv-pill.out { color: #ff8a7a; background: rgba(255, 138, 122, .1); } [data-theme="dark"] .inv-input { border-color: var(--line-strong); color: var(--ink); } [data-theme="dark"] .card-out, [data-theme="dark"] .card-low { background: rgba(0, 0, 0, .78); } /* ---------- dark mode: admin cloud badge + migration notice ---------- */ [data-theme="dark"] .admin-cloud.warn { color: #e2b45a; border-color: rgba(226, 180, 90, .5); } [data-theme="dark"] .cloud-notice { border-color: rgba(226, 180, 90, .4); background: rgba(226, 180, 90, .08); } [data-theme="dark"] .cloud-notice strong { color: #e2b45a; } [data-theme="dark"] .cloud-notice code { background: rgba(226, 180, 90, .15); }