LED 警示燈拖拉模擬器（MVP）
<style id=”custom-brand-css”>
:root{
–brand:#2a9d3d; –brand-d:#1f7a2e;
–r:18px; –shadow:0 10px 28px rgba(0,0,0,.08);
}
/* === 跑馬燈（大字，純 CSS） === */
.cbz-marquee{
–bg:#0f1f0f; –fg:#fff; –size:clamp(28px,5vw,60px);
–speed:26s; –gap:48px; –weight:800; –padY:18px; –brand:var(–brand);
background:var(–bg); color:var(–fg); overflow:hidden; padding:var(–padY) 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.cbz-marquee .track{display:flex;width:max-content;gap:var(–gap);white-space:nowrap;animation:cbz-scroll var(–speed) linear infinite}
.cbz-marquee:hover .track{animation-play-state:paused}
.cbz-marquee .item{font-size:var(–size);font-weight:var(–weight);line-height:1.1;display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.cbz-marquee .dot{width:.45em;height:.45em;border-radius:999px;background:var(–brand);display:inline-block;box-shadow:0 0 0 .18em rgba(42,157,61,.25)}
.cbz-marquee .tag{font-size:clamp(14px,1.4vw,18px);font-weight:700;padding:.28em .6em;border:2px solid currentColor;border-radius:999px;line-height:1;opacity:.9}
.cbz-marquee.reverse .track{animation-direction:reverse}
@keyframes cbz-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cbz-marquee .track{animation:none}}
/* === 三卡片（純 CSS） === */
.cbz-3cards{max-width:1200px;margin:32px auto;padding:0 16px}
.cbz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1024px){.cbz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.cbz-grid{grid-template-columns:1fr}}
.cbz-card{position:relative;display:block;border-radius:var(–r);overflow:clip;background:#fff;border:1px solid #eee;box-shadow:var(–shadow);text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.cbz-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.cbz-media{aspect-ratio:4/3;overflow:hidden}
.cbz-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.cbz-card:hover .cbz-media img{transform:scale(1.06)}
.cbz-card::after{content:””;position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);transform:translateX(-120%);transition:transform .9s}
.cbz-card:hover::after{transform:translateX(120%)}
.cbz-content{padding:16px}
.cbz-title{margin:0 0 6px;font-size:1.1rem;line-height:1.3}
.cbz-desc{margin:0 0 14px;color:#666}
.cbz-cta{display:inline-block;padding:.55rem 1rem;border-radius:999px;background:var(–brand);color:#fff;font-weight:700;line-height:1}
.cbz-cta:hover{background:var(–brand-d)}
</style>
<section class=”cbz-marquee”>
<div class=”wrap” style=”display:flex;”>
<div class=”track”>
<a class=”item” href=”/collections/durian”><span class=”dot” aria-hidden=”true”></span> 金枕榴槤產地直送 <span class=”tag”>當季</span></a>
<a class=”item” href=”/pages/cold-chain”><span class=”dot” aria-hidden=”true”></span> 全程冷鏈｜新鮮到家</a>
<a class=”item” href=”/pages/quality”><span class=”dot” aria-hidden=”true”></span> 批批檢驗｜安心把關</a>
<a class=”item” href=”/collections/promo”><span class=”dot” aria-hidden=”true”></span> 本週限定｜下單再折 <span class=”tag”>優惠</span></a>
</div>
<div class=”track” aria-hidden=”true”>
<!– 重複一份，讓無縫循環 –>
<a class=”item” href=”/collections/durian”><span class=”dot”></span> 金枕榴槤產地直送 <span class=”tag”>當季</span></a>
<a class=”item” href=”/pages/cold-chain”><span class=”dot”></span> 全程冷鏈｜新鮮到家</a>
<a class=”item” href=”/pages/quality”><span class=”dot”></span> 批批檢驗｜安心把關</a>
<a class=”item” href=”/collections/promo”><span class=”dot”></span> 本週限定｜下單再折 <span class=”tag”>優惠</span></a>
</div>
</div>
</section>
<section class=”cbz-3cards”>
<div class=”cbz-grid”>
<a class=”cbz-card” href=”/collections/durian”>
<figure class=”cbz-media”><img src=”https://picsum.photos/seed/durian/1200/900″ alt=”金枕榴槤：泰國直送，冷鏈保鮮” loading=”lazy”></figure>
<div class=”cbz-content”><h3 class=”cbz-title”>金枕榴槤｜產地直送</h3><p class=”cbz-desc”>尖竹汶產地控管，批批檢驗，冷鏈到府。</p><span class=”cbz-cta”>立即選購</span></div>
</a>
<a class=”cbz-card” href=”/collections/mango”>
<figure class=”cbz-media”><img src=”https://picsum.photos/seed/mango/1200/900″ alt=”愛文芒果：香甜多汁” loading=”lazy”></figure>
<div class=”cbz-content”><h3 class=”cbz-title”>愛文芒果｜香甜多汁</h3><p class=”cbz-desc”>契作分級，甜度穩定，厚實果肉。</p><span class=”cbz-cta”>看更多</span></div>
</a>
<a class=”cbz-card” href=”/pages/cold-chain”>
<figure class=”cbz-media”><img src=”https://picsum.photos/seed/cold/1200/900″ alt=”全程冷鏈：新鮮到家” loading=”lazy”></figure>
<div class=”cbz-content”><h3 class=”cbz-title”>全程冷鏈｜新鮮到家</h3><p class=”cbz-desc”>低溫分級、真空包裝與溫控物流。</p><span class=”cbz-cta”>了解流程</span></div>
</a>
</div>
</section>
