html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Poppins', system-ui, sans-serif; }
.hero-copy { text-shadow: 0 2px 14px rgba(7,28,52,0.65); }
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #0c8ee6;
transition: width 0.25s ease;
}
.nav-link:hover::after {
width: 100%;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
}
/* Accessibility: visible focus for keyboard users */
a:focus-visible,
button:focus-visible {
outline: 2px solid #0c8ee6;
outline-offset: 3px;
border-radius: 4px;
}
/* Accessibility: skip-to-content link */
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
z-index: 2000;
background: #0c8ee6;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 1rem;
}
/* Why Hifengda benefits grid: 6-up desktop, 3-up tablet, 2-up mobile.
Defined here because the inlined Tailwind build lacks lg:grid-cols-6. */
.benefits-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
.benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.benefits-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Brand logo in header */
.logo-img { display: block; height: 34px; width: auto; }
/* Category card images (object-fit is not available in the inlined Tailwind build) */
.cat-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
@media (max-width: 767px) {
.cat-img { object-position: center 38%; }
}
/* Hero background image (a real img element so it is indexable by Google Images) */
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Hero 遮罩：整体调浅一档，让诊所照片明显透出。
原 Tailwind 渐变是 from-primary-950/85 via-primary-950/55 to-primary-900/20，
左侧 85% 不透明 → 实测文字区亮度仅 63/255，照片几乎看不见。
这里改为自定义渐变（不依赖编译产物里可能缺失的透明度变体）：
左侧 ~62% 不透明、中段 ~40%、右侧 ~14%。 */
.hero-veil-soft {
position: absolute; inset: 0;
background: linear-gradient(100deg,
rgba(8, 36, 64, .60) 0%,
rgba(10, 44, 78, .46) 32%,
rgba(12, 54, 96, .30) 62%,
rgba(14, 64, 110, .14) 100%);
}
/* Hero 文字：背景变浅后仍需保证可读 —— 白字 + 强双层投影 + 收窄行宽 */
.hero-lead {
color: #ffffff;
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
text-shadow: 0 1px 2px rgba(3, 16, 32, .98), 0 2px 10px rgba(3, 16, 32, .92);
}
@media (min-width: 640px) { .hero-lead { font-size: 1.1rem; } }
@media (min-width: 1024px) { .hero-lead { font-size: 1.2rem; } }
.hero-sub {
color: #ffffff;
font-size: .875rem;
line-height: 1.65;
text-shadow: 0 1px 2px rgba(3, 16, 32, .98), 0 2px 10px rgba(3, 16, 32, .92);
}
@media (min-width: 640px) { .hero-sub { font-size: .95rem; } }
@media (min-width: 1024px) { .hero-sub { font-size: 1rem; } }
.hero-h1 {
color: #ffffff;
text-shadow: 0 2px 4px rgba(3, 16, 32, .9), 0 3px 16px rgba(3, 16, 32, .85);
}
.hero-badge {
color: #ffffff;
background: rgba(9, 40, 72, .72);
border-color: rgba(255, 255, 255, .38);
text-shadow: 0 1px 3px rgba(3, 16, 32, .85);
}
.hero-btn-ghost {
color: #ffffff;
background: rgba(9, 40, 72, .5);
border-color: rgba(255, 255, 255, .6);
text-shadow: 0 1px 3px rgba(3, 16, 32, .8);
}
.hero-btn-ghost:hover { background: rgba(9, 40, 72, .68); }
.hero-btn-solid {
color: #ffffff;
background: #0a66e0;
box-shadow: 0 10px 26px rgba(10, 102, 224, .38);
}
.hero-btn-solid:hover { background: #0757c4; }
/* ===== Merged from hifengda.com: mega-nav + category grid ===== */
/* Hero 文字配色与遮罩已在源 index.html 的第 1 个