sans-self.org
An encrypted personal cloud built on the AT Protocol.
1@import "tailwindcss";
2@plugin "daisyui";
3
4/* ─── Fallback font metric overrides (eliminates layout shift on swap) ──── */
5
6@font-face {
7 font-family: "Inter Fallback";
8 src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
9 size-adjust: 111.93%;
10 ascent-override: 86.55%;
11 descent-override: 21.55%;
12 line-gap-override: 0%;
13}
14
15@font-face {
16 font-family: "Cormorant Garamond Fallback";
17 src: local("Times New Roman"), local("Times");
18 size-adjust: 98.32%;
19 ascent-override: 93.98%;
20 descent-override: 29.19%;
21 line-gap-override: 0%;
22}
23
24/* ─── Self-hosted fonts ──────────────────────────────────────────────────── */
25
26@font-face {
27 font-family: "Cormorant Garamond";
28 font-style: normal;
29 font-weight: 300 600;
30 font-display: swap;
31 src: url("/fonts/cormorant-garamond-latin-normal.woff2") format("woff2");
32 unicode-range:
33 U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
34 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
35}
36
37@font-face {
38 font-family: "Cormorant Garamond";
39 font-style: normal;
40 font-weight: 300 600;
41 font-display: swap;
42 src: url("/fonts/cormorant-garamond-latin-ext-normal.woff2") format("woff2");
43 unicode-range:
44 U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
45 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
46 U+A720-A7FF;
47}
48
49@font-face {
50 font-family: "Cormorant Garamond";
51 font-style: italic;
52 font-weight: 300 600;
53 font-display: swap;
54 src: url("/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
55 unicode-range:
56 U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
57 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
58}
59
60@font-face {
61 font-family: "Cormorant Garamond";
62 font-style: italic;
63 font-weight: 300 600;
64 font-display: swap;
65 src: url("/fonts/cormorant-garamond-latin-ext-italic.woff2") format("woff2");
66 unicode-range:
67 U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
68 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
69 U+A720-A7FF;
70}
71
72@font-face {
73 font-family: "Inter";
74 font-style: normal;
75 font-weight: 300 600;
76 font-display: swap;
77 src: url("/fonts/inter-latin-normal.woff2") format("woff2");
78 unicode-range:
79 U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
80 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
81}
82
83@font-face {
84 font-family: "Inter";
85 font-style: normal;
86 font-weight: 300 600;
87 font-display: swap;
88 src: url("/fonts/inter-latin-ext-normal.woff2") format("woff2");
89 unicode-range:
90 U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
91 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
92 U+A720-A7FF;
93}
94
95@font-face {
96 font-family: "Inter";
97 font-style: italic;
98 font-weight: 300 400;
99 font-display: swap;
100 src: url("/fonts/inter-latin-italic.woff2") format("woff2");
101 unicode-range:
102 U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
103 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
104}
105
106@font-face {
107 font-family: "Inter";
108 font-style: italic;
109 font-weight: 300 400;
110 font-display: swap;
111 src: url("/fonts/inter-latin-ext-italic.woff2") format("woff2");
112 unicode-range:
113 U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
114 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
115 U+A720-A7FF;
116}
117
118/* ─── Opake theme ─────────────────────────────────────────────────────────── */
119
120@plugin "daisyui/theme" {
121 name: "opake";
122 default: true;
123
124 /* Surfaces */
125 --color-base-100: oklch(0.985 0.005 85); /* #FDFAF5 — panel bg */
126 --color-base-200: oklch(0.957 0.012 85); /* #F5F1E8 — sidebar bg */
127 --color-base-300: oklch(0.93 0.015 85); /* #EDE8DC — page bg */
128 --color-base-content: oklch(0.155 0.035 70); /* #1C1408 — primary text */
129
130 /* Accent gold */
131 --color-primary: oklch(0.58 0.095 75); /* #9A7840 */
132 --color-primary-content: oklch(0.976 0.008 85); /* #FAF7F1 */
133
134 /* Muted text / secondary */
135 --color-secondary: oklch(0.39 0.055 65); /* #5C4A2E */
136 --color-secondary-content: oklch(0.976 0.008 85); /* #FAF7F1 */
137
138 /* Accent light bg */
139 --color-accent: oklch(0.94 0.035 85); /* #F5E9D0 */
140 --color-accent-content: oklch(0.49 0.08 70); /* #7D6230 */
141
142 /* Dark UI */
143 --color-neutral: oklch(0.155 0.035 70); /* #1C1408 */
144 --color-neutral-content: oklch(0.976 0.008 85); /* #FAF7F1 */
145
146 /* Semantic */
147 --color-success: oklch(0.53 0.065 145); /* #5C7A54 — shared/sage */
148 --color-success-content: oklch(0.976 0.008 85);
149 --color-warning: oklch(0.68 0.135 75); /* #C4952A — gold star */
150 --color-warning-content: oklch(0.155 0.035 70);
151 --color-error: oklch(0.45 0.11 25); /* #A04840 — destructive */
152 --color-error-content: oklch(0.976 0.008 85);
153 --color-info: oklch(0.58 0.095 75);
154 --color-info-content: oklch(0.976 0.008 85);
155
156 /* Shape */
157 --radius-selector: 0.625rem;
158 --radius-field: 0.5625rem;
159 --radius-box: 1rem;
160 --border: 1px;
161 --depth: 1;
162 --noise: 0;
163}
164
165/* ─── Design tokens ───────────────────────────────────────────────────────── */
166
167@theme {
168 --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
169 --font-sans: "Inter", "Inter Fallback", sans-serif;
170
171 /* Text scale */
172 --text-ui: 0.8125rem; /* 13px — primary UI text */
173 --text-caption: 0.6875rem; /* 11px — meta/caption */
174 --text-label: 0.625rem; /* 10px — small labels */
175 --text-micro: 0.5625rem; /* 9px — tiny text */
176
177 /* Custom colours */
178 --color-border-accent: oklch(0.79 0.06 80); /* #D4BC96 */
179 --color-text-faint: oklch(0.76 0.035 75); /* #C4B09A */
180 --color-text-muted: oklch(0.62 0.04 70); /* #9A8768 */
181 --color-bg-hover: oklch(0.58 0.095 75 / 0.055); /* gold hover */
182 --color-bg-ghost-1: oklch(0.94 0.025 80); /* #F5EDDB */
183 --color-bg-ghost-2: oklch(0.965 0.015 80); /* #FAF5EC */
184 --color-bg-sage: oklch(0.94 0.02 140); /* #EEF2E8 */
185 --color-bg-stone: oklch(0.95 0.01 80); /* #F4F1EC */
186
187 /* File-type icon colours */
188 --color-file-doc: #6676a8;
189 --color-file-doc-bg: #eef0f8;
190 --color-file-sheet: #5c8a5c;
191 --color-file-sheet-bg: #eef4ee;
192 --color-file-pdf: #a05040;
193 --color-file-pdf-bg: #f5eeec;
194 --color-file-note: #8a6a30;
195 --color-file-code: #7a6a98;
196 --color-file-code-bg: #f0eef5;
197 --color-file-image: #8a5a8a;
198 --color-file-image-bg: #f2eef2;
199
200 /* Elevation */
201 --shadow-panel-sm: 0 1px 8px oklch(0.35 0.05 60 / 0.07);
202 --shadow-panel-md: 0 2px 16px oklch(0.35 0.05 60 / 0.09);
203 --shadow-panel-lg: 0 6px 32px oklch(0.35 0.05 60 / 0.12);
204
205 /* Keyframes */
206 --animate-logo-square: logo-square 2s linear infinite;
207 @keyframes logo-square {
208 0%,
209 100% {
210 transform: translate(0, 0);
211 background: var(--sq-from);
212 border: var(--sq-border-from);
213 }
214 25% {
215 transform: translate(calc(var(--sq-dir) * var(--space)), 0);
216 }
217 50% {
218 transform: translate(calc(var(--sq-dir) * var(--space)), calc(var(--sq-dir) * var(--space)));
219 background: var(--sq-to);
220 border: var(--sq-border-to);
221 }
222 75% {
223 transform: translate(0, calc(var(--sq-dir) * var(--space)));
224 }
225 }
226
227 --animate-hover-lift: hover-lift 0.2s ease-out forwards;
228 @keyframes hover-lift {
229 to {
230 transform: translateY(-2px);
231 box-shadow: var(--shadow-panel-sm);
232 }
233 }
234
235 --animate-ghost-panel: ghost-panel 0.3s ease-out both;
236 @keyframes ghost-panel {
237 from {
238 opacity: 0;
239 translate: 0 0;
240 }
241 }
242
243 --animate-toast-enter: toast-enter 0.25s ease-out both;
244 @keyframes toast-enter {
245 from {
246 opacity: 0;
247 translate: 1rem 0;
248 }
249 }
250}
251
252/* ─── Utilities ──────────────────────────────────────────────────────────── */
253
254@utility bg-encrypted-pattern {
255 background-image: repeating-linear-gradient(
256 0deg,
257 transparent,
258 transparent 13px,
259 oklch(0.58 0.095 75 / 0.04) 13px,
260 oklch(0.58 0.095 75 / 0.04) 14px
261 );
262}
263
264/* ─── Base styles ─────────────────────────────────────────────────────────── */
265
266@layer base {
267 body {
268 font-family: var(--font-sans);
269 -webkit-font-smoothing: antialiased;
270 }
271
272 /* Scoped prose — for MDX content blocks */
273 .prose p {
274 margin-block: 0.75em;
275 }
276 .prose a {
277 color: var(--color-primary);
278 text-decoration: underline;
279 text-underline-offset: 2px;
280 }
281 .prose strong {
282 font-weight: 600;
283 }
284 .prose h2 {
285 font-family: var(--font-display);
286 font-weight: 400;
287 font-size: clamp(1.3rem, 2.5vw, 1.8rem);
288 line-height: 1.2;
289 letter-spacing: -0.01em;
290 margin-top: 2.5em;
291 margin-bottom: 0.75em;
292 color: var(--color-base-content);
293 }
294 .prose h3 {
295 font-size: 1.05rem;
296 font-weight: 600;
297 margin-top: 1.8em;
298 margin-bottom: 0.5em;
299 color: var(--color-base-content);
300 }
301 .prose ul,
302 .prose ol {
303 margin-block: 0.75em;
304 padding-left: 1.5em;
305 }
306 .prose li {
307 margin-block: 0.25em;
308 }
309 .prose hr {
310 border: none;
311 border-top: 1px solid var(--color-border-accent);
312 opacity: 0.4;
313 margin-block: 2em;
314 }
315 .prose code:not(pre code) {
316 font-size: 0.85em;
317 padding: 0.15em 0.35em;
318 border-radius: 0.25rem;
319 background: var(--color-base-300);
320 }
321 .prose blockquote {
322 border-left: 3px solid var(--color-border-accent);
323 padding-left: 1em;
324 margin-block: 1em;
325 color: var(--color-text-muted);
326 font-style: italic;
327 }
328 .prose pre {
329 margin-block: 1em;
330 border-radius: 0.5rem;
331 overflow-x: auto;
332 }
333}