@canvas-digital/blog-sdk 2.0.2 → 2.0.5
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/dist/blog-client.iife.js +1 -1
- package/dist/components/admin/AdminPostDetail.js +5 -5
- package/dist/components/admin/BrandSettings.js +5 -5
- package/dist/components/admin/BrandSwitcher.js +1 -1
- package/dist/components/admin/Chips.js +5 -5
- package/dist/components/admin/CommentsManager.js +6 -6
- package/dist/components/admin/Dashboard.js +1 -1
- package/dist/components/admin/MediaLibrary.js +5 -5
- package/dist/components/admin/MediaPicker.js +4 -4
- package/dist/components/admin/PostList.d.ts.map +1 -1
- package/dist/components/admin/PostList.js +13 -4
- package/dist/components/admin/PostsTable.d.ts +6 -1
- package/dist/components/admin/PostsTable.d.ts.map +1 -1
- package/dist/components/admin/PostsTable.js +15 -9
- package/dist/components/admin/Shell.js +3 -3
- package/dist/components/admin/TermManager.js +4 -4
- package/dist/components/admin/UsersManager.js +3 -3
- package/dist/components/admin/charts.js +7 -7
- package/dist/components/admin/editor/PostEditor.js +16 -16
- package/dist/components/admin/editor/RichTextEditor.js +8 -8
- package/dist/components/admin/editor/YoastCollapsible.js +2 -2
- package/dist/components/admin/editor/YoastInsightsPanel.js +1 -1
- package/dist/components/admin/editor/YoastInternalLinksPanel.js +1 -1
- package/dist/components/admin/editor/YoastSeoAnalysisPanel.js +6 -6
- package/dist/components/admin/editor/YoastSeoMetabox.js +8 -8
- package/dist/components/admin/editor/YoastSnippetField.js +2 -2
- package/dist/components/admin/internal/States.js +3 -3
- package/dist/components/admin/mock/store.d.ts.map +1 -1
- package/dist/components/admin/mock/store.js +3 -2
- package/dist/components/admin/seo/Ga4Settings.js +6 -6
- package/dist/components/admin/seo/RedirectAnalyticsDashboard.js +1 -1
- package/dist/components/admin/seo/RedirectDetail.js +6 -6
- package/dist/components/admin/seo/RedirectForm.js +1 -1
- package/dist/components/admin/seo/RedirectList.js +4 -4
- package/dist/components/admin/seo/RobotsEditor.js +1 -1
- package/dist/components/admin/seo/shared.js +2 -2
- package/dist/components/admin/tools/ToolsHub.js +4 -4
- package/dist/components/user/BlogCard.js +3 -3
- package/dist/components/user/BlogCategories.js +1 -1
- package/dist/components/user/BlogDetail.js +1 -1
- package/dist/components/user/BlogList.js +1 -1
- package/dist/components/user/BlogSearch.js +2 -2
- package/dist/components/user/BlogTags.js +1 -1
- package/dist/components/user/FeaturedBlogs.js +1 -1
- package/dist/components/user/RelatedBlogs.js +1 -1
- package/dist/components/user/SiteMediaHero.js +1 -1
- package/dist/components/user/detail/ArticleDetailHero.js +5 -5
- package/dist/components/user/detail/ArticleRailDetails.js +2 -2
- package/dist/components/user/detail/CommentSection.js +2 -2
- package/dist/components/user/detail/HeroFadeSlide.js +1 -1
- package/dist/components/user/detail/ReadingProgress.js +1 -1
- package/dist/components/user/detail/ShareRow.js +1 -1
- package/dist/components/user/internal/States.js +4 -4
- package/dist/lib/lexical-doc.js +1 -1
- package/dist/pages/admin/BlogAdmin.d.ts.map +1 -1
- package/dist/pages/admin/BlogAdmin.js +23 -11
- package/dist/services/admin-sdk-client.d.ts +9 -0
- package/dist/services/admin-sdk-client.d.ts.map +1 -1
- package/dist/services/admin-sdk-client.js +17 -0
- package/dist/style.css +1023 -1016
- package/package.json +2 -1
package/dist/style.css
CHANGED
|
@@ -165,13 +165,13 @@ body {
|
|
|
165
165
|
|
|
166
166
|
a { color: var(--d-accent); }
|
|
167
167
|
:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; border-radius: 4px; }
|
|
168
|
-
.
|
|
169
|
-
.
|
|
170
|
-
.
|
|
168
|
+
.blog_mono { font-family: var(--d-mono); font-size: 0.92em; }
|
|
169
|
+
.blog_muted { color: var(--d-ink-3); }
|
|
170
|
+
.blog_trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block; }
|
|
171
171
|
|
|
172
172
|
/* ============================ app shell ============================ */
|
|
173
173
|
|
|
174
|
-
.
|
|
174
|
+
.blog_bp-admin-wrapper {
|
|
175
175
|
display: block;
|
|
176
176
|
width: 100%;
|
|
177
177
|
max-width: 100%;
|
|
@@ -181,7 +181,7 @@ a { color: var(--d-accent); }
|
|
|
181
181
|
box-sizing: border-box;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
|
-
.
|
|
184
|
+
.blog_shell {
|
|
185
185
|
display: grid;
|
|
186
186
|
grid-template-columns: 1fr;
|
|
187
187
|
width: 100%;
|
|
@@ -191,9 +191,9 @@ a { color: var(--d-accent); }
|
|
|
191
191
|
overflow: hidden;
|
|
192
192
|
box-sizing: border-box;
|
|
193
193
|
}
|
|
194
|
-
@media (min-width: 1000px) { .
|
|
194
|
+
@media (min-width: 1000px) { .blog_shell { grid-template-columns: 250px minmax(0, 1fr); } }
|
|
195
195
|
|
|
196
|
-
.
|
|
196
|
+
.blog_side {
|
|
197
197
|
background: linear-gradient(180deg, var(--d-side-2), var(--d-side));
|
|
198
198
|
color: var(--d-side-ink);
|
|
199
199
|
padding: 18px 14px;
|
|
@@ -205,7 +205,7 @@ a { color: var(--d-accent); }
|
|
|
205
205
|
overflow: hidden;
|
|
206
206
|
}
|
|
207
207
|
@media (min-width: 1000px) {
|
|
208
|
-
.
|
|
208
|
+
.blog_side {
|
|
209
209
|
position: sticky;
|
|
210
210
|
top: 0;
|
|
211
211
|
height: 100%;
|
|
@@ -215,24 +215,24 @@ a { color: var(--d-accent); }
|
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
-
.
|
|
219
|
-
.
|
|
218
|
+
.blog_side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 0; }
|
|
219
|
+
.blog_side-mark {
|
|
220
220
|
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
|
|
221
221
|
background: linear-gradient(135deg, var(--viz-1), var(--ord-4));
|
|
222
222
|
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
|
|
223
223
|
}
|
|
224
|
-
.
|
|
225
|
-
.
|
|
224
|
+
.blog_side-name { color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.2; }
|
|
225
|
+
.blog_side-role { color: var(--d-side-ink-2); font-size: 11.5px; margin-top: 1px; }
|
|
226
226
|
|
|
227
|
-
.
|
|
227
|
+
.blog_side-new, button.blog_side-new {
|
|
228
228
|
display: flex; align-items: center; justify-content: center; gap: 7px;
|
|
229
229
|
background: rgb(79, 70, 229); color: #fff; text-decoration: none;
|
|
230
230
|
font-size: 13.2px; font-weight: 650; padding: 9px 12px; border-radius: 8px;
|
|
231
231
|
height: 38px; border: none; cursor: pointer; width: 100%;
|
|
232
232
|
}
|
|
233
|
-
.
|
|
233
|
+
.blog_side-new:hover, button.blog_side-new:hover { filter: brightness(1.08); }
|
|
234
234
|
|
|
235
|
-
.
|
|
235
|
+
.blog_side-scroll {
|
|
236
236
|
display: flex;
|
|
237
237
|
flex-direction: column;
|
|
238
238
|
gap: 18px;
|
|
@@ -246,69 +246,69 @@ a { color: var(--d-accent); }
|
|
|
246
246
|
scrollbar-width: thin;
|
|
247
247
|
scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
|
|
248
248
|
}
|
|
249
|
-
.
|
|
250
|
-
.
|
|
251
|
-
.
|
|
249
|
+
.blog_side-scroll::-webkit-scrollbar { width: 6px; }
|
|
250
|
+
.blog_side-scroll::-webkit-scrollbar-track { background: transparent; }
|
|
251
|
+
.blog_side-scroll::-webkit-scrollbar-thumb {
|
|
252
252
|
background: rgba(255, 255, 255, 0.28);
|
|
253
253
|
border-radius: 999px;
|
|
254
254
|
}
|
|
255
|
-
.
|
|
256
|
-
.
|
|
257
|
-
.
|
|
255
|
+
.blog_side-brand, .blog_side-new, .blog_side-foot { flex: 0 0 auto; }
|
|
256
|
+
.blog_side-group { display: flex; flex-direction: column; gap: 4px; }
|
|
257
|
+
.blog_side-sect {
|
|
258
258
|
font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
|
|
259
259
|
color: var(--d-side-ink-2); padding: 0 8px; margin: 0 0 2px;
|
|
260
260
|
}
|
|
261
|
-
.
|
|
262
|
-
.
|
|
261
|
+
.blog_side-nav { display: flex; flex-direction: column; gap: 1px; }
|
|
262
|
+
.blog_side-nav a, .blog_side-nav button {
|
|
263
263
|
display: flex; align-items: center; gap: 10px;
|
|
264
264
|
padding: 8px 10px; border-radius: 7px;
|
|
265
265
|
color: var(--d-side-ink); text-decoration: none; font-size: 13.4px; font-weight: 520;
|
|
266
266
|
}
|
|
267
|
-
.
|
|
268
|
-
.
|
|
269
|
-
.
|
|
270
|
-
.
|
|
267
|
+
.blog_side-nav button { font-family: inherit; background: none; border: none; cursor: pointer; text-align: left; width: 100%; }
|
|
268
|
+
.blog_side-nav a:hover, .blog_side-nav button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
|
|
269
|
+
.blog_side-nav a.blog_is-open, .blog_side-nav button.blog_is-open { color: #fff; }
|
|
270
|
+
.blog_side-nav a[aria-current='page'], .blog_side-nav button[aria-current='page'] {
|
|
271
271
|
background: rgba(255, 255, 255, 0.08);
|
|
272
272
|
color: #fff; font-weight: 650;
|
|
273
273
|
}
|
|
274
|
-
.
|
|
275
|
-
.
|
|
274
|
+
.blog_nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }
|
|
275
|
+
.blog_side-nav .blog_badge {
|
|
276
276
|
margin-left: auto; font-size: 10.8px; font-weight: 700; padding: 1px 7px;
|
|
277
277
|
border-radius: 100px; background: rgba(255, 255, 255, 0.14); color: #fff;
|
|
278
278
|
font-variant-numeric: tabular-nums;
|
|
279
279
|
}
|
|
280
|
-
.
|
|
281
|
-
.
|
|
282
|
-
.
|
|
283
|
-
.
|
|
280
|
+
.blog_side-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 20px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
|
|
281
|
+
.blog_side-sub a { font-size: 12.6px; padding: 6px 9px; font-weight: 500; color: var(--d-side-ink-2); }
|
|
282
|
+
.blog_side-sub a:hover { color: #fff; }
|
|
283
|
+
.blog_side-sub a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, 0.08); }
|
|
284
284
|
|
|
285
|
-
.
|
|
286
|
-
.
|
|
285
|
+
.blog_side-foot { margin-top: auto; padding: 12px 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
|
|
286
|
+
.blog_side-user-card {
|
|
287
287
|
display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--d-radius-sm);
|
|
288
288
|
text-decoration: none; color: inherit; transition: background 0.12s ease;
|
|
289
289
|
}
|
|
290
|
-
.
|
|
291
|
-
.
|
|
292
|
-
.
|
|
293
|
-
.
|
|
290
|
+
.blog_side-user-card:hover { background: rgba(255, 255, 255, 0.06); }
|
|
291
|
+
.blog_side-user-card.blog_is-active,
|
|
292
|
+
.blog_side-user-card[aria-current='page'] { background: rgba(255, 255, 255, 0.08); }
|
|
293
|
+
.blog_side-user-avatar {
|
|
294
294
|
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
|
|
295
295
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
296
296
|
}
|
|
297
|
-
.
|
|
297
|
+
.blog_side-user-avatar-fallback {
|
|
298
298
|
display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff;
|
|
299
299
|
font-size: 14px; font-weight: 700;
|
|
300
300
|
}
|
|
301
|
-
.
|
|
302
|
-
.
|
|
301
|
+
.blog_side-user-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
|
|
302
|
+
.blog_side-user-name {
|
|
303
303
|
font-size: 13px; font-weight: 650; color: var(--d-side-ink); line-height: 1.25;
|
|
304
304
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
305
305
|
}
|
|
306
|
-
.
|
|
306
|
+
.blog_side-user-role {
|
|
307
307
|
font-size: 11.5px; color: var(--d-side-ink-2); line-height: 1.25;
|
|
308
308
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
309
309
|
}
|
|
310
310
|
|
|
311
|
-
.
|
|
311
|
+
.blog_main {
|
|
312
312
|
min-width: 0;
|
|
313
313
|
min-height: 0;
|
|
314
314
|
height: 100%;
|
|
@@ -319,7 +319,7 @@ a { color: var(--d-accent); }
|
|
|
319
319
|
|
|
320
320
|
/* ============================ top bar ============================ */
|
|
321
321
|
|
|
322
|
-
.
|
|
322
|
+
.blog_top {
|
|
323
323
|
background: color-mix(in srgb, var(--d-surface) 88%, transparent);
|
|
324
324
|
backdrop-filter: saturate(180%) blur(8px);
|
|
325
325
|
border-bottom: 1px solid var(--d-rule);
|
|
@@ -327,11 +327,11 @@ a { color: var(--d-accent); }
|
|
|
327
327
|
gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
|
|
328
328
|
flex: 0 0 auto;
|
|
329
329
|
}
|
|
330
|
-
.
|
|
331
|
-
.
|
|
332
|
-
.
|
|
330
|
+
.blog_top h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
|
|
331
|
+
.blog_top .blog_sub { font-size: 12.5px; color: var(--d-ink-3); margin: 2px 0 0; }
|
|
332
|
+
.blog_top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
333
333
|
|
|
334
|
-
.
|
|
334
|
+
.blog_body {
|
|
335
335
|
padding: 20px 26px 72px;
|
|
336
336
|
display: flex;
|
|
337
337
|
flex-direction: column;
|
|
@@ -342,278 +342,285 @@ a { color: var(--d-accent); }
|
|
|
342
342
|
overflow-y: auto;
|
|
343
343
|
overscroll-behavior: contain;
|
|
344
344
|
}
|
|
345
|
-
.
|
|
345
|
+
.blog_body-wide { padding-left: 20px; padding-right: 20px; }
|
|
346
346
|
|
|
347
347
|
/* brand switcher */
|
|
348
|
-
.
|
|
349
|
-
.
|
|
350
|
-
.
|
|
351
|
-
.
|
|
352
|
-
.
|
|
348
|
+
.blog_menu { position: relative; }
|
|
349
|
+
.blog_menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
|
|
350
|
+
.blog_menu > summary::-webkit-details-marker { display: none; }
|
|
351
|
+
.blog_menu .blog_caret { font-size: 10px; color: var(--d-ink-3); }
|
|
352
|
+
.blog_menu-panel {
|
|
353
353
|
position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
|
|
354
354
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
355
355
|
box-shadow: var(--d-shadow-lg); padding: 5px; display: flex; flex-direction: column;
|
|
356
356
|
}
|
|
357
|
-
.
|
|
358
|
-
.
|
|
357
|
+
.blog_menu-panel a,
|
|
358
|
+
.blog_menu-panel button {
|
|
359
359
|
display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--d-radius-sm);
|
|
360
360
|
color: var(--d-ink-2); text-decoration: none; font-size: 13px; font-weight: 550;
|
|
361
361
|
border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font: inherit;
|
|
362
362
|
}
|
|
363
|
-
.
|
|
364
|
-
.
|
|
365
|
-
.
|
|
366
|
-
.
|
|
367
|
-
.
|
|
363
|
+
.blog_menu-panel a:hover,
|
|
364
|
+
.blog_menu-panel button:hover { background: var(--d-sunk); color: var(--d-ink); }
|
|
365
|
+
.blog_menu-panel a[aria-current='true'],
|
|
366
|
+
.blog_menu-panel button[aria-current='true'] { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
367
|
+
.blog_dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
|
|
368
368
|
|
|
369
369
|
/* ============================ buttons ============================ */
|
|
370
370
|
|
|
371
|
-
.
|
|
371
|
+
.blog_btn {
|
|
372
372
|
font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
|
|
373
373
|
padding: 7px 13px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule);
|
|
374
374
|
color: var(--d-ink-2); background: var(--d-surface); white-space: nowrap; cursor: pointer;
|
|
375
375
|
display: inline-flex; align-items: center; gap: 6px; line-height: 1.35;
|
|
376
376
|
}
|
|
377
|
-
.
|
|
378
|
-
.
|
|
379
|
-
.
|
|
380
|
-
.
|
|
377
|
+
.blog_btn { transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; }
|
|
378
|
+
.blog_btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
|
|
379
|
+
.blog_btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
380
|
+
.blog_btn-primary {
|
|
381
381
|
background: var(--d-accent); border-color: var(--d-accent); color: #fff;
|
|
382
382
|
box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--d-accent) 90%, transparent);
|
|
383
383
|
}
|
|
384
|
-
.
|
|
385
|
-
.
|
|
386
|
-
.
|
|
387
|
-
.
|
|
388
|
-
.
|
|
389
|
-
.
|
|
384
|
+
.blog_btn-primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); background: var(--d-accent); }
|
|
385
|
+
.blog_btn-ghost { border-style: dashed; color: var(--d-ink-3); }
|
|
386
|
+
.blog_btn-tiny { font-size: 12px; padding: 4px 9px; }
|
|
387
|
+
.blog_btn-block { width: 100%; justify-content: center; }
|
|
388
|
+
.blog_btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
389
|
+
.blog_icon-btn {
|
|
390
390
|
font: inherit; border: 0; background: transparent; color: var(--d-ink-3); cursor: pointer;
|
|
391
391
|
width: 30px; height: 30px; border-radius: var(--d-radius-sm); display: grid; place-items: center;
|
|
392
392
|
}
|
|
393
|
-
.
|
|
394
|
-
.
|
|
393
|
+
.blog_icon-btn:hover { background: var(--d-sunk); color: var(--d-ink); }
|
|
394
|
+
.blog_btn-danger-link {
|
|
395
395
|
font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none;
|
|
396
396
|
color: var(--d-crit); cursor: pointer; padding: 0; text-align: left; text-decoration: underline;
|
|
397
397
|
text-underline-offset: 2px;
|
|
398
398
|
}
|
|
399
|
-
.
|
|
399
|
+
.blog_btn-danger-link:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
400
400
|
|
|
401
|
-
.
|
|
402
|
-
.
|
|
401
|
+
.blog_seg { display: inline-flex; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden; }
|
|
402
|
+
.blog_seg a {
|
|
403
403
|
font-size: 12.5px; font-weight: 600; padding: 6px 11px; text-decoration: none;
|
|
404
404
|
color: var(--d-ink-3); background: var(--d-surface); border-right: 1px solid var(--d-rule);
|
|
405
405
|
}
|
|
406
|
-
.
|
|
407
|
-
.
|
|
406
|
+
.blog_seg a:last-child { border-right: 0; }
|
|
407
|
+
.blog_seg a[aria-current='true'] { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
408
408
|
|
|
409
409
|
/* ============================ stat cards ============================ */
|
|
410
410
|
|
|
411
|
-
.
|
|
412
|
-
.
|
|
411
|
+
.blog_kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
|
|
412
|
+
.blog_kpi {
|
|
413
413
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
414
414
|
padding: 15px 17px; box-shadow: var(--d-shadow);
|
|
415
415
|
display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit;
|
|
416
416
|
}
|
|
417
|
-
.
|
|
418
|
-
a.
|
|
419
|
-
.
|
|
420
|
-
.
|
|
421
|
-
.
|
|
422
|
-
.
|
|
423
|
-
.
|
|
424
|
-
.
|
|
425
|
-
.
|
|
426
|
-
.
|
|
427
|
-
.
|
|
428
|
-
.
|
|
417
|
+
.blog_kpi { transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
|
|
418
|
+
a.blog_kpi:hover { border-color: var(--d-accent); transform: translateY(-1px); box-shadow: var(--d-shadow-lg); }
|
|
419
|
+
.blog_kpi-l { font-size: 11px; font-weight: 680; letter-spacing: 0.09em; text-transform: uppercase; color: var(--d-ink-3); }
|
|
420
|
+
.blog_kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
|
|
421
|
+
.blog_kpi-n { font-size: 29px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; font-variant-numeric: tabular-nums; }
|
|
422
|
+
.blog_kpi-delta { font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 5px; }
|
|
423
|
+
.blog_kpi-delta.blog_up { color: var(--d-delta-up); }
|
|
424
|
+
.blog_kpi-delta.blog_down { color: var(--d-crit); }
|
|
425
|
+
.blog_kpi-delta.blog_flat { color: var(--d-ink-3); }
|
|
426
|
+
.blog_kpi-delta-sub { color: var(--d-ink-3); font-weight: 400; }
|
|
427
|
+
.blog_kpi-sub { font-size: 12px; color: var(--d-ink-3); }
|
|
428
|
+
.blog_spark { width: 120px; height: 32px; display: block; }
|
|
429
429
|
|
|
430
430
|
/* ============================ panels ============================ */
|
|
431
431
|
|
|
432
|
-
.
|
|
433
|
-
@media (min-width: 1160px) { .
|
|
434
|
-
@media (min-width: 1160px) { .
|
|
435
|
-
@media (min-width: 820px) and (max-width: 1159px) { .
|
|
432
|
+
.blog_grid { display: grid; gap: 16px; }
|
|
433
|
+
@media (min-width: 1160px) { .blog_grid-2 { grid-template-columns: 1.55fr 1fr; } }
|
|
434
|
+
@media (min-width: 1160px) { .blog_grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
|
|
435
|
+
@media (min-width: 820px) and (max-width: 1159px) { .blog_grid-3 { grid-template-columns: 1fr 1fr; } }
|
|
436
436
|
|
|
437
|
-
.
|
|
437
|
+
.blog_panel {
|
|
438
438
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
439
439
|
box-shadow: var(--d-shadow); overflow: hidden; display: flex; flex-direction: column;
|
|
440
440
|
}
|
|
441
|
-
.
|
|
441
|
+
.blog_panel-head {
|
|
442
442
|
padding: 13px 17px; border-bottom: 1px solid var(--d-rule);
|
|
443
443
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
444
444
|
background: var(--d-surface);
|
|
445
445
|
}
|
|
446
|
-
.
|
|
447
|
-
.
|
|
448
|
-
.
|
|
449
|
-
.
|
|
450
|
-
.
|
|
451
|
-
.
|
|
452
|
-
.
|
|
453
|
-
@media (min-width: 1000px) { .
|
|
454
|
-
.
|
|
446
|
+
.blog_panel-head h2 { font-size: 13.5px; font-weight: 680; letter-spacing: -0.005em; margin: 0; display: flex; gap: 8px; align-items: baseline; }
|
|
447
|
+
.blog_panel-head .blog_hint { font-size: 11.5px; color: var(--d-ink-3); font-weight: 500; }
|
|
448
|
+
.blog_hint-link { font-size: 12px; color: var(--d-accent); text-decoration: none; font-weight: 600; }
|
|
449
|
+
.blog_hint-link:hover { text-decoration: underline; }
|
|
450
|
+
.blog_panel-body { padding: 15px 17px; }
|
|
451
|
+
.blog_panel-body.blog_flush { padding: 0; }
|
|
452
|
+
.blog_split { display: grid; gap: 16px; align-items: start; }
|
|
453
|
+
@media (min-width: 1000px) { .blog_split { grid-template-columns: 340px 1fr; } }
|
|
454
|
+
.blog_panel-form { position: sticky; top: 86px; }
|
|
455
455
|
|
|
456
456
|
/* ============================ charts ============================ */
|
|
457
457
|
|
|
458
|
-
.
|
|
459
|
-
.
|
|
460
|
-
.
|
|
461
|
-
.
|
|
458
|
+
.blog_chart-holder { position: relative; }
|
|
459
|
+
.blog_chart-svg { display: block; width: 100%; height: auto; }
|
|
460
|
+
.blog_axis-label { font-size: 10.5px; font-family: var(--d-ui); font-variant-numeric: tabular-nums; }
|
|
461
|
+
.blog_chart-tip {
|
|
462
462
|
position: absolute; top: 4px; transform: translateX(-50%);
|
|
463
463
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
464
464
|
box-shadow: var(--d-shadow); padding: 8px 11px; pointer-events: none; min-width: 116px;
|
|
465
465
|
font-size: 12.5px;
|
|
466
466
|
}
|
|
467
|
-
.
|
|
468
|
-
.
|
|
469
|
-
.
|
|
470
|
-
.
|
|
471
|
-
|
|
472
|
-
.
|
|
473
|
-
.
|
|
474
|
-
.
|
|
475
|
-
.
|
|
476
|
-
.
|
|
477
|
-
.
|
|
478
|
-
.
|
|
479
|
-
.
|
|
480
|
-
|
|
481
|
-
.
|
|
482
|
-
.
|
|
483
|
-
.
|
|
484
|
-
.
|
|
485
|
-
.
|
|
486
|
-
.
|
|
467
|
+
.blog_tip-date { font-weight: 700; margin-bottom: 3px; font-size: 12px; }
|
|
468
|
+
.blog_tip-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
|
|
469
|
+
.blog_tip-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
|
|
470
|
+
.blog_tip-sub { color: var(--d-ink-3); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
|
|
471
|
+
|
|
472
|
+
.blog_barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
|
|
473
|
+
.blog_bl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
|
|
474
|
+
.blog_bl-link { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; text-decoration: none; color: inherit; }
|
|
475
|
+
.blog_bl-link:hover .blog_bl-label { color: var(--d-accent); }
|
|
476
|
+
.blog_bl-label { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
477
|
+
.blog_bl-value { font-size: 12.5px; font-weight: 700; color: var(--d-ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
|
|
478
|
+
.blog_bl-track { height: 7px; background: var(--d-sunk); border-radius: 4px; overflow: hidden; }
|
|
479
|
+
.blog_bl-fill { height: 100%; border-radius: 4px; }
|
|
480
|
+
|
|
481
|
+
.blog_funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
|
|
482
|
+
.blog_fn-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
|
|
483
|
+
.blog_fn-label { font-size: 13px; font-weight: 550; }
|
|
484
|
+
.blog_fn-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
485
|
+
.blog_fn-track { height: 9px; background: var(--d-sunk); border-radius: 5px; overflow: hidden; }
|
|
486
|
+
.blog_fn-fill { height: 100%; border-radius: 5px; }
|
|
487
487
|
|
|
488
488
|
/* ============================ rows ============================ */
|
|
489
489
|
|
|
490
|
-
.
|
|
490
|
+
.blog_row {
|
|
491
491
|
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
|
|
492
492
|
align-items: start; padding: 12px 17px; border-bottom: 1px solid var(--d-rule-2);
|
|
493
493
|
}
|
|
494
|
-
.
|
|
495
|
-
.
|
|
496
|
-
.
|
|
497
|
-
.
|
|
498
|
-
.
|
|
499
|
-
.
|
|
494
|
+
.blog_row:last-child { border-bottom: 0; }
|
|
495
|
+
.blog_row:hover { background: var(--d-surface-2); }
|
|
496
|
+
.blog_row-main a.blog_t { font-size: 14px; font-weight: 620; color: var(--d-ink); text-decoration: none; letter-spacing: -0.005em; }
|
|
497
|
+
.blog_row-main a.blog_t:hover { color: var(--d-accent); }
|
|
498
|
+
.blog_row-sub { font-size: 12.2px; color: var(--d-ink-3); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
|
|
499
|
+
.blog_row-right { display: flex; gap: 7px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
|
|
500
500
|
|
|
501
501
|
/* ============================ chips ============================ */
|
|
502
502
|
|
|
503
|
-
.
|
|
503
|
+
.blog_chip {
|
|
504
504
|
display: inline-flex; align-items: center; gap: 4px;
|
|
505
505
|
font-size: 10.6px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase;
|
|
506
506
|
padding: 3px 8px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap;
|
|
507
507
|
}
|
|
508
|
-
.
|
|
509
|
-
.
|
|
510
|
-
.
|
|
511
|
-
.
|
|
512
|
-
.
|
|
513
|
-
.
|
|
514
|
-
.
|
|
508
|
+
.blog_chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
|
509
|
+
.blog_chip-review { background: var(--d-warn-soft); color: var(--d-warn); border-color: var(--d-warn); }
|
|
510
|
+
.blog_chip-writing { background: var(--d-sunk); color: var(--d-ink-3); border-color: var(--d-rule); }
|
|
511
|
+
.blog_chip-approved { background: var(--d-accent-soft); color: var(--d-accent-ink); border-color: var(--d-accent); }
|
|
512
|
+
.blog_chip-live { background: var(--d-good-soft); color: var(--d-good); border-color: var(--d-good); }
|
|
513
|
+
.blog_chip-blocked { background: var(--d-crit-soft); color: var(--d-crit); border-color: var(--d-crit); }
|
|
514
|
+
.blog_chip-brand { background: transparent; color: var(--d-ink-3); border-color: var(--d-rule); text-transform: none; letter-spacing: 0; font-weight: 600; }
|
|
515
515
|
|
|
516
|
-
.
|
|
517
|
-
.
|
|
518
|
-
.
|
|
516
|
+
.blog_blockers { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 3px 14px; }
|
|
517
|
+
.blog_blockers li { font-size: 12px; color: var(--d-crit); }
|
|
518
|
+
.blog_blockers li::before { content: '✕ '; font-weight: 700; }
|
|
519
519
|
|
|
520
520
|
/* ============================ tables ============================ */
|
|
521
521
|
|
|
522
|
-
.
|
|
523
|
-
table.
|
|
524
|
-
.
|
|
525
|
-
.
|
|
522
|
+
.blog_tw { overflow-x: auto; }
|
|
523
|
+
table.blog_tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.2px; }
|
|
524
|
+
.blog_tbl th, .blog_tbl td { text-align: left; padding: 11px 17px; border-bottom: 1px solid var(--d-rule-2); vertical-align: top; }
|
|
525
|
+
.blog_tbl th {
|
|
526
526
|
font-size: 10.6px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
|
|
527
527
|
color: var(--d-ink-3); background: var(--d-sunk); white-space: nowrap; vertical-align: middle;
|
|
528
528
|
position: sticky; top: 0; z-index: 1;
|
|
529
529
|
}
|
|
530
|
-
.
|
|
531
|
-
.
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
.
|
|
538
|
-
.
|
|
539
|
-
.
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
530
|
+
.blog_tbl tbody tr:last-child td { border-bottom: 0; }
|
|
531
|
+
.blog_tbl tbody tr.blog_tbl-row-pad td {
|
|
532
|
+
height: 44px;
|
|
533
|
+
padding-top: 11px;
|
|
534
|
+
padding-bottom: 11px;
|
|
535
|
+
border-bottom: 1px solid var(--d-rule-2);
|
|
536
|
+
}
|
|
537
|
+
.blog_tbl tbody tr.blog_tbl-row-pad:hover { background: transparent; }
|
|
538
|
+
.blog_tbl tbody tr:hover { background: var(--d-surface-2); }
|
|
539
|
+
.blog_tbl tbody tr.blog_is-selected { background: var(--d-accent-soft); }
|
|
540
|
+
.blog_tbl td.blog_num, .blog_tbl th.blog_num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
|
|
541
|
+
.blog_tbl a { text-decoration: none; font-weight: 620; color: var(--d-ink); }
|
|
542
|
+
.blog_tbl a:hover { color: var(--d-accent); }
|
|
543
|
+
.blog_col-check { width: 34px; padding-right: 0; }
|
|
544
|
+
.blog_col-narrow { width: 1%; white-space: nowrap; }
|
|
545
|
+
.blog_col-title { min-width: 280px; }
|
|
546
|
+
.blog_row-title { font-size: 13.8px; font-weight: 640; color: var(--d-ink); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; letter-spacing: -0.005em; }
|
|
547
|
+
a.blog_row-title:hover,
|
|
548
|
+
button.blog_row-title:hover { color: var(--d-accent); }
|
|
549
|
+
button.blog_row-title {
|
|
543
550
|
border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left;
|
|
544
551
|
}
|
|
545
|
-
.
|
|
546
|
-
.
|
|
547
|
-
.
|
|
548
|
-
.
|
|
549
|
-
.
|
|
550
|
-
.
|
|
552
|
+
.blog_cell-sub { display: block; font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
|
|
553
|
+
.blog_cell-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--d-ink-3); font-weight: 650; }
|
|
554
|
+
.blog_mini-track { height: 6px; background: var(--d-sunk); border-radius: 3px; overflow: hidden; min-width: 80px; flex: 1; }
|
|
555
|
+
.blog_mini-fill { height: 100%; border-radius: 3px; background: var(--viz-1); display: block; }
|
|
556
|
+
.blog_bar-cell { display: flex; align-items: center; gap: 10px; }
|
|
557
|
+
.blog_bar-cell-n { font-variant-numeric: tabular-nums; min-width: 46px; font-weight: 600; }
|
|
551
558
|
|
|
552
559
|
/* WordPress-style hover actions: present when needed, quiet when not */
|
|
553
|
-
.
|
|
554
|
-
tr:hover .
|
|
555
|
-
@media (hover: none) { .
|
|
556
|
-
.
|
|
560
|
+
.blog_row-actions { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; opacity: 0; transition: opacity 0.12s ease; }
|
|
561
|
+
tr:hover .blog_row-actions, tr:focus-within .blog_row-actions, .blog_row-actions:focus-within { opacity: 1; }
|
|
562
|
+
@media (hover: none) { .blog_row-actions { opacity: 1; } }
|
|
563
|
+
.blog_row-actions button, .blog_row-actions a {
|
|
557
564
|
font: inherit; font-size: 12.2px; font-weight: 550; border: 0; background: none; padding: 0;
|
|
558
565
|
color: var(--d-accent); cursor: pointer; text-decoration: none;
|
|
559
566
|
}
|
|
560
|
-
.
|
|
561
|
-
.
|
|
562
|
-
.
|
|
567
|
+
.blog_row-actions button:hover, .blog_row-actions a:hover { text-decoration: underline; }
|
|
568
|
+
.blog_row-actions button:disabled { color: var(--d-ink-3); cursor: not-allowed; text-decoration: none; }
|
|
569
|
+
.blog_row-actions .blog_danger { color: var(--d-crit); }
|
|
563
570
|
|
|
564
|
-
.
|
|
565
|
-
.
|
|
571
|
+
.blog_list { display: flex; flex-direction: column; }
|
|
572
|
+
.blog_list-bar {
|
|
566
573
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
567
574
|
padding: 11px 17px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2); flex-wrap: wrap;
|
|
568
575
|
}
|
|
569
|
-
.
|
|
576
|
+
.blog_bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
570
577
|
|
|
571
|
-
.
|
|
572
|
-
.
|
|
573
|
-
.
|
|
574
|
-
.
|
|
575
|
-
.
|
|
576
|
-
.
|
|
577
|
-
.
|
|
578
|
-
.
|
|
578
|
+
.blog_quick-row td { background: var(--d-sunk); }
|
|
579
|
+
.blog_quick { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
|
|
580
|
+
.blog_quick-head { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-ink-3); }
|
|
581
|
+
.blog_quick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
|
|
582
|
+
.blog_quick-grid label, .blog_fld-row { display: flex; flex-direction: column; gap: 5px; }
|
|
583
|
+
.blog_quick-grid label > span, .blog_fld-lbl { font-size: 11.6px; font-weight: 650; color: var(--d-ink-2); }
|
|
584
|
+
.blog_quick-grid .blog_span-2 { grid-column: span 2; }
|
|
585
|
+
.blog_inline-form { display: flex; gap: 7px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
|
|
579
586
|
|
|
580
587
|
/* ============================ tabs + filters ============================ */
|
|
581
588
|
|
|
582
|
-
.
|
|
583
|
-
.
|
|
584
|
-
.
|
|
589
|
+
.blog_tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--d-rule); }
|
|
590
|
+
.blog_tabs a,
|
|
591
|
+
.blog_tabs button {
|
|
585
592
|
display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
|
|
586
593
|
font-size: 13px; font-weight: 600; color: var(--d-ink-3); text-decoration: none;
|
|
587
594
|
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
588
595
|
border-top: 0; border-left: 0; border-right: 0; background: none; cursor: pointer; font: inherit;
|
|
589
596
|
}
|
|
590
|
-
.
|
|
591
|
-
.
|
|
592
|
-
.
|
|
593
|
-
.
|
|
594
|
-
.
|
|
597
|
+
.blog_tabs a:hover,
|
|
598
|
+
.blog_tabs button:hover { color: var(--d-ink); }
|
|
599
|
+
.blog_tabs a[aria-current='true'],
|
|
600
|
+
.blog_tabs button[aria-current='true'] { color: var(--d-accent-ink); border-bottom-color: var(--d-accent); }
|
|
601
|
+
.blog_tab-count {
|
|
595
602
|
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
|
|
596
603
|
background: var(--d-sunk); color: var(--d-ink-3); border-radius: 100px; padding: 1px 7px;
|
|
597
604
|
}
|
|
598
|
-
.
|
|
599
|
-
.
|
|
605
|
+
.blog_tabs a[aria-current='true'] .blog_tab-count,
|
|
606
|
+
.blog_tabs button[aria-current='true'] .blog_tab-count { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
600
607
|
|
|
601
|
-
.
|
|
602
|
-
.
|
|
603
|
-
.
|
|
608
|
+
.blog_filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
609
|
+
.blog_filterbar .blog_fld { min-width: 180px; }
|
|
610
|
+
.blog_pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
604
611
|
|
|
605
612
|
/* ============================ forms ============================ */
|
|
606
613
|
|
|
607
|
-
.
|
|
614
|
+
.blog_fld {
|
|
608
615
|
font: inherit; font-size: 13.2px; padding: 8px 11px; border-radius: var(--d-radius-sm);
|
|
609
616
|
border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-ink);
|
|
610
617
|
width: 100%; max-width: 100%;
|
|
611
618
|
}
|
|
612
|
-
.
|
|
613
|
-
.
|
|
614
|
-
.
|
|
615
|
-
.
|
|
616
|
-
select.
|
|
619
|
+
.blog_fld:focus { outline: none; border-color: var(--d-accent); box-shadow: var(--d-ring); }
|
|
620
|
+
.blog_fld:disabled { background: var(--d-sunk); color: var(--d-ink-3); cursor: not-allowed; }
|
|
621
|
+
.blog_fld-sm { font-size: 12.4px; padding: 5px 9px; width: auto; }
|
|
622
|
+
.blog_fld-inline { width: auto; min-width: 160px; }
|
|
623
|
+
select.blog_fld {
|
|
617
624
|
width: auto;
|
|
618
625
|
min-width: 140px;
|
|
619
626
|
padding-right: 2rem;
|
|
@@ -624,32 +631,32 @@ select.fld {
|
|
|
624
631
|
background-position: right 0.7rem center;
|
|
625
632
|
background-size: 12px 8px;
|
|
626
633
|
}
|
|
627
|
-
textarea.
|
|
628
|
-
.
|
|
629
|
-
.
|
|
630
|
-
.
|
|
631
|
-
.
|
|
632
|
-
.
|
|
633
|
-
.
|
|
634
|
-
.
|
|
634
|
+
textarea.blog_fld { resize: vertical; line-height: 1.55; }
|
|
635
|
+
.blog_fld-lbl em { font-style: normal; font-weight: 450; color: var(--d-ink-3); }
|
|
636
|
+
.blog_fld.blog_is-invalid { border-color: var(--d-crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-crit) 18%, transparent); }
|
|
637
|
+
.blog_fld-error { display: block; margin-top: 6px; font-size: 12.4px; color: var(--d-crit); }
|
|
638
|
+
.blog_fld-hint { display: block; margin-top: 6px; font-size: 12.2px; color: var(--d-ink-3); }
|
|
639
|
+
.blog_fld-checks { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--d-ink-2); }
|
|
640
|
+
.blog_fld-checks label { display: flex; gap: 8px; align-items: center; }
|
|
641
|
+
.blog_stack { display: flex; flex-direction: column; gap: 12px; }
|
|
635
642
|
|
|
636
|
-
.
|
|
643
|
+
.blog_form-error {
|
|
637
644
|
margin: 0; font-size: 12.8px; color: var(--d-crit); background: var(--d-crit-soft);
|
|
638
645
|
border: 1px solid var(--d-crit); border-radius: var(--d-radius-sm); padding: 9px 12px;
|
|
639
646
|
}
|
|
640
|
-
.
|
|
647
|
+
.blog_form-ok {
|
|
641
648
|
margin: 0; font-size: 12.8px; color: var(--d-good); background: var(--d-good-soft);
|
|
642
649
|
border: 1px solid var(--d-good); border-radius: var(--d-radius-sm); padding: 9px 12px;
|
|
643
650
|
}
|
|
644
|
-
.
|
|
651
|
+
.blog_form-ok.blog_inline { padding: 4px 9px; font-size: 12px; }
|
|
645
652
|
|
|
646
|
-
.
|
|
653
|
+
.blog_dashboard-toast-container {
|
|
647
654
|
top: 18px !important;
|
|
648
655
|
right: 22px !important;
|
|
649
656
|
width: min(360px, calc(100vw - 32px));
|
|
650
657
|
}
|
|
651
658
|
|
|
652
|
-
.
|
|
659
|
+
.blog_dashboard-toast.blog_Toastify__toast--success {
|
|
653
660
|
font-family: inherit;
|
|
654
661
|
font-size: 13px;
|
|
655
662
|
font-weight: 650;
|
|
@@ -657,102 +664,102 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
657
664
|
box-shadow: var(--d-shadow-lg);
|
|
658
665
|
}
|
|
659
666
|
|
|
660
|
-
.
|
|
667
|
+
.blog_banner {
|
|
661
668
|
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
|
|
662
669
|
padding: 12px 16px; border-radius: var(--d-radius); font-size: 13px;
|
|
663
670
|
}
|
|
664
|
-
.
|
|
671
|
+
.blog_banner-warn { background: var(--d-warn-soft); border: 1px solid var(--d-warn); color: var(--d-ink-2); }
|
|
665
672
|
|
|
666
|
-
.
|
|
667
|
-
.
|
|
668
|
-
.
|
|
673
|
+
.blog_d-empty { padding: 22px 18px; color: var(--d-ink-3); font-size: 13px; margin: 0; }
|
|
674
|
+
.blog_note { font-size: 12px; color: var(--d-ink-3); margin: 0; }
|
|
675
|
+
.blog_explain {
|
|
669
676
|
font-size: 12.6px; color: var(--d-ink-3); background: var(--d-sunk);
|
|
670
677
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius); padding: 11px 14px; margin: 0;
|
|
671
678
|
}
|
|
672
|
-
.
|
|
679
|
+
.blog_explain b { color: var(--d-ink-2); font-weight: 650; }
|
|
673
680
|
|
|
674
|
-
.
|
|
675
|
-
.
|
|
681
|
+
.blog_settings { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
|
|
682
|
+
.blog_save-bar {
|
|
676
683
|
position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
|
|
677
684
|
gap: 12px; background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
678
685
|
padding: 11px 16px; box-shadow: var(--d-shadow-lg); flex-wrap: wrap;
|
|
679
686
|
}
|
|
680
|
-
.
|
|
681
|
-
.
|
|
682
|
-
.
|
|
683
|
-
.
|
|
684
|
-
.
|
|
687
|
+
.blog_colour-row { display: flex; gap: 8px; align-items: center; }
|
|
688
|
+
.blog_colour { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface); cursor: pointer; }
|
|
689
|
+
.blog_role-grid { display: flex; flex-direction: column; gap: 8px; }
|
|
690
|
+
.blog_role-row { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: 8px 12px; align-items: center; font-size: 13px; }
|
|
691
|
+
.blog_role-row .blog_note { grid-column: 1 / -1; }
|
|
685
692
|
|
|
686
693
|
/* ============================ post editor ============================ */
|
|
687
694
|
|
|
688
|
-
.
|
|
695
|
+
.blog_skip-link {
|
|
689
696
|
position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
|
|
690
697
|
}
|
|
691
|
-
.
|
|
698
|
+
.blog_skip-link:focus {
|
|
692
699
|
position: fixed; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; overflow: visible;
|
|
693
700
|
padding: 8px 14px; background: var(--d-accent); color: #fff; border-radius: var(--d-radius-sm);
|
|
694
701
|
font-size: 13px; font-weight: 650; text-decoration: none; box-shadow: var(--d-shadow);
|
|
695
702
|
}
|
|
696
|
-
.
|
|
703
|
+
.blog_screen-reader {
|
|
697
704
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
|
|
698
705
|
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
|
699
706
|
}
|
|
700
|
-
.
|
|
707
|
+
.blog_ed-title-wrap { display: contents; }
|
|
701
708
|
|
|
702
|
-
.
|
|
709
|
+
.blog_ed-wp-header {
|
|
703
710
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
704
711
|
margin-bottom: 4px; font-size: 13px; color: var(--d-ink-3);
|
|
705
712
|
}
|
|
706
|
-
.
|
|
713
|
+
.blog_ed-wp-header-meta .blog_is-dirty { color: var(--d-warn); font-weight: 650; }
|
|
707
714
|
|
|
708
|
-
.
|
|
715
|
+
.blog_ed-bar {
|
|
709
716
|
position: sticky; top: 8px; z-index: 20; display: flex; align-items: center;
|
|
710
717
|
justify-content: space-between; gap: 12px; flex-wrap: wrap;
|
|
711
718
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
712
719
|
padding: 9px 13px; box-shadow: var(--d-shadow);
|
|
713
720
|
}
|
|
714
|
-
.
|
|
715
|
-
.
|
|
716
|
-
.
|
|
717
|
-
.
|
|
721
|
+
.blog_ed-bar-left, .blog_ed-bar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
|
722
|
+
.blog_ed-bar-meta { font-size: 12.2px; color: var(--d-ink-3); }
|
|
723
|
+
.blog_ed-bar-meta .blog_is-dirty { color: var(--d-warn); font-weight: 650; }
|
|
724
|
+
.blog_ed-error { margin-top: -6px; }
|
|
718
725
|
|
|
719
|
-
.
|
|
720
|
-
@media (min-width: 1100px) { .
|
|
721
|
-
.
|
|
722
|
-
.
|
|
726
|
+
.blog_ed-layout { display: grid; gap: 16px; align-items: start; }
|
|
727
|
+
@media (min-width: 1100px) { .blog_ed-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
|
|
728
|
+
.blog_ed-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
|
|
729
|
+
.blog_ed-side { display: flex; flex-direction: column; gap: 14px; }
|
|
723
730
|
/* A sticky column, but never a squashed one: without `flex: 0 0 auto` the boxes
|
|
724
731
|
shrink to fit the column and `overflow: hidden` silently eats their content. */
|
|
725
|
-
.
|
|
726
|
-
@media (min-width: 1100px) { .
|
|
732
|
+
.blog_ed-side > * { flex: 0 0 auto; }
|
|
733
|
+
@media (min-width: 1100px) { .blog_ed-side { position: sticky; top: 12px; align-self: start; } }
|
|
727
734
|
|
|
728
|
-
.
|
|
735
|
+
.blog_ed-title {
|
|
729
736
|
font: inherit; font-size: 1.7em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
|
|
730
737
|
padding: 8px 0 12px; border: 0; border-radius: 0;
|
|
731
738
|
background: transparent; color: var(--d-ink); width: 100%; box-shadow: none;
|
|
732
739
|
}
|
|
733
|
-
.
|
|
734
|
-
.
|
|
740
|
+
.blog_ed-title:focus { outline: none; box-shadow: none; border-bottom: 1px solid var(--d-accent); }
|
|
741
|
+
.blog_ed-title::placeholder { color: var(--d-ink-3); font-weight: 600; }
|
|
735
742
|
|
|
736
|
-
.
|
|
737
|
-
.
|
|
738
|
-
.
|
|
743
|
+
.blog_ed-permalink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.6px; color: var(--d-ink-3); padding: 0 3px; }
|
|
744
|
+
.blog_ed-permalink .blog_lbl { font-weight: 650; color: var(--d-ink-2); }
|
|
745
|
+
.blog_ed-permalink-value { color: var(--d-accent-ink); }
|
|
739
746
|
|
|
740
747
|
/* `overflow: clip` (not `hidden`) keeps rounded corners flush with the card
|
|
741
748
|
border without creating a scroll container that would trap the sticky toolbar. */
|
|
742
|
-
.
|
|
749
|
+
.blog_ed {
|
|
743
750
|
border: 1px solid var(--d-rule);
|
|
744
751
|
border-radius: var(--d-radius);
|
|
745
752
|
background: var(--d-surface);
|
|
746
753
|
box-shadow: var(--d-shadow);
|
|
747
754
|
overflow: clip;
|
|
748
755
|
}
|
|
749
|
-
.
|
|
756
|
+
.blog_ed-chrome {
|
|
750
757
|
border-radius: var(--d-radius) var(--d-radius) 0 0;
|
|
751
758
|
background: var(--d-surface-2);
|
|
752
759
|
overflow: clip;
|
|
753
760
|
}
|
|
754
761
|
/* Stick the Visual/Code + formatting bar under the dashboard top bar while editing */
|
|
755
|
-
.
|
|
762
|
+
.blog_ed.blog_is-active .blog_ed-chrome {
|
|
756
763
|
position: sticky;
|
|
757
764
|
top: 64px;
|
|
758
765
|
z-index: 25;
|
|
@@ -760,24 +767,24 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
760
767
|
border-bottom: 1px solid var(--d-rule);
|
|
761
768
|
border-radius: 0; /* flush under the sticky top bar when active */
|
|
762
769
|
}
|
|
763
|
-
.
|
|
770
|
+
.blog_ed-toolbar {
|
|
764
771
|
display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
|
|
765
772
|
padding: 7px 9px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
|
|
766
773
|
border-radius: 0;
|
|
767
774
|
}
|
|
768
|
-
.
|
|
775
|
+
.blog_tb-btn {
|
|
769
776
|
font: inherit; font-size: 13px; min-width: 30px; height: 30px; padding: 0 7px;
|
|
770
777
|
border: 1px solid transparent; border-radius: var(--d-radius-sm); background: transparent;
|
|
771
778
|
color: var(--d-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
|
|
772
779
|
}
|
|
773
|
-
.
|
|
774
|
-
.
|
|
775
|
-
.
|
|
776
|
-
.
|
|
777
|
-
.
|
|
780
|
+
.blog_tb-btn:hover { background: var(--d-sunk); color: var(--d-ink); }
|
|
781
|
+
.blog_tb-btn.blog_is-on { background: var(--d-accent-soft); color: var(--d-accent-ink); border-color: var(--d-accent); }
|
|
782
|
+
.blog_tb-select { font: inherit; font-size: 12.6px; padding: 5px 8px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-ink); }
|
|
783
|
+
.blog_tb-sep { width: 1px; height: 18px; background: var(--d-rule); margin: 0 5px; }
|
|
784
|
+
.blog_tb-count { margin-left: auto; font-size: 11.6px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
|
|
778
785
|
|
|
779
|
-
.
|
|
780
|
-
.
|
|
786
|
+
.blog_ed-link { border-bottom: 1px solid var(--d-rule); background: var(--d-sunk); padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
|
|
787
|
+
.blog_ed-link-popover {
|
|
781
788
|
position: fixed; z-index: 10000; width: min(360px, calc(100vw - 16px));
|
|
782
789
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
783
790
|
box-shadow: 0 12px 40px rgba(16, 18, 32, 0.22); padding: 12px 13px;
|
|
@@ -786,47 +793,47 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
786
793
|
scrollbar-width: none;
|
|
787
794
|
-ms-overflow-style: none;
|
|
788
795
|
}
|
|
789
|
-
.
|
|
790
|
-
.
|
|
796
|
+
.blog_ed-link-popover::-webkit-scrollbar { display: none; }
|
|
797
|
+
.blog_ed-link-popover::before {
|
|
791
798
|
content: ''; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px;
|
|
792
799
|
background: var(--d-surface); border-left: 1px solid var(--d-rule); border-top: 1px solid var(--d-rule);
|
|
793
800
|
transform: rotate(45deg);
|
|
794
801
|
}
|
|
795
|
-
.
|
|
802
|
+
.blog_ed-link-selection {
|
|
796
803
|
margin: 0; font-size: 12.5px; color: var(--d-ink-2); font-style: italic;
|
|
797
804
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
798
805
|
}
|
|
799
|
-
.
|
|
800
|
-
.
|
|
801
|
-
.
|
|
802
|
-
.
|
|
803
|
-
.
|
|
806
|
+
.blog_ed-link-actions { display: flex; gap: 12px; justify-content: flex-end; }
|
|
807
|
+
.blog_ed-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
808
|
+
.blog_ed-link-row .blog_fld { flex: 1; min-width: 190px; }
|
|
809
|
+
.blog_ed-link-tab { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--d-ink-2); white-space: nowrap; }
|
|
810
|
+
.blog_ed-link-hits {
|
|
804
811
|
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
|
|
805
812
|
max-height: 200px; overflow-y: auto;
|
|
806
813
|
scrollbar-width: none;
|
|
807
814
|
-ms-overflow-style: none;
|
|
808
815
|
}
|
|
809
|
-
.
|
|
810
|
-
.
|
|
816
|
+
.blog_ed-link-hits::-webkit-scrollbar { display: none; }
|
|
817
|
+
.blog_ed-link-hits button {
|
|
811
818
|
font: inherit; width: 100%; text-align: left; border: 0; background: var(--d-surface);
|
|
812
819
|
border-radius: var(--d-radius-sm); padding: 7px 10px; cursor: pointer; display: flex;
|
|
813
820
|
justify-content: space-between; gap: 12px; align-items: baseline; color: var(--d-ink);
|
|
814
821
|
}
|
|
815
|
-
.
|
|
816
|
-
.
|
|
817
|
-
.
|
|
818
|
-
.
|
|
822
|
+
.blog_ed-link-hits button:hover { background: var(--d-accent-soft); }
|
|
823
|
+
.blog_hit-label { font-size: 13px; font-weight: 600; }
|
|
824
|
+
.blog_hit-path { font-size: 11.6px; color: var(--d-ink-3); }
|
|
825
|
+
.blog_ed-link-note { margin: 0; font-size: 11.8px; color: var(--d-ink-3); }
|
|
819
826
|
|
|
820
|
-
.
|
|
821
|
-
.
|
|
822
|
-
.
|
|
823
|
-
.
|
|
827
|
+
.blog_ed-surface { position: relative; border-radius: 0 0 var(--d-radius) var(--d-radius); overflow: clip; }
|
|
828
|
+
.blog_ed-placeholder { position: absolute; top: 22px; left: 24px; color: var(--d-ink-3); pointer-events: none; font-size: 16.5px; }
|
|
829
|
+
.blog_ed-input { padding: 20px 24px 48px; min-height: 420px; outline: none; }
|
|
830
|
+
.blog_ed-skeleton {
|
|
824
831
|
min-height: 420px;
|
|
825
832
|
background: linear-gradient(90deg, var(--d-sunk) 0%, var(--d-surface-2) 50%, var(--d-sunk) 100%);
|
|
826
833
|
background-size: 200% 100%;
|
|
827
834
|
animation: ed-shimmer 1.2s ease-in-out infinite;
|
|
828
835
|
}
|
|
829
|
-
.
|
|
836
|
+
.blog_ed-mode-skeleton {
|
|
830
837
|
display: inline-block; width: 64px; height: 28px; border-radius: var(--d-radius-sm);
|
|
831
838
|
background: var(--d-sunk);
|
|
832
839
|
}
|
|
@@ -835,167 +842,167 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
835
842
|
100% { background-position: -100% 0; }
|
|
836
843
|
}
|
|
837
844
|
@media (prefers-reduced-motion: reduce) {
|
|
838
|
-
.
|
|
845
|
+
.blog_ed-skeleton { animation: none; background: var(--d-sunk); }
|
|
839
846
|
}
|
|
840
847
|
|
|
841
848
|
/* the writing surface reads like the article, not like a form field */
|
|
842
|
-
.
|
|
843
|
-
.
|
|
844
|
-
.
|
|
845
|
-
.
|
|
846
|
-
.
|
|
847
|
-
.
|
|
848
|
-
.
|
|
849
|
+
.blog_ed-input.blog_prose { font-family: var(--d-read); font-size: 16.5px; line-height: 1.68; color: var(--d-ink); }
|
|
850
|
+
.blog_ed-input.blog_prose > * { margin: 0 0 1.05em; }
|
|
851
|
+
.blog_ed-input.blog_prose h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin: 1.5em 0 0.5em; line-height: 1.2; }
|
|
852
|
+
.blog_ed-input.blog_prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 1.5em 0 0.5em; line-height: 1.25; }
|
|
853
|
+
.blog_ed-input.blog_prose h3 { font-size: 19.5px; font-weight: 700; letter-spacing: -0.015em; margin: 1.4em 0 0.45em; }
|
|
854
|
+
.blog_ed-input.blog_prose h4 { font-size: 17px; font-weight: 700; margin: 1.3em 0 0.4em; }
|
|
855
|
+
.blog_ed-input.blog_prose blockquote {
|
|
849
856
|
margin: 1.3em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--d-accent);
|
|
850
857
|
color: var(--d-ink-2); font-style: italic;
|
|
851
858
|
}
|
|
852
|
-
.
|
|
853
|
-
.
|
|
854
|
-
.
|
|
855
|
-
.
|
|
856
|
-
.
|
|
857
|
-
.
|
|
858
|
-
.
|
|
859
|
-
.
|
|
860
|
-
.
|
|
859
|
+
.blog_ed-input.blog_prose ul, .blog_ed-input.blog_prose ol { padding-left: 1.4em; }
|
|
860
|
+
.blog_ed-input.blog_prose li { margin-bottom: 0.35em; }
|
|
861
|
+
.blog_ed-input.blog_prose a { color: var(--d-accent); text-decoration: underline; text-underline-offset: 2px; }
|
|
862
|
+
.blog_ed-input.blog_prose a[data-link-type='internal'] { text-decoration-style: dotted; }
|
|
863
|
+
.blog_ed-input.blog_prose code { font-family: var(--d-mono); font-size: 0.88em; background: var(--d-sunk); padding: 1px 5px; border-radius: 4px; }
|
|
864
|
+
.blog_ed-input.blog_prose hr { border: 0; border-top: 2px solid var(--d-rule); margin: 1.8em 0; }
|
|
865
|
+
.blog_ed-input.blog_prose figure.blog_ed-figure { margin: 1.5em 0; border-radius: var(--d-radius); overflow: hidden; border: 1px solid var(--d-rule); background: var(--d-sunk); }
|
|
866
|
+
.blog_ed-input.blog_prose figure.blog_ed-figure img { display: block; width: 100%; height: auto; }
|
|
867
|
+
.blog_ed-input.blog_prose figure.blog_ed-figure figcaption { font-family: var(--d-ui); font-size: 12.2px; color: var(--d-ink-3); padding: 8px 12px; }
|
|
861
868
|
|
|
862
869
|
/* sidebar boxes */
|
|
863
|
-
.
|
|
864
|
-
.
|
|
865
|
-
.
|
|
866
|
-
.
|
|
867
|
-
.
|
|
868
|
-
.
|
|
869
|
-
.
|
|
870
|
-
.
|
|
871
|
-
|
|
872
|
-
.
|
|
873
|
-
.
|
|
874
|
-
.
|
|
875
|
-
.
|
|
876
|
-
|
|
877
|
-
.
|
|
878
|
-
.
|
|
879
|
-
.
|
|
880
|
-
.
|
|
881
|
-
.
|
|
882
|
-
|
|
883
|
-
.
|
|
884
|
-
.
|
|
885
|
-
.
|
|
886
|
-
.
|
|
887
|
-
.
|
|
888
|
-
|
|
889
|
-
.
|
|
890
|
-
.
|
|
870
|
+
.blog_box { background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius); box-shadow: var(--d-shadow); overflow: hidden; }
|
|
871
|
+
.blog_box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2); }
|
|
872
|
+
.blog_box-head h3 { margin: 0; font-size: 12.4px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; color: var(--d-ink-2); }
|
|
873
|
+
.blog_box-hint { font-size: 11.4px; color: var(--d-ink-3); }
|
|
874
|
+
.blog_box-hint.blog_warn { color: var(--d-warn); font-weight: 650; }
|
|
875
|
+
.blog_box-body { padding: 13px 14px; }
|
|
876
|
+
.blog_box-publish { border-color: var(--d-accent); }
|
|
877
|
+
.blog_box-publish .blog_box-head { background: var(--d-accent-soft); border-bottom-color: var(--d-accent); }
|
|
878
|
+
|
|
879
|
+
.blog_facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
880
|
+
.blog_facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.6px; }
|
|
881
|
+
.blog_facts dt { color: var(--d-ink-3); margin: 0; }
|
|
882
|
+
.blog_facts dd { margin: 0; font-weight: 620; text-align: right; }
|
|
883
|
+
|
|
884
|
+
.blog_checklist { background: var(--d-crit-soft); border: 1px solid var(--d-crit); border-radius: var(--d-radius-sm); padding: 9px 12px; }
|
|
885
|
+
.blog_checklist-head { margin: 0 0 5px; font-size: 11.6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-crit); }
|
|
886
|
+
.blog_checklist ul { margin: 0; padding-left: 16px; font-size: 12.4px; color: var(--d-ink-2); }
|
|
887
|
+
.blog_checklist-ok { margin: 0; font-size: 12.4px; color: var(--d-good); font-weight: 600; }
|
|
888
|
+
.blog_checklist-ok::before { content: '✓ '; font-weight: 700; }
|
|
889
|
+
|
|
890
|
+
.blog_pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
|
|
891
|
+
.blog_pick-list-auto { max-height: none; overflow: visible; }
|
|
892
|
+
.blog_pick-list-compact { max-height: 140px; }
|
|
893
|
+
.blog_pick-row { display: flex; gap: 9px; align-items: center; font-size: 13px; padding: 3px 2px; cursor: pointer; }
|
|
894
|
+
.blog_pick-row:hover { color: var(--d-accent-ink); }
|
|
895
|
+
|
|
896
|
+
.blog_tokens { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
897
|
+
.blog_token {
|
|
891
898
|
display: inline-flex; align-items: center; gap: 6px; font-size: 12.2px; font-weight: 560;
|
|
892
899
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: 100px; padding: 3px 5px 3px 10px;
|
|
893
900
|
}
|
|
894
|
-
.
|
|
895
|
-
.
|
|
896
|
-
.
|
|
901
|
+
.blog_token-new { background: var(--d-accent-soft); border-color: var(--d-accent); color: var(--d-accent-ink); }
|
|
902
|
+
.blog_token button { font: inherit; border: 0; background: none; cursor: pointer; color: var(--d-ink-3); line-height: 1; padding: 0 3px; }
|
|
903
|
+
.blog_token button:hover { color: var(--d-crit); }
|
|
897
904
|
|
|
898
|
-
.
|
|
899
|
-
.
|
|
900
|
-
.
|
|
901
|
-
.
|
|
902
|
-
.
|
|
903
|
-
.
|
|
904
|
-
.
|
|
905
|
+
.blog_thumb-row { display: flex; gap: 10px; align-items: center; }
|
|
906
|
+
.blog_thumb { width: 62px; height: 46px; object-fit: cover; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); }
|
|
907
|
+
.blog_feat { width: 100%; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); display: block; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
908
|
+
.blog_feat-alt { margin-top: 2px; }
|
|
909
|
+
.blog_feat-alt .blog_fld { resize: vertical; min-height: 56px; }
|
|
910
|
+
.blog_feat-alt-foot { margin: 0; }
|
|
911
|
+
.blog_fld-em { font-style: normal; font-weight: 500; color: var(--d-ink-3); font-size: 11.5px; }
|
|
905
912
|
|
|
906
913
|
/* drop targets */
|
|
907
|
-
.
|
|
908
|
-
.
|
|
914
|
+
.blog_drop-target.blog_is-dragging { outline: 2px dashed var(--d-accent); outline-offset: -6px; background: var(--d-accent-soft); }
|
|
915
|
+
.blog_dropzone-cta {
|
|
909
916
|
font: inherit; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
910
917
|
padding: 20px 14px; border: 1.5px dashed var(--d-rule); border-radius: var(--d-radius-sm);
|
|
911
918
|
background: var(--d-surface-2); color: var(--d-ink-2); cursor: pointer; text-align: center;
|
|
912
919
|
font-size: 12.6px; font-weight: 550;
|
|
913
920
|
}
|
|
914
|
-
.
|
|
915
|
-
.
|
|
916
|
-
.
|
|
921
|
+
.blog_dropzone-cta:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
|
|
922
|
+
.blog_dropzone-cta:disabled { opacity: 0.6; cursor: progress; }
|
|
923
|
+
.blog_dropzone-icon { font-size: 17px; }
|
|
917
924
|
|
|
918
925
|
/* search-result preview */
|
|
919
|
-
.
|
|
920
|
-
.
|
|
921
|
-
.
|
|
922
|
-
.
|
|
926
|
+
.blog_serp { background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); padding: 11px 13px; }
|
|
927
|
+
.blog_serp-url { font-size: 11.8px; color: var(--d-ink-3); }
|
|
928
|
+
.blog_serp-title { font-size: 16px; color: var(--d-accent); margin-top: 3px; line-height: 1.3; }
|
|
929
|
+
.blog_serp-desc { font-size: 12.6px; color: var(--d-ink-2); margin-top: 3px; }
|
|
923
930
|
|
|
924
931
|
/* WordPress-parity editor extras */
|
|
925
|
-
.
|
|
932
|
+
.blog_ed-mode-tabs {
|
|
926
933
|
display: flex; gap: 0; border-bottom: 1px solid var(--d-rule);
|
|
927
934
|
background: var(--d-surface-2); border-radius: inherit; padding: 0 8px;
|
|
928
935
|
}
|
|
929
|
-
.
|
|
936
|
+
.blog_ed-mode-tabs button {
|
|
930
937
|
font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent;
|
|
931
938
|
color: var(--d-ink-3); padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
932
939
|
}
|
|
933
|
-
.
|
|
934
|
-
.
|
|
935
|
-
.
|
|
936
|
-
.
|
|
940
|
+
.blog_ed-mode-tabs button:hover { color: var(--d-ink); }
|
|
941
|
+
.blog_ed-mode-tabs button.blog_is-on { color: var(--d-ink); border-bottom-color: var(--d-accent); }
|
|
942
|
+
.blog_ed .blog_ed-toolbar { border-radius: 0; }
|
|
943
|
+
.blog_tb-media {
|
|
937
944
|
font-weight: 650 !important; min-width: auto !important; padding: 0 10px !important;
|
|
938
945
|
background: var(--d-accent-soft) !important; color: var(--d-accent-ink) !important; border-color: var(--d-accent) !important;
|
|
939
946
|
}
|
|
940
|
-
.
|
|
941
|
-
.
|
|
942
|
-
.
|
|
947
|
+
.blog_tb-color { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--d-ink-2); cursor: pointer; padding: 0 6px; height: 30px; }
|
|
948
|
+
.blog_tb-color input { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
|
|
949
|
+
.blog_ed-code {
|
|
943
950
|
display: block; width: 100%; min-height: 420px; padding: 16px 18px; border: 0; resize: vertical;
|
|
944
951
|
background: #1e1f2b; color: #e8e8f0; font-size: 13px; line-height: 1.5; outline: none;
|
|
945
952
|
border-radius: 0 0 var(--d-radius) var(--d-radius);
|
|
946
953
|
}
|
|
947
|
-
.
|
|
954
|
+
.blog_ed-chars {
|
|
948
955
|
display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--d-rule); background: var(--d-sunk);
|
|
949
956
|
}
|
|
950
|
-
.
|
|
957
|
+
.blog_ed-chars button {
|
|
951
958
|
font: inherit; min-width: 28px; height: 28px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
952
959
|
background: var(--d-surface); cursor: pointer; color: var(--d-ink);
|
|
953
960
|
}
|
|
954
|
-
.
|
|
961
|
+
.blog_ed-chars button:hover { border-color: var(--d-accent); }
|
|
955
962
|
|
|
956
|
-
.
|
|
957
|
-
.
|
|
958
|
-
.
|
|
959
|
-
.
|
|
960
|
-
.
|
|
961
|
-
.
|
|
962
|
-
.
|
|
963
|
+
.blog_wp-facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
964
|
+
.blog_wp-facts .blog_fact-row { display: flex; gap: 6px; align-items: baseline; font-size: 12.6px; flex-wrap: wrap; }
|
|
965
|
+
.blog_wp-facts .blog_fact-lbl { color: var(--d-ink-3); min-width: 72px; }
|
|
966
|
+
.blog_wp-facts .blog_fact-val { font-weight: 550; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
967
|
+
.blog_fact-edit { padding: 4px 0 8px 78px; }
|
|
968
|
+
.blog_fld-sm { max-width: 180px; padding: 5px 8px; font-size: 12.5px; }
|
|
969
|
+
.blog_linkish {
|
|
963
970
|
font: inherit; border: 0; background: transparent; color: var(--d-accent); cursor: pointer;
|
|
964
971
|
padding: 0; text-decoration: underline; text-underline-offset: 2px; font-size: 12.4px;
|
|
965
972
|
}
|
|
966
|
-
.
|
|
967
|
-
.
|
|
968
|
-
.
|
|
973
|
+
.blog_linkish:hover { color: var(--d-accent-ink); }
|
|
974
|
+
.blog_linkish:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
975
|
+
.blog_publish-foot {
|
|
969
976
|
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
970
977
|
padding-top: 8px; border-top: 1px solid var(--d-rule); margin-top: 4px;
|
|
971
978
|
}
|
|
972
|
-
.
|
|
979
|
+
.blog_publish-foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
|
|
973
980
|
|
|
974
|
-
.
|
|
975
|
-
.
|
|
976
|
-
.
|
|
981
|
+
.blog_profile-panel { display: flex; flex-direction: column; gap: 18px; }
|
|
982
|
+
.blog_profile-hero { display: flex; align-items: center; gap: 14px; }
|
|
983
|
+
.blog_profile-avatar-img {
|
|
977
984
|
width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
|
|
978
985
|
border: 1px solid var(--d-accent);
|
|
979
986
|
}
|
|
980
|
-
.
|
|
987
|
+
.blog_profile-avatar {
|
|
981
988
|
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
|
|
982
989
|
background: var(--d-accent-soft); color: var(--d-accent-ink); font-size: 20px; font-weight: 800;
|
|
983
990
|
border: 1px solid var(--d-accent);
|
|
984
991
|
}
|
|
985
|
-
.
|
|
986
|
-
.
|
|
987
|
-
.
|
|
988
|
-
.
|
|
989
|
-
.
|
|
990
|
-
.
|
|
992
|
+
.blog_profile-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--d-ink); }
|
|
993
|
+
.blog_profile-email { margin: 4px 0 0; font-size: 13px; color: var(--d-ink-3); }
|
|
994
|
+
.blog_profile-facts { max-width: 360px; }
|
|
995
|
+
.blog_profile-roles h3 { margin: 0 0 8px; font-size: 12.4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-ink-3); }
|
|
996
|
+
.blog_profile-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
997
|
+
.blog_profile-role-list li {
|
|
991
998
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
992
999
|
padding: 8px 10px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk);
|
|
993
1000
|
font-size: 13px;
|
|
994
1001
|
}
|
|
995
|
-
.
|
|
996
|
-
.
|
|
1002
|
+
.blog_profile-role-brand { font-weight: 600; color: var(--d-ink); }
|
|
1003
|
+
.blog_profile-role-level { font-size: 12px; color: var(--d-ink-3); }
|
|
997
1004
|
|
|
998
|
-
.
|
|
1005
|
+
.blog_profile-logout-top {
|
|
999
1006
|
display: inline-flex;
|
|
1000
1007
|
align-items: center;
|
|
1001
1008
|
gap: 7px;
|
|
@@ -1007,397 +1014,397 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
1007
1014
|
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
|
|
1008
1015
|
}
|
|
1009
1016
|
|
|
1010
|
-
.
|
|
1017
|
+
.blog_profile-logout-top:hover:not(:disabled) {
|
|
1011
1018
|
background: color-mix(in srgb, var(--d-crit) 12%, var(--d-surface));
|
|
1012
1019
|
border-color: color-mix(in srgb, var(--d-crit) 45%, var(--d-rule));
|
|
1013
1020
|
transform: translateY(-1px);
|
|
1014
1021
|
box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--d-crit) 55%, transparent);
|
|
1015
1022
|
}
|
|
1016
1023
|
|
|
1017
|
-
.
|
|
1024
|
+
.blog_profile-logout-top:active:not(:disabled) {
|
|
1018
1025
|
transform: translateY(0);
|
|
1019
1026
|
}
|
|
1020
1027
|
|
|
1021
|
-
.
|
|
1028
|
+
.blog_profile-logout-top:disabled {
|
|
1022
1029
|
opacity: 0.65;
|
|
1023
1030
|
cursor: not-allowed;
|
|
1024
1031
|
}
|
|
1025
1032
|
|
|
1026
|
-
.
|
|
1033
|
+
.blog_logout-btn-icon {
|
|
1027
1034
|
width: 16px;
|
|
1028
1035
|
height: 16px;
|
|
1029
1036
|
flex-shrink: 0;
|
|
1030
1037
|
}
|
|
1031
|
-
.
|
|
1032
|
-
.
|
|
1038
|
+
.blog_publish-seo-summary { flex-direction: column; align-items: stretch; }
|
|
1039
|
+
.blog_btn-tiny { font-size: 12px; padding: 4px 9px; }
|
|
1033
1040
|
|
|
1034
|
-
.
|
|
1035
|
-
.
|
|
1041
|
+
.blog_seo-summary { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
1042
|
+
.blog_seo-pill {
|
|
1036
1043
|
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
|
|
1037
1044
|
padding: 5px 10px; border-radius: 999px; border: 1px solid var(--d-rule); background: var(--d-sunk);
|
|
1038
1045
|
}
|
|
1039
|
-
.
|
|
1040
|
-
.
|
|
1041
|
-
.
|
|
1042
|
-
.
|
|
1043
|
-
.
|
|
1044
|
-
.
|
|
1045
|
-
.
|
|
1046
|
-
.
|
|
1047
|
-
.
|
|
1048
|
-
.
|
|
1049
|
-
.
|
|
1050
|
-
.
|
|
1051
|
-
.
|
|
1052
|
-
.
|
|
1053
|
-
.
|
|
1054
|
-
.
|
|
1055
|
-
.
|
|
1056
|
-
.
|
|
1057
|
-
.
|
|
1046
|
+
.blog_seo-pill-good { border-color: var(--d-good); background: var(--d-good-soft); color: var(--d-good); }
|
|
1047
|
+
.blog_seo-pill-ok { border-color: var(--d-warn); background: var(--d-warn-soft); color: var(--d-warn); }
|
|
1048
|
+
.blog_seo-pill-bad { border-color: var(--d-crit); background: var(--d-crit-soft); color: var(--d-crit); }
|
|
1049
|
+
.blog_seo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
1050
|
+
.blog_seo-dot-good { background: var(--d-good); }
|
|
1051
|
+
.blog_seo-dot-ok { background: var(--d-warn); }
|
|
1052
|
+
.blog_seo-dot-bad { background: var(--d-crit); }
|
|
1053
|
+
.blog_seo-analysis { display: flex; flex-direction: column; gap: 12px; }
|
|
1054
|
+
.blog_seo-details { border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk); padding: 0 12px 10px; }
|
|
1055
|
+
.blog_seo-details summary { cursor: pointer; font-weight: 650; font-size: 13px; padding: 10px 0; list-style: none; }
|
|
1056
|
+
.blog_seo-details summary::-webkit-details-marker { display: none; }
|
|
1057
|
+
.blog_seo-advanced { border-top: 1px solid var(--d-rule); padding-top: 8px; }
|
|
1058
|
+
.blog_seo-advanced summary { cursor: pointer; font-weight: 650; font-size: 13px; color: var(--d-ink-2); }
|
|
1059
|
+
.blog_seo-group { margin-top: 8px; }
|
|
1060
|
+
.blog_seo-group-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-ink-3); }
|
|
1061
|
+
.blog_seo-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
1062
|
+
.blog_seo-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.6px; }
|
|
1063
|
+
.blog_seo-checks strong { display: block; font-size: 12.8px; }
|
|
1064
|
+
.blog_seo-checks span { display: block; color: var(--d-ink-2); margin-top: 1px; }
|
|
1058
1065
|
|
|
1059
1066
|
/* Yoast SEO metabox — uses dashboard tokens */
|
|
1060
|
-
.
|
|
1061
|
-
.
|
|
1062
|
-
.
|
|
1067
|
+
.blog_yoast-box { overflow: hidden; }
|
|
1068
|
+
.blog_yoast-box .blog_box-body { padding: 0; }
|
|
1069
|
+
.blog_yoast-tabs {
|
|
1063
1070
|
display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--d-rule);
|
|
1064
1071
|
background: var(--d-surface-2); padding: 0 8px;
|
|
1065
1072
|
}
|
|
1066
|
-
.
|
|
1073
|
+
.blog_yoast-tab {
|
|
1067
1074
|
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--d-ink-3);
|
|
1068
1075
|
display: inline-flex; align-items: center; gap: 6px;
|
|
1069
1076
|
padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
|
|
1070
1077
|
background: transparent; cursor: pointer; margin-bottom: -1px;
|
|
1071
1078
|
}
|
|
1072
|
-
.
|
|
1073
|
-
.
|
|
1074
|
-
.
|
|
1075
|
-
.
|
|
1076
|
-
.
|
|
1077
|
-
.
|
|
1078
|
-
.
|
|
1079
|
-
.
|
|
1080
|
-
.
|
|
1081
|
-
.
|
|
1082
|
-
.
|
|
1083
|
-
.
|
|
1084
|
-
.
|
|
1085
|
-
.
|
|
1079
|
+
.blog_yoast-tab:hover { color: var(--d-ink); }
|
|
1080
|
+
.blog_yoast-tab.blog_is-active { color: var(--d-ink); border-bottom-color: var(--d-accent); }
|
|
1081
|
+
.blog_yoast-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
1082
|
+
.blog_yoast-dot-good { background: var(--d-good); }
|
|
1083
|
+
.blog_yoast-dot-ok { background: var(--d-warn); }
|
|
1084
|
+
.blog_yoast-dot-bad { background: var(--d-crit); }
|
|
1085
|
+
.blog_yoast-inside { padding: 14px 16px 16px !important; }
|
|
1086
|
+
.blog_yoast-panel { display: flex; flex-direction: column; gap: 14px; }
|
|
1087
|
+
.blog_yoast-intro { margin: 0; font-size: 13px; color: var(--d-ink-2); line-height: 1.45; }
|
|
1088
|
+
.blog_yoast-section { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
|
|
1089
|
+
.blog_yoast-section-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--d-ink); }
|
|
1090
|
+
.blog_yoast-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
|
1091
|
+
.blog_yoast-analysis { display: flex; flex-direction: column; gap: 10px; }
|
|
1092
|
+
.blog_yoast-schema-preview {
|
|
1086
1093
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1087
1094
|
padding: 11px 13px;
|
|
1088
1095
|
}
|
|
1089
|
-
.
|
|
1090
|
-
.
|
|
1091
|
-
.
|
|
1096
|
+
.blog_yoast-schema-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; color: var(--d-ink-2); }
|
|
1097
|
+
.blog_yoast-schema-list li + li { margin-top: 6px; }
|
|
1098
|
+
.blog_yoast-social-preview {
|
|
1092
1099
|
display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start;
|
|
1093
1100
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1094
1101
|
background: var(--d-sunk);
|
|
1095
1102
|
}
|
|
1096
|
-
.
|
|
1097
|
-
.
|
|
1103
|
+
.blog_yoast-social-img { width: 100%; height: 100%; min-height: 80px; object-fit: cover; display: block; }
|
|
1104
|
+
.blog_yoast-social-img-empty {
|
|
1098
1105
|
display: flex; align-items: center; justify-content: center; min-height: 80px;
|
|
1099
1106
|
font-size: 11px; color: var(--d-ink-3); background: var(--d-rule);
|
|
1100
1107
|
}
|
|
1101
|
-
.
|
|
1102
|
-
.
|
|
1103
|
-
.
|
|
1108
|
+
.blog_yoast-social-text { padding: 10px 12px 12px 0; min-width: 0; }
|
|
1109
|
+
.blog_yoast-social-site { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-ink-3); }
|
|
1110
|
+
.blog_yoast-social-title {
|
|
1104
1111
|
font-size: 14px; font-weight: 650; color: var(--d-ink); margin-top: 4px;
|
|
1105
1112
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
1106
1113
|
}
|
|
1107
|
-
.
|
|
1114
|
+
.blog_yoast-social-desc {
|
|
1108
1115
|
font-size: 12px; color: var(--d-ink-2); margin-top: 3px; line-height: 1.35;
|
|
1109
1116
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
1110
1117
|
}
|
|
1111
1118
|
|
|
1112
1119
|
/* SEO tab — WordPress Yoast parity */
|
|
1113
|
-
.
|
|
1114
|
-
.
|
|
1115
|
-
.
|
|
1116
|
-
.
|
|
1117
|
-
.
|
|
1118
|
-
.
|
|
1119
|
-
.
|
|
1120
|
-
.
|
|
1120
|
+
.blog_yoast-panel-seo { gap: 16px; }
|
|
1121
|
+
.blog_yoast-field { display: flex; flex-direction: column; gap: 6px; }
|
|
1122
|
+
.blog_yoast-label { font-size: 13px; font-weight: 650; color: var(--d-ink); }
|
|
1123
|
+
.blog_yoast-input { font-size: 13px; }
|
|
1124
|
+
.blog_yoast-help { margin: 0; font-size: 12.4px; line-height: 1.45; color: var(--d-ink-3); }
|
|
1125
|
+
.blog_yoast-learn-more { color: var(--d-accent); text-decoration: none; }
|
|
1126
|
+
.blog_yoast-learn-more:hover { text-decoration: underline; }
|
|
1127
|
+
.blog_yoast-keyphrase-hint {
|
|
1121
1128
|
margin: 0; padding: 10px 12px; font-size: 12.8px; color: var(--d-ink-2);
|
|
1122
1129
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1123
1130
|
}
|
|
1124
|
-
.
|
|
1131
|
+
.blog_yoast-snippet {
|
|
1125
1132
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1126
1133
|
background: var(--d-surface);
|
|
1127
1134
|
}
|
|
1128
|
-
.
|
|
1135
|
+
.blog_yoast-snippet-head {
|
|
1129
1136
|
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
1130
1137
|
padding: 10px 12px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
|
|
1131
1138
|
}
|
|
1132
|
-
.
|
|
1139
|
+
.blog_yoast-snippet-toggle {
|
|
1133
1140
|
font: inherit; font-size: 13px; font-weight: 700; color: var(--d-ink);
|
|
1134
1141
|
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
1135
1142
|
}
|
|
1136
|
-
.
|
|
1137
|
-
.
|
|
1138
|
-
.
|
|
1143
|
+
.blog_yoast-snippet-toggle:hover { color: var(--d-accent-ink); }
|
|
1144
|
+
.blog_yoast-preview-modes { display: inline-flex; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden; }
|
|
1145
|
+
.blog_yoast-preview-mode {
|
|
1139
1146
|
font: inherit; font-size: 11.8px; font-weight: 600; padding: 4px 10px; border: 0;
|
|
1140
1147
|
background: var(--d-surface); color: var(--d-ink-2); cursor: pointer;
|
|
1141
1148
|
}
|
|
1142
|
-
.
|
|
1143
|
-
.
|
|
1144
|
-
.
|
|
1145
|
-
.
|
|
1146
|
-
.
|
|
1147
|
-
.
|
|
1148
|
-
.
|
|
1149
|
-
.
|
|
1150
|
-
.
|
|
1151
|
-
.
|
|
1152
|
-
.
|
|
1153
|
-
.
|
|
1154
|
-
.
|
|
1155
|
-
.
|
|
1156
|
-
.
|
|
1157
|
-
.
|
|
1158
|
-
.
|
|
1149
|
+
.blog_yoast-preview-mode + .blog_yoast-preview-mode { border-left: 1px solid var(--d-rule); }
|
|
1150
|
+
.blog_yoast-preview-mode.blog_is-active { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
1151
|
+
.blog_yoast-serp { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--d-rule); }
|
|
1152
|
+
.blog_yoast-serp-mobile { max-width: 360px; }
|
|
1153
|
+
.blog_yoast-serp-desktop { max-width: none; }
|
|
1154
|
+
.blog_yoast-serp .blog_serp-title strong, .blog_yoast-serp .blog_serp-desc strong { font-weight: 700; }
|
|
1155
|
+
.blog_yoast-snippet-fields { padding: 12px; gap: 14px !important; }
|
|
1156
|
+
.blog_yoast-field-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
|
|
1157
|
+
.blog_yoast-char-count { font-size: 11.6px; color: var(--d-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
1158
|
+
.blog_yoast-meter { flex: 1; min-width: 0; }
|
|
1159
|
+
.blog_yoast-meter-track { height: 4px; border-radius: 999px; background: var(--d-rule); overflow: hidden; }
|
|
1160
|
+
.blog_yoast-meter-fill { height: 100%; border-radius: 999px; transition: width 0.15s ease; }
|
|
1161
|
+
.blog_yoast-meter-good { background: var(--d-good); }
|
|
1162
|
+
.blog_yoast-meter-ok { background: var(--d-warn); }
|
|
1163
|
+
.blog_yoast-meter-bad { background: var(--d-crit); }
|
|
1164
|
+
.blog_yoast-slug-row { display: flex; align-items: center; gap: 0; }
|
|
1165
|
+
.blog_yoast-slug-prefix {
|
|
1159
1166
|
font-size: 12.6px; color: var(--d-ink-3); padding: 8px 0 8px 10px;
|
|
1160
1167
|
border: 1px solid var(--d-rule); border-right: 0; border-radius: var(--d-radius-sm) 0 0 var(--d-radius-sm);
|
|
1161
1168
|
background: var(--d-sunk);
|
|
1162
1169
|
}
|
|
1163
|
-
.
|
|
1164
|
-
.
|
|
1170
|
+
.blog_yoast-slug-row .blog_yoast-input { border-radius: 0 var(--d-radius-sm) var(--d-radius-sm) 0; }
|
|
1171
|
+
.blog_yoast-accordion {
|
|
1165
1172
|
display: flex; flex-direction: column;
|
|
1166
1173
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1167
1174
|
background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden;
|
|
1168
1175
|
}
|
|
1169
|
-
.
|
|
1176
|
+
.blog_yoast-accordion .blog_yoast-collapse {
|
|
1170
1177
|
border: 0; border-radius: 0; box-shadow: none; margin: 0;
|
|
1171
1178
|
}
|
|
1172
|
-
.
|
|
1173
|
-
.
|
|
1179
|
+
.blog_yoast-accordion .blog_yoast-collapse + .blog_yoast-collapse { margin-top: 0; border-top: 1px solid var(--d-rule); }
|
|
1180
|
+
.blog_yoast-accordion-note {
|
|
1174
1181
|
margin: 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: var(--d-warn);
|
|
1175
1182
|
background: var(--d-warn-soft); border-top: 1px solid var(--d-rule); border-bottom: 1px solid var(--d-rule);
|
|
1176
1183
|
}
|
|
1177
1184
|
|
|
1178
1185
|
/* Shared accordion chevron */
|
|
1179
|
-
.
|
|
1186
|
+
.blog_acc-chevron {
|
|
1180
1187
|
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
1181
1188
|
width: 20px; height: 20px; color: var(--d-ink-3);
|
|
1182
1189
|
transition: transform 0.2s ease, color 0.15s ease;
|
|
1183
1190
|
}
|
|
1184
|
-
details[open] > summary .
|
|
1185
|
-
.
|
|
1186
|
-
.
|
|
1187
|
-
details[open] > summary:hover .
|
|
1191
|
+
details[open] > summary .blog_acc-chevron { transform: rotate(180deg); color: var(--d-accent); }
|
|
1192
|
+
.blog_yoast-collapse-summary:hover .blog_acc-chevron,
|
|
1193
|
+
.blog_yoast-result-summary:hover .blog_acc-chevron { color: var(--d-ink-2); }
|
|
1194
|
+
details[open] > summary:hover .blog_acc-chevron { color: var(--d-accent-ink); }
|
|
1188
1195
|
|
|
1189
1196
|
/* Yoast collapsible sections */
|
|
1190
|
-
.
|
|
1197
|
+
.blog_yoast-collapse {
|
|
1191
1198
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1192
1199
|
background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden;
|
|
1193
1200
|
}
|
|
1194
|
-
.
|
|
1195
|
-
.
|
|
1201
|
+
.blog_yoast-collapse + .blog_yoast-collapse { margin-top: 10px; }
|
|
1202
|
+
.blog_yoast-collapse-summary {
|
|
1196
1203
|
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
|
|
1197
1204
|
padding: 11px 14px; font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
|
|
1198
1205
|
color: var(--d-ink); background: transparent;
|
|
1199
1206
|
transition: background 0.12s ease, color 0.12s ease;
|
|
1200
1207
|
}
|
|
1201
|
-
.
|
|
1202
|
-
.
|
|
1208
|
+
.blog_yoast-collapse-summary:hover { background: var(--d-sunk); }
|
|
1209
|
+
.blog_yoast-collapse[open] > .blog_yoast-collapse-summary {
|
|
1203
1210
|
background: var(--d-surface-2); border-bottom: 1px solid var(--d-rule); color: var(--d-ink);
|
|
1204
1211
|
}
|
|
1205
|
-
.
|
|
1206
|
-
.
|
|
1207
|
-
.
|
|
1208
|
-
.
|
|
1212
|
+
.blog_yoast-collapse-summary::-webkit-details-marker { display: none; }
|
|
1213
|
+
.blog_yoast-collapse-title { flex: 1; min-width: 0; }
|
|
1214
|
+
.blog_yoast-collapse-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
|
|
1215
|
+
.blog_yoast-collapse-body {
|
|
1209
1216
|
padding: 14px; display: flex; flex-direction: column; gap: 12px;
|
|
1210
1217
|
background: var(--d-surface);
|
|
1211
1218
|
}
|
|
1212
|
-
.
|
|
1213
|
-
.
|
|
1219
|
+
.blog_yoast-count { font-weight: 600; color: var(--d-ink-3); }
|
|
1220
|
+
.blog_yoast-empty { margin: 0; font-size: 12.6px; color: var(--d-ink-3); }
|
|
1214
1221
|
|
|
1215
|
-
.
|
|
1216
|
-
.
|
|
1217
|
-
.
|
|
1222
|
+
.blog_yoast-snippet-field { display: flex; flex-direction: column; gap: 6px; }
|
|
1223
|
+
.blog_yoast-var-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1224
|
+
.blog_yoast-var-chip {
|
|
1218
1225
|
font: inherit; font-size: 12.2px; font-weight: 560; padding: 3px 10px;
|
|
1219
1226
|
border: 1px solid var(--d-rule); border-radius: 100px; background: var(--d-sunk);
|
|
1220
1227
|
color: var(--d-ink-2); cursor: pointer;
|
|
1221
1228
|
}
|
|
1222
|
-
.
|
|
1223
|
-
.
|
|
1224
|
-
.
|
|
1229
|
+
.blog_yoast-var-chip:hover { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
|
|
1230
|
+
.blog_yoast-var-chip.blog_token { cursor: pointer; }
|
|
1231
|
+
.blog_yoast-snippet-actions {
|
|
1225
1232
|
display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 2px;
|
|
1226
1233
|
}
|
|
1227
|
-
.
|
|
1228
|
-
.
|
|
1234
|
+
.blog_yoast-var-picker { position: relative; }
|
|
1235
|
+
.blog_yoast-var-menu {
|
|
1229
1236
|
position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px;
|
|
1230
1237
|
margin: 0; padding: 4px; list-style: none; background: var(--d-surface);
|
|
1231
1238
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); box-shadow: var(--d-shadow-lg);
|
|
1232
1239
|
}
|
|
1233
|
-
.
|
|
1240
|
+
.blog_yoast-var-option {
|
|
1234
1241
|
display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
|
|
1235
1242
|
font: inherit; font-size: 12.4px; padding: 7px 9px; border: 0; border-radius: var(--d-radius-sm);
|
|
1236
1243
|
background: transparent; color: var(--d-ink); cursor: pointer; text-align: left;
|
|
1237
1244
|
}
|
|
1238
|
-
.
|
|
1239
|
-
.
|
|
1240
|
-
.
|
|
1245
|
+
.blog_yoast-var-option:hover { background: var(--d-sunk); }
|
|
1246
|
+
.blog_yoast-var-option-label { font-weight: 650; }
|
|
1247
|
+
.blog_yoast-var-option-token { font-size: 11px; color: var(--d-ink-3); }
|
|
1241
1248
|
|
|
1242
|
-
.
|
|
1249
|
+
.blog_yoast-status-bad {
|
|
1243
1250
|
display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
|
|
1244
1251
|
border-radius: 50%; background: var(--d-crit-soft); color: var(--d-crit); font-size: 12px; font-weight: 800;
|
|
1245
1252
|
border: 1px solid var(--d-crit);
|
|
1246
1253
|
}
|
|
1247
|
-
.
|
|
1254
|
+
.blog_yoast-link-btn {
|
|
1248
1255
|
font: inherit; font-size: 12.6px; font-weight: 600; color: var(--d-accent);
|
|
1249
1256
|
background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; text-align: left;
|
|
1250
1257
|
}
|
|
1251
|
-
.
|
|
1252
|
-
.
|
|
1253
|
-
.
|
|
1254
|
-
.
|
|
1255
|
-
.
|
|
1258
|
+
.blog_yoast-link-btn:hover:not(:disabled) { text-decoration: underline; }
|
|
1259
|
+
.blog_yoast-link-btn:disabled { color: var(--d-ink-3); cursor: not-allowed; }
|
|
1260
|
+
.blog_yoast-preview-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
1261
|
+
.blog_yoast-preview-label { font-size: 12.6px; font-weight: 600; color: var(--d-ink-2); }
|
|
1262
|
+
.blog_yoast-google-card {
|
|
1256
1263
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface);
|
|
1257
1264
|
padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
|
|
1258
1265
|
}
|
|
1259
|
-
.
|
|
1260
|
-
.
|
|
1261
|
-
.
|
|
1266
|
+
.blog_yoast-google-mobile { max-width: 360px; }
|
|
1267
|
+
.blog_yoast-google-site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
|
|
1268
|
+
.blog_yoast-google-favicon {
|
|
1262
1269
|
width: 26px; height: 26px; border-radius: 50%; background: var(--d-sunk);
|
|
1263
1270
|
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--d-ink-2);
|
|
1264
1271
|
}
|
|
1265
|
-
.
|
|
1266
|
-
.
|
|
1267
|
-
.
|
|
1268
|
-
.
|
|
1269
|
-
.
|
|
1272
|
+
.blog_yoast-google-site-name { font-size: 12px; color: var(--d-ink); line-height: 1.2; }
|
|
1273
|
+
.blog_yoast-google-site-meta .blog_serp-url { font-size: 11.5px; margin-top: 1px; }
|
|
1274
|
+
.blog_yoast-google-title { font-size: 16px; color: var(--d-accent); line-height: 1.3; }
|
|
1275
|
+
.blog_yoast-google-desc { font-size: 12.6px; color: var(--d-ink-2); line-height: 1.45; }
|
|
1276
|
+
.blog_yoast-composite-field {
|
|
1270
1277
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface);
|
|
1271
1278
|
overflow: hidden;
|
|
1272
1279
|
}
|
|
1273
|
-
.
|
|
1274
|
-
.
|
|
1280
|
+
.blog_yoast-var-chips-inset { padding: 8px 8px 0; border-bottom: 1px solid var(--d-rule); background: var(--d-sunk); }
|
|
1281
|
+
.blog_yoast-composite-input {
|
|
1275
1282
|
font: inherit; font-size: 13px; width: 100%; border: 0; background: transparent;
|
|
1276
1283
|
padding: 9px 10px; color: var(--d-ink); resize: vertical;
|
|
1277
1284
|
}
|
|
1278
|
-
.
|
|
1279
|
-
.
|
|
1280
|
-
.
|
|
1281
|
-
.
|
|
1282
|
-
.
|
|
1283
|
-
.
|
|
1284
|
-
.
|
|
1285
|
+
.blog_yoast-composite-input:focus { outline: none; box-shadow: var(--d-ring); }
|
|
1286
|
+
.blog_yoast-premium-links { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--d-rule); }
|
|
1287
|
+
.blog_yoast-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-ink-2); }
|
|
1288
|
+
.blog_yoast-radio-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
1289
|
+
.blog_yoast-radio-fieldset legend { font-size: 12.8px; font-weight: 650; color: var(--d-ink); margin-bottom: 4px; padding: 0; }
|
|
1290
|
+
.blog_yoast-radio-fieldset label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-ink-2); }
|
|
1291
|
+
.blog_yoast-analysis-list {
|
|
1285
1292
|
display: flex; flex-direction: column; gap: 0;
|
|
1286
1293
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1287
1294
|
overflow: hidden; background: var(--d-surface);
|
|
1288
1295
|
}
|
|
1289
1296
|
|
|
1290
1297
|
/* SEO analysis panel */
|
|
1291
|
-
.
|
|
1292
|
-
.
|
|
1298
|
+
.blog_yoast-seo-analysis-panel { display: flex; flex-direction: column; gap: 14px; }
|
|
1299
|
+
.blog_yoast-premium-cta {
|
|
1293
1300
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1294
1301
|
background: var(--d-warn-soft); padding: 14px;
|
|
1295
1302
|
}
|
|
1296
|
-
.
|
|
1297
|
-
.
|
|
1303
|
+
.blog_yoast-premium-cta-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
|
|
1304
|
+
.blog_yoast-premium-badge {
|
|
1298
1305
|
font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
|
|
1299
1306
|
color: var(--d-warn); background: var(--d-surface); border: 1px solid var(--d-warn); border-radius: 999px; padding: 2px 8px;
|
|
1300
1307
|
}
|
|
1301
|
-
.
|
|
1302
|
-
.
|
|
1303
|
-
.
|
|
1308
|
+
.blog_yoast-premium-cta-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--d-ink); }
|
|
1309
|
+
.blog_yoast-premium-cta-lead { margin: 0 0 10px; font-size: 12.6px; line-height: 1.45; color: var(--d-ink-2); }
|
|
1310
|
+
.blog_yoast-premium-cta-list {
|
|
1304
1311
|
margin: 0 0 12px; padding-left: 18px; font-size: 12.4px; line-height: 1.5; color: var(--d-ink-2);
|
|
1305
1312
|
}
|
|
1306
|
-
.
|
|
1307
|
-
.
|
|
1308
|
-
.
|
|
1313
|
+
.blog_yoast-premium-cta-list li + li { margin-top: 8px; }
|
|
1314
|
+
.blog_yoast-premium-cta-list strong { color: var(--d-ink); font-weight: 650; }
|
|
1315
|
+
.blog_yoast-premium-cta-btn {
|
|
1309
1316
|
display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
|
|
1310
1317
|
color: var(--d-ink-2); text-decoration: none; padding: 4px 9px; border-radius: var(--d-radius-sm);
|
|
1311
1318
|
border: 1px solid var(--d-rule); background: var(--d-surface); cursor: pointer;
|
|
1312
1319
|
}
|
|
1313
|
-
.
|
|
1314
|
-
.
|
|
1315
|
-
.
|
|
1320
|
+
.blog_yoast-premium-cta-btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); text-decoration: none; }
|
|
1321
|
+
.blog_yoast-premium-cta-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
1322
|
+
.blog_yoast-keyphrase-inline-hint {
|
|
1316
1323
|
margin: 0; padding: 9px 11px; font-size: 12.6px; color: var(--d-ink-2);
|
|
1317
1324
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1318
1325
|
}
|
|
1319
|
-
.
|
|
1326
|
+
.blog_yoast-analysis-results-head {
|
|
1320
1327
|
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
1321
1328
|
}
|
|
1322
|
-
.
|
|
1323
|
-
.
|
|
1324
|
-
.
|
|
1325
|
-
.
|
|
1329
|
+
.blog_yoast-result-empty { margin: 0; font-size: 12.4px; color: var(--d-ink-3); }
|
|
1330
|
+
.blog_yoast-footer-collapse { border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface); }
|
|
1331
|
+
.blog_yoast-footer-collapse + .blog_yoast-footer-collapse { margin-top: 8px; }
|
|
1332
|
+
.blog_yoast-footer-collapse-summary {
|
|
1326
1333
|
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
|
|
1327
1334
|
padding: 10px 12px; font-size: 12.8px; font-weight: 650; color: var(--d-ink-2);
|
|
1328
1335
|
}
|
|
1329
|
-
.
|
|
1330
|
-
.
|
|
1331
|
-
.
|
|
1336
|
+
.blog_yoast-footer-collapse-summary::-webkit-details-marker { display: none; }
|
|
1337
|
+
.blog_yoast-footer-collapse-body { margin: 0; padding: 0 12px 12px; font-size: 12.4px; color: var(--d-ink-3); }
|
|
1338
|
+
.blog_yoast-analysis-footer {
|
|
1332
1339
|
display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--d-rule);
|
|
1333
1340
|
}
|
|
1334
|
-
.
|
|
1341
|
+
.blog_yoast-footer-link {
|
|
1335
1342
|
display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.6px; font-weight: 600;
|
|
1336
1343
|
color: var(--d-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; text-align: left;
|
|
1337
1344
|
}
|
|
1338
|
-
.
|
|
1339
|
-
.
|
|
1340
|
-
.
|
|
1341
|
-
.
|
|
1345
|
+
.blog_yoast-footer-link:hover:not(:disabled) { text-decoration: underline; }
|
|
1346
|
+
.blog_yoast-footer-link:disabled { color: var(--d-ink-3); cursor: not-allowed; }
|
|
1347
|
+
.blog_yoast-footer-lock { font-size: 11px; line-height: 1; }
|
|
1348
|
+
.blog_yoast-footer-badge {
|
|
1342
1349
|
font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
|
|
1343
1350
|
color: var(--d-good); background: var(--d-good-soft); border: 1px solid var(--d-good); border-radius: 4px; padding: 1px 5px;
|
|
1344
1351
|
}
|
|
1345
|
-
.
|
|
1346
|
-
.
|
|
1352
|
+
.blog_wp-publish-scores .blog_fact-val { display: inline-flex; align-items: center; gap: 6px; }
|
|
1353
|
+
.blog_wp-cat-tabs { margin-bottom: 4px; }
|
|
1347
1354
|
|
|
1348
|
-
.
|
|
1355
|
+
.blog_yoast-snippet-label-row {
|
|
1349
1356
|
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
1350
1357
|
}
|
|
1351
|
-
.
|
|
1352
|
-
.
|
|
1353
|
-
.
|
|
1354
|
-
.
|
|
1355
|
-
.
|
|
1356
|
-
.
|
|
1357
|
-
.
|
|
1358
|
-
.
|
|
1359
|
-
.
|
|
1360
|
-
.
|
|
1361
|
-
.
|
|
1358
|
+
.blog_yoast-snippet-actions-top { margin-top: 0; }
|
|
1359
|
+
.blog_yoast-accordion-panel,
|
|
1360
|
+
.blog_yoast-internal-links { display: flex; flex-direction: column; gap: 14px; }
|
|
1361
|
+
.blog_yoast-link-section { display: flex; flex-direction: column; gap: 6px; }
|
|
1362
|
+
.blog_yoast-link-section-title { margin: 0; font-size: 12.8px; font-weight: 700; color: var(--d-ink); }
|
|
1363
|
+
.blog_yoast-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
1364
|
+
.blog_yoast-link-list li { font-size: 12.4px; padding: 8px 10px; background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); }
|
|
1365
|
+
.blog_yoast-link-label { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--d-ink); }
|
|
1366
|
+
.blog_yoast-link-href { display: block; font-size: 11px; color: var(--d-ink-3); margin-top: 2px; word-break: break-all; }
|
|
1367
|
+
.blog_yoast-insight-value { font-size: 22px; font-weight: 700; color: var(--d-ink); font-variant-numeric: tabular-nums; margin: 0; }
|
|
1368
|
+
.blog_yoast-premium-inline-btn {
|
|
1362
1369
|
display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.6px; font-weight: 600;
|
|
1363
1370
|
padding: 8px 12px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1364
1371
|
background: var(--d-sunk); color: var(--d-ink-3); cursor: not-allowed;
|
|
1365
1372
|
}
|
|
1366
1373
|
|
|
1367
|
-
.
|
|
1368
|
-
.
|
|
1369
|
-
.
|
|
1374
|
+
.blog_tag-most-used { margin-top: 4px; }
|
|
1375
|
+
.blog_tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1376
|
+
.blog_tag-cloud-item {
|
|
1370
1377
|
font: inherit; font-size: 12px; padding: 3px 8px; border-radius: var(--d-radius-sm);
|
|
1371
1378
|
border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-accent); cursor: pointer;
|
|
1372
1379
|
}
|
|
1373
|
-
.
|
|
1380
|
+
.blog_tag-cloud-item:hover { border-color: var(--d-accent); background: var(--d-accent-soft); }
|
|
1374
1381
|
|
|
1375
1382
|
/* ============================ modals ============================ */
|
|
1376
1383
|
|
|
1377
|
-
.
|
|
1384
|
+
.blog_modal-backdrop {
|
|
1378
1385
|
position: fixed; inset: 0; background: rgba(10, 11, 16, 0.55); backdrop-filter: blur(2px);
|
|
1379
1386
|
z-index: 100; display: grid; place-items: center; padding: 20px;
|
|
1380
1387
|
}
|
|
1381
|
-
.
|
|
1388
|
+
.blog_modal {
|
|
1382
1389
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1383
1390
|
box-shadow: var(--d-shadow-lg); width: min(560px, 100%); max-height: min(86vh, 780px);
|
|
1384
1391
|
display: flex; flex-direction: column; overflow: hidden;
|
|
1385
1392
|
}
|
|
1386
|
-
.
|
|
1387
|
-
.
|
|
1388
|
-
.
|
|
1389
|
-
.
|
|
1390
|
-
.
|
|
1391
|
-
.
|
|
1392
|
-
.
|
|
1393
|
-
@media (min-width: 720px) { .
|
|
1394
|
-
.
|
|
1395
|
-
.
|
|
1396
|
-
.
|
|
1397
|
-
.
|
|
1393
|
+
.blog_modal-wide { width: min(960px, 100%); }
|
|
1394
|
+
.blog_modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-rule); }
|
|
1395
|
+
.blog_modal-head h2 { margin: 0; font-size: 14.5px; font-weight: 700; }
|
|
1396
|
+
.blog_modal-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
1397
|
+
.blog_modal-head-actions .blog_fld { min-width: 190px; }
|
|
1398
|
+
.blog_modal-body { padding: 16px; overflow-y: auto; flex: 1; }
|
|
1399
|
+
.blog_modal-body.blog_detail { display: grid; gap: 16px; }
|
|
1400
|
+
@media (min-width: 720px) { .blog_modal-body.blog_detail { grid-template-columns: 260px 1fr; } }
|
|
1401
|
+
.blog_detail-img { width: 100%; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); display: block; }
|
|
1402
|
+
.blog_modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--d-rule); background: var(--d-surface-2); flex-wrap: wrap; }
|
|
1403
|
+
.blog_modal-foot-actions { display: flex; gap: 8px; align-items: center; }
|
|
1404
|
+
.blog_modal-more { display: flex; justify-content: center; padding: 14px 0 2px; }
|
|
1398
1405
|
|
|
1399
1406
|
/* In-page post preview (stays in admin layout — no new tab) */
|
|
1400
|
-
.
|
|
1407
|
+
.blog_ed-preview {
|
|
1401
1408
|
position: fixed;
|
|
1402
1409
|
inset: 0;
|
|
1403
1410
|
z-index: 120;
|
|
@@ -1410,7 +1417,7 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1410
1417
|
background: var(--d-paper, #fff);
|
|
1411
1418
|
overscroll-behavior: none;
|
|
1412
1419
|
}
|
|
1413
|
-
.
|
|
1420
|
+
.blog_ed-preview-bar {
|
|
1414
1421
|
flex: 0 0 auto;
|
|
1415
1422
|
display: flex;
|
|
1416
1423
|
align-items: center;
|
|
@@ -1422,15 +1429,15 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1422
1429
|
background: var(--d-surface);
|
|
1423
1430
|
box-shadow: var(--d-shadow);
|
|
1424
1431
|
}
|
|
1425
|
-
.
|
|
1426
|
-
.
|
|
1432
|
+
.blog_ed-preview-bar-left,
|
|
1433
|
+
.blog_ed-preview-bar-right {
|
|
1427
1434
|
display: flex;
|
|
1428
1435
|
align-items: center;
|
|
1429
1436
|
gap: 10px;
|
|
1430
1437
|
flex-wrap: wrap;
|
|
1431
1438
|
min-width: 0;
|
|
1432
1439
|
}
|
|
1433
|
-
.
|
|
1440
|
+
.blog_ed-preview-badge {
|
|
1434
1441
|
font-size: 11px;
|
|
1435
1442
|
font-weight: 750;
|
|
1436
1443
|
letter-spacing: 0.06em;
|
|
@@ -1441,7 +1448,7 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1441
1448
|
border-radius: 999px;
|
|
1442
1449
|
padding: 3px 9px;
|
|
1443
1450
|
}
|
|
1444
|
-
.
|
|
1451
|
+
.blog_ed-preview-title {
|
|
1445
1452
|
font-size: 13.5px;
|
|
1446
1453
|
font-weight: 650;
|
|
1447
1454
|
color: var(--d-ink);
|
|
@@ -1450,7 +1457,7 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1450
1457
|
white-space: nowrap;
|
|
1451
1458
|
max-width: min(52vw, 420px);
|
|
1452
1459
|
}
|
|
1453
|
-
.
|
|
1460
|
+
.blog_ed-preview-frame {
|
|
1454
1461
|
flex: 1 1 auto;
|
|
1455
1462
|
min-height: 0;
|
|
1456
1463
|
width: 100%;
|
|
@@ -1461,206 +1468,206 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1461
1468
|
}
|
|
1462
1469
|
|
|
1463
1470
|
/* Parent page must not scroll under the preview overlay */
|
|
1464
|
-
html.
|
|
1465
|
-
body.
|
|
1471
|
+
html.blog_ed-preview-open,
|
|
1472
|
+
body.blog_ed-preview-open {
|
|
1466
1473
|
overflow: hidden !important;
|
|
1467
1474
|
overscroll-behavior: none;
|
|
1468
1475
|
}
|
|
1469
1476
|
|
|
1470
|
-
.
|
|
1471
|
-
.
|
|
1477
|
+
.blog_dropzone { position: relative; }
|
|
1478
|
+
.blog_dropzone.blog_is-dragging { outline: 2px dashed var(--d-accent); outline-offset: -6px; background: var(--d-accent-soft); }
|
|
1472
1479
|
|
|
1473
|
-
.
|
|
1474
|
-
.
|
|
1480
|
+
.blog_pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
|
|
1481
|
+
.blog_pick {
|
|
1475
1482
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1476
1483
|
background: var(--d-sunk); cursor: pointer; padding: 0; text-align: left; display: flex; flex-direction: column;
|
|
1477
1484
|
}
|
|
1478
|
-
.
|
|
1479
|
-
.
|
|
1480
|
-
.
|
|
1481
|
-
.
|
|
1482
|
-
.
|
|
1483
|
-
.
|
|
1484
|
-
.
|
|
1485
|
-
.
|
|
1485
|
+
.blog_pick:hover { border-color: var(--d-accent); }
|
|
1486
|
+
.blog_pick.blog_is-picked { border-color: var(--d-accent); box-shadow: var(--d-ring); }
|
|
1487
|
+
.blog_pick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
1488
|
+
.blog_pick-blank { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--d-rule); }
|
|
1489
|
+
.blog_pick-meta { padding: 7px 9px; font-size: 11.6px; background: var(--d-surface); }
|
|
1490
|
+
.blog_pick-alt { display: block; color: var(--d-ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1491
|
+
.blog_pick-alt.blog_is-missing, .blog_media-alt.blog_is-missing { color: var(--d-warn); }
|
|
1492
|
+
.blog_pick-sub { display: block; color: var(--d-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
|
|
1486
1493
|
|
|
1487
1494
|
/* ============================ media library ============================ */
|
|
1488
1495
|
|
|
1489
|
-
.
|
|
1490
|
-
.
|
|
1496
|
+
.blog_media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; padding: 16px 17px; }
|
|
1497
|
+
.blog_media-card {
|
|
1491
1498
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1492
1499
|
background: var(--d-sunk); text-align: left; padding: 0; cursor: pointer; display: flex; flex-direction: column;
|
|
1493
1500
|
}
|
|
1494
|
-
.
|
|
1495
|
-
.
|
|
1496
|
-
.
|
|
1497
|
-
.
|
|
1498
|
-
.
|
|
1501
|
+
.blog_media-card:hover { border-color: var(--d-accent); }
|
|
1502
|
+
.blog_media-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
1503
|
+
.blog_media-meta { padding: 8px 10px; font-size: 11.8px; background: var(--d-surface); }
|
|
1504
|
+
.blog_media-alt { display: block; color: var(--d-ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1505
|
+
.blog_media-sub { display: block; color: var(--d-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
|
|
1499
1506
|
|
|
1500
1507
|
/* post format panels — WordPress-style format-specific editor */
|
|
1501
|
-
.
|
|
1502
|
-
.
|
|
1508
|
+
.blog_format-chip { color: var(--d-accent-ink); font-weight: 600; }
|
|
1509
|
+
.blog_format-panel {
|
|
1503
1510
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius); background: var(--d-surface);
|
|
1504
1511
|
box-shadow: var(--d-shadow); overflow: hidden;
|
|
1505
1512
|
}
|
|
1506
|
-
.
|
|
1513
|
+
.blog_format-panel-head {
|
|
1507
1514
|
display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
|
|
1508
1515
|
border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
|
|
1509
1516
|
}
|
|
1510
|
-
.
|
|
1517
|
+
.blog_format-panel-icon {
|
|
1511
1518
|
width: 36px; height: 36px; border-radius: var(--d-radius-sm); display: grid; place-items: center;
|
|
1512
1519
|
background: var(--d-accent-soft); color: var(--d-accent-ink); font-size: 18px; font-weight: 700; flex-shrink: 0;
|
|
1513
1520
|
}
|
|
1514
|
-
.
|
|
1515
|
-
.
|
|
1516
|
-
.
|
|
1517
|
-
.
|
|
1521
|
+
.blog_format-panel-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.02em; }
|
|
1522
|
+
.blog_format-panel-body { padding: 14px 16px 16px; }
|
|
1523
|
+
.blog_format-panel-video .blog_format-embed,
|
|
1524
|
+
.blog_format-panel-body .blog_format-embed {
|
|
1518
1525
|
border-radius: var(--d-radius);
|
|
1519
1526
|
overflow: hidden;
|
|
1520
1527
|
background: #111;
|
|
1521
1528
|
}
|
|
1522
|
-
.
|
|
1529
|
+
.blog_format-video-preview {
|
|
1523
1530
|
display: block;
|
|
1524
1531
|
width: 100%;
|
|
1525
1532
|
max-height: 360px;
|
|
1526
1533
|
border-radius: var(--d-radius-sm);
|
|
1527
1534
|
background: #111;
|
|
1528
1535
|
}
|
|
1529
|
-
.
|
|
1536
|
+
.blog_format-media-hero {
|
|
1530
1537
|
margin: 0;
|
|
1531
1538
|
display: flex;
|
|
1532
1539
|
flex-direction: column;
|
|
1533
1540
|
gap: 10px;
|
|
1534
1541
|
}
|
|
1535
|
-
.
|
|
1542
|
+
.blog_format-media-placeholder {
|
|
1536
1543
|
width: 100%;
|
|
1537
1544
|
aspect-ratio: 16 / 9;
|
|
1538
1545
|
border-radius: var(--d-radius-sm);
|
|
1539
1546
|
background: var(--d-sunk);
|
|
1540
1547
|
}
|
|
1541
|
-
.
|
|
1542
|
-
.
|
|
1543
|
-
.
|
|
1548
|
+
.blog_format-media-empty { width: 100%; min-height: 140px; flex-direction: column; }
|
|
1549
|
+
.blog_format-upload-error { margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--d-radius-sm); }
|
|
1550
|
+
.blog_format-panel-body .blog_format-embed {
|
|
1544
1551
|
position: relative; aspect-ratio: 16 / 9; border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1545
1552
|
background: #111; border: 1px solid var(--d-rule);
|
|
1546
1553
|
}
|
|
1547
|
-
.
|
|
1548
|
-
.
|
|
1549
|
-
.
|
|
1550
|
-
.
|
|
1554
|
+
.blog_format-embed iframe, .blog_format-embed video { width: 100%; height: 100%; border: 0; display: block; }
|
|
1555
|
+
.blog_format-audio { width: 100%; }
|
|
1556
|
+
.blog_format-quote-input { font-family: var(--d-read); font-size: 16px; line-height: 1.5; }
|
|
1557
|
+
.blog_format-quote-preview {
|
|
1551
1558
|
margin: 0; padding: 16px 18px; border-left: 4px solid var(--d-accent);
|
|
1552
1559
|
background: var(--d-sunk); border-radius: 0 var(--d-radius-sm) var(--d-radius-sm) 0;
|
|
1553
1560
|
font-family: var(--d-read); font-size: 17px; line-height: 1.55;
|
|
1554
1561
|
}
|
|
1555
|
-
.
|
|
1556
|
-
.
|
|
1562
|
+
.blog_format-quote-preview cite { display: block; margin-top: 8px; font-size: 13px; color: var(--d-ink-3); font-style: normal; }
|
|
1563
|
+
.blog_format-link-preview {
|
|
1557
1564
|
display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--d-rule);
|
|
1558
1565
|
border-radius: var(--d-radius-sm); background: var(--d-sunk); text-decoration: none; color: inherit;
|
|
1559
1566
|
}
|
|
1560
|
-
.
|
|
1561
|
-
.
|
|
1562
|
-
.
|
|
1563
|
-
.
|
|
1564
|
-
.
|
|
1565
|
-
.
|
|
1566
|
-
.
|
|
1567
|
+
.blog_format-link-preview:hover { border-color: var(--d-accent); }
|
|
1568
|
+
.blog_format-link-title { font-weight: 650; color: var(--d-accent-ink); }
|
|
1569
|
+
.blog_format-link-url { font-size: 12px; color: var(--d-ink-3); word-break: break-all; }
|
|
1570
|
+
.blog_format-image-hero { margin: 0; }
|
|
1571
|
+
.blog_format-image-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--d-radius-sm); display: block; }
|
|
1572
|
+
.blog_format-image-empty { width: 100%; min-height: 200px; }
|
|
1573
|
+
.blog_format-gallery-grid {
|
|
1567
1574
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
|
|
1568
1575
|
}
|
|
1569
|
-
.
|
|
1570
|
-
.
|
|
1571
|
-
.
|
|
1576
|
+
.blog_format-gallery-item { position: relative; margin: 0; border-radius: var(--d-radius-sm); overflow: hidden; border: 1px solid var(--d-rule); }
|
|
1577
|
+
.blog_format-gallery-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
|
|
1578
|
+
.blog_format-gallery-remove {
|
|
1572
1579
|
position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 999px;
|
|
1573
1580
|
background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 12px;
|
|
1574
1581
|
}
|
|
1575
|
-
.
|
|
1582
|
+
.blog_format-gallery-add {
|
|
1576
1583
|
min-height: 110px; border: 1px dashed var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk);
|
|
1577
1584
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
|
|
1578
1585
|
font: inherit; font-size: 12.5px; color: var(--d-ink-2); cursor: pointer;
|
|
1579
1586
|
}
|
|
1580
|
-
.
|
|
1581
|
-
.
|
|
1587
|
+
.blog_format-gallery-add:hover { border-color: var(--d-accent); color: var(--d-accent-ink); }
|
|
1588
|
+
.blog_ed-compact .blog_ed-input { min-height: 220px; }
|
|
1582
1589
|
|
|
1583
1590
|
/* ============================ SEO modules ============================ */
|
|
1584
1591
|
|
|
1585
|
-
.
|
|
1586
|
-
.
|
|
1587
|
-
.
|
|
1592
|
+
.blog_seo-module { display: flex; flex-direction: column; gap: 16px; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
|
|
1593
|
+
.blog_seo-grid { align-items: start; }
|
|
1594
|
+
.blog_seo-banner {
|
|
1588
1595
|
padding: 12px 14px; border-radius: var(--d-radius-sm); font-size: 13px; line-height: 1.45;
|
|
1589
1596
|
border: 1px solid var(--d-rule); background: var(--d-sunk); color: var(--d-ink-2);
|
|
1590
1597
|
}
|
|
1591
|
-
.
|
|
1598
|
+
.blog_seo-banner-warn {
|
|
1592
1599
|
border-color: color-mix(in srgb, #c9851a 35%, var(--d-rule));
|
|
1593
1600
|
background: color-mix(in srgb, #c9851a 10%, var(--d-card));
|
|
1594
1601
|
}
|
|
1595
|
-
.
|
|
1602
|
+
.blog_seo-banner code, .blog_seo-checklist code, .blog_seo-steps code, .blog_seo-preview {
|
|
1596
1603
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
1597
1604
|
}
|
|
1598
|
-
.
|
|
1605
|
+
.blog_seo-status {
|
|
1599
1606
|
display: flex; gap: 12px; align-items: flex-start; padding: 12px 13px;
|
|
1600
1607
|
border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); background: var(--d-sunk);
|
|
1601
1608
|
}
|
|
1602
|
-
.
|
|
1603
|
-
.
|
|
1604
|
-
.
|
|
1609
|
+
.blog_seo-status strong { display: block; font-size: 13.2px; font-weight: 650; color: var(--d-ink); }
|
|
1610
|
+
.blog_seo-status p { margin: 3px 0 0; font-size: 12.6px; color: var(--d-ink-3); line-height: 1.45; }
|
|
1611
|
+
.blog_seo-status-dot {
|
|
1605
1612
|
width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
|
|
1606
1613
|
background: var(--d-ink-3);
|
|
1607
1614
|
}
|
|
1608
|
-
.
|
|
1609
|
-
.
|
|
1610
|
-
.
|
|
1615
|
+
.blog_seo-status.blog_is-ok .blog_seo-status-dot { background: #2f8f5b; box-shadow: 0 0 0 4px color-mix(in srgb, #2f8f5b 18%, transparent); }
|
|
1616
|
+
.blog_seo-status.blog_is-warn .blog_seo-status-dot { background: #c9851a; box-shadow: 0 0 0 4px color-mix(in srgb, #c9851a 18%, transparent); }
|
|
1617
|
+
.blog_seo-preview {
|
|
1611
1618
|
margin: 0; padding: 14px 15px; border-radius: var(--d-radius-sm);
|
|
1612
1619
|
background: #12161f; color: #d7deea; font-size: 12.4px; line-height: 1.55;
|
|
1613
1620
|
overflow: auto; white-space: pre-wrap; word-break: break-word;
|
|
1614
1621
|
}
|
|
1615
|
-
.
|
|
1616
|
-
.
|
|
1622
|
+
.blog_seo-preview-sm { font-size: 11.8px; padding: 10px 12px; }
|
|
1623
|
+
.blog_seo-checklist, .blog_seo-steps {
|
|
1617
1624
|
margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px;
|
|
1618
1625
|
font-size: 13.2px; color: var(--d-ink-2); line-height: 1.45;
|
|
1619
1626
|
}
|
|
1620
|
-
.
|
|
1627
|
+
.blog_seo-stat-row {
|
|
1621
1628
|
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
|
|
1622
1629
|
}
|
|
1623
|
-
.
|
|
1630
|
+
.blog_seo-stat {
|
|
1624
1631
|
padding: 16px 17px; border-radius: var(--d-radius); border: 1px solid var(--d-rule);
|
|
1625
1632
|
background: var(--d-card); display: flex; flex-direction: column; gap: 4px;
|
|
1626
1633
|
}
|
|
1627
|
-
.
|
|
1634
|
+
.blog_seo-stat-value {
|
|
1628
1635
|
font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--d-ink);
|
|
1629
1636
|
font-variant-numeric: tabular-nums;
|
|
1630
1637
|
}
|
|
1631
|
-
.
|
|
1632
|
-
.
|
|
1633
|
-
.
|
|
1634
|
-
.
|
|
1635
|
-
.
|
|
1638
|
+
.blog_seo-stat-label { font-size: 12px; color: var(--d-ink-3); font-weight: 550; }
|
|
1639
|
+
.blog_seo-link-list { list-style: none; margin: 0; padding: 0; }
|
|
1640
|
+
.blog_seo-link-list li { border-top: 1px solid var(--d-rule); }
|
|
1641
|
+
.blog_seo-link-list li:first-child { border-top: 0; }
|
|
1642
|
+
.blog_seo-link-list a {
|
|
1636
1643
|
display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
|
|
1637
1644
|
padding: 12px 17px; text-decoration: none; color: var(--d-ink); font-size: 13.2px;
|
|
1638
1645
|
}
|
|
1639
|
-
.
|
|
1640
|
-
.
|
|
1641
|
-
.
|
|
1646
|
+
.blog_seo-link-list a:hover { background: var(--d-sunk); }
|
|
1647
|
+
.blog_seo-link-list .blog_mono { color: var(--d-ink-3); font-size: 12px; }
|
|
1648
|
+
.blog_redirect-form {
|
|
1642
1649
|
display: grid; grid-template-columns: 1.2fr 1.2fr 140px; gap: 12px; align-items: end;
|
|
1643
1650
|
}
|
|
1644
|
-
.
|
|
1645
|
-
.
|
|
1646
|
-
.
|
|
1651
|
+
.blog_redirect-form-note { grid-column: 1 / -1; }
|
|
1652
|
+
.blog_redirect-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
|
|
1653
|
+
.blog_btn-sm { padding: 4px 9px; font-size: 12.2px; }
|
|
1647
1654
|
|
|
1648
1655
|
/* —— Add / Edit Redirection layout —— */
|
|
1649
|
-
.
|
|
1656
|
+
.blog_import-file {
|
|
1650
1657
|
display: flex;
|
|
1651
1658
|
align-items: center;
|
|
1652
1659
|
gap: 12px;
|
|
1653
1660
|
flex-wrap: wrap;
|
|
1654
1661
|
}
|
|
1655
|
-
.
|
|
1656
|
-
.
|
|
1662
|
+
.blog_import-file-name { font-size: 12.6px; color: var(--d-ink-3); }
|
|
1663
|
+
.blog_import-errors {
|
|
1657
1664
|
margin: 8px 0 0;
|
|
1658
1665
|
padding-left: 18px;
|
|
1659
1666
|
font-size: 12.6px;
|
|
1660
1667
|
color: var(--d-crit);
|
|
1661
1668
|
}
|
|
1662
1669
|
|
|
1663
|
-
.
|
|
1670
|
+
.blog_export-fieldset {
|
|
1664
1671
|
border: 0;
|
|
1665
1672
|
margin: 0;
|
|
1666
1673
|
padding: 0;
|
|
@@ -1668,7 +1675,7 @@ body.ed-preview-open {
|
|
|
1668
1675
|
flex-direction: column;
|
|
1669
1676
|
gap: 8px;
|
|
1670
1677
|
}
|
|
1671
|
-
.
|
|
1678
|
+
.blog_export-fieldset-label {
|
|
1672
1679
|
padding: 0;
|
|
1673
1680
|
margin: 0 0 4px;
|
|
1674
1681
|
font-size: 12.4px;
|
|
@@ -1676,7 +1683,7 @@ body.ed-preview-open {
|
|
|
1676
1683
|
letter-spacing: 0.02em;
|
|
1677
1684
|
color: var(--d-ink-2);
|
|
1678
1685
|
}
|
|
1679
|
-
.
|
|
1686
|
+
.blog_export-option {
|
|
1680
1687
|
display: grid;
|
|
1681
1688
|
grid-template-columns: auto 1fr;
|
|
1682
1689
|
gap: 12px;
|
|
@@ -1688,43 +1695,43 @@ body.ed-preview-open {
|
|
|
1688
1695
|
cursor: pointer;
|
|
1689
1696
|
transition: border-color 0.12s ease, background 0.12s ease;
|
|
1690
1697
|
}
|
|
1691
|
-
.
|
|
1692
|
-
.
|
|
1698
|
+
.blog_export-option:hover { border-color: var(--d-accent); }
|
|
1699
|
+
.blog_export-option.blog_is-on {
|
|
1693
1700
|
border-color: var(--d-accent);
|
|
1694
1701
|
background: color-mix(in srgb, var(--d-accent) 8%, var(--d-card));
|
|
1695
1702
|
}
|
|
1696
|
-
.
|
|
1703
|
+
.blog_export-option input {
|
|
1697
1704
|
margin-top: 3px;
|
|
1698
1705
|
accent-color: var(--d-accent);
|
|
1699
1706
|
}
|
|
1700
|
-
.
|
|
1701
|
-
.
|
|
1702
|
-
.
|
|
1703
|
-
.
|
|
1707
|
+
.blog_export-option-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
1708
|
+
.blog_export-option-label { font-size: 14px; font-weight: 700; color: var(--d-ink); }
|
|
1709
|
+
.blog_export-option-desc { font-size: 12.8px; line-height: 1.45; color: var(--d-ink-3); }
|
|
1710
|
+
.blog_sr-only {
|
|
1704
1711
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
1705
1712
|
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
|
1706
1713
|
}
|
|
1707
1714
|
|
|
1708
|
-
.
|
|
1709
|
-
.
|
|
1715
|
+
.blog_redir-analytics { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
|
|
1716
|
+
.blog_redir-analytics-grid {
|
|
1710
1717
|
display: grid;
|
|
1711
1718
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1712
1719
|
gap: 14px;
|
|
1713
1720
|
}
|
|
1714
|
-
.
|
|
1715
|
-
.
|
|
1716
|
-
.
|
|
1717
|
-
.
|
|
1721
|
+
.blog_redir-rules-block { margin-top: 4px; }
|
|
1722
|
+
.blog_redir-log-tbl .blog_redir-log-path { color: var(--d-ink); }
|
|
1723
|
+
.blog_redir-log-tbl .blog_redir-log-to { color: var(--d-ink-3); }
|
|
1724
|
+
.blog_redir-log-status {
|
|
1718
1725
|
font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
|
|
1719
1726
|
}
|
|
1720
|
-
.
|
|
1721
|
-
.
|
|
1727
|
+
.blog_redir-log-status.blog_is-ok { color: var(--d-delta-up); }
|
|
1728
|
+
.blog_redir-log-status.blog_is-bad { color: var(--d-crit); }
|
|
1722
1729
|
|
|
1723
1730
|
@media (max-width: 900px) {
|
|
1724
|
-
.
|
|
1731
|
+
.blog_redir-analytics-grid { grid-template-columns: 1fr; }
|
|
1725
1732
|
}
|
|
1726
|
-
.
|
|
1727
|
-
.
|
|
1733
|
+
.blog_redir-body { display: flex; flex-direction: column; gap: 22px; }
|
|
1734
|
+
.blog_redir-row {
|
|
1728
1735
|
display: grid;
|
|
1729
1736
|
grid-template-columns: 160px minmax(0, 1fr);
|
|
1730
1737
|
gap: 16px 20px;
|
|
@@ -1732,32 +1739,32 @@ body.ed-preview-open {
|
|
|
1732
1739
|
padding-bottom: 18px;
|
|
1733
1740
|
border-bottom: 1px solid var(--d-rule);
|
|
1734
1741
|
}
|
|
1735
|
-
.
|
|
1736
|
-
.
|
|
1742
|
+
.blog_redir-row.blog_is-muted { opacity: 0.72; }
|
|
1743
|
+
.blog_redir-label {
|
|
1737
1744
|
font-size: 12.4px; font-weight: 700; letter-spacing: 0.02em;
|
|
1738
1745
|
color: var(--d-ink-2); padding-top: 10px;
|
|
1739
1746
|
}
|
|
1740
|
-
.
|
|
1741
|
-
.
|
|
1742
|
-
.
|
|
1747
|
+
.blog_redir-field { min-width: 0; }
|
|
1748
|
+
.blog_redir-field.blog_stack { display: flex; flex-direction: column; gap: 10px; }
|
|
1749
|
+
.blog_redir-source-line {
|
|
1743
1750
|
display: flex;
|
|
1744
1751
|
align-items: stretch;
|
|
1745
1752
|
gap: 10px;
|
|
1746
1753
|
min-width: 0;
|
|
1747
1754
|
}
|
|
1748
|
-
.
|
|
1755
|
+
.blog_redir-source-line > .blog_fld.blog_mono {
|
|
1749
1756
|
flex: 1 1 auto;
|
|
1750
1757
|
min-width: 0;
|
|
1751
1758
|
width: auto;
|
|
1752
1759
|
}
|
|
1753
|
-
select.
|
|
1760
|
+
select.blog_fld.blog_redir-match {
|
|
1754
1761
|
flex: 0 0 132px;
|
|
1755
1762
|
width: 132px;
|
|
1756
1763
|
min-width: 132px;
|
|
1757
1764
|
max-width: 132px;
|
|
1758
1765
|
padding-right: 2rem;
|
|
1759
1766
|
}
|
|
1760
|
-
.
|
|
1767
|
+
.blog_redir-remove {
|
|
1761
1768
|
appearance: none; cursor: pointer;
|
|
1762
1769
|
display: inline-flex; align-items: center; justify-content: center;
|
|
1763
1770
|
flex: 0 0 36px;
|
|
@@ -1766,88 +1773,88 @@ select.fld.redir-match {
|
|
|
1766
1773
|
background: var(--d-card); color: var(--d-crit);
|
|
1767
1774
|
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
|
|
1768
1775
|
}
|
|
1769
|
-
.
|
|
1770
|
-
.
|
|
1776
|
+
.blog_redir-remove svg { width: 14px; height: 14px; display: block; }
|
|
1777
|
+
.blog_redir-remove:hover:not(:disabled) {
|
|
1771
1778
|
border-color: color-mix(in srgb, var(--d-crit) 55%, var(--d-rule));
|
|
1772
1779
|
background: color-mix(in srgb, var(--d-crit) 8%, transparent);
|
|
1773
1780
|
}
|
|
1774
|
-
.
|
|
1775
|
-
.
|
|
1776
|
-
.
|
|
1781
|
+
.blog_redir-remove:disabled { opacity: 0.35; cursor: not-allowed; }
|
|
1782
|
+
.blog_redir-add { align-self: flex-start; margin-top: 2px; }
|
|
1783
|
+
.blog_redir-type-grid {
|
|
1777
1784
|
display: grid;
|
|
1778
1785
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
1779
1786
|
gap: 8px;
|
|
1780
1787
|
}
|
|
1781
|
-
.
|
|
1788
|
+
.blog_redir-type-btn {
|
|
1782
1789
|
appearance: none; cursor: pointer; text-align: left;
|
|
1783
1790
|
padding: 10px 12px; border-radius: var(--d-radius-sm);
|
|
1784
1791
|
border: 1px solid var(--d-rule); background: var(--d-card);
|
|
1785
1792
|
color: var(--d-ink); font-size: 12.8px; font-weight: 600; line-height: 1.3;
|
|
1786
1793
|
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
|
|
1787
1794
|
}
|
|
1788
|
-
.
|
|
1789
|
-
.
|
|
1795
|
+
.blog_redir-type-btn:hover { border-color: var(--d-accent); color: var(--d-accent-ink); }
|
|
1796
|
+
.blog_redir-type-btn.blog_is-on {
|
|
1790
1797
|
background: var(--d-accent); border-color: var(--d-accent); color: #fff;
|
|
1791
1798
|
}
|
|
1792
|
-
.
|
|
1799
|
+
.blog_redir-status {
|
|
1793
1800
|
display: inline-flex; border: 1px solid var(--d-rule); border-radius: 999px; overflow: hidden;
|
|
1794
1801
|
}
|
|
1795
|
-
.
|
|
1802
|
+
.blog_redir-status-btn {
|
|
1796
1803
|
appearance: none; cursor: pointer; border: 0; background: transparent;
|
|
1797
1804
|
padding: 8px 16px; font-size: 12.8px; font-weight: 650; color: var(--d-ink-2);
|
|
1798
1805
|
}
|
|
1799
|
-
.
|
|
1800
|
-
.
|
|
1801
|
-
.
|
|
1806
|
+
.blog_redir-status-btn.blog_is-on { background: var(--d-accent); color: #fff; }
|
|
1807
|
+
.blog_redir-note { margin-top: 4px; }
|
|
1808
|
+
.blog_redir-actions {
|
|
1802
1809
|
display: flex; justify-content: space-between; align-items: center; gap: 12px;
|
|
1803
1810
|
padding-top: 8px; flex-wrap: wrap;
|
|
1804
1811
|
}
|
|
1805
|
-
.
|
|
1812
|
+
.blog_btn.blog_danger-outline {
|
|
1806
1813
|
border-color: color-mix(in srgb, var(--d-crit) 55%, var(--d-rule));
|
|
1807
1814
|
color: var(--d-crit);
|
|
1808
1815
|
}
|
|
1809
|
-
.
|
|
1810
|
-
.
|
|
1816
|
+
.blog_btn.blog_danger-outline:hover { background: color-mix(in srgb, var(--d-crit) 8%, transparent); }
|
|
1817
|
+
.blog_btn-text {
|
|
1811
1818
|
appearance: none; background: none; border: 0; cursor: pointer;
|
|
1812
1819
|
font-size: 12.6px; font-weight: 650; color: var(--d-ink-3); padding: 4px 2px;
|
|
1813
1820
|
}
|
|
1814
|
-
.
|
|
1815
|
-
.
|
|
1821
|
+
.blog_btn-text.blog_danger { color: var(--d-crit); }
|
|
1822
|
+
.blog_btn-text:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
1816
1823
|
|
|
1817
|
-
.
|
|
1818
|
-
.
|
|
1824
|
+
.blog_seo-detail-bar { margin-bottom: 4px; }
|
|
1825
|
+
.blog_seo-dl {
|
|
1819
1826
|
display: grid; gap: 14px; margin: 0;
|
|
1820
1827
|
}
|
|
1821
|
-
.
|
|
1822
|
-
.
|
|
1828
|
+
.blog_seo-dl > div { display: grid; gap: 4px; }
|
|
1829
|
+
.blog_seo-dl dt {
|
|
1823
1830
|
font-size: 11.2px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
|
|
1824
1831
|
color: var(--d-ink-3); margin: 0;
|
|
1825
1832
|
}
|
|
1826
|
-
.
|
|
1827
|
-
.
|
|
1833
|
+
.blog_seo-dl dd { margin: 0; font-size: 13.6px; color: var(--d-ink); }
|
|
1834
|
+
.blog_seo-dl-panel {
|
|
1828
1835
|
padding: 15px 17px; border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1829
1836
|
background: var(--d-card);
|
|
1830
1837
|
}
|
|
1831
|
-
.
|
|
1838
|
+
.blog_chip-draft { background: var(--d-sunk); color: var(--d-ink-3); border-color: var(--d-rule); }
|
|
1832
1839
|
|
|
1833
1840
|
@media (max-width: 900px) {
|
|
1834
|
-
.
|
|
1835
|
-
.
|
|
1836
|
-
.
|
|
1837
|
-
.
|
|
1838
|
-
.
|
|
1841
|
+
.blog_seo-stat-row { grid-template-columns: 1fr; }
|
|
1842
|
+
.blog_redirect-form { grid-template-columns: 1fr; }
|
|
1843
|
+
.blog_redir-row { grid-template-columns: 1fr; gap: 8px; }
|
|
1844
|
+
.blog_redir-label { padding-top: 0; }
|
|
1845
|
+
.blog_redir-source-line {
|
|
1839
1846
|
flex-wrap: wrap;
|
|
1840
1847
|
}
|
|
1841
|
-
.
|
|
1848
|
+
.blog_redir-source-line > .blog_fld.blog_mono {
|
|
1842
1849
|
flex: 1 1 100%;
|
|
1843
1850
|
}
|
|
1844
|
-
select.
|
|
1851
|
+
select.blog_fld.blog_redir-match {
|
|
1845
1852
|
flex: 1 1 auto;
|
|
1846
1853
|
width: auto;
|
|
1847
1854
|
min-width: 132px;
|
|
1848
1855
|
max-width: none;
|
|
1849
1856
|
}
|
|
1850
|
-
.
|
|
1857
|
+
.blog_redir-remove {
|
|
1851
1858
|
flex: 0 0 36px;
|
|
1852
1859
|
}
|
|
1853
1860
|
}
|
|
@@ -1855,14 +1862,14 @@ select.fld.redir-match {
|
|
|
1855
1862
|
/* ============================ responsive ============================ */
|
|
1856
1863
|
|
|
1857
1864
|
@media (max-width: 999px) {
|
|
1858
|
-
.
|
|
1859
|
-
.
|
|
1865
|
+
.blog_bp-admin-wrapper,
|
|
1866
|
+
.blog_shell {
|
|
1860
1867
|
height: auto;
|
|
1861
1868
|
min-height: 100vh;
|
|
1862
1869
|
min-height: 100dvh;
|
|
1863
1870
|
overflow: visible;
|
|
1864
1871
|
}
|
|
1865
|
-
.
|
|
1872
|
+
.blog_side {
|
|
1866
1873
|
flex-direction: column;
|
|
1867
1874
|
gap: 12px;
|
|
1868
1875
|
height: auto;
|
|
@@ -1870,45 +1877,45 @@ select.fld.redir-match {
|
|
|
1870
1877
|
overflow: visible;
|
|
1871
1878
|
position: static;
|
|
1872
1879
|
}
|
|
1873
|
-
.
|
|
1880
|
+
.blog_side-scroll {
|
|
1874
1881
|
flex-direction: row;
|
|
1875
1882
|
overflow-x: auto;
|
|
1876
1883
|
overflow-y: hidden;
|
|
1877
1884
|
gap: 20px;
|
|
1878
1885
|
max-height: none;
|
|
1879
1886
|
}
|
|
1880
|
-
.
|
|
1881
|
-
.
|
|
1887
|
+
.blog_side-group { min-width: 190px; }
|
|
1888
|
+
.blog_main {
|
|
1882
1889
|
height: auto;
|
|
1883
1890
|
overflow: visible;
|
|
1884
1891
|
}
|
|
1885
|
-
.
|
|
1892
|
+
.blog_body {
|
|
1886
1893
|
overflow: visible;
|
|
1887
1894
|
}
|
|
1888
|
-
.
|
|
1889
|
-
.
|
|
1890
|
-
.
|
|
1891
|
-
.
|
|
1895
|
+
.blog_top { position: static; }
|
|
1896
|
+
.blog_ed-bar { position: static; }
|
|
1897
|
+
.blog_ed.blog_is-active .blog_ed-chrome { top: 0; }
|
|
1898
|
+
.blog_panel-form { position: static; }
|
|
1892
1899
|
}
|
|
1893
1900
|
@media (max-width: 720px) {
|
|
1894
|
-
.
|
|
1895
|
-
.
|
|
1896
|
-
.
|
|
1897
|
-
.
|
|
1898
|
-
.
|
|
1901
|
+
.blog_body { padding: 16px 14px 60px; }
|
|
1902
|
+
.blog_top { padding: 12px 14px; }
|
|
1903
|
+
.blog_row { grid-template-columns: 1fr; }
|
|
1904
|
+
.blog_row-right { justify-content: flex-start; }
|
|
1905
|
+
.blog_ed-title { font-size: 22px; }
|
|
1899
1906
|
}
|
|
1900
1907
|
|
|
1901
1908
|
/* Scope to admin shell so public site hero animations keep working when
|
|
1902
1909
|
prefers-reduced-motion is unset; site-*.css handle their own reduce rules. */
|
|
1903
1910
|
@media (prefers-reduced-motion: reduce) {
|
|
1904
|
-
.
|
|
1905
|
-
.
|
|
1911
|
+
.blog_bp-admin-wrapper *,
|
|
1912
|
+
.blog_shell * {
|
|
1906
1913
|
transition: none !important;
|
|
1907
1914
|
animation: none !important;
|
|
1908
1915
|
}
|
|
1909
1916
|
}
|
|
1910
1917
|
|
|
1911
|
-
.
|
|
1918
|
+
.blog_route-loading {
|
|
1912
1919
|
display: flex;
|
|
1913
1920
|
flex-direction: column;
|
|
1914
1921
|
align-items: center;
|
|
@@ -1917,7 +1924,7 @@ select.fld.redir-match {
|
|
|
1917
1924
|
min-height: 42vh;
|
|
1918
1925
|
padding: 40px 20px;
|
|
1919
1926
|
}
|
|
1920
|
-
.
|
|
1927
|
+
.blog_route-loading-bar {
|
|
1921
1928
|
width: min(220px, 50vw);
|
|
1922
1929
|
height: 3px;
|
|
1923
1930
|
border-radius: 999px;
|
|
@@ -1925,7 +1932,7 @@ select.fld.redir-match {
|
|
|
1925
1932
|
background-size: 200% 100%;
|
|
1926
1933
|
animation: route-loading-slide 1s linear infinite;
|
|
1927
1934
|
}
|
|
1928
|
-
.
|
|
1935
|
+
.blog_route-loading-label {
|
|
1929
1936
|
margin: 0;
|
|
1930
1937
|
font-size: 13px;
|
|
1931
1938
|
color: var(--d-ink-3);
|
|
@@ -1937,9 +1944,9 @@ select.fld.redir-match {
|
|
|
1937
1944
|
|
|
1938
1945
|
|
|
1939
1946
|
|
|
1940
|
-
/* Public post details (BlogUploader article page) — scoped under .
|
|
1947
|
+
/* Public post details (BlogUploader article page) — scoped under .blog_bp-site-article */
|
|
1941
1948
|
|
|
1942
|
-
.
|
|
1949
|
+
.blog_bp-site-article {
|
|
1943
1950
|
--bp-paper: #ffffff;
|
|
1944
1951
|
--bp-paper-2: #f8f9fc;
|
|
1945
1952
|
--bp-ink: #16172b;
|
|
@@ -1962,23 +1969,23 @@ select.fld.redir-match {
|
|
|
1962
1969
|
}
|
|
1963
1970
|
|
|
1964
1971
|
/* Full-bleed inside admin Shell body */
|
|
1965
|
-
.
|
|
1972
|
+
.blog_body:has(.blog_admin-post-detail) {
|
|
1966
1973
|
padding: 0 !important;
|
|
1967
1974
|
gap: 0 !important;
|
|
1968
1975
|
}
|
|
1969
|
-
.
|
|
1976
|
+
.blog_admin-post-detail {
|
|
1970
1977
|
min-height: 100%;
|
|
1971
1978
|
}
|
|
1972
1979
|
|
|
1973
|
-
.
|
|
1980
|
+
.blog_bp-site-article .blog_progress {
|
|
1974
1981
|
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent;
|
|
1975
1982
|
}
|
|
1976
|
-
.
|
|
1983
|
+
.blog_bp-site-article .blog_progress span {
|
|
1977
1984
|
display: block; height: 100%; background: var(--bp-accent); transition: width 0.08s linear;
|
|
1978
1985
|
}
|
|
1979
1986
|
|
|
1980
1987
|
/* Match BlogUploader looping hero text animation (list media hero + article).
|
|
1981
|
-
Scoped to .
|
|
1988
|
+
Scoped to .blog_bp-root so both .blog_bp-site-index and .blog_bp-site-article inherit it. */
|
|
1982
1989
|
@keyframes hero-fade-slide-from-left {
|
|
1983
1990
|
0% { opacity: 0; transform: translateX(-56px); }
|
|
1984
1991
|
12% { opacity: 1; transform: translateX(0); }
|
|
@@ -1994,12 +2001,12 @@ select.fld.redir-match {
|
|
|
1994
2001
|
100% { opacity: 0; transform: translateX(56px); }
|
|
1995
2002
|
}
|
|
1996
2003
|
|
|
1997
|
-
.
|
|
2004
|
+
.blog_bp-root {
|
|
1998
2005
|
--bp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
1999
2006
|
--ease-out: var(--bp-ease-out);
|
|
2000
2007
|
}
|
|
2001
2008
|
|
|
2002
|
-
.
|
|
2009
|
+
.blog_bp-root .blog_hero-fade-slide {
|
|
2003
2010
|
--hero-loop: 5s;
|
|
2004
2011
|
animation-duration: var(--hero-loop);
|
|
2005
2012
|
animation-timing-function: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
|
|
@@ -2008,315 +2015,315 @@ select.fld.redir-match {
|
|
|
2008
2015
|
/* Negative delay keeps stagger offset on every loop */
|
|
2009
2016
|
animation-delay: calc(var(--slide-delay, 0ms) * -1);
|
|
2010
2017
|
}
|
|
2011
|
-
.
|
|
2018
|
+
.blog_bp-root .blog_hero-fade-slide-left {
|
|
2012
2019
|
animation-name: hero-fade-slide-from-left;
|
|
2013
2020
|
}
|
|
2014
|
-
.
|
|
2021
|
+
.blog_bp-root .blog_hero-fade-slide-right {
|
|
2015
2022
|
animation-name: hero-fade-slide-from-right;
|
|
2016
2023
|
}
|
|
2017
2024
|
@media (prefers-reduced-motion: reduce) {
|
|
2018
|
-
.
|
|
2025
|
+
.blog_bp-root .blog_hero-fade-slide {
|
|
2019
2026
|
opacity: 1;
|
|
2020
2027
|
transform: none;
|
|
2021
2028
|
animation: none !important;
|
|
2022
2029
|
}
|
|
2023
2030
|
}
|
|
2024
2031
|
|
|
2025
|
-
.
|
|
2026
|
-
.
|
|
2032
|
+
.blog_bp-site-article .blog_article-detail-hero { width: 100%; font-family: var(--bp-font-ui); }
|
|
2033
|
+
.blog_bp-site-article .blog_article-hero-media {
|
|
2027
2034
|
margin: 0 auto; width: 100%; max-width: 1200px; background: #0a0b10; overflow: hidden;
|
|
2028
2035
|
}
|
|
2029
|
-
.
|
|
2036
|
+
.blog_bp-site-article .blog_article-hero-visual {
|
|
2030
2037
|
display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto;
|
|
2031
2038
|
aspect-ratio: 1200 / 630; object-fit: cover; border: 0;
|
|
2032
2039
|
}
|
|
2033
|
-
.
|
|
2040
|
+
.blog_bp-site-article .blog_article-hero-caption {
|
|
2034
2041
|
margin: 0 auto; padding: 12px var(--bp-site-pad) 0; max-width: var(--bp-site-max);
|
|
2035
2042
|
font-size: 12.8px; color: var(--bp-ink-3);
|
|
2036
2043
|
}
|
|
2037
|
-
.
|
|
2044
|
+
.blog_bp-site-article .blog_article-hero-copy {
|
|
2038
2045
|
width: 100%;
|
|
2039
2046
|
padding: clamp(32px, 5vw, 56px) var(--bp-site-pad) clamp(20px, 3vw, 32px);
|
|
2040
2047
|
border-bottom: 1px solid var(--bp-rule);
|
|
2041
2048
|
background: linear-gradient(180deg, var(--bp-paper-2) 0%, var(--bp-paper) 100%);
|
|
2042
2049
|
}
|
|
2043
|
-
.
|
|
2050
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-copy {
|
|
2044
2051
|
border-bottom: 0;
|
|
2045
2052
|
background: transparent;
|
|
2046
2053
|
padding-top: 0;
|
|
2047
2054
|
}
|
|
2048
|
-
.
|
|
2049
|
-
.
|
|
2050
|
-
.
|
|
2055
|
+
.blog_bp-site-article .blog_article-hero-copy-inner { max-width: min(860px, 100%); margin: 0 auto; }
|
|
2056
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-copy-inner { max-width: 1200px; }
|
|
2057
|
+
.blog_bp-site-article .blog_article-hero-title {
|
|
2051
2058
|
font-family: var(--bp-font-display);
|
|
2052
2059
|
font-size: clamp(32px, 5.2vw, 52px);
|
|
2053
2060
|
line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; margin: 16px 0 0;
|
|
2054
2061
|
text-wrap: balance;
|
|
2055
2062
|
}
|
|
2056
|
-
.
|
|
2063
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-title {
|
|
2057
2064
|
font-size: clamp(36px, 5.8vw, 58px);
|
|
2058
2065
|
}
|
|
2059
|
-
.
|
|
2060
|
-
.
|
|
2066
|
+
.blog_bp-site-article .blog_standfirst,
|
|
2067
|
+
.blog_bp-site-article .blog_article-hero-standfirst {
|
|
2061
2068
|
font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--bp-ink-2);
|
|
2062
2069
|
margin: 18px 0 0; max-width: 62ch;
|
|
2063
2070
|
}
|
|
2064
|
-
.
|
|
2065
|
-
.
|
|
2071
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_standfirst,
|
|
2072
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-standfirst {
|
|
2066
2073
|
margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.9);
|
|
2067
2074
|
text-align: center; max-width: 48ch;
|
|
2068
2075
|
}
|
|
2069
|
-
.
|
|
2070
|
-
.
|
|
2071
|
-
.
|
|
2076
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-row { justify-content: center; }
|
|
2077
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_breadcrumb { justify-content: center; }
|
|
2078
|
+
.blog_bp-site-article .blog_eyebrow {
|
|
2072
2079
|
display: inline-block; font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em;
|
|
2073
2080
|
text-transform: uppercase; color: var(--bp-accent); text-decoration: none;
|
|
2074
2081
|
background: color-mix(in srgb, var(--bp-accent) 10%, transparent);
|
|
2075
2082
|
padding: 4px 11px; border-radius: 100px;
|
|
2076
2083
|
}
|
|
2077
|
-
.
|
|
2078
|
-
.
|
|
2079
|
-
.
|
|
2080
|
-
.
|
|
2084
|
+
.blog_bp-site-article .blog_byline-row { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
|
|
2085
|
+
.blog_bp-site-article .blog_byline-faces { display: flex; }
|
|
2086
|
+
.blog_bp-site-article .blog_byline-faces img,
|
|
2087
|
+
.blog_bp-site-article .blog_face-fallback {
|
|
2081
2088
|
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
|
|
2082
2089
|
border: 2px solid var(--bp-paper); margin-left: -8px; background: var(--bp-sunk);
|
|
2083
2090
|
display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--bp-ink-2);
|
|
2084
2091
|
}
|
|
2085
|
-
.
|
|
2086
|
-
.
|
|
2092
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-faces img,
|
|
2093
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_face-fallback {
|
|
2087
2094
|
border-color: #0B4A75; color: #0B4A75; background: #fff;
|
|
2088
2095
|
}
|
|
2089
|
-
.
|
|
2090
|
-
.
|
|
2091
|
-
.
|
|
2092
|
-
.
|
|
2093
|
-
.
|
|
2094
|
-
.
|
|
2095
|
-
.
|
|
2096
|
+
.blog_bp-site-article .blog_byline-faces img:first-child,
|
|
2097
|
+
.blog_bp-site-article .blog_face-fallback:first-child { margin-left: 0; }
|
|
2098
|
+
.blog_bp-site-article .blog_byline-text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
|
|
2099
|
+
.blog_bp-site-article .blog_byline-text .blog_by { font-weight: 650; color: var(--bp-ink); }
|
|
2100
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-text .blog_by,
|
|
2101
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-text .blog_meta { color: rgba(255,255,255,0.92); }
|
|
2102
|
+
.blog_bp-site-article .blog_byline-text .blog_meta {
|
|
2096
2103
|
color: var(--bp-ink-3); display: flex; gap: 12px; flex-wrap: wrap; font-size: 13.4px;
|
|
2097
2104
|
}
|
|
2098
2105
|
|
|
2099
|
-
.
|
|
2106
|
+
.blog_bp-site-article .blog_article-shell {
|
|
2100
2107
|
display: grid; gap: 32px; padding: 40px var(--bp-site-pad) 64px;
|
|
2101
2108
|
align-items: start; max-width: var(--bp-site-max); margin: 0 auto; width: 100%; box-sizing: border-box;
|
|
2102
2109
|
}
|
|
2103
2110
|
@media (min-width: 1040px) {
|
|
2104
|
-
.
|
|
2111
|
+
.blog_bp-site-article .blog_article-shell {
|
|
2105
2112
|
grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px;
|
|
2106
2113
|
}
|
|
2107
2114
|
}
|
|
2108
|
-
.
|
|
2109
|
-
.
|
|
2115
|
+
.blog_bp-site-article .blog_article { min-width: 0; max-width: none; }
|
|
2116
|
+
.blog_bp-site-article .blog_rail { display: none; width: 100%; }
|
|
2110
2117
|
@media (min-width: 1040px) {
|
|
2111
|
-
.
|
|
2118
|
+
.blog_bp-site-article .blog_rail { display: block; position: sticky; top: 96px; }
|
|
2112
2119
|
}
|
|
2113
|
-
.
|
|
2120
|
+
.blog_bp-site-article .blog_rail-title {
|
|
2114
2121
|
font-size: 11px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase;
|
|
2115
2122
|
color: var(--bp-ink-3); margin: 0 0 12px;
|
|
2116
2123
|
}
|
|
2117
|
-
.
|
|
2124
|
+
.blog_bp-site-article .blog_toc ol {
|
|
2118
2125
|
list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--bp-rule);
|
|
2119
2126
|
display: flex; flex-direction: column; gap: 9px;
|
|
2120
2127
|
}
|
|
2121
|
-
.
|
|
2122
|
-
.
|
|
2128
|
+
.blog_bp-site-article .blog_toc li.blog_sub { padding-left: 12px; }
|
|
2129
|
+
.blog_bp-site-article .blog_toc a {
|
|
2123
2130
|
font-size: 13.4px; line-height: 1.4; color: var(--bp-ink-2); text-decoration: none; display: block;
|
|
2124
2131
|
}
|
|
2125
|
-
.
|
|
2132
|
+
.blog_bp-site-article .blog_toc a:hover { color: var(--bp-accent); }
|
|
2126
2133
|
|
|
2127
|
-
.
|
|
2128
|
-
.
|
|
2129
|
-
.
|
|
2134
|
+
.blog_bp-site-article .blog_article-rail-details { margin-bottom: 26px; display: flex; flex-direction: column; gap: 22px; }
|
|
2135
|
+
.blog_bp-site-article .blog_rail-details-mobile { margin: 0 0 28px; }
|
|
2136
|
+
.blog_bp-site-article .blog_rail-details-desktop { display: none; }
|
|
2130
2137
|
@media (min-width: 1040px) {
|
|
2131
|
-
.
|
|
2132
|
-
.
|
|
2138
|
+
.blog_bp-site-article .blog_rail-details-mobile { display: none; }
|
|
2139
|
+
.blog_bp-site-article .blog_rail-details-desktop { display: flex; }
|
|
2133
2140
|
}
|
|
2134
|
-
.
|
|
2135
|
-
.
|
|
2141
|
+
.blog_bp-site-article .blog_rail-owner-panel,
|
|
2142
|
+
.blog_bp-site-article .blog_rail-related-panel {
|
|
2136
2143
|
background: var(--bp-paper); border: 1px solid var(--bp-rule); border-radius: 12px;
|
|
2137
2144
|
box-shadow: 0 1px 2px rgba(22, 23, 43, 0.04), 0 10px 24px -18px rgba(22, 23, 43, 0.22);
|
|
2138
2145
|
overflow: hidden; display: flex; flex-direction: column;
|
|
2139
2146
|
}
|
|
2140
|
-
.
|
|
2147
|
+
.blog_bp-site-article .blog_rail-owner-list {
|
|
2141
2148
|
list-style: none; margin: 0; padding: 14px 17px; display: flex; flex-direction: column; gap: 14px;
|
|
2142
2149
|
}
|
|
2143
|
-
.
|
|
2144
|
-
.
|
|
2145
|
-
.
|
|
2150
|
+
.blog_bp-site-article .blog_rail-owner { display: flex; gap: 12px; align-items: flex-start; }
|
|
2151
|
+
.blog_bp-site-article .blog_rail-owner img,
|
|
2152
|
+
.blog_bp-site-article .blog_rail-owner-fallback {
|
|
2146
2153
|
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
|
|
2147
2154
|
}
|
|
2148
|
-
.
|
|
2149
|
-
.
|
|
2155
|
+
.blog_bp-site-article .blog_rail-owner img { object-fit: cover; }
|
|
2156
|
+
.blog_bp-site-article .blog_rail-owner-fallback {
|
|
2150
2157
|
display: grid; place-items: center;
|
|
2151
2158
|
background: color-mix(in srgb, var(--bp-accent) 16%, var(--bp-sunk));
|
|
2152
2159
|
color: var(--bp-accent); font-size: 12px; font-weight: 750;
|
|
2153
2160
|
}
|
|
2154
|
-
.
|
|
2155
|
-
.
|
|
2156
|
-
.
|
|
2161
|
+
.blog_bp-site-article .blog_rail-owner-name { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--bp-ink); }
|
|
2162
|
+
.blog_bp-site-article .blog_rail-owner-role { margin: 2px 0 0; font-size: 12px; color: var(--bp-ink-3); }
|
|
2163
|
+
.blog_bp-site-article .blog_rail-owner-bio {
|
|
2157
2164
|
margin: 6px 0 0; font-size: 12.4px; line-height: 1.45; color: var(--bp-ink-2);
|
|
2158
2165
|
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
|
2159
2166
|
}
|
|
2160
|
-
.
|
|
2167
|
+
.blog_bp-site-article .blog_rail-related-head {
|
|
2161
2168
|
padding: 13px 17px; border-bottom: 1px solid var(--bp-rule);
|
|
2162
2169
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
2163
2170
|
}
|
|
2164
|
-
.
|
|
2171
|
+
.blog_bp-site-article .blog_rail-related-head h3 {
|
|
2165
2172
|
margin: 0; font-size: 13.5px; font-weight: 680; letter-spacing: -0.005em; color: var(--bp-ink);
|
|
2166
2173
|
}
|
|
2167
|
-
.
|
|
2168
|
-
.
|
|
2174
|
+
.blog_bp-site-article .blog_rail-related-rows { display: flex; flex-direction: column; }
|
|
2175
|
+
.blog_bp-site-article .blog_rail-related-row {
|
|
2169
2176
|
padding: 12px 17px; border-bottom: 1px solid color-mix(in srgb, var(--bp-rule) 70%, transparent);
|
|
2170
2177
|
}
|
|
2171
|
-
.
|
|
2172
|
-
.
|
|
2173
|
-
.
|
|
2178
|
+
.blog_bp-site-article .blog_rail-related-row:last-child { border-bottom: 0; }
|
|
2179
|
+
.blog_bp-site-article .blog_rail-related-row:hover { background: var(--bp-paper-2); }
|
|
2180
|
+
.blog_bp-site-article .blog_rail-related-t {
|
|
2174
2181
|
font-size: 14px; font-weight: 620; color: var(--bp-ink); text-decoration: none;
|
|
2175
2182
|
letter-spacing: -0.005em; display: block; line-height: 1.35;
|
|
2176
2183
|
border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit;
|
|
2177
2184
|
}
|
|
2178
|
-
.
|
|
2179
|
-
.
|
|
2185
|
+
.blog_bp-site-article .blog_rail-related-t:hover { color: var(--bp-accent); }
|
|
2186
|
+
.blog_bp-site-article .blog_rail-related-sub {
|
|
2180
2187
|
font-size: 12.2px; color: var(--bp-ink-3); margin-top: 3px;
|
|
2181
2188
|
display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center;
|
|
2182
2189
|
}
|
|
2183
|
-
.
|
|
2184
|
-
.
|
|
2190
|
+
.blog_bp-site-article .blog_rail-related-sub a,
|
|
2191
|
+
.blog_bp-site-article .blog_rail-related-sub .blog_bp-linkish {
|
|
2185
2192
|
color: var(--bp-accent); text-decoration: none; font-weight: 600;
|
|
2186
2193
|
border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
|
|
2187
2194
|
}
|
|
2188
|
-
.
|
|
2189
|
-
.
|
|
2195
|
+
.blog_bp-site-article .blog_rail-related-sub a:hover,
|
|
2196
|
+
.blog_bp-site-article .blog_rail-related-sub .blog_bp-linkish:hover { text-decoration: underline; }
|
|
2190
2197
|
|
|
2191
|
-
.
|
|
2198
|
+
.blog_bp-site-article .blog_prose {
|
|
2192
2199
|
font-family: var(--bp-font-display);
|
|
2193
2200
|
font-size: 18.5px; line-height: 1.72; max-width: var(--bp-measure);
|
|
2194
2201
|
}
|
|
2195
|
-
.
|
|
2196
|
-
.
|
|
2197
|
-
.
|
|
2202
|
+
.blog_bp-site-article .blog_prose > * { margin: 0 0 1.15em; }
|
|
2203
|
+
.blog_bp-site-article .blog_prose h2,
|
|
2204
|
+
.blog_bp-site-article .blog_prose h3 {
|
|
2198
2205
|
font-family: var(--bp-font-display); letter-spacing: -0.02em; line-height: 1.25;
|
|
2199
2206
|
position: relative; scroll-margin-top: 96px;
|
|
2200
2207
|
}
|
|
2201
|
-
.
|
|
2202
|
-
.
|
|
2203
|
-
.
|
|
2204
|
-
.
|
|
2208
|
+
.blog_bp-site-article .blog_prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 1.9em 0 0.55em; font-weight: 700; }
|
|
2209
|
+
.blog_bp-site-article .blog_prose h3 { font-size: clamp(20px, 2.4vw, 23px); margin: 1.6em 0 0.45em; font-weight: 700; }
|
|
2210
|
+
.blog_bp-site-article .blog_prose a { color: var(--bp-accent); }
|
|
2211
|
+
.blog_bp-site-article .blog_prose blockquote {
|
|
2205
2212
|
margin: 1.7em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--bp-accent);
|
|
2206
2213
|
font-size: 1.06em; color: var(--bp-ink-2); font-style: italic;
|
|
2207
2214
|
}
|
|
2208
|
-
.
|
|
2215
|
+
.blog_bp-site-article .blog_prose img { border-radius: 12px; display: block; max-width: 100%; height: auto; }
|
|
2209
2216
|
|
|
2210
|
-
.
|
|
2211
|
-
.
|
|
2217
|
+
.blog_bp-site-article .blog_tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
|
|
2218
|
+
.blog_bp-site-article .blog_tag-pill {
|
|
2212
2219
|
font-size: 12.6px; color: var(--bp-ink-2); background: var(--bp-sunk);
|
|
2213
2220
|
border: 1px solid var(--bp-rule); border-radius: 100px; padding: 4px 12px;
|
|
2214
2221
|
text-decoration: none; cursor: pointer; font: inherit;
|
|
2215
2222
|
}
|
|
2216
|
-
.
|
|
2223
|
+
.blog_bp-site-article .blog_share {
|
|
2217
2224
|
display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.4px;
|
|
2218
2225
|
}
|
|
2219
|
-
.
|
|
2226
|
+
.blog_bp-site-article .blog_share-label {
|
|
2220
2227
|
font-weight: 750; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bp-ink-3);
|
|
2221
2228
|
}
|
|
2222
|
-
.
|
|
2223
|
-
.
|
|
2224
|
-
.
|
|
2225
|
-
.
|
|
2226
|
-
.
|
|
2229
|
+
.blog_bp-site-article .blog_share a { color: var(--bp-ink-2); text-decoration: none; }
|
|
2230
|
+
.blog_bp-site-article .blog_share a:hover { color: var(--bp-accent); }
|
|
2231
|
+
.blog_bp-site-article .blog_share-copy summary { cursor: pointer; color: var(--bp-ink-2); list-style: none; }
|
|
2232
|
+
.blog_bp-site-article .blog_share-copy summary::-webkit-details-marker { display: none; }
|
|
2233
|
+
.blog_bp-site-article .blog_share-copy input {
|
|
2227
2234
|
font: inherit; font-size: 12.5px; margin-top: 8px; width: min(320px, 100%);
|
|
2228
2235
|
padding: 7px 10px; border: 1px solid var(--bp-rule); border-radius: 8px;
|
|
2229
2236
|
background: var(--bp-paper-2); color: var(--bp-ink-2);
|
|
2230
2237
|
}
|
|
2231
|
-
.
|
|
2238
|
+
.blog_bp-site-article .blog_share-foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bp-rule); }
|
|
2232
2239
|
|
|
2233
|
-
.
|
|
2240
|
+
.blog_bp-site-article .blog_author-card {
|
|
2234
2241
|
display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; padding: 20px;
|
|
2235
2242
|
background: var(--bp-paper-2); border: 1px solid var(--bp-rule); border-radius: 12px;
|
|
2236
2243
|
}
|
|
2237
|
-
.
|
|
2238
|
-
.
|
|
2239
|
-
.
|
|
2244
|
+
.blog_bp-site-article .blog_author-name { margin: 0; font-weight: 700; font-size: 15px; }
|
|
2245
|
+
.blog_bp-site-article .blog_author-name span { font-weight: 400; color: var(--bp-ink-3); }
|
|
2246
|
+
.blog_bp-site-article .blog_author-bio { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--bp-ink-2); }
|
|
2240
2247
|
|
|
2241
|
-
.
|
|
2248
|
+
.blog_bp-site-article .blog_comments {
|
|
2242
2249
|
margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--bp-rule);
|
|
2243
2250
|
}
|
|
2244
|
-
.
|
|
2251
|
+
.blog_bp-site-article .blog_comments h2 {
|
|
2245
2252
|
font-family: var(--bp-font-display); font-size: 26px; letter-spacing: -0.02em; margin: 0 0 18px;
|
|
2246
2253
|
}
|
|
2247
|
-
.
|
|
2248
|
-
.
|
|
2249
|
-
.
|
|
2250
|
-
.
|
|
2254
|
+
.blog_bp-site-article .blog_comments-count { font-weight: 500; color: var(--bp-ink-3); font-size: 0.85em; }
|
|
2255
|
+
.blog_bp-site-article .blog_comments-closed,
|
|
2256
|
+
.blog_bp-site-article .blog_comments-empty { margin: 0 0 22px; color: var(--bp-ink-3); font-size: 14.5px; }
|
|
2257
|
+
.blog_bp-site-article .blog_comments-list {
|
|
2251
2258
|
list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px;
|
|
2252
2259
|
}
|
|
2253
|
-
.
|
|
2260
|
+
.blog_bp-site-article .blog_comment-item {
|
|
2254
2261
|
padding: 16px 18px; border: 1px solid var(--bp-rule); border-radius: 12px; background: var(--bp-paper-2);
|
|
2255
2262
|
}
|
|
2256
|
-
.
|
|
2257
|
-
.
|
|
2263
|
+
.blog_bp-site-article .blog_comment-profile { display: flex; gap: 14px; align-items: flex-start; }
|
|
2264
|
+
.blog_bp-site-article .blog_comment-avatar {
|
|
2258
2265
|
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
|
|
2259
2266
|
background: color-mix(in srgb, var(--bp-accent) 16%, var(--bp-sunk));
|
|
2260
2267
|
color: var(--bp-accent); font-size: 13px; font-weight: 750;
|
|
2261
2268
|
}
|
|
2262
|
-
.
|
|
2269
|
+
.blog_bp-site-article .blog_comment-meta {
|
|
2263
2270
|
display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 8px;
|
|
2264
2271
|
font-size: 13px; color: var(--bp-ink-3);
|
|
2265
2272
|
}
|
|
2266
|
-
.
|
|
2267
|
-
.
|
|
2273
|
+
.blog_bp-site-article .blog_comment-author { color: var(--bp-ink); font-size: 14.5px; }
|
|
2274
|
+
.blog_bp-site-article .blog_comment-body {
|
|
2268
2275
|
margin: 0; font-size: 15px; line-height: 1.65; color: var(--bp-ink-2);
|
|
2269
2276
|
white-space: pre-wrap; word-break: break-word;
|
|
2270
2277
|
}
|
|
2271
|
-
.
|
|
2278
|
+
.blog_bp-site-article .blog_comment-form {
|
|
2272
2279
|
display: flex; flex-direction: column; gap: 14px; padding: 20px;
|
|
2273
2280
|
border: 1px solid var(--bp-rule); border-radius: 12px; background: var(--bp-paper);
|
|
2274
2281
|
}
|
|
2275
|
-
.
|
|
2276
|
-
.
|
|
2282
|
+
.blog_bp-site-article .blog_comment-form-title { margin: 0; font-size: 16px; font-weight: 700; }
|
|
2283
|
+
.blog_bp-site-article .blog_comment-form-grid { display: grid; gap: 12px; }
|
|
2277
2284
|
@media (min-width: 640px) {
|
|
2278
|
-
.
|
|
2285
|
+
.blog_bp-site-article .blog_comment-form-grid { grid-template-columns: 1fr 1fr; }
|
|
2279
2286
|
}
|
|
2280
|
-
.
|
|
2287
|
+
.blog_bp-site-article .blog_comment-form label {
|
|
2281
2288
|
display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--bp-ink-2);
|
|
2282
2289
|
}
|
|
2283
|
-
.
|
|
2290
|
+
.blog_bp-site-article .blog_comment-form label em {
|
|
2284
2291
|
font-style: normal; font-weight: 450; color: var(--bp-ink-3);
|
|
2285
2292
|
}
|
|
2286
|
-
.
|
|
2287
|
-
.
|
|
2293
|
+
.blog_bp-site-article .blog_comment-form input,
|
|
2294
|
+
.blog_bp-site-article .blog_comment-form textarea {
|
|
2288
2295
|
font: inherit; font-weight: 450; font-size: 14.5px; padding: 10px 12px;
|
|
2289
2296
|
border: 1px solid var(--bp-rule); border-radius: 8px; background: var(--bp-paper-2); color: var(--bp-ink);
|
|
2290
2297
|
}
|
|
2291
|
-
.
|
|
2292
|
-
.
|
|
2298
|
+
.blog_bp-site-article .blog_comment-form input:focus,
|
|
2299
|
+
.blog_bp-site-article .blog_comment-form textarea:focus {
|
|
2293
2300
|
outline: none; border-color: var(--bp-accent);
|
|
2294
2301
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 18%, transparent);
|
|
2295
2302
|
}
|
|
2296
|
-
.
|
|
2297
|
-
.
|
|
2303
|
+
.blog_bp-site-article .blog_comment-body-field textarea { resize: vertical; min-height: 120px; }
|
|
2304
|
+
.blog_bp-site-article .blog_comment-submit {
|
|
2298
2305
|
align-self: flex-start; font: inherit; font-weight: 650; font-size: 14px;
|
|
2299
2306
|
padding: 10px 16px; border: 0; border-radius: 8px; background: var(--bp-accent); color: #fff; cursor: pointer;
|
|
2300
2307
|
}
|
|
2301
|
-
.
|
|
2302
|
-
.
|
|
2308
|
+
.blog_bp-site-article .blog_comment-submit:disabled { opacity: 0.65; cursor: wait; }
|
|
2309
|
+
.blog_bp-site-article .blog_comment-error {
|
|
2303
2310
|
margin: 0; padding: 10px 12px; border-radius: 8px;
|
|
2304
2311
|
background: color-mix(in srgb, #c44 12%, transparent); color: #9a2f2f; font-size: 13.5px;
|
|
2305
2312
|
}
|
|
2306
|
-
.
|
|
2313
|
+
.blog_bp-site-article .blog_comment-ok {
|
|
2307
2314
|
margin: 0; padding: 10px 12px; border-radius: 8px;
|
|
2308
2315
|
background: color-mix(in srgb, #2f8f5b 12%, transparent); color: #1f6b42; font-size: 13.5px;
|
|
2309
2316
|
}
|
|
2310
|
-
.
|
|
2311
|
-
.
|
|
2317
|
+
.blog_bp-site-article .blog_comment-moderation-note { margin: 0; font-size: 12.5px; color: var(--bp-ink-3); }
|
|
2318
|
+
.blog_bp-site-article .blog_comment-hp {
|
|
2312
2319
|
position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
|
|
2313
2320
|
}
|
|
2314
2321
|
|
|
2315
2322
|
|
|
2316
2323
|
|
|
2317
|
-
/* Public post list (BlogUploader index) — scoped under .
|
|
2324
|
+
/* Public post list (BlogUploader index) — scoped under .blog_bp-site-index */
|
|
2318
2325
|
|
|
2319
|
-
.
|
|
2326
|
+
.blog_bp-site-index {
|
|
2320
2327
|
--bp-accent: var(--bp-color-primary, #2e3a8c);
|
|
2321
2328
|
--accent: var(--bp-accent);
|
|
2322
2329
|
--bp-ink: #14151c;
|
|
@@ -2351,29 +2358,29 @@ select.fld.redir-match {
|
|
|
2351
2358
|
min-height: 100%;
|
|
2352
2359
|
}
|
|
2353
2360
|
|
|
2354
|
-
.
|
|
2355
|
-
.
|
|
2356
|
-
.
|
|
2361
|
+
.blog_bp-site-index *,
|
|
2362
|
+
.blog_bp-site-index *::before,
|
|
2363
|
+
.blog_bp-site-index *::after {
|
|
2357
2364
|
box-sizing: border-box;
|
|
2358
2365
|
}
|
|
2359
2366
|
|
|
2360
|
-
.
|
|
2367
|
+
.blog_bp-site-index a {
|
|
2361
2368
|
color: var(--bp-accent);
|
|
2362
2369
|
text-underline-offset: 2px;
|
|
2363
2370
|
}
|
|
2364
2371
|
|
|
2365
|
-
.
|
|
2372
|
+
.blog_bp-site-index :focus-visible {
|
|
2366
2373
|
outline: 2px solid var(--bp-accent);
|
|
2367
2374
|
outline-offset: 3px;
|
|
2368
2375
|
border-radius: 3px;
|
|
2369
2376
|
}
|
|
2370
2377
|
|
|
2371
|
-
.
|
|
2378
|
+
.blog_bp-site-index img {
|
|
2372
2379
|
max-width: 100%;
|
|
2373
2380
|
height: auto;
|
|
2374
2381
|
}
|
|
2375
2382
|
|
|
2376
|
-
.
|
|
2383
|
+
.blog_bp-site-index .blog_wrap {
|
|
2377
2384
|
width: 100%;
|
|
2378
2385
|
max-width: var(--bp-site-max);
|
|
2379
2386
|
margin: 0 auto;
|
|
@@ -2400,21 +2407,21 @@ select.fld.redir-match {
|
|
|
2400
2407
|
50% { opacity: 0.95; transform: translateX(-50%) scaleX(1); }
|
|
2401
2408
|
}
|
|
2402
2409
|
|
|
2403
|
-
.
|
|
2410
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item {
|
|
2404
2411
|
animation: bp-site-rise 0.75s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
|
|
2405
2412
|
}
|
|
2406
|
-
.
|
|
2407
|
-
.
|
|
2408
|
-
.
|
|
2409
|
-
.
|
|
2410
|
-
.
|
|
2411
|
-
.
|
|
2412
|
-
.
|
|
2413
|
-
.
|
|
2413
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(1) { animation-delay: 0.04s; }
|
|
2414
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(2) { animation-delay: 0.1s; }
|
|
2415
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(3) { animation-delay: 0.16s; }
|
|
2416
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(4) { animation-delay: 0.22s; }
|
|
2417
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(5) { animation-delay: 0.28s; }
|
|
2418
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(6) { animation-delay: 0.34s; }
|
|
2419
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(7) { animation-delay: 0.4s; }
|
|
2420
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(8) { animation-delay: 0.46s; }
|
|
2414
2421
|
|
|
2415
2422
|
/* --- hero --------------------------------------------------------------- */
|
|
2416
2423
|
|
|
2417
|
-
.
|
|
2424
|
+
.blog_bp-site-index .blog_site-hero {
|
|
2418
2425
|
position: relative;
|
|
2419
2426
|
width: 100%;
|
|
2420
2427
|
padding: clamp(56px, 10vw, 112px) var(--bp-site-pad) clamp(40px, 6vw, 72px);
|
|
@@ -2425,7 +2432,7 @@ select.fld.redir-match {
|
|
|
2425
2432
|
linear-gradient(180deg, var(--bp-paper-2) 0%, var(--bp-paper) 100%);
|
|
2426
2433
|
}
|
|
2427
2434
|
|
|
2428
|
-
.
|
|
2435
|
+
.blog_bp-site-index .blog_site-hero-glow {
|
|
2429
2436
|
position: absolute;
|
|
2430
2437
|
inset: auto -20% -40% -20%;
|
|
2431
2438
|
height: 60%;
|
|
@@ -2434,7 +2441,7 @@ select.fld.redir-match {
|
|
|
2434
2441
|
animation: bp-site-fade 1.2s var(--bp-ease-out) both;
|
|
2435
2442
|
}
|
|
2436
2443
|
|
|
2437
|
-
.
|
|
2444
|
+
.blog_bp-site-index .blog_site-hero-inner {
|
|
2438
2445
|
position: relative;
|
|
2439
2446
|
z-index: 1;
|
|
2440
2447
|
width: 100%;
|
|
@@ -2442,7 +2449,7 @@ select.fld.redir-match {
|
|
|
2442
2449
|
margin: 0 auto;
|
|
2443
2450
|
}
|
|
2444
2451
|
|
|
2445
|
-
.
|
|
2452
|
+
.blog_bp-site-index .blog_site-hero-eyebrow {
|
|
2446
2453
|
margin: 0;
|
|
2447
2454
|
font-family: var(--bp-font-ui);
|
|
2448
2455
|
font-size: 12px;
|
|
@@ -2452,7 +2459,7 @@ select.fld.redir-match {
|
|
|
2452
2459
|
color: var(--bp-accent);
|
|
2453
2460
|
}
|
|
2454
2461
|
|
|
2455
|
-
.
|
|
2462
|
+
.blog_bp-site-index .blog_site-hero-title {
|
|
2456
2463
|
margin: 14px 0 0;
|
|
2457
2464
|
font-family: var(--bp-font-body);
|
|
2458
2465
|
font-size: clamp(36px, 6.5vw, 64px);
|
|
@@ -2463,7 +2470,7 @@ select.fld.redir-match {
|
|
|
2463
2470
|
max-width: 18ch;
|
|
2464
2471
|
}
|
|
2465
2472
|
|
|
2466
|
-
.
|
|
2473
|
+
.blog_bp-site-index .blog_site-hero-desc {
|
|
2467
2474
|
margin: 18px 0 0;
|
|
2468
2475
|
font-family: var(--bp-font-ui);
|
|
2469
2476
|
font-size: clamp(17px, 2.2vw, 20px);
|
|
@@ -2474,7 +2481,7 @@ select.fld.redir-match {
|
|
|
2474
2481
|
|
|
2475
2482
|
/* --- feed bridge -------------------------------------------------------- */
|
|
2476
2483
|
|
|
2477
|
-
.
|
|
2484
|
+
.blog_bp-site-index .blog_site-index-feed {
|
|
2478
2485
|
position: relative;
|
|
2479
2486
|
z-index: 2;
|
|
2480
2487
|
width: 100%;
|
|
@@ -2490,14 +2497,14 @@ select.fld.redir-match {
|
|
|
2490
2497
|
box-shadow: 0 -24px 48px -28px color-mix(in srgb, #000 28%, transparent);
|
|
2491
2498
|
}
|
|
2492
2499
|
|
|
2493
|
-
.
|
|
2500
|
+
.blog_bp-site-index .blog_site-index-bridge {
|
|
2494
2501
|
position: relative;
|
|
2495
2502
|
height: clamp(28px, 4vw, 44px);
|
|
2496
2503
|
overflow: hidden;
|
|
2497
2504
|
pointer-events: none;
|
|
2498
2505
|
}
|
|
2499
2506
|
|
|
2500
|
-
.
|
|
2507
|
+
.blog_bp-site-index .blog_site-index-bridge-glow {
|
|
2501
2508
|
position: absolute;
|
|
2502
2509
|
left: 50%;
|
|
2503
2510
|
top: 0;
|
|
@@ -2513,7 +2520,7 @@ select.fld.redir-match {
|
|
|
2513
2520
|
animation: bp-site-index-bridge-breathe 5.5s ease-in-out infinite;
|
|
2514
2521
|
}
|
|
2515
2522
|
|
|
2516
|
-
.
|
|
2523
|
+
.blog_bp-site-index .blog_site-index-bridge-line {
|
|
2517
2524
|
position: absolute;
|
|
2518
2525
|
left: 50%;
|
|
2519
2526
|
top: 50%;
|
|
@@ -2528,9 +2535,9 @@ select.fld.redir-match {
|
|
|
2528
2535
|
);
|
|
2529
2536
|
}
|
|
2530
2537
|
|
|
2531
|
-
.
|
|
2538
|
+
.blog_bp-site-index .blog_site-index-feed-inner { width: 100%; }
|
|
2532
2539
|
|
|
2533
|
-
.
|
|
2540
|
+
.blog_bp-site-index .blog_site-index-feed-head {
|
|
2534
2541
|
width: 100%;
|
|
2535
2542
|
max-width: var(--bp-site-max);
|
|
2536
2543
|
margin: 0 auto;
|
|
@@ -2540,7 +2547,7 @@ select.fld.redir-match {
|
|
|
2540
2547
|
gap: 16px;
|
|
2541
2548
|
}
|
|
2542
2549
|
|
|
2543
|
-
.
|
|
2550
|
+
.blog_bp-site-index .blog_site-index-feed-eyebrow {
|
|
2544
2551
|
margin: 0;
|
|
2545
2552
|
flex: 0 0 auto;
|
|
2546
2553
|
font-family: var(--bp-font-ui);
|
|
@@ -2551,7 +2558,7 @@ select.fld.redir-match {
|
|
|
2551
2558
|
color: var(--bp-ink-3);
|
|
2552
2559
|
}
|
|
2553
2560
|
|
|
2554
|
-
.
|
|
2561
|
+
.blog_bp-site-index .blog_site-index-feed-rule {
|
|
2555
2562
|
display: block;
|
|
2556
2563
|
flex: 1 1 auto;
|
|
2557
2564
|
height: 1px;
|
|
@@ -2562,19 +2569,19 @@ select.fld.redir-match {
|
|
|
2562
2569
|
);
|
|
2563
2570
|
}
|
|
2564
2571
|
|
|
2565
|
-
.
|
|
2566
|
-
.
|
|
2572
|
+
.blog_bp-site-index .blog_site-page,
|
|
2573
|
+
.blog_bp-site-index .blog_site-index-feed-body {
|
|
2567
2574
|
width: 100%;
|
|
2568
2575
|
max-width: var(--bp-site-max);
|
|
2569
2576
|
margin: 0 auto;
|
|
2570
2577
|
padding: 0 var(--bp-site-pad) clamp(48px, 8vw, 80px);
|
|
2571
2578
|
}
|
|
2572
2579
|
|
|
2573
|
-
.
|
|
2580
|
+
.blog_bp-site-index .blog_site-index-feed-body .blog_cat-bar { margin-top: 0; }
|
|
2574
2581
|
|
|
2575
2582
|
/* --- category bar ------------------------------------------------------- */
|
|
2576
2583
|
|
|
2577
|
-
.
|
|
2584
|
+
.blog_bp-site-index .blog_cat-bar {
|
|
2578
2585
|
display: flex;
|
|
2579
2586
|
gap: 8px;
|
|
2580
2587
|
flex-wrap: wrap;
|
|
@@ -2584,8 +2591,8 @@ select.fld.redir-match {
|
|
|
2584
2591
|
padding-bottom: 4px;
|
|
2585
2592
|
}
|
|
2586
2593
|
|
|
2587
|
-
.
|
|
2588
|
-
.
|
|
2594
|
+
.blog_bp-site-index .blog_cat-bar button,
|
|
2595
|
+
.blog_bp-site-index .blog_cat-bar a {
|
|
2589
2596
|
font: inherit;
|
|
2590
2597
|
color: var(--bp-ink-2);
|
|
2591
2598
|
text-decoration: none;
|
|
@@ -2597,16 +2604,16 @@ select.fld.redir-match {
|
|
|
2597
2604
|
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s var(--bp-ease-out), box-shadow 0.2s ease;
|
|
2598
2605
|
}
|
|
2599
2606
|
|
|
2600
|
-
.
|
|
2601
|
-
.
|
|
2607
|
+
.blog_bp-site-index .blog_cat-bar button:hover,
|
|
2608
|
+
.blog_bp-site-index .blog_cat-bar a:hover {
|
|
2602
2609
|
border-color: color-mix(in srgb, var(--bp-accent) 40%, var(--bp-rule));
|
|
2603
2610
|
color: var(--bp-accent);
|
|
2604
2611
|
transform: translateY(-2px);
|
|
2605
2612
|
box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--bp-accent) 35%, transparent);
|
|
2606
2613
|
}
|
|
2607
2614
|
|
|
2608
|
-
.
|
|
2609
|
-
.
|
|
2615
|
+
.blog_bp-site-index .blog_cat-bar button[aria-current="page"],
|
|
2616
|
+
.blog_bp-site-index .blog_cat-bar a[aria-current="page"] {
|
|
2610
2617
|
background: var(--bp-accent);
|
|
2611
2618
|
border-color: var(--bp-accent);
|
|
2612
2619
|
color: #fff;
|
|
@@ -2615,8 +2622,8 @@ select.fld.redir-match {
|
|
|
2615
2622
|
|
|
2616
2623
|
/* --- cards -------------------------------------------------------------- */
|
|
2617
2624
|
|
|
2618
|
-
.
|
|
2619
|
-
.
|
|
2625
|
+
.blog_bp-site-index .blog_post-grid,
|
|
2626
|
+
.blog_bp-site-index .blog_card-grid {
|
|
2620
2627
|
list-style: none;
|
|
2621
2628
|
margin: 0 0 clamp(32px, 5vw, 48px);
|
|
2622
2629
|
padding: 0;
|
|
@@ -2625,12 +2632,12 @@ select.fld.redir-match {
|
|
|
2625
2632
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
|
|
2626
2633
|
}
|
|
2627
2634
|
|
|
2628
|
-
.
|
|
2635
|
+
.blog_bp-site-index .blog_post-grid-lead {
|
|
2629
2636
|
grid-template-columns: 1fr !important;
|
|
2630
2637
|
margin-bottom: clamp(24px, 4vw, 36px);
|
|
2631
2638
|
}
|
|
2632
2639
|
|
|
2633
|
-
.
|
|
2640
|
+
.blog_bp-site-index .blog_card {
|
|
2634
2641
|
border: 1px solid var(--bp-rule);
|
|
2635
2642
|
border-radius: var(--bp-radius);
|
|
2636
2643
|
background: var(--bp-paper);
|
|
@@ -2641,14 +2648,14 @@ select.fld.redir-match {
|
|
|
2641
2648
|
animation-delay: calc(var(--motion-i, 0) * 50ms);
|
|
2642
2649
|
}
|
|
2643
2650
|
|
|
2644
|
-
.
|
|
2651
|
+
.blog_bp-site-index .blog_card:hover {
|
|
2645
2652
|
box-shadow: var(--bp-shadow-hover);
|
|
2646
2653
|
border-color: color-mix(in srgb, var(--bp-accent) 28%, var(--bp-rule));
|
|
2647
2654
|
transform: translateY(-6px);
|
|
2648
2655
|
}
|
|
2649
2656
|
|
|
2650
|
-
.
|
|
2651
|
-
.
|
|
2657
|
+
.blog_bp-site-index .blog_card > a,
|
|
2658
|
+
.blog_bp-site-index .blog_card > button.blog_card-link {
|
|
2652
2659
|
font: inherit;
|
|
2653
2660
|
text-align: left;
|
|
2654
2661
|
text-decoration: none;
|
|
@@ -2664,13 +2671,13 @@ select.fld.redir-match {
|
|
|
2664
2671
|
cursor: pointer;
|
|
2665
2672
|
}
|
|
2666
2673
|
|
|
2667
|
-
.
|
|
2674
|
+
.blog_bp-site-index .blog_card-img {
|
|
2668
2675
|
display: block;
|
|
2669
2676
|
overflow: hidden;
|
|
2670
2677
|
background: var(--bp-sunk);
|
|
2671
2678
|
}
|
|
2672
2679
|
|
|
2673
|
-
.
|
|
2680
|
+
.blog_bp-site-index .blog_card-img img {
|
|
2674
2681
|
display: block;
|
|
2675
2682
|
width: 100%;
|
|
2676
2683
|
aspect-ratio: 3 / 2;
|
|
@@ -2678,14 +2685,14 @@ select.fld.redir-match {
|
|
|
2678
2685
|
transition: transform 0.55s var(--bp-ease-out);
|
|
2679
2686
|
}
|
|
2680
2687
|
|
|
2681
|
-
.
|
|
2688
|
+
.blog_bp-site-index .blog_card:hover .blog_card-img img { transform: scale(1.06); }
|
|
2682
2689
|
|
|
2683
|
-
.
|
|
2690
|
+
.blog_bp-site-index .blog_card-img-blank {
|
|
2684
2691
|
aspect-ratio: 3 / 2;
|
|
2685
2692
|
background: linear-gradient(135deg, var(--bp-sunk), var(--bp-paper-2));
|
|
2686
2693
|
}
|
|
2687
2694
|
|
|
2688
|
-
.
|
|
2695
|
+
.blog_bp-site-index .blog_card-body {
|
|
2689
2696
|
display: flex;
|
|
2690
2697
|
flex-direction: column;
|
|
2691
2698
|
gap: 8px;
|
|
@@ -2694,7 +2701,7 @@ select.fld.redir-match {
|
|
|
2694
2701
|
flex: 1;
|
|
2695
2702
|
}
|
|
2696
2703
|
|
|
2697
|
-
.
|
|
2704
|
+
.blog_bp-site-index .blog_card-eyebrow {
|
|
2698
2705
|
font-size: 11px;
|
|
2699
2706
|
font-weight: 750;
|
|
2700
2707
|
letter-spacing: 0.1em;
|
|
@@ -2702,7 +2709,7 @@ select.fld.redir-match {
|
|
|
2702
2709
|
color: var(--bp-accent);
|
|
2703
2710
|
}
|
|
2704
2711
|
|
|
2705
|
-
.
|
|
2712
|
+
.blog_bp-site-index .blog_card-title {
|
|
2706
2713
|
font-family: var(--bp-font-body);
|
|
2707
2714
|
font-size: clamp(18px, 2.2vw, 21px);
|
|
2708
2715
|
line-height: 1.28;
|
|
@@ -2711,15 +2718,15 @@ select.fld.redir-match {
|
|
|
2711
2718
|
transition: color 0.2s ease;
|
|
2712
2719
|
}
|
|
2713
2720
|
|
|
2714
|
-
.
|
|
2721
|
+
.blog_bp-site-index .blog_card:hover .blog_card-title { color: var(--bp-accent); }
|
|
2715
2722
|
|
|
2716
|
-
.
|
|
2723
|
+
.blog_bp-site-index .blog_card-excerpt {
|
|
2717
2724
|
font-size: 14.5px;
|
|
2718
2725
|
line-height: 1.6;
|
|
2719
2726
|
color: var(--bp-ink-2);
|
|
2720
2727
|
}
|
|
2721
2728
|
|
|
2722
|
-
.
|
|
2729
|
+
.blog_bp-site-index .blog_card-meta {
|
|
2723
2730
|
font-size: 12.8px;
|
|
2724
2731
|
color: var(--bp-ink-3);
|
|
2725
2732
|
display: flex;
|
|
@@ -2729,42 +2736,42 @@ select.fld.redir-match {
|
|
|
2729
2736
|
padding-top: 4px;
|
|
2730
2737
|
}
|
|
2731
2738
|
|
|
2732
|
-
.
|
|
2733
|
-
.
|
|
2734
|
-
.
|
|
2739
|
+
.blog_bp-site-index .blog_card-lead { border-width: 1px; }
|
|
2740
|
+
.blog_bp-site-index .blog_card-lead > a,
|
|
2741
|
+
.blog_bp-site-index .blog_card-lead > button.blog_card-link {
|
|
2735
2742
|
gap: 0;
|
|
2736
2743
|
flex-direction: column;
|
|
2737
2744
|
}
|
|
2738
2745
|
|
|
2739
2746
|
@media (min-width: 900px) {
|
|
2740
|
-
.
|
|
2741
|
-
.
|
|
2747
|
+
.blog_bp-site-index .blog_card-lead > a,
|
|
2748
|
+
.blog_bp-site-index .blog_card-lead > button.blog_card-link {
|
|
2742
2749
|
flex-direction: row;
|
|
2743
2750
|
align-items: stretch;
|
|
2744
2751
|
}
|
|
2745
|
-
.
|
|
2746
|
-
.
|
|
2747
|
-
.
|
|
2752
|
+
.blog_bp-site-index .blog_card-lead .blog_card-img { flex: 1 1 58%; min-height: 100%; }
|
|
2753
|
+
.blog_bp-site-index .blog_card-lead .blog_card-img img,
|
|
2754
|
+
.blog_bp-site-index .blog_card-lead .blog_card-img-blank {
|
|
2748
2755
|
aspect-ratio: auto;
|
|
2749
2756
|
height: 100%;
|
|
2750
2757
|
min-height: 320px;
|
|
2751
2758
|
}
|
|
2752
|
-
.
|
|
2759
|
+
.blog_bp-site-index .blog_card-lead .blog_card-body {
|
|
2753
2760
|
flex: 1 1 42%;
|
|
2754
2761
|
justify-content: center;
|
|
2755
2762
|
padding: clamp(24px, 4vw, 40px);
|
|
2756
2763
|
gap: 12px;
|
|
2757
2764
|
}
|
|
2758
|
-
.
|
|
2765
|
+
.blog_bp-site-index .blog_card-lead .blog_card-title {
|
|
2759
2766
|
font-size: clamp(28px, 3.8vw, 40px);
|
|
2760
2767
|
line-height: 1.12;
|
|
2761
2768
|
}
|
|
2762
|
-
.
|
|
2769
|
+
.blog_bp-site-index .blog_card-lead .blog_card-excerpt { font-size: 17px; }
|
|
2763
2770
|
}
|
|
2764
2771
|
|
|
2765
2772
|
/* --- pagination / empty / loading --------------------------------------- */
|
|
2766
2773
|
|
|
2767
|
-
.
|
|
2774
|
+
.blog_bp-site-index .blog_pagination {
|
|
2768
2775
|
display: flex;
|
|
2769
2776
|
align-items: center;
|
|
2770
2777
|
justify-content: space-between;
|
|
@@ -2776,7 +2783,7 @@ select.fld.redir-match {
|
|
|
2776
2783
|
margin-top: 8px;
|
|
2777
2784
|
}
|
|
2778
2785
|
|
|
2779
|
-
.
|
|
2786
|
+
.blog_bp-site-index .blog_pagination button {
|
|
2780
2787
|
font: inherit;
|
|
2781
2788
|
text-decoration: none;
|
|
2782
2789
|
padding: 10px 18px;
|
|
@@ -2788,46 +2795,46 @@ select.fld.redir-match {
|
|
|
2788
2795
|
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--bp-ease-out);
|
|
2789
2796
|
}
|
|
2790
2797
|
|
|
2791
|
-
.
|
|
2798
|
+
.blog_bp-site-index .blog_pagination button:hover:not(:disabled) {
|
|
2792
2799
|
border-color: var(--bp-accent);
|
|
2793
2800
|
color: var(--bp-accent);
|
|
2794
2801
|
transform: translateY(-2px);
|
|
2795
2802
|
}
|
|
2796
2803
|
|
|
2797
|
-
.
|
|
2798
|
-
.
|
|
2804
|
+
.blog_bp-site-index .blog_pagination button:disabled,
|
|
2805
|
+
.blog_bp-site-index .blog_pagination [aria-disabled="true"] {
|
|
2799
2806
|
color: var(--bp-ink-3);
|
|
2800
2807
|
opacity: 0.5;
|
|
2801
2808
|
cursor: not-allowed;
|
|
2802
2809
|
}
|
|
2803
2810
|
|
|
2804
|
-
.
|
|
2811
|
+
.blog_bp-site-index .blog_empty {
|
|
2805
2812
|
padding: clamp(48px, 8vw, 80px) 0;
|
|
2806
2813
|
color: var(--bp-ink-3);
|
|
2807
2814
|
font-family: var(--bp-font-ui);
|
|
2808
2815
|
font-size: 17px;
|
|
2809
2816
|
}
|
|
2810
2817
|
|
|
2811
|
-
.
|
|
2818
|
+
.blog_bp-site-index .blog_bp-state {
|
|
2812
2819
|
padding: clamp(48px, 8vw, 80px) var(--bp-site-pad);
|
|
2813
2820
|
font-family: var(--bp-font-ui);
|
|
2814
2821
|
color: var(--bp-ink-3);
|
|
2815
2822
|
text-align: center;
|
|
2816
2823
|
}
|
|
2817
2824
|
|
|
2818
|
-
.
|
|
2825
|
+
.blog_bp-site-index .blog_bp-state--error { color: #b91c1c; }
|
|
2819
2826
|
|
|
2820
2827
|
@media (prefers-reduced-motion: reduce) {
|
|
2821
|
-
.
|
|
2822
|
-
.
|
|
2823
|
-
.
|
|
2824
|
-
.
|
|
2828
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item,
|
|
2829
|
+
.blog_bp-site-index .blog_card,
|
|
2830
|
+
.blog_bp-site-index .blog_site-hero-glow,
|
|
2831
|
+
.blog_bp-site-index .blog_site-index-bridge-glow {
|
|
2825
2832
|
animation: none !important;
|
|
2826
2833
|
opacity: 1;
|
|
2827
2834
|
transform: none;
|
|
2828
2835
|
}
|
|
2829
|
-
.
|
|
2830
|
-
.
|
|
2836
|
+
.blog_bp-site-index .blog_card:hover { transform: none; }
|
|
2837
|
+
.blog_bp-site-index .blog_card:hover .blog_card-img img { transform: none; }
|
|
2831
2838
|
}
|
|
2832
2839
|
|
|
2833
2840
|
/* --- media hero (BlogUploader SiteMediaHero) ----------------------------- */
|
|
@@ -2845,7 +2852,7 @@ select.fld.redir-match {
|
|
|
2845
2852
|
50% { transform: translateX(6px); }
|
|
2846
2853
|
}
|
|
2847
2854
|
|
|
2848
|
-
.
|
|
2855
|
+
.blog_bp-site-index .blog_site-hero-media {
|
|
2849
2856
|
position: relative;
|
|
2850
2857
|
width: 100%;
|
|
2851
2858
|
min-height: clamp(520px, 92vh, 920px);
|
|
@@ -2870,7 +2877,7 @@ select.fld.redir-match {
|
|
|
2870
2877
|
0 16px 40px var(--hero-shadow-deep);
|
|
2871
2878
|
}
|
|
2872
2879
|
|
|
2873
|
-
.
|
|
2880
|
+
.blog_bp-site-index .blog_site-hero-media-bg {
|
|
2874
2881
|
position: absolute;
|
|
2875
2882
|
inset: 0;
|
|
2876
2883
|
z-index: 0;
|
|
@@ -2878,19 +2885,19 @@ select.fld.redir-match {
|
|
|
2878
2885
|
overflow: hidden;
|
|
2879
2886
|
}
|
|
2880
2887
|
|
|
2881
|
-
.
|
|
2888
|
+
.blog_bp-site-index .blog_site-hero-media-slide {
|
|
2882
2889
|
position: absolute;
|
|
2883
2890
|
inset: 0;
|
|
2884
2891
|
opacity: 0;
|
|
2885
2892
|
transition: opacity 0.85s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
|
|
2886
2893
|
pointer-events: none;
|
|
2887
2894
|
}
|
|
2888
|
-
.
|
|
2895
|
+
.blog_bp-site-index .blog_site-hero-media-slide.blog_is-active {
|
|
2889
2896
|
opacity: 1;
|
|
2890
2897
|
z-index: 1;
|
|
2891
2898
|
}
|
|
2892
2899
|
|
|
2893
|
-
.
|
|
2900
|
+
.blog_bp-site-index .blog_site-hero-media-visual {
|
|
2894
2901
|
position: absolute;
|
|
2895
2902
|
inset: 0;
|
|
2896
2903
|
width: 100%;
|
|
@@ -2904,7 +2911,7 @@ select.fld.redir-match {
|
|
|
2904
2911
|
animation: hero-ken-burns 22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite alternate;
|
|
2905
2912
|
}
|
|
2906
2913
|
|
|
2907
|
-
.
|
|
2914
|
+
.blog_bp-site-index .blog_site-hero-media-scrim {
|
|
2908
2915
|
position: absolute;
|
|
2909
2916
|
inset: 0;
|
|
2910
2917
|
background:
|
|
@@ -2913,7 +2920,7 @@ select.fld.redir-match {
|
|
|
2913
2920
|
animation: hero-scrim-pulse 8s ease-in-out infinite;
|
|
2914
2921
|
}
|
|
2915
2922
|
|
|
2916
|
-
.
|
|
2923
|
+
.blog_bp-site-index .blog_site-hero-media-grain {
|
|
2917
2924
|
position: absolute;
|
|
2918
2925
|
inset: 0;
|
|
2919
2926
|
opacity: 0.06;
|
|
@@ -2922,7 +2929,7 @@ select.fld.redir-match {
|
|
|
2922
2929
|
pointer-events: none;
|
|
2923
2930
|
}
|
|
2924
2931
|
|
|
2925
|
-
.
|
|
2932
|
+
.blog_bp-site-index .blog_site-hero-media-content {
|
|
2926
2933
|
position: relative;
|
|
2927
2934
|
z-index: 2;
|
|
2928
2935
|
width: 100%;
|
|
@@ -2931,18 +2938,18 @@ select.fld.redir-match {
|
|
|
2931
2938
|
padding: clamp(96px, 14vh, 140px) var(--site-pad, var(--bp-site-pad)) clamp(48px, 8vh, 88px);
|
|
2932
2939
|
}
|
|
2933
2940
|
|
|
2934
|
-
.
|
|
2941
|
+
.blog_bp-site-index .blog_site-hero-media-copy {
|
|
2935
2942
|
max-width: min(720px, 92%);
|
|
2936
2943
|
overflow: visible;
|
|
2937
2944
|
}
|
|
2938
|
-
.
|
|
2945
|
+
.blog_bp-site-index .blog_site-hero-media-copy .blog_hero-fade-slide {
|
|
2939
2946
|
overflow: visible;
|
|
2940
2947
|
}
|
|
2941
|
-
.
|
|
2948
|
+
.blog_bp-site-index .blog_site-hero-media-meta-wrap .blog_site-hero-media-meta {
|
|
2942
2949
|
margin-top: 18px;
|
|
2943
2950
|
}
|
|
2944
2951
|
|
|
2945
|
-
.
|
|
2952
|
+
.blog_bp-site-index .blog_site-hero-media-eyebrow {
|
|
2946
2953
|
margin: 0;
|
|
2947
2954
|
font-family: var(--font-ui, var(--bp-font-ui));
|
|
2948
2955
|
font-size: 12px;
|
|
@@ -2953,7 +2960,7 @@ select.fld.redir-match {
|
|
|
2953
2960
|
text-shadow: 0 1px 2px var(--hero-shadow-soft), 0 3px 10px var(--hero-shadow-mid);
|
|
2954
2961
|
}
|
|
2955
2962
|
|
|
2956
|
-
.
|
|
2963
|
+
.blog_bp-site-index .blog_site-hero-media-title {
|
|
2957
2964
|
margin: 16px 0 0;
|
|
2958
2965
|
font-family: var(--font-body, var(--bp-font-body));
|
|
2959
2966
|
font-size: clamp(36px, 6.8vw, 72px);
|
|
@@ -2966,7 +2973,7 @@ select.fld.redir-match {
|
|
|
2966
2973
|
text-shadow: var(--hero-text-depth-lg);
|
|
2967
2974
|
}
|
|
2968
2975
|
|
|
2969
|
-
.
|
|
2976
|
+
.blog_bp-site-index .blog_site-hero-media-desc {
|
|
2970
2977
|
margin: 20px 0 0;
|
|
2971
2978
|
font-family: var(--font-ui, var(--bp-font-ui));
|
|
2972
2979
|
font-size: clamp(16px, 2.1vw, 20px);
|
|
@@ -2976,7 +2983,7 @@ select.fld.redir-match {
|
|
|
2976
2983
|
text-shadow: var(--hero-text-depth);
|
|
2977
2984
|
}
|
|
2978
2985
|
|
|
2979
|
-
.
|
|
2986
|
+
.blog_bp-site-index .blog_site-hero-media-meta {
|
|
2980
2987
|
display: flex;
|
|
2981
2988
|
gap: 14px;
|
|
2982
2989
|
margin-top: 18px;
|
|
@@ -2989,17 +2996,17 @@ select.fld.redir-match {
|
|
|
2989
2996
|
transform-origin: left center;
|
|
2990
2997
|
text-shadow: 0 1px 2px var(--hero-shadow-soft), 0 3px 8px var(--hero-shadow-mid);
|
|
2991
2998
|
}
|
|
2992
|
-
.
|
|
2999
|
+
.blog_bp-site-index .blog_site-hero-media-meta time::after {
|
|
2993
3000
|
content: "·";
|
|
2994
3001
|
margin: 0 10px;
|
|
2995
3002
|
opacity: 0.5;
|
|
2996
3003
|
}
|
|
2997
|
-
.
|
|
2998
|
-
.
|
|
3004
|
+
.blog_bp-site-index .blog_site-hero-media-reading:only-child,
|
|
3005
|
+
.blog_bp-site-index .blog_site-hero-media-meta time:only-child::after {
|
|
2999
3006
|
display: none;
|
|
3000
3007
|
}
|
|
3001
3008
|
|
|
3002
|
-
.
|
|
3009
|
+
.blog_bp-site-index .blog_site-hero-media-cta {
|
|
3003
3010
|
--hero-cta-text: #ffffff;
|
|
3004
3011
|
--hero-cta-depth: var(--hero-shadow-gray);
|
|
3005
3012
|
display: inline-flex;
|
|
@@ -3037,17 +3044,17 @@ select.fld.redir-match {
|
|
|
3037
3044
|
filter 0.22s ease,
|
|
3038
3045
|
border-color 0.22s ease;
|
|
3039
3046
|
}
|
|
3040
|
-
.
|
|
3047
|
+
.blog_bp-site-index .blog_site-hero-media-cta:hover {
|
|
3041
3048
|
color: var(--hero-cta-text);
|
|
3042
3049
|
filter: brightness(1.07);
|
|
3043
3050
|
transform: translateY(-2px);
|
|
3044
3051
|
}
|
|
3045
|
-
.
|
|
3052
|
+
.blog_bp-site-index .blog_site-hero-media-cta-arrow {
|
|
3046
3053
|
display: inline-flex;
|
|
3047
3054
|
animation: hero-loop-arrow 2.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
|
|
3048
3055
|
}
|
|
3049
3056
|
|
|
3050
|
-
.
|
|
3057
|
+
.blog_bp-site-index .blog_site-hero-media-edge {
|
|
3051
3058
|
position: absolute;
|
|
3052
3059
|
left: 0;
|
|
3053
3060
|
right: 0;
|
|
@@ -3057,14 +3064,14 @@ select.fld.redir-match {
|
|
|
3057
3064
|
z-index: 3;
|
|
3058
3065
|
}
|
|
3059
3066
|
|
|
3060
|
-
.
|
|
3067
|
+
.blog_bp-site-index .blog_site-hero-media-dots {
|
|
3061
3068
|
display: flex;
|
|
3062
3069
|
flex-wrap: wrap;
|
|
3063
3070
|
gap: 8px;
|
|
3064
3071
|
margin-top: 28px;
|
|
3065
3072
|
max-width: min(720px, 92%);
|
|
3066
3073
|
}
|
|
3067
|
-
.
|
|
3074
|
+
.blog_bp-site-index .blog_site-hero-media-dot {
|
|
3068
3075
|
width: 8px;
|
|
3069
3076
|
height: 8px;
|
|
3070
3077
|
padding: 0;
|
|
@@ -3074,27 +3081,27 @@ select.fld.redir-match {
|
|
|
3074
3081
|
background: color-mix(in srgb, #fff 35%, transparent);
|
|
3075
3082
|
transition: width 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), background 0.28s ease;
|
|
3076
3083
|
}
|
|
3077
|
-
.
|
|
3084
|
+
.blog_bp-site-index .blog_site-hero-media-dot.blog_is-active {
|
|
3078
3085
|
width: 28px;
|
|
3079
3086
|
background: #fff;
|
|
3080
3087
|
}
|
|
3081
3088
|
|
|
3082
3089
|
@media (max-width: 640px) {
|
|
3083
|
-
.
|
|
3090
|
+
.blog_bp-site-index .blog_site-hero-media {
|
|
3084
3091
|
min-height: clamp(480px, 88vh, 720px);
|
|
3085
3092
|
}
|
|
3086
|
-
.
|
|
3087
|
-
.
|
|
3093
|
+
.blog_bp-site-index .blog_site-hero-media-copy { max-width: 100%; }
|
|
3094
|
+
.blog_bp-site-index .blog_site-hero-media-title { max-width: none; }
|
|
3088
3095
|
}
|
|
3089
3096
|
|
|
3090
3097
|
@media (prefers-reduced-motion: reduce) {
|
|
3091
|
-
.
|
|
3092
|
-
.
|
|
3093
|
-
.
|
|
3098
|
+
.blog_bp-site-index .blog_site-hero-media-visual,
|
|
3099
|
+
.blog_bp-site-index .blog_site-hero-media-scrim,
|
|
3100
|
+
.blog_bp-site-index .blog_site-hero-media-cta-arrow {
|
|
3094
3101
|
animation: none !important;
|
|
3095
3102
|
}
|
|
3096
|
-
.
|
|
3097
|
-
.
|
|
3103
|
+
.blog_bp-site-index .blog_site-hero-media-slide { transition: none; }
|
|
3104
|
+
.blog_bp-site-index .blog_site-hero-media .blog_hero-fade-slide {
|
|
3098
3105
|
opacity: 1;
|
|
3099
3106
|
transform: none;
|
|
3100
3107
|
animation: none !important;
|