:root { /* Theme-driven — overwritten by theme.js applyTheme() (reads the active palette from Postgres, shared with the admin panel). These are fallback defaults (the Awqōt palette) so the page looks right even before that async fetch resolves. Nothing below this block references a raw hex color. */ --color-primary: #0B4A44; --color-secondary: #FFFFFF; --color-accent: #C89B3C; --theme-transition-ms: 400ms; /* Role convention: primary = text/ink, secondary = surface/background (see theme.js). Card/divider shades blend toward each palette's own primary rather than a fixed white/black, so this works correctly whether secondary happens to be light (12 of 13 palettes) or dark (Kaabah). */ --bg: var(--color-secondary); --panel-bg: color-mix(in srgb, var(--color-secondary) 92%, var(--color-primary) 8%); --text-primary: var(--color-primary); --text-muted: color-mix(in srgb, var(--color-primary) 75%, var(--color-secondary) 25%); --accent: var(--color-accent); --divider: color-mix(in srgb, var(--color-secondary) 80%, var(--color-primary) 20%); /* Amiri/Source Sans 3 both loaded as webfonts (see each page's ) so text renders identically on every OS instead of falling back to whatever the system happens to have installed — the system stacks after them are last-resort fallbacks only, for if a font fails to load. Amiri only ships in 400/700 — no 600 — so every heading rule below requests 700, not 600. */ --font-display: "Amiri", Georgia, serif; --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif; --font-arabic: "Amiri Quran", "Scheherazade New", serif; } * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color var(--theme-transition-ms) ease, color var(--theme-transition-ms) ease, border-color var(--theme-transition-ms) ease; } html, body { width: 100dvw; height: 100dvh; overflow: hidden; background: var(--bg); font-family: var(--font-body); color: var(--text-primary); } /* dvw/dvh (not vw/vh) — .stage is what fullscreen-toggle.js puts into the Fullscreen API. Static vw/vh are computed against the layout viewport at layout time and don't reliably re-track it; entering real OS fullscreen removes browser chrome (and sometimes the OS taskbar) after that, and html/body's own overflow:hidden above suppresses the resize/scroll signals that would otherwise force a recalculation. The visible symptom was a thin gap at the top of .slide-zone showing the browser's black fullscreen backdrop through — .slide-zone has no background of its own (the logo dangles over it with nothing painted behind), while .panel's opaque background masked the same-sized gap on its side. dvw/dvh are spec'd to live-track the actual current viewport through exactly this kind of chrome show/hide transition. */ .stage { display: flex; width: 100dvw; height: 100dvh; } /* Belt-and-suspenders alongside the dvw/dvh switch above: confirmed this reproduces on every fullscreen-toggle.js-triggered click, not just an occasional race, so paint .stage's own background explicitly while fullscreen rather than relying solely on sizing being exactly right. Without this, any residual gap between .stage's box and the real screen falls through to the Fullscreen API's own ::backdrop, whose default is black — with this, the same gap reads as the kiosk's own background instead of a jarring black flash. */ .stage:fullscreen, .stage:-webkit-full-screen { background: var(--bg); } /* LEFT — 75% zone: PDF slide carousel, with the mosque logo dangling over its top-left corner (see kiosk-logo.js) — no background bar, no tagline (removed 2026-07-28 along with .slide-header/.mosque-label). overflow:visible (default, stated explicitly here) is what lets .kiosk-logo's negative margin below dangle over .slides without being clipped at this container's own edge. */ .slide-zone { flex: 3; height: 100%; display: flex; flex-direction: column; overflow: visible; /* Containing block for .fullscreen-toggle-btn below (anchors it to this zone specifically, not the whole viewport) and for .prayer-override-card in both its modes (see prayer-override-card.js — sidepanel mode deliberately targets this zone too, not .panel, so the clock/timing panel keeps running untouched alongside the card). */ position: relative; } /* Height-capped, width auto — preserves the logo's own aspect ratio (no distortion) regardless of source image dimensions. align-self so it doesn't stretch to the column's full width. Negative bottom margin (matching its own rendered height, since max-height forces a consistent 65px) cancels its layout contribution so .slides starts right under it rather than being pushed down by the logo's full height — only the small top/left margin's inset remains. z-index beats .slides' own position:relative (z-index:auto) so the logo paints on top of whatever slide is showing, not behind it. */ .kiosk-logo { max-height: 65px; width: auto; flex-shrink: 0; align-self: flex-start; object-fit: contain; position: relative; z-index: 2; margin: 16px 0 -65px 16px; } .kiosk-logo.hidden { display: none; } /* PDF announcement slide carousel (see slide-carousel.js). Same --panel-bg token as the right-hand timing panel, so the letterbox/pillarbox bars around whatever's currently loaded read as the same panel rather than a black gap. */ .slides { flex: 1; background: var(--panel-bg); position: relative; /* Suppresses native double-tap-zoom on this element specifically, so slide-lightbox.js's own double-tap detector can fire reliably instead of racing the browser's own gesture recognizer for it (see that file's header comment). Doesn't affect the swipe handler in slide-carousel.js — that reads raw touch coordinates directly, untouched by touch-action either way. Deliberately not applied inside the lightbox itself — native pinch-zoom/pan needs to work freely there, per spec. */ touch-action: manipulation; } .slide-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* preserves PDF aspect ratio — letterbox/pillarbox, never stretch */ } .slide-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.2rem; } /* Floating fullscreen toggle, bottom-right of the slide area. Background is theme-driven (--text-primary, the palette's primary color) rather than the fixed rgba() this started as — text stays a literal #fff since that's not itself something a palette provides a guaranteed opposite for. Starts hidden — fullscreen-toggle.js only reveals it once it's confirmed the Fullscreen API actually exists (notably absent on older iOS Safari for non-video elements), rather than showing a control that would silently do nothing on tap. */ .fullscreen-toggle-btn { position: absolute; bottom: 16px; right: 16px; z-index: 5; padding: 8px 14px; border: none; border-radius: 999px; background: var(--text-primary); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; } .fullscreen-toggle-btn:hover { background: color-mix(in srgb, var(--text-primary) 85%, black); } .fullscreen-toggle-btn.hidden { display: none; } /* Guaranteed-reliable fallback opener for the same lightbox the double-tap/dblclick gesture opens (see slide-lightbox.js) — bottom- left, opposite .fullscreen-toggle-btn (bottom-right) and clear of .kiosk-logo (top-left), so none of the three overlap. Same pill treatment/z-index tier as .fullscreen-toggle-btn, icon-only (fixed square) rather than that button's text-label sizing. Always visible, no auto-hide — unlike the fullscreen button this is meant to be the dependable path in regardless of gesture reliability, not something to tuck away. */ .slide-enlarge-btn { position: absolute; bottom: 16px; left: 16px; z-index: 5; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--text-primary); color: #fff; cursor: pointer; } .slide-enlarge-btn:hover { background: color-mix(in srgb, var(--text-primary) 85%, black); } .slide-enlarge-btn svg { width: 20px; height: 20px; } /* Auto-hidden 3s into fullscreen (see fullscreen-toggle.js) — slides down out of view rather than just fading, so it reads as "tucked away" instead of "broken/disappeared". pointer-events:none once hidden so it can't intercept taps meant for whatever's behind it, even before the transform finishes animating off-box. */ .fullscreen-toggle-btn.auto-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; } /* Prayer Time Override Card (see prayer-override-card.js) — always lives inside .slide-zone (appendChild there is a no-op move if it's already the parent), for both modes: fullscreen because .slide-zone is the (now-expanded) whole stage, sidepanel because the override is only meant to take over the slide/carousel area while .panel's clock/ timetable/quote-feed keep running untouched and visible beside it — there is no .panel target at all. One rule covers both as an absolute-fill overlay of whichever width .slide-zone currently has. z-index above .kiosk-logo (2) and .fullscreen-toggle-btn (5) so it fully covers both. opacity/transition duration matches FADE_MS in prayer-override-card.js and reuses the same cross-fade idiom as .quote-content/.is-hidden — hardcoded, no other transition presets. pointer-events follows visibility since this is a passive display card, nothing to interact with either way. */ .prayer-override-card { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--panel-bg); opacity: 0; pointer-events: none; transition: opacity 0.9s ease; } .prayer-override-card.is-visible { opacity: 1; pointer-events: auto; } .prayer-override-card.hidden { display: none; } .prayer-override-card-name, .prayer-override-card-time { font-family: var(--font-display); line-height: 1; text-align: center; } .prayer-override-card-name { font-weight: 700; color: var(--text-primary); } .prayer-override-card-time { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } /* Platform Notice (see platform-notice.js) — z-index 21, one above .prayer-override-card's 20 (previously the highest used within .slide-zone's own stacking context, see .slide-lightbox's comment above): a platform-wide maintenance notice should visually win over either of the other .slide-zone takeovers in the unlikely case both are active at once, not the other way around. Simple opaque cover, no cross-fade — this is an infrequent, admin-triggered state change, not a frequent animated transition like the other two. */ .platform-notice-overlay { position: absolute; inset: 0; z-index: 21; display: flex; align-items: center; justify-content: center; padding: 5%; text-align: center; background: var(--panel-bg); } .platform-notice-overlay.hidden { display: none; } .platform-notice-overlay-text { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); font-size: clamp(24px, 4vw, 64px); line-height: 1.3; white-space: pre-wrap; } /* Fullscreen mode fills the whole (now-expanded) slide-zone (~100% of the viewport), so it can read at a distance the same way the kiosk's own .clock does. Sidepanel mode fills the same .slide-zone element, but .panel is still visible beside it there (flex:3 of a 3:1 split, ~75% of the viewport, not 100%) — sized down from the fullscreen tier roughly in proportion to that narrower box, rather than reusing identical vw-based values that would overflow it. */ .prayer-override-card--fullscreen .prayer-override-card-name { font-size: clamp(48px, 10vw, 200px); } .prayer-override-card--fullscreen .prayer-override-card-time { font-size: clamp(32px, 6vw, 120px); } .prayer-override-card--sidepanel .prayer-override-card-name { font-size: clamp(40px, 8vw, 160px); } .prayer-override-card--sidepanel .prayer-override-card-time { font-size: clamp(28px, 5vw, 100px); } /* Double-tap/double-click-to-enlarge lightbox (see slide-lightbox.js). Direct child of .stage (not .slide-zone) so this fixed inset:0 overlay covers .panel too, in every layout mode. z-index 50 — above everything else in .stage, including .prayer-override-card (20), the highest previously used here. Near-opaque dark backdrop regardless of the active theme palette — standard convention for an image viewer, keeps focus on the slide rather than competing with it. Same opacity-only cross-fade idiom as .prayer-override-card above (0.9s ease, .hidden for display:none, .is-visible for the fade own state) for visual consistency with the other overlay already doing this same job on this same element tree. */ .slide-lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); opacity: 0; pointer-events: none; transition: opacity 0.9s ease; } .slide-lightbox.is-visible { opacity: 1; pointer-events: auto; } .slide-lightbox.hidden { display: none; } /* Live Session takeover (see js/live-session.js) — deliberately NOT the .slide-lightbox pattern above (position:fixed against the whole viewport, covering .panel too): that's correct for a one-off, user-triggered zoom, but a live session is the kiosk's normal ongoing state, live session or not — the right-side timing panel (.panel) must stay visible and keep updating throughout, exactly as it does during normal Kiosk Mode rotation. Sibling of #slidePanel within .slide-zone instead (which already has position:relative — same containing block #fullscreenToggleBtn/#prayerOverrideCard above already use), absolutely positioned to fill *that* container, not the viewport. No explicit z-index: painting after #slidePanel in DOM order is enough to sit above the carousel's own canvas, while staying below .kiosk-logo's explicit z-index:2 — the logo keeps dangling over live-session content exactly as it already does over normal slides, nothing special-cased for it here. No camera compositing yet (deferred past Sept 9) — just the selected deck's page. background: var(--panel-bg), NOT a solid black backdrop like the lightbox above — that black was copied from the lightbox's own "dim everything else, focus on this" treatment, appropriate for a temporary zoom viewer but wrong here: a live session should look like a normal, permanent part of Kiosk Mode, not something layered on top of it. .slides (the carousel's own panel, right below) already uses this same token specifically so its own letterbox/pillarbox bars read as "the panel," not a black gap — this needs the exact same treatment for the same reason, or a deck page with different proportions than the panel would visibly look like it's showing through a dark scrim instead of just being the panel's content. */ .live-session-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--panel-bg); } .live-session-overlay.hidden { display: none; } .live-session-canvas { max-width: 100%; max-height: 100%; object-fit: contain; /* same aspect-ratio-preserving convention as .slide-canvas */ } /* .khutbah-overlay/.khutbah-background/.khutbah-subtitle-bar/ .khutbah-subtitle-text moved to css/khutbah-overlay.css (linked below) — shared verbatim with admin/index.html's own live preview (see renderKhutbahOverlayPreview() in admin.js) so the two can never visually drift apart. See that file's own header comment for why a small shared partial, not a wholesale @import, is what admin.css's own header comment already warns against. .khutbah-camera-video is NOT in that shared partial, deliberately — it briefly lived in css/admin.css instead (Prompt A+B, camera capture temporarily relocated off the kiosk for a remote-pipeline model that's since been killed outright — see js/live-session.js's own header comment). That relocation left the KIOSK's own copy of this rule missing entirely, a real bug found while correcting the capture location back to here: the kiosk never actually linked admin.css, so #khutbahCameraVideo (see index.html) rendered completely unstyled default