/* =====================================================================
CGCH Design System · v1.1 · tokens.css
---------------------------------------------------------------------
Core design tokens + global rules for CGCH (中辉绿建)
Google Ads landing pages. Drop this into any page via or
@import, then build on top with component CSS.
Companion files:
- DESIGN_SYSTEM.md · authoritative rules & usage
- snippets/*.html · component HTML snippets
- design-system-v1_1.html · visual reference / living style guide
What's in this file:
1. :root tokens · colors, typography, spacing, motion
2. Global reset & base · box-sizing, body defaults
3. Font loading stub · via Google Fonts (Archivo + Inter + JetBrains Mono + Noto Sans SC)
4. Emphasis system · .em-black / .em-color + auto-switch on .dark
5. Icon system · .icon wrapper + 7-step size ramp
6. Layout helpers · .wrap, .part, .dark container
7. Type helpers · headings, body, mono labels
What's NOT in this file (build these per-project):
- Buttons, forms, cards, FAQ, product, case, nav, trust-logo
→ see snippets/ for drop-in HTML with inline CSS.
Licensed for CGCH project + MML Digital internal use.
===================================================================== */
/* =====================================================================
1. :ROOT TOKENS
===================================================================== */
:root {
/* === COLORS · Brand (from VIS) === */
--cgch-blue: #1C447C; /* VIS standard primary blue */
--cgch-blue-light: #2E5A9E; /* hover, accent on dark */
--cgch-blue-deep: #0E2B52; /* §05 Solution background */
--cgch-yellow: #E2A624; /* VIS standard accent yellow */
--cgch-yellow-deep: #B08518; /* text on yellow bg, hover */
/* === COLORS · Neutral scale (paper → ink) === */
--white: #FFFFFF;
--paper: #FAFAFA; /* default page ground */
--paper-2: #F2F3F5; /* secondary ground */
--paper-3: #E9EBEE; /* tertiary / card bg on paper */
--line-soft: #E4E7EB; /* soft divider within components */
--line: #C9CFD7; /* default divider between components */
--line-strong: #8A93A1; /* emphasized divider */
--ink-mute: #8A93A1; /* tertiary text, labels */
--ink-soft: #5B6470; /* secondary text */
--ink-2: #2C3238; /* heavy body, nav links */
--ink: #0F1419; /* primary text · §02 §09 dark bg */
/* === COLORS · Dark-mode surfaces === */
--dark-ground: #0F1419; /* primary dark bg (= --ink) */
--dark-ground-2: #1A2028; /* secondary dark surface */
--dark-ground-3: #252D37; /* tertiary dark surface */
--dark-line: #2A3138; /* divider on dark */
--dark-line-strong: #3D4650; /* emphasized divider on dark */
--dark-ink-mute: #6B7280; /* tertiary text on dark */
--dark-ink-soft: #9BA3AD; /* secondary text on dark */
--dark-ink: #E8EDF2; /* primary text on dark */
/* === COLORS · Semantic === */
--success: #16803B;
--success-bg: #E6F4EA;
--warning: #B08518;
--warning-bg: #FFF7E6;
--danger: #A5321C;
--danger-bg: #FCEBE7;
/* === TYPOGRAPHY · Font families === */
--font-display: 'Archivo', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
--font-zh: 'Noto Sans SC', sans-serif;
--font-serif: Georgia, serif; /* DEPRECATED v1.1 — footer slogan only */
/* === TYPOGRAPHY · Type scale === */
--fs-display-xl: clamp(52px, 7vw, 88px); /* H1 hero */
--fs-display-lg: clamp(40px, 5.5vw, 64px); /* H2 section */
--fs-display-md: clamp(32px, 4vw, 48px); /* H2 alt / small hero */
--fs-h3: 28px; /* card title / product name */
--fs-h4: 20px; /* sub-title */
--fs-body-lg: 18px; /* hero sub, intro para */
--fs-body: 15px; /* default body */
--fs-body-sm: 13px; /* card desc, caption */
--fs-label: 11px; /* mono tag */
--fs-label-sm: 10px; /* tiny mono label */
/* === TYPOGRAPHY · Line heights === */
--lh-tight: 1; /* display numbers, stat-value */
--lh-display: 1.02; /* H1, H2 */
--lh-heading: 1.2; /* H3, H4 */
--lh-body: 1.65; /* paragraphs */
--lh-ui: 1.4; /* UI elements */
/* === TYPOGRAPHY · Letter spacing === */
--ls-display: -0.025em; /* display (tight) */
--ls-heading: -0.01em; /* H3, H4 */
--ls-body: 0; /* body */
--ls-mono: 0.15em; /* default mono label (CAPS) */
--ls-mono-wide: 0.2em; /* extra-emphasized mono */
/* === SPACING · 8pt grid === */
--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: 120px;
/* === LAYOUT === */
--container-max: 1280px;
--container-padding: 40px;
--section-padding-y: 120px;
--section-padding-y-sm: 80px;
/* === BORDERS === */
--radius-none: 0;
--radius-xs: 2px; /* default for most UI */
--radius-sm: 4px; /* cards, inputs */
--radius-md: 6px; /* modals (rare) */
--border-width: 1px;
--border-width-strong: 2px;
/* === ANIMATION === */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 0.15s;
--duration: 0.2s;
--duration-slow: 0.35s;
}
/* =====================================================================
2. GLOBAL RESET & BASE
===================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
line-height: var(--lh-body);
font-size: var(--fs-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* =====================================================================
3. FONT LOADING
---------------------------------------------------------------------
Add this to the of every page that imports tokens.css:
===================================================================== */
/* =====================================================================
4. EMPHASIS SYSTEM (v1.1)
---------------------------------------------------------------------
Two span classes replace old italic treatment.
.em-black — Hero H1, stat-value, proof-value, product-price
→ Archivo 900 + brand blue (or yellow on dark)
.em-color — H2, H3, case-title, faq-q-text, trust-logo-item
→ same weight, color only
Wrap container in class="dark" to auto-switch to yellow on dark bg.
===================================================================== */
.em-black {
font-family: var(--font-display);
font-weight: 900;
color: var(--cgch-blue);
font-style: normal;
}
.em-color {
color: var(--cgch-blue);
font-style: normal;
}
/* Dark container — both variants switch to yellow */
.dark .em-black,
.dark .em-color {
color: var(--cgch-yellow);
}
/* Legacy fallback — keeps v1.0 markup visually correct while
the codebase migrates. New code MUST use the span classes above. */
h1 em, h2 em, h3 em,
.type-display-xl em, .type-display-lg em, .type-display-md em,
.type-h3 em,
.stat-value em, .proof-value em,
.case-title em, .faq-q-text em, .trust-logo-item em {
color: var(--cgch-blue);
font-style: normal;
font-weight: inherit;
}
.dark h1 em, .dark h2 em, .dark h3 em,
.dark .type-display-xl em, .dark .type-display-lg em,
.dark .stat-value em, .dark .case-title em, .dark .trust-logo-item em {
color: var(--cgch-yellow);
}
/* =====================================================================
5. ICON SYSTEM (v1.1)
---------------------------------------------------------------------
Wrap every SVG in . The SVG itself
has NO width/height/stroke/fill attrs — everything inherits from
the wrapper.
Example:
===================================================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: -0.125em;
color: currentColor;
flex-shrink: 0;
}
.icon svg {
display: block;
width: 100%;
height: 100%;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Size ramp — use only these. Never free-size. */
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }
.icon-40 { width: 40px; height: 40px; }
/* =====================================================================
6. LAYOUT HELPERS
===================================================================== */
/* Main content width — wrap every LP section's inner content in .wrap */
.wrap {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* Section shell — vertical rhythm for LP modules */
.section {
padding: var(--section-padding-y) 0;
}
.section-sm {
padding: var(--section-padding-y-sm) 0;
}
/* Dark container — applies dark background + text color + triggers
em-color/em-black/form to switch to yellow variant. */
.dark {
background: var(--dark-ground);
color: var(--dark-ink);
}
.dark .muted {
color: var(--dark-ink-soft);
}
/* Generic inverse ground utilities */
.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink); color: var(--dark-ink); }
.bg-blue-deep { background: var(--cgch-blue-deep); color: var(--dark-ink); }
/* =====================================================================
7. TYPE HELPERS
---------------------------------------------------------------------
Defaults for plain headings. Overrides are fine per-component.
===================================================================== */
h1, .type-display-xl {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-display-xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--ink);
}
h2, .type-display-lg {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-display-lg);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--ink);
}
.type-display-md {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-display-md);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--ink);
}
h3, .type-h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--ink);
}
h4, .type-h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h4);
line-height: var(--lh-heading);
color: var(--ink);
}
.type-body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-2);
}
.type-body-lg {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--ink-2);
}
.type-body-sm {
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
color: var(--ink-soft);
}
/* Mono label — prefix labels, section numbers, category tags */
.type-label {
font-family: var(--font-mono);
font-size: var(--fs-label-sm);
color: var(--ink-mute);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
font-weight: 500;
}
.type-label-wide {
font-family: var(--font-mono);
font-size: var(--fs-label);
color: var(--ink-mute);
letter-spacing: var(--ls-mono-wide);
text-transform: uppercase;
font-weight: 500;
}
/* Dark-mode type overrides */
.dark h1, .dark h2, .dark h3, .dark h4,
.dark .type-display-xl, .dark .type-display-lg, .dark .type-display-md,
.dark .type-h3, .dark .type-h4 {
color: var(--dark-ink);
}
.dark .type-body, .dark .type-body-lg {
color: var(--dark-ink-soft);
}
.dark .type-label, .dark .type-label-wide {
color: var(--dark-ink-mute);
}
/* =====================================================================
8. RESPONSIVE BREAKPOINTS (reference — not used as tokens)
---------------------------------------------------------------------
CGCH LPs target these widths. Use media queries directly in
component CSS; don't abstract into mixins.
Mobile: ≤ 640px
Tablet: 641px – 960px
Desktop: 961px – 1280px
Large: > 1280px
Default layout assumes desktop. Mobile overrides collapse grids
to single column and reduce --container-padding to 20px.
===================================================================== */
@media (max-width: 640px) {
:root {
--container-padding: 20px;
--section-padding-y: 72px;
--section-padding-y-sm: 48px;
}
}
/* End of tokens.css — v1.1 · 2026-04 */