/* Google Fonts — MUST be the first @import (CSS spec). */ /* 字体已提为 的 ，消除 @import 渲染阻塞链 */ /* ============================================================= Sky TCM — single-page homepage stylesheet (SELF-CONTAINED). Design tokens (color/type/spacing/shadow/motion) + semantic element defaults are inlined below, so this file has NO external CSS dependency and is safe to drop onto any server as-is. (Previously these lived in colors_and_type.css via @import.) ============================================================= */ /* ========== DESIGN TOKENS + ELEMENT DEFAULTS ========== */ :root { /* ---------- COLOR — Primary ------------------------------- */ --sage-900: #0F4538; /* darkest — header text on cream */ --sage-800: #14574a; --sage-700: #1A6B52; /* BRAND PRIMARY — deep sage */ --sage-600: #2B8068; --sage-500: #4f9a82; --sage-400: #7ab29f; --sage-300: #a9cbbe; --sage-200: #d0e0d8; --sage-100: #e7efeb; --sage-50: #f3f7f4; /* ---------- COLOR — Cream / Neutrals --------------------- */ --cream-500: #E8DECB; --cream-400: #EEE6D6; --cream-300: #F2EBDD; --cream-200: #F5EFE6; /* BRAND SECONDARY — page background */ --cream-100: #FAF6EE; --cream-50: #FDFBF6; /* ---------- COLOR — Gold accent --------------------------- */ --gold-900: #8C7131; --gold-700: #A68A43; --gold-600: #C9A961; /* BRAND ACCENT — muted gold */ --gold-500: #D6BA7B; --gold-400: #DEC68F; /* @kind color */ --gold-300: #E6D3A6; --gold-100: #F5ECD7; /* ---------- COLOR — Rose accent --------------------------- */ --rose-700: #B88585; --rose-500: #D4A5A5; /* BRAND ACCENT — women's wellness */ --rose-300: #E5C5C5; --rose-100: #F3E1E1; /* ---------- COLOR — Ink / text ---------------------------- */ --ink-900: #1a1a1a; --ink-800: #2B2B2B; /* body text */ --ink-700: #3d3d3d; --ink-600: #585858; /* secondary text */ --ink-500: #7a7a7a; /* tertiary text */ --ink-400: #9c9c9c; --ink-300: #c2c2c2; /* hairlines */ --ink-200: #dedede; --ink-100: #ededed; /* ---------- COLOR — Semantic ------------------------------ */ --c-success: #2B8068; --c-warning: #C9A961; --c-danger: #B85C3D; --c-info: #4f7a9a; /* ---------- Semantic surface/text aliases ----------------- */ --bg: var(--cream-200); --bg-elevated: var(--cream-100); --bg-sunk: var(--cream-300); --bg-contrast: var(--sage-700); --surface: #FFFFFF; --surface-warm: var(--cream-50); --fg: var(--ink-800); --fg-muted: var(--ink-600); --fg-subtle: var(--ink-500); --fg-invert: var(--cream-100); --fg-brand: var(--sage-700); --fg-gold: var(--gold-700); --border: rgba(26,107,82,0.14); --border-strong: rgba(26,107,82,0.28); --border-hair: rgba(43,43,43,0.08); /* ---------- TYPE — Families ------------------------------- */ --font-display-en: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-serif-en: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-serif-zh: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif; --font-sans-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-sans-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; /* Bilingual stack — browser picks per-glyph */ --font-display: var(--font-display-en), var(--font-serif-zh); --font-serif: var(--font-serif-en), var(--font-serif-zh); --font-sans: var(--font-sans-en), var(--font-sans-zh); --font-mono: 'SF Mono', Menlo, Consolas, monospace; /* ---------- TYPE — Scale (editorial, 1.25 modular) -------- */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 48px; --fs-5xl: 64px; --fs-6xl: 84px; --lh-tight: 1.15; /* @kind font */ --lh-snug: 1.3; /* @kind font */ --lh-normal: 1.55; /* @kind font */ --lh-relaxed: 1.75; /* @kind font */ /* Chinese body */ --lh-loose: 2; /* @kind font */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.18em; /* small-caps eyebrows */ /* ---------- SPACING — 4px grid ---------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- RADIUS ---------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-2xl: 32px; --radius-pill: 999px; /* ---------- SHADOWS — soft, warm, never harsh ------------- */ --shadow-xs: 0 1px 2px rgba(26,60,48,0.04); --shadow-sm: 0 2px 6px rgba(26,60,48,0.06), 0 1px 2px rgba(26,60,48,0.04); --shadow-md: 0 8px 22px rgba(26,60,48,0.08), 0 2px 6px rgba(26,60,48,0.05); --shadow-lg: 0 22px 44px rgba(26,60,48,0.10), 0 8px 16px rgba(26,60,48,0.06); --shadow-xl: 0 40px 80px rgba(26,60,48,0.14), 0 16px 32px rgba(26,60,48,0.08); --shadow-inset: inset 0 1px 2px rgba(26,60,48,0.08); /* ---------- MOTION ---------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-gentle: cubic-bezier(0.33, 1, 0.68, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ --dur-ambient: 900ms; /* @kind other */ /* ---------- LAYOUT ---------------------------------------- */ --content-width: 1200px; --prose-width: 680px; --gutter: 24px; } /* ============================================================= Semantic element defaults ============================================================= */ html { color: var(--fg); background: var(--bg); } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Display + headings (editorial feel) -------------------- */ .h-display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--sage-900); } h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--sage-900); } h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--sage-900); } h3, .h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--sage-900); } h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--ink-900); } h5, .h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-700); } /* ---- Chinese heading override ------------------------------- Apply to elements whose content is Chinese-primary */ .zh-heading { font-family: var(--font-serif-zh); font-weight: 500; letter-spacing: 0.04em; } /* ---- Body + prose ------------------------------------------ */ p, .p { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink-800); } .lede { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--ink-700); } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-700); } .caption { font-size: var(--fs-sm); color: var(--fg-muted); } .zh-body { font-family: var(--font-sans-zh); line-height: var(--lh-relaxed); letter-spacing: 0.02em; } .zh-serif { font-family: var(--font-serif-zh); line-height: var(--lh-relaxed); } /* ---- Links + inline ---------------------------------------- */ a { color: var(--sage-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-base) var(--ease-out); } a:hover { color: var(--sage-800); } /* ---- Dividers ---------------------------------------------- */ .hr-hair { height: 1px; background: var(--border-hair); border: 0; } .hr-sage { height: 1px; background: var(--border); border: 0; } .rule-gold { width: 48px; height: 1px; background: var(--gold-600); border: 0; } /* ---- Pull quote / philosophy ------------------------------- */ .pullquote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--sage-800); } /* ========== PAGE / COMPONENT STYLES ========== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--cream-100); color: var(--ink-800); font-family: var(--font-sans); line-height: 1.55; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } :root { --page-w: 1280px; } /* ========================================================== */ /* Top nav — pill, centered menu, right cluster (template-style) */ /* ========================================================== */ .sr-nav { position: sticky; top: 16px; z-index: 40; max-width: 1180px; margin: 16px auto 0; padding: 0 24px; } .sr-nav .inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 10px 14px 10px 22px; background: rgba(255,255,255,0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-hair); border-radius: 999px; box-shadow: 0 10px 32px -16px rgba(15,69,56,0.18); } .sr-nav .links { justify-content: center; } .sr-nav .logo { display:flex; align-items:center; gap:10px; white-space: nowrap; } .sr-nav .logo img { width: 42px; height: 42px; object-fit: contain; } .sr-nav .logo .wm { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--sage-900); line-height: 1; } .sr-nav .logo .zh { font-family: var(--font-serif-zh); font-size: 12px; color: var(--sage-700); letter-spacing: 0.14em; margin-top: 2px; } .sr-nav .links { display:flex; gap: 28px; } .sr-nav .right { display: flex; align-items: center; gap: 14px; } .sr-nav .links a { font-size: 14px; color: var(--ink-700); padding: 8px 0; position: relative; } .sr-nav .links a:hover { color: var(--sage-800); } .sr-nav .links a.active { color: var(--sage-900); } .sr-nav .links a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--gold-600); } .sr-nav .lang { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; font-size: 12px; cursor:pointer; background: rgba(255,255,255,0.6); } .sr-nav .lang span { padding: 6px 11px; color: var(--ink-700); } .sr-nav .lang span.on { background: var(--sage-700); color: var(--cream-100); } .sr-nav .cta { background: var(--sage-900); color: var(--cream-100); padding: 10px 20px; border-radius: 999px; font-size: 13px; letter-spacing: 0.04em; } .sr-nav .cta:hover { background: var(--ink-900); } /* ========================================================== */ /* Hero — full-bleed brand image with overlay copy */ /* ========================================================== */ .hero-full { position: relative; width: 100%; min-height: 720px; height: calc(100vh - 80px); max-height: 880px; overflow: hidden; background: var(--sage-900); margin-top: -82px; } .hero-full .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .hero-full .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,40,70,0.42) 0%, rgba(15,40,70,0.12) 32%, rgba(15,40,70,0.12) 55%, rgba(8,22,40,0.55) 100%), radial-gradient(ellipse 70% 60% at 50% 42%, rgba(8,25,50,0.45) 0%, rgba(8,25,50,0.10) 70%, transparent 100%); } .hero-full .hero-inner { position: relative; z-index: 2; margin: 0 auto; padding: 120px 32px 96px; color: var(--cream-100); max-width: 880px; text-align: center; } .hero-full .badges { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; } .hero-full .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; font-size: 12.5px; color: var(--cream-100); letter-spacing: 0.02em; } .hero-full .badge i { color: var(--gold-400); font-size: 14px; } .hero-full .kicker { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-400); font-weight: 600; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 12px; justify-content: center; } .hero-full .kicker::before { content:""; width: 24px; height: 1px; background: var(--gold-500); } .hero-full .kicker::after { content:""; width: 24px; height: 1px; background: var(--gold-500); } .hero-full h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5.4vw, 82px); line-height: 1.05; letter-spacing: -0.02em; color: var(--cream-50); margin: 0 0 18px; white-space: nowrap; } .hero-full h1 em { font-style: italic; color: var(--gold-300); } .hero-full .sub-zh { font-family: var(--font-serif-zh); font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.1em; color: var(--cream-200); margin-bottom: 28px; } .hero-full .lede { font-size: 17px; line-height: 1.7; color: rgba(245,239,230,0.9); max-width: 620px; margin: 0 auto 32px; } .hero-full .focus-row { display: flex; gap: 28px; margin: 0 auto 40px; flex-wrap: wrap; justify-content: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); max-width: 720px; } .hero-full .focus { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cream-200); } .hero-full .focus i { color: var(--gold-400); font-size: 20px; } .hero-full .ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero-full .ctas .btn-primary { background: var(--gold-600); color: var(--cream-50); } .hero-full .ctas .btn-primary:hover { background: var(--gold-700); } .hero-full .ctas .btn-outline.light { color: var(--cream-100); border-color: rgba(255,255,255,0.5); } .hero-full .ctas .btn-outline.light:hover { background: rgba(255,255,255,0.1); border-color: var(--cream-100); } /* ========================================================== */ /* Shared section headings + containers */ /* ========================================================== */ .sec { padding: 104px 32px; } .sec .inner { max-width: var(--page-w); margin: 0 auto; } .sec.cream { background: var(--cream-200); } .sec.white { background: #fff; } .sec.dark { background: var(--sage-900); color: var(--cream-200); } .sec.dark h2, .sec.dark h3 { color: var(--cream-100); } .sec-head { max-width: 720px; margin: 0 0 56px; } .sec-head.center { margin: 0 auto 64px; text-align: center; } .sec-head .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; } .sec-head .eyebrow::before { content:""; width: 18px; height: 1px; background: var(--gold-600); } .sec-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.5vw, 54px); line-height: 1.1; letter-spacing: -0.01em; color: var(--sage-900); margin: 0 0 12px; text-wrap: balance; } .sec-head .zh { font-family: var(--font-serif-zh); font-weight: 500; font-size: 18px; letter-spacing: 0.1em; color: var(--sage-700); } .sec.dark .sec-head .zh { color: var(--gold-300); } /* ========================================================== */ /* Hero feature strip — 4-up small cards pinned below hero */ /* ========================================================== */ .hero-strip { max-width: var(--page-w); margin: -64px auto 0; padding: 0 32px; position: relative; z-index: 3; } .hero-strip .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .hero-strip .cell { position: relative; aspect-ratio: 5/4; border-radius: 18px; overflow: hidden; background: var(--cream-200); } .hero-strip .cell img { width: 100%; height: 100%; object-fit: cover; } .hero-strip .cell .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,69,56,0) 30%, rgba(15,69,56,0.85) 100%); } .hero-strip .cell .label { position: absolute; left: 16px; right: 16px; bottom: 14px; color: var(--cream-100); } .hero-strip .cell .label .t { font-family: var(--font-serif); font-weight: 500; font-size: 15px; line-height: 1.2; } .hero-strip .cell .label .z { font-family: var(--font-serif-zh); font-size: 11.5px; letter-spacing: 0.08em; opacity: 0.85; margin-top: 3px; } /* ========================================================== */ /* Feature grid — 3 × 2 image cards with title + caption */ /* ========================================================== */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; } .feature .thumb { aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: var(--cream-200); margin-bottom: 22px; position: relative; } .feature .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } .feature:hover .thumb img { transform: scale(1.03); } .feature .thumb.fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sage-600), var(--sage-800)); } .feature .thumb.fallback i { font-size: 72px; color: var(--cream-100); opacity: 0.7; } .feature h3 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; margin: 0 0 4px; color: var(--sage-900); line-height: 1.2; } .feature .zh { font-family: var(--font-serif-zh); font-size: 14px; letter-spacing: 0.08em; color: var(--sage-700); margin-bottom: 10px; } .feature p { font-size: 14.5px; color: var(--ink-600); line-height: 1.6; margin: 0; } /* ========================================================== */ /* Mid CTA bar — "Want to learn more" + button */ /* ========================================================== */ .mid-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 56px; background: #fff; border-radius: 22px; border: 1px solid var(--border-hair); box-shadow: var(--shadow-sm); flex-wrap: wrap; } .mid-cta h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--sage-900); margin: 0; } .mid-cta .zh { font-family: var(--font-serif-zh); font-size: 15px; color: var(--sage-700); margin-top: 4px; letter-spacing: 0.06em; } /* ========================================================== */ /* Split section — image + text + specs + awards */ /* ========================================================== */ .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } .split.reverse { grid-template-columns: 1fr 1.1fr; } .split.reverse .media { order: 2; } .split .media { position: relative; } .split .media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); } .split .copy h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.01em; color: var(--sage-900); margin: 0 0 22px; } .split .copy .zh-lead { font-family: var(--font-serif-zh); font-weight: 500; font-size: 20px; color: var(--sage-700); margin: -12px 0 24px; letter-spacing: 0.08em; } .split .copy p { font-size: 16px; line-height: 1.75; color: var(--ink-700); margin: 0 0 18px; } .specs { margin: 28px 0 32px; } .specs .row { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border-hair); } .specs .row:last-child { border-bottom: 1px solid var(--border-hair); } .specs .k { font-size: 13px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } .specs .v { font-family: var(--font-serif); font-size: 15px; color: var(--sage-900); font-weight: 500; } .specs .v .zh { font-family: var(--font-serif-zh); color: var(--sage-700); font-weight: 500; margin-left: 8px; font-size: 14px; } .awards { display: flex; gap: 18px; margin-top: 28px; flex-wrap: wrap; } .award { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--cream-100); border: 1px solid var(--border-hair); border-radius: 14px; } .award i { color: var(--gold-600); font-size: 22px; } .award .t { font-family: var(--font-serif); font-weight: 500; font-size: 13.5px; color: var(--sage-900); } .award .y { font-size: 11px; color: var(--ink-500); letter-spacing: 0.1em; margin-top: 2px; } /* ========================================================== */ /* Two-image wide section + right text + CTA */ /* ========================================================== */ .two-img { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .two-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 22px; } .two-img img:first-child { aspect-ratio: 3/4; align-self: start; margin-top: 48px; } /* ========================================================== */ /* 3-column icon/image cards */ /* ========================================================== */ .icon-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .icard { background: #fff; border-radius: 22px; padding: 28px; border: 1px solid var(--border-hair); transition: box-shadow 260ms var(--ease-out); } .icard:hover { box-shadow: var(--shadow-lg); } .icard .thumb { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; margin-bottom: 22px; background: linear-gradient(135deg, var(--sage-600), var(--sage-800)); display:flex; align-items:center; justify-content:center; } .icard .thumb img { width: 100%; height: 100%; object-fit: cover; } .icard .thumb i { font-size: 64px; color: var(--cream-100); opacity: 0.85; } .icard h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--sage-900); margin: 0 0 6px; line-height: 1.25; } .icard .zh { font-family: var(--font-serif-zh); font-size: 14px; color: var(--sage-700); letter-spacing: 0.08em; margin-bottom: 12px; } .icard p { font-size: 14.5px; line-height: 1.65; color: var(--ink-600); margin: 0; } /* ========================================================== */ /* Big statement — huge product image + overlay title */ /* ========================================================== */ .big-statement { position: relative; aspect-ratio: 21/9; border-radius: 28px; overflow: hidden; background: #0f4538; margin: 0 auto; max-width: var(--page-w); } .big-statement img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; } .big-statement .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,69,56,0.85) 0%, rgba(15,69,56,0.5) 60%, rgba(15,69,56,0.2) 100%); } .big-statement .copy { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); color: var(--cream-100); max-width: 560px; } .big-statement .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-500); font-weight: 600; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 10px; } .big-statement .eyebrow::before { content:""; width: 18px; height: 1px; background: var(--gold-600); } .big-statement h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4vw, 60px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 14px; } .big-statement .zh { font-family: var(--font-serif-zh); font-weight: 500; font-size: 20px; color: var(--gold-300); letter-spacing: 0.1em; } /* ========================================================== */ /* Massage spotlight — big image + title + desc + tags + CTA */ /* ========================================================== */ .massage-spot { position: relative; border-radius: 28px; overflow: hidden; background: #0f4538; margin: 0 auto; max-width: var(--page-w); min-height: 540px; display: flex; align-items: center; } .massage-spot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; } .massage-spot .overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,69,56,0.94) 0%, rgba(15,69,56,0.82) 42%, rgba(15,69,56,0.42) 75%, rgba(15,69,56,0.2) 100%); } .massage-spot .copy { position: relative; z-index: 2; padding: 60px 56px; max-width: 640px; color: var(--cream-100); } .massage-spot .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400); font-weight: 600; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 10px; } .massage-spot .eyebrow::before { content:""; width: 18px; height: 1px; background: var(--gold-500); } .massage-spot h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 20px; color: var(--cream-50); } .massage-spot .ms-desc { font-size: 15.5px; line-height: 1.75; color: rgba(245,239,230,0.88); margin: 0 0 24px; max-width: 600px; } .massage-spot .ms-tags { display: flex; flex-wrap: wrap; gap: 10px; } .massage-spot .ms-tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); font-size: 13px; color: var(--cream-100); letter-spacing: 0.02em; } .massage-spot .ms-tag i { color: var(--gold-400); font-size: 13px; } /* ========================================================== */ /* Choose your style — 4 product squares */ /* ========================================================== */ .styles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .style-card { background: var(--cream-100); border-radius: 18px; overflow: hidden; cursor: pointer; transition: transform 260ms var(--ease-out); } .style-card:hover { transform: translateY(-4px); } .style-card .thumb { aspect-ratio: 1; background-size: cover; background-position: center; background-color: var(--cream-200); } .style-card .body { padding: 20px 22px 24px; } .style-card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 20px; color: var(--sage-900); margin: 0 0 2px; } .style-card .zh { font-family: var(--font-serif-zh); font-size: 13px; letter-spacing: 0.08em; color: var(--sage-700); margin-bottom: 8px; } .style-card .desc { font-size: 13px; color: var(--ink-600); line-height: 1.55; margin: 0; } /* ========================================================== */ /* Video CTA banner */ /* ========================================================== */ .video-banner { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 21/8; max-width: var(--page-w); margin: 0 auto; background: #0f4538; } .video-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .video-banner .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,69,56,0.3), rgba(15,69,56,0.7)); } .video-banner .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -80%); width: 80px; height: 80px; border-radius: 999px; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 220ms var(--ease-out); } .video-banner .play:hover { background: var(--gold-600); border-color: var(--gold-600); transform: translate(-50%, -80%) scale(1.05); } .video-banner .play i { color: #fff; font-size: 32px; margin-left: 4px; } .video-banner h3 { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); color: var(--cream-100); font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(22px, 2.2vw, 32px); text-align: center; max-width: 680px; margin: 0; line-height: 1.3; } .video-banner .zh { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-family: var(--font-serif-zh); color: var(--gold-300); font-size: 15px; letter-spacing: 0.12em; } /* ========================================================== */ /* Awards / Featured in — 4 logos + description */ /* ========================================================== */ .featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .featured .item { text-align: left; } .featured .logo { height: 42px; display: flex; align-items: center; margin-bottom: 20px; color: var(--sage-800); font-family: var(--font-display); font-style: italic; font-size: 22px; letter-spacing: 0.02em; opacity: 0.85; } .featured .logo.pub1 { font-family: var(--font-serif); font-weight: 500; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; } .featured .logo.pub2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 26px; } .featured .logo.pub3 { font-family: var(--font-serif-zh); font-weight: 500; font-size: 22px; letter-spacing: 0.2em; } .featured .logo.pub4 { font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px; } .featured p { font-size: 14.5px; color: var(--ink-600); line-height: 1.65; margin: 0; } /* ========================================================== */ /* Testimonials — horizontal row of 5 */ /* ========================================================== */ .testimonials { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .t-card { background: var(--cream-200); border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; } .t-card .face { width: 64px; height: 64px; border-radius: 999px; background-size: cover; background-position: center; background-color: var(--cream-100); border: 2px solid #fff; box-shadow: var(--shadow-sm); } .t-card .face.init { display:flex; align-items:center; justify-content:center; background: var(--sage-700); color: var(--cream-100); font-family: var(--font-display); font-style: italic; font-size: 22px; } .t-card .name { font-family: var(--font-serif); font-weight: 500; font-size: 17px; color: var(--sage-900); } .t-card .role { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-500); margin-top: 2px; } .t-card blockquote { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; color: var(--ink-700); line-height: 1.65; margin: 0; border-left: 2px solid var(--gold-600); padding-left: 16px; } .t-card blockquote.zh { font-family: var(--font-serif-zh); font-style: normal; letter-spacing: 0.04em; } /* ========================================================== */ /* Blog cards */ /* ========================================================== */ .blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .post .thumb { aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; margin-bottom: 18px; background: var(--cream-200); } .post .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } .post:hover .thumb img { transform: scale(1.04); } .post h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--sage-900); margin: 0 0 10px; line-height: 1.3; } .post .meta { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--ink-500); letter-spacing: 0.08em; } .post .cat { color: var(--gold-700); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; font-size: 11px; } .post .cat::after { content:" ·"; color: var(--border); margin-left: 8px; } /* ========================================================== */ /* Footer */ /* ========================================================== */ .sr-footer { background: var(--cream-200); border-top: 1px solid var(--border-hair); padding: 60px 32px 32px; } .sr-footer .inner { max-width: var(--page-w); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } .sr-footer .logo { display:flex; align-items:center; gap:10px; white-space: nowrap; margin-bottom: 18px; } .sr-footer .logo img { width: 42px; height: 42px; object-fit: contain; } .sr-footer .logo .wm { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--sage-900); } .sr-footer .logo .zh { font-family: var(--font-serif-zh); font-size: 12px; color: var(--sage-700); letter-spacing: 0.14em; margin-top: 2px; } .sr-footer .copy { font-size: 13.5px; color: var(--ink-600); line-height: 1.65; max-width: 280px; } .sr-footer h5 { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-900); font-weight: 600; margin: 0 0 16px; } .sr-footer a.link { display: block; padding: 5px 0; font-size: 13.5px; color: var(--ink-600); } .sr-footer a.link:hover { color: var(--sage-800); } /* Footer QR blocks (WeChat + 小红书) — compact QR + label, uniform size regardless of source px */ .wechat-block { display: flex; align-items: center; gap: 14px; padding: 14px; background: rgba(26,107,82,.05); border: 1px solid var(--border); border-radius: 14px; max-width: 340px; margin-top: 22px; } .wechat-block img { width: 92px; height: 92px; object-fit: contain; border-radius: 8px; background: #fff; padding: 6px; flex-shrink: 0; } .qr-label { font-family: var(--font-serif-zh); color: var(--sage-900); font-size: 14px; line-height: 1.4; margin-bottom: 4px; } .qr-sub { color: var(--gold-700); font-size: 11.5px; letter-spacing: 0.06em; line-height: 1.4; } .sr-footer .bottom { max-width: var(--page-w); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--border-hair); display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-500); letter-spacing: 0.04em; flex-wrap: wrap; gap: 14px; } .sr-footer .socials { display: flex; gap: 16px; } .sr-footer .socials a { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--sage-800); transition: all 180ms var(--ease-out); } .sr-footer .socials a:hover { background: var(--sage-700); color: var(--cream-100); border-color: var(--sage-700); } /* ========================================================== */ /* Buttons — inherit from website.css but local names */ /* ========================================================== */ .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.02em; transition: all 160ms var(--ease-out); text-decoration: none; font-size: 14px; } .btn-primary { background: var(--sage-900); color: var(--cream-100); padding: 14px 28px; border-radius: 999px; } .btn-primary:hover { background: var(--ink-900); } .btn-gold { background: var(--gold-600); color: var(--cream-50); padding: 14px 28px; border-radius: 999px; } .btn-gold:hover { background: var(--gold-700); } .btn-outline { background: transparent; color: var(--sage-900); padding: 13px 27px; border-radius: 999px; border: 1px solid var(--sage-800); } .btn-outline:hover { background: var(--sage-900); color: var(--cream-100); } .btn-ghost { background: transparent; color: var(--sage-800); padding: 10px 0; font-weight: 500; } .btn-ghost:hover { color: var(--sage-900); } .btn-ghost i { transition: transform 220ms var(--ease-out); } .btn-ghost:hover i { transform: translateX(4px); } /* ========================================================== */ /* Responsive */ /* ========================================================== */ @media (max-width: 960px) { .hero-full { min-height: 620px; height: auto; max-height: none; } .hero-full h1 { white-space: normal; } .hero-full .hero-inner { padding: 100px 24px 80px; } .hero-strip .grid { grid-template-columns: repeat(2, 1fr); } .split, .split.reverse { grid-template-columns: 1fr; gap: 48px; } .split.reverse .media { order: 0; } .features, .icon-cards, .blog { grid-template-columns: repeat(2, 1fr); } .featured { grid-template-columns: repeat(2, 1fr); gap: 32px; } .testimonials { grid-template-columns: repeat(2, 1fr); } .styles-grid { grid-template-columns: repeat(2, 1fr); } .sr-nav .links { display: none; } .sr-footer .inner { grid-template-columns: 1fr 1fr; } .big-statement .copy { left: 32px; right: 32px; } .two-img img:first-child { margin-top: 0; } } @media (max-width: 560px) { .sec { padding: 72px 24px; } .features, .icon-cards, .blog, .styles-grid, .testimonials, .featured { grid-template-columns: 1fr; } .sr-footer .inner { grid-template-columns: 1fr; } } /* ============================================================ Bilingual visibility — toggled via [data-lang] on . (Static-site language switching; added during SEO-clean build.) ============================================================ */ [data-lang="zh"] .lang-en { display: none !important; } [data-lang="en"] .lang-zh { display: none !important; }