shelving/ui/block/Card.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.card {
		/* Identity */
		--color-black: var(--card-color-black, inherit);
		--color-dark: var(--card-color-dark, inherit);
		--color-vivid: var(--card-color-vivid, inherit);
		--color-light: var(--card-color-light, inherit);
		--color-white: var(--card-color-white, inherit);

		/* Box */
		position: relative;
		margin-inline: 0;
		margin-block: var(--card-spacing, var(--spacing-paragraph));
		border: var(--card-thickness, var(--thickness, var(--stroke-normal))) solid var(--color-vivid);
		padding: var(--card-padding, var(--space-normal));
		border-radius: var(--card-radius, var(--radius-normal));

		/* Style — `bg=light / text=dark` (2-step pair). */
		background-color: var(--color-light);
		color: var(--color-dark);
		box-shadow: var(--card-shadow, none);
		transition: border-color var(--duration-fast);

		/* Hover/focus affordance driven by the overlay link/button. */
		&:has(.overlay:hover) {
			border-color: var(--color-focus);
		}
		&:has(.overlay:focus-visible) {
			outline: var(--stroke-focus) solid var(--color-focus);
			outline-offset: 2px;
		}

		/* Inline interactive elements lift above the overlay so they remain clickable. */
		:where(& a:not(.overlay), & button:not(.overlay)) {
			position: relative;
			z-index: 2;
		}
	}

	.overlay {
		/* Box */
		position: absolute;
		inset: 0;
		z-index: 1;
		border: 0;

		/* Style */
		background: transparent;
		cursor: pointer;

		/* Typography — hide the link's text visually but keep it in the accessibility tree. */
		color: transparent;
		font: inherit;
		overflow: hidden;
		text-decoration: none;
		text-align: start;
		white-space: nowrap;

		/* The card itself shows the focus outline via :has() — the link doesn't need its own. */
		&:focus-visible {
			outline: 0;
		}
	}
}

@layer overrides {
	.card {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}