pkupuk
2e32d52133
Convert custom CSS styling to Tailwind utility classes across marketing and about pages. Improve responsive layouts in feature grids, service lists, and sliders. Consolidate section headers using the shared SectionHeader component to maintain visual consistency.
633 lines
15 KiB
CSS
633 lines
15 KiB
CSS
/**
|
|
* Theme CSS Variables and Custom Styles
|
|
* 恩群數位行銷 - Enchun Digital Marketing
|
|
*
|
|
* Design tokens extracted from Webflow CSS
|
|
* Last Updated: 2026-01-31
|
|
*/
|
|
|
|
/* ============================================
|
|
CSS CUSTOM PROPERTIES - DESIGN TOKENS
|
|
============================================ */
|
|
|
|
:root {
|
|
/* ============================================
|
|
🎨 COLORS - Extracted from Webflow CSS
|
|
============================================ */
|
|
|
|
/* 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 */
|
|
|
|
/* Secondary Colors (次要色) */
|
|
--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 */
|
|
|
|
/* Link Colors (連結色) */
|
|
--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 */
|
|
|
|
/* 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) */
|
|
|
|
/* 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 */
|
|
|
|
/* Borders (邊框色) */
|
|
--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;
|
|
/* 恩群數位 */
|
|
|
|
/* Badge Colors (標籤) */
|
|
--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-pale-purple: oklch(62.664% 0.15547 290.298);
|
|
/* Pale Purple - CTA/強調 */
|
|
--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 */
|
|
|
|
/* ============================================
|
|
🔤 TYPOGRAPHY - From Webflow
|
|
============================================ */
|
|
|
|
--font-family-sans: "Noto Sans TC", "Quicksand", Arial, sans-serif;
|
|
--font-family-heading: "Noto Sans TC", "Quicksand", Arial, sans-serif;
|
|
|
|
/* Rich Text Block Typography */
|
|
--rtb-heading: 1.44rem;
|
|
--rtb-body: 1rem;
|
|
--rtb-blockquote: 0.9rem;
|
|
|
|
/* ============================================
|
|
📏 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 */
|
|
|
|
/* Container */
|
|
--container-max-width: 1200px;
|
|
--container-padding: 1.5rem;
|
|
--container-padding-lg: 2rem;
|
|
|
|
/* ============================================
|
|
🔲 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 */
|
|
|
|
/* ============================================
|
|
💫 SHADOWS
|
|
============================================ */
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
|
--shadow-md:
|
|
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg:
|
|
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
/* ============================================
|
|
⏱ TRANSITIONS
|
|
============================================ */
|
|
|
|
--transition-fast: 150ms ease-in-out;
|
|
--transition-base: 200ms ease-in-out;
|
|
--transition-normal: 250ms ease-in-out;
|
|
--transition-slow: 350ms ease-in-out;
|
|
|
|
/* ============================================
|
|
🎯 Z-INDEX LAYERS
|
|
============================================ */
|
|
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-modal: 1040;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1080;
|
|
|
|
/* ============================================
|
|
📱 RESPONSIVE - Font Size Adjustments (Webflow)
|
|
============================================ */
|
|
|
|
/* Webflow breakpoints:
|
|
Desktop default: 19px
|
|
Tablet (≤991px): 19px
|
|
Mobile (≤767px): 16px
|
|
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 */
|
|
}
|
|
|
|
/* ============================================
|
|
🌙 DARK MODE (Optional - for future use)
|
|
============================================ */
|
|
|
|
/*@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-background: #1a202c;
|
|
--color-surface: #2d3748;
|
|
--color-surface2: #1a202c;
|
|
--color-text: #f7fafc;
|
|
--color-text-muted: #a0aec0;
|
|
--color-text-secondary: #e2e8f0;
|
|
--color-border: #4a5568;
|
|
}
|
|
}*/
|
|
|
|
/* ============================================
|
|
📐 BASE STYLES
|
|
============================================ */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-family-sans);
|
|
line-height: 1.5;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-background);
|
|
font-size: var(--html-font-size-desktop);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
/* ============================================
|
|
📱 RESPONSIVE FONT SIZE ADJUSTMENTS
|
|
============================================ */
|
|
|
|
@media (max-width: 991px) {
|
|
html {
|
|
font-size: var(--html-font-size-tablet);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
html {
|
|
font-size: var(--html-font-size-mobile);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 479px) {
|
|
html {
|
|
font-size: var(--html-font-size-small);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
🎨 UTILITY CLASSES
|
|
============================================ */
|
|
|
|
/* Text Gradient */
|
|
.text-gradient {
|
|
background: linear-gradient(135deg,
|
|
var(--color-primary),
|
|
var(--color-accent));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Animations */
|
|
.fade-in {
|
|
animation: fadeIn var(--transition-normal) ease-in-out;
|
|
}
|
|
|
|
.slide-up {
|
|
animation: slideUp var(--transition-normal) ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(1rem);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Glass Effect */
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Shadow Custom */
|
|
.shadow-custom {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* ============================================
|
|
🔘 BUTTON STYLES
|
|
============================================ */
|
|
|
|
.btn-primary {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border-radius: var(--radius);
|
|
border: none;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--color-primary-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--color-secondary);
|
|
color: white;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border-radius: var(--radius);
|
|
border: none;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-secondary-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ============================================
|
|
🧭 NAVIGATION STYLES
|
|
============================================ */
|
|
|
|
.nav-link {
|
|
position: relative;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--color-secondary);
|
|
transition: width var(--transition-fast);
|
|
}
|
|
|
|
.nav-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Active Navigation Link — position: relative ensures ::after stays within the link */
|
|
.nav-active {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 70%;
|
|
height: 2px;
|
|
background: var(--color-secondary);
|
|
}
|
|
|
|
/* ============================================
|
|
📝 PROSE / MARKDOWN STYLES
|
|
============================================ */
|
|
|
|
.prose-custom {
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-family-sans);
|
|
}
|
|
|
|
.prose-custom h1,
|
|
.prose-custom h2,
|
|
.prose-custom h3,
|
|
.prose-custom h4,
|
|
.prose-custom h5,
|
|
.prose-custom h6 {
|
|
color: var(--color-text-primary);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-top: var(--spacing-xl);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.prose-custom h1 {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.prose-custom h2 {
|
|
font-size: 1.875rem;
|
|
}
|
|
|
|
.prose-custom h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.prose-custom p {
|
|
margin-bottom: var(--spacing-md);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.prose-custom a {
|
|
color: var(--color-link);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.prose-custom a:hover {
|
|
color: var(--color-link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose-custom strong {
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose-custom em {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.prose-custom code {
|
|
background: var(--color-surface);
|
|
color: var(--color-text-primary);
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: var(--radius-sm);
|
|
font-family: "Monaco", "Menlo", monospace;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.prose-custom pre {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-md);
|
|
overflow-x: auto;
|
|
margin: var(--spacing-lg) 0;
|
|
}
|
|
|
|
.prose-custom blockquote {
|
|
border-left: 4px solid var(--color-primary);
|
|
padding-left: var(--spacing-md);
|
|
margin: var(--spacing-lg) 0;
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
background: var(--color-surface);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* ============================================
|
|
📊 TABLE STYLES
|
|
============================================ */
|
|
|
|
.prose-custom table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: var(--spacing-lg) 0;
|
|
}
|
|
|
|
.prose-custom th,
|
|
.prose-custom td {
|
|
border: 1px solid var(--color-border);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
}
|
|
|
|
.prose-custom th {
|
|
background: var(--color-surface);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ============================================
|
|
🖼️ IMAGE STYLES
|
|
============================================ */
|
|
|
|
.prose-custom img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: var(--radius-md);
|
|
margin: var(--spacing-md) 0;
|
|
}
|
|
|
|
/* ============================================
|
|
📏 HR (DIVIDER) STYLES
|
|
============================================ */
|
|
|
|
.prose-custom hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: var(--spacing-2xl) 0;
|
|
}
|
|
|
|
/* ============================================
|
|
🏷️ CATEGORY BADGES
|
|
============================================ */
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.badge-hot {
|
|
background-color: var(--color-badge-hot);
|
|
color: white;
|
|
}
|
|
|
|
.badge-new {
|
|
background-color: var(--color-badge-new);
|
|
color: white;
|
|
}
|
|
|
|
/* Category Badge Colors */
|
|
.badge-category-google {
|
|
background-color: var(--color-category-google);
|
|
color: white;
|
|
}
|
|
|
|
.badge-category-meta {
|
|
background-color: var(--color-category-meta);
|
|
color: white;
|
|
}
|
|
|
|
.badge-category-news {
|
|
background-color: var(--color-category-news);
|
|
color: white;
|
|
}
|
|
|
|
.badge-category-enchun {
|
|
background-color: var(--color-category-enchun);
|
|
color: white;
|
|
} |