/* 我的月老 官網設計系統（2026-11-03）。元件用法見 md/SITE_V2_COMPONENTS.md。 版型語言來自隱形 MATCH 提案版本 2：襯線字、細金線、金色細弧與圓環、英文小字、斜體大數字、燙金邀請卡、金線旅程、拱門相框。 三種配色共用同一份版型：。頁面與元件只用 --s-*（依所在區塊而變），不寫死顏色。 只有官網載入本檔；會員 App 與後台不受影響（App 仍用 style.css＋app.css）。 動態：只有 JS 加上 html.site-motion 後才會先藏首屏以下的元素；沒有 JS 或減少動態時內容全部直接顯示。 */ /* ---------- 共用尺度 ---------- */ :root { --latin: "Cormorant Garamond", "Noto Serif TC", serif; --serif: "Cormorant Garamond", "Noto Serif TC", "Songti TC", serif; --serif-tc: "Noto Serif TC", "Songti TC", serif; --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --header-h: 74px; --gutter: clamp(16px, 4vw, 56px); --band-y: clamp(88px, 11vw, 168px); --ease: cubic-bezier(.16, 1, .3, 1); --ease-out: cubic-bezier(.22, .8, .24, 1); --line-green: #06c755; /* LINE 品牌綠，只用在 LINE 浮動鈕 */ --site-slide: 72px; } /* ---------- 配色：金棕（預設，版本 2）---------- --l-* 淺段落、--n-* 深段落。黑金主題的「淺段落」其實是偏暖的近黑，與深段落用不同黑色及光暈區分。 */ :root, html[data-theme="gold"] { color-scheme: light; --l-bg: #f5ecdd; --l-bg-2: #fbf6ee; --l-bg-3: #eadcc6; --l-ink: #2a1b12; --l-ink-2: #5a4434; --l-muted: #6b5444; --l-accent: #7d5717; --l-line: #c8a265; --l-hair: rgba(200, 162, 101, .55); --l-hair-soft: rgba(200, 162, 101, .28); --l-card: linear-gradient(165deg, #fdf9f2, #f7efe2 78%); --l-input: #fffdf9; --l-seal: radial-gradient(circle at 34% 28%, #fffaf0, #f0e2c9 72%); --l-num: linear-gradient(105deg, #8a6224 0%, #a9792f 30%, #ecd29c 48%, #a9792f 62%, #8a6224 100%); --l-metal-hi: #a9792f; --l-btn: #3a2417; --l-btn-ink: #f7ead4; --l-btn-hover: #5b3a22; --l-btn-line: rgba(251, 244, 233, .55); --l-btn-line-hover: #fbf6ee; --band-cream: radial-gradient(ellipse 70% 40% at 50% 0%, #fbf3e4, rgba(251, 243, 228, 0) 70%), #f5ecdd; --band-paper: #fbf6ee; --lip-cream: #fbf3e4; /* 段落交界拱形：等於奶油段落頂端的顏色 */ --l-glare: 255, 255, 255; --l-glare-a: .6; --n-glare: 255, 236, 190; --n-glare-a: .16; --header-solid: #fbf4e9; --n-bg: #23160f; --n-bg-2: #2f1e14; --n-bg-3: #3b2619; --n-rgb: 35, 22, 15; --n-ink: #f3e6cf; --n-ink-2: #cdb48d; --n-muted: #b79f7a; --n-accent: #c8a265; --n-line: #c8a265; --n-hair: rgba(200, 162, 101, .55); --n-hair-soft: rgba(200, 162, 101, .28); --n-card: linear-gradient(165deg, #3b2619, #26180f 72%); --n-input: #2a1b12; --n-seal: radial-gradient(circle at 34% 28%, #4d3222, #261810 72%); --n-num: linear-gradient(105deg, #b8904f 0%, #c8a265 30%, #fff1cf 48%, #c8a265 62%, #b8904f 100%); --n-metal-hi: #ecd29c; --n-btn: #c8a265; --n-btn-ink: #23160f; --n-btn-hover: #ecd29c; --n-btn-line: rgba(35, 22, 15, .35); --n-btn-line-hover: #3b2619; --band-night: radial-gradient(ellipse 80% 60% at 50% 40%, #33211a, #23160f 70%); --band-night-side: radial-gradient(ellipse 60% 70% at 15% 30%, #33211a, #23160f 70%); --veil: 251, 244, 233; --header-bg: rgba(251, 244, 233, .94); --header-ink: #2a1b12; --header-line: #c8a265; --footer-bg: #1c120c; --bgimg-filter: none; --sun: #fff3d6; --dust-tile: url("/img/site/dust-gold.png"); --dust: 236, 210, 156; --hero-title: #2a1b12; --hero-light-color: 255, 250, 236; --hero-bg-opacity: .9; --shadow: 0 18px 40px -24px rgba(58, 36, 23, .45); --card-shadow: 0 30px 60px -36px rgba(58, 36, 23, .55); --portal-bg: radial-gradient(ellipse 80% 60% at 50% 30%, #fff8ec, #efdfc4 62%, #dcc39b); } /* ---------- 配色：墨綠（版本 1）---------- */ html[data-theme="green"] { color-scheme: light; --l-bg: #e8efe5; --l-bg-2: #f6f9f3; --l-bg-3: #d7e3d3; --l-ink: #16261c; --l-ink-2: #3c5244; --l-muted: #4a6052; --l-accent: #2f5641; --l-line: #86a88b; --l-hair: rgba(70, 112, 82, .5); --l-hair-soft: rgba(70, 112, 82, .24); --l-card: linear-gradient(165deg, #fbfdf9, #eff5eb 78%); --l-input: #fbfdf9; --l-seal: radial-gradient(circle at 34% 28%, #fbfdf9, #d7e3d3 72%); --l-num: linear-gradient(105deg, #163323 0%, #3f6d4f 30%, #c8e0c4 48%, #3f6d4f 62%, #163323 100%); --l-metal-hi: #3f6d4f; --l-btn: #1d3a2a; --l-btn-ink: #eef5ea; --l-btn-hover: #2f5641; --l-btn-line: rgba(244, 248, 241, .55); --l-btn-line-hover: #f6f9f3; --band-cream: radial-gradient(ellipse 70% 40% at 50% 0%, #f3f8f0, rgba(243, 248, 240, 0) 70%), #e8efe5; --band-paper: #f6f9f3; --lip-cream: #f3f8f0; --n-glare: 226, 244, 220; --n-glare-a: .15; --header-solid: #f4f8f1; --n-bg: #1d3a2a; --n-bg-2: #234634; --n-bg-3: #2f5641; --n-rgb: 29, 58, 42; --n-ink: #eef5ea; --n-ink-2: #bcd4bd; --n-muted: #b4ceb6; --n-accent: #c8e0c4; --n-line: #86a88b; --n-hair: rgba(134, 168, 139, .6); --n-hair-soft: rgba(134, 168, 139, .3); --n-card: linear-gradient(165deg, #2f5641, #1e3c2c 72%); --n-input: #17301f; --n-seal: radial-gradient(circle at 34% 28%, #3b6a50, #1a3525 72%); --n-num: linear-gradient(105deg, #86a88b 0%, #bcd4bd 30%, #f3fbef 48%, #bcd4bd 62%, #86a88b 100%); --n-metal-hi: #c8e0c4; --n-btn: #c8e0c4; --n-btn-ink: #16261c; --n-btn-hover: #e4f1e0; --n-btn-line: rgba(29, 58, 42, .35); --n-btn-line-hover: #2f5641; --band-night: radial-gradient(ellipse 80% 60% at 50% 40%, #2a4e3a, #1d3a2a 70%); --band-night-side: radial-gradient(ellipse 60% 70% at 15% 30%, #2a4e3a, #1d3a2a 70%); --veil: 244, 248, 241; --header-bg: rgba(244, 248, 241, .94); --header-ink: #16261c; --header-line: #86a88b; --footer-bg: #12261b; --bgimg-filter: hue-rotate(92deg) saturate(.62) brightness(.92); --sun: #eff9ea; --dust-tile: url("/img/site/dust-green.png"); --dust: 200, 224, 196; --hero-title: #16261c; --shadow: 0 18px 40px -24px rgba(29, 58, 42, .45); --card-shadow: 0 30px 60px -36px rgba(29, 58, 42, .5); --portal-bg: radial-gradient(ellipse 80% 60% at 50% 30%, #fbfdf9, #dce8d8 62%, #bcd4bd); } /* ---------- 配色：黑金（沿用舊站的底色 #080707、金 #efbd6c、象牙 #e7f1e3、酒紅 #8b1e24）---------- 淺段落＝偏暖近黑＋金色光暈；深段落＝純黑底＋酒紅光暈；主要按鈕為酒紅（舊站氣氛）。 */ html[data-theme="dark"] { color-scheme: dark; --l-bg: #120e0b; --l-bg-2: #0d0a08; --l-bg-3: #1b1511; --l-ink: #f1ead9; --l-ink-2: #c9c3b1; --l-muted: #b3ad9b; --l-accent: #efbd6c; --l-line: #efbd6c; --l-hair: rgba(239, 189, 108, .46); --l-hair-soft: rgba(239, 189, 108, .2); --l-card: linear-gradient(165deg, #1e1712, #120e0b 78%); --l-input: #0d0a08; --l-seal: radial-gradient(circle at 34% 28%, #2c2118, #120e0b 72%); --l-num: linear-gradient(105deg, #b98a3e 0%, #efbd6c 30%, #fff1cf 48%, #efbd6c 62%, #b98a3e 100%); --l-metal-hi: #ffdf9e; --l-btn: #8b1e24; --l-btn-ink: #fbf2e2; --l-btn-hover: #a5262d; --l-btn-line: rgba(8, 7, 7, .35); --l-btn-line-hover: #241a13; --band-cream: radial-gradient(ellipse 70% 42% at 50% 0%, rgba(239, 189, 108, .1), rgba(239, 189, 108, 0) 70%), #120e0b; --band-paper: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(139, 30, 36, .12), rgba(139, 30, 36, 0) 70%), #0d0a08; --lip-cream: #1f1912; --l-glare: 255, 232, 180; --l-glare-a: .14; --n-glare: 255, 232, 180; --n-glare-a: .14; --header-solid: #080707; --n-bg: #080707; --n-bg-2: #120d0c; --n-bg-3: #1d1311; --n-rgb: 8, 7, 7; --n-ink: #f1ead9; --n-ink-2: #c9c3b1; --n-muted: #b3ad9b; --n-accent: #efbd6c; --n-line: #efbd6c; --n-hair: rgba(239, 189, 108, .46); --n-hair-soft: rgba(239, 189, 108, .2); --n-card: linear-gradient(165deg, #241312, #0e0909 72%); --n-input: #0e0a09; --n-seal: radial-gradient(circle at 34% 28%, #3a1a1a, #120a0a 72%); --n-num: linear-gradient(105deg, #b98a3e 0%, #efbd6c 30%, #fff1cf 48%, #efbd6c 62%, #b98a3e 100%); --n-metal-hi: #ffdf9e; --n-btn: #8b1e24; --n-btn-ink: #fbf2e2; --n-btn-hover: #a5262d; --n-btn-line: rgba(8, 7, 7, .35); --n-btn-line-hover: #241312; --band-night: radial-gradient(ellipse 70% 62% at 50% 42%, rgba(139, 30, 36, .3), rgba(139, 30, 36, 0) 72%), #080707; --band-night-side: radial-gradient(ellipse 60% 70% at 12% 30%, rgba(139, 30, 36, .3), rgba(139, 30, 36, 0) 72%), #080707; --veil: 8, 7, 7; --header-bg: rgba(8, 7, 7, .9); --header-ink: #f1ead9; --header-line: rgba(239, 189, 108, .55); --footer-bg: #050404; --bgimg-filter: saturate(.7) brightness(.72); --sun: #fff4d8; --dust-tile: url("/img/site/dust-dark.png"); --dust: 239, 189, 108; --hero-title: #f6e7c8; --hero-light-a: .11; --hero-light-color: 239, 189, 108; --hero-bg-opacity: 1; --shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); --card-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9); --portal-bg: radial-gradient(ellipse 80% 60% at 50% 30%, #2a1612, #120b09 62%, #080707); } /* ---------- 區塊色調：把配色對應到元件用的 --s-* ---------- */ html, .site-tone-light, .site-band--cream, .site-band--paper, .site-join, .site-pagehead { --s-bg: var(--l-bg); --s-bg-2: var(--l-bg-2); --s-bg-3: var(--l-bg-3); --s-ink: var(--l-ink); --s-ink-2: var(--l-ink-2); --s-muted: var(--l-muted); --s-accent: var(--l-accent); --s-line: var(--l-line); --s-hair: var(--l-hair); --s-hair-soft: var(--l-hair-soft); --s-card: var(--l-card); --s-input: var(--l-input); --s-seal: var(--l-seal); --s-num: var(--l-num); --s-metal-hi: var(--l-metal-hi); --s-btn: var(--l-btn); --s-btn-ink: var(--l-btn-ink); --s-btn-hover: var(--l-btn-hover); --s-btn-line: var(--l-btn-line); --s-btn-line-hover: var(--l-btn-line-hover); --s-glare: var(--l-glare); --s-glare-a: var(--l-glare-a); } .site-tone-night, .site-band--night { --s-bg: var(--n-bg); --s-bg-2: var(--n-bg-2); --s-bg-3: var(--n-bg-3); --s-ink: var(--n-ink); --s-ink-2: var(--n-ink-2); --s-muted: var(--n-muted); --s-accent: var(--n-accent); --s-line: var(--n-line); --s-hair: var(--n-hair); --s-hair-soft: var(--n-hair-soft); --s-card: var(--n-card); --s-input: var(--n-input); --s-seal: var(--n-seal); --s-num: var(--n-num); --s-metal-hi: var(--n-metal-hi); --s-btn: var(--n-btn); --s-btn-ink: var(--n-btn-ink); --s-btn-hover: var(--n-btn-hover); --s-btn-line: var(--n-btn-line); --s-btn-line-hover: var(--n-btn-line-hover); --s-glare: var(--n-glare); --s-glare-a: var(--n-glare-a); } /* ---------- 基礎 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--l-bg); color: var(--s-ink); font-family: var(--sans); font-size: 17px; line-height: 1.8; overflow-x: hidden; font-variant-numeric: lining-nums; } main { overflow-x: clip; display: block; } img { max-width: 100%; display: block; } a { color: inherit; } :focus-visible { outline: 2px solid var(--s-accent); outline-offset: 3px; } :is(h1, h2, h3, h4) { text-wrap: balance; } :is(p, li, dd, td, th, blockquote, figcaption) { text-wrap: pretty; } .site-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--l-btn); color: var(--l-btn-ink); padding: 10px 16px; } .site-skip:focus { top: 12px; } .site-nb { display: inline-block; } /* 不斷行的詞組 */ /* 切換配色的短暫過渡（JS 只在切換時加上這個 class） */ html.site-theme-anim, html.site-theme-anim *, html.site-theme-anim *::before, html.site-theme-anim *::after { transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, stroke .45s ease !important; } html.site-theme-anim .site-switch__ind { transition: transform .42s var(--ease) !important; } /* 切換配色時指示框仍要滑過去 */ /* ---------- Logo ---------- */ .site-logo { height: 100%; width: auto; } .site-logo--ondark { display: none; } html[data-theme="dark"] .site-logo--onlight, .site-tone-night .site-logo--onlight, .site-band--night .site-logo--onlight { display: none; } html[data-theme="dark"] .site-logo--ondark, .site-tone-night .site-logo--ondark, .site-band--night .site-logo--ondark { display: block; } /* ---------- 頁首 ---------- */ .site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); color: var(--header-ink); } /* 毛玻璃放在偽元素：backdrop-filter 直接放頁首會讓裡面 fixed 的選單面板只能待在頁首範圍內 */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--header-line); transform-origin: top; transition: transform .45s var(--ease-out); } /* 捲動後：頁首收窄、底色變實、多一道影子。盒子高度不變（不推動版面），只用 transform 縮外觀；選單面板是 fixed，不能動 .site-header__inner */ .site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--header-solid); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .55); opacity: 0; transform-origin: top; transition: opacity .45s ease, transform .45s var(--ease-out); } .site-header { --header-shrink: 12px; --header-scale: .838; } .site-header.is-scrolled::before { transform: scaleY(var(--header-scale)); } .site-header.is-scrolled::after { opacity: 1; transform: scaleY(var(--header-scale)); } .site-header__brand, .site-header__login, .site-switch--header, .site-header__menu { transition: translate .45s var(--ease-out), scale .45s var(--ease-out); } .site-header__nav-list { transition: translate .45s var(--ease-out); } .site-header.is-scrolled :is(.site-header__login, .site-switch--header, .site-header__menu) { translate: 0 calc(var(--header-shrink) / -2); } .site-header.is-scrolled .site-header__brand { translate: 0 calc(var(--header-shrink) / -2); scale: .86; } .site-header__brand { transform-origin: left center; } @media (min-width: 1181px) { .site-header.is-scrolled .site-header__nav-list { translate: 0 calc(var(--header-shrink) / -2); } } .site-header__inner { height: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); } .site-header__brand { position: relative; flex: none; display: block; height: 46px; text-decoration: none; line-height: 0; color: inherit; } .site-header__brand-logo { height: 100%; width: auto; } .site-header__brand-text { display: block; line-height: 46px; font-family: var(--serif-tc); font-size: 24px; font-weight: 600; letter-spacing: .08em; color: var(--header-ink); } .site-header__nav { margin-left: auto; display: flex; align-items: center; } .site-header__panel { display: contents; } .site-header__panel-kicker, .site-header__panel-foot { display: none; } .site-header__nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(12px, 1.5vw, 28px); } .site-header__nav-link { position: relative; display: block; padding: 10px 0; font-family: var(--serif-tc); font-size: 15.5px; font-weight: 500; letter-spacing: .07em; line-height: 1.4; text-decoration: none; color: inherit; white-space: nowrap; } .site-header__nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: linear-gradient(90deg, var(--header-line), var(--sun), var(--header-line)); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .site-header__nav-link:hover::after, .site-header__nav-link:focus-visible::after, .site-header__nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .site-header__nav-link { transition: color .3s; } .site-header__nav-link:hover { color: var(--l-accent); } .site-header__login { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; font-family: var(--serif-tc); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-decoration: none; color: inherit; white-space: nowrap; } .site-header__login-icon { width: 24px; height: 24px; flex: none; color: var(--l-accent); } .site-header__login:hover .site-header__login-text { text-decoration: underline; text-decoration-color: var(--header-line); text-underline-offset: 6px; text-decoration-thickness: 1px; } .site-header__menu { display: none; flex: none; width: 44px; height: 44px; padding: 0; margin-right: -4px; border: 0; background: none; color: inherit; cursor: pointer; place-items: center; } .site-header__menu-lines, .site-header__menu-lines::before, .site-header__menu-lines::after { display: block; width: 30px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-out), background-color .2s; } .site-header__menu-lines { position: relative; } .site-header__menu-lines::before, .site-header__menu-lines::after { content: ""; position: absolute; left: 0; } .site-header__menu-lines::before { top: -9px; } .site-header__menu-lines::after { top: 9px; } .site-header.is-open .site-header__menu-lines { background: transparent; } .site-header.is-open .site-header__menu-lines::before { transform: translateY(9px) rotate(45deg); } .site-header.is-open .site-header__menu-lines::after { transform: translateY(-9px) rotate(-45deg); } /* 閱讀進度金線 */ .site-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; transition: translate .45s var(--ease-out); } .site-header.is-scrolled .site-progress { translate: 0 calc(var(--header-shrink) * -1); } .site-progress span { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--dust), .2), var(--l-line) 62%, var(--sun)); box-shadow: 0 0 8px rgba(var(--dust), .55); transform: scaleX(0); transform-origin: left; } /* ---------- 配色切換：單一膠囊分段開關，三段實色相連（金棕｜黑｜墨綠），白＋深雙環的指示框滑到選到的那段 ---------- 每段寬約 30px（使用者指定要精簡）；點擊區用 ::before 往上下延伸到 44px，左右不重疊。名稱在 aria-label、title 與滑過／聚焦的小提示。 指示框位置來自 --i（PHP 輸出、site.js 切換時更新），不靠 :has()。 */ .site-switch { --seg-w: 30px; --seg-h: 28px; position: relative; flex: none; display: inline-flex; width: calc(var(--seg-w) * 3); height: var(--seg-h); border-radius: 999px; box-shadow: 0 0 0 1px rgba(127, 127, 127, .6); } html[data-theme="dark"] .site-switch { box-shadow: 0 0 0 1px rgba(241, 234, 217, .5); } .site-switch__btn { position: relative; display: block; flex: none; width: var(--seg-w); height: var(--seg-h); padding: 0; border: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .site-switch__btn:first-of-type { border-radius: 999px 0 0 999px; } .site-switch__btn:last-of-type { border-radius: 0 999px 999px 0; } .site-switch__btn[data-site-theme="gold"] { background: #b0843f; } .site-switch__btn[data-site-theme="dark"] { background: #0b0a0a; } .site-switch__btn[data-site-theme="green"] { background: #1f4a34; } .site-switch__btn::before { content: ""; position: absolute; left: 0; right: 0; top: calc((44px - var(--seg-h)) / -2); bottom: calc((44px - var(--seg-h)) / -2); } /* 點擊區 44px 高 */ .site-switch__ind { position: absolute; left: 0; top: 0; z-index: 1; width: var(--seg-w); height: var(--seg-h); border-radius: calc(var(--seg-h) / 2); pointer-events: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #15100c; transform: translateX(calc(var(--i, 0) * var(--seg-w))); transition: transform .42s var(--ease); } .site-switch__btn:active { filter: brightness(1.25); } .site-switch__btn:focus-visible { z-index: 2; outline: 2px solid var(--s-accent); outline-offset: 5px; border-radius: 4px; } /* 名稱提示（滑過或鍵盤聚焦才出現，手機不顯示） */ .site-switch__btn::after { content: attr(title); position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% -4px; z-index: 3; padding: 3px 9px; background: var(--l-btn); color: var(--l-btn-ink); white-space: nowrap; font-family: var(--serif-tc); font-size: 13px; letter-spacing: .08em; line-height: 1.5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, translate .2s var(--ease-out), visibility 0s linear .2s; } .site-switch__btn:focus-visible::after { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .2s, translate .2s var(--ease-out), visibility 0s; } @media (hover: hover) { .site-switch__btn:hover::after { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .2s .15s, translate .2s var(--ease-out) .15s, visibility 0s; } } /* ---------- 按鈕與連結 ---------- */ .site-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 54px; min-width: 200px; padding: 8px 28px; font-family: var(--serif-tc); font-size: 18px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid var(--s-line); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .3s, color .3s, translate .35s var(--ease-out), scale .18s var(--ease-out), box-shadow .35s, border-color .3s; } .site-btn svg { width: 9px; height: 15px; flex: none; transition: transform .3s var(--ease-out); } .site-btn:hover svg, .site-btn:focus-visible svg { transform: translateX(4px); } .site-btn--solid { background: var(--s-btn); color: var(--s-btn-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), var(--shadow); } .site-btn--solid:hover { background: var(--s-btn-hover); } .site-btn--line { background: var(--s-btn-line); color: var(--s-ink); } .site-btn--line:hover { background: var(--s-btn-line-hover); translate: 0 -2px; box-shadow: var(--shadow); } .site-btn--solid:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 40px -18px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--dust), .2); } .site-btn--sm { min-height: 44px; min-width: 0; padding: 6px 20px; font-size: 16px; gap: 10px; letter-spacing: .1em; } .site-btn--block { display: flex; width: 100%; } .site-btn[disabled], .site-btn[aria-disabled="true"] { opacity: .6; cursor: progress; } .site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; } .site-actions--center { justify-content: center; } /* 文字連結底線：平常一條細線，滑過時金線由左往右畫過去 */ .site-link, .site-prose a, .refer-link { color: var(--s-accent); text-decoration: none; padding-bottom: 2px; background: linear-gradient(90deg, var(--s-metal-hi), var(--s-accent)) 0 100% / 0 1.5px no-repeat, linear-gradient(var(--s-line), var(--s-line)) 0 100% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s var(--ease), color .3s; } .site-link:hover, .site-prose a:hover, .refer-link:hover { background-size: 100% 1.5px, 100% 1px; color: var(--s-ink); } .site-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--serif-tc); font-weight: 600; letter-spacing: .1em; color: var(--s-accent); text-decoration: none; } .site-more::after { content: ""; width: 28px; height: 1px; background: var(--s-line); transition: width .35s var(--ease-out); } .site-more:hover::after, .site-more:focus-visible::after { width: 44px; } /* 按鈕光澤：進入畫面掠過一次；滑過或鍵盤聚焦再掠一次（清單保留同名第一項，滑鼠離開時不重播） */ .site-sheen-host { position: relative; overflow: hidden; isolation: isolate; } .site-sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 28%, rgba(var(--dust), .34) 42%, rgba(255, 255, 255, .62) 50%, rgba(var(--dust), .34) 58%, transparent 72%); translate: -110% 0; } .site-sheen-host.is-shine .site-sheen { animation: siteSheen 1.3s cubic-bezier(.4, 0, .2, 1) .5s both; } .site-sheen-host.is-shine:is(:hover, :focus-visible) .site-sheen { animation: siteSheen 1.3s cubic-bezier(.4, 0, .2, 1) .5s both, siteSheen2 .9s cubic-bezier(.4, 0, .2, 1) both; } .site-sheen-host:not(.is-shine):is(:hover, :focus-visible) .site-sheen { animation: siteSheen2 .9s cubic-bezier(.4, 0, .2, 1) both; } @keyframes siteSheen { from { translate: -110% 0; } to { translate: 110% 0; } } @keyframes siteSheen2 { from { translate: -110% 0; } to { translate: 110% 0; } } /* 按下回饋：縮一點＋金色漣漪 */ .site-ripple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; z-index: 1; pointer-events: none; background: rgba(var(--dust), .5); animation: siteRipple .7s var(--ease-out) both; } @keyframes siteRipple { from { scale: .4; opacity: .9; } to { scale: 26; opacity: 0; } } :is(.site-btn, .match-form-submit, .matchmaker-descent__cta, .intake-cta, .site-slider__nav, .site-quotes__btn, .choice-pill, .lead-done__again, .article-tabs__item, .article-pager__btn, .refer-ghost, .site-chip):active { scale: .97; } /* ---------- 區塊 ---------- */ .site-band { position: relative; padding: var(--band-y) var(--gutter); isolation: isolate; color: var(--s-ink); } .site-band--cream { background: var(--band-cream); } .site-band--paper { background: var(--band-paper); } .site-band--night { background: var(--band-night); overflow: hidden; } .site-band--night.site-band--side { background: var(--band-night-side); } .site-band--tight { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); } .site-wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; } .site-wrap--narrow { max-width: 860px; } .site-wrap--wide { max-width: 1360px; } /* 內頁開頭：淺段落＋兩道金弧＋置中標題 */ .site-pagehead { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 9vw, 136px) var(--gutter) clamp(64px, 8vw, 112px); background: var(--band-cream); color: var(--s-ink); text-align: center; } .site-pagehead > .site-arc { z-index: -1; } .site-pagehead__arc--a { width: 30vw; max-width: 440px; min-width: 240px; left: -9vw; top: -32%; } .site-pagehead__arc--b { width: 34vw; max-width: 500px; min-width: 260px; right: -12vw; top: -12%; } .site-pagehead .site-head { margin-bottom: 0; } .site-pagehead__title { margin: 0; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(32px, 4vw, 56px); line-height: 1.4; letter-spacing: .1em; color: var(--s-ink); } /* 段落標頭 */ .site-head { position: relative; text-align: center; max-width: 780px; margin: 0 auto clamp(52px, 6.5vw, 96px); } .site-vrule { display: block; width: 1px; height: 56px; margin: 0 auto 26px; background: linear-gradient(180deg, transparent, var(--s-line)); transform-origin: top; } .site-title { margin: 0; font-family: var(--serif-tc); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.4; letter-spacing: .18em; color: var(--s-ink); text-indent: .18em; /* 字距加在字後，置中時把最後一字的空白補回來 */ } .site-title--statement { font-weight: 600; letter-spacing: .1em; text-indent: .1em; line-height: 1.55; font-size: clamp(30px, 3.5vw, 48px); } .site-sub { margin: 8px 0 0; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: .04em; color: var(--s-accent); line-height: 1.4; } .site-sub + .site-title { margin-top: 10px; } .site-divider { position: relative; display: block; width: min(300px, 64%); height: 1px; margin: 26px auto; background: linear-gradient(90deg, transparent, var(--s-line) 30%, var(--s-line) 70%, transparent); transform-origin: center; } .site-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid var(--s-line); background: var(--s-bg); transform: translate(-50%, -50%) rotate(45deg); } .site-lead { margin: 0 auto; max-width: 34em; font-family: var(--serif-tc); font-weight: 400; font-size: 17px; line-height: 2; letter-spacing: .06em; color: var(--s-ink-2); text-wrap: balance; } .site-lead + .site-lead { margin-top: 12px; } .site-statement { margin: 0 0 22px; font-family: var(--serif-tc); font-weight: 500; font-size: clamp(25px, 3vw, 40px); line-height: 1.65; letter-spacing: .1em; color: var(--s-ink); text-wrap: pretty; } .site-num { display: inline-block; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 1.55em; line-height: .8; padding: 0 .12em 0 .02em; vertical-align: -.06em; background: var(--s-num); background-size: 260% 100%; background-position: 70% 0; -webkit-background-clip: text; background-clip: text; color: transparent; } .site-note { margin: 28px 0 0; font-size: 15px; line-height: 1.8; color: var(--s-muted); } .site-note--center { text-align: center; } /* 整句短語（舊站的 section-quote，文字含 🌹 不要刪） */ .site-quote-line { position: relative; margin: clamp(48px, 5vw, 72px) auto 0; max-width: 40em; text-align: center; font-family: var(--serif-tc); font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.9; letter-spacing: .08em; color: var(--s-ink); } .site-quote-line::before { content: ""; display: block; width: 1px; height: 40px; margin: 0 auto 16px; background: linear-gradient(180deg, transparent, var(--s-line)); } .site-quote-line em, .site-quote-line span:not([class]) { font-style: normal; color: var(--s-accent); } /* 只有沒帶 class 的 span 是強調字；排版用的 span（.sp-nb 等）不變色 */ .site-quote-line .sp-nb { display: inline-block; } /* 依句斷行，不在詞中間換行 */ .site-head--left { text-align: left; margin: 0 0 32px; } .site-head--left .site-vrule { margin-left: 0; } .site-head--left .site-title { text-indent: 0; } .site-head--left .site-divider { margin-left: 0; transform-origin: left; background: linear-gradient(90deg, var(--s-line), var(--s-line) 60%, transparent); } .site-head--left .site-divider::after { left: 0; } .site-head--left .site-lead { margin: 0; max-width: 24em; } /* 角落英文小字 */ .site-corner { position: absolute; z-index: 2; margin: 0; font-family: var(--latin); font-weight: 600; font-size: 14px; line-height: 1.75; letter-spacing: .26em; color: var(--s-accent); } .site-corner::after { content: ""; display: block; width: 48px; height: 1.5px; margin-top: 12px; background: var(--s-line); } .site-corner--tr { right: clamp(24px, 3vw, 44px); top: clamp(32px, 4vw, 60px); text-align: right; } .site-corner--tr::after { margin-left: auto; } .site-corner--tl { left: clamp(24px, 3vw, 44px); top: clamp(32px, 4vw, 60px); } .site-corner--bl { left: clamp(24px, 3vw, 44px); bottom: clamp(28px, 4vw, 52px); } /* 金色細弧 */ .site-arc { position: absolute; pointer-events: none; overflow: visible; } .site-arc :is(circle, path) { fill: none; stroke: var(--s-line); stroke-width: 1.1; vector-effect: non-scaling-stroke; } /* 拱門相框：上緣半圓、內側細金線、外側一圈間隔金線 */ .site-arch { position: relative; margin: 0; overflow: hidden; border-radius: 999px 999px 0 0; outline: 1px solid var(--s-hair); outline-offset: 12px; background: var(--s-bg-2); } .site-arch::before { content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none; border: 1px solid rgba(var(--dust), .55); border-radius: inherit; } .site-arch img { width: 100%; height: 100%; object-fit: cover; } html[data-theme="dark"] :is(.site-arch, .site-film, .site-plan__media, .site-tl__media, .site-case__photo, .article-card__media) img { filter: brightness(.86) saturate(.96); } /* 黑金：亮照片略壓暗，融入夜色 */ /* 長方相框（橫幅照片） */ .site-film { position: relative; margin: 0 0 clamp(64px, 7vw, 104px); aspect-ratio: 1600 / 720; overflow: hidden; outline: 1px solid var(--s-hair); outline-offset: 12px; background: var(--s-bg-2); } .site-film img { width: 100%; height: 100%; object-fit: cover; } .site-film figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(40px, 6vw, 80px) clamp(22px, 3vw, 40px) clamp(20px, 2.6vw, 34px); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .66)); font-family: var(--serif-tc); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: .14em; color: #fbf3e4; } .site-film__cap { display: block; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .04em; color: rgba(var(--dust), 1); line-height: 1.2; } /* 背景照片層與金粉（深段落） */ .site-bgimg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .site-bgimg img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; opacity: .5; filter: var(--bgimg-filter); } .site-bgimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(var(--n-rgb), .35), rgba(var(--n-rgb), .92)); } /* 金粉：三層共用一張預先算好的無縫點陣圖（img/site/dust-*.png，每種配色一張，只下載目前配色），各層用不同尺寸，圖樣不會明顯重複。 由合成器推動上升與閃爍，主執行緒每幀不做事；不用 canvas（整塊畫布每幀上傳）也不用 CSS 漸層（光柵化很貴）。 圖層在 JS 建立（[data-site-dust]、.site-band--night、.site-footer 自動套用），只有 .is-on（在畫面內）才顯示。 */ .site-dust { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; visibility: hidden; } .site-dust.is-on { visibility: visible; } .site-dust i { --tile: 613px; position: absolute; left: -32px; right: -32px; top: -32px; height: calc(100% + var(--tile) + 64px); background: var(--dust-tile) 0 0 / var(--tile) var(--tile) repeat; animation: siteDustRise 62s linear infinite, siteDustTwinkle 5.2s ease-in-out infinite alternate; } .site-dust.is-on i { will-change: translate, opacity; } .site-dust:not(.is-on) i { animation-play-state: paused; } .site-dust i:nth-child(2) { --tile: 797px; background-position: 211px 97px; animation-duration: 58s, 7.1s; animation-delay: -13s, -2s; } .site-dust i:nth-child(3) { --tile: 1009px; background-position: 503px 389px; animation-duration: 54s, 9.3s; animation-delay: -31s, -5s; } @keyframes siteDustRise { 0% { translate: 0 0; } 25% { translate: 12px calc(var(--tile) * -.25); } 50% { translate: 0 calc(var(--tile) * -.5); } 75% { translate: -12px calc(var(--tile) * -.75); } 100% { translate: 0 calc(var(--tile) * -1); } } @keyframes siteDustTwinkle { from { opacity: .5; } to { opacity: 1; } } @media (max-width: 860px) { .site-dust i:nth-child(3) { display: none; } } /* 手機少一層 */ /* 一進場就從上方下來的一段金線（接在首屏下方） */ .site-thread-in { position: absolute; left: 50%; top: 0; width: 1px; height: clamp(64px, 8vw, 112px); background: linear-gradient(180deg, transparent, var(--s-line)); transform-origin: top; } /* ---------- 首屏 ---------- */ .site-hero { --s-ink: var(--hero-title); position: relative; overflow: hidden; isolation: isolate; height: clamp(680px, calc(100svh - var(--header-h)), 1010px); background: var(--l-bg); color: var(--s-ink); } .site-hero__bg { position: absolute; inset: -3%; z-index: -3; } .site-hero__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; filter: blur(2px) saturate(.9); opacity: var(--hero-bg-opacity); } html[data-theme="dark"] .site-hero__bg img { filter: blur(1.5px); object-position: 50% 30%; } .site-hero__veil { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 38% 60% at 50% 48%, rgba(var(--veil), .92), rgba(var(--veil), .55) 60%, rgba(var(--veil), 0) 100%), linear-gradient(180deg, rgba(var(--veil), .5), rgba(var(--veil), .15) 40%, rgba(var(--veil), .35)); } /* 光帶：刻意不用 mix-blend-mode。混合模式加上無限掃光會讓整個首屏每幀重新合成（實測 p95 100ms→17ms）。 */ .site-hero__light { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .site-hero__light::before, .site-hero__light::after { content: ""; position: absolute; top: -30%; height: 160%; width: 26%; background: linear-gradient(90deg, rgba(var(--hero-light-color, 255, 250, 236), 0), rgba(var(--hero-light-color, 255, 250, 236), var(--hero-light-a, .3)) 50%, rgba(var(--hero-light-color, 255, 250, 236), 0)); transform: rotate(28deg); will-change: transform, opacity; } .site-hero__light::before { left: 18%; } .site-hero__light::after { left: 58%; width: 14%; opacity: .7; } .site-hero__arc { z-index: -1; } .site-hero__arc circle { stroke-width: 1.2; } .site-hero__arc--a { width: 30vw; max-width: 440px; left: -7vw; top: -4%; } .site-hero__arc--b { width: 34vw; max-width: 500px; right: -14vw; top: -3%; } .site-hero__arc--c { width: 40vw; max-width: 560px; left: -21vw; bottom: -30%; z-index: 2; } .site-hero__caption { position: absolute; z-index: 3; margin: 0; right: clamp(24px, 3vw, 44px); top: 2.4%; font-family: var(--latin); font-weight: 600; font-size: 14px; line-height: 1.75; letter-spacing: .26em; color: var(--s-accent); text-shadow: 0 0 10px rgba(var(--veil), .9), 0 0 3px rgba(var(--veil), .9); padding: 8px 12px; margin: -8px -12px; background: radial-gradient(closest-side, rgba(var(--veil), .85), rgba(var(--veil), .7) 72%, rgba(var(--veil), 0)); /* 金弧經過時不穿過英文字 */ } .site-hero__caption::after { content: ""; display: block; width: 48px; height: 1.5px; background: var(--s-line); margin-top: 12px; } .site-hero__copy { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: min(720px, 60vw); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 0 24px; } .site-hero__rule { display: block; width: 1px; height: clamp(40px, 7vh, 62px); background: var(--s-ink-2); opacity: .55; transform-origin: top; } .site-hero__brand { margin: 22px 0 0; font-family: var(--serif-tc); font-size: clamp(22px, 1.9vw, 27px); font-weight: 500; letter-spacing: .14em; line-height: 1.2; color: var(--s-ink); } .site-hero__sep { margin: 0 .12em; color: var(--s-line); font-weight: 400; } .site-hero__title { margin: clamp(14px, 2.6vh, 28px) 0 0; font-family: var(--serif-tc); font-weight: 700; font-size: clamp(36px, 4.05vw, 62px); line-height: 1.34; letter-spacing: .08em; text-indent: .08em; color: var(--hero-title); } .site-hero__title > span { display: block; white-space: nowrap; } .site-hero__tagline { margin: clamp(10px, 1.8vh, 18px) 0 0; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(21px, 1.9vw, 28px); letter-spacing: .05em; line-height: 1.3; color: var(--s-accent); } .site-hero__divider { display: block; width: min(340px, 70%); height: 1px; margin: clamp(14px, 2.4vh, 24px) 0; background: var(--s-line); transform-origin: center; } .site-hero__subtitle { margin: 0; font-family: var(--serif-tc); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.65; letter-spacing: .14em; color: var(--s-ink-2); font-weight: 500; } .site-hero__ctas { display: flex; gap: 16px; margin-top: clamp(22px, 4vh, 44px); flex-wrap: wrap; justify-content: center; } .site-hero__foot { margin-top: clamp(16px, 3.4vh, 34px); display: flex; flex-direction: column; align-items: center; } .site-hero__foot p { margin: 18px 0 10px; font-family: var(--latin); font-size: 15px; font-weight: 600; letter-spacing: .32em; color: var(--s-accent); } .site-hero__short { width: 32px; height: 1.5px; background: var(--s-line); } .site-person { position: absolute; bottom: 0; z-index: 1; pointer-events: none; } .site-person img { height: 100%; width: auto; max-width: none; } /* 圖檔邊緣只在下半段碰邊：只淡出那一段，臉和手不受影響 */ .site-person--man img { -webkit-mask-image: radial-gradient(ellipse 34% 32% at 100% 100%, transparent 20%, #000 100%); mask-image: radial-gradient(ellipse 34% 32% at 100% 100%, transparent 20%, #000 100%); } .site-person--woman img { -webkit-mask-image: radial-gradient(ellipse 30% 56% at 0% 100%, transparent 20%, #000 100%); mask-image: radial-gradient(ellipse 30% 56% at 0% 100%, transparent 20%, #000 100%); } .site-person--man { height: 88%; left: -3.5%; } .site-person--woman { height: 82%; right: -1.5%; } .site-person__drift, .site-person__soft { height: 100%; } .site-person__drift { transform-origin: 50% 100%; } .site-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--veil), 0), rgba(var(--veil), .35)); } .site-hero__stage { z-index: 1; } /* 兩人同一層一起動（捲動與滑鼠視差），頭的大小與眼睛高度不會被拉開 */ @media (min-width: 861px) { .site-hero__stage { position: absolute; inset: 0; } } .site-hero.is-live :is(.site-hero__bg, .site-hero__stage, .site-hero__copy, .site-hero__arc) { will-change: translate; } /* 兩人對齊（2026-10-31 由提案版本 1、2 實測沿用）：頭一樣大、眼睛同高、不壓字。 金棕依原圖量測：男士 眼睛 y=330、下巴 548（圖高 1403）；女士 眼睛 y=331、下巴 575（圖高 1536）。 桌機男士容器 88% → 女士 85.85% 時兩人「眼睛到下巴」等長、眼睛同高；手機男士 100% → 女士 97.6%。 黑金的人物圖由金棕的圖調光而成，尺寸與構圖相同，沿用同一組數字。 墨綠依原圖量測：男士 man-green 圖高 1389，兩眼中點 y=331、嘴線 485、下巴 565；女士 woman-green 圖高 1536，兩眼中點 y=458、嘴線 655、下巴 770。 女士原圖臉長約男士 1.30 倍，且是近拍構圖，所以男士往下沉（膝蓋以下由首屏底緣切掉）、女士貼底。 桌機縮放基準 --u＝min(首屏高, 52～53vw)：標題隨寬度縮放，視窗偏高時人像不壓標題與按鈕。改圖或改比例要重新量測並重算。 */ @media (min-width: 861px) { html[data-theme="gold"] .site-hero, html[data-theme="dark"] .site-hero, :root:not([data-theme]) .site-hero { --u: min(clamp(680px, 100svh - var(--header-h), 1010px), 52vw); } html[data-theme="gold"] .site-person--man, html[data-theme="dark"] .site-person--man { height: calc(var(--u) * .88); left: calc(-3.5% - var(--u) * .05); } html[data-theme="gold"] .site-person--woman, html[data-theme="dark"] .site-person--woman { height: calc(var(--u) * .8585); } html[data-theme="green"] .site-hero { --u: min(clamp(680px, 100svh - var(--header-h), 1010px), 53vw); } html[data-theme="green"] .site-person--man { height: calc(var(--u) * .986); bottom: calc(var(--u) * -.162); left: calc(-5% - var(--u) * .02); } html[data-theme="green"] .site-person--woman { height: calc(var(--u) * .838); right: calc(-5% - var(--u) * .0125); } } /* 首屏進場：純 CSS，不需要 JS，也不會閃；減少動態時完全不套用 */ @media (prefers-reduced-motion: no-preference) { .site-hero [data-in] { animation: siteRise 1.1s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); } .site-person__soft { animation: siteMeetL 1.8s var(--ease-out) .15s both; } .site-person--woman .site-person__soft { animation-name: siteMeetR; } .site-hero__bg img { animation: siteBgIn 2.2s var(--ease-out) both; } .site-hero__arc circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: siteDraw 2.6s cubic-bezier(.6, .05, .25, 1) both; } .site-hero__arc--b circle { animation-delay: .35s; } .site-hero__arc--c circle { animation-delay: .6s; } .site-hero__rule { animation: siteGrow 1s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); } .site-hero__divider { animation: siteGrowX 1.1s var(--ease-out) .95s both; } .site-person--man .site-person__drift { animation: siteDriftR 9s ease-in-out 2s infinite alternate; } .site-person--woman .site-person__drift { animation: siteDriftL 10s ease-in-out 2.4s infinite alternate; } .site-hero__light::before { animation: siteSweep 14s ease-in-out 1s infinite alternate; } .site-hero__light::after { animation: siteSweep 18s ease-in-out 3s infinite alternate-reverse; } } @keyframes siteRise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes siteMeetL { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } } @keyframes siteMeetR { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } } @keyframes siteBgIn { from { opacity: 0; transform: scale(1.06); } to { transform: none; } } @keyframes siteDraw { to { stroke-dashoffset: 0; } } @keyframes siteGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes siteGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes siteDriftR { 0% { transform: translateX(0) scale(1); } 100% { transform: translateX(10px) scale(1.012); } } @keyframes siteDriftL { 0% { transform: translateX(0) scale(1); } 100% { transform: translateX(-10px) scale(1.012); } } @keyframes siteSweep { from { transform: translateX(-12vw) rotate(28deg); opacity: .55; } to { transform: translateX(10vw) rotate(28deg); opacity: 1; } } /* 品牌切換（開關預設關閉，開啟時才輸出） */ .brand-switch__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 8px; justify-content: center; } .brand-switch__item { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--s-hair); font-family: var(--serif-tc); font-size: 15px; letter-spacing: .08em; text-decoration: none; color: var(--s-ink); } .brand-switch__item.is-current { background: var(--s-btn); color: var(--s-btn-ink); border-color: var(--s-btn); } /* ---------- 左右兩欄（拱門＋文字） ---------- */ .site-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); align-items: center; } .site-split--media-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .site-split--media-right .site-split__media { order: 2; } .site-split__media { position: relative; display: flex; justify-content: center; } .site-split__media .site-arch { width: min(100%, 440px); aspect-ratio: 4 / 5.2; } .site-split__ring { width: min(600px, 128%); left: 50%; top: 50%; translate: -50% -52%; z-index: -1; rotate: var(--site-rot, 0deg); } .site-split__ring circle { stroke: var(--s-hair); } /* ---------- 黏住左側的章節故事 ---------- */ .site-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); } .site-story__stage { position: sticky; top: calc(var(--header-h) + 5vh); align-self: start; height: calc(100vh - var(--header-h) - 10vh); min-height: 520px; max-height: 780px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .site-story__ring { width: min(560px, 128%); left: 50%; top: 50%; translate: -50% -56%; z-index: 0; rotate: var(--site-rot, 0deg); } .site-story__ring circle { stroke: var(--s-hair); } .site-story__arch { width: min(100%, 400px); flex: 1 1 auto; max-height: 600px; min-height: 0; z-index: 1; } .site-story__arch img { position: absolute; inset: 0; opacity: 0; scale: 1.06; transition: opacity 1.1s ease, scale 2.4s var(--ease); } .site-story__arch img.is-on { opacity: 1; scale: 1; } .site-story__plate { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 10px; margin: 34px 0 0; } .site-story__no { font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 52px; line-height: 1; color: var(--s-accent); min-width: 1.4em; text-align: right; } .site-story__of { font-family: var(--latin); font-style: italic; font-size: 20px; color: var(--s-ink-2); } .site-story__name { display: inline-flex; align-items: center; gap: 14px; margin-left: 10px; font-family: var(--serif-tc); font-size: 16px; font-weight: 600; letter-spacing: .24em; color: var(--s-ink); } .site-story__name::before { content: ""; width: 32px; height: 1px; background: var(--s-line); } .site-story__plate.is-swap .site-story__no, .site-story__plate.is-swap .site-story__name { animation: siteSwap .7s var(--ease); } @keyframes siteSwap { from { opacity: 0; translate: 0 10px; } } .site-chapter { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; transition: opacity .8s ease; } .site-chapter + .site-chapter { border-top: 1px solid var(--s-hair-soft); } .site-chapter__media { display: none; } .site-chapter__no { margin: 0 0 6px; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: clamp(72px, 7.4vw, 112px); line-height: .9; letter-spacing: .02em; background: var(--s-num); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; padding-right: .12em; } .site-chapter h3 { margin: 0; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.5; letter-spacing: .1em; color: var(--s-ink); } .site-chapter__kind { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; font-size: 15px; font-weight: 600; letter-spacing: .3em; color: var(--s-accent); } .site-chapter__kind::after { content: ""; width: 40px; height: 1px; background: var(--s-line); } .site-chapter > p:not(.site-chapter__no) { margin: 16px 0 0; max-width: 30em; font-family: var(--serif-tc); font-size: 17px; line-height: 2; letter-spacing: .05em; color: var(--s-ink-2); text-wrap: pretty; } /* 條列的事實表（標籤＋內容，資料卡、資格都用這個） */ .site-facts { margin: 30px 0 0; max-width: 520px; } .site-facts > div { display: grid; grid-template-columns: 6.2em 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--s-hair-soft); } .site-facts > div:last-child { border-bottom: 1px solid var(--s-hair-soft); } .site-facts dt { font-family: var(--serif-tc); font-size: 15px; font-weight: 500; letter-spacing: .14em; color: var(--s-ink-2); line-height: 1.8; } .site-facts dd { margin: 0; font-size: 17px; line-height: 1.75; color: var(--s-ink); } .site-facts--boxed { position: relative; padding: 10px 26px; background: var(--s-bg-2); border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 6px; } .site-facts--boxed > div:first-child { border-top: 0; } .site-facts--boxed > div:last-child { border-bottom: 0; } /* ---------- 邀請卡 ---------- */ .site-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); } .site-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; } .site-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); } .site-cards--single { grid-template-columns: minmax(0, 620px); justify-content: center; } .site-card { perspective: 1000px; display: flex; min-width: 0; } .site-card__face { --rx: 0deg; --ry: 0deg; --tx: 0; --ty: 0; position: relative; flex: 1; min-width: 0; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(40px, 3.6vw, 56px) clamp(26px, 2.6vw, 40px) clamp(40px, 3.4vw, 52px); background: radial-gradient(circle at 50% 0%, rgba(var(--dust), .1), rgba(var(--dust), 0) 55%), var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease), translate .6s var(--ease), scale .2s var(--ease-out), border-color .5s ease, box-shadow .5s ease; } .site-card__face.is-tilting { transition: transform .2s ease-out, translate .6s var(--ease), scale .2s var(--ease-out), border-color .5s ease, box-shadow .5s ease; } /* 內框：細線＋四角折角 */ .site-card__face::before { --corner: var(--s-metal-hi); content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--s-hair-soft); background: linear-gradient(var(--corner), var(--corner)) left top / 18px 1px no-repeat, linear-gradient(var(--corner), var(--corner)) left top / 1px 18px no-repeat, linear-gradient(var(--corner), var(--corner)) right top / 18px 1px no-repeat, linear-gradient(var(--corner), var(--corner)) right top / 1px 18px no-repeat, linear-gradient(var(--corner), var(--corner)) left bottom / 18px 1px no-repeat, linear-gradient(var(--corner), var(--corner)) left bottom / 1px 18px no-repeat, linear-gradient(var(--corner), var(--corner)) right bottom / 18px 1px no-repeat, linear-gradient(var(--corner), var(--corner)) right bottom / 1px 18px no-repeat; background-origin: border-box; opacity: .75; } /* 燙金光澤 */ .site-card__face::after { content: ""; position: absolute; inset: -2px; pointer-events: none; background: linear-gradient(105deg, transparent 34%, rgba(var(--dust), .14) 46%, rgba(255, 243, 214, .32) 50%, rgba(var(--dust), .14) 54%, transparent 66%); translate: -110% 0; } .site-tone-light .site-card__face::after, .site-band--cream .site-card__face::after, .site-band--paper .site-card__face::after { opacity: .7; } .site-card.is-shine .site-card__face::after { animation: siteSheen 1.5s cubic-bezier(.4, 0, .2, 1) both; } .site-card:hover .site-card__face { border-color: var(--s-line); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--dust), .14); } .site-card:active .site-card__face { scale: .985; } @media (hover: hover) { .site-card:hover .site-card__face { translate: 0 -6px; } } .site-seal { flex: none; display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 24px; border-radius: 50%; border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 5px; background: var(--s-seal); translate: calc(var(--tx, 0) * 8px) calc(var(--ty, 0) * 8px); transition: box-shadow .5s ease, translate .35s var(--ease-out); } .site-card:hover .site-seal { box-shadow: 0 0 26px rgba(var(--dust), .28); } .site-seal svg { width: 34px; height: 34px; fill: none; stroke: var(--s-metal-hi); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .site-card__no { margin: 0 0 6px; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 54px; line-height: 1; background: var(--s-num); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .12em; } .site-card__en { margin: 0; font-family: var(--latin); font-style: italic; font-size: 18px; letter-spacing: .04em; color: var(--s-accent); line-height: 1.4; } .site-card h3 { margin: 8px 0 14px; font-family: var(--serif-tc); font-weight: 600; font-size: 21px; line-height: 1.55; letter-spacing: .1em; color: var(--s-ink); translate: calc(var(--tx, 0) * 3px) calc(var(--ty, 0) * 3px); transition: translate .35s var(--ease-out); } .site-card__face > p:not(.site-card__en):not(.site-card__no):not(.site-card__tag) { margin: 0 auto; max-width: 20em; font-family: var(--serif-tc); font-size: 16.5px; line-height: 1.95; letter-spacing: .04em; color: var(--s-ink-2); text-wrap: pretty; } .site-card__cta { margin-top: auto; } .site-card__face > p + .site-card__cta { margin-top: 30px; } .site-cards--single .site-card h3 { font-size: 26px; } /* 靠左的內容卡（問答、保證條目） */ .site-card--left .site-card__face { text-align: left; align-items: flex-start; } .site-card--left .site-card__face > p:not(.site-card__en):not(.site-card__no):not(.site-card__tag) { margin: 0; max-width: none; } .site-card__tag { margin: 0 0 6px; font-family: var(--serif-tc); font-size: 15px; font-weight: 600; letter-spacing: .24em; color: var(--s-accent); } /* ---------- 流程四步 ---------- */ .site-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); position: relative; } .site-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 37px; height: 1px; background: var(--s-line); transform-origin: left; } .site-steps--3::before { left: 16.6%; right: 16.6%; } .site-step { position: relative; text-align: center; } .site-step__no { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 50%; background: var(--s-bg-2); border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 5px; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 30px; line-height: 1; color: var(--s-accent); } .site-step h3 { margin: 0 0 10px; font-family: var(--serif-tc); font-size: 21px; font-weight: 600; letter-spacing: .12em; color: var(--s-ink); } .site-step p { margin: 0 auto; max-width: 15em; font-family: var(--serif-tc); font-size: 16px; line-height: 1.9; color: var(--s-ink-2); text-wrap: pretty; } /* ---------- 金線旅程（關卡）：金線隨捲動畫下去，經過的勳章點亮 ---------- */ .site-journey { position: relative; max-width: 940px; margin: 0 auto; } .site-thread { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; translate: -.5px 0; background: var(--s-hair-soft); } .site-thread__fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; transform-origin: top; transform: scaleY(var(--p, 1)); background: linear-gradient(180deg, var(--s-line), var(--s-metal-hi)); box-shadow: 0 0 10px rgba(var(--dust), .6); } .site-thread__spark { position: absolute; left: 50%; top: calc(var(--p, 1) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 6px 2px rgba(var(--dust), .9), 0 0 22px 6px rgba(var(--dust), .45); opacity: 0; transition: opacity .4s; } .site-journey.is-drawing .site-thread__spark { opacity: 1; } .site-act { position: relative; z-index: 1; } .site-act__title { display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 0 auto 26px; padding: 10px 26px 12px; background: var(--s-bg); border: 1px solid var(--s-hair); border-radius: 999px; font-family: var(--serif-tc); font-weight: 600; font-size: 17px; letter-spacing: .3em; text-indent: .3em; line-height: 1.5; color: var(--s-ink); } .site-act__title span { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: 16px; letter-spacing: .06em; text-indent: 0; color: var(--s-accent); } .site-act + .site-act { margin-top: 40px; } .site-act__gates { list-style: none; margin: 0; padding: 0; } .site-gate { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; min-height: 92px; } .site-gate + .site-gate { margin-top: 6px; } .site-medal { grid-column: 2; grid-row: 1; justify-self: center; position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--s-bg); border: 1px solid var(--s-hair); font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 22px; line-height: 1; color: var(--s-accent); transition: background .7s ease, color .7s ease, box-shadow .9s ease, border-color .7s ease; } .site-medal::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid transparent; transition: border-color .9s ease, scale .9s var(--ease); scale: .85; } .site-gate__text { grid-row: 1; padding: 0 30px; } .site-gate--l .site-gate__text { grid-column: 1; text-align: right; } .site-gate--r .site-gate__text { grid-column: 3; text-align: left; } .site-gate__name { margin: 0; font-family: var(--serif-tc); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: .12em; color: var(--s-ink); transition: color .7s ease; } .site-gate--l .site-gate__name::after, .site-gate--r .site-gate__name::before { content: ""; display: inline-block; width: 34px; height: 1px; vertical-align: middle; background: var(--s-line); opacity: .6; } .site-gate--l .site-gate__name::after { margin-left: 16px; } .site-gate--r .site-gate__name::before { margin-right: 16px; } .site-gate__note { margin: 2px 0 0; font-size: 15px; line-height: 1.7; color: var(--s-ink-2); } .site-gate.is-lit .site-medal, .site-journey:not(.is-live) .site-medal { background: radial-gradient(circle at 34% 28%, var(--sun), var(--s-metal-hi) 28%, var(--s-line) 58%, var(--s-accent)); border-color: var(--s-metal-hi); color: #1a100a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset, 0 0 26px rgba(var(--dust), .42); } .site-gate.is-lit .site-medal::before, .site-journey:not(.is-live) .site-medal::before { border-color: rgba(var(--dust), .5); scale: 1; } .site-journey.is-live .site-gate:not(.is-lit) .site-gate__name { opacity: .62; } .site-journey__end { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: 44px; text-align: center; } .site-endring { display: flex; align-items: baseline; justify-content: center; gap: 2px; width: 132px; height: 132px; padding-top: 34px; border-radius: 50%; background: var(--s-bg-2); border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 8px; box-shadow: 0 0 60px rgba(var(--dust), .14); } .site-endring .site-num { font-size: 72px; } .site-journey__end p { margin: 26px 0 0; font-family: var(--serif-tc); font-weight: 500; font-size: 19px; line-height: 1.9; letter-spacing: .12em; color: var(--s-ink); } /* ---------- 交錯圖文時間軸（六個安排步驟這類） ---------- */ .site-timeline { position: relative; list-style: none; margin: 0; padding: 0; } .site-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--s-hair); } .site-tl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; } .site-tl + .site-tl { margin-top: clamp(48px, 6vw, 96px); } .site-tl__no { grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--s-bg); border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 5px; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 30px; color: var(--s-accent); z-index: 1; } .site-tl__media { grid-row: 1; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; outline: 1px solid var(--s-hair); outline-offset: 8px; background: var(--s-bg-2); } .site-tl__media img { width: 100%; height: 100%; object-fit: cover; } .site-tl__copy { grid-row: 1; } .site-tl:nth-child(odd) .site-tl__media { grid-column: 1; } .site-tl:nth-child(odd) .site-tl__copy { grid-column: 3; } .site-tl:nth-child(even) .site-tl__media { grid-column: 3; } .site-tl:nth-child(even) .site-tl__copy { grid-column: 1; text-align: right; } .site-tl__label { margin: 0; font-family: var(--latin); font-style: italic; font-size: 18px; color: var(--s-accent); } .site-tl h3 { margin: 4px 0 10px; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(21px, 2vw, 26px); line-height: 1.5; letter-spacing: .1em; color: var(--s-ink); } .site-tl p:not(.site-tl__label) { margin: 0; font-family: var(--serif-tc); font-size: 16.5px; line-height: 1.95; letter-spacing: .04em; color: var(--s-ink-2); text-wrap: pretty; } .site-tl__meta { margin-top: 12px !important; font-size: 15px !important; color: var(--s-accent) !important; } /* ---------- 數字（營運數據等） ---------- */ .site-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--s-hair); border-bottom: 1px solid var(--s-hair); } .site-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-stat { padding: clamp(28px, 3vw, 44px) 16px; text-align: center; } .site-stat + .site-stat { border-left: 1px solid var(--s-hair-soft); } .site-stat__value { font-family: var(--latin); font-style: italic; font-weight: 600; font-size: clamp(54px, 5.6vw, 84px); line-height: 1; background: var(--s-num); background-size: 260% 100%; background-position: 70% 0; -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-right: .1em; } .site-stat__unit { font-family: var(--serif-tc); font-style: normal; font-size: .36em; font-weight: 500; margin-left: .12em; } .site-stat__label { margin: 12px 0 0; font-family: var(--serif-tc); font-size: 16px; letter-spacing: .1em; color: var(--s-ink-2); line-height: 1.6; } /* 名額膠囊 */ .site-seat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; padding: 8px 22px; border: 1px solid var(--s-hair); border-radius: 999px; background: var(--s-bg-2); font-family: var(--serif-tc); font-size: 15.5px; letter-spacing: .06em; line-height: 1.6; color: var(--s-ink); } .site-seat__when { font-family: var(--latin); font-style: italic; font-size: 19px; color: var(--s-accent); } .site-seat strong { font-weight: 500; } .site-seat em { font-style: normal; font-weight: 700; color: var(--s-accent); } .site-count { font-variant-numeric: tabular-nums; display: inline-block; } /* ---------- 引言輪播 ---------- */ .site-quotes { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 0; text-align: center; } .site-quotes__ring { width: min(660px, 96vw); left: 50%; top: calc(50% + 10px); translate: -50% -50%; z-index: 0; } .site-quotes__ring circle { stroke: var(--s-hair); } @media (max-width: 640px) { .site-quotes__ring { display: none; } } /* 窄螢幕圓環會穿過引言文字 */ .site-quotes__mark { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 1; font-family: var(--latin); font-weight: 600; font-size: 168px; line-height: 1; height: .62em; overflow: hidden; background: var(--s-num); -webkit-background-clip: text; background-clip: text; color: transparent; } .site-quotes__viewport { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 56px; padding-top: 56px; } .site-quote { margin: 0; } .site-quote__tag { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px; font-family: var(--serif-tc); font-size: 15px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; color: var(--s-accent); } .site-quote__tag::before, .site-quote__tag::after { content: ""; width: 28px; height: 1px; background: var(--s-line); } .site-quote blockquote { margin: 0; } .site-quote blockquote p { margin: 0 auto; max-width: 21em; font-family: var(--serif-tc); font-weight: 500; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.75; letter-spacing: .07em; color: var(--s-ink); text-wrap: pretty; } .site-quote figcaption { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 26px; } .site-quote time { font-family: var(--latin); font-style: italic; font-size: 17px; letter-spacing: .04em; color: var(--s-ink-2); } .site-quote__who { display: inline-flex; align-items: center; gap: 14px; font-family: var(--serif-tc); font-weight: 600; font-size: 18px; letter-spacing: .14em; color: var(--s-ink); } .site-quote__who::before { content: ""; width: 28px; height: 1px; background: var(--s-line); } .site-quotes.is-carousel .site-quotes__viewport { display: grid; gap: 0; } .site-quotes.is-carousel .site-quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 10px; filter: blur(3px); transition: opacity .9s ease, translate 1.1s var(--ease), filter .9s ease, visibility 0s linear .9s; } .site-quotes.is-carousel .site-quote.is-on { opacity: 1; visibility: visible; translate: 0 0; filter: none; transition: opacity 1s ease .15s, translate 1.2s var(--ease) .15s, filter 1s ease .15s, visibility 0s; } .site-quotes__ctrl { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; } .site-quotes__btn { position: relative; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 1px solid var(--s-line); background: transparent; color: var(--s-accent); cursor: pointer; transition: background .3s, color .3s; } .site-quotes__btn:hover { background: var(--s-btn); color: var(--s-btn-ink); } .site-quotes__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; } .site-quotes__btn .site-prog { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); rotate: -90deg; pointer-events: none; } .site-prog circle { fill: none; stroke: var(--s-accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; } .site-quotes.is-running .site-prog circle { animation: siteProg 7s linear both; } .site-quotes.is-held .site-prog circle { animation-play-state: paused; } @keyframes siteProg { to { stroke-dashoffset: 0; } } .site-quotes__count { min-width: 88px; margin: 0; font-family: var(--latin); font-style: italic; font-size: 19px; color: var(--s-ink-2); letter-spacing: .06em; } .site-quotes__count b { font-weight: 600; font-size: 28px; color: var(--s-accent); } /* ---------- 問答摺頁 ---------- */ .site-split--faq { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .site-split--faq .site-split__media { position: sticky; top: calc(var(--header-h) + 40px); display: block; } .site-qa-list { border-top: 1px solid var(--s-hair); } .site-qa { position: relative; border-bottom: 1px solid var(--s-hair-soft); } .site-qa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--s-metal-hi), var(--s-line) 60%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); } .site-qa[open]::after { transform: scaleX(1); } .site-qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; min-height: 48px; padding: 26px 4px; font-family: var(--serif-tc); font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: .06em; color: var(--s-ink); transition: color .3s; } .site-qa summary::-webkit-details-marker { display: none; } .site-qa summary:hover, .site-qa[open] summary { color: var(--s-accent); } .site-qa summary { -webkit-tap-highlight-color: transparent; } .site-qa__q, .accordion-question { transition: translate .4s var(--ease-out); } :is(.site-qa summary, .accordion-trigger):hover :is(.site-qa__q, .accordion-question) { translate: 5px 0; } :is(.site-qa summary, .accordion-trigger):active { background: rgba(var(--dust), .1); } :is(.site-qa summary, .accordion-trigger):active :is(.site-qa__icon, .accordion-icon) { scale: .86; } .site-qa__icon, .accordion-icon { transition: background .4s, border-color .4s, scale .2s var(--ease-out) !important; } .site-qa__no { flex: none; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 24px; color: var(--s-accent); min-width: 1.6em; } .site-qa__q { flex: 1; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; } /* 中文不在詞中間斷行 */ .site-qa__icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--s-hair); transition: background .4s, border-color .4s; } .site-qa__icon::before, .site-qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; margin-left: -6.5px; background: var(--s-accent); transition: rotate .5s var(--ease); } .site-qa__icon::after { rotate: 90deg; } .site-qa[open] .site-qa__icon { background: rgba(var(--dust), .14); border-color: var(--s-line); } .site-qa[open] .site-qa__icon::after { rotate: 0deg; } .site-qa summary:hover .site-qa__icon { border-color: var(--s-line); } .site-qa__a { overflow: hidden; } .site-qa__a p, .site-qa__a li { font-family: var(--serif-tc); font-size: 17px; line-height: 2; letter-spacing: .05em; color: var(--s-ink-2); } .site-qa__a p { margin: 0; padding: 0 64px 30px 4px; } .site-qa__a p + p { margin-top: -18px; } .site-qa__a ul, .site-qa__a ol { margin: 0; padding: 0 64px 30px 28px; } /* 手風琴：FAQ 頁保留原結構（測試以 .accordion-question／.accordion-answer 比對 FAQ 匯入內容），外觀與 .site-qa 相同 */ .accordion-list { border-top: 1px solid var(--s-hair); } .accordion-item { position: relative; border-bottom: 1px solid var(--s-hair-soft); } .accordion-trigger { -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 20px; width: 100%; min-height: 48px; padding: 26px 4px; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--serif-tc); font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: .06em; color: var(--s-ink); transition: color .3s; } .accordion-trigger:hover, .accordion-item.is-open .accordion-trigger { color: var(--s-accent); } .accordion-no { flex: none; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 24px; color: var(--s-accent); min-width: 1.6em; } .accordion-question { flex: 1; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; } .accordion-icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--s-hair); transition: background .4s, border-color .4s; } .accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; margin-left: -6.5px; background: var(--s-accent); transition: rotate .5s var(--ease); } .accordion-icon::after { rotate: 90deg; } .accordion-item.is-open .accordion-icon { background: rgba(var(--dust), .14); border-color: var(--s-line); } .accordion-item.is-open .accordion-icon::after { rotate: 0deg; } .accordion-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .55s var(--ease), visibility 0s linear .55s; } .accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--ease), visibility 0s; } .accordion-panel-inner { overflow: hidden; min-height: 0; } .accordion-answer { margin: 0; padding: 0 64px 30px 4px; font-family: var(--serif-tc); font-size: 17px; line-height: 2; letter-spacing: .05em; color: var(--s-ink-2); } /* ---------- 輪播（方案、案例）：[data-site-slider] ---------- */ .site-slider { position: relative; } .site-slider__viewport { overflow: hidden; touch-action: pan-y; transition: height .5s var(--ease); } .site-slider__track { display: flex; align-items: flex-start; transition: transform .7s var(--ease); } .site-slider__slide { flex: 0 0 100%; min-width: 0; padding: 1px; } .site-slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; } .site-slider__nav { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 96px; padding: 0 20px; border: 1px solid var(--s-line); border-radius: 999px; background: transparent; color: var(--s-ink); font-family: var(--serif-tc); font-size: 16px; font-weight: 500; letter-spacing: .1em; cursor: pointer; transition: background .3s, color .3s; } .site-slider__nav:hover { background: var(--s-btn); color: var(--s-btn-ink); } .site-slider__dots { display: flex; align-items: center; gap: 2px; } .site-slider__dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .site-slider__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; rotate: 45deg; border: 1px solid var(--s-line); background: transparent; transition: background .3s, scale .3s; } .site-slider__dot.is-active::before { background: var(--s-accent); border-color: var(--s-accent); scale: 1.25; } /* ---------- 方案卡（內容不可改，只有版面）---------- */ .site-plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); position: relative; } .site-plan::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--s-hair-soft); z-index: 2; } .site-plan__media { position: relative; margin: 0; min-height: 100%; overflow: hidden; background: var(--s-bg-2); } .site-plan__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .site-plan__body { position: relative; padding: clamp(32px, 4vw, 60px) clamp(26px, 3.6vw, 56px); } .site-plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .site-plan__en { margin: 0; font-family: var(--latin); font-style: italic; font-size: 20px; letter-spacing: .04em; color: var(--s-accent); } .site-plan__no { font-family: var(--latin); font-style: italic; font-weight: 600; font-size: clamp(48px, 5vw, 72px); line-height: .9; background: var(--s-num); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .12em; } .site-plan h3 { margin: 6px 0 0; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.4; letter-spacing: .12em; color: var(--s-ink); } .site-plan__sub { margin: 8px 0 0; font-family: var(--serif-tc); font-size: 17px; font-weight: 500; letter-spacing: .05em; color: var(--s-accent); } .site-plan__qual { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--s-hair-soft); } .site-plan__qual h4 { margin: 0 0 8px; font-family: var(--serif-tc); font-size: 16px; font-weight: 600; letter-spacing: .2em; color: var(--s-ink); } .site-plan__action { margin-top: 28px; } /* 條列（金色菱形）＋細字條列 */ .site-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; } .site-list > li { position: relative; padding-left: 20px; font-size: 16.5px; line-height: 1.85; color: var(--s-ink-2); } .site-list > li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--s-line); } .site-list--fine > li { font-size: 15px; color: var(--s-muted); } .site-list--num { counter-reset: n; } .site-list--num > li { counter-increment: n; padding-left: 32px; } .site-list--num > li::before { content: counter(n); left: 0; top: 0; width: auto; height: auto; rotate: none; border: 0; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 21px; color: var(--s-accent); line-height: 1.5; } /* ---------- 人物檔案卡（珍婚啟事）---------- */ .site-profiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); } .site-profiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-profile { display: flex; flex-direction: column; min-width: 0; background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); } .site-profile__photo { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--s-bg-2); } .site-profile__photo img { width: 100%; height: 100%; object-fit: cover; } .site-profile__photo--blur { background: var(--footer-bg); } /* 照片載入前鎖頭的淺色字也讀得到：墊深底，不靠圖片 */ .site-profile__photo--blur img { filter: blur(14px) saturate(.8); scale: 1.12; } .site-profile__lock { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; text-align: center; background: rgba(0, 0, 0, .32); color: #fbf3e4; } .site-profile__lock-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; } .site-profile__lock svg { width: 36px; height: 36px; } .site-profile__lock-title { font-family: var(--serif-tc); font-size: 16px; letter-spacing: .1em; } .site-profile__lock a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .7); color: inherit; text-decoration: none; font-size: 15px; letter-spacing: .08em; } .site-profile__body { flex: 1; display: flex; flex-direction: column; padding: 22px 20px 24px; } .site-profile__label { margin: 0; font-family: var(--latin); font-style: italic; font-size: 17px; color: var(--s-accent); } .site-profile h3 { margin: 4px 0 12px; font-family: var(--serif-tc); font-weight: 600; font-size: 18px; letter-spacing: .08em; line-height: 1.5; color: var(--s-ink); } .site-profile__fields { margin: 0 0 18px; display: grid; gap: 2px; } .site-profile__fields > div { display: flex; gap: 8px; font-size: 15.5px; line-height: 1.8; } .site-profile__fields dt { color: var(--s-ink-2); flex: none; } .site-profile__fields dd { margin: 0; color: var(--s-ink); } .site-profile .site-btn { margin-top: auto; } /* ---------- 案例卡（成功故事）---------- */ .site-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--s-card); border: 1px solid var(--s-hair); } .site-case__photo { margin: 0; position: relative; min-height: 100%; overflow: hidden; background: var(--s-bg-2); } .site-case__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .site-case__body { padding: clamp(28px, 3.6vw, 52px); } .site-case__tags { display: flex; flex-wrap: wrap; gap: 8px; } .site-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border: 1px solid var(--s-hair); font-family: var(--serif-tc); font-size: 15px; letter-spacing: .06em; color: var(--s-accent); } .site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .site-case__code { margin: 14px 0 0; font-family: var(--latin); font-style: italic; font-size: 17px; color: var(--s-accent); } .site-case h3 { margin: 2px 0 6px; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .08em; line-height: 1.5; color: var(--s-ink); } .site-case__meta { margin: 0; font-size: 16px; color: var(--s-ink-2); } .site-case__quote { margin: 18px 0 0; padding-left: 18px; border-left: 1px solid var(--s-line); font-family: var(--serif-tc); font-size: 17px; line-height: 2; letter-spacing: .04em; color: var(--s-ink); } /* ---------- 內容區塊：優惠、規則、表格 ---------- */ .site-block { position: relative; padding: clamp(28px, 3.6vw, 48px); background: var(--s-card); border: 1px solid var(--s-hair); } .site-block + .site-block { margin-top: clamp(24px, 3vw, 40px); } .site-block--plain { background: none; border: 0; padding: 0; } .site-block__title { margin: 0 0 14px; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(21px, 2vw, 26px); line-height: 1.5; letter-spacing: .1em; color: var(--s-ink); } .site-block__sub { margin: 20px 0 8px; font-family: var(--serif-tc); font-weight: 600; font-size: 18px; letter-spacing: .08em; color: var(--s-accent); } .site-block__text { margin: 0; font-size: 16.5px; line-height: 1.95; color: var(--s-ink-2); } .site-block__text + .site-block__text { margin-top: 10px; } .site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); } .site-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-grid > .site-block + .site-block { margin-top: 0; } .site-highlight { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 20px; text-align: center; background: var(--s-bg-2); border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 5px; } .site-highlight__label { font-family: var(--serif-tc); font-size: 16px; letter-spacing: .12em; color: var(--s-ink-2); } .site-highlight__value { font-family: var(--latin); font-style: italic; font-weight: 600; font-size: clamp(38px, 4vw, 56px); line-height: 1.1; background: var(--s-num); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; } .site-highlight__note { font-size: 15px; color: var(--s-muted); } /* 表格：窄螢幕可橫向捲動（方案、等級對照） */ .site-table-scroll { overflow-x: auto; margin-top: 18px; border-top: 1px solid var(--s-line); } .site-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; } .site-table caption { text-align: left; font-family: var(--serif-tc); font-weight: 600; font-size: 18px; letter-spacing: .1em; padding-bottom: 14px; } .site-table th, .site-table td { padding: 14px 12px; border-bottom: 1px solid var(--s-hair-soft); text-align: left; vertical-align: top; color: var(--s-ink-2); } .site-table thead th { font-family: var(--serif-tc); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--s-accent); border-bottom: 1px solid var(--s-line); white-space: nowrap; } .site-table tbody th { font-weight: 500; color: var(--s-ink); } .site-table td.is-us { color: var(--s-ink); font-weight: 600; background: rgba(var(--dust), .08); } /* 等級（緣分幣） */ .site-levels { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .site-levels > li { display: flex; flex-direction: column; gap: 2px; padding: 16px; text-align: center; border: 1px solid var(--s-hair); background: var(--s-bg-2); } .site-levels__name { font-family: var(--serif-tc); font-weight: 600; letter-spacing: .1em; color: var(--s-ink); } .site-levels__min { font-size: 15px; color: var(--s-accent); } /* 活動卡 */ .site-event { display: flex; flex-direction: column; background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); padding: clamp(26px, 3vw, 44px); position: relative; min-width: 0; } .site-event::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--s-hair-soft); } .site-event__badge { display: inline-flex; align-self: flex-start; padding: 2px 14px; background: var(--s-btn); color: var(--s-btn-ink); font-family: var(--serif-tc); font-size: 15px; font-weight: 600; letter-spacing: .14em; } .site-event__series { margin: 14px 0 0; font-family: var(--latin); font-style: italic; font-size: 18px; color: var(--s-accent); } .site-event h3 { margin: 4px 0 8px; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .1em; line-height: 1.5; color: var(--s-ink); } .site-event__tagline { margin: 0; font-family: var(--serif-tc); font-size: 16.5px; line-height: 1.9; color: var(--s-ink-2); } /* 法律文字與文章內文 */ .site-prose { font-family: var(--serif-tc); font-size: 17px; line-height: 2; letter-spacing: .03em; color: var(--s-ink-2); overflow-wrap: anywhere; } .site-prose > :first-child { margin-top: 0; } .site-prose h2 { margin: 2.2em 0 .7em; padding-top: 1.2em; border-top: 1px solid var(--s-hair-soft); font-weight: 600; font-size: clamp(21px, 2vw, 26px); line-height: 1.5; letter-spacing: .08em; color: var(--s-ink); } .site-prose h2:first-child { padding-top: 0; border-top: 0; } .site-prose h3 { margin: 1.8em 0 .5em; font-weight: 600; font-size: 19px; letter-spacing: .06em; color: var(--s-ink); } .site-prose h4 { margin: 1.4em 0 .4em; font-weight: 600; font-size: 17px; color: var(--s-accent); } .site-prose p { margin: 0 0 1em; } .site-prose ul, .site-prose ol { margin: 0 0 1em; padding-left: 1.5em; } .site-prose li { margin: .25em 0; } .site-prose li::marker { color: var(--s-accent); } .site-prose a { color: var(--s-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; } .site-prose strong { color: var(--s-ink); font-weight: 600; } .site-prose blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.2em; border-left: 1px solid var(--s-line); color: var(--s-ink); } .site-prose img { height: auto; margin: 1.4em auto; } .site-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 16px; display: block; overflow-x: auto; } .site-prose th, .site-prose td { padding: 10px 12px; border: 1px solid var(--s-hair-soft); text-align: left; vertical-align: top; } .site-prose th { color: var(--s-ink); font-weight: 600; } .site-updated { margin: 0 0 24px; font-size: 15px; letter-spacing: .06em; color: var(--s-muted); } .site-paper { max-width: 860px; margin: 0 auto; padding: clamp(32px, 5vw, 72px); background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); position: relative; } .site-paper::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--s-hair-soft); } .site-paper > * { position: relative; } /* 文章列表（卡片由 _partials/articles.php 輸出，class 不改） */ .article-tabs { margin: 0 0 clamp(36px, 4vw, 56px); } .article-tabs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .article-tabs__item { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--s-hair); font-family: var(--serif-tc); font-size: 16px; letter-spacing: .1em; text-decoration: none; color: var(--s-ink); transition: background .3s, color .3s; } .article-tabs__item:hover { border-color: var(--s-line); } .article-tabs__item[aria-current="page"] { background: var(--s-btn); color: var(--s-btn-ink); border-color: var(--s-btn); } .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); } .article-card { min-width: 0; display: flex; background: var(--s-card); border: 1px solid var(--s-hair); transition: border-color .4s, box-shadow .4s; } .article-card:hover { border-color: var(--s-line); box-shadow: var(--card-shadow); } .article-card__link { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .article-card__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--s-bg-2); } .article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); } .article-card:hover .article-card__media img { scale: 1.05; } .article-card__body { flex: 1; display: flex; flex-direction: column; padding: 24px; } .article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; font-size: 15px; color: var(--s-muted); } .article-card__tag { padding: 0 10px; border: 1px solid var(--s-hair); color: var(--s-accent); font-family: var(--serif-tc); letter-spacing: .06em; } .article-card__title { margin: 0 0 8px; font-family: var(--serif-tc); font-weight: 600; font-size: 20px; line-height: 1.55; letter-spacing: .06em; color: var(--s-ink); } .article-card__excerpt { margin: 0 0 16px; font-size: 16px; line-height: 1.85; color: var(--s-ink-2); } .article-card__more { margin-top: auto; font-family: var(--serif-tc); font-size: 15.5px; font-weight: 600; letter-spacing: .1em; color: var(--s-accent); } .article-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(36px, 4vw, 56px); } .article-pager__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--s-line); font-family: var(--serif-tc); letter-spacing: .1em; text-decoration: none; color: var(--s-ink); } .article-pager__btn.is-disabled { opacity: .45; border-color: var(--s-hair-soft); } .article-pager__status { font-size: 15.5px; color: var(--s-muted); } /* 空狀態 */ .site-empty { max-width: 620px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px); text-align: center; background: var(--s-card); border: 1px solid var(--s-hair); } .site-empty__title { margin: 0 0 10px; font-family: var(--serif-tc); font-weight: 600; font-size: 22px; letter-spacing: .1em; color: var(--s-ink); } .site-empty__text { margin: 0 0 24px; font-size: 16.5px; line-height: 1.9; color: var(--s-ink-2); } .site-empty--inline { padding: 24px; margin: 18px 0 0; max-width: none; } .site-empty--inline .site-empty__text { margin: 0; } /* ---------- 表單（沿用原 class：site.js 與原站共用同一套 hook，欄位名稱、端點、訊息都不變）---------- */ .site-input, .match-select, .matchmaker-descent__input { display: block; width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--s-hair); border-radius: 0; background: var(--s-input); color: var(--s-ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: .02em; transition: border-color .25s, box-shadow .25s; } .site-input::placeholder, .match-select::placeholder, .matchmaker-descent__input::placeholder { color: var(--s-muted); opacity: .85; } .site-input:focus-visible, .match-select:focus-visible, .matchmaker-descent__input:focus-visible { outline: 0; border-color: var(--s-line); box-shadow: 0 0 0 2px var(--s-accent); } .site-input[aria-invalid="true"], .match-select[aria-invalid="true"], .matchmaker-descent__input[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b; } select.site-input, select.match-select, select.matchmaker-descent__input { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--s-accent) 50%), linear-gradient(-45deg, transparent 50%, var(--s-accent) 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } select.match-select option, select.matchmaker-descent__input option, select.site-input option { color: #1b120c; background: #fff; } .site-field label, .match-field label { display: block; margin-bottom: 6px; font-family: var(--serif-tc); font-size: 16px; font-weight: 500; letter-spacing: .08em; color: var(--s-ink); } .match-required { color: var(--s-accent); font-weight: 700; margin-left: 2px; } .intake-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 620px; margin: 0 auto clamp(28px, 3vw, 40px); border: 1px solid var(--s-line); } .intake-option { min-width: 0; } .intake-option + .intake-option { border-left: 1px solid var(--s-line); } .intake-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 76px; padding: 12px; border: 0; background: transparent; color: var(--s-ink); font: inherit; cursor: pointer; transition: background .3s, color .3s; } .intake-option__eyebrow { font-family: var(--serif-tc); font-size: 15px; letter-spacing: .14em; color: var(--s-accent); transition: color .3s; } .intake-tab-title { font-family: var(--serif-tc); font-weight: 600; font-size: 20px; letter-spacing: .14em; } .intake-option.is-active .intake-cta { background: var(--s-btn); color: var(--s-btn-ink); } .intake-option.is-active .intake-option__eyebrow { color: inherit; opacity: .85; } .connection-form-step { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-bottom: 18px; font-family: var(--serif-tc); font-size: 15px; letter-spacing: .08em; color: var(--s-muted); } .intake-form-panel { display: none; } .intake-form-panel.is-active { display: block; } .match-form-card { position: relative; max-width: 860px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(22px, 5vw, 64px); background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); } .match-form-card::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--s-hair-soft); } .match-form-card > * { position: relative; } .match-form-card__eyebrow { margin: 0; font-family: var(--latin); font-style: italic; font-size: 20px; letter-spacing: .04em; color: var(--s-accent); text-align: center; } .match-form-card h3 { margin: 4px 0 10px; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(25px, 2.8vw, 34px); letter-spacing: .14em; text-align: center; color: var(--s-ink); } .match-form-card__note, .match-form-required { margin: 0 auto 8px; max-width: 38em; text-align: center; font-size: 16px; line-height: 1.85; color: var(--s-ink-2); } .connection-form-section { margin: 24px 0 8px; font-family: var(--serif-tc); font-weight: 600; font-size: 17px; letter-spacing: .14em; color: var(--s-ink); } .match-choice { display: inline-flex; gap: 0; border: 1px solid var(--s-line); } .choice-pill { min-height: 46px; min-width: 124px; padding: 0 18px; border: 0; background: var(--s-btn); color: var(--s-btn-ink); font-family: var(--latin); font-size: 19px; font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: background .25s, color .25s; } .choice-pill--ghost { background: transparent; color: var(--s-ink); font-weight: 500; } .match-field-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(16px, 2.4vw, 28px); } .match-field { min-width: 0; } .match-field--full { grid-column: 1 / -1; } .match-form-actions { margin-top: 32px; text-align: center; } .match-form-submit, .matchmaker-descent__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; min-width: 260px; max-width: 100%; padding: 8px 32px; border: 1px solid var(--s-line); background: var(--s-btn); color: var(--s-btn-ink); font-family: var(--serif-tc); font-size: 18px; font-weight: 600; letter-spacing: .14em; text-decoration: none; cursor: pointer; transition: background .3s; } .match-form-submit:hover, .matchmaker-descent__cta:hover { background: var(--s-btn-hover); } .match-form-submit.is-busy, .matchmaker-descent__cta.is-busy { opacity: .65; cursor: progress; } .match-form-status { margin: 0 auto 16px; max-width: 38em; padding: 12px 16px; border: 1px solid var(--s-hair); background: var(--s-bg-2); font-size: 16px; line-height: 1.8; color: var(--s-ink); text-align: left; } .match-form-status.is-error { border-color: #c0392b; color: var(--s-ink); box-shadow: inset 3px 0 0 #c0392b; } .is-lead-done > :not(.lead-done) { display: none !important; } .is-lead-done::before { display: none; } .lead-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 8px; text-align: center; } .lead-done__mark { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 5px; margin-bottom: 14px; } .lead-done__mark::after { content: ""; position: absolute; left: 22px; top: 18px; width: 16px; height: 9px; border-left: 1.5px solid var(--s-accent); border-bottom: 1.5px solid var(--s-accent); rotate: -45deg; } .lead-done__title { margin: 0; font-family: var(--serif-tc); font-weight: 600; font-size: 24px; letter-spacing: .12em; color: var(--s-ink); } .lead-done__title:focus { outline: 0; } .lead-done__text { margin: 0; font-size: 16.5px; color: var(--s-ink-2); } .lead-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; } .lead-done__again { min-height: 48px; padding: 0 22px; border: 1px solid var(--s-hair); background: transparent; color: var(--s-ink); font-family: var(--serif-tc); font-size: 16px; letter-spacing: .08em; cursor: pointer; } /* 月老下凡（資料卡表單） */ .matchmaker-descent__fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(16px, 2.4vw, 28px); } .matchmaker-descent__fields > div { min-width: 0; } .matchmaker-descent__fields dt { margin-bottom: 6px; } .matchmaker-descent__fields dt label { font-family: var(--serif-tc); font-size: 16px; font-weight: 500; letter-spacing: .08em; color: var(--s-ink); } .matchmaker-descent__fields dd { margin: 0; } .matchmaker-descent__cta { margin-top: 26px; } .matchmaker-descent__body .match-form-status { margin-top: 16px; } /* ---------- 推薦親友表單 /referral/{code}（laravel-app/resources/views/referral-form.blade.php 直接載入官網 head／header／footer，class 不能改）---------- */ .refer-page { background: var(--band-cream); color: var(--s-ink); } .referral-section { position: relative; padding: var(--band-y) var(--gutter); } .referral-wrap { position: relative; max-width: 1180px; margin: 0 auto; } .refer-page__section { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); } .refer-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .refer-page__intro { position: sticky; top: calc(var(--header-h) + 32px); } .referral-kicker { margin: 0 0 8px; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: .04em; color: var(--s-accent); } .referral-title { margin: 0; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.45; letter-spacing: .1em; color: var(--s-ink); } .referral-title span { display: block; color: var(--s-accent); } .referral-lead { margin: 18px 0 0; font-family: var(--serif-tc); font-size: 17px; line-height: 2; letter-spacing: .05em; color: var(--s-ink-2); } .referral-lead strong { color: var(--s-ink); font-weight: 600; } .referral-steps { position: relative; list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; counter-reset: refer; } .referral-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--s-hair); } .referral-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; counter-increment: refer; } .referral-steps li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--s-bg-2); border: 1px solid var(--s-line); font-family: var(--latin); font-style: italic; font-weight: 600; font-size: 20px; color: var(--s-accent); z-index: 1; } .referral-steps li > span::before { content: counter(refer); } .referral-step-copy strong { display: block; font-family: var(--serif-tc); font-weight: 600; font-size: 18px; letter-spacing: .08em; line-height: 1.6; color: var(--s-ink); } .referral-step-copy p { margin: 2px 0 0; font-size: 16px; line-height: 1.8; color: var(--s-ink-2); } .refer-page__rules { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--s-hair-soft); font-size: 15px; line-height: 1.85; color: var(--s-muted); } .refer-page__rules a, .refer-consent a { color: var(--s-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; } .refer-form { position: relative; display: grid; gap: 20px; padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 48px); background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--card-shadow); } .refer-form::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--s-hair-soft); } .refer-form > * { position: relative; } .refer-form__title { margin: 0; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .12em; color: var(--s-ink); } .refer-field label { display: block; margin-bottom: 6px; font-family: var(--serif-tc); font-size: 16px; font-weight: 500; letter-spacing: .08em; color: var(--s-ink); } .refer-optional { margin-left: 6px; padding: 0 8px; border: 1px solid var(--s-hair); font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--s-muted); } .refer-hint { margin: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--s-muted); } .refer-input { display: block; width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--s-hair); border-radius: 0; background: var(--s-input); color: var(--s-ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; } .refer-input::placeholder { color: var(--s-muted); opacity: .85; } .refer-input:focus-visible { outline: 0; border-color: var(--s-line); box-shadow: 0 0 0 2px var(--s-accent); } .refer-input[aria-invalid="true"], .refer-file[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b; } .refer-file { display: block; width: 100%; min-height: 50px; padding: 10px; border: 1px dashed var(--s-hair); background: var(--s-input); color: var(--s-ink-2); font-size: 15px; } .refer-file::file-selector-button { margin-right: 12px; min-height: 32px; padding: 0 14px; border: 1px solid var(--s-line); background: transparent; color: var(--s-ink); font-family: var(--serif-tc); cursor: pointer; } .refer-error { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--s-ink); padding-left: 10px; border-left: 3px solid #c0392b; } .refer-consent { display: grid !important; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-family: var(--sans) !important; font-size: 15.5px !important; font-weight: 400 !important; letter-spacing: .02em !important; line-height: 1.75; color: var(--s-ink-2) !important; cursor: pointer; } .refer-consent input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--s-accent); } .refer-alert { padding: 14px 18px; border: 1px solid #c0392b; box-shadow: inset 3px 0 0 #c0392b; background: var(--s-bg-2); font-size: 15.5px; line-height: 1.8; color: var(--s-ink); } .refer-alert:focus { outline: 0; } .refer-alert__title { margin: 0 0 4px; font-weight: 700; } .refer-alert ul { margin: 0 0 4px; padding-left: 1.2em; } .refer-alert p:last-child { margin: 0; } .refer-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; } .refer-ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--s-line); color: var(--s-ink); font-family: var(--serif-tc); letter-spacing: .08em; text-decoration: none; } .refer-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--s-accent); font-family: var(--serif-tc); letter-spacing: .08em; text-underline-offset: 5px; } .refer-done { text-align: center; justify-items: center; } .refer-done__mark { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--s-line); outline: 1px solid var(--s-hair-soft); outline-offset: 5px; } .refer-done__mark::after { content: ""; position: absolute; left: 22px; top: 18px; width: 16px; height: 9px; border-left: 1.5px solid var(--s-accent); border-bottom: 1.5px solid var(--s-accent); rotate: -45deg; } .refer-done__title { margin: 8px 0 0; font-family: var(--serif-tc); font-weight: 600; font-size: 24px; letter-spacing: .12em; color: var(--s-ink); } .refer-done__title:focus { outline: 0; } .refer-done p { margin: 0; font-size: 16.5px; line-height: 1.9; color: var(--s-ink-2); } @media (max-width: 900px) { .refer-page__grid { grid-template-columns: 1fr; } .refer-page__intro { position: static; } } /* ---------- 收尾：兩扇拱門 ---------- */ .site-join { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 8vw, 120px) var(--gutter) 0; background: var(--l-bg); color: var(--s-ink); } .site-join__bg { position: absolute; inset: 0; z-index: -2; } .site-join__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; filter: blur(3px) saturate(.9); opacity: .85; scale: 1.08; } .site-join::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 34% 62% at 50% 52%, rgba(var(--veil), .94), rgba(var(--veil), .6) 62%, rgba(var(--veil), 0) 100%), linear-gradient(180deg, rgba(var(--veil), .65), rgba(var(--veil), .2) 45%, rgba(var(--veil), .45)); } .site-join__arc { z-index: -1; } .site-join__arc--a { width: 34vw; max-width: 500px; left: -9vw; top: -16%; } .site-join__arc--b { width: 40vw; max-width: 560px; right: -16vw; top: 6%; } .site-join .site-corner { z-index: 3; } .site-join__stage { position: relative; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: end; gap: clamp(16px, 3vw, 56px); } .site-portal { margin: 0; align-self: end; display: flex; } .site-portal--man { justify-content: flex-end; } .site-portal--woman { justify-content: flex-start; } .site-portal__frame { position: relative; display: block; width: clamp(220px, 23vw, 350px); aspect-ratio: 3 / 4.5; overflow: hidden; border-radius: 999px 999px 0 0; outline: 1px solid var(--s-line); outline-offset: 12px; background: var(--portal-bg); } .site-portal__frame::before { content: ""; position: absolute; inset: 10px 10px 0; z-index: 2; border: 1px solid var(--s-hair); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; } .site-portal__frame img { position: absolute; bottom: 0; height: 90%; width: auto; max-width: none; } /* 頭頂留在拱門圓弧下方，不被切到 */ .site-portal--man img { left: 50%; translate: -56% 0; } .site-portal--woman img { left: 50%; height: 88%; translate: -40% 0; } /* 與男士 90% 同臉部大小、同眼高（金棕女士臉在原圖大 12%，見首屏量測） */ html[data-theme="green"] .site-portal--man img { height: 104%; bottom: -17%; translate: -56% 0; } html[data-theme="green"] .site-portal--woman img { height: 88%; translate: -42% 0; } .site-join__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 clamp(72px, 8vw, 120px); max-width: 560px; } .site-join__copy .site-vrule { background: linear-gradient(180deg, transparent, var(--s-ink-2)); opacity: .55; } .site-join__logo { display: block; height: clamp(84px, 8vw, 118px); line-height: 0; } .site-join__logo .site-logo { margin: 0 auto; } .site-join__kicker { margin: 18px 0 0; font-family: var(--serif-tc); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.5; letter-spacing: .14em; text-indent: .14em; color: var(--s-ink); } .site-join__belief { margin: 0 0 12px; font-family: var(--serif-tc); font-size: 17px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; color: var(--s-accent); } .site-join__text { margin: 0; font-family: var(--serif-tc); font-weight: 500; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.95; letter-spacing: .1em; color: var(--s-ink-2); } .site-join .site-actions { margin-top: 32px; } .site-join__note { margin: 20px 0 0; font-family: var(--serif-tc); font-size: 15.5px; letter-spacing: .14em; color: var(--s-ink-2); } /* ---------- 頁尾 ---------- */ .site-footer { position: relative; overflow: hidden; background: var(--footer-bg); color: var(--s-ink); padding: clamp(96px, 10vw, 150px) var(--gutter) 96px; border-top: 1px solid var(--s-hair); } /* 底部留白給 LINE 浮動鈕，捲到底不會蓋住「回到頂端」 */ .site-footer > :not(.site-dust, .site-spot) { position: relative; z-index: 1; } .site-footer__crest { position: relative; text-align: center; padding: 30px 0; } .site-footer__ring { width: min(560px, 94vw); left: 50%; bottom: 4px; translate: -50% 0; } .site-footer__ring path { stroke: var(--s-hair); stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; } /* 圓弧包住 Logo，要連續不斷 */ .site-footer__crest:has(.site-footer__actions) .site-footer__ring { bottom: 84px; } .site-footer__logo { position: relative; display: inline-block; padding: 6px 4px; line-height: 0; text-decoration: none; } .site-footer__logo img { height: clamp(72px, 6.4vw, 92px); width: auto; } .site-footer__name { margin: 18px 0 0; font-family: var(--serif-tc); font-size: 17px; font-weight: 600; letter-spacing: .3em; text-indent: .3em; color: var(--s-ink); } .site-footer__tagline { margin: 8px 0 0; font-size: 15.5px; letter-spacing: .08em; color: var(--s-ink-2); } .site-footer__patent { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 15px; letter-spacing: .1em; color: var(--s-accent); } .site-footer__patent svg { width: 20px; height: 20px; } .site-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; } .site-footer__cta { min-height: 48px; min-width: 190px; font-size: 16px; } .site-footer__nav { max-width: 980px; margin: clamp(48px, 5vw, 64px) auto 0; padding-top: 40px; border-top: 1px solid var(--s-hair-soft); display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 36px clamp(32px, 6vw, 72px); } .site-footer__heading { margin: 0 0 12px; font-family: var(--serif-tc); font-size: 16px; font-weight: 600; letter-spacing: .24em; color: var(--s-accent); } .site-footer__list { list-style: none; margin: 0; padding: 0; } .site-footer__col:first-child .site-footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .site-footer__link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif-tc); font-size: 16px; letter-spacing: .1em; text-decoration: none; color: var(--s-ink-2); background: linear-gradient(90deg, var(--s-metal-hi), var(--s-line)) 0 calc(50% + .95em) / 0 1px no-repeat; transition: color .3s, background-size .5s var(--ease); } .site-footer__link:hover, .site-footer__link:focus-visible, .site-footer__link[aria-current="page"] { color: var(--s-metal-hi); background-size: 100% 1px; } .site-footer__bottom { max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 0; padding-top: 22px; border-top: 1px solid var(--s-hair-soft); display: flex; justify-content: space-between; align-items: center; gap: 8px 28px; flex-wrap: wrap; font-size: 15px; color: var(--s-ink-2); } .site-footer__motto { margin: 0; font-family: var(--latin); font-style: italic; font-size: 19px; letter-spacing: .06em; color: var(--s-accent); } .site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; } .site-footer__legal .site-footer__link { font-size: 15px; } .site-footer__copy { margin: 0; } .site-footer__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--s-ink-2); text-decoration: none; font-family: var(--serif-tc); letter-spacing: .08em; } .site-footer__top svg { width: 18px; height: 18px; } .site-footer__top:hover { color: var(--s-metal-hi); } /* ---------- 首頁專屬（其他頁不用）---------- */ .site-manifesto__arch { width: min(100%, 460px) !important; aspect-ratio: 4 / 5.1 !important; } .site-manifesto__arch img { object-position: 82% 50%; } .site-manifesto__en { margin: 14px 0 0; font-family: var(--latin); font-style: italic; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: .03em; line-height: 1.4; color: var(--s-accent); } .site-manifesto__actions { gap: 18px 22px; } .site-services__cupid { margin: clamp(40px, 4vw, 56px) auto 0; text-align: center; font-family: var(--serif-tc); font-size: 16.5px; letter-spacing: .06em; color: var(--s-ink-2); } .site-services .site-cards--single .site-card__face > p:not(.site-card__en) { max-width: 26em; } /* ---------- 捲動進場（只在 html.site-motion 時才先藏）---------- 進場一律用 @keyframes＋獨立的 translate／scale 屬性，keyframes 只寫起點，終點就是元件原本的樣子，不蓋掉元件自己的 transform。 */ .site-pre:not(.site-in) { opacity: 0; } .site-pre.site-in { animation: var(--site-anim, siteUp) 1.15s var(--ease) var(--site-delay, 0ms) both; } @keyframes siteUp { from { opacity: 0; translate: 0 34px; } } @keyframes siteSlideL { from { opacity: 0; translate: calc(var(--site-slide) * -1) 16px; } } @keyframes siteSlideR { from { opacity: 0; translate: var(--site-slide) 16px; } } @keyframes siteMeetIL { from { opacity: 0; translate: -64px 0; } } @keyframes siteMeetIR { from { opacity: 0; translate: 64px 0; } } @keyframes siteFade { from { opacity: 0; } } @keyframes sitePop { from { opacity: 0; scale: .55; } } /* 標題逐字：由金色淡入成原本的顏色（字維持行內、不位移，斷行不變） */ .site-split-chars .site-ch { display: inline; } .site-split-chars.site-in .site-ch { animation: siteChar .85s ease-out calc(var(--site-delay, 0ms) + 120ms + var(--i, 0) * 60ms) both; } @keyframes siteChar { from { opacity: 0; color: var(--s-metal-hi); text-shadow: 0 0 24px rgba(var(--dust), .7); } } /* 首屏標題不可藏：字一直都在，只有金色從左掠到右 */ .site-split-chars.site-wave .site-ch { animation: siteCharWave 1.4s ease-in-out calc(var(--site-delay, 0ms) + var(--i, 0) * 55ms) both; } @keyframes siteCharWave { 38% { color: var(--s-metal-hi); text-shadow: 0 0 22px rgba(var(--dust), .6); } } /* 釘住場景的標題：隨捲動一個字一個字點亮，捲回去會暗回來 */ .site-split-chars.site-scrub .site-ch { animation: none; opacity: .16; color: var(--s-metal-hi); transition: opacity .5s ease, color 1.2s ease, text-shadow 1.2s ease; } .site-split-chars.site-scrub .site-ch.is-lit { opacity: 1; color: var(--s-ink); } .site-motion .site-head:not(.site-in) .site-vrule, .site-motion .site-join__copy:not(.site-in) .site-vrule { transform: scaleY(0); } .site-motion .site-head .site-vrule, .site-motion .site-join__copy .site-vrule { transition: transform 1s var(--ease); } .site-motion .site-head:not(.site-in) .site-divider, .site-motion .site-join__copy:not(.site-in) .site-divider { transform: scaleX(0); } .site-motion .site-head .site-divider, .site-motion .site-join__copy .site-divider { transition: transform 1.2s var(--ease) .45s; } .site-motion .site-band:not(.site-in) > .site-thread-in { transform: scaleY(0); } .site-motion .site-thread-in { transition: transform 1.2s var(--ease); } .site-motion .site-steps:not(.site-in)::before { transform: scaleX(0); } .site-motion .site-steps::before { transition: transform 1.8s cubic-bezier(.65, 0, .25, 1) .2s; } /* 細弧：進入畫面才畫；捲動時轉一點（--site-rot），在畫面內才持續慢慢轉（金珠讓轉動看得見） */ .site-motion .site-arc:not(.site-hero__arc, .site-pagehead__arc--a, .site-pagehead__arc--b) :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; } .site-motion .site-arc.site-in :is(circle, path) { animation: siteDraw 2.6s cubic-bezier(.6, .05, .25, 1) var(--site-delay, 0ms) both; } .site-arc:not(.site-hero__arc) { rotate: var(--site-rot, 0deg); } .site-motion .site-arc--fwd.is-live { animation: siteSpin 110s linear infinite; } .site-motion .site-arc--rev.is-live { animation: siteSpin 150s linear infinite reverse; } @keyframes siteSpin { to { transform: rotate(360deg); } } .site-arc .site-arc__bead { fill: var(--s-metal-hi) !important; stroke: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; filter: drop-shadow(0 0 1.6px rgba(var(--dust), .95)); animation: siteBeadIn 1.4s ease 2.2s both !important; } @keyframes siteBeadIn { from { opacity: 0; } } /* 照片揭幕：暗幕帶著金邊由左往右拉開，照片從放大收回 */ .site-veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, var(--sun) 0, var(--s-line) 2px, rgba(var(--dust), .45) 3px, rgba(var(--dust), 0) 56px), var(--n-bg); } .site-unveil.site-in .site-veil { animation: siteVeil 1.4s cubic-bezier(.77, 0, .18, 1) var(--site-delay, 0ms) both; } .site-unveil.site-in > img { animation: siteZoom 2s var(--ease) var(--site-delay, 0ms) both; } @keyframes siteVeil { to { translate: 101% 0; } } @keyframes siteZoom { from { scale: 1.18; } } /* 相框內照片：放大 8% 留給捲動視差（JS 寫 transform）；滑過放大（scale）、跟著滑鼠平移。模糊照片不放大 */ .site-framed > img { transform: scale(1.08); } .site-framed:not(.site-story__arch) > img { transition: scale 1.2s var(--ease); } .site-framed.is-live > img { will-change: transform; } .is-live > .site-par { will-change: transform; } @media (hover: hover) { .site-framed:not(.site-framed--still, .site-story__arch):hover > img, :is(.site-plan, .site-case, .site-tl, .article-card):hover .site-framed:not(.site-framed--still) > img { scale: 1.06; } } /* 3D 傾斜與移動的反光（JS 依滑鼠寫 --rx、--ry、--tx、--ty 與反光位置；卡片的 transform 見 .site-card__face） */ .site-tilted { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease), scale 1.2s var(--ease); } .site-tilted.is-tilting { transition: transform .2s ease-out; will-change: transform; } .site-glare-host { position: relative; } .site-glare { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s ease; } .is-glare > .site-glare { opacity: 1; } .site-glare i { position: absolute; left: -280px; top: -280px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--s-glare), var(--s-glare-a)), rgba(var(--s-glare), 0)); will-change: transform; } .site-framed > .site-glare i { background: radial-gradient(closest-side, rgba(255, 246, 224, .3), rgba(255, 246, 224, 0)); } /* 觸控：捲動帶動傾斜，每幀直接寫 transform，不要再過渡 */ .site-scroll-tilt { transition-property: translate, scale, border-color, box-shadow !important; } /* 聚光：深色段落跟著滑鼠走的柔光。只移動一個圓，不重畫背景 */ .site-spot { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s ease; } .site-spot.is-on { opacity: 1; } .site-spot i { position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--dust), .24), rgba(var(--dust), .08) 48%, rgba(var(--dust), 0)); will-change: transform; } :is(.site-band--night, .site-footer) > .site-spot, html[data-theme="dark"] :is(.site-band, .site-join, .site-pagehead, .site-hero) > .site-spot { display: block; } /* 段落交界：下一段先以拱形升起，捲動時攤平成直線。盒子高度 0，不佔版面 */ .site-lip { position: relative; z-index: 3; height: 0; pointer-events: none; } .site-lip span { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(26px, 6vw, 96px); background: var(--lip); box-shadow: 0 -1px 0 var(--lip-line); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: bottom; will-change: transform; } .site-lip--night { --lip: var(--n-bg); --lip-line: var(--n-hair); } .site-lip--footer { --lip: var(--footer-bg); --lip-line: var(--n-hair); } .site-lip--cream { --lip: var(--lip-cream); --lip-line: var(--l-hair); } .site-lip--paper { --lip: var(--l-bg-2); --lip-line: var(--l-hair); } .site-lip--join { --lip: var(--l-bg); --lip-line: var(--l-hair); } /* 交錯圖文的中線：隨捲動畫下去，經過的編號點亮 */ .site-timeline__fill { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; list-style: none; pointer-events: none; background: linear-gradient(180deg, var(--s-line), var(--s-metal-hi)); box-shadow: 0 0 8px rgba(var(--dust), .55); transform: scaleY(0); transform-origin: top; } .site-tl__no { transition: background .7s ease, color .7s ease, box-shadow .9s ease; } .site-tl__no.is-lit { background: radial-gradient(circle at 34% 28%, var(--sun), var(--s-metal-hi) 30%, var(--s-line) 62%, var(--s-accent)); color: #1a100a; box-shadow: 0 0 24px rgba(var(--dust), .4); } /* 釘住場景（首頁宣言）：段落釘在頁首下方，多捲 75vh 才放開。只有 JS 啟用動態、視窗夠大時才生效 */ @media (min-width: 1025px) and (min-height: 720px) { .site-motion .site-pin { height: calc(100vh - var(--header-h) + 75vh); } .site-motion .site-pin > .site-band { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; overflow: clip; } .site-motion .site-pin .site-wrap { width: 100%; } .site-motion .site-pin .site-manifesto__arch { width: auto !important; height: min(586px, calc(100vh - var(--header-h) - 104px)); } .site-pin.is-pinned :is(.site-actions, .site-lead, .site-manifesto__en):focus-within { opacity: 1 !important; translate: none !important; } } /* Logo 散光：以 Logo 自己當遮罩，光只掃過金字；星點處一顆光緩慢閃爍。淺底、深底兩張圖的形狀相同，遮罩跟著顯示的那張 */ :root { --logo-mask: url("/img/logo-header-light.png"); } html[data-theme="dark"] { --logo-mask: url("/img/logo-header.png"); } .site-footer { --logo-mask: url("/img/logo-header.png"); } .site-join__logo { position: relative; display: block; } .site-footer__logo { --logo-pad-x: 4px; --logo-pad-y: 6px; } :is(.site-header__brand:has(.site-logo), .site-footer__logo, .site-join__logo)::after { content: ""; position: absolute; inset: var(--logo-pad-y, 0) var(--logo-pad-x, 0); pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 125% 0 / 200% 100% no-repeat; -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; } :is(.site-header__brand:has(.site-logo), .site-footer__logo, .site-join__logo)::before { content: ""; position: absolute; left: calc(var(--logo-pad-x, 0px) + (100% - var(--logo-pad-x, 0px) * 2) * .923); top: calc(var(--logo-pad-y, 0px) + (100% - var(--logo-pad-y, 0px) * 2) * .151); width: 15%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; translate: -50% -50%; scale: .6; opacity: .35; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(var(--dust), .55) 24%, rgba(var(--dust), 0) 62%); } @media (prefers-reduced-motion: no-preference) { .site-motion :is(.site-header__brand:has(.site-logo), .site-footer__logo, .site-join__logo)::after { animation: siteGlint 10s ease-in-out 2.4s infinite; } .site-motion :is(.site-header__brand:has(.site-logo), .site-footer__logo, .site-join__logo)::before { animation: siteTwinkle 5.2s ease-in-out 1.2s infinite; } .site-motion .site-footer__logo::after { animation-delay: 5s; } .site-motion .site-join__logo::after { animation-delay: 3.6s; } .site-motion :is(.site-header__brand:has(.site-logo), .site-footer__logo):hover::after { animation: siteGlintHover 1.4s ease-in-out both; } .site-motion .site-num.site-in-num, .site-motion .site-stat__value.site-in-num, .site-motion .site-highlight__value.site-in-num { animation: siteShimmer 6s ease-in-out 1s infinite; } .site-highlight__value { background-size: 260% 100%; background-position: 70% 0; } /* 內頁開頭：和首屏一樣純 CSS 進場，不等 JS、不會閃 */ .site-pagehead .site-head > :not(.site-vrule, .site-divider) { animation: siteRise 1s var(--ease-out) .15s both; } .site-pagehead .site-head > :nth-child(3) { animation-delay: .3s; } .site-pagehead .site-head > :nth-child(n + 4) { animation-delay: .5s; } .site-pagehead .site-head > .site-vrule { animation: siteGrow 1s var(--ease-out) both; } .site-pagehead .site-head > .site-divider { animation: siteGrowX 1.1s var(--ease-out) .35s both; } .site-pagehead > :is(.site-pagehead__arc--a, .site-pagehead__arc--b) circle:not(.site-arc__bead) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: siteDraw 2.6s cubic-bezier(.6, .05, .25, 1) both; } .site-pagehead > .site-pagehead__arc--b circle:not(.site-arc__bead) { animation-delay: .35s; } /* 畫面外的循環動畫暫停 */ .site-hero.is-away :is(.site-person__drift, .site-hero__arc), .site-join.is-away .site-arc { animation-play-state: paused; } .site-hero.is-away .site-hero__light::before, .site-hero.is-away .site-hero__light::after { animation-play-state: paused; } .site-footer.is-away .site-footer__logo::before, .site-footer.is-away .site-footer__logo::after, .site-join.is-away .site-join__logo::before, .site-join.is-away .site-join__logo::after { animation-play-state: paused; } } @keyframes siteGlint { 0% { background-position: 125% 0; } 22%, 100% { background-position: -25% 0; } } @keyframes siteGlintHover { from { background-position: 125% 0; } to { background-position: -25% 0; } } @keyframes siteTwinkle { 0%, 100% { opacity: .25; scale: .55; } 40% { opacity: .95; scale: 1.05; } 55% { opacity: .55; scale: .8; } } @keyframes siteShimmer { 0% { background-position: 100% 0; } 50%, 100% { background-position: 0% 0; } } @media (min-width: 901px) { .site-motion .site-story.is-live .site-chapter:not(.is-active) { opacity: .38; } } /* ---------- LINE 官方帳號浮動鈕（全站右下角；說明氣泡：桌機滑過或鍵盤聚焦，手機載入後短暫顯示一次）---------- */ .site-line-fab { position: fixed; z-index: 35; right: max(18px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--line-green); color: #fff; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-tap-highlight-color: transparent; transition: scale .3s var(--ease-out), box-shadow .3s, opacity .3s, visibility .3s; } .site-line-fab__mark { width: 34px; height: 34px; display: block; } .site-line-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line-green); opacity: 0; pointer-events: none; } .site-line-fab__tip { position: absolute; right: calc(100% + 14px); top: 50%; padding: 9px 15px; white-space: nowrap; background: var(--l-bg-2); color: var(--l-ink); border: 1px solid var(--l-line); box-shadow: var(--shadow); font-family: var(--serif-tc); font-size: 15.5px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; translate: 14px -50%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, translate .45s var(--ease), visibility 0s linear .3s; } .site-line-fab__tip::after { content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: inherit; border-top: 1px solid var(--l-line); border-right: 1px solid var(--l-line); rotate: 45deg; } .site-line-fab:focus-visible { outline: 3px solid var(--l-ink); outline-offset: 3px; } html[data-theme="dark"] .site-line-fab:focus-visible { outline-color: var(--l-accent); } .site-line-fab:focus-visible .site-line-fab__tip, .site-line-fab.is-tip .site-line-fab__tip { opacity: 1; visibility: visible; translate: 0 -50%; transition: opacity .3s ease, translate .45s var(--ease), visibility 0s; } @media (hover: hover) { .site-line-fab:hover { scale: 1.07; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .22); } .site-line-fab:hover .site-line-fab__tip { opacity: 1; visibility: visible; translate: 0 -50%; transition: opacity .3s ease, translate .45s var(--ease), visibility 0s; } } .site-line-fab:active { scale: .94; } html.is-menu-open .site-line-fab, .site-line-fab.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; } /* is-tucked：手機上表單或空狀態的主要按鈕在畫面內，不蓋住（site.js） */ @media (prefers-reduced-motion: no-preference) { .site-line-fab { animation: siteFabIn .8s var(--ease) 1s both; } .site-line-fab::before { animation: siteFabPulse 2.4s ease-out 2.4s 3; } /* 只提醒三次就停 */ } @keyframes siteFabIn { from { opacity: 0; scale: .5; } } @keyframes siteFabPulse { 0% { opacity: .7; scale: 1; } 70%, 100% { opacity: 0; scale: 1.7; } } @media (max-width: 860px) { .site-line-fab { width: 52px; height: 52px; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); } .site-line-fab__mark { width: 30px; height: 30px; } .site-line-fab__tip { font-size: 15px; padding: 8px 12px; right: calc(100% + 10px); } } @media print { .site-line-fab { display: none !important; } } /* ---------- 響應式 ---------- */ /* 導覽項目多（隱形 MATCH 開啟時再多一項）：窄桌機先收掉圓點與登入文字，不讓頁首超出 */ @media (max-width: 1440px) { .site-header__nav-link { font-size: 15px; letter-spacing: .05em; } .site-header__nav-list { gap: clamp(10px, 1.2vw, 20px); } } @media (max-width: 1320px) { .site-header__login-text { display: none; } .site-header__login { min-width: 44px; justify-content: center; } } @media (max-width: 1180px) { .site-corner { display: none; } .site-hero__caption { display: none; } .site-hero__copy { width: min(640px, 64vw); } .site-person--man { left: -12%; } .site-person--woman { right: -10%; } html[data-theme="green"] .site-person--woman { right: -14%; } /* 選單收進右側面板 */ .site-header__menu { display: grid; } .site-header__login { margin-left: auto; } .site-header__login-text { display: none; } .site-header__login { min-width: 44px; justify-content: center; } .site-header__nav { position: fixed; inset: 0; z-index: 60; margin: 0; display: block; visibility: hidden; background: rgba(0, 0, 0, 0); transition: background-color .35s, visibility 0s linear .45s; } .site-header.is-open .site-header__nav { visibility: visible; background: rgba(0, 0, 0, .45); transition: background-color .35s; } .site-header__panel { --s-ink: var(--l-ink); --s-ink-2: var(--l-ink-2); position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 26px 28px calc(28px + env(safe-area-inset-bottom)); background: var(--band-paper); background-color: var(--l-bg-2); border-left: 1px solid var(--header-line); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .45s var(--ease-out); } .site-header.is-open .site-header__panel { transform: none; } .site-header__panel.is-dragging { transition: none; } .site-header__panel-kicker { display: block; margin: 0 0 10px; font-family: var(--latin); font-style: italic; font-size: 22px; color: var(--l-accent); } .site-header__nav-list { flex-direction: column; align-items: stretch; gap: 0; } .site-header__nav-link { display: flex; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--l-hair-soft); font-size: 18px; letter-spacing: .1em; white-space: normal; color: var(--l-ink); } .site-header__nav-link::after { display: none; } .site-header__nav-link[aria-current="page"] { color: var(--l-accent); font-weight: 600; } .site-header__panel-foot { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } .site-header__panel-login { display: flex; align-items: center; min-height: 48px; font-family: var(--serif-tc); font-size: 17px; letter-spacing: .1em; color: var(--l-accent); text-decoration: none; } .site-header__panel-cta { width: 100%; min-width: 0; } .site-header__panel-label { margin: 8px 0 8px; font-family: var(--serif-tc); font-size: 15px; letter-spacing: .14em; color: var(--l-ink-2); } .site-header__panel-motto { margin: 8px 0 0; font-family: var(--latin); font-style: italic; font-size: 18px; color: var(--l-accent); } .site-switch.site-switch--panel { --seg-w: 44px; --seg-h: 44px; margin-left: 4px; } /* 選單面板內：每段都是 44px 點擊區（手機頁首的 28×26 不適用） */ html.is-menu-open { overflow: hidden; } .site-header.is-open .site-header__menu { position: relative; z-index: 61; } } @media (max-width: 1100px) { .site-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-cards--single { grid-template-columns: minmax(0, 620px); } .site-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-split--faq { grid-template-columns: 1fr; } .site-split--faq .site-split__media { position: static; } .site-plan, .site-case { grid-template-columns: 1fr; } .site-plan__media, .site-case__photo { min-height: 0; aspect-ratio: 16 / 9; } .site-footer__nav { grid-template-columns: 1fr 1fr; } .site-footer__col:first-child { grid-column: 1 / -1; } .site-footer__col:first-child .site-footer__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .site-split, .site-split--media-right { grid-template-columns: 1fr; gap: 56px; } .site-split--media-right .site-split__media { order: 0; } .site-split__media .site-arch { width: min(100% - 26px, 420px); aspect-ratio: 4 / 4.6; } .site-head--left { text-align: center; } .site-head--left .site-title { text-indent: .1em; } .site-head--left .site-vrule { margin-left: auto; margin-right: auto; } .site-head--left .site-divider { margin-left: auto; transform-origin: center; background: linear-gradient(90deg, transparent, var(--s-line) 30%, var(--s-line) 70%, transparent); } .site-head--left .site-divider::after { left: 50%; } .site-head--left .site-lead { margin: 0 auto; } .site-manifesto__actions { justify-content: center; } .site-manifesto__en { text-align: center; } .site-story { grid-template-columns: 1fr; } .site-story__chapters { width: 100%; max-width: 560px; margin: 0 auto; } .site-story__stage { display: none; } .site-chapter { min-height: 0; padding: 48px 0; display: grid; grid-template-columns: minmax(0, 1fr); } .site-chapter + .site-chapter { border-top: 0; } .site-chapter__media { display: block; width: min(100% - 26px, 420px); aspect-ratio: 4 / 4.2; margin: 13px auto 34px; } .site-chapter__media img { object-position: 50% 62%; } .site-chapter__no { margin-top: -86px; position: relative; z-index: 4; justify-self: center; font-size: 84px; padding: 0 .2em; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); background-image: linear-gradient(105deg, var(--sun), rgba(var(--dust), 1) 40%, #fff 55%, rgba(var(--dust), 1)); } .site-chapter h3 { margin-top: 8px; } .site-timeline::before, .site-timeline__fill { left: 37px; } .site-tl { grid-template-columns: 74px minmax(0, 1fr); column-gap: 20px; align-items: start; } .site-tl__no { grid-column: 1; grid-row: 1 / span 2; } .site-tl:nth-child(n) .site-tl__media { grid-column: 2; grid-row: 1; margin-bottom: 20px; } .site-tl:nth-child(n) .site-tl__copy { grid-column: 2; grid-row: 2; text-align: left; } } @media (max-width: 860px) { :root { --header-h: 64px; --site-slide: 36px; } .site-header { --header-shrink: 8px; --header-scale: .875; } .site-header__brand { --logo-pad-y: 9px; box-sizing: border-box; height: 52px; padding: 9px 0; } /* Logo 仍 34px 高；收窄（×.86）後點擊區也有 44px */ .site-header__brand-text { line-height: 34px; font-size: 20px; } .site-header__inner { gap: 10px; } .site-switch { --seg-w: 28px; --seg-h: 26px; } .site-switch__btn::after { display: none; } .site-footer { padding-bottom: 88px; } /* 首屏：文案在上，兩人並排相望，按鈕在下 */ .site-hero { --stage-h: clamp(290px, 80vw, 480px); height: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px 32px; } .site-hero__copy { display: contents; } .site-hero__copy > .site-hero__rule { display: none; } .site-hero__stage { order: 2; align-self: stretch; position: relative; height: var(--stage-h); margin: 8px -16px 0; } .site-hero__ctas { order: 3; margin-top: 4px; position: relative; z-index: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; } .site-hero__ctas::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: -10px; bottom: -40px; background: rgb(var(--veil)); } .site-hero__ctas .site-btn { min-width: 0; width: 100%; } .site-hero__brand { margin-top: 0; } .site-hero__brand, .site-hero__title, .site-hero__tagline, .site-hero__subtitle, .site-hero__divider { position: relative; z-index: 3; } .site-hero__title { font-size: min(9.4vw, 52px); letter-spacing: .06em; text-indent: .06em; } .site-hero__subtitle { letter-spacing: .08em; font-size: min(4.5vw, 22px); } .site-person--man { height: 100%; left: calc(var(--stage-h) * -.225); } .site-person--woman { height: 97.6%; right: calc(var(--stage-h) * -.1); } html[data-theme="green"] .site-person--man { height: 105%; bottom: -17.3%; left: calc(var(--stage-h) * -.25); } html[data-theme="green"] .site-person--woman { height: 89.3%; right: calc(var(--stage-h) * -.2); } .site-hero::after { display: none; } .site-hero__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 2; background: linear-gradient(180deg, rgba(var(--veil), 0), rgb(var(--veil))); } /* 手機標題幾乎滿版：弧線只留在兩側邊緣，不穿過文字 */ .site-hero__arc--a { width: 46vw; left: -38vw; top: 1%; } .site-hero__arc--b { width: 46vw; right: -38vw; top: 3%; } .site-hero__arc--c { display: none; } .site-hero__veil { background: linear-gradient(180deg, rgba(var(--veil), .88), rgba(var(--veil), .72) 55%, rgba(var(--veil), .2)); } .site-pagehead__arc--a { width: 46vw; min-width: 0; left: -34vw; top: 4%; } .site-pagehead__arc--b { width: 46vw; min-width: 0; right: -34vw; top: 18%; } .site-hero__foot { display: none; } .site-steps, .site-steps--3 { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; } .site-steps::before, .site-steps--3::before { left: 37px; right: auto; top: 37px; bottom: 37px; width: 1px; height: auto; transform-origin: top; } .site-motion .site-steps:not(.site-in)::before { transform: scaleY(0); } .site-step { display: grid; grid-template-columns: 74px 1fr; column-gap: 22px; text-align: left; padding-bottom: 34px; } .site-step:last-child { padding-bottom: 0; } .site-step__no { grid-row: 1 / span 2; margin: 0; } .site-step h3 { align-self: end; margin: 6px 0 4px; } .site-step p { margin: 0; max-width: none; } .site-journey { max-width: 560px; } .site-thread { left: 31px; } .site-gate { grid-template-columns: 62px minmax(0, 1fr); min-height: 78px; } .site-medal { grid-column: 1; } .site-gate--l .site-gate__text, .site-gate--r .site-gate__text { grid-column: 2; text-align: left; padding: 0 0 0 22px; } .site-gate--l .site-gate__name::after { display: none; } .site-gate--l .site-gate__name::before { content: ""; display: inline-block; width: 22px; height: 1px; vertical-align: middle; background: var(--s-line); opacity: .6; margin-right: 14px; } .site-gate--r .site-gate__name::before { width: 22px; margin-right: 14px; } .site-act__title { margin: 0 0 22px; align-items: flex-start; text-indent: 0; padding: 8px 20px 10px; } .site-journey__end { align-items: flex-start; text-align: left; } .site-endring { width: 62px; height: 62px; padding-top: 12px; outline-offset: 6px; } .site-endring .site-num { font-size: 34px; } .site-journey__end p { margin-top: 20px; font-size: 17px; } .site-stats, .site-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-stat:nth-child(odd) { border-left: 0; } .site-stat:nth-child(n + 3) { border-top: 1px solid var(--s-hair-soft); } .site-stats--3 .site-stat:last-child { grid-column: 1 / -1; } .site-join { padding-top: 72px; } .site-join::before { background: linear-gradient(180deg, rgba(var(--veil), .5), rgba(var(--veil), .86) 36%, rgba(var(--veil), .92)); } /* 手機文字寬到兩側，遮罩改上下漸層才夠清楚 */ .site-join__stage { grid-template-columns: 1fr 1fr; gap: 0 28px; } .site-join__copy { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding: 48px 0 72px; } .site-portal { grid-row: 1; } .site-portal__frame { width: min(100%, 230px); } .site-join__arc--a { width: 70vw; left: -40vw; top: -4%; } .site-join__arc--b { width: 70vw; right: -44vw; top: 10%; } } @media (max-width: 640px) { .site-cards, .site-cards--2 { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } .site-cards--4 { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } .site-grid, .site-grid--3 { grid-template-columns: 1fr; } .site-profiles { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } .article-grid { grid-template-columns: 1fr; } .site-qa summary, .accordion-trigger { font-size: 18px; gap: 14px; padding: 22px 2px; } .accordion-answer { padding: 0 8px 26px 2px; } .site-qa__a p { padding: 0 8px 26px 2px; } .site-qa__a ul, .site-qa__a ol { padding: 0 8px 26px 22px; } .site-quotes__mark { font-size: 132px; } .site-quote__tag { font-size: 14px; letter-spacing: .26em; } .site-facts > div { grid-template-columns: 5.4em 1fr; gap: 12px; } .site-facts--boxed { padding: 6px 18px; } .site-film { aspect-ratio: 4 / 3.2; outline-offset: 8px; margin-left: 8px; margin-right: 8px; } .site-film img { object-position: 52% 50%; } .site-footer__nav { grid-template-columns: 1fr 1fr; } .site-footer__col:first-child .site-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__ring { width: min(340px, 92%); bottom: 58px; } .site-footer__crest:has(.site-footer__actions) .site-footer__ring { bottom: 134px; } /* 圓弧只框 Logo 與品牌名，不穿過標語和按鈕 */ .site-footer__bottom { flex-direction: column; align-items: flex-start; } .match-field-list, .matchmaker-descent__fields { grid-template-columns: 1fr; } .match-choice { display: flex; } .choice-pill { flex: 1; min-width: 0; } .match-form-submit, .matchmaker-descent__cta { min-width: 0; width: 100%; } .site-btn { min-width: 0; } .site-actions .site-btn { flex: 1 1 100%; } .site-slider__nav { min-width: 72px; padding: 0 12px; } .site-table-scroll { margin-left: -4px; margin-right: -4px; } } @media (max-width: 560px) { body { font-size: 16px; } .site-title { letter-spacing: .14em; text-indent: .14em; } } @media (max-width: 420px) { .site-footer__crest:has(.site-footer__actions) .site-footer__ring { bottom: 194px; } } @media (max-width: 400px) { .site-statement { font-size: 23px; letter-spacing: .06em; } .site-quotes__ctrl { gap: 10px; } .site-join__kicker { letter-spacing: .08em; text-indent: .08em; } } /* 極窄螢幕：登入收進選單，頁首留給 Logo、配色與選單鈕 */ @media (max-width: 349px) { .site-header__login { display: none; } .site-switch--header { margin-left: auto; } } /* 減少動態：不藏任何內容、不跑循環、不倒數輪播、沒有傾斜與視差 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .site-sheen, .site-ripple, .site-glare, .site-spot, .site-lip, .site-dust { display: none !important; } .site-tilted { transform: none !important; } :is(.site-header__brand, .site-footer__logo, .site-join__logo)::after { display: none; } .site-pre, .site-pre.site-in { opacity: 1 !important; animation: none !important; } .site-split-chars .site-ch { animation: none !important; } .site-veil { display: none; } .site-unveil img, .site-story__arch img { animation: none !important; transition: none !important; } .site-line-fab, .site-line-fab::before { animation: none !important; } .site-card__face { transform: none !important; } .site-card__face::after { display: none; } .site-quotes.is-carousel .site-quote { transition: none; filter: none; translate: none; } .site-par { transform: none !important; } .site-arc :is(circle, path) { stroke-dashoffset: 0 !important; animation: none !important; } .site-slider__track, .site-slider__viewport { transition: none; } * { transition-duration: .01ms !important; } }