diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 06cbf7f..712eefa 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -5081,9 +5081,10 @@ p:last-child { margin-bottom: 0; } .bd-device__label { font-size: 10px; color: rgba(255,255,255,.45); - margin-top: 6px; + margin-bottom: 6px; letter-spacing: .5px; text-transform: uppercase; + order: -1; } /* ── Tablet (portrait kiosk) ──────────────────────────────── */ @@ -5109,29 +5110,24 @@ p:last-child { margin-bottom: 0; } } .bd-device--wall { animation-delay: 0.5s; } -/* ── Monitor on stand ─────────────────────────────────────── */ -.bd-device--monitor .bd-device__body { - width: 120px; - height: 80px; +/* ── Interactive tablet on table ───────────────────────────── */ +.bd-device--interactive .bd-device__body { + width: 110px; + height: 74px; + border-radius: 6px; + transform: perspective(400px) rotateX(25deg); + transform-origin: bottom center; } -.bd-stand { - display: flex; - flex-direction: column; - align-items: center; - margin-top: -1px; +.bd-device--interactive .bd-device__screen { border-radius: 3px; } +.bd-table { + width: 130px; + height: 8px; + background: linear-gradient(180deg, #2a2a2a, #1a1a1a); + border-radius: 3px; + margin-top: -2px; + box-shadow: 0 4px 12px rgba(0,0,0,.4); } -.bd-stand__stem { - width: 6px; - height: 14px; - background: #222; -} -.bd-stand__base { - width: 36px; - height: 5px; - background: #222; - border-radius: 0 0 4px 4px; -} -.bd-device--monitor { animation-delay: 1s; } +.bd-device--interactive { animation-delay: 1s; } /* ── Boot splash overlay ──────────────────────────────────── */ .bd-splash { @@ -5144,7 +5140,7 @@ p:last-child { margin-bottom: 0; } animation: bd-splash 8s ease-in-out infinite; } .bd-device--wall .bd-splash { animation-delay: 0.5s; } -.bd-device--monitor .bd-splash { animation-delay: 1s; } +.bd-device--interactive .bd-splash { animation-delay: 1s; } .bd-splash__logo { width: 28px; @@ -5159,7 +5155,7 @@ p:last-child { margin-bottom: 0; } height: 32px; animation-delay: 0.5s; } -.bd-device--monitor .bd-splash__logo { +.bd-device--interactive .bd-splash__logo { animation-delay: 1s; } @@ -5175,7 +5171,7 @@ p:last-child { margin-bottom: 0; } animation: bd-ui-show 8s ease-in-out infinite; } .bd-device--wall .bd-ui { animation-delay: 0.5s; } -.bd-device--monitor .bd-ui { animation-delay: 1s; } +.bd-device--interactive .bd-ui { animation-delay: 1s; } /* Brand header bar */ .bd-ui__header { @@ -5203,7 +5199,7 @@ p:last-child { margin-bottom: 0; } animation: bd-bar-grow 8s ease-in-out infinite; } .bd-device--wall .bd-ui__brand-bar { animation-delay: 0.5s; } -.bd-device--monitor .bd-ui__brand-bar { animation-delay: 1s; } +.bd-device--interactive .bd-ui__brand-bar { animation-delay: 1s; } /* Content area */ .bd-ui__content { @@ -5215,7 +5211,7 @@ p:last-child { margin-bottom: 0; } animation: bd-content-slide 8s ease-in-out infinite; } .bd-device--wall .bd-ui__content { animation-delay: 0.5s; } -.bd-device--monitor .bd-ui__content { animation-delay: 1s; } +.bd-device--interactive .bd-ui__content { animation-delay: 1s; } .bd-ui__block { border-radius: 2px; @@ -5300,15 +5296,16 @@ p:last-child { margin-bottom: 0; } .bd-stage { max-width: 360px; gap: 12px; } .bd-device--tablet .bd-device__body { width: 64px; height: 96px; } .bd-device--wall .bd-device__body { width: 148px; height: 88px; } - .bd-device--monitor .bd-device__body { width: 96px; height: 64px; } + .bd-device--interactive .bd-device__body { width: 88px; height: 58px; } + .bd-table { width: 104px; } } @media (max-width: 640px) { .bd-stage { max-width: 300px; gap: 8px; } .bd-device--tablet .bd-device__body { width: 52px; height: 78px; } .bd-device--wall .bd-device__body { width: 120px; height: 72px; } - .bd-device--monitor .bd-device__body { width: 78px; height: 52px; } + .bd-device--interactive .bd-device__body { width: 72px; height: 48px; } .bd-device__label { font-size: 8px; } - .bd-stand__base { width: 28px; } + .bd-table { width: 86px; height: 6px; } } /* ── Reduced-motion overrides ───────────────────────────────── */ diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 71f8b65..3afd596 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1654,6 +1654,7 @@ function oribi_render_platform_row( $a ) { /* ── Screen 1: Tablet (portrait kiosk) ── */ $bd .= '