@import url("font-tokens.css?v=kaiti-1");
/* HansMed — Healing Courtyard */
:root {
/* Palette: warm cream / clay / ink */
--cream-50: #FBF7EE;
--cream-100: #F5EEDF;
--cream-200: #ECE2CC;
--cream-300: #DCCBA8;
--clay-200: #C9B393;
--clay-400: #A0825F;
--clay-500: #8B6B47;
--clay-600: #6B4A30;
--clay-700: #4E3422;
--ink-900: #261810;
--ink-800: #34221A;
--ink-700: #4A3326;
--ink-500: #6B5346;
--ink-300: #9C8676;
--mist: rgba(255, 250, 240, 0.55);
--shadow-soft: 0 18px 60px -20px rgba(38, 24, 16, 0.18);
--shadow-deep: 0 40px 120px -30px rgba(38, 24, 16, 0.35);
/* Type */
/* Updated 2026-06-03: Fraunces dropped in favour of Fraunces as
the primary display serif, to match the new editorial landing-page
redesign. Every page using var(--font-display) inherits this swap —
no per-page CSS changes needed. EB Garamond + Georgia stay as web-safe
fallbacks for the rare device that can't load the Google font. */
/* Chinese: 楷體 / Kai system stack, then Noto Serif SC fallback */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-ui);
background: var(--cream-50);
color: var(--ink-800);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ─── Chinese language overrides ─── */
/* Fraunces (Trajan substitute) has no lowercase or italic.
When the page is in Chinese, switch display surfaces to 楷體 and drop italic. */
html[lang="zh"] .landing-hero,
html[lang="zh"] .courtyard-title,
html[lang="zh"] .courtyard-sub,
html[lang="zh"] .bldg-hero-title,
html[lang="zh"] .module-title,
html[lang="zh"] .doctor-name,
html[lang="zh"] .product-name,
html[lang="zh"] .article-title,
html[lang="zh"] .future-card .ttl,
html[lang="zh"] .bldg-popover-name,
html[lang="zh"] .bldg-pin-name,
html[lang="zh"] .sitemap-section h2,
html[lang="zh"] .sitemap-header h1,
html[lang="zh"] .bldg-index-item .name,
html[lang="zh"] .landing-door-cue-main,
html[lang="zh"] .v2-hero-title,
html[lang="zh"] .v2-popover-cn,
html[lang="zh"] .v2-popover-en,
html[lang="zh"] .v2-pin-cn,
html[lang="zh"] .v2-pin-en {
font-family: var(--font-zh);
font-style: normal !important;
letter-spacing: 0.02em;
}
/* The logo plate font stays the same regardless of selected page language */
html[lang="zh"] .nav-wordmark-primary {
font-family: "Manrope", "Inter", system-ui, sans-serif !important;
font-style: normal !important;
font-weight: 700 !important;
}
html[lang="zh"] .nav-wordmark-sub {
font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", serif !important;
font-style: normal !important;
}
/* Fraunces is all-caps; preserve case for English (no transform). */
html[lang="en"] .landing-hero,
html[lang="en"] .courtyard-title,
html[lang="en"] .bldg-hero-title,
html[lang="en"] .module-title,
html[lang="en"] .v2-hero-title,
html[lang="en"] .nav-wordmark-primary {
font-style: normal;
letter-spacing: 0.01em;
}
/* App shell */
#app {
min-height: 100vh;
position: relative;
isolation: isolate;
}
/* Atmospheric backdrop (sun, grain) */
.atmosphere {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse at 80% -10%, rgba(220, 180, 130, 0.45), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(180, 140, 100, 0.18), transparent 50%),
linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
}
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
mix-blend-mode: multiply;
opacity: 0.06;
background-image: url("data:image/svg+xml;utf8, below is align-items:center, which shrink-wraps its flex child to
the text height. `width:100%` alone therefore only filled the row
HORIZONTALLY — the anchor stayed 19px tall inside a 44px row, leaving 25px
of dead space that looked like a target but navigated nowhere. The anchor
needs align-self:stretch to take the row's full height, and its own
flex/align-items to keep the label optically centred. Measure the ANCHOR,
not the row: the row was already 44px while every link was still 19px. */
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col ul li {
font-size: 14px;
color: rgba(245, 238, 223, 0.78);
cursor: pointer;
min-height: 44px;
display: flex;
align-items: center;
}
.footer-col ul li a { display: flex; align-items: center; align-self: stretch; width: 100%; }
.footer-col ul li:hover { color: var(--cream-50); }
.footer-bottom {
max-width: 1280px;
margin: 48px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(245, 238, 223, 0.12);
display: flex;
justify-content: space-between;
font-size: 12px;
color: rgba(245, 238, 223, 0.55);
}
/* Responsive niceties */
@media (max-width: 900px) {
.nav { padding: 14px 18px; }
.nav-center { display: none; }
.landing { padding: 0 24px; }
.courtyard { padding: 90px 18px 32px; }
.bldg-index { grid-template-columns: 1fr; }
.bldg-popover { width: 220px; padding: 14px 16px 12px; }
.bldg-popover-name { font-size: 22px; }
.bldg-pin-name { font-size: 19px; }
.bldg-pin { top: -48px; }
.modules { grid-template-columns: 1fr; }
.doctor-row, .product-grid, .article-grid, .future-grid { grid-template-columns: 1fr 1fr; }
.ai-card { grid-template-columns: 1fr; padding: 24px; }
/* Phone: the figure and its meta stack; the strip is two rows of four. */
.ai-figure { grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; }
.ai-figure-disc { max-width: 200px; }
.ai-figure-name { font-size: 22px; }
.ai-figure-strip { max-width: 178px; margin-inline: auto; justify-content: center; }
.bldg-hero { grid-template-columns: 1fr; gap: 24px; }
.sitemap-tree { grid-template-columns: 1fr; }
.sitemap-side { position: static; flex-direction: row; flex-wrap: wrap; }
.footer-inner { gap: 40px; }
.footer-top {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.footer-top-logo { justify-content: center; }
.footer-partners { align-items: center; }
.footer-cert { align-items: center; justify-self: center; }
.footer-cert .footer-eyebrow { text-align: center; }
.footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* ── Skip link ──────────────────────────────────────────────────────────────
DUPLICATED FROM base.css ON PURPOSE. base.css carries the same block, but
only 6 public pages load it (the legal/utility ones) — the other 12 load
this file instead, so without this copy their skip link had NO styling at
all and rendered as a visible "Skip to main content" link at the top of the
page (verified live on article/contact/shop, 2026-08-15). The four app
shells (admin/portal/doctor/pharmacy) load base.css and NOT this file, so
base.css must keep its copy; adding base.css to the public pages instead
would have dragged in unrelated rules. Keep the two blocks in step.
Mechanism, same as base.css: 'left:-9999px' rather than clip — the earlier
clip-based pattern still painted on tester's mobile + iPad. On :focus the
link snaps into the top-left corner.
Token fallbacks are load-bearing: tokens.css is only on 8 of the 18 public
pages, so var(--ink) alone would leave the focused link transparent. */
.skip-link {
position: absolute !important;
left: -9999px !important;
top: 0;
background: var(--ink, #1A1612);
color: var(--washi, #EDE7D8);
padding: 0.5rem 1rem;
z-index: var(--z-max, 9999);
}
.skip-link:focus {
left: 0 !important;
}
/* ───── Footer edge on small screens ─────────────────────────────────────────
.footer carried a flat 48px inset at every width while the pages above it
sit far tighter. Measured at 375px: the landing's content starts at 22, the
blog's and the article's at 20, the footer at 48. So the footer stepped
inward from the page it belongs to, on every page, and spent 96px of a
375px screen on margin — which is also what squeezed the link columns.
The values here match what the pages actually use rather than inventing a
third number: 20px on phones, 24px on tablets (blog cards measure 24 at
768). Above 900px the 48px inset is untouched — there it is a deliberate
part of the footer band, not a mismatch.
.footer-cert-line2 is the one piece of real sentence text down here, and
it names the register practitioners are licensed under, so it is worth
reading; 11px is too small for that on a phone.
The uppercase micro-labels (.footer-eyebrow, .footer-col h4) come up two
points on small screens and lose roughly 40% of their tracking with it.
Both halves matter: 10px set in caps at 0.28em is hard to read because of
the spacing as much as the size, since tracking that wide stops the eye
reading a word as one shape. They stay tracked caps — 0.16em and 0.13em is
still far looser than body text, so these remain labels, not headings.
Tracking down makes the words narrower, so unlike the size bump this
direction cannot wrap anything: REGISTERED goes 105px -> 90px and NAVIGATE
80px -> 71px inside an unchanged 154px column at 375px. Measured.
Placed last in the file: .footer's own padding is declared far above, and
the footer's existing 900px block sits above it too. */
@media (max-width: 900px) {
.footer { padding-left: 24px; padding-right: 24px; }
.footer-cert-line2 { font-size: 13px; }
.footer-eyebrow { font-size: 12px; letter-spacing: 0.16em; }
.footer-col h4 { font-size: 12.5px; letter-spacing: 0.13em; }
}
@media (max-width: 600px) {
.footer { padding-left: 20px; padding-right: 20px; }
}