Template:Home/FeaturedRegionCard/styles.css
Template page
More actions
/* ================================
FeaturedRegionCard — TemplateStyles-safe CSS
================================ */
/* Grid wrapper (used on Main Page) */
.fa-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
/* Card shell */
.fa-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
transition: box-shadow .2s ease;
height: 100%;
}
.fa-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
/* --- 16:9 banner with cover --- */
.fa-media {
position: relative;
overflow: hidden;
background: #f3f4f6;
line-height: 0; /* remove inline-img baseline gap */
border-bottom: 1px solid #eef2f7;
}
.fa-media::before {
content: "";
display: block;
width: 100%;
padding-top: 56.25%; /* 16:9 ratio */
}
/* Fill the box */
.fa-img { position: absolute; inset: 0; }
.fa-img,
.fa-img a,
.fa-media .image,
.fa-media .mw-file-description {
display: block;
width: 100%;
height: 100%;
}
/* Actual <img> element */
.fa-media img,
.fa-media .mw-file-element {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
object-position: center center;
}
/* Placeholder */
.fa-img--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
font-size: .9rem;
}
/* Body */
.fa-body {
padding: 14px 16px 16px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Title (now directly under image) */
.fa-title {
margin: 8px 0 2px 0;
line-height: 1.2;
font-size: 1.125rem; /* 18px */
color: #1f2937;
}
.fa-title a { color: inherit; text-decoration: none; }
.fa-title a:hover { text-decoration: underline; }
/* Kicker (path) */
.fa-kicker {
margin: 0 0 8px 0;
color: #6b7280;
font-size: .88rem;
line-height: 1.3;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
}
.k-item { display: inline-flex; align-items: center; gap: 4px; }
/* Province line (avoid redundant country) */
.fa-sub { margin: 0 0 6px 0; color: #6b7280; }
/* Meta (dot-separated) */
.fa-provenance {
margin: 0 0 8px 0;
color: #64748b;
font-size: .88rem;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.fa-provenance .pv-item {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.fa-provenance .pv-item + .pv-item::before {
content: "•";
padding: 0 6px;
color: #9ca3af;
}
/* Hook (one-line pitch) */
.fa-hook { margin: 0; color: #334155; font-size: .95rem; }
/* Footer (pinned) */
.fa-foot {
margin-top: auto; /* push footer to bottom */
border-top: 1px solid #e5e7eb;
padding-top: 10px;
}
/* Statusline holds three pills in a row (wraps on mobile) */
.fa-statusline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 6px 0;
font-weight: 600;
}
.fa-foot-sep { height: 1px; background: #e5e7eb; margin: 8px 0; }
/* CTA */
.fa-cta { margin: 0; font-weight: 600; }
.fa-cta a {
color: #2d5016;
text-decoration: none;
border-bottom: 1px solid rgba(45,80,22,.3);
padding-bottom: 1px;
}
.fa-cta a:hover { border-bottom-color: rgba(45,80,22,.6); }
.fa-cta .fa-missing { color: #6b7280; }
/* ---------- Pills (shared base) ---------- */
.pill,
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 600;
font-size: .9rem;
line-height: 1;
border: 1px solid #e5e7eb;
background: #f3f4f6;
color: #1f2937;
}
/* Tiny dot (used by status + area) */
.pill-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #9ca3af;
}
/* ---------- Conservation status (colored) ---------- */
.status-pill {
background: #f3f4f6;
color: #374151;
}
.sp--stable { background: #e8f5e9; color: #1b5e20; border-color: #c8e6c9; }
.sp--vulnerable { background: #fff7ed; color: #7c2d12; border-color: #fed7aa; }
.sp--endangered { background: #fff1f2; color: #7f1d1d; border-color: #fecdd3; }
.sp--critical { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.sp--extinct { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }
.sp--unknown { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.sp--stable .pill-dot { background: #2e7d32; }
.sp--vulnerable .pill-dot { background: #b45309; }
.sp--endangered .pill-dot { background: #b91c1c; }
.sp--critical .pill-dot { background: #991b1b; }
.sp--extinct .pill-dot { background: #111827; }
.sp--unknown .pill-dot { background: #9ca3af; }
/* ---------- Growing area (neutral) ---------- */
.pill--area {
background: #f8fafc; /* light neutral */
border-color: #e5e7eb;
color: #1f2937;
}
/* keep the dot visible but neutral */
.pill--area .pill-dot { background: #6b7280; }
/* ---------- Accessions (neutral number + label) ---------- */
.pill--access {
background: #eff6ff; /* light blue */
border-color: #dbeafe; /* blue-100 */
color: #1f2937;
}
.pill--access .pill-dot { display: none; }
.pill--access .pill-num { font-weight: 700; }
.pill--access .pill-label {
font-weight: 600;
color: #6b7280;
font-size: .9rem;
}
/* Small screens */
@media (max-width: 480px) {
.fa-body { padding: 12px 14px 14px 14px; gap: 6px; }
.fa-title { font-size: 1.05rem; }
.fa-provenance { font-size: .86rem; }
}
/* Hard cap the media height so wide screens don't blow it up */
.fa-media { max-height: 420px; }
@media (max-width: 600px) { .fa-media { max-height: 240px; } }
/* ==== Featured Region Cards: tighten copy + spacing ==== */
/* small gap below the "Featured Growing Regions" heading */
.mw-parser-output h2 + .fa-grid,
.mw-parser-output h2 + .fr-grid { margin-top: 10px; }
/* make the card’s content pack tighter */
.mw-parser-output .fa-card,
.mw-parser-output .fr-card {
display: flex;
flex-direction: column;
}
/* reduce inner padding a touch */
.mw-parser-output .fa-card .fa-content,
.mw-parser-output .fr-card .fr-content { padding: 14px 16px; }
/* tighter body text: slightly smaller + shorter leading + trimmed margins */
.mw-parser-output .fa-card .fa-body,
.mw-parser-output .fr-card .fr-body {
font-size: .95rem;
line-height: 1.45;
color: #495057;
margin: 6px 0 6px 0;
}
.mw-parser-output .fa-card .fa-body p,
.mw-parser-output .fr-card .fr-body p { margin: 0; }
/* keep pills/footnote pinned to the bottom without leaving excess gap */
.mw-parser-output .fa-card .fa-pills,
.mw-parser-output .fr-card .fr-pills,
.mw-parser-output .fa-card .fa-meta,
.mw-parser-output .fr-card .fr-meta,
.mw-parser-output .fa-card .fa-footer,
.mw-parser-output .fr-card .fr-footer { margin-top: auto; }
/* optional: shave a bit of vertical space on the pills row */
.mw-parser-output .fa-card .fa-pills,
.mw-parser-output .fr-card .fr-pills { gap: 6px; }
/* keep card heights reasonable (remove if you want fully auto heights) */
.mw-parser-output .fa-card,
.mw-parser-output .fr-card { min-height: 0; }