/* ==========================================================================
Splash 開場動畫 — 白底 → LOGO 淡入 → LOGO 淡出+文字淡入 → 全部淡出
總長 5.9 秒。同 session 只跑一次,可跳過。
========================================================================== */
.splash {
position: fixed; inset: 0; z-index: 99999;
background: #FFFFFF;
display: grid; place-items: center;
cursor: pointer;
animation: splashOverlay 5.9s ease-in-out forwards;
}
.splash.splash-out {
animation: splashOut 0.45s ease-out forwards !important;
}
.splash-logo, .splash-text {
grid-column: 1; grid-row: 1;
text-align: center;
}
.splash-logo {
max-width: 340px; width: 60%; height: auto;
opacity: 0;
animation: splashLogo 5.9s ease-in-out forwards;
}
.splash-text {
opacity: 0;
animation: splashText 5.9s ease-in-out forwards;
padding: 0 24px;
}
.splash-headline {
font-size: clamp(30px, 6vw, 52px);
font-weight: 900;
letter-spacing: -0.02em;
color: #1A1A18;
line-height: 1.25;
margin-bottom: 20px;
text-align: center;
}
/* 「你呢?」— 相對再大一倍、品牌金橘、獨立一行
半形「?」佔位造成視覺重心偏右,用 transform 往左補償一點才是視覺置中 */
.splash-you {
display: block;
font-size: 2.1em;
color: #E89B2C;
font-weight: 900;
line-height: 1;
margin-top: 18px;
letter-spacing: -0.02em;
transform: translateX(-0.18em);
}
.splash-sub {
font-size: clamp(15px, 2.5vw, 18px);
color: #666663;
letter-spacing: 0.05em;
font-weight: 500;
}
.splash-skip {
position: absolute; top: 22px; right: 22px;
background: transparent; border: 1px solid #D9D6C9;
color: #8A8A82; padding: 6px 14px;
font-size: 12px; font-weight: 700;
font-family: inherit; cursor: pointer;
opacity: 0;
animation: splashSkipFade 1s ease-out 1.4s forwards;
transition: color 0.15s, border-color 0.15s;
letter-spacing: 0.05em;
}
.splash-skip:hover { color: #1A1A18; border-color: #1A1A18; }
/* Overlay 本身:5.9s 內都可見,最後 10% 淡出 */
@keyframes splashOverlay {
0%, 90% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* LOGO:5% 起淡入 → 17% 完全顯示 → 42% 開始淡出 → 56% 消失 */
@keyframes splashLogo {
0%, 5% { opacity: 0; transform: scale(0.94); }
17%, 42% { opacity: 1; transform: scale(1); }
56%, 100% { opacity: 0; transform: scale(1); }
}
/* 文字:42% 起淡入(跟 LOGO 交叉)→ 56% 完全顯示 → 90% 開始淡出 */
@keyframes splashText {
0%, 42% { opacity: 0; transform: translateY(10px); }
56%, 90% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(0); }
}
@keyframes splashSkipFade { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
.splash { animation: splashOut 0.3s ease-out forwards; }
}
/* ==========================================================================
AX Academy — Design System
淺色 SaaS / 電商風 · 五級語意配色 · 虎智金橘品牌主色
字型改由各 HTML 的 + 載入(平行下載，減少 FOUT)
========================================================================== */
:root {
/* Base */
--bg: #FFFFFF;
--bg-soft: #FAFAF7;
--bg-card: #FFFFFF;
--ink: #1A1A18;
--ink-2: #55554F;
--ink-3: #8A8A82;
--line: #ECECE6;
--line-strong: #D6D6CE;
/* Brand (TigerAI gold) */
--brand: #E89B2C;
--brand-hover: #D08820;
--brand-soft: #FFF6E6;
/* 五級語意色 */
--l1: #6E6D67; --l1-bg: #F1EFE8;
--l2: #2F7FD1; --l2-bg: #E6F1FB;
--l3: #5C9020; --l3-bg: #EAF3DE;
--l4: #C07A12; --l4-bg: #FAEEDA;
--l5: #6E66CF; --l5-bg: #EEEDFE;
/* feedback */
--ok: #16A34A;
--warn: #C07A12;
--danger: #DC2626;
/* type */
--font: 'Noto Sans TC', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--font-en: 'Manrope', 'Noto Sans TC', sans-serif;
/* spacing */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
/* radius */
--r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;
/* shadow */
--sh-sm: 0 1px 3px rgba(20,20,16,0.06);
--sh-md: 0 6px 20px rgba(20,20,16,0.07);
--sh-lg: 0 16px 48px rgba(20,20,16,0.10);
--maxw: 1080px;
--nav-h: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
padding-top: var(--nav-h);
overflow-x: hidden;
max-width: 100vw;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.section { padding: var(--s9) 0; }
@media (max-width: 700px) { .section { padding: var(--s8) 0; } }
/* CJK 不在詞中斷 */
h1, h2, h3, .nobreak { word-break: keep-all; overflow-wrap: break-word; }
/* ==========================================================================
Top nav
========================================================================== */
.nav {
position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
z-index: 100;
}
.nav-inner {
max-width: var(--maxw); margin: 0 auto; height: 100%;
padding: 0 var(--s5);
display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.brand .mark {
width: 30px; height: 30px; border-radius: 0;
background: var(--brand); color: #fff;
display: grid; place-items: center; font-family: var(--font-en); font-weight: 800; font-size: 15px;
}
.brand .ax { color: var(--ink); }
/* 協會 logo(AX 測驗系統用)*/
.brand-logo { display: flex; align-items: center; height: 100%; }
.brand-logo img { height: 40px; width: auto; display: block; }
.quiz-brand { font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; margin-right: var(--s4); }
@media (max-width: 600px) {
.brand-logo img { height: 32px; }
.quiz-brand { font-size: 12px; margin-right: var(--s2); }
}
.nav-links { display: flex; align-items: center; gap: var(--s5); }
.nav-links a:not(.btn) { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.nav-links a:not(.btn):hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }
/* Nav 分享按鈕 —— ghost 樣式,不搶主 CTA */
.nav-share {
display: inline-flex; align-items: center; gap: 6px;
background: transparent;
border: 1.5px solid var(--line-strong);
color: var(--ink-2);
padding: 6px 12px;
font-size: 13px; font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-share:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav-share svg { flex-shrink: 0; }
/* 手機:分享按鈕只留 icon 不留文字,節省 nav 寬度避免擠爆 */
@media (max-width: 500px) {
.nav-share { padding: 8px 10px; }
.nav-share span { display: none; }
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
padding: 12px 22px; border-radius: 0;
font-weight: 700; font-size: 15px; transition: background 0.18s, border-color 0.18s, color 0.18s; white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
/* ==========================================================================
Hero
========================================================================== */
.hero { padding: var(--s10) 0 var(--s9); }
@media (max-width: 700px) { .hero { padding: var(--s8) 0; } }
.hero-eyebrow {
display: inline-block; font-family: var(--font-en); font-size: 17px; font-weight: 700;
letter-spacing: 0.02em; color: var(--brand); margin-bottom: var(--s4);
}
.hero h1 {
font-size: clamp(34px, 6vw, 60px); font-weight: 900; line-height: 1.12;
letter-spacing: -0.02em; margin-bottom: var(--s5);
}
.hero h1 .hl { color: var(--brand); }
/* 打字機:.typer 顯示可變文字 + 後面接一個閃爍游標 */
.typer {
display: inline-block;
min-width: 0.5em;
}
.typer::after {
content: '';
display: inline-block;
width: 3px;
height: 0.85em;
margin-left: 4px;
background: var(--brand);
vertical-align: -0.05em;
animation: typerCaret 0.7s steps(2, end) infinite;
}
@keyframes typerCaret {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.typer::after { animation: none; }
}
.hero-sub { font-size: clamp(16px, 2.4vw, 21px); color: var(--ink-2); max-width: 680px; margin-bottom: var(--s7); line-height: 1.6; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
/* ==========================================================================
Section primitives
========================================================================== */
.kicker { font-family: var(--font-en); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-3); margin-bottom: var(--s3); }
.section h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--s4); }
.section .lead { font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); max-width: 720px; margin-bottom: var(--s6); }
.bg-soft { background: var(--bg-soft); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
/* big punchy statement block */
.statement { font-size: clamp(22px, 3.6vw, 34px); font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; }
.statement .muted { color: var(--ink-3); }
.statement .hl { color: var(--brand); }
/* ==========================================================================
Five-level row
========================================================================== */
.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 820px) { .levels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .levels { grid-template-columns: 1fr; } }
.lvl-card {
display: block; border-radius: var(--r-lg); padding: var(--s5) var(--s4);
border: 1.5px solid transparent; transition: transform 0.15s, box-shadow 0.15s;
animation: lvlPulse 3s ease-in-out infinite;
transform-origin: center center;
will-change: transform;
}
/* 五卡錯開延遲 → L1 先起、依序 L2 L3 L4 L5,跑完休息再輪一次
間隔 0.35s(比每張脈動時間長)確保 L1→L2→L3→L4→L5 順序清楚不重疊 */
.levels .lvl-card:nth-child(1) { animation-delay: 0s; }
.levels .lvl-card:nth-child(2) { animation-delay: 0.35s; }
.levels .lvl-card:nth-child(3) { animation-delay: 0.70s; }
.levels .lvl-card:nth-child(4) { animation-delay: 1.05s; }
.levels .lvl-card:nth-child(5) { animation-delay: 1.40s; }
.lvl-card:hover {
transform: translateY(-3px) scale(1);
box-shadow: var(--sh-md);
animation-play-state: paused;
}
/* 週期 3.2s;peak 在 9%(≈290ms 起、580ms 縮回)。剩下 2.6s 是全體休息,節奏清楚 */
@keyframes lvlPulse {
0%, 18%, 100% { transform: scale(1); }
9% { transform: scale(1.06); }
}
.lvl-card { animation-duration: 3.2s; }
@media (prefers-reduced-motion: reduce) {
.lvl-card { animation: none; }
}
.lvl-card .lv-no { font-family: var(--font-en); font-size: 12px; font-weight: 700; opacity: 0.7; }
.lvl-card .lv-name { font-size: 17px; font-weight: 800; margin-top: var(--s1); line-height: 1.3; }
.lvl-card .lv-tag { font-size: 13px; margin-top: var(--s2); opacity: 0.85; }
/* 五級卡片 — 金橘色系,L1 最淺平面 → L5 完整金屬金牌(漸進金屬光) */
/* L1 — 最淺,純平面 */
.lv1 {
background: linear-gradient(135deg, #FFF8EA 0%, #FFEFCF 100%);
color: #A26E28;
border: 1px solid rgba(232,155,44,0.15);
}
/* L2 — 稍深,純平面 */
.lv2 {
background: linear-gradient(135deg, #FFEBC2 0%, #FCDBA0 100%);
color: #8A5A18;
border: 1px solid rgba(232,155,44,0.25);
}
/* L3 — 加入淡淡光澤 */
.lv3 {
background:
radial-gradient(circle at 28% 22%, rgba(255,255,255,0.4) 0%, transparent 55%),
linear-gradient(135deg, #FBD07C 0%, #F0B850 100%);
color: #5C3D08;
border: 1px solid rgba(184,120,32,0.35);
}
/* L4 — 明顯金屬感過渡 */
.lv4 {
background:
radial-gradient(circle at 28% 22%, rgba(255,255,255,0.5) 0%, transparent 55%),
linear-gradient(135deg, #F4C842 0%, #C4922B 60%, #A47825 100%);
color: #2E1B00;
border: 1px solid rgba(139,90,10,0.5);
}
.lv4 .lv-no {
color: rgba(46,27,0,0.7);
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
/* L5 — 尊爵深金(一般線性漸層,跟 L1-L4 同風格但最深)*/
.lv5 {
background: linear-gradient(135deg, #FFD84A 0%, #C4922B 55%, #8B5A00 100%);
color: #2E1B00;
border: 1px solid #8B5A00;
}
.lv5 .lv-no {
color: rgba(46,27,0,0.75);
}
/* ==========================================================================
Cards / feature grid
========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (max-width: 760px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh-sm); }
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--s2); }
.card p { color: var(--ink-2); font-size: 15px; }
/* ==========================================================================
Subsidy calculator
========================================================================== */
.subsidy {
background: linear-gradient(135deg, var(--brand-soft), #FFFCF5);
border: 1px solid rgba(232,155,44,0.35); border-radius: var(--r-xl);
padding: var(--s7); box-shadow: var(--sh-md);
}
.subsidy .row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.subsidy input {
flex: 1; min-width: 180px; height: 52px; padding: 0 var(--s4);
border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
font-size: 16px; background: #fff;
}
.subsidy input:focus { outline: none; border-color: var(--brand); }
/* ==========================================================================
Footer
========================================================================== */
/* ==========================================================================
Partners marquee — 淡淡飄在 section 背景層,內容壓在上面
========================================================================== */
.section.has-bg-marquee {
position: relative;
overflow: hidden;
/* 背景色沿用 .bg-soft(頁面下方原色),不再另外覆蓋 */
}
.section.has-bg-marquee > .wrap {
position: relative;
z-index: 1;
}
.section-bg-marquee {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
pointer-events: none;
display: flex; flex-direction: column;
justify-content: space-around;
padding: var(--s5) 0;
}
/* 背景層 logo 白色 100% */
.section-bg-marquee .marquee-item img { filter: brightness(0) invert(1); }
.section-bg-marquee .marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* 統一高度,寬度依原比例(所有 logo 視覺體積相近) */
.section-bg-marquee .marquee-item {
height: 60px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
padding: 0 var(--s3);
}
.section-bg-marquee .marquee-item img {
height: 100%;
max-height: 60px;
width: auto;
display: block;
}
/* 每行不同速度,避免同步呆板 */
.section-bg-marquee .marquee:nth-child(1) .marquee-track { animation-duration: 42s; }
.section-bg-marquee .marquee:nth-child(2) .marquee-track { animation-duration: 58s; }
.section-bg-marquee .marquee:nth-child(3) .marquee-track { animation-duration: 50s; }
.section-bg-marquee .marquee:nth-child(4) .marquee-track { animation-duration: 66s; }
.section-bg-marquee .marquee:nth-child(5) .marquee-track { animation-duration: 46s; }
.section-bg-marquee .marquee:nth-child(6) .marquee-track { animation-duration: 62s; }
.section-bg-marquee .marquee:nth-child(7) .marquee-track { animation-duration: 54s; }
.section-bg-marquee .marquee:nth-child(8) .marquee-track { animation-duration: 70s; }
/* 每行内容重複 3 次,translateX 只走 -33.33% 就無縫 */
.section-bg-marquee .marquee.ltr .marquee-track {
animation-name: bgMarqueeLtr;
}
.section-bg-marquee .marquee.rtl .marquee-track {
animation-name: bgMarqueeRtl;
}
@keyframes bgMarqueeLtr {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); }
}
@keyframes bgMarqueeRtl {
from { transform: translateX(-33.333%); }
to { transform: translateX(0); }
}
.marquee-rows {
display: flex;
flex-direction: column;
gap: var(--s5);
}
.marquee {
overflow: hidden;
position: relative;
/* 兩側柔和淡出遮罩(讓 logo 從邊界進出更自然)*/
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
display: flex;
gap: 72px;
width: max-content;
will-change: transform;
}
.marquee.ltr .marquee-track { animation: marqueeLtr 40s linear infinite; }
.marquee.rtl .marquee-track { animation: marqueeRtl 50s linear infinite; }
@keyframes marqueeLtr {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes marqueeRtl {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.marquee-item {
flex-shrink: 0;
height: 50px;
display: flex; align-items: center; justify-content: center;
opacity: 0.65;
transition: opacity 0.2s;
}
.marquee-item:hover { opacity: 1; }
.marquee-item img {
height: 100%;
max-height: 50px;
width: auto;
display: block;
/* 白色化:對非純白 logo 也能顯示成白色 */
filter: brightness(0) invert(1);
}
@media (max-width: 700px) {
.marquee-track { gap: 48px; }
.marquee-item { height: 36px; }
.marquee-item img { max-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none !important; }
}
/* ==========================================================================
全域 Modal + Form(補助表單、聯絡表單都用)
========================================================================== */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
display: none; align-items: center; justify-content: center;
z-index: 100; padding: var(--s5);
}
.modal-backdrop.open { display: flex; }
.modal {
background: #fff; padding: var(--s7);
max-width: 520px; width: 100%;
max-height: 90vh; overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-close {
background: transparent; border: none;
font-size: 28px; color: var(--ink-3); cursor: pointer;
position: absolute; top: 8px; right: 12px; padding: 0; line-height: 1;
}
.modal h2 { font-size: 24px; font-weight: 800; margin-bottom: var(--s3); }
.form-group { margin-bottom: var(--s4); }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: var(--s2); }
.form-group label .req { color: var(--danger); }
.form-group input,
.form-group textarea {
width: 100%; padding: 12px var(--s3);
border: 1.5px solid var(--line-strong);
font-size: 15px; font-family: inherit;
background: #fff; color: var(--ink);
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--brand); }
.form-group input[readonly] { background: var(--bg-soft); color: var(--ink-2); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 12px; color: var(--ink-3); margin-top: var(--s2); line-height: 1.5; }
.form-actions { display: flex; gap: var(--s3); justify-content: flex-end; margin-top: var(--s5); }
.form-success { background: #F4FAEE; border: 1.5px solid rgba(139,195,74,0.3); padding: var(--s5); text-align: center; }
.form-success h3 { color: #5C9020; margin-bottom: var(--s2); font-size: 20px; font-weight: 800; }
.form-success p { color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s6); margin-top: var(--s9); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s5); } }
.footer h4 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-3); margin-bottom: var(--s3); }
.footer a { display: block; font-size: 14px; color: var(--ink-2); padding: 3px 0; }
.footer a:hover { color: var(--brand); }
.footer-legal { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); }
/* ==========================================================================
測驗(Typeform 格式)
========================================================================== */
.assess-progress { position: fixed; top: var(--nav-h); left: 0; right: 0; height: 2px; background: var(--line); z-index: 99; }
.assess-progress-fill { height: 100%; background: var(--brand); transition: width 0.3s ease; width: 0; }
.assess-stage { min-height: calc(100vh - var(--nav-h)); display: none; }
.assess-stage.active { display: block; }
/* 開場 / 結尾卡 */
.assess-intro { max-width: 640px; margin: 0 auto; padding: var(--s9) var(--s5); text-align: center; }
.assess-intro h1 { font-size: clamp(28px,5vw,44px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.assess-intro p { color: var(--ink-2); font-size: 17px; margin-bottom: var(--s3); }
.assess-meta { display: flex; gap: var(--s5); justify-content: center; flex-wrap: wrap; margin: var(--s6) 0; }
.assess-meta .m { text-align: center; }
.assess-meta .m .v { font-size: 26px; font-weight: 800; color: var(--brand); }
.assess-meta .m .k { font-size: 13px; color: var(--ink-3); }
/* 題目容器：靠上對齊，每題同 Y 起跑 */
.q-area { display: flex; align-items: flex-start; justify-content: center; padding: var(--s7) var(--s5) var(--s8); }
.q-stack { width: 100%; max-width: 720px; }
.q-card { width: 100%; animation: qfade 0.35s ease; }
@keyframes qfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.q-step { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--brand); margin-bottom: var(--s3); }
.q-num { font-size: 14px; color: var(--ink-3); font-weight: 500; margin-bottom: var(--s3); }
.q-title { font-size: clamp(20px,3vw,28px); font-weight: 700; line-height: 1.4; margin-bottom: var(--s4); }
.q-plain { font-size: 18px; color: var(--ink-2); background: var(--brand-soft); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin-bottom: var(--s5); }
.q-note { font-size: 13px; color: var(--ink-3); margin-bottom: var(--s4); }
.q-opts { display: flex; flex-direction: column; gap: var(--s3); }
.q-opt {
display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
padding: var(--s4) var(--s5); background: #fff; border: 1.5px solid var(--line-strong);
border-radius: var(--r-md); font-size: 15px; color: var(--ink); transition: all 0.15s;
}
.q-opt:hover { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--sh-sm); }
.q-opt.selected { border-color: var(--brand); background: #FFF8EC; box-shadow: var(--sh-sm); }
.q-opt .k {
width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-sm);
border: 1px solid var(--line-strong); display: grid; place-items: center;
font-weight: 700; font-size: 14px; color: var(--ink-3);
}
.q-opt.selected .k { background: var(--brand); color: #fff; border-color: var(--brand); }
.q-opt.just .k { animation: pop 0.3s ease; }
@keyframes pop { 40% { transform: scale(1.12); } }
/* Likert 橫排刻度(桌機) */
.q-likert { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s2); }
.q-likert .q-opt { flex-direction: column; gap: var(--s2); text-align: center; padding: var(--s4) var(--s2); }
.q-likert .q-opt .k { width: 32px; height: 32px; }
.q-likert .q-opt .lab { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
@media (max-width: 600px) { .q-likert { grid-template-columns: 1fr; } .q-likert .q-opt { flex-direction: row; text-align: left; } .q-likert .q-opt .lab { font-size: 14px; } }
/* open 開放題 */
.q-open { width: 100%; min-height: 120px; padding: var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); font-family: inherit; font-size: 15px; resize: vertical; }
.q-open:focus { outline: none; border-color: var(--brand); }
/* 倒數條 + 導覽 */
.q-countdown { margin-top: var(--s5); height: 4px; background: var(--line); border-radius: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.q-countdown.active { opacity: 1; }
.q-countdown-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-dim, #B87820), var(--brand)); }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s5); }
.q-hint { font-size: 12px; color: var(--ink-3); }
/* ==========================================================================
AX Report
========================================================================== */
.report-hero { text-align: center; padding: var(--s8) 0 var(--s6); }
.report-hero .lv-badge { display: inline-block; padding: 8px 22px; border-radius: var(--r-pill); font-weight: 800; font-size: 14px; margin-bottom: var(--s4); }
.report-hero h1 { font-size: clamp(28px,5vw,46px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.report-hero .summary { max-width: 680px; margin: 0 auto; color: var(--ink-2); font-size: 16px; }
/* v2.1：個人報告不畫雷達。三條水平長條(觀念/方法論/實作),以「好截圖、好轉傳」為設計目標 */
.dim-bars {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: var(--s6); box-shadow: var(--sh-sm);
display: flex; flex-direction: column; gap: var(--s4);
}
/* 三欄橫排:名字 | 能量條 | 等級,對齊老闆頁 axis-row */
.dim-bar-row {
display: grid;
grid-template-columns: 200px 1fr auto;
align-items: center;
gap: var(--s4);
padding: var(--s3);
border-radius: var(--r-md);
}
.dim-bar-row.weak .dim-bar-lv { color: var(--brand); font-weight: 800; }
.dim-bar-row.l0 { background: #FBF4F4; }
.dim-bar-row.l0 .dim-bar-lv .lv-warn { color: var(--danger); font-weight: 800; }
.dim-bar-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.dim-bar-sub { font-size: 14px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.dim-bar-lv { font-size: 15px; font-weight: 800; color: var(--ink-2); text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
.dim-bar-row { grid-template-columns: 1fr; gap: var(--s2); }
.dim-bar-lv { text-align: left; }
}
/* 能量條 — 固定金色漸層,無閃爍 */
.dim-track {
grid-column: 2;
height: 14px;
background: var(--bg-soft);
border-radius: var(--r-pill);
overflow: hidden;
position: relative;
border: 1px solid var(--line);
}
.dim-fill {
height: 100%;
border-radius: var(--r-pill);
background: linear-gradient(90deg,
#FFDD90 0%,
#F4C842 30%,
var(--brand) 65%,
var(--brand-hover) 100%);
transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow:
0 0 12px rgba(232,155,44,0.28),
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(139,100,20,0.15);
}
/* ==========================================================================
Report Actions Bar — 下載 PDF + 分享
========================================================================== */
.report-actions {
display: flex; justify-content: flex-end; align-items: center; gap: var(--s4);
padding: var(--s3) 0;
margin-bottom: var(--s4);
flex-wrap: wrap;
}
/* 底部(有 CTA):CTA + 箭頭 + icons 整組水平置中 */
.report-actions:has(.ra-cta) {
justify-content: center;
gap: var(--s4);
}
.report-actions:last-child { margin-top: var(--s5); margin-bottom: 0; }
.ra-buttons {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; justify-content: flex-end;
}
@media (max-width: 700px) {
.report-actions:has(.ra-cta) {
display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.report-actions:has(.ra-cta) .ra-cta {
flex-direction: column; gap: 4px; text-align: center;
}
/* 手機箭頭改成往下指(rotate 90 度)*/
.report-actions:has(.ra-cta) .ra-cta-arrow {
transform: rotate(90deg);
width: 60px; height: 30px;
}
.report-actions:has(.ra-cta) .ra-buttons {
justify-content: center;
}
}
.ra-btn {
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--line);
background: #fff;
display: grid; place-items: center;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
color: var(--ink-2);
text-decoration: none;
padding: 0;
position: relative;
}
.ra-btn:hover {
transform: translateY(-2px);
box-shadow: var(--sh-md);
color: #fff;
}
.ra-btn svg { width: 20px; height: 20px; display: block; }
.ra-btn.ra-pdf:hover { background: var(--brand); border-color: var(--brand); }
.ra-btn.ra-line:hover { background: #06C755; border-color: #06C755; }
.ra-btn.ra-ig:hover {
background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
border-color: transparent;
}
.ra-btn.ra-fb:hover { background: #1877F2; border-color: #1877F2; }
.ra-btn.ra-threads:hover { background: #000; border-color: #000; }
.ra-btn.ra-copy:hover { background: var(--ink); border-color: var(--ink); }
.ra-divider {
width: 1px; height: 26px; background: var(--line);
margin: 0 4px;
}
/* CTA:「趕緊找同事來測」+ 手繪箭頭(連貫循環:畫→停→消失→再畫)*/
.ra-cta {
display: flex; align-items: center; gap: var(--s3);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.report-actions.animated .ra-cta {
opacity: 1; transform: translateY(0);
}
.ra-cta-text {
font-size: 26px; font-weight: 900;
letter-spacing: 0.02em;
color: var(--ink);
white-space: nowrap;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.report-actions.animated .ra-cta-text {
opacity: 1; transform: translateX(0);
}
.ra-cta-arrow {
width: 100px; height: 30px;
display: block;
overflow: visible;
}
.ra-cta-arrow-line, .ra-cta-arrow-head {
fill: none;
}
.ra-cta-arrow-line {
stroke-dasharray: 120;
stroke-dashoffset: 120;
}
.ra-cta-arrow-head {
stroke-dasharray: 40;
stroke-dashoffset: 40;
}
/* 循環:0.4s 畫 → 0.4s 停 → 0.4s 消失 → 0.8s 靜止,總週期 2 秒 */
.report-actions.animated .ra-cta-arrow-line {
animation: raArrowLineCycle 2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s infinite;
}
.report-actions.animated .ra-cta-arrow-head {
animation: raArrowHeadCycle 2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s infinite;
}
@keyframes raArrowLineCycle {
0% { stroke-dashoffset: 120; }
22% { stroke-dashoffset: 0; } /* 0.44s 畫完 */
50% { stroke-dashoffset: 0; } /* 停 0.56s */
75% { stroke-dashoffset: -120; } /* 0.5s 消失 */
100% { stroke-dashoffset: -120; } /* 靜止 0.5s */
}
@keyframes raArrowHeadCycle {
0%, 22% { stroke-dashoffset: 40; }
30% { stroke-dashoffset: 0; }
50% { stroke-dashoffset: 0; }
70% { stroke-dashoffset: -40; }
100% { stroke-dashoffset: -40; }
}
@media (max-width: 700px) {
.ra-cta { gap: var(--s2); }
.ra-cta-arrow { width: 100px; height: 40px; }
.ra-cta-text { font-size: 20px; }
}
@media (max-width: 500px) {
.ra-cta { flex-direction: column; align-items: flex-end; gap: 0; margin-bottom: var(--s3); }
.ra-cta-arrow { width: 90px; height: 30px; }
.ra-cta-text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.ra-cta, .ra-cta-text { transition: none; opacity: 1; transform: none; }
.ra-cta-arrow-line, .ra-cta-arrow-head { animation: none; stroke-dashoffset: 0; }
}
/* 全域 snackbar — 底部彈出,不受 nav sticky 影響 */
.ax-toast {
position: fixed;
bottom: 40px;
left: 50%;
transform: translate(-50%, 24px);
background: var(--ink); color: #fff;
padding: 12px 24px;
border-radius: var(--r-md);
font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
box-shadow: 0 6px 24px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.15);
white-space: nowrap;
max-width: 90vw;
overflow: hidden; text-overflow: ellipsis;
}
.ax-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
@media (max-width: 500px) {
.ra-btn { width: 38px; height: 38px; }
.ra-btn svg { width: 18px; height: 18px; }
}
/* ==========================================================================
AX Report v2 — Celebration Hero
========================================================================== */
.rep-hero {
position: relative;
text-align: center;
background: linear-gradient(180deg, var(--brand-soft) 0%, transparent 100%);
overflow: hidden;
/* 滿版:突破 wrap 邊界延伸到螢幕左右 */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: var(--s6);
margin-bottom: var(--s6);
padding-top: var(--s7);
padding-bottom: var(--s6);
padding-left: calc(50vw - 50% + var(--s5));
padding-right: calc(50vw - 50% + var(--s5));
}
/* 雙層漂浮氣泡:上層小圓點 + 底層大半透明氣泡,配上緩慢漂浮動畫 */
.rep-hero .confetti,
.rep-hero .confetti::before,
.rep-hero .confetti::after {
position: absolute; inset: -40px; pointer-events: none;
content: '';
}
/* 底層:大氣泡(半透明色塊、模糊感)緩慢左右漂 */
.rep-hero .confetti::before {
background-image:
radial-gradient(circle 26px at 8% 18%, rgba(232,155,44,0.28) 0%, transparent 70%),
radial-gradient(circle 34px at 92% 22%, rgba(59,130,246,0.22) 0%, transparent 70%),
radial-gradient(circle 20px at 18% 82%, rgba(38,196,184,0.22) 0%, transparent 70%),
radial-gradient(circle 30px at 84% 78%, rgba(236,72,153,0.20) 0%, transparent 70%),
radial-gradient(circle 22px at 50% 6%, rgba(139,92,246,0.20) 0%, transparent 70%),
radial-gradient(circle 18px at 4% 52%, rgba(232,155,44,0.24) 0%, transparent 70%),
radial-gradient(circle 28px at 96% 50%, rgba(139,195,74,0.22) 0%, transparent 70%),
radial-gradient(circle 24px at 40% 92%, rgba(232,155,44,0.26) 0%, transparent 70%),
radial-gradient(circle 20px at 68% 12%, rgba(38,196,184,0.20) 0%, transparent 70%),
radial-gradient(circle 26px at 28% 40%, rgba(236,72,153,0.16) 0%, transparent 70%),
radial-gradient(circle 18px at 74% 44%, rgba(59,130,246,0.18) 0%, transparent 70%),
radial-gradient(circle 22px at 12% 68%, rgba(139,92,246,0.18) 0%, transparent 70%),
radial-gradient(circle 24px at 88% 88%, rgba(232,155,44,0.22) 0%, transparent 70%),
radial-gradient(circle 16px at 56% 60%, rgba(139,195,74,0.20) 0%, transparent 70%);
filter: blur(0.5px);
animation: repFloatSlow 18s ease-in-out infinite;
}
/* 上層:小圓點(實心)較快漂浮 + 輕微旋轉 */
.rep-hero .confetti::after {
background-image:
radial-gradient(circle 3.5px at 6% 26%, var(--brand) 100%, transparent),
radial-gradient(circle 4px at 94% 14%, var(--l3) 100%, transparent),
radial-gradient(circle 3px at 18% 88%, var(--l2) 100%, transparent),
radial-gradient(circle 4.5px at 82% 80%, var(--brand-hover) 100%, transparent),
radial-gradient(circle 3px at 48% 8%, var(--l4) 100%, transparent),
radial-gradient(circle 2.5px at 32% 46%, var(--l5) 100%, transparent),
radial-gradient(circle 3px at 68% 58%, var(--brand) 100%, transparent),
radial-gradient(circle 2.5px at 12% 60%, var(--l3) 100%, transparent),
radial-gradient(circle 3.5px at 88% 36%, var(--l5) 100%, transparent),
radial-gradient(circle 2px at 44% 74%, var(--brand-hover) 100%, transparent),
radial-gradient(circle 3px at 62% 30%, var(--l1) 100%, transparent),
radial-gradient(circle 2.5px at 24% 12%, var(--brand) 100%, transparent),
radial-gradient(circle 4px at 76% 96%, var(--l4) 100%, transparent),
radial-gradient(circle 2.5px at 4% 8%, var(--l2) 100%, transparent),
radial-gradient(circle 3px at 96% 68%, var(--brand-hover) 100%, transparent),
radial-gradient(circle 2px at 38% 22%, var(--l3) 100%, transparent),
radial-gradient(circle 2.5px at 58% 44%, var(--l5) 100%, transparent),
radial-gradient(circle 3px at 8% 40%, var(--l1) 100%, transparent),
radial-gradient(circle 2px at 92% 60%, var(--brand) 100%, transparent),
radial-gradient(circle 3px at 46% 96%, var(--l4) 100%, transparent),
radial-gradient(circle 2px at 72% 76%, var(--brand-hover) 100%, transparent),
radial-gradient(circle 3.5px at 28% 66%, var(--l2) 100%, transparent),
radial-gradient(circle 2.5px at 84% 4%, var(--l5) 100%, transparent),
radial-gradient(circle 3px at 14% 96%, var(--brand) 100%, transparent),
radial-gradient(circle 2px at 54% 18%, var(--l3) 100%, transparent);
opacity: 0.85;
animation: repFloatFast 12s ease-in-out infinite;
}
@keyframes repFloatSlow {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(-14px, 8px, 0) scale(1.05); }
66% { transform: translate3d(12px, -10px, 0) scale(0.98); }
}
@keyframes repFloatFast {
0%, 100% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(8px, -6px, 0); }
50% { transform: translate3d(-6px, 4px, 0); }
75% { transform: translate3d(-4px, -8px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.rep-hero .confetti::before,
.rep-hero .confetti::after { animation: none; }
}
.rep-badge-wrap {
position: relative; width: 132px; height: 132px; margin: 0 auto var(--s5);
perspective: 900px;
}
/* 外框金環 — 靜止(不跟著翻)*/
.rep-badge-ring {
position: absolute; inset: 0;
border-radius: 50%;
background: conic-gradient(from 210deg, var(--brand) 0deg, var(--brand-hover) 90deg, var(--brand) 180deg, var(--brand-hover) 270deg, var(--brand) 360deg);
padding: 4px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 2; pointer-events: none;
}
/* 3D 翻轉容器 — 只包中央白圓,金幣感:突然翻一下 + 停 5 秒 */
.rep-badge-flipper {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
animation: badgeFlip 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.rep-badge-face {
position: absolute; inset: 0;
backface-visibility: hidden;
display: grid; place-items: center;
}
.rep-badge-face.back { transform: rotateY(180deg); }
@keyframes badgeFlip {
0% { transform: rotateY(0); }
12% { transform: rotateY(360deg); } /* 前 0.72 秒完成翻轉 */
100% { transform: rotateY(360deg); } /* 剩 5.28 秒停住 */
}
@media (prefers-reduced-motion: reduce) {
.rep-badge-flipper { animation: none; }
}
.rep-badge {
position: relative; z-index: 1;
width: 108px; height: 108px; border-radius: 50%;
background: #fff;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: var(--font-en); font-weight: 900;
font-size: 32px; letter-spacing: -0.02em;
color: var(--brand);
box-shadow: 0 6px 24px rgba(232, 155, 44, 0.28);
line-height: 1;
}
.rep-badge.l0 { color: var(--ink-3); }
.rep-badge small { display:block; font-size:11px; font-weight:800; letter-spacing:0.1em; color: var(--ink-3); font-family: var(--font-tw); line-height: 1; margin-top: 4px; }
.rep-title-block { position: relative; z-index: 1; }
.rep-tag {
display: inline-block; color: var(--brand-hover);
font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
margin-bottom: var(--s3);
}
.rep-title-block h1 {
font-size: clamp(28px, 4.5vw, 44px);
font-weight: 900; letter-spacing: -0.02em; line-height: 1.2;
margin-bottom: var(--s3);
}
.rep-rank-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 18px; border-radius: var(--r-pill);
background: #fff; border: 1.5px solid var(--brand);
color: var(--brand-hover); font-weight: 800; font-size: 14px;
box-shadow: var(--sh-sm);
margin-bottom: var(--s4);
}
.rep-rank-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.rep-summary {
max-width: 640px; margin: 0 auto;
color: var(--ink-2); font-size: 16px; line-height: 1.75;
}
/* ==========================================================================
Share band(表現好時顯示)
========================================================================== */
.share-band {
background: linear-gradient(180deg, var(--brand-soft) 0%, #FFF9EE 100%);
border: none;
border-radius: var(--r-xl);
padding: var(--s6);
margin: var(--s4) 0 var(--s6);
text-align: center;
}
.share-title { font-size: 22px; font-weight: 900; margin-bottom: var(--s2); color: var(--ink); }
.share-lead { color: var(--ink-2); font-size: 15px; margin-bottom: var(--s5); line-height: 1.7; }
.share-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s5);
margin: 0 auto var(--s5);
max-width: 540px;
box-shadow: var(--sh-sm);
text-align: left;
}
.share-card .sc-kicker { color: var(--brand-hover); font-weight: 800; font-size: 16px; letter-spacing: 0.02em; margin-bottom: 6px; }
.share-card .sc-line { font-size: 17px; font-weight: 800; line-height: 1.5; margin-bottom: var(--s2); }
.share-card .sc-sub { color: var(--ink-3); font-size: 13px; }
.share-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.share-actions button {
padding: 12px 22px; border-radius: var(--r-pill);
border: 1.5px solid var(--ink); background: #fff;
font-weight: 700; font-size: 14px; cursor: pointer;
transition: all 0.15s;
}
.share-actions button:hover { background: var(--ink); color: #fff; }
.share-actions button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.share-actions button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* ==========================================================================
Report section(共用)
========================================================================== */
.rep-section { margin-bottom: var(--s7); }
.rep-kicker {
display: block; color: var(--ink);
font-weight: 800; font-size: 18px; letter-spacing: -0.01em;
margin-bottom: var(--s3);
}
.rep-kicker-sub { color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; font-size: 14px; margin-left: 8px; }
/* Strength / Weakness card — 乾淨簡潔:白底 + 淺灰邊 + 柔和陰影 */
.rep-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s6);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.rep-card h3 { font-size: 22px; font-weight: 800; margin-bottom: var(--s2); }
.rep-card .rc-lead { color: var(--ink-2); font-size: 15px; line-height: 1.75; margin-bottom: var(--s4); }
/* 平面膠囊 metric — 淡橘底 + 品牌色邊 + 品牌色字 */
.rep-card .rc-hero-metric {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 18px;
border-radius: var(--r-pill);
background: var(--brand-soft);
color: var(--brand-hover);
font-weight: 700; font-size: 15px;
border: 1.5px solid rgba(232,155,44,0.35);
margin-bottom: var(--s4);
}
.rep-card .rc-hero-metric .big {
font-size: 20px; font-family: var(--font-en); font-weight: 800;
letter-spacing: -0.01em; line-height: 1; color: var(--brand-hover);
}
.rep-card ul { list-style: none; padding: 0; }
.rep-card li {
padding: var(--s2) 0 var(--s2) var(--s4); position: relative;
font-size: 15px; color: var(--ink); line-height: 1.65;
}
.rep-card li::before {
content: ''; position: absolute; left: 4px; top: 15px;
width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
/* Weakness — 紅色系,一樣簡潔平面 */
.rep-card.weakness .rc-hero-metric {
background: #FBF4F4;
color: var(--danger);
border-color: rgba(195,62,42,0.3);
}
.rep-card.weakness .rc-hero-metric .big { color: var(--danger); }
.rep-card.weakness li::before { background: var(--danger); }
/* Badges grid */
.badges-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--s3);
}
.badge {
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); padding: var(--s4);
display: flex; gap: var(--s3); align-items: flex-start;
transition: all 0.15s;
}
.badge:hover { border-color: var(--brand); }
/* 金屬獎牌質感 — 圓形金屬光,無陰影 */
.badge .b-mark {
flex-shrink: 0; width: 52px; height: 52px;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-en); font-weight: 900;
font-size: 11px; letter-spacing: 0.02em;
position: relative;
border: 1.5px solid #8B6414;
color: #5C3D08;
transition: transform 0.25s ease;
}
.badge:hover .b-mark {
transform: rotate(-6deg) scale(1.08);
}
/* 五種金屬色調(對應 L1-L5,顏色由「銅→古銅→經典金→亮金→王者深金」漸強)*/
.badge.l1 .b-mark {
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.75) 0%, transparent 50%),
conic-gradient(from 45deg,
#E8A96A 0deg, #F5D2A0 60deg, #C48540 130deg, #8A5518 200deg,
#C48540 260deg, #F5D2A0 320deg, #E8A96A 360deg);
border-color: #8A5518;
color: #4A2D06;
}
.badge.l2 .b-mark {
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.75) 0%, transparent 50%),
conic-gradient(from 45deg,
#E8B57C 0deg, #FADCB4 60deg, #C89060 130deg, #8B5A34 200deg,
#C89060 260deg, #FADCB4 320deg, #E8B57C 360deg);
border-color: #8B5A34;
color: #5C381A;
}
.badge.l3 .b-mark {
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.8) 0%, transparent 50%),
conic-gradient(from 45deg,
#F4C842 0deg, #FFE29A 60deg, #C4922B 130deg, #8B6414 200deg,
#C4922B 260deg, #FFE29A 320deg, #F4C842 360deg);
border-color: #8B6414;
color: #5C3D08;
}
.badge.l4 .b-mark {
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85) 0%, transparent 50%),
conic-gradient(from 45deg,
#F5D96A 0deg, #FFF0AC 60deg, #D4AC38 130deg, #9C7A14 200deg,
#D4AC38 260deg, #FFF0AC 320deg, #F5D96A 360deg);
border-color: #9C7A14;
color: #4C3708;
}
.badge.l5 .b-mark {
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9) 0%, transparent 50%),
conic-gradient(from 45deg,
#FFD84A 0deg, #FFEDA0 60deg, #D69410 130deg, #8B5A00 200deg,
#D69410 260deg, #FFEDA0 320deg, #FFD84A 360deg);
border-color: #8B5A00;
color: #4A2E00;
}
/* L5 尊爵版(無陰影)*/
.badge .b-body { flex: 1; min-width: 0; }
.badge .b-name { font-weight: 800; font-size: 14px; margin-bottom: 2px; color: var(--ink); }
.badge .b-desc { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.badges-empty { color: var(--ink-3); font-size: 14px; padding: var(--s4); background: var(--bg-soft); border-radius: var(--r-md); text-align: center; }
/* Benchmark panel */
.bench-card {
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-lg); padding: var(--s6);
box-shadow: var(--sh-sm);
display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s6); align-items: center;
}
@media (max-width: 700px) { .bench-card { grid-template-columns: 1fr; } }
/* 黑金色文字 + 光線滑過(base 靜態、highlight 動態,6 秒週期同 milestone)*/
.bench-num {
text-align: center;
padding: var(--s5) var(--s3);
background: transparent;
border: none;
}
.bench-num .top {
font-family: var(--font-en); font-weight: 900;
font-size: clamp(54px, 9vw, 88px);
letter-spacing: -0.03em; line-height: 1;
color: transparent;
background-image: linear-gradient(135deg,
#2E1B00 0%,
#2E1B00 30%,
#6E4A0A 40%,
#C4922B 46%,
#FFD84A 50%, /* highlight peak(亮金反光)*/
#C4922B 54%,
#6E4A0A 60%,
#2E1B00 70%,
#2E1B00 100%);
background-size: 300% 300%;
background-position: 0% 0%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: benchShine 14s linear infinite;
}
/* 對角線持續移動 — 斜著慢慢跑,無停頓 */
@keyframes benchShine {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
.bench-num .top { animation: none; background-position: 50% 50%; }
}
.bench-num .label {
color: var(--ink-2); font-size: 13px; font-weight: 700;
margin-top: 14px; letter-spacing: 0.08em;
}
/* 下方細金線 accent */
.bench-num::after {
content: '';
display: block;
width: 60px; height: 2px;
margin: 18px auto 0;
background: linear-gradient(90deg, transparent, #8B6414 50%, transparent);
}
/* 六級色階 — 各級 highlight 亮度/色相不同,越強越黃金 */
.bench-num.l0 .top {
background-image: linear-gradient(100deg,
#2A2A26 0%, #2A2A26 30%, #55554F 40%, #B0B0A6 46%, #F5F5EE 50%, #B0B0A6 54%, #55554F 60%, #2A2A26 70%, #2A2A26 100%);
}
.bench-num.l0::after { background: linear-gradient(90deg, transparent, #55554F 50%, transparent); }
.bench-num.l1 .top {
background-image: linear-gradient(100deg,
#2E1B00 0%, #2E1B00 30%, #6E4A18 42%, #B48548 46%, #E8A96A 50%, #B48548 54%, #6E4A18 58%, #2E1B00 70%, #2E1B00 100%);
}
.bench-num.l2 .top {
background-image: linear-gradient(100deg,
#2E1B00 0%, #2E1B00 30%, #7A5028 42%, #D9A870 46%, #F5D2A0 50%, #D9A870 54%, #7A5028 58%, #2E1B00 70%, #2E1B00 100%);
}
.bench-num.l4 .top {
background-image: linear-gradient(100deg,
#2E1B00 0%, #2E1B00 28%, #6E4A0A 38%, #C4A030 44%, #FFF0AC 48%, #FFF9D6 50%, #FFF0AC 52%, #C4A030 56%, #6E4A0A 62%, #2E1B00 72%, #2E1B00 100%);
}
.bench-num.l5 .top {
background-image: linear-gradient(100deg,
#2E1B00 0%, #2E1B00 26%, #6E4A0A 36%, #C4922B 42%, #FFE280 47%, #FFFFFF 50%, #FFE280 53%, #C4922B 58%, #6E4A0A 64%, #2E1B00 74%, #2E1B00 100%);
filter: drop-shadow(0 0 4px rgba(255,216,74,0.25));
}
.bench-num.l5::after {
background: linear-gradient(90deg, transparent, #FFD84A 50%, transparent);
height: 3px; width: 80px;
}
.bench-copy { font-size: 15px; color: var(--ink-2); line-height: 1.75; }
.bench-copy strong { color: var(--brand-hover); }
.bench-note { display: block; margin-top: var(--s3); font-size: 12px; color: var(--ink-3); }
/* Next milestone panel */
.milestone {
background: var(--ink); color: #fff;
border-radius: var(--r-xl); padding: var(--s7);
position: relative;
overflow: hidden;
}
/* 柔和光暈慢慢滑過(不明顯,只在餘光察覺) */
.milestone::before {
content: '';
position: absolute; top: -80%; bottom: -80%;
width: 70%;
left: -70%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255,221,144,0.03) 35%,
rgba(255,231,170,0.10) 50%,
rgba(255,221,144,0.03) 65%,
transparent 100%
);
transform: skewX(-12deg);
filter: blur(6px);
animation: milestoneShine 9s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.milestone > * { position: relative; z-index: 1; }
@keyframes milestoneShine {
0% { left: -70%; }
40% { left: 130%; } /* 前 3.6 秒緩緩滑過 */
100% { left: 130%; } /* 剩 5.4 秒停住 */
}
@media (prefers-reduced-motion: reduce) {
.milestone::before { animation: none; display: none; }
}
.milestone .ms-tag {
display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
background: var(--brand); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.02em;
margin-bottom: var(--s3);
}
.milestone h3 { color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-bottom: var(--s4); line-height: 1.35; }
.milestone .ms-lead { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.75; margin-bottom: var(--s5); }
.milestone .ms-checklist { list-style: none; padding: 0; margin-bottom: var(--s5); }
.milestone .ms-checklist li {
padding: var(--s2) 0 var(--s2) var(--s5); position: relative;
color: rgba(255,255,255,0.9); font-size: 14px; line-height: 1.6;
}
.milestone .ms-checklist li::before {
content: ''; position: absolute; left: 0; top: 15px;
width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
/* ==========================================================================
Utility
========================================================================== */
.mt-2 { margin-top: var(--s2); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); }
.tag {
display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px;
border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-hover);
}
.divider { height: 1px; background: var(--line); margin: var(--s7) 0; }
/* ==========================================================================
PDF 匯出安全模式 — html2canvas 抓 DOM 前套 .pdf-mode,抓完拿掉
解決:vw 全屏跑掉、多層 radial-gradient 空白、background-clip:text 透明、
3D flip 動畫中間狀態被抓到看不到
========================================================================== */
.pdf-mode,
.pdf-mode *,
.pdf-mode *::before,
.pdf-mode *::after {
animation: none !important;
transition: none !important;
}
/* 個人報告 hero:vw 全屏在 html2canvas 上算不出,改回一般 wrap 內展示 */
.pdf-mode .rep-hero {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--s5) !important;
padding-right: var(--s5) !important;
background: linear-gradient(180deg, #FFF6E6 0%, transparent 100%) !important;
}
/* 疊了十幾層 radial-gradient 的裝飾氣泡:PDF 拿掉不影響閱讀 */
.pdf-mode .rep-hero .confetti,
.pdf-mode .rep-hero .confetti::before,
.pdf-mode .rep-hero .confetti::after { display: none !important; }
/* 3D flip badge:歸零到正面,別在半翻狀態被抓 */
.pdf-mode .rep-badge-flipper { transform: none !important; }
.pdf-mode .rep-badge-face.back { display: none !important; }
/* bench-num「前 X%」:background-clip: text + 動畫 → PDF 一律改為實色 */
.pdf-mode .bench-num .top {
background: none !important;
color: #6E4A0A !important;
-webkit-text-fill-color: #6E4A0A !important;
animation: none !important;
}
/* inline-flex pill 在 html2canvas 偶有子元素定位跑掉,改 inline-block 排版更穩 */
.pdf-mode .rep-rank-pill,
.pdf-mode .rep-card .rc-hero-metric {
display: inline-block !important;
}
.pdf-mode .rep-rank-pill .dot {
display: inline-block !important;
vertical-align: middle;
margin-right: 6px;
}
/* 為 PDF 頁面加一點內距,避免內容緊貼紙邊 */
.pdf-mode#stage-report,
.pdf-mode #stage-report {
padding: 8px 4px;
}