/* * SAYLURE legal/support pages — document styles. * * Chrome (header, nav, footer, background, brand) comes from `site.css`, which * these pages load first, so a legal page and the landing are visibly the same * site. This file owns only what a long bilingual legal document needs: the * reading column, its typography, the RU/EN visibility switch, and the small set * of blocks the documents actually use — card, notice, pill, table, and the * delete-account form. * * Self-contained. No external fonts, no CDNs, no trackers. */ /* The landing can carry a bright starfield behind big type; several screens of legal prose cannot. Same art, dimmed, on these pages only. */ .backdrop { opacity: 0.28; } /* Reading column. Deliberately much narrower than the landing's container: a legal paragraph is unreadable at 1240px. */ .doc { max-width: 820px; margin: 0 auto; padding: 40px 20px 96px; } .doc h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.015em; margin: 8px 0 10px; font-weight: 700; } .doc h2 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; margin: 40px 0 10px; font-weight: 700; scroll-margin-top: 96px; } .doc h3 { font-size: 18px; margin: 26px 0 6px; } .doc p { margin: 12px 0; } .doc .lead { color: var(--fg-muted); font-size: 19px; } .doc .meta { color: var(--fg-muted); font-size: 14px; margin-top: 4px; } .doc ul, .doc ol { padding-left: 22px; } .doc li { margin: 6px 0; } .doc strong { color: var(--fg); } .card { background: linear-gradient(180deg, rgba(17, 19, 26, 0.78), rgba(11, 13, 19, 0.55)); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 22px 0; } .notice { border-left: 3px solid var(--accent); background: rgba(17, 19, 26, 0.7); padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 20px 0; } .notice.warn { border-left-color: #e6b45f; } .pill { display: inline-block; font-size: 13px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-muted); } .doc table { width: 100%; border-collapse: collapse; margin: 18px 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: rgba(255, 255, 255, 0.05); } .doc code { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-family: "Cascadia Code", "Consolas", ui-monospace, monospace; font-size: 0.92em; } /* Delete-account form */ .doc label { display: block; font-weight: 600; margin: 16px 0 4px; } .doc input[type="email"], .doc input[type="text"] { width: 100%; background: rgba(255, 255, 255, 0.05); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 12px 24px; font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { background: var(--accent-soft); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .status { margin-top: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); display: none; } .status.show { display: block; } .status.ok { border-color: #3fb971; color: #3fb971; } .status.err { border-color: #e0556b; color: #e0556b; } .status.info { border-color: #e6b45f; color: #e6b45f; } /* Site language — every word of the chrome, in all five shipped locales. `lang.js` sets `data-locale` on . */ [data-ui-lang] { display: none; } html[data-locale="en"] [data-ui-lang="en"], html[data-locale="it"] [data-ui-lang="it"], html[data-locale="es"] [data-ui-lang="es"], html[data-locale="ru"] [data-ui-lang="ru"], html[data-locale="uk"] [data-ui-lang="uk"] { display: revert; } /* Document language — the reviewed legal text, RU or EN. `lang.js` sets ; blocks of the other language are hidden. With JS unavailable every language stays visible, which is worse to read but never hides a clause. */ [data-lang] { display: none; } html[lang="en"] [data-lang="en"], html[lang="it"] [data-lang="it"], html[lang="es"] [data-lang="es"], html[lang="ru"] [data-lang="ru"], html[lang="uk"] [data-lang="uk"] { display: revert; } html.no-js [data-lang], html.no-js [data-ui-lang] { display: revert; } /* Shown only where THIS document has no translation for the reader's locale: they are getting the English text and deserve to be told, in their own words. `lang.js` sets the class per page, because the Privacy Policy is translated into all five languages and the other documents are not. */ .doc-notice { display: none; border-bottom: 1px solid var(--line); background: rgba(255, 47, 115, 0.07); color: var(--fg-muted); font-size: 15px; } html.doc-fallback .doc-notice { display: block; } .doc-notice p { margin: 0; padding: 12px 0; } @media (max-width: 767.98px) { .doc { padding: 28px 16px 72px; } .doc .lead { font-size: 17px; } }