/* ===== index.html ===== */
/* ============================================================
悠闲萌官 · Brand Tokens (prefix: yxmg)
Direction: 自然健康质感 — natural leaf-green + warm sand neutrals
============================================================ */
:root {
/* ---- Primary · natural leaf-green scale ---- */
--yxmg-primary-50: #F0F7F1;
--yxmg-primary-100: #DCEBDE;
--yxmg-primary-200: #BAD9BE;
--yxmg-primary-300: #8FBE96;
--yxmg-primary-400: #629E6C;
--yxmg-primary-500: #44814F;
--yxmg-primary-600: #366A40;
--yxmg-primary-700: #2D5435;
--yxmg-primary-800: #26432C;
--yxmg-primary-900: #1F3724;
/* ---- Neutral · warm sand / stone scale ---- */
--yxmg-neutral-0: #FFFFFF;
--yxmg-neutral-50: #FAF8F3;
--yxmg-neutral-100: #F4F0E7;
--yxmg-neutral-200: #E8E1D2;
--yxmg-neutral-300: #D6CBB4;
--yxmg-neutral-400: #B6A98C;
--yxmg-neutral-500: #8C7E64;
--yxmg-neutral-600: #6E6350;
--yxmg-neutral-700: #524839;
--yxmg-neutral-800: #36302A;
--yxmg-neutral-900: #211E1A;
/* ---- State (semantic only) ---- */
--yxmg-success: #44814F;
--yxmg-warning: #C28A2C;
--yxmg-error: #B5462E;
--yxmg-info: #4A7A9E;
/* ---- Semantic aliases (Tailwind bridge) ---- */
--yxmg-background: #FCFBF7;
--yxmg-foreground: #2A2620;
--yxmg-card: #FFFFFF;
--yxmg-card-foreground: #2A2620;
--yxmg-popover: #FFFFFF;
--yxmg-popover-foreground: #2A2620;
--yxmg-primary: #44814F;
--yxmg-primary-foreground: #FFFFFF;
--yxmg-secondary: #EDE7D8;
--yxmg-secondary-foreground: #4A4338;
--yxmg-muted: #F1ECDF;
--yxmg-muted-foreground: #7A705C;
--yxmg-accent: #DCEBDE;
--yxmg-accent-foreground: #2D5435;
--yxmg-destructive: #B5462E;
--yxmg-destructive-foreground:#FFFFFF;
--yxmg-border: #E3DAC6;
--yxmg-input: #E3DAC6;
--yxmg-ring: #44814F;
/* chart palette (earthy, on-brand) */
--yxmg-chart-1: #44814F;
--yxmg-chart-2: #C28A2C;
--yxmg-chart-3: #8FBE96;
--yxmg-chart-4: #6E6350;
--yxmg-chart-5: #B5462E;
/* ---- Radius ---- */
--yxmg-radius-sm: 6px;
--yxmg-radius-md: 10px;
--yxmg-radius-lg: 14px;
--yxmg-radius-xl: 22px;
/* ---- Shadows (border/surface-led, low alpha) ---- */
--yxmg-shadow-xs: 0 1px 2px 0 rgba(33,30,26,.04);
--yxmg-shadow-sm: 0 1px 3px 0 rgba(33,30,26,.05), 0 1px 2px -1px rgba(33,30,26,.04);
--yxmg-shadow-md: 0 6px 16px -4px rgba(33,30,26,.07), 0 2px 6px -2px rgba(33,30,26,.05);
--yxmg-shadow-lg: 0 18px 40px -10px rgba(33,30,26,.12), 0 8px 16px -8px rgba(33,30,26,.07);
/* ---- Typography ----
Sans-only system stack (reliable in canvas srcdoc).
--font-sans overrides Tailwind's font-sans utility. */
--yxmg-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: var(--yxmg-font-sans);
--yxmg-font-display: var(--yxmg-font-sans);
}
/* ---- Base ---- */
@layer base {
html { font-family: var(--yxmg-font-sans); }
body { font-family: var(--yxmg-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--yxmg-primary-200); color: var(--yxmg-primary-900); }
h1,h2,h3,h4 { letter-spacing: -0.01em; }
}
/* ---- Utility helpers (page-scoped, non-layout) ---- */
.yxmg-text-balance { text-wrap: balance; }
.yxmg-text-pretty { text-wrap: pretty; }
/* soft organic section backdrop */
.yxmg-grain {
background-image:
radial-gradient(120% 120% at 0% 0%, rgba(68,129,79,.04) 0%, transparent 55%),
radial-gradient(120% 120% at 100% 100%, rgba(194,138,44,.04) 0%, transparent 55%);
}
@theme inline {
--color-background: var(--yxmg-background);
--color-foreground: var(--yxmg-foreground);
--color-card: var(--yxmg-card);
--color-card-foreground: var(--yxmg-card-foreground);
--color-popover: var(--yxmg-popover);
--color-popover-foreground: var(--yxmg-popover-foreground);
--color-primary: var(--yxmg-primary);
--color-primary-foreground: var(--yxmg-primary-foreground);
--color-secondary: var(--yxmg-secondary);
--color-secondary-foreground: var(--yxmg-secondary-foreground);
--color-muted: var(--yxmg-muted);
--color-muted-foreground: var(--yxmg-muted-foreground);
--color-accent: var(--yxmg-accent);
--color-accent-foreground: var(--yxmg-accent-foreground);
--color-destructive: var(--yxmg-destructive);
--color-destructive-foreground: var(--yxmg-destructive-foreground);
--color-border: var(--yxmg-border);
--color-input: var(--yxmg-input);
--color-ring: var(--yxmg-ring);
--color-chart-1: var(--yxmg-chart-1);
--color-chart-2: var(--yxmg-chart-2);
--color-chart-3: var(--yxmg-chart-3);
--color-chart-4: var(--yxmg-chart-4);
--color-chart-5: var(--yxmg-chart-5);
--radius-sm: var(--yxmg-radius-sm);
--radius-md: var(--yxmg-radius-md);
--radius-lg: var(--yxmg-radius-lg);
--radius-xl: var(--yxmg-radius-xl);
}
@layer base {
body { background: var(--yxmg-background); color: var(--yxmg-foreground); }
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
th { @apply whitespace-nowrap; }
}
.bg-background { background-color: var(--yxmg-background); }
.text-background { color: var(--yxmg-background); }
.border-background { border-color: var(--yxmg-background); }
.ring-background { --tw-ring-color: var(--yxmg-background); }
.bg-foreground { background-color: var(--yxmg-foreground); }
.text-foreground { color: var(--yxmg-foreground); }
.border-foreground { border-color: var(--yxmg-foreground); }
.ring-foreground { --tw-ring-color: var(--yxmg-foreground); }
.bg-card { background-color: var(--yxmg-card); }
.text-card { color: var(--yxmg-card); }
.border-card { border-color: var(--yxmg-card); }
.ring-card { --tw-ring-color: var(--yxmg-card); }
.bg-card-foreground { background-color: var(--yxmg-card-foreground); }
.text-card-foreground { color: var(--yxmg-card-foreground); }
.border-card-foreground { border-color: var(--yxmg-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--yxmg-card-foreground); }
.bg-popover { background-color: var(--yxmg-popover); }
.text-popover { color: var(--yxmg-popover); }
.border-popover { border-color: var(--yxmg-popover); }
.ring-popover { --tw-ring-color: var(--yxmg-popover); }
.bg-popover-foreground { background-color: var(--yxmg-popover-foreground); }
.text-popover-foreground { color: var(--yxmg-popover-foreground); }
.border-popover-foreground { border-color: var(--yxmg-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--yxmg-popover-foreground); }
.bg-primary { background-color: var(--yxmg-primary); }
.text-primary { color: var(--yxmg-primary); }
.border-primary { border-color: var(--yxmg-primary); }
.ring-primary { --tw-ring-color: var(--yxmg-primary); }
.bg-primary-foreground { background-color: var(--yxmg-primary-foreground); }
.text-primary-foreground { color: var(--yxmg-primary-foreground); }
.border-primary-foreground { border-color: var(--yxmg-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--yxmg-primary-foreground); }
.bg-secondary { background-color: var(--yxmg-secondary); }
.text-secondary { color: var(--yxmg-secondary); }
.border-secondary { border-color: var(--yxmg-secondary); }
.ring-secondary { --tw-ring-color: var(--yxmg-secondary); }
.bg-secondary-foreground { background-color: var(--yxmg-secondary-foreground); }
.text-secondary-foreground { color: var(--yxmg-secondary-foreground); }
.border-secondary-foreground { border-color: var(--yxmg-secondary-foreground); }
.ring-secondary-foreground { --tw-ring-color: var(--yxmg-secondary-foreground); }
.bg-muted { background-color: var(--yxmg-muted); }
.text-muted { color: var(--yxmg-muted); }
.border-muted { border-color: var(--yxmg-muted); }
.ring-muted { --tw-ring-color: var(--yxmg-muted); }
.bg-muted-foreground { background-color: var(--yxmg-muted-foreground); }
.text-muted-foreground { color: var(--yxmg-muted-foreground); }
.border-muted-foreground { border-color: var(--yxmg-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--yxmg-muted-foreground); }
.bg-accent { background-color: var(--yxmg-accent); }
.text-accent { color: var(--yxmg-accent); }
.border-accent { border-color: var(--yxmg-accent); }
.ring-accent { --tw-ring-color: var(--yxmg-accent); }
.bg-accent-foreground { background-color: var(--yxmg-accent-foreground); }
.text-accent-foreground { color: var(--yxmg-accent-foreground); }
.border-accent-foreground { border-color: var(--yxmg-accent-foreground); }
.ring-accent-foreground { --tw-ring-color: var(--yxmg-accent-foreground); }
.bg-destructive { background-color: var(--yxmg-destructive); }
.text-destructive { color: var(--yxmg-destructive); }
.border-destructive { border-color: var(--yxmg-destructive); }
.ring-destructive { --tw-ring-color: var(--yxmg-destructive); }
.bg-destructive-foreground { background-color: var(--yxmg-destructive-foreground); }
.text-destructive-foreground { color: var(--yxmg-destructive-foreground); }
.border-destructive-foreground { border-color: var(--yxmg-destructive-foreground); }
.ring-destructive-foreground { --tw-ring-color: var(--yxmg-destructive-foreground); }
.bg-border { background-color: var(--yxmg-border); }
.text-border { color: var(--yxmg-border); }
.border-border { border-color: var(--yxmg-border); }
.ring-border { --tw-ring-color: var(--yxmg-border); }
.bg-input { background-color: var(--yxmg-input); }
.text-input { color: var(--yxmg-input); }
.border-input { border-color: var(--yxmg-input); }
.ring-input { --tw-ring-color: var(--yxmg-input); }
.bg-ring { background-color: var(--yxmg-ring); }
.text-ring { color: var(--yxmg-ring); }
.border-ring { border-color: var(--yxmg-ring); }
.ring-ring { --tw-ring-color: var(--yxmg-ring); }
.bg-chart-1 { background-color: var(--yxmg-chart-1); }
.text-chart-1 { color: var(--yxmg-chart-1); }
.border-chart-1 { border-color: var(--yxmg-chart-1); }
.ring-chart-1 { --tw-ring-color: var(--yxmg-chart-1); }
.bg-chart-2 { background-color: var(--yxmg-chart-2); }
.text-chart-2 { color: var(--yxmg-chart-2); }
.border-chart-2 { border-color: var(--yxmg-chart-2); }
.ring-chart-2 { --tw-ring-color: var(--yxmg-chart-2); }
.bg-chart-3 { background-color: var(--yxmg-chart-3); }
.text-chart-3 { color: var(--yxmg-chart-3); }
.border-chart-3 { border-color: var(--yxmg-chart-3); }
.ring-chart-3 { --tw-ring-color: var(--yxmg-chart-3); }
.bg-chart-4 { background-color: var(--yxmg-chart-4); }
.text-chart-4 { color: var(--yxmg-chart-4); }
.border-chart-4 { border-color: var(--yxmg-chart-4); }
.ring-chart-4 { --tw-ring-color: var(--yxmg-chart-4); }
.bg-chart-5 { background-color: var(--yxmg-chart-5); }
.text-chart-5 { color: var(--yxmg-chart-5); }
.border-chart-5 { border-color: var(--yxmg-chart-5); }
.ring-chart-5 { --tw-ring-color: var(--yxmg-chart-5); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
}
/* ===== products.html ===== */
/* ============================================================
悠闲萌官 · Brand Tokens (prefix: yxmg)
Direction: 自然健康质感 — natural leaf-green + warm sand neutrals
============================================================ */
:root {
/* ---- Primary · natural leaf-green scale ---- */
--yxmg-primary-50: #F0F7F1;
--yxmg-primary-100: #DCEBDE;
--yxmg-primary-200: #BAD9BE;
--yxmg-primary-300: #8FBE96;
--yxmg-primary-400: #629E6C;
--yxmg-primary-500: #44814F;
--yxmg-primary-600: #366A40;
--yxmg-primary-700: #2D5435;
--yxmg-primary-800: #26432C;
--yxmg-primary-900: #1F3724;
/* ---- Neutral · warm sand / stone scale ---- */
--yxmg-neutral-0: #FFFFFF;
--yxmg-neutral-50: #FAF8F3;
--yxmg-neutral-100: #F4F0E7;
--yxmg-neutral-200: #E8E1D2;
--yxmg-neutral-300: #D6CBB4;
--yxmg-neutral-400: #B6A98C;
--yxmg-neutral-500: #8C7E64;
--yxmg-neutral-600: #6E6350;
--yxmg-neutral-700: #524839;
--yxmg-neutral-800: #36302A;
--yxmg-neutral-900: #211E1A;
/* ---- State (semantic only) ---- */
--yxmg-success: #44814F;
--yxmg-warning: #C28A2C;
--yxmg-error: #B5462E;
--yxmg-info: #4A7A9E;
/* ---- Semantic aliases (Tailwind bridge) ---- */
--yxmg-background: #FCFBF7;
--yxmg-foreground: #2A2620;
--yxmg-card: #FFFFFF;
--yxmg-card-foreground: #2A2620;
--yxmg-popover: #FFFFFF;
--yxmg-popover-foreground: #2A2620;
--yxmg-primary: #44814F;
--yxmg-primary-foreground: #FFFFFF;
--yxmg-secondary: #EDE7D8;
--yxmg-secondary-foreground: #4A4338;
--yxmg-muted: #F1ECDF;
--yxmg-muted-foreground: #7A705C;
--yxmg-accent: #DCEBDE;
--yxmg-accent-foreground: #2D5435;
--yxmg-destructive: #B5462E;
--yxmg-destructive-foreground:#FFFFFF;
--yxmg-border: #E3DAC6;
--yxmg-input: #E3DAC6;
--yxmg-ring: #44814F;
/* chart palette (earthy, on-brand) */
--yxmg-chart-1: #44814F;
--yxmg-chart-2: #C28A2C;
--yxmg-chart-3: #8FBE96;
--yxmg-chart-4: #6E6350;
--yxmg-chart-5: #B5462E;
/* ---- Radius ---- */
--yxmg-radius-sm: 6px;
--yxmg-radius-md: 10px;
--yxmg-radius-lg: 14px;
--yxmg-radius-xl: 22px;
/* ---- Shadows (border/surface-led, low alpha) ---- */
--yxmg-shadow-xs: 0 1px 2px 0 rgba(33,30,26,.04);
--yxmg-shadow-sm: 0 1px 3px 0 rgba(33,30,26,.05), 0 1px 2px -1px rgba(33,30,26,.04);
--yxmg-shadow-md: 0 6px 16px -4px rgba(33,30,26,.07), 0 2px 6px -2px rgba(33,30,26,.05);
--yxmg-shadow-lg: 0 18px 40px -10px rgba(33,30,26,.12), 0 8px 16px -8px rgba(33,30,26,.07);
/* ---- Typography ----
Sans-only system stack (reliable in canvas srcdoc).
--font-sans overrides Tailwind's font-sans utility. */
--yxmg-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: var(--yxmg-font-sans);
--yxmg-font-display: var(--yxmg-font-sans);
}
/* ---- Base ---- */
@layer base {
html { font-family: var(--yxmg-font-sans); }
body { font-family: var(--yxmg-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--yxmg-primary-200); color: var(--yxmg-primary-900); }
h1,h2,h3,h4 { letter-spacing: -0.01em; }
}
/* ---- Utility helpers (page-scoped, non-layout) ---- */
.yxmg-text-balance { text-wrap: balance; }
.yxmg-text-pretty { text-wrap: pretty; }
/* soft organic section backdrop */
.yxmg-grain {
background-image:
radial-gradient(120% 120% at 0% 0%, rgba(68,129,79,.04) 0%, transparent 55%),
radial-gradient(120% 120% at 100% 100%, rgba(194,138,44,.04) 0%, transparent 55%);
}
@theme inline {
--color-background: var(--yxmg-background);
--color-foreground: var(--yxmg-foreground);
--color-card: var(--yxmg-card);
--color-card-foreground: var(--yxmg-card-foreground);
--color-popover: var(--yxmg-popover);
--color-popover-foreground: var(--yxmg-popover-foreground);
--color-primary: var(--yxmg-primary);
--color-primary-foreground: var(--yxmg-primary-foreground);
--color-secondary: var(--yxmg-secondary);
--color-secondary-foreground: var(--yxmg-secondary-foreground);
--color-muted: var(--yxmg-muted);
--color-muted-foreground: var(--yxmg-muted-foreground);
--color-accent: var(--yxmg-accent);
--color-accent-foreground: var(--yxmg-accent-foreground);
--color-destructive: var(--yxmg-destructive);
--color-destructive-foreground: var(--yxmg-destructive-foreground);
--color-border: var(--yxmg-border);
--color-input: var(--yxmg-input);
--color-ring: var(--yxmg-ring);
--color-chart-1: var(--yxmg-chart-1);
--color-chart-2: var(--yxmg-chart-2);
--color-chart-3: var(--yxmg-chart-3);
--color-chart-4: var(--yxmg-chart-4);
--color-chart-5: var(--yxmg-chart-5);
--radius-sm: var(--yxmg-radius-sm);
--radius-md: var(--yxmg-radius-md);
--radius-lg: var(--yxmg-radius-lg);
--radius-xl: var(--yxmg-radius-xl);
}
@layer base {
body { background: var(--yxmg-background); color: var(--yxmg-foreground); }
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
th { @apply whitespace-nowrap; }
}
.bg-background { background-color: var(--yxmg-background); }
.text-background { color: var(--yxmg-background); }
.border-background { border-color: var(--yxmg-background); }
.ring-background { --tw-ring-color: var(--yxmg-background); }
.bg-foreground { background-color: var(--yxmg-foreground); }
.text-foreground { color: var(--yxmg-foreground); }
.border-foreground { border-color: var(--yxmg-foreground); }
.ring-foreground { --tw-ring-color: var(--yxmg-foreground); }
.bg-card { background-color: var(--yxmg-card); }
.text-card { color: var(--yxmg-card); }
.border-card { border-color: var(--yxmg-card); }
.ring-card { --tw-ring-color: var(--yxmg-card); }
.bg-card-foreground { background-color: var(--yxmg-card-foreground); }
.text-card-foreground { color: var(--yxmg-card-foreground); }
.border-card-foreground { border-color: var(--yxmg-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--yxmg-card-foreground); }
.bg-popover { background-color: var(--yxmg-popover); }
.text-popover { color: var(--yxmg-popover); }
.border-popover { border-color: var(--yxmg-popover); }
.ring-popover { --tw-ring-color: var(--yxmg-popover); }
.bg-popover-foreground { background-color: var(--yxmg-popover-foreground); }
.text-popover-foreground { color: var(--yxmg-popover-foreground); }
.border-popover-foreground { border-color: var(--yxmg-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--yxmg-popover-foreground); }
.bg-primary { background-color: var(--yxmg-primary); }
.text-primary { color: var(--yxmg-primary); }
.border-primary { border-color: var(--yxmg-primary); }
.ring-primary { --tw-ring-color: var(--yxmg-primary); }
.bg-primary-foreground { background-color: var(--yxmg-primary-foreground); }
.text-primary-foreground { color: var(--yxmg-primary-foreground); }
.border-primary-foreground { border-color: var(--yxmg-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--yxmg-primary-foreground); }
.bg-secondary { background-color: var(--yxmg-secondary); }
.text-secondary { color: var(--yxmg-secondary); }
.border-secondary { border-color: var(--yxmg-secondary); }
.ring-secondary { --tw-ring-color: var(--yxmg-secondary); }
.bg-secondary-foreground { background-color: var(--yxmg-secondary-foreground); }
.text-secondary-foreground { color: var(--yxmg-secondary-foreground); }
.border-secondary-foreground { border-color: var(--yxmg-secondary-foreground); }
.ring-secondary-foreground { --tw-ring-color: var(--yxmg-secondary-foreground); }
.bg-muted { background-color: var(--yxmg-muted); }
.text-muted { color: var(--yxmg-muted); }
.border-muted { border-color: var(--yxmg-muted); }
.ring-muted { --tw-ring-color: var(--yxmg-muted); }
.bg-muted-foreground { background-color: var(--yxmg-muted-foreground); }
.text-muted-foreground { color: var(--yxmg-muted-foreground); }
.border-muted-foreground { border-color: var(--yxmg-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--yxmg-muted-foreground); }
.bg-accent { background-color: var(--yxmg-accent); }
.text-accent { color: var(--yxmg-accent); }
.border-accent { border-color: var(--yxmg-accent); }
.ring-accent { --tw-ring-color: var(--yxmg-accent); }
.bg-accent-foreground { background-color: var(--yxmg-accent-foreground); }
.text-accent-foreground { color: var(--yxmg-accent-foreground); }
.border-accent-foreground { border-color: var(--yxmg-accent-foreground); }
.ring-accent-foreground { --tw-ring-color: var(--yxmg-accent-foreground); }
.bg-destructive { background-color: var(--yxmg-destructive); }
.text-destructive { color: var(--yxmg-destructive); }
.border-destructive { border-color: var(--yxmg-destructive); }
.ring-destructive { --tw-ring-color: var(--yxmg-destructive); }
.bg-destructive-foreground { background-color: var(--yxmg-destructive-foreground); }
.text-destructive-foreground { color: var(--yxmg-destructive-foreground); }
.border-destructive-foreground { border-color: var(--yxmg-destructive-foreground); }
.ring-destructive-foreground { --tw-ring-color: var(--yxmg-destructive-foreground); }
.bg-border { background-color: var(--yxmg-border); }
.text-border { color: var(--yxmg-border); }
.border-border { border-color: var(--yxmg-border); }
.ring-border { --tw-ring-color: var(--yxmg-border); }
.bg-input { background-color: var(--yxmg-input); }
.text-input { color: var(--yxmg-input); }
.border-input { border-color: var(--yxmg-input); }
.ring-input { --tw-ring-color: var(--yxmg-input); }
.bg-ring { background-color: var(--yxmg-ring); }
.text-ring { color: var(--yxmg-ring); }
.border-ring { border-color: var(--yxmg-ring); }
.ring-ring { --tw-ring-color: var(--yxmg-ring); }
.bg-chart-1 { background-color: var(--yxmg-chart-1); }
.text-chart-1 { color: var(--yxmg-chart-1); }
.border-chart-1 { border-color: var(--yxmg-chart-1); }
.ring-chart-1 { --tw-ring-color: var(--yxmg-chart-1); }
.bg-chart-2 { background-color: var(--yxmg-chart-2); }
.text-chart-2 { color: var(--yxmg-chart-2); }
.border-chart-2 { border-color: var(--yxmg-chart-2); }
.ring-chart-2 { --tw-ring-color: var(--yxmg-chart-2); }
.bg-chart-3 { background-color: var(--yxmg-chart-3); }
.text-chart-3 { color: var(--yxmg-chart-3); }
.border-chart-3 { border-color: var(--yxmg-chart-3); }
.ring-chart-3 { --tw-ring-color: var(--yxmg-chart-3); }
.bg-chart-4 { background-color: var(--yxmg-chart-4); }
.text-chart-4 { color: var(--yxmg-chart-4); }
.border-chart-4 { border-color: var(--yxmg-chart-4); }
.ring-chart-4 { --tw-ring-color: var(--yxmg-chart-4); }
.bg-chart-5 { background-color: var(--yxmg-chart-5); }
.text-chart-5 { color: var(--yxmg-chart-5); }
.border-chart-5 { border-color: var(--yxmg-chart-5); }
.ring-chart-5 { --tw-ring-color: var(--yxmg-chart-5); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ===== care-guide.html ===== */
/* ============================================================
悠闲萌官 · Brand Tokens (prefix: yxmg)
Direction: 自然健康质感 — natural leaf-green + warm sand neutrals
============================================================ */
:root {
/* ---- Primary · natural leaf-green scale ---- */
--yxmg-primary-50: #F0F7F1;
--yxmg-primary-100: #DCEBDE;
--yxmg-primary-200: #BAD9BE;
--yxmg-primary-300: #8FBE96;
--yxmg-primary-400: #629E6C;
--yxmg-primary-500: #44814F;
--yxmg-primary-600: #366A40;
--yxmg-primary-700: #2D5435;
--yxmg-primary-800: #26432C;
--yxmg-primary-900: #1F3724;
/* ---- Neutral · warm sand / stone scale ---- */
--yxmg-neutral-0: #FFFFFF;
--yxmg-neutral-50: #FAF8F3;
--yxmg-neutral-100: #F4F0E7;
--yxmg-neutral-200: #E8E1D2;
--yxmg-neutral-300: #D6CBB4;
--yxmg-neutral-400: #B6A98C;
--yxmg-neutral-500: #8C7E64;
--yxmg-neutral-600: #6E6350;
--yxmg-neutral-700: #524839;
--yxmg-neutral-800: #36302A;
--yxmg-neutral-900: #211E1A;
/* ---- State (semantic only) ---- */
--yxmg-success: #44814F;
--yxmg-warning: #C28A2C;
--yxmg-error: #B5462E;
--yxmg-info: #4A7A9E;
/* ---- Semantic aliases (Tailwind bridge) ---- */
--yxmg-background: #FCFBF7;
--yxmg-foreground: #2A2620;
--yxmg-card: #FFFFFF;
--yxmg-card-foreground: #2A2620;
--yxmg-popover: #FFFFFF;
--yxmg-popover-foreground: #2A2620;
--yxmg-primary: #44814F;
--yxmg-primary-foreground: #FFFFFF;
--yxmg-secondary: #EDE7D8;
--yxmg-secondary-foreground: #4A4338;
--yxmg-muted: #F1ECDF;
--yxmg-muted-foreground: #7A705C;
--yxmg-accent: #DCEBDE;
--yxmg-accent-foreground: #2D5435;
--yxmg-destructive: #B5462E;
--yxmg-destructive-foreground:#FFFFFF;
--yxmg-border: #E3DAC6;
--yxmg-input: #E3DAC6;
--yxmg-ring: #44814F;
/* chart palette (earthy, on-brand) */
--yxmg-chart-1: #44814F;
--yxmg-chart-2: #C28A2C;
--yxmg-chart-3: #8FBE96;
--yxmg-chart-4: #6E6350;
--yxmg-chart-5: #B5462E;
/* ---- Radius ---- */
--yxmg-radius-sm: 6px;
--yxmg-radius-md: 10px;
--yxmg-radius-lg: 14px;
--yxmg-radius-xl: 22px;
/* ---- Shadows (border/surface-led, low alpha) ---- */
--yxmg-shadow-xs: 0 1px 2px 0 rgba(33,30,26,.04);
--yxmg-shadow-sm: 0 1px 3px 0 rgba(33,30,26,.05), 0 1px 2px -1px rgba(33,30,26,.04);
--yxmg-shadow-md: 0 6px 16px -4px rgba(33,30,26,.07), 0 2px 6px -2px rgba(33,30,26,.05);
--yxmg-shadow-lg: 0 18px 40px -10px rgba(33,30,26,.12), 0 8px 16px -8px rgba(33,30,26,.07);
/* ---- Typography ----
Sans-only system stack (reliable in canvas srcdoc).
--font-sans overrides Tailwind's font-sans utility. */
--yxmg-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: var(--yxmg-font-sans);
--yxmg-font-display: var(--yxmg-font-sans);
}
/* ---- Base ---- */
@layer base {
html { font-family: var(--yxmg-font-sans); }
body { font-family: var(--yxmg-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--yxmg-primary-200); color: var(--yxmg-primary-900); }
h1,h2,h3,h4 { letter-spacing: -0.01em; }
}
/* ---- Utility helpers (page-scoped, non-layout) ---- */
.yxmg-text-balance { text-wrap: balance; }
.yxmg-text-pretty { text-wrap: pretty; }
/* soft organic section backdrop */
.yxmg-grain {
background-image:
radial-gradient(120% 120% at 0% 0%, rgba(68,129,79,.04) 0%, transparent 55%),
radial-gradient(120% 120% at 100% 100%, rgba(194,138,44,.04) 0%, transparent 55%);
}
@theme inline {
--color-background: var(--yxmg-background);
--color-foreground: var(--yxmg-foreground);
--color-card: var(--yxmg-card);
--color-card-foreground: var(--yxmg-card-foreground);
--color-popover: var(--yxmg-popover);
--color-popover-foreground: var(--yxmg-popover-foreground);
--color-primary: var(--yxmg-primary);
--color-primary-foreground: var(--yxmg-primary-foreground);
--color-secondary: var(--yxmg-secondary);
--color-secondary-foreground: var(--yxmg-secondary-foreground);
--color-muted: var(--yxmg-muted);
--color-muted-foreground: var(--yxmg-muted-foreground);
--color-accent: var(--yxmg-accent);
--color-accent-foreground: var(--yxmg-accent-foreground);
--color-destructive: var(--yxmg-destructive);
--color-destructive-foreground: var(--yxmg-destructive-foreground);
--color-border: var(--yxmg-border);
--color-input: var(--yxmg-input);
--color-ring: var(--yxmg-ring);
--color-chart-1: var(--yxmg-chart-1);
--color-chart-2: var(--yxmg-chart-2);
--color-chart-3: var(--yxmg-chart-3);
--color-chart-4: var(--yxmg-chart-4);
--color-chart-5: var(--yxmg-chart-5);
--radius-sm: var(--yxmg-radius-sm);
--radius-md: var(--yxmg-radius-md);
--radius-lg: var(--yxmg-radius-lg);
--radius-xl: var(--yxmg-radius-xl);
}
@layer base {
body { background: var(--yxmg-background); color: var(--yxmg-foreground); }
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
th { @apply whitespace-nowrap; }
}
.bg-background { background-color: var(--yxmg-background); }
.text-background { color: var(--yxmg-background); }
.border-background { border-color: var(--yxmg-background); }
.ring-background { --tw-ring-color: var(--yxmg-background); }
.bg-foreground { background-color: var(--yxmg-foreground); }
.text-foreground { color: var(--yxmg-foreground); }
.border-foreground { border-color: var(--yxmg-foreground); }
.ring-foreground { --tw-ring-color: var(--yxmg-foreground); }
.bg-card { background-color: var(--yxmg-card); }
.text-card { color: var(--yxmg-card); }
.border-card { border-color: var(--yxmg-card); }
.ring-card { --tw-ring-color: var(--yxmg-card); }
.bg-card-foreground { background-color: var(--yxmg-card-foreground); }
.text-card-foreground { color: var(--yxmg-card-foreground); }
.border-card-foreground { border-color: var(--yxmg-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--yxmg-card-foreground); }
.bg-popover { background-color: var(--yxmg-popover); }
.text-popover { color: var(--yxmg-popover); }
.border-popover { border-color: var(--yxmg-popover); }
.ring-popover { --tw-ring-color: var(--yxmg-popover); }
.bg-popover-foreground { background-color: var(--yxmg-popover-foreground); }
.text-popover-foreground { color: var(--yxmg-popover-foreground); }
.border-popover-foreground { border-color: var(--yxmg-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--yxmg-popover-foreground); }
.bg-primary { background-color: var(--yxmg-primary); }
.text-primary { color: var(--yxmg-primary); }
.border-primary { border-color: var(--yxmg-primary); }
.ring-primary { --tw-ring-color: var(--yxmg-primary); }
.bg-primary-foreground { background-color: var(--yxmg-primary-foreground); }
.text-primary-foreground { color: var(--yxmg-primary-foreground); }
.border-primary-foreground { border-color: var(--yxmg-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--yxmg-primary-foreground); }
.bg-secondary { background-color: var(--yxmg-secondary); }
.text-secondary { color: var(--yxmg-secondary); }
.border-secondary { border-color: var(--yxmg-secondary); }
.ring-secondary { --tw-ring-color: var(--yxmg-secondary); }
.bg-secondary-foreground { background-color: var(--yxmg-secondary-foreground); }
.text-secondary-foreground { color: var(--yxmg-secondary-foreground); }
.border-secondary-foreground { border-color: var(--yxmg-secondary-foreground); }
.ring-secondary-foreground { --tw-ring-color: var(--yxmg-secondary-foreground); }
.bg-muted { background-color: var(--yxmg-muted); }
.text-muted { color: var(--yxmg-muted); }
.border-muted { border-color: var(--yxmg-muted); }
.ring-muted { --tw-ring-color: var(--yxmg-muted); }
.bg-muted-foreground { background-color: var(--yxmg-muted-foreground); }
.text-muted-foreground { color: var(--yxmg-muted-foreground); }
.border-muted-foreground { border-color: var(--yxmg-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--yxmg-muted-foreground); }
.bg-accent { background-color: var(--yxmg-accent); }
.text-accent { color: var(--yxmg-accent); }
.border-accent { border-color: var(--yxmg-accent); }
.ring-accent { --tw-ring-color: var(--yxmg-accent); }
.bg-accent-foreground { background-color: var(--yxmg-accent-foreground); }
.text-accent-foreground { color: var(--yxmg-accent-foreground); }
.border-accent-foreground { border-color: var(--yxmg-accent-foreground); }
.ring-accent-foreground { --tw-ring-color: var(--yxmg-accent-foreground); }
.bg-destructive { background-color: var(--yxmg-destructive); }
.text-destructive { color: var(--yxmg-destructive); }
.border-destructive { border-color: var(--yxmg-destructive); }
.ring-destructive { --tw-ring-color: var(--yxmg-destructive); }
.bg-destructive-foreground { background-color: var(--yxmg-destructive-foreground); }
.text-destructive-foreground { color: var(--yxmg-destructive-foreground); }
.border-destructive-foreground { border-color: var(--yxmg-destructive-foreground); }
.ring-destructive-foreground { --tw-ring-color: var(--yxmg-destructive-foreground); }
.bg-border { background-color: var(--yxmg-border); }
.text-border { color: var(--yxmg-border); }
.border-border { border-color: var(--yxmg-border); }
.ring-border { --tw-ring-color: var(--yxmg-border); }
.bg-input { background-color: var(--yxmg-input); }
.text-input { color: var(--yxmg-input); }
.border-input { border-color: var(--yxmg-input); }
.ring-input { --tw-ring-color: var(--yxmg-input); }
.bg-ring { background-color: var(--yxmg-ring); }
.text-ring { color: var(--yxmg-ring); }
.border-ring { border-color: var(--yxmg-ring); }
.ring-ring { --tw-ring-color: var(--yxmg-ring); }
.bg-chart-1 { background-color: var(--yxmg-chart-1); }
.text-chart-1 { color: var(--yxmg-chart-1); }
.border-chart-1 { border-color: var(--yxmg-chart-1); }
.ring-chart-1 { --tw-ring-color: var(--yxmg-chart-1); }
.bg-chart-2 { background-color: var(--yxmg-chart-2); }
.text-chart-2 { color: var(--yxmg-chart-2); }
.border-chart-2 { border-color: var(--yxmg-chart-2); }
.ring-chart-2 { --tw-ring-color: var(--yxmg-chart-2); }
.bg-chart-3 { background-color: var(--yxmg-chart-3); }
.text-chart-3 { color: var(--yxmg-chart-3); }
.border-chart-3 { border-color: var(--yxmg-chart-3); }
.ring-chart-3 { --tw-ring-color: var(--yxmg-chart-3); }
.bg-chart-4 { background-color: var(--yxmg-chart-4); }
.text-chart-4 { color: var(--yxmg-chart-4); }
.border-chart-4 { border-color: var(--yxmg-chart-4); }
.ring-chart-4 { --tw-ring-color: var(--yxmg-chart-4); }
.bg-chart-5 { background-color: var(--yxmg-chart-5); }
.text-chart-5 { color: var(--yxmg-chart-5); }
.border-chart-5 { border-color: var(--yxmg-chart-5); }
.ring-chart-5 { --tw-ring-color: var(--yxmg-chart-5); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
}
/* ===== about.html ===== */
/* ============================================================
悠闲萌官 · Brand Tokens (prefix: yxmg)
Direction: 自然健康质感 — natural leaf-green + warm sand neutrals
============================================================ */
:root {
/* ---- Primary · natural leaf-green scale ---- */
--yxmg-primary-50: #F0F7F1;
--yxmg-primary-100: #DCEBDE;
--yxmg-primary-200: #BAD9BE;
--yxmg-primary-300: #8FBE96;
--yxmg-primary-400: #629E6C;
--yxmg-primary-500: #44814F;
--yxmg-primary-600: #366A40;
--yxmg-primary-700: #2D5435;
--yxmg-primary-800: #26432C;
--yxmg-primary-900: #1F3724;
/* ---- Neutral · warm sand / stone scale ---- */
--yxmg-neutral-0: #FFFFFF;
--yxmg-neutral-50: #FAF8F3;
--yxmg-neutral-100: #F4F0E7;
--yxmg-neutral-200: #E8E1D2;
--yxmg-neutral-300: #D6CBB4;
--yxmg-neutral-400: #B6A98C;
--yxmg-neutral-500: #8C7E64;
--yxmg-neutral-600: #6E6350;
--yxmg-neutral-700: #524839;
--yxmg-neutral-800: #36302A;
--yxmg-neutral-900: #211E1A;
/* ---- State (semantic only) ---- */
--yxmg-success: #44814F;
--yxmg-warning: #C28A2C;
--yxmg-error: #B5462E;
--yxmg-info: #4A7A9E;
/* ---- Semantic aliases (Tailwind bridge) ---- */
--yxmg-background: #FCFBF7;
--yxmg-foreground: #2A2620;
--yxmg-card: #FFFFFF;
--yxmg-card-foreground: #2A2620;
--yxmg-popover: #FFFFFF;
--yxmg-popover-foreground: #2A2620;
--yxmg-primary: #44814F;
--yxmg-primary-foreground: #FFFFFF;
--yxmg-secondary: #EDE7D8;
--yxmg-secondary-foreground: #4A4338;
--yxmg-muted: #F1ECDF;
--yxmg-muted-foreground: #7A705C;
--yxmg-accent: #DCEBDE;
--yxmg-accent-foreground: #2D5435;
--yxmg-destructive: #B5462E;
--yxmg-destructive-foreground:#FFFFFF;
--yxmg-border: #E3DAC6;
--yxmg-input: #E3DAC6;
--yxmg-ring: #44814F;
/* chart palette (earthy, on-brand) */
--yxmg-chart-1: #44814F;
--yxmg-chart-2: #C28A2C;
--yxmg-chart-3: #8FBE96;
--yxmg-chart-4: #6E6350;
--yxmg-chart-5: #B5462E;
/* ---- Radius ---- */
--yxmg-radius-sm: 6px;
--yxmg-radius-md: 10px;
--yxmg-radius-lg: 14px;
--yxmg-radius-xl: 22px;
/* ---- Shadows (border/surface-led, low alpha) ---- */
--yxmg-shadow-xs: 0 1px 2px 0 rgba(33,30,26,.04);
--yxmg-shadow-sm: 0 1px 3px 0 rgba(33,30,26,.05), 0 1px 2px -1px rgba(33,30,26,.04);
--yxmg-shadow-md: 0 6px 16px -4px rgba(33,30,26,.07), 0 2px 6px -2px rgba(33,30,26,.05);
--yxmg-shadow-lg: 0 18px 40px -10px rgba(33,30,26,.12), 0 8px 16px -8px rgba(33,30,26,.07);
/* ---- Typography ----
Sans-only system stack (reliable in canvas srcdoc).
--font-sans overrides Tailwind's font-sans utility. */
--yxmg-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: var(--yxmg-font-sans);
--yxmg-font-display: var(--yxmg-font-sans);
}
/* ---- Base ---- */
@layer base {
html { font-family: var(--yxmg-font-sans); }
body { font-family: var(--yxmg-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--yxmg-primary-200); color: var(--yxmg-primary-900); }
h1,h2,h3,h4 { letter-spacing: -0.01em; }
}
/* ---- Utility helpers (page-scoped, non-layout) ---- */
.yxmg-text-balance { text-wrap: balance; }
.yxmg-text-pretty { text-wrap: pretty; }
/* soft organic section backdrop */
.yxmg-grain {
background-image:
radial-gradient(120% 120% at 0% 0%, rgba(68,129,79,.04) 0%, transparent 55%),
radial-gradient(120% 120% at 100% 100%, rgba(194,138,44,.04) 0%, transparent 55%);
}
@theme inline {
--color-background: var(--yxmg-background);
--color-foreground: var(--yxmg-foreground);
--color-card: var(--yxmg-card);
--color-card-foreground: var(--yxmg-card-foreground);
--color-popover: var(--yxmg-popover);
--color-popover-foreground: var(--yxmg-popover-foreground);
--color-primary: var(--yxmg-primary);
--color-primary-foreground: var(--yxmg-primary-foreground);
--color-secondary: var(--yxmg-secondary);
--color-secondary-foreground: var(--yxmg-secondary-foreground);
--color-muted: var(--yxmg-muted);
--color-muted-foreground: var(--yxmg-muted-foreground);
--color-accent: var(--yxmg-accent);
--color-accent-foreground: var(--yxmg-accent-foreground);
--color-destructive: var(--yxmg-destructive);
--color-destructive-foreground: var(--yxmg-destructive-foreground);
--color-border: var(--yxmg-border);
--color-input: var(--yxmg-input);
--color-ring: var(--yxmg-ring);
--color-chart-1: var(--yxmg-chart-1);
--color-chart-2: var(--yxmg-chart-2);
--color-chart-3: var(--yxmg-chart-3);
--color-chart-4: var(--yxmg-chart-4);
--color-chart-5: var(--yxmg-chart-5);
--radius-sm: var(--yxmg-radius-sm);
--radius-md: var(--yxmg-radius-md);
--radius-lg: var(--yxmg-radius-lg);
--radius-xl: var(--yxmg-radius-xl);
}
@layer base {
body { background: var(--yxmg-background); color: var(--yxmg-foreground); }
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
th { @apply whitespace-nowrap; }
}
.bg-background { background-color: var(--yxmg-background); }
.text-background { color: var(--yxmg-background); }
.border-background { border-color: var(--yxmg-background); }
.ring-background { --tw-ring-color: var(--yxmg-background); }
.bg-foreground { background-color: var(--yxmg-foreground); }
.text-foreground { color: var(--yxmg-foreground); }
.border-foreground { border-color: var(--yxmg-foreground); }
.ring-foreground { --tw-ring-color: var(--yxmg-foreground); }
.bg-card { background-color: var(--yxmg-card); }
.text-card { color: var(--yxmg-card); }
.border-card { border-color: var(--yxmg-card); }
.ring-card { --tw-ring-color: var(--yxmg-card); }
.bg-card-foreground { background-color: var(--yxmg-card-foreground); }
.text-card-foreground { color: var(--yxmg-card-foreground); }
.border-card-foreground { border-color: var(--yxmg-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--yxmg-card-foreground); }
.bg-popover { background-color: var(--yxmg-popover); }
.text-popover { color: var(--yxmg-popover); }
.border-popover { border-color: var(--yxmg-popover); }
.ring-popover { --tw-ring-color: var(--yxmg-popover); }
.bg-popover-foreground { background-color: var(--yxmg-popover-foreground); }
.text-popover-foreground { color: var(--yxmg-popover-foreground); }
.border-popover-foreground { border-color: var(--yxmg-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--yxmg-popover-foreground); }
.bg-primary { background-color: var(--yxmg-primary); }
.text-primary { color: var(--yxmg-primary); }
.border-primary { border-color: var(--yxmg-primary); }
.ring-primary { --tw-ring-color: var(--yxmg-primary); }
.bg-primary-foreground { background-color: var(--yxmg-primary-foreground); }
.text-primary-foreground { color: var(--yxmg-primary-foreground); }
.border-primary-foreground { border-color: var(--yxmg-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--yxmg-primary-foreground); }
.bg-secondary { background-color: var(--yxmg-secondary); }
.text-secondary { color: var(--yxmg-secondary); }
.border-secondary { border-color: var(--yxmg-secondary); }
.ring-secondary { --tw-ring-color: var(--yxmg-secondary); }
.bg-secondary-foreground { background-color: var(--yxmg-secondary-foreground); }
.text-secondary-foreground { color: var(--yxmg-secondary-foreground); }
.border-secondary-foreground { border-color: var(--yxmg-secondary-foreground); }
.ring-secondary-foreground { --tw-ring-color: var(--yxmg-secondary-foreground); }
.bg-muted { background-color: var(--yxmg-muted); }
.text-muted { color: var(--yxmg-muted); }
.border-muted { border-color: var(--yxmg-muted); }
.ring-muted { --tw-ring-color: var(--yxmg-muted); }
.bg-muted-foreground { background-color: var(--yxmg-muted-foreground); }
.text-muted-foreground { color: var(--yxmg-muted-foreground); }
.border-muted-foreground { border-color: var(--yxmg-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--yxmg-muted-foreground); }
.bg-accent { background-color: var(--yxmg-accent); }
.text-accent { color: var(--yxmg-accent); }
.border-accent { border-color: var(--yxmg-accent); }
.ring-accent { --tw-ring-color: var(--yxmg-accent); }
.bg-accent-foreground { background-color: var(--yxmg-accent-foreground); }
.text-accent-foreground { color: var(--yxmg-accent-foreground); }
.border-accent-foreground { border-color: var(--yxmg-accent-foreground); }
.ring-accent-foreground { --tw-ring-color: var(--yxmg-accent-foreground); }
.bg-destructive { background-color: var(--yxmg-destructive); }
.text-destructive { color: var(--yxmg-destructive); }
.border-destructive { border-color: var(--yxmg-destructive); }
.ring-destructive { --tw-ring-color: var(--yxmg-destructive); }
.bg-destructive-foreground { background-color: var(--yxmg-destructive-foreground); }
.text-destructive-foreground { color: var(--yxmg-destructive-foreground); }
.border-destructive-foreground { border-color: var(--yxmg-destructive-foreground); }
.ring-destructive-foreground { --tw-ring-color: var(--yxmg-destructive-foreground); }
.bg-border { background-color: var(--yxmg-border); }
.text-border { color: var(--yxmg-border); }
.border-border { border-color: var(--yxmg-border); }
.ring-border { --tw-ring-color: var(--yxmg-border); }
.bg-input { background-color: var(--yxmg-input); }
.text-input { color: var(--yxmg-input); }
.border-input { border-color: var(--yxmg-input); }
.ring-input { --tw-ring-color: var(--yxmg-input); }
.bg-ring { background-color: var(--yxmg-ring); }
.text-ring { color: var(--yxmg-ring); }
.border-ring { border-color: var(--yxmg-ring); }
.ring-ring { --tw-ring-color: var(--yxmg-ring); }
.bg-chart-1 { background-color: var(--yxmg-chart-1); }
.text-chart-1 { color: var(--yxmg-chart-1); }
.border-chart-1 { border-color: var(--yxmg-chart-1); }
.ring-chart-1 { --tw-ring-color: var(--yxmg-chart-1); }
.bg-chart-2 { background-color: var(--yxmg-chart-2); }
.text-chart-2 { color: var(--yxmg-chart-2); }
.border-chart-2 { border-color: var(--yxmg-chart-2); }
.ring-chart-2 { --tw-ring-color: var(--yxmg-chart-2); }
.bg-chart-3 { background-color: var(--yxmg-chart-3); }
.text-chart-3 { color: var(--yxmg-chart-3); }
.border-chart-3 { border-color: var(--yxmg-chart-3); }
.ring-chart-3 { --tw-ring-color: var(--yxmg-chart-3); }
.bg-chart-4 { background-color: var(--yxmg-chart-4); }
.text-chart-4 { color: var(--yxmg-chart-4); }
.border-chart-4 { border-color: var(--yxmg-chart-4); }
.ring-chart-4 { --tw-ring-color: var(--yxmg-chart-4); }
.bg-chart-5 { background-color: var(--yxmg-chart-5); }
.text-chart-5 { color: var(--yxmg-chart-5); }
.border-chart-5 { border-color: var(--yxmg-chart-5); }
.ring-chart-5 { --tw-ring-color: var(--yxmg-chart-5); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
}
.nav-link{display:inline-flex;align-items:center;padding-bottom:6px;border-bottom:2px solid transparent;color:var(--yxmg-muted-foreground);font-size:14px;transition:color .15s ease;white-space:nowrap;}
.nav-link:hover{color:var(--yxmg-primary-600);}
.nav-link-active{color:var(--yxmg-primary);border-bottom-color:var(--yxmg-primary);font-weight:500;}
.value-card{background:var(--yxmg-card);border:1px solid var(--yxmg-border);border-radius:var(--yxmg-radius-lg);transition:box-shadow .2s ease,transform .2s ease;}
.value-card:hover{box-shadow:var(--yxmg-shadow-md);transform:translateY(-2px);}
.cta-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--yxmg-primary);color:#fff;padding:12px 28px;border-radius:var(--yxmg-radius-md);font-weight:600;font-size:15px;transition:background .15s ease;cursor:pointer;}
.cta-btn:hover{background:var(--yxmg-primary-600);}
.ghost-btn{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--yxmg-foreground);padding:11px 22px;border-radius:var(--yxmg-radius-md);font-weight:500;font-size:15px;border:1px solid var(--yxmg-border);transition:background .15s ease,border-color .15s ease;cursor:pointer;}
.ghost-btn:hover{background:var(--yxmg-muted);border-color:var(--yxmg-primary-300);}
.dl-row{border-bottom:1px solid var(--yxmg-border);}
.dl-row:last-child{border-bottom:none;}
.foot-link{color:var(--yxmg-neutral-400);font-size:14px;transition:color .15s ease;}
.foot-link:hover{color:#fff;}
.scroll-cue{color:var(--yxmg-primary);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:.25rem;transition:color .15s ease;}
.scroll-cue:hover{color:var(--yxmg-primary-600);}
/* ===== contact.html ===== */
/* ============================================================
悠闲萌官 · Brand Tokens (prefix: yxmg)
Direction: 自然健康质感 — natural leaf-green + warm sand neutrals
============================================================ */
:root {
/* ---- Primary · natural leaf-green scale ---- */
--yxmg-primary-50: #F0F7F1;
--yxmg-primary-100: #DCEBDE;
--yxmg-primary-200: #BAD9BE;
--yxmg-primary-300: #8FBE96;
--yxmg-primary-400: #629E6C;
--yxmg-primary-500: #44814F;
--yxmg-primary-600: #366A40;
--yxmg-primary-700: #2D5435;
--yxmg-primary-800: #26432C;
--yxmg-primary-900: #1F3724;
/* ---- Neutral · warm sand / stone scale ---- */
--yxmg-neutral-0: #FFFFFF;
--yxmg-neutral-50: #FAF8F3;
--yxmg-neutral-100: #F4F0E7;
--yxmg-neutral-200: #E8E1D2;
--yxmg-neutral-300: #D6CBB4;
--yxmg-neutral-400: #B6A98C;
--yxmg-neutral-500: #8C7E64;
--yxmg-neutral-600: #6E6350;
--yxmg-neutral-700: #524839;
--yxmg-neutral-800: #36302A;
--yxmg-neutral-900: #211E1A;
/* ---- State (semantic only) ---- */
--yxmg-success: #44814F;
--yxmg-warning: #C28A2C;
--yxmg-error: #B5462E;
--yxmg-info: #4A7A9E;
/* ---- Semantic aliases (Tailwind bridge) ---- */
--yxmg-background: #FCFBF7;
--yxmg-foreground: #2A2620;
--yxmg-card: #FFFFFF;
--yxmg-card-foreground: #2A2620;
--yxmg-popover: #FFFFFF;
--yxmg-popover-foreground: #2A2620;
--yxmg-primary: #44814F;
--yxmg-primary-foreground: #FFFFFF;
--yxmg-secondary: #EDE7D8;
--yxmg-secondary-foreground: #4A4338;
--yxmg-muted: #F1ECDF;
--yxmg-muted-foreground: #7A705C;
--yxmg-accent: #DCEBDE;
--yxmg-accent-foreground: #2D5435;
--yxmg-destructive: #B5462E;
--yxmg-destructive-foreground:#FFFFFF;
--yxmg-border: #E3DAC6;
--yxmg-input: #E3DAC6;
--yxmg-ring: #44814F;
/* chart palette (earthy, on-brand) */
--yxmg-chart-1: #44814F;
--yxmg-chart-2: #C28A2C;
--yxmg-chart-3: #8FBE96;
--yxmg-chart-4: #6E6350;
--yxmg-chart-5: #B5462E;
/* ---- Radius ---- */
--yxmg-radius-sm: 6px;
--yxmg-radius-md: 10px;
--yxmg-radius-lg: 14px;
--yxmg-radius-xl: 22px;
/* ---- Shadows (border/surface-led, low alpha) ---- */
--yxmg-shadow-xs: 0 1px 2px 0 rgba(33,30,26,.04);
--yxmg-shadow-sm: 0 1px 3px 0 rgba(33,30,26,.05), 0 1px 2px -1px rgba(33,30,26,.04);
--yxmg-shadow-md: 0 6px 16px -4px rgba(33,30,26,.07), 0 2px 6px -2px rgba(33,30,26,.05);
--yxmg-shadow-lg: 0 18px 40px -10px rgba(33,30,26,.12), 0 8px 16px -8px rgba(33,30,26,.07);
/* ---- Typography ----
Sans-only system stack (reliable in canvas srcdoc).
--font-sans overrides Tailwind's font-sans utility. */
--yxmg-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: var(--yxmg-font-sans);
--yxmg-font-display: var(--yxmg-font-sans);
}
/* ---- Base ---- */
@layer base {
html { font-family: var(--yxmg-font-sans); }
body { font-family: var(--yxmg-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--yxmg-primary-200); color: var(--yxmg-primary-900); }
h1,h2,h3,h4 { letter-spacing: -0.01em; }
}
/* ---- Utility helpers (page-scoped, non-layout) ---- */
.yxmg-text-balance { text-wrap: balance; }
.yxmg-text-pretty { text-wrap: pretty; }
/* soft organic section backdrop */
.yxmg-grain {
background-image:
radial-gradient(120% 120% at 0% 0%, rgba(68,129,79,.04) 0%, transparent 55%),
radial-gradient(120% 120% at 100% 100%, rgba(194,138,44,.04) 0%, transparent 55%);
}
@theme inline {
--color-background: var(--yxmg-background);
--color-foreground: var(--yxmg-foreground);
--color-card: var(--yxmg-card);
--color-card-foreground: var(--yxmg-card-foreground);
--color-popover: var(--yxmg-popover);
--color-popover-foreground: var(--yxmg-popover-foreground);
--color-primary: var(--yxmg-primary);
--color-primary-foreground: var(--yxmg-primary-foreground);
--color-secondary: var(--yxmg-secondary);
--color-secondary-foreground: var(--yxmg-secondary-foreground);
--color-muted: var(--yxmg-muted);
--color-muted-foreground: var(--yxmg-muted-foreground);
--color-accent: var(--yxmg-accent);
--color-accent-foreground: var(--yxmg-accent-foreground);
--color-destructive: var(--yxmg-destructive);
--color-destructive-foreground: var(--yxmg-destructive-foreground);
--color-border: var(--yxmg-border);
--color-input: var(--yxmg-input);
--color-ring: var(--yxmg-ring);
--color-chart-1: var(--yxmg-chart-1);
--color-chart-2: var(--yxmg-chart-2);
--color-chart-3: var(--yxmg-chart-3);
--color-chart-4: var(--yxmg-chart-4);
--color-chart-5: var(--yxmg-chart-5);
--radius-sm: var(--yxmg-radius-sm);
--radius-md: var(--yxmg-radius-md);
--radius-lg: var(--yxmg-radius-lg);
--radius-xl: var(--yxmg-radius-xl);
}
@layer base {
body { background: var(--yxmg-background); color: var(--yxmg-foreground); }
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
th { @apply whitespace-nowrap; }
}
.bg-background { background-color: var(--yxmg-background); }
.text-background { color: var(--yxmg-background); }
.border-background { border-color: var(--yxmg-background); }
.ring-background { --tw-ring-color: var(--yxmg-background); }
.bg-foreground { background-color: var(--yxmg-foreground); }
.text-foreground { color: var(--yxmg-foreground); }
.border-foreground { border-color: var(--yxmg-foreground); }
.ring-foreground { --tw-ring-color: var(--yxmg-foreground); }
.bg-card { background-color: var(--yxmg-card); }
.text-card { color: var(--yxmg-card); }
.border-card { border-color: var(--yxmg-card); }
.ring-card { --tw-ring-color: var(--yxmg-card); }
.bg-card-foreground { background-color: var(--yxmg-card-foreground); }
.text-card-foreground { color: var(--yxmg-card-foreground); }
.border-card-foreground { border-color: var(--yxmg-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--yxmg-card-foreground); }
.bg-popover { background-color: var(--yxmg-popover); }
.text-popover { color: var(--yxmg-popover); }
.border-popover { border-color: var(--yxmg-popover); }
.ring-popover { --tw-ring-color: var(--yxmg-popover); }
.bg-popover-foreground { background-color: var(--yxmg-popover-foreground); }
.text-popover-foreground { color: var(--yxmg-popover-foreground); }
.border-popover-foreground { border-color: var(--yxmg-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--yxmg-popover-foreground); }
.bg-primary { background-color: var(--yxmg-primary); }
.text-primary { color: var(--yxmg-primary); }
.border-primary { border-color: var(--yxmg-primary); }
.ring-primary { --tw-ring-color: var(--yxmg-primary); }
.bg-primary-foreground { background-color: var(--yxmg-primary-foreground); }
.text-primary-foreground { color: var(--yxmg-primary-foreground); }
.border-primary-foreground { border-color: var(--yxmg-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--yxmg-primary-foreground); }
.bg-secondary { background-color: var(--yxmg-secondary); }
.text-secondary { color: var(--yxmg-secondary); }
.border-secondary { border-color: var(--yxmg-secondary); }
.ring-secondary { --tw-ring-color: var(--yxmg-secondary); }
.bg-secondary-foreground { background-color: var(--yxmg-secondary-foreground); }
.text-secondary-foreground { color: var(--yxmg-secondary-foreground); }
.border-secondary-foreground { border-color: var(--yxmg-secondary-foreground); }
.ring-secondary-foreground { --tw-ring-color: var(--yxmg-secondary-foreground); }
.bg-muted { background-color: var(--yxmg-muted); }
.text-muted { color: var(--yxmg-muted); }
.border-muted { border-color: var(--yxmg-muted); }
.ring-muted { --tw-ring-color: var(--yxmg-muted); }
.bg-muted-foreground { background-color: var(--yxmg-muted-foreground); }
.text-muted-foreground { color: var(--yxmg-muted-foreground); }
.border-muted-foreground { border-color: var(--yxmg-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--yxmg-muted-foreground); }
.bg-accent { background-color: var(--yxmg-accent); }
.text-accent { color: var(--yxmg-accent); }
.border-accent { border-color: var(--yxmg-accent); }
.ring-accent { --tw-ring-color: var(--yxmg-accent); }
.bg-accent-foreground { background-color: var(--yxmg-accent-foreground); }
.text-accent-foreground { color: var(--yxmg-accent-foreground); }
.border-accent-foreground { border-color: var(--yxmg-accent-foreground); }
.ring-accent-foreground { --tw-ring-color: var(--yxmg-accent-foreground); }
.bg-destructive { background-color: var(--yxmg-destructive); }
.text-destructive { color: var(--yxmg-destructive); }
.border-destructive { border-color: var(--yxmg-destructive); }
.ring-destructive { --tw-ring-color: var(--yxmg-destructive); }
.bg-destructive-foreground { background-color: var(--yxmg-destructive-foreground); }
.text-destructive-foreground { color: var(--yxmg-destructive-foreground); }
.border-destructive-foreground { border-color: var(--yxmg-destructive-foreground); }
.ring-destructive-foreground { --tw-ring-color: var(--yxmg-destructive-foreground); }
.bg-border { background-color: var(--yxmg-border); }
.text-border { color: var(--yxmg-border); }
.border-border { border-color: var(--yxmg-border); }
.ring-border { --tw-ring-color: var(--yxmg-border); }
.bg-input { background-color: var(--yxmg-input); }
.text-input { color: var(--yxmg-input); }
.border-input { border-color: var(--yxmg-input); }
.ring-input { --tw-ring-color: var(--yxmg-input); }
.bg-ring { background-color: var(--yxmg-ring); }
.text-ring { color: var(--yxmg-ring); }
.border-ring { border-color: var(--yxmg-ring); }
.ring-ring { --tw-ring-color: var(--yxmg-ring); }
.bg-chart-1 { background-color: var(--yxmg-chart-1); }
.text-chart-1 { color: var(--yxmg-chart-1); }
.border-chart-1 { border-color: var(--yxmg-chart-1); }
.ring-chart-1 { --tw-ring-color: var(--yxmg-chart-1); }
.bg-chart-2 { background-color: var(--yxmg-chart-2); }
.text-chart-2 { color: var(--yxmg-chart-2); }
.border-chart-2 { border-color: var(--yxmg-chart-2); }
.ring-chart-2 { --tw-ring-color: var(--yxmg-chart-2); }
.bg-chart-3 { background-color: var(--yxmg-chart-3); }
.text-chart-3 { color: var(--yxmg-chart-3); }
.border-chart-3 { border-color: var(--yxmg-chart-3); }
.ring-chart-3 { --tw-ring-color: var(--yxmg-chart-3); }
.bg-chart-4 { background-color: var(--yxmg-chart-4); }
.text-chart-4 { color: var(--yxmg-chart-4); }
.border-chart-4 { border-color: var(--yxmg-chart-4); }
.ring-chart-4 { --tw-ring-color: var(--yxmg-chart-4); }
.bg-chart-5 { background-color: var(--yxmg-chart-5); }
.text-chart-5 { color: var(--yxmg-chart-5); }
.border-chart-5 { border-color: var(--yxmg-chart-5); }
.ring-chart-5 { --tw-ring-color: var(--yxmg-chart-5); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}