/* ═══════════════════════════════════════════════════ TRC 台灣機器人競賽 — 共用樣式 ═══════════════════════════════════════════════════ */ :root { --navy: #040973; --navy-deep: #060e45; --navy-light: #0a1660; --teal: #00c9b1; --teal-bright: #01EFBA; --teal-dark: #0a8f8f; --white: #ffffff; --gray-bg: #f5f6f8; --tab-active: #01EFBA; /* 斷點 */ --bp-mobile: 768px; } * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } p { font-weight: 500; } li { font-weight: 500; } /* ═══════════════════════════════════════════════════ 英文大標進場動效 — 用 GSAP SplitText（在 common.js 內處理） CSS 端只負責在 JS 載入前先把標題藏起來，避免 FOUC（內容閃現） ═══════════════════════════════════════════════════ */ .section-title-en, .page-en-title, .news-title-en, .section-title-zh, .page-zh-title, .news-title-zh { visibility: hidden; } /* GSAP 載入完成後在 加 .gsap-ready，標題交由 GSAP 控制 */ html.gsap-ready .section-title-en, html.gsap-ready .page-en-title, html.gsap-ready .news-title-en, html.gsap-ready .section-title-zh, html.gsap-ready .page-zh-title, html.gsap-ready .news-title-zh { visibility: visible; } /* GSAP 載入失敗 / prefers-reduced-motion 的 fallback：直接顯示 */ html.gsap-fail .section-title-en, html.gsap-fail .page-en-title, html.gsap-fail .news-title-en, html.gsap-fail .section-title-zh, html.gsap-fail .page-zh-title, html.gsap-fail .news-title-zh { visibility: visible; } @media (prefers-reduced-motion: reduce) { .section-title-en, .page-en-title, .news-title-en, .section-title-zh, .page-zh-title, .news-title-zh { visibility: visible !important; } } /* ═══════════════════════════════════════════════════ 區塊滾動漸進顯示（scroll-reveal） JS 透過 IntersectionObserver 偵測進入視窗、用 GSAP 播放 fade-up GSAP 載入失敗時 fallback 用 CSS transition ═══════════════════════════════════════════════════ */ .scroll-reveal .reveal-stagger, .scroll-reveal:not(:has(.reveal-stagger)) { /* JS 接管時 GSAP 會直接設 inline style，這裡的初始狀態作為 GSAP 載入前的防 FOUC */ } /* GSAP 載入失敗的 CSS fallback */ html.gsap-fail .scroll-reveal .reveal-stagger, html.gsap-fail .scroll-reveal:not(:has(.reveal-stagger)) { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } html.gsap-fail .scroll-reveal.is-revealed .reveal-stagger, html.gsap-fail .scroll-reveal.is-revealed:not(:has(.reveal-stagger)) { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .scroll-reveal, .scroll-reveal .reveal-stagger { opacity: 1 !important; transform: none !important; transition: none !important; } } body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; background: #ffffff; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } /* ═══════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════ */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 72px; display: flex; align-items: center; transition: background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease; } #navbar.transparent { background: transparent; box-shadow: none; } #navbar.scrolled { background: #ffffff; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10); height: 60px; } .nav-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; } /* Logo */ .logo-wrap { display: flex; align-items: center; flex-shrink: 0; } .logo-img { height: 50px; width: auto; display: block; transition: height 0.35s ease; } #navbar.scrolled .logo-img { height: 36px; } .logo-white { display: none; } .logo-color { display: block; } /* 首頁透明 navbar 時顯示白色 logo */ body.home #navbar.transparent .logo-white { display: block; } body.home #navbar.transparent .logo-color { display: none; } #navbar.scrolled .logo-white { display: none; } #navbar.scrolled .logo-color { display: block; } /* Nav Links */ .nav-links { display: flex; align-items: center; gap: 40px; margin-left: auto; list-style: none; } .nav-links a { font-size: 15px; font-weight: 500; letter-spacing: 3px; position: relative; padding-bottom: 4px; transition: color 0.2s; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); } /* 透明狀態的 nav links 顏色 */ #navbar.transparent .nav-links a { color: var(--navy); } body.home #navbar.transparent .nav-links a { color: #ffffff; } body.home #navbar.transparent .nav-links a:hover { color: var(--teal-bright); } /* 滾動後的 nav links 顏色 */ #navbar.scrolled .nav-links a { color: var(--navy); } #navbar.scrolled .nav-links a:hover { color: var(--teal); } #navbar.scrolled .nav-links a::after { display: none; } /* CTA Button */ .nav-cta { margin-left: 40px; padding: 10px 22px; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 1px; background-image: linear-gradient( 39deg, rgba(0, 44, 128, 1) 0%, rgba(6, 225, 182, 1) 50%, rgba(0, 44, 128, 1) 100% ); background-size: 200% 100%; background-position: 0% 50%; color: #ffffff; box-shadow: 0 2px 12px rgba(0, 44, 128, 0.35); transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease; border: none; cursor: pointer; white-space: nowrap; } .nav-cta:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(6, 225, 182, 0.4); } /* Hamburger */ .hamburger { display: none; width: 28px; height: 22px; flex-direction: column; justify-content: space-between; background: none; border: none; padding: 0; cursor: pointer; margin-left: 16px; } .hamburger span { display: block; height: 2.5px; border-radius: 2px; background: var(--navy-deep); transform-origin: center; transition: background 0.3s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s, width 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .hamburger span:nth-child(3) { width: 60%; } body.home #navbar.transparent .hamburger span { background: #ffffff; } .hamburger.active span:nth-child(1) { transform: translateY(9.75px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.active span:nth-child(3) { width: 100%; transform: translateY(-9.75px) rotate(-45deg); } /* ═══════════════════════════════════════════════════ OVERLAY MENU (手機版) ═══════════════════════════════════════════════════ */ #menu-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--navy-light); transform: translateY(-100%); transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1); display: flex; flex-direction: column; overflow: hidden; } #menu-overlay.open { transform: translateY(0); } .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; } .menu-logo-img { height: 50px; width: auto; } .close-btn { background: none; border: none; color: #ffffff; font-size: 36px; font-weight: 300; line-height: 1; cursor: pointer; } .menu-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px; } .menu-nav a { color: #ffffff; font-size: 21px; font-weight: 400; letter-spacing: 6px; transition: color 0.2s; } .menu-nav a:hover, .menu-nav a.active { color: var(--teal); } .menu-reg-btn { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 24px 80px; padding: 15px 20px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.25); background: linear-gradient(135deg, rgba(10, 21, 96, 0.6), var(--teal-dark)); color: #ffffff; font-size: 20px; font-weight: 400; letter-spacing: 5px; } .menu-reg-btn .arrow { font-size: 22px; font-weight: 300; } .menu-footer { padding: 20px 24px; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 12px; letter-spacing: 1px; } .menu-deco { position: absolute; bottom: -60px; left: -40px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 201, 177, 0.15) 0%, transparent 70%); pointer-events: none; } .menu-deco2 { position: absolute; bottom: 0; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 143, 143, 0.2) 0%, transparent 70%); pointer-events: none; } /* 選單項目 fade-in 動畫 */ @keyframes menuFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .menu-nav a, .menu-reg-btn, .menu-footer { opacity: 0; } #menu-overlay.open .menu-nav a:nth-child(1) { animation: menuFadeUp 0.45s ease forwards 0.15s; } #menu-overlay.open .menu-nav a:nth-child(2) { animation: menuFadeUp 0.45s ease forwards 0.25s; } #menu-overlay.open .menu-nav a:nth-child(3) { animation: menuFadeUp 0.45s ease forwards 0.35s; } #menu-overlay.open .menu-reg-btn { animation: menuFadeUp 0.45s ease forwards 0.45s; } #menu-overlay.open .menu-footer { animation: menuFadeUp 0.45s ease forwards 0.55s; } body.menu-open { overflow: hidden; } /* ═══════════════════════════════════════════════════ FOOTER — 依設計稿三欄佈局 ═══════════════════════════════════════════════════ */ footer { background-image: url('../images/footer-bg.jpg'); background-size: contain; background-repeat: repeat-x; background-position: center top; background-color: var(--navy); padding: 200px 0 32px; color: #ffffff; font-weight: 600; position: relative; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1; } /* 三欄主結構：logo / 連結 / 聯絡 */ .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; grid-template-rows: auto auto; gap: 0 64px; align-items: start; margin-bottom: 48px; } .footer-col-brand { grid-column: 1; grid-row: 1 / span 2; } .footer-col-links { grid-column: 2; grid-row: 1; } .footer-col-contact { grid-column: 3; grid-row: 1; } .footer-social { grid-column: 3; grid-row: 2; margin-top: 40px; } /* ─── 第一欄：Logo + 組織單位（單位絕對定位脫離文檔流） ─── */ .footer-col-brand { position: relative; min-height: 320px; } .footer-logo img { height: 52px; width: auto; display: block; } .footer-org { position: absolute; top: 232px; left: 0; right: 0; display: flex; flex-direction: column; gap: 10px; } .footer-org p { font-size: 14px; letter-spacing: 2px; line-height: 1.7; display: flex; gap: 18px; align-items: flex-start; white-space: nowrap; } .footer-org p strong { font-weight: 600; flex-shrink: 0; min-width: 64px; } .footer-org p span { flex: 1; } /* ─── 第二欄：網站連結（單欄垂直） ─── */ .footer-col-links h4, .footer-col-contact h4 { font-size: 16px; font-weight: 600; color: #ffffff; margin-bottom: 28px; letter-spacing: 6px; } .footer-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; } .footer-links-grid a { color: #ffffff; font-size: 15px; letter-spacing: 3px; transition: color 0.2s; } .footer-links-grid a:hover { color: var(--teal-bright); } /* ─── 第三欄：聯絡我們 + 社群圖示 ─── */ .footer-col-contact > p { color: #ffffff; font-size: 15px; letter-spacing: 1px; margin-bottom: 12px; line-height: 1.6; white-space: nowrap; } .footer-col-contact > p a { color: #ffffff; } .footer-col-contact > p a:hover { color: var(--teal-bright); } .footer-social { margin-top: 0; } .social-title { font-size: 14px; letter-spacing: 4px; margin-bottom: 14px; color: #ffffff; } .social-icons { display: flex; gap: 12px; } .social-icon { width: 38px; height: 38px; display: block; cursor: pointer; transition: transform 0.25s ease, opacity 0.25s ease; } .social-icon:hover { transform: translateY(-2px); opacity: 0.8; } .social-icon img { width: 100%; height: 100%; display: block; } /* ─── 底部 row：版權 ↔ 瀏覽人次 ─── */ .footer-bottom { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 64px; align-items: center; } .footer-copyright, .footer-visits { font-size: 13px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.85); margin: 0; } .footer-copyright { grid-column: 1; } .footer-visits { grid-column: 3; } .footer-visits .count { color: #ffffff; font-weight: 600; font-family: 'Barlow', sans-serif; margin-left: 8px; } /* ═══════════════════════════════════════════════════ 響應式 — 手機版（≤768px） ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Navbar 改為手機版佈局 */ #navbar { height: 60px; background: transparent; } body.home #navbar.transparent { background: transparent; } /* 內頁手機版 navbar 預設白底 */ body:not(.home) #navbar { background: #ffffff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } body:not(.home) #navbar.scrolled { background: #ffffff; } .nav-inner { padding: 0 20px; justify-content: space-between; } .logo-img { height: 40px; } #navbar.scrolled .logo-img { height: 36px; } /* 隱藏桌機 nav links，顯示 hamburger */ .nav-links { display: none; } .nav-cta { margin-left: 0; padding: 8px 18px; font-size: 13px; letter-spacing: 2px; box-shadow: 0 2px 8px rgba(0, 44, 128, 0.3); } .hamburger { display: flex; } /* Footer 手機版 */ footer { padding: 210px 0 42px; background-image: url('../images/footer-bg-mobile.jpg'); background-size: cover; background-position: center top; background-color: var(--navy); } .footer-inner { padding: 0 30px; } /* 手機版：拆解 col-brand 讓 logo 與單位可獨立排序 */ .footer-top { display: flex; flex-direction: column; gap: 32px; } /* 手機版：拆解 col-brand 讓 logo 與單位獨立排序 */ .footer-col-brand { display: contents; } .footer-logo { order: 1; } .footer-col-links { order: 2; width: 100%; } .footer-col-contact { order: 3; } .footer-org { order: 4; position: static; margin: 0; min-height: 0; } .footer-social { order: 5; width: 100%; text-align: center; } /* 手機版隱藏「金屬中心官方社群」標題 */ .social-title { display: none; } /* 社群 icons 整體置中 */ .social-icons { justify-content: center; gap: 16px; } .social-icon { width: 42px; height: 42px; } .footer-org p { font-size: 16px; letter-spacing: 1.5px; white-space: normal; } .footer-logo img { height: 48px; } /* 手機版字級依設計稿 */ .footer-col-links h4, .footer-col-contact h4 { font-size: 20px; letter-spacing: 4px; margin-bottom: 20px; } .footer-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; } .footer-links-grid a { font-size: 18px; letter-spacing: 3px; } /* 第 2、4… 偶數項置右 */ .footer-links-grid a:nth-child(even) { text-align: right; } .footer-col-contact > p { font-size: 16px; white-space: normal; } /* 底部：版權在下、瀏覽人次在上 */ .footer-bottom { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 40px; text-align: left; } .footer-copyright, .footer-visits { grid-column: auto; font-size: 14px; letter-spacing: 1px; } } @media (max-width: 480px) { .nav-inner { padding: 0 16px; } .nav-cta { padding: 7px 14px; font-size: 12px; } } /* ═══════════════════════════════════════════════════ 頁面切換淡入淡出（A: View Transitions API + B: JS fade） ═══════════════════════════════════════════════════ */ /* B 方案：body 起始狀態 + fade-out 動畫 */ body { opacity: 1; transition: opacity 0.35s ease; } body.page-fade-in { opacity: 0; } body.page-fade-out { opacity: 0; } /* A 方案：原生 View Transitions（Chrome 111+/Safari 18+） */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; } ::view-transition-old(root) { animation-name: trc-fade-out; } ::view-transition-new(root) { animation-name: trc-fade-in; } @keyframes trc-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes trc-fade-in { from { opacity: 0; } to { opacity: 1; } }