/*!
* Hammhaus v1.3.0
* Motto: "Hamm follows form"
* Copyright (c) 2026 Geoffrey Hamm.
* Released under the MIT License. Use it, ship it, remix it.
*
* Dark mode: ships in v1.3. Surfaces follow the OS automatically; force a
* mode with or "light" (any subtree works).
*
* Hammhaus is a portable CSS system adapted from Geoffrey Hamm's
* editorial portfolio stylesheet. It keeps the paper, ink, and spot-color
* accent language while removing project-specific scene behavior.
*
* Fonts: this system expects Archivo + JetBrains Mono. To keep the
* stylesheet portable and render-blocking-free, the font @import has been
* removed. Add the following to your (already done in this repo's
* index.html), or rely on the system-ui fallbacks baked into the tokens:
*
*
*
*
*/
/* ==========================================================================
Tokens
========================================================================== */
:root {
/* Follows the OS by default; force with [data-hh-theme] (see end of block). */
color-scheme: light dark;
/* Fixed brand anchors — never shift with theme. Use these for text or
marks that sit ON a bright/bold fill and must keep contrast in any mode
(e.g. dark text on yellow, light text on red). */
--hh-black: #111111;
--hh-cream: #f2ead9;
/* Adaptive neutral ramp. light-dark(LIGHT, DARK) flips with color-scheme,
so page surfaces and default text re-tone automatically in dark mode. */
--hh-paper: light-dark(#f2ead9, #17130d);
--hh-paper-2: light-dark(#e5dbc8, #221b13);
--hh-paper-3: light-dark(#fbf7ef, #100d08);
--hh-ink: light-dark(#111111, #ece3d0);
--hh-ink-2: light-dark(#252525, #d8cfbb);
--hh-muted: light-dark(#6f675c, #a59c8a);
--hh-muted-2: light-dark(#9a9082, #82796b);
--hh-line: color-mix(in srgb, var(--hh-ink) 18%, transparent);
--hh-line-strong: color-mix(in srgb, var(--hh-ink) 35%, transparent);
/* Brand hues — fixed across themes. */
--hh-red: #d83224;
--hh-blue: #153b8a;
--hh-yellow: #f5c542;
--hh-green: #007f5f;
--hh-plum: #6b3a8e;
--hh-white: light-dark(#ffffff, #f3ecdb); /* the tone surfaces mix toward to elevate */
--hh-bg: var(--hh-paper);
--hh-fg: var(--hh-ink);
--hh-accent: var(--hh-red);
--hh-accent-2: var(--hh-blue);
--hh-accent-3: var(--hh-yellow);
--hh-focus: var(--hh-yellow);
--hh-font-display: "Archivo", "Archivo Black", system-ui, sans-serif;
--hh-font-body: "Archivo", system-ui, -apple-system, sans-serif;
--hh-font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace;
--hh-type-hero: 7rem;
--hh-type-display: 4rem;
--hh-type-title: 2.6rem;
--hh-type-section: 2rem;
--hh-type-subhead: 1.25rem;
--hh-type-body: 1.0625rem;
--hh-type-small: 0.875rem;
--hh-type-micro: 0.75rem;
--hh-leading-hero: 0.85;
--hh-leading-tight: 0.95;
--hh-leading-title: 1.05;
--hh-leading-snug: 1.35;
--hh-leading-lede: 1.65;
--hh-leading-body: 1.62;
/* Display tracking. Heavy Archivo spaces loose at large sizes, so display
type is pulled in with negative letter-spacing; bigger tier, tighter set.
Body/mono stay at the font's natural spacing. */
--hh-tracking-hero: -0.045em;
--hh-tracking-display: -0.035em;
--hh-tracking-title: -0.025em;
--hh-tracking-section: -0.02em;
--hh-tracking-subhead: -0.015em;
--hh-space-1: 0.25rem;
--hh-space-2: 0.5rem;
--hh-space-3: 0.75rem;
--hh-space-4: 1rem;
--hh-space-5: 1.5rem;
--hh-space-6: 2rem;
--hh-space-7: 3rem;
--hh-space-8: 4rem;
--hh-space-9: 6rem;
--hh-container: 1180px;
--hh-container-wide: 1480px;
--hh-gutter: 1.5rem;
--hh-scroll-padding: 5.5rem;
--hh-radius: 8px;
--hh-radius-sm: 4px;
--hh-radius-pill: 999px;
--hh-shadow-hard: 8px 10px 0 var(--hh-ink);
--hh-shadow-soft: 0 18px 44px color-mix(in srgb, var(--hh-ink) 16%, transparent);
--hh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Theme control.
- Default: the ramp follows the operating system (prefers-color-scheme).
- Force a mode anywhere by setting an attribute, e.g.
or
Scope it to a subtree to mix themes on one page. */
:root[data-hh-theme="light"],
[data-hh-theme="light"] { color-scheme: light; }
:root[data-hh-theme="dark"],
[data-hh-theme="dark"] { color-scheme: dark; }
/* Graceful degradation: browsers without light-dark() fall back to light. */
@supports not (color: light-dark(#000, #fff)) {
:root {
--hh-paper: #f2ead9;
--hh-paper-2: #e5dbc8;
--hh-paper-3: #fbf7ef;
--hh-ink: #111111;
--hh-ink-2: #252525;
--hh-muted: #6f675c;
--hh-muted-2: #9a9082;
--hh-white: #ffffff;
}
}
@media (max-width: 900px) {
:root {
--hh-type-hero: 5rem;
--hh-type-display: 3.25rem;
--hh-type-title: 2.1rem;
--hh-gutter: 1.25rem;
}
}
@media (max-width: 560px) {
:root {
--hh-type-hero: 3.25rem;
--hh-type-display: 2.35rem;
--hh-type-title: 1.8rem;
--hh-type-section: 1.55rem;
--hh-gutter: 1rem;
}
}
/* ==========================================================================
Base & reset
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Keep in-page anchor targets clear of a sticky header. */
scroll-padding-top: var(--hh-scroll-padding);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
font-family: var(--hh-font-body);
font-size: var(--hh-type-body);
line-height: var(--hh-leading-body);
color: var(--hh-fg);
background:
linear-gradient(90deg, color-mix(in srgb, var(--hh-ink) 4%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
linear-gradient(0deg, color-mix(in srgb, var(--hh-ink) 3%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
var(--hh-bg);
-webkit-font-smoothing: antialiased;
font-kerning: normal;
font-feature-settings: "kern" 1;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
img,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
summary,
a {
touch-action: manipulation;
}
a {
color: inherit;
text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
text-decoration-color: currentColor;
}
::selection {
color: var(--hh-black);
background: var(--hh-yellow);
}
:focus-visible {
outline: 3px solid var(--hh-focus);
outline-offset: 3px;
}
/* ==========================================================================
Layout: containers, sections, primitives
========================================================================== */
.hh-container {
width: min(100% - (var(--hh-gutter) * 2), var(--hh-container));
margin-inline: auto;
}
.hh-container--wide {
width: min(100% - (var(--hh-gutter) * 2), var(--hh-container-wide));
margin-inline: auto;
}
.hh-section {
padding-block: var(--hh-space-8);
background: var(--hh-bg);
color: var(--hh-fg);
}
.hh-section--compact {
padding-block: var(--hh-space-6);
}
.hh-section--paper {
--hh-bg: var(--hh-paper);
--hh-fg: var(--hh-ink);
--hh-accent: var(--hh-red);
background: var(--hh-bg);
color: var(--hh-fg);
}
.hh-section--white {
--hh-bg: var(--hh-paper-3);
--hh-fg: var(--hh-ink);
--hh-accent: var(--hh-blue);
background: var(--hh-bg);
color: var(--hh-fg);
}
/* Bold brand sections keep fixed light text + a yellow focus ring in any
theme, since their fill colour doesn't change. */
.hh-section--blue,
.hh-section--red {
--hh-fg: var(--hh-cream);
--hh-accent: var(--hh-yellow);
--hh-focus: var(--hh-yellow);
--hh-line: color-mix(in srgb, var(--hh-cream) 18%, transparent);
--hh-line-strong: color-mix(in srgb, var(--hh-cream) 35%, transparent);
background: var(--hh-bg);
color: var(--hh-fg);
}
.hh-section--blue { --hh-bg: var(--hh-blue); }
.hh-section--red { --hh-bg: var(--hh-red); }
/* The ink section is an adaptive neutral: a dark band in light mode, and a
bright "spotlight" panel in dark mode (ink/paper invert with the theme). */
.hh-section--ink {
--hh-bg: var(--hh-ink);
--hh-fg: var(--hh-paper);
--hh-accent: var(--hh-yellow);
--hh-focus: var(--hh-yellow);
--hh-line: color-mix(in srgb, var(--hh-paper) 18%, transparent);
--hh-line-strong: color-mix(in srgb, var(--hh-paper) 35%, transparent);
background: var(--hh-bg);
color: var(--hh-fg);
}
.hh-section--yellow {
--hh-bg: var(--hh-yellow);
--hh-fg: var(--hh-black);
--hh-accent: var(--hh-red);
--hh-focus: var(--hh-black); /* yellow-on-yellow would be invisible */
background: var(--hh-bg);
color: var(--hh-fg);
}
.hh-stack {
display: flex;
flex-direction: column;
gap: var(--hh-stack-gap, var(--hh-space-5));
}
.hh-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hh-cluster-gap, var(--hh-space-3));
}
.hh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hh-grid-min, 15rem)), 1fr));
gap: var(--hh-grid-gap, var(--hh-space-5));
}
.hh-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(min(18rem, 100%), 0.8fr);
gap: var(--hh-space-7);
align-items: center;
}
/* Grid items default to min-width:auto, which lets a wide child (a long code
line, an unbreakable URL) blow past the viewport. Let them shrink so any
inner overflow:auto can scroll instead. */
.hh-split > * {
min-width: 0;
}
@media (max-width: 860px) {
.hh-split {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
Typography
========================================================================== */
.hh-kicker,
.hh-label,
.hh-mono {
font-family: var(--hh-font-mono);
font-size: var(--hh-type-micro);
line-height: 1.4;
text-transform: uppercase;
}
.hh-kicker {
display: inline-flex;
align-items: center;
gap: var(--hh-space-2);
color: color-mix(in srgb, currentColor 70%, var(--hh-bg));
font-weight: 700;
}
.hh-kicker::before {
content: "";
width: 0.75rem;
height: 0.75rem;
background: var(--hh-accent);
border-radius: 50%;
}
.hh-label {
display: block;
margin-block-end: var(--hh-space-2);
color: color-mix(in srgb, currentColor 66%, var(--hh-bg));
font-weight: 700;
}
/* Shared display-type face. Each rule below sets only its own size/leading. */
.hh-display,
.hh-title,
.hh-section-title,
.hh-brand,
.hh-hero__title {
font-family: var(--hh-font-display);
font-weight: 900;
font-kerning: normal;
font-feature-settings: "kern" 1;
text-wrap: balance;
}
.hh-display {
font-size: var(--hh-type-display);
line-height: var(--hh-leading-tight);
letter-spacing: var(--hh-tracking-display);
}
.hh-title {
font-size: var(--hh-type-title);
line-height: var(--hh-leading-title);
letter-spacing: var(--hh-tracking-title);
}
.hh-section-title {
font-size: var(--hh-type-section);
line-height: var(--hh-leading-title);
letter-spacing: var(--hh-tracking-section);
}
.hh-subhead {
font-size: var(--hh-type-subhead);
line-height: var(--hh-leading-snug);
letter-spacing: var(--hh-tracking-subhead);
font-weight: 800;
text-wrap: balance;
}
.hh-lede {
max-width: 62ch;
font-size: 1.15rem;
line-height: var(--hh-leading-lede);
color: color-mix(in srgb, currentColor 78%, var(--hh-bg));
}
.hh-prose {
max-width: 72ch;
}
.hh-prose > * + * {
margin-block-start: var(--hh-space-4);
}
.hh-prose h2,
.hh-prose h3 {
margin-block-start: var(--hh-space-6);
}
.hh-prose code,
.hh-code {
font-family: var(--hh-font-mono);
font-size: 0.92em;
color: var(--hh-fg);
background: color-mix(in srgb, currentColor 8%, transparent);
border: 1px solid var(--hh-line);
border-radius: var(--hh-radius-sm);
padding: 0.12em 0.35em;
}
.hh-code-block {
max-width: 100%;
overflow: auto;
margin: 0;
padding: var(--hh-space-5);
font-family: var(--hh-font-mono);
font-size: var(--hh-type-small);
line-height: 1.65;
background: var(--hh-ink);
color: var(--hh-paper);
border-left: 4px solid var(--hh-accent);
border-radius: var(--hh-radius);
}
/* Scrollable panels get a slim, surface-matched scrollbar instead of the
platform default, which glares on the ink code block. */
.hh-code-block {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--hh-paper) 35%, transparent) transparent;
}
.hh-table-wrap {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, currentColor 30%, transparent) transparent;
}
.hh-code-block::-webkit-scrollbar,
.hh-table-wrap::-webkit-scrollbar {
inline-size: 8px;
block-size: 8px;
}
.hh-code-block::-webkit-scrollbar-track,
.hh-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
.hh-code-block::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--hh-paper) 35%, transparent);
border-radius: var(--hh-radius-pill);
}
.hh-table-wrap::-webkit-scrollbar-thumb {
background: color-mix(in srgb, currentColor 30%, transparent);
border-radius: var(--hh-radius-pill);
}
.hh-rule {
display: block;
height: 1px;
background: var(--hh-line-strong);
}
.hh-accent {
color: var(--hh-accent);
}
.hh-underline {
background: linear-gradient(to top, var(--hh-accent) 0 0.22em, transparent 0.22em);
padding-inline: 0.05em;
}
.hh-muted {
color: color-mix(in srgb, currentColor 62%, var(--hh-bg));
}
/* ==========================================================================
Navigation & brand
========================================================================== */
.hh-nav {
position: sticky;
top: 0;
z-index: 20;
border-bottom: 1px solid var(--hh-line);
background: color-mix(in srgb, var(--hh-bg) 92%, transparent);
color: var(--hh-fg);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.hh-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hh-space-5);
min-height: 4.5rem;
}
.hh-brand {
display: inline-flex;
align-items: center;
gap: var(--hh-space-3);
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
}
.hh-mark {
position: relative;
display: inline-grid;
grid-template-columns: repeat(2, 0.85rem);
grid-template-rows: repeat(2, 0.85rem);
gap: 0.16rem;
inline-size: 1.86rem;
block-size: 1.86rem;
flex: 0 0 auto;
}
.hh-mark::before,
.hh-mark::after,
.hh-mark span {
content: "";
display: block;
}
.hh-mark::before {
grid-column: 1;
grid-row: 1;
background: var(--hh-red);
border-radius: 50%;
}
.hh-mark::after {
grid-column: 2;
grid-row: 1;
background: var(--hh-blue);
}
.hh-mark span:first-child {
grid-column: 1;
grid-row: 2;
background: var(--hh-yellow);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.hh-mark span:last-child {
grid-column: 2;
grid-row: 2;
border: 2px solid currentColor;
border-radius: 50%;
}
.hh-nav__links {
display: flex;
align-items: center;
gap: var(--hh-space-4);
font-size: var(--hh-type-small);
}
.hh-nav__links a {
text-decoration: none;
color: color-mix(in srgb, currentColor 78%, var(--hh-bg));
}
.hh-nav__links a:hover {
color: currentColor;
}
/* ==========================================================================
Custom cursor (opt-in via body.hh-cursor-enabled)
========================================================================== */
@media (hover: hover) and (pointer: fine) {
body.hh-cursor-enabled,
body.hh-cursor-enabled * {
cursor: none;
}
}
.hh-cursor {
--hh-cursor-x: 50vw;
--hh-cursor-y: 50vh;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
width: 0;
height: 0;
/* White + difference blend = the cursor inverts against whatever is
behind it, so it stays visible on ink, paper, red, yellow — any
surface. No JS needed for the color; only position is scripted. */
color: var(--hh-white);
mix-blend-mode: difference;
pointer-events: none;
transform: translate3d(var(--hh-cursor-x), var(--hh-cursor-y), 0);
transition: opacity 160ms var(--hh-ease);
}
/* If a browser can't blend, fall back to a solid ink cursor. */
@supports not (mix-blend-mode: difference) {
.hh-cursor { color: var(--hh-ink); mix-blend-mode: normal; }
}
.hh-cursor__dot,
.hh-cursor__ring {
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.hh-cursor__dot {
width: 0.55rem;
height: 0.55rem;
background: currentColor;
}
.hh-cursor__ring {
width: 3rem;
height: 3rem;
border: 2px solid currentColor;
transition:
width 220ms var(--hh-ease),
height 220ms var(--hh-ease),
opacity 220ms var(--hh-ease);
}
.hh-cursor.is-hover .hh-cursor__ring {
width: 4.25rem;
height: 4.25rem;
opacity: 0.72;
}
@media (hover: none), (pointer: coarse) {
.hh-cursor {
display: none;
}
}
@media (max-width: 700px) {
.hh-cursor {
display: none;
}
body.hh-cursor-enabled,
body.hh-cursor-enabled * {
cursor: auto;
}
body.hh-cursor-enabled a,
body.hh-cursor-enabled button,
body.hh-cursor-enabled summary,
body.hh-cursor-enabled [role="button"] {
cursor: pointer;
}
}
@media (max-width: 760px) {
.hh-nav__inner {
align-items: flex-start;
flex-direction: column;
padding-block: var(--hh-space-4);
}
.hh-nav__links {
width: 100%;
overflow-x: auto;
padding-block-end: var(--hh-space-1);
}
}
/* ==========================================================================
Hero
========================================================================== */
.hh-hero {
position: relative;
min-height: 92vh;
min-height: 92dvh;
display: grid;
align-items: end;
overflow: hidden;
padding-block: var(--hh-space-9) var(--hh-space-7);
background:
linear-gradient(90deg, transparent 0 72%, color-mix(in srgb, var(--hh-blue) 94%, var(--hh-ink)) 72% 100%),
var(--hh-bg);
color: var(--hh-fg);
}
.hh-hero::before {
content: "";
position: absolute;
top: 6rem;
right: 8%;
width: 13rem;
aspect-ratio: 1;
border-radius: 50%;
background: var(--hh-red);
}
.hh-hero::after {
content: "";
position: absolute;
right: 20%;
bottom: 8%;
width: 9rem;
height: 9rem;
background: var(--hh-yellow);
transform: rotate(-8deg);
}
.hh-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
gap: var(--hh-space-7);
align-items: end;
}
.hh-hero__title {
max-width: 10ch;
font-size: var(--hh-type-hero);
line-height: var(--hh-leading-hero);
letter-spacing: var(--hh-tracking-hero);
}
.hh-hero__motto {
display: inline-flex;
margin-block-start: var(--hh-space-5);
padding: var(--hh-space-2) var(--hh-space-3);
background: var(--hh-yellow);
color: var(--hh-black);
border: 1px solid var(--hh-black);
border-radius: var(--hh-radius-sm);
font-family: var(--hh-font-mono);
font-size: var(--hh-type-small);
}
.hh-hero__panel {
display: grid;
gap: var(--hh-space-4);
align-self: stretch;
min-height: 25rem;
padding: var(--hh-space-5);
color: var(--hh-paper);
background: var(--hh-ink);
border: 1px solid color-mix(in srgb, var(--hh-paper) 22%, transparent);
border-radius: var(--hh-radius);
}
@media (max-width: 920px) {
.hh-hero {
min-height: auto;
background: var(--hh-bg);
}
.hh-hero::before,
.hh-hero::after {
opacity: 0.45;
}
.hh-hero__inner {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Buttons
========================================================================== */
.hh-button {
--hh-button-bg: transparent;
--hh-button-fg: currentColor;
--hh-button-border: currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hh-space-2);
min-height: 2.85rem;
padding: 0.72rem 1.1rem;
color: var(--hh-button-fg);
background: var(--hh-button-bg);
border: 1.5px solid var(--hh-button-border);
border-radius: var(--hh-radius-pill);
font-weight: 800;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
color 180ms var(--hh-ease),
background-color 180ms var(--hh-ease),
border-color 180ms var(--hh-ease),
transform 180ms var(--hh-ease),
box-shadow 180ms var(--hh-ease);
}
.hh-button:hover {
transform: translateY(-2px);
box-shadow: 4px 5px 0 color-mix(in srgb, currentColor 95%, transparent);
text-decoration: none;
}
.hh-button:active {
transform: translateY(0);
box-shadow: 0 0 0 transparent;
}
.hh-button svg {
inline-size: 1.1rem;
block-size: 1.1rem;
flex: 0 0 auto;
}
.hh-button--primary {
--hh-button-bg: var(--hh-ink);
--hh-button-fg: var(--hh-paper);
--hh-button-border: var(--hh-ink);
}
.hh-button--primary:hover {
--hh-button-bg: var(--hh-red);
--hh-button-border: var(--hh-red);
}
.hh-button--blue {
--hh-button-bg: var(--hh-blue);
--hh-button-fg: var(--hh-cream);
--hh-button-border: var(--hh-blue);
}
.hh-button--yellow {
--hh-button-bg: var(--hh-yellow);
--hh-button-fg: var(--hh-black);
--hh-button-border: var(--hh-black);
}
.hh-button--ghost {
--hh-button-bg: transparent;
--hh-button-fg: currentColor;
--hh-button-border: color-mix(in srgb, currentColor 48%, transparent);
}
.hh-button--small {
min-height: 2.25rem;
padding: 0.52rem 0.9rem;
font-size: var(--hh-type-small);
}
.hh-button--large {
min-height: 3.35rem;
padding: 0.9rem 1.35rem;
font-size: 1.08rem;
}
.hh-button--block {
width: 100%;
}
.hh-button[disabled],
.hh-button[aria-disabled="true"] {
opacity: 0.55;
pointer-events: none;
}
.hh-icon-button {
display: inline-grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
color: currentColor;
background: transparent;
border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
border-radius: 50%;
cursor: pointer;
transition: background-color 180ms var(--hh-ease), transform 180ms var(--hh-ease);
}
.hh-icon-button:hover {
background: color-mix(in srgb, currentColor 9%, transparent);
transform: translateY(-2px);
}
/* ==========================================================================
Cards
========================================================================== */
.hh-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--hh-space-4);
padding: var(--hh-space-5);
background: color-mix(in srgb, var(--hh-bg) 92%, var(--hh-white));
border: 1px solid var(--hh-line);
border-top: 4px solid var(--hh-accent);
border-radius: var(--hh-radius);
color: var(--hh-fg);
}
.hh-card--raised {
box-shadow: var(--hh-shadow-soft);
}
.hh-card--hard {
border-color: var(--hh-ink);
box-shadow: var(--hh-shadow-hard);
}
.hh-card--inverse {
--hh-bg: var(--hh-ink);
--hh-fg: var(--hh-paper);
--hh-accent: var(--hh-yellow);
--hh-line: color-mix(in srgb, var(--hh-paper) 22%, transparent);
background: var(--hh-bg);
color: var(--hh-fg);
}
.hh-card__media {
display: grid;
place-items: center;
min-height: 10rem;
margin: calc(var(--hh-space-5) * -1) calc(var(--hh-space-5) * -1) 0;
/* The media bleeds to the card's padding box, whose corner curve is the
outer radius minus the border widths (1px sides, 4px accent top).
Matching it exactly stops card background peeking out at the corners. */
border-radius:
max(0px, calc(var(--hh-radius) - 1px)) max(0px, calc(var(--hh-radius) - 1px)) 0 0 /
max(0px, calc(var(--hh-radius) - 4px)) max(0px, calc(var(--hh-radius) - 4px)) 0 0;
overflow: hidden;
background:
linear-gradient(135deg, var(--hh-red) 0 32%, transparent 32%),
linear-gradient(45deg, var(--hh-yellow) 0 26%, transparent 26%),
var(--hh-blue);
}
/* ==========================================================================
Badges, chips & dots
========================================================================== */
.hh-badge,
.hh-chip {
display: inline-flex;
align-items: center;
gap: 0.42rem;
width: fit-content;
min-height: 1.75rem;
padding: 0.25rem 0.65rem;
font-size: var(--hh-type-small);
font-weight: 800;
line-height: 1;
border: 1px solid var(--hh-line-strong);
border-radius: var(--hh-radius-pill);
}
.hh-badge {
background: var(--hh-yellow);
color: var(--hh-black);
border-color: var(--hh-black);
}
.hh-badge--red {
background: var(--hh-red);
color: var(--hh-cream);
}
.hh-badge--blue {
background: var(--hh-blue);
color: var(--hh-cream);
}
.hh-chip {
background: color-mix(in srgb, currentColor 7%, transparent);
color: currentColor;
}
.hh-dot {
display: inline-block;
inline-size: 0.62rem;
block-size: 0.62rem;
border-radius: 50%;
background: var(--hh-accent);
flex: 0 0 auto;
}
.hh-dot--red { background: var(--hh-red); }
.hh-dot--blue { background: var(--hh-blue); }
.hh-dot--yellow { background: var(--hh-yellow); }
.hh-dot--green { background: var(--hh-green); }
.hh-dot--plum { background: var(--hh-plum); }
/* ==========================================================================
Forms
========================================================================== */
.hh-form {
display: grid;
gap: var(--hh-space-5);
}
.hh-field {
display: grid;
gap: var(--hh-space-2);
}
.hh-input,
.hh-select,
.hh-textarea {
width: 100%;
min-height: 3rem;
padding: 0.78rem 0.9rem;
color: var(--hh-fg);
background: color-mix(in srgb, var(--hh-bg) 88%, var(--hh-white));
border: 1.5px solid var(--hh-line-strong);
border-radius: var(--hh-radius-sm);
transition: border-color 180ms var(--hh-ease), box-shadow 180ms var(--hh-ease), background-color 180ms var(--hh-ease);
}
.hh-input:hover,
.hh-select:hover,
.hh-textarea:hover {
border-color: currentColor;
}
.hh-input:focus,
.hh-select:focus,
.hh-textarea:focus {
outline: none;
border-color: var(--hh-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--hh-accent) 22%, transparent);
background: var(--hh-paper-3);
}
.hh-input::placeholder,
.hh-textarea::placeholder {
color: color-mix(in srgb, currentColor 44%, var(--hh-bg));
}
.hh-select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 1.1rem) 1.3rem,
calc(100% - 0.75rem) 1.3rem;
background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
background-repeat: no-repeat;
padding-inline-end: 2.4rem;
}
.hh-textarea {
min-height: 8rem;
resize: vertical;
}
.hh-help {
font-size: var(--hh-type-small);
color: color-mix(in srgb, currentColor 62%, var(--hh-bg));
}
.hh-field--error .hh-input,
.hh-field--error .hh-select,
.hh-field--error .hh-textarea {
border-color: var(--hh-red);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--hh-red) 18%, transparent);
}
.hh-field--success .hh-input,
.hh-field--success .hh-select,
.hh-field--success .hh-textarea {
border-color: var(--hh-green);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--hh-green) 18%, transparent);
}
.hh-check,
.hh-radio {
display: flex;
align-items: flex-start;
gap: var(--hh-space-3);
cursor: pointer;
}
.hh-check input,
.hh-radio input {
flex: 0 0 auto;
inline-size: 1.25rem;
block-size: 1.25rem;
margin: 0.12rem 0 0;
accent-color: var(--hh-accent);
}
.hh-switch {
--hh-switch-size: 1.5rem;
display: inline-flex;
align-items: center;
gap: var(--hh-space-3);
cursor: pointer;
}
.hh-switch input {
position: absolute;
opacity: 0;
inline-size: 1px;
block-size: 1px;
}
.hh-switch__track {
position: relative;
inline-size: 3rem;
block-size: var(--hh-switch-size);
border: 1.5px solid currentColor;
border-radius: var(--hh-radius-pill);
background: color-mix(in srgb, currentColor 10%, transparent);
}
.hh-switch__track::before {
content: "";
position: absolute;
/* Center the knob in the track's content box; a fixed offset would sit
it low because the track's border eats into the inner height. */
inset-block-start: calc(50% - (var(--hh-switch-size) - 0.36rem) / 2);
inset-inline-start: 0.18rem;
inline-size: calc(var(--hh-switch-size) - 0.36rem);
block-size: calc(var(--hh-switch-size) - 0.36rem);
border-radius: 50%;
background: currentColor;
transition: transform 180ms var(--hh-ease), background-color 180ms var(--hh-ease);
}
.hh-switch input:checked + .hh-switch__track {
background: var(--hh-yellow);
}
.hh-switch input:checked + .hh-switch__track::before {
background: var(--hh-black);
transform: translateX(1.5rem);
}
/* The switch input is visually hidden, so keyboard focus must surface on
the track instead. */
.hh-switch input:focus-visible + .hh-switch__track {
outline: 3px solid var(--hh-focus);
outline-offset: 3px;
}
.hh-range {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 1.4rem;
margin: 0;
background: transparent;
cursor: pointer;
}
.hh-range::-webkit-slider-runnable-track {
height: 4px;
border-radius: var(--hh-radius-pill);
background: color-mix(in srgb, currentColor 26%, transparent);
}
.hh-range::-moz-range-track {
height: 4px;
border-radius: var(--hh-radius-pill);
background: color-mix(in srgb, currentColor 26%, transparent);
}
.hh-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.2rem;
height: 1.2rem;
margin-top: calc((4px - 1.2rem) / 2);
border-radius: 50%;
background: var(--hh-accent);
border: 2px solid var(--hh-fg);
transition: transform 160ms var(--hh-ease);
}
.hh-range::-moz-range-thumb {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: var(--hh-accent);
border: 2px solid var(--hh-fg);
transition: transform 160ms var(--hh-ease);
}
.hh-range:hover::-webkit-slider-thumb { transform: scale(1.18); }
.hh-range:hover::-moz-range-thumb { transform: scale(1.18); }
/* ==========================================================================
Feedback: alerts, stats, progress
========================================================================== */
.hh-alert {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--hh-space-3);
padding: var(--hh-space-4);
border: 1px solid var(--hh-line-strong);
border-left: 5px solid var(--hh-accent);
border-radius: var(--hh-radius);
background: color-mix(in srgb, var(--hh-bg) 88%, var(--hh-white));
}
.hh-alert--success { --hh-accent: var(--hh-green); }
.hh-alert--warning { --hh-accent: var(--hh-yellow); }
.hh-alert--danger { --hh-accent: var(--hh-red); }
.hh-alert--info { --hh-accent: var(--hh-blue); }
.hh-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
border-top: 1px solid var(--hh-line-strong);
border-left: 1px solid var(--hh-line-strong);
}
.hh-stat {
display: grid;
gap: var(--hh-space-2);
min-height: 9rem;
padding: var(--hh-space-5);
border-right: 1px solid var(--hh-line-strong);
border-bottom: 1px solid var(--hh-line-strong);
background: color-mix(in srgb, var(--hh-bg) 90%, var(--hh-white));
}
.hh-stat__value {
font-family: var(--hh-font-display);
font-size: 2.6rem;
line-height: 1;
}
.hh-stat__label {
font-size: var(--hh-type-small);
color: color-mix(in srgb, currentColor 64%, var(--hh-bg));
}
/* ==========================================================================
Navigation widgets: tabs, segmented, toolbar
========================================================================== */
.hh-tabs,
.hh-segmented {
display: flex;
flex-wrap: wrap;
width: fit-content;
padding: 0.25rem;
gap: 0.25rem;
border: 1px solid var(--hh-line-strong);
border-radius: var(--hh-radius-pill);
background: color-mix(in srgb, currentColor 7%, transparent);
}
.hh-tab,
.hh-segment {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.15rem;
padding: 0.4rem 0.85rem;
border: 0;
border-radius: var(--hh-radius-pill);
color: currentColor;
background: transparent;
font-weight: 800;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.hh-tab[aria-selected="true"],
.hh-segment[aria-pressed="true"] {
background: var(--hh-ink);
color: var(--hh-paper);
}
.hh-progress {
display: grid;
gap: var(--hh-space-2);
}
.hh-progress__track {
overflow: hidden;
block-size: 0.75rem;
border: 1px solid var(--hh-line-strong);
border-radius: var(--hh-radius-pill);
background: color-mix(in srgb, currentColor 9%, transparent);
}
.hh-progress__bar {
display: block;
block-size: 100%;
inline-size: var(--hh-progress, 50%);
background: var(--hh-accent);
transition: inline-size 280ms var(--hh-ease);
}
/* ==========================================================================
Data display: tables, timeline, accordion
========================================================================== */
.hh-table-wrap {
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--hh-line-strong);
border-radius: var(--hh-radius);
background: color-mix(in srgb, var(--hh-bg) 88%, var(--hh-white));
}
.hh-table {
width: 100%;
border-collapse: collapse;
min-width: 42rem;
}
.hh-table th,
.hh-table td {
padding: 0.95rem 1rem;
text-align: left;
border-bottom: 1px solid var(--hh-line);
}
.hh-table th {
font-family: var(--hh-font-mono);
font-size: var(--hh-type-micro);
text-transform: uppercase;
color: color-mix(in srgb, currentColor 62%, var(--hh-bg));
background: color-mix(in srgb, currentColor 6%, transparent);
}
.hh-table tr:last-child td {
border-bottom: 0;
}
.hh-table tbody tr:hover td {
background: color-mix(in srgb, currentColor 4%, transparent);
}
.hh-timeline {
display: grid;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.hh-timeline__item {
display: grid;
grid-template-columns: 9rem 1fr;
gap: var(--hh-space-5);
padding-block: var(--hh-space-5);
border-top: 1px solid var(--hh-line-strong);
}
.hh-timeline__item:last-child {
border-bottom: 1px solid var(--hh-line-strong);
}
.hh-timeline__time {
font-family: var(--hh-font-mono);
font-size: var(--hh-type-small);
color: color-mix(in srgb, currentColor 62%, var(--hh-bg));
}
@media (max-width: 640px) {
.hh-timeline__item {
grid-template-columns: 1fr;
gap: var(--hh-space-2);
}
}
.hh-accordion {
border-block: 1px solid var(--hh-line-strong);
}
.hh-accordion details + details {
border-top: 1px solid var(--hh-line);
}
.hh-accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hh-space-4);
min-height: 4rem;
font-weight: 800;
cursor: pointer;
list-style: none;
}
.hh-accordion summary::-webkit-details-marker {
display: none;
}
.hh-accordion summary::after {
content: "+";
display: grid;
place-items: center;
inline-size: 1.8rem;
block-size: 1.8rem;
border: 1px solid currentColor;
border-radius: 50%;
}
.hh-accordion details[open] summary::after {
content: "-";
background: var(--hh-yellow);
color: var(--hh-black);
}
.hh-accordion__body {
padding-block-end: var(--hh-space-5);
color: color-mix(in srgb, currentColor 72%, var(--hh-bg));
}
.hh-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hh-space-2);
padding: var(--hh-space-2);
border: 1px solid var(--hh-line-strong);
border-radius: var(--hh-radius-pill);
background: color-mix(in srgb, currentColor 7%, transparent);
}
.hh-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hh-space-2);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--hh-font-mono);
font-size: var(--hh-type-micro);
text-transform: uppercase;
}
.hh-breadcrumbs li {
display: inline-flex;
align-items: center;
gap: var(--hh-space-2);
}
.hh-breadcrumbs li + li::before {
content: "/";
color: color-mix(in srgb, currentColor 40%, var(--hh-bg));
}
.hh-breadcrumbs a {
text-decoration: none;
color: color-mix(in srgb, currentColor 66%, var(--hh-bg));
}
.hh-breadcrumbs a:hover { color: currentColor; }
.hh-breadcrumbs [aria-current="page"] { font-weight: 700; }
.hh-pagination {
display: flex;
flex-wrap: wrap;
gap: var(--hh-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.hh-page {
display: inline-grid;
place-items: center;
min-inline-size: 2.4rem;
block-size: 2.4rem;
padding-inline: 0.5rem;
font: inherit;
font-weight: 700;
color: currentColor;
background: transparent;
border: 1.5px solid var(--hh-line-strong);
border-radius: var(--hh-radius-sm);
text-decoration: none;
cursor: pointer;
transition: border-color 160ms var(--hh-ease), background-color 160ms var(--hh-ease);
}
.hh-page:hover { border-color: currentColor; }
.hh-page[aria-current="page"] {
background: var(--hh-fg);
color: var(--hh-bg);
border-color: var(--hh-fg);
}
/* ==========================================================================
Voice: quote, list, divider, kbd
========================================================================== */
.hh-quote {
display: grid;
gap: var(--hh-space-3);
margin: 0;
padding-inline-start: var(--hh-space-5);
border-inline-start: 6px solid var(--hh-accent);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.4;
text-wrap: balance;
}
.hh-quote footer {
font-family: var(--hh-font-mono);
font-size: var(--hh-type-small);
font-weight: 400;
color: color-mix(in srgb, currentColor 62%, var(--hh-bg));
}
.hh-list {
display: grid;
gap: var(--hh-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.hh-list li {
display: flex;
gap: var(--hh-space-3);
}
.hh-list li::before {
content: "";
flex: 0 0 auto;
inline-size: 0.5em;
block-size: 0.5em;
margin-block-start: 0.5em;
background: var(--hh-accent);
}
.hh-divider {
display: flex;
align-items: center;
gap: var(--hh-space-3);
font-family: var(--hh-font-mono);
font-size: var(--hh-type-micro);
font-weight: 700;
text-transform: uppercase;
color: color-mix(in srgb, currentColor 60%, var(--hh-bg));
}
.hh-divider::before,
.hh-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--hh-line-strong);
}
.hh-kbd {
font-family: var(--hh-font-mono);
font-size: 0.85em;
padding: 0.12em 0.45em;
background: color-mix(in srgb, currentColor 7%, transparent);
border: 1.5px solid var(--hh-line-strong);
border-bottom-width: 3px;
border-radius: var(--hh-radius-sm);
}
/* ==========================================================================
People & signals: avatar, tooltip, spinner, skeleton
========================================================================== */
.hh-avatar {
display: inline-grid;
place-items: center;
inline-size: var(--hh-avatar-size, 2.6rem);
block-size: var(--hh-avatar-size, 2.6rem);
overflow: hidden;
border-radius: 50%;
border: 2px solid var(--hh-fg);
background: var(--hh-avatar-bg, var(--hh-blue));
color: var(--hh-avatar-fg, var(--hh-cream));
font-weight: 800;
font-size: calc(var(--hh-avatar-size, 2.6rem) * 0.36);
text-transform: uppercase;
flex: 0 0 auto;
}
.hh-avatar img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hh-avatar--square { border-radius: var(--hh-radius-sm); }
.hh-avatar-group {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.hh-avatar-group .hh-avatar {
margin-inline-start: -0.6rem;
box-shadow: 0 0 0 2px var(--hh-bg);
}
.hh-avatar-group .hh-avatar:first-child { margin-inline-start: 0; }
/* Tooltip: add data-hh-tip="text" to any focusable element. */
[data-hh-tip] { position: relative; }
[data-hh-tip]::after {
content: attr(data-hh-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 0.55rem);
z-index: 60;
transform: translateX(-50%) translateY(4px);
padding: 0.35rem 0.6rem;
font-family: var(--hh-font-mono);
font-size: var(--hh-type-micro);
font-weight: 400;
line-height: 1.35;
text-transform: none;
white-space: nowrap;
color: var(--hh-paper);
background: var(--hh-ink);
border: 1px solid color-mix(in srgb, var(--hh-paper) 28%, transparent);
border-radius: var(--hh-radius-sm);
opacity: 0;
pointer-events: none;
transition: opacity 160ms var(--hh-ease), transform 160ms var(--hh-ease);
}
[data-hh-tip]:hover::after,
[data-hh-tip]:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.hh-spinner {
display: inline-block;
inline-size: var(--hh-spinner-size, 2.5rem);
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(var(--hh-red) 0 25%, var(--hh-blue) 0 50%, var(--hh-yellow) 0 75%, var(--hh-green) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.5rem + 1px));
mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.5rem + 1px));
animation: hh-spin 1.1s linear infinite;
flex: 0 0 auto;
}
@keyframes hh-spin {
to { transform: rotate(1turn); }
}
.hh-skeleton {
display: block;
block-size: var(--hh-skeleton-h, 1rem);
border-radius: var(--hh-radius-sm);
background: linear-gradient(
100deg,
color-mix(in srgb, currentColor 10%, transparent) 40%,
color-mix(in srgb, currentColor 20%, transparent) 50%,
color-mix(in srgb, currentColor 10%, transparent) 60%
)
0 0 / 200% 100%;
animation: hh-shimmer 1.6s linear infinite;
}
.hh-skeleton--circle {
inline-size: var(--hh-skeleton-h, 2.6rem);
block-size: var(--hh-skeleton-h, 2.6rem);
border-radius: 50%;
}
@keyframes hh-shimmer {
to { background-position: -200% 0; }
}
/* ==========================================================================
Dialog (styles the native