/* ============================================================ Kaniva 卡咪哇 — 官網共用樣式 Shared stylesheet (enqueue once in WordPress) 兩種風格變體透過 / "variant-c" 切換 ============================================================ */ /* ---------- 1. Design Tokens ---------- */ :root{ /* 暖調自然色盤 Warm-natural palette */ --cream: #FAF6EC; /* 主背景 */ --cream-2: #F3ECDC; /* 次背景 / 區塊 */ --surface: #FFFFFF; /* 卡片 */ --ink: #2A2722; /* 主文字（暖黑）*/ --ink-soft: #5C564C; /* 次文字 */ --muted: #8A8377; /* 弱化文字 */ --line: #E5DCC8; /* 邊框 */ --forest: #003876; /* 主色品牌深藍（logo）*/ --forest-deep: #00264F; /* 深藍 hover */ --forest-soft: #D6E1EF; /* 淺藍底 */ --brown: #9A6638; /* 副色暖棕 */ --brown-deep: #7C4F2A; --sand: #E9D9BE; /* 沙色點綴 */ --coral: #F5A70E; /* 橘黃強調色 */ --coral-deep: #D98F00; --coral-soft: #FDF0D4; /* 橘黃淺底 */ /* 語意 */ --bg: var(--cream); --primary: var(--forest); --primary-ink: #FFFFFF; --accent: var(--brown); /* 字體 */ --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-en: "Space Grotesk", "Noto Sans TC", sans-serif; /* 字級階層 Type scale（打好階層，全站共用；1rem = 16px）行動→桌機自動縮放的大標用 clamp，內文級距用固定 rem */ --text-xs: 0.75rem; /* 12px 註解、法律文字 */ --text-sm: 0.875rem; /* 14px 輔助文字 */ --text-base: 1rem; /* 16px 內文 */ --text-lg: 1.1875rem; /* 19px 小標 / 卡片標題 */ --text-xl: clamp(1.25rem, 2.4vw, 1.875rem); /* 20→30px H3 大 */ --text-2xl: clamp(1.625rem, 3.4vw, 2.5rem); /* 26→40px H2 區塊標題 */ --text-3xl: clamp(1.875rem, 4vw, 3.25rem); /* 30→52px H2 大 */ --text-hero: clamp(2.875rem, 7vw, 6rem); /* 46→96px H1 Hero */ /* 字重 Weights */ --fw-normal: 400; /* 內文 */ --fw-medium: 500; --fw-bold: 700; /* 中標、按鈕 */ --fw-heavy: 800; /* 子標題 */ --fw-black: 900; /* 大標 */ /* 行高 Line-height（中文內文建議 1.7–1.9）*/ --lh-body: 1.8; --lh-tight: 1.25; /* 尺度 */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(42,39,34,.04), 0 2px 8px rgba(42,39,34,.05); --shadow-md: 0 10px 30px rgba(42,39,34,.08); --ease: cubic-bezier(.4,.1,.2,1); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; overflow-x:clip; font-family:var(--font-zh); font-size:16px; line-height:1.75; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p{ margin:0; } /* 標籤層級預設字級（裸 h1–h4 也有一致外觀；.class 樣式會覆蓋）*/ h1{ font-size:var(--text-hero); font-weight:var(--fw-black); line-height:var(--lh-tight); letter-spacing:-.01em; } h2{ font-size:var(--text-2xl); font-weight:var(--fw-black); line-height:1.25; } h3{ font-size:var(--text-lg); font-weight:var(--fw-heavy); line-height:1.35; } h4{ font-size:var(--text-base); font-weight:var(--fw-heavy); line-height:1.4; } input,textarea,select{ font:inherit; color:inherit; } :focus-visible{ outline:2px solid var(--forest); outline-offset:3px; } /* ---------- 3. Layout utilities ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:clamp(56px,8vw,112px); } .en{ font-family:var(--font-en); letter-spacing:.01em; } .center{ text-align:center; } /* Section heading kit */ .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#932B12; } .eyebrow::before{ content:""; width:34px; height:2px; background:var(--coral); flex:none; } .section-title{ font-size:var(--text-2xl); font-weight:var(--fw-black); line-height:1.25; letter-spacing:.01em; text-wrap:balance; } .section-sub{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,17px); max-width:56ch; }.section-head{ display:flex; flex-direction:column; gap:14px; } .section-head.center{ align-items:center; text-align:center; margin-inline:auto; } /* ---------- 4. Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:var(--radius-pill); font-weight:var(--fw-bold); font-size:15px; letter-spacing:.02em; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); white-space:nowrap; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:var(--forest); color:#fff; } .btn-primary:hover{ background:var(--forest-deep); box-shadow:var(--shadow-md); } .btn-accent{ background:var(--brown); color:#fff; } .btn-accent:hover{ background:var(--brown-deep); transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn-outline{ border:1.5px solid var(--ink); color:var(--ink); } .btn-outline:hover{ background:var(--ink); color:var(--cream); } .btn-ghost{ color:var(--forest); padding-inline:6px; } .btn-ghost:hover{ color:var(--forest-deep); } .link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--forest); } .link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease); } .link-arrow:hover svg{ transform:translateX(4px); } /* ---------- 5. Header ---------- */ .site-header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .header-inner{ display:flex; align-items:center; gap:24px; height:74px; } .brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-en); font-weight:700; font-size:22px; letter-spacing:.02em; color:var(--ink); } .brand .pulse{ width:30px; height:30px; color:var(--forest); } .brand-logo{ height:52px; width:auto; display:block; } .footer-brand{ display:inline-block; } .footer-logo{ width:238px; height:auto; display:block; } .nav{ display:flex; align-items:center; gap:6px; margin-left:8px; } .nav a{ padding:10px 14px; border-radius:var(--radius-sm); font-weight:500; font-size:15px; color:var(--ink-soft); transition:color .2s, background .2s; white-space:nowrap; } .nav a:hover{ color:var(--ink); } .header-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; } .header-social{ display:flex; align-items:center; gap:4px; } .header-social a{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--ink); transition:color .2s var(--ease), background .2s var(--ease); } .header-social a i{ display:block; width:28px; height:28px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .header-social a:hover{ color:#932B12; } .icon-btn{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--ink); transition:background .2s; } .icon-btn:hover{ background:var(--cream-2); } .icon-btn svg{ width:20px; height:20px; } .header-actions .btn{ padding:11px 20px; font-size:14px; margin-left:6px; } .nav-toggle{ display:none; } .nav-toggle .ic-close{ display:none; } body.menu-open .nav-toggle .ic-open{ display:none; } body.menu-open .nav-toggle .ic-close{ display:block; } /* mobile drawer */ .mobile-nav{ display:none; } /* ---------- 6. Hero / Carousel ---------- */ .hero{ position:relative; } .hero .carousel-dots{ position:absolute; bottom:22px; left:0; right:0; z-index:5; } .carousel{ position:relative; overflow:hidden; } .slides{ display:flex; transition:transform .6s var(--ease); } .slide{ flex:0 0 100%; } .carousel-dots{ display:flex; gap:10px; justify-content:center; } .carousel-dots button{ width:32px; height:4px; border-radius:4px; background:var(--line); transition:background .3s, width .3s; } .carousel-dots button[aria-selected="true"]{ background:var(--forest); width:48px; } .carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.85); color:var(--ink); box-shadow:var(--shadow-sm); transition:background .2s, transform .2s; } .carousel-arrow:hover{ background:#fff; } .carousel-arrow.prev{ left:clamp(8px,2vw,24px); } .carousel-arrow.next{ right:clamp(8px,2vw,24px); } .carousel-arrow svg{ width:22px; height:22px; } /* placeholder image box */ .ph{ position:relative; background: repeating-linear-gradient(135deg, #ece3d0 0 12px, #e4d9c2 12px 24px); border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; color:var(--muted); overflow:hidden; } .ph::after{ content:attr(data-label); font-family:var(--font-en); font-size:13px; letter-spacing:.08em; color:#a89c84; padding:6px 12px; background:rgba(255,255,255,.7); border-radius:var(--radius-pill); } .ph svg{ position:absolute; width:64px; height:64px; opacity:.3; color:#b9ab8e; } /* ---------- 7. Advantages grid ---------- */ .adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .adv-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .adv-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; } .adv-icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--forest-soft); color:var(--forest); } .adv-icon svg{ width:26px; height:26px; } .adv-card h3{ font-size:var(--text-lg); font-weight:var(--fw-heavy); } .adv-card p{ color:var(--ink-soft); font-size:15px; } /* ---------- 8. Products ---------- */ .prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .prod-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .prod-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .prod-media{ position:relative; aspect-ratio:4/3; } .prod-tags{ position:absolute; top:14px; left:14px; display:flex; gap:8px; flex-wrap:wrap; z-index:2; } .tag{ font-family:var(--font-en); font-size:11px; font-weight:600; letter-spacing:.08em; padding:5px 11px; border-radius:var(--radius-pill); background:rgba(255,255,255,.92); color:var(--forest); box-shadow:var(--shadow-sm); } .prod-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; } .prod-body h3{ font-size:var(--text-lg); font-weight:var(--fw-heavy); } .prod-meta{ color:var(--ink-soft); font-size:14px; } .prod-sell{ color:var(--brown); font-weight:600; font-size:14px; } .prod-card .btn{ margin-top:auto; } /* ---------- 9. News ---------- */ .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .news-card{ display:flex; flex-direction:column; gap:14px; } .news-media{ aspect-ratio:16/10; border-radius:var(--radius); } .news-cat{ display:inline-block; font-size:12px; font-weight:600; color:var(--brown); letter-spacing:.06em; } .news-date{ font-family:var(--font-en); font-size:13px; color:var(--muted); } .news-card h3{ font-size:17px; font-weight:700; line-height:1.5; transition:color .2s; } .news-card:hover h3{ color:var(--forest); } /* ---------- 10. Contact + AI band ---------- */ .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; } .form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3vw,40px); } .form-card h3{ font-size:22px; font-weight:800; margin-bottom:6px; } .field{ display:flex; flex-direction:column; gap:7px; margin-top:18px; } .field label{ font-size:14px; font-weight:600; } .field label .req{ color:var(--brown); } .field input, .field textarea{ width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--line); background:var(--cream); border-radius:var(--radius-sm); padding:13px 15px; font-size:15px; transition:border-color .2s, background .2s; } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--forest); background:#fff; } .field textarea{ resize:vertical; min-height:110px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-row > *, .contact-grid > *, .field{ min-width:0; } .consent{ display:flex; align-items:flex-start; gap:10px; margin-top:18px; font-size:13px; color:var(--ink-soft); } .consent input{ margin-top:3px; } .form-card .btn{ width:100%; margin-top:20px; } .side-stack{ display:flex; flex-direction:column; gap:16px; } .info-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; } .ai-card{ background:linear-gradient(155deg,var(--forest),var(--forest-deep)); color:#fff; } .ai-card .eyebrow{ color:#fff; } .ai-card .eyebrow::before{ background:#fff; } .ai-card h3{ font-size:20px; font-weight:800; margin:14px 0 8px; } .ai-card p{ color:rgba(255,255,255,.85); font-size:14px; } .ai-card .btn{ background:#fff; color:var(--forest); margin-top:18px; } .ai-card .btn:hover{ background:var(--cream); } .info-card h4{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; margin-bottom:12px; } .info-card h4 svg{ width:18px; height:18px; color:var(--forest); } .info-list{ display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--ink-soft); } .info-list .row{ display:flex; gap:10px; align-items:flex-start; } .info-list svg{ width:16px; height:16px; color:var(--brown); flex:none; margin-top:3px; } /* ---------- 11. Brand intro band ---------- */ .brand-band{ text-align:center; } .brand-band .lead{ font-size:clamp(24px,3.2vw,38px); font-weight:900; line-height:1.4; max-width:20ch; margin-inline:auto; text-wrap:balance; } .brand-band .lead em{ font-style:normal; color:var(--forest); } .brand-band p{ color:var(--ink-soft); max-width:60ch; margin:20px auto 0; font-size:clamp(15px,1.5vw,17px); } .rule{ width:60px; height:3px; background:var(--brown); border-radius:3px; margin:28px auto 0; } /* ---------- 12. Footer ---------- */ .site-footer{ background:var(--forest-deep); color:rgba(255,255,255,.82); padding-block:64px 0; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:40px; } .site-footer .brand{ color:#fff; } .site-footer .brand .pulse{ color:#fff; } .footer-about{ font-size:14px; line-height:1.8; margin-top:16px; max-width:34ch; color:rgba(255,255,255,.7); } .social{ display:flex; gap:18px; margin-top:18px; } .social a{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.72); color:var(--forest-deep); transition:background .2s var(--ease); } .social a:hover{ background:#fff; } .social a i{ display:block; width:26px; height:26px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .footer-col h5{ font-size:15px; font-weight:800; color:#fff; margin-bottom:18px; } .footer-col a{ display:block; font-size:14px; padding:6px 0; color:rgba(255,255,255,.72); transition:color .2s; } .footer-col a:hover{ color:#fff; } .footer-contact{ display:flex; flex-direction:column; gap:11px; font-size:14px; color:rgba(255,255,255,.72); } .footer-contact .row{ display:flex; gap:10px; align-items:flex-start; } .footer-contact svg{ width:16px; height:16px; flex:none; margin-top:3px; color:rgba(255,255,255,.55); } .footer-bottom{ margin-top:52px; border-top:1px solid rgba(255,255,255,.14); padding-block:24px; text-align:center; font-size:13px; color:rgba(255,255,255,.5); } /* ============================================================ VARIANT A — 溫暖照護風 (Warm Care / PetCare-style) 白底為主、森林綠 + 珊瑚橘、圓潤親和、柔和陰影卡片、光暈色塊 ============================================================ */ .variant-a{ --bg:#FFFFFF; background:#FFFFFF; --font-en:"Noto Serif TC","Noto Sans TC",serif; --font-zh:"Noto Serif TC","PingFang TC",serif; } .variant-a .site-header{ background:#fff; backdrop-filter:none; border-bottom:none; box-shadow:0 2px 12px rgba(42,39,34,.06); } .variant-a .container{ max-width:1200px; } /* 圓潤字體：拉丁字用 Nunito，中文維持思源黑體但字重加粗 */ .variant-a h1,.variant-a h2,.variant-a h3,.variant-a .brand{ letter-spacing:0; } .variant-a .section-title{ font-family:"Noto Serif TC","Noto Sans TC",sans-serif; font-weight:800; } /* eyebrow → 珊瑚橘小標（圖示 + 文字），取代綠色膠囊 */ .variant-a .eyebrow{ background:transparent; color:#932B12; padding:0; font-family:var(--font-en); font-size:16px; font-weight:800; letter-spacing:.06em; text-transform:none; gap:0; } .variant-a .eyebrow::before{ content:none; } .variant-a .section-title em{ font-style:normal; color:var(--coral); } /* 按鈕：主綠 + 珊瑚橘副色，全圓角 */ /* variant-a 配色：深綠 + 淺綠（參考 Freshpet），僅影響 home-a */ .variant-a{ --forest: #276140; /* 主色深綠 */ --forest-deep: #1D4A31; /* 深綠 hover */ --forest-soft: #DDE6CE; /* 淺綠底 */ /* 強調色統一成綠色系（原珊瑚橘退場）*/ --coral: #276140; --coral-deep: #1D4A31; --coral-soft: #DDE6CE; --sand: #B9CF9E; } /* 次按鈕：白底、黑字 */ .variant-a .btn-outline{ border:none; background:#fff; color:var(--ink); } .variant-a .btn-outline:hover{ background:#F4F1E9; color:var(--ink); } .variant-a .btn-accent{ background:var(--coral); } .variant-a .btn-accent:hover{ background:var(--coral-deep); } /* 按鈕圓角：home-a 改小（不要全圓） */ .variant-a .btn{ border-radius:12px; } .variant-a .btn-arrow{ gap:10px; } .variant-a .btn-arrow svg{ width:18px; height:18px; transition:transform .25s var(--ease); } .variant-a .btn-arrow:hover svg{ transform:translateX(4px); } /* ---------- HERO ---------- */ .variant-a .hero-a{ background:#EDF3E2; position:relative; overflow:hidden; } .variant-a .hero-a .container{ display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; min-height:600px; padding-block:56px 68px; position:relative; z-index:2; } .variant-a .hero-copy{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; } .variant-a .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-en); font-size:13px; font-weight:800; color:var(--coral); background:var(--coral-soft); padding:8px 16px; border-radius:var(--radius-pill); letter-spacing:.02em; } .variant-a .hero-eyebrow svg{ width:16px; height:16px; } .variant-a .hero-title{ font-family:"Noto Serif TC","Noto Sans TC",sans-serif; font-size:clamp(38px,5.2vw,62px); font-weight:900; line-height:1.1; letter-spacing:0; text-wrap:balance; color:var(--ink); } .variant-a .hero-title em{ font-style:normal; color:var(--ink); } .variant-a .hero-desc{ font-size:clamp(16px,1.6vw,18px); color:var(--ink-soft); max-width:44ch; line-height:1.8; } .variant-a .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; } /* hero 統計列 */ .variant-a .hero-stats{ display:flex; gap:14px 34px; flex-wrap:wrap; margin-top:6px; } .variant-a .hero-stats .stat{ display:flex; align-items:center; gap:11px; } .variant-a .hero-stats .s-ic{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--forest-soft); color:var(--forest); flex:none; } .variant-a .hero-stats .s-ic svg{ width:20px; height:20px; } .variant-a .hero-stats .num{ font-family:var(--font-en); font-weight:800; font-size:20px; line-height:1.1; color:var(--ink); } .variant-a .hero-stats .lbl{ font-size:12.5px; color:var(--muted); } /* hero 圖片：柔和色塊光暈 + 貓掌點綴 */ .variant-a .hero-media-wrap{ position:relative; display:grid; place-items:center; } .variant-a .hero-media-wrap::before{ display:none; } .variant-a .hero-media{ position:relative; z-index:1; aspect-ratio:1/1; border-radius:32px; width:100%; } .variant-a video.hero-media{ object-fit:cover; display:block; background:var(--forest-soft); box-shadow:0 20px 50px rgba(42,39,34,.12); } .variant-a img.hero-media{ object-fit:contain; display:block; background:transparent; } /* 產品包裝疊在狗狗圖右側（構圖參考：狗左、包裝右立） */ .variant-a .hero-media-wrap{ isolation:isolate; } .variant-a img.hero-media{ position:relative; z-index:1; transform:translate(calc(-11% + 30px + var(--px-dog, 0px)), calc(154px + var(--py-dog, 0px))) scale(1.65); transform-origin:center bottom; transition:transform .5s cubic-bezier(.22,1,.36,1); } .variant-a .hero-pack{ position:absolute; z-index:2; left:0; bottom:0; width:38%; height:auto; transform:translate(calc(-1% + var(--px-pack, 0px)), calc(-40% + 98px + var(--py-pack, 0px))); transition:transform .5s cubic-bezier(.22,1,.36,1); filter:drop-shadow(0 18px 30px rgba(42,39,34,.22)); } @media (max-width:720px){ .variant-a img.hero-media{ transform:translate(-8%, 0%) scale(1.4); } .variant-a .hero-pack{ width:38%; } } .variant-a .paw{ position:absolute; z-index:2; color:var(--coral); opacity:.85; } .variant-a .paw svg{ width:100%; height:100%; } .variant-a .paw.p1{ width:34px; height:34px; top:8%; right:6%; color:var(--sand); opacity:1; } .variant-a .paw.p2{ width:26px; height:26px; bottom:14%; left:2%; } .variant-a .paw.p3{ width:20px; height:20px; top:46%; right:-2%; color:var(--forest); opacity:.5; } /* ---------- SECTION 節奏 ---------- */ .variant-a .section-alt{ background:#FBF7F0; } .variant-a .adv-section{ background:#fff; } /* ---------- 捲動放大影片區塊（scroll-scale video reveal）---------- */ .variant-a .scale-reveal{ background:#EDF3E2; } .variant-a .sr-track{ position:relative; height:260vh; } .variant-a .sr-stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; } .variant-a .sr-media{ position:absolute; top:50%; left:50%; width:100vw; aspect-ratio:16/9; transform:translate(-50%,-50%) scale(var(--sr-s, .66)); transform-origin:center center; border-radius:calc(var(--sr-r, 34px) / var(--sr-s, .66)); overflow:hidden; box-shadow:0 30px 80px rgba(29,74,49,.28); will-change:transform; } .variant-a .sr-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .variant-a .sr-media{ z-index:1; } .variant-a .sr-scrim{ background:linear-gradient(180deg, rgba(20,45,30,.35) 0%, rgba(20,45,30,.6) 100%); opacity:var(--sr-scrim, .4); } .variant-a .sr-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,45,30,.15) 0%, rgba(20,45,30,.55) 100%); opacity:var(--sr-scrim, 0); } .variant-a .sr-content{ position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; max-width:860px; margin:0 auto; padding:0 6vw; text-align:center; color:#fff; pointer-events:none; } .variant-a .sr-content .eyebrow{ justify-content:center; color:#fff; } .variant-a .sr-content .eyebrow::before{ background:#fff; } .variant-a .sr-lead{ opacity:var(--sr-lead, 1); transform:translateY(calc((1 - var(--sr-lead, 1)) * -16vh)); transition:none; } .variant-a .sr-lead h2{ font-family:"Noto Serif TC","Noto Sans TC",sans-serif; font-size:clamp(28px,4.4vw,60px); font-weight:900; line-height:1.15; color:#fff; margin:12px 0 0; text-wrap:balance; } .variant-a .sr-lead p{ font-size:clamp(15px,1.5vw,18px); line-height:1.85; color:rgba(255,255,255,.92); max-width:48ch; margin:16px auto 0; } .variant-a .sr-more{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(860px,88vw); padding:0 6vw; opacity:1; display:flex; flex-direction:column; align-items:center; gap:16px; visibility:var(--sr-more-vis, hidden); } .variant-a .sr-more p{ font-size:clamp(15px,1.6vw,19px); line-height:1.9; color:rgba(255,255,255,.94); max-width:52ch; margin:0; } .variant-a .sr-more-title{ font-family:"Noto Serif TC","Noto Sans TC",sans-serif; font-size:clamp(22px,3vw,40px); font-weight:900; line-height:1.3; color:#fff; margin:0; text-wrap:balance; } /* 逐字上升淡入（參考 matveyan 案例）*/ .variant-a .sr-more .w{ display:inline-block; overflow:hidden; vertical-align:bottom; } .variant-a .sr-more .wi{ display:inline-block; transform:translateY(110%); opacity:0; transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease; } .variant-a .sr-more.words-in .wi{ transform:translateY(0); opacity:1; } /* 開場標題「品牌核心優勢」逐字上升 */ .variant-a .sr-lead .w{ display:inline-block; overflow:hidden; vertical-align:bottom; } .variant-a .sr-lead .wi{ display:inline-block; transform:translateY(110%); opacity:0; transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease; } .variant-a .sr-lead.lead-in .wi{ transform:translateY(0); opacity:1; } .variant-a .sr-prod{ position:relative; width:min(230px,40vw); aspect-ratio:1940/2994; } .variant-a .sr-prod img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; filter:drop-shadow(0 20px 40px rgba(0,0,0,.4)); } .variant-a .sr-prod img.on{ opacity:1; } .variant-a .sr-more .band-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; pointer-events:auto; } .variant-a .sr-more .btn-outline{ background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff; } .variant-a .sr-more .btn-outline:hover{ background:#fff; color:var(--forest-deep); } /* 手機／減少動態：改為一般堆疊，不做 sticky 放大 */ @media (max-width:768px){ .variant-a .sr-track{ height:auto; } .variant-a .sr-stage{ position:static; height:auto; padding:0; display:block; } .variant-a .sr-media{ position:relative; top:auto; left:auto; inset:auto; width:100%; aspect-ratio:16/9; height:auto; transform:none; border-radius:0; box-shadow:none; } .variant-a .sr-scrim{ opacity:.5; } .variant-a .sr-content{ position:absolute; inset:0; padding:24px; } .variant-a .sr-lead{ opacity:1; transform:none; } .variant-a .sr-more{ opacity:1; transform:none; visibility:visible; } .variant-a .sr-more .wi{ transform:none; opacity:1; } .variant-a .sr-prod{ width:min(150px,34vw); } } @media (prefers-reduced-motion: reduce){ .variant-a .sr-track{ height:auto; } .variant-a .sr-stage{ position:static; height:auto; display:block; } .variant-a .sr-media{ position:relative; top:auto; left:auto; width:100%; aspect-ratio:16/9; height:auto; transform:none; border-radius:0; } .variant-a .sr-scrim{ opacity:.5; } .variant-a .sr-content{ position:absolute; inset:0; padding:24px; } .variant-a .sr-lead, .variant-a .sr-more{ opacity:1; transform:none; } } /* 優勢卡：白卡 + 柔和陰影 + 珊瑚橘圖示磚 */ .variant-a .adv-card{ border-radius:20px; border:1px solid #F0EBE1; box-shadow:0 10px 30px rgba(42,39,34,.05); } .variant-a .adv-icon{ border-radius:16px; background:var(--coral-soft); color:var(--coral); } .variant-a .adv-card:hover{ border-color:transparent; box-shadow:0 18px 40px rgba(42,39,34,.1); } /* 六大優勢：橫向自動輪播（參考 Grain & Mortar）*/ .variant-a .adv-section{ background:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:center; } .variant-a .adv-marquee{ position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .variant-a .adv-track{ display:flex; gap:26px; width:max-content; padding:8px 13px; animation:advScroll 46s linear infinite; will-change:transform; } .variant-a .adv-marquee:hover .adv-track{ animation-play-state:running; } @keyframes advScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .variant-a .adv-slide{ position:relative; flex:0 0 auto; width:clamp(340px,38vw,500px); aspect-ratio:4/3; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; gap:12px; justify-content:flex-end; padding:28px 30px; border-radius:22px; overflow:hidden; isolation:isolate; background-size:cover; background-position:center; background-repeat:no-repeat; } .variant-a .adv-slide::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,29,20,.35) 0%, rgba(15,29,20,.58) 55%, rgba(15,29,20,.78) 100%); } .variant-a .adv-slide:nth-child(6n+1){ background-image:url("../media/adv-1.webp"); } .variant-a .adv-slide:nth-child(6n+2){ background-image:url("../media/adv-2.webp"); } .variant-a .adv-slide:nth-child(6n+3){ background-image:url("../media/adv-3.webp"); } .variant-a .adv-slide:nth-child(6n+4){ background-image:url("../media/adv-4.webp"); } .variant-a .adv-slide:nth-child(6n+5){ background-image:url("../media/adv-5.webp"); } .variant-a .adv-slide:nth-child(6n+6){ background-image:url("../media/adv-6.webp"); } .variant-a .adv-slide h3{ font-family:var(--font-en); font-size:20px; font-weight:800; color:#fff; line-height:1.35; display:flex; align-items:center; gap:10px; } .variant-a .adv-hi{ flex:none; display:inline-flex; } .variant-a .adv-hi svg{ width:26px; height:26px; color:#fff; } .variant-a .adv-slide p{ font-size:14.5px; line-height:1.8; color:rgba(255,255,255,.9); } @media (prefers-reduced-motion: reduce){ .variant-a .adv-track{ animation:none; } } /* 產品卡：編輯風極簡（參考 Taylors Wines）— 無框、圖置中、hover 深色按鈕上滑 */ .variant-a .prod-section{ background:#EDF3E2; position:relative; } .variant-a .prod-section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23276140' fill-opacity='0.03'%3E%3Cg transform='rotate(45 20 20)'%3E%3Cellipse cx='20' cy='23' rx='5' ry='6.5'/%3E%3Cellipse cx='12' cy='15' rx='2.2' ry='3'/%3E%3Cellipse cx='20' cy='12.5' rx='2.2' ry='3'/%3E%3Cellipse cx='28' cy='15' rx='2.2' ry='3'/%3E%3C/g%3E%3Cg transform='rotate(45 60 60)'%3E%3Cellipse cx='60' cy='63' rx='5' ry='6.5'/%3E%3Cellipse cx='52' cy='55' rx='2.2' ry='3'/%3E%3Cellipse cx='60' cy='52.5' rx='2.2' ry='3'/%3E%3Cellipse cx='68' cy='55' rx='2.2' ry='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size:80px 80px; } .variant-a .prod-section > .container{ position:relative; z-index:1; } .variant-a .prod-grid{ gap:0; } .variant-a .prod-card{ background:transparent; border:none; border-radius:0; box-shadow:none; padding:0 clamp(10px,2vw,28px); text-align:center; } .variant-a .prod-card:hover{ transform:none; box-shadow:none; } .variant-a .prod-media{ position:relative; aspect-ratio:1/1; background:transparent; border-radius:0; overflow:hidden; } .variant-a .prod-media::before{ content:none; } .variant-a .prod-media .prod-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6% 4% 12%; transition:transform .6s cubic-bezier(.22,1,.36,1); } .variant-a .prod-card:hover .prod-img{ transform:scale(1.06); } .variant-a .prod-body{ padding:20px 0 0; display:flex; flex-direction:column; align-items:center; gap:8px; } .variant-a .prod-label{ font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } .variant-a .prod-body h3{ font-family:var(--font-en); font-size:22px; font-weight:700; line-height:1.35; color:var(--ink); } .variant-a .prod-sell{ color:var(--forest); font-weight:600; font-size:14px; } /* home-a：全站去圓角（按鈕、卡片、圖片、影片、輸入框、tag 等）*/ .variant-a{ --radius:0; --radius-sm:0; --radius-pill:0; } .variant-a .btn, .variant-a .btn-primary, .variant-a .btn-outline, .variant-a .prod-media, .variant-a .prod-img, .variant-a .prod-cta, .variant-a .news-media, .variant-a .news-img, .variant-a .adv-slide, .variant-a .adv-marquee, .variant-a .sr-media, .variant-a .hero-media, .variant-a .hero-pack, .variant-a .form-card, .variant-a .info-card, .variant-a .ai-card, .variant-a .field input, .variant-a .field textarea, .variant-a .tag, .variant-a img, .variant-a video, .variant-a .mobile-nav{ border-radius:0 !important; } /* 按鈕維持 4px 微圓角 */ .variant-a .btn, .variant-a .btn-primary, .variant-a .btn-outline, .variant-a .prod-cta{ border-radius:4px !important; } /* 按鈕 hover：柔光掃過（參考 Taylors Wines）*/ .variant-a .btn{ position:relative; overflow:hidden; font-family:"Noto Serif TC","Noto Sans TC",serif; } .variant-a .btn::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; pointer-events:none; background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%); transform:skewX(-18deg); transition:left .65s var(--ease); } .variant-a .btn:hover::after{ left:150%; } /* 最新消息：雜誌式錯落排版（三欄）*/ .variant-a .news-section{ background:#fff; } /* 聯絡區：雙欄詢問式版型（左介紹＋代理資訊，右底線式表單）*/ .variant-a .inquiry-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; } .variant-a .inquiry-half{ padding:clamp(44px,6vw,96px) clamp(28px,5vw,80px); } .variant-a .inquiry-half-left{ background:#EDF3E2; display:flex; justify-content:flex-end; position:relative; } .variant-a .inquiry-half-left::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23276140' fill-opacity='0.03'%3E%3Cg transform='rotate(45 20 20)'%3E%3Cellipse cx='20' cy='23' rx='5' ry='6.5'/%3E%3Cellipse cx='12' cy='15' rx='2.2' ry='3'/%3E%3Cellipse cx='20' cy='12.5' rx='2.2' ry='3'/%3E%3Cellipse cx='28' cy='15' rx='2.2' ry='3'/%3E%3C/g%3E%3Cg transform='rotate(45 60 60)'%3E%3Cellipse cx='60' cy='63' rx='5' ry='6.5'/%3E%3Cellipse cx='52' cy='55' rx='2.2' ry='3'/%3E%3Cellipse cx='60' cy='52.5' rx='2.2' ry='3'/%3E%3Cellipse cx='68' cy='55' rx='2.2' ry='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size:80px 80px; } .variant-a .inquiry-half-left > *{ position:relative; z-index:1; } .variant-a .inquiry-half-right{ background:#fff; display:flex; justify-content:flex-start; } .variant-a .inquiry-intro{ width:100%; max-width:520px; } .variant-a .inquiry-form{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:26px; } .variant-a .inquiry-title{ font-family:var(--font-en); font-size:clamp(34px,4.4vw,60px); font-weight:800; line-height:1.15; color:var(--ink); margin:16px 0 20px; } .variant-a .inquiry-lead{ font-size:clamp(15px,1.5vw,17px); line-height:1.9; color:var(--ink-soft); max-width:42ch; } .variant-a .inquiry-info{ margin-top:36px; padding-top:32px; border-top:1px solid rgba(39,97,64,.18); display:flex; flex-direction:column; gap:32px; } .variant-a .inq-block{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .variant-a .inq-btitle{ font-family:var(--font-en); font-size:clamp(20px,2.2vw,26px); font-weight:800; color:var(--ink); } .variant-a .inq-btext{ font-size:15.5px; line-height:1.7; color:var(--ink); } .variant-a .inq-block .btn-secondary{ background:#fff; border:1.5px solid var(--line); color:var(--ink); border-radius:var(--radius-pill); } .variant-a .inq-block .btn-secondary:hover{ background:#fff; border-color:var(--coral); color:var(--coral); } .variant-a .inq-cardbtn{ display:inline-block; align-self:flex-start; background:#fff; color:var(--ink); font-family:var(--font-en); font-size:17px; font-weight:600; letter-spacing:.02em; white-space:nowrap; padding:16px 40px; border-radius:12px; box-shadow:0 8px 24px rgba(42,39,34,.08); transition:box-shadow .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); } .variant-a .inq-cardbtn:hover{ box-shadow:0 14px 32px rgba(42,39,34,.14); transform:translateY(-2px); color:var(--coral); } /* 底線式表單欄位 */ .variant-a .inq-field{ display:flex; flex-direction:column; gap:8px; } .variant-a .inq-field label{ font-family:var(--font-en); font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--forest); } .variant-a .inq-field .req{ color:var(--coral); } .variant-a .inq-field input, .variant-a .inq-field textarea{ border:none; border-bottom:1.5px solid var(--line); background:transparent; border-radius:0; padding:8px 2px; font-family:inherit; font-size:16px; color:var(--ink); transition:border-color .3s var(--ease); } .variant-a .inq-field input::placeholder, .variant-a .inq-field textarea::placeholder{ color:var(--muted); } .variant-a .inq-field input:focus, .variant-a .inq-field textarea:focus{ outline:none; border-bottom-color:var(--forest); } .variant-a .inq-field textarea{ resize:vertical; min-height:80px; } .variant-a .inquiry-form .consent{ font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; line-height:1.6; } .variant-a .inquiry-submit{ align-self:flex-start; gap:10px; } .variant-a .inquiry-submit svg{ width:18px; height:18px; transition:transform .25s var(--ease); } .variant-a .inquiry-submit:hover svg{ transform:translateX(4px); } @media (max-width:820px){ .variant-a .inquiry-split{ grid-template-columns:1fr; } .variant-a .inquiry-half-left,.variant-a .inquiry-half-right{ justify-content:center; } } /* 表單底部雙按鈕並排 */ .variant-a .form-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; } .variant-a .form-actions .btn{ flex:1 1 0; min-width:160px; } /* 聯絡區：上方 AI 區塊（貓狗當背景）+ 下方詢問式版型 */ .variant-a .contact-section{ position:relative; overflow:hidden; padding:0; } .variant-a .contact-ai{ position:relative; overflow:hidden; text-align:center; padding:clamp(40px,7vw,90px) 0 clamp(180px,26vw,460px); } .variant-a .contact-ai > .container{ position:relative; z-index:2; max-width:640px; margin-inline:auto; } /* 進場動畫：文字逐項升起、貓狗從左右滑入 */ .variant-a .contact-ai .container > *{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); } .variant-a .contact-ai.ai-in .container > *{ opacity:1; transform:none; } .variant-a .contact-ai.ai-in .container > *:nth-child(2){ transition-delay:.1s; } .variant-a .contact-ai.ai-in .container > *:nth-child(3){ transition-delay:.2s; } .variant-a .contact-ai.ai-in .container > *:nth-child(4){ transition-delay:.3s; } .variant-a .contact-ai .contact-pet{ transition:transform 1s cubic-bezier(.22,1,.36,1); } .variant-a .contact-ai.pets-armed:not(.pets-in) .contact-pet-cat{ transform:translate(calc(var(--cat-x, 0) * 1px - 145%), calc(var(--cat-y, 0) * 1px)); } .variant-a .contact-ai.pets-armed:not(.pets-in) .contact-pet-dog{ transform:translate(calc(var(--dog-x, 0) * 1px + 145%), calc(var(--dog-y, 0) * 1px)); } .variant-a .contact-ai.pets-in .contact-pet-cat{ transform:translate(-84px, -204px); } .variant-a .contact-ai.pets-in .contact-pet-dog{ transform:translate(256px, -200px); } @media (prefers-reduced-motion: reduce){ .variant-a .contact-ai .container > *, .variant-a .contact-ai .contact-pet{ opacity:1 !important; transform:none !important; transition:none; } } .variant-a .contact-ai-title{ font-family:var(--font-en); font-size:clamp(30px,4.2vw,56px); font-weight:800; line-height:1.15; color:var(--ink); margin:16px 0 16px; } .variant-a .contact-ai-lead{ font-size:clamp(15px,1.5vw,18px); line-height:1.9; color:var(--ink-soft); max-width:52ch; margin:0 auto 24px; } .variant-a .contact-pet{ position:absolute; bottom:0; z-index:1; height:auto; pointer-events:none; user-select:none; } .variant-a .contact-pet-cat{ left:0; width:568px; transform:translate(calc(var(--cat-x, 0) * 1px), calc(var(--cat-y, 0) * 1px)); } .variant-a .contact-pet-dog{ right:0; width:760px; transform:translate(calc(var(--dog-x, 0) * 1px), calc(var(--dog-y, 0) * 1px)); } @media (max-width:760px){ .variant-a .contact-ai{ padding-bottom:clamp(110px,30vw,180px); } .variant-a .contact-pet-cat{ width:66vw; } .variant-a .contact-pet-dog{ width:78vw; } } .variant-a .news-mag{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start; } .variant-a .news-col{ display:flex; flex-direction:column; gap:28px; } .variant-a .news-col:nth-child(2){ margin-top:60px; } .variant-a .news-col:nth-child(3){ margin-top:24px; } .variant-a .news-mag-head{ display:flex; flex-direction:column; gap:14px; } .variant-a .news-mag-head .section-title{ font-family:var(--font-en); font-size:clamp(30px,3.2vw,48px); font-weight:800; line-height:1.15; color:var(--ink); } .variant-a .mag-card{ position:relative; display:block; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .variant-a .mag-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); } .variant-a .mag-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,45,30,0) 40%, rgba(20,45,30,.82) 100%); } .variant-a .mag-card:hover img{ transform:scale(1.05); } .variant-a .mag-tag{ position:absolute; top:16px; right:16px; z-index:2; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink); background:#fff; padding:6px 14px; } .variant-a .mag-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; } .variant-a .mag-date{ font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--sand); } .variant-a .mag-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(20,45,30,.22); } .variant-a .mag-body h3{ font-family:var(--font-en); font-size:19px; font-weight:700; line-height:1.4; color:#fff; } .variant-a .mag-more{ font-family:var(--font-en); font-size:14px; font-weight:600; letter-spacing:.18em; color:#fff; padding-bottom:8px; border-bottom:1.5px solid var(--forest-soft); align-self:flex-start; margin-top:6px; max-height:0; opacity:0; overflow:hidden; transform:translateY(8px); transition:max-height .4s var(--ease), opacity .3s var(--ease), transform .4s var(--ease); } .variant-a .mag-card:hover .mag-more{ max-height:40px; opacity:1; transform:translateY(0); } .variant-a .mag-a{ aspect-ratio:4/5; } .variant-a .mag-b{ aspect-ratio:3/4.2; } .variant-a .mag-c{ aspect-ratio:4/5; } .variant-a .mag-all{ display:inline-flex; align-items:center; justify-content:center; gap:10px; align-self:flex-start; padding:16px 32px; font-size:16px; } .variant-a .mag-all svg{ width:20px; height:20px; flex:none; transition:transform .25s var(--ease); position:relative; z-index:1; } .variant-a .mag-all:hover svg{ transform:translateX(5px); } @media (max-width:860px){ .variant-a .news-mag{ grid-template-columns:1fr 1fr; } .variant-a .news-col:nth-child(2),.variant-a .news-col:nth-child(3){ margin-top:0; } } @media (max-width:560px){ .variant-a .news-mag{ grid-template-columns:1fr; } } /* ---------- 綠色特色band（品牌陳述）---------- */ .variant-a .green-band{ padding-block:clamp(40px,6vw,64px); } .variant-a .green-band .band-inner{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--forest),var(--forest-deep)); border-radius:32px; padding:clamp(34px,5vw,60px); display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center; color:#fff; } .variant-a .green-band .band-inner::before{ content:""; position:absolute; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.06); } .variant-a .green-band .eyebrow{ color:var(--sand); } .variant-a .green-band .eyebrow::before{ background:var(--sand); box-shadow:0 0 0 4px rgba(199,232,154,.2); } .variant-a .green-band h2{ font-family:"Noto Serif TC","Noto Sans TC",sans-serif; font-size:clamp(24px,3vw,36px); font-weight:900; line-height:1.3; margin:14px 0 12px; text-wrap:balance; } .variant-a .green-band p{ color:rgba(255,255,255,.85); max-width:52ch; font-size:clamp(15px,1.5vw,17px); } .variant-a .green-band .band-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; } .variant-a .green-band .btn-primary{ background:#fff; color:var(--forest); } .variant-a .green-band .btn-primary:hover{ background:var(--cream); } .variant-a .green-band .btn-outline{ background:transparent; border:1.5px solid rgba(255,255,255,.5); color:#fff; } .variant-a .green-band .btn-outline:hover{ background:#fff; color:var(--forest); } .variant-a .green-band .band-media{ position:relative; z-index:1; aspect-ratio:4/3; border-radius:22px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 12px, rgba(255,255,255,.03) 12px 24px); border:1px solid rgba(255,255,255,.2); } .variant-a .green-band .band-media::after{ color:rgba(255,255,255,.85); background:rgba(255,255,255,.12); } .variant-a .green-band .band-media svg{ color:rgba(255,255,255,.5); } @media (max-width:980px){ .variant-a .green-band .band-inner{ grid-template-columns:1fr; } .variant-a .hero-media-wrap{ order:-1; } } /* ============================================================ VARIANT C — 巨型編輯風 (Editorial Maximal) 超大字級、拱形圖框、森林綠整片色塊、雜誌式排版 ============================================================ */ .variant-c{ --bg:#F7F1E4; background:#F7F1E4; } .variant-c .site-header{ background:#fff; } .variant-c .section-title em,.variant-c .hero-c-title em{ font-style:normal; color:var(--forest); } /* hero — 左右分欄：左文字右影片 */ .variant-c .hero-c{ background:#DEC8B6; overflow:hidden; } .variant-c .hero-c .slide{ position:relative; } .variant-c .hero-c .container{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,4vw,60px); align-items:center; min-height:min(82vh,740px); padding-block:64px; } .variant-c .hero-c-copy{ display:flex; flex-direction:column; gap:26px; align-items:flex-start; } .variant-c .hero-index{ display:flex; align-items:center; gap:12px; font-family:var(--font-en); font-size:14px; letter-spacing:.22em; color:var(--brown-deep); font-weight:600; } .variant-c .hero-index::before{ content:""; width:48px; height:2px; background:var(--brown-deep); } .variant-c .hero-c-title{ font-size:var(--text-hero); font-weight:var(--fw-black); line-height:.95; letter-spacing:-.015em; text-wrap:balance; color:var(--ink); } .variant-c .hero-c-title em{ font-style:normal; color:var(--coral); } .variant-c .hero-desc{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-soft); max-width:44ch; } .variant-c .hero-c .btn-primary{ background:var(--forest); } .variant-c .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; } .variant-c .hero-cta .btn{ min-width:220px; } .variant-c .btn-accent{ background:var(--coral); } .variant-c .btn-accent:hover{ background:var(--coral-deep); } .variant-c .hero-c .btn-primary:hover{ background:var(--forest-deep); } .variant-c .hero-c-media{ position:relative; align-self:center; display:flex; align-items:center; justify-content:center; } .variant-c video.hero-c-video{ width:100%; aspect-ratio:3/4; max-height:min(78vh,680px); object-fit:cover; display:block; border-radius:260px 260px 28px 28px; box-shadow:0 24px 60px rgba(42,39,34,.16); } .variant-c .float-tag{ position:absolute; left:-24px; bottom:40px; z-index:2; background:var(--forest); color:#fff; padding:16px 22px; border-radius:18px; box-shadow:var(--shadow-md); max-width:210px; } .variant-c .float-tag .k{ font-family:var(--font-en); font-weight:700; font-size:26px; display:block; } .variant-c .float-tag .v{ font-size:13px; color:rgba(255,255,255,.82); } .variant-c .hero-c .carousel-dots{ position:absolute; bottom:26px; left:0; right:0; width:auto; display:flex; justify-content:center; z-index:3; } .variant-c .hero-c .carousel-dots button{ background:rgba(255,255,255,.45); } .variant-c .hero-c .carousel-dots button[aria-selected="true"]{ background:#fff; } /* slide 1 — 滿版影片背景，文字疊上 */ .variant-c .hero-c .slide.slide-full{ position:relative; } .variant-c .slide-full .hero-c-bgvideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:var(--forest-deep); } .variant-c .slide-full .hero-c-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(15,29,20,.4) 0%, rgba(15,29,20,.24) 38%, rgba(15,29,20,.04) 68%, rgba(15,29,20,.1) 100%); } .variant-c .slide-full .container{ position:relative; z-index:2; display:flex; align-items:center; min-height:min(82vh,740px); padding-block:64px; } .variant-c .slide-full .container{ padding-inline:clamp(80px,7vw,120px); } .variant-c .slide-full .hero-c-copy{ max-width:660px; } .variant-c .slide-full .hero-index{ color:var(--sand); } .variant-c .slide-full .hero-index::before{ background:var(--sand); } .variant-c .slide-full .hero-c-title{ color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.35); } .variant-c .slide-full .hero-c-title span{ display:block; white-space:nowrap; } .variant-c .slide-full .hero-c-title em{ color:#fff; } .variant-c .slide-full .hero-desc{ color:rgba(255,255,255,.9); } .variant-c .slide-full .btn-outline{ border-color:rgba(255,255,255,.55); color:#fff; } .variant-c .slide-full .btn-outline:hover{ background:#fff; color:var(--ink); } @media (max-width:900px){ .variant-c .hero-c, .variant-c .hero-c .carousel, .variant-c .hero-c .slides, .variant-c .hero-c .slide-full{ min-height:min(72svh,560px); } .variant-c .slide-full .container{ min-height:min(72svh,560px); padding-block:64px 48px; padding-inline:clamp(28px,6vw,64px); } .variant-c .slide-full .hero-c-title{ font-size:clamp(34px,7vw,56px) !important; } } /* 平板/大手機：主視覺整塊垂直置中於影片高度，nav 標題不換行 */ @media (min-width:481px) and (max-width:900px){ .variant-c .hero-c, .variant-c .hero-c .carousel, .variant-c .hero-c .slides, .variant-c .hero-c .slide-full{ min-height:min(78svh,620px); } .variant-c .hero-c .slide-full .container{ min-height:min(78svh,620px); align-items:center; padding-block:40px; padding-inline:clamp(80px,11vw,110px); } .nav > a, .nav-item > a{ white-space:nowrap; } } @media (max-width:480px){ .variant-c .hero-c .slide-full .container{ min-height:min(72svh,560px); align-items:center; padding-block:40px; } .variant-c .slide-full .hero-c-title{ font-size:34px !important; line-height:1.3 !important; } .variant-c .slide-full .hero-cta{ flex-direction:row; flex-wrap:nowrap; gap:10px; width:100%; max-width:100%; } .variant-c .slide-full .hero-cta .btn{ flex:1; min-width:0; padding-inline:8px; font-size:14px; text-align:center; justify-content:center; white-space:nowrap; } } .variant-c .hero-c .carousel-arrow{ background:transparent; border:1.5px solid rgba(255,255,255,.7); color:#fff; z-index:3; } .variant-c .hero-c .carousel-arrow:hover{ background:#fff; color:var(--ink); border-color:#fff; } /* ============================================================ VARIANT C — Why Kaniva 食材聚攏 scroll 動態中央產品 + 周圍食材圓框，捲動時從外圍聚攏、成分說明依序點亮 ============================================================ */ .variant-c .why-kaniva{ position:relative; height:220vh; background:#FBF7F0; } .variant-c .wk-sticky{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; overflow:hidden; } .variant-c .wk-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,56px); align-items:center; width:100%; padding-block:60px; } .variant-c .wk-copy{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; } .variant-c .wk-title{ font-family:"Nunito","Noto Sans TC",sans-serif; font-size:var(--text-3xl); font-weight:var(--fw-black); line-height:1.18; color:var(--ink); text-wrap:balance; } .variant-c .wk-title em{ font-style:normal; color:var(--coral); } .variant-c .wk-lead{ font-size:clamp(15px,1.5vw,17px); color:var(--ink-soft); max-width:46ch; line-height:1.9; } .variant-c .wk-points{ display:flex; flex-direction:column; gap:16px; margin-top:6px; } .variant-c .wk-points li{ display:flex; align-items:center; gap:14px; font-size:16px; font-weight:700; color:var(--muted); opacity:.38; transform:translateX(-8px); transition:opacity .5s var(--ease), color .5s var(--ease), transform .5s var(--ease); } .variant-c .wk-points li .dot{ width:12px; height:12px; border-radius:50%; background:currentColor; flex:none; } .variant-c .wk-points li.on{ opacity:1; color:#932B12; transform:none; } .variant-c .wk-points li.on .dot{ background:var(--coral); } .variant-c .wk-stage{ position:relative; aspect-ratio:1; width:100%; max-width:520px; margin-inline:auto; --p:1; --ring:200px; } .variant-c .wk-product{ position:absolute; left:50%; top:50%; width:64%; z-index:2; aspect-ratio:1940/3371; transform:translate(-50%,-50%) scale(calc(.92 + .1*var(--p))); } .variant-c .wk-product img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; filter:drop-shadow(0 26px 44px rgba(42,39,34,.24)); transition:opacity .5s ease; } .variant-c .wk-product img.on{ opacity:1; } .variant-c .wk-chip{ position:absolute; left:50%; top:50%; width:var(--cw, 33%); z-index:3; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--ring))) rotate(calc(-1 * var(--angle))) translate(var(--ox, 0px), var(--oy, 0px)); opacity:var(--p); transition:opacity .4s var(--ease); } .variant-c .wk-chip .ph{ aspect-ratio:1; border-radius:50%; } .variant-c .wk-chip img{ width:100%; aspect-ratio:1; object-fit:contain; display:block; filter:drop-shadow(0 16px 26px rgba(42,39,34,.22)); animation:wkFloat 5.5s ease-in-out infinite; animation-delay:var(--fd,0s); } @keyframes wkFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-16px) rotate(2deg); } } .variant-c .wk-chip .cap{ display:block; text-align:center; margin-top:9px; font-size:12.5px; font-weight:700; color:var(--ink-soft); } .variant-c .wk-chip-salmon{ --cw:35%; --ox:22px; --oy:0px; } .variant-c .wk-chip-pumpkin{ --cw:38%; --ox:-52px; --oy:0px; } @media (max-width:900px){ .variant-c .wk-inner{ grid-template-columns:1fr; gap:36px; } .variant-c .wk-copy{ order:1; } .variant-c .wk-stage{ order:0; max-width:400px; } .variant-c .wk-title{ font-size:34px; } .variant-c .wk-lead{ font-size:18px; line-height:1.9; max-width:none; } .variant-c .wk-points li{ font-size:16px; } } @media (max-width:600px){ /* 手機：食材圖聚攏半徑縮小、尺寸縮小，確保產品圖與食材圖都完整可見 */ .variant-c .wk-stage{ max-width:260px; width:100% !important; height:auto !important; } .variant-c .wk-product{ width:46%; } .variant-c .wk-chip-salmon{ --cw:22%; --ox:6px; --oy:0px; } .variant-c .wk-chip-pumpkin{ --cw:24%; --ox:-8px; --oy:0px; } .variant-c .wk-chip .cap{ font-size:11px; margin-top:6px; } } @media (prefers-reduced-motion:reduce){ .variant-c .why-kaniva{ height:auto; } .variant-c .wk-sticky{ position:static; min-height:0; } } /* advantages — 底圖隨 hover 切換 + 六張優勢卡疊在上方 */ .variant-c .adv-section{ position:relative; overflow:hidden; background:var(--forest-deep); color:#fff; min-height:1000px; display:flex; flex-direction:column; justify-content:center; } .variant-c .adv-bg{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .7s var(--ease); background-size:cover; background-position:center; background-repeat:no-repeat; } .variant-c .adv-bg.on{ opacity:1; } /* 各優勢對應底圖：先用漸層佔位，未來把 url() 換成實際照片即可 */ .variant-c .adv-bg[data-i="0"]{ background-image:linear-gradient(160deg,rgba(46,90,65,.28),rgba(22,48,31,.42)), url("../media/adv-1.webp"); } .variant-c .adv-bg[data-i="1"]{ background-image:linear-gradient(160deg,rgba(46,90,65,.28),rgba(22,48,31,.42)), url("../media/adv-2.webp"); } .variant-c .adv-bg[data-i="2"]{ background-image:linear-gradient(160deg,rgba(46,90,65,.28),rgba(22,48,31,.42)), url("../media/adv-3.webp"); } .variant-c .adv-bg[data-i="3"]{ background-image:linear-gradient(160deg,rgba(46,90,65,.28),rgba(22,48,31,.42)), url("../media/adv-4.webp"); } .variant-c .adv-bg[data-i="4"]{ background-image:linear-gradient(160deg,rgba(46,90,65,.28),rgba(22,48,31,.42)), url("../media/adv-5.webp"); } .variant-c .adv-bg[data-i="5"]{ background-image:linear-gradient(160deg,rgba(46,90,65,.28),rgba(22,48,31,.42)), url("../media/adv-6.webp"); } .variant-c .adv-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(15,29,20,.72) 0%, rgba(15,29,20,.5) 40%, rgba(15,29,20,.66) 100%); } .variant-c .adv-section > .container{ position:relative; z-index:2; } .variant-c .adv-section .eyebrow{ color:#fff; } .variant-c .adv-section .eyebrow::before{ background:#fff; } .variant-c .adv-section .section-title{ color:#fff; } .variant-c .adv-section .section-sub{ color:rgba(255,255,255,.82); } .variant-c .adv-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; align-items:stretch; } .variant-c .adv-card2{ display:flex; flex-direction:column; gap:14px; padding:24px 20px 22px; background:rgba(20,32,24,.34); backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.14); border-radius:16px; min-height:200px; transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); cursor:default; } .variant-c .adv-card2:hover{ background:rgba(10,18,12,.8); border-color:transparent; } .variant-c .adv-card2 .n{ font-family:var(--font-en); font-size:32px; font-weight:700; letter-spacing:.04em; color:var(--coral); } .variant-c .adv-card2 h3{ font-size:var(--text-lg); font-weight:var(--fw-heavy); color:#fff; line-height:1.3; } .variant-c .adv-card2 p{ font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.75; } .variant-c .adv-card2 .foot{ margin-top:auto; padding-top:14px; font-family:var(--font-en); font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--sand); border-top:1px solid rgba(255,255,255,.16); } @media (max-width:1080px){ .variant-c .adv-cards{ grid-template-columns:repeat(3,1fr); } } @media (max-width:760px){ .variant-c .adv-cards{ grid-template-columns:repeat(2,1fr); } .variant-c .adv-card2{ min-height:0; } } @media (max-width:900px){ /* 手機／平板：每張卡片以對應照片為背景，左右滑動（swipe）瀏覽 */ .variant-c .adv-section{ min-height:0; padding-block:52px; } .variant-c .adv-bg, .variant-c .adv-scrim{ display:none; } .variant-c .adv-cards{ display:flex; grid-template-columns:none; gap:14px; margin-top:28px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px var(--gutter) 16px; margin-inline:calc(-1 * var(--gutter)); scrollbar-width:none; } .variant-c .adv-cards::-webkit-scrollbar{ display:none; } .variant-c .adv-card2{ flex:0 0 min(80%,320px); scroll-snap-align:center; min-height:360px; justify-content:flex-end; gap:10px; padding:24px 22px 26px; background-color:var(--forest-deep); background-size:cover; background-position:center; backdrop-filter:none; border:none; overflow:hidden; } .variant-c .adv-card2:hover{ background-color:var(--forest-deep); transform:none; } .variant-c .adv-card2 .n{ font-size:38px; } .variant-c .adv-card2 h3{ font-size:22px; } .variant-c .adv-card2 p{ font-size:14px; color:rgba(255,255,255,.85); } .variant-c .adv-card2[data-adv="0"]{ background-image:linear-gradient(180deg,rgba(15,29,20,.12) 0%,rgba(15,29,20,.5) 52%,rgba(15,29,20,.85) 100%), url("../media/adv-1.webp"); } .variant-c .adv-card2[data-adv="1"]{ background-image:linear-gradient(180deg,rgba(15,29,20,.12) 0%,rgba(15,29,20,.5) 52%,rgba(15,29,20,.85) 100%), url("../media/adv-2.webp"); } .variant-c .adv-card2[data-adv="2"]{ background-image:linear-gradient(180deg,rgba(15,29,20,.12) 0%,rgba(15,29,20,.5) 52%,rgba(15,29,20,.85) 100%), url("../media/adv-3.webp"); } .variant-c .adv-card2[data-adv="3"]{ background-image:linear-gradient(180deg,rgba(15,29,20,.12) 0%,rgba(15,29,20,.5) 52%,rgba(15,29,20,.85) 100%), url("../media/adv-4.webp"); } .variant-c .adv-card2[data-adv="4"]{ background-image:linear-gradient(180deg,rgba(15,29,20,.12) 0%,rgba(15,29,20,.5) 52%,rgba(15,29,20,.85) 100%), url("../media/adv-5.webp"); } .variant-c .adv-card2[data-adv="5"]{ background-image:linear-gradient(180deg,rgba(15,29,20,.12) 0%,rgba(15,29,20,.5) 52%,rgba(15,29,20,.85) 100%), url("../media/adv-6.webp"); } } /* products — editorial, borderless, arch media */ .variant-c .prod-section{ background:#FBF7F0; } .variant-c .prod-card{ background:transparent; border:none; border-radius:0; } .variant-c .prod-card:hover{ transform:translateY(-6px); box-shadow:none; } .variant-c .prod-media{ aspect-ratio:4/5; border-radius:24px; background:var(--cream-2); overflow:hidden; } .variant-c .prod-media .prod-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6% 8%; } .variant-c .prod-body{ padding:20px 4px 0; } .variant-c .prod-body h3{ font-size:16px; font-weight:900; line-height:1.35; color:var(--ink); } .variant-c .prod-sell{ color:#932B12; font-weight:700; font-size:16px; } .variant-c .prod-card .btn{ align-self:flex-start; } .variant-c .tag{ background:var(--coral); color:#fff; } /* news — big editorial list */ .variant-c .news-section{ background:#F5F1E6; position:relative; --tex-op:0.1; --tex-size:80px; } .variant-c .news-section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:var(--tex-op, 0.5); mix-blend-mode:normal; background-image:url("../media/news-wheat.webp"); background-size:640px auto; background-repeat:repeat; } .variant-c .news-section > .container{ position:relative; z-index:1; } .variant-c .news-grid{ grid-template-columns:1fr; gap:0; } /* 知識中心 / 最新消息：左右兩欄各三則 */ .variant-c .news-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px); } .variant-c .news-col{ display:flex; flex-direction:column; } .variant-c .news-col-title{ font-size:22px; font-weight:900; color:var(--ink); padding-bottom:16px; border-bottom:2px solid var(--ink); margin-bottom:4px; } .variant-c .news-list{ display:flex; flex-direction:column; } .variant-c .news-cols .news-card{ flex-direction:row; align-items:center; gap:22px; padding:26px 0; border-bottom:1px solid var(--line); cursor:pointer; } .variant-c .news-cols .news-card .news-body{ align-self:center; } .variant-c .news-cols .news-arrow{ align-self:center; margin-top:24px; transition:transform .3s var(--ease), color .2s var(--ease); } .variant-c .news-cols .news-card:hover .news-arrow{ transform:translateX(6px); } .variant-c .news-cols .news-thumb{ width:180px; flex:none; aspect-ratio:16/10; overflow:hidden; border-radius:14px; display:block; } .variant-c .news-cols .news-thumb .news-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); } .variant-c .news-cols .news-card:hover .news-thumb .news-img{ transform:scale(1.08); } .variant-c .news-cols .news-card h3{ font-size:19px; } .variant-c .news-col-more{ align-self:flex-start; margin-top:28px; } @media (max-width:1180px){ .variant-c .news-cols{ grid-template-columns:1fr; gap:48px; } } @media (max-width:520px){ .variant-c .news-cols .news-card{ flex-direction:column; align-items:stretch; gap:14px; } .variant-c .news-cols .news-thumb{ width:100%; aspect-ratio:16/9; } .variant-c .news-cols .news-card h3{ font-size:18px; } .variant-c .news-cols .news-arrow{ display:none; } .variant-c .news-cols .news-media{ width:100%; } } .variant-c .news-card{ flex-direction:row; align-items:center; gap:32px; padding:30px 0; border-bottom:1px solid var(--line); } .variant-c .news-card:first-child{ border-top:1px solid var(--line); } /* 首頁文章直接作為 grid item；不影響內頁與文章列表。 */ .variant-c .home-news-section .news-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0; } .variant-c .home-news-section .news-cols > .news-card{ min-width:0; border-top:0; } .variant-c .home-news-section .news-cols > .news-card:nth-child(-n+2){ border-top:1px solid var(--line); } .variant-c .home-news-section .news-body{ min-width:0; overflow-wrap:anywhere; } @media (max-width:1180px){ .variant-c .home-news-section .news-cols{ grid-template-columns:minmax(0,1fr); } .variant-c .home-news-section .news-cols > .news-card:nth-child(2){ border-top:0; } } .variant-c .news-media{ width:240px; flex:none; aspect-ratio:16/10; } .variant-c .news-img{ object-fit:cover; border-radius:var(--radius); background:#fff; } .variant-c .news-img.contain{ object-fit:contain; } .variant-c .news-body{ display:flex; flex-direction:column; gap:8px; } .variant-c .news-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .variant-c .news-cat{ display:inline-block; white-space:nowrap; flex:none; font-size:12px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--coral); padding:4px 12px; border-radius:var(--radius-pill); } .variant-c .news-date{ font-family:var(--font-en); font-size:13px; color:var(--coral); font-weight:600; } .variant-c .news-card h3{ font-size:24px; font-weight:800; line-height:1.25; color:var(--ink); transition:color .2s var(--ease); } .variant-c .news-card:hover h3{ color:#932B12; } .variant-c .news-arrow{ margin-left:auto; flex:none; color:#932B12; } .variant-c .news-arrow svg{ width:30px; height:30px; } /* contact */ .variant-c .contact-section{ position:relative; background:#F7F1E4; overflow:hidden; } .variant-c .contact-section::before{ content:""; position:absolute; inset:0; z-index:0; background:url("../media/contact-bg.webp") center/cover no-repeat; } .variant-c .contact-section::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(247,241,228,0) 0%, rgba(247,241,228,0) 60%, rgba(247,241,228,.4) 100%); } .variant-c .contact-section > .container{ position:relative; z-index:2; } .variant-c .contact-grid{ align-items:stretch; } .variant-c .side-stack{ height:100%; justify-content:space-between; } .variant-c .form-card{ border-radius:24px; } .variant-c .contact-section .field input, .variant-c .contact-section .field textarea{ background:#fff; } .variant-c .contact-section .info-card, .variant-c .contact-section .info-card, .variant-c .contact-section .form-card{ border:none; background:rgba(251,247,240,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .variant-c .ai-card{ background:var(--coral); } .variant-c .ai-card p{ color:var(--ink); } .variant-c .ai-card .btn-secondary{ margin-top:22px; } .variant-c .ai-card .btn{ background:var(--forest); color:#fff; } .variant-c .ai-card .btn:hover{ background:var(--forest-deep); } .variant-c .locate-card{ display:block; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .variant-c .locate-card:hover{ box-shadow:var(--shadow-md); border-color:var(--coral); } /* 次按鈕：預設橘色外框，hover 填滿橘底、白字 */ .variant-c .btn-secondary{ position:relative; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:14px; font-weight:700; color:var(--ink); padding:11px 22px; border-radius:var(--radius-pill); background:transparent; border:1.5px solid var(--coral); cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease); } .variant-c .btn-secondary > svg{ width:16px; height:16px; position:relative; z-index:1; transition:transform .25s var(--ease); } .variant-c .btn-secondary .frame{ display:none; } .variant-c .btn-secondary:hover{ background:var(--coral); color:#fff; } .variant-c .btn-secondary:hover > svg{ transform:translateX(4px); } /* AI 卡（橘底）上的次按鈕：白色外框，hover 填白底、橘字 */ .variant-c .ai-secondary{ color:#fff; border-color:#fff; } .variant-c .ai-secondary:hover{ background:#fff; color:var(--coral); } /* ============================================================ 關於我們 About page（variant-c 共用） ============================================================ */ /* ---- HERO：巨型字＋偏移排版 ---- */ .variant-c .about-hero{ position:relative; overflow:hidden; background:linear-gradient(155deg,rgba(24,24,26,.72) 0%, rgba(24,24,26,.55) 100%), url("../media/about-hero.webp") center/cover no-repeat; color:#fff; padding:clamp(96px,15vw,190px) 0 clamp(70px,10vw,120px); animation:heroBannerIn 1.2s cubic-bezier(.22,1,.36,1) both; } @keyframes heroBannerIn{ from{ opacity:0; transform:scale(1.06); } to{ opacity:1; transform:scale(1); } } .variant-c .about-hero .container{ position:relative; z-index:1; } .variant-c .about-hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; } .variant-c .about-hero-bg span{ position:absolute; bottom:-8%; right:-3%; font-family:var(--font-en); font-weight:700; font-size:clamp(140px,26vw,380px); line-height:.8; color:rgba(255,255,255,.05); letter-spacing:-.03em; } .variant-c .about-hero-badge{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-en); font-size:13px; font-weight:600; letter-spacing:.1em; color:#F5A70E; } .variant-c .about-hero-zh{ font-size:clamp(15px,1.7vw,18px); font-weight:700; letter-spacing:.3em; color:rgba(255,255,255,.72); margin-top:12px; } .variant-c .about-hero-lead{ font-size:clamp(15px,1.6vw,18px); line-height:1.95; color:rgba(255,255,255,.82); max-width:60ch; margin-top:16px; } .variant-c .about-hero h1{ font-size:clamp(32px,5.6vw,64px); font-weight:900; line-height:1.22; letter-spacing:.01em; text-wrap:nowrap; margin:12px 0 0; max-width:none; } @media (max-width:640px){ .variant-c .about-hero h1{ text-wrap:balance; white-space:normal; } .variant-c .contact-hero{ height:340px !important; } } .variant-c .about-hero h1 em{ font-style:normal; color:var(--sand); } .variant-c .about-hero-sub{ font-family:var(--font-en); font-size:clamp(15px,1.7vw,19px); letter-spacing:.05em; color:rgba(255,255,255,.66); margin-top:24px; } /* ---- STORY：不對稱編輯排版，巨型年份 ---- */ .variant-c .about-story .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,80px); align-items:center; } .variant-c .about-story.flip .as-media{ order:-1; } .variant-c .as-copy .as-year{ font-family:var(--font-en); font-size:clamp(64px,9vw,128px); font-weight:700; line-height:.85; color:var(--forest-soft); letter-spacing:-.02em; } .variant-c .as-copy h2{ font-size:var(--text-2xl); font-weight:900; line-height:1.32; color:var(--ink); margin:8px 0 20px; } .variant-c .as-copy h2 .en{ display:block; font-family:var(--font-en); font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); margin-bottom:8px; } .variant-c .as-copy p{ font-size:16px; line-height:2; color:var(--ink-soft); } .variant-c .as-copy p + p{ margin-top:16px; } .variant-c .as-media{ position:relative; } .variant-c .as-media .ph{ aspect-ratio:4/5; border-radius:280px 280px 24px 24px; } .variant-c .about-story.flip .as-media .ph{ border-radius:24px 24px 280px 280px; } /* ---- MISSION：全幅深綠大引言 ---- */ .variant-c .about-mission{ position:relative; overflow:hidden; background:var(--forest-deep); color:#fff; text-align:center; } .variant-c .about-mission .container{ position:relative; z-index:1; max-width:1000px; } .variant-c .about-mission .mq{ font-family:var(--font-en); font-size:120px; line-height:.6; color:var(--sand); opacity:.5; } .variant-c .about-mission .m-en{ display:block; font-family:var(--font-en); font-size:15px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); margin-bottom:24px; } .variant-c .about-mission blockquote{ font-size:clamp(22px,3.2vw,40px); font-weight:900; line-height:1.5; letter-spacing:.01em; text-wrap:balance; } .variant-c .about-mission p{ font-size:16px; line-height:1.95; color:rgba(255,255,255,.78); max-width:60ch; margin:26px auto 0; } /* ---- FEATURE 區塊：左字右圖 / 左圖右字＋icon 列 ---- */ .variant-c .about-feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; } .variant-c .about-feat:not(.flip){ grid-template-columns:0.72fr 1.28fr; } .variant-c .feat-copy .en{ display:flex; align-items:center; gap:14px; font-family:var(--font-en); font-size:14px; font-weight:700; line-height:1; letter-spacing:.14em; color:var(--forest); text-transform:uppercase; } .variant-c .feat-copy .en::before{ content:""; width:36px; height:2px; background:var(--coral); flex:none; } .variant-c .feat-copy h2{ font-size:clamp(20px,2.4vw,28px); font-weight:800; line-height:1.5; color:var(--ink); margin:22px 0 18px; } .variant-c .feat-copy p{ font-size:15.5px; line-height:2; color:var(--ink-soft); } .variant-c .feat-copy p + p{ margin-top:14px; } .variant-c .feat-copy .btn{ margin-top:30px; } .variant-c .feat-media-duo{ display:grid; grid-template-columns:0.82fr 1.05fr; gap:28px; align-items:start; } .variant-c .feat-media-duo .ph:first-child{ aspect-ratio:3/4; border-radius:20px; margin-top:56px; } .variant-c .feat-media-duo .ph:last-child{ aspect-ratio:3/4.6; border-radius:20px; } .variant-c .feat-media-duo .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .variant-c .about-timeline-sec{ overflow:visible; } .variant-c .about-feat.flip{ align-items:start; } .variant-c .feat-media-solo{ position:relative; } .variant-c .feat-media-duo .ph, .variant-c .feat-media-solo .ph{ border:none; } .variant-c .feat-media-duo .ph{ box-shadow:0 30px 60px -30px rgba(0,0,0,.35); } .variant-c .feat-media-solo .ph{ aspect-ratio:4/5; border-radius:24px; margin-top:clamp(-200px,-13vw,-120px); box-shadow:0 30px 60px -30px rgba(0,0,0,.35); } .variant-c .feat-media-solo .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .variant-c .feat-icons{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:clamp(40px,6vw,72px); } .variant-c .fi-item{ text-align:center; } .variant-c .fi-ico{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; border:1.5px solid var(--line); color:var(--forest); display:grid; place-items:center; } .variant-c .fi-ico svg{ width:30px; height:30px; } .variant-c .fi-item h4{ font-size:16px; font-weight:800; color:var(--forest); margin-bottom:6px; } .variant-c .fi-item p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); } .variant-c .about-feat-sec1{ display:flex; align-items:center; min-height:800px; } .variant-c .about-feat-sec1 > .container{ width:100%; } .variant-c .about-feat-sec2{ display:flex; align-items:center; min-height:640px; } .variant-c .about-feat-sec2 > .container{ width:100%; } @media (max-width:820px){ .variant-c .about-feat-sec1, .variant-c .about-feat-sec2{ min-height:0; display:block; } .variant-c .about-feat, .variant-c .about-feat:not(.flip){ grid-template-columns:1fr; gap:28px; } .variant-c .about-feat.flip .feat-media-solo{ order:-1; } .variant-c .feat-media-solo .ph{ margin-top:0; } .variant-c .feat-media-duo .ph:first-child{ margin-top:0; } .variant-c .feat-icons{ grid-template-columns:repeat(2,1fr); gap:28px 16px; } } /* ---- CERT 認證跑馬燈（logo + 文字）---- */ .variant-c .about-cert{ background:#fff; padding:clamp(28px,4vw,44px) 0; overflow:hidden; } .variant-c .cert-track{ display:flex; gap:24px; width:max-content; align-items:stretch; animation:certScroll 44s linear infinite; } .variant-c .about-cert:hover .cert-track{ animation-play-state:paused; } .variant-c .cert-item{ display:flex; align-items:center; justify-content:center; padding:18px 32px; background:#fff; border-radius:18px; white-space:nowrap; min-width:170px; } .variant-c .cert-item img{ height:110px; width:auto; max-width:320px; object-fit:contain; display:block; } .variant-c .cert-logo img{ max-height:44px; max-width:130px; width:auto; object-fit:contain; display:block; } .variant-c .cert-logo > span{ font-family:var(--font-en); font-weight:700; font-size:15px; color:var(--forest); } .variant-c .cert-logo img{ width:100%; height:100%; object-fit:contain; } .variant-c .cert-logo span{ font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.02em; } .variant-c .cert-item .cert-name{ font-family:var(--font-en); font-size:17px; font-weight:700; color:var(--ink); line-height:1.2; } .variant-c .cert-item .cert-mean{ font-size:13px; color:var(--ink-soft); line-height:1.2; margin-top:4px; } @keyframes certScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .variant-c .cert-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } } /* ---- TIMELINE：橫向時間軸（年份在上、圓點串線、文字在下）---- */ .variant-c .about-timeline-sec{ background:var(--cream); } .variant-c .about-timeline-sec .section-title{ font-size:clamp(30px,4.2vw,52px); } .variant-c .about-timeline{ margin-top:56px; } .variant-c .tl-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; } .variant-c .tl-track::before{ content:""; position:absolute; left:28px; right:28px; top:0; height:4px; background:linear-gradient(90deg,var(--coral),var(--forest)); border-radius:4px; } .variant-c .tl-item{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:34px 30px 34px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .variant-c .tl-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .variant-c .tl-item::before{ content:""; position:absolute; top:-7px; left:30px; width:16px; height:16px; border-radius:50%; background:var(--coral); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line); } .variant-c .tl-num{ position:absolute; top:26px; right:28px; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--muted); } .variant-c .tl-year{ font-family:var(--font-en); font-size:clamp(38px,4.4vw,58px); font-weight:700; line-height:.9; color:var(--forest); letter-spacing:-.01em; margin:10px 0 18px; } .variant-c .tl-item h3{ font-size:clamp(17px,1.9vw,20px); font-weight:800; color:var(--ink); margin:0 0 12px; padding-top:16px; border-top:1px solid var(--line); } .variant-c .tl-item p{ font-size:14.5px; line-height:1.85; color:var(--ink-soft); } .variant-c .tl-hint{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:28px; font-size:13px; color:var(--muted); font-family:var(--font-en); letter-spacing:.04em; } .variant-c .tl-hint svg{ width:18px; height:18px; } /* ---- VALUES：編號編輯卡 ---- */ .variant-c .about-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:48px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--surface); } .variant-c .value-card{ padding:clamp(30px,3vw,44px); border-right:1px solid var(--line); transition:background .35s var(--ease); } .variant-c .value-card:last-child{ border-right:none; } .variant-c .value-card:hover{ background:var(--cream-2); } .variant-c .value-idx{ font-family:var(--font-en); font-size:15px; font-weight:700; color:var(--coral); letter-spacing:.1em; } .variant-c .value-ico{ width:56px; height:56px; margin:22px 0 20px; border-radius:16px; background:var(--forest-soft); color:var(--forest); display:grid; place-items:center; } .variant-c .value-ico svg{ width:27px; height:27px; } .variant-c .value-card h3{ font-size:20px; font-weight:800; color:var(--ink); margin-bottom:12px; } .variant-c .value-card p{ font-size:14.5px; line-height:1.9; color:var(--ink-soft); } /* ---- QUALITY v2：標題＋分頁＋左清單右圖（參考 Lightwater）---- */ .variant-c .aq-tabs{ display:flex; gap:36px; margin-top:40px; border-bottom:1px solid var(--line); } .variant-c .aq-tab{ position:relative; background:none; border:none; cursor:pointer; padding:0 0 16px; font-family:inherit; font-size:clamp(17px,2vw,21px); font-weight:800; color:var(--muted); transition:color .25s var(--ease); } .variant-c .aq-tab.on{ color:var(--ink); } .variant-c .aq-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--forest); border-radius:3px 3px 0 0; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .variant-c .aq-tab.on::after{ transform:scaleX(1); } .variant-c .aq-body{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; margin-top:44px; } .variant-c .aq-icons{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(44px,6vw,68px); } /* ---- Quality & Safety：整段釘住，滾動驅動右側清單上移 ---- */ .variant-c .about-std-sec{ background:var(--cream); } .variant-c .std-track{ position:relative; height:170vh; } .variant-c .std-sticky{ position:sticky; top:74px; height:720px; display:flex; align-items:stretch; overflow:hidden; } .variant-c .about-std-sec .container{ height:100%; } .variant-c .std-grid{ display:grid; grid-template-columns:minmax(340px,0.9fr) 1.1fr; gap:clamp(48px,7vw,120px); align-items:center; width:100%; height:100%; padding-top:60px; padding-bottom:60px; } .variant-c .std-viewport{ align-self:stretch; } .variant-c .std-left-inner{ position:static; } .variant-c .std-left .section-title{ font-size:clamp(30px,4vw,52px); line-height:1.18; margin-top:16px; } .variant-c .std-lead{ font-size:16.5px; line-height:1.85; color:var(--ink-soft); margin-top:22px; max-width:34ch; } .variant-c .std-cta{ margin-top:34px; } .variant-c .std-viewport{ height:100%; overflow:hidden; } .variant-c .std-right{ display:flex; flex-direction:column; gap:80px; padding:36px 2px 8px; will-change:transform; } .variant-c .std-row{ display:grid; grid-template-columns:64px 1fr; gap:clamp(20px,2.4vw,36px); align-items:start; } .variant-c .std-ic{ display:grid; place-items:center; width:64px; height:64px; color:var(--forest); } .variant-c .std-ic .aq-ic-img{ width:48px; height:48px; } .variant-c .std-txt h3{ font-size:22px; font-weight:800; color:var(--ink); margin-bottom:12px; letter-spacing:.01em; } .variant-c .std-txt p{ font-size:15.5px; line-height:1.9; color:var(--ink-soft); } @media (max-width:900px){ .variant-c .std-track{ height:auto; } .variant-c .std-sticky{ position:static; height:auto; padding-block:64px; } .variant-c .std-grid{ grid-template-columns:1fr; gap:44px; } .variant-c .std-lead{ max-width:none; } .variant-c .std-viewport{ height:auto; } .variant-c .std-right{ transform:none !important; } .variant-c .std-row{ opacity:1 !important; transform:none !important; } } .variant-c .aq-ic-item{ text-align:center; } .variant-c .aq-ic-ring{ display:inline-grid; place-items:center; width:72px; height:72px; border-radius:50%; border:1px solid var(--line); color:var(--forest); margin-bottom:18px; transition:background .35s var(--ease), transform .35s var(--ease), color .35s var(--ease); } .variant-c .aq-ic-ring svg{ width:30px; height:30px; } .variant-c .aq-ic-img{ width:34px; height:34px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .variant-c .aq-ic-item:hover .aq-ic-ring{ background:var(--forest); color:#fff; transform:translateY(-4px); } .variant-c .aq-ic-item h3{ font-size:18px; font-weight:800; color:var(--ink); margin-bottom:8px; } .variant-c .aq-ic-item p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); } @media (max-width:820px){ .variant-c .aq-icons{ grid-template-columns:1fr 1fr; gap:32px 20px; } } @media (max-width:480px){ .variant-c .aq-icons{ grid-template-columns:1fr; } } .variant-c .aq-panel{ display:none; } .variant-c .aq-panel.on{ display:block; animation:aqFade .45s var(--ease); } @keyframes aqFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .variant-c .aq-row{ display:flex; gap:18px; padding:24px 22px 24px 0; border-bottom:1px solid var(--line); cursor:default; border-radius:14px; transition:background .3s var(--ease), padding-left .3s var(--ease); } .variant-c .aq-row:hover{ padding-left:20px; } .variant-c .aq-row:first-child{ padding-top:0; } .variant-c .aq-row:last-child{ border-bottom:none; } .variant-c .aq-ico{ display:none; } .variant-c .aq-ico svg{ width:23px; height:23px; } .variant-c .aq-row h3{ font-size:18px; font-weight:800; color:var(--ink); margin-bottom:8px; } .variant-c .aq-row p{ font-size:14.5px; line-height:1.85; color:var(--ink-soft); } .variant-c .aq-media{ position:relative; } .variant-c .aq-shot{ position:absolute; inset:0; aspect-ratio:4/5; border-radius:24px; opacity:0; transition:opacity .5s var(--ease); } .variant-c .aq-shot.on{ opacity:1; position:relative; } .variant-c .aq-media .ph{ aspect-ratio:4/5; border-radius:24px; } @media (max-width:820px){ .variant-c .aq-body{ grid-template-columns:1fr; gap:28px; } .variant-c .aq-media{ order:-1; } .variant-c .aq-media .ph{ aspect-ratio:16/11; } } /* ---- QUALITY 品質保證 h2 清單 ---- */ .variant-c .about-quality{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(40px,6vw,88px); margin-top:52px; } .variant-c .q-item{ display:flex; gap:20px; padding:32px 0; border-bottom:1px solid var(--line); align-items:flex-start; } .variant-c .about-quality .q-item:nth-last-child(1), .variant-c .about-quality .q-item:nth-last-child(2){ border-bottom:none; } .variant-c .q-ico{ flex:none; width:52px; height:52px; border-radius:14px; background:var(--forest-soft); color:var(--forest); display:grid; place-items:center; } .variant-c .q-ico svg{ width:26px; height:26px; } .variant-c .q-item h3{ font-size:19px; font-weight:800; color:var(--ink); margin-bottom:10px; } .variant-c .q-item p{ font-size:15px; line-height:1.85; color:var(--ink-soft); } /* ---- CERT 認證一覽表 ---- */ .variant-c .cert-table-sec{ background:var(--cream-2); } .variant-c .cert-table-wrap{ margin-top:40px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); } .variant-c .cert-table{ width:100%; border-collapse:collapse; } .variant-c .cert-table thead th{ text-align:left; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--forest); padding:16px 22px; } .variant-c .cert-table td{ padding:16px 22px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft); vertical-align:top; } .variant-c .cert-table tbody tr:nth-child(even){ background:var(--cream); } .variant-c .cert-table td:first-child{ font-family:var(--font-en); font-weight:700; color:var(--forest); white-space:nowrap; } .variant-c .cert-table td:last-child{ color:var(--ink); font-weight:600; white-space:nowrap; } /* ---- CTA ---- */ .variant-c .about-cta-sec{ padding-inline:0; padding-bottom:0; } .variant-c .about-cta[data-reveal]{ opacity:0; transform:scale(1.06); transition:opacity 1s var(--ease), transform 1.3s cubic-bezier(.22,1,.36,1); } .variant-c .about-cta[data-reveal].in{ opacity:1; transform:scale(1); } .variant-c .about-cta{ position:relative; overflow:hidden; color:#fff; text-align:center; min-height:clamp(440px,48vw,640px); display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,6vw,80px) clamp(24px,6vw,80px); background:url(../media/about-cta-bg.webp) center/cover no-repeat; } .variant-c .about-cta::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,24,26,.72), rgba(24,24,26,.55)); }ansparent 55%); pointer-events:none; } .variant-c .about-cta-ico{ position:relative; width:64px; height:64px; margin:0 auto 24px; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center; } .variant-c .about-cta-ico svg{ width:30px; height:30px; } .variant-c .about-cta h2{ position:relative; font-size:clamp(28px,3.6vw,46px); font-weight:900; line-height:1.3; text-wrap:balance; } .variant-c .about-cta p{ position:relative; font-size:16px; line-height:1.9; color:rgba(255,255,255,.82); max-width:52ch; margin:16px auto 30px; } .variant-c .about-cta-btns{ position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } @media (max-width:600px){ .variant-c .about-cta h2{ text-wrap:pretty; } .variant-c .about-cta p{ max-width:none; } .variant-c .about-cta-btns{ flex-wrap:nowrap; gap:10px; } .variant-c .about-cta-btns .cta-banner-btn{ flex:1; min-width:0; padding-inline:8px; font-size:14px; white-space:nowrap; } } .variant-c .about-cta .btn-primary{ background:var(--forest); color:#fff; } .variant-c .about-cta .btn-primary:hover{ background:var(--forest-deep); color:#fff; } .variant-c .about-cta .btn-outline{ border:1.5px solid rgba(255,255,255,.55); color:#fff; } .variant-c .about-cta .btn-outline:hover{ background:#fff; color:var(--forest); } @media (max-width:820px){ .variant-c .about-story .container{ grid-template-columns:1fr; gap:24px; } .variant-c .about-story.flip .as-media{ order:0; } .variant-c .as-media .ph, .variant-c .about-story.flip .as-media .ph{ aspect-ratio:16/11; border-radius:120px 120px 20px 20px; } .variant-c .tl-track{ grid-template-columns:1fr; gap:18px; } .variant-c .tl-track::before{ display:none; } .variant-c .about-values{ grid-template-columns:1fr; } .variant-c .value-card{ border-right:none; border-bottom:1px solid var(--line); } .variant-c .value-card:last-child{ border-bottom:none; } .variant-c .about-quality{ grid-template-columns:1fr; } .variant-c .about-quality .q-item:nth-last-child(2){ border-bottom:1px solid var(--line); } .variant-c .cert-table thead{ display:none; } .variant-c .cert-table, .variant-c .cert-table tbody, .variant-c .cert-table tr, .variant-c .cert-table td{ display:block; } .variant-c .cert-table tr{ padding:8px 0; border-top:1px solid var(--line); } .variant-c .cert-table td{ padding:4px 20px; border:none; } .variant-c .cert-table td:first-child{ font-size:17px; padding-top:12px; } } /* ---------- Contact 頁 ---------- */ .variant-c .contact-hero{ display:flex; align-items:center; padding-block:0; } .variant-c .contact-hero .container{ padding-block:48px; width:100%; } .variant-c .contact-page{ background:var(--cream); } .variant-c .contact-page .contact-grid{ display:grid; grid-template-columns:0.88fr 1.12fr; gap:clamp(36px,5vw,80px); align-items:start; } .variant-c .contact-page .form-card{ border:none; box-shadow:none; } .variant-c .ci-col{ display:flex; flex-direction:column; align-items:flex-start; padding-top:6px; } .variant-c .ci-title{ font-size:clamp(30px,3.6vw,46px); font-weight:900; line-height:1.12; letter-spacing:-.01em; color:#2A2722; margin-top:16px; text-wrap:balance; } .variant-c .ci-title em{ font-style:normal; color:var(--coral); } .variant-c .ci-lead{ font-size:16px; line-height:1.95; color:var(--ink-soft); margin-top:18px; max-width:40ch; } .variant-c .ci-list{ display:flex; flex-direction:column; gap:22px; margin-top:38px; } .variant-c .ci-item{ display:flex; flex-direction:column; gap:3px; } .variant-c .ci-item .ci-label{ font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#932B12; } .variant-c .ci-item .ci-val{ font-size:16px; font-weight:600; color:#2A2722; line-height:1.6; } .variant-c .ci-item a.ci-link{ position:relative; width:fit-content; border-bottom:1px solid rgba(42,39,34,.28); padding-bottom:1px; transition:border-color .2s, color .2s; } .variant-c .ci-item a.ci-link:hover{ color:#932B12; border-color:#932B12; } .variant-c .ci-hours-block{ margin-top:36px; width:100%; max-width:340px; } .variant-c .ci-hours-title{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#932B12; margin-bottom:8px; } .variant-c .ci-social{ margin-top:34px; gap:6px; } .variant-c .ci-hours .ci-hrow{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:14.5px; } .variant-c .ci-hours .ci-hrow:last-child{ border-bottom:none; } .variant-c .ci-hours .ci-hrow span:first-child{ color:var(--ink-soft); font-weight:600; } .variant-c .ci-hours .ci-hrow span:last-child{ color:#2A2722; font-weight:700; } .variant-c .stores-sec{ position:relative; overflow:hidden; background:#fff; padding-bottom:0; } .variant-c .stores-sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.08; background-image:url("../media/news-wheat.webp"); background-size:640px auto; background-repeat:repeat; } .variant-c .stores-sec .container{ position:relative; z-index:1; } /* products catalog */ .variant-c .catalog{ display:grid; grid-template-columns:248px 1fr; gap:clamp(28px,4vw,60px); align-items:start; } .variant-c .cat-side{ position:sticky; top:96px; } .variant-c .cat-side .side-title{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#932B12; } .variant-c .filter-group{ border-top:1px solid var(--line); padding:18px 0; } .variant-c .filter-group:first-of-type{ margin-top:16px; } .variant-c .fg-title{ font-size:15px; font-weight:800; color:#2A2722; margin-bottom:10px; } /* accordion cat tree */ .variant-c .cat-tree{ margin-top:16px; border-top:1px solid var(--line); } .variant-c .cat-acc{ border-bottom:1px solid var(--line); } .variant-c .cat-acc-head{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; padding:16px 2px; font-size:15.5px; font-weight:800; color:#2A2722; text-align:left; } .variant-c .cat-acc-head .chev{ width:18px; height:18px; color:var(--muted); transition:transform .3s var(--ease); flex:none; } .variant-c .cat-acc[data-open="true"] .cat-acc-head .chev{ transform:rotate(180deg); } .variant-c .cat-acc-body{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease); } .variant-c .cat-acc[data-open="true"] .cat-acc-body{ max-height:1400px; } .variant-c .cat-acc-inner{ padding:2px 0 16px; } .variant-c .cat-acc .filter-opt{ padding:6px 0 6px 4px; font-size:14px; } .variant-c .prod-price{ display:flex; align-items:baseline; gap:10px; margin-top:10px; } .variant-c .prod-price .now{ font-family:var(--font-en); font-size:19px; font-weight:800; color:#932B12; } .variant-c .prod-price .was{ font-size:13.5px; color:var(--muted); text-decoration:line-through; } .variant-c .filter-opt{ display:flex; align-items:center; gap:11px; padding:7px 0; font-size:14.5px; color:var(--ink-soft); cursor:pointer; transition:color .15s var(--ease); } .variant-c .filter-opt:hover{ color:#2A2722; } .variant-c .filter-opt input{ appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none; cursor:pointer; border:1.5px solid rgba(42,39,34,.28); border-radius:5px; background:#fff; display:grid; place-content:center; transition:background .15s var(--ease), border-color .15s var(--ease); } .variant-c .filter-opt input:hover{ border-color:#932B12; } .variant-c .filter-opt input:checked{ background:#932B12; border-color:#932B12; } .variant-c .filter-opt input:checked::after{ content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); } .variant-c .filter-reset{ margin-top:6px; font-size:13.5px; font-weight:700; color:var(--ink); background:none; border:none; cursor:pointer; padding:0; transition:color .18s var(--ease); } .variant-c .filter-reset.has-filter{ color:#932B12; } .variant-c .filter-reset:hover{ color:#932B12; } .variant-c .cat-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid rgba(42,39,34,.10); } .variant-c .cat-bar .cat-count{ text-align:left; margin:0; } .variant-c .cat-sort{ position:relative; display:flex; align-items:center; gap:10px; } .variant-c .cat-sort-label{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--muted); } .variant-c .cat-sort-btn{ display:flex; align-items:center; gap:10px; font-family:inherit; font-size:14px; font-weight:700; color:#2A2722; background:var(--cream); border:1px solid rgba(42,39,34,.14); border-radius:10px; padding:9px 14px; cursor:pointer; transition:border-color .2s var(--ease); } .variant-c .cat-sort-btn:hover, .variant-c .cat-sort-btn[aria-expanded="true"]{ border-color:#932B12; outline:none; } .variant-c .cat-sort-btn svg{ width:16px; height:16px; color:#932B12; transition:transform .2s var(--ease); } .variant-c .cat-sort-btn[aria-expanded="true"] svg{ transform:rotate(180deg); } .variant-c .cat-sort-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:160px; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid rgba(42,39,34,.12); border-radius:12px; box-shadow:0 14px 34px rgba(42,39,34,.14); } .variant-c .cat-sort-menu button{ display:block; width:100%; text-align:left; font-family:inherit; font-size:14px; font-weight:600; color:#2A2722; background:none; border:none; border-radius:8px; padding:10px 12px; cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease); } .variant-c .cat-sort-menu button:hover{ background:var(--cream); } .variant-c .cat-sort-menu button[aria-selected="true"]{ background:var(--cream); color:#932B12; } /* ---- 共用下拉選單 Dropdown（設計規範 06d）---- 觸發鈕：米色底 + 1px rgba(42,39,34,.14) 框 + 10px 圓角 + 14px/700 深色字 + #932B12 箭頭(16px)，hover/開啟時框轉 #932B12、箭頭旋轉 180°。選單面板：白底、12px 圓角、6px 內距、陰影 0 14px 34px rgba(42,39,34,.14)；選項 14px/600，hover 米色底，選中米色底＋#932B12 字。新元件請直接用 .k-dropdown-btn / .k-dropdown-menu（自訂選單）或 .k-select（原生 select）。 */ .k-dropdown-btn, .k-select{ display:inline-flex; align-items:center; gap:10px; font-family:inherit; font-size:14px; font-weight:700; color:#2A2722; background:var(--cream); border:1px solid rgba(42,39,34,.14); border-radius:10px; padding:9px 14px; cursor:pointer; transition:border-color .2s var(--ease); } .k-select{ appearance:none; -webkit-appearance:none; padding-right:38px; } .k-dropdown-btn:hover, .k-dropdown-btn[aria-expanded="true"], .k-select:hover, .k-select:focus{ border-color:#932B12; outline:none; } .k-dropdown-btn svg{ width:16px; height:16px; color:#932B12; transition:transform .2s var(--ease); } .k-dropdown-btn[aria-expanded="true"] svg{ transform:rotate(180deg); } .k-dropdown-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:160px; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid rgba(42,39,34,.12); border-radius:12px; box-shadow:0 14px 34px rgba(42,39,34,.14); } .k-dropdown-menu button{ display:block; width:100%; text-align:left; font-family:inherit; font-size:14px; font-weight:600; color:#2A2722; background:none; border:none; border-radius:8px; padding:10px 12px; cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease); } .k-dropdown-menu button:hover{ background:var(--cream); } .k-dropdown-menu button[aria-selected="true"]{ background:var(--cream); color:#932B12; } .k-select-wrap{ position:relative; display:inline-block; } .k-select-wrap > svg{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#932B12; pointer-events:none; } .variant-c .cat-count{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-bottom:22px; } .variant-c .cat-main-head{ margin-bottom:clamp(28px,4vw,42px); } .variant-c .cat-main-head h2:not(.region-label){ font-size:clamp(26px,3vw,40px); font-weight:900; color:#2A2722; } .variant-c .cat-main-head p{ font-size:16px; line-height:1.85; color:var(--ink-soft); margin-top:12px; max-width:56ch; } .variant-c .catalog .prod-grid{ grid-template-columns:repeat(3,1fr); } .variant-c .prod-rating{ display:flex; align-items:center; gap:8px; margin-top:2px; } .variant-c .prod-rating .stars{ display:inline-flex; gap:1px; color:#F5A70E; } .variant-c .prod-rating .stars svg{ width:15px; height:15px; } .variant-c .prod-rating .rscore{ font-size:13.5px; font-weight:700; color:#2A2722; } .variant-c .prod-rating .rcount{ font-size:13px; color:var(--muted); } .variant-c .cat-empty{ grid-column:1/-1; text-align:center; color:var(--muted); font-size:15px; padding:40px 0; } @media (max-width:900px){ .variant-c .catalog{ grid-template-columns:1fr; gap:8px; } .variant-c .cat-side{ position:static; } .variant-c .catalog .prod-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .variant-c .catalog .prod-grid{ grid-template-columns:1fr; } } .variant-c .pd-intro-sub .prod-grid{ grid-template-columns:repeat(4,1fr); } /* 商品索引標籤 */ .variant-c .pd-tabs{ position:sticky; top:var(--pdtabs-top, 72px); z-index:40; background:var(--forest); } .variant-c .pd-tabs-row{ display:flex; justify-content:center; gap:clamp(20px,4vw,64px); flex-wrap:wrap; } .variant-c .pd-tabs a{ display:inline-block; padding:18px 2px; font-size:16px; font-weight:600; letter-spacing:.06em; color:#fff; transition:color .2s var(--ease); } .variant-c .pd-tabs a:hover, .variant-c .pd-tabs a.on{ color:#F5A70E; } @media (max-width:768px){ .variant-c .pd-tabs-row{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:28px; scrollbar-width:none; -ms-overflow-style:none; } .variant-c .pd-tabs-row::-webkit-scrollbar{ display:none; } .variant-c .pd-tabs a{ flex:none; white-space:nowrap; padding:14px 2px; } } @media (max-width:900px){ .variant-c .pd-intro-sub .prod-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .variant-c .pd-intro-sub .prod-grid{ grid-template-columns:1fr; } } /* 手機版商品分類收合 */ .variant-c .cat-side-toggle{ display:none; } .variant-c .cat-side-head, .variant-c .cat-side-show{ display:none; } @media (max-width:900px){ .variant-c .cat-side{ display:block; position:fixed; inset:0; z-index:120; background:#fff; overflow-y:auto; padding:0 20px 0; transform:translateX(-100%); visibility:hidden; transition:transform .35s var(--ease), visibility 0s .35s; } .variant-c .cat-side.open{ transform:none; visibility:visible; transition:transform .35s var(--ease); } .variant-c .cat-side-head{ display:flex; align-items:center; gap:14px; margin:0 -20px 8px; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; } .variant-c .cat-side-head span{ flex:1; text-align:center; font-size:16px; font-weight:800; color:#2A2722; padding-right:38px; } .variant-c .cat-side-close{ display:grid; place-items:center; width:38px; height:38px; background:none; border:none; color:#2A2722; cursor:pointer; } .variant-c .cat-side-close svg{ width:22px; height:22px; } .variant-c .cat-side .side-title{ display:none; } .variant-c .cat-side-show{ display:block; position:sticky; bottom:0; z-index:3; width:calc(100% + 40px); margin:0 -20px; padding:20px; background:var(--forest); color:#fff; border:none; font-family:inherit; font-size:16px; font-weight:800; cursor:pointer; } body.catside-lock{ overflow:hidden; } .variant-c .cat-side-toggle{ display:inline-flex; align-items:center; gap:10px; width:auto; background:var(--cream); border:1px solid rgba(42,39,34,.14); border-radius:10px; padding:12px 18px; font-family:inherit; font-size:15px; font-weight:700; color:#2A2722; cursor:pointer; transition:border-color .2s var(--ease); margin-bottom:18px; } .variant-c .cat-side-toggle:hover, .variant-c .cat-side-toggle[aria-expanded="true"]{ border-color:#932B12; } .variant-c .cat-side-toggle svg{ width:17px; height:17px; color:#932B12; } } @media (max-width:640px){ .variant-c .cat-side-toggle{ min-height:44px; width:100%; justify-content:space-between; } .variant-c .cat-bar .cat-sort{ flex:1; justify-content:flex-end; } .variant-c .cat-sort-btn{ min-height:44px; padding:11px 16px; font-size:15px; min-width:150px; justify-content:space-between; } .variant-c .cat-sort-menu{ min-width:150px; } .variant-c .cat-sort-menu button{ min-height:44px; } } .variant-c .stores-sec--legacy{ } /* products page */ .variant-c .cat-switch{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .variant-c .cat-chip{ display:inline-flex; align-items:center; padding:11px 26px; border-radius:var(--radius-pill); border:1.5px solid var(--forest); color:var(--forest); font-size:15px; font-weight:700; transition:background .25s var(--ease), color .25s var(--ease); } .variant-c .cat-chip:hover{ background:var(--forest); color:#fff; } .variant-c .prod-section a.prod-media{ display:block; } .variant-c .prod-body h3 a{ color:inherit; } .variant-c .cta-banner{ min-height:clamp(440px,48vw,640px); display:flex; align-items:center; overflow:hidden; } .variant-c .cta-banner[data-reveal]{ opacity:0; transform:scale(1.06); transition:opacity 1s var(--ease), transform 1.3s cubic-bezier(.22,1,.36,1); } .variant-c .cta-banner[data-reveal].in{ opacity:1; transform:scale(1); } .variant-c .cta-banner-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; } .variant-c .cta-banner-title{ font-size:clamp(28px,3.6vw,46px); font-weight:900; color:#fff; letter-spacing:.01em; text-wrap:balance; } .variant-c .cta-banner-lead{ font-size:clamp(15px,1.5vw,17px); line-height:1.95; color:rgba(255,255,255,.86); max-width:none; margin-top:18px; text-wrap:balance; } .variant-c .cta-banner-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; } @media (max-width:600px){ .variant-c .cta-banner-inner{ padding-inline:24px; } .variant-c .cta-banner-title{ text-wrap:pretty; } .variant-c .cta-banner-lead{ text-wrap:pretty; } .variant-c .cta-banner-btns{ flex-wrap:nowrap; gap:10px; width:100%; } .variant-c .cta-banner-btns .cta-banner-btn{ flex:1; min-width:0; padding-inline:8px; font-size:14px; white-space:nowrap; } } .variant-c .cta-banner-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:220px; padding:14px 34px; border-radius:var(--radius-pill); font-size:15px; font-weight:700; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .variant-c .cta-banner-btn.ghost{ border:1.5px solid rgba(255,255,255,.75); background:transparent; color:#fff; } .variant-c .cta-banner-btn.ghost:hover{ background:#fff; border-color:#fff; color:#2A2722; } .variant-c .cta-banner-btn.solid{ border:1.5px solid var(--forest); background:var(--forest); color:#fff; } .variant-c .cta-banner-btn.solid:hover{ background:var(--forest-deep); border-color:var(--forest-deep); color:#fff; } .variant-c .stores-head{ text-align:center; max-width:640px; margin:0 auto clamp(40px,5vw,60px); } .variant-c .stores-head .eyebrow{ justify-content:center; } .variant-c .stores-sec .container{ max-width:1400px; } .variant-c .stores-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .variant-c .store-card{ background:var(--cream); border:none; border-radius:16px; padding:28px 26px; display:flex; flex-direction:column; transition:transform .2s var(--ease); } .variant-c .store-card:hover{ transform:translateY(-3px); } .variant-c .store-card .st-region{ font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.12em; color:#932B12; } .variant-c .store-card h4{ font-size:19px; font-weight:800; color:#932B12; margin-top:8px; } .variant-c .store-card .st-row{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); font-weight:500; } .variant-c .store-card .st-row svg{ width:18px; height:18px; flex:none; margin-top:2px; color:#932B12; } .variant-c .store-card .st-row a:hover{ color:#932B12; } .variant-c .store-card .st-map{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:auto; padding:12px 22px; background:transparent; border:1.5px solid var(--coral); color:var(--ink); font-size:14px; font-weight:700; border-radius:var(--radius-pill); transition:background .3s var(--ease), color .3s var(--ease); } .variant-c .store-card .st-row:last-of-type{ margin-bottom:22px; } .variant-c .store-card .st-map svg{ width:16px; height:16px; } .variant-c .store-card .st-map:hover{ background:var(--coral); border-color:var(--coral); color:#fff; } /* 線上授權通路 */ .variant-c .channels-sec{ position:relative; overflow:hidden; background:#fff; } .variant-c .channels-sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.08; background-image:url("../media/news-wheat.webp"); background-size:640px auto; background-repeat:repeat; } .variant-c .channels-sec .container{ position:relative; z-index:1; } .variant-c .channel-logo{ background:var(--cream); } .variant-c .block-head{ display:flex; align-items:center; gap:16px; margin-bottom:32px; } .variant-c .block-head .bh-title{ display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; color:#2A2722; white-space:nowrap; } .variant-c .block-head .bh-title svg{ width:24px; height:24px; color:var(--forest); } .variant-c .block-head .bh-line{ flex:1; height:1px; background:var(--line); } .variant-c .channels-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .variant-c .channel-card{ text-align:center; } .variant-c .channel-logo{ height:120px; border:none; border-radius:12px; display:grid; place-items:center; padding:18px; overflow:hidden; color:var(--muted); transition:transform .2s var(--ease); } .variant-c .channel-logo svg{ width:34px; height:34px; opacity:.5; } .variant-c .channel-logo img{ max-width:100%; max-height:74px; width:auto; height:auto; object-fit:contain; } .variant-c .channel-card:hover .channel-logo{ transform:translateY(-3px); } .variant-c .channel-name{ font-size:14px; font-weight:600; color:var(--ink); margin-top:12px; } /* 分區 */ .variant-c .region-group{ margin-top:clamp(40px,5vw,56px); } .variant-c .region-label{ display:flex; align-items:center; gap:12px; font-size:24px; font-weight:800; color:#2A2722; margin-bottom:26px; } .variant-c .region-label::before{ content:""; width:5px; height:24px; border-radius:3px; background:#932B12; flex:none; } @media (max-width:980px){ .variant-c .contact-page .contact-grid{ grid-template-columns:1fr; } .variant-c .ci-col{ order:0; } .variant-c .stores-grid{ grid-template-columns:repeat(2,1fr); } .variant-c .channels-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .variant-c .stores-grid{ grid-template-columns:1fr; } .variant-c .channels-grid{ grid-template-columns:repeat(2,1fr); } .variant-c .block-head .bh-title{ font-size:19px; } } /* ---------- Responsive ---------- */ @media (max-width:980px){ .variant-c .hero-c .container{ grid-template-columns:1fr; gap:28px; min-height:0; padding-block:56px; } .variant-c .hero-c-media{ order:-1; } .variant-c video.hero-c-video{ width:min(360px,78%); margin-inline:auto; max-height:none; border-radius:200px 200px 24px 24px; } .variant-c .float-tag{ left:auto; right:8%; bottom:24px; } .variant-c .adv-rows{ grid-template-columns:1fr; } .variant-c .adv-row:nth-child(odd){ border-right:none; } } @media (max-width:980px){ .adv-grid{ grid-template-columns:repeat(2,1fr); } .prod-grid, .news-grid{ grid-template-columns:1fr 1fr; } .contact-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } .variant-a .hero-a .container{ grid-template-columns:1fr; gap:32px; min-height:0; } .variant-a .hero-media, .variant-a .hero-media-wrap{ order:-1; } } @media (max-width:1200px){ .nav{ gap:0; margin-left:4px; } .nav > a, .nav .nav-item > a{ font-size:15px !important; padding:10px 9px; } .header-social{ gap:2px; } .brand-logo{ height:46px; } } @media (max-width:900px){ .nav, .header-actions .btn, .header-actions .icon-btn.search, .header-actions .icon-btn.cart, .header-actions .icon-btn.user{ display:none; } .nav-toggle{ display:grid; } .header-actions{ margin-left:auto; } .mobile-nav{ display:block; position:fixed; inset:74px 0 0 0; z-index:55; background:#fff; transform:translateX(100%); transition:transform .35s var(--ease), visibility .35s; visibility:hidden; padding:24px var(--gutter); overflow-y:auto; border-top:1px solid var(--line); } body.menu-open .mobile-nav{ transform:translateX(0); visibility:visible; } body.menu-open{ overflow:hidden; } .mobile-nav a{ display:block; padding:16px 0; font-size:18px; font-weight:600; border-bottom:1px solid var(--line); } .mobile-nav .m-group{ border-bottom:1px solid var(--line); } .mobile-nav .m-group summary{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:18px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; } .mobile-nav .m-group summary::-webkit-details-marker{ display:none; } .mobile-nav .m-group summary::after{ content:""; width:10px; height:10px; margin-right:4px; flex:none; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); transition:transform .25s var(--ease); } .mobile-nav .m-group[open] summary::after{ transform:rotate(-135deg); } .mobile-nav .m-sub{ padding-bottom:8px; } .mobile-nav .m-sub a{ padding:12px 0 12px 18px; font-size:16px; font-weight:500; color:var(--ink-soft); border-bottom:none; } .mobile-nav .btn{ width:100%; margin-top:24px; } } @media (max-width:760px){ .prod-grid, .news-grid{ grid-template-columns:1fr; } .variant-c .prod-media{ aspect-ratio:1/1; } .adv-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; gap:30px; } .carousel-arrow{ display:none; } .variant-c .news-card{ flex-direction:column; align-items:flex-start; gap:14px; } .variant-c .news-media{ width:100%; } .variant-c .news-arrow{ display:none; } .variant-c .float-tag{ left:auto; right:16px; bottom:16px; } } @media (max-width:420px){ .header-inner{ gap:12px; } .brand{ font-size:19px; } .header-social{ gap:2px; } .header-social a{ width:34px; height:34px; } .header-social a i{ width:24px; height:24px; } } /* reveal on scroll (JS 未載入時內容照常顯示，利於 SEO / 無 JS) */ .js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].in{ opacity:1; transform:none; } /* 全元件進場 reveal（variant-c，由 main.js 指派）— 柔和 fade-up，可用面板即時調整 */ .js .reveal-item{ opacity:0; transform:translateY(var(--rv-dist,50px)); transition:opacity var(--rv-dur,1s) var(--rv-ease,cubic-bezier(.16,1,.3,1)), transform var(--rv-dur,1s) var(--rv-ease,cubic-bezier(.16,1,.3,1)); will-change:opacity,transform; } .js .reveal-item.in{ opacity:1; transform:none; } .js .reveal-img{ opacity:0; transform:translateY(calc(var(--rv-dist,50px) * 1.2)) scale(var(--rv-scale,1.03)); transition:opacity calc(var(--rv-dur,1s) * 1.15) var(--rv-ease,cubic-bezier(.16,1,.3,1)), transform calc(var(--rv-dur,1s) * 1.25) var(--rv-ease,cubic-bezier(.16,1,.3,1)); will-change:opacity,transform; } .js .reveal-img.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .js .reveal-item, .js .reveal-img{ opacity:1 !important; transform:none !important; } } /* ============================================================ MOTION — 動態強化（共用；A/B 為主，其餘變體同步受惠） ============================================================ */ @keyframes fadeUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } } @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } @keyframes drawPulse{ from{ stroke-dashoffset:60; } to{ stroke-dashoffset:0; } } @keyframes softGlow{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } /* 1. Hero 進場：作用中的 slide 內容逐項浮現，輪播切換時重新觸發 */ .js .slide .hero-copy > *, .js .slide .hero-c-copy > *{ opacity:0; } .slide.is-active .hero-copy > *, .slide.is-active .hero-c-copy > *{ animation:fadeUp .7s var(--ease) both; } .slide.is-active .hero-copy > *:nth-child(1), .slide.is-active .hero-c-copy > *:nth-child(1){ animation-delay:.06s; } .slide.is-active .hero-copy > *:nth-child(2), .slide.is-active .hero-c-copy > *:nth-child(2){ animation-delay:.15s; } .slide.is-active .hero-copy > *:nth-child(3), .slide.is-active .hero-c-copy > *:nth-child(3){ animation-delay:.24s; } .slide.is-active .hero-copy > *:nth-child(4), .slide.is-active .hero-c-copy > *:nth-child(4){ animation-delay:.33s; } .slide.is-active .hero-copy > *:nth-child(5), .slide.is-active .hero-c-copy > *:nth-child(5){ animation-delay:.42s; } /* hero 圖片浮現＋輕柔漂浮 */ .js .slide .hero-media, .js .slide .hero-c-media{ opacity:0; } .slide.is-active .hero-media, .slide.is-active .hero-c-media{ animation:fadeUp .8s var(--ease) .18s both; } .slide.is-active .hero-media .ph, .slide.is-active .hero-media, .slide.is-active .hero-c-media .ph{ will-change:transform; } .hero .ph{ animation:floatY 6s ease-in-out infinite; } /* 主視覺狗狗圖與包裝改由調整面板的 transform 控制，排除進場動畫覆寫 */ .variant-a .hero-media, .variant-a .hero-pack{ animation:none !important; opacity:1 !important; } /* 2. 卡片捲動交錯浮現（父層 [data-reveal].in 觸發子項） */ .js [data-stagger] > *{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); } [data-reveal].in [data-stagger] > *{ opacity:1; transform:none; } [data-reveal].in [data-stagger] > *:nth-child(1){ transition-delay:.05s; } [data-reveal].in [data-stagger] > *:nth-child(2){ transition-delay:.12s; } [data-reveal].in [data-stagger] > *:nth-child(3){ transition-delay:.19s; } [data-reveal].in [data-stagger] > *:nth-child(4){ transition-delay:.26s; } [data-reveal].in [data-stagger] > *:nth-child(5){ transition-delay:.33s; } [data-reveal].in [data-stagger] > *:nth-child(6){ transition-delay:.40s; } /* 3. 產品卡：光澤掃過 + 標籤位移 */ .prod-media{ overflow:hidden; } .prod-media::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%); transform:translateX(-130%); transition:transform .8s var(--ease); } .prod-card:hover .prod-media::before{ transform:translateX(130%); } .prod-tags .tag{ transition:transform .3s var(--ease); } .prod-card:hover .prod-tags .tag{ transform:translateY(-3px); } /* 4. 優勢圖示微互動 */ .adv-icon{ transition:transform .35s var(--ease), background .3s var(--ease); } .adv-card:hover .adv-icon{ transform:scale(1.1) rotate(-6deg); } /* 5. Logo 心跳線描繪 */ .brand .pulse path{ stroke-dasharray:60; animation:drawPulse 1.6s var(--ease) both; } .site-header:hover .brand .pulse path{ animation:drawPulse 1.2s var(--ease) both; } /* 6. 導覽 hover 底線 */ .nav a{ position:relative; } .nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:#932B12; border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); } .nav a:hover::after{ transform:scaleX(1); } /* 導覽下拉選單（產品系列 / 知識中心）*/ .nav-item{ position:relative; display:flex; align-items:center; align-self:stretch; height:74px; } .nav-menu{ position:absolute; top:100%; left:0; min-width:248px; background:#fff; border-radius:0; box-shadow:0 18px 44px rgba(20,24,31,.14); padding:8px 24px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:80; } .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu{ opacity:1; visibility:visible; transform:translateY(0); } .nav-menu::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px; } .nav-menu a{ display:block; position:relative; padding:16px 0; font-size:17px; font-weight:500; color:var(--ink); transition:color .18s var(--ease); } .nav-menu a::after{ content:""; position:absolute; left:0; bottom:8px; height:2px; width:100%; background:#932B12; border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); } .nav-menu a:hover{ color:#932B12; } .nav-menu a:hover::after{ transform:scaleX(1); } /* 7. 按鈕 hover 已含位移；連結箭頭已含位移 */ /* reduce motion */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .slide .hero-copy > *, .slide .hero-c-copy > *, .slide .hero-media, .slide .hero-c-media, [data-stagger] > *{ opacity:1 !important; transform:none !important; } } /* ============================================================ AI 智能客服浮動元件（全站共用；由 main.js 動態建立） ============================================================ */ .kchat-fab{ position:fixed; right:24px; bottom:24px; z-index:300; display:grid; place-items:center; width:60px; height:60px; padding:0; border-radius:50%; background:var(--forest); color:#fff; box-shadow:0 12px 30px rgba(33,67,50,.32); cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .kchat-fab:hover{ transform:translateY(-3px); background:var(--forest-deep); box-shadow:0 16px 38px rgba(33,67,50,.4); } .kchat-fab .ic{ position:relative; width:32px; height:32px; display:grid; place-items:center; flex:none; } .kchat-fab .ic svg{ width:30px; height:30px; } .kchat-fab .ic::after{ content:""; position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:#7FD36B; border:2px solid var(--forest); } .kchat-fab .lbl{ display:none; } body.kchat-open .kchat-fab{ opacity:0; pointer-events:none; transform:scale(.6); } .kchat-panel{ position:fixed; right:24px; bottom:24px; z-index:301; width:380px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 48px); background:var(--surface); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(42,39,34,.3); opacity:0; transform:translateY(24px) scale(.96); pointer-events:none; transform-origin:bottom right; transition:opacity .3s var(--ease), transform .3s var(--ease); } body.kchat-open .kchat-panel{ opacity:1; transform:none; pointer-events:auto; } .kchat-head{ background:linear-gradient(150deg,var(--forest),var(--forest-deep)); color:#fff; padding:18px 20px; display:flex; align-items:center; gap:13px; } .kchat-head .av{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; } .kchat-head .av svg{ width:24px; height:24px; } .kchat-head h4{ font-size:16px; font-weight:800; } .kchat-head p{ font-size:12px; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:6px; } .kchat-head p::before{ content:""; width:7px; height:7px; border-radius:50%; background:#7FD36B; } .kchat-head .x{ margin-left:auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; transition:background .2s; } .kchat-head .x:hover{ background:rgba(255,255,255,.16); } .kchat-head .x svg{ width:20px; height:20px; } .kchat-body{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; background:var(--cream); } .kchat-msg{ max-width:82%; padding:12px 15px; font-size:14px; line-height:1.65; border-radius:16px; } .kchat-msg.bot{ align-self:flex-start; background:#fff; color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; } .kchat-msg.user{ align-self:flex-end; background:var(--forest); color:#fff; border-bottom-right-radius:5px; } .kchat-typing{ align-self:flex-start; display:flex; gap:4px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px; } .kchat-typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:kchatBob 1s infinite; } .kchat-typing span:nth-child(2){ animation-delay:.15s; } .kchat-typing span:nth-child(3){ animation-delay:.3s; } @keyframes kchatBob{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } } .kchat-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 6px; background:var(--cream); } .kchat-chip{ font-size:13px; font-weight:600; color:var(--forest); background:var(--forest-soft); border:1px solid transparent; padding:8px 14px; border-radius:var(--radius-pill); cursor:pointer; transition:background .2s, border-color .2s; } .kchat-chip:hover{ border-color:var(--forest); } .kchat-input{ display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line); background:var(--surface); } .kchat-input input{ flex:1; border:1px solid var(--line); background:var(--cream); border-radius:var(--radius-pill); padding:12px 16px; font-size:14px; } .kchat-input input:focus{ outline:none; border-color:var(--forest); background:#fff; } .kchat-input button{ width:46px; height:46px; border-radius:50%; background:var(--forest); color:#fff; display:grid; place-items:center; flex:none; transition:background .2s; } .kchat-input button:hover{ background:var(--forest-deep); } .kchat-input button svg{ width:20px; height:20px; } @media (max-width:520px){ .kchat-panel{ right:12px; left:12px; width:auto; bottom:12px; height:calc(100vh - 24px); } } /* ============ 商品內頁 Product Detail ============ */ .variant-c .pd-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); padding-block:22px; } .variant-c .pd-crumb a{ color:var(--ink-soft); transition:color .2s var(--ease); } .variant-c .pd-crumb a:hover{ color:#932B12; } .variant-c .pd-crumb span{ color:var(--muted); } .variant-c .pd-crumb .cur{ color:#2A2722; font-weight:700; } .variant-c .pd-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:start; padding-top:8px; padding-bottom:clamp(56px,7vw,96px); } .variant-c .pd-gallery{ position:relative; background:var(--cream-2); border-radius:24px; aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center; } .variant-c .pd-gallery img{ width:100%; height:100%; object-fit:contain; padding:10% 12%; } .variant-c .pd-gallery .tag{ position:absolute; top:20px; left:20px; background:var(--coral); color:#fff; } .variant-c .pd-m-head{ display:none; } .variant-c .pd-info{ padding-top:6px; } .variant-c .pd-eyebrow{ font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#932B12; } .variant-c .pd-info h1{ font-size:clamp(28px,3.4vw,42px); font-weight:900; line-height:1.2; color:#2A2722; margin-top:10px; text-wrap:balance; } .variant-c .pd-sub{ font-size:17px; font-weight:700; color:var(--forest); margin-top:12px; } .variant-c .pd-desc{ font-size:15.5px; line-height:1.95; color:var(--ink-soft); margin-top:16px; max-width:46ch; } .variant-c .pd-specs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-top:26px; padding-top:26px; border-top:1px solid var(--line); } .variant-c .pd-spec .k{ font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); } .variant-c .pd-spec .v{ font-size:15.5px; font-weight:700; color:#2A2722; margin-top:4px; } .variant-c .pd-buy{ margin-top:30px; } .variant-c .pd-buy .lbl{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#932B12; margin-bottom:12px; } .variant-c .pd-buy-btns{ display:flex; flex-wrap:wrap; gap:12px; } .variant-c .pd-buy-btns a{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius-pill); background:var(--forest); color:#fff; font-size:14.5px; font-weight:700; transition:background .25s var(--ease), transform .25s var(--ease); } .variant-c .pd-buy-btns a:hover{ background:var(--forest-deep); transform:translateY(-2px); } .variant-c .pd-sec-head{ text-align:center; max-width:640px; margin:0 auto clamp(34px,4vw,48px); } .variant-c .pd-sec-head .eyebrow{ justify-content:center; } .variant-c .pd-sec-head h2{ font-size:clamp(24px,2.6vw,34px); font-weight:900; color:#2A2722; margin-top:6px; } .variant-c .pd-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .variant-c .pd-feat{ background:var(--surface); border-radius:20px; padding:32px 28px; } .variant-c .pd-feat .ic{ width:52px; height:52px; border-radius:14px; background:var(--forest-soft); color:var(--forest); display:grid; place-items:center; } .variant-c .pd-feat .ic svg{ width:26px; height:26px; } .variant-c .pd-feat h3{ font-size:18px; font-weight:800; color:#2A2722; margin-top:18px; } .variant-c .pd-feat p{ font-size:14px; line-height:1.8; color:var(--ink-soft); margin-top:8px; } .variant-c .pd-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; } .variant-c .pd-ingredients p{ font-size:15.5px; line-height:2; color:var(--ink-soft); } .variant-c .pd-ing-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .variant-c .pd-ing-list span{ font-size:13.5px; font-weight:600; color:var(--forest); background:var(--forest-soft); padding:8px 15px; border-radius:var(--radius-pill); } .variant-c .pd-table{ width:100%; border-collapse:collapse; font-size:14.5px; } .variant-c .pd-table caption{ text-align:left; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#932B12; margin-bottom:14px; } .variant-c .pd-table th, .variant-c .pd-table td{ text-align:left; padding:13px 8px; border-bottom:1px solid var(--line); } .variant-c .pd-table thead th{ font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); } .variant-c .pd-table td:last-child, .variant-c .pd-table th:last-child{ text-align:right; font-weight:700; color:#2A2722; } .variant-c .pd-table tbody th{ font-weight:600; color:#2A2722; } @media (max-width:900px){ .variant-c .pd-hero{ grid-template-columns:1fr; gap:28px; } .variant-c .pd-gallery{ max-width:420px; margin-inline:auto; } .variant-c .pd-feats{ grid-template-columns:1fr; } .variant-c .pd-two{ grid-template-columns:1fr; gap:36px; } } @media (max-width:520px){ .variant-c .pd-specs{ grid-template-columns:1fr; } } /* --- product detail (follows site style) --- */ .variant-c .pd-hero{ display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(36px,4.5vw,68px); align-items:center; padding-top:8px; padding-bottom:clamp(56px,7vw,96px); } .variant-c .pd-gallery{ position:relative; background:var(--cream-2); border-radius:24px; aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center; } .variant-c .pd-gallery img{ position:relative; width:100%; height:100%; object-fit:contain; padding:9% 11%; } .variant-c .pd-gallery .tag{ position:absolute; top:20px; left:20px; background:var(--coral); color:#fff; z-index:2; } .variant-c .pd-fusion{ position:absolute; top:20px; right:20px; z-index:2; font-family:var(--font-en); font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--forest); background:#fff; padding:8px 14px; border-radius:var(--radius-pill); } .variant-c .pd-thumbs{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 42px)/4); gap:14px; margin-top:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; } .variant-c .pd-thumbs::-webkit-scrollbar{ display:none; } .variant-c .pd-thumbs .pd-thumb{ scroll-snap-align:start; } .variant-c .pd-thumb{ aspect-ratio:1/1; background:var(--cream-2); border:1.5px solid transparent; border-radius:14px; overflow:hidden; cursor:pointer; padding:0; display:grid; place-items:center; transition:border-color .2s var(--ease), transform .2s var(--ease); } .variant-c .pd-thumb img{ width:100%; height:100%; object-fit:contain; padding:16%; } .variant-c .pd-thumb:hover{ transform:none; } .variant-c .pd-thumb{ opacity:.5; transition:opacity .2s var(--ease), transform .25s var(--ease), border-color .2s var(--ease); } .variant-c .pd-thumb:hover{ opacity:1; } .variant-c .pd-thumb[aria-current="true"]{ border-color:var(--forest); opacity:1; } .variant-c .pd-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:transparent; border:1.5px solid var(--forest); color:var(--forest); cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .variant-c .pd-nav svg{ width:22px; height:22px; } .variant-c .pd-nav:hover{ background:var(--forest); color:#fff; } .variant-c .pd-nav.prev{ left:14px; } .variant-c .pd-nav.next{ right:14px; } .variant-c .pd-tags2{ display:flex; flex-wrap:wrap; gap:10px; } .variant-c .pd-tags2 span{ font-size:13px; font-weight:700; color:#fff; background:var(--coral); padding:7px 15px; border-radius:var(--radius-pill); } .variant-c .pd-info h1{ font-size:clamp(28px,3.3vw,42px); font-weight:900; line-height:1.24; color:#2A2722; margin-top:18px; text-wrap:balance; } .variant-c .pd-hl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; } .variant-c .pd-hl{ display:flex; gap:14px; border-radius:16px; padding:20px; background:var(--surface); transition:transform .2s var(--ease); } .variant-c .pd-hl:hover{ transform:translateY(-3px); } .variant-c .pd-hl .ic{ width:44px; height:44px; border-radius:12px; background:var(--forest-soft); color:var(--forest); display:grid; place-items:center; flex:none; } .variant-c .pd-hl .ic svg{ width:22px; height:22px; } .variant-c .pd-hl h4{ font-size:15.5px; font-weight:800; color:#2A2722; } .variant-c .pd-hl p{ font-size:13px; line-height:1.75; color:var(--ink-soft); margin-top:6px; } .variant-c .pd-cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; } .variant-c .pd-cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; border-radius:var(--radius-pill); font-size:15px; font-weight:700; transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .variant-c .pd-cta-btn.solid{ background:var(--forest); color:#fff; } .variant-c .pd-cta-btn.solid:hover{ background:var(--forest-deep); } .variant-c .pd-cta-btn.ghost{ border:1.5px solid var(--coral); color:var(--ink); } .variant-c .pd-cta-btn.ghost:hover{ background:var(--coral); border-color:var(--coral); color:#fff; } .variant-c .pd-cta-btn.ghost:hover svg{ transform:translateX(4px); } .variant-c .pd-banner{ width:100%; aspect-ratio:16/5.4; min-height:230px; border-radius:20px; overflow:hidden; } /* section head — eyebrow + title + line (site block-head vocabulary) */ .variant-c .pd-shead{ display:flex; align-items:center; gap:20px; margin-bottom:clamp(28px,3vw,40px); } .variant-c .pd-shead-tt{ display:flex; flex-direction:column; gap:8px; } .variant-c .pd-shead .ey{ font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#932B12; } .variant-c .pd-shead h2{ font-size:clamp(24px,2.6vw,32px); font-weight:900; color:#2A2722; white-space:nowrap; } .variant-c .pd-shead .ln{ flex:1; height:1px; background:var(--line); align-self:flex-end; margin-bottom:10px; } /* ingredients — light card */ .variant-c .pd-ing-box{ border-radius:20px; padding:clamp(26px,3.2vw,38px); background:var(--cream); } .variant-c .pd-ing-box p{ font-size:15.5px; line-height:2; color:var(--ink-soft); } .variant-c .pd-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; } .variant-c .pd-badge{ background:#fff; border-radius:14px; padding:22px 14px; text-align:center; } .variant-c .pd-badge .big{ font-size:26px; font-weight:900; color:var(--forest); } .variant-c .pd-badge .sm{ font-size:13px; color:var(--ink-soft); margin-top:6px; } /* analysis table — light, site style */ .variant-c table.pd-analysis{ width:100%; border-collapse:collapse; font-size:15px; } .variant-c table.pd-analysis thead th{ text-align:left; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); padding:14px 20px; border-bottom:2px solid var(--line); } .variant-c table.pd-analysis thead th:last-child{ text-align:right; } .variant-c table.pd-analysis td{ padding:16px 20px; color:var(--ink-soft); border-bottom:1px solid var(--line); } .variant-c table.pd-analysis td:last-child{ text-align:right; font-weight:700; color:#2A2722; } .variant-c table.pd-analysis tbody tr:nth-child(even){ background:var(--cream); } /* 商品介紹 */ .variant-c .pd-intro-tt{ display:flex; align-items:center; gap:12px; font-size:24px; font-weight:800; color:#2A2722; margin:0 0 18px; } .variant-c .pd-intro-tt::before{ content:""; width:5px; height:24px; border-radius:3px; background:#932B12; flex:none; } .variant-c .pd-intro-tt + .pd-intro-tt, .variant-c .pd-intro-list + .pd-intro-tt{ margin-top:40px; } .variant-c .pd-intro-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15.5px; color:var(--ink-soft); } .variant-c .pd-intro-list li::before{ content:"- "; } .variant-c .pd-intro-imgs + .pd-intro-tt{ margin-top:80px; } .variant-c .pd-ingred-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; } .variant-c .pd-ingred-split .pd-ana-card{ margin:0; } .variant-c .pd-ingred-col{ display:flex; flex-direction:column; } .variant-c .pd-ingred-col .pd-ana-card{ flex:1; } .variant-c .pd-ingred-card{ display:flex; flex-direction:column; } .variant-c .pd-ingred-card .pd-ana-body{ flex:1; } @media (max-width:900px){ .variant-c .pd-ingred-split{ grid-template-columns:1fr; } } .variant-c .pd-intro-body{ font-size:15.5px; line-height:2; color:var(--ink-soft); margin:0; } .variant-c .pd-intro-imgs{ display:flex; flex-direction:column; align-items:center; gap:0; margin-top:40px; } .variant-c .pd-intro-imgs img{ display:block; width:100%; max-width:1200px; height:auto; } .variant-c .pd-intro-sub{ margin-top:40px; } .variant-c .pd-bar-tt{ display:flex; align-items:center; gap:12px; font-size:24px; font-weight:800; color:#2A2722; margin:0 0 18px; } .variant-c .pd-bar-tt::before{ content:""; width:5px; height:24px; border-radius:3px; background:#932B12; flex:none; } .variant-c .pd-spec{ font-size:15.5px; color:var(--ink-soft); margin:0; } .variant-c .pd-related{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:24px; } .variant-c .pd-related .rp{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; text-decoration:none; color:inherit; } .variant-c .pd-related .im{ width:100%; aspect-ratio:1/1.1; background:#fff; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; padding:18px; transition:box-shadow .25s var(--ease); } .variant-c .pd-related .im img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .3s var(--ease); } .variant-c .pd-related .rp:hover .im{ box-shadow:0 10px 26px rgba(0,38,79,.1); } .variant-c .pd-related .rp:hover .im img{ transform:scale(1.04); } .variant-c .pd-related h4{ font-size:15px; font-weight:600; line-height:1.55; color:#2A2722; margin:0; } .variant-c .pd-related .pr{ font-size:15px; font-weight:700; color:var(--forest); } .variant-c .pd-related .rp-btn{ font-size:14px; font-weight:700; color:#fff; background:var(--forest); border-radius:999px; padding:9px 22px; transition:background .25s var(--ease); } .variant-c .pd-related .rp:hover .rp-btn{ background:var(--forest-deep); } @media (max-width:900px){ .variant-c .pd-related{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .variant-c .pd-related{ grid-template-columns:1fr; } } /* analysis — packaging-label card */ .variant-c .pd-ana-card{ max-width:880px; margin:8px auto 0; background:#fff; border:2px solid var(--forest); border-radius:16px; overflow:hidden; } .variant-c .pd-ana-head{ background:var(--forest); color:#fff; text-align:center; padding:22px 24px 20px; display:flex; flex-direction:column; gap:6px; } .variant-c .pd-ana-head .en{ font-size:17px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; } .variant-c .pd-ana-head .zh{ font-size:16px; font-weight:800; letter-spacing:.4em; } .variant-c .pd-ana-body{ padding:20px 40px 28px; } .variant-c .pd-ana-row{ display:flex; align-items:baseline; gap:12px; padding:15px 0; font-size:16px; } .variant-c .pd-ana-row .k{ color:#2A2722; white-space:nowrap; } .variant-c .pd-ana-row .dots{ flex:1; border-bottom:2px dotted #C9C2B4; transform:translateY(-4px); } .variant-c .pd-ana-row .v{ font-weight:800; color:#2A2722; white-space:nowrap; } @media (max-width:640px){ .variant-c .pd-ana-body{ padding:12px 20px 18px; } .variant-c .pd-ana-row{ font-size:14px; padding:12px 0; } } .variant-c .pd-note{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-top:16px; } .variant-c .pd-note svg{ color:#932B12; flex:none; } /* feeding */ .variant-c .pd-feed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .variant-c .pd-feed-card{ border-radius:20px; padding:clamp(26px,3vw,34px); background:var(--cream); } .variant-c .pd-feed-card h3{ display:flex; align-items:center; gap:12px; font-size:19px; font-weight:800; color:#2A2722; } .variant-c .pd-feed-card h3 .hic{ width:38px; height:38px; border-radius:11px; background:var(--forest-soft); color:var(--forest); display:grid; place-items:center; flex:none; } .variant-c .pd-feed-card h3 .hic svg{ width:20px; height:20px; } .variant-c .pd-weight-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; } .variant-c .pd-weight-row .k{ color:var(--ink-soft); font-weight:600; } .variant-c .pd-weight-row .v{ font-weight:700; color:var(--forest); } .variant-c .pd-weight-note{ font-size:13px; color:var(--muted); margin-top:16px; } /* feeding columns (v2) */ .variant-c .pd-feed-cols{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:22px; } .variant-c .pd-feed-cols .fcol{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 8px; } .variant-c .pd-feed-cols .fcol + .fcol{ border-left:1px solid var(--line); } .variant-c .pd-feed-cols .kg{ font-size:18px; font-weight:900; color:var(--forest); } .variant-c .pd-feed-cols .ic{ display:grid; place-content:center; margin:auto 0; border-radius:50%; background:var(--coral); color:#fff; margin-top:16px; margin-bottom:16px; } .variant-c .pd-feed-cols .g{ font-size:16px; font-weight:900; color:var(--ink); margin-top:auto; } .variant-c .pd-feed-cols .per{ font-size:13px; color:var(--muted); margin-top:2px; } @media (max-width:520px){ .variant-c .pd-feed-cols{ grid-template-columns:repeat(2,1fr); gap:18px 0; } .variant-c .pd-feed-cols .fcol:nth-child(3){ border-left:none; } } .variant-c .pd-feed-card > p{ font-size:14.5px; line-height:1.9; color:var(--ink-soft); margin-top:14px; } .variant-c .pd-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:24px; } .variant-c .pd-steps::before{ content:""; position:absolute; top:26px; left:12%; right:12%; height:3px; background:var(--line); z-index:0; } .variant-c .pd-step{ position:relative; z-index:1; text-align:center; } .variant-c .pd-step .pct{ display:inline-grid; place-items:center; width:52px; height:52px; margin:0 auto; border-radius:50%; background:#fff; border:3px solid var(--forest-soft); font-family:var(--font-en); font-size:14px; font-weight:800; color:var(--forest); } .variant-c .pd-step:last-child .pct{ background:var(--forest); border-color:var(--forest); color:#fff; } .variant-c .pd-step .day{ font-size:13px; font-weight:800; color:#2A2722; margin-top:14px; } .variant-c .pd-step .cap{ font-size:11.5px; color:var(--muted); margin-top:4px; padding:0 4px; } /* more */ .variant-c .pd-more{ text-align:center; } .variant-c .pd-more h2{ font-size:clamp(21px,2.3vw,28px); font-weight:900; color:#2A2722; } .variant-c .pd-more-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px; } .variant-c .pd-more-btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border:1.5px solid var(--forest); border-radius:var(--radius-pill); font-size:14.5px; font-weight:700; color:var(--forest); transition:background .2s var(--ease), color .2s var(--ease); } .variant-c .pd-more-btn:hover{ background:var(--forest); color:#fff; } .variant-c .pd-more-btn svg{ width:17px; height:17px; } @media (max-width:900px){ .variant-c .pd-hero{ grid-template-columns:1fr; gap:30px; } .variant-c .pd-m-head{ display:block; } .variant-c .pd-m-head h1{ font-size:clamp(28px,3.4vw,42px); font-weight:900; line-height:1.2; color:#2A2722; margin-top:2px; text-wrap:balance; } .variant-c .pd-info > .tag, .variant-c .pd-info > h1{ display:none; } .variant-c .pd-gallery{ max-width:440px; margin-inline:auto; width:100%; } .variant-c .pd-hl-grid{ grid-template-columns:1fr; } .variant-c .pd-feed-grid{ grid-template-columns:1fr; } } @media (max-width:520px){ .variant-c .pd-cta-row{ grid-template-columns:1fr; } .variant-c .pd-badges{ grid-template-columns:1fr; } .variant-c .pd-steps{ grid-template-columns:repeat(2,1fr); gap:24px 0; } .variant-c .pd-steps::before{ display:none; } .variant-c .pd-shead h2{ white-space:normal; } } /* ---------- Blog (list + post) ---------- */ /* Native blog archive grid and category navigation. */ .variant-c .blog-list-sec .news-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0; } .variant-c .blog-list-sec .news-cols > .news-card{ min-width:0; border-top:0; } .variant-c .blog-list-sec .news-cols > .news-card:nth-child(-n+2){ border-top:1px solid var(--line); } .variant-c .blog-list-sec .news-body{ min-width:0; overflow-wrap:anywhere; } .variant-c .blog-list-sec .blog-empty{ grid-column:1/-1; } .variant-c .blog-tab-dd{ position:relative; display:none; } .variant-c .blog-tab-dd summary{ list-style:none; } .variant-c .blog-tab-dd summary::-webkit-details-marker{ display:none; } .variant-c .blog-tab-dd .k-dropdown-menu a{ display:block; width:100%; text-align:left; font-size:14px; font-weight:600; color:#2A2722; border-radius:8px; padding:10px 12px; } .variant-c .blog-tab-dd .k-dropdown-menu a:hover, .variant-c .blog-tab-dd .k-dropdown-menu a.is-on{ background:var(--cream); color:#932B12; } @media(max-width:1180px){ .variant-c .blog-list-sec .news-cols{ grid-template-columns:minmax(0,1fr); } .variant-c .blog-list-sec .news-cols > .news-card:nth-child(2){ border-top:0; } } .variant-c .blog-tabs{ display:flex; gap:8px; flex-wrap:wrap; } .variant-c .blog-tab{ font-family:inherit; font-size:14px; font-weight:700; color:var(--ink-soft); background:var(--cream); border:1px solid rgba(42,39,34,.12); border-radius:var(--radius-pill); padding:8px 18px; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .variant-c .blog-tab:hover{ border-color:#932B12; color:#932B12; } .variant-c .blog-tab.is-on{ background:#932B12; border-color:#932B12; color:#fff; } @media (max-width:640px){ .variant-c .blog-tabs{ display:none; } .variant-c .blog-tab-dd{ display:block !important; flex:1; max-width:220px; } .variant-c .blog-tab-dd .k-dropdown-btn{ width:100%; justify-content:space-between; min-height:44px; padding:11px 16px; font-size:15px; } .variant-c .blog-tab-dd .k-dropdown-menu{ width:100%; } .variant-c .blog-tab-dd .k-dropdown-menu a{ min-height:44px; } } .variant-c .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.4vw,32px); } .variant-c .blog-card{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 14px rgba(42,39,34,.06); transition:transform .22s var(--ease), box-shadow .22s var(--ease); } .variant-c .blog-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(42,39,34,.12); } .variant-c .blog-thumb{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cream); } .variant-c .blog-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .variant-c .blog-card:hover .blog-thumb img{ transform:scale(1.05); } .variant-c .blog-card-body{ display:flex; flex-direction:column; gap:12px; padding:22px 24px 26px; flex:1; } .variant-c .blog-card-body h3{ font-size:18px; font-weight:900; line-height:1.5; color:var(--ink); } .variant-c .blog-card-body h3 a{ color:inherit; } .variant-c .blog-card-body p{ font-size:14.5px; line-height:1.8; color:var(--ink-soft); text-wrap:pretty; } .variant-c .blog-more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#932B12; } .variant-c .blog-more svg{ width:16px; height:16px; transition:transform .2s var(--ease); } .variant-c .blog-card:hover .blog-more svg{ transform:translateX(4px); } .variant-c .post-head{ max-width:820px; } .variant-c .post-head h1{ font-size:clamp(28px,3.4vw,42px); font-weight:900; line-height:1.4; color:var(--ink); margin-top:14px; text-wrap:pretty; } .variant-c .post-lead{ font-size:17px; line-height:1.95; color:var(--ink-soft); margin-top:18px; text-wrap:pretty; } .variant-c .post-share{ display:flex; align-items:center; gap:12px; margin-top:24px; } .variant-c .post-share span{ font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--muted); } .variant-c .post-share a{ display:grid; place-content:center; width:34px; height:34px; border-radius:50%; background:var(--cream); transition:background .18s var(--ease); } .variant-c .post-share a:hover{ background:rgba(147,43,18,.12); } .variant-c .post-share i{ display:block; width:16px; height:16px; background:#932B12; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .variant-c .post-cover{ border-radius:18px; overflow:hidden; aspect-ratio:16/7; } .variant-c .post-cover img{ width:100%; height:100%; object-fit:cover; } .variant-c .post-body{ max-width:760px; } .variant-c .post-body h2{ font-size:clamp(21px,2.2vw,26px); font-weight:900; color:var(--ink); margin:clamp(34px,4vw,48px) 0 14px; } .variant-c .post-body h2:first-child{ margin-top:0; } .variant-c .post-body p{ font-size:16.5px; line-height:2.05; color:var(--ink-soft); margin-bottom:16px; text-wrap:pretty; } .variant-c .post-ul{ list-style:none; display:flex; flex-direction:column; gap:12px; background:var(--cream); border-radius:14px; padding:24px 26px; margin:8px 0 18px; } .variant-c .post-ul li{ position:relative; padding-left:20px; font-size:16px; line-height:1.9; color:var(--ink-soft); } .variant-c .post-ul li::before{ content:""; position:absolute; left:0; top:13px; width:7px; height:7px; border-radius:50%; background:#932B12; } .variant-c .post-ul strong{ color:var(--ink); font-weight:800; } .variant-c .post-body blockquote{ margin:clamp(28px,3vw,38px) 0; padding:4px 0 4px 22px; border-left:4px solid #932B12; font-size:18px; font-weight:700; line-height:1.85; color:var(--ink); } .variant-c .post-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(30px,3.4vw,42px); } .variant-c .tag-pill{ font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--cream); border-radius:var(--radius-pill); padding:7px 16px; } .variant-c .post-back{ margin-top:clamp(32px,4vw,48px); } @media (max-width:980px){ .variant-c .blog-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .variant-c .blog-grid{ grid-template-columns:1fr; } } .variant-c .pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:clamp(38px,4.4vw,58px); } .variant-c .pager-nums{ display:flex; gap:8px; } .variant-c .pager-btn, .variant-c .pager-num{ display:grid; place-content:center; min-width:40px; height:40px; padding:0 12px; font-family:inherit; font-size:14px; font-weight:700; color:var(--ink-soft); background:#fff; border:1px solid rgba(42,39,34,.14); border-radius:10px; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .variant-c .pager-btn svg{ width:16px; height:16px; } .variant-c .pager-btn:hover:not(:disabled), .variant-c .pager-num:hover{ border-color:#932B12; color:#932B12; } .variant-c .pager-num.is-on{ background:#932B12; border-color:#932B12; color:#fff; } .variant-c .pager-btn:disabled{ opacity:.35; cursor:default; } /* wave divider */ .wave-divider{ position:relative; height:110px; margin-bottom:-1px; pointer-events:none; } .wave-divider canvas{ position:absolute; inset:0; display:block; } @media (max-width:640px){ .wave-divider{ height:64px; } } /* ---------- product detail v2 (Petit-style) ---------- */ .variant-c .pd2-rating{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; color:var(--ink-soft); } .variant-c .stars{ display:inline-flex; gap:2px; color:var(--coral); } .variant-c .stars svg{ width:15px; height:15px; } .variant-c .pd2-lead{ font-size:16px; line-height:1.9; color:var(--ink-soft); margin-top:16px; text-wrap:pretty; } .variant-c .pd2-checks{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:20px; } .variant-c .pd2-checks li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:500; color:var(--ink); line-height:1.6; } .variant-c .pd2-checks .ck{ flex:none; display:grid; place-content:center; width:20px; height:20px; margin-top:1px; border-radius:50%; background:#F5A70E; color:#fff; } .variant-c .pd2-checks .ck svg{ width:11px; height:11px; } .variant-c .pd2-acc-list{ margin-top:28px; border-top:1px solid var(--line); } .variant-c .pd2-acc{ border-bottom:1px solid var(--line); } .variant-c .pd2-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:16px 2px; font-family:inherit; font-size:15.5px; font-weight:800; color:var(--ink); background:none; border:none; cursor:pointer; text-align:left; } .variant-c .pd2-acc-head .chev{ flex:none; width:18px; height:18px; color:var(--forest); transition:transform .25s var(--ease); } .variant-c .pd2-acc[data-open] .pd2-acc-head .chev{ transform:rotate(180deg); } .variant-c .pd2-acc-body{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .variant-c .pd2-acc[data-open] .pd2-acc-body{ max-height:560px; } .variant-c .pd2-acc-body .inner{ padding:2px 2px 18px; font-size:14.5px; line-height:1.9; color:var(--ink-soft); } .variant-c .pd2-acc-body .inner a{ color:#932B12; font-weight:700; } .variant-c .pd2-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px; } .variant-c .pd2-trust .tr-item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--cream); border-radius:14px; padding:14px 8px; } .variant-c .pd2-trust svg{ width:24px; height:24px; color:var(--forest); } .variant-c .pd2-stats{ background:var(--forest); padding:clamp(40px,5vw,64px) 0; } .variant-c .pd2-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); text-align:center; } .variant-c .pd2-stats .num{ font-family:var(--font-en); font-size:clamp(34px,4vw,52px); font-weight:700; color:#fff; } .variant-c .pd2-stats p{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.75); margin-top:8px; } .variant-c .pd2-feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; } .variant-c .pd2-feature + .pd2-feature{ margin-top:clamp(48px,6vw,88px); } .variant-c .pd2-feature-img{ background:var(--cream-2); border-radius:24px; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; } .variant-c .pd2-feature-img img{ width:100%; height:100%; object-fit:contain; padding:9%; } .variant-c .pd2-feature.rev .pd2-feature-img{ order:2; } .variant-c .pd2-feature-tx .ey{ font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#932B12; } .variant-c .pd2-feature-tx h2{ font-size:clamp(24px,2.6vw,32px); font-weight:900; color:var(--ink); margin-top:10px; } .variant-c .pd2-feature-tx p{ font-size:15.5px; line-height:1.95; color:var(--ink-soft); margin-top:14px; text-wrap:pretty; } .variant-c .pd2-quote{ padding:clamp(64px,9vw,120px) 0; text-align:center; } .variant-c .pd2-quote h2{ font-size:clamp(24px,3.4vw,40px); font-weight:900; color:#fff; text-wrap:balance; } .variant-c .pd2-quote-stars{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; font-size:14px; font-weight:600; color:rgba(255,255,255,.85); } .variant-c .pd2-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); } .variant-c .pd2-reviews .rv{ background:#fff; border-radius:18px; padding:26px 26px 24px; box-shadow:0 2px 14px rgba(42,39,34,.06); } .variant-c .pd2-reviews h3{ font-size:16.5px; font-weight:900; color:var(--ink); margin-top:12px; } .variant-c .pd2-reviews p{ font-size:14.5px; line-height:1.85; color:var(--ink-soft); margin-top:8px; } .variant-c .pd2-reviews .who{ font-size:13px; font-weight:700; color:var(--muted); margin-top:14px; } .variant-c .pd2-faq{ max-width:820px; } @media (max-width:900px){ .variant-c .pd2-trust{ grid-template-columns:repeat(2,1fr); } .variant-c .pd2-stats-grid{ grid-template-columns:1fr; gap:28px; } .variant-c .pd2-feature{ grid-template-columns:1fr; } .variant-c .pd2-feature.rev .pd2-feature-img{ order:0; } .variant-c .pd2-reviews{ grid-template-columns:1fr; } } /* scroll blur banner (Petit-style) */ .variant-c .pd2-blur{ position:relative; min-height:130vh; } .variant-c .pd2-blur-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; } .variant-c .pd2-blur-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:filter; } .variant-c .pd2-blur-shade{ position:absolute; inset:0; background:var(--forest); opacity:0; } .variant-c .pd2-blur-content{ position:absolute; left:0; right:0; bottom:0; height:100vh; display:flex; align-items:center; opacity:0; will-change:opacity,transform; } .variant-c .pd2-blur-content .container{ width:100%; } .variant-c .pd2-blur-head{ max-width:560px; } .variant-c .pd2-blur-head h2{ font-size:clamp(30px,3.6vw,46px); font-weight:900; color:#fff; text-wrap:balance; } .variant-c .pd2-blur-head p{ font-size:15.5px; line-height:2; color:rgba(255,255,255,.85); margin-top:16px; text-wrap:pretty; } .variant-c .pd2-blur-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(30px,4vh,48px); } .variant-c .pd2-blur-cards .bc{ background:rgba(31,58,95,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:16px; overflow:hidden; opacity:0; transform:translateY(36px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .variant-c .pd2-blur-content.cards-in .bc{ opacity:1; transform:none; } .variant-c .pd2-blur-content.cards-in .bc:nth-child(2){ transition-delay:.12s; } .variant-c .pd2-blur-content.cards-in .bc:nth-child(3){ transition-delay:.24s; } @media (max-width:900px){ .variant-c .pd2-blur-cards .bc{ opacity:1; transform:none; } } .variant-c .pd2-blur-cards .im{ aspect-ratio:16/10; overflow:hidden; } .variant-c .pd2-blur-cards .im img{ width:100%; height:100%; object-fit:cover; } .variant-c .pd2-blur-cards h3{ font-size:18px; font-weight:900; color:#fff; padding:18px 20px 22px; } .variant-c .pd2-blur-cards p{ font-size:13.5px; line-height:1.85; color:rgba(255,255,255,.82); padding:8px 20px 20px; } @media (max-width:900px){ .variant-c .pd2-blur{ min-height:auto; } .variant-c .pd2-blur-sticky{ display:none; } .variant-c .pd2-blur-content{ position:static; height:auto; opacity:1 !important; transform:none !important; background:#18181A; padding:56px 0; } .variant-c .pd2-blur-cards{ grid-template-columns:1fr; } } /* six selling points around center product */ .variant-c .pd2-sell-head{ text-align:center; max-width:640px; margin:0 auto clamp(40px,5vw,64px); } .variant-c .pd2-sell-head h2{ font-size:clamp(28px,3.4vw,42px); font-weight:900; color:var(--ink); line-height:1.35; } .variant-c .pd2-sell-head h2 em{ font-style:normal; color:#932B12; } .variant-c .pd2-sell-head p{ font-size:15.5px; line-height:1.9; color:var(--ink-soft); margin-top:14px; } .variant-c .pd2-sell-grid{ display:grid; grid-template-columns:1.15fr .85fr 1.15fr; gap:clamp(14px,1.8vw,28px); align-items:center; max-width:1180px; margin-inline:auto; } .variant-c .pd2-sell-grid .col{ display:flex; flex-direction:column; gap:clamp(30px,4.5vh,52px); } .variant-c .pd2-sell-grid .sp{ display:grid; grid-template-columns:52px 1fr; column-gap:18px; align-items:start; text-align:left; } .variant-c .pd2-sell-grid .col:first-child .sp{ grid-template-columns:1fr 52px; text-align:right; } .variant-c .pd2-sell-grid .col:first-child .sp .ic{ grid-column:2; grid-row:1 / span 2; } .variant-c .pd2-sell-grid .col:first-child .sp h3{ grid-column:1; grid-row:1; } .variant-c .pd2-sell-grid .col:first-child .sp p{ grid-column:1; grid-row:2; } @media (max-width:1024px){ .variant-c .pd2-sell-grid .col:first-child .sp{ grid-template-columns:52px 1fr; text-align:left; } .variant-c .pd2-sell-grid .col:first-child .sp .ic{ grid-column:1; grid-row:1 / span 2; } .variant-c .pd2-sell-grid .col:first-child .sp h3{ grid-column:2; grid-row:1; } .variant-c .pd2-sell-grid .col:first-child .sp p{ grid-column:2; grid-row:2; } } .variant-c .pd2-sell-grid .sp .ic{ display:grid; place-content:center; width:52px; height:52px; margin:0; border-radius:50%; background:#932B12; color:#fff; grid-row:1 / span 2; } .variant-c .pd2-sell-grid .sp .ic svg{ width:26px; height:26px; } .variant-c .sp-ic-img{ display:block; width:28px; height:28px; background:currentColor; } .variant-c .pd2-sell-grid .sp h3{ font-size:17px; font-weight:900; color:var(--ink); align-self:center; } .variant-c .pd2-sell-grid .sp p{ font-size:14px; line-height:1.85; color:var(--ink-soft); margin-top:8px; text-wrap:pretty; grid-column:2; } .variant-c .pd2-sell-grid .pic{ display:grid; place-items:center; position:relative; aspect-ratio:1/1; } .variant-c .pd2-sell-grid .pic img{ position:absolute; inset:0; margin:auto; width:100%; max-width:420px; height:100%; object-fit:contain; opacity:0; } .variant-c .pd2-sell-grid .pic img.on{ opacity:1; } @media (max-width:900px){ .variant-c .pd2-sell-grid{ grid-template-columns:1fr; gap:clamp(30px,4.5vh,52px); } .variant-c .pd2-sell-grid .pic{ order:-1; } .variant-c .pd2-sell-grid .pic img{ max-width:300px; } } /* feeding guide cards (v2) */ .variant-c .pd2-feed-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px); } .variant-c .pd2-feed-cards .fc{ background:#fff; border-radius:16px; padding:26px 18px 24px; text-align:center; box-shadow:0 2px 14px rgba(42,39,34,.06); } .variant-c .pd2-feed-cards .kg{ font-size:19px; font-weight:900; color:var(--forest); } .variant-c .pd2-feed-cards .ic{ display:grid; place-content:center; width:56px; height:56px; margin:16px auto; border-radius:50%; background:var(--coral); color:#fff; } .variant-c .pd2-feed-cards .ic svg{ width:30px; height:30px; } .variant-c .pd2-feed-cards .g{ font-size:17px; font-weight:900; color:var(--ink); } .variant-c .pd2-feed-cards .per{ font-size:13px; color:var(--muted); margin-top:2px; } .variant-c .pd2-feed-steps{ margin-top:clamp(32px,4vw,48px); } .variant-c .pd2-feed-steps h3{ font-size:18px; font-weight:900; color:var(--ink); text-align:center; } .variant-c .pd2-feed-note{ max-width:720px; margin:clamp(24px,3vw,36px) auto 0; text-align:center; font-size:13.5px; line-height:2; color:var(--ink-soft); text-wrap:pretty; } @media (max-width:900px){ .variant-c .pd2-feed-cards{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .variant-c .pd2-feed-cards{ grid-template-columns:1fr; } } /* feeding guide two-card layout */ .variant-c .pd-feed-card2{ display:flex; flex-direction:column; } .variant-c .pd-feed-card2 .pd-ana-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:28px 32px; } .variant-c .pd-feed-card2 .pd2-feed-cards{ grid-template-columns:repeat(2,1fr); gap:18px 28px; } .variant-c .pd-feed-card2 .fc{ box-shadow:none; border:1px solid var(--line); padding:20px 14px 18px; } .variant-c .pd-feed-card2 .pd-steps{ margin-top:0; grid-template-columns:repeat(2,1fr); gap:32px 12px; } .variant-c .pd-feed-card2 .pd-steps::before{ display:none; } @media (max-width:520px){ .variant-c .pd-feed-card2 .pd2-feed-cards{ grid-template-columns:1fr; } } /* --- 保證分析值包裝標籤風 --- */ .pdga-label{ max-width:640px; margin:0 auto; background:#fff; border:2px solid var(--forest); border-radius:18px; overflow:hidden; box-shadow:0 14px 34px rgba(42,39,34,.08); } .pdga-label-head{ background:var(--forest); color:#fff; text-align:center; padding:14px 20px; font:700 15px/1.2 var(--font-en); letter-spacing:.14em; } .pdga-label-head span{ display:block; font:600 13px/1.4 var(--font-zh); letter-spacing:.3em; margin-top:4px; opacity:.85; } .pdga-label-body{ padding:22px 28px 26px; } .pdga-label-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; font-size:15px; color:var(--ink); } .pdga-label-row .dots{ flex:1; border-bottom:2px dotted var(--line); transform:translateY(-3px); } .pdga-label-row strong{ font-weight:800; white-space:nowrap; } /* --- 社群分享 --- */ .share-row{ display:flex; align-items:center; gap:12px; margin-top:26px; } .share-label{ font:700 14px/1 var(--font-en); letter-spacing:.1em; color:var(--ink-soft); } .share-btn{ position:relative; width:46px; height:46px; border-radius:50%; border:1px solid var(--forest); background:transparent; color:var(--forest); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; } .share-btn svg{ width:20px; height:20px; } .share-btn:hover{ background:var(--forest); color:#fff; } .share-tip{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:.25s; } .share-btn.copied .share-tip{ opacity:1; transform:translateX(-50%) translateY(0); } /* --- 文章內頁 Hero（深色滿版，blog-post）--- */ .variant-c .post-hero{ background:var(--cream); padding:clamp(20px,2.5vw,32px) 0 clamp(40px,5vw,72px); } .variant-c .post-hero .pd-crumb{ margin:0 0 clamp(28px,4vw,56px); } .variant-c .post-hero-inner{ max-width:760px; } .variant-c .post-hero-meta{ display:flex; align-items:center; gap:18px; } .variant-c .post-hero-cat{ display:inline-block; white-space:nowrap; flex:none; font-size:12px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--coral); padding:4px 12px; border-radius:var(--radius-pill); } .variant-c .post-hero-rule{ width:48px; height:1px; background:var(--line); } .variant-c .post-hero-date{ font-family:var(--font-en); font-size:14px; font-weight:600; color:var(--ink-soft); } .variant-c .post-hero h1{ font-size:clamp(30px,4vw,52px); font-weight:900; line-height:1.35; color:var(--ink); margin-top:22px; text-wrap:pretty; } .variant-c .post-body > .post-lead{ font-size:clamp(15px,1.5vw,17px); line-height:1.95; color:var(--ink-soft); } .variant-c .post-hero .share-row{ margin-top:30px; } /* --- 文章內頁 FAQ 手風琴 --- */ .variant-c .post-faq{ margin:56px 0 48px; } .variant-c .post-faq > h2{ margin-bottom:22px; } .variant-c .faq-item{ background:var(--surface); border:2px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .variant-c .faq-item + .faq-item{ margin-top:14px; } .variant-c .faq-item[open]{ border-color:#932B12; box-shadow:0 8px 24px rgba(42,39,34,.06); } .variant-c .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; font-size:16px; font-weight:700; color:var(--ink); line-height:1.5; cursor:pointer; list-style:none; transition:color .2s var(--ease); } .variant-c .faq-item summary::-webkit-details-marker{ display:none; } .variant-c .faq-item summary::after{ content:""; width:10px; height:10px; flex:none; margin-right:4px; border-right:2px solid #932B12; border-bottom:2px solid #932B12; transform:rotate(45deg); transition:transform .25s var(--ease); } .variant-c .faq-item[open] summary::after{ transform:rotate(-135deg); } .variant-c .faq-item summary:hover{ color:#932B12; } .variant-c .faq-a{ padding:0 24px 22px; } .variant-c .faq-a p{ font-size:15px; line-height:1.95; color:var(--ink-soft); margin:0; } .variant-c .faq-a p + p { margin-block-start: 20px; } @media (max-width:720px){ .variant-c .faq-item summary{ padding:16px 18px; font-size:15.5px; min-height:44px; } .variant-c .faq-a{ padding:0 18px 18px; } } .variant-c .post-hero-cover{ width:100%; aspect-ratio:16/6; overflow:hidden; } .variant-c .post-hero-cover img{ width:100%; height:100%; object-fit:cover; } @media (max-width:720px){ .variant-c .post-hero-cover{ aspect-ratio:4/3; } } /* 實體據點篩選 */ .variant-c .store-filter{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin:28px 0 44px; } .variant-c .store-filter .sf-group{ display:flex; align-items:center; gap:12px; } .variant-c .store-filter .sf-label{ font-size:16px; font-weight:800; color:#2A2722; } .variant-c .sf-dd-btn{ min-width:210px; justify-content:space-between; padding:12px 16px; font-size:15px; min-height:47px; background:#fff; } .variant-c .sf-menu{ left:0; right:auto; width:100%; min-width:180px; max-height:320px; overflow:auto; } .variant-c .sf-btn{ border:none; border-radius:var(--radius-pill); padding:13px 34px; background:var(--forest); color:#fff; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .2s var(--ease), box-shadow .25s var(--ease); } .variant-c .sf-btn:hover{ background:var(--forest-deep); box-shadow:var(--shadow-md); } .variant-c .sf-empty{ text-align:center; font-size:15px; color:var(--muted); padding:26px 0 10px; } @media (min-width:721px){ .variant-c .stores-list{ position:relative; } .variant-c .stores-list .store-filter{ position:absolute; right:0; top:-11px; margin:0; z-index:5; justify-content:flex-end; } .variant-c .stores-list .store-filter + .sf-empty + .region-group{ margin-top:0; } } @media (max-width:720px){ .variant-c .store-filter{ gap:12px; } .variant-c .store-filter .sf-group{ width:100%; } .variant-c .store-filter .sf-dd{ flex:1; min-width:0; } .variant-c .sf-dd-btn{ width:100%; min-width:0; } .variant-c .sf-btn{ width:100%; } } /* header 購物車圓底 */ .header-social a.cart-circ{ position:relative; } .header-social a.cart-circ::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:currentColor; } .header-social a.cart-circ i{ position:relative; background:#fff; width:17px; height:17px; } @media (max-width:420px){ .header-social a.cart-circ::before{ width:26px; height:26px; } .header-social a.cart-circ i{ width:15px; height:15px; } }