/* Husa — husa.app. One stylesheet for the landing and the legal pages. No build step and no framework: the whole site is three static files, and a toolchain would cost more than it saves at that size. */ :root { --ink: #0f1729; --ink-soft: #55607a; --bg: #ffffff; --bg-soft: #f5f7fb; --line: #e2e7f0; --brand: #1f6feb; --brand-deep: #0d2b6b; --radius: 16px; --measure: 66ch; } @media (prefers-color-scheme: dark) { :root { --ink: #e8ecf5; --ink-soft: #9aa5bd; --bg: #0b1020; --bg-soft: #131a2e; --line: #232c45; --brand: #5b9bff; --brand-deep: #0b1020; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; } /* Language switching without a build step or a redirect: every language lives in the DOM, and the one to show is chosen by an attribute on . Without JavaScript the attribute keeps its served value, so the page still reads. */ [data-lang="ru"] [lang]:not([lang="ru"]), [data-lang="uk"] [lang]:not([lang="uk"]), [data-lang="en"] [lang]:not([lang="en"]) { display: none; } .wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; } .prose { max-width: var(--measure); } header.site { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; } /* The legal pages use the brand as a link home. It has to be styled here, not with a style= attribute: the CSP is style-src 'self' with no 'unsafe-inline', so an inline attribute is dropped and the link falls back to underlined blue. */ a.brand { text-decoration: none; color: inherit; } .brand img { width: 32px; height: 32px; border-radius: 8px; } .langs { display: flex; gap: 4px; } .langs button { font: inherit; font-size: 14px; padding: 6px 10px; cursor: pointer; color: var(--ink-soft); background: none; border: 1px solid transparent; border-radius: 999px; } .langs button[aria-current="true"] { color: var(--ink); border-color: var(--line); background: var(--bg-soft); } .hero { padding: 64px 0 48px; display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 820px) { .hero { grid-template-columns: 1.1fr 0.9fr; padding: 88px 0 64px; } } .hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; } .hero p.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-soft); margin: 0 0 28px; max-width: 52ch; } .cta { display: inline-flex; align-items: center; gap: 10px; } .cta .badge { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 600; background: var(--brand); color: #fff; text-decoration: none; } /* Until there is something to install, the badge must not pretend to be a link. A dead App Store button is worse than an honest "not yet". */ .cta .badge[aria-disabled="true"] { background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line); cursor: default; } /* The screenshot slot holds its aspect ratio whether or not the image has loaded, so nothing below it moves when it arrives. The ratio matches the 1290x2796 source; object-fit: cover therefore crops nothing. */ .shot { aspect-ratio: 9 / 19.5; max-width: 300px; margin: 0 auto; width: 100%; border: 1px solid var(--line); border-radius: 28px; background: var(--bg-soft); display: grid; place-items: center; overflow: hidden; } .shot img { width: 100%; height: 100%; object-fit: cover; } /* The screenshot strip: a row that scrolls, at every width. It used to become a five-across grid at 820px, which made the screenshots smaller rather than larger — five equal columns in the 772px content box are 141px each against the 190px of the scrolling row, and the column never gets wider than 170px because .wrap caps the content at 912px. A fixed card width with a scroll is honest at every size; the shots stay legible and the cut-off fifth card is what says there is more. */ .shots { padding: 8px 0 8px; } .shots h2 { font-size: 17px; margin: 0 0 16px; } .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; margin: 0 -24px; padding-left: 24px; padding-right: 24px; } .strip figure { margin: 0; scroll-snap-align: start; } .strip img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px; } .strip figcaption { color: var(--ink-soft); font-size: 13px; margin-top: 8px; } .points { display: grid; gap: 24px; grid-template-columns: 1fr; padding: 40px 0 72px; } @media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .points h2 { font-size: 17px; margin: 0 0 6px; } .points p { margin: 0; color: var(--ink-soft); font-size: 15px; } footer.site { border-top: 1px solid var(--line); padding: 28px 0 56px; color: var(--ink-soft); font-size: 14px; } footer.site a { color: inherit; } footer.site nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; } /* Legal pages */ .doc { padding: 40px 0 72px; } .doc h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.02em; margin: 0 0 8px; } .doc .updated { color: var(--ink-soft); font-size: 14px; margin: 0 0 32px; } .doc h2 { font-size: 19px; margin: 36px 0 8px; letter-spacing: -0.01em; } .doc h3 { font-size: 16px; margin: 24px 0 6px; } .doc p, .doc li { color: var(--ink); } .doc ul { padding-left: 20px; } .doc li { margin: 4px 0; } .doc table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; display: block; overflow-x: auto; } .doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .doc th { background: var(--bg-soft); font-weight: 600; } .doc a { color: var(--brand); } /* An unfilled legal blank must be impossible to miss on the rendered page, not only in the source — see #498. */ .blank { background: #ffe8a3; color: #4a3200; padding: 1px 6px; border-radius: 4px; font-weight: 600; text-decoration: none; } @media (prefers-color-scheme: dark) { .blank { background: #6b5100; color: #ffe8a3; } } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; background: var(--bg); padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }