Template:Mainpage.css

/* ===== Main Page Container Styling ===== */

1. mainpage-header {

   display: flex;
   align-items: center;
   justify-content: center;
   background: #f8f8ff;
   border: 2px solid #cc0000;
   border-radius: 12px;
   padding: 15px;
   font-size: 120%;

}

/* Logo in header */

1. mainpage-header .header-logo {

   flex: 0 0 auto;
   margin-right: 15px;

}

/* Header text */

1. mainpage-header .header-text {

   flex: 1;

}

/* ===== Category Boxes ===== */ .mainpage-categories {

   display: flex;
   gap: 10px;
   justify-content: center;
   margin-top: 15px;

}

.mainpage-categories .category-box {

   flex: 1;
   display: flex;
   padding: 10px;
   border: 1px solid #aaa;
   border-radius: 8px;
   /* Auto height to match tallest in the row */
   align-items: center;
   background: #fff; /* Default, can override per category */
   transition: box-shadow 0.2s;

}

/* Text inside category */ .mainpage-categories .category-text {

   flex: 1;

}

/* Icon column */ .mainpage-categories .category-icon {

   flex: 0 0 50px;
   display: flex;
   align-items: center;
   justify-content: center;

}

/* Hover effect like clickable cards */ .mainpage-categories .category-box:hover {

   box-shadow: 0 2px 8px rgba(0,0,0,0.2);
   cursor: pointer;

}

/* Optional: category-specific background colors */ .category-pokehero { background: #eaf9e8; } .category-moves { background: #e8f1fa; } .category-items { background: #fff3e6; } .category-locations{ background: #f6e8fa; } .category-characters { background: #fceaea; } .category-mechanics { background: #eaf8f9; }

/* ===== Discord Box Styling ===== */

1. mainpage-discord {

   text-align: center;
   margin-top: 20px;

}

1. mainpage-discord .discord-box {

   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid #5865F2;
   border-radius: 8px;
   padding: 8px 12px;
   background: #f0f2ff;
   transition: box-shadow 0.2s;

}

1. mainpage-discord .discord-box img {

   vertical-align: middle;

}

1. mainpage-discord .discord-box:hover {

   box-shadow: 0 2px 8px rgba(0,0,0,0.2);
   cursor: pointer;

}

/* Remove extra paragraph margins in Discord box */

1. mainpage-discord p {

   margin: 0;

}