/* Landing page styles — Mast Everything here follows tokens in colors_and_type.css */ html, body { margin: 0; background: transparent; font-family: var(--font-text); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth anchor scroll — gated on prefers-reduced-motion so the a11y toggle kills it. Applied to html so every jump-link inherits. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Leave breathing room above section targets so the sticky top nav doesn't overlap them when a hash jump lands. */ :is(section[id], h1[id], h2[id], h3[id]) { scroll-margin-top: 80px; } /* Keyboard-only skip-to-content link. Visually hidden until focused. Must appear as the first element in . */ .skip-link { position: absolute; left: 16px; top: -48px; z-index: 1000; padding: 10px 16px; border-radius: 9999px; background: var(--color-text-primary-strong); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: top 150ms ease-out; } .skip-link:focus-visible { top: 12px; outline: 2px solid var(--color-info-dot); outline-offset: 2px; } body { min-height: 100vh; overflow-x: hidden; } /* ---- Theme switch: we scope light/dark via [data-theme] on ---- */ html[data-theme="light"] { --color-success-bg: rgba(236, 253, 243, 0.7); --color-success-text: #166534; --color-warning-bg: rgba(255, 247, 230, 0.7); --color-warning-text: #92400E; --color-critical-bg: rgba(255, 241, 242, 0.7); --color-critical-text: #9F1239; --color-info-bg: rgba(234, 242, 255, 0.7); --color-info-text: #1D4ED8; --color-surface-popover-start: rgba(255, 255, 255, 0.6); --color-surface-popover-end: rgba(246, 248, 251, 0.65); --color-surface-card: rgba(255, 255, 255, 0.45); --color-surface-chip: rgba(240, 243, 248, 0.55); --color-border-card: rgba(0, 0, 0, 0.08); --color-border-card-alt: rgba(0, 0, 0, 0.06); --color-border-separator: rgba(0, 0, 0, 0.05); --color-text-primary: #101828; --color-text-primary-strong: #0F172A; --color-text-secondary: #4B5563; --color-text-tertiary: #475467; --color-text-muted: #667085; --color-text-subtle: #6B7280; --color-text-faint: #8692A6; --color-text-placeholder: #98A2B3; --shadow-panel: 0 28px 56px rgba(67, 82, 106, 0.18); --shadow-chip: 0 10px 24px rgba(23, 27, 39, 0.24); --page-bg: radial-gradient(1200px 700px at 18% 12%, #BFD3EC 0%, transparent 60%), radial-gradient(1000px 600px at 82% 78%, #E5D8F0 0%, transparent 55%), linear-gradient(180deg, #EEF2F9 0%, #E0E7F1 100%); --page-text-secondary: #4B5563; --menubar-bg: rgba(255,255,255,0.55); --menubar-border: rgba(0,0,0,0.08); --menubar-text: #111827; --desktop-icon-fill: rgba(255,255,255,0.9); --desktop-icon-border: rgba(0,0,0,0.08); --ghost-grid: rgba(0,0,0,0.04); } html[data-theme="dark"] { --color-success-bg: #0F2A1A; --color-success-text: #6EE7A8; --color-warning-bg: #2B1F05; --color-warning-text: #FCD34D; --color-critical-bg: #2B0F10; --color-critical-text: #FCA5A5; --color-info-bg: #0A1F3C; --color-info-text: #93C5FD; --color-surface-popover-start: rgba(17, 21, 28, 0.7); --color-surface-popover-end: rgba(12, 15, 20, 0.75); --color-surface-card: rgba(23, 27, 36, 0.35); --color-surface-chip: rgba(31, 36, 46, 0.5); --color-border-card: rgba(255, 255, 255, 0.1); --color-border-card-alt: rgba(255, 255, 255, 0.08); --color-border-separator: rgba(255, 255, 255, 0.06); --color-text-primary: #F9FAFB; --color-text-primary-strong: #FFFFFF; --color-text-secondary: #D1D5DB; --color-text-tertiary: #9CA3AF; --color-text-muted: #9CA3AF; --color-text-subtle: #9CA3AF; --color-text-faint: #6B7280; --color-text-placeholder: #6B7280; --shadow-panel: 0 28px 56px rgba(0, 0, 0, 0.55); --shadow-chip: 0 10px 24px rgba(0, 0, 0, 0.45); --page-bg: radial-gradient(1200px 700px at 18% 12%, #1a2f4a 0%, transparent 60%), radial-gradient(1000px 600px at 82% 78%, #2a1a3a 0%, transparent 55%), linear-gradient(180deg, #0B0D12 0%, #07090E 100%); --page-text-secondary: #9CA3AF; --menubar-bg: rgba(20,24,32,0.55); --menubar-border: rgba(255,255,255,0.08); --menubar-text: #F9FAFB; --desktop-icon-fill: rgba(255,255,255,0.05); --desktop-icon-border: rgba(255,255,255,0.08); --ghost-grid: rgba(255,255,255,0.04); } body { background: var(--page-bg); transition: background .3s ease; } /* ---- Reusable glass ---- */ .shell-glass { background: linear-gradient(180deg, var(--color-surface-popover-start), var(--color-surface-popover-end)); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); border: 1px solid var(--color-border-card); } .glass { background: var(--color-surface-card); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--color-border-card-alt); } /* ---- Tab + action pills (same as popover kit) ---- */ .tab-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; border-radius: 9999px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,0.03); color: var(--color-text-muted); border: 1px solid transparent; transition: all .15s; cursor: pointer; } .tab-pill:hover { background: rgba(0,0,0,0.06); color: var(--color-text-secondary); } .tab-pill-active { background: rgba(0,0,0,0.07); color: var(--color-text-primary); border-color: rgba(0,0,0,0.06); } .tab-badge { font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 9999px; background: rgba(0,0,0,0.05); color: var(--color-text-faint); line-height: 16px; } .tab-pill-active .tab-badge { background: rgba(0,0,0,0.07); color: var(--color-text-secondary); } html[data-theme="dark"] .tab-pill { background: rgba(255,255,255,0.05); color: var(--color-text-muted); } html[data-theme="dark"] .tab-pill:hover { background: rgba(255,255,255,0.1); } html[data-theme="dark"] .tab-pill-active { background: rgba(255,255,255,0.12); color: var(--color-text-primary); border-color: rgba(255,255,255,0.1); } html[data-theme="dark"] .tab-badge { background: rgba(255,255,255,0.08); color: var(--color-text-faint); } html[data-theme="dark"] .tab-pill-active .tab-badge { background: rgba(255,255,255,0.12); color: var(--color-text-secondary); } .pill-action { padding: 2px 10px; border-radius: 9999px; font-size: 9px; font-weight: 600; background: rgba(0,0,0,0.05); color: var(--color-text-secondary); border: 1px solid rgba(0,0,0,0.06); transition: background .15s, color .15s; cursor: pointer; } .pill-action:hover { background: rgba(0,0,0,0.1); color: var(--color-text-primary); } /* Primary action pill — the one you'd click on a running port row. Success-tinted so it reads as affirmative against the neutral peers. */ .pill-primary { color: var(--color-success-text); background: var(--color-success-bg); border-color: transparent; } .pill-primary:hover { background: rgba(52, 199, 89, 0.2); color: var(--color-success-text); } .pill-danger { color: var(--color-critical-text); } .pill-danger:hover { background: rgba(255, 59, 48, 0.1); } html[data-theme="dark"] .pill-action { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.06); } html[data-theme="dark"] .pill-action:hover { background: rgba(255,255,255,0.14); } /* theme-scoped override beats the base dark .pill-action bg (specificity) */ html[data-theme="dark"] .pill-primary { background: var(--color-success-bg); color: var(--color-success-text); border-color: transparent; } html[data-theme="dark"] .pill-primary:hover { background: rgba(52, 199, 89, 0.2); color: var(--color-success-text); } html[data-theme="light"] .pill-primary { background: var(--color-success-bg); color: var(--color-success-text); border-color: transparent; } html[data-theme="light"] .pill-primary:hover { background: rgba(52, 199, 89, 0.2); } .ds-status-badge { padding: 2px 8px; border-radius: 9999px; font-size: 9px; font-weight: 700; flex-shrink: 0; } .ds-status-badge.success { background: var(--color-success-bg); color: var(--color-success-text); } .ds-status-badge.warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .ds-status-badge.critical { background: var(--color-critical-bg); color: var(--color-critical-text); } .ds-status-badge.neutral { background: rgba(240,243,248,0.7); color: var(--color-text-muted); } html[data-theme="dark"] .ds-status-badge.neutral { background: rgba(255,255,255,0.08); color: #9CA3AF; } .count-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 9999px; background: rgba(240,243,248,0.7); color: var(--color-text-muted); } html[data-theme="dark"] .count-badge { background: rgba(255,255,255,0.08); color: var(--color-text-muted); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; } button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } button:focus-visible { outline: 2px solid var(--color-info-dot); outline-offset: 2px; } .icon-faint { color: var(--color-text-faint); } /* ---- Page layout primitives ---- */ .page { position: relative; min-height: 100vh; padding-top: 32px; } .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } /* ---- Top nav ---- */ .topnav { position: sticky; top: 12px; z-index: 50; margin: 0 auto 48px; max-width: 1056px; display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 16px; border-radius: 9999px; background: var(--menubar-bg); border: 1px solid var(--menubar-border); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); color: var(--menubar-text); } .topnav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .topnav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success-dot); } .topnav-icon { display: block; width: 22px; height: 22px; border-radius: 5px; } .topnav-links { display: flex; gap: 4px; margin-left: auto; } .topnav-link { padding: 10px 14px; border-radius: 9999px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: all .15s; } .topnav-link:hover { background: rgba(0,0,0,0.04); color: var(--color-text-primary); } html[data-theme="dark"] .topnav-link:hover { background: rgba(255,255,255,0.06); } /* Outbound/cross-page link (Docs) — visually separated from in-page anchor links, with a small arrow-up-right icon so the reader knows this one leaves the current document flow. */ .topnav-sep { width: 1px; height: 14px; margin: 0 4px; background: var(--menubar-border); opacity: 0.7; align-self: center; flex-shrink: 0; } .topnav-link-outbound { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-tertiary); } .topnav-outbound-icon { width: 10px; height: 10px; opacity: 0.55; transition: opacity 150ms ease, transform 150ms ease; flex-shrink: 0; } .topnav-link-outbound:hover .topnav-outbound-icon { opacity: 1; transform: translate(1px, -1px); } .topnav-cta { padding: 10px 18px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: var(--color-text-primary-strong); color: var(--page-bg); text-decoration: none; transition: opacity .15s; } html[data-theme="light"] .topnav-cta { background: #0F172A; color: #fff; } html[data-theme="dark"] .topnav-cta { background: #F9FAFB; color: #0B0D12; } .topnav-cta:hover { opacity: 0.85; } /* ---- Hero ---- */ .hero { position: relative; min-height: 720px; padding-bottom: 60px; } .hero-copy { max-width: 620px; margin: 0 auto 32px; text-align: center; } .hero-icon { display: block; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 16px; box-shadow: var(--shadow-chip); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 9999px; background: var(--color-surface-chip); border: 1px solid var(--color-border-card-alt); font-size: 11px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.01em; margin-bottom: 20px; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success-dot); } .headline { font-family: var(--font-display); font-size: 68px; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 20px; color: var(--color-text-primary-strong); text-wrap: balance; } .subhead { font-size: 18px; line-height: 1.5; color: var(--color-text-secondary); margin: 0 auto; max-width: 520px; text-wrap: pretty; } .hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 9999px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; border: 1px solid transparent; } .btn-primary { background: var(--color-text-primary-strong); color: var(--color-surface-popover-start); } html[data-theme="light"] .btn-primary { background: #0F172A; color: #fff; } html[data-theme="dark"] .btn-primary { background: #F9FAFB; color: #0B0D12; } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background: var(--color-surface-card); border-color: var(--color-border-card); color: var(--color-text-primary); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); } .btn-secondary:hover { background: var(--color-surface-chip); } .btn-mono { font-family: var(--font-mono); font-size: 12px; /* Match .btn-primary's line metrics (its leading SVG sets a 14 px line box) so both CTAs share an identical height. */ line-height: 14px; } /* ---- Menu bar mock ---- */ .menubar-mock { position: relative; max-width: 1056px; margin: 0 auto; height: 30px; display: flex; align-items: center; padding: 0 16px; background: var(--menubar-bg); border-radius: 8px 8px 0 0; border: 1px solid var(--menubar-border); border-bottom: none; font-size: 12px; color: var(--menubar-text); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); } .menubar-left { display: flex; align-items: center; gap: 16px; } .menubar-apple { font-size: 13px; } .menubar-app { font-weight: 700; } .menubar-menu { opacity: 0.8; font-size: 12px; } .menubar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; opacity: 0.75; font-size: 11px; } .menubar-tray { display: flex; align-items: center; gap: 3px; position: relative; } .menubar-tray-dot { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; } .menubar-tray-dot svg { width: 12px; height: 12px; } .menubar-mast { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.06); font-weight: 600; opacity: 1; } html[data-theme="dark"] .menubar-mast { background: rgba(255,255,255,0.08); } .menubar-mast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning-dot); } /* ---- Popover stage ---- */ .popover-stage { position: relative; max-width: 1056px; margin: 0 auto; min-height: 640px; padding: 12px 16px 40px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%); border: 1px solid var(--menubar-border); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; } html[data-theme="dark"] .popover-stage { background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 30%); } /* dotted ghost grid behind popover */ .popover-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--ghost-grid) 1px, transparent 1px); background-size: 20px 20px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.6), transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.6), transparent); pointer-events: none; } .popover-wrap { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 4px; } /* ========================================================================== Popover mock (.pm-*) — a HTML/CSS recreation of the v0.9 popover for the hero stage. Not interactive; it's a visual at 380 px to match the app's native popover width. Uses semantic design tokens so it tracks theme. ========================================================================== */ .pm { position: relative; width: 380px; max-width: 100%; padding: 10px 10px 8px; border-radius: 20px; background: linear-gradient(180deg, var(--color-surface-popover-start), var(--color-surface-popover-end)); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); border: 1px solid var(--color-border-card); box-shadow: var(--shadow-panel); font-family: var(--font-text); color: var(--color-text-primary); display: flex; flex-direction: column; gap: 6px; } .pm-header { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; } .pm-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-success-dot); flex-shrink: 0; } .pm-brand { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-text-primary-strong); letter-spacing: -0.005em; } .pm-header-actions { margin-left: auto; display: flex; gap: 6px; color: var(--color-text-faint); } .pm-icon { width: 14px; height: 14px; display: block; } .pm-header-actions .pm-icon { width: 16px; height: 16px; } .pm-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--color-surface-card); border: 1px solid var(--color-border-card-alt); color: var(--color-text-faint); } .pm-search .pm-icon { color: var(--color-text-faint); } .pm-search-placeholder { font-size: 12px; color: var(--color-text-placeholder); line-height: 1; } .pm-section { display: flex; align-items: center; gap: 6px; padding: 6px 4px 2px; } .pm-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .pm-section-count { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; background: var(--color-surface-chip); color: var(--color-text-muted); line-height: 14px; } .pm-section-spacer { flex: 1; } .pm-refresh { width: 13px; height: 13px; color: var(--color-text-faint); display: block; } .pm-rows { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--color-surface-card); border: 1px solid var(--color-border-card-alt); } .pm-row { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--color-border-separator); min-height: 48px; } .pm-row:last-child { border-bottom: none; } .pm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .pm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pm-row-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; } .pm-row-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-pr { font-size: 10px; font-weight: 600; letter-spacing: -0.005em; flex-shrink: 0; } .pm-row-summary { font-size: 10.5px; color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dirty / clean status chips */ .pm-dirty, .pm-clean { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; flex-shrink: 0; white-space: nowrap; } .pm-dirty { color: var(--color-warning-text); background: var(--color-warning-bg); } .pm-clean { color: var(--color-success-text); background: var(--color-success-bg); } /* Inline action pills */ .pm-action { font-size: 9.5px; font-weight: 600; padding: 3px 9px; border-radius: 9999px; background: var(--color-surface-chip); border: 1px solid var(--color-border-card-alt); color: var(--color-text-secondary); flex-shrink: 0; white-space: nowrap; } .pm-action-primary { color: var(--color-success-text); background: var(--color-success-bg); border-color: transparent; } .pm-chevron { font-size: 14px; line-height: 1; color: var(--color-text-faint); padding-right: 2px; flex-shrink: 0; } /* tether line from menubar to popover */ .popover-tether { position: absolute; top: -1px; right: calc(50% - 360px); width: 1px; height: 12px; background: linear-gradient(180deg, var(--menubar-border), transparent); z-index: 0; } /* popover annotations */ .popover-anno { position: absolute; z-index: 2; font-size: 11px; color: var(--color-text-faint); display: flex; align-items: center; gap: 6px; max-width: 200px; line-height: 1.4; } .popover-anno-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-faint); flex-shrink: 0; margin-top: 4px; } /* LEFT-side annotations: text, then dashed line, then dot — the line bridges the text to the popover on the right. DOM order in index.html matches this visual order, so no row-reverse. */ .popover-anno.left { left: calc(50% - 380px); width: 200px; text-align: right; align-items: flex-start; justify-content: flex-end; } .popover-anno.left > div:first-child { flex: 1; } .popover-anno.left .popover-anno-line { border-top: 1px dashed var(--color-text-faint); width: 40px; height: 1px; margin-top: 10px; opacity: 0.5; flex-shrink: 0; } .popover-anno.left .popover-anno-dot { margin-top: 6px; } /* RIGHT-side annotations: dot, line, text — same logic, mirrored. */ .popover-anno.right { right: calc(50% - 380px); width: 200px; align-items: flex-start; } .popover-anno.right > div:last-child { flex: 1; } .popover-anno.right .popover-anno-line { border-top: 1px dashed var(--color-text-faint); width: 40px; height: 1px; margin-top: 10px; opacity: 0.5; flex-shrink: 0; } .popover-anno.right .popover-anno-dot { margin-top: 6px; } .popover-anno code { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted); } /* ---- Section primitives ---- */ section { padding: 96px 0; position: relative; } .section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin-bottom: 12px; } .section-title { font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-primary-strong); margin: 0 0 12px; text-wrap: balance; } /* The "why" section is the narrative anchor — give it more weight. The install section bookends the page — give it a touch more size than the utility sections in between. */ #why .section-title { font-size: 42px; } #install .section-title { font-size: 40px; } #features .section-title, #cli .section-title { font-size: 32px; } .section-desc { font-size: 16px; line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty; margin: 0; } /* ---- Correlation chain ---- */ .chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: center; max-width: 980px; margin: 0 auto; } .chain-card { padding: 24px; border-radius: 16px; background: var(--color-surface-card); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--color-border-card-alt); text-align: left; } .chain-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; } .chain-value { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; } /* Middle card (Process) ties the chain together — give it a touch more weight so the eye catches the pivot point. */ .chain > .chain-card:nth-of-type(2) .chain-value { font-size: 20px; font-weight: 600; } .chain-meta { font-size: 11px; color: var(--color-text-faint); line-height: 1.5; } .chain-arrow { font-family: var(--font-mono); font-size: 18px; color: var(--color-text-faint); text-align: center; } .chain-callout { margin: 32px auto 0; max-width: 620px; text-align: center; font-size: 13px; color: var(--color-text-secondary); padding: 14px 20px; border-radius: 12px; background: var(--color-warning-bg); border: 1px solid var(--color-border-card-alt); display: flex; align-items: center; gap: 10px; justify-content: center; } .chain-callout-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning-dot); flex-shrink: 0; } .chain-callout-text { color: var(--color-warning-text); font-weight: 500; } /* ---- Feature grid ---- */ .features { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .feature-card { border-radius: 16px; padding: 24px; background: var(--color-surface-card); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--color-border-card-alt); display: flex; flex-direction: column; min-height: 280px; } .feature-card.wide { grid-column: span 8; } .feature-card.half { grid-column: span 6; } .feature-card.narrow { grid-column: span 4; } /* .full cards stand alone in a row, so the shared min-height would leave dead space above auto-margined children like .tray-states. */ .feature-card.full { grid-column: span 12; min-height: 0; } .feature-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .feature-dot { width: 8px; height: 8px; border-radius: 50%; } .feature-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--color-text-primary-strong); } .feature-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 4px; margin-bottom: 18px; text-wrap: pretty; } .feature-stat-row { margin-top: auto; display: flex; gap: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-separator); font-size: 11px; } .feature-stat-k { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; letter-spacing: -0.01em; } .feature-stat-v { color: var(--color-text-faint); } /* Inline row list inside a feature card */ .rowlist { background: var(--color-surface-chip); border-radius: 10px; border: 1px solid var(--color-border-card-alt); overflow: hidden; margin-top: 12px; } .rowlist-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--color-border-separator); font-size: 12px; } .rowlist-row:last-child { border-bottom: none; } .rowlist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .rowlist-title { font-weight: 600; color: var(--color-text-primary); font-size: 12px; } .rowlist-summary { color: var(--color-text-faint); font-size: 11px; margin-left: auto; font-family: var(--font-mono); } /* Menu bar states (tray) */ .tray-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; } .tray-state { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 10px; background: var(--color-surface-chip); border: 1px solid var(--color-border-card-alt); } .tray-state-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .tray-state-dot { width: 10px; height: 10px; border-radius: 50%; } .tray-state-label { font-size: 11px; font-weight: 600; color: var(--color-text-primary); } .tray-state-desc { font-size: 10px; color: var(--color-text-faint); line-height: 1.4; } /* ---- CLI block ---- */ .cli-frame { max-width: 860px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border-card); background: var(--color-surface-popover-end); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--shadow-panel); } .cli-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-border-separator); background: var(--color-surface-card); } .cli-dot { width: 11px; height: 11px; border-radius: 50%; } .cli-dot.r { background: #FF5F57; } .cli-dot.y { background: #FEBC2E; } .cli-dot.g { background: #28C841; } .cli-title { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-faint); } .cli-body { padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--color-text-primary); white-space: pre; overflow-x: auto; } .cli-muted { color: var(--color-text-faint); } .cli-prompt { color: var(--color-success-dot); } .cli-ok { color: var(--color-success-dot); } .cli-warn { color: var(--color-warning-dot); } .cli-crit { color: var(--color-critical-dot); } .cli-info { color: var(--color-info-dot); } .cli-label { color: var(--color-text-muted); } /* ---- Install ---- */ .install { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; } .install-card { padding: 24px; border-radius: 16px; background: var(--color-surface-card); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--color-border-card-alt); display: flex; flex-direction: column; gap: 12px; } .install-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .install-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-text-primary-strong); letter-spacing: -0.01em; } .install-desc { font-size: 12px; color: var(--color-text-faint); } .install-cmd { margin-top: auto; padding: 14px 16px; border-radius: 10px; background: var(--color-surface-chip); border: 1px solid var(--color-border-card-alt); font-family: var(--font-mono); font-size: 13px; color: var(--color-text-primary); display: flex; align-items: center; gap: 10px; justify-content: space-between; } .install-copy { font-size: 10px; font-weight: 600; color: var(--color-text-faint); padding: 4px 8px; border-radius: 6px; background: var(--color-surface-card); border: 1px solid var(--color-border-card-alt); cursor: pointer; transition: all .15s; } .install-copy:hover { color: var(--color-text-primary); background: var(--color-surface-card-alt); } .install-requires { font-size: 11px; color: var(--color-text-faint); text-align: center; margin-top: 24px; } /* ---- Requirements strip ---- */ .req-strip { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 11px; color: var(--color-text-faint); margin-top: 20px; } .req-strip span { display: flex; align-items: center; gap: 6px; } .req-strip .req-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-success-dot); } /* ---- Keyboard shortcuts ---- */ .kbd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; max-width: 560px; margin: 0 auto; } .kbd-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border-separator); font-size: 12px; } .kbd-label { color: var(--color-text-primary); flex: 1; } .kbd-keys { display: flex; gap: 4px; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--color-surface-chip); border: 1px solid var(--color-border-card); border-radius: 5px; color: var(--color-text-primary); } /* ---- Footer ---- */ footer { padding: 64px 0 40px; border-top: 1px solid var(--color-border-separator); margin-top: 96px; } .foot { display: flex; align-items: flex-start; gap: 48px; flex-wrap: wrap; } .foot-brand { flex: 1; min-width: 240px; } .foot-brand h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-text-primary-strong); margin: 0 0 6px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } .foot-brand-icon { display: block; width: 22px; height: 22px; border-radius: 5px; } .foot-brand p { font-size: 12px; color: var(--color-text-faint); max-width: 260px; line-height: 1.5; } .foot-col { display: flex; flex-direction: column; gap: 8px; min-width: 120px; } .foot-col-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; } .foot-col a { font-size: 12px; color: var(--color-text-secondary); text-decoration: none; transition: color .15s; } .foot-col a:hover { color: var(--color-text-primary); } .foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border-separator); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-text-faint); } .foot-pill { padding: 8px 16px; border-radius: 9999px; background: var(--menubar-bg); border: 1px solid var(--menubar-border); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); color: var(--menubar-text); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; } .foot-pill a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--menubar-border); transition: text-decoration-color 150ms; } .foot-pill a:hover { text-decoration-color: currentColor; } /* ---- Tweaks panel ---- */ #tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: 260px; padding: 14px; border-radius: 14px; background: var(--color-surface-popover-start); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--color-border-card); box-shadow: var(--shadow-panel); font-size: 12px; display: none; } #tweaks.show { display: block; } #tweaks h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; margin: 0 0 10px; color: var(--color-text-primary-strong); letter-spacing: -0.005em; } #tweaks .tw-group { margin-bottom: 10px; } #tweaks .tw-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; } #tweaks .tw-seg { display: flex; gap: 4px; } #tweaks .tw-seg button { flex: 1; padding: 6px 8px; border-radius: 8px; background: var(--color-surface-chip); border: 1px solid var(--color-border-card-alt); font-size: 11px; font-weight: 500; color: var(--color-text-secondary); transition: all .15s; } #tweaks .tw-seg button.active { background: var(--color-text-primary-strong); color: var(--color-surface-popover-end); border-color: transparent; } html[data-theme="light"] #tweaks .tw-seg button.active { background: #0F172A; color: #fff; } html[data-theme="dark"] #tweaks .tw-seg button.active { background: #F9FAFB; color: #0B0D12; } /* ---- Ask an AI section — deeplink row + llms.txt footer ---- */ .ask-ai-row { display: flex; justify-content: center; align-items: center; gap: 56px; margin: 32px auto 24px; flex-wrap: wrap; } .ask-ai-icon { color: var(--color-text-muted); transition: color 180ms ease, transform 180ms cubic-bezier(.2,.7,.2,1); padding: 6px; border-radius: 10px; display: inline-flex; } .ask-ai-icon:hover, .ask-ai-icon:focus-visible { color: var(--color-text-primary-strong); transform: translateY(-2px); } .ask-ai-icon svg { display: block; } .ask-ai-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; } .ask-ai-llms { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-faint); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-border-card); transition: color 150ms, text-decoration-color 150ms; } .ask-ai-llms:hover { color: var(--color-text-secondary); text-decoration-color: var(--color-text-secondary); } /* ---- Responsive ---- */ @media (max-width: 920px) { .headline { font-size: 48px; } .features { grid-template-columns: repeat(6, 1fr); } .feature-card.wide, .feature-card.half, .feature-card.narrow { grid-column: span 6; } .chain { grid-template-columns: 1fr; } .chain-arrow { transform: rotate(90deg); } .install { grid-template-columns: 1fr; } .popover-anno.left, .popover-anno.right { display: none; } .topnav-links { display: none; } } /* ---- Motion ---- Three intentional motions, all gated on prefers-reduced-motion so the a11y toggle kills everything cleanly. Only transform + opacity animated to keep layout-free. */ @media (prefers-reduced-motion: no-preference) { /* 1. Hero entrance stagger — plays once on load */ @keyframes hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hero .eyebrow, .hero .headline, .hero .subhead, .hero .hero-actions, .hero .menubar-mock, .hero .popover-stage { opacity: 0; animation: hero-in 600ms cubic-bezier(.2,.7,.2,1) forwards; } .hero .eyebrow { animation-delay: 40ms; } .hero .headline { animation-delay: 120ms; } .hero .subhead { animation-delay: 220ms; } .hero .hero-actions { animation-delay: 320ms; } .hero .menubar-mock { animation-delay: 440ms; } .hero .popover-stage { animation-delay: 520ms; } /* 2. Card hover lift — feature, chain, install cards */ .feature-card, .chain-card, .install-card { transition: transform 180ms cubic-bezier(.2,.7,.2,1), border-color 180ms ease, box-shadow 180ms ease; } .feature-card:hover, .chain-card:hover, .install-card:hover { transform: translateY(-2px); border-color: var(--color-border-card); box-shadow: var(--shadow-chip); } /* 3. Scroll-reveal for chain cards and callout IntersectionObserver in index.html adds .is-visible when the chain enters the viewport. */ .chain-card, .chain-callout, .chain-arrow { opacity: 0; transform: translateY(12px); transition: opacity 500ms cubic-bezier(.2,.7,.2,1), transform 500ms cubic-bezier(.2,.7,.2,1); } .chain.is-visible .chain-card, .chain.is-visible .chain-arrow { opacity: 1; transform: translateY(0); } .chain.is-visible .chain-card:nth-of-type(1) { transition-delay: 0ms; } .chain.is-visible .chain-arrow:nth-of-type(1) { transition-delay: 120ms; } .chain.is-visible .chain-card:nth-of-type(2) { transition-delay: 180ms; } .chain.is-visible .chain-arrow:nth-of-type(2) { transition-delay: 260ms; } .chain.is-visible .chain-card:nth-of-type(3) { transition-delay: 320ms; } .chain-callout.is-visible { opacity: 1; transform: translateY(0); } }