/* =========================================================================== 開場動畫（Intro Curtain） --------------------------------------------------------------------------- 進站時蓋一層滿版簾幕，Logo 由上往下「畫」出來，字標逐字浮現，然後整片往上收，露出已經在下面畫好的首頁。 ── 三個設計上的硬規則，改之前先讀 ── 1. 這支動畫「不擋內容渲染」。簾幕是 position:fixed 疊在上面，首頁在同一時間就已經畫好了。不要改成「等動畫跑完才輸出 HTML」—— 那會直接把 LCP 往後推 1.5 秒，而我們賣的就是 Core Web Vitals，自己網站掉分很難解釋。 2. 動畫「純 CSS」，JS 只負責掛 class 跟收屍。如果 JS 掛掉、被擋、被快取插件搞爛，CSS 動畫照跑，最後一個 keyframe 會把簾幕移出畫面。不會出現白畫面卡死。 3. 只跑一次（每個瀏覽階段）。第二次進站還要再看 1.5 秒是折磨，不是質感。所有時間都乘上 --sv-intro-k，後台可以整體調快調慢。 ========================================================================= */ :root{ --sv-intro-k: 1; /* 速度倍率：0.8 = 快 20% */ --sv-intro-bg: radial-gradient(120% 110% at 50% -10%, #12224E 0%, #09132E 46%, #050A16 100%); --sv-intro-fg: #FFFFFF; --sv-intro-sub: var(--sv-teal-300, #8FD8D8); --sv-intro-rule: var(--sv-teal-500, #4AA8AA); } /* 預設完全不存在。只有裡那段 inline script 判斷「這次要播」才會掛上 html.sv-intro-on。沒有 JS → 這個 class 永遠不會出現 → 使用者看到的是正常網站，不是白幕。 */ .sv-intro{ display:none; } /* 為什麼要在上也塗一次底色：簾幕是裡的元素，它要等 body 開始渲染才畫得出來。在那之前的那幾十毫秒，使用者看到的是瀏覽器預設的白 —— 深底版就會白閃一下。把底色塗在上，第一次繪製就是對的顏色。 */ html.sv-intro-on{ overflow:hidden; background:#050A16; } html.sv-intro-on.sv-intro-light{ background:#EFF2F7; } html.sv-intro-on .sv-intro{ display:grid; place-items:center; position:fixed; inset:0; z-index:99990; background: var(--sv-intro-bg); animation: sv-curtain-lift calc(620ms * var(--sv-intro-k)) cubic-bezier(.76,0,.24,1) calc(1010ms * var(--sv-intro-k)) both; will-change: transform; } /* 淺底版：跟站台底色同一個值，收起來的瞬間沒有色差閃爍 */ html.sv-intro-on .sv-intro.is-light{ --sv-intro-bg: linear-gradient(180deg, #F7F9FC 0%, #EFF2F7 60%, #E7ECF4 100%); --sv-intro-fg: var(--sv-ink, #09132E); --sv-intro-sub: var(--sv-teal-700, #2E7679); --sv-intro-rule: var(--sv-teal-600, #3D9497); } /* 淡出版：不整片抽走，就地消失。低調，但少了「揭幕」的戲。 */ html.sv-intro-on .sv-intro.is-fade{ animation-name: sv-curtain-fade; animation-timing-function: cubic-bezier(.4,0,.2,1); } @keyframes sv-curtain-lift{ from{ transform: translateY(0); } to { transform: translateY(-101%); } } @keyframes sv-curtain-fade{ from{ opacity:1; transform:scale(1); } to { opacity:0; transform:scale(1.04); } } /* 極細的收邊高光：簾幕往上抽的時候底部帶一條光，讓「一整片布」這件事有實體感。純裝飾。 */ html.sv-intro-on .sv-intro::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: linear-gradient(90deg, transparent, var(--sv-intro-rule), transparent); opacity:0; animation: sv-curtain-edge calc(620ms * var(--sv-intro-k)) linear calc(1010ms * var(--sv-intro-k)) both; } @keyframes sv-curtain-edge{ 0%{ opacity:0 } 18%{ opacity:.9 } 100%{ opacity:0 } } .sv-intro.is-fade::after{ display:none; } /* ---------- 鎖定區 ---------- */ .sv-intro__lock{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:0 24px; text-align:center; /* 簾幕開始抽走前，整組先往上飄一點點並淡掉 —— 讓 Logo 比布先離開，觀感上是「Logo 帶著布走」而不是「布把 Logo 拖走」。 */ animation: sv-lock-out calc(360ms * var(--sv-intro-k)) cubic-bezier(.4,0,1,1) calc(880ms * var(--sv-intro-k)) both; } @keyframes sv-lock-out{ from{ opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-14px) } } /* ---------- A 模式：你上傳的 Logo 圖檔 ---------- 圖檔沒辦法「描邊畫出來」，所以改用由上往下的遮罩擦除。你的 Logo 是直式鎖定（圖標在上、SiteVance 在中、域凡數位在下），由上往下擦剛好就是「圖標 → 英文 → 中文」依序出現，跟參考影片的節奏是同一件事。 */ .sv-intro__img{ overflow:hidden; clip-path: inset(0 0 100% 0); animation: sv-img-wipe calc(680ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) calc(40ms * var(--sv-intro-k)) both; } /* 落下 + 微幅放大。參考影片是「一顆東西從上面掉進來，才開始展開」，位移太小就只是淡入，沒有掉進來的重量。22px 是在 1280 寬看起來剛好的值。 */ .sv-intro__img img, .sv-intro__img svg{ display:block; transform: translateY(-22px) scale(.97); animation: sv-img-settle calc(940ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) calc(40ms * var(--sv-intro-k)) both; } @keyframes sv-img-wipe{ from{ clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0% 0) } } @keyframes sv-img-settle{ from{ transform: translateY(-22px) scale(.97) } to { transform: translateY(0) scale(1) } } /* ---------- B 模式：內建向量標記（還沒上傳深底 Logo 時） ---------- 這個是真的「畫」出來的：連接線用 stroke-dashoffset 描出去，節點一顆一顆彈進來，對應你 Logo 上那組青色網絡點。 */ .sv-intro__mark{ width:96px; height:96px; display:block; } .sv-intro__mark .sv-m-solid{ clip-path: inset(0 0 100% 0); animation: sv-img-wipe calc(620ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) calc(40ms * var(--sv-intro-k)) both; } .sv-intro__mark .sv-m-line{ stroke-dasharray: 120; stroke-dashoffset: 120; animation: sv-draw calc(680ms * var(--sv-intro-k)) cubic-bezier(.65,0,.35,1) calc(300ms * var(--sv-intro-k)) both; } @keyframes sv-draw{ to{ stroke-dashoffset: 0 } } .sv-intro__mark .sv-m-dot{ transform-box: fill-box; transform-origin: center; animation: sv-pop calc(420ms * var(--sv-intro-k)) cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc((360ms + var(--d, 0) * 70ms) * var(--sv-intro-k)); } @keyframes sv-pop{ from{ transform: scale(0); opacity:0 } 60% { transform: scale(1.18); opacity:1 } to { transform: scale(1); opacity:1 } } /* ---------- 字標逐字 ---------- */ .sv-intro__word{ font-family: var(--sv-font-h, "Sora", system-ui, sans-serif); font-size: clamp(26px, 5.2vw, 40px); font-weight: 700; letter-spacing: .13em; color: var(--sv-intro-fg); margin: 0; /* 字距是靠右邊那一格空出來的，尾字後面會多一格，這裡補回來 */ text-indent: .13em; line-height: 1.1; } .sv-intro__ch{ display:inline-block; opacity:0; animation: sv-ch-in calc(520ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) both; animation-delay: calc((440ms + var(--d, 0) * 34ms) * var(--sv-intro-k)); } @keyframes sv-ch-in{ from{ opacity:0; transform: translateY(15px) } to { opacity:1; transform: translateY(0) } } /* ---------- 中文名 + 兩側細線（照你 Logo 上的排法） ---------- */ .sv-intro__zh{ display:flex; align-items:center; gap:14px; font-family: var(--sv-font-b, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 400; letter-spacing: .34em; text-indent: .34em; color: var(--sv-intro-sub); opacity:0; animation: sv-ch-in calc(560ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) calc(700ms * var(--sv-intro-k)) both; } .sv-intro__zh::before, .sv-intro__zh::after{ content:""; display:block; height:1px; width:0; background: var(--sv-intro-rule); animation: sv-rule calc(520ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) calc(760ms * var(--sv-intro-k)) both; } @keyframes sv-rule{ from{ width:0 } to{ width:34px } } /* ---------- 沒有中文名時的單純底線 ---------- */ .sv-intro__rule{ height:1px; width:0; background: linear-gradient(90deg, transparent, var(--sv-intro-rule), transparent); animation: sv-rule-wide calc(560ms * var(--sv-intro-k)) cubic-bezier(.16,1,.3,1) calc(700ms * var(--sv-intro-k)) both; } @keyframes sv-rule-wide{ from{ width:0 } to{ width:180px } } /* ---------- 手機 ---------- */ @media (max-width: 600px){ .sv-intro__mark{ width:74px; height:74px } .sv-intro__img img{ max-width: 62vw; height:auto } .sv-intro__word{ letter-spacing:.1em; text-indent:.1em } .sv-intro__zh{ font-size:12px; letter-spacing:.28em; text-indent:.28em; gap:10px } } /* ---------- 減少動態 ---------- 系統設定要求減少動態的人，直接不要播。 inline script 那邊也擋了一層，這裡是保險 —— 兩層都擋才算數。 */ @media (prefers-reduced-motion: reduce){ html.sv-intro-on{ overflow:auto } html.sv-intro-on .sv-intro{ display:none } } /* 列印時當然不要有簾幕 */ @media print{ .sv-intro{ display:none !important } }