@import url('theme.css?v=20260805b'); * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-base); color: var(--color-muted); font-family: var(--font-sans); line-height: 1.55; } a { color: inherit; } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } /* --- header --- */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 700; letter-spacing: -0.01em; } .brand img { width: 30px; height: 30px; border-radius: 8px; display: block; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { text-decoration: none; color: var(--color-dim); font-size: 0.9rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: color 0.15s, background-color 0.15s; } .site-nav a:hover { color: #fff; background: rgba(237, 59, 59, 0.08); } .site-nav a.cta { color: #fff; background: var(--color-brand); margin-left: 8px; } .site-nav a.cta:hover { background: var(--color-brand-hover); } /* Auth area of the nav: two mutually-exclusive states, swapped by session-hint.js adding .logged-in to before first paint (see .10x/adrs/007-marketing-login-hint-cookie.md). Markup for both is always present — if the script never runs, .auth-anon is the default and it's the safe one: a logged-in visitor sees one extra "Sign in" click, never the reverse. */ .auth-portal { display: none; } html.logged-in .auth-anon { display: none; } html.logged-in .auth-portal { display: inline-flex; align-items: center; gap: 6px; } /* --- hero --- */ .hero { padding: 72px 0 56px; } .hero h1 { font-size: 2.4rem; line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0 0 18px; max-width: 640px; } .hero p { font-size: 1.05rem; color: var(--color-dim); max-width: 520px; margin: 0 0 28px; } .hero .actions { display: flex; gap: 12px; margin-bottom: 48px; } .btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 11px 20px; border-radius: 10px; border: 1px solid transparent; transition: background-color 0.15s, border-color 0.15s; } .btn-primary { background: var(--color-brand); color: #fff; } .btn-primary:hover { background: var(--color-brand-hover); } .btn-secondary { background: transparent; border-color: var(--color-border); color: var(--color-muted); } .btn-secondary:hover { border-color: var(--color-border-sub); color: #fff; } /* Browser-chrome frame — kept from the old CSS-mock hero because it's a concrete, honest way to say "this runs in a tab," not a generic dashboard illustration. What it now contains is real product screenshots (see .hero-shot below), not invented data — see ADR discussion in .10x/specs/2026-08-14-marketing-homepage-redesign.md. */ .frame { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6); } .frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-elevated); } .frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-sub); display: block; } /* Two real screenshots, layered rather than split 50/50 — the main shot fills the browser-chrome frame, a second one peeks out from behind it. Argues "multiple real views, one tab" more directly than either a single screenshot or the old fabricated-data mock did. */ .hero-shot { position: relative; padding-right: 32px; padding-bottom: 36px; } .hero-shot-main { height: 340px; overflow: hidden; } .hero-shot-main img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .hero-shot-peek { position: absolute; right: 0; bottom: 0; width: 58%; max-width: 300px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.65); } .hero-shot-peek img { width: 100%; height: 148px; object-fit: cover; object-position: top left; display: block; } /* --- section eyebrow label --- */ .eyebrow { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); margin: 0 0 10px; } /* --- modules grid (one card per shipped module) --- */ .modules { padding: 56px 0; border-top: 1px solid var(--color-border); } .modules h2 { color: #fff; font-size: 1.7rem; letter-spacing: -0.01em; margin: 0 0 8px; } .modules .lede { color: var(--color-dim); max-width: 560px; margin: 0 0 32px; } .modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .module-card { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); } /* The sprite at the top of each page. Kept in the layout with zero size rather than display:none — a display:none'd sprite stops resolving references in some browsers. */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .module-badge { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: rgba(237, 59, 59, 0.12); color: var(--color-brand); display: flex; align-items: center; justify-content: center; } /* Lucide's own drawing convention: 24px grid, 2px round strokes, no fill. */ .module-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .module-card h3 { color: #fff; font-size: 0.95rem; margin: 0 0 4px; letter-spacing: -0.005em; } .module-card p { color: var(--color-dim); font-size: 0.85rem; margin: 0; line-height: 1.45; } /* --- feature sections (varied, not a repeated 3-card grid) --- */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 0; border-top: 1px solid var(--color-border); } .feature-row.reverse .feature-copy { order: 2; } .feature-row h2 { color: #fff; font-size: 1.5rem; margin: 0 0 12px; letter-spacing: -0.01em; } .feature-row p { color: var(--color-dim); margin: 0; } .feature-visual { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); min-height: 200px; display: flex; align-items: center; justify-content: center; color: var(--color-border-sub); font-size: 0.8rem; } /* Real product screenshots (see this file's screenshots/ dir) rather than placeholder text — cropped to a fixed height so varied page layouts sit consistently in the same box. object-position: top left keeps the most informative corner (sidebar + page header) in frame when a tall screenshot gets cropped down. */ .feature-visual.shot { min-height: 0; height: 260px; overflow: hidden; padding: 0; } .feature-visual.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .feature-visual.split { gap: 2px; } .feature-visual.split img { flex: 1; min-width: 0; } .feature-list { padding: 40px 0; border-top: 1px solid var(--color-border); } .feature-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; } .feature-list li { padding-left: 22px; position: relative; color: var(--color-muted); } .feature-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--color-brand); } /* --- pricing teaser --- */ .price-teaser { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: center; padding: 32px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); } .price-card .amount { font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .price-card .amount small { font-size: 0.95rem; font-weight: 500; color: var(--color-dim); } .price-card .desc { color: var(--color-dim); font-size: 0.88rem; margin-top: 4px; } .price-teaser-note { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--color-dim); font-size: 0.88rem; } /* --- FAQ --- */ /*
/, same reasoning as the mobile nav disclosure: a real accordion with zero JS. */ .faq { max-width: 720px; } .faq details { border-bottom: 1px solid var(--color-border); padding: 18px 0; } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; font-weight: 600; font-size: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; flex-shrink: 0; color: var(--color-dim); font-size: 1.3rem; font-weight: 400; line-height: 1; } .faq details[open] summary::after { content: '\2212'; } .faq details p { color: var(--color-dim); margin: 12px 0 0; font-size: 0.92rem; } /* --- generic content sections --- */ section.page { padding: 56px 0; } section.page h1 { color: #fff; font-size: 2rem; letter-spacing: -0.01em; margin: 0 0 8px; } section.page .lede { color: var(--color-dim); max-width: 600px; margin: 0 0 40px; } .limitation { border-left: 3px solid var(--color-border-sub); padding: 14px 18px; background: var(--color-surface); border-radius: 0 10px 10px 0; color: var(--color-dim); font-size: 0.9rem; margin: 32px 0; } .legal h2 { color: #fff; font-size: 1.1rem; margin: 32px 0 10px; } .legal p, .legal li { color: var(--color-dim); font-size: 0.92rem; } /* --- footer --- */ .site-footer { border-top: 1px solid var(--color-border); padding: 32px 0; margin-top: 40px; } .site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .site-footer nav { display: flex; gap: 18px; } .site-footer a { color: var(--color-dim); text-decoration: none; font-size: 0.85rem; } .site-footer a:hover { color: var(--color-muted); } .site-footer .copy { color: var(--color-border-sub); font-size: 0.8rem; } /* --- mobile nav disclosure --- .site-nav disappears entirely under 760px (below); this is what replaces it. A
element needs no JS for open/close — the browser handles it — which keeps the "no build step, minimal script" rule intact for something that isn't the login-hint feature. Hidden above 760px, where the inline .site-nav already does the job. */ .nav-toggle { display: none; } .nav-toggle summary { list-style: none; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .nav-toggle summary::-webkit-details-marker { display: none; } .nav-toggle summary:hover { background: rgba(237, 59, 59, 0.08); } .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 18px; height: 2px; background: var(--color-muted); border-radius: 1px; } .nav-toggle-icon { position: relative; } .nav-toggle-icon::before, .nav-toggle-icon::after { content: ''; position: absolute; left: 0; } .nav-toggle-icon::before { top: -6px; } .nav-toggle-icon::after { top: 6px; } .nav-toggle[open] summary { background: rgba(237, 59, 59, 0.08); } .nav-toggle-menu { display: flex; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--color-border); } .nav-toggle-menu a { text-decoration: none; color: var(--color-dim); font-size: 0.95rem; font-weight: 500; padding: 10px 4px; border-radius: 8px; } .nav-toggle-menu a.cta { color: #fff; background: var(--color-brand); text-align: center; margin-top: 6px; padding: 10px; } @media (max-width: 760px) { .hero-shot { padding-right: 20px; padding-bottom: 28px; } .hero-shot-main { height: 220px; } .hero-shot-peek { width: 62%; } .hero-shot-peek img { height: 110px; } .feature-row, .feature-row.reverse .feature-copy { grid-template-columns: 1fr; order: initial; } .feature-row { display: block; } .feature-visual { margin-top: 20px; } .feature-list ul { grid-template-columns: 1fr; } .modules-grid { grid-template-columns: 1fr; } .site-nav { display: none; } .nav-toggle { display: block; } .price-teaser { grid-template-columns: 1fr; } .price-teaser > .btn { width: 100%; text-align: center; } } @media (max-width: 900px) and (min-width: 761px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } } /* ====================================================================== features.html — per-module detail pages ====================================================================== */ .features-intro { padding-bottom: 32px; } .features-intro .lede { max-width: 640px; margin-bottom: 28px; } /* --- module jump index --- */ .module-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .module-index a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); text-decoration: none; color: var(--color-muted); font-size: 0.85rem; font-weight: 500; transition: border-color 0.15s, background-color 0.15s; } .module-index a:hover { border-color: var(--color-brand); background: var(--color-elevated); } /* Smaller than the 34px grid badge — this is a list item, not a card. */ .module-index .module-badge { width: 26px; height: 26px; border-radius: 7px; } .module-index .module-icon { width: 15px; height: 15px; } /* --- sticky group bar --- */ .group-bar { position: sticky; top: 0; z-index: 20; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .group-bar .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; /* Four short links fit on a desktop; on a phone this scrolls sideways rather than wrapping to two rows and eating the viewport. */ scrollbar-width: none; } .group-bar .wrap::-webkit-scrollbar { display: none; } .group-bar a { flex: none; padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--color-dim); font-size: 0.85rem; font-weight: 500; white-space: nowrap; transition: color 0.15s, background-color 0.15s; } .group-bar a:hover { color: #fff; background: rgba(237, 59, 59, 0.08); } /* --- module groups --- */ .module-group { padding: 56px 0 8px; } .module-group + .module-group { border-top: 1px solid var(--color-border); } /* Clears the sticky group bar when jumped to from the index or the bar itself — without this the heading lands underneath it. */ .module-group, .module-detail { scroll-margin-top: 64px; } .group-heading { color: #fff; font-size: 1.7rem; letter-spacing: -0.01em; margin: 0 0 8px; } .group-lede { color: var(--color-dim); max-width: 620px; margin: 0 0 8px; } /* --- one module --- */ .module-detail { padding: 40px 0; border-top: 1px solid var(--color-border); } .module-group .group-lede + .module-detail { border-top: none; } .module-detail-head { display: flex; gap: 14px; margin-bottom: 24px; } .module-detail-head h3 { color: #fff; font-size: 1.3rem; letter-spacing: -0.01em; margin: 0 0 10px; } .module-detail-head p { color: var(--color-dim); margin: 0; max-width: 760px; } .module-detail code { font-size: 0.88em; padding: 1px 5px; border-radius: 5px; background: var(--color-elevated); color: var(--color-muted); } /* --- screenshot --- */ .shot { margin: 0 0 24px; } .shot + .shot { margin-top: -4px; } /* A real button, not a div: the zoom has to be reachable by keyboard, and the markup should say "this does something" on its own. */ .shot-trigger { display: block; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; cursor: zoom-in; position: relative; transition: border-color 0.15s; } .shot-trigger:hover, .shot-trigger:focus-visible { border-color: var(--color-border-sub); } .shot-trigger img { display: block; width: 100%; height: auto; } .shot-hint { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 8px; background: rgba(18, 18, 18, 0.82); border: 1px solid var(--color-border-sub); color: var(--color-muted); font-size: 0.75rem; font-weight: 500; opacity: 0; transition: opacity 0.15s; } .shot-trigger:hover .shot-hint, .shot-trigger:focus-visible .shot-hint { opacity: 1; } /* Touch has no hover to reveal the hint, so it just stays visible there. */ @media (hover: none) { .shot-hint { opacity: 1; } } /* --- spec list --- */ .spec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; } .spec-list li { position: relative; padding-left: 20px; color: var(--color-muted); font-size: 0.9rem; } .spec-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--color-brand); } /* Modules with no screenshot yet: the spec list is the whole body, so it reads better as one column at text width than as a wide two-column grid floating under a heading. */ .module-detail.no-shot .spec-list { grid-template-columns: 1fr; max-width: 760px; } .features-cta { border-top: 1px solid var(--color-border); } .features-cta h2 { color: #fff; font-size: 1.7rem; letter-spacing: -0.01em; margin: 0 0 8px; } .features-cta .lede { margin-bottom: 24px; } .features-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ====================================================================== lightbox (assets/lightbox.js) ====================================================================== */ html.lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 8, 8, 0.92); animation: lightbox-in 0.12s ease-out; } /* display:flex above beats the UA sheet's [hidden] { display: none }, so the closed overlay would sit over the page. Restore it explicitly. */ .lightbox[hidden] { display: none; } @keyframes lightbox-in { from { opacity: 0; } } .lightbox-figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; } .lightbox-img { display: block; max-width: min(1600px, 94vw); max-height: 82vh; width: auto; height: auto; border: 1px solid var(--color-border-sub); border-radius: 10px; background: var(--color-surface); } .lightbox-caption { color: var(--color-dim); font-size: 0.85rem; text-align: center; max-width: 60ch; } .lightbox-close, .lightbox-nav { position: absolute; border: 1px solid var(--color-border-sub); background: rgba(26, 26, 26, 0.9); color: var(--color-muted); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .lightbox-close:hover, .lightbox-nav:hover { background: var(--color-elevated); color: #fff; } .lightbox-close { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 60px; font-size: 1.8rem; line-height: 1; } .lightbox-prev { left: 18px; } .lightbox-next { right: 18px; } @media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } .module-index a, .shot-trigger, .shot-hint, .lightbox-close, .lightbox-nav { transition: none; } } /* --- features responsive --- */ @media (max-width: 900px) { .module-index { grid-template-columns: repeat(2, 1fr); } .spec-list { grid-template-columns: 1fr; } } @media (max-width: 760px) { .module-index { grid-template-columns: 1fr; } .module-group { padding-top: 40px; } .module-detail-head { gap: 12px; } .module-detail-head h3 { font-size: 1.15rem; } /* The arrows would sit on top of the image at this width; below it, they stay reachable without covering what they're navigating. */ .lightbox { padding: 16px; } .lightbox-nav { top: auto; bottom: 16px; transform: none; width: 56px; height: 44px; } .lightbox-img { max-height: 68vh; } }