/* ============================================================ NOBIRDY — design tokens (self-contained for the live site) Sourced from the NOBIRDY Design System (colors/typography/ spacing/base). Fonts are loaded via in each page's (NOT @import here) — same convention as skaiwalk. 乾淨 = 黑白為主。墨黑 on 白紙；海軍藍與奶白只當點綴。 ============================================================ */ :root { /* --- Ink 墨黑(主) --- */ --navy-900: #000000; --navy-700: #181820; --navy-400: #86858c; /* --- Paper 白紙(主) --- */ --cream-50: #ffffff; --cream-100: #ffffff; --cream-300: #e7e4dc; /* --- Grey 中性灰 --- */ --taupe-300: #cfcdd2; --taupe-400: #b6b5ba; --taupe-600: #86858c; /* --- 點綴色 Accents --- */ --cream: #f1edd6; --cream-2: #f7f5f0; --navy: #20355F; --navy-hi: #2c4577; --white: #ffffff; --black: #0e0e12; /* ---------- Semantic aliases ---------- */ --surface-page: var(--white); --surface-raised: var(--white); --surface-card: var(--white); --surface-sunken: var(--cream-2); --surface-inverse: var(--navy); --surface-inverse-2: var(--navy-900); --surface-accent-warm: var(--cream); --surface-accent-navy: var(--navy); --text-strong: var(--navy-700); --text-body: var(--navy-700); --text-muted: var(--navy-400); --text-faint: var(--taupe-600); --text-on-navy: var(--white); --text-on-navy-muted: var(--taupe-300); --border-soft: var(--cream-300); --border-strong: var(--navy-700); --border-taupe: var(--taupe-400); --accent: var(--navy); --accent-hover: var(--navy-hi); --focus-ring: var(--navy); --price-strike: var(--taupe-600); --sale-ink: var(--navy-700); --glass-surface: rgba(255,255,255,0.62); --glass-strong: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.7); /* ---------- Type ---------- Latin: Hanken Grotesk / Newsreader (small webfonts). Chinese: the platform system font (PingFang TC on Apple, Microsoft JhengHei on Windows) — no CJK webfont, so Chinese renders instantly with zero download. */ --font-display: "Hanken Grotesk", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif; --font-serif: "Newsreader", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --text-5xl: 5.5rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; --ls-label: 0.14em; /* ---------- Spacing / radius / shadow / motion ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(28, 31, 61, 0.06); --shadow-sm: 0 2px 6px rgba(28, 31, 61, 0.08); --shadow-md: 0 6px 18px rgba(28, 31, 61, 0.10); --shadow-lg: 0 14px 40px rgba(28, 31, 61, 0.14); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; --container-max: 1280px; --container-narrow: 880px; } /* ---------- base element styles ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--fw-regular); line-height: var(--lh-snug); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; height: auto; display: block; } .nb-eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); } ::selection { background: var(--navy); color: var(--cream-100); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }