MediaWiki:Common.css: Difference between revisions

Revision as of 14:03, 14 November 2025

/* ===== CryptoRootsMX – Vector (legacy) full tan theme ===== */




/* Header + footer */
#mw-head, #footer {
  color:#2E2A26 !important;
}

/* Tabs (Read / Edit / View history) */
.vector-menu-tabs li a {
  color: #017C74 !important;
}
.vector-menu-tabs li.selected a {
  background: transparent !important;
  border-bottom: 3px solid #017C74 !important;
  color: #017C74 !important;
}

/* Headings & links */
h1, h2, h3, h4 { color:#502583 !important; font-family: "Georgia","Garamond",serif; }
a, a:visited { color:#017C74 !important; }
a:hover { color:#B39D68 !important; }

/* === CryptoRootsMX gem styles (WAF-safe) === */
.gem-grid { width:100%; background:#FAEEDC; border:1px solid #E6CFAE; text-align:center; }

/* shared cell formatting */
.gem-cell { padding:12px; vertical-align:top; }
.gem-cell img { border-radius:6px; padding:2px; background:#FAEEDC; }

/* frames by role */
.gem-emerald-cell img  { border:4px solid #046307; } /* Confirmed Jews */
.gem-ruby-cell img     { border:4px solid #7D2181; } /* Conquistadors & Settlers */
.gem-sapphire-cell img { border:4px solid #0B3C8D; } /* Saints */

/* titles underneath (optional color without extra HTML) */
.gem-title { display:block; margin-top:8px; font-weight:bold; color:#2E2A26; }
.gem-emerald-cell .gem-title  { color:#046307; }
.gem-ruby-cell .gem-title     { color:#7D2181; }
.gem-sapphire-cell .gem-title { color:#0B3C8D; }

/* subtle hover without shadows */
.gem-cell:hover img { opacity:0.95; outline:2px solid rgba(0,0,0,0.05); }

.gem-cell:hover img {
  transform: scale(1.02);
  transition: all 0.25s ease;
  opacity: 0.95;
}
.gem-emerald-cell img { border: 4px solid #046307; box-shadow: 0 0 10px rgba(4,99,7,0.4); }
.gem-ruby-cell img { border: 4px solid #7D2181; box-shadow: 0 0 10px rgba(125,33,129,0.4); }
.gem-sapphire-cell img { border: 4px solid #0B3C8D; box-shadow: 0 0 10px rgba(11,60,141,0.4); }


/* Confirmed Surnames grid (wider cards) */
.surname-grid {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 10px;
  text-align: center;
}

.surname-cell {
  background: #FAEEDC;
  border: 1px solid #E6CFAE;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 500;
  color: #502583;
  font-family: 'Georgia', serif;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.1s ease;
  width: 160px;         /* ← widen this to your liking */
  min-width: 150px;
}

.surname-cell:hover {
  transform: scale(1.05);
  background: #F6EAD6;
}


/* ===== Book Recommendations grid (Categories) ===== */

/* Section title */
.book-header {
  text-align: center;
  font-family: "Georgia","Garamond",serif;
  font-size: 1.7rem;
  margin: 1.5rem 0 0.75rem;
  color: #502583;
}

/* Turn the wikitable into a card grid */
table.bookgrid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 16px 14px;   /* space between cards */
  background: transparent;
  border: 0;
}

/* kill default wikitable borders/background */
table.bookgrid > * > tr > th,
table.bookgrid > * > tr > td {
  border: 0;
  background: transparent;
  padding: 0;
}

/* Each card */
.book-cell {
  background: #FAEEDC;
  border: 1px solid #E6CFAE;
  border-radius: 14px;
  padding: 14px 12px 10px;
  text-align: center;
  vertical-align: top;
  font-family: "Georgia","Garamond",serif;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-width: 210px;
}

/* cover images inside cards */
.book-cell img {
  display: block;
  margin: 0 auto 10px;
  max-width: 210px;
  height: auto;
  border-radius: 8px;
  padding: 2px;
  background: #FAEEDC;
}

/* colored frames per category */
.book-emerald-cell img  { border: 4px solid #046307; box-shadow: 0 0 10px rgba(4,99,7,0.35); }
.book-ruby-cell img     { border: 4px solid #7D2181; box-shadow: 0 0 10px rgba(125,33,129,0.35); }
.book-sapphire-cell img { border: 4px solid #0B3C8D; box-shadow: 0 0 10px rgba(11,60,141,0.35); }
.book-amethyst-cell img { border: 4px solid #b35bc8; box-shadow: 0 0 10px rgba(179,91,200,0.35); }
.book-topaz-cell img    { border: 4px solid #c48c32; box-shadow: 0 0 10px rgba(196,140,50,0.35); }

/* title text under each cover */
.book-title {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #502583;
}

/* slight color accents per category (optional) */
.book-emerald-cell .book-title  { color: #046307; }
.book-ruby-cell .book-title     { color: #7D2181; }
.book-sapphire-cell .book-title { color: #0B3C8D; }
.book-amethyst-cell .book-title { color: #7a35d4; }
.book-topaz-cell .book-title    { color: #a56b20; }

/* hover effect */
.book-cell:hover {
  transform: translateY(-3px);
  background: #F6EAD6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.book-cell:hover img {
  opacity: 0.96;
}


/* ===== single book grid ===== */
/* ===== single book grid ===== */

.singlebook-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  width: 100%;
}

/* image area */
.singlebook-div1 {
  grid-area: 1 / 1 / 6 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.singlebook-div1 img {
  width: 700px !important;
  height: auto !important;
}

/* text area */
.singlebook-div2 {
  grid-area: 1 / 3 / 4 / 6;
  padding: 2rem;
}

/* BUY NOW area */
.singlebook-div3 {
  grid-area: 4 / 3 / 5 / 6;
  padding: 2rem;
  display: flex;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  text-align: center;        /* keeps inline content centered too */
}


/* optional bottom area */
.singlebook-div4 {
  grid-area: 5 / 3 / 6 / 6;
  padding: 2rem;
}

/* button styling */
.buy-now-btn {
  display: inline-block;
  padding: 14px 28px;
  background: #c8f9b5;
  border: 2px solid #51a037;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #1a3a12;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-family: "Arial Rounded MT Bold", sans-serif;
  transition: 0.2s ease;
}

.buy-now-btn:hover {
  background: #a3f085;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}