/* ===================================================================== wildgain.css — 野果集團共用設計系統（A+D：暗黑電影感 × 霓虹律動） --------------------------------------------------------------------- 用法：頁面加上然後依「元件」區塊的 class 組版即可。完整範本見 design-kit/template.html，風格說明見 DESIGN.md。核心理念：霓虹能量集中在 hero 一處，其餘區塊保持安靜深色。 ===================================================================== */ /* ---------- 1. Design tokens（改色改字只改這裡） ---------- */ :root { --bg: #09080a; /* 頁面底 · 近黑 */ --bg-2: #100d10; /* 次層 · 卡片底 */ --panel: #171319; /* 面板 · 表單 */ --ink: #f5efec; /* 主文字 · 暖白 */ --muted: #a99e98; /* 次文字 */ --faint: #6f6560; /* 標籤 · 說明 */ --accent: #e0503c; /* 品牌磚紅 */ --accent-2:#ff6a54; /* 亮紅 · hover */ --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.05); /* 舞台燈霓虹漸層——只用在重點（hero 大標、重點卡框、跑馬燈點） */ --neon: linear-gradient(100deg, #ff5a6e 0%, #c063ff 48%, #ffab4a 100%); --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --maxw: 1180px; --nav-h: 62px; /* 左右留白：手機 26px，隨螢幕變寬最多到 72px，桌機才不會貼邊 */ --gutter: clamp(26px, 5vw, 72px); } /* ---------- 2. Base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* 細顆粒噪點，加電影質感（可移除） */ body.wg-grain::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: var(--accent); color: #fff; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); } .neon-text { background: var(--neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- 3. Nav ---------- */ .wg-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: rgba(9,8,10,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .wg-nav.scrolled { border-bottom-color: var(--line); background: rgba(9,8,10,0.85); } .wg-logo { display: flex; align-items: center; gap: 0.6rem; } .wg-mark { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; color: #fff; background: var(--accent); box-shadow: 0 0 18px rgba(224,80,60,0.6); } .wg-mark-img { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: contain; box-shadow: 0 0 16px rgba(224,80,60,0.35); } .wg-logo-name { font-weight: 800; letter-spacing: 0.02em; font-size: 0.98rem; } .wg-logo-name span { display: block; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.22em; color: var(--faint); font-weight: 400; } .wg-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; } .wg-links a { font-size: 0.85rem; color: var(--muted); transition: color .2s; } .wg-links a:hover { color: var(--ink); } .wg-links .cta { border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1.05rem !important; color: var(--ink) !important; } .wg-links .cta:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(224,80,60,0.35); } .wg-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; } .wg-burger span { width: 24px; height: 2px; background: var(--ink); transition: .3s; } /* ---------- 4. Buttons ---------- */ .btn { font-size: 0.92rem; font-weight: 600; padding: 0.85rem 1.7rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .2s; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { box-shadow: 0 8px 32px -6px rgba(224,80,60,0.7); transform: translateY(-2px); } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); } /* ---------- 5. Hero（招牌：霓虹能量集中處） ---------- */ .wg-hero { position: relative; min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 3rem) var(--gutter) 0; overflow: hidden; } .wg-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 46% at 68% 58%, rgba(224,80,60,0.30), transparent 68%), radial-gradient(40% 40% at 18% 22%, rgba(192,99,255,0.14), transparent 70%), radial-gradient(46% 40% at 88% 84%, rgba(255,171,74,0.12), transparent 72%); } /* flex:1 讓內容區撐滿 hero，跑馬燈才會貼在 hero 底緣，不會因為整組被垂直置中而在下方留一段空白 */ .wg-hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; align-content: center; } .wg-hero .eyebrow { display: block; margin-bottom: 1.5rem; } .wg-hero h1 { font-size: clamp(2.6rem, 10vw, 6.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; margin-bottom: 1.3rem; } .wg-hero h1 .neon-text { animation: wg-hue 9s ease-in-out infinite; } .wg-hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--muted); max-width: 46ch; margin-bottom: 2.2rem; } .wg-hero-sub b { color: var(--ink); font-weight: 600; } .wg-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* ---------- 6. Marquee（招牌律動） ---------- */ .wg-marquee { position: relative; z-index: 1; margin-top: clamp(2.5rem,6vw,4rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.9rem 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .wg-marquee-track { display: inline-flex; gap: 2.2rem; white-space: nowrap; will-change: transform; animation: wg-marq 20s linear infinite; } .wg-marquee-track span { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--muted); } .wg-marquee-track span::after { content: "◆"; margin-left: 2.2rem; font-size: 0.6rem; vertical-align: middle; } .wg-marquee-track span:nth-child(3n)::after { color: #ff5a6e; } .wg-marquee-track span:nth-child(3n+1)::after { color: #c063ff; } .wg-marquee-track span:nth-child(3n+2)::after { color: #ffab4a; } .wg-marquee:hover .wg-marquee-track { animation-play-state: paused; } /* ---------- 7. Section shell ---------- */ .wg-band { padding: clamp(3rem,5.5vw,4.5rem) 0; position: relative; } .wg-band.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .wg-head { margin-bottom: clamp(2rem,5vw,3.2rem); } .wg-head.center { text-align: center; } .wg-head.center p { margin-left: auto; margin-right: auto; } .wg-head .eyebrow { display: block; margin-bottom: 0.9rem; } .wg-head h2 { font-size: clamp(1.8rem,4.2vw,2.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; } .wg-head p { color: var(--muted); max-width: 52ch; margin-top: 0.9rem; } /* ---------- 8. Card grid（服務／品牌等） ---------- */ .wg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .wg-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .wg-card { position: relative; background: var(--bg-2); padding: 2rem 1.8rem; overflow: hidden; transition: background .25s; display: flex; flex-direction: column; } .wg-card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--neon); transition: height .35s; } .wg-card:hover { background: var(--panel); } .wg-card:hover::before { height: 100%; } .wg-card .num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--faint); } .wg-card h3 { font-size: 1.2rem; font-weight: 800; margin: 0.9rem 0 0.6rem; } .wg-card p { color: var(--muted); font-size: 0.88rem; flex: 1; } .wg-card .go { margin-top: 1.2rem; font-size: 0.82rem; color: var(--accent-2); display: inline-flex; align-items: center; gap: 0.45rem; } .wg-card .go::after { content: "→"; transition: transform .2s; } .wg-card:hover .go::after { transform: translateX(5px); } /* ---------- 9. Feature card（重點卡：霓虹漸層外框） ---------- */ .wg-feature { position: relative; border-radius: 20px; padding: clamp(2rem,5vw,3.4rem); overflow: hidden; background: var(--bg-2); } .wg-feature::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: 20px; background: var(--neon); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.85; pointer-events: none; } .wg-feature::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 88% 10%, rgba(192,99,255,0.18), transparent 60%), radial-gradient(60% 120% at 10% 90%, rgba(224,80,60,0.16), transparent 60%); pointer-events: none; } .wg-feature > * { position: relative; z-index: 1; } /* ---------- 10. Stats ---------- */ .wg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .wg-stat { text-align: center; } .wg-stat .n { font-size: clamp(2.2rem,6vw,3.4rem); font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .wg-stat .n em { font-style: normal; } .wg-stat .l { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 0.4rem; } /* ---------- 11. Steps ---------- */ .wg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .wg-step { border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.4rem; background: var(--bg-2); } .wg-step .n { font-family: var(--mono); font-size: 0.9rem; color: var(--accent-2); letter-spacing: 0.1em; } .wg-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0.8rem 0 0.5rem; } .wg-step p { color: var(--muted); font-size: 0.85rem; } /* ---------- 12. Form（接 Formspree，配 wildgain.js） ---------- */ .wg-form { display: grid; gap: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem,3vw,2rem); } .wg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .wg-field label { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem; } .wg-field input, .wg-field select, .wg-field textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.85rem; color: var(--ink); font-family: inherit; font-size: 0.9rem; transition: border-color .2s; } .wg-field textarea { min-height: 96px; resize: vertical; } .wg-field input:focus, .wg-field select:focus, .wg-field textarea:focus { outline: none; border-color: var(--accent); } .wg-form .btn-primary { justify-content: center; width: 100%; } /* 送出後的狀態訊息（由 wildgain.js 動態插入，平常不占空間） */ .wg-form-status { display: none; } .wg-form-status.show { display: block; border-radius: 10px; padding: 0.95rem 1.1rem; font-size: 0.86rem; line-height: 1.7; animation: wg-status-in .3s ease both; } .wg-form-status b { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; } .wg-form-status span { color: var(--muted); } .wg-form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .wg-form-status.ok { background: rgba(74,190,120,0.12); border: 1px solid rgba(74,190,120,0.45); color: #8fe0ac; } .wg-form-status.err { background: rgba(224,80,60,0.12); border: 1px solid rgba(224,80,60,0.45); color: var(--accent-2); } @keyframes wg-status-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .wg-form-status.show { animation: none; } } /* ---------- 13. Footer ---------- */ .wg-footer { border-top: 1px solid var(--line); padding: 3rem 0; } .wg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem; } .wg-foot-logo { font-weight: 800; } .wg-foot-links { display: flex; gap: 1.3rem; flex-wrap: wrap; } .wg-foot-links a { font-size: 0.85rem; color: var(--muted); } .wg-foot-links a:hover { color: var(--ink); } .wg-foot-copy { width: 100%; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--faint); } /* ---------- 14. Reveal（配 wildgain.js） ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- 15. Keyframes ---------- */ @keyframes wg-marq { to { transform: translateX(-50%); } } @keyframes wg-hue { 0%,100% { filter: drop-shadow(0 0 26px rgba(224,80,60,0.22)); } 50% { filter: drop-shadow(0 0 40px rgba(192,99,255,0.4)); } } @media (prefers-reduced-motion: reduce) { .wg-marquee-track, .wg-hero h1 .neon-text { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- 16. Responsive ---------- */ @media (max-width: 860px) { .wg-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; gap: 0; background: rgba(9,8,10,0.97); backdrop-filter: blur(14px); padding: 0.5rem 0; transform: translateY(-120%); transition: transform .3s; border-bottom: 1px solid var(--line); } .wg-links.open { transform: none; } .wg-links li { width: 100%; text-align: center; } .wg-links a { display: block; padding: 0.85rem; } .wg-links .cta { border: 0; } .wg-burger { display: flex; } .wg-grid, .wg-grid.cols-2 { grid-template-columns: 1fr; } .wg-stats { grid-template-columns: 1fr 1fr; gap: 2.2rem 1rem; } .wg-steps { grid-template-columns: 1fr 1fr; } .wg-form-row { grid-template-columns: 1fr; } } /* ---------- 17. LINE 加好友（.line-box，配 wildgain.js 的複製功能） ---------- */ /* ── LINE 加好友 ── */ .line-box { display: flex; gap: 1.4rem; align-items: flex-start; margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--line); } .line-qr { position: relative; flex: 0 0 132px; width: 132px; height: 132px; background: #fff; border-radius: 12px; overflow: hidden; } .line-qr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; } .line-qr-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: #bbb; } .line-info { min-width: 0; } .line-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; } .line-note { font-size: 0.8rem; color: var(--faint); line-height: 1.7; margin-bottom: 0.8rem; } .line-id { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; } .line-id code { font-family: var(--mono); font-size: 0.92rem; color: var(--ink); letter-spacing: 0.02em; } .line-copy { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; background: none; border: 1px solid var(--line); color: var(--muted); padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer; transition: all .16s; } .line-copy:hover { border-color: var(--accent); color: var(--ink); } .line-copy.done { border-color: #06C755; color: #06C755; } .line-btn { display: inline-flex; align-items: center; gap: 0.55rem; background: #06C755; color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.7rem 1.3rem; border-radius: 999px; transition: transform .2s, box-shadow .2s; } .line-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(6,199,85,0.65); } .line-btn-mark { font-family: var(--mono); font-weight: 900; font-size: 0.66rem; letter-spacing: 0.1em; background: rgba(255,255,255,0.22); border-radius: 4px; padding: 0.14rem 0.36rem; } /* 手機掃不到自己螢幕上的 QR，所以收起來，只留按鈕 */ @media (max-width: 560px) { .line-box { display: block; } .line-qr { display: none; } } /* CTA 區塊置中版本 */ /* .line-id 裡的 ID 小標，避免依賴各頁自己的 .contact-tag */ .line-id .contact-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .line-box.center { justify-content: center; max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }