/* 山野路簿 · all application routes */ :root{--bg:#f0f4f1;--paper:#fffefa;--ink:#1d2d2a;--ink2:#52625b;--ink3:#68766f;--line:#dce4da;--hair:#e9eee5;--blue:#255e54;--blue-bg:#e8f1e9;--blue-deep:#193f3a;--coral:#d85635;--coral-bg:#fff1e9;--violet:#6f816c;--violet-bg:#ecf0e7;--violet-deep:#456248;--shadow:0 3px 16px rgba(28,56,45,.045);--r:16px} html{background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.55} ::selection{background:#d9eac6;color:var(--ink)}:focus-visible{outline:3px solid #d85635;outline-offset:3px}*{scrollbar-color:#9ab3a2 transparent}input,textarea{caret-color:var(--coral)} #app{background:var(--bg)}.topbar{background:#e7eee3;border-bottom:1px solid var(--line)}.topbar:not(.home):after{display:none}.brand b,.page-title{color:var(--blue-deep)}.brand em{color:var(--coral)}.page-title{font-size:clamp(24px,2.5vw,32px);font-weight:850;letter-spacing:-.025em} .view{padding-top:20px;padding-bottom:32px}.view.flush{padding-bottom:32px}.sec-head{margin-top:30px;margin-bottom:12px}.sec-head h3{color:var(--blue-deep);font-size:18px}.group-label{color:var(--blue-deep);letter-spacing:.03em;font-size:12px} .card,.rowlink,.trailcard,.hotcard,.profilebox,.signage,.msg,.intel,.comment,.guide{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line)} .card,.rowlink{padding:18px}.rowlink{min-height:76px}.rowlink.warn,.intel.ok{border-left:1px solid var(--line)}.rowlink .em{color:var(--blue)}.rowlink .ar{color:var(--ink3)} .btn{border-radius:12px;min-height:48px;transition:transform .14s cubic-bezier(.23,1,.32,1),background-color .14s ease}.btn:active,.home-primary:active,.tabbar a:active{transform:scale(.97)}.btn.coral,.btn.blue,.scanstrip,.pill-btn.acc{background:var(--coral);box-shadow:none;color:#fff}.btn.ghost{background:transparent;border:1px solid #b9cbbd;color:var(--blue-deep)}.btn.white{color:var(--blue-deep)}.btn:disabled{opacity:.48} .tabbar{background:#fffefa;border-top:1px solid var(--line);box-shadow:none}.tabbar a{color:var(--ink2);font-size:11px}.tabbar a .ico{stroke:var(--ink2)}.tabbar a.on,.tabbar .scan em{color:var(--blue-deep)}.tabbar a.on .ico{stroke:var(--blue-deep)}.scan-btn{background:var(--coral);box-shadow:0 4px 12px rgba(216,86,53,.18)}.iconbtn,.back{background:#fffefa;box-shadow:none;border:1px solid var(--line)} .seg{background:#e6ebe1;border-radius:12px}.seg button{border-radius:9px}.seg button.on{color:var(--blue-deep);box-shadow:none}.filter-trigger,.filter-option{border-radius:12px}.filter-option.on{background:var(--blue-bg);border-color:#95af9f;color:var(--blue-deep)} .fld input,.fld select,.fld textarea{border:1px solid #cbd8cc;border-radius:10px;background:#fff}.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,94,84,.1)} .hero{border-radius:0 0 20px 20px}.guide{background:#e8f1e9}.guide .gtag,.guide .dir,.guide .next{color:var(--blue-deep)}.rank.me,.pill-btn.ign{background:var(--blue-bg)}.profile .big{background:var(--blue)}.progress{background:#e2e9df}.progress i{background:var(--blue)}.hotcard .no.top,.hotrow .no.top{background:var(--coral);box-shadow:none}.hotcard .r .rb,.hotrow .mt b{color:var(--coral)}.badge{border-radius:8px}.tag{border-radius:7px} .home-page{background:var(--bg)}.home-content h1{color:var(--blue-deep)}.home-content p{color:var(--ink2)}.home-primary{background:var(--coral);box-shadow:none}.home-featured{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}.home-brand{color:var(--blue-deep)}#app.home-image .tabbar{background:var(--paper)}#app.home-image .tabbar .scan-btn{background:var(--coral)}#app.home-image .tabbar .scan em{color:var(--blue-deep)} @media(min-width:700px){body{padding:0;display:block}#app,#app:not(.home-image){max-width:none;height:100dvh;border:0;border-radius:0;box-shadow:none}.topbar{padding-left:max(28px,calc((100vw - 1160px)/2));padding-right:max(28px,calc((100vw - 1160px)/2))}.view{width:100%;padding-left:max(28px,calc((100vw - 1160px)/2));padding-right:max(28px,calc((100vw - 1160px)/2))}.tabbar{padding-left:max(28px,calc((100vw - 1160px)/2));padding-right:max(28px,calc((100vw - 1160px)/2))}.tabbar a{font-size:13px;flex-direction:row;justify-content:center;gap:9px}.tabbar .scan{transform:none}.scan-btn{width:34px;height:34px}.scan-btn .ico{width:18px;height:18px}.tabbar .scan em{font-size:13px}.hero.tall{height:clamp(240px,26vw,360px)}.view:not(.flush) .hero{margin-left:0;margin-right:0}.view.flush>.hero{max-width:1160px;margin-left:auto;margin-right:auto}.trailcard{flex-basis:280px}.home-content{max-width:1160px}} @media(max-width:699px){#app{max-width:none}.view{padding-top:17px}.topbar{padding-top:calc(13px + env(safe-area-inset-top))}.tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}.home-content{padding-bottom:24px}.home-featured{min-width:0}.home-featured span{overflow:hidden;text-overflow:ellipsis}} @media(prefers-reduced-motion:reduce){.btn,.home-primary,.tabbar a,.trailbook-find{transition:none}} @media(min-width:700px){ #app[data-page="me"] .view,#app[data-page^="me-"] .view,#app[data-page="messages"] .view,#app[data-page="places"] .view,#app[data-page="scan"] .view,#app[data-page="arrive"] .view,#app[data-page="peak"] .view,#app[data-page="junction"] .view,#app[data-page="trail"] .view{width:min(100%,940px);margin:0 auto;padding-left:28px;padding-right:28px} #app[data-page="messages"] .view,#app[data-page="scan"] .view,#app[data-page="arrive"] .view{width:min(100%,760px)} #app[data-page="me"] .topbar,#app[data-page^="me-"] .topbar,#app[data-page="messages"] .topbar,#app[data-page="places"] .topbar,#app[data-page="scan"] .topbar,#app[data-page="arrive"] .topbar,#app[data-page="peak"] .topbar,#app[data-page="junction"] .topbar,#app[data-page="trail"] .topbar{padding-left:max(28px,calc((100vw - 884px)/2));padding-right:max(28px,calc((100vw - 884px)/2))} #app[data-page="messages"] .topbar,#app[data-page="scan"] .topbar,#app[data-page="arrive"] .topbar{padding-left:max(28px,calc((100vw - 704px)/2));padding-right:max(28px,calc((100vw - 704px)/2))} #app[data-page="peak"] .view.flush>.hero,#app[data-page="junction"] .view.flush>.hero,#app[data-page="arrive"] .view.flush>.hero{max-width:884px} } .peak-primary-actions{margin:4px 0 16px}.peak-primary-actions .btn{min-height:54px;font-size:17px} .scanbox{background:#193f3a;border-radius:18px}.scanbox .frame{border-color:rgba(239,246,232,.55)}.scanbox .tip{color:#eff6e8}.scanbox .laser{background:linear-gradient(90deg,transparent,#efb179,transparent)} .mapbox{background:#e5ebe1}.mapbox .pin{box-shadow:0 0 0 4px rgba(216,86,53,.18)} .kingcard{box-shadow:none}.kingcard:hover,.kingcard.npc:hover{box-shadow:0 6px 18px rgba(45,78,60,.12)} .pill{background:rgba(29,45,42,.72)}.toast{background:#193f3a} @media(min-width:700px){#app[data-page="me"] .card:first-of-type{max-width:884px}.scanbox{max-height:360px}} .msg[data-urgent="true"]{background:#fff6f0}.msg[data-urgent="true"] .tx b{color:#a8472b} @media(min-width:700px){#app .tabbar{order:-1;min-height:64px;align-items:center}#app .topbar{order:0}#app .view{order:1}#app.home-image .tabbar{order:-1}} /* The supplied homepage reference is the pixel-accurate homepage composition. */ #app.home-image{width:100%;max-width:430px;height:100dvh;margin:0 auto;background:#fff;border:0;border-radius:0;box-shadow:none} #app.home-image .topbar,#app.home-image .tabbar{display:none!important} #app.home-image .view{display:block;flex:1;width:100%;min-height:0;padding:0!important;overflow:hidden;order:0} #app.home-image .home-art{width:100%;height:100%;background:#fff} #app.home-image .home-art>img{display:block;width:100%;height:100%;object-fit:fill} #app.home-image .home-hotspot-scan{left:7%;top:70.2%;width:86%;height:8.8%} #app.home-image .home-hotspot-route{left:6%;top:80.1%;width:88%;height:6.6%} #app.home-image .home-hotspot-tabs{height:12.2%} @media(min-width:700px){#app.home-image{width:100%;max-width:none;height:100dvh}} @media(max-width:699px){#app.home-image{max-width:none}} /* Anime mountain direction: sky blue, vivid pink actions, teal terrain, soft surfaces. */ :root{--bg:#eef9ff;--paper:#ffffff;--ink:#25283b;--ink2:#59657c;--ink3:#7c879b;--line:#e4eef4;--hair:#edf4f8;--blue:#39a875;--blue-bg:#e8f8f2;--blue-deep:#25283b;--coral:#ff5298;--coral-bg:#fff0f6;--violet:#48b7b0;--violet-bg:#e6f8f6;--violet-deep:#218f88;--shadow:0 2px 10px rgba(37,70,98,.035);--r:20px} html,body,#app{background:var(--bg)}.topbar{background:#e4f5fd;border-color:#d9eff9}.brand em{color:var(--coral)}.home-scene{background:#8bcffa url('../assets/decor/scenic-reference.svg') center 52%/cover no-repeat}.home-sun{display:none}.home-hiker{filter:none}.home-primary,.btn.coral,.btn.blue,.scanstrip,.pill-btn.acc,.scan-btn{background:var(--pink,#ff5298);box-shadow:none}.home-primary{background:#ff5298}.btn{border-radius:16px}.btn.ghost{border-color:#d8eaf2}.card,.rowlink,.trailcard,.hotcard,.profilebox,.signage,.msg,.intel,.comment,.guide{border-color:transparent;box-shadow:0 2px 10px rgba(37,70,98,.035);border-radius:20px}.tabbar{border-color:#edf4f8}.tabbar .scan-btn{background:#ff5298}.tabbar .scan em,.tabbar a.on,.tabbar a.on .ico{color:#ff5298;stroke:#ff5298}.hero{border-radius:0 0 24px 24px}.hero>svg{opacity:0}.hero:before{content:"";position:absolute;inset:0;background:url('../assets/decor/scenic-reference.svg') center 54%/cover no-repeat}.hero .cap{z-index:1}.hero .floating{z-index:2}.badge.easy{background:#e7f8f0;color:#238b70}.badge.mid{background:#fff5da;color:#916c16}.badge.hard{background:#fff0f6;color:#c83773} .home-desktop{display:none} @media(min-width:700px){ #app.home-image{width:100%;max-width:none;height:100dvh} #app.home-image .home-art{display:none} #app.home-image .home-desktop{display:flex;flex-direction:column;width:100%;height:100%;background:#fff;overflow:auto} .home-desktop-scene{position:relative;flex:1 1 58%;min-height:320px;background:#8bcffa url('../images/home/mountain-landscape.png') center 43%/cover no-repeat;overflow:hidden} .home-desktop-brand{position:absolute;z-index:2;left:max(36px,calc((100vw - 1160px)/2));top:34px;display:flex;align-items:center;gap:12px;color:#25283b;font-size:clamp(30px,3.1vw,46px);font-weight:900;letter-spacing:.035em} .home-desktop-brand img{width:50px;height:42px} .home-desktop-hiker{position:absolute;left:max(-25px,calc((100vw - 1200px)/2));bottom:-12%;width:clamp(360px,38vw,590px);max-height:88%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 15px rgba(37,56,77,.12))} .home-desktop-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(310px,420px);gap:42px;align-items:center;width:min(100% - 72px,1160px);margin:0 auto;padding:30px 0 24px} .home-desktop-content:before{content:'';position:absolute;z-index:-1;left:50%;top:-46px;width:100vw;height:80px;transform:translateX(-50%);background:#fff;border-radius:55% 55% 0 0/90% 90% 0 0} .home-desktop-copy h1{font-size:clamp(52px,5vw,76px);line-height:1.05;color:#25283b;letter-spacing:.02em;font-weight:900;margin:0 0 22px} .home-desktop-copy h1:after{content:'';display:block;width:82%;height:12px;background:url('../assets/decor/pink-underline.svg') center/100% 100% no-repeat;margin-top:4px} .home-desktop-copy p{font-size:clamp(19px,1.6vw,25px);color:#666d80;margin:0} .home-desktop-actions{display:grid;gap:12px}.home-desktop-scan{display:flex;align-items:center;justify-content:center;gap:14px;min-height:72px;background:#ff5298;color:#fff;border-radius:999px;font-size:25px;font-weight:800}.home-desktop-scan .ico{width:30px;height:30px;stroke:#fff} .home-desktop-route{display:flex;align-items:center;gap:12px;padding:17px 20px;background:#f7f8fa;border-radius:22px;color:#25283b;min-width:0}.home-desktop-route .ico{stroke:#39a875;width:27px;height:27px;flex:none}.home-desktop-route b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-desktop-route span{color:#777d90;white-space:nowrap}.home-desktop-route span:last-child{margin-left:auto;font-size:24px} .home-desktop-nav{display:flex;justify-content:space-between;gap:20px;width:min(100% - 72px,1160px);margin:0 auto;padding:14px 0 18px;background:#fff}.home-desktop-nav a{display:flex;align-items:center;gap:9px;color:#737c93;font-weight:700;font-size:15px}.home-desktop-nav .ico{stroke:currentColor;width:23px;height:23px}.home-desktop-nav a:nth-child(3){color:#ff5298} } /* Homepage: keep the supplied anime landscape, hiker cutout and real controls together. */ .scan-art-card{width:100%;aspect-ratio:2.75/1;margin:16px 0 20px;overflow:hidden;border-radius:20px;background:#8bcffa} .scan-art-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .scanbox video{position:absolute;inset:0;z-index:1;display:none;width:100%;height:100%; object-fit:cover;background:#101814} .scanbox.live video{display:block} .scanbox .frame,.scanbox .laser,.scanbox .tip{z-index:2} .scan-actions{display:flex;gap:8px;margin:-4px 0 10px} .scan-actions .btn{flex:1;min-width:0} .scan-state{min-height:36px;margin:0 2px 12px;color:var(--ui-ink2);font-size:12.5px;line-height:1.55} .nearby-choice{display:flex;align-items:center;gap:10px;width:100%;padding:12px 10px; border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-paper); color:var(--ui-ink);text-align:left;font:inherit;margin-bottom:8px} .nearby-choice-type{flex:0 0 auto;padding:4px 7px;border-radius:8px;background:var(--ui-accent-soft); color:var(--ui-accent);font-size:10.5px;font-weight:750} .nearby-choice-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .nearby-choice-main b{font-size:13.5px;color:var(--ui-ink)} .nearby-choice-main small{font-size:11.5px;color:var(--ui-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nearby-choice-distance{display:flex;flex-direction:column;align-items:flex-end;gap:2px; color:var(--ui-ink2);font-size:11.5px;white-space:nowrap} .nearby-choice-distance i{font-style:normal;color:var(--ui-accent);font-size:10px;font-weight:750} @media(max-width:699px){.scan-art-card{aspect-ratio:1.8/1;border-radius:18px}.scan-art-card img{object-position:68% center}} #app.home-image .topbar{display:none!important} #app.home-image .tabbar{display:flex!important} #app.home-image .view{display:flex;flex-direction:column;overflow:auto;padding:0!important} #app.home-image .home-page{width:100%;min-height:100%;display:flex;flex-direction:column;background:#fff} .home-scene{position:relative;flex:1 1 auto;min-height:320px;height:auto;max-height:none;background:#85cbf5 url('../images/home/mountain-landscape.png') center 50%/cover no-repeat;isolation:isolate} .home-scene:after{content:"";position:absolute;inset:auto 0 0;height:9%;background:linear-gradient(transparent,rgba(30,65,112,.08));pointer-events:none} .home-brand{top:max(22px,env(safe-area-inset-top));left:22px;gap:9px;color:#25283b;font-family:"Zhi Mang Xing","Ma Shan Zheng","STKaiti",KaiTi,"Kaiti SC",serif;font-size:30px;font-weight:500;letter-spacing:0} .home-brand img{width:82px;height:62px;object-fit:contain;order:0;margin:-10px -17px -11px -20px} .home-brand{flex-direction:column;align-items:center;gap:0} .home-brand span{font:800 10px/1 -apple-system,BlinkMacSystemFont,Arial,sans-serif;letter-spacing:.2em;margin:7px 0 0 2px;padding:3px 6px;border:1px solid rgba(37,40,59,.8);border-radius:3px;background:rgba(255,255,255,.78)} /* 顶栏左上角：logo 在上、小字"回主页"在 logo 下面（原来是并排、字还大，跟页面标题抢视线）。 logo 不再用 transform:scale 放大——那样布局盒仍是 28px，小字居中会对不齐， 直接写放大后的尺寸。 */ /* logo + 回主页：图在上、小字在下。 图片用裁掉透明边的 logo-mark.png（原图 1470×1070 的画布里有 18% 透明边， 不裁的话图形下方那截空白会把"回主页"顶得更远）。 */ .topbar .home-return{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:0 3px 3px 0;color:#253044;line-height:1} .topbar .home-return img{display:block;width:36px;height:29px} .topbar .home-return span{color:#31465c;font-size:9px;font-weight:400;letter-spacing:.02em;line-height:1} /* 顶栏骨架：三列网格 —— 左列返回键（只有二级及更深页面才有）、中列 logo+回主页 居中、 右列消息入口。中列固定居中，所以左列有没有按钮都不影响 logo 的位置。 */ .topbar .row-between{display:grid;grid-template-columns:44px 1fr 44px;align-items:start;gap:6px} .topbar .row-between .back{grid-column:1;justify-self:start} .topbar .row-between .home-return{grid-column:2;justify-self:center} .topbar .row-between .top-actions{grid-column:3;justify-self:end;position:static;right:auto;top:auto;display:flex;gap:9px} .home-sun{right:12%;top:19%;width:clamp(48px,10vw,92px);background:#ffb76f;opacity:.96;box-shadow:none} .home-hiker{display:block;position:absolute;z-index:1;left:clamp(-15px,6vw,11%);bottom:-7%;width:clamp(320px,42vw,640px);max-height:84%;object-fit:contain;object-position:bottom;filter:none} .home-content{position:relative;z-index:2;width:min(100% - 38px,1040px);padding:17px 0 19px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,370px);gap:14px 32px;align-items:center} .home-copy h1{font-family:"Zhi Mang Xing","Ma Shan Zheng","STKaiti",KaiTi,"Kaiti SC",serif;font-size:clamp(42px,7vw,72px);font-weight:500;line-height:1.04;letter-spacing:.01em;color:#25283b;margin:0 auto;text-align:center} .home-copy h1:after{content:"";display:block;width:78%;height:9px;margin:3px 0 0 5%;background:url('../assets/decor/pink-underline.svg') center/100% 100% no-repeat} .home-copy p{font-size:clamp(15px,2vw,21px);color:#59657c;margin:11px 0 0} /* 首页网格：文案与主按钮在左，到访摘要与两个榜单在右。 文案块必须 align-self:start——榜单（右列）变高会把整行撑高， 居中的话主按钮会被挤到第二屏。 */ .home-content>.home-copy{align-self:start} .home-actions{grid-column:2;grid-row:1 / span 2;display:grid;gap:10px;min-width:0;align-self:start;padding-top:6px} .home-primary{min-height:58px;border-radius:999px;background:#ff5298;color:#fff;box-shadow:none;font-size:19px} .home-primary .ico{width:24px;height:24px} .home-featured{margin:0;min-height:58px;padding:10px 14px;gap:9px;background:#f3f8fa;border:0;border-radius:18px} .home-featured .ico{width:23px;height:23px}.home-featured strong{font-size:14px}.home-featured span{font-size:11px}.home-featured b{font-size:22px} /* 首页"扫码打卡 / 附近定位打卡"这一块（.home-copy 就是它所在的模块）： 白底改成磨砂玻璃，并往上压住山景的底边——玻璃里能隐约看见山、湖和徒步者。 做法与路书页那张"找路线"卡一致：白纱只留 .44→.26 + 16px 模糊， 可读性靠模糊（白纱只补底）；不支持 backdrop-filter 的浏览器退回 .9 白。 面板比白色内容块更宽、更高，把内容块那条直边盖在下面，接缝看不出来。 */ .home-copy{position:relative;z-index:3;border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.22)); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,.62); box-shadow:0 12px 30px rgba(14,45,72,.16)} @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .home-copy{background:rgba(255,255,255,.92)} } /* 系统开了"降低透明度"：玻璃退成实底，别硬做半透明 */ @media(prefers-reduced-transparency:reduce){ .home-copy{background:rgba(255,255,255,.94)} } /* 玻璃里的两行说明字要压深一档，才顶得住背后的山色 */ .home-copy p{color:#4f5c72} /* 附属按钮原来是全透明的幽灵按钮，落在玻璃上会看不清边界；给一层半透明白 */ .home-actions .btn.ghost{background:rgba(255,255,255,.58);border-color:rgba(96,124,110,.42)} /* 路书页顶部那条线路：名字用打字机逐字打（每 4 秒换一条，逻辑在 app.js startListFeatured）。 光标只在打字时出现；系统"减少动态效果"时只留静态文字。 */ .tbf-link{display:block;color:inherit;text-decoration:none} /* 名字长度每 4 秒变一次：固定成两行高度、文字贴下对齐， 短名字不会留空档，长名字换行也不会把"找路线"按钮顶得上下跳。 */ .trailbook-feature h2{min-height:2.4em;display:flex;align-items:flex-end} .tbf-caret{display:none;width:2px;height:.86em;margin-left:3px;background:#073b4b;vertical-align:-.06em} .tbf-link.is-typing .tbf-caret{display:inline-block;animation:tbfBlink 1s steps(1,end) infinite} @keyframes tbfBlink{50%{opacity:0}} @media(prefers-reduced-motion:reduce){ html:not(.force-motion) .tbf-link.is-typing .tbf-caret{animation:none} } /* 首页"扫码打卡"下面那条线路信息：每 3 秒翻牌换下一条。结构与既有 CSS 全部复用， 换场动画加在内层 .hf-text 上（下面这些 .home-featured .hf-* 规则负责把 既有 `.home-featured span{color:...}` 的影响收回，别让线路名变灰）。 */ .home-featured .hf-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0; color:inherit;font-size:inherit} .home-featured .hf-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#282c40} .home-featured .hf-meta{color:#777d90} /* 翻牌：绕 X 轴翻下去 → 在翻面时换内容 → 翻回来 */ .hf-flip{perspective:520px} .hf-flip .hf-text{transform-origin:center center;backface-visibility:hidden; transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .28s ease} .hf-flip.is-swapping .hf-text{transform:rotateX(-88deg);opacity:.12} /* 系统开了"减少动态效果"就降级成瞬切；`?motion=1` 预览时 html 上有 .force-motion， 这些规则让位，动画照播（见 app/js/app.js 的 forceMotion）。 */ @media(prefers-reduced-motion:reduce){ html:not(.force-motion) .hf-flip .hf-text{transition:none} html:not(.force-motion) .hf-flip.is-swapping .hf-text{transform:none;opacity:1} } #app.home-image .tabbar{background:#fff;border-color:#edf4f8;box-shadow:none} #app.home-image .tabbar .scan-btn{background:#ff5298;box-shadow:none} #app.home-image .tabbar .scan em{color:#ff5298} @media(min-width:700px){.home-scene{min-height:clamp(420px,65vh,850px);background-position:center 49%}.home-brand{left:max(32px,calc((100vw - 1160px)/2))}.home-hiker{left:max(-25px,calc((100vw - 1200px)/2));bottom:-8%;width:clamp(390px,38vw,650px)}} /* Route book illustration header: the landscape sets the mood, the real trail list stays primary. */ .route-hero{position:relative;display:flex;align-items:center;min-height:190px;margin:0 -16px 5px;padding:24px 20px;overflow:hidden;background:#a7dcf8} .route-hero:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(234,248,255,.96) 0%,rgba(234,248,255,.82) 43%,rgba(234,248,255,.02) 100%);pointer-events:none} .route-hero-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 42%} .route-hero-copy{position:relative;z-index:2;max-width:62%} .route-hero h1{max-width:11em;color:#25283b;font-size:clamp(23px,5.8vw,34px);line-height:1.2;font-weight:900;letter-spacing:-.03em} .route-hero p{margin:9px 0 0;color:#45556b;font-size:13px;font-weight:600} #app[data-page="trails"] .sec-head:first-of-type{margin-top:17px} /* Two distinct mountain roles, one shared card structure. */ .kingcard,.kingcard.npc{isolation:isolate;min-height:166px;margin:14px 0 16px;padding:17px 16px;overflow:hidden;border:0;border-radius:24px;box-shadow:none;color:#25283b;background:#e7f7ff url('../images/home/mountain-landscape.png') right 47%/auto 150% no-repeat} .kingcard:before{inset:0;width:auto;height:auto;border:0;border-radius:0;background:linear-gradient(90deg,#eaf8ff 0%,rgba(234,248,255,.97) 47%,rgba(234,248,255,.2) 100%);pointer-events:none} .kingcard:after{display:none} .kingcard.npc{background-color:#e5f7f4} .kingcard.npc:before{background:linear-gradient(90deg,#eaf9f6 0%,rgba(234,249,246,.96) 47%,rgba(234,249,246,.12) 100%)} .kingcard .kk-ridge{height:42px;opacity:.28} .kingcard .kk-ridge svg path{fill:#36a781!important} .kingcard.npc .kk-ridge svg path{fill:#45b7b0!important} .kingcard .kk-tx{max-width:68%;padding:0} .kingcard .kk-big,.kingcard:not(.npc) .kk-big,.kingcard.npc .kk-big{font-size:34px;line-height:1.12;letter-spacing:-.04em;color:#25283b;-webkit-text-stroke:0;text-shadow:none;transform:none;font-weight:900;white-space:normal} .kingcard.npc .kk-big{font-size:28px;line-height:1.04} .kingcard.npc .kk-line-big{font-size:1.16em;letter-spacing:0} .kingcard.npc .kk-line em{font-size:.72em;letter-spacing:-1px} .kingcard .kk-sub,.kingcard .kk-sub:first-of-type,.kingcard:not(.npc) .kk-sub:first-of-type,.kingcard.npc .kk-sub:first-of-type{margin-top:6px;color:#4b5a70;font-size:11.5px;line-height:1.45} .kingcard .kk-imp,.kingcard:not(.npc) .kk-imp,.kingcard.npc .kk-imp{position:absolute;z-index:2;right:4px;top:auto;bottom:0;width:37%;height:100%;display:flex;justify-content:flex-end;align-items:flex-end;gap:0;pointer-events:none} .kingcard .kk-mascot,.kingcard:not(.npc) .kk-mascot,.kingcard.npc .kk-mascot{width:100%;height:136px;margin:0;object-fit:contain;object-position:center bottom;filter:none} .kingcard .kk-say,.kingcard.npc .kk-say{display:none} .kingcard .kk-go,.kingcard:not(.npc) .kk-go,.kingcard.npc .kk-go{position:relative;top:auto;right:auto;align-self:flex-start;margin:10px 0 0;padding:0;border:0;color:#238b70;font-size:11px;transform:none} .kingcard.npc .kk-go{color:#218f88} .kingcard .kk-go i{font-size:15px} .kingcard:hover,.kingcard.npc:hover{box-shadow:none;filter:brightness(.99)} .kingcard:active{transform:scale(.985)} @media(max-width:699px){ #app.home-image .view{overflow:hidden} #app.home-image .home-page{min-height:0;height:100%;} .home-scene{flex:1 1 auto;min-height:0;height:56%;max-height:none;background-position:54% center} .home-brand{top:max(18px,env(safe-area-inset-top));left:20px;font-size:27px} .home-brand img{width:92px;height:70px;margin:-13px -18px -15px -23px} .home-brand span{font-size:10px;margin-top:8px} .home-hiker{left:-10%;bottom:-5%;width:76%;max-height:75%} .home-content{flex:0 0 auto;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:5px 20px 17px;text-align:center;background:#fff} /* 手机上玻璃面板整幅出血（抵消内容块的 20px 内边距）并上提 118px： 上沿压在山景上，内容块那条白色直边整个被压在面板下面。 选择器要写 `.home-content>.home-copy`：`.home-content>.home-copy{align-self:start}` 比单个类名权重高，否则面板会被压成"内容宽度"那么窄。 */ .home-content>.home-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center; width:auto;align-self:stretch;margin:-132px -20px 0;padding:18px 20px 20px;border-radius:28px 28px 0 0} .home-copy h1{font-size:clamp(43px,12vw,56px);font-weight:900;line-height:1.05;margin:0 auto} .home-copy h1:after{width:56%;height:8px;margin:0 auto} .home-copy p{font-size:14px;margin:9px 0 16px} .home-actions{display:flex;flex-direction:column;width:100%;gap:9px} .home-primary{width:100%;min-height:54px;font-size:18px} .home-featured{width:100%;min-height:48px;justify-content:flex-start;text-align:left;padding:8px 13px;border-radius:16px} .home-featured strong{font-size:13px} .home-featured span{font-size:11px} .route-hero{min-height:176px;margin-top:-17px;padding:20px 16px} .route-hero-copy{max-width:64%} .route-hero h1{font-size:25px} .route-hero p{font-size:11.5px;max-width:19em} .route-hero-art{object-position:67% 40%} } @media(prefers-reduced-motion:reduce){.kingcard,.home-primary{transition:none}} /* Content heading rhythm across route, place, message and profile views. */ #app:not(.home-image) .view .sec-head{align-items:center;gap:12px;margin:26px 0 12px;min-height:27px} #app:not(.home-image) .view .sec-head h3{min-width:0;margin:0;color:#253044;font-size:18px;font-weight:800;line-height:1.35;letter-spacing:-.025em} #app:not(.home-image) .view .sec-head .more, #app:not(.home-image) .view .sec-head > span, #app:not(.home-image) .view .sec-head > a{flex:0 0 auto;color:#718096;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap} #app:not(.home-image) .view .sec-head h3 small{display:inline-block;margin-left:8px;color:#7b8798;font-size:11px;font-weight:500;letter-spacing:0;vertical-align:2px} #app:not(.home-image) .view .group-label{margin:24px 0 8px;color:#69778b;font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.06em} #app:not(.home-image) .view .group-label + .sec-head{margin-top:0} #app:not(.home-image) .view .peak-story h3{margin-bottom:8px;color:#253044;font-size:16px;font-weight:800;line-height:1.4;letter-spacing:-.02em} @media(max-width:699px){ #app:not(.home-image) .view .sec-head{margin-top:22px;margin-bottom:10px} #app:not(.home-image) .view .sec-head h3{font-size:17px} #app:not(.home-image) .view .group-label{margin-top:20px} } /* Trailbook reference hero. Scoped classes preserve the shared app styles. */ /* 手机：标题占顶部，山景插画从标题下方一直铺到 hero 底边，"找路线"卡片浮在山景上， 磨砂玻璃背后就是那片山（之前卡片是排在插画下面、压在平涂底色上的，玻璃等于没东西可磨）。 标题那块底色 #8fe4fd 取自插画最上面一行的天空色，两者同一个色号， 边界看不出来；取不到图时也只是干净的蓝天。 */ .trailbook-intro{position:relative;isolation:isolate;overflow:hidden;margin:-17px -16px 24px;background:#8fe4fd;color:#073b4b;min-height:480px;height:calc(100svh - 180px);display:flex;flex-direction:column} .trailbook-copy{position:relative;z-index:2;padding:20px 20px 0;background:#8fe4fd} .trailbook-brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:850;line-height:1.2} .trailbook-brand img{display:block;width:44px;height:40px;object-fit:contain} .trailbook-copy h1{font-family:'Ma Shan Zheng','STKaiti',KaiTi,serif;font-weight:500;font-size:clamp(38px,10.5vw,56px);line-height:1.25;text-align:center;white-space:nowrap;margin:25px 0 8px} .trailbook-copy h1:after{content:'';display:block;width:83px;height:9px;margin:0 auto;background:#ffdf4d;border-radius:70% 50%;transform:rotate(-7deg)} .trailbook-landscape{position:relative;overflow:hidden;flex:1;min-height:220px} .trailbook-landscape img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top} /* 找路线模块：磨砂玻璃，贴 hero 底边浮在山景上。 白纱只留很薄一层（.44→.26）+ 16px 模糊：山形、树林、路径隐约透出来， 但名字与里程仍然压得住——模糊是主要的可读性来源，白纱只是补一点底。 不支持 backdrop-filter 的浏览器没有模糊可依，直接退回 .9 白（可读优先）。 */ .trailbook-feature{position:absolute;z-index:3;left:14px;right:14px;bottom:18px;padding:18px 20px;border-radius:23px; background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.26)); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,.62); box-shadow:0 12px 30px rgba(7,59,75,.16)} @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .trailbook-feature{background:rgba(255,255,255,.9)} } .trailbook-feature h2{font-family:'Ma Shan Zheng','STKaiti',KaiTi,serif;font-size:30px;font-weight:500;line-height:1.2} .trailbook-feature p{color:#4f5c72;font-size:clamp(12px,3.7vw,17px);line-height:1.5;margin:6px 0 13px} .trailbook-find{display:block;width:100%;min-height:50px;border-radius:999px;background:#ff5676;color:white;font-weight:750;font-size:18px; transition:transform 120ms cubic-bezier(.23,1,.32,1),background 120ms ease} .trailbook-find:active{background:#ed4566} .route-hero.route-hero-bottom{margin-top:28px;margin-bottom:0} @media(min-width:700px){ /* 桌面：整张插画当 hero 的底（左栏标题、左下卡片都压在图上）， 下面那个 .trailbook-landscape 只当版式占位，不再重复画一张图。 */ .trailbook-intro{margin:0 0 28px;min-height:560px;height:auto;border-radius:22px;display:grid;grid-template-columns:43% 57%;grid-template-rows:1fr auto; background:#8fe4fd url('../images/home/trailbook-hero.png') center top/cover no-repeat} .trailbook-copy{grid-column:1;grid-row:1;padding:35px 28px 0;background:transparent;align-self:start} .trailbook-copy h1{font-size:clamp(34px,4.4vw,58px);white-space:normal;text-wrap:balance;text-align:left;margin-top:52px} .trailbook-copy h1:after{margin-left:50px;width:112px;height:11px} .trailbook-brand{font-size:28px} .trailbook-landscape{grid-column:2;grid-row:1 / 3;min-height:560px;width:100%;height:100%} .trailbook-landscape img{display:none} /* 桌面：卡片回到左栏底部（不是贴底通栏），背后仍是那块整铺的插画，玻璃里透出来的还是山。 */ .trailbook-feature{position:relative;left:auto;right:auto;bottom:auto;grid-column:1;grid-row:2;margin:25px 24px 30px;padding:24px;align-self:end} .trailbook-feature h2{font-size:34px} .trailbook-feature p{font-size:15px} .trailbook-find{min-height:55px;font-size:20px} .route-hero.route-hero-bottom{margin-left:0;margin-right:0;border-radius:18px} } @media(max-width:360px){.trailbook-copy h1{font-size:35px}.trailbook-feature{padding:16px}.trailbook-feature p{font-size:12px}} /* Light visual headers for the social and personal surfaces. */ .page-quote-hero{position:relative;isolation:isolate;display:flex;align-items:center;height:142px;min-height:142px;margin:0 0 18px;overflow:hidden;border-radius:18px;background:#4d91c1} .page-quote-hero .quote-landscape{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 49%} .page-quote-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(21,57,86,.68),rgba(21,57,86,.35) 54%,rgba(21,57,86,.04))} .page-quote-hero blockquote{max-width:72%;margin:0;padding:20px 22px;color:#fff;font-size:17px;font-weight:800;line-height:1.5;letter-spacing:-.015em;text-shadow:0 1px 4px rgba(18,48,70,.18)} .page-quote-hero.me .quote-landscape{object-position:center 48%} .page-quote-hero.me:after{background:linear-gradient(90deg,rgba(21,57,86,.62),rgba(21,57,86,.3) 56%,rgba(21,57,86,.02))} .page-quote-hero .quote-hiker{position:absolute;z-index:0;right:1.5%;bottom:-13%;width:37%;height:120%;object-fit:contain;object-position:center bottom;pointer-events:none} .page-quote-hero.me blockquote{max-width:65%;z-index:1} /* Hot-route cards give the real terrain track the full card width. */ .trailcard .tc-mid{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:10px} .trailcard .trk-tc{display:block;width:100%;height:124px;border:0;border-radius:14px} .trailcard .trk-tc svg{width:100%!important;height:100%!important} .trailcard .tc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:none} .trailcard .tcs{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;padding:1px 0} .trailcard .tcs span{font-size:10px} .trailcard .tcs b,.trailcard .tcs b.who{font-size:12px} @media(min-width:700px){ .page-quote-hero{height:180px;min-height:180px;border-radius:22px;margin-bottom:22px} .page-quote-hero blockquote{padding:28px 30px;font-size:21px} .page-quote-hero .quote-hiker{width:31%;height:136%;right:4%;bottom:-19%} .trailcard .trk-tc{height:148px} } @media(max-width:380px){ .page-quote-hero{height:128px;min-height:128px} .page-quote-hero blockquote{max-width:76%;padding:16px;font-size:15px} .page-quote-hero.me blockquote{max-width:67%} .page-quote-hero .quote-hiker{right:-2%;width:43%;height:112%} .trailcard .trk-tc{height:112px} } /* Home discovery and independent place navigation. */ #app.home-image .view{overflow-y:auto!important} #app.home-image .home-page{height:auto;min-height:100%;flex:0 0 auto} #app.home-image .home-scene{flex:0 0 auto;height:clamp(300px,52svh,650px);min-height:300px} .home-scene>.message-entry{position:absolute;z-index:4;right:20px;top:max(20px,env(safe-area-inset-top));width:38px;height:38px} .home-content{width:min(100% - 48px,960px);grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:24px 48px;padding:24px 0 32px} .home-copy h1{text-align:left}.home-copy h1:after{margin-left:4px}.home-copy p{line-height:1.8} .home-core{grid-column:2;grid-row:1;display:grid;gap:9px} .home-core-item{display:flex;align-items:center;gap:13px;min-height:66px;padding:10px 14px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s ease} /* 悬停位移只在真有鼠标的设备上做：触屏点一下会先触发 hover，再叠按压，看着像抖了一下 */ @media(hover:hover)and(pointer:fine){.home-core-item:hover{border-color:#a9c1ad;transform:translateY(-1px)}} .home-core-item:active{transform:scale(.985)} .home-core-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--blue-bg);color:var(--blue-deep)} .home-core-icon .ico{width:22px;height:22px;stroke:currentColor}.home-core-item>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0} .home-core-item b{font-size:15px;color:var(--blue-deep)}.home-core-item small{font-size:12px;color:var(--ink2)}.home-core-item>i{margin-left:auto;color:var(--ink3);font-size:22px;font-style:normal} .home-core-scan .home-core-icon{background:var(--coral);color:#fff} .places-page{max-width:940px;margin:0 auto} .places-seg{max-width:440px;margin:0 auto 18px;padding:4px;background:#e6ebe1} .places-seg button{min-height:42px;font-size:14px}.places-page .kingcard{margin-top:0} .board-page{max-width:940px;margin:0 auto}.board-intro{position:relative;padding:24px 25px;margin:0 0 18px;overflow:hidden;border-radius:19px;background:#e7eee3} .board-intro:after{content:"";position:absolute;right:-30px;bottom:-88px;width:270px;height:190px;border-radius:55% 0 0;background:linear-gradient(140deg,transparent 35%,#c6d8c1 36% 52%,transparent 53%),linear-gradient(30deg,transparent 38%,#9bb9a0 39% 58%,transparent 59%);opacity:.45;pointer-events:none} .board-intro h1{margin:5px 0 4px;color:var(--blue-deep);font-size:clamp(26px,4vw,36px);line-height:1.15;letter-spacing:-.04em}.board-intro p{margin:0;color:var(--ink2);font-size:14px} .board-write{position:absolute;z-index:1;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:11px 14px;border:0;border-radius:999px;background:var(--coral);color:white;font-weight:750;cursor:pointer} .board-write b{font-size:18px;line-height:1}.board-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px} .board-follow{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.board-follow button{flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink2);font:600 12px inherit;cursor:pointer} .board-follow button.on{border-color:#a9c1ad;background:var(--blue-bg);color:var(--blue-deep)}.board-sort{display:flex;align-items:center;gap:6px;flex:none;color:var(--ink2);font-size:12px} .board-sort select{padding:7px 24px 7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:600 12px inherit} .board-count{margin:0 2px 11px;color:var(--ink3);font-size:12px}.board-waterfall{columns:2;column-gap:14px}.board-note{display:inline-block;width:100%;break-inside:avoid;margin:0 0 14px;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow)} .board-note-top{display:flex;align-items:center;gap:9px}.board-note-top>div{display:flex;flex-direction:column;gap:1px}.board-note-top b{font-size:13px}.board-note-top small{color:var(--ink3);font-size:11px}.board-mine{margin-left:auto;color:var(--coral);font-size:11px;font-weight:700} .board-note>p{margin:13px 0 15px;font-size:14px;line-height:1.75;overflow-wrap:anywhere}.board-place{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;background:#f0f4f1;color:var(--blue-deep);text-decoration:none} .board-place>.ico{width:18px;height:18px;stroke:var(--blue)}.board-place span{display:flex;flex:1;min-width:0;flex-direction:column}.board-place b{font-size:12px}.board-place small{overflow:hidden;color:var(--ink3);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.board-place i{font-size:18px;font-style:normal} .board-note-foot{display:flex;justify-content:space-between;align-items:center;padding-top:11px;color:var(--ink3);font-size:11px}.board-note-foot button{border:0;background:none;color:var(--ink2);font:inherit;cursor:pointer}.board-empty a{color:var(--blue);font-weight:700} @media(max-width:699px){.home-content{display:flex;width:100%;flex-direction:column;align-items:stretch;padding:10px 20px 28px;text-align:left}.home-copy{align-items:flex-start}.home-copy h1{font-size:46px}.home-copy p{margin:8px 0 15px;font-size:14px}.home-core{display:grid;grid-template-columns:1fr 1fr;gap:8px}.home-core-item{min-height:86px;align-items:flex-start;flex-wrap:wrap;gap:7px;padding:11px}.home-core-icon{flex-basis:34px;width:34px;height:34px;border-radius:10px}.home-core-icon .ico{width:19px;height:19px}.home-core-item>span:nth-child(2){flex-basis:calc(100% - 42px)}.home-core-item b{font-size:13px}.home-core-item small{font-size:10.5px;line-height:1.4}.home-core-item>i{display:none}.board-intro{padding:20px 18px 78px}.board-intro:after{right:-55px}.board-write{left:18px;right:auto;bottom:15px;padding:9px 13px}.board-controls{align-items:flex-start;flex-direction:column;gap:10px}.board-follow{width:100%}.board-sort{align-self:flex-end}.board-waterfall{columns:2;column-gap:9px}.board-note{padding:11px;margin-bottom:9px;border-radius:13px}.board-note>p{font-size:13px;line-height:1.65}.board-place{gap:5px;padding:8px}.board-note-top .av{flex:none}} @media(max-width:360px){.home-core{grid-template-columns:1fr}.home-core-item{min-height:62px;align-items:center;flex-wrap:nowrap}.home-core-item>span:nth-child(2){flex-basis:auto}.board-waterfall{columns:1}} @media(min-width:700px){#app[data-page="board"] .view{width:min(100%,1000px)}#app[data-page="board"] .topbar{padding-left:max(28px,calc((100vw - 944px)/2));padding-right:max(28px,calc((100vw - 944px)/2))}} #app.home-image .topbar{display:flex}#app.home-image .topbar.home{background:#e4f5fd;border-bottom:1px solid #d9eff9}#app.home-image .topbar.home .top-actions{display:flex;gap:9px} @media(min-width:700px){ #app.home-image .home-scene{height:clamp(420px,58vh,650px)} .home-scene>.message-entry{right:max(32px,calc((100vw - 1160px)/2));top:28px} } @media(min-width:700px){ .home-content .home-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px} .home-content .home-actions .home-primary{order:0;width:100%;min-height:58px} .home-content .home-actions .home-featured{order:1;width:100%;min-height:58px} /* 桌面：同一块玻璃，上提 92px 压住山景底边；限制宽度，别把徒步者盖住太多 */ .home-copy{margin:-120px 0 0;max-width:560px;padding:26px 28px 28px} .home-copy p{margin:10px 0 18px} } .board-write{text-decoration:none} .home-core-title{grid-column:1 / -1;margin:0 0 5px;text-align:left;font-size:20px;line-height:1.4;color:var(--ink);font-weight:800} .home-copy .home-actions{width:100%;margin-top:18px;grid-column:auto;grid-row:auto} @media(max-width:699px){.home-copy .home-actions{margin:0 0 24px}.home-core-title{font-size:18px;margin-bottom:5px}} /* Mountain conversation: context outside, one readable strip inside. */ .board-mountains{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.board-mountains label{display:grid;gap:7px;font-size:12px;color:var(--ink2);font-weight:600}.board-mountains input,.board-mountains select{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit} .board-waterfall{columns:1;max-width:820px;margin:auto}.board-thread{break-inside:avoid;margin-bottom:24px}.board-mountain-name{display:flex;gap:8px;align-items:center;margin:0 4px 9px;color:var(--blue-deep);font-size:14px;font-weight:700}.board-mountain-name .ico{width:19px;height:19px;stroke:currentColor}.board-thread .board-note{display:block;margin:0;padding:20px 24px 0;border:1px solid var(--line);border-radius:14px;box-shadow:none}.board-thread .board-note>p{font-size:16px;line-height:1.8;margin:16px 0 12px;white-space:pre-wrap}.board-time{display:block;text-align:right;font-size:12px;color:var(--ink3);margin:0 0 14px}.board-interactions{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);min-height:48px}.board-interactions button{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:var(--ink2);font-size:13px}.board-interactions button:first-child{justify-content:flex-start}.board-interactions button:last-child{justify-content:flex-end}.board-interactions .ico{width:18px;height:18px;stroke:currentColor}.board-interactions button:hover{color:var(--coral)}.board-replies{border-top:1px solid var(--line);padding:4px 0 20px}.board-reply{padding:14px 0;border-bottom:1px solid var(--hair)}.board-reply b{font-size:13px}.board-reply p{margin:7px 0;white-space:pre-wrap;overflow-wrap:anywhere}.board-reply time{display:block;text-align:right;font-size:11px;color:var(--ink3)}.board-reply-label{display:block;margin:18px 0 8px;font-size:13px;font-weight:600}.board-replies textarea{width:100%;min-height:80px;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical}.board-replies>.btn{width:auto;min-height:40px;margin-top:10px;padding:8px 20px} @media(max-width:699px){.board-thread .board-note{padding:16px 16px 0}.board-mountains{gap:9px}.board-thread{margin-bottom:20px}.board-intro h1{font-size:28px}} /* 小标字（留言版 intro 的 "MOUNTAIN NOTES"）。原本和已删除的 .places-heading span 共用一条规则， 拆成独立规则，别让删旧标题蹭掉它的样式。 */ .eyebrow{color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.12em} /* ============ 按压反馈（全站统一）============ 前提：app.css 里 `*{-webkit-tap-highlight-color:transparent}` 已经关掉了系统自带的 触摸高亮，所以"按下去有没有反应"完全靠这里——按下没有反馈的按钮，手指会以为没点中。 规则（沿用 emil 的按钮规范）：只动 transform 与底色，140ms + 自定义 ease-out 曲线 cubic-bezier(.23,1,.32,1)（比内置 ease-out 更有"手感"）；不加入场、呼吸、弹跳这类 装饰动画。力度按"面"的大小分三档： A 小控件：按钮 / 图标 / 分页 / chip / 标签 / 独立链接 → 缩 3% B 大块面：卡片、整行卡片、hero 里那条线路 → 缩 1.5%（大面积缩 3% 会晃） C 贴在大面里的条目：榜单行、卡片里的行、分段控件里的按钮 → 只变底色。 这些条目自己没有"面"，缩放会在卡片/轨道里露出缝。 已经有自己过渡的元素（.btn / .kingcard / .home-core-item / .trailbook-find）不重复声明。 */ /* A：小控件 —— 任何能点的 /