/* Botineer "Harbor Light" design system — used by the /botineer marketing pages on aux.ai. Self-contained; overrides the theme's article defaults for these pages. COLOUR TOKENS: every colour is a variable so the light theme is a pure token swap. Values are tuned against APCA (perceptual contrast), not just WCAG 2 ratios — the old palette passed WCAG 2 AA everywhere yet still read as muddy, because WCAG 2 badly over-rates light-text-on-dark at small sizes. Targets: Lc>=75 for text >=16px, Lc>=90 for 13-15px, Lc>=83 for 12px semibold. Nothing renders below 11.5px. Re-check with: node tools/contrast-audit.js */ @font-face{font-family:'Fraunces';src:url(/botineer-assets/fonts/fraunces.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Fraunces';src:url(/botineer-assets/fonts/fraunces-it.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap} @font-face{font-family:'Hanken Grotesk';src:url(/botineer-assets/fonts/hanken.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Spline Sans Mono';src:url(/botineer-assets/fonts/spline.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} :root,:root[data-theme="dark"]{ --ink-0:#0A121B; --ink-1:#0D1926; --surface:#101F2E; --surface-2:#152A3D; --water:#1C3A52; --foam:#EAF3FA; /* primary text */ --mist:#D1DBE4; /* secondary text, >=16px */ --mist-hi:#E8EDF1; /* small text, 12-15px */ --brand:#4FA3D1; /* non-text accent: dots, rules, hover borders */ --brand-tx:#CAE4F1; /* accent TEXT at small sizes */ --brand-hi:#A8D4EE; /* accent text at display sizes + links */ --brand-deep:#0B3E62; /* user chat bubble fill */ --kelp:#8FD7AD; --kelp-tx:#C1E9D1; --rope:#C33B33; --stat-ink:#FFFFFF; --line:rgba(168,212,238,.14); --line-soft:rgba(168,212,238,.09); --line-strong:rgba(168,212,238,.34); --sel-bg:#A8D4EE; --sel-ink:#0A121B; --chip-src-bg:rgba(79,163,209,.16); --chip-act-bg:rgba(127,201,169,.14); --btn-a:#5FAEDA; --btn-b:#3E90C4; --btn-ink:#06121C; --hero-glow:rgba(147,197,235,.18); --shadow-brand:0 30px 80px -34px rgba(16,96,152,.55); --nav-bg:rgba(10,18,27,.88); --rope-halo:rgba(195,59,51,.18); --dot:79,163,209; /* backdrop particle rgb */ --dot-a:.55; --link-a:.16; color-scheme:dark; } :root[data-theme="light"]{ --ink-0:#F6F9FC; --ink-1:#E9F0F7; --surface:#FFFFFF; --surface-2:#EDF3F9; --water:#C6D9E8; --foam:#0B1926; --mist:#3E4D5C; --mist-hi:#212932; --brand:#1A6FA8; --brand-tx:#104467; --brand-hi:#0C4E7F; --brand-deep:#DCEBF7; --kelp:#2E8B5F; --kelp-tx:#184932; --rope:#B23029; --stat-ink:#0B1926; --line:rgba(11,62,98,.16); --line-soft:rgba(11,62,98,.10); --line-strong:rgba(11,62,98,.30); --sel-bg:#0C4E7F; --sel-ink:#F6F9FC; --chip-src-bg:rgba(26,111,168,.12); --chip-act-bg:rgba(30,120,80,.12); --btn-a:#2E86BE; --btn-b:#17679E; --btn-ink:#FFFFFF; --hero-glow:rgba(26,111,168,.10); --shadow-brand:0 30px 80px -40px rgba(11,62,98,.28); --nav-bg:rgba(246,249,252,.88); --rope-halo:rgba(178,48,41,.18); --dot:26,111,168; --dot-a:.42; --link-a:.13; color-scheme:light; } :root{ --ease-botineer:cubic-bezier(.22,.61,.36,1); --display:'Fraunces','Iowan Old Style',Palatino,Georgia,serif; --body:'Hanken Grotesk','Avenir Next','Segoe UI',system-ui,sans-serif; --mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace; --hairline:linear-gradient(90deg,transparent,var(--line-strong),transparent); } /* the theme owns ; repaint it so the light theme isn't framed in black */ html[data-theme] body{background:var(--ink-0)} /* .bot wraps all page content (the theme owns , so we scope to a wrapper) */ .bot{display:block;position:relative;background:var(--ink-0);color:var(--foam);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased} .bot ::selection{background:var(--sel-bg);color:var(--sel-ink)} .bot a{color:var(--brand-tx);text-decoration:none} .bot .wrap{max-width:1080px;margin-inline:auto;padding-inline:32px} .bot h1,.bot h2,.bot h3{font-family:var(--display);font-optical-sizing:auto;font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0} .bot p{margin:0} .bot .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mist-hi)} .bot .kicker::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--brand-hi),var(--brand))} .bot .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:16px;cursor:pointer;border:none;border-radius:999px;padding:14px 26px;transition:filter .15s} .bot .btn.primary{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-ink)} .bot .btn.primary:hover{filter:brightness(1.08)} .bot .btn.ghost{background:transparent;border:1px solid var(--water);color:var(--foam)} .bot .btn.ghost:hover{border-color:var(--brand)} .bot :focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px;border-radius:6px} /* nav */ .bot .nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .bot .nav .wrap{display:flex;align-items:center;gap:26px;height:64px} .bot .nav .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:19px;color:var(--foam);letter-spacing:-.01em} .bot .brand-mark{width:24px;height:auto;display:block;flex:0 0 auto} .bot .nav .links{display:flex;gap:22px;font-size:15px;font-weight:500;color:var(--mist-hi)} .bot .nav .links a{color:var(--mist-hi)}.bot .nav .links a:hover{color:var(--foam)} .bot .nav .links a[aria-current="page"]{color:var(--foam);font-weight:600} .bot .nav .r{margin-left:auto;display:flex;gap:12px;align-items:center} @media(max-width:760px){.bot .nav .links{display:none}} /* mobile nav menu — button + panel injected by nav.js. Below 760px the inline links are hidden, so without this there is no route to the other pages at all. */ .bot .nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto; border-radius:999px;border:1px solid var(--water);background:transparent;color:var(--mist-hi);cursor:pointer; transition:border-color .15s var(--ease-botineer),color .15s var(--ease-botineer)} .bot .nav-toggle:hover{border-color:var(--brand);color:var(--foam)} .bot .nav-toggle svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .bot .nav-toggle .i-close{display:none} .bot .nav-toggle[aria-expanded="true"] .i-close{display:block} .bot .nav-toggle[aria-expanded="true"] .i-open{display:none} .bot .nav-panel{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column; padding:8px 32px 20px;background:var(--ink-0); border-bottom:1px solid var(--line);box-shadow:0 26px 44px -30px rgba(0,0,0,.55)} .bot .nav-panel.open{display:flex} .bot .nav-panel a{padding:14px 2px;font-size:17px;font-weight:500;color:var(--mist-hi);border-bottom:1px solid var(--line-soft)} .bot .nav-panel a:hover{color:var(--foam)} .bot .nav-panel a[aria-current="page"]{color:var(--foam);font-weight:600} .bot .nav-panel .btn{margin-top:18px;align-self:stretch} @media(max-width:760px){ .bot .nav-toggle{display:inline-flex} .bot .nav .r .btn.primary{display:none} /* moves into the panel */ .bot .nav .wrap{gap:14px} } @media(min-width:761px){.bot .nav-panel{display:none!important}} /* during a theme flip, freeze transitions so every surface changes in the same frame instead of some snapping and some fading over 150ms */ html.theme-switching .bot *,html.theme-switching .bot *::before,html.theme-switching .bot *::after{ transition:none!important;animation-play-state:paused!important} /* theme toggle (injected by theme.js into .nav .r) */ .bot .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto; border-radius:999px;border:1px solid var(--water);background:transparent;color:var(--mist-hi);cursor:pointer; transition:border-color .15s var(--ease-botineer),color .15s var(--ease-botineer),background-color .15s var(--ease-botineer)} .bot .theme-toggle:hover{border-color:var(--brand);color:var(--foam);background:var(--surface)} .bot .theme-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .bot .theme-toggle .i-sun{display:none}.bot .theme-toggle .i-moon{display:block} :root[data-theme="light"] .bot .theme-toggle .i-sun{display:block} :root[data-theme="light"] .bot .theme-toggle .i-moon{display:none} /* animated backdrop canvas (injected by backdrop.js into .hero) */ .bot .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0} .bot .hero .wrap{position:relative;z-index:1} /* hero */ .bot .hero{position:relative;overflow:hidden;padding:84px 0 76px} .bot .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 85% 55% at 50% -12%,var(--hero-glow),transparent 62%);-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)} /* slow rotating sheen behind the node field — transform-only, so it composites on the GPU */ .bot .hero::after{content:"";position:absolute;z-index:0;pointer-events:none; left:50%;top:50%;width:min(1100px,150%);aspect-ratio:1;margin:-0.5px 0 0 -0.5px;translate:-50% -50%; background:conic-gradient(from 0deg,transparent 0deg,var(--hero-glow) 62deg,transparent 140deg,transparent 220deg,var(--hero-glow) 288deg,transparent 352deg); filter:blur(44px);opacity:.85;will-change:transform; -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 74%); mask-image:radial-gradient(closest-side,#000 30%,transparent 74%); animation:bot-swirl 54s linear infinite} @keyframes bot-swirl{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.bot .hero::after{animation:none}} .bot .hero h1{font-size:clamp(40px,5.6vw,66px);line-height:1.04;margin:20px 0 0} .bot .hero h1 .glow{color:var(--brand-hi)} .bot .hero .lede{font-size:clamp(18px,2vw,21px);color:var(--mist);max-width:34em;margin:22px 0 0} .bot .hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 0} .bot .hero .note{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--mist-hi);letter-spacing:.02em;margin:16px 0 0} /* sections */ .bot section{position:relative} .bot .band{padding:96px 0} .bot .tint{background:var(--ink-1)} .bot .sec-h{font-size:clamp(30px,3.4vw,42px);line-height:1.12;max-width:18em} .bot .sec-sub{color:var(--mist);font-size:18px;max-width:38em;margin:14px 0 0} .bot hr.hair{height:1px;background:var(--hairline);border:0;margin:0} /* stats */ .bot .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;border-top:1px solid var(--line);padding-top:40px;margin-top:24px} .bot .stat .n{font-family:var(--mono);font-weight:500;font-size:clamp(32px,4.4vw,54px);letter-spacing:-.02em;color:var(--stat-ink);font-variant-numeric:tabular-nums;line-height:1.05} .bot .stat .n .plus{color:var(--brand-hi)} .bot .stat .l{font-size:15px;color:var(--mist-hi);margin-top:8px} /* cards */ .bot .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} .bot .card{border:1px solid transparent;border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px; background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(180deg,var(--line-strong),var(--line-soft) 45%,transparent) border-box;transition:transform .18s} .bot .card:hover{transform:translateY(-3px)} .bot .card .aud{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-tx)} .bot .card h3{font-size:22px} .bot .card p{font-size:16px;color:var(--mist);line-height:1.55} .bot .card .go{margin-top:auto;padding-top:10px;font-weight:600;color:var(--brand-tx);font-size:15px} /* pillars (manifesto) */ .bot .pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:52px} .bot .pillar{padding:28px 24px 6px;text-align:left;position:relative} .bot .pillar+.pillar::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--line)} .bot .pillar .tag{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-tx);display:block;margin-bottom:12px} .bot .pillar h3{font-size:21px;margin:0 0 8px}.bot .pillar p{font-size:16px;color:var(--mist)} .bot .manifesto{text-align:center}.bot .manifesto .wrap{max-width:900px} .bot .manifesto h2{font-size:clamp(36px,5vw,58px);line-height:1.05;margin-top:20px} .bot .manifesto h2 .glow{color:var(--brand-hi)} .bot .manifesto .lede{font-size:clamp(18px,2vw,21px);color:var(--mist);max-width:34em;margin:22px auto 0} .bot .manifesto .lede b{color:var(--foam);font-weight:600} .bot .signoff{font-family:var(--body);font-style:normal;font-weight:500;font-size:clamp(16.5px,1.8vw,19px);color:var(--foam);letter-spacing:-.005em;margin:52px auto 0;max-width:30em;line-height:1.55} /* footer */ .bot .foot{background:var(--ink-1);padding:56px 0 40px;border-top:1px solid var(--line)} .bot .foot .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:baseline} .bot .foot .motto{font-family:var(--display);font-style:italic;color:var(--brand-tx);font-size:17px} .bot .foot .meta{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--mist-hi)} /* ===== conversation showcase (v4 hero-chat, faithful port) ===== */ .bot .show{padding:74px 0 26px;background:var(--ink-0)} .bot .show .chat-wrap{max-width:560px;margin:34px auto 0} /* scenario switcher — pill tabs; active gets the accent fill */ .bot .scenario-tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;justify-content:center;flex-wrap:wrap} .bot .scenario-tabs::-webkit-scrollbar{height:5px} .bot .scenario-tabs::-webkit-scrollbar-thumb{background:var(--water);border-radius:3px} .bot .scn-tab{flex:0 0 auto;font-family:var(--body);font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--mist-hi);background:transparent;border:1px solid var(--water);border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap;transition:background-color .15s var(--ease-botineer),border-color .15s var(--ease-botineer),color .15s var(--ease-botineer)} .bot .scn-tab:hover{border-color:var(--brand);color:var(--foam)} .bot .scn-tab[aria-selected="true"]{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));border-color:transparent;color:var(--btn-ink);font-weight:600} /* chat card */ .bot .chat-card{border:1px solid transparent;border-radius:16px;overflow:hidden;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(180deg,var(--line-strong),var(--line-soft) 45%,transparent) border-box;box-shadow:var(--shadow-brand)} .bot .chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft)} .bot .chat-head img{width:36px;height:auto;flex:0 0 auto} .bot .chat-head .t{font-family:var(--body);font-weight:600;font-size:15px;color:var(--foam)} .bot .chat-head .s{font-size:13px;font-weight:600;color:var(--mist-hi)} .bot .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--mist-hi)} .bot .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rope);box-shadow:0 0 0 3px var(--rope-halo)} .bot .chat-body{padding:20px 18px 22px;display:flex;flex-direction:column;gap:12px;min-height:330px} .bot .msg{max-width:86%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5} .bot .msg.u{align-self:flex-end;background:var(--brand-deep);color:var(--foam);border-bottom-right-radius:4px} .bot .msg.b{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line-soft);border-bottom-left-radius:4px} .bot .msg b{font-weight:700;color:inherit} .bot .src{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--mono);font-weight:600;font-size:12px;color:var(--brand-tx);background:var(--chip-src-bg);border-radius:6px;padding:4px 8px} .bot .src::before{content:"§"} .bot .act{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--mono);font-weight:600;font-size:12px;color:var(--kelp-tx);background:var(--chip-act-bg);border-radius:6px;padding:4px 8px} .bot .act::before{content:"✓"} /* in-chat payment widget (a bot-side bubble variant) */ .bot .msg.b.pay{width:230px;max-width:230px;padding:0;background:transparent;border:none} .bot .pay-card{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:16px;border-bottom-left-radius:4px;padding:13px 14px;display:flex;flex-direction:column;gap:9px} .bot .pay-card .pay-head{display:flex;align-items:center;gap:6px;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.07em;color:var(--mist-hi)} .bot .pay-card .pay-head .padlock{flex:0 0 auto;color:var(--brand)} .bot .pay-card .pay-amt{font-size:15.5px;font-weight:600;color:var(--foam);letter-spacing:-.01em} .bot .pay-card .pay-row{font-size:13px;font-weight:600;color:var(--mist-hi);font-variant-numeric:tabular-nums} .bot .pay-card .pay-btn{align-self:flex-start;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:var(--btn-ink);border:none;font-family:var(--body);font-size:13px;font-weight:600;border-radius:999px;padding:7px 16px;cursor:default} /* typing indicator + staged reveal */ .bot .typing{align-self:flex-start;display:none;gap:5px;padding:13px 16px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:16px;border-bottom-left-radius:4px} .bot .typing.on{display:flex} .bot .typing i{width:6px;height:6px;border-radius:50%;background:var(--mist)} @media(prefers-reduced-motion:no-preference){.bot .typing i{animation:tp 1s infinite}.bot .typing i:nth-child(2){animation-delay:.15s}.bot .typing i:nth-child(3){animation-delay:.3s}} @keyframes tp{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .bot .msg{opacity:0;transform:translateY(6px)} .bot .msg.shown{opacity:1;transform:none;transition:opacity .3s var(--ease-botineer),transform .3s var(--ease-botineer)} @media(prefers-reduced-motion:reduce){.bot .msg{opacity:1;transform:none}} .bot .chat-cap{font-size:14px;color:var(--mist-hi);margin-top:16px;text-align:center;padding-inline:20px;max-width:44em;margin-inline:auto} .bot .chat-cap a{color:var(--brand-tx)} .bot .chat-cap a:hover{color:var(--foam)} @media(max-width:760px){.bot .stats,.bot .cards,.bot .pillars{grid-template-columns:1fr}.bot .pillar+.pillar::before{display:none}.bot .pillar{border-top:1px solid var(--line)}.bot .msg{max-width:92%}}