/* ======================================================== OneNet Solutions — Design System (extracted from React app) Light animated background, blue accent, dark footer. Pairs with Tailwind Play CDN config in of every page. ======================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --background: 220 28% 97%; --foreground: 220 25% 10%; --surface: 220 22% 94%; --surface-elevated: 0 0% 100%; --card: 0 0% 100%; --card-foreground: 220 25% 10%; --popover: 0 0% 100%; --popover-foreground: 220 25% 10%; --primary: 214 70% 42%; --primary-foreground: 0 0% 100%; --primary-glow: 214 85% 55%; --neon: 214 85% 55%; --accent: 214 70% 42%; --accent-foreground: 0 0% 100%; --secondary: 220 20% 93%; --secondary-foreground: 220 25% 18%; --muted: 220 18% 91%; --muted-foreground: 220 14% 42%; --ink: 225 28% 6%; --ink-foreground: 0 0% 98%; --destructive: 0 75% 55%; --destructive-foreground: 0 0% 100%; --border: 220 18% 87%; --input: 220 18% 90%; --ring: 214 70% 42%; --radius: 0.5rem; --gradient-hero: radial-gradient(ellipse 80% 55% at 50% 0%, hsl(214 85% 55% / 0.08), transparent 65%), linear-gradient(180deg, hsl(220 28% 97%) 0%, hsl(220 24% 94%) 100%); --gradient-gold: linear-gradient(135deg, hsl(214 70% 34%) 0%, hsl(220 70% 24%) 100%); --gradient-blue: linear-gradient(135deg, hsl(214 85% 55%) 0%, hsl(214 70% 42%) 100%); --gradient-text: linear-gradient(180deg, hsl(220 25% 10%) 0%, hsl(220 20% 35%) 100%); --gradient-primary: var(--gradient-blue); --gradient-accent: var(--gradient-blue); --shadow-sm: 0 1px 2px hsl(220 25% 10% / 0.06); --shadow-md: 0 4px 14px hsl(220 25% 10% / 0.09); --shadow-lg: 0 24px 48px -12px hsl(220 25% 10% / 0.14); --shadow-glow: 0 14px 40px -10px hsl(214 70% 34% / 0.40); --shadow-card: 0 1px 0 hsl(220 22% 89%), 0 8px 24px -12px hsl(220 25% 10% / 0.08); --shadow-neon: 0 0 18px hsl(214 85% 55% / 0.35); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } .section-dark { --background: 225 28% 6%; --foreground: 0 0% 96%; --surface: 225 22% 9%; --surface-elevated: 225 20% 12%; --card: 225 22% 9%; --card-foreground: 0 0% 96%; --secondary: 225 18% 14%; --secondary-foreground: 0 0% 94%; --muted: 225 16% 12%; --muted-foreground: 225 10% 60%; --border: 225 18% 18%; --shadow-card: 0 1px 0 hsl(225 18% 18%), 0 8px 24px -8px hsl(0 0% 0% / 0.5); background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* ----- Base ----- */ * { border-color: hsl(var(--border)); box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: light; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background-color: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; line-height: 1.5; } ::selection { background: hsl(var(--primary) / 0.20); color: hsl(var(--foreground)); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .font-display { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; } .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ----- Containers ----- */ .container-tight { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .container-wide { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 640px) { .container-tight, .container-wide { padding-left: 2rem; padding-right: 2rem; } } /* ======================================================== ANIMATED BACKGROUND ======================================================== */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: radial-gradient(ellipse 65% 50% at 12% 18%, hsl(214 85% 55% / 0.09) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 88% 72%, hsl(195 80% 55% / 0.07) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 55% 40%, hsl(240 60% 65% / 0.05) 0%, transparent 60%), linear-gradient(160deg, hsl(220 30% 98%) 0%, hsl(215 24% 95%) 50%, hsl(220 28% 97%) 100%); animation: bgBreathe 16s ease-in-out infinite alternate; will-change: filter; } @keyframes bgBreathe { 0% { filter: hue-rotate(0deg) brightness(1.000); } 40% { filter: hue-rotate(6deg) brightness(1.015); } 100% { filter: hue-rotate(-4deg) brightness(0.990); } } body::after { content: ''; position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(circle, hsl(214 70% 42% / 0.10) 1.2px, transparent 1.2px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 25%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 25%, transparent 78%); animation: dotDrift 28s linear infinite; } @keyframes dotDrift { from { background-position: 0 0; } to { background-position: 38px 38px; } } .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; will-change: transform; transition: transform 0.12s linear; } .bg-orb-1 { width: 52vw; height: 52vw; top: -14vw; left: -10vw; background: radial-gradient(circle at 40% 40%, hsl(214 85% 58% / 0.10) 0%, transparent 65%); animation: orbDrift1 22s ease-in-out infinite alternate; } .bg-orb-2 { width: 44vw; height: 44vw; top: 28vh; right: -10vw; background: radial-gradient(circle at 60% 50%, hsl(195 80% 55% / 0.08) 0%, transparent 65%); animation: orbDrift2 28s ease-in-out infinite alternate; } .bg-orb-3 { width: 38vw; height: 38vw; bottom: -8vw; left: 22vw; background: radial-gradient(circle at 50% 60%, hsl(240 65% 62% / 0.07) 0%, transparent 65%); animation: orbDrift3 19s ease-in-out infinite alternate; } @keyframes orbDrift1 { 0%{translate:0 0}50%{translate:28px 18px}100%{translate:-18px 32px} } @keyframes orbDrift2 { 0%{translate:0 0}50%{translate:-22px -28px}100%{translate:18px 18px} } @keyframes orbDrift3 { 0%{translate:0 0}50%{translate:14px -22px}100%{translate:-26px 8px} } /* ----- Scroll Reveal ----- */ .scroll-reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s var(--ease-out-quart), transform .75s var(--ease-out-quart); } .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } .scroll-reveal[data-delay="1"] { transition-delay: .10s; } .scroll-reveal[data-delay="2"] { transition-delay: .22s; } .scroll-reveal[data-delay="3"] { transition-delay: .36s; } .scroll-reveal[data-delay="4"] { transition-delay: .52s; } .scroll-reveal[data-delay="5"] { transition-delay: .68s; } /* ----- Text effects ----- */ .text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-gradient-gold { background: linear-gradient(135deg, hsl(214 70% 34%) 0%, hsl(220 70% 24%) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-outline { color: transparent; -webkit-text-stroke: 1.5px hsl(220 70% 24% / 0.85); transition: -webkit-text-stroke-color .3s ease; } .text-outline:hover { -webkit-text-stroke-color: hsl(220 70% 24% / 1); } .text-outline-strong { color: transparent; -webkit-text-stroke: 2px hsl(220 25% 12% / 0.40); } .text-outline-muted { color: transparent; -webkit-text-stroke: 1px hsl(220 20% 28% / 0.13); } .text-outline-gold { color: transparent; -webkit-text-stroke: 1.5px hsl(214 70% 42% / 0.45); } .section-dark .text-outline { -webkit-text-stroke: 1.5px hsl(0 0% 100% / 0.65); } .section-dark .text-outline-muted { -webkit-text-stroke: 1px hsl(0 0% 100% / 0.10); } /* ----- Eyebrow ----- */ .eyebrow { display: inline-flex; align-items: center; gap: .625rem; font-family: 'JetBrains Mono', monospace; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } .eyebrow.justify-center { justify-content: center; } /* ----- Ink grid ----- */ .ink-grid { background-image: linear-gradient(to right, hsl(220 25% 10% / 0.04) 1px, transparent 1px), linear-gradient(to bottom, hsl(220 25% 10% / 0.04) 1px, transparent 1px); background-size: 64px 64px; } .section-dark .ink-grid { background-image: linear-gradient(to right, hsl(0 0% 100% / 0.04) 1px, transparent 1px), linear-gradient(to bottom, hsl(0 0% 100% / 0.04) 1px, transparent 1px); } /* ----- Card hover ----- */ .card-hover { transition: transform .35s var(--ease-out-quart), box-shadow .35s var(--ease-out-quart); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ----- Hero typography animations ----- */ @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes subtle-rotate { 0%,100%{transform:rotateZ(-1deg)} 50%{transform:rotateZ(0.5deg)} } .animate-subtle-rotate { animation: subtle-rotate 8s ease-in-out infinite; } @keyframes pulse-glow-hero { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:.5;transform:scale(1.2)} } .animate-pulse-glow-hero { animation: pulse-glow-hero 4s ease-in-out infinite; } @keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} } .animate-blink { animation: blink 1s infinite; } @keyframes premium-fade-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } .animate-premium-fade-in { animation: premium-fade-in .7s var(--ease-out-quart) both; } @keyframes fade-up { 0%{opacity:0;transform:translateY(16px)} 100%{opacity:1;transform:translateY(0)} } .animate-fade-up { animation: fade-up .6s var(--ease-out-quart) both; } @keyframes marquee-anim { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .animate-marquee { animation: marquee-anim 40s linear infinite; } @keyframes pulse-glow-tw { 0%,100%{opacity:.6} 50%{opacity:1} } .animate-pulse-glow { animation: pulse-glow-tw 3s ease-in-out infinite; } @keyframes ping-anim { 75%,100%{transform:scale(2);opacity:0} } .animate-ping-dot { animation: ping-anim 1.4s cubic-bezier(0,0,0.2,1) infinite; } @keyframes spin-slow { to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 12s linear infinite; } /* Fade slide for hero rotator */ @keyframes hero-slide-in { from{opacity:0; transform:translateX(80px)} to{opacity:1;transform:translateX(0)} } @keyframes hero-slide-out { from{opacity:1; transform:translateX(0)} to{opacity:0;transform:translateX(-80px)} } .hero-rotator-item { position:absolute; inset:0; opacity:0; pointer-events:none; } .hero-rotator-item.is-active { opacity:1; pointer-events:auto; animation: hero-slide-in .7s var(--ease-out-quart) both; } .hero-rotator-item.is-leaving { animation: hero-slide-out .7s var(--ease-out-quart) both; } /* ----- Forms ----- */ .input-base { display: block; width: 100%; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .625rem; padding: .75rem 1rem; font-size: .875rem; color: hsl(var(--foreground)); transition: border-color .2s, box-shadow .2s; font-family: inherit; } .input-base:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); } .input-base::placeholder { color: hsl(var(--muted-foreground) / .8); } textarea.input-base { resize: vertical; min-height: 7rem; } select.input-base { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* ----- Toast (replaces sonner) ----- */ #toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; } .toast { pointer-events: auto; min-width: 280px; max-width: 360px; background: hsl(var(--surface-elevated)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: var(--shadow-lg); padding: 1rem 1.25rem; color: hsl(var(--foreground)); font-size: .875rem; transform: translateX(100%); opacity: 0; transition: transform .35s var(--ease-spring), opacity .25s ease; } .toast.show { transform: translateX(0); opacity: 1; } .toast.success { border-left: 3px solid #16a34a; } .toast.error { border-left: 3px solid hsl(var(--destructive)); } .toast .toast-title { font-weight: 600; margin-bottom: .25rem; } .toast .toast-desc { color: hsl(var(--muted-foreground)); font-size: .8125rem; } /* ----- Accordion (FAQ) ----- */ .accordion-item { border-bottom: 1px solid hsl(var(--border)); } .accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; background: none; border: 0; text-align: left; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.0625rem; color: hsl(var(--foreground)); cursor: pointer; } .accordion-trigger .accordion-icon { transition: transform .25s ease; flex-shrink: 0; margin-left: 1rem; } .accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out-quart); } .accordion-content-inner { padding-bottom: 1.25rem; color: hsl(var(--muted-foreground)); line-height: 1.65; } /* ----- Mobile menu / dropdowns ----- */ .nav-dropdown { opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; } .nav-dropdown-wrapper:hover .nav-dropdown, .nav-dropdown-wrapper:focus-within .nav-dropdown { opacity: 1; visibility: visible; } .nav-dropdown-wrapper:hover .nav-chevron { transform: rotate(180deg); } .nav-chevron { transition: transform .2s; } /* ----- Marquee track ----- */ .marquee-track { display: flex; gap: 3rem; min-width: 200%; } /* ----- Reduced motion ----- */ @media (prefers-reduced-motion: reduce) { body::before, body::after, .bg-orb, .animate-float, .animate-subtle-rotate, .animate-pulse-glow-hero, .animate-blink, .animate-marquee, .animate-pulse-glow, .animate-ping-dot, .animate-spin-slow { animation: none !important; } .scroll-reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } }