/* Google Fonts are loaded asynchronously via in each HTML file's */ /* ============================================================ THEME SYSTEM — DARK ONLY Colors are space-separated RGB so Tailwind opacity modifiers (e.g. bg-volantis-primary/90) work correctly. ============================================================ */ :root { /* Dark Theme (DEFAULT) */ --v-primary: 17 19 21; /* #111315 */ --v-secondary: 27 31 36; /* #1B1F24 */ --v-accent: 58 123 255; /* #3A7BFF */ --v-border: 45 51 57; /* #2D3339 */ --v-text: 229 231 235; /* #E5E7EB */ --v-muted: 156 163 175; /* #9CA3AF */ --v-card: 22 24 28; /* #16181C */ --v-heading: 255 255 255; /* #FFFFFF */ --v-scrollbar-track: #111315; --v-scrollbar-thumb: #2D3339; --v-glass-bg: rgba(22, 24, 28, 0.6); --v-glass-border: rgba(255, 255, 255, 0.05); --v-section-problem: #07090D; --v-section-cap: #06080C; --v-input-bg: #16181C; --v-input-border: #2D3339; --v-input-text: #F3F4F6; } /* ============================================================ BASE STYLES (theme-aware) ============================================================ */ body { background-color: rgb(var(--v-primary)); color: rgb(var(--v-text)); font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', sans-serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } .brand-text { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.5px; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--v-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--v-scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--v-accent)); } .scroll-smooth { scroll-behavior: smooth; } /* Technical Grid Pattern */ .bg-grid-pattern { background-size: 50px 50px; background-image: linear-gradient(to right, rgba(58, 123, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(58, 123, 255, 0.03) 1px, transparent 1px); mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); } /* Animations */ @keyframes float-slow { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } .animate-float-slow { animation: float-slow 15s ease-in-out infinite; } .animate-pulse-glow { animation: pulse-glow 8s ease-in-out infinite; } /* Glass effect utility (theme-aware) */ .glass-panel { background: var(--v-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--v-glass-border); } /* ============================================================ OPS CONTROL CENTER ANIMATIONS ============================================================ */ @keyframes drawLine { to { stroke-dashoffset: 0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollLog { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .ops-chart-line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: drawLine 2.5s ease-out forwards; } .ops-log-item { opacity: 0; } .ops-log-item:nth-child(1) { animation: fadeInUp 0.4s ease forwards 0.6s; } .ops-log-item:nth-child(2) { animation: fadeInUp 0.4s ease forwards 1.1s; } .ops-log-item:nth-child(3) { animation: fadeInUp 0.4s ease forwards 1.6s; } .ops-log-item:nth-child(4) { animation: fadeInUp 0.4s ease forwards 2.1s; } .ops-log-item:nth-child(5) { animation: fadeInUp 0.4s ease forwards 2.6s; } /* ============================================================ TESTIMONIALS CAROUSEL ============================================================ */ .testimonial-carousel { position: relative; overflow: hidden; } .testimonial-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .testimonial-slide { min-width: 100%; padding: 0 1rem; box-sizing: border-box; } @media (min-width: 768px) { .testimonial-slide { min-width: 50%; } } @media (min-width: 1024px) { .testimonial-slide { min-width: 33.333%; } } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--v-border)); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .carousel-dot.active { background: rgb(var(--v-accent)); width: 24px; border-radius: 4px; } /* === EXPANDABLE CARDS === */ .expand-card { cursor: pointer; user-select: none; } .card-details { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease; margin-top: 0; } .card-details.open { max-height: 240px; opacity: 1; margin-top: 1rem; } .card-chevron { transition: transform 0.3s ease; flex-shrink: 0; } .card-chevron.open { transform: rotate(180deg); }