/* DOMOTZ DESIGN SYSTEM — STANDALONE CSS TOKENS ============================================== Drop this file into any PHP/Twig project to get the full Domotz "Modern Authority" theme. Usage in Twig base layout: Then use CSS variables throughout your templates: background-color: hsl(var(--background)); color: hsl(var(--foreground)); Dark mode: Add class="dark" to or Light mode: Add class="light" to or Default (no class) = dark mode ENTERPRISE NEON RULES: - Neon only on interactive elements (buttons, links, icons) - No neon paragraph text - Glow effects at 5–10% opacity max - Gradients (Blue → Cyan) reserved for hero sections only */ /* ============================================ FONTS ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); /* ============================================ CSS CUSTOM PROPERTIES — DARK MODE (default) ============================================ */ :root { /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Core Background — Near-Black #070A13 */ --background: 220 33% 5%; --foreground: 210 40% 98%; /* Cards — Slightly elevated from background */ --card: 217 33% 8%; --card-foreground: 210 40% 98%; /* Popovers */ --popover: 217 33% 10%; --popover-foreground: 210 40% 98%; /* Primary — Electric Blue #2563EB (trust anchors: buttons, headlines) */ --primary: 217 91% 60%; --primary-foreground: 0 0% 100%; /* Secondary — Elevated dark surface */ --secondary: 217 33% 12%; --secondary-foreground: 210 40% 98%; /* Muted — Fog Gray (WCAG AA 4.5:1 minimum) */ --muted: 217 33% 15%; --muted-foreground: 215 20% 75%; /* Accent — Neon Cyan #38F9FF (interactive glow edges, micro-animations) */ --accent: 182 100% 61%; --accent-foreground: 220 33% 5%; /* Destructive */ --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; /* UI Elements — Divider Lines #1F2937 */ --border: 217 33% 17%; --input: 217 33% 17%; --ring: 217 91% 60%; --radius: 0.5rem; /* Extended Slate Palette */ --slate-50: 210 40% 98%; --slate-100: 214 32% 91%; --slate-200: 213 27% 84%; --slate-300: 215 25% 70%; --slate-400: 215 20% 55%; --slate-500: 217 19% 45%; --slate-600: 217 28% 35%; --slate-700: 217 33% 25%; --slate-800: 217 33% 17%; --slate-900: 220 33% 5%; /* Primary Blue Scale (aliased as "coral" in config) */ --blue-50: 217 100% 97%; --blue-100: 217 100% 92%; --blue-200: 217 95% 80%; --blue-300: 217 93% 70%; --blue-400: 217 91% 60%; --blue-500: 217 89% 52%; --blue-600: 217 85% 45%; --blue-700: 217 80% 38%; /* Status Colors */ --success: 150 80% 45%; --success-foreground: 220 33% 5%; --info: 182 100% 61%; --info-foreground: 220 33% 5%; /* Gradients — Blue → Cyan for hero sections ONLY */ --gradient-hero: linear-gradient(90deg, hsl(217 91% 60%) 0%, hsl(182 100% 61%) 100%); --gradient-card: linear-gradient(180deg, hsl(217 33% 10%) 0%, hsl(217 33% 8%) 100%); --gradient-accent: linear-gradient(90deg, hsl(217 91% 60%) 0%, hsl(182 100% 61%) 100%); --gradient-subtle: linear-gradient(180deg, hsl(217 33% 8%) 0%, hsl(220 33% 5%) 100%); /* Shadows — Glow effects at 5–10% opacity max (enterprise rule) */ --shadow-sm: 0 1px 2px 0 hsl(220 33% 0% / 0.3); --shadow-md: 0 4px 6px -1px hsl(220 33% 0% / 0.4), 0 2px 4px -2px hsl(220 33% 0% / 0.3); --shadow-lg: 0 10px 15px -3px hsl(220 33% 0% / 0.5), 0 4px 6px -4px hsl(220 33% 0% / 0.4); --shadow-xl: 0 20px 25px -5px hsl(220 33% 0% / 0.5), 0 8px 10px -6px hsl(220 33% 0% / 0.4); --shadow-glow: 0 0 40px hsl(182 100% 61% / 0.08); --shadow-glow-primary: 0 0 30px hsl(217 91% 60% / 0.10); } /* ============================================ LIGHT MODE ============================================ */ .light { --background: 210 40% 98%; --foreground: 220 33% 10%; --card: 0 0% 100%; --card-foreground: 220 33% 10%; --popover: 0 0% 100%; --popover-foreground: 220 33% 10%; --primary: 217 91% 50%; --primary-foreground: 0 0% 100%; --secondary: 214 32% 91%; --secondary-foreground: 220 33% 10%; --muted: 214 32% 91%; --muted-foreground: 215 25% 35%; --accent: 182 80% 40%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 50%; --destructive-foreground: 0 0% 100%; --border: 214 32% 85%; --input: 214 32% 85%; --ring: 217 91% 50%; --shadow-sm: 0 1px 2px 0 hsl(220 33% 0% / 0.05); --shadow-md: 0 4px 6px -1px hsl(220 33% 0% / 0.08), 0 2px 4px -2px hsl(220 33% 0% / 0.05); --shadow-lg: 0 10px 15px -3px hsl(220 33% 0% / 0.08), 0 4px 6px -4px hsl(220 33% 0% / 0.05); --shadow-xl: 0 20px 25px -5px hsl(220 33% 0% / 0.10), 0 8px 10px -6px hsl(220 33% 0% / 0.05); --shadow-glow: 0 0 40px hsl(217 91% 50% / 0.08); --shadow-glow-primary: 0 0 30px hsl(217 91% 50% / 0.10); --gradient-hero: linear-gradient(90deg, hsl(217 91% 50%) 0%, hsl(182 80% 40%) 100%); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(214 32% 97%) 100%); --gradient-accent: linear-gradient(90deg, hsl(217 91% 50%) 0%, hsl(182 80% 40%) 100%); --gradient-subtle: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 40% 98%) 100%); } /* ============================================ EXPLICIT DARK MODE (same as :root) ============================================ */ .dark { --background: 222 35% 4%; --foreground: 210 40% 98%; --card: 217 33% 7%; --card-foreground: 210 40% 98%; --popover: 217 33% 9%; --popover-foreground: 210 40% 98%; --primary: 217 91% 62%; --primary-foreground: 0 0% 100%; --secondary: 217 33% 11%; --secondary-foreground: 210 40% 98%; --muted: 217 33% 13%; --muted-foreground: 215 20% 75%; --accent: 182 100% 63%; --accent-foreground: 220 33% 5%; --destructive: 0 84% 55%; --destructive-foreground: 0 0% 100%; --border: 217 33% 15%; --input: 217 33% 15%; --ring: 217 91% 62%; } /* ============================================ BASE STYLES ============================================ */ *, *::before, *::after { border-color: hsl(var(--border)); box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; margin: 0; padding: 0; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; color: hsl(var(--foreground)); line-height: 1.2; } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); } h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); } h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); } h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); } p { line-height: 1.75; } a { color: hsl(var(--accent)); text-decoration: none; transition: color 0.2s ease; } a:hover { color: hsl(var(--primary)); } /* ============================================ LAYOUT UTILITIES ============================================ */ .dz-container { max-width: 80rem; /* 1280px */ margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .dz-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .dz-container { padding-left: 2rem; padding-right: 2rem; } } .dz-section { padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 768px) { .dz-section { padding-top: 6rem; padding-bottom: 6rem; } } @media (min-width: 1024px) { .dz-section { padding-top: 8rem; padding-bottom: 8rem; } } /* ============================================ COMPONENT CLASSES ============================================ */ /* --- Buttons --- */ .dz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; font-family: var(--font-sans); transition: all 0.2s ease; cursor: pointer; border: none; padding: 0.625rem 1.25rem; height: 2.5rem; text-decoration: none; } .dz-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); } .dz-btn:disabled { pointer-events: none; opacity: 0.5; } /* Primary button — Electric Blue */ .dz-btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-md); } .dz-btn-primary:hover { background-color: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)); } .dz-btn-primary:active { transform: scale(0.98); } /* CTA button — Electric Blue with subtle cyan glow */ .dz-btn-cta { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-lg), 0 0 20px hsl(var(--primary) / 0.1); } .dz-btn-cta:hover { box-shadow: var(--shadow-xl), 0 0 30px hsl(var(--accent) / 0.08); transform: translateY(-2px); color: hsl(var(--primary-foreground)); } .dz-btn-cta:active { transform: translateY(0); box-shadow: var(--shadow-md); } /* Hero button — Larger with gradient glow */ .dz-btn-hero { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-xl), 0 0 30px hsl(var(--primary) / 0.1); font-size: 1rem; padding: 0.875rem 2rem; height: 3.5rem; border-radius: 0.75rem; } .dz-btn-hero:hover { box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.25), 0 0 40px hsl(var(--accent) / 0.1); transform: translateY(-4px); color: hsl(var(--primary-foreground)); } /* Outline button */ .dz-btn-outline { background-color: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); } .dz-btn-outline:hover { background-color: hsl(var(--muted)); } /* Outline accent — Cyan border */ .dz-btn-outline-accent { background-color: transparent; color: hsl(var(--accent)); border: 2px solid hsl(var(--accent)); } .dz-btn-outline-accent:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } /* Ghost button */ .dz-btn-ghost { background-color: transparent; color: hsl(var(--muted-foreground)); } .dz-btn-ghost:hover { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); } /* Size variants */ .dz-btn-sm { height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; } .dz-btn-lg { height: 3rem; padding: 0 2rem; font-size: 1rem; border-radius: 0.5rem; } .dz-btn-xl { height: 3.5rem; padding: 0 2.5rem; font-size: 1.125rem; border-radius: 0.75rem; } /* --- Cards --- */ .dz-card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; box-shadow: var(--shadow-sm); } .dz-card-hover { transition: all 0.3s ease-out; } .dz-card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .dz-card-header { padding: 1.5rem; } .dz-card-content { padding: 0 1.5rem 1.5rem; } .dz-card-footer { padding: 0 1.5rem 1.5rem; display: flex; align-items: center; } .dz-card-title { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.025em; } .dz-card-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* --- Badge --- */ .dz-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; line-height: 1; } .dz-badge-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .dz-badge-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .dz-badge-accent { background-color: hsl(var(--accent) / 0.15); color: hsl(var(--accent)); } /* --- Text Utilities --- */ .dz-text-gradient { background-image: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .dz-text-muted { color: hsl(var(--muted-foreground)); } .dz-text-accent { color: hsl(var(--accent)); } .dz-text-primary { color: hsl(var(--primary)); } /* --- Navigation Bar --- */ .dz-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; transition: all 0.3s ease; } .dz-nav-scrolled { background-color: hsl(var(--background) / 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); box-shadow: var(--shadow-sm); } .dz-nav-link { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); border-radius: 0.5rem; transition: all 0.2s ease; text-decoration: none; } .dz-nav-link:hover { color: hsl(var(--foreground)); background-color: hsl(var(--muted) / 0.5); } /* --- Dropdown --- */ .dz-dropdown { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; box-shadow: var(--shadow-xl); padding: 0.5rem; min-width: 280px; } .dz-dropdown-item { display: block; padding: 0.75rem; border-radius: 0.5rem; transition: background-color 0.2s ease; text-decoration: none; color: inherit; } .dz-dropdown-item:hover { background-color: hsl(var(--muted)); } .dz-dropdown-item-title { font-weight: 500; color: hsl(var(--foreground)); } .dz-dropdown-item-desc { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.125rem; } /* --- Footer --- */ .dz-footer { background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); } .dz-footer-heading { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--foreground)); margin-bottom: 1rem; } .dz-footer-link { font-size: 0.875rem; color: hsl(var(--muted-foreground)); transition: color 0.2s ease; text-decoration: none; } .dz-footer-link:hover { color: hsl(var(--accent)); } /* --- Animated Underline Link --- */ .dz-link-underline { position: relative; } .dz-link-underline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: hsl(var(--accent)); transition: width 0.3s ease; } .dz-link-underline:hover::after { width: 100%; } /* ============================================ ANIMATIONS ============================================ */ @keyframes dz-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes dz-fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes dz-fade-in-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes dz-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .dz-animate-fade-in { animation: dz-fade-in 0.6s ease-out forwards; } .dz-animate-fade-in-up { animation: dz-fade-in-up 0.6s ease-out forwards; } .dz-animate-fade-in-down { animation: dz-fade-in-down 0.6s ease-out forwards; } .dz-animate-scale-in { animation: dz-scale-in 0.4s ease-out forwards; } .dz-delay-100 { animation-delay: 100ms; } .dz-delay-200 { animation-delay: 200ms; } .dz-delay-300 { animation-delay: 300ms; } .dz-delay-400 { animation-delay: 400ms; } /* ============================================ ACCESSIBILITY ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .dz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus ring — WCAG 2.1 AA compliant */ .dz-focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }