@atelic-action/ui 0.14.0 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -3
- package/dist/artifact/artifactConfig.d.ts +138 -0
- package/dist/artifact/artifactConfig.js +10 -0
- package/dist/artifact/readers.d.ts +33 -0
- package/dist/artifact/readers.js +117 -0
- package/dist/vite/private-chunks.d.ts +24 -0
- package/dist/vite/private-chunks.js +42 -0
- package/package.json +19 -3
- package/src/artifact/AppErrorBoundary.tsx +36 -0
- package/src/artifact/ArtifactShell.tsx +50 -0
- package/src/artifact/ErrorFallback.tsx +70 -0
- package/src/artifact/Gate.tsx +340 -0
- package/src/artifact/GradeChip.tsx +29 -0
- package/src/artifact/Report.tsx +131 -0
- package/src/artifact/SignOff.tsx +37 -0
- package/src/artifact/Writeup.tsx +791 -0
- package/src/artifact/artifactConfig.ts +134 -0
- package/src/artifact/index.ts +25 -0
- package/src/artifact/pageHead.ts +58 -0
- package/src/artifact/readers.ts +146 -0
- package/src/styles/artifact.css +1862 -0
- package/src/vite/private-chunks.ts +65 -0
|
@@ -0,0 +1,1862 @@
|
|
|
1
|
+
/* The artifact documents under src/artifact: the writeup, the monthly page,
|
|
2
|
+
the sealed document stage, and the grade chip and sign off the first two
|
|
3
|
+
share. Moved whole from the artifact template, in the order its build
|
|
4
|
+
bundled them (the shared classes, the stage, the monthly page, the
|
|
5
|
+
writeup), which the two @page rules depend on: the later one wins, and
|
|
6
|
+
the writeup's is the later one. They sit in the package's layer like
|
|
7
|
+
every sheet here, so any rule a site writes outside a layer still wins
|
|
8
|
+
over them whatever its specificity. */
|
|
9
|
+
@layer atelic-ui {
|
|
10
|
+
/* =================================================================
|
|
11
|
+
SHARED: the vocabulary the writeup and the monthly page both wear,
|
|
12
|
+
the grade chip (GradeChip) and the sign off lockup (SignOff). A class
|
|
13
|
+
used by more than one route's components lives in the base sheet
|
|
14
|
+
chain rather than in a component's stylesheet, so it can never vanish
|
|
15
|
+
from a page that does not import the component that defined it.
|
|
16
|
+
|
|
17
|
+
Tokens only, with one deliberate literal set: the four grade colors.
|
|
18
|
+
================================================================= */
|
|
19
|
+
|
|
20
|
+
/* ---- the grade chip ---- */
|
|
21
|
+
:is(.mkt, .atelic-ui) .op-grade {
|
|
22
|
+
display: inline-block;
|
|
23
|
+
vertical-align: 0.1em;
|
|
24
|
+
margin-left: 0.6em;
|
|
25
|
+
padding: 0.1em 0.55em 0.12em;
|
|
26
|
+
border: 1px solid var(--hairline-strong);
|
|
27
|
+
border-radius: 999px;
|
|
28
|
+
font-family: var(--font-mono);
|
|
29
|
+
font-size: 7pt;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
letter-spacing: 0.08em;
|
|
32
|
+
text-transform: uppercase;
|
|
33
|
+
color: var(--ink-soft);
|
|
34
|
+
line-height: 1.3;
|
|
35
|
+
min-width: 1.6em;
|
|
36
|
+
text-align: center;
|
|
37
|
+
}
|
|
38
|
+
/* The four grade colors are the second deliberate literal set after the
|
|
39
|
+
printed sheet's white: a grade reads green, yellow, orange, red
|
|
40
|
+
everywhere, whatever the brand's palette, so they are not theme tokens.
|
|
41
|
+
The orange sits between the yellow's hue and the red's so the four stay
|
|
42
|
+
apart on paper, and its letter clears AA on its own tint. */
|
|
43
|
+
:is(.mkt, .atelic-ui) .op-grade[data-grade="a"] {
|
|
44
|
+
color: #1b7f3b;
|
|
45
|
+
border-color: #1b7f3b;
|
|
46
|
+
background: #eaf6ee;
|
|
47
|
+
}
|
|
48
|
+
:is(.mkt, .atelic-ui) .op-grade[data-grade="b"] {
|
|
49
|
+
color: #9a6b00;
|
|
50
|
+
border-color: #c99a1a;
|
|
51
|
+
background: #fdf5dc;
|
|
52
|
+
}
|
|
53
|
+
:is(.mkt, .atelic-ui) .op-grade[data-grade="c"] {
|
|
54
|
+
color: #a84500;
|
|
55
|
+
border-color: #e8650a;
|
|
56
|
+
background: #fff0e3;
|
|
57
|
+
}
|
|
58
|
+
:is(.mkt, .atelic-ui) .op-grade[data-grade="d"] {
|
|
59
|
+
color: #b3261e;
|
|
60
|
+
border-color: #b3261e;
|
|
61
|
+
background: #fdecea;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ---- the sign off lockup: its container sets the size and the color ---- */
|
|
65
|
+
:is(.mkt, .atelic-ui) .op-who {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 10pt;
|
|
69
|
+
}
|
|
70
|
+
:is(.mkt, .atelic-ui) .op-who img {
|
|
71
|
+
width: 0.6in;
|
|
72
|
+
height: 0.6in;
|
|
73
|
+
border-radius: 50%;
|
|
74
|
+
object-fit: cover;
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
}
|
|
77
|
+
:is(.mkt, .atelic-ui) .op-who a {
|
|
78
|
+
display: inline-flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: 0.3em;
|
|
81
|
+
white-space: nowrap;
|
|
82
|
+
}
|
|
83
|
+
:is(.mkt, .atelic-ui) .op-who b {
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
color: var(--ink);
|
|
86
|
+
}
|
|
87
|
+
:is(.mkt, .atelic-ui) .op-sign {
|
|
88
|
+
font-family: var(--font-script);
|
|
89
|
+
font-size: 15pt;
|
|
90
|
+
color: var(--ink);
|
|
91
|
+
line-height: 1;
|
|
92
|
+
margin-bottom: 4pt;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@media screen and (max-width: 899px) {
|
|
96
|
+
:is(.mkt, .atelic-ui) .op-grade {
|
|
97
|
+
font-size: 10px;
|
|
98
|
+
}
|
|
99
|
+
:is(.mkt, .atelic-ui) .op-sign {
|
|
100
|
+
font-size: 22px;
|
|
101
|
+
}
|
|
102
|
+
:is(.mkt, .atelic-ui) .op-who img {
|
|
103
|
+
width: 56px;
|
|
104
|
+
height: 56px;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* The sender's logo is the outlined wordmark, an image wider than the square
|
|
109
|
+
slot the shared header cuts for a mark, so it keeps its own width, and the
|
|
110
|
+
empty text wordmark beside it takes no room. */
|
|
111
|
+
:is(.mkt, .atelic-ui) .nav-logo .mark {
|
|
112
|
+
width: auto;
|
|
113
|
+
height: 20px;
|
|
114
|
+
}
|
|
115
|
+
:is(.mkt, .atelic-ui) .nav-logo .wordmark:empty {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* The sealed document stage: the Gate component (Gate.tsx). The sign in
|
|
120
|
+
screen and the watermark it shares a vocabulary with live in
|
|
121
|
+
styles/gate.css. */
|
|
122
|
+
|
|
123
|
+
/* =================================================================
|
|
124
|
+
THE SEALED DOCUMENT STAGE: the Gate component (Gate.tsx).
|
|
125
|
+
A dark stage derived from the semantic tokens, so a client's
|
|
126
|
+
theme.css recolors it. The gate card reuses the login
|
|
127
|
+
screen's vocabulary above (eyebrow, headline, lead, form, input,
|
|
128
|
+
error); this section only stages it dark and adds the document
|
|
129
|
+
classes the decrypted HTML is written against.
|
|
130
|
+
================================================================= */
|
|
131
|
+
:is(.mkt, .atelic-ui) .gate-stage {
|
|
132
|
+
--gs-stage: var(--surface-dark);
|
|
133
|
+
--gs-bright: color-mix(in srgb, var(--surface) 96%, white);
|
|
134
|
+
--gs-dim: color-mix(in srgb, var(--surface) 62%, var(--surface-dark));
|
|
135
|
+
--gs-faint: color-mix(in srgb, var(--surface) 40%, var(--surface-dark));
|
|
136
|
+
--gs-panel: color-mix(in srgb, var(--surface-dark) 88%, var(--surface));
|
|
137
|
+
--gs-border: color-mix(in srgb, var(--surface-dark) 72%, var(--surface));
|
|
138
|
+
--gs-hairline: color-mix(in srgb, var(--surface) 10%, transparent);
|
|
139
|
+
|
|
140
|
+
/* The navbar is fixed, so it adds no document height: a stage sized
|
|
141
|
+
100svh minus the nav plus a credit bar shorter than the nav leaves
|
|
142
|
+
the document shorter than the viewport, and the body's light
|
|
143
|
+
background shows beneath the credit bar. The stage therefore owns
|
|
144
|
+
the full viewport and clears the nav itself, painting dark edge to
|
|
145
|
+
edge behind the bar. */
|
|
146
|
+
min-height: 100svh;
|
|
147
|
+
padding-top: var(--nav-height);
|
|
148
|
+
background: var(--gs-stage);
|
|
149
|
+
color: var(--gs-bright);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Overscroll and any sub-viewport rounding still expose the page body at
|
|
153
|
+
the edges; a page carrying the stage paints its whole shell dark. */
|
|
154
|
+
:is(.mkt, .atelic-ui):has(.gate-stage) {
|
|
155
|
+
background: var(--surface-dark);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* ---- the gate card, staged dark ---- */
|
|
159
|
+
:is(.mkt, .atelic-ui) .gate-hall {
|
|
160
|
+
display: grid;
|
|
161
|
+
place-items: center;
|
|
162
|
+
min-height: calc(100svh - var(--nav-height));
|
|
163
|
+
padding-block: clamp(48px, 9vh, 96px);
|
|
164
|
+
}
|
|
165
|
+
:is(.mkt, .atelic-ui) .gate-card {
|
|
166
|
+
width: 100%;
|
|
167
|
+
max-width: 520px;
|
|
168
|
+
margin-inline: auto;
|
|
169
|
+
padding: clamp(28px, 5vw, 44px);
|
|
170
|
+
border: 1px solid var(--gs-border);
|
|
171
|
+
border-radius: var(--radius-lg);
|
|
172
|
+
background: var(--gs-panel);
|
|
173
|
+
text-align: center;
|
|
174
|
+
}
|
|
175
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-eyebrow {
|
|
176
|
+
margin: 0 0 12px;
|
|
177
|
+
font-size: 12.5px;
|
|
178
|
+
letter-spacing: 0.02em;
|
|
179
|
+
color: var(--gs-faint);
|
|
180
|
+
}
|
|
181
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-headline {
|
|
182
|
+
margin: 0 0 12px;
|
|
183
|
+
font-family: var(--font-sans);
|
|
184
|
+
font-weight: 800;
|
|
185
|
+
letter-spacing: -0.015em;
|
|
186
|
+
font-size: clamp(26px, 3.4vw, 34px);
|
|
187
|
+
line-height: 1.12;
|
|
188
|
+
max-width: none;
|
|
189
|
+
color: var(--gs-bright);
|
|
190
|
+
}
|
|
191
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-lead {
|
|
192
|
+
margin: 0 auto 26px;
|
|
193
|
+
max-width: 42ch;
|
|
194
|
+
font-size: 15px;
|
|
195
|
+
line-height: 1.6;
|
|
196
|
+
color: var(--gs-dim);
|
|
197
|
+
}
|
|
198
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-input {
|
|
199
|
+
border-color: var(--gs-border);
|
|
200
|
+
background: color-mix(in srgb, var(--surface-dark) 94%, var(--surface));
|
|
201
|
+
color: var(--gs-bright);
|
|
202
|
+
}
|
|
203
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-input::placeholder {
|
|
204
|
+
color: var(--gs-faint);
|
|
205
|
+
}
|
|
206
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-input:focus-visible {
|
|
207
|
+
border-color: var(--primary-bright);
|
|
208
|
+
box-shadow: 0 0 0 3px var(--primary-focus-ring);
|
|
209
|
+
}
|
|
210
|
+
:is(.mkt, .atelic-ui) .gate-stage .gate-error {
|
|
211
|
+
margin: 20px auto 0;
|
|
212
|
+
max-width: 46ch;
|
|
213
|
+
font-size: 14.5px;
|
|
214
|
+
line-height: 1.55;
|
|
215
|
+
color: var(--gs-dim);
|
|
216
|
+
background: none;
|
|
217
|
+
border: none;
|
|
218
|
+
padding: 0;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* ---- the document ----
|
|
222
|
+
Everything below styles HTML the content module authors, so the
|
|
223
|
+
selectors are element level inside .gate-content rather than a class
|
|
224
|
+
per line. A client document writes plain markup and inherits this. */
|
|
225
|
+
:is(.mkt, .atelic-ui) .gate-doc {
|
|
226
|
+
/* The stage itself clears the fixed nav, so the document pads only
|
|
227
|
+
its own breathing room. */
|
|
228
|
+
padding-block: clamp(44px, 8vh, 88px) clamp(64px, 12vh, 132px);
|
|
229
|
+
}
|
|
230
|
+
:is(.mkt, .atelic-ui) .gate-content {
|
|
231
|
+
/* The document column matches the chrome: .wrap and .nav-inner share
|
|
232
|
+
--max-width, so the text aligns with the header bar's edges rather
|
|
233
|
+
than sitting in a narrower centered measure. */
|
|
234
|
+
color: var(--gs-dim);
|
|
235
|
+
font-size: 16.5px;
|
|
236
|
+
line-height: 1.7;
|
|
237
|
+
}
|
|
238
|
+
:is(.mkt, .atelic-ui) .gate-content h1 {
|
|
239
|
+
margin: 0 0 10px;
|
|
240
|
+
font-size: clamp(30px, 4.4vw, 46px);
|
|
241
|
+
line-height: 1.06;
|
|
242
|
+
color: var(--gs-bright);
|
|
243
|
+
text-wrap: balance;
|
|
244
|
+
}
|
|
245
|
+
:is(.mkt, .atelic-ui) .gate-content h2 {
|
|
246
|
+
margin: 52px 0 14px;
|
|
247
|
+
font-size: clamp(21px, 2.6vw, 27px);
|
|
248
|
+
line-height: 1.2;
|
|
249
|
+
color: var(--gs-bright);
|
|
250
|
+
}
|
|
251
|
+
:is(.mkt, .atelic-ui) .gate-content h3 {
|
|
252
|
+
margin: 28px 0 8px;
|
|
253
|
+
font-size: 17px;
|
|
254
|
+
color: var(--gs-bright);
|
|
255
|
+
}
|
|
256
|
+
:is(.mkt, .atelic-ui) .gate-content p {
|
|
257
|
+
margin: 0 0 16px;
|
|
258
|
+
text-wrap: pretty;
|
|
259
|
+
}
|
|
260
|
+
:is(.mkt, .atelic-ui) .gate-content ul {
|
|
261
|
+
margin: 0 0 16px;
|
|
262
|
+
padding-left: 22px;
|
|
263
|
+
display: flex;
|
|
264
|
+
flex-direction: column;
|
|
265
|
+
gap: 8px;
|
|
266
|
+
list-style: disc;
|
|
267
|
+
}
|
|
268
|
+
:is(.mkt, .atelic-ui) .gate-content li {
|
|
269
|
+
display: list-item;
|
|
270
|
+
list-style: disc;
|
|
271
|
+
margin: 0;
|
|
272
|
+
}
|
|
273
|
+
:is(.mkt, .atelic-ui) .gate-content li::marker {
|
|
274
|
+
color: var(--primary-bright);
|
|
275
|
+
}
|
|
276
|
+
:is(.mkt, .atelic-ui) .gate-content strong {
|
|
277
|
+
color: var(--gs-bright);
|
|
278
|
+
font-weight: 600;
|
|
279
|
+
}
|
|
280
|
+
:is(.mkt, .atelic-ui) .gate-content a {
|
|
281
|
+
color: var(--primary-bright);
|
|
282
|
+
text-decoration: none;
|
|
283
|
+
border-bottom: 1px solid currentColor;
|
|
284
|
+
}
|
|
285
|
+
:is(.mkt, .atelic-ui) .gate-content hr {
|
|
286
|
+
margin: 44px 0;
|
|
287
|
+
border: 0;
|
|
288
|
+
border-top: 1px solid var(--gs-hairline);
|
|
289
|
+
}
|
|
290
|
+
:is(.mkt, .atelic-ui) .gate-meta {
|
|
291
|
+
margin: 0 0 34px;
|
|
292
|
+
font-family: var(--font-mono);
|
|
293
|
+
font-size: 12.5px;
|
|
294
|
+
color: var(--gs-faint);
|
|
295
|
+
}
|
|
296
|
+
:is(.mkt, .atelic-ui) .gate-lede {
|
|
297
|
+
font-size: 18px;
|
|
298
|
+
color: var(--gs-bright);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/* Tier cards: the shape of a three option quote. Faded panels on the
|
|
302
|
+
stage, one hairline lifted to mark the recommended option; no filled
|
|
303
|
+
color anywhere, so the CTA button stays the only saturated thing. */
|
|
304
|
+
:is(.mkt, .atelic-ui) .gate-tiers {
|
|
305
|
+
display: grid;
|
|
306
|
+
/* Three explicit columns: auto-fit minted a fourth empty track at
|
|
307
|
+
document width and squeezed the cards into three quarters of the
|
|
308
|
+
row. A proposal's tier row is three builds wide by design. */
|
|
309
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
310
|
+
gap: 16px;
|
|
311
|
+
margin: 24px 0 8px;
|
|
312
|
+
}
|
|
313
|
+
@media (max-width: 860px) {
|
|
314
|
+
:is(.mkt, .atelic-ui) .gate-tiers {
|
|
315
|
+
grid-template-columns: 1fr;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
:is(.mkt, .atelic-ui) .gate-tier {
|
|
319
|
+
display: flex;
|
|
320
|
+
flex-direction: column;
|
|
321
|
+
gap: 6px;
|
|
322
|
+
padding: 22px;
|
|
323
|
+
border: 1px solid var(--gs-border);
|
|
324
|
+
border-radius: var(--radius-lg);
|
|
325
|
+
background: var(--gs-panel);
|
|
326
|
+
min-width: 0;
|
|
327
|
+
}
|
|
328
|
+
:is(.mkt, .atelic-ui) .gate-tier.is-picked {
|
|
329
|
+
border-color: color-mix(in srgb, var(--primary-bright) 55%, transparent);
|
|
330
|
+
}
|
|
331
|
+
:is(.mkt, .atelic-ui) .gate-tier-name {
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
font-size: 17px;
|
|
334
|
+
color: var(--gs-bright);
|
|
335
|
+
}
|
|
336
|
+
:is(.mkt, .atelic-ui) .gate-tier-price {
|
|
337
|
+
font-family: var(--font-mono);
|
|
338
|
+
font-size: 21px;
|
|
339
|
+
color: var(--primary-bright);
|
|
340
|
+
}
|
|
341
|
+
:is(.mkt, .atelic-ui) .gate-tier-note {
|
|
342
|
+
font-size: 14px;
|
|
343
|
+
line-height: 1.55;
|
|
344
|
+
color: var(--gs-dim);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/* Trade arithmetic on a card: a sum column sitting on the card's left,
|
|
348
|
+
digits right-aligned against each other the way a hand total lines
|
|
349
|
+
up, with any annotation (the credit's label) to the right of its
|
|
350
|
+
figure. Markup:
|
|
351
|
+
|
|
352
|
+
<div class="gate-tier-math">
|
|
353
|
+
<span class="gate-tier-was">$7,400</span>
|
|
354
|
+
<span class="gate-tier-credit">− $3,660</span>
|
|
355
|
+
<span class="gate-tier-mathlabel">install credit</span>
|
|
356
|
+
<span class="gate-tier-price">$3,740</span>
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
Amounts take grid column one (right-aligned, shared right edge);
|
|
360
|
+
labels take column two. A bare .gate-tier-price outside the math
|
|
361
|
+
block (the add-on card) keeps its standalone look. */
|
|
362
|
+
:is(.mkt, .atelic-ui) .gate-tier-math {
|
|
363
|
+
display: grid;
|
|
364
|
+
grid-template-columns: max-content auto;
|
|
365
|
+
column-gap: 10px;
|
|
366
|
+
row-gap: 2px;
|
|
367
|
+
align-items: baseline;
|
|
368
|
+
justify-content: start;
|
|
369
|
+
}
|
|
370
|
+
:is(.mkt, .atelic-ui) .gate-tier-math .gate-tier-was,
|
|
371
|
+
:is(.mkt, .atelic-ui) .gate-tier-math .gate-tier-credit,
|
|
372
|
+
:is(.mkt, .atelic-ui) .gate-tier-math .gate-tier-price {
|
|
373
|
+
grid-column: 1;
|
|
374
|
+
text-align: right;
|
|
375
|
+
}
|
|
376
|
+
:is(.mkt, .atelic-ui) .gate-tier-mathlabel {
|
|
377
|
+
grid-column: 2;
|
|
378
|
+
font-size: 13px;
|
|
379
|
+
color: var(--gs-faint);
|
|
380
|
+
}
|
|
381
|
+
:is(.mkt, .atelic-ui) .gate-tier-was {
|
|
382
|
+
font-family: var(--font-mono);
|
|
383
|
+
font-size: 15px;
|
|
384
|
+
color: var(--gs-faint);
|
|
385
|
+
text-decoration: line-through;
|
|
386
|
+
}
|
|
387
|
+
:is(.mkt, .atelic-ui) .gate-tier-credit {
|
|
388
|
+
font-family: var(--font-mono);
|
|
389
|
+
font-size: 14px;
|
|
390
|
+
color: var(--gs-dim);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* A full width card in the tier grid, for an add-on (a monthly service
|
|
394
|
+
under one-time builds) that applies across every column. */
|
|
395
|
+
:is(.mkt, .atelic-ui) .gate-tiers .gate-tier.is-addon {
|
|
396
|
+
grid-column: 1 / -1;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/* The icon list: the standard sent artifact list form, each line led
|
|
400
|
+
by a small lucide icon that says what the line means. The sealed
|
|
401
|
+
content inlines the SVGs. */
|
|
402
|
+
:is(.mkt, .atelic-ui) .gate-content ul.icon-list {
|
|
403
|
+
list-style: none;
|
|
404
|
+
margin: 0 0 16px;
|
|
405
|
+
padding: 0;
|
|
406
|
+
display: flex;
|
|
407
|
+
flex-direction: column;
|
|
408
|
+
gap: 12px;
|
|
409
|
+
}
|
|
410
|
+
:is(.mkt, .atelic-ui) .gate-content ul.icon-list li {
|
|
411
|
+
display: flex;
|
|
412
|
+
align-items: flex-start;
|
|
413
|
+
gap: 12px;
|
|
414
|
+
margin: 0;
|
|
415
|
+
list-style: none;
|
|
416
|
+
}
|
|
417
|
+
:is(.mkt, .atelic-ui) .gate-content ul.icon-list svg {
|
|
418
|
+
width: 18px;
|
|
419
|
+
height: 18px;
|
|
420
|
+
flex: 0 0 auto;
|
|
421
|
+
margin-top: 3px;
|
|
422
|
+
color: var(--primary-bright);
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
/* Numbered flow: the ordered list for a step-by-step close. */
|
|
426
|
+
:is(.mkt, .atelic-ui) .gate-content ol {
|
|
427
|
+
margin: 0 0 16px;
|
|
428
|
+
padding-left: 24px;
|
|
429
|
+
display: flex;
|
|
430
|
+
flex-direction: column;
|
|
431
|
+
gap: 10px;
|
|
432
|
+
}
|
|
433
|
+
:is(.mkt, .atelic-ui) .gate-content ol li {
|
|
434
|
+
display: list-item;
|
|
435
|
+
list-style: decimal;
|
|
436
|
+
margin: 0;
|
|
437
|
+
}
|
|
438
|
+
:is(.mkt, .atelic-ui) .gate-content ol li::marker {
|
|
439
|
+
color: var(--primary-bright);
|
|
440
|
+
font-weight: 700;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/* Icon bullets: a checklist variant of the document list, worn by any
|
|
444
|
+
ul.gate-checks in the sealed content or inside a tier card. */
|
|
445
|
+
:is(.mkt, .atelic-ui) .gate-content ul.gate-checks {
|
|
446
|
+
list-style: none;
|
|
447
|
+
padding-left: 0;
|
|
448
|
+
}
|
|
449
|
+
:is(.mkt, .atelic-ui) .gate-content .gate-checks li {
|
|
450
|
+
position: relative;
|
|
451
|
+
list-style: none;
|
|
452
|
+
padding-left: 26px;
|
|
453
|
+
}
|
|
454
|
+
:is(.mkt, .atelic-ui) .gate-content .gate-checks li::before {
|
|
455
|
+
/* The lucide check, masked so it takes the accent color. A glyph
|
|
456
|
+
character would trip the icons-over-emojis test; an SVG matches
|
|
457
|
+
the icon set the rest of the site draws from. */
|
|
458
|
+
content: "";
|
|
459
|
+
position: absolute;
|
|
460
|
+
left: 0;
|
|
461
|
+
top: 0.28em;
|
|
462
|
+
width: 14px;
|
|
463
|
+
height: 14px;
|
|
464
|
+
background-color: var(--primary-bright);
|
|
465
|
+
-webkit-mask:
|
|
466
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
|
|
467
|
+
center / contain no-repeat;
|
|
468
|
+
mask:
|
|
469
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
|
|
470
|
+
center / contain no-repeat;
|
|
471
|
+
}
|
|
472
|
+
:is(.mkt, .atelic-ui) .gate-tier ul.gate-checks {
|
|
473
|
+
margin: 6px 0 0;
|
|
474
|
+
display: grid;
|
|
475
|
+
gap: 8px;
|
|
476
|
+
font-size: 14px;
|
|
477
|
+
line-height: 1.5;
|
|
478
|
+
color: var(--gs-dim);
|
|
479
|
+
}
|
|
480
|
+
:is(.mkt, .atelic-ui) .gate-tier .gate-checks li {
|
|
481
|
+
padding-left: 22px;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
/* ---- the close: sign off, then the person lockup ---- */
|
|
485
|
+
:is(.mkt, .atelic-ui) .gate-sign {
|
|
486
|
+
margin: 44px 0 18px;
|
|
487
|
+
/* The pitch surface sign off is the script face (voice.md rule 9),
|
|
488
|
+
the same face the writeup and the monthly page close on, centered
|
|
489
|
+
on the dark stage. */
|
|
490
|
+
font-family: var(--font-script);
|
|
491
|
+
font-size: clamp(38px, 5.5vw, 56px);
|
|
492
|
+
color: var(--secondary-soft);
|
|
493
|
+
text-align: center;
|
|
494
|
+
}
|
|
495
|
+
:is(.mkt, .atelic-ui) .gate-person {
|
|
496
|
+
display: flex;
|
|
497
|
+
align-items: center;
|
|
498
|
+
justify-content: center;
|
|
499
|
+
gap: 18px;
|
|
500
|
+
text-align: left;
|
|
501
|
+
}
|
|
502
|
+
:is(.mkt, .atelic-ui) .gate-person img {
|
|
503
|
+
width: 88px;
|
|
504
|
+
height: 88px;
|
|
505
|
+
border-radius: 50%;
|
|
506
|
+
object-fit: cover;
|
|
507
|
+
display: block;
|
|
508
|
+
flex: none;
|
|
509
|
+
}
|
|
510
|
+
:is(.mkt, .atelic-ui) .gate-person-name {
|
|
511
|
+
display: block;
|
|
512
|
+
font-weight: 600;
|
|
513
|
+
font-size: 17px;
|
|
514
|
+
color: var(--gs-bright);
|
|
515
|
+
}
|
|
516
|
+
:is(.mkt, .atelic-ui) .gate-person-role {
|
|
517
|
+
display: block;
|
|
518
|
+
margin-top: 4px;
|
|
519
|
+
font-size: 14px;
|
|
520
|
+
color: var(--gs-dim);
|
|
521
|
+
}
|
|
522
|
+
:is(.mkt, .atelic-ui) .gate-person-role a {
|
|
523
|
+
color: inherit;
|
|
524
|
+
border-bottom: 1px solid currentColor;
|
|
525
|
+
}
|
|
526
|
+
:is(.mkt, .atelic-ui) .gate-person-mail {
|
|
527
|
+
display: inline-flex;
|
|
528
|
+
align-items: center;
|
|
529
|
+
gap: 7px;
|
|
530
|
+
margin-top: 8px;
|
|
531
|
+
font-size: 14px;
|
|
532
|
+
font-weight: 500;
|
|
533
|
+
letter-spacing: 0.02em;
|
|
534
|
+
color: var(--primary-bright);
|
|
535
|
+
border-bottom: 1px solid currentColor;
|
|
536
|
+
padding-bottom: 1px;
|
|
537
|
+
}
|
|
538
|
+
:is(.mkt, .atelic-ui) .gate-person-mail svg {
|
|
539
|
+
width: 15px;
|
|
540
|
+
height: 15px;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
/* =================================================================
|
|
544
|
+
THE MONTHLY PAGE: one letter sheet and its hosted twin. Three
|
|
545
|
+
renderings of one DOM, the same as the writeup's:
|
|
546
|
+
|
|
547
|
+
- Screen (wide): the sheet at letter width on the surface, under the
|
|
548
|
+
artifact shell's dark header.
|
|
549
|
+
- Column (under 900px): the same sheet at phone type sizes; the leads
|
|
550
|
+
run two across and each grade row folds into a labeled block.
|
|
551
|
+
- Print: exactly one letter sheet, zero page margin, the header and
|
|
552
|
+
the credit band dropped. Content that misses the sheet is clipped,
|
|
553
|
+
never reflowed, so a print of one sheet is the check.
|
|
554
|
+
|
|
555
|
+
Tokens only (theme.css), except the printed sheet's white. The grade
|
|
556
|
+
chip and the sign off are the shared classes at the head of this sheet.
|
|
557
|
+
================================================================= */
|
|
558
|
+
:is(.mkt, .atelic-ui) .rp {
|
|
559
|
+
--rp-ink: var(--ink);
|
|
560
|
+
--rp-ink-soft: var(--ink-soft);
|
|
561
|
+
--rp-ink-faint: var(--neutral-500);
|
|
562
|
+
--rp-rule: var(--hairline-strong);
|
|
563
|
+
--rp-accent: var(--primary);
|
|
564
|
+
--rp-paper: #ffffff;
|
|
565
|
+
font-family: var(--font-sans);
|
|
566
|
+
color: var(--rp-ink);
|
|
567
|
+
background: var(--surface);
|
|
568
|
+
padding: calc(var(--nav-height) + 32px) 24px 48px;
|
|
569
|
+
}
|
|
570
|
+
:is(.mkt, .atelic-ui) .rp a {
|
|
571
|
+
color: inherit;
|
|
572
|
+
text-decoration: none;
|
|
573
|
+
}
|
|
574
|
+
:is(.mkt, .atelic-ui) .rp a:hover {
|
|
575
|
+
color: var(--rp-accent);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
/* ---- the sheet ---- */
|
|
579
|
+
:is(.mkt, .atelic-ui) .rp-sheet {
|
|
580
|
+
width: 8.5in;
|
|
581
|
+
max-width: 100%;
|
|
582
|
+
margin: 0 auto;
|
|
583
|
+
padding: 0.5in 0.65in 0.45in;
|
|
584
|
+
display: flex;
|
|
585
|
+
flex-direction: column;
|
|
586
|
+
background: var(--rp-paper);
|
|
587
|
+
border-radius: 7px;
|
|
588
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
|
|
589
|
+
print-color-adjust: exact;
|
|
590
|
+
-webkit-print-color-adjust: exact;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
/* ---- the title and the period ---- */
|
|
594
|
+
:is(.mkt, .atelic-ui) .rp-period {
|
|
595
|
+
font-family: var(--font-mono);
|
|
596
|
+
font-size: 8pt;
|
|
597
|
+
letter-spacing: 0.12em;
|
|
598
|
+
text-transform: uppercase;
|
|
599
|
+
color: var(--rp-accent);
|
|
600
|
+
}
|
|
601
|
+
:is(.mkt, .atelic-ui) .rp h1 {
|
|
602
|
+
font-family: var(--font-sans);
|
|
603
|
+
font-size: 25pt;
|
|
604
|
+
font-weight: 600;
|
|
605
|
+
letter-spacing: -0.03em;
|
|
606
|
+
line-height: 1.08;
|
|
607
|
+
margin: 6pt 0 14pt;
|
|
608
|
+
text-wrap: balance;
|
|
609
|
+
color: var(--rp-ink);
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
/* ---- the leads: four questions, each a figure and one sentence ---- */
|
|
613
|
+
:is(.mkt, .atelic-ui) .rp-leads {
|
|
614
|
+
display: grid;
|
|
615
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
616
|
+
gap: 0 16pt;
|
|
617
|
+
padding: 10pt 0 14pt;
|
|
618
|
+
border-top: 1.5px solid var(--rp-ink);
|
|
619
|
+
border-bottom: 1px solid var(--rp-rule);
|
|
620
|
+
}
|
|
621
|
+
:is(.mkt, .atelic-ui) .rp-lead {
|
|
622
|
+
display: flex;
|
|
623
|
+
flex-direction: column;
|
|
624
|
+
gap: 3pt;
|
|
625
|
+
min-width: 0;
|
|
626
|
+
}
|
|
627
|
+
:is(.mkt, .atelic-ui) .rp-q {
|
|
628
|
+
margin: 0;
|
|
629
|
+
font-family: var(--font-mono);
|
|
630
|
+
font-size: 7pt;
|
|
631
|
+
font-weight: 500;
|
|
632
|
+
letter-spacing: 0.1em;
|
|
633
|
+
line-height: 1.4;
|
|
634
|
+
text-transform: uppercase;
|
|
635
|
+
color: var(--rp-accent);
|
|
636
|
+
}
|
|
637
|
+
:is(.mkt, .atelic-ui) .rp-figure {
|
|
638
|
+
font-size: 18pt;
|
|
639
|
+
font-weight: 600;
|
|
640
|
+
letter-spacing: -0.02em;
|
|
641
|
+
line-height: 1.1;
|
|
642
|
+
color: var(--rp-ink);
|
|
643
|
+
}
|
|
644
|
+
:is(.mkt, .atelic-ui) .rp-lead p {
|
|
645
|
+
margin: 0;
|
|
646
|
+
font-size: 8.4pt;
|
|
647
|
+
line-height: 1.4;
|
|
648
|
+
color: var(--rp-ink-soft);
|
|
649
|
+
text-wrap: pretty;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
/* ---- the seven grades: now, last month, baseline, what moved ---- */
|
|
653
|
+
:is(.mkt, .atelic-ui) .rp-grades {
|
|
654
|
+
width: 100%;
|
|
655
|
+
border-collapse: collapse;
|
|
656
|
+
margin: 14pt 0 16pt;
|
|
657
|
+
font-size: 8.4pt;
|
|
658
|
+
line-height: 1.35;
|
|
659
|
+
}
|
|
660
|
+
:is(.mkt, .atelic-ui) .rp-grades th {
|
|
661
|
+
text-align: left;
|
|
662
|
+
padding: 0 6pt 4pt 0;
|
|
663
|
+
border-bottom: 1.5px solid var(--rp-ink);
|
|
664
|
+
font-family: var(--font-mono);
|
|
665
|
+
font-size: 6.5pt;
|
|
666
|
+
font-weight: 500;
|
|
667
|
+
letter-spacing: 0.1em;
|
|
668
|
+
text-transform: uppercase;
|
|
669
|
+
white-space: nowrap;
|
|
670
|
+
color: var(--rp-ink-faint);
|
|
671
|
+
}
|
|
672
|
+
:is(.mkt, .atelic-ui) .rp-grades td {
|
|
673
|
+
padding: 4pt 6pt 4pt 0;
|
|
674
|
+
border-bottom: 1px solid var(--rp-rule);
|
|
675
|
+
vertical-align: top;
|
|
676
|
+
color: var(--rp-ink);
|
|
677
|
+
}
|
|
678
|
+
:is(.mkt, .atelic-ui) .rp-grades tr.is-tier-start:not(:first-child) td {
|
|
679
|
+
border-top: 1px solid var(--rp-ink);
|
|
680
|
+
}
|
|
681
|
+
:is(.mkt, .atelic-ui) .rp-tier {
|
|
682
|
+
width: 0.85in;
|
|
683
|
+
font-family: var(--font-mono);
|
|
684
|
+
font-size: 7pt;
|
|
685
|
+
letter-spacing: 0.1em;
|
|
686
|
+
text-transform: uppercase;
|
|
687
|
+
white-space: nowrap;
|
|
688
|
+
}
|
|
689
|
+
:is(.mkt, .atelic-ui) .rp-section {
|
|
690
|
+
width: 1.9in;
|
|
691
|
+
font-weight: 600;
|
|
692
|
+
white-space: nowrap;
|
|
693
|
+
}
|
|
694
|
+
:is(.mkt, .atelic-ui) .rp-now,
|
|
695
|
+
:is(.mkt, .atelic-ui) .rp-earlier {
|
|
696
|
+
width: 0.65in;
|
|
697
|
+
white-space: nowrap;
|
|
698
|
+
}
|
|
699
|
+
:is(.mkt, .atelic-ui) .rp-grades .op-grade {
|
|
700
|
+
margin-left: 0;
|
|
701
|
+
}
|
|
702
|
+
/* The earlier letters print muted; this month's is the one judgement. */
|
|
703
|
+
:is(.mkt, .atelic-ui) .rp-earlier .op-grade {
|
|
704
|
+
opacity: 0.45;
|
|
705
|
+
}
|
|
706
|
+
:is(.mkt, .atelic-ui) .rp-moved {
|
|
707
|
+
color: var(--rp-ink-soft);
|
|
708
|
+
text-wrap: pretty;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
/* ---- the close ---- */
|
|
712
|
+
:is(.mkt, .atelic-ui) .rp-close {
|
|
713
|
+
margin-top: auto;
|
|
714
|
+
padding-top: 10pt;
|
|
715
|
+
border-top: 1px solid var(--rp-rule);
|
|
716
|
+
font-size: 8pt;
|
|
717
|
+
line-height: 1.6;
|
|
718
|
+
color: var(--rp-ink-faint);
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
/* ---- the column: phones and portrait tablets ---- */
|
|
722
|
+
@media screen and (max-width: 899px) {
|
|
723
|
+
:is(.mkt, .atelic-ui) .rp {
|
|
724
|
+
padding: calc(var(--nav-height) + 8px) 0 0;
|
|
725
|
+
}
|
|
726
|
+
:is(.mkt, .atelic-ui) .rp-sheet {
|
|
727
|
+
padding: 22px 18px 24px;
|
|
728
|
+
border-radius: 0;
|
|
729
|
+
box-shadow: none;
|
|
730
|
+
}
|
|
731
|
+
:is(.mkt, .atelic-ui) .rp-period {
|
|
732
|
+
font-size: 11px;
|
|
733
|
+
}
|
|
734
|
+
:is(.mkt, .atelic-ui) .rp h1 {
|
|
735
|
+
font-size: 30px;
|
|
736
|
+
margin: 8px 0 16px;
|
|
737
|
+
}
|
|
738
|
+
:is(.mkt, .atelic-ui) .rp-leads {
|
|
739
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
740
|
+
gap: 18px 16px;
|
|
741
|
+
padding: 16px 0 18px;
|
|
742
|
+
}
|
|
743
|
+
:is(.mkt, .atelic-ui) .rp-q {
|
|
744
|
+
font-size: 11px;
|
|
745
|
+
}
|
|
746
|
+
:is(.mkt, .atelic-ui) .rp-figure {
|
|
747
|
+
font-size: 24px;
|
|
748
|
+
}
|
|
749
|
+
:is(.mkt, .atelic-ui) .rp-lead p {
|
|
750
|
+
font-size: 14px;
|
|
751
|
+
line-height: 1.45;
|
|
752
|
+
}
|
|
753
|
+
:is(.mkt, .atelic-ui) .rp-grades {
|
|
754
|
+
font-size: 14px;
|
|
755
|
+
}
|
|
756
|
+
:is(.mkt, .atelic-ui) .rp-grades thead {
|
|
757
|
+
position: absolute;
|
|
758
|
+
width: 1px;
|
|
759
|
+
height: 1px;
|
|
760
|
+
overflow: hidden;
|
|
761
|
+
clip: rect(0, 0, 0, 0);
|
|
762
|
+
white-space: nowrap;
|
|
763
|
+
}
|
|
764
|
+
:is(.mkt, .atelic-ui) .rp-grades tr {
|
|
765
|
+
display: flex;
|
|
766
|
+
flex-wrap: wrap;
|
|
767
|
+
align-items: baseline;
|
|
768
|
+
gap: 6px 14px;
|
|
769
|
+
padding: 10px 0;
|
|
770
|
+
border-bottom: 1px solid var(--rp-rule);
|
|
771
|
+
}
|
|
772
|
+
:is(.mkt, .atelic-ui) .rp-grades tr.is-tier-start:not(:first-child) {
|
|
773
|
+
border-top: 1px solid var(--rp-ink);
|
|
774
|
+
}
|
|
775
|
+
:is(.mkt, .atelic-ui) .rp-grades td {
|
|
776
|
+
display: block;
|
|
777
|
+
width: auto;
|
|
778
|
+
padding: 0;
|
|
779
|
+
border: none;
|
|
780
|
+
}
|
|
781
|
+
:is(.mkt, .atelic-ui) .rp-grades tr.is-tier-start:not(:first-child) td {
|
|
782
|
+
border: none;
|
|
783
|
+
}
|
|
784
|
+
/* Each row folds to the tier on its own line (first row of a tier
|
|
785
|
+
only), the section, the three letters, then what moved. */
|
|
786
|
+
:is(.mkt, .atelic-ui) .rp-grades .rp-tier,
|
|
787
|
+
:is(.mkt, .atelic-ui) .rp-grades .rp-section,
|
|
788
|
+
:is(.mkt, .atelic-ui) .rp-grades .rp-moved {
|
|
789
|
+
width: 100%;
|
|
790
|
+
}
|
|
791
|
+
:is(.mkt, .atelic-ui) .rp-tier {
|
|
792
|
+
font-size: 10px;
|
|
793
|
+
}
|
|
794
|
+
:is(.mkt, .atelic-ui) .rp-tier:empty {
|
|
795
|
+
display: none;
|
|
796
|
+
}
|
|
797
|
+
:is(.mkt, .atelic-ui) .rp-section {
|
|
798
|
+
white-space: normal;
|
|
799
|
+
}
|
|
800
|
+
:is(.mkt, .atelic-ui) .rp-now::before,
|
|
801
|
+
:is(.mkt, .atelic-ui) .rp-earlier::before {
|
|
802
|
+
content: attr(data-label);
|
|
803
|
+
margin-right: 6px;
|
|
804
|
+
font-family: var(--font-mono);
|
|
805
|
+
font-size: 10px;
|
|
806
|
+
letter-spacing: 0.08em;
|
|
807
|
+
text-transform: uppercase;
|
|
808
|
+
color: var(--rp-ink-faint);
|
|
809
|
+
}
|
|
810
|
+
:is(.mkt, .atelic-ui) .rp-earlier:empty {
|
|
811
|
+
display: none;
|
|
812
|
+
}
|
|
813
|
+
:is(.mkt, .atelic-ui) .rp-close {
|
|
814
|
+
padding-top: 16px;
|
|
815
|
+
font-size: 13px;
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
/* ---- print: one letter sheet, the document alone ---- */
|
|
820
|
+
@page {
|
|
821
|
+
size: letter;
|
|
822
|
+
margin: 0;
|
|
823
|
+
}
|
|
824
|
+
@media print {
|
|
825
|
+
html,
|
|
826
|
+
body {
|
|
827
|
+
margin: 0;
|
|
828
|
+
padding: 0;
|
|
829
|
+
background: none;
|
|
830
|
+
}
|
|
831
|
+
:is(.mkt, .atelic-ui):has(.rp) .nav,
|
|
832
|
+
:is(.mkt, .atelic-ui):has(.rp) .skip-link,
|
|
833
|
+
:is(.mkt, .atelic-ui):has(.rp) .credit-bar {
|
|
834
|
+
display: none;
|
|
835
|
+
}
|
|
836
|
+
:is(.mkt, .atelic-ui) .rp {
|
|
837
|
+
padding: 0;
|
|
838
|
+
background: none;
|
|
839
|
+
}
|
|
840
|
+
:is(.mkt, .atelic-ui) .rp-sheet {
|
|
841
|
+
width: 8.5in;
|
|
842
|
+
height: 11in;
|
|
843
|
+
max-width: none;
|
|
844
|
+
margin: 0;
|
|
845
|
+
overflow: hidden;
|
|
846
|
+
border-radius: 0;
|
|
847
|
+
box-shadow: none;
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
/* =================================================================
|
|
852
|
+
THE WRITEUP: a web page first, and the printed copy from the same
|
|
853
|
+
page.
|
|
854
|
+
|
|
855
|
+
- Phone first: the base rules are the phone's. Each section is a card
|
|
856
|
+
of small blocks in one column; a table's rows stack, each fact
|
|
857
|
+
wearing its column's label, so nothing scrolls sideways.
|
|
858
|
+
- Wide (721px and up): the same cards with room: the overview on one
|
|
859
|
+
line a section, real table columns, the owner's screen beside the
|
|
860
|
+
findings.
|
|
861
|
+
- Print: the chrome steps aside, the lockup and the pointer to the
|
|
862
|
+
hosted page appear, the type comes down, and the cards flow across
|
|
863
|
+
letter pages. Nothing is clipped and no block splits across pages.
|
|
864
|
+
|
|
865
|
+
Tokens only (theme.css). The blocks inside a section (the checklist,
|
|
866
|
+
the sortable table, the charts, the stat row, the callout, the
|
|
867
|
+
collapsible) and their tones are styles/components.css's; this sheet sets
|
|
868
|
+
the document around them and their sizes here.
|
|
869
|
+
================================================================= */
|
|
870
|
+
:is(.mkt, .atelic-ui) .op {
|
|
871
|
+
--op-ink: var(--ink);
|
|
872
|
+
--op-ink-soft: var(--ink-soft);
|
|
873
|
+
--op-ink-faint: var(--neutral-500);
|
|
874
|
+
--op-rule: var(--neutral-100);
|
|
875
|
+
--op-accent: var(--primary);
|
|
876
|
+
--op-card: var(--card);
|
|
877
|
+
font-family: var(--font-sans);
|
|
878
|
+
color: var(--op-ink);
|
|
879
|
+
background: var(--surface);
|
|
880
|
+
min-height: 100vh;
|
|
881
|
+
}
|
|
882
|
+
:is(.mkt, .atelic-ui) .op a {
|
|
883
|
+
color: inherit;
|
|
884
|
+
text-decoration: none;
|
|
885
|
+
}
|
|
886
|
+
:is(.mkt, .atelic-ui) .op-doc {
|
|
887
|
+
max-width: 920px;
|
|
888
|
+
margin: 0 auto;
|
|
889
|
+
padding: calc(var(--nav-height) + 22px) 16px 48px;
|
|
890
|
+
font-size: 16px;
|
|
891
|
+
line-height: 1.5;
|
|
892
|
+
print-color-adjust: exact;
|
|
893
|
+
-webkit-print-color-adjust: exact;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
/* ---- the head: who it is for, what it is ---- */
|
|
897
|
+
:is(.mkt, .atelic-ui) .op-top {
|
|
898
|
+
display: none;
|
|
899
|
+
}
|
|
900
|
+
:is(.mkt, .atelic-ui) .op-meta {
|
|
901
|
+
margin: 0 0 10px;
|
|
902
|
+
font-family: var(--font-mono);
|
|
903
|
+
font-size: 12.5px;
|
|
904
|
+
letter-spacing: 0.04em;
|
|
905
|
+
color: var(--op-ink-faint);
|
|
906
|
+
}
|
|
907
|
+
:is(.mkt, .atelic-ui) .op-meta b {
|
|
908
|
+
font-weight: 500;
|
|
909
|
+
color: var(--op-ink-soft);
|
|
910
|
+
}
|
|
911
|
+
/* On a phone the date takes its own line; wide, it follows a middle dot. */
|
|
912
|
+
:is(.mkt, .atelic-ui) .op-meta-sep {
|
|
913
|
+
display: none;
|
|
914
|
+
}
|
|
915
|
+
:is(.mkt, .atelic-ui) .op-meta-date {
|
|
916
|
+
display: block;
|
|
917
|
+
}
|
|
918
|
+
:is(.mkt, .atelic-ui) .op h1 {
|
|
919
|
+
font-size: clamp(32px, 5vw, 44px);
|
|
920
|
+
font-weight: 650;
|
|
921
|
+
letter-spacing: -0.03em;
|
|
922
|
+
line-height: 1.08;
|
|
923
|
+
margin: 0;
|
|
924
|
+
text-wrap: balance;
|
|
925
|
+
color: var(--op-ink);
|
|
926
|
+
}
|
|
927
|
+
:is(.mkt, .atelic-ui) .op-intro {
|
|
928
|
+
margin: 14px 0 0;
|
|
929
|
+
max-width: 62ch;
|
|
930
|
+
font-size: 16.5px;
|
|
931
|
+
line-height: 1.5;
|
|
932
|
+
color: var(--op-ink-soft);
|
|
933
|
+
text-wrap: pretty;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
/* ---- the grade chip, at web sizes ---- */
|
|
937
|
+
:is(.mkt, .atelic-ui) .op .op-grade {
|
|
938
|
+
display: inline-grid;
|
|
939
|
+
place-items: center;
|
|
940
|
+
margin: 0;
|
|
941
|
+
padding: 0;
|
|
942
|
+
width: 26px;
|
|
943
|
+
height: 26px;
|
|
944
|
+
border-radius: 8px;
|
|
945
|
+
font-family: var(--font-sans);
|
|
946
|
+
font-size: 14px;
|
|
947
|
+
font-weight: 700;
|
|
948
|
+
letter-spacing: 0;
|
|
949
|
+
line-height: 1;
|
|
950
|
+
vertical-align: middle;
|
|
951
|
+
flex: none;
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
/* ---- the overview: the key, then every section under its tier, each a
|
|
955
|
+
grade, a name that links to the section, and one plain read ---- */
|
|
956
|
+
:is(.mkt, .atelic-ui) .op-ov {
|
|
957
|
+
margin-top: 22px;
|
|
958
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
959
|
+
}
|
|
960
|
+
:is(.mkt, .atelic-ui) .op-ov-head {
|
|
961
|
+
display: flex;
|
|
962
|
+
flex-wrap: wrap;
|
|
963
|
+
align-items: center;
|
|
964
|
+
justify-content: space-between;
|
|
965
|
+
gap: 8px 20px;
|
|
966
|
+
margin-bottom: 10px;
|
|
967
|
+
}
|
|
968
|
+
:is(.mkt, .atelic-ui) .op-ov-title {
|
|
969
|
+
font-size: 13px;
|
|
970
|
+
font-family: var(--font-mono);
|
|
971
|
+
font-weight: 500;
|
|
972
|
+
letter-spacing: 0.1em;
|
|
973
|
+
text-transform: uppercase;
|
|
974
|
+
color: var(--op-ink-faint);
|
|
975
|
+
margin: 0;
|
|
976
|
+
}
|
|
977
|
+
:is(.mkt, .atelic-ui) .op-legend {
|
|
978
|
+
list-style: none;
|
|
979
|
+
margin: 0;
|
|
980
|
+
padding: 0;
|
|
981
|
+
display: flex;
|
|
982
|
+
flex-wrap: wrap;
|
|
983
|
+
gap: 6px 16px;
|
|
984
|
+
font-size: 13.5px;
|
|
985
|
+
color: var(--op-ink-soft);
|
|
986
|
+
}
|
|
987
|
+
:is(.mkt, .atelic-ui) .op-legend li {
|
|
988
|
+
display: inline-flex;
|
|
989
|
+
align-items: center;
|
|
990
|
+
gap: 7px;
|
|
991
|
+
}
|
|
992
|
+
:is(.mkt, .atelic-ui) .op-legend .op-grade {
|
|
993
|
+
width: 22px;
|
|
994
|
+
height: 22px;
|
|
995
|
+
border-radius: 6px;
|
|
996
|
+
font-size: 12px;
|
|
997
|
+
}
|
|
998
|
+
:is(.mkt, .atelic-ui) .op-ov-card {
|
|
999
|
+
background: var(--op-card);
|
|
1000
|
+
border: 1px solid var(--op-rule);
|
|
1001
|
+
border-radius: var(--radius-md);
|
|
1002
|
+
box-shadow: var(--shadow-sm);
|
|
1003
|
+
overflow: hidden;
|
|
1004
|
+
}
|
|
1005
|
+
:is(.mkt, .atelic-ui) .op-ov-tier-label {
|
|
1006
|
+
padding: 7px 16px;
|
|
1007
|
+
background: var(--surface-alt);
|
|
1008
|
+
font-family: var(--font-mono);
|
|
1009
|
+
font-size: 11.5px;
|
|
1010
|
+
letter-spacing: 0.1em;
|
|
1011
|
+
text-transform: uppercase;
|
|
1012
|
+
color: var(--op-ink-soft);
|
|
1013
|
+
}
|
|
1014
|
+
:is(.mkt, .atelic-ui) .op-ov-tier ul {
|
|
1015
|
+
list-style: none;
|
|
1016
|
+
margin: 0;
|
|
1017
|
+
padding: 0;
|
|
1018
|
+
}
|
|
1019
|
+
:is(.mkt, .atelic-ui) .op-ov-row {
|
|
1020
|
+
position: relative;
|
|
1021
|
+
display: grid;
|
|
1022
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
1023
|
+
column-gap: 12px;
|
|
1024
|
+
row-gap: 2px;
|
|
1025
|
+
align-items: start;
|
|
1026
|
+
padding: 12px 12px 12px 16px;
|
|
1027
|
+
border-top: 1px solid var(--op-rule);
|
|
1028
|
+
}
|
|
1029
|
+
:is(.mkt, .atelic-ui) .op-ov-row:hover {
|
|
1030
|
+
background: var(--surface);
|
|
1031
|
+
}
|
|
1032
|
+
:is(.mkt, .atelic-ui) .op-ov-grade {
|
|
1033
|
+
grid-row: 1 / span 2;
|
|
1034
|
+
display: inline-flex;
|
|
1035
|
+
align-items: center;
|
|
1036
|
+
gap: 6px;
|
|
1037
|
+
}
|
|
1038
|
+
:is(.mkt, .atelic-ui) .op-ov-grade .op-grade {
|
|
1039
|
+
width: 30px;
|
|
1040
|
+
height: 30px;
|
|
1041
|
+
border-radius: 9px;
|
|
1042
|
+
font-size: 15px;
|
|
1043
|
+
}
|
|
1044
|
+
:is(.mkt, .atelic-ui) .op-ov-before .op-grade {
|
|
1045
|
+
opacity: 0.45;
|
|
1046
|
+
}
|
|
1047
|
+
:is(.mkt, .atelic-ui) .op-ov-name {
|
|
1048
|
+
font-size: 16px;
|
|
1049
|
+
font-weight: 650;
|
|
1050
|
+
letter-spacing: -0.01em;
|
|
1051
|
+
line-height: 1.35;
|
|
1052
|
+
padding-top: 3px;
|
|
1053
|
+
}
|
|
1054
|
+
/* The name is the link, and it covers the row; a link inside the read
|
|
1055
|
+
sits above it. */
|
|
1056
|
+
:is(.mkt, .atelic-ui) .op-ov-name a::after {
|
|
1057
|
+
content: "";
|
|
1058
|
+
position: absolute;
|
|
1059
|
+
inset: 0;
|
|
1060
|
+
}
|
|
1061
|
+
:is(.mkt, .atelic-ui) .op-ov-row:hover .op-ov-name {
|
|
1062
|
+
color: var(--op-accent);
|
|
1063
|
+
}
|
|
1064
|
+
:is(.mkt, .atelic-ui) .op-ov-read {
|
|
1065
|
+
grid-column: 2;
|
|
1066
|
+
font-size: 15px;
|
|
1067
|
+
line-height: 1.45;
|
|
1068
|
+
color: var(--op-ink-soft);
|
|
1069
|
+
text-wrap: pretty;
|
|
1070
|
+
}
|
|
1071
|
+
:is(.mkt, .atelic-ui) .op-ov-read a {
|
|
1072
|
+
position: relative;
|
|
1073
|
+
z-index: 1;
|
|
1074
|
+
color: var(--op-accent);
|
|
1075
|
+
text-decoration: underline;
|
|
1076
|
+
text-underline-offset: 2px;
|
|
1077
|
+
}
|
|
1078
|
+
:is(.mkt, .atelic-ui) .op-ov-go {
|
|
1079
|
+
grid-column: 3;
|
|
1080
|
+
grid-row: 1;
|
|
1081
|
+
margin-top: 5px;
|
|
1082
|
+
color: var(--neutral-300);
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
/* ---- a part: the tier and the question it answers ---- */
|
|
1086
|
+
:is(.mkt, .atelic-ui) .op-part {
|
|
1087
|
+
margin: 34px 0 10px;
|
|
1088
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
1089
|
+
}
|
|
1090
|
+
:is(.mkt, .atelic-ui) .op-part h2 {
|
|
1091
|
+
font-size: 27px;
|
|
1092
|
+
font-weight: 650;
|
|
1093
|
+
letter-spacing: -0.025em;
|
|
1094
|
+
line-height: 1.1;
|
|
1095
|
+
margin: 0;
|
|
1096
|
+
color: var(--op-ink);
|
|
1097
|
+
}
|
|
1098
|
+
:is(.mkt, .atelic-ui) .op-part p {
|
|
1099
|
+
margin: 6px 0 0;
|
|
1100
|
+
font-size: 16.5px;
|
|
1101
|
+
color: var(--op-ink-soft);
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
/* ---- a topic: one section, a card of blocks ---- */
|
|
1105
|
+
:is(.mkt, .atelic-ui) .op-topic {
|
|
1106
|
+
background: var(--op-card);
|
|
1107
|
+
border: 1px solid var(--op-rule);
|
|
1108
|
+
border-radius: var(--radius-md);
|
|
1109
|
+
box-shadow: var(--shadow-sm);
|
|
1110
|
+
padding: 18px 16px 16px;
|
|
1111
|
+
margin-top: 12px;
|
|
1112
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
1113
|
+
}
|
|
1114
|
+
:is(.mkt, .atelic-ui) .op-topic-head {
|
|
1115
|
+
display: flex;
|
|
1116
|
+
justify-content: space-between;
|
|
1117
|
+
align-items: flex-start;
|
|
1118
|
+
gap: 20px;
|
|
1119
|
+
}
|
|
1120
|
+
:is(.mkt, .atelic-ui) .op-topic h3 {
|
|
1121
|
+
font-size: 21px;
|
|
1122
|
+
font-weight: 650;
|
|
1123
|
+
letter-spacing: -0.02em;
|
|
1124
|
+
line-height: 1.2;
|
|
1125
|
+
margin: 0;
|
|
1126
|
+
color: var(--op-ink);
|
|
1127
|
+
}
|
|
1128
|
+
:is(.mkt, .atelic-ui) .op-topic h3 a {
|
|
1129
|
+
display: inline-flex;
|
|
1130
|
+
align-items: center;
|
|
1131
|
+
gap: 6px;
|
|
1132
|
+
border-bottom: 1px solid var(--neutral-200);
|
|
1133
|
+
}
|
|
1134
|
+
:is(.mkt, .atelic-ui) .op-topic h3 a svg {
|
|
1135
|
+
color: var(--op-ink-faint);
|
|
1136
|
+
}
|
|
1137
|
+
:is(.mkt, .atelic-ui) .op-topic h3 a:hover,
|
|
1138
|
+
:is(.mkt, .atelic-ui) .op-topic h3 a:hover svg {
|
|
1139
|
+
color: var(--op-accent);
|
|
1140
|
+
border-color: var(--op-accent);
|
|
1141
|
+
}
|
|
1142
|
+
:is(.mkt, .atelic-ui) .op-def {
|
|
1143
|
+
margin: 6px 0 0;
|
|
1144
|
+
font-size: 16px;
|
|
1145
|
+
line-height: 1.45;
|
|
1146
|
+
color: var(--op-ink-soft);
|
|
1147
|
+
text-wrap: pretty;
|
|
1148
|
+
}
|
|
1149
|
+
/* why the letter: the rule the section met, in a line */
|
|
1150
|
+
:is(.mkt, .atelic-ui) .op-why {
|
|
1151
|
+
margin: 6px 0 0;
|
|
1152
|
+
font-size: 14.5px;
|
|
1153
|
+
line-height: 1.45;
|
|
1154
|
+
color: var(--op-ink-soft);
|
|
1155
|
+
text-wrap: pretty;
|
|
1156
|
+
}
|
|
1157
|
+
:is(.mkt, .atelic-ui) .op-why b {
|
|
1158
|
+
font-weight: 650;
|
|
1159
|
+
color: var(--op-ink);
|
|
1160
|
+
}
|
|
1161
|
+
:is(.mkt, .atelic-ui) .op-topic-head > .op-grade {
|
|
1162
|
+
width: 42px;
|
|
1163
|
+
height: 42px;
|
|
1164
|
+
border-radius: 12px;
|
|
1165
|
+
font-size: 21px;
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
/* ---- blocks inside a topic, one under another ---- */
|
|
1169
|
+
:is(.mkt, .atelic-ui) .op-blocks {
|
|
1170
|
+
display: grid;
|
|
1171
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1172
|
+
}
|
|
1173
|
+
:is(.mkt, .atelic-ui) .op-block {
|
|
1174
|
+
margin-top: 16px;
|
|
1175
|
+
padding-top: 16px;
|
|
1176
|
+
border-top: 1px solid var(--op-rule);
|
|
1177
|
+
min-width: 0;
|
|
1178
|
+
}
|
|
1179
|
+
:is(.mkt, .atelic-ui) .op-block-head {
|
|
1180
|
+
margin-bottom: 12px;
|
|
1181
|
+
}
|
|
1182
|
+
:is(.mkt, .atelic-ui) .op-block-head h4 {
|
|
1183
|
+
font-size: 16px;
|
|
1184
|
+
font-weight: 650;
|
|
1185
|
+
letter-spacing: -0.005em;
|
|
1186
|
+
margin: 0;
|
|
1187
|
+
color: var(--op-ink);
|
|
1188
|
+
}
|
|
1189
|
+
:is(.mkt, .atelic-ui) .op-block-head p {
|
|
1190
|
+
margin: 3px 0 0;
|
|
1191
|
+
font-size: 15px;
|
|
1192
|
+
line-height: 1.45;
|
|
1193
|
+
color: var(--op-ink-soft);
|
|
1194
|
+
text-wrap: pretty;
|
|
1195
|
+
}
|
|
1196
|
+
:is(.mkt, .atelic-ui) .op-note {
|
|
1197
|
+
margin: 12px 0 0;
|
|
1198
|
+
font-size: 15px;
|
|
1199
|
+
line-height: 1.5;
|
|
1200
|
+
color: var(--op-ink-soft);
|
|
1201
|
+
text-wrap: pretty;
|
|
1202
|
+
}
|
|
1203
|
+
:is(.mkt, .atelic-ui) .op-note b {
|
|
1204
|
+
color: var(--op-ink);
|
|
1205
|
+
font-weight: 600;
|
|
1206
|
+
}
|
|
1207
|
+
:is(.mkt, .atelic-ui) .op-dash {
|
|
1208
|
+
display: inline-block;
|
|
1209
|
+
width: 14px;
|
|
1210
|
+
height: 1.5px;
|
|
1211
|
+
vertical-align: 0.3em;
|
|
1212
|
+
background: var(--neutral-300);
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
/* The blocks are the shared package's components. These are the writeup's
|
|
1216
|
+
sizes for them. */
|
|
1217
|
+
:is(.mkt, .atelic-ui) .op-checks .checklist,
|
|
1218
|
+
:is(.mkt, .atelic-ui) .op-scale .threshold-scale {
|
|
1219
|
+
font-size: 15px;
|
|
1220
|
+
}
|
|
1221
|
+
:is(.mkt, .atelic-ui) .op-bar .chart-key,
|
|
1222
|
+
:is(.mkt, .atelic-ui) .op-columns .chart-key {
|
|
1223
|
+
font-size: 13px;
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
/* the table: its layout is the shared DataTable's; these are the writeup's
|
|
1227
|
+
own sizes and the two line row names. */
|
|
1228
|
+
:is(.mkt, .atelic-ui) .op-table .data-table {
|
|
1229
|
+
font-size: 15px;
|
|
1230
|
+
}
|
|
1231
|
+
:is(.mkt, .atelic-ui) .op-table tbody th b {
|
|
1232
|
+
display: block;
|
|
1233
|
+
font-weight: 600;
|
|
1234
|
+
}
|
|
1235
|
+
:is(.mkt, .atelic-ui) .op-table tbody th a,
|
|
1236
|
+
:is(.mkt, .atelic-ui) .op-table .op-sub {
|
|
1237
|
+
display: block;
|
|
1238
|
+
font-family: var(--font-mono);
|
|
1239
|
+
font-size: 12px;
|
|
1240
|
+
color: var(--op-ink-faint);
|
|
1241
|
+
overflow-wrap: anywhere;
|
|
1242
|
+
}
|
|
1243
|
+
:is(.mkt, .atelic-ui) .op-table tbody th a:hover {
|
|
1244
|
+
color: var(--op-accent);
|
|
1245
|
+
}
|
|
1246
|
+
:is(.mkt, .atelic-ui) .op-table tr[data-tone="bad"] th b {
|
|
1247
|
+
color: var(--tone-bad);
|
|
1248
|
+
}
|
|
1249
|
+
:is(.mkt, .atelic-ui) .op-table td {
|
|
1250
|
+
white-space: nowrap;
|
|
1251
|
+
}
|
|
1252
|
+
/* A cell of running words wraps; a cell of figures never does. */
|
|
1253
|
+
:is(.mkt, .atelic-ui) .op-table td:has(.op-wrap) {
|
|
1254
|
+
white-space: normal;
|
|
1255
|
+
}
|
|
1256
|
+
:is(.mkt, .atelic-ui) .op-mark-cell {
|
|
1257
|
+
display: inline-flex;
|
|
1258
|
+
align-items: center;
|
|
1259
|
+
gap: 6px;
|
|
1260
|
+
color: var(--tone);
|
|
1261
|
+
font-weight: 600;
|
|
1262
|
+
}
|
|
1263
|
+
/* the icon keeps its size however long the words beside it run */
|
|
1264
|
+
:is(.mkt, .atelic-ui) .op-mark-cell svg {
|
|
1265
|
+
flex: none;
|
|
1266
|
+
}
|
|
1267
|
+
:is(.mkt, .atelic-ui) .op-rating {
|
|
1268
|
+
display: inline-flex;
|
|
1269
|
+
align-items: center;
|
|
1270
|
+
gap: 4px;
|
|
1271
|
+
font-weight: 600;
|
|
1272
|
+
color: var(--tone, var(--op-ink));
|
|
1273
|
+
}
|
|
1274
|
+
:is(.mkt, .atelic-ui) .op-rating svg {
|
|
1275
|
+
color: var(--tone, var(--tone-warn-fill));
|
|
1276
|
+
fill: currentColor;
|
|
1277
|
+
}
|
|
1278
|
+
|
|
1279
|
+
/* a few big numbers: the shared StatRow, at the writeup's sizes */
|
|
1280
|
+
:is(.mkt, .atelic-ui) .op-stats .stat-row {
|
|
1281
|
+
gap: 18px 28px;
|
|
1282
|
+
}
|
|
1283
|
+
:is(.mkt, .atelic-ui) .op-stats .stat .num {
|
|
1284
|
+
font-size: 28px;
|
|
1285
|
+
font-weight: 700;
|
|
1286
|
+
letter-spacing: -0.02em;
|
|
1287
|
+
line-height: 1.1;
|
|
1288
|
+
color: var(--tone, var(--op-ink));
|
|
1289
|
+
}
|
|
1290
|
+
:is(.mkt, .atelic-ui) .op-stats .stat-delta {
|
|
1291
|
+
font-size: 13px;
|
|
1292
|
+
}
|
|
1293
|
+
:is(.mkt, .atelic-ui) .op-stats .stat .lbl {
|
|
1294
|
+
margin-top: 6px;
|
|
1295
|
+
font-size: 15px;
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
/* pictures on their own: the same size, side by side */
|
|
1299
|
+
:is(.mkt, .atelic-ui) .op-shots-row {
|
|
1300
|
+
display: grid;
|
|
1301
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1302
|
+
gap: 16px;
|
|
1303
|
+
max-width: 520px;
|
|
1304
|
+
align-items: start;
|
|
1305
|
+
}
|
|
1306
|
+
/* three sit on one line, on a phone as well */
|
|
1307
|
+
:is(.mkt, .atelic-ui) .op-shots-row[data-count="3"] {
|
|
1308
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1309
|
+
gap: 12px;
|
|
1310
|
+
max-width: 780px;
|
|
1311
|
+
}
|
|
1312
|
+
:is(.mkt, .atelic-ui) .op-shots-row .op-shot a,
|
|
1313
|
+
:is(.mkt, .atelic-ui) .op-shots-row .op-shot-frame {
|
|
1314
|
+
aspect-ratio: 3 / 4;
|
|
1315
|
+
background: var(--surface);
|
|
1316
|
+
}
|
|
1317
|
+
:is(.mkt, .atelic-ui) .op-shots-row .op-shot img {
|
|
1318
|
+
width: 100%;
|
|
1319
|
+
height: 100%;
|
|
1320
|
+
object-fit: contain;
|
|
1321
|
+
object-position: center;
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
/* the collapsible: the shared one, at the writeup's sizes */
|
|
1325
|
+
:is(.mkt, .atelic-ui) .op-more .collapsible-label {
|
|
1326
|
+
font-size: 16px;
|
|
1327
|
+
}
|
|
1328
|
+
:is(.mkt, .atelic-ui) .op-more .collapsible-summary {
|
|
1329
|
+
font-size: 15px;
|
|
1330
|
+
line-height: 1.45;
|
|
1331
|
+
}
|
|
1332
|
+
:is(.mkt, .atelic-ui) .op-more .collapsible-body {
|
|
1333
|
+
margin-top: 0;
|
|
1334
|
+
}
|
|
1335
|
+
:is(.mkt, .atelic-ui) .op-more-body {
|
|
1336
|
+
display: grid;
|
|
1337
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1338
|
+
}
|
|
1339
|
+
:is(.mkt, .atelic-ui) .op-more-body > .op-block:first-child {
|
|
1340
|
+
border-top: 0;
|
|
1341
|
+
margin-top: 6px;
|
|
1342
|
+
padding-top: 6px;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
/* findings: the shared Callout, one under another, with the owner's screen
|
|
1346
|
+
beside them */
|
|
1347
|
+
:is(.mkt, .atelic-ui) .op-findings.has-shots {
|
|
1348
|
+
display: grid;
|
|
1349
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1350
|
+
gap: 18px;
|
|
1351
|
+
align-items: start;
|
|
1352
|
+
}
|
|
1353
|
+
:is(.mkt, .atelic-ui) .op-findings-list {
|
|
1354
|
+
display: flex;
|
|
1355
|
+
flex-direction: column;
|
|
1356
|
+
gap: 14px;
|
|
1357
|
+
}
|
|
1358
|
+
:is(.mkt, .atelic-ui) .op-findings .callout {
|
|
1359
|
+
font-size: 15.5px;
|
|
1360
|
+
line-height: 1.5;
|
|
1361
|
+
}
|
|
1362
|
+
:is(.mkt, .atelic-ui) .op-findings .callout a,
|
|
1363
|
+
:is(.mkt, .atelic-ui) .op-note a,
|
|
1364
|
+
:is(.mkt, .atelic-ui) .op-block-head p a {
|
|
1365
|
+
color: var(--op-accent);
|
|
1366
|
+
text-decoration: underline;
|
|
1367
|
+
text-underline-offset: 2px;
|
|
1368
|
+
overflow-wrap: anywhere;
|
|
1369
|
+
}
|
|
1370
|
+
:is(.mkt, .atelic-ui) .op-shots {
|
|
1371
|
+
display: flex;
|
|
1372
|
+
flex-direction: column;
|
|
1373
|
+
gap: 14px;
|
|
1374
|
+
max-width: 340px;
|
|
1375
|
+
}
|
|
1376
|
+
:is(.mkt, .atelic-ui) .op-shot {
|
|
1377
|
+
display: flex;
|
|
1378
|
+
flex-direction: column;
|
|
1379
|
+
gap: 6px;
|
|
1380
|
+
margin: 0;
|
|
1381
|
+
}
|
|
1382
|
+
:is(.mkt, .atelic-ui) .op-shot a,
|
|
1383
|
+
:is(.mkt, .atelic-ui) .op-shot-frame {
|
|
1384
|
+
display: block;
|
|
1385
|
+
width: 100%;
|
|
1386
|
+
border-radius: var(--radius-sm);
|
|
1387
|
+
overflow: hidden;
|
|
1388
|
+
border: 1px solid var(--neutral-200);
|
|
1389
|
+
background: var(--op-card);
|
|
1390
|
+
}
|
|
1391
|
+
:is(.mkt, .atelic-ui) .op-shot a {
|
|
1392
|
+
cursor: zoom-in;
|
|
1393
|
+
}
|
|
1394
|
+
:is(.mkt, .atelic-ui) .op-shot img {
|
|
1395
|
+
width: 100%;
|
|
1396
|
+
height: auto;
|
|
1397
|
+
display: block;
|
|
1398
|
+
}
|
|
1399
|
+
:is(.mkt, .atelic-ui) .op-shot-brief {
|
|
1400
|
+
display: grid;
|
|
1401
|
+
place-items: center;
|
|
1402
|
+
min-height: 140px;
|
|
1403
|
+
border: 1px dashed var(--neutral-300);
|
|
1404
|
+
border-radius: var(--radius-sm);
|
|
1405
|
+
font-family: var(--font-mono);
|
|
1406
|
+
font-size: 12px;
|
|
1407
|
+
color: var(--op-ink-faint);
|
|
1408
|
+
padding: 12px;
|
|
1409
|
+
text-align: center;
|
|
1410
|
+
}
|
|
1411
|
+
:is(.mkt, .atelic-ui) .op-shot figcaption {
|
|
1412
|
+
font-size: 12.5px;
|
|
1413
|
+
line-height: 1.45;
|
|
1414
|
+
color: var(--op-ink-faint);
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
/* sources: the tools the readings came from */
|
|
1418
|
+
:is(.mkt, .atelic-ui) .op-sources {
|
|
1419
|
+
margin-top: 16px;
|
|
1420
|
+
padding-top: 12px;
|
|
1421
|
+
border-top: 1px solid var(--op-rule);
|
|
1422
|
+
display: flex;
|
|
1423
|
+
flex-wrap: wrap;
|
|
1424
|
+
align-items: baseline;
|
|
1425
|
+
gap: 6px 16px;
|
|
1426
|
+
font-size: 13.5px;
|
|
1427
|
+
}
|
|
1428
|
+
:is(.mkt, .atelic-ui) .op-sources-label {
|
|
1429
|
+
font-family: var(--font-mono);
|
|
1430
|
+
font-size: 11.5px;
|
|
1431
|
+
letter-spacing: 0.1em;
|
|
1432
|
+
text-transform: uppercase;
|
|
1433
|
+
color: var(--op-ink-faint);
|
|
1434
|
+
}
|
|
1435
|
+
:is(.mkt, .atelic-ui) .op-sources ul {
|
|
1436
|
+
list-style: none;
|
|
1437
|
+
margin: 0;
|
|
1438
|
+
padding: 0;
|
|
1439
|
+
display: flex;
|
|
1440
|
+
flex-wrap: wrap;
|
|
1441
|
+
gap: 6px 18px;
|
|
1442
|
+
color: var(--op-ink-soft);
|
|
1443
|
+
}
|
|
1444
|
+
:is(.mkt, .atelic-ui) .op-sources a {
|
|
1445
|
+
display: inline-flex;
|
|
1446
|
+
align-items: center;
|
|
1447
|
+
gap: 3px;
|
|
1448
|
+
color: var(--op-accent);
|
|
1449
|
+
font-weight: 550;
|
|
1450
|
+
}
|
|
1451
|
+
:is(.mkt, .atelic-ui) .op-sources a:hover {
|
|
1452
|
+
text-decoration: underline;
|
|
1453
|
+
text-underline-offset: 2px;
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
/* ---- the rented line: paid's facts in one line, ungraded ---- */
|
|
1457
|
+
:is(.mkt, .atelic-ui) .op-rented {
|
|
1458
|
+
display: flex;
|
|
1459
|
+
flex-direction: column;
|
|
1460
|
+
gap: 6px;
|
|
1461
|
+
margin: 18px 0 0;
|
|
1462
|
+
padding: 16px;
|
|
1463
|
+
background: var(--surface-alt);
|
|
1464
|
+
border-radius: var(--radius-md);
|
|
1465
|
+
font-size: 15.5px;
|
|
1466
|
+
line-height: 1.5;
|
|
1467
|
+
color: var(--op-ink);
|
|
1468
|
+
text-wrap: pretty;
|
|
1469
|
+
}
|
|
1470
|
+
:is(.mkt, .atelic-ui) .op-rented-label {
|
|
1471
|
+
flex: none;
|
|
1472
|
+
font-family: var(--font-mono);
|
|
1473
|
+
font-size: 11.5px;
|
|
1474
|
+
letter-spacing: 0.1em;
|
|
1475
|
+
text-transform: uppercase;
|
|
1476
|
+
color: var(--op-ink-soft);
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
/* ---- the markets table: on a phone each market stacks, its letters on
|
|
1480
|
+
one line with their column's label; wide, it is a table ---- */
|
|
1481
|
+
:is(.mkt, .atelic-ui) .op-markets-table {
|
|
1482
|
+
display: block;
|
|
1483
|
+
width: 100%;
|
|
1484
|
+
margin-top: 18px;
|
|
1485
|
+
font-size: 15px;
|
|
1486
|
+
line-height: 1.4;
|
|
1487
|
+
}
|
|
1488
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody {
|
|
1489
|
+
display: block;
|
|
1490
|
+
}
|
|
1491
|
+
:is(.mkt, .atelic-ui) .op-markets-table thead {
|
|
1492
|
+
position: absolute;
|
|
1493
|
+
width: 1px;
|
|
1494
|
+
height: 1px;
|
|
1495
|
+
overflow: hidden;
|
|
1496
|
+
clip: rect(0, 0, 0, 0);
|
|
1497
|
+
white-space: nowrap;
|
|
1498
|
+
}
|
|
1499
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody tr {
|
|
1500
|
+
display: flex;
|
|
1501
|
+
flex-wrap: wrap;
|
|
1502
|
+
align-items: center;
|
|
1503
|
+
column-gap: 16px;
|
|
1504
|
+
row-gap: 6px;
|
|
1505
|
+
padding: 12px 0;
|
|
1506
|
+
border-bottom: 1px solid var(--op-rule);
|
|
1507
|
+
}
|
|
1508
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody tr:last-child {
|
|
1509
|
+
border-bottom: 0;
|
|
1510
|
+
}
|
|
1511
|
+
:is(.mkt, .atelic-ui) .op-markets-table th,
|
|
1512
|
+
:is(.mkt, .atelic-ui) .op-markets-table td {
|
|
1513
|
+
text-align: left;
|
|
1514
|
+
color: var(--op-ink);
|
|
1515
|
+
}
|
|
1516
|
+
:is(.mkt, .atelic-ui) .op-markets-table .op-markets-market,
|
|
1517
|
+
:is(.mkt, .atelic-ui) .op-markets-table .op-markets-read {
|
|
1518
|
+
width: 100%;
|
|
1519
|
+
}
|
|
1520
|
+
:is(.mkt, .atelic-ui) .op-markets-market {
|
|
1521
|
+
font-weight: 600;
|
|
1522
|
+
}
|
|
1523
|
+
:is(.mkt, .atelic-ui) .op-markets-place {
|
|
1524
|
+
display: block;
|
|
1525
|
+
font-weight: 400;
|
|
1526
|
+
font-size: 12.5px;
|
|
1527
|
+
color: var(--op-ink-faint);
|
|
1528
|
+
}
|
|
1529
|
+
:is(.mkt, .atelic-ui) .op-markets-col,
|
|
1530
|
+
:is(.mkt, .atelic-ui) .op-markets-label {
|
|
1531
|
+
font-family: var(--font-mono);
|
|
1532
|
+
font-size: 11.5px;
|
|
1533
|
+
font-weight: 400;
|
|
1534
|
+
letter-spacing: 0.08em;
|
|
1535
|
+
text-transform: uppercase;
|
|
1536
|
+
color: var(--op-ink-soft);
|
|
1537
|
+
white-space: nowrap;
|
|
1538
|
+
}
|
|
1539
|
+
:is(.mkt, .atelic-ui) .op-markets-label {
|
|
1540
|
+
margin-right: 6px;
|
|
1541
|
+
}
|
|
1542
|
+
:is(.mkt, .atelic-ui) .op-markets-grade {
|
|
1543
|
+
white-space: nowrap;
|
|
1544
|
+
}
|
|
1545
|
+
:is(.mkt, .atelic-ui) .op-markets-table .op-markets-read {
|
|
1546
|
+
color: var(--op-ink-soft);
|
|
1547
|
+
text-wrap: pretty;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
/* ---- the close ---- */
|
|
1551
|
+
:is(.mkt, .atelic-ui) .op-close {
|
|
1552
|
+
margin-top: 44px;
|
|
1553
|
+
padding-top: 22px;
|
|
1554
|
+
border-top: 1px solid var(--neutral-200);
|
|
1555
|
+
display: flex;
|
|
1556
|
+
flex-direction: column;
|
|
1557
|
+
align-items: flex-start;
|
|
1558
|
+
gap: 14px;
|
|
1559
|
+
font-size: 14px;
|
|
1560
|
+
line-height: 1.6;
|
|
1561
|
+
color: var(--op-ink-faint);
|
|
1562
|
+
}
|
|
1563
|
+
:is(.mkt, .atelic-ui) .op-close b {
|
|
1564
|
+
font-weight: 500;
|
|
1565
|
+
color: var(--op-ink);
|
|
1566
|
+
}
|
|
1567
|
+
/* The sign off lockup itself (.op-who, .op-sign) is shared with the monthly
|
|
1568
|
+
page, so it lives with the shared classes at the head of this sheet. */
|
|
1569
|
+
:is(.mkt, .atelic-ui) .op .op-sign {
|
|
1570
|
+
font-size: 24px;
|
|
1571
|
+
margin-bottom: 8px;
|
|
1572
|
+
}
|
|
1573
|
+
:is(.mkt, .atelic-ui) .op .op-who {
|
|
1574
|
+
gap: 14px;
|
|
1575
|
+
}
|
|
1576
|
+
:is(.mkt, .atelic-ui) .op .op-who img {
|
|
1577
|
+
width: 56px;
|
|
1578
|
+
height: 56px;
|
|
1579
|
+
}
|
|
1580
|
+
/* The pointer to the hosted page belongs to the printed copy alone. */
|
|
1581
|
+
:is(.mkt, .atelic-ui) .op-twin {
|
|
1582
|
+
display: none;
|
|
1583
|
+
}
|
|
1584
|
+
:is(.mkt, .atelic-ui) .op-sr-only {
|
|
1585
|
+
position: absolute;
|
|
1586
|
+
width: 1px;
|
|
1587
|
+
height: 1px;
|
|
1588
|
+
padding: 0;
|
|
1589
|
+
margin: -1px;
|
|
1590
|
+
overflow: hidden;
|
|
1591
|
+
clip: rect(0, 0, 0, 0);
|
|
1592
|
+
white-space: nowrap;
|
|
1593
|
+
border: 0;
|
|
1594
|
+
}
|
|
1595
|
+
|
|
1596
|
+
/* ---- wide: the same page with room ---- */
|
|
1597
|
+
@media print, (min-width: 721px) {
|
|
1598
|
+
:is(.mkt, .atelic-ui) .op-meta-sep,
|
|
1599
|
+
:is(.mkt, .atelic-ui) .op-meta-date {
|
|
1600
|
+
display: inline;
|
|
1601
|
+
}
|
|
1602
|
+
:is(.mkt, .atelic-ui) .op-doc {
|
|
1603
|
+
padding: calc(var(--nav-height) + 32px) 24px 64px;
|
|
1604
|
+
}
|
|
1605
|
+
:is(.mkt, .atelic-ui) .op-intro {
|
|
1606
|
+
font-size: 18px;
|
|
1607
|
+
}
|
|
1608
|
+
:is(.mkt, .atelic-ui) .op-ov-tier-label {
|
|
1609
|
+
padding: 7px 20px;
|
|
1610
|
+
}
|
|
1611
|
+
:is(.mkt, .atelic-ui) .op-ov-row {
|
|
1612
|
+
grid-template-columns: auto 232px minmax(0, 1fr) auto;
|
|
1613
|
+
column-gap: 16px;
|
|
1614
|
+
padding: 11px 14px 11px 20px;
|
|
1615
|
+
}
|
|
1616
|
+
:is(.mkt, .atelic-ui) .op-ov-grade {
|
|
1617
|
+
grid-row: 1;
|
|
1618
|
+
}
|
|
1619
|
+
:is(.mkt, .atelic-ui) .op-ov-read {
|
|
1620
|
+
grid-column: 3;
|
|
1621
|
+
padding-top: 4px;
|
|
1622
|
+
}
|
|
1623
|
+
:is(.mkt, .atelic-ui) .op-ov-go {
|
|
1624
|
+
grid-column: 4;
|
|
1625
|
+
}
|
|
1626
|
+
:is(.mkt, .atelic-ui) .op-part {
|
|
1627
|
+
margin: 40px 0 12px;
|
|
1628
|
+
}
|
|
1629
|
+
:is(.mkt, .atelic-ui) .op-part h2 {
|
|
1630
|
+
font-size: 30px;
|
|
1631
|
+
}
|
|
1632
|
+
:is(.mkt, .atelic-ui) .op-part p {
|
|
1633
|
+
font-size: 17px;
|
|
1634
|
+
}
|
|
1635
|
+
:is(.mkt, .atelic-ui) .op-topic {
|
|
1636
|
+
padding: 22px 26px 18px;
|
|
1637
|
+
}
|
|
1638
|
+
:is(.mkt, .atelic-ui) .op-topic h3 {
|
|
1639
|
+
font-size: 23px;
|
|
1640
|
+
}
|
|
1641
|
+
:is(.mkt, .atelic-ui) .op-topic-head > .op-grade {
|
|
1642
|
+
width: 46px;
|
|
1643
|
+
height: 46px;
|
|
1644
|
+
border-radius: 13px;
|
|
1645
|
+
font-size: 23px;
|
|
1646
|
+
}
|
|
1647
|
+
:is(.mkt, .atelic-ui) .op-findings.has-shots {
|
|
1648
|
+
grid-template-columns: minmax(0, 1fr) 250px;
|
|
1649
|
+
gap: 28px;
|
|
1650
|
+
}
|
|
1651
|
+
:is(.mkt, .atelic-ui) .op-findings .op-shots {
|
|
1652
|
+
max-width: none;
|
|
1653
|
+
}
|
|
1654
|
+
:is(.mkt, .atelic-ui) .op-rented {
|
|
1655
|
+
flex-direction: row;
|
|
1656
|
+
align-items: baseline;
|
|
1657
|
+
gap: 16px;
|
|
1658
|
+
padding: 16px 26px;
|
|
1659
|
+
}
|
|
1660
|
+
:is(.mkt, .atelic-ui) .op-close {
|
|
1661
|
+
flex-direction: row;
|
|
1662
|
+
justify-content: space-between;
|
|
1663
|
+
align-items: flex-end;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
/* the markets as a real table */
|
|
1667
|
+
:is(.mkt, .atelic-ui) .op-markets-table {
|
|
1668
|
+
display: table;
|
|
1669
|
+
border-collapse: collapse;
|
|
1670
|
+
}
|
|
1671
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody {
|
|
1672
|
+
display: table-row-group;
|
|
1673
|
+
}
|
|
1674
|
+
:is(.mkt, .atelic-ui) .op-markets-table thead {
|
|
1675
|
+
position: static;
|
|
1676
|
+
width: auto;
|
|
1677
|
+
height: auto;
|
|
1678
|
+
overflow: visible;
|
|
1679
|
+
clip: auto;
|
|
1680
|
+
}
|
|
1681
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody tr {
|
|
1682
|
+
display: table-row;
|
|
1683
|
+
padding: 0;
|
|
1684
|
+
border: 0;
|
|
1685
|
+
}
|
|
1686
|
+
:is(.mkt, .atelic-ui) .op-markets-table th,
|
|
1687
|
+
:is(.mkt, .atelic-ui) .op-markets-table td {
|
|
1688
|
+
display: table-cell;
|
|
1689
|
+
padding: 10px 14px 10px 0;
|
|
1690
|
+
border-bottom: 1px solid var(--op-rule);
|
|
1691
|
+
vertical-align: top;
|
|
1692
|
+
}
|
|
1693
|
+
:is(.mkt, .atelic-ui) .op-markets-table thead th {
|
|
1694
|
+
padding-top: 0;
|
|
1695
|
+
padding-bottom: 8px;
|
|
1696
|
+
border-bottom: 1.5px solid var(--op-ink);
|
|
1697
|
+
vertical-align: bottom;
|
|
1698
|
+
}
|
|
1699
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody tr:last-child th,
|
|
1700
|
+
:is(.mkt, .atelic-ui) .op-markets-table tbody tr:last-child td {
|
|
1701
|
+
border-bottom: 0;
|
|
1702
|
+
}
|
|
1703
|
+
:is(.mkt, .atelic-ui) .op-markets-table .op-markets-market {
|
|
1704
|
+
width: 170px;
|
|
1705
|
+
}
|
|
1706
|
+
:is(.mkt, .atelic-ui) .op-markets-table .op-markets-read {
|
|
1707
|
+
width: auto;
|
|
1708
|
+
}
|
|
1709
|
+
:is(.mkt, .atelic-ui) .op-markets-col {
|
|
1710
|
+
width: 64px;
|
|
1711
|
+
}
|
|
1712
|
+
:is(.mkt, .atelic-ui) .op-markets-label {
|
|
1713
|
+
display: none;
|
|
1714
|
+
}
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
/* ---- print: the same page, on letter paper ---- */
|
|
1718
|
+
@page {
|
|
1719
|
+
size: letter;
|
|
1720
|
+
margin: 0.5in 0.55in 0.6in;
|
|
1721
|
+
@bottom-right {
|
|
1722
|
+
content: counter(page) " / " counter(pages);
|
|
1723
|
+
font-family: ui-monospace, "SF Mono", monospace;
|
|
1724
|
+
font-size: 7.5pt;
|
|
1725
|
+
color: #75858f;
|
|
1726
|
+
}
|
|
1727
|
+
}
|
|
1728
|
+
@media print {
|
|
1729
|
+
html,
|
|
1730
|
+
body {
|
|
1731
|
+
margin: 0;
|
|
1732
|
+
padding: 0;
|
|
1733
|
+
background: none;
|
|
1734
|
+
}
|
|
1735
|
+
/* The sheet is the page at three quarters size. The zoom sits on the root,
|
|
1736
|
+
where the browser sizes each block for its page breaks at the printed
|
|
1737
|
+
size; on the document it measured them full size and broke early. */
|
|
1738
|
+
html:has(:is(.mkt, .atelic-ui) .op-doc) {
|
|
1739
|
+
zoom: 0.74;
|
|
1740
|
+
}
|
|
1741
|
+
:is(.mkt, .atelic-ui) .nav,
|
|
1742
|
+
:is(.mkt, .atelic-ui) .credit-bar,
|
|
1743
|
+
:is(.mkt, .atelic-ui) .skip-link,
|
|
1744
|
+
:is(.mkt, .atelic-ui) .op-ov-go,
|
|
1745
|
+
:is(.mkt, .atelic-ui) .op-topic h3 a svg {
|
|
1746
|
+
display: none;
|
|
1747
|
+
}
|
|
1748
|
+
:is(.mkt, .atelic-ui),
|
|
1749
|
+
:is(.mkt, .atelic-ui) .op {
|
|
1750
|
+
background: none;
|
|
1751
|
+
min-height: 0;
|
|
1752
|
+
}
|
|
1753
|
+
:is(.mkt, .atelic-ui) .op-doc {
|
|
1754
|
+
max-width: none;
|
|
1755
|
+
padding: 0;
|
|
1756
|
+
}
|
|
1757
|
+
:is(.mkt, .atelic-ui) .op-top {
|
|
1758
|
+
display: flex;
|
|
1759
|
+
align-items: center;
|
|
1760
|
+
gap: 12px;
|
|
1761
|
+
margin-bottom: 18px;
|
|
1762
|
+
}
|
|
1763
|
+
:is(.mkt, .atelic-ui) .op-mark {
|
|
1764
|
+
font-weight: 600;
|
|
1765
|
+
font-size: 22px;
|
|
1766
|
+
letter-spacing: -0.045em;
|
|
1767
|
+
display: inline-flex;
|
|
1768
|
+
align-items: center;
|
|
1769
|
+
gap: 0.38em;
|
|
1770
|
+
color: var(--op-ink);
|
|
1771
|
+
font-family: var(--font-brand);
|
|
1772
|
+
}
|
|
1773
|
+
:is(.mkt, .atelic-ui) .op-run {
|
|
1774
|
+
display: inline-block;
|
|
1775
|
+
width: 1.7em;
|
|
1776
|
+
height: 2px;
|
|
1777
|
+
background: linear-gradient(90deg, var(--op-accent), transparent);
|
|
1778
|
+
}
|
|
1779
|
+
:is(.mkt, .atelic-ui) .op-x {
|
|
1780
|
+
font-family: var(--font-mono);
|
|
1781
|
+
font-size: 16px;
|
|
1782
|
+
color: var(--op-ink-faint);
|
|
1783
|
+
line-height: 1;
|
|
1784
|
+
}
|
|
1785
|
+
:is(.mkt, .atelic-ui) .op-recipient {
|
|
1786
|
+
height: 30px;
|
|
1787
|
+
width: auto;
|
|
1788
|
+
display: block;
|
|
1789
|
+
}
|
|
1790
|
+
:is(.mkt, .atelic-ui) .op-ov-card,
|
|
1791
|
+
:is(.mkt, .atelic-ui) .op-topic {
|
|
1792
|
+
box-shadow: none;
|
|
1793
|
+
border-color: var(--neutral-200);
|
|
1794
|
+
}
|
|
1795
|
+
:is(.mkt, .atelic-ui) .op-topic h3 a {
|
|
1796
|
+
border-bottom: 0;
|
|
1797
|
+
}
|
|
1798
|
+
/* A small block stays whole; a table or a collapsible may run over a
|
|
1799
|
+
page, row by row, with its heading kept beside its first rows. */
|
|
1800
|
+
:is(.mkt, .atelic-ui) .op-ov,
|
|
1801
|
+
:is(.mkt, .atelic-ui) .op-block,
|
|
1802
|
+
:is(.mkt, .atelic-ui) .op-rented,
|
|
1803
|
+
:is(.mkt, .atelic-ui) .op-close,
|
|
1804
|
+
:is(.mkt, .atelic-ui) .op-topic-head,
|
|
1805
|
+
:is(.mkt, .atelic-ui) .op-block-head,
|
|
1806
|
+
:is(.mkt, .atelic-ui) .op-markets-table tr,
|
|
1807
|
+
:is(.mkt, .atelic-ui) .data-table tr {
|
|
1808
|
+
break-inside: avoid;
|
|
1809
|
+
}
|
|
1810
|
+
:is(.mkt, .atelic-ui) .op-block.op-table,
|
|
1811
|
+
:is(.mkt, .atelic-ui) .op-block.op-more,
|
|
1812
|
+
:is(.mkt, .atelic-ui) .op-block.op-checks,
|
|
1813
|
+
:is(.mkt, .atelic-ui) .op-block.op-findings,
|
|
1814
|
+
:is(.mkt, .atelic-ui) .op-markets {
|
|
1815
|
+
break-inside: auto;
|
|
1816
|
+
}
|
|
1817
|
+
/* A list of checks or findings runs over a page item by item, so a
|
|
1818
|
+
section starts in whatever space the last one left. */
|
|
1819
|
+
:is(.mkt, .atelic-ui) .op-checks .checklist > li,
|
|
1820
|
+
:is(.mkt, .atelic-ui) .op-findings .callout {
|
|
1821
|
+
break-inside: avoid;
|
|
1822
|
+
}
|
|
1823
|
+
:is(.mkt, .atelic-ui) .op-part,
|
|
1824
|
+
:is(.mkt, .atelic-ui) .collapsible > summary {
|
|
1825
|
+
break-inside: avoid;
|
|
1826
|
+
break-after: avoid;
|
|
1827
|
+
}
|
|
1828
|
+
:is(.mkt, .atelic-ui) .op-topic-head,
|
|
1829
|
+
:is(.mkt, .atelic-ui) .op-block-head,
|
|
1830
|
+
:is(.mkt, .atelic-ui) .collapsible > summary,
|
|
1831
|
+
:is(.mkt, .atelic-ui) .data-table thead {
|
|
1832
|
+
break-after: avoid;
|
|
1833
|
+
}
|
|
1834
|
+
:is(.mkt, .atelic-ui) .op-shot a {
|
|
1835
|
+
cursor: auto;
|
|
1836
|
+
}
|
|
1837
|
+
:is(.mkt, .atelic-ui) .op-twin {
|
|
1838
|
+
display: flex;
|
|
1839
|
+
align-items: center;
|
|
1840
|
+
gap: 14px;
|
|
1841
|
+
}
|
|
1842
|
+
:is(.mkt, .atelic-ui) .op-twin-text {
|
|
1843
|
+
text-align: right;
|
|
1844
|
+
font-family: var(--font-mono);
|
|
1845
|
+
font-size: 12px;
|
|
1846
|
+
letter-spacing: 0.04em;
|
|
1847
|
+
}
|
|
1848
|
+
:is(.mkt, .atelic-ui) .op-twin-text b {
|
|
1849
|
+
display: block;
|
|
1850
|
+
font-family: var(--font-sans);
|
|
1851
|
+
font-size: 16px;
|
|
1852
|
+
font-weight: 600;
|
|
1853
|
+
letter-spacing: -0.01em;
|
|
1854
|
+
margin-top: 2px;
|
|
1855
|
+
}
|
|
1856
|
+
:is(.mkt, .atelic-ui) .op-qr {
|
|
1857
|
+
width: 96px;
|
|
1858
|
+
height: 96px;
|
|
1859
|
+
display: block;
|
|
1860
|
+
}
|
|
1861
|
+
}
|
|
1862
|
+
}
|