/* The site's own layer, on top of the vendored design tokens. Nothing here invents a colour, a size, a radius or a duration: every value resolves to a token in tokens/css/, which is the same set the app is built from. A hex literal in this file is the moment the site and the product start drifting into two palettes. Colour comes from the *semantic* aliases only — --text-muted, not --gray-600, and never --gray-600's hex. That is what makes work: the dark block re-points the aliases, so a surface built on them goes dark for free and a surface built on the raw ramp does not go dark at all. */ :root { color-scheme: dark; /* OpenDocScan claims accent slot 20 (brass). One slot per application. */ --accent: var(--app-docscan); /* Brass is 3.4:1 on this page as text — right as a fill behind the mark, too dim for the eyebrow and the wordmark's dot. Lifted toward white it is 6.3:1, and it is still the slot rather than a colour picked beside it. */ --accent-lift: color-mix(in oklab, var(--accent) 68%, var(--white)); --measure: 68ch; --page: 1040px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-6); } /* ---------- masthead ---------- */ /* The sticky header carries its own .wrap rather than sitting inside a page-level one. Nested, `header .wrap` never matches, the flex row never applies, and the nav wraps under the wordmark. */ header.top { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--bg-page) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-hairline); } header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); } /* The family wordmark: a tinted tile holding the product's mark, "Open" muted, the product word at full strength, then a full stop in the product's accent. Set in the display face at --logo-tracking, which is appreciably tighter than heading tracking; using heading tracking here is what makes a lockup read as a different family from its siblings. */ .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-strong); font: var(--weight-medium) var(--text-lg) / 1 var(--font-display); letter-spacing: var(--logo-tracking); white-space: nowrap; } /* One flex item, not two. Left as a bare text node beside the dot's span, the container's gap lands between the word and its own full stop. */ .brand > span { display: inline; } .brand img { width: 26px; height: 26px; border-radius: var(--radius-sm); display: block; } .brand .prefix { color: var(--text-muted); } .brand .dot { color: var(--accent-lift); } nav.top-nav { display: flex; gap: var(--space-5); align-items: center; } nav.top-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); } nav.top-nav a:hover { color: var(--text-strong); } @media (max-width: 620px) { nav.top-nav a:not(.keep) { display: none; } } /* ---------- hero ---------- */ .hero { padding: var(--space-16) 0 var(--space-12); } .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-lift); margin: 0 0 var(--space-4); } h1 { font: var(--weight-medium) clamp(34px, 5.2vw, 58px) / 1.06 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-strong); margin: 0 0 var(--space-5); max-width: 18ch; text-wrap: balance; } .lede { font-size: var(--text-md); color: var(--text-muted); max-width: var(--measure); margin: 0 0 var(--space-4); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); } .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--border-hairline); text-decoration: none; font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans); color: var(--text-strong); transition: background var(--duration-fast) var(--ease-standard); } .btn:hover { background: var(--surface-hover); } /* Green means action. The accent is the mark and the dot; it is never the primary control, and never a page background. */ .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); } .btn.primary:hover { background: var(--brand-strong); } .hint { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-faint); } /* The three ways to run it, in the hero, each with its real state. Not cards: a border and a fill on all three would say "three equal products", and they are not equal — one is finished and two are not. A hairline above each and one status chip carries the difference. */ ul.platforms { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 980px; } @media (max-width: 780px) { ul.platforms { grid-template-columns: 1fr; gap: var(--space-5); } } ul.platforms li { border-top: 1px solid var(--border-hairline); padding-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); } ul.platforms b { display: block; color: var(--text-strong); font-weight: var(--weight-medium); font-size: var(--text-base); margin: var(--space-2) 0 var(--space-1); } /* A status, not an action — so the ready one takes the system's success colour rather than the brand green the buttons use, and the two that are not ready are stated in plain grey rather than dressed as warnings. */ .state { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-hairline); border-radius: var(--radius-full, 999px); padding: 3px 9px; } .state.ready { color: var(--success-fg); border-color: color-mix(in oklab, var(--success-fg) 40%, transparent); } /* ---------- sections ---------- */ section { padding: var(--space-16) 0; border-top: 1px solid var(--border-hairline); } h2 { font: var(--weight-medium) clamp(24px, 3vw, 34px) / 1.15 var(--font-display); letter-spacing: var(--tracking-heading); color: var(--text-strong); margin: 0 0 var(--space-4); max-width: 24ch; text-wrap: balance; } section > p { color: var(--text-muted); max-width: var(--measure); margin: 0 0 var(--space-4); } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-10); } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } } .card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-5); } .card h3 { font: var(--weight-medium) var(--text-base) / var(--leading-snug) var(--font-display); color: var(--text-strong); margin: 0 0 var(--space-2); } .card p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); } /* The numbers. Tabular so the column of digits lines up, in the mono face, which is what carries everything numeric in this system. */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-10); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface-card); } @media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat b { display: block; font: var(--weight-medium) var(--text-xl) / 1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); } .stat span { display: block; margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); } /* A claim list, where each line is a thing the product does not do. */ ul.claims { list-style: none; padding: 0; margin: var(--space-6) 0 0; max-width: var(--measure); } ul.claims li { padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); color: var(--text-muted); font-size: var(--text-sm); } ul.claims li strong { color: var(--text-strong); font-weight: var(--weight-medium); display: block; } ol.steps { margin: var(--space-8) 0 0; padding-left: var(--space-6); max-width: var(--measure); } ol.steps li { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); } ol.steps li strong { color: var(--text-strong); font-weight: var(--weight-medium); } dl.faq { margin: var(--space-8) 0 0; max-width: var(--measure); } dl.faq dt { font: var(--weight-medium) var(--text-base) / var(--leading-snug) var(--font-display); color: var(--text-strong); margin-top: var(--space-7); } dl.faq dd { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); } a { color: var(--text-link); text-underline-offset: 2px; } a:hover { color: var(--text-link-hover); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-sunken); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 1px 5px; } footer { border-top: 1px solid var(--border-hairline); padding: var(--space-8) 0 var(--space-16); color: var(--text-faint); font-size: var(--text-sm); } footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-4); } footer a { color: var(--text-muted); text-decoration: none; } footer a:hover { color: var(--text-strong); } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* ---------- prose pages (privacy) ---------- */ .prose { max-width: var(--measure); padding: var(--space-12) 0 var(--space-16); } .prose h1 { max-width: none; font-size: clamp(28px, 4vw, 42px); } .prose h2 { margin-top: var(--space-10); } .prose p, .prose li { color: var(--text-muted); } .prose ul { padding-left: var(--space-6); } .prose li { margin-bottom: var(--space-2); } .prose .updated { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); }