/* OH HAI pre-launch — design system ported from design/prelaunch/ (source of truth). Dark-first with a manual light toggle (data-theme on ). Tokens mirror the prototype. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } /* The `hidden` attribute must win over element-specific display rules (e.g. the flex waitlist success/form blocks toggled by app.js). */ [hidden] { display: none !important; } :root, [data-theme="dark"] { --bg: #09090C; --bg2: #0C0C10; --card: rgba(255, 255, 255, 0.04); --cardBorder: rgba(255, 255, 255, 0.09); --text: #F4F4F6; --text2: rgba(255, 255, 255, 0.6); --text3: rgba(255, 255, 255, 0.4); --divider: rgba(255, 255, 255, 0.09); --nav: rgba(9, 9, 12, 0.72); --code: #050506; --codeText: #B9F2D0; --hair: rgba(255, 255, 255, 0.08); --autoFilter: none; --logoDark: block; --logoLight: none; } [data-theme="light"] { --bg: #F6F5F2; --bg2: #FFFFFF; --card: #FFFFFF; --cardBorder: rgba(0, 0, 0, 0.08); --text: #16161A; --text2: rgba(20, 20, 26, 0.62); --text3: rgba(20, 20, 26, 0.45); --divider: rgba(0, 0, 0, 0.08); --nav: rgba(246, 245, 242, 0.78); --code: #14141A; --codeText: #7BE3AB; --hair: rgba(0, 0, 0, 0.07); --autoFilter: invert(1); --logoDark: none; --logoLight: block; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-visual { animation: none !important; } } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; overflow-x: hidden; } .mono { font-family: 'JetBrains Mono', monospace; } /* ---- theme-aware logo swap ---- */ .logo-dark { display: var(--logoDark); } .logo-light { display: var(--logoLight); } /* ---- buttons ---- */ .btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 13px; cursor: pointer; border: none; font-family: 'Plus Jakarta Sans', sans-serif; } .btn-grad { color: #fff; background: linear-gradient(135deg, #FB3E4B, #9B46BD, #4F51BB); box-shadow: 0 12px 30px rgba(155, 70, 189, .4), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn-ghost { color: var(--text); border: 1px solid var(--cardBorder); font-weight: 600; background: transparent; } .btn-ghost:hover { background: var(--card); } .btn-sm { font-size: 14px; padding: 9px 18px; border-radius: 11px; box-shadow: 0 6px 18px rgba(155, 70, 189, .32); } .btn-lg { font-size: 15.5px; padding: 14px 26px; } .btn-block { width: 100%; padding: 14px; font-size: 15px; margin-top: 4px; } .btn[disabled] { opacity: .6; cursor: not-allowed; } .grad-text { background: linear-gradient(120deg, #FB3E4B, #C9407F, #9B46BD, #4F51BB); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============ NAV ============ */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: var(--nav); border-bottom: 1px solid var(--hair); } .nav-inner { max-width: 1180px; margin: 0 auto; padding: 15px clamp(20px, 5vw, 56px); display: flex; align-items: center; gap: 20px; } .nav-logo { height: 27px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); } .nav-link { color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 500; } .nav-link:hover { color: var(--text); } .theme-toggle { cursor: pointer; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--cardBorder); background: var(--card); color: var(--text2); display: flex; align-items: center; justify-content: center; font-size: 15px; } /* ============ HERO ============ */ .hero { position: relative; overflow: hidden; } .hero-glow { position: absolute; top: -160px; left: 50%; transform: translateX(-30%); width: 820px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(155, 70, 189, .22), rgba(251, 62, 75, .08) 42%, transparent 68%); filter: blur(20px); pointer-events: none; } .hero-inner { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 92px) clamp(20px, 5vw, 56px) clamp(40px, 6vw, 72px); position: relative; display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 64px); align-items: center; } .hero-copy { flex: 1 1 380px; min-width: min(100%, 380px); } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--cardBorder); background: var(--card); margin-bottom: 24px; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 8px rgba(61, 220, 151, .7); } .badge-text { font-size: 12.5px; font-weight: 600; color: var(--text2); } .badge-strong { color: var(--text); } .hero-title { margin: 0 0 20px; font-size: clamp(38px, 6vw, 64px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; } .hero-sub { margin: 0 0 30px; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; color: var(--text2); max-width: 520px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 26px; } .code-chip { display: inline-flex; align-items: center; gap: 12px; background: var(--code); border: 1px solid var(--hair); border-radius: 12px; padding: 11px 14px; max-width: 100%; } .code-chip-cmd { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--codeText); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .code-chip-prompt { color: var(--text3); } .code-chip-copy { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text3); border-left: 1px solid var(--hair); padding-left: 12px; } /* product visual */ .hero-visual { flex: 1 1 380px; min-width: min(100%, 340px); animation: floaty 7s ease-in-out infinite; } .browser { border-radius: 16px; overflow: hidden; background: #0A0A0D; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .3); } .browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #111116; border-bottom: 1px solid rgba(255, 255, 255, .06); } .dot { width: 11px; height: 11px; border-radius: 50%; } .dot-r { background: #FF5F57; } .dot-y { background: #FEBC2E; } .dot-g { background: #28C840; } .browser-url { margin-left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, .4); } .browser-body { padding: 18px 18px 22px; background: #0A0A0D; } .mock-topbar { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .mock-logo { height: 16px; } .mock-avatar { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #FB3E4B, #9B46BD, #4F51BB); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; } .mock-inboxhead { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 14px; } .mock-inboxtitle { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; } .mock-needyou { font-size: 12px; font-weight: 600; color: #FF6FA8; padding-bottom: 3px; } .mock-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .mock-tab { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .45); padding: 5px 11px; border-radius: 999px; } .mock-tab-active { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); } .mock-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-radius: 15px; padding: 13px; margin-bottom: 9px; } .mock-card:last-child { margin-bottom: 0; } .mock-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .mock-card-head-tight { margin-bottom: 7px; } .mock-glyph { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 13px 'JetBrains Mono', monospace; } .mock-agent { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(255, 255, 255, .5); } .mock-pill { font: 700 8.5px 'JetBrains Mono', monospace; letter-spacing: .05em; padding: 2px 5px; border-radius: 4px; } .pill-urgent { color: #FF5468; background: rgba(255, 84, 104, .15); } .mock-time { margin-left: auto; font-size: 10.5px; color: rgba(255, 255, 255, .35); } .mock-card-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; } .mock-card .mock-card-title { margin-bottom: 11px; } .mock-card .mock-card-head-tight ~ .mock-card-title { margin-bottom: 0; } .mock-actions { display: flex; gap: 7px; } .mock-btn { padding: 8px; border-radius: 9px; font: 700 12px 'Plus Jakarta Sans', sans-serif; } .mock-btn-primary { flex: 1; text-align: center; color: #fff; background: linear-gradient(135deg, #FB3E4B, #9B46BD, #4F51BB); } .mock-btn-ghost { padding: 8px 13px; font-weight: 600; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } /* glyph tints (shared between mock cards and how-it-works) */ .glyph-ask { background: rgba(255, 95, 160, .13); color: #FF6FA8; } .glyph-task { background: rgba(255, 84, 104, .16); color: #FF7A8A; } .glyph-notify { background: rgba(154, 161, 174, .14); color: #9AA1AE; } .runtime-strip { max-width: 1180px; margin: 0 auto; padding: 8px clamp(20px, 5vw, 56px) clamp(30px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; color: var(--text3); font-size: 12.5px; font-weight: 600; } .runtime-label { letter-spacing: .04em; text-transform: uppercase; font-size: 11px; } /* ============ SECTIONS ============ */ .section { border-top: 1px solid var(--hair); } .section-alt { background: var(--bg2); } .container { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 56px); } .container-split { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 64px); align-items: center; } .container-center { text-align: center; padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 56px); } .split-col { flex: 1 1 320px; min-width: min(100%, 320px); } .section-title { margin: 0 0 14px; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.02em; max-width: 640px; } .section-title-center { margin-left: auto; margin-right: auto; } .section-lede { margin: 0 0 clamp(36px, 4vw, 54px); font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.55; color: var(--text2); max-width: 600px; } .section-lede-center { margin-left: auto; margin-right: auto; } .section-head-center { text-align: center; margin-bottom: clamp(38px, 4vw, 56px); } .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; } /* cards */ .cards-3 { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 22px); } .cards-3-tight { margin-bottom: clamp(20px, 2.5vw, 28px); } .card { flex: 1 1 260px; background: var(--card); border: 1px solid var(--cardBorder); border-radius: 18px; padding: clamp(20px, 2.5vw, 28px); } .card-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; } .card-body { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text2); } .icon-tile { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .tile-urgent { background: rgba(255, 84, 104, .14); } .tile-task { background: rgba(140, 153, 255, .16); } .tile-notify { background: rgba(154, 161, 174, .16); } /* how-it-works type heads */ .type-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .type-glyph { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 22px 'JetBrains Mono', monospace; } .type-glyph.glyph-task { font-size: 20px; background: rgba(140, 153, 255, .15); color: #8C99FF; } .type-label { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; } .label-ask { color: #FF6FA8; } .label-task { color: #8C99FF; } .label-notify { color: #9AA1AE; } /* reverse-loop panel */ .loop-panel { background: linear-gradient(135deg, rgba(251, 62, 75, .08), rgba(155, 70, 189, .08) 55%, rgba(79, 81, 187, .1)); border: 1px solid var(--cardBorder); border-radius: 18px; padding: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } .loop-copy { flex: 1 1 300px; } .loop-title { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 800; letter-spacing: -.01em; } .loop-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text2); max-width: 460px; } .loop-body b { color: var(--text); } .loop-chat { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; min-width: min(100%, 300px); } .bubble { max-width: 88%; border-radius: 14px; padding: 11px 14px; font-size: 14px; } .bubble-you { align-self: flex-end; background: linear-gradient(135deg, #FB3E4B, #9B46BD); color: #fff; border-bottom-right-radius: 4px; font-weight: 600; } .bubble-agent { font-size: 12.5px; opacity: .9; } .bubble-agent-reply { align-self: flex-start; background: var(--card); border: 1px solid var(--cardBorder); border-bottom-left-radius: 4px; color: var(--text); } .bubble-ack { font-size: 11px; color: var(--text3); display: block; margin-bottom: 3px; } /* get-started */ .callout { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; background: var(--card); border: 1px solid var(--cardBorder); border-radius: 14px; } .callout-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: rgba(61, 220, 151, .16); display: flex; align-items: center; justify-content: center; } .callout-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text2); } .callout-text b { color: var(--text); } .steps { display: flex; flex-direction: column; gap: 12px; flex: 1 1 340px; min-width: min(100%, 340px); } .step { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--cardBorder); border-radius: 14px; padding: 15px 16px; } .step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cardBorder); display: flex; align-items: center; justify-content: center; font: 700 12px 'JetBrains Mono', monospace; color: var(--text); } .step-cmd { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--codeText); overflow: hidden; text-overflow: ellipsis; } /* mobile apps / store badges */ .store-badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .store-badge { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; background: #000; border: 1px solid rgba(255, 255, 255, .2); border-radius: 13px; padding: 11px 20px; } .store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } .store-small { font-size: 10.5px; color: rgba(255, 255, 255, .7); } .store-big { font-size: 18px; font-weight: 700; color: #fff; } /* digest */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { font-size: 13px; font-weight: 600; color: var(--text2); border: 1px solid var(--cardBorder); border-radius: 999px; padding: 7px 14px; } .digest-card { border-radius: 18px; padding: 20px; background: linear-gradient(150deg, rgba(251, 62, 75, .1), rgba(155, 70, 189, .1) 55%, rgba(79, 81, 187, .12)); border: 1px solid rgba(155, 70, 189, .28); } .digest-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(90deg, #FB6070, #9B7BFF); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; } .digest-body { margin: 0 0 15px; font-size: 15px; line-height: 1.55; color: var(--text); } .digest-need { color: #FF8CB0; } .digest-stats { display: flex; gap: 10px; } .stat { flex: 1; background: rgba(0, 0, 0, .18); border-radius: 12px; padding: 11px 12px; } .stat-num { font: 800 21px 'Plus Jakarta Sans', sans-serif; } .stat-done { color: #3DDC97; } .stat-active { color: #8C99FF; } .stat-need { color: #FF6FA8; } .stat-label { font-size: 11px; color: var(--text2); margin-top: 1px; } /* ============ WAITLIST ============ */ .waitlist-mark { width: 52px; margin: 0 auto 22px; display: block; filter: drop-shadow(0 10px 28px rgba(155, 70, 189, .45)); } .waitlist-title { margin: 0 auto 14px; font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.025em; max-width: 600px; } .waitlist-sub { margin: 0 auto 28px; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.5; color: var(--text2); max-width: 500px; } .waitlist-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 460px; margin: 0 auto; } .waitlist-input { flex: 1 1 240px; min-width: 0; padding: 15px 16px; border-radius: 13px; border: 1px solid var(--cardBorder); background: var(--card); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; outline: none; } .waitlist-input:focus { border-color: rgba(155, 70, 189, .6); } .waitlist-form .btn-grad { padding: 15px 26px; font-size: 15px; } .waitlist-error { margin: 14px auto 0; font-size: 13px; color: #FF6B7D; max-width: 460px; } .waitlist-fine { margin: 14px auto 0; font-size: 12.5px; color: var(--text3); max-width: 460px; } /* Only the visible (not [hidden]) success panel is a flex row — so the rule is correct in isolation, not just via the global [hidden] override at the top. app.js drops the `hidden` attr to reveal it. */ .waitlist-success:not([hidden]) { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 13px; justify-content: center; background: rgba(61, 220, 151, .1); border: 1px solid rgba(61, 220, 151, .28); border-radius: 14px; padding: 16px 20px; } .waitlist-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #3DDC97; color: #04371f; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; } .waitlist-success-text { font-size: 14.5px; color: var(--text); text-align: left; } /* ============ FOOTER ============ */ .footer { border-top: 1px solid var(--hair); } .footer-inner { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 5vw, 64px) clamp(20px, 5vw, 56px) 40px; display: flex; flex-wrap: wrap; gap: 40px; } .footer-brand { flex: 1 1 260px; min-width: min(100%, 240px); } .footer-logo { height: 20px; margin-bottom: 14px; } .footer-blurb { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text2); max-width: 280px; } .footer-autonomy { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text3); } .footer-autonomy a { display: inline-flex; align-items: flex-start; } .autonomy-logo { height: 15px; display: block; filter: var(--autoFilter, none); } /* Superscript ™ beside each footer wordmark — same treatment as the launch site (site/index.html), which carries the full rationale. `flex-start` pins the glyph's line box to the top of the logo box and the margin-top drops it onto the wordmark's cap line: both SVGs lead with a logomark taller than the letters, so that line sits 31.1% into the 20px OH HAI mark (6.2px) and 28.4% into the 15px Autonomy mark (4.3px). Aligning to the box top would float the ™ level with the logomark instead of the wordmark it qualifies. Sizes are ~35% of each wordmark's cap height (8.8px and 6.3px). The OH HAI wrapper is block-level `flex`, not `inline-flex`: both logo variants resolve to `display:block` through --logoDark/--logoLight, so they never sat in a line box and an inline wrapper would introduce one — enough to shift the blurb below them. `var(--text)` tracks the mark through the light/dark toggle the way the logo swap and --autoFilter already do. `aria-hidden` keeps the marks' accessible names the plain alt text — the ™ is a visual legal notice, not part of the spoken name. */ .footer-lockup { display: flex; align-items: flex-start; } .tm { line-height: 1; color: var(--text); } .tm-oh-hai { font-size: 7px; margin: 5.45px 0 0 2px; } .tm-autonomy { font-size: 5px; margin: 3.5px 0 0 1px; } .footer-cols { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 44px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 2px; } .footer-link { font-size: 13.5px; color: var(--text2); text-decoration: none; } .footer-link:hover { color: var(--text); } .footer-base { max-width: 1180px; margin: 0 auto; padding: 20px clamp(20px, 5vw, 56px); border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; } .footer-copy { font-size: 12.5px; color: var(--text3); } .footer-domain { font-size: 11.5px; color: var(--text3); } /* ============ RESPONSIVE ============ */ /* The nav is a single non-wrapping row; on phones the text links would overflow and force horizontal scroll. Below 640px, drop the secondary text links and keep the logo, the theme toggle, and the primary CTA (every nav destination is still reachable by scrolling). */ @media (max-width: 640px) { .nav-links { gap: 12px; } .nav-link { display: none; } .btn-sm { padding: 9px 14px; } } ::-webkit-scrollbar { width: 0; }