/* SiloCut — the landing page at `/`. * * ⚠️ SAME PALETTE, DIFFERENT DOCUMENT. This does not link styles.css, and must not: that file * puts `overflow: hidden` and a four-row grid on for the editor's three-pane shell, which * would give this page a viewport it cannot scroll. The tokens below are COPIED from its :root, * value for value, and `test/landing.test.mjs` fails if either side drifts. No new colours are * invented here — the accent is the same one, used the same way: focus and one primary action, * never decoration. * * No @import, no external font, no url() to another origin. Nothing on this page fetches * anything, which is also why it renders identically with the API down. */ :root { /* ── copied verbatim from styles.css ── */ --bg: #131315; --bg-2: #191a1d; --bg-3: #1f2024; --line: #2c2e33; --line-2: #3a3d44; --fg: #e8e8ea; --fg-2: #a5a7ad; --fg-3: #74777e; --accent: #6f8fd0; --radius: 4px; --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Landing-only. The editor is a fixed viewport; a page you read needs a measure. */ --measure: 68ch; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); /* The chrome is 13px because it is chrome. This is prose. */ font-size: 15px; line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--fg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 24px; } /* ── header ───────────────────────────────────────────────────────────── */ .site-head { border-bottom: 1px solid var(--line); background: var(--bg-2); } .site-head .wrap { display: flex; align-items: center; gap: 9px; height: 48px; } /* The product's own mark, the same two rounded rectangles as the favicon in index.html. Drawn, not an image file — one less request and it inherits the accent. */ .mark { width: 17px; height: 17px; flex: none; } .wordmark { font-weight: 600; font-size: 14px; letter-spacing: 0.02em; } .site-head .spacer { flex: 1; } .head-link { color: var(--fg-3); font-size: 13px; text-decoration: none; } .head-link:hover { color: var(--fg-2); } /* ── hero ─────────────────────────────────────────────────────────────── */ .hero { padding: 76px 0 64px; } h1 { margin: 0; /* Two lines on a normal desktop, breaking after "sticker" rather than after "or". Set in ch so it holds as the clamp above changes the size. */ max-width: 24ch; font-size: clamp(30px, 5.2vw, 44px); font-weight: 600; line-height: 1.14; letter-spacing: -0.015em; } .lede { margin: 20px 0 0; max-width: var(--measure); font-size: 17px; line-height: 1.55; color: var(--fg-2); } .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .actions.tight { margin-top: 0; } /* Shaped like styles.css's .btn — same border, same radius, same accent recipe — but at the size a page-level action needs rather than a 26px toolbar one. */ .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; font: inherit; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; } .btn:hover { background: #26272c; } .btn:active { transform: translateY(1px); } /* Same recipe as styles.css's .btn.primary, one step up the range it already uses. In the editor a 26px button sits among a dozen others and 18% is enough to pick it out; alone on a page this size the same mix reads as "a second grey button" and the page has no obvious first move. So: the fill is 28%, which is the value the editor's own primary already renders on hover, and the border carries most of the difference. No new colour, and nothing outside the range the app uses — a solid accent fill would be, and the app fills nothing bigger than a 5px handle. */ .btn.primary { border-color: color-mix(in srgb, var(--accent) 72%, var(--line-2)); background: color-mix(in srgb, var(--accent) 28%, var(--bg-3)); } .btn.primary:hover { border-color: color-mix(in srgb, var(--accent) 85%, var(--line-2)); background: color-mix(in srgb, var(--accent) 38%, var(--bg-3)); } /* --fg-2, not --fg-3. This is where the page admits the mobile layout is not built, and a caveat nobody can read is a caveat that was not made. Small is fine; faint is not. */ .fineprint { margin: 18px 0 0; font-size: 13px; color: var(--fg-2); } /* ── sections ─────────────────────────────────────────────────────────── */ section { border-top: 1px solid var(--line); } /* ⚠️ LONGHAND, AND IT HAS TO BE. This class is worn together with .wrap on the same element, and .wrap's `padding: 0 24px` is what holds the page off the left edge. A `padding: 44px 0` shorthand here has the same specificity and comes later, so it silently reset the horizontal padding to zero and every section below the hero rendered flush against x=0 — measured, in a real browser, at 360/390/560/768/1280. The hero and the header escaped it because neither wears this class, which is why the page still looked right in the first screenshot. */ .section-pad { padding-top: 44px; padding-bottom: 44px; } h2 { margin: 0 0 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; } .points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px 32px; } .points p { margin: 0; color: var(--fg-2); font-size: 14px; } /* ── the preset table ─────────────────────────────────────────────────── */ /* Wide content scrolls inside itself. A table that widens the page is a page that scrolls sideways on a phone, and then nothing on it lines up. */ .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); } table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; } th, td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } thead th { color: var(--fg-3); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } tbody tr:last-child td { border-bottom: 0; } td.num { font-family: var(--mono); font-size: 12px; color: var(--fg-2); } /* Sits under the scroll container, not inside it — see the comment in landing.html. */ .table-note { margin: 10px 0 0; font-size: 12px; color: var(--fg-2); max-width: var(--measure); } /* ── the honest limits ────────────────────────────────────────────────── */ /* Not styled as a warning. These are facts about the formats, they are on the page on purpose, and colouring them red would say something about the product that is not true. */ .limits { margin: 0; padding: 0; list-style: none; max-width: var(--measure); } .limits li { padding: 2px 0 2px 14px; border-left: 2px solid var(--line-2); color: var(--fg-2); font-size: 14px; } .limits li + li { margin-top: 10px; } .limits b { color: var(--fg); font-weight: 600; } /* ── footer ───────────────────────────────────────────────────────────── */ .site-foot { border-top: 1px solid var(--line); background: var(--bg-2); } .site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; font-size: 13px; color: var(--fg-3); } .site-foot a { color: var(--fg-2); text-decoration: none; } .site-foot a:hover { color: var(--fg); } .site-foot .spacer { flex: 1; } @media (max-width: 560px) { .hero { padding: 52px 0 44px; } .actions .btn { flex: 1 1 auto; justify-content: center; } /* The spacer pushes the two footer links to the right edge, which at this width leaves one on the first line and one on the second. Give it the whole row instead so the links wrap together, left-aligned under the line above them. */ .site-foot .wrap { gap: 4px 16px; } .site-foot .spacer { flex-basis: 100%; height: 0; } }