/** Shopify CDN: Minification failed Line 157:0 All "@import" rules must come first **/ /* ========================================================================== ONYX EG — DESIGN SYSTEM v1.0 · August 2026 -------------------------------------------------------------------------- الألوان مستخرجة من ملفات اللوجو الأصلية — مش تخمين. مبني بالكامل على CSS Logical Properties → الـ RTL شغال أوتوماتيك. التركيب في شوبيفاي: 1. حط الملف في assets/onyx-design-system.css 2. في layout/theme.liquid قبل مباشرة: {{ 'onyx-design-system.css' | asset_url | stylesheet_tag }} 3. لازم يكون بعد ملفات الثيم الأساسية عشان يغلب عليها ========================================================================== */ /* ========================================================================== 1 · TOKENS — كل حاجة بتتحكم من هنا ========================================================================== */ :root { /* ---- الألوان الأساسية ---- */ --onyx-black: #000000; /* الخلفية الأساسية */ --onyx-surface: #0B0B0C; /* الكروت والأسطح المرتفعة */ --onyx-surface-2: #131315; /* hover على الكروت */ --onyx-white: #FFFFFF; /* ---- الدهبي ---- */ /* ⚠️ قاعدة ذهبية: خلفية سودا → استخدم --onyx-gold (تباين 12.5:1 ✅) خلفية بيضا → استخدم --onyx-gold-ink (تباين 5.25:1 ✅) متستخدمش --onyx-gold على أبيض أبداً — تباينه 1.58:1 وغير مقروء */ --onyx-gold: #EDC984; /* الدهبي الرسمي — للخلفيات السودا */ --onyx-gold-hi: #FAF1C3; /* اللمعة — للتدرجات فقط */ --onyx-gold-deep: #CA9D4E; /* ظل الدهبي — لحواف التدرجات */ --onyx-gold-ink: #8A6620; /* الدهبي للخلفيات الفاتحة */ /* ---- النصوص ---- */ --onyx-text: #F5F5F5; --onyx-text-muted: #8A8A8F; --onyx-text-faint: #76767B; --onyx-text-on-gold: #151006; /* النص فوق الأزرار الدهبية */ /* ---- الحدود ---- */ --onyx-line: rgba(237, 201, 132, 0.18); --onyx-line-hover: rgba(237, 201, 132, 0.55); --onyx-line-neutral: rgba(255, 255, 255, 0.08); /* ---- الحالات ---- */ --onyx-success: #4ADE80; --onyx-error: #F87171; /* ---- الخطوط ---- */ /* لاتيني: Manrope — هندسي وعريض، بيرن مع اللوجو عربي: IBM Plex Sans Arabic — بيتوازن مع Manrope في الوزن والارتفاع */ --onyx-font-latin: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --onyx-font-arabic: 'IBM Plex Sans Arabic', 'Manrope', sans-serif; --onyx-font: var(--onyx-font-latin); /* ---- مقاسات الخط ---- ⚠️ Dawn's own html{font-size} is calc(var(--font-body-scale) * 62.5%) — a 10px root, not the browser default 16px (base.css, verified live on 14 Aug 2026: html font-size computes to 10px). These tokens are written in rem for the font-body-scale slider to keep working, so every value below is x1.6 vs. its "intended" 16px-root rem value — that factor converts the intended pixel size correctly against a 10px root. Do NOT "fix" this by changing html{font-size} instead — that's Dawn's own native scale and doing so breaks every unrelated Dawn component sitewide. Fix the token, not the root. */ --onyx-fs-hero: clamp(4rem, 6vw, 7.2rem); --onyx-fs-h1: clamp(3.2rem, 4.5vw, 5.2rem); --onyx-fs-h2: clamp(2.56rem, 3.2vw, 3.84rem); --onyx-fs-h3: clamp(2rem, 2.2vw, 2.56rem); --onyx-fs-body: 1.6rem; --onyx-fs-sm: 1.4rem; --onyx-fs-xs: 1.2rem; --onyx-fs-eyebrow: 1.1rem; /* ---- الأوزان ---- */ --onyx-fw-light: 300; --onyx-fw-normal: 400; --onyx-fw-medium: 500; --onyx-fw-bold: 700; --onyx-fw-black: 800; /* ---- تباعد الحروف ---- */ --onyx-ls-hero: -0.02em; --onyx-ls-body: 0em; --onyx-ls-eyebrow: 0.28em; /* العناوين الصغيرة CAPS */ /* ---- ارتفاع السطر ---- */ --onyx-lh-tight: 1.1; --onyx-lh-normal: 1.5; --onyx-lh-loose: 1.7; /* العربي محتاج تنفيس أكتر */ /* ---- المسافات · أساس 4px ---- */ --onyx-sp-1: 4px; --onyx-sp-2: 8px; --onyx-sp-3: 12px; --onyx-sp-4: 16px; --onyx-sp-5: 24px; --onyx-sp-6: 32px; --onyx-sp-7: 48px; --onyx-sp-8: 64px; --onyx-sp-9: 96px; --onyx-sp-10:128px; /* R14 Q2: single height for the qty control and both buy CTAs — approved as the one new token this round. 46px next to 59px in the same row was a visibly uneven pair of boxes right at the decision point. */ --onyx-control-h: 52px; /* المسافة الرأسية بين السكشنات — استخدمها في كل سكشن */ --onyx-section-y: clamp(56px, 9vw, 128px); --onyx-container: 1280px; --onyx-gutter: clamp(20px, 4vw, 48px); /* ---- الحواف الدائرية ---- */ --onyx-r-sm: 6px; --onyx-r-md: 12px; --onyx-r-lg: 20px; --onyx-r-pill: 999px; /* ---- الظلال ---- */ --onyx-shadow-sm: 0 2px 12px rgba(0,0,0,.4); --onyx-shadow-md: 0 8px 32px rgba(0,0,0,.55); --onyx-glow-gold: 0 0 32px rgba(237,201,132,.18); /* ---- الحركة ---- */ --onyx-ease: cubic-bezier(.22,.61,.36,1); --onyx-t-fast: .16s; --onyx-t-base: .24s; } /* R11-4: AA (4.5:1) is a lab number — it doesn't account for a phone at half brightness outdoors. Desktop keeps the current restraint; mobile raises both muted tokens one step. Same three-step hierarchy (#F5F5F5 › muted › faint) and the same ramp hue pattern (R=G, B two steps higher) as the base values. */ @media (max-width: 749px) { :root { --onyx-text-muted: #95959A; /* 6.11 → 7.04:1 on #000 — clears AAA */ --onyx-text-faint: #838388; /* 4.65 → 5.57:1 on #000 — comfortable margin over AA */ } } /* ========================================================================== 2 · تحميل الخطوط ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap'); /* ========================================================================== 3 · RTL — التبديل التلقائي -------------------------------------------------------------------------- R7/R8, verified live: this theme never sets a `dir` attribute on — its real RTL switch is `html[lang="ar"]` (assets/base.css:3638 sets `direction: rtl` from it). `[dir="rtl"]` never matched, which meant every rule below — the Arabic font swap, the LTR-number forcing CLAUDE.md §4 requires for .onyx-num/.onyx-price/.onyx-spec-value, the line-height and icon-flip adjustments — was dead code sitewide until now. Converted to the selector that actually matches; logical properties still do the layout mirroring on their own via the computed `direction` value, which was already correct. ========================================================================== */ html[lang="ar"] { --onyx-font: var(--onyx-font-arabic); --onyx-ls-hero: 0; /* العربي مبيتعملوش letter-spacing سالب */ --onyx-ls-eyebrow: 0.1em; /* والتباعد الواسع بيكسر الحروف المتصلة */ /* R8-1: uplift on the tokens, not a % on nested elements (that compounds by nesting depth — see assets/base.css for the rule this replaces). */ --onyx-fs-body: 1.75rem; /* 17.5px vs 16 */ --onyx-fs-sm: 1.55rem; /* 15.5px vs 14 */ --onyx-fs-xs: 1.3rem; /* 13px vs 12 */ } html[lang="ar"] .onyx-h1, html[lang="ar"] .onyx-h2, html[lang="ar"] .onyx-hero-title { line-height: 1.3; } html[lang="ar"] .onyx-body { line-height: var(--onyx-lh-loose); } /* الأرقام والأكواد تفضل LTR حتى في الوضع العربي. R15-6: `embed` → `isolate`. embed still lets the run's own punctuation (·, ×, /, -) bidi-reorder against the Arabic text around it once the run sits inside an RTL paragraph — isolate treats the whole run as one neutral object to the surrounding paragraph, which is what actually stops "90 دقيقة" turning into "دقيقة 90". Never put `direction` on the paragraph/cell itself — only ever on the numeral run, isolated. */ html[lang="ar"] .onyx-num, html[lang="ar"] .onyx-price, html[lang="ar"] .onyx-spec-value { direction: ltr; display: inline-block; unicode-bidi: isolate; } /* الأيقونات اللي ليها اتجاه (أسهم) تتقلب */ html[lang="ar"] .onyx-icon-flip { transform: scaleX(-1); } /* ========================================================================== 4 · الأساسيات ========================================================================== */ .onyx-scope, body.onyx-theme, body { background: var(--onyx-black); color: var(--onyx-text); font-family: var(--onyx-font); font-size: var(--onyx-fs-body); line-height: var(--onyx-lh-normal); -webkit-font-smoothing: antialiased; } /* R7-1(a) root cause, verified live: base.css's body.gradient rule (specificity 0,1,0, set from the theme's colour-scheme setting in config/settings_data.json — excluded from every push) outranks the bare `body` selector above regardless of source order, and was resolving to #090909 instead of pure black. !important pins it so a future settings change can't reintroduce a non-black body. */ body.gradient { background: var(--onyx-black) !important; } .onyx-container { max-inline-size: var(--onyx-container); margin-inline: auto; padding-inline: var(--onyx-gutter); } .onyx-section { padding-block: var(--onyx-section-y); } /* ========================================================================== 5 · التايبوجرافي ========================================================================== */ .onyx-eyebrow { font-size: var(--onyx-fs-eyebrow); font-weight: var(--onyx-fw-bold); letter-spacing: var(--onyx-ls-eyebrow); text-transform: uppercase; color: var(--onyx-gold); margin-block-end: var(--onyx-sp-3); } .onyx-hero-title { font-size: var(--onyx-fs-hero); font-weight: var(--onyx-fw-black); line-height: var(--onyx-lh-tight); letter-spacing: var(--onyx-ls-hero); color: var(--onyx-white); margin: 0 0 var(--onyx-sp-4); } .onyx-h1 { font-size: var(--onyx-fs-h1); font-weight: var(--onyx-fw-bold); line-height: var(--onyx-lh-tight); letter-spacing: var(--onyx-ls-hero); margin: 0 0 var(--onyx-sp-4); } .onyx-h2 { font-size: var(--onyx-fs-h2); font-weight: var(--onyx-fw-bold); line-height: 1.2; margin: 0 0 var(--onyx-sp-3); } .onyx-h3 { font-size: var(--onyx-fs-h3); font-weight: var(--onyx-fw-medium); line-height: 1.3; margin: 0 0 var(--onyx-sp-2); } .onyx-body { font-size: var(--onyx-fs-body); color: var(--onyx-text-muted); margin: 0 0 var(--onyx-sp-4); } .onyx-small { font-size: var(--onyx-fs-sm); color: var(--onyx-text-muted); } .onyx-faint { color: var(--onyx-text-faint); } /* عنوان سكشن موحّد — استخدمه في كل سكشن */ .onyx-section-head { text-align: center; max-inline-size: 640px; margin-inline: auto; margin-block-end: var(--onyx-sp-7); } /* ========================================================================== 6 · الأزرار -------------------------------------------------------------------------- 🔧 بيصلح الباج الحالي: الزرار اللي التعبئة الدهبية غطت جزء منه بس والسعر قاعد على خلفية شفافة. الحل: السعر جوه الزرار كعنصر منفصل بخلفية خاصة، أو بره الزرار خالص. ========================================================================== */ .onyx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--onyx-sp-2); padding-block: 14px; padding-inline: 28px; border: 1px solid transparent; border-radius: var(--onyx-r-pill); font-family: inherit; font-size: var(--onyx-fs-sm); font-weight: var(--onyx-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--onyx-t-base) var(--onyx-ease), border-color var(--onyx-t-base) var(--onyx-ease), transform var(--onyx-t-fast) var(--onyx-ease); } .onyx-btn:active { transform: translateY(1px); } .onyx-btn:focus-visible { outline: 2px solid var(--onyx-gold); outline-offset: 3px; } /* الزرار الأساسي — دهبي ممتلئ */ .onyx-btn--primary { background: linear-gradient(180deg, var(--onyx-gold-hi), var(--onyx-gold)); color: var(--onyx-text-on-gold); } .onyx-btn--primary:hover { background: linear-gradient(180deg, #FFF7D9, #F2D294); } /* الزرار الثانوي — محدد */ /* R6-2: transparent fill + 18%-alpha border on pure black read as effectively invisible (verified complaint: Add to Cart). Changed the component itself, not one instance, so every ghost button on the site — Add to Cart, Read the Policy, Write a review, anything added later — picks up the same dark-glass treatment automatically. All values are existing tokens. */ .onyx-btn--ghost { background: var(--onyx-line-neutral); color: var(--onyx-text); border-color: var(--onyx-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .onyx-btn--ghost:hover { background: var(--onyx-surface-2); border-color: var(--onyx-line-hover); } .onyx-btn--block { inline-size: 100%; } .onyx-btn--lg { padding-block: 18px; padding-inline: 36px; font-size: var(--onyx-fs-body); } /* ✅ الحل الصحيح لزرار "اطلب الآن + السعر" */ .onyx-btn__price { padding-inline: 12px; padding-block: 4px; margin-inline-start: var(--onyx-sp-2); border-radius: var(--onyx-r-pill); background: rgba(21,16,6,.14); font-weight: var(--onyx-fw-bold); direction: ltr; } /* ========================================================================== 7 · الكروت ========================================================================== */ .onyx-card { background: var(--onyx-surface); border: 1px solid var(--onyx-line-neutral); border-radius: var(--onyx-r-lg); padding: var(--onyx-sp-6); transition: border-color var(--onyx-t-base) var(--onyx-ease), background var(--onyx-t-base) var(--onyx-ease); } .onyx-card:hover { border-color: var(--onyx-line); background: var(--onyx-surface-2); } /* كارت الثقة — ضمان / شحن / دفع عند الاستلام / دعم */ .onyx-trust { text-align: center; } .onyx-trust__icon { inline-size: 32px; block-size: 32px; color: var(--onyx-gold); margin-block-end: var(--onyx-sp-4); } .onyx-trust__title { font-size: var(--onyx-fs-h3); font-weight: var(--onyx-fw-bold); color: var(--onyx-white); margin-block-end: var(--onyx-sp-2); } .onyx-trust__text { font-size: var(--onyx-fs-sm); color: var(--onyx-text-muted); margin: 0; } .onyx-grid { display: grid; gap: var(--onyx-sp-5); } .onyx-grid--4 { grid-template-columns: repeat(4, 1fr); } .onyx-grid--3 { grid-template-columns: repeat(3, 1fr); } .onyx-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .onyx-grid--4, .onyx-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .onyx-grid--4, .onyx-grid--3, .onyx-grid--2 { grid-template-columns: 1fr; } } /* ========================================================================== 8 · الشارات وجدول المواصفات ========================================================================== */ .onyx-badge { display: inline-flex; align-items: center; gap: var(--onyx-sp-2); padding-block: 6px; padding-inline: 14px; border: 1px solid var(--onyx-line); border-radius: var(--onyx-r-pill); font-size: var(--onyx-fs-eyebrow); font-weight: var(--onyx-fw-bold); letter-spacing: var(--onyx-ls-eyebrow); text-transform: uppercase; color: var(--onyx-gold); } .onyx-badge__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--onyx-gold); } /* شريط شارات الثقة تحت زراير الهيرو */ .onyx-trustbar { display: flex; flex-wrap: wrap; gap: var(--onyx-sp-5); margin-block-start: var(--onyx-sp-5); } .onyx-trustbar span { display: inline-flex; align-items: center; gap: var(--onyx-sp-2); font-size: var(--onyx-fs-sm); color: var(--onyx-text-muted); } .onyx-trustbar span::before { content: "✓"; color: var(--onyx-gold); font-weight: var(--onyx-fw-bold); } /* المواصفات — الأرقام الكبيرة */ .onyx-spec { text-align: center; } .onyx-spec-value { font-size: var(--onyx-fs-h2); font-weight: var(--onyx-fw-black); color: var(--onyx-white); line-height: 1; } .onyx-spec-unit { font-size: var(--onyx-fs-sm); color: var(--onyx-gold); margin-inline-start: 2px; } .onyx-spec-label { font-size: var(--onyx-fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--onyx-text-faint); margin-block-start: var(--onyx-sp-2); } /* جدول المواصفات */ .onyx-table { inline-size: 100%; border-collapse: collapse; } .onyx-table td { padding-block: 14px; border-block-end: 1px solid var(--onyx-line-neutral); font-size: var(--onyx-fs-sm); } .onyx-table td:first-child { color: var(--onyx-text-muted); } .onyx-table td:last-child { color: var(--onyx-white); font-weight: var(--onyx-fw-medium); text-align: end; } /* ========================================================================== 9 · إصلاحات للمشاكل الحالية في الموقع ========================================================================== */ /* 🔧 الفوتر — كان رمادي مزرق (لون Dawn الافتراضي) والموقع أسود ملاحظة R22: .onyx-footer اتشالت من هنا — sections/footer.liquid دلوقتي عنده خلفيته الكاملة (gradient) في الـ style block الخاص بيه، مربوطة بـ ID مخصوص. الـ !important هنا كان بيكسحها ويرجّعها أسود مصمت. الselectors التانية سايبينهم كـ fallback دفاعي لأي مكان تاني لسه شايل .footer أو .shopify-section-group-footer-group بدون خلفية خاصة بيه. */ .footer, .shopify-section-group-footer-group { background: var(--onyx-black) !important; border-block-start: 1px solid var(--onyx-line-neutral); } /* 🔧 زرار الواتساب — كان أخضر فسفوري بيدمر البالتة ملاحظة: الكلاس الحقيقي في layout/theme.liquid اسمه .onyx-native-whatsapp، وده السبب إن الإصلاح القديم مكانش بيشتغل — الselectors كانت بتشاور على كلاسات مش موجودة. */ .onyx-whatsapp, .onyx-native-whatsapp, a[href*="wa.me"].floating-whatsapp { background: var(--onyx-surface) !important; border: 1px solid var(--onyx-line) !important; color: var(--onyx-gold) !important; box-shadow: var(--onyx-shadow-md); } .onyx-whatsapp:hover, .onyx-native-whatsapp:hover { border-color: var(--onyx-line-hover) !important; } .onyx-native-whatsapp { position: fixed; inset-block-end: var(--onyx-sp-5); inset-inline-end: var(--onyx-sp-5); z-index: 55; inline-size: 54px; block-size: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .onyx-native-whatsapp svg { inline-size: 26px; block-size: 26px; fill: currentColor; } /* R10-3(a), verified live at 390×844: the sticky buy bar (measured 74px tall including its own safe-area padding, z-index 60) sits on top of the WhatsApp button (54px, z-index 55, inset-block-end sp-5 = occupies 24-78px) once it appears — WhatsApp is a stated support channel on the trust cards, so this is a real conflict, not cosmetic. Lifts the button clear of the bar's real height plus a full step of breathing room; the bar's own env(safe-area-inset-bottom) is mirrored here so the two grow together on a notched device. Same easing as the bar so they move as one. */ @media (max-width: 749px) { body:has(.onyx-sticky-buy.is-visible) .onyx-native-whatsapp { inset-block-end: calc(74px + var(--onyx-sp-4) + env(safe-area-inset-bottom)); transition: inset-block-end var(--onyx-t-base) var(--onyx-ease); } } /* R13-A5: the product page's sticky buy bar (74px) sits on top of the footer's last link on mobile unless the footer clears it. Scoped to pages that actually have the bar via :has() rather than adding this padding sitewide — every other page (home, collections) doesn't carry the bar and shouldn't carry the extra footer padding either. */ @media (max-width: 749px) { body:has(.onyx-sticky-buy) footer.onyx-simple-footer { padding-block-end: 120px; } } /* 🔧 ودجت Judge.me — كان الزرار تركوازي والعناوين أسود على أسود (مش مقروءة). السيلكتورز هنا بدون scope لـ .jdgm-widget عمدًا: Judge.me بيرندر .jdgm-write-rev-link وعناصر تانية برّه الـ .jdgm-widget wrapper، فالـ scope القديم مكنش بيتطابق خالص. font-family: var(--onyx-font) بدل inherit — Judge.me بيحط "Inter" inline على عنصر أب فوق .jdgm-widget، فالـ inherit كان بيورّث الخط الغلط ده بدل ما يوصل لخط الموقع الحقيقي. وmax-width/margin بره !important عشان تغلب الـ inline style اللي بيحط 1200px بدل عرض .onyx-shell الحقيقي. */ .jdgm-widget, .jdgm-widget * { font-family: var(--onyx-font) !important; } .jdgm-widget { max-width: min(1300px, 94%) !important; margin-inline: auto !important; } /* Dawn's .page-width wrapper (sections/apps.liquid) adds its own 5rem side padding on top of the widget's own max-width, shrinking it further than .onyx-shell. Neutralize that padding so the two containers align exactly. */ .shopify-section:has(.jdgm-widget) .page-width { padding-inline: 0 !important; } /* R21 — the "Write a review" button belongs to OUR reviews block, but it is rendered by Judge.me in the section after it, so the two were separated by 68px of nothing (measured: 28px to the widget root, then Judge.me's own 32 + 24 + 16 stack margins). Zeroing only the OUTERMOST margin closes the gap by 32px and leaves Judge.me's internal rhythm alone. Deliberately a direct-child selector on the widget root: .jm-* class names are app-generated and can change between Judge.me releases, so this leans on structure (first stack inside the widget) rather than on the space-300 modifier in the name. If Judge.me ever restructures and the gap returns, this rule is the place to look, not a regression in our section. */ .jdgm-widget > .jm-stack:first-child { margin-block-start: 0 !important; } .jdgm-rev-widg__title, .jdgm-rev-widg__summary-text, .jdgm-rev__title, .jdgm-rev__author, .jdgm-histogram__bar-label, .jdgm-empty-state, .jdgm-empty-state * { color: var(--onyx-white) !important; } .jdgm-rev__body, .jdgm-rev__timestamp, .jdgm-rev-widg__sort-wrapper { color: var(--onyx-text-muted) !important; } .jdgm-write-rev-link, .jdgm-rev__buttons .jdgm-rev__reply-btn, .jdgm-btn, .jdgm-paginate__page { background: var(--onyx-line-neutral) !important; border: 1px solid var(--onyx-line) !important; color: var(--onyx-gold) !important; border-radius: var(--onyx-r-pill) !important; text-shadow: none !important; } .jdgm-write-rev-link:hover, .jdgm-btn:hover { border-color: var(--onyx-line-hover) !important; background: var(--onyx-surface-2) !important; } /* النجوم دهبي بدل الأصفر الافتراضي */ .jdgm-star { color: var(--onyx-gold) !important; } .jdgm-rev, .jdgm-rev-widg { background: transparent !important; border-color: var(--onyx-line-neutral) !important; } /* 🔧 Judge.me غيّر نظام الكلاسات بالكامل لـ "jm-*" (بدل "jdgm-*" القديمة) في النسخة الحالية — اتأكد ده مباشرة من الـ DOM الحي في 14 أغسطس 2026. كل القواعد اللي فوق دي بتفضل موجودة كـ fallback للنسخ القديمة، بس دي القواعد اللي فعليًا بتتطابق دلوقتي. "Customer Reviews" و"Be the first to write a review" كانوا نص أسود على خلفية شفافة/سودا (مش ظاهرين خالص)، والزرار كان تركوازي Judge.me الافتراضي (#108474). */ .jdgm-widget [class*="jm-"] { font-family: var(--onyx-font) !important; } .jdgm-widget p, .jdgm-widget span, .jdgm-widget h1, .jdgm-widget h2, .jdgm-widget h3, .jdgm-widget h4, .jdgm-widget label { color: var(--onyx-white) !important; } .jdgm-widget .jm-no-reviews-state__text { color: var(--onyx-text-muted) !important; } /* R6-2: same dark-glass treatment as .onyx-btn--ghost, so the review button matches every other secondary button on the page. */ .jdgm-widget .jm-button, .jdgm-widget .jm-button--primary, .jdgm-widget .jm-action-buttons__button { background: var(--onyx-line-neutral) !important; border: 1px solid var(--onyx-line) !important; color: var(--onyx-gold) !important; border-radius: var(--onyx-r-pill) !important; box-shadow: none !important; } .jdgm-widget .jm-button:hover, .jdgm-widget .jm-button--primary:hover, .jdgm-widget .jm-action-buttons__button:hover { border-color: var(--onyx-line-hover) !important; background: var(--onyx-surface-2) !important; } /* العزل: قسم Judge.me (Dawn "apps" section) بيرث خلفية مختلفة عن باقي الصفحة السودا الخالصة — نفس نمط :has() المستخدم في باقي الثيم. */ /* R7-1(a) — root cause finally confirmed: `transparent` (R5-3's fix) was inheriting the real page background, which was never pure black to begin with — `body` had no unconditional black rule (only body.onyx-theme, and the body never carries that class), so it fell back to Dawn's colour-scheme background from settings_data.json (#090909, off-black — a file that's excluded from every push, which is why this survived Rounds 4-6). Fixed at the source above (unconditional `body` rule); this explicit black is the redundant, defence-in-depth half of that same fix, per the brief: do both, they're complementary. */ .shopify-section:has(.jdgm-widget), .shopify-section:has(.jdgm-rev-widg) { background: var(--onyx-black) !important; border: 0 !important; /* R7-1(b) follow-up, verified live: Dawn's generic `.section` class adds its own 48px margin-block-start between every section on the page (theme "space between sections" setting) — on top of everything the rules below zero inside the widget, this was still a real 48px of the measured gap. Scoped to just this section, same as the rest of this block. */ margin-block-start: 0 !important; /* R9-4(a)/R10-2: the review button was nearly touching the section right after it (the product page's V2 pointer bar) — this section had zero bottom clearance of its own once R7/R8 collapsed everything else. R9-4(a)'s --onyx-sp-8 still read as only ~20px clear against the V2 bar in practice — bumped to --onyx-sp-9 (R10-2) for an obvious margin, not a hairline. */ padding-block-end: var(--onyx-sp-9) !important; } /* R4-5: our own "REVIEWS / Be the first to review the V1" block already sits directly above this widget, so Judge.me's own heading + empty-state line are a duplicate — hide them, keep only the button (the one part actually doing a job). Verified live 14 Aug 2026: the real classes are jm-*, not the jdgm-rev-widg__* ones an earlier brief assumed — those never matched. */ /* R6-3: with the title/text above hidden, Judge.me's own 48px top+bottom inner padding (.jm-review-widget) was most of what remained visible — collapsed it since our own copy block above already carries the section's rhythm; the button just needs to sit close under it. */ /* R7-1(b): the section's own generous rhythm (padding-block, formerly --onyx-sp-8) plus Judge.me's internal padding stacked into a ~380px gap between our paragraph and the button. Zero everything Judge.me/Dawn contribute, then add back exactly one controlled gap on the widget itself so the distance is intentional, not two paddings adding up. */ .jdgm-widget, .jdgm-rev-widg { min-block-size: 0 !important; padding-block: 0 !important; margin-block: 0 !important; } .shopify-section:has(.jdgm-widget) { /* R10-2 fix: was the shorthand `padding-block: 0 !important` — since this rule sits later in the file than the R9-4(a)/R10-2 padding-block-end rule above (same selector, same !important, equal specificity), it was silently resetting that fix back to 0 every time. Only the start needs zeroing here; the end is owned by the earlier rule. */ padding-block-start: 0 !important; } .jdgm-widget .jm-review-widget { padding-block: 0 !important; margin-block-start: var(--onyx-sp-6) !important; } .jdgm-widget .jm-review-widget-minimal-header__title, .jdgm-widget .jm-no-reviews-state__text { display: none !important; } /* R7-1(b) follow-up, verified live: a separate .jdgm-empty-state box (inside .jm-review-widget__body, not .jm-no-reviews-state above) renders with its own text already empty/hidden but still reserved 24px of block height — dead space contributing to the paragraph-to-button gap. Only ever populated in the zero-review state Judge.me itself is naming here, so collapsing it is safe. */ .jdgm-widget .jdgm-empty-state { display: none !important; } /* Judge.me renders left-aligned by default; our block above it is centred. */ .jdgm-widget, .jdgm-widget .jm-review-widget, .jdgm-widget .jm-no-reviews-state, .jdgm-widget .jm-action-buttons { text-align: center !important; justify-content: center !important; } /* R11-5: the "Write a Review" modal's own fields (name/email/body/yt_url) render at 14px — under iOS Safari's 16px zoom threshold. Modal renders outside .jdgm-widget (its own overlay), so targeted directly. */ @media (max-width: 749px) { .jdgm-write-review-modal__field-input { font-size: var(--onyx-fs-body) !important; } } /* 🔧 الكاروسيل — الكروت الجانبية كانت مقصوصة في نص الكلمة */ .onyx-carousel { overflow: hidden; } .onyx-carousel__track { display: flex; gap: var(--onyx-sp-5); } .onyx-carousel__slide { flex: 0 0 auto; min-inline-size: 0; } .onyx-carousel__slide--side { opacity: .35; filter: blur(2px); pointer-events: none; } /* 🔧 السيكشن الدافي — كان بيكسر البالتة الباردة */ .onyx-img-warm { filter: saturate(.55) brightness(.85); } .onyx-overlay-dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)); } /* ========================================================================== 10 · أدوات مساعدة ========================================================================== */ .onyx-gold-text { color: var(--onyx-gold); } .onyx-center { text-align: center; } .onyx-stack > * + * { margin-block-start: var(--onyx-sp-4); } .onyx-divider { block-size: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--onyx-line), transparent); margin-block: var(--onyx-sp-7); } .onyx-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* احترام تفضيل تقليل الحركة */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* 📱 موبايل — زرار شراء ثابت أسفل الشاشة */ .onyx-sticky-buy { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60; display: none; align-items: center; gap: var(--onyx-sp-3); padding: var(--onyx-sp-3) var(--onyx-gutter); padding-block-end: calc(var(--onyx-sp-3) + env(safe-area-inset-bottom)); background: rgba(0,0,0,.92); backdrop-filter: blur(12px); border-block-start: 1px solid var(--onyx-line-neutral); } @media (max-width: 749px) { .onyx-sticky-buy { display: flex; } } /* ========================================================================== 11 · صفحات السياسات (/policies/*) -------------------------------------------------------------------------- ⚠️ Confirmed live (22 Aug 2026): Shopify's own /policies/* route does NOT render this theme's templates/policy.liquid → {% section 'onyx-policy' %} at all — checked the rendered DOM on all four policy pages, zero trace of .onyx-apple-policy-page anywhere. Shopify serves its own fixed markup instead (.shopify-policy__title > h1, .shopify-policy__body > .rte > p), styled by a Shopify-hosted stylesheet (policy-*.css) that the theme can't edit or replace. sections/onyx-policy.liquid is dead code for this route — left in place, not deleted, in case Shopify ever changes this behaviour, but every rule below targets Shopify's real classes, not ours. Also confirmed: the actual policy body content is flat

tags only, no

/

//