/* ========================================================= 学赚 · 任务平台 — 公共样式（neo-brutalism） 纯 CSS3，配合 jQuery。三套主题用 切换。 ========================================================= */ /* ---------- 主题皮肤（HSL 分量，配合 hsl(var(--x)) 使用）---------- */ /* 任务大厅：深色霓虹 */ [data-theme="dark"] { --background: 231 21% 11%; --foreground: 0 0% 100%; --card: 231 21% 15%; --primary: 348 98% 58%; /* 玫红 */ --primary-foreground: 0 0% 100%; --secondary: 178 91% 55%; /* 青蓝 */ --secondary-foreground: 0 0% 10%; --muted: 231 10% 25%; --muted-foreground: 0 0% 70%; --accent: 0 0% 20%; --border: 231 12% 32%; --radius: .75rem; --gradient-primary: linear-gradient(135deg, hsl(348 98% 58%), hsl(178 91% 55%)); --neo-shadow: hsl(var(--border)); --glass-bg: rgba(255,255,255,.05); --glass-border: rgba(255,255,255,.12); } /* 视频代发：黑白 neo + 黄色点缀 */ [data-theme="light"] { --background: 0 0% 100%; --foreground: 240 10% 4%; --card: 0 0% 100%; --primary: 240 6% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 5% 96%; --secondary-foreground: 240 6% 10%; --muted: 240 5% 96%; --muted-foreground: 240 4% 46%; --accent: 240 5% 96%; --border: 240 6% 10%; --radius: 0px; --gradient-primary: linear-gradient(135deg, hsl(240 6% 10%), #ff0080, #7928ca); --neo-shadow: #000; } /* 评论流程：奶油紫 */ [data-theme="cream"] { --background: 45 100% 96%; --foreground: 280 100% 8%; --card: 0 0% 100%; --primary: 280 100% 45%; /* 紫 */ --primary-foreground: 0 0% 100%; --secondary: 170 100% 40%; /* 青绿 */ --secondary-foreground: 0 0% 100%; --muted: 45 30% 90%; --muted-foreground: 280 20% 40%; --accent: 30 100% 88%; /* 浅橙 */ --accent-foreground: 280 100% 8%; --border: 280 100% 8%; --radius: 0px; --gradient-primary: linear-gradient(135deg, #9900e6, #ff0055); --neo-shadow: hsl(280 100% 8%); } /* ---------- Reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; } /* ---------- 文字工具 ---------- */ .display { font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1.05; } .uppercase { text-transform: uppercase; } .muted { color: hsl(var(--muted-foreground)); } .text-primary { color: hsl(var(--primary)); } .text-secondary { color: hsl(var(--secondary)); } .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ========================================================= neo-brutalism 组件 ========================================================= */ .neo { border: 4px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: 8px 8px 0 0 var(--neo-shadow); transition: transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1); } .neo-hover:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 0 var(--neo-shadow); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.5rem; font-weight: 800; font-size: 15px; border: 4px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 4px 4px 0 0 var(--neo-shadow); text-transform: uppercase; letter-spacing: -.03em; transition: transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s, background .2s; } .btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--neo-shadow); } .btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 0 var(--neo-shadow); } .btn-secondary { background: #fff; color: hsl(var(--border)); } .btn-accent { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn-block { width: 100%; } .btn-lg { padding: 1rem 2rem; font-size: 17px; } .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; font-size: 13px; font-weight: 700; } .pill-primary { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); } .pill-secondary { background: hsl(var(--secondary) / .12); color: hsl(var(--secondary)); } .badge { display: inline-block; padding: .15rem .5rem; font-size: 11px; font-weight: 800; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; } /* 玻璃卡（仅深色主题视觉）—— 非深色下退化为普通 neo 卡 */ .glass { border: 4px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 8px 8px 0 0 var(--neo-shadow); background: hsl(var(--card)); } [data-theme="dark"] .glass { background: var(--glass-bg); border-color: var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* ========================================================= 通用区块 ========================================================= */ .header { position: sticky; top: 0; z-index: 40; background: hsl(var(--background) / .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .header .wrap { height: 60px; display: flex; align-items: center; gap: 16px; } .logo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-style: italic; font-size: 20px; } .logo .mark { width: 32px; height: 32px; display: grid; place-items: center; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: 3px solid hsl(var(--border)); font-style: normal; font-size: 16px; } .header .spacer { margin-left: auto; } .section { padding: 56px 0; } .section-title { font-size: clamp(28px, 5vw, 56px); text-align: center; margin-bottom: 8px; } .section-sub { text-align: center; font-size: 18px; } .footer { border-top: 4px solid hsl(var(--border)); padding: 28px 0; margin-top: 40px; } .footer .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .footer .links { display: flex; gap: 18px; } .footer a { font-size: 14px; font-weight: 600; } .footer a:hover { color: hsl(var(--primary)); } .footer .copy { margin-left: auto; font-size: 13px; } /* ========================================================= 动画 ========================================================= */ @keyframes bounce-subtle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes finger-tap { 0%,100% { opacity:.6; transform: scale(1) translateY(0);} 50% { opacity:1; transform: scale(.9) translateY(4px);} } @keyframes url-appear { 0%,50% { opacity:0; transform: scale(.8);} 65%,90% { opacity:1; transform: scale(1);} 100% { opacity:0; transform: scale(1);} } @keyframes saved-pop { 0%,60% { opacity:0; transform: scale(.6);} 75% { opacity:1; transform: scale(1.15);} 100% { opacity:1; transform: scale(1);} } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulse-success { 0%{box-shadow:0 0 0 0 #22c55e66; transform:scale(1)} 70%{box-shadow:0 0 0 12px #22c55e00; transform:scale(1.06)} 100%{box-shadow:0 0 0 0 #22c55e00; transform:scale(1)} } @keyframes pulse-border { 0%,100%{box-shadow:8px 8px 0 0 var(--neo-shadow), 0 0 0 0 transparent} 50%{box-shadow:8px 8px 0 0 var(--neo-shadow), 0 0 22px 4px hsl(var(--primary)/.35)} } @keyframes spin { to { transform: rotate(360deg); } } .animate-bounce-subtle { animation: bounce-subtle 2s ease-in-out infinite; } .animate-finger-tap { animation: finger-tap 1.5s ease-in-out infinite; } .animate-pulse-border { animation: pulse-border 2s infinite; } .animate-pulse-success { animation: pulse-success 2s infinite; } /* 跑马灯 */ .marquee { overflow: hidden; white-space: nowrap; } .marquee > .track { display: inline-block; animation: marquee 18s linear infinite; } .marquee:hover > .track { animation-play-state: paused; } /* 滚动进入视口淡入 */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } /* Toast */ .toast { position: fixed; left: 50%; top: 22px; transform: translate(-50%,-14px); z-index: 999; padding: .7rem 1.3rem; font-weight: 800; background: hsl(var(--foreground)); color: hsl(var(--background)); border: 3px solid hsl(var(--border)); box-shadow: 4px 4px 0 0 var(--neo-shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; } .toast.show { opacity: 1; transform: translate(-50%,0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ========================================================= 补充组件（多图上传 / FAQ / 奖励政策 / 客服条） ========================================================= */ /* 上传缩略图（带移除按钮） */ .preview { display: flex; flex-wrap: wrap; gap: 10px; } .preview:empty { margin: 0; } .preview .thumb { position: relative; width: 76px; height: 76px; background-size: cover; background-position: center; border: 3px solid hsl(var(--border)); } .preview .thumb-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; line-height: 1; border: 2px solid hsl(var(--border)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 900; border-radius: 999px; display: grid; place-items: center; } .up-count { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; } /* FAQ 手风琴 */ .faq { display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 4px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: 6px 6px 0 0 var(--neo-shadow); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 800; font-size: 16px; text-align: left; } .faq-q .chev { transition: transform .25s; font-weight: 900; } .faq-item.open .faq-q .chev { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a > div { padding: 0 18px 16px; color: hsl(var(--muted-foreground)); } /* 奖励政策三卡 */ .rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .rw { padding: 20px; border: 4px solid hsl(var(--border)); box-shadow: 8px 8px 0 0 var(--neo-shadow); } .rw .rw-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .7; } .rw h3 { font-size: 18px; font-weight: 900; margin: 6px 0 8px; text-decoration: underline; text-underline-offset: 4px; } .rw .rw-num { font-size: 34px; font-weight: 900; font-style: italic; } .rw .rw-num span { font-size: 14px; font-style: normal; font-weight: 600; opacity: .7; } .rw p { font-size: 13px; margin-top: 8px; } .rw-yellow { background: #fde047; color: #000; } .rw-blue { background: #93c5fd; color: #0b2a6b; } .rw-dark { background: #18181b; color: #fff; } .rw-dark .rw-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.15); } .rw-dark .rw-row b { font-size: 18px; } .rw-dark .rw-note { font-size: 11px; opacity: .6; margin-top: 10px; } /* 客服 / 记录 横条 */ .support-bar { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 4px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: 8px 8px 0 0 var(--neo-shadow); } .support-bar .sb-ico { width: 44px; height: 44px; flex: none; border-radius: 999px; border: 3px solid hsl(var(--border)); display: grid; place-items: center; font-size: 20px; background: hsl(var(--card)); } .support-bar h3 { font-size: 17px; font-weight: 900; } .support-bar p { font-size: 13px; color: hsl(var(--muted-foreground)); } .support-bar .btn { margin-left: auto; } .btn-green { background: #22c55e; color: #fff; border-color: hsl(var(--border)); } /* 结算限制 / 警示条 */ .limit-bar { /* display: flex; gap: 10px; align-items: flex-start; */ padding: 14px 16px; background: #fde047; border: 4px solid hsl(var(--border)); box-shadow: 6px 6px 0 0 var(--neo-shadow); font-weight: 700; } .limit-bar b { background: #000; color: #fde047; padding: 1px 6px; } @media (max-width: 720px) { .rewards { grid-template-columns: 1fr; } }