/* ================================================================================ S99 DIGITAL TRANSFORMATION - CSS CUSTOM PROPERTIES (VARIABLES) ================================================================================ Comprehensive design system variables for the S99 Digital Transformation website. These variables ensure brand consistency, maintainability, and scalable theming across all components and pages. Organization: 1. Brand Colors - Core S99 color palette 2. Text Colors - Typography color schemes 3. Notification Colors - Status and alert colors 4. Glow Effects - Ambient lighting and hover effects 5. Shadow Effects - Depth and elevation styling 6. Gradient Combinations - Complex multi-color gradients 7. Typography & Layout - Cross-platform font stacks and spacing 8. Background Systems - Quantum-themed background gradients 9. Overlay Effects - Animated quantum field overlays Author: S99 (Pty) Ltd Date: 2025 Version: 1.0 - Modular Architecture ================================================================================ */ :root { /* ============================================================================ BRAND COLOR PALETTE ============================================================================ Core S99 brand colors following the metallic tech theme. These colors represent the company's identity and should be used consistently across all branding elements, buttons, and key interface components. */ --s99-copper: #613e35; /* Primary copper - main brand color */ --s99-copper-light: #cc8877; /* Light copper - highlights and accents */ --s99-copper-dark: #28170b; /* Dark copper - depth and shadows */ --s99-silver-light: #E5E5E5; /* Light silver - clean backgrounds */ --s99-platinum: #e5e4e2; /* Platinum - premium surface color */ --s99-gray: #909090; /* Medium gray - neutral elements */ --s99-gray-blue: #b8c2d3; /* Blue-gray - subtle tech accents */ --s99-gray-beige: #d3c7b8; /* Warm gray - organic transitions */ /* ============================================================================ TECHNOLOGY ACCENT COLORS ============================================================================ High-tech accent colors for IoT interfaces, data visualization, and interactive elements. These create the futuristic aesthetic that communicates advanced technology and innovation. */ --s99-tech-glow: #00d4ff; /* Cyan glow - primary tech accent */ --s99-data-stream: #39ff14; /* Matrix green - data flow indicators */ --s99-neural-purple: #8a2be2; /* Neural purple - AI/ML connections */ --s99-tech-purple: #ff00ff; /* Magenta - high-energy accents */ --s99-tech-yellow: #eeff00; /* Electric yellow - warning/energy */ --whatsapp-green: #25D366; /* ============================================================================ TYPOGRAPHY COLORS ============================================================================ Text color schemes optimized for readability across light and dark backgrounds while maintaining brand consistency and accessibility. */ --text-light: #f5f5f5; /* Light text for dark backgrounds */ --text-dark: #242424; /* Dark text for light backgrounds */ /* ============================================================================ NOTIFICATION & STATUS COLORS ============================================================================ Semantic colors for system states, user feedback, and status indicators. These follow web accessibility guidelines for color contrast and meaning. */ --error-color: #dc3545; /* Error states and critical alerts */ --warning-color: #ffc107; /* Warning states and caution indicators */ --success-color:#00c851; /* Success alerts */ /* ============================================================================ AMBIENT GLOW EFFECTS ============================================================================ Subtle lighting effects for hover states, focus indicators, and ambient UI enhancement. Creates depth and interactivity without overwhelming content. */ --error-glow: rgba(220, 53, 69, 0.6); /* Red error state glow */ --tech-purple-glow: rgba(255, 0, 255, 0.3); /* Purple accent glow */ --tech-yellow-glow: rgba(238, 255, 0, 0.2); /* Yellow energy glow */ --tech-blue-glow: rgba(0, 213, 255, 0.3); /* Blue energy glow */ /* ============================================================================ SHADOW SYSTEMS ============================================================================ Elevation and depth effects using brand-appropriate shadow colors. Creates visual hierarchy and interactive feedback using S99 color palette. */ --bronze-shadow: 0 10px 40px rgba(97, 62, 53, 0.6); /* Deep bronze elevation */ --bronze-shadow-box: 0 4px 20px rgba(97, 62, 53, 0.3); /* Subtle bronze depth */ --neural-shadow-box: 0 20px 40px rgba(138, 43, 226, 0.2); /* Neural purple depth */ /* ============================================================================ GRADIENT COMBINATIONS ============================================================================ Complex multi-stop gradients for premium visual effects and brand consistency. These gradients are optimized for performance and visual impact. */ --gradient-whatsapp: linear-gradient(135deg, #25D366, #128C7E); --gradient-red: linear-gradient(135deg, #d90000, #f00000, #850404); --gradient-copper: linear-gradient(135deg, #613e35, #cc8877, #28170b); --gradient-neural: linear-gradient(135deg, rgba(36, 36, 36, 0.95), rgba(138, 43, 226, 0.15), rgba(57, 255, 20, 0.05), rgba(36, 36, 36, 0.95)); --gradient-tech: linear-gradient(135deg, rgba(40, 23, 11, 0.95), rgba(0, 212, 255, 0.12), rgba(57, 255, 20, 0.08), rgba(36, 36, 36, 0.95)); /* ============================================================================ TYPOGRAPHY & LAYOUT SYSTEM ============================================================================ Cross-platform font stacks and consistent spacing measurements. Ensures optimal readability and consistent layout across all devices. */ --container-max-width: 1600px; /* Maximum content width for large screens */ --footer-container-max-width: 1600px; /* Maximum content width for large screens */ --font-family-primary: Tahoma, 'Segoe UI', Helvetica, Arial, system-ui, sans-serif; --border-radius: 8px; /* Consistent corner rounding */ --transition: all 0.3s ease; /* Standard transition timing */ /* ============================================================================ QUANTUM BACKGROUND SYSTEM ============================================================================ Advanced background gradient system for creating distinct visual zones while maintaining brand cohesion. Each background serves specific UX purposes. */ --dark-bg: #242424; /* Solid dark base color */ /* Dark quantum background - hero sections and primary dark areas */ --quantum-dark-bg: linear-gradient(135deg, rgba(15, 15, 15, 0.95), rgba(36, 36, 36, 0.5), rgba(15, 15, 15, 0.95)); /* Bronze quantum background - premium accent sections and highlights */ --quantum-bronze-bg: linear-gradient(135deg, rgba(229, 228, 226, 0.08), rgba(97, 62, 53, 0.35), rgba(144, 144, 144, 0.1)); /* Light quantum background - content areas and information sections */ --quantum-light-bg: linear-gradient(135deg, #e5e4e2 0%, #E5E5E5 20%, #C0C0C0 30%, #E5E5E5 45%, #e5e4e2 60%, #C0C0C0 70%, #C0C0C0 80%, #e5e4e2 100%); /* Tech text gradient for headlines and key messaging */ --h1-tech-text: linear-gradient(45deg, #00d4ff, #8a2be2, #00d4ff); /* ============================================================================ QUANTUM FIELD OVERLAY SYSTEM ============================================================================ Animated overlay effects that complement background gradients with subtle tech-themed radial patterns. Creates depth and movement while maintaining readability and professional appearance. */ /* Dark quantum overlay - cool tech ambiance for dark backgrounds */ --quantum-dark-overlay: radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.08) 0%, transparent 50%), radial-gradient(circle at 20% 30%, rgba(57, 255, 20, 0.08) 0%, transparent 50%); /* Bronze quantum overlay - warm premium ambiance for bronze backgrounds */ --quantum-bronze-overlay: radial-gradient(ellipse 60% 40% at 45% 10%, rgba(97, 62, 53, 0.4) 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 85% 75%, rgba(204, 136, 119, 0.3) 0%, transparent 25%), radial-gradient(ellipse 80% 60% at 15% 25%, rgba(97, 62, 53, 0.4) 0%, transparent 25%), radial-gradient(ellipse 70% 50% at 75% 40%, rgba(204, 136, 119, 0.3) 0%, transparent 25%); /* Light quantum overlay - subtle enhancement for light backgrounds */ --quantum-light-overlay: radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 40%, transparent 70%), radial-gradient(ellipse at 80% 70%, rgba(138, 43, 226, 0.12) 0%, rgba(138, 43, 226, 0.04) 35%, transparent 65%), radial-gradient(circle at 50% 10%, rgba(57, 255, 20, 0.08) 0%, transparent 50%); } /* ============================================================================ QUANTUM BUTTON SYSTEM ============================================================================ Core S99 brand buttons following the metallic tech theme with advanced interactive effects and semantic styling for different use cases. BUTTON CONTAINERS: - Hero Buttons: Left-aligned for hero sections with 1.5rem spacing - CTA Buttons: Center-aligned for call-to-action sections with 2rem spacing - Both containers use flexbox with wrap for responsive behavior BUTTON VARIANTS: - Primary: Solid styling for main actions (copper/beige theme) - Secondary: Outline styling for secondary actions (tech-glow theme) INTERACTION DESIGN: - 3D hover effects with translateY and scale transforms - Custom cubic-bezier easing for premium feel - Brand-consistent glow effects using CSS box-shadow - Smooth transitions optimized for 60fps performance PRIMARY BUTTON: - Default: Gray-beige text with matching border - Hover: Elevates with copper-dark background and copper-light glow - Use for: Main CTAs, primary navigation, form submissions SECONDARY BUTTON: - Default: Transparent background with tech-glow border - Hover: Sliding background effect with platinum accents - Uses ::before pseudo-element for smooth background animation - Use for: Secondary actions, "learn more" links, alternative options TECHNICAL IMPLEMENTATION: - Hardware-accelerated transforms for smooth animations - Position relative + overflow hidden for proper pseudo-element containment - Z-index management for layered hover effects - CSS custom properties for maintainable color theming ACCESSIBILITY: - Sufficient color contrast ratios for WCAG compliance - Focus states inherit hover styling for keyboard navigation - Text transforms and letter-spacing optimized for readability RESPONSIVE BEHAVIOR: - Flex-wrap enables button stacking on smaller screens - Consistent padding maintains touch targets on mobile - Scalable animations work across device types Author: S99 (Pty) Ltd Optimized for: Desktop, tablet, and mobile interactions Last Updated: 2025 ============================================================================ */ .hero-buttons { display: flex; gap: 1.5rem; flex-wrap: wrap; } .cta-buttons { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; } /* Quantum Buttons - General Usage*/ .quantum-btn { padding: 15px 35px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; border: 2px solid var(--s99-platinum); } .quantum-btn.primary { color: var(--s99-gray-beige); border: 2px solid var(--s99-gray-beige); font-weight: 700; } .quantum-btn.primary:hover { transform: translateY(-3px) scale(1.05); color: var(--s99-platinum); background: var(--s99-copper-dark); box-shadow: 0 0 25px var(--s99-copper-light); } .quantum-btn.secondary { background: transparent; color: var(--s99-platinum); border: 2px solid var(--s99-tech-glow); } .quantum-btn.secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: transparent; transition: left 0.4s ease; z-index: -1; } .quantum-btn.secondary:hover::before { left: 0; } .quantum-btn.secondary:hover { color: var(--s99-tech-glow); transform: translateY(-3px) scale(1.05); border-color: var(--s99-platinum); box-shadow: 0 0 25px var(--s99-platinum); } /* ================================================================================ SHIMMER BUTTON SYSTEM ================================================================================ Interactive button component with animated shimmer effect for premium user experience. Uses CSS pseudo-elements and hardware acceleration for smooth performance across devices. FEATURES: - Animated shimmer sweep on hover - Brand-consistent copper/tech-glow color scheme - Hardware-accelerated animations - Consistent styling for navigation and interactive elements - Optimized for both desktop and mobile interactions USAGE: - Use