update tos and pp
This commit is contained in:
Frederik Spirgi
+347
-16
@@ -1,21 +1,352 @@
|
||||
.legal-page {
|
||||
min-height: calc(100dvh - 36px);
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
.legal-shell {
|
||||
width: min(1180px, calc(100% - 64px));
|
||||
margin: 0 auto;
|
||||
padding: clamp(56px, 8vw, 104px) 0 72px;
|
||||
}
|
||||
|
||||
.legal-hero {
|
||||
max-width: 820px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.legal-hero .eyebrow {
|
||||
margin-bottom: 14px;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.legal-hero h1 {
|
||||
font-size: clamp(2.8rem, 7vw, 5.6rem);
|
||||
letter-spacing: -.065em;
|
||||
}
|
||||
|
||||
.legal-summary {
|
||||
max-width: 720px;
|
||||
margin: 24px 0 18px;
|
||||
color: var(--text-soft);
|
||||
font-size: clamp(1.05rem, 2vw, 1.28rem);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.legal-updated {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: .83rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .035em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.legal-callout {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.legal-container,
|
||||
.legal-content {
|
||||
width: min(860px, 100%);
|
||||
padding: clamp(24px, 5vw, 52px);
|
||||
background: var(--surface-raised);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
margin: 0 0 56px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
}
|
||||
.legal-container h1, .legal-content h1 { margin-bottom: 20px; }
|
||||
.legal-container h2, .legal-content h2 { margin: 28px 0 10px; font-size: 1.25rem; }
|
||||
.legal-container p, .legal-container li, .legal-content p, .legal-content li { color: var(--text-soft); line-height: 1.75; }
|
||||
.legal-container a, .legal-content a { font-weight: 700; }
|
||||
@media (max-width: 700px) {
|
||||
.legal-container, .legal-content { min-height: 100dvh; border: 0; border-radius: 0; }
|
||||
|
||||
.legal-callout div {
|
||||
min-width: 0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.legal-callout div + div {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.legal-callout strong,
|
||||
.legal-callout span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.legal-callout strong {
|
||||
margin-bottom: 7px;
|
||||
color: var(--text);
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
.legal-callout span {
|
||||
color: var(--text-soft);
|
||||
font-size: .88rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.legal-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 760px);
|
||||
justify-content: space-between;
|
||||
gap: clamp(48px, 8vw, 112px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.legal-toc {
|
||||
position: sticky;
|
||||
top: calc(var(--shell-header-height, 76px) + 28px);
|
||||
padding-left: 18px;
|
||||
border-left: 1px solid var(--border-strong);
|
||||
}
|
||||
|
||||
.legal-toc p {
|
||||
margin: 0 0 12px;
|
||||
color: var(--text);
|
||||
font-size: .74rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.legal-toc ol {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.legal-toc a {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
color: var(--text-muted);
|
||||
font-size: .83rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.legal-toc a:hover,
|
||||
.legal-toc a:focus-visible {
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.legal-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-page .legal-content {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.legal-content section {
|
||||
scroll-margin-top: calc(var(--shell-header-height, 76px) + 24px);
|
||||
padding: 0 0 44px;
|
||||
}
|
||||
|
||||
.legal-content section + section {
|
||||
padding-top: 44px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.legal-content h2 {
|
||||
display: grid;
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
margin: 0 0 20px;
|
||||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||||
}
|
||||
|
||||
.legal-content h2 span {
|
||||
color: var(--brand);
|
||||
font: 700 .68rem var(--font-body);
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
|
||||
.legal-content p,
|
||||
.legal-content li,
|
||||
.legal-content dd,
|
||||
.legal-content td,
|
||||
.legal-content th {
|
||||
color: var(--text-soft);
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
||||
.legal-content p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.legal-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.legal-content ul {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 4px 0 20px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.legal-content li::marker {
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.legal-content strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.legal-content a {
|
||||
color: var(--brand-strong);
|
||||
font-weight: 700;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.legal-details {
|
||||
display: grid;
|
||||
margin: 24px 0 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.legal-details div {
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
padding: 13px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.legal-details dt {
|
||||
color: var(--text-muted);
|
||||
font-size: .78rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.legal-details dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legal-table-wrap {
|
||||
margin: 22px 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.legal-content table {
|
||||
width: 100%;
|
||||
min-width: 680px;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface);
|
||||
font-size: .84rem;
|
||||
}
|
||||
|
||||
.legal-content th,
|
||||
.legal-content td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.legal-content th {
|
||||
color: var(--text);
|
||||
background: var(--surface-soft);
|
||||
font-size: .74rem;
|
||||
letter-spacing: .025em;
|
||||
}
|
||||
|
||||
.legal-content tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.legal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
width: min(1180px, calc(100% - 64px));
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 40px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.legal-footer span {
|
||||
margin-right: auto;
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.legal-footer a {
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.legal-shell,
|
||||
.legal-footer {
|
||||
width: min(100% - 40px, 720px);
|
||||
}
|
||||
|
||||
.legal-layout {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.legal-toc {
|
||||
position: static;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
.legal-toc ol {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2px 20px;
|
||||
}
|
||||
|
||||
.legal-callout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.legal-callout div + div {
|
||||
border-top: 1px solid var(--border);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.legal-shell {
|
||||
width: calc(100% - 32px);
|
||||
padding: 42px 0 48px;
|
||||
}
|
||||
|
||||
.legal-hero {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.legal-hero h1 {
|
||||
font-size: clamp(2.55rem, 15vw, 4rem);
|
||||
}
|
||||
|
||||
.legal-toc ol {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.legal-content section,
|
||||
.legal-content section + section {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.legal-details div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.legal-footer {
|
||||
width: calc(100% - 32px);
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.legal-footer span {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user