mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
373039a837
* Give DESIGN.md a real type ramp so the design hook stops crying wolf The design hook fired on nearly every CSS file we touched. The cause was DESIGN.md's typography block: it declared seven named roles rather than a scale, and two of those roles used clamp(), which the extractor skipped outright. That left an allowlist of five sizes standing against the 86 distinct font sizes actually in use, so design-system-font-size flagged roughly 500 declarations. Editing any .astro page made it worse, because the companion-stylesheet scan re-reported the whole backlog. Extractor (cli/engine/design-system.mjs): - Read a typography.scale map as the enumerated ramp. - Read both clamp() endpoints as allowed sizes. These stay additive on purpose: clamp endpoints alone cannot switch the rule on, because a fully fluid system enumerates no discrete ramp and inferring one from its endpoints would flag every intermediate size. The existing abstention test still passes, and three new tests cover the added behavior. DESIGN.md: - Document a 19-step ramp, 8px through 72px at a 16px root. - Snap the five discrete role sizes onto ramp steps. This also fixes real drift. DESIGN.md claims to mirror kinpaku-tokens.css verbatim, but wordmark was 1.15rem in the CSS against 1.3rem documented, with tracking at 0.42em against 0.15em. Both are re-synced. Standardization, 64 declarations: - Six near-identical steps between 13.7px and 15.4px collapse onto 14 and 15. - .foundation-card-label, .designing-lane-mock-title and .designing-iterate-name each existed at two different sizes in two files. Now unified. - The wordmark rendered at four sizes (20.8, 18.4, 17, 16.8px). Now 18px, plus one deliberate smaller nav variant. Exemptions, for designs that are foreign on purpose: the antipattern-example fixtures, the neo-mirai case-study build, the periodic-table cell annotations in framework-viz.js (5 to 7px diagram geometry sitting at 2 to 3px offsets), and the .why-slop-* before-state card's Inter and gradient text. Verified by computed style across ten rendered pages: every element lands on a ramp step except clamp() values mid-interpolation, which is what fluid means. Full test suite and build validators pass. Generated provider output is deliberately left out; the sync workflow owns it. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Validate clamp() endpoints in usage, not just when reading DESIGN.md Reading clamp endpoints as documented steps without also checking them in source left an asymmetry: `isAllowedFontSizeRaw` returned true for anything failing the px/rem literal test, so `clamp(99rem, 1vw, 200rem)` passed. That is how `.ptable-symbol` at `clamp(1.45rem, 1.8vw, 1.8rem)` stayed invisible until someone measured computed styles, which is not a check the hook can run. Fluid values are now judged on their min and max. The viewport term interpolates between them and is never a fixed step, so it is left alone. Endpoints that cannot be resolved, such as var() or calc() or em, abstain rather than guess. Findings name the offending endpoint and use it as the ignore-value, because the whole clamp string is not actionable on its own. Turning the check on surfaced 22 fluid declarations that had never been looked at. Three used hero sizes above the ramp's 72px cap (80, 83.2 and 88px) alongside the display role's documented 89.6px max, so the top of the ramp was genuinely incomplete. Added the 80 and 88 steps, which gives the display end consistent 8px increments instead of 48/56/64/72 plus an orphan at 89.6, and fixes two declarations outright. The other 20 are snapped by a stated rule: nearest step, ties toward the smaller step, endpoints already matching a documented fluid role left as-is, and where nearest-step would make a breakpoint override meet or exceed its base, the next smaller step so the override still reduces. That last case applies once, to .designing-page-title. Also narrows the framework-viz.js waiver. The periodic-table cell annotations now carry two `impeccable-disable-line` comments naming the reason, instead of a config entry wildcarding the whole file for the rule. Inline waivers travel with the code and cannot silence future drift elsewhere in that file. Verified at 420px, 900px and 1600px across seven pages. The pinned ends are fully on-ramp; the only off-ramp values at 900px are the vw term mid-interpolation, which is what fluid means. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Address review: wordmark tracking picked the wrong side, stale ramp count Two review findings, both fair. Wordmark tracking (greptile, bugbot). This PR moved DESIGN.md's wordmark letterSpacing from 0.15em to 0.42em on the grounds that DESIGN.md claims to mirror kinpaku-tokens.css and the token read 0.42em. That was the wrong side to trust. `--ks-type-wordmark-track` has exactly one consumer, design-system.css:570, which is the specimen page. Every production lockup (.ks-wordmark, .kinpaku-chrome .site-header-brand-name, .footer-logo) hardcodes 0.15em, so 0.15em is what every visitor actually sees and what DESIGN.md already documented correctly before this PR touched it. Reverted the doc to 0.15em and moved the token to 0.15em as well, so the specimen now renders the same lockup as production instead of a wider one nothing else uses. Verified by computed style: header and specimen both report 18px with 2.7px tracking. No production visual change. Stale ramp count (copilot). The sidecar described an "18-step ramp, 8px through 72px". It went stale twice inside this PR, once when the 8 step was added and again when 80 and 88 were added for the hero display sizes. It is 21 steps, 8px through 88px. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Strip !important from the font-size ignore value Follow-on from the waiver wiring in the hook branch. The ignoreValue is what a `hooks ignore-value` waiver has to match, and `font-size: 1.4rem !important` emitted `1.4rem !important` while a plain declaration emitted `1.4rem`. Once font-size is a direct-value rule, that means the same size needs two different waivers depending on whether it carries a priority marker. font-family already strips the marker before matching, and there is a test for that. font-size now does the same. The snippet still shows the declaration as authored. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Have the wordmark rules consume their tokens instead of copying the values Follow-up to the tracking fix, and the residual half of what the reviewers were pointing at. `.ks-wordmark` and the kinpaku chrome lockup each repeated `1.125rem` and `0.15em` literally rather than reading `--ks-type-wordmark-size` and `--ks-type-wordmark-track`. That duplication is exactly how the token drifted to 0.42em while every production lockup stayed at 0.15em and nobody noticed, which is the confusion that started this thread. The values already agree, so this is a no-op visually and is verified as such: computed styles across the home, design-system, docs and changelog pages all still report 18px with 2.7px tracking. What changes is that there is now one place to edit, so the next tracking change cannot silently apply to the specimen page alone. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
2385 lines
53 KiB
CSS
2385 lines
53 KiB
CSS
/*
|
|
* impeccable.style — shared styles for sub-pages and the site-wide header
|
|
*
|
|
* Imported by all generated pages under /skills, /anti-patterns, /tutorials,
|
|
* and by the hand-authored pages (index, cheatsheet, gallery, privacy) via
|
|
* a direct <link> tag so they all share the same header + prose typography.
|
|
*/
|
|
|
|
@import "./tokens.css";
|
|
@import "./docs-visuals.css";
|
|
|
|
/* ============================================
|
|
SKIP LINK (a11y)
|
|
============================================ */
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10000;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border-radius: 0 0 8px 8px;
|
|
transition: top 0.2s ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
BASE
|
|
============================================ */
|
|
|
|
/* No smooth scroll — long editorial pages feel slow on anchor jumps, and
|
|
a secretly-smooth CSS rule also overrides JS `behavior: 'auto'` calls. */
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
color: var(--color-ink);
|
|
background: var(--color-paper);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ============================================
|
|
SHARED SITE HEADER
|
|
============================================ */
|
|
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
padding: 14px clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
|
|
background: color-mix(in oklch, var(--color-paper) 94%, transparent);
|
|
-webkit-backdrop-filter: saturate(1.4) blur(16px);
|
|
backdrop-filter: saturate(1.4) blur(16px);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* Kill any inherited text-decoration from page-level `a` rules. */
|
|
.site-header a,
|
|
.site-header a:hover {
|
|
text-decoration: none;
|
|
text-decoration-thickness: 0;
|
|
}
|
|
|
|
.site-header-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
color: var(--color-ink);
|
|
flex-shrink: 0;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header-brand:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.site-header-brand-logo {
|
|
width: 26px;
|
|
height: 26px;
|
|
flex-shrink: 0;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.site-header-brand-logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.site-header-brand-name {
|
|
display: inline-block;
|
|
}
|
|
|
|
.site-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
|
|
min-width: 0;
|
|
}
|
|
|
|
.site-header-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
min-width: 0;
|
|
}
|
|
|
|
.site-header-nav a {
|
|
position: relative;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
color: var(--color-charcoal);
|
|
padding: 4px 0;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header-nav a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.site-header-nav a[aria-current="page"] {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-header-nav a[aria-current="page"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -4px;
|
|
height: 2px;
|
|
background: var(--color-accent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* GitHub star pill — subtle, inviting nudge without shouting */
|
|
.site-header-github {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px 4px 8px;
|
|
border-radius: 99px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
flex-shrink: 0;
|
|
transition:
|
|
background var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out),
|
|
color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header-github svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.site-header-github:hover {
|
|
background: var(--color-paper);
|
|
border-color: var(--color-ink);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.site-header-github-star {
|
|
color: var(--color-accent);
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.site-header {
|
|
padding: 12px var(--spacing-md);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.site-header-brand {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.site-header-brand-logo {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.site-header-right {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.site-header-nav {
|
|
font-size: 0.8125rem;
|
|
gap: var(--spacing-sm);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
/* fade the right edge so users see there's more to scroll */
|
|
mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
|
|
}
|
|
|
|
.site-header-nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.site-header-nav a[data-nav="home"] {
|
|
/* Brand already acts as home link on mobile */
|
|
display: none;
|
|
}
|
|
|
|
.site-header-github {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.site-header-github-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.site-header-brand-name {
|
|
/* Logo alone on narrow screens */
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SUB-PAGE LAYOUT SHELL
|
|
============================================ */
|
|
|
|
main#main {
|
|
display: block;
|
|
}
|
|
|
|
.sub-page-content {
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 6rem;
|
|
}
|
|
|
|
.skill-detail {
|
|
/* No max-width on the article itself. The editorial body sections
|
|
(header, editorial wrapper, skill source, references) each cap
|
|
themselves at 720px for readable line length, while the hero is
|
|
allowed to break out on wide viewports. */
|
|
width: 100%;
|
|
}
|
|
|
|
.sub-page-header {
|
|
margin-bottom: clamp(2.5rem, 6vw, 4rem);
|
|
}
|
|
|
|
.sub-page-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.sub-page-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.sub-page-lede {
|
|
font-size: clamp(1rem, 1.4vw, 1.125rem);
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
max-width: 62ch;
|
|
}
|
|
|
|
/* ============================================
|
|
DOCS-BROWSER LAYOUT (used by /skills)
|
|
============================================ */
|
|
|
|
:root {
|
|
--site-header-height: 62px;
|
|
--skills-sidebar-width: 200px;
|
|
}
|
|
|
|
.skills-layout-page main#main {
|
|
/* Reset: the docs layout provides its own max-width container. */
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.skills-layout {
|
|
display: grid;
|
|
grid-template-columns: var(--skills-sidebar-width) minmax(0, 1fr);
|
|
gap: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
|
|
/*
|
|
* Match horizontal padding to .site-header so the sidebar content lines
|
|
* up with the brand logo in the nav bar above. Intentionally no max-width
|
|
* so the docs-browser feels wall-to-wall on wide screens.
|
|
*/
|
|
padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
|
|
align-items: start;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR
|
|
============================================ */
|
|
|
|
.skills-sidebar {
|
|
position: sticky;
|
|
top: var(--site-header-height);
|
|
align-self: start;
|
|
max-height: calc(100vh - var(--site-header-height));
|
|
overflow-y: auto;
|
|
padding: var(--spacing-lg) 0 var(--spacing-2xl);
|
|
border-right: 1px solid var(--color-mist);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-mist) transparent;
|
|
}
|
|
|
|
/* Desktop only: reserve full viewport height so the border-right
|
|
divider reaches the bottom of the viewport even on short pages.
|
|
On mobile this rule would leave a viewport-sized empty block
|
|
above the main content when the menu is collapsed. */
|
|
@media (min-width: 921px) {
|
|
.skills-sidebar {
|
|
min-height: calc(100vh - var(--site-header-height));
|
|
}
|
|
}
|
|
|
|
.skills-sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.skills-sidebar::-webkit-scrollbar-thumb {
|
|
background: var(--color-mist);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.skills-sidebar-inner {
|
|
padding-right: var(--spacing-md);
|
|
}
|
|
|
|
/* Mobile menu toggle. Hidden on desktop. */
|
|
.skills-sidebar-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.skills-sidebar-toggle-chevron {
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
flex-shrink: 0;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* Label at the top of the sidebar — hidden visually, kept for a11y tree. */
|
|
.skills-sidebar-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
.skills-sidebar-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.skills-sidebar-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skills-sidebar-divider {
|
|
border: none;
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
margin: 0 0 1.5rem 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.skills-sidebar-group-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 6px;
|
|
/* Match the link text's 14px left inset (2 border + 12 padding) so
|
|
category titles and link labels start at the same x position. */
|
|
padding: 0 0 0 14px;
|
|
}
|
|
|
|
.skills-sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.skills-sidebar-list li {
|
|
margin: 0;
|
|
}
|
|
|
|
.skills-sidebar-list a {
|
|
display: block;
|
|
/* Border sits inside the normal flow (no negative margin) because
|
|
the sidebar's `overflow-y: auto` coerces overflow-x to auto too
|
|
per CSS spec, which would clip any border hanging left of the
|
|
column. Text is inset 14px (2 border + 12 padding) from the column
|
|
edge; group titles above use the same 14px inset. Accepts a small
|
|
misalignment with the header logo in exchange for a visible
|
|
active-state accent. */
|
|
padding: 4px 0 4px 12px;
|
|
border-left: 2px solid transparent;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out),
|
|
background var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skills-sidebar-list a:hover {
|
|
color: var(--color-accent);
|
|
background: color-mix(in oklch, var(--color-accent-dim) 30%, transparent);
|
|
}
|
|
|
|
.skills-sidebar-list a[aria-current="page"] {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
border-left-color: var(--color-accent);
|
|
}
|
|
|
|
.skills-sidebar-list a[aria-current="page"]:hover {
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
}
|
|
|
|
.skills-sidebar-sub a {
|
|
padding-left: 24px;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* ============================================
|
|
OVERVIEW MAIN CONTENT
|
|
============================================ */
|
|
|
|
.skills-main {
|
|
min-width: 0;
|
|
padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
|
|
}
|
|
|
|
/* ============================================
|
|
DOCS OVERVIEW — /skills page
|
|
============================================ */
|
|
|
|
.docs-overview {
|
|
max-width: 920px;
|
|
}
|
|
|
|
.docs-overview-header {
|
|
margin-bottom: clamp(2rem, 4vw, 3rem);
|
|
}
|
|
|
|
.docs-overview-header .sub-page-lede {
|
|
max-width: 60ch;
|
|
}
|
|
|
|
/* Home command hero — the /impeccable root card that sits above the
|
|
category sections. It gets special treatment because it's the entry
|
|
point, not just another command in a category. */
|
|
.docs-home-card {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
gap: clamp(1.5rem, 3vw, 2.5rem);
|
|
padding: clamp(1.5rem, 3vw, 2rem);
|
|
background: #ffffff;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 12px;
|
|
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.docs-home-card-identity {
|
|
min-width: 0;
|
|
}
|
|
|
|
.docs-home-card-eyebrow {
|
|
display: inline-block;
|
|
font-family: var(--font-body);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.docs-home-card-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
}
|
|
|
|
.docs-home-card-tagline {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
line-height: 1.5;
|
|
margin: 0 0 var(--spacing-md) 0;
|
|
max-width: 32ch;
|
|
}
|
|
|
|
.docs-home-card-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-ink);
|
|
max-width: 36ch;
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-home-card-desc code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
background: var(--color-accent-dim);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-home-card-modes {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.docs-home-card-modes a {
|
|
display: block;
|
|
text-decoration: none;
|
|
padding-left: 10px;
|
|
border-left: 2px solid transparent;
|
|
transition:
|
|
border-color var(--duration-fast) var(--ease-out, ease),
|
|
color var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.docs-home-card-modes a:hover {
|
|
border-left-color: var(--color-accent);
|
|
}
|
|
|
|
.docs-home-card-modes a:hover .docs-home-mode-label {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.docs-home-mode-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.docs-home-mode-slash {
|
|
color: var(--color-accent);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.docs-home-mode-hint {
|
|
display: block;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Category sections with rich command cards */
|
|
.docs-categories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.docs-category-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.docs-category-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.1;
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.docs-category-desc {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: var(--color-charcoal);
|
|
max-width: 58ch;
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-category-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Dense two-column rows for each command: name on the left, description +
|
|
relationship on the right. Mirrors the original cheatsheet density. */
|
|
.docs-category-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.command-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(11rem, 13rem) 1fr;
|
|
gap: var(--spacing-lg);
|
|
padding: var(--spacing-md) 0;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.command-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.command-row-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
line-height: 1.4;
|
|
min-width: 0;
|
|
}
|
|
|
|
.command-row-name a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.command-row-name a:hover {
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
|
|
.command-row-namespace {
|
|
color: var(--color-ash);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.command-row-beta {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5625rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
vertical-align: 1px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.command-row-info {
|
|
min-width: 0;
|
|
}
|
|
|
|
.command-row-desc {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.command-row-rel {
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
color: var(--color-ash);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.command-row-rel a {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
transition: color var(--duration-fast) var(--ease-out, ease),
|
|
border-color var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.command-row-rel a:hover {
|
|
color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* Narrow viewport: stack name above info */
|
|
@media (max-width: 820px) {
|
|
.docs-home-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.command-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ANTI-PATTERNS INDEX
|
|
============================================ */
|
|
|
|
.anti-patterns-sidebar-list a {
|
|
display: flex !important;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.anti-patterns-sidebar-count {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* The anti-patterns page lets the grid of rule cards use the full
|
|
column width. Header, lede, and legend stay capped for line length. */
|
|
.anti-patterns-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.anti-patterns-header {
|
|
max-width: 720px;
|
|
margin-bottom: clamp(2rem, 4vw, 3rem);
|
|
}
|
|
|
|
.anti-patterns-header .sub-page-lede code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
color: var(--color-ink);
|
|
background: var(--color-cream);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.anti-patterns-header .sub-page-lede a {
|
|
color: var(--color-ink);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-accent);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 4px;
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
font-size: 0.9375em;
|
|
}
|
|
|
|
.anti-patterns-legend {
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
margin-bottom: clamp(2rem, 4vw, 3rem);
|
|
max-width: 720px;
|
|
}
|
|
|
|
.anti-patterns-legend-summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-sm);
|
|
padding: 14px var(--spacing-lg);
|
|
transition: background var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.anti-patterns-legend-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.anti-patterns-legend-summary:hover {
|
|
background: color-mix(in oklch, var(--color-mist) 40%, transparent);
|
|
}
|
|
|
|
.anti-patterns-legend-title {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.anti-patterns-legend-chevron {
|
|
color: var(--color-ash);
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anti-patterns-legend[open] .anti-patterns-legend-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.anti-patterns-legend-body {
|
|
padding: 0 var(--spacing-lg) var(--spacing-lg);
|
|
border-top: 1px solid var(--color-mist);
|
|
margin-top: 4px;
|
|
padding-top: var(--spacing-md);
|
|
}
|
|
|
|
.anti-patterns-legend-body p {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.anti-patterns-legend-body a {
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.anti-patterns-legend-body a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.anti-patterns-sections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(3rem, 6vw, 4.5rem);
|
|
}
|
|
|
|
.anti-patterns-section-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Catalog subsections sit under the "The catalog" h2 on /slop, so they
|
|
must read clearly as h3 — smaller, uppercase mono label instead of
|
|
display italic, to avoid competing with the parent section heading. */
|
|
.anti-patterns-section-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.anti-patterns-section-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* ============================================
|
|
SLOP PAGE (/slop)
|
|
Merger of the former /anti-patterns + /visual-mode.
|
|
Reuses .anti-patterns-* for the catalog and .visual-mode-*
|
|
for the demo / gallery / methods blocks; the rules below wire
|
|
the four numbered top-level sections and the nested sidebar.
|
|
============================================ */
|
|
|
|
.slop-content { width: 100%; }
|
|
|
|
.slop-header {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.slop-section {
|
|
margin-top: clamp(3rem, 6vw, 4.5rem);
|
|
scroll-margin-top: 80px;
|
|
}
|
|
|
|
.slop-section-heading {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2rem, 3.5vw, 2.5rem);
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.15;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.slop-section-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
text-transform: uppercase;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.slop-catalog-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.slop-catalog-lede {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
max-width: 72ch;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.slop-catalog-lede strong {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.slop-catalog-lede a {
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.slop-catalog-lede a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Sidebar: nested catalog-section list under "The catalog". */
|
|
.slop-sidebar-sublist {
|
|
list-style: none;
|
|
margin: 6px 0 4px 0;
|
|
padding: 0 0 0 var(--spacing-md);
|
|
border-left: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.slop-sidebar-sublist li {
|
|
margin: 0;
|
|
}
|
|
|
|
.slop-sidebar-sublist a {
|
|
display: flex !important;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-sm);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.slop-sidebar-sublist a:hover {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.slop-sidebar-sublist .anti-patterns-sidebar-count {
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
.rule-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.rule-card {
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
transition: border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.rule-card:hover {
|
|
border-color: var(--color-ash);
|
|
}
|
|
|
|
/* Visual example preview at the top of each card. */
|
|
.rule-card-visual {
|
|
position: relative;
|
|
height: 160px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rule-card-visual-inner {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-md);
|
|
/* Prevent the inline snippet's styles from bleeding outside the box. */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rule-card-body {
|
|
padding: var(--spacing-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
flex: 1;
|
|
}
|
|
|
|
.rule-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 2px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rule-card-category {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 3px 8px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.rule-card-category[data-category="slop"] {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-dim);
|
|
}
|
|
|
|
.rule-card-category[data-category="quality"] {
|
|
color: var(--color-charcoal);
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
/* Detection layer badge: CLI, Browser, or LLM only. */
|
|
.rule-card-layer {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 3px 8px;
|
|
border-radius: 99px;
|
|
border: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.rule-card-layer[data-layer="cli"] {
|
|
color: var(--color-charcoal);
|
|
border-color: var(--color-mist);
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.rule-card-layer[data-layer="browser"] {
|
|
color: var(--ks-patina-deep);
|
|
border-color: oklch(70% 0.12 188 / 0.32);
|
|
background: oklch(70% 0.12 188 / 0.08);
|
|
}
|
|
|
|
.rule-card-layer[data-layer="llm"] {
|
|
color: var(--ks-kinpaku-deep);
|
|
border-color: oklch(77% 0.13 82 / 0.34);
|
|
background: oklch(77% 0.13 82 / 0.08);
|
|
}
|
|
|
|
/* Layer legend dl inside the How-to-read block. */
|
|
.anti-patterns-legend-layers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.anti-patterns-legend-layers > div {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr;
|
|
gap: var(--spacing-md);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.anti-patterns-legend-layers dt {
|
|
margin: 0;
|
|
}
|
|
|
|
.anti-patterns-legend-layers dd {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.anti-patterns-legend-layers dd code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.rule-card-name {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.rule-card-desc {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
flex: 1;
|
|
}
|
|
|
|
.rule-card-skill-link {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
align-self: flex-start;
|
|
padding-top: 4px;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.rule-card-skill-link:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.rule-card-skill-link::after {
|
|
content: " →";
|
|
}
|
|
|
|
/* ============================================
|
|
TUTORIALS INDEX
|
|
============================================ */
|
|
|
|
.tutorials-content {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.tutorial-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.tutorial-card {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: var(--spacing-md);
|
|
align-items: center;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.tutorial-card:hover {
|
|
border-color: var(--color-ink);
|
|
}
|
|
|
|
.tutorial-card-number {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
line-height: 1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.tutorial-card:hover .tutorial-card-number {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.tutorial-card-body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.tutorial-card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
line-height: 1.2;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.tutorial-card-tagline {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tutorial-card-arrow {
|
|
font-family: var(--font-body);
|
|
font-size: 1.25rem;
|
|
color: var(--color-ash);
|
|
transition: color var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.tutorial-card:hover .tutorial-card-arrow {
|
|
color: var(--color-accent);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ============================================
|
|
TUTORIAL EMBEDS (live overlays, screenshots)
|
|
============================================ */
|
|
|
|
.tutorial-embed {
|
|
margin: var(--spacing-lg) 0 var(--spacing-xl);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.12);
|
|
max-width: none;
|
|
}
|
|
|
|
.tutorial-embed-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.tutorial-embed-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tutorial-embed-dot.red { background: #ff5f56; }
|
|
.tutorial-embed-dot.yellow { background: #ffbd2e; }
|
|
.tutorial-embed-dot.green { background: #27c93f; }
|
|
|
|
.tutorial-embed-title {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.tutorial-embed-iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 520px;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
.tutorial-embed-caption {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin-top: var(--spacing-sm);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
/* ============================================
|
|
TUTORIAL DETAIL
|
|
============================================ */
|
|
|
|
.tutorial-detail {
|
|
max-width: 680px;
|
|
}
|
|
|
|
.tutorial-detail-header {
|
|
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.tutorial-detail-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.tutorial-detail-tagline {
|
|
font-family: var(--font-body);
|
|
font-size: clamp(1.125rem, 1.5vw, 1.25rem);
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.tutorial-detail-body {
|
|
max-width: 65ch;
|
|
}
|
|
|
|
/* ============================================
|
|
VISUAL MODE PAGE
|
|
============================================ */
|
|
|
|
.visual-mode-demo-wrap {
|
|
margin-bottom: clamp(3rem, 6vw, 4.5rem);
|
|
}
|
|
|
|
.visual-mode-demo-caption {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
font-style: italic;
|
|
margin-top: var(--spacing-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Mac-window chrome around the iframe. Lives inside sub-pages.css, which
|
|
is not loaded on the homepage — the homepage has its own copy in
|
|
main.css. The max-width + auto margins would disable grid stretch on
|
|
the homepage and collapse the preview to the iframe's intrinsic width. */
|
|
.visual-mode-preview {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.12);
|
|
max-width: 1040px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.visual-mode-preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.visual-mode-preview-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.visual-mode-preview-dot.red { background: #ff5f56; }
|
|
.visual-mode-preview-dot.yellow { background: #ffbd2e; }
|
|
.visual-mode-preview-dot.green { background: #27c93f; }
|
|
|
|
.visual-mode-preview-title {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.visual-mode-frame {
|
|
display: block;
|
|
width: 100%;
|
|
height: 580px;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
/* Then vs Now: era toggle inline with lede */
|
|
.slop-then-now-intro {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.slop-then-now-lede {
|
|
color: var(--color-charcoal);
|
|
font-size: 1.125rem;
|
|
line-height: 1.6;
|
|
max-width: 52ch;
|
|
margin: 0;
|
|
}
|
|
|
|
.slop-era-toggle {
|
|
display: inline-flex;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.slop-then-now .visual-mode-preview {
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.slop-then-now .visual-mode-demo-caption {
|
|
text-align: left;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.slop-then-now-intro {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.slop-era-tab {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
padding: 8px 20px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--color-ash);
|
|
cursor: pointer;
|
|
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.slop-era-tab + .slop-era-tab {
|
|
border-left: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.slop-era-tab.is-active {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.slop-era-tab:not(.is-active):hover {
|
|
background: var(--color-mist);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* Three invocation methods grid. Section wrapper margins come from
|
|
.slop-section; this block only controls the grid of cards. */
|
|
.visual-mode-methods-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.visual-mode-method {
|
|
padding: var(--spacing-lg);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
transition: border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.visual-mode-method:hover {
|
|
border-color: var(--color-ash);
|
|
}
|
|
|
|
.visual-mode-method[data-coming-soon] {
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.visual-mode-method-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.visual-mode-method-name {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.visual-mode-method-name a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-accent);
|
|
}
|
|
|
|
.visual-mode-method-name a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.visual-mode-method-name code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
font-style: normal;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.visual-mode-method-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
flex: 1;
|
|
}
|
|
|
|
.visual-mode-method-desc a {
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.visual-mode-method-desc a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Gallery (specimens) section header. Title comes from .slop-section-heading;
|
|
this block just scopes the lede + spacing under the heading. */
|
|
.visual-mode-gallery-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.visual-mode-gallery-lede {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
max-width: 60ch;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
ANTI-PATTERNS: IN THE WILD (merged gallery)
|
|
============================================ */
|
|
|
|
.gallery-section {
|
|
margin-top: clamp(3rem, 6vw, 4.5rem);
|
|
}
|
|
|
|
.gallery-section-lede {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
max-width: 60ch;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.gallery-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.gallery-card:hover {
|
|
border-color: var(--color-ink);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.gallery-card-thumb {
|
|
aspect-ratio: 1;
|
|
overflow: hidden;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.gallery-card-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
display: block;
|
|
}
|
|
|
|
.gallery-card-body {
|
|
padding: var(--spacing-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
|
|
.gallery-card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.125rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.gallery-card:hover .gallery-card-title {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.gallery-card-desc {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE: collapsible sidebar behind a toggle
|
|
============================================ */
|
|
|
|
@media (max-width: 920px) {
|
|
.skills-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.skills-sidebar {
|
|
position: static;
|
|
max-height: none;
|
|
overflow: visible;
|
|
border-right: none;
|
|
padding: var(--spacing-md) 0;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
/* Show the toggle button and collapse the menu by default. */
|
|
.skills-sidebar-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-sm);
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
text-align: left;
|
|
transition: border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skills-sidebar-toggle:hover {
|
|
border-color: var(--color-ink);
|
|
}
|
|
|
|
.skills-sidebar-toggle[aria-expanded="true"] .skills-sidebar-toggle-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.skills-sidebar-inner {
|
|
display: none;
|
|
padding-right: 0;
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.skills-sidebar-toggle[aria-expanded="true"] + .skills-sidebar-inner {
|
|
display: block;
|
|
}
|
|
|
|
.skills-sidebar-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SKILL DETAIL — BEFORE/AFTER DEMO
|
|
============================================ */
|
|
|
|
/* Ported from main.css for use on sub-pages. The split-compare effect
|
|
is initialized by js/effects/split-compare.js loaded on demand. */
|
|
|
|
.split-comparison {
|
|
position: relative;
|
|
width: 100%;
|
|
/* 500px visible + 64px buffer (32px per side) = 564px total.
|
|
box-sizing: border-box is inherited, so children sit in 500px. */
|
|
max-width: 564px;
|
|
/* 32px padding is an invisible hover buffer so the divider does not
|
|
immediately snap back when the pointer grazes the visible box
|
|
edge. Negative top/bottom margins collapse the padding out of
|
|
layout flow so the demo keeps its rhythm in the page. */
|
|
padding: 32px;
|
|
margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
|
|
}
|
|
|
|
.split-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 360px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
/* Match the page background so the 32px padding area is invisible.
|
|
The border + border-radius define the visible box; individual
|
|
demo content provides its own colors on top. */
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
cursor: ew-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
.split-before,
|
|
.split-after {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-before {
|
|
z-index: 1;
|
|
}
|
|
|
|
.split-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* No padding: demos that fill the container (overdrive) need full
|
|
bleed, and demos with smaller content (polish, bolder) already
|
|
center themselves via flex. */
|
|
}
|
|
|
|
.split-after {
|
|
clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
|
|
z-index: 2;
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.split-divider {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 3px;
|
|
background: var(--color-accent);
|
|
transform: translateX(-50%) skewX(-10deg);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Before | caption | After all on one row. The caption lives in the
|
|
middle column; if a skill has no caption we emit an empty <span> so
|
|
the grid still has three cells and Before/After sit at the edges. */
|
|
.split-labels {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: baseline;
|
|
gap: var(--spacing-md);
|
|
margin-top: 10px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.split-label-item[data-point="before"] {
|
|
color: var(--color-ash);
|
|
justify-self: start;
|
|
}
|
|
|
|
.split-label-item[data-point="after"] {
|
|
color: var(--color-accent);
|
|
justify-self: end;
|
|
}
|
|
|
|
.skill-demo-caption {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--color-ash);
|
|
text-align: center;
|
|
justify-self: center;
|
|
/* Allow wrapping inside the middle column if the text is long. */
|
|
max-width: 100%;
|
|
}
|
|
|
|
.skill-demo-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-sm);
|
|
/* Eyebrow now lives inside .split-comparison (which has 32px
|
|
padding), so it aligns with the visible card edge automatically. */
|
|
}
|
|
|
|
/* ============================================
|
|
SKILL DETAIL
|
|
============================================ */
|
|
|
|
/* Editorial hero: on wide viewports, text header on the left and the
|
|
before/after demo floats to the right as a hero module and is allowed
|
|
to break out of the 720px body cap. On narrow viewports everything
|
|
stacks within the 720px column. */
|
|
.skill-detail-hero {
|
|
max-width: 720px;
|
|
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
/* Stacked spacing between header and demo on narrow viewports; cancelled
|
|
when the hero switches to two columns at >=1280px. */
|
|
.skill-detail-hero--has-demo .skill-demo {
|
|
margin-top: clamp(2rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.skill-detail-hero--has-demo {
|
|
/* Wider editorial hero at large viewports. Fixed 564px demo column
|
|
(500px visible + 64px hover buffer) keeps the split-container at
|
|
its designed 500x360 landscape aspect ratio. Text column takes
|
|
whatever's left, clamped by the hero's own max-width. */
|
|
max-width: 1200px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 564px;
|
|
gap: clamp(var(--spacing-xl), 4vw, var(--spacing-2xl));
|
|
align-items: center;
|
|
}
|
|
|
|
.skill-detail-hero--has-demo .skill-detail-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skill-detail-hero--has-demo .skill-demo {
|
|
align-self: center;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* Body sections stay at a readable line length regardless of the hero
|
|
width above them. */
|
|
.skill-detail-editorial,
|
|
.skill-source-card,
|
|
.skill-references {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.skill-detail-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.skill-detail-eyebrow a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.skill-detail-eyebrow a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skill-detail-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(3rem, 5.5vw, 5rem);
|
|
font-weight: 600;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.skill-detail-title-slash {
|
|
color: var(--color-accent);
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* Sub-commands: show "/impeccable" as a smaller label above the command name
|
|
so it stacks and the command name stays at full display size. */
|
|
.skill-detail-title-namespace {
|
|
display: block;
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 0.4em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.skill-detail-title-namespace .skill-detail-title-slash {
|
|
color: var(--color-accent);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.skill-detail-tagline {
|
|
font-family: var(--font-body);
|
|
font-size: clamp(1rem, 1.4vw, 1.125rem);
|
|
font-weight: 400;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.55;
|
|
max-width: 60ch;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.skill-meta-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.skill-meta-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 4px 10px;
|
|
border-radius: 99px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.skill-meta-category[data-category="create"] {
|
|
background: var(--cat-create-bg);
|
|
border-color: var(--cat-create-border);
|
|
color: var(--cat-create-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="evaluate"] {
|
|
background: var(--cat-evaluate-bg);
|
|
border-color: var(--cat-evaluate-border);
|
|
color: var(--cat-evaluate-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="refine"] {
|
|
background: var(--cat-refine-bg);
|
|
border-color: var(--cat-refine-border);
|
|
color: var(--cat-refine-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="simplify"] {
|
|
background: var(--cat-simplify-bg);
|
|
border-color: var(--cat-simplify-border);
|
|
color: var(--cat-simplify-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="harden"] {
|
|
background: var(--cat-harden-bg);
|
|
border-color: var(--cat-harden-border);
|
|
color: var(--cat-harden-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="system"] {
|
|
background: var(--cat-system-bg);
|
|
border-color: var(--cat-system-border);
|
|
color: var(--cat-system-text);
|
|
}
|
|
|
|
.skill-meta-args {
|
|
font-family: var(--font-mono);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.skill-detail-editorial {
|
|
margin-bottom: clamp(2rem, 4vw, 3rem);
|
|
}
|
|
|
|
/* "The skill itself" card: visually contains the auto-rendered SKILL.md
|
|
body so it reads as a distinct reference block, not a continuation of
|
|
the editorial section above. */
|
|
.skill-source-card {
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 12px;
|
|
padding: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
|
|
margin-top: clamp(2rem, 4vw, 3rem);
|
|
box-shadow: 0 1px 0 oklch(90% 0 0);
|
|
}
|
|
|
|
.skill-source-card-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
padding-bottom: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-source-card-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-accent);
|
|
padding: 3px 8px;
|
|
background: var(--color-accent-dim);
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skill-source-card-subtitle {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.skill-source-card-body {
|
|
max-width: none;
|
|
}
|
|
|
|
.skill-source-card-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.skill-source-card-body > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skill-references {
|
|
margin-top: clamp(3rem, 6vw, 4.5rem);
|
|
padding-top: clamp(2rem, 4vw, 3rem);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-references-heading {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.skill-reference {
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-reference:last-child {
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-reference > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding: 16px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skill-reference > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.skill-reference > summary::before {
|
|
content: "+";
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.skill-reference[open] > summary::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.skill-reference > summary:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skill-reference-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skill-reference-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.125rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.skill-reference-body {
|
|
padding: var(--spacing-sm) 0 var(--spacing-md) 34px;
|
|
max-width: 62ch;
|
|
}
|
|
|
|
/* ============================================
|
|
PROSE — rendered markdown bodies
|
|
============================================ */
|
|
|
|
.prose {
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
max-width: 65ch;
|
|
}
|
|
|
|
.prose h1,
|
|
.prose h2,
|
|
.prose h3,
|
|
.prose h4 {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
scroll-margin-top: 5rem;
|
|
line-height: 1.25;
|
|
margin-top: 2em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.prose h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 500; }
|
|
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-top: 2.2em; }
|
|
.prose h3 { font-size: 1.125rem; margin-top: 1.8em; }
|
|
.prose h4 { font-size: 1rem; }
|
|
|
|
.prose h2:first-child,
|
|
.prose h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.prose p {
|
|
margin-top: 0;
|
|
margin-bottom: 1.1em;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin: 0 0 1.2em 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: var(--color-accent-dim);
|
|
transition: text-decoration-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.prose a:hover {
|
|
text-decoration-color: var(--color-accent);
|
|
}
|
|
|
|
.prose strong {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose em {
|
|
font-style: italic;
|
|
}
|
|
|
|
.prose code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.prose .code-block-wrap {
|
|
position: relative;
|
|
margin: 1.25em 0;
|
|
}
|
|
|
|
.prose .code-block-wrap .code-block {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Fenced code blocks: covers Astro+Shiki's auto-generated <pre class="astro-code">
|
|
in markdown bodies and the legacy hand-written <pre class="code-block"> still
|
|
used by the case-study pages. Shiki sets background/color inline, so its theme
|
|
wins on .astro-code; the CSS values here apply to .code-block. */
|
|
.prose pre,
|
|
.prose .code-block {
|
|
margin: 1.25em 0;
|
|
padding: var(--spacing-md);
|
|
background: oklch(12% 0.005 350);
|
|
color: oklch(92% 0.005 350);
|
|
border-radius: 10px;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
border: 1px solid oklch(20% 0.005 350);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.code-block-copy {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 4px 10px;
|
|
background: oklch(20% 0.005 350);
|
|
border: 1px solid oklch(30% 0.005 350);
|
|
color: oklch(78% 0.005 350);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition:
|
|
opacity var(--duration-fast) var(--ease-out),
|
|
background var(--duration-fast) var(--ease-out),
|
|
color var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.code-block-wrap:hover .code-block-copy,
|
|
.code-block-copy:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.code-block-copy::before {
|
|
content: "Copy";
|
|
}
|
|
|
|
.code-block-copy:hover {
|
|
background: oklch(30% 0.005 350);
|
|
color: oklch(92% 0.005 350);
|
|
border-color: oklch(40% 0.005 350);
|
|
}
|
|
|
|
.code-block-copy.is-copied {
|
|
opacity: 1;
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.code-block-copy.is-copied::before {
|
|
content: "Copied";
|
|
}
|
|
|
|
.prose pre code,
|
|
.prose .code-block code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.prose blockquote {
|
|
margin: 1.5em 0;
|
|
padding: var(--spacing-sm) 0;
|
|
border-block: 1px solid var(--color-mist);
|
|
color: var(--color-ash);
|
|
font-style: italic;
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
margin: 2.5em 0;
|
|
}
|