Navpills/styles.css

.template-navpills {

   display: grid;
   gap: 0.5rem; /* Adjusted for better spacing */
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   grid-auto-rows: 3rem;
   font-size: 0.8rem; /* Slightly increased for better visibility */

}

.template-navpill {

   position: relative;
   border: 1px solid #444; /* A lighter border to increase visibility */
   border-radius: 0.5rem; /* Adjusted for a softer look */
   font-weight: 600; /* Bold text for better readability */
   line-height: 1.5; /* Improved line-height for text */
   overflow: hidden;
   background-color: #121212; /* Dark background for contrast */

}

.template-navpill-background {

   position: absolute;
   inset: 0;

}

.template-navpill-background:after {

   content: ;
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, #000, transparent);
   transition: transform 250ms ease;

}

.template-navpill-background img {

   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 250ms ease;
   transition-property: transform;

}

.template-navpill:hover .template-navpill-background::after {

   transform: translateX(-100%);

}

.template-navpill:hover .template-navpill-background img {

   transform: scale(1.1);

}

.template-navpill > a {

   position: relative;
   padding: 0 1.5rem; /* Increased padding for better spacing */
   display: flex;
   align-items: center;
   color: #fff; /* Bright text for strong contrast */
   text-decoration: none;
   height: 100%;

}

.template-navpill > .template-navpill-background + a {

   color: #fff;
   text-shadow: 0 2px 0.2em #000;

}

.template-navpill:hover {

   background: #1e1e1e; /* Slightly lighter background on hover */

}

.template-navpill:active {

   background: #2a2a2a; /* Subtle darkening on active state */

}