Template:SiteMapBox/styles.css

/* =========================
   Main Page Sitemap Boxes
   ========================= */
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.sm-box a {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: block;
  padding: 0;
  margin: 0;

  background: none;
  border: none;
  text-decoration: none;
}

.sm-grid > .sm-box:hover {
  filter: brightness(0.95) saturate(1.1);
}

.sm-box-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.sm-box {
  position: relative;

  padding: 10px 14px;
  background: #f6f8e6;
  border: 1px solid #c9d7a8;
  border-radius: 12px;
}

.sm-box-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.sm-box-inner {
  display: flex;
  align-items: center;
  gap: 8px;

  position: relative;
  z-index: 1;
  font-weight: 600;
}

/* =========================
   Viva Piñata Sitemap Colors
   ========================= */

/* 1 — Red */
.sm-grid > .sm-box:nth-of-type(7n + 1) {
  background: #f6c1c1;
  border-color: #d86a6a;
}

/* 2 — Purple */
.sm-grid > .sm-box:nth-of-type(7n + 2) {
  background: #e0c9f5;
  border-color: #a07acb;
}

/* 3 — Green */
.sm-grid > .sm-box:nth-of-type(7n + 3) {
  background: #dff1c9;
  border-color: #9cbc5a;
}

/* 4 — Orange */
.sm-grid > .sm-box:nth-of-type(7n + 4) {
  background: #ffd9b3;
  border-color: #e49b4f;
}

/* 5 — Yellow */
.sm-grid > .sm-box:nth-of-type(7n + 5) {
  background: #fff2b3;
  border-color: #e6c75f;
}

/* 6 — Pink */
.sm-grid > .sm-box:nth-of-type(7n + 6) {
  background: #ffd1e6;
  border-color: #e48ab2;
}

/* 7 — Blue */
.sm-grid > .sm-box:nth-of-type(7n + 7) {
  background: #d6e8ff;
  border-color: #7fa9e6;
}

/* Mobile - 2 columns */
@media (max-width: 700px) {
  .sm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .sm-box {
    padding: 8px 10px;
  }

  .sm-box-inner {
    gap: 6px;
    font-size: 0.95em;
  }
}