diff --git a/pages/corporate.php b/pages/corporate.php index 43fd0e6..ffe1647 100644 --- a/pages/corporate.php +++ b/pages/corporate.php @@ -11,8 +11,8 @@ - - + + diff --git a/pages/education.php b/pages/education.php index 725ec2e..eeeb723 100644 --- a/pages/education.php +++ b/pages/education.php @@ -10,9 +10,9 @@ - - - + + + diff --git a/pages/features.php b/pages/features.php index 257909e..d4f77fa 100644 --- a/pages/features.php +++ b/pages/features.php @@ -9,11 +9,11 @@ return <<<'ORIBI_SYNC_CONTENT' - + - + - + @@ -27,11 +27,11 @@ return <<<'ORIBI_SYNC_CONTENT' - + - + - + diff --git a/pages/fitness.php b/pages/fitness.php index 359b79a..4765a09 100644 --- a/pages/fitness.php +++ b/pages/fitness.php @@ -10,9 +10,9 @@ - - - + + + diff --git a/pages/healthcare.php b/pages/healthcare.php index b650941..1237e13 100644 --- a/pages/healthcare.php +++ b/pages/healthcare.php @@ -10,9 +10,9 @@ - - - + + + diff --git a/pages/hospitality.php b/pages/hospitality.php index 6454b7c..c7977ea 100644 --- a/pages/hospitality.php +++ b/pages/hospitality.php @@ -11,8 +11,8 @@ - - + + diff --git a/pages/outdoor.php b/pages/outdoor.php index 234ad69..36fcd1e 100644 --- a/pages/outdoor.php +++ b/pages/outdoor.php @@ -10,9 +10,9 @@ - - - + + + diff --git a/pages/retail.php b/pages/retail.php index 98c94c5..7989914 100644 --- a/pages/retail.php +++ b/pages/retail.php @@ -10,9 +10,9 @@ - - - + + + diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 7385153..009080a 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -7740,3 +7740,1168 @@ p:last-child { margin-bottom: 0; } .fit-class { grid-template-columns: 42px 1fr auto; gap: 8px; padding: 9px 14px; } .fit-class__coach { display: none; } } + +/* ═══════════════════════════════════════════════════════════ + LOBBY & RECEPTION ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-lobby { background: none; display: flex; align-items: center; justify-content: center; } + +.lobby-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; position: relative; } +.lobby-screen { + width: 100%; height: 100%; + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + border-radius: 14px; overflow: hidden; position: relative; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); +} +.lobby-hdr { + display: flex; justify-content: space-between; align-items: center; + padding: 10px 16px; background: rgba(255,255,255,0.08); + font-size: 11px; color: rgba(255,255,255,0.7); +} +.lobby-hdr__logo { font-weight: 700; color: #e2c076; letter-spacing: 0.5px; } +.lobby-slides { position: relative; height: calc(100% - 70px); overflow: hidden; } +.lobby-slide { + position: absolute; inset: 0; display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: 16px; + opacity: 0; animation: lobby-cycle 12s infinite; +} +.lobby-slide--welcome { animation-delay: 0s; } +.lobby-slide--amenities { animation-delay: 4s; } +.lobby-slide--events { animation-delay: 8s; } + +.lobby-welcome__msg { font-size: 28px; font-weight: 700; color: #fff; } +.lobby-welcome__sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 6px; } + +.lobby-amen__title { font-size: 14px; font-weight: 600; color: #e2c076; margin-bottom: 12px; } +.lobby-amen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } +.lobby-amen__item { + background: rgba(255,255,255,0.08); border-radius: 8px; padding: 10px; + font-size: 12px; color: rgba(255,255,255,0.8); text-align: center; +} + +.lobby-events__title { font-size: 14px; font-weight: 600; color: #e2c076; margin-bottom: 10px; text-align: center; } +.lobby-events__list { width: 100%; } +.lobby-events__item { display: flex; gap: 10px; padding: 6px 0; font-size: 12px; color: rgba(255,255,255,0.8); } +.lobby-events__time { color: #e2c076; font-weight: 600; min-width: 40px; } + +.lobby-wifi { + position: absolute; bottom: 0; left: 0; right: 0; + padding: 8px 16px; background: rgba(255,255,255,0.05); + font-size: 10px; color: rgba(255,255,255,0.5); text-align: center; +} + +@keyframes lobby-cycle { + 0%, 5% { opacity: 0; transform: translateY(8px); } + 8%, 28% { opacity: 1; transform: translateY(0); } + 33%, 100%{ opacity: 0; transform: translateY(-8px); } +} + +@media (prefers-reduced-motion: reduce) { + .lobby-slide { animation: none; } + .lobby-slide--welcome { opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .lobby-stage { max-width: 300px; } + .lobby-welcome__msg { font-size: 22px; } + .lobby-amen__grid { gap: 6px; } +} + +/* ═══════════════════════════════════════════════════════════ + CONFERENCE ROOM PANEL ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-conference { background: none; display: flex; align-items: center; justify-content: center; } + +.conf-stage { width: 100%; max-width: 320px; } +.conf-panel { + background: #1a1a2e; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 20px; +} +.conf-panel__room { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; } +.conf-panel__status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } +.conf-status__dot { + width: 10px; height: 10px; border-radius: 50%; + background: #d83302; animation: conf-dot-pulse 2s ease-in-out infinite; +} +.conf-panel__current { margin-bottom: 16px; } +.conf-current__label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); } +.conf-current__title { font-size: 16px; font-weight: 600; color: #fff; margin-top: 4px; } +.conf-current__meta { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; } +.conf-panel__timeline { margin-bottom: 16px; } +.conf-tl__bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } +.conf-tl__fill { + height: 100%; width: 0%; background: #d83302; border-radius: 2px; + animation: conf-fill 8s linear infinite; +} +.conf-panel__next { + font-size: 12px; color: rgba(255,255,255,0.5); + padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); +} +.conf-next__label { color: rgba(255,255,255,0.4); } +.conf-next__title { color: rgba(255,255,255,0.7); } +.conf-next__time { float: right; color: rgba(255,255,255,0.4); } + +@keyframes conf-dot-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(216,51,2,0.6); } + 50% { box-shadow: 0 0 0 6px rgba(216,51,2,0); } +} +@keyframes conf-fill { + from { width: 35%; } + to { width: 90%; } +} + +@media (prefers-reduced-motion: reduce) { + .conf-status__dot { animation: none; } + .conf-tl__fill { animation: none; width: 60%; } +} + +@media (max-width: 640px) { + .conf-stage { max-width: 280px; } + .conf-panel { padding: 16px; } + .conf-panel__room { font-size: 17px; } +} + +/* ═══════════════════════════════════════════════════════════ + DAY-PART RETAIL PROMO ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-daypart { background: none; display: flex; align-items: center; justify-content: center; } + +.daypart-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; } +.daypart-screen { + width: 100%; height: 100%; + background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); + border-radius: 14px; overflow: hidden; position: relative; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); +} +.daypart-hdr { + display: flex; justify-content: space-between; align-items: center; + padding: 10px 16px; background: rgba(255,255,255,0.06); +} +.daypart-hdr__clock { font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } +.daypart-hdr__badge { + font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; + padding: 3px 10px; border-radius: 20px; background: rgba(216,51,2,0.2); color: #ff9068; +} +.daypart-slides { position: relative; height: calc(100% - 42px); overflow: hidden; } +.daypart-slide { + position: absolute; inset: 0; display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: 20px; text-align: center; + opacity: 0; animation: daypart-cycle 12s infinite; +} +.daypart-slide--morning { animation-delay: 0s; } +.daypart-slide--afternoon { animation-delay: 4s; } +.daypart-slide--evening { animation-delay: 8s; } +.daypart-promo__tag { + font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; + color: #ff9068; margin-bottom: 8px; +} +.daypart-promo__title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 6px; } +.daypart-promo__sub { font-size: 13px; color: rgba(255,255,255,0.6); } + +@keyframes daypart-cycle { + 0%, 5% { opacity: 0; transform: scale(0.96); } + 8%, 28% { opacity: 1; transform: scale(1); } + 33%, 100%{ opacity: 0; transform: scale(1.02); } +} + +@media (prefers-reduced-motion: reduce) { + .daypart-slide { animation: none; } + .daypart-slide--morning { opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .daypart-stage { max-width: 300px; } + .daypart-promo__title { font-size: 20px; } +} + +/* ═══════════════════════════════════════════════════════════ + IN-STORE WAYFINDING KIOSK ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-wayfind { background: none; display: flex; align-items: center; justify-content: center; } + +.wayfind-stage { width: 100%; max-width: 340px; } +.wayfind-kiosk { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px; +} +.wayfind-kiosk__search { + display: flex; align-items: center; gap: 8px; + background: rgba(255,255,255,0.06); border-radius: 8px; + padding: 10px 14px; margin-bottom: 14px; +} +.wayfind-search__icon { font-size: 14px; } +.wayfind-search__text { font-size: 13px; color: rgba(255,255,255,0.35); } +.wayfind-kiosk__map { + display: grid; grid-template-columns: 1fr 1fr; gap: 6px; + position: relative; margin-bottom: 14px; +} +.wayfind-zone { + background: rgba(255,255,255,0.05); border-radius: 6px; + padding: 16px 8px; text-align: center; font-size: 11px; + font-weight: 600; color: rgba(255,255,255,0.6); + border: 1px solid rgba(255,255,255,0.06); +} +.wayfind-zone--a { animation: wayfind-glow 6s ease-in-out infinite; } +.wayfind-zone--b { animation: wayfind-glow 6s ease-in-out infinite 1.5s; } +.wayfind-zone--c { animation: wayfind-glow 6s ease-in-out infinite 3s; } +.wayfind-zone--d { animation: wayfind-glow 6s ease-in-out infinite 4.5s; } +.wayfind-pin { + position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); + display: flex; align-items: center; gap: 4px; +} +.wayfind-pin__dot { + width: 10px; height: 10px; border-radius: 50%; background: #d83302; + animation: wayfind-pin-pulse 2s infinite; +} +.wayfind-pin__label { font-size: 9px; color: rgba(255,255,255,0.5); white-space: nowrap; } +.wayfind-kiosk__dir { display: flex; flex-direction: column; gap: 6px; } +.wayfind-dir__item { + font-size: 12px; color: rgba(255,255,255,0.6); padding: 8px 10px; + background: rgba(255,255,255,0.04); border-radius: 6px; +} +.wayfind-dir__arrow { color: #d83302; font-weight: 700; margin-right: 6px; } + +@keyframes wayfind-glow { + 0%, 100% { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.05); } + 25% { border-color: rgba(216,51,2,0.4); background: rgba(216,51,2,0.08); } +} +@keyframes wayfind-pin-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(216,51,2,0.6); } + 50% { box-shadow: 0 0 0 8px rgba(216,51,2,0); } +} + +@media (prefers-reduced-motion: reduce) { + .wayfind-zone { animation: none; } + .wayfind-pin__dot { animation: none; } +} + +@media (max-width: 640px) { + .wayfind-stage { max-width: 280px; } + .wayfind-kiosk { padding: 12px; } +} + +/* ═══════════════════════════════════════════════════════════ + STOREFRONT WINDOW DISPLAY ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-storefront { background: none; display: flex; align-items: center; justify-content: center; } + +.store-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; position: relative; } +.store-window { + width: 100%; height: 100%; position: relative; + border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); +} +.store-window__sun { + position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; + border-radius: 50%; background: radial-gradient(circle, rgba(255,200,50,0.4), transparent 70%); + animation: store-sun-pulse 4s ease-in-out infinite; z-index: 2; +} +.store-window__screen { + width: 100%; height: 100%; + background: linear-gradient(135deg, #1a1a2e, #2d1b4e); + position: relative; overflow: hidden; +} +.store-slides { position: relative; width: 100%; height: 100%; } +.store-slide { + position: absolute; inset: 0; display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: 20px; text-align: center; + opacity: 0; animation: store-cycle 12s infinite; +} +.store-slide--new { animation-delay: 0s; } +.store-slide--sale { animation-delay: 4s; } +.store-slide--hours { animation-delay: 8s; } +.store-slide__tag { + font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; + color: #e2c076; margin-bottom: 8px; +} +.store-slide__title { font-size: 26px; font-weight: 700; color: #fff; } +.store-slide__cta { font-size: 13px; color: #d83302; font-weight: 600; margin-top: 10px; } +.store-slide__sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; } +.store-window__glare { + position: absolute; inset: 0; + background: linear-gradient(120deg, rgba(255,255,255,0.08) 0%, transparent 50%); + pointer-events: none; z-index: 1; +} + +@keyframes store-cycle { + 0%, 5% { opacity: 0; } + 8%, 28% { opacity: 1; } + 33%, 100%{ opacity: 0; } +} +@keyframes store-sun-pulse { + 0%, 100% { opacity: 0.6; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.15); } +} + +@media (prefers-reduced-motion: reduce) { + .store-slide { animation: none; } + .store-slide--new { opacity: 1; } + .store-window__sun { animation: none; } +} + +@media (max-width: 640px) { + .store-stage { max-width: 300px; } + .store-slide__title { font-size: 20px; } +} + +/* ═══════════════════════════════════════════════════════════ + CORPORATE ANNOUNCEMENT BOARD ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-announcement { background: none; display: flex; align-items: center; justify-content: center; } + +.announce-stage { width: 100%; max-width: 380px; } +.announce-board { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); +} +.announce-hdr { + display: flex; justify-content: space-between; align-items: center; + padding: 12px 16px; background: rgba(255,255,255,0.04); +} +.announce-hdr__title { font-size: 14px; font-weight: 700; color: #fff; } +.announce-hdr__live { font-size: 11px; color: #22c55e; animation: announce-live-blink 2s infinite; } +.announce-cards { padding: 12px; display: flex; flex-direction: column; gap: 8px; } +.announce-card { + border-radius: 8px; padding: 12px; opacity: 0; + animation: announce-card-in 12s infinite; +} +.announce-card--urgent { + background: rgba(220,38,38,0.1); border-left: 3px solid #dc2626; + animation-delay: 0s; +} +.announce-card--celebration { + background: rgba(34,197,94,0.1); border-left: 3px solid #22c55e; + animation-delay: 4s; +} +.announce-card--hr { + background: rgba(59,130,246,0.1); border-left: 3px solid #3b82f6; + animation-delay: 8s; +} +.announce-card__badge { + font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; + color: rgba(255,255,255,0.5); margin-bottom: 4px; +} +.announce-card--urgent .announce-card__badge { color: #dc2626; } +.announce-card--celebration .announce-card__badge { color: #22c55e; } +.announce-card--hr .announce-card__badge { color: #3b82f6; } +.announce-card__title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; } +.announce-card__body { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.4; } + +@keyframes announce-card-in { + 0%, 5% { opacity: 0; transform: translateX(-8px); } + 8%, 28% { opacity: 1; transform: translateX(0); } + 33%, 100%{ opacity: 0; transform: translateX(8px); } +} +@keyframes announce-live-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +@media (prefers-reduced-motion: reduce) { + .announce-card { animation: none; opacity: 1; transform: none; } + .announce-hdr__live { animation: none; } +} + +@media (max-width: 640px) { + .announce-stage { max-width: 300px; } + .announce-card { padding: 10px; } + .announce-card__title { font-size: 13px; } +} + +/* ═══════════════════════════════════════════════════════════ + CAMPUS WAYFINDING KIOSK ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-campus-wayfind { background: none; display: flex; align-items: center; justify-content: center; } + +.campus-stage { width: 100%; max-width: 340px; } +.campus-kiosk { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px; +} +.campus-kiosk__hdr { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 12px; text-align: center; } +.campus-kiosk__search { + display: flex; align-items: center; gap: 8px; + background: rgba(255,255,255,0.06); border-radius: 8px; + padding: 10px 14px; margin-bottom: 14px; +} +.campus-search__icon { font-size: 14px; } +.campus-search__text { font-size: 13px; color: rgba(255,255,255,0.35); } +.campus-kiosk__map { + display: grid; grid-template-columns: 1fr 1fr; gap: 6px; + position: relative; margin-bottom: 12px; +} +.campus-bldg { + background: rgba(255,255,255,0.05); border-radius: 6px; + padding: 18px 8px; text-align: center; font-size: 11px; + font-weight: 600; color: rgba(255,255,255,0.6); + border: 1px solid rgba(255,255,255,0.06); +} +.campus-bldg--lib { animation: campus-highlight 8s ease-in-out infinite; } +.campus-bldg--sci { animation: campus-highlight 8s ease-in-out infinite 2s; } +.campus-bldg--arts { animation: campus-highlight 8s ease-in-out infinite 4s; } +.campus-bldg--sports { animation: campus-highlight 8s ease-in-out infinite 6s; } +.campus-pin { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); } +.campus-pin__dot { + display: block; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; + animation: campus-pin-pulse 2s infinite; +} +.campus-kiosk__legend { font-size: 10px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; } +.campus-legend__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } +.campus-legend__dot--you { background: #3b82f6; } + +@keyframes campus-highlight { + 0%, 100% { border-color: rgba(255,255,255,0.06); } + 12.5%, 25% { border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.08); } +} +@keyframes campus-pin-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.6); } + 50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); } +} + +@media (prefers-reduced-motion: reduce) { + .campus-bldg { animation: none; } + .campus-pin__dot { animation: none; } +} + +@media (max-width: 640px) { + .campus-stage { max-width: 280px; } + .campus-kiosk { padding: 12px; } +} + +/* ═══════════════════════════════════════════════════════════ + EMERGENCY OVERRIDE ALERT ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-emergency { background: none; display: flex; align-items: center; justify-content: center; } + +.emerg-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; } +.emerg-screen { + width: 100%; height: 100%; position: relative; + border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); +} +.emerg-screen__normal { + position: absolute; inset: 0; background: #111827; padding: 20px; + animation: emerg-normal 8s infinite; +} +.emerg-normal__hdr { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; } +.emerg-normal__item { font-size: 12px; color: rgba(255,255,255,0.5); padding: 6px 0; } +.emerg-screen__alert { + position: absolute; inset: 0; + background: #7f1d1d; display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: 20px; text-align: center; + opacity: 0; animation: emerg-alert 8s infinite; +} +.emerg-alert__icon { font-size: 32px; animation: emerg-icon-flash 1s infinite; } +.emerg-alert__title { + font-size: 18px; font-weight: 800; color: #fff; letter-spacing: 2px; margin-top: 8px; +} +.emerg-alert__msg { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 8px; line-height: 1.4; } +.emerg-alert__pulse { + position: absolute; inset: 0; + border: 3px solid #dc2626; + animation: emerg-border-pulse 1.5s infinite; border-radius: 14px; +} + +@keyframes emerg-normal { + 0%, 45% { opacity: 1; } + 50%, 95% { opacity: 0; } + 100% { opacity: 1; } +} +@keyframes emerg-alert { + 0%, 45% { opacity: 0; } + 50%, 95% { opacity: 1; } + 100% { opacity: 0; } +} +@keyframes emerg-icon-flash { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.2; } +} +@keyframes emerg-border-pulse { + 0% { opacity: 1; } + 100% { opacity: 0; transform: scale(1.03); } +} + +@media (prefers-reduced-motion: reduce) { + .emerg-screen__normal { animation: none; opacity: 0; } + .emerg-screen__alert { animation: none; opacity: 1; } + .emerg-alert__icon { animation: none; } + .emerg-alert__pulse { animation: none; opacity: 0.5; } +} + +@media (max-width: 640px) { + .emerg-stage { max-width: 300px; } + .emerg-alert__title { font-size: 15px; } +} + +/* ═══════════════════════════════════════════════════════════ + OUTDOOR ENCLOSURE ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-enclosure { background: none; display: flex; align-items: center; justify-content: center; } + +.encl-stage { width: 100%; max-width: 340px; position: relative; padding-top: 20px; } +.encl-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } +.encl-rain__drop { + position: absolute; width: 2px; background: rgba(100,160,255,0.35); + border-radius: 1px; animation: encl-drop 1.2s linear infinite; +} +.encl-rain__drop:nth-child(1) { left: 8%; height: 16px; animation-delay: 0s; } +.encl-rain__drop:nth-child(2) { left: 18%; height: 12px; animation-delay: 0.15s; } +.encl-rain__drop:nth-child(3) { left: 28%; height: 18px; animation-delay: 0.3s; } +.encl-rain__drop:nth-child(4) { left: 38%; height: 14px; animation-delay: 0.45s; } +.encl-rain__drop:nth-child(5) { left: 48%; height: 16px; animation-delay: 0.6s; } +.encl-rain__drop:nth-child(6) { left: 58%; height: 12px; animation-delay: 0.1s; } +.encl-rain__drop:nth-child(7) { left: 68%; height: 18px; animation-delay: 0.25s; } +.encl-rain__drop:nth-child(8) { left: 78%; height: 14px; animation-delay: 0.4s; } +.encl-rain__drop:nth-child(9) { left: 88%; height: 16px; animation-delay: 0.55s; } +.encl-rain__drop:nth-child(10) { left: 13%; height: 12px; animation-delay: 0.7s; } +.encl-rain__drop:nth-child(11) { left: 43%; height: 18px; animation-delay: 0.85s; } +.encl-rain__drop:nth-child(12) { left: 73%; height: 14px; animation-delay: 1s; } + +.encl-unit { position: relative; z-index: 1; } +.encl-unit__body { + background: #1f2937; border-radius: 10px; border: 3px solid #374151; + padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); +} +.encl-unit__screen { + background: linear-gradient(135deg, #1a1a2e, #16213e); + border-radius: 6px; padding: 28px 16px; text-align: center; +} +.encl-screen__content { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); } +.encl-unit__badge { + position: absolute; top: -8px; right: 12px; + background: #15803d; color: #fff; font-size: 10px; font-weight: 800; + padding: 4px 10px; border-radius: 4px; letter-spacing: 1px; +} +.encl-unit__temp { + text-align: center; margin-top: 10px; + font-size: 11px; color: rgba(255,255,255,0.5); +} + +@keyframes encl-drop { + from { top: -20px; opacity: 1; } + to { top: 110%; opacity: 0.3; } +} + +@media (prefers-reduced-motion: reduce) { + .encl-rain__drop { animation: none; opacity: 0.3; } +} + +@media (max-width: 640px) { + .encl-stage { max-width: 280px; } +} + +/* ═══════════════════════════════════════════════════════════ + HIGH-BRIGHTNESS COMPARISON ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-brightness { background: none; display: flex; align-items: center; justify-content: center; } + +.bright-stage { width: 100%; max-width: 380px; position: relative; padding-top: 10px; } +.bright-sun { + position: absolute; top: -10px; right: 20px; width: 50px; height: 50px; + border-radius: 50%; background: radial-gradient(circle, rgba(255,200,50,0.5), transparent 70%); + animation: bright-sun-glow 3s ease-in-out infinite; +} +.bright-compare { display: flex; gap: 12px; align-items: center; } +.bright-panel { flex: 1; } +.bright-panel__screen { + border-radius: 8px; padding: 24px 12px; text-align: center; + border: 2px solid rgba(255,255,255,0.08); +} +.bright-panel__screen--dim { + background: rgba(255,255,255,0.03); opacity: 0.4; +} +.bright-panel__screen--vivid { + background: linear-gradient(135deg, #1a1a2e, #16213e); + animation: bright-vivid-pulse 3s ease-in-out infinite; +} +.bright-panel__text { font-size: 14px; font-weight: 600; color: #fff; } +.bright-panel__screen--dim .bright-panel__text { color: rgba(255,255,255,0.3); } +.bright-panel__label { + text-align: center; font-size: 11px; color: rgba(255,255,255,0.5); + margin-top: 8px; font-weight: 600; +} +.bright-vs { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.3); } + +@keyframes bright-sun-glow { + 0%, 100% { opacity: 0.7; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.2); } +} +@keyframes bright-vivid-pulse { + 0%, 100% { box-shadow: 0 0 12px rgba(216,51,2,0.15); } + 50% { box-shadow: 0 0 24px rgba(216,51,2,0.3); } +} + +@media (prefers-reduced-motion: reduce) { + .bright-sun { animation: none; } + .bright-panel__screen--vivid { animation: none; } +} + +@media (max-width: 640px) { + .bright-stage { max-width: 300px; } + .bright-panel__screen { padding: 18px 10px; } +} + +/* ═══════════════════════════════════════════════════════════ + CELLULAR CONNECTIVITY ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-cellular { background: none; display: flex; align-items: center; justify-content: center; } + +.cell-stage { + width: 100%; max-width: 300px; + display: flex; flex-direction: column; align-items: center; gap: 16px; + padding: 20px 0; +} +.cell-tower { position: relative; width: 80px; height: 100px; } +.cell-tower__mast { + position: absolute; left: 50%; bottom: 0; width: 6px; height: 60px; + background: linear-gradient(to top, #374151, #6b7280); + transform: translateX(-50%); border-radius: 3px; +} +.cell-tower__base { + position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); + width: 30px; height: 8px; background: #374151; border-radius: 2px; +} +.cell-wave { + position: absolute; top: 10px; left: 50%; transform: translateX(-50%); + border: 2px solid rgba(216,51,2,0.4); border-radius: 50%; + animation: cell-wave-expand 3s ease-out infinite; +} +.cell-wave--1 { width: 30px; height: 30px; animation-delay: 0s; } +.cell-wave--2 { width: 50px; height: 50px; animation-delay: 1s; } +.cell-wave--3 { width: 70px; height: 70px; animation-delay: 2s; } +.cell-badge { + font-size: 14px; font-weight: 800; color: #fff; + background: rgba(216,51,2,0.15); padding: 6px 16px; border-radius: 20px; + letter-spacing: 1px; +} +.cell-signal { display: flex; gap: 3px; align-items: flex-end; } +.cell-signal__bar { + width: 6px; background: #22c55e; border-radius: 2px; + animation: cell-bar-fill 3s ease-in-out infinite; +} +.cell-signal__bar--1 { height: 6px; animation-delay: 0s; } +.cell-signal__bar--2 { height: 12px; animation-delay: 0.3s; } +.cell-signal__bar--3 { height: 18px; animation-delay: 0.6s; } +.cell-signal__bar--4 { height: 24px; animation-delay: 0.9s; } +.cell-status { font-size: 12px; color: #22c55e; font-weight: 600; } + +@keyframes cell-wave-expand { + 0% { opacity: 1; transform: translateX(-50%) scale(0.5); } + 100% { opacity: 0; transform: translateX(-50%) scale(1.5); } +} +@keyframes cell-bar-fill { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +@media (prefers-reduced-motion: reduce) { + .cell-wave { animation: none; opacity: 0.3; } + .cell-signal__bar { animation: none; } +} + +@media (max-width: 640px) { + .cell-stage { max-width: 240px; } +} + +/* ═══════════════════════════════════════════════════════════ + DESIGNER EDITOR CANVAS ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-designer { background: none; display: flex; align-items: center; justify-content: center; } + +.designer-stage { width: 100%; max-width: 380px; } +.designer-editor { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); display: grid; + grid-template-columns: 1fr 90px; grid-template-rows: auto 1fr; +} +.designer-toolbar { + grid-column: 1 / -1; display: flex; gap: 8px; padding: 10px 14px; + background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); +} +.designer-tool { + width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; + background: rgba(255,255,255,0.06); border-radius: 6px; + font-size: 13px; color: rgba(255,255,255,0.5); +} +.designer-canvas { padding: 14px; display: flex; flex-direction: column; gap: 8px; } +.designer-widget { + border-radius: 6px; padding: 12px 10px; + border: 1px dashed rgba(255,255,255,0.12); + opacity: 0; animation: designer-drop 8s infinite; +} +.designer-widget--text { background: rgba(59,130,246,0.08); animation-delay: 0s; } +.designer-widget--img { background: rgba(34,197,94,0.08); animation-delay: 1s; } +.designer-widget--ticker { background: rgba(234,179,8,0.08); animation-delay: 2s; } +.designer-widget--video { background: rgba(168,85,247,0.08); animation-delay: 3s; } +.designer-widget__label { font-size: 11px; color: rgba(255,255,255,0.5); } +.designer-layers { + padding: 14px 10px; border-left: 1px solid rgba(255,255,255,0.06); +} +.designer-layers__title { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } +.designer-layer { + font-size: 11px; color: rgba(255,255,255,0.4); padding: 4px 6px; + border-radius: 4px; margin-bottom: 3px; +} + +@keyframes designer-drop { + 0%, 8% { opacity: 0; transform: translateY(-8px); } + 15%, 80% { opacity: 1; transform: translateY(0); } + 90%, 100%{ opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + .designer-widget { animation: none; opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .designer-stage { max-width: 300px; } + .designer-editor { grid-template-columns: 1fr; } + .designer-layers { display: none; } +} + +/* ═══════════════════════════════════════════════════════════ + MEDIA LIBRARY GRID ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-media-library { background: none; display: flex; align-items: center; justify-content: center; } + +.medialib-stage { width: 100%; max-width: 380px; } +.medialib-panel { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px; +} +.medialib-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } +.medialib-hdr__title { font-size: 14px; font-weight: 700; color: #fff; } +.medialib-hdr__count { font-size: 11px; color: rgba(255,255,255,0.4); } +.medialib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } +.medialib-thumb { + aspect-ratio: 1; border-radius: 8px; display: flex; + align-items: center; justify-content: center; + opacity: 0; animation: medialib-fade 10s infinite; +} +.medialib-thumb--img { background: rgba(59,130,246,0.1); animation-delay: 0s; } +.medialib-thumb--vid { background: rgba(168,85,247,0.1); animation-delay: 0.4s; } +.medialib-thumb--pdf { background: rgba(220,38,38,0.1); animation-delay: 0.8s; } +.medialib-thumb--ppt { background: rgba(234,179,8,0.1); animation-delay: 1.2s; } +.medialib-thumb--img2 { background: rgba(34,197,94,0.1); animation-delay: 1.6s; } +.medialib-thumb--audio { background: rgba(236,72,153,0.1); animation-delay: 2s; } +.medialib-thumb__icon { font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 700; } +.medialib-upload { display: flex; align-items: center; gap: 10px; } +.medialib-upload__bar { + flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; + overflow: hidden; position: relative; +} +.medialib-upload__bar::after { + content: ''; position: absolute; inset: 0; + background: #3b82f6; border-radius: 2px; + animation: medialib-progress 4s ease-in-out infinite; + transform-origin: left; +} +.medialib-upload__text { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; } + +@keyframes medialib-fade { + 0%, 8% { opacity: 0; transform: scale(0.85); } + 16%, 75%{ opacity: 1; transform: scale(1); } + 85%, 100%{ opacity: 0; transform: scale(0.95); } +} +@keyframes medialib-progress { + 0% { transform: scaleX(0); } + 80% { transform: scaleX(0.95); } + 100% { transform: scaleX(0); } +} + +@media (prefers-reduced-motion: reduce) { + .medialib-thumb { animation: none; opacity: 1; transform: none; } + .medialib-upload__bar::after { animation: none; transform: scaleX(0.6); } +} + +@media (max-width: 640px) { + .medialib-stage { max-width: 300px; } + .medialib-grid { grid-template-columns: repeat(2, 1fr); } +} + +/* ═══════════════════════════════════════════════════════════ + PUBLISH WORKFLOW ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-publish { background: none; display: flex; align-items: center; justify-content: center; } + +.publish-stage { width: 100%; max-width: 380px; padding: 16px 0; } +.publish-flow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; } +.publish-step { text-align: center; } +.publish-step__badge { + display: block; font-size: 12px; font-weight: 700; padding: 8px 16px; + border-radius: 8px; margin-bottom: 6px; +} +.publish-step--draft .publish-step__badge { background: rgba(234,179,8,0.15); color: #eab308; } +.publish-step--review .publish-step__badge { background: rgba(59,130,246,0.15); color: #3b82f6; } +.publish-step--live .publish-step__badge { background: rgba(34,197,94,0.15); color: #22c55e; } +.publish-step__label { font-size: 10px; color: rgba(255,255,255,0.4); } +.publish-arrow { font-size: 16px; color: rgba(255,255,255,0.2); } +.publish-step--draft { animation: pub-step-highlight 6s infinite 0s; } +.publish-step--review { animation: pub-step-highlight 6s infinite 2s; } +.publish-step--live { animation: pub-step-highlight 6s infinite 4s; } +.publish-bar { + height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; + overflow: hidden; margin-bottom: 10px; +} +.publish-bar__fill { + height: 100%; width: 0%; background: linear-gradient(90deg, #eab308, #3b82f6, #22c55e); + border-radius: 2px; animation: pub-bar-fill 6s ease-in-out infinite; +} +.publish-status { + font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; + animation: pub-status-fade 6s infinite; +} + +@keyframes pub-step-highlight { + 0%, 10% { opacity: 0.4; transform: scale(1); } + 16%, 28% { opacity: 1; transform: scale(1.08); } + 33%, 100% { opacity: 0.4; transform: scale(1); } +} +@keyframes pub-bar-fill { + 0% { width: 0%; } + 80% { width: 100%; } + 100% { width: 100%; opacity: 0; } +} +@keyframes pub-status-fade { + 0%, 60% { opacity: 0; } + 70%, 90% { opacity: 1; } + 100% { opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + .publish-step--draft, .publish-step--review, .publish-step--live { animation: none; opacity: 1; } + .publish-bar__fill { animation: none; width: 100%; } + .publish-status { animation: none; opacity: 1; } +} + +@media (max-width: 640px) { + .publish-stage { max-width: 300px; } + .publish-step__badge { padding: 6px 12px; font-size: 11px; } +} + +/* ═══════════════════════════════════════════════════════════ + SCREEN GROUPS HIERARCHY ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-screen-groups { background: none; display: flex; align-items: center; justify-content: center; } + +.groups-stage { width: 100%; max-width: 340px; padding: 10px 0; } +.groups-tree { margin-bottom: 16px; } +.groups-node { + display: flex; align-items: center; gap: 8px; padding: 8px 12px; + border-radius: 8px; margin-bottom: 4px; + background: rgba(255,255,255,0.04); +} +.groups-node__icon { font-size: 8px; } +.groups-node--root .groups-node__icon { color: #d83302; } +.groups-node--region .groups-node__icon { color: #3b82f6; } +.groups-node--site .groups-node__icon { color: #22c55e; } +.groups-node__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); flex: 1; } +.groups-node__count { + font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); + background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 10px; +} +.groups-branch { padding-left: 20px; border-left: 2px solid rgba(255,255,255,0.06); margin-left: 16px; } +.groups-branch--deep { padding-left: 16px; margin-left: 12px; } +.groups-push { + display: flex; align-items: center; justify-content: center; gap: 8px; + padding: 10px; border-radius: 8px; background: rgba(216,51,2,0.08); + position: relative; overflow: hidden; +} +.groups-push__ripple { + position: absolute; inset: 0; border-radius: 8px; + border: 2px solid rgba(216,51,2,0.3); + animation: groups-ripple 3s ease-out infinite; +} +.groups-push__label { font-size: 12px; font-weight: 600; color: #d83302; } + +@keyframes groups-ripple { + 0% { opacity: 1; transform: scale(0.95); } + 100% { opacity: 0; transform: scale(1.05); } +} + +@media (prefers-reduced-motion: reduce) { + .groups-push__ripple { animation: none; opacity: 0.3; } +} + +@media (max-width: 640px) { + .groups-stage { max-width: 280px; } + .groups-branch { padding-left: 14px; margin-left: 12px; } +} + +/* ═══════════════════════════════════════════════════════════ + MONITORING DASHBOARD ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-monitoring { background: none; display: flex; align-items: center; justify-content: center; } + +.monitor-stage { width: 100%; max-width: 380px; } +.monitor-dash { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px; +} +.monitor-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } +.monitor-hdr__title { font-size: 14px; font-weight: 700; color: #fff; } +.monitor-hdr__count { font-size: 11px; color: #22c55e; font-weight: 600; } +.monitor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; } +.monitor-tile { + display: flex; align-items: center; gap: 6px; + padding: 8px 10px; border-radius: 6px; + background: rgba(255,255,255,0.04); font-size: 11px; color: rgba(255,255,255,0.6); +} +.monitor-tile__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } +.monitor-tile--ok .monitor-tile__dot { background: #22c55e; } +.monitor-tile--warn .monitor-tile__dot { background: #eab308; animation: monitor-warn-blink 1.5s infinite; } +.monitor-tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.monitor-screenshot { + background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px; text-align: center; +} +.monitor-screenshot__img { + width: 100%; aspect-ratio: 16 / 9; background: rgba(255,255,255,0.06); + border-radius: 4px; margin-bottom: 6px; + animation: monitor-screenshot-flash 6s infinite; +} +.monitor-screenshot__label { font-size: 10px; color: rgba(255,255,255,0.4); } + +@keyframes monitor-warn-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} +@keyframes monitor-screenshot-flash { + 0%, 90% { opacity: 1; } + 93% { opacity: 0.3; } + 96% { opacity: 1; } +} + +@media (prefers-reduced-motion: reduce) { + .monitor-tile--warn .monitor-tile__dot { animation: none; } + .monitor-screenshot__img { animation: none; } +} + +@media (max-width: 640px) { + .monitor-stage { max-width: 300px; } + .monitor-grid { grid-template-columns: repeat(2, 1fr); } +} + +/* ═══════════════════════════════════════════════════════════ + PATIENT WAYFINDING KIOSK ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-patient-wayfind { background: none; display: flex; align-items: center; justify-content: center; } + +.pwayfind-stage { width: 100%; max-width: 340px; } +.pwayfind-kiosk { + background: #111827; border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px; +} +.pwayfind-hdr { + display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; +} +.pwayfind-hdr__title { font-size: 16px; font-weight: 700; color: #fff; } +.pwayfind-hdr__a11y { font-size: 20px; color: rgba(255,255,255,0.3); } +.pwayfind-search { + display: flex; align-items: center; gap: 8px; + background: rgba(255,255,255,0.06); border-radius: 8px; + padding: 10px 14px; margin-bottom: 14px; +} +.pwayfind-search__icon { font-size: 14px; } +.pwayfind-search__text { + font-size: 13px; color: rgba(255,255,255,0.6); + animation: pwayfind-typing 4s steps(13) infinite; + overflow: hidden; white-space: nowrap; width: 0; + border-right: 2px solid rgba(255,255,255,0.4); +} +.pwayfind-result { + background: rgba(59,130,246,0.06); border-radius: 8px; + padding: 12px; margin-bottom: 14px; + border-left: 3px solid #3b82f6; + opacity: 0; animation: pwayfind-result-in 4s ease infinite; + animation-delay: 2s; +} +.pwayfind-result__dept { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 8px; } +.pwayfind-result__route { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.5); } +.pwayfind-route__line { + flex: 1; height: 2px; background: linear-gradient(90deg, #3b82f6, #22c55e); + border-radius: 1px; +} +.pwayfind-route__start { white-space: nowrap; color: #3b82f6; } +.pwayfind-route__end { white-space: nowrap; color: #22c55e; } +.pwayfind-quick { display: flex; gap: 6px; flex-wrap: wrap; } +.pwayfind-quick__item { + font-size: 11px; padding: 6px 12px; border-radius: 20px; + background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); +} + +@keyframes pwayfind-typing { + 0% { width: 0; } + 50% { width: 100%; } + 80% { width: 100%; } + 100% { width: 0; } +} +@keyframes pwayfind-result-in { + 0%, 40% { opacity: 0; transform: translateY(6px); } + 50%, 80% { opacity: 1; transform: translateY(0); } + 90%, 100%{ opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + .pwayfind-search__text { animation: none; width: auto; border-right: none; } + .pwayfind-result { animation: none; opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .pwayfind-stage { max-width: 280px; } + .pwayfind-kiosk { padding: 12px; } +} + +/* ═══════════════════════════════════════════════════════════ + WAITING ROOM INFORMATION DISPLAY ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-waiting-room { background: none; display: flex; align-items: center; justify-content: center; } + +.waitroom-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; } +.waitroom-tv { width: 100%; } +.waitroom-tv__body { + background: #1a1a2e; border-radius: 14px 14px 0 0; overflow: hidden; + box-shadow: 0 6px 24px rgba(0,0,0,0.25); +} +.waitroom-tv__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } +.waitroom-slides { position: relative; width: 100%; height: 100%; } +.waitroom-slide { + position: absolute; inset: 0; display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: 20px; text-align: center; + opacity: 0; animation: waitroom-cycle 12s infinite; +} +.waitroom-slide--tips { animation-delay: 0s; } +.waitroom-slide--wait { animation-delay: 4s; } +.waitroom-slide--info { animation-delay: 8s; } +.waitroom-tips__title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #22c55e; margin-bottom: 8px; } +.waitroom-tips__text { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5; } +.waitroom-wait__title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #3b82f6; margin-bottom: 8px; } +.waitroom-wait__value { font-size: 32px; font-weight: 800; color: #fff; } +.waitroom-wait__queue { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; } +.waitroom-info__title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); margin-bottom: 8px; } +.waitroom-info__text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; } +.waitroom-tv__feet { display: flex; justify-content: center; gap: 60px; } +.waitroom-tv__foot { width: 40px; height: 4px; background: #374151; border-radius: 0 0 4px 4px; } + +@keyframes waitroom-cycle { + 0%, 5% { opacity: 0; transform: translateY(8px); } + 8%, 28% { opacity: 1; transform: translateY(0); } + 33%, 100%{ opacity: 0; transform: translateY(-8px); } +} + +@media (prefers-reduced-motion: reduce) { + .waitroom-slide { animation: none; } + .waitroom-slide--tips { opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .waitroom-stage { max-width: 300px; } + .waitroom-wait__value { font-size: 26px; } +} + +/* ═══════════════════════════════════════════════════════════ + MULTI-ZONE LAYOUT ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-multi-zone { background: none; display: flex; align-items: center; justify-content: center; } + +.mzone-stage { width: 100%; max-width: 380px; } +.mzone-tv { width: 100%; } +.mzone-tv__body { + background: #1a1a2e; border-radius: 14px 14px 0 0; overflow: hidden; + box-shadow: 0 6px 24px rgba(0,0,0,0.25); +} +.mzone-tv__screen { aspect-ratio: 16 / 9; overflow: hidden; } +.mzone-layout { + width: 100%; height: 100%; + display: grid; grid-template-columns: 1fr 120px; grid-template-rows: 1fr 28px; +} +.mzone-main { + background: #0f0f1a; display: flex; align-items: center; justify-content: center; + border-right: 1px solid rgba(255,255,255,0.06); + border-bottom: 1px solid rgba(255,255,255,0.06); +} +.mzone-main__label { font-size: 14px; color: rgba(255,255,255,0.3); } +.mzone-side { + padding: 10px 8px; background: rgba(255,255,255,0.02); + border-bottom: 1px solid rgba(255,255,255,0.06); + overflow: hidden; +} +.mzone-side__title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #d83302; margin-bottom: 6px; } +.mzone-side__item { font-size: 10px; color: rgba(255,255,255,0.5); padding: 3px 0; } +.mzone-ticker { + grid-column: 1 / -1; background: rgba(216,51,2,0.08); padding: 6px 12px; + font-size: 10px; color: rgba(255,255,255,0.5); white-space: nowrap; + overflow: hidden; animation: mzone-scroll 20s linear infinite; +} +.mzone-tv__feet { display: flex; justify-content: center; gap: 60px; } +.mzone-tv__foot { width: 40px; height: 4px; background: #374151; border-radius: 0 0 4px 4px; } + +@keyframes mzone-scroll { + from { text-indent: 100%; } + to { text-indent: -200%; } +} + +@media (prefers-reduced-motion: reduce) { + .mzone-ticker { animation: none; text-indent: 0; } +} + +@media (max-width: 640px) { + .mzone-stage { max-width: 300px; } + .mzone-layout { grid-template-columns: 1fr 90px; } +} + +/* ═══════════════════════════════════════════════════════════ + MEMBERSHIP PROMO CYCLING ANIMATION + ═══════════════════════════════════════════════════════════ */ +.platform-visual.has-membership { background: none; display: flex; align-items: center; justify-content: center; } + +.member-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; } +.member-screen { + width: 100%; height: 100%; + border-radius: 14px; overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); position: relative; +} +.member-slides { position: relative; width: 100%; height: 100%; } +.member-slide { + position: absolute; inset: 0; display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: 20px; text-align: center; + opacity: 0; animation: member-cycle 12s infinite; +} +.member-slide--jan { + background: linear-gradient(135deg, #1e3a5f, #0f172a); + animation-delay: 0s; +} +.member-slide--summer { + background: linear-gradient(135deg, #7c2d12, #1c1917); + animation-delay: 4s; +} +.member-slide--sept { + background: linear-gradient(135deg, #14532d, #0f172a); + animation-delay: 8s; +} +.member-slide__tag { + font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; + color: #d83302; margin-bottom: 6px; +} +.member-slide__title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 6px; } +.member-slide__price { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 12px; } +.member-slide__cta { + font-size: 12px; font-weight: 600; color: #fff; + background: #d83302; padding: 6px 18px; border-radius: 20px; + display: inline-block; +} + +@keyframes member-cycle { + 0%, 5% { opacity: 0; transform: scale(0.96); } + 8%, 28% { opacity: 1; transform: scale(1); } + 33%, 100%{ opacity: 0; transform: scale(1.02); } +} + +@media (prefers-reduced-motion: reduce) { + .member-slide { animation: none; } + .member-slide--jan { opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .member-stage { max-width: 300px; } + .member-slide__title { font-size: 20px; } +} diff --git a/theme/assets/js/solutions-animator.js b/theme/assets/js/solutions-animator.js index e921920..c2b67dc 100644 --- a/theme/assets/js/solutions-animator.js +++ b/theme/assets/js/solutions-animator.js @@ -289,3 +289,66 @@ boot(); } })(); + +/* ── 3. Day-Part Clock Animator ────────────────────────────────────────── */ +(function () { + 'use strict'; + + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; + + function initDaypart(stage) { + var clockEl = stage.querySelector('[data-daypart-clock]'); + var badgeEl = stage.querySelector('[data-daypart-badge]'); + if (!clockEl || !badgeEl) return; + + var visible = true; + var observer = new IntersectionObserver(function (entries) { + visible = entries[0].isIntersecting; + }, { threshold: 0.1 }); + observer.observe(stage); + + var simHour = 7; + var simMin = 0; + var parts = ['Morning', 'Afternoon', 'Evening']; + + function pad(n) { return n < 10 ? '0' + n : '' + n; } + + function tick() { + if (!visible) { requestAnimationFrame(tick); return; } + + simMin += 1; + if (simMin >= 60) { simMin = 0; simHour = (simHour + 1) % 24; } + + var displayHour = simHour % 12 || 12; + var ampm = simHour < 12 ? 'AM' : 'PM'; + clockEl.textContent = displayHour + ':' + pad(simMin) + ' ' + ampm; + + if (simHour >= 5 && simHour < 12) { + badgeEl.textContent = parts[0]; + } else if (simHour >= 12 && simHour < 17) { + badgeEl.textContent = parts[1]; + } else { + badgeEl.textContent = parts[2]; + } + + requestAnimationFrame(tick); + } + + requestAnimationFrame(tick); + } + + function boot() { + var stages = document.querySelectorAll('.daypart-stage'); + for (var i = 0; i < stages.length; i++) { + if (stages[i]._daypartAnim) continue; + stages[i]._daypartAnim = true; + initDaypart(stages[i]); + } + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', boot); + } else { + boot(); + } +})(); diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 8756e24..0132e98 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -585,6 +585,26 @@ add_action('init', function () { 'healthcareAnim' => ['type' => 'boolean', 'default' => false], 'transitAnim' => ['type' => 'boolean', 'default' => false], 'fitnessAnim' => ['type' => 'boolean', 'default' => false], + 'lobbyAnim' => ['type' => 'boolean', 'default' => false], + 'conferenceAnim' => ['type' => 'boolean', 'default' => false], + 'dayPartAnim' => ['type' => 'boolean', 'default' => false], + 'wayfindAnim' => ['type' => 'boolean', 'default' => false], + 'storefrontAnim' => ['type' => 'boolean', 'default' => false], + 'announcementAnim' => ['type' => 'boolean', 'default' => false], + 'campusWayfindAnim' => ['type' => 'boolean', 'default' => false], + 'emergencyAnim' => ['type' => 'boolean', 'default' => false], + 'enclosureAnim' => ['type' => 'boolean', 'default' => false], + 'brightnessAnim' => ['type' => 'boolean', 'default' => false], + 'cellularAnim' => ['type' => 'boolean', 'default' => false], + 'designerAnim' => ['type' => 'boolean', 'default' => false], + 'mediaLibraryAnim' => ['type' => 'boolean', 'default' => false], + 'publishAnim' => ['type' => 'boolean', 'default' => false], + 'screenGroupsAnim' => ['type' => 'boolean', 'default' => false], + 'monitoringAnim' => ['type' => 'boolean', 'default' => false], + 'patientWayfindAnim' => ['type' => 'boolean', 'default' => false], + 'waitingRoomAnim' => ['type' => 'boolean', 'default' => false], + 'multiZoneAnim' => ['type' => 'boolean', 'default' => false], + 'membershipAnim' => ['type' => 'boolean', 'default' => false], 'galleryIds' => ['type' => 'array', 'default' => [], 'items' => ['type' => 'number']], ], 'supports' => $block_supports, @@ -2420,6 +2440,354 @@ function oribi_render_platform_row($a) $visual_html = $fa; $visual_cls = 'platform-visual has-fitness'; } + elseif (!empty($a['lobbyAnim'])) { + /* ── Hotel Lobby Welcome Display ── */ + $lb = '
'; + $visual_html = $lb; + $visual_cls = 'platform-visual has-lobby'; + } + elseif (!empty($a['conferenceAnim'])) { + /* ── Conference Room Door Panel ── */ + $cf = ''; + $visual_html = $cf; + $visual_cls = 'platform-visual has-conference'; + } + elseif (!empty($a['dayPartAnim'])) { + /* ── Day-Part Retail Promo Display (JS-driven clock) ── */ + $dp = ''; + $visual_html = $dp; + $visual_cls = 'platform-visual has-daypart'; + } + elseif (!empty($a['wayfindAnim'])) { + /* ── In-Store Wayfinding Kiosk ── */ + $wf = ''; + $visual_html = $wf; + $visual_cls = 'platform-visual has-wayfind'; + } + elseif (!empty($a['storefrontAnim'])) { + /* ── Window / Storefront Display ── */ + $sf = ''; + $visual_html = $sf; + $visual_cls = 'platform-visual has-storefront'; + } + elseif (!empty($a['announcementAnim'])) { + /* ── Corporate Announcement Board ── */ + $an = ''; + $visual_html = $an; + $visual_cls = 'platform-visual has-announcement'; + } + elseif (!empty($a['campusWayfindAnim'])) { + /* ── Campus Wayfinding Kiosk ── */ + $cw = ''; + $visual_html = $cw; + $visual_cls = 'platform-visual has-campus-wayfind'; + } + elseif (!empty($a['emergencyAnim'])) { + /* ── Emergency Override Alert ── */ + $em = ''; + $visual_html = $em; + $visual_cls = 'platform-visual has-emergency'; + } + elseif (!empty($a['enclosureAnim'])) { + /* ── Outdoor Weather-Resistant Enclosure ── */ + $en = ''; + $visual_html = $en; + $visual_cls = 'platform-visual has-enclosure'; + } + elseif (!empty($a['brightnessAnim'])) { + /* ── High-Brightness Comparison ── */ + $br = ''; + $visual_html = $br; + $visual_cls = 'platform-visual has-brightness'; + } + elseif (!empty($a['cellularAnim'])) { + /* ── Cellular Connectivity Tower ── */ + $cl = ''; + $visual_html = $cl; + $visual_cls = 'platform-visual has-cellular'; + } + elseif (!empty($a['designerAnim'])) { + /* ── Drag-and-Drop Editor Canvas ── */ + $ds = ''; + $visual_html = $ds; + $visual_cls = 'platform-visual has-designer'; + } + elseif (!empty($a['mediaLibraryAnim'])) { + /* ── Media Library Grid ── */ + $ml = ''; + $visual_html = $ml; + $visual_cls = 'platform-visual has-media-library'; + } + elseif (!empty($a['publishAnim'])) { + /* ── Draft → Publish Workflow ── */ + $pb = ''; + $visual_html = $pb; + $visual_cls = 'platform-visual has-publish'; + } + elseif (!empty($a['screenGroupsAnim'])) { + /* ── Screen Group Hierarchy Tree ── */ + $sg = ''; + $visual_html = $sg; + $visual_cls = 'platform-visual has-screen-groups'; + } + elseif (!empty($a['monitoringAnim'])) { + /* ── Remote Monitoring Dashboard ── */ + $mo = ''; + $visual_html = $mo; + $visual_cls = 'platform-visual has-monitoring'; + } + elseif (!empty($a['patientWayfindAnim'])) { + /* ── Hospital Patient Wayfinding Kiosk ── */ + $pw = ''; + $visual_html = $pw; + $visual_cls = 'platform-visual has-patient-wayfind'; + } + elseif (!empty($a['waitingRoomAnim'])) { + /* ── Waiting Room Information Display ── */ + $wr = ''; + $visual_html = $wr; + $visual_cls = 'platform-visual has-waiting-room'; + } + elseif (!empty($a['multiZoneAnim'])) { + /* ── Multi-Zone Layout Display ── */ + $mz = ''; + $visual_html = $mz; + $visual_cls = 'platform-visual has-multi-zone'; + } + elseif (!empty($a['membershipAnim'])) { + /* ── Seasonal Membership Promo Cycling ── */ + $mb = ''; + $visual_html = $mb; + $visual_cls = 'platform-visual has-membership'; + } elseif (!empty($a['hospitalityAnim'])) { /* ── Hospitality Sign: Rotating Menu (Breakfast, Lunch, Dinner) ── */ $ha = '