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

Sync: update camera animation subjects to include shoe, food, and laptop

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 18:00:51 -05:00
parent ce163d25e3
commit cfb216f73e
2 changed files with 73 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3853,7 +3853,7 @@ p:last-child { margin-bottom: 0; }
background-size: 18px 18px;
}
/* ── Shared subject shapes ── */
/* ── Rotating product items: shoe, food, laptop ── */
.cam-subject {
position: absolute;
inset: 0;
@@ -3862,29 +3862,77 @@ p:last-child { margin-bottom: 0; }
justify-content: center;
opacity: 0;
}
.cam-subject::before {
.cam-subject::before,
.cam-subject::after {
content: '';
display: block;
border-radius: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.cam-subject--1 { animation: cam-subject-1 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--1::before {
width: 40px; height: 58px;
background: linear-gradient(135deg, #064e3b 0%, #4ade80 100%);
box-shadow: 0 0 18px rgba(74,222,128,.4);
.cam-subject--shoe { animation: cam-subject-1 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--shoe::before {
width: 76px;
height: 28px;
border-radius: 16px 20px 10px 14px;
background: linear-gradient(145deg, #312e81 0%, #4f46e5 45%, #818cf8 100%);
box-shadow:
0 0 14px rgba(129,140,248,.25),
inset 0 -2px 0 rgba(0,0,0,.22),
inset 0 2px 0 rgba(255,255,255,.18);
}
.cam-subject--2 { animation: cam-subject-2 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--2::before {
width: 32px; height: 68px;
background: linear-gradient(160deg, #78350f 0%, #fbbf24 100%);
border-radius: 6px 6px 12px 12px;
box-shadow: 0 0 18px rgba(251,191,36,.35);
.cam-subject--shoe::after {
width: 80px;
height: 8px;
border-radius: 999px;
background: #e5e7eb;
transform: translate(-50%, calc(-50% + 13px));
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
.cam-subject--3 { animation: cam-subject-3 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--3::before {
width: 74px; height: 50px;
background: linear-gradient(135deg, #1e1b4b 0%, #818cf8 100%);
box-shadow: 0 0 18px rgba(129,140,248,.35);
.cam-subject--food { animation: cam-subject-2 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--food::before {
width: 68px;
height: 46px;
border-radius: 22px 22px 14px 14px;
background:
linear-gradient(to bottom,
#fbbf24 0 34%,
#65a30d 34% 43%,
#7c2d12 43% 60%,
#f59e0b 60% 100%);
box-shadow:
0 0 14px rgba(251,191,36,.28),
inset 0 1px 0 rgba(255,255,255,.35);
}
.cam-subject--food::after {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255,255,255,.26);
transform: translate(calc(-50% - 14px), calc(-50% - 10px));
}
.cam-subject--laptop { animation: cam-subject-3 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--laptop::before {
width: 74px;
height: 44px;
border-radius: 6px;
background:
linear-gradient(165deg, #0f172a 0%, #1e293b 100%);
border: 2px solid #94a3b8;
box-shadow:
0 0 16px rgba(148,163,184,.25),
inset 0 0 0 2px rgba(15,23,42,.7);
}
.cam-subject--laptop::after {
width: 90px;
height: 10px;
border-radius: 4px;
background: linear-gradient(180deg, #d1d5db, #9ca3af);
transform: translate(-50%, calc(-50% + 28px));
box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/* Flash overlay */
@@ -4331,10 +4379,10 @@ p:last-child { margin-bottom: 0; }
/* ── Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
.cam-subject--2, .cam-subject--3,
.cam-subject--food, .cam-subject--laptop,
.cam-flash-overlay,
.pc-print--2, .pc-print--3 { animation: none !important; opacity: 0 !important; }
.cam-subject--1 { animation: none !important; opacity: 1 !important; }
.cam-subject--shoe { animation: none !important; opacity: 1 !important; }
.pc-shutter-btn, .pc-flash-unit::after,
.vc-lens-barrel, .vc-rec-light { animation: none !important; }
.pc-print--1 {

6
theme/blocks/index.php
View File

@@ -1376,9 +1376,9 @@ function oribi_render_camera_animation() {
</div>
<div class="cam-scene">
<div class="cam-subject cam-subject--1"></div>
<div class="cam-subject cam-subject--2"></div>
<div class="cam-subject cam-subject--3"></div>
<div class="cam-subject cam-subject--shoe"></div>
<div class="cam-subject cam-subject--food"></div>
<div class="cam-subject cam-subject--laptop"></div>
<div class="cam-flash-overlay"></div>
<div class="cam-vid-overlay"></div>
</div>