/* Barrix Landing Site — Custom Styles */ /* Tailwind handles most styling; this file covers custom animations, gradients, and overrides */ @import url("ecosystem-header.css"); /* ===== Base ===== */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== Hero Gradients ===== */ .hero-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); } .hero-gradient-prime { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%); } .hero-gradient-academy { background: linear-gradient(135deg, #0f172a 0%, #064e3b 50%, #0f172a 100%); } .hero-gradient-node { background: linear-gradient(135deg, #0f172a 0%, #3b1f6e 50%, #0f172a 100%); } .hero-gradient-zonic { background: linear-gradient(135deg, #0f172a 0%, #7c2d12 50%, #0f172a 100%); } /* ===== Product Card Hover ===== */ .product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } /* ===== Feature Card ===== */ .feature-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } /* ===== Step Number Circle ===== */ .step-number { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; font-size: 1.25rem; font-weight: 700; flex-shrink: 0; } /* ===== Accent Borders ===== */ .border-accent-blue { border-color: #2563eb; } .border-accent-emerald { border-color: #059669; } .border-accent-purple { border-color: #7c3aed; } .border-accent-orange { border-color: #ea580c; } .text-accent-blue { color: #2563eb; } .text-accent-emerald { color: #059669; } .text-accent-purple { color: #7c3aed; } .text-accent-orange { color: #ea580c; } .bg-accent-blue { background-color: #2563eb; } .bg-accent-emerald { background-color: #059669; } .bg-accent-purple { background-color: #7c3aed; } .bg-accent-orange { background-color: #ea580c; } /* ===== Nav Dropdown ===== */ .nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .nav-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } /* ===== Mobile Menu ===== */ .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mobile-menu.open { max-height: 780px; } /* ===== Glow Effects ===== */ .glow-blue { box-shadow: 0 0 30px rgba(37, 99, 235, 0.15); } .glow-emerald { box-shadow: 0 0 30px rgba(5, 150, 105, 0.15); } .glow-purple { box-shadow: 0 0 30px rgba(124, 58, 237, 0.15); } .glow-orange { box-shadow: 0 0 30px rgba(234, 88, 12, 0.15); } /* ===== Divider ===== */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.2), transparent); } /* ===== Form Inputs ===== */ .form-input { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* ===== Animations ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; } .animate-fade-in-up-delay-1 { animation: fadeInUp 0.6s ease 0.1s forwards; opacity: 0; } .animate-fade-in-up-delay-2 { animation: fadeInUp 0.6s ease 0.2s forwards; opacity: 0; } .animate-fade-in-up-delay-3 { animation: fadeInUp 0.6s ease 0.3s forwards; opacity: 0; } /* Linked after Tailwind CDN in so this wins over preflight `img { max-width:100%; height:auto }` */ .ecosystem-header img.ecosystem-logo { width: 50px !important; height: 50px !important; max-width: none !important; min-width: 50px !important; min-height: 50px !important; box-sizing: border-box !important; } /* ===== Hero Animated Background ===== */ .hero-animated { position: relative; overflow: hidden; } .hero-bg-animation { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Floating gradient orbs */ .hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: orbFloat 20s ease-in-out infinite; } .hero-orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(37, 99, 235, 0.5) 0%, rgba(37, 99, 235, 0.1) 50%, transparent 70%); top: -15%; left: -10%; opacity: 0.7; animation-duration: 18s; } .hero-orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(124, 58, 237, 0.45) 0%, rgba(124, 58, 237, 0.1) 50%, transparent 70%); top: 10%; right: -12%; opacity: 0.6; animation-duration: 22s; animation-delay: -5s; } .hero-orb-3 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.08) 50%, transparent 70%); bottom: -10%; left: 25%; opacity: 0.6; animation-duration: 25s; animation-delay: -10s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(40px, -30px) scale(1.08); } 50% { transform: translate(-25px, 20px) scale(0.92); } 75% { transform: translate(20px, 35px) scale(1.04); } } /* Subtle grid overlay */ .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%); animation: gridPulse 6s ease-in-out infinite; } @keyframes gridPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Floating particles */ .hero-particles { position: absolute; inset: 0; } .particle { position: absolute; border-radius: 50%; background: rgba(148, 163, 184, 0.6); box-shadow: 0 0 6px 2px rgba(148, 163, 184, 0.3); animation: particleFloat linear infinite; } .particle.p1 { left: 8%; top: 25%; animation-duration: 10s; animation-delay: 0s; width: 4px; height: 4px; } .particle.p2 { left: 22%; top: 65%; animation-duration: 13s; animation-delay: -3s; width: 5px; height: 5px; background: rgba(37, 99, 235, 0.7); box-shadow: 0 0 8px 3px rgba(37, 99, 235, 0.4); } .particle.p3 { left: 42%; top: 35%; animation-duration: 16s; animation-delay: -6s; width: 6px; height: 6px; background: rgba(124, 58, 237, 0.6); box-shadow: 0 0 10px 3px rgba(124, 58, 237, 0.3); } .particle.p4 { left: 62%; top: 72%; animation-duration: 11s; animation-delay: -2s; width: 4px; height: 4px; } .particle.p5 { left: 78%; top: 28%; animation-duration: 14s; animation-delay: -8s; width: 5px; height: 5px; background: rgba(6, 182, 212, 0.7); box-shadow: 0 0 8px 3px rgba(6, 182, 212, 0.4); } .particle.p6 { left: 88%; top: 58%; animation-duration: 17s; animation-delay: -4s; width: 3px; height: 3px; background: rgba(37, 99, 235, 0.5); box-shadow: 0 0 6px 2px rgba(37, 99, 235, 0.3); } .particle.p7 { left: 32%; top: 82%; animation-duration: 12s; animation-delay: -7s; width: 6px; height: 6px; background: rgba(37, 99, 235, 0.5); box-shadow: 0 0 10px 3px rgba(37, 99, 235, 0.3); } .particle.p8 { left: 52%; top: 18%; animation-duration: 15s; animation-delay: -1s; width: 4px; height: 4px; background: rgba(124, 58, 237, 0.5); box-shadow: 0 0 6px 2px rgba(124, 58, 237, 0.3); } @keyframes particleFloat { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(30px, -50px) scale(1.3); opacity: 0.9; } 90% { opacity: 0.6; } 100% { transform: translate(-20px, -100px) scale(0.7); opacity: 0; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { .hero-orb, .hero-grid, .particle { animation: none; } .hero-orb { opacity: 0.2; } .hero-grid { opacity: 0.8; } .particle { opacity: 0.3; } }