/* ============================================================================ Mozzn — سيليا (Celia) theme custom CSS ---------------------------------------------------------------------------- CANONICAL COPY. Paste the whole file into the theme editor's custom CSS box: https://s.salla.sa/themes/editor/1399399001?version_id=1714640278 Scope : theme version 1714640278 (سيليا) — DRAFT, not launched. Live storefront is امتياز (version 776508577) and is untouched. custom_css_enabled = true on this version (confirmed via API). Hero hook : homepage component id 695124327 ("عن المتجر (سيليا)", path home.about) has custom_classes = "mozzn-hero". Last updated: 2026-07-31 ============================================================================ */ /* ============================================================================ 1. HERO LAYOUT — IM8-style full-bleed left image + pill button ============================================================================ */ .mozzn-hero .anime-item{ opacity:1 !important; transform:none !important; } @media (min-width: 768px){ .mozzn-hero .container{ max-width:100% !important; padding:0 !important; } .mozzn-hero .md\:flex-row{ gap:0 !important; align-items:stretch !important; } .mozzn-hero{ padding-top:0 !important; padding-bottom:0 !important; } .mozzn-hero .md\:w-5\/12{ width:50% !important; } .mozzn-hero .md\:w-5\/12 img{ width:100% !important; height:100% !important; min-height:620px; object-fit:cover !important; border-radius:0 !important; } .mozzn-hero .md\:w-7\/12{ width:50% !important; align-self:center !important; padding:56px 6vw 56px 56px !important; } } /* MOBILE: image edge-to-edge, no side padding / no rounding */ @media (max-width: 767px){ .mozzn-hero .container{ padding-left:0 !important; padding-right:0 !important; } .mozzn-hero{ padding-top:0 !important; } .mozzn-hero .md\:w-5\/12 img{ border-radius:0 !important; width:100% !important; } .mozzn-hero .md\:w-7\/12{ padding:24px 20px 0 !important; } /* re-add text padding */ } /* pill / round button. #241E16 is a warm espresso (hue 28°) rather than the site-wide #1d1f1f, which is very slightly COOL (hue 180°, 3% sat) and fights the warm cream page. Contrast is effectively identical: 15.94:1 vs 16.56:1 with white — both far past AAA. Want it identical to every other button on the site? Set this to #1d1f1f. */ .mozzn-hero a.btn{ border-radius: 9999px !important; background-color: #241E16 !important; color: #ffffff !important; transition: background-color .18s ease; } .mozzn-hero a.btn:hover{ background-color: #3A2F22 !important; } /* ============================================================================ 2. HERO TRUST BADGES — IM8-style, in Mozzn gold/dark ---------------------------------------------------------------------------- Top badge = the REAL subtitle element («العنوان الفرعي») restyled as a pill. Two pills = ::before and ::after, sitting side by side under the CTA. WHY THE SUBTITLE HOSTS THE TOP BADGE: the "عن المتجر (سيليا)" component has no repeater field and its text fields are plain text, so CSS pseudo-elements are the only way to inject content — and the text column has exactly two. Two SEPARATE bottom pills need both of them, so the top badge moves onto the subtitle, which already sits exactly where IM8 puts its top badge. Bonus: the top badge text is now editable in the editor, not in this file. HOW THE ROW WORKS: the column becomes a wrapping flex row. Real children get flex-basis 100% so each keeps its own line; the subtitle and the CTA hug their text and use `margin-inline-end:100%` to force the next item onto a new line. `order` then drops both pseudo-elements onto the last line, side by side. HARD LIMIT: two CSS pills. A third needs a real element — add a second «مميزات المتجر المحسنة (سيليا)» component (it IS a collection: icon + title + sub_title, up to 4 items; the existing one on the page is id 291333318). TO CHANGE WORDING: the top badge = the «العنوان الفرعي» field in the editor. The two pills = the `content:` strings at the bottom of this section. ============================================================================ */ /* --- the column becomes a wrapping flex row -------------------------------- */ .mozzn-hero .md\:w-7\/12{ display: flex !important; flex-wrap: wrap !important; align-content: flex-start; align-items: center; justify-content: flex-start; /* right edge in RTL */ column-gap: 10px; } /* every real child keeps its own full-width line (flex-basis only — their own max-width still applies) */ .mozzn-hero .md\:w-7\/12 > *{ flex: 0 0 100%; } /* --- top badge: the real subtitle element ---------------------------------- */ .mozzn-hero .md\:w-7\/12 > *:first-child{ flex: 0 0 auto; width: max-content; /* one line... */ max-width: 100%; /* ...but wraps instead of overflowing */ margin: 0 0 18px; margin-inline-end: 100%; /* forces the H1 onto the next line */ padding: 8px 16px; font-size: 12.5px; font-weight: 700; line-height: 1.25; /* inverted dark badge — echoes the CTA and sets a clear hierarchy: dark eyebrow → headline → dark CTA, with the quiet tinted pills between. */ color: #F3E9D2; /* 13.67:1 on the dark — well past AAA */ background: #241E16; border: 1px solid #241E16; border-radius: 9999px; } /* --- CTA hugs its text and forces the pills onto the next line ------------- */ .mozzn-hero .md\:w-7\/12 > a.btn{ flex: 0 0 auto; max-width: 100%; white-space: normal; /* long CTA wraps rather than overflowing */ margin-inline-end: 100%; margin-bottom: 0 !important; /* the theme's own bottom margin stacked on top of the pills' margin-top and opened a visible gap; the pills supply all the spacing now */ } /* --- the two claim pills (each gets its own gold check) -------------------- */ .mozzn-hero .md\:w-7\/12::before, .mozzn-hero .md\:w-7\/12::after{ flex: 0 0 auto; display: block; /* explicit: a `*{}` reset does NOT match pseudo-elements, and without this the max-height below would size the CONTENT box and let a second line through */ box-sizing: border-box; width: max-content; max-width: 100%; margin-top: 14px; /* gap under the CTA — tune here */ padding: 10px 38px 10px 16px; /* right padding = room for the check */ font-size: 13px; font-weight: 600; line-height: 1.25; color: #1d1f1f; /* 14.32:1 on the tint */ background-color: #F4EEE0; /* warm tint, not white — keeps the pills quieter than the dark eyebrow/CTA they sit between */ /* Check is #A48016, the brightest gold that still clears the 3:1 WCAG minimum for graphical objects (3.20:1 on this tint). The team picked #C9A227, which measures 2.09:1 here — but at 14px the two are visually indistinguishable, so this keeps the look at no cost. Swap to %23C9A227 below if you want the exact original hex. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A48016' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; border: 1px solid #DED2B8; border-radius: 9999px; } .mozzn-hero .md\:w-7\/12::before{ order: 98; content: "محمصة حديثاً"; } .mozzn-hero .md\:w-7\/12::after { order: 99; content: "مصنع سعودي 🇸🇦"; } /* ⚠️ NOTE ON 🇸🇦 — flag emoji do NOT render on Windows. Segoe UI Emoji ships no flag glyphs, so Chrome/Edge on Windows show the letters "SA" instead of a flag. Fine on iOS / Android / macOS. Remove it or use an SVG if that matters. */ /* ============================================================================ 4. ALTERNATIVE — real elements via a component (no JS) ---------------------------------------------------------------------------- The hero pills are pseudo-elements, which is why hover is a fight. The «مميزات المتجر المحسنة (سيليا)» component is a real repeater and solves it outright. Verified against its schema (component id 291333318): features.icon — Salla icon picker (sicon-*) features.title — text, max 50 chars, ar/en features.sub_title — text, ar/en ← the explanation lives here 3–4 items, plus its own «كلاس CSS مخصص» field Add a second one under the hero, set its custom class to `mozzn-trustbar`, and hover becomes a plain `.item:hover .sub{}` — no tricks, and the wording becomes editable in the editor instead of in this file. Worth knowing first: the features section you ALREADY have on the page says «خطوط إنتاج يابانية / تعبئة نيتروجينية دقيقة تحفظ الطعم والرائحة» — the same point, already visible right below the hero. A hover reveal may be redundant. ============================================================================ */ /* ============================================================================ 5. JS-UPGRADED TRUST PILLS (pairs with theme/celia-custom.js) ---------------------------------------------------------------------------- The pseudo-element pills above stay as the no-JS baseline. The script adds `mozzn-js` to the column, which hides them and swaps in real elements that look identical — so there is NO layout shift, and the pills survive even if JS is off. Only the first pill gains a tooltip. `::before:hover` does not work (browsers never hit-test pseudo-elements as hover targets), and JS cannot listen on one either — hence real elements. ============================================================================ */ .mozzn-hero .md\:w-7\/12.mozzn-js::before, .mozzn-hero .md\:w-7\/12.mozzn-js::after{ content: none; } .mozzn-pillrow{ flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* identical to the pseudo pills so the swap is invisible */ .mozzn-pill{ position: relative; box-sizing: border-box; display: block; width: max-content; max-width: 100%; margin: 0; padding: 10px 38px 10px 16px; font-family: inherit; /*