oscillatory.net
Markdown -> Semble importer
1@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,300;6..72,500;6..72,700&display=swap");
2
3:root {
4 color-scheme: light;
5 font-family: "Newsreader", "Times New Roman", serif;
6 --font-display: "Space Grotesk", "Segoe UI", sans-serif;
7 --color-ink: #12100f;
8 --color-ink-muted: #4c433f;
9 --color-paper: #fdf7ef;
10 --color-amber: #f28c28;
11 --color-olive: #3d4a2f;
12 --color-clay: #c9562a;
13 --color-moss: #b7c59b;
14 --color-cream: #f4f0e8;
15 --color-border: rgba(18, 16, 15, 0.12);
16 --shadow-soft: 0 20px 50px rgba(18, 16, 15, 0.12);
17}
18
19* {
20 box-sizing: border-box;
21}
22
23body {
24 margin: 0;
25 min-height: 100vh;
26 background:
27 radial-gradient(circle at 10% 10%, rgba(242, 140, 40, 0.2), transparent 45%),
28 radial-gradient(circle at 90% 0%, rgba(61, 74, 47, 0.18), transparent 55%),
29 linear-gradient(135deg, #fbf3e6 0%, #f7efe3 45%, #f4eadb 100%);
30 color: var(--color-ink);
31}
32
33a {
34 color: inherit;
35}
36
37button,
38input,
39textarea,
40select {
41 font: inherit;
42}
43
44#app {
45 min-height: 100vh;
46 display: flex;
47 justify-content: center;
48}
49
50.app-shell {
51 width: min(1200px, 100%);
52 padding: 40px 24px 80px;
53 display: grid;
54 gap: 24px;
55 position: relative;
56}
57
58.hero {
59 display: grid;
60 gap: 12px;
61 padding: 32px 28px;
62 border-radius: 28px;
63 background: var(--color-paper);
64 box-shadow: var(--shadow-soft);
65 border: 1px solid var(--color-border);
66 position: relative;
67 overflow: hidden;
68 text-align: center;
69}
70
71.brand {
72 display: grid;
73 gap: 12px;
74 justify-items: center;
75}
76
77.brand-logo {
78 width: min(360px, 100%);
79 height: auto;
80 border-radius: 18px;
81 background: #ffffff;
82 padding: 12px 16px;
83 box-shadow: 0 12px 24px rgba(18, 16, 15, 0.14);
84}
85
86.hero::after {
87 content: none;
88}
89
90.hero h1 {
91 font-family: var(--font-display);
92 font-size: clamp(2.4rem, 4vw, 3.4rem);
93 line-height: 1.1;
94 margin: 0;
95}
96
97.hero p {
98 margin: 0;
99 font-size: 1.05rem;
100 color: var(--color-ink-muted);
101 max-width: 680px;
102}
103
104.stack {
105 display: grid;
106 grid-template-columns: minmax(0, 1fr);
107 gap: 20px;
108}
109
110.card {
111 background: var(--color-paper);
112 border-radius: 22px;
113 padding: 20px;
114 border: 1px solid var(--color-border);
115 box-shadow: 0 16px 30px rgba(18, 16, 15, 0.08);
116 display: grid;
117 gap: 12px;
118}
119
120.card h2 {
121 font-family: var(--font-display);
122 margin: 0;
123 font-size: 1.3rem;
124}
125
126.field {
127 display: grid;
128 gap: 6px;
129}
130
131label {
132 font-family: var(--font-display);
133 font-size: 0.85rem;
134 text-transform: uppercase;
135 letter-spacing: 0.08em;
136 color: var(--color-ink-muted);
137}
138
139input,
140textarea,
141select {
142 padding: 10px 12px;
143 border-radius: 12px;
144 border: 1px solid rgba(18, 16, 15, 0.2);
145 background: #fff9f2;
146 transition: border-color 0.2s ease, box-shadow 0.2s ease;
147}
148
149input:focus,
150textarea:focus,
151select:focus {
152 outline: none;
153 border-color: var(--color-amber);
154 box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.2);
155}
156
157textarea {
158 min-height: 160px;
159 resize: vertical;
160}
161
162button {
163 border: none;
164 padding: 12px 18px;
165 border-radius: 999px;
166 background: var(--color-olive);
167 color: var(--color-cream);
168 font-family: var(--font-display);
169 font-weight: 600;
170 cursor: pointer;
171 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
172}
173
174button:hover {
175 transform: translateY(-1px);
176 box-shadow: 0 8px 18px rgba(61, 74, 47, 0.25);
177}
178
179button.secondary {
180 background: transparent;
181 color: var(--color-olive);
182 border: 1px solid rgba(61, 74, 47, 0.35);
183}
184
185button.ghost {
186 background: transparent;
187 color: var(--color-ink);
188 border: 1px dashed rgba(18, 16, 15, 0.2);
189}
190
191.badge {
192 display: inline-flex;
193 align-items: center;
194 gap: 6px;
195 border-radius: 999px;
196 padding: 6px 12px;
197 background: rgba(61, 74, 47, 0.1);
198 color: var(--color-olive);
199 font-family: var(--font-display);
200 font-size: 0.8rem;
201}
202
203.list {
204 display: grid;
205 gap: 12px;
206}
207
208.list-item {
209 padding: 12px;
210 border-radius: 14px;
211 background: #fff9f2;
212 border: 1px solid rgba(18, 16, 15, 0.08);
213 display: grid;
214 gap: 6px;
215}
216
217.list-item strong {
218 font-family: var(--font-display);
219}
220
221.details {
222 margin-top: 12px;
223}
224
225.details > summary {
226 cursor: pointer;
227 font-family: var(--font-display);
228 list-style: none;
229}
230
231.details > summary::-webkit-details-marker {
232 display: none;
233}
234
235.list-item .code-block {
236 margin: 0;
237 padding: 10px 12px;
238 border-radius: 12px;
239 background: rgba(18, 16, 15, 0.06);
240 font-size: 0.78rem;
241 line-height: 1.5;
242 white-space: pre-wrap;
243 word-break: break-word;
244}
245
246.notice {
247 padding: 12px 14px;
248 border-radius: 12px;
249 background: rgba(242, 140, 40, 0.12);
250 color: var(--color-ink);
251}
252
253
254.fade-in {
255 animation: fadeIn 0.8s ease forwards;
256}
257
258.stagger > * {
259 opacity: 0;
260 transform: translateY(6px);
261 animation: fadeUp 0.6s ease forwards;
262}
263
264.stagger > *:nth-child(1) {
265 animation-delay: 0.05s;
266}
267
268.stagger > *:nth-child(2) {
269 animation-delay: 0.12s;
270}
271
272.stagger > *:nth-child(3) {
273 animation-delay: 0.18s;
274}
275
276.stagger > *:nth-child(4) {
277 animation-delay: 0.24s;
278}
279
280@keyframes fadeIn {
281 from {
282 opacity: 0;
283 transform: translateY(4px);
284 }
285 to {
286 opacity: 1;
287 transform: translateY(0);
288 }
289}
290
291@keyframes fadeUp {
292 from {
293 opacity: 0;
294 transform: translateY(8px);
295 }
296 to {
297 opacity: 1;
298 transform: translateY(0);
299 }
300}