) — readable spacing */ .main .tool > h3 + p, .main .tool > h2 + p { padding: 12px 16px 0; margin: 0 0 12px; font-size: var(--t-sm); color: var(--ink-3); background: var(--bg); } /* When two bar-headers are adjacent (because their contents are empty), collapse the gap so the bars stack flush. */ .main .tool > h3 + h3, .main .tool > h2 + h2, .main .tool > h3 + h2, .main .tool > h2 + h3 { border-top: 0; } .main .tool > h3:first-of-type { margin-top: 16px; } .main .tool > *:not(.tool__bar):not(.tool__panes):not(.tool__foot):not(.tool__pane) { padding-left: 14px; padding-right: 14px; } .main .tool > p, .main .tool > .controls, .main .tool > .options, .main .tool > .actions, .main .tool > .field, .main .tool > .stats, .main .tool > .status, .main .tool > .pager, .main .tool > .errors, .main .tool > .error-list, .main .tool > .summary, .main .tool > .result, .main .tool > .table-wrap, .main .tool > textarea, .main .tool > input, .main .tool > select, .main .tool > .drop-zone, .main .tool > .dropzone, .main .tool > .drop, .main .tool > pre { padding-left: 14px; padding-right: 14px; } /* --- Top-level textareas inside .tool look like tool__in ---- */ .main .tool > textarea { display: block; width: 100%; padding: 14px 16px; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; outline: none; resize: vertical; min-height: 240px; margin: 14px 0; transition: border-color 0.14s ease, box-shadow 0.14s ease; } .main .tool > textarea:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.12); } .main .tool > textarea { border: 0; border-top: 1px solid var(--rule); border-radius: 0; margin: 0; padding: 14px 16px; resize: vertical; } .main .tool > textarea:first-child { border-top: 0; } .main .tool > textarea:focus { box-shadow: none; background: #fbfaf6; } /* --- Buttons inside main ------------------------------------ */ .main button:not(.btn):not(.header__cta):not(.nav-toggle) { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: -0.005em; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; white-space: nowrap; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.10s ease; } .main button:not(.btn):not(.header__cta):not(.nav-toggle):hover { background: var(--bg-2); border-color: var(--ink-3); } .main button:not(.btn):not(.header__cta):not(.nav-toggle):active { transform: translateY(1px); } .main button:not(.btn):not(.header__cta):not(.nav-toggle):disabled { opacity: 0.5; cursor: not-allowed; } /* Promote primary-looking buttons (id contains run/validate/convert/download/copy) */ .main button[id*="run"], .main button[id*="validate"], .main button[id*="convert"], .main button[id*="download"], .main button[id*="apply"], .main button[id$="-go"] { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); } .main button[id*="run"]:hover, .main button[id*="validate"]:hover, .main button[id*="convert"]:hover, .main button[id*="download"]:hover, .main button[id*="apply"]:hover, .main button[id$="-go"]:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } /* --- Form inputs/select ------------------------------------- */ .main input[type="text"]:not(.header__search input), .main input[type="search"]:not(.header__search input), .main input[type="number"], .main input[type="url"], .main input[type="email"], .main select { height: 30px; padding: 0 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; outline: none; transition: border-color 0.14s ease, box-shadow 0.14s ease; } .main input[type="text"]:focus, .main input[type="search"]:focus, .main input[type="number"]:focus, .main input[type="url"]:focus, .main input[type="email"]:focus, .main select:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.12); } .main input[type="file"] { font-size: 13px; max-width: 100%; } /* --- Controls / options / actions row ----------------------- */ .main .controls, .main .options, .main .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; background: var(--bg-2); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); } /* Only top-border between siblings inside .tool — never doubled */ .main .tool > .controls, .main .tool > .options, .main .tool > .actions { border-top: 1px solid var(--rule); } .main .tool > .controls:first-child, .main .tool > .options:first-child, .main .tool > .actions:first-child { border-top: 0; } .main .controls label, .main .options label, .main .actions label, .main .field { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-family: var(--mono); font-size: var(--t-xs); white-space: nowrap; } .main .controls label input[type="text"], .main .controls label input[type="number"], .main .controls label select, .main .options label input[type="text"], .main .options label input[type="number"], .main .options label select { height: 26px; font-size: 12px; } /* --- Drop zones --------------------------------------------- */ .main .drop-zone, .main .dropzone { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 0.88em; color: var(--ink-3); padding: 10px 14px; border-radius: 0; text-align: center; background: var(--bg); transition: background 0.14s ease, color 0.14s ease; } .main .drop-zone div, .main .dropzone div { display: inline; } .main .drop-zone strong, .main .dropzone strong { font-weight: 600; color: var(--ink-2); } .main .tool > .drop-zone, .main .tool > .dropzone { border-top: 1px solid var(--rule); } .main .tool > .drop-zone:first-child, .main .tool > .dropzone:first-child { border-top: 0; } /* Make file inputs sit inline next to drop hint text */ .main .drop input[type="file"], .main .drop-zone input[type="file"], .main .dropzone input[type="file"] { font-size: 12px; max-width: 220px; } .main .drop-zone.drag, .main .dropzone.drag, .main .drop-zone.dragover, .main .dropzone.dragover { background: var(--accent-wash); color: var(--accent-dark); } /* --- Status / errors / pager / stats ------------------------ */ .main .status, .main .summary, .main .stats, .main .pager, .main .error-list, .main .errors { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); padding: 8px 14px; background: var(--bg-2); letter-spacing: 0.01em; } .main .tool > .status, .main .tool > .summary, .main .tool > .stats, .main .tool > .pager, .main .tool > .error-list, .main .tool > .errors { border-top: 1px solid var(--rule); } .main .tool > .status:first-child, .main .tool > .summary:first-child, .main .tool > .stats:first-child, .main .tool > .pager:first-child, .main .tool > .error-list:first-child, .main .tool > .errors:first-child { border-top: 0; } .main .status.ok, .main .status.success { color: var(--ok); background: var(--ok-wash); } .main .status.err, .main .status.error, .main .status.fail { color: var(--err); background: var(--err-wash); } .main .errors, .main .error-list { color: var(--err); background: var(--err-wash); } .main .error-list:empty, .main .errors:empty { display: none; } .main .error-list ul, .main .errors ul { margin: 0; padding-left: 20px; } .main .pager { display: flex; align-items: center; gap: 8px; } /* --- Stat blocks -------------------------------------------- */ .main .stat { display: inline-flex; flex-direction: column; padding: 10px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; margin: 0 8px 8px 0; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); } .main .stat strong { color: var(--ink); font-size: var(--t-md); font-weight: 600; } /* --- Result panes (when not using .tool__panes) ------------- */ .main .result, .main .url-output, .main .output-host, .main .sql-results, .main .tree-host { background: var(--bg-2); border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink); padding: 14px 16px; white-space: pre; overflow: auto; max-height: 560px; } .main .url-output { white-space: normal; } /* --- Two-pane layouts --------------------------------------- */ .main .panes, .main .split, .main .two-pane, .main .sql-pane { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; } .main .panes { grid-template-columns: 1fr 1fr; } /* When .panes is the first child of .tool, it sits flush below the title bar. When stacked with siblings (.controls/.status), top/bottom rules separate them. */ .main .tool > .panes, .main .tool > .split, .main .tool > .two-pane, .main .tool > .sql-pane { border-top: 1px solid var(--rule); } .main .tool > .panes:first-child, .main .tool > .split:first-child, .main .tool > .two-pane:first-child, .main .tool > .sql-pane:first-child { border-top: 0; } .main .sql-pane > div + div { border-left: 1px solid var(--rule); } .main .sql-pane > div { display: flex; flex-direction: column; min-width: 0; min-height: 280px; } .main .sql-pane > div > label { display: block; padding: 8px 14px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); background: var(--bg-2); border-bottom: 1px solid var(--rule); margin: 0; } .main .sql-pane textarea { flex: 1; border: 0; padding: 14px 16px; font-family: var(--mono); font-size: 13px; resize: none; outline: none; min-height: 240px; } .main .sql-results { background: var(--bg-2); padding: 14px 16px; font-family: var(--mono); font-size: 13px; overflow: auto; flex: 1; min-height: 280px; } .main .panes > .pane + .pane, .main .split > .pane + .pane, .main .two-pane > .pane + .pane { border-left: 1px solid var(--rule); } .main .pane { display: flex; flex-direction: column; min-width: 0; background: var(--surface); } .main .pane.preview, .main .pane.full, .main .pane:nth-child(2) { background: var(--bg-2); } .main .pane-label, .main .pane > label { display: block; padding: 8px 14px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); background: var(--bg-2); border-bottom: 1px solid var(--rule); text-transform: lowercase; letter-spacing: 0.04em; margin: 0; } .main .pane textarea, .main .pane > pre, .main .pane > .output-host, .main .pane > .errors, .main .pane > .error-list, .main .pane > .result, .main .pane > [data-role="errors"], .main .pane > [data-role="output"] { flex: 1; border: 0; border-radius: 0; margin: 0; padding: 14px 16px; min-height: 360px; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink); resize: none; outline: none; background: var(--surface); } .main .pane > .errors, .main .pane > .error-list, .main .pane > [data-role="errors"] { color: var(--err); } .main .pane:nth-child(2), .main .pane.preview, .main .pane.full { background: var(--bg-2); } .main .pane:nth-child(2) textarea[readonly], .main .pane:nth-child(2) > .errors, .main .pane:nth-child(2) > .result, .main .pane.preview textarea, .main .pane.full textarea { background: var(--bg-2); } /* Ensure both panes inside .panes have the same height (grid does this only if the row has explicit height; force it via min-height on the pane). */ .main .panes > .pane, .main .split > .pane, .main .two-pane > .pane { min-height: 400px; } /* Output panes have no .drop file picker, so they would render shorter than input panes — phantom spacer matches the .drop height so both panes balance. */ .main .panes > .pane:not(:has(.drop))::after, .main .split > .pane:not(:has(.drop))::after, .main .two-pane > .pane:not(:has(.drop))::after { content: ""; display: block; height: 41px; flex-shrink: 0; border-top: 1px solid var(--rule); } /* --- Tables (legacy .viewer-table) -------------------------- */ .main .viewer-table { border-collapse: collapse; font-family: var(--mono); font-size: 13px; width: 100%; } .main .viewer-table th, .main .viewer-table td { border: 1px solid var(--rule-soft); padding: 5px 10px; text-align: left; vertical-align: top; white-space: pre; } .main .viewer-table th { background: var(--bg-2); position: sticky; top: 0; cursor: pointer; user-select: none; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } /* --- Features lists (legacy .features as
result blocks) show placeholder hint text so empty panes don't
look dead. Hint vanishes the moment JS fills in content. */
.main .pane > .errors:empty::before,
.main .pane > .error-list:empty::before,
.main .pane > [data-role="errors"]:empty::before {
content: 'Validation errors will appear here…';
display: block; color: var(--ink-4); font-style: italic;
padding: 14px 16px; font-family: var(--mono); font-size: 13px;
}
.main .pane > .result:empty::before,
.main .pane > [data-role="output"]:empty::before {
content: 'Output appears here…';
display: block; color: var(--ink-4); font-style: italic;
padding: 14px 16px; font-family: var(--mono); font-size: 13px;
}
.main .pane > .preview:empty::before,
.main .pane.preview:empty::before {
content: 'Preview appears here…';
display: block; color: var(--ink-4); font-style: italic;
padding: 14px 16px; font-family: var(--sans); font-size: var(--t-sm);
}
/* Empty output blocks inside .tool — placeholder hint */
.main .tool > pre[id]:empty::before,
.main .pane > pre:empty::before,
.main .two-pane pre:empty::before,
.main .split pre:empty::before {
content: 'Output appears here…';
display: block; color: var(--ink-4); font-style: italic;
font-family: var(--mono); font-size: 13px;
}
/* GeoJSON map: ensure the leaflet container has explicit pixel height —
leaflet doesn't size correctly inside flex/grid items without it. */
.main .map-wrap {
position: relative;
}
.main .map-wrap > .map,
.main .map-wrap > [data-role="map"],
.main #map {
width: 100% !important;
height: 480px !important;
min-height: 480px !important;
flex: none !important;
background: #dbe7d8;
}
.main .panes > .map-wrap,
.main .split > .map-wrap,
.main .two-pane > .map-wrap { min-height: 540px; }
/* When map is inside .pane sibling, also target it */
.main .pane > .map,
.main .pane > [data-role="map"] {
width: 100% !important;
flex: 1 !important;
min-height: 380px !important;
}
/* h3 inside a pane (proto-to-go pattern: .proto schema
) — same
look as a pane-label, not a free-floating heading. */
.main .pane > h3,
.main .two-pane > div > h3,
.main .split > div > h3 {
display: block;
padding: 8px 14px;
margin: 0;
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 600;
color: var(--ink-3);
background: var(--bg-2);
border-bottom: 1px solid var(--rule);
text-transform: lowercase;
letter-spacing: 0.04em;
line-height: 1.3;
}
/* Privacy/lede notice tighten — don't let it eat half the page */
.main .privacy-note,
.main .privacy,
.main .privacy-banner,
.main .privacy-strip { max-width: 68ch; }
/* --- Dataset gallery (datasets.php) ------------------------- */
.main .dataset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin: 22px 0 28px;
}
.main .dataset-card {
display: block;
border: 1px solid var(--rule);
background: var(--surface);
border-radius: 6px;
padding: 16px;
text-decoration: none;
color: var(--ink-2);
transition: border-color 0.14s ease, background 0.14s ease, transform 0.10s ease;
}
.main .dataset-card:hover {
border-color: var(--ink-3);
background: var(--bg-2);
text-decoration: none;
}
.main .dataset-card:active { transform: translateY(1px); }
.main .dataset-card__name {
font-family: var(--mono);
font-size: var(--t-sm);
color: var(--accent);
margin-bottom: 6px;
word-break: break-all;
}
.main .dataset-card__desc {
color: var(--ink-2);
font-size: var(--t-sm);
line-height: 1.5;
margin-bottom: 10px;
}
.main .dataset-card__meta {
font-family: var(--mono);
font-size: var(--t-xxs);
color: var(--ink-4);
letter-spacing: 0.02em;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* --- Mobile tweaks ------------------------------------------ */
@media (max-width: 820px) {
.main .panes,
.main .split,
.main .two-pane { grid-template-columns: 1fr; }
.main .panes > .pane + .pane,
.main .split > .pane + .pane,
.main .two-pane > .pane + .pane {
border-left: 0;
border-top: 1px solid var(--rule);
}
.main .tool textarea { font-size: 16px; min-height: 200px; }
.main button:not(.btn):not(.header__cta):not(.nav-toggle) { height: 38px; padding: 0 14px; font-size: var(--t-sm); }
.main input[type="text"],
.main input[type="search"],
.main input[type="number"],
.main input[type="url"],
.main input[type="email"],
.main select { height: 38px; font-size: 16px; padding: 0 10px; }
}
/* ============================================================
v11 polish — visual hierarchy fixes (sweep round 5)
- Promote primary actions by data-role (existing rule was id-based;
half the tools use data-role and had no primary CTA).
- Balance the right pane vs. the left pane that owns the .drop footer.
- Subtle accent rail on the input pane so the eye knows where to start.
============================================================ */
/* Primary action promotion by data-role (parallel to the id-based rule above) */
.main button[data-role="run"],
.main button[data-role="format"],
.main button[data-role="convert"],
.main button[data-role="validate"],
.main button[data-role="diff"],
.main button[data-role="encode"],
.main button[data-role="decode"],
.main button[data-role="apply"],
.main button[data-role="generate"],
.main button[data-role="parse"],
.main button[data-role="build"],
.main button[data-role="compile"] {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.main button[data-role="run"]:hover,
.main button[data-role="format"]:hover,
.main button[data-role="convert"]:hover,
.main button[data-role="validate"]:hover,
.main button[data-role="diff"]:hover,
.main button[data-role="encode"]:hover,
.main button[data-role="decode"]:hover,
.main button[data-role="apply"]:hover,
.main button[data-role="generate"]:hover,
.main button[data-role="parse"]:hover,
.main button[data-role="build"]:hover,
.main button[data-role="compile"]:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: #fff;
}
/* Destructive-ish actions stay neutral but slightly muted to push the eye
toward the primary action. Targets the literal 'Clear' button. */
.main button[data-role="clear"],
.main button[data-role="reset"] {
color: var(--ink-3);
border-color: var(--rule);
background: transparent;
}
.main button[data-role="clear"]:hover,
.main button[data-role="reset"]:hover {
color: var(--err);
border-color: var(--err);
background: transparent;
}
/* --- Pane balance ------------------------------------------------
The input pane usually carries a .drop footer; the output pane has
none, so the right column ends ~50px shorter and looks hollow.
Mirror the foot height on the output pane via a flex spacer. */
.main .panes > .pane:not(:has(.drop)),
.main .panes > .pane:not(:has(input[type="file"])) {
position: relative;
}
.main .panes > .pane > textarea[readonly] {
background: var(--bg-2);
}
.main .panes > .pane > textarea[readonly]:placeholder-shown {
/* keep the placeholder readable on the tinted output bg */
color: transparent;
}
/* Phantom footer on the output pane to match the .drop footer height
on the input pane — purely visual symmetry. */
.main .panes > .pane:nth-child(2):not(:has(.drop))::after {
content: "";
display: block;
border-top: 1px solid var(--rule-soft);
background: var(--bg-2);
min-height: 44px;
}
/* --- Output pane: a clearer "result" affordance ----------------- */
.main .panes > .pane:nth-child(2) > label,
.main .panes > .pane.preview > label,
.main .panes > .pane.full > label {
border-left: 2px solid var(--accent-soft);
padding-left: 12px;
}
.main .panes > .pane:nth-child(1) > label {
border-left: 2px solid var(--accent);
padding-left: 12px;
}
/* --- Drop zone polish: a touch more visual weight, a touch less
horizontal padding so the file picker fits without wrapping --- */
.main .drop {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 12px;
font-size: var(--t-xs);
}
.main .drop input[type="file"] {
font-size: 12px;
max-width: 220px;
}
/* --- Indent input (and similar small numeric inputs in toolbars) — give
it a labeled slot rather than a floating "2" ----------------- */
.main .controls label:has(input[type="number"]) {
padding: 0 8px 0 10px;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--surface);
height: 30px;
gap: 8px;
}
.main .controls label:has(input[type="number"]) input[type="number"] {
height: 26px;
border: 0;
padding: 0;
width: 3em;
background: transparent;
text-align: center;
font-feature-settings: "tnum";
}
.main .controls label:has(input[type="number"]):focus-within {
border-color: var(--accent-soft);
box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.10);
}
/* --- Page title region: tighten meta line so it doesn't compete --- */
.main .page-title {
margin: 8px 0 4px;
}
.main .page-meta {
margin-bottom: 24px;
opacity: 0.85;
}
/* --- Status bar: when empty, show a subtle "ready" cue so the row
isn't an unexplained blank stripe under the tool. ------------- */
.main .tool > .status:empty::before,
.main .tool > [data-role="status"]:empty::before {
content: "ready.";
color: var(--ink-4);
font-style: italic;
letter-spacing: 0.02em;
}
/* ============ Boxed centered page (2026-04-29) ============ */
html { background: var(--bg-2); }
body {
max-width: 1280px;
margin: 0 auto;
border-left: 1px solid var(--rule);
border-right: 1px solid var(--rule);
}
@media (max-width: 1280px) {
body { border-left: 0; border-right: 0; }
}
/* ============ Theme toggle button ============ */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid var(--header-input-edge);
border-radius: 6px;
color: var(--header-ink);
cursor: pointer;
margin-right: 6px;
transition: background 0.14s ease, border-color 0.14s ease;
}
.theme-toggle:hover { background: var(--header-input); }
.theme-toggle__sun, .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
/* ============ Rich error rendering (validator/fixer/stats) ============ */
.main .err-list { list-style: none; padding-left: 0; margin: 8px 0 0; }
.main .err-list > li {
padding: 10px 12px;
margin: 0;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--err-wash);
color: var(--ink-2);
}
.main .err-list > li + li { margin-top: 8px; }
.main .err-list .err-loc {
display: inline-block;
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 600;
color: var(--err);
margin-right: 6px;
}
.main .err-list pre.err-src {
margin: 8px 0 0;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 3px;
overflow-x: auto;
font-size: 12.5px;
line-height: 1.4;
}
.main .err-list pre.err-src code {
display: block;
padding: 0;
background: transparent;
font-family: var(--mono);
white-space: pre;
color: var(--ink);
}
.main .err-list pre.err-src code.err-caret {
color: var(--err);
font-weight: 700;
white-space: pre;
}
.main .err-list .err-hint {
margin-top: 6px;
padding: 6px 10px;
background: var(--bg-tint);
border-left: 3px solid var(--accent);
border-radius: 3px;
font-size: var(--t-sm);
color: var(--ink-2);
}
.main .err-list .err-hint strong { color: var(--accent); }
/* ============ Stats fields table ============ */
.main .st-fields {
width: 100%;
border-collapse: collapse;
font-size: var(--t-sm);
}
.main .st-fields th, .main .st-fields td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--rule-soft);
vertical-align: top;
}
.main .st-fields th {
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.04em;
color: var(--ink-3);
background: var(--bg-2);
border-bottom: 1px solid var(--rule);
}
.main .st-fields tbody tr:hover { background: var(--bg-2); }
.main .st-fields code {
background: var(--bg-tint);
border: 0;
padding: 1px 5px;
}
/* ============ Dark theme overrides ============
* Keep the same accent/CTA colors so tone stays consistent;
* invert only surfaces/ink/rules. */
[data-theme="dark"] {
color-scheme: dark; /* scrollbars, form controls and pickers follow */
--bg: #161412;
--bg-2: #1f1d1a;
--bg-tint: #1c2735;
--bg-tint-border:#2a3a52;
--surface: #1a1816;
--ink: #ece8df;
--ink-2: #c4bfb3;
/* ink-3 and ink-4 are lighter here than a straight inversion would make them.
Both carry real content on this site — kit domains, tool counts, guide
blurbs, the footer "All 135 →" — and at the light palette's equivalents
they measured 2.4:1 to 2.7:1 on these surfaces, well under AA. These clear
4.5:1 against both --bg and --bg-2. The two tiers sit closer together than
in the light palette because there is not much room below ink-3 on a dark
ground that still passes; the separation that remains is deliberate. */
--ink-3: #9c988c;
--ink-4: #8a867e;
--rule: #2c2925;
--rule-soft: #221f1c;
--rule-hard: #f0ebdf;
--accent: #6f9ad1;
--accent-dark: #95b7e0;
--accent-soft: #4d7aae;
--accent-wash: #1e2a3d;
--focus-ring: 0 0 0 3px rgba(149, 183, 224, 0.35);
--link: #8ab4f0;
--link-hover: #b9d2f7;
--link-underline: rgba(138, 180, 240, 0.40);
--err: #e0837a;
--err-wash: #2a1815;
--ok: #8ec07c;
--ok-wash: #1a2117;
--header-bg: #0b1320;
--header-edge: #050913;
--header-ink: #f6f3ec;
--header-ink-2: #8896a8;
--header-input: #131e30;
--header-input-edge: #1f2c43;
}
[data-theme="dark"] html { background: var(--bg-2); }
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] pre,
[data-theme="dark"] code { color: var(--ink); }
[data-theme="dark"] .main .tool { background: var(--surface); }
[data-theme="dark"] .main .tool > textarea {
color: var(--ink);
background: var(--bg);
}
[data-theme="dark"] .main .tool > textarea:focus { background: #211f1c; }
[data-theme="dark"] .main button:not(.btn):not(.header__cta):not(.nav-toggle):not(.theme-toggle) {
color: var(--ink);
background: var(--surface);
border-color: var(--rule);
}
[data-theme="dark"] .main button.primary-action,
[data-theme="dark"] .main button:not(.btn):not(.header__cta):not(.nav-toggle):not(.theme-toggle):hover {
background: var(--accent);
color: #0e1a2c;
border-color: var(--accent);
}
[data-theme="dark"] .err-list > li { background: var(--err-wash); border-color: #3a201c; }
[data-theme="dark"] .err-list pre.err-src { background: #100e0c; border-color: #2c2925; }
[data-theme="dark"] .err-list pre.err-src code { color: var(--ink); }
[data-theme="dark"] .err-list .err-hint { background: var(--bg-tint); border-left-color: var(--accent); }
[data-theme="dark"] .st-fields th { background: var(--bg-2); color: var(--ink-3); }
[data-theme="dark"] .st-fields tbody tr:hover { background: #221f1c; }
[data-theme="dark"] .privacy-note,
[data-theme="dark"] .main .privacy,
[data-theme="dark"] .main .notice,
[data-theme="dark"] .main .info { background: var(--bg-tint); border-color: var(--bg-tint-border); }
[data-theme="dark"] .dataset-card { background: var(--surface); border-color: var(--rule); }
[data-theme="dark"] details { border-color: var(--rule); }
[data-theme="dark"] summary { color: var(--ink); }
[data-theme="dark"] .sidebar { background: var(--bg-2); border-color: var(--rule); }
[data-theme="dark"] .sidebar a { color: var(--ink-2); }
[data-theme="dark"] .sidebar a.active,
[data-theme="dark"] .sidebar a:hover { color: var(--ink); background: var(--surface); }
[data-theme="dark"] .foot { background: var(--bg-2); color: var(--ink-3); border-color: var(--rule); }
/* ============================================================
PDF batch tool UI (pdftoolskit.org)
============================================================ */
/* Override the slim .drop with a more inviting drop target */
.main .drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 120px;
padding: 24px 18px;
border: 2px dashed var(--rule);
border-radius: 8px;
background: var(--bg-2);
color: var(--ink-3);
cursor: pointer;
text-align: center;
margin: 0 0 12px;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.main .drop:hover { border-color: var(--accent-soft); color: var(--ink-2); }
.main .drop.drop--over {
border-color: var(--accent);
background: var(--accent-wash);
color: var(--accent-dark);
}
.main .drop .drop__hint {
font-size: var(--t-sm);
font-weight: 500;
color: var(--ink-2);
margin: 0;
}
.main .drop .drop__sub {
font-size: var(--t-xs);
color: var(--ink-4);
font-family: var(--mono);
margin: 0;
}
/* File list — drop a stack of files in here */
.file-list-pdf {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.file-list-pdf:empty { display: none; }
.file-row {
display: grid;
grid-template-columns: 60px 30px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--rule);
background: var(--surface);
border-radius: 5px;
font-size: var(--t-sm);
min-height: 84px;
}
.file-row:not(:has(.file-row__thumb)) {
grid-template-columns: 30px 1fr auto auto;
min-height: 0;
}
.file-row__thumb,
.out-row__thumb {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 72px;
background: var(--bg-2);
border: 1px solid var(--rule-soft);
border-radius: 3px;
overflow: hidden;
flex: 0 0 auto;
position: relative;
}
.thumb-canvas { display: block; max-width: 100%; max-height: 100%; }
.thumb--pending {
background: linear-gradient(90deg, var(--bg-2) 0%, var(--rule-soft) 50%, var(--bg-2) 100%);
background-size: 200% 100%;
animation: thumb-shimmer 1.4s linear infinite;
}
.thumb--err { color: var(--err); background: var(--err-wash); }
.thumb-err__icon { font-family: var(--mono); font-weight: 700; font-size: 18px; }
@keyframes thumb-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.file-row__idx { color: var(--ink-4); font-family: var(--mono); font-size: var(--t-xs); }
.file-row__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
color: var(--ink);
}
.file-row__size {
color: var(--ink-4);
font-family: var(--mono);
font-size: var(--t-xs);
white-space: nowrap;
}
.file-row__ctrls { display: inline-flex; gap: 2px; }
.file-row__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid transparent;
color: var(--ink-3);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.file-row__btn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--rule); }
.file-row__btn--rm:hover { background: var(--err-wash); color: var(--err); border-color: var(--err-wash); }
/* Output queue */
.out-list {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.out-list:empty { display: none; }
.out-row {
display: grid;
grid-template-columns: 60px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--rule);
border-left: 3px solid var(--ok);
border-radius: 5px;
font-size: var(--t-sm);
min-height: 84px;
}
.out-row:not(:has(.out-row__thumb)) {
grid-template-columns: 1fr auto auto;
min-height: 0;
}
.out-row__name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.out-row__size { color: var(--ink-4); font-family: var(--mono); font-size: var(--t-xs); }
.out-row__dl {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
background: var(--accent);
color: #fff;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
font-size: var(--t-sm);
transition: filter 0.12s ease;
}
.out-row__dl:hover { color: #fff; filter: brightness(1.08); text-decoration: none; }
/* Status pill */
.status {
font-family: var(--mono);
font-size: var(--t-xs);
color: var(--ink-3);
padding: 6px 0 0;
}
.status--info { color: var(--ink-3); }
.status--busy { color: var(--accent); }
.status--ok { color: var(--ok); }
.status--err { color: var(--err); }
/* Tool form layout */
.tool-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
padding: 14px 16px;
background: var(--bg-2);
border: 1px solid var(--rule-soft);
border-radius: 6px;
margin: 0 0 14px;
}
.tool-form label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--t-xs);
font-weight: 500;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tool-form input[type="text"],
.tool-form input[type="number"],
.tool-form input[type="password"],
.tool-form select,
.tool-form textarea {
height: 36px;
padding: 0 10px;
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-size: var(--t-sm);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
border: 1px solid var(--rule);
border-radius: 4px;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tool-form textarea {
height: auto;
min-height: 140px;
padding: 10px;
font-family: var(--mono);
font-size: 13.5px;
line-height: 1.5;
resize: vertical;
}
.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
outline: none;
border-color: var(--accent-soft);
box-shadow: 0 0 0 3px rgba(21, 53, 92, 0.18);
}
.tool-form .check {
flex-direction: row;
align-items: center;
gap: 8px;
text-transform: none;
letter-spacing: normal;
color: var(--ink-2);
font-weight: 400;
font-size: var(--t-sm);
}
.tool-form .check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
/* Action bar */
.tool-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 38px;
padding: 0 16px;
font-family: var(--sans);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
border-radius: 5px;
border: 1px solid var(--rule);
background: var(--surface);
color: var(--ink);
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.btn:hover { background: var(--bg-2); border-color: var(--ink-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-primary:disabled { background: var(--accent); border-color: var(--accent); }
.tool-summary {
flex: 1;
min-width: 0;
font-family: var(--mono);
font-size: var(--t-xs);
color: var(--ink-4);
text-align: right;
}
/* Inspector card */
.inspect-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 6px;
margin: 0 0 12px;
overflow: hidden;
}
.inspect-tbl {
width: 100%;
border-collapse: collapse;
font-size: var(--t-sm);
}
.inspect-tbl th,
.inspect-tbl td {
padding: 8px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--rule-soft);
}
.inspect-tbl tr:last-child th,
.inspect-tbl tr:last-child td { border-bottom: 0; }
.inspect-tbl th {
width: 130px;
font-weight: 500;
color: var(--ink-3);
font-family: var(--mono);
font-size: var(--t-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.inspect-tbl td {
color: var(--ink);
font-family: var(--mono);
font-size: 12.5px;
word-break: break-word;
}
/* Viewer layout */
.viewer-shell {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 0 14px;
}
.viewer-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--bg-2);
border: 1px solid var(--rule-soft);
border-radius: 6px;
}
.viewer-bar select {
height: 32px;
padding: 0 8px;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-size: var(--t-sm);
}
.viewer-stage {
background: #2a2520;
border: 1px solid var(--rule);
border-radius: 6px;
padding: 18px;
display: flex;
justify-content: center;
min-height: 320px;
}
.viewer-stage canvas {
background: #fff;
display: block;
max-width: 100%;
box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);
}
/* Brand colour adjustments — pngtoolskit accent is sky blue */
:root {
--png-accent: #0EA5E9;
}
.header__brand .dot { background: var(--png-accent); }
.megamenu__link.active,
.megamenu__trigger[aria-expanded="true"] { border-bottom-color: var(--png-accent); }
/* Mobile tweaks */
@media (max-width: 820px) {
.file-row { grid-template-columns: 56px 1fr auto; gap: 8px; padding: 8px 10px; }
.file-row:not(:has(.file-row__thumb)) { grid-template-columns: 24px 1fr auto; }
.file-row__idx { display: none; }
.file-row__size { display: none; }
.out-row { grid-template-columns: 56px 1fr auto; row-gap: 6px; }
.out-row:not(:has(.out-row__thumb)) { grid-template-columns: 1fr auto; }
.out-row__size { grid-column: 2 / span 1; }
.out-row__dl { grid-column: 1 / -1; height: 36px; }
.tool-form { padding: 12px; gap: 10px; }
}
/* PNG-specific UI additions */
.palette {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 0;
}
.palette-swatch {
width: 36px;
height: 36px;
border-radius: 4px;
border: 1px solid var(--rule);
cursor: copy;
}
.color-display {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 16px;
border-radius: 6px;
font-family: var(--mono);
font-size: var(--t-sm);
border: 1px solid var(--rule);
background: var(--bg-2);
margin-left: 8px;
}
.viewer-stage img,
.viewer-stage canvas {
background: repeating-conic-gradient(#e2e2e2 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
/* Interactive preview canvas (crop / background / pixelate / live-preview tools) */
.preview {
margin: 16px 0;
display: none;
}
.preview.preview--has {
display: block;
}
.preview__stage {
position: relative;
background: repeating-conic-gradient(#e2e2e2 0% 25%, transparent 0% 50%) 50% / 16px 16px;
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
max-width: 100%;
box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
[data-theme="dark"] .preview__stage {
background: repeating-conic-gradient(#1f2937 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.preview__base,
.preview__overlay {
display: block;
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
.preview__base {
position: relative; /* first one establishes flow size */
}
.preview__overlay {
pointer-events: auto;
user-select: none;
touch-action: none;
}
.preview__hint {
margin-top: 6px;
font-size: var(--t-sm);
color: var(--ink-4);
font-style: italic;
}
/* Image-diff A <-> B swipe-compare */
.cmp {
position: relative;
line-height: 0;
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
background: repeating-conic-gradient(#e2e2e2 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
[data-theme="dark"] .cmp {
background: repeating-conic-gradient(#1f2937 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.cmp__img {
display: block;
width: 100%;
height: auto;
}
.cmp__b {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cmp__divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
background: #0EA5E9;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* ============================================================
========== tinytoolkit.org — hub components ==============
The tokens, header, mega menu, footer bar and dark theme above
are shared with the tool sites. Everything below is the hub:
a directory rather than a workbench, so it needs cards, an
index grid, a search overlay and the .ext format chip.
============================================================ */
.wrap { max-width: 1180px; margin: 0 auto; }
/* ---------- The .ext chip: one hue per format, theme-safe ---------- */
.ext {
--h: 222; --s: 55%;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-family: var(--mono);
font-size: var(--t-xxs);
font-weight: 500;
line-height: 1;
padding: 4px 6px;
border-radius: 4px;
letter-spacing: 0.01em;
color: hsl(var(--h) var(--s) 30%);
background: hsl(var(--h) calc(var(--s) - 5%) 94%);
border: 1px solid hsl(var(--h) calc(var(--s) - 10%) 86%);
white-space: nowrap;
}
.ext--json { --h: 222; }
.ext--jsonl { --h: 190; }
.ext--csv { --h: 145; }
.ext--tsv { --h: 95; }
.ext--xml { --h: 35; --s: 62%; }
.ext--toml { --h: 22; --s: 58%; }
.ext--geojson { --h: 172; }
.ext--pdf { --h: 2; --s: 58%; }
.ext--png { --h: 268; }
.ext--jpg { --h: 12; --s: 60%; }
.ext--url { --h: 245; }
.ext--lg { font-size: var(--t-xs); padding: 5px 8px; border-radius: 5px; }
.ext--xl { font-size: var(--t-sm); padding: 9px 12px; border-radius: 7px; font-weight: 600; }
[data-theme="dark"] .ext {
color: hsl(var(--h) calc(var(--s) - 12%) 74%);
background: hsl(var(--h) 26% 15%);
border-color: hsl(var(--h) 22% 26%);
}
/* ---------- Hero ---------- */
.hero { padding: 8px 0 4px; }
.hero__h1 {
font-size: clamp(30px, 5.2vw, var(--t-display));
line-height: 1.03;
letter-spacing: -0.032em;
max-width: 20ch;
margin-bottom: 16px;
}
.hero__lede {
font-size: var(--t-md);
line-height: 1.6;
color: var(--ink-2);
max-width: 66ch;
margin-bottom: 26px;
}
/* ---------- The big search box ---------- */
.bigsearch { position: relative; max-width: 720px; margin: 0 0 30px; }
.bigsearch__field {
display: flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 14px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 8px;
box-shadow: 0 1px 0 rgba(26, 24, 20, 0.04), 0 8px 22px -18px rgba(26, 24, 20, 0.35);
transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.bigsearch__field svg { color: var(--ink-4); flex: 0 0 auto; }
.bigsearch__field:focus-within {
border-color: var(--accent-soft);
box-shadow: var(--focus-ring);
}
.bigsearch__field input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0;
outline: none;
background: transparent;
color: var(--ink);
font-family: inherit;
font-size: var(--t-md);
letter-spacing: -0.008em;
}
.bigsearch__field input::placeholder { color: var(--ink-4); }
.bigsearch__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bigsearch__kbd {
flex: 0 0 auto;
font-family: var(--mono);
font-size: var(--t-xxs);
color: var(--ink-3);
padding: 3px 7px;
border: 1px solid var(--rule);
border-bottom-width: 2px;
border-radius: 4px;
background: var(--bg-2);
}
.bigsearch__hint {
margin: 10px 0 0;
font-size: var(--t-sm);
color: var(--ink-3);
}
.linkish {
border: 0;
padding: 0;
background: none;
font: inherit;
color: var(--link);
cursor: pointer;
text-decoration: underline;
text-decoration-color: var(--link-underline);
text-underline-offset: 2px;
}
.linkish:hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* ---------- Search results overlay ---------- */
.results {
position: absolute;
z-index: 60;
left: 0;
right: 0;
top: calc(100% + 6px);
max-height: min(64vh, 520px);
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 8px;
box-shadow: 0 20px 44px -24px rgba(10, 16, 28, 0.45);
padding: 6px;
}
.header__search .results { top: calc(100% + 8px); width: min(460px, 78vw); left: 0; right: auto; }
.res {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
text-decoration: none;
color: var(--ink);
font-size: var(--t-sm);
}
.res:hover, .res--on { background: var(--bg-tint); text-decoration: none; color: var(--ink); }
[data-theme="dark"] .res:hover, [data-theme="dark"] .res--on { background: var(--bg-2); }
.res__name { font-weight: 500; color: var(--ink); }
.res__meta {
margin-left: auto;
font-family: var(--mono);
font-size: var(--t-xxs);
color: var(--ink-4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 45%;
}
.res--off { opacity: 0.55; cursor: default; }
.res--empty, .res--all {
display: block;
padding: 10px;
font-size: var(--t-sm);
color: var(--ink-3);
}
.res--all {
border-top: 1px solid var(--rule-soft);
margin-top: 4px;
color: var(--link);
}
/* ---------- Hero stat strip ---------- */
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 0;
list-style: none;
margin: 0 0 8px;
padding: 18px 0 0;
border-top: 1px solid var(--rule-soft);
}
.hero-stats li {
margin: 0;
padding: 0 28px 0 0;
margin-right: 28px;
border-right: 1px solid var(--rule-soft);
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-stats li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-stats__n {
font-family: var(--mono);
font-size: var(--t-lg);
font-weight: 500;
color: var(--ink);
letter-spacing: -0.02em;
}
.hero-stats__l { font-size: var(--t-xs); color: var(--ink-3); }
/* ---------- Section headings used across hub pages ---------- */
.section-h { margin-top: 52px; }
.section-h .ext { vertical-align: 2px; margin-right: 4px; }
.section-sub {
margin: 6px 0 20px;
color: var(--ink-3);
font-size: var(--t-sm);
max-width: 76ch;
}
.more-line { margin: 20px 0 0; font-size: var(--t-sm); }
.sig { margin-top: 56px; color: var(--ink-3); font-size: var(--t-sm); }
/* ---------- Kit cards ---------- */
.kitgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1px;
background: var(--rule-soft);
border: 1px solid var(--rule-soft);
border-radius: 8px;
overflow: hidden;
}
.kit-card {
background: var(--bg);
padding: 18px 20px 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: background 0.14s ease;
}
.kit-card:hover { background: var(--surface); }
.kit-card--soon { opacity: 0.82; }
.kit-card__top {
display: flex;
align-items: center;
gap: 11px;
text-decoration: none;
color: var(--ink);
}
.kit-card__top:hover { text-decoration: none; color: var(--ink); }
.kit-card__top:hover .kit-card__noun { color: var(--link); }
.kit-card__names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kit-card__noun {
font-family: var(--serif-display);
font-size: var(--t-md);
font-weight: 600;
letter-spacing: -0.016em;
transition: color 0.14s ease;
}
.kit-card__domain {
font-family: var(--mono);
font-size: var(--t-xxs);
color: var(--ink-4);
}
.kit-card__count {
margin-left: auto;
display: flex;
align-items: baseline;
gap: 4px;
font-family: var(--mono);
font-size: var(--t-lg);
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.02em;
}
.kit-card__count small { font-size: var(--t-xxs); color: var(--ink-4); font-weight: 400; }
.kit-card__tagline {
margin: 0;
font-size: var(--t-sm);
color: var(--ink-2);
line-height: 1.5;
max-width: none;
}
.kit-card__picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag {
display: inline-block;
font-family: var(--mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 5px;
border-radius: 3px;
margin-left: 6px;
}
.tag--soon { background: var(--cta); color: var(--cta-ink); }
.pill {
display: inline-block;
font-size: var(--t-xs);
padding: 4px 9px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--surface);
color: var(--ink-2);
text-decoration: none;
transition: border-color 0.14s ease, color 0.14s ease;
}
a.pill:hover { border-color: var(--accent-soft); color: var(--link); text-decoration: none; }
span.pill { opacity: 0.6; }
.pill--more { border-style: dashed; color: var(--ink-3); }
/* ---------- "Start here" two-column rows ---------- */
.startgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
gap: 0 40px;
}
.startgrid__row {
display: flex;
align-items: baseline;
gap: 9px;
padding: 9px 0;
border-bottom: 1px solid var(--rule-soft);
font-size: var(--t-sm);
min-width: 0;
}
.startgrid__row .ext { align-self: center; }
.startgrid__name { font-weight: 500; white-space: nowrap; }
.startgrid__blurb {
color: var(--ink-4);
font-size: var(--t-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* ---------- Feature rows (homepage bottom) ---------- */
.feature-rows {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px 40px;
margin: 22px 0 0;
}
.feature-rows h3 { margin-top: 0; }
.feature-rows p { font-size: var(--t-sm); max-width: none; }
/* ---------- Breadcrumb ---------- */
.crumb {
font-size: var(--t-xs);
color: var(--ink-4);
margin-bottom: 14px;
font-family: var(--mono);
}
.crumb span { margin: 0 5px; }
.crumb span:last-child { color: var(--ink-3); margin-left: 0; }
/* ---------- Kit page head ---------- */
.kithead { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.kithead__text { min-width: 0; }
.kithead__text .page-title { margin-bottom: 4px; }
.kithead__cta {
margin-left: auto;
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 16px;
border-radius: 6px;
background: var(--accent);
color: #fff;
font-size: var(--t-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: filter 0.14s ease, transform 0.14s ease;
}
.kithead__cta:hover { color: #fff; text-decoration: none; filter: brightness(1.12); }
.kithead__cta:active { transform: translateY(1px); }
.kithead__cta--off {
background: var(--bg-2);
color: var(--ink-3);
border: 1px dashed var(--rule);
font-weight: 500;
}
/* ---------- Callout ---------- */
.callout {
margin: 20px 0 8px;
padding: 14px 16px;
background: var(--bg-tint);
border: 1px solid var(--bg-tint-border);
border-radius: 6px;
font-size: var(--t-sm);
color: var(--ink-2);
max-width: 88ch;
}
.callout strong { display: block; margin-bottom: 2px; }
.callout--warn { background: var(--err-wash); border-color: var(--rule); }
[data-theme="dark"] .callout { background: var(--bg-2); border-color: var(--rule); }
/* ---------- Category index grid ---------- */
.catgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 26px 32px;
margin: 20px 0 8px;
}
.catgrid--tight { gap: 18px 28px; }
.catgrid__col { min-width: 0; }
.catgrid__title {
margin: 0 0 8px;
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: 0;
padding-bottom: 6px;
border-bottom: 1px solid var(--rule-soft);
}
.catgrid__list { list-style: none; margin: 0; padding: 0; }
.catgrid__list li { margin: 0; padding: 2px 0; font-size: var(--t-sm); line-height: 1.45; }
.catgrid__list a { text-decoration: none; color: var(--link); }
.catgrid__list a:hover { text-decoration: underline; }
.catgrid__list span { color: var(--ink-4); }
/* ---------- Guide list ---------- */
.guidelist { list-style: none; margin: 14px 0 0; padding: 0; }
.guidelist li {
padding: 10px 0;
border-bottom: 1px solid var(--rule-soft);
display: flex;
gap: 12px;
align-items: baseline;
flex-wrap: wrap;
font-size: var(--t-sm);
}
.guidelist a { font-weight: 500; }
.guidelist__blurb { color: var(--ink-4); font-size: var(--t-xs); flex: 1 1 340px; }
/* ---------- Related-kit row ---------- */
.kitrow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-top: 18px;
}
.kitrow__card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "chip noun" "chip n" "tag tag";
gap: 2px 10px;
padding: 14px 16px;
border: 1px solid var(--rule);
border-radius: 8px;
text-decoration: none;
background: var(--surface);
transition: border-color 0.14s ease;
}
.kitrow__card:hover { border-color: var(--accent-soft); text-decoration: none; }
.kitrow__card .ext { grid-area: chip; align-self: start; }
.kitrow__noun { grid-area: noun; font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.kitrow__n { grid-area: n; font-family: var(--mono); font-size: var(--t-xxs); color: var(--ink-4); }
.kitrow__tag { grid-area: tag; margin-top: 8px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
/* ---------- Jump bar ---------- */
.jumpbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 18px 0 26px;
padding: 12px 0;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
}
.jumpbar a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border-radius: 6px;
font-family: var(--mono);
font-size: var(--t-xxs);
color: var(--ink-3);
text-decoration: none;
background: var(--bg-2);
}
.jumpbar a:hover { background: var(--bg-tint); color: var(--ink); text-decoration: none; }
[data-theme="dark"] .jumpbar a:hover { background: var(--surface); }
/* --accent is a light blue in dark mode, so the white that works on the light
palette's navy drops to 2.9:1 here. Same treatment the shared sheet gives
accent-filled buttons under [data-theme="dark"]. */
/* Not .kithead__cta--off — the pending-kit variant is not accent-filled, it
sets its own --ink-3 on --bg-2, and this selector out-specifies it. */
[data-theme="dark"] .kithead__cta:not(.kithead__cta--off),
[data-theme="dark"] .kithead__cta:not(.kithead__cta--off):hover { color: #0e1a2c; }
/* ---------- /tools kit blocks ---------- */
.kitblock { padding-top: 10px; margin-bottom: 34px; scroll-margin-top: 18px; }
.kitblock__h {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 4px;
font-size: var(--t-md);
padding-bottom: 8px;
border-bottom: 2px solid var(--rule);
}
.kitblock__h a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.kitblock__h a:hover { color: var(--link); text-decoration: none; }
/* ---------- Filter bar ---------- */
.filterbar {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0 4px;
flex-wrap: wrap;
}
.filterbar__field {
display: flex;
align-items: center;
gap: 8px;
flex: 0 1 420px;
height: 42px;
padding: 0 12px;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 7px;
}
.filterbar__field svg { color: var(--ink-4); }
.filterbar__field:focus-within { border-color: var(--accent-soft); box-shadow: var(--focus-ring); }
.filterbar__field input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
outline: none;
color: var(--ink);
font: inherit;
font-size: var(--t-sm);
}
.filterbar__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.filterbar__count { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.filterbar__clear { font-size: var(--t-xs); }
.filter-empty { margin-top: 24px; color: var(--ink-3); font-size: var(--t-sm); }
/* ---------- Server-rendered hit list (/tools?q=) ---------- */
.hitlist { margin-top: 18px; }
.hit {
display: flex;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--rule-soft);
}
.hit__kit { text-decoration: none; flex: 0 0 auto; }
.hit__body { min-width: 0; }
.hit__name { font-weight: 600; font-size: var(--t-sm); }
.hit__meta { margin-left: 8px; font-family: var(--mono); font-size: var(--t-xxs); color: var(--ink-4); }
.hit__blurb { margin: 3px 0 0; font-size: var(--t-xs); color: var(--ink-3); max-width: 90ch; }
/* ---------- Converters ---------- */
.convblock { margin: 30px 0 0; scroll-margin-top: 18px; }
.convblock__h {
margin: 0 0 12px;
font-size: var(--t-md);
padding-bottom: 7px;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: baseline;
gap: 10px;
}
.convblock__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 2px 24px;
}
.conv {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--rule-soft);
font-size: var(--t-sm);
min-width: 0;
}
.conv__name { font-weight: 500; min-width: 0; }
/* ---------- Mega-menu kit panel ---------- */
.megamenu__panel--kits { min-width: 320px; }
.megamenu__panel--kits a {
display: flex !important;
align-items: center;
gap: 10px;
}
.megamenu__kitname { flex: 1 1 auto; }
.megamenu__kitnum { font-family: var(--mono); font-size: var(--t-xxs); color: var(--ink-4); }
/* ---------- Footer kit directory ---------- */
.foot-kits {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 24px 30px;
padding: 34px 0 30px;
border-bottom: 1px solid var(--rule);
}
.foot-kits__group { min-width: 0; }
.foot-kits__title {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--t-xs);
font-weight: 600;
margin-bottom: 8px;
}
.foot-kits__title a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); }
.foot-kits__title a:hover { color: var(--link); text-decoration: none; }
.foot-kits__title .page-meta { margin-left: auto; font-family: var(--mono); font-size: var(--t-xxs); }
.foot-kits__list { display: flex; flex-direction: column; gap: 3px; }
.foot-kits__list a, .foot-kits__list span {
font-size: var(--t-xs);
color: var(--ink-3);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.foot-kits__list a:hover { color: var(--link); text-decoration: underline; }
.foot-kits__all { color: var(--ink-4) !important; font-family: var(--mono); font-size: 10.5px !important; margin-top: 2px; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.main { padding: 26px 20px 44px; }
.kithead { flex-wrap: wrap; }
.kithead__cta { margin-left: 0; width: 100%; justify-content: center; }
.startgrid { grid-template-columns: 1fr; }
.startgrid__blurb { display: none; }
.header__tagline { display: none; }
.header__search { flex: 1 1 auto; }
.header__search .results { width: min(460px, 92vw); }
}
@media (max-width: 620px) {
.hero__h1 { max-width: none; }
.hero-stats li { padding-right: 18px; margin-right: 18px; }
.kitgrid { grid-template-columns: 1fr; }
.catgrid { grid-template-columns: 1fr 1fr; gap: 20px; }
.convblock__grid { grid-template-columns: 1fr; }
.bigsearch__kbd { display: none; }
}
@media (max-width: 420px) {
.catgrid { grid-template-columns: 1fr; }
}
/* ---------- Hub brand accent ----------
The copied stylesheet ends with pngtoolskit's sky-blue accent (--png-accent)
wired into the brand dot and the active nav underline. The hub's mark is the
amber square in its favicon, so re-point both at that. */
:root { --brand: #e8a217; }
.header__brand .dot { background: var(--brand); }
.megamenu__link.active,
.megamenu__trigger[aria-expanded="true"] { border-bottom-color: var(--brand); }
/* The example-query chips are buttons for accessibility reasons, but they must
read as links. `.main button:not(.btn):not(.header__cta):not(.nav-toggle)`
from the shared sheet is a 4-class selector, so matching it is the only way
to win without !important. */
.main button.linkish:not(.btn):not(.header__cta):not(.nav-toggle) {
height: auto;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
font: inherit;
color: var(--link);
text-decoration: underline;
text-decoration-color: var(--link-underline);
text-underline-offset: 2px;
}
.main button.linkish:not(.btn):not(.header__cta):not(.nav-toggle):hover {
background: none;
border: 0;
color: var(--link-hover);
text-decoration-color: currentColor;
}
/* The shared sheet also re-skins buttons under [data-theme="dark"], which is a
higher-specificity selector than the light-mode override above. */
[data-theme="dark"] .main button.linkish:not(.btn):not(.header__cta):not(.nav-toggle):not(.theme-toggle) {
background: none;
border: 0;
color: var(--link);
}
[data-theme="dark"] .main button.linkish:not(.btn):not(.header__cta):not(.nav-toggle):not(.theme-toggle):hover {
background: none;
color: var(--link-hover);
}