/* ============================================================ BELARA HOME MOBILE VISUAL V2 Homepage + Mobile <= 767px ONLY Handles: 4 Hero image direction 7 Belara Compass image direction 10 Text readability over images Does NOT touch: Header Search Mobile Menu Product Cards Categories Slider Footer Desktop ============================================================ */ @media (max-width: 767px) { /* ======================================================== 1. HERO Mirror IMAGE ONLY — never mirror text ======================================================== */ body.home.belara2-site .belara2-hero { position: relative !important; isolation: isolate !important; overflow: hidden !important; } body.home.belara2-site .belara2-hero-picture { overflow: hidden !important; } body.home.belara2-site .belara2-hero-picture img { transform: scaleX(-1) !important; transform-origin: center center !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* * Soft reading gradient. * Not a solid rectangle. */ body.home.belara2-site .belara2-hero::after { content: "" !important; position: absolute !important; z-index: 1 !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 270deg, rgba(255,247,239,.62) 0%, rgba(255,247,239,.38) 28%, rgba(255,247,239,.08) 58%, rgba(255,247,239,0) 78% ) !important; } body.home.belara2-site .belara2-hero-inner { position: relative !important; z-index: 3 !important; } body.home.belara2-site .belara2-hero-copy { position: relative !important; z-index: 3 !important; text-align: right !important; } body.home.belara2-site .belara2-hero-copy h1 { color: #2A1210 !important; text-shadow: 0 1px 1px rgba(255,255,255,.55), 0 2px 12px rgba(255,247,239,.28) !important; } body.home.belara2-site .belara2-hero-copy p { color: #2A1210 !important; text-shadow: 0 1px 2px rgba(255,255,255,.55) !important; } /* * Preserve BELARA eyebrow colors. */ body.home.belara2-site .belara2-hero-brand, body.home.belara2-site .belara2-hero-brand-ar, body.home.belara2-site .belara2-hero-brand-en { position: relative !important; z-index: 3 !important; } /* ======================================================== 2. BELARA COMPASS Class is attached by JS using the ACTUAL section text. ======================================================== */ body.home.belara2-site .belara-mobile-compass-v2 { position: relative !important; isolation: isolate !important; overflow: hidden !important; } /* * Mirror only the selected largest picture. */ body.home.belara2-site .belara-mobile-compass-v2 .belara-mobile-mirror-image-v2 { transform: scaleX(-1) !important; transform-origin: center center !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* * If Compass is implemented as CSS background, * JS creates this independent mirrored layer. */ body.home.belara2-site .belara-mobile-compass-bg-v2 { position: absolute !important; z-index: 0 !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; transform: scaleX(-1) !important; transform-origin: center center !important; } /* * Elegant dark gradient for Compass text readability. */ body.home.belara2-site .belara-mobile-compass-v2::after { content: "" !important; position: absolute !important; z-index: 1 !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 270deg, rgba(42,18,16,.70) 0%, rgba(42,18,16,.49) 40%, rgba(42,18,16,.16) 72%, rgba(42,18,16,.04) 100% ) !important; } body.home.belara2-site .belara-mobile-compass-v2 > *:not(.belara-mobile-compass-bg-v2) { position: relative !important; z-index: 2 !important; } body.home.belara2-site .belara-mobile-compass-v2 h1, body.home.belara2-site .belara-mobile-compass-v2 h2, body.home.belara2-site .belara-mobile-compass-v2 h3, body.home.belara2-site .belara-mobile-compass-v2 p { text-shadow: 0 2px 8px rgba(0,0,0,.42) !important; } /* ======================================================== 3. EDITORIAL IMAGE SECTIONS "أكملي إطلالتك" etc. ======================================================== */ body.home.belara2-site .belara2-editorial { position: relative !important; isolation: isolate !important; overflow: hidden !important; } body.home.belara2-site .belara2-editorial-overlay { position: absolute !important; z-index: 1 !important; inset: 0 !important; opacity: 1 !important; background: linear-gradient( 270deg, rgba(42,18,16,.72) 0%, rgba(42,18,16,.50) 42%, rgba(42,18,16,.17) 73%, rgba(42,18,16,.04) 100% ) !important; pointer-events: none !important; } body.home.belara2-site .belara2-editorial-inner { position: relative !important; z-index: 3 !important; } body.home.belara2-site .belara2-editorial-inner h1, body.home.belara2-site .belara2-editorial-inner h2, body.home.belara2-site .belara2-editorial-inner h3 { color: #FFF7EF !important; text-shadow: 0 2px 9px rgba(0,0,0,.48) !important; } body.home.belara2-site .belara2-editorial-inner p { color: #FFF7EF !important; text-shadow: 0 2px 7px rgba(0,0,0,.42) !important; } /* ======================================================== 4. LIFESTYLE IMAGE SECTION "تفاصيل صغيرة تصنع إطلالة متكاملة" ======================================================== */ body.home.belara2-site .belara2-lifestyle { position: relative !important; isolation: isolate !important; overflow: hidden !important; } body.home.belara2-site .belara2-lifestyle-overlay { position: absolute !important; z-index: 1 !important; inset: 0 !important; opacity: 1 !important; background: linear-gradient( 270deg, rgba(42,18,16,.70) 0%, rgba(42,18,16,.48) 43%, rgba(42,18,16,.15) 74%, rgba(42,18,16,.03) 100% ) !important; pointer-events: none !important; } body.home.belara2-site .belara2-lifestyle-inner { position: relative !important; z-index: 3 !important; } body.home.belara2-site .belara2-lifestyle-inner h1, body.home.belara2-site .belara2-lifestyle-inner h2, body.home.belara2-site .belara2-lifestyle-inner h3 { color: #FFF7EF !important; text-shadow: 0 2px 9px rgba(0,0,0,.48) !important; } body.home.belara2-site .belara2-lifestyle-inner p { color: #FFF7EF !important; text-shadow: 0 2px 7px rgba(0,0,0,.42) !important; } /* ======================================================== 5. EYEBROWS / GOLD SMALL TITLES Preserve BELARA gold accent ======================================================== */ body.home.belara2-site .belara2-editorial .belara2-eyebrow, body.home.belara2-site .belara2-lifestyle .belara2-eyebrow, body.home.belara2-site .belara-mobile-compass-v2 .belara2-eyebrow { color: #E7C577 !important; text-shadow: 0 2px 7px rgba(0,0,0,.38) !important; } /* ======================================================== 6. BUTTONS OVER IMAGE Ensure they stay above overlays ======================================================== */ body.home.belara2-site .belara2-editorial a, body.home.belara2-site .belara2-editorial button, body.home.belara2-site .belara2-lifestyle a, body.home.belara2-site .belara2-lifestyle button, body.home.belara2-site .belara-mobile-compass-v2 a, body.home.belara2-site .belara-mobile-compass-v2 button { position: relative !important; z-index: 4 !important; } } /* END BELARA HOME MOBILE VISUAL V2 */ /* ============================================================ BELARA HOME MOBILE VISUAL V2.1 FIXES ONLY: 7 #belara-compass 10 Feature image text readability IMPORTANT: Hero is intentionally NOT targeted here. ============================================================ */ @media (max-width: 767px) { /* ======================================================== A. BELARA COMPASS Restore correct image / overlay / content stacking. ======================================================== */ body.home.belara2-site #belara-compass { position: relative !important; display: block !important; width: 100% !important; min-height: 520px !important; overflow: hidden !important; isolation: isolate !important; background: #2A1210 !important; } /* * Actual Compass image. * It must remain a BACKGROUND-LIKE absolute layer. * Mirror image only. */ body.home.belara2-site #belara-compass > img { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; transform: scaleX(-1) !important; transform-origin: center center !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* * Correct the too-broad V2 direct-child rule. */ body.home.belara2-site #belara-compass > img.belara-mobile-mirror-image-v2 { position: absolute !important; inset: 0 !important; z-index: 0 !important; transform: scaleX(-1) !important; } /* -------------------------------------------------------- Compass overlay -------------------------------------------------------- */ body.home.belara2-site #belara-compass > .belara2-editorial-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; pointer-events: none !important; background: linear-gradient( 270deg, rgba(42,18,16,.76) 0%, rgba(42,18,16,.61) 33%, rgba(42,18,16,.32) 61%, rgba(42,18,16,.08) 100% ) !important; } /* -------------------------------------------------------- Compass content -------------------------------------------------------- */ body.home.belara2-site #belara-compass > .belara2-editorial-inner { position: relative !important; inset: auto !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 520px !important; margin: 0 auto !important; padding: 38px 22px !important; box-sizing: border-box !important; transform: none !important; } body.home.belara2-site #belara-compass .belara2-compass-content { position: relative !important; z-index: 4 !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 335px !important; margin: 0 0 0 auto !important; padding: 0 !important; transform: none !important; color: #FFF7EF !important; direction: rtl !important; text-align: right !important; } /* Eyebrow */ body.home.belara2-site #belara-compass .belara2-eyebrow { display: block !important; visibility: visible !important; opacity: 1 !important; margin: 0 0 8px !important; color: #E7C577 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.6 !important; text-shadow: 0 2px 7px rgba(0,0,0,.42) !important; } /* Main title */ body.home.belara2-site #belara-compass .belara2-compass-content h2 { display: block !important; visibility: visible !important; opacity: 1 !important; margin: 0 0 10px !important; color: #FFF7EF !important; font-size: clamp( 28px, 8vw, 38px ) !important; font-weight: 800 !important; line-height: 1.25 !important; text-align: right !important; text-shadow: 0 3px 12px rgba(0,0,0,.48) !important; } /* Intro */ body.home.belara2-site #belara-compass .belara2-compass-intro { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 310px !important; margin: 0 0 18px !important; color: #FFF7EF !important; font-size: 13.5px !important; line-height: 1.85 !important; text-align: right !important; text-shadow: 0 2px 8px rgba(0,0,0,.45) !important; } /* -------------------------------------------------------- Compass navigation -------------------------------------------------------- */ body.home.belara2-site #belara-compass .belara2-compass-nav { position: relative !important; z-index: 5 !important; display: grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: 9px !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 330px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } body.home.belara2-site #belara-compass .belara2-compass-route { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; min-width: 0 !important; min-height: 68px !important; margin: 0 !important; padding: 10px 11px !important; border: 1px solid rgba(231,197,119,.46) !important; border-radius: 12px !important; background: rgba(42,18,16,.42) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; color: #FFF7EF !important; text-decoration: none !important; box-sizing: border-box !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } body.home.belara2-site #belara-compass .belara2-compass-route strong { display: block !important; color: #FFF7EF !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.55 !important; text-align: right !important; } body.home.belara2-site #belara-compass .belara2-compass-route small { display: block !important; margin-top: 2px !important; color: rgba( 255, 247, 239, .82 ) !important; font-size: 10.5px !important; line-height: 1.5 !important; text-align: right !important; } /* ======================================================== B. FEATURE IMAGE CARDS Consultant + Gift Wrap Exact structure found in live HTML: .belara2-feature-grid > article ======================================================== */ body.home.belara2-site .belara2-feature-grid > article { position: relative !important; isolation: isolate !important; overflow: hidden !important; } /* * Keep image behind text. */ body.home.belara2-site .belara2-feature-grid > article > img { z-index: 0 !important; } /* * Reading layer. * Deliberately subtle — no ugly solid rectangle. */ body.home.belara2-site .belara2-feature-grid > article::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; border-radius: inherit !important; background: linear-gradient( 180deg, rgba(42,18,16,.05) 0%, rgba(42,18,16,.20) 30%, rgba(42,18,16,.48) 67%, rgba(42,18,16,.65) 100% ) !important; } /* * Existing content remains in its original location. */ body.home.belara2-site .belara2-feature-grid > article > div { z-index: 3 !important; } /* Main titles */ body.home.belara2-site .belara2-feature-grid > article > div h2 { color: #FFF7EF !important; text-shadow: 0 2px 9px rgba(0,0,0,.55) !important; } /* Description */ body.home.belara2-site .belara2-feature-grid > article > div p:not(.belara2-eyebrow) { color: #FFF7EF !important; text-shadow: 0 2px 7px rgba(0,0,0,.48) !important; } /* Gold small label */ body.home.belara2-site .belara2-feature-grid > article .belara2-eyebrow { color: #E7C577 !important; text-shadow: 0 2px 7px rgba(0,0,0,.44) !important; } /* Buttons remain clear */ body.home.belara2-site .belara2-feature-grid > article .belara2-btn { position: relative !important; z-index: 4 !important; color: #2A1210 !important; background: #FFF7EF !important; text-shadow: none !important; } } /* END BELARA HOME MOBILE VISUAL V2.1 */