diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 626c1b3..b0aa6b1 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -2151,6 +2151,91 @@ p:last-child { margin-bottom: 0; } animation: da-scan 3s linear infinite; pointer-events: none; } + +.da-promo { + position: absolute; + inset: 0; + z-index: 1; + padding: 6% 7%; + display: flex; + flex-direction: column; + gap: 6%; +} + +.da-promo__top { + display: flex; + align-items: center; + gap: 6px; +} + +.da-promo__dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #f97316; + box-shadow: 0 0 6px rgba(249,115,22,.55); + animation: da-dot-pulse 2.8s ease-in-out infinite; +} + +.da-promo__brand { + width: 40%; + height: 5px; + border-radius: 999px; + background: linear-gradient(90deg, rgba(249,115,22,.95), rgba(251,191,36,.75)); +} + +.da-promo__hero { + height: 30%; + border-radius: 4px; + background: + linear-gradient(160deg, rgba(2,132,199,.38), rgba(15,23,42,.08) 58%), + linear-gradient(115deg, rgba(249,115,22,.42), rgba(249,115,22,.08) 62%); +} + +.da-promo__row { + display: flex; + align-items: center; + gap: 6px; +} + +.da-promo__line { + display: block; + height: 4px; + border-radius: 999px; + background: rgba(241,245,249,.70); +} + +.da-promo__line--lg { width: 56%; } +.da-promo__line--md { width: 46%; } +.da-promo__line--sm { width: 24%; background: rgba(74,222,128,.72); } +.da-promo__line--xs { width: 19%; background: rgba(249,115,22,.72); } + +.da-promo__ticker { + margin-top: auto; + display: flex; + align-items: center; + gap: 5px; + animation: da-ticker 6.5s linear infinite; +} + +.da-promo__chip { + width: 34%; + height: 8px; + border-radius: 999px; + background: linear-gradient(90deg, rgba(74,222,128,.72), rgba(56,189,248,.72)); + flex: 0 0 auto; +} + +@keyframes da-dot-pulse { + 0%, 100% { transform: scale(1); opacity: .92; } + 50% { transform: scale(1.22); opacity: 1; } +} + +@keyframes da-ticker { + 0% { transform: translateX(0); } + 50% { transform: translateX(-8%); } + 100% { transform: translateX(0); } +} /* Device label */ .da-label { display: block; @@ -2401,6 +2486,9 @@ p:last-child { margin-bottom: 0; } .da-vwall .da-panel:nth-child(2) .da-screen::after { animation-delay: -0.75s; } .da-vwall .da-panel:nth-child(3) .da-screen::after { animation-delay: -1.5s; } .da-vwall .da-panel:nth-child(4) .da-screen::after { animation-delay: -2.25s; } +.da-vwall .da-panel:nth-child(2) .da-promo { filter: hue-rotate(32deg); } +.da-vwall .da-panel:nth-child(3) .da-promo { filter: hue-rotate(-18deg); } +.da-vwall .da-panel:nth-child(4) .da-promo { filter: hue-rotate(58deg); } /* ── Responsive scale-down ─────────────────────── */ @media (max-width: 900px) { .da-device { transform: translate(-50%,-50%) scale(0.76); } @@ -2415,6 +2503,8 @@ p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .da-device { transition: none; } .da-screen::after { animation: none; } + .da-promo__dot, + .da-promo__ticker { animation: none; } } /* ── 10c. TV Stick Plug Animation ──────────────────────────── */ diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 1e5b8f7..1b5ad02 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1493,13 +1493,14 @@ function oribi_render_platform_row( $a ) { } $visual_cls = 'platform-visual has-img'; } elseif ( ! empty( $a['deviceAnim'] ) ) { + $da_screen = '
'; $da = ''; $visual_html = $da; $visual_cls = 'platform-visual has-anim';