/*! * keycap.css — rugged matte keycaps + flush button groups. Pure CSS, no JS. * * ── Setup ────────────────────────────────────────────────────────────────── * * Paste the grain . * (It's markup, not script — omit it and caps just render grain-free.) * * ── Single key ───────────────────────────────────────────────────────────── * * * * ── Group: just wrap buttons in a .keycap-group div (no per-button class) ── *

* * *

* Theme a whole group:

…

* * Colourways: keycap--light (default) · keycap--gunmetal · keycap--signal * Size with font-size on the cap or the group. */ /* ── shared cap surface (single keys + group segments) ───────────────────── */ .keycap, .keycap-group > button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 2.7em; height: 2.45em; padding: 0 0.95em; border: 0; border-radius: 0.16em; font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Consolas", monospace; font-weight: 700; font-size: 0.875em; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; color: var(--legend); text-shadow: var(--legend-shadow); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; /* matte concave dish + body gradient */ background-image: radial-gradient(92% 78% at 50% 58%, var(--dish-shadow), transparent 70%), linear-gradient( 180deg, var(--cap-top) 0%, var(--cap) 46%, var(--cap-bot) 100% ); /* matte bevels + chunky stepped skirt + hard ground shadow */ box-shadow: var(--keycap-shadow); transition: transform 0.04s ease, box-shadow 0.07s ease; } /* theme variables — set here so colourways (below) can override --cap and the derived tints recompute from it. Group buttons inherit these from the group. */ .keycap, .keycap-group { --cap: var(--surface-raised); --legend: var(--text); --legend-shadow: 0 0.04em 0 rgba(255, 255, 255, 0.75), 0 -0.02em 0 rgba(0, 0, 0, 0.16); --dish-shadow: rgba(60, 72, 82, 0.08); --grain-filter: url(#keycap-grain-light); --grain-opacity: 0.18; --cap-highlight: rgba(255, 255, 255, 0.82); --cap-lowlight: rgba(50, 60, 70, 0.16); --cap-side-highlight: rgba(255, 255, 255, 0.36); --cap-side-lowlight: rgba(50, 60, 70, 0.12); --cap-top: color-mix(in srgb, var(--cap), #fff 8%); --cap-bot: color-mix(in srgb, var(--cap), #000 9%); --cap-wall: color-mix(in srgb, var(--cap) 70%, #68737a); --cap-wall2: color-mix(in srgb, var(--cap) 54%, #505c64); --cap-ground-shadow: rgba(45, 55, 65, 0.2); --keycap-shadow: inset 0 0.06em 0 var(--cap-highlight), inset 0 -0.16em 0.24em var(--cap-lowlight), inset 0.1em 0 0.18em var(--cap-side-highlight), inset -0.1em 0 0.18em var(--cap-side-lowlight), 0 0.14em 0 var(--cap-wall), 0 0.18em 0 var(--cap-wall2), 0 0.26em 0.24em var(--cap-ground-shadow); --keycap-active-shadow: inset 0 0.05em 0 var(--cap-highlight), inset 0 -0.1em 0.2em var(--cap-lowlight), inset 0.1em 0 0.18em var(--cap-side-highlight), inset -0.1em 0 0.18em var(--cap-side-lowlight), 0 0.06em 0 var(--cap-wall), 0 0.1em 0 var(--cap-wall2), 0 0.16em 0.16em var(--cap-ground-shadow); --keycap-edge-shadow: inset 0 0.015em 0 var(--cap-highlight), inset 0 -0.015em 0 var(--cap-side-lowlight); --keycap-group-background: color-mix(in srgb, var(--cap) 52%, #6f7b82); --keycap-group-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border), #000 10%), inset 0 0.08em 0.16em rgba(50, 60, 70, 0.18), 0 0.16em 0 var(--cap-wall), 0 0.2em 0 var(--cap-wall2), 0 0.28em 0.24em var(--cap-ground-shadow); --keycap-segment-shadow: inset 0 0.06em 0 var(--cap-highlight), inset 0 -0.16em 0.22em var(--cap-lowlight), inset 0.06em 0 0.14em var(--cap-side-highlight), inset -0.06em 0 0.14em var(--cap-side-lowlight); --keycap-segment-active-shadow: inset 0 0.05em 0 var(--cap-highlight), inset 0 -0.1em 0.2em var(--cap-lowlight), inset 0.06em 0 0.14em var(--cap-side-highlight), inset -0.06em 0 0.14em var(--cap-side-lowlight); } /* fixed molded surface grain (uses the inline #keycap-grain SVG filter) */ .keycap::before, .keycap-group > button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: #fff; filter: var(--grain-filter); mix-blend-mode: overlay; opacity: var(--grain-opacity); } /* hard machined top edge */ .keycap::after, .keycap-group > button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--keycap-edge-shadow); } /* native press — no JS */ .keycap:active, .keycap-group > button:active { transform: translateY(0.06em); box-shadow: var(--keycap-active-shadow); } .keycap:focus-visible, .keycap-group > button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } .keycap:disabled, .keycap-group > button:disabled { cursor: default; filter: brightness(0.9) saturate(0.7); opacity: 0.75; } /* ── group housing: buttons mounted flush in one molded bar ──────────────── */ .keycap-group { position: relative; isolation: isolate; display: inline-flex; gap: 2px; /* the gaps reveal the dark groove between keys */ padding: 2px; /* thin dark bezel around the keys */ border-radius: 0.22em; background: var(--keycap-group-background); box-shadow: var(--keycap-group-shadow); } /* segments drop their own skirt/shadow — the housing owns those */ .keycap-group > button { border-radius: 0; box-shadow: var(--keycap-segment-shadow); } .keycap-group > button:active { transform: translateY(0.06em); box-shadow: var(--keycap-segment-active-shadow); } .keycap-group > button:first-child { border-top-left-radius: 0.13em; border-bottom-left-radius: 0.13em; } .keycap-group > button:last-child { border-top-right-radius: 0.13em; border-bottom-right-radius: 0.13em; } /* ── colourways (declared last so they win and the tints recompute) ──────── */ .keycap--light { --cap: var(--surface-raised); --legend: var(--text); } .keycap--gunmetal, .keycap--signal { --legend-shadow: 0 0.04em 0 rgba(0, 0, 0, 0.55), 0 -0.02em 0 rgba(255, 255, 255, 0.05); --dish-shadow: rgba(0, 0, 0, 0.11); --grain-filter: url(#keycap-grain); --grain-opacity: 0.4; --cap-highlight: rgba(255, 255, 255, 0.07); --cap-lowlight: rgba(0, 0, 0, 0.48); --cap-side-highlight: rgba(255, 255, 255, 0.03); --cap-side-lowlight: rgba(0, 0, 0, 0.34); --cap-wall: color-mix(in srgb, var(--cap) 46%, #000); --cap-wall2: color-mix(in srgb, var(--cap) 30%, #000); --cap-ground-shadow: rgba(0, 0, 0, 0.4); --keycap-shadow: inset 0 0.06em 0 var(--cap-highlight), inset 0 -0.2em 0.28em var(--cap-lowlight), inset 0.1em 0 0.18em var(--cap-side-highlight), inset -0.1em 0 0.18em var(--cap-side-lowlight), 0 0.18em 0 var(--cap-wall), 0 0.23em 0 var(--cap-wall2), 0 0.34em 0.32em var(--cap-ground-shadow); --keycap-active-shadow: inset 0 0.05em 0 rgba(255, 255, 255, 0.05), inset 0 -0.12em 0.24em rgba(0, 0, 0, 0.55), inset 0.1em 0 0.18em rgba(255, 255, 255, 0.02), inset -0.1em 0 0.18em rgba(0, 0, 0, 0.36), 0 0.08em 0 var(--cap-wall), 0 0.13em 0 var(--cap-wall2), 0 0.2em 0.2em rgba(0, 0, 0, 0.46); --keycap-edge-shadow: inset 0 0.015em 0 rgba(255, 255, 255, 0.12), inset 0 -0.015em 0 rgba(0, 0, 0, 0.4); --keycap-group-background: #0c0f12; --keycap-group-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0.08em 0.16em rgba(0, 0, 0, 0.55), 0 0.2em 0 var(--cap-wall), 0 0.25em 0 var(--cap-wall2), 0 0.36em 0.32em rgba(0, 0, 0, 0.42); --keycap-segment-shadow: inset 0 0.06em 0 rgba(255, 255, 255, 0.07), inset 0 -0.2em 0.28em rgba(0, 0, 0, 0.4), inset 0.06em 0 0.14em rgba(255, 255, 255, 0.02), inset -0.06em 0 0.14em rgba(0, 0, 0, 0.28); --keycap-segment-active-shadow: inset 0 0.05em 0 rgba(255, 255, 255, 0.05), inset 0 -0.12em 0.24em rgba(0, 0, 0, 0.6), inset 0.06em 0 0.14em rgba(255, 255, 255, 0.02), inset -0.06em 0 0.14em rgba(0, 0, 0, 0.3); } .keycap--gunmetal { --cap: #34383d; --legend: #bcb6a7; } .keycap--signal { --cap: #b4472a; --legend: #f6e6dd; } /* ── REQUIRED SVG GRAIN — paste once into your (markup, not script) ── ──────────────────────────────────────────────────────────────────────────── */