/* 銀河電燈 - 主站与分支页共用 */ /* 引入中日文字体（文件需放在 css 目录下） */ @font-face { font-family: "NotoSerifSC"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("NotoSerifSC-VariableFont_wght.woff2") format("woff2"), url("NotoSerifSC-VariableFont_wght.ttf") format("truetype"); } @font-face { font-family: "NotoSerifJP"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("NotoSerifJP-VariableFont_wght.woff2") format("woff2"), url("NotoSerifJP-VariableFont_wght.ttf") format("truetype"); } html, body { margin: 0; padding: 0; height: 100%; } body { overflow-x: hidden; /* 强制隐藏水平滚动条 */ width: 100%; background-color: #000; } * { box-sizing: border-box; /* 确保 padding 不会撑开容器宽度 */ } /* 修改后的 .ginga-page：去掉了背景图，保留了布局 */ .ginga-page { min-height: 100vh; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e8e4df; font-family: "Times New Roman", Georgia, serif; box-sizing: border-box; padding: 2rem 1rem; position: relative; /* z-index 确保内容在背景层之上 */ z-index: 1; /* 解决回弹时元素穿透到页面外的 Bug */ -webkit-overflow-scrolling: touch; } /* 根据当前页面语言切换中文 / 日文字体。 ginga-lang.js 会将 设置为 zh-CN 或 ja。 */ html:lang(zh-CN) .ginga-page { font-family: "NotoSerifSC", "Times New Roman", Georgia, serif; } html:lang(ja) .ginga-page { font-family: "NotoSerifJP", "Times New Roman", Georgia, serif; } .fixed-bg-layer { position: fixed; top: 0; left: 0; width: 100vw; /* 使用 vw/vh 确保覆盖视口 */ height: 100vh; /* 强制设定：背景颜色，图片路径，平铺模式(repeat)，起始位置(左上角) */ background: #000 url("../images/bg.png") repeat top left; /* 这里的 size 非常关键：它定义了“一个格子”的大小 */ /* 如果你的图是 200x200，就设为 200px 200px。不要写 cover! */ background-size: auto; /* 这里的 z-index 必须小于 .ginga-page 的 1 */ z-index: -1; /* 解决移动端可能的渲染偏移 */ background-attachment: scroll; pointer-events: none; will-change: transform; } .ginga-header { position: absolute; top: 0; left: 0; right: 0; padding: 1.5rem 2rem; display: flex; justify-content: flex-end; align-items: center; z-index: 10; } /* 子页面顶部固定条（不含 index） */ .ginga-topbar { position: fixed !important; top: 0; left: 0; right: 0; height: 68px; /* 原 52px 的约 1.4 倍 */ background: rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; z-index: 10001 !important; /* 确保在手电筒遮罩 9998 之上 */ color: rgba(255, 255, 255, 0.9); font-family: "Times New Roman", Georgia, serif; box-sizing: border-box; backdrop-filter: blur(5px); } .ginga-topbar-nav { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: bold; } .ginga-topbar-nav a { color: inherit; text-decoration: none; padding: 0.25em 0.5em; transition: color 0.2s, text-decoration 0.2s; } .ginga-topbar-nav a:hover { color: #1a1a1a; text-decoration: underline; } .ginga-topbar-sep { opacity: 0.5; user-select: none; } .ginga-topbar .ginga-lang { margin: 0; } .ginga-topbar .ginga-lang a { color: inherit; text-decoration: none; font-weight: bold; transition: color 0.2s, text-decoration 0.2s; } .ginga-topbar .ginga-lang a:hover { color: #1a1a1a; text-decoration: underline; } .ginga-page.has-topbar { padding-top: 73px; /* 与顶部条高度保持一致，避免内容被遮挡 */ justify-content: flex-start; /* 子页面内容从顶部开始排布，避免被整体垂直居中导致间距不一致 */ align-items: center; /* 保持水平方向居中 */ } .ginga-lang { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; letter-spacing: 0.05em; color: rgba(232, 228, 223, 0.85); } .ginga-lang a { color: inherit; text-decoration: none; cursor: pointer; transition: opacity 0.2s, color 0.2s; } .ginga-lang a:hover { color: #fff; opacity: 1; } .ginga-lang a.active { color: #fff; opacity: 1; } .ginga-lang a:not(.active) { opacity: 0.6; } .ginga-lang-sep { opacity: 0.7; user-select: none; } .ginga-main { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; max-width: 900px; text-align: center; } .ginga-title-img { width: 100%; max-width: 546px; /* 约为原来的 1.3 倍 */ height: auto; display: block; margin: 0 auto; } .ginga-nav { margin-top: 3.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0; font-family: "Times New Roman", "Georgia", serif; font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.95); } .ginga-nav a { color: inherit; text-decoration: none; padding: 0 1.6rem; transition: color 0.2s, opacity 0.2s; } .ginga-nav a:hover { color: #fff; opacity: 1; } .ginga-nav-sep { opacity: 0.8; user-select: none; margin: 0 0.3rem; } .ginga-content { margin-top: 2rem; max-width: 720px; line-height: 1.7; } /* 子页面主内容区统一布局： - 顶部间距以 MEDIA 现有为标准 - 左右间距以 WORKS 现有为标准 */ .media-main, .about-main, .works-main { width: 100%; max-width: 1200px; margin: 0 auto; text-align: left; padding: 7rem 5rem 4rem; box-sizing: border-box; color: #f5f5f5; } /* about-main 和 media-main 使用 ginga-main 时会被垂直居中，需覆盖为从顶部排布（与 works-main 一致） */ .about-main, .media-main { justify-content: flex-start; } /* 内容区居中；分割线 1.8 倍长且居中；内部 MEDIA、图片、标题、日期与分割线最左侧齐平 */ .media-inner { max-width: 1200px; margin: 0 auto; text-align: left; overflow: visible; } .media-title { font-family: "Times New Roman", "Georgia", serif; font-size: 3.5rem; letter-spacing: 0.4em; font-weight: 400; margin: 0 0 3rem; color: #fff; position: relative; left: -40%; width: 140%; } .media-note { position: relative; left: -40%; width: 140%; } /* 分割线：长度为内容区宽度的 1.8 倍，在页面内居中 */ .media-divider { display: block; width: 180%; margin: 0 0 0 -40%; padding: 0; height: 0.5px; border: none; background: rgba(217, 217, 217, 0.75); } .media-list { display: flex; flex-direction: column; } .media-entry { display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem; padding: 1.25rem; border: none; color: inherit; text-decoration: none; transition: opacity 0.2s, color 0.2s; text-align: left; position: relative; left: -40%; width: 140%; } .media-entry:hover { opacity: 0.9; color: #fff; } .media-entry-thumb { flex-shrink: 0; width: 56px; height: 56px; overflow: hidden; background: #222; } .media-entry-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-entry-body { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } .media-entry-title { font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.95); } .media-entry-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; } @media (max-width: 600px) { .media-main, .about-main, .works-main { padding: 2rem 1rem 3rem; } .media-title { font-size: 2.2rem; letter-spacing: 0.2em; left: 0; width: 100%; } .media-note { left: 0; width: 100%; } .media-entry { flex-direction: column; align-items: flex-start; gap: 0.75rem; left: 0; width: 100%; } .media-divider { width: 100%; margin-left: 0; } .media-entry-thumb { width: 100%; height: 120px; } } /* ABOUT 页面布局：标题与 MEDIA 同字体、同位置；正文左对齐；底部三按键 */ .about-main { width: 100%; margin: 0 auto; text-align: left; padding: 7rem 5rem 4rem; box-sizing: border-box; color: #f5f5f5; } .about-inner { max-width: 1200px; margin: 0 auto; text-align: left; overflow: visible; } /* 与 MEDIA 标题相同字体与位置（左移与 MEDIA 齐平） */ .about-title { font-family: "Times New Roman", "Georgia", serif; font-size: 3.5rem; letter-spacing: 0.4em; font-weight: 400; margin: 0 0 3rem; color: #fff; position: relative; left: -40%; width: 140%; } .about-content { margin-bottom: 3rem; position: relative; left: -40%; width: 140%; } .about-content p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.95); } /* 副标题「银河电灯 / 銀河電燈」：2 倍字号、加粗、与下文间距加大 */ .about-content .about-heading { font-size: 2em; font-weight: bold; margin-bottom: 2rem; color: #fff; } .about-buttons { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; position: relative; left: -40%; width: 140%; } .about-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 2rem; border: 0.5px solid rgba(217, 217, 217, 0.75); background: transparent; color: #fff; text-decoration: none; transition: border-color 0.2s, color 0.2s, opacity 0.2s; } .about-btn:hover { border-color: #fff; color: #fff; opacity: 0.95; } .about-btn-icon { width: 1.5rem; height: 1.5rem; display: block; object-fit: contain; } .about-btn-text { font-size: 0.95rem; letter-spacing: 0.02em; } /* 确保其他文字依然被遮罩挡住 */ .about-content p:not(.about-heading) { position: relative; z-index: 1; /* 远低于遮罩 9998 */ } /* 确保按钮也被挡住 */ .about-buttons { position: relative; z-index: 1; } @media (max-width: 600px) { .about-title { font-size: 2.2rem; letter-spacing: 0.2em; left: 0; width: 100%; } .about-content { left: 0; width: 100%; } .about-buttons { left: 0; width: 100%; } } /* CONNECT 页面布局：标题居中，表单白框透明底，送信按钮白底黑字 */ .connect-main { width: 100%; margin: 0 auto; padding: 7rem 5rem 4rem; box-sizing: border-box; color: #f5f5f5; text-align: center; } .connect-inner { max-width: 560px; margin: 0 auto; text-align: left; } .connect-title { font-family: "Times New Roman", "Georgia", serif; font-size: 3.5rem; letter-spacing: 0.4em; font-weight: 400; margin: 0 0 2rem; color: #fff; text-align: center; } .connect-intro { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 2rem; line-height: 1.6; } .connect-form { display: flex; flex-direction: column; gap: 0.25rem; } .connect-label { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.95); margin-top: 1.25rem; margin-bottom: 0.35rem; } .connect-label:first-of-type { margin-top: 0; } .connect-input, .connect-textarea { width: 100%; padding: 0.7rem 0.9rem; font-size: 1rem; font-family: inherit; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); box-sizing: border-box; transition: border-color 0.2s; } .connect-input::placeholder, .connect-textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .connect-input:focus, .connect-textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.85); } .connect-textarea { min-height: 140px; resize: vertical; } .connect-submit { margin-top: 2rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-family: inherit; letter-spacing: 0.05em; color: #000; background: #fff; border: none; cursor: pointer; transition: opacity 0.2s; } .connect-submit:hover { opacity: 0.9; } @media (max-width: 600px) { .connect-main { padding: 2rem 1rem 3rem; } .connect-title { font-size: 2.2rem; letter-spacing: 0.2em; } } /* WORKS 页面布局 */ .works-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 7rem 5rem 4rem; box-sizing: border-box; color: #f5f5f5; } .works-title { font-family: "Times New Roman", "Georgia", serif; font-size: 3.5rem; letter-spacing: 0.4em; font-weight: 400; margin: 0 0 3rem; } .works-section { margin: 0; padding: 1.25rem 0; /* 文字与上下线条之间的间距 */ border-bottom: 0.5px solid rgba(217, 217, 217, 0.75); /* 默认作为下方线条 */ } .works-section:first-of-type { margin-top: 2rem; /* 整个组与标题之间的间距 */ border-top: 0.5px solid rgba(217, 217, 217, 0.75); /* 顶部第一条线 */ } .works-row { width: 100%; display: flex; align-items: center; justify-content: space-between; border: none; background: transparent; color: inherit; padding: 0; /* 垂直留白交给父级 .works-section 控制，保证在线条间居中 */ cursor: pointer; position: relative; } /* 折叠状态下，去掉内容区上方的多余间距，避免文字下方空白过大 */ .works-section:not(.works-section-expanded) .works-content .works-cards { margin-top: 0; } .works-row-label { font-family: "Times New Roman", "Georgia", serif; font-size: 1.05rem; letter-spacing: 0.18em; position: relative; z-index: 1; margin-left: 20px; } .works-row-line { display: none; /* 取消文字右侧的横线 */ } .works-row-icon { width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; transition: background-image 0.15s ease; position: relative; z-index: 1; margin-right: 20px; } .works-section .works-row-icon { background-image: url("../images/icon_add.svg"); } .works-section.works-section-expanded .works-row-icon { background-image: url("../images/icon_close.svg"); } /* 可折叠内容：用 grid 实现向下展开 / 向上收起动画 */ .works-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease-out; overflow: hidden; } .works-section.works-section-expanded .works-content { grid-template-rows: 1fr; } .works-content > * { min-height: 0; overflow: hidden; } .works-content .works-cards { margin-top: 2.5rem; padding-top: 0; } .works-cards { display: flex; flex-wrap: wrap; gap: 2.5rem; } .works-card { width: 320px; max-width: 100%; text-align: center; font-family: "Times New Roman", "Georgia", serif; } .works-card-link { display: block; color: inherit; text-decoration: none; } .works-card-link:hover { opacity: 0.9; } .works-card-thumb { width: 100%; height: auto; margin-bottom: 1rem; background: #222; overflow: hidden; } .works-card-thumb img { width: 100%; height: auto; object-fit: contain; display: block; } .works-card-title { font-size: 0.95rem; letter-spacing: 0.08em; margin-bottom: 0.3rem; } .works-card-meta { font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.8; } @media (max-width: 600px) { .ginga-nav { font-size: 0.8rem; letter-spacing: 0.12em; margin-top: 2rem; } .ginga-title-img { max-width: 90%; } } /* 修改 .media-inner 和 .about-inner 的限制，确保不溢出 */ .media-inner, .about-inner { max-width: 1200px; margin: 0 auto; width: 100%; /* 确保宽度不超过屏幕 */ box-sizing: border-box; } /* 统一处理这些溢出元素 */ .media-title, .media-note, .media-entry, .media-divider, .about-title, .about-content, .about-buttons { position: static; /* 取消 relative 定位偏移 */ width: 100%; /* 回归正常宽度 */ left: 0; /* 重置偏移 */ margin-left: 0; /* 重置边距 */ } /* 优化顶部条在小屏幕的表现 */ @media (max-width: 600px) { .ginga-topbar { padding: 0 1rem; /* 缩小左右内边距 */ height: auto; /* 允许高度自适应 */ min-height: 52px; flex-direction: column; /* 空间极小时改为上下排列 */ justify-content: center; gap: 5px; padding: 10px 0; } .ginga-topbar-nav { font-size: 0.85rem; /* 缩小字体 */ gap: 0.1rem; /* 缩小链接间距 */ flex-wrap: wrap; /* 允许自动换行 */ justify-content: center; } .ginga-topbar-nav a { padding: 0.2rem 0.4rem; /* 增加点击区域但减少占用宽度 */ } } @media (max-width: 600px) { .works-main { padding: 2rem 1rem 3rem; /* 顶部与 MEDIA 一致，左右与其他子页一致 */ } .works-title { font-size: 2.2rem; /* 减小字号，与你之前的 connect-title 手机端保持一致 */ letter-spacing: 0.2em; /* 相应缩小字间距，防止文字过长溢出 */ margin-bottom: 2rem; /* 稍微减小下边距，让布局更紧凑 */ text-align: center; /* 在手机端居中通常视觉效果更好 */ } .works-card { width: 100%; /* 手机端让卡片占满全宽 */ margin-bottom: 2rem; } .works-card-thumb img { border-radius: 4px; /* 可选：给原比例图片加一点点圆角，增加精致感 */ } } /* 针对手机端优化子页面的顶部条 */ @media (max-width: 600px) { /* 只有当页面具有 has-topbar 类时（即非首页），隐藏语言切换选项 */ .has-topbar .ginga-topbar .ginga-lang { display: none; } /* 确保导航栏占据整行并居中/两端对齐，防止溢出 */ .has-topbar .ginga-topbar { display: flex; justify-content: center; /* 关键：将内容水平居中 */ align-items: center; /* 关键：将内容垂直居中 */ height: 60px; /* 固定一个较小的高度 */ padding: 0 1rem; } /* 调整导航文字大小，确保其能在一行内放下 */ .has-topbar .ginga-topbar-nav { font-size: 0.85rem; gap: 0.1rem; /* 适当的链接间距 */ justify-content: center; width: 100%; /* 确保导航容器占满父级宽度以便居中 */ } } /* --- 手电筒特效最终版 --- */ /* 1. 顶部条层级最高，不受黑屏影响 */ .ginga-topbar { z-index: 10001 !important; } /* 2. 遮罩层：设为固定定位，全屏 */ .flashlight-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* 初始全黑，JS会实时修改这个背景 */ background: black; z-index: 9998; /* 允许点击穿透，这样才能点到下方的按钮/文字 */ pointer-events: none; transition: opacity 0.5s ease; } /* 3. 角落文字 */ .corner-text { position: fixed; z-index: 1; color: white; font-size: 0.8rem; padding: 15px; text-shadow: none; pointer-events: none; user-select: none; } .bottom-left, .bottom-right { position: absolute; /* 关键：改为绝对定位 */ bottom: 20px; /* 距离页面最底端 20px */ } .top-left { top: 80px; left: 10px; } .bottom-left { bottom: 10px; left: 10px; } .bottom-right { bottom: 10px; right: 10px; } .top-right { top: 80px; right: 10px; } /* 禁用移动端的手电筒，或微调 */ @media (max-width: 600px) { .top-left, .top-right { top: 70px; } } /* QUESTION 页面专有样式 */ /* 验证提示副标题样式 */ .about-verify-hint { font-size: 1.1rem; line-height: 1.6; color: #ff9d00; /* 使用警示色或强调色，也可以保持白色 */ margin-bottom: 3rem; border-left: 3px solid #ff9d00; padding-left: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; } .about-verify-loading { width: 50px; height: 50px; flex-shrink: 0; } .about-verify-text { color: #ff9d00; } .archive-section { margin-bottom: 4rem; } /* 姓名样式：调大字号并加粗，并加入头像 */ .archive-name { display: flex; flex-direction: column; align-items: center; gap: 1rem; /* 图案与姓名间距加大 */ font-size: 2.1rem; /* 姓名字号放大 */ font-weight: bold; color: #fff; margin-bottom: 1.5rem; letter-spacing: 0.1em; text-align: center; /* 姓名在头像下方居中 */ } .archive-avatar { width: 6rem; height: 6rem; flex-shrink: 0; object-fit: cover; border-radius: 50%; /* 圆形头像，弱化方形边缘存在感 */ user-select: none; /* 不加描边与阴影，让边框更不显眼，只保留柔和圆形轮廓 */ } /* 正文段落：首行缩进 2 字符 */ .archive-text { text-indent: 2em; margin-bottom: 1.25rem; text-align: justify; /* 两端对齐使档案感更强 */ } /* 针对移动端的适配 */ @media (max-width: 600px) { .archive-name { font-size: 1.5rem; } .about-verify-hint { font-size: 0.95rem; } } /* QUESTION 页面：拖拽验证区域 */ .question-interaction { margin-top: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 2rem; } .question-verify { display: flex; gap: 2rem; align-items: stretch; justify-content: space-between; } .question-verify-left, .question-verify-right { flex: 1; } .verify-pool, .verify-target { background: #ffffff; border-radius: 8px; padding: 1.5rem 1rem; min-height: 150px; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; } .verify-pool { background: rgba(255, 255, 255, 0.1); /* 半透明白 */ border: 1px solid rgba(255, 255, 255, 0.2); } .verify-target { background: rgba(255, 255, 255, 0.04); border: 2px dashed rgba(200, 200, 200, 0.8); position: relative; } .verify-placeholder { color: rgba(220, 220, 220, 0.9); font-size: 0.9rem; letter-spacing: 0.05em; pointer-events: none; } .verify-item { width: 80px; height: 80px; border-radius: 50%; background: #101010; border: 2px dashed #c0c0c0; color: #d8d8d8; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; cursor: grab; user-select: none; } .verify-item:active { cursor: grabbing; } .verify-target.drag-over { border-color: #ffd27f; background: rgba(255, 255, 255, 0.06); } .verify-submit-btn { margin-top: 1.5rem; display: inline-block; padding: 0.75rem 2.5rem; background: #d73232; color: #fff; border: none; border-radius: 999px; font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; } .verify-submit-btn:hover { background: #ff7a1a; } .verify-submit-btn:active { transform: translateY(1px); } @media (max-width: 768px) { .question-verify { flex-direction: column; } .verify-pool, .verify-target { padding: 1.25rem 0.75rem; } .verify-item { width: 72px; height: 72px; font-size: 0.75rem; } .verify-submit-btn { width: 100%; text-align: center; } } #ginga-lang-cn, #ginga-lang-jp { /* 强制禁止浏览器的双击缩放判定，把所有点击权全额交给 JS */ touch-action: none; /* 解决部分移动端快速连点时出现的系统选择菜单或放大镜干扰 */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* --- 针对 Question 页面的最终修复補丁 --- */ /* 1. 核心：给 main 容器加个“盖子”，防止内部元素滑出屏幕 */ .about-main { overflow: visible !important; position: relative; z-index: auto; /* 不要写 1 */ } /* 2. 找回头像并确保它不产生额外的渲染层 */ .archive-avatar { display: block !important; margin: 0 auto 1.5rem !important; /* 保持 relative 让它能正常显示，但去掉 transform 防止穿透 */ position: relative !important; transform: none !important; -webkit-transform: none !important; } /* 3. 修复圆圈：保留定位确保能拖拽，但压低它的“穿透力” */ .verify-item { position: relative !important; /* 只要不写 transform: translateZ，它就不会穿透白边 */ transform: none !important; -webkit-transform: none !important; } /* 1. 确保父容器不拦截 z-index */ .about-content { position: static !important; /* 撤销它的层叠上下文 */ } /* 2. 让标题跳出黑幕 */ .about-heading { position: relative !important; z-index: 9999 !important; /* 确保高于遮罩 9998 */ display: inline-block; /* 确保定位属性完全生效 */ } /* 3. 把其他内容死死压在黑幕下 */ .about-content p:not(.about-heading), .about-buttons, .archive-section { position: relative !important; z-index: 1 !important; /* 远低于遮罩的 9998 */ } /* 1. 定义呼吸灯动画 */ @keyframes heading-breath { 0% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.3); opacity: 0.8; } 50% { /* 呼吸到最亮，光晕扩散 */ text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4); opacity: 1; } 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.3); opacity: 0.8; } } /* 2. 使用高优先级选择器强制应用 */ .about-content .about-heading { display: inline-block !important; /* 必须是 inline-block 动画更稳 */ animation: heading-breath 4s ease-in-out infinite !important; /* 确保之前的层级依然有效 */ position: relative !important; z-index: 9999 !important; color: #fff !important; user-select: none !important; cursor: default !important; } /* 统一首页 header 的语言切换样式，使其与子页顶部条一致 */ .ginga-header .ginga-lang a { font-weight: bold !important; /* 强制加粗 */ transition: color 0.2s, opacity 0.2s; letter-spacing: 0.05em; /* 微调字间距 */ } .ginga-header .ginga-lang a:hover { color: #fff !important; opacity: 1 !important; } /* 确保分隔符样式也统一 */ .ginga-header .ginga-lang-sep { opacity: 0.7; margin: 0 0.2rem; } .exposure-image-wrapper { width: 100%; max-width: 600px; margin: 0 auto 2.5rem; border: 1px solid rgba(255, 255, 255, 0.1); background: #000; } .exposure-featured-img { width: 100%; height: auto; display: block; } /* 让正文段落有间距 */ #exposure-text-p1, #exposure-text-p2 { margin-bottom: 1.25rem; line-height: 1.8; color: rgba(255,255,255,0.9); } /* --- 最终修正：彻底解决 About/Question 手机端边距过宽问题 --- */ @media (max-width: 600px) { /* 1. 强制缩小容器本身的内边距 */ .about-main { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 5rem !important; /* 稍微降低顶部间距，手机端更美观 */ width: 100% !important; display: block !important; /* 确保布局不被 flex 干扰 */ } /* 2. 彻底拉回所有向左偏移 40% 的元素 */ .about-inner, .about-title, .about-content, .about-buttons, .archive-section, .question-interaction, .about-verify-hint { width: 100% !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: relative !important; text-align: left !important; /* 确保文字靠左，不居中 */ } /* 3. 修正标题字号，防止由于字间距（letter-spacing）太大导致换行难看 */ .about-title { font-size: 2rem !important; letter-spacing: 0.2em !important; margin-bottom: 2rem !important; } /* 4. 确保 Question 页面的验证区域不缩进 */ .question-verify { flex-direction: column !important; gap: 1.5rem !important; width: 100% !important; margin-left: 0 !important; } .verify-pool, .verify-target { width: 100% !important; padding: 1rem !important; box-sizing: border-box !important; } } /* --- 通缉令基础样式 --- */ .wanted-poster { background-color: #2b4490; color: #ffffff; /* padding 修改：上下 40px，左右缩减以适应容器 */ padding: 40px; max-width: 800px; /* 核心修改：确保容器在页面居中 */ margin: 20px auto; font-family: "STFangsong", "FangSong", "仿宋", serif; line-height: 1.8; box-shadow: 0 0 20px rgba(0,0,0,0.5); text-align: justify; /* 确保内部元素溢出时不会撑破容器 */ box-sizing: border-box; width: 90%; /* 保证在移动端左右有 5% 的留白 */ } .wanted-main-title { font-family: "STKaiti", "KaiTi", "楷体", serif; font-size: 56px; /* 略微调小，防止大屏溢出 */ text-align: center; letter-spacing: 20px; margin-bottom: 20px; font-weight: bold; } /* --- 调整 findme_logo 样式 --- */ .wanted-photo-wrapper { margin: 20px 0; text-align: center; } .findme-img { /* 全设备缩小：从原来的 300px 降至 180px（可根据喜好微调） */ width: 180px; height: auto; display: inline-block; /* 如果需要边框可以加上，不需要则删掉 */ border: 2px solid rgba(255,255,255,0.2); transition: transform 0.3s ease; } .wanted-body p { text-indent: 0; /* 谜题类文字通常不建议首行缩进，居中或左对齐更好看 */ text-align: center; /* 建议坐标类文字居中显示 */ margin-bottom: 10px; font-size: 18px; letter-spacing: 1px; } /* --- 提示文字样式 --- */ .device-hint { margin-top: 30px; text-align: center; font-size: 14px; opacity: 0.8; border-top: 1px dashed rgba(255,255,255,0.3); padding-top: 15px; } /* --- 移动端适配强化 --- */ @media (max-width: 600px) { .wanted-poster { /* 移动端间隙控制：上下 20px，左右合理间距 */ padding: 30px 20px; width: 92%; /* 左右留出各 4% 的页边距 */ } .wanted-main-title { font-size: 32px; letter-spacing: 8px; margin-bottom: 15px; } .findme-img { /* 移动端进一步缩小 logo */ width: 140px; } .wanted-body p { font-size: 15px; line-height: 1.6; } } /* 默认状态：显示电脑端，隐藏移动端 */ .show-mobile { display: none; } .show-desktop { display: block; } /* 媒体查询：当屏幕宽度小于 1024px 时（平板和手机） */ @media screen and (max-width: 1024px) { .show-desktop { display: none; /* 隐藏电脑端文字 */ } .show-mobile { display: block; /* 显示移动端文字 */ } }