https://www.formaveil.com/custom_140309.html
極境嚴選推薦
極境嚴選推薦
/* --- 極境嚴選：目錄頁專用 CSS --- */
.catalog-section {
font-family: 'Microsoft JhengHei', sans-serif;
background-color: #fdfdfb;
color: #333;
width: 100%;
box-sizing: border-box;
padding: 80px 20px 120px 20px;
}
/* 標題區 */
.catalog-header {
text-align: center;
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.catalog-title {
font-size: 32px;
letter-spacing: 5px;
margin-bottom: 10px;
font-weight: 400;
color: #333;
}
.catalog-subtitle {
color: #c5a059;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
display: block;
margin-bottom: 20px;
font-weight: bold;
}
.catalog-divider {
width: 60px;
height: 3px;
background-color: #c5a059;
margin: 0 auto;
}
/* 介紹文案設定 */
.catalog-intro {
margin-top: 30px;
color: #666;
line-height: 2;
font-size: 15px;
}
/* 手機專用換行設定 */
.mobile-br {
display: none;
}
.keep-line {
display: inline-block;
white-space: nowrap;
}
/* 商品列表網格 */
.catalog-grid {
display: flex;
flex-wrap: wrap;
max-width: 1100px;
margin: 0 auto;
gap: 30px;
justify-content: flex-start;
}
/* 商品卡片 */
.product-item {
/* 電腦版一排 3 個 */
width: calc(33.333% - 20px);
min-width: 300px;
background: #fff;
border: 1px solid #eee;
transition: all 0.3s ease;
position: relative;
text-decoration: none;
display: flex;
flex-direction: column;
/* ★ 修正：強制滑鼠變成手指，並提高層級確保可點擊 ★ */
cursor: pointer;
z-index: 10;
}
.product-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
border-color: #c5a059;
}
/* 圖片區 - 正方形 1:1 比例 */
.p-img-box {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
background-color: #f9f9f9;
display: flex;
align-items: center;
justify-content: center;
/* 讓點擊事件穿透圖片，直接觸發外層 div */
pointer-events: none;
}
.p-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
display: block;
}
.p-img.contain {
object-fit: contain;
padding: 20px;
box-sizing: border-box;
}
.product-item:hover .p-img {
transform: scale(1.08);
}
/* 標籤 */
.p-tag {
position: absolute;
top: 10px;
left: 10px;
background-color: #c5a059;
color: #fff;
font-size: 12px;
padding: 4px 10px;
letter-spacing: 1px;
z-index: 2;
}
/* 資訊區 */
.p-info {
padding: 20px 25px;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none; /* 讓點擊穿透 */
}
.p-name {
font-size: 18px;
color: #222;
margin-bottom: 10px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.4;
}
.p-price {
font-size: 20px;
color: #c5a059;
font-weight: bold;
font-family: 'Times New Roman', serif;
margin-bottom: 15px;
}
.p-btn {
display: inline-block;
padding: 8px 0;
width: 100%;
border: 1px solid #ddd;
color: #666;
font-size: 14px;
transition: 0.3s;
}
.product-item:hover .p-btn {
background-color: #333;
color: #fff;
border-color: #333;
}
/* 敬請期待卡片 */
.product-item.coming-soon {
background-color: #fcfcfc;
border: 1px dashed #ddd;
cursor: default;
}
.product-item.coming-soon:hover {
transform: none;
box-shadow: none;
border-color: #ddd;
}
.coming-soon-content {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #bbb;
}
.cs-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }
.cs-text { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
/* RWD */
@media (max-width: 768px) {
.catalog-grid { justify-content: space-between; gap: 20px; }
.product-item { width: 100%; margin-bottom: 20px; } /* 手機版單欄 */
/* 手機版：顯示斷行標籤 */
.mobile-br { display: block; margin-bottom: 5px; }
.catalog-intro { line-height: 1.6; }
}
極境嚴選
JAJING SELECTION
設計師親自甄選的質感單品，從機能衛浴到軟裝擺飾。讓美學不僅存在於空間設計，更融入日常生活的每一個細節。
熱銷 BEST
美肌霧・奈米銀備長炭美容機能蓮蓬頭
NT$ 2,500
查看詳情
✨ COMING SOON 更多嚴選商品籌備中
COMING SOON 更多嚴選商品籌備中
https://www.formaveil.com/
極境室內設計有限公司
熱銷 BEST
美肌霧・奈米銀備長炭
美容機能蓮蓬頭
NT$ 2,500
查看詳情
