From 75588a515157863966e3e4bece584d1ac40031f5 Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Sat, 21 Feb 2026 13:43:07 -0500 Subject: [PATCH] Refactor platform row to implement promotional content layouts for welcome, sale, and menu displays --- theme/assets/css/main.css | 144 ++++++++++++++++++++++++++++++++------ theme/blocks/index.php | 36 +++++++--- 2 files changed, 149 insertions(+), 31 deletions(-) diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 712eefa..e7d82e2 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -5070,13 +5070,7 @@ p:last-child { margin-bottom: 0; } border-radius: 2px; position: relative; overflow: hidden; - background: - repeating-linear-gradient( - 180deg, - transparent, transparent 3px, - rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px - ), - linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%); + background: linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%); } .bd-device__label { font-size: 10px; @@ -5234,6 +5228,126 @@ p:last-child { margin-bottom: 0; } border: 1px solid rgba(76,175,80,.12); } +/* ── Promotional content layouts ─────────────────────── */ +.bd-promo { + flex: 1; + display: flex; + flex-direction: column; + gap: 3px; +} + +/* ── Kiosk: Welcome / check-in screen ── */ +.bd-promo--welcome { + align-items: center; + text-align: center; + gap: 4px; +} +.bd-promo__hero { + width: 100%; + flex: 1; + min-height: 28px; + background: linear-gradient(135deg, rgba(76,175,80,.18) 0%, rgba(76,175,80,.06) 100%); + border-radius: 2px; +} +.bd-promo__heading { + width: 70%; + height: 5px; + background: rgba(255,255,255,.3); + border-radius: 1px; +} +.bd-promo__text { + width: 85%; + height: 3px; + background: rgba(255,255,255,.14); + border-radius: 1px; +} +.bd-promo__btn { + width: 45%; + height: 8px; + background: #4CAF50; + border-radius: 3px; + margin-top: 2px; +} + +/* ── Wall display: Sale / featured product ── */ +.bd-promo--sale { + gap: 0; +} +.bd-promo__cols { + display: flex; + gap: 5px; + flex: 1; +} +.bd-promo__visual { + flex: 1; + background: linear-gradient(160deg, rgba(76,175,80,.20) 0%, rgba(76,175,80,.06) 100%); + border-radius: 2px; + min-height: 24px; +} +.bd-promo__info { + flex: 1; + display: flex; + flex-direction: column; + gap: 3px; + justify-content: center; +} +.bd-promo__badge { + width: 28px; + height: 6px; + background: rgba(239,68,68,.7); + border-radius: 2px; +} +.bd-promo--sale .bd-promo__heading { + width: 90%; + height: 4px; +} +.bd-promo--sale .bd-promo__text { + width: 100%; + height: 3px; +} +.bd-promo__text--short { + width: 65% !important; +} +.bd-promo__price { + width: 36px; + height: 6px; + background: rgba(255,200,80,.6); + border-radius: 1px; + margin-top: 1px; +} + +/* ── Interactive: Touch menu / category grid ── */ +.bd-promo--menu { + gap: 3px; +} +.bd-promo--menu .bd-promo__heading { + width: 55%; + height: 4px; +} +.bd-promo__grid { + flex: 1; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3px; +} +.bd-promo__tile { + background: rgba(255,255,255,.06); + border-radius: 2px; + display: flex; + flex-direction: column; + overflow: hidden; +} +.bd-promo__tile-img { + flex: 1; + background: linear-gradient(135deg, rgba(76,175,80,.14) 0%, rgba(76,175,80,.04) 100%); +} +.bd-promo__tile-lbl { + height: 4px; + margin: 2px 3px; + background: rgba(255,255,255,.18); + border-radius: 1px; +} + /* ═══════════════════════════════════════════════════════════ KEYFRAMES (8 s cycle) ═══════════════════════════════════════════════════════════ */ @@ -5278,19 +5392,6 @@ p:last-child { margin-bottom: 0; } 96%, 100% { opacity: 0; transform: translateY(4px); } } -/* ── Scanline sweep (reuses da-scan) ───────────────────────── */ -.bd-device__screen::after { - content: ''; - position: absolute; - left: 0; - width: 100%; - height: 2px; - background: linear-gradient(90deg, transparent, rgba(76,175,80,.18), transparent); - animation: da-scan 4s linear infinite; - pointer-events: none; - z-index: 3; -} - /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 900px) { .bd-stage { max-width: 360px; gap: 12px; } @@ -5314,8 +5415,7 @@ p:last-child { margin-bottom: 0; } .bd-splash__logo, .bd-ui, .bd-ui__brand-bar, - .bd-ui__content, - .bd-device__screen::after { animation: none !important; } + .bd-ui__content { animation: none !important; } /* Static fallback: show branded UI */ .bd-splash { opacity: 0; } .bd-ui { opacity: 1; } diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 3afd596..c9e597c 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1663,9 +1663,12 @@ function oribi_render_platform_row( $a ) { $bd .= '
'; $bd .= '
'; $bd .= '
'; - $bd .= '
'; - $bd .= '
'; - $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; $bd .= '
'; $bd .= '
'; $bd .= ''; @@ -1683,9 +1686,18 @@ function oribi_render_platform_row( $a ) { $bd .= '
'; $bd .= '
'; $bd .= '
'; - $bd .= '
'; - $bd .= '
'; - $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; $bd .= '
'; $bd .= '
'; $bd .= ''; @@ -1704,9 +1716,15 @@ function oribi_render_platform_row( $a ) { $bd .= '
'; $bd .= '
'; $bd .= '
'; - $bd .= '
'; - $bd .= '
'; - $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; + $bd .= '
'; $bd .= '
'; $bd .= '
'; $bd .= '';