diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index f48348c..bb2d418 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -3346,6 +3346,7 @@ p:last-child { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════════════ CAMERA ANIMATOR (.platform-visual.has-camera) + Photo camera (left) + product scene (centre) + VHS camcorder on tripod (right) ══════════════════════════════════════════════════════════════════════════════ */ .platform-visual.has-camera { background: none !important; @@ -3361,29 +3362,31 @@ p:last-child { margin-bottom: 0; } .cam-stage { display: flex; - flex-direction: column; - align-items: center; - gap: 0; + flex-direction: row; + align-items: flex-end; + justify-content: center; + gap: 10px; + padding-bottom: 4px; } -/* ── Product scene (what the camera is photographing) ── */ +/* ── Product scene (between the two cameras) ── */ .cam-scene { - width: 240px; - height: 110px; + width: 150px; + height: 140px; background: var(--color-bg-alt, #1a1a1a); border: 1px solid var(--color-border, #333); - border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0; - border-bottom: none; + border-radius: 4px; position: relative; overflow: hidden; flex-shrink: 0; - /* subtle grid lines on the backdrop */ + align-self: center; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); - background-size: 24px 24px; + background-size: 20px 20px; } +/* ── Shared subject shapes ── */ .cam-subject { position: absolute; inset: 0; @@ -3397,385 +3400,470 @@ p:last-child { margin-bottom: 0; } display: block; border-radius: 8px; } - -/* Product 1: tall box — tech/electronics (green) */ -.cam-subject--1 { - animation: cam-subject-1 9s ease-in-out infinite; -} +.cam-subject--1 { animation: cam-subject-1 9s ease-in-out infinite; } .cam-subject--1::before { - width: 52px; height: 76px; + width: 42px; height: 62px; background: linear-gradient(135deg, #064e3b 0%, #4ade80 100%); - box-shadow: 0 0 24px rgba(74,222,128,.35); -} - -/* Product 2: wide bottle — retail (amber) */ -.cam-subject--2 { - animation: cam-subject-2 9s ease-in-out infinite; + box-shadow: 0 0 18px rgba(74,222,128,.3); } +.cam-subject--2 { animation: cam-subject-2 9s ease-in-out infinite; } .cam-subject--2::before { - width: 44px; height: 88px; + width: 34px; height: 72px; background: linear-gradient(160deg, #78350f 0%, #fbbf24 100%); border-radius: 6px 6px 12px 12px; - box-shadow: 0 0 24px rgba(251,191,36,.3); -} - -/* Product 3: wide device/tablet — tech (indigo) */ -.cam-subject--3 { - animation: cam-subject-3 9s ease-in-out infinite; + box-shadow: 0 0 18px rgba(251,191,36,.25); } +.cam-subject--3 { animation: cam-subject-3 9s ease-in-out infinite; } .cam-subject--3::before { - width: 92px; height: 64px; + width: 78px; height: 54px; background: linear-gradient(135deg, #1e1b4b 0%, #818cf8 100%); - box-shadow: 0 0 24px rgba(129,140,248,.3); + box-shadow: 0 0 18px rgba(129,140,248,.25); } -/* ── Flash overlay ── */ +/* Flash overlay (triggered by photo camera) */ .cam-flash-overlay { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; - border-radius: inherit; animation: cam-flash-pulse 9s linear infinite; } +/* CRT-style scanlines (video cam effect) */ +.cam-vid-overlay { + position: absolute; + inset: 0; + background: repeating-linear-gradient( + to bottom, + transparent 0px, transparent 3px, + rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px + ); + pointer-events: none; + border-radius: inherit; +} -/* ── Camera body ── */ -.cam-body { +/* ══════════════════════════════════════════ + PHOTO CAMERA (compact / point-and-shoot) + ══════════════════════════════════════════ */ +.pc-wrap { display: flex; flex-direction: column; - align-items: flex-start; - width: 240px; + align-items: center; flex-shrink: 0; - filter: drop-shadow(0 10px 24px rgba(0,0,0,.65)); + filter: drop-shadow(0 8px 22px rgba(0,0,0,.75)); } - -.cam-top { +.pc-body { + width: 94px; display: flex; - align-items: flex-end; - width: 100%; - height: 36px; - background: #1e1e1e; - border-radius: 0 4px 0 0; - border: 1px solid #404040; + flex-direction: column; + position: relative; +} +/* Hot-shoe flash unit on top */ +.pc-flash-unit { + width: 32px; + height: 9px; + background: #252525; + border: 1px solid #444; border-bottom: none; - border-left: none; + border-radius: 2px 2px 0 0; + margin-left: 8px; position: relative; } - -.cam-hump { - width: 72px; - height: 36px; - background: #1e1e1e; - border-left: 1px solid #404040; - border-top: 1px solid #404040; - border-radius: 0 4px 0 0; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.cam-dial { - width: 20px; - height: 20px; - border-radius: 50%; - background: conic-gradient(#2a2a2a 0deg, #484848 60deg, #2a2a2a 120deg, #484848 180deg, #2a2a2a 240deg, #484848 300deg, #2a2a2a 360deg); - border: 1px solid #555; -} - -.cam-shutter-btn { +.pc-flash-unit::after { + content: ''; position: absolute; - right: 16px; - top: 8px; - width: 20px; - height: 20px; - background: #2c2c2c; + top: 2px; left: 4px; right: 4px; bottom: 2px; + background: #ddddb8; + border-radius: 1px; + animation: pc-flash-glow 9s linear infinite; +} +/* Top strip */ +.pc-top { + width: 100%; + height: 17px; + background: #252525; + border-radius: 3px 3px 0 0; + border: 1px solid #3e3e3e; + border-bottom: none; + display: flex; + align-items: center; + padding: 0 8px; + position: relative; +} +.pc-shutter-btn { + position: absolute; + top: -7px; right: 12px; + width: 13px; height: 13px; + background: #303030; border-radius: 50%; border: 1px solid #555; - display: flex; - align-items: center; - justify-content: center; - animation: cam-shutter-click 9s linear infinite; - transform-origin: center bottom; + animation: pc-shutter 9s linear infinite; + transform-origin: center; } - -.cam-shutter-inner { - width: 11px; - height: 11px; - background: radial-gradient(circle at 40% 40%, #555, #2a2a2a); - border-radius: 50%; - border: 1px solid #606060; +.pc-viewfinder { + width: 11px; height: 7px; + background: #111; + border: 1px solid #555; + border-radius: 1px; + margin-left: auto; } - -.cam-front { +/* Front face */ +.pc-front { width: 100%; - height: 90px; - background: #222; - border: 1px solid #404040; + height: 54px; + background: #1e1e1e; + border: 1px solid #3e3e3e; border-top-color: #555; - border-radius: 0 0 6px 6px; + border-radius: 0 0 4px 4px; display: flex; align-items: center; - position: relative; - padding: 0 12px 0 0; + padding: 0 10px; + gap: 10px; } - -/* Grip ridge on left edge */ -.cam-grip-ridge { - width: 20px; - height: 100%; - background: #1a1a1a; - border-right: 1px solid #3c3c3c; - border-radius: 0 0 0 6px; - flex-shrink: 0; -} - -/* Lens assembly */ -.cam-lens-assembly { - width: 74px; - height: 74px; +/* Lens */ +.pc-lens-ring { + width: 40px; height: 40px; border-radius: 50%; background: #111; border: 3px solid #383838; - box-shadow: 0 0 0 2px #222, inset 0 0 12px rgba(0,0,0,.9); + box-shadow: 0 0 0 2px #181818, inset 0 0 8px rgba(0,0,0,1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; - margin-left: 16px; } - -.cam-lens-barrel { - width: 58px; - height: 58px; +.pc-lens-glass { + width: 28px; height: 28px; border-radius: 50%; - background: #18182e; - border: 2px solid #2a3a6a; - display: flex; - align-items: center; - justify-content: center; - animation: cam-lens-breathe 3s ease-in-out infinite; -} - -.cam-lens-glass { - width: 44px; - height: 44px; - border-radius: 50%; - background: radial-gradient(circle at 32% 32%, #1a6ad6 0%, #0b1e5c 45%, #000d1f 100%); - border: 1px solid rgba(100,160,255,.2); + background: radial-gradient(circle at 30% 30%, #1a6ad6 0%, #0a1844 50%, #000b1a 100%); position: relative; overflow: hidden; } - -.cam-reflection { +.pc-lens-reflex { position: absolute; - top: 6px; - left: 6px; - width: 14px; - height: 10px; - background: rgba(255,255,255,.18); + top: 3px; left: 3px; + width: 8px; height: 6px; + background: rgba(255,255,255,.22); border-radius: 50%; - transform: rotate(-25deg); + transform: rotate(-20deg); } +/* Right side grip */ +.pc-grip { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + align-items: flex-end; +} +.pc-grip::before, .pc-grip::after { + content: ''; + display: block; + height: 4px; + width: 100%; + background: #292929; + border: 1px solid #3a3a3a; + border-radius: 1px; +} +/* Polaroid prints */ +.pc-prints { + position: relative; + width: 94px; + height: 58px; + flex-shrink: 0; +} +.pc-print { + position: absolute; + width: 56px; height: 62px; + background: #f3eedd; + border-radius: 2px; + box-shadow: 0 5px 14px rgba(0,0,0,.6); + opacity: 0; +} +.pc-print__img { + position: absolute; + top: 6px; left: 6px; right: 6px; + height: 40px; + border-radius: 1px; +} +.pc-print--1 { left: 2px; top: 0; transform-origin: bottom center; animation: pc-print-1 9s linear infinite; } +.pc-print--2 { left: 19px; top: 0; transform-origin: bottom center; animation: pc-print-2 9s linear infinite; } +.pc-print--3 { left: 36px; top: 0; transform-origin: bottom center; animation: pc-print-3 9s linear infinite; } +.pc-print--1 .pc-print__img { background: linear-gradient(135deg, #064e3b, #4ade80); } +.pc-print--2 .pc-print__img { background: linear-gradient(160deg, #78350f, #fbbf24); } +.pc-print--3 .pc-print__img { background: linear-gradient(135deg, #1e1b4b, #818cf8); } -/* Camera controls (LED + small buttons) */ -.cam-controls { - margin-left: auto; +/* ══════════════════════════════════════════ + VIDEO CAMERA ON TRIPOD (retro VHS era) + Lens barrel faces LEFT (toward the scene) + ══════════════════════════════════════════ */ +.vc-wrap { display: flex; flex-direction: column; align-items: center; - gap: 7px; -} - -.cam-led { - width: 7px; - height: 7px; - border-radius: 50%; - background: #4ade80; - box-shadow: 0 0 6px #4ade80; - animation: cam-led-blink 9s linear infinite; -} - -.cam-btn { - width: 14px; - height: 7px; - background: #2c2c2c; - border-radius: 2px; - border: 1px solid #444; -} - -/* ── Polaroid prints fanning out below camera ── */ -.cam-prints { - position: relative; - width: 240px; - height: 70px; flex-shrink: 0; + filter: drop-shadow(0 8px 22px rgba(0,0,0,.75)); } - -.cam-print { +.vc-camera { + display: flex; + flex-direction: column; + align-items: center; +} +/* Top carry handle */ +.vc-handle { + width: 60px; + height: 13px; + background: #242424; + border: 1px solid #3e3e3e; + border-radius: 8px 8px 0 0; + position: relative; + overflow: hidden; +} +.vc-handle::after { + content: ''; position: absolute; - width: 72px; - height: 78px; - background: #f4efdf; + left: 8px; top: 3px; right: 8px; bottom: 3px; + background: repeating-linear-gradient(90deg, #2c2c2c 0, #2c2c2c 3px, #333 3px, #333 6px); + border-radius: 3px; +} +/* Main body */ +.vc-body { + width: 100px; + height: 55px; + background: #1e1e1e; + border: 1px solid #3e3e3e; + border-top-color: #555; + border-radius: 0 4px 4px 0; + position: relative; + display: flex; + align-items: center; +} +/* Lens barrel — extends LEFT toward the scene */ +.vc-lens-barrel { + position: absolute; + left: -32px; + top: 50%; + transform: translateY(-50%); + width: 38px; height: 38px; + border-radius: 50%; + background: #181818; + border: 2px solid #363636; + box-shadow: 0 0 0 2px #131313, inset 0 0 8px rgba(0,0,0,.9); + display: flex; + align-items: center; + justify-content: center; + animation: vc-lens-zoom 4s ease-in-out infinite; +} +.vc-lens-tip { + width: 26px; height: 26px; + border-radius: 50%; + background: #101018; + border: 1px solid #2a3a6a; + display: flex; + align-items: center; + justify-content: center; +} +.vc-lens-glass { + width: 17px; height: 17px; + border-radius: 50%; + background: radial-gradient(circle at 30% 30%, #1a6ad6 0%, #0a0f2e 55%, #000510 100%); + position: relative; + overflow: hidden; +} +.vc-lens-reflex { + position: absolute; + top: 2px; left: 2px; + width: 6px; height: 4px; + background: rgba(255,255,255,.22); + border-radius: 50%; + transform: rotate(-20deg); +} +/* Top rail detail */ +.vc-top-rail { + position: absolute; + top: 0; left: 8px; right: 8px; + height: 4px; + background: #282828; + border: 1px solid #3e3e3e; + border-top: none; + border-radius: 0 0 2px 2px; +} +/* REC indicator */ +.vc-rec-light { + position: absolute; + top: 7px; left: 18px; + width: 7px; height: 7px; + border-radius: 50%; + background: #ef4444; + box-shadow: 0 0 7px #ef4444; + animation: vc-rec-blink 1.4s ease-in-out infinite; +} +/* Eyepiece — extends RIGHT */ +.vc-eyepiece { + position: absolute; + right: -15px; + top: 50%; + transform: translateY(-50%); + width: 15px; height: 18px; + background: #1a1a1a; + border: 1px solid #3c3c3c; + border-radius: 0 4px 4px 0; + display: flex; + align-items: center; + justify-content: center; +} +.vc-eyepiece::after { + content: ''; + width: 8px; height: 8px; + background: #08080e; + border-radius: 50%; + border: 1px solid #333; +} +/* Cassette door side detail */ +.vc-body::after { + content: ''; + position: absolute; + right: 6px; top: 8px; + width: 30px; height: 36px; + background: #191919; + border: 1px solid #363636; border-radius: 2px; - box-shadow: 0 6px 16px rgba(0,0,0,.55); - opacity: 0; } - -.cam-print__img { +/* ── Tripod ── */ +.vc-tripod { + display: flex; + flex-direction: column; + align-items: center; + width: 100px; +} +.vc-stem { + width: 6px; + height: 42px; + background: linear-gradient(to right, #282828, #383838, #282828); + border-radius: 2px; + margin-bottom: -2px; +} +.vc-legs { + display: flex; + justify-content: space-between; + align-items: flex-end; + width: 84px; + position: relative; + height: 30px; +} +.vc-leg { + width: 4px; height: 30px; + background: linear-gradient(to right, #252525, #373737); + border-radius: 0 0 2px 2px; + transform-origin: top center; +} +.vc-leg--l { transform: rotate(-20deg); } +.vc-leg--c { height: 22px; } +.vc-leg--r { transform: rotate(20deg); } +/* Leg cross-brace */ +.vc-legs::after { + content: ''; position: absolute; - top: 7px; - left: 7px; - right: 7px; - height: 52px; + top: 10px; left: 10px; right: 10px; + height: 2px; + background: #2e2e2e; border-radius: 1px; } -/* Print 1: left-leaning (green — product 1) */ -.cam-print--1 { - left: 24px; - top: 0; - transform-origin: bottom center; - animation: cam-print-1 9s linear infinite; -} -.cam-print--1 .cam-print__img { - background: linear-gradient(135deg, #064e3b, #4ade80); -} - -/* Print 2: center (amber — product 2) */ -.cam-print--2 { - left: 84px; - top: 0; - transform-origin: bottom center; - animation: cam-print-2 9s linear infinite; -} -.cam-print--2 .cam-print__img { - background: linear-gradient(160deg, #78350f, #fbbf24); -} - -/* Print 3: right-leaning (indigo — product 3) */ -.cam-print--3 { - left: 144px; - top: 0; - transform-origin: bottom center; - animation: cam-print-3 9s linear infinite; -} -.cam-print--3 .cam-print__img { - background: linear-gradient(135deg, #1e1b4b, #818cf8); -} - -/* ══ Keyframes (9 s cycle — 3 captures at 0 %, 33 %, 66 %) ══════════════ */ - -/* Subject cycling */ +/* ══ Keyframes (9 s, 3 captures at 0 %, 33 %, 66 %) ══════════════ */ @keyframes cam-subject-1 { - 0%, 30% { opacity: 1; } + 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes cam-subject-2 { - 0%, 30% { opacity: 0; } - 33%, 63% { opacity: 1; } - 66%, 100% { opacity: 0; } + 0%, 30% { opacity: 0; } + 33%, 63% { opacity: 1; } + 66%, 100% { opacity: 0; } } @keyframes cam-subject-3 { - 0%, 63% { opacity: 0; } + 0%, 63% { opacity: 0; } 66%, 100% { opacity: 1; } } - -/* White flash on capture */ @keyframes cam-flash-pulse { - 0% { opacity: 0; } - 0.5% { opacity: 0.85; } - 2.5% { opacity: 0; } - 33% { opacity: 0; } - 33.5% { opacity: 0.85; } - 35.5% { opacity: 0; } - 66% { opacity: 0; } - 66.5% { opacity: 0.85; } - 68.5% { opacity: 0; } - 100% { opacity: 0; } + 0% { opacity: 0; } 0.5% { opacity: 0.9; } 2.5% { opacity: 0; } + 33% { opacity: 0; } 33.5% { opacity: 0.9; } 35.5% { opacity: 0; } + 66% { opacity: 0; } 66.5% { opacity: 0.9; } 68.5% { opacity: 0; } + 100% { opacity: 0; } } - -/* Physical shutter press */ -@keyframes cam-shutter-click { - 0% { transform: scaleY(1); } - 0.4% { transform: scaleY(0.8) translateY(1px); } - 2% { transform: scaleY(1); } - 33% { transform: scaleY(1); } - 33.4% { transform: scaleY(0.8) translateY(1px); } - 35% { transform: scaleY(1); } - 66% { transform: scaleY(1); } - 66.4% { transform: scaleY(0.8) translateY(1px); } - 68% { transform: scaleY(1); } - 100% { transform: scaleY(1); } +/* Flash tube glows on capture */ +@keyframes pc-flash-glow { + 0% { background: #ddddb8; filter: brightness(1); } + 0.5% { background: #fff; filter: brightness(5); } + 2.5% { background: #ddddb8; filter: brightness(1); } + 33% { background: #ddddb8; filter: brightness(1); } + 33.5% { background: #fff; filter: brightness(5); } + 35.5% { background: #ddddb8; filter: brightness(1); } + 66% { background: #ddddb8; filter: brightness(1); } + 66.5% { background: #fff; filter: brightness(5); } + 68.5% { background: #ddddb8; filter: brightness(1); } + 100% { background: #ddddb8; filter: brightness(1); } } - -/* Lens focus breathe */ -@keyframes cam-lens-breathe { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.03); } +/* Shutter button press */ +@keyframes pc-shutter { + 0% { transform: scaleY(1); } + 0.4% { transform: scaleY(0.72) translateY(1px); } + 2% { transform: scaleY(1); } + 33% { transform: scaleY(1); } + 33.4% { transform: scaleY(0.72) translateY(1px); } + 35% { transform: scaleY(1); } + 66% { transform: scaleY(1); } + 66.4% { transform: scaleY(0.72) translateY(1px); } + 68% { transform: scaleY(1); } + 100% { transform: scaleY(1); } } - -/* LED: red flash on capture, green otherwise */ -@keyframes cam-led-blink { - 0% { background: #ef4444; box-shadow: 0 0 8px #ef4444; } - 1.5% { background: #4ade80; box-shadow: 0 0 6px #4ade80; } - 33% { background: #4ade80; box-shadow: 0 0 6px #4ade80; } - 33.3% { background: #ef4444; box-shadow: 0 0 8px #ef4444; } - 34.5% { background: #4ade80; box-shadow: 0 0 6px #4ade80; } - 66% { background: #4ade80; box-shadow: 0 0 6px #4ade80; } - 66.3% { background: #ef4444; box-shadow: 0 0 8px #ef4444; } - 67.5% { background: #4ade80; box-shadow: 0 0 6px #4ade80; } - 100% { background: #4ade80; box-shadow: 0 0 6px #4ade80; } +/* Polaroid ejects */ +@keyframes pc-print-1 { + 0% { opacity: 0; transform: rotate(-12deg) translateY(-18px); } + 1.5% { opacity: 1; } + 4% { opacity: 1; transform: rotate(-12deg) translateY(0); } + 95% { opacity: 1; transform: rotate(-12deg) translateY(0); } + 99% { opacity: 0; } 100% { opacity: 0; transform: rotate(-12deg) translateY(-18px); } } - -/* Polaroid eject — print 1 at 0 % */ -@keyframes cam-print-1 { - 0% { opacity: 0; transform: rotate(-14deg) translateY(-24px); } - 1.5% { opacity: 1; } - 4% { opacity: 1; transform: rotate(-14deg) translateY(0); } - 95% { opacity: 1; transform: rotate(-14deg) translateY(0); } - 99% { opacity: 0; } - 100% { opacity: 0; transform: rotate(-14deg) translateY(-24px); } -} - -/* Polaroid eject — print 2 at 33 % */ -@keyframes cam-print-2 { - 0%, 33% { opacity: 0; transform: rotate(-2deg) translateY(-24px); } +@keyframes pc-print-2 { + 0%, 33% { opacity: 0; transform: rotate(-2deg) translateY(-18px); } 34.5% { opacity: 1; } 37% { opacity: 1; transform: rotate(-2deg) translateY(0); } 95% { opacity: 1; transform: rotate(-2deg) translateY(0); } - 99% { opacity: 0; } - 100% { opacity: 0; transform: rotate(-2deg) translateY(-24px); } + 99% { opacity: 0; } 100% { opacity: 0; transform: rotate(-2deg) translateY(-18px); } } - -/* Polaroid eject — print 3 at 66 % */ -@keyframes cam-print-3 { - 0%, 66% { opacity: 0; transform: rotate(12deg) translateY(-24px); } +@keyframes pc-print-3 { + 0%, 66% { opacity: 0; transform: rotate(10deg) translateY(-18px); } 67.5% { opacity: 1; } - 70% { opacity: 1; transform: rotate(12deg) translateY(0); } - 95% { opacity: 1; transform: rotate(12deg) translateY(0); } - 99% { opacity: 0; } - 100% { opacity: 0; transform: rotate(12deg) translateY(-24px); } + 70% { opacity: 1; transform: rotate(10deg) translateY(0); } + 95% { opacity: 1; transform: rotate(10deg) translateY(0); } + 99% { opacity: 0; } 100% { opacity: 0; transform: rotate(10deg) translateY(-18px); } +} +/* VHS REC blink */ +@keyframes vc-rec-blink { + 0%, 45% { opacity: 1; } + 55%, 100% { opacity: 0.1; } +} +/* VHS lens zoom breathe */ +@keyframes vc-lens-zoom { + 0%, 100% { transform: translateY(-50%) scale(1); } + 50% { transform: translateY(-50%) scale(1.07); } } -/* ── Reduced-motion: freeze camera in resting state ── */ +/* ── Reduced-motion ── */ @media (prefers-reduced-motion: reduce) { .cam-subject--2, .cam-subject--3, .cam-flash-overlay, - .cam-print--2, .cam-print--3 { animation: none !important; opacity: 0 !important; } + .pc-print--2, .pc-print--3 { animation: none !important; opacity: 0 !important; } .cam-subject--1 { animation: none !important; opacity: 1 !important; } - .cam-shutter-btn, - .cam-lens-barrel, - .cam-led { animation: none !important; } - .cam-print--1 { + .pc-shutter-btn, .pc-flash-unit::after, + .vc-lens-barrel, .vc-rec-light { animation: none !important; } + .pc-print--1 { animation: none !important; opacity: 1 !important; - transform: rotate(-14deg) translateY(0) !important; + transform: rotate(-12deg) translateY(0) !important; } } -/* ── Dark-mode ── (already dark, just ensure border tokens apply) ── */ +/* ── Dark-mode border tokens ── */ [data-theme="dark"] .cam-scene { background-color: var(--color-bg-alt); border-color: var(--color-border); diff --git a/theme/blocks/editor.js b/theme/blocks/editor.js index e765480..4fda89c 100644 --- a/theme/blocks/editor.js +++ b/theme/blocks/editor.js @@ -1225,34 +1225,59 @@ reg('oribi/platform-row', { a.cameraAnim ? el('div', { className: 'platform-visual has-camera' }, el('div', { className: 'cam-stage', 'aria-hidden': 'true' }, - el('div', { className: 'cam-scene' }, - el('div', { className: 'cam-subject cam-subject--1' }), - el('div', { className: 'cam-flash-overlay' }) - ), - el('div', { className: 'cam-body' }, - el('div', { className: 'cam-top' }, - el('div', { className: 'cam-hump' }, el('div', { className: 'cam-dial' })), - el('div', { className: 'cam-shutter-btn' }, el('div', { className: 'cam-shutter-inner' })) - ), - el('div', { className: 'cam-front' }, - el('div', { className: 'cam-grip-ridge' }), - el('div', { className: 'cam-lens-assembly' }, - el('div', { className: 'cam-lens-barrel' }, - el('div', { className: 'cam-lens-glass' }, - el('div', { className: 'cam-reflection' }) - ) - ) + // Photo camera (left) + el('div', { className: 'pc-wrap' }, + el('div', { className: 'pc-body' }, + el('div', { className: 'pc-flash-unit' }), + el('div', { className: 'pc-top' }, + el('div', { className: 'pc-shutter-btn' }), + el('div', { className: 'pc-viewfinder' }) ), - el('div', { className: 'cam-controls' }, - el('div', { className: 'cam-led' }), - el('div', { className: 'cam-btn' }), - el('div', { className: 'cam-btn' }) + el('div', { className: 'pc-front' }, + el('div', { className: 'pc-lens-ring' }, + el('div', { className: 'pc-lens-glass' }, + el('div', { className: 'pc-lens-reflex' }) + ) + ), + el('div', { className: 'pc-grip' }) + ) + ), + el('div', { className: 'pc-prints' }, + el('div', { className: 'pc-print pc-print--1', style: { opacity: '1', transform: 'rotate(-12deg) translateY(0)' } }, + el('div', { className: 'pc-print__img' }) ) ) ), - el('div', { className: 'cam-prints' }, - el('div', { className: 'cam-print cam-print--1', style: { opacity: '1', transform: 'rotate(-14deg) translateY(0)' } }, - el('div', { className: 'cam-print__img' }) + // Centre scene + el('div', { className: 'cam-scene' }, + el('div', { className: 'cam-subject cam-subject--1' }), + el('div', { className: 'cam-flash-overlay' }), + el('div', { className: 'cam-vid-overlay' }) + ), + // Video camera on tripod (right) + el('div', { className: 'vc-wrap' }, + el('div', { className: 'vc-camera' }, + el('div', { className: 'vc-handle' }), + el('div', { className: 'vc-body' }, + el('div', { className: 'vc-lens-barrel' }, + el('div', { className: 'vc-lens-tip' }, + el('div', { className: 'vc-lens-glass' }, + el('div', { className: 'vc-lens-reflex' }) + ) + ) + ), + el('div', { className: 'vc-top-rail' }), + el('div', { className: 'vc-rec-light' }), + el('div', { className: 'vc-eyepiece' }) + ) + ), + el('div', { className: 'vc-tripod' }, + el('div', { className: 'vc-stem' }), + el('div', { className: 'vc-legs' }, + el('div', { className: 'vc-leg vc-leg--l' }), + el('div', { className: 'vc-leg vc-leg--c' }), + el('div', { className: 'vc-leg vc-leg--r' }) + ) ) ) ) diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 7df0f27..dfb7e9c 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1500,33 +1500,56 @@ function oribi_render_platform_row( $a ) { $visual_html = $ts; $visual_cls = 'platform-visual has-tv-stick'; } elseif ( ! empty( $a['cameraAnim'] ) ) { - $ca = '
'; // cam-scene + + // ── Right: retro VHS video camera on tripod ── + $ca .= '