From 2e26f71e399a14296ea6ba6adeb7f03589e5f3d4 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Sun, 4 Jan 2026 23:14:49 +0700 Subject: [PATCH] =?UTF-8?q?style:=20=C4=90i=E1=BB=81u=20ch=E1=BB=89nh=20hi?= =?UTF-8?q?=E1=BB=87u=20=E1=BB=A9ng=20glassmorphism=20v=C3=A0=20animation?= =?UTF-8?q?=20=C4=91=E1=BB=83=20ph=C3=B9=20h=E1=BB=A3p=20v=E1=BB=9Bi=20pho?= =?UTF-8?q?ng=20c=C3=A1ch=20X.ai=20minimalist,=20lo=E1=BA=A1i=20b=E1=BB=8F?= =?UTF-8?q?=20c=C3=A1c=20animation=20ph=E1=BB=A9c=20t=E1=BA=A1p=20v=C3=A0?= =?UTF-8?q?=20gi=E1=BA=A3m=20=C4=91=E1=BB=99=20m=E1=BB=9D=20c=E1=BB=A7a=20?= =?UTF-8?q?hi=E1=BB=87u=20=E1=BB=A9ng=20glass.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-client/src/app/globals.css | 123 +---- apps/web-client/src/styles/glass.css | 107 +++-- apps/web-client/src/styles/theme.css | 677 ++++++++++++++------------- 3 files changed, 426 insertions(+), 481 deletions(-) diff --git a/apps/web-client/src/app/globals.css b/apps/web-client/src/app/globals.css index a5edd597..7817b72d 100644 --- a/apps/web-client/src/app/globals.css +++ b/apps/web-client/src/app/globals.css @@ -113,58 +113,32 @@ } /** - * EN: Floating Animation - * VI: Animation lơ lửng + * EN: Floating Animation - X.ai Minimalist (Simplified) + * VI: Animation lơ lửng - X.ai Minimalist (Đơn giản hóa) */ @keyframes float { - 0% { - transform: translateY(0px); + + 0%, + 100% { + transform: translateY(0); } 50% { - transform: translateY(-15px); - } - - 100% { - transform: translateY(0px); + transform: translateY(-8px); } } -/** - * EN: Mesh Gradient Animation - * VI: Animation Mesh Gradient - */ -@keyframes mesh-move { - 0% { - transform: translate(0, 0) scale(1) rotate(0deg); - } +/* ============================================ + EN: Removed - Mesh Gradient Animation (X.ai Minimalist) + VI: Đã xóa - Mesh Gradient Animation (X.ai Minimalist) + ============================================ */ +/* Removed for cleaner, minimalist aesthetic */ - 33% { - transform: translate(10%, 15%) scale(1.2) rotate(120deg); - } - - 66% { - transform: translate(-10%, 10%) scale(0.8) rotate(240deg); - } - - 100% { - transform: translate(0, 0) scale(1) rotate(360deg); - } -} - -/** - * EN: Shimmer animation - * VI: Animation shimmer - */ -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: translateX(100%); - } -} +/* ============================================ + EN: Removed - Shimmer Animation (X.ai Minimalist) + VI: Đã xóa - Shimmer Animation (X.ai Minimalist) + ============================================ */ +/* Removed for cleaner, minimalist aesthetic */ /** * EN: Utilities Layer @@ -175,64 +149,17 @@ animation: fadeIn 1s var(--ease-spring) forwards; } + /* EN: Simplified float animation - X.ai style */ .animate-float { - animation: float 6s var(--ease-in-out) infinite; + animation: float 4s var(--ease-smooth) infinite; } - .mesh-gradient { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -20; - background: var(--bg-primary); - overflow: hidden; - transition: background-color var(--duration-slow) var(--ease-in-out); - } - - .mesh-spot { - position: absolute; - border-radius: 50%; - filter: blur(100px); - opacity: 0.15; - mix-blend-mode: soft-light; - animation: mesh-move 30s infinite linear; - will-change: transform; - } - - .text-glow { - text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); - } - - .text-brand-glow { - text-shadow: 0 0 40px rgba(59, 130, 246, 0.6); - } - - /** - * NOTE: .glass-card is now defined in glass.css - * Legacy definition kept here as comment for reference - */ - /* - .glass-card { - background: var(--glass-bg); - backdrop-filter: blur(20px); - border: 1px solid var(--glass-border); - transition: all var(--duration-normal) var(--ease-in-out); - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); - } - - .glass-card:hover { - background: var(--glass-bg-hover); - border-color: rgba(255, 255, 255, 0.2); - transform: translateY(-8px) scale(1.02); - box-shadow: var(--shadow-brand-lg); - } - */ - - .animate-shimmer { - animation: shimmer 2s infinite; - } + /* ============================================ + EN: Removed - Cosmic Effects (X.ai Minimalist) + VI: Đã xóa - Cosmic Effects (X.ai Minimalist) + ============================================ */ + /* Removed .mesh-gradient, .mesh-spot, .text-brand-glow, .animate-shimmer */ + /* Use simple backgrounds and minimal effects instead */ .container-responsive { width: 100%; diff --git a/apps/web-client/src/styles/glass.css b/apps/web-client/src/styles/glass.css index 80596702..ceb88ae7 100644 --- a/apps/web-client/src/styles/glass.css +++ b/apps/web-client/src/styles/glass.css @@ -21,7 +21,8 @@ .glass-panel { background: var(--glass-bg-default); backdrop-filter: blur(var(--glass-blur-md)); - -webkit-backdrop-filter: blur(var(--glass-blur-md)); /* Safari support */ + -webkit-backdrop-filter: blur(var(--glass-blur-md)); + /* Safari support */ border: 1px solid var(--glass-border-default); box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset); } @@ -29,7 +30,7 @@ .glass-panel:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-hover); - transition: all var(--motion-duration-quick) var(--motion-ease-smooth); + transition: all var(--duration-fast) var(--ease-snap); } /* ============================================ @@ -38,22 +39,23 @@ ============================================ */ /** - * Glass card with rounded corners and hover lift effect - * Perfect for interactive elements like product cards, feature cards + * Glass card with rounded corners and minimal hover effect + * X.ai minimalist style - subtle lift only */ .glass-card { background: var(--glass-bg-default); - backdrop-filter: blur(var(--glass-blur-md)); - -webkit-backdrop-filter: blur(var(--glass-blur-md)); + backdrop-filter: blur(var(--glass-blur-sm)); + -webkit-backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-border-default); - box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset); - border-radius: var(--radius-xl); - transition: all var(--motion-duration-normal) var(--motion-ease-smooth); + box-shadow: var(--shadow); + border-radius: var(--radius-lg); + transition: all var(--duration-fast) var(--ease-snap); } .glass-card:hover { - transform: translateY(-2px); - box-shadow: var(--glass-shadow-lg), var(--glass-shadow-inset); + transform: translateY(-1px); + border-color: var(--glass-border-hover); + /* No shadow change - cleaner look */ } /* ============================================ @@ -62,30 +64,31 @@ ============================================ */ /** - * Glass button with subtle background - * Use for secondary actions and interactive elements + * Glass button with minimal background - X.ai style + * Snappy, fast interactions */ .glass-button { background: var(--glass-bg-default); - backdrop-filter: blur(var(--glass-blur-md)); - -webkit-backdrop-filter: blur(var(--glass-blur-md)); + backdrop-filter: blur(var(--glass-blur-sm)); + -webkit-backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-border-default); - box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset); - border-radius: var(--radius-lg); - padding: var(--space-4) var(--space-4); - transition: all var(--motion-duration-quick) var(--motion-ease-glide); + box-shadow: var(--shadow); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-4); + transition: all var(--duration-fast) var(--ease-snap); cursor: pointer; user-select: none; } .glass-button:hover:not(:disabled) { background: var(--glass-bg-hover); + border-color: var(--glass-border-hover); transform: translateY(-1px); } .glass-button:active:not(:disabled) { background: var(--glass-bg-active); - transform: scale(0.98); + transform: scale(var(--active-scale)); } .glass-button:disabled { @@ -99,15 +102,15 @@ ============================================ */ /** - * Glass input field with subtle background - * Minimal blur for better text readability + * Glass input field - X.ai minimalist + * Ultra-minimal blur for maximum text clarity */ .glass-input { background: var(--glass-bg-subtle); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-border-subtle); - transition: all var(--motion-duration-quick) var(--motion-ease-smooth); + transition: all var(--duration-fast) var(--ease-snap); } .glass-input:hover { @@ -117,7 +120,7 @@ .glass-input:focus { background: var(--glass-bg-default); border-color: var(--glass-border-focus); - box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03); outline: none; } @@ -131,15 +134,15 @@ ============================================ */ /** - * Glass modal with strong blur and dark background - * Suitable for modals, dialogs, overlays + * Glass modal - X.ai minimal style + * Reduced blur for cleaner appearance */ .glass-modal { background: rgba(10, 10, 10, 0.95); - backdrop-filter: blur(var(--glass-blur-xl)); - -webkit-backdrop-filter: blur(var(--glass-blur-xl)); + backdrop-filter: blur(var(--glass-blur-lg)); + -webkit-backdrop-filter: blur(var(--glass-blur-lg)); border: 1px solid var(--glass-border-default); - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--glass-shadow-inset); + box-shadow: var(--shadow-lg); } /* ============================================ @@ -148,13 +151,13 @@ ============================================ */ /** - * Glass navigation bar with high blur and saturation - * Perfect for sticky headers, navigation bars + * Glass navigation bar - X.ai clean style + * Minimal blur, clean borders */ .glass-nav { background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%); - -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%); + backdrop-filter: blur(var(--glass-blur-md)) saturate(150%); + -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(150%); border-bottom: 1px solid var(--glass-border-subtle); } @@ -191,7 +194,7 @@ padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: var(--text-sm); - transition: all var(--motion-duration-quick) var(--motion-ease-smooth); + transition: all var(--duration-fast) var(--ease-snap); } .glass-badge:hover { @@ -205,13 +208,13 @@ ============================================ */ /** - * Full-screen glass overlay - * Use as backdrop for modals, dialogs + * Full-screen glass overlay - X.ai minimal + * Reduced blur for performance */ .glass-overlay { background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(var(--glass-blur-xl)); - -webkit-backdrop-filter: blur(var(--glass-blur-xl)); + backdrop-filter: blur(var(--glass-blur-lg)); + -webkit-backdrop-filter: blur(var(--glass-blur-lg)); } /* ============================================ @@ -220,15 +223,14 @@ ============================================ */ /** - * Glass dropdown menu - * Suitable for select menus, context menus + * Glass dropdown menu - X.ai minimal */ .glass-dropdown { background: var(--glass-bg-medium); - backdrop-filter: blur(var(--glass-blur-lg)); - -webkit-backdrop-filter: blur(var(--glass-blur-lg)); + backdrop-filter: blur(var(--glass-blur-md)); + -webkit-backdrop-filter: blur(var(--glass-blur-md)); border: 1px solid var(--glass-border-default); - box-shadow: var(--glass-shadow-lg), var(--glass-shadow-inset); + box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); } @@ -266,7 +268,7 @@ } /** - * No shadow variant + * No shadow variant - prefer this for minimalism */ .glass-no-shadow { box-shadow: none; @@ -281,6 +283,7 @@ * Reduce glass effects on mobile for performance */ @media (max-width: 768px) { + .glass-card, .glass-modal, .glass-nav { @@ -295,13 +298,14 @@ ============================================ */ /** - * Glass appear animation + * Glass appear animation - X.ai snappy */ @keyframes glass-appear { from { opacity: 0; - transform: scale(0.95); + transform: scale(0.98); } + to { opacity: 1; transform: scale(1); @@ -309,17 +313,18 @@ } .glass-appear { - animation: glass-appear var(--motion-duration-normal) var(--motion-ease-smooth); + animation: glass-appear var(--duration-fast) var(--ease-snap); } /** - * Glass slide in from top + * Glass slide in from top - X.ai snappy */ @keyframes glass-slide-down { from { opacity: 0; - transform: translateY(-10px); + transform: translateY(-8px); } + to { opacity: 1; transform: translateY(0); @@ -327,5 +332,5 @@ } .glass-slide-down { - animation: glass-slide-down var(--motion-duration-quick) var(--motion-ease-smooth); -} + animation: glass-slide-down var(--duration-fast) var(--ease-snap); +} \ No newline at end of file diff --git a/apps/web-client/src/styles/theme.css b/apps/web-client/src/styles/theme.css index 7d8086bb..b451e22f 100644 --- a/apps/web-client/src/styles/theme.css +++ b/apps/web-client/src/styles/theme.css @@ -14,383 +14,396 @@ */ :root { - /* ============================================ + /* ============================================ EN: Color Palette - Dark Mode (Primary Theme) VI: Bảng màu - Dark Mode (Theme chính) ============================================ */ - /* Background Colors / Màu nền */ - --bg-primary: #000000; - /* Pure black - Main background */ - --bg-secondary: #0A0A0A; - /* Almost black - Card/Panel background */ - --bg-tertiary: #141414; - /* Very dark grey - Hover states */ - --bg-elevated: #1A1A1A; - /* Elevated surfaces (modals, dropdowns) */ + /* Background Colors / Màu nền */ + --bg-primary: #000000; + /* Pure black - Main background */ + --bg-secondary: #0A0A0A; + /* Almost black - Card/Panel background */ + --bg-tertiary: #141414; + /* Very dark grey - Hover states */ + --bg-elevated: #1A1A1A; + /* Elevated surfaces (modals, dropdowns) */ - /* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */ - --text-primary: #FFFFFF; - /* Pure white - Primary text */ - --text-secondary: #B0B0B0; - /* Lighter grey - Secondary text (Improved contrast) */ - --text-tertiary: #808080; - /* Mid grey - Tertiary/disabled text (Improved contrast) */ - --text-muted: #505050; - /* Dark grey - Muted elements */ - --text-inverse: #000000; - /* Black - Text on light/white backgrounds */ + /* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */ + --text-primary: #FFFFFF; + /* Pure white - Primary text */ + --text-secondary: #B0B0B0; + /* Lighter grey - Secondary text (Improved contrast) */ + --text-tertiary: #808080; + /* Mid grey - Tertiary/disabled text (Improved contrast) */ + --text-muted: #505050; + /* Dark grey - Muted elements */ + --text-inverse: #000000; + /* Black - Text on light/white backgrounds */ - /* Brand/Accent Colors / Màu thương hiệu/Accent */ - --accent-primary: #FFFFFF; - /* White - Primary actions (High contrast) */ - --accent-secondary: #333333; - /* Dark grey - Secondary actions */ - --accent-success: #10B981; - /* Green - Success states */ - --accent-warning: #F59E0B; - /* Amber - Warnings */ - --accent-error: #EF4444; - /* Red - Errors */ - --accent-info: #06B6D4; - /* Cyan - Info */ + /* Brand/Accent Colors / Màu thương hiệu/Accent */ + --accent-primary: #FFFFFF; + /* White - Primary actions (High contrast) */ + --accent-secondary: #333333; + /* Dark grey - Secondary actions */ + --accent-success: #10B981; + /* Green - Success states */ + --accent-warning: #F59E0B; + /* Amber - Warnings */ + --accent-error: #EF4444; + /* Red - Errors */ + --accent-info: #06B6D4; + /* Cyan - Info */ - /* Chat Specific Colors / Màu riêng cho Chat */ - --chat-user-bubble: #1A1A1A; - /* Dark grey - User message */ - --chat-ai-bubble: transparent; - /* Transparent - AI message (Minimal) */ - --chat-user-text: #FFFFFF; - /* White text */ - --chat-ai-text: #E5E5E5; - /* Off-white text */ - --chat-timestamp: #555555; - /* Dark grey timestamp */ - --chat-divider: #222222; - /* Divider between messages */ + /* Chat Specific Colors / Màu riêng cho Chat */ + --chat-user-bubble: #1A1A1A; + /* Dark grey - User message */ + --chat-ai-bubble: transparent; + /* Transparent - AI message (Minimal) */ + --chat-user-text: #FFFFFF; + /* White text */ + --chat-ai-text: #E5E5E5; + /* Off-white text */ + --chat-timestamp: #555555; + /* Dark grey timestamp */ + --chat-divider: #222222; + /* Divider between messages */ - /* Border Colors / Màu viền */ - --border-primary: #222222; - /* Subtle borders */ - --border-secondary: #333333; - /* Hover borders */ - --border-focus: #FFFFFF; - /* Focus state - White */ + /* Border Colors / Màu viền */ + --border-primary: #222222; + /* Subtle borders */ + --border-secondary: #333333; + /* Hover borders */ + --border-focus: #FFFFFF; + /* Focus state - White */ - /* ============================================ + /* ============================================ EN: Minimal Brand Colors (x.ai Inspired) VI: Màu thương hiệu tối giản (x.ai Inspired) ============================================ */ - /* Primary Brand Color - Clean white accent */ - --brand-primary: #FFFFFF; - --brand-primary-light: #F8F8F8; - --brand-primary-dark: #E5E5E5; - --brand-primary-contrast: #000000; + /* Primary Brand Color - Clean white accent */ + --brand-primary: #FFFFFF; + --brand-primary-light: #F8F8F8; + --brand-primary-dark: #E5E5E5; + --brand-primary-contrast: #000000; - /* Secondary Brand Color - Subtle gray */ - --brand-secondary: #888888; - --brand-secondary-light: #AAAAAA; - --brand-secondary-dark: #666666; + /* Secondary Brand Color - Subtle gray */ + --brand-secondary: #888888; + --brand-secondary-light: #AAAAAA; + --brand-secondary-dark: #666666; - /* Accent Color - Minimal gray accent */ - --brand-accent: #CCCCCC; - --brand-accent-light: #DDDDDD; - --brand-accent-dark: #BBBBBB; + /* Accent Color - Minimal gray accent */ + --brand-accent: #CCCCCC; + --brand-accent-light: #DDDDDD; + --brand-accent-dark: #BBBBBB; - /* Brand Gradients - Minimal monochromatic */ - --brand-gradient-primary: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%); - --brand-gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #AAAAAA 100%); - --brand-gradient-vertical: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 100%); + /* Brand Gradients - REMOVED for X.ai Minimalism */ + /* Use solid colors instead for cleaner design */ - /* ============================================ + /* ============================================ EN: Minimal Effects (x.ai Clean Style) VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ) ============================================ */ - /* Glass Backgrounds - Ultra minimal for clean look */ - --glass-bg-subtle: rgba(255, 255, 255, 0.01); - /* Ultra subtle - For minimal effect */ - --glass-bg-default: rgba(255, 255, 255, 0.02); - /* Default minimal background */ - --glass-bg-medium: rgba(255, 255, 255, 0.03); - /* Medium minimal effect */ - --glass-bg-hover: rgba(255, 255, 255, 0.04); - /* Hover state */ - --glass-bg-active: rgba(255, 255, 255, 0.05); - /* Active/pressed state */ + /* Glass Backgrounds - Ultra minimal for clean look */ + --glass-bg-subtle: rgba(255, 255, 255, 0.01); + /* Ultra subtle - For minimal effect */ + --glass-bg-default: rgba(255, 255, 255, 0.02); + /* Default minimal background */ + --glass-bg-medium: rgba(255, 255, 255, 0.03); + /* Medium minimal effect */ + --glass-bg-hover: rgba(255, 255, 255, 0.04); + /* Hover state */ + --glass-bg-active: rgba(255, 255, 255, 0.05); + /* Active/pressed state */ - /* Glass Borders - Very thin and subtle */ - --glass-border-subtle: rgba(255, 255, 255, 0.03); - /* Very subtle border */ - --glass-border-default: rgba(255, 255, 255, 0.05); - /* Default border */ - --glass-border-hover: rgba(255, 255, 255, 0.07); - /* Hover border */ - --glass-border-focus: rgba(255, 255, 255, 0.10); - /* Focus state - more visible */ + /* Glass Borders - Very thin and subtle */ + --glass-border-subtle: rgba(255, 255, 255, 0.03); + /* Very subtle border */ + --glass-border-default: rgba(255, 255, 255, 0.05); + /* Default border */ + --glass-border-hover: rgba(255, 255, 255, 0.07); + /* Hover border */ + --glass-border-focus: rgba(255, 255, 255, 0.10); + /* Focus state - more visible */ - /* Backdrop Blur Levels - Subtle to strong */ - --glass-blur-sm: 4px; - /* Small blur - for inputs */ - --glass-blur-md: 8px; - /* Medium blur - default */ - --glass-blur-lg: 12px; - /* Large blur - for navigation */ - --glass-blur-xl: 16px; - /* Extra large - for modals */ + /* Backdrop Blur Levels - Subtle to strong */ + --glass-blur-sm: 4px; + /* Small blur - for inputs */ + --glass-blur-md: 8px; + /* Medium blur - default */ + --glass-blur-lg: 12px; + /* Large blur - for navigation */ + --glass-blur-xl: 16px; + /* Extra large - for modals */ - /* Glass Shadows - Dark mode optimized */ - --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); - --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); - --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); - --glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1); - /* Inner highlight */ + /* Glass Shadows - Dark mode optimized */ + --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); + --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); + --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); + --glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1); + /* Inner highlight */ - /* Interactive Glass States */ - --interactive-glass-rest: rgba(255, 255, 255, 0.04); - --interactive-glass-hover: rgba(255, 255, 255, 0.08); - --interactive-glass-active: rgba(255, 255, 255, 0.12); - --interactive-glass-disabled: rgba(255, 255, 255, 0.02); + /* Interactive Glass States */ + --interactive-glass-rest: rgba(255, 255, 255, 0.04); + --interactive-glass-hover: rgba(255, 255, 255, 0.08); + --interactive-glass-active: rgba(255, 255, 255, 0.12); + --interactive-glass-disabled: rgba(255, 255, 255, 0.02); - /* Legacy support - keeping old variables for backward compatibility */ - --glass-bg: var(--glass-bg-default); - --glass-border: var(--glass-border-default); - --glass-blur: var(--glass-blur-md); + /* Legacy support - keeping old variables for backward compatibility */ + --glass-bg: var(--glass-bg-default); + --glass-border: var(--glass-border-default); + --glass-blur: var(--glass-blur-md); - /* ============================================ - EN: Extended Shadows & Effects - VI: Shadows & Effects mở rộng + /* ============================================ + EN: Removed - Extended Shadows (X.ai Minimalist) + VI: Đã xóa - Extended Shadows (X.ai Minimalist) ============================================ */ + /* Removed brand shadows for minimalist approach */ + /* Use --shadow or --shadow-lg instead */ - --shadow-brand: 0 20px 50px rgba(59, 130, 246, 0.15); - --shadow-brand-lg: 0 30px 70px rgba(59, 130, 246, 0.25); - --shadow-colored: 0 10px 40px rgba(59, 130, 246, 0.3); - - /* ============================================ + /* ============================================ EN: Light Mode Colors (Secondary Theme) VI: Màu sắc cho Light Mode (Theme phụ) ============================================ */ - --bg-primary-light: #FFFFFF; - --bg-secondary-light: #FBFBFD; - /* Apple Gray */ - --bg-tertiary-light: #F5F5F7; - --text-primary-light: #1D1D1F; - /* Apple Black */ - --text-secondary-light: #86868B; - /* Apple Gray Text */ - --border-primary-light: #D2D2D7; + --bg-primary-light: #FFFFFF; + --bg-secondary-light: #FBFBFD; + /* Apple Gray */ + --bg-tertiary-light: #F5F5F7; + --text-primary-light: #1D1D1F; + /* Apple Black */ + --text-secondary-light: #86868B; + /* Apple Gray Text */ + --border-primary-light: #D2D2D7; - /* ============================================ + /* ============================================ EN: Typography VI: Kiểu chữ ============================================ */ - /* Font Stack / Bộ font */ - --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; + /* Font Stack / Bộ font */ + --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; - /* Display Font - For hero titles (48px+) */ - --font-display: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + /* Display Font - For hero titles (48px+) */ + --font-display: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - /* Heading Font - For section headings (24-36px) */ - --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + /* Heading Font - For section headings (24-36px) */ + --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - /* Type Scale - Clean minimal approach */ - --text-6xl: 3.5rem; - /* 56px - Hero titles */ - --text-5xl: 2.75rem; - /* 44px - Page titles */ - --text-4xl: 2.25rem; - /* 36px - Section headers */ - --text-3xl: 1.75rem; - /* 28px - Card headers */ - --text-2xl: 1.5rem; - /* 24px - Large body */ - --text-xl: 1.25rem; - /* 20px - Emphasized text */ - --text-lg: 1.125rem; - /* 18px - Large body */ - --text-base: 1rem; - /* 16px - Default body */ - --text-sm: 0.875rem; - /* 14px - Small text */ - --text-xs: 0.75rem; - /* 12px - Captions */ + /* Type Scale - Clean minimal approach */ + --text-6xl: 3.5rem; + /* 56px - Hero titles */ + --text-5xl: 2.75rem; + /* 44px - Page titles */ + --text-4xl: 2.25rem; + /* 36px - Section headers */ + --text-3xl: 1.75rem; + /* 28px - Card headers */ + --text-2xl: 1.5rem; + /* 24px - Large body */ + --text-xl: 1.25rem; + /* 20px - Emphasized text */ + --text-lg: 1.125rem; + /* 18px - Large body */ + --text-base: 1rem; + /* 16px - Default body */ + --text-sm: 0.875rem; + /* 14px - Small text */ + --text-xs: 0.75rem; + /* 12px - Captions */ - /* Line Heights / Chiều cao dòng */ - --leading-none: 1; - --leading-tight: 1.1; - --leading-snug: 1.2; - --leading-normal: 1.5; - --leading-relaxed: 1.625; - --leading-loose: 2; + /* Line Heights / Chiều cao dòng */ + --leading-none: 1; + --leading-tight: 1.1; + --leading-snug: 1.2; + --leading-normal: 1.5; + --leading-relaxed: 1.625; + --leading-loose: 2; - /* Font Weights - Clean and minimal */ - --font-thin: 100; - --font-extralight: 200; - --font-light: 300; - /* Light text */ - --font-normal: 400; - /* Body text */ - --font-medium: 500; - /* Emphasized */ - --font-semibold: 600; - /* Headings */ - --font-bold: 600; - /* Clean bold - less heavy */ - --font-extrabold: 700; - /* Strong emphasis */ + /* Font Weights - X.ai Minimalist (Bolder Impact) */ + --font-thin: 100; + --font-extralight: 200; + --font-light: 300; + /* Light text */ + --font-normal: 400; + /* Body text */ + --font-medium: 500; + /* Emphasized */ + --font-semibold: 600; + /* Headings */ + --font-bold: 700; + /* Bold - stronger impact */ + --font-extrabold: 800; + /* Extra bold - hero text */ + --font-black: 900; + /* Black - maximum impact for titles */ - /* ============================================ + /* Letter Spacing - Clean Minimalist Look */ + --tracking-tighter: -0.04em; + /* Very tight - for large display text */ + --tracking-tight: -0.02em; + /* Tight - for headings */ + --tracking-normal: 0; + /* Normal */ + --tracking-wide: 0.02em; + /* Wide - for small caps */ + --tracking-wider: 0.04em; + /* Wider - for emphasis */ + + /* ============================================ EN: Spacing & Layout VI: Khoảng cách & Bố cục ============================================ */ - /* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */ - --space-0: 0; - --space-1: 0.25rem; - /* 4px */ - --space-2: 0.5rem; - /* 8px */ - --space-3: 0.75rem; - /* 12px */ - --space-4: 1rem; - /* 16px */ - --space-5: 1.25rem; - /* 20px */ - --space-6: 1.5rem; - /* 24px */ - --space-8: 2rem; - /* 32px */ - --space-10: 2.5rem; - /* 40px */ - --space-12: 3rem; - /* 48px */ - --space-16: 4rem; - /* 64px */ - --space-20: 5rem; - /* 80px */ + /* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */ + --space-0: 0; + --space-1: 0.25rem; + /* 4px */ + --space-2: 0.5rem; + /* 8px */ + --space-3: 0.75rem; + /* 12px */ + --space-4: 1rem; + /* 16px */ + --space-5: 1.25rem; + /* 20px */ + --space-6: 1.5rem; + /* 24px */ + --space-8: 2rem; + /* 32px */ + --space-10: 2.5rem; + /* 40px */ + --space-12: 3rem; + /* 48px */ + --space-16: 4rem; + /* 64px */ + --space-20: 5rem; + /* 80px */ - /* Container Widths / Chiều rộng container */ - --container-sm: 640px; - /* Small devices */ - --container-md: 768px; - /* Medium devices */ - --container-lg: 1024px; - /* Large devices */ - --container-xl: 1280px; - /* Extra large */ - --container-2xl: 1536px; - /* 2X large */ - --chat-max-width: 800px; - /* Max width for chat messages */ - --sidebar-width: 280px; - /* Conversation history sidebar */ + /* Container Widths / Chiều rộng container */ + --container-sm: 640px; + /* Small devices */ + --container-md: 768px; + /* Medium devices */ + --container-lg: 1024px; + /* Large devices */ + --container-xl: 1280px; + /* Extra large */ + --container-2xl: 1536px; + /* 2X large */ + --chat-max-width: 800px; + /* Max width for chat messages */ + --sidebar-width: 280px; + /* Conversation history sidebar */ - /* Mobile Layout / Layout Mobile */ - --mobile-header-height: 56px; - /* Standard mobile header height */ - --mobile-bottom-nav-height: 64px; - /* iOS/Android bottom nav height */ - --mobile-safe-area-top: env(safe-area-inset-top); - /* iOS notch safe area */ - --mobile-safe-area-bottom: env(safe-area-inset-bottom); - /* iOS home indicator safe area */ + /* Mobile Layout / Layout Mobile */ + --mobile-header-height: 56px; + /* Standard mobile header height */ + --mobile-bottom-nav-height: 64px; + /* iOS/Android bottom nav height */ + --mobile-safe-area-top: env(safe-area-inset-top); + /* iOS notch safe area */ + --mobile-safe-area-bottom: env(safe-area-inset-bottom); + /* iOS home indicator safe area */ - /* Border Radius / Bo góc */ - --radius-sm: 2px; - /* Small elements - sharp */ - --radius-md: 4px; - /* Buttons, inputs - sharp */ - --radius-lg: 8px; - /* Cards - minimal roundness */ - --radius-xl: 12px; - /* Large cards */ - --radius-2xl: 16px; - /* Modals */ - --radius-full: 9999px; - /* Full round - Avatars, pills */ + /* Border Radius / Bo góc */ + --radius-sm: 2px; + /* Small elements - sharp */ + --radius-md: 4px; + /* Buttons, inputs - sharp */ + --radius-lg: 8px; + /* Cards - minimal roundness */ + --radius-xl: 12px; + /* Large cards */ + --radius-2xl: 16px; + /* Modals */ + --radius-full: 9999px; + /* Full round - Avatars, pills */ - /* ============================================ - EN: Shadows (Dark Mode Optimized) - VI: Đổ bóng (Tối ưu cho Dark Mode) + /* ============================================ + EN: Shadows - X.ai Minimalist (Ultra Subtle) + VI: Đổ bóng - X.ai Minimalist (Cực kỳ tinh tế) ============================================ */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8); - --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.8); - --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.9); - --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.95); - --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1); - /* White glow for focus */ + --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + /* Default shadow - subtle */ + --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6); + /* Large shadow - for modals only */ - /* ============================================ + /* Legacy support - mapping to new shadows */ + --shadow-sm: var(--shadow); + --shadow-md: var(--shadow); + --shadow-xl: var(--shadow-lg); + --shadow-glow: 0 0 8px rgba(255, 255, 255, 0.05); + /* Minimal glow for focus */ + + /* ============================================ EN: Grid System & Breakpoints VI: Hệ thống lưới & Điểm ngắt ============================================ */ - --screen-sm: 640px; - /* Mobile landscape */ - --screen-md: 768px; - /* Tablet */ - --screen-lg: 1024px; - /* Desktop */ - --screen-xl: 1280px; - /* Large desktop */ - --screen-2xl: 1536px; - /* Extra large desktop */ + --screen-sm: 640px; + /* Mobile landscape */ + --screen-md: 768px; + /* Tablet */ + --screen-lg: 1024px; + /* Desktop */ + --screen-xl: 1280px; + /* Large desktop */ + --screen-2xl: 1536px; + /* Extra large desktop */ - /* ============================================ + /* ============================================ EN: Animation & Transitions VI: Animation & Chuyển tiếp ============================================ */ - /* Timing Functions / Hàm thời gian */ - --ease-in: cubic-bezier(0.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, 0.2, 1); - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); - --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + /* Timing Functions - X.ai Minimalist (Simplified) */ + --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); + /* Smooth and natural - primary easing */ + --ease-snap: cubic-bezier(0.4, 0, 0.2, 1); + /* Snappy - for quick interactions */ - /* Smooth Motion (x.ai inspired) */ - --motion-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); - /* Smooth and natural */ - --motion-ease-glide: cubic-bezier(0.4, 0, 0.2, 1); - /* Material Design standard */ + /* Legacy support - mapping to new easing */ + --ease-in: var(--ease-snap); + --ease-out: var(--ease-snap); + --ease-in-out: var(--ease-smooth); + --motion-ease-smooth: var(--ease-smooth); + --motion-ease-glide: var(--ease-snap); - /* Duration / Thời lượng */ - --duration-fast: 150ms; - /* Hover effects */ - --duration-normal: 250ms; - /* Default transitions */ - --duration-slow: 350ms; - /* Complex animations */ - --duration-slower: 500ms; - /* Page transitions */ + /* Duration - X.ai Minimalist (Faster, Snappier) */ + --duration-instant: 100ms; + /* Instant feedback */ + --duration-fast: 150ms; + /* Hover effects */ + --duration-normal: 200ms; + /* Default transitions - FASTER */ + --duration-slow: 300ms; + /* Complex animations - FASTER */ - /* Motion Duration (x.ai style) */ - --motion-duration-instant: 100ms; - /* Instant feedback */ - --motion-duration-quick: 200ms; - /* Quick interactions */ - --motion-duration-normal: 300ms; - /* Standard transitions */ - --motion-duration-smooth: 400ms; - /* Smooth, deliberate */ + /* Legacy support - mapping to new durations */ + --duration-slower: var(--duration-slow); + --motion-duration-instant: var(--duration-instant); + --motion-duration-quick: var(--duration-fast); + --motion-duration-normal: var(--duration-normal); + --motion-duration-smooth: var(--duration-slow); - /* ============================================ - EN: Advanced Motion Tokens - VI: Token chuyển động nâng cao + /* ============================================ + EN: Interactive States - X.ai Minimalist + VI: Trạng thái tương tác - X.ai Minimalist ============================================ */ - /* Motion Ease Functions - For micro-interactions */ - --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); - --motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); + /* Removed bounce/elastic - too playful for minimalism */ - /* Hover Scale - For interactive elements */ - --hover-scale-sm: 1.02; - --hover-scale-md: 1.05; - --hover-scale-lg: 1.1; + /* Hover Scale - Minimal movement */ + --hover-scale-sm: 1.01; + /* Barely noticeable */ + --hover-scale-md: 1.02; + /* Subtle */ - /* Active Scale - For pressed states */ - --active-scale: 0.98; + /* Active Scale - For pressed states */ + --active-scale: 0.99; + /* Minimal press feedback */ } /* ============================================ @@ -398,14 +411,14 @@ VI: Ghi đè theme cho Light Mode ============================================ */ @media (prefers-color-scheme: light) { - :root { - --bg-primary: var(--bg-primary-light); - --bg-secondary: var(--bg-secondary-light); - --bg-tertiary: var(--bg-tertiary-light); - --text-primary: var(--text-primary-light); - --text-secondary: var(--text-secondary-light); - --border-primary: var(--border-primary-light); - } + :root { + --bg-primary: var(--bg-primary-light); + --bg-secondary: var(--bg-secondary-light); + --bg-tertiary: var(--bg-tertiary-light); + --text-primary: var(--text-primary-light); + --text-secondary: var(--text-secondary-light); + --border-primary: var(--border-primary-light); + } } /* ============================================ @@ -414,16 +427,16 @@ ============================================ */ [data-theme="dark"], .dark { - --bg-primary: #000000; - --bg-secondary: #0A0A0A; - --bg-tertiary: #141414; - --bg-elevated: #1A1A1A; - --text-primary: #FFFFFF; - --text-secondary: #B0B0B0; - --text-tertiary: #808080; - --text-muted: #505050; - --border-primary: #222222; - --border-secondary: #333333; + --bg-primary: #000000; + --bg-secondary: #0A0A0A; + --bg-tertiary: #141414; + --bg-elevated: #1A1A1A; + --text-primary: #FFFFFF; + --text-secondary: #B0B0B0; + --text-tertiary: #808080; + --text-muted: #505050; + --border-primary: #222222; + --border-secondary: #333333; } /* ============================================ @@ -432,10 +445,10 @@ ============================================ */ [data-theme="light"], .light { - --bg-primary: var(--bg-primary-light); - --bg-secondary: var(--bg-secondary-light); - --bg-tertiary: var(--bg-tertiary-light); - --text-primary: var(--text-primary-light); - --text-secondary: var(--text-secondary-light); - --border-primary: var(--border-primary-light); + --bg-primary: var(--bg-primary-light); + --bg-secondary: var(--bg-secondary-light); + --bg-tertiary: var(--bg-tertiary-light); + --text-primary: var(--text-primary-light); + --text-secondary: var(--text-secondary-light); + --border-primary: var(--border-primary-light); } \ No newline at end of file