/* ============================================================ Hero 手机版重新设计（2026-07-31 站长指定） 与桌机版 hero-desktop-left.css 同一套视觉语言：靠左、高对比、 不模糊、不遮背景。 🔑 配色依「背景图实际亮度采样」决定（hero-temple-mobile-1200）： y 5~52% 亮度 .74~.87 → 深墨蓝字 11~13:1（白字仅 1.2:1） y 55~60% 亮度 .38 → 过渡带，靠描边撑可读性 y 60~80% 亮度 .06~.18 → 白字 8~9:1（深蓝仅 1.6:1） 故上段用深墨蓝 + 白描边、下段维持白字 + 深描边， 两段都用 0-blur 多重 text-shadow（锐利，不是模糊阴影）。 🔑 移除 home-hero-mobile-contrast 的深色渐层遮罩： 该遮罩原是为了保护白字（顶部 rgba(12,26,48,.58)），改深字后 不再需要，拿掉让合兴宫与天空完整明亮呈现。 🔑 诵经共存：incense-blessing.js 手机经文栏在 x 84%~92%， 其 `.ib-lit .hero-content{padding-right:19%}` 特异性高于本档 （ID+2class），诵经时仍会正常让位到 81%，实测不重叠。 但其 `.ib-lit .hero-search-form{max-width:68%}` 会把查找框压到 placeholder 被按钮截断 → 本档覆写回 100%（内容已整体让位， 不需要再压缩表单）。 ============================================================ */ @media (max-width: 767px) { /* ── 1) 拿掉压暗背景的深色渐层 ─────────────────────── */ #landing-hero .landing-hero__bg::after { background: none !important; } /* ── 2) 内容靠左 ───────────────────────────────────── */ #landing-hero .hero-content { text-align: left !important; padding-left: 5.5% !important; padding-right: 8% !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; position: relative; } /* 左侧品牌色直条（与桌机版呼应，手机收细成 3px） */ #landing-hero .hero-content::before { content: ''; position: absolute; left: 2.2%; top: 10px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #f59e0b 0%, #ea580c 45%, #0d9488 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); } /* ── 3) 上段（亮天空）：深墨蓝 + 0-blur 白描边 ─────── */ #landing-hero .hero-title, #landing-hero .hero-title .gradient-text { color: #082744 !important; -webkit-text-fill-color: #082744 !important; background: none !important; font-size: clamp(23px, 6.2vw, 27px) !important; line-height: 1.28 !important; text-shadow: 1.4px 0 0 rgba(255, 255, 255, .94), -1.4px 0 0 rgba(255, 255, 255, .94), 0 1.4px 0 rgba(255, 255, 255, .94), 0 -1.4px 0 rgba(255, 255, 255, .94), 1px 1px 0 rgba(255, 255, 255, .94), -1px -1px 0 rgba(255, 255, 255, .94), 1px -1px 0 rgba(255, 255, 255, .94), -1px 1px 0 rgba(255, 255, 255, .94) !important; } #landing-hero .hero-description, #landing-hero .hero-value-item, #landing-hero .hero-login-link { color: #0f3352 !important; font-weight: 600 !important; text-shadow: 1px 0 0 rgba(255, 255, 255, .9), -1px 0 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(255, 255, 255, .9) !important; } /* Badge：实心品牌深蓝，去毛玻璃 */ #landing-hero .hero-badge { background: #0e2b48 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, .55) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(8, 39, 68, .30) !important; margin-bottom: 1rem !important; } /* ── 4) 下段（暗庙身）：白字 + 0-blur 深描边 ───────── */ #landing-hero .hero-guest-search__link, #landing-hero .hero-stats .stat-number, #landing-hero .hero-stats .stat-label { color: #fff !important; text-shadow: 1.2px 0 0 rgba(6, 20, 36, .9), -1.2px 0 0 rgba(6, 20, 36, .9), 0 1.2px 0 rgba(6, 20, 36, .9), 0 -1.2px 0 rgba(6, 20, 36, .9) !important; } #landing-hero .hero-stats .stat-divider { background: rgba(255, 255, 255, .45) !important; } /* ── 5) 查找框：实心白 + 深蓝细边 ───────────────────── 宽度对齐标题第二行「大陆到台湾跨境物流平台」（站长 2026-08-01 指定）。 实测标题宽恒等于 11 字 × 字级，字级为 clamp(23px, 6.2vw, 27px)： 360px → 253px(70.3vw) ／ 390px → 266px(68.2vw) ／ 430px → 293px(68.2vw) 故宽度 = clamp(253px, 68.2vw, 297px)。 🔑 右缘落在 5.5%+68.2% ≈ 73.7%，经文栏在 84%~92% → 诵经期间本来就不会撞到，因此 .ib-lit 套「同一个值」而不是缩短， 框在诵经前后完全不变动（原本 incense 会压成 68% 导致 placeholder 被按钮截断；若这里写 100%，诵经让位后反而会比平常更宽）。 */ /* 2026-10-04 owner request: shorter mobile tracking box (was clamp(253px,68.2vw,297px)) to reveal more hero artwork. */ #landing-hero .hero-search-form { max-width: clamp(200px, 55vw, 240px) !important; margin-left: 0 !important; margin-right: 0 !important; } /* 特异性要压过 incense 的 #landing-hero.ib-lit .hero-search-form{max-width:68%} */ #landing-hero.landing-hero.ib-lit .hero-search-form, #landing-hero.landing-hero.ib-ending .hero-search-form { max-width: clamp(200px, 55vw, 240px) !important; } #landing-hero .search-input-wrapper { background: #fff !important; border: 1.5px solid rgba(14, 43, 72, .35) !important; box-shadow: 0 8px 20px rgba(8, 39, 68, .20) !important; } #landing-hero .search-input { color: #0e2b48 !important; font-size: 14px !important; text-overflow: ellipsis !important; } /* 查找按钮：手机版原本是 10px 方角 + 隐藏「查找」文字（cards.css 在 <768px 隐藏 span），方形按钮塞在 9999px 胶囊框里形状打架。cards.css 自己写的 9999px !important 被 Vue bundle 那侧更后面的规则盖成 10px，故这里用 ID 级特异性（#landing-hero .hero-search-form .search-btn）压回， 并收成 44×44 正圆图标钮，与胶囊外框呼应、也符合触摸最小尺寸。 */ #landing-hero .hero-search-form .search-btn { border-radius: 9999px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(13, 148, 136, .35) !important; } #landing-hero .hero-search-form .search-btn i { font-size: 17px !important; margin: 0 !important; } /* 左侧条码图标与输入文字的间距收一点，让 placeholder 有更多空间 */ #landing-hero .search-input-wrapper > i { padding: 0 .5rem 0 .85rem !important; } /* ── 6) 按钮与访客版元素靠左 ───────────────────────── */ #landing-hero .warehouse-copy-btn { margin-left: 0 !important; margin-right: auto !important; /* 2026-10-04 owner request: shorter mobile warehouse button (was padding .625rem 1.25rem / 14px / gap .5rem). */ padding: .5rem .7rem !important; gap: .25rem !important; font-size: 12.5px !important; letter-spacing: 0 !important; } #landing-hero .warehouse-copy-btn .fa-warehouse, #landing-hero .warehouse-copy-btn .warehouse-copy-icon { font-size: 11px !important; } #landing-hero .warehouse-toast { left: 0 !important; right: auto !important; transform: none !important; } #landing-hero .hero-value-props, #landing-hero .hero-cta-group, #landing-hero .hero-guest-search, #landing-hero .hero-stats { justify-content: flex-start !important; } }