/* ========================================================================== 度榆生 Devoshine — 官网设计系统 / Design System 设计规范继承自 duyusheng.pages.dev（brand token / 字体层级 / 区块节奏）纯 CSS，无构建步骤，无外部依赖（字体为渐进增强） ========================================================================== */ /* -------------------------------------------------------------------------- 1. 设计令牌 Design tokens -------------------------------------------------------------------------- */ :root { /* 品牌主色 —— 取自原站 brand-primary 色阶 */ --brand-primary: #0abab5; --brand-primary-light: #4dd4d0; --brand-primary-dark: #089e9a; --brand-primary-50: #e6faf9; --brand-primary-100: #ccf5f4; /* 品牌辅色与点缀 */ --brand-secondary: #1a1a2e; /* 深墨蓝，用于标题与深色区块 */ --brand-gold: #c9a96e; /* 榆木金，用于细节与分隔线 */ /* 中性色 */ --ink: #1a1a2e; --ink-soft: #3d3d52; --muted: #6b6b7b; --muted-light: #9a9aa8; --line: #eceaf0; --line-strong: #ddd9e0; --paper: #ffffff; --paper-warm: #faf8f5; /* 质朴的暖白，用于卡片衬底 */ /* 语义色 */ --success: #2f8f5b; --alert: #b3563f; /* 排版 */ --font-display-zh: "Noto Serif SC", "Songti SC", STSong, SimSun, Georgia, "Times New Roman", serif; --font-body-zh: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif; --font-display-en: Georgia, "Iowan Old Style", "Times New Roman", "Palatino Linotype", serif; --font-body-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 版面节奏 —— 对齐原站 py-20 / md:py-28 */ --sec-y: 5rem; /* 80px */ --sec-y-lg: 7rem; /* 112px */ --container: 72rem; /* max-w-6xl 1152px */ --container-narrow: 48rem; --header-h: 4.25rem; /* 圆角与阴影 —— 对齐原站 rounded-2xl / rounded-full / shadow-sm */ --r-sm: 0.75rem; --r-md: 1rem; --r-lg: 1.25rem; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04), 0 1px 3px rgba(26, 26, 46, 0.03); --shadow-md: 0 6px 24px -6px rgba(26, 26, 46, 0.10), 0 2px 8px -4px rgba(26, 26, 46, 0.05); --shadow-lg: 0 20px 50px -18px rgba(26, 26, 46, 0.22); /* 动效 */ --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* 默认按中文排版；英文页在上覆写 */ :root { --font-display: var(--font-display-zh); --font-body: var(--font-body-zh); } body.lang-en { --font-display: var(--font-display-en); --font-body: var(--font-body-en); } /* -------------------------------------------------------------------------- 2. 基础重置 Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--paper); } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--ink-soft); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--brand-secondary); font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: 0.02em; } /* 中文标题需要更宽的字距，呼应原站 tracking-wider */ body:not(.lang-en) h1, body:not(.lang-en) h2, body:not(.lang-en) h3 { letter-spacing: 0.08em; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } strong { color: var(--brand-secondary); font-weight: 600; } ::selection { background: var(--brand-primary-100); color: var(--brand-secondary); } :focus-visible { outline: 2px solid var(--brand-primary-dark); outline-offset: 3px; border-radius: 4px; } /* 跳转到主内容（无障碍） */ .skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 200; background: var(--brand-secondary); color: #fff; padding: 0.6rem 1.1rem; border-radius: var(--r-pill); font-size: 0.85rem; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0.75rem; } /* -------------------------------------------------------------------------- 3. 布局 Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: 80rem; } .section { padding-block: var(--sec-y); } .section--tint { background: var(--brand-primary-50); } .section--warm { background: var(--paper-warm); } .section--tight { padding-block: 3.5rem; } .section--dark { background: radial-gradient(1100px 460px at 12% -10%, rgba(10, 186, 181, 0.30), transparent 62%), radial-gradient(760px 420px at 92% 108%, rgba(201, 169, 110, 0.16), transparent 60%), var(--brand-secondary); color: rgba(255, 255, 255, 0.76); } .section--dark h2, .section--dark h3 { color: #fff; } /* 区块标题组 —— 对齐原站居中标题 + 两侧细线 eyebrow */ .sec-head { text-align: center; max-width: 46rem; margin: 0 auto 3.25rem; } .sec-head--left { text-align: left; margin-inline: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brand-primary-dark); font-weight: 500; margin-bottom: 1rem; } .eyebrow::before, .eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.42; } .eyebrow--solo::before, .eyebrow--solo::after { display: none; } .section--dark .eyebrow { color: var(--brand-primary-light); } .sec-head__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } .sec-head__title--sm { font-size: clamp(1.45rem, 3vw, 1.95rem); } .sec-head__lede { margin-top: 1.1rem; color: var(--muted); font-size: 1.02rem; line-height: 1.85; } .section--dark .sec-head__lede { color: rgba(255, 255, 255, 0.68); } /* 细分隔线（原站 h-px w-12） */ .rule { width: 3rem; height: 1px; background: var(--brand-gold); margin: 1.4rem auto 0; border: 0; } .rule--left { margin-inline: 0; } /* -------------------------------------------------------------------------- 4. 顶栏 Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: baseline; gap: 0.6rem; flex-shrink: 0; } .brand__mark { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; color: var(--brand-secondary); letter-spacing: 0.14em; line-height: 1; } .brand__sub { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-primary-dark); font-weight: 500; } .nav { display: flex; align-items: center; gap: 1.85rem; } .nav__link { font-size: 0.9rem; color: var(--ink-soft); padding-block: 0.35rem; position: relative; transition: color 0.2s var(--ease); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand-primary); transform: scaleX(0); transform-origin: center; transition: transform 0.25s var(--ease); border-radius: 2px; } .nav__link:hover { color: var(--brand-primary-dark); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__link.is-active { color: var(--brand-primary-dark); font-weight: 500; } .header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } /* 语言切换 */ .lang-switch { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .lang-switch:hover { border-color: var(--brand-primary); color: var(--brand-primary-dark); } .lang-switch__sep { opacity: 0.4; } .lang-switch .is-current { color: var(--brand-secondary); font-weight: 600; } .nav-toggle { display: none; background: none; border: 0; padding: 0.45rem; cursor: pointer; border-radius: var(--r-sm); color: var(--brand-secondary); } .nav-toggle:hover { background: var(--brand-primary-50); } /* 语言切换在窄屏移入导航菜单内（见 .nav__lang），避免顶栏拥挤 */ .nav__lang { display: none; gap: 1rem; margin-top: 0.85rem; padding-top: 0.95rem; border-top: 1px solid var(--line); font-size: 0.9rem; } .nav__lang a { color: var(--muted); } .nav__lang a.is-current { color: var(--brand-secondary); font-weight: 600; } /* -------------------------------------------------------------------------- 5. 按钮 Buttons —— 原站以 rounded-full 胶囊为主 -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.78rem 1.7rem; border: 1px solid transparent; border-radius: var(--r-pill); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all 0.25s var(--ease); text-align: center; line-height: 1.2; } .btn--primary { background: var(--brand-primary); color: #fff; box-shadow: 0 4px 14px -4px rgba(10, 186, 181, 0.55); } .btn--primary:hover { background: var(--brand-primary-dark); transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(10, 186, 181, 0.6); } .btn--outline { border-color: var(--line-strong); color: var(--brand-secondary); background: transparent; } .btn--outline:hover { border-color: var(--brand-primary); color: var(--brand-primary-dark); background: var(--brand-primary-50); } .btn--light { background: #fff; color: var(--brand-secondary); } .btn--light:hover { background: var(--brand-primary-50); color: var(--brand-primary-dark); transform: translateY(-1px); } .btn--ghost-light { border-color: rgba(255, 255, 255, 0.45); color: #fff; } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; } .btn--sm { padding: 0.55rem 1.15rem; font-size: 0.84rem; } .btn--lg { padding: 0.95rem 2.1rem; font-size: 1rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; } .btn-row--center { justify-content: center; } /* 文字链接箭头 */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand-primary-dark); font-size: 0.9rem; font-weight: 500; transition: gap 0.25s var(--ease); } .link-arrow:hover { gap: 0.7rem; } .link-arrow svg { width: 1rem; height: 1rem; } /* -------------------------------------------------------------------------- 6. 首屏 Hero —— 原站为整屏渐变 + 装饰光斑 + 居中排版 -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(88vh, 46rem); padding-block: 6rem 5rem; text-align: center; color: #fff; background: radial-gradient(1200px 620px at 50% -18%, rgba(77, 212, 208, 0.55), transparent 60%), linear-gradient(150deg, #067a76 0%, var(--brand-primary-dark) 34%, var(--brand-primary) 68%, #35cfc9 100%); } .hero--page { min-height: 0; padding-block: 5.25rem 4.5rem; } .hero--compact { padding-block: 4.25rem 3.75rem; } /* 装饰光斑 —— 呼应原站的柔和圆形 */ .hero__orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); } .hero__orb--1 { width: 22rem; height: 22rem; top: -7rem; left: -6rem; background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%); } .hero__orb--2 { width: 30rem; height: 30rem; bottom: -12rem; right: -9rem; background: radial-gradient(circle, rgba(255,255,255,0.13), transparent 70%); } .hero__orb--3 { width: 13rem; height: 13rem; top: 18%; right: 9%; border: 1px solid rgba(255,255,255,0.16); background: none; } .hero__orb--4 { width: 7rem; height: 7rem; bottom: 16%; left: 12%; border: 1px solid rgba(255,255,255,0.12); background: none; } /* 远山线条装饰 */ .hero__art { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; opacity: 0.5; pointer-events: none; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 1.5rem; } .hero__title { color: #fff; font-size: clamp(2.1rem, 6.2vw, 4rem); letter-spacing: 0.1em; line-height: 1.18; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.12); } body.lang-en .hero__title { letter-spacing: 0.015em; font-size: clamp(2rem, 5.6vw, 3.6rem); } .hero__rule { width: 3.5rem; height: 1px; background: var(--brand-gold); border: 0; margin: 1.6rem auto; opacity: 0.95; } .hero__sub { font-size: clamp(0.98rem, 2vw, 1.12rem); letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.85rem; } body.lang-en .hero__sub { letter-spacing: 0.06em; } .hero__tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(0.95rem, 1.8vw, 1.08rem); color: rgba(255, 255, 255, 0.85); margin-bottom: 0; } .hero__lede { max-width: 38rem; margin: 1.5rem auto 0; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; line-height: 1.85; } .hero__actions { margin-top: 2.25rem; } .hero__meta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; font-size: 0.82rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.78); } .hero__meta span { display: inline-flex; align-items: center; gap: 0.45rem; } .hero__meta svg { width: 0.95rem; height: 0.95rem; opacity: 0.85; } /* -------------------------------------------------------------------------- 7. 网格与卡片 Grid / Card -------------------------------------------------------------------------- */ .grid { display: grid; gap: 1.5rem; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--gap-lg { gap: 2rem; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); height: 100%; } .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-primary-100); } .card--flush { padding: 0; overflow: hidden; } .card--warm { background: var(--paper-warm); } .card--tall { display: flex; flex-direction: column; } .card__icon { width: 2.9rem; height: 2.9rem; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-primary-50); color: var(--brand-primary-dark); margin-bottom: 1.2rem; } .card__icon svg { width: 1.45rem; height: 1.45rem; } .card__title { font-size: 1.1rem; margin-bottom: 0.7rem; letter-spacing: 0.06em; } .card__text { font-size: 0.93rem; color: var(--muted); line-height: 1.8; } /* 价值观卡（虔诚 / 质朴 / 生长 / 温度） */ .value { text-align: center; padding: 2.2rem 1.5rem; } .value__glyph { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--brand-primary-dark); line-height: 1; letter-spacing: 0.1em; margin-bottom: 1.1rem; } .value__title { font-size: 1.02rem; margin-bottom: 0.55rem; } .value__text { font-size: 0.9rem; color: var(--muted); line-height: 1.8; } /* 数据条 */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .stat { background: var(--paper); padding: 1.9rem 1.2rem; text-align: center; } .section--dark .stats { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12); } .section--dark .stat { background: rgba(255, 255, 255, 0.04); } .stat__num { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.15rem); font-weight: 700; color: var(--brand-primary-dark); line-height: 1.1; letter-spacing: 0.02em; } .section--dark .stat__num { color: var(--brand-primary-light); } .stat__label { margin-top: 0.5rem; font-size: 0.83rem; color: var(--muted); letter-spacing: 0.06em; } .section--dark .stat__label { color: rgba(255, 255, 255, 0.66); } /* -------------------------------------------------------------------------- 8. 图文框架 Frame —— 原站无实景照片，全部为渐变 + 线条图形交付时把 --frame-img 换成实景图 URL 即可无缝替换 -------------------------------------------------------------------------- */ .frame { --frame-img: none; position: relative; border-radius: var(--r-lg); overflow: hidden; background-color: var(--brand-primary-50); background-image: var(--frame-img); background-size: cover; background-position: center; aspect-ratio: 4 / 3; display: grid; place-items: center; isolation: isolate; } .frame--wide { aspect-ratio: 16 / 10; } .frame--tall { aspect-ratio: 3 / 4; } .frame--square { aspect-ratio: 1 / 1; } .frame--sm { border-radius: var(--r-md); } /* 渐变底色（无实景图时可见） */ .frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, 0.5), transparent 55%), linear-gradient(155deg, var(--brand-primary-100), var(--brand-primary-50) 45%, #dff3ef); } .frame--deep::before { background: radial-gradient(120% 90% at 25% 5%, rgba(77, 212, 208, 0.4), transparent 58%), linear-gradient(155deg, #0d8f8b, var(--brand-primary) 55%, #57d9d3); } /* 框架内的线条山水图形 */ .frame__art { width: 78%; max-width: 20rem; opacity: 0.75; color: var(--brand-primary-dark); } .frame--deep .frame__art { color: rgba(255, 255, 255, 0.78); opacity: 0.9; } /* 角标说明 */ .frame__cap { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); color: var(--brand-secondary); font-size: 0.76rem; letter-spacing: 0.08em; padding: 0.42rem 0.9rem; border-radius: var(--r-pill); font-weight: 500; } /* -------------------------------------------------------------------------- 9. 客房 Rooms -------------------------------------------------------------------------- */ .room-card { display: flex; flex-direction: column; } .room-card__frame { border-radius: 0; aspect-ratio: 16 / 11; } .room-card__body { padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; } .room-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; } .room-card__name { font-size: 1.14rem; letter-spacing: 0.05em; } .room-card__en { font-family: var(--font-display-en); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-primary-dark); white-space: nowrap; } .room-card__count { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 0.9rem; } .room-card__text { font-size: 0.92rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.15rem; } .spec-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.55rem; font-size: 0.88rem; } .spec-list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-soft); } .spec-list svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.32rem; color: var(--brand-primary); } .tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.35rem; } .tag { font-size: 0.74rem; letter-spacing: 0.05em; color: var(--brand-primary-dark); background: var(--brand-primary-50); border: 1px solid var(--brand-primary-100); border-radius: var(--r-pill); padding: 0.24rem 0.7rem; white-space: nowrap; } /* 房号列表 */ .room-nos { font-size: 0.8rem; color: var(--muted-light); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 10. 交替图文 Feature -------------------------------------------------------------------------- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .feature + .feature { margin-top: 4.5rem; } .feature--reverse .feature__media { order: 2; } .feature__title { font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin-bottom: 1rem; } .feature__text { color: var(--muted); line-height: 1.9; } /* -------------------------------------------------------------------------- 11. 步骤 / 时间线 -------------------------------------------------------------------------- */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.4rem; padding-bottom: 2rem; position: relative; } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: 1.6rem; top: 3.4rem; bottom: 0.4rem; width: 1px; background: linear-gradient(to bottom, var(--brand-primary-100), transparent); } .step:last-child::before { display: none; } .step__num { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary-50); border: 1px solid var(--brand-primary-100); color: var(--brand-primary-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; flex-shrink: 0; } .step__title { font-size: 1.05rem; margin-bottom: 0.5rem; margin-top: 0.7rem; } .step__text { font-size: 0.92rem; color: var(--muted); line-height: 1.8; } /* -------------------------------------------------------------------------- 12. 事实清单 Facts —— 便于 AI / 客人核验的结构化信息 -------------------------------------------------------------------------- */ .facts { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm); } .facts__row { display: grid; grid-template-columns: 11rem 1fr; gap: 1.25rem; padding: 1.05rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.93rem; } .facts__row:last-child { border-bottom: 0; } .facts__row:nth-child(odd) { background: var(--paper-warm); } .facts__k { color: var(--muted); letter-spacing: 0.05em; } .facts__v { color: var(--brand-secondary); font-weight: 500; } .section--dark .facts { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); } .section--dark .facts__row { border-color: rgba(255,255,255,0.12); } .section--dark .facts__row:nth-child(odd) { background: rgba(255,255,255,0.03); } .section--dark .facts__k { color: rgba(255,255,255,0.6); } .section--dark .facts__v { color: #fff; } /* -------------------------------------------------------------------------- 13. FAQ -------------------------------------------------------------------------- */ .faq { display: grid; gap: 0.75rem; } .faq__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .faq__item[open] { border-color: var(--brand-primary-100); box-shadow: var(--shadow-sm); } .faq__q { cursor: pointer; list-style: none; padding: 1.15rem 3.1rem 1.15rem 1.5rem; font-family: var(--font-display); font-weight: 600; color: var(--brand-secondary); font-size: 0.99rem; position: relative; letter-spacing: 0.03em; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 0.62rem; height: 0.62rem; border-right: 1.6px solid var(--brand-primary); border-bottom: 1.6px solid var(--brand-primary); transform: translateY(-70%) rotate(45deg); transition: transform 0.28s var(--ease); } .faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); } .faq__a { padding: 0 1.5rem 1.35rem; font-size: 0.93rem; color: var(--muted); line-height: 1.85; } /* -------------------------------------------------------------------------- 14. 表格 -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); } .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; } .table th, .table td { padding: 0.9rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); } .table th { background: var(--brand-primary-50); color: var(--brand-secondary); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.07em; white-space: nowrap; } .table tr:last-child td { border-bottom: 0; } .table td { color: var(--muted); } .table td strong { color: var(--brand-secondary); } /* -------------------------------------------------------------------------- 15. CTA 区块 -------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 3.25rem 2rem; text-align: center; color: #fff; background: radial-gradient(700px 300px at 50% -30%, rgba(77, 212, 208, 0.55), transparent 65%), linear-gradient(140deg, #067a76, var(--brand-primary-dark) 50%, var(--brand-primary)); } .cta-band h2 { color: #fff; font-size: clamp(1.45rem, 3.2vw, 2.05rem); } .cta-band p { color: rgba(255, 255, 255, 0.82); margin-top: 0.9rem; max-width: 34rem; margin-inline: auto; } .cta-band .btn-row { margin-top: 1.9rem; } /* 提示条 */ .notice { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--brand-primary-50); border: 1px solid var(--brand-primary-100); border-radius: var(--r-md); padding: 1rem 1.25rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.75; } .notice svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: 0.22rem; color: var(--brand-primary-dark); } /* 待填写占位（交付前需替换的内容） */ .todo { background: #fff6e5; border-bottom: 1px dashed var(--brand-gold); color: #8a6d2f; padding: 0 0.25rem; font-style: normal; border-radius: 3px; } /* -------------------------------------------------------------------------- 15b. 预订方式（电话 + 微信扫码）—— 本站不做在线预订 -------------------------------------------------------------------------- */ .book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; } .book-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 2.1rem 1.9rem 2.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .book-card .card__icon { margin-inline: auto; } .book-card__title { font-size: 1.15rem; margin-bottom: 0.7rem; letter-spacing: 0.06em; } .book-card__text { font-size: 0.93rem; color: var(--muted); line-height: 1.8; } /* 大号可点击电话号码 */ .phone-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; padding: 0.85rem 1.6rem; border-radius: var(--r-pill); background: var(--brand-primary-50); border: 1px solid var(--brand-primary-100); font-family: var(--font-display); font-size: clamp(1.05rem, 2.1vw, 1.42rem); font-weight: 700; letter-spacing: 0.04em; color: var(--brand-primary-dark); transition: all 0.25s var(--ease); overflow-wrap: break-word; max-width: 100%; } .phone-link:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; transform: translateY(-2px); } .phone-link svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } /* 二维码展示框 */ .qr-slot { width: min(14rem, 68%); margin: 1.5rem auto 0; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--paper-warm); } .qr-slot img { width: 100%; height: 100%; object-fit: contain; } /* 设备相关的操作提示：桌面端用手机扫，移动端长按识别 */ .hint-mobile { display: none; } @media (max-width: 900px) { .hint-desktop { display: none; } .hint-mobile { display: block; } } /* 页脚里的微信提示 */ .footer__wechat { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer__wechat img { width: 6rem; height: 6rem; border-radius: 6px; background: #fff; padding: 3px; flex-shrink: 0; } .footer__wechat figcaption { font-size: 0.8rem; line-height: 1.6; color: rgba(255, 255, 255, 0.5); } @media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 15c. 团队、作品与品牌主张（设计交付 / 关于我们使用） -------------------------------------------------------------------------- */ .person { text-align: center; } .person__name { font-size: 1.1rem; letter-spacing: 0.06em; margin-bottom: 0.35rem; } .person__role { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-primary-dark); font-weight: 500; margin-bottom: 0.95rem; } body:not(.lang-en) .person__role { letter-spacing: 0.1em; } .person__quote { font-family: var(--font-display); font-style: italic; font-size: 0.92rem; color: var(--muted); line-height: 1.8; } .person__bio { font-size: 0.9rem; color: var(--muted); line-height: 1.8; } /* 作品卡：沿用 .card--flush + .frame，此处只补文案排版 */ .work__body { padding: 1.5rem 1.5rem 1.6rem; } .work__name { font-size: 1.08rem; letter-spacing: 0.05em; margin-bottom: 0.45rem; } .work__desc { font-size: 0.9rem; color: var(--muted); line-height: 1.8; } /* 品牌主张大字块 */ .statement { text-align: center; max-width: 40rem; margin-inline: auto; } .statement__text { font-family: var(--font-display); font-size: clamp(1.25rem, 3.1vw, 1.9rem); line-height: 1.65; color: var(--brand-secondary); letter-spacing: 0.05em; font-weight: 600; } .section--dark .statement__text { color: #fff; } /* -------------------------------------------------------------------------- 16. 页脚 -------------------------------------------------------------------------- */ .site-footer { background: var(--brand-secondary); color: rgba(255, 255, 255, 0.6); padding-block: 3.5rem 2rem; font-size: 0.88rem; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer__brand .brand__mark { color: #fff; } .footer__brand .brand__sub { color: var(--brand-primary-light); } .footer__desc { margin-top: 1rem; line-height: 1.85; color: rgba(255, 255, 255, 0.55); max-width: 22rem; } .footer__title { color: #fff; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; } .footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .footer__links a { color: rgba(255, 255, 255, 0.6); transition: color 0.2s var(--ease); } .footer__links a:hover { color: var(--brand-primary-light); } .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; line-height: 1.7; } .footer__contact li { display: flex; gap: 0.6rem; } .footer__contact svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.3rem; color: var(--brand-primary-light); } .footer__bottom { padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.42); } .footer__cc { letter-spacing: 0.06em; } /* -------------------------------------------------------------------------- 17. 动效 -------------------------------------------------------------------------- */ /* 仅在 JS 可用时隐藏（html.js 由内联脚本添加）。这样在禁用 JS、脚本加载失败或被不执行 JS 的爬虫抓取时，所有内容依然完整可见、可索引。 */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } html.js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html.js .reveal { opacity: 1; transform: none; } } /* 打印 */ @media print { .site-header, .cta-band, .nav-toggle { display: none; } body { color: #000; } } /* -------------------------------------------------------------------------- 18. 响应式 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --sec-y: 4.25rem; --sec-y-lg: 5.25rem; } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .feature { gap: 2.75rem; } } /* 导航折叠断点放在 1080px：导航有 7 项，中等屏幕已放不下 */ @media (max-width: 1080px) { .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 0.5rem 1.5rem 1.25rem; box-shadow: var(--shadow-md); transform: translateY(-120%); transition: transform 0.32s var(--ease); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav.is-open { transform: translateY(0); } .nav__link { padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; } .nav__link:last-child { border-bottom: 0; } .nav__link::after { display: none; } .nav-toggle { display: inline-flex; } /* 语言切换移入导航菜单，顶栏只留品牌 + 预订按钮 + 汉堡菜单 */ .header-actions .lang-switch { display: none; } .nav__lang { display: flex; } } @media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature { grid-template-columns: 1fr; gap: 1.75rem; } .feature--reverse .feature__media { order: 0; } .feature + .feature { margin-top: 3.25rem; } } @media (max-width: 620px) { :root { --sec-y: 3.5rem; --header-h: 4rem; } .container { padding-inline: 1.2rem; } .grid, .grid--gap-lg { gap: 1.1rem; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .card { padding: 1.5rem 1.35rem; } .facts__row { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.9rem 1.2rem; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .brand__sub { display: none; } /* 窄屏顶栏收紧间距（语言切换已在 1080px 断点移入导航菜单） */ .site-header__inner { gap: 0.6rem; } .brand { min-width: 0; } .header-actions { gap: 0.5rem; } .header-actions .btn { padding-inline: 1rem; } .sec-head { margin-bottom: 2.25rem; } .btn { width: 100%; } .btn-row { flex-direction: column; } .hero__actions .btn-row { width: 100%; } .cta-band { padding: 2.5rem 1.35rem; } .step { grid-template-columns: 2.6rem 1fr; gap: 1rem; } .step__num { width: 2.6rem; height: 2.6rem; font-size: 0.9rem; } .step::before { left: 1.3rem; top: 2.9rem; } } /* 大屏微调 */ @media (min-width: 1400px) { :root { --container: 76rem; } } /* 超窄屏（≤400px，如 iPhone SE / 老款安卓）：进一步压缩顶栏，避免横向溢出 */ @media (max-width: 400px) { .container { padding-inline: 1rem; } .site-header__inner { gap: 0.45rem; } .brand__mark { font-size: 1.1rem; letter-spacing: 0.08em; } .header-actions { gap: 0.4rem; } .header-actions .btn { padding-inline: 0.78rem; font-size: 0.8rem; } .nav-toggle { padding: 0.35rem; } }