Template:Home/FeaturedRegionCard/styles.css: Difference between revisions

Latest revision as of 22:57, 19 January 2026

/* Featured Region Cards (Home) */

.fa-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin:12px 0 24px;
}

@media (max-width: 1024px){
  .fa-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .fa-grid{ grid-template-columns:1fr; }
}

/* Card */
.fa-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .2s ease;
  height:100%;
}

.fa-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

/* Media */
.fa-media{
  position:relative;
  background:#f3f4f6;
  border-bottom:1px solid #eef2f7;
}

/* 16:9 ratio */
.fa-media::before{
  content:"";
  display:block;
  width:100%;
  padding-top:56.25%;
}

.fa-img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* MediaWiki file wrapper quirks */
.fa-img a,
.fa-img .image,
.fa-img .mw-file-element,
.fa-img img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  object-position:center;
}

/* Placeholder that still looks designed */
.fa-img--placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  color:#6b7280;
  background:
    radial-gradient(1200px 300px at 10% 0%, rgba(45,106,79,.18), transparent 60%),
    radial-gradient(900px 260px at 90% 10%, rgba(16,185,129,.14), transparent 55%),
    #f3f4f6;
}

/* Body */
.fa-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px 16px;
  min-height:0;
}

/* Title */
.fa-title{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.25;
}

.fa-title a{
  color:#1f4d36; /* brand-ish green */
  text-decoration:none;
}

.fa-title a:hover{
  text-decoration:underline;
}

/* Kicker */
.fa-kicker{
  margin:0;
  font-size:.85rem;
  color:#6b7280;
}

.k-item{
  display:inline-block;
  line-height:1.35;
}

.fa-hook{
  margin:0;
  color:#374151;
  font-size:.93rem;
  line-height:1.5;

  /* 3-line clamp without webkit */
  display:block;
  max-height:4.5em;   /* 1.5 * 3 lines */
  overflow:hidden;
}

/* Footer pinned to bottom */
.fa-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:4px;
}

.fa-foot-sep{
  height:1px;
  background:#eef2f7;
}

/* Status line */
.fa-statusline{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Pills */
.status-pill,
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#374151;
  line-height:1;
}

.pill-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#9ca3af;
}

/* Status variants */
.sp--endangered{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); }
.sp--endangered .pill-dot{ background:#ef4444; }

.sp--vulnerable{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.28); }
.sp--vulnerable .pill-dot{ background:#f59e0b; }

.sp--near\ threatened,
.sp--near-threatened{ background:rgba(234,179,8,.10); border-color:rgba(234,179,8,.28); }
.sp--near\ threatened .pill-dot,
.sp--near-threatened .pill-dot{ background:#eab308; }

.sp--least\ concern,
.sp--least-concern{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.28); }
.sp--least\ concern .pill-dot,
.sp--least-concern .pill-dot{ background:#10b981; }

.sp--unknown{ background:#f3f4f6; border-color:#e5e7eb; }
.sp--unknown .pill-dot{ background:#9ca3af; }

.pill--access .pill-num{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* CTA */
.fa-cta{
  margin:0;
  font-size:.9rem;
}

.fa-cta a{
  color:#1f4d36;
  text-decoration:none;
  font-weight:600;
}

.fa-cta a:hover{
  text-decoration:underline;
}