/* ============================================================ MASTER COURSES — Design System Foundations colors_and_type.css Brand: Master Courses (Dr. Võ Phi Hiếu) — dental workshops Tone: light / warm. Lead colors: Yellow, White, Orange. ------------------------------------------------------------ FONT NOTE: The logo wordmarks use a custom/commercial geometric sans + a signature script. We substitute the closest free faces: • Be Vietnam Pro → bold geometric sans w/ full Vietnamese support • Great Vibes → signature script for the "Master" flourish Replace with the real licensed fonts when available. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Great+Vibes&display=swap'); :root { /* ---------- BRAND CORE ---------- */ --mc-yellow: #FFD400; /* primary — bright amber */ --mc-yellow-deep: #F2B600; /* hover / pressed yellow */ --mc-yellow-soft: #FFEAA0; /* tints, highlight fills */ --mc-yellow-wash: #FFF8DE; /* faint background wash */ --mc-orange: #F88A57; /* secondary warm accent (lighter)*/ --mc-orange-deep: #E86A33; /* deep orange */ --mc-orange-soft: #FCE0CF; /* tint */ --mc-magenta: #B83D72; /* gradient mid */ --mc-purple: #6C1FA1; /* gradient end */ /* ---------- INK / NEUTRALS (warm) ---------- */ --mc-ink: #1A1A1A; /* primary text, logo black */ --mc-ink-2: #43403B; /* secondary text */ --mc-ink-3: #7A746B; /* muted text / captions */ --mc-ink-4: #A8A296; /* disabled / hint */ --mc-white: #FFFFFF; --mc-cream: #FBF8F3; /* warm page background */ --mc-cream-2: #F4EEE3; /* warm card / alt section */ --mc-cream-3: #ECE4D6; /* deeper warm fill */ --mc-line: #E7DFD1; /* hairline borders */ --mc-line-strong: #D6CCB8; /* stronger borders */ /* ---------- SEMANTIC ---------- */ --mc-success: #2E8B57; --mc-success-bg: #E5F2EA; --mc-danger: #D2392B; --mc-danger-bg: #FBE7E4; --mc-info: #2A6FB0; --mc-info-bg: #E5EFF8; /* ---------- SIGNATURE GRADIENT (course title cards) ---------- */ --mc-gradient: linear-gradient(115deg, #E8551F 0%, #C73F03 18%, #B83D72 56%, #6C1FA1 100%); --mc-gradient-soft: linear-gradient(115deg, #F6A06B 0%, #C76EA0 60%, #9C6FD0 100%); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Be Vietnam Pro', system-ui, sans-serif; --font-body: 'Be Vietnam Pro', system-ui, sans-serif; --font-script: 'Great Vibes', cursive; --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* ---------- TYPE SCALE ---------- */ --fs-display: 64px; --lh-display: 1.02; --ls-display: -0.02em; --fs-h1: 44px; --lh-h1: 1.08; --ls-h1: -0.015em; --fs-h2: 32px; --lh-h2: 1.15; --ls-h2: -0.01em; --fs-h3: 24px; --lh-h3: 1.25; --fs-h4: 19px; --lh-h4: 1.3; --fs-body-lg: 18px; --lh-body-lg: 1.6; --fs-body: 16px; --lh-body: 1.65; --fs-sm: 14px; --lh-sm: 1.5; --fs-xs: 12px; --lh-xs: 1.45; --fs-eyebrow: 13px; /* ---------- RADII ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* the brand's signature pill shape */ /* ---------- SHADOWS (warm, soft) ---------- */ --sh-xs: 0 1px 2px rgba(60,40,10,0.06); --sh-sm: 0 2px 8px rgba(60,40,10,0.08); --sh-md: 0 8px 24px rgba(60,40,10,0.10); --sh-lg: 0 18px 48px rgba(60,40,10,0.14); --sh-yellow: 0 10px 28px rgba(255,212,0,0.42); /* ---------- SPACING (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--mc-ink); background: var(--mc-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .mc-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--mc-ink); margin: 0; } h2, .mc-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--mc-ink); margin: 0; } h3, .mc-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--mc-ink); margin: 0; } h4, .mc-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--mc-ink); margin: 0; } p, .mc-body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; } small, .mc-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } /* Display — big hero wordmark style (uppercase, tight) */ .mc-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--mc-ink); } /* The "Master" signature flourish */ .mc-script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 0.9; } /* Eyebrow / kicker label */ .mc-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-orange); } /* The signature name-pill used across the brand */ .mc-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--mc-yellow); color: var(--mc-ink); border: 2px solid var(--mc-ink); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); padding: 6px 16px; line-height: 1; }