/* ═══════════════════════════════════════════════════════════════════════════ THE BOARD — a literal port of the product's own stylesheet. Source: Masjid/css/jarrar.css (+ the handful of bootstrap reboot rules the kiosk actually relies on). Selectors are scoped under .kiosk, which plays the role the plays on the device. Three mechanical translations, no redesign: 1. The device is 1920×1080 with body{zoom:1.4}, so its layout space is 1371.43×771.43. The .kiosk root IS that layout space, painted through transform:scale(1.4 × --k) — visually identical, no `zoom` needed. 2. vh/vw become fractions of 771.43/1371.43 (the device's layout viewport). 3. position:fixed stays: the root's transform makes .kiosk the containing block, exactly the box the viewport is on the device. The rules the kiosk injects from JS at boot (accent colour, overlay opacity) are here with var(--acc) standing in for the injected colour. States the device reaches through jQuery show/hide are expressed as .board.is-* rules that set the same computed styles. ═══════════════════════════════════════════════════════════════════════════ */ /* the kiosk's own font files, copied from the device */ @font-face{font-family:'KCairo';src:url(../fonts/kiosk-cairo.woff2) format('woff2');font-display:swap} @font-face{font-family:'KTajawal';src:url(../fonts/kiosk-tajawal.woff2) format('woff2');font-display:swap} @font-face{font-family:'KRakkas';src:url(../fonts/kiosk-rakkas.woff2) format('woff2');font-display:swap} /* Lato · Lalezar · Comfortaa · KioskFustat are byte-identical to the site's copies and are declared in site.css */ .board{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate; background:#05070F;user-select:none;contain:layout paint} .kiosk{ --acc:#ff4757; position:absolute;top:0;left:0; width:1371.43px;height:771.43px; transform:scale(calc(var(--k,.4) * 1.4));transform-origin:top left; direction:ltr;text-align:left; font-family:'Comfortaa',cursive;font-size:16px;line-height:1.5;color:#fff; background-image:url(../img/kiosk/masjid-3.jpeg); background-size:cover;background-position-y:60%;background-repeat:no-repeat; } /* ── the bootstrap the kiosk stands on ── */ .kiosk p{margin:0 0 16px} .kiosk img{vertical-align:middle;border-style:none} .kiosk b{font-weight:bolder} .kiosk var{font-family:inherit;font-style:normal} .kiosk .container{width:1140px;max-width:1140px;padding-left:15px;padding-right:15px; margin-left:auto;margin-right:auto;position:relative} .kiosk .text-center{text-align:center} .kiosk .text-right{text-align:right} .kiosk button{font:inherit;background:transparent;border:0;color:inherit} .kiosk center{display:block;text-align:center} /* ── overlay ── */ .kiosk .overlay{background:#000;position:fixed;top:0;left:0;height:100%;width:100%; opacity:.88;transition:1s opacity;z-index:-1} .board.is-day .kiosk .overlay{ background-image:linear-gradient(to top,#1e3c72 0%,#1e3c72 1%,#2a5298 100%)} .board.is-jumuaa .kiosk .overlay{ background-image:linear-gradient(-60deg,#177361 0%,#8c761f 100%);opacity:.9} .board.is-tomorrow .kiosk .overlay{background:var(--acc)} .board.is-salat .kiosk .overlay{opacity:.3} /* z-index:-1 children paint behind the root's background unless the root makes its own stacking context — the transform on .kiosk does exactly that, the same way the device relies on the body being the canvas. */ /* ── while-salat icons ── */ .kiosk .whileSalatIcons{display:none;position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:35%;padding:10px;background:#fff; border-radius:50%;filter:drop-shadow(2px 4px 14px black)} .kiosk .whileSalatIcons.bavette{color:#60c5bf;background:transparent;width:60%; padding:10px;filter:drop-shadow(1px 2px 0 white)} .board.is-salat .kiosk .whileSalatIcons.no-phone{display:block} .board.is-salat .kiosk{border-radius:20px;box-shadow:0 0 0 .6em #000} /* ── header ── */ .kiosk .header{color:#fff;padding-top:12px;transition:.7s all} .kiosk .header.scaleDown{transform:scale(.8);margin-top:-10px} .kiosk .masjid{font-family:'KioskFustat',sans-serif !important;font-size:38px} .kiosk .time{color:#ffe500;font-size:115px;font-weight:bold;margin-top:-25px; letter-spacing:24px;font-family:'Lato','Germania One';text-shadow:0 0 40px} .kiosk .date{font-size:29px;margin-top:-20px} .kiosk .date b{margin-left:-20px} .kiosk .date span,.kiosk .date b{font-family:'KCairo';font-weight:bold} .board.is-adhan .kiosk .header, .board.is-jumuaa .kiosk .header, .board.is-tomorrow .kiosk .header{transform:scale(.8);margin-top:-10px} .board.is-tomorrow .kiosk .time{color:#fff} /* ── the Eid line ── */ .kiosk .aid{position:relative;text-align:center;font-size:50px;color:#fff;z-index:999; font-family:'KCairo';font-weight:bold;width:60%;margin-left:-15px; border-radius:0 0 25px 25px;box-shadow:0 0 80px 30px rgb(242 149 67); display:none;background:var(--acc)} .kiosk .aid::after{content:"";background:url(../img/kiosk/ramadhan-3.png); position:absolute;width:99%;height:550px;top:860px;filter:brightness(1.2);left:0;zoom:9%} .kiosk .aid .salatAid{margin:0 10px;letter-spacing:7px} .kiosk center{margin:0 auto} .kiosk .aid{display:none;margin-left:auto;margin-right:auto} .board.is-ramadan .kiosk .aid{display:block} .board.is-ramadan .kiosk .masjid{display:none} .board.is-ramadan .kiosk .mainWidget{zoom:92%} /* ── announcement (top pill) ── */ .kiosk .announcement{display:none;position:absolute;left:0;right:0;top:6px;width:75%; margin:0 auto;text-align:center;z-index:2} .kiosk .announcement span{background:#f44336;position:relative;width:fit-content; min-width:50%;text-align:right;text-align-last:center;display:inline-block; padding:0 20px;padding-left:100px;font-size:49px;border-radius:5px;color:#fff; font-family:'KCairo';font-weight:bold;box-shadow:0 0 50px 20px #f44336} .kiosk .announcement span::before{content:"";background-image:url(../img/kiosk/loudspeaker.png); background-size:cover;position:absolute;left:0;bottom:-5px;width:150px;height:150px; transform:scaleX(1.3) scaleY(1.3) rotate(14deg);zoom:50%} .board.is-announce .kiosk .announcement{display:block} /* ── widgets ── */ .kiosk .announcementWidget,.kiosk .marquee{padding:10px 0;border:1px solid transparent; border-radius:6px;font-size:55px;word-spacing:20px;color:#fff;background:#ffffff2b; font-family:'KCairo';font-weight:bold;margin-top:8px} .kiosk .marquee{overflow:hidden;white-space:nowrap;box-sizing:border-box} @keyframes duaaMarquee{0%{transform:translateX(-100%)}100%{transform:translateX(0)}} .kiosk .marquee p#myDuaa{display:inline-block;margin:0;padding-left:100%; font-family:'KCairo';animation:duaaMarquee 2460s linear infinite;animation-delay:-1230s} .kiosk .announcementWidget{display:none;width:140%;background:rgb(0 0 0 / 49%); margin-top:35px;margin-left:-210px;font-family:'KCairo';color:#fff;font-size:110px; position:relative} @keyframes announcementMarquee{0%{transform:translateX(-200%)}100%{transform:translateX(0)}} .kiosk .announcementWidget p#announcementText{margin:0;padding-left:100%;font-family:'KCairo'; white-space:nowrap;animation:announcementMarquee 60s linear infinite;animation-delay:-51s} .kiosk .announcementWidget.topLayer{position:absolute;top:35%;border:4px solid #ffe500; color:#ffe500;text-shadow:0 0 40px;z-index:9999} .board.is-announce .kiosk .announcementWidget{display:block} .board.is-announce .kiosk .announcementWidget{position:absolute;top:35%;border:4px solid #ffe500; color:#ffe500;text-shadow:0 0 40px;z-index:9999} /* ── the three feature cards ── */ .kiosk .fe-container{display:flex;flex-direction:row-reverse;width:100%;margin:10px 0} .kiosk .fe{position:relative;background:#ffffff2b;color:#fff;width:50%;padding:0 25px; border-radius:6px;overflow:hidden} .kiosk .fe:nth-of-type(2){margin-right:10px} .kiosk .fe:nth-of-type(3){margin-right:10px} .kiosk .fe-overlay{position:absolute;left:-40%;top:-122%;width:400px;height:400px; border-radius:50%;background:#fff} .kiosk .fe .fe-icon{position:absolute;left:40px;top:15px} .kiosk .fe .fe-title{font-family:'KCairo';font-weight:bold;font-size:34px} .kiosk .fe .fe-time{font-family:'Comfortaa';font-size:40px} .kiosk #timeToAdhan{display:none;width:80%} .kiosk #timeToAdhan .fe-overlay{background:#065bf9;left:-30%;z-index:-1} @keyframes progressOverlay{from{width:400px}to{width:134%}} .kiosk #timeToAdhan .fe-overlay.progressOverlay{animation:progressOverlay 300s linear; animation-delay:-90s;animation-fill-mode:forwards} .kiosk #timeToAdhan .fe-icon{left:55px;top:11px;z-index:-1} .board.is-toAdhan .kiosk #timeToAdhan{display:block} .board.is-toAdhan .kiosk #Jumuaa{display:none} .kiosk .mainWidget{margin-top:5px;margin-left:-28px;width:105%} .board.is-adhan .kiosk .mainWidget, .board.is-jumuaa .kiosk .mainWidget, .board.is-tomorrow .kiosk .mainWidget{display:none} /* Imsak swap in Ramadan: same card, the content the device rotates in */ .kiosk #Shorouk .imsak-face{display:none} .board.is-ramadan .kiosk #Shorouk .shorouk-face{display:none} .board.is-ramadan .kiosk #Shorouk .imsak-face{display:inline} /* ── الأذان / tomorrow / jumuaa ── */ .kiosk .adhan-now,.kiosk .jumuaa-now{font-family:'KRakkas','Lalezar',serif;font-size:370px; text-align:center;margin-top:-110px;color:#fff;display:none; animation-duration:2s;animation-direction:alternate;animation-iteration-count:infinite} @keyframes kioskFlash{0%,50%,100%{opacity:1}25%,75%{opacity:.3}} .board.is-adhan .kiosk .adhan-now{display:block;animation-name:kioskFlash} .kiosk .adhan-now.tomorrowPrayers{font-size:130px;padding-bottom:25px;background:#00000045; border-radius:10px;position:relative;margin-top:0;animation:none} .kiosk .adhan-now.tomorrowPrayers i{position:absolute;font-size:45px;font-family:'KRakkas'; left:50%;top:10px;font-style:normal} .kiosk .adhan-now.tomorrowPrayers .imsak-time{font-family:'KCairo';position:absolute;bottom:0; left:0;right:0;font-size:40px;background:#3c3c3c7a;display:block; border-radius:0 0 10px 10px;word-spacing:11px} .kiosk .imsak-time b{display:inline-block;background-color:#fb4a59;padding:0 10px; font-family:'Lato';letter-spacing:5px;border-radius:10px; box-shadow:0 2px 17px 7px rgb(228 76 89 / 77%)} .kiosk .tomorrowPrayers span.tomorrowDate{font-family:'Lato';font-size:124px;font-weight:bold; letter-spacing:23px;white-space:nowrap} .kiosk .adhan-now.tomorrowPrayers::before{content:"";background:url(../img/kiosk/ribbon-2.png); background-size:80%;background-repeat:no-repeat;width:130px;height:110px; position:absolute;top:-8px;right:-34px} .kiosk .adhan-now.tomorrowPrayers::after{content:"";background:url(../img/kiosk/ribbon-2.png); background-size:80%;background-repeat:no-repeat;width:130px;height:110px; position:absolute;bottom:-8px;left:-34px;transform:rotate(180deg)} .board.is-tomorrow .kiosk .adhan-now{display:block} .kiosk .jumuaa-now{margin-top:50px;transform:scale(1.2);animation-duration:6s; animation-timing-function:ease-in} .board.is-jumuaa .kiosk .jumuaa-now{display:block} /* quirks mode gives an image-only line no strut; block display reproduces that */ .kiosk .jumuaa-now img{width:1000px;display:block;margin:0 auto} /* ── the five prayers ── */ .kiosk .adhans-container{display:flex;justify-content:space-evenly;flex-direction:row-reverse; gap:clamp(2px,5px,7px);position:fixed;left:15px;right:15px;bottom:15px;transition:.7s all} .kiosk .adhans-container.scaleDown, .board.is-adhan .kiosk .adhans-container, .board.is-jumuaa .kiosk .adhans-container, .board.is-iqama .kiosk .adhans-container, .board.is-announce .kiosk .adhans-container{ transform:scale(.7);margin-bottom:-25px;width:110%;margin-left:-88px} .board.is-iqama .kiosk .adhans-container, .board.is-announce .kiosk .adhans-container{z-index:1000} .kiosk .adhans-keys{display:grid;padding:0 4px;margin-left:1px;border:1px solid transparent; border-radius:6px;z-index:-1;background:color-mix(in srgb,var(--acc) 50.6%,transparent)} .board.is-tomorrow .kiosk .adhans-keys{display:none} .kiosk .adhans-keys img{align-self:flex-end} .kiosk .adhan{position:relative;width:247px;padding:7px;padding-top:2px;background:#d8d8d84f; text-align:center;color:#fff;box-shadow:0 0 7px 0 rgba(0,0,0,.3);border-radius:6px; text-shadow:1px 1px 0 #00000078;overflow:hidden;z-index:-1} .kiosk .adhan .adhan-s{font-family:'Lalezar',cursive !important;font-size:65px;display:block; margin-top:7px;border:1px solid;border-radius:6px;text-shadow:2px 3px 14px #00000069; background:color-mix(in srgb,var(--acc) 50.6%,transparent)} .kiosk .nextAdhan .adhan-s{border:0 !important;background:transparent !important; text-shadow:none !important} .kiosk .adhan .adhan-w{text-shadow:2px 3px 14px #00000069;letter-spacing:6px} .kiosk .nextAdhan .adhan-w,.kiosk .tomorrowPrayers .adhan-w{background:transparent !important} .kiosk .nextAdhan .adhan-w{border:0 !important;text-shadow:none !important} .kiosk .adhan .adhan-t,.kiosk .adhan .adhan-i{display:block;padding:0;height:75px; font-family:'Lato',cursive;font-size:55px;font-weight:bold;text-align:center} .kiosk .adhan .adhan-t{height:65px !important} .kiosk .adhan .adhan-e{position:absolute;top:8px;left:7px;padding:3px 8px; font-family:'KCairo';font-size:16px;font-weight:bold;text-shadow:none;border-radius:2px; direction:rtl} .kiosk .adhan .adhan-e b{font-family:'KCairo'} .kiosk .adhan.tomorrowPrayers, .board.is-tomorrow .kiosk .adhan{background:#ffffffbd;color:#524641;border:5px solid #5a5a5a; border-radius:10px;text-shadow:none;zoom:104%} .board.is-tomorrow .kiosk .adhan .adhan-s, .board.is-tomorrow .kiosk .adhan .adhan-w{text-shadow:none} .kiosk .nextAdhan{text-shadow:none;background:var(--acc)} .board.is-tomorrow .kiosk .nextAdhan{background:#ffffffbd} .kiosk .nextAdhan::after{content:"";position:absolute;bottom:0;left:0;width:247px;height:225px; border-radius:6px;background:url(../img/kiosk/waves.png) center center;background-size:cover; background-position:68%;opacity:.4;filter:invert(1);z-index:-1; animation:adhanAnimation 30s infinite linear} .board.is-tomorrow .kiosk .nextAdhan::after{content:none} @keyframes adhanAnimation{from{background-position:-8%}to{background-position:92%}} /* ── iqama countdown ── */ .kiosk .countDown{position:fixed;top:0;left:0;width:100%;height:100%; background-size:cover;background-repeat:no-repeat;background-position:center; font-size:40px;color:#fff;text-align:center;transition:.9s all;opacity:0;display:none;z-index:10} .board.is-iqama .kiosk .countDown, .board.is-announce .kiosk .countDown{display:block;opacity:1} .kiosk .darkOverlay{opacity:.89;position:fixed;left:0;top:0;width:100%;height:100%; background:#05000e;z-index:-1} .kiosk .fillingCountdownOverlay{position:absolute;top:0;right:0;width:0;height:100%;opacity:.4; background:linear-gradient(to right,#11998e,#38ef7d); animation:fillingCountDownOverlay 360s linear;animation-delay:-126s;animation-fill-mode:forwards} @keyframes fillingCountDownOverlay{from{width:0}to{width:100%}} .kiosk .countDown .noPhone{position:absolute;bottom:0;right:20px;background:#00000059; border-radius:20px 20px 0 0;padding:20px;display:none} .kiosk .countDownClock{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%); width:100%;font-weight:bold;text-shadow:6px 6px #00000054} .kiosk .countDown .hadithIqama{display:none;position:absolute;bottom:5%;left:0;right:0; background:#fc5263;font-family:'Lalezar';font-size:100px;text-align:center} .kiosk .countDown .hadithIqama::before{content:"قال رسولُ االلهِ صلَّى االلهُ عليه وسلَّم"; position:absolute;top:-40px;right:20px;color:#fff;font-size:24px} .kiosk .countDown b{position:absolute;top:-1%;left:50%;transform:translate(-50%,-50%); width:100%;font-weight:bold;font-size:90px;font-family:'KCairo';margin-top:90px; display:block;white-space:nowrap;text-shadow:5px 5px #00000036} .kiosk .countMinutes{display:inline-block;font-family:'Lato';font-size:380px;font-weight:bold} .kiosk .countSeconds{display:inline-block;font-family:'Lato';font-size:270px} /* the announcement moment: the countdown pulls up and the notice takes the middle */ .board.is-announce .kiosk .countDown .countDownClock{top:15%;left:50%;zoom:65%; text-shadow:8px 8px #00000054} .board.is-announce .kiosk .countDown b{opacity:0} /* ── adhan duaa ── */ .kiosk .adhanDuaa{padding:35px;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999; background-image:url(../img/kiosk/blur.jpg);background-size:cover;font-size:95px;color:#fff; text-align:center;font-family:'KTajawal';font-weight:bold;letter-spacing:2px;line-height:1.8; opacity:0;display:none} .board.is-duaa .kiosk .adhanDuaa{display:block;opacity:1} /* ── adhkar after salat ── */ .kiosk .adhkarSalat{display:none;position:fixed;top:0;left:0;width:100%;height:100%; border-radius:15px;z-index:9999;opacity:0; background:color-mix(in srgb,var(--acc) 94.9%,transparent)} .board.is-adhkar .kiosk .adhkarSalat{display:block;opacity:1} .kiosk .adhkarSalat p{text-align:center;font-size:50px;font-family:'KRakkas';color:#fff; margin:20px 0} .kiosk .adhkarSalat.setPadding{padding-top:216px} /* 20vh of the device's real 1080 */ .kiosk .adhkarSalat .adhkarContainer{position:relative;font-family:'KTajawal'; text-align:justify;text-align-last:center;font-size:56px;margin:20px 96px; /* 5vw of 1920 */ padding:55px 30px 25px 30px;background-color:#fff;border-radius:10px; box-shadow:0 0 14px 4px rgba(0,0,0,.1);transition:.5s all} .kiosk .adhkarContainer span{color:#173a4a;font-family:'KTajawal';font-size:62px; /* clamp cap at 1920 */ font-weight:bold} .kiosk .adhkarCounter{margin-top:20px;text-align:center;font-family:'Lato';font-size:110px; font-weight:bold;color:#fff;display:none} /* the counter belongs to the short-dhikr phase (K>=8); the state shown here is the salam dhikr (K=2), which the device shows without padding or counter */ /* ── ramadan corners ── */ .kiosk .ramadhanMubarek{display:none} .board.is-ramadan .kiosk .ramadhanMubarek, .board.is-jumuaa .kiosk .ramadhanMubarek{display:block} .kiosk .ramadhanMubarek img{width:250px} .kiosk .ramadhanMubarek img:nth-of-type(1), .kiosk .ramadhanMubarek img:nth-of-type(2){position:absolute;top:0;left:5px} .kiosk .ramadhanMubarek img:nth-of-type(2){right:0;top:-40px;left:inherit;z-index:-1} /* ── corners: version badge, wlan, temp, ip, system buttons ── */ .kiosk ._yi{position:absolute;top:15px;left:15px;width:105.4px; font-family:'Lato';font-size:12px;line-height:14px; color:#ffffffe0;font-weight:bold;text-align:center;letter-spacing:2px;background:#6f6f6f21; border:1px solid #eeeeee26;border-radius:5px;padding:9px 7px 8px} .kiosk ._yi img.yi-logo{opacity:1;margin-bottom:2px;filter:brightness(0) invert(1);width:78px;display:inline} .kiosk ._yi .qrCodeContainer{display:flex;justify-content:center;width:80px;margin:0 auto 8px; padding:5px 4px;background:#fff;border-radius:5px} .kiosk ._yi .qrCodeContainer img{width:100%;image-rendering:pixelated} .kiosk .wlan{position:absolute;top:48px;right:45px;color:#fff;line-height:2;text-align:center; font-size:11px;z-index:1} .kiosk .wlan p,.kiosk .wlan b{font-family:'Lato' !important;letter-spacing:2px} .kiosk .wlan :not(img){opacity:.6} .kiosk .wlanIndicator{display:block;position:absolute;top:-3px;right:-27px;width:20px; text-align:center;opacity:1;filter:invert(1)} .kiosk .deviceTemp{position:absolute;top:75px;right:10px;width:140px;padding:4px; color:#ffffff59;font-size:13px;font-family:'KCairo';text-align:center;font-weight:bold; border-radius:5px;direction:rtl;overflow:hidden;z-index:1} .kiosk .deviceTemp b{font-family:'Lato';letter-spacing:2px;color:#fff} .kiosk .ipAddress{position:absolute;top:111px;right:43px;color:#fff;font-weight:bold; letter-spacing:2px;font-size:12px} .kiosk .fullScreenBTN{position:absolute;top:8px;right:110px;font-size:23px;color:#fff} .kiosk .settingsBTN{position:absolute;top:10px;right:44px;font-size:20px;font-weight:bold;color:#fff} .kiosk .syncDataHomeBTN{position:absolute;top:6px;right:75px;font-size:24px;color:#fff} .kiosk .shutdownSystemBTN{position:absolute;top:5px;right:10px;font-size:24px;color:#fff} .board.is-salat .kiosk ._yi,.board.is-salat .kiosk .wlan, .board.is-salat .kiosk .deviceTemp,.board.is-salat .kiosk .ipAddress, .board.is-salat .kiosk .container{display:none} .board.is-jumuaa .kiosk ._yi,.board.is-jumuaa .kiosk .wlan, .board.is-jumuaa .kiosk .deviceTemp{opacity:.3} /* ── LTR builds (FR/EN) — the device's own .ltrsystem rules ── */ .kiosk.ltrsystem .masjid{font-family:'Comfortaa' !important;font-weight:bold} .kiosk.ltrsystem .deviceTemp{direction:ltr} .kiosk.ltrsystem .adhans-container{flex-direction:row} .kiosk.ltrsystem .adhan-now{margin-top:15px;font-family:'Comfortaa';font-size:220px} .kiosk.ltrsystem .adhan-e{left:unset;right:10px;direction:ltr} .kiosk.ltrsystem .adhan-now.tomorrowPrayers{margin-top:0;padding-bottom:40px;font-size:115px} .kiosk.ltrsystem .adhan-now.tomorrowPrayers i{font-size:25px;font-family:inherit;left:40%; top:15px;font-weight:bolder} .kiosk.ltrsystem b.imsak-time{direction:ltr} .kiosk.ltrsystem .adhanDuaa{font-family:'Lato';font-size:72px} .kiosk.ltrsystem .countDown var{font-family:'Lato'} .kiosk.ltrsystem .adhkarSalat p{font-family:'Comfortaa'} .kiosk.ltrsystem .adhan .adhan-s{padding:5px 0;font-size:55px;font-family:'KCairo' !important; font-weight:bold} @media (prefers-reduced-motion:reduce){ .kiosk *{animation-play-state:paused !important} }