MediaWiki:Common.css: Difference between revisions

Revision as of 15:19, 9 October 2025

/* CSS placed here will be applied to all skins */

.flex-fill.container,.flex-fill.container{ max-width:100% !important}
.p-navbar .navbar-brand.p-logo {
    height: 3rem;
}

.p-navbar .navbar-brand img {
    height: 3.5rem;
}


.p-logo {
    height: 6rem;
}

.p-logo img  {
    height: 5.5rem;
    margin-top:.2rem;
}

.bodyContent{ border:1px solid rgba(0,0,0,0.1); padding:16px; border-radius:.25rem;}
.firstHeading,h2,h3,h4{font-weight: 700;}

.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited, a, a[href].new  {
    color: #1b599b;
    text-decoration: none;
    background-color: transparent
}



a:hover, a[href].new:hover {
    color: #10345a;
    text-decoration: underline
}


a:visited, a[href].new:visited {
    color: #1b599b;
}

.footercontainer{max-width:100%;}

.mw-body.content{max-width:1140px; margin:0 auto;}


.tableVideo{text-align : center; margin: 0 auto;}
.embedvideo-wrapper{ border:1px solid #ccc;}
.embedvideo-loader__footer{display : none !important}

.panchangimg img{max-width:800px; width:100%; height:auto; margin:10px auto; display:table;}

.panchangimg a[href].external{ position: fixed; bottom: 20px; right: 20px; background-color:#1B599B; color: #ffffff; padding: 10px 20px; border-radius: 5px; box-shadow: 0px 0px 4px #d1d1d1; font-weight: 600;z-index: 9;}

.p-navbar.collapsible .navbar-nav .dropdown-menu{height:auto; max-height:95vh; overflow: auto;}

/* Hide the entire page tools section (content navigation) for users not logged in */
body:not(.mw-editable) #p-contentnavigation {
    display: none !important;
}

span.mw-editsection {
    display: none !important;
}

@media (min-width: 1105px) {
.navbar-expand-cmln, .p-navbar.collapsible {flex-flow: row wrap;}
.navbar-expand-cmln .navbar-nav, .p-navbar.collapsible .navbar-nav {flex-wrap: wrap; justify-content: center;}
}



@media (max-width: 575.98px) {
.flex-fill.container .row:first-child {justify-content: center;}
.tableVideo {
    max-width: 300px;
    width: 100% !important;
    height: 169px !important
}

.embedvideo-wrapper, .embedvideo {
    max-width: 300px;
    width: 100% !important;
    height: 169px !important
}
.panchangimg a[href].external{ bottom: 20px; right: 20px; padding: 10px 15px; border-radius: 4px;;}
.panchangimg img{width:100%; height:auto;}
}
.page-title, .firstHeading, #firstHeading {
  display: none !important;
}
.mw-headline,
.page-header,
.page-title,
.firstHeading,
h1, h2, h3 {
  border: none !important;
  box-shadow: none !important;
}
/* Remove default footer */
.footercontainer {
  display: none !important;
}

.thumb,
.thumbinner,
.image,
img.thumbimage {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}



/*  Clean up MediaWiki layout spacing */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

.mw-body,
.mw-body-content,
.mw-parser-output,
#content,
#bodyContent,
#mw-content-text {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-sizing: border-box;
  max-width: none !important;
  width: 100% !important;
}




.hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;            
  margin: 0 auto;
  padding: 100px 20px;

  background-image: url('https://palegoldenrod-hawk-418440.hostingersite.com/wp-content/uploads/2025/10/19376570_w66m_ob1h_190906-scaled.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  text-align: center;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Dark overlay for readability */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}


.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 15px;
}

.hero-content p {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.6;
  color: #FFE687;
}

/* ----------------------------- */
/* 4️⃣ Responsive adjustments */
/* ----------------------------- */
@media (max-width: 1024px) {
  .hero-section {
    background-attachment: scroll;
    padding: 80px 15px;
  }
  .hero-content h1 { font-size: 2.4rem; }
  .hero-content p { font-size: 1.1rem; }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 70vh;
    padding: 70px 15px;
  }
    .hero-content h1 { font-size: 2rem; }
  .hero-content p { font-size: 1rem; }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 60px 10px;
  }
  .hero-content h1 { font-size: 1.6rem; }
  .hero-content p { font-size: 0.95rem; }
}




/*  Clean up MediaWiki layout spacing */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

.mw-body,
.mw-body-content,
.mw-parser-output,
#content,
#bodyContent,
#mw-content-text {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-sizing: border-box;
  max-width: none !important;
  width: 100% !important;
}

/* Two-column layout container */
.custom-two-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Left column - holds image */
.custom-two-column .left-column {
  flex: 1 1 45%;
  text-align: center;
}

.custom-two-column .left-column img {
  width: 100%;
  height: auto;
  max-width: 500px;
  border-radius: 12px;

  display: block;
  margin: 0 auto;
}

/* Right column - list of articles */
.custom-two-column .right-column {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
align-items:center;
  padding: 10px;
  box-sizing: border-box;
}

.custom-two-column .right-column h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 15px;
  border-bottom: 2px solid #FFD44C;
  display: inline-block;
  padding-bottom: 5px;
}

.custom-two-column .right-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-two-column .right-column li {
  margin: 10px 0;
}

.custom-two-column .right-column a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  color: #0056b3;
  transition: color 0.2s ease;
}

.custom-two-column .right-column a:hover {
  color: #FFD44C;
}

/* Responsive Design */
@media (max-width: 992px) {
  .custom-two-column {
    flex-direction: column;
    text-align: center;
  }

  .custom-two-column .right-column h2 {
    text-align: center;
  }

  .custom-two-column .right-column ul {
    display: inline-block;
    text-align: left;
  }
}

.engage-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  text-align: center;
}

.engage-section h1 {
  color: maroon;
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.engage-section h2 {
  color: #333;
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
}

/*  Mobile responsiveness */
@media (max-width: 600px) {
  .engage-section {
    padding: 30px 15px;
  }

  .engage-section h1 {
    font-size: 1.8rem;
  }

  .engage-section h2 {
    font-size: 1.1rem;
  }
}


.three-col-section {
  display: flex;
flex-wrap:wrap;
  justify-content: center;
  align-items: stretch;
  gap: 50px;
  padding: 30px 20px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
 
}

/* Individual item box */
.three-col-item {
  flex: 1 1 calc(33.333% - 40px);
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  text-align: center;
 
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.three-col-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Image */
.three-col-img {
  width: 200px;
  margin: 0 auto 15px auto;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 15px;
  border: none !important;
  box-shadow: none !important;
}

/* Heading and Paragraph */
.three-col-item h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #222;
}

.three-col-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* === Responsive Design === */
@media (max-width: 992px) {
  .three-col-item {
    flex: 1 1 calc(50% - 20px);
  }
 .three-col-section {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 30px 10px;
  }
}

@media (max-width: 600px) {
  .three-col-section {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 30px 10px;
  }
.three-col-img {
width:100%;}
  .three-col-item {
    flex: 1 1 100%;
    max-width: 90%;
  }
}

/* Core categories section */

.three-cards-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 40px auto;
  padding: 0px 30px;
 
  box-sizing: border-box;
  /* remove outer gaps — if you want inner page padding, wrap this in .container */
}

/* row */
.three-cards-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0; /* no gap between children */
}

/* each card: exactly one-third width on desktop (no gap) */
.three-cards-row .card {
  box-sizing: border-box;
  flex: 0 0 calc(33.3333%); /* three equal columns */
  padding: 0;               /* no padding between cards */
  margin: 0;
  border: none;
  background: #fffcef;
  /* subtle divider between cards (optional). If you truly want no visual gap set border:none;*/
  /* border-left: 1px solid rgba(0,0,0,0.03); */
  display: flex;
  flex-direction: column;
  align-items: stretch;
justify-content:center;
}

/* remove default link/image frames added by wiki/skin when using [[File:...]] */
.three-cards-row .card img,
.three-cards-row .card .thumbimage,
.three-cards-row .card .thumbinner {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto;
  display: block;
}

/* image area */
.card .card-image {
  width: 100%;
  height: 220px; 
  align-items:center;
justify-content: center;               /* image box height */
  overflow: hidden;
  flex: 0 0 auto;
}

.card .card-image img {
  width: 150px;
  object-fit: cover; 
 vertical-align: middle;           /* keeps image aspect and fills area */
  display: block;
}

/* content area */
.card .card-body {
  padding: 28px 24px;
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* title / paragraph */
.card h3 {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  color: #222;
  font-weight: 700;
}

.card p {
  margin: 0 0 20px 0;
  color: #555;
  line-height: 1.6;
  font-size: 0.98rem;
}

/* button */
.card .card-btn {
  display: inline-block;
  text-decoration: none;
  background: #0b66d1;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  transition: background .15s ease, transform .12s ease;
  align-self: center;
}
.card .card-btn:hover { background: #085bb0; transform: translateY(-2px); }

/* ===== Responsive adjustments ===== */
@media (max-width: 1024px) {
  .three-cards-row .card {
    flex: 0 0 calc(50%); /* two columns */
  }
  .card .card-image { height: 200px; }
}

@media (max-width: 640px) {
  .three-cards-wrap { margin: 20px auto; }
  .three-cards-row .card {
    flex: 0 0 100%; /* one column */
  }
  .card .card-image { height: 180px; }
  .card .card-body { padding: 20px; }
  .card h3 { font-size: 1.1rem; }
  .card p { font-size: 0.95rem; }
}