Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/legal.css

5.4 KiB, 1 run

created by r2519314175:1109, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1/* legal.css — the Terms and the Privacy Policy, shown inside Daimond.
2 *
3 * The two documents are generated into `www/guide/legal/` from the published
4 * landing pages (dev/legal-pages.mjs), so what arrives here is the landing
5 * page's ARTICLE and none of its styling: the landing sheet is written against
6 * its own token names (--bg-2, --text-2) which the app does not define, and
7 * loading a second palette inside the app's frame would give the reader a page
8 * that ignores their theme.
9 *
10 * So this sheet is small on purpose. `guide.css` already styles the frame, the
11 * headings, the prose, the lists and the links; only the handful of shapes the
12 * legal pages bring with them are below, each in the app's own tokens so every
13 * palette and the reader's text size carry through.
14 */
15
16/* ── The draft banner ─────────────────────────────────────────────────────
17 INSIDE the sticky header, not under it. It says the document is not in force,
18 which is the first thing a reader has to know and the last thing that should
19 scroll away — and a second sticky element cannot sit under the first without
20 either overlapping it or leaving a slice of prose showing between the two.
21 Being part of the header also means `frame.js` measures it, so a jump to a
22 section lands clear of the banner as well as the nav. */
23.draft-banner {
24 background: var(--warn-bg);
25 border-top: 1px solid var(--border);
26 color: var(--text-primary);
27 text-align: center;
28 padding: 0.6rem 1rem;
29 font-size: 0.9rem;
30 font-weight: 600;
31 line-height: 1.4;
32}
33.draft-banner strong { color: var(--warn); }
34
35/* ── The document's own head ─────────────────────────────────────────────── */
36.legal-head { margin-bottom: 1.6rem; }
37.legal-head h1 { margin-top: 0; }
38.legal-meta { color: var(--text-muted); font-size: 0.9rem; }
39.legal-meta span { display: inline-block; margin-right: 1.2rem; }
40
41/* ── An open point ───────────────────────────────────────────────────────
42 Every [TO CONFIRM] is drawn as a gap and not as prose, because that is what
43 it is. A reader of a draft is owed the difference at a glance. */
44.tbc {
45 background: var(--accent-soft);
46 color: var(--text-primary);
47 border: 1px dashed var(--accent);
48 border-radius: var(--radius-sm);
49 padding: 0.02em 0.4em;
50 font-size: 0.9em;
51 font-weight: 600;
52 white-space: normal;
53}
54
55/* ── Contents ────────────────────────────────────────────────────────────
56 One column, not the landing page's two: this is read in a panel that is
57 often 420px wide, where two columns of eighteen entries is a wall. */
58.legal-toc {
59 background: var(--bg-secondary);
60 border: 1px solid var(--border);
61 border-radius: var(--radius-lg);
62 padding: 1rem 1.2rem;
63 margin-bottom: 1.6rem;
64}
65.legal-toc h2 { border: none; padding: 0; margin: 0 0 0.5rem; font-size: 1rem; }
66.legal-toc ol { margin: 0; padding-left: 1.3rem; color: var(--text-secondary); }
67.legal-toc li { margin-bottom: 0.25rem; }
68
69/* ── The device / server split ───────────────────────────────────────────── */
70.split {
71 display: grid;
72 grid-template-columns: 1fr 1fr;
73 gap: 1rem;
74 margin: 1.2rem 0;
75}
76.split .col {
77 background: var(--bg-secondary);
78 border: 1px solid var(--border);
79 border-radius: var(--radius-lg);
80 padding: 1rem 1.2rem;
81}
82.split .col h3 { margin-top: 0.2rem; }
83.split .col ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
84.split .col-tag {
85 display: block;
86 font-size: 0.72rem;
87 font-weight: 700;
88 letter-spacing: 0.06em;
89 text-transform: uppercase;
90 color: var(--accent-text);
91 margin-bottom: 0.3rem;
92}
93.split .col-server .col-tag { color: var(--text-muted); }
94@media (max-width: 620px) { .split { grid-template-columns: 1fr; } }
95
96/* ── The notice-at-collection table ──────────────────────────────────────
97 Scrolls inside its own box. A table with five columns cannot be made to fit
98 a phone or a narrow panel, and the alternative to a scrollbar here is the
99 whole document scrolling sideways. */
100.legal-table-wrap {
101 overflow-x: auto;
102 margin: 1.1rem 0 1.3rem;
103 border: 1px solid var(--border);
104 border-radius: var(--radius-lg);
105}
106.legal-table {
107 width: 100%;
108 min-width: 560px;
109 border-collapse: collapse;
110 font-size: 0.88rem;
111}
112.legal-table th,
113.legal-table td {
114 text-align: left;
115 padding: 0.6rem 0.85rem;
116 border-bottom: 1px solid var(--border);
117 color: var(--text-secondary);
118 vertical-align: top;
119}
120.legal-table th { color: var(--text-primary); font-weight: 600; background: var(--bg-secondary); }
121.legal-table tbody tr:last-child td { border-bottom: none; }
122
123/* ── A regional block ────────────────────────────────────────────────────── */
124.region {
125 background: var(--bg-secondary);
126 border: 1px solid var(--border);
127 border-radius: var(--radius-lg);
128 padding: 1rem 1.2rem;
129 margin-bottom: 0.9rem;
130}
131.region h3 { margin-top: 0.2rem; }
132.region p:last-child, .region ul:last-child { margin-bottom: 0; }