:root { color-scheme: dark; --bg: #12131a; --surface: #1b1d27; --surface-2: #242632; --text: #f7f4f6; --muted: #aaa5ae; --line: rgba(255, 255, 255, .09); --radius: 18px; --max-width: 1120px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; } body::before { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; background: radial-gradient(circle at 85% 0, var(--brand-glow), transparent 28rem), radial-gradient(circle at 0 40%, rgba(108, 78, 255, .09), transparent 24rem); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select { color: inherit; font: inherit; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: .65rem; font-size: clamp(2rem, 7vw, 4.4rem); line-height: 1.08; letter-spacing: -.045em; } h2 { line-height: 1.2; letter-spacing: -.025em; } .article-card__cover { width: calc(100% + 2rem); max-width: none; height: 12rem; margin: -1rem -1rem 1rem; object-fit: cover; } .article-cover { width: 100%; max-height: 38rem; margin: 1.5rem 0 2.5rem; border-radius: var(--radius); object-fit: cover; } .error-page { width: min(100%, 720px); margin: 4rem auto; padding: clamp(2rem, 7vw, 4rem); border: 1px solid var(--line); border-radius: 24px; text-align: center; background: radial-gradient(circle at 50% 0, var(--brand-glow), transparent 60%), var(--surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .4); } .error-page__code { margin-bottom: 1rem; color: var(--brand); font-size: clamp(4rem, 18vw, 9rem); font-weight: 900; line-height: .85; text-shadow: 0 0 32px var(--brand-glow); } .error-page > p:not(.eyebrow, .error-page__code) { color: var(--muted); } .error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; } .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(18, 19, 26, .86); backdrop-filter: blur(18px); } .site-header__inner, .page-shell, .site-footer { width: min(calc(100% - 32px), var(--max-width)); margin-inline: auto; } .site-header__inner { display: flex; min-height: 70px; align-items: center; justify-content: space-between; } .site-logo { display: inline-flex; align-items: center; gap: .7rem; line-height: 1.1; } .site-logo__mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, var(--brand), var(--brand-deep)); box-shadow: 0 0 24px var(--brand-glow); } .site-logo strong, .site-logo small { display: block; } .site-logo small { margin-top: .2rem; color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: .06em; } .desktop-nav { display: flex; gap: 1.7rem; color: #d5d0d5; font-size: .92rem; font-weight: 650; } .desktop-nav a:hover, .site-footer a:hover { color: var(--brand); } .page-shell { min-height: 70vh; padding-block: 3.5rem 5rem; } .hero-section { max-width: 780px; padding-block: clamp(2.5rem, 8vw, 6.5rem); } .hero-section h1 { background: linear-gradient(100deg, #fff 25%, var(--brand)); background-clip: text; color: transparent; } .hero-section > p:last-child, .listing-header > p:last-child { max-width: 620px; color: var(--muted); font-size: 1.05rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: -1rem; margin-bottom: 2.5rem; } .hero-actions .button { min-width: 10rem; } .eyebrow { margin-bottom: .55rem; color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .2em; } .listing-header { padding: 1rem 0 2rem; } .listing-header h1 { font-size: clamp(2.2rem, 6vw, 3.7rem); } .filter-panel { max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(27, 29, 39, .96); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); } .filter-panel__toggle { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; cursor: pointer; color: white; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); font-weight: 850; list-style: none; } .filter-panel__toggle::-webkit-details-marker { display: none; } .filter-panel__toggle:focus-visible { outline: 3px solid white; outline-offset: -5px; } .filter-panel__toggle small { flex: 0 0 auto; font-size: 1.2rem; transition: transform .15s ease; } .filter-panel__label--open { display: none; } .filter-panel[open] .filter-panel__label--closed { display: none; } .filter-panel[open] .filter-panel__label--open { display: inline; } .filter-panel[open] .filter-panel__toggle small { transform: rotate(180deg); } .filter-bar { overflow: hidden; border-top: 1px solid var(--line); } .filter-section { margin: 0; padding: 1rem; border: 0; border-bottom: 1px solid var(--line); } .filter-section h2, .filter-section legend, .filter-section summary { color: var(--text); font-size: .9rem; font-weight: 850; } .filter-section h2 { margin-bottom: .8rem; } .filter-section legend { width: 100%; margin-bottom: .75rem; padding: 0; } .filter-section summary { cursor: pointer; list-style-position: outside; } .filter-section summary small { margin-left: .35rem; color: var(--muted); font-size: .72rem; font-weight: 600; } .filter-section--expandable[open] summary { margin-bottom: .8rem; } .filter-fields, .filter-ranges { display: grid; gap: .7rem; } .filter-field, .filter-range { display: grid; gap: .4rem; color: var(--muted); font-size: .76rem; font-weight: 700; } .filter-field select, .filter-range input { width: 100%; min-width: 0; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: var(--surface-2); } .filter-field select:focus, .filter-range input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); } .filter-ranges { margin-top: .7rem; } .filter-range__inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; } .filter-range__inputs i { color: var(--muted); font-style: normal; } .filter-chips { display: flex; flex-wrap: wrap; gap: .48rem; } .filter-chip { position: relative; cursor: pointer; } .filter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .filter-chip span, .filter-quick-link { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-2); font-size: .76rem; line-height: 1.15; transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; } .filter-chip:hover span, .filter-quick-link:hover { border-color: var(--brand); color: var(--text); } .filter-chip input:checked + span { border-color: var(--brand); color: white; background: color-mix(in srgb, var(--brand) 28%, var(--surface-2)); box-shadow: 0 0 14px var(--brand-glow); } .filter-chip input:focus-visible + span { outline: 2px solid white; outline-offset: 2px; } .filter-chips--compact .filter-chip span { min-width: 34px; padding-inline: .55rem; } .filter-quick-link { border-style: dashed; color: var(--brand); } .filter-actions { display: flex; justify-content: flex-end; gap: .7rem; padding: 1rem; } .filter-actions .button { min-width: 9rem; } .button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: .7rem 1.25rem; border: 0; border-radius: 12px; cursor: pointer; font-weight: 800; } .button--primary { color: white; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 8px 28px var(--brand-glow); } .button--quiet { color: var(--muted); background: transparent; } .button--wide { width: 100%; margin-top: 1.25rem; } .content-section { margin-top: 4rem; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; } .section-heading h2 { margin-bottom: 0; font-size: clamp(1.45rem, 4vw, 2.1rem); } .section-heading > a { color: var(--brand); font-size: .88rem; font-weight: 750; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; color: var(--muted); font-size: .82rem; } .breadcrumb a { color: var(--brand); } .breadcrumb [aria-current="page"] { color: var(--text); } .area-chips { display: flex; gap: .7rem; overflow-x: auto; padding: .2rem 0 .8rem; scrollbar-width: thin; } .area-chips a { min-width: 105px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .area-chips a:hover { border-color: var(--brand); box-shadow: 0 0 20px var(--brand-glow); } .area-chips span, .area-chips small { display: block; } .area-chips span { font-weight: 750; } .area-chips small { color: var(--muted); } #district-navigation .area-chips { flex-wrap: wrap; overflow-x: visible; } #district-navigation .area-chips a { flex: 1 1 120px; } /* 城市頁地區指南（商品列表之後）。沿用深色霓虹 tokens；手機不得水平 overflow。 */ .region-guide__body { display: grid; gap: 1.1rem; max-width: 760px; overflow-wrap: anywhere; } .region-guide__body > p { margin: 0; color: var(--muted); } .region-guide__intro { color: var(--text) !important; font-size: 1.05rem; } .region-guide__subtitle { margin: .9rem 0 -.1rem; color: var(--text); font-size: clamp(1.05rem, 3.4vw, 1.25rem); } .region-guide__faq { display: grid; gap: .55rem; } .region-guide__faq-item { padding: .85rem 1.05rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .region-guide__faq-item summary { cursor: pointer; color: var(--text); font-weight: 700; list-style-position: inside; } .region-guide__faq-item[open] summary { color: var(--brand); } .region-guide__faq-item p { margin: .6rem 0 0; color: var(--muted); } .region-guide__note { padding: 1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px; background: var(--surface); } .region-guide__updated { color: var(--muted); font-size: .8rem; } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.35rem); } .product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .2s ease, border-color .2s ease; } .product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 55%, transparent); } .product-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(145deg, var(--surface-2), var(--brand-deep)); } /* 詳情頁容器不可固定 aspect-ratio：高度需容納主圖＋縮圖列， 否則 overflow:hidden 會把縮圖整條裁掉（多圖商品看起來只有一張）。 */ .product-detail__media { position: relative; display: block; overflow: hidden; background: linear-gradient(145deg, var(--surface-2), var(--brand-deep)); } .product-card__image img { width: 100%; height: 100%; object-fit: cover; } .product-gallery__main { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: radial-gradient(circle, var(--brand-glow), transparent 55%), linear-gradient(145deg, #272936, var(--brand-deep)); } .image-placeholder span { color: var(--brand); font-size: 2rem; filter: drop-shadow(0 0 12px var(--brand)); } .product-card__badge { position: absolute; top: .7rem; left: .7rem; padding: .25rem .55rem; border-radius: 999px; color: white; background: rgba(10, 10, 14, .72); font-size: .7rem; font-weight: 750; backdrop-filter: blur(8px); } .product-card__badge--country { right: .7rem; left: auto; background: color-mix(in srgb, var(--brand) 76%, rgba(10, 10, 14, .72)); } .product-card__body { padding: .85rem; } .product-card__body h3 { overflow: hidden; margin-bottom: .25rem; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; } .product-card__location, .product-card__spec { margin-bottom: .2rem; color: var(--muted); font-size: .77rem; } .product-card__price { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: .45rem 0 0; color: var(--brand); font-weight: 800; } .product-card__price small { padding: .18rem .38rem; border-radius: 5px; color: white; background: var(--brand-deep); font-size: .64rem; font-weight: 600; } .product-card__price--contact { color: var(--muted); font-size: .78rem; } .empty-state { display: grid; min-height: 180px; place-items: center; align-content: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); } .empty-state span { color: var(--brand); font-size: 2rem; } .pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; color: var(--muted); } .pagination a { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); } .product-detail { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .product-detail__media { border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); } .product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem; } .product-gallery__thumb { width: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; opacity: .55; transition: opacity .15s ease; } .product-gallery__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .product-gallery__thumb.is-active, .product-gallery__thumb:hover { border-color: var(--brand); opacity: 1; } .product-gallery__thumb:focus-visible { outline: 2px solid white; outline-offset: 2px; } .product-detail__content { position: sticky; top: 100px; } /* 名字是商品頁的主視覺焦點，字級明顯大於原本的 2.2–4rem。 */ .product-detail h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); line-height: 1.05; letter-spacing: -.01em; } .product-detail__region { display: block; margin-bottom: .5rem; color: var(--brand); font-size: .82rem; font-weight: 750; letter-spacing: .08em; } .product-detail__code { margin: .6rem 0 0; color: var(--muted); font-size: .84rem; letter-spacing: .06em; } .product-detail__code span { padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; } /* 主圖可點擊放大 */ .product-gallery__main-button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .product-gallery__zoom { position: absolute; right: .8rem; bottom: .8rem; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: white; font-size: 1.1rem; opacity: 0; transition: opacity .15s ease; } .product-gallery__main-button:hover .product-gallery__zoom, .product-gallery__main-button:focus-visible .product-gallery__zoom { opacity: 1; } .product-gallery__main-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } /* 全螢幕燈箱 */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(0, 0, 0, .92); } .lightbox[hidden] { display: none; } .lightbox__image { max-width: min(100%, 1100px); max-height: 88vh; object-fit: contain; border-radius: 8px; } .lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: white; font-size: 1.6rem; line-height: 1; cursor: pointer; } .lightbox__nav { position: absolute; top: 50%; width: 3.2rem; height: 3.2rem; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: white; font-size: 2rem; line-height: 1; cursor: pointer; } .lightbox__nav--prev { left: clamp(.5rem, 2vw, 2rem); } .lightbox__nav--next { right: clamp(.5rem, 2vw, 2rem); } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .24); } .lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .lightbox__counter { position: absolute; bottom: 1.2rem; left: 50%; margin: 0; transform: translateX(-50%); color: rgba(255, 255, 255, .75); font-size: .85rem; letter-spacing: .1em; } /* 燈箱開啟時鎖住背景捲動 */ body.is-lightbox-open { overflow: hidden; } /* 商品卡片的計數列 */ .product-card__stats { display: flex; gap: .9rem; margin: .5rem 0 0; font-size: .8rem; color: var(--muted); } .product-card__stat { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; } .product-card__stat--likes { color: var(--brand); } /* 觀看次數、點讚、排序 */ .product-detail__meta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .8rem 0 1.2rem; } .view-count { font-size: .9rem; color: var(--muted); } .like-button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; font-size: .9rem; cursor: pointer; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; transition: color .15s, border-color .15s, background .15s; } .like-button:hover { color: var(--text); border-color: var(--brand); } .like-button.is-active { color: #fff; background: var(--brand); border-color: var(--brand); } .like-button__count:empty { display: none; } .like-button__count { padding-left: .3rem; font-variant-numeric: tabular-nums; opacity: .85; } .link-button { font-size: .85rem; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; } .link-button:hover { color: var(--text); } .sort-bar { display: flex; gap: .5rem; margin: 1.2rem auto; padding: 0 1.2rem; max-width: var(--max-w, 1200px); } .sort-bar__option { padding: .4rem .9rem; font-size: .9rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; } .sort-bar__option:hover { color: var(--text); border-color: var(--brand); } .sort-bar__option.is-active { color: #fff; background: var(--brand); border-color: var(--brand); } /* 站內搜尋 */ .search-form { display: flex; gap: .6rem; max-width: 560px; } .search-form input[type="search"] { flex: 1; min-width: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 1rem; } .search-form input[type="search"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .search-form input[type="search"]::placeholder { color: var(--muted); } .search-summary { margin: 1rem 0 0; color: var(--muted); } .search-summary strong { color: var(--brand); } .search-empty { padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: 16px; } .search-empty p { margin: 0 0 .6rem; color: var(--text); } .search-empty ul { margin: 0 0 1.2rem; padding-left: 1.2rem; color: var(--muted); line-height: 1.9; } .content-section--tight { padding-top: 0; } /* 地區總覽：地圖式版面 */ .city-index__summary { margin: 1rem 0 0; color: var(--muted); } .city-index__summary strong { color: var(--brand); } /* 以 Grid 排出接近台灣地理位置的形狀：本島北→南堆疊於左，東部與離島置右。 */ .tw-map { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "north east" "central east" "south islands" "others others"; gap: 1rem; } .tw-map__region { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg, var(--surface-2), transparent); } .tw-map__region--north { grid-area: north; } .tw-map__region--central { grid-area: central; } .tw-map__region--south { grid-area: south; } .tw-map__region--east { grid-area: east; } .tw-map__region--islands { grid-area: islands; } .tw-map__region--others { grid-area: others; } .tw-map__region-name { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .8rem; color: var(--brand); font-size: .82rem; font-weight: 750; letter-spacing: .12em; } .tw-map__region-name small { color: var(--muted); font-weight: 400; letter-spacing: normal; } .tw-map__cities { display: flex; flex-wrap: wrap; gap: .5rem; } .tw-map__city { display: flex; flex-direction: column; gap: .1rem; min-width: 84px; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; } .tw-map__city:hover, .tw-map__city:focus-visible { border-color: var(--brand); background: rgba(255, 255, 255, .04); transform: translateY(-2px); } .tw-map__city strong { color: var(--text); font-size: 1.02rem; } .tw-map__city small { color: var(--muted); font-size: .76rem; } /* 首頁快捷入口與 FAQ */ /* 原本只用於