/* Static export from TS/React landing page (Ingestor) */ /* Font */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{ --background: 220 20% 98%; --foreground: 220 40% 13%; --card: 0 0% 100%; --card-foreground: 220 40% 13%; --primary: 220 60% 15%; --primary-foreground: 0 0% 100%; --secondary: 220 20% 94%; --secondary-foreground: 220 40% 13%; --muted: 220 15% 92%; --muted-foreground: 220 15% 45%; --accent: 165 100% 42%; --accent-foreground: 220 60% 10%; --border: 220 20% 88%; --radius: 0.75rem; --gradient-primary: linear-gradient(135deg, hsl(220 60% 15%) 0%, hsl(220 50% 25%) 100%); --gradient-accent: linear-gradient(135deg, hsl(165 100% 42%) 0%, hsl(175 100% 35%) 100%); --gradient-hero: linear-gradient(180deg, hsl(220 20% 98%) 0%, hsl(220 25% 95%) 100%); --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(220 20% 98%) 100%); --shadow-soft: 0 4px 20px -4px hsl(220 40% 13% / 0.08); --shadow-card: 0 8px 32px -8px hsl(220 40% 13% / 0.12); --shadow-elevated: 0 16px 48px -12px hsl(220 40% 13% / 0.15); --shadow-accent: 0 8px 24px -4px hsl(165 100% 42% / 0.25); } /* Dark mode - Automatic: via prefers-color-scheme - Manual override: (set by the toggle) */ html[data-theme="dark"]{ --background: 220 30% 8%; --foreground: 220 20% 96%; --card: 220 26% 10%; --card-foreground: 220 20% 96%; --primary: 220 25% 92%; --primary-foreground: 220 40% 10%; --secondary: 220 20% 16%; --secondary-foreground: 220 20% 96%; --muted: 220 20% 14%; --muted-foreground: 220 12% 72%; --border: 220 18% 18%; --ring: 220 25% 65%; } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --background: 220 30% 8%; --foreground: 220 20% 96%; --card: 220 26% 10%; --card-foreground: 220 20% 96%; --primary: 220 25% 92%; --primary-foreground: 220 40% 10%; --secondary: 220 20% 16%; --secondary-foreground: 220 20% 96%; --muted: 220 20% 14%; --muted-foreground: 220 12% 72%; --border: 220 18% 18%; --ring: 220 25% 65%; } } /* Top bar + theme toggle */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid hsl(var(--border)); background:hsl(var(--card)); color:hsl(var(--foreground)); box-shadow:0 1px 0 rgba(0,0,0,.04); transition:transform .15s ease, background .15s ease, border-color .15s ease; } .theme-toggle:hover{ transform: translateY(-1px); } .theme-toggle:active{ transform: translateY(0px); } .theme-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 4px hsla(var(--ring) / .25); } .theme-icon{ display:none; line-height:0; } html[data-theme="light"] .theme-icon-moon{ display:inline-flex; } html[data-theme="dark"] .theme-icon-sun{ display:inline-flex; } /* When no manual override is set, show the opposite icon of the current system theme */ html:not([data-theme]) .theme-icon-moon{ display:inline-flex; } @media (prefers-color-scheme: dark){ html:not([data-theme]) .theme-icon-moon{ display:none; } html:not([data-theme]) .theme-icon-sun{ display:inline-flex; } } *{ box-sizing:border-box; border-color: hsl(var(--border)); } html{ scroll-behavior:smooth; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: hsl(var(--foreground)); background: hsl(var(--background)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{ color: inherit; } /* Layout */ .page{ min-height: 100vh; display:flex; flex-direction:column; position:relative; overflow:hidden; } .hero-bg{ position:fixed; inset:0; opacity:0.30; pointer-events:none; background: var(--gradient-hero); } .deco{ position:fixed; border-radius:9999px; filter: blur(64px); pointer-events:none; } .deco.deco-left{ top:25%; left:40px; width:288px; height:288px; background: hsl(var(--accent) / 0.05); } .deco.deco-right{ bottom:25%; right:40px; width:384px; height:384px; background: hsl(var(--primary) / 0.05); } main{ flex:1; display:flex; align-items:center; justify-content:center; padding: 64px 24px; position:relative; z-index:10; } .container{ max-width: 768px; margin: 0 auto; text-align:center; } /* Logo */ .logo{ display:flex; align-items:center; gap: 12px; justify-content:center; } .logo-badge{ width:56px; height:56px; border-radius: 16px; background: hsl(var(--primary)); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-accent); position:relative; overflow:hidden; } .logo-badge::after{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, hsl(var(--accent) / 0.20), transparent); } .logo-badge svg{ position:relative; z-index:1; color: hsl(var(--primary-foreground)); } .logo-text{ font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; } /* Typography */ .h1{ font-size: 1.875rem; line-height: 1.15; font-weight: 800; margin: 0 0 24px 0; } @media (min-width: 640px){ .h1{ font-size: 2.25rem; } } @media (min-width: 1024px){ .h1{ font-size: 3rem; } } .sub{ font-size: 1.125rem; color: hsl(var(--muted-foreground)); max-width: 576px; margin: 0 auto 64px auto; } /* Helpers */ .gradient-text{ background-image: var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color: transparent; } .fade-up{ opacity:0; animation: fadeUp 0.6s ease-out forwards; } @keyframes fadeUp{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform: translateY(0); } } /* Highlights */ .grid{ display:grid; gap: 16px; margin-bottom: 80px; } @media (min-width: 640px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .card{ text-align:left; padding: 24px; border-radius: 16px; border: 1px solid hsl(var(--border) / 0.50); background: var(--gradient-card); box-shadow: var(--shadow-card); transition: border-color 200ms ease; } .card:hover{ border-color: hsl(var(--accent) / 0.30); } .card-row{ display:flex; gap:16px; align-items:flex-start; } .icon-box{ width:40px; height:40px; border-radius: 12px; background: hsl(var(--accent) / 0.10); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .icon-box svg{ width:20px; height:20px; color: hsl(var(--accent)); } .card h3{ margin:0 0 4px 0; font-weight: 600; } .card p{ margin:0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* CTA */ .cta-wrap{ margin-top: 0; } .cta-pre{ color: hsl(var(--muted-foreground)); margin: 0 0 16px 0; } .cta{ display:inline-flex; gap: 12px; align-items:center; padding: 16px 24px; border-radius: 16px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); text-decoration:none; font-weight:500; box-shadow: var(--shadow-elevated); transition: filter 200ms ease; } .cta:hover{ filter: brightness(1.07); } .cta svg{ width:20px; height:20px; } .cta .arrow{ width:16px; height:16px; transition: transform 200ms ease; } .cta:hover .arrow{ transform: translateX(4px); } .cta-mail{ margin: 16px 0 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* Footer */ footer{ padding: 32px 0; text-align:center; position:relative; z-index:10; } footer p{ margin:0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } footer a{ text-decoration: underline; text-underline-offset: 2px; transition: color 200ms ease; } footer a:hover{ color: hsl(var(--foreground)); }