Extract generic UI components
Reduces duplication across marketing pages by converting sections into reusable components like CtaSection and HeaderBg. Consolidates styling patterns to improve maintainability and consistency of the user interface.
This commit is contained in:
@@ -16,84 +16,140 @@
|
||||
============================================ */
|
||||
|
||||
/* Primary Colors (主要色) */
|
||||
--color-primary: #3898ec; /* Primary blue */
|
||||
--color-primary-dark: #0082f3; /* Deep blue */
|
||||
--color-primary-light: #67aee1; /* Light blue */
|
||||
--color-primary-hover: #2895f7; /* Hover blue */
|
||||
--color-primary: #3898ec;
|
||||
/* Primary blue */
|
||||
--color-primary-dark: #0082f3;
|
||||
/* Deep blue */
|
||||
--color-primary-light: #67aee1;
|
||||
/* Light blue */
|
||||
--color-primary-hover: #2895f7;
|
||||
/* Hover blue */
|
||||
|
||||
/* Secondary Colors (次要色) */
|
||||
--color-secondary: #f39c12; /* Secondary orange */
|
||||
--color-secondary-light: #f6c456; /* Light pink */
|
||||
--color-secondary-dark: #d84038; /* Deep orange */
|
||||
--color-secondary: #f39c12;
|
||||
/* Secondary orange */
|
||||
--color-secondary-light: #f6c456;
|
||||
/* Light pink */
|
||||
--color-secondary-dark: #d84038;
|
||||
/* Deep orange */
|
||||
|
||||
/* Accent Colors (強調色) */
|
||||
--color-accent: #d84038; /* Accent red-orange */
|
||||
--color-accent-light: #f6c456; /* Light pink */
|
||||
--color-accent-dark: #ea384c; /* Deep red */
|
||||
--color-accent-pink: #bb8282; /* Pink */
|
||||
--color-accent-rose: #c48383; /* Rose */
|
||||
--color-accent: #d84038;
|
||||
/* Accent red-orange */
|
||||
--color-accent-light: #f6c456;
|
||||
/* Light pink */
|
||||
--color-accent-dark: #ea384c;
|
||||
/* Deep red */
|
||||
--color-accent-pink: #bb8282;
|
||||
/* Pink */
|
||||
--color-accent-rose: #c48383;
|
||||
/* Rose */
|
||||
|
||||
/* Link Colors (連結色) */
|
||||
--color-link: #3083bf; /* Default link */
|
||||
--color-link-hover: #23608c; /* Link hover */
|
||||
--color-link: #3083bf;
|
||||
/* Default link */
|
||||
--color-link-hover: #23608c;
|
||||
/* Link hover */
|
||||
|
||||
/* Neutral Colors (中性色 - Tailwind Slate mapping) */
|
||||
--color-white: #ffffff; /* White */
|
||||
--color-black: #000000; /* Black */
|
||||
--color-gray-50: #fafafa; /* Surface lightest */
|
||||
--color-gray-100: #f5f5f5; /* Surface light */
|
||||
--color-gray-200: #f3f3f3; /* Surface */
|
||||
--color-gray-300: #eeeeee; /* Border light */
|
||||
--color-gray-400: #dddddd; /* Border default */
|
||||
--color-gray-500: #c8c8c8; /* Mid gray */
|
||||
--color-gray-600: #999999; /* Text muted */
|
||||
--color-gray-700: #828282; /* Text dark */
|
||||
--color-gray-800: #758696; /* Dark gray 1 */
|
||||
--color-gray-900: #5d6c7b; /* Dark gray 2 */
|
||||
--color-gray-950: #4f4f4f; /* Darkest gray */
|
||||
--color-white: #ffffff;
|
||||
/* White */
|
||||
--color-black: #000000;
|
||||
/* Black */
|
||||
--color-gray-50: #fafafa;
|
||||
/* Surface lightest */
|
||||
--color-gray-100: #f5f5f5;
|
||||
/* Surface light */
|
||||
--color-gray-200: #f3f3f3;
|
||||
/* Surface */
|
||||
--color-gray-300: #eeeeee;
|
||||
/* Border light */
|
||||
--color-gray-400: #dddddd;
|
||||
/* Border default */
|
||||
--color-gray-500: #c8c8c8;
|
||||
/* Mid gray */
|
||||
--color-gray-600: #999999;
|
||||
/* Text muted */
|
||||
--color-gray-700: #828282;
|
||||
/* Text dark */
|
||||
--color-gray-800: #758696;
|
||||
/* Dark gray 1 */
|
||||
--color-gray-900: #5d6c7b;
|
||||
/* Dark gray 2 */
|
||||
--color-gray-950: #4f4f4f;
|
||||
/* Darkest gray */
|
||||
|
||||
/* Semantic Colors (語意化顏色) */
|
||||
--color-text-primary: #333333; /* Primary text */
|
||||
--color-text-secondary: #222222; /* Secondary text */
|
||||
--color-text-muted: #999999; /* Muted text */
|
||||
--color-text-light: #758696; /* Light text on dark */
|
||||
--color-text-inverse: #ffffff; /* Inverse (white) */
|
||||
--color-text-primary: #333333;
|
||||
/* Primary text */
|
||||
--color-text-secondary: #222222;
|
||||
/* Secondary text */
|
||||
--color-text-muted: #999999;
|
||||
/* Muted text */
|
||||
--color-text-light: #758696;
|
||||
/* Light text on dark */
|
||||
--color-text-inverse: #ffffff;
|
||||
/* Inverse (white) */
|
||||
|
||||
/* Backgrounds (背景色) */
|
||||
--color-background: #f2f2f2; /* Main background - Grey 6 from Webflow */
|
||||
--color-surface: #fafafa; /* Surface background */
|
||||
--color-surface2: #f3f3f3; /* Surface elevated */
|
||||
--color-surface-dark: #2226; /* Dark background */
|
||||
--color-background: #f2f2f2;
|
||||
/* Main background - Grey 6 from Webflow */
|
||||
--color-surface: #fafafa;
|
||||
/* Surface background */
|
||||
--color-surface2: #f3f3f3;
|
||||
/* Surface elevated */
|
||||
--color-surface-dark: #2226;
|
||||
/* Dark background */
|
||||
|
||||
/* Borders (邊框色) */
|
||||
--color-border: #e2e8f0; /* Default border */
|
||||
--color-border-light: #dddddd; /* Light border */
|
||||
--color-border: #e2e8f0;
|
||||
/* Default border */
|
||||
--color-border-light: #dddddd;
|
||||
/* Light border */
|
||||
|
||||
/* Category Colors (文章分類) */
|
||||
--color-category-google: #67aee1; /* Google小學堂 */
|
||||
--color-category-meta: #8974de; /* Meta小學堂 */
|
||||
--color-category-news: #3083bf; /* 行銷時事最前線 */
|
||||
--color-category-enchun: #3898ec; /* 恩群數位 */
|
||||
--color-category-google: #67aee1;
|
||||
/* Google小學堂 */
|
||||
--color-category-meta: #8974de;
|
||||
/* Meta小學堂 */
|
||||
--color-category-news: #3083bf;
|
||||
/* 行銷時事最前線 */
|
||||
--color-category-enchun: #3898ec;
|
||||
/* 恩群數位 */
|
||||
|
||||
/* Badge Colors (標籤) */
|
||||
--color-badge-hot: #ea384c; /* Hot 標籤 (紅) */
|
||||
--color-badge-new: #67aee1; /* New 標籤 (淡藍) */
|
||||
--color-badge-hot: #ea384c;
|
||||
/* Hot 標籤 (紅) */
|
||||
--color-badge-new: #67aee1;
|
||||
/* New 標籤 (淡藍) */
|
||||
|
||||
/* Webflow Colors - Story 1-4 Global Layout (Verified against original) */
|
||||
--color-enchunblue: #23608c; /* Enchun Blue - 品牌/主色 */
|
||||
--color-enchunblue-dark: #3083bf; /* Enchun Blue Dark - 品牌/主色深色 */
|
||||
--color-tropical-blue: #c7e4fa; /* Tropical Blue - 頁腳背景 (verified: rgb(199, 228, 250)) */
|
||||
--color-st-tropaz: #5d7285; /* St. Tropaz - 頁腳文字 */
|
||||
--color-amber: #f6c456; /* Amber - CTA/強調 */
|
||||
--color-tarawera: #2d3748; /* Tarawera - 深色文字 */
|
||||
--color-nav-link: var(--color-gray-200); /* Navigation Link - 使用灰色系 */
|
||||
--color-enchunblue: #23608c;
|
||||
/* Enchun Blue - 品牌/主色 */
|
||||
--color-enchunblue-dark: #3083bf;
|
||||
/* Enchun Blue Dark - 品牌/主色深色 */
|
||||
--color-tropical-blue: #c7e4fa;
|
||||
/* Tropical Blue - 頁腳背景 (verified: rgb(199, 228, 250)) */
|
||||
--color-st-tropaz: #5d7285;
|
||||
/* St. Tropaz - 頁腳文字 */
|
||||
--color-amber: #f6c456;
|
||||
/* Amber - CTA/強調 */
|
||||
--color-tarawera: #2d3748;
|
||||
/* Tarawera - 深色文字 */
|
||||
--color-nav-link: var(--color-gray-200);
|
||||
/* Navigation Link - 使用灰色系 */
|
||||
|
||||
/* Webflow Additional Colors - Story 1-5 Homepage */
|
||||
--color-notification-red: #d84038; /* Notification Red - CTA Button */
|
||||
--color-dark-blue: #062841; /* Dark Blue - Headings */
|
||||
--color-medium-blue: #67aee1; /* Medium Blue - Accents */
|
||||
--color-grey5: #e0e0e0; /* Grey 5 - Borders */
|
||||
--color-grey6: #f2f2f2; /* Grey 6 - Backgrounds */
|
||||
--color-notification-red: #d84038;
|
||||
/* Notification Red - CTA Button */
|
||||
--color-dark-blue: #062841;
|
||||
/* Dark Blue - Headings */
|
||||
--color-medium-blue: #67aee1;
|
||||
/* Medium Blue - Accents */
|
||||
--color-grey5: #e0e0e0;
|
||||
/* Grey 5 - Borders */
|
||||
--color-grey6: #f2f2f2;
|
||||
/* Grey 6 - Backgrounds */
|
||||
|
||||
/* ============================================
|
||||
🔤 TYPOGRAPHY - From Webflow
|
||||
@@ -111,13 +167,20 @@
|
||||
📏 SPACING - Based on Tailwind scale
|
||||
============================================ */
|
||||
|
||||
--spacing-xs: 0.25rem; /* 4px */
|
||||
--spacing-sm: 0.5rem; /* 8px */
|
||||
--spacing-md: 1rem; /* 16px */
|
||||
--spacing-lg: 1.5rem; /* 24px */
|
||||
--spacing-xl: 2rem; /* 32px */
|
||||
--spacing-2xl: 3rem; /* 48px */
|
||||
--spacing-3xl: 4rem; /* 64px */
|
||||
--spacing-xs: 0.25rem;
|
||||
/* 4px */
|
||||
--spacing-sm: 0.5rem;
|
||||
/* 8px */
|
||||
--spacing-md: 1rem;
|
||||
/* 16px */
|
||||
--spacing-lg: 1.5rem;
|
||||
/* 24px */
|
||||
--spacing-xl: 2rem;
|
||||
/* 32px */
|
||||
--spacing-2xl: 3rem;
|
||||
/* 48px */
|
||||
--spacing-3xl: 4rem;
|
||||
/* 64px */
|
||||
|
||||
/* Container */
|
||||
--container-max-width: 1200px;
|
||||
@@ -128,14 +191,22 @@
|
||||
🔲 BORDER RADIUS
|
||||
============================================ */
|
||||
|
||||
--radius-sm: 0.125rem; /* 2px */
|
||||
--radius: 0.375rem; /* 6px (DEFAULT) */
|
||||
--radius-md: 0.5rem; /* 8px */
|
||||
--radius-lg: 0.75rem; /* 12px */
|
||||
--radius-xl: 1rem; /* 16px */
|
||||
--radius-2xl: 1.5rem; /* 24px */
|
||||
--radius-3xl: 2rem; /* 32px */
|
||||
--radius-full: 9999px; /* Full circle */
|
||||
--radius-sm: 0.125rem;
|
||||
/* 2px */
|
||||
--radius: 0.375rem;
|
||||
/* 6px (DEFAULT) */
|
||||
--radius-md: 0.5rem;
|
||||
/* 8px */
|
||||
--radius-lg: 0.75rem;
|
||||
/* 12px */
|
||||
--radius-xl: 1rem;
|
||||
/* 16px */
|
||||
--radius-2xl: 1.5rem;
|
||||
/* 24px */
|
||||
--radius-3xl: 2rem;
|
||||
/* 32px */
|
||||
--radius-full: 9999px;
|
||||
/* Full circle */
|
||||
|
||||
/* ============================================
|
||||
💫 SHADOWS
|
||||
@@ -178,9 +249,12 @@
|
||||
Small (≤479px): 13px
|
||||
*/
|
||||
--html-font-size-desktop: 19px;
|
||||
--html-font-size-tablet: 19px; /* 991px breakpoint */
|
||||
--html-font-size-mobile: 16px; /* 767px breakpoint */
|
||||
--html-font-size-small: 13px; /* 479px breakpoint */
|
||||
--html-font-size-tablet: 19px;
|
||||
/* 991px breakpoint */
|
||||
--html-font-size-mobile: 16px;
|
||||
/* 767px breakpoint */
|
||||
--html-font-size-small: 13px;
|
||||
/* 479px breakpoint */
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -252,11 +326,9 @@ body {
|
||||
|
||||
/* Text Gradient */
|
||||
.text-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-primary),
|
||||
var(--color-accent)
|
||||
);
|
||||
background: linear-gradient(135deg,
|
||||
var(--color-primary),
|
||||
var(--color-accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -275,6 +347,7 @@ body {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -285,6 +358,7 @@ body {
|
||||
opacity: 0;
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -357,7 +431,7 @@ body {
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
background: var(--color-secondary);
|
||||
transition: width var(--transition-fast);
|
||||
}
|
||||
|
||||
@@ -365,7 +439,11 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Active Navigation Link */
|
||||
/* Active Navigation Link — position: relative ensures ::after stays within the link */
|
||||
.nav-active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -402,9 +480,11 @@ body {
|
||||
.prose-custom h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.prose-custom h2 {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.prose-custom h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@@ -548,4 +628,4 @@ body {
|
||||
.badge-category-enchun {
|
||||
background-color: var(--color-category-enchun);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user