/* ========================================================================== Vicol Inc. — Custom Styles -------------------------------------------------------------------------- Works alongside Tailwind utility classes. Contains custom properties, scroll-reveal animations, and component-level overrides. ========================================================================== */ /* ------------------------------------------------------------------ Theme CSS custom properties — toggled via `dark` class on Uses CSS variables so transitions are smooth and consistent. ------------------------------------------------------------------ */ :root { --color-navy-950: #020617; --color-navy-900: #0F172A; --color-navy-800: #1E293B; --color-navy-700: #334155; --color-navy-300: #CBD5E1; --color-navy-200: #E2E8F0; --color-navy-100: #F1F5F9; --color-accent: #F59E0B; --color-accent-hover: #D97706; /* Font families (referenced by Tailwind fontFamily via CSS vars) */ --font-geist-sans: 'Geist'; --color-light-bg: #F8FAFC; --color-light-card: #FFFFFF; --color-light-text: #0F172A; --color-light-text-2: #475569; --color-light-border: #E2E8F0; /* Base font sizes (responsive) */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; /* Animation easing */ --ease-out-cubic: cubic-bezier(0.35, 0, 0.25, 1); --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1); } /* Dark theme overrides */ .dark, [data-theme="dark"] { --color-navy-950: #020617; --color-navy-900: #0F172A; --color-navy-800: #1E293B; --color-navy-700: #334155; --color-navy-300: #CBD5E1; --color-navy-200: #E2E8F0; --color-navy-100: #F1F5F9; } /* ------------------------------------------------------------------ Scroll behavior ------------------------------------------------------------------ */ html { scroll-behavior: smooth; } /* Remove the outline from links that are clicked (but keep focus visible) */ a:focus-visible, button:focus-visible { outline: 2px auto Highlight; outline: 2px auto -webkit-focus-ring-color; outline-offset: 2px; } /* ------------------------------------------------------------------ Scroll reveal — elements get .reveal when in viewport ------------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out-cubic), transform 0.6s var(--ease-out-cubic); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ------------------------------------------------------------------ Hero gradient orbs — subtle animated background shapes ------------------------------------------------------------------ */ .hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: pulse-slow 8s ease-in-out infinite; } .hero-orb-1 { width: 320px; height: 320px; background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%); top: 10%; left: 5%; } .hero-orb-2 { width: 280px; height: 280px; background: radial-gradient(circle, #3B82F6 0%, transparent 70%); bottom: 10%; right: 5%; animation-delay: 2s; } @keyframes pulse-slow { 0%, 100% { opacity: 0.12; transform: scale(1); } 50% { opacity: 0.18; transform: scale(1.05); } } /* ------------------------------------------------------------------ Card hover lift ------------------------------------------------------------------ */ .card-hover { transition: transform 0.3s var(--ease-out-cubic), box-shadow 0.3s var(--ease-out-cubic); } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15); } /* Dark mode card hover */ .dark .card-hover:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } /* ------------------------------------------------------------------ Button micro-interaction ------------------------------------------------------------------ */ .btn-primary { background: var(--color-accent); color: var(--color-navy-900); border: none; transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; } .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; border: 2px solid var(--color-accent); color: var(--color-accent); transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease; } .btn-secondary:hover { background: var(--color-accent); color: var(--color-navy-900); transform: translateY(-1px); } /* ------------------------------------------------------------------ Form styling ------------------------------------------------------------------ */ .form-input { background: var(--color-light-card); border: 1.5px solid var(--color-light-border); color: var(--color-light-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); } /* Dark mode form inputs */ .dark .form-input { background: var(--color-navy-800); border-color: var(--color-navy-700); color: var(--color-navy-100); } .form-input::placeholder { color: var(--color-navy-400); } /* ------------------------------------------------------------------ Reduced motion support ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------ Custom scrollbar (subtle) ------------------------------------------------------------------ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, 0.3); border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: rgba(226, 232, 240, 0.1); } /* ------------------------------------------------------------------ Badge / accent text ------------------------------------------------------------------ */ .text-accent { color: var(--color-accent); } .bg-accent { background-color: var(--color-accent); } .border-accent { border-color: var(--color-accent); } /* ------------------------------------------------------------------ Stat number animation ------------------------------------------------------------------ */ .stat-number { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ Process step connector line (desktop) ------------------------------------------------------------------ */ .step-connector { position: absolute; top: 24px; left: 24px; right: -48px; height: 2px; background: var(--color-navy-200); transform: translateY(50%); } .dark .step-connector { background: var(--color-navy-700); } /* ------------------------------------------------------------------ Feature grid icon background ------------------------------------------------------------------ */ .icon-bg { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); } .dark .icon-bg { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); }