Template:Ai/infobox.css

/* Infobox Container */
        .infobox {
            width: 300px;
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); /* Dark gradient background */
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            color: #e2e8f0; /* Light text color */
            border: 1px solid rgba(255, 255, 255, 0.1);
            max-width: 90%; /* Ensure responsiveness on smaller screens */
        }

        /* Header */
        .infobox-header {
            background-color: #4a5568; /* Slightly lighter dark header */
            padding: 1rem; /* 16px */
            text-align: center;
            font-size: 1.25rem; /* 20px */
            font-weight: bold; /* Equivalent to font-weight: 700 */
            color: #ffffff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }

        /* Logo Section */
        .infobox-logo {
            padding: 1rem; /* 16px */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2d3748; /* Darker background for logo */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .infobox-logo img {
            max-width: 150px;
            height: auto;
            border-radius: 8px; /* Slightly rounded logo */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: block; /* Remove extra space below image */
        }

        /* Content Area */
        .infobox-content {
            padding: 1.25rem; /* 20px */
        }

        /* Individual Row in Content */
        .infobox-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.75rem; /* 12px */
            line-height: 1.4;
        }

        /* Label for each row */
        .infobox-label {
            font-weight: bold; /* Equivalent to font-weight: 600 */
            color: #cbd5e0; /* Slightly darker label color */
            flex-shrink: 0;
            margin-right: 1rem; /* 16px */
            white-space: nowrap; /* Prevent label from wrapping */
        }

        /* Value for each row */
        .infobox-value {
            text-align: right;
            color: #e2e8f0;
            word-break: break-word; /* Allow long words to break */
        }
        .infobox-value a {
            color: #63b3ed; /* Link color */
            text-decoration: none;
            transition: color 0.2s ease-in-out;
        }
        .infobox-value a:hover {
            color: #90cdf4; /* Lighter link color on hover */
            text-decoration: underline;
        }

        /* Footer */
        .infobox-footer {
            padding: 1rem; /* 16px */
            text-align: center;
            font-size: 0.875rem; /* 14px */
            color: #a0aec0; /* Lighter gray for footer text */
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background-color: #2d3748;
        }