/* ============================================================ Barlow Condensed — 英文小標籤用的窄體（自帶，Latin 子集，500/600） 設計稿 (*.dc.html) 用它排 kicker / READ MORE / VIEW ALL / 編號…等大寫標籤。 佈景各處的字堆已寫 "Barlow Condensed" 在最前面，載入後自動生效。 ============================================================ */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); } /* ============================================================ reveal.css — scroll-in animations (replaces WOW.js + animate.css) Hook class: .wow (kept for template compatibility) Direction classes kept: fadeInUp / fadeInDown / fadeInRight / zoomIn Driven by js/theme.js (IntersectionObserver). ============================================================ */ /* Base: hidden until revealed */ .wow { opacity: 0; animation-duration: .8s; animation-fill-mode: both; animation-play-state: paused; will-change: transform, opacity; } /* When JS is disabled or IO unsupported, don't hide content */ .no-reveal .wow { opacity: 1; animation: none; } /* Trigger */ .wow.is-visible { animation-play-state: running; } .wow.fadeInUp { animation-name: revealFadeInUp; } .wow.fadeInDown { animation-name: revealFadeInDown; } .wow.fadeInRight { animation-name: revealFadeInRight; } .wow.fadeInLeft { animation-name: revealFadeInLeft; } .wow.zoomIn { animation-name: revealZoomIn; } .wow.fadeIn { animation-name: revealFadeIn; } /* Standalone helpers used by mainvision inline script (.animated.fadeInDown etc.) */ .animated { animation-duration: .8s; animation-fill-mode: both; } .animated.fadeInDown { animation-name: revealFadeInDown; } .animated.fadeInUp { animation-name: revealFadeInUp; } .animated.fadeInRight{ animation-name: revealFadeInRight; } @keyframes revealFadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } } @keyframes revealFadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } } @keyframes revealFadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes revealFadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes revealZoomIn { from { opacity: 0; transform: scale3d(.85, .85, .85); } to { opacity: 1; transform: none; } } @keyframes revealFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wow, .animated { opacity: 1 !important; animation: none !important; transform: none !important; } } /* ============================================================ .mgrid / .mgrid-item — masonry plugin removed; render as a plain responsive flex grid (equal rows). Bottom spacing only. ============================================================ */ .mgrid > .mgrid-item { margin-bottom: 1.5rem; } /* ============================================================ Back-to-top button (replaces UItoTop plugin markup) #toTop styling still lives in css/ui.totop.css; this just handles the visible state toggled by js/theme.js ============================================================ */ #toTop.is-visible { display: block; } /* ============================================================ Horizontal product slider (replaces Owl Carousel) Faithful 2-up strip mirroring the old owl config (items:2, itemsMobile:1). Applied to #assos-item, #nc_product_block_new_product, #nc_product_block_best_product via .hscroll. Arrows + autoplay: js/theme.js. ============================================================ */ .hscroll { display: flex; gap: 6px; /* == old .item{margin:3px} gutter */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox — hide native bar, use dots */ } .hscroll::-webkit-scrollbar { display: none; } /* WebKit/Blink */ .hscroll > .item { scroll-snap-align: start; flex: 0 0 auto; width: 100%; /* < 480px: 1-up (owl itemsMobile) */ margin: 0; /* gutter handled by flex gap */ } @media (min-width: 480px) { .hscroll > .item { width: calc(50% - 3px); } /* 2-up */ } @media (min-width: 1200px) { #assos-item.hscroll > .item { width: calc(33.333% - 4px); } /* assoc: 3-up */ } /* Uniform card images so the 2-up row lines up cleanly (owl rows were ragged) */ /* NOTE: wr bid 35 (最新商品) no longer uses .hscroll — it's the Home Products scroller (.hp-*) in css/btp.css. These rules now cover the nc_product blocks only. */ #nc_product_block_new_product .thumbnails-product, #nc_product_block_best_product .thumbnails-product { aspect-ratio: 4 / 3; background: #f2f2f2; } #nc_product_block_new_product .thumbnails-product img, #nc_product_block_best_product .thumbnails-product img { width: 100%; height: 100%; object-fit: cover; } /* prev/next arrows — black square, edge-hung, vertically centred on the image (top offset set per-strip by js/theme.js: --hscroll-arrow-top) */ .hscroll-wrap { position: relative; } .hscroll-nav { position: absolute; top: var(--hscroll-arrow-top, 40%); transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; display: none; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; transition: background .2s, opacity .2s; } .hscroll-wrap.has-nav .hscroll-nav { display: flex; } .hscroll-nav:hover { background: #4555B9; } .hscroll-nav:disabled { opacity: .25; cursor: default; } .hscroll-nav-prev { left: -7px; } .hscroll-nav-next { right: -7px; } /* pagination dots (js/theme.js builds them; count follows the viewport) */ .hscroll-dots { display: none; justify-content: center; gap: 8px; margin-top: 14px; } .hscroll-wrap.has-nav .hscroll-dots { display: flex; } .hscroll-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #cfcfcf; cursor: pointer; transition: background .2s, transform .2s; } .hscroll-dot:hover { background: #999; } .hscroll-dot.is-active { background: #4555B9; transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .hscroll { scroll-behavior: auto; } } /* ============================================================ wr 商品目錄區塊 (bid 34) — themes/…/modules/wr/blocks/wr_block.html 設計稿：CADCH_00025A/WR Categories.dc.html 左欄。 （佈景不會自動掛載區塊同名 .css，故區塊樣式一律寫在本檔； 清單頁 wr_index.html 的樣式則內嵌在該樣板的