/* ============================================================ 设计令牌 —— 所有餐厅网站唯一的视觉源头 批量生成规则：只允许切换 ， 禁止修改本文件的任何数值。改风格 = 换家族，不改令牌。 家族：bistro / trattoria / cocktail / coastal / pub ============================================================ */ :root { /* ---- 间距阶梯（8pt 体系） ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; /* ---- 字阶（流体排版） ---- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); --text-3xl: clamp(2.5rem, 1.8rem + 3vw, 4rem); --text-hero: clamp(3rem, 2rem + 6vw, 6.5rem); /* ---- 布局 ---- */ --container: 72rem; --container-narrow: 46rem; /* ---- 动效 ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration: 0.7s; /* ---- 家族专属变量的默认回退 ---- 必须在各家族块之前声明：:root 与 [data-family] 优先级相同， 放后面会反过来覆盖家族块里的定义。 */ --brass: var(--accent, #a8823c); /* 只有 pub 重新定义 */ --wine: var(--accent, #6e2b26); /* 只有 trattoria 重新定义 */ } /* ============================================================ 家族一：bistro —— Editorial Bistro 法式杂志感 奶油纸 × 墨黑 × 酒红 ｜ 大编号、细线、栏线 ============================================================ */ [data-family="bistro"] { --bg: #f3f2ee; --surface: #fcfcfa; --surface-alt: #e8e6de; --ink: #1d1a16; --ink-soft: #4f463c; --muted: #96897a; --accent: #7a2e2e; --accent-ink: #fdf6ec; --line: rgba(29, 26, 22, 0.18); --hero-overlay: linear-gradient(180deg, rgba(29,26,22,0.2), rgba(29,26,22,0.6)); --font-display: "Playfair Display", "Noto Serif SC", serif; --font-body: "Inter", "Noto Sans SC", -apple-system, sans-serif; --radius-sm: 2px; --radius-md: 6px; --space-2xl: 5rem; /* 杂志紧凑节奏 */ color-scheme: light; } /* ============================================================ 家族二：trattoria —— Rustic Trattoria 托斯卡纳暖厨 陶土 × 橄榄绿 × 奶油 ｜ 圆角相框、纸张颗粒、手绘感 ============================================================ */ [data-family="trattoria"] { --bg: #f6efe3; --surface: #fbf7ee; --surface-alt: #ece1cd; --ink: #33301f; --ink-soft: #5c553d; --muted: #9a8f74; --accent: #b5542c; --accent-ink: #fff8ec; --line: rgba(51, 48, 31, 0.16); --hero-overlay: linear-gradient(180deg, rgba(51,48,31,0.2), rgba(51,48,31,0.55)); --font-display: "Fraunces", "Noto Serif SC", serif; --font-body: "Source Sans 3", "Noto Sans SC", -apple-system, sans-serif; --radius-sm: 8px; --radius-md: 18px; --wine: #6e2b26; color-scheme: light; } /* ============================================================ 家族三：cocktail —— Dark Cocktail Bar 午夜烟熏 炭黑 × 琥珀金 ｜ 微发光、细金线、暗角 ============================================================ */ [data-family="cocktail"] { --bg: #100f0e; --surface: #181614; --surface-alt: #211e1a; --ink: #ece4d4; --ink-soft: #c0b49e; --muted: #837a68; --accent: #c9a15a; --accent-ink: #171310; --line: rgba(236, 228, 212, 0.15); --hero-overlay: linear-gradient(180deg, rgba(16,15,14,0.3), rgba(16,15,14,0.75)); --font-display: "Cormorant Garamond", "Noto Serif SC", serif; --font-body: "Inter", "Noto Sans SC", -apple-system, sans-serif; --radius-sm: 3px; --radius-md: 10px; color-scheme: dark; } /* ============================================================ 家族四：coastal —— Coastal Mediterranean 爱琴海正午 白 × 海蓝 × 沙色 ｜ 直角照片窗、mono 小标签、大留白 ============================================================ */ [data-family="coastal"] { --bg: #f6f8f7; --surface: #fcfdfd; --surface-alt: #e8edeb; --ink: #1f3237; --ink-soft: #45606a; --muted: #93a3a6; --accent: #2e5f8a; --accent-ink: #f4f9fc; --line: rgba(31, 50, 55, 0.12); --hero-overlay: linear-gradient(180deg, rgba(31,50,55,0.1), rgba(31,50,55,0.45)); --font-display: "Libre Caslon Text", "Noto Serif SC", serif; --font-body: "Inter", "Noto Sans SC", -apple-system, sans-serif; --font-mono: "Space Mono", "Noto Sans SC", monospace; --radius-sm: 4px; --radius-md: 14px; color-scheme: light; } /* ============================================================ 家族五：pub —— Heritage Pub 百年酒馆 深绿 × 黄铜 × 羊皮纸 ｜ 徽章、双线框、衬线首字 ============================================================ */ [data-family="pub"] { --bg: #f2ecdd; --surface: #f9f5ea; --surface-alt: #e4dcc6; --ink: #22291f; --ink-soft: #49523f; --muted: #8d8a70; --accent: #1f3327; --accent-ink: #f2ecdd; --brass: #a8823c; --line: rgba(34, 41, 31, 0.2); --hero-overlay: linear-gradient(180deg, rgba(31,51,39,0.3), rgba(31,51,39,0.65)); --font-display: "IM Fell English", "Noto Serif SC", serif; --font-body: "Source Serif 4", "Noto Serif SC", Georgia, serif; --radius-sm: 2px; --radius-md: 4px; color-scheme: light; }