/* ============================================================ Ecclesia Global — Design System + public stylesheet ------------------------------------------------------------ 气质目标：温暖 · 国际化 · 可信 · 稳重 · 克制 反面参照（都要避开）：亮蓝 SaaS 模板 / 科技公司后台 / 廉价教会模板 ★ 这一段是【唯一的真相源】★ 页面样式一律 var(--token)，不要再往下面写第二套颜色/圆角/阴影。 想加新颜色前先问：现有 token 里有没有语义相符的？ （2026-07-29 建立 token 层时实测：全表 525 处已用 var()、308 处还硬编码， 硬编码那些是历史遗留，改到哪清到哪，不要再新增。） ============================================================ */ :root { /* ---------- 品牌主色：Primary Navy ---------- 深海军蓝，不是科技蓝。用于主导航、主按钮、标题强调、品牌识别。 */ --navy-900: #0F2739; /* 最深，页脚/深底 */ --navy-800: #173B57; /* ★ 品牌主色 */ --navy-700: #1D4A6B; /* hover 加深 */ --navy-600: #245B82; /* 次级强调 */ /* ---------- 链接/信息色 ---------- 刻意压低饱和度：亮蓝一上来整站就变 Bootstrap。 */ --blue-500: #2B6584; --blue-100: #DCE8EE; --blue-50: #EFF4F7; /* ---------- Accent Gold ---------- 低饱和稳重金，只给「认证 / 认领 / BiblePro 下载」这类少量重要操作。 ⚠️ 不要调亮：一发黄就变廉价教会模板。 */ --gold-500: #C69A4B; --gold-600: #B98A3D; --gold-100: #F5EDDD; /* ---------- 文字 ---------- */ --ink-900: #1D252C; /* 正文/标题 */ --ink-600: #65717A; /* 次要文字 */ --ink-400: #8A939B; /* 占位/说明 */ /* ---------- 面与线 ---------- ⚠️ 背景【不是纯白】—— 暖白打底 + 纯白卡片，靠这一层差别产生空间感， 而不是靠给每张卡片加阴影（那样整站会像卡片堆）。 */ --bg: #F8F6F1; /* 页面底色（暖白） */ --bg-soft: #F2EFE8; /* 交替区块，比 --bg 再深一点 */ --surface: #FFFFFF; /* 卡片/弹窗表面 */ --line: #E4E1DA; /* 边框（暖灰，不是冷灰） */ --line-soft:#EDEAE3; /* 分隔线 */ /* ---------- 语义色 ---------- */ --success: #287A5B; --warning: #B7791F; --error: #B74444; --success-bg: #E6F1EC; --warning-bg: #FBF1DE; --error-bg: #F7E6E6; /* ---------- 圆角比例 ---------- ⚠️ 不要所有东西都超大圆角 —— 全站一个大圆角看起来像玩具。 */ --r-sm: 9px; /* 小按钮、标签 */ --r-md: 11px; /* 输入框 */ --r-lg: 15px; /* 普通卡片 */ --r-xl: 22px; /* 大型宣传区域 */ --radius: var(--r-lg); /* 历史别名，勿删：全表大量在用 */ /* ---------- 阴影 ---------- ⚠️ 默认靠【边框】区分层次，阴影只在 hover 时轻微出现。 厚重黑阴影是「廉价模板」最明显的特征之一。 */ --shadow-none: none; --shadow: 0 1px 2px rgba(23, 59, 87, .05), 0 2px 8px rgba(23, 59, 87, .04); --shadow-hover: 0 2px 6px rgba(23, 59, 87, .07), 0 8px 20px rgba(23, 59, 87, .07); --shadow-lg: 0 8px 30px rgba(23, 59, 87, .12); /* ---------- 间距比例（8pt 栅格） ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- 字号比例 ---------- 手机端在下方 @media 里整体缩小，标题不允许挤出屏幕。 */ --t-display: 56px; --t-h1: 42px; --t-h2: 32px; --t-h3: 24px; --t-h4: 19px; --t-body-lg: 18px; --t-body: 16px; --t-sm: 14px; --t-caption: 12.5px; /* ---------- 阅读宽度 ---------- 文章正文不铺满屏幕 —— 一行超过 ~90 字符就没人读得下去。 */ --measure: 720px; /* ---------- 动效 ---------- 统一 150–250ms。再长就挡操作，再短就看不见。 */ --ease: cubic-bezier(.4, 0, .2, 1); --dur: 180ms; /* ---------- 字体 ---------- ☠️ 泰文字体原先【一个都没有】—— 只能靠系统随便挑，字形和粗细都不受控。 缅甸文虽然排在后面（拉丁字体没有缅文字形，会自动落到这里），但顺序靠后 意味着一旦前面某个字体恰好带了残缺的缅文字形，就会被它接管。 所以把两种文字的专用字体都补齐。 ⚠️ Inter / Noto 全部走系统已装的，不额外加载外部字体文件： 这个站一半流量在缅甸/泰国的移动网络上，多一个字体文件就是多几百毫秒白屏。 */ --font: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Noto Sans Myanmar", "Pyidaungsu", "Padauk", "Myanmar Text", "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif; } /* 尊重系统的「减少动态效果」设置 —— 无障碍要求，也让低端机不卡。 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════════════════════ [hidden] 必须真的隐藏 —— 这条不是多余的 ☠️ 浏览器的 [hidden] 是 `display:none`，但它是 UA 样式， 任何自己写的 display 都能压过它。 本站 .btn 是 `display:inline-flex` → 给按钮设 el.hidden = true 毫无效果。 实测代价：分步表单里「提交」按钮在每一步都露着（用户在第 1 步就能提交半张表）， 而 JS 里 submit.hidden 明明是 true —— 属性对了、界面没变。 ⚠️ 更毒的是测试也会跟着骗人：我第一版断言 `e => !e.hidden`（读属性）， 它返回 true，测试全绿 —— 只有截图才看出按钮还在。 → 涉及显隐的断言必须读计算样式（offsetParent / getComputedStyle），不能读属性。 ⚠️ 用 !important：这是「隐藏」的语义底线，任何组件样式都不该赢过它。 ══════════════════════════════════════════════════════════════════════════ */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--ink-900); background: var(--bg); } img { max-width: 100%; height: auto; } a { color: var(--blue-500); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1320px; margin: 0 auto; padding: 0 22px; } /* ---------- Side promo rails (BiblePro app, ultra-wide screens) ---------- */ .side-rail { display: none; position: fixed; top: 92px; width: 230px; z-index: 60; } .side-rail-left { left: 22px; } .side-rail-right { right: 22px; } .rail-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; text-align: center; } .rail-card .rail-appicon { width: 64px; height: 64px; border-radius: 15px; margin: 0 auto 8px; display: block; } .rail-card h4 { color: var(--navy-800); font-size: 15.5px; line-height: 1.3; margin-bottom: 2px; } .rail-card .rail-sub { color: var(--gold-600); font-weight: 700; font-size: 12.5px; margin-bottom: 10px; } .rail-card ul { list-style: none; text-align: left; margin: 0 0 12px; } .rail-card li { font-size: 12.8px; color: var(--ink-600); padding: 4px 0 4px 20px; position: relative; } .rail-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--gold-600); font-weight: 700; } .rail-card .btn { width: 100%; padding: 10px 12px; font-size: 14px; } .rail-card .rail-qr { width: 128px; height: 128px; margin: 12px auto 4px; display: block; image-rendering: pixelated; } .rail-card .rail-qr-hint { font-size: 11.5px; color: var(--ink-400); } .rail-shot-wrap { text-align: center; } .rail-shot { width: 100%; border-radius: 22px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: block; } .rail-shot-caption { margin-top: 10px; font-size: 12.8px; color: var(--ink-600); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); } .side-rail .rail-close { position: absolute; top: -10px; right: -10px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink-600); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .side-rail .rail-close:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .side-rail.rail-hidden { display: none !important; } /* Show the rails on ordinary desktop widths too: the content column yields just enough room for them, so the sides are never empty. */ @media (min-width: 1400px) { .side-rail { display: block; } /* content column = viewport minus two rails (width + edge gap + breathing room) */ body:not(.rails-off) .container { max-width: min(1320px, calc(100vw - 2 * 286px)); } /* ☠️ 顶栏横跨在侧栏之上，必须保持完整宽度 —— 这条豁免【曾经是死规则】。 2026-07-28 实测：1400px 屏幕上顶栏可用宽度只有 828px（1399px 时是 1320px）， 菜单被挤成两三行，四种语言都中招，而 1400~1600 正是最常见的笔记本宽度。 原因是 CSS 优先级差了一点点： 压窄规则 body:not(.rails-off) .container → (0,2,1) 豁免规则 .site-header .container → (0,2,0) ← 输了，从来没生效 注释写着「顶栏保持完整宽度」，代码却做不到 —— 属于「写了等于没写」， 而且因为规则确实存在，看代码的人会以为已经处理过了。 → 豁免必须至少和压窄规则一样具体。 */ /* ☠️ 豁免【不能带 :not(.rails-off) 条件】—— 见下方 1400–1599 段的说明。 */ .site-header .container { max-width: 1320px; } } @media (min-width: 1400px) and (max-width: 1599px) { .side-rail { width: 200px; } /* ☠️ 2026-07-29 修：这条收窄原先【没有 rails-off 守卫】，而它的豁免却有。 于是侧栏一关（body 带上 .rails-off）： 收窄 .container → 照常生效，1440px 只剩 928px 豁免 body:not(.rails-off) .site-header ... → 条件不成立，失效 两条一叠，顶栏可用宽度反而【比开着侧栏时还窄】—— 完全反直觉。 实测症状：缅甸文 @1440 整排菜单塌成汉堡，而 @1280 和 @1920 都正常 （1280 不进这个区间，1920 走另一段规则）。宽的屏幕比窄的先塌， 看着像 JS 竞态，其实是 CSS 条件写反了 —— 往 JS 里查会白查很久。 两处都改：收窄加上守卫（没侧栏就不该给侧栏留位置）， 顶栏豁免去掉守卫（顶栏横跨全宽，任何情况下都不该被压窄）。 */ body:not(.rails-off) .container { max-width: min(1320px, calc(100vw - 2 * 256px)); } .site-header .container { max-width: 1320px; } } /* Pages with their own in-content promo suppress the rails, so they take the full width back instead of leaving the reserved side gutters empty. On wide monitors the container keeps growing so the middle grid gains more columns rather than stranding empty margins on both sides. */ @media (min-width: 1400px) { body.dir-page .container { max-width: min(1960px, calc(100vw - 72px)); } } /* Ultra-wide: give the side columns a touch more room, let the grid breathe. */ @media (min-width: 1700px) { body.dir-page .directory-layout { grid-template-columns: 280px minmax(0, 1fr) 340px; gap: 30px; } } /* ---------- Buttons ---------- ★ 一套按钮，全站通用。加新样式前先确认现有 5 种真的都不合适。 ☠️ 2026-07-29 改的一件大事：`.btn-primary` 原本是【金色】。 于是全站每一个主按钮都是金的 —— 金色一旦到处都是就不再是强调， 只剩下「廉价教会模板」那个观感。 现在：主按钮 = 深海军蓝；金色收窄到 `.btn-gold`， 只给「认证 / 认领教会 / BiblePro 下载」这三类少量重要操作。 触控尺寸：桌面最小高 44px、手机 48px（下方 @media 里加高）。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 11px 22px; border-radius: var(--r-sm); border: 1px solid transparent; font-family: inherit; font-size: var(--t-body); font-weight: 600; line-height: 1.25; cursor: pointer; text-align: center; text-decoration: none !important; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:active { transform: translateY(1px); } /* 键盘可见焦点 —— 无障碍必需，不能用 outline:none 抹掉。 */ .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; } .btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* Loading 态：文字留在原位（避免按钮宽度跳动），前面转一个小圈。 */ .btn.is-loading { pointer-events: none; opacity: .8; } .btn.is-loading::before { content: ""; width: 15px; height: 15px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ① Primary —— 深蓝底白字。默认主操作。 */ .btn-primary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } /* ② Secondary —— 白底深蓝字浅边框。与 Primary 并排时用这个。 */ .btn-secondary, .btn-light { background: var(--surface); color: var(--navy-800); border-color: var(--line); } .btn-secondary:hover, .btn-light:hover { background: var(--bg-soft); border-color: var(--ink-400); } /* ③ Gold Accent —— ⚠️ 只给认证 / 认领 / BiblePro 下载。别的地方不要用。 */ .btn-gold { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); } .btn-gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--navy-900); } /* ④ Ghost —— 导航与次级操作，无边框。 */ .btn-ghost { background: transparent; color: var(--navy-800); border-color: transparent; } .btn-ghost:hover { background: var(--bg-soft); } /* ⑤ Danger —— 只给删除 / 举报 / 高风险操作。 */ .btn-danger { background: var(--error); color: #fff; border-color: var(--error); } .btn-danger:hover { background: #9E3A3A; border-color: #9E3A3A; color: #fff; } /* 历史别名，保留以免大面积改模板 */ .btn-navy { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .btn-navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .btn-outline { background: transparent; color: var(--navy-800); border: 1px solid var(--navy-800); } .btn-outline:hover { background: var(--navy-800); color: #fff; } .btn-block { display: flex; width: 100%; } .btn-lg { min-height: 52px; padding: 14px 28px; font-size: 17px; border-radius: var(--r-md); } .btn-sm { min-height: 36px; padding: 7px 14px; font-size: var(--t-sm); border-radius: 8px; } /* 手机端触控目标加大到 48px（§4.6） */ @media (max-width: 640px) { .btn { min-height: 48px; } .btn-sm { min-height: 40px; } } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--navy-800); box-shadow: 0 2px 10px rgba(16,28,51,.25); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; } .brand-logo { width: 38px; height: 38px; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .3px; } .brand-sub { color: var(--gold-500); font-size: 12.5px; font-weight: 600; } .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .site-nav { display: none; position: absolute; top: 62px; left: 0; right: 0; background: var(--navy-800); flex-direction: column; padding: 8px 18px 18px; border-top: 1px solid rgba(255,255,255,.12); } .site-nav.open { display: flex; } .site-nav a { color: var(--line); padding: 11px 4px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none !important; } .site-nav a:hover { color: var(--gold-500); } .site-nav a.active { color: var(--gold-500); font-weight: 700; } /* BiblePro 入口 —— 抽屉形态（手机 / 顶栏收起态）是「[logo] 下载 主内圣经」， 桌面一排时缩成「[logo] BiblePro」。 ⚠️ 顶栏和抽屉是同一份 HTML，所以两种文案都渲染出来，用 CSS 决定显示哪一个： 桌面那排只有 6 个位置且要容纳缅甸语（实测最宽 1157px）， 直接把字面换成「下载 …」会把顶栏挤进收起态。 */ .site-nav .nav-cta { color: var(--gold-500); font-weight: 700; display: flex; align-items: center; gap: 9px; } .nav-cta-logo { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; } .nav-cta-short { display: none; } /* 抽屉里显示完整的「下载 …」 */ @media (min-width: 900px) { .site-nav .nav-cta { gap: 7px; } .nav-cta-logo { width: 19px; height: 19px; border-radius: 5px; } .nav-cta-full { display: none; } .nav-cta-short { display: inline; } } /* 收起态也是抽屉形态（宽屏但菜单装不下时）—— 跟手机一样显示完整文案 */ .site-header.nav-collapsed .nav-cta-full { display: inline; } .site-header.nav-collapsed .nav-cta-short { display: none; } /* Share-this-page item inside the mobile menu */ .site-nav .nav-share { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--line); padding: 11px 4px; font-weight: 500; font-size: 16px; font-family: var(--font); border-bottom: 1px solid rgba(255,255,255,.08); } .site-nav .nav-share:hover { color: var(--gold-500); } .site-nav .nav-share svg { width: 17px; height: 17px; flex: 0 0 auto; } @media (min-width: 900px) { .site-nav .nav-share { display: none; } } /* Account entry — pill button set apart from the content nav */ .site-nav .nav-login { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; font-weight: 600; margin-top: 12px; align-self: flex-start; } .site-nav .nav-login:hover { border-color: var(--gold-500); color: var(--gold-500); } .site-nav .nav-login .nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin-left: -6px; border: 1px solid rgba(255,255,255,.4); } /* Centered modal dialogs (account security / delete account) */ .modal-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); } .modal-overlay.open { display: flex; } .modal-card { position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 20px 50px rgba(15, 23, 42, .35); } .modal-card h3 { margin-bottom: 12px; } .modal-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-400); padding: 4px; } .modal-close:hover { color: #334155; } /* Post card author chip → links to the author's public timeline */ .post-author { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .post-author .author-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } /* Understated account actions under the profile form */ .account-links { font-size: 13.5px; color: var(--ink-400); } .account-links a { color: #6b7280; } .account-links a:hover { color: var(--navy-700); } .account-links a.danger-link:hover { color: #dc2626; } /* Language dropdown (flag + label) */ .lang-dropdown { position: relative; } /* ── 语言切换在【顶栏本体】里，不在汉堡菜单里（Ray 2026-07-31）────────────── 位置全靠 order 决定，DOM 里只有一份： · 手机 / 收起态 → 汉堡按钮【左边】，始终可见 · 桌面一排时 → 导航【之后】，最右侧（与改动前的观感一致） `margin-left:auto` 负责把它推到右边：顶栏是 space-between， 三个可见元素时若不推，它会停在正中间。 */ .header-inner > .lang-dropdown { margin: 0 6px 0 auto; flex: 0 0 auto; } /* 手机上按钮要小一点 —— 顶栏里还有品牌区和汉堡，三样必须并排放得下 */ .header-inner > .lang-dropdown .lang-toggle { padding: 6px 10px; } .lang-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); color: var(--line); border: 1px solid rgba(255,255,255,.25); border-radius: 9px; padding: 7px 14px; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; } .lang-toggle:hover { border-color: var(--gold-500); color: var(--gold-500); } .lang-toggle .flag { font-size: 17px; line-height: 1; } .lang-toggle .caret { font-size: 11px; opacity: .8; transition: transform .15s ease; } .lang-dropdown.open .lang-toggle .caret { transform: rotate(180deg); } .lang-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 200; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; padding: 6px; } .lang-dropdown.open .lang-menu { display: block; } .lang-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink-900) !important; font-size: 14.5px; font-weight: 600; border: 0 !important; text-decoration: none !important; } .lang-menu a .flag { font-size: 18px; line-height: 1; } .lang-menu a:hover { background: var(--blue-50); color: var(--navy-700) !important; } .lang-menu a.active { background: var(--gold-100); color: var(--gold-600) !important; } /* ══════════════════════════════════════════════════════════════════════════ 顶栏一行到底 —— 2026-07-28 修 ☠️ 问题：缅甸语首页顶栏高 118px（正常 62px），9 个元素被挤成两三行，很难看。 泰语、中文也有同样的毛病，只是没那么夸张。 ☠️ 根因有两层，只修一层没用： ① flex 子项默认 flex-shrink:1 —— 放不下时先被压扁，一压扁文字就换行。 所以「Read & Learn」「Download BiblePro」「Ecclesia Global」都成了两行。 ② 光加 nowrap 会走向另一个极端：实测缅甸语这一排需要 1157px， 而容器（max-width 1320，减去品牌区）只给得出 868px —— 会直接撑破横向溢出。 ★ 所以做成【自适应】：放得下就完整显示，放不下自动收成汉堡菜单（见 main.js 的 fitNav）。 这样不依赖「每种语言的译文有多长」—— 以后改译文、加语言都不会再把顶栏挤坏。 ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { .nav-toggle { display: none; } .site-nav { display: flex; position: static; flex-direction: row; align-items: center; background: none; border: 0; padding: 0; gap: 4px; } /* ① 一律不换行、不被压扁 —— 顶栏永远是一行 */ .site-nav > a, .site-nav > .nav-cta, .site-nav .nav-drop-toggle, .site-nav .nav-login, .brand-name, .brand-sub { white-space: nowrap; } .site-nav > a, .site-nav > .nav-dropdown, .site-nav > .nav-cta, .site-nav > .nav-login, .brand { flex: 0 0 auto; } .header-inner > .brand { min-width: 0; } /* ② 空间紧张时先收紧间距，再考虑收起 —— 能多留一档完整菜单就多留一档 */ .site-nav a { border: 0; padding: 8px 12px; font-size: 15.5px; position: relative; } .site-nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold-500); } /* 桌面：语言器排在导航之后（最右）。导航自己撑满并右对齐， 否则 space-between 会把「导航」和「语言器」分到两端、中间裂一个大口子。 */ .header-inner > .lang-dropdown { order: 3; margin: 0 0 0 8px; } .header-inner > .lang-dropdown .lang-toggle { padding: 7px 14px; } .site-nav { order: 2; flex: 1 1 auto; justify-content: flex-end; } .site-nav .nav-login { margin: 0 0 0 12px; padding: 8px 16px; font-size: 14.5px; border: 1px solid rgba(255,255,255,.35); align-self: center; } } /* ── 中等宽度：先收紧，尽量别收起 ──────────────────────────────────── 1200px 以下品牌副标题最先让位 —— 它是纯装饰，而缅甸语那句 「ခရစ်ယာန် အရင်းအမြစ်များ」很长，占掉的正是菜单要用的地方。 */ @media (min-width: 900px) and (max-width: 1199px) { .site-nav { gap: 0; } .site-nav a { padding: 8px 8px; font-size: 15px; } .site-nav a.active::after { left: 8px; right: 8px; } .site-nav .nav-login { margin-left: 8px; padding: 7px 12px; font-size: 14px; } .header-inner > .lang-dropdown { margin-left: 4px; } .brand-sub { display: none; } .brand-name { font-size: 17.5px; } } /* ── 中间档：先收紧，尽量别收起（由 main.js 的 fitNav 加上这个类）────── 缅甸语那排菜单实测要 1157px，而 1920px 屏幕上顶栏也只有 1320px 减去品牌区 —— 差一点点就要整排收进汉堡，很可惜。先把副标题、内边距、字号收一档再判断， 多数情况下就够了。 */ @media (min-width: 900px) { .site-header.nav-tight .brand-sub { display: none; } .site-header.nav-tight .brand-name { font-size: 17px; } .site-header.nav-tight .site-nav { gap: 0; } .site-header.nav-tight .site-nav a, .site-header.nav-tight .site-nav .nav-drop-toggle { padding: 8px 7px; font-size: 14.5px; } .site-header.nav-tight .site-nav a.active::after { left: 7px; right: 7px; } .site-header.nav-tight .site-nav .nav-login { margin-left: 6px; padding: 7px 11px; font-size: 13.5px; } .site-header.nav-tight .header-inner > .lang-dropdown { margin-left: 4px; } } /* ── 放不下就收成汉堡菜单（由 main.js 的 fitNav 加上这个类）────────── ☠️ 纯 CSS 做不到「按内容实际宽度决定」：媒体查询只知道视口宽度， 不知道这一排菜单在【当前语言】下要占多少。缅甸语要 1157px、英文只要 700 出头， 写死一个断点必然有语言被夹坏 —— 要么挤成两行，要么早早收起浪费空间。 */ .site-header.nav-collapsed .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--navy-800); border-top: 1px solid rgba(255,255,255,.12); padding: 8px 0; gap: 0; z-index: 60; } .site-header.nav-collapsed .site-nav.open { display: flex; } .site-header.nav-collapsed .nav-toggle { display: inline-flex; } .site-header.nav-collapsed .site-nav > a, .site-header.nav-collapsed .site-nav .nav-drop-toggle, .site-header.nav-collapsed .site-nav > .nav-cta { padding: 11px 22px; white-space: normal; } .site-header.nav-collapsed .site-nav a.active::after { display: none; } .site-header.nav-collapsed .site-nav .nav-login { margin: 8px 22px; } .site-header.nav-collapsed .site-nav .nav-drop-menu { position: static; display: none; background: rgba(0,0,0,.18); border: 0; box-shadow: none; min-width: 0; } .site-header.nav-collapsed .site-nav .nav-dropdown.open .nav-drop-menu { display: block; } .site-header.nav-collapsed .site-nav .nav-drop-menu a { padding-left: 38px; } /* 收起态（宽屏但菜单放不下时也会进这个态）：语言器回到汉堡按钮左边。 特异度高于上面 @media 里那条 order:3，所以两处宽度都按这条走。 */ .site-header.nav-collapsed .header-inner > .lang-dropdown { order: 0; margin: 0 6px 0 auto; } .site-header { position: relative; } /* ⚠️ 这里【曾经】写着 `.lang-menu { position: static }` —— 那是给「菜单在汉堡抽屉里 顺流展开」用的。语言器搬到顶栏后必须去掉：static 会让它把顶栏顶开、把整页往下挤。 现在它一律是锚在按钮下方的浮层。 */ @media (max-width: 899px) { .lang-menu { right: 0; min-width: 150px; } } /* "Read & Learn" content dropdown (articles / Q&A / devotionals) */ .nav-dropdown { position: relative; } .nav-drop-toggle { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: var(--line); padding: 11px 4px; font-weight: 500; font-size: 16px; font-family: var(--font); border-bottom: 1px solid rgba(255,255,255,.08); } .nav-drop-toggle:hover { color: var(--gold-500); } .nav-drop-toggle.active { color: var(--gold-500); font-weight: 700; } .nav-drop-toggle .caret { font-size: 11px; opacity: .8; transition: transform .15s ease; } .nav-dropdown.open .nav-drop-toggle .caret { transform: rotate(180deg); } .site-nav .nav-drop-menu { display: none; } .nav-dropdown.open .nav-drop-menu { display: block; } /* 下拉项 / 登录项里的 SVG 图标 —— 替代原先的 emoji（💬🙏🔍👤⬇）。 emoji 在四种语言的系统上渲染各不相同，缅甸文/泰文系统上还常缺字形变豆腐块； SVG 用 currentColor，跟着文字颜色走，hover 和 active 态自动一致。 */ .nav-ico { width: 17px; height: 17px; flex: none; vertical-align: -3px; margin-right: 7px; stroke: currentColor; opacity: .75; } .nav-drop-menu a:hover .nav-ico, .nav-drop-menu a.active .nav-ico { opacity: 1; } .nav-login .nav-ico { margin-right: 5px; } @media (max-width: 899px) { /* Sub-items flow inline, indented under the toggle. */ .site-nav .nav-drop-menu a { padding-left: 22px; font-size: 15px; } /* Keep the current section visible even when collapsed. */ .nav-dropdown.open-section .nav-drop-menu { display: block; } } @media (min-width: 900px) { .nav-drop-toggle { width: auto; border: 0; padding: 8px 12px; font-size: 15.5px; position: relative; } .nav-drop-toggle.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold-500); } .site-nav .nav-drop-menu { position: absolute; left: 0; top: 100%; z-index: 200; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; padding: 6px; } .nav-dropdown:hover .nav-drop-menu { display: block; } .site-nav .nav-drop-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink-900) !important; font-size: 14.5px; font-weight: 600; } .site-nav .nav-drop-menu a:hover { background: var(--blue-50); color: var(--navy-700) !important; } .site-nav .nav-drop-menu a.active { background: var(--gold-100); color: var(--gold-600) !important; } .site-nav .nav-drop-menu a.active::after { display: none; } } /* ---------- Google sign-in ---------- */ .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: var(--ink-900); border: 1px solid var(--line); } .btn-google:hover { background: var(--blue-50); color: var(--ink-900); } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-400); font-size: 13.5px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- Flash messages ---------- */ .flash { margin: 14px 0; padding: 13px 16px; border-radius: 10px; font-weight: 500; } .flash-success { background: #e8f6ec; color: var(--success); border: 1px solid #bfe3c9; } .flash-error { background: #fdecec; color: var(--error); border: 1px solid #f3c3c3; } .flash-info { background: var(--blue-100); color: var(--navy-700); border: 1px solid #c9d9ee; } /* ---------- Hero ---------- */ .hero { background: radial-gradient(1000px 420px at 85% -10%, rgba(201,162,39,.22), transparent 60%), linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 70%, var(--navy-600) 100%); color: #fff; padding: 52px 0 56px; } .hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.22; font-weight: 800; letter-spacing: .2px; max-width: 21em; } .hero .hero-sub { margin-top: 16px; max-width: 46em; color: var(--line); font-size: clamp(15px, 2.4vw, 17.5px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hero .btn-outline { border-color: #fff; color: #fff; } .hero .btn-outline:hover { background: #fff; color: var(--navy-800); } .hero-search { margin-top: 28px; max-width: 640px; } .hero-search form { display: flex; gap: 0; box-shadow: var(--shadow-lg); border-radius: 12px; overflow: hidden; } .hero-search input[type="search"] { flex: 1; min-width: 0; border: 0; padding: 15px 18px; font-size: 16px; font-family: var(--font); outline: none; } .hero-search button { border: 0; background: var(--gold-500); color: var(--navy-900); font-weight: 700; font-size: 16px; padding: 0 24px; cursor: pointer; } .hero-search button:hover { background: var(--gold-600); } .hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); margin-top: var(--s-6); } .hero-stat .num { font-size: 26px; font-weight: 800; color: var(--gold-500); } .hero-stat .label { font-size: var(--t-sm); color: #B7C4CE; } /* 统计来源说明 —— 「186 万」里绝大多数是公开数据集导入、没人核实过。 不写这一句，用户会把它读成「186 万间已核实教会」。诚实比数字好看重要。 */ .hero-stats-note { margin-top: var(--s-3); max-width: 640px; font-size: var(--t-caption); line-height: 1.55; color: #97A6B3; } /* ---------- Hero 右侧的 BiblePro 下载位（2026-07-31）---------- 起因：Ray 截图指出「右边的空间实在是空荡荡的」—— 1900px 宽的屏上，Hero 文字最宽 46em，右边约三分之一首屏是纯渐变。 ⚠️ 断点定在 1000px 而不是常用的 900： 900 那档右栏只剩约 250px，手机截图缩到那个宽度就看不清界面了， 而看不清的截图起不到「展示 App 长什么样」的作用，不如不放。 */ .hero-grid { display: grid; gap: var(--s-6); } @media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: center; gap: var(--s-8); } } /* ⚠️ min-width:0 —— grid 子项默认 min-width:auto，长单词/长 URL 会把左栏撑破， 表现是右栏被挤出容器。这一行是 grid 布局的常规必需项，不是可省的。 */ .hero-main { min-width: 0; } .hero-app { display: none; } /* 默认不出现，够宽才显示（见下方 @media） */ @media (min-width: 1000px) { .hero-app { display: block; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: var(--s-5) var(--s-4) var(--s-4); backdrop-filter: blur(6px); } } /* 产品图：800×500 的横版合成图（Mac + iPhone，机身框已烘焙在图里）。 ☠️ 第一版我给它套了个 CSS 手机外框 —— 因为我按想象中的「竖版手机截图」设计， 没先量图的真实尺寸，渲染出来是框套框。所以这里不加任何边框，只做圆角。 往两侧各扩 4px 让图与卡片边缘齐平：卡内 padding 是给文字的，图留白反而显得局促。 */ .hero-app-shot { display: block; width: calc(100% + 8px); height: auto; margin: 0 -4px var(--s-4); border-radius: 12px; box-shadow: 0 14px 32px rgba(0, 0, 0, .34); } .hero-app-icon { border-radius: 11px; margin: 0 auto var(--s-2); display: block; } .hero-app-h { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 var(--s-3); line-height: 1.45; } .hero-app .btn-gold { width: 100%; } .hero-app-note { font-size: 11.5px; color: #97A6B3; margin: var(--s-2) 0 0; } /* 整张卡可点 —— 用户看到产品截图的第一反应是点图，点了没反应会以为坏了。 ☠️ 不能把整块包进 ：里面已经有一个下载按钮， 套 是无效 HTML，浏览器会把它拆开，结果是链接错位、键盘 Tab 顺序乱掉。 → 用按钮自己的链接「铺满」整张卡（伪元素撑满）： 整卡可点，但仍然只有一个链接 —— 屏幕阅读器和 Tab 键都跟原来一样。 */ .hero-app { position: relative; } .hero-app .btn-gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .hero-app:hover .btn-gold { background: var(--gold-600); } /* 让整卡的可点性看得出来 */ .hero-app-shot { cursor: pointer; } /* ---- 手机上的替代形态：一条横幅 ---- Hero 右栏在窄屏整块隐藏（竖着堆会把统计数字挤到第二屏外）， 但手机用户恰恰是唯一能立刻装 App 的人 —— 不能把广告对他们藏掉。 */ .hero-app-bar { display: flex; align-items: center; gap: var(--s-3); padding: 11px var(--s-4); background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); } .hero-app-bar img { border-radius: 9px; flex: none; } .hero-app-bar-t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--blue-100); /* 两行截断：缅甸文/泰文的这句话比中英文长得多，不截会把按钮挤没 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hero-app-bar-b { flex: none; background: var(--gold-500); color: var(--navy-900); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; white-space: nowrap; } @media (min-width: 1000px) { .hero-app-bar { display: none; } } /* 极窄屏（320px 的老 iPhone SE / 折叠屏外屏）收紧一圈。 ☠️ 实测发现的：320px + 缅甸语时，按钮要占 183px，那句描述只剩 45px —— 两行、每行三个字，不溢出，但看着像坏了。缅甸语是四种语言里最长的， 只按中英文估宽度就会漏掉这种情况。 */ @media (max-width: 400px) { .hero-app-bar { gap: var(--s-2); padding: 10px 12px; } .hero-app-bar img { width: 30px; height: 30px; } /* 描述整句去掉 —— 先试过只缩小字号，320px 下它仍然只有 78px 宽： 截成「BiblePro ဖြင့် နေ့စဉ်…」这样的残句，缅甸文的音标还被行截断削掉一截。 残句不如没有；按钮上写着「下载 BiblePro」，话已经说清楚了。 */ .hero-app-bar-t { display: none; } .hero-app-bar-b { flex: 1; text-align: center; font-size: 13px; } } /* 区块标题前的图标 —— 替代原先的 emoji（🌏🕊️📰❓）。 emoji 会跟着系统字体走：同一个 🕊️ 在 Windows / macOS / 安卓上是三个样子， 在缅甸文/泰文系统上还可能整个缺字形。SVG 用 currentColor，四端一致。 */ .sec-ico { width: 21px; height: 21px; vertical-align: -3px; margin-right: 8px; stroke: var(--gold-600); opacity: .9; } /* ---------- Sections ---------- */ .section { padding: 46px 0; } .section-soft { background: var(--bg-soft); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(21px, 3.4vw, 27px); font-weight: 800; color: var(--navy-800); } .section-head .more { font-weight: 600; font-size: 15px; white-space: nowrap; } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: 18px; } .grid-cats { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .grid-cats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .grid-cats { grid-template-columns: 1fr; } } .grid-cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .cat-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); text-decoration: none !important; color: inherit; transition: transform .12s ease, box-shadow .15s ease; } a.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .cat-card .icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 23px; background: var(--blue-100); color: var(--navy-700); } .cat-card h3 { font-size: 17px; color: var(--navy-800); margin-bottom: 3px; } .cat-card p { font-size: 14px; color: var(--ink-600); } .cat-card.disabled { opacity: .62; } /* ---------- 平台四大支柱卡（首页）---------- 与 .cat-card 的区别是有意的：这四张是平台入口，不是列表项。 所以竖排、有明确 CTA、四种配色各不相同但同一色系 —— 目的是让人一眼看出「这是四个不同的地方」，而不是四张一样的白卡。 ⚠️ 层次靠【边框 + 极浅底色】做，不是靠阴影。 阴影只在 hover 时轻微出现；一上来就四张浮起来的卡 = 廉价模板观感。 */ .grid-pillars { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } @media (max-width: 1080px) { .grid-pillars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-pillars { grid-template-columns: 1fr; } } .pillar-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none !important; color: inherit; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } a.pillar-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--ink-400); } .pillar-ico { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-1); } .pillar-ico svg { width: 23px; height: 23px; } .pillar-ico img { width: 26px; height: 26px; border-radius: 7px; } .pillar-card h3 { font-size: var(--t-h4); line-height: 1.3; color: var(--navy-800); font-weight: 700; } .pillar-card p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-600); flex: 1 1 auto; } .pillar-cta { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 700; color: var(--navy-700); } a.pillar-card:hover .pillar-cta { color: var(--navy-800); } .pillar-card.disabled { opacity: .6; } /* 四种配色 —— 同一色系里拉开层次，不是四个撞色 */ .pillar-churches .pillar-ico { background: #E7EEF3; color: var(--navy-700); } .pillar-community .pillar-ico { background: var(--success-bg); color: var(--success); } .pillar-faith .pillar-ico { background: var(--gold-100); color: var(--gold-600); } .pillar-app .pillar-ico { background: var(--bg-soft); } .badge-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: var(--gold-100); color: var(--gold-600); font-size: 11.5px; font-weight: 700; vertical-align: middle; } /* Church cards */ .church-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } .church-card h3 { font-size: 18px; line-height: 1.35; } .church-card h3 a { color: var(--navy-800); } /* The church's name in its other language. Pulled back against the card's 10px flex gap so it reads as part of the title block, not as another metadata row. */ .church-alt-name { margin-top: -6px; font-size: 14.5px; line-height: 1.35; color: var(--ink-600); } .church-meta { font-size: 14px; color: var(--ink-600); display: flex; flex-wrap: wrap; gap: 6px 14px; } .church-meta span { display: inline-flex; align-items: center; gap: 5px; } .church-desc { font-size: 14.5px; color: var(--ink-600); } .church-card .card-foot { margin-top: auto; padding-top: 8px; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 700; } .badge-verified { background: #e8f6ec; color: var(--success); } .badge-online { background: var(--blue-100); color: var(--navy-700); } .badge-lang { background: var(--bg-soft); color: var(--ink-600); border: 1px solid var(--line); font-weight: 600; } /* Chip links (cities / languages) */ .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-block; padding: 9px 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); color: var(--navy-700); font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow); text-decoration: none !important; } .chip:hover { border-color: var(--gold-500); color: var(--gold-600); } .chip small { color: var(--ink-400); font-weight: 500; } /* ---------- BiblePro CTA block ---------- */ .cta-block { background: radial-gradient(600px 260px at 90% 0%, rgba(201,162,39,.25), transparent 60%), linear-gradient(150deg, var(--navy-800), var(--navy-600)); color: #fff; border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow-lg); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 34px; } .cta-block .cta-appicon { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--shadow-lg); flex-shrink: 0; } .cta-block .cta-text { flex: 1 1 320px; } .cta-block h2, .cta-block h3 { font-size: clamp(19px, 3vw, 24px); margin-bottom: 8px; } .cta-block p { color: var(--line); font-size: 15px; } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { background: var(--bg-soft); border-bottom: 1px solid var(--line); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; font-size: 13.5px; color: var(--ink-400); } .breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-400); } .breadcrumbs a { color: var(--ink-600); } .breadcrumbs span[aria-current] { color: var(--navy-700); font-weight: 600; } /* ---------- Page headers ---------- */ .page-head { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 38px 0; } .page-head h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; } .page-head p { margin-top: 10px; color: var(--line); max-width: 52em; } /* The other-language name in the hero. Stated explicitly rather than left to `.page-head p` winning on specificity: the card rule paints it ink-grey, which is all but invisible on the navy gradient. */ .page-head .church-alt-head { margin-top: 4px; font-size: clamp(15px, 2.2vw, 19px); color: var(--line); } /* Title row with an inline share button (replaces the old standalone panel) */ .ph-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ph-row h1 { min-width: 0; } .page-head .share-dropdown { flex: 0 0 auto; margin-top: 4px; } .page-head .share-toggle { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .32); border-radius: 9px; padding: 8px 16px; } .page-head .share-toggle:hover { background: rgba(255, 255, 255, .2); } /* ---------- Filters ---------- */ .filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 24px; } .filters .filter-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .filters .filter-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .filters .full { grid-column: 1 / -1; } label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy-800); margin-bottom: 5px; } input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: 11px 13px; font-size: 15px; font-family: var(--font); border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-900); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(62,109,181,.15); } .checkbox-inline { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-600); } .checkbox-inline input { width: auto; } /* Honeypot — hide from humans, keep in DOM for bots */ .hp-wrap { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; overflow: hidden; } /* ---------- Church directory: filters | cards | app promo ---------- */ .directory-layout { display: grid; gap: 24px; align-items: start; } /* wide: three columns — filters left, cards centre, promo right */ @media (min-width: 1100px) { .directory-layout { grid-template-columns: 244px minmax(0, 1fr) 300px; } } /* medium: filters left + cards; promo drops full-width below */ @media (min-width: 760px) and (max-width: 1099px) { .directory-layout { grid-template-columns: 232px minmax(0, 1fr); } .dir-rail { grid-column: 1 / -1; } } .dir-filters { display: flex; flex-direction: column; gap: 14px; } .filters-side { margin-bottom: 0; } .filters-side .filter-grid { grid-template-columns: 1fr; } .filter-actions-col { flex-direction: column; align-items: stretch; margin-top: 12px; } .filter-actions-col .checkbox-inline { margin-bottom: 6px; } .dir-side-links { display: flex; flex-direction: column; gap: 10px; } .dir-main { min-width: 0; } @media (min-width: 1100px) { .dir-filters, .dir-rail-sticky { position: sticky; top: 82px; } } /* the promo renders vertically in the narrow right rail */ .dir-rail-sticky .cta-block { flex-direction: column; text-align: center; padding: 26px 22px; gap: 16px; } .dir-rail-sticky .cta-block .cta-text { flex: 1 1 auto; } .dir-rail-sticky .cta-block .btn { width: 100%; justify-content: center; } /* ---------- Church detail ---------- */ .detail-layout { display: grid; gap: 24px; } @media (min-width: 900px) { .detail-layout { grid-template-columns: 1fr 340px; align-items: start; } } .detail-main, .detail-side { display: flex; flex-direction: column; gap: 22px; } /* List pages (Q&A / devotionals): content grid + a side BiblePro promo. The side promo shows on wider screens; on mobile it is hidden and the bottom CTA covers it, so the ad is never crammed into the middle. */ .list-layout { display: grid; gap: 24px; } @media (min-width: 1000px) { .list-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } } .list-main { min-width: 0; } .list-side { display: none; } @media (min-width: 1000px) { .list-side { display: block; position: sticky; top: 84px; } } /* ---------- Detail sidebar widgets ---------- */ .side-widget { padding: 16px 18px; } .side-widget-h { font-size: 15px; color: var(--navy-800, var(--navy-800)); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bg-soft, var(--bg-soft)); } .side-list { list-style: none; margin: 0; padding: 0; } .side-list li { padding: 8px 0; border-bottom: 1px solid var(--bg-soft, var(--bg-soft)); } .side-list li:last-child { border-bottom: 0; } .side-list a { display: block; color: var(--ink-900, #1a2233); text-decoration: none !important; font-size: 14px; line-height: 1.5; font-weight: 600; } .side-list a:hover { color: var(--navy-700, var(--navy-700)); } .side-date { display: block; font-size: 12px; color: var(--ink-400, var(--ink-400)); font-weight: 400; margin-top: 2px; } .side-list-num { counter-reset: sl; } .side-list-num li { counter-increment: sl; position: relative; padding-left: 26px; } .side-list-num li::before { content: counter(sl); position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-100, #fdf6e3); color: var(--gold-600, #a67c12); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .side-list-num li:nth-child(-n+3)::before { background: var(--navy-700, var(--navy-700)); color: #fff; } .side-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--navy-700, var(--navy-700)); text-decoration: none !important; } .side-more:hover { color: var(--gold-600, #a67c12); } .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .panel h2, .panel h3 { color: var(--navy-800); margin-bottom: 14px; font-size: 19px; } .dl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .dl-table th, .dl-table td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--bg-soft); vertical-align: top; } .dl-table th { color: var(--ink-400); font-weight: 600; white-space: nowrap; width: 38%; } .dl-table td { color: var(--ink-900); word-break: break-word; } .disclaimer { background: var(--gold-100); border: 1px solid #e8d9a8; border-radius: 10px; padding: 14px 16px; font-size: 13.5px; color: #6b5a17; line-height: 1.6; } .disclaimer p + p { margin-top: 8px; } .action-row { display: flex; flex-wrap: wrap; gap: 10px; } /* ---------- Share buttons ---------- */ .share-row { display: flex; flex-wrap: wrap; gap: 10px; } .share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px; font-size: 14px; font-weight: 600; border: 1.5px solid var(--line); background: #fff; color: var(--ink-600); cursor: pointer; text-decoration: none !important; } .share-btn:hover { border-color: var(--blue-500); color: var(--blue-500); } /* ---------- Download page ---------- */ .dl-buttons { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 760px; } .dl-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; border-radius: 14px; text-align: center; font-weight: 700; font-size: 16px; cursor: pointer; border: 0; text-decoration: none !important; transition: transform .12s ease, box-shadow .15s ease; box-shadow: var(--shadow); } .dl-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .dl-btn small { font-weight: 500; font-size: 12.5px; opacity: .8; } .dl-btn-android { background: var(--navy-800); color: #fff; } .dl-btn-ios { background: var(--navy-600); color: #fff; } .dl-btn-web { background: var(--gold-500); color: var(--navy-900); } .dl-btn-copy { background: #fff; color: var(--navy-800); border: 2px solid var(--navy-700); } .qr-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; text-align: center; max-width: 340px; } .qr-box img { width: 210px; height: 210px; object-fit: contain; } .qr-placeholder { width: 210px; height: 210px; margin: 0 auto; border-radius: 12px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-400); font-size: 13.5px; padding: 16px; } /* Feature list */ .feature-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .feature-item { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-weight: 600; font-size: 15px; color: var(--navy-800); box-shadow: var(--shadow); } .feature-item .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-500); } /* FAQ */ .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 800px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; box-shadow: var(--shadow); } .faq-item summary { cursor: pointer; font-weight: 700; color: var(--navy-800); padding: 14px 0; list-style: none; position: relative; padding-right: 28px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 21px; color: var(--gold-600); font-weight: 400; } .faq-item[open] summary::after { content: "–"; } .faq-item .faq-a { padding: 0 0 16px; color: var(--ink-600); font-size: 15px; } /* Screenshots placeholder */ .shots-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-width: 760px; } .shot-ph { aspect-ratio: 9 / 17; border-radius: 18px; border: 2px dashed var(--line); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-400); font-size: 12.5px; text-align: center; padding: 10px; } /* ---------- Pagination ---------- */ .pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .pagination a, .pagination span { min-width: 40px; padding: 9px 13px; text-align: center; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: var(--navy-700); font-weight: 600; font-size: 14.5px; text-decoration: none !important; } .pagination .current { background: var(--navy-700); color: #fff; border-color: var(--navy-700); } .pagination a:hover { border-color: var(--gold-500); } /* ---------- Prose (articles, devotionals, Q&A, static pages) ---------- */ .prose { max-width: none; } .prose h2 { color: var(--navy-800); font-size: 21px; margin: 28px 0 10px; } .prose h3 { color: var(--navy-800); font-size: 18px; margin: 22px 0 8px; } .prose h4 { color: var(--navy-800); font-size: 16.5px; margin: 18px 0 6px; } .prose p { margin: 12px 0; color: var(--ink-600); } .prose p:first-child { margin-top: 0; } .prose ul, .prose ol { margin: 12px 0; padding-left: 28px; color: var(--ink-600); } .prose li { margin: 4px 0; } .prose img { border-radius: 10px; box-shadow: var(--shadow); margin: 14px 0; } .prose blockquote { margin: 16px 0; padding: 10px 16px; border-left: 4px solid var(--gold-500); background: var(--blue-50); border-radius: 0 10px 10px 0; color: var(--ink-600); } .prose blockquote p { margin: 6px 0; } .prose hr { border: 0; border-top: 2px solid var(--line); margin: 22px 0; } .prose pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 14px; margin: 14px 0; } .prose table { border-collapse: collapse; margin: 14px 0; width: 100%; } .prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; } .prose th { background: var(--blue-50); color: var(--navy-800); } .prose a { text-decoration: underline; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-900); color: #b9c7da; margin-top: 56px; } /* Footer content spans a wider band than the page container so it fills large screens instead of clustering in the middle. */ .site-footer .container { max-width: 1500px; } .footer-grid { display: grid; gap: 24px 18px; padding: 34px 18px 22px; grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; padding: 48px 18px 28px; } .footer-brand { grid-column: auto; } } /* Add the BiblePro promo column on wider screens (four balanced columns). */ @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.5fr; } } .footer-app-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .footer-app-brand h4 { margin: 0; } .footer-app-icon { width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto; box-shadow: var(--shadow); } .footer-app-text { margin: 0 0 14px; font-size: 14px; color: #b9c7da; max-width: 22em; } .footer-app .btn { font-weight: 700; } .footer-app-btn { display: inline-block; } .footer-social { display: flex; gap: 10px; margin-top: 14px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); color: #cdd8e8; font-size: 15px; } .footer-social a:hover { background: var(--gold-500); color: var(--navy-900); } @media (max-width: 999px) { .footer-app { grid-column: 1 / -1; } } .footer-col h4 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 9px; } .footer-col a { color: #b9c7da; font-size: 14.5px; } .footer-col a:hover { color: var(--gold-500); } .footer-tagline { margin-top: 14px; font-size: 14px; max-width: 34em; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px; font-size: 12.5px; color: #7d8ca3; display: flex; flex-direction: column; gap: 6px; } @media (min-width: 720px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer-bottom p:first-child { max-width: 56em; } /* ---------- Bottom tab bar (mobile, app style) ---------- */ .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; align-items: stretch; background: rgba(22, 38, 74, .97); /* navy-800 */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .12); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(16, 28, 51, .3); } .tab-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 8px 2px 7px; color: #b9c7da; font-size: 11px; font-weight: 600; font-family: var(--font); /* Burmese/Thai stacked marks need the taller line box. */ line-height: 1.7; text-align: center; background: none; border: 0; cursor: pointer; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .tab-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-item svg { width: 22px; height: 22px; flex: 0 0 auto; } .tab-item:hover { color: #fff; } .tab-item.active { color: var(--gold-500); } /* 底部导航正中央那个凸起的大按钮。 2026-07-29 起装的是【地图】（原先是跳出站外的 BiblePro，见 siteFooter.html 的注释）。 .tab-app 选择器保留，方便将来想把某个功能重新放回中央位。 */ .tab-app .tab-app-btn, .tab-map .tab-app-btn { width: 46px; height: 46px; margin-top: -20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); box-shadow: 0 4px 14px rgba(198, 154, 75, .40), 0 0 0 4px var(--navy-800); } .tab-app .tab-app-btn svg, .tab-map .tab-app-btn svg { width: 23px; height: 23px; } .tab-app > span:last-child, .tab-map > span:last-child { color: var(--gold-500); } .tab-app:hover .tab-app-btn, .tab-map:hover .tab-app-btn { background: linear-gradient(150deg, #D4AC63, var(--gold-500)); } .tab-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(6px); bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 130; padding: 9px 20px; border-radius: 22px; background: var(--navy-900); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .tab-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 899px) { /* Keep page content and footer clear of the fixed tab bar. */ body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } } @media (min-width: 900px) { .tab-bar, .tab-toast { display: none; } } /* ---------- Utilities ---------- */ .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 34px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .text-muted { color: var(--ink-400); font-size: 14px; } .text-center { text-align: center; } .hidden { display: none !important; } /* ---------- Me tab unread dot ---------- */ .tab-icon { position: relative; display: inline-flex; } .tab-dot { position: absolute; top: -4px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--navy-800); } /* ---------- Notifications (me.php) ---------- */ .notif-list { list-style: none; } .notif-item a { display: flex; gap: 10px; align-items: flex-start; padding: 11px 10px; border-radius: 10px; color: var(--ink-900); text-decoration: none !important; border-bottom: 1px solid var(--bg-soft); } .notif-item a:hover { background: var(--blue-50); } .notif-item.unread a { background: var(--gold-100); } .notif-item.unread a:hover { background: #f3e7c3; } .notif-icon { flex: 0 0 auto; font-size: 17px; line-height: 1.4; } .notif-body { font-size: 14.5px; line-height: 1.5; } .notif-body em { color: var(--navy-700); font-style: normal; } .notif-time { display: block; font-size: 12px; color: var(--ink-400); margin-top: 2px; } /* ---------- Onboarding banner (new users) ---------- */ .onboard-panel { border-left: 4px solid var(--gold-500); } .onboard-panel h3 { margin-bottom: 6px; } .onboard-panel p { color: var(--ink-600); font-size: 14.5px; } /* ---------- Danger zone (delete account) ---------- */ .panel-danger { border-color: #f3c3c3; } .panel-danger h3 { color: var(--error); } .btn-danger { background: #fdecec; color: var(--error); border: 1.5px solid #f3c3c3; } .btn-danger:hover { background: var(--error); color: #fff; border-color: var(--error); } /* ---------- Faith Q&A ---------- */ .answer-official { background: var(--gold-100, #fdf6e3); border-radius: 10px; padding: 14px !important; border-bottom: none !important; margin-bottom: 10px; } /* ---------- Devotionals ---------- */ .devo-scripture { border-left: 4px solid var(--gold-500, var(--gold-500)); } .scripture-quote { margin: 10px 0 2px; padding: 4px 2px 4px 12px; font-size: 17px; line-height: 1.9; color: var(--navy-700, var(--navy-700)); font-style: italic; } .devo-verse { font-style: italic; color: var(--ink-600, var(--ink-600)); } /* ---------- Facebook-style interactions (like + comments) ---------- */ .fb-box { margin-top: 10px; } .fb-actions { display: flex; gap: 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 0; margin-bottom: 8px; } .fb-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: none; border: 0; border-radius: 8px; cursor: pointer; padding: 8px 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-600); font-family: var(--font); text-decoration: none !important; } .fb-act:hover { background: var(--blue-50); text-decoration: none; } .fb-act.liked { color: var(--blue-500); } .fb-act .fb-ico, .feed-act .fb-ico { font-size: 16px; } .fb-act.liked .fb-ico { transform: scale(1.15); } /* ---------- Share dropdown (single button + menu) ---------- */ .share-dropdown { position: relative; } .fb-actions .share-dropdown { flex: 1; display: flex; } .fb-actions .share-dropdown .share-toggle { flex: 1; } /* Feed card: the share button is one of the equal-width actions in the row. */ .feed-actions .share-dropdown { flex: 1; display: flex; } .feed-actions .share-dropdown .share-toggle { flex: 1; } .share-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: none; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; } .share-dropdown.open .share-menu-pop { display: block; } .share-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; background: none; border: 0; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--ink-700); text-align: left; cursor: pointer; text-decoration: none !important; white-space: nowrap; } .share-pop-item:hover { background: var(--bg-soft); color: var(--ink-900); } /* Standalone share (pages without the like/comment bar) */ .share-row-single { display: flex; } .share-row-single .share-toggle { border: 1px solid var(--line); border-radius: 9px; padding: 9px 18px; color: var(--ink-600); flex: 0 0 auto; } .share-row-single .share-toggle:hover { border-color: var(--blue-500); color: var(--blue-500); background: none; } .fb-count { background: var(--blue-100); color: var(--navy-700); border-radius: 999px; padding: 1px 8px; font-size: 12.5px; font-weight: 700; } .fb-comment { display: flex; gap: 9px; margin: 10px 0; } .fb-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; } .fb-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--navy-600); color: #fff; font-weight: 700; font-size: 14px; } .fb-bubble { background: var(--bg-soft); border-radius: 14px; padding: 8px 13px; max-width: 100%; overflow-wrap: anywhere; } .fb-bubble strong { font-size: 13.5px; color: var(--navy-800); display: block; } .fb-bubble p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-900); } .fb-bubble time { font-size: 11.5px; color: var(--ink-400); } .fb-form { display: flex; gap: 9px; align-items: center; margin-top: 10px; } .fb-form input[type="text"] { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14.5px; font-family: var(--font); background: var(--bg-soft); } .fb-form input[type="text"]:focus { outline: none; border-color: var(--blue-500); background: #fff; } .fb-send { background: var(--gold-500); color: var(--navy-900); border: 0; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; font-size: 15px; flex: 0 0 auto; } .fb-send:hover { background: var(--gold-600); } .fb-send:disabled { opacity: .5; } .fb-pending { background: var(--gold-100); color: var(--gold-600); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; margin: 8px 0 0; } .fb-login-hint { font-size: 14px; margin-top: 8px; } .fb-compact .fb-actions { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; } /* ---------- Me page: my questions / answers list ---------- */ .my-list { list-style: none; padding: 0; } .my-list li { padding: 10px 0; border-bottom: 1px solid var(--bg-soft, var(--bg-soft)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; } .my-list li a { font-weight: 600; } .my-list li .text-muted { font-size: 13px; } /* ---------- Mobile hero polish ---------- */ @media (max-width: 640px) { .hero { padding: 34px 0 38px; } .hero h1 { font-size: 25px; line-height: 1.3; } .hero .hero-sub { font-size: 14.5px; line-height: 1.7; margin-top: 12px; } .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; } .hero-actions .btn { width: 100%; padding: 13px 8px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* First (primary) action spans the full row; a lone second one too. */ .hero-actions .btn:first-child { grid-column: 1 / -1; } .hero-actions .btn:nth-child(2):last-child { grid-column: 1 / -1; } .hero-search { margin-top: 16px; } .hero-search input[type="search"] { padding: 13px 14px; font-size: 15px; } .hero-search button { padding: 0 18px; font-size: 15px; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 24px; padding: 13px 4px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; } .hero-stat + .hero-stat { border-left: 1px solid rgba(255, 255, 255, .14); } .hero-stat .num { font-size: 21px; } .hero-stat .label { font-size: 12px; } } /* ---------- BiblePro app icon inside download buttons ---------- */ .btn-appicon { width: 22px; height: 22px; border-radius: 6px; vertical-align: -5px; margin-right: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .dl-btn .dl-appicon { width: 34px; height: 34px; border-radius: 8px; margin-bottom: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } /* ---------- Dismissible "download BiblePro" bottom banner ---------- */ .app-banner { position: fixed; left: 12px; right: 12px; z-index: 95; /* Sits above the mobile tab-bar (~60px); desktop media query lowers it. */ bottom: calc(72px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; max-width: 620px; display: flex; align-items: center; gap: 12px; background: var(--navy-800); color: var(--line); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow-lg); } .app-banner[hidden] { display: none; } /* ☠️ 手机端底部的固定浮层会盖住页脚最后一行（2026-08-11 端到端实测）。 实测：app-banner 在 y=710 高 62，tab-bar 在 y=782 高 62 —— 两者互不重叠， 但 app-banner 正好压住页脚那句「教会与资源信息来自公开资料…」的免责声明。 免责声明是【法律性质】的文字，被浮层盖住不是排版问题。 → 给页脚留出「导航条 + 横幅」的高度，让它们永远落在内容之下。 ⚠️ 用 env(safe-area-inset-bottom) 兜住 iPhone 的底部安全区。 */ @media (max-width: 899px) { .site-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } } .app-banner-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; } .app-banner-text { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-banner-btn { white-space: nowrap; flex: 0 0 auto; } .app-banner-close { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); color: #cbd6e6; border: 0; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; } .app-banner-close:hover { background: rgba(255,255,255,.22); color: #fff; } @media (min-width: 900px) { /* No tab-bar on desktop — drop to the true bottom. */ .app-banner { max-width: 680px; padding: 12px 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .app-banner-text { font-size: 14.5px; } } /* ---------- Header notification bell ---------- */ .nav-bell { position: relative; display: inline-flex; align-items: center; } /* 顶栏右侧那两个圆按钮（私信、通知）——【同一条规则】，不各写一份。 各写一份的话，改一个忘一个只是时间问题，而结果是两个并排的按钮长得不一样。 */ .bell-btn, .nav-inbox { /* ⚠️ box-sizing 必须写死：