/* cards.css — pa.gf.cx / audrey / dare portfolio card primitive
*
* Three variants:
* .card.card--system thumb + body (e.g. pa.gf.cx landing system cards)
* .card.card--stat label + big value + sub (e.g. status dashboards)
* .card.card--tile compact tile with title + meta (e.g. category landings)
*
* Plus the grid layout:
* .card-grid responsive auto-fill grid (one wrapper for all variants)
*
* Theming via CSS custom properties — pull from portfolio's existing
* --bg-card / --line-strong / --accent / --ink etc., with fallbacks so
* cards.css also works on bare HTML without the portfolio var set.
*
* Imports:
*
*
* v0.1.0 · 2026-05-24
*/
:root {
--card-bg: var(--bg-card, rgba(255, 255, 255, 0.6));
--card-bg-warm: var(--bg-warm, #ebe3d5);
--card-border: var(--line-strong, rgba(26, 24, 22, 0.32));
--card-line: var(--line, rgba(26, 24, 22, 0.12));
--card-accent: var(--accent, #2c4a3a);
--card-ink: var(--ink, #1a1816);
--card-ink-soft: var(--ink-soft, #5a544d);
--card-sans: var(--sans, 'Atkinson Hyperlegible', system-ui, sans-serif);
--card-serif: var(--serif, 'Newsreader', Georgia, serif);
--card-mono: var(--mono, ui-monospace, 'SF Mono', monospace);
--card-radius: 6px;
--card-gap: 18px;
--card-grid-min: 220px;
}
/* ────────────────────────────────────────────────────────────
* Grid layout — one container for all card variants
* ──────────────────────────────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min), 1fr));
gap: var(--card-gap);
}
/* Optional grid widths — opt-in via additional class */
.card-grid--narrow { --card-grid-min: 160px; }
.card-grid--wide { --card-grid-min: 280px; }
/* ────────────────────────────────────────────────────────────
* Base card — shared by all variants
* ──────────────────────────────────────────────────────────── */
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease;
font-family: var(--card-sans);
}
/* Anchor-cards (.card is on an ) — hover signals interactivity
* via border-color shift, NOT transform (per Dan's "1px shift jarring"
* feedback, captured 2026-05-21). */
a.card:hover,
.card--hoverable:hover {
border-color: var(--card-accent);
}
/* Placeholder cards — dashed border, lower opacity */
.card--placeholder {
border-style: dashed;
background: transparent;
opacity: 0.85;
}
/* ────────────────────────────────────────────────────────────
* Variant: --system (thumb + body, the pa.gf.cx landing pattern)
* ──────────────────────────────────────────────────────────── */
.card--system {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 520px) {
.card--system { grid-template-columns: 140px 1fr; }
}
.card--system .card__thumb {
background: var(--card-bg-warm);
overflow: hidden;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.card--system .card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(1) contrast(1.05);
transition: filter 0.3s ease;
}
.card--system:hover .card__thumb img,
.card--system .card__thumb:hover img {
filter: grayscale(0) contrast(1);
}
@media (min-width: 520px) {
.card--system .card__thumb {
aspect-ratio: auto;
height: 100%;
min-height: 130px;
}
}
/* Empty-state thumb — "—" placeholder for not-yet-photographed items */
.card--system .card__thumb--empty {
color: var(--card-ink-soft);
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
text-align: center;
padding: 1rem;
background: transparent;
}
.card--system .card__thumb--empty::before {
content: "—";
display: block;
font-size: 22px;
margin-bottom: 6px;
}
.card--system .card__body {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.card--system .card__title {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.card--system .card__title em {
font-family: var(--card-serif);
font-style: italic;
color: var(--card-accent);
font-weight: 400;
}
.card--system .card__sub {
font-size: 14px;
color: var(--card-ink-soft);
line-height: 1.5;
margin: 0;
}
.card--system .card__status {
display: inline-block;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 700;
color: var(--card-accent);
background: rgba(44, 74, 58, 0.08);
padding: 3px 10px;
border-radius: 3px;
align-self: flex-start;
}
.card--system .card__last {
font-size: 13px;
line-height: 1.5;
color: var(--card-ink);
margin-top: 4px;
}
/* ────────────────────────────────────────────────────────────
* Variant: --stat (label + big value + sub, status-dashboard pattern)
* ──────────────────────────────────────────────────────────── */
.card--stat {
padding: 14px 18px;
background: #fff;
border-color: var(--card-line);
}
.card--stat .card__label {
font-size: 10.5px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--card-ink-soft);
font-weight: 700;
margin-bottom: 4px;
}
.card--stat .card__value {
font-family: var(--card-serif);
font-size: 22px;
line-height: 1.1;
color: var(--card-ink);
}
.card--stat .card__sub {
font-size: 11px;
color: var(--card-ink-soft);
margin-top: 4px;
line-height: 1.4;
}
/* Optional inline progress bar inside a stat card */
.card--stat .card__bar {
height: 10px;
background: var(--card-bg-warm);
border-radius: 5px;
overflow: hidden;
margin: 8px 0 0;
}
.card--stat .card__bar-fill {
height: 100%;
background: var(--card-accent);
border-radius: 5px;
transition: width 0.3s ease;
}
/* ────────────────────────────────────────────────────────────
* Variant: --tile (compact title + meta, category-landing pattern)
* ──────────────────────────────────────────────────────────── */
.card--tile {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.card--tile .card__title {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--card-ink);
margin: 0;
}
.card--tile .card__title em {
font-family: var(--card-serif);
font-style: italic;
color: var(--card-accent);
font-weight: 400;
}
.card--tile .card__meta {
font-family: var(--card-mono);
font-size: 12px;
color: var(--card-ink-soft);
margin: 0;
}
.card--tile .card__count {
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--card-ink-soft);
}
/* ────────────────────────────────────────────────────────────
* Print — flatten cards, drop hover-only styling
* ──────────────────────────────────────────────────────────── */
@media print {
.card {
background: none !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
page-break-inside: avoid;
}
.card--system .card__thumb img {
filter: grayscale(1) contrast(1.1) !important;
}
}