CSS: Infobox and Miscellaneous

infobox-miscellaneous.css

/* Infobox and Miscellaneous */
/* Infobox Main */
      .infobox { /* Main styling */
        border: 0;
        border-radius: 8px;
        background-color: #f8f8f8;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        float: right;
        width: 300px;
        margin: 0 0 20px 20px;
        font-size: 0.9rem;
        overflow: hidden;
        box-sizing: border-box;
      }
      
      .infobox-header { /* Main header styling */
        background: linear-gradient(135deg, #902424, #b03030);
        color: white;
        padding: 10px;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
      }
      
      .infobox-subheader { /* Show/Hide spoilers header styling */
        display: block;
        background-color: #902424;
        color: white;
        padding: 8px 10px;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
      }
      .infobox-subheader:hover { background-color: #a52a2a; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.2); } /* Hover enter animation */
      .infobox-subheader:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* Hover exit animation */
    
      .infobox img { /* Image styling */
        display:block;
        width:100%;
        height:auto;
      }
  
      .infobox-caption { /* Caption styling */
        text-align: center;
        font-size: 0.8rem;
        color: #a6a6a6;
        margin: 4px 4px 4px 4px;
        font-style: italic;
      }
    
      .infobox-dl { /* Description list for the infobox labels/values */
        margin: 0;
        padding: 0;
        display: block;
      }
    
      .infobox-row { /* Group <dt> and <dd> together so their borders match */
        display: grid;
        grid-template-columns: 110px 1fr;
        align-items: start;
        border-bottom: 1px solid #a6a6a6;
      }
      .infobox-row:last-child { /* Remove bottom border */
        border-bottom: none;
      }
    
      .infobox-row dt, /* Shared label and value styling */
      .infobox-row dd {
        padding: 8px 10px;
        margin: 0;
        box-sizing: border-box;
      }
    
      .infobox-row dt { /* Make label bold */
        font-weight: 700;
      }
    
      .infobox-row dd p { /* Don't let <p> ruin anything */
        margin: 0;
      }
  
      .infobox li { /* List in line with rest of the text */
        margin-left: 14px;
      }
    
      /* Switch between different infoboxes (spoiler/non-spoiler) */
      .info-set-2 { display: none; }
      .toggle-checkbox:checked ~ .info-set-1 { display: none; }
      .toggle-checkbox:checked ~ .info-set-2 { display: block; }

/* Infobox Dark Mode */
      /* Dark mode styling */
      html.dark-mode .infobox { background-color: #343434; }
      html.dark-mode .infobox-row { border-bottom-color: #5a5a5a; }

/* Infobox Mobile */
       @media screen and (max-width: 600px) { /* Wider on mobile */
        .infobox {
          width: 100%;
          margin: 0 0 20px 0;
          float: none;
        }
      }

/* Mobile Scroll Hint */
    /* Mobile Scroll Hint - Moved outside @media for global default hide */
    .mobile-scroll-note {
      display: none; /* Hidden by default (desktop) */
      font-style: italic;
      font-size: 0.8rem;
      color: #666;
      text-align: center;
      margin: 1rem 0 0.5rem;
      padding: 0.25rem;
    }
    @media screen and (max-width: 600px) {
      .mobile-scroll-note {
        display: block; /* Show on mobile */
      }
    }
    /* Dark mode adaptation */
    html.dark-mode .mobile-scroll-note {
      color: #aaa; /* Lighter gray for visibility */
    }

/* SEO Hidden Link Description */
    .og-desc {
    display:none;
    }

/* Page Under Construction Box */
    .puc {
      box-sizing: border-box;
      max-width: 95%;
      margin: 0 auto 20px;
      padding: 12px 16px;
      background-color: #f5f6fa; /* light gray background */
      border-left: 6px solid #5865F2; /* Discord blurple stripe */
      border-radius: 6px;
      color: #23272A; /* Discord dark text */
      text-align: center;
      font: bold 0.85rem Arial, sans-serif;
      box-shadow: 0 2px 6px rgba(0,0,0,.1);
    }
    .puc p {
      margin: 0;
    }
    .puc strong {
      color: #5865F2; /* blurple emphasis */
    }
    .puc a {
      color: #5865F2; /* blurple link */
      text-decoration: underline;
      font-weight: bold;
    }

/* Global Superscript (Override) */
    sup { /* Removes extra row height when using superscript */
      line-height: 0;
      font-size: 0.75em;
    }