/* شام يونيفورم — توفر المقاسات في المعرض / in-store availability */ .sham-instore{ border:1px solid #0f6e56; background:#e1f5ee; border-radius:10px; padding:12px 14px; margin:10px 0 18px; text-align:right; direction:rtl; line-height:1.6; } .sham-instore__title{ font-size:13.5px; font-weight:600; color:#0f6e56; margin-bottom:8px; } .sham-instore__lead{ font-size:13px; color:#0f6e56; margin-bottom:8px; } .sham-instore__pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .sham-instore__pill{ display:inline-block; background:#fff; border:1px solid #0f6e56; border-radius:6px; padding:3px 9px; font-size:12.5px; font-weight:500; color:#0f6e56; white-space:nowrap; } .sham-instore__pill--low{ background:#f4fbf8; opacity:.85; } /* --- أزرار الإجراء / action buttons --- */ .sham-instore__actions{ display:flex; flex-wrap:wrap; gap:8px; } .sham-instore .sham-instore__btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 1 auto; min-width:150px; padding:10px 14px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none; line-height:1; box-sizing:border-box; transition:background-color .15s ease, border-color .15s ease; } /* إلغاء أي حركة أو نبض يفرضه الثيم على الأزرار */ .sham-instore .sham-instore__btn, .sham-instore .sham-instore__btn:hover, .sham-instore .sham-instore__btn:focus, .sham-instore .sham-instore__btn:active{ transform:none !important; animation:none !important; box-shadow:none !important; filter:none !important; scale:none !important; text-decoration:none !important; outline:none; } /* قفل حجم الأيقونة — بعض الثيمات تفرض حجماً عاماً على svg */ .sham-instore .sham-instore__btn svg, .sham-instore .sham-instore__icon{ width:16px !important; height:16px !important; min-width:16px !important; max-width:16px !important; min-height:16px !important; max-height:16px !important; flex:0 0 16px !important; display:inline-block !important; vertical-align:middle; transform:none !important; animation:none !important; } .sham-instore .sham-instore__btn--call{ background:#0f6e56; color:#fff; border:1px solid #0f6e56; } .sham-instore .sham-instore__btn--call:hover{ background:#0a5340; border-color:#0a5340; color:#fff; } .sham-instore .sham-instore__btn--map{ background:#fff; color:#0f6e56; border:1px solid #0f6e56; } .sham-instore .sham-instore__btn--map:hover{ background:#d3ede3; border-color:#0a5340; color:#0a5340; } /* --- وقت آخر تحديث --- */ .sham-instore__updated{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(15,110,86,.3); font-size:13px; font-weight:600; color:#0a5340; opacity:1; letter-spacing:0; } /* النسخة الإنجليزية */ .sham-instore[dir="ltr"]{ text-align:left; direction:ltr; } @media (max-width:480px){ .sham-instore .sham-instore__btn{ flex:1 1 100%; } } /* ============================================================ شام يونيفورم — Motion & Layout pack (v2 — CSS-first loader) Paste into: التصميم → تخصيص → الأكواد المخصصة → CSS Pairs with sham-motion.js. Why the loader lives in CSS, not JS: Salla injects the custom JS with `defer` near the end of , so it cannot run until after the page has already painted — that was the flash of content before the loader appeared. This stylesheet loads ~10ms before domInteractive, so the cover is painted in the very first frame. JS now only *removes* it. ============================================================ */ :root{ --sham-ticker-h: 32px; --sham-ticker-fs: 13px; --sham-load-bg: #FAF8F4; --sham-load-line: #C9A227; --sham-logo: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/WlRoxV/QyM2z87vGBKlhEeHyEfWQcdqE5CDoSkWY3CkbrrW.png"); --sham-ease: cubic-bezier(.16,1,.3,1); --sham-cover-z: 2147483000; } /* ------------------------------------------------------------ 1. TICKER STRIP — thin, flush to header, flush to hero ------------------------------------------------------------ */ .s-block--bundle-scrolling-ticker{ margin-top: 0 !important; margin-bottom: 0 !important; line-height: 0; } .s-block--bundle-scrolling-ticker + .s-block, .s-block--bundle-scrolling-ticker + section.s-block{ margin-top: 0 !important; } .s-block--bundle-hero-banner{ margin-top: 0 !important; line-height: 0; } .s-block--bundle-hero-banner > *{ display: block; } /* Inner .ticker-wrapper is in shadow DOM — sham-motion.js injects the matching rules there. This sizes the host. */ .s-block--bundle-scrolling-ticker > *{ display: block; height: var(--sham-ticker-h); min-height: var(--sham-ticker-h); overflow: hidden; line-height: normal; } .s-block--bundle-hero-banner + .s-block{ margin-top: 56px !important; } @media (max-width: 768px){ :root{ --sham-ticker-h: 28px; --sham-ticker-fs: 12px; } .s-block--bundle-hero-banner + .s-block{ margin-top: 36px !important; } } /* ------------------------------------------------------------ 2. LOADER — pure CSS, painted on the first frame html::before = backdrop html::after = logo body::before = progress line ------------------------------------------------------------ */ html::before{ content: ''; position: fixed; inset: 0; z-index: var(--sham-cover-z); background: var(--sham-load-bg); /* Failsafe: if the JS never runs, uncover anyway at 4s. */ animation: shamAutoOut .7s var(--sham-ease) 4s forwards; } html::after{ content: ''; position: fixed; top: 50%; left: 50%; width: 96px; height: 96px; margin: -70px 0 0 -48px; z-index: calc(var(--sham-cover-z) + 1); background: var(--sham-logo) no-repeat center / contain; transform-origin: 50% 50%; animation: shamBreathe 3.4s ease-in-out .4s infinite, shamAutoOut .7s var(--sham-ease) 4s forwards; } body::before{ content: ''; position: fixed; top: 50%; left: 50%; width: 132px; height: 1px; margin: 42px 0 0 -66px; z-index: calc(var(--sham-cover-z) + 1); background-color: rgba(31,42,68,.14); background-image: linear-gradient(var(--sham-load-line), var(--sham-load-line)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; animation: shamFill 2.6s var(--sham-ease) forwards, shamAutoOut .7s var(--sham-ease) 4s forwards; } html[dir="rtl"] body::before{ background-position: right center; } /* Exit — JS adds .sham-ready the moment the page is usable. */ html.sham-ready::before, html.sham-ready::after, html.sham-ready body::before{ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .62s var(--sham-ease), visibility 0s linear .62s; } html.sham-ready::before{ transform: scale(1.02); transition: opacity .62s var(--sham-ease), transform .62s var(--sham-ease), visibility 0s linear .62s; } /* Faster exit on pages after the first in a session. */ html.sham-quick.sham-ready::before, html.sham-quick.sham-ready::after, html.sham-quick.sham-ready body::before{ transition: opacity .34s var(--sham-ease), visibility 0s linear .34s; } @keyframes shamFill{ to{ background-size: 100% 100%; } } @keyframes shamBreathe{ 0%,100%{ transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes shamAutoOut{ to{ opacity: 0; visibility: hidden; pointer-events: none; } } /* Scroll lock — applied and removed by JS only, so a JS failure can never leave the page unscrollable. */ html.sham-loading, html.sham-loading body{ overflow: hidden !important; height: 100%; } /* ------------------------------------------------------------ 3. SEQUENTIAL REVEAL Only active once JS adds .sham-anim. No JS → nothing hidden. ------------------------------------------------------------ */ html.sham-anim .sham-reveal{ opacity: 0; transform: translateY(22px); will-change: opacity, transform; } html.sham-anim .sham-reveal.is-in{ opacity: 1; transform: none; transition: opacity .95s var(--sham-ease), transform .95s var(--sham-ease); } html.sham-anim header.sham-reveal{ transform: translateY(-14px); } html.sham-anim .s-block--bundle-hero-banner.sham-reveal{ transform: translateY(30px) scale(1.012); } html.sham-anim .s-block--bundle-hero-banner.sham-reveal.is-in{ transform: none; transition: opacity 1.25s var(--sham-ease), transform 1.25s var(--sham-ease); } html.sham-anim .sham-stagger > *{ opacity: 0; transform: translateY(16px); } html.sham-anim .sham-stagger.is-in > *{ opacity: 1; transform: none; transition: opacity .8s var(--sham-ease), transform .8s var(--sham-ease); } html.sham-anim .sham-stagger.is-in > *:nth-child(1){ transition-delay: 0ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(2){ transition-delay: 80ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(3){ transition-delay: 160ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(4){ transition-delay: 240ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(5){ transition-delay: 320ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(6){ transition-delay: 400ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(7){ transition-delay: 480ms; } html.sham-anim .sham-stagger.is-in > *:nth-child(8){ transition-delay: 560ms; } /* ------------------------------------------------------------ 4. ACCESSIBILITY ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ html::before, html::after, body::before{ animation: shamAutoOut .01s linear forwards !important; } html.sham-anim .sham-reveal, html.sham-anim .sham-stagger > *{ opacity: 1 !important; transform: none !important; transition: none !important; } }