/* ============================================================ RLIGATO — Design Tokens 官方品牌識別規範（設計師版，RLIGATO_Guideline_20260907.pdf） 主色橘 #ef5933 ＋ 黑白灰，全面無襯線字體。 token 名稱沿用舊系統（paper/ink/rule…），但色相已依規範重新校準。 ============================================================ */ /* ---------- Fonts ---------- 中文主字體 Noto Sans TC；英文標題 Zalando Sans SemiExpanded、 英文內文/說明 Roboto Flex——三者皆規範明訂，且都在 Google Fonts。 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+SemiExpanded:wght@300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300;400;500;600;700&display=swap'); :root { /* ============================================================ COLOR — 品牌規範四色（RLIGATO 設計師定稿，唯一正式色） 橘 Pantone 1655C｜CMYK 5,78,80,0｜RGB 239,89,51｜#EF5933 黑 Pantone Black 6C｜CMYK 10,10,10,100｜RGB 0,0,0｜#000000 灰 Pantone 538C｜CMYK 33,21,17,0｜RGB 184,193,202｜#B8C1CA 白 CMYK 0,0,0,0｜RGB 255,255,255｜#FFFFFF 頁面上的大面積色塊、按鈕填色一律只用這四色。 ============================================================ */ --rl-orange: #EF5933; --rl-black: #000000; --rl-gray: #B8C1CA; --rl-white: #FFFFFF; /* ============================================================ COLOR — Paper (backgrounds) 規範只定義純白，卡片/分隔用色是從規範的次要冷灰 #b8c1ca 推導出的淺色調，不是憑空發明的色相。 ============================================================ */ --paper: #FFFFFF; /* primary background — 規範純白 */ --paper-2: #F7F8F9; /* card / panel surface */ --paper-3: #EFF1F3; /* divider blocks, hover wells */ --paper-inv: #000000; /* inverted background — 規範純黑 */ /* ---------- Color — Ink (text + lines) ---------- */ --ink: #000000; /* primary text, wordmark — 規範純黑 */ --ink-2: #404447; /* secondary text */ --ink-3: #787D83; /* tertiary / meta / placeholder */ --ink-4: #9CA4AC; /* disabled, very subtle text */ --ink-inv: #FFFFFF; /* text on dark surfaces */ /* ---------- Color — Hairlines & strokes ---------- */ --rule: #E6E9EC; /* default 1px divider */ --rule-2: #D8DDE2; /* heavier emphasis rule */ --rule-inv: #2E3033; /* divider on dark */ /* ---------- Color — Semantic (muted, editorial) ---------- 規範沒有定義語意狀態色（成功/警告/錯誤），這組維持原樣—— 只用在後台的狀態標籤／切換開關，是內部工具功能色，不是品牌色。 */ --sage: #5A6F5C; /* success / 已分析 / in-stock */ --sage-soft: #E4EAE0; --ochre: #A8804A; /* warning / 即將開團 / low-stock */ --ochre-soft: #F0E6D4; --clay: #8C3A2E; /* error / 已售完 / 警示 */ --clay-soft: #F0DAD3; --ink-tag: #000000; /* informational chip — just ink */ /* ---------- Color — Brand (規範四色之一，主色，用量克制) ---------- */ --brand-primary: var(--rl-orange); /* 規範主色橘 */ --brand-primary-hover: #CB4C2B; --brand-secondary: var(--rl-gray); /* 規範灰 Pantone 538C */ /* ---------- Color — Accents (use sparingly) ---------- */ --accent: var(--brand-primary); --accent-hover: var(--brand-primary-hover); --focus: var(--brand-primary); /* keyboard focus ring */ /* ============================================================ TYPOGRAPHY — Families ============================================================ */ --font-display: "Zalando Sans SemiExpanded", "Noto Sans TC", "PingFang TC", sans-serif; --font-body: "Roboto Flex", "Noto Sans TC", "PingFang TC", -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --font-cn-sans: "Noto Sans TC", "PingFang TC", sans-serif; /* ---------- Tracking (very intentional in this system) ---------- */ --track-tight: -0.01em; --track-normal: 0em; --track-wide: 0.04em; --track-wider: 0.12em; --track-eyebrow: 0.02em; /* 資訊／小標：規範字距 20 */ /* ---------- Weights ---------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Type scale (modular, 1.25 ratio, generous) ---------- */ --fs-eyebrow: 11px; /* tracked uppercase tags */ --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-body-lg: 17px; --fs-h6: 18px; --fs-h5: 22px; --fs-h4: 28px; --fs-h3: 36px; --fs-h2: 48px; --fs-h1: 64px; --fs-display: 88px; --fs-hero: 128px; /* ---------- Line heights ---------- */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.7; /* @kind font */ --lh-loose: 1.9; /* @kind font */ /* ============================================================ SPACING — 4pt base, generous editorial whitespace ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* section breaks on hero pages */ /* ============================================================ RADII — Almost no rounding. The brand is square + hairline. ============================================================ */ --r-none: 0; /* @kind radius */ --r-xs: 1px; --r-sm: 2px; --r-md: 4px; --r-pill: 999px; /* used only for tiny status dots */ /* ============================================================ SHADOWS — Avoided where possible. We use hairlines. ============================================================ */ --shadow-none: none; --shadow-hair: 0 0 0 1px var(--rule); --shadow-soft: 0 1px 2px rgba(14,14,12,0.04), 0 0 0 1px rgba(14,14,12,0.05); --shadow-lift: 0 12px 32px -8px rgba(14,14,12,0.10), 0 0 0 1px rgba(14,14,12,0.05); --shadow-modal: 0 32px 80px -16px rgba(14,14,12,0.25), 0 0 0 1px rgba(14,14,12,0.08); /* ============================================================ MOTION — Slow, considered. No bounce. ============================================================ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 260ms; /* @kind other */ --dur-slow: 480ms; /* @kind other */ --dur-very-slow: 800ms; /* @kind other */ /* ---------- Container widths ---------- */ --container-narrow: 720px; /* @kind spacing */ --container: 1100px; /* @kind spacing */ --container-wide: 1440px; /* @kind spacing */ } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 字距與字體規範：英文一律走 Zalando Sans SemiExpanded（標題）／Roboto Flex（內文）， 中文字元自動落回 Noto Sans TC；中文正文字距 -3（≈-0.003em），標題 -20（-0.02em）。 */ [style*="font-cn-sans"] { font-family: var(--font-body) !important; letter-spacing: -0.003em; } [style*="font-cn-sans"][style*="font-weight:700"], [style*="font-cn-sans"][style*="font-weight: 700"], [style*="font-cn-sans"][style*="font-weight:500"], [style*="font-cn-sans"][style*="font-weight: 500"] { font-family: var(--font-display) !important; letter-spacing: -0.02em; } /* --- Display & headings --- 規範明訂「標題／小標題＝Bold」，所以 display/h1-h3 都用粗體， 跟 h4-h6（規範裡的「副標題」，Medium）分層。 */ .display, .h-display { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); } .hero { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-hero); line-height: 0.95; letter-spacing: -0.02em; } h1, .h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); margin: 0; } h2, .h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--track-tight); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; } h4, .h4 { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--track-tight); margin: 0; } h5, .h5 { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--fs-h5); line-height: var(--lh-snug); margin: 0; } h6, .h6 { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--fs-h6); line-height: var(--lh-normal); margin: 0; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink-2); margin: 0; } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); } /* --- The signature spaced-caps "eyebrow" --- */ .eyebrow, .label { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-2); } .meta, .caption { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--ink-3); line-height: var(--lh-normal); } small, .small { font-size: var(--fs-small); color: var(--ink-3); } /* --- Editorial italic (used for taglines, callouts) --- */ .italic-display { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); } /* --- Links: underlined-on-hover hairline style --- */ a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color var(--dur-base) var(--ease-out); } a:hover { border-bottom-color: var(--ink); } hr { border: none; border-top: 1px solid var(--rule); margin: var(--space-6) 0; } ::selection { background: var(--ink); color: var(--paper); }