/** * Ernesto Theme — Tile Grid * * Generic card-based archive grid. * Classes: .ernesto-tile-grid (the grid wrapper) * .ernesto-card (individual card / element) * .ernesto-badge (category pill on the image) * .ernesto-rubric (category label above the title) * * All colours come from tokens defined in colors.css. * The grid is deliberately token-free for width/padding — the parent * element (.container, .pfsr-container, etc.) controls that. * * High-contrast layout mirrors the hero-slider HC pattern in * shared-child-a11y.css: all cards become horizontal strips * (text left, image right) in a single-column flex layout. * * @package Ernesto * @since 1.1.0 */ /* ── Tile tokens ─────────────────────────────────────────────────────────── */ :root { --ernesto-tile-shadow: 0 0px 1px 0 rgba(0,0,0,.16), 0 0 1px 0 rgba(0,0,0,.08); --ernesto-tile-shadow-hover: 0 8px 16px 0 rgba(0,0,0,.16), 0 0 16px 0 rgba(0,0,0,.08); /* * Dark-mode border: transparent in light mode, a lightened surface colour * in dark mode. light-dark() follows both the OS preference and the * manual Ernesto Customizer toggle (sets color-scheme on ). */ --ernesto-tile-border: light-dark( transparent, color-mix(in srgb, var(--bg-surface, #1e1e1e) 80%, #fff) ); /* Composed shadow tokens (border layer + depth layer) */ --ernesto-tile-box-shadow: inset 0 0 0 1px var(--ernesto-tile-border), var(--ernesto-tile-shadow); --ernesto-tile-box-shadow-hover: inset 0 0 0 1px var(--ernesto-tile-border), var(--ernesto-tile-shadow-hover); --ernesto-tile-gap: 1.5rem; --ernesto-tile-pad: 1rem; --ernesto-tile-title: clamp(1rem, 1.6vw, 1.25rem); } /* ── Grid ────────────────────────────────────────────────────────────────── */ /* * No max-width or padding here — the parent element (.container, * .pfsr-container, etc.) handles containment. */ .ernesto-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ernesto-tile-gap); } /* ── Card ────────────────────────────────────────────────────────────────── */ .ernesto-card { display: flex; flex-direction: column; text-decoration: none; /* no underline — title underlines on hover instead */ color: inherit; background: var(--bg-surface, #fff); box-shadow: var(--ernesto-tile-box-shadow); transition: box-shadow 0.2s ease; position: relative; /* anchor for ::after dark-mode border */ } /* * ::after overlay carries the dark-mode border so it renders above * child backgrounds (same technique as .pfsr-skyscraper). */ .ernesto-card::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--ernesto-tile-border); pointer-events: none; z-index: 5; } .ernesto-card:hover, .ernesto-card:focus { box-shadow: var(--ernesto-tile-box-shadow-hover); text-decoration: none; outline: none; } .ernesto-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* ── Card image ──────────────────────────────────────────────────────────── */ .ernesto-card__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex-shrink: 0; } .ernesto-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .ernesto-card:hover .ernesto-card__img img { transform: scale(1.04); } .ernesto-card__img-placeholder { width: 100%; height: 100%; min-height: 160px; background: var(--bg-alt, #e9ecef); } /* ── Badge (category pill on image) ─────────────────────────────────────── */ .ernesto-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 6; /* above the ::after border overlay */ display: inline-block; background: var(--color-secondary, var(--color-primary)); color: #fff; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; padding: 0.2em 0.55em; pointer-events: none; } /* ── Card body ───────────────────────────────────────────────────────────── */ .ernesto-card__body { padding: var(--ernesto-tile-pad); flex: 1; display: flex; flex-direction: column; background: var(--bg-surface, #fff); /* needed so ::after border shows above it */ } /* ── Rubric (category label above title) ─────────────────────────────────── */ .ernesto-rubric { display: block; font-family: var(--font-heading, inherit); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 0.3rem; line-height: 1; } /* ── Title ───────────────────────────────────────────────────────────────── */ .ernesto-card__title { font-family: var(--font-heading, inherit); font-size: var(--ernesto-tile-title); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-heading, #111); margin: 0 0 0.4rem; transition: color 0.15s ease; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ernesto-card:hover .ernesto-card__title, .ernesto-card:focus .ernesto-card__title { color: var(--color-primary); text-decoration: underline; } /* ── Lead / excerpt ──────────────────────────────────────────────────────── */ .ernesto-card__lead { font-size: 1rem; line-height: 1.5; color: var(--text-main); margin: 0 0 0.5rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Meta: date / author ─────────────────────────────────────────────────── */ .ernesto-card__meta { display: block; font-size: 0.7rem; color: var(--text-muted, #888); margin-top: auto; padding-top: 0.4rem; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .ernesto-tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ernesto-tile-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ HIGH CONTRAST All cards → horizontal strips (text left, image right). Mirrors the hero-slider pattern in shared-child-a11y.css. ══════════════════════════════════════════════════════════════════════════ */ body.high-contrast .ernesto-tile-grid { display: flex !important; flex-direction: column !important; gap: 1rem !important; } body.high-contrast .ernesto-card { flex-direction: row !important; min-height: 160px; box-shadow: none !important; outline: 2px solid #000066 !important; background: #fef8e3 !important; text-decoration: none !important; /* suppress global HC a { underline } */ } body.high-contrast .ernesto-card::after { display: none !important; } body.high-contrast .ernesto-card:hover, body.high-contrast .ernesto-card:focus { box-shadow: none !important; outline: 3px solid #000066 !important; text-decoration: none !important; } body.high-contrast .ernesto-card__img { flex: 0 0 42% !important; order: 2 !important; aspect-ratio: auto !important; } body.high-contrast .ernesto-card__img img { height: 100%; object-fit: cover; border-radius: 6px; } body.high-contrast .ernesto-card__body { flex: 1 !important; order: 1 !important; background: #fef8e3 !important; color: #000066 !important; } body.high-contrast .ernesto-card__title { color: #000066 !important; text-shadow: none !important; } body.high-contrast .ernesto-card:hover .ernesto-card__title, body.high-contrast .ernesto-card:focus .ernesto-card__title { color: #000066 !important; text-decoration: underline !important; } body.high-contrast .ernesto-card__lead, body.high-contrast .ernesto-card__meta { color: #000066 !important; } body.high-contrast .ernesto-badge { background: #000066 !important; color: #FFF9E5 !important; border: 1px solid #FFF9E5 !important; } body.high-contrast .ernesto-rubric { color: #000066 !important; text-decoration: underline !important; } /* ── @media (prefers-contrast: high) — mirrors body.high-contrast ─────── */ @media (prefers-contrast: high) { .ernesto-tile-grid { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .ernesto-card { flex-direction: row !important; min-height: 160px; box-shadow: none !important; outline: 2px solid #000066 !important; background: #fef8e3 !important; text-decoration: none !important; } .ernesto-card::after { display: none !important; } .ernesto-card:hover, .ernesto-card:focus { outline: 3px solid #000066 !important; text-decoration: none !important; } .ernesto-card:hover .ernesto-card__title, .ernesto-card:focus .ernesto-card__title { text-decoration: underline !important; } .ernesto-card__img { flex: 0 0 42% !important; order: 2 !important; aspect-ratio: auto !important; } .ernesto-card__img img { height: 100%; object-fit: cover; } .ernesto-card__body { flex: 1 !important; order: 1 !important; background: #fef8e3 !important; color: #000066 !important; } .ernesto-card__title, .ernesto-card__lead, .ernesto-card__meta { color: #000066 !important; text-shadow: none !important; } .ernesto-badge { background: #000066 !important; color: #FFF9E5 !important; } .ernesto-rubric { color: #000066 !important; text-decoration: underline !important; } } /* ══════════════════════════════════════════════════════════════════════════ POSTS NAVIGATION (the_posts_navigation()) Prev left, Next right, generous top padding. ══════════════════════════════════════════════════════════════════════════ */ .posts-navigation .nav-links { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 2.5rem; } .posts-navigation .nav-previous { text-align: left; } .posts-navigation .nav-next { text-align: right; margin-left: auto; /* push all the way right when prev is absent */ }