/* ===================================================================== CCNP 題庫筆記 · 設計系統 (Persimmon × Leaf) 柿子橘 × 葉綠 · 親切又專業 --------------------------------------------------------------------- 多網域：整套橘/綠色階由 --brand-primary / --brand-accent 兩個品牌色 以 color-mix() 推導。每個網域只要在 template 覆寫這兩個變數 （取自 SiteSetting.brand_primary_color / brand_accent_color）即可換整站色系。 ===================================================================== */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap'); /* ---------- Design Tokens ---------- */ :root { /* 品牌雙色（會被 template inline 依網域覆寫）。預設＝柿子橘 × 葉綠 */ --brand-primary: #EF792F; --brand-accent: #6BA02A; /* Brand · Persimmon (primary) — 由 --brand-primary 推導 */ /* 每色階兩行式：第1行＝設計稿原始手調 hex（舊/in-app 瀏覽器兜底）， 第2行＝color-mix 動態推導（支援的瀏覽器覆寫，並隨網域品牌色變化）。 兜底 hex 取自 design_handoff_landing/css/system.css，調色盤更新時須同步。 */ --persimmon-500: #EF792F; --persimmon-500: var(--brand-primary); --persimmon-600: #DD6417; --persimmon-600: color-mix(in oklab, var(--brand-primary) 86%, black); --persimmon-700: #B84F12; --persimmon-700: color-mix(in oklab, var(--brand-primary) 72%, black); --persimmon-800: #8E3D11; --persimmon-800: color-mix(in oklab, var(--brand-primary) 55%, black); --persimmon-900: #6A2F0F; --persimmon-900: color-mix(in oklab, var(--brand-primary) 42%, black); --persimmon-400: #F28C4C; --persimmon-400: color-mix(in oklab, var(--brand-primary) 85%, white); --persimmon-300: #F6A572; --persimmon-300: color-mix(in oklab, var(--brand-primary) 62%, white); --persimmon-200: #FAC6A3; --persimmon-200: color-mix(in oklab, var(--brand-primary) 40%, white); --persimmon-100: #FDE3D1; --persimmon-100: color-mix(in oklab, var(--brand-primary) 22%, white); --persimmon-50: #FEF4EC; --persimmon-50: color-mix(in oklab, var(--brand-primary) 10%, white); /* Leaf (secondary / success) — 由 --brand-accent 推導 */ --leaf-500: #6BA02A; --leaf-500: var(--brand-accent); --leaf-600: #54801F; --leaf-600: color-mix(in oklab, var(--brand-accent) 84%, black); --leaf-700: #416419; --leaf-700: color-mix(in oklab, var(--brand-accent) 66%, black); --leaf-400: #84B936; --leaf-400: color-mix(in oklab, var(--brand-accent) 84%, white); --leaf-300: #A6D258; --leaf-300: color-mix(in oklab, var(--brand-accent) 60%, white); --leaf-200: #C4E289; --leaf-200: color-mix(in oklab, var(--brand-accent) 38%, white); --leaf-100: #DEEFBF; --leaf-100: color-mix(in oklab, var(--brand-accent) 20%, white); --leaf-50: #F2F8E7; --leaf-50: color-mix(in oklab, var(--brand-accent) 10%, white); /* Cheek (soft tertiary highlight) */ --cheek: #F4CBC2; --cheek-soft: #FBEAE5; /* Warm neutrals */ --ink-900: #241E1B; --ink-700: #4A403B; --ink-500: #7A6F67; --ink-400: #9C9189; --ink-300: #C3B9B0; --bg: #FBF8F4; /* warm off-white page */ --bg-sunk: #F4EEE6; --surface: #FFFFFF; --line: #ECE4DA; --line-soft: #F4EFE8; /* Typography */ --font-zh: "Noto Sans TC", system-ui, sans-serif; --font-display: "Space Grotesk", "Noto Sans TC", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Shadows (warm-tinted) */ --shadow-sm: 0 1px 2px rgba(74, 46, 20, .06), 0 2px 6px rgba(74, 46, 20, .05); --shadow-md: 0 4px 10px rgba(74, 46, 20, .07), 0 14px 30px rgba(74, 46, 20, .07); --shadow-lg: 0 10px 24px rgba(74, 46, 20, .10), 0 30px 60px rgba(74, 46, 20, .10); --shadow-pop: 4px 4px 0 var(--ink-900); /* sticker-style hard shadow */ --maxw: 1120px; } /* ---------- Reset / Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-zh); background: var(--bg); color: var(--ink-900); line-height: 1.65; letter-spacing: .01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 900; letter-spacing: .005em; } p { margin: 0; text-wrap: pretty; } /* ---------- Type scale ---------- */ .display { font-size: clamp(2.6rem, 5.5vw, 4.1rem); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; } .h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); } .h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .h3 { font-size: 1.25rem; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-700); font-weight: 400; } .eyebrow { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--persimmon-600); } .mono { font-family: var(--font-mono); } .num { font-family: var(--font-display); font-feature-settings: "tnum" 1; } .muted { color: var(--ink-500); } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 88px 0; } .section-sm { padding: 56px 0; } .center { text-align: center; } .grid { display: grid; gap: 24px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-zh); font-weight: 700; font-size: 1rem; padding: 13px 24px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; white-space: nowrap; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--persimmon-500); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--persimmon-600); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-leaf { background: var(--leaf-500); color: #fff; } .btn-leaf:hover { background: var(--leaf-600); transform: translateY(-1px); } .btn-outline { background: var(--surface); color: var(--ink-900); border-color: var(--ink-900); } .btn-outline:hover { background: var(--ink-900); color: #fff; } .btn-ghost { background: transparent; color: var(--ink-700); } .btn-ghost:hover { background: var(--persimmon-50); color: var(--persimmon-700); } .btn-google { background: #fff; color: var(--ink-900); border-color: var(--line); box-shadow: var(--shadow-sm); font-weight: 700; } .btn-google:hover { border-color: var(--ink-300); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-lg { padding: 16px 30px; font-size: 1.08rem; } .btn-sm { padding: 9px 16px; font-size: .9rem; } /* ---------- Badges / Chips ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700; font-size: .76rem; letter-spacing: .04em; padding: 5px 11px; border-radius: var(--r-pill); } .badge-persimmon { background: var(--persimmon-100); color: var(--persimmon-700); } .badge-leaf { background: var(--leaf-100); color: var(--leaf-700); } .badge-ink { background: var(--ink-900); color: #fff; } .badge-soft { background: var(--bg-sunk); color: var(--ink-700); } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px; } .card-pad-lg { padding: 36px; } .card-hover { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--persimmon-200); } /* sticker treatment — echoes the mascot's bold outline */ .sticker { border: 2px solid var(--ink-900); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); background: var(--surface); } /* ---------- Stat tile ---------- */ .stat { display: flex; flex-direction: column; gap: 4px; } .stat .val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--persimmon-600); line-height: 1; } .stat .lbl { font-size: .92rem; color: var(--ink-500); } /* ---------- Table ---------- */ .qtable { width: 100%; border-collapse: collapse; font-size: .98rem; } .qtable thead th { text-align: left; font-weight: 700; font-size: .82rem; letter-spacing: .03em; color: var(--persimmon-700); background: var(--persimmon-50); padding: 12px 16px; border-bottom: 1px solid var(--persimmon-100); } .qtable thead th:first-child { border-top-left-radius: var(--r-sm); } .qtable thead th:last-child { border-top-right-radius: var(--r-sm); text-align: right; } .qtable tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); } .qtable tbody td:last-child { text-align: right; font-family: var(--font-display); font-weight: 600; } .qtable tbody td:nth-child(2) { font-family: var(--font-display); color: var(--ink-700); text-align: right; } .qtable tbody tr:last-child td { border-bottom: none; font-weight: 700; } .qtable tbody tr.total { background: var(--leaf-50); } .qtable tbody tr.total td { color: var(--leaf-700); } /* ---------- Swatch (style guide) ---------- */ .swatch { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); } .swatch .chip { height: 84px; } .swatch .meta { padding: 10px 12px; font-size: .8rem; } .swatch .meta .name { font-weight: 700; } .swatch .meta .hex { font-family: var(--font-mono); color: var(--ink-500); font-size: .76rem; } /* ---------- Logo lockup ---------- */ .logo { display: inline-flex; align-items: center; gap: 10px; } .logo img { width: 38px; height: 38px; } .logo .name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; white-space: nowrap; } .logo .name b { color: var(--persimmon-600); } /* ---------- Divider tick (leaf check) ---------- */ .tick { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf-100); color: var(--leaf-700); align-items: center; justify-content: center; flex: none; } /* ---------- Utility ---------- */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .wrapflex { flex-wrap: wrap; } .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-40{margin-top:40px;}