/* ==========================================================================
CLEVEN · PÁGINAS LEGAIS E DE ERRO
Casca autossuficiente para privacidade, termos, cookies e 404. Não depende
do CSS de nenhum site: assim a mesma página tem a mesma cara nos três, e
uma mudança de tom não quebra o texto legal.
Uso: (ou "cream", no Growth)
========================================================================== */
:root {
--legal-bg: var(--cleven-bg, #060606);
--legal-fg: var(--cleven-ink, #f5f5f5);
--legal-muted: var(--cleven-muted, #8a8a8a);
--legal-line: var(--cleven-border, rgba(245, 245, 245, 0.12));
--legal-wrap: 760px;
}
/* Growth é creme; o mesmo documento, tom invertido */
html[data-tone="cream"] {
--legal-bg: var(--cleven-cream, #f3f1ec);
--legal-fg: var(--cleven-ink-dark, #0e0e0d);
--legal-muted: var(--cleven-silver-dark, #6e6c66);
--legal-line: rgba(14, 14, 13, 0.14);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--legal-bg);
color: var(--legal-fg);
font-family: var(--cleven-font, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
}
.legal-wrap {
width: 100%;
max-width: var(--legal-wrap);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 40px);
}
/* ---------- topo ---------- */
.legal-header {
border-bottom: 1px solid var(--legal-line);
padding-block: 22px;
}
.legal-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.legal-logo {
display: inline-flex;
align-items: center;
gap: 0.55em;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.04em;
text-decoration: none;
}
.legal-logo__mark {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cleven-metal, linear-gradient(135deg, #9a9a9a, #f0f0f0, #a8a8a8));
}
/* a prata polida some no creme: no tom claro a marca vira tinta */
html[data-tone="cream"] .legal-logo__mark {
background: var(--cleven-ink-dark, #0e0e0d);
}
.legal-back {
color: var(--legal-muted);
font-size: 13px;
text-decoration: none;
transition: color 200ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.legal-back:hover,
.legal-back:focus-visible {
color: var(--legal-fg);
}
/* ---------- documento ---------- */
.legal-doc {
padding-block: clamp(48px, 9vw, 96px);
}
.legal-eyebrow {
display: block;
font-family: var(--cleven-font-mono, ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--legal-muted);
}
.legal-doc h1 {
margin: 14px 0 0;
font-size: clamp(30px, 5vw, 44px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.02em;
}
.legal-updated {
margin: 12px 0 0;
font-family: var(--cleven-font-mono, ui-monospace, monospace);
font-size: 12px;
color: var(--legal-muted);
}
.legal-doc h2 {
margin: 48px 0 0;
padding-top: 26px;
border-top: 1px solid var(--legal-line);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
}
.legal-doc h3 {
margin: 28px 0 0;
font-size: 16px;
font-weight: 500;
}
.legal-doc p {
margin: 14px 0 0;
color: var(--legal-muted);
}
.legal-doc strong {
color: var(--legal-fg);
font-weight: 500;
}
.legal-doc a {
color: var(--legal-fg);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--legal-line);
transition: text-decoration-color 200ms;
}
.legal-doc a:hover {
text-decoration-color: currentColor;
}
.legal-doc ul {
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.legal-doc li {
position: relative;
margin-top: 9px;
padding-left: 22px;
color: var(--legal-muted);
}
.legal-doc li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 10px;
height: 1px;
background: var(--legal-line);
}
.legal-note {
margin-top: 44px;
padding-top: 22px;
border-top: 1px solid var(--legal-line);
font-size: 13px;
color: var(--legal-muted);
}
/* ---------- rodapé ---------- */
.legal-footer {
border-top: 1px solid var(--legal-line);
padding-block: 28px;
font-size: 12px;
color: var(--legal-muted);
}
.legal-footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 26px;
}
.legal-footer nav {
display: flex;
flex-wrap: wrap;
gap: 12px 22px;
}
.legal-footer a {
color: var(--legal-muted);
text-decoration: none;
transition: color 200ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.legal-footer a:hover,
.legal-footer a:focus-visible {
color: var(--legal-fg);
}
/* ---------- página de erro ---------- */
.legal-erro {
display: grid;
place-items: center;
min-height: 62vh;
text-align: center;
padding-block: clamp(48px, 9vw, 96px);
}
.legal-erro h1 {
margin: 14px 0 0;
font-size: clamp(28px, 5vw, 42px);
font-weight: 500;
line-height: 1.14;
letter-spacing: -0.02em;
}
.legal-erro p {
margin: 16px auto 0;
max-width: 46ch;
color: var(--legal-muted);
}
.legal-acoes {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 32px;
}
.legal-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 12px 24px;
border: 1px solid var(--legal-line);
border-radius: 999px;
font-size: 14px;
text-decoration: none;
transition: border-color 200ms, background-color 200ms, color 200ms;
}
.legal-btn--primary {
background: var(--legal-fg);
border-color: var(--legal-fg);
color: var(--legal-bg);
}
.legal-btn--primary:hover {
opacity: 0.85;
}
.legal-btn:hover,
.legal-btn:focus-visible {
border-color: var(--legal-fg);
}
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 2px;
}