, so `.prose p {font-size: 15.5px}` outranked it and every section rule rendered at 15.5px instead of the 11px declared here. The label and the chip were both ~40% oversized. */ .prose .sec-meta, .sec-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(46px, 5vw, 72px); padding-top: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--line); font: 600 11px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); } .prose > .sec-meta:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .sec-meta + h2 { margin-top: 14px; padding-top: 0; border-top: 0; } .sec-meta b { font: 700 10.5px/1 var(--mono); letter-spacing: .06em; background: var(--deep); color: var(--lime); padding: 6px 8px; border-radius: 5px; } /* a quiet caption on the section rule, not a badge competing with the number */ .sec-meta .sm-m { margin-left: auto; padding: 3px 7px; border-radius: 4px; font-size: 9.5px; letter-spacing: .07em; background: var(--mint-soft); color: #0e5f57; } /* the hero was running tall on pages with a short dek */ .phero { padding-block: clamp(30px, 3.6vw, 52px); } .phero h1 { max-width: 22ch; } /* card links lifted from the live index pages */ .prose .pcard { text-decoration: none; } .prose .pcard h3 { margin-top: 0; font-family: var(--disp); font-size: 19px; font-weight: 600; line-height: 1.3; } .prose .pcard p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); } .pc-tag { align-self: flex-start; margin-bottom: 12px; font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: var(--r-xs); background: var(--mint-soft); color: #0e5f57; } /* a run of card links becomes a grid rather than a stack */ .prose .pcard + .pcard { margin-top: 16px; } .card-grid { display: grid; gap: 20px; } .card-grid .pcard + .pcard { margin-top: 0; } /* ---- screenshot theme switcher ------------------------------------------- */ /* Swaps the image files only. The page keeps its own palette, so this shows the three dashboard themes without pretending the site changes with them. */ .shot-switch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--bs); } .shot-switch .ss-l { font: 700 10.5px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); } .shot-switch .ss-n { font-size: 12px; color: var(--muted); margin-left: auto; } .shot-switch .seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--grey); border-radius: 9px; } .shot-switch .seg button { padding: 7px 13px; border-radius: 6px; font: 600 12.5px/1 var(--font); color: var(--muted); transition: background .15s, color .15s; } .shot-switch .seg button:hover { color: var(--ink); } .shot-switch .seg button[aria-pressed="true"] { background: var(--deep); color: #fff; } .prose figure img[data-shot] { transition: opacity .22s ease; } .prose figure img.swapping { opacity: .35; } /* ---- wider measure, and let the artwork use the column ------------------- */ /* Scoped to the two-column range on purpose. Unconditional, this sat AFTER the max-width:980px rule that stacks the rail, matched the same specificity, and won -- so every inner page kept a 250px rail on a phone and wrapped its prose one word per line. The docs page measured 135,000px tall because of it. */ @media (min-width: 981px) { .doc { grid-template-columns: 250px minmax(0, 1fr); } } .prose { max-width: 78ch; } /* figures, tables and code are diagrams, not prose: they take the full column */ .prose figure, .prose .table-wrap, .prose .code-wrap, .prose pre, .prose .card-grid, .prose .shot-switch { max-width: none; width: 100%; } @media (min-width: 1180px) { .prose figure, .prose .table-wrap, .prose .card-grid, .prose > pre, .prose .code-wrap { width: calc(100% + clamp(0px, 12vw, 210px)); } /* inside a wrapper the
fills it; widening both double-counts */
.prose .code-wrap > pre { width: 100%; }
}
/* ---- sidebar ------------------------------------------------------------- */
.doc-rail { top: 100px; }
/* the marker is the section's OWN number, carried on data-n, not a counter over
the list: a counter silently disagrees with the page whenever a heading is
skipped or unnumbered, which is exactly what happened with the Contents block */
.doc-rail ol { counter-reset: rail; }
.doc-rail li { counter-increment: rail; }
/* attr() reads the attribute of the element the pseudo-element belongs to, so
data-n has to sit on the , not the : on the this resolved to an
empty string and silently blanked the number on every rail. The counter below
stays as the fallback for pages whose sections carry no number of their own. */
.doc-rail a[data-n]::before { content: attr(data-n); }
.doc-rail a { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; }
.doc-rail a::before {
content: counter(rail, decimal-leading-zero);
font: 700 9.5px/1.5 var(--mono); color: #b6b6be; flex: none;
transition: color .14s;
}
.doc-rail a.on::before { color: var(--teal); }
.doc-rail .rail-foot a {
display: inline-flex; padding: 0; border: 0; color: var(--teal); font-weight: 600; font-size: 13px;
}
.doc-rail .rail-foot a::before { content: none; }
.doc-rail .rail-foot a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
/* the soft edge belongs to the scrolling list, never to the foot beneath it */
.doc-rail > ol { -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent 100%);
mask-image: linear-gradient(180deg, #000 94%, transparent 100%); }
@media (max-width: 980px) { .doc-rail > ol { mask-image: none; -webkit-mask-image: none; } }
/* ==========================================================================
SITE CHECKER
========================================================================== */
.ck { margin-bottom: 28px; }
/* superseded: .ck-form is now a wrapper holding label, field and help.
Leaving it as a flex row laid the three out side by side. */
.ck-form { display: block; }
.ck-proto { font: 400 15px/1 var(--mono); color: var(--muted); flex: none; }
.ck-field input {
flex: 1; min-width: 0; border: 0; background: none;
font: 400 15.5px/1 var(--font); color: var(--ink); padding: 13px 0;
}
.ck-field input:focus { outline: none; }
.ck-field .btn { flex: none; }
.ck-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.ck-out { margin-top: 34px; }
.ck-card {
background: var(--card); border: 1px solid var(--bs-edge);
border-radius: var(--r); box-shadow: var(--bs); overflow: clip;
}
.ck-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.ck-head .u { font: 500 14px/1 var(--mono); }
.ck-state {
display: inline-flex; align-items: center; gap: 7px;
font: 700 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.ck-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.ck-state.busy::before { animation: so-pulse 1.4s ease-in-out infinite; }
.ck-grp { padding: 6px 0; }
.ck-grp + .ck-grp { border-top: 1px solid var(--line); }
.ck-art { padding: 14px 20px 8px; font-size: 12px; color: var(--muted); }
.ck-art b { color: var(--ink); font-weight: 700; }
.ck-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 20px; border-top: 1px solid var(--line);
}
.ck-grp .ck-row:first-of-type { border-top: 0; }
.ck-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ck-row .dot.warn { background: #d98324; }
.ck-row .dot.ok { background: var(--teal); }
.ck-row .nm { flex: 1; font: 600 14px/1.3 var(--font); }
.ck-row .nm em { display: block; font: 400 11.5px/1.4 var(--mono); font-style: normal; color: var(--muted); margin-top: 3px; }
.ck-row .n {
flex: none; font: 700 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
padding: 6px 9px; border-radius: var(--r-xs); background: #fdf0dd; color: #8a5410;
}
.ck-row .n.none { background: var(--mint-soft); color: #0e5f57; }
.ck-foot { padding: 14px 20px; background: #fbfbfb; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.ck-skel { height: 14px; border-radius: 5px; background: linear-gradient(90deg,#eee,#f6f6f6,#eee);
background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
/* ==========================================================================
DIRECTORY
========================================================================== */
.dir-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.dir-search input {
flex: 1; min-width: 240px;
padding: 13px 18px; border-radius: var(--r-pill);
border: 1px solid var(--bs-edge); background: var(--card);
font: 400 15px/1 var(--font); color: var(--ink);
box-shadow: var(--bs);
}
.dir-search input:focus { outline: none; border-color: var(--teal); }
.dir-filters { display: inline-flex; gap: 3px; padding: 4px; background: var(--grey); border-radius: var(--r-pill); }
.dir-filters button {
padding: 9px 15px; border-radius: var(--r-pill);
font: 600 13px/1 var(--font); color: var(--muted); white-space: nowrap;
transition: background .15s, color .15s;
}
.dir-filters button:hover { color: var(--ink); }
.dir-filters button[aria-pressed="true"] { background: var(--deep); color: #fff; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dir-card {
background: var(--card); border: 1px solid var(--bs-edge); border-radius: var(--r-sm);
padding: 18px; box-shadow: var(--bs);
display: flex; flex-direction: column; gap: 10px;
transition: transform .16s ease;
}
.dir-card:hover { transform: translateY(-2px); }
.dir-card .dc-top { display: flex; align-items: center; gap: 10px; }
.dir-card .dc-ini {
width: 34px; height: 34px; border-radius: 9px; flex: none;
display: grid; place-items: center;
font: 700 13px/1 var(--disp); color: #10261a; background: var(--lime);
}
.dir-card h3 { font: 600 15px/1.25 var(--font); margin: 0; }
.dir-card .dc-cat { font: 600 10.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dir-card .dc-art {
margin-top: auto; align-self: flex-start;
font: 700 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
padding: 6px 8px; border-radius: var(--r-xs);
background: var(--mint-soft); color: #0e5f57;
}
.dir-note { margin-top: 20px; font-size: 12.5px; color: var(--muted); }
.dir-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 14px; }
/* ==========================================================================
CHECKER REPORT > read as an audit report: a scored gauge, a verdict,
the facts, then the findings grouped by the article that applies.
========================================================================== */
.ck-report {
background: var(--card); border: 1px solid var(--bs-edge);
border-radius: var(--r); box-shadow: var(--bs); overflow: clip;
}
/* ---- the score head ------------------------------------------------------ */
.ck-top {
display: flex; gap: clamp(18px, 2.6vw, 32px); align-items: center;
padding: clamp(20px, 2.4vw, 26px) clamp(18px, 2.2vw, 28px);
}
.ck-gauge { position: relative; width: 116px; height: 116px; flex: none; }
.ck-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ck-gauge .track { stroke: var(--grey); }
.ck-gauge .bar {
stroke: var(--g, var(--teal)); stroke-linecap: round;
transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1), stroke .4s ease;
}
.ck-gauge .num {
position: absolute; inset: 0; display: grid; place-items: center;
font: 700 34px/1 var(--disp); letter-spacing: -.02em; color: var(--g, var(--teal));
font-variant-numeric: tabular-nums;
}
.ck-verdict { min-width: 0; }
.ck-verdict .host { font: 500 13px/1 var(--mono); color: var(--muted); }
.ck-verdict .hd {
margin-top: 10px; font-family: var(--disp);
font-size: clamp(19px, 1.8vw, 25px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
}
.ck-verdict .sb { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.ck-pill {
display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
font: 700 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
padding: 7px 10px; border-radius: var(--r-xs);
}
.ck-pill svg { width: 13px; height: 13px; }
.ck-pill.ok { background: var(--mint-soft); color: #0e5f57; }
.ck-pill.gap { background: #fdf0dd; color: #8a5410; }
/* ---- facts --------------------------------------------------------------- */
.ck-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.ck-stat { padding: 16px clamp(18px, 2.2vw, 28px); }
.ck-stat + .ck-stat { border-left: 1px solid var(--line); }
.ck-stat .k { font: 700 10px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.ck-stat .v { margin-top: 8px; font: 600 17px/1.2 var(--disp); }
.ck-stat .v small { font: 400 12px/1 var(--mono); color: var(--muted); margin-left: 5px; }
/* ---- findings ------------------------------------------------------------ */
.ck-group { border-top: 1px solid var(--line); }
.ck-ghead { padding: 16px clamp(18px, 2.2vw, 28px) 6px; }
.ck-ghead h3 { font: 700 13.5px/1.2 var(--font); }
.ck-ghead .art { margin-top: 5px; font-size: 12px; color: var(--muted); }
.ck-sys {
display: flex; align-items: center; gap: 12px;
padding: 13px clamp(18px, 2.2vw, 28px);
border-top: 1px solid var(--line);
}
.ck-group .ck-sys:first-of-type { border-top: 0; }
.ck-sys .ic { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.ck-sys .ic svg { width: 12px; height: 12px; }
.ck-sys .ic.gap { background: #fdf0dd; color: #8a5410; }
.ck-sys .ic.ok { background: var(--mint-soft); color: #0e5f57; }
.ck-sys .nm { flex: 1; font: 600 14.5px/1.3 var(--font); min-width: 0; }
.ck-sys .tag { flex: none; font: 400 11.5px/1 var(--mono); color: var(--muted); }
.ck-foot { padding: 16px clamp(20px, 2.4vw, 30px); background: #fbfbfb; border-top: 1px solid var(--line); }
/* sits between the stats and the first group, keyed to the dot on every row */
.ck-legend {
display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
padding: 11px clamp(18px, 2.2vw, 28px); border-top: 1px solid var(--line); background: #fbfbfb;
}
.ck-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ck-legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.ck-legend i.gap { background: #d98324; }
.ck-legend i.ok { background: var(--teal); }
.ck-foot p { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ck-foot p a { color: var(--teal); font-weight: 500; }
/* the report renders inside .prose on the checker page, whose links are underlined */
.ck-actions .btn, .ck-actions .btn:hover { text-decoration: none; }
.ck-error { padding: 22px; color: #8a2b12; background: #fdece7; border-radius: var(--r-sm); font-size: 14.5px; }
/* ---- running ------------------------------------------------------------- */
.ck-run { display: flex; align-items: center; gap: 14px; padding: 26px; }
.ck-run .sp {
width: 22px; height: 22px; border-radius: 50%; flex: none;
border: 2.5px solid var(--grey); border-top-color: var(--teal);
animation: ck-spin .8s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-run p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 720px) {
.ck-top { flex-direction: column; align-items: flex-start; }
.ck-stats { grid-template-columns: 1fr; }
.ck-stat + .ck-stat { border-left: 0; border-top: 1px solid var(--line); }
.ck-sys { flex-wrap: wrap; }
.ck-sys .tag { width: 100%; padding-left: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.ck-gauge .bar { transition: none; }
.ck-run .sp { animation: none; }
}
/* ---- guide cards: artwork belongs to its card ---------------------------- */
.prose .pcard { padding: 0; overflow: clip; display: flex; flex-direction: column; }
.pc-thumb { display: block; aspect-ratio: 16 / 10; overflow: clip; background: var(--grey); }
.pc-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.prose .pcard:hover .pc-thumb img { transform: scale(1.04); }
.pc-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.prose .pcard .pc-tag { margin-bottom: 12px; }
.prose .pcard h3 { font-size: 17px; }
.prose .pcard p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }
.prose .pcard .go { margin-top: auto; padding-top: 16px; }
/* Two columns, not three. At 960px a 258px minimum packed three guide cards
into a row and titles wrapped to three lines. 330px, not 380: the rail layout
leaves a 692px column at 1100px wide, and 380 dropped that to a single column.
This declaration sits after the
one in the layout section and, at equal specificity, is the one that applies:
the .doc grid and the nav both broke the same way, so change it HERE. */
.card-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
@media (max-width: 820px) { .card-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .pc-thumb img { transition: none; } }
/* ---- developer reference ------------------------------------------------- */
/* Hook and shortcode names are identifiers, not prose: they keep their
monospace and carry the version they landed in. */
.prose h3.api, .prose h4.api {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--font); font-size: 15px; font-weight: 600;
margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line);
}
.prose h3.api code, .prose h4.api code {
font: 600 14.5px/1.5 var(--mono);
background: var(--deep); color: var(--lime);
padding: 6px 10px; border-radius: 7px;
}
.prose .since {
font: 700 10px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
padding: 5px 8px; border-radius: var(--r-xs);
background: var(--mint-soft); color: #0e5f57;
}
.prose .since::before { content: 'since '; opacity: .7; }
.prose .dim { color: var(--muted); }
/* code samples sit tighter under the signature they belong to */
.prose h3.api + p { margin-top: 12px; }
.prose p + pre { margin-top: 14px; }
/* ---- the featured guide runs full width, half image half copy ------------ */
.card-grid.feat-row { grid-template-columns: 1fr; }
.prose .pcard-feat {
display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
min-height: 300px;
}
.prose .pcard-feat .pc-thumb { aspect-ratio: auto; height: 100%; }
.prose .pcard-feat .pc-body { padding: clamp(24px, 3vw, 40px); justify-content: center; }
.prose .pcard-feat h3 { font-size: clamp(21px, 2.1vw, 29px); font-family: var(--disp); line-height: 1.18; letter-spacing: -.018em; }
.prose .pcard-feat p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.prose .pcard-feat .go { padding-top: 22px; font-size: 14.5px; }
.prose .pcard-feat .pc-tag { background: var(--lime); color: #10261a; }
@media (max-width: 760px) {
.prose .pcard-feat { grid-template-columns: 1fr; min-height: 0; }
.prose .pcard-feat .pc-thumb { aspect-ratio: 16 / 10; }
}
/* ---- definition grids ---------------------------------------------------- */
/* A run of short heading+paragraph definitions (the checker's six categories,
the directory's listing criteria) reads as a wall in prose. As cards each
one is scannable and the set has a shape. */
.def-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 14px; margin-top: 22px;
}
.prose .def {
background: var(--card); border: 1px solid var(--bs-edge);
border-radius: var(--r-sm); padding: 20px; box-shadow: var(--bs);
display: flex; flex-direction: column;
}
.prose .def h3 {
margin: 0; font: 600 15.5px/1.3 var(--font); letter-spacing: 0;
display: flex; align-items: center; gap: 9px;
}
.prose .def h3::before {
content: ''; width: 8px; height: 8px; border-radius: 3px; flex: none;
background: var(--lime);
}
.prose .def p { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
/* ---- directory: sites, not systems --------------------------------------- */
.dir-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.dir-stat {
background: var(--card); border: 1px solid var(--bs-edge); border-radius: var(--r-sm);
padding: 18px 20px; box-shadow: var(--bs);
}
.dir-stat b { display: block; font: 700 26px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dir-stat span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.dir-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; font-size: 12.5px; color: var(--muted); }
.dir-trust span { display: inline-flex; align-items: center; gap: 7px; }
.dir-trust svg { width: 14px; height: 14px; color: var(--teal); }
.dir-card .dc-id { min-width: 0; flex: 1; }
.dir-card .dc-url { display: block; margin-top: 3px; font: 400 12px/1 var(--mono); color: var(--muted); }
.dir-card .dc-url:hover { color: var(--teal); }
.dir-card .dc-ok {
width: 22px; height: 22px; border-radius: 50%; flex: none;
background: var(--mint-soft); color: #0e5f57; display: grid; place-items: center;
}
.dir-card .dc-ok svg { width: 12px; height: 12px; }
.dir-card .dc-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-card .dc-layers span {
font: 600 10.5px/1 var(--font); letter-spacing: .05em;
padding: 6px 8px; border-radius: var(--r-xs);
background: var(--mint-soft); color: #0e5f57;
}
.dir-card .dc-foot {
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted);
}
.dir-card .dc-foot b { font: 700 15px/1 var(--disp); color: var(--ink); }
.dir-card .dc-ver { margin-left: auto; font: 400 11px/1 var(--mono); }
@media (max-width: 640px) { .dir-stats { grid-template-columns: 1fr; } }
/* A square remote thumbnail is an icon or an avatar, not a screenshot. Left to the figure's own
width, Product Hunt's product icon rendered at 960px from an 80px source. Cap it and let it sit
as a mark rather than a banner. */
.prose figure.fig-icon { max-width: 128px; margin-inline: 0; }
.prose figure.fig-icon img { width: 128px; height: auto; border-radius: 14px; }
/* ---- checker form: a labelled field, not a bare pill --------------------- */
.ck-label {
display: block; margin-bottom: 10px;
font: 700 10.5px/1 var(--font); letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.ck-field {
display: flex; align-items: center; gap: 10px;
padding: 9px 9px 9px 20px;
background: var(--card); border: 1px solid var(--bs-edge);
border-radius: var(--r-pill); box-shadow: var(--bs);
transition: border-color .16s ease, box-shadow .16s ease;
}
.ck-field:focus-within { border-color: var(--teal); box-shadow: var(--bs), 0 0 0 3px rgba(15,125,115,.14); }
.ck-form { max-width: none; }
.ck-help { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
/* Beta notice. The checker reads public page code only, so a quiet result is not proof
of absence, and saying so up front is the honest framing for a compliance tool. */
.ck-beta {
margin: 0 0 24px; padding: 14px 18px;
border: 1px solid var(--line); border-left: 3px solid var(--teal);
border-radius: 10px; background: var(--wash);
font-size: 13px; line-height: 1.55; color: var(--muted);
}
.ck-beta b { color: var(--ink); }
.ck-err {
margin-top: 10px; padding: 10px 14px; border-radius: var(--r-sm);
background: #fdece7; color: #8a2b12; font-size: 13px;
}
.ck-err[hidden] { display: none; }
#ckGo[disabled] { opacity: .65; cursor: default; }
.ck-out { scroll-margin-top: 120px; }
/* Nested inside .ck-foot, which already supplies the horizontal padding. Adding its own
doubled it and pushed the buttons right of the footnote beneath them. */
.ck-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 4px; }
.ck-actions .btn { height: 42px; font-size: 14px; }
.ck-foot { padding-top: 14px; }
/* Small source art must not be stretched. The figure rule sets width:100%, which turned the EU
badge PNGs (370x71) into blurred ~960px banners. Render these at their own size instead. */
.prose figure.fig-small { margin-inline: 0; }
.prose figure.fig-small img { width: auto; max-width: 100%; height: auto; border: 0; border-radius: 0; }
/* ---- guide header: copy and its illustration, side by side --------------- */
/* The guides open with a hero illustration. It belongs in the header, once;
emitting it into the body printed it twice and turned its badge overlay
into a figure caption. */
.phero.phero-art {
display: grid; grid-template-columns: 1.15fr .85fr;
gap: clamp(24px, 3vw, 48px); align-items: center;
}
.phero-copy { min-width: 0; }
.phero .phero-art { border-radius: var(--r); overflow: clip; background: rgba(255,255,255,.06); }
.phero .phero-art img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
.phero.phero-art { grid-template-columns: 1fr; }
.phero .phero-art img { aspect-ratio: 16 / 9; }
}
/* ---- mobile polish (inner pages) ----------------------------------------- */
@media (max-width: 720px) {
/* a 12px-tall link is not a tap target */
.dc-url { display: inline-block; padding: 6px 0; }
.prose p.kicker { font-size: 11px; }
/* the rail is a stacked card here, so its links get room to be pressed */
.doc-rail a { padding: 11px 12px; }
.doc-rail h2 { font-size: 11px; }
.pc-tag { font-size: 11px; }
}
/* ---- copy button on code blocks ------------------------------------------ */
.code-wrap { position: relative; }
/* the wrapper inherits the full-bleed width the bare used to claim */
.prose .code-wrap { max-width: none; width: 100%; }
.prose .code-wrap pre { margin: 0; }
.code-copy {
position: absolute; top: 10px; right: 10px;
display: grid; place-items: center; width: 34px; height: 34px;
border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
background: rgba(255,255,255,.08); color: #cfe6da;
cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.code-copy svg { width: 16px; height: 16px; }
.code-wrap:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.code-copy.ok { color: var(--lime); border-color: rgba(159,227,193,.5); opacity: 1; }
.code-copy:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* a pointer that cannot hover never reveals it, so keep it visible there */
@media (hover: none) { .code-copy { opacity: 1; } }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Per-category reach. The six categories look equal in a list, but only chatbots are
detectable off WordPress, so each one states its own scope and no reader has to infer it. */
.ck-scope { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ck-scope b { color: var(--ink); font-weight: 600; }
/* Wide enough to hold this sentence on one line at desktop widths; it wraps normally below. */
.ck-oneline { max-width: 78ch; text-wrap: pretty; }
/* The footnote link used to break with a single word orphaned on the last line.
`pretty` handles the widow; `nowrap` stops the link itself splitting mid-phrase. */
.ck-foot p { text-wrap: pretty; max-width: none; font-size: 12px; }
.ck-foot p a.nowrap, a.nowrap { white-space: nowrap; }
/* The two numbered duties are peers and pair evenly. The third item was neither a duty nor
an article, so as a third card it stranded on its own row and read as a missing pair.
It is now a note under the pair, which matches what it actually is. */
.def-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .def-pair { grid-template-columns: 1fr; } }
.def-note {
margin-top: 14px; padding: 14px 18px;
border-left: 3px solid var(--line); border-radius: 0 8px 8px 0;
background: var(--wash); font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.def-note b { color: var(--ink); font-weight: 600; }
/* Visible AI disclosure on the illustrations, matching itisnothuman's badge.
Scoped to .pc-thumb deliberately: every image in that container is an AI-generated
scene. Docs figures and dashboard screenshots are real captures and must never carry
this, which is why it is not on `.prose figure`. */
/* The hero slider. All five slides are AI-generated scenes, verified before adding this;
the badge sits on the track rather than each slide so it does not animate with them.
NOT applied to .panel-art (dashboard screenshots) or .demo-fig, which deliberately pairs
AI renders with real photographs and would be actively misleading with a blanket badge. */
.ha-track { position: relative; }
.ha-track::before {
content: 'AI'; position: absolute; top: 11px; right: 11px; z-index: 5;
font: 800 10px/1 var(--font); letter-spacing: .1em;
padding: 4px 8px; border-radius: 7px;
color: #0e5f57; background: rgba(255,255,255,.86);
border: 1px solid rgba(15,125,115,.30);
backdrop-filter: blur(4px); pointer-events: none;
}
.pc-thumb { position: relative; }
.pc-thumb::before {
content: 'AI'; position: absolute; top: 11px; right: 11px; z-index: 5;
font: 800 10px/1 var(--font); letter-spacing: .1em;
padding: 4px 8px; border-radius: 7px;
color: #0e5f57; background: rgba(255,255,255,.86);
border: 1px solid rgba(15,125,115,.30);
backdrop-filter: blur(4px); pointer-events: none;
}
/* --- Live previews in the CSS styling guide --------------------------------
The badge base is copied from the plugin's own assets/css/badge.css so a
preview looks like the real thing, with position:absolute dropped so it sits
inline in a demo strip instead of pinning to a corner. */
.sg-demo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin: 18px 0 30px;
padding: 22px 24px 26px;
border: 1px solid var(--line, #e5e7eb);
border-radius: 12px;
background:
linear-gradient(45deg, rgba(0,0,0,.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.03) 75%) 0 0/16px 16px,
linear-gradient(45deg, rgba(0,0,0,.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.03) 75%) 8px 8px/16px 16px;
}
.sg-demo-label {
flex: 1 0 100%;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line, #e5e7eb);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted, #6b7280);
}
/* The preview follows its code block, so it reads as the result of it. */
.prose pre + .sg-demo { margin-top: 12px; }
.sg-demo .aicl-badge {
position: static;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 5px 11px;
border-radius: 999px;
background: var(--aicl-bg, #111);
color: var(--aicl-color, #fff);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: var(--aicl-shadow, 0 1px 3px rgba(0,0,0,.35));
}
.sg-demo .aicl-badge.aicl-shape-square { border-radius: 3px; }
.sg-demo .aicl-badge.aicl-shape-tag {
padding-left: 15px;
border-radius: 4px;
clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
/* Each demo carries its own variables so one preview cannot leak into another. */
.sg-demo.sg-dark { --aicl-bg: #1f2937; --aicl-color: #f9fafb; --aicl-radius: 4px; --aicl-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sg-demo.sg-dark .aicl-badge { border-radius: var(--aicl-radius); }
.sg-demo.sg-types .aicl-badge[data-aicl-type="trainedAlgorithmicMedia"] { background: #4c1d95; color: #fff; }
.sg-demo.sg-types .aicl-badge[data-aicl-type="compositeWithTrainedAlgorithmicMedia"] { background: rgba(76,29,149,.12); color: #4c1d95; box-shadow: none; }
.sg-demo.sg-custom .aicl-badge {
gap: 6px; padding: 5px 10px; border-radius: 4px;
font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
letter-spacing: .02em; box-shadow: none;
}
.sg-demo.sg-custom .aicl-badge::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.sg-demo.sg-custom .aicl-badge[data-aicl-type="trainedAlgorithmicMedia"] { background: #ede9fe; color: #5b21b6; }
.sg-demo.sg-custom .aicl-badge[data-aicl-type="compositeWithTrainedAlgorithmicMedia"] { background: #e0f2fe; color: #075985; }
/* The shortcode notice preview. */
.sg-demo .aicl-ai-notice {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: #111111; color: #ffffff;
font-size: 11.5px; font-weight: 500; line-height: 1.3;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.sg-demo .aicl-ai-notice-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%;
background: rgba(255, 255, 255, .16); color: inherit;
font-size: 7.5px; font-weight: 700; letter-spacing: .02em; flex: none;
}
.sg-demo.sg-banner .aicl-ai-notice-banner {
flex: 1 0 100%;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-left: 3px solid #0f172a;
background: #f8fafc; color: #0f172a;
border-radius: 0; box-shadow: none;
}
.sg-demo.sg-banner .aicl-ai-notice-banner .aicl-ai-notice-mark {
background: #0f172a; color: #ffffff;
}
.sg-demo.sg-td .aicl-text-disclosure {
flex: 1 0 100%;
display: flex; align-items: center; gap: 10px; margin: 0;
padding: 10px 12px; border-radius: 6px;
background: #f1f5f9; color: #0f172a; font-size: 13px;
}
.sg-demo.sg-td .aicl-text-disclosure__mark {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; padding: 2px 5px; border-radius: 3px;
background: #0f172a; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
/* A preview of the badge with the dot switched off, matching what the plugin emits
when Badge Studio's "Show the small dot" is off. */
.sg-demo.sg-nodot .aicl-badge::before { display: none; }
/* The plugin hides its dot when a logo is set, so the previews must too. */
.sg-demo .aicl-badge.aicl-has-logo::before { display: none; }
.sg-demo.sg-logo .aicl-badge-logo {
display: block; height: 15px; width: auto; max-width: 64px;
border-radius: 3px; flex: none;
}
.sg-demo.sg-logo-big .aicl-badge-logo { height: 22px; max-width: 90px; }
.sg-demo.sg-logo-alt .aicl-badge-logo { border-radius: 50%; filter: grayscale(1); order: 2; }
/* "Things that will bite you": four of the five items are cards in the grid below, but the
first carries a code sample and cannot sit in one. Left unstyled it read as an accident.
It is also the only item on the page that describes silent data loss, so it earns the
lead position and a treatment that says so. */
.bite-lead {
margin: 18px 0 22px; padding: 18px 20px;
border: 1px solid var(--line); border-left: 3px solid var(--teal);
border-radius: 12px; background: var(--wash);
}
.bite-lead > h3 { margin: 0; }
.bite-lead > p { margin-top: 10px; }
.bite-lead pre { margin-bottom: 0; }
/* The Article 50 calendar. Was three `.def` cards in an auto-fill grid, which fitted two per row
at the prose width and stranded the third alone and full-bleed. Three dates are always three
dates, so the count is fixed rather than inferred, and it stacks in one step on narrow screens.
Each item states whether it has already bitten: a calendar you cannot read past-from-future on
is doing half its job, and one of these three is not the reader's deadline at all. */
.cal-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px; margin: 22px 0 0; padding: 0; list-style: none;
counter-reset: none;
}
@media (max-width: 760px) { .cal-grid { grid-template-columns: 1fr; } }
.cal-item {
display: flex; flex-direction: column; gap: 8px;
padding: 18px 18px 20px;
background: var(--card); border: 1px solid var(--bs-edge);
border-radius: var(--r-sm); box-shadow: var(--bs);
}
.cal-item::before { content: none; }
.cal-date {
margin: 0; font-family: var(--disp); font-size: 17px; font-weight: 700;
letter-spacing: -.01em; color: var(--ink);
}
.cal-pill {
margin: 0; align-self: flex-start;
font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
padding: 5px 9px; border-radius: var(--r-xs);
}
.cal-pill.now { background: var(--mint-soft); color: #0e5f57; }
.cal-pill.na { background: var(--grey); color: var(--muted); }
.cal-body {
margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted);
text-wrap: pretty;
}
.cal-body b { color: var(--ink); font-weight: 600; }
/* The EU icon table. The Icon column shipped empty; the icons are wide and short, so the
cell is sized to them rather than letting the column collapse to the image's intrinsic
width and squash the two text columns beside it. */
.eu-cell { width: 210px; vertical-align: top; }
.eu-ico {
/* The three icons are different shapes: the basic mark is square (98x98), the worded ones are
about 5:1 (370x71, 325x71). BOTH dimensions must stay `auto` or the image distorts: a fixed
height with `max-width: 100%` squeezes the wide ones horizontally while pinning their height,
which is exactly what happened here. Capping with max-height/max-width instead lets the
browser scale proportionally, and the cell is wide enough for a 5:1 icon at full height. */
display: block; width: auto; height: auto;
max-height: 34px; max-width: 100%;
margin: 0 auto; padding: 10px 12px; border-radius: 8px; background: var(--wash);
box-sizing: content-box;
}
@media (max-width: 620px) {
.eu-cell { width: 130px; }
.eu-ico { max-height: 24px; padding: 8px; }
}