/* ========================================================= 2027 Yourator 職涯博覽會 — 企業招商頁 v2 色票依據：2027 招商主視覺（淺色底 × 藍色漸層 × 金色點綴） ＋ yourator.co 實際品牌色 ========================================================= */ /* ========================================================= 版面：扁平、1px 邊框、零陰影、小圓角、1140px 容器、Inter 字體； 色票用 Yourator 自己的藍金（照 2027 主視覺調，每支都做過 WCAG 對比度驗算，註解裡有比例）。 ========================================================= */ :root{ /* 主色：Yourator 品牌藍。這支同時當「白字疊在它上面」（按鈕、勾選、 01/02/03 編號）跟「它疊在白底上面」（連結、標籤、數字單位）用， 兩個方向都得過 WCAG AA 4.5:1。 */ --blue: #006DFF; /* 全頁重點藍（依需求統一為 #006DFF）；白字疊其上約 4.5:1 */ --blue-hover: #0057CC; /* hover 用，更暗，兩個方向對比只會更高 */ --blue-dark: #12306B; /* 深海軍藍（頁尾底色） */ --blue-mid: #1F55B0; /* 主視覺下方色條藍 */ --sky: #6BB2F5; /* 標題漸層亮端 */ --sky-soft: #CDE4FB; --mist: #EAF2FD; --tint: #FBFCFE; /* 全頁統一底色，不做區塊分色 */ --grey-bg: #E4EEFB; /* 淺藍底：btn-light hover 與 hero 無影片時的備援底 */ /* Gold accent（主視覺的星芒與 CTA 膠囊） --gold 是「深色面上的金」：在近白底只有 1.62:1，不可拿來當淺底文字色。 --gold-deep 是「淺底上的金」：壓暗過，兩種淺底都過 AA （近白 #FBFCFE 4.84:1、金色淺底 #FEF7E7 4.66:1）。 */ --gold: #F3C24B; --gold-deep: #F3C24B; /* 依需求由咖啡金改為黃色，與 --gold 同色 */ --gold-soft: #FBEAC0; /* 行動用的亮黃：首屏「索取招商提案」與權益表展開列共用，比 --gold 亮、在影片和淺底上都更跳。 上面一律放深藍字 --ink-on-gold（#102449 疊 #FFC845 約 9.9:1，疊 hover #FFD672 約 11.0:1）。 */ /* 標題色：品牌深藍（對淺底 12.3:1）。亮藍 #006DFF 留給數字、連結、按鈕這些「可以點或要看的重點」， 標題跟可點的東西不是同一支藍 */ --heading: #12306B; --cta-yellow: #FFC845; /* 組與組之間的間距（例如影片→照片輪播、時間軸→通路卡）：全站統一一支，不再各自寫 40／48／63px */ --gap-group: clamp(32px,3.4vw,48px); /* #plans 裡子區塊（行銷方案表／實體攤位／職涯互動區／企業贊助）之間的間距 */ --gap-sub: clamp(32px,3.2vw,48px); --cta-yellow-hover: #FFD672; --gold-tint: #FEF7E7; /* Ink：標題是品牌深藍，不是純黑——這是 KV 上標題的顏色 */ --ink: #006DFF; /* 標題／重點色，約 4.45:1——headings 與 strong 用的都是粗體大字，過 WCAG AA 大字級門檻 */ --body: #46587C; /* 6.9:1 */ --muted: #66768D; /* 4.51:1，全頁小標與註解都吃這支，剛好過 AA */ --line: #DEE8F5; /* 卡片邊框統一用這個 */ --surface:#FFFFFF; /* Type：西文 Inter，中文用系統字（PingFang TC／微軟正黑）， Noto Sans TC 當最後備援，涵蓋沒有系統中文字型的環境。 */ --font-tc: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; --font-en: 'Inter', var(--font-tc); /* Layout：內容容器 1140px；卡片圓角 8px */ --container: 1140px; --radius: 8px; --radius-lg: 12px; --header-h: 72px; /* Dark surface（hero 影片背景與其上的文字層）。 --dark 比 --blue-dark（頁尾）更深：影片畫面亮起來時，這層要壓得住白字。 兩支同一個藍色系，只是深淺不同。 */ --dark: #07142D; --dark-90: rgba(7,20,45,.9); --on-dark: #E8F1FF; /* 深色上的主要文字 */ --on-dark-2: #D2DEF0; /* 次要文字 */ --on-dark-3: #BDD6FF; /* 輔助／強調文字 */ --gold-bright: #FFDA7A; /* 金色 hover */ --gold-text: #F3CE78; /* 深色上的金色文字 */ --ink-on-gold: #102449; /* 金色底上的文字 */ /* Hero 專用（只在 .hero 內使用；不改 --on-dark*，那兩支 header 深色狀態的導覽文字還在用）。 文字用純白＋白的 alpha，而不是另一支 off-white：alpha 白會透出底下實拍的色調， 次要文字永遠跟背景同調、不會偏藍；#D2DEF0 那種固定藍灰在背景偏暖時會打架。 */ /* Hero 是全幅舞台，容器比 1140 內容欄寬。這支同時給 header 用： 首屏 logo 左緣與 H1 左緣必須對齊，否則 1440 寬時 H1 貼在視窗邊 24px、logo 卻在 174px， 看起來像兩個版面。header 比下面 1140 的內容區寬是常見做法。 --edge 是兩者共用的左右內距：小螢幕 24px、大螢幕最多 48px。 */ --hero-container: 1480px; --edge: clamp(24px,3vw,48px); --hero-gap-s: clamp(14px,1.4vw,20px); /* 文字版 H1 的下緣 */ --hero-gap-xs: 10px; /* 同一組裡的行距：標籤→數字、數字→數字標籤 */ --hero-gap-m: clamp(24px,2.4vw,36px); /* 組與組：標準字圖 → 成效數字 → CTA */ --hero-fg: #FFFFFF; /* 首屏文字（文字版 H1）；標準字圖本身是白字 */ --hero-fg-2: rgba(255,255,255,.86); /* 次要：成效數字的標籤 */ --hero-fg-3: rgba(255,255,255,.62); /* 輔助：保留給未來的極小註解 */ /* Shadows：卡片是「零陰影＋1px 邊框」，不靠陰影撐立體感（沿用 v6）。 --sh-sm/md/lg 留給極少數還需要浮起來的東西（表單卡、sticky header）。 陰影顏色從中性黑換成品牌藍的低透明度，跟淺藍底不會打架。 */ --sh-sm: 0 1px 3px rgba(22,48,107,.07); --sh-md: 0 4px 16px rgba(22,48,107,.09); --sh-lg: 0 12px 32px rgba(22,48,107,.13); --sh-blue: 0 8px 20px rgba(0,109,255,.22); --sh-gold: 0 8px 20px rgba(200,146,42,.22); /* 卡片一律零陰影，靠 1px 邊框定義邊界（沿用 v6） */ --sh-card: none; --sh-card-hov: 0 4px 16px rgba(22,48,107,.10); --line-card: #DEE8F5; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font-tc);font-size:16px;line-height:1.8; color:var(--body);background:var(--tint); -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* font-weight:900 是宣告值，但中文字體（PingFang TC）最重只到 Semibold(600)， 實際渲染吃不到 900，視覺上不夠粗；疊一層極細的文字描邊把筆畫撐胖， 在有真正 900 字重的西文字型上也不會太過頭。 */ h1,h2,h3,h4{ color:var(--heading);margin:0;line-height:1.35;font-weight:900;letter-spacing:-.01em; -webkit-text-stroke:.5px currentColor; text-wrap:balance; /* 標題各行長度平均，不會最後一行只剩一兩個字 */ } p{margin:0} /* 內文避免孤字：瀏覽器會自動調整換行，讓最後一行不只剩一個字或一個標點 */ p,li,dd,blockquote,figcaption,.dash-foot{text-wrap:pretty} /* 不可拆開的詞組（日期、時間、地名）包一層 .nobr，只在詞組之間換行 */ .nobr{white-space:nowrap} /* 原本用全形空白隔開的兩段：改成一般空白＋左邊距，換行時行首不會多出一格空白 */ .gap-l{margin-left:.5em} ul,ol{margin:0;padding:0;list-style:none} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} table{border-collapse:collapse;width:100%} /* 鍵盤 focus：深藍 2px（淺底 12.3:1、黃色按鈕外 8.2:1）；深色面上改白。 原本是 3px 金色，疊在淺底只有 1.6:1，WCAG 1.4.11 要 3:1。 */ :focus-visible{outline:2px solid var(--blue-dark);outline-offset:2px;border-radius:4px} .hero :focus-visible,.site-footer :focus-visible,.venue-band :focus-visible, body:has(.hero-motion) #site-header:not(.is-stuck) :focus-visible{outline-color:#fff} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 10px 0; } .skip-link:focus{left:0} .skip-link:focus-visible{outline-color:#fff} /* 藍底按鈕疊在深色首屏上，深藍外框看不到 */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px} /* ========================================================= HEADER ========================================================= */ #site-header{ position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h); background:transparent;border-bottom:1px solid transparent; transition:background .3s, border-color .3s, box-shadow .3s; } #site-header.is-stuck{ background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(22,48,107,.06); } .header-inner{ max-width:var(--hero-container);margin:0 auto;padding:0 var(--edge);height:100%; display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0;gap:5px} /* 主視覺為淺色底，導覽列一律使用彩色版 logo */ .brand-logo{display:block;height:24px} .brand-logo img{height:100%;width:auto;display:block} .brand-logo .logo-light{display:none} .brand-sub{font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:500} .nav-desktop{display:flex;gap:2px;font-size:14px;font-weight:500} .nav-desktop a{ padding:9px 12px;border-radius:8px;color:var(--body); transition:color .2s,background .2s;white-space:nowrap; } .nav-desktop a:hover{color:var(--blue);background:var(--mist)} .nav-desktop a.is-active{color:var(--blue-hover);background:var(--mist);font-weight:700} .header-actions{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;width:44px;height:44px;border-radius:4px;position:relative} .nav-toggle span{ position:absolute;left:12px;width:20px;height:2px;background:var(--ink);border-radius:2px; transition:transform .3s,opacity .2s; } .nav-toggle span:nth-child(1){top:15px} .nav-toggle span:nth-child(2){top:21px} .nav-toggle span:nth-child(3){top:27px} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .nav-drawer{ position:fixed;top:var(--header-h);left:0;right:0;z-index:99; background:#fff;border-bottom:1px solid var(--line); padding:16px 24px 26px;display:flex;flex-direction:column;gap:2px; box-shadow:var(--sh-md); /* 橫向手機時抽屜比視窗高，最後一顆「索取招商提案」會點不到：讓抽屜自己捲 */ max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h)); overflow-y:auto;overscroll-behavior:contain; } .nav-drawer[hidden]{display:none} @media (min-width:1000px){.nav-drawer{display:none}} .nav-drawer a:not(.btn){padding:13px 4px;font-weight:500;border-bottom:1px solid var(--line)} .nav-drawer a.btn{margin-top:14px} /* 按鈕吃全站 .btn 的尺寸，不被上面那條的 padding 蓋掉 */ /* ========================================================= BUTTONS ========================================================= */ /* 全站按鈕系統（一個動作只有一種形狀）： - 圓角一律 4px（不做膠囊）、字重 700、字距 .04em、行高 1.2，不加箭頭符號。 字重 400 在中文上太薄，是按鈕看起來不夠專業的主因；PingFang 寫 700 實際顯示 Semibold。 - 尺寸三種：md（基底，48px）、sm（44px，header 與手機浮動列）、lg（首屏，見 .hero-cta .btn）。 - 主要 CTA 只給「索取招商提案」：淺色面 .btn-primary、深色面 .btn-accent（亮黃）， 首屏那顆另外有閃光（.btn-shine）。次要 .btn-outline。 */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:0 24px;border-radius:4px; font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.2; transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s, color .22s, opacity .25s, visibility .25s; white-space:nowrap; } .btn-primary{background:var(--blue);color:#fff;box-shadow:none} .btn-primary:hover{background:var(--blue-hover)} /* 次要：字與框用 #0057CC（#006DFF 疊淺底只有 4.4:1，16px 一般字不過 AA）； hover 只換淡藍底，不整顆填滿藍——否則跟主要按鈕長得一樣 */ .btn-outline{background:transparent;color:var(--blue-hover);box-shadow:inset 0 0 0 1px var(--blue-hover)} .btn-outline:hover{background:var(--mist);color:var(--blue-hover)} .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)} .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)} /* 深色面上的主要 CTA（頁尾）：跟首屏同一支亮黃、深藍字（9.9:1）。 藍色疊在頁尾 #12306B 上只有 2.8:1，按鈕邊界會糊掉；黃色是 8.2:1。不加閃光。 */ .btn-accent{background:var(--cta-yellow);color:var(--ink-on-gold);box-shadow:none} .btn-accent:hover{background:var(--cta-yellow-hover)} /* 按下去就要有反應，不是放開才有。觸控裝置沒有 hover， 原本全站沒有任何 :active，手機上按按鈕等於完全沒回饋。 壓縮比放開快（.09s vs .22s），手感才不會拖。 */ .btn:active{transform:scale(.97);transition-duration:.09s} .nav-desktop a:active,.nav-drawer a:not(.btn):active, .faq-list summary:active,.cd-item:active{opacity:.7;transition:opacity .09s} .btn-sm{min-height:44px;padding:0 18px;font-size:14px} .btn-lg{padding:17px 32px;font-size:16.5px} /* ========================================================= HERO — 全幅深色舞台（2026 實拍影片 × 純白文字） ========================================================= */ /* 為什麼這版重排（取代原本「照主視覺上小下大」的做法）： 1. 原本 .hero-inner 只有 920px，Hero 卻是滿版深色面：1440 寬時內容只佔 64%、 1920 只佔 48%——舞台很大、演員擠在中間。改用 hero 專用的 --hero-container（1400）， 不動 --container（1140 是 header 與所有內容區的寬）。 2. 標題原本照主視覺「2027 Yourator 小、職涯博覽會 大」硬拆兩行（.line-1 / .line-2 都是 display:block）。主視覺是直式海報比例，落地頁 Hero 是橫幅，不該照搬； 現在兩個 span 都是 inline、同一字級，1280 以上是「2027 Yourator 職涯博覽會」一整排大字。 3. 文字色原本是帶藍的 off-white（--on-dark #E8F1FF）＋每層 text-shadow， 壓在本身就偏藍的 scrim 上是「同色系深淺差」，不是白對深，看起來悶、糊。 改用 --hero-fg 三層純白（見 :root），大字不掛陰影，對比改由 .hero-scrim 撐（見下方）。 4. 間距只准用 --hero-gap-* 這組變數，強迫出「組內小、組間大」的分組， 不再是 9 個等距節點疊成一疊。 */ /* 高度跟著內容走（標準字圖＋成效數字＋CTA），不再用 min-height 撐到接近滿版： 1440×900 時首屏約 720px，下方 logo 帶與回顧影片會早一點露出來。 */ .hero{ position:relative; padding:calc(var(--header-h) + clamp(32px,4.5vh,56px)) var(--edge) clamp(36px,5vh,56px); display:flex;align-items:center;justify-content:center; background:linear-gradient(170deg,#F7FAFE 0%, #E9F1FB 55%, var(--grey-bg) 100%); overflow:hidden;isolation:isolate; } /* 左對齊：中文多行置中時每行起點都不同，掃視成本高 */ /* max-width 扣掉兩側 --edge：header-inner 的 max-width 是「含內距」的盒， hero-inner 卻是在 .hero 內距裡面置中的盒，不扣掉的話 1920 寬時會差 48px 對不齊。 */ .hero-inner{max-width:calc(var(--hero-container) - 2*var(--edge));width:100%;text-align:left;position:relative} /* 置中版型：整欄置中， 子元素依序是標準字圖、成效數字、CTA。 */ .hero-inner-center{text-align:center;display:flex;flex-direction:column;align-items:center} /* H1：整行同一個字級。 單行預算：「2027 Yourator 職涯博覽會」在 -.03em 字距下約 12.2em。 7.3vw 在 1280 寬 = 93.4px（×12.2 = 1140 < 1232 可用寬）； 112px 上限 = 1400 / 12.2 取整往下，1536 以上封頂、剛好一行（餘裕 34px）。 不用 white-space:nowrap：萬一環境字型偏寬（Windows 微軟正黑），換行比水平溢出好。 字重 800 而不是 900：PingFang TC 最重只有 Semibold（600），900 vs 600 的落差 會讓中文那段看起來比英數輕；800 vs 600 差距較小。 */ .hero-title{ margin:0 0 var(--hero-gap-s); font-size:clamp(40px,7.3vw,112px);font-weight:800; line-height:1.04;letter-spacing:-.03em;color:var(--hero-fg); } /* 兩個 span 保留是為了平板／手機斷行點正確，桌機一律 inline。 各自 nowrap（不是整個 H1 nowrap）：中文字之間任何位置都可斷行，瀏覽器會挑最後一個 斷點，平板上會變成「2027 Yourator 職涯博覽／會」；鎖住每個 span 內部， 唯一的斷點就剩兩者之間的空格。兩段各自都遠窄於任何視窗，不會造成水平溢出。 */ .hero-title .line-1,.hero-title .line-2{display:inline;white-space:nowrap} .hero-title .line-1{font-family:var(--font-en)} /* 標準字圖：取代原本的文字標題。寬度用 vw 跟著版面縮放， height:auto 維持圖檔原始比例（1477:774），不設固定高度避免變形。 */ .hero-title-image{margin:0 0 var(--hero-gap-s);line-height:0} /* 副標「Human in the Lead <> AI in the Flow」：主視覺同款 Outfit 600、寬字距、全大寫， 兩側「—✦」與中間黃色「<>」是從原標準字圖裁下來的圖（裝飾、alt 空白）。 各種螢幕都維持一行：窄螢幕拿掉兩側裝飾，字級跟著螢幕寬度縮放（見手機斷點）。 */ .hero-slogan{ display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;column-gap:.6em; margin:0 0 var(--hero-gap-m); font-family:'Outfit',var(--font-en);font-weight:600;font-size:clamp(15px,1.45vw,21px);line-height:1.15; letter-spacing:.09em;text-transform:uppercase;color:var(--hero-fg); } .slogan-part{display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto} /* 不准被擠壓，否則文字會超出自己的盒子 */ .slogan-deco{height:.95em;width:auto;flex:0 0 auto} .slogan-deco-r{transform:scaleX(-1)} .slogan-sep{display:inline-block;height:.78em;width:auto;margin-right:.6em;flex:0 0 auto} .hero-title-image img{width:min(474px,62.5vw);height:auto;display:block;margin:0 auto} /* 圖只剩標題（1248×381）；這個寬度讓標題跟改版前一樣大 */ /* 成效數字：標準字圖正下方、CTA 上方。無邊框大數字帶，只靠留白分組。 */ .hero-stats{width:100%;margin:0 0 var(--hero-gap-m)} /* 「2026 年實際成效」用金色當數字帶的視覺錨點，跟下方黃色 CTA 同一組顏色 */ .hs-label{ display:block;font-size:clamp(14px,1.1vw,18px);font-weight:700;line-height:1; letter-spacing:.16em;color:var(--gold-text);margin:0 0 var(--hero-gap-xs); } /* auto 欄而不是 1fr：三個數字寬度不同（15,000+ 最寬），1fr 會讓 100+ 那欄留一大片空白 */ .hero-facts{ display:grid;grid-template-columns:repeat(3,auto);justify-content:center; column-gap:clamp(40px,4.4vw,80px);margin:0; } .fact strong{ display:block;font-family:var(--font-en); font-size:clamp(36px,4vw,64px);font-weight:800; color:var(--hero-fg);line-height:1;letter-spacing:-.04em; white-space:nowrap; font-variant-numeric:tabular-nums; /* 滾動時每位數等寬，配合 app.js 鎖寬， 單位才不會左右抖 */ } .fact strong em{ font-style:normal;font-size:max(12px,.42em);font-weight:700; /* 手機上 .42em 會小於 12px */ color:var(--hero-fg);margin-left:2px;letter-spacing:-.02em; } .fact span{ display:block;font-size:clamp(13px,1vw,16px);line-height:1.4; color:var(--hero-fg-2);margin-top:var(--hero-gap-xs);letter-spacing:.06em;font-weight:500; } /* CTA：首屏唯一的動作 */ .hero-cta{display:flex;justify-content:center;margin:0} /* 原 .btn 字重 400 在影片上太薄，只在 hero 這顆加到 500 */ .hero-cta .btn{ font-size:clamp(16px,1.1vw,18px);padding:18px clamp(32px,2.6vw,48px); font-weight:500;letter-spacing:.04em;line-height:1.2; } /* 閃光按鈕：品牌黃底、深藍字（2027 主視覺的金色點綴），每 4.5 秒一道光由左掃到右， 接著外圈一層暖金色柔光往外擴散淡出，在影片上把視線拉到這顆按鈕。 維持全站的扁平 4px 圓角，不做膠囊形。 光帶用背景位置動畫、光暈動 box-shadow 與 opacity，都不觸發重排。 hover 時換成較亮的金色並清掉光帶——滑鼠已經停在按鈕上，不需要再提示。 */ .btn-shine{position:relative} .btn-shine::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;animation:btn-halo 4.5s ease-out infinite; } /* 光暈用 box-shadow 以像素往外擴：不管按鈕多寬（手機是滿版），四邊都等距。 動 box-shadow 只會重繪、不會重排，只有這一個元素，成本可以接受。 */ @keyframes btn-halo{ 0%,58%{opacity:0;box-shadow:0 0 0 0 rgba(255,200,69,.6)} 72%{opacity:1;box-shadow:0 0 14px 3px rgba(255,200,69,.6),0 0 32px 8px rgba(255,200,69,.22)} 100%{opacity:0;box-shadow:0 0 24px 12px rgba(255,200,69,0),0 0 48px 18px rgba(255,200,69,0)} } @keyframes btn-shine{ 0%,40%{background-position:160% 0} 70%,100%{background-position:-60% 0} } /* ========================================================= EXHIBITOR LOGO MARQUEE — 取代原本的藍色時間色條 兩條內容完全相同的軌道並排，一起往左位移自己的 100% 寬度； 第一條跑出畫面時第二條正好補到原位，所以看起來是無縫循環。 速度刻意放慢（預設 80 秒跑完一輪）——logo 是要被認出來的，不是要被看到在動。 ========================================================= */ .logo-marquee{ --lm-duration:80s; background:var(--tint);border-bottom:1px solid var(--line); padding:14px 0 16px;overflow:hidden; } .lm-head{ display:flex;align-items:center;justify-content:center;gap:14px; margin-bottom:10px;padding:0 24px; } .lm-label{ font-size:12px;font-weight:700; letter-spacing:.06em;color:var(--muted); } .lm-viewport{display:flex;width:max-content} .lm-track{ display:flex;align-items:center;gap:48px;padding-right:48px; animation:lm-scroll var(--lm-duration) linear infinite; } /* 滑過去要看清楚某一家時就停下來。但 hover 只服務滑鼠—— 鍵盤與觸控使用者要靠 .is-paused（暫停鈕）才停得下來。 */ .logo-marquee:hover .lm-track{animation-play-state:paused} .logo-marquee.is-paused .lm-track{animation-play-state:paused} /* ---------- 動態暫停控制（跑馬燈／背景影片共用） ---------- */ .motion-toggle{ display:inline-flex;align-items:center;gap:7px; min-height:32px;padding:6px 12px;border-radius:999px; font-size:11.5px;font-weight:700;letter-spacing:.04em; color:var(--muted);background:transparent; box-shadow:inset 0 0 0 1px var(--line); transition:color .2s, box-shadow .2s, background .2s, opacity .09s; } .motion-toggle:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--muted)} .motion-toggle:active{opacity:.6} /* 兩條直線＝暫停；按下後（aria-pressed=true）變成三角形＝播放 */ .mt-icon{ width:9px;height:11px;flex:0 0 auto;background:currentColor; clip-path:polygon(0 0,3.5px 0,3.5px 11px,0 11px,0 0, 5.5px 0,9px 0,9px 11px,5.5px 11px); } .motion-toggle[aria-pressed="true"] .mt-icon{ clip-path:polygon(0 0,9px 50%,0 100%); } /* 不播影片／不輪播時這顆沒有意義。 要明寫，否則上面的 display:inline-flex 會蓋掉 [hidden] 的預設值。 */ .motion-toggle[hidden]{display:none} @media (max-width:680px){ .mt-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .motion-toggle{padding:6px 9px} } @keyframes lm-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}} /* 來源圖都是 2:1、logo 置中留白的透明 PNG，所以統一鎖高度就能排齊 */ .lm-item{ flex:0 0 auto;height:56px;display:flex;align-items:center;justify-content:center; } .lm-item img{height:100%;width:auto;object-fit:contain} /* 使用者要求減少動態時不自動捲，改成可手動橫向捲的一排 */ @media (prefers-reduced-motion:reduce){ .lm-track{animation:none} .lm-track:nth-child(2){display:none} .lm-viewport{width:100%;overflow-x:auto} } /* ========================================================= SECTION BASE ========================================================= */ /* 上留白刻意比下留白短：標題一捲進來就看得到，不用先看一片空白。 整頁走「緊湊」節奏——人資是一路滑到底看完的，留白省下來的都是捲動距離。 */ .section{padding:clamp(24px,2.2vw,32px) 0 clamp(24px,2.4vw,36px)} /* 桌機兩區塊之間約 66px */ .section-head{max-width:780px;margin-bottom:clamp(24px,2.4vw,32px)} .section-head h2{font-size:clamp(28px,3.6vw,44px);margin:0 0 12px;letter-spacing:-.025em} .section-head .lead{font-size:clamp(15px,1.4vw,17px);line-height:1.85;color:var(--body)} #plans .section-head{max-width:none} /* 導語不限寬：桌機一行放得下，窄螢幕才換行 */ .note{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.8} .note-tight{margin-top:12px} /* ========================================================= STATS PANEL ========================================================= */ .stats-panel{padding:0} .stats-panel-head{margin-bottom:22px;max-width:660px} .stats-panel-head h3{color:var(--ink);font-size:clamp(19px,2vw,23px)} .stats-panel-head p{color:var(--body);font-size:14.5px;margin-top:8px} /* ---------- 儀表板：卡片式，上排 2 張（不等寬）＋下排 3 張（等寬）。 沿用全站唯一的卡片語彙（白底＋1px 邊框＋8px 圓角，零陰影，hover 才浮起）。 ---------- */ .stats-row{display:grid;gap:20px} .stats-row-top{grid-template-columns:1fr} .stats-row-bottom{grid-template-columns:repeat(3,1fr);margin-top:20px} .dash-cell{padding:0} .dash-card{ background:var(--surface); border:1px solid var(--line-card);border-radius:var(--radius); padding:24px;box-shadow:var(--sh-card); } .dash-info .stats-panel-head{margin-bottom:20px} .dash-info .stats-platform{border-top:1px solid var(--line);padding-top:18px} .dash-label{ display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em; color:var(--muted);margin-bottom:12px; } .dash-num{ display:block;font-family:var(--font-en);font-weight:800;line-height:.95; letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums; font-size:clamp(34px,4.1vw,54px); } /* 主格的數字明顯大一級，但不再是「另外三個小到看不見」的落差 */ .dash-lead .dash-num{font-size:clamp(46px,6vw,82px)} /* 單位（+ / 屆 / 份）。沒有這條 會吃到瀏覽器預設的斜體。 */ .dash-num em{ font-style:normal;font-size:.45em;font-weight:700; color:inherit;margin-left:.08em;letter-spacing:0; /* 單位跟數字同色：黃色疊淺底只有 1.6:1，看起來像褪色 */ } /* 中文數字不在 Inter 字符集裡會掉回思源黑體，同尺寸下胖一圈，縮一級才對得齊 */ .dash-num.dash-cjk{ font-family:var(--font-tc);font-size:clamp(30px,3.4vw,44px);letter-spacing:.01em; } .dash-foot{ display:block;margin-top:12px;font-size:12.5px;line-height:1.75; color:var(--muted); } .dash-foot b{color:var(--ink);font-weight:700} /* 進度條：以 2027 年的預計累積值當刻度，讀得出「還差一屆就破九萬」 */ .dash-bar{ margin-top:18px;height:8px;border-radius:999px; background:var(--mist);overflow:hidden; } .dash-bar > span{ display:block;height:100%;width:var(--v);border-radius:999px; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); } /* 屆數點：九屆就畫九顆，捲到時依序亮起來 */ .dash-dots{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .dash-dots li{width:13px;height:13px;border-radius:50%;background:var(--blue);align-items:baseline;gap:12px;flex-wrap:wrap} .dash-growth .g-from{font-size:.6em;color:var(--muted)} .dash-growth i{font-style:normal;font-size:.5em;color:var(--muted);font-weight:700} /* ---------- 進場動畫：捲到這張卡才跑 ---------- */ .js .stats-panel .dash-bar > span{ width:0;transition:width 1.2s cubic-bezier(.2,.8,.3,1) .25s; } .js .stats-panel.is-in .dash-bar > span{width:var(--v)} .js .stats-panel .dash-dots li{ background:var(--blue);transform:scale(.62); transition:background .45s ease, transform .45s cubic-bezier(.2,1.4,.4,1); } .js .stats-panel.is-in .dash-dots li{background:var(--blue);transform:scale(1)} .js .stats-panel .dash-dots li:nth-child(1){transition-delay:.20s} .js .stats-panel .dash-dots li:nth-child(2){transition-delay:.27s} .js .stats-panel .dash-dots li:nth-child(3){transition-delay:.34s} .js .stats-panel .dash-dots li:nth-child(4){transition-delay:.41s} .js .stats-panel .dash-dots li:nth-child(5){transition-delay:.48s} .js .stats-panel .dash-dots li:nth-child(6){transition-delay:.55s} .js .stats-panel .dash-dots li:nth-child(7){transition-delay:.62s} .js .stats-panel .dash-dots li:nth-child(8){transition-delay:.69s} .js .stats-panel .dash-dots li:nth-child(9){transition-delay:.76s} .js .stats-panel .dash-growth i{opacity:0;transform:translateX(-6px);transition:opacity .5s .5s, transform .5s .5s} .js .stats-panel.is-in .dash-growth i{opacity:1;transform:none} /* ---------- 平台能量：同一張卡裡的佐證列，用一條細線分隔就好，不要框中框 ---------- */ .stats-platform{ position:relative;padding-top:20px; border-top:1px solid rgba(255,255,255,.22); display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px; } .sp-label{ font-size:12.5px;font-weight:700;letter-spacing:.06em; color:var(--muted);white-space:nowrap; } .sp-items{display:flex;flex-wrap:wrap;gap:8px 30px} .sp-items > div{display:flex;align-items:baseline;gap:8px} .sp-items strong{ font-family:var(--font-en);font-size:26px;font-weight:800;color:var(--blue); line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums; } /* 這兩個單位（萬+／間+）在淺底上，用亮金只有 1.62:1。 亮金只留給深色面，淺底一律用 --gold-deep。 */ .sp-items strong em{ font-style:normal;font-size:.45em;font-weight:700;color:inherit; margin-left:.08em;letter-spacing:0; } .sp-items span{font-size:13px;color:var(--body)} /* 說明獨占一行靠左，不要被擠到最右邊飄著 */ .sp-note{ flex:1 1 100%;font-size:12.5px;line-height:1.75;margin-top:4px; color:var(--muted);text-align:left;max-width:760px; } /* ========================================================= AUDIENCE / CHARTS ========================================================= */ /* 人才數據帶：原本是獨立一區（含四張分布圖），收斂成四個關鍵數字後 併進「為什麼參展」。上下細線夾住、中間直線分隔——像報表的摘要列，不像四張名片。 */ .talent-band{margin-top:var(--gap-group)} .tb-lead{ font-size:clamp(16px,1.6vw,19px);color:var(--heading);font-weight:500; line-height:1.8;margin-bottom:20px; } .tb-lead strong{font-weight:900} .headline-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0; } .hs{background:none;border:0;border-radius:0;padding:0;text-align:center;position:relative} .hs strong{ display:block;font-family:var(--font-en);font-size:clamp(36px,4.4vw,52px);font-weight:800; color:var(--blue);line-height:1;letter-spacing:-.03em; } .hs strong em{font-style:normal;font-size:.45em;font-weight:700;color:inherit;margin-left:.08em;letter-spacing:0} .hs > span{display:block;font-size:14px;color:var(--body);margin-top:8px;font-weight:500} /* ========================================================= CONCEPT ========================================================= */ /* ---------- 活動主題（2C 訴求，在招商頁降為補充資訊） ---------- */ /* 活動主題：改成插畫底圖卡片，疊白色半透明確保文字可讀。 沿用全站卡片語彙的邊框＋圓角，但陰影用 --sh-md（不是零陰影的 --sh-card）—— 這裡是全頁少數刻意要浮起來的卡片之一，跟表單卡同級。 */ .theme-strip{ position:relative;overflow:hidden;margin-top:40px; border:1px solid var(--line-card);border-radius:var(--radius-lg); box-shadow:var(--sh-md); background: linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)), url('theme-bg.jpg') center/cover no-repeat; padding:clamp(32px,4vw,52px); } .ts-head{max-width:560px} .ts-tag{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em; color:var(--blue-dark);background:none;padding:0; } .ts-head h3{ font-family:var(--font-en);font-size:clamp(23px,2.8vw,31px); margin:12px 0 10px;letter-spacing:-.02em; } .ts-head h3 .slogan-sep{height:.62em;vertical-align:.08em;margin:0 .3em 0 .05em} /* 主視覺的黃色「<>」 */ .ts-head p{font-size:14.5px;line-height:1.95} /* ---------- Venue ---------- */ /* 場地：滿版橫幅——實拍照片＋黑色半透明疊圖，文字全白確保可讀性。 跳出 .container 寬度限制鋪到視窗邊緣，是 #expo 的第一個區塊。 疊圖用單一 background 疊兩層（純色漸層 + 照片），不用額外的偽元素層。 */ .venue-band{ width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); background: linear-gradient(rgba(7,20,45,.62),rgba(7,20,45,.62)), url('venue-hall.jpg') center 62%/cover no-repeat; padding:clamp(48px,5.4vw,80px) 0; } /* 橫幅貼齊區塊頂端，不留一段白留白再進場；下方活動主題補回正常段落間距。 */ #expo{padding-top:0} #expo .venue-band + .container{margin-top:var(--gap-group)} .venue-card{ display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,40px);align-items:start; background:none;border-radius:0; } /* 場地資訊小標——跟下面「2027 活動主題」的 .ts-tag 同一種手法， 淺底用 --gold-deep，這裡疊在暗色照片上改用亮金才有足夠對比。 */ .vc-tag{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em; color:var(--gold-text);margin-bottom:12px; } .venue-card .vc-main h2{color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.2;margin:0 0 12px} /* 這區的 h2（原本是比所有 h2 都大的 h3） */ .venue-card .vc-main p{font-size:16px;line-height:1.85;color:rgba(255,255,255,.86)} /* 場地四件事：放在場館名稱下方，一排四欄，dt／dd 上下堆疊； 上緣一條細線跟標題區隔。窄螢幕退成 2×2，手機再退成單欄。 */ .vc-meta{ display:grid;grid-template-columns:repeat(4,max-content);justify-content:start; gap:20px clamp(32px,4.5vw,64px);margin:0; padding-top:clamp(24px,2.6vw,32px);border-top:1px solid rgba(255,255,255,.22); } .vc-meta > div{display:flex;flex-direction:column;gap:8px} .vc-meta dt{font-size:15px;color:rgba(255,255,255,.72)} .vc-meta dd{margin:0;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.3;color:#fff;letter-spacing:.01em;white-space:nowrap} /* ========================================================= PLANS — 攤位規格 ========================================================= */ /* 攤位卡片（目前用在職涯互動區）：跟展區／見證同一組卡片語彙。 */ /* #plans 子區塊的標題統一一級 */ .matrix-label strong,.interact-title{ font-size:clamp(20px,2.2vw,26px);line-height:1.35;letter-spacing:-.015em;font-weight:900; } .booth-specs{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px; /* 三格等寬，縮小間距讓卡片更寬 */ } .booth{ background:var(--surface); border:1px solid var(--line-card);border-radius:var(--radius); padding:30px 28px;position:relative; box-shadow:none; } /* 主打的那張用 2px 金邊標出來（沿用 v6 的「加粗邊框、不加底色」做法）。 金色在這頁的角色就是「這個要看」的重音，跟主視覺一致； 藍留給可點擊的東西（按鈕、連結），兩者分工不混用。 卡裡的 .booth-tag 本來就是 --gold-deep，邊框改金之後整張卡才是一致的。 */ .booth-feature{ background:var(--surface); border-color:var(--gold);border-width:2px; } .booth-tag{ display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.06em; color:var(--blue);background:none;padding:0; } .booth-feature .booth-tag{color:var(--blue-dark);background:none} .booth-size{ display:block;font-family:var(--font-en);font-size:40px;font-weight:800;line-height:1.1; /* 不繼承內文 1.8 行高：數字要貼近自己的標籤 */ color:var(--ink);letter-spacing:-.02em;margin:10px 0 16px; } /* 等比例示意圖：概念取自 v4 版（--w/--h 對應公尺數，網格底紋畫出比例）， 但配色沿用本頁既有的藍／金，不套 v4 自己的黑白極簡風格。 --unit 是「1 公尺＝多少 px」，16px 讓最大的 6m×6m 落在 96px，卡片裡不會太搶戲。 */ .booth-diagram{ --unit:18px;width:calc(var(--w) * var(--unit));height:calc(var(--h) * var(--unit)); border:2px solid var(--blue); background: linear-gradient(var(--line) 1px,transparent 1px) 0 0 / var(--unit) var(--unit), linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0 / var(--unit) var(--unit); margin-bottom:16px; } /* 內部規格清單原本每項底下一條線，四個項目就是四條線，在卡片裡再切一次 已經有邊框的空間，太瑣碎。拿掉線，純靠間距與圓點分行。 */ .booth ul li{ font-size:15px;padding:0 0 0 20px;position:relative;color:var(--body); margin-bottom:12px;line-height:1.55; } .booth ul li:last-child{margin-bottom:0} .booth ul li::before{ content:'';position:absolute;left:2px;top:.55em;width:7px;height:7px; border-radius:50%;background:var(--blue); } .booth-feature ul li::before{background:var(--gold-deep)} /* ---------- Benefit matrix ---------- */ /* 權益表：六個方案欄位各自上色，讓人一眼認出自己在看哪一欄。現場權益常駐顯示，線上曝光明細可收合（見下方 .m-toggle）。 */ /* matrix-wrap 緊接在 section-head 之後，不需要自己的頂部分隔線； 下方職涯互動區是淡藍面板，自己就跟權益表分得開。 */ .matrix-wrap{ margin-top:4px; } .matrix-label{padding:0 0 16px} .matrix-label strong{display:block;color:var(--heading)} .matrix-label small{display:block;font-size:13.5px;color:var(--muted);margin-top:6px} .matrix-label .m-swipe{display:none;color:var(--blue-hover);font-weight:700} /* 組名 colspan=7 整格 sticky 不會讓字移動：字包一層 span 自己黏左 */ .m-group-name{position:sticky;left:12px} /* 表頭本身已經有淺色塊當視覺錨點，上面不用再加線 */ .matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;container-type:inline-size} /* 讓展開列用 100cqi 取得可視寬度 */ .matrix{min-width:900px;font-size:13.5px} .matrix th,.matrix td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--line)} .matrix thead th{ position:sticky;top:0;background:var(--tint);color:var(--heading); font-size:13px;font-weight:900;white-space:nowrap; border-bottom:2px solid var(--line);padding:14px 12px; } .matrix thead th.m-item{text-align:left;min-width:250px;width:33%} /* width 固定：收合與展開時欄寬一致，不跳動 */ /* 表頭方案標籤：單色 4px 標籤（見下方 .plan-pill） */ /* 方案標籤是「不能點的標籤」：4px 圓角、單色、約 27px 高，跟 44–48px 的按鈕明顯分開 （原本是 37px 高的漸層膠囊，跟 header 按鈕一樣高，看起來像一組可以切換的按鈕） */ .plan-pill{ display:inline-block;padding:4px 10px;border-radius:4px; font-size:12.5px;font-weight:700;line-height:1.5;letter-spacing:.02em;color:#fff; white-space:nowrap; } .matrix th.m-max .plan-pill{background:#FFC300;color:var(--ink-on-gold)} .matrix th.m-a .plan-pill{background:#C34A40} .matrix th.m-b .plan-pill{background:#123F91} .matrix th.m-c .plan-pill{background:#3569CE} .matrix th.m-lite .plan-pill{background:#67748A} .matrix th.m-net .plan-pill{background:#0B1D42} .matrix tbody th{ text-align:left;font-weight:500;color:var(--body);font-size:13.5px;line-height:1.5; } /* 方案欄本身的淺色底：對應表頭膠囊色，用低透明度鋪滿整欄 */ .matrix td.m-max{background:rgba(255,195,0,.12)} .matrix td:nth-child(3){background:rgba(226,102,93,.06)} .matrix td:nth-child(4){background:rgba(26,86,184,.06)} .matrix td:nth-child(5){background:rgba(91,147,238,.06)} .matrix td:nth-child(6){background:rgba(138,151,170,.07)} .matrix td:nth-child(7){background:rgba(18,48,107,.06)} .matrix tr.m-group th{ background:var(--mist);color:var(--blue-hover);font-size:12.5px;font-weight:900; /* 小字：#006DFF 疊淡藍只有 4.0:1 */ letter-spacing:.06em;text-align:left;padding:8px 12px; } .matrix tbody tr:not(.m-group):hover th{background:var(--tint)} .matrix tbody tr:not(.m-group):hover td.m-max{background:rgba(255,195,0,.22)} .matrix tbody tr:not(.m-group):hover td:nth-child(3){background:rgba(226,102,93,.14)} .matrix tbody tr:not(.m-group):hover td:nth-child(4){background:rgba(26,86,184,.14)} .matrix tbody tr:not(.m-group):hover td:nth-child(5){background:rgba(91,147,238,.14)} .matrix tbody tr:not(.m-group):hover td:nth-child(6){background:rgba(138,151,170,.16)} .matrix tbody tr:not(.m-group):hover td:nth-child(7){background:rgba(18,48,107,.14)} .matrix b{font-size:12.5px;font-weight:700;color:var(--blue-hover);white-space:nowrap} /* 贊助方案比較表（.sb-table）共用同一套勾勾／空心圓 */ .matrix .yes,.matrix .no,.sb-table .yes,.sb-table .no{display:inline-block;width:16px;height:16px;border-radius:50%} .matrix .yes,.sb-table .yes{background:var(--blue);position:relative} .matrix .yes::after,.sb-table .yes::after{ content:'';position:absolute;left:5px;top:3px;width:4px;height:8px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg); } .matrix .no,.sb-table .no{background:transparent;box-shadow:inset 0 0 0 2px var(--line)} /* 勾勾下方的補充說明（例：逛展地圖另有 50 字簡介） */ .matrix .m-note{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--blue-hover);white-space:nowrap} /* 線上曝光明細收合： 展開列是線上曝光組的最後一列，滿版、文字置中——放在被收起的內容「下面」， 就是一般人熟悉的「還有更多，點這裡展開」位置。收合狀態下展開列捲進畫面（停留 0.5 秒）時， 光帶掃兩趟（.is-hinting，由 app.js 加上，約 3.2 秒），再次捲回來會再提示一次； 箭頭則在收合狀態下持續往下跳，展開後轉向上並停住。 - 手機上表格可以橫向捲動（min-width 900px）：按鈕寬度鎖在捲動框的可視寬度（100cqi）、sticky 黏左， 不管表格捲到哪裡，按鈕都在畫面中間。 - 收合狀態是亮黃底深藍字（見下方 aria-expanded="false"）；展開後是淡藍底， 字色用 --blue-hover：品牌藍 #006DFF 疊在 --mist 底上約 4.0:1，#0057CC 約 5.7:1。 */ .matrix tr.m-bar td{padding:0;border-bottom:0;background:none} .m-toggle{ position:sticky;left:0;width:min(100%,100cqi);min-height:52px; display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px; font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--blue-hover); background-color:var(--mist); background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%); background-size:250% 100%;background-repeat:no-repeat;background-position:160% 0; border-radius:0 0 var(--radius) var(--radius);transition:background-color .2s; } .m-toggle:hover{background-color:#DCE9FB} /* 收合狀態（還有 11 列沒看到）用跟首屏 CTA 同一支亮黃、深藍字，比淺藍凸顯。 展開後這條變成「收合」，是次要動作，退回上面的淡藍。 */ .m-toggle[aria-expanded="false"]{background-color:var(--cta-yellow);color:var(--ink-on-gold)} .m-toggle[aria-expanded="false"]:hover{background-color:var(--cta-yellow-hover)} .m-toggle:active{opacity:.7;transition:opacity .09s} /* 箭頭放在小圓框裡，收合時往下跳、展開後轉向上且停住 */ .m-toggle-icon{ position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; } .m-toggle-icon::before{ content:'';position:absolute;left:50%;top:50%;width:7px;height:7px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translate(-50%,-70%) rotate(45deg);transition:transform .25s; } /* 收合狀態下箭頭持續往下跳，提示「往下展開」（持續的互動箭頭； 超過 5 秒的自動動態嚴格來說不符合 WCAG 2.2.2，prefers-reduced-motion 時由全域規則停掉） */ .m-toggle[aria-expanded="false"] .m-toggle-icon{animation:m-nudge 1.6s ease-in-out infinite} .m-toggle[aria-expanded="true"] .m-toggle-icon::before{transform:translate(-50%,-25%) rotate(-135deg)} @keyframes m-nudge{0%,50%,100%{transform:translateY(0)}68%{transform:translateY(5px)}84%{transform:translateY(0)}} /* 捲進畫面時的光帶：跑兩趟就停，不一直閃（箭頭則是收合時持續跳） */ .m-toggle.is-hinting{animation:m-sheen 1.6s cubic-bezier(.4,0,.2,1) 2} @keyframes m-sheen{from{background-position:160% 0}to{background-position:-60% 0}} /* 展開列在 overflow-x:auto 的捲動框裡，外框畫在外面會被裁掉：往內縮 2px */ .m-toggle:focus-visible{outline:2px solid var(--blue-dark);outline-offset:-2px} /* 項目數列：收合時代表整組線上曝光，數字比一般儲存格大一級，跟各欄底色連在一起比高低 */ .matrix tr.m-sum th{font-weight:700;color:var(--blue-hover)} .matrix .m-sum-total{font-weight:500;color:var(--muted)} /* 小字用 --blue-hover：品牌藍 #006DFF 疊在各欄淡色底上只有約 4.2:1，#0057CC 才過 AA */ .matrix tr.m-sum b{font-family:var(--font-en);font-size:15px;font-weight:800;color:var(--blue-hover)} .matrix-foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px;margin-top:24px; } /* 首屏 CTA 還在畫面上時，header 的「索取招商提案」先藏起來（佔位不變，導覽不位移； visibility 讓它同時退出 Tab 順序）——同一個畫面只出現一顆 CTA。沒有 JS 時不會加這個 class。 */ #site-header.cta-hold .header-actions .btn{opacity:0;visibility:hidden} /* 手機／平板的浮動列已經在畫面上，權益表下方那顆就不再重複（否則同一屏會疊黃色展開列＋兩顆按鈕） */ @media (max-width:1000px){.js .matrix-foot .btn{display:none}} /* 沒有 JS 時浮動列不會出現，這顆要留著 */ .matrix-foot .note{flex:1 1 380px} /* ---------- Addons ---------- */ .addons{margin-top:24px} .addons-title{font-size:23px;margin-bottom:14px;display:flex;align-items:center;gap:12px} .addons-title span{ font-size:12px;font-weight:700;color:var(--gold-deep); background:var(--gold-tint);padding:5px 11px;border-radius:999px;letter-spacing:.06em; } /* 加購項目：改成兩欄的清單，編號放左邊，橫線分隔——像價目表 */ .addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px} .addon{ background:none;border:0;border-radius:0;padding:14px 0; border-top:1px solid var(--line); display:grid;grid-template-columns:58px 1fr;gap:2px 14px;align-items:baseline; } .addon-no{ grid-row:span 2;font-family:var(--font-en);font-size:12px;font-weight:800; letter-spacing:.08em;color:var(--blue);background:none;padding:0; } .addon h4{font-size:15.5px;margin:0} .addon p{font-size:13px;line-height:1.7;color:var(--muted)} /* ---------- Interactive Zone（職涯互動區，非招募類型的互動攤位） ---------- */ /* 跟六個徵才方案平行的另一條產品線：用淡藍面板跟上面的方案分開（企業贊助則是金框卡片）， 面板裡的攤位卡維持白底，不是白卡包白卡；「非徵才攤位」標籤排在標題上方，一眼看出不屬於六擇一。 */ .interact-block{ margin-top:var(--gap-sub);padding:clamp(24px,3vw,36px); background:var(--mist);border:0;border-radius:var(--radius-lg); } /* DOM 順序維持「標題→標籤」（報讀器先讀標題），畫面上把標籤排到標題上方 */ .interact-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;margin-bottom:14px} .interact-title{margin:0} .interact-kicker{ display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue-dark); } /* 主說明段落原本套了註腳樣式（13px、一行約 78 字）：改成正常內文、行長約 44 字。 兩個 class 的權重蓋過 .note。 */ .interact-block .note{color:var(--body)} /* --muted 疊淡藍面板只有 4.1:1 */ .interact-block .interact-lead{font-size:15px;line-height:1.85;max-width:44em;margin:0 0 24px;color:var(--body)} .interact-specs{grid-template-columns:repeat(2,1fr)} /* ★ 標記主打規格，用主視覺金色 */ .interact-star{ position:absolute;top:-14px;right:20px;z-index:1; width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--gold);color:var(--ink-on-gold);font-size:14px; box-shadow:var(--sh-sm); } /* ---------- 人機同事特展（企業贊助，獨立 section，排在參展方案前面） ---------- */ /* 外框沿用原本的金色細框＋淡暖陰影：贊助＝品牌高度，跟一般資訊卡分開 */ .sponsor-block{ background:var(--surface); border:1px solid rgba(200,146,42,.35);border-radius:var(--radius-lg); padding:clamp(24px,3vw,40px); box-shadow:0 10px 28px rgba(144,105,30,.08); } .sb-head{max-width:820px;margin-bottom:clamp(24px,2.4vw,32px)} .sb-head h2{font-size:clamp(26px,3.4vw,42px);line-height:1.3;margin:0 0 12px;letter-spacing:-.025em} /* 跟 .section-head h2 同一級，卡片內距吃掉一點寬度，上限略小 */ .sb-head p{font-size:clamp(15px,1.4vw,17px);line-height:1.85;max-width:44em;text-wrap:pretty} .sb-head strong{color:var(--ink);font-weight:900} /* 壓扁成一排——左邊價值鏈（圖＋三組關係左右並排）， 右邊兩個方案的比較表。表格高度跟著價值鏈卡撐滿，兩邊底部對齊。 */ .sb-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px} /* 三方價值鏈： 人與企業＝品牌藍（節點），關係與價值流動＝金（線、箭頭、光點、星芒、輪到的小卡），呼應職涯互動區的黃藍語彙。 卡片白底＋1px 細框，跟右邊的比較表同一種卡片。--gold 疊白只有約 1.7:1，只當線、點、框，不當文字色； 靜止的線用比較表 GOLD 色條同色 #E5B443（深一階），三角形的結構在白底上才站得住。 */ .sb-chain{ margin:0;padding:18px 22px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--line-card);color:var(--body); display:grid;grid-template-columns:minmax(0,228px) minmax(0,1fr); grid-template-rows:auto 1fr auto;grid-template-areas:"cap list" "svg list" "key list"; gap:0 24px;align-items:center; } .sb-chain figcaption{grid-area:cap;align-self:start;font-size:13px;line-height:1.55;color:var(--body)} .sb-chain figcaption strong{display:block;margin-bottom:4px;font-size:17px;font-weight:900;letter-spacing:-.01em;color:var(--heading)} .sb-chain-svg{grid-area:svg;display:block;width:100%;height:auto;margin:6px 0 0;overflow:visible} /* 圖：線與光點（金） */ .sbc-edge{transition:opacity .45s ease} .sbc-edge line{stroke:#E5B443;stroke-width:2;stroke-linecap:round;transition:stroke-width .45s ease} .sbc-tip{fill:none;stroke:#E5B443;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .45s ease} /* 光點：長度 0 的虛線＋圓頭＝一顆圓點；每個方向兩條同步 path——底下深藍粗一點當描邊、上面金色，像一枚金幣 */ .sbc-flow{fill:none;stroke:var(--gold);stroke-width:6.4;stroke-linecap:round;stroke-dasharray:0 200;stroke-dashoffset:0;opacity:0;transition:opacity .3s} .sbc-flow-k{stroke:var(--ink-on-gold);stroke-width:9.4} .sbc-spark{fill:var(--gold);stroke:var(--ink-on-gold);stroke-width:1.2;stroke-linejoin:round} /* 圖：節點（藍） */ .sbc-orbit{fill:none;stroke:var(--line);stroke-width:1} .sbc-disc{fill:var(--mist);stroke:var(--blue);stroke-width:1.5;transition:fill .45s ease} .sbc-ring{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center} .sbc-ico{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s ease} .sbc-dot{fill:var(--blue);transition:fill .45s ease} /* 圖在桌機約 0.76 倍、手機約 0.85 倍：標籤 16 換算後都在 12px 以上 */ .sbc-label{fill:var(--heading);font-family:var(--font-en);font-size:16px;font-weight:700;text-anchor:middle} /* 圖例：藍點＝三方角色，金線＋金點＝雙向價值流動 */ .sbc-key{grid-area:key;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)} .sbc-key span{display:inline-flex;align-items:center;gap:8px} .sbc-key-node::before{content:'';width:11px;height:11px;border-radius:50%;background:var(--mist);box-shadow:inset 0 0 0 1.5px var(--blue)} .sbc-key-flow::before{ content:'';width:22px;height:9px; background: radial-gradient(circle,var(--gold) 0 3px,var(--ink-on-gold) 3.2px 4.4px,transparent 4.7px) center/9px 9px no-repeat, linear-gradient(#E5B443,#E5B443) center/100% 2px no-repeat; } /* 右側三張關係小卡：輪到的那張換金框＋星章（＝互動攤位主打卡），其他兩張細框 */ .sb-links{grid-area:list;align-self:stretch;display:grid;grid-auto-rows:1fr;gap:10px;margin:0;padding:0} .sb-links li{ position:relative;display:flex;flex-direction:column;justify-content:center; padding:10px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-card); font-size:13px;line-height:1.6;color:var(--body);transition:border-color .45s ease,box-shadow .45s ease; } .sb-links b{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:3px;font-size:14px;font-weight:700;line-height:1.45;color:var(--heading)} /* 標題裡的雙向箭頭：跟圖上的關係線同一支金色；文字「與」留給螢幕報讀 */ .sbl-x{ flex:none;width:18px;height:10px;margin:0 6px;background:#E5B443; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M2.5 5h15M6 1.6 2.5 5 6 8.4M14 1.6 17.5 5 14 8.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M2.5 5h15M6 1.6 2.5 5 6 8.4M14 1.6 17.5 5 14 8.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* 星章：跟 .interact-star 同一套（金底、深藍星、壓在右上角邊框上），縮小；平常收起來，輪到才淡入 */ .sb-links li::after{ content:'';position:absolute;top:-10px;right:14px;width:20px;height:20px;border-radius:50%; background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.75 6 6.55.66-4.92 4.4 1.42 6.44L12 16.78 6.2 20.1l1.42-6.44L2.7 9.26l6.55-.66z' fill='%23102449'/%3E%3C/svg%3E") center/12px 12px no-repeat;box-shadow:var(--sh-sm); opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none; } .sb-links li:focus-visible{outline:2px solid var(--blue-dark);outline-offset:2px} .sbl-d{text-wrap:wrap} /* 斷行點已經用 .nobr 控制好；全域的 text-wrap:pretty 會把「的」挪到下一行 */ /* 動態（app.js 第 11 段加 .is-live）：輪到的那組——金線加粗、兩枚金幣光點對向流（雙向交流）、 兩端節點轉成實心品牌藍並冒兩次光圈、右邊那張小卡換金框＋星章。光點一趟 1.6 秒，換組 3.2 秒剛好跑兩趟。 沒有 JS 或 prefers-reduced-motion 時沒有 .is-live：三條金線全亮、三顆淡藍節點、三張細框小卡的靜態圖。 */ .sb-chain.is-live .sbc-edge{opacity:.85} .sb-chain.is-live .sbc-edge.is-active{opacity:1} .sb-chain.is-live .sbc-edge.is-active line,.sb-chain.is-live .sbc-edge.is-active .sbc-tip{stroke-width:2.8} .sb-chain.is-live .sbc-edge.is-active .sbc-flow{animation:sbc-flow 1.6s linear infinite} .sb-chain.is-live[data-active="ea"] [data-edges~="ea"] .sbc-disc, .sb-chain.is-live[data-active="er"] [data-edges~="er"] .sbc-disc, .sb-chain.is-live[data-active="ra"] [data-edges~="ra"] .sbc-disc{fill:var(--blue)} .sb-chain.is-live[data-active="ea"] [data-edges~="ea"] .sbc-ico, .sb-chain.is-live[data-active="er"] [data-edges~="er"] .sbc-ico, .sb-chain.is-live[data-active="ra"] [data-edges~="ra"] .sbc-ico{stroke:var(--surface)} .sb-chain.is-live[data-active="ea"] [data-edges~="ea"] .sbc-dot, .sb-chain.is-live[data-active="er"] [data-edges~="er"] .sbc-dot, .sb-chain.is-live[data-active="ra"] [data-edges~="ra"] .sbc-dot{fill:var(--surface)} .sb-chain.is-live[data-active="ea"] [data-edges~="ea"] .sbc-ring, .sb-chain.is-live[data-active="er"] [data-edges~="er"] .sbc-ring, .sb-chain.is-live[data-active="ra"] [data-edges~="ra"] .sbc-ring{animation:sbc-ring 1.6s ease-out 2} .sb-chain.is-live .sb-links li{cursor:default} /* 2px 金框：1px 邊框換金＋內側 1px 金色陰影，框變粗但不推動版面 */ .sb-chain.is-live .sb-links li.is-active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)} .sb-chain.is-live .sb-links li.is-active::after{opacity:1;transform:none} .sb-chain.is-paused *{animation-play-state:paused!important} /* 捲出畫面或分頁在背景時暫停，省電；上面的 animation 簡寫權重較高，要 !important 才蓋得過 */ @keyframes sbc-flow{0%{stroke-dashoffset:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}} @keyframes sbc-ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.38)}} /* 1001–1080px：還是左右兩欄，但價值鏈卡只剩約 490px 寬——圖欄縮到 200px（標籤放大到 18 維持 12px 以上），小卡標題不折行 */ @media (min-width:1001px) and (max-width:1080px){ .sb-chain{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:0 18px;padding:20px 18px} .sbc-label{font-size:18px} .sbc-key{gap:4px 14px} .sb-links li{padding:10px 12px} } /* 兩個方案的比較表：方案色（PLATINUM 藍灰、GOLD 金）只用在表頭下緣的 3px 色條＋金屬圓點， 整張表維持白底——大面積的淡金底看起來就是米色 */ .sb-compare{overflow:hidden;background:var(--surface);border:1px solid var(--line-card);border-radius:var(--radius)} .sb-table{width:100%;height:100%;table-layout:fixed;border-collapse:collapse} .sb-table th,.sb-table td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:center} .sb-table tbody tr:last-child > *{border-bottom:0} .sb-table thead th{background:var(--tint)} .sb-table thead .sbt-item{ text-align:left;padding-left:18px; font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted); } .sb-table .sbt-pt,.sb-table .sbt-gd{width:27%;padding:14px 6px 12px} /* 方案色條壓在表頭下緣的格線上（＝方案名稱的底線），把名稱跟下面整欄連起來；放卡片頂邊時會被右上圓角切掉 */ .sb-table thead .sbt-pt{border-bottom:3px solid #D2C09A} .sb-table thead .sbt-gd{border-bottom:3px solid #E5B443} .sbt-plan{ display:flex;flex-direction:column;align-items:center;gap:6px; font-family:var(--font-en);font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--heading); } /* 金屬圓點：兩道高光＋一道暗面做出立體感 */ .sbt-plan::before{ content:'';width:24px;height:24px;border-radius:50%; box-shadow:inset 0 2px 3px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.18),0 2px 6px rgba(22,48,107,.22); } /* 白金：香檳白金（冷灰太像銀），加一道掃光＋兩顆閃爍的小星芒， 金色維持靜態——一動一靜，看得出白金比金高一階 */ .sbt-pt .sbt-plan{position:relative} .sbt-pt .sbt-plan::before{ background: linear-gradient(115deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 160% 0/250% 100% no-repeat, linear-gradient(145deg,#FFFFFF 8%,#F3E9D2 34%,#CBB68A 62%,#F7EFDD 100%); animation:sbt-shine 3.6s ease-in-out infinite; } .sbt-pt .sbt-plan::after{ content:'';position:absolute;top:-8px;left:calc(50% + 9px);width:20px;height:20px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 1.9 7.7 10.5 10.5-8.6 2.8-9.8 4.9-10.5 10.5-.7-5.6-1.9-7.7-10.5-10.5C10.1 9.2 11.3 7.1 12 1.5Z' fill='%23C9A75A'/%3E%3C/svg%3E") 0 0/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 1.9 7.7 10.5 10.5-8.6 2.8-9.8 4.9-10.5 10.5-.7-5.6-1.9-7.7-10.5-10.5C10.1 9.2 11.3 7.1 12 1.5Z' fill='%23C9A75A'/%3E%3C/svg%3E") 13px 11px/7px 7px no-repeat; animation:sbt-twinkle 2.4s ease-in-out infinite; } @keyframes sbt-shine{0%,55%{background-position:160% 0,0 0}85%,100%{background-position:-60% 0,0 0}} @keyframes sbt-twinkle{0%,100%{opacity:.35;transform:scale(.75) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(15deg)}} @media (prefers-reduced-motion:reduce){ .sbt-pt .sbt-plan::before,.sbt-pt .sbt-plan::after{animation:none} } .sbt-gd .sbt-plan::before{background:linear-gradient(145deg,#FDF1C8 8%,#E5B443 38%,#BC8A1C 66%,#F8E3A4 100%)} .sb-table tbody th{ text-align:left;padding-left:18px; font-size:13px;font-weight:500;line-height:1.45;color:var(--body); } .sb-table tbody th b{display:block;font-size:13.5px;font-weight:700;color:var(--heading)} .sb-table .yes,.sb-table .no{vertical-align:middle} /* 「未包含」用短橫線：權益表的淡色空心圓在白底上只有 1.2:1，這張表兩案唯一的差別就在這格 */ .sb-table .no{width:14px;height:2px;border-radius:1px;box-shadow:none;background:var(--muted)} /* 平板以下：價值鏈與比較表上下排，價值鏈內部維持圖左文右 */ @media (max-width:1000px){ .sb-grid{grid-template-columns:1fr} .sb-chain{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0 32px} .sb-links{grid-auto-rows:auto;align-self:center} /* 平板說明都是一行，不要把三張小卡硬撐成跟圖一樣高 */ .sb-table .sbt-pt,.sb-table .sbt-gd{width:22%} } @media (max-width:680px){ .sponsor-block{padding:24px 16px} .sb-chain{display:block;padding:20px 16px 16px} .sb-chain-svg{max-width:256px;margin:12px auto 0} .sbc-key{display:none} /* 手機省高度：顏色分工在小卡標題的金色箭頭上也看得出來 */ .sb-links{grid-auto-rows:auto;gap:8px;margin-top:16px} .sb-links li{padding:8px 12px} .sb-table th,.sb-table td{padding:10px 6px} .sb-table thead .sbt-item,.sb-table tbody th{padding-left:12px} .sb-table .sbt-pt,.sb-table .sbt-gd{width:26%;padding:12px 2px 10px} .sbt-plan{font-size:12px;letter-spacing:.01em} .sb-table tbody th{font-size:12.5px} .sb-table tbody th b{font-size:12.5px} } /* 極窄螢幕（≤360px）：「PLATINUM」在 26% 欄寬裡會被切，欄寬放寬、字距收緊；圖縮到約 0.69 倍，節點標籤放大到約 12px */ @media (max-width:360px){ .sb-table .sbt-pt,.sb-table .sbt-gd{width:29%;padding:12px 1px 10px} .sbt-plan{letter-spacing:-.01em} .sbc-label{font-size:18px} } .sb-foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px;margin-top:16px; } .sb-foot .note{flex:1 1 400px;margin-top:0} /* ========================================================= MARKETING ========================================================= */ /* 時程本來就是一條時間軸，做成四張卡反而把「先後關係」弄丟了。 改成一條橫線 + 四個節點。 */ .roadmap{ display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px; margin-bottom:var(--gap-group);position:relative;padding-top:30px; } .roadmap::before{ content:'';position:absolute;left:0;right:0;top:5px;height:2px;background:var(--line); } .roadmap li{background:none;border:0;border-radius:0;padding:0;position:relative} .roadmap li::before{ content:'';position:absolute;top:-30px;left:0;width:12px;height:12px;border-radius:50%; background:var(--blue);box-shadow:0 0 0 4px var(--surface); } .rm-q{ display:inline-block;font-family:var(--font-en);font-size:12px;font-weight:800; letter-spacing:.1em;color:var(--dark);background:none;padding:0; } .roadmap strong{display:block;font-size:17px;color:var(--heading);margin:6px 0 4px} .roadmap p{font-size:13px;color:var(--muted)} .roadmap li.rm-final{background:none} .roadmap li.rm-final::before{background:var(--gold-deep)} .rm-final .rm-q{color:var(--dark);background:none} /* 六個曝光管道：收進一個白色大方塊，3×2 格用 1px 細線切開。 做法是格線本身鋪線色、gap 留 1px、每格白底——線永遠對齊， 斷點改欄數時也不用另外處理邊框。指標上方再補一條短線， 把「管道說明」和「成效數字」分成兩層。 */ .channel-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line-card);border:1px solid var(--line-card); border-radius:var(--radius-lg);overflow:hidden; } .channel{ background:var(--surface);border:0;border-radius:0; padding:clamp(24px,2.6vw,32px); display:flex;flex-direction:column; } .channel h3{ font-size:17px;margin-bottom:8px;padding-left:16px;position:relative;color:var(--heading); } .channel h3::before{ content:'';position:absolute;left:0;top:.5em;width:7px;height:7px; border-radius:50%;background:var(--blue); } .channel p{font-size:13.5px;line-height:1.8;flex:1;padding-left:16px} .ch-metric{ display:block;margin:18px 0 0 16px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--font-en);font-size:24px;font-weight:800;line-height:1.2;color:var(--blue);letter-spacing:-.02em; } .ch-metric small{font-size:.6em;font-weight:700;margin-left:.1em} /* 單位：「150萬+」寫法跟全頁一致 */ .ch-metric em{ font-style:normal;font-family:var(--font-tc);font-size:12.5px;font-weight:500; color:var(--muted);margin-left:8px;letter-spacing:0; } /* 年度雇主品牌大賞橫幅：圖片本身就是完整的橫幅，不另外包白框； 圓角跟上方曝光管道方塊一致 */ .award-banner{ display:block;margin-top:var(--gap-group);border-radius:var(--radius-lg);overflow:hidden; transition:box-shadow .2s, transform .2s; } .award-banner:hover{box-shadow:var(--sh-card-hov);transform:translateY(-2px)} .award-banner img{display:block;width:100%;height:auto} /* ========================================================= VOICES ========================================================= */ /* 見證：改成可左右切換的水平輪播（scroll-snap ＋箭頭按鈕）， 不是自動跑的跑馬燈——見證要讓人一則一則主動翻完，不該自己跑走。 卡片：8px 圓角、1px 邊框、零陰影、padding 24px。 logo：四家都用官方檔。頭像四家統一用同一個通用人形剪影（沒有任何一家的真實受訪者照片）。 */ /* ---------- 2026 回顧影片 ---------- */ /* 桌機左文右片；≤860px 改單欄（RWD 區段）。 影片框不設 overflow:hidden，iframe 自己 border-radius:inherit 裁圓角，focus 外框才不會被裁掉。 */ .recap{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,3.5vw,48px);align-items:center;margin-bottom:var(--gap-group); } /* 兩個 class 提高權重：手機斷點的 .section-head{margin-bottom:24px} 寫在後面，同權重會蓋掉這裡 */ .recap .recap-copy{margin-bottom:0} /* 段落裡的連結常駐底線：#0057CC 跟周圍灰字只差 1.4:1，只靠顏色認不出是連結 */ .recap-copy .note a,.form-fallback a{ color:var(--blue-hover);font-weight:700; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; } .recap-copy .note a:hover,.form-fallback a:hover{text-decoration-thickness:2px} .recap-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);background:var(--dark)} .recap-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} .recap-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit} /* ---------- 現場照片輪播 ---------- */ /* 機制跟 .logo-marquee 完全一樣（兩條內容相同的軌道並排，各自位移 100% 寬度 做無縫循環），只是換成照片尺寸的版本；class 用 pm- 前綴，不共用 .lm-* / .logo-marquee，避免兩組跑馬燈的樣式互相污染。 */ .photo-marquee{ --pm-duration:52s;position:relative;overflow:hidden; border-radius:var(--radius-lg);margin-bottom:var(--gap-group); } .pm-viewport{display:flex;width:max-content} .pm-track{ display:flex;align-items:center;gap:16px;padding-right:16px; animation:pm-scroll var(--pm-duration) linear infinite; } .photo-marquee:hover .pm-track{animation-play-state:paused} .photo-marquee.is-paused .pm-track{animation-play-state:paused} @keyframes pm-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}} /* 固定高度、寬度依照片原始比例自動撐開（不用 width+height 雙固定配 cover）—— 完整顯示整張照片，不裁切左右兩側。 */ .pm-item{ flex:0 0 auto;height:220px;border-radius:var(--radius);overflow:hidden; } .pm-item img{height:100%;width:auto;display:block} @media (prefers-reduced-motion:reduce){ .pm-track{animation:none} .pm-track:nth-child(2){display:none} .pm-viewport{width:100%;overflow-x:auto} } .quote-carousel{position:relative} /* 隱藏捲軸：已經有箭頭按鈕當操作介面，捲軸只是視覺雜訊； scroll-snap 讓用手勢滑動或按箭頭都會停在整張卡的邊界上，不會停在卡片中間。 */ .quote-track{ display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin:0;padding:2px; } .quote-track::-webkit-scrollbar{display:none} .quote{ flex:0 0 calc((100% - 2*24px)/3);scroll-snap-align:start; margin:0;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line-card);border-radius:var(--radius); padding:24px;box-shadow:none;position:relative; } /* 四家 logo 原始長寬比差很多（方形 icon vs 長條 wordmark）， 只固定高度會讓比例窄的 logo 看起來明顯比較大；改成同時限制 最大寬高的框，讓每個 logo 的視覺佔比更接近一致。 */ .quote-brand{height:40px;margin-bottom:16px;display:flex;align-items:center} /* logo 用裁掉透明留白的版本（logos/quote-*.png），四張卡的 logo 左緣才會跟標題切齊 */ .quote-logo{max-height:32px;max-width:120px;width:auto;height:auto;object-fit:contain} .quote h3{ font-size:15px;color:var(--heading); margin:0 0 12px;line-height:1.5;font-weight:600; } /* flex:1 讓每張卡的署名一律貼齊卡片底部，卡片間仍然等高 */ .quote p{flex:1;font-size:14px;line-height:1.8;color:var(--body)} .quote footer{ display:flex;align-items:center;gap:10px; margin-top:16px;padding-top:16px;border-top:1px solid var(--line); } /* 署名只留公司名：上方已有 logo，通用人形剪影會讓人覺得是沒填完的版型；字級跟內文同級，不像註腳 */ .quote cite{font-style:normal;font-size:14px;font-weight:700;color:var(--heading)} /* 左右切換箭頭：跟「參展企業怎麼說」標題同一排、靠右下對齊（原本在卡片列下方，多佔一段空白） */ .quotes-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,2.4vw,32px)} .quotes-head .section-head{flex:1 1 auto;min-width:0;margin-bottom:0} .quote-nav{display:flex;justify-content:flex-end;gap:10px;flex:0 0 auto} /* 手機：標題佔滿一排，說明和箭頭排在第二排（不然窄螢幕標題會被箭頭擠成兩行） */ @media (max-width:680px){ .quotes-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px} .quotes-head .section-head{display:contents} .quotes-head .section-head h2{grid-column:1/-1} } /* 控制項：跟按鈕同一套 4px 圓角，不搶主色（hover 只換淡藍底，不填滿藍） */ .quote-arrow{ width:44px;height:44px;border-radius:4px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; background:var(--surface);color:var(--blue-hover); box-shadow:inset 0 0 0 1px var(--line-card);transition:background .2s,color .2s,box-shadow .2s; } .quote-arrow:hover{background:var(--mist);color:var(--blue-hover);box-shadow:inset 0 0 0 1px var(--blue-hover)} .quote-arrow:active{opacity:.7} .quote-arrow svg{ width:18px;height:18px;fill:none;stroke:currentColor; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; } /* ========================================================= CONTACT ========================================================= */ /* 右欄（Pipedrive 表單 / FAQ 清單）一定比左欄長得多， 左欄改成 sticky 跟著捲，就不會出現「右邊很長、左邊一片空白」。 */ @media (min-width:1081px){ .contact-copy,.faq-intro{ position:sticky;top:calc(var(--header-h) + 28px); } } .contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start} .contact-copy h2{font-size:clamp(28px,3.6vw,44px);margin:0 0 12px;letter-spacing:-.025em} /* 跟 .section-head h2 同一級 */ .contact-copy .lead{font-size:clamp(15px,1.4vw,17px);line-height:1.85} .steps{margin:22px 0 18px;display:flex;flex-direction:column;gap:2px} .steps li{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line)} .steps li:last-child{border-bottom:0} /* 步驟序號：淡藍小方塊，不做實心藍色大方塊（那最像能點的東西）、不寫 01／02／03 */ .steps span{ flex-shrink:0;width:28px;height:28px;border-radius:4px; display:flex;align-items:center;justify-content:center; font-family:var(--font-en);font-weight:800;font-size:14px;background:var(--mist);color:var(--blue-hover); } .steps strong{display:block;font-size:15.5px;color:var(--heading)} .steps small{font-size:13px;color:var(--muted)} .contact-direct{ background:none;border:0;border-top:1px solid var(--line);border-radius:0; padding:16px 0 0;margin-bottom:14px; } .cd-label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;letter-spacing:.06em} .cd-item{ display:block;padding:8px 0;font-family:var(--font-en); border-bottom:1px solid var(--line); } .cd-item:last-child{border-bottom:0} .cd-item strong{font-size:17px;color:var(--blue-hover);font-weight:700} .cd-item:hover strong{text-decoration:underline} /* 信任訊息：貼著送出鍵下方。猶豫是在按下去前一秒發生的， 把隱私／回覆承諾／社會證明放在頁面別處等於沒放。 */ .form-trust{ display:grid;gap:8px; margin:4px 28px 0;padding-top:14px; border-top:1px solid var(--line); } .ft-item{ position:relative;padding-left:20px; font-size:12.5px;line-height:1.75;color:var(--muted); } .ft-item::before{ content:'';position:absolute;left:2px;top:.55em; width:7px;height:7px;border-radius:50%;background:var(--sky-soft); } .ft-reply::before{background:var(--blue)} .ft-proof::before{background:var(--gold-deep)} /* 全頁唯一保留的「卡片」：它是轉換點，需要跟背景明確分開， 而且裡面包的是 iframe，本來就得有容器。 */ .form-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:0;box-shadow:var(--sh-lg);overflow:hidden; /* 不再白卡包 iframe 再包白卡，少一層盒子 */ } .form-card-head{padding:24px 28px 20px;border-bottom:1px solid var(--line)} .form-card-head h3{font-size:21px} .form-card-head p{font-size:13.5px;color:var(--muted);margin-top:5px} .pipedrive-form{width:100%;min-height:1240px;border:0;display:block} /* 依實測表單內容高度；太矮會出現雙層捲軸 */ @media (max-width:380px){.pipedrive-form{min-height:1350px}} /* 窄螢幕欄位換行變高，320 寬時 reCAPTCHA 徽章會壓住送出鍵 */ .form-fallback{font-size:13px;color:var(--muted);text-align:center;padding:14px 10px 18px} /* ========================================================= FAQ ========================================================= */ .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start} .faq-intro h2{font-size:clamp(28px,3.6vw,44px);margin:0 0 12px;letter-spacing:-.025em} .faq-intro .lead{font-size:clamp(15px,1.4vw,17px);line-height:1.85;margin-bottom:20px} /* FAQ：九個獨立圓角框是整頁最密的盒子來源。改成單純的分隔線清單。 */ .faq-list{border-top:1px solid var(--line)} .faq-list details{ border:0;border-bottom:1px solid var(--line);border-radius:0;background:none; margin-bottom:0;overflow:hidden; } .faq-list details[open]{box-shadow:none} .faq-list summary{ list-style:none;cursor:pointer;padding:16px 44px 16px 2px;position:relative; font-size:16px;font-weight:700;color:var(--heading);line-height:1.6; } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary:focus-visible{outline-offset:-2px} /* details 有 overflow:hidden，外框畫在外面會被裁掉 */ .faq-list summary::after{ content:'';position:absolute;right:8px;top:23px;width:10px;height:10px; border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue); transform:rotate(45deg);transition:transform .3s; } .faq-list details[open] summary::after{transform:rotate(-135deg);top:26px} .faq-list summary:hover{color:var(--blue)} .faq-body{padding:0 44px 18px 2px;font-size:14.5px;line-height:1.9;color:var(--body)} .faq-body p{border-top:0;padding-top:0} /* ========================================================= FOOTER ========================================================= */ .site-footer{background:var(--blue-dark);color:rgba(255,255,255,.62);padding:36px 0 32px;font-size:14px} /* 收尾 CTA：頁尾上緣的一列，取代原本整頁高的 CLOSING 色塊 */ .footer-cta{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:16px 32px;padding-bottom:28px;margin-bottom:28px; position:relative; /* 分隔線改用 ::after 畫在內距內側，跟下面版權列的線同寬 */ } .footer-cta::after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:1px;background:rgba(255,255,255,.16)} /* 24px＝.container 內距 */ .fc-copy strong{ display:block;font-size:clamp(19px,2.1vw,26px);color:#fff; letter-spacing:-.02em;line-height:1.4; } .fc-copy > span{ display:block;font-size:13px;color:var(--gold);font-weight:700; letter-spacing:.06em;margin-top:6px; } .footer-inner{display:grid;grid-template-columns:auto 1fr;gap:22px 40px;align-items:start} .footer-logo{display:inline-block} .footer-logo img{height:26px;width:auto;display:block} .footer-brand p{font-size:13px;margin-top:10px} .footer-contact{margin-top:14px !important;line-height:1.9} .footer-contact a{display:inline-block;padding:6px 0;color:rgba(255,255,255,.85)} /* 觸控區 */ .footer-contact a:hover{color:#fff;text-decoration:underline} .footer-nav{display:flex;flex-wrap:wrap;gap:0 24px;justify-content:flex-end;align-content:start} .footer-nav a{display:inline-block;padding:10px 0;transition:color .2s} /* 觸控區約 44px 高 */ .footer-nav a:hover{color:#fff} .footer-legal{ grid-column:1/-1;padding-top:18px;border-top:1px solid rgba(255,255,255,.14); font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.66); /* .42 疊深藍只有 3.5:1 */ } /* 隱私權政策連結：跟周圍文字同色，靠底線認出是連結 */ .ft-privacy a,.footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px} .ft-privacy a:hover{color:var(--blue-hover)} .footer-legal a:hover{color:#fff} .footer-legal a{margin-left:.5em} /* ========================================================= STICKY MOBILE CTA ========================================================= */ .sticky-cta{ position:fixed;left:14px;right:14px;bottom:14px;z-index:90; display:none;align-items:center;justify-content:space-between;gap:14px; background:rgba(255,255,255,.94);backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 18px; box-shadow:var(--sh-lg); transform:translateY(130%);visibility:hidden; transition:transform .35s cubic-bezier(.2,.8,.3,1),visibility 0s .35s; /* 收起時退出 Tab 順序，鍵盤焦點不會停在畫面外 */ } .sticky-cta.is-visible{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.3,1),visibility 0s} .sticky-cta .btn{min-height:44px;padding:0 18px} /* 觸控目標 44px */ .sticky-copy{display:flex;flex-direction:column;line-height:1.3;min-width:0} .sticky-copy strong{font-size:14px;color:var(--ink)} .sticky-copy span{font-size:12px;color:var(--muted)} /* ========================================================= 3D 模擬逛展：右下角懸浮按鈕＋對話框 ========================================================= */ /* 圓形：上面方塊圖示、下面兩行字。 手機浮動 CTA 出現時往上讓位：.sticky-cta 在 DOM 裡排在前面，用 ~ 選 */ .tour-fab{ position:fixed;right:24px;bottom:24px;z-index:91; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; width:104px;height:104px;border-radius:50%; background:var(--blue);color:#fff;text-align:center;text-decoration:none; box-shadow:0 12px 30px rgba(0,87,204,.36),0 3px 8px rgba(18,48,107,.2),inset 0 0 0 3px rgba(255,255,255,.18); transition:background-color .2s,box-shadow .2s,transform .35s cubic-bezier(.2,.8,.3,1); } .tour-fab:hover{background:var(--blue-hover);color:#fff;box-shadow:0 14px 34px rgba(0,87,204,.44),0 3px 8px rgba(18,48,107,.22),inset 0 0 0 3px rgba(255,255,255,.22)} .tour-fab:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px var(--blue-dark),0 12px 30px rgba(0,87,204,.36)} /* 白＋深藍雙色：Tab 到它時通常已捲到深藍頁尾，單色深藍外框會看不見 */ .tour-fab-ico{width:28px;height:28px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round} .tour-fab-t{font-size:14px;font-weight:700;line-height:1.3;letter-spacing:.04em} @media (max-width:1000px){ .tour-fab{right:14px;bottom:14px;width:84px;height:84px;gap:2px} .tour-fab-ico{width:24px;height:24px} .tour-fab-t{font-size:12.5px;letter-spacing:.02em} .sticky-cta.is-visible ~ .tour-fab{transform:translateY(-70px)} /* 浮動列 58px 高＋12px 間距 */ } @media print{ .tour-fab{display:none} } /* 對話框：原生 ，背景模糊用 ::backdrop；桌機置中留邊，手機全螢幕 */ .tour-dlg{ width:min(1240px,calc(100vw - 64px));height:min(820px,calc(100vh - 64px));max-width:none;max-height:none; margin:auto;padding:0;border:0;border-radius:var(--radius-lg);overflow:hidden; background:var(--surface);color:var(--body);box-shadow:0 24px 60px rgba(7,20,45,.35); } .tour-dlg[open]{display:flex;flex-direction:column} .tour-dlg::backdrop{background:rgba(7,20,45,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html.tour-open{overflow:hidden} /* 對話框開著時背景頁不跟著捲 */ .tour-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 22px;border-bottom:1px solid var(--line)} .tour-dlg-t{min-width:0} .tour-dlg-t h2{margin:0;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:var(--heading)} .tour-dlg-t p{margin-top:2px;font-size:13px;line-height:1.5;color:var(--muted)} .tour-dlg-note::before{content:'・'} /* 桌機接在同一行；手機換成獨立一行（見 ≤680px） */ .tour-dlg-x{flex:0 0 auto;gap:6px} .tour-dlg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .tour-dlg-body{position:relative;flex:1 1 auto;min-height:0;background:linear-gradient(180deg,#EAF5FF 0%,#D4E9FF 60%,#C3E0FF 100%)} .tour-dlg-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5} .tour-dlg-loading{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:var(--radius); background:rgba(255,255,255,.94);font-size:14px;font-weight:700;color:var(--heading);white-space:nowrap; } .tour-dlg-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .tour-dlg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px 10px 22px;border-top:1px solid var(--line)} .tour-dlg-foot p{font-size:13px;line-height:1.6;color:var(--body)} @media (max-width:680px){ .tour-dlg{width:100vw;height:100vh;border-radius:0} @supports (height:1dvh){ .tour-dlg{height:100dvh} } .tour-dlg-head{padding:8px 10px 8px 16px} .tour-dlg-t h2{font-size:16px} .tour-dlg-note{display:block} .tour-dlg-note::before{content:none} .tour-dlg-foot{display:none} /* 手機把高度全給展場；3D 裡面本來就有操作提示 */ } /* ========================================================= REVEAL ========================================================= */ /* 首屏：純 CSS 進場動畫，完全不依賴 JS。 外部 script 若因任何原因沒執行，hero 仍然看得到——那是最重要的內容。 */ .rise{animation:rise .7s cubic-bezier(.2,.8,.3,1) both} /* data-delay 進場節奏（hero 由上往下依序進場）：純 CSS， prefers-reduced-motion 下面那條 .rise{animation:none} 會一併關掉 */ .rise[data-delay="2"]{animation-delay:.08s} .rise[data-delay="3"]{animation-delay:.16s} .rise[data-delay="4"]{animation-delay:.24s} @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* 折線以下：交給 IntersectionObserver，只有 JS 可用時才預先隱藏 */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1)} .reveal.is-in{opacity:1;transform:none} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1180px){ .addon-grid{grid-template-columns:1fr} /* 時間軸在窄螢幕改直式：橫線＋每格自己位移的圓點只在單排 4 欄時對得齊， 一旦跳成多欄多排，後面幾排的圓點還是往上位移同一個距離，會飄進上一排的 內文裡、線也接不到——所以改成左側一條直線，線段長度用 calc(100% + 間距) 自動撐滿到下一顆圓點，不管每格文字多高、跳成 1 欄或 2 欄都不會跑掉。 */ .roadmap{ grid-template-columns:1fr;row-gap:32px; padding-top:0;padding-left:26px; } .roadmap::before{display:none} .roadmap li::before{top:6px;left:-26px;z-index:1} /* 連接線 ::after 從同一個點開始畫，圓點要在上層 */ .roadmap li:not(:last-child)::after{ content:'';position:absolute;top:6px;left:-21px;width:2px; height:calc(100% + 32px);background:var(--line); } /* 見證卡在這個寬度改成一次看兩張 */ .quote{flex-basis:calc((100% - 24px)/2)} } @media (max-width:1080px){ .channel-grid{grid-template-columns:1fr 1fr} .booth-specs{grid-template-columns:1fr;gap:16px} /* 儀表板卡片改單欄堆疊 */ .stats-row-top,.stats-row-bottom{grid-template-columns:1fr;gap:16px} .sp-note{flex-basis:100%;text-align:left} .venue-card{gap:20px} .vc-meta{grid-template-columns:1fr 1fr} .contact-grid,.faq-grid{grid-template-columns:1fr;gap:28px} .footer-cta{flex-direction:column;align-items:flex-start} .footer-cta .btn{width:100%} .headline-stats{grid-template-columns:1fr 1fr;gap:24px 0;padding:20px 0} } @media (max-width:1000px){ html{scroll-padding-bottom:84px} /* 浮動 CTA 高 57px＋底距 14px：鍵盤移動焦點時不要停在它底下 */ .nav-desktop{display:none} .nav-toggle{display:block} .header-actions .btn{display:none} .sticky-cta{display:flex} /* 平板 H1（文字版）兩行是刻意的：768–1000 可用寬 720–952px，單行要壓到 ≤78px，跟數字 64px 差距太小、層級會塌； 84px × 12.2 = 1025 > 952，會在「Yourator」與「職涯博覽會」之間的空格自然斷行。 */ .hero{padding:calc(var(--header-h) + 40px) var(--edge) 56px} .hero-title{font-size:clamp(44px,9vw,84px);line-height:1.08} .hero-facts{column-gap:clamp(24px,4vw,48px)} .fact strong{font-size:clamp(32px,5.2vw,52px)} } @media (max-width:680px){ .addon-grid,.channel-grid,.interact-specs{grid-template-columns:1fr} .stats-row-bottom{grid-template-columns:1fr} /* 手機一次看一張，留一點下一張的邊當「還可以滑」的提示 */ .quote{flex-basis:88%;padding:26px 20px 20px} .quote-track{gap:16px} .matrix-foot,.sb-foot{flex-direction:column;align-items:stretch} .matrix-foot .note,.sb-foot .note{flex:0 0 auto} .matrix-foot .btn,.sb-foot .btn{width:100%} .stats-panel{padding:0} .stats-platform{flex-direction:column;align-items:flex-start;gap:12px} .booth{padding:24px 20px 22px} .dash-card{padding:22px 18px} /* Hero（手機不載影片，底圖是 poster）。上下內距接近對稱，讓標準字圖與按鈕在照片上光學置中 */ .hero{padding:calc(var(--header-h) + 40px) var(--edge) 48px;min-height:auto} /* 手機明確兩行：390 寬時 42.9px、「2027 Yourator」約 300px < 350 可用寬， 第一行不會再拆；改 block 是避免 320px 上「2027 Yourator」自己斷開 */ .hero-title{font-size:clamp(38px,11vw,60px);line-height:1.1} .hero-title .line-1,.hero-title .line-2{display:block} .hero-facts{column-gap:clamp(12px,4.6vw,24px)} .fact strong{font-size:clamp(23px,7.6vw,34px)} .fact span{font-size:12px;margin-top:6px;letter-spacing:.02em} /* 手機副標維持一行：拿掉兩側裝飾、字距收到 .06em，字級＝可用寬度 ÷ 22.4 （這行字在 .06em 字距下總寬約 22.1 倍字級，留一點餘裕）。 320 寬約 12.1px（不低於 12px）、390 寬約 15.3px，上限 18px（再大會比標題寬）。 */ .hero-slogan .slogan-deco{display:none} .hero-slogan{letter-spacing:.06em;font-size:min(18px,calc((100vw - 2 * var(--edge)) / 22.4))} .hero-cta{align-self:stretch} /* .hero-inner-center 是 align-items:center，不撐開的話 width:100% 量到的是按鈕自己 */ .hero-cta .btn{width:100%;padding:16px 24px;font-size:16px} /* 場地四件事在窄螢幕收成單欄堆疊 */ .vc-meta{grid-template-columns:1fr;gap:16px} .footer-inner{grid-template-columns:1fr} .footer-nav{justify-content:flex-start} .section-head{margin-bottom:24px} /* 手機上 logo 小一點、間距收窄，一次多帶到幾家 */ .logo-marquee{--lm-duration:60s} .lm-track{gap:28px;padding-right:28px} .lm-item{height:42px} .photo-marquee{--pm-duration:36s} .pm-item{height:150px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .js .reveal{opacity:1;transform:none} .rise{animation:none;opacity:1;transform:none} /* 儀表板不做生長動畫，直接是最終狀態（JS 也會跳過數字滾動） */ .js .stats-panel .dash-bar > span{width:var(--v);transition:none} .js .stats-panel .dash-dots li{background:var(--blue);transform:none;transition:none} .js .stats-panel .dash-growth i{opacity:1;transform:none;transition:none} } .hero-motion{background:var(--dark)} .hero-motion .hero-inner{z-index:1} /* text-shadow 拿掉：標題對比全靠 .hero-scrim 撐，拿掉陰影後字緣是乾脆的。 原本 0 12px 32px 那層深藍暈染會在字周圍形成一圈更暗更藍的光暈，字緣像被吃掉。 */ .hero-motion .hero-title,.hero-motion .fact strong{text-shadow:none} /* 小字（數字標籤、成效標題）留一條髮絲陰影：影片亮部移過時筆畫不會一瞬間融掉 */ .hero-motion .fact span,.hero-motion .hs-label{text-shadow:0 1px 2px rgba(7,20,45,.40)} /* 按鈕是首屏唯一的金色實體，留一點浮起感跟影片分離；陰影色跟 scrim 同色系 */ .hero-motion .btn-primary{background:#006DFF;color:#fff;box-shadow:0 6px 20px rgba(7,20,45,.35)} .hero-motion .btn-primary:hover{background:#0057CC} /* 黃色 CTA＋光帶（要寫在 .hero-motion .btn-primary 之後：它的 background 簡寫會把底色設成藍、清掉 background-image）。 底色用 --cta-yellow（比 --gold #F3C24B 亮，在影片上更跳）；深藍字 #102449 疊它約 9.9:1， 光帶是白色，掃過時底色只會更亮、對比更高。 */ .hero-motion .btn-shine{ background-color:var(--cta-yellow);color:var(--ink-on-gold);font-weight:700; background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.62) 50%,transparent 60%); background-size:250% 100%;background-repeat:no-repeat;background-position:160% 0; animation:btn-shine 4.5s cubic-bezier(.4,0,.2,1) infinite; } .hero-motion .btn-shine:hover{background:var(--cta-yellow-hover);color:var(--ink-on-gold)} .hero-motion .btn-ghost{background:#ffffff0d;color:#fff;box-shadow:inset 0 0 0 1px #ffffff66} .hero-motion .btn-ghost:hover{background:#ffffff20} body:has(.hero-motion) #site-header:not(.is-stuck){background:var(--dark-90);border-bottom-color:#ffffff15} body:has(.hero-motion) #site-header:not(.is-stuck) .logo-light{display:block} body:has(.hero-motion) #site-header:not(.is-stuck) .logo-dark{display:none} body:has(.hero-motion) #site-header:not(.is-stuck) .brand-sub,body:has(.hero-motion) #site-header:not(.is-stuck) .nav-desktop a{color:var(--on-dark-2)} body:has(.hero-motion) #site-header:not(.is-stuck) .nav-desktop a:hover{background:#ffffff15;color:#fff} /* 首屏（深色）狀態下的「目前區塊」高亮。 沒有這條的話，.nav-desktop a.is-active 只換得到淺色膠囊底， 文字顏色仍被上面那條深色規則蓋掉 → 淺底淺字，整個看不到。 */ body:has(.hero-motion) #site-header:not(.is-stuck) .nav-desktop a.is-active{background:#ffffff26;color:#fff} body:has(.hero-motion) #site-header:not(.is-stuck) .nav-toggle span{background:#fff} /* ========================================================= HERO 背景影片（2026 活動現場實拍） ========================================================= */ /* 底圖一律鋪 poster（= 影片首格）。影片淡出時露出的是同一個畫面， 所以「淡出→loop 回到第 0 秒→淡入」看起來只是呼吸，不是硬切。 */ .hero-media{ position:absolute;inset:0;z-index:-1;overflow:hidden; background:var(--dark) url('hero-poster.jpg') center 42%/cover no-repeat; } .hero-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 42%; opacity:0;transition:opacity .8s linear;z-index:1; } .hero-video.is-visible{opacity:1} /* 接棒中的那一支疊在上面，由 0 淡到 1；下面那支維持全不透明直到被完全蓋住。 只淡「上層」這一邊，兩支加起來的亮度才會是定值，中間不會凹一下。 */ .hero-video.is-top{z-index:2} /* 壓暗層：影片上要放白字與數據，必須先確保對比。 z-index 一定要高過兩支影片（1 / 2），否則交棒用的那層會蓋在壓暗層上面， 首屏文字就直接躺在亮亮的實拍畫面上、完全看不清楚。 */ /* 壓暗層原本 .40／.34／.60：對 poster 模糊後「最亮殘留」取樣，白字只有 4.16:1、 86% 白只有 3.55:1（原註解寫的 4.7–5.6 對不上實測），前一版是靠多層 text-shadow 補回來的。 現在陰影拿掉了，scrim 要補回這段對比：中段 .34→.48、頂 .40→.44、底 .60→.66； 藍色斜向層 .30→.18——這層是「悶、偏藍」的主因之一，減半後品牌藍還在， 但不再把白字染成藍白。套用後對最亮殘留：H1 區白字 5.5–5.7:1、導語區 86% 白 4.6–4.9:1、 成效帶白字 9.4:1 以上。若行銷端覺得影片太暗，底線是中段不得低於 .44 （86% 白會掉到 4.4:1）；導語區若量到低於 4.5，先把 45% 節點提到 .52，不要加回大陰影。 */ .hero-scrim{ position:absolute;inset:0;z-index:3; background: linear-gradient(180deg,rgba(7,20,45,.44) 0%,rgba(7,20,45,.48) 45%,rgba(7,20,45,.66) 100%), linear-gradient(110deg,rgba(18,55,113,.18),transparent 60%); } /* 行動裝置不下載 7MB 影片，直接用 poster（底圖已經是 poster） */ @media (max-width:860px){ .hero-video{display:none} /* 回顧影片改單欄 */ .recap{grid-template-columns:1fr;gap:20px} } /* 使用者要求減少動態時，同樣只留靜態畫面 */ @media (prefers-reduced-motion:reduce){ .hero-video{display:none} } /* ========================================================= 權益表：手機／平板（≤1000px，表格需要左右滑動） - 第一欄（權益項目）黏在左邊：滑到右側方案欄時仍看得到是哪一列；寬度收到 132px， 390 寬時能同時看到約 1.7 個方案欄，被切一半的欄位本身就是「還有內容」的提示。 - 表頭不做 sticky：那要讓表格框限高、在框內上下捲動，手機上兩層捲動更難用； 線上曝光預設收合後表格不長，表頭多半還在畫面內。 - 右緣漸隱＋「表格可以左右滑動」提示；滑到最右時 app.js 加 .is-end 拿掉漸隱。 ========================================================= */ @media (max-width:1000px){ .matrix-label .m-swipe{display:block} .matrix{min-width:0;width:max-content} .matrix thead th.m-item,.matrix tbody th[scope=row]{ position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line); width:132px;min-width:132px;max-width:132px;white-space:normal; } .matrix thead th.m-item{z-index:3;background:var(--tint)} .matrix tbody tr:not(.m-group):hover th{background:var(--surface)} /* 兩層遮罩：上層淡掉表格右緣，下層讓最底下 52px（展開列，sticky 不跟著捲）保持完整不透明 */ .matrix-scroll{ -webkit-mask:linear-gradient(to right,#000 calc(100% - 36px),transparent) top/100% calc(100% - 52px) no-repeat, linear-gradient(#000,#000) bottom/100% 52px no-repeat; mask:linear-gradient(to right,#000 calc(100% - 36px),transparent) top/100% calc(100% - 52px) no-repeat, linear-gradient(#000,#000) bottom/100% 52px no-repeat; } .matrix-scroll.is-end{-webkit-mask:none;mask:none} } @media (max-width:400px){ /* 贊助三等級在窄螢幕改成單欄橫列，否則 SILVER 卡會撐破外框 */ } /* ========================================================= 橫向手機（高度 ≤500px）：72px header＋浮動 CTA 會吃掉三分之一以上的畫面， 首屏的標準字圖被切掉、數字與 CTA 都在第二屏。改成左字圖、右數字＋CTA 的兩欄， header 收到 56px、浮動 CTA 縮成右下角一顆按鈕，回顧影片的寬度用可視高度回推。 ========================================================= */ @media (orientation:landscape) and (max-height:500px){ :root{--header-h:56px} .hero{padding:calc(var(--header-h) + 16px) var(--edge) 20px} .hero-inner-center{ display:grid;grid-template-columns:auto auto;grid-template-areas:"t s" "g c"; justify-content:center;align-items:center;column-gap:clamp(24px,4vw,48px);row-gap:16px; } .hero-title-image{grid-area:t;margin:0;align-self:end} .hero-title-image img{width:auto;height:min(26svh,110px)} .hero-slogan{grid-area:g;margin:0;align-self:start;font-size:13px} /* 一行約 276px，不比左欄標題寬 */ .hero-slogan .slogan-deco{display:none} .hero-stats{grid-area:s;margin:0;align-self:end} .hero-facts{column-gap:clamp(16px,3vw,32px)} .fact strong{font-size:clamp(26px,4vw,36px)} .hero-cta{grid-area:c;align-self:start} .hero-cta .btn{width:100%} .sticky-cta{left:auto;right:12px;bottom:8px;padding:6px} .sticky-copy{display:none} .recap-frame{width:100%;max-width:calc((100svh - var(--header-h) - 84px) * 16 / 9);justify-self:center} } /* ========================================================= 列印：HR 常把頁面印出來或存成 PDF 給主管看 ========================================================= */ @media print{ /* 權益表線上曝光明細一律展開、不印按鈕 */ .matrix tr.m-more[hidden]{display:table-row} .matrix tr.m-bar{display:none} .sticky-cta{display:none} /* position:fixed 會印在每一頁中間 */ /* 沒捲到過的 .reveal 還停在 opacity:0，不補這條整張權益表會印成空白 */ .js .reveal{opacity:1;transform:none} /* 表格 min-width:900px、第一欄 250px、方案標籤與粗體不換行，加起來比 A4 寬， 會裁掉 Lite、淨地兩欄：列印時全部放開、縮小字級與內距 */ .matrix-scroll{overflow:visible} .matrix{min-width:0;font-size:10.5px} .matrix thead th.m-item{min-width:0;width:26%} .matrix th,.matrix td,.matrix thead th{padding:6px 5px} .matrix b,.matrix .m-note,.matrix thead th,.plan-pill{white-space:normal} .plan-pill{padding:4px 8px;font-size:10px} }