body { background-image: url('/圖片/DSC_1999.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } .camera-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); } /* ==== 參數 ==== */ :root { --nav-h: 58px; } /* 導覽高度統一管控 */ /* 有固定導覽的頁面，幫主內容往下推（在加 class="with-fixed-nav"） */ .with-fixed-nav { padding-top: calc(var(--nav-h) + 10px); } /* ==== 固定導覽列 ==== */ .main-navbar{ position: fixed; inset: 0 0 auto 0; /* top:0; left:0; right:0 */ height: var(--nav-h); z-index: 9999; display: flex; align-items: center; background: linear-gradient(90deg, rgba(2,100,200,.82), rgba(42,166,255,.78)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.20); transition: height .25s ease, box-shadow .25s ease, background .25s ease; padding: .2rem 1.5rem; } /* 捲動縮小（JS 加上 .scrolled 即可） */ .main-navbar.scrolled{ height: calc(var(--nav-h) - 10px); background: linear-gradient(90deg, rgba(2,100,200,.90), rgba(42,166,255,.86)); box-shadow: 0 18px 60px rgba(0,0,0,.28); } /* 內部容器 */ .nav-container{ width: 100%; max-width: 1200px; margin: 0 auto; height: 100%; display:flex; align-items:center; justify-content:space-between; } /* 左：Logo */ .nav-left .logo{ height: 46px; display:block; } .main-navbar.scrolled .nav-left .logo{ height: 38px; transition: height .25s ease; } /* 右：連結群（鎖住不換行，避免「首頁」被拆兩行） */ .nav-right{ display:flex; align-items:center; gap: 20px; flex-wrap: nowrap; /* 關鍵 */ } .nav-right a{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:.02em; padding:10px 12px; border-radius:999px; transition: color .2s ease, background .2s ease, transform .2s ease; white-space: nowrap; /* 關鍵 */ } .nav-right a:hover{ color: var(--accent, #63e6be); background: rgba(255,255,255,.08); transform: translateY(-1px); } /* RWD 微調 */ @media (max-width: 580px){ .nav-left .logo{ height: 40px; } .nav-right{ gap: 14px; } .nav-right a{ font-size: .95rem; padding: 8px 10px; } } /* ========== 即時影像樣式區塊 ========== */ .camera-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); padding: 2rem; border-radius: 1.5rem; margin: 2rem auto; width: 95%; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); } .camera-card h2 { font-size: 1.6rem; margin-bottom: 1rem; color: #ffffff; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .video-grid iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; border: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* 響應式設計優化 */ .camera-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 1.5rem; border-radius: 1.25rem; margin: 1.5rem auto; width: 95%; max-width: 1100px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); } .video-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } /* 平板（大於 600px） */ @media (min-width: 600px) { .video-grid { grid-template-columns: repeat(2, 1fr); } } /* 桌機（大於 1024px） */ @media (min-width: 1024px) { .camera-card { padding: 2rem 2.5rem; } .video-grid { gap: 1.5rem; } } /** 訪問人數顯示區塊 - 藥丸樣式 */ #visitor-count { display: inline-block; padding: 0.5rem 1.2rem; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 1rem; font-weight: 500; border-radius: 999px; backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); margin: 2rem auto 2.5rem auto; text-align: center; animation: fadeIn 1s ease-out; } #visitor-count:hover { background: rgba(0, 0, 0, 0.6); transform: scale(1.05); transition: all 0.3s ease; } /* 主視覺區塊 */ .hero-section { text-align: center; padding: 3rem 1rem 2rem 1rem; background: linear-gradient(to right, rgba(255, 255, 255, 0.884), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(10px); border-radius: 1rem; margin: 1.5rem auto; max-width: 720px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.315); } .hero-section h1 { font-size: 2.4rem; font-weight: 700; color: #ffffff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.719); margin-bottom: 0.8rem; } .hero-section .subtitle { font-size: 1.2rem; line-height: 1.6; color: #f1f1f1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.884); } /* RWD 適配 */ @media (max-width: 768px) { .hero-section { padding: 5rem 1.5rem 2rem 1.5rem; } .hero-section h1 { font-size: 2rem; } .hero-section .subtitle { font-size: 1rem; } } @media (max-width: 480px) { .hero-section h1 { font-size: 1.6rem; } .hero-section .subtitle { font-size: 0.95rem; } } .video-grid { display: flex; flex-direction: column; gap: 1rem; align-items: center; /* 影片置中 */ } .video-grid iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; } .camera-card { margin: 1rem auto; padding: 1rem; width: 95%; /* 手機小寬度時更窄 */ max-width: 100%; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 1rem; } .hero-section { margin: 1.5rem auto; padding: 1.5rem 1rem; width: 90%; text-align: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border-radius: 1rem; } @media (min-width: 768px) { .video-grid { flex-direction: row; justify-content: center; } .video-grid iframe { width: 45%; } .camera-card { width: 80%; } .hero-section { width: 60%; } } * { box-sizing: border-box; } body { margin: 0; padding: 0; overflow-x: hidden; /* 防止橫向滾動 */ } @media (max-width: 580px) { nav .nav-right a { font-size: 1rem; /* 原本是 1rem，這裡變小 */ margin-left: 1rem; /* 如果太擠也可以再小一點 */ } nav .nav-left img, .nav-left .logo { height: 40px; /* Logo 也可以稍微變小 */ } } /* sponsor.css */ .hero-section h1 { letter-spacing: .05em; } .hero-section .subtitle { opacity: .95; } .support-grid { width: 90%; max-width: 1100px; margin: 1rem auto 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .plan-card { background: rgba(49, 48, 48, 0.404); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(10px); padding: 1.25rem 1.1rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .plan-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.24); background: rgba(2, 91, 163, 0.521); } .plan-emoji { font-size: 1.9rem; line-height: 1; } .plan-title { margin: .6rem 0 .25rem; font-size: 1.15rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .plan-price { font-size: 1.4rem; font-weight: 900; color: #63e6be; margin-bottom: .4rem; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .plan-desc { color: #f1f1f1; font-size: .95rem; line-height: 1.55; margin: .35rem 0 .8rem; } .plan-list { color: #e9f5ff; font-size: .9rem; margin: .2rem 0 .9rem; padding-left: 1.1rem; } .plan-list li { margin: .2rem 0; } .btn-sponsor { display: inline-block; width: 100%; text-align: center; padding: .65rem 1rem; border-radius: 999px; font-weight: 800; background: linear-gradient(135deg, rgba(0,136,204,.9), rgba(99,230,190,.95)); color: rgb(255, 255, 255); text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: filter .15s ease, transform .1s ease; } .btn-sponsor:hover { filter: brightness(1.03); transform: translateY(-1px); } .btn-sponsor:active { transform: translateY(0); } .note-wrap { width: 90%; max-width: 900px; margin: 1rem auto 2.5rem; background: rgba(29, 29, 29, 0.658); border-radius: 1rem; padding: 1rem 1.25rem; color: #e9f5ff; backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0,0,0,.18); } .note-wrap h3 { margin: .2rem 0 .6rem; color: #fff; } .note-wrap p, .note-wrap li { font-size: .95rem; line-height: 1.6; } .supporters { width: 90%; max-width: 1000px; margin: 0 auto 2.5rem; background: rgba(255,255,255,.10); border-radius: 1rem; padding: 1rem 1.25rem; color: #e9f5ff; }