/*!
* 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 Bauhaus
* 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);
}
.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;
border-radius: var(--hh-radius) var(--hh-radius) 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;
inset-block-start: 0.18rem;
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);
}
.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-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