MediaWiki:Common.css: Difference between revisions

Revision as of 15:43, 25 November 2025

/* ====== GBI – PROFILE TEMPLATE FIXED VERSION ====== */

/* Cover Banner */
.gbi-cover-area {
    position: relative;
    width: 100%;
    height: 320px; /* fixed height */
    overflow: hidden;
    border-radius: 12px;
}

.gbi-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CROPS automatically */
    object-position: center;
    border-radius: 12px;
}

/* Profile picture */
.gbi-profile-on-banner {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover; /* auto adjust */
    object-position: center;
    position: absolute;
    bottom: -60px;
    left: 40px;
    z-index: 10;
}

/* Banner Content */
.gbi-banner-content {
    position: absolute;
    left: 200px;
    bottom: 20px;
    color: white;
}

.gbi-name-banner {
    font-size: 38px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.gbi-headline-banner {
    font-size: 20px;
    opacity: 0.95;
}

.gbi-container {
    margin-top: 80px; /* space under profile image */
    display: flex;
    gap: 30px;
}

/* Layout columns */
.gbi-left {
    width: 70%;
}

.gbi-right {
    width: 30%;
}

/* Infobox style */
.gbi-right table {
    width: 100%;
    background: #fff;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0px 6px 24px rgba(0,0,0,0.08);
}

@@ Line 1: / Line 1: @@
-/* =============================================
+/* ====== GBI – PROFILE TEMPLATE FIXED VERSION ====== */
-   Global Bio Index - FilmFreeway Style Profile
-============================================= */
-/* Reset page container margin from Citizen skin */
+/* Cover Banner */
-.mw-body {
-    max-width: 1300px !important;
-    margin: 0 auto;
-}
-/* -----------------------
-   HERO BANNER
------------------------- */
 .gbi-cover-area {
+    position: relative;
      width: 100%;
-     height: 350px;
+     height: 320px; /* fixed height */
-     background: linear-gradient(135deg, #1e3c72, #2a5298);
+     overflow: hidden;
      border-radius: 12px;
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 70px;
-    display: flex;
-    align-items: flex-end;
-    padding-left: 180px;
 }
-/* Placeholder text positioning */
+.gbi-cover-image {
-.gbi-cover-placeholder {
      width: 100%;
      height: 100%;
-     opacity: 0.15;
+     object-fit: cover; /* CROPS automatically */
-    display: flex;
+     object-position: center;
-    justify-content: center;
+     border-radius: 12px;
-     align-items: center;
-     font-weight: 600;
-    font-size: 20px;
-    color: #fff;
 }
-/* -----------------------
+/* Profile picture */
-   PROFILE IMAGE OVERLAY
+.gbi-profile-on-banner {
------------------------- */
+    width: 140px;
-.gbi-profile-placeholder {
+    height: 140px;
+    border-radius: 50%;
+    border: 4px solid #fff;
+    object-fit: cover; /* auto adjust */
+    object-position: center;
      position: absolute;
      bottom: -60px;
      left: 40px;
-     width: 150px;
+     z-index: 10;
-    height: 150px;
-    background: #d9e1f2;
-    border-radius: 50%;
-    border: 6px solid #ffffff;
-    box-shadow: 0 4px 25px rgba(0,0,0,0.2);
 }
-/* -----------------------
+/* Banner Content */
-   TEXT ON COVER
+.gbi-banner-content {
------------------------- */
+     position: absolute;
-.gbi-banner-text {
+     left: 200px;
-     position: relative;
+     bottom: 20px;
-     color: #ffffff;
+    color: white;
-     margin-bottom: 25px;
 }
 .gbi-name-banner {
-    margin: 0;
+     font-size: 38px;
-     font-size: 36px;
      font-weight: 700;
-     text-shadow: 0px 3px 6px rgba(0,0,0,0.35);
+     text-shadow: 0 2px 6px rgba(0,0,0,0.4);
 }
 .gbi-headline-banner {
-    margin-top: 8px;
+     font-size: 20px;
-    font-weight: 500;
-     font-size: 18px;
      opacity: 0.95;
 }
-.gbi-pronoun {
-    font-size: 17px;
-    font-weight: 400;
-    opacity: 0.85;
-}
-/* -----------------------
-   MAIN LAYOUT
------------------------- */
 .gbi-container {
-     margin-top: 40px;
+     margin-top: 80px; /* space under profile image */
-     display: grid;
+     display: flex;
-    grid-template-columns: 65% 32%;
+     gap: 30px;
-     gap: 3%;
 }
-/* Left (Bio) */
+/* Layout columns */
-.gbi-left h2 {
+.gbi-left {
-     color: #002b7f;
+     width: 70%;
-    font-weight: 700;
-    font-size: 26px;
-    margin-bottom: 12px;
 }
-/* Right (Info Card) */
+.gbi-right {
-.infobox-gbi {
+     width: 30%;
-     background: #ffffff;
-    border-radius: 18px;
-    padding: 22px;
-    border: 1px solid #dbe4f4;
-    box-shadow: 0 0 40px rgba(0,0,0,0.04);
 }
-/* Infobox heading */
+/* Infobox style */
-.infobox-gbi th {
+.gbi-right table {
-     color: #002b7f !important;
+     width: 100%;
-     font-size: 20px !important;
+     background: #fff;
-     font-weight: 700 !important;
+     padding: 18px;
-     text-align: center !important;
+     border-radius: 14px;
-     padding-bottom: 10px;
+     box-shadow: 0px 6px 24px rgba(0,0,0,0.08);
-}
-/* Table text */
-.infobox-gbi td,
-.infobox-gbi th {
-    font-size: 15px !important;
-    padding: 6px 2px;
-}
-/* -----------------------
-   MOBILE RESPONSIVE
------------------------- */
-@media(max-width: 850px) {
-    .gbi-cover-area {
-        padding-left: 140px;
-        height: 260px;
-    }
-    .gbi-name-banner {
-        font-size: 28px;
-    }
-    .gbi-container {
-        grid-template-columns: 100%;
-    }
-    .gbi-profile-placeholder {
-        width: 120px;
-        height: 120px;
-        bottom: -45px;
-        left: 20px;
-    }
 }