/* ============================================================ Advaitha.ai — Design System Modern, corporate, Silicon Valley tech-startup aesthetic. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..900&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ---- Theme tokens -------------------------------------------------------- */ :root { color-scheme: light; /* Warm paper canvas — #faf9f5 / #f0eee6 / #e3dacc / #141413 */ --bg: #faf9f5; --bg-soft: #f0eee6; --surface-2: #e3dacc; --text: #141413; --text-muted: #6b6357; --border: #e3dacc; --accent: #686762; --accent-2: #7c3aed; --accent-3: #c026d3; /* Modern geometric sans for headings — clean, confident, matches brand voice. Body stays Inter for readability. */ --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif; --ring: rgba(20, 20, 19, 0.10); /* Crisp, highly diffused shadows for tactile depth (not glow) */ --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.05), 0 1px 3px rgba(20, 20, 19, 0.03); --shadow-md: 0 8px 28px -14px rgba(20, 20, 19, 0.14), 0 2px 6px rgba(20, 20, 19, 0.03); } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.011em; } ::selection { background: var(--accent); color: #fff; } /* ---- Display typography (geometric sans — Montserrat) -------------------- */ /* Applied to the page H1 and any section headline carrying .display. We set only family + tracking so existing Tailwind weight utilities keep working; product-card titles and codenames stay Inter. */ h1, .display { font-family: var(--font-display); letter-spacing: -0.02em; } /* ---- Font overrides -------------------------------------------------------- */ /* Use Fraunces (editorial serif) for specific moments that call for it (e.g. the large "Li" on the philosophy page — signals philosophical depth). */ .font-fraunces { font-family: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; font-optical-sizing: auto; } /* ---- Brand mark ---------------------------------------------------------- */ .brand-dot { color: var(--accent); } /* Logo theming — two true wordmark variants, swapped by theme (no filter hacks). ADVAITHA-logo.png = dark ink wordmark → shown on light backgrounds. ADVAITHA-logo-white.png = white wordmark → shown on dark backgrounds. The active theme is driven by the `dark` class on . */ .logo-on-dark { display: none; } html.dark .logo-on-light { display: none; } html.dark .logo-on-dark { display: inline-block; } /* ---- Theme toggle -------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; transition: transform 0.18s ease, border-color 0.25s ease, background 0.25s ease; } .theme-toggle:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-sm); } /* Show the moon in light mode (click → go dark); the sun in dark mode. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; } /* ---- Gradient text ------------------------------------------------------- */ .gradient-text { color: var(--accent); } /* ---- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; line-height: 1; border-radius: 9999px; padding: 0.7rem 1.25rem; transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.2s ease; white-space: nowrap; cursor: pointer; } .btn-primary { color: #fff; background: var(--accent); box-shadow: var(--shadow-sm); border: 1px solid transparent; } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { color: var(--text); background: transparent; border: 1px solid var(--border); } .btn-ghost:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-sm); } /* ---- Pill badge ---------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); } .pill .dot { width: 0.7rem; height: 0.7rem; border-radius: 0; background-image: url('./just-icon.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ---- Cards --------------------------------------------------------------- */ .card { position: relative; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--bg); box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; } .card:hover { transform: translateY(-3px); border-color: #d4c9b5; box-shadow: var(--shadow-md); } /* Icon tile */ .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--border); color: var(--accent); } /* ---- Hero figure (zen garden + software glimpse) ------------------------- */ /* A framed, floating image beside the copy — proves the craft (a real-looking dark dashboard) while keeping the calm, philosophical imagery. */ .hero-figure { aspect-ratio: 5 / 4; background: var(--bg-soft); animation: hero-float 9s ease-in-out infinite; will-change: transform; } @media (min-width: 1024px) { .hero-figure { aspect-ratio: 4 / 3; } } /* Banner media stack: .hero-media — clip box that follows the rounded figure corners .hero-parallax — JS drifts this vertically on scroll (--py) for parallax .hero-img — slow, looping Ken Burns zoom/pan so the scene stays alive The parallax layer is over-sized (inset -16%) so neither the scroll drift nor the zoom ever exposes the figure's edges. */ .hero-media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .hero-parallax { position: absolute; inset: 0 -16%; transform: translate3d(var(--px, 0), 0, 0); will-change: transform; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; animation: hero-kenburns 24s ease-in-out 1 forwards; will-change: transform; } @keyframes hero-kenburns { from { transform: scale(1.02) translate3d(12%, 2%, 0); } to { transform: scale(1.08) translate3d(-12%, -2%, 0); } } @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Subtle inner ring + corner vignette for a premium, lit-from-within frame. */ .hero-figure-ring { pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.10); background: radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(20, 20, 19, 0.10) 100%); } @media (prefers-reduced-motion: reduce) { .hero-figure { animation: none; } .hero-parallax { transform: none !important; } .hero-img { animation: none; } } /* ---- Background: faint structural grid (scoped to the top, not full page) - Restricting the grid to the hero band — and fading it harder — removes the "template framework" tell of lines running the whole page body. */ .grid-bg { position: fixed; inset: 0 0 auto 0; height: 60vh; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(20, 20, 19, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 20, 19, 0.03) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 12%, transparent 72%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 12%, transparent 72%); opacity: 0.6; } /* ---- Inverted dark band (philosophy "yin/yang" beat) -------------------- */ .invert-band { background: #141413; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-md); } /* Band highlights (dot + "Li"): brand accent in light theme, warm tan in dark. The band itself stays dark in both themes — only the accents switch. */ .band-accent { color: var(--accent); } .band-accent-bg { background: var(--accent); } html.dark .band-accent { color: #d8cbb3; } html.dark .band-accent-bg { background: #d8cbb3; } .band-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 82% 12%, #000 8%, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 82% 12%, #000 8%, transparent 70%); } /* ---- Reveal on scroll ---------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---- Marquee (logo / value strip) --------------------------------------- */ .marquee { display: flex; gap: 3rem; width: max-content; animation: scroll-x 48s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes scroll-x { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee { animation: none; } } /* ---- Cycling principle (replaces the marquee) --------------------------- */ /* All words share one grid cell so the container hugs the widest word and the focal point never shifts; JS toggles .is-active to cross-fade between them. */ .principle-cycle { display: inline-grid; text-align: center; line-height: 1.1; } .principle-word { grid-area: 1 / 1; opacity: 0; transform: translateY(0.4em); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .principle-word.is-active { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .principle-word { transition: opacity 0.3s ease; transform: none; } } /* ---- Pipeline / build-stage indicator ----------------------------------- */ .pipeline { margin-top: auto; padding-top: 1.4rem; } .pipeline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; } .pipeline-head .lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .pipeline-stage { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.18rem 0.6rem; border-radius: 9999px; color: #fff; background: var(--accent); } .pipeline-stage::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); } .pipeline-track { display: flex; gap: 0.28rem; } .pipeline-seg { flex: 1; height: 0.32rem; border-radius: 9999px; background: var(--border); transition: background 0.3s ease; } .pipeline-seg.done { background: var(--accent); } .pipeline-seg.current { background: var(--accent); } .pipeline-ticks { display: flex; justify-content: space-between; margin-top: 0.45rem; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } /* Compact stage chip (home preview cards) — softened to a quiet dot + label so it reads as an honest maturity signal, not a loud SaaS status pill. */ .stage-chip { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.16rem 0.55rem 0.16rem 0.45rem; border-radius: 9999px; color: var(--text-muted); border: 1px solid var(--border); background: transparent; } .stage-chip::before { content: ''; width: 0.34rem; height: 0.34rem; border-radius: 9999px; background: var(--accent); opacity: 0.65; } /* Flagship variant keeps the accent emphasis. */ .stage-chip-flag { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); } .stage-chip-flag::before { opacity: 1; } /* Ecosystem group index numeral (serif, faded) */ .ecosystem-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--accent); opacity: 0.45; } /* ---- Sticky header blur -------------------------------------------------- */ .site-header { backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); background: color-mix(in srgb, var(--bg) 78%, transparent); } /* ---- Hamburger icon (3 bars → X) ---------------------------------------- */ .hamburger-btn { cursor: pointer; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; background: none; border: none; } .hamburger-btn span { display: block; width: 1.4rem; height: 0.125rem; border-radius: 2px; background-color: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; } .hamburger-open .bar1 { transform: rotate(45deg) translate(5px, 5px); } .hamburger-open .bar2 { opacity: 0; } .hamburger-open .bar3 { transform: rotate(-45deg) translate(5px, -5px); } /* ---- Dark theme ---------------------------------------------------------- */ /* Class-based (driven by `dark` on ) so a manual toggle can override the OS preference. The no-flash init script in each page's sets the class from localStorage, falling back to prefers-color-scheme on first visit. */ html.dark { color-scheme: dark; --bg: #141413; --bg-soft: #0d0d0c; --surface-2: #1e1d1b; --text: #f1f0ed; --text-muted: #9ca3af; --border: rgba(255, 255, 255, 0.08); --accent: #a8a29e; --ring: rgba(255, 255, 255, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 28px -14px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3); } html.dark .grid-bg { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); } html.dark .card:hover { border-color: rgba(255, 255, 255, 0.15); }