/* ========================================================= * Winvincible 2026 — 笠源綠 + 工業風主題 * 對應設計稿：Data/Design/Winvincible *.png * ========================================================= */ :root { --wv-green: #4a6c56; --wv-green-dark: #22382c; --wv-green-deep: #2f4a3a; --wv-green-light: #6b8e6f; --wv-gold: #e7ba4d; --wv-red: #af2c37; --wv-ink: #1f2326; --wv-graphite: #2b2f31; --wv-graphite-soft: #3d4141; --wv-steel: #717071; --wv-silver: #d7d7d2; --wv-bone: #f5f3ee; --wv-warm: #fbfaf6; --wv-line: #d8d2c4; --wv-paper: #ffffff; --wv-font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --wv-font-en: 'Inter', 'Helvetica Neue', Arial, sans-serif; --wv-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- 全站基本 ---------- */ /* 全站基準字級放大，符合中老年使用者閱讀習慣（rem 連動放大）*/ html { overflow-x: hidden; font-size: 18px; } body.wv2026 { background: linear-gradient(180deg, var(--wv-warm) 0%, var(--wv-bone) 58%, #ebe7dc 100%); color: var(--wv-ink); font-family: var(--wv-font-zh); font-weight: 400 !important; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } /* 工業風格子網底 — 全站 */ body.wv2026::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(74,108,86,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74,108,86,.05) 1px, transparent 1px); background-size: 56px 56px; } body.wv2026 > * { position: relative; z-index: 1; } /* 確保 header 的下拉選單不被 main 內容覆蓋 */ body.wv2026 > header { z-index: 200 !important; } /* Fancybox v3 容器是直接子元素，會被上方 body.wv2026 > * 規則 (特異性 0,0,1,1) 覆蓋掉它原本的 position:fixed / z-index:99992，導致燈箱變成 position:relative 卡在頁尾正常流、且 z-index 過低。必須還原 fancybox 預設定位，燈箱才能全螢幕覆蓋顯示。 */ body.wv2026 > .fancybox-container { position: fixed !important; z-index: 99992 !important; } .wv2026 main { padding: 0 !important; } .wv2026 main > section.container { padding: 0 !important; max-width: 100% !important; } .wv2026 main > section.container > .row > .col-12 { padding: 0 !important; } .wv2026 a { color: var(--wv-green); text-decoration: none; transition: color .2s; } .wv2026 a:hover { color: var(--wv-green-dark); } /* ---------- 工業風通用樣式 ---------- */ .wv-mono { font-family: var(--wv-font-mono); letter-spacing: .12em; text-transform: uppercase; } .wv-badge-primary { display: inline-block; font-family: var(--wv-font-mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--wv-green); padding: .35rem .75rem; border-radius: 4px; margin-bottom: .6rem; } .wv-eyebrow { color: var(--wv-steel); font-family: var(--wv-font-mono); font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: .75rem; } .wv-section { padding: 5rem 0; } .wv-section.tight { padding: 3rem 0; } .wv-rule { width: 64px; height: 3px; background: var(--wv-green); display: inline-block; margin: 0 0 1.5rem; } .wv-h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--wv-ink); } .wv-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; color: var(--wv-ink); margin-bottom: .5rem; } .wv-h3 { font-size: 1.25rem; font-weight: 700; color: var(--wv-ink); } .wv-lead { color: var(--wv-steel); font-size: 1.05rem; line-height: 1.8; } .wv-section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 2.25rem; } .wv-section-title::before { content: ""; width: 5px; height: 30px; background: var(--wv-green); display: inline-block; } .wv-section-title h2 { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--wv-ink); } .wv-section-title small { color: var(--wv-steel); font-family: var(--wv-font-mono); letter-spacing: .18em; font-size: .72rem; text-transform: uppercase; } /* ---------- 按鈕 ---------- */ .wv-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.5rem; font-weight: 600; border-radius: 10px; transition: all .3s cubic-bezier(.4,0,.2,1); border: 1px solid transparent; font-size: .98rem; cursor: pointer; text-decoration: none !important; } .wv-btn-primary { background: var(--wv-green); color: #fff !important; } .wv-btn-primary:hover { background: var(--wv-green-dark); color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,108,86,.35); } .wv-btn-outline { background: transparent; border-color: var(--wv-green); color: var(--wv-green) !important; } .wv-btn-outline:hover { background: var(--wv-green); color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,108,86,.25); } .wv-btn-ghost { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); color: #fff !important; backdrop-filter: blur(4px); } .wv-btn-ghost:hover { background: rgba(255,255,255,.3); color: #fff !important; transform: translateY(-2px); } .wv-btn-gold { background: var(--wv-gold); color: var(--wv-ink) !important; font-weight: 700; } .wv-btn-gold:hover { background: #d4a734; color: var(--wv-ink) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231,186,77,.35); } /* ---------- 頂部導航 ---------- */ .wv-topbar { background: var(--wv-bone); border-bottom: 1px solid var(--wv-line); padding: .25rem 0; } .wv-topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 68px; } .wv-topbar .wv-brand { display: flex; align-items: center; gap: .65rem; color: var(--wv-ink); text-decoration: none !important; } .wv-topbar .wv-brand img { height: 52px; width: auto; } /* logo 旁顯示品牌中英文名稱 */ .wv-topbar .wv-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .wv-topbar .wv-brand-name { font-weight: 800; font-size: 1.05rem; color: var(--wv-ink); letter-spacing: .02em; } .wv-topbar .wv-brand-tag { font-family: var(--wv-font-mono); font-size: .65rem; color: var(--wv-steel); letter-spacing: .22em; } .wv-topbar nav.wv-nav { display: flex; align-items: center; gap: 1.75rem; } .wv-topbar nav.wv-nav a { color: var(--wv-ink); font-weight: 500; padding: .45rem .65rem; border-radius: 4px; position: relative; text-decoration: none !important; transition: background .2s, color .2s; } .wv-topbar nav.wv-nav a:hover, .wv-topbar nav.wv-nav a:focus { background: var(--wv-gold); color: var(--wv-ink); } .wv-topbar nav.wv-nav a.active { color: var(--wv-green-dark); font-weight: 700; background: rgba(231,186,77,.14); } .wv-topbar nav.wv-nav > a.active::before, .wv-topbar nav.wv-nav > .dropdown > a.active::before { content: ""; position: absolute; bottom: 0; left: .65rem; right: .65rem; height: 3px; background: var(--wv-gold); border-radius: 2px 2px 0 0; } .wv-topbar .wv-lang { font-family: var(--wv-font-mono); font-size: .75rem; color: var(--wv-steel); padding: .35rem .7rem; border: 1px solid var(--wv-line); border-radius: 4px; } .wv-wa-mark, .wv-wa-lock { white-space: nowrap; } .wv-wa-mark sup, .wv-wa-lock sup, .wv-mono-tag sup, .wv-section-title sup, .wv-foot-tag sup { font-size: .62em; line-height: 0; display: inline-block; min-width: .42em; position: relative; top: -.42em; -webkit-text-fill-color: currentColor; } /* slogan bar 的 sup 不能用 position:relative，否則會切斷父層 background-clip:text 的渲染，導致 + 字在 -webkit-text-fill-color:transparent 環境下消失 */ .wv-slogan-bar sup { font-size: .62em; line-height: 0; display: inline-block; min-width: .42em; vertical-align: .42em; -webkit-text-fill-color: currentColor; } @media (max-width: 991.98px) { .wv-topbar nav.wv-nav { display: none; } .wv-topbar .wv-mobile-toggle { display: inline-flex; } } @media (min-width: 992px) { .wv-topbar .wv-mobile-toggle { display: none; } } .wv-topbar .wv-mobile-toggle { background: transparent; border: 1px solid var(--wv-line); color: var(--wv-ink); padding: .35rem .55rem; border-radius: 4px; } .wv-mobile-menu { display: none; background: var(--wv-paper); border-bottom: 1px solid var(--wv-line); } .wv-mobile-menu.show { display: block; } .wv-mobile-menu a { display: block; padding: .85rem 1.25rem; border-top: 1px solid var(--wv-line); color: var(--wv-ink); font-weight: 500; text-decoration: none !important; } .wv-mobile-menu a:hover, .wv-mobile-menu a:focus { background: var(--wv-gold); color: var(--wv-ink); } .wv-mobile-menu a.active { color: var(--wv-green-dark); font-weight: 700; background: rgba(231,186,77,.14); box-shadow: inset 4px 0 0 var(--wv-gold); } /* ---------- Hero ---------- */ .wv-hero { background: linear-gradient(90deg, rgba(17,24,20,.88) 0%, rgba(17,24,20,.76) 28%, rgba(17,24,20,.48) 56%, rgba(17,24,20,.14) 100%), radial-gradient(circle at 84% 10%, rgba(231,186,77,.18), transparent 26%), url("/img/2026/Home/home-hero-industrial-hinge-v6.jpg") center right / cover no-repeat, linear-gradient(135deg, #2c4436 0%, var(--wv-green) 52%, #3c5a48 100%); color: #eef2ee; position: relative; overflow: hidden; padding: 4.5rem 0 5rem; } .wv-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .wv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,24,20,.10) 0%, rgba(17,24,20,.02) 48%, rgba(17,24,20,.18) 100%), linear-gradient(90deg, rgba(17,24,20,.26) 0%, rgba(17,24,20,.12) 44%, rgba(17,24,20,.04) 72%, transparent 100%); pointer-events: none; } .wv-hero > .container { position: relative; z-index: 1; } .wv-hero .row > .col-lg-7 { position: relative; z-index: 2; } .wv-hero .row > .col-lg-7::before { content: ""; position: absolute; inset: -1.2rem -1.15rem; background: linear-gradient(90deg, rgba(28,46,36,.56), rgba(28,46,36,.30) 74%, rgba(28,46,36,0)); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.18); pointer-events: none; } .wv-hero .row > .col-lg-7 > * { position: relative; z-index: 1; } .wv-hero .wv-eyebrow { color: var(--wv-gold); } .wv-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.18; text-shadow: 0 3px 18px rgba(0,0,0,.52); } .wv-hero h1 .accent { color: var(--wv-gold); } .wv-hero p.lead { color: rgba(255,255,255,.88) !important; font-size: 1.1rem; max-width: 640px; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .wv-hero .wv-hero-visual { background: rgba(248,250,248,.86); border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; padding: 1.25rem; position: relative; overflow: hidden; display: block; box-shadow: 0 20px 48px rgba(0,0,0,.2); transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s; cursor: pointer; } .wv-hero .wv-hero-visual::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--wv-gold); } .wv-hero .wv-hero-visual:hover { transform: translateY(-5px); box-shadow: 0 32px 64px rgba(0,0,0,.28); } .wv-hero .wv-hero-visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 14px rgba(0,0,0,.1)); transition: transform .45s cubic-bezier(.4,0,.2,1); } /* ---------- 統計數字區 ---------- */ .wv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; } .wv-stat .num { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; font-family: var(--wv-font-en); } .wv-stat .label { color: rgba(255,255,255,.65); font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin-top: .35rem; } @media (max-width: 575.98px) { .wv-stats { grid-template-columns: repeat(2, 1fr); } .wv-stat .num { font-size: 2.1rem; } } /* ---------- 卡片 ---------- */ .wv-card { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.7); border-radius: 16px; padding: 1.25rem 1.25rem 1.4rem; transition: all .3s cubic-bezier(.4,0,.2,1); height: 100%; box-shadow: 0 3px 14px rgba(34,56,44,.09); } .wv-card:hover { border-color: rgba(74,108,86,.5); box-shadow: 0 24px 50px rgba(34,56,44,.22), 0 6px 16px rgba(34,56,44,.12); transform: translateY(-6px); } .wv-card .wv-card-tag { font-family: var(--wv-font-mono); font-size: .7rem; color: var(--wv-steel); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .5rem; } .wv-card .wv-card-title { font-weight: 800; font-size: 1.2rem; color: var(--wv-ink); margin: 0 0 .5rem; } .wv-card .wv-card-desc { color: var(--wv-steel); font-size: .92rem; line-height: 1.7; } .wv-card .wv-card-thumb { background: #fff; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border: 1px solid var(--wv-line); border-top: 3px solid var(--wv-green); transition: border-color .3s, box-shadow .3s; } .wv-card:hover .wv-card-thumb { border-top-color: var(--wv-gold); box-shadow: inset 0 0 0 1px rgba(231,186,77,.3); } .wv-card .wv-card-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform .4s; } .wv-card:hover .wv-card-thumb img { transform: scale(1.06); } /* 系列大卡（產品專區） */ .wv-series-row { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.55); border-radius: 16px; padding: 1.75rem; margin-bottom: 1.5rem; transition: all .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 2px 10px rgba(34,56,44,.05); } .wv-series-row:hover { border-color: rgba(74,108,86,.35); box-shadow: 0 16px 38px rgba(34,56,44,.14); transform: translateY(-3px); } .wv-series-row h3 { font-weight: 800; font-size: 1.35rem; color: var(--wv-ink); margin-bottom: .25rem; } .wv-series-row .wv-series-tag { display: inline-block; background: var(--wv-green); color: #fff; padding: .15rem .55rem; font-family: var(--wv-font-mono); font-size: .68rem; letter-spacing: .2em; border-radius: 3px; } .wv-series-row .wv-series-thumb { background: var(--wv-paper); border-radius: 12px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; } .wv-series-row .wv-series-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .wv-series-row .wv-spec-row { font-family: var(--wv-font-mono); font-size: .78rem; color: var(--wv-steel); letter-spacing: .1em; margin-top: 1rem; } .wv-series-row .wv-axis-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .85rem 0 1rem; } .wv-series-row .wv-axis-chip { padding: .25rem .7rem; border: 1px solid var(--wv-line); border-radius: 4px; font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--wv-ink); transition: all .2s; } .wv-series-row .wv-axis-chip:hover { border-color: var(--wv-green); color: var(--wv-green); } /* ---------- 產品卡片小格 ---------- */ .wv-product-card { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.55); border-radius: 16px; padding: .85rem .85rem 1rem; transition: all .3s cubic-bezier(.4,0,.2,1); height: 100%; text-align: center; box-shadow: 0 4px 14px rgba(34,56,44,.08), 0 1px 3px rgba(34,56,44,.06); } .wv-product-card:hover { border-color: rgba(74,108,86,.45); box-shadow: 0 22px 44px rgba(34,56,44,.20), 0 6px 14px rgba(34,56,44,.12); transform: translateY(-6px); } .wv-product-card .wv-pc-thumb { background: #fff; border-radius: 12px; aspect-ratio: 4/3; border: 1px solid var(--wv-line); border-top: 3px solid var(--wv-green); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; overflow: hidden; transition: border-color .3s, box-shadow .3s; } .wv-product-card:hover .wv-pc-thumb { border-top-color: var(--wv-gold); box-shadow: inset 0 0 0 1px rgba(231,186,77,.3); } .wv-product-card .wv-pc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .5rem; transition: transform .4s; } .wv-product-card:hover .wv-pc-thumb img { transform: scale(1.06); } .wv-product-card .wv-pc-badge { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .4rem .65rem; font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .12em; font-weight: 700; border-radius: 6px; margin-bottom: .5rem; transition: all .25s; } .wv-pc-badge i { font-size: 1rem; } .wv-pc-badge.hs { background: var(--wv-green); color: #fff; } .wv-pc-badge.hs:hover { background: var(--wv-green-dark); box-shadow: 0 3px 10px rgba(74,108,86,.3); } .wv-pc-badge.ts { background: var(--wv-gold); color: var(--wv-ink); } .wv-pc-badge.ts:hover { background: #d4a535; box-shadow: 0 3px 10px rgba(231,186,77,.4); } .wv-pc-badge.ls { background: #2d78a5; color: #fff; } .wv-pc-badge.ls:hover { background: #1f5480; box-shadow: 0 3px 10px rgba(45,120,165,.4); } .wv-pc-badge.sw { background: var(--wv-steel); color: #fff; } .wv-pc-badge.sw:hover { background: #5d5d5d; box-shadow: 0 3px 10px rgba(113,112,113,.3); } .wv-pc-badge.st { background: var(--wv-green-deep); color: #fff; } .wv-pc-badge.st:hover { background: var(--wv-green-dark); box-shadow: 0 3px 10px rgba(34,56,44,.3); } .wv-product-card .wv-pc-name { font-weight: 800; font-size: 1.05rem; color: var(--wv-ink); margin-bottom: .3rem; } .wv-product-card .wv-pc-desc { font-size: .8rem; color: var(--wv-steel); margin-bottom: .75rem; line-height: 1.5; display: flex; flex-direction: column; gap: .25rem; } .wv-pc-desc-zh { font-weight: 600; color: var(--wv-ink); } .wv-pc-desc-en { font-size: .75rem; color: var(--wv-steel); } .wv-product-card .wv-pc-actions { display: flex; gap: .4rem; justify-content: center; } .wv-product-card .wv-pc-actions .wv-btn { padding: .5rem .85rem; font-size: .82rem; } /* 產品卡片迷你輪播（3D 渲染 + 實拍切換） */ .wv-pc-carousel { background: #fff; border-radius: 12px; border: 1px solid var(--wv-line); border-top: 3px solid var(--wv-green); aspect-ratio: 4/3; overflow: hidden; margin-bottom: .75rem; position: relative; transition: border-color .3s, box-shadow .3s; } .wv-product-card:hover .wv-pc-carousel { border-top-color: var(--wv-gold); box-shadow: inset 0 0 0 1px rgba(231,186,77,.3); } .wv-pc-carousel .carousel-inner, .wv-pc-carousel .carousel-item { height: 100%; } .wv-pc-carousel .wv-pc-slide-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; padding: .5rem; } .wv-pc-carousel .wv-pc-slide-link img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .4s; } .wv-product-card:hover .wv-pc-carousel img { transform: scale(1.05); } .wv-pc-carousel.carousel-fade .carousel-item { transition: opacity .3s ease-in-out; } .wv-pc-carousel .wv-zoom-cue { font-size: .62rem; padding: .2rem .45rem; right: .35rem; bottom: .35rem; } .wv-pc-carousel .carousel-indicators { margin-bottom: 2px; } .wv-pc-carousel .carousel-indicators [data-bs-target] { width: 6px; height: 6px; border-radius: 50%; border: none; background-color: var(--wv-green); opacity: .35; transition: opacity .25s; margin: 0 2px; } .wv-pc-carousel .carousel-indicators .active { opacity: 1; } .wv-pc-carousel .carousel-control-prev, .wv-pc-carousel .carousel-control-next { width: 28px; opacity: 0; transition: opacity .2s; } .wv-pc-carousel .carousel-control-prev { justify-content: flex-start; padding-left: 3px; } .wv-pc-carousel .carousel-control-next { justify-content: flex-end; padding-right: 3px; } .wv-pc-carousel:hover .carousel-control-prev, .wv-pc-carousel:hover .carousel-control-next { opacity: 1; } .wv-pc-carousel .wv-pc-ctrl { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(74,108,86,.82); color: #fff; font-size: .58rem; } /* ---------- 軸心 / 模組 item （Bootstrap 5 row-cols） ---------- */ .wv-axis-item { display: flex; flex-direction: row; gap: .6rem; align-items: flex-start; background: var(--wv-bone); border: 1px solid var(--wv-line); border-radius: 8px; padding: 1rem; cursor: pointer; transition: all .25s; height: 100%; } .wv-axis-item:hover { border-color: var(--wv-green); background: rgba(74,108,86,.06); box-shadow: 0 6px 16px rgba(74,108,86,.18), inset 0 1px 3px rgba(74,108,86,.04); } .wv-axis-code { flex: 0 0 auto; font-weight: 800; font-size: 1.6rem; color: var(--wv-green); font-family: var(--wv-font-mono); letter-spacing: .12em; min-width: 2rem; text-align: center; align-self: center; } .wv-axis-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .2rem; } .wv-axis-en { font-family: var(--wv-font-en); font-size: .88rem; letter-spacing: .04em; color: var(--wv-ink); line-height: 1.4; font-weight: 600; } .wv-axis-zh { font-family: var(--wv-font-zh); font-size: .82rem; letter-spacing: .02em; color: var(--wv-steel); line-height: 1.5; } /* ---------- 規格表 ---------- */ .wv-spec-card { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.7); border-radius: 14px; padding: 1.5rem; transition: all .3s; box-shadow: 0 3px 14px rgba(34,56,44,.08); } .wv-spec-card:hover { border-color: rgba(74,108,86,.45); box-shadow: 0 14px 36px rgba(34,56,44,.15); transform: translateY(-2px); } .wv-spec-card h4 { font-weight: 800; font-size: 1.05rem; color: var(--wv-ink); margin-bottom: 1rem; } .wv-spec-table { width: 100%; } .wv-spec-table th, .wv-spec-table td { padding: .55rem 0; border-bottom: 1px dashed var(--wv-line); font-family: var(--wv-font-mono); font-size: .82rem; } .wv-spec-table th { color: var(--wv-steel); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; width: 38%; } .wv-spec-table td { color: var(--wv-ink); font-weight: 600; } /* ---------- 倒數計時 ---------- */ .wv-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .wv-countdown .cell { background: var(--wv-paper); border: 1px solid var(--wv-line); border-radius: 12px; text-align: center; padding: 1.25rem .5rem; transition: all .3s; } .wv-countdown .cell:hover { border-color: var(--wv-green); transform: translateY(-2px); } .wv-countdown .cell .n { font-family: var(--wv-font-en); font-size: 2.5rem; font-weight: 800; color: var(--wv-green); line-height: 1; } .wv-countdown .cell .l { color: var(--wv-steel); font-family: var(--wv-font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; margin-top: .35rem; } /* TIDE 展覽 CTA 卡片 — 笠源綠漸層、金光點綴 */ .wv-tide-hero { background: radial-gradient(circle at 92% 4%, rgba(231,186,77,.26), transparent 30%), linear-gradient(135deg, var(--wv-green) 0%, var(--wv-green-deep) 60%, var(--wv-green-dark) 100%); color: #fff; padding: 3rem; border-radius: 16px; position: relative; overflow: hidden; } .wv-tide-hero::before { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; background: radial-gradient(circle, var(--wv-gold) 0%, transparent 70%); opacity: .15; } .wv-tide-hero .tag { display: inline-block; background: var(--wv-gold); color: var(--wv-ink); padding: .25rem .75rem; font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .25em; font-weight: 700; margin-bottom: 1rem; } .wv-tide-hero h2 { color: #fff; font-weight: 800; } /* ---------- 表單 ---------- */ .wv-form .form-label { font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--wv-steel); } .wv-form .form-control { background: var(--wv-paper); border: 1px solid var(--wv-line); border-radius: 10px; padding: .75rem 1rem; transition: all .25s; } .wv-form .form-control:focus { border-color: var(--wv-green); box-shadow: 0 0 0 .2rem rgba(74,108,86,.15); } /* ---------- 模組組合器 ---------- */ .wv-builder { background: var(--wv-paper); border: 1px solid var(--wv-line); border-radius: 16px; padding: 1.75rem; box-shadow: 0 6px 22px rgba(34,56,44,.08); } .wv-builder .wv-builder-row { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; margin-bottom: 1.15rem; } .wv-builder .wv-builder-label { font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .15em; color: var(--wv-steel); font-weight: 700; text-transform: uppercase; } .wv-builder .wv-builder-options { display: flex; gap: .5rem; flex-wrap: wrap; } /* 系列／功能：等寬欄位網格，不換行斷裂（桌機 4 欄一列，手機 2×2） */ .wv-builder #wvSeries, .wv-builder #wvAxis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } @media (min-width: 768px) { .wv-builder #wvSeries, .wv-builder #wvAxis { grid-template-columns: repeat(4, 1fr); } } .wv-builder .wv-opt { display: flex; align-items: center; justify-content: center; text-align: center; padding: .6rem .55rem; border: 1.5px solid var(--wv-line); background: var(--wv-paper); border-radius: 6px; font-family: var(--wv-font-mono); font-weight: 600; font-size: .82rem; letter-spacing: .04em; cursor: pointer; transition: all .25s; color: var(--wv-ink); white-space: nowrap; } .wv-builder .wv-opt:hover { border-color: var(--wv-green); background: rgba(74,108,86,.08); color: var(--wv-green); box-shadow: 0 3px 8px rgba(74,108,86,.15); } .wv-builder .wv-opt.active { background: var(--wv-green); border-color: var(--wv-green); color: #fff; box-shadow: 0 4px 12px rgba(74,108,86,.3); } .wv-builder .wv-preview { background: var(--wv-paper); border: 1px solid var(--wv-line); border-top: 3px solid var(--wv-green); border-radius: 14px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 12px 30px rgba(34,56,44,.14), 0 2px 6px rgba(34,56,44,.08), inset 0 1px 3px rgba(34,56,44,.04); } .wv-builder .wv-preview .code { position: absolute; top: 12px; right: 14px; font-family: var(--wv-font-mono); font-size: 1rem; font-weight: 800; color: var(--wv-ink); letter-spacing: .1em; background: rgba(255,255,255,.85); padding: .2rem .55rem; border-radius: 3px; } .wv-builder .wv-preview img { max-width: 85%; max-height: 85%; object-fit: contain; transition: opacity .3s, transform .4s; } /* ---------- 認證徽章 ---------- */ .wv-cert { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.7); border-radius: 14px; padding: 1.5rem; text-align: center; transition: all .3s; box-shadow: 0 3px 14px rgba(34,56,44,.08); } .wv-cert:hover { border-color: rgba(74,108,86,.45); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(34,56,44,.16); } .wv-cert .label { font-family: var(--wv-font-mono); font-size: .7rem; letter-spacing: .22em; color: var(--wv-steel); } .wv-cert .title { font-size: 1.5rem; font-weight: 800; color: var(--wv-green); letter-spacing: .02em; margin: .35rem 0; } .wv-cert .desc { font-size: .85rem; color: var(--wv-steel); } /* ---------- 標語塊 ---------- */ .wv-motto { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.7); border-radius: 14px; padding: 1.5rem 1rem; text-align: center; transition: all .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 3px 14px rgba(34,56,44,.08); } .wv-motto:hover { border-color: rgba(74,108,86,.45); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(34,56,44,.16); } .wv-motto .zh { font-size: 1.05rem; font-weight: 800; color: var(--wv-ink); } .wv-motto .en { font-family: var(--wv-font-mono); font-size: .7rem; letter-spacing: .25em; color: var(--wv-steel); margin-top: .35rem; } /* ---------- 安裝技術勾選列 ---------- */ .wv-feature { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px dashed var(--wv-line); } .wv-feature:last-child { border-bottom: 0; } .wv-feature .icon { width: 28px; height: 28px; border-radius: 50%; background: var(--wv-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; margin-top: 3px; } .wv-feature h4 { font-size: 1rem; font-weight: 700; color: var(--wv-ink); margin: 0 0 .15rem; } .wv-feature p { color: var(--wv-steel); font-size: .88rem; margin: 0; } /* ---------- 麵包屑 ---------- */ .wv-crumb { color: var(--wv-steel); font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1rem; } .wv-crumb a { color: var(--wv-steel); } .wv-crumb .sep { margin: 0 .5rem; color: var(--wv-line); } /* ---------- Footer ---------- */ .wv-footer { background: #1c2920; color: rgba(255,255,255,.7); padding: 3rem 0 1.25rem; margin-top: 4rem; } .wv-footer h5 { color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .1em; margin-bottom: 1rem; text-transform: uppercase; } .wv-footer a { color: rgba(255,255,255,.78); text-decoration: none !important; } .wv-footer a:hover { color: var(--wv-gold); } .wv-footer .wv-foot-tag { font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .22em; color: rgba(255,255,255,.45); text-transform: uppercase; } .wv-footer .wv-foot-tag .wv-wa-mark sup { font-size: .82em; top: -.3em; color: var(--wv-gold); -webkit-text-fill-color: var(--wv-gold); } .wv-footer .wv-foot-bot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; margin-top: 2.25rem; color: rgba(255,255,255,.5); font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } /* ---------- Slogan 條 ---------- */ .wv-slogan-bar { background: linear-gradient(90deg, var(--wv-green-dark) 0%, var(--wv-green-deep) 50%, var(--wv-green-dark) 100%); color: #fff; padding: 1.5rem 0; text-align: center; overflow: hidden; position: relative; border-top: 5px solid var(--wv-gold); border-bottom: 5px solid var(--wv-gold); } .wv-slogan-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%); background-size: 300% 100%; animation: wvSloganSweep 5s ease-in-out infinite; pointer-events: none; } .wv-slogan-bar .lg { font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; background: linear-gradient(90deg, #fff 0%, var(--wv-gold) 28%, #fff 50%, var(--wv-gold) 78%, #fff 100%); background-size: 250% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: wvShimmer 7s linear infinite; position: relative; z-index: 1; } .wv-slogan-bar .lg .wv-wa-mark sup { color: var(--wv-gold); -webkit-text-fill-color: var(--wv-gold); background: none; text-shadow: 0 0 1px rgba(231,186,77,.35); } .wv-slogan-bar .sm { font-family: var(--wv-font-mono); letter-spacing: .25em; font-size: .82rem; color: rgba(255,255,255,.75); margin-top: .4rem; position: relative; z-index: 1; } /* ---------- 3D 全螢幕彈窗 ---------- */ /* 注意：必須用 !important 覆蓋 body.wv2026 > * { position:relative; z-index:1 } 的特異性 */ body.wv2026 > .wv-3d-overlay { position: fixed !important; inset: 0; z-index: 9999 !important; background: rgba(0,0,0,.92); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s ease; } body.wv2026 > .wv-3d-overlay.is-open { display: flex; opacity: 1; } .wv-3d-overlay iframe { width: 96vw; height: 92vh; border: none; border-radius: 8px; background: #000; } /* 3D 視窗關閉鈕 — 純圖示圓鈕，hover 轉紅旋轉 */ .wv-3d-close { position: fixed !important; top: 18px; right: 18px; z-index: 10001 !important; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.65); color: #fff; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .3s cubic-bezier(.4,0,.2,1); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,.45); animation: wvCloseEntrance .4s cubic-bezier(.34,1.56,.64,1); } .wv-3d-close:hover { background: var(--wv-red); border-color: #fff; transform: rotate(90deg) scale(1.08); box-shadow: 0 6px 26px rgba(175,44,55,.6); } @keyframes wvCloseEntrance { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } } .wv-3d-title { position: absolute; top: 20px; left: 24px; z-index: 10000; color: #fff; font-family: var(--wv-font-mono); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; background: rgba(0,0,0,.5); padding: .35rem .85rem; border-radius: 4px; backdrop-filter: blur(4px); } /* ---------- 聯絡資訊整合卡片 ---------- */ .wv-contact-info { background: var(--wv-paper); border: 1px solid rgba(216,210,196,.7); border-radius: 14px; padding: 1.5rem; box-shadow: 0 3px 14px rgba(34,56,44,.08); } .wv-contact-info .wv-ci-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px dashed var(--wv-line); } .wv-contact-info .wv-ci-item:last-child { border-bottom: none; } .wv-contact-info .wv-ci-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--wv-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0; margin-top: 2px; } .wv-contact-info .wv-ci-label { font-family: var(--wv-font-mono); font-size: .65rem; letter-spacing: .18em; color: var(--wv-steel); text-transform: uppercase; } .wv-contact-info .wv-ci-value { font-size: .92rem; color: var(--wv-ink); font-weight: 500; } /* 直撥電話 / 寄信卡 — 明亮白卡、高對比，hover 綠框金圈 */ .wv-call-card { display: flex; align-items: center; gap: 1rem; background: var(--wv-paper); border: 1px solid rgba(216,210,196,.7); color: var(--wv-ink); border-radius: 14px; padding: 1.1rem 1.3rem; text-decoration: none !important; transition: all .25s cubic-bezier(.4,0,.2,1); box-shadow: 0 3px 14px rgba(34,56,44,.08); } .wv-call-card:hover { border-color: rgba(74,108,86,.5); background: var(--wv-bone); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(34,56,44,.17); color: var(--wv-ink); } .wv-call-card .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--wv-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; transition: all .25s; } .wv-call-card:hover .ico { background: var(--wv-gold); color: var(--wv-ink); } .wv-call-card .k { font-family: var(--wv-font-mono); font-size: .62rem; letter-spacing: .18em; color: var(--wv-steel); text-transform: uppercase; } .wv-call-card .v { font-family: var(--wv-font-en); font-size: 1.4rem; font-weight: 800; letter-spacing: .03em; color: var(--wv-ink); } .wv-call-card:hover .v { color: var(--wv-green-dark); } /* 展覽資訊卡 — 仿票券造型（綠＋黃，TIDE 主視覺），非真實入場券 */ .wv-ticket { display: flex; flex-wrap: wrap; position: relative; background: linear-gradient(135deg, var(--wv-green) 0%, var(--wv-green-deep) 100%); color: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 54px rgba(34,56,44,.26); } .wv-ticket::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--wv-gold), #f3d27e, var(--wv-gold)); z-index: 2; } .wv-ticket .wv-ticket-main { flex: 1 1 340px; padding: 2.25rem; } .wv-ticket .wv-ticket-tag { display: inline-block; background: var(--wv-gold); color: var(--wv-ink); font-family: var(--wv-font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .22em; padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem; } .wv-ticket .wv-ticket-title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: .25rem; } .wv-ticket .wv-ticket-sub { font-family: var(--wv-font-en); font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; } /* 資訊列：標籤（金）+ 內容（白），由 Bootstrap row 控制 RWD */ .wv-ticket .wv-tk-k { font-family: var(--wv-font-mono); font-size: .64rem; letter-spacing: .14em; color: var(--wv-gold); text-transform: uppercase; padding-top: .2rem; } .wv-ticket .wv-tk-v { font-size: .98rem; font-weight: 600; } .wv-ticket .wv-tk-v small { display: block; font-weight: 400; color: rgba(255,255,255,.62); font-size: .78rem; line-height: 1.5; } /* 票根（右側黃色）以鋸齒虛線分隔 */ .wv-ticket .wv-ticket-stub { flex: 1 1 200px; max-width: 240px; padding: 2rem 1.5rem; background: linear-gradient(160deg, var(--wv-gold), #d6a531); color: var(--wv-ink); border-left: 2px dashed rgba(255,255,255,.65); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; } .wv-ticket .wv-ticket-stub::before, .wv-ticket .wv-ticket-stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; background: var(--wv-warm); border-radius: 50%; } .wv-ticket .wv-ticket-stub::before { top: -11px; } .wv-ticket .wv-ticket-stub::after { bottom: -11px; } .wv-ticket .wv-ticket-booth-label { font-family: var(--wv-font-mono); font-size: .6rem; letter-spacing: .2em; color: rgba(31,35,38,.7); } .wv-ticket .wv-ticket-booth { font-family: var(--wv-font-en); font-size: 2.6rem; font-weight: 900; color: var(--wv-green-dark); line-height: 1; margin: .3rem 0; } .wv-ticket .wv-ticket-note { font-family: var(--wv-font-mono); font-size: .56rem; letter-spacing: .12em; color: var(--wv-ink); border: 1px solid rgba(31,35,38,.35); border-radius: 999px; padding: .25rem .7rem; margin-top: .85rem; } @media (max-width: 575.98px) { .wv-ticket .wv-ticket-main { padding: 1.5rem; } .wv-ticket .wv-ticket-stub { flex-basis: 100%; max-width: 100%; border-left: none; border-top: 2px dashed rgba(255,255,255,.65); padding: 1.5rem; } .wv-ticket .wv-ticket-stub::before { top: -11px; left: -11px; } .wv-ticket .wv-ticket-stub::after { top: -11px; bottom: auto; left: auto; right: -11px; } } /* ---------- About 頁面綠色 Hero ---------- */ .wv-about-hero { background: linear-gradient(90deg, rgba(17,24,20,.88) 0%, rgba(17,24,20,.76) 28%, rgba(17,24,20,.48) 56%, rgba(17,24,20,.14) 100%), radial-gradient(circle at 84% 10%, rgba(231,186,77,.18), transparent 26%), url("/img/About/about-hero-industrial.png") center right / cover no-repeat, linear-gradient(135deg, #2c4436 0%, var(--wv-green) 52%, #3c5a48 100%); color: #fff; padding: 3.5rem 0; position: relative; overflow: hidden; } .wv-about-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; } .wv-about-hero .wv-crumb, .wv-about-hero .wv-crumb a { color: rgba(255,255,255,.75); text-shadow: 0 2px 10px rgba(0,0,0,.42); } .wv-about-hero h1 { color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.52); } .wv-about-hero .wv-lead { color: rgba(255,255,255,.82); text-shadow: 0 2px 12px rgba(0,0,0,.40); } .wv-about-hero .wv-rule { background: var(--wv-gold); } .wv-about-band { background: rgba(17,24,20,.97); border-bottom: 1px solid rgba(255,255,255,.12); padding: .9rem 0; } .wv-about-band__inner { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(320px, 1.6fr) auto; gap: 1rem 1.5rem; align-items: center; } .wv-about-band__brand { color: rgba(255,255,255,.52); font-size: .75rem; letter-spacing: .12em; line-height: 1.65; } .wv-about-band__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; color: rgba(255,255,255,.78); font-size: .8rem; } .wv-about-band__value { min-width: 0; line-height: 1.5; } .wv-about-band__value b { color: var(--wv-gold); margin-right: .35rem; } .wv-about-band__stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem 1.25rem; color: #fff; } .wv-about-band__stat { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; } .wv-about-band__stat strong { color: var(--wv-gold); font-size: 1.15rem; line-height: 1; } .wv-about-band__stat span { color: rgba(255,255,255,.52); font-size: .76rem; line-height: 1.35; } @media (max-width: 1199.98px) { .wv-about-band__inner { grid-template-columns: 1fr; } .wv-about-band__stats { justify-content: flex-start; } } @media (max-width: 767.98px) { .wv-about-band { padding: .8rem 0; } .wv-about-band__values { grid-template-columns: 1fr; } .wv-about-band__stats { gap: .75rem 1rem; } .wv-about-band__stat strong { font-size: 1.05rem; } .wv-about-band__stat span { font-size: .72rem; } } /* ---------- News 頁面綠色 Hero ---------- */ .wv-news-hero { background: linear-gradient(90deg, rgba(17,24,20,.88) 0%, rgba(17,24,20,.76) 28%, rgba(17,24,20,.48) 56%, rgba(17,24,20,.14) 100%), radial-gradient(circle at 84% 10%, rgba(231,186,77,.18), transparent 26%), url("/img/News/news-hero-expo.jpg") center right / cover no-repeat, linear-gradient(135deg, #2c4436 0%, var(--wv-green) 52%, #3c5a48 100%); color: #fff; padding: 3.5rem 0; position: relative; overflow: hidden; } .wv-news-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; } .wv-news-hero .wv-crumb, .wv-news-hero .wv-crumb a { color: rgba(255,255,255,.75); text-shadow: 0 2px 10px rgba(0,0,0,.42); } .wv-news-hero h1 { color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.52); } .wv-news-hero .wv-lead { color: rgba(255,255,255,.82); text-shadow: 0 2px 12px rgba(0,0,0,.40); } .wv-news-hero .wv-eyebrow { color: rgba(255,255,255,.92); font-weight: 600; letter-spacing: .12em; text-shadow: 0 2px 10px rgba(0,0,0,.35); } /* ---------- Contact 頁面綠色 Hero ---------- */ .wv-contact-hero { background: linear-gradient(90deg, rgba(17,24,20,.88) 0%, rgba(17,24,20,.76) 28%, rgba(17,24,20,.48) 56%, rgba(17,24,20,.14) 100%), radial-gradient(circle at 84% 10%, rgba(231,186,77,.18), transparent 26%), url("/img/Contact/contact-hero-showroom.png") center right / cover no-repeat, linear-gradient(135deg, #2c4436 0%, var(--wv-green) 52%, #3c5a48 100%); color: #fff; padding: 3.5rem 0; position: relative; overflow: hidden; } .wv-contact-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; } .wv-contact-hero .wv-crumb, .wv-contact-hero .wv-crumb a { color: rgba(255,255,255,.75); text-shadow: 0 2px 10px rgba(0,0,0,.42); } .wv-contact-hero h1 { color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.52); } .wv-contact-hero .wv-lead { color: rgba(255,255,255,.82); text-shadow: 0 2px 12px rgba(0,0,0,.40); } /* Hero 右側資訊卡 — 明亮白卡、綠字金邊，清爽不深色 */ .wv-hero-slogan { background: rgba(248,250,248,.86); border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; padding: 1.75rem; box-shadow: 0 20px 48px rgba(0,0,0,.2); position: relative; overflow: hidden; } .wv-hero-slogan::before { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(74,108,86,.12) 0%, transparent 70%); pointer-events: none; } /* 左上角金色角標 */ .wv-hero-slogan::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--wv-gold); } .wv-hero-slogan .wv-mono-tag { color: var(--wv-green); font-family: var(--wv-font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; } .wv-hero-slogan .lines { margin-top: 1rem; } .wv-hero-slogan .lines .l { display: flex; align-items: baseline; gap: .85rem; padding: .55rem 0; border-bottom: 1px dashed var(--wv-line); } .wv-hero-slogan .lines .l:last-child { border-bottom: none; } .wv-hero-slogan .lines .num { font-family: var(--wv-font-mono); font-size: .7rem; color: var(--wv-steel); width: 32px; } .wv-hero-slogan .lines .zh { font-size: 1.1rem; font-weight: 800; color: var(--wv-ink); letter-spacing: .04em; } .wv-hero-slogan .lines .en { font-family: var(--wv-font-mono); font-size: .72rem; color: var(--wv-green); letter-spacing: .16em; margin-left: auto; } .wv-hero-slogan .wv-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--wv-line); } .wv-hero-slogan .wv-mini-stats .ms .n { font-family: var(--wv-font-en); font-size: 1.5rem; font-weight: 800; color: var(--wv-green); line-height: 1; } .wv-hero-slogan .wv-mini-stats .ms .t { font-family: var(--wv-font-mono); font-size: .62rem; color: var(--wv-steel); letter-spacing: .15em; text-transform: uppercase; margin-top: .25rem; } /* ---------- 頂部導航 Bootstrap 5 下拉選單 ---------- */ .wv-topbar nav.wv-nav .dropdown { position: relative; } /* 覆蓋 Bootstrap 預設 caret，改用 FA 圖示 */ .wv-topbar nav.wv-nav .dropdown-toggle::after { border: none; width: auto; height: auto; margin-left: .35rem; vertical-align: .05em; content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .58rem; opacity: .55; } .wv-topbar nav.wv-nav .dropdown-menu { min-width: 240px; background: var(--wv-paper); border: 1px solid var(--wv-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(34,56,44,.15); padding: .5rem; z-index: 300; margin-top: 4px; animation: wvSlideUp .18s ease; } /* 桌機 hover 也觸發 */ @media (min-width: 992px) { .wv-topbar nav.wv-nav .dropdown:hover > .dropdown-menu { display: block; } } .wv-topbar nav.wv-nav .dropdown-item { display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; border-radius: 4px; color: var(--wv-ink); font-weight: 500; font-size: .92rem; transition: background .15s, color .15s; } .wv-topbar nav.wv-nav .dropdown-item:hover, .wv-topbar nav.wv-nav .dropdown-item:focus { background: var(--wv-gold); color: var(--wv-ink); } .wv-topbar nav.wv-nav .dropdown-item:hover .badge-tag, .wv-topbar nav.wv-nav .dropdown-item:focus .badge-tag { background: var(--wv-green-dark); color: #fff; } .wv-topbar nav.wv-nav .dropdown-item.active { background: linear-gradient(135deg, rgba(74,108,86,.12), rgba(231,186,77,.16)); color: var(--wv-green-dark); font-weight: 800; } .wv-topbar nav.wv-nav .dropdown-item.active .badge-tag { background: var(--wv-gold); color: var(--wv-ink); } .wv-topbar nav.wv-nav .dropdown-item.active::after { display: none; } .wv-topbar nav.wv-nav .dropdown-item .badge-tag { background: var(--wv-green); color: #fff; font-family: var(--wv-font-mono); font-size: .58rem; letter-spacing: .06em; border-radius: 3px; width: 34px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .wv-mobile-menu .wv-mm-sub { padding-left: 1rem; background: var(--wv-bone); border-top: 1px solid var(--wv-line); } .wv-mobile-menu .wv-mm-sub a { font-size: .9rem; padding: .65rem 1.25rem; } .wv-mobile-menu .wv-mm-sub a.active { border-left: 4px solid var(--wv-gold); color: var(--wv-green-dark); font-weight: 800; background: rgba(74,108,86,.08); } /* ---------- 系列獨立頁 Hero ---------- */ .wv-series-hero { background: linear-gradient(90deg, rgba(17,24,20,.88) 0%, rgba(17,24,20,.76) 28%, rgba(17,24,20,.48) 56%, rgba(17,24,20,.14) 100%), radial-gradient(circle at 84% 10%, rgba(231,186,77,.18), transparent 26%), url("/img/Product/ProductAll_BG.jpg") center right / cover no-repeat, linear-gradient(135deg, #2c4436 0%, var(--wv-green) 52%, #3c5a48 100%); color: #fff; padding: 3rem 0 3.5rem; position: relative; overflow: hidden; } .wv-series-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; } .wv-series-hero .wv-crumb, .wv-series-hero .wv-crumb a { color: rgba(255,255,255,.6); } .wv-series-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; } .wv-series-hero .series-letter { font-family: var(--wv-font-en); font-size: 7rem; font-weight: 900; color: var(--wv-gold); line-height: .9; letter-spacing: -.04em; } .wv-series-hero p { color: rgba(255,255,255,.78); max-width: 580px; } .wv-series-hero .wv-hero-thumb { background: rgba(248,250,248,.86); border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; padding: 1.25rem; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 48px rgba(0,0,0,.2); transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s; } .wv-series-hero .wv-hero-thumb::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--wv-gold); } .wv-series-hero .wv-hero-thumb:hover { transform: translateY(-4px); box-shadow: 0 32px 64px rgba(0,0,0,.28); } .wv-series-hero .wv-hero-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.1)); } /* ---------- 實拍照片輪播 Hero Carousel ---------- */ .wv-hero .wv-hero-carousel, .wv-series-hero .wv-hero-carousel { background: rgba(248,250,248,.86); border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 48px rgba(0,0,0,.2); position: relative; transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s; } .wv-hero .wv-hero-carousel:hover, .wv-series-hero .wv-hero-carousel:hover { transform: translateY(-5px); box-shadow: 0 32px 64px rgba(0,0,0,.28); } .wv-hero .wv-hero-carousel::before, .wv-series-hero .wv-hero-carousel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--wv-gold); z-index: 10; pointer-events: none; } .wv-hero-carousel .carousel-item a { display: block; } .wv-hero-carousel .carousel-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .wv-hero-carousel .carousel-indicators { margin-bottom: 6px; } .wv-hero-carousel .carousel-indicators [data-bs-target] { width: 7px; height: 7px; border-radius: 50%; border: none; background-color: #fff; opacity: .5; margin: 0 3px; transition: opacity .25s; } .wv-hero-carousel .carousel-indicators .active { opacity: 1; } /* 切換鈕貼齊兩側邊緣、平時隱藏，滑入才浮現，避免遮擋產品圖 */ .wv-hero-carousel .carousel-control-prev, .wv-hero-carousel .carousel-control-next { width: 48px; opacity: 0; transition: opacity .25s; } .wv-hero-carousel .carousel-control-prev { justify-content: flex-start; padding-left: 6px; } .wv-hero-carousel .carousel-control-next { justify-content: flex-end; padding-right: 6px; } .wv-hero-carousel:hover .carousel-control-prev, .wv-hero-carousel:hover .carousel-control-next { opacity: .92; } .wv-hero-carousel .carousel-control-prev-icon, .wv-hero-carousel .carousel-control-next-icon { width: 30px; height: 30px; padding: 8px; background-color: rgba(34,56,44,.55); border-radius: 50%; background-size: 48%; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: background-color .2s; } .wv-hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon, .wv-hero-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--wv-green); } .wv-hero-carousel .wv-real-badge { position: absolute; bottom: 10px; left: 12px; background: rgba(231,186,77,.92); color: var(--wv-ink); font-family: var(--wv-font-mono); font-size: .62rem; letter-spacing: .18em; font-weight: 700; padding: .2rem .55rem; border-radius: 3px; z-index: 5; pointer-events: none; } /* ---------- Product System Overview (產品系統總覽) ---------- */ .wv-sys-overview { background: radial-gradient(circle at 88% 0%, rgba(74,108,86,.07), transparent 42%), linear-gradient(180deg, var(--wv-bone) 0%, #efece4 100%); border-bottom: 1px solid var(--wv-line); padding: 2.6rem 0 2.8rem; } .wv-sys-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.6rem; } .wv-sys-eyebrow { font-family: var(--wv-font-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wv-green); font-weight: 700; margin-bottom: .35rem; } .wv-sys-head h2 { color: var(--wv-green-dark); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; margin: 0; line-height: 1.2; } .wv-sys-certs { display: flex; flex-wrap: wrap; gap: .4rem; } .wv-sys-certs span { font-family: var(--wv-font-mono); font-size: .66rem; letter-spacing: .07em; color: var(--wv-green-deep); background: #fff; border: 1px solid var(--wv-line); border-radius: 7px; padding: .32rem .6rem; white-space: nowrap; } .wv-sys-certs span.cycles { background: linear-gradient(135deg, var(--wv-green), var(--wv-green-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(74,108,86,.28); } .wv-sys-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wv-line); border-radius: 14px; padding: 1.45rem 1.3rem 1.3rem; height: 100%; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; } .wv-sys-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--wv-green), var(--wv-gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .wv-sys-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(34,56,44,.14); border-color: rgba(74,108,86,.4); text-decoration: none; } .wv-sys-card:hover::before { transform: scaleX(1); } .wv-sys-card .letter { width: 48px; height: 48px; background: linear-gradient(135deg, var(--wv-green), var(--wv-green-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.55rem; font-family: var(--wv-font-en); box-shadow: 0 6px 16px rgba(74,108,86,.32); margin-bottom: .95rem; } .wv-sys-card h3 { font-size: 1.06rem; font-weight: 800; color: var(--wv-ink); margin: 0 0 .1rem; } .wv-sys-card .en { font-family: var(--wv-font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wv-green); font-weight: 700; margin-bottom: .7rem; } .wv-sys-card p { font-size: .78rem; color: var(--wv-steel); line-height: 1.55; margin: 0 0 1rem; flex: 1; } .wv-sys-card .more { font-family: var(--wv-font-mono); font-size: .7rem; font-weight: 700; color: var(--wv-green); letter-spacing: .08em; display: inline-flex; align-items: center; gap: .4rem; } .wv-sys-card:hover .more { color: var(--wv-green-dark); } .wv-sys-card .more i { transition: transform .25s; } .wv-sys-card:hover .more i { transform: translateX(4px); } /* ---------- Key Features Strip (六大特點條) ---------- */ .wv-key-feats { background: var(--wv-green-dark); border-bottom: 1px solid rgba(231,186,77,.14); } .wv-kf { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.1rem .6rem; border-right: 1px solid rgba(255,255,255,.06); transition: background .2s; gap: .3rem; height: 100%; } .wv-kf:hover { background: rgba(255,255,255,.04); } .wv-kf i { color: var(--wv-gold); font-size: 1.2rem; } .wv-kf strong { color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.25; } .wv-kf span { color: rgba(255,255,255,.46); font-size: .66rem; font-family: var(--wv-font-mono); letter-spacing: .07em; } .wv-key-feats .col:last-child .wv-kf { border-right: none; } @media (max-width: 991.98px) { .wv-key-feats .col:nth-child(3) .wv-kf, .wv-key-feats .col:nth-child(6) .wv-kf { border-right: none; } .wv-key-feats .col:nth-child(n+4) .wv-kf { border-top: 1px solid rgba(255,255,255,.06); } } @media (max-width: 575.98px) { .wv-key-feats .col:nth-child(odd) .wv-kf { border-right: 1px solid rgba(255,255,255,.06); } .wv-key-feats .col:nth-child(even) .wv-kf { border-right: none; } .wv-key-feats .col:nth-child(n+3) .wv-kf { border-top: 1px solid rgba(255,255,255,.06); } } /* 系列頁麵包屑 active */ .wv-series-nav { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--wv-line); box-shadow: 0 8px 22px rgba(31,35,38,.06); position: sticky; top: 0; z-index: 120; backdrop-filter: blur(8px); } .wv-series-nav .container { padding: .75rem 1rem; } .wv-series-nav .row { justify-content: center; } .wv-series-nav [class*="col-"] { display: flex; } .wv-series-nav a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; padding: .65rem .9rem; border-radius: 8px; font-family: var(--wv-font-mono); font-weight: 600; font-size: .78rem; letter-spacing: .12em; line-height: 1.35; color: var(--wv-steel); border: 1.5px solid var(--wv-line); background: var(--wv-paper); transition: all .25s ease; white-space: normal; word-break: keep-all; text-align: center; text-decoration: none; position: relative; overflow: hidden; } .wv-series-nav a:hover { border-color: var(--wv-green); color: var(--wv-green-dark); background: rgba(74,108,86,.07); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(74,108,86,.18); } .wv-series-nav a.active { background: linear-gradient(135deg, var(--wv-green), var(--wv-green-dark)); border-color: var(--wv-green-dark); color: #fff; box-shadow: 0 6px 18px rgba(74,108,86,.26); position: relative; } .wv-series-nav a.active::before { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: -8px; height: 3px; background: var(--wv-gold); border-radius: 999px; } .wv-series-nav a.active:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(74,108,86,.32); } /* ---------- Fancybox / image affordance ---------- */ .wv-fancybox-link { position: relative; overflow: hidden; cursor: zoom-in; text-decoration: none !important; } .wv-fancybox-link .wv-zoom-cue { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; background: rgba(31,35,38,.78); color: #fff; font-family: var(--wv-font-mono); font-size: .68rem; letter-spacing: .08em; opacity: 0; transform: translateY(6px); transition: all .2s ease; backdrop-filter: blur(4px); } .wv-fancybox-link:hover .wv-zoom-cue, .wv-fancybox-link:focus .wv-zoom-cue { opacity: 1; transform: translateY(0); } .wv-fancybox-link:hover img { transform: scale(1.035); } /* ---------- 實機拍攝輪播 Real-photo carousel ---------- */ .wv-photo-carousel { border: 1px solid var(--wv-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px -28px rgba(31,35,38,.4); } .wv-photo-frame { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wv-bone); } .wv-photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } /* 平滑交叉淡入切換（比 slide 更順滑） */ .wv-photo-carousel.carousel-fade .carousel-item { transition: opacity .45s ease-in-out; } .wv-photo-cap { border-top: 1px solid var(--wv-line); padding: .7rem 1rem; background: var(--wv-bone); font-size: .82rem; color: var(--wv-ink); text-align: center; } .wv-photo-cap .sub { color: var(--wv-steel); font-style: italic; } .wv-photo-carousel .wv-photo-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--wv-green); border: 1px solid var(--wv-line); box-shadow: 0 6px 16px -8px rgba(31,35,38,.5); transition: all .2s ease; } .wv-photo-carousel .carousel-control-prev, .wv-photo-carousel .carousel-control-next { width: 12%; opacity: 1; } .wv-photo-carousel .carousel-control-prev:hover .wv-photo-ctrl, .wv-photo-carousel .carousel-control-next:hover .wv-photo-ctrl { background: var(--wv-green); color: #fff; } .wv-photo-dots { margin-bottom: .35rem; } .wv-photo-dots button { width: 9px !important; height: 9px !important; border-radius: 50% !important; border: 0 !important; background-color: rgba(31,35,38,.28) !important; opacity: 1 !important; transition: all .2s ease; } .wv-photo-dots button.active { background-color: var(--wv-gold) !important; transform: scale(1.25); } /* ---------- 創辦者的話 ---------- */ .founder-message-section { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(245,243,238,.9)); } .founder-message { background: var(--wv-paper); border: 1px solid var(--wv-line); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 56px rgba(31,35,38,.1); } .founder-message-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 2rem; background: radial-gradient(circle at 88% 12%, rgba(231,186,77,.24), transparent 28%), linear-gradient(135deg, var(--wv-graphite) 0%, var(--wv-green-dark) 100%); color: #fff; } .founder-message-head h3 { margin: .3rem 0 .35rem; color: #fff; font-size: clamp(1.55rem, 2.6vw, 2.25rem); font-weight: 900; } .founder-message-head p { margin: 0; color: rgba(255,255,255,.76); font-family: var(--wv-font-mono); letter-spacing: .08em; } .founder-signature { min-width: 180px; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.22); border-left: 4px solid var(--wv-gold); border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } .founder-signature .name { color: #fff; font-family: var(--wv-font-en); font-size: 1rem; font-weight: 800; letter-spacing: .03em; text-transform: none; } .founder-grid { display: grid; grid-template-columns: 1fr; } .founder-copy { padding: 2.4rem clamp(1.5rem, 5vw, 4rem); color: var(--wv-ink); } .founder-copy.zh { background: linear-gradient(180deg, #fff, var(--wv-warm)); } .founder-copy.zh:not(:last-child) { border-bottom: 1px solid var(--wv-line); } .founder-copy.en { background: linear-gradient(180deg, #fff, #f7f7f4); } .founder-copy h4 { margin: 0 0 1.4rem; padding-bottom: .85rem; border-bottom: 3px solid var(--wv-gold); color: var(--wv-green-dark); font-weight: 900; } .founder-copy section + section { margin-top: 1.65rem; padding-top: 1.65rem; border-top: 1px dashed var(--wv-line); } .founder-copy h5 { margin-bottom: .8rem; color: var(--wv-graphite); font-weight: 850; } .founder-copy p, .founder-copy li { color: #3f4445; font-size: .95rem; line-height: 1.82; } .founder-copy ul, .founder-copy ol { padding-left: 1.25rem; margin-bottom: 1rem; } .founder-copy li + li { margin-top: .45rem; } .founder-code { display: inline-block; margin: .3rem 0 .2rem; padding: .45rem .8rem; border: 1px solid rgba(74,108,86,.22); border-left: 4px solid var(--wv-green); border-radius: 6px; background: rgba(74,108,86,.07); color: var(--wv-green-dark); font-family: var(--wv-font-mono); font-weight: 800; letter-spacing: .08em; } .founder-slogan { margin: 1rem 0; padding: 1rem 1.15rem; border-left: 4px solid var(--wv-gold); background: linear-gradient(135deg, rgba(231,186,77,.16), rgba(74,108,86,.08)); color: var(--wv-green-dark); font-weight: 900; line-height: 1.9; letter-spacing: .06em; } .founder-date { color: var(--wv-steel) !important; font-family: var(--wv-font-mono); font-size: .78rem !important; letter-spacing: .12em; text-transform: uppercase; } /* ---------- 輔助 ---------- */ .wv-divider { height: 1px; background: var(--wv-line); margin: 3rem 0; } .wv-tag-gold { background: var(--wv-gold); color: var(--wv-ink); padding: .3rem .65rem; font-family: var(--wv-font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-indent: .2em; line-height: 1; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; text-align: center; } .wv-tag-green { background: var(--wv-green); color: #fff; padding: .2rem .55rem; font-family: var(--wv-font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .2em; border-radius: 3px; display: inline-block; } /* ---------- 雙語說明框 ---------- */ .wv-bilingual-note { background: var(--wv-bone); border: 1px solid var(--wv-line); border-left: 4px solid var(--wv-green); border-radius: 0 6px 6px 0; padding: 1rem 1.25rem; margin-top: 1.5rem; line-height: 1.8; } .wv-bilingual-note .zh { color: var(--wv-ink); font-weight: 500; font-size: .9rem; } .wv-bilingual-note .en { font-style: italic; color: var(--wv-steel); font-size: .85rem; margin-top: .4rem; } /* ---------- 動畫增強 ---------- */ @keyframes wvPulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } } @keyframes wvSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes wvShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } @keyframes wvSloganSweep { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .wv-animate-pulse { animation: wvPulse 2.5s ease-in-out infinite; } .wv-section-title h2 { position: relative; } /* ---------- RWD 微調 ---------- */ @media (max-width: 767.98px) { .wv-section { padding: 3rem 0; } .wv-hero { background-position: 66% center; padding: 3rem 0 3.5rem; } .wv-hero .row > .col-lg-7::before { inset: -.8rem -.65rem; background: rgba(10,18,14,.68); border-radius: 10px; } .wv-tide-hero { padding: 1.75rem; } .wv-builder { padding: 1.25rem; } .wv-countdown .cell .n { font-size: 1.8rem; } .wv-3d-overlay iframe { width: 100vw; height: 100vh; border-radius: 0; } .wv-product-card .wv-pc-actions { flex-direction: column; } .wv-product-card .wv-pc-actions .wv-btn { width: 100%; justify-content: center; } .wv-series-hero .series-letter { font-size: 4.5rem; } .wv-series-hero { padding: 2.25rem 0 2.5rem; } .wv-about-hero { padding: 2.25rem 0; } .wv-hero-slogan { padding: 1.25rem; } .wv-hero-slogan .lines .num { display: none; } .wv-hero-slogan .lines .en { font-size: .65rem; } .wv-hero-slogan .wv-mini-stats .ms .n { font-size: 1.2rem; } .wv-series-nav .container { padding: .6rem .5rem; } .wv-series-nav a { font-size: .7rem; padding: .55rem .35rem; letter-spacing: .05em; min-width: 0; } .wv-section-title { margin-bottom: 1.5rem; } .wv-section-title h2 { font-size: 1.25rem; } .founder-message-head { align-items: flex-start; flex-direction: column; padding: 1.5rem; } .founder-copy { padding: 1.5rem; } .wv-topbar .wv-brand-name { font-size: .95rem; } .wv-topbar .wv-brand-tag { font-size: .58rem; letter-spacing: .15em; } .wv-foot-bot { flex-direction: column; align-items: flex-start; } .wv-3d-title { top: 12px; left: 12px; font-size: .72rem; } .wv-3d-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 1.2rem; } } @media (max-width: 575.98px) { .wv-series-hero .series-letter { font-size: 3.5rem; } .wv-hero-slogan .lines .zh { font-size: .98rem; } .wv-hero-slogan .wv-mini-stats { grid-template-columns: repeat(3, 1fr); gap: .35rem; } .wv-hero-slogan .wv-mini-stats .ms .n { font-size: 1rem; } .wv-hero-slogan .wv-mini-stats .ms .t { font-size: .55rem; } .wv-spec-table th, .wv-spec-table td { font-size: .72rem; } .wv-card { padding: 1.1rem; } .wv-series-row { padding: 1.1rem; } .founder-message-head { padding: 1.25rem; } .founder-copy { padding: 1.2rem; } .founder-copy p, .founder-copy li { font-size: .9rem; } } /* ===================================================== Journey / Milestone Timeline (News Page) ===================================================== */ .wv-journey { display: flex; flex-direction: column; gap: 1rem; } .wv-journey-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--wv-line); border-radius: 8px; background: var(--wv-bone); transition: all .25s; } .wv-journey-item:hover { border-color: var(--wv-green); box-shadow: 0 4px 12px rgba(74,108,86,.12); } .wv-journey-item:last-child { border-bottom: 1px solid var(--wv-line); } .wv-journey-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: .4rem; box-shadow: 0 0 0 4px rgba(74,108,86,.15); } .wv-journey-body { flex: 1; min-width: 0; } .wv-journey-title { font-weight: 800; font-size: 1.05rem; color: var(--wv-ink); margin: .15rem 0 .35rem; } .wv-journey-desc { color: var(--wv-steel); font-size: .87rem; line-height: 1.65; } /* Catalog photo strip (Product Index — New Hinge System) */ .wv-catalog-photo { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--wv-paper); border: 1px solid var(--wv-line); transition: transform .25s, box-shadow .25s; } .wv-catalog-photo img { width: 100%; height: 100%; object-fit: cover; } .wv-catalog-photo:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(34,56,44,.15); } /* Cert photo strip (Product Index — Certifications) */ .wv-cert-photo { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--wv-paper); border: 1px solid var(--wv-line); transition: transform .25s, box-shadow .25s; } .wv-cert-photo img { width: 100%; height: 100%; object-fit: cover; } .wv-cert-photo:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(34,56,44,.15); } /* DM catalog preview card — image thumbnail with hover overlay */ .wv-dm-thumb { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid var(--wv-line); box-shadow: 0 14px 34px rgba(34,56,44,.20), 0 3px 8px rgba(34,56,44,.10); transition: transform .28s, box-shadow .28s; background: #fff; height: clamp(200px, 24vw, 250px); display: flex; align-items: center; justify-content: center; padding: .35rem; } .wv-dm-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .wv-dm-thumb:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(34,56,44,.28), 0 6px 16px rgba(34,56,44,.14); } .wv-dm-overlay { position: absolute; inset: 0; background: rgba(34,56,44,.72); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .25s; gap: .4em; } .wv-dm-thumb:hover .wv-dm-overlay { opacity: 1; } @media (max-width: 767.98px) { .wv-journey-title { font-size: .97rem; } .wv-journey-item { padding: .85rem; gap: .75rem; } .wv-journey-dot { margin-top: .3rem; } } /* ---------- 格子網底效果 ---------- */ .wv-grid-bg { position: relative; overflow: hidden; } .wv-grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(74, 108, 86, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 108, 86, 0.02) 1px, transparent 1px); background-size: 56px 56px; z-index: 0; } .wv-grid-bg > .container, .wv-grid-bg > div { position: relative; z-index: 1; } /* ===== 不鏽鋼工業斜紋（白底區塊） ===== */ .wv-grid-tech { position: relative; overflow: hidden; } .wv-grid-tech::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 28px, rgba(88,94,97,.055) 28px, rgba(88,94,97,.055) 29px, transparent 29px, transparent 78px, rgba(88,94,97,.028) 78px, rgba(88,94,97,.028) 79px ); -webkit-mask-image: radial-gradient(ellipse 108% 92% at 50% 30%, #000 34%, transparent 74%); mask-image: radial-gradient(ellipse 108% 92% at 50% 30%, #000 34%, transparent 74%); } .wv-grid-tech > .container { position: relative; z-index: 1; } /* ===== MDEA 圖片框 ===== */ .wv-mdea-gallery { background: #fff; border: 1px solid var(--wv-line); border-top: 3px solid var(--wv-green); border-radius: 14px; padding: 1.1rem; box-shadow: 0 6px 22px rgba(34,56,44,.09), 0 1px 4px rgba(34,56,44,.05); } .wv-mdea-gallery .wv-mdea-main a { display: block; } .wv-mdea-gallery .wv-mdea-main img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; background: #fff; } .wv-mdea-gallery .wv-mdea-thumbs { display: flex; gap: .6rem; margin-top: .65rem; } .wv-mdea-gallery .wv-mdea-thumbs a { flex: 1; display: block; } .wv-mdea-gallery .wv-mdea-thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--wv-line); } /* ===== 16 Products Mini Card ===== */ .wv-mini-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--wv-line); border-top: 3px solid var(--wv-green); border-radius: .5rem; background: #fff; text-decoration: none !important; color: var(--wv-ink); transition: border-color .25s, box-shadow .25s, transform .25s; overflow: hidden; box-shadow: 0 2px 8px rgba(34,56,44,.06); } .wv-mini-card:hover { border-color: var(--wv-green); border-top-color: var(--wv-gold); box-shadow: 0 12px 26px rgba(34,56,44,.16), 0 3px 8px rgba(74,108,86,.12); transform: translateY(-4px); } .wv-mini-card img { width: 100%; height: auto; object-fit: contain; aspect-ratio: 4/3; background: #fff; transition: transform .4s; } .wv-mini-card:hover img { transform: scale(1.05); } .wv-mini-card span { font-family: var(--wv-font-mono); font-size: .78rem; font-weight: 700; color: var(--wv-ink); letter-spacing: .06em; padding: .4rem .5rem .1rem; text-align: center; } .wv-mini-card small { font-size: .68rem; color: var(--wv-steel); text-align: center; line-height: 1.2; padding: 0 .5rem .45rem; } figure.wv-mini-card { margin: 0; } .wv-mini-card .wv-mc-zoom { display: block; position: relative; cursor: zoom-in; line-height: 0; } .wv-mini-card .wv-mc-cue { position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34,56,44,.55); color: #fff; font-size: .7rem; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; } .wv-mini-card:hover .wv-mc-cue { opacity: 1; transform: scale(1); } /* ===== 產品型錄 Catalog ===== */ .wv-cat-series { margin-bottom: 2.25rem; } .wv-cat-series:last-child { margin-bottom: 0; } .wv-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: .8rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--wv-line); } .wv-cat-id { display: flex; align-items: center; gap: .9rem; } .wv-cat-letter { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, var(--wv-green), var(--wv-green-dark)); color: #fff; font-family: var(--wv-font-mono); font-weight: 800; font-size: 1.4rem; box-shadow: 0 4px 12px rgba(74,108,86,.28); } .wv-cat-name { display: flex; flex-direction: column; line-height: 1.3; } .wv-cat-name strong { font-size: 1.05rem; color: var(--wv-ink); font-weight: 800; } .wv-cat-name span { font-family: var(--wv-font-mono); font-size: .7rem; letter-spacing: .05em; color: var(--wv-steel); } .wv-cat-link { font-family: var(--wv-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .05em; color: var(--wv-green); white-space: nowrap; text-decoration: none; transition: color .2s, transform .2s; } .wv-cat-link:hover { color: var(--wv-green-dark); transform: translateX(3px); } /* MDEA 特性標語 */ .wv-mdea-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .5rem; } .wv-mdea-tags span { font-family: var(--wv-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wv-green-dark); padding: .25rem .6rem; border: 1px solid rgba(74,108,86,.35); border-radius: 999px; background: rgba(74,108,86,.06); } /* 隱藏電線 W 規格卡 */ .wv-wire-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .6rem; } @media (max-width: 480px) { .wv-wire-spec { grid-template-columns: 1fr; } } .wv-wire-spec .item { border: 1px solid var(--wv-line); border-left: 3px solid var(--wv-gold); border-radius: 8px; padding: .65rem .85rem; background: #fff; cursor: pointer; transition: all .25s; } .wv-wire-spec .item:hover { border-color: var(--wv-gold); border-left-color: var(--wv-green); background: rgba(231,186,77,.05); box-shadow: 0 4px 12px rgba(231,186,77,.2), inset 0 1px 3px rgba(74,108,86,.05); } .wv-wire-spec .item b { display: block; font-family: var(--wv-font-mono); font-size: .78rem; color: var(--wv-ink); letter-spacing: .05em; font-weight: 700; } .wv-wire-spec .item small { font-size: .7rem; color: var(--wv-steel); } /* 產品規格卡片 */ .wv-spec-card { border: 1px solid var(--wv-line); border-radius: 8px; padding: 1rem; background: var(--wv-bone); transition: all .25s; } .wv-spec-card:hover { border-color: var(--wv-green); box-shadow: 0 4px 12px rgba(74,108,86,.12); } .wv-spec-label { font-family: var(--wv-font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--wv-steel); margin-bottom: .5rem; text-transform: uppercase; } .wv-spec-content { display: flex; flex-direction: column; gap: .3rem; } .wv-mono-tag { font-family: var(--wv-font-mono); font-weight: 700; font-size: .95rem; color: var(--wv-green); letter-spacing: .08em; } /* 小規格卡 */ .wv-spec-mini { border: 1px solid var(--wv-line); border-left: 3px solid var(--wv-gold); border-radius: 6px; padding: .6rem; background: #fff; text-align: center; } .wv-spec-mini strong { display: block; font-family: var(--wv-font-mono); font-size: .82rem; color: var(--wv-ink); margin-bottom: .3rem; } /* ===== Feature SM (MDEA callout) ===== */ .wv-feature-sm { display: flex; align-items: center; gap: .5rem; font-size: .83rem; color: var(--wv-ink); padding: .45rem .65rem; background: var(--wv-bone); border-radius: .375rem; border: 1px solid var(--wv-line); } /* ===================================================== Applications Page ===================================================== */ .wv-app-hero { background: linear-gradient(90deg, rgba(14,15,16,.86) 0%, rgba(14,15,16,.70) 34%, rgba(14,15,16,.32) 60%, rgba(14,15,16,.06) 100%), radial-gradient(circle at 82% 18%, rgba(231,186,77,.16), transparent 24%), url("/img/Applications/applications-product-hero.jpg") center center / cover no-repeat, linear-gradient(135deg, #18191b 0%, #4b4844 52%, #242528 100%); color: #fff; position: relative; overflow: hidden; padding: 4.5rem 0 4.75rem; } .wv-app-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; } .wv-app-hero > .container { position: relative; z-index: 1; } .wv-app-hero .wv-eyebrow { color: var(--wv-gold); } .wv-app-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.45rem); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.28); } .wv-app-hero .wv-lead { color: rgba(255,255,255,.8); font-size: 1.04rem; max-width: 44rem; text-shadow: 0 1px 4px rgba(0,0,0,.22); } .wv-app-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; } .wv-app-stat { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.09); color: #fff; font-family: var(--wv-font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(4px); } .wv-app-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } .wv-app-tile { display: block; position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 18px 40px rgba(0,0,0,.24); color: #fff !important; text-decoration: none !important; } .wv-app-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,9,.04) 20%, rgba(7,11,9,.84)); } .wv-app-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .35s ease; } .wv-app-tile:hover img { transform: scale(1.04); } .wv-app-caption { position: absolute; left: 1rem; right: 1rem; bottom: .95rem; z-index: 1; padding: .55rem .7rem; border-radius: 12px; background: linear-gradient(180deg, rgba(10,14,12,.08), rgba(10,14,12,.46)); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(4px); } .wv-app-kicker { display: inline-flex; align-items: center; justify-content: center; padding: .22rem .55rem; border-radius: 999px; background: rgba(231,186,77,.96); color: var(--wv-ink); font-family: var(--wv-font-mono); font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .wv-app-caption .title { margin-top: .35rem; font-size: 1rem; font-weight: 800; line-height: 1.22; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .wv-app-caption .sub { margin-top: .2rem; color: rgba(255,255,255,.92); font-size: .72rem; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.45); } .wv-app-photo { display: block; overflow: hidden; border-bottom: 1px solid var(--wv-line); background: #fff; } .wv-app-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .35s ease; } .wv-app-photo:hover img { transform: scale(1.04); } .wv-app-scene { padding: 0 !important; overflow: hidden; } .wv-app-scene .wv-card-body { padding: 1rem 1rem 1.1rem; } .wv-app-scene .wv-card-desc { display: flex; flex-direction: column; gap: .15rem; min-height: auto; } .wv-app-tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; } .wv-app-tag { padding: .23rem .55rem; border-radius: 999px; border: 1px solid rgba(74,108,86,.22); background: rgba(74,108,86,.07); color: var(--wv-green-dark); font-family: var(--wv-font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .wv-app-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .wv-app-fit { height: 100%; border: 1px solid var(--wv-line); border-radius: 14px; padding: 1rem 1rem 1.1rem; background: #fff; box-shadow: 0 4px 14px rgba(34,56,44,.08); } .wv-app-fit h3 { margin: .45rem 0 .35rem; font-size: 1rem; font-weight: 800; color: var(--wv-ink); } .wv-app-fit p { margin: 0; color: var(--wv-steel); font-size: .9rem; line-height: 1.7; } .wv-app-mini { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; } .wv-app-mini span { display: inline-flex; align-items: center; justify-content: center; padding: .22rem .5rem; border-radius: 999px; background: rgba(74,108,86,.08); color: var(--wv-green-dark); font-family: var(--wv-font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Applications lower sections */ .wv-app-wire-card, .wv-app-product-card, .wv-app-mdea-feature, .wv-app-values-card { background: #fff; border: 1px solid var(--wv-line); border-radius: 18px; box-shadow: 0 8px 22px rgba(34,56,44,.08); transition: all .3s cubic-bezier(.4,0,.2,1); } .wv-app-wire-card:hover, .wv-app-product-card:hover, .wv-app-mdea-feature:hover, .wv-app-values-card:hover { border-color: rgba(74,108,86,.45); box-shadow: 0 22px 44px rgba(34,56,44,.20), 0 6px 14px rgba(34,56,44,.12); transform: translateY(-4px); } .wv-app-wire-card { height: 100%; padding: 1.25rem; } .wv-app-wire-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .wv-app-wire-code { color: var(--wv-ink); font-size: 1.15rem; font-weight: 900; letter-spacing: .03em; } .wv-app-wire-spec { color: var(--wv-steel); font-size: 1rem; font-weight: 700; line-height: 1.55; } .wv-app-wire-awg { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; padding: .36rem .68rem; border-radius: 999px; background: rgba(74,108,86,.08); color: var(--wv-green-dark); font-family: var(--wv-font-mono); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .wv-app-wire-strip { height: 10px; margin: .95rem 0 1rem; border-radius: 999px; overflow: hidden; } .wv-app-wire-strip-10362 { background: linear-gradient(90deg, #6d584d 0%, #baa48f 18%, #61544c 34%, #d8c9af 50%, #8f745f 67%, #baa48f 83%, #4f453d 100%); } .wv-app-wire-strip-1569 { background: linear-gradient(90deg, #1b6fb7 0%, #d43d33 14%, #f09b24 28%, #f2d04c 41%, #3a9b63 54%, #2f73c9 68%, #8a46c4 82%, #1e1b28 100%); } .wv-app-wire-note { margin: 0; color: var(--wv-steel); font-size: .93rem; line-height: 1.65; } .wv-app-wire-art { height: 100%; padding: 1rem; display: flex; align-items: center; justify-content: center; } .wv-app-wire-art img { width: 100%; max-height: 320px; object-fit: contain; display: block; } .wv-app-note-box { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--wv-line); border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(34,56,44,.06); } .wv-app-note-item { display: flex; gap: .55rem; align-items: flex-start; flex: 1 1 18rem; color: var(--wv-steel); font-size: .93rem; line-height: 1.65; } .wv-app-note-item i { color: var(--wv-green); margin-top: .2rem; } .wv-app-product-card { height: 100%; padding: 1rem 1rem 1.15rem; } .wv-app-product-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .wv-app-product-code { color: var(--wv-ink); font-size: 1.7rem; font-weight: 900; line-height: 1; letter-spacing: .02em; } .wv-app-product-sub { color: var(--wv-steel); font-family: inherit; font-size: .62rem; line-height: 1.45; letter-spacing: .03em; text-align: right; text-transform: uppercase; } .wv-app-product-figure { display: flex; align-items: center; justify-content: center; min-height: 11rem; } .wv-app-product-figure img { width: 100%; max-width: 14rem; height: 11rem; object-fit: contain; display: block; } .wv-app-product-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; color: var(--wv-steel); font-size: .76rem; font-weight: 700; letter-spacing: .06em; } .wv-app-product-foot span { white-space: nowrap; } .wv-app-new-badge { display: inline-flex; align-items: center; justify-content: center; width: 4.3rem; height: 4.3rem; background: #d7261e; color: #ffd83d; font-family: var(--wv-font-mono); font-size: 1.15rem; font-weight: 900; font-style: italic; letter-spacing: .08em; clip-path: polygon(50% 0%, 61% 9%, 74% 0%, 80% 12%, 94% 7%, 91% 22%, 100% 30%, 89% 39%, 100% 50%, 89% 61%, 100% 70%, 91% 78%, 94% 93%, 80% 88%, 74% 100%, 61% 91%, 50% 100%, 39% 91%, 26% 100%, 20% 88%, 6% 93%, 9% 78%, 0% 70%, 11% 61%, 0% 50%, 11% 39%, 0% 30%, 9% 22%, 6% 7%, 20% 12%, 26% 0%, 39% 9%); box-shadow: 0 8px 16px rgba(0,0,0,.12); transform: rotate(-8deg); flex-shrink: 0; } .wv-app-mdea-banner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .wv-app-mdea-title { margin: 0; color: var(--wv-red); font-size: clamp(1.55rem, 2.8vw, 2.2rem); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; } .wv-app-mdea-title .wv-app-mdea-mark { display: block; font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: .92; letter-spacing: -.04em; } .wv-app-mdea-title .wv-app-mdea-sub { display: block; margin-top: .15rem; font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.15; } .wv-app-mdea-note { margin: 0; color: var(--wv-steel); font-size: .96rem; line-height: 1.65; } .wv-app-mdea-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .9rem; padding: 1rem 1.1rem; border: 1px solid var(--wv-line); border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(34,56,44,.06); color: var(--wv-steel); font-size: .92rem; font-weight: 800; letter-spacing: .05em; } .wv-app-mdea-strip span { white-space: nowrap; } .wv-app-feature-card { display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1rem; } .wv-app-feature-art { flex: 0 0 9.5rem; border-radius: 14px; background: linear-gradient(180deg, rgba(74,108,86,.06), rgba(74,108,86,.02)); padding: .65rem; display: flex; align-items: center; justify-content: center; } .wv-app-feature-art img { width: 100%; height: 9rem; object-fit: contain; display: block; } .wv-app-feature-copy { min-width: 0; } .wv-app-feature-copy h3 { margin: 0 0 .35rem; color: var(--wv-red); font-size: 1.25rem; font-weight: 900; line-height: 1.15; } .wv-app-feature-copy p { margin: 0; color: var(--wv-steel); font-size: .95rem; line-height: 1.7; } .wv-app-values-card { height: 100%; padding: 1.5rem; } .wv-app-highlight { display: inline-flex; align-items: center; justify-content: center; padding: .42rem .8rem; margin-bottom: 1rem; background: #ffea00; color: #111; font-weight: 900; font-size: 1.1rem; line-height: 1; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.08); } .wv-app-values-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; color: var(--wv-steel); font-size: 1.1rem; line-height: 1.65; } .wv-app-values-list strong { color: var(--wv-green-dark); } .wv-app-launch-copy { margin: 0; color: var(--wv-steel); font-size: 1.05rem; line-height: 1.8; } .wv-app-wa { white-space: nowrap; } .wv-app-wa sup { font-size: .62em; line-height: 0; position: relative; top: -.42em; color: currentColor; } @media (max-width: 991.98px) { .wv-app-hero { padding: 3.5rem 0; } } @media (max-width: 767.98px) { .wv-app-fit-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .wv-app-mosaic { grid-template-columns: 1fr; } .wv-app-caption { left: .75rem; right: .75rem; bottom: .75rem; padding: .5rem .65rem; } }