OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Sync: add promotional animation styles and integrate into device rendering

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 17:53:14 -05:00
parent 80b36032e8
commit f9f15708e3
2 changed files with 97 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
theme/assets/css/main.css
View File

@@ -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 ──────────────────────────── */

13
theme/blocks/index.php
View File

@@ -1493,13 +1493,14 @@ function oribi_render_platform_row( $a ) {
}
$visual_cls = 'platform-visual has-img';
} elseif ( ! empty( $a['deviceAnim'] ) ) {
$da_screen = '<div class="da-screen"><div class="da-promo"><div class="da-promo__top"><span class="da-promo__dot"></span><span class="da-promo__brand"></span></div><div class="da-promo__hero"></div><div class="da-promo__row"><span class="da-promo__line da-promo__line--lg"></span><span class="da-promo__line da-promo__line--sm"></span></div><div class="da-promo__row"><span class="da-promo__line da-promo__line--md"></span><span class="da-promo__line da-promo__line--xs"></span></div><div class="da-promo__ticker"><span class="da-promo__chip"></span><span class="da-promo__chip"></span><span class="da-promo__chip"></span></div></div></div>';
$da = '<div class="da-stage" aria-hidden="true">';
$da .= '<div class="da-device da-tablet"><div class="da-body"><div class="da-screen"></div></div><span class="da-label">Tablet</span></div>';
$da .= '<div class="da-device da-monitor-sm"><div class="da-body"><div class="da-screen"></div></div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Small Monitor</span></div>';
$da .= '<div class="da-device da-monitor-lg"><div class="da-body"><div class="da-screen"></div></div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Large Monitor</span></div>';
$da .= '<div class="da-device da-tv"><div class="da-body"><div class="da-screen"></div></div><div class="da-feet"><div class="da-foot"></div><div class="da-foot"></div></div><span class="da-label">TV</span></div>';
$da .= '<div class="da-device da-projector"><div class="da-proj-layout"><div class="da-proj-body"><div class="da-lens"></div></div><div class="da-beam"></div><div class="da-proj-screen"><div class="da-screen"></div></div></div><span class="da-label">Projector</span></div>';
$da .= '<div class="da-device da-vwall"><div class="da-vwall-grid"><div class="da-panel"><div class="da-screen"></div></div><div class="da-panel"><div class="da-screen"></div></div><div class="da-panel"><div class="da-screen"></div></div><div class="da-panel"><div class="da-screen"></div></div></div><span class="da-label">Video Wall</span></div>';
$da .= '<div class="da-device da-tablet"><div class="da-body">' . $da_screen . '</div><span class="da-label">Tablet</span></div>';
$da .= '<div class="da-device da-monitor-sm"><div class="da-body">' . $da_screen . '</div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Small Monitor</span></div>';
$da .= '<div class="da-device da-monitor-lg"><div class="da-body">' . $da_screen . '</div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Large Monitor</span></div>';
$da .= '<div class="da-device da-tv"><div class="da-body">' . $da_screen . '</div><div class="da-feet"><div class="da-foot"></div><div class="da-foot"></div></div><span class="da-label">TV</span></div>';
$da .= '<div class="da-device da-projector"><div class="da-proj-layout"><div class="da-proj-body"><div class="da-lens"></div></div><div class="da-beam"></div><div class="da-proj-screen">' . $da_screen . '</div></div><span class="da-label">Projector</span></div>';
$da .= '<div class="da-device da-vwall"><div class="da-vwall-grid"><div class="da-panel">' . $da_screen . '</div><div class="da-panel">' . $da_screen . '</div><div class="da-panel">' . $da_screen . '</div><div class="da-panel">' . $da_screen . '</div></div><span class="da-label">Video Wall</span></div>';
$da .= '</div>';
$visual_html = $da;
$visual_cls = 'platform-visual has-anim';