MediaWiki:Common.css: Difference between revisions

Latest revision as of 10:35, 5 January 2026

.citypedia-banner {
    /* Gradient background using Pune city colors (Orange/Blue) */
    background: linear-gradient(to right, #ff5722, #003366); 
    color: white; /* White text for contrast */
    padding: 25px 20px;
    border-radius: 12px; /* Smoother corners */
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover */
}

/* Optional: Add a subtle hover effect */
.citypedia-banner:hover {
    transform: translateY(-2px);
}

/* Ensure headings inside the banner are white and centered */
.citypedia-banner h1, .citypedia-banner h2 {
    color: inherit; /* Use the parent white color */
    margin: 0 0 5px 0;
    font-size: 2.2em; /* Make the main title bigger */
}

.citypedia-banner i {
    opacity: 0.8; /* Make the subtitle slightly transparent */
}


/* Pune Citypedia Portal Styles */
.portal-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.portal-box {
    flex: 1 1 45%; /* Two columns on desktop */
    min-width: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.portal-header {
    font-size: 1.4em;
    font-weight: bold;
    padding: 10px;
    margin: -15px -15px 15px -15px;
    border-radius: 8px 8px 0 0;
    color: white;
    text-align: center;
}

/* Color Coding for Categories */
.color-attractions { background-color: #ff5722; } /* Vibrant Orange */
.color-personalities { background-color: #2196f3; } /* Pune Blue */
.color-institutes { background-color: #4caf50; } /* Heritage Green */
.color-civic { background-color: #f44336; } /* Alert Red */