@import "tailwindcss"; @source "../**/*.astro";@source "../**/*.tsx";@source "../../../../packages/react/src/components/dialog.tsx";@source "../../../../packages/react/src/components/copy-button.tsx";@source "../../../../packages/react/src/components/button.tsx"; @theme { --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-serif: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Registry-grade grayscale palette, matched to the app design system. No brand hue: accent resolves to near-black so it reads as ink, not color. */ --color-surface: #ffffff; --color-surface-2: #fafafa; --color-ink: #111111; --color-ink-2: #666666; --color-ink-3: #888888; --color-rule: #eaeaea; --color-rule-strong: #d4d4d4; --color-accent: #0a0a0a; --color-accent-hover: #333333;} html { scroll-behavior: smooth;} body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface); letter-spacing: -0.011em;} ::selection { background: var(--color-ink); color: var(--color-surface);} /* ─── Faint hero background: off-white surface ─── */.bg-soft { position: relative; background-color: var(--color-surface); isolation: isolate;}/* Pattern utility: mask the SVG, tint via background color */.pattern-bg { position: absolute; inset: 0; background: var(--color-ink); -webkit-mask-repeat: repeat; mask-repeat: repeat; pointer-events: none; z-index: 1;}.pattern-graph { --pattern-graph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill-rule='evenodd'%3E%3Cg%20fill='%23000'%3E%3Cpath%20opacity='.5'%20d='M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z'/%3E%3Cpath%20d='M6%205V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: var(--pattern-graph); mask-image: var(--pattern-graph); -webkit-mask-size: 100px 100px; mask-size: 100px 100px; opacity: 0.08;} /* Soft fade overlay: paint the surface color back over the pattern's bottom */.pattern-fade-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--color-surface) 100%); z-index: 0;} /* Was an italic-serif violet accent; neutralized to match the grayscale, no-serif system. The headline now reads as one uniform Geist phrase. */.serif-italic { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: inherit;} /* Page-load reveals */@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }}.rise { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;}.rise-1 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;}.rise-2 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.13s both;}.rise-3 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.21s both;}.rise-4 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;} /* Hairline-bordered surface for the beam panel: minimal elevation */.surface-card { background: white; border: 1px solid var(--color-rule); border-radius: 14px; box-shadow: 0 1px 2px rgba(13, 13, 16, 0.03), 0 8px 24px -16px rgba(13, 13, 16, 0.08);} /* Buttons */.btn-primary { background: var(--color-ink); color: var(--color-surface); border-radius: 8px; padding: 0.65rem 1.1rem; font-weight: 500; font-size: 0.9rem; letter-spacing: -0.005em; transition: background 0.15s ease;}.btn-primary:hover { background: #1f1f24;} /* Light, bordered counterpart to .btn-primary, a real secondary CTA. Sized to match .btn-primary--hero so it balances under the hero's primary button. */.btn-secondary { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 8px; padding: 0.7rem 1.25rem; font-family: inherit; font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;}.btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-ink-3);} .btn-link { color: var(--color-ink-2); font-weight: 500; font-size: 0.9rem; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.15s ease; background: transparent; border: 0; padding: 0; font-family: inherit; cursor: pointer;}.btn-link:hover { color: var(--color-ink);} .copy-icons { position: relative; display: inline-flex; width: 14px; height: 14px; margin-left: 0.15rem;}.copy-icons > svg { position: absolute; inset: 0; transition: opacity 0.15s ease, transform 0.15s ease;}.copy-icon-check { opacity: 0; transform: scale(0.8); color: var(--color-accent);}.copy-btn[data-copied="true"] .copy-icon-copy { opacity: 0; transform: scale(0.8);}.copy-btn[data-copied="true"] .copy-icon-check { opacity: 1; transform: scale(1);} /* ────────────────────────────────────────────────────────────── Hero toggle: segmented "Try in Cloud / Try locally" control. A sliding white pill animates between two equal-width tabs. The active pane is revealed below; inactive panes hide. ─────────────────────────────────────────────────────────── */.tab-toggle { position: relative; display: inline-flex; align-items: center; background: var(--color-surface-2); border: 1px solid var(--color-rule); border-radius: 999px; padding: 4px; isolation: isolate;}.tab-toggle > button { position: relative; z-index: 1; min-width: 7.5rem; padding: 0.5rem 1.1rem; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--color-ink-3); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: color 0.15s ease;}.tab-toggle > button:hover { color: var(--color-ink-2);}.tab-toggle > button[aria-selected="true"] { color: var(--color-ink);}.tab-toggle .tab-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: white; border-radius: 999px; box-shadow: 0 1px 2px rgba(13, 13, 16, 0.04), 0 0 0 1px var(--color-rule); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0;}.tab-toggle[data-active="local"] .tab-indicator { transform: translateX(100%);} .hero-toggle .pane { display: none;}.hero-toggle[data-active="cloud"] .pane[data-pane="cloud"],.hero-toggle[data-active="local"] .pane[data-pane="local"] { display: flex;} /* Per-pane description: sits above the CTA. Smaller than the hero tagline, tight max-width so two lines wrap naturally on narrow widths. */.pane-desc { font-size: 14.5px; line-height: 1.5; color: var(--color-ink-2); letter-spacing: -0.005em; max-width: 36ch; text-align: center; text-wrap: balance; margin: 0;} /* Subtle metadata strip under each pane's CTA: uppercase mono dots */.pane-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3);}.pane-meta .dot { width: 3px; height: 3px; background: var(--color-ink-3); border-radius: 999px; opacity: 0.45; flex-shrink: 0;}.pane-meta .meta-copy { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: none; letter-spacing: -0.005em; font-family: var(--font-mono); color: var(--color-ink-2); background: transparent; border: 0; padding: 0; cursor: pointer; transition: color 0.15s ease;}.pane-meta .meta-copy:hover { color: var(--color-ink);} /* "Other platforms" popover so the layout doesn't shift when it opens */.download-other { position: relative;}.download-other > summary { list-style: none; cursor: pointer; user-select: none; font-size: 13px; color: var(--color-ink-3); transition: color 0.15s ease;}.download-other > summary::-webkit-details-marker { display: none;}.download-other > summary:hover { color: var(--color-ink-2);}.download-other[open] > summary { color: var(--color-ink);}.download-other .download-other-list { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); background: white; border: 1px solid var(--color-rule); border-radius: 12px; padding: 0.45rem; min-width: 16rem; box-shadow: 0 4px 16px -6px rgba(13, 13, 16, 0.12), 0 1px 3px rgba(13, 13, 16, 0.04); z-index: 20; display: flex; flex-direction: column; gap: 1px;}.download-other .download-other-list a { display: block; padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 13.5px; color: var(--color-ink-2); text-align: left; transition: color 0.15s ease, background 0.15s ease;}.download-other .download-other-list a:hover { color: var(--color-ink); background: var(--color-surface-2);} /* Larger primary button for the hero pane: keeps btn-primary base sizing for nav/cards but bumps the hero's CTA to a more confident scale */.btn-primary--hero { padding: 0.7rem 1.25rem; font-size: 14.5px;} /* Accent-colored inline link: for secondary callouts inside card bodies */.link-accent { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit;}.link-accent:hover { color: var(--color-accent-hover); text-decoration-color: var(--color-accent-hover);} /* Legal pages */.legal-prose { color: color-mix(in srgb, var(--color-ink) 85%, transparent); line-height: 1.75; font-size: 15.5px;}.legal-prose > :first-child { margin-top: 0;}.legal-prose h2 { margin-top: 3rem; margin-bottom: 0.85rem; padding-top: 1.6rem; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; border-top: 1px solid var(--color-rule);}.legal-prose h3 { margin-top: 1.6rem; margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 600;}.legal-prose p,.legal-prose ul { margin: 0.85rem 0;}.legal-prose ul { list-style: none; padding-left: 0;}.legal-prose li { position: relative; padding-left: 1.25rem;}.legal-prose li::before { content: ""; position: absolute; left: 0.15rem; top: 0.72rem; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); opacity: 0.7;}.legal-prose a { color: var(--color-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-accent) 35%, transparent); text-underline-offset: 3px;}.legal-prose strong { color: var(--color-ink); font-weight: 600;} /* ════════════════════════════════════════════════════════════════ COMPONENT KIT: sections beyond the hero Built to echo the reference sites' best parts while staying on Executor's off-white / graph-paper / Geist + serif-italic brand: - Harbor: code window, trace waterfall, auditable security cards, FAQ - Corsair: connection matrix, permission-gate card, mono path chips, plus-mark grid corners - Zapier: trust strip with agent logos + capability badges ═══════════════════════════════════════════════════════════════ */ /* ── Section heading helpers ── */.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-3);}.section-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.06; color: var(--color-ink); text-wrap: balance;}.section-sub { font-size: 16.5px; line-height: 1.6;Lines 1–500 of 1633. Load more
@import "tailwindcss"; @source "../**/*.astro"; @source "../**/*.tsx"; @source "../../../../packages/react/src/components/dialog.tsx"; @source "../../../../packages/react/src/components/copy-button.tsx"; @source "../../../../packages/react/src/components/button.tsx"; @theme { --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-serif: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Registry-grade grayscale palette, matched to the app design system. No brand hue: accent resolves to near-black so it reads as ink, not color. */ --color-surface: #ffffff; --color-surface-2: #fafafa; --color-ink: #111111; --color-ink-2: #666666; --color-ink-3: #888888; --color-rule: #eaeaea; --color-rule-strong: #d4d4d4; --color-accent: #0a0a0a; --color-accent-hover: #333333; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface); letter-spacing: -0.011em; } ::selection { background: var(--color-ink); color: var(--color-surface); } /* ─── Faint hero background: off-white surface ─── */ .bg-soft { position: relative; background-color: var(--color-surface); isolation: isolate; } /* Pattern utility: mask the SVG, tint via background color */ .pattern-bg { position: absolute; inset: 0; background: var(--color-ink); -webkit-mask-repeat: repeat; mask-repeat: repeat; pointer-events: none; z-index: 1; } .pattern-graph { --pattern-graph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill-rule='evenodd'%3E%3Cg%20fill='%23000'%3E%3Cpath%20opacity='.5'%20d='M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z'/%3E%3Cpath%20d='M6%205V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: var(--pattern-graph); mask-image: var(--pattern-graph); -webkit-mask-size: 100px 100px; mask-size: 100px 100px; opacity: 0.08; } /* Soft fade overlay: paint the surface color back over the pattern's bottom */ .pattern-fade-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--color-surface) 100%); z-index: 0; } /* Was an italic-serif violet accent; neutralized to match the grayscale, no-serif system. The headline now reads as one uniform Geist phrase. */ .serif-italic { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: inherit; } /* Page-load reveals */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rise { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .rise-1 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } .rise-2 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.13s both; } .rise-3 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.21s both; } .rise-4 { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; } /* Hairline-bordered surface for the beam panel: minimal elevation */ .surface-card { background: white; border: 1px solid var(--color-rule); border-radius: 14px; box-shadow: 0 1px 2px rgba(13, 13, 16, 0.03), 0 8px 24px -16px rgba(13, 13, 16, 0.08); } /* Buttons */ .btn-primary { background: var(--color-ink); color: var(--color-surface); border-radius: 8px; padding: 0.65rem 1.1rem; font-weight: 500; font-size: 0.9rem; letter-spacing: -0.005em; transition: background 0.15s ease; } .btn-primary:hover { background: #1f1f24; } /* Light, bordered counterpart to .btn-primary, a real secondary CTA. Sized to match .btn-primary--hero so it balances under the hero's primary button. */ .btn-secondary { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 8px; padding: 0.7rem 1.25rem; font-family: inherit; font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-ink-3); } .btn-link { color: var(--color-ink-2); font-weight: 500; font-size: 0.9rem; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.15s ease; background: transparent; border: 0; padding: 0; font-family: inherit; cursor: pointer; } .btn-link:hover { color: var(--color-ink); } .copy-icons { position: relative; display: inline-flex; width: 14px; height: 14px; margin-left: 0.15rem; } .copy-icons > svg { position: absolute; inset: 0; transition: opacity 0.15s ease, transform 0.15s ease; } .copy-icon-check { opacity: 0; transform: scale(0.8); color: var(--color-accent); } .copy-btn[data-copied="true"] .copy-icon-copy { opacity: 0; transform: scale(0.8); } .copy-btn[data-copied="true"] .copy-icon-check { opacity: 1; transform: scale(1); } /* ────────────────────────────────────────────────────────────── Hero toggle: segmented "Try in Cloud / Try locally" control. A sliding white pill animates between two equal-width tabs. The active pane is revealed below; inactive panes hide. ─────────────────────────────────────────────────────────── */ .tab-toggle { position: relative; display: inline-flex; align-items: center; background: var(--color-surface-2); border: 1px solid var(--color-rule); border-radius: 999px; padding: 4px; isolation: isolate; } .tab-toggle > button { position: relative; z-index: 1; min-width: 7.5rem; padding: 0.5rem 1.1rem; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--color-ink-3); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: color 0.15s ease; } .tab-toggle > button:hover { color: var(--color-ink-2); } .tab-toggle > button[aria-selected="true"] { color: var(--color-ink); } .tab-toggle .tab-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: white; border-radius: 999px; box-shadow: 0 1px 2px rgba(13, 13, 16, 0.04), 0 0 0 1px var(--color-rule); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; } .tab-toggle[data-active="local"] .tab-indicator { transform: translateX(100%); } .hero-toggle .pane { display: none; } .hero-toggle[data-active="cloud"] .pane[data-pane="cloud"], .hero-toggle[data-active="local"] .pane[data-pane="local"] { display: flex; } /* Per-pane description: sits above the CTA. Smaller than the hero tagline, tight max-width so two lines wrap naturally on narrow widths. */ .pane-desc { font-size: 14.5px; line-height: 1.5; color: var(--color-ink-2); letter-spacing: -0.005em; max-width: 36ch; text-align: center; text-wrap: balance; margin: 0; } /* Subtle metadata strip under each pane's CTA: uppercase mono dots */ .pane-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3); } .pane-meta .dot { width: 3px; height: 3px; background: var(--color-ink-3); border-radius: 999px; opacity: 0.45; flex-shrink: 0; } .pane-meta .meta-copy { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: none; letter-spacing: -0.005em; font-family: var(--font-mono); color: var(--color-ink-2); background: transparent; border: 0; padding: 0; cursor: pointer; transition: color 0.15s ease; } .pane-meta .meta-copy:hover { color: var(--color-ink); } /* "Other platforms" popover so the layout doesn't shift when it opens */ .download-other { position: relative; } .download-other > summary { list-style: none; cursor: pointer; user-select: none; font-size: 13px; color: var(--color-ink-3); transition: color 0.15s ease; } .download-other > summary::-webkit-details-marker { display: none; } .download-other > summary:hover { color: var(--color-ink-2); } .download-other[open] > summary { color: var(--color-ink); } .download-other .download-other-list { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); background: white; border: 1px solid var(--color-rule); border-radius: 12px; padding: 0.45rem; min-width: 16rem; box-shadow: 0 4px 16px -6px rgba(13, 13, 16, 0.12), 0 1px 3px rgba(13, 13, 16, 0.04); z-index: 20; display: flex; flex-direction: column; gap: 1px; } .download-other .download-other-list a { display: block; padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 13.5px; color: var(--color-ink-2); text-align: left; transition: color 0.15s ease, background 0.15s ease; } .download-other .download-other-list a:hover { color: var(--color-ink); background: var(--color-surface-2); } /* Larger primary button for the hero pane: keeps btn-primary base sizing for nav/cards but bumps the hero's CTA to a more confident scale */ .btn-primary--hero { padding: 0.7rem 1.25rem; font-size: 14.5px; } /* Accent-colored inline link: for secondary callouts inside card bodies */ .link-accent { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; } .link-accent:hover { color: var(--color-accent-hover); text-decoration-color: var(--color-accent-hover); } /* Legal pages */ .legal-prose { color: color-mix(in srgb, var(--color-ink) 85%, transparent); line-height: 1.75; font-size: 15.5px; } .legal-prose > :first-child { margin-top: 0; } .legal-prose h2 { margin-top: 3rem; margin-bottom: 0.85rem; padding-top: 1.6rem; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; border-top: 1px solid var(--color-rule); } .legal-prose h3 { margin-top: 1.6rem; margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 600; } .legal-prose p, .legal-prose ul { margin: 0.85rem 0; } .legal-prose ul { list-style: none; padding-left: 0; } .legal-prose li { position: relative; padding-left: 1.25rem; } .legal-prose li::before { content: ""; position: absolute; left: 0.15rem; top: 0.72rem; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); opacity: 0.7; } .legal-prose a { color: var(--color-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-accent) 35%, transparent); text-underline-offset: 3px; } .legal-prose strong { color: var(--color-ink); font-weight: 600; } /* ════════════════════════════════════════════════════════════════ COMPONENT KIT: sections beyond the hero Built to echo the reference sites' best parts while staying on Executor's off-white / graph-paper / Geist + serif-italic brand: - Harbor: code window, trace waterfall, auditable security cards, FAQ - Corsair: connection matrix, permission-gate card, mono path chips, plus-mark grid corners - Zapier: trust strip with agent logos + capability badges ═══════════════════════════════════════════════════════════════ */ /* ── Section heading helpers ── */ .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-3); } .section-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.06; color: var(--color-ink); text-wrap: balance; } .section-sub { font-size: 16.5px; line-height: 1.6;