feat: Update platform visual styles and dimensions for various animations
This commit is contained in:
Matt Batchelder
@@ -7744,14 +7744,22 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
LOBBY & RECEPTION ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-lobby { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-lobby {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.lobby-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; position: relative; }
|
||||
.lobby-stage { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; position: relative; margin: 0 auto; }
|
||||
.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);
|
||||
border-radius: 10px; overflow: hidden; position: relative;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
.lobby-hdr {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
@@ -7802,7 +7810,6 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lobby-stage { max-width: 300px; }
|
||||
.lobby-welcome__msg { font-size: 22px; }
|
||||
.lobby-amen__grid { gap: 6px; }
|
||||
}
|
||||
@@ -7810,18 +7817,26 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
CONFERENCE ROOM PANEL ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-conference { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-conference {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.conf-stage { width: 100%; max-width: 320px; }
|
||||
.conf-stage { width: 100%; max-width: 400px; margin: 0 auto; }
|
||||
.conf-panel {
|
||||
background: #1a1a2e; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 20px;
|
||||
background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); 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;
|
||||
background: var(--color-primary); 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); }
|
||||
@@ -7830,7 +7845,7 @@ p:last-child { margin-bottom: 0; }
|
||||
.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;
|
||||
height: 100%; width: 0%; background: var(--color-primary); border-radius: 2px;
|
||||
animation: conf-fill 8s linear infinite;
|
||||
}
|
||||
.conf-panel__next {
|
||||
@@ -7856,7 +7871,6 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.conf-stage { max-width: 280px; }
|
||||
.conf-panel { padding: 16px; }
|
||||
.conf-panel__room { font-size: 17px; }
|
||||
}
|
||||
@@ -7864,14 +7878,22 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
DAY-PART RETAIL PROMO ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-daypart { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-daypart {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.daypart-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
|
||||
.daypart-stage { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin: 0 auto; }
|
||||
.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);
|
||||
border-radius: 10px; overflow: hidden; position: relative;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
.daypart-hdr {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
@@ -7910,19 +7932,26 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-wayfind {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wayfind-stage { width: 100%; max-width: 340px; }
|
||||
.wayfind-stage { width: 100%; max-width: 400px; margin: 0 auto; }
|
||||
.wayfind-kiosk {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
|
||||
background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
|
||||
}
|
||||
.wayfind-kiosk__search {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
@@ -7950,7 +7979,7 @@ p:last-child { margin-bottom: 0; }
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.wayfind-pin__dot {
|
||||
width: 10px; height: 10px; border-radius: 50%; background: #d83302;
|
||||
width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary);
|
||||
animation: wayfind-pin-pulse 2s infinite;
|
||||
}
|
||||
.wayfind-pin__label { font-size: 9px; color: rgba(255,255,255,0.5); white-space: nowrap; }
|
||||
@@ -7959,7 +7988,7 @@ p:last-child { margin-bottom: 0; }
|
||||
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; }
|
||||
.wayfind-dir__arrow { color: var(--color-primary); 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); }
|
||||
@@ -7976,20 +8005,27 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-storefront {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.store-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; position: relative; }
|
||||
.store-stage { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; position: relative; margin: 0 auto; }
|
||||
.store-window {
|
||||
width: 100%; height: 100%; position: relative;
|
||||
border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
.store-window__sun {
|
||||
position: absolute; top: -20px; right: -20px; width: 80px; height: 80px;
|
||||
@@ -8015,7 +8051,7 @@ p:last-child { margin-bottom: 0; }
|
||||
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__cta { font-size: 13px; color: var(--color-primary); 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;
|
||||
@@ -8040,19 +8076,26 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-announcement {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.announce-stage { width: 100%; max-width: 380px; }
|
||||
.announce-stage { width: 100%; max-width: 460px; margin: 0 auto; }
|
||||
.announce-board {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
}
|
||||
.announce-hdr {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
@@ -8103,7 +8146,6 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.announce-stage { max-width: 300px; }
|
||||
.announce-card { padding: 10px; }
|
||||
.announce-card__title { font-size: 13px; }
|
||||
}
|
||||
@@ -8111,12 +8153,20 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
CAMPUS WAYFINDING KIOSK ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-campus-wayfind { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-campus-wayfind {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.campus-stage { width: 100%; max-width: 340px; }
|
||||
.campus-stage { width: 100%; max-width: 400px; margin: 0 auto; }
|
||||
.campus-kiosk {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
|
||||
background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
|
||||
}
|
||||
.campus-kiosk__hdr { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 12px; text-align: center; }
|
||||
.campus-kiosk__search {
|
||||
@@ -8164,23 +8214,30 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-emergency {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emerg-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
|
||||
.emerg-stage { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; margin: 0 auto; }
|
||||
.emerg-screen {
|
||||
width: 100%; height: 100%; position: relative;
|
||||
border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
.emerg-screen__normal {
|
||||
position: absolute; inset: 0; background: #111827; padding: 20px;
|
||||
position: absolute; inset: 0; background: #0d1117; padding: 20px;
|
||||
animation: emerg-normal 8s infinite;
|
||||
}
|
||||
.emerg-normal__hdr { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; }
|
||||
@@ -8199,7 +8256,7 @@ p:last-child { margin-bottom: 0; }
|
||||
.emerg-alert__pulse {
|
||||
position: absolute; inset: 0;
|
||||
border: 3px solid #dc2626;
|
||||
animation: emerg-border-pulse 1.5s infinite; border-radius: 14px;
|
||||
animation: emerg-border-pulse 1.5s infinite; border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes emerg-normal {
|
||||
@@ -8229,16 +8286,23 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-enclosure {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.encl-stage { width: 100%; max-width: 340px; position: relative; padding-top: 20px; }
|
||||
.encl-stage { width: 100%; max-width: 400px; position: relative; padding-top: 20px; margin: 0 auto; }
|
||||
.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);
|
||||
@@ -8287,15 +8351,23 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.encl-stage { max-width: 280px; }
|
||||
.encl-stage { padding-top: 14px; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
HIGH-BRIGHTNESS COMPARISON ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-brightness { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-brightness {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bright-stage { width: 100%; max-width: 380px; position: relative; padding-top: 10px; }
|
||||
.bright-stage { width: 100%; max-width: 460px; position: relative; padding-top: 10px; margin: 0 auto; }
|
||||
.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%);
|
||||
@@ -8337,17 +8409,24 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-cellular {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cell-stage {
|
||||
width: 100%; max-width: 300px;
|
||||
width: 100%; max-width: 380px; margin: 0 auto;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 16px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
@@ -8400,18 +8479,26 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cell-stage { max-width: 240px; }
|
||||
.cell-tower { transform: scale(0.85); }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
DESIGNER EDITOR CANVAS ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-designer { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-designer {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.designer-stage { width: 100%; max-width: 380px; }
|
||||
.designer-stage { width: 100%; max-width: 480px; margin: 0 auto; }
|
||||
.designer-editor {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); display: grid;
|
||||
background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); display: grid;
|
||||
grid-template-columns: 1fr 90px; grid-template-rows: auto 1fr;
|
||||
}
|
||||
.designer-toolbar {
|
||||
@@ -8454,7 +8541,6 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.designer-stage { max-width: 300px; }
|
||||
.designer-editor { grid-template-columns: 1fr; }
|
||||
.designer-layers { display: none; }
|
||||
}
|
||||
@@ -8462,12 +8548,20 @@ p:last-child { margin-bottom: 0; }
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
MEDIA LIBRARY GRID ANIMATION
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
.platform-visual.has-media-library { background: none; display: flex; align-items: center; justify-content: center; }
|
||||
.platform-visual.has-media-library {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.medialib-stage { width: 100%; max-width: 380px; }
|
||||
.medialib-stage { width: 100%; max-width: 460px; margin: 0 auto; }
|
||||
.medialib-panel {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
|
||||
background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); 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; }
|
||||
@@ -8515,16 +8609,23 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-publish {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.publish-stage { width: 100%; max-width: 380px; padding: 16px 0; }
|
||||
.publish-stage { width: 100%; max-width: 460px; padding: 16px 0; margin: 0 auto; }
|
||||
.publish-flow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
|
||||
.publish-step { text-align: center; }
|
||||
.publish-step__badge {
|
||||
@@ -8575,16 +8676,23 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-screen-groups {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.groups-stage { width: 100%; max-width: 340px; padding: 10px 0; }
|
||||
.groups-stage { width: 100%; max-width: 400px; padding: 10px 0; margin: 0 auto; }
|
||||
.groups-tree { margin-bottom: 16px; }
|
||||
.groups-node {
|
||||
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
|
||||
@@ -8592,7 +8700,7 @@ p:last-child { margin-bottom: 0; }
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
.groups-node__icon { font-size: 8px; }
|
||||
.groups-node--root .groups-node__icon { color: #d83302; }
|
||||
.groups-node--root .groups-node__icon { color: var(--color-primary); }
|
||||
.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; }
|
||||
@@ -8612,7 +8720,7 @@ p:last-child { margin-bottom: 0; }
|
||||
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; }
|
||||
.groups-push__label { font-size: 12px; font-weight: 600; color: var(--color-primary); }
|
||||
|
||||
@keyframes groups-ripple {
|
||||
0% { opacity: 1; transform: scale(0.95); }
|
||||
@@ -8624,19 +8732,26 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-monitoring {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.monitor-stage { width: 100%; max-width: 380px; }
|
||||
.monitor-stage { width: 100%; max-width: 460px; margin: 0 auto; }
|
||||
.monitor-dash {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
|
||||
background: #0d1117; border: 1px solid #1e2435; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); 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; }
|
||||
@@ -8677,19 +8792,26 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
.platform-visual.has-patient-wayfind {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pwayfind-stage { width: 100%; max-width: 340px; }
|
||||
.pwayfind-stage { width: 100%; max-width: 400px; margin: 0 auto; }
|
||||
.pwayfind-kiosk {
|
||||
background: #111827; border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 16px;
|
||||
background: #0f1117; border: 1px solid #1e2435; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); padding: 16px;
|
||||
}
|
||||
.pwayfind-hdr {
|
||||
display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
|
||||
@@ -8747,22 +8869,30 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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);
|
||||
.platform-visual.has-waiting-room {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
.waitroom-tv__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
|
||||
|
||||
.waitroom-stage { width: 100%; max-width: 520px; margin: 0 auto; }
|
||||
.waitroom-tv { display: flex; flex-direction: column; align-items: center; width: 100%; }
|
||||
.waitroom-tv__body {
|
||||
width: 100%; background: #111; border: 5px solid #1a1a1a;
|
||||
border-radius: 8px 8px 4px 4px; outline: 2px solid #000; padding: 4px;
|
||||
box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
|
||||
}
|
||||
.waitroom-tv__screen { width: 100%; aspect-ratio: 16 / 9; background: #0a0a0a; border-radius: 2px; overflow: hidden; position: relative; }
|
||||
.waitroom-slides { position: relative; width: 100%; height: 100%; }
|
||||
.waitroom-slide {
|
||||
position: absolute; inset: 0; display: flex; flex-direction: column;
|
||||
@@ -8779,8 +8909,8 @@ p:last-child { margin-bottom: 0; }
|
||||
.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; }
|
||||
.waitroom-tv__feet { display: flex; justify-content: space-between; width: 60%; max-width: 300px; }
|
||||
.waitroom-tv__foot { width: 12px; height: 8px; background: #111; border: 1px solid #000; border-radius: 0 0 4px 4px; }
|
||||
|
||||
@keyframes waitroom-cycle {
|
||||
0%, 5% { opacity: 0; transform: translateY(8px); }
|
||||
@@ -8794,22 +8924,30 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@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);
|
||||
.platform-visual.has-multi-zone {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
.mzone-tv__screen { aspect-ratio: 16 / 9; overflow: hidden; }
|
||||
|
||||
.mzone-stage { width: 100%; max-width: 520px; margin: 0 auto; }
|
||||
.mzone-tv { display: flex; flex-direction: column; align-items: center; width: 100%; }
|
||||
.mzone-tv__body {
|
||||
width: 100%; background: #111; border: 5px solid #1a1a1a;
|
||||
border-radius: 8px 8px 4px 4px; outline: 2px solid #000; padding: 4px;
|
||||
box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
|
||||
}
|
||||
.mzone-tv__screen { width: 100%; aspect-ratio: 16 / 9; background: #0a0a0a; border-radius: 2px; overflow: hidden; }
|
||||
.mzone-layout {
|
||||
width: 100%; height: 100%;
|
||||
display: grid; grid-template-columns: 1fr 120px; grid-template-rows: 1fr 28px;
|
||||
@@ -8825,15 +8963,15 @@ p:last-child { margin-bottom: 0; }
|
||||
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__title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary); 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; }
|
||||
.mzone-tv__feet { display: flex; justify-content: space-between; width: 60%; max-width: 300px; }
|
||||
.mzone-tv__foot { width: 12px; height: 8px; background: #111; border: 1px solid #000; border-radius: 0 0 4px 4px; }
|
||||
|
||||
@keyframes mzone-scroll {
|
||||
from { text-indent: 100%; }
|
||||
@@ -8845,20 +8983,27 @@ p:last-child { margin-bottom: 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; }
|
||||
.platform-visual.has-membership {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.member-stage { width: 100%; max-width: 380px; aspect-ratio: 16 / 10; }
|
||||
.member-stage { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin: 0 auto; }
|
||||
.member-screen {
|
||||
width: 100%; height: 100%;
|
||||
border-radius: 14px; overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25); position: relative;
|
||||
border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5); position: relative;
|
||||
}
|
||||
.member-slides { position: relative; width: 100%; height: 100%; }
|
||||
.member-slide {
|
||||
@@ -8880,13 +9025,13 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
.member-slide__tag {
|
||||
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
|
||||
color: #d83302; margin-bottom: 6px;
|
||||
color: var(--color-primary); 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;
|
||||
background: var(--color-primary); padding: 6px 18px; border-radius: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -8902,6 +9047,5 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.member-stage { max-width: 300px; }
|
||||
.member-slide__title { font-size: 20px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user