/* ============================================================ Souk Qaryat El Beri — Kiosk Theme (v2, dark premium) Design tokens + self-hosted fonts. Shared by every page. Offline kiosk: NO web fonts, NO CDN. All local. ============================================================ */ /* ---- Self-hosted Hanken Grotesk (5 separate weight files, latin) ---- */ @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/HankenGrotesk-300.woff2') format('woff2'); } @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/HankenGrotesk-400.woff2') format('woff2'); } @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/HankenGrotesk-500.woff2') format('woff2'); } @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/HankenGrotesk-600.woff2') format('woff2'); } @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/HankenGrotesk-700.woff2') format('woff2'); } /* ---- Kiosk: hide mouse cursor everywhere (touchscreen only) ---- */ *, *::before, *::after { cursor: none !important; } /* ---- Arabic / RTL ---- Layout mirrors automatically via (flexbox respects direction). These rules give Arabic a proper font and remove Latin-only typographic tricks (letter-spacing breaks Arabic letter-joining; uppercase is meaningless in Arabic). NOTE: needs an Arabic font present — install on the kiosk: sudo apt install -y fonts-noto-core (self-host a woff2 before mall go-live for full offline). */ [lang="ar"], [lang="ar"] * { font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', sans-serif !important; } [lang="ar"] * { letter-spacing: normal !important; text-transform: none !important; } /* ============================================================ THEMES — all light. Base = "sandy" (Main golden). Switch via , set by kiosk.js from localStorage('kioskTheme'). No dark mode. ============================================================ */ :root{ /* ---- Sandy / Main golden (default) ---- */ --bg-deep: #E7E0CF; --bg-base: #F3E6C8; --bg-panel-1: #FBF3DE; --bg-panel-2: #F7ECCF; --teal: #B07F28; --gold: #C99A3C; --gold-light: #EFD083; --gold-dark: #B07F28; --gold-deep: #B07F28; --gold-grad: linear-gradient(135deg,#EFD083 0%,#D2A646 46%,#B07F28 100%); --promo-grad: linear-gradient(150deg,#F2D685 0%,#D6A93F 55%,#BD8A2A 100%); --tile-badge: linear-gradient(150deg,rgba(236,203,112,.45),rgba(176,127,40,.26)); /* Text (warm dark on light bg) */ --cream: #41351F; --cream-70: rgba(65,53,31,0.80); --cream-55: rgba(65,53,31,0.62); --cream-50: rgba(65,53,31,0.55); --cream-18: rgba(176,127,40,0.26); --cream-16: rgba(176,127,40,0.22); --cream-08: rgba(255,252,246,0.85); --cream-06: rgba(255,252,246,0.90); /* Type */ --font-sans: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Big Caslon', 'Hoefler Text', Georgia, 'Times New Roman', serif; /* Radii */ --r-pill: 999px; --r-lg: 40px; --r-md: 32px; } /* Any non-default theme: force body onto the theme surface — beats the per-page hardcoded golden backgrounds (html[data-theme] body = higher specificity than the pages' plain `body {} !important` rules). */ html[data-theme] body{ background: var(--bg-base) !important; color: var(--cream) !important; } /* ---- Sky Blue theme ---- */ html[data-theme="skyblue"]{ --bg-deep: #D7E7EE; --bg-base: #E6F1F6; --bg-panel-1: #F4FAFC; --bg-panel-2: #EAF4F8; --teal: #2E7D95; --gold: #3E93AD; --gold-light: #8FC8DA; --gold-dark: #2E7D95; --gold-deep: #256A80; --gold-grad: linear-gradient(135deg,#8FC8DA 0%,#4FA3BC 46%,#2E7D95 100%); --promo-grad: linear-gradient(150deg,#A8D4E2 0%,#5FAEC6 55%,#3487A0 100%); --tile-badge: linear-gradient(150deg,rgba(143,200,218,.45),rgba(46,125,149,.26)); --cream: #16323C; --cream-70: rgba(22,50,60,0.80); --cream-55: rgba(22,50,60,0.62); --cream-50: rgba(22,50,60,0.55); --cream-18: rgba(46,125,149,0.26); --cream-16: rgba(46,125,149,0.22); --cream-08: rgba(248,253,255,0.85); --cream-06: rgba(248,253,255,0.90); } /* ============================================================ OCEAN — "Sky Blue full experience". Not just skyblue colours: airy gradient sky (photos hidden), SANS-SERIF headlines, crisper 18-24px radii, white glass panels with a cyan accent bar on tiles. Cool + modern. ============================================================ */ html[data-theme="ocean"]{ --bg-deep: #C9E6F2; --bg-base: #DFF1F8; --bg-panel-1: #FFFFFF; --bg-panel-2: #F2FAFD; --teal: #1F6E86; --gold: #2E93B4; --gold-light: #67C3DC; --gold-dark: #1F6E86; --gold-deep: #175A6E; --gold-grad: linear-gradient(135deg,#67C3DC 0%,#2E93B4 46%,#1F6E86 100%); --promo-grad: linear-gradient(150deg,#8FD3E6 0%,#3FA0BE 55%,#20748D 100%); --tile-badge: linear-gradient(150deg,rgba(103,195,220,.35),rgba(31,110,134,.22)); --cream: #12303B; --cream-70: rgba(18,48,59,0.82); --cream-55: rgba(18,48,59,0.62); --cream-50: rgba(18,48,59,0.55); --cream-18: rgba(31,110,134,0.24); --cream-16: rgba(31,110,134,0.20); --cream-08: rgba(255,255,255,0.90); --cream-06: rgba(255,255,255,0.94); /* design language */ --font-display: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif; --r-lg: 24px; --r-md: 18px; } /* Ocean experience: pure gradient sky, no photography */ html[data-theme="ocean"] body{ background:linear-gradient(180deg,#E8F6FB 0%,#DFF1F8 45%,#C9E6F2 100%) !important; } html[data-theme="ocean"] .bg .layer{ display:none; } html[data-theme="ocean"] .bg .wash{ background:linear-gradient(180deg,rgba(232,246,251,.6),rgba(201,230,242,.85)) !important; } html[data-theme="ocean"] h1, html[data-theme="ocean"] .ttl, html[data-theme="ocean"] .mapcard .ttl{ font-weight:800 !important; letter-spacing:-0.01em; } html[data-theme="ocean"] .mtile{ border-radius:20px !important; border-top:5px solid #2E93B4 !important; box-shadow:0 16px 36px -22px rgba(23,90,110,.5) !important; } html[data-theme="ocean"] .fcard, html[data-theme="ocean"] .card{ border-radius:18px !important; box-shadow:0 14px 30px -20px rgba(23,90,110,.45) !important; } html[data-theme="ocean"] .mapcard{ border-radius:24px !important; } html[data-theme="ocean"] .dock{ border-radius:26px; } /* ============================================================ ROYAL — replaces Desert. Entirely different experience: plum & rose boutique. WHOLE UI in serif (Georgia), extra-round soft shapes, delicate plum borders, blush background. ============================================================ */ html[data-theme="royal"]{ --bg-deep: #F0DFE6; --bg-base: #F7EEF2; --bg-panel-1: #FFFBFD; --bg-panel-2: #FBF3F6; --teal: #7D2E4D; --gold: #A34368; --gold-light: #D89AB4; --gold-dark: #7D2E4D; --gold-deep: #692641; --gold-grad: linear-gradient(135deg,#D89AB4 0%,#B05C7F 46%,#7D2E4D 100%); --promo-grad: linear-gradient(150deg,#E3AEC4 0%,#BD6C8F 55%,#85335A 100%); --tile-badge: linear-gradient(150deg,rgba(216,154,180,.4),rgba(125,46,77,.22)); --cream: #3A1F2B; --cream-70: rgba(58,31,43,0.82); --cream-55: rgba(58,31,43,0.62); --cream-50: rgba(58,31,43,0.55); --cream-18: rgba(125,46,77,0.24); --cream-16: rgba(125,46,77,0.20); --cream-08: rgba(255,251,253,0.88); --cream-06: rgba(255,251,253,0.92); /* design language: serif everywhere */ --font-sans: Georgia, 'Times New Roman', 'Hanken Grotesk', serif; --font-display: Georgia, 'Times New Roman', serif; --r-lg: 48px; --r-md: 40px; } html[data-theme="royal"] body{ background:linear-gradient(170deg,#FAF2F5 0%,#F7EEF2 50%,#F0DFE6 100%) !important; } html[data-theme="royal"] .bg .layer{ display:none; } html[data-theme="royal"] .bg .wash{ background:linear-gradient(180deg,rgba(250,242,245,.55),rgba(240,223,230,.85)) !important; } html[data-theme="royal"] .mtile{ border-radius:44px !important; border:2px solid rgba(125,46,77,.18) !important; box-shadow:0 22px 46px -26px rgba(105,38,65,.5) !important; } html[data-theme="royal"] .fcard, html[data-theme="royal"] .card{ border-radius:36px !important; border:1.5px solid rgba(125,46,77,.16) !important; } html[data-theme="royal"] .mapcard{ border-radius:48px !important; } html[data-theme="royal"] .dock{ border-radius:48px; border:1.5px solid rgba(125,46,77,.16); } html[data-theme="royal"] .lbl, html[data-theme="royal"] h1{ letter-spacing:0.02em; } /* ============================================================ STUDIO — replaces Pearl. Entirely different experience: flat editorial gallery. Monospace headlines, hairline borders, NO shadows, square 8-10px corners, ink-black CTAs on paper. ============================================================ */ html[data-theme="studio"]{ --bg-deep: #EFEFEA; --bg-base: #FAFAF7; --bg-panel-1: #FFFFFF; --bg-panel-2: #F4F4F0; --teal: #17181A; --gold: #2455E6; --gold-light: #7A99F2; --gold-dark: #1B3FAE; --gold-deep: #17181A; --gold-grad: linear-gradient(135deg,#33383D 0%,#1E2226 60%,#17181A 100%); --promo-grad: linear-gradient(150deg,#4A6BE8 0%,#2455E6 55%,#1B3FAE 100%); --tile-badge: linear-gradient(150deg,rgba(36,85,230,.10),rgba(23,24,26,.06)); --cream: #17181A; --cream-70: rgba(23,24,26,0.82); --cream-55: rgba(23,24,26,0.60); --cream-50: rgba(23,24,26,0.52); --cream-18: rgba(23,24,26,0.16); --cream-16: rgba(23,24,26,0.13); --cream-08: rgba(255,255,255,0.92); --cream-06: rgba(255,255,255,0.96); /* design language: editorial-tech */ --font-display: 'DejaVu Sans Mono', 'Liberation Mono', monospace; --r-pill: 12px; --r-lg: 10px; --r-md: 8px; } html[data-theme="studio"] body{ background:#FAFAF7 !important; } html[data-theme="studio"] .bg .layer{ display:none; } html[data-theme="studio"] .bg .wash{ background:#FAFAF7 !important; } html[data-theme="studio"] h1, html[data-theme="studio"] .ttl, html[data-theme="studio"] .mapcard .ttl{ letter-spacing:-0.03em; } html[data-theme="studio"] .mtile, html[data-theme="studio"] .fcard, html[data-theme="studio"] .card, html[data-theme="studio"] .mapcard, html[data-theme="studio"] .greet-chip, html[data-theme="studio"] .langtoggle, html[data-theme="studio"] .theme-toggle, html[data-theme="studio"] .legend-item{ border-radius:10px !important; border:1.5px solid #D8D8D2 !important; box-shadow:none !important; background:#FFFFFF !important; } html[data-theme="studio"] .dock{ border-radius:12px; border:1.5px solid #D8D8D2; box-shadow:none; background:#FFFFFF; } html[data-theme="studio"] .dock a{ border-radius:8px; } html[data-theme="studio"] .mtile .badge{ border-radius:8px !important; } html[data-theme="studio"] .mtile.promo{ background:var(--promo-grad) !important; border:none !important; } html[data-theme="studio"] .mtile.promo .lbl{ color:#FFFFFF !important; } html[data-theme="studio"] .mtile.promo .badge{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.35) !important; } html[data-theme="studio"] .mapcard .cta{ border-radius:10px !important; background:#17181A !important; color:#FFFFFF !important; box-shadow:none !important; } html[data-theme="studio"] .zoom-ctrl button, html[data-theme="studio"] .svc-quick button{ border-radius:10px !important; border:1.5px solid #D8D8D2 !important; box-shadow:none !important; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{width:100%;min-height:100%;} /* Kiosk touch: kill double-tap-zoom wait + pinch on the page level. (Map viewport manages its own gestures via JS pointer events.) */ body{ touch-action: manipulation; } body{ font-family:var(--font-sans); color:var(--cream); background: radial-gradient(620px 580px at 16% 12%, rgba(236,203,112,0.25), transparent 70%), radial-gradient(700px 640px at 92% 88%, rgba(210,166,70,0.22), transparent 70%), var(--bg-base); background-attachment:fixed; overflow-x:hidden; } /* Kiosk stage: real screen is 1080x1920 portrait. Centered so it previews nicely on a normal monitor too. */ .stage{ width:1080px; max-width:100%; height:100vh; /* kiosk screen height — keeps inner lists scrolling, footers anchored */ min-height:100vh; margin:0 auto; padding:64px 56px 72px; display:flex; flex-direction:column; overflow:hidden; /* inner .scroll / .viewport handle their own overflow */ } /* Keyframes (transform/opacity only — GPU friendly) */ @keyframes screenIn{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}} @keyframes pulseRing{0%{transform:scale(0.55);opacity:0.9;}100%{transform:scale(1.9);opacity:0;}} @keyframes pulseDot{0%,100%{opacity:0.6;}50%{opacity:1;}} @keyframes caretBlink{0%,55%{opacity:1;}60%,100%{opacity:0;}} /* ---- Shared bottom dock (persistent nav) ---- NOTE: no backdrop-filter — too costly on the i3 GPU (rule 6); opaque light panel keeps 60fps + instant touch response. */ .dock{display:flex;align-items:stretch;gap:14px;background:var(--cream-06); border:1px solid var(--cream-16);border-radius:38px;padding:16px; flex-shrink:0;box-shadow:0 18px 44px -20px rgba(120,85,25,0.45); margin-top:24px;} .dock a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:18px 0;border-radius:26px;cursor:pointer;text-decoration:none; color:var(--cream-55);transition:transform .1s ease;} .dock a:active{transform:scale(.94);} .dock a.on{color:var(--cream);background:var(--tile-badge);} .dock a .lbl{font-size:23px;font-weight:600;} .dock a svg{display:block;} /* ---- Shared scroll area (hide scrollbar) ---- */ .scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .scroll::-webkit-scrollbar{display:none;} /* ---- Shared pills/badges ---- */ .pill{padding:18px 32px;border-radius:var(--r-pill);font-size:25px;font-weight:600; cursor:pointer;transition:transform .12s ease;display:inline-flex;align-items:center;gap:12px;} .pill:active{transform:scale(.95);} .pill-glass{background:var(--cream-08);border:1px solid var(--cream-18);color:var(--cream);} .pill-solid{background:var(--cream);color:var(--bg-base);} .pill-teal{background:rgba(79,176,189,0.15);border:1px solid rgba(79,176,189,0.4);color:var(--teal);} /* ============================================================ MOBILE RESPONSIVE — for QR-scan phone visitors Kiosk: 1080px wide. Phone: 390px wide (≤600px breakpoint). Scale down type, padding, touch targets proportionally. ============================================================ */ @media (max-width:600px){ /* show cursor on phone (not a touchscreen kiosk) */ *, *::before, *::after { cursor: auto !important; } .stage{ padding:20px 16px 16px; width:100%; } /* Dock: smaller on phone */ .dock{ padding:10px; gap:6px; border-radius:24px; margin-top:12px; } .dock a{ padding:10px 0; gap:5px; border-radius:16px; } .dock a .lbl{ font-size:13px; } .dock a svg{ width:20px;height:20px; } /* Pills */ .pill{ padding:10px 18px; font-size:15px; gap:7px; } }