/* Assumptions: 单页只承载品牌介绍与电话咨询，不承担预约或售卖流程。 */ :root { --brand-navy: #072a6c; --brand-navy-deep: #07152f; --brand-red: #e70b1c; --air-blue: #eaf3ff; --paper: #f7faff; --ink: #07152f; --muted: #53627b; --line: rgba(7, 42, 108, 0.13); --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(255, 255, 255, 0.78); --display: "Songti SC", "STSong", "SimSun", serif; --body: "PingFang SC", "Microsoft YaHei", sans-serif; --latin: "Avenir Next", "Futura", sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; color: var(--ink); font-family: var(--body); line-height: 1.72; background: radial-gradient(circle at 8% 4%, rgba(231, 11, 28, 0.10), transparent 24rem), radial-gradient(circle at 91% 14%, rgba(42, 112, 229, 0.20), transparent 31rem), linear-gradient(145deg, #f9fcff 0%, #edf5ff 48%, #f8fbff 100%); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(12px); pointer-events: none; }
body::before { width: 25rem; height: 25rem; top: 35vh; left: -13rem; background: rgba(75, 143, 255, 0.18); }
body::after { width: 17rem; height: 17rem; right: -7rem; bottom: 7vh; background: rgba(231, 11, 28, 0.10); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.page-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.glass { background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.82); box-shadow: 0 24px 80px rgba(22, 61, 116, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(26px) saturate(145%); backdrop-filter: blur(26px) saturate(145%); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { width: 48px; height: 48px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.68); box-shadow: 0 12px 34px rgba(7, 42, 108, 0.15); }
.brand-name { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; }
.brand-location { display: block; color: var(--muted); font: 600 10px/1.4 var(--latin); letter-spacing: 0.2em; text-transform: uppercase; }
.phone-link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 650; letter-spacing: 0.03em; background: var(--brand-red); box-shadow: 0 14px 34px rgba(231, 11, 28, 0.22); transition: transform 180ms ease, box-shadow 180ms ease; }
.phone-link::after { content: "↗"; font-size: 16px; }
.phone-link:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(231, 11, 28, 0.28); }
.phone-link:focus-visible { outline: 3px solid rgba(231, 11, 28, 0.22); outline-offset: 4px; }
.hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(380px, 0.94fr); align-items: center; gap: clamp(46px, 7vw, 96px); padding: 72px 0 92px; }
.eyebrow { margin-bottom: 24px; color: var(--brand-navy); font: 700 11px/1.4 var(--latin); letter-spacing: 0.22em; text-transform: uppercase; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
h1 { max-width: 720px; font-size: clamp(58px, 7.1vw, 104px); line-height: 1.05; }
.hero-lead { max-width: 590px; margin-top: 30px; color: var(--muted); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.85; text-wrap: pretty; }
.hero-lead strong { color: var(--ink); font-weight: 650; }
.hero-meta { display: flex; align-items: center; gap: 22px; margin-top: 38px; color: var(--brand-navy); font-size: 13px; font-weight: 650; letter-spacing: 0.08em; }
.hero-meta span + span { position: relative; padding-left: 23px; }
.hero-meta span + span::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--brand-red); transform: translateY(-50%); }
.court-wrap { position: relative; min-height: 570px; display: grid; place-items: center; }
.court-wrap::before { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; background: rgba(105, 172, 255, 0.34); filter: blur(54px); }
.court-card { position: relative; width: min(100%, 480px); aspect-ratio: 0.78; padding: 28px; border-radius: 44px; color: #fff; background: radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.18), transparent 34%), linear-gradient(155deg, rgba(11, 60, 135, 0.97), rgba(3, 20, 54, 0.98)); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 46px 90px rgba(4, 28, 72, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28); overflow: hidden; transform: rotate(2.5deg); }
.court-card::before { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(255, 255, 255, 0.44); background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.38) 50%, transparent calc(50% + 0.5px)), linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.64) 50%, transparent calc(50% + 0.5px)), linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.32) 20.2%, transparent 20.4%, transparent 79.6%, rgba(255, 255, 255, 0.32) 79.8%, transparent 80%); opacity: 0.7; }
.court-card::after { content: ""; position: absolute; width: 280px; height: 280px; right: -120px; top: -110px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; box-shadow: inset 0 0 54px rgba(255, 255, 255, 0.05); }
.court-top, .court-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.court-top img { width: 84px; height: 84px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18); }
.court-label { font: 650 10px/1.5 var(--latin); letter-spacing: 0.19em; text-transform: uppercase; opacity: 0.72; }
.court-center { position: absolute; z-index: 1; top: 50%; left: 50%; width: calc(100% - 80px); transform: translate(-50%, -50%); font: 500 clamp(46px, 5.5vw, 74px)/0.92 var(--display); letter-spacing: -0.06em; text-align: center; text-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
.court-bottom { position: absolute; right: 28px; bottom: 28px; left: 28px; font-size: 12px; letter-spacing: 0.08em; opacity: 0.8; }
.glass-orb { position: absolute; z-index: 2; right: -38px; bottom: 56px; width: 138px; height: 138px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 28px 54px rgba(4, 28, 72, 0.22), inset 18px 16px 30px rgba(255, 255, 255, 0.44), inset -14px -16px 28px rgba(22, 79, 176, 0.18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.section { padding: 110px 0; }
.section-kicker { margin-bottom: 18px; color: var(--brand-red); font: 700 11px/1.4 var(--latin); letter-spacing: 0.22em; text-transform: uppercase; }
h2 { max-width: 780px; font-size: clamp(44px, 5.5vw, 72px); line-height: 1.13; }
.services { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(50px, 8vw, 110px); align-items: start; }
.service-list { border-top: 1px solid var(--line); }
.service-item { display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 34px 0 38px; border-bottom: 1px solid var(--line); }
.service-number { padding-top: 6px; color: var(--brand-red); font: 650 11px/1.4 var(--latin); letter-spacing: 0.14em; }
.service-item h3 { margin-bottom: 10px; font-family: var(--display); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.3; }
.service-item p { color: var(--muted); font-size: 16px; text-wrap: pretty; }
.service-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.service-tags span { padding: 6px 11px; border: 1px solid rgba(7, 42, 108, 0.14); border-radius: 999px; color: var(--brand-navy); font-size: 12px; font-weight: 650; background: rgba(255, 255, 255, 0.34); }
.environment { position: relative; padding: clamp(38px, 6vw, 76px); border-radius: 42px; color: #fff; background: radial-gradient(circle at 90% 10%, rgba(70, 132, 234, 0.48), transparent 32%), linear-gradient(145deg, rgba(6, 35, 83, 0.96), rgba(4, 21, 49, 0.99)); box-shadow: 0 38px 90px rgba(4, 28, 72, 0.22); overflow: hidden; }
.environment::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -170px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.05); }
.environment-head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, 0.9fr); gap: 56px; align-items: end; }
.environment h2 { max-width: 680px; }
.environment-lead { color: rgba(255, 255, 255, 0.68); font-size: 16px; text-wrap: pretty; }
.environment-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 78px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.environment-item { min-height: 190px; padding: 28px 28px 0 0; }
.environment-item + .environment-item { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.environment-item span { display: block; margin-bottom: 28px; color: rgba(255, 255, 255, 0.48); font: 650 10px/1.4 var(--latin); letter-spacing: 0.18em; }
.environment-item h3 { margin-bottom: 10px; font-family: var(--display); font-size: 26px; font-weight: 600; }
.environment-item p { color: rgba(255, 255, 255, 0.63); font-size: 14px; }
.contact { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; padding: clamp(38px, 6vw, 72px); border-radius: 42px; }
.contact h2 { max-width: 760px; }
.contact-copy { max-width: 620px; margin-top: 20px; color: var(--muted); font-size: 16px; }
.phone-big { min-width: 280px; padding: 24px 28px; border-radius: 26px; color: #fff; background: var(--brand-red); box-shadow: 0 24px 54px rgba(231, 11, 28, 0.24); transition: transform 180ms ease; }
.phone-big:hover { transform: translateY(-3px); }
.phone-big small { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, 0.68); font-size: 12px; letter-spacing: 0.12em; }
.phone-big strong { display: block; font: 600 26px/1.25 var(--latin); letter-spacing: 0.03em; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 34px 0 46px; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
@media (max-width: 900px) { .hero, .services, .environment-head, .contact { grid-template-columns: 1fr; }
.hero { padding-top: 92px; }
.hero-copy { max-width: 760px; }
.court-wrap { min-height: 520px; }
.court-card { width: min(86vw, 470px); }
.glass-orb { right: 1vw; }
.contact { align-items: start; }
.phone-big { min-width: min(100%, 320px); }
}
@media (max-width: 620px) { .page-shell { width: min(100% - 28px, 1180px); }
.topbar { padding-top: 14px; }
.brand-mark { width: 42px; height: 42px; }
.brand-name { font-size: 15px; }
.brand-location { display: none; }
.phone-link { min-height: 44px; padding: 0 15px; font-size: 13px; }
.phone-link .number { display: none; }
.hero { min-height: auto; gap: 48px; padding: 78px 0 72px; }
h1 { font-size: clamp(48px, 15vw, 70px); }
.hero-lead { font-size: 17px; }
.hero-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
.hero-meta span + span { padding-left: 0; }
.hero-meta span + span::before { display: none; }
.court-wrap { min-height: 440px; }
.court-card { width: min(88vw, 360px); border-radius: 34px; }
.court-top img { width: 66px; height: 66px; }
.court-center { font-size: 50px; }
.glass-orb { right: -12px; bottom: 38px; width: 105px; height: 105px; }
.section { padding: 78px 0; }
h2 { font-size: 43px; }
.service-item { grid-template-columns: 36px 1fr; gap: 14px; }
.environment, .contact { border-radius: 30px; }
.environment-grid { grid-template-columns: 1fr; margin-top: 54px; }
.environment-item { min-height: 0; padding: 24px 0 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.environment-item + .environment-item { padding-left: 0; border-left: 0; }
.environment-item span { margin-bottom: 14px; }
.phone-big { min-width: 100%; }
footer { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) { .hero-copy, .court-wrap { opacity: 0; animation: rise-in 780ms cubic-bezier(0.2, 0.72, 0.2, 1) forwards; }
.court-wrap { animation-delay: 120ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
}