/* ========================================================================== JCSDS 会议官网 · index.less -------------------------------------------------------------------------- 主题机制：中英文同页渲染， 上挂 lang-zh / lang-en 类名。 - html.lang-zh：正式学术蓝（深蓝 #0f3e7c / 主蓝 #1a63b0 / 强调红 #c8352e） - html.lang-en：国际化学术暖色系（珊瑚橙 / 琥珀黄 / 青绿 + 奶油白底） 所有颜色、圆角、阴影、字体全部走 CSS 变量，组件样式只在变量层切换； 少量结构性差异（标题装饰、头像形状、徽章形状等）在 html.lang-en 中覆盖。 ========================================================================== */ /* ---------- 中文主题（默认） ---------- */ html.lang-zh { --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; --bg: #f5f8fc; /* 页面整体背景 */ --bg-alt: #eef4fb; /* 交替版块底色（冷蓝灰） */ --card: #ffffff; --dark: #0f3e7c; /* 深蓝：顶部条 / 页脚 / 大标题 */ --blue: #1a63b0; /* 主蓝 */ --accent: #c8352e; /* 强调红 */ --primary: var(--accent); /* 按钮主色（随主题） */ --primary-2: #a5281f; /* 按钮 hover 深色 */ --title: #16355c; --text: #444c59; --muted: #8593a6; --faint: #a8b4c4; --topbar-bg: #0f3e7c; --footer-bg: #0f3e7c; --radius: 10px; /* 卡片圆角 */ --radius-sm: 6px; /* 年份徽章（方角小圆角） */ --radius-pill: 999px; --shadow: 0 6px 18px rgba(31, 61, 98, 0.08); --shadow-hover: 0 12px 26px rgba(31, 61, 98, 0.15); --banner-bg: linear-gradient(180deg, #dbe7f6 0%, #eef4fb 62%, #f7fafd 100%); --banner-line: linear-gradient(90deg, #1a63b0 0%, #3e7cc2 45%, #c8352e 100%); --banner-title: #1a63b0; --banner-sub: #4a7cbb; --year-grad-1: linear-gradient(160deg, #1a63b0 0%, #0f3e7c 100%); /* 2027 年份块 */ --year-grad-2: linear-gradient(160deg, #274f86 0%, #12325e 100%); /* 2028 年份块 */ } /* ---------- 英文主题 ---------- */ html.lang-en { --font: "Segoe UI", "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; --bg: #fdfaf5; /* 奶油白 */ --bg-alt: #fbeedb; /* 浅杏色（交替版块） */ --card: #ffffff; --dark: #3d2a1e; /* 暖棕：顶部条 / 页脚 / 标题 */ --coral: #e8603c; /* 珊瑚橙（主） */ --coral-deep: #cf4a28; --primary: var(--coral); /* 按钮主色（随主题） */ --primary-2: var(--coral-deep); --amber: #f2a541; /* 琥珀黄（辅） */ --amber-deep: #e08e00; --teal: #2e9e8f; /* 青绿（第三色） */ --teal-deep: #1f7a6e; --title: #3d2a1e; --text: #5c4a3d; --muted: #8a7466; --faint: #b39b88; --on-dark-link: #ffb25e; --topbar-bg: #3d2a1e; --footer-bg: #3d2a1e; --radius: 16px; /* 大卡片圆角 */ --radius-sm: 15px; /* 年份徽章（胶囊） */ --radius-md: 14px; /* logo 卡 / 走马灯图片 */ --radius-pill: 999px; --shadow: 0 8px 22px rgba(180, 100, 50, 0.1); --shadow-hover: 0 14px 30px rgba(180, 100, 50, 0.18); --banner-bg: linear-gradient(115deg, #fdf1df 0%, #fde3cc 55%, #f9d3b8 100%); --banner-line: linear-gradient(90deg, #e8603c 0%, #f2a541 50%, #2e9e8f 100%); --banner-title: #cf4a28; --banner-sub: #b39b88; --year-grad-1: linear-gradient(160deg, #f2a541 0%, #e8603c 100%); /* 2027 */ --year-grad-2: linear-gradient(160deg, #2e9e8f 0%, #1f7a6e 100%); /* 2028 */ } /* ========================================================================== 基础 ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 15px; line-height: 1.7; color: var(--text); background: var(--bg); transition: background 0.25s ease, color 0.25s ease; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { font-family: inherit; background: none; border: 0; cursor: pointer; } .container { width: 1200px; max-width: calc(100% - 40px); margin: 0 auto; } .band { padding: 46px 0 52px; } .band-alt { background: var(--bg-alt); transition: background 0.25s ease; } /* ========================================================================== 2.1 顶部功能条 ========================================================================== */ .topbar { background: var(--topbar-bg); color: #fff; font-size: 12.5px; transition: background 0.25s ease; } .topbar-in { display: flex; justify-content: space-between; align-items: center; height: 36px; } .topbar-lang { display: flex; align-items: center; gap: 7px; } .topbar-lang-label { opacity: 0.75; } .lang-btn { color: rgba(255, 255, 255, 0.78); font-size: 12.5px; padding: 2px 2px; transition: color 0.2s ease; } .lang-btn:hover { color: #fff; } .lang-btn.is-active { color: #f2a541; font-weight: 600; } .lang-sep { opacity: 0.4; } .topbar-user { display: flex; gap: 16px; } .topbar-user a { color: rgba(255, 255, 255, 0.88); transition: color 0.2s ease; } .topbar-user a:hover { color: #f2a541; } /* ========================================================================== 2.2 Banner（高约 180px，底部 6px 渐变装饰线） ========================================================================== */ .banner { position: relative; height: 180px; background: var(--banner-bg); transition: background 0.25s ease; overflow: hidden; /* 右侧圆点纹理装饰（中文页） */ } .banner::before { content: ""; position: absolute; inset: 0 0 6px 0; background-image: radial-gradient(rgba(26, 99, 176, 0.16) 1.5px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 78%); mask-image: linear-gradient(90deg, transparent 42%, #000 78%); pointer-events: none; } .banner-in { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 26px; } .banner-logo { flex: 0 0 auto; } .banner-logo img { height: 64px; width: auto; } .banner-text { text-align: center; } .banner-title { font-size: 46px; line-height: 1.25; color: var(--banner-title); letter-spacing: 2px; transition: color 0.25s ease; } .banner-badge { display: none; /* 仅英文页显示 */ vertical-align: 6px; margin-left: 16px; padding: 4px 14px; background: var(--teal, #2e9e8f); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; border-radius: var(--radius-pill); } .banner-sub { margin-top: 8px; font-size: 14px; letter-spacing: 2.5px; color: var(--banner-sub); font-weight: 600; transition: color 0.25s ease; } .banner-line { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--banner-line); } /* ---------- 英文 Banner：暖色渐变 + 装饰圆 + 层级调整 ---------- */ html.lang-en .banner { /* 右上装饰圆（橙 / 琥珀 / 青绿，透明度 14%-35%） */ } html.lang-en .banner::before { background: radial-gradient(circle 90px at 88% 18%, rgba(232, 96, 60, 0.2) 0 99%, transparent 100%), radial-gradient(circle 56px at 71% 82%, rgba(242, 165, 65, 0.35) 0 99%, transparent 100%), radial-gradient(circle 34px at 95% 66%, rgba(46, 158, 143, 0.26) 0 99%, transparent 100%), radial-gradient(circle 20px at 62% 12%, rgba(232, 96, 60, 0.14) 0 99%, transparent 100%); background-size: 100% 100%; -webkit-mask-image: none; mask-image: none; } html.lang-en .banner .banner-in { justify-content: flex-start; gap: 34px; } html.lang-en .banner .banner-logo { background: #fff; padding: 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow); } html.lang-en .banner .banner-logo img { height: 58px; } html.lang-en .banner .banner-text { text-align: left; } html.lang-en .banner .banner-title { max-width: 760px; font-size: 30px; letter-spacing: 0.5px; font-weight: 800; color: var(--banner-title); } html.lang-en .banner .banner-badge { display: inline-block; } html.lang-en .banner .banner-sub { margin-top: 10px; font-size: 13px; font-weight: 400; letter-spacing: 6px; color: var(--banner-sub); } /* ========================================================================== 版块标题（中文：左竖色条 8×26 / 英文：彩色圆点 14px 三色轮换） ========================================================================== */ .sec { margin-bottom: 8px; margin-top:40px; } .sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; } .sec-title { position: relative; padding-left: 20px; font-size: 24px; font-weight: 700; color: var(--title); transition: color 0.25s ease; } .sec-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 26px; border-radius: 3px; background: var(--bar-color, var(--blue)); transition: background 0.25s ease, width 0.25s ease, height 0.25s ease, border-radius 0.25s ease; } .sec-sub { font-size: 12px; letter-spacing: 2px; color: var(--faint); font-weight: 600; } /* 中文页竖条红蓝交替（两两成组） */ .sec--about .sec-title, .sec--review .sec-title { --bar-color: var(--accent); } .sec--plan .sec-title, .sec--past .sec-title { --bar-color: var(--blue); } .sec--speakers .sec-title, .sec--gallery .sec-title { --bar-color: var(--accent); } .sec--orgs .sec-title, .sec--contact .sec-title { --bar-color: var(--blue); } /* 英文页：14px 彩色圆点，珊瑚橙 → 琥珀黄 → 青绿 轮换 */ html.lang-en .sec-title { padding-left: 26px; } html.lang-en .sec-title::before { width: 14px; height: 14px; border-radius: 50%; } html.lang-en .sec--about .sec-title::before, html.lang-en .sec--past .sec-title::before, html.lang-en .sec--orgs .sec-title::before { background: var(--coral); } html.lang-en .sec--review .sec-title::before, html.lang-en .sec--speakers .sec-title::before, html.lang-en .sec--contact .sec-title::before { background: var(--amber); } html.lang-en .sec--plan .sec-title::before, html.lang-en .sec--gallery .sec-title::before { background: var(--teal); } /* ========================================================================== 2.3 数字亮点卡片 ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 34px; /* 紧跟 banner 下方，不与 banner 重叠 */ position: relative; z-index: 2; margin-bottom: 14px; } .stat-card { position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; padding: 26px 20px 22px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--stat-bar, var(--blue)); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .stat-card--1 { --stat-bar: var(--blue); } .stat-card--2 { --stat-bar: var(--accent); } .stat-card--3 { --stat-bar: var(--blue); } .stat-num { font-size: 52px; font-weight: 800; line-height: 1.1; color: var(--dark); letter-spacing: 1px; transition: color 0.25s ease; } .stat-num em { font-style: normal; color: var(--accent); margin-left: 2px; } .stat-label { margin-top: 6px; font-size: 16px; color: var(--muted); letter-spacing: 4px; transition: color 0.25s ease; } /* 英文页：三色卡片（橙/黄/绿）与数字配色 */ html.lang-en .stat-card::before { height: 5px; } html.lang-en .stat-card--1 { --stat-bar: var(--coral); } html.lang-en .stat-card--1 .stat-num { color: var(--coral); } html.lang-en .stat-card--1 .stat-num em { color: var(--coral); } html.lang-en .stat-card--2 { --stat-bar: var(--amber); } html.lang-en .stat-card--2 .stat-num { color: var(--amber-deep); } html.lang-en .stat-card--2 .stat-num em { color: var(--amber-deep); } html.lang-en .stat-card--3 { --stat-bar: var(--teal); } html.lang-en .stat-card--3 .stat-num { color: var(--teal); } html.lang-en .stat-card--3 .stat-num em { color: var(--teal); } html.lang-en .stat-label { letter-spacing: 1.5px; } /* ========================================================================== 2.4 会议简介 ========================================================================== */ .about { display: grid; grid-template-columns: 600px 1fr; gap: 36px; align-items: start; padding-bottom: 26px; } .about-figure { position: relative; } .about-figure .about-img { width: 100%; aspect-ratio: 600 / 390; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); } .about-figure .about-img--en { display: none; } .about-figure figcaption { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--faint); letter-spacing: 1px; } .about-text p { margin-bottom: 16px; text-align: justify; font-size: 15px; } .about-text p strong { color: var(--blue); font-weight: 700; } html.lang-en .about-figure .about-img--zh { display: none; } html.lang-en .about-figure .about-img--en { display: block; } html.lang-en .about-figure .about-img { border-radius: var(--radius); } html.lang-en .about-text p strong { color: var(--coral-deep); } /* ========================================================================== 2.5 会议回顾 ========================================================================== */ .review-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 28px; transition: background 0.25s ease; } .review-item { display: flex; align-items: center; gap: 18px; padding: 19px 2px; border-bottom: 1px solid var(--bg-alt); transition: background 0.2s ease, border-color 0.25s ease; } .review-item:last-child { border-bottom: 0; } .review-item:hover .review-name { color: var(--blue); } .review-item:hover .review-arrow { transform: translateX(4px); } .review-year { flex: 0 0 auto; min-width: 52px; text-align: center; padding: 3px 10px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; border-radius: var(--radius-sm); letter-spacing: 1px; transition: background 0.25s ease, border-radius 0.25s ease; } .review-name { flex: 1 1 auto; font-size: 15.5px; font-weight: 600; color: var(--title); transition: color 0.2s ease; } .review-meta { flex: 0 0 auto; font-size: 12.5px; color: var(--faint); } .review-meta i { font-style: normal; } .review-arrow { flex: 0 0 auto; color: var(--accent); font-size: 20px; font-weight: 700; line-height: 1; transition: transform 0.2s ease, color 0.25s ease; } html.lang-en .review-year { background: #fbe3da; color: var(--coral-deep); border-radius: var(--radius-sm); /* 15px 胶囊 */ } html.lang-en .review-item:hover .review-name { color: var(--coral); } html.lang-en .review-arrow { color: var(--coral); } /* ========================================================================== 2.6 会议计划（JSM 风格大年份卡片） ========================================================================== */ .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .plan-card { display: flex; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .plan-year { flex: 0 0 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; color: #fff; background: var(--year-grad-1); transition: background 0.25s ease; } .plan-year .plan-year-num { font-size: 44px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; } .plan-year .plan-year-tag { font-size: 12px; letter-spacing: 3px; opacity: 0.72; } .plan-year--2028 { background: var(--year-grad-2); } .plan-info { flex: 1 1 auto; padding: 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .plan-name { font-size: 17.5px; font-weight: 700; color: var(--dark); line-height: 1.45; transition: color 0.25s ease; } .plan-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } .plan-row svg { width: 15px; height: 15px; } .plan-tag { margin-top: 6px; padding: 4px 14px; font-size: 12.5px; font-weight: 600; border-radius: var(--radius-sm); transition: border-radius 0.25s ease, background 0.25s ease, color 0.25s ease; } .plan-tag--on { background: rgba(26, 99, 176, 0.1); color: var(--blue); } .plan-tag--wait { background: rgba(200, 53, 46, 0.09); color: var(--accent); } .plan-card--off .plan-name:hover { color: var(--dark); } html.lang-en { /* 20px 胶囊 */ } html.lang-en .plan-tag { border-radius: var(--radius-sm); } html.lang-en .plan-tag--on { background: #fbe3da; color: var(--coral-deep); } html.lang-en .plan-tag--wait { background: #dff2ef; color: var(--teal-deep); } html.lang-en .plan-name { color: var(--title); } html.lang-en a.plan-card:hover .plan-name { color: var(--coral); } /* ========================================================================== 2.7 往届会议网站 ========================================================================== */ .past-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .past-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; padding-bottom: 18px; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .past-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .past-thumb { aspect-ratio: 16 / 9; overflow: hidden; } .past-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .past-thumb:hover img { transform: scale(1.05); } .past-label { display: block; margin: 14px 18px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--blue); transition: color 0.25s ease; } .past-label i { font-style: normal; } .past-name { margin: 0 18px 10px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--title); min-height: 44px; transition: color 0.25s ease; } .past-more { margin: 0 18px; display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--accent); transition: color 0.25s ease; } html.lang-en .past-label { color: var(--coral); } html.lang-en .past-more { color: var(--amber-deep); } html.lang-en .past-name { color: var(--title); } /* ========================================================================== 2.8 往届特邀讲者（多排整体向上匀速循环滚动） ========================================================================== */ .sp-viewport { overflow: hidden; height: 520px; /* 桌面：约显示两排讲者，内部整体向上循环 */ /* 顶/底渐隐，提示滚动循环 */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); } .sp-track { display: grid; grid-template-columns: repeat(3, 1fr); /* 6 位讲者 → 两排三列，确保有上下循环滚动 */ gap: 22px; will-change: transform; } .speaker { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 16px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .speaker:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .speaker-avatar { display: block; width: 120px; height: 120px; margin-bottom: 10px; } .speaker-avatar img { width: 100%; height: 100%; object-fit: cover; object-fit: center top; border-radius: 12px; /* 中文页：圆角方形 */ transition: border-radius 0.25s ease, box-shadow 0.25s ease; } .speaker-edition { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.5; color: #fff; background: rgba(15, 62, 124, 0.82); /* 中文页：深蓝徽章 */ border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); pointer-events: none; transition: background 0.25s ease; } .speaker-name { font-size: 16px; font-weight: 700; color: var(--dark); transition: color 0.25s ease; } .speaker-org { font-size: 12.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.lang-en { /* 英文页：珊瑚橙徽章 */ } html.lang-en .speaker-avatar img { border-radius: 50%; /* 英文页：圆形 */ box-shadow: 0 0 0 4px #fbeedb; /* 外圈 4px 浅杏描边 */ } html.lang-en .speaker-edition { background: rgba(230, 96, 60, 0.85); } html.lang-en .speaker:hover .speaker-name { color: var(--coral); } /* ========================================================================== 2.9 图片集锦（单行从右向左匀速循环走马灯，JS 驱动无缝循环） ========================================================================== */ .gal-viewport { overflow: hidden; } .gal-track { display: flex; gap: 18px; width: max-content; will-change: transform; } .gal-track img { height: 190px; width: auto; border-radius: var(--radius-md, 10px); box-shadow: var(--shadow); object-fit: cover; transition: border-radius 0.25s ease, transform 0.25s ease; } .gal-track img:hover { transform: scale(1.02); } .gal-note { margin-top: 20px; text-align: center; font-size: 12.5px; letter-spacing: 2px; color: var(--faint); } .gal-more { display: block; width: max-content; margin: 14px auto 0; padding: 10px 26px; border-radius: var(--radius-md, 10px); background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .gal-more:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--primary-2); } .gal-more:active { transform: translateY(0); } /* ========================================================================== 2.10 主办单位 ========================================================================== */ .org-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .org-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); height: 96px; display: flex; align-items: center; justify-content: center; padding: 18px 26px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .org-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .org-card img { max-height: 100%; max-width: 100%; object-fit: contain; } /* ========================================================================== 2.11 联系方式 ========================================================================== */ .ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 26px; } .ct-card { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .ct-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .ct-ico { flex: 0 0 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; transition: background 0.25s ease; } .ct-ico svg { width: 22px; height: 22px; } .ct-body { display: flex; flex-direction: column; line-height: 1.5; } .ct-body em { font-style: normal; font-size: 12px; letter-spacing: 1.5px; color: var(--faint); text-transform: uppercase; } .ct-body b { font-size: 14.5px; font-weight: 600; color: var(--title); word-break: break-all; } html.lang-en .ct-ico { background: var(--coral); } /* ========================================================================== 2.12 页脚 ========================================================================== */ .footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.82); text-align: center; padding: 30px 0 34px; font-size: 13px; line-height: 2; transition: background 0.25s ease; } .footer .footer-copy { font-weight: 700; letter-spacing: 1px; } .footer .footer-declare { font-size: 12.5px; opacity: 0.85; } .footer .footer-support { font-size: 12.5px; opacity: 0.75; } html.lang-en .footer { line-height: 1.9; } html.lang-en .footer .footer-copy { letter-spacing: 0.3px; } /* ========================================================================== 响应式 ========================================================================== */ @media (max-width: 1199px) { .about { grid-template-columns: 1fr 1fr; } .past-grid { grid-template-columns: repeat(2, 1fr); } .sp-track { grid-template-columns: repeat(3, 1fr); } .plan-grid { grid-template-columns: 1fr; } .org-grid, .ct-grid { grid-template-columns: repeat(2, 1fr); } html.lang-en .banner-title { font-size: 24px; } } @media (max-width: 767px) { .band { padding: 34px 0 38px; } .topbar { font-size: 12px; } .banner { height: 132px; } .banner-text{ text-align: left; } .banner-in { gap: 16px; } .banner-logo img { height: 44px; } .banner-title { font-size: 20px; letter-spacing: 1px; } .banner-sub { font-size: 11px; letter-spacing: 1.5px; } html.lang-en .banner .banner-title { font-size: 17px; } html.lang-en .banner .banner-sub { letter-spacing: 3px; } html.lang-en .banner .banner-badge { font-size: 11px; padding: 3px 10px; } html.lang-en .banner .banner-logo img { height: 40px; } /* 数字亮点：横向滑动 */ .stats { grid-template-columns: none; grid-auto-flow: column; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 24px; } .stats .stat-card { scroll-snap-align: center; } .stat-num { font-size: 24px; } .stat-label { font-size: 12px; } .about { grid-template-columns: 1fr; gap: 22px; } .review-card { padding: 4px 16px; } .review-item { flex-wrap: wrap; gap: 10px; padding: 15px 0; } .review-name { flex: 1 1 100%; order: 3; } .review-year { order: 1; } .review-meta { order: 2; margin-left: auto; } .plan-year { flex-basis: 110px; } .plan-year .plan-year-num { font-size: 32px; } .plan-info { padding: 18px; } .past-grid { grid-template-columns: 1fr; } .sec-sub { display: none; } /* 特邀讲者：两列手动滑动（关闭自动滚动，JS 不启用） */ .sp-viewport { overflow: visible; height: auto; -webkit-mask-image: none; mask-image: none; } .sp-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; transform: none !important; } .speaker-avatar { width: 110px; height: 110px; } /* 图片集锦：手动滑动（关闭自动滚动，JS 不启用） */ .gal-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; } .gal-track { transform: none !important; gap: 12px; } .gal-track img { height: 130px; } .org-grid, .ct-grid { grid-template-columns: 1fr; } } /* ========================================================================== prefers-reduced-motion：降级为静态展示 ========================================================================== */ @media (prefers-reduced-motion: reduce) { .sp-track, .gal-track { transform: none !important; } /* 讲者：静态网格（两排平铺，单份 DOM，不复制） */ .sp-viewport { overflow: visible; height: auto; -webkit-mask-image: none; mask-image: none; } .sp-track { display: grid; grid-template-columns: repeat(3, 1fr); } .sp-track .speaker:hover { transform: none; } /* 图片集锦：可横向滑动的静态图列 */ .gal-viewport { overflow-x: auto; } .gal-track { gap: 14px; } .past-thumb img { transition: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media (min-width: 768px) and (prefers-reduced-motion: reduce) { .sp-track { padding: 0 0 8px; } .gal-viewport { -webkit-mask-image: none; mask-image: none; } }