/* ========================================================================== Trip2China — 站点公共样式 (site.css) 适用页面: index / landing / about / tours / privacy-policy / terms 说明: - 本项目已移除 Tailwind 运行时。本文件以「手写 CSS」等价实现原页面用到的 Tailwind 工具类, 选择器命名与原始 class 保持一致, 因此 HTML 结构无需改动, 外观 1:1 保留。 - 颜色 / 间距 / 圆角 / 阴影等取值对齐 Tailwind 默认主题 (v3)。 - 任意值类 (如 text-[10px]、aspect-[16/9]) 通过转义选择器实现, 集中在此。 组织: 1. 基础重置 2. 设计变量 3. 布局/定位 4. 间距 5. 尺寸 6. 颜色 7. 字体排版 8. 边框圆角 9. 效果 10. 组件 11. 响应式 (md / lg) 12. 响应式细节 13. 导航高亮 14. 页面模块样式 ========================================================================== */ /* ---------- 1. 基础重置 (对齐 Tailwind preflight 的关键项) ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* 字体族对齐蓝湖设计稿: 设计稿为 Arial/Helvetica 类无衬线 (此前未定义, 回落 Microsoft YaHei, 字形偏窄) */ body{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased;font-family:Arial,Helvetica,"Helvetica Neue","Microsoft YaHei",sans-serif} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer} img{display:block;max-width:100%} /* 输入类控件**去掉浏览器默认自带的焦点边框**。 根因: UA 样式表在 :focus-visible 时给输入框加 `outline: auto 1px rgb(16,16,16)` —— 视觉上就是一圈黑框; 未做样式的 input 还自带 `border: 2px inset`。 实测证据: 禁用本表后 computed 立即回到 outline=auto 1px / border=2px inset, 启用本表则为 outline=none 0px / border=0, 说明 UA 默认确实被这里压制。 ⚠️ 只清 **输入控件**; button / a 的焦点框保留, 键盘 Tab 导航仍可见。 ⚠️ 去默认框必须同时给出「自定义焦点反馈」, 否则用户不知道光标在哪: · site.css 系: 下面 input:focus 改金色描边 (作用在 index 询价表) · tour.css : #overview .sc-field:focus-within 整盒换金色边+白底 · pay.css : .pay-manual input:focus 自建金色 outline 新增输入框时请按所在样式表补一条, 别只让它 "无焦点提示"。 */ input,textarea,select{outline:none} /* 兜底焦点反馈: 聚焦时把边框色换成强调色(金 #c49b63)。 对没有边框的输入框无副作用 —— border-width 为 0 时改颜色看不出来, 所以直接用元素选择器, 不必额外限定 .border 类。 */ input:focus,textarea:focus,select:focus{border-color:var(--accent)} ul,ol{margin:0;padding:0;list-style:none} .list-disc{list-style:disc} /* ---------- 2. 设计变量 ---------- */ :root{ --primary:#000000; --accent:#c49b63; --light:#f8f8f5; --muted:#999999; --black:#000; --white:#fff; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --green-50:#f0fdf4; --green-700:#15803d; --border-default:#e5e7eb; --border-soft:#EDEDEF; --bg-soft:#F9F9F9; } /* ---------- 3. 布局 / 定位 ---------- */ /* 内容区宽度对齐蓝湖设计稿: 设计稿内容区实测 1200px (1920 画板, x360..1559)。 页面各处用 .container + px-4 (16px 左右内边距), 故 max-width 取 1200+2*16=1232, 使「去掉内边距后的实际内容宽」正好 1200px。 */ .container{width:100%;max-width:1232px;margin-left:auto;margin-right:auto} .block{display:block} .inline-block{display:inline-block} .inline-flex{display:inline-flex} .flex{display:flex} .flex-1{flex:1 1 0%} .grid{display:grid} .hidden{display:none} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .sticky{position:sticky} .inset-0{top:0;right:0;bottom:0;left:0} .top-0{top:0}.top-3{top:.75rem}.top-4{top:1rem} .right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.right-6{right:1.5rem} .bottom-0{bottom:0}.bottom-3{bottom:.75rem}.bottom-6{bottom:1.5rem}.left-0{left:0} .-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50} .z-\[100\]{z-index:100}.z-\[120\]{z-index:120} .right-\[-4\%\]{right:-4%} .-\bottom-\[0\.8rem\]{bottom:-.8rem} /* Flex / Grid 子项对齐 */ .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .items-center{align-items:center} .justify-between{justify-content:space-between} .justify-center{justify-content:center} .shrink-0{flex-shrink:0} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} /* ---------- 4. 间距 (Tailwind 默认 0.25rem 步进) ---------- */ .px-1\.5{padding-left:.375rem;padding-right:.375rem} .px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-3\.5{padding-left:.875rem;padding-right:.875rem} .px-4{padding-left:1rem;padding-right:1rem} .px-5{padding-left:1.25rem;padding-right:1.25rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .px-8{padding-left:2rem;padding-right:2rem} .p-4{padding:1rem} .p-6{padding:1.5rem} .p-5{padding:1.25rem} /* .p-tour 已下沉为 #tours .p-tour (见第 14 节), 仅 #tours 卡片使用 */ .py-0\.5{padding-top:.125rem;padding-bottom:.125rem} .py-1{padding-top:.25rem;padding-bottom:.25rem} .py-1\.5{padding-top:.375rem;padding-bottom:.375rem} .py-2{padding-top:.5rem;padding-bottom:.5rem} .py-2\.5{padding-top:.625rem;padding-bottom:.625rem} .py-3{padding-top:.75rem;padding-bottom:.75rem} .py-4{padding-top:1rem;padding-bottom:1rem} .py-8{padding-top:2rem;padding-bottom:2rem} .py-10{padding-top:2.5rem;padding-bottom:2.5rem} .py-12{padding-top:3rem;padding-bottom:3rem} .py-14{padding-top:3.5rem;padding-bottom:3.5rem} .py-16{padding-top:4rem;padding-bottom:4rem} .pt-6{padding-top:1.5rem} .pt-24{padding-top:6rem} .pt-32{padding-top:8rem} .pb-2{padding-bottom:.5rem} .pb-8{padding-bottom:2rem} .pb-12{padding-bottom:3rem} .pl-6{padding-left:1.5rem} .mx-auto{margin-left:auto;margin-right:auto} .my-3{margin-top:.75rem;margin-bottom:.75rem} .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem} .mt-\[9px\]{margin-top:9px} .mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem} .mb-0{margin-bottom:0} .mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-10{margin-bottom:2.5rem} .mb-16{margin-bottom:4rem} .ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem} .gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem} .gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem} .gap-\[31px\]{gap:31px} .gap-\[44px\]{gap:44px} .gap-\[50px\]{gap:50px} /* 子元素间距工具 */ .space-y-1>*+*{margin-top:.25rem} .divide-y>*+*{border-top:1px solid var(--border-default)} /* ---------- 5. 尺寸 ---------- */ .w-auto{width:auto}.w-full{width:100%} .w-9{width:2.25rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-20{width:5rem} .w-24{width:6rem}.w-32{width:8rem} .w-\[380px\]{width:380px} .w-\[360px\]{width:360px} .w-\[200px\]{width:200px} .h-full{height:100%} .h-9{height:2.25rem}.h-14{height:3.5rem}.h-16{height:4rem} .h-20{height:5rem}.h-24{height:6rem}.h-64{height:16rem} .h-\[38px\]{height:38px}.h-\[700px\]{height:700px} .h-\[270px\]{height:270px} .h-\[85px\]{height:85px} .max-w-xl{max-width:36rem} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-4xl{max-width:56rem} .max-w-\[47rem\]{max-width:47rem} .max-w-\[737px\]{max-width:737px} .min-w-\[1100px\]{min-width:1100px} .min-h-\[90vh\]{min-height:90vh} .max-h-\[90vh\]{max-height:90vh} .aspect-square{aspect-ratio:1/1} .aspect-video{aspect-ratio:16/9} .aspect-\[16\/9\]{aspect-ratio:16/9} /* ---------- 6. 颜色: 背景 ---------- */ .bg-transparent{background-color:transparent} .bg-white{background-color:var(--white)} .bg-black{background-color:var(--black)} .bg-gray-50{background-color:var(--gray-50)} .bg-gray-100{background-color:var(--gray-100)} .bg-\[\#F5F5F5\]{background-color:#F5F5F5} .bg-\[\#F9F9F9\]{background-color:#F9F9F9} /* 蓝湖设计稿: Compare 表头底色 */ .bg-\[\#F3F3F3\]{background-color:#F3F3F3} /* 蓝湖设计稿: People Behind 深色区 / 深色区块 */ .bg-\[\#222222\]{background-color:#222222} .bg-gray-900{background-color:var(--gray-900)} .bg-green-50{background-color:var(--green-50)} .bg-light{background-color:var(--light)} .bg-soft{background-color:var(--bg-soft)} .bg-primary{background-color:var(--primary)} .bg-accent{background-color:var(--accent)} .bg-white\/25{background-color:rgba(255,255,255,.25)} .bg-white\/95{background-color:rgba(255,255,255,.95)} .bg-black\/60{background-color:rgba(0,0,0,.6)} .bg-black\/80{background-color:rgba(0,0,0,.8)} .bg-black\/85{background-color:rgba(0,0,0,.85)} .bg-accent\/15{background-color:rgba(196,155,99,.15)} .bg-accent\/20{background-color:rgba(196,155,99,.2)} /* 颜色: 文字 */ .text-white{color:var(--white)} .text-black{color:var(--black)} .text-gray-200{color:var(--gray-200)} .text-gray-400{color:var(--gray-400)} .text-gray-500{color:var(--gray-500)} .text-gray-600{color:var(--gray-600)} .text-gray-700{color:var(--gray-700)} .text-gray-800{color:var(--gray-800)} .text-muted{color:var(--muted)} .text-\[\#656565\]{color:#656565} .text-\[\#0F0F0F\]{color:#0F0F0F} .text-\[\#A5A5A5\]{color:#A5A5A5} .text-\[\#9C0911\]{color:#9C0911} /* 蓝湖设计稿: 评价五星红色 */ .text-\[\#B5001A\]{color:#B5001A} .text-\[\#222222\]{color:#222222} .text-\[\#333333\]{color:#333333} .text-\[\#000000\]{color:#000000} .text-green-700{color:var(--green-700)} .text-primary{color:var(--primary)} .text-accent{color:var(--accent)} .text-white\/80{color:rgba(255,255,255,.8)} /* 颜色: 边框 — 见下方第 8 节末尾 (必须定义在 .border 之后, 否则被 .border 的默认色覆盖) */ /* ---------- 7. 字体排版 ---------- */ .text-xs{font-size:.75rem;line-height:1rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .text-2xl{font-size:1.5rem;line-height:2rem} .text-3xl{font-size:1.875rem;line-height:2.25rem} .text-4xl{font-size:2.25rem;line-height:2.5rem} .text-5xl{font-size:3rem;line-height:1} .text-\[10px\]{font-size:10px} /* 行程卡价格金额: 蓝湖实测 $799 墨迹 55x22px => 宽/高两种反推 24.79 / 25.58px, 取 25px (原用 text-3xl=30px 偏大)。line-height 与原 text-3xl 的 2.25rem 保持一致, 避免改动价格行整体高度。 */ .text-\[25px\]{font-size:25px;line-height:2.25rem} /* Compare 表价格金额 (用户指定 18px, 其余文字 14px 由 table 的 .text-sm 继承)。 ⚠️ 故意**不写 line-height** —— 该单元格行高由 #compare table tbody td 的 line-height:22px 决定, 18px 字形行盒 ≈23px, 只比 22 多 1px (实测行高 102→103, 表格总高 1174→1175), 基本无感。 若照抄 .text-[25px] 那样补 line-height, 反而会把整行撑高更多。 */ .text-\[18px\]{font-size:18px} .text-\[clamp\(2\.2rem\2c 4\.5vw\2c 3\.7rem\)\]{font-size:clamp(2.2rem,4.5vw,3.7rem)} .text-\[clamp\(2\.2rem\2c 5vw\2c 4rem\)\]{font-size:clamp(2.2rem,5vw,4rem)} /* ⚠️ index.html hero H1 使用了 text-[clamp(2.4rem,5vw,4.4rem)], 但该转义类未定义, 当前 H1 回落到浏览器默认字号。是否补定义会显著改变 hero 观感, 待确认后再决定, 本次重构不擅自更改视觉, 故暂不补齐。 */ .font-medium{font-weight:500} .font-normal{font-weight:400} .font-semibold{font-weight:600} .font-bold{font-weight:700} /* 价格专用字体: 所有展示 $ 金额的元素统一 Arial */ .font-price{font-family:Arial,Arial,sans-serif} /* 最少占 2 行高度 (2 × line-height)。 用途: 行程卡的「路线城市」一行文字长短不一, 短路线只有 1 行会导致同排卡片 后续元素(描述/价格/按钮)错位。设计稿实测三张卡的「描述文字」均从同一 y 起始, 即设计稿本身就为路线预留了 2 行高度。用 min-height 兜底比加
更稳。 */ .min-2-lines{min-height:2.5rem} /* 独立 Arial 字体类 (非价格元素用, 语义与 .font-price 区分) */ .font-arial{font-family:Arial,Arial,sans-serif} /* ArialMT = Arial 在 macOS 的字体名; Windows 无此名, 故用 Arial 兜底 */ .font-arialmt{font-family:ArialMT,Arial,sans-serif} .leading-tight{line-height:1.25} .leading-relaxed{line-height:1.625} .text-center{text-align:center} .text-left{text-align:left} .uppercase{text-transform:uppercase} .italic{font-style:italic} .underline{text-decoration:underline} .tracking-widest{letter-spacing:.1em} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .whitespace-nowrap{white-space:nowrap} /* ---------- 8. 边框 / 圆角 ---------- */ .border{border-width:1px;border-style:solid;border-color:var(--border-default)} .border-t{border-top-width:1px;border-style:solid;border-color:var(--border-default)} .border-b{border-bottom-width:1px;border-style:solid;border-color:var(--border-default)} .border-soft{border:1px solid var(--border-soft)} /* 边框颜色类必须放在 .border 之后: 同为单类选择器, 靠源码顺序覆盖 .border 的默认 border-color */ .border-gray-200{border-color:var(--gray-200)} .border-\[\#000000\]{border-color:#000000} .border-accent{border-color:var(--accent)} .border-white{border-color:var(--white)} .border-white\/10{border-color:rgba(255,255,255,.1)} .border-white\/20{border-color:rgba(255,255,255,.2)} .rounded{border-radius:.25rem} .rounded-md{border-radius:.375rem} .rounded-lg{border-radius:.5rem} .rounded-xl{border-radius:.75rem} .rounded-10{border-radius:10px} .rounded-full{border-radius:9999px} /* ---------- 9. 效果: 阴影 / 透明度 / 过渡 / 渐变 / 其他 ---------- */ .shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)} .shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)} .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)} .hover-shadow{box-shadow:none;transition:box-shadow .25s ease} .hover-shadow:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} /* --- hover: 状态变体 (原缺失, 全站 43 处悬停无效) --- Tailwind 的 hover: 变体在源码中的 class 名写作 hover:bg-accent, CSS 选择器需转义冒号: .hover\:bg-accent:hover 特指度 (0,2,0) 高于单类基础色 (0,1,0), 可稳定覆盖 .bg-primary/.text-accent 等。 ⚠️ --accent 现为 #000, 凡「黑底 hover 到 accent」的按钮会变成黑->黑, 无任何反馈。 故 .hover\:bg-accent:hover 对**深色底**元素改用白色底 + 黑字 (反色反馈), 对**浅色底**元素才用 accent 本色。 */ .hover\:bg-accent:hover{background-color:var(--accent)} .hover\:bg-primary:hover{background-color:var(--primary)} .hover\:bg-white:hover{background-color:var(--white)} .hover\:border-accent:hover{border-color:var(--accent)} .hover\:text-accent:hover{color:var(--accent)} .hover\:text-primary:hover{color:var(--primary)} .hover\:text-white:hover{color:var(--white)} .opacity-60{opacity:.6} .opacity-70{opacity:.7} .opacity-80{opacity:.8} .transition{transition:all .2s ease} .cursor-pointer{cursor:pointer} .pointer-events-none{pointer-events:none} .overflow-hidden{overflow:hidden} .overflow-x-auto{overflow-x:auto} .overflow-y-auto{overflow-y:auto} .object-cover{object-fit:cover} .bg-cover{background-size:cover} .bg-center{background-position:center} .ring-accent{--ring-color:var(--accent)} .ring-2{box-shadow:0 0 0 2px var(--ring-color,#3b82f6)} /* 渐变 (to-top 方向, 与 bg-gradient-to-t + from/via/to 组合) */ .bg-gradient-to-t{background-image:linear-gradient(to top,var(--from,transparent),var(--via,transparent),var(--to,transparent))} .from-black\/75{--from:rgba(0,0,0,.75)} .from-black\/85{--from:rgba(0,0,0,.85)} .via-black\/10{--via:rgba(0,0,0,.1)} .via-black\/40{--via:rgba(0,0,0,.4)} .to-transparent{--to:transparent} /* ---------- 10. 通用组件样式 ---------- ⚠️ 本节只放「跨模块共用」的组件。模块专属组件样式一律下沉到第 14 节 并限定在 #模块id 下（如 .badge-pill -> #tours .badge-pill）， 避免同名 class 在别的模块里被一起改到。 */ .text-shadow{text-shadow:0 2px 10px rgba(0,0,0,.55)} details>summary{cursor:pointer;list-style:none} details>summary::-webkit-details-marker{display:none} /* ========================================================================== 14. 页面模块样式 — 按模块作用域隔离 (每模块限定在 #id 下) ⚠️ 约定: 本节所有规则必须挂在「模块根选择器」下 (#section-id 或 .模块名)， 避免两个模块共用同名 class 时被一起改到 (设计稿里同名元素样式可能不同)。 新增页面级样式请追加到本节，并同样限定作用域。 ========================================================================== */ /* WhatsApp 图标 (蓝湖切图 36x36 白色描边版, 非字体图标) */ .wa-ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:.35rem;flex-shrink:0} /* --- 模块: Hero (#home) --- 设计稿实测: H1 两行合计约 155px 高 → 字号约 66px / bold / uppercase; 副标题约 30px semibold; 描述约 14px; 按钮紧凑 (px-5 py-2.5) */ #home .hero-title{font-family:Arial,Helvetica,sans-serif;font-size:66px;line-height:1.08;font-weight:700;text-transform:uppercase;color:#fff;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.55)} #home .hero-sub{margin:10px 0 0;font-size:30px;line-height:1.2;font-weight:600;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55)} #home .hero-desc{margin:16px 0 0;font-size:14px;line-height:1.5;font-weight:400;color:#fff;max-width:47rem;text-shadow:0 2px 10px rgba(0,0,0,.55)} #home .hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px} #home .hero-actions a{font-size:14px;line-height:1.25} @media (max-width:767px){ #home .hero-title{font-size:38px} #home .hero-sub{font-size:20px} #home .hero-desc{font-size:13px} } /* --- 模块: Trust Stats (#stats) --- 设计稿: 大数字 Arial 44px bold 纯黑 (实测墨迹 157×39 与 Arial 44px 吻合); 右侧小字 #999999 两行 */ #stats .stat-num{font-family:Arial,Helvetica,sans-serif;font-size:44px;line-height:1;font-weight:700;color:#000;white-space:nowrap} @media (max-width:767px){#stats .stat-num{font-size:32px}} #stats .grid>div{align-items:flex-start} #stats p.text-muted{line-height:1.15;margin:0} /* --- 模块: Compare 对比表 (#compare) --- 行高对齐蓝湖设计稿: 表头/数据行均约 80px, 文字 22px → 上下 padding 29px ⚠️ border-collapse/border-spacing 必须显式写: 浏览器 默认 border-collapse:separate + border-spacing:2px, 会在每个单元格之间留 2px 白缝(露白底), 视觉上就是一格一格的"分割线", 且会把表头 #F3F3F3 灰底与斑马纹切成断开的色块。 设计稿是连续整片色块, 故必须改成 collapse。 */ #compare table{border-collapse:collapse;border-spacing:0} #compare table tbody td{padding:29px 16px;line-height:22px} /* 表头: 14px / bold / Arial (与页面正文的 Microsoft YaHei 区分开), 且**整行不换行**。 ⚠️ nowrap 会让 6 列表头成为表格最小宽度的决定者; 实测 1168px 容器内 6 列仍放得下, 但窄屏(<1200)会撑宽 -> 由外层 .overflow-x-auto 横向滚动兜底(该容器本来就有)。 ⚠️ 不要把 nowrap 加到 tbody td 上: 那些单元格是长句(如 Travel Within China 列), 不换行会把表格撑到几屏宽。 */ #compare table thead th{padding:29px 16px;font-size:14px;font-weight:bold;font-family:Arial,Arial,sans-serif;line-height:22px;white-space:nowrap} /* 价格行「整行不换行」(用户指定)。 ⚠️ 只对价格行 nowrap，**不要**推广到所有 tbody td: Destinations / Highlights / Travel Within China 等长句列单行自然宽度总计 2965px, 全表 nowrap 会把表格撑到 3100px 以上(padding16) → 横向滚动 2.5 屏, 不可取。 价格行实测: 6 个单元格单行自然宽度合计 974px, 表格宽 1200px → 放得下、零横向滚动。 用语义类名 .price-row 而非 nth-child(6): 以后增删行不会失效。 副作用: 该行高度 103 → 81(单行), 整表高 1175 → 1153。设计稿该行本就是单行, 属修正而非回归。 */ #compare table tbody tr.price-row td{white-space:nowrap} /* 用户要求: 「Starting prices…」说明段 ↔「The Beauty of China」标题 = 100px。 原实测 169.9 = p的margin-bottom 12 + compare的padding-bottom 64 + beauty的padding-top 64 + h2默认margin-top 29.9。 现拆成三段凑 100: p 的 12 保留, compare 底 44 + beauty 顶 44 + h2 顶 0 = 100。 ⚠️ 两侧 padding 必须对称改(44/44), 只压一边会让表格底边看着比标题顶更挤。 ⚠️ h2 的 margin-top 必须归零: 否则它会跟着 padding-top 一起叠, 永远算不准。 */ #compare{padding-bottom:44px} /* --- 模块: The People Behind Your Trip (#team .people-band) --- 蓝湖 v13 实测（画板 y6722..8185，高 1464）: · 背景 = **纯色 #222222**（v8 的人像剪影图在本版**已移除**，左右边缘取样全为 #222222） · H2 墨迹距区顶 100；副标题 H2底+34；团队卡顶 = 副标题底 +71 · 组间距极规整: 团队卡底→照片墙 **31**，照片墙底→聊天卡 **31**，聊天卡底→区底 **99** · 横向: 团队卡 3 列 × 380 / 间距 30；照片墙与聊天卡 4 列 × 270 / 间距 40 ⚠️ 照片墙与聊天卡列宽 270 明显小于团队卡 380，**不能共用同一栅格**。 */ #team .people-band{ background-color:#222222; /* v13: 无背景图（不要恢复 people-silhouettes-2x.jpg，设计稿已删） ⚠️ 设计稿量的是**墨迹**，CSS 给的是**行盒**（行盒比墨迹上下各多约 5px）。 设计: H2 墨迹顶距区顶 100 / 副标题墨迹高 17 / 副标题墨迹底→卡顶 71。 实测行盒: H2 43(多10)、副标题 22(多5) ⇒ 合计多 15。 实测标定（迭代收敛）: padding-top 95 + grid margin-top 59 => 卡片顶相对区顶 253、区总高 1464，与设计稿一致。 */ padding:95px 0 99px; } #team .people-h2{margin:0;font-size:36px;line-height:1.2;font-weight:700;color:#fff;text-align:center} #team .people-sub{margin:34px 0 0;font-size:15px;line-height:22px;color:rgba(255,255,255,.72);text-align:center;max-width:60rem;margin-left:auto;margin-right:auto} /* 团队卡 3 列 × 380 / 间距 30 */ #team .team-grid{margin-top:59px;display:grid;grid-template-columns:repeat(3,380px);justify-content:center;column-gap:30px} #team .team-card{background:#fff;border-radius:12px;padding:34px 24px 40px;text-align:center} /* 头像: 切图自带圆形透明(200x200@2x)，显示 100x100，不要再包 border-radius/底色 */ #team .team-avatar{width:100px;height:100px;display:block;margin:0 auto} #team .team-title{margin:22px 0 0;font-size:18px;line-height:1.35;font-weight:700;color:#000} #team .team-desc{margin:14px 0 0;font-size:14px;line-height:22px;color:#8A8A8A} /* 照片墙 4 列 × 270 / 间距 40 */ #team .team-photos{margin-top:31px;display:grid;grid-template-columns:repeat(4,270px);justify-content:center;column-gap:40px} #team .team-photos img{width:270px;height:200px;display:block} /* WhatsApp 聊天卡 4 列 × 270 / 间距 40 */ #team .team-chats{margin-top:31px;display:grid;grid-template-columns:repeat(4,270px);justify-content:center;column-gap:40px} #team .team-chats img{width:270px;height:550px;display:block} @media (max-width:1279px){ #team .people-band{padding:64px 0} #team .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px} #team .team-photos,#team .team-chats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px} #team .team-photos img,#team .team-chats img{width:100%;height:auto} } @media (max-width:767px){ #team .people-h2{font-size:28px} #team .people-sub{margin-top:20px;font-size:14px} #team .team-grid,#team .team-photos,#team .team-chats{grid-template-columns:minmax(0,1fr)} } /* --- 模块: Featured Tours / Our Popular Journeys (#tours 首页 / #tours-list tours 页) --- 两页行程卡规格完全一致 (蓝湖实测): 卡片宽 379px / 间距 31px; 图片 360x270 距卡边 10px, 仅上两角圆角(下两角直角); 按钮高约 46px。 用 :is() 同时命中两页, 避免重复定义。 */ #tours{position:relative} :is(#tours,#tours-list) .tour-img{width:100%;height:270px;object-fit:cover;border-radius:10px 10px 0 0;display:block} /* 卡片按钮: 设计稿实测高 **52px** (画板 y3172..3223), 主按钮黑底白字 / 次按钮白底黑描边。 ⚠️ 用固定 height + flex 居中, 不要靠 padding 推高 —— 次按钮有 1px 描边会多占 2px 盒高, 用 padding 算会让两个按钮不等高。 ⚠️ 不得用 `border` 挤占宽度（会把内部内容压窄）, 次按钮改用 inset box-shadow 画描边。 */ :is(#tours,#tours-list) .tour-btn{display:block;flex:1 1 0%;text-align:center;white-space:nowrap;padding:11px 16px;border-radius:6px;font-size:14px;line-height:1.5;transition:all .2s ease;box-sizing:border-box} /* ⚠️ 首页(v8 画板)按钮实测高 **52px** (画板 y3172..3223), tours 页画板(v1)仍是 46px, 故这里只挂 #tours。用固定 height + flex 居中, 不靠 padding 推高 —— 次按钮有描边会多占 2px 盒高, 用 padding 算会让两个按钮不等高。 ⚠️ 次按钮描边改用 inset box-shadow: 用 `border` 会挤占内容宽度。 */ #tours .tour-btn{display:flex;align-items:center;justify-content:center;height:52px;line-height:1} :is(#tours,#tours-list) .tour-btn-primary{background:#000;color:#fff} :is(#tours,#tours-list) .tour-btn-primary:hover{background:var(--accent)} :is(#tours,#tours-list) .tour-btn-outline{border:1px solid #000;color:#000;background:transparent} :is(#tours,#tours-list) .tour-btn-outline:hover{background:var(--accent);border-color:var(--accent);color:#fff} #tours .tour-btn-outline{border:0;box-shadow:inset 0 0 0 1px #000} #tours .tour-btn-outline:hover{box-shadow:inset 0 0 0 1px var(--accent)} /* 设计稿: 首页行程区右下角有熊猫插画 (蓝湖切图 panda-2x.png, 672x660)。 实测: 显示 332x326, **右边界贴内容区右边界(1559)而非视口右**, 底部距区底 4px。 ⚠️ 层级: 必须在「天际线剪影」之上 (z-index:2), 否则会被 ::after 盖住。 */ #tours .tours-panda{position:absolute;z-index:2;right:max(16px,calc(50% - 601px));bottom:4px;width:332px;height:auto;pointer-events:none;user-select:none} @media (max-width:767px){#tours .tours-panda{display:none}} /* 设计稿: 行程区底部有一条贯穿全宽的城市天际线剪影 (浅灰, 画板 x0..1920 / y3722..4019)。 ⚠️ **尺寸是 1920×297**(不是旧版的 130): 蓝湖切片名为 `cs`, bounds 1920x297, scaleType=iOS @2x ⇒ 原始 png 是 3840x594, 已缩为 1x 的 1920x297 覆盖同名文件。 旧版 130px 是被截断的（少了 167px, 只剩最下面一截）, 所以看起来"很低很平"。 内容: 城楼 / CCTV 大楼 / 鸟巢 / 天坛 / 摩天楼, 剪影底部贴齐 section 底边。 用 ::after 铺在 section 底部, 不占文档流高度; z-index:0 保证在卡片与熊猫之下。 ⚠️ 因此本区底部的文字类元素必须自己抬 z-index(如 .tours-note 的 z-index:1), 否则会被这个 z-index:0 的定位层压住。 */ #tours::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:297px; background:url('../assets/tours-skyline-2x.png') repeat-x bottom center;background-size:auto 297px; pointer-events:none} @media (max-width:767px){#tours::after{display:none}} /* 卡片容器: 白底 + 12px 圆角 + 浅描边, 默认无阴影 hover 才出 (设计稿观感) z-index:1 -> 压在天际线剪影之上 ⚠️ max-width:100% 兜底: HTML 上写死了 w-[380px] (设计稿实测卡宽), 窄屏(容器 < 380+padding)时固定宽会撑出横向滚动条。设计稿只有 1920 桌面板, 窄屏自适应由我们负责 —— 加 max-width 后桌面板宽仍为 380, 不受影响。 */ :is(#tours,#tours-list) .p-tour{position:relative;z-index:1;padding:10px 10px 30px 10px;background:#fff;border-radius:12px;border:1px solid var(--border-soft);transition:box-shadow .25s ease} /* ⚠️ 以下 v8 专属规则**只挂 #tours（首页）**，不挂 :is(#tours,#tours-list)。 理由: site.css 同时被 tours.html 引用，而「Our China Tours」蓝湖画板仍是 **version 1** （2026-10-22，未改动），故 tours 页应保持原样。本次任务也只要求更新 index.html。 若把 v8 规则写成 :is(#tours,#tours-list)，会**静默改掉 tours 页**的徽章位置/字号与按钮高度。 未受 v8 影响的通用规则（.tour-img / .badge-pill 基础样式等）仍维持 :is() 共享。 #tours .p-tour 的 max-width 兜底: HTML 写死了 w-[380px]，窄屏(容器 < 380)时 固定宽会撑出横向滚动条；设计稿只有 1920 单板，窄屏自适应由我们负责。 */ #tours .p-tour{display:flex;flex-direction:column;max-width:100%} /* 描述区固定 4 行高 (4 × 20px = 80px)。 设计稿实测: 5 张卡的描述分别是 3/4/3/3/3 行, 但**价格行、说明行、按钮行的 y 坐标在 所有卡上完全一致** (画板 price ink y471 / note y513 / button y3172, 无论描述几行)。 即设计稿把「描述区高度」按最多行数固定, 下方元素位置固定。 若按文档流紧跟, 4 行描述的 Southwest Wonders 会把价格与按钮整体下推 20px, 导致同一行卡片不等高、按钮不在同一水平线。 */ #tours .p-tour>div:last-child{display:flex;flex-direction:column;flex:1 1 auto} /* 描述区: 固定 4 行高 (4 × 20px = 80px) 作为**下限**, 同时 flex:1 吸收卡片剩余高度。 ⚠️ 变更 (用户要求): 路线行原先靠 .min-2-lines(min-height:2.5rem) 强行占两行, 导致单行路线下方多出约 20px 空白。现改为按内容自适应。 副作用: 路线折两行的卡 (Southwest Wonders / Silk Road) 内容会自然更长。 兜底: 卡片高度由栅格 stretch 拉齐 -> 描述区 flex:1 1 auto 吃掉富余高度, 价格行与按钮行仍落在同一水平线, 不会因路线行数不同而上移错位。 只挂 #tours(首页); tours.html 画板仍是 v1, 保持 .min-2-lines 原样。 */ #tours .p-tour p.my-3{flex:1 1 auto;min-height:80px;margin-top:12px;margin-bottom:12px} /* ⚠️ 窄屏(<768px)必须显式声明单列 minmax(0,1fr)。 栅格容器只有 md:/lg: 的列定义, 窄屏时 `grid-template-columns` 为空 -> 隐式列按 max-content 撑开, 会跟着卡片写死的 w-[380px] 一起变成 380 宽, 撑出横向滚动条。 这是 v7 起就存在的缺陷(设计稿只有 1920 单板, 未覆盖窄屏), 本次一并修掉。 */ @media (max-width:767px){ #tours .grid{grid-template-columns:minmax(0,1fr)} /* 价格下方说明条: 桌面设计稿是单行 (#F9F9F9 胶囊, 实测宽 312), 故桌面用 nowrap; 窄屏卡片变窄后该句放不下会撑破卡片 -> 窄屏放开换行。 */ #tours .p-tour .mt-4 > span{white-space:normal} } :is(#tours,#tours-list) .p-tour:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} /* 卡片图片胶囊标签 (白底30%透明 + 白字 + 白图标) —— 基础样式, 两页共享 */ :is(#tours,#tours-list) .badge-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border-radius:14px;background:rgba(255,255,255,.3);color:var(--white);font-size:.75rem;line-height:1rem;font-weight:400;white-space:nowrap} :is(#tours,#tours-list) .badge-ico{width:.875rem;height:.875rem;flex-shrink:0;display:block} /* 卡片图片**左下角**胶囊标签 (v8 首页专属) ⚠️ v8 变更: 徽章从「右下」移到「左下」(设计稿实测图底 y2899, 胶囊带 y2861..2889)。 用语义类 .badge-row 而非工具类定位 —— 旧版 HTML 写的是 `absolute bottom-3 right-3`, 改左下后若继续复用该类会静默失效(这些工具类未被本表定义)。 ⚠️ 本段必须写在上面 :is() 基础规则**之后** —— 同为优先级的简写属性(padding/font-size), 靠源码顺序覆盖; 写在前面会被基础规则反超, 表面上"样式没生效"。 ⚠️ 尺寸要点: 两个胶囊必须**同一行放下**。设计稿实测文字墨迹 "BEIJING & EASTERN CHINA" = 158px / "10 DAYS / 9 NIGHTS" = 112px → 字号约 11.7px。 若沿用共享的 12px + 10px 内边距, 两胶囊合计 ~360px > 卡片可用宽 ~358px 会**折行**, 丢掉"并排一行"的设计意图。故首页徽章字号 11.5px / 内边距 4px 8px / 图标 12px。 */ #tours .badge-row{position:absolute;left:9px;right:9px;bottom:10px;display:flex;flex-wrap:wrap;gap:5px;pointer-events:none} #tours .badge-pill{padding:.25rem .5rem;font-size:11.5px;line-height:1.25rem} #tours .badge-ico{width:12px;height:12px} /* 卡片按钮下方的价格说明 (蓝湖 home_v13 实测) - 位置: 按钮底 y3836 → 卡片底 y3866(卡内 padding-bottom 30) → 说明首行**墨迹** y3895。 即: 卡片底到文字墨迹 **29px**; 按钮底到文字墨迹 **59~60px**(跨了卡片底边)。 - 尺寸: 两行, 行距 18px; 第一行墨迹 **x361..1096 = 736px** ⇒ 容器 max-width 737px - 字号: 由 736px 反解 = **Arial 14px**(实测 734px, ratio 1.002)。 ⚠️ 不要照抄 #compare 那段的 12px —— 那段墨迹只有 340px 宽(居中, 字号更小), **两段规格不同**: 这里是左对齐 14px, compare 那段是居中 12px。蓝湖里确实是两处。 - 对齐: **左对齐**(x361 起, 与卡片左边齐平)。 - 颜色: #999999。 ⚠️ margin-top 取 **27px** 而非 60px: 60 是按「按钮底→文字」算的, 但那 60px 里 有 31px 属于卡片的 padding-bottom。实测卡片底→墨迹 = 27+2(行盒 lead) = 29px, 此时按钮底→墨迹恰好 60px, 与设计稿吻合。写到 60 会让实际间距变 93px。 🔴 **必须 position:relative + z-index:1**: #tours::after 天际线是 `position:absolute; z-index:0; height:130px; bottom:0`, 而本说明落在它的覆盖范围内 (区底 3975, 天际线 3845..3975, 说明 3863..3899)。普通流元素(z-index:auto) **会被 z-index:0 的定位元素压住** —— 不加就直接看不见(与卡片同因, 卡片也有 z-index:1)。 ⚠️ 必须挂 #tours: tours.html(#tours-list) 画板仍是 v1, 该页没有这段文字。 */ #tours .tours-note{position:relative;z-index:1;margin-top:27px;max-width:737px;font-size:14px;line-height:1.29;color:var(--muted)} @media (max-width:767px){#tours .tours-note{margin-top:24px;max-width:100%}} /* --- 模块: Tours 页 Hero (#tours-hero) --- 蓝湖画板 Our China Tours **v9** (1920x2270): 全宽骆驼商队大图, 高度 400px (画板 y74..474)。 实测: 标题 "OUR CHINA TOURS" (Arial Bold 48px / fontCaps allCaps / 白) 墨迹 x735..1182 (449 宽), 墨迹顶 y124 => 距 hero 顶 50px; 行盒顶约 105 => hero 顶到行盒 31px (leading 72 由设计稿给出)。 副标题 16px Arial / leading 20px / 居中 / 两行: 第 1 行 y182..196 (墨迹宽 593), 第 2 行 y202..216 (墨迹宽 452)。两行行盒顶 y177.8 —— **紧接标题行盒**, 中间无额外间距。 ⚠️ 副标题宽度必须 ~600px 才会在 "…licensed China agency." 处断行(实测 595/454); 给 640 会变成 639/410, 给 580 会变成 535/514 —— 都不是设计稿的断行位置。 */ #tours-hero{background-image:url('../assets/tours-hero-2x.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;min-height:400px;display:flex;align-items:flex-start} #tours-hero .tours-hero-inner{width:100%;padding-top:34px;padding-bottom:0;text-align:center} #tours-hero .tours-hero-title{margin:0;font-family:Arial,Arial,sans-serif;font-size:48px;line-height:72px;font-weight:700;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)} #tours-hero .tours-hero-sub{margin:0 auto;max-width:600px;font-family:Arial,Arial,sans-serif;font-size:16px;line-height:20px;font-weight:400;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)} @media (max-width:767px){ #tours-hero{min-height:280px} #tours-hero .tours-hero-inner{padding-top:48px} #tours-hero .tours-hero-title{font-size:26px;line-height:1.25} #tours-hero .tours-hero-sub{font-size:14px;line-height:1.5} } /* --- 模块: ABOUT US (#about-us) --- 蓝湖 v8 新增区块 (画板 y774..1560)。两栏: 左文 / 右图网格。 实测: 内容区 1200 (x360..1559); 左栏 H2 36px 粗体, 距区顶 101; 正文 15px/#999, 行距 22, 最大宽 593; 统计 2x2: 数字 Arial 39px 粗体纯黑, 标签 14px #999; 右列起点 x686 (列距约 326); 右栏图网格 x1066..1559 = 两列各 236 + 列距 22, 圆角 18; 左列 (jiuzhaigou h256 / shanghai-bund h264) 顶 908; 右列 (mingsha-shan h164 / panda h320) 顶 875 -> 比左列高 33, 是设计稿刻意的错位。 */ #about-us{padding:101px 0 0;background:#fff} #about-us .about-grid{display:grid;grid-template-columns:1fr 494px;column-gap:56px;align-items:start} #about-us .about-h2{margin:0 0 26px;font-size:36px;line-height:1.25;font-weight:700;color:#000} /* ⚠️ 必须用 `> p`（直接子元素）。写成 `.about-text p` 时其特异性 (1,1,1) 高于 `.about-stat-label` 的 (1,1,0)，会把统计标签的字号/行高/外边距一起改掉 （实测标签被渲染成 15px / 行高22 / margin-bottom 26 —— 与设计稿 14px / margin-top 9 不符）。 */ #about-us .about-text > p{margin:0 0 26px;font-size:15px;line-height:22px;color:var(--muted);max-width:36.5rem} #about-us .about-text > p:last-child{margin-bottom:0} /* 统计 2x2: 列宽约 326, 行距 36; 数字 39px Arial 粗体 */ #about-us .about-stats{margin-top:44px;display:grid;grid-template-columns:repeat(2,326px);row-gap:37px} #about-us .about-stat-num{font-family:Arial,Helvetica,sans-serif;font-size:39px;line-height:1;font-weight:700;color:#000;white-space:nowrap} #about-us .about-stat-label{margin:9px 0 0;font-size:14px;line-height:1.25;color:var(--muted)} /* 右栏图片网格: 两列独立竖排 (col-b 整体上移 33px), 列内间距 22 ⚠️ align-items:start 必须写。默认 stretch 会把较矮的 col-b 拉到与 col-a 同高, 于是 col-b 内部的 auto 行被撑大 (164->198.5 / 320->354.5), 图片纵向留缝。 设计稿实测(相对影像区顶): col-b 图1 0..163 / 图2 186..505; col-a 图1 33..288 / 图2 311..574。 */ #about-us .about-photos{display:grid;grid-template-columns:repeat(2,236px);column-gap:22px;justify-content:end;align-items:start} #about-us .about-photos .col{display:grid;gap:22px} #about-us .about-photos .col-b{margin-top:-33px} #about-us .about-photos img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block} #about-us .about-photos .col-a img:first-child{height:256px} #about-us .about-photos .col-a img:last-child{height:264px} #about-us .about-photos .col-b img:first-child{height:164px} #about-us .about-photos .col-b img:last-child{height:320px} @media (max-width:1023px){ #about-us{padding:64px 0 0} #about-us .about-grid{grid-template-columns:1fr;row-gap:40px} #about-us .about-h2{font-size:28px;margin-bottom:20px} #about-us .about-stats{grid-template-columns:repeat(2,1fr);margin-top:32px;row-gap:26px} #about-us .about-stat-num{font-size:30px} #about-us .about-photos{grid-template-columns:repeat(2,1fr);justify-content:stretch} #about-us .about-photos .col-b{margin-top:0} #about-us .about-photos .col-a img:first-child,#about-us .about-photos .col-a img:last-child, #about-us .about-photos .col-b img:first-child,#about-us .about-photos .col-b img:last-child{height:170px} } /* --- 模块: Why You Can Book With Confidence (#why) --- 卡片图标: 蓝湖切图 `assets/N2x.png` 本身即「48x48 淡粉圆角方块 + 红色线条图标」 (96x96 @2x, 粉底烘焙在图内 rgba(177,0,29,.10) 叠白 = #F7E5E8, 圆角 10px), 因此 HTML 里只有 , 不需要任何包裹层/背景色/padding —— 再包一层会出现双层底色。 ⚠️ v8 变更: 卡高 266 -> **280** (画板 y1656..1935), 卡宽 380 / 列距 30 未变; 图标距卡顶 48 / 距卡左 20; 标题 18px 粗体; 正文 15px/行距 22px */ #why{position:relative} #why .why-card{min-height:280px;padding:48px 20px 0;background:#fff;border-radius:12px;border:1px solid var(--border-soft);transition:box-shadow .25s ease} #why .why-card:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} #why .why-ico{width:48px;height:48px;display:block;margin-bottom:22px} #why .why-card h3{margin:0 0 8px;font-size:18px;line-height:24px;font-weight:700;color:var(--primary)} /* 用户指定: **只**这张卡的标题用 16px（其余 4 张卡保持 18px）。 ⚠️ 必须挂 `.why-card-title-1` 这个独立标记，不能写 `#why .why-card h3:nth-child(...)` —— nth-child 会受 位置影响，增删元素就静默错位。 ⚠️ line-height 同步降到 22px: 16px 字号配 24px 行高会显松，且 8px 的 margin-bottom 与本行高成对决定"标题→正文"的间距，单改字号不改行高会让下方正文整体上移 2px。 🔴 **必须把内容宽撑到 ≥341px**: 这段文字在 16px/Arial/700 下**实际需要 340.47px**, 而卡片内容区（379 − 1×2px边框 − 20×2内边距）实测只有 **339px** —— 差 1.47px 就折成 2 行。 设计稿它是**单行**（画板墨迹 x380..719 = 340px, 正好用满内边距, 未越出）。 另外 4 张卡标题都短于 320px, 放宽 3px 不影响它们, 也绝不会让文字出卡。 **若以后改文案导致仍未单行, 先怀疑这里**, 不要动卡片宽度(全站三张卡都会变)。 ⚠️ 只写负 margin **不够**: h3 是块级元素, 宽度由父级内容盒决定, 负 margin 只会让它左移不会变宽。必须 `width:calc(100% + 3px)` 显式撑开, margin 再用 `-1.5px` 让左右对称溢出, 文字才不会贴边。 */ #why .why-card h3.why-card-title-1{font-size:16px;line-height:22px;margin:0 -2px 8px;width:calc(100% + 4px)} #why .why-card p{margin:0;font-size:15px;line-height:22px;color:var(--muted)} /* 设计稿: 右下角飞机 + 虚线航线水印插画 (蓝湖切图 444x608) ⚠️ 定位要点: #why 是**全宽 section**, 若用 right:24px 会跑到 1920 视口最右边、 完全落在内容区(右边界 1559)之外, 视觉上就是"没有这张图"。 必须按内容区对齐 —— 设计稿水印右边界 x≈1490, 距内容区右边界 1559 约 69px。 用 calc(50% - 531px): 50%=960(内容区中心), 960+600-69 = 1491 -> 右边界落在 1491。 尺寸按设计稿实测: 显示 222x304 (素材 444x608, 正好 0.5 倍); 底边贴 why 区底 (bottom:-6px)。 素材本身色 #F8F8F8 已极淡(白底上仅 7 级对比), 无需再调 opacity。 */ #why .why-watermark{position:absolute;right:max(12px,calc(50% - 531px));bottom:-6px;width:222px;height:auto;pointer-events:none;user-select:none} @media (max-width:767px){#why .why-watermark{display:none}} /* --- 模块: The Beauty of China (#beauty) --- ⚠️ 上内边距 44px 与 #compare 的 padding-bottom:44px 配对, 共同把 「Starting prices…」说明段到本区 H2 的间距压到 100px（详见 #compare 段注释）。 h2 的 margin-top 归零 —— 浏览器默认 h2 上外边距 0.83em(=29.9px) 会额外叠加, 不归零就压不到 100。 */ #beauty{padding-top:44px} #beauty h2{margin-top:0} /* 副标题: 用户指定 18px / #666666 / 下边距 50px / **宽 750px** / **最多 2 行**。 ⚠️ 不要写回工具类 —— .text-[18px] / .mb-[50px] / .max-w-[750px] 在手写工具类表里 **不存在**, 写了会静默失效（本项目高频坑）。语义类挂在 #beauty 下, 特异性含 id, 稳超 .text-gray-600/.mb-10/.max-w-2xl。 ⚠️ HTML 上原有 `max-w-2xl`(=672px) 已删除: 672px 只能排 3 行, 750 才够 2 行。 🔴 **max-width 写 752px 而非 750px**: 两行是 HTML 里写死的 `
` 硬断句 (行1 需 670px / 行2 需 **750px**)。实测 750px 容器排不下 750px 的第二行 —— 亚像素取整会溢出, 浏览器把 "itinerary." 折成第 3 行(实测 670/677/68 → 3 行)。 临界值实测为 **754px**, 取 752 留 2px 余量, 视觉宽度与 750 无差别。 ⚠️ **不要用 -webkit-line-clamp 硬截**: 一旦字体回落到更宽的字体, 截断会把 第二行尾部 "check the tour itinerary." 切掉、语义残缺。这里靠宽度保证放得下。 ⚠️ 断句依据(蓝湖 home_v13 实测): 行1 墨迹 668 / 行2 墨迹 750, 均与 18px/Arial 吻合。 */ #beauty .beauty-sub{font-size:18px;color:#666666;margin-bottom:50px;max-width:752px;margin-left:auto;margin-right:auto} /* 窄屏"最多 2 行"的兜底: 390px 屏容器只有 358px, 硬断句的两句会各自再折 2~3 段 (实测 5 行)。这里放开
为空格让文字自然回流, 再缩字号 + 收紧行高, 390px 下 test = 2 行。**不用 line-clamp**: 截断会吃掉 "check the tour itinerary."。 ⚠️ 用 `display:block` + `br::after{content:' '}` 让
变成软换行。 */ @media (max-width:767px){ #beauty .beauty-sub{font-size:15px;line-height:1.45;max-width:100%} #beauty .beauty-sub br{display:none} } /* 大图上的城市标签: 设计稿为「浅色半透明胶囊 + 白字 + 白色定位图标」 */ #beauty .beauty-city{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.22);color:#fff;font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.06em;padding:.25rem .7rem;border-radius:9999px} #beauty .beauty-city::before{content:"";width:.7rem;height:.7rem;flex-shrink:0;background:url('../assets/dd2x.png') center/contain no-repeat} /* 标题 ↔ 副标题 收紧 (用户指定, 参考截图/蓝湖 home_v13)。 🔴 根因: 本项目 **没有重置 h1~h6 的 margin**, h3 自带 margin-bottom:1em —— 字号 30px 时就是 **30px**。加上副标题的 mt-2(8px) 折叠后仍取 30px, 墨迹实测间距 **44px**, 而设计稿只有 **24px**(≈ 截图 25px)。 做法: 把 h3 下边距压到 10px, 此时与 mt-2 折叠后取 10px ⇒ 墨迹间距 44-20=24, 与设计稿吻合。**只改下边距, 不动 margin-top**: 上边距 4px(mt-1) 参与「胶囊→标题」的间距(实测 30 vs 设计 35), 不在本次范围。 ⚠️ 选择器必须挂 #beauty 收窄。裸 h3 会波及全站 188 处行程页标题(依赖默认边距)。 */ #beauty #beautyName{margin-bottom:10px} /* 底部缩略图带: 200x85 圆角, 图片铺满 (object-fit:cover); 未选中态 = **白色半透明蒙层** (background:#FFFFFF / border-radius:6px / opacity:.5), 而不是把 img 整体降透明度 —— 蒙层不改变图片本身的渲染。 选中态 **不画任何描边/边框** (按需求去掉 outline), 只靠蒙层淡出来区分。 城市标签 **无底色**, 仅白字 + 文字阴影。 ★ 选中 = **点击**（onclick 写在 HTML 上），不再 hover 切换。 */ #beauty .beauty-thumbs{margin-top:16px;display:flex;gap:12px;overflow-x:auto;padding-bottom:8px} #beauty .bt{flex:0 0 auto;width:200px;height:85px;padding:0;border:0;background:none; border-radius:6px;overflow:hidden;position:relative;cursor:pointer;display:block} #beauty .bt img{display:block;width:100%;height:100%;object-fit:cover; transition:transform .35s ease} /* 白色半透明蒙层：未选中 .5 → hover .26 → 选中 0 ★ hover **只减淡到 .26**（有反馈、看得出可点），而不是直接 0 —— 直接归零会和"已选中"看起来一模一样，让人误以为鼠标划过就切换了。 */ #beauty .bt::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1; background:#FFFFFF;border-radius:6px;opacity:.5;pointer-events:none;transition:opacity .2s ease} #beauty .bt:hover::after{opacity:.26} #beauty .bt.is-active::after{opacity:0} /* hover 时图片轻微推近，给出"可点击"的手感 */ #beauty .bt:hover img{transform:scale(1.05)} /* 城市标签: 无背景, 白字 + 阴影保证在任意图片上都可读 */ #beauty .bt span{position:absolute;left:0;right:0;bottom:0;z-index:2;background:none;color:#fff; font-size:10px;line-height:1.5;padding:2px 6px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.75)} /* 计数徽标 (右下角 "1 / 9"): 40x28, 圆角 14px, 白色 30% 半透明底 + 白字。 ⚠️ 用 `background:rgba(255,255,255,.3)` 而不是 `background:#fff;opacity:.3` —— 后者会让**文字也一起变 30% 透明**, 而设计稿里文字是全亮白的(从放大图可确认)。 位置: 设计稿实测距大图右 50px / 距底 58px。 */ #beauty .beauty-counter{position:absolute;z-index:3;right:50px;bottom:58px; width:40px;height:28px;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.3);border-radius:14px; color:#fff;font-size:12px;line-height:1;font-weight:500;letter-spacing:.02em;pointer-events:none} /* --- 模块: Beauty 弹窗底部 (#beautyModal .bm-*) --- 蓝湖画板实测 (画板 home_弹窗 的第一个弹窗, 弹窗宽 950): 左右内边距 52; 圆角 16; 城市胶囊 134x28 (#F9F9F9 底 + #999 文字, 圆角 999); 大标题 字号 38 粗体黑 (墨迹宽法 37.5 / 高度法 35.1); 描述 14px #999999; 按钮 高 52 圆角 4 —— 主按钮(黑底白字) 宽 240, 次按钮(白底+描边) 宽 200, 间距 13。 ⚠️ 画板量到的是**墨迹间距**, CSS 的 padding/margin 作用于**行盒**(行盒比墨迹高 5~10px), 故下方数值已换算, 使渲染后的墨迹间距等于画板值 (19/17/17/21)。 */ .bm-box{position:relative;background:#fff;border-radius:16px;width:100%;max-width:950px;max-height:90vh;overflow-y:auto} /* 弹窗媒体区：video 与 img 二选一显示。 两者都设 w-full h-full 会叠成两行，故用绝对定位让它们叠在同一层， 由 JS 通过 display 切换谁可见（有视频显 video，无/失败则回落 img）。 ⚠️ video 用 object-fit:contain —— 它带原生控制条（进度/播放/音量/全屏）， 若用 cover 会裁掉画面两侧，全屏时也看不到完整内容。 ⚠️ 本选择器优先级(0,1,1) 高于工具类 .object-cover(0,1,0)， 故 object-fit 必须写在这里，仅靠 class 会被覆盖。 img 仍用 cover（原设计，铺满无黑边）。 */ .bm-media{position:relative;background:#000;overflow:hidden} /* 视频：contain 完整显示（控制条可全屏）。 下面两行是**播放流畅度**相关： transform:translateZ(0) 提升为合成层，交 GPU 合成，避免每帧重绘重排； backface-visibility:hidden 减少层切换抖动。 ⚠️ 别给 video 加 filter / opacity 动画 —— 会强制软件合成，反而掉帧。 */ .bm-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000; transform:translateZ(0);backface-visibility:hidden} .bm-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* 视频加载指示（源片 58~260MB，点开后可能数秒才有画面）： 深色蒙层 + 转圈 + 文案 + **进度条**（按已缓冲秒数 / 总时长）。 ⚠️ 之前只有转圈，用户看不出"还要多久"，容易以为卡死。 */ .bm-loading{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;gap:12px; align-items:center;justify-content:center;color:rgba(255,255,255,.92);font-size:13px; letter-spacing:.02em;pointer-events:none;background:rgba(0,0,0,.30)} .bm-loading.is-on{display:flex} .bm-loading-text{font-variant-numeric:tabular-nums} .bm-spinner{width:28px;height:28px;border-radius:50%; border:2px solid rgba(255,255,255,.28);border-top-color:#c49b63; animation:bm-spin .8s linear infinite} @keyframes bm-spin{to{transform:rotate(360deg)}} /* 缓冲进度条：宽 132px，金色填充随 buffered 推进 */ .bm-loading-bar{display:block;width:132px;height:3px;border-radius:2px; background:rgba(255,255,255,.25);overflow:hidden} .bm-loading-bar>i{display:block;height:100%;width:0;border-radius:2px;background:#c49b63; transition:width .25s ease} /* 播不了（编码不支持 / 网络失败 / 看门狗超时）：收掉转圈和进度条，原位留两行说明。 文案由 JS 给（含换行），深一点的蒙层保证压在封面图上仍看得清。 ⚠️ 选择器必须落在 #beautyVideoLoading 上：site.css 被 5 个页面共用， 虽然这套弹窗只出现在 index.html，也不给以后留隐患。 */ #beautyVideoLoading.is-notice{gap:0;background:rgba(0,0,0,.55)} #beautyVideoLoading.is-notice .bm-spinner, #beautyVideoLoading.is-notice .bm-loading-bar{display:none} #beautyVideoLoading.is-notice .bm-loading-text{max-width:280px;text-align:center; line-height:1.55;white-space:pre-line;letter-spacing:.01em} /* ---------- 常驻视频控制条 ---------- ⚠️ 不用原生 controls：Chromium 的原生控制条在播放中会**自动淡出**， 必须 hover 才显现。这里自建一条**始终可见**的控制条。 布局：底部一条横向 flex；半透明黑底 + 顶部渐隐，保证在亮画面上也看得清。 */ .bm-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:none; align-items:center;gap:10px;padding:10px 14px 12px; background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.42) 60%,rgba(0,0,0,0))} .bm-ctrl.is-on{display:flex} .bm-cbtn{flex:0 0 auto;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer; color:#fff;display:flex;align-items:center;justify-content:center;border-radius:6px; transition:background .18s ease,color .18s ease} .bm-cbtn:hover{background:rgba(255,255,255,.16)} .bm-cbtn svg{width:19px;height:19px;fill:currentColor;display:block} .bm-ctime{flex:0 0 auto;color:#fff;font-size:12px;line-height:1;font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,.6);min-width:34px;text-align:center} /* 进度条：外层是点击/拖动热区（加高便于命中），内层 4px 视觉条 */ .bm-cbar{position:relative;flex:1 1 auto;height:16px;display:flex;align-items:center;cursor:pointer} .bm-cbar::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px; background:rgba(255,255,255,.28)} .bm-cbuf{position:absolute;left:0;height:4px;border-radius:2px;width:0; background:rgba(255,255,255,.45)} .bm-cprog{position:absolute;left:0;height:4px;border-radius:2px;width:0;background:#c49b63} .bm-cknob{position:absolute;right:-6px;top:50%;transform:translateY(-50%) scale(0); width:12px;height:12px;border-radius:50%;background:#c49b63; box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .16s ease} .bm-cbar:hover .bm-cknob{transform:translateY(-50%) scale(1)} /* 播放/暂停图标二选一 */ .bm-i-pause{display:none} .is-playing .bm-i-play{display:none} .is-playing .bm-i-pause{display:inline} /* 静音图标二选一 */ .bm-i-off{display:none} .is-muted .bm-i-wave{display:none} .is-muted .bm-i-off{display:inline} /* 全屏时控制条贴着视口底 */ .bm-media:fullscreen .bm-ctrl,.bm-media:-webkit-full-screen .bm-ctrl{padding-bottom:22px} .bm-close{position:absolute;top:12px;right:12px;z-index:10;width:36px;height:36px;border-radius:9999px; background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center; border:0;cursor:pointer;transition:background .2s ease} .bm-close:hover{background:#c49b63} .bm-body{padding:18px 52px 28px} /* 城市胶囊 */ /* ⚠️ 图标必须用 `#999999` 灰色版 (`dd2x-gray.png`)。 不能用共享的 `dd2x.png` —— 那是**白色**定位钉，专供图片上叠加的徽章 (`.badge-pill` / `.beauty-city`)，在本区「#F9F9F9 浅底胶囊」上会几乎看不见。 蓝湖弹窗画板实测: 钉子墨迹 **11×13、色 #999999**（与胶囊文字同色）； 与共享素材的墨迹比例 0.833 vs 设计 0.846 一致，属同一字形，仅颜色不同。 ⚠️ 盒子尺寸按**墨迹**给 11×13，且素材已裁成紧凑版（20×24，墨迹紧贴画布）。 若沿用原 28×28 画布塞进 12×12 盒子，墨迹只剩 ~8.6×10.3，会比设计稿明显偏小 —— 原画布四周有透明留白，等比 contain 会把留白也算进盒子里。 */ .bm-city{display:inline-flex;align-items:center;gap:4px;margin:0;height:28px;padding:0 15px 0 11px; background:#F9F9F9;border-radius:9999px;color:#999999;font-size:13px;line-height:1;font-weight:400} .bm-city:empty{display:none} .bm-city::before{content:"";width:11px;height:13px;flex-shrink:0; background:url('../assets/dd2x-gray.png') center/contain no-repeat} /* 标题 / 描述 */ /* ⚠️ 标题用 line-height:1 收紧行盒 —— 否则行盒的上下留白会把「标题→描述」的 墨迹间距撑大 (实测按 1.1 时会多出 ~18px)。h3 的浏览器默认 margin 已在下面显式归零。 */ .bm-title{margin:10px 0 0;font-size:38px;line-height:1;font-weight:700;color:#000} .bm-desc{margin:6px 0 0;font-size:14px;line-height:1.32;color:#999999} /* 按钮行 —— 蓝湖弹窗画板实测（第一个弹窗有 **3** 个按钮，不是 2 个）： 按钮高 52、圆角 4； 主按钮(黑底白字) 宽 **240**，两个次按钮(白底+描边) 各宽 **194**，间距 **16**。 三个按钮总宽 240+194+194+16×2 = 660，正好落在弹窗正文左侧起始处。 ⚠️ 之前只实现了 2 个按钮（漏了中间的 "Get real traveler videos"）， 且次按钮 min-width 写成 200 —— 两项均与设计稿不符。 */ .bm-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:19px} .bm-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 20px; border-radius:4px;text-decoration:none;font-size:15px;font-weight:400; white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease} .bm-btn-solid{width:240px;background:#000;color:#fff;border:1px solid #000} .bm-btn-solid:hover{background:#c49b63;border-color:#c49b63;color:#fff} .bm-btn-ghost{background:#fff;color:#000;border:1px solid #EDEEF0} .bm-btn-ghost:hover{background:#c49b63;border-color:#c49b63;color:#fff} /* 次按钮固定宽（美工实测原为 194）。 ⚠️ **文案改长后必须跟进**: 「Ask a local」→「Ask Us About This Place」后, 15px 字号下文字墨迹 164px, 加左右 padding 20×2 = **需 204px**, 沿用 194 会**溢出 10px 且被裁词**(实测 scrollW 192 > 可见宽, .bm-btn 是 nowrap)。 取 **208px**(204 + 4 余量)。⚠️ 不要再按“留白好看”来定宽 —— 先算出 needTotal 再加余量。 ⚠️ 定宽 + `white-space:nowrap` 的组合下, 文案一变就可能溢出, 改文案时**务必回量表**。 */ .bm-btn-ghost-narrow{width:208px} @media (max-width:767px){ .bm-body{padding:10px 24px 24px} .bm-title{font-size:26px} .bm-actions{gap:10px} .bm-btn,.bm-btn-ghost-narrow{width:100%;min-width:0;height:48px} } /* --- 模块: 评价五星 (#team .stars) --- 五角星为蓝湖切图 PNG (36x36), 显示 20px ⚠️ 首页在蓝湖 **v13** 中已移除「Hear From Our Travelers」区块，故 `#team` 内 已无 `.stars` / `.review-card` / `.play-btn` 的实际使用（index.html 不再引用）。 本段**暂留**：① 便于回滚到 v8 版式；② 若后续其它页面复用同一评价卡结构。 确认全站无引用后再删。 */ #team .stars{display:flex;gap:2px} #team .stars img{width:20px;height:20px;display:block} /* --- 模块: 旅行者评价卡 (#team .review-card) --- 蓝湖设计稿: 每张卡 = 「视频封面(上) + 白底评价区(下)」一张完整卡片, 3 列宽 379 / 间距 31; 封面 379x250 带播放钮; 评价区白底, 五星 + 评价文字(14px 灰, 非斜体, 左对齐) + 署名(右对齐, 13px 灰)。 */ #team .review-card{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column; border:1px solid var(--border-soft);transition:box-shadow .25s ease} #team .review-card:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} #team .review-cover{position:relative;height:250px;background:linear-gradient(135deg,#0f2e2d,#1a4a48);cursor:pointer;flex-shrink:0} #team .review-cover img.absolute{position:absolute} #team .review-kicker{margin:0;font-size:12px;line-height:1.3;color:#E8C79A;font-weight:600} #team .review-vtitle{margin:4px 0 0;font-size:14px;line-height:1.35;font-weight:700;color:#fff} #team .review-vsub{margin:4px 0 0;font-size:12px;line-height:1.3;color:rgba(255,255,255,.82)} #team .review-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} #team .review-text{margin:14px 0 16px;font-size:14px;line-height:1.6;color:#6B6B6B;font-style:normal} #team .review-author{margin:0;margin-top:auto;text-align:right;font-size:13px;line-height:1.4;color:#B0B0B0} #team .play-btn{transition:all .25s} #team .review-cover:hover .play-btn{transform:scale(1.12);background:var(--accent)} /* --- 模块: 旅行者视频卡 (#team .video-card) --- (保留: 其他页面/旧结构引用) */ #team .video-card{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#0f2e2d,#1a4a48);border-radius:.5rem;overflow:hidden;cursor:pointer} #team .video-card:hover .play-btn{transform:scale(1.12);background:var(--accent)} /* --- 模块: FAQ 折叠项 (#faq) --- 设计稿(画板 home, FAQ 区 y8264 H2 起): - **每一项都是白卡** (白底 + 圆角, 在 #F9F9F9 底上); 卡宽 590, 列间距 20; - 问题 16px 常规字重(不加粗), 左对齐; - 右侧 `+` 图标 = **浅灰圆角方块 44x44 (#F3F3F3, 圆角 10px) + 黑色加号**, 距卡片右内边距 24px; 展开后切换为 ×。 ⚠️ 第九轮曾误判为「项无白卡底、仅下边线」, 本轮按画板放大图纠正。 */ /* ⚠️ 本规则**无条件**写死 2 列, 且 `#faq` 的 id 优先级压过 HTML 上的 `.md:grid-cols-2` ⇒ 移动端原本也是 2 列(实测 390px 屏每项只有 **173px** 宽, 问题文字挤成一团)。 移动端单列在下方 media 补(不能用 `minmax(0,1fr)` 之外的花样, 见该处注释)。 */ #faq .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start} /* 移动端(<768px): FAQ **每一项独占一行**。 🔴 必须写 `minmax(0,1fr)` 而不是 `1fr`: 1fr 的最小尺寸是 auto, 一旦某项内有长英文 单词/不换行元素就会把列撑出容器宽, 产生横向滚动条。 ⚠️ 也不用 `grid-template-columns:none`: 那样隐式列按 max-content 排, 更糟。 */ @media (max-width:767px){ #faq .faq-grid{grid-template-columns:minmax(0,1fr)} } #faq .faq-item{background:#fff;border-radius:10px;padding:20px 24px;margin:0} /* 设计稿 FAQ 区: H2 底 → 首卡顶 = 70px; 底部留白 101px */ #faq{padding-bottom:101px} #faq h2{margin-bottom:70px} #faq .faq-item[open]{padding-bottom:22px} #faq details>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:16px;line-height:1.5;font-weight:400;color:#000;cursor:pointer} #faq details>summary::-webkit-details-marker{display:none} /* `+` / `×` 图标: 蓝湖切图 assets/faq-plus.png / faq-close.png 本身即 「64x64 浅灰圆角方块 + 深色加号/叉号」一体图, 按设计稿显示 **34x34** —— 不要再额外画背景/padding (会双层底色)。 */ #faq .faq-icon{width:34px;height:34px;flex-shrink:0;display:block} #faq details[open] .faq-icon{content:url('../assets/faq-close.png')} #faq details p{margin:14px 0 0;font-size:14px;line-height:1.62;color:#6B6B6B;max-width:88%} /* --- 模块: How Booking Works (#process .how-steps) --- 步骤图标为蓝湖切图 PNG (300x284, 含幽灵数字+白圆+图标, 一体图), 按设计稿 1x 显示 150x142; 步间浅灰三角箭头 */ #process .how-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:4px} #process .how-step{flex:1 1 0%;text-align:center} #process .how-badge{width:150px;height:142px;margin:0 auto;object-fit:contain;display:block} #process .how-title{font-weight:700;color:var(--primary);margin:.25rem 0 0;font-size:.875rem;line-height:1.25rem} #process .how-desc{font-size:.6875rem;line-height:1rem;color:var(--gray-600);margin:.25rem 0 0} /* 步间三角箭头 (蓝湖 home_v13 实测) - 尺寸: **11 宽 × 15 高**(画板 x573..583 / y6434..6448), 色 #DCDCDC(=220)。 即 border-left 11px + border-top/bottom 各 7.5px。 - 位置: 箭头**垂直中心与白色圆形的圆心齐平**(箭头中心 y6441, 白圆 y6392..6492 中心 6442)。 ⚠️ 不是图标图的垂直中心: 切图 300x284 里白圆在 y32..227(中心 129.5), 而整图中心是 142。 按整图居中会让箭头偏下 ~6px。 🔴 原写法 `align-self:center; margin-top:56px` 是错的: `align-self:center` 参照的是 **.how-steps 整个 flex 行的交叉轴**（整块含文字描述的高度）, 不是图标。再叠 56px 偏移 ⇒ 箭头被推到图标**底边**(实测 y314, 图标 174..316), 视觉上几乎贴着圆的下沿, 与设计稿"穿过圆形中线"完全不符。 改为 `align-self:flex-start`(与容器 align-items 一致) 后, 箭头顶 = 容器顶 = 图标图顶, 再给 **57.5px** 位移(圆心距图顶 64.75 − 箭头半高 7.5) 即可精确落在圆心。 ⚠️ 该值依赖「图标是 .how-step 的第一个子元素且贴顶」, 此结构成立; 若将来在图标上方加元素需同步改。 */ #process .how-arrow{flex:0 0 auto;align-self:flex-start;width:0;height:0;margin-top:57.5px;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-left:11px solid #DCDCDC} @media (max-width:767px){ #process .how-steps{flex-direction:column;gap:22px} #process .how-arrow{display:none} #process .how-badge{width:120px;height:114px} } /* ---------- 12. 响应式 (Tailwind md=768px / lg=1024px) ---------- */ @media (min-width:768px){ .md\:block{display:block} .md\:flex{display:flex} .md\:hidden{display:none} .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} .md\:p-8{padding:2rem} .md\:pt-32{padding-top:8rem} .md\:h-20{height:5rem} .md\:w-40{width:10rem} .md\:w-auto{width:auto} .md\:text-2xl{font-size:1.5rem;line-height:2rem} .md\:text-3xl{font-size:1.875rem;line-height:2.25rem} .md\:text-4xl{font-size:2.25rem;line-height:2.5rem} .md\:text-5xl{font-size:3rem;line-height:1} .md\:text-base{font-size:1rem;line-height:1.5rem} .md\:text-lg{font-size:1.125rem;line-height:1.75rem} .md\:text-xl{font-size:1.25rem;line-height:1.75rem} .md\:aspect-\[21\/9\]{aspect-ratio:21/9} .md\:aspect-\[1200\/632\]{aspect-ratio:1200/632} } @media (min-width:1024px){ .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ---------- 13. 顶部导航: 当前页高亮 ---------- 当前页菜单项 -> #000000, 非当前页 -> #999999; 由 JS (site.js / tour.js 的 initCurrentNav) 给当前项加 .is-current。 :not([class*="text-white"]) 排除 WhatsApp 按钮, 防止被染成灰色。 ⚠️ 悬停统一为**黑色**(用户要求), 不是原来的金铜色 --accent。 🔴 **字号/字体/颜色全站统一**(用户要求): 16px / Arial / #999999(当前页 #000 加粗)。 改前实测三套不一致: index 系列 14px + `Arial,Helvetica,"Microsoft YaHei"`、 tours 页 16px + `Arial,Arial,sans-serif`、tour 系列 14px + `-apple-system,Roboto...`。 **写在这里而不是依赖 `.text-sm`**: HTML 上的 `text-sm`(14px) 会被本条覆盖, 所以那 4 个页面的 HTML 类名可以保持不动(但语义上已失效, 见 HTML 注释)。 🔴🔴 **两条硬约束（都实测踩过）**: (1) **必须排除 CTA 类名**, 否则按钮被当普通链接染灰: 该规则含 `header`+`nav`+`a`, 特异性高于单类 `.header-nav-cta`, 实测 5 个页面的 CTA 文字被染成 #999 灰、hover 被染成 #000 黑（黑底黑字）。 ⚠️ 以后给导航按钮换类名, 必须同步排除列表。 ⚠️ `.cta`(tour 系列) 不用排除: 那些页面是 `nav > div.container`, 不含 header nav。 (2) **排除条件必须放进 `:where()`**, 不要裸写多个 `:not()`: 每个 `:not([class=...])` 都算 1 个类级特异性。裸写三个 → 基础规则变 (0,3,3), 反而压过 `is-current` 的 (0,2,3) —— 当前页高亮**完全失效** (实测 3 页当前项仍灰、fw=400)。`:where()` 特异性恒为 0, 于是: 基础规则 → (0,0,3) / is-current → (0,1,3) / `.header-nav-cta` → (0,1,0) 三者自然各就各位。这一改同时修好"按钮被染灰"和"当前项不高亮"。 ⚠️⚠️ **本段注释里禁止出现 `*` 紧跟 `/`**: 写选择器示例时曾把两者凑成注释闭合符, 导致下方规则整段失效、排查很久。示例一律用文字描述, 不照抄真实选择器。 ⚠️ 以后加排除类, 一律写 `:where(:not(...))`, 不要裸写 `:not()` 堆叠。 */ header nav a:where(:not([class*="text-white"]):not(.header-nav-cta):not(.page-nav-cta)), #mobileMenu a:where(:not([class*="text-white"]):not(.header-nav-cta):not(.page-nav-cta)) { color:#999999;font-family:Arial,Arial,sans-serif;font-size:16px;font-weight:400; } header nav a.is-current:where(:not([class*="text-white"]):not(.header-nav-cta)), #mobileMenu a.is-current:where(:not([class*="text-white"]):not(.header-nav-cta)) { color: #000000; font-weight: 600; } header nav a:where(:not([class*="text-white"]):not(.header-nav-cta):not(.page-nav-cta)):hover, #mobileMenu a:where(:not([class*="text-white"]):not(.header-nav-cta):not(.page-nav-cta)):hover { color: #000000; } header nav a.is-current:hover:where(:not([class*="text-white"])), #mobileMenu a.is-current:hover:where(:not([class*="text-white"])) { color: #000000; } /* ---------- 13b. 顶部导航: 统一高度 74px ---------- 🔴 各页原本不统一(实测): index/terms/privacy = **60**(py-3 + h-9 logo), about/tours = 74(有专属覆写), tour-xx / pay-xx 系列 = 75(74 + 1px 下边框)。 ⚠️⚠️ **注释里绝对不要写 `*` 后接 `/`**（例如 `tour-*` 紧邻 `/pay`）—— 那会提前闭合注释，把后面的整段 CSS 变成无效文本，规则**静默失效**。 本次就踩了：写成 `tour-` + 星号 + 斜杠 + `pay-` 那一串，导致本规则完全不生效，排查了很久。 现在统一按 74px: - 用 `.container` 定高 + **去掉 py-3**(48+12+12=72 会差 2px, 且 logo 一改就漂), 改为 `height:74px; padding-top:0; padding-bottom:0`, 由 flex 居中对齐内部元素。 - ⚠️ **必须排除 tours.html**: 它用 `.page-nav-inner` 自己的 74px 体系 (logo 40px + line-height:74px), 本规则若命中会把它的 padding 逻辑打乱。 tours.html 的容器同时带 `.page-nav-inner`, 故用 `:not(.page-nav-inner)` 排除。 - ⚠️ **不能只写 `header{height:74px}`**: header 内含 .container 的 padding, 只定外层高度会让内容溢出/挤压, 必须定在 .container 上并清掉 padding。 - mobile: 小于 768 仍保持 74(设计稿 mobile 也是这个高度), 故不加 media 覆写。 */ header > .container:not(.page-nav-inner){ height:74px;padding-top:0;padding-bottom:0; display:flex;align-items:center;justify-content:space-between; } /* about 页曾有 `padding:17px 0` 覆写 + logo 40px(17+40+17=74), 与上面的 height 会打架 (74 + 34 padding = 108)。统一高度后这些专属 padding 必须失效。 */ body.about-page header .container.mx-auto{padding-top:0;padding-bottom:0} body.about-page header .logo-top-img{height:40px} /* ============================================================ --- 模块: About Us 页 (蓝湖画板 About Us, 1920x3738) --- 区块边界(实测): Header 0-78 | Hero 78-478(高400) | Who We Are 478-1780 | Why 1780-2328(#F9F9F9) | Team Photos 2328-2680 | Meet the Team 2680-2820+(#F9F9F9) | CTA 2820-3480 | Footer 3480-3738 ============================================================ */ /* --- Hero (#about-hero): 全宽熊猫竹林大图 400px, 居中白字 --- 蓝湖 About Us v4 实测: hero 74..474; 标题墨迹 227..272 (h46 => 48px), 墨迹宽 401; 副标题 16px 两行 (墨迹 285..299 / 305..324, 行距 20px), 第二行 "not the brochure version."; 标题行盒顶 221 = hero 顶 + 147 (改用固定 padding 定位, 而非 flex 居中 —— flex 居中会把行盒留白差异分摊到上下, 导致整体偏移)。 */ #about-hero{background-image:url('../assets/about-hero-2x.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;min-height:400px} #about-hero .about-hero-inner{width:100%;padding-top:144px;padding-bottom:0;text-align:center} #about-hero .about-hero-title{margin:0;font-size:48px;line-height:1.2;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)} #about-hero .about-hero-sub{margin:7px 0 0;font-size:16px;line-height:20px;font-weight:400;color:rgba(255,255,255,.95);text-shadow:0 2px 12px rgba(0,0,0,.4)} @media (max-width:767px){ #about-hero{min-height:280px} #about-hero .about-hero-inner{padding-top:90px;padding-bottom:0} #about-hero .about-hero-title{font-size:28px} #about-hero .about-hero-sub{font-size:15px} #about-hero .about-hero-sub br{display:none} } /* --- Who We Are (#who-we-are): 左文字栏 + 右熊猫插画 (白底大区 474-972) --- 蓝湖 v4 实测(内容区 x360..1559, 画板与页面 1:1): 正文栏 x360..1023 => 宽 663px; 熊猫 x1146..1496 => 350x400, 右边缘距内容区右 63px; 区块顶 474, 熊猫顶 529 => padding-top 55; 熊猫底 929, 区块底 972 => padding-bottom 43; H2 墨迹 y574..599; 正文 4 段 (3/3/3/1 行), 首行墨迹 638, 段间距 22px, 行距 22px。 注: H2 行盒顶 = 529 (与熊猫顶齐平), 墨迹顶在行盒内偏移 9px。 ⚠️ 正文字号 17px 时每行墨迹约 634px (设计稿 661px); 18px 会在 662px 容器里多断一行 (变 4 行), 故取 17px 以保住与设计稿一致的 3/3/3/1 换行。 */ #who-we-are{padding:55px 0 43px;background:#fff} #who-we-are .who-grid{display:grid;grid-template-columns:663px 1fr;align-items:start} #who-we-are .who-title{margin:0 0 24px;font-size:36px;line-height:1.25;font-weight:700;color:#000;text-align:left} #who-we-are .who-text p{margin:0 0 22px;font-size:17px;line-height:22px;color:#9A9A9A} #who-we-are .who-text p:last-child{margin-bottom:0} #who-we-are .who-art{display:flex;justify-content:flex-end;align-items:flex-start;padding-right:63px} #who-we-are .who-panda{width:350px;max-width:100%;height:auto;display:block} /* 窄屏单列: 熊猫移到文字上方并居中。 ⚠️ 基础规则里 .who-panda 是 width:350px 硬值, 单靠 max-width 压不住 —— .who-art 还留着 padding-right:63px(桌面留白)且 justify-content:flex-end(右对齐), 可用宽度 <340 时图片会向左溢出被屏幕裁掉(实测 320px 屏 x=-99 / 390px 屏 x=-29)。 故这里必须: 清掉 padding-right + 改居中 + width 交给 max-width 约束。 */ @media (max-width:1023px){ #who-we-are{padding:64px 0 0} #who-we-are .who-grid{grid-template-columns:minmax(0,1fr);gap:40px} #who-we-are .who-title{font-size:28px;margin-bottom:24px} #who-we-are .who-art{order:-1;justify-content:center;padding-right:0} #who-we-are .who-panda{width:100%;max-width:340px} } @media (max-width:767px){ #who-we-are .who-panda{max-width:min(280px,82%)} } /* --- 通用: 居中 H2 (Why / Our Team / Meet the Team) --- */ .section-h2{margin:0 0 44px;font-size:36px;line-height:1.25;font-weight:700;color:#000;text-align:center} @media (max-width:767px){.section-h2{font-size:26px;margin-bottom:28px}} /* --- Our Culture & Values (#values): 6 卡 3x2 —— 白底, 与 Who We Are 同区块 --- 蓝湖 v4 实测: 卡片 380x260 四角 12 圆角、1px #EDEEF0 描边; 列 x360/770/1180 (gap 30); 行 y1117 / 1407 (gap 30); 区块 y972..1767。 H2 行盒顶 1012 (= 墨迹 1021 - 9) => padding-top 40; H2 行盒底 1057 -> 卡顶 1117 = 60px; 卡 2 行底 1667 -> 区块底 1767 = padding-bottom 100px; 图标盒 60x60 距卡左边框 20 / 距卡顶边框 34; 图标盒底 -> 标题行盒顶 24px; 标题行盒底 -> 正文首行 16px; 正文 14px 行距 22px, 3 行 (墨迹 1268/1290/1312)。 */ #values{padding:40px 0 100px;background:#fff} #values .section-h2{margin:0 0 60px} #values .values-grid{display:grid;grid-template-columns:repeat(3,380px);justify-content:center;gap:30px} #values .value-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #EDEEF0;border-radius:12px;padding:33px 19px 0;min-height:260px;transition:box-shadow .25s ease} #values .value-card:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} /* 卡片右上角点阵装饰 —— 蓝湖实测: 2 列 x 3 行共 6 点; 点直径 12px, 列中心距 18px, 行中心距 20px, 色 #F3F3F3; 点阵距卡右边框 28px, 距卡顶边框 39px。 元素 30x52 = 点阵外接尺寸(18+12, 20*2+12); background-position 让 首个点圆心落在 (6,6), 从而圆心依次为 x{6,24} y{6,26,46}。 */ #values .value-dots{position:absolute;top:38px;right:28px;width:30px;height:52px;pointer-events:none; background-image:radial-gradient(circle,#F3F3F3 4.6px,rgba(243,243,243,0) 6.4px);background-size:18px 20px;background-position:-3px -4px} /* 图标盒: 60x60 浅灰圆角 + 切图图标(2x png, 透明底) */ #values .value-ico{width:60px;height:60px;border-radius:12px;background:#F3F3F3;display:flex;align-items:center;justify-content:center;margin-bottom:20px} #values .value-ico-img{width:60px;height:60px;display:block} #values .value-card h3{margin:0 0 7px;font-size:17px;line-height:1.4;font-weight:700;color:#000} #values .value-card p{margin:0;font-size:14px;line-height:22px;color:#8A8A8A} @media (max-width:1023px){ #values .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ #values{padding:56px 0} #values .values-grid{grid-template-columns:minmax(0,1fr)} #values .value-card{padding:24px;min-height:0} } /* --- Our Team in Real Life (#team-photos): 3x2 真人照片墙 (#F9F9F9 区) --- 蓝湖 v4 实测: 区块 y1767..2672 (高 905); H2 墨迹 1867..1892 => 行盒顶 1858 = 区块顶+91; 副标题 14px/22px 两行 (墨迹 1933/1955), 行盒顶 ≈1928 => H2 行盒底 1903 + 25; 照片 380x250 四角 12 圆角, 列 x360/770/1180 (gap 30), 行 y2042/2322 (gap 30); 副标题行盒底 1972 -> 照片顶 2042 = 70px; 照片底 2572 -> 区块底 2672 = 100px。 v4 已删除原「Suggested photos」备注行。 */ #team-photos{padding:91px 0 100px;background:#F9F9F9} #team-photos .section-h2{margin:0 0 25px} #team-photos .team-photos-sub{margin:0 auto 70px;max-width:720px;text-align:center;font-size:14px;line-height:22px;color:#8A8A8A} #team-photos .team-photo-grid{display:grid;grid-template-columns:repeat(3,380px);justify-content:center;gap:30px} #team-photos .team-photo-img{width:380px;height:250px;display:block;border-radius:12px;object-fit:cover} @media (max-width:1023px){ #team-photos{padding:56px 0} #team-photos .team-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #team-photos .team-photo-img{width:100%;height:auto;aspect-ratio:380/250} } @media (max-width:767px){ #team-photos .team-photo-grid{grid-template-columns:minmax(0,1fr)} } /* --- Meet the Team (#team-members): 4 白卡 + 真人头像 + 底部短横线 (白底区) --- 蓝湖 v4 实测: 区块 y2672..3433 (高 761); H2 墨迹 2754..2779 => 行盒顶 2745 = 区块顶+73; H2 行盒底 2790 -> 卡顶 2850 = 60px; 卡片 260x462, 列 x360/673/987/1300 (列距 53); 头像 260x260 铺满卡宽, 卡片上两角 12 圆角; 头像底 3110 -> 标题墨迹顶 3140 = 30px; 标题行盒底 -> 正文首行 27px; 正文 12.5px/18px, 最多 3 行; 卡底短横线 40x2 #1F1F1F, 距卡底 20px (y3290, 卡底 3311); 卡底 3311 -> 区块底 3433 = 122px。v4 已删除原「Replace placeholder」备注行。 */ #team-members{padding:73px 0 122px;background:#fff} #team-members .section-h2{margin:0 0 60px} #team-members .team-grid{display:grid;grid-template-columns:repeat(4,260px);justify-content:center;gap:53px;align-items:start} #team-members .member-card{position:relative;display:flex;flex-direction:column;align-items:center;background:#F9F9F9;border-radius:12px;padding:0 0 78px;overflow:hidden;text-align:center;transition:box-shadow .25s ease} #team-members .member-card:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} #team-members .member-avatar{width:100%;height:260px;display:block;object-fit:cover;flex-shrink:0} #team-members .member-card h4{margin:28px 0 0;padding:0 20px;font-size:14px;line-height:1.35;font-weight:700;color:#000} #team-members .member-card p{margin:23px 0 0;padding:0 20px;font-size:12.5px;line-height:18px;color:#9A9A9A} #team-members .member-rule{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:40px;height:2px;background:#1F1F1F;border-radius:1px} @media (max-width:1279px){ #team-members .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #team-members .member-avatar{height:auto;aspect-ratio:1/1} } @media (max-width:767px){ #team-members{padding:56px 0} #team-members .section-h2{margin-bottom:40px} #team-members .team-grid{grid-template-columns:minmax(0,1fr);gap:20px} } /* --- CTA + Footer (#about-cta + footer): 同属深色区 --- 蓝湖 v4 实测(相对深色区顶 3433): 标题墨迹 3467..3488、副标题 3503..3516、 按钮 3536..3575 (200x40, 1px rgba 描边, 圆角 8)、分隔线 3606 (1px #2D2D2D)、 Logo 3637..3697 (151x60 => 显示 39px 高)、Follow us 行 3722..3742、 版权行墨迹 3771..3785, 深色区底 3805。 */ #about-cta{padding:31px 0 30px;background:#222222;text-align:center} #about-cta .about-cta-title{margin:0 0 13px;font-size:19px;line-height:1.2;font-weight:700;color:#fff} #about-cta .about-cta-sub{margin:0 0 19px;font-size:14px;line-height:1.2;color:rgba(255,255,255,.62)} #about-cta .about-cta-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:200px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.62);padding:0 24px;border-radius:8px;font-size:14px;font-weight:600;line-height:1;transition:all .2s ease} #about-cta .about-cta-btn:hover{background:#fff;color:#222222;border-color:#fff} #about-cta .about-cta-btn .wa-ico{width:16px;height:16px;margin-right:.5rem} @media (max-width:767px){ #about-cta{padding:40px 0 0} #about-cta .about-cta-title{font-size:17px} } /* 分割线 + Logo + 社媒 + 版权行。分隔线只在内容区宽度内(1200px), 非全宽 蓝湖 v4 实测(相对分隔线 3606): Logo 3637..3697 => 距线 31px; Logo 底 3697 -> Follow us 行顶 3722 = 25px; 社媒行底 3742 -> 版权墨迹顶 3771 = 29px; 版权行底 3785 -> 深色区底 3805 = 20px。 */ .about-footer{background:#222222;padding:0 0 28px;text-align:center} .about-footer .about-footer-inner{position:relative;padding-top:31px} .about-footer .about-footer-inner::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#2D2D2D} .about-footer .about-footer-logo{display:inline-flex;align-items:center;justify-content:center} .about-footer .about-footer-logo img{height:39px;width:auto;display:block} /* 社媒行: "Follow us" 10px + 4 个 20x20 圆形图标, 图标间距 12px, 整行居中 */ .about-footer .about-footer-social{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:40px} .about-footer .about-footer-follow{font-size:10px;line-height:1;color:rgba(255,255,255,.62);margin-right:20px} .about-footer .about-footer-social a{display:block;width:20px;height:20px;opacity:.9;transition:opacity .2s ease} .about-footer .about-footer-social a:hover{opacity:1} .about-footer .about-footer-social img{width:20px;height:20px;display:block} .about-footer .about-footer-tag{display:none} .about-footer .about-footer-copy{margin:18px 0 0;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.34)} /* 版权行链接: 蓝湖 v4 取样为 #565656 (灰, 不是浏览器默认蓝), 无下划线 */ .about-footer .about-footer-copy a{color:#565656;text-decoration:none;margin-left:2px} .about-footer .about-footer-copy a:hover{color:rgba(255,255,255,.62)} @media (max-width:767px){ .about-footer .about-footer-social{margin-top:20px;flex-wrap:wrap} .about-footer .about-footer-copy{margin-top:18px} } /* --- About Us 页专属: 顶部导航 74px (蓝湖 v4 实测 0..74) --- 只作用于 about.html (body.about-page), 不改动 index/tours/terms/privacy 的 60px。 */ body.about-page header .container.mx-auto{padding-top:17px;padding-bottom:17px} body.about-page header .logo-top-img{height:40px} .about-footer .about-footer-copy a:hover{color:rgba(255,255,255,.7)} /* --- 模块: 首页 Footer (#about .site-footer) --- 蓝湖 home_v13 实测 (画板 y9622..9917, 高 295): - 深色区 #222222 - **四栏**左边界 x = 360(品牌) / 818(Contact) / 1115(Quick Links) / 1442(Follow us) ⇒ 相对内容区(360 起、宽 1200)为 0 / 458 / 755 / 1082 ⚠️ 旧版只有三栏(1fr 414 252, x=361/893/1307), 且**没有 Follow us 列** —— 已按 v13 重排。 - 栏标题 15px 白色粗体, 墨迹高 13px(y9654); 正文/链接 14px 浅灰 - 行距: 标题→首行 30px(y9654→9684), 正文行间 24px(y9684→9708→9733) - 版权行在分割线下方, **左对齐**, 12.5px 更浅(y9880) - logo 一体图显示 152x60(画板 x360..512 / y9654..9714) */ .site-footer{background:#222222;color:#fff;padding:32px 0 24px} /* 四栏: 品牌自适应 + 后三栏固定宽, 让各栏起点落在设计稿的 458 / 755 / 1082。 ⚠️ 用 `1fr 297px 327px 118px` 反推: 品牌列吃掉剩余宽度, 三栏各按设计稿栏宽+间距排布。 改栏内容时若发现列宽不够, 优先调这里而不是给元素写死宽度。 */ .site-footer .footer-grid{display:grid;grid-template-columns:1fr 297px 327px 118px;column-gap:0;padding-bottom:30px} .site-footer .footer-logo{display:inline-flex;align-items:center;margin-bottom:20px} .site-footer .footer-logo img{height:60px;width:auto;display:block} /* 品牌区正文: 14px / **行距 18px**(画板逐行实测 9739/9757/9775/9792/9811, 步长均 18)。 ⚠️ 不要再写 1.62 之类的相对值 —— 14px × 1.62 = 22.7px, 5 行会多出 23px, 整个 footer 高度就会从 295 涨到 320(实测踩过)。 logo 底(画板 9713) → 正文首行墨迹(9739) = 26px, 其中 20px 来自 margin-bottom, 另 6px 是行盒 lead 的自然余量。 */ .site-footer .footer-tag{margin:0;font-size:14px;line-height:18px;color:rgba(255,255,255,.62)} .site-footer .footer-h{margin:0 0 14px;font-size:15px;line-height:1.4;font-weight:700;color:#fff} .site-footer .footer-line{margin:0 0 8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)} .site-footer .footer-line:last-child{margin-bottom:0} .site-footer .footer-links{display:flex;flex-direction:column;gap:8px} .site-footer .footer-links a{font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s ease} .site-footer .footer-links a:hover{color:#fff} /* 社交图标 (Follow us): 蓝湖切图为「白圆底 + 深色标志」一体图, 20x20 显示。 间距: 画板 x1443/1475/1508/1540 ⇒ 步长 32.5px, 图标宽 20 ⇒ **gap 12.5px**。 ⚠️ 不要再给圆形加 background/border-radius —— 白圆已在切图里, 会变双层。 ⚠️ 不同宽度的图标之间用 gap 而非 space-between, 保证 32.5 的固定节奏。 */ .site-footer .footer-sns{display:flex;align-items:center;gap:12.5px} .site-footer .footer-sns img{width:20px;height:20px;display:block} .site-footer .footer-sns a{display:inline-flex;line-height:0;transition:opacity .2s ease} .site-footer .footer-sns a:hover{opacity:.72} .site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:18px} .site-footer .footer-bottom p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.45)} .site-footer .footer-bottom a{color:rgba(255,255,255,.55);text-decoration:none} .site-footer .footer-bottom a:hover{color:#fff} /* 窄屏: 四栏堆叠。⚠️ 平板(768~1023)也压成两列, 否则四栏挤成一行放不下。 */ @media (max-width:1023px){ .site-footer .footer-grid{grid-template-columns:1fr 1fr;row-gap:30px;column-gap:24px;padding-bottom:24px} } @media (max-width:767px){ .site-footer .footer-grid{grid-template-columns:1fr;row-gap:26px} .site-footer .footer-logo img{height:48px} } /* --- 模块: Tours 页卡片与区块 (#tours-list) —— 蓝湖 Our China Tours v9 实测 --- 内容区 x360..1559 (1200 宽)。栅格 **3 列 x 380 + 列距 30**（x360/770/1180）。 第 2 行只有 2 张卡，靠左排；区块 574..1978 之间，底部一条居中说明。 卡片 380x610（第 4 张 614：路线两行把内容撑高），每卡自成一盒，不等高无碍。 图片 360x270，距卡边 10px，**四角都是 10px 圆角**（v1 只有上两角，v9 改成四角）； 卡片自身圆角 10px、**无描边无阴影**（纯白 #FFFFFF 压在 #F9F9F9 上，边缘是硬切，逐像素验证 x359 是 #F9F9F9、x360 直接 #FFFFFF）。 卡片 padding 10px；正文左边距 = 10 + 8 = 378（设计稿文字 x378）。 */ #tours-list{background:#F9F9F9;padding:100px 0 98px} #tours-list .tours-grid{display:grid;grid-template-columns:repeat(3,380px);column-gap:30px;row-gap:30px;justify-content:start} #tours-list .p-tour{display:flex;flex-direction:column;background:#fff;border:0;border-radius:10px;padding:10px 10px 30px;box-sizing:border-box;transition:box-shadow .25s ease;min-height:610px} #tours-list .p-tour:hover{box-shadow:0px 5px 20px 0px rgba(51,51,51,.1)} #tours-list .tour-media{position:relative} #tours-list .tour-img{width:100%;height:270px;object-fit:cover;border-radius:10px;display:block} /* 徽章行: 实测 x386..720、底 y844 => 距图底 10px。⚠️ 这里的 left/right 是相对 tour-media（图左 x370）， 所以 left = 386-370 = 16px、right = 730-720 = 10px（写成 26/20 会把胶囊整体右移 10px，踩过一次）。 设计稿逐像素拆解：pill1 = 左padding5 + 图标14 + 间隙2 + 文字158 + 右padding7 = 186； pill2 = 左padding7 + 图标14 + 间隙2 + 文字114 + 右padding7 = 144；两者 gap=4。 这里统一取 padding 0 6px + gap 2px（得 187 / 142，与设计差 ≤2px，视觉无差）。 ⚠️ 胶囊必须 flex:0 0 auto —— 否则 flex 容器会把胶囊压缩，文字直接溢出到圆角外（踩过）。 ⚠️ 胶囊底色 rgba(255,255,255,.3) 是压在照片上的半透明白，不能改实色。 */ #tours-list .badge-row{position:absolute;left:16px;right:10px;bottom:10px;display:flex;flex-wrap:nowrap;gap:4px;pointer-events:none} #tours-list .badge-pill{display:inline-flex;flex:0 0 auto;align-items:center;gap:2px;padding:0 6px;height:28px;border-radius:14px;background:rgba(255,255,255,.3);color:#fff;font-family:Arial,Arial,sans-serif;font-size:12px;line-height:1;white-space:nowrap} #tours-list .badge-ico{width:14px;height:14px;flex-shrink:0;display:block} /* 正文区容器（只负责 flex 撑满 + 横向缩进 8px，纵向间距全部由子元素 margin 精确给） */ #tours-list .tour-body{display:flex;flex-direction:column;flex:1 1 auto;padding:0 8px} /* 标题: Arial Bold 18px / #000，行盒顶 y878（= 图底 854 + 24） */ #tours-list .tour-name{margin:20px 0 0;font-family:Arial,Arial,sans-serif;font-size:18px;line-height:22px;font-weight:700;color:#000} /* 路线行: Arial 14px / #656565，leading 18px，行盒顶 y907（= 标题行盒底 900 + 7） */ #tours-list .tour-route{margin:5px 0 0;font-family:Arial,Arial,sans-serif;font-size:14px;line-height:22px;color:#656565} /* 描述: 14px / #999999，leading 22px，**固定 4 行高(88px)**。 ⚠️ 5 张卡描述行数是 3/4/3/3/3，但**价格行与按钮行的 y 在所有卡上完全一致** (价格行 y1069 / 按钮 y1102；第 2 行卡是 1714 / 1746)。所以描述区按最多行数(4 行)占位， 否则 3 行的卡价格会上移 22px，同一行按钮不在水平线上。 ⚠️ 字体/字号/对齐方式是实测出来的，不能凭感觉： 设计稿 textInfo = MicrosoftYaHeiUI，且**逐行墨迹宽几乎都顶到 346~348**（容器 344）—— 只有「两端对齐(justify)」才会这样；自然换行时末行不到 320。 用浏览器 Range 逐级扫描（宽度固定 344px / justify）： YaHei 13.7px → 5 张卡行数 3/4/3/3/3、末行 338/75/308/320/314，与设计稿 346/76/314/325/319 全部吻合； 14px 会变成 4/4/3/4/4（第 1/4/5 张多一行）；Arial 14px 行数对但行宽只到 324（视觉明显偏窄）。 ⇒ 最终取 YaHei 13.7px + text-align:justify。若将来改文案，需重新扫描字号。 */ #tours-list .tour-desc{margin:6px -8px 0 0;font-family:"Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;font-size:14px;line-height:22px;color:#999999;text-align:justify;text-justify:inter-word} /* 价格行: "From US" 16px #000 + "$xxx" Arial Bold 26px #9B0911 + "per person" 16px #000。 三者 baseline 对齐（设计稿墨迹 y1069 对 y1059+22 的基线一致）。 */ #tours-list .tour-price-row{display:flex;align-items:baseline;gap:5px;margin:auto 0 0} #tours-list .tour-price-from{font-family:Arial,Arial,sans-serif;font-size:16px;line-height:24px;color:#000} #tours-list .tour-price{position:relative;top:4px;font-family:Arial,Arial,sans-serif;font-size:26px;line-height:24px;font-weight:700;color:#9B0911} #tours-list .tour-price-per{font-family:Arial,Arial,sans-serif;font-size:16px;line-height:24px;color:#000} /* 按钮行: 两枚 166x52 间距 12（x378..544 / 556..722），行盒顶 y1102 = 价格行底 1093 + 9。 主按钮纯黑 + 白字；次按钮白底 + **内描边 1px 黑**（设计稿 strokeStyleAlignment = inside）。 ⚠️ 次按钮不能用 border —— 会挤占内容宽导致两枚不等高，用 inset box-shadow。 */ #tours-list .tour-actions{display:flex;gap:12px;margin-top:20px} #tours-list .tour-btn{flex:1 1 0%;min-width:0;display:flex;align-items:center;justify-content:center;height:52px;border-radius:6px;font-family:Arial,Arial,sans-serif;font-size:16px;line-height:1;white-space:nowrap;transition:all .2s ease;box-sizing:border-box;text-decoration:none} #tours-list .tour-btn-primary{background:#000;color:#fff} #tours-list .tour-btn-primary:hover{background:var(--accent)} #tours-list .tour-btn-outline{background:#fff;color:#000;border:0;box-shadow:inset 0 0 0 1px #000} #tours-list .tour-btn-outline:hover{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px var(--accent)} /* 区块底部说明: 14px #999999 单行居中，墨迹 x403..1514、顶 y1864；第 4 张卡底 y1828 => 间距 36 */ #tours-list .tours-note{margin:36px 0 0;font-family:Arial,Arial,sans-serif;font-size:14px;line-height:20px;color:#999999;text-align:center} @media (max-width:1279px){ /* ⚠️ 不能写 minmax(0,380px)：auto-fit 会按 380 做上限计算列数，768 只剩 1 列、右侧留一大片空白。 */ #tours-list .tours-grid{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))} } /* ⚠️ 3 列必须 ≥1280：1200 内容区 3 列时卡宽只有 380，但 1024 视图会压到 311 —— 按钮区仅 275，两枚 166 装不下，「Ask About This Tour」会溢出描边。 卡宽 <380 时一律 2 列。 */ @media (max-width:1279px) and (min-width:768px){ #tours-list .tours-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ #tours-list .tours-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:767px){ #tours-list{padding:56px 0 0} #tours-list .tours-grid{grid-template-columns:minmax(0,1fr);row-gap:24px} /* 窄屏两枚胶囊放不下(合计 334 + 卡片内边距 > 屏宽)，允许换行，不再溢出图片右边缘 */ #tours-list .badge-row{left:10px;right:10px;flex-wrap:wrap;row-gap:6px} /* 两端对齐在窄容器里会把字距拉得很开，窄屏还原成左对齐 */ #tours-list .tour-desc{margin-right:0;text-align:left;text-justify:auto} /* 窄屏按钮按内容宽度排，避免「Ask About This Tour」被压 */ #tours-list .tour-actions{gap:10px} #tours-list .tour-btn{height:46px;font-size:14px;padding:0 8px} #tours-list .tours-note{margin-top:24px;text-align:left} #tours-hero .tours-hero-sub{max-width:none;font-size:13px;line-height:1.45} } /* --- 模块: Tours 页 nav (#tours 与 #tours-list 的公共 header 用具名类，不挂 id) --- 实测: nav 高 74px、白底无阴影；logo 200x80 素材显示 100x40，距左 360 / 顶 17。 3 个链接 Arial 16（#999999 未选中 / #000 + bold 选中）；CTA 158x36 黑底白字 14px 圆角 4。 ⚠️ 链接间距设计稿不等距（Home 右 1147.7 -> Tours 左 1199 是 51.3；Tours 右 1243.5 -> About 左 1287 是 43.6）， 是逐个摆位而非 flex gap。这里用均匀 gap:44 近似，偏差 <8px 肉眼不可辨。 */ .page-nav-inner{display:flex;justify-content:space-between;align-items:center;height:74px;padding-top:0;padding-bottom:0} .page-nav-logo{height:40px;width:auto;display:block} /* ---------- 13d. 顶部导航 logo: 全站统一 100x40 ---------- 🔴 **唯一真源**。素材 `assets/logo-top2x.png` 原图 200x80（比例 2.5:1）， 所以 `height:40px` + `width:auto` 自然得到 **100x40**（正好是用户要的尺寸）。 ⚠️ **只写 height 不写固定 width**: 原图比例固定，写死 width 反而是双保险里较弱的一环 （将来换图比例一变就会拉伸）。`width:auto` 永远按原比例走。 ⚠️ **不要改 `.h-9`**: 它是 `2.25rem`=36px，还被弹窗关闭按钮 `index.html:129` 使用， 改它会把关闭按钮一起改大。所以给 logo 单独一个 `.nav-logo` 类。 改前实测四套不一致: index/terms/privacy = **90x36**（`.h-9` 36px）、 about/tours = 100x40、tour 系列/pay = 100x40（`.logo img{width:100px;height:40px}`）。 ⚠️ **别再给 .nav-logo 写 width:100px**：tour.css 的 `.logo img` 就是 `width:100px;height:40px`， 写死宽在换图时会有拉伸/裁切风险，统一交给 height 推进更稳。 */ .nav-logo{height:40px;width:auto;display:block} /* 兜底: 断掉继承来的 .h-9 / w-auto 影响（HTML 里已改成 .nav-logo, 此处仅防守） */ @media (max-width:1023px){ .nav-logo{height:40px;width:auto} } .page-nav-links{gap:44px;height:74px} /* tours.html 专属导航: 走 `.page-nav-*` 体系(不用 `header nav a` 规则), 故字号/字体/颜色要在这里**再写一遍**, 保持与全站一致: 16px / Arial / #999。 ⚠️ 原字体族写的是 `Arial, Arial, sans-serif`(重复 Arial), 已改为与全站相同的 `Arial, Arial, sans-serif` —— 与 site.css body 的 `Arial,Helvetica,...` 渲染等价, 不必改成 Helvetica 链, 避免没装 Helvetica 的机器上回退不一致。 ⚠️ 当前项 `is-active` 的 font-weight 原为 **700**, 与其它页面的 `.is-current` 的 **600** 不一致(视觉上 tours 页当前项明显更粗), 已统一为 600。 */ .page-nav-link{font-family:Arial,Arial,sans-serif;font-size:16px;line-height:74px;color:#999999;font-weight:400;text-decoration:none;transition:color .2s ease} .page-nav-link:hover{color:#000} .page-nav-link.is-active{color:#000;font-weight:600} /* ---------- 13c. 导航 CTA 按钮: 全站统一规格 ---------- 🔴 **唯一真源**。全站导航里的 WhatsApp 按钮统一为: `Chat on WhatsApp` + 16px 白色图标 + 16px/400 文字 + 黑底 #000 + 圆角 4px + 高 36px 改前有三套且各不相同(实测): - index/about : 工具类拼的 `bg-black text-white px-4 py-2 rounded`, 14px/400, 169×36 ✅ 与基准接近但字号 14 - tours : `.page-nav-cta`, **16px/400**, 180×36 ← **作为基准** - tour-xx/pay : `.cta`, **14px/600 + 圆角3px + 无图标 + 文案 "Talk to a Travel Advisor"** ← 差异最大 ⚠️ **.cta 只在导航里用**(6 个页面各一处), 所以可以直接改它, 不影响页面内其它按钮。 ⚠️ 宽度**不定死**: 让内容撑开(文案统一后自然一致), 定死宽会因字体回退差异而裁字。 改字号后务必回测 `scrollWidth <= clientWidth`(本项目已有"定宽 + nowrap 裁字"的先例)。 ⚠️ 高度 36 保持不变 —— 它是导航 74px 内的对齐基准, 改了会让按钮与 logo 基线不齐。 🔴 **悬停不变色**(用户要求): 去掉原来的 `background:var(--accent)` 金铜色 hover。 文字默认就是 **#fff**。为此 `transition` 也一并去掉 —— 没有颜色变化就没有过渡可言, 留着 transition 反而会让某些浏览器在 hover 时产生不必要的重绘。 **注意**: `:hover` 规则仍然保留并显式写死同色, 是为了**压掉**残留的旧规则 (例如 tours 页早期版本可能带 `hover:bg-accent` 类, 以及 `.cta:hover` 在 tour.css 里 还留着一份) —— 只删不加容易被别处的规则偷袭。 */ .page-nav-cta,.header-nav-cta,.cta{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:36px;padding:0 12px;background:#000;color:#fff;border-radius:4px; font-family:Arial,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1; text-decoration:none;white-space:nowrap; } .page-nav-cta:hover,.header-nav-cta:hover,.cta:hover{background:#000;color:#fff} /* 图标 16px；.wa-ico 原为 14px, 这里统一覆盖成 16, 与 tours 页一致 */ .page-nav-cta-ico,.header-nav-cta .wa-ico{width:16px;height:16px;flex-shrink:0;display:block;margin:0} @media (max-width:1023px){ /* 🔴 用户要求**全站导航统一 74px**, 原来这里收到 64 是为了窄屏省空间, 但会造成"同一站点不同页面/不同设备高度不一致", 故维持 74。 ⚠️ logo 也保持 40px(不是 34): 74 的内容区够放 40, 缩到 34 反而让 logo 与整站不齐。 */ .page-nav-inner{height:74px} .page-nav-logo{height:40px} /* 1023 以下导航链接已隐藏(md:flex)，只剩 logo + 汉堡；CTA 也一并隐藏，避免被挤到屏幕外 */ .page-nav-cta{display:none} } /* --- 模块: Tours 页精简 footer (.site-footer-slim) —— 区高 292px / #222222 --- 实测: logo 151x60 居中、顶 2014（区顶 1978 + 36）； Discover 那行 14px #999999 墨迹顶 2104；WhatsApp 行墨迹顶 2126； Follow us + 4 枚 20x20 圆图标 一行 y2164..2184； 1px 分隔线 y2208；版权 14px #555555 居中（墨迹 x561..1358，中心 959.5 = 视口中心）。 */ .site-footer-slim{background:#222222;padding:36px 0 0;text-align:center} .site-footer-slim .sf-logo{display:inline-block} .site-footer-slim .sf-logo img{height:60px;width:auto;display:block;margin:0 auto} .site-footer-slim .sf-tag{margin:29px 0 0;font-family:Arial,Arial,sans-serif;font-size:14px;line-height:22px;color:#999999} .site-footer-slim .sf-tag+.sf-tag{margin-top:0} .site-footer-slim .sf-social{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px} .site-footer-slim .sf-follow{font-family:Arial,Arial,sans-serif;font-size:14px;line-height:20px;color:#999999;margin-right:1px} .site-footer-slim .sf-ico{display:block;width:20px;height:20px} .site-footer-slim .sf-ico img{width:20px;height:20px;display:block;border-radius:9999px} /* 设计稿: 分隔线 y2208、版权墨迹 2232..2246、footer 底 2269 => 版权行盒(20px) 顶 2228、底 2248、再留 21px */ .site-footer-slim .sf-bottom{margin-top:20px;border-top:1px solid #2D2D2D;padding:18px 0 22px} .site-footer-slim .sf-bottom p{margin:0;font-family:Arial,Arial,sans-serif;font-size:14px;line-height:20px;color:#555555} .site-footer-slim .sf-bottom a{color:#555555;text-decoration:none} .site-footer-slim .sf-bottom a:hover{color:#999999} @media (max-width:767px){ .site-footer-slim{padding-top:28px} .site-footer-slim .sf-bottom{padding-bottom:23px} .site-footer-slim .sf-logo img{height:48px} .site-footer-slim .sf-tag{font-size:13px;line-height:1.5} }