/* Data Prime Group Design System - Complete static version */ :root { /* Data Prime Core Colors - All HSL format */ --background: 220 25% 8%; --foreground: 210 40% 98%; /* Brand Colors - Based on Data Prime identity */ --dp-navy: 220 25% 8%; --dp-navy-light: 220 20% 12%; --dp-red: 0 85% 60%; --dp-blue: 210 100% 50%; --dp-cyan: 185 100% 50%; /* Semantic colors */ --card: 220 20% 12%; --card-foreground: 210 40% 98%; --primary: 0 85% 60%; --primary-foreground: 210 40% 98%; --secondary: 220 20% 16%; --secondary-foreground: 210 40% 98%; --muted: 220 15% 20%; --muted-foreground: 215 20% 65%; --accent: 210 100% 50%; --accent-foreground: 210 40% 98%; --border: 220 15% 20%; /* Gradients */ --gradient-hero: linear-gradient(135deg, hsl(var(--dp-navy)), hsl(var(--dp-navy-light))); --gradient-accent: linear-gradient(90deg, hsl(var(--dp-red)), hsl(var(--dp-blue))); /* Geometric pattern opacity */ --pattern-opacity: 0.1; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; } /* Layout utilities */ .min-h-screen { min-height: 100vh; } .relative { position: relative; } .absolute { position: absolute; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .overflow-hidden { overflow: hidden; } .pointer-events-none { pointer-events: none; } .z-10 { z-index: 10; } .flex { display: flex; } .items-center { align-items: center; } .justify-center { justify-content: center; } .text-center { text-align: center; } .max-w-4xl { max-width: 56rem; } .max-w-2xl { max-width: 42rem; } .mx-auto { margin-left: auto; margin-right: auto; } /* Spacing */ .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-8 { margin-bottom: 2rem; } .ml-2 { margin-left: 0.5rem; } .gap-8 { gap: 2rem; } .gap-3 { gap: 0.75rem; } /* Typography */ .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .font-bold { font-weight: 700; } .tracking-wider { letter-spacing: 0.05em; } .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; } /* Colors */ .text-foreground { color: hsl(var(--foreground)); } .text-muted-foreground { color: hsl(var(--muted-foreground)); } .bg-accent { background-color: hsl(var(--accent)); } .bg-dp-cyan { background-color: hsl(var(--dp-cyan)); } .bg-dp-navy { background-color: hsl(var(--dp-navy)); } .bg-dp-red { background-color: hsl(var(--dp-red)); } .bg-dp-blue { background-color: hsl(var(--dp-blue)); } /* Geometric background pattern */ .geometric-bg { background-image: linear-gradient(45deg, rgba(255,255,255,var(--pattern-opacity)) 1px, transparent 1px), linear-gradient(-45deg, rgba(255,255,255,var(--pattern-opacity)) 1px, transparent 1px); background-size: 60px 60px; background-position: 0 0, 30px 30px; } /* Data Prime brand gradients */ .gradient-text { background: linear-gradient(90deg, hsl(var(--dp-red)), hsl(var(--dp-blue))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Geometric shapes */ .w-3 { width: 0.75rem; } .h-3 { height: 0.75rem; } .w-4 { width: 1rem; } .h-4 { height: 1rem; } .w-8 { width: 2rem; } .h-8 { height: 2rem; } .w-12 { width: 3rem; } .h-12 { height: 3rem; } .rounded-full { border-radius: 9999px; } .rounded-sm { border-radius: 0.125rem; } .opacity-80 { opacity: 0.8; } /* Links */ a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .hover-accent:hover { color: hsl(var(--accent)); } .hover-cyan:hover { color: hsl(var(--dp-cyan)); } .hover-navy:hover { color: hsl(var(--dp-navy-light)); } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-float-delayed { animation: float 6s ease-in-out infinite; animation-delay: 2s; } /* Position utilities */ .top-20 { top: 5rem; } .top-40 { top: 10rem; } .top-1\/2 { top: 50%; } .right-20 { right: 5rem; } .right-32 { right: 8rem; } .right-10 { right: 2.5rem; } .left-16 { left: 4rem; } .left-20 { left: 5rem; } .bottom-32 { bottom: 8rem; } .bottom-20 { bottom: 5rem; } .bottom-0 { bottom: 0; } /* Bottom line gradient */ .h-px { height: 1px; } .bg-gradient-accent { background: linear-gradient(90deg, hsl(var(--dp-red)), hsl(var(--dp-blue))); } .opacity-50 { opacity: 0.5; } /* Responsive design */ @media (min-width: 768px) { .md-text-7xl { font-size: 4.5rem; line-height: 1; } .md-text-2xl { font-size: 1.5rem; line-height: 2rem; } .md-flex-row { flex-direction: row; } } .flex-col { flex-direction: column; } /* Container for main content */ .container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0 1.5rem; position: relative; z-index: 10; } .content { text-align: center; max-width: 56rem; margin: 0 auto; } .contact-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; font-size: 1.125rem; line-height: 1.75rem; } @media (min-width: 768px) { .contact-container { flex-direction: row; } .main-heading { font-size: 4.5rem; line-height: 1; } .description { font-size: 1.5rem; line-height: 2rem; } } .contact-item { display: flex; align-items: center; gap: 0.75rem; } .dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; } .main-heading { font-size: 3rem; line-height: 1; font-weight: 700; margin-bottom: 2rem; } .description { font-size: 1.25rem; line-height: 1.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 3rem; max-width: 42rem; margin-left: auto; margin-right: auto; line-height: 1.625; }