/* ========================================================= TAQA OUTDOOR — MOBILE LIGHT SWITCH EXACT DESKTOP SWITCH UI Mobile-only implementation. Only placement differs: bottom-left on phone. ========================================================= */ @media (max-width:900px){ #outdoorHeroMobileSection .outdoor-mobile-hero{ position:relative!important; } /* ======================================================= EXACT DESKTOP COMPONENT GEOMETRY / SHELL Desktop values copied 1:1: 78 x 184 outer 62 x 164 track 52 x 88 thumb ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-hero> .outdoor-mobile-light-switch.tq-hero-light-switch{ --switch-w:78px!important; --switch-h:184px!important; --track-w:62px!important; --track-h:164px!important; --thumb-h:88px!important; position:absolute!important; /* MOBILE-ONLY POSITION CHANGE */ left:18px!important; right:auto!important; top:auto!important; bottom:24px!important; transform:none!important; width:var(--switch-w)!important; min-width:var(--switch-w)!important; max-width:var(--switch-w)!important; height:var(--switch-h)!important; min-height:var(--switch-h)!important; max-height:var(--switch-h)!important; padding:9px!important; margin:0!important; gap:0!important; display:grid!important; place-items:center!important; border-radius:999px!important; border:1px solid rgba(224,241,249,.20)!important; cursor:pointer!important; overflow:visible!important; isolation:isolate!important; color:inherit!important; background: radial-gradient( ellipse at 24% 5%, rgba(255,255,255,.18), transparent 32% ), linear-gradient( 135deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 38%, rgba(5,12,18,.17) 72% ), rgba(10,18,25,.32)!important; -webkit-backdrop-filter:blur(22px) saturate(1.28)!important; backdrop-filter:blur(22px) saturate(1.28)!important; box-shadow: 0 24px 56px rgba(0,0,0,.30), 0 7px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.34), inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(133,183,211,.07), inset 0 -1px 0 rgba(0,0,0,.26)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; touch-action:manipulation!important; animation:none!important; filter:none!important; mix-blend-mode:normal!important; transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .42s ease, border-color .42s ease!important; z-index:80!important; } #outdoorHeroMobileSection .outdoor-mobile-hero> .outdoor-mobile-light-switch.tq-hero-light-switch::before{ content:""!important; position:absolute!important; inset:5px!important; border-radius:inherit!important; pointer-events:none!important; z-index:0!important; background: radial-gradient( ellipse at 22% 8%, rgba(255,255,255,.20), transparent 27% ), linear-gradient( 108deg, rgba(255,255,255,.10), transparent 24% 69%, rgba(138,190,219,.05) ), linear-gradient( 180deg, rgba(255,255,255,.045), transparent 36%, rgba(0,0,0,.09) )!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), inset 7px 0 16px rgba(255,255,255,.025), inset -8px 0 18px rgba(0,0,0,.11)!important; } #outdoorHeroMobileSection .outdoor-mobile-hero> .outdoor-mobile-light-switch.tq-hero-light-switch::after{ content:""!important; position:absolute!important; left:50%!important; bottom:-13px!important; width:64%!important; height:18px!important; transform:translateX(-50%)!important; border-radius:50%!important; background: radial-gradient( ellipse, rgba(0,0,0,.42), transparent 70% )!important; filter:blur(8px)!important; pointer-events:none!important; z-index:-1!important; } /* Desktop hover changes are kept visually, but without moving the phone control away from its bottom-left anchor. */ #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-hero-light-switch:hover{ transform:translateX(3px)!important; border-color:rgba(235,248,255,.30)!important; box-shadow: 0 30px 66px rgba(0,0,0,.34), 0 9px 22px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.44), inset 0 0 22px rgba(175,216,238,.035)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-hero-light-switch:active{ transform:translateX(1px) scale(.985)!important; } /* Desktop labels are visually hidden exactly like desktop. */ #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-hero-light-switch> .tq-hero-light-switch-label{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* ======================================================= STATUS ABOVE SWITCH — EXACT DESKTOP UI ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-status{ position:absolute!important; z-index:12!important; left:50%!important; top:-31px!important; transform:translateX(-50%)!important; width:max-content!important; margin:0!important; padding:0!important; pointer-events:none!important; white-space:nowrap!important; font:600 .52rem/1 "DM Sans",sans-serif!important; letter-spacing:.18em!important; text-indent:.18em!important; color:rgba(240,246,249,.82)!important; text-shadow: 0 1px 8px rgba(0,0,0,.50)!important; opacity:.88!important; transition: color .35s ease, text-shadow .35s ease, opacity .35s ease!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-is-on .tq-hero-light-switch-status{ color:rgba(255,226,182,.98)!important; text-shadow: 0 1px 8px rgba(0,0,0,.46), 0 0 12px rgba(221,126,47,.34)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch:not(.tq-is-on) .tq-hero-light-switch-status{ color:rgba(199,224,238,.82)!important; text-shadow: 0 1px 8px rgba(0,0,0,.50), 0 0 10px rgba(72,127,154,.20)!important; } /* ======================================================= TRACK — EXACT DESKTOP UI ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-track{ position:relative!important; z-index:2!important; width:var(--track-w)!important; min-width:var(--track-w)!important; max-width:var(--track-w)!important; height:var(--track-h)!important; min-height:var(--track-h)!important; max-height:var(--track-h)!important; margin:0!important; flex:none!important; overflow:hidden!important; border-radius:999px!important; border:1px solid rgba(228,241,248,.14)!important; -webkit-backdrop-filter:blur(13px) saturate(1.35)!important; backdrop-filter:blur(13px) saturate(1.35)!important; background: radial-gradient( ellipse at 50% 7%, rgba(226,130,52,.48), transparent 42% ), linear-gradient( 180deg, rgba(186,84,24,.36), rgba(45,29,23,.20) 42%, rgba(8,15,20,.28) 70%, rgba(5,11,16,.38) )!important; box-shadow: inset 0 9px 16px rgba(0,0,0,.20), inset 0 -8px 15px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.035), 0 0 18px rgba(192,96,36,.08)!important; transition: background .55s ease, box-shadow .55s ease, border-color .55s ease!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-track::before{ content:"ON"!important; position:absolute!important; z-index:1!important; left:50%!important; top:19px!important; transform:translateX(-50%)!important; color:rgba(255,244,224,.96)!important; font:600 .56rem/1 "DM Sans",sans-serif!important; letter-spacing:.18em!important; text-indent:.18em!important; text-shadow: 0 1px 1px rgba(0,0,0,.45), 0 0 8px rgba(255,191,114,.62), 0 0 18px rgba(211,102,35,.58)!important; pointer-events:none!important; transition: top .46s cubic-bezier(.22,1,.36,1), color .35s ease, text-shadow .35s ease!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-track::after{ content:""!important; position:absolute!important; z-index:0!important; left:7px!important; right:7px!important; top:6px!important; height:54px!important; border-radius:999px 999px 46% 46%!important; background: radial-gradient( ellipse at 50% 12%, rgba(255,255,255,.26), transparent 34% ), linear-gradient( 180deg, rgba(255,163,74,.22), rgba(255,86,0,.06) )!important; filter:blur(.3px)!important; opacity:.9!important; pointer-events:none!important; transition: top .46s cubic-bezier(.22,1,.36,1), background .45s ease, opacity .35s ease!important; } /* ======================================================= THUMB — EXACT DESKTOP UI ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-thumb{ position:absolute!important; z-index:5!important; top:67px!important; left:4px!important; width:52px!important; height:var(--thumb-h)!important; display:block!important; border-radius:26px!important; overflow:hidden!important; color:transparent!important; border:1px solid rgba(231,245,252,.13)!important; background: linear-gradient( 90deg, transparent 0 12%, rgba(0,0,0,.42) 12% 17%, rgba(255,255,255,.055) 18% 20%, transparent 21% 28%, rgba(0,0,0,.42) 29% 34%, rgba(255,255,255,.055) 35% 37%, transparent 38% 45%, rgba(0,0,0,.42) 46% 51%, rgba(255,255,255,.055) 52% 54%, transparent 55% 62%, rgba(0,0,0,.42) 63% 68%, rgba(255,255,255,.055) 69% 71%, transparent 72% 79%, rgba(0,0,0,.42) 80% 85%, rgba(255,255,255,.055) 86% 88%, transparent 89% 100% ), radial-gradient( ellipse at 30% 4%, rgba(255,255,255,.13), transparent 34% ), linear-gradient( 180deg, rgba(35,45,53,.78), rgba(10,16,21,.76) )!important; background-size:40px 40px,auto,auto!important; background-position:center 25px,center,center!important; background-repeat:no-repeat!important; -webkit-backdrop-filter:blur(10px) saturate(1.15)!important; backdrop-filter:blur(10px) saturate(1.15)!important; box-shadow: 0 10px 19px rgba(0,0,0,.39), 0 3px 5px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.19), inset 1px 0 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.40)!important; transition: top .48s cubic-bezier(.2,.82,.2,1), transform .48s cubic-bezier(.2,.82,.2,1), box-shadow .38s ease!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-thumb::before, #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-thumb::after{ content:""!important; position:absolute!important; top:12px!important; width:8px!important; height:8px!important; border-radius:50%!important; border:1px solid rgba(0,0,0,.75)!important; background: radial-gradient( circle at 36% 30%, #6e757b, #24292d 42%, #0a0d0f 78% )!important; box-shadow: 0 1px 2px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.15)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-thumb::before{ left:8px!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-thumb::after{ right:8px!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch .tq-hero-light-switch-thumb svg{ display:none!important; } /* ======================================================= LIGHT ON — EXACT DESKTOP UI ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-is-on{ border-color:rgba(221,126,47,.24)!important; box-shadow: 0 24px 58px rgba(0,0,0,.50), 0 0 28px rgba(192,96,36,.12), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -2px 8px rgba(0,0,0,.72)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-is-on .tq-hero-light-switch-track{ background: radial-gradient( ellipse at 50% 5%, rgba(255,177,94,.72), rgba(206,91,26,.30) 32%, transparent 60% ), linear-gradient( 180deg, rgba(211,103,34,.48), rgba(116,50,21,.25) 34%, rgba(10,16,21,.28) 65%, rgba(5,11,16,.38) )!important; border-color:rgba(246,187,124,.22)!important; box-shadow: inset 0 9px 16px rgba(0,0,0,.16), inset 0 -8px 15px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,240,218,.16), 0 0 20px rgba(219,106,34,.18), 0 0 38px rgba(192,96,36,.08)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-is-on .tq-hero-light-switch-thumb{ top:72px!important; left:4px!important; transform:translateY(0)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch.tq-is-on .tq-hero-light-switch-thumb::before{ background: radial-gradient( circle at 35% 30%, #ffe2b0, #d66f27 40%, #55210c 78% )!important; box-shadow: 0 0 7px rgba(231,116,42,.72), inset 0 1px 1px rgba(255,255,255,.24)!important; } /* ======================================================= LIGHT OFF — EXACT DESKTOP UI ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-light-switch:not(.tq-is-on) .tq-hero-light-switch-track{ background: radial-gradient( ellipse at 50% 95%, rgba(72,154,198,.40), transparent 42% ), linear-gradient( 180deg, rgba(5,12,17,.40), rgba(11,22,30,.30) 48%, rgba(26,82,112,.29) 78%, rgba(29,105,144,.37) )!important; border-color:rgba(138,194,224,.18)!important; box-shadow: inset 0 9px 16px rgba(0,0,0,.25), inset 0 -8px 15px rgba(0,0,0,.14), inset 0 -1px 0 rgba(192,229,248,.10), 0 0 20px rgba(52,131,176,.08)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch:not(.tq-is-on) .tq-hero-light-switch-track::before{ content:"OFF"!important; top:132px!important; color:rgba(225,242,250,.94)!important; text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 0 8px rgba(91,184,232,.52), 0 0 18px rgba(49,131,177,.44)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch:not(.tq-is-on) .tq-hero-light-switch-track::after{ top:104px!important; background: radial-gradient( ellipse at 50% 85%, rgba(162,224,255,.18), transparent 36% ), linear-gradient( 0deg, rgba(56,169,225,.17), rgba(41,108,149,.04) )!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch:not(.tq-is-on) .tq-hero-light-switch-thumb{ top:4px!important; left:4px!important; transform:translateY(0)!important; } #outdoorHeroMobileSection .outdoor-mobile-light-switch:not(.tq-is-on) .tq-hero-light-switch-thumb::after{ background: radial-gradient( circle at 35% 30%, #b9e7ff, #397fa4 42%, #0b2432 78% )!important; box-shadow: 0 0 7px rgba(67,158,205,.62), inset 0 1px 1px rgba(255,255,255,.20)!important; } /* ======================================================= IMAGE CROSSFADE / LOCKED ZOOM / ARROW STATE ======================================================= */ #outdoorHeroMobileSection .outdoor-mobile-light-crossfade-layer{ pointer-events:none!important; opacity:1!important; transition: opacity 420ms cubic-bezier(.22,1,.36,1)!important; will-change:opacity!important; } #outdoorHeroMobileSection .outdoor-mobile-light-crossfade-layer.is-fading{ opacity:0!important; } #outdoorHeroMobileSection.outdoor-light-is-off .outdoor-mobile-light-switch-arrow{ animation:none!important; filter:none!important; opacity:.34!important; } #outdoorHeroMobileSection.outdoor-light-is-off :is( [data-outdoor-zoom-trigger], [data-facade-zoom-trigger] ){ opacity:.55!important; filter:saturate(.42) brightness(.76)!important; cursor:not-allowed!important; pointer-events:auto!important; } /* ======================================================= MOBILE ALERTS ======================================================= */ .outdoor-mobile-light-alert{ position:fixed; z-index:2147483100; left:50%; bottom:max(8px,env(safe-area-inset-bottom,0px)); transform:translate3d(-50%,14px,0) scale(.985); width:min(310px,calc(100vw - 74px)); min-height:54px; padding:8px 10px; display:flex; align-items:center; gap:9px; direction:rtl; color:#f4f7f8; background:rgba(7,12,20,.92); border:1px solid rgba(220,229,232,.17); border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.32); -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .28s; font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif; } .outdoor-mobile-light-alert.is-visible{ opacity:1; visibility:visible; transform:translate3d(-50%,0,0) scale(1); transition-delay:0s; } .outdoor-mobile-light-alert__icon{ flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#f3b36d; background:rgba(192,96,36,.12); border:1px solid rgba(232,174,88,.18); } .outdoor-mobile-light-alert__icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .outdoor-mobile-light-alert__copy{ min-width:0; display:flex; flex-direction:column; gap:2px; text-align:right; } .outdoor-mobile-light-alert__copy strong{ font:700 clamp(10px,2.8vw,12px)/1.3 "IBM Plex Sans Arabic",Tahoma,Arial,sans-serif; } .outdoor-mobile-light-alert__copy small{ font:400 clamp(8px,2.1vw,9.5px)/1.4 "IBM Plex Sans Arabic",Tahoma,Arial,sans-serif; color:rgba(244,247,248,.68); } #outdoorHeroMobileSection .outdoor-mobile-light-switch.is-rate-limited{ cursor:not-allowed!important; filter:saturate(.35) brightness(.72)!important; opacity:.72!important; } .outdoor-mobile-light-rate-alert{ border-color:rgba(255,170,90,.22)!important; } .outdoor-mobile-light-rate-alert .outdoor-mobile-light-alert__icon{ color:#ffb15f!important; background:rgba(192,96,36,.14)!important; border-color:rgba(255,177,95,.24)!important; } @media (prefers-reduced-motion:reduce){ #outdoorHeroMobileSection .outdoor-mobile-light-crossfade-layer, .outdoor-mobile-light-alert{ transition:none!important; } } } /* MOBILE ONLY — hard separation from desktop. */ @media (min-width:901px){ #outdoorHeroMobileSection .outdoor-mobile-light-switch, .outdoor-mobile-light-alert{ display:none!important; } } /* ========================================================= MOBILE COMPACT POSITION OVERRIDE Keep the EXACT desktop UI proportions, only scale the whole control down and anchor it bottom-left like the WhatsApp button. ========================================================= */ @media (max-width:900px){ #outdoorHeroMobileSection .outdoor-mobile-hero> .outdoor-mobile-light-switch.tq-hero-light-switch{ left:auto!important; right:3.4%!important; top:auto!important; bottom:15%!important; transform-origin:right bottom!important; transform:scale(.52)!important; } #outdoorHeroMobileSection .outdoor-mobile-hero> .outdoor-mobile-light-switch.tq-hero-light-switch:hover{ transform:scale(.52)!important; } #outdoorHeroMobileSection .outdoor-mobile-hero> .outdoor-mobile-light-switch.tq-hero-light-switch:active{ transform:scale(.50)!important; } }