/* ============================================================ 谷勒大宅 — 基础样式（手机优先） 全屏图片 / 错落悬浮卡片 / 玻璃拟态，按参考板式 1:1 还原 ============================================================ */ :root{ /* base surfaces */ --bg: #07070A; --ink: #FFFFFF; --ink-2: rgba(255,255,255,.62); --ink-3: rgba(255,255,255,.42); --ink-4: rgba(255,255,255,.24); /* glass / card */ --glass: rgba(255,255,255,.055); --glass-2: rgba(255,255,255,.085); --stroke: rgba(255,255,255,.10); --stroke-2: rgba(255,255,255,.16); /* accents */ --gold: #C9A46A; --amber: #D8A94F; --amber-soft: rgba(216,169,79,.16); --terra: #C4703F; /* * 档期状态色。绿色 = 「可预约」，语义上用青瓷玉绿而不是标准 UI 绿 * （#4CAF50 这类饱和绿在近黑 + 暖金的系统里会显廉价）。 * 将来档期吃紧可回落到 --amber，约满用 --terra，形成一套状态语言。 */ --jade: #6FBF9F; --jade-soft: rgba(111,191,159,.15); /* geometry */ --pad: 18px; --radius-l: 26px; --radius-m: 20px; --radius-s: 15px; --tabbar-h: 56px; --ease: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); /* stops-rail geometry — the connecting line is derived from these */ --node-cap-h: 22px; --node-dot: 11px; --node-dot-mt: 11px; --font-ui: "Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --font-disp: "Cormorant Garamond","Instrument Serif","Noto Serif SC",Georgia,serif; --font-serif-cn: "Noto Serif SC","Songti SC",serif; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; background:#000; color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overscroll-behavior:none; } body{ display:flex; align-items:center; justify-content:center; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } img{ display:block; width:100%; height:100%; object-fit:cover; } /* -------------------------------------------------------------------- 图片淡入 / 区块入场：**默认可见，只有确认 JS 可用时才隐藏**。 这两条如果写成无条件 opacity:0，一旦 JS 报错（旧内核最容易踩的 就是语法不兼容），页面就永远停在「全部透明」的状态 —— 配合黑色 底就是又一次「黑屏」。 开关是 html 上的 .gq-js，由 里一段纯 ES5 内联脚本加上。 内联脚本没有语法门槛，任何内核都能执行，所以只要浏览器能跑脚本 就有动画；跑不了脚本则内容直接可见，不会变成空白页。 -------------------------------------------------------------------- */ html.gq-js img[data-img], html.gq-js .hero-img{ opacity:0; transition:opacity .9s var(--ease-soft); } html.gq-js img.is-loaded, html.gq-js .hero-img.is-loaded{ opacity:1; } /* ---- phone frame ---------------------------------------------------- */ .app{ position:relative; /* ------------------------------------------------------------------ ⚠ 兼容性红线 —— 这一段曾经造成手机端「黑屏」故障，不要改回去。 min() 需要 Chrome 79+，dvh 需要 Chrome 108+。百度(T7)、夸克(U4) 这类旧内核会把这两条声明整条丢弃，于是 .app 既没有宽度也没有 高度；而它内部的子元素全部是 position:absolute（不贡献固有 尺寸），.app 因此塌成 0×0，再被 overflow:hidden 一裁， 整页只剩 html/body 的黑色底色 —— 表现就是「整屏纯黑」。 微信/QQ 用的是较新的 XWeb/X5 内核，两条声明都生效，所以显示正常。 正确做法：尺寸用全平台通吃的 width/max-width/height(vh) 打底， min() 与 dvh 只作为「支持的浏览器上的增强」，写在 @supports 里。 ------------------------------------------------------------------ */ width:430px; max-width:100%; height:100vh; max-height:932px; flex:0 0 auto; background:var(--bg); overflow:hidden; isolation:isolate; } /* 支持 dvh 的内核：修正移动端地址栏收放时的高度跳动 */ @supports (height:100dvh){ .app{ height:100dvh; } } @media (min-width:520px){ body{ background:#0B0B0D; } .app{ height:100vh; max-height:900px; border-radius:44px; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 60px 120px -30px rgba(0,0,0,.9); } @supports (height:100dvh){ .app{ height:min(100dvh, 900px); } } /* keep the ambient wash from bleeding past the rounded frame */ .app::before{ border-radius:inherit; } } /* 顶部状态栏底衬。 这里原本是一条 30px 的纯黑渐变，首屏照片顶上因此压着一条黑边 —— 手机端尤其刺眼，整页像被切掉一块。现在只保留极淡的一层， 够状态栏文字读得清就行，不再形成「黑屏」。 */ .app::after{ content:""; position:absolute; top:0; left:0; right:0; /* env() 需要 Chrome 69+；旧内核会给一个不带头条的高度，先兜底 */ height:22px; height:calc(22px + env(safe-area-inset-top,0px)); z-index:2; background:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 50%, transparent 100%); pointer-events:none; } /* ambient warm wash behind everything */ .app::before{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:0; background: radial-gradient(120% 55% at 78% 4%, rgba(201,164,106,.14), transparent 62%), radial-gradient(90% 40% at 8% 30%, rgba(90,70,140,.10), transparent 70%); pointer-events:none; } /* ---- scroll container ---------------------------------------------- */ .scroll{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:calc(var(--tabbar-h) + 34px); padding-bottom:calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom,0px)); } .scroll::-webkit-scrollbar{ display:none; } /* 内页顶部留白。首页由 body.gq-front 归零：首屏直接顶到最上面。 */ .status-spacer{ height:16px; height:calc(16px + env(safe-area-inset-top,0px)); } body.gq-front .status-spacer{ height:0; } /* ============================================================ SITE HEAD — 全站站点标识 首页由 CSS 绝对定位到首屏左上角，浮在照片上；内页是普通页头。 同一份 DOM 贯穿全站，内页因此不再「上面光秃秃」。 ============================================================ */ .site-head{ position:relative; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--pad) 10px; } /* 首页：脱离文档流，直接压在首屏照片左上角 */ body.gq-front .site-head{ position:absolute; top:0; left:0; right:0; padding-top:calc(12px + env(safe-area-inset-top,0px)); padding-bottom:18px; } .sh-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; } .sh-mark{ flex:0 0 auto; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-family:var(--font-disp); font-size:15px; font-weight:600; letter-spacing:.01em; color:#14110C; background:linear-gradient(150deg,#EED7A9,#C9A46A); box-shadow:0 6px 18px -8px rgba(201,164,106,.7); } .sh-text{ display:flex; flex-direction:column; gap:3px; } .sh-title{ font-family:var(--font-disp); font-size:17px; font-weight:600; line-height:1; letter-spacing:-.01em; } .sh-sub{ font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.55); } /* 右上角：复制微信。 原来这里只是两个字「杭州」（纯装饰），同样一块地方改成可点的动作， 信息密度更高但体型不变 —— 一颗小玻璃胶囊，浮在照片上也压得住。 */ .sh-act{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 12px 7px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; font:inherit; font-size:10.5px; font-weight:500; letter-spacing:.06em; line-height:1; color:rgba(255,255,255,.84); background:rgba(255,255,255,.10); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 8px 20px -12px rgba(0,0,0,.8); transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .sh-act svg{ width:13px; height:13px; flex:0 0 auto; } .sh-act:active{ transform:scale(.94); background:rgba(255,255,255,.19); } /* 复制成功的短暂反馈，与脚本里的 .is-copied 呼应 */ .sh-act.is-copied{ color:#F2DCB0; border-color:rgba(232,191,126,.46); background:rgba(232,191,126,.17); } /* ============================================================ BREADCRUMB ============================================================ */ .crumb{ position:relative; z-index:5; padding:0 var(--pad); } .crumb-list{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; max-width:860px; margin-inline:auto; font-size:11.5px; line-height:1.6; color:var(--ink-4); } .crumb-item{ display:inline-flex; align-items:center; gap:8px; } .crumb-item + .crumb-item::before{ content:"›"; font-size:12px; color:rgba(255,255,255,.20); } .crumb-item a{ color:var(--ink-3); text-decoration:none; transition:color .3s var(--ease); } .crumb-item a:hover{ color:var(--gold); } .crumb-item [aria-current]{ color:rgba(255,255,255,.66); } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; /* 首屏不再一路铺到底。 ------------ 原来的 100vh 让整屏只剩左上角一小块文字，左下角空掉一大片； 现在收成「约七成屏」，底部让出的一块正好被作品卡片栈压上来， 视线从标题自然滑到卡片上 —— 这是参考版式的构图。 ⚠ 与 .app 同一套兼容策略 —— 数值用 vh / calc 打底， dvh 只做增强，否则旧内核（百度 T7 / 夸克 U4）丢掉声明后首屏会塌。 */ height:70vh; height:calc(100vh - 216px); min-height:420px; /* MUST clip: .hero-media is overscanned and the parallax pushes it further down, so without this the photo bleeds out behind the transparent sections that follow. The deck is a SIBLING of this element, so clipping here does not affect its overlap. */ overflow:hidden; z-index:3; } @supports (height:100dvh){ .hero{ height:calc(100dvh - 216px); } } .hero-media{ position:absolute; top:-6%; right:0; bottom:-10%; left:0; inset:-6% 0 -10% 0; overflow:hidden; will-change:transform; } .hero-img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; filter:saturate(1.06) contrast(1.03); } /* 左上角压暗：文案整体靠左上，所以暗部也必须压在左上。 横向从左上向右下衰减，纵向再从顶部压一层，两层叠加保证 标题、副标在任何一张照片上都读得清。 */ .hero-shade{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; /* v1.9.6 随首图从城市夜景换成浅色室内场景同步减重： 旧值（.74/.86）是按深色天际线调的，压在浅色图上会显得脏暗。 减重后标题仍由左上两层渐变兜底，图面保持高调透亮。 */ background: linear-gradient(180deg, rgba(6,7,12,.48) 0%, rgba(6,7,12,.22) 20%, rgba(6,7,12,0) 44%, rgba(7,7,10,.34) 80%, var(--bg) 100%), linear-gradient(104deg, rgba(6,7,12,.58) 0%, rgba(6,7,12,.32) 34%, rgba(6,7,12,.05) 62%, transparent 82%); } /* warm light bloom */ .hero-glow{ position:absolute; width:58%; aspect-ratio:1; right:8%; top:20%; border-radius:50%; background:radial-gradient(circle, rgba(255,214,150,.36), rgba(255,190,120,.10) 42%, transparent 68%); filter:blur(26px); mix-blend-mode:screen; pointer-events:none; } /* aspect-ratio 需要 Chrome 88+；旧内核给一个等效的固定高度 */ @supports not (aspect-ratio:1/1){ .hero-glow{ height:220px; } } /* 手写签名：落在右侧中段。 卡片栈会从首屏底部压上来，所以不能再贴着底边。 */ .hero-script{ position:absolute; right:22px; bottom:26%; z-index:2; text-align:center; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:500; font-size:19px; line-height:1.12; color:rgba(255,255,255,.94); text-shadow:0 2px 14px rgba(0,0,0,.5); transform:rotate(-6deg); pointer-events:none; } .hero-script span{ display:inline-block; padding-left:10px; } /* 文案靠左上：顶部让出站点标识（.site-head）的高度 */ .hero-inner{ position:relative; z-index:2; height:100%; padding:86px var(--pad) 26px; display:flex; flex-direction:column; justify-content:flex-start; will-change:transform,opacity; } .hero-title-wrap{ padding-bottom:0; } .hero-title{ font-family:var(--font-disp); font-weight:400; font-size:clamp(42px, 12.4vw, 53px); line-height:.98; letter-spacing:-.015em; text-shadow:0 2px 30px rgba(0,0,0,.45); } .hero-sub{ font-size:15.5px; font-weight:400; letter-spacing:.06em; color:rgba(255,255,255,.90); margin-top:9px; } .hero-date{ font-size:13px; font-weight:400; color:rgba(255,255,255,.72); margin-top:13px; } .hero-tagline{ font-family:var(--font-disp); font-style:italic; font-size:13px; line-height:1.6; color:rgba(255,255,255,.60); margin-top:13px; } /* ============================================================ NEXT-STOP LAYERED DECK (layout + animation rules live in deck.css) ============================================================ */ /* ============================================================ SECTION SHELL ============================================================ */ .sec{ padding:26px var(--pad) 0; } /* * 「合作方式」（.sec-quick，padding-bottom 为 0）与「服务流程」之间的净间距 * 就等于这里的 padding-top。原先只有 6px，实机量测下来是同页最挤的一条接缝 * （作品→合作方式 22px、服务流程→服务区域 16px），卡片底边几乎贴住标题。 * 这一块是全页信息密度最高的（时间轴 + 档期卡），留白本就该比普通节奏更大， * 所以给到 32px，而不是简单对齐 22px。 * 桌面端 ≥1024px 由 desktop.css 的 .sec.sec-stops 接管（96px），不受此值影响。 */ .sec-stops{ padding-top:32px; } .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; } .sec-title{ font-family:var(--font-disp); font-size:26px; font-weight:500; letter-spacing:-.01em; line-height:1.06; display:flex; align-items:baseline; gap:7px; } .sec-title .dot{ color:var(--ink-4); font-size:19px; } .sec-title em{ font-style:normal; font-family:var(--font-disp); } .ttl-sep{ font-family:var(--font-ui); font-size:12px; font-weight:400; color:var(--ink-3); letter-spacing:.02em; } .pill-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.14em; color:rgba(255,255,255,.86); border:1px solid var(--stroke-2); background:rgba(255,255,255,.045); backdrop-filter:blur(12px); transition:all .35s var(--ease); } .pill-btn:active{ transform:scale(.95); background:rgba(255,255,255,.11); } .pill-btn .arw{ font-size:11px; color:var(--gold); } .link-btn{ font-size:12px; font-weight:400; color:var(--ink-3); display:inline-flex; align-items:center; gap:3px; } .link-btn .arw{ font-size:14px; } /* ============================================================ STOPS CARD — timeline ============================================================ */ .stops-card{ position:relative; border-radius:var(--radius-l); background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032)); border:1px solid var(--stroke); padding:16px 8px 18px; backdrop-filter:blur(18px); overflow:hidden; } .stops-card::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; border-radius:inherit; background:radial-gradient(90% 60% at 50% 0%, rgba(201,164,106,.07), transparent 70%); pointer-events:none; } .stops-meta{ display:flex; align-items:center; justify-content:flex-end; gap:7px; padding:0 12px 0; font-size:9.5px; font-weight:600; letter-spacing:.14em; color:var(--ink-3); margin-bottom:14px; } .stops-meta .sep{ color:var(--ink-4); } .rail{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:0 6px; } .rail-line{ position:absolute; left:calc(6px + 12.5%); right:calc(6px + 12.5%); /* must pass exactly through the dot centres, so derive it from the node's own box instead of hard-coding a magic offset */ top:calc(var(--node-cap-h) + var(--node-dot-mt) + var(--node-dot) / 2); height:1px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.26) 12%, rgba(255,255,255,.26) 88%, rgba(255,255,255,.06)); } .rail-line::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:linear-gradient(90deg, transparent, rgba(216,169,79,.55) 40%, transparent); opacity:0; transition:opacity .8s var(--ease); } .scroll.is-ready .rail-line::after{ opacity:1; } .rail-node{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; opacity:0; transform:translateY(14px); animation:nodeIn .85s var(--ease) forwards; animation-delay:calc(.34s + var(--i) * .075s); } @keyframes nodeIn{ to{ opacity:1; transform:none; } } .node-cap{ height:var(--node-cap-h); font-size:7.6px; font-weight:400; letter-spacing:.01em; color:var(--ink-4); white-space:nowrap; text-align:center; line-height:1.2; } .node-dot{ width:var(--node-dot); height:var(--node-dot); border-radius:50%; margin:var(--node-dot-mt) 0 0; background:transparent; border:1.6px solid rgba(255,255,255,.58); transition:all .5s var(--ease); position:relative; } .rail-node.is-active .node-dot{ background:var(--terra); border-color:var(--terra); box-shadow:0 0 0 4px rgba(196,112,63,.16), 0 0 14px rgba(196,112,63,.55); } .node-city{ margin-top:11px; font-family:var(--font-disp); font-size:13.5px; font-weight:500; color:rgba(255,255,255,.90); white-space:nowrap; letter-spacing:.01em; } .node-cn{ font-size:9.5px; font-weight:400; line-height:1.35; color:var(--ink-3); margin-top:3px; /* ⚠ 这里不能 nowrap。六格均分后每格只有约 42px 宽， 而 9.5px 的中文 7 个字要 67px（实测「平面规划与调研」）， nowrap 会直接压到右边那一格的字上（实测重叠 7px）。 允许折行是兜底：默认文案已精简成 4 字（单行放得下）， 后台想改长也只会折成两行，不会跟邻格打架。 */ white-space:normal; overflow-wrap:break-word; } .rail-node.is-active .node-city{ color:#fff; } .rail-node.is-active .node-cn{ color:rgba(255,255,255,.58); } /* 极窄屏収一号字：320px 上六格均分后每格只剩约 41px， 13.5px 的英文名（Planning / Delivery 最长，约 48px）会顶到邻格。 */ @media (max-width:360px){ .node-cap{ font-size:7px; } .node-city{ font-size:11px; } .node-cn{ font-size:9px; } } /* ============================================================ NEXT BOOKING ============================================================ */ .next-card{ margin-top:12px; display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:var(--radius-m); background:linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.028)); border:1px solid var(--stroke); backdrop-filter:blur(16px); transition:transform .5s var(--ease), background .4s var(--ease); } .next-card:active{ transform:scale(.985); background:rgba(255,255,255,.075); } .next-mark{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 3px rgba(111,191,159,.16), 0 0 12px rgba(111,191,159,.55); } .next-main{ flex:1 1 auto; min-width:0; } .next-cap{ font-size:9.5px; font-weight:400; color:var(--ink-3); letter-spacing:.01em; } .next-title{ font-size:13.5px; font-weight:600; margin-top:5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .next-sub{ font-size:10px; font-weight:400; color:var(--ink-3); margin-top:4px; } /* 右侧这颗原来是静态
「正在接受预约」，现在渲染成