/* ─────────────────────────────────────────────────────────────────────────── * olano.ai — themed to match dashboard_2.0 (lucide.dev / VitePress style). * Borderless: separation comes from background tone, not outlines. One accent * (brand orange) — except the Cortex section, which is deliberately the only * thing in the UI using the neural violet. * * Tokens are copied from olano/dashboard_2.0/src/styles/tokens.css. * Theme: , persisted as `lc-theme` (same key * convention as the dashboard), default dark, applied pre-paint in . * ─────────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #1b1b1f; /* page */ --bg-elev: #161618; /* darker alt */ --surface: #202127; /* cards */ --surface-2: #26262c; /* buttons, soft hovers */ --surface-3: #2e2e34; /* badges, stronger hover */ --surface-4: #3a3a42; /* scrollbar */ --border: #2e2e32; /* hairlines where needed */ --border-strong: #3a3a42; --border-focus: #ff6a3d; --text: #dfdfd6; /* warm off-white (Lucide) */ --text-2: #98989f; --text-3: #6a6a71; --text-4: #54545a; /* brand orange */ --accent: #ff6a3d; --accent-hover: #ff8159; --accent-soft: rgba(255, 106, 61, 0.14); --accent-muted: rgba(255, 106, 61, 0.08); /* Cortex — neural violet, the only non-orange accent */ --cortex: #a78bfa; --cortex-strong: #c4b5fd; --cortex-glow: rgba(167, 139, 250, 0.7); --cortex-soft: rgba(167, 139, 250, 0.16); --cortex-muted: rgba(167, 139, 250, 0.08); --success: #3ddc97; --success-soft: rgba(61, 220, 151, 0.13); --warn: #e2b341; --warn-soft: rgba(226, 179, 65, 0.13); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --info: #60a5fa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(255, 106, 61, 0.25); } :root[data-theme="light"] { color-scheme: light; --bg: #f3f3f4; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #e9e9ea; --surface-3: #e1e1e3; --surface-4: #d4d4d6; --border: #e4e4e6; --border-strong: #d4d4d6; --border-focus: #e85d2a; --text: #3c3c43; --text-2: #67676c; --text-3: #8e8e93; --text-4: #a8a8ad; --accent: #e85d2a; --accent-hover: #d44e1e; --accent-soft: rgba(232, 93, 42, 0.1); --accent-muted: rgba(232, 93, 42, 0.06); --cortex: #7c3aed; --cortex-strong: #6d28d9; --cortex-glow: rgba(124, 58, 237, 0.55); --cortex-soft: rgba(124, 58, 237, 0.12); --cortex-muted: rgba(124, 58, 237, 0.06); --success: #18794e; --success-soft: rgba(24, 121, 78, 0.1); --warn: #b45309; --warn-soft: rgba(180, 83, 9, 0.1); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.1); --info: #2563eb; --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05); --shadow: 0 8px 28px rgba(24, 24, 27, 0.08); --shadow-lg: 0 18px 50px rgba(24, 24, 27, 0.12); --shadow-focus: 0 0 0 3px rgba(232, 93, 42, 0.18); } :root { --r-xs: 5px; --r-sm: 7px; --r: 10px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --max: 1200px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; --font-heading: var(--font-sans); --font-body: var(--font-sans); --font-brand: "Poppins", var(--font-sans); --t-fast: 0.12s; --t: 0.18s; --ease: cubic-bezier(0.32, 0.72, 0, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchor jumps land below the 64px sticky header instead of underneath it. */ scroll-padding-top: 76px; /* Safety net: nothing may widen the page sideways (mobile browsers otherwise zoom out and let the page pan left/right). `clip` doesn't create a scroll container, so the sticky header is unaffected; `hidden` is the fallback. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); font-optical-sizing: auto; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.nav-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } img { display: block; max-width: 100%; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; } :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-xs); } .svg-defs { display: none; } /* Lucide icon defaults: stroke-based, monochrome, inherits currentColor */ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } h1, h2, h3, h4, .brand, .price { font-family: var(--font-heading); } .section { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } /* Header — full-width sticky bar, hairline bottom (VitePress pattern) */ .site-header { position: sticky; top: 0; z-index: 50; height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%; margin: 0; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); } /* Wordmark — "olano.ai" set in Poppins Medium. The "olano" tracks the theme (black on light, white on dark) while ".ai" keeps the brand coral. */ .brand-word { font-family: var(--font-brand); font-weight: 500; letter-spacing: -0.02em; color: #ffffff; } :root[data-theme="light"] .brand-word { color: #15151a; } .brand-ai { color: var(--accent); } /* Brand mark — network "O" of connected nodes that scales from favicon to nav. */ .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; } .brand-mark svg { width: 34px; height: 34px; } .site-nav { display: flex; align-items: center; justify-content: center; justify-self: center; gap: 2px; color: var(--text-3); font-size: 13.5px; font-weight: 500; } .site-nav a, .nav-group-button { padding: 7px 10px; border-radius: var(--r-sm); white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .site-nav a:hover, .nav-group-button:hover { background: var(--surface-2); color: var(--text); } /* Scrollspy — the link (or group trigger) for the section in view holds the hover treatment so visitors always know where they are on the page. */ .site-nav a.is-current, .nav-group-button.is-current { background: var(--surface-2); color: var(--text); } /* Product dropdown — a click-toggled disclosure grouping the deep-dive sections. Inside the burger menu it flattens back into the link list. */ .nav-group { position: relative; display: inline-flex; } .nav-group-button { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; font-size: inherit; font-weight: inherit; } /* Caret — same border-drawn chevron as the language control. */ .nav-group-button::after { content: ""; width: 5.5px; height: 5.5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); } .nav-group.is-open .nav-group-button::after { transform: translateY(1px) rotate(225deg); } .nav-group-menu { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; display: none; flex-direction: column; gap: 2px; min-width: 184px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .nav-group.is-open .nav-group-menu { display: flex; } .nav-group-menu a { padding: 9px 12px; } .nav-cta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: none; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--accent); transition: background var(--t-fast) var(--ease); } .nav-cta:hover { background: var(--accent-hover); } .nav-cta svg { width: 16px; height: 16px; } .header-actions { justify-self: end; display: inline-flex; align-items: center; gap: 8px; } /* Theme toggle — icon-only ghost button (the dashboard sidebar pattern) */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-3); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Language control — a compact globe + locale-code pill. The real