/* ============================================================================= CDN CERTIFIED - Brand CSS Variables All design tokens defined here. No hardcoded values in templates. Light mode = default, Dark mode = .dark class on ============================================================================= */ /* ----------------------------------------------------------------------------- Color Palette ----------------------------------------------------------------------------- */ :root { /* Brand Colors */ --color-brand: #202729; --color-brand-light: #2a3235; --color-brand-lighter: #3a4548; /* Primary (sky blue - trust, technology) */ --color-primary-50: #f0f9ff; --color-primary-100: #e0f2fe; --color-primary-200: #bae6fd; --color-primary-300: #7dd3fc; --color-primary-400: #38bdf8; --color-primary-500: #0ea5e9; --color-primary-600: #0284c7; --color-primary-700: #0369a1; --color-primary-800: #075985; --color-primary-900: #0c4a6e; --color-primary: var(--color-primary-600); /* Accent (teal - energy, speed) */ --color-accent-50: #f0fdfa; --color-accent-100: #ccfbf1; --color-accent-200: #99f6e4; --color-accent-300: #5eead4; --color-accent-400: #2dd4bf; --color-accent-500: #14b8a6; --color-accent-600: #0d9488; --color-accent-700: #0f766e; --color-accent-800: #115e59; --color-accent-900: #134e4a; --color-accent: var(--color-accent-500); /* Neutral (slate gray) */ --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; --color-neutral-950: #020617; /* Semantic Colors */ --color-success-50: #f0fdf4; --color-success-100: #dcfce7; --color-success-500: #22c55e; --color-success-600: #16a34a; --color-success-700: #15803d; --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-200: #fde68a; --color-warning-300: #fcd34d; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; --color-warning-800: #92400e; --color-warning-900: #78350f; --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-200: #fecaca; --color-error-300: #fca5a5; --color-error-500: #ef4444; --color-error-600: #dc2626; --color-error-700: #b91c1c; --color-error-800: #991b1b; --color-error-900: #7f1d1d; --color-info-50: #eff6ff; --color-info-100: #dbeafe; --color-info-500: #3b82f6; --color-info-600: #2563eb; --color-info-700: #1d4ed8; /* ----------------------------------------------------------------------------- Light Mode Theme (Default) ----------------------------------------------------------------------------- */ /* Backgrounds */ --bg-body: #ffffff; --bg-surface: var(--color-neutral-50); --bg-surface-raised: #ffffff; --bg-surface-overlay: #ffffff; --bg-muted: var(--color-neutral-100); --bg-emphasis: var(--color-neutral-200); /* Foreground (Text) */ --text-body: var(--color-neutral-900); --text-heading: var(--color-neutral-950); --text-muted: var(--color-neutral-600); --text-subtle: var(--color-neutral-500); --text-emphasis: var(--color-neutral-950); --text-on-primary: #ffffff; --text-on-accent: #ffffff; --text-link: var(--color-primary-600); --text-link-hover: var(--color-primary-700); /* Borders */ --border-default: var(--color-neutral-200); --border-muted: var(--color-neutral-100); --border-emphasis: var(--color-neutral-300); --border-focus: var(--color-primary-500); /* Interactive States */ --interactive-hover: var(--color-neutral-100); --interactive-active: var(--color-neutral-200); --interactive-focus: var(--color-primary-500); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --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); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* Color scheme for browser UI */ color-scheme: light; } /* ----------------------------------------------------------------------------- Dark Mode Theme Activated via .dark class on element ----------------------------------------------------------------------------- */ .dark { /* Backgrounds */ --bg-body: var(--color-brand); --bg-surface: var(--color-brand-light); --bg-surface-raised: var(--color-brand-lighter); --bg-surface-overlay: var(--color-neutral-800); --bg-muted: var(--color-neutral-800); --bg-emphasis: var(--color-neutral-700); /* Foreground (Text) */ --text-body: var(--color-neutral-100); --text-heading: #ffffff; --text-muted: var(--color-neutral-400); --text-subtle: var(--color-neutral-500); --text-emphasis: #ffffff; --text-link: var(--color-primary-400); --text-link-hover: var(--color-primary-300); /* Borders */ --border-default: var(--color-neutral-700); --border-muted: var(--color-neutral-800); --border-emphasis: var(--color-neutral-600); /* Interactive States */ --interactive-hover: var(--color-neutral-700); --interactive-active: var(--color-neutral-600); /* Shadows (more subtle in dark mode) */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); /* Semantic Colors - slightly brighter for dark mode */ --color-success-500: #4ade80; --color-warning-500: #fbbf24; --color-error-500: #f87171; --color-info-500: #60a5fa; color-scheme: dark; } /* ----------------------------------------------------------------------------- Typography ----------------------------------------------------------------------------- */ :root { /* Font Families */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-heading: var(--font-sans); --font-body: var(--font-sans); --font-code: var(--font-mono); /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; } /* ----------------------------------------------------------------------------- Spacing Scale ----------------------------------------------------------------------------- */ :root { --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ } /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ :root { /* Container widths */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* Content constraints */ --content-width: 65ch; --prose-width: 75ch; /* Component dimensions */ --header-height: 64px; --sidebar-width: 280px; --footer-height: auto; } /* ----------------------------------------------------------------------------- Border Radius ----------------------------------------------------------------------------- */ :root { --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; } /* ----------------------------------------------------------------------------- Transitions ----------------------------------------------------------------------------- */ :root { /* Durations */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; /* Easing functions */ --ease-linear: linear; --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); /* Common transitions */ --transition-colors: color var(--duration-150) var(--ease-in-out), background-color var(--duration-150) var(--ease-in-out), border-color var(--duration-150) var(--ease-in-out); --transition-opacity: opacity var(--duration-150) var(--ease-in-out); --transition-transform: transform var(--duration-200) var(--ease-out); --transition-all: all var(--duration-200) var(--ease-in-out); } /* ----------------------------------------------------------------------------- Z-Index Scale ----------------------------------------------------------------------------- */ :root { --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-modal-backdrop: 1300; --z-modal: 1400; --z-popover: 1500; --z-tooltip: 1600; --z-toast: 1700; } /* ----------------------------------------------------------------------------- Base Styles ----------------------------------------------------------------------------- */ /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Focus visible for accessibility */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Remove focus outline when not using keyboard */ :focus:not(:focus-visible) { outline: none; } /* Typography defaults */ body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); background-color: var(--bg-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-semibold); line-height: var(--leading-tight); color: var(--text-heading); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } /* Code */ code, pre, kbd, samp { font-family: var(--font-code); } code { font-size: 0.875em; padding: 0.125em 0.375em; background-color: var(--bg-muted); border-radius: var(--radius-md); } pre { overflow-x: auto; padding: var(--space-4); background-color: var(--color-neutral-900); border-radius: var(--radius-lg); } pre code { padding: 0; background: none; font-size: var(--text-sm); } .dark pre { background-color: var(--color-neutral-950); } /* Links */ a { color: var(--text-link); text-decoration: none; transition: var(--transition-colors); } a:hover { color: var(--text-link-hover); } /* Selection */ ::selection { background-color: var(--color-primary-200); color: var(--color-primary-900); } .dark ::selection { background-color: var(--color-primary-800); color: var(--color-primary-100); } /* ----------------------------------------------------------------------------- Utility Classes ----------------------------------------------------------------------------- */ /* Text utilities */ .text-balance { text-wrap: balance; } .text-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hide scrollbar but keep functionality */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* HTMX loading states */ .htmx-request { opacity: 0.5; transition: opacity var(--duration-200) var(--ease-in-out); } .htmx-request.htmx-indicator { opacity: 1; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .skeleton { animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; background-color: var(--bg-muted); border-radius: var(--radius-md); } /* Fade animations */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in var(--duration-300) var(--ease-out); } .animate-slide-up { animation: slide-up var(--duration-300) var(--ease-out); } .animate-slide-down { animation: slide-down var(--duration-300) var(--ease-out); } /* Spin animation for loading */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* ----------------------------------------------------------------------------- Hero Section Components ----------------------------------------------------------------------------- */ /* Particle Network Canvas - absolutely positioned background */ .particle-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* Hero Stats Section */ .hero-stats { margin-top: 2.5rem; margin-bottom: 1.5rem; }