and stays put.
Colours come from the skill palette in global.css, one per skill; cutdown
keeps the teal the homepage gives Long Form Cutdown. Only the palette's
lighter colours here, since each card carries a line of dark copy. Keyed
off the icon (the
![]()
before skill-icons.js runs, the inlined svg after),
so the markup needn't repeat it. */
.vs-tool:has([data-skill-icon="cut"], .skill-icon--cut),
.mcp-use:has([data-skill-icon="cut"], .skill-icon--cut) { --skill-bg: var(--c-teal); }
.vs-tool:has([data-skill-icon="graphics"], .skill-icon--graphics),
.mcp-use:has([data-skill-icon="graphics"], .skill-icon--graphics) { --skill-bg: var(--c-magenta); }
.vs-tool:has([data-skill-icon="audio"], .skill-icon--audio),
.mcp-use:has([data-skill-icon="audio"], .skill-icon--audio) { --skill-bg: var(--c-sky); }
.vs-tool:has([data-skill-icon="hiring"], .skill-icon--hiring) { --skill-bg: var(--c-hot-pink); }
.vs-tool:has([data-skill-icon="article"], .skill-icon--article) { --skill-bg: var(--c-yellow); }
.vs-tool:has([data-skill-icon="listing"], .skill-icon--listing) { --skill-bg: var(--c-orange); }
.vs-tool {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
padding: 24px;
border-radius: 32px;
background: var(--skill-bg, #fff);
color: #0e0e0f;
text-decoration: none;
/* Tilted and shadowed like the homepage hero's skill cards: the hero's own
shadow (its drop-shadow, as the box-shadow it equals on a rounded box), and
a gentler spread of angles (the hero's run -10° to 4°; these sit in a grid
with a 16px gutter). The tilt is the independent `rotate` property, so it
composes with any transform — the hover's scale, a scroll reveal's lift —
instead of being replaced by it. */
rotate: var(--rot, 0deg);
box-shadow: 1.032px 2.064px 1.032px rgb(0 0 0 / 0.2);
transition: transform 350ms cubic-bezier(.2, .7, .2, 1);
}
.vs-tools > .vs-tool:nth-child(6n+1) { --rot: -1.6deg; }
.vs-tools > .vs-tool:nth-child(6n+2) { --rot: 1.2deg; }
.vs-tools > .vs-tool:nth-child(6n+3) { --rot: 2.2deg; }
.vs-tools > .vs-tool:nth-child(6n+4) { --rot: -0.9deg; }
.vs-tools > .vs-tool:nth-child(6n+5) { --rot: 1.7deg; }
.vs-tools > .vs-tool:nth-child(6n+6) { --rot: -2.4deg; }
/* On hover a card grows as the homepage hero's do (scale 1.04, the hero's
350ms ease), and rises above its neighbours — at 1.04 a card in this
16px-gutter grid can reach a few pixels past the gap, as the hero's
overlapping cards do. Only cards that are links: the one for the page you're
on stays put, as it goes nowhere. */
a.vs-tool:hover,
a.vs-tool:focus-visible { transform: scale(1.04); z-index: 2; }
a.vs-tool:focus-visible { outline: 2px solid #0e0e0f; outline-offset: 4px; }
.vs-tool img,
.vs-tool .skill-icon {
flex: 0 0 auto;
display: block;
width: 56px;
height: 56px;
}
.vs-tool h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 48px;
line-height: 44px;
letter-spacing: -0.005em;
color: #0e0e0f;
text-wrap: balance;
}
.vs-tool p {
margin: 12px 0 0;
font-family: var(--font-body);
font-size: 18px;
line-height: 26px;
color: #0e0e0f;
text-wrap: pretty;
}
/* "Try it now →", in the homepage card's hover-label style, centred on the
tile's row. */
a.vs-tool::after {
content: "Try it now \2192";
position: absolute;
top: 24px;
right: 28px;
height: 56px;
display: flex;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0;
translate: 6px 0;
transition: opacity 250ms, translate 350ms cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
}
a.vs-tool:hover::after,
a.vs-tool:focus-visible::after { opacity: 0.85; translate: 0 0; }
@media (max-width: 768px) {
.vs-tool { gap: 32px; padding: 20px; border-radius: 24px; }
.vs-tool img, .vs-tool .skill-icon { width: 48px; height: 48px; }
.vs-tool h3 { font-size: 38px; line-height: 35px; }
.vs-tool p { font-size: 17px; line-height: 25px; }
a.vs-tool::after { top: 20px; right: 22px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
a.vs-tool:hover,
a.vs-tool:focus-visible { transform: none; }
}
/* ── THE TILE'S MOTION ──
While the card is hovered (or anything in it has keyboard focus), the tile
itself stays put and the glyph does what its skill does, on a loop until the
pointer leaves:
graphics the + turns, the circle pops, play nudges on
cut the scissors snip twice about their pivot
audio the speaker kicks and its waves pulse outward
hiring the sparkle twinkles and the head nods
article the headline pill pulses and the two lines type out again
listing the three listing cards pop in turn, then the lines type
Parts turn about points in the 80px tile (transform-box: view-box), not
their own boxes. Nothing moves for reduced motion. */
.skill-icon [class^="i-"],
.skill-icon [class*=" i-"] { transform-box: view-box; }
/* graphics — one beat every 1.4s. A + turned 90° is a +, so the quarter turn
reads as a spin with no jump when it loops. */
.skill-icon .i-plus { transform-origin: 48px 48px; }
.skill-icon .i-dot { transform-origin: 48px 32px; }
.skill-host:hover .i-plus, .skill-host:focus-within .i-plus { animation: skill-plus 1.4s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.skill-host:hover .i-dot, .skill-host:focus-within .i-dot { animation: skill-pop 1.4s ease-in-out infinite; }
.skill-host:hover .i-play, .skill-host:focus-within .i-play { animation: skill-nudge 1.4s ease-in-out infinite; }
@keyframes skill-plus { 0% { transform: rotate(0); } 35%, 100% { transform: rotate(90deg); } }
@keyframes skill-pop { 0%, 15%, 55%, 100% { transform: scale(1); } 35% { transform: scale(1.3); } }
@keyframes skill-nudge { 0%, 30%, 75%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }
/* cut — a double snip about the pivot (~41, 41) every second. */
.skill-icon .i-blade-a, .skill-icon .i-blade-b { transform-origin: 41px 41px; }
.skill-host:hover .i-blade-a, .skill-host:focus-within .i-blade-a { animation: skill-snip-a 1s ease-in-out infinite; }
.skill-host:hover .i-blade-b, .skill-host:focus-within .i-blade-b { animation: skill-snip-b 1s ease-in-out infinite; }
@keyframes skill-snip-a { 0%, 70%, 100% { transform: rotate(0); } 17.5%, 52.5% { transform: rotate(11deg); } 35% { transform: rotate(0); } }
@keyframes skill-snip-b { 0%, 70%, 100% { transform: rotate(0); } 17.5%, 52.5% { transform: rotate(-11deg); } 35% { transform: rotate(0); } }
/* audio — the waves pulse outward in turn, with a kick from the speaker. */
.skill-icon .i-wave-1 { transform-origin: 44px 40px; }
.skill-icon .i-wave-2 { transform-origin: 48px 40px; }
.skill-icon .i-speaker { transform-origin: 34px 40px; }
.skill-host:hover .i-wave, .skill-host:focus-within .i-wave { animation: skill-wave 1s ease-out infinite; }
.skill-host:hover .i-wave-2, .skill-host:focus-within .i-wave-2 { animation-delay: 0.15s; }
.skill-host:hover .i-speaker, .skill-host:focus-within .i-speaker { animation: skill-kick 1s ease-out infinite; }
@keyframes skill-wave {
0% { opacity: 0.25; transform: translateX(-2px) scale(0.85); }
35% { opacity: 1; transform: translateX(1px) scale(1.05); }
100% { opacity: 0.25; transform: translateX(3px) scale(1); }
}
@keyframes skill-kick { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } }
/* hiring — the sparkle (centred ~50.7, 32.3) turns an eighth and swells,
twice a beat; the head nods once. */
.skill-icon .i-spark { transform-origin: 50.7px 32.3px; }
.skill-icon .i-head { transform-origin: 39.7px 41.3px; }
.skill-host:hover .i-spark, .skill-host:focus-within .i-spark { animation: skill-twinkle 1.4s ease-in-out infinite; }
.skill-host:hover .i-head, .skill-host:focus-within .i-head { animation: skill-nod 1.4s ease-in-out infinite; }
@keyframes skill-twinkle {
0%, 100% { transform: rotate(0) scale(1); }
25% { transform: rotate(45deg) scale(1.18); }
50% { transform: rotate(45deg) scale(0.92); }
75% { transform: rotate(90deg) scale(1.1); }
}
@keyframes skill-nod { 0%, 40%, 80%, 100% { transform: translateY(0); } 60% { transform: translateY(-1.5px); } }
/* article + listing — the text lines type out again (pathLength="1", so the
dash maths is 0 to 1), the first line then the second. */
.skill-icon .i-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.skill-host:hover .i-line-1, .skill-host:focus-within .i-line-1 { animation: skill-type-1 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.skill-host:hover .i-line-2, .skill-host:focus-within .i-line-2 { animation: skill-type-2 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes skill-type-1 { 0% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes skill-type-2 { 0%, 25% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
/* article — the headline pill swells as the lines start. */
.skill-icon .i-pill { transform-origin: 39.8px 34.5px; }
.skill-host:hover .i-pill, .skill-host:focus-within .i-pill { animation: skill-swell 1.6s ease-in-out infinite; }
@keyframes skill-swell { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } }
/* listing — the three cards pop left to right, like photos landing. */
.skill-icon .i-card-1 { transform-origin: 29px 34.5px; }
.skill-icon .i-card-2 { transform-origin: 39.8px 34.5px; }
.skill-icon .i-card-3 { transform-origin: 50.5px 34.5px; }
.skill-host:hover .i-card, .skill-host:focus-within .i-card { animation: skill-land 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.skill-host:hover .i-card-2, .skill-host:focus-within .i-card-2 { animation-delay: 0.12s; }
.skill-host:hover .i-card-3, .skill-host:focus-within .i-card-3 { animation-delay: 0.24s; }
@keyframes skill-land { 0%, 35%, 100% { transform: scale(1); } 15% { transform: scale(1.25) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) {
.skill-host:hover .skill-icon *,
.skill-host:focus-within .skill-icon * { animation: none !important; }
}