-
[ Interactive Demo Placeholder ]
+
+
+
+ Powering the Next Generation
+ of Digital Enterprise
+
+
+
+ Secure, scalable, and intelligent infrastructure for modern businesses.
+ Unlock potential with our AI-driven ecosystem.
+
+
+
-
-
-
-
-
- Tab to Autocomplete
- GoodGo predicts your next edit, so you can just hit tab to fly through changes.
-
-
-
-
-
- Chat with Your Codebase
- No more alt-tabbing. Get answers to codebase-wide questions strictly from your editor.
-
-
-
-
-
- Privacy First
- Your code never leaves your machine unless you explicitly choose to use cloud AI models.
-
-
-
-
+
+ Hero Image Placeholder
+
+
+
+
+
+
+ Trusted by 500+ Innovative Companies
+
+
+ ACME Corp
+ GlobalTech
+ Nebula
+ Vertex
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AI & Blockchain Core
+
+ Decentralized security meets machine learning. Our core infrastructure ensures immutable data integrity while automating complex decision-making processes.
+
+
Learn more →
+
+
+
+
+
+
+
+
+
Data-Driven Marketing
+
+ Maximize ROI with predictive analytics. Transform raw data into actionable insights to target the right audience at the perfect moment.
+
+
Learn more →
+
+
+
+
+
+
+
+
+
Next-Gen Rewards
+
+ Elevate customer retention with a seamless digital loyalty ecosystem. Instant redemption, gamified tiers, and personalized rewards.
+
+
Learn more →
+
+
+
+
+
+
+
+
+
Multi-Industry POS
+
+ Unified commerce for retail and services. Manage inventory, sales, and staff across multiple locations from a single cloud dashboard.
+
+
Learn more →
+
+
+
+
+
+
-
diff --git a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
index 2bf5ef22..fe3f4655 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
+++ b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
@@ -1,55 +1,43 @@
/* ═══════════════════════════════════════════════════════════════════════════════
- WebClientBase Design System
- EN: GoodGo branding with Dark/Light mode support
- VI: GoodGo branding với hỗ trợ Dark/Light mode
+ WebClientBase Design System - Enterprise B2B
+ Architecture: Primitives -> Semantics -> Components
═══════════════════════════════════════════════════════════════════════════════ */
-/* ═══════════════════════════════════════════════════════════════════════════════
- CSS Variables / Biến CSS
- ═══════════════════════════════════════════════════════════════════════════════ */
:root {
- /* Light Mode Colors */
- --bg-primary: #f7f7f4;
- --bg-secondary: #ffffff;
- --bg-tertiary: #f0f0f0;
- --bg-elevated: #ffffff;
+ /* ═════════════════════════════════════════════════════════════════════════
+ 1. PRIMITIVES (Raw Color Palettes)
+ Do NOT use these directly in components. Use Semantic Tokens instead.
+ ═════════════════════════════════════════════════════════════════════════ */
- --text-primary: #18181b;
- --text-secondary: #52525b;
- --text-tertiary: #a1a1aa;
+ /* Neutral (Zinc) */
+ --primitive-neutral-0: #ffffff;
+ --primitive-neutral-50: #fafafa;
+ --primitive-neutral-100: #f4f4f5;
+ --primitive-neutral-200: #e4e4e7;
+ --primitive-neutral-300: #d4d4d8;
+ --primitive-neutral-400: #a1a1aa;
+ --primitive-neutral-500: #71717a;
+ --primitive-neutral-600: #52525b;
+ --primitive-neutral-700: #3f3f46;
+ --primitive-neutral-800: #27272a;
+ --primitive-neutral-900: #18181b;
+ --primitive-neutral-950: #09090b;
- --accent-primary: #18181b;
- --accent-primary-hover: #000000;
- --accent-success: #10b981;
- --accent-warning: #f59e0b;
- --accent-error: #ef4444;
+ /* Brand (Blue/Indigo based for Enterprise Trust) */
+ --primitive-brand-500: #18181b;
+ /* Using Black as luxury/premium brand */
+ --primitive-brand-600: #000000;
- --border-default: #e4e4e7;
- --border-strong: #d4d4d8;
-
- /* Glass Effects */
- --glass-bg: rgba(255, 255, 255, 0.8);
- --glass-border: rgba(0, 0, 0, 0.05);
- --glass-blur: 12px;
- --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
- /* Brand */
- --brand-gradient: #18181b;
- /* Solid black for light mode */
+ /* Utility */
+ --primitive-white: #ffffff;
+ --primitive-black: #000000;
+ --primitive-overlay: rgba(0, 0, 0, 0.4);
/* Typography */
- --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
- --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+ --font-heading: 'Inter', system-ui, sans-serif;
+ --font-body: 'Inter', system-ui, sans-serif;
- --text-xs: 0.75rem;
- --text-sm: 0.875rem;
- --text-base: 1rem;
- --text-lg: 1.125rem;
- --text-xl: 1.25rem;
- --text-2xl: 1.5rem;
- --text-3xl: 1.875rem;
-
- /* Spacing */
+ /* Spacing Scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
@@ -57,533 +45,324 @@
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
+ --space-16: 4rem;
+ --space-24: 6rem;
- /* Border Radius */
- --radius-sm: 0.25rem;
- --radius-md: 0.375rem;
- --radius-lg: 0.5rem;
- --radius-xl: 0.75rem;
- --radius-full: 9999px;
+ /* ═════════════════════════════════════════════════════════════════════════
+ 2. SEMANTIC TOKENS (Light Mode Default)
+ Use these in your CSS.
+ ═════════════════════════════════════════════════════════════════════════ */
- /* Transitions */
- --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
- --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+ /* Backgrounds */
+ --bg-page: var(--primitive-neutral-50);
+ /* Main page background */
+ --bg-surface: var(--primitive-white);
+ /* Cards, Panels */
+ --bg-surface-hover: var(--primitive-neutral-50);
+ --bg-overlay: rgba(255, 255, 255, 0.9);
+ /* Glassmorphism base */
- /* Sidebar */
- --sidebar-width: 260px;
+ /* Gradients */
+ --brand-gradient: linear-gradient(135deg, #18181b 0%, #52525b 100%);
+ /* Zinc-900 to Zinc-600 */
+
+ /* Text */
+ --text-primary: var(--primitive-neutral-900);
+ /* Headings, Body */
+ --text-secondary: var(--primitive-neutral-600);
+ /* Subtitles */
+ --text-tertiary: var(--primitive-neutral-400);
+ /* Placeholders, disabled */
+ --text-inverse: var(--primitive-white);
+ /* Text on primary buttons */
+
+ /* Borders */
+ --border-subtle: var(--primitive-neutral-200);
+ --border-strong: var(--primitive-neutral-300);
+
+ /* Actions */
+ --action-primary-bg: var(--primitive-neutral-900);
+ --action-primary-bg-hover: var(--primitive-neutral-700);
+ --action-primary-text: var(--primitive-white);
+
+ --action-secondary-bg: var(--primitive-white);
+ --action-secondary-bg-hover: var(--primitive-neutral-50);
+ --action-secondary-text: var(--primitive-neutral-900);
+ --action-secondary-border: var(--primitive-neutral-200);
+
+ /* Status */
+ --border-radius-base: 4px;
+ --border-radius-lg: 8px;
+ --border-radius-xl: 12px;
}
-/* Dark Mode */
-/* Dark Mode */
+/* ═════════════════════════════════════════════════════════════════════════
+ 3. DARK MODE RE-MAPPING
+ ═════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"],
:root[data-theme="dark"] {
- --bg-primary: #09090b;
- --bg-secondary: #18181b;
- --bg-tertiary: #27272a;
- --bg-elevated: #18181b;
+ /* Backgrounds */
+ --bg-page: var(--primitive-neutral-950);
+ --bg-surface: var(--primitive-neutral-900);
+ --bg-surface-hover: var(--primitive-neutral-800);
+ --bg-overlay: rgba(9, 9, 11, 0.9);
- --text-primary: #fafafa;
- --text-secondary: #a1a1aa;
- --text-tertiary: #71717a;
+ /* Gradients */
+ --brand-gradient: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
+ /* White to Zinc-400 */
- --accent-primary: #fafafa;
- --accent-primary-hover: #ffffff;
+ /* Text */
+ --text-primary: var(--primitive-neutral-50);
+ --text-secondary: var(--primitive-neutral-400);
+ --text-tertiary: var(--primitive-neutral-600);
+ --text-inverse: var(--primitive-neutral-950);
- --border-default: #27272a;
- --border-strong: #3f3f46;
+ /* Borders */
+ --border-subtle: var(--primitive-neutral-800);
+ --border-strong: var(--primitive-neutral-700);
- --glass-bg: rgba(24, 24, 27, 0.8);
- --glass-border: rgba(255, 255, 255, 0.1);
- --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+ /* Actions */
+ --action-primary-bg: var(--primitive-neutral-50);
+ --action-primary-bg-hover: var(--primitive-neutral-200);
+ --action-primary-text: var(--primitive-neutral-950);
- --brand-gradient: #fafafa;
- /* Solid white for dark mode */
-}
-
-/* Fix for MudButton Filled Primary in Dark Mode (White/White -> White/Black) */
-[data-theme="dark"] .mud-button-filled-primary {
- color: #18181b !important;
-}
-
-/* MudBlazor Overrides for Monochrome Nav */
-.mud-nav-link {
- border-radius: var(--radius-md) !important;
- transition: all var(--transition-fast) !important;
- color: var(--text-secondary) !important;
-}
-
-.mud-nav-link:hover {
- background-color: var(--bg-tertiary) !important;
- color: var(--text-primary) !important;
-}
-
-.mud-nav-link.active {
- background-color: var(--accent-primary) !important;
- color: var(--bg-primary) !important;
- /* Invert text color on active */
-}
-
-.mud-nav-link.active .mud-icon-root {
- color: var(--bg-primary) !important;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Base Styles
- ═══════════════════════════════════════════════════════════════════════════════ */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-html {
- font-size: 16px;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ --action-secondary-bg: var(--primitive-neutral-900);
+ --action-secondary-bg-hover: var(--primitive-neutral-800);
+ --action-secondary-text: var(--primitive-neutral-50);
+ --action-secondary-border: var(--primitive-neutral-700);
}
+/* ═════════════════════════════════════════════════════════════════════════
+ 4. GLOBAL RESET & BASE STYLES
+ ═════════════════════════════════════════════════════════════════════════ */
+html,
body {
- font-family: var(--font-sans);
- background: var(--bg-primary) !important;
- color: var(--text-primary) !important;
margin: 0;
padding: 0;
- line-height: 1.5;
- transition: background-color var(--transition-normal), color var(--transition-normal);
+ font-family: var(--font-body);
+ background-color: var(--bg-page) !important;
+ color: var(--text-primary) !important;
+ transition: background-color 0.3s ease, color 0.3s ease;
+ line-height: 1.6;
}
-/* ═══════════════════════════════════════════════════════════════════════════════
- Layout
- ═══════════════════════════════════════════════════════════════════════════════ */
-.page {
- display: flex;
- min-height: 100vh;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: var(--font-heading);
+ color: var(--text-primary);
+ margin-top: 0;
}
-.sidebar {
- width: var(--sidebar-width);
- background: var(--bg-secondary);
- border-right: 1px solid var(--border-default);
+/* ═════════════════════════════════════════════════════════════════════════
+ 5. COMPONENT UTILITIES
+ ═════════════════════════════════════════════════════════════════════════ */
+
+/* Unified Navigation Overlay */
+.nav-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: var(--bg-overlay);
+ backdrop-filter: blur(16px);
+ z-index: 2000;
display: flex;
flex-direction: column;
-}
-
-main {
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-.top-row {
- background: var(--bg-elevated);
- border-bottom: 1px solid var(--border-default);
- padding: var(--space-4);
- display: flex;
- justify-content: flex-end;
+ justify-content: center;
align-items: center;
- gap: var(--space-4);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s ease;
}
-.content {
- flex: 1;
- padding: var(--space-6);
- overflow-y: auto;
+.nav-overlay.open {
+ opacity: 1;
+ pointer-events: auto;
}
-.container {
+.nav-overlay-link {
+ font-size: var(--text-3xl);
+ /* Large, legible type */
+ font-weight: 500;
+ color: var(--text-primary);
+ text-decoration: none;
+ margin: var(--space-4) 0;
+ transition: color 0.2s ease;
+}
+
+.nav-overlay-link:hover {
+ color: var(--text-secondary);
+}
+
+/* Hero Section */
+.hero-section {
+ padding: var(--space-24) var(--space-6);
+ text-align: center;
max-width: 1200px;
margin: 0 auto;
}
-/* ═══════════════════════════════════════════════════════════════════════════════
- Navigation
- ═══════════════════════════════════════════════════════════════════════════════ */
-.nav-brand {
- padding: var(--space-6) var(--space-4);
- font-size: var(--text-xl);
- font-weight: 700;
- background: var(--brand-gradient);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.nav-menu {
- padding: var(--space-4);
-}
-
-.nav-link {
- display: flex;
- align-items: center;
- gap: var(--space-3);
- padding: var(--space-3) var(--space-4);
- color: var(--text-secondary);
- text-decoration: none;
- border-radius: var(--radius-lg);
- transition: all var(--transition-fast);
-}
-
-.nav-link:hover {
- background: var(--bg-tertiary);
- color: var(--text-primary);
-}
-
-.nav-link.active {
- background: var(--accent-primary);
- color: white;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Glass Card
- ═══════════════════════════════════════════════════════════════════════════════ */
-.glass-card {
- background: var(--glass-bg);
- backdrop-filter: blur(var(--glass-blur));
- -webkit-backdrop-filter: blur(var(--glass-blur));
- border: 1px solid var(--glass-border);
- border-radius: var(--radius-xl);
- padding: var(--space-6);
- box-shadow: var(--glass-shadow);
+.hero-headline {
+ font-size: 3.5rem;
+ font-weight: 800;
+ line-height: 1.1;
margin-bottom: var(--space-6);
+ letter-spacing: -0.02em;
}
-.glass-card h2 {
- margin: 0 0 var(--space-4);
- font-size: var(--text-xl);
- font-weight: 600;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Forms
- ═══════════════════════════════════════════════════════════════════════════════ */
-.form-group {
- margin-bottom: var(--space-4);
-}
-
-.form-group label {
- display: block;
- margin-bottom: var(--space-2);
- font-size: var(--text-sm);
- font-weight: 500;
+.hero-subtext {
+ font-size: 1.25rem;
color: var(--text-secondary);
+ max-width: 700px;
+ margin: 0 auto var(--space-8);
}
-.form-input {
- width: 100%;
- padding: var(--space-3) var(--space-4);
- font-size: var(--text-base);
- font-family: var(--font-sans);
- background: var(--bg-primary);
- border: 1px solid var(--border-default);
- border-radius: var(--radius-md);
- color: var(--text-primary);
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.form-input:focus {
- outline: none;
- border-color: var(--accent-primary);
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-}
-
-.form-input::placeholder {
- color: var(--text-tertiary);
-}
-
-.form-input.invalid,
-.form-input:invalid {
- border-color: var(--accent-error);
-}
-
-.form-row {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
+.hero-actions {
+ display: flex;
gap: var(--space-4);
+ justify-content: center;
+ margin-bottom: var(--space-12);
}
-.form-hint {
- display: block;
- margin-top: var(--space-1);
- font-size: var(--text-xs);
- color: var(--text-tertiary);
+/* Buttons */
+.btn-enterprise-primary {
+ background-color: var(--action-primary-bg);
+ color: var(--action-primary-text);
+ padding: var(--space-3) var(--space-8);
+ border-radius: var(--border-radius-base);
+ font-weight: 600;
+ text-decoration: none;
+ border: none;
+ transition: background-color 0.2s;
+ cursor: pointer;
}
-.form-actions {
+.btn-enterprise-primary:hover {
+ background-color: var(--action-primary-bg-hover);
+}
+
+.btn-enterprise-secondary {
+ background-color: var(--action-secondary-bg);
+ color: var(--action-secondary-text);
+ border: 1px solid var(--action-secondary-border);
+ padding: var(--space-3) var(--space-8);
+ border-radius: var(--border-radius-base);
+ font-weight: 600;
+ text-decoration: none;
+ transition: background-color 0.2s;
+ cursor: pointer;
+}
+
+.btn-enterprise-secondary:hover {
+ background-color: var(--action-secondary-bg-hover);
+}
+
+/* Image Placeholders */
+.image-placeholder {
+ background-color: var(--bg-surface);
+ border: 1px dashed var(--border-strong);
+ border-radius: var(--border-radius-xl);
display: flex;
- gap: var(--space-3);
- margin-top: var(--space-6);
-}
-
-.checkbox-group {
- display: flex;
- align-items: center;
- gap: var(--space-2);
-}
-
-.checkbox-group label {
- margin: 0;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Buttons
- ═══════════════════════════════════════════════════════════════════════════════ */
-.btn {
- display: inline-flex;
align-items: center;
justify-content: center;
- gap: var(--space-2);
- padding: var(--space-3) var(--space-6);
- font-size: var(--text-base);
- font-weight: 500;
- font-family: var(--font-sans);
- border: none;
- border-radius: var(--radius-md);
- cursor: pointer;
- transition: all var(--transition-fast);
+ color: var(--text-tertiary);
+ font-size: 0.875rem;
+ overflow: hidden;
+ position: relative;
}
-.btn:disabled {
- opacity: 0.6;
- cursor: not-allowed;
-}
-
-.btn-primary {
- background: var(--brand-gradient);
- color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
- transform: translateY(-1px);
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-}
-
-.btn-secondary {
- background: var(--bg-tertiary);
- color: var(--text-primary);
-}
-
-.btn-secondary:hover:not(:disabled) {
- background: var(--bg-secondary);
-}
-
-.btn-full {
+.hero-image-placeholder {
width: 100%;
+ height: 500px;
+ /* Large banner */
+ margin-top: var(--space-8);
}
-/* ═══════════════════════════════════════════════════════════════════════════════
- Validation
- ═══════════════════════════════════════════════════════════════════════════════ */
-.validation-summary {
- background: rgba(239, 68, 68, 0.1);
- border: 1px solid var(--accent-error);
- border-radius: var(--radius-md);
- padding: var(--space-4);
+.service-icon-placeholder {
+ width: 64px;
+ height: 64px;
margin-bottom: var(--space-4);
- color: var(--accent-error);
+ border-radius: var(--border-radius-lg);
+ background-color: var(--bg-surface-hover);
}
-.validation-summary ul {
- margin: 0;
- padding-left: var(--space-4);
-}
-
-.validation-message {
- display: block;
- margin-top: var(--space-1);
- font-size: var(--text-xs);
- color: var(--accent-error);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Alerts
- ═══════════════════════════════════════════════════════════════════════════════ */
-.alert {
- padding: var(--space-4);
- border-radius: var(--radius-md);
- margin-top: var(--space-4);
-}
-
-.alert-success {
- background: rgba(34, 197, 94, 0.1);
- border: 1px solid var(--accent-success);
- color: var(--accent-success);
-}
-
-.alert-error {
- background: rgba(239, 68, 68, 0.1);
- border: 1px solid var(--accent-error);
- color: var(--accent-error);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Product Grid
- ═══════════════════════════════════════════════════════════════════════════════ */
-.product-grid {
+/* Solutions Grid */
+.solutions-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
- gap: var(--space-4);
+ grid-template-columns: repeat(1, 1fr);
+ /* Mobile First */
+ gap: var(--space-8);
+ max-width: 1200px;
+ margin: var(--space-16) auto;
+ padding: 0 var(--space-6);
}
-.product-card {
- background: var(--bg-elevated);
- border: 1px solid var(--border-default);
- border-radius: var(--radius-lg);
- padding: var(--space-4);
- transition: all var(--transition-fast);
+@media (min-width: 768px) {
+ .solutions-grid {
+ grid-template-columns: repeat(2, 1fr);
+ /* 2x2 on Tablet/Desktop */
+ }
}
-.product-card:hover {
+.solution-card {
+ background-color: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ padding: var(--space-8);
+ border-radius: var(--border-radius-xl);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.solution-card:hover {
transform: translateY(-2px);
- box-shadow: var(--glass-shadow);
+ border-color: var(--border-strong);
+ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
-.product-card h3 {
- margin: 0 0 var(--space-2);
- font-size: var(--text-lg);
-}
-
-.product-card .description {
- color: var(--text-secondary);
- font-size: var(--text-sm);
+.solution-title {
+ font-size: 1.5rem;
+ font-weight: 700;
margin-bottom: var(--space-3);
}
-.product-details {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.product-details .price {
- font-weight: 600;
- color: var(--accent-primary);
-}
-
-.product-details .quantity {
- font-size: var(--text-sm);
- color: var(--text-tertiary);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Auth
- ═══════════════════════════════════════════════════════════════════════════════ */
-.auth-container {
- max-width: 400px;
- margin: var(--space-12) auto;
-}
-
-.auth-tabs {
- display: flex;
- gap: var(--space-2);
- margin-bottom: var(--space-4);
-}
-
-.tab-btn {
- flex: 1;
- padding: var(--space-3);
- font-size: var(--text-base);
- font-weight: 500;
- background: var(--bg-tertiary);
- border: none;
- border-radius: var(--radius-md);
- color: var(--text-secondary);
- cursor: pointer;
- transition: all var(--transition-fast);
-}
-
-.tab-btn.active {
- background: var(--accent-primary);
- color: white;
-}
-
-.auth-card .subtitle {
+.solution-desc {
color: var(--text-secondary);
margin-bottom: var(--space-6);
}
-/* ═══════════════════════════════════════════════════════════════════════════════
- Page Title
- ═══════════════════════════════════════════════════════════════════════════════ */
-.page-title {
- font-size: var(--text-2xl);
- font-weight: 700;
- margin-bottom: var(--space-6);
- background: var(--brand-gradient);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Theme Toggle
- ═══════════════════════════════════════════════════════════════════════════════ */
-.theme-toggle {
- padding: var(--space-2) var(--space-3);
- background: var(--bg-tertiary);
- border: 1px solid var(--border-default);
- border-radius: var(--radius-full);
- color: var(--text-primary);
- cursor: pointer;
- transition: all var(--transition-fast);
-}
-
-.theme-toggle:hover {
- background: var(--bg-secondary);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════════
- Loading & States
- ═══════════════════════════════════════════════════════════════════════════════ */
-.loading {
+/* Trust Section */
+.trust-section {
+ padding: var(--space-16) 0;
+ border-top: 1px solid var(--border-subtle);
text-align: center;
- color: var(--text-secondary);
- padding: var(--space-8);
}
-.empty-state {
- text-align: center;
+.trust-label {
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
color: var(--text-tertiary);
- padding: var(--space-8);
+ margin-bottom: var(--space-8);
}
-.spinner {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- border: 2px solid currentColor;
- border-right-color: transparent;
- border-radius: 50%;
- animation: spin 0.75s linear infinite;
+/* MudBlazor Overrides for Dark Mode Button Text */
+[data-theme="dark"] .mud-button-filled-primary {
+ color: var(--action-primary-text) !important;
}
-@keyframes spin {
- to {
- transform: rotate(360deg);
- }
+/* Hardened Overrides for Dark Mode Text Visibility */
+[data-theme="dark"] .nav-overlay-link {
+ color: var(--primitive-neutral-50) !important;
+ /* Force White */
}
-/* ═══════════════════════════════════════════════════════════════════════════════
- Responsive
- ═══════════════════════════════════════════════════════════════════════════════ */
-@media (max-width: 768px) {
- .sidebar {
- position: fixed;
- left: -100%;
- top: 0;
- bottom: 0;
- z-index: 100;
- transition: left var(--transition-normal);
- }
-
- .sidebar.open {
- left: 0;
- }
-
- .form-row {
- grid-template-columns: 1fr;
- }
-
- .content {
- padding: var(--space-4);
- }
+[data-theme="dark"] .btn-enterprise-secondary {
+ background-color: var(--primitive-neutral-900) !important;
+ color: var(--primitive-neutral-50) !important;
+ /* Force White */
+ border-color: var(--primitive-neutral-700) !important;
}
\ No newline at end of file