  
  
<!-- blue=nav color,light-bg=center body color,text=box text color
-->
	root {
  --blue: white;
  --gold: #d4af37;
  --light-bg: #f9f9f9;
  --text: #333;
  --font: 'Noto Sans TC', sans-serif;
}
			
body {margin:0;font-family:var(--font);background:white;color:var(--text);}
.navbar {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background:var(--blue);color:white;padding:10px 20px;}
.logo img {height:40px;margin-right:10px;}
nav a {color:white;text-decoration:none;margin:0 6px;font-size:14px;}
nav a:hover {color:var(--gold);}
.hero {position:relative;text-align:center;color:white;}
.hero-img {width:100%;height:auto;object-fit:cover;}
.hero-content {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.hero h1 {font-size:26px;margin-bottom:10px;}
.hero p {font-size:16px;margin-bottom:20px;}
.btn {background:var(--gold);color:var(--blue);padding:10px 24px;border-radius:30px;text-decoration:none;font-weight:bold;}
.products {padding:40px 10px;text-align:center;background:var(--light-bg);}
.card-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.card {background:white;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);width:90%;max-width:260px;}
.card img {width:100%;height:160px;object-fit:cover;}
.contact {text-align:center;padding:40px 20px;background:var(--blue);color:white;}
footer {background:white;color:white;text-align:center;padding:10px;font-size:13px;}
		nav a {
  color: #7E3D76; /* nav 文字顏色這裡改成你想要的顏色，例如金色 */
			
}.logo span {
  color: #7E3D76; /*span 文字顏色文字顏色 香檳金 */
}
		/* ====== PURE CSS Infinite Marquee ====== */
#featured.marquee {
  padding: 28px 0 10px; background: #fff;
}
#featured .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
#featured .section-title {
  font-size: 20px; margin: 0 0 12px; color: #7E3D76; letter-spacing: .04em;
}

/* 外框：隱藏捲動條，兩側做漸層遮罩 */
.marquee-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 18px;
  background: #fafafa;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  padding: 12px 0;
  /* 邊緣淡出（支援性佳的瀏覽器會用到） */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* 內容軌道：兩組相同清單首尾串接，靠動畫橫移 */
.marquee-rail {
  display: flex;
  width: max-content;
  gap: 16px;
  /* 連續位移動畫（速度靠 duration 控制） */
  animation: marquee-move var(--marquee-duration, 24s) linear infinite;
}

/* 滑鼠移入暫停（行動裝置不影響） */
.marquee-viewport:hover .marquee-rail {
  animation-play-state: paused;
}

/* 每張卡片 */
.marquee-card {
  flex: 0 0 auto;
  width: clamp(220px, 36vw, 360px);
  height: clamp(130px, 22vw, 220px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  background: #eee;
  display: block;
}
.marquee-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.marquee-card:hover img { transform: scale(1.035); }

/* 進度條（純視覺；純 CSS 版只做裝飾，不跟實際進度綁定） */
.marquee-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(126,61,118,.18);
}
.marquee-bar::after {
  content: ""; display: block; height: 100%;
  width: 35%; background: var(--marquee-progress, #7E3D76);
  animation: marquee-bar var(--marquee-duration, 24s) linear infinite;
  border-radius: 0 2px 2px 0;
}

/* 速度快捷：.speed-1 / .speed-2 / .speed-4（改動畫時間） */
.marquee-viewport.speed-1 { --marquee-duration: 24s; }
.marquee-viewport.speed-2 { --marquee-duration: 16s; }
.marquee-viewport.speed-4 { --marquee-duration: 10s; }

/* 方向：.reverse 可反向 */
.marquee-viewport.reverse .marquee-rail { animation-direction: reverse; }

/* 動畫定義：把「一半寬度」位移出去（因為我們放了兩組一樣的內容） */
@keyframes marquee-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 走完一半剛好無縫 */
}

/* 進度條動畫（裝飾用） */
@keyframes marquee-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* 行動微調 */
@media (max-width: 560px) {
  .marquee-viewport { padding: 8px 0; }
}

/* 無障礙：使用者偏好減少動態時停用（保留靜態清單） */
@media (prefers-reduced-motion: reduce) {
  .marquee-rail { animation: none !important; }
  .marquee-bar::after { animation: none !important; }
}

/* ==== Products 卡片：滑鼠移入「扶起」效果 ==== */
.products .card {
  position: relative;
  border-radius: 12px;
  overflow: hidden; /* 讓圖片放大不會溢出 */
  transform: translateY(0);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform, box-shadow;
  cursor: pointer; /* 滑過時更像可互動 */
}

/* 上浮 + 陰影加深 */
.products .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.10);
}

/* 圖片微上抬 + 輕微放大 */
.products .card img {
  transform: translateY(0) scale(1);
  transition: transform .45s ease;
  will-change: transform;
}

.products .card:hover img {
  transform: translateY(-6px) scale(1.035);
}

/* 無鍵盤陷阱：圖片整塊連結聚焦也給同樣扶起效果 */
.products .card a {
  display: block; /* 確保可點區域是整塊圖片 */
  outline: none;
}
.products .card a:focus-visible,
.products .card a:focus-visible img,
.products .card:focus-within {
  outline: 2px solid rgba(126,61,118,.5);
  outline-offset: 4px;
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.10);
}
.products .card a:focus-visible img {
  transform: translateY(-6px) scale(1.035);
}

/* 使用者偏好減少動效時：保留靜態 */
@media (prefers-reduced-motion: reduce) {
  .products .card,
  .products .card img {
    transition: none !important;
  }
  .products .card:hover,
  .products .card:hover img {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
}