/* yotta.bot landing page.
*
* Brand tokens mirror yotta-bot/frontend/styles.css. Marketing page
* uses light-theme only.
*
* Design references:
* - https://www.tresmarescapital.com/en/ (scroll-reveal + pinned-side,
* restrained palette, generous whitespace, typography-led hierarchy)
* - Brief: docs/briefs/2026-05-24-yotta-bot-landing-page.md
*
* Non-negotiables from the brief:
* - Cream background, not white
* - IBM Plex Mono headlines + IBM Plex Sans body
* - Single accent color, sparing
* - No gradients, no drop shadows beyond a hairline
* - No stock photography (zero ![]()
tags on this page)
* - <100 KB total page weight (including fonts)
*/
/* ── Tokens ────────────────────────────────────────────────────── */
:root {
--bg: #fbf6e4;
--bg2: #efead9;
--bg3: #e3decd;
--surface: #ffffff;
--text: #231a15;
--text2: #5f574f;
--text3: #8f887d;
--accent: #7cbd3c; /* yotta_bot green (matches --sc-green in product UI) */
/* Borders use var(--text) (the foreground color — always the
* opposite of var(--bg)) so they stay visible in both themes:
* dark-alpha on cream in light mode, cream-alpha on dark in
* dark mode. No separate override needed in dark theme. */
--border: color-mix(in srgb, var(--text) 12%, transparent);
--border-strong: color-mix(in srgb, var(--text) 25%, transparent);
/* `--display` = the big-bold-Helvetica stack for hero + section headlines.
* System fonts; no web-font load needed. macOS/iOS get Helvetica Neue,
* Windows falls through to Arial, Linux to whatever sans is installed.
* If we ever want pixel-identical rendering across OSes, swap for a
* Helvetica-like Google Font (Inter, Manrope) — pay the load cost. */
--display: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
--sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--content-max: 1100px;
--gutter: clamp(20px, 4vw, 48px);
/* Measured rendered height of the sticky site-header (nav row:
* 18px x 2 padding + ~44px content + 1px border, plus the 3px
* brand stripe = 84px). Used to size the hero to exactly one
* viewport minus the header, so the first paint fills the space
* below the header with the content vertically centered and the
* next section sitting right at the fold.
* Update if nav padding/font/stripe height changes meaningfully. */
--nav-h: 84px;
--stripe-h: 3px;
}
/* ── Dark theme ────────────────────────────────────────────────────
* Activated when (set by the inline init
* script in based on localStorage + prefers-color-scheme).
*
* Strategy: flip the core surface + text tokens. Sections that use
* `background: var(--text)` (cap-intro, footer) auto-invert
* because the variable itself flips. In dark mode the two
* inverting panels (#products-overview .cap-intro and footer) are
* then overridden back to dark surfaces — products to page bg
* and footer to --bg2 — so they don't sit as bright cream slabs
* in an otherwise dark page. See the override below the
* #products-overview block.
*
* Accent stays green in both themes — the brief originally
* suggested yellow for dark mode, but the green reads as the
* brand's primary accent and we want that consistency across
* link hovers, cap-tags, tier-labels, and compare-table emphasis
* regardless of mode. */
[data-theme="dark"] {
--bg: #2f2621;
--bg2: #3b322c;
--bg3: #473f38;
--surface: #3b322c;
--surface2: #473f38;
--text: #fbf6e4;
--text2: #bfb9ab;
--text3: #8f887d;
--accent: #7cbd3c;
/* --border / --border-strong inherit from :root — both use
* var(--text), which is theme-aware, so no override needed. */
}
/* ── Reset-ish ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* `overflow-x: clip` (not `hidden`) so accidental horizontal
* overflow anywhere on the page can't produce a page-wide
* horizontal scrollbar — while still letting `position: sticky`
* on the nav keep working. `hidden` would break sticky; `clip`
* doesn't establish a scrolling context. */
overflow-x: clip;
}
h1, h2, h3, h4, h5 {
font-family: var(--display);
/* Bold-Helvetica display feel — Apple/Stripe-like; tight tracking +
* tight leading for punch at large sizes. h4/h5 still use this stack
* but inherit defaults; the .cap-tag / .section-label / .tier-label
* micro-labels stay in mono for the all-caps treatment. */
font-weight: 700;
line-height: 1.05;
margin: 0;
letter-spacing: -0.025em;
}
h4, h5 {
/* Small headings (footer "Contact" / "For customers"): the bold mono-
* label treatment is more appropriate than display-bold-Helvetica. */
font-family: var(--mono);
font-weight: 500;
letter-spacing: 0;
line-height: 1.3;
}
p { margin: 0 0 1em 0; }
/* Explicit weight on so it stays bold even inside light-weight
* paragraphs (e.g. .cap-intro-lede at 300, where the UA `bolder`
* default only steps to 400). Used to emphasise brand mentions
* (yotta_bot) and inline emphasis in compare cells. */
strong { font-weight: 700; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a {
color: var(--text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--border-strong);
transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
a:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
/* `.accent` is used twice (the "prompt to prod" + "where you need it"
* spans in the hero). Hardcoded to brand green so it stays green in both
* light AND dark mode — the theme-flipping --accent (green → yellow) is
* still used elsewhere (link hovers, cap-tag, tier-label, etc.). */
.accent { color: #7cbd3c; }
/* ── Site header (nav row + brand stripe) ─────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 50;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px var(--gutter);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--border);
}
/* 5-color brand stripe — same palette as yotta-bot/frontend's
* primitives.jsx StripeBar (and yotta-bot/frontend/styles.css's
* --sc-* tokens). Hard color stops so each band is exactly 20%
* of the page width with no gradient blend. */
.stripe-bar {
height: var(--stripe-h);
background: linear-gradient(
to right,
#7cbd3c 0%, #7cbd3c 20%,
#f2c840 20%, #f2c840 40%,
#e07235 40%, #e07235 60%,
#d13644 60%, #d13644 80%,
#86347c 80%, #86347c 100%
);
}
.wordmark {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--text);
}
.wordmark-img {
/* Logo + logotype as a PNG. Two variants per location (on-light /
* on-dark) — only the matching one is shown via the rules below.
*
* Header: 22px tall. Footer: 26px tall. Width auto so the image's
* natural aspect ratio drives it. */
height: 22px;
width: auto;
display: block;
flex-shrink: 0;
}
footer .wordmark-img { height: 26px; }
/* ── Wordmark show/hide per theme + location ──────────────────
*
* Two image variants:
* .wordmark-on-light = the dark-colored logo (for light bg)
* .wordmark-on-dark = the cream-colored logo (for dark bg)
*
* Page background flips between cream (light mode default) and
* dark (dark mode). The cap-intro/footer have background:var(--text)
* which always inverts whatever the page background is. So:
*
* light mode | header bg = light → use on-light
* | footer bg = dark → use on-dark
*
* dark mode | header bg = dark → use on-dark
* | footer bg = dark → use on-dark (dark-mode override
* lifts footer to a
* lighter dark surface
* rather than cream)
*
* The cap-intro panel doesn't display a wordmark image so it isn't
* covered by these rules. */
.wordmark-on-light { display: block; }
.wordmark-on-dark { display: none; }
footer .wordmark-on-light { display: none; }
footer .wordmark-on-dark { display: block; }
[data-theme="dark"] .wordmark-on-light { display: none; }
[data-theme="dark"] .wordmark-on-dark { display: block; }
/* Footer bg stays dark in dark mode (see #products-overview/footer
* dark-mode override below), so footer uses the same on-dark
* (cream-colored) logo as the rest of the page — no override needed. */
/* ── Theme toggle button ───────────────────────────────────────
* Lives between the nav links and the "Book a demo" CTA. The two
* icon spans (light/dark) are mutually exclusive — CSS shows
* whichever matches the current theme. */
/* Matches the product app's top-bar toggle
(yotta-bot/frontend/src/app.jsx): a bordered box showing the icon +
the target action — "◐ DARK" in light mode, "◑ LIGHT" in dark. */
.theme-toggle {
display: inline-flex;
align-items: center;
background: none;
border: 1px solid var(--border-strong);
padding: 5px 12px;
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text2);
line-height: 1;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text3); }
.theme-toggle-state { display: inline-block; }
.theme-toggle-state-dark { display: none; }
[data-theme="dark"] .theme-toggle-state-light { display: none; }
[data-theme="dark"] .theme-toggle-state-dark { display: inline-block; }
.nav nav {
display: flex;
align-items: center;
gap: 28px;
font-family: var(--mono);
font-size: 14px;
}
.nav nav a {
text-decoration: none;
color: var(--text2);
}
.nav nav a:hover { color: var(--text); }
/* `.cta-secondary` is the canonical "Book a demo" button — used in
* the nav, the hero, and the final-cta section. Same shape
* everywhere by design (uniform CTA treatment > screaming-button
* hierarchy). Brand-green resting, darker-green on hover. Text stays
* cream regardless of theme for AA contrast against both fills. */
.cta-secondary {
display: inline-block;
font-family: var(--mono);
font-size: 14px;
background: #7cbd3c;
color: #fbf6e4 !important;
border: 1px solid #7cbd3c;
border-radius: 999px;
padding: 10px 20px;
text-decoration: none;
transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cta-secondary:hover {
background: #7cbd3c;
border-color: #7cbd3c;
color: #fbf6e4 !important;
/* Only #7cbd3c green is allowed, so darken-on-hover uses a filter, not a 2nd green. */
filter: brightness(0.92);
}
/* In the hero (flex column, default align-items: stretch), prevent
* the button from spanning the full content width. */
.hero .cta-secondary { align-self: flex-start; }
/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
max-width: var(--content-max);
margin: 0 auto;
/* Vertical padding is viewport-HEIGHT based (vh) and modest. The old
* clamp(80px, 10vw, 140px) was viewport-WIDTH based, so on a wide
* screen it ballooned to 140px top+bottom and — with the tall
* headline — pushed the hero past its 100svh-minus-header target,
* leaving a header-height of dead scroll before the next panel.
* justify-content already centers the content; this padding is only
* the min top/bottom gutter on short screens, so keep it small. */
padding: clamp(24px, 4vh, 72px) var(--gutter);
/* Hero specifically IS screen-height (unlike cap-intro and the
* caps, which are content-sized). `100svh` avoids the mobile-
* Safari URL-bar jump; `min-height` (not `height`) so content
* can still grow past the viewport on a short window. */
min-height: calc(100vh - var(--nav-h));
min-height: calc(100svh - var(--nav-h));
display: flex;
flex-direction: column;
justify-content: center;
}
.hero h1 {
/* vw-based clamp scales only with horizontal resize — the
* normal pattern for narrow-viewport readability. No vh
* scaling, no viewport-locked sections, no resize logic. */
font-size: clamp(36px, 5vw, 56px);
max-width: 22ch;
margin-bottom: 28px;
}
.lede {
font-family: var(--sans);
font-weight: 300;
font-size: 19px;
line-height: 1.55;
color: var(--text2);
max-width: 56ch;
margin-bottom: 40px;
}
/* ── Section base ──────────────────────────────────────────────── */
section {
max-width: var(--content-max);
margin: 0 auto;
padding: clamp(80px, 12vw, 160px) var(--gutter);
}
section h2 {
font-size: clamp(30px, 4.5vw, 52px);
max-width: 24ch;
margin-bottom: 32px;
}
.section-label {
margin-bottom: 60px;
}
.section-label span {
display: inline-block;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text3);
margin-bottom: 16px;
}
/* ── Problem / Solution — panel 2. Full-width light (var(--bg2)) panel
matching the deployment section; two stacked prose blocks. */
.problem-solution {
border-top: 1px solid var(--border);
background: var(--bg);
max-width: none;
padding-left: 0;
padding-right: 0;
}
.problem-solution .ps-block {
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
padding: 0 var(--gutter);
}
.problem-solution .ps-block + .ps-block {
margin-top: clamp(56px, 8vw, 104px);
}
.ps-block p {
font-family: var(--sans);
font-weight: 300;
font-size: 18px;
line-height: 1.6;
color: var(--text2);
max-width: 68ch;
margin-bottom: 20px;
}
.ps-block .ps-closer {
color: var(--text);
font-weight: 400;
font-size: 20px;
}
.ps-block .ps-closer.ps-accent { color: var(--accent); }
/* Short, left-aligned rule between the Problem and Solution blocks — a
quiet separator that doesn't stretch across the page. */
.ps-divider {
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
padding: 0 var(--gutter);
}
.ps-divider::before {
content: "";
display: block;
width: 64px;
height: 1px;
margin: clamp(48px, 7vw, 88px) 0;
background: color-mix(in srgb, var(--text) 22%, transparent);
}
/* ── Approach — left-aligned eyebrow + hero + founder quote, then a
* 2-up tier-grid contrasting Agent Management Platform vs Agent
* Control Plane. Mirrors .deployment's full-bleed-bg + constrained-
* inner-content shape; cream --bg background sits lighter than the
* surrounding panels (problem-solution / products-overview) so it
* reads as a quiet pause + frame for the definition before the
* product list. */
.approach {
border-top: 1px solid var(--border);
background: var(--bg2);
max-width: none;
padding-left: 0;
padding-right: 0;
}
.approach .section-label,
.approach .approach-quote,
.approach .approach-attribution,
.approach .tier-grid {
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
box-sizing: border-box;
}
.approach-quote {
font-family: var(--sans);
font-style: italic;
font-weight: 300;
font-size: clamp(19px, 1.8vw, 23px);
line-height: 1.6;
color: var(--text2);
max-width: 72ch;
margin-top: 0;
margin-bottom: 28px;
}
.approach-attribution {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 0;
}
.approach-attribution-name { color: var(--text); font-weight: 500; }
.approach-attribution-title { color: var(--text3); }
/* ── Capabilities — intro panel + cap articles ─────────────────── */
.capabilities { max-width: none; padding: 0; }
/* Intro panel — matches the deployment ("how you run it") section:
* same light --bg2 background, outer full-width for the background
* bleed, inner content constrained to --content-max + centered. No
* viewport-height lock. (Shared by the #products-overview panel.) */
.cap-intro {
background: var(--bg2);
color: var(--text);
padding: clamp(80px, 12vw, 160px) 0;
}
.cap-intro-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.cap-intro-eyebrow {
display: inline-block;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--text) 55%, transparent);
margin-bottom: 20px;
}
.cap-intro h2 {
font-size: clamp(32px, 4.5vw, 52px);
max-width: 18ch;
margin-bottom: 24px;
color: var(--text);
}
.cap-intro-lede {
font-family: var(--sans);
font-weight: 300;
font-size: 18px;
line-height: 1.55;
color: color-mix(in srgb, var(--text) 75%, transparent);
max-width: 56ch;
margin-bottom: 36px;
}
.cap-index {
font-family: var(--mono);
border-top: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
max-width: 760px;
}
.cap-index li {
border-bottom: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
}
/* The grid lives on the (each row links to its capability), so the
num / name / blurb spans are its DIRECT children = grid items. Mirrors
.product-index a. Putting the grid on instead left the as the
sole grid item, cramming all three spans into the 56px first column. */
.cap-index a {
display: grid;
grid-template-columns: 56px 180px 1fr;
align-items: baseline;
gap: 20px;
padding: 18px 0;
color: var(--text);
text-decoration: none;
}
.cap-index-num {
font-weight: 300;
color: color-mix(in srgb, var(--text) 50%, transparent);
font-size: 18px;
}
.cap-index-name {
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
}
.cap-index-blurb {
font-family: var(--sans);
font-size: 15px;
color: color-mix(in srgb, var(--text) 70%, transparent);
}
/* Product list inside the (dark) #products-overview panel — num + name +
lead + description per row. Colours derive from var(--bg) so they invert
with the theme alongside the panel. */
.product-index {
list-style: none;
font-family: var(--mono);
margin-top: 56px;
}
/* Group labels (Core Products / Specialty Products) carry the dividers
that introduce the next product row, so the .product-index border-top
is dropped in favor of per-section border-bottoms on the labels. Every
index page in /products/ uses group labels at the top today; if an
ungrouped index ships later it would need to re-introduce the rule. */
.product-index li { border-bottom: 1px solid color-mix(in srgb, var(--bg) 15%, transparent); }
.product-index a {
display: grid;
grid-template-columns: 48px 1fr;
gap: 24px;
padding: 28px 0;
text-decoration: none;
}
.pi-num {
font-weight: 300;
font-size: 18px;
color: color-mix(in srgb, var(--bg) 50%, transparent);
}
.pi-body { display: flex; flex-direction: column; gap: 8px; }
.pi-name {
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
color: var(--bg);
transition: color 0.2s var(--ease);
}
.pi-lead { font-size: 15px; color: color-mix(in srgb, var(--bg) 88%, transparent); }
.pi-desc {
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: color-mix(in srgb, var(--bg) 62%, transparent);
max-width: 72ch;
}
.product-index a:hover .pi-name { color: var(--accent); }
/* Group labels above subsets of the product list — "Core Products" /
"Specialty Products". Rendered as so they
sit inside the same as the product rows without breaking
numbering semantics. The label gets its own visual weight without
becoming a clickable link.
The label keeps its border-bottom so the line below it acts as the
"top divider" of the next product row (Core Products → divider →
Identity; Specialty Products → divider → Drone Platform). The
border-top isn't needed: Specialty Products sits below Alerts
Manager's existing border-bottom, and Core Products has nothing
above it (the panel padding alone). */
.product-index-group-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--accent);
padding: 40px 0 16px;
}
.product-index-group-label:first-child { padding-top: 0; }
/* The homepage Products overview panel is the DARK variant of the intro
* panel: near-black background in light mode (and the reverse — cream —
* in dark mode, since both derive from var(--text)/var(--bg)). The
* shared .cap-intro base above is light (matching the deployment panel);
* these overrides flip just the Products panel back to the inverse so it
* stands apart. Scoped to #products-overview, so product pages (which
* drop this panel) and the capabilities panel are unaffected. */
#products-overview .cap-intro { background: var(--text); color: var(--bg); }
#products-overview .cap-intro-eyebrow { color: color-mix(in srgb, var(--bg) 55%, transparent); }
#products-overview .cap-intro h2 { color: var(--bg); }
#products-overview .cap-intro-lede { color: color-mix(in srgb, var(--bg) 75%, transparent); }
#products-overview .cap-intro-lede.cap-intro-lede-accent { color: var(--accent); }
#products-overview .cap-index { border-top-color: color-mix(in srgb, var(--bg) 15%, transparent); }
#products-overview .cap-index li { border-bottom-color: color-mix(in srgb, var(--bg) 15%, transparent); }
#products-overview .cap-index a { color: var(--bg); }
#products-overview .cap-index a:hover,
#products-overview .cap-index a:hover .cap-index-num,
#products-overview .cap-index a:hover .cap-index-blurb { color: var(--accent); }
#products-overview .cap-index-num { color: color-mix(in srgb, var(--bg) 50%, transparent); }
#products-overview .cap-index-blurb { color: color-mix(in srgb, var(--bg) 70%, transparent); }
/* Dark-mode override for the two panels that invert via background:
* var(--text) — #products-overview .cap-intro and footer. In light
* mode they read as the page's "dark slabs" and provide rhythm. In
* dark mode the same flip would turn them into bright cream slabs
* against an otherwise dark page; pull them back into the dark
* family instead.
*
* #products-overview → page bg (#231a15, mirrors --bg) so the
* products panel flows as a continuation of
* the page rather than a distinct slab.
* footer → --bg2, matching the problem/solution and
* deployment panels — a quiet panel lift
* at the very bottom of the page.
*
* Scope-override --bg to cream so the child rules (text, borders,
* hover states — all derived from var(--bg)) resolve correctly
* against the dark backgrounds without per-selector overrides. The
* products background uses the literal #2f2621 rather than
* var(--bg) because the scoped --bg redefinition in the same rule
* would otherwise resolve var(--bg) to cream. */
[data-theme="dark"] #products-overview .cap-intro {
background: #2f2621;
--bg: var(--text);
}
[data-theme="dark"] footer {
background: var(--bg2);
--bg: var(--text);
}
/* Each capability is a content-sized section (NOT viewport-locked).
* Two-column grid (visual + body) collapses to single column on
* narrow viewports. */
/* Each capability matches the compare-section pattern: inherits
* the section-base max-width + margin: 0 auto + padding via these
* explicit values (capability articles aren't s so they
* don't pick up the base styles automatically). */
.cap {
max-width: var(--content-max);
margin: 0 auto;
padding: clamp(80px, 12vw, 160px) var(--gutter);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: clamp(40px, 8vw, 100px);
align-items: start;
border-top: 1px solid var(--border);
}
.cap-visual {
font-family: var(--mono);
display: flex;
flex-direction: column;
gap: 10px;
padding: 32px 0;
}
.cap-num {
font-size: clamp(80px, 9vw, 128px);
font-weight: 300;
line-height: 1;
color: var(--text);
letter-spacing: -0.04em;
}
.cap-tag {
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
}
.cap-body h3 {
font-size: clamp(26px, 3vw, 36px);
margin-bottom: 24px;
max-width: 26ch;
}
.cap-body p {
font-size: 18px;
line-height: 1.6;
color: var(--text2);
max-width: 60ch;
margin-bottom: 24px;
}
.cap-body ul {
font-family: var(--mono);
font-size: 15px;
color: var(--text);
}
.cap-body ul li {
padding: 10px 0;
border-top: 1px solid var(--border);
}
.cap-body ul li:last-child { border-bottom: 1px solid var(--border); }
/* ── Deployment ────────────────────────────────────────────────── */
.deployment {
border-top: 1px solid var(--border);
background: var(--bg2);
max-width: none;
padding-left: 0;
padding-right: 0;
}
.deployment .section-label,
.deployment .tier-grid {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.tier-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 60px;
}
.tier {
background: var(--surface);
padding: 44px;
border: 1px solid var(--border);
border-radius: 6px;
display: flex;
flex-direction: column;
}
.tier-label {
font-family: var(--mono);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
margin-bottom: 16px;
}
.tier h3 {
font-size: clamp(22px, 2.4vw, 30px);
margin-bottom: 16px;
}
.tier p {
color: var(--text2);
margin-bottom: 28px;
}
.tier dl {
margin-top: auto;
border-top: 1px solid var(--border);
font-family: var(--mono);
font-size: 14px;
}
.tier dl > div {
display: grid;
grid-template-columns: 130px 1fr;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.tier dl dt { color: var(--text3); font-weight: 400; }
.tier dl dd { margin: 0; color: var(--text); }
/* ── Compare table ─────────────────────────────────────────────── */
/* Context paragraph above the table — frames how to read it. */
.compare-context {
font-size: 17px;
line-height: 1.6;
color: var(--text2);
max-width: 70ch;
margin-top: 40px;
margin-bottom: 0;
}
/* Horizontally scrollable wrapper — contains the overflow when the
* 6-column table is wider than its container. Without this the page
* itself gets a horizontal scrollbar at narrow viewports, which
* causes content to shift left/right as the user scrolls. The
* scroll is now scoped to the table itself. */
.compare-table-wrap {
margin-top: 32px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.deployment .compare-context,
.deployment .compare-table-wrap,
.deployment .compare-footnotes,
.deployment .compare-footnote {
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
box-sizing: border-box;
}
.compare-table {
width: 100%;
/* Floor at 720px so the 6 columns don't crush below readable
* widths. On viewports < 720 wide the wrapper scrolls
* horizontally instead of squeezing the cells. */
min-width: 720px;
/* `separate` + `border-spacing: 0` (not `collapse`) so the
* sticky row-label and yotta_bot columns render their
* backgrounds correctly. Collapsed borders leave seam gaps
* that the scrolled content shows through. */
border-collapse: separate;
border-spacing: 0;
font-family: var(--mono);
font-size: 13px;
}
.compare-table th,
.compare-table td {
text-align: left;
padding: 14px 10px;
border-bottom: 1px solid var(--border);
vertical-align: top;
font-weight: 400;
}
.compare-table thead th {
color: var(--text3);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 18px;
line-height: 1.35;
}
.compare-table tbody th {
font-weight: 500;
color: var(--text);
line-height: 1.4;
}
.compare-table tbody td { color: var(--text2); }
/* ── Sticky locked columns ──────────────────────────────────────
* The row-label (Capability) and the yotta_bot column stay
* locked at the left edge while the four competitor columns
* scroll horizontally inside the .compare-table-wrap. This
* keeps the "us vs them" comparison readable on any viewport.
*
* Backgrounds MUST be solid (not partially transparent) on the
* sticky cells — anything that scrolls past would otherwise
* show through. The yotta_bot column uses solid --bg3 for the
* always-on highlight; the row label uses --bg so it blends
* with the page edge. */
/* Row-label column — sticky left:0, both header and body cells. */
.compare-table thead th:first-child,
.compare-table tbody th {
position: sticky;
left: 0;
z-index: 3;
background: var(--bg);
width: 260px;
min-width: 260px;
}
/* yotta_bot column — sticky next to the row label. left offset
* matches the row-label column's width so they snap together.
* Solid brand-green background with white text for the always-on
* "us vs them" highlight. */
.compare-table th.us,
.compare-table td.us {
position: sticky;
left: 260px;
z-index: 2;
background: #7cbd3c;
width: 132px;
min-width: 132px;
color: #ffffff;
}
/* thead's color rule wins on specificity tie via source order, so
* re-assert white for the yotta column header too. */
.compare-table thead th.us { color: #ffffff; }
.compare-table td strong { color: var(--accent); font-weight: 600; }
/* Inside the yotta column the accent (green) would disappear on the
* green fill — keep emphasis legible by staying white. */
.compare-table td.us strong { color: #ffffff; }
.compare-table sup {
font-size: 9px;
margin-left: 1px;
color: var(--text3);
font-weight: 500;
}
/* Numbered caveats below the table — small Mono, muted color so
* they read as supporting metadata, not body content. */
.compare-footnotes {
margin-top: 24px;
font-family: var(--mono);
font-size: 12px;
line-height: 1.55;
color: var(--text3);
max-width: 80ch;
}
.compare-footnotes li {
padding: 4px 0;
}
.compare-footnotes sup {
font-weight: 500;
margin-right: 4px;
}
.compare-footnote {
margin-top: 20px;
color: var(--text3);
font-size: 14px;
font-style: italic;
}
/* ── Final CTA ─────────────────────────────────────────────────── */
.final-cta {
text-align: center;
border-top: 1px solid var(--border);
padding-top: clamp(100px, 14vw, 180px);
padding-bottom: clamp(100px, 14vw, 180px);
}
.final-cta h2 {
font-size: clamp(34px, 5vw, 62px);
margin: 0 auto 24px;
max-width: none;
}
.final-cta p {
max-width: 48ch;
margin: 0 auto 40px;
color: var(--text2);
font-size: 18px;
}
/* ── Footer ────────────────────────────────────────────────────── */
footer {
background: var(--text);
color: var(--bg);
padding: 70px var(--gutter) 30px;
}
footer .footer-grid {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 40px;
align-items: start;
padding-bottom: 60px;
border-bottom: 1px solid color-mix(in srgb, var(--bg) 15%, transparent);
}
footer .wordmark { color: var(--bg); display: inline-flex; margin-bottom: 0; }
footer p { color: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 14px; margin: 0; }
/* Brand tagline — slightly larger + bolder than the supporting line
* below it. Mono family matches the wordmark above. Full-opacity
* cream so it reads as the primary line in the footer brand block.
* Tight bottom margin (1px) pulls "Cloud and self-hosted" right
* under the tagline rather than letting it drift away. */
footer .footer-tagline {
font-family: var(--mono);
font-weight: 500;
font-size: 16px;
color: var(--bg);
margin-bottom: 1px;
}
/* Short horizontal divider between the wordmark and the tagline.
* 24px wide cream rule, low opacity so it reads as a quiet
* separator rather than a UI element. */
footer .footer-divider {
width: 24px;
height: 1px;
background: color-mix(in srgb, var(--bg) 25%, transparent);
margin: 10px 0 14px;
}
footer h4 {
font-family: var(--mono);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 16px;
color: color-mix(in srgb, var(--bg) 70%, transparent);
}
footer ul li { padding: 6px 0; font-size: 14px; }
footer a { color: var(--bg); text-decoration-color: color-mix(in srgb, var(--bg) 30%, transparent); }
footer a:hover { color: var(--accent); text-decoration-color: var(--accent); }
footer .muted { color: color-mix(in srgb, var(--bg) 50%, transparent); font-size: 13px; line-height: 1.55; }
footer .copyright {
max-width: var(--content-max);
margin: 28px auto 0;
font-size: 12px;
font-family: var(--mono);
color: color-mix(in srgb, var(--bg) 40%, transparent);
letter-spacing: 0.04em;
}
/* ── Scroll-reveal animation ──────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in {
opacity: 1;
transform: none;
}
/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* ── Responsive — narrow viewport collapse only ───────────────── */
@media (max-width: 800px) {
.nav nav { gap: 16px; }
.nav nav a:not(.cta-secondary) { display: none; }
.tier-grid,
.cap,
footer .footer-grid {
grid-template-columns: 1fr;
}
.cap-visual { padding: 0 0 16px; }
.cap-num { font-size: 72px; }
.cap-index a {
grid-template-columns: 40px 1fr;
row-gap: 4px;
}
.cap-index-blurb { grid-column: 2 / -1; }
.compare-table { font-size: 13px; }
.compare-table thead th:first-child,
.compare-table tbody th {
width: 180px;
min-width: 180px;
}
.compare-table th.us,
.compare-table td.us {
left: 180px;
width: 116px;
min-width: 116px;
}
}
@media (max-width: 480px) {
.compare-table th, .compare-table td { padding: 10px 6px; }
.compare-table thead th:first-child,
.compare-table tbody th {
width: 148px;
min-width: 148px;
}
.compare-table th.us,
.compare-table td.us {
left: 148px;
width: 104px;
min-width: 104px;
}
.tier { padding: 28px; }
.tier dl > div { grid-template-columns: 100px 1fr; }
}