mentionwell 1.2.0
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 +148 -0
- package/dist/api-reader.d.ts +47 -0
- package/dist/api-reader.d.ts.map +1 -0
- package/dist/api-reader.js +125 -0
- package/dist/api-reader.js.map +1 -0
- package/dist/html-utils.d.ts +24 -0
- package/dist/html-utils.d.ts.map +1 -0
- package/dist/html-utils.js +41 -0
- package/dist/html-utils.js.map +1 -0
- package/dist/index.d.ts +72 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +104 -0
- package/dist/index.js.map +1 -0
- package/dist/mentionwell-article.css +877 -0
- package/package.json +57 -0
|
@@ -0,0 +1,877 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
@isaac/blog-reader/styles
|
|
3
|
+
Default styles for Blogoto-generated article HTML (wb-* class
|
|
4
|
+
namespace produced by lib/blog/article-html.ts).
|
|
5
|
+
|
|
6
|
+
All colors, fonts, and radii are CSS variables prefixed with
|
|
7
|
+
--wb-*. Override them in your destination site to re-theme.
|
|
8
|
+
Defaults below match a warm, editorial palette.
|
|
9
|
+
============================================================ */
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--wb-ink: #1A1916;
|
|
13
|
+
--wb-body: #5C574F;
|
|
14
|
+
--wb-muted: #9C9489;
|
|
15
|
+
--wb-paper: #FDFAF6;
|
|
16
|
+
--wb-cream: #F6F2EB;
|
|
17
|
+
--wb-border: #D6CFC4;
|
|
18
|
+
--wb-bronze: #9A7453;
|
|
19
|
+
--wb-bronze-deep: #6B5136;
|
|
20
|
+
--wb-forest: #3C5445;
|
|
21
|
+
--wb-forest-deep: #2e4035;
|
|
22
|
+
--wb-dark: #232820;
|
|
23
|
+
--wb-radius-md: 12px;
|
|
24
|
+
--wb-radius-sm: 8px;
|
|
25
|
+
--wb-font-display: var(--font-display, Georgia, serif);
|
|
26
|
+
--wb-font-body: var(--font-body, system-ui, sans-serif);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.wb-article-host {
|
|
30
|
+
position: relative;
|
|
31
|
+
color: #3A3732;
|
|
32
|
+
font-family: var(--wb-font-body);
|
|
33
|
+
font-size: 1.05rem;
|
|
34
|
+
line-height: 1.75;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Paragraphs and inline content — give them real breathing room. */
|
|
38
|
+
.wb-article-host p {
|
|
39
|
+
margin: 0 0 1.25rem;
|
|
40
|
+
line-height: 1.75;
|
|
41
|
+
}
|
|
42
|
+
.wb-article-host p:last-child { margin-bottom: 0; }
|
|
43
|
+
|
|
44
|
+
.wb-article-host section.wb-section > p,
|
|
45
|
+
.wb-article-host section.wb-section > ul,
|
|
46
|
+
.wb-article-host section.wb-section > ol,
|
|
47
|
+
.wb-article-host section.wb-section > table,
|
|
48
|
+
.wb-article-host section.wb-section > figure,
|
|
49
|
+
.wb-article-host section.wb-section > blockquote {
|
|
50
|
+
margin-bottom: 1.25rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Lists — keep tight but spaced from neighbors */
|
|
54
|
+
.wb-article-host ul,
|
|
55
|
+
.wb-article-host ol {
|
|
56
|
+
margin: 1rem 0 1.5rem;
|
|
57
|
+
padding-left: 1.5rem;
|
|
58
|
+
}
|
|
59
|
+
.wb-article-host ul:not(.wb-steps) li,
|
|
60
|
+
.wb-article-host ol:not(.wb-steps) li {
|
|
61
|
+
margin: 0.4rem 0;
|
|
62
|
+
line-height: 1.65;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Inline strong used as sub-heading prefix (e.g. "1. Foo." style runs) gets
|
|
66
|
+
a small visual lift so paragraph leads stand apart. */
|
|
67
|
+
.wb-article-host p > strong:first-child {
|
|
68
|
+
color: var(--wb-ink);
|
|
69
|
+
}
|
|
70
|
+
.wb-article-host strong { color: var(--wb-ink); font-weight: 600; }
|
|
71
|
+
.wb-article-host em { font-style: italic; }
|
|
72
|
+
|
|
73
|
+
/* Inline code & code blocks --------------------------------------------- */
|
|
74
|
+
.wb-article-host code {
|
|
75
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
76
|
+
font-size: 0.88em;
|
|
77
|
+
background: var(--wb-cream);
|
|
78
|
+
color: var(--wb-ink);
|
|
79
|
+
padding: 0.1em 0.35em;
|
|
80
|
+
border-radius: 4px;
|
|
81
|
+
border: 1px solid var(--wb-border);
|
|
82
|
+
word-break: break-word;
|
|
83
|
+
}
|
|
84
|
+
.wb-article-host pre {
|
|
85
|
+
margin: 1.5rem 0;
|
|
86
|
+
padding: 1rem 1.15rem;
|
|
87
|
+
background: var(--wb-dark);
|
|
88
|
+
color: #F0EBE1;
|
|
89
|
+
border-radius: var(--wb-radius-sm);
|
|
90
|
+
overflow-x: auto;
|
|
91
|
+
font-size: 0.88rem;
|
|
92
|
+
line-height: 1.55;
|
|
93
|
+
}
|
|
94
|
+
.wb-article-host pre code {
|
|
95
|
+
background: transparent;
|
|
96
|
+
border: 0;
|
|
97
|
+
padding: 0;
|
|
98
|
+
color: inherit;
|
|
99
|
+
font-size: inherit;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Long URLs and inline content shouldn't blow out narrow columns.
|
|
103
|
+
`min-width: 0` lets this host shrink inside flex/grid parents (e.g. a
|
|
104
|
+
3-column reader) instead of forcing the column to grow with table or
|
|
105
|
+
pre content. Combined with the table rules below, wide tables become
|
|
106
|
+
horizontally scrollable inside their column rather than pushing into
|
|
107
|
+
sticky sidebars. */
|
|
108
|
+
.wb-article-host { word-wrap: break-word; overflow-wrap: break-word; min-width: 0; max-width: 100%; }
|
|
109
|
+
.wb-article-host a, .wb-article-host code { overflow-wrap: anywhere; }
|
|
110
|
+
|
|
111
|
+
/* Inline anchor links inside body content — internal (same-site) and
|
|
112
|
+
external. The bronze underline + hover state keeps them readable but
|
|
113
|
+
distinct from plain body text without going neon-blue. */
|
|
114
|
+
.wb-article-host p a,
|
|
115
|
+
.wb-article-host li a,
|
|
116
|
+
.wb-article-host td a {
|
|
117
|
+
color: var(--wb-ink);
|
|
118
|
+
text-decoration: none;
|
|
119
|
+
background-image: linear-gradient(transparent calc(100% - 1px), var(--wb-bronze) 1px);
|
|
120
|
+
background-repeat: no-repeat;
|
|
121
|
+
background-size: 100% 100%;
|
|
122
|
+
padding-bottom: 0.05em;
|
|
123
|
+
transition: color 150ms ease, background-size 150ms ease;
|
|
124
|
+
}
|
|
125
|
+
.wb-article-host p a:hover,
|
|
126
|
+
.wb-article-host li a:hover,
|
|
127
|
+
.wb-article-host td a:hover {
|
|
128
|
+
color: var(--wb-bronze-deep);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* External-link visual tell (only shows on links to a different host).
|
|
132
|
+
This is auto-applied by the page template via target="_blank" + rel,
|
|
133
|
+
but we also expose it as an opt-in arrow class. */
|
|
134
|
+
.wb-article-host p a[rel*="noopener"][target="_blank"]::after,
|
|
135
|
+
.wb-article-host li a[rel*="noopener"][target="_blank"]::after {
|
|
136
|
+
content: "↗";
|
|
137
|
+
font-size: 0.85em;
|
|
138
|
+
margin-left: 0.15em;
|
|
139
|
+
color: var(--wb-bronze);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Citation links — anchors whose only child is a <sup> (e.g. <a><sup>[1]</sup></a>).
|
|
143
|
+
Suppress the body underline + shrink the trailing arrow so footnote markers
|
|
144
|
+
read as quiet superscripts instead of full inline links. */
|
|
145
|
+
.wb-article-host p a:has(> sup:only-child),
|
|
146
|
+
.wb-article-host li a:has(> sup:only-child),
|
|
147
|
+
.wb-article-host td a:has(> sup:only-child) {
|
|
148
|
+
background-image: none;
|
|
149
|
+
padding-bottom: 0;
|
|
150
|
+
color: var(--wb-bronze);
|
|
151
|
+
}
|
|
152
|
+
.wb-article-host p a:has(> sup:only-child)::after,
|
|
153
|
+
.wb-article-host li a:has(> sup:only-child)::after,
|
|
154
|
+
.wb-article-host td a:has(> sup:only-child)::after {
|
|
155
|
+
font-size: 0.65em;
|
|
156
|
+
margin-left: 0.05em;
|
|
157
|
+
opacity: 0.7;
|
|
158
|
+
}
|
|
159
|
+
.wb-article-host sup {
|
|
160
|
+
font-size: 0.7em;
|
|
161
|
+
line-height: 0;
|
|
162
|
+
vertical-align: super;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* "Keep reading" related posts block (rendered after section N/2) */
|
|
166
|
+
.wb-article-host .wb-related {
|
|
167
|
+
margin-top: 2.5rem;
|
|
168
|
+
padding: 1.25rem 1.5rem;
|
|
169
|
+
background: var(--wb-cream);
|
|
170
|
+
border: 1px solid var(--wb-border);
|
|
171
|
+
border-radius: var(--wb-radius-md);
|
|
172
|
+
border-top: 1px solid var(--wb-border);
|
|
173
|
+
}
|
|
174
|
+
.wb-article-host .wb-related h2 {
|
|
175
|
+
font-family: var(--wb-font-display);
|
|
176
|
+
font-size: 0.75rem;
|
|
177
|
+
font-weight: 600;
|
|
178
|
+
text-transform: uppercase;
|
|
179
|
+
letter-spacing: 0.12em;
|
|
180
|
+
color: var(--wb-bronze-deep);
|
|
181
|
+
margin: 0 0 0.75rem;
|
|
182
|
+
}
|
|
183
|
+
.wb-article-host .wb-related ul {
|
|
184
|
+
margin: 0;
|
|
185
|
+
padding: 0;
|
|
186
|
+
list-style: none;
|
|
187
|
+
display: grid;
|
|
188
|
+
gap: 0.4rem;
|
|
189
|
+
}
|
|
190
|
+
.wb-article-host .wb-related li::before {
|
|
191
|
+
content: "→";
|
|
192
|
+
color: var(--wb-bronze);
|
|
193
|
+
margin-right: 0.5rem;
|
|
194
|
+
font-weight: 600;
|
|
195
|
+
}
|
|
196
|
+
.wb-article-host .wb-related a {
|
|
197
|
+
color: var(--wb-ink);
|
|
198
|
+
text-decoration: none;
|
|
199
|
+
border-bottom: 1px solid transparent;
|
|
200
|
+
transition: border-color 150ms ease;
|
|
201
|
+
}
|
|
202
|
+
.wb-article-host .wb-related a:hover {
|
|
203
|
+
border-bottom-color: var(--wb-bronze);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Polished tag pill style — opt-in via .wb-tags wrapper. Page templates
|
|
207
|
+
that render their own tag list outside .wb-article-host can also use
|
|
208
|
+
this class on the wrapper <ul>. */
|
|
209
|
+
.wb-tags {
|
|
210
|
+
list-style: none;
|
|
211
|
+
margin: 0;
|
|
212
|
+
padding: 0;
|
|
213
|
+
display: flex;
|
|
214
|
+
flex-wrap: wrap;
|
|
215
|
+
gap: 0.5rem;
|
|
216
|
+
}
|
|
217
|
+
.wb-tags li {
|
|
218
|
+
margin: 0;
|
|
219
|
+
}
|
|
220
|
+
.wb-tags .wb-tag,
|
|
221
|
+
.wb-tags > li > a,
|
|
222
|
+
.wb-tags > li > span {
|
|
223
|
+
display: inline-flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
padding: 0.35rem 0.85rem;
|
|
226
|
+
border-radius: 999px;
|
|
227
|
+
background: var(--wb-paper);
|
|
228
|
+
color: var(--wb-forest);
|
|
229
|
+
border: 1px solid var(--wb-border);
|
|
230
|
+
font-family: var(--wb-font-body);
|
|
231
|
+
font-size: 0.82rem;
|
|
232
|
+
text-decoration: none;
|
|
233
|
+
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
|
|
234
|
+
}
|
|
235
|
+
.wb-tags > li > a:hover {
|
|
236
|
+
background: var(--wb-cream);
|
|
237
|
+
border-color: var(--wb-bronze);
|
|
238
|
+
color: var(--wb-bronze-deep);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Hide duplicate chrome that destination templates render themselves */
|
|
242
|
+
.wb-article-host .wb-article > .wb-title:first-child,
|
|
243
|
+
.wb-article-host .wb-article > h1.wb-title,
|
|
244
|
+
.wb-article-host .wb-dek,
|
|
245
|
+
.wb-article-host .wb-tag-row,
|
|
246
|
+
.wb-article-host ul.wb-tag-row { display: none; }
|
|
247
|
+
|
|
248
|
+
/* --- TL;DR -------------------------------------------------
|
|
249
|
+
Explicit fill colors (not just CSS vars) so host themes that override
|
|
250
|
+
color/background at the article-host level can't make the text invisible. */
|
|
251
|
+
.wb-article-host .wb-tldr {
|
|
252
|
+
border: 1px solid #D6CFC4;
|
|
253
|
+
background: #F6F2EB;
|
|
254
|
+
border-left: 4px solid #9A7453;
|
|
255
|
+
border-radius: 12px;
|
|
256
|
+
padding: 1.25rem 1.5rem;
|
|
257
|
+
margin: 0 0 2.5rem;
|
|
258
|
+
color: #3A3732;
|
|
259
|
+
}
|
|
260
|
+
.wb-article-host .wb-tldr h2 {
|
|
261
|
+
font-family: var(--wb-font-display);
|
|
262
|
+
font-size: 0.85rem; font-weight: 700;
|
|
263
|
+
text-transform: uppercase; letter-spacing: 0.12em;
|
|
264
|
+
color: #6B5136; margin: 0 0 0.75rem;
|
|
265
|
+
}
|
|
266
|
+
.wb-article-host .wb-tldr ul { margin: 0; padding: 0 0 0 1.25rem; list-style: disc; }
|
|
267
|
+
.wb-article-host .wb-tldr li { margin: 0.4rem 0; color: #2A2724; line-height: 1.6; font-size: 0.97rem; }
|
|
268
|
+
|
|
269
|
+
/* --- TOC sidebar ------------------------------------------ */
|
|
270
|
+
.wb-toc-sidebar .wb-toc {
|
|
271
|
+
background: transparent; padding: 0; border: 0;
|
|
272
|
+
border-left: 1px solid var(--wb-border); margin: 0;
|
|
273
|
+
}
|
|
274
|
+
.wb-toc-sidebar .wb-toc h2 {
|
|
275
|
+
font-family: var(--wb-font-display);
|
|
276
|
+
font-size: 0.7rem; font-weight: 600;
|
|
277
|
+
text-transform: uppercase; letter-spacing: 0.12em;
|
|
278
|
+
color: var(--wb-body); margin: 0 0 0.75rem; padding-left: 1rem;
|
|
279
|
+
}
|
|
280
|
+
.wb-toc-sidebar .wb-toc ul, .wb-toc-sidebar .wb-toc ol {
|
|
281
|
+
margin: 0; padding: 0; list-style: none;
|
|
282
|
+
}
|
|
283
|
+
.wb-toc-sidebar .wb-toc li { margin: 0; }
|
|
284
|
+
.wb-toc-sidebar .wb-toc a {
|
|
285
|
+
display: block; padding: 0.4rem 1rem;
|
|
286
|
+
color: var(--wb-body); text-decoration: none;
|
|
287
|
+
font-family: var(--wb-font-body);
|
|
288
|
+
font-size: 0.9rem; line-height: 1.4;
|
|
289
|
+
border-left: 2px solid transparent; margin-left: -1px;
|
|
290
|
+
transition: color 150ms ease, border-color 150ms ease;
|
|
291
|
+
}
|
|
292
|
+
.wb-toc-sidebar .wb-toc a:hover {
|
|
293
|
+
color: var(--wb-ink); border-left-color: var(--wb-bronze);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* --- Section headers --------------------------------------- */
|
|
297
|
+
/* Cover both Blogoto-generated structure (section.wb-section > h2) AND
|
|
298
|
+
plain h2/h3s from migrated/legacy content. */
|
|
299
|
+
.wb-article-host section.wb-section { margin-top: 3rem; }
|
|
300
|
+
.wb-article-host section.wb-section > h2,
|
|
301
|
+
.wb-article-host > h2,
|
|
302
|
+
.wb-article-host h2:not(.wb-tldr h2):not(.wb-toc h2):not(.wb-citations h2):not(.wb-faq h2):not(.wb-related h2):not(.wb-youtube-title) {
|
|
303
|
+
font-family: var(--wb-font-display);
|
|
304
|
+
font-weight: 700;
|
|
305
|
+
font-size: 1.8rem;
|
|
306
|
+
line-height: 1.2;
|
|
307
|
+
color: var(--wb-ink);
|
|
308
|
+
margin: 2.5rem 0 0.75rem;
|
|
309
|
+
scroll-margin-top: 6rem;
|
|
310
|
+
}
|
|
311
|
+
.wb-article-host section.wb-section > h2::before,
|
|
312
|
+
.wb-article-host > h2::before,
|
|
313
|
+
.wb-article-host h2:not(.wb-tldr h2):not(.wb-toc h2):not(.wb-citations h2):not(.wb-faq h2):not(.wb-related h2):not(.wb-youtube-title)::before {
|
|
314
|
+
content: '';
|
|
315
|
+
display: block;
|
|
316
|
+
width: 2.5rem;
|
|
317
|
+
height: 3px;
|
|
318
|
+
background: var(--wb-bronze);
|
|
319
|
+
margin-bottom: 0.85rem;
|
|
320
|
+
border-radius: 2px;
|
|
321
|
+
}
|
|
322
|
+
.wb-article-host h3 {
|
|
323
|
+
font-family: var(--wb-font-display);
|
|
324
|
+
font-weight: 600;
|
|
325
|
+
font-size: 1.15rem;
|
|
326
|
+
line-height: 1.35;
|
|
327
|
+
color: var(--wb-ink);
|
|
328
|
+
margin: 1.75rem 0 0.5rem;
|
|
329
|
+
scroll-margin-top: 6rem;
|
|
330
|
+
}
|
|
331
|
+
.wb-article-host h4 {
|
|
332
|
+
font-family: var(--wb-font-display);
|
|
333
|
+
font-weight: 600;
|
|
334
|
+
font-size: 1rem;
|
|
335
|
+
color: var(--wb-ink);
|
|
336
|
+
margin: 1.5rem 0 0.5rem;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* --- Figures (infographics, inline imgs) ------------------- */
|
|
340
|
+
.wb-article-host figure { margin: 2rem 0; }
|
|
341
|
+
.wb-article-host figure img {
|
|
342
|
+
display: block; width: 100%; height: auto; max-width: 100%;
|
|
343
|
+
border-radius: var(--wb-radius-md); background: #EDE7DC;
|
|
344
|
+
}
|
|
345
|
+
.wb-article-host figcaption {
|
|
346
|
+
margin-top: 0.5rem; font-size: 0.85rem;
|
|
347
|
+
color: var(--wb-body); font-style: italic; text-align: center;
|
|
348
|
+
}
|
|
349
|
+
.wb-article-host .wb-infographic { max-width: 720px; margin-left: auto; margin-right: auto; }
|
|
350
|
+
|
|
351
|
+
/* --- YouTube card ------------------------------------------ */
|
|
352
|
+
.wb-article-host .wb-youtube { margin: 2.5rem 0; max-width: 100%; }
|
|
353
|
+
.wb-article-host .wb-youtube-card {
|
|
354
|
+
background: #FDFAF6;
|
|
355
|
+
border: 1px solid #B7AEA1;
|
|
356
|
+
border-radius: 12px;
|
|
357
|
+
padding: 1rem;
|
|
358
|
+
display: grid;
|
|
359
|
+
gap: 0.85rem;
|
|
360
|
+
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(35, 40, 32, 0.06);
|
|
361
|
+
}
|
|
362
|
+
.wb-article-host .wb-youtube-meta { display: grid; gap: 0.4rem; }
|
|
363
|
+
.wb-article-host .wb-youtube-eyebrow {
|
|
364
|
+
display: inline-block; font-family: var(--wb-font-body);
|
|
365
|
+
font-size: 0.7rem; font-weight: 600;
|
|
366
|
+
text-transform: uppercase; letter-spacing: 0.14em;
|
|
367
|
+
color: var(--wb-bronze);
|
|
368
|
+
}
|
|
369
|
+
.wb-article-host .wb-youtube-title {
|
|
370
|
+
margin: 0; font-family: var(--wb-font-display);
|
|
371
|
+
font-size: 1.15rem; font-weight: 600;
|
|
372
|
+
color: var(--wb-ink); line-height: 1.35;
|
|
373
|
+
}
|
|
374
|
+
.wb-article-host .wb-youtube-channel { margin: 0; font-size: 0.85rem; color: var(--wb-body); }
|
|
375
|
+
.wb-article-host .wb-youtube-channel-name { color: var(--wb-ink); font-weight: 500; }
|
|
376
|
+
.wb-article-host .wb-youtube-frame {
|
|
377
|
+
position: relative;
|
|
378
|
+
width: 100%;
|
|
379
|
+
aspect-ratio: 16 / 9;
|
|
380
|
+
border-radius: 8px;
|
|
381
|
+
overflow: hidden;
|
|
382
|
+
background: #000;
|
|
383
|
+
border: 1px solid #1a1a1a;
|
|
384
|
+
}
|
|
385
|
+
.wb-article-host .wb-youtube iframe {
|
|
386
|
+
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
|
|
387
|
+
}
|
|
388
|
+
.wb-article-host figure.wb-youtube { display: block; }
|
|
389
|
+
.wb-article-host .wb-youtube img { display: none; }
|
|
390
|
+
|
|
391
|
+
/* --- FAQ accordion ---------------------------------------- */
|
|
392
|
+
.wb-article-host .wb-faq { margin-top: 3rem; clear: both; }
|
|
393
|
+
.wb-article-host .wb-faq-item {
|
|
394
|
+
border: 1px solid var(--wb-border); background: var(--wb-paper);
|
|
395
|
+
border-radius: var(--wb-radius-md); margin: 0.5rem 0; padding: 0; overflow: hidden;
|
|
396
|
+
transition: background-color 150ms ease, border-color 150ms ease;
|
|
397
|
+
}
|
|
398
|
+
.wb-article-host .wb-faq-item[open] { background: var(--wb-cream); border-color: var(--wb-bronze); }
|
|
399
|
+
.wb-article-host .wb-faq-item > summary {
|
|
400
|
+
list-style: none; cursor: pointer;
|
|
401
|
+
padding: 1rem 1.25rem;
|
|
402
|
+
display: flex; align-items: center; gap: 0.75rem; user-select: none;
|
|
403
|
+
}
|
|
404
|
+
.wb-article-host .wb-faq-item > summary::-webkit-details-marker { display: none; }
|
|
405
|
+
.wb-article-host .wb-faq-item > summary::before {
|
|
406
|
+
content: ''; flex: none; width: 10px; height: 10px;
|
|
407
|
+
border-right: 2px solid var(--wb-bronze-deep);
|
|
408
|
+
border-bottom: 2px solid var(--wb-bronze-deep);
|
|
409
|
+
transform: rotate(-45deg); transition: transform 180ms ease;
|
|
410
|
+
}
|
|
411
|
+
.wb-article-host .wb-faq-item[open] > summary::before { transform: rotate(45deg); }
|
|
412
|
+
.wb-article-host .wb-faq-item > summary > h3 {
|
|
413
|
+
margin: 0; font-family: var(--wb-font-display);
|
|
414
|
+
font-size: 1rem; font-weight: 600;
|
|
415
|
+
color: var(--wb-ink); line-height: 1.4;
|
|
416
|
+
}
|
|
417
|
+
.wb-article-host .wb-faq-answer {
|
|
418
|
+
padding: 0 1.25rem 1.25rem 2.75rem;
|
|
419
|
+
color: #3A3732; line-height: 1.65;
|
|
420
|
+
}
|
|
421
|
+
.wb-article-host .wb-faq-answer p { margin: 0.5rem 0; }
|
|
422
|
+
|
|
423
|
+
/* --- Inline & footer CTA ----------------------------------
|
|
424
|
+
Hard-coded colors so host themes cannot overwrite the dark/bronze
|
|
425
|
+
palette and crash text contrast (the prior version inherited a near-
|
|
426
|
+
transparent paper background on some sites). */
|
|
427
|
+
.wb-article-host .wb-cta, .wb-article-host .wb-footer-cta {
|
|
428
|
+
background: #232820 !important;
|
|
429
|
+
color: #FAF7F2 !important;
|
|
430
|
+
border-radius: 12px;
|
|
431
|
+
padding: 1.75rem 1.75rem;
|
|
432
|
+
margin: 2rem 0;
|
|
433
|
+
border: 1px solid #1a1f18;
|
|
434
|
+
}
|
|
435
|
+
.wb-article-host .wb-cta h2,
|
|
436
|
+
.wb-article-host .wb-footer-cta h2,
|
|
437
|
+
.wb-article-host .wb-cta p,
|
|
438
|
+
.wb-article-host .wb-footer-cta p {
|
|
439
|
+
color: #FAF7F2 !important;
|
|
440
|
+
margin: 0 0 0.65rem;
|
|
441
|
+
line-height: 1.45;
|
|
442
|
+
}
|
|
443
|
+
.wb-article-host .wb-cta h2,
|
|
444
|
+
.wb-article-host .wb-footer-cta h2 {
|
|
445
|
+
font-family: var(--wb-font-display);
|
|
446
|
+
font-size: 1.25rem; font-weight: 700;
|
|
447
|
+
}
|
|
448
|
+
.wb-article-host .wb-cta h2::before,
|
|
449
|
+
.wb-article-host .wb-footer-cta h2::before { display: none !important; }
|
|
450
|
+
.wb-article-host .wb-cta a, .wb-article-host .wb-footer-cta a {
|
|
451
|
+
display: inline-block;
|
|
452
|
+
margin-top: 0.6rem;
|
|
453
|
+
padding: 0.6rem 1.1rem;
|
|
454
|
+
background: #9A7453 !important;
|
|
455
|
+
color: #FAF7F2 !important;
|
|
456
|
+
border-radius: 6px;
|
|
457
|
+
text-decoration: none !important;
|
|
458
|
+
font-weight: 600;
|
|
459
|
+
font-size: 0.92rem;
|
|
460
|
+
letter-spacing: 0.02em;
|
|
461
|
+
border: 0;
|
|
462
|
+
background-image: none !important;
|
|
463
|
+
transition: background-color 150ms ease;
|
|
464
|
+
}
|
|
465
|
+
.wb-article-host .wb-cta a:hover, .wb-article-host .wb-footer-cta a:hover {
|
|
466
|
+
background: #6B5136 !important;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* --- Tables ------------------------------------------------ */
|
|
470
|
+
/* Tables render inside a horizontally-scrollable block so they never push
|
|
471
|
+
the article column wider than its grid track (which would slide content
|
|
472
|
+
under a sticky sidebar CTA). `display: block` is what makes overflow-x
|
|
473
|
+
actually work — `display: table` ignores `overflow` on itself. */
|
|
474
|
+
.wb-article-host table {
|
|
475
|
+
display: block;
|
|
476
|
+
width: 100%;
|
|
477
|
+
max-width: 100%;
|
|
478
|
+
overflow-x: auto;
|
|
479
|
+
-webkit-overflow-scrolling: touch;
|
|
480
|
+
border-collapse: collapse;
|
|
481
|
+
margin: 2rem 0;
|
|
482
|
+
font-size: 0.95rem;
|
|
483
|
+
background: var(--wb-paper);
|
|
484
|
+
/* Stronger border so the table is visible against paper-tone page bgs. */
|
|
485
|
+
border: 1px solid #B7AEA1;
|
|
486
|
+
border-radius: var(--wb-radius-sm);
|
|
487
|
+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
|
|
488
|
+
}
|
|
489
|
+
/* Forest-green header with cream text. !important guards defeat host
|
|
490
|
+
themes that set a generic cream/light bg on `.blog-content th` and
|
|
491
|
+
leave the text color inheriting cream — that combination produced
|
|
492
|
+
the nearly-invisible cream-on-cream header text on the
|
|
493
|
+
Santa-Teresa-vs-Montezuma comparison table. */
|
|
494
|
+
.wb-article-host thead {
|
|
495
|
+
background: #3C5445 !important;
|
|
496
|
+
color: #FAF7F2 !important;
|
|
497
|
+
}
|
|
498
|
+
.wb-article-host thead th {
|
|
499
|
+
background: #3C5445 !important;
|
|
500
|
+
color: #FAF7F2 !important;
|
|
501
|
+
text-align: left;
|
|
502
|
+
font-family: var(--wb-font-display);
|
|
503
|
+
font-weight: 600;
|
|
504
|
+
font-size: 0.78rem;
|
|
505
|
+
text-transform: uppercase;
|
|
506
|
+
letter-spacing: 0.06em;
|
|
507
|
+
padding: 0.85rem 1rem;
|
|
508
|
+
border-bottom: 1px solid var(--wb-forest-deep);
|
|
509
|
+
}
|
|
510
|
+
.wb-article-host tbody td {
|
|
511
|
+
padding: 0.85rem 1rem;
|
|
512
|
+
border-top: 1px solid #E2DBCE;
|
|
513
|
+
vertical-align: top;
|
|
514
|
+
color: #3A3732;
|
|
515
|
+
line-height: 1.55;
|
|
516
|
+
}
|
|
517
|
+
.wb-article-host tbody tr:nth-child(even) { background: var(--wb-cream); }
|
|
518
|
+
.wb-article-host tbody tr:hover { background: #F0EBE1; }
|
|
519
|
+
.wb-article-host th + th,
|
|
520
|
+
.wb-article-host td + td { border-left: 1px solid #E2DBCE; }
|
|
521
|
+
|
|
522
|
+
/* Mobile: tighten table cells. (Horizontal scroll is already enabled at
|
|
523
|
+
all breakpoints in the base table rule above.) */
|
|
524
|
+
@media (max-width: 640px) {
|
|
525
|
+
.wb-article-host table {
|
|
526
|
+
font-size: 0.88rem;
|
|
527
|
+
}
|
|
528
|
+
.wb-article-host thead th, .wb-article-host tbody td {
|
|
529
|
+
padding: 0.65rem 0.85rem;
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
/* --- Horizontal divider -------------------------------------------------- */
|
|
534
|
+
.wb-article-host hr.wb-divider {
|
|
535
|
+
border: 0;
|
|
536
|
+
height: 1px;
|
|
537
|
+
background: linear-gradient(to right, transparent, var(--wb-border) 20%, var(--wb-border) 80%, transparent);
|
|
538
|
+
margin: 2.5rem auto;
|
|
539
|
+
max-width: 60%;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/* --- Pull quote ------------------------------------------- */
|
|
543
|
+
.wb-article-host blockquote.wb-quote, .wb-article-host blockquote {
|
|
544
|
+
margin: 2rem 0; padding: 0.5rem 0 0.5rem 1.5rem;
|
|
545
|
+
border-left: 3px solid var(--wb-bronze);
|
|
546
|
+
font-family: var(--wb-font-display); font-weight: 500;
|
|
547
|
+
font-size: 1.2rem; line-height: 1.5;
|
|
548
|
+
color: var(--wb-ink); font-style: normal;
|
|
549
|
+
}
|
|
550
|
+
.wb-article-host blockquote p { margin: 0.25rem 0; }
|
|
551
|
+
|
|
552
|
+
/* --- Callouts (tip / warning / stat) ----------------------
|
|
553
|
+
Clean, label-first treatment with NO emoji ornament. The colored left
|
|
554
|
+
border + uppercase label carry the visual weight. Legacy callout HTML
|
|
555
|
+
may still include a `.wb-callout-emoji` span — we hide it. */
|
|
556
|
+
.wb-article-host .wb-callout {
|
|
557
|
+
position: relative;
|
|
558
|
+
display: block;
|
|
559
|
+
padding: 1.15rem 1.25rem;
|
|
560
|
+
margin: 2rem 0;
|
|
561
|
+
border-radius: var(--wb-radius-md);
|
|
562
|
+
border: 1px solid;
|
|
563
|
+
border-left-width: 4px;
|
|
564
|
+
font-size: 0.97rem;
|
|
565
|
+
line-height: 1.6;
|
|
566
|
+
}
|
|
567
|
+
.wb-article-host .wb-callout-emoji { display: none !important; }
|
|
568
|
+
.wb-article-host .wb-callout-body { display: block; min-width: 0; }
|
|
569
|
+
.wb-article-host .wb-callout-body > * + * { margin-top: 0.5rem; }
|
|
570
|
+
.wb-article-host .wb-callout-label {
|
|
571
|
+
display: block;
|
|
572
|
+
margin-bottom: 0.5rem;
|
|
573
|
+
font-family: var(--wb-font-display);
|
|
574
|
+
font-size: 0.72rem;
|
|
575
|
+
font-weight: 700;
|
|
576
|
+
text-transform: uppercase;
|
|
577
|
+
letter-spacing: 0.14em;
|
|
578
|
+
}
|
|
579
|
+
.wb-article-host .wb-callout-body p,
|
|
580
|
+
.wb-article-host .wb-callout-body ul,
|
|
581
|
+
.wb-article-host .wb-callout-body ol { margin: 0; }
|
|
582
|
+
.wb-article-host .wb-callout-body p + p { margin-top: 0.5rem; }
|
|
583
|
+
|
|
584
|
+
.wb-article-host .wb-callout-tip {
|
|
585
|
+
background: linear-gradient(180deg, #F2F7F0 0%, #ECF3E9 100%);
|
|
586
|
+
border-color: #C2D0BD;
|
|
587
|
+
border-left-color: var(--wb-forest);
|
|
588
|
+
color: #1F3324;
|
|
589
|
+
}
|
|
590
|
+
.wb-article-host .wb-callout-tip .wb-callout-label { color: var(--wb-forest); }
|
|
591
|
+
|
|
592
|
+
.wb-article-host .wb-callout-warning {
|
|
593
|
+
background: linear-gradient(180deg, #FCF3E5 0%, #F8EAD4 100%);
|
|
594
|
+
border-color: #E5C7A0;
|
|
595
|
+
border-left-color: #C58A2D;
|
|
596
|
+
color: #4A3618;
|
|
597
|
+
}
|
|
598
|
+
.wb-article-host .wb-callout-warning .wb-callout-label { color: #9A6E2D; }
|
|
599
|
+
|
|
600
|
+
.wb-article-host .wb-callout-stat {
|
|
601
|
+
background: linear-gradient(180deg, #F2EFF9 0%, #ECE7F5 100%);
|
|
602
|
+
border-color: #C7BFD9;
|
|
603
|
+
border-left-color: #6C5BA1;
|
|
604
|
+
color: #2C2447;
|
|
605
|
+
}
|
|
606
|
+
.wb-article-host .wb-callout-stat .wb-callout-label { color: #5C4F8A; }
|
|
607
|
+
|
|
608
|
+
/* --- Numbered process steps ------------------------------- */
|
|
609
|
+
.wb-article-host ol.wb-steps {
|
|
610
|
+
list-style: none; counter-reset: wb-step;
|
|
611
|
+
padding: 0; margin: 1.5rem 0;
|
|
612
|
+
display: grid; gap: 0.6rem;
|
|
613
|
+
}
|
|
614
|
+
.wb-article-host ol.wb-steps > li {
|
|
615
|
+
counter-increment: wb-step; position: relative;
|
|
616
|
+
padding: 0.85rem 1rem 0.85rem 3rem;
|
|
617
|
+
background: var(--wb-paper); border: 1px solid var(--wb-border);
|
|
618
|
+
border-radius: var(--wb-radius-sm); line-height: 1.55; color: #3A3732;
|
|
619
|
+
}
|
|
620
|
+
.wb-article-host ol.wb-steps > li::before {
|
|
621
|
+
content: counter(wb-step);
|
|
622
|
+
position: absolute; left: 0.85rem; top: 0.7rem;
|
|
623
|
+
width: 1.6rem; height: 1.6rem;
|
|
624
|
+
border-radius: 999px;
|
|
625
|
+
background: var(--wb-forest); color: #FAF7F2;
|
|
626
|
+
font-family: var(--wb-font-display); font-weight: 600; font-size: 0.85rem;
|
|
627
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
/* --- Citations -------------------------------------------- */
|
|
631
|
+
.wb-article-host .wb-citations {
|
|
632
|
+
margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--wb-border);
|
|
633
|
+
}
|
|
634
|
+
.wb-article-host .wb-citations h2 {
|
|
635
|
+
font-family: var(--wb-font-display); font-size: 1.125rem;
|
|
636
|
+
font-weight: 600; color: var(--wb-ink); margin: 0 0 1rem;
|
|
637
|
+
}
|
|
638
|
+
.wb-article-host .wb-citation-list {
|
|
639
|
+
list-style: none; margin: 0; padding: 0;
|
|
640
|
+
display: grid; gap: 0.5rem;
|
|
641
|
+
}
|
|
642
|
+
.wb-article-host .wb-citation {
|
|
643
|
+
display: flex; gap: 0.75rem; align-items: flex-start;
|
|
644
|
+
padding: 0.75rem 0.9rem;
|
|
645
|
+
background: var(--wb-paper); border: 1px solid var(--wb-border);
|
|
646
|
+
border-radius: var(--wb-radius-sm);
|
|
647
|
+
}
|
|
648
|
+
.wb-article-host .wb-citation-index {
|
|
649
|
+
flex: none; font-family: var(--wb-font-display); font-weight: 600;
|
|
650
|
+
font-size: 0.85rem; color: var(--wb-bronze-deep);
|
|
651
|
+
min-width: 1.25rem; text-align: right;
|
|
652
|
+
}
|
|
653
|
+
.wb-article-host .wb-citation-body {
|
|
654
|
+
display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
|
|
655
|
+
}
|
|
656
|
+
.wb-article-host .wb-citation-title {
|
|
657
|
+
font-size: 0.92rem; color: var(--wb-ink); line-height: 1.35;
|
|
658
|
+
text-decoration: none; border-bottom: 1px solid transparent;
|
|
659
|
+
transition: border-color 150ms ease, color 150ms ease; word-break: break-word;
|
|
660
|
+
}
|
|
661
|
+
.wb-article-host .wb-citation-title:hover {
|
|
662
|
+
color: var(--wb-bronze-deep); border-bottom-color: var(--wb-bronze);
|
|
663
|
+
}
|
|
664
|
+
.wb-article-host .wb-citation-domain {
|
|
665
|
+
font-size: 0.75rem; color: var(--wb-body); letter-spacing: 0.02em;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
/* --- Author block ----------------------------------------- */
|
|
669
|
+
.wb-article-host .wb-author {
|
|
670
|
+
margin-top: 3rem;
|
|
671
|
+
padding: 1.5rem;
|
|
672
|
+
background: var(--wb-paper);
|
|
673
|
+
border: 1px solid var(--wb-border);
|
|
674
|
+
border-radius: var(--wb-radius-md);
|
|
675
|
+
display: grid;
|
|
676
|
+
grid-template-columns: auto 1fr auto;
|
|
677
|
+
gap: 1.25rem;
|
|
678
|
+
align-items: center;
|
|
679
|
+
}
|
|
680
|
+
.wb-article-host .wb-author-avatar {
|
|
681
|
+
width: 56px;
|
|
682
|
+
height: 56px;
|
|
683
|
+
border-radius: 999px;
|
|
684
|
+
object-fit: cover;
|
|
685
|
+
background: var(--wb-cream);
|
|
686
|
+
flex: none;
|
|
687
|
+
}
|
|
688
|
+
.wb-article-host .wb-author-identity {
|
|
689
|
+
display: grid;
|
|
690
|
+
gap: 0.15rem;
|
|
691
|
+
min-width: 0;
|
|
692
|
+
}
|
|
693
|
+
.wb-article-host .wb-author-name {
|
|
694
|
+
font-family: var(--wb-font-display);
|
|
695
|
+
font-weight: 600;
|
|
696
|
+
font-size: 1.05rem;
|
|
697
|
+
color: var(--wb-ink);
|
|
698
|
+
line-height: 1.3;
|
|
699
|
+
}
|
|
700
|
+
.wb-article-host .wb-author-title {
|
|
701
|
+
font-size: 0.8rem;
|
|
702
|
+
color: var(--wb-body);
|
|
703
|
+
text-transform: uppercase;
|
|
704
|
+
letter-spacing: 0.08em;
|
|
705
|
+
font-weight: 500;
|
|
706
|
+
}
|
|
707
|
+
.wb-article-host .wb-author-bio,
|
|
708
|
+
.wb-article-host .wb-author p {
|
|
709
|
+
grid-column: 1 / -1;
|
|
710
|
+
font-size: 0.92rem;
|
|
711
|
+
color: var(--wb-body);
|
|
712
|
+
margin: 0;
|
|
713
|
+
line-height: 1.55;
|
|
714
|
+
}
|
|
715
|
+
.wb-article-host .wb-author-link {
|
|
716
|
+
font-family: var(--wb-font-body);
|
|
717
|
+
font-size: 0.85rem;
|
|
718
|
+
font-weight: 500;
|
|
719
|
+
color: var(--wb-forest);
|
|
720
|
+
text-decoration: none;
|
|
721
|
+
padding: 0.5rem 0.9rem;
|
|
722
|
+
border: 1px solid var(--wb-forest);
|
|
723
|
+
border-radius: var(--wb-radius-sm);
|
|
724
|
+
white-space: nowrap;
|
|
725
|
+
transition: background-color 150ms ease, color 150ms ease;
|
|
726
|
+
}
|
|
727
|
+
.wb-article-host .wb-author-link:hover {
|
|
728
|
+
background: var(--wb-forest);
|
|
729
|
+
color: #FAF7F2;
|
|
730
|
+
}
|
|
731
|
+
@media (max-width: 600px) {
|
|
732
|
+
.wb-article-host .wb-author { grid-template-columns: auto 1fr; }
|
|
733
|
+
.wb-article-host .wb-author-link { grid-column: 1 / -1; text-align: center; }
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
|
|
737
|
+
/* ============================================================
|
|
738
|
+
Reusable layout helpers for destination templates.
|
|
739
|
+
Apply these classes OUTSIDE .wb-article-host on the page shell:
|
|
740
|
+
<nav class="wb-breadcrumbs"> … </nav>
|
|
741
|
+
<aside class="wb-sticky-toc"> … </aside>
|
|
742
|
+
<aside class="wb-sticky-cta"> … </aside>
|
|
743
|
+
<section class="wb-related-grid"> … </section>
|
|
744
|
+
Self-contained so they render consistently across client sites.
|
|
745
|
+
============================================================ */
|
|
746
|
+
|
|
747
|
+
.wb-breadcrumbs {
|
|
748
|
+
font-family: var(--wb-font-body);
|
|
749
|
+
font-size: 0.85rem;
|
|
750
|
+
color: #5C574F;
|
|
751
|
+
margin: 0 0 1.25rem;
|
|
752
|
+
display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center;
|
|
753
|
+
}
|
|
754
|
+
.wb-breadcrumbs ol {
|
|
755
|
+
list-style: none; margin: 0; padding: 0;
|
|
756
|
+
display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center;
|
|
757
|
+
}
|
|
758
|
+
.wb-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
|
|
759
|
+
.wb-breadcrumbs li + li::before { content: "/"; color: #B7AEA1; }
|
|
760
|
+
.wb-breadcrumbs a {
|
|
761
|
+
color: #5C574F; text-decoration: none;
|
|
762
|
+
border-bottom: 1px solid transparent;
|
|
763
|
+
transition: color 150ms ease, border-color 150ms ease;
|
|
764
|
+
}
|
|
765
|
+
.wb-breadcrumbs a:hover { color: #6B5136; border-bottom-color: #9A7453; }
|
|
766
|
+
.wb-breadcrumbs [aria-current="page"] { color: #1A1916; font-weight: 500; }
|
|
767
|
+
|
|
768
|
+
.wb-sticky-toc {
|
|
769
|
+
position: sticky; top: 6rem; align-self: start;
|
|
770
|
+
max-height: calc(100vh - 8rem); overflow-y: auto;
|
|
771
|
+
padding-right: 0.5rem;
|
|
772
|
+
}
|
|
773
|
+
@media (max-width: 1023px) { .wb-sticky-toc { display: none; } }
|
|
774
|
+
|
|
775
|
+
.wb-sticky-cta {
|
|
776
|
+
position: sticky; top: 6rem; align-self: start;
|
|
777
|
+
background: #232820; color: #FAF7F2;
|
|
778
|
+
border-radius: 12px; padding: 1.25rem 1.35rem;
|
|
779
|
+
font-family: var(--wb-font-body);
|
|
780
|
+
}
|
|
781
|
+
.wb-sticky-cta-eyebrow {
|
|
782
|
+
display: block; font-size: 0.7rem; font-weight: 600;
|
|
783
|
+
text-transform: uppercase; letter-spacing: 0.14em;
|
|
784
|
+
color: #C8A67E; margin-bottom: 0.6rem;
|
|
785
|
+
}
|
|
786
|
+
.wb-sticky-cta h3 {
|
|
787
|
+
margin: 0 0 0.6rem;
|
|
788
|
+
font-family: var(--wb-font-display);
|
|
789
|
+
font-size: 1.05rem; font-weight: 600;
|
|
790
|
+
color: #FAF7F2; line-height: 1.3;
|
|
791
|
+
}
|
|
792
|
+
.wb-sticky-cta p {
|
|
793
|
+
margin: 0 0 0.85rem; font-size: 0.88rem;
|
|
794
|
+
color: rgba(240, 235, 225, 0.78); line-height: 1.55;
|
|
795
|
+
}
|
|
796
|
+
.wb-sticky-cta .wb-sticky-cta-btn {
|
|
797
|
+
display: block; text-align: center;
|
|
798
|
+
background: #9A7453; color: #FAF7F2;
|
|
799
|
+
padding: 0.6rem 1rem; border-radius: 6px;
|
|
800
|
+
font-weight: 600; font-size: 0.9rem;
|
|
801
|
+
text-decoration: none; transition: background-color 150ms ease;
|
|
802
|
+
}
|
|
803
|
+
.wb-sticky-cta .wb-sticky-cta-btn:hover { background: #6B5136; }
|
|
804
|
+
@media (max-width: 1023px) { .wb-sticky-cta { display: none; } }
|
|
805
|
+
|
|
806
|
+
.wb-related-grid {
|
|
807
|
+
margin: 3rem 0 0;
|
|
808
|
+
padding: 2rem 0 0;
|
|
809
|
+
border-top: 1px solid #D6CFC4;
|
|
810
|
+
}
|
|
811
|
+
.wb-related-grid h2 {
|
|
812
|
+
font-family: var(--wb-font-display);
|
|
813
|
+
font-size: 0.78rem; font-weight: 700;
|
|
814
|
+
text-transform: uppercase; letter-spacing: 0.14em;
|
|
815
|
+
color: #6B5136;
|
|
816
|
+
margin: 0 0 1.25rem;
|
|
817
|
+
}
|
|
818
|
+
.wb-related-grid ul {
|
|
819
|
+
list-style: none; margin: 0; padding: 0;
|
|
820
|
+
display: grid;
|
|
821
|
+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
822
|
+
gap: 1rem;
|
|
823
|
+
}
|
|
824
|
+
.wb-related-grid li {
|
|
825
|
+
display: flex;
|
|
826
|
+
border: 1px solid #D6CFC4;
|
|
827
|
+
border-radius: 12px;
|
|
828
|
+
background: #FDFAF6;
|
|
829
|
+
overflow: hidden;
|
|
830
|
+
transition: border-color 150ms ease, transform 150ms ease;
|
|
831
|
+
}
|
|
832
|
+
.wb-related-grid li:hover { border-color: #9A7453; transform: translateY(-1px); }
|
|
833
|
+
.wb-related-grid a {
|
|
834
|
+
display: flex; flex-direction: column; gap: 0.4rem;
|
|
835
|
+
padding: 0.95rem 1.05rem; width: 100%;
|
|
836
|
+
text-decoration: none; color: #1A1916;
|
|
837
|
+
font-family: var(--wb-font-body);
|
|
838
|
+
font-size: 0.95rem; line-height: 1.4;
|
|
839
|
+
}
|
|
840
|
+
.wb-related-grid .wb-related-meta {
|
|
841
|
+
font-size: 0.72rem; color: #5C574F;
|
|
842
|
+
text-transform: uppercase; letter-spacing: 0.08em;
|
|
843
|
+
}
|
|
844
|
+
.wb-related-grid .wb-related-title {
|
|
845
|
+
font-family: var(--wb-font-display);
|
|
846
|
+
font-weight: 600; font-size: 1.02rem;
|
|
847
|
+
color: #1A1916; line-height: 1.3;
|
|
848
|
+
}
|
|
849
|
+
.wb-related-grid .wb-related-excerpt {
|
|
850
|
+
font-size: 0.88rem; color: #5C574F; line-height: 1.55;
|
|
851
|
+
display: -webkit-box; -webkit-line-clamp: 2;
|
|
852
|
+
-webkit-box-orient: vertical; overflow: hidden;
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
/* ============================================================
|
|
856
|
+
Contrast safety floor — the LAST set of rules. Some host themes
|
|
857
|
+
inherit a dark text color into our containers and crash legibility
|
|
858
|
+
(the prior bug: invisible "Get the Nicoya dispatch" CTA text). These
|
|
859
|
+
rules guarantee the key callout/tldr/cta surfaces stay readable
|
|
860
|
+
regardless of the host palette. !important is intentional here.
|
|
861
|
+
============================================================ */
|
|
862
|
+
.wb-article-host .wb-tldr,
|
|
863
|
+
.wb-article-host .wb-tldr * { color: #2A2724 !important; }
|
|
864
|
+
.wb-article-host .wb-tldr h2 { color: #6B5136 !important; }
|
|
865
|
+
.wb-article-host .wb-cta,
|
|
866
|
+
.wb-article-host .wb-cta *,
|
|
867
|
+
.wb-article-host .wb-footer-cta,
|
|
868
|
+
.wb-article-host .wb-footer-cta * { color: #FAF7F2 !important; }
|
|
869
|
+
.wb-article-host .wb-cta a,
|
|
870
|
+
.wb-article-host .wb-footer-cta a { color: #FAF7F2 !important; }
|
|
871
|
+
/* Table header — host themes that style `.blog-content th` (cream bg,
|
|
872
|
+
inherited cream text) made the comparison-table headers invisible. */
|
|
873
|
+
.wb-article-host thead,
|
|
874
|
+
.wb-article-host thead th {
|
|
875
|
+
background: #3C5445 !important;
|
|
876
|
+
color: #FAF7F2 !important;
|
|
877
|
+
}
|