/* One semantic palette, shared by all decorative icons. Controls inherit ink. */ :root { --icon-outline:var(--green-dark); --icon-neutral:#b7c8bc; --icon-material:#d5bda0; --icon-energy:#dfca88; --icon-base:#fbf8f1; --icon-edge:#d9dfd5; } .site-icon { --icon-fill:var(--icon-neutral); display:inline-grid; place-items:center; flex:none; width:48px; height:48px; color:var(--icon-outline); background:var(--icon-base); border:1px solid var(--icon-edge); border-radius:10px; box-shadow:inset 0 1px 0 var(--white),0 3px 8px rgba(28,45,39,.08); vertical-align:top; } .site-icon.site-icon--material { --icon-fill:var(--icon-material); } .site-icon.site-icon--energy { --icon-fill:var(--icon-energy); } .site-icon.site-icon--configuration { width:36px; height:36px; border-color:var(--icon-edge); box-shadow:inset 0 1px 0 var(--white),0 2px 5px rgba(28,45,39,.05); } .site-icon > svg { display:block; flex:none; width:32px; height:32px; margin:0; color:var(--icon-outline); overflow:visible; } .site-icon.site-icon--configuration > svg { width:24px; height:24px; } .site-icon.site-icon--video { width:40px; height:40px; } .site-icon.site-icon--video > svg { width:28px; height:28px; } .site-action-icon { flex-shrink:0; vertical-align:middle; } /* Shared footer only: keep page content and the existing conversion lead separate. */ body .site-footer { --footer-gutter: clamp(24px, 4vw, 72px); padding: 0; color: var(--page-background); background: var(--dark-region); } .site-footer > .footer-lead { margin-inline: max(40px, calc((100% - 1380px) / 2)); } .site-footer .footer-content { width: min(1680px, calc(100% - var(--footer-gutter) * 2)); margin-inline: auto; font-size: 1rem; line-height: 1.5; letter-spacing: normal; } .site-footer .footer-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px; padding-block: 36px 28px; } .site-footer :is(.footer-about, .footer-explore, .footer-contact) { min-width: 0; } .site-footer .footer-logo-link { display: inline-flex; align-items: center; min-height: 44px; } /* The original transparent silhouette is retained; this treatment is footer-only. */ .site-footer .footer-logo { width: 176px; height: auto; filter: brightness(0) invert(1); } .site-footer .footer-about p { margin: 16px 0 0; max-width: 36ch; color: inherit; font-size: 1rem; line-height: 1.5; } .site-footer .footer-main h2 { margin: 0 0 16px; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: normal; text-transform: none; color: inherit; } .site-footer .footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .site-footer .footer-links a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 24px; font-size: 1rem; line-height: 1.5; } .site-footer .footer-links svg { flex: 0 0 22px; } .site-footer .footer-links span { min-width: 0; overflow-wrap: anywhere; } .site-footer .footer-contact .button { margin-top: 20px; min-height: 44px; padding: 12px 16px; font-size: 1rem; line-height: 1.5; letter-spacing: normal; text-transform: none; } .site-footer .footer-auxiliary { display: grid; gap: 4px; padding-block: 12px 20px; border-top: 1px solid var(--dark-region-line); color: var(--dark-region-muted); font-size: 13px; line-height: 1.5; } .site-footer .footer-auxiliary-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; } .site-footer .footer-auxiliary-row > span:last-child { margin-left: auto; } .site-footer .footer-auxiliary nav { display: flex; gap: 20px; } .site-footer .footer-auxiliary a { display: inline-flex; align-items: center; min-height: 32px; } .site-footer .footer-auxiliary p { margin: 0; max-width: none; color: inherit; font-size: 13px; line-height: 1.5; } .site-footer .footer-content a:not(.button):hover { text-decoration: underline; text-underline-offset: 4px; } .site-footer .footer-content a:focus-visible { outline: 2px solid var(--page-background); outline-offset: 4px; } @media (max-width: 1100px) { .site-footer .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 32px; } .site-footer .footer-about { grid-column: 1 / -1; } .site-footer .footer-about p { max-width: 52ch; } .site-footer .footer-links { gap: 4px; } .site-footer .footer-links a, .site-footer .footer-auxiliary a { min-height: 44px; } } @media (max-width: 767px) { body .site-footer { --footer-gutter: 20px; } .site-footer .footer-main { gap: 24px; padding-block: 24px; } .site-footer .footer-logo { width: 160px; } .site-footer .footer-main h2 { margin-bottom: 12px; } .site-footer .footer-contact .button { margin-top: 12px; gap: 8px; } .site-footer .footer-auxiliary-row { gap: 0 16px; } .site-footer .footer-auxiliary-row > span:last-child { margin-left: 0; } .site-footer .footer-auxiliary { gap: 8px; } .site-footer .footer-lead { display: none; } } @media (max-width: 359px) { .site-footer .footer-main { grid-template-columns: minmax(0, 1fr); } } /* 页脚社交媒体图标（业主 2026-09-26 指令）。 默认纯白 + 22px 字形 + 疏朗间距；悬浮 300ms ease-out 平滑放大到 1.1 并切到平台品牌色。 品牌色全部走 `:root` 的 token（--brand-*）—— 这是新颜色唯一的合规入口， `check:colors` 只统计 `:root` 之外的字面量，因此棘轮保持零新增。 本文件必须在 footer.css **之后**引入：`.footer-content a:not(.button):hover` 那条下划线规则 与这里的 `text-decoration:none` 特异度相同（0,4,1），靠引入顺序决胜。 */ .site-footer .footer-content .footer-social { display: flex; align-items: center; gap: 2px; margin-top: 12px; } /* 44×44 点击区（≥ WCAG 2.5.8 的 24px，也对齐页脚其它 44px 触控目标）。 gap:2px + 44px 盒子里居中 22px 字形 ⇒ 字形之间净空 24px，即指令里的 `gap-6` 观感。 */ .site-footer .footer-content .footer-social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--white); transition: color .3s ease-out, transform .3s ease-out; } .site-footer .footer-content .footer-social svg { display: block; } /* 首个图标的字形要与上方 logo / 文案的左边缘对齐：盒子左右各有 11px 内边距，向左回收掉。 */ .site-footer .footer-content .footer-social a:first-child { margin-left: -11px; } .site-footer .footer-content .footer-social a:hover { color: var(--social-brand, var(--white)); transform: scale(1.1); text-decoration: none; } .site-footer .footer-content .footer-social a:focus-visible { outline: 2px solid var(--page-background); outline-offset: 0; } /* 各平台官方品牌色。X 是唯一"没有可用品牌色"的平台：官方黑在深色页脚上等于隐形， 业主指令也允许用纯白高亮 —— 因此它的悬浮反馈由 1.1 的微放大承担（见指令第 1 节）。 TikTok 同理取青 `#25f4ee`（指令给出的备选），不用黑。 */ .site-footer .footer-content .footer-social a[data-platform="x"] { --social-brand: var(--white); } .site-footer .footer-content .footer-social a[data-platform="facebook"] { --social-brand: var(--brand-facebook); } .site-footer .footer-content .footer-social a[data-platform="linkedin"] { --social-brand: var(--brand-linkedin); } .site-footer .footer-content .footer-social a[data-platform="tiktok"] { --social-brand: var(--brand-tiktok); } .site-footer .footer-content .footer-social a[data-platform="youtube"] { --social-brand: var(--brand-youtube); } /* 降级动效：微放大属于需要关闭的动效，颜色切换保留（色彩不是动效）。 */ @media (prefers-reduced-motion: reduce) { .site-footer .footer-content .footer-social a:hover { transform: none; } } @media (max-width: 767px) { .site-footer .footer-content .footer-social { margin-top: 8px; } } /* 右侧固定浮动社媒侧栏（业主 2026-09-26 指令）。 颜色纪律：底衬与品牌色全部走 token（--social-pill / --brand-* / --brand-black）， 投影复用仓库里已存在的半透明值 rgba(0,0,0,.2)，因此 check:colors 棘轮零新增。 圆角是**业主明确开的例外**：指令给定 `rounded-full` 底衬，与全站 0 圆角口径不同， 已记入 DESIGN.md 变更日志（这是该指令唯一的破例项，其余间距/描边仍按本站刻度）。 */ .social-rail { position: fixed; /* 垂直位置：指令给的 `top-1/3 -translate-y-1/2` 是**理想值**，外面套一层 clamp 保证它永远塞得下： 窗口矮（例如 1440×620，开 DevTools 常见）时 33.333% 会把第一枚圆推到固定导航栏底下 —— 实测 620 高时圆顶 73px、导航栏底 76px，于是被盖住 13px（更矮时更多）。 min = 导航栏高 + 12px 余量 + 自身半高；max = 视口高 − 12px − 自身半高。 高度由组件按实际图标数上报（`--social-rail-height`），加减平台时不用改 CSS。 */ --social-rail-height: 268px; /* 兜底值 = 5 个图标（44×5 + 12×4） */ top: clamp( calc(var(--header) + 12px + var(--social-rail-height) / 2), 33.333%, calc(100dvh - 12px - var(--social-rail-height) / 2) ); right: 16px; transform: translateY(-50%); /* z-index 40 < 导航栏的 50：窗口很矮（例如 1280×600）时两者可能重叠， 此时必须让导航栏盖住侧栏，而不是反过来。灯箱 200、跳过链接 999 同理都在其上。 */ z-index: 40; /* 平板与手机整块隐藏（指令给的是 md/lg 两档，取 lg；实测见下）。 为什么不取 `lg`（1024px）：本站正文是全宽版式，1024 档实测 `/why-us` 的 Hero 箭头 （935–983）正落在侧栏带（964–1008）里 —— 浮动侧栏压住轮播控件是硬伤。 放宽到 1280 后，实测 1280 / 1440 / 1536 三档在抽样路由上不再与任何控件或文字相交。 */ display: none; } .social-rail-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } /* 半透明圆角底衬：44×44 圆（22px 字形 + 11px 内边距），带模糊与投影。 目的（业主指令原文）：无论图标划过绿树、白墙还是暗色区都清晰醒目。 */ .social-rail-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--social-pill); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); color: var(--social-brand, var(--brand-black)); transition: background-color .3s ease-out, box-shadow .3s ease-out, color .3s ease-out, transform .3s ease-out; } .social-rail-link svg { display: block; } /* 悬浮：顺滑放大 + 微向左偏移（指令给的 hover:scale-115 hover:-translate-x-1 shadow-xl）。 */ .social-rail-link:hover, .social-rail-link:focus-visible { background: var(--white); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); transform: scale(1.15) translateX(-4px); } .social-rail-link:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; } /* 各平台官方品牌色：默认就是彩色（指令第 2 节）。 X 与 TikTok 的官方色是纯黑 —— 在白色底衬上是可读的（这正是底衬存在的意义）， 因此这里与深色页脚的处理相反：页脚用纯白/青色，侧栏用官方黑。 */ .social-rail-link[data-platform="x"] { --social-brand: var(--brand-black); } .social-rail-link[data-platform="facebook"] { --social-brand: var(--brand-facebook); } .social-rail-link[data-platform="linkedin"] { --social-brand: var(--brand-linkedin); } .social-rail-link[data-platform="tiktok"] { --social-brand: var(--brand-black); } .social-rail-link[data-platform="youtube"] { --social-brand: var(--brand-youtube); } @media (min-width: 1280px) { .social-rail { display: block; } } /* 展厅（/applications/gallery/）整块不挂：自己的前后张箭头与计数就压在右侧同一区域 —— 实测在 1024 / 1280 / 1440 / 1536 四档都会与它相交，且该页已有完整的底部双层导航， 浮动侧栏在这里只会互相打架。与底色深浅无关（2026-09-29 展厅改品牌浅色后这条依然成立， 所以 body 类名从 `gallery-immersive` 改名为如实的 `gallery-route`，规则本身不动）。 */ body.gallery-route .social-rail { display: none; } /* 应用详情页（Lookbook）同样不挂：正文是 92% 全宽版式，右侧留白在 1280–1500px 这一段不到 44px， 实测 1440 档会盖住摘要末行的最后 17px（`[879..1397]` vs 侧栏带 1380–1424）。 留白不足是版式事实，不是可以靠挪几像素绕开的 —— 因此按"不遮挡正文"的口径整页隐藏。 */ body.lookbook-wide .social-rail { display: none; } @media (prefers-reduced-motion: reduce) { .social-rail-link:hover, .social-rail-link:focus-visible { transform: none; } } /* Scoped to this module; absorb the parent grid gap instead of doubling it. */ .home-page .editorial-section.home-performance { --performance-space:88px; padding-block:var(--performance-space); margin-block:calc(-1 * var(--rhythm-section)); } .home-page .home-performance > .editorial-shell { width:min(1600px, calc(100% - clamp(40px, 8vw, 320px))); display:grid; gap:36px; } .home-performance-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; } .home-page .home-performance-heading h2 { max-width:none; margin:0; font-size:clamp(40px,3vw,52px); font-weight:400; line-height:1.12; letter-spacing:-.03em; } .home-performance-heading h2 span { display:block; } .home-page .home-performance-heading p { margin:16px 0 0; color:var(--ink-soft); font-size:1.125rem; line-height:1.5; } .home-performance-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; align-items:center; } .home-performance-image,.home-performance-image img { display:block; width:100%; height:auto; } .home-performance-image { min-width:0; } .home-performance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 28px; } .home-performance-grid article { display:grid; grid-template-columns:26px minmax(0,1fr); grid-template-rows:auto 1fr; gap:8px 10px; align-content:start; min-width:0; padding-top:18px; border-top:1px solid var(--line); } /* 第 7 张卡（Sustainable Build）= Accent Green 高亮（业主 2026-09-29 指令）。 手法刻意"内容基线不动"：顶边换 2px 品牌绿、`padding-top` 同步减 1px（整卡内容顶边与同排其余卡完全一致， 实测两侧 h3 偏移都是 19px）；另加左右 12px 与浅绿底 `--surface-green`，把它变成一块**实心卡** —— 底色是"这是一块卡片"的视觉声明，因此这点内缩读起来是有意的版式，而不是错位。 底色沿用既有 token（`features.css` 的 `.features-standard` 同样用法），没有新增颜色字面量。 图标：主路径 `color` + 副层 `--icon-fill` 两个变量都要给，否则只绿一半。 */ .home-performance-grid article.is-accent { padding:17px 12px 0; border-top:2px solid var(--green); background:var(--surface-green); } .home-page .home-performance-grid article.is-accent h3 { color:var(--green); } .home-performance-grid article.is-accent > .site-icon { --icon-fill:var(--green-light); color:var(--green); } .home-performance-grid article > .site-icon { width:26px; height:26px; background:transparent; border:0; border-radius:0; box-shadow:none; } .home-performance-grid article > .site-icon svg { width:26px; height:26px; } .home-page .home-performance h3 { margin:0; color:var(--green-dark); font-size:20px; font-weight:500; line-height:1.3; letter-spacing:normal; } .home-page .home-performance-grid p { grid-column:2; margin:0; max-width:36ch; color:var(--ink-soft); font-size:1rem; line-height:1.5; letter-spacing:normal; } /* `.home-performance-footer` / `.home-performance-recycling` 的规则已于 2026-09-29 随页脚那一行整块删除 （业主指令：90% 那句话改成网格里的第 7 张卡）。留着就是新增死 CSS —— `npm run check:dead-css` 会报。 */ @media (max-width:1199px) { .home-performance-body { grid-template-columns:1fr; gap:32px; } .home-performance-grid { gap:24px 40px; } } @media (max-width:767px) { .home-page .editorial-section.home-performance { --performance-space:52px; } .home-page .home-performance > .editorial-shell { width:calc(100% - 40px); gap:32px; } .home-performance-heading { flex-direction:column; align-items:flex-start; gap:16px; } .home-page .home-performance-heading h2 { font-size:clamp(30px,8.2vw,34px); } .home-page .home-performance-heading p { font-size:17px; } } @media (max-width:619px) { .home-performance-grid { grid-template-columns:1fr; gap:20px; } } /* Model A, B, BL and C films share the approved layout and controls. */ .fast-assembly-film .fast-assembly-figure { min-width: 0; max-width: 1855px; margin: 0; } .fast-assembly-film .fast-assembly-media { position: relative; aspect-ratio: var(--assembly-aspect, 16 / 9); border-radius: 8px; box-shadow: 0 6px 18px rgba(28, 45, 39, .12); } .fast-assembly-film video { display: block; width: 100%; height: auto; aspect-ratio: var(--assembly-aspect, 16 / 9); -o-object-fit: contain; object-fit: contain; border-radius: inherit; } .fast-assembly-film .fast-assembly-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 1px solid rgba(246, 243, 237, .8); border-radius: 50%; background: var(--brand-green); color: var(--white); cursor: pointer; } .fast-assembly-film .fast-assembly-play:hover { background: var(--green-dark); } .fast-assembly-film .fast-assembly-play:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; } .fast-assembly-film .fast-assembly-play svg { margin-left: 4px; } .fast-assembly-film figcaption { margin-top: 12px; color: var(--ink-soft); font-size: .875rem; line-height: 1.5; } .product-detail .fast-assembly-copy h3 { max-width: 24ch; margin: 0 0 28px; font-size: clamp(28px, 2.5vw, 44px); line-height: 1.15; } .fast-assembly-copy ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; } .fast-assembly-copy li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.5; } .fast-assembly-copy li > span:not(.site-icon) { padding-top:4px; } @media (max-width: 767px) { .product-detail .fast-assembly-copy h3 { font-size: 28px; margin-bottom: 24px; } .fast-assembly-copy li { font-size: 1rem; } } /* Shared architectural editorial foundation. Opt-in keeps later batches untouched. */ .editorial-page { --editorial-space: clamp(64px, 5.5vw, 152px); --editorial-gap: clamp(32px, 4.5vw, 140px); --editorial-body: clamp(17px, 1.18vw, 24px); --editorial-heading: clamp(32px, 2.8vw, 72px); --editorial-subheading: clamp(21px, 1.65vw, 36px); --editorial-width: min(3320px, calc(100% - clamp(40px, 8vw, 320px))); background: var(--paper); } .editorial-page ::-moz-selection { background: var(--green-dark); color: var(--white); } .editorial-page ::selection { background: var(--green-dark); color: var(--white); } .editorial-page .editorial-shell { width: var(--editorial-width); margin-inline: auto; } .editorial-page .editorial-section { padding-block: 0; } .home-page, .product-detail { display:grid; row-gap:var(--rhythm-section); padding-bottom:var(--rhythm-group); } .home-page > section, .product-detail > section { min-width:0; } .editorial-page .editorial-section p:last-child { margin-bottom:0; } /* The tinted application surface gets intentional internal insets. Its two outside gaps are reduced by that inset, keeping the content interval exact. */ .home-page .editorial-applications { padding-block:var(--rhythm-group); margin-block:calc(-1 * var(--rhythm-group)); } .editorial-page h2 { max-width: 23ch; margin: 0 0 24px; font-size: var(--editorial-heading); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; } .editorial-page h3 { margin: 0 0 16px; font-size: var(--editorial-subheading); line-height: 1.25; letter-spacing: -.018em; } .editorial-page p { max-width: 65ch; font-size: var(--editorial-body); line-height: 1.65; } .editorial-page .button { font-size: clamp(14px, 1vw, 19px); } .editorial-page .text-link { font-size: clamp(16px, 1.1vw, 22px); } .editorial-carousel { color: var(--white); background: var(--paper); } .editorial-carousel-stage { position: relative; isolation: isolate; aspect-ratio: 16 / 9; } .editorial-carousel-media, .editorial-carousel-media > div, .editorial-carousel-media picture, .editorial-carousel-media img { position: absolute; inset: 0; width: 100%; height: 100%; } .editorial-carousel-media > div { opacity: 0; transition: opacity .4s ease; } .editorial-carousel-media > .active { opacity: 1; } .editorial-carousel-media img { -o-object-fit: contain; object-fit: contain; } .editorial-carousel-media { left: 0; width: 100%; } .editorial-carousel-copy { position: absolute; top: var(--hero-copy-top); left: var(--hero-copy-left); width: var(--hero-copy-width); display: grid; color: white; z-index: 1; --focus-ring: var(--green-light); } .editorial-carousel-copy > div { grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none; } .editorial-carousel-copy > .active { visibility: visible; opacity: 1; pointer-events: auto; } .editorial-carousel-headline { margin-bottom: 24px; font-size: clamp(36px, 2.9vw, 86px); line-height: 1.08; letter-spacing: -.03em; white-space: pre-line; text-wrap: balance; } .editorial-carousel-copy p { max-width: 35ch; margin-bottom: 24px; } .editorial-kicker { display: block; margin-bottom: 16px; font-size: clamp(12px, .95vw, 18px); font-weight: 600; letter-spacing: .08em; } .editorial-carousel-controls { position: absolute; bottom: 28px; left: 4%; display: flex; gap: 16px; align-items: center; color: white; z-index: 1; --focus-ring: var(--green-light); font-size: clamp(16px, 1.2vw, 24px); } .editorial-carousel-controls button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: inherit; cursor: pointer; } .editorial-carousel-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,30,22,.64), rgba(13,30,22,.32) 25%, transparent 48%); pointer-events: none; } .editorial-carousel[data-slide="home-hero-interior"] .editorial-carousel-stage::after { background: linear-gradient(180deg, rgba(13,30,22,.66), transparent 55%); } .editorial-carousel-copy p { color: inherit; } .editorial-carousel-thumbnails { display: grid; grid-template-columns: repeat(var(--slide-count), minmax(0, 1fr)); gap: 2px; } .editorial-carousel-thumbnails button { position: relative; height: clamp(88px, 7vw, 220px); min-width: 0; padding: 0; border: 0; background: var(--green-dark); cursor: pointer; overflow: hidden; } .editorial-carousel-thumbnails picture { display: block; width: 100%; height: 100%; } .editorial-carousel-thumbnails img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .editorial-carousel-thumbnails span { position: absolute; inset: auto 0 0; padding: 20px 16px 12px; color: var(--white); background: linear-gradient(transparent, rgba(0,0,0,.8)); text-align: left; font-size: clamp(13px, 1vw, 19px); } .editorial-carousel-thumbnails button.active { outline: 3px solid var(--green); outline-offset: -3px; } .editorial-carousel-thumbnails button:focus-visible { outline: 3px solid white; outline-offset: -6px; } .editorial-heading { margin-bottom: var(--rhythm-group); } .editorial-heading h2 span { display: block; } .editorial-models { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2vw, 56px); } .editorial-model { min-width: 0; } .editorial-model picture { display: block; aspect-ratio: 4 / 3; } .editorial-model img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .editorial-model > div { display: grid; gap: 10px; padding-top: 18px; } .editorial-model strong { font-size: var(--editorial-subheading); font-weight: 500; } .editorial-model-title { font-size: clamp(16px, 1.1vw, 22px); line-height: 1.5; } .editorial-model:hover strong { color: var(--green); text-decoration: underline; text-underline-offset: 6px; } .editorial-page .editorial-film-section .editorial-shell { width: 100%; } .editorial-page .assembly-film { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 0; align-items: center; } .editorial-page .assembly-film-proof--materials { display: flex; flex-direction: column; gap: 0; min-height: 0; border: 0; padding: clamp(32px, 4vw, 120px); } .editorial-page .assembly-film-materials { padding: 0; font-size: var(--editorial-heading); } .editorial-page .assembly-film-material-message { max-width: 42ch; padding: 0; font-size: var(--editorial-body); } .home-page :is(.editorial-film-section, .comparison-section) .assembly-film-material-message { border-top: 0; } .home-page :is(.editorial-film-section, .comparison-section) .assembly-film-proof--materials { padding:clamp(28px,2.5vw,80px); } .home-page :is(.editorial-film-section, .comparison-section) .assembly-film-materials { display:block; max-width:23ch; margin:0 0 16px; text-wrap:balance; } .home-page :is(.editorial-film-section, .comparison-section) .assembly-film-materials span { display:inline; } .home-page .comparison-section .assembly-film-material-message { display:block; max-width:54ch; margin:0; padding:0; font-size:var(--editorial-body); line-height:1.6; letter-spacing:normal; text-wrap:pretty; } .home-page .home-film-copy { min-width:0; padding:clamp(28px,2.5vw,80px); } .home-page .home-film-copy h2 { margin:0 0 28px; max-width:23ch; color:var(--green-dark); font-size:clamp(28px,2.8vw,56px); } .home-page .home-film-copy ul { display:grid; gap:24px; margin:0; padding:0; list-style:none; } .home-page .home-film-copy li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; } .home-page .home-film-copy li > div { padding-top:4px; } .home-page .home-film-copy h3 { margin:0 0 6px; color:var(--green-dark); font-size:1.125rem; font-weight:600; line-height:1.4; letter-spacing:normal; } .home-page .home-film-copy p { max-width:52ch; margin:0; color:var(--ink-soft); font-size:clamp(16px,1.2vw,18px); line-height:1.5; letter-spacing:normal; text-wrap:pretty; } @media(max-width:767px) { .home-page .home-film-copy { padding:28px 20px; } .home-page .home-film-copy h2 { font-size:28px; margin-bottom:24px; } .home-page .home-film-copy h3 { font-size:17px; } .home-page .home-film-copy p { font-size:1rem; } } .home-page .editorial-film-section .assembly-film-media { align-self:center; } .home-page .assembly-film-control { position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: var(--white); cursor: pointer; } .home-page .assembly-film-control:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; } .home-page { --home-media-section-gap:var(--rhythm-section); } .home-page .comparison-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; } .home-page :is(.editorial-system, .editorial-applications) > .editorial-shell { display: grid; gap: var(--rhythm-group); } .home-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; } .home-page .home-section-heading h2 { max-width: none; margin: 0; } .home-page .home-section-heading p { margin: 16px 0 0; color: var(--ink-soft); } .home-section-heading .text-link { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 12px; } .home-page .home-application-card h3 { margin: 0; } .home-page .home-application-card p { margin: 0; color: var(--ink-soft); max-width: 44ch; } .editorial-applications { background: var(--surface-green); } .home-application-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .home-application-card { display: flex; flex-direction: column; min-width: 0; color: var(--brand-green); } .home-application-card > picture { position: relative; display: block; aspect-ratio: 16 / 9; } .home-application-card > picture img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .home-application-card-copy { display: flex; flex-direction: column; flex: 1; align-items: start; gap: 12px; padding-top: 16px; } .home-application-examples { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; color: var(--brand-green); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.4; } .home-application-examples svg { flex: 0 0 20px; } .home-application-card:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .home-application-card:focus-visible, .home-section-heading .text-link:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 6px; } @media (max-width: 1100px) { .home-application-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .home-section-heading { flex-wrap: wrap; } } @media (max-width: 767px) { .home-application-cards { grid-template-columns: 1fr; gap: 32px; } } /* Preserve the measured old image height, including its 750×422 candidate's pixel rounding: .9fr × (422/750) × (21/9) = 1.1816fr. Both layouts total 1.9fr after the unchanged button and two gaps. */ .editorial-cta { display: grid; grid-template-columns: minmax(0, .7184fr) auto minmax(0, 1.1816fr); align-items: center; gap: var(--rhythm-group); padding-block: 0; } .editorial-cta-copy { min-width: 0; } .editorial-cta-copy p { margin-bottom: 0; } .editorial-cta-image { display: block; min-width: 0; aspect-ratio: 21 / 9; } .editorial-cta-image picture { display: block; width: 100%; height: 100%; } .editorial-cta-image img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .editorial-cta-image:hover { outline: 2px solid var(--brand-green); outline-offset: 4px; } .editorial-cta-image:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 5px; } @media (min-width: 768px) and (max-width: 1439px) { .editorial-cta { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); grid-template-rows: auto auto; -moz-column-gap: 32px; column-gap: 32px; row-gap: 24px; } .editorial-cta-copy { grid-column: 1; grid-row: 1; align-self: end; } .editorial-cta .button { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; } .editorial-cta-image { grid-column: 2; grid-row: 1 / 3; } } body:has(.editorial-page) .footer-lead { display: none; } @media (max-width: 1100px) { .editorial-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } .editorial-carousel-stage { height: auto; min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; } .editorial-carousel .editorial-carousel-media { position: relative; left: 0; width: 100%; aspect-ratio: 16 / 9; } .editorial-carousel-copy { position: relative; inset: auto; width: auto; margin: 32px 20px 20px; color: var(--ink); } .editorial-carousel-copy p { max-width: 60ch; } .editorial-carousel-controls { position: static; margin: 0 20px 20px; } .editorial-carousel .editorial-carousel-stage::after { display: none; } .editorial-carousel-copy, .editorial-carousel-controls { color: var(--ink); --focus-ring: var(--green); } .editorial-page .assembly-film { grid-template-columns: 1fr 1fr; } .home-page .comparison-layout { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .home-page .assembly-film-control { bottom: 16px; } .editorial-models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .editorial-model:last-child { grid-column: 1 / -1; } .editorial-model:last-child picture { aspect-ratio: 16 / 9; } .editorial-carousel-headline { font-size: 2.25rem; max-width: 21ch; } .editorial-carousel-thumbnails { overflow-x: auto; grid-template-columns: repeat(var(--slide-count), minmax(120px, 1fr)); } .editorial-page .assembly-film { grid-template-columns: 1fr; } .home-page .comparison-layout { grid-template-columns: 1fr; } .editorial-page .assembly-film-proof--materials { padding: 32px 20px; } .home-page :is(.editorial-film-section, .comparison-section) .assembly-film-proof--materials { padding:28px 20px; } .editorial-cta { grid-template-columns: 1fr; } .editorial-cta .button { justify-self: start; } .editorial-cta-image { grid-column: auto; } } /* Product catalog and all five detail pages share these layout roles. */ .editorial-product-close { display:flex; align-items:center; justify-content:space-between; gap:var(--editorial-gap); border-top:1px solid var(--line); padding-block:var(--editorial-space); } .editorial-product-close > div { max-width:65ch; } .editorial-product-close .button { flex-shrink:0; } .editorial-product-disclosure { border-block:1px solid var(--line); padding-block:8px; } .editorial-product-disclosure summary { cursor:pointer; padding-block:16px; font-size:var(--editorial-subheading); line-height:1.4; } .editorial-product-disclosure > p { margin:24px 0; } .editorial-product-section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); -moz-column-gap:var(--editorial-gap); column-gap:var(--editorial-gap); row-gap:var(--rhythm-title); align-items:start; margin-bottom:var(--rhythm-group); } .editorial-product-section-heading h2 { margin-bottom:0; } .editorial-product-section-heading p { margin:0; } .product-detail-gallery { border-top:1px solid var(--line); } .product-detail .gallery-main { width:100%; max-width:none; max-height:none; aspect-ratio:16/9; background:var(--paper); scroll-margin-top:calc(var(--header) + 24px); } .product-detail .gallery-main img { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; } .product-detail .gallery-thumbs { display:flex; gap:16px; margin-top:20px; padding-block:4px 0; overflow-x:auto; } .product-detail .gallery-thumbs button { flex:0 0 clamp(120px,14vw,360px); height:auto; padding:0 0 8px; background:transparent; } .product-detail .gallery-thumbs img { width:100%; height:auto; aspect-ratio:4/3; -o-object-fit:contain; object-fit:contain; } .product-detail .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start; } .product-detail .plan-grid figure:first-child { grid-column:1/-1; } .product-detail .plan-view-button img { height:auto; min-height:0; width:100%; } .product-detail .plan-grid figcaption { padding-top:16px; font-size:clamp(16px,1.1vw,22px); line-height:1.6; border:0; } /* 2026-09-22 业主规范：图上不留 ENLARGE 贴纸、弹窗不留模式切换按钮 —— 相关规则全部删除。 */ .product-detail .plan-lightbox { padding-top:80px; } .product-detail-materials { background:var(--paper); } .product-detail-materials > .editorial-shell { display:grid; row-gap:var(--rhythm-group); } /* 2026-09-26 业主指令：装配影片从 `#materials` 里拆出来，单独成段并前移到 Layout & Specifications 正下方。体例与 `.product-detail-materials` 完全一致 —— 同底色、同 shell 栅格行距，只是不再与标准/选装包同处一段。 */ .product-detail-film { background:var(--paper); } .product-detail-film > .editorial-shell { display:grid; row-gap:var(--rhythm-group); } .product-film { margin-bottom:0; } .product-film-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--editorial-gap); align-items:center; } .product-film-media { position:relative; aspect-ratio:16/9; } .product-film-media video { width:100%; height:100%; display:block; -o-object-fit:contain; object-fit:contain; } .product-film-copy h3 { max-width:24ch; } .product-film-copy dl { margin-top:24px; } .product-film-copy dl > div { margin-block:16px; } .product-film-copy dt,.product-film-copy dd { margin:0; font-size:var(--editorial-body); } .product-detail-project-notes { display:grid; grid-template-columns:1fr 1fr; gap:var(--editorial-gap); margin-top:48px; } .editorial-related-models { display:grid; grid-template-columns:1fr .65fr .65fr; gap:32px; align-items:center; margin-top:var(--editorial-space); } .editorial-related-models picture { display:block; aspect-ratio:16/9; } .editorial-related-models img { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; } .editorial-related-models span { display:flex; gap:16px; align-items:center; padding-top:16px; font-size:var(--editorial-body); } @media (max-width:900px) { .product-film-layout, .product-detail-project-notes{ grid-template-columns:1fr; gap:var(--rhythm-group); } .editorial-product-section-heading { grid-template-columns:1fr; } .editorial-product-close { flex-direction:column; align-items:start; gap:24px; } .product-detail .plan-grid { grid-template-columns:1fr; gap:32px; } .product-detail .plan-grid figure:first-child { grid-column:auto; } .editorial-related-models { grid-template-columns:1fr 1fr; gap:24px; } .editorial-related-models > a:first-child { grid-column:1/-1; } } @media (prefers-reduced-motion: reduce) { .editorial-carousel-media > div { transition: none; } } /* 【业主 2026-10-01 手机预览反馈】首页：hero 轮播原来贴在 y=0，被 fixed 页头吃掉 76px（业主 2026-10-01 手机预览发现） */ /* 与 .about-page / .application-breadcrumbs 同一约定：用 token 算安全距离，不写死数值。 */ .home-page { padding-top: calc(var(--header) + 16px); } /* Shared spacing vocabulary; components opt in without changing global layout. */ :root { --rhythm-section:48px; --rhythm-group:24px; --rhythm-caption:12px; --rhythm-title:16px; --rhythm-detail:8px; } @media (min-width:768px) { :root { --rhythm-section:64px; --rhythm-group:32px; } } @media (min-width:1101px) { :root { --rhythm-section:96px; --rhythm-group:48px; } } @media (min-width:1920px) { :root { --rhythm-section:128px; } } /* Content headings on light backgrounds. Image-overlay heroes and carousels deliberately retain their existing text colors, as do dark utility panels. */ #main-content :is( .home-page > section:not(.editorial-carousel) h2, .home-page > section:not(.editorial-carousel) h3, .product-detail > section:not(.model-hero) h2, .product-detail > section:not(.model-hero) h3, .features-story h1, .features-story h2, .about-page h1, .about-page h2, .about-page h3, .applications-index-card-copy h2, .applications-index-cta h2, .applications-detail-page h1, .applications-detail-page h2, .applications-detail-page .product-card-copy h3, .projects-library :is(h2,h3), .page-hero:not(.with-image) h1, .contact-layout h2, .legal-copy h2, .quote-form-heading h1, .quote-success h1 ) { color: var(--brand-green); } /* 品牌字体：Instrument Sans（SIL OFL 1.1，可自托管）。 * * 为什么必须自托管：原先 --font-sans 第一位写的是 "Avenir Next"，但全站没有任何 @font-face， * 于是实际渲染取决于访客的操作系统 —— Windows 上是 Segoe UI、Mac 上（若装了）Avenir、 * Android 上是系统默认。对一个走"建筑事务所极简"的站点，字体是骨架，不能放养。 * （审计 UI_UX_VISUAL_AUDIT.md 的 VIS-001 就是这个：源码品牌意图与实际产物不一致。） * * 为什么选 Instrument Sans：原意图的 Avenir Next 是 Monotype 商业字体、需要购买授权； * Instrument Sans 是几何人文无衬线，气质最接近 Avenir，且为 SIL OFL 1.1，可自由自托管与再分发。 * 授权原文见 public/fonts/instrument-sans/OFL.txt。 * * 交付方式：变量字体，一个文件覆盖 400–700 全部字重，两个子集共 41 KB * （latin 30 KB + latin-ext 11 KB）。因此这里只有两条 @font-face， * 而不是 Google Fonts 默认生成的 8 条。文件由 public/ 经 CopyPublicPlugin 拷进 dist/。 */ /* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('/fonts/instrument-sans/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('/fonts/instrument-sans/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== Base reset — 由项目自己拥有，不再依赖 Tailwind 的 preflight。 出处：从 Tailwind CSS v3.4 的 preflight（MIT License，基于 modern-normalize） 的构建产物中逐字节提取并去除注释，以保证移除 Tailwind 前后基础样式完全一致。 提取方式与校验见 AUDIT_AND_TOOLING_PLAN.md 的 Phase 3 记录。 规则语义必须保持原样。尤其不要删掉： *,::before,::after box-sizing / border 归零 h1..h6 取消浏览器默认字号与粗体 ol,ul,menu 取消列表样式与缩进 blockquote,dl,dd,h1..h6,hr,figure,p,pre 取消默认外边距 html 行高、字体栈、text-size-adjust 任何改动都必须用 145 点视觉基线做逐像素回归验证。 ========================================================================== */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border-color); } ::before, ::after { --tw-content: ''; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: Avenir Next, Avenir, Segoe UI Variable, Segoe UI, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: var(--placeholder); } input::placeholder, textarea::placeholder { opacity: 1; color: var(--placeholder); } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none; } /* Visually hidden but available to assistive technology. 这是项目此前唯一真正使用的 Tailwind 工具类，现在显式拥有。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } :root { --page-background:#f6f3ed; --card-background:#fbfaf7; --text-primary:#171a18; --text-secondary:#4b514d; --brand-green:#2c6449; --font-sans:'Instrument Sans',"Avenir Next",Avenir,"Segoe UI Variable","Segoe UI",ui-sans-serif,sans-serif; --border-color:#d2d3cc; --dark-region-text:#f5f6f2; --dark-region-muted:#c5cbc6; --focus-ring:#174b34; --comparison-focus-ring:#174b34; --content-max:1380px; --page-gutter:clamp(24px,4vw,72px); --ink:var(--text-primary); --ink-soft:var(--text-secondary); --paper:var(--page-background); --surface:var(--card-background); --surface-green:#edf1ec; --white:#fff; --line:var(--border-color); --green:var(--brand-green); --green-dark:#174b34; --green-light:#8ed0ac; --warm:#b9936c; --danger:#982e2e; --surface-accent:#ded6c9; --placeholder:#646e68; --dark-region:#1d2721; --dark-region-line:#47514b; --muted-surface:#e9e5dc; --media-placeholder:#dde2e1; --line-strong:#8d938b; --warm-line:#c8bfaf; --warning:#9a6938; --error:var(--danger); --radius-media:16px; --shadow-soft:0 4px 20px rgba(0,0,0,.06); --shadow-lift:0 14px 44px rgba(0,0,0,.06); --header:clamp(96px,5.3vw,104px); --overlay-peek:rgba(0,0,0,.4); /* 图库展厅面（2026-09-29 业主指令：改回品牌浅色）：这 5 个 token 仍在，但**指向品牌变量**—— 展厅从此与 Features / Models 同一张米白底，不再是一块黑。保留 token 名是为了让 application-gallery-hall.css 一行都不用改；指向变量则是为了让展厅自动跟随品牌色未来的任何调整。 */ --gallery-bg:var(--paper); --gallery-surface:var(--surface); --gallery-ink:var(--ink); --gallery-ink-soft:var(--ink-soft); --gallery-line:var(--line); --gallery-accent:var(--brand-green); --glass-line:rgba(255,255,255,.4); --brand-facebook:#1877f2; --brand-linkedin:#0a66c2; --brand-tiktok:#25f4ee; --brand-youtube:#ff0000; --brand-black:#000000; --social-pill:rgba(255,255,255,.9); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } /* 品牌字体必须落在 html 上。 * 为什么不能只写在 body 上：紧接其后的 `body,button,input,select,textarea{font:inherit}` * 用 font 简写把 body 的 font-family 一并重置为 inherit，于是 body 实际继承 html； * 而 html 的字体来自 reset.css 里 preflight 的字面量栈（"Avenir Next", Avenir, …）。 * 这是审计 VIS-001「源码品牌意图与产物不一致」的真正原因 —— 即使买下 Avenir Next 授权也不生效。 * reset.css 是逐字节保留的 vendored preflight，所以这里不改它，而在它之后覆盖 html。 */ html { font-family:var(--font-sans); } body { margin:0; min-width:320px; overflow-x:hidden; color:var(--ink); background:var(--paper); font-size:1rem; -webkit-font-smoothing:antialiased; } body,button,input,select,textarea { font:inherit; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { color:inherit; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:400; letter-spacing:-.035em; } p { color:var(--ink-soft); font-size:1rem; line-height:1.65; } :where(a,button,input,select,textarea,[tabindex]):not(.comparison):focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; } .site-footer, .hero, .product-hero{ --focus-ring:var(--green-light); } .route-focus-target:focus { outline:none; } [id] { scroll-margin-top:calc(var(--header) + 20px); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:fixed; z-index:999; left:1rem; top:-100px; padding:.8rem 1rem; background:white; color:var(--text-primary); } .skip-link:focus { top:1rem; } .section-shell { width:min(var(--content-max),calc(100% - 80px)); margin-inline:auto; } .section { padding:clamp(5rem,9vw,9rem) 0; } .eyebrow { display:block; margin-bottom:1.1rem; color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .eyebrow.light { color:var(--green-light); } .section-heading.light h2,.section-heading.light p { color:white; } .text-link { min-height:44px; display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 0 .35rem; color:var(--green); border-bottom:1px solid currentColor; font-weight:600; font-size:.875rem; } .text-link.light { color:var(--green-light); } .button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.15rem; border:1px solid transparent; border-radius:0; font-size:.875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; transition:background .2s,color .2s,border-color .2s,transform .2s; cursor:pointer; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--green); color:white; } .button-primary:hover { background:var(--green-dark); } /* Explicit inquiry role: shared by the header, page CTAs and enquiry submit. */ .button-inquiry { background:var(--green); color:white; border:1px solid transparent; border-radius:0; font-weight:700; gap:.5rem; } .button-inquiry:hover:not(:disabled),.button-inquiry:active:not(:disabled) { background:var(--green-dark); color:white; transform:none; } .button-inquiry:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-color:white; } .button-inquiry:disabled { cursor:wait; } /* 【2026-09-26 业主指令：导航栏是真正的**悬浮覆盖层**（Overlay Header）】 `position:fixed; top:0; left:0; width:100%; z-index:50` —— 导航栏**不占文档流**， 所有页面首屏（Hero / 大图 / 顶栏背景）一律从 top:0 开始渲染，收起时页面顶部露出的是 页面自己的背景图或背景色，**不存在任何底色缝隙**。 防遮挡的安全距离按业主口径加在**组件内部的内容容器**上（例如 `.editorial-carousel-copy`、 `.gallery-hall`、面包屑容器），绝不加在 body 或背景容器上 —— 上一版把 `padding-top:var(--header)` 塞在 body 上，收起时就会在顶部露出一条米白硬边（业主实测发现的 Bug）。 */ .site-header { position:fixed; z-index:50; top:0; left:0; width:100%; height:var(--header); display:flex; align-items:center; gap:clamp(24px,2vw,32px); padding:0 clamp(24px,4vw,72px); background:rgba(246,243,237,.94); border-bottom:1px solid rgba(23,26,24,.12); backdrop-filter:blur(16px); transform:translateY(0); transition:transform .35s cubic-bezier(.16,1,.3,1); } .site-header[data-header-state="hidden"] { transform:translateY(-100%); } /* reduce 下完全不位移（useAutoHideHeader 也不会置 hidden，这里是双保险）。 */ @media (prefers-reduced-motion:reduce) { .site-header { transition:none; } } .brand { display:flex; min-width:clamp(132px,5vw,190px); align-items:center; } .brand-logo { width:clamp(132px,5vw,190px); height:auto; flex:none; -o-object-fit:contain; object-fit:contain; } .site-header .brand { min-width:clamp(190px,10.5vw,210px); } .site-header .brand-logo { width:clamp(190px,10.5vw,210px); } .desktop-nav { display:flex; align-items:center; justify-content:center; gap:clamp(30px,1.8vw,36px); margin-left:auto; } .desktop-nav :is(a, .series-trigger) { min-height:48px; display:flex; align-items:center; padding:.6rem 0; border-bottom:1px solid transparent; font-size:1.125rem; font-weight:600; white-space:nowrap; } .desktop-nav :is(a, .series-trigger):hover,.desktop-nav :is(a, .series-trigger).active { color:var(--green); border-color:currentColor; } .desktop-series { position:relative; align-self:stretch; display:flex; align-items:center; } .desktop-series .series-trigger { border:0; border-bottom:1px solid transparent; background:transparent; color:inherit; cursor:pointer; display:flex; align-items:center; gap:.28rem; } .desktop-series .series-trigger svg { transition:transform .2s cubic-bezier(.16,1,.3,1); } .desktop-series.open .series-trigger svg { transform:rotate(180deg); } .series-dropdown { position:absolute; z-index:120; top:100%; left:50%; width:clamp(340px,20vw,430px); padding:.65rem 1.4rem 1rem; color:var(--ink); background:var(--white); border-top:3px solid var(--green); box-shadow:18px 20px 42px rgba(16,28,21,.2); transform:translateX(-50%); animation:series-menu-in .18s cubic-bezier(.16,1,.3,1) both; } .desktop-nav .series-dropdown a { min-height:clamp(54px,3vw,72px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; padding:.75rem .15rem; border-bottom:1px solid var(--line); font-size:clamp(.95rem,.5vw,1.12rem); font-weight:500; } .desktop-nav .series-dropdown a:hover,.desktop-nav .series-dropdown a.active { border-color:var(--green); } .series-dropdown a span { color:var(--placeholder); font-size:clamp(.76rem,.38vw,.9rem); font-weight:500; } @keyframes series-menu-in { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translate(-50%,0); } } .header-quote { min-height:54px; display:flex; align-items:center; padding:0 22px; font-size:17px; white-space:nowrap; transition:background .2s ease; } .menu-toggle,.mobile-nav { display:none; } .hero { position:relative; min-height:calc(100svh - var(--header)); display:grid; align-items:end; overflow:hidden; color:white; background:var(--dark-region); } .hero>img { position:absolute; inset:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center 58%; object-position:center 58%; } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,13,10,.76) 0%,rgba(8,13,10,.28) 52%,rgba(8,13,10,.1) 100%); } .hero-content { position:relative; z-index:1; width:min(1380px,calc(100% - 120px)); margin:0 auto clamp(4rem,10vh,8rem); } .hero h1 { max-width:860px; margin-bottom:1.4rem; font-size:clamp(3rem,6vw,6.8rem); line-height:.92; } .hero-content>p { max-width:620px; margin-bottom:2rem; color:var(--surface-green); font-size:clamp(1rem,1.4vw,1.22rem); } .hero-note { position:absolute; z-index:1; right:3rem; bottom:2rem; margin:0; color:var(--dark-region-text); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; } .carousel-media, .carousel-media .carousel-slide, .carousel-media .carousel-slide>picture, .carousel-media img{ position:absolute; inset:0; width:100%; height:100%; } .carousel-media .carousel-slide { opacity:0; transform:scale(1.025); transition:opacity .4s ease,transform .4s ease; } .carousel-media .carousel-slide.active { opacity:1; transform:scale(1); } .carousel-media img { display:block; -o-object-fit:cover; object-fit:cover; -o-object-position:var(--carousel-object-position,center); object-position:var(--carousel-object-position,center); } .comparison-section{ scroll-margin-top:var(--header); } .projects-library { width:min(1840px,calc(100% - clamp(48px,5vw,128px))); } .video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.2vw,2.5rem); } .video-grid article { min-width:0; display:flex; flex-direction:column; color:var(--ink); background:transparent; } .video-frame>button:not(.video-close) { padding:0; border:0; overflow:hidden; cursor:pointer; }.video-frame>button:not(.video-close):hover img { transform:scale(1.02); filter:brightness(.78); } .video-safe-fallback { min-height:160px; display:grid; place-items:center; color:var(--text-secondary); background:var(--media-placeholder); font-size:.875rem; } .video-title { min-height:2.6em; margin:1.15rem 0 0; font-size:clamp(1.125rem,1.4vw,1.5rem); font-weight:500; line-height:1.25; letter-spacing:-.02em; } .video-title span { display:block; } .projects-library--single .video-grid { grid-template-columns:minmax(0,1fr); max-width:1200px; } .assembly-film { display:grid; grid-template-columns:minmax(0,2fr) minmax(360px,1fr); gap:clamp(3rem,4vw,5rem); align-items:stretch; color:var(--ink); background:transparent; } .assembly-film-media { position:relative; align-self:start; overflow:hidden; aspect-ratio:16/9; background:var(--media-placeholder); } .assembly-film-media iframe,.style-a-film-media iframe,.style-b-film-media iframe,.style-bl-film-media iframe,.style-c-film-media iframe { display:block; width:100%; height:100%; border:0; } .assembly-film video { display:block; width:100%; height:100%; -o-object-fit:contain; object-fit:contain; background:var(--media-placeholder); cursor:pointer; } .assembly-film-proof { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); padding:0; } .assembly-film-proof--materials { --material-copy-size:clamp(1.75rem,2vw,3rem); min-height:0; display:grid; grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .assembly-film-materials { min-width:0; display:flex; flex-wrap:wrap; align-content:center; gap:.18em .22em; margin:0; padding:clamp(1.4rem,2.5vw,3rem) 0; color:var(--ink); font-size:var(--material-copy-size); font-weight:400; line-height:1.08; letter-spacing:-.03em; } .assembly-film-materials span { display:inline-flex; align-items:baseline; } .assembly-film-materials span:not(:last-child)::after { content:' ·'; margin-left:.22em; color:var(--green); } .assembly-film-material-message { min-width:0; display:flex; align-items:center; max-width:24ch; margin:0; padding:clamp(1.4rem,2.5vw,3rem) 0; border-top:1px solid var(--line); color:var(--ink); font-size:var(--material-copy-size); line-height:1.12; letter-spacing:-.03em; text-wrap:balance; } .product-image-wrap>picture,.gallery-main>picture,.gallery-thumbs picture,.plan-grid picture { display:block; width:100%; height:100%; } .comparison { --comparison-split:50%; position:relative; width:100%; margin-inline:auto; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .comparison .comparison-media,.comparison .comparison-image { display:block; width:100%; height:auto; pointer-events:none; } .comparison-layer-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--comparison-split)) 0 0); pointer-events:none; } .comparison-control { position:absolute; z-index:3; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:ew-resize; touch-action:pan-y; } /* Comparison 控件（VIS-016）。两处都是可客观验证的修正： ① 端点裁切：容器 overflow:hidden，而手柄按 left:split + translate(-50%) 定位，0%/100% 时必然各裁掉半个圆。 修法只夹**手柄的视觉中心**（clamp 到 23px / 100%-23px），分割线仍停在真实 split 上 —— 语义不变。 ② 对比度：原先 1px #8b928b 在浅石材上只有 2.18:1、在中灰石上 1.54:1，低于 WCAG 非文本 3:1； 审计建议的 rgba(23,26,24,.22) 实测更低（1.55:1，见 AUDIT §50.1），所以改用既有 token --text-secondary(#4b514d)：白 8.13:1 / 浅石材 5.55:1 / 中灰石 3.93:1。纯白分割线则加深色投影。 */ .comparison-line { position:absolute; inset-block:0; left:var(--comparison-split); width:2px; background:white; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 0 2px rgba(0,0,0,.45)); } .comparison-handle { position:absolute; top:50%; left:clamp(23px,var(--comparison-split),calc(100% - 23px)); width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--text-secondary); border-radius:50%; color:var(--text-primary); background:white; box-shadow:0 2px 12px rgba(0,0,0,.2); transform:translate(-50%,-50%); pointer-events:none; } .comparison-layer-before,.comparison-line,.comparison-handle { transition-property:none; } .comparison:has(.comparison-control:focus-visible) { outline:3px solid var(--brand-green); outline-offset:3px; } .project-empty { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem; border:1px solid var(--line); background:var(--page-background); text-align:center; } .project-empty h3 { margin-bottom:.6rem; font-size:2rem; } .project-empty p { max-width:620px; } .video-grid iframe,.video-grid button { border:0; } .style-a-film-media,.style-b-film-media,.style-bl-film-media,.style-c-film-media,.assembly-film-media { position:relative; } .local-video-poster { position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block; -o-object-fit:cover; object-fit:cover; pointer-events:none; } .footer-lead { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:5rem 0; border-bottom:1px solid var(--dark-region-line); } .footer-lead h2 { max-width:770px; margin:0; font-size:clamp(2.2rem,4vw,4.6rem); line-height:1; } .page-hero { min-height:480px; display:flex; align-items:end; padding:6rem max(40px,calc((100% - 1380px)/2)); background:var(--muted-surface); } /* 悬浮覆盖层（2026-09-26 业主指令）：`.page-hero` 是 features / contact / privacy / terms 的**首块**， 它的顶距就是"文字离页面顶部的距离" —— 因此安全距离加在这个内容容器上（取既有节奏与 导航栏高度 + 16px 的较大值，窄屏 `4rem`/`--rhythm-section` 都低于导航栏 76px，审计实测会遮挡）。 */ .page-hero { padding-top:max(6rem, calc(var(--header) + 16px)); } .page-hero.with-image { position:relative; min-height:670px; color:white; overflow:hidden; } .page-hero.with-image>.page-hero-image { position:absolute; inset:0; width:100%; height:100%; } .page-hero.with-image>.page-hero-image img,.page-hero.with-image>img.page-hero-image { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; } .page-hero>div:last-child { position:relative; z-index:1; width:min(820px,100%); } .page-hero h1 { margin-bottom:1.25rem; font-size:clamp(3rem,6vw,6.7rem); line-height:.93; } .page-hero p { max-width:690px; font-size:1.1rem; } .page-hero.with-image p { color:var(--dark-region-text); } .page-hero.page-hero--utility { min-height:0; padding-top:max(var(--rhythm-section), calc(var(--header) + 16px)); padding-bottom:0; } .page-hero--utility p:last-child { margin-bottom:0; } .section:is(.projects-library,.contact-layout,.legal-copy) { padding-block:var(--rhythm-section) var(--rhythm-group); } /* 悬浮覆盖层（2026-09-26 业主指令）：`/contact`、`/privacy`、`/terms` 是**文字打头**的页面， 没有通顶画幅可依赖，因此顶部安全距离加在这两个内容容器自己身上（`--rhythm-section` 在窄屏只有 48px < 导航栏 76px，审计实测会钻进导航栏底下）。`.projects-library` 不在此列：它排在 Hero 之后。 */ .section:is(.contact-layout,.legal-copy) { padding-block:calc(var(--header) + var(--rhythm-section)) var(--rhythm-group); } .page-hero--utility h1 { font-size:clamp(3rem,5vw,5.4rem); } /* VIS-018（业主 2026-09-21）：panel-section / panel-advantage-grid / feature-page-grid 这一套 "六宫格 + 深绿卡墙"模板语言，实测在全部预渲染 HTML 与 TSX 里零命中（只有两条文本断言 在替它们续命），属于"没有页面的样式" —— 连规则一起删除。现在的 /features 是 features-story 叙事 + 证据表，版式节奏由 features.css 负责。 */ .applications-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rhythm-group) clamp(28px,2.4vw,40px); } .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }.contact-layout>div:first-child h2 { font-size:3rem; }.contact-card { padding:3rem; background:var(--surface-accent); }.contact-card h2 { font-size:2.4rem; }.contact-card :is(.eyebrow,.contact-list a) { color:var(--green-dark); }.contact-list { margin:1.5rem 0 0; padding:0; list-style:none; }.contact-list li { display:grid; grid-template-columns:80px 1fr; gap:1rem; padding:.8rem 0; border-top:1px solid var(--warm-line); }.contact-list li>span:first-child { color:var(--text-secondary); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.contact-list a { min-height:44px; display:inline-flex; align-items:center; color:var(--green); border-bottom:1px solid currentColor; } .legal-copy { max-width:900px; }.legal-copy h2 { margin:var(--rhythm-group) 0 var(--rhythm-title); font-size:2rem; }.legal-copy h2:first-child { margin-top:0; }.legal-copy p { margin-bottom:0; font-size:1.08rem; } .product-hero-carousel-slide, .product-hero-carousel-slide>picture, .product-hero-carousel-slide img{ position:absolute; inset:0; width:100%; height:100%; } .product-hero-carousel-slide { opacity:0; transition:opacity .9s cubic-bezier(.16,1,.3,1); pointer-events:none; } .product-hero-carousel-slide.is-active { opacity:1; } .product-hero-carousel-slide img { display:block; -o-object-fit:cover; object-fit:cover; } .gallery-thumbs button.active { border-color:var(--green); } .style-a-film-section,.style-b-film-section,.style-bl-film-section,.style-c-film-section { padding:clamp(2rem,4vw,4rem) 0; background:var(--surface); } .style-a-film-layout,.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { width:min(1600px,calc(100% - 80px)); margin-inline:auto; } .style-a-film-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; } .style-a-film-media { width:100%; padding:0; overflow:hidden; border:0; background:var(--media-placeholder); aspect-ratio:16/9; cursor:pointer; } .style-a-film-media video { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; } .style-a-film-media:focus-visible { outline:3px solid var(--green); outline-offset:3px; } .style-a-film-copy { display:flex; align-items:center; } .style-a-film-copy h2 { width:100%; margin:0; font-size:clamp(2.2rem,3.4vw,4.35rem); line-height:.96; letter-spacing:-.04em; text-wrap:balance; } .style-a-film-copy h2 span { display:block; padding:clamp(1.2rem,2vw,2rem) 0; border-top:1px solid var(--line); } .style-a-film-copy h2 span:last-child { border-bottom:1px solid var(--line); } .style-b-film-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; } .style-b-film-copy { display:flex; align-items:center; } .style-b-film-copy h2 { width:100%; margin:0; font-size:clamp(2.35rem,3.7vw,4.6rem); line-height:.94; letter-spacing:-.04em; text-wrap:balance; } .style-b-film-copy h2 span { display:block; padding:clamp(1.2rem,2vw,2rem) 0; border-top:1px solid var(--line); } .style-b-film-copy h2 span:last-child { border-bottom:1px solid var(--line); } .style-b-film-copy strong { display:block; margin-bottom:.35rem; color:var(--green); font-size:1.12em; font-weight:600; } .style-b-film-media { width:100%; min-width:0; padding:0; overflow:hidden; border:0; background:var(--white); aspect-ratio:950/537; cursor:pointer; } .style-b-film-media video { width:100%; height:100%; display:block; -o-object-fit:cover; object-fit:cover; transform:scale(1.006); } .style-bl-film-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; } .style-bl-film-media { width:100%; min-width:0; padding:0; overflow:hidden; border:0; background:var(--media-placeholder); aspect-ratio:16/9; cursor:pointer; } .style-bl-film-media video { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; } .style-bl-film-media:focus-visible { outline:3px solid var(--green); outline-offset:3px; } .style-bl-film-proof { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); } .style-c-film-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; } .style-c-film-copy { display:flex; align-items:center; } .style-c-film-copy h2 { width:100%; margin:0; padding:clamp(1.2rem,2vw,2rem) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:clamp(2.15rem,3vw,3.8rem); line-height:.98; letter-spacing:-.04em; text-wrap:balance; } .style-c-film-media { width:100%; min-width:0; padding:0; overflow:hidden; border:0; background:var(--media-placeholder); aspect-ratio:16/9; cursor:pointer; } .style-c-film-media video { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; } .style-c-film-media:focus-visible { outline:3px solid var(--green); outline-offset:3px; } .plan-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }.plan-grid figure { margin:0; padding:1rem; background:var(--page-background); }.plan-grid img { width:100%; height:540px; -o-object-fit:contain; object-fit:contain; }.plan-grid figcaption { margin-top:1rem; color:var(--text-secondary); font-size:.875rem; } .quote-form{ width:min(100%,800px); margin-inline:auto; } .field { min-width:0; display:flex; flex-direction:column; } .field.full,.checkbox.full { grid-column:1/-1; } .field label { min-height:24px; margin-bottom:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.015em; } .field input,.field select,.field textarea { width:100%; min-height:56px; padding:.85rem 1rem; border:1px solid var(--line-strong); border-radius:0; color:var(--ink); background:var(--card-background); transition:border-color .16s,box-shadow .16s; } .field input:focus,.field select:focus,.field textarea:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 2px rgba(21,72,51,.14); } .field textarea { resize:vertical; } .field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"] { border-color:var(--danger); } .field-error { margin:.35rem 0 0; color:var(--danger); font-size:.8rem; } .checkbox { min-height:44px; display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; line-height:1.5; cursor:pointer; } .checkbox input { width:22px; height:22px; flex:none; margin-top:2px; } .quote-submit-error { margin-top:1.25rem; padding:1rem; border-left:3px solid var(--danger); background:var(--muted-surface); } .quote-form [aria-invalid="true"], .quote-success h1{ scroll-margin-top:calc(var(--header) + 24px); } .quote-success { min-height:calc(100vh - var(--header)); /* 兜底 */ /* 【2026-10-01】同上：动态工具栏下用 dvh 才不会底部被裁。 */ min-height:calc(100dvh - var(--header)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 1.5rem; text-align:center; } .quote-success-number { color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.14em; } .quote-success h1 { max-width:900px; font-size:clamp(2.8rem,5vw,5rem); line-height:1; } .quote-success>p { max-width:650px; } .quote-success-actions { display:flex; align-items:center; gap:2rem; margin-top:2rem; } .quote-success-actions .text-link { display:inline-flex; align-items:center; gap:.5rem; } .quote-success-reset { margin-top:2rem; padding:.5rem; border:0; border-bottom:1px solid currentColor; color:var(--placeholder); background:transparent; cursor:pointer; } /* 「已入库」与「通知邮件已发出」是两件事：状态标签与说明文字分开呈现，绝不谎报已发送。 */ .quote-success-label { margin-top:1.5rem; color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .quote-success-status { margin-top:.5rem; max-width:650px; color:var(--ink-soft); font-size:.95rem; line-height:1.6; } .quote-success-status a { min-height:44px; display:inline-flex; align-items:center; color:var(--green-dark); font-weight:600; } .quote-success-status a:hover { text-decoration:underline; text-underline-offset:4px; } @media (max-width:1023px) { .assembly-film { grid-template-columns:1fr; gap:3rem; } .assembly-film-media { width:min(100%,960px); margin-inline:auto; } .assembly-film-proof { grid-template-rows:auto; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:clamp(2rem,6vw,6rem); align-items:start; } .assembly-film-proof--materials { min-height:clamp(420px,60vw,560px); display:grid; } } @media (min-width:901px) and (max-width:1279px) { :root { --header:clamp(88px,7.3vw,94px); } .site-header { gap:clamp(16px,1.7vw,22px); padding-inline:clamp(24px,2.5vw,32px); } .site-header .brand { min-width:clamp(160px,14vw,178px); } .site-header .brand-logo { width:clamp(160px,14vw,178px); } .desktop-nav { gap:clamp(14px,1.3vw,20px); } .desktop-nav :is(a, .series-trigger) { font-size:clamp(16px,1.25vw,17px); } .header-quote { min-height:48px; padding-inline:clamp(14px,1.5vw,18px); font-size:1rem; } } @media (max-width:1279px) { .applications-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px) { .video-grid { grid-template-columns:1fr; } .style-a-film-layout,.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { grid-template-columns:1fr; gap:2.5rem; } .style-a-film-copy h2 { font-size:clamp(2.3rem,7vw,3.6rem); } .style-b-film-copy h2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; font-size:clamp(2.3rem,7vw,3.6rem); } .style-b-film-copy h2 span:last-child { border-bottom:0; } .style-bl-film-proof { grid-template-rows:auto auto; gap:2.5rem; } .style-c-film-copy h2 { font-size:clamp(2.3rem,7vw,3.6rem); } .assembly-film-proof { grid-template-columns:1fr; grid-template-rows:auto auto; gap:2.5rem; } .brand { min-width:118px; }.brand-logo { width:118px; } :root { --header:76px; }.section-shell { width:min(100% - 40px,1380px); }.site-header { gap:16px; padding-inline:16px; }.site-header .brand { min-width:clamp(140px,38vw,150px); }.site-header .brand-logo { width:clamp(140px,38vw,150px); }.desktop-nav,.header-quote { display:none; }.menu-toggle { display:grid; place-items:center; width:44px; height:44px; margin-left:auto; padding:0; border:0; background:transparent; cursor:pointer; }.mobile-nav { position:absolute; z-index:90; top:100%; right:0; left:0; height:calc(100dvh - var(--header)); overflow-y:auto; display:flex; flex-direction:column; gap:0; padding:2rem 1.25rem; background:var(--paper); visibility:hidden; transition:opacity .2s,visibility .2s; }.mobile-nav.open { visibility:visible; }.mobile-nav>a:not(.button) { min-height:56px; display:flex; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.35rem; }.mobile-nav .button { margin-top:2rem; align-self:stretch; } .mobile-series-block { border-bottom:1px solid var(--line); }.mobile-series-toggle { width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; padding:0; border:0; background:transparent; font-size:1.35rem; text-align:left; }.mobile-series-toggle svg { transition:transform .2s; }.mobile-series-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }.mobile-series-links { display:flex; flex-direction:column; padding:0 0 1rem 1rem; }.mobile-series-links a { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); color:var(--text-secondary); font-size:.9rem; }.mobile-series-links a span { color:var(--text-secondary); font-size:.75rem; } .mobile-nav a[aria-current="page"] { padding-left:.75rem; color:var(--green-dark); box-shadow:inset 3px 0 0 var(--green); font-weight:700; } .mobile-nav { transform:none; opacity:0; pointer-events:none; }.mobile-nav.open { opacity:1; pointer-events:auto; } .hero-content { width:calc(100% - 40px); }.hero-note { right:1.25rem; }.contact-layout{ grid-template-columns:1fr; }.plan-grid img { height:420px; } } @media (max-width:700px) { .applications-index-grid { grid-template-columns:1fr; } } @media (max-width:620px) { .style-a-film-layout,.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { width:calc(100% - 32px); } .style-a-film-copy h2 { font-size:clamp(2.25rem,10vw,3.1rem); } .style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { gap:2rem; } .style-b-film-copy h2 { grid-template-columns:1fr; gap:0; font-size:clamp(2.25rem,11vw,3.25rem); } .style-b-film-copy h2 span:last-child { border-bottom:1px solid var(--line); } .assembly-film-proof--materials { --material-copy-size:clamp(1.85rem,7.4vw,2.55rem); } .assembly-film-material-message { max-width:22ch; } .style-c-film-copy h2 { font-size:clamp(2.25rem,10vw,3.1rem); } .menu-toggle { position:relative; z-index:95; color:var(--ink); } .menu-toggle svg { width:24px; height:24px; display:block; stroke:currentColor; } .projects-library { width:calc(100% - 32px); } .assembly-film { gap:2rem; } .assembly-film-proof { gap:2rem; padding:0; } .section { padding:4.5rem 0; }.section-shell { width:calc(100% - 32px); }.footer-lead{ align-items:flex-start; flex-direction:column; }.hero { min-height:760px; }.hero>img { -o-object-position:58% center; object-position:58% center; }.hero-content { width:calc(100% - 32px); margin-bottom:5rem; }.hero h1 { font-size:3.2rem; }.hero-note { right:1rem; bottom:1rem; }.page-hero { min-height:480px; padding:max(4rem, calc(var(--header) + 16px)) 1rem; }.page-hero.with-image { min-height:620px; }.page-hero h1 { font-size:3.3rem; }.contact-card { padding:2rem 1.25rem; }.plan-grid { grid-template-columns:1fr; }.plan-grid img { height:auto; min-height:280px; }.quote-success dl { flex-direction:column; gap:1rem; } } /* Homepage and Series catalog. */ /* Application scene index. */ .applications-index-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--rhythm-group) clamp(24px,3vw,56px); } /* Why EcoNest: residential product story first, manufacturing proof second. */ @media (max-width:767px) { .applications-index-grid { grid-template-columns:1fr; } } /* Project portfolio. */ .projects-library { width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-wide)); } .projects-library:not(.projects-library--single) .video-grid { display:grid; grid-template-columns:1fr; row-gap:var(--rhythm-group); } .projects-library:not(.projects-library--single) .video-grid article { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); align-items:end; gap:clamp(36px,6vw,120px); padding:0; } .projects-library:not(.projects-library--single) .video-grid article:nth-child(even) { grid-template-columns:minmax(300px,.65fr) minmax(0,1.35fr); } .projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-frame { grid-column:2; } .projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-project-copy { grid-column:1; grid-row:1; } .projects-library .video-title { min-height:0; margin:0 0 18px; font-size:clamp(2rem,3vw,4.4rem); line-height:.94; letter-spacing:-.04em; } .projects-library--single .video-grid { max-width:1480px; margin-inline:auto; } @media (max-width:820px) { .projects-library:not(.projects-library--single) .video-grid article, .projects-library:not(.projects-library--single) .video-grid article:nth-child(even) { grid-template-columns:1fr; gap:var(--rhythm-caption); } .projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-frame, .projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-project-copy { grid-column:auto; grid-row:auto; } } .quote-success h1:focus{ outline:none; } @media (max-width:620px) { .page-hero--utility { padding-inline:1rem; } .page-hero--utility h1 { font-size:clamp(2.7rem,12vw,3.5rem); } .video-title { min-height:0; font-size:1.125rem; } } @media (max-width:620px) and (orientation:portrait) { .home-carousel .carousel-media .carousel-slide { transform:none; transition:opacity .4s ease; } .home-carousel .carousel-media .carousel-slide.active { transform:none; } } /* Get a Quote — single-page architectural concierge layout. */ @media (max-width:620px) { .quote-success-actions { align-items:stretch; flex-direction:column; } } @media (max-width:767px) and (orientation:portrait) { .page-hero--mobile-split.with-image { min-height:0; display:grid; grid-template-rows:auto auto; align-items:stretch; padding:0; overflow:visible; color:var(--ink); background:var(--paper); } .page-hero--mobile-split.with-image>.page-hero-image { position:relative; inset:auto; width:100%; height:auto; display:block; aspect-ratio:var(--mobile-hero-aspect,16/9); overflow:hidden; background:var(--paper); } .page-hero--mobile-split.with-image>.page-hero-image img, .page-hero--mobile-split.with-image>img.page-hero-image { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; background:var(--paper); } .page-hero--mobile-split.with-image>.hero-shade { display:none; } .page-hero--mobile-split.with-image>div:last-child { position:relative; inset:auto; z-index:1; width:calc(100% - 32px); margin:0 auto; padding:clamp(2rem,8vw,2.75rem) 0 max(3rem,calc(2.5rem + env(safe-area-inset-bottom))); color:var(--ink); background:var(--paper); } .page-hero--mobile-split h1 { max-width:13ch; margin-bottom:1rem; font-size:clamp(2.5rem,11vw,3.35rem); line-height:.96; letter-spacing:-.04em; overflow-wrap:normal; word-break:normal; text-wrap:balance; } .page-hero--mobile-split.with-image p { max-width:40ch; margin-bottom:1.5rem; color:var(--ink-soft); font-size:1rem; line-height:1.6; overflow-wrap:break-word; } } @media (max-width:620px) and (orientation:portrait) and (pointer:coarse) { } /* Shared architectural editorial system. */ :root { --content-max:2560px; --content-wide:3320px; --page-gutter:clamp(16px,3.25vw,96px); --reading-measure:68ch; --section-space:clamp(72px,7.5vw,180px); --section-space-compact:clamp(48px,5vw,112px); --display-xl:clamp(3.1rem,5.4vw,8rem); --display-lg:clamp(2.55rem,4.25vw,6rem); --display-md:clamp(2rem,3vw,4.1rem); --header:clamp(76px,4.2vw,92px); } html { scroll-padding-top:calc(var(--header) + 24px); } body { font-size:clamp(15px,.24vw + 14px,18px); line-height:1.65; } p { max-width:var(--reading-measure); } .section-shell { width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max)); } .section { padding-block:var(--section-space); } .eyebrow { letter-spacing:.16em; } .section-heading h2, .page-hero h1, .marine-hero h1 { font-size:var(--display-lg); line-height:.94; letter-spacing:-.045em; text-wrap:balance; } .button { min-height:48px; padding:0 1.45rem; border-radius:0; box-shadow:none; letter-spacing:.08em; } .button:hover { transform:none; } .text-link { border-bottom:1px solid currentColor; padding-bottom:.18rem; } .site-header { height:var(--header); gap:clamp(18px,2vw,40px); padding-inline:var(--page-gutter); background:rgba(246,243,237,.97); } .site-header .brand { min-width:clamp(136px,9.5vw,190px); } .site-header .brand-logo { width:clamp(136px,9.5vw,190px); max-height:calc(var(--header) - 24px); } .desktop-nav { margin-left:auto; gap:clamp(16px,1.5vw,32px); } .desktop-nav :is(a, .series-trigger) { letter-spacing:.045em; } .header-quote { margin-left:clamp(0px,.7vw,12px); } @media (min-width:2000px) { .desktop-nav { font-size:1rem; } } @media (max-width:767px) { :root { --section-space:clamp(58px,18vw,84px); --section-space-compact:48px; } .section-shell { width:calc(100% - 32px); } } @media (orientation:landscape) and (max-height:520px) and (max-width:1024px) { :root { --header:64px; } .site-header { padding-inline:max(16px,env(safe-area-inset-left)); } .site-header .brand { min-width:126px; } .site-header .brand-logo { width:126px; max-height:44px; } .menu-toggle { width:44px; height:44px; } } /* Shared Series detail template. */ .product-page { overflow:clip; } .gallery-thumbs button.active { border-color:var(--green); } .plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,72px); } .plan-grid figure { min-width:0; margin:0; display:flex; flex-direction:column; background:transparent; } .plan-view-button { position:relative; width:100%; display:block; padding:0; border:0; background:white; cursor:pointer; } .plan-view-button picture, .plan-view-button img { width:100%; height:auto; display:block; -o-object-fit:contain; object-fit:contain; } .plan-grid figcaption { position:static; min-height:0; padding:18px 0 0; color:var(--ink); background:transparent; font-size:.8rem; line-height:1.5; } .plan-grid--wide-primary figure:first-child { grid-column:1/-1; } .plan-lightbox { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:clamp(16px,3vw,56px); background:rgba(15,20,17,.94); } .plan-lightbox-close { position:absolute; z-index:2; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); color:white; background:var(--dark-region); cursor:pointer; } /* 极简放大层（2026-09-22 业主规范）：只有遮罩 + 居中图片 + 右上角 X。 图片强制 contain，并同时受 90vw / 90vh 与 **2560px 上限**约束 —— 超宽屏上不会去要一张比 管线最大派生（2560）更大的图，也不会把图拉过它的原生宽度（管线的原则是不放大）。 */ .plan-lightbox-figure { display:grid; place-items:center; width:100%; height:100%; } .plan-lightbox-figure picture, .plan-lightbox-figure img { width:auto; height:auto; max-width:min(90vw,2560px); max-height:min(90vh,1600px); -o-object-fit:contain; object-fit:contain; } /* 多图轮播（2026-09-29 业主指令）：左右翻页键 + 计数。单张图时这两个元素根本不渲染， 所以"只有一个 X"的极简观感对平面图之类的单图场景仍然成立。 */ .plan-lightbox-nav { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); color:white; background:var(--dark-region); cursor:pointer; } .plan-lightbox-nav:hover { border-color:white; } .plan-lightbox-nav:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; } .plan-lightbox-nav--prev { left:max(12px,env(safe-area-inset-left)); } .plan-lightbox-nav--next { right:max(12px,env(safe-area-inset-right)); } /* 复用 ChevronDown（图标集里没有左右箭头），各自旋转 90° —— 与图集翻页键的同一手法。 */ .plan-lightbox-nav--prev svg { transform:rotate(90deg); } .plan-lightbox-nav--next svg { transform:rotate(-90deg); } .plan-lightbox-counter { position:absolute; z-index:2; bottom:max(16px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); margin:0; color:var(--dark-region-muted); font-size:.875rem; font-variant-numeric:tabular-nums; letter-spacing:.08em; } @media (max-width:619px) { .plan-lightbox-nav { width:44px; height:44px; } } @media (max-width:620px) { .plan-grid { grid-template-columns:1fr; gap:38px; } .plan-grid--wide-primary figure:first-child { grid-column:auto; } } @media (orientation:landscape) and (pointer:coarse) and (max-height:520px) and (max-width:1024px) { :root { --header:calc(52px + env(safe-area-inset-top)); } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .button:hover, .video-frame>button:not(.video-close):hover img, .product-image-wrap:hover img, .application-card:hover img{ transform:none!important; } } @media (prefers-reduced-motion:reduce) { .home-carousel .carousel-slide{ transition:none!important; transform:none!important; } } /* Detail Hero only: the image's intrinsic aspect ratio defines its full frame. */ @media (max-width:620px) and (orientation:portrait) and (pointer:coarse) { /* Preserve Style A's existing mobile content order and controls outside this media frame. */ } /* Projects films: click-to-play cards, independent of other video modules. */ .projects-library:has(.project-video-cards) { max-width:1840px; } .project-video-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; } .project-video-card { display:flex; flex-direction:column; min-width:0; border-bottom:1px solid var(--line); padding-bottom:20px; } .project-video-media { position:relative; aspect-ratio:16/9; background:var(--dark-region); } .project-video-cover,.project-video-player,.project-video-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .project-video-cover { padding:0; cursor:pointer; background:var(--dark-region); } .project-video-cover img { display:block; width:100%; height:100%; -o-object-fit:contain; object-fit:contain; } .project-video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:var(--brand-green); background:var(--paper,var(--page-background)); } .project-video-cover:hover .project-video-play { background:white; } .project-video-cover:focus-visible { outline:3px solid var(--brand-green); outline-offset:4px; } .project-video-card :is(h2,h3) { font-size:clamp(22px,1.6vw,26px); line-height:1.25; font-weight:500; letter-spacing:-.02em; margin:22px 0 12px; } .project-video-card :is(h2,h3) a { color:inherit; text-decoration:none; } .project-video-card :is(h2,h3) a:hover { text-decoration:underline; } .project-video-description { font-size:1rem; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; } .project-video-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-top:12px; margin-top:auto; min-height:44px; } .project-video-actions button { cursor:pointer; min-height:44px; background:none; color:var(--brand-green); } .project-video-actions .text-link { border:0; padding:0; display:inline-flex; gap:8px; align-items:center; } .project-video-dismiss { border:0; text-decoration:underline; padding:0; } .project-video-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; color:white; background:var(--dark-region); } .project-video-status p { margin:0; } .project-video-status a { color:white; text-decoration:underline; } @media(max-width:820px) { .project-video-cards { grid-template-columns:1fr; gap:32px; } .project-video-card :is(h2,h3) { font-size:22px; margin-top:18px; } .project-video-actions { margin-top:0; } } .project-video-status p { color:inherit; } .projects-library--single .project-video-cards { grid-template-columns:minmax(0,1fr); } /* 内容来源提示（仅 cms 模式渲染，生产 local 构建不出现）。绿色=内容来自 CMS，红色=已回退本地。 */ .content-source-note { position:fixed; z-index:200; left:8px; bottom:8px; margin:0; padding:6px 10px; color:var(--dark-region-text); background:var(--green-dark); font-size:.75rem; font-weight:600; line-height:1.4; } .content-source-note[data-content-source="local-fallback"] { background:var(--danger); } /* ───────────────────────────────────────────────────────────────────────────── 【2026-10-01 上线前体检】手机端触摸热区与输入框字号 · iOS Safari：输入框字号 < 16px 时，点击会强制放大整个页面（防不住，只能把字号提到 16px）； · 触摸目标：Apple/Google 的可用性基线是 44×44px（本项目筛选 chip 原为 43×38、手风琴按钮 32×32）。 只在窄屏生效，桌面端版式不受影响。 ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .gallery-hall-chip { min-height: 44px; padding-inline: 14px; } .applications-accordion-toggle { min-width: 44px; min-height: 44px; } .application-search-row input, .quote-layout .field input, .quote-layout .field select, .quote-layout .field textarea, /* 通用兜底：仍留在 index.css 的输入框（报价表单字段本身已是 ≥16px）。 注意：同优先级的组件内规则可能因打包顺序覆盖本行 —— 组件专属规则要写在组件自己的 CSS 里。 */ .quote-layout .field input, .quote-layout .field select, .quote-layout .field textarea { font-size: 16px; } }