/* ========================================================================= Shared styling for the functional pages and the two global widgets. ------------------------------------------------------------------------- Served at /carl-extras.css and linked by every page built on the product side (help, docs, changelog, status, tools, crawlers, trust, legal). Ships from this repo so it is versioned here; the deploy syncs it over the bucket copy on every push. The widget blocks at the foot override styles that salience-chat.js and waitlist-modal.js inject into at RUNTIME. Because those land after this sheet in the cascade, equal specificity would lose, so each override is qualified with `body` to win on specificity rather than with !important. ========================================================================= */ /* ========================================================================= ONE page template for every functional page. ------------------------------------------------------------------------- These pages were generated separately and each arrived with its own skeleton: four different container classes (.tool-container, .cp-wrap, .wrap, .page-wrapper), different names for the same eyebrow (.microlabel, .eyebrow) and lead (.lede, .sub, .page-subtitle), and a breadcrumb on exactly one of them. Painting each one on-brand separately still left four templates. So the shared furniture is defined ONCE here and the container/eyebrow/lead classes are aliased onto it. Per-page sheets load after this one and carry only what is genuinely page-specific: the upload zone, the crawler ledger, the help sidebar. Breadcrumbs are off entirely (see below): only one page had one, so it read as a template difference rather than wayfinding. ========================================================================= */ .cp-main{ font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); color:var(--color-ink,#000); background:var(--color-paper,#fff); font-size:0.875rem; line-height:1.75; -webkit-font-smoothing:antialiased; } .cp-main h1,.cp-main h2,.cp-main h3,.cp-main h4{ font-family:var(--font-display);letter-spacing:-0.02em;line-height:1.15; } .cp-main *{border-radius:0!important;box-shadow:none!important;text-shadow:none!important} .cp-main ::selection{background:var(--color-accent);color:var(--color-ink)} /* ---- One container ----------------------------------------------------- */ .cp-main .cp-wrap, .cp-main .tool-container, .cp-main .wrap, .cp-main .page-wrapper{ max-width:1180px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem; } @media(min-width:640px){ .cp-main .cp-wrap,.cp-main .tool-container,.cp-main .wrap,.cp-main .page-wrapper{ padding-left:2rem;padding-right:2rem} } @media(min-width:1024px){ .cp-main .cp-wrap,.cp-main .tool-container,.cp-main .wrap,.cp-main .page-wrapper{ padding-left:3rem;padding-right:3rem} } /* ---- One hero ---------------------------------------------------------- */ /* Vertical rhythm lives on the container so every page starts and ends the same distance from the chrome. .cp-hero is also the container on one page, so only its vertical padding is reset, never its gutters. */ .cp-main .cp-wrap, .cp-main .tool-container, .cp-main .wrap, .cp-main .page-wrapper{padding-top:3rem;padding-bottom:6rem} .cp-main .cp-wrap+.cp-wrap{padding-top:0} .cp-main .cp-hero:not(.cp-wrap), .cp-main .tool-hero{padding-top:0;padding-bottom:0;margin-bottom:3rem} .cp-main .cp-hero.cp-wrap{padding-bottom:0;margin-bottom:3rem} /* Breadcrumbs are off. Only one of these pages ever had one, so it read as a template difference rather than a wayfinding aid; the header carries navigation. Hidden rather than deleted because the markup is generated on the product side. */ .cp-main .breadcrumb{display:none} /* Eyebrow lines above the H1 are off, on all their names. The class also marks field labels and card heads elsewhere, so only the hero's own line is hidden. */ .cp-main .eyebrow, .cp-main .cp-hero > .microlabel{display:none} /* One H1 scale on every page */ .cp-main h1, .cp-main .page-title, .cp-main .cp-hero h1{ font-family:var(--font-display); font-size:clamp(2rem,4.2vw,2.9rem);font-weight:600; letter-spacing:-0.03em;line-height:1.1;margin:0 0 1rem;text-wrap:balance; /* Every word takes an initial capital (capitalize only raises first letters, so AI, IP etc. keep their case). */ text-transform:capitalize; } /* H1s are plain ink, no highlight. The markup wraps a word of two of the headlines in a span (the old "gradient text"); it renders as the rest of the heading. */ .cp-main h1 .gradient-text, .cp-main .cp-hero h1 span{ /* !important: the checker's span carries an inline color attribute */ color:inherit!important;-webkit-text-fill-color:currentColor!important; background:none!important;padding:0; }/* One lead paragraph, under all of its names */ .cp-main .lede, .cp-main .sub, .cp-main .page-subtitle, .cp-main .tool-hero p{ max-width:62ch;color:rgba(0,0,0,0.75); font-size:0.9375rem;line-height:1.75;margin:0 0 1rem; } /* ---- One section rhythm ------------------------------------------------ */ .cp-main .section, .cp-main .result-section{margin-bottom:4rem;scroll-margin-top:7rem} .cp-main .section h2, .cp-main .result-section h2{ font-family:var(--font-display); font-size:1.6rem;font-weight:500;letter-spacing:-0.025em; margin-bottom:1rem;padding-bottom:0.75rem; border-bottom:1px solid var(--color-hairline,#e6e6e6); } /* ========================================================================= Waitlist modal (waitlist-modal.js) Was: #f5f5f5 box, 16px radius, 60px drop shadow, #0e7490 teal button, #f43f5e error, cyan focus ring. None of it Salience. Functional ids are untouched, so the JS binds exactly as before. ========================================================================= */ body #wl-overlay{background:rgba(0,0,0,0.35);backdrop-filter:blur(3px)} body #wl-box{ background:var(--color-paper,#fff); border:1px solid var(--color-ink,#000); border-radius:0; box-shadow:none; max-width:420px; padding:2.5rem 2.25rem; } body #wl-close{ top:0.75rem;right:0.9rem; color:var(--color-muted,#6b6b6b); font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:1.1rem; } body #wl-close:hover{color:var(--color-ink,#000)} body .wl-title{ font-family:var(--font-display); font-size:1.5rem;font-weight:500;letter-spacing:-0.025em;line-height:1.15; color:var(--color-ink,#000);margin:0 0 0.6rem; } body .wl-sub{ font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); color:rgba(0,0,0,0.7);font-size:0.8125rem;line-height:1.7;margin:0 0 1.75rem; } body .wl-input{ border-radius:0; border:1px solid var(--color-hairline,#e6e6e6); background:var(--color-paper,#fff); font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem; padding:0.8rem 0.9rem;margin-bottom:0.6rem; color:var(--color-ink,#000); } body .wl-input::placeholder{color:var(--color-muted,#6b6b6b)} body .wl-input:focus{border-color:var(--color-ink,#000);outline:2px solid var(--color-accent,#8cf37a);outline-offset:-1px} body .wl-input.code{letter-spacing:0.35em;font-size:1.25rem;font-family:var(--font-mono)} body .wl-btn{ border-radius:0; background:var(--color-ink,#000);color:var(--color-paper,#fff); font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem;font-weight:400; letter-spacing:-0.01em;padding:0.9rem; transition:background .25s,color .25s; } body .wl-btn:hover{background:var(--color-accent,#8cf37a);color:var(--color-ink,#000);opacity:1} body .wl-btn:disabled{background:var(--color-hairline,#e6e6e6);color:var(--color-muted,#6b6b6b);opacity:1} body .wl-error{font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--color-alert-ink,#c2452a);font-size:0.75rem} body .wl-info{font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--color-accent-ink,#2c7a2c);font-size:0.75rem} body .wl-note{font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--color-muted,#6b6b6b);font-size:0.6875rem;margin-top:0.9rem} body .wl-resend{font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--color-accent-ink,#2c7a2c);font-size:0.75rem} body .wl-success-icon{ border-radius:0; width:44px;height:44px; background:var(--color-accent,#8cf37a); color:var(--color-ink,#000); } /* ========================================================================= Salience AI chat widget (salience-chat.js) Was: #0e7490 links/headers/focus, Tailwind greys, rounded everything, and two straight bugs from an earlier find-and-replace — a WHITE drop shadow on a white page (invisible), and #1a1a1a `pre code` text on a #111111 block (near-invisible). Both fixed here. ========================================================================= */ body .ll-chat-root{font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--color-ink,#000)} body .ll-chat-bubble{ border-radius:0; width:52px;height:52px; background:var(--color-ink,#000);color:var(--color-paper,#fff); box-shadow:0 8px 24px rgba(0,0,0,0.10); } body .ll-chat-bubble:hover{background:var(--color-accent,#8cf37a);color:var(--color-ink,#000);transform:none} body .ll-chat-panel{ border-radius:0; border:1px solid var(--color-ink,#000); box-shadow:0 16px 48px rgba(0,0,0,0.10); bottom:92px; } body .ll-chat-header{border-bottom:1px solid var(--color-hairline,#e6e6e6);padding:1rem 1.1rem} body .ll-chat-header strong{ font-family:var(--font-display); font-size:0.95rem;font-weight:500;letter-spacing:-0.02em;color:var(--color-ink,#000); } body .ll-chat-header span{ font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase; color:var(--color-muted,#6b6b6b);margin-top:0.3rem; } body .ll-chat-close{color:var(--color-muted,#6b6b6b);font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)} body .ll-chat-close:hover{color:var(--color-ink,#000)} body .ll-chat-body{background:var(--color-accent-soft,#f9f8f9);padding:1.1rem;gap:0.8rem} body .ll-chat-body a{color:var(--color-accent-ink,#2c7a2c)} body .ll-chat-body h2,body .ll-chat-body h3,body .ll-chat-body h4{ font-family:var(--font-display);font-weight:500;color:var(--color-ink,#000); } body .ll-chat-body th{ font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); color:var(--color-muted,#6b6b6b);font-weight:500; font-size:0.625rem;letter-spacing:0.14em; } body .ll-chat-body td{color:rgba(0,0,0,0.8)} body .ll-chat-body th,body .ll-chat-body td{border-bottom:1px solid var(--color-hairline,#e6e6e6)} /* The inverted code register: accent green on ink, as on the tool pages. */ body .ll-chat-body code{ border-radius:0; background:var(--color-ink,#000); color:var(--color-accent,#8cf37a); font-family:var(--font-mono); } body .ll-chat-body pre{border-radius:0;background:var(--color-ink,#000)} body .ll-chat-body pre code{color:var(--color-accent,#8cf37a);background:transparent} body .ll-msg{border-radius:0;font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem;line-height:1.7} body .ll-msg.user{background:var(--color-ink,#000);color:var(--color-paper,#fff)} body .ll-msg.ai{background:var(--color-paper,#fff);border:1px solid var(--color-hairline,#e6e6e6);color:var(--color-ink,#000)} body .ll-msg.system{color:var(--color-muted,#6b6b6b);font-size:0.6875rem} body .ll-typing span{border-radius:0;background:var(--color-accent-deep,#5fdc55)} body .ll-chat-foot{border-top:1px solid var(--color-hairline,#e6e6e6);padding:0.9rem} body .ll-chat-input{ border-radius:0; border:1px solid var(--color-hairline,#e6e6e6); font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem; } body .ll-chat-input:focus{border-color:var(--color-ink,#000)} body .ll-chat-send{ border-radius:0; background:var(--color-ink,#000);color:var(--color-paper,#fff); font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem;font-weight:400; transition:background .25s,color .25s; } body .ll-chat-send:hover:not(:disabled){background:var(--color-accent,#8cf37a);color:var(--color-ink,#000)} body .ll-chat-send:disabled{background:var(--color-hairline,#e6e6e6);color:var(--color-muted,#6b6b6b)} /* Phone layout for the chat panel lives in salience-chat.js (full-screen sheet sized to the visual viewport, 16px input, dimmed page). */ body .ll-chat-foot small{font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--color-muted,#6b6b6b);font-size:0.625rem} body .ll-chat-panel.ll-inline{border-radius:0;border:1px solid var(--color-hairline,#e6e6e6)}