/* styles.css — 同学聚会 H5 视觉系统 主题：墨蓝底 + 可切换主题色（金色 / 橙色） · 典雅宋体 说明：本文件仅承载「视觉」。所有被 JS 引用的类名与结构（.form-radio / .option-item / .btn-item / .radio-dot / .checkbox-box / .share-option / .map-option / .sponsor-panel / .active / .hidden / .slide-up / .slide-down / .required-star / .inline-img-token 等） 一律保留，切勿删改其名称与语义。 主题色一律走 CSS 变量（--gold-* / --gold-rgb / --grad-* / --btn-*）； 切换主题只需在 上设置 data-theme="orange"。 */ /* ============ 设计变量（默认：香槟金主题） ============ */ :root { /* 墨蓝底色 */ --ink-950: #060d1e; --ink-900: #0a1730; --ink-850: #0e1e3d; --ink-800: #132646; --ink-700: #1b3663; --ink-600: #26497f; /* 页面背景（随主题切换：金色=墨蓝底） */ --bg-0: #060d1e; /* 最深基色（body） */ --bg-1: #0b1a38; /* 背景渐变上 */ --bg-2: #081227; /* 背景渐变中 */ --bg-3: #17325f; /* 顶部光晕 */ --bg-rgb-deep: 6, 13, 30; /* 深色遮罩 rgba */ --bg-rgb-mid: 10, 23, 48; /* 中间蓝 rgba */ --bg-rgb-accent: 38, 73, 127; /* 顶部彩色光晕 rgba */ --bg-rgb-transtop: 19, 38, 70; /* 透明停靠点(alpha0) */ --panel-rgb-1: 14, 30, 61; /* 弹窗面板上 */ --panel-rgb-2: 6, 13, 30; /* 弹窗面板下 */ /* 主题强调色 RGB（切主题时替换这一个即可带动大量半透明色） */ --gold-rgb: 212, 175, 55; /* 主题色阶（实心色，用于文字/渐变停靠点） */ --gold-100: #fbf3d8; --gold-200: #f6e7b6; --gold-300: #eed692; --gold-400: #e3c169; --gold-500: #d4af37; --gold-600: #b58f2c; /* 标题渐变停靠点 */ --grad-hi: #fbf0cc; --grad-mid: #f0d98f; --grad-core: #d4af37; --grad-soft: #f6e7b6; /* 主按钮渐变与阴影 */ --btn-1: #f5e2a0; --btn-2: #e3c169; --btn-3: #d4af37; --btn-shadow-rgb: 180, 143, 44; /* 派生色（自动跟随 --gold-rgb） */ --gold-line: rgba(var(--gold-rgb), 0.55); --gold-soft: rgba(var(--gold-rgb), 0.14); --gold-glow: rgba(var(--gold-rgb), 0.45); /* 玻璃与描边 */ --paper: rgba(255, 255, 255, 0.08); --paper-2: rgba(255, 255, 255, 0.05); --hairline: rgba(255, 255, 255, 0.14); --hairline-strong: rgba(255, 255, 255, 0.24); /* 文本 */ --text-hi: #f4f7ff; --text-mid: rgba(226, 235, 255, 0.82); --text-low: rgba(210, 222, 250, 0.6); /* 字体 */ --font-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", serif; --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --shadow-card: 0 24px 60px -22px rgba(3, 10, 28, 0.8), 0 2px 10px rgba(3, 10, 28, 0.35); } /* ============ 橙色主题（切换即整套变橙） ============ */ html[data-theme="orange"] { /* 鲜明的纯正橙（偏红、高饱和，与金色明显区分） */ --gold-rgb: 247, 91, 12; --gold-100: #ffe0bf; --gold-200: #ffbf87; --gold-300: #ff934a; --gold-400: #fb7420; --gold-500: #f75b0c; --gold-600: #d24a06; --grad-hi: #ffcf9c; --grad-mid: #ff8a33; --grad-core: #f75b0c; --grad-soft: #ffab63; --btn-1: #ffab63; --btn-2: #fb7420; --btn-3: #f75b0c; --btn-shadow-rgb: 180, 60, 6; /* 背景：更明显的暖褐底（区别于金色的墨蓝） */ --bg-0: #1b1108; --bg-1: #301b0a; --bg-2: #1c1006; --bg-3: #522f12; --bg-rgb-deep: 27, 17, 8; --bg-rgb-mid: 48, 27, 10; --bg-rgb-accent: 150, 82, 26; --bg-rgb-transtop: 58, 34, 15; --panel-rgb-1: 54, 33, 14; --panel-rgb-2: 27, 17, 8; } /* ============ 基础排版 ============ */ body { font-family: var(--font-sans); color: var(--text-hi); background-color: var(--bg-0); transition: background-color 0.4s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .zh-serif { font-family: var(--font-serif) !important; letter-spacing: 0.02em; } /* ============ 主题色文字 / 分隔 / 点缀 ============ */ .gold-text { background: linear-gradient(135deg, var(--grad-hi) 0%, var(--grad-mid) 34%, var(--grad-core) 58%, var(--grad-soft) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gold-soft-text { color: var(--gold-300); } /* 中央带菱形的主题色细线 */ .rule-gold { position: relative; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent); } .rule-gold::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(135deg, var(--gold-200), var(--gold-500)); box-shadow: 0 0 12px var(--gold-glow); } /* 眉标：小号、拉宽字距、主题色 */ .eyebrow { font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-300); font-weight: 700; } /* 主题色图标底托 */ .gold-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.85rem; background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.24), rgba(var(--gold-rgb), 0.06)); border: 1px solid rgba(var(--gold-rgb), 0.38); color: var(--gold-300); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); flex-shrink: 0; } .gold-chip svg { width: 1.35rem; height: 1.35rem; } /* ============ 玻璃卡片 ============ */ .glass-card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045)); border: 1px solid var(--hairline); border-radius: 1.5rem; box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .glass-card--gold { border-color: rgba(var(--gold-rgb), 0.28); } /* 弹窗面板：墨蓝玻璃 */ .ink-panel { background: linear-gradient(180deg, rgba(var(--panel-rgb-1), 0.92), rgba(var(--panel-rgb-2), 0.95)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } /* 底部抽屉顶部的主题色把手条 */ .sheet-handle { width: 2.5rem; height: 4px; border-radius: 9999px; background: rgba(var(--gold-rgb), 0.45); margin: 0 auto 1.25rem; } /* 顶部主题色高光细线 */ .glass-card--gold::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); opacity: 0.75; pointer-events: none; } /* ============ 按钮 ============ */ .btn-gold { background: linear-gradient(135deg, var(--btn-1) 0%, var(--btn-2) 46%, var(--btn-3) 100%); color: #14223f; border: 1px solid rgba(255, 244, 205, 0.6); box-shadow: 0 14px 30px -12px rgba(var(--btn-shadow-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55); font-weight: 800; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; } .btn-gold:hover { filter: brightness(1.05); box-shadow: 0 18px 36px -12px rgba(var(--btn-shadow-rgb), 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .btn-gold:active { transform: translateY(1px) scale(0.99); } .btn-ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hairline-strong); color: var(--text-hi); transition: background 0.15s ease, transform 0.15s ease; font-weight: 700; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); } .btn-ghost:active { transform: translateY(1px) scale(0.99); } /* ============ 滚动条 ============ */ .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.35); border-radius: 99px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } /* ============ 进场动画 ============ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.35s ease-out both; } @keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .rise-in { animation: riseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .rise-in-2 { animation-delay: 0.08s; } .rise-in-3 { animation-delay: 0.16s; } .rise-in-4 { animation-delay: 0.24s; } @keyframes softGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } /* ============ 以下为原有功能样式，保持不动 ============ */ @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } .slide-up { animation: slideUp 0.3s ease-out forwards; } .slide-down { animation: slideDown 0.3s ease-in forwards; } .hidden { display: none; } /* ============ 分享引导蒙层（箭头指向微信右上角 ···） ============ */ /* 注意：微信的 ··· 在原生标题栏里，不在网页视口内，网页盖不住也画不出， 所以箭头只能从视口右上角朝外指。 */ #share-guide-mask { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 1.5rem 1.75rem; cursor: pointer; animation: fadeIn 0.25s ease-out both; } #share-guide-mask.hidden { display: none; } .guide-arrow { position: absolute; top: 0.5rem; right: 1.25rem; width: min(58vw, 240px); height: auto; color: var(--gold-300); animation: guideArrowFloat 1.8s ease-in-out infinite; } @keyframes guideArrowFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -6px); } } .guide-body { position: absolute; top: min(38vh, 300px); left: 0; right: 0; text-align: center; padding: 0 1.5rem; } .guide-hl { display: inline-block; padding: 0.3rem 1rem; border-radius: 0.6rem; background: rgba(var(--gold-rgb), 0.18); border: 1px solid rgba(var(--gold-rgb), 0.45); color: var(--gold-200); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; } .guide-sub { margin-top: 1rem; font-size: 1.05rem; font-weight: 700; line-height: 1.9; color: #fff; } .guide-sub b { color: var(--gold-300); font-weight: 800; } .guide-close-hint { margin-top: 1.6rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); } /* ============ 联系我们·工作组人员 chip（名字+手机号）============ */ .contact-chip { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: 0.7rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); font-size: inherit; /* 跟随容器字号（后台可调）*/ font-weight: inherit; /* 跟随容器粗细（后台可调）*/ color: inherit; /* 跟随容器颜色（后台可调）*/ white-space: nowrap; line-height: 1.2; } .inline-lucide{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle} .inline-lucide svg{width:1em;height:1em;vertical-align:-0.2em} .inline-img-token{display:inline-block;width:24px;height:24px;object-fit:cover;vertical-align:-0.25em;margin:0 4px;border-radius:6px;cursor:pointer} .img-viewer{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);padding:16px} .img-viewer .iv-card{width:min(92vw,820px);max-height:min(86vh,860px);background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.18);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden;color:#fff} .img-viewer .iv-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12)} .img-viewer .iv-title{font-size:12px;font-weight:900;letter-spacing:.08em;opacity:.9} .img-viewer .iv-close{width:32px;height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer} .img-viewer .iv-b{padding:12px;display:flex;align-items:center;justify-content:center;max-height:min(72vh,760px);overflow:auto} .img-viewer .iv-img{max-width:100%;height:auto;border-radius:14px;background:rgba(255,255,255,.06)} .img-viewer .iv-f{padding:10px 12px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.82);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap} /* 适配不同尺寸移动设备 */ @media (max-width: 320px) { .text-3xl { font-size: 1.5rem; } .text-xl { font-size: 1.125rem; } .py-12 { padding-top: 2rem; padding-bottom: 2rem; } }