Vanisource - User contributions [en]

MediaWiki:Common.css

2026-09-17T12:22:37Z

Kashya:

MediaWiki:Common.css

2026-09-17T12:20:21Z

Kashya:

MediaWiki:Common.css

2026-09-17T12:18:18Z

Kashya:

MediaWiki:Sidebar

MediaWiki:Common.css

2026-09-17T10:26:44Z

Kashya:

MediaWiki:Common.css

2026-09-17T10:11:05Z

Kashya: Undo revision 793251 by Kashya (talk)

2026-09-17T04:48:24Z

Kashya:

MediaWiki:Common.css

2026-09-17T04:35:42Z

Kashya:

/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Useful parameters... margin-bottom:0.5em */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');

.cw_0 {
display: none;
}
.cw_50 {
width: 50px;
}
.cw_150 {
width: 150px;
}
.cw_500 {
width: 500px;
}

.tabs-input {
display: none !important;
}
.noautonum .tocnumber {
display: none;
}
.daytable { /* Usage: {| class="daytable" */
text-align: left;
}
.vanitable { /* Usage: {| class="vanitable" */
border: 0.1em solid #BFBFBF; /* #BFBFBF=light grey border */
border-collapse: collapse;
padding: 0.25em; /* 0.25em=4px cellpadding */
background-color: #F2F2F2; /* #F2F2F2=pale grey background */
text-align: left; /* left, center, right */
vertical-align: middle; /* top, bottom, or middle */
}
.timelineh2 { /* (Used on the timeline pages) Usage: <div class="timelineh2" */
text-align: center;
border: 1px solid #ddcef2;
background: #F2F2F2; /* was #faf5ff; */
padding: 0.2em 0.4em;
margin: auto;
overflow: hidden;
}
.timelineh3 { /* Usage: <div class="timelineh3" */
text-align: center;
border-top: 1px solid #ddcef2;
border-bottom: 1px solid #ddcef2;
background: #FFFFFF;
padding: 0.2em 0.4em;
margin: auto;
overflow: hidden;
}
.timelinesummary { /* Usage: <div class="timelinesummary" */
border: thin solid #ddcef2;
border-radius: 1em;
box-shadow: 0.5em 0.5em 0.5em #888888;
background: #FFFFCC;
min-width: 77em;
margin: 1em auto 3em auto;
padding: 1em;
text-align: center;
}
.timelinelinks { /* Usage: <div class="timelinelinks"> for Timelinenav template */
text-align: center;
font-size: 132%;
font-weight: bold;
}
.timelinelinks a { /* Usage: for Timelinenav template, link text color */
color: #B5BD64; /* #B5BD64 (light mustard) */
}
.greentext { /* Usage: <span class="greentext">vaniquotes.org</span> */
color: #296F39; /* #296F39=green */
}
.quotelink { /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
.nectardroptext { /* Usage: <span class="nectardroptext">"Text"</span> for Nectar Drop boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
.firstchar { /* Usage: <span class="firstchar">A</span> */
float: left;
width: 0.7em;
font-size: 375%;
font-family: algerian, courier;
line-height: 80%;
}
.daystext { /* Usage: <span class="daystext">Text Here</span> */
color: #296F39; /* #296F39 = Green used for Video info on the Day in the life pages */
}
.daystextb { /* Usage: <span class="daystextb">Text Here</span> */
color: #296F39; /* #296F39 = Green used for Video info on the Day in the life pages */
font-weight: bold;
}
.MITL_page_nav { /* Usage: <div class="MITL_page_nav" */
text-align: left;
border: 1px solid #BFBFBF;
background: #FFF2E6;
padding: 0.2em 0.4em;
margin: auto
}
.daysnav,.monthsnav { /* For D/MITL desktop & mobile */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.daysnav .month {
margin: 25px 2%;
}
.monthsnav .year {
margin: 25px 5%;
}

/* ----------------- Book styles (BG is done) ----------------- */
.devanagari { /* Usage: <div class="devanagari"> */
color: #000000; /* Font color #0000 = black */
font-weight: bold;
}
@font-face {
font-family: interDiac;
src: url(/css/GauraTimes.ttf); /* Vedabase font */
}
.verse { /* Usage: <div class="verse"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
}
.verse.inter_diac { /* Usage: <div class="verse inter_diac"> */
font-family: interDiac; /* International diacritics */
}
.synonyms { /* Usage: <div class="synonyms"> */
color: #000000;
}
.synonyms.inter_diac { /* Usage: <div class="synonyms inter_diac"> */
font-family: interDiac; /* International diacritics */
}
.translation { /* Usage: <div class="translation"> */
color: #000000; /* #296F39 = green */
font-weight: bold;
}
.translation.inter_diac { /* Usage: <div class="translation inter_diac"> */
font-family: interDiac; /* International diacritics */
font-size: 1.1em;
}
.purport { /* Usage: <div class="purport"> */
color: #000000;
}
.purport.inter_diac { /* Usage: <div class="purport inter_diac"> */
font-family: interDiac; /* International diacritics */
font-size: 1.1em;
}
*:not(a).text { /* Usage: <div class="text"> */
color: #000000; /* Font color #0000 = black */
}
.text.inter_diac { /* Usage: <div class="text inter_diac"> */
font-family: interDiac; /* International diacritics */
font-size: 1.1em;
}
.SB65verse { /* 1962-65 SB */
white-space: pre-line; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
text-align: center; /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
color: #000000; /* Font color #0000 = black */
}
/* ----------------- End book styles (BG is done) ----------------- */

/* --- Begin OLD book styles SB, CC (These #IDs should be replaced with .classes as above) --- */
#verse {
white-space: pre;
}
#text { /* Used for verses and was: font-style: italic; */
}
#synonyms { /* Usage: <div id="synonyms"> */
}
#translation { /* Usage: <div id="translation"> */
color: #000000;
font-weight: bold;
}
#purport { /* Usage: <div id="purport"> */
}
/* ----------------- End old books styles BG, SB, CC ----------------- */

/* -------------------- BEGIN NEW COMPILE FORM -------------------- */
.quote {
margin: 1.5em 0em; /* Places 20px space between quotes on multi-quote pages */
font-family: tahoma;
}
.quote_heading {
font-weight: bold;
color: #296F39;
}
.quote_translation {
font-weight: bold;
color: #000000;
}
.quote_link { /* Vanisource link */
font-weight: bold;
}
.quote_text {
color: #000000;
}
.quote_verse { /* To center use: text-align: center; */
color: #000000;
}
.quote_text a { /* Makes the Vanisource verse links bold */
font-weight: bold;
}
/* -------------------- END NEW COMPILE FORM -------------------- */

/* -------------------- BEGIN MAIN PAGE CODING -------------------- */

.MainHeader h4 {
margin:0!important;
padding:0.2em 0.4em;
}
#mainbanner {
text-align:center;
background: #345B63;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
padding:0.3em;
color: #D4ECDD;
font-family:georgia;
font-size:150%;
font-style:italic;
}
#mainlinks {
text-align:center;
font-weight:bold;
font-size: 110%;
margin-bottom:0.5em
}
#mainlinks a {
color:#B5BD64
}
#mainmantra {
text-align:center;
margin-top:1.5em;
color:#B5BD64;
}
.maincenter {
text-align:center;
max-width:65em;
margin:0px auto;
padding-bottom:1em;
}

/* Don't display some stuff on the main page */
body.page-Main_Page #t-cite,
body.page-Main_Page #lastmod,
body.page-Main_Page #siteSub,
}

/* -------------------- END MAIN PAGE CODING -------------------- */

/* -------------------- BEGIN CODING TO IDENTIFY AND SORT OUT -------------------- */

/* 1. Override core Vector 2022 background CSS variables */
:root,
.skin-vector-2022,
html {
--background-color-base: #D4ECDD !important;
--background-color-page: #D4ECDD !important;
--background-color-quiet: #D4ECDD !important;
--border-color-base: transparent !important;
}

/* 2. Unify legacy elements and set global font */
body,
#content,
.mw-body,
#mw-page-base,
#mw-head-base {
background: #D4ECDD !important;
background-image: none !important;
font-family: tahoma;
}

#headertabs {
background: inherit;
}
#headertabs ul li.ui-state-active {
background: #D4ECDD;
}

/* 3. Force teal and remove borders on all Vector 2022 UI containers, sidebars, and Codex menus */
.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-header,
.vector-header-container,
.vector-sticky-header,
.vector-column-start,
.vector-column-end,
.vector-sidebar-container,
.vector-pinnable-element,
.vector-toc,
#vector-toc,
.vector-toc-pinned-container,
.vector-toc-contents,
.vector-dropdown-content,
.vector-menu-content,
.cdx-menu,
.cdx-menu__list {
background-color: #D4ECDD !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}

/* ------------------------------------ */

div.thumb { /* Remove white border from thumbnails */
border: none;
}
div.tright {
border: none;
margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
border: none;
margin: 0.5em 1.4em 0.8em 0;
}
#lastmod {
display:none
}

li#ca-unify {
margin-left:1.6em;
}
#google-search input {
font-size:95%;
width:10.9em;
}
#searchform {
padding-bottom:0.5em
}
#p-logo a, #p-logo a:hover {
height:190px;
}
#column-one {
padding-top:190px;
}
#p-navigation {
padding-top:30px;
}
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: Window;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
/* width: 100%; */
font: menu;
font-size: 12px;
/* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: aquamarine;
color: HighlightText;
}
.ac_moreItems {
text-align: center;
background-color: InactiveCaption;
color: InactiveCaptionText;
margin: 0px;
padding: 0px 5px;
cursor: default;
display: block;
width: 100%;
font: bold menu 12px;
overflow: hidden;
-moz-user-select: none;
-khtml-user-select: none;
}

/* -------------------- BEGIN MAIN PAGE TEST -------------------- */

body.page-Main_Page_test h1 {
background:#f0f0f0; /* was background:#faf5ff; */
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
padding:0.3em;
margin:1em 0;
color:#B5BD64; /* font color */
font-family:georgia;
font-weight:bold;
font-size: 140%;
text-align:center;
}
body.page-Main_Page_test h2 {
background:#f0f0f0;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
padding:0.3em;
margin:1em 0;
color:#000000;
font-family:georgia;
font-weight:bold;
font-size: 110%;
text-align:center;
}

#mainh2links a {
color:#B5BD64
}
/* -------------------- END MAIN PAGE TEST -------------------- */

/* --------------- DONATION PAGE - http://vanipedia.org/wiki/Special:IframePage/Donation --------------------*/

#iframeframe {
height: 800px;
}

/* -------------------- END CODING TO IDENTIFY AND SORT OUT -------------------- */

/* 2020-11-27 Elad: Scale and center main page banners */
a[href*='MainPage']::after {
content: 'a';
font-size: 50px;
visibility: hidden;
}

img[src*='MainPage'] {
transform: scale(1.225) translateX(9%);
}
/* End mainpage banners */

/* Main page mobile view classes */
@media screen and (max-width: 768px) {
.MainPageBG {
display: inline-table;
}
#mp-upper > tbody > tr {
display: table-cell;
}
#mp-upper > tbody > tr > td:nth-child(2) {
display: none;
}

/* 1. Stack the 5-column theme analysis sections vertically */
.theme-analysis-grid {
grid-template-columns: 1fr;
gap: 20px;
}

/* 2. Prevent the timeline from breaking the mobile viewport */
.timelinesummary {
min-width: unset;
width: 100%;
box-sizing: border-box;
margin: 1em auto;
}

/* 3. Make fixed-width captions flexible on mid-sized screens */
.youtube_right .thumbcaption,
.youtube_left .thumbcaption {
width: auto;
max-width: 100%;
}

/* 4. Ensure old table layouts don't cause horizontal scroll */
.vanitable {
display: block;
overflow-x: auto;
width: 100%;
}
}

@media screen and (max-width: 400px)
{
#mp-upper div[style*="40em"] {
width: 78vw !important;
}
#mp-upper > tbody > tr > td:nth-child(1) {
border-bottom: none !important;
}
.youtube_right .thumbcaption, .youtube_left .thumbcaption {
width: 69vw !important;
}
#mp-upper .embedvideowrap {
width: 69vw !important;
}
#mp-upper .embedvideo {
padding: 0px !important;
}
#mp-upper div[style*="24em"] {
width: unset !important;
}
#mp-upper .embedvideo iframe {
width: 67vw;
}
#mp-upper div[style*="32em"] { /* right-to-left languages */
min-width: 80vw !important;
}
}
@media screen and (max-width: 320px)
{
#mp-upper .embedvideo iframe {
width: 70vw;
}
.youtube_right .thumbcaption, .youtube_left .thumbcaption {
width: 69vw;
}
#mp-upper .embedvideo {
width: 71vw !important;
}
#mp-upper .embedvideowrap {
width: 67vw !important;
}
.NectarDropBox
{
min-width: 17.5em !important;
}
#mp-right > tbody > tr:nth-child(4) > td
{
padding: 0 0 0 .5em !important;
}
#mp-right > tbody > tr:nth-child(6) > td
{
padding: 0 0 0 .4em !important;
}
#mp-upper div[style*="32em"] { /* right-to-left languages */
min-width: 86vw !important;
}
}
/* End main page mobile view classes */

/* Generic center class */
div.center
{
text-align: center;
}

/* Nectar drop classes */
@media only screen and (max-width: 640px)
{
div.NectarDropBox
{
max-width: 30%;
}
}

.vaniquotebox
{
text-align: left;
min-height: 11.6em;
border:thin solid #000000;
border-radius: 1em;
box-shadow: 0.5em 0.5em 1em #bcbcbc;
margin: 1em 0em;
}
@media screen and (min-width: 800px)
{
.vaniquotebox {
max-width:80%;
}
}
.vaniquotebox > table
{
text-align:left;
font-size:1em;
color:#000000;
min-height: 11.5em;
margin: 0;
}

.vaniquotebox td
{
padding: 8px;
}

/* Put spacing between the YouTube video player and text that flows around it */

/* left-to-right languages */
.youtube_right .embedvideo
{
padding: 10px;
}

.youtube_right .thumbcaption, .youtube_left .thumbcaption
{
width: 330px;
}

/* right-to-left languages */
.youtube_left .embedvideo
{
padding: 10px;
}

.rtltoc ul
{
text-align: right !important;
direction: rtl;
}

.rtltoc .tocnumber {
padding-left: 0.5em;
padding-right: 0;
}

.rtltoc .toctitle
{
direction: rtl;
}

.rtltoc.ar .toctitle::before {
content: "محتويات";
}

.rtltoc.he .toctitle::before {
content: "תוכן עניינים";
}

.rtltoc.he,.rtltoc.ar {
font-weight: bold;
font-weight: sans-serif;
}

.rtltoc.he h2,.rtltoc.ar h2
{
display: none !important;
}

/* Kasya */
/* Custom Wikipedia-style Hover Popup Alternative */
a[title]:hover::after {
content: "Preview: " attr(title);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: var(--background-color-page, #ffffff);
color: var(--color-base, #202122);
padding: 12px 16px;
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-size: 14px;
line-height: 1.5;
white-space: normal;
width: 280px;
z-index: 10000;
}
/* -------------------- THEME ANALYSIS PAGE STRUCTURE -------------------- */
/* 5-Column Grid */
.theme-analysis-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin: 2em 0;
}

.theme-column {
background: rgba(255, 255, 255, 0.2);
padding: 15px;
border: 1px solid #B5BD64;
border-radius: 8px;
}

/* Formats the links cleanly inside each column */
.theme-column ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.theme-column li {
margin-bottom: 10px;
font-weight: bold;
}

/* Eliminate structural white borders and force structural columns to teal */
.vector-column-start,
.vector-column-end,
.vector-toc,
#vector-toc,
.vector-pinnable-element,
.mw-body,
.mw-page-container-inner,
.vector-sidebar-container {
border: none !important;
background-color: #D4ECDD !important;
}

/* Override core Vector 2022 background CSS variables */
:root,
.skin-vector-2022,
html {
--background-color-base: #D4ECDD !important;
--background-color-page: #D4ECDD !important;
--background-color-quiet: #D4ECDD !important;
--border-color-base: transparent !important; /* Neutralizes structural borders */
}

/* Force the specific grid columns and pinned containers to adopt the teal */
.vector-sidebar-container,
.vector-column-start,
.vector-column-end,
.vector-toc-pinned-container,
.vector-pinnable-element,
.mw-page-container,
.mw-page-container-inner {
background-color: #D4ECDD !important;
background-image: none !important;
border: none !important;
}

/* Wit & Wisdom Card Hover Effects */
.ww-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ww-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
}

.ww-image-layer {
transition: transform 0.5s ease;
}
.ww-card:hover .ww-image-layer {
transform: scale(1.05);
}

.ww-text-arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.ww-card:hover .ww-text-arrow {
transform: translateX(4px);
}

/* Portal Books Accordion Styles */
.book-accordion-report {
background: #FDF2D5;
border: 1px solid #d0d7de;
border-radius: 6px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
overflow: hidden;
}

/* --- ENHANCED PORTAL BOOKS ACCORDION --- */

/* The Main Container */
.book-accordion {
background: #FFF8EE;
border: none;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Deeper, softer shadow */
overflow: hidden;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* The Clickable Header Bar */
.book-accordion-header {
background-color: #91cfa9;
color: #1f4033;
padding: 16px 20px 16px 60px; /* Top: 16px, Right: 20px, Bottom: 16px, Left: 60px */
font-size: 18px;
font-weight: bold;
border-bottom: 3px solid #2a4452;
cursor: pointer;
transition: background-color 0.2s ease;
user-select: none;
}

/* Header Hover Effect */
.book-accordion-header:hover {
background-color: #7fbd97; /* Lightens the bar slightly on hover */
}

.extra-button {
background-color: #5B3E34;
}
.extra-button:hover {
background-color: #907359;
}

/* Fix for the standard MediaWiki Collapse/Expand Button */
.book-accordion .mw-collapsible-toggle {
float: right;
font-weight: normal;
font-size: 13px;
background: rgba(255, 255, 255, 0.15);
padding: 4px 12px;
border-radius: 20px; /* Makes it a pill shape */
margin-top: -2px;
}

/* Target the link inside the toggle to ensure it stays white */
.book-accordion .mw-collapsible-toggle a {
color: #1f4033 !important;
text-decoration: none;
}

.book-accordion .mw-collapsible-toggle a:hover {
text-decoration: underline;
}

/* The Content Area */
.book-accordion-content {
padding: 24px;
}

/* The Grid Setup */
.book-grid-list {
column-width: 280px;
column-gap: 20px;
list-style-type: none;
margin: 0;
padding: 0;
}

/* Single-column version of accordion link list */
.book-grid-list.single-column {
column-width: auto;
column-count: 1;
column-gap: 0;
}

.book-grid-list li {
margin-bottom: 12px;
break-inside: avoid;
}

/* Mini-Card Links */
.mw-parser-output .book-grid-list li a,
.mw-parser-output .book-grid-list li a.external {
display: block !important;
padding: 8px 16px !important;
background-color: #ffffff !important;
background-image: none !important; /* Safely removes the external link icon */
border: 1px solid #e1e4e8 !important;
border-radius: 6px;
text-decoration: none;
color: #1a5e9a;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
transition: all 0.2s ease;
}

/* Mini-Card Hover Effect */
.mw-parser-output .book-grid-list li a:hover,
.mw-parser-output .book-grid-list li a.external:hover {
background-color: #f4f8fc !important;
border-color: #1a5e9a !important;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(26,94,154,0.12);
}

/* Mini-Card Hover Effect */
.book-grid-list li a:hover {
background-color: #f4f8fc;
border-color: #1a5e9a;
transform: translateY(-2px); /* Lifts the card up slightly */
box-shadow: 0 4px 10px rgba(26,94,154,0.12); /* Subtle blue glow */
}

/* --- Solid Buttons with a Padded Outer Frame (Pseudo-Element Method) --- */

.vision-btn.btn-framed {
position: relative !important; /* Required to anchor the frame */
margin: 12px !important; /* Ensures there is room for the frame to render */
}

/* This draws the actual frame 6px outside the button */
.vision-btn.btn-framed::after {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border: 2px solid #3a5c6e !important; /* The teal frame */
border-radius: 6px !important; /* Slightly rounded to match the button */
pointer-events: none; /* Ensures the frame doesn't block you from clicking the button */
}

/* Changes the frame color when you hover over the button */
.vision-btn.btn-framed:hover::after {
border-color: #466e84 !important;
}

/* Mobile Responsiveness for Custom Book Grids */
@media screen and (max-width: 720px) {
.book-grid-list {
/* Forces the grid to stack into a single vertical column on small screens */
grid-template-columns: 1fr;
display: block;
}

/* Adjust padding for smaller screens if necessary */
.book-accordion-content {
padding: 10px;
}
}

/* ----------------------------------------------------
FIX: Mobile-Only Image Scaling (Leaves Desktop Intact)
---------------------------------------------------- */
@media screen and (max-width: 768px) {
.mw-parser-output img {
max-width: 100%;
height: auto !important;
}
}

/* Don't show external-link icon for image-only links */
.mw-parser-output a.external:has(img) {
background-image: none !important;
padding-right: 0 !important;
}

/* Responsive Layout for Image & Button Grids */
.compilation-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 30px;
margin: 20px auto;
max-width: 1000px;
}

.compilation-image {
flex: 1 1 300px;
text-align: center;
max-width: 450px;
}

.compilation-button-grid {
flex: 1 1 400px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 15px;
}

.compilation-btn {
background-color: #3a5c6e;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
border-bottom: 3px solid #2a4452;
border-radius: 4px;
text-align: center;
}

.compilation-btn a {
color: #ffffff !important;
text-decoration: none;
display: block;
}

.compilation-btn-full {
grid-column: 1 / -1;
}

/* Defines the layout for the main container holding all columns */
.theme-analysis-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* Creates exactly 5 equal columns */
gap: 15px; /* Adds consistent breathing room between the columns */
width: 100%;
box-sizing: border-box;
}

/* Optional but highly recommended: Make it stack nicely on smaller screens */
@media screen and (max-width: 900px) {
.theme-analysis-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
}
}

@media screen and (max-width: 600px) {
.theme-analysis-grid {
grid-template-columns: 1fr; /* 1 single column on mobile */
}
}

/* =========================================================
MEDIA SNIPPETS OVERFLOW FIX (The Nuclear Option)
========================================================= */

/* 1. Target the main column boxes by their unique background color */
.mw-parser-output div[style*="#feffe1"] {
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important; /* Force-stops ANY visual spilling */
}

/* 2. Target the nested inner divs and forcefully strip their hardcoded 300px widths */
.mw-parser-output div[style*="#feffe1"] div {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

/* 3. Keep images, video frames, and MediaWiki file wrappers strictly contained */
.mw-parser-output div[style*="#feffe1"] img,
.mw-parser-output div[style*="#feffe1"] iframe,
.mw-parser-output div[style*="#feffe1"] .embedvideo,
.mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
display: block !important;
margin: 0 auto !important; /* Centers the media nicely */
}

/* ==========================================================
VANIPEDIA VISION
========================================================== */

.vision-layout-wrapper {
display: block;
width: 100%;
max-width: 950px;
margin: 10px auto 30px;
box-sizing: border-box;
}

/* INTRODUCTION */

.vision-intro {
max-width: 850px;
margin: 0 auto 22px;
text-align: center;

color: #263b38;
font-size: 17px;
line-height: 1.6;
}

/* CORE PRINCIPLES TITLE */

.vision-core-title {
margin: 0 auto 14px;
text-align: center;

color: #3a5c6e;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
}

.vision-core-title span {
font-size: 18px;
font-weight: 500;
}

/* CORE PRINCIPLES IMAGE
No border/frame/padding.
Uses full available content width.
*/

.vision-core-image {
width: 100%;
margin: 0;
padding: 0;
line-height: 0;
cursor: pointer;
}

.vision-core-image .mw-file-description,
.vision-core-image .mw-file-element,
.vision-core-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}

/* BUTTONS */

.vision-buttons-row {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: center;

width: 100%;
gap: 14px;
margin-top: 22px;
}

/* EXISTING BUTTON GRAPHICS */

.vision-btn {
flex: 1 1 0;
min-width: 0;

background-color: #3a5c6e;
border-bottom: 3px solid #2a4452;
border-radius: 4px;

transition: background-color 0.2s ease;
}

.vision-btn:hover {
background-color: #466e84;
}

.vision-btn a,
.vision-btn a.external {
display: flex;
align-items: center;
justify-content: center;

box-sizing: border-box;
width: 100%;
height: 100%;

padding: 22px 14px !important;

color: #ffffff !important;
font-size: 16px !important;
font-weight: bold;
text-align: center;
text-decoration: none;
}

/* RESPONSIVE */

@media (max-width: 800px) {

.vision-buttons-row {
flex-wrap: wrap;
}

.vision-btn {
flex: 1 1 45%;
}

.vision-intro {
font-size: 16px;
}
}

/* ----------------------------------------------------
Vanipedia Community Section
---------------------------------------------------- */

.community-layout-wrapper {
max-width: 1100px;
margin: 35px auto 40px;
padding: 0 15px;
box-sizing: border-box;
}

/* Vanivillage + Vaniseva */

.community-platform-row {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
margin-bottom: 0px;
}

.community-platform-item {
display: flex;
align-items: center;
justify-content: center;
}

.community-platform-item img {
display: block;
max-width: 240px;
height: auto !important;
}

.community-platform-item a {
display: inline-block;
transition: transform 0.2s ease;
}

.community-platform-item a:hover {
transform: scale(1.05);
}
/* YouTube + Facebooks + Instagram */

.community-social-row {
display: flex;
justify-content: center;
align-items: center;
gap: 102px;
margin-bottom: 2px;
}

.community-social-item {
display: flex;
align-items: center;
justify-content: center;
}

.community-social-item img {
display: block;
max-width: 115px;
height: auto !important;
}

.community-social-item a {
display: inline-block;
transition: transform 0.2s ease;
}

.community-social-item a:hover {
transform: scale(1.08);
}

/* Community image */

.community-image-container {
width: 100%;
text-align: center;
margin-bottom: 28px;
}

.community-image-container img {
display: block;
width: 100%;
max-width: 1000px;
height: auto !important;
margin: 0 auto;
}

/* Contact + Statistics buttons */

.community-button-row {
display: flex;
justify-content: center;
align-items: stretch;
gap: 30px;
margin: 0 auto 30px;
}

.community-button-row .vision-btn {
width: 250px;
box-sizing: border-box;
}

/* Mobile */

@media screen and (max-width: 768px) {

.community-layout-wrapper {
padding: 0 10px;
margin-top: 25px;
}

.community-platform-row {
gap: 25px;
margin-bottom: 22px;
}

.community-platform-item img {
max-width: 150px;
}

.community-social-row {
gap: 18px;
margin-bottom: 25px;
}

.community-social-item img {
max-width: 65px;
}

.community-image-container {
margin-bottom: 22px;
}

.community-button-row {
gap: 12px;
}

.community-button-row .vision-btn {
width: calc(50% - 6px);
}
}

/* Center all content within the site notice / header banner */
#siteNotice {
text-align: center;
}

/* Force the social icons list to display horizontally and centered */
#siteNotice ul {
display: flex !important;
justify-content: center;
list-style-type: none !important; /* Removes any default Vector bullets */
padding: 0;
margin: 10px 0;
gap: 15px; /* Adds space between the icons */
}

/* Remove Vector's default left-margin on list items */
#siteNotice ul li {
margin: 0 !important;
display: inline-block;
}

/* Ensure the dark teal bar is properly spaced */
#siteNotice .your-teal-bar-class {
margin-top: 15px; /* Adjust if it feels too close to the links */
}

/* Only hide these tabs if the JavaScript determines the user is NOT authorized */
body.restricted-ui #ca-history,
body.restricted-ui #ca-talk,
body.restricted-ui #ca-viewsource {
display: none !important;
}

/* =========================================================
NIGHT MODE / DARK MODE OVERRIDES
========================================================= */

/* 1. Target the specific dark mode class applied by the Vector toggle */
html.skin-theme-clientpref-night {
--background-color-base: #121212 !important;
--background-color-page: #121212 !important;
--background-color-quiet: #1a1a1a !important;
--color-base: #e2e8f0 !important;
}

/* 2. Global background and text color overrides */
html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-night #content,
html.skin-theme-clientpref-night .mw-body,
html.skin-theme-clientpref-night #mw-page-base,
html.skin-theme-clientpref-night #mw-head-base {
background: #121212 !important;
color: #e2e8f0 !important;
}

/* 3. Unified Vector 2022 UI containers and Codex menus */
html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-page-container-inner,
html.skin-theme-clientpref-night .mw-content-container,
html.skin-theme-clientpref-night .mw-header,
html.skin-theme-clientpref-night .vector-header-container,
html.skin-theme-clientpref-night .vector-sticky-header,
html.skin-theme-clientpref-night .vector-column-start,
html.skin-theme-clientpref-night .vector-column-end,
html.skin-theme-clientpref-night .vector-sidebar-container,
html.skin-theme-clientpref-night .vector-pinnable-element,
html.skin-theme-clientpref-night .vector-pinnable-header,
html.skin-theme-clientpref-night .vector-pinned-container,
html.skin-theme-clientpref-night .vector-toc,
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-toc-pinned-container,
html.skin-theme-clientpref-night .vector-toc-contents,
html.skin-theme-clientpref-night .vector-menu-content,
html.skin-theme-clientpref-night .vector-appearance-pinned-container,
html.skin-theme-clientpref-night .vector-page-toolbar-container,
html.skin-theme-clientpref-night .vector-page-toolbar,
html.skin-theme-clientpref-night .cdx-menu,
html.skin-theme-clientpref-night .cdx-menu__list,
html.skin-theme-clientpref-night .cdx-menu-item,
html.skin-theme-clientpref-night .cdx-radio,
html.skin-theme-clientpref-night #vector-appearance {
background-color: #121212 !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
color: #e2e8f0 !important;
}

/* 4. Fix specific custom components (Cards, Columns, Book Accordions) */
html.skin-theme-clientpref-night .theme-column {
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid #4a5568 !important;
}

html.skin-theme-clientpref-night .book-accordion {
background: #1a1a1a !important;
border-color: #333 !important;
}

html.skin-theme-clientpref-night .book-accordion-header {
background-color: #2d3748 !important;
border-bottom: 3px solid #1a202c !important;
}

html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a,
html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a.external {
background-color: #2d3748 !important;
border: 1px solid #4a5568 !important;
color: #90cdf4 !important;
}

html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a:hover {
background-color: #4a5568 !important;
}

html.skin-theme-clientpref-night .quote_text,
html.skin-theme-clientpref-night *:not(a).text {
color: #e2e8f0 !important;
}

/* 5. Fix the Search Bar and Auto-suggest Dropdown */
html.skin-theme-clientpref-night .cdx-text-input,
html.skin-theme-clientpref-night .cdx-search-input,
html.skin-theme-clientpref-night .cdx-search-input__input-wrapper,
html.skin-theme-clientpref-night .vector-typeahead-search-container {
background-color: #1a1a1a !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}

html.skin-theme-clientpref-night .cdx-text-input__input {
background-color: transparent !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .cdx-text-input__input::placeholder {
color: #a0aec0 !important;
}

html.skin-theme-clientpref-night .cdx-search-input__end-button {
background-color: #2d3748 !important;
border-color: #4a5568 !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .cdx-typeahead-search__menu {
background-color: #121212 !important;
border: 1px solid #333 !important;
}

html.skin-theme-clientpref-night .cdx-menu-item:hover,
html.skin-theme-clientpref-night .cdx-menu-item--selected {
background-color: #2d3748 !important;
}

/* 6. Invert external iframes and override inline widget colors */
html.skin-theme-clientpref-night .vanipedia-clock iframe {
filter: invert(0.92) hue-rotate(180deg) !important;
}

html.skin-theme-clientpref-night .mw-parser-output div[style*="#ede9ce"],
html.skin-theme-clientpref-night .mw-parser-output div[style*="background-color: #ede9ce"],
html.skin-theme-clientpref-night .mw-parser-output div[style*="background-color:#ede9ce"] {
background-color: #121212 !important;
border-color: #333 !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .mw-parser-output div[style*="#ede9ce"] a,
html.skin-theme-clientpref-night .oo-ui-panelLayout-framed a {
color: #90cdf4 !important;
}

html.skin-theme-clientpref-night .oo-ui-panelLayout-framed,
html.skin-theme-clientpref-night .oo-ui-tabPanelLayout {
background-color: #121212 !important;
border: 1px solid #333 !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .oo-ui-fieldsetLayout,
html.skin-theme-clientpref-night .oo-ui-widget {
background-color: transparent !important;
color: inherit !important;
}

/* 7. Scrollbars and Edge Stripes Cleanup */
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-dropdown-content {
scrollbar-color: #3b4b5f #1a202c !important;
}

html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar {
width: 8px !important;
}

html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-track,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-track {
background: #1a202c !important;
}

html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-thumb,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-thumb {
background-color: #3b4b5f !important;
border-radius: 4px !important;
}

html.skin-theme-clientpref-night #vector-toc .vector-toc-list-item-active {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}

html.skin-theme-clientpref-night .vector-sticky-pinned-container::after,
html.skin-theme-clientpref-night .vector-sticky-pinned-container::before,
html.skin-theme-clientpref-night .vector-pinned-container::after,
html.skin-theme-clientpref-night .vector-pinned-container::before {
background-image: none !important;
background: transparent !important;
box-shadow: none !important;
}

/* 8. Dark Mode Sidebar Menu Widgets & Headers */
html.skin-theme-clientpref-night .vector-dropdown-content {
background-color: #253141 !important;
border: 1px solid #3b4b5f !important;
border-radius: 4px !important;
padding: 4px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

html.skin-theme-clientpref-night .vector-dropdown-content a,
html.skin-theme-clientpref-night .vector-dropdown-content a *,
html.skin-theme-clientpref-night #vector-main-menu a,
html.skin-theme-clientpref-night #vector-main-menu a * {
color: #e2e8f0 !important;
background-color: transparent !important;
}

html.skin-theme-clientpref-night .vector-dropdown-content a:hover,
html.skin-theme-clientpref-night .vector-dropdown-content a:hover *,
html.skin-theme-clientpref-night #vector-main-menu a:hover,
html.skin-theme-clientpref-night #vector-main-menu a:hover * {
color: #ffffff !important;
background-color: #3b4b5f !important;
border-radius: 2px !important;
text-decoration: none !important;
}

html.skin-theme-clientpref-night #vector-main-menu .vector-menu-heading,
html.skin-theme-clientpref-night .vector-dropdown-content .vector-menu-heading {
background-color: #3b4b5f !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 8px 12px !important;
margin-bottom: 4px !important;
border: 1px solid #4a5568 !important;
}

.vanipedia-sidebar-menu.vanipedia-collapsed:has(.vector-menu-content-list:empty) {
display: none !important;
}

/* =========================================================
LIGHT MODE OVERRIDES
========================================================= */

/* 1. Global Light Mode Layout Variables */
html:not(.skin-theme-clientpref-night) {
--background-color-base: #D4ECDD !important;
--background-color-page: #D4ECDD !important;
--background-color-quiet: #D4ECDD !important;
}

html:not(.skin-theme-clientpref-night) body,
html:not(.skin-theme-clientpref-night) .mw-page-container,
html:not(.skin-theme-clientpref-night) .mw-page-container-inner {
background-color: #D4ECDD !important;
background-image: none !important;
}

/* 2. Light Mode Sidebar & Menu Backgrounds */
html:not(.skin-theme-clientpref-night) .vector-sidebar-container {
background-color: #EEF2F9 !important;
--background-color-interactive: #EEF2F9 !important;
}

/* Give the floating dropdown a visible box in Light Mode */
html:not(.skin-theme-clientpref-night) .vector-dropdown-content {
background-color: #ffffff !important; /* Clean white background */
border: 1px solid #c8ccd1 !important; /* Soft grey border */
border-radius: 4px !important;
padding: 6px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* Soft shadow */
}

/* Ensure inner wrappers don't double-pad or override the box */
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc {
background-color: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}

/* 3. Light Mode Sidebar Menu Typography & Headers */
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading {
background-color: #345B63 !important; /* Dark teal background for headers */
color: #ffffff !important; /* White text */
border-radius: 4px !important;
padding: 8px 12px !important;
margin-bottom: 4px !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link {
color: #2F5E5E !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover {
color: #0645ad !important;
background-color: #EEF2F9 !important; /* Soft hover highlight */
border-radius: 2px !important;
}

/* =========================================================
GLOBAL OVERRIDES (BOTH MODES)
========================================================= */

#mainbanner {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}

.mw-body,
#content,
.mw-body-content,
#mw-content-text {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
border: none !important;
outline: none !important;
}

/* Personality Landing Hero */

.personality-card {
max-width: 1100px;
margin: 0 auto 35px auto;
background: #3a5c6e;
border: 1px solid #7FA28B;
color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}

.personality-hero {
display: flex;
gap: 28px;
align-items: center; /* This centers the shorter column (image or text) vertically */
}

.personality-image {
flex: 0 0 396px;
text-align: center;
}

.personality-image img {
max-width: 360px;
width: 100%;
height: auto;
display: block;
margin: auto;
padding: 4px;
background: #E7F3E5;
border: 1px solid #c8c8c8;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Keep the title fix you applied earlier! */
.personality-title {
font-size: 180%;
text-align: left;
font-weight: bold;
margin-top: 0;
line-height: 1;
margin-bottom: 12px;
}

.personality-content {
flex: 1;
padding: 0 24px 0 0;
}

/* --- Mobile Layout Rules --- */
@media (max-width: 768px) {
.personality-hero {
flex-direction: column; /* Stacks the image and text vertically */
gap: 16px; /* Reduces the gap slightly so it doesn't feel too empty on mobile */
}

.personality-image {
flex: 1 1 auto; /* Removes the rigid 360px width constraint */
width: 100%; /* Allows the image to fill the mobile container gracefully */
}

.personality-image img {
max-width: 100%; /* Ensures the image never spills off the screen */
}

.personality-title {
text-align: center; /* Optional: Centering the title often looks better on stacked mobile layouts */
}
.personality-content {
padding: 0 16px; /* Adds 16px of space to the left and right of the text */
}
}

/*--- Additional Info Card ---*/
.info-card {
max-width: 900px;
margin: 30px auto;
padding: 24px 28px;
background: #FFF8EE;
border: 1px solid #D8C7A5;
border-radius: 8px;
box-sizing: border-box;
text-align: left;
}

.info-card h3 {
margin: 0 0 15px;
font-size: 150%;
color: #345B63;
}

.info-card p {
margin: 0 0 16px;
line-height: 1.7;
}

.info-card .cta-button {
margin-top: 10px;
}

/* Hide empty sidebar menu headings */
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed {
display: none !important;
}

.accordion-toc-heading {
display: none;
}

/* ==========================================================================
STICKY HEADER & FLOATING MENU ONLY
========================================================================== */

/* 1. Permanently remove the pinned sidebar column & all pinning buttons */
#vector-main-menu-pinned-container,
.vector-main-menu-pinned-container,
.vector-pinnable-header,
.vector-main-menu-action,
.vector-pinnable-header-toggle-button,
.vector-pinnable-header-pin-button,
.vector-pinnable-header-unpin-button,
[data-event-name*="vector-main-menu.pin"],
[data-event-name*="vector-main-menu.unpin"] {
display: none !important;
}

/* 2. Hide magnifying glass / search toggle icon in sticky header */
#vector-sticky-header .vector-sticky-header-search-toggle,
#vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .search-toggle,
#vector-sticky-header .mw-ui-icon-wikimedia-search,
#vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header .vector-icon.mw-ui-icon-search,
#vector-sticky-header .cdx-search-input__start-icon {
display: none !important;
}

/* 3. Sticky header container layout */
.skin-vector-2022 #vector-sticky-header,
#vector-sticky-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
background-color: #cce7d7 !important;
border-bottom: 2px solid #345B63 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding-left: 16px !important;
padding-right: 16px !important;
height: 50px !important;
min-height: 50px !important;
}

/* Dark mode version */
html.skin-theme-clientpref-night #vector-sticky-header {
background-color: #1a1a1a !important;
border-bottom: 2px solid #3b4b5f !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 4. Start Container: Burger + Search (PREVENTS growing/stretching across the bar) */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start,
#vector-sticky-header .vector-sticky-header-start {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important; /* Stops it from expanding across the middle */
flex-grow: 0 !important;
width: auto !important;
position: relative !important;
z-index: 10 !important;
gap: 18px !important;
margin: 0 !important;
}

/* 5. Burger button */
#vanipedia-sticky-main-menu {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
margin: 0 !important;
cursor: pointer !important;
position: relative !important;
z-index: 20 !important;
}

#vanipedia-sticky-main-menu .vector-icon {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
}

/* 6. Search box */
#vector-sticky-header #p-search,
#vector-sticky-header form#searchform,
#vector-sticky-header .vector-search-box,
#vector-sticky-header .vector-search-box-inner,
#vector-sticky-header .cdx-search-input {
position: relative !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
z-index: 10 !important;
}

#vector-sticky-header input.searchbox,
#vector-sticky-header input[type="search"] {
position: relative !important;
left: auto !important;
margin: 0 !important;
}

/* 7. FIX: Lock Page Title strictly on the LEFT right after search */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar,
#vector-sticky-header .vector-sticky-header-context-bar {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
flex: 0 0 auto !important; /* Takes only the space needed for the title */
flex-grow: 0 !important;
width: auto !important;
max-width: none !important;
margin-left: 20px !important; /* Space after search box */
margin-right: auto !important; /* Absorbs all remaining space, pushing tools to the far right */
}

#vector-sticky-header .vector-sticky-header-context-bar-primary,
#vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #000000 !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}

/* Dark mode text */
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline,
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title {
color: #ffffff !important;
}

/* 8. Action tools stay on the far right */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end,
#vector-sticky-header .vector-sticky-header-end {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin-left: auto !important;
}

/* 9. Floating Dropdown Menu Box Styling */
#vector-main-menu-dropdown .vector-dropdown-content {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
border-radius: 4px !important;
background-color: var(--background-color-base, #ffffff) !important;
}

/* ==========================================================================
FLOATING "BACK TO TOP" BUTTON
========================================================================== */
#vanipedia-back-to-top {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background-color: #345B63 !important; /* Vanipedia dark teal */
color: #ffffff !important;
border: none !important;
outline: none !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
z-index: 1000 !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(12px) !important;
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important;
}

/* Shown when scrolled down */
#vanipedia-back-to-top.visible {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}

#vanipedia-back-to-top:hover {
background-color: #244147 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

#vanipedia-back-to-top:active {
transform: translateY(0) !important;
}

#vanipedia-back-to-top svg {
display: block !important;
width: 22px !important;
height: 22px !important;
stroke: #ffffff !important;
}

/* Dark mode theme */
html.skin-theme-clientpref-night #vanipedia-back-to-top {
background-color: #3b4b5f !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

html.skin-theme-clientpref-night #vanipedia-back-to-top:hover {
background-color: #4f637c !important;
}

/* Mobile positioning */
@media screen and (max-width: 768px) {
#vanipedia-back-to-top {
bottom: 18px !important;
right: 18px !important;
width: 40px !important;
height: 40px !important;
}
}

/* ==========================================================================
UNCLUTTERED "DOORS" HOMEPAGE LAYOUT
========================================================================== */

.vani-sanctuary {
max-width: 1140px;
margin: 0 auto;
padding: 10px 0 40px;
}

/* 1. Entrance Hero (Serene & Welcoming) */
.vani-entrance-hero {
display: flex;
align-items: center;
background-color: #e8f4ec; /* Soft sage green */
border: 1px solid #c8e0d1;
border-radius: 12px;
padding: 28px 32px;
gap: 32px;
margin-bottom: 32px;
box-shadow: 0 4px 16px rgba(52, 91, 99, 0.06);
}

.vani-entrance-avatar {
flex: 0 0 160px;
text-align: center;
}

.vani-portrait-circle,
.vani-entrance-avatar img {
border-radius: 50% !important;
border: 4px solid #ffffff !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
width: 150px !important;
height: 150px !important;
object-fit: cover !important;
}

.vani-entrance-text {
flex: 1 1 auto;
}

.vani-sanctuary-badge {
display: inline-block;
background-color: #345B63;
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 8px;
}

.vani-sanctuary-title {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: #1e3a40 !important;
margin: 0 0 8px !important;
border: none !important;
padding: 0 !important;
}

.vani-sanctuary-subtitle {
font-size: 1.02rem;
color: #334447;
line-height: 1.5;
margin: 0 0 14px;
}

.vani-sanctuary-milestone {
display: inline-block;
font-size: 0.88rem;
color: #2b494f;
background-color: rgba(255, 255, 255, 0.75);
padding: 6px 14px;
border-radius: 6px;
border-left: 3px solid #345B63;
}

/* 2. The Doors Grid (3 Columns, Clean & Spacious) */
.vani-doors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 32px;
}

/* 3. Door Cards */
.vani-door-card {
background-color: #ffffff;
border: 1px solid #d9e8e0;
border-radius: 10px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
position: relative;
}

.vani-door-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(52, 91, 99, 0.12);
border-color: #345B63;
}

.vani-door-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.vani-door-icon {
font-size: 1.8rem;
}

.vani-door-number {
font-size: 0.75rem;
font-weight: 700;
color: #7b948f;
text-transform: uppercase;
letter-spacing: 0.6px;
}

.vani-door-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 8px;
}

.vani-door-title a {
color: #1e3a40 !important;
text-decoration: none;
}

.vani-door-title a:hover {
color: #345B63 !important;
text-decoration: underline;
}

.vani-door-desc {
font-size: 0.92rem;
color: #556668;
line-height: 1.5;
margin: 0 0 18px;
flex-grow: 1;
}

.vani-door-btn {
display: inline-flex;
align-items: center;
font-size: 0.88rem;
font-weight: 700;
color: #345B63 !important;
background-color: #edf6f0;
padding: 8px 14px;
border-radius: 6px;
text-decoration: none !important;
transition: background-color 0.2s ease, color 0.2s ease;
}

.vani-door-card:hover .vani-door-btn {
background-color: #345B63;
color: #ffffff !important;
}

/* 4. Sanctuary Base (Mission Door) */
.vani-mission-door {
background-color: #f7faf8;
border: 1px solid #cde2d6;
border-radius: 10px;
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

.vani-mission-info h3 {
margin: 0 0 6px !important;
border: none !important;
padding: 0 !important;
font-size: 1.25rem !important;
color: #24464c !important;
}

.vani-mission-info p {
margin: 0;
font-size: 0.93rem;
color: #4a5c5f;
}

.vani-mission-links {
display: flex;
gap: 10px;
flex-shrink: 0;
}

.vani-m-btn {
display: inline-block;
padding: 9px 18px;
font-size: 0.88rem;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
text-decoration: none !important;
transition: all 0.2s ease;
}

.vani-m-primary {
background-color: #345B63;
color: #ffffff !important;
}

.vani-m-primary:hover {
background-color: #233e44;
}

.vani-m-ghost {
background-color: #ffffff;
border: 1px solid #345B63;
color: #345B63 !important;
}

.vani-m-ghost:hover {
background-color: #e8f4ec;
}

.vani-m-accent {
background-color: #d97724;
color: #ffffff !important;
}

.vani-m-accent:hover {
background-color: #b86016;
}

/* 5. Dark Mode Adaptation */
html.skin-theme-clientpref-night .vani-entrance-hero {
background-color: #1f272a;
border-color: #313d42;
}

html.skin-theme-clientpref-night .vani-sanctuary-title {
color: #e0f2f1 !important;
}

html.skin-theme-clientpref-night .vani-sanctuary-subtitle {
color: #b0bec5;
}

html.skin-theme-clientpref-night .vani-sanctuary-milestone {
background-color: rgba(0, 0, 0, 0.4);
color: #cfd8dc;
}

html.skin-theme-clientpref-night .vani-door-card {
background-color: #1a1e20;
border-color: #2e3b40;
}

html.skin-theme-clientpref-night .vani-door-title a {
color: #92c5cd !important;
}

html.skin-theme-clientpref-night .vani-door-desc {
color: #9ea7aa;
}

html.skin-theme-clientpref-night .vani-door-btn {
background-color: #242e32;
color: #92c5cd !important;
}

html.skin-theme-clientpref-night .vani-mission-door {
background-color: #191c1e;
border-color: #2b373c;
}

/* 6. Responsive Mobile Breakpoints */
@media screen and (max-width: 900px) {
.vani-doors-grid {
grid-template-columns: repeat(2, 1fr);
}

.vani-entrance-hero {
flex-direction: column;
text-align: center;
padding: 24px;
}

.vani-mission-door {
flex-direction: column;
text-align: center;
}

.vani-mission-links {
flex-wrap: wrap;
justify-content: center;
}
}

@media screen and (max-width: 600px) {
.vani-doors-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
Vanipedia Visitors Statistics — Zero Scrollbar Configuration
========================================================================== */

/* Hide right Appearance menu */
.page-Vanipedia_Visitors_Statistics .vector-column-end,
.page-Vanipedia_Visitors_Statistics #vector-appearance-pinned-container,
.page-Vanipedia_Visitors_Statistics #vector-page-tools-pinned-container {
display: none !important;
}

/* 1350px centered container */
body.page-Vanipedia_Visitors_Statistics {
--max-width-base: 1350px !important;
--width-layout: 1350px !important;
}

.page-Vanipedia_Visitors_Statistics .mw-page-container {
max-width: 1350px !important;
width: 90% !important;
margin: 0 auto !important;
}

.page-Vanipedia_Visitors_Statistics .mw-page-container-inner,
.page-Vanipedia_Visitors_Statistics .mw-content-container,
.page-Vanipedia_Visitors_Statistics #content,
.page-Vanipedia_Visitors_Statistics .mw-parser-output {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}

/* Dashboard container */
.page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard {
width: 100% !important;
max-width: 100% !important;
margin: 15px auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
overflow: hidden !important;
}

/* Iframe with enough vertical room */
.page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard iframe {
display: block !important;
width: 100% !important;
min-width: 100% !important;
height: 950px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
overflow: hidden !important;
}

/* ==========================================================
VANIPEDIA MAIN PAGE
Full-screen custom homepage
========================================================== */

/* ----------------------------------------------------------
1. REMOVE MEDIAWIKI / VECTOR CHROME ON MAIN PAGE
---------------------------------------------------------- */

body.page-Main_Page #mw-head,
body.page-Main_Page #mw-panel,
body.page-Main_Page #left-navigation,
body.page-Main_Page #right-navigation,
body.page-Main_Page #p-personal,
body.page-Main_Page #p-search,
body.page-Main_Page #p-logo,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page #jump-to-nav,
body.page-Main_Page .mw-indicators,
body.page-Main_Page .mw-editsection,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page .vector-header-container,
body.page-Main_Page .vector-column-start,
body.page-Main_Page .vector-column-end,
body.page-Main_Page .vector-toc,
body.page-Main_Page .vector-settings,
body.page-Main_Page .vector-page-tools,
body.page-Main_Page .vector-main-menu-landmark,
body.page-Main_Page .mw-page-title-main,
body.page-Main_Page .firstHeading,
body.page-Main_Page #footer,
body.page-Main_Page .printfooter,
body.page-Main_Page .catlinks,

body.page-Main_Page .vector-sitenotice-container,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mainbanner {
display: none !important;
}

/* ----------------------------------------------------------
2. REMOVE VECTOR WIDTH / GRID / MARGINS
---------------------------------------------------------- */

body.page-Main_Page,
body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner,
body.page-Main_Page .mw-content-container,
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page .mw-body-content,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;

margin: 0 !important;
padding: 0 !important;

border: 0 !important;
box-shadow: none !important;
}

body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner,
body.page-Main_Page .mw-content-container {
display: block !important;
min-height: 0 !important;
}

body.page-Main_Page main#content {
position: static !important;
}

body.page-Main_Page {
margin: 0 !important;
padding: 0 !important;

overflow-x: hidden;

background: #f5f1e8 !important;
}

/* ----------------------------------------------------------
3. RESET MEDIAWIKI STYLING INSIDE HOMEPAGE
---------------------------------------------------------- */

body.page-Main_Page #vani-home,
body.page-Main_Page #vani-home *,
body.page-Main_Page #vani-home *::before,
body.page-Main_Page #vani-home *::after {
box-sizing: border-box;
}

body.page-Main_Page #vani-home p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Main_Page #vani-home a {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;

color: inherit;
text-decoration: none !important;
}

body.page-Main_Page #vani-home a.external {
padding-right: 0 !important;
background-image: none !important;
}

body.page-Main_Page #vani-home img {
margin: 0 !important;
padding: 0 !important;

border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

/* ==========================================================
HOMEPAGE CANVAS
========================================================== */

body.page-Main_Page #vani-home {
--cream: #f6f2e9;
--cream-2: #eee8dc;
--green: #123f38;
--green-soft: #31574f;
--gold: #b1873d;
--text: #18201d;
--muted: #746f65;

position: relative;

width: 100vw !important;
max-width: 100vw !important;

height: 100vh;
min-height: 720px;

margin: 0 !important;
padding: 20px 38px 18px !important;

overflow: hidden;

color: var(--text);

background:
radial-gradient(
circle at 62% 24%,
rgba(255,255,255,.76) 0,
rgba(255,255,255,.30) 26%,
transparent 48%
),
linear-gradient(
105deg,
#faf7f0 0%,
var(--cream) 55%,
#f2ede3 100%
);

font-family: Georgia, "Times New Roman", serif;
}

/* ==========================================================
TOP BAR
========================================================== */

.vh-top {
height: 66px;

display: flex;
align-items: center;
justify-content: space-between;

position: relative;
z-index: 20;
margin-bottom: 20px;
}

/* ==========================================================
BRAND
========================================================== */

.vh-brand {
display: flex;
align-items: center;
}

/* ROUND LOGO */

.vh-round-logo {
flex: 0 0 auto;
}

.vh-round-logo img {
width: 60px;
height: 60px;
object-fit: contain;
}

/* VANIPEDIA WORDMARK + SMALL NETWORK LINKS */

.vh-wordmark-group {
position: relative;
flex: 0 0 auto;
line-height: 0;
}

.vh-brand-network {
position: absolute;
top: 100%;
left: 0;
right: 0;
transform: translateX(10px);
display: flex;
align-items: center;
justify-content: center;
gap: 24px;

margin-top: 3px;

font-family: Arial, Helvetica, sans-serif;
font-size: 14px; /* VANISOURCE / VANIQUOTES / VANIMEDIA */
font-weight: 700;
line-height: 1;
letter-spacing: .02em;

white-space: nowrap;
}

.vh-brand-network a {
color: #B5BC64 !important;
text-decoration: none !important;
transition: color .2s ease;
}

.vh-brand-network a:hover {
color: var(--gold) !important;
}

.vh-brand-network span {
margin: 0 3px;
color: var(--gold);
}

.vh-round-logo {
flex: 0 0 auto;
}

.vh-round-logo img {
width: 60px;
height: 60px;
object-fit: contain;
}

.vh-wordmark img {
width: auto;
height: 60px;
object-fit: contain;
}

.vh-wordmark img {
width: auto;
height: 50px;
object-fit: contain;
}

.vh-subtitle {
width: 950px;
margin-left: 28px;
padding-left: 18px;
border-left: 2px solid rgba(177,135,61,.45);
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
line-height: 1.3;
letter-spacing: .11em;
white-space: nowrap;
align-self: center;
transform: translateY(6px);
}

.vh-top-links {
display: flex;
align-items: center;

gap: 17px;

font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .08em;

color: var(--green);
}

.vh-top-links i {
display: block;

width: 2px;
height: 17px;

background: rgba(177,135,61,.38);
}

.vh-top-links a {
color: var(--green) !important;
}

/* ==========================================================
HERO AREA
========================================================== */

.vh-main {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(600px, 1fr)
220px;
column-gap: 24px;
height: 510px;
}

.vh-main::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -35px; /* move divider down */
height: 1px;
background: rgba(177,135,61,.35);
pointer-events: none;
}

/* ----------------------------------------------------------
FROM HIS LETTERS heading
---------------------------------------------------------- */

.vh-letter-heading {
display: block;

width: auto;
height: auto;

margin: 0 0 22px;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--gold);

font-size: 11px;
font-weight: 600;
line-height: 1.35;

letter-spacing: .12em;

text-align: left;
}

/* ----------------------------------------------------------
Rotating content
---------------------------------------------------------- */

#vh-random-letter {
opacity: 1;

transition:
opacity .45s ease,
transform .45s ease;
}

#vh-random-letter.is-changing {
opacity: 0;
transform: translateY(5px);
}

/* ----------------------------------------------------------
Whole item clickable
---------------------------------------------------------- */

.vh-random-letter-link {
display: block;

color: inherit;

text-decoration: none !important;
}

/* ----------------------------------------------------------
Recipient
---------------------------------------------------------- */

.vh-random-letter-person {
margin-bottom: 5px;

color: var(--green);

font-family: "Noto Serif", Georgia, serif;
font-size: 17px;
font-weight: 600;
line-height: 1.2;
}

/* ----------------------------------------------------------
Date
---------------------------------------------------------- */

.vh-random-letter-date {
margin-bottom: 14px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.3;

letter-spacing: .04em;
}

/* ----------------------------------------------------------
Selected passage
---------------------------------------------------------- */

.vh-random-letter-text {
color: var(--text);

font-family: "Noto Serif", Georgia, serif;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}

/* ----------------------------------------------------------
Read letter
---------------------------------------------------------- */

.vh-random-letter-more {
margin-top: 14px;
padding-top: 9px;

border-top:
1px solid rgba(177,135,61,.30);

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 600;
line-height: 1.2;

letter-spacing: .08em;
text-transform: uppercase;
}

/* ----------------------------------------------------------
Hover
---------------------------------------------------------- */

.vh-random-letter-link:hover
.vh-random-letter-person,

.vh-random-letter-link:hover
.vh-random-letter-more {
color: var(--gold);
}

/* ----------------------------------------------------------
MAIN TITLE / INTRO
---------------------------------------------------------- */

.vh-intro {
position: relative;
z-index: 8;

grid-column: 1;
grid-row: 1;

width: 650px;
min-width: 0;

padding-top: 36px;
padding-left: 145px;
}

.vh-main-title {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(64px, 5.2vw, 94px);
font-weight: 700;
line-height: .88;
letter-spacing: -.025em;
color: var(--green);
}

.vh-description,
.vh-quote-text,
.vh-quote-source,
.vh-discover-primary,
.vh-discover-secondary,
.vh-gateway-text,
.vh-feature-copy,
.vh-network-mission {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

.vh-subtitle,
.vh-top-links,
.vh-small-heading,
.vh-gateway-title,
.vh-section-title,
.vh-feature-copy small,
.vh-network-grid small {
font-family: Arial, Helvetica, sans-serif;
}

.vh-gold-rule {
width: 35px;
height: 2px;

margin: 27px 0 18px;

background: var(--gold);
}

/* ==========================================================
ROTATING ŚRĪLA PRABHUPĀDA SUBTITLE
========================================================== */

.vh-description {
width: 700px;
max-width: 700px;
min-height: 64px;

color: var(--text);

font-size: 26px;
line-height: 1.48;

opacity: 1;
transition: opacity .45s ease;
left: 50px;
bottom: 0px;
background: transparent;
}

.vh-description.is-changing {
opacity: 0 !important;
}

/* ==========================================================
HERO PHOTO AREA
========================================================== */

.vh-photo-stage {
position: relative;
z-index: 2;

grid-column: 1;
grid-row: 1;

width: 790px;
justify-self: end;
margin: 0 35px 0 0;

overflow: hidden;
pointer-events: none;
height: calc(105% + 90px);
top: -85px;

}

.vh-photo {
position: absolute;
inset: 0;

background-position: center center;
background-repeat: no-repeat;
background-size: cover;

opacity: 0;

filter:
grayscale(.10)
sepia(.06)
saturate(.82)
contrast(.96);

transition: opacity 5s ease-in-out;

border-radius: 50;

-webkit-mask-image:
radial-gradient(
ellipse 54% 60% at 50% 50%,
black 58%,
rgba(0,0,0,.99) 64%,
rgba(0,0,0,.92) 70%,
rgba(0,0,0,.78) 77%,
rgba(0,0,0,.58) 84%,
rgba(0,0,0,.36) 90%,
rgba(0,0,0,.16) 95%,
rgba(0,0,0,.05) 98%,
transparent 100%
),
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
);

-webkit-mask-composite:
source-in,
source-in;

mask-image:
radial-gradient(
ellipse 54% 60% at 50% 50%,
black 58%,
rgba(0,0,0,.99) 64%,
rgba(0,0,0,.92) 70%,
rgba(0,0,0,.78) 77%,
rgba(0,0,0,.58) 84%,
rgba(0,0,0,.36) 90%,
rgba(0,0,0,.16) 95%,
rgba(0,0,0,.05) 98%,
transparent 100%
),
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
);

mask-composite:
intersect,
intersect;
}

/* ==========================================================
DISCOVER
========================================================== */

/* ==========================================================
THEMATIC ARTICLE SPOTLIGHT
========================================================== */

.vh-discover {
position: relative;
z-index: 9;

grid-column: 2;
grid-row: 1;

top: 28px;

width: 220px;
height: calc(100% - 0px);

margin: 0;
padding-left: 24px;

border-left: 1px solid rgba(177,135,61,.35);

font-size: 11px;
line-height: 1.42;
}

/* Section heading */

.vh-discover-heading {
font-size: 18px;
line-height: 1.35;
letter-spacing: .12em;
color: var(--gold);
}

/* Random article container */

#vh-random-article {
margin-top: 28px;

transition:
opacity .7s ease,
transform .7s ease;
}

#vh-random-article.is-changing {
opacity: 0;
transform: translateY(5px);
}

/* Whole article preview is clickable */

.vh-random-article-link {
display: block;
color: inherit;
text-decoration: none !important;
}

/* Article title */

.vh-random-article-title {
color: var(--green);

font-family: "Noto Serif", Georgia, serif;
font-size: 18px;
font-weight: 400;
line-height: 1.18;

margin-bottom: 13px;
}

/* First lines of article */

.vh-random-article-extract {
color: var(--text);

font-family: "Noto Serif", Georgia, serif;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}

/* Read article link */

.vh-random-article-more {
margin-top: 15px;
padding-top: 10px;

border-top: 1px solid rgba(177,135,61,.35);

color: var(--gold);

font-size: 10px;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
}

/* Hover */

.vh-random-article-link:hover .vh-random-article-title,
.vh-random-article-link:hover .vh-random-article-more {
color: var(--gold);
}

/* ==========================================================
GATEWAYS
========================================================== */

.vh-gateways {
position: absolute;
left: 170px;
bottom: 35px;
z-index: 20;

display: flex;
align-items: stretch;

width: 1000px;
height: 125px;
}

.vh-gateway {
position: relative;

flex: 1 1 150px;
min-width: 140px;

padding: 0 8px;

text-align: center;
}

/* Taller separators between gateways */
.vh-gateway:not(:last-child)::after {
content: "";

position: absolute;

right: 0;

top: 15px;
bottom: 15px;

width: 1px;

background: rgba(18,63,56,.18);

pointer-events: none;
}

.vh-gateway:last-child {
border-right: 0;
}

.vh-icon {
display: block;

height: 50px;

color: var(--green);

font-size: 29px;
line-height: 45px;
}

.vh-gateway-title {
margin: 4px 0 4px;

color: var(--text);

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
letter-spacing: .05em;
}

.vh-gateway-title a {
display: inline !important;
color: var(--text) !important;
}

.vh-gateway-text {
font-size: 18px;
line-height: 1.12;
}

.vh-gateway-text.vh-gateway-links {
font-size: 18px;
line-height: 1.12;
}

.vh-gateway-links a {
margin: 0 !important;
}

/* ==========================================================
CONTINUOUS LIFE TIMELINE
========================================================== */

.vh-lifeline-window {
position: relative;
z-index: 10;

height: 116px;
margin-top: 30px;

width: 100vw;
max-width: 100vw;

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

overflow: hidden;

cursor: grab;

user-select: none;
-webkit-user-select: none;
}

.vh-lifeline-window:active {
cursor: grabbing;
}

.vh-lifeline {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;

touch-action: pan-y;
}

.vh-timeline-track {
position: absolute;
top: 0;
left: 0;

display: flex;
align-items: flex-start;

width: max-content;
height: 100%;

will-change: transform;
}

/* horizontal line */

.vh-timeline-track::before {
content: "";

position: absolute;
left: 0;
right: 0;
top: 42px;

height: 1px;

background: rgba(177,135,61,.55);
}

/* one timeline event */

.vh-timeline-item {
position: relative;
flex: 0 0 220px;
box-sizing: border-box;
padding: 10px 20px 0;
color: var(--green);
text-decoration: none !important;
}

/* date */

.vh-timeline-date {
height: 21px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 600;

line-height: 1.2;
letter-spacing: .06em;

text-transform: uppercase;
}

/* dot */

.vh-timeline-dot {
position: absolute;

top: 38px;
left: 20px;

width: 8px;
height: 8px;

border-radius: 50%;

background: var(--green);

border: 2px solid #f6f2e9;

box-sizing: border-box;

z-index: 2;
}

/* short event text */

.vh-timeline-text {
margin-top: 24px;

max-width: 175px;

color: var(--text);

font-family: "Noto Serif", Georgia, serif;
font-size: 11px;
font-weight: 400;

line-height: 1.35;
}

/* hover */

.vh-timeline-item:hover .vh-timeline-date,
.vh-timeline-item:hover .vh-timeline-text {
color: var(--gold);
}

/* subtle edge fade */

.vh-lifeline-window::before,
.vh-lifeline-window::after {
content: "";

position: absolute;
top: 0;
bottom: 0;

width: 65px;

z-index: 20;

pointer-events: none;
}

.vh-lifeline-window::before {
left: 0;

background:
linear-gradient(
to right,
#f6f2e9,
rgba(246,242,233,0)
);
}

.vh-lifeline-window::after {
right: 0;

background:
linear-gradient(
to left,
#f6f2e9,
rgba(246,242,233,0)
);
}

/* ==========================================================
TEMPORARY LOGO FALLBACK
Only relevant if you use .vh-logo-temp
========================================================== */

.vh-logo-temp {
width: 58px;
height: 58px;

display: flex;
align-items: center;
justify-content: center;

border: 3px solid var(--gold);
border-radius: 50%;

background: var(--green);

color: #fff;

font-size: 37px;
line-height: 1;
}

/* ==========================================================
MOTION ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

.vh-lifeline {
animation: none !important;
}

.vh-photo,
#vh-discover-content,
.vh-feature-grid {
transition: none !important;
}
}

/* ==========================================================
1366–1500px DESKTOPS
========================================================== */

@media (max-width: 1500px) {

body.page-Main_Page #vani-home {
padding-left: 24px !important;
padding-right: 24px !important;
}

.vh-main-title {
font-size: 67px;
}

.vh-gateways {
width: 585px;
}

.vh-gateway {
padding-left: 8px;
padding-right: 8px;
}

.vh-bottom {
grid-template-columns:
minmax(560px, 1.12fr)
minmax(570px, 1fr);

gap: 20px;
}

.vh-network-grid {
grid-template-columns:
repeat(4, 88px)
minmax(150px, 1fr);
}

.vh-wordmark {
font-size: 30px;
}

.vh-subtitle {
font-size: 9px;
}
}

/* ==========================================================
1200–1365px DESKTOPS
========================================================== */

@media (max-width: 1365px) {

.vh-main-title {
font-size: 61px;
}

.vh-description {
font-size: 12px;
}

.vh-gateways {
width: 525px;
}

.vh-gateway-text {
font-size: 9px;
}

.vh-gateway-title {
font-size: 9px;
}

.vh-bottom {
grid-template-columns:
1.05fr
.95fr;
}

.vh-network-grid {
grid-template-columns:
repeat(4, 78px)
minmax(140px, 1fr);
}
}

/* ==========================================================
SMALL GATEWAY DESTINATION LINKS
========================================================== */

.vh-gateway-links {
line-height: 1.65;
}

/* Individual links */

.vh-gateway-links a {
position: relative;

display: inline-block !important;

color: var(--green) !important;
text-decoration: none !important;

font-weight: 500;

opacity: .82;

transition:
color .22s ease,
opacity .22s ease,
transform .22s ease;
}

/* Very fine underline */

.vh-gateway-links a::after {
content: "";

position: absolute;

left: 50%;
bottom: -2px;

width: 0;
height: 1px;

background: var(--gold);

transform: translateX(-50%);

transition:
width .28s cubic-bezier(.2,.8,.2,1);
}

/* Hover */

.vh-gateway-links a:hover {
color: var(--gold) !important;
opacity: 1;

transform: translateY(-1px);
}

.vh-gateway-links a:hover::after {
width: 100%;
}

/* Separators */

.vh-link-sep {
margin: 0 3px;

color: var(--gold);
opacity: .55;
}

.vh-gateway-links a {
animation: vh-link-arrive .65s ease both;
}

.vh-gateway-links a:nth-of-type(1) {
animation-delay: .45s;
}

.vh-gateway-links a:nth-of-type(2) {
animation-delay: .60s;
}

.vh-gateway-links a:nth-of-type(3) {
animation-delay: .75s;
}

.vh-gateway-links a:nth-of-type(4) {
animation-delay: .90s;
}

@keyframes vh-link-arrive {

from {
opacity: 0;
transform: translateY(4px);
}

to {
opacity: .82;
transform: translateY(0);
}
}

/* Prevent popups */
body.page-Main_Page #vani-home a[title]:hover::after {
content: none !important;
display: none !important;
}

/* ==========================================================
MAIN PAGE — REMOVE STRAY TOP/BOTTOM SKIN STRIPS
========================================================== */

/* Force every outer Vector wrapper behind homepage to cream */
body.page-Main_Page,
body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner,
body.page-Main_Page .mw-content-container,
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page .mw-body-content,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
background: #f6f2e9 !important;
}

/* MediaWiki sometimes creates empty paragraphs around the page markup */
body.page-Main_Page .mw-parser-output > p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}

/* Remove any residual top/bottom spacing around parser output */
body.page-Main_Page .mw-parser-output > p:first-child {
display: none !important;
}

/* No outer spacing around homepage */
body.page-Main_Page #vani-home {
margin: 0 !important;
}

body.page-Main_Page .mw-footer-container,
body.page-Main_Page footer,
body.page-Main_Page #footer {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
}

body.page-Main_Page .mw-jump-link {
display: none !important;
}

body.page-Main_Page,
body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner {
margin-top: 0 !important;
padding-top: 0 !important;
background: #f6f2e9 !important;
}

.vh-intro::before {
content: "";

position: absolute;
z-index: -1;

left: -20px;
top: 0;
bottom: 0;

width: 500px;
height: 500px;
pointer-events: none;
}

body.page-Main_Page #vani-home .vh-main-title,
body.page-Main_Page #vani-home .vh-gold-rule,
body.page-Main_Page #vani-home .vh-description {
position: relative !important;
left: 60px !important;
}

/* ==========================================================
FROM HIS LETTERS — LEFT PANEL
========================================================== */

/*
* Keep .vh-now because it positions the left column.
* It is now only an internal technical class name.
*/

.vh-now {
position: absolute;
z-index: 15;

top: 28px;
left: -20px;

width: 180px;
height: calc(100% - 0px);

box-sizing: border-box;

padding: 20px 18px 20px 0;

border-right: 1px solid rgba(177,135,61,.35);

text-align: left;

font-size: 11px;
line-height: 1.42;
}

.vh-letter-heading {
display: block;
width: 100%;
height: auto;

margin: 0 0 22px;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--gold);

font-size: 13px;
font-weight: 600;
line-height: 1.35;
letter-spacing: .12em;

text-align: center;
}

/* ==========================================================
HERO TITLE — WHO IS REVEAL
========================================================== */

.vh-hero-title-wrap {
position: relative;
display: inline-block;
}

.vh-hero-title-link {
position: relative;
display: inline-block;
}

/* MediaWiki-generated link wrapping everything */

.vh-hero-title-link > a {
display: block;
position: relative;

color: inherit;
text-decoration: none !important;
}

.vh-who-corner {
position: absolute;

/* VERTICAL POSITION */
top: 3px;

/* HORIZONTAL POSITION */
right: -5px;

/* SIZE */
font-size: 40px;

color: var(--green);
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 700;
line-height: .88;
letter-spacing: -.025em;

white-space: nowrap;

opacity: 0;
transform: translateX(-18px);

transition:
opacity .45s ease,
transform .55s cubic-bezier(.22,.7,.25,1);
}

/* Reveal */

.vh-hero-title-wrap:hover .vh-who-corner {
opacity: 1;
transform: translateX(0);
}

/* No standard link effects */

.vh-hero-title-link a:hover,
.vh-hero-title-link a:visited {
color: inherit;
text-decoration: none !important;
}

/* ==========================================================
WHO IS ŚRĪLA PRABHUPĀDA?
========================================================== */

.vh-who-link {
position: absolute;

left: 4px;
bottom: -39px;

z-index: 30;

opacity: 0;
transform: translateY(-7px);

pointer-events: none;

transition:
opacity .35s ease,
transform .35s ease;
}

.vh-who-link a {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 8px 13px 7px;

border: 1px solid rgba(177,135,61,.65);
border-radius: 2px;

background: rgba(246,242,233,.88);

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1;

letter-spacing: .10em;
text-transform: uppercase;

text-decoration: none !important;

transition:
color .25s ease,
border-color .25s ease,
background .25s ease;
}

.vh-who-arrow {
position: relative;
top: -1px;

font-size: 14px;
line-height: 1;

transition: transform .25s ease;
}

/* Reveal ONLY when interacting with the hero title */

.vh-hero-title-wrap:hover .vh-who-link {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

/* Button hover */

.vh-who-link a:hover {
color: var(--green);

border-color: var(--gold);

background: rgba(246,242,233,.98);
}

.vh-who-link a:hover .vh-who-arrow {
transform: translateX(3px);
}

.vh-lifeline-window {
cursor: grab;
user-select: none;
-webkit-user-select: none;
}

.vh-lifeline-window.is-dragging {
cursor: grabbing;
}

.vh-timeline-item {
-webkit-user-drag: none;
user-drag: none;
}

.vh-timeline-item:hover .vh-timeline-dot {
transform: scale(1.5);
}

.vh-timeline-dot {
transition: transform .2s ease;
}

/* Timeline must follow JS position immediately */
body.page-Main_Page #vani-home .vh-timeline-track {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
transform-origin: 0 0;
}

body.page-Main_Page #vani-home .vh-timeline-item {
transition: none !important;
}

/* ==========================================================
VIRTUAL TIMELINE PERFORMANCE
========================================================== */

body.page-Main_Page #vani-home .vh-timeline-track {
display: flex;
position: absolute;

top: 0;
left: 0;

height: 100%;

transition: none !important;
animation: none !important;

will-change: transform;

transform-style: flat;
}

body.page-Main_Page #vani-home .vh-timeline-item {
flex: 0 0 220px;

width: 220px;

transition: none !important;
animation: none !important;

-webkit-user-drag: none;
}

body.page-Main_Page #vani-home .vh-lifeline-window {
cursor: grab;

user-select: none;
-webkit-user-select: none;

touch-action: pan-y;
}

body.page-Main_Page #vani-home .vh-lifeline-window.is-dragging {
cursor: grabbing;
}

/* ==========================================================
TIMELINE YEAR NAVIGATION
========================================================== */

.vh-timeline-section {
position: relative;
top: 12px;
}

.vh-timeline-years {
display: flex !important;
align-items: center;
justify-content: center;

width: 100%;

gap: 22px;

margin: 0 0 10px;
padding: 0;
position: relative;
top: 35px;
white-space: nowrap;

font-family: Arial, Helvetica, sans-serif;
}

.vh-timeline-years .vh-year {
display: inline-block;

margin: 0;
padding: 4px 2px;

color: rgba(18,63,56,.62);

font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1;

letter-spacing: .04em;

cursor: pointer;

user-select: none;
-webkit-user-select: none;

transition:
color .2s ease,
transform .2s ease;
}

.vh-timeline-years .vh-year:hover {
color: var(--gold);
transform: translateY(-1px);
}

.vh-timeline-years .vh-year.is-active {
color: var(--gold);
font-weight: 700;
}

/* Random quotes */
.vh-quote {
height: 82px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 40px;
border-top: 1px solid rgba(177,135,61,.25);
border-bottom: 1px solid rgba(177,135,61,.25);
margin-top: 26px;
}

.vh-quote-inner {
flex: 1 1 auto;
min-width: 0;
max-width: 1500px;
text-align: center;
}

.vh-quote-text {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

color: var(--text);
font-size: clamp(20px, 1.65vw, 29px);
line-height: 1.16;
}

.vh-quote-source {
margin-top: 7px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;

color: var(--gold);
font-size: 12px;
line-height: 1;
}

.vh-quote-source::before,
.vh-quote-source::after {
content: "";
width: 74px;
height: 1px;
background: rgba(177,135,61,.45);
flex: 0 0 auto;
}

.vh-quote-source a {
color: inherit !important;
text-decoration: none !important;
}

.vh-quote-source a:hover {
color: var(--green) !important;
}

.vh-quote-mark {
position: relative;
top: 15px;

flex: 0 0 auto;
color: var(--gold);
font-size: 93px;
line-height: 1;
}

#vh-random-quote,
#vh-random-quote-source {
transition: opacity .45s ease;
}

#vh-random-quote.is-changing,
#vh-random-quote-source.is-changing {
opacity: 0;
}

.vh-featured {
width: auto;
padding-right: 0;
}

.vh-featured .vh-section-title {
display: flex;
align-items: center;
gap: 12px;

margin-bottom: 13px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;

letter-spacing: .08em;
white-space: nowrap;
}

.vh-featured .vh-section-title::after {
content: "";

width: 85px;
height: 1px;

background: rgba(177,135,61,.45);
}
/* ==========================================================
BOTTOM AREA
========================================================== */

.vh-bottom {
display: grid;

grid-template-columns:
minmax(760px, 1.3fr)
minmax(600px, 1fr);

column-gap: 32px;

align-items: start;

margin-top: 18px;

padding-top: 18px;
padding-bottom: 10px;
}

.vh-featured,
.vh-network {
min-width: 0;
}

/* ==========================================================
TREASURES OF THE VANI — TITLE
========================================================== */

.vh-featured .vh-section-title {
display: flex;
align-items: center;
gap: 12px;

margin: 0 0 13px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;

letter-spacing: .08em;
white-space: nowrap;
}

.vh-featured .vh-section-title::after {
content: "";

width: 85px;
height: 1px;

background: rgba(177,135,61,.45);
}

/* ==========================================================
TREASURES OF THE VANI — GRID
========================================================== */

.vh-feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));

gap: 14px;
margin-top: 0;
}

/* ==========================================================
INDIVIDUAL TREASURE CARD
========================================================== */

.vh-feature {
display: grid;
grid-template-columns: 48% 52%;

height: 125px;
min-width: 0;
overflow: hidden;

border-radius: 6px;

background: #f3ecdf;

cursor: pointer;

transition: transform .2s ease;
}

.vh-feature:hover {
transform: translateY(-2px);
}

.vh-feature a {
color: inherit;
text-decoration: none !important;
}

/* ==========================================================
MEDIA AREA
========================================================== */

.vh-feature-media,
.vh-feature-audio {
position: relative;

width: 100%;
height: 125px;

box-sizing: border-box;
overflow: hidden;

border-radius: 6px 0 0 6px;

background: #f3ecdf;
}

/* Normal video/image cards */

.vh-feature-video .vh-feature-media,
.vh-feature-imagequote .vh-feature-media {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* SHORT
Keep complete vertical YouTube Shorts thumbnail visible.
*/

.vh-feature-short .vh-feature-media {
background-position: center;
background-repeat: no-repeat;
background-size: contain;

background-color: #f3ecdf;
}

/* ==========================================================
TEXT PANEL ON RIGHT
========================================================== */

.vh-feature-copy {
min-width: 0;
box-sizing: border-box;

padding: 3px 10px 5px 12px;

background: #f3ecdf;

border-radius: 0 6px 6px 0;
}

.vh-feature-copy small,

/* SHORT / VIDEO / IMAGE QUOTE / NECTAR DROP */

.vh-feature-copy small {
margin-bottom: 5px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;

letter-spacing: .08em;
text-transform: uppercase;
}

/* Actual title */

.vh-feature-copy strong {
display: block;

color: var(--green);

font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 700;
line-height: 1.08;
}

/*
* Metadata currently not needed.
* Keep it hidden so dates do not appear underneath.
*/

.vh-feature-copy span {
display: none;
}

/* ==========================================================
NECTAR DROP
========================================================== */

.vh-feature-audio {
display: flex;
align-items: center;
justify-content: center;

background: #f3ecdf;
}

.vh-feature-audio-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
font-size: 37px;

border: 1px solid rgba(177,135,61,.50);
border-radius: 50%;

color: var(--gold);
line-height: 1;

cursor: pointer;

transition:
transform .2s ease,
background .2s ease;
}

.vh-feature-nectar:hover .vh-feature-audio-icon {
transform: scale(1.06);
background: rgba(177,135,61,.08);
}

/* ==========================================================
VANI NETWORK
========================================================== */

.vh-network .vh-section-title {
display: flex;
align-items: center;
gap: 12px;

margin: 0 0 13px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .08em;

white-space: nowrap;
}

.vh-network .vh-section-title::after {
content: "";
width: 85px;
height: 1px;

background: rgba(177,135,61,.45);
}

.vh-network-row {
display: flex !important;
flex-direction: row !important;
align-items: stretch;

width: 100%;
height: 125px;
}

.vh-network-stat {
flex: 0 0 120px;
min-width: 120px;

box-sizing: border-box;

padding: 5px 10px 0;

text-align: center;
border-left: 1px solid rgba(18,63,56,.16);
border-right: 1px solid rgba(18,63,56,.16);

cursor: pointer;

transition:
background .22s ease,
transform .22s ease;
}

.vh-network-stat > a {
display: block;
width: 100%;
height: 100%;

color: inherit !important;
text-decoration: none !important;
}

.vh-network-stat:hover {
background: rgba(177,135,61,.08);
transform: translateY(-3px);
}

.vh-network-stat:hover .vh-network-icon {
transform: scale(1.12);
color: var(--gold);
}

.vh-network-stat:hover strong {
color: var(--gold);
}

.vh-network-icon {
display: flex;
align-items: center;
justify-content: center;

height: 42px;

color: var(--green);

font-size: 32px;
line-height: 1;

transition:
transform .22s ease,
color .22s ease;
}

.vh-icon-quotes {
font-family: Georgia, "Times New Roman", serif;
font-size: 60px;
line-height: 1;

position: relative;
top: 10px;
}

.vh-network-stat strong {
display: block;

margin-top: -8px;

color: var(--green);

font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
white-space: nowrap;
line-height: 1;
font-size: 21px;
}

.vh-icon-quotes + strong {
white-space: normal;
line-height: 1;
font-size: 19px;
}

.vh-network-stat small {
display: block;

margin-top: 8px;

color: var(--green);

font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 700;
line-height: 1.25;
letter-spacing: .04em;
}

/* ==========================================================
VANI NETWORK MISSION
========================================================== */

.vh-network-mission {
display: flex;
align-items: center;

flex: 1 1 auto;
min-width: 430px;
height: 125px;

box-sizing: border-box;
padding: 0 0px 0 10px;

border-left: 1px solid rgba(18,63,56,.16);

cursor: pointer;
transition: background .22s ease;
}

.vh-network-world {
flex: 0 0 150px;

display: flex;
align-items: center;
justify-content: flex-start;

margin-right: 0px;
}

.vh-network-mission-text {
flex: 1 1 auto;
min-width: 250px;

color: var(--green);

font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
}

.vh-network-mission:hover {
background: rgba(177,135,61,.08);
}

.vh-network-mission:hover .vh-network-world img {
transform: scale(1.05);
opacity: 1;
}

/* ==========================================================
RESPONSIVE BOTTOM AREA
========================================================== */

@media (max-width: 1500px) {

.vh-bottom {
grid-template-columns:
minmax(650px, 1.2fr)
minmax(650px, 1fr);

column-gap: 20px;
}

.vh-feature-grid {
gap: 10px;
}

.vh-feature {
grid-template-columns: 47% 53%;
}

.vh-feature-copy {
padding-left: 9px;
padding-right: 7px;
}

.vh-network-stat {
flex: 0 0 110px;
min-width: 110px;
}
}

@media (max-width: 1365px) {

.vh-bottom {
grid-template-columns:
minmax(600px, 1.1fr)
minmax(620px, 1fr);
}

.vh-feature-grid {
gap: 8px;
}

.vh-network-stat {
flex: 0 0 105px;
min-width: 105px;
}
}

/* =====================================================
SOCIAL PLATFORM STATISTICS
===================================================== */

/* Month / year title */

.social-stats-title {
margin: 30px 0 10px;
padding-bottom: 7px;

font-size: 25px;
line-height: 1.25;
font-weight: 700;

color: #202122;
border-bottom: 2px solid #2a4452;
}

/* Clickable statistics bar */

.social-stats-header {
display: flex !important;
flex-direction: row !important;
align-items: stretch;

width: 100%;
box-sizing: border-box;

background: #fff;
border: 2px solid #2a4452;
border-radius: 8px;

overflow: hidden;
cursor: pointer;
}

.social-stats-header:hover {
background: #7fbd97;
}

/* Platform blocks */

.social-stats-platform {
flex: 1 1 0;
min-width: 0;

display: flex;
flex-direction: column;
justify-content: center;

padding: 16px 20px;

border-right: 1px solid #c8ccd1;
}

.social-stats-name {
margin-bottom: 4px;

font-size: 12px;
font-weight: 600;
color: #72777d;

text-transform: uppercase;
letter-spacing: .04em;
}

.social-stats-views {
font-size: 21px;
line-height: 1.2;
font-weight: 700;

color: #202122;
}

/* Details */

.social-stats-open {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;

padding: 0 20px;

font-size: 14px;
font-weight: 600;

color: #2a4452;
background: #eef2f4;

white-space: nowrap;
}

.social-stats-arrow {
font-size: 10px;
}

/* Expanded report */

.social-stats-details {
box-sizing: border-box;

margin-top: -2px;
padding: 24px 28px 30px;

background: #fff;

border: 2px solid #2a4452;
border-top: 1px solid #c8ccd1;
border-radius: 0 0 8px 8px;
}

.social-stats-number {
font-size: 21px;
line-height: 1.15;
font-weight: 700;
color: #202122;
}

.social-stats-view-label {
margin-top: 2px;

font-size: 11px;
line-height: 1.2;

color: #72777d;
}

/* ==========================================================
IMAGE QUOTE POPUP
========================================================== */

#vh-imagequote-lightbox {
position: fixed;
z-index: 100000;

/* positioned by JS */
top: auto;
left: auto;

display: block;
padding: 0;

background: transparent;

opacity: 0;
visibility: hidden;
pointer-events: none;

transition:
opacity .2s ease,
visibility .2s ease;
}

#vh-imagequote-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

#vh-imagequote-lightbox img {
display: block;

width: 20vw;
max-width: 380px;
min-width: 260px;
height: auto;
max-height: 55vh;

object-fit: contain;

border-radius: 6px;

box-shadow:
0 8px 28px
rgba(0, 0, 0, .28);
}

.vh-imagequote-lightbox-close {
position: absolute;
z-index: 2;

top: 5px;
right: 7px;

width: 28px;
height: 28px;

padding: 0;
border: 0;
border-radius: 50%;

background: rgba(0, 0, 0, .55);
color: #fff;

font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
line-height: 26px;

cursor: pointer;
}

/* Nectar Drop audio activity */

.vh-feature-audio {
flex-direction: column;
gap: 10px;
}

.vh-nectar-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;

height: 18px;

opacity: 0;
transition: opacity .2s ease;
}

.vh-nectar-wave.is-playing {
opacity: 1;
}

.vh-nectar-wave span {
width: 2px;
height: 4px;

border-radius: 2px;
background: var(--gold);

transform-origin: center;
}

.vh-nectar-wave.is-playing span {
animation: vhNectarWave .75s ease-in-out infinite alternate;
}

.vh-nectar-wave.is-playing span:nth-child(2) {
animation-delay: -.45s;
}

.vh-nectar-wave.is-playing span:nth-child(3) {
animation-delay: -.20s;
}

.vh-nectar-wave.is-playing span:nth-child(4) {
animation-delay: -.60s;
}

.vh-nectar-wave.is-playing span:nth-child(5) {
animation-delay: -.30s;
}

.vh-nectar-wave.is-playing span:nth-child(6) {
animation-delay: -.55s;
}

.vh-nectar-wave.is-playing span:nth-child(7) {
animation-delay: -.10s;
}

@keyframes vhNectarWave {

0% {
height: 3px;
}

100% {
height: 16px;
}
}

/* Nectar audio area — never scroll */

.vh-feature-nectar .vh-feature-audio {
overflow: hidden !important;
}

.vh-feature-nectar .vh-nectar-wave {
flex-shrink: 0;
}

/* Video + Nectar Drop title limit */

.vh-feature-video .vh-feature-copy strong,
.vh-feature-nectar .vh-feature-copy strong {
font-size: 13px;
line-height: 1.08;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}

/* =========================================================
VANIPEDIA FLIPBOOK POPUP
========================================================= */

.vani-flipbook-trigger {
display: inline-block;
cursor: pointer;
}

.vani-flipbook-trigger img {
display: block;
max-width: 100%;
height: auto;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.vani-flipbook-trigger:hover img {
transform: translateY(-3px);

box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.22);
}

/* Full-screen dark overlay */

#vani-flipbook-overlay {
position: fixed;

top: 0;
right: 0;
bottom: 0;
left: 0;

z-index: 100000;

display: none;

align-items: center;
justify-content: center;

padding: 20px;

background:
rgba(15, 20, 18, 0.90);
}

#vani-flipbook-overlay.is-open {
display: flex;
}

/* Popup */

.vani-flipbook-modal {
position: relative;

width: calc(100vw - 80px);
height: calc(100vh - 40px);

max-width: 1800px;

overflow: hidden;

background: #d9d6cf;

border-radius: 6px;

box-shadow:
0 20px 70px
rgba(0, 0, 0, 0.55);
}

/* Iframe holder */

#vani-flipbook-frame-holder {
position: absolute;

top: 0;
right: 0;
bottom: 0;
left: 0;

width: 100%;
height: 100%;

overflow: hidden;
}

/* Actual flipbook iframe */

#vani-flipbook-frame {
display: block;

width: 100%;
height: 100%;

margin: 0;
padding: 0;

border: 0;

background: #d9d6cf;
}

/* Close button */

.vani-flipbook-close {
position: absolute;

top: 10px;
right: 10px;

z-index: 100001;

width: 42px;
height: 42px;

padding: 0;

border: 0;
border-radius: 50%;

background:
rgba(20, 20, 20, 0.80);

color: #ffffff;

font-family:
Arial,
sans-serif;

font-size: 30px;
line-height: 42px;

text-align: center;

cursor: pointer;
}

.vani-flipbook-close:hover {
background: #000000;
}

body.vani-flipbook-open {
overflow: hidden;
}

/* Mobile */

@media (max-width: 720px) {

#vani-flipbook-overlay {
padding: 0;

width: 100%;
height: 100vh;
height: 100dvh;
}

.vani-flipbook-modal {
width: 100%;
height: 100vh;
height: 100dvh;

max-width: none;
border-radius: 0;
}

}

/* =========================================
VANIPEDIA INSPIRATION
========================================= */

/* Image */

.vision-layout-wrapper .vision-logo {
width: 100%;
text-align: center;
margin: 0 auto 22px;
}

.vision-layout-wrapper .vision-logo img {
display: block;
max-width: 350px;
height: auto;
margin: 0 auto;
}

/* Two button columns */

.vision-buttons-container {
display: flex;
width: 100%;
gap: 14px;
align-items: stretch;
}

.vision-buttons-container .vision-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
gap: 14px;
min-width: 0;
}

/* Light green buttons */

.vision-buttons-container .vision-btn {
background-color: #91cfa9;
border-bottom: 3px solid #2a4452;
border-radius: 6px;
}

.vision-buttons-container .vision-btn:hover {
background-color: #7fbd97;
}

.vision-buttons-container .vision-btn a,
.vision-buttons-container .vision-btn a.external {
color: #1f4033 !important;
}

/* Mobile */

@media (max-width: 700px) {

.vision-buttons-container {
flex-direction: column;
}
}

MediaWiki:Common.css

2026-09-17T04:33:37Z

Kashya:

/* CSS placed here will be applied to all skins
The use of the ID tag (#) is being phased out to be replaced by classes (.) where appropriate
*/

.greentext { /* Usage: <span class="greentext">vaniquotes.org</span> */
color: #296F39; /* #296F39=green */
}
.noautonum .tocnumber {
display: none;
}
.journaltable { /* Usage: {| class="journaltable" */
max-width: 108em;
min-width: 65em;
}
.daystext { /* Usage: <span class="daystext">Text Here</span> */
color: #296F39; /* #296F39 = Green */
}
.daystextb { /* Usage: <span class="daystextb">Text Here</span> */
color: #296F39; /* #296F39 = Green */
font-weight: bold;
}
.lec_code { /* Used on all lecture and converstion pages */
font-weight:bold;
}
.code {
font-weight:bold;
font-size: 90%;
}
.quotelink { /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
body.page-Main_Page h1.firstHeading { /* Don't display some stuff on the main page */
display: none !important;
}

/* Remove white border from thumbnails */
div.thumb {
border: none;
}
div.tright {
border: none;
margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
border: none;
margin: 0.5em 1.4em 0.8em 0;
}
.MainHeader h4 {
margin:0!important;
padding:0.2em 0.4em;
}
.highlight_quote {
background-color: #F9F7E0;
margin: 0px;
padding: 4px 2px;
}
.highlight_terms {
background-color: #EEE8AA;
}

/* ----------------- Book styles ----------------- */
.devanagari { /* Usage: <div class="devanagari"> */
color: #000000; /* Font color #0000 = black */
font-weight: bold;
}

.verse { /* Usage: <div class="verse"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
}
.versecenter{ /* Usage: <div class="versecenter"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
text-align: center;
}
.synonyms { /* Usage: <div class="synonyms"> */
color: #000000; /* Font color #0000 = black */
}
.translation { /* Usage: <div class="translation"> */
color: #000000; /* Font color #0000 = black or #296F39 = green */
font-weight: bold;
}
.purport { /* Usage: <div class="purport"> */
color: #000000; /* Font color #0000 = black */
}
*:not(a).text { /* Usage: <div class="text"> */
color: #000000; /* Font color #0000 = black */
}
a[href*="syno_o"]:visited {
color: purple;
}

/* --- Begin OLD book style for 1965 SB (maybe replace with .verse after adding colons to beginning of verse lines) --- */
.SB65verse { /* 1962-65 SB */
white-space: pre-line; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
text-align: center; /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
color: #000000; /* Font color #0000 = black */
}
/* ----------------- End old books styles ----------------- */
/* ----------------- End book styles ----------------- */

/* ----------------- New stuff, sort out later -------------------- */
body.page-Main_Page h2, body.page-Talk_Main_Page h2 {
background: #f9f9f9;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
margin: 1em 0;
color: #B5BD64;
font-family: georgia;
font-weight: bold;
text-align: center;
}
#banner {
text-align: center;
background: #f9f9f9;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
font-size: 125%;
}
#mainbanner {
text-align: center;
background: #66806A;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
color: #faf2af;
font-family: georgia;
font-size: 150%;
font-style: italic;
}
#mainlinks {
text-align: center;
margin-bottom: 0.5em
}
#mainlinks a {
color: #B5BD64
}
#mainmantra {
text-align: center;
margin-top: 1.5em;
color: #B5BD64;
}
.maincenter {
text-align: center;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;
}
.mainleft {
text-align: left;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;}
.mainjustify {
text-align: justify;
max-width: 65em;
margin: 0px auto;
padding-bottom: 1em;
}
body {
background:#faf2af;
font-family: tahoma;
}
#headertabs {
background: inherit;
}
#headertabs ul li.ui-state-active {
background: #fef8cb;
}
#lastmod {
display: none!important
}
li#ca-unify {
margin-left: 1.6em;
}
#google-search input {
font-size: 95%;
width:10.9em;
}
#searchform {
padding-bottom: 0.5em;
}

.center {
text-align: center;
}

/* ----------------- Begin - Used by Template:NavBar and BG Footer -------------------- */
.verse-nav {
float:right;
}
.prev-link {
float:left;
min-height:22px;
padding:0 0 0 25px;
background:url(/w/images/Go-previous.png) no-repeat left
}
.next-link {
float:left;
min-height:22px;
padding:0 25px;
background:url(/w/images/Go-next.png) no-repeat right
}
.chap-nav, #chap-nav, #book-nav, #page-nav {
float:left
}
/* ----------------- End - Used by Template:NavBar and BG Footer -------------------- */

/* -------------------- BEGIN VANIQUOTES RELATED STYLES -------------------- */
.hlterm {
background-color: yellow;
border: 1px Solid #EE9977;
padding: 1px 2px 1px 2px;
margin: -1px;
}
/* -------------------- END VANIQUOTES RELATED STYLES -------------------- */

/* ----------------- To be deleted when identified as not used ----------------- */
#p-logo a, #p-logo a:hover {
height: 190px;
}
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: Window;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
/*width: 100%;*/
font: menu;
font-size: 12px;
line-height: 16px; /* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
overflow: hidden;
}
.ac_loading {
background : Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: HighlightText;
}
.ac_moreItems {
text-align: center;
background-color: InactiveCaption;
color: InactiveCaptionText;
margin: 0px;
padding: 0px 5px;
cursor: default;
display: block;
width: 100%;
font: bold menu 12px;
overflow: hidden;
-moz-user-select: none;
-khtml-user-select: none;
}
/* ----------------- End to be deleted when identified as not used ----------------- */

/* CSS placed here will be applied to all skins
The use of the ID tag (#) is being phased out to be replaced by classes (.) where appropriate
*/

.greentext { /* Usage: <span class="greentext">vaniquotes.org</span> */
color: #296F39; /* #296F39=green */
}
.noautonum .tocnumber {
display: none;
}
.journaltable { /* Usage: {| class="journaltable" */
max-width: 108em;
min-width: 65em;
}
.daystext { /* Usage: <span class="daystext">Text Here</span> */
color: #296F39; /* #296F39 = Green */
}
.daystextb { /* Usage: <span class="daystextb">Text Here</span> */
color: #296F39; /* #296F39 = Green */
font-weight: bold;
}
.lec_code { /* Used on all lecture and converstion pages */
font-weight:bold;
}
.code {
font-weight:bold;
font-size: 90%;
}
.quotelink { /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
body.page-Main_Page h1.firstHeading { /* Don't display some stuff on the main page */
display: none !important;
}

/* Remove white border from thumbnails */
div.thumb {
border: none;
}
div.tright {
border: none;
margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
border: none;
margin: 0.5em 1.4em 0.8em 0;
}
.MainHeader h4 {
margin:0!important;
padding:0.2em 0.4em;
}
.highlight_quote {
background-color: #F9F7E0;
margin: 0px;
padding: 4px 2px;
}
.highlight_terms {
background-color: #EEE8AA;
}

/* ----------------- Book styles ----------------- */
.devanagari { /* Usage: <div class="devanagari"> */
color: #000000; /* Font color #0000 = black */
font-weight: bold;
}

.verse { /* Usage: <div class="verse"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
}
.versecenter{ /* Usage: <div class="versecenter"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
text-align: center;
}
.synonyms { /* Usage: <div class="synonyms"> */
color: #000000; /* Font color #0000 = black */
}
.translation { /* Usage: <div class="translation"> */
color: #000000; /* Font color #0000 = black or #296F39 = green */
font-weight: bold;
}
.purport { /* Usage: <div class="purport"> */
color: #000000; /* Font color #0000 = black */
}
*:not(a).text { /* Usage: <div class="text"> */
color: #000000; /* Font color #0000 = black */
}
a[href*="syno_o"]:visited {
color: purple;
}

/* --- Begin OLD book style for 1965 SB (maybe replace with .verse after adding colons to beginning of verse lines) --- */
.SB65verse { /* 1962-65 SB */
white-space: pre-line; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
text-align: center; /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
color: #000000; /* Font color #0000 = black */
}
/* ----------------- End old books styles ----------------- */
/* ----------------- End book styles ----------------- */

/* ----------------- New stuff, sort out later -------------------- */
body.page-Main_Page h2, body.page-Talk_Main_Page h2 {
background: #f9f9f9;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
margin: 1em 0;
color: #B5BD64;
font-family: georgia;
font-weight: bold;
text-align: center;
}
#banner {
text-align: center;
background: #f9f9f9;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
font-size: 125%;
}
#mainbanner {
text-align: center;
background: #66806A;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
color: #faf2af;
font-family: georgia;
font-size: 150%;
font-style: italic;
}
#mainlinks {
text-align: center;
margin-bottom: 0.5em
}
#mainlinks a {
color: #B5BD64
}
#mainmantra {
text-align: center;
margin-top: 1.5em;
color: #B5BD64;
}
.maincenter {
text-align: center;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;
}
.mainleft {
text-align: left;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;}
.mainjustify {
text-align: justify;
max-width: 65em;
margin: 0px auto;
padding-bottom: 1em;
}
body {
background:#faf2af;
font-family: tahoma;
}
#headertabs {
background: inherit;
}
#headertabs ul li.ui-state-active {
background: #fef8cb;
}
#lastmod {
display: none!important
}
li#ca-unify {
margin-left: 1.6em;
}
#google-search input {
font-size: 95%;
width:10.9em;
}
#searchform {
padding-bottom: 0.5em;
}

.center {
text-align: center;
}

/* ----------------- Begin - Used by Template:NavBar and BG Footer -------------------- */
.verse-nav {
float:right;
}
.prev-link {
float:left;
min-height:22px;
padding:0 0 0 25px;
background:url(/w/images/Go-previous.png) no-repeat left
}
.next-link {
float:left;
min-height:22px;
padding:0 25px;
background:url(/w/images/Go-next.png) no-repeat right
}
.chap-nav, #chap-nav, #book-nav, #page-nav {
float:left
}
/* ----------------- End - Used by Template:NavBar and BG Footer -------------------- */

/* -------------------- BEGIN VANIQUOTES RELATED STYLES -------------------- */
.hlterm {
background-color: yellow;
border: 1px Solid #EE9977;
padding: 1px 2px 1px 2px;
margin: -1px;
}
/* -------------------- END VANIQUOTES RELATED STYLES -------------------- */

/* ----------------- To be deleted when identified as not used ----------------- */
#p-logo a, #p-logo a:hover {
height: 190px;
}
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: Window;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
/*width: 100%;*/
font: menu;
font-size: 12px;
line-height: 16px; /* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
overflow: hidden;
}
.ac_loading {
background : Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: HighlightText;
}
.ac_moreItems {
text-align: center;
background-color: InactiveCaption;
color: InactiveCaptionText;
margin: 0px;
padding: 0px 5px;
cursor: default;
display: block;
width: 100%;
font: bold menu 12px;
overflow: hidden;
-moz-user-select: none;
-khtml-user-select: none;
}
/* ----------------- End to be deleted when identified as not used ----------------- */

MediaWiki:Common.css

2026-09-17T04:32:30Z

Kashya:

/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');

/* ==========================================================================
1. VANISOURCE CORE UTILITIES & TEXT FORMATTING
========================================================================== */
.cw_0 { display: none; }
.cw_50 { width: 50px; }
.cw_150 { width: 150px; }
.cw_500 { width: 500px; }
.tabs-input { display: none !important; }
.noautonum .tocnumber { display: none; }

.greentext, .quotelink, .nectardroptext, .daystext, .daystextb { color: #296F39; }
.quotelink, .nectardroptext, .daystextb { font-weight: bold; }
.quotelink, .nectardroptext { font-size: 1em; }

.journaltable { max-width: 108em; min-width: 65em; }
.daytable { text-align: left; }
.vanitable {
border: 0.1em solid #BFBFBF;
border-collapse: collapse;
padding: 0.25em;
background-color: #F2F2F2;
text-align: left;
vertical-align: middle;
}
.lec_code { font-weight: bold; }
.code { font-weight: bold; font-size: 90%; }
.highlight_quote { background-color: #F9F7E0; margin: 0px; padding: 4px 2px; }
.highlight_terms { background-color: #EEE8AA; }
.hlterm {
background-color: yellow;
border: 1px Solid #EE9977;
padding: 1px 2px 1px 2px;
margin: -1px;
}
a[href*="syno_o"]:visited { color: purple; }

.timelineh2 { text-align: center; border: 1px solid #ddcef2; background: #F2F2F2; padding: 0.2em 0.4em; margin: auto; overflow: hidden; }
.timelineh3 { text-align: center; border-top: 1px solid #ddcef2; border-bottom: 1px solid #ddcef2; background: #FFFFFF; padding: 0.2em 0.4em; margin: auto; overflow: hidden; }
.timelinesummary { border: thin solid #ddcef2; border-radius: 1em; box-shadow: 0.5em 0.5em 0.5em #888888; background: #FFFFCC; min-width: 77em; margin: 1em auto 3em auto; padding: 1em; text-align: center; }
.timelinelinks { text-align: center; font-size: 132%; font-weight: bold; }
.timelinelinks a { color: #B5BD64; }

.firstchar { float: left; width: 0.7em; font-size: 375%; font-family: algerian, courier; line-height: 80%; }
.MITL_page_nav { text-align: left; border: 1px solid #BFBFBF; background: #FFF2E6; padding: 0.2em 0.4em; margin: auto; }
.daysnav, .monthsnav { display: flex; flex-wrap: wrap; justify-content: center; }
.daysnav .month { margin: 25px 2%; }
.monthsnav .year { margin: 25px 5%; }
.center { text-align: center; }

/* ==========================================================================
2. VANISOURCE BOOK STYLES
========================================================================== */
@font-face { font-family: interDiac; src: url(/css/GauraTimes.ttf); }
.devanagari { color: #000000; font-weight: bold; }
.verse { color: #000000; font-style: italic; }
.versecenter { color: #000000; font-style: italic; text-align: center; }
.verse.inter_diac, .synonyms.inter_diac, .translation.inter_diac, .purport.inter_diac, .text.inter_diac { font-family: interDiac; }
.translation.inter_diac, .purport.inter_diac, .text.inter_diac { font-size: 1.1em; }
.synonyms { color: #000000; }
.translation { color: #000000; font-weight: bold; }
.purport { color: #000000; }
*:not(a).text { color: #000000; }
.SB65verse { white-space: pre-line; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; text-align: center; color: #000000; }
#verse { white-space: pre; }
#translation { color: #000000; font-weight: bold; }

/* ==========================================================================
3. VANISOURCE LEGACY COMPILE & MAIN PAGE CODING
========================================================================== */
.quote { margin: 1.5em 0em; font-family: tahoma; }
.quote_heading { font-weight: bold; color: #296F39; }
.quote_translation, .quote_text, .quote_verse { color: #000000; }
.quote_link, .quote_text a { font-weight: bold; }

body.page-Main_Page h1.firstHeading, body.page-Main_Page #t-cite, body.page-Main_Page #lastmod, body.page-Main_Page #siteSub { display: none !important; }
.MainHeader h4 { margin:0!important; padding:0.2em 0.4em; }

body.page-Main_Page h2, body.page-Talk_Main_Page h2, body.page-Main_Page_test h2, body.page-Main_Page_test h1 { background: #f0f0f0; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; margin: 1em 0; color: #B5BD64; font-family: georgia; font-weight: bold; text-align: center; }
#banner { text-align: center; background: #f9f9f9; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; font-size: 125%; }
#mainbanner { text-align: center; background: #296F39; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; color: #faf2af; font-family: georgia; font-size: 150%; font-style: italic; }
#mainlinks { text-align: center; margin-bottom: 0.5em; font-weight: bold; font-size: 110%; }
#mainlinks a, #mainh2links a { color: #B5BD64; }
#mainmantra { text-align: center; margin-top: 1.5em; color: #B5BD64; }
.maincenter { text-align: center; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainleft { text-align: left; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainjustify { text-align: justify; max-width: 65em; margin: 0px auto; padding-bottom: 1em; }

.vaniquotebox { text-align: left; min-height: 11.6em; border:thin solid #000000; border-radius: 1em; box-shadow: 0.5em 0.5em 1em #bcbcbc; margin: 1em 0em; }
@media screen and (min-width: 800px) { .vaniquotebox { max-width:80%; } }
.vaniquotebox > table { text-align:left; font-size:1em; color:#000000; min-height: 11.5em; margin: 0; }
.vaniquotebox td { padding: 8px; }

/* ==========================================================================
4. VECTOR 2022 STRUCTURAL OVERRIDES (BRAND COLORS MATCHED)
========================================================================== */
:root, .skin-vector-2022, html {
--background-color-base: #faf2af !important;
--background-color-page: #faf2af !important;
--background-color-quiet: #faf2af !important;
--border-color-base: transparent !important;
}

body, #content, .mw-body, #mw-page-base, #mw-head-base {
background: #faf2af !important;
background-image: none !important;
font-family: tahoma;
}

.mw-page-container, .mw-page-container-inner, .mw-content-container, .mw-header,
.vector-header-container, .vector-sticky-header, .vector-column-start, .vector-column-end,
.vector-sidebar-container, .vector-pinnable-element, .vector-toc, #vector-toc,
.vector-toc-pinned-container, .vector-toc-contents, .vector-dropdown-content,
.vector-menu-content, .cdx-menu, .cdx-menu__list {
background-color: #faf2af !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}

#headertabs { background: inherit; }
#headertabs ul li.ui-state-active { background: #fef8cb; }

div.thumb { border: none; }
div.tright { border: none; margin: 0.5em 0 0.8em 1.4em; }
div.tleft { border: none; margin: 0.5em 1.4em 0.8em 0; }
#lastmod { display:none!important; }
li#ca-unify { margin-left:1.6em; }
#google-search input { font-size:95%; width:10.9em; }
#searchform { padding-bottom:0.5em; }

/* ==========================================================================
5. STICKY HEADER & FLOATING MENU (CUSTOM)
========================================================================== */
#vector-main-menu-pinned-container, .vector-main-menu-pinned-container, .vector-pinnable-header,
.vector-main-menu-action, .vector-pinnable-header-toggle-button, .vector-pinnable-header-pin-button,
.vector-pinnable-header-unpin-button, [data-event-name*="vector-main-menu.pin"], [data-event-name*="vector-main-menu.unpin"] {
display: none !important;
}

#vector-sticky-header .vector-sticky-header-search-toggle, #vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .search-toggle, #vector-sticky-header .mw-ui-icon-wikimedia-search, #vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header .vector-icon.mw-ui-icon-search, #vector-sticky-header .cdx-search-input__start-icon {
display: none !important;
}

.skin-vector-2022 #vector-sticky-header, #vector-sticky-header {
display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
background-color: #e6dfa1 !important; border-bottom: 2px solid #296F39 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding-left: 16px !important; padding-right: 16px !important; height: 50px !important; min-height: 50px !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start, #vector-sticky-header .vector-sticky-header-start {
display: flex !important; align-items: center !important; flex: 0 0 auto !important; flex-grow: 0 !important;
width: auto !important; position: relative !important; z-index: 10 !important; gap: 18px !important; margin: 0 !important;
}

#vanipedia-sticky-main-menu {
display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important;
width: 32px !important; min-width: 32px !important; height: 32px !important; margin: 0 !important; cursor: pointer !important;
position: relative !important; z-index: 20 !important;
}
#vanipedia-sticky-main-menu .vector-icon { display: inline-block !important; width: 20px !important; height: 20px !important; }

#vector-sticky-header #p-search, #vector-sticky-header form#searchform, #vector-sticky-header .vector-search-box,
#vector-sticky-header .vector-search-box-inner, #vector-sticky-header .cdx-search-input {
position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
margin: 0 !important; float: none !important; display: inline-flex !important; align-items: center !important;
flex: 0 0 auto !important; z-index: 10 !important;
}
#vector-sticky-header input.searchbox, #vector-sticky-header input[type="search"] {
position: relative !important; left: auto !important; margin: 0 !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar, #vector-sticky-header .vector-sticky-header-context-bar {
display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important;
flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important;
margin-left: 20px !important; margin-right: auto !important;
}

#vector-sticky-header .vector-sticky-header-context-bar-primary, #vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important;
font-size: 1.35rem !important; font-weight: 700 !important; color: #000000 !important; margin: 0 !important; padding: 0 !important;
white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end, #vector-sticky-header .vector-sticky-header-end {
display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-left: auto !important;
}

#vector-main-menu-dropdown .vector-dropdown-content {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important; border-radius: 4px !important; background-color: var(--background-color-base, #faf2af) !important;
}
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed { display: none !important; }

/* ==========================================================================
6. UI COMPONENTS (ACCORDION, THEME GRID, CARDS, BACK-TO-TOP)
========================================================================== */
.theme-analysis-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin: 2em 0; width: 100%; box-sizing: border-box; }
.theme-column { background: rgba(255, 255, 255, 0.2); padding: 15px; border: 1px solid #B5BD64; border-radius: 8px; }
.theme-column ul { list-style-type: none; padding: 0; margin: 0; }
.theme-column li { margin-bottom: 10px; font-weight: bold; }

.book-accordion { background: #FFF8EE; border: none; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.book-accordion-header { background-color: #296F39; color: #ffffff; padding: 16px 20px 16px 60px; font-size: 18px; font-weight: bold; border-bottom: 3px solid #1c4b26; cursor: pointer; transition: background-color 0.2s ease; user-select: none; }
.book-accordion-header:hover { background-color: #3b874c; }
.book-accordion .mw-collapsible-toggle { float: right; font-weight: normal; font-size: 13px; background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 20px; margin-top: -2px; }
.book-accordion .mw-collapsible-toggle a { color: #ffffff !important; text-decoration: none; }
.book-accordion .mw-collapsible-toggle a:hover { text-decoration: underline; }
.book-accordion-content { padding: 24px; }

.book-grid-list { column-width: 280px; column-gap: 20px; list-style-type: none; margin: 0; padding: 0; }
.book-grid-list.single-column { column-width: auto; column-count: 1; column-gap: 0; }
.book-grid-list li { margin-bottom: 12px; break-inside: avoid; }
.mw-parser-output .book-grid-list li a, .mw-parser-output .book-grid-list li a.external { display: block !important; padding: 8px 16px !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e1e4e8 !important; border-radius: 6px; text-decoration: none; color: #1a5e9a; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.2s ease; }
.mw-parser-output .book-grid-list li a:hover, .mw-parser-output .book-grid-list li a.external:hover { background-color: #f4f8fc !important; border-color: #1a5e9a !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26,94,154,0.12); }

.vision-btn.btn-framed { position: relative !important; margin: 12px !important; }
.vision-btn.btn-framed::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 2px solid #296F39 !important; border-radius: 6px !important; pointer-events: none; }
.vision-btn.btn-framed:hover::after { border-color: #1c4b26 !important; }

.compilation-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 30px; margin: 20px auto; max-width: 1000px; }
.compilation-image { flex: 1 1 300px; text-align: center; max-width: 450px; }
.compilation-button-grid { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; }
.compilation-btn { background-color: #296F39; padding: 12px 24px; font-size: 16px; font-weight: bold; border-bottom: 3px solid #1c4b26; border-radius: 4px; text-align: center; }
.compilation-btn a { color: #ffffff !important; text-decoration: none; display: block; }
.compilation-btn-full { grid-column: 1 / -1; }

#vanipedia-back-to-top { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #296F39 !important; color: #ffffff !important; border: none !important; outline: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important; }
#vanipedia-back-to-top.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
#vanipedia-back-to-top:hover { background-color: #1d5229 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important; }
#vanipedia-back-to-top svg { display: block !important; width: 22px !important; height: 22px !important; stroke: #ffffff !important; }

/* MEDIA SNIPPETS OVERFLOW FIX */
.mw-parser-output div[style*="#feffe1"] { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
.mw-parser-output div[style*="#feffe1"] div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.mw-parser-output div[style*="#feffe1"] img, .mw-parser-output div[style*="#feffe1"] iframe, .mw-parser-output div[style*="#feffe1"] .embedvideo, .mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; display: block !important; margin: 0 auto !important; }

/* ==========================================================================
7. MOBILE RESPONSIVENESS
========================================================================== */
@media screen and (max-width: 900px) {
.theme-analysis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
.mw-parser-output img { max-width: 100%; height: auto !important; }
#vanipedia-back-to-top { bottom: 18px !important; right: 18px !important; width: 40px !important; height: 40px !important; }
.book-grid-list { grid-template-columns: 1fr; display: block; }
}
@media screen and (max-width: 600px) {
.theme-analysis-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
8. LEGACY AC_RESULTS (AUTOCOMPLETE)
========================================================================== */
.ac_results { padding: 0px; border: 1px solid black; background-color: Window; overflow: hidden; z-index: 99999; }
.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; }
.ac_loading { background: Window url('indicator.gif') right center no-repeat; }
.ac_odd { background-color: #eee; }
.ac_over { background-color: aquamarine; color: HighlightText; }
.ac_moreItems { text-align: center; background-color: InactiveCaption; color: InactiveCaptionText; margin: 0px; padding: 0px 5px; cursor: default; display: block; width: 100%; font: bold menu 12px; overflow: hidden; -moz-user-select: none; -khtml-user-select: none; }

/* ==========================================================================
9. USED BY TEMPLATE:NAVBAR AND BG FOOTER
========================================================================== */
.verse-nav { float:right; }
.prev-link { float:left; min-height:22px; padding:0 0 0 25px; background:url(/w/images/Go-previous.png) no-repeat left }
.next-link { float:left; min-height:22px; padding:0 25px; background:url(/w/images/Go-next.png) no-repeat right }
.chap-nav, #chap-nav, #book-nav, #page-nav { float:left }

/* ==========================================================================
10. DARK MODE / NIGHT MODE OVERRIDES
========================================================================== */
html.skin-theme-clientpref-night { --background-color-base: #121212 !important; --background-color-page: #121212 !important; --background-color-quiet: #1a1a1a !important; --color-base: #e2e8f0 !important; }
html.skin-theme-clientpref-night body, html.skin-theme-clientpref-night #content, html.skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-night #mw-page-base, html.skin-theme-clientpref-night #mw-head-base { background: #121212 !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .mw-page-container, html.skin-theme-clientpref-night .mw-page-container-inner, html.skin-theme-clientpref-night .mw-content-container, html.skin-theme-clientpref-night .mw-header, html.skin-theme-clientpref-night .vector-header-container, html.skin-theme-clientpref-night .vector-sticky-header, html.skin-theme-clientpref-night .vector-column-start, html.skin-theme-clientpref-night .vector-column-end, html.skin-theme-clientpref-night .vector-sidebar-container, html.skin-theme-clientpref-night .vector-pinnable-element, html.skin-theme-clientpref-night .vector-pinnable-header, html.skin-theme-clientpref-night .vector-pinned-container, html.skin-theme-clientpref-night .vector-toc, html.skin-theme-clientpref-night #vector-toc, html.skin-theme-clientpref-night .vector-toc-pinned-container, html.skin-theme-clientpref-night .vector-toc-contents, html.skin-theme-clientpref-night .vector-menu-content, html.skin-theme-clientpref-night .vector-appearance-pinned-container, html.skin-theme-clientpref-night .vector-page-toolbar-container, html.skin-theme-clientpref-night .vector-page-toolbar, html.skin-theme-clientpref-night .cdx-menu, html.skin-theme-clientpref-night .cdx-menu__list, html.skin-theme-clientpref-night .cdx-menu-item, html.skin-theme-clientpref-night .cdx-radio, html.skin-theme-clientpref-night #vector-appearance { background-color: #121212 !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night #vector-sticky-header { background-color: #1a1a1a !important; border-bottom: 2px solid #3b4b5f !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; }
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline, html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title { color: #ffffff !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top { background-color: #3b4b5f !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top:hover { background-color: #4f637c !important; }
html.skin-theme-clientpref-night .quote_text, html.skin-theme-clientpref-night *:not(a).text { color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .devanagari, html.skin-theme-clientpref-night .verse, html.skin-theme-clientpref-night .versecenter, html.skin-theme-clientpref-night .synonyms, html.skin-theme-clientpref-night .translation, html.skin-theme-clientpref-night .purport { color: #e2e8f0 !important; }

/* ==========================================================================
11. LIGHT MODE SPECIFIC OVERRIDES
========================================================================== */
html:not(.skin-theme-clientpref-night) .vector-sidebar-container { background-color: #e6dfa1 !important; --background-color-interactive: #e6dfa1 !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content { background-color: #ffffff !important; border: 1px solid #c8ccd1 !important; border-radius: 4px !important; padding: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu, html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc { background-color: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading, html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading { background-color: #296F39 !important; color: #ffffff !important; border-radius: 4px !important; padding: 8px 12px !important; margin-bottom: 4px !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link { color: #296F39 !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover { color: #0645ad !important; background-color: #e6dfa1 !important; border-radius: 2px !important; }

/* ==========================================================================
12. CUSTOM WIKIPEDIA-STYLE HOVER POPUP
========================================================================== */
a[title]:hover::after {
content: "Preview: " attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
background: var(--background-color-page, #ffffff); color: var(--color-base, #202122); padding: 12px 16px;
border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-size: 14px; line-height: 1.5; white-space: normal; width: 280px; z-index: 10000;
}

/* CSS placed here will be applied to all skins
The use of the ID tag (#) is being phased out to be replaced by classes (.) where appropriate
*/

.greentext { /* Usage: <span class="greentext">vaniquotes.org</span> */
color: #296F39; /* #296F39=green */
}
.noautonum .tocnumber {
display: none;
}
.journaltable { /* Usage: {| class="journaltable" */
max-width: 108em;
min-width: 65em;
}
.daystext { /* Usage: <span class="daystext">Text Here</span> */
color: #296F39; /* #296F39 = Green */
}
.daystextb { /* Usage: <span class="daystextb">Text Here</span> */
color: #296F39; /* #296F39 = Green */
font-weight: bold;
}
.lec_code { /* Used on all lecture and converstion pages */
font-weight:bold;
}
.code {
font-weight:bold;
font-size: 90%;
}
.quotelink { /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
body.page-Main_Page h1.firstHeading { /* Don't display some stuff on the main page */
display: none !important;
}

/* Remove white border from thumbnails */
div.thumb {
border: none;
}
div.tright {
border: none;
margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
border: none;
margin: 0.5em 1.4em 0.8em 0;
}
.MainHeader h4 {
margin:0!important;
padding:0.2em 0.4em;
}
.highlight_quote {
background-color: #F9F7E0;
margin: 0px;
padding: 4px 2px;
}
.highlight_terms {
background-color: #EEE8AA;
}

/* ----------------- Book styles ----------------- */
.devanagari { /* Usage: <div class="devanagari"> */
color: #000000; /* Font color #0000 = black */
font-weight: bold;
}

.verse { /* Usage: <div class="verse"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
}
.versecenter{ /* Usage: <div class="versecenter"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
text-align: center;
}
.synonyms { /* Usage: <div class="synonyms"> */
color: #000000; /* Font color #0000 = black */
}
.translation { /* Usage: <div class="translation"> */
color: #000000; /* Font color #0000 = black or #296F39 = green */
font-weight: bold;
}
.purport { /* Usage: <div class="purport"> */
color: #000000; /* Font color #0000 = black */
}
*:not(a).text { /* Usage: <div class="text"> */
color: #000000; /* Font color #0000 = black */
}
a[href*="syno_o"]:visited {
color: purple;
}

/* --- Begin OLD book style for 1965 SB (maybe replace with .verse after adding colons to beginning of verse lines) --- */
.SB65verse { /* 1962-65 SB */
white-space: pre-line; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
text-align: center; /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
color: #000000; /* Font color #0000 = black */
}
/* ----------------- End old books styles ----------------- */
/* ----------------- End book styles ----------------- */

/* ----------------- New stuff, sort out later -------------------- */
body.page-Main_Page h2, body.page-Talk_Main_Page h2 {
background: #f9f9f9;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
margin: 1em 0;
color: #B5BD64;
font-family: georgia;
font-weight: bold;
text-align: center;
}
#banner {
text-align: center;
background: #f9f9f9;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
font-size: 125%;
}
#mainbanner {
text-align: center;
background: #66806A;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
color: #faf2af;
font-family: georgia;
font-size: 150%;
font-style: italic;
}
#mainlinks {
text-align: center;
margin-bottom: 0.5em
}
#mainlinks a {
color: #B5BD64
}
#mainmantra {
text-align: center;
margin-top: 1.5em;
color: #B5BD64;
}
.maincenter {
text-align: center;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;
}
.mainleft {
text-align: left;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;}
.mainjustify {
text-align: justify;
max-width: 65em;
margin: 0px auto;
padding-bottom: 1em;
}
body {
background:#faf2af;
font-family: tahoma;
}
#headertabs {
background: inherit;
}
#headertabs ul li.ui-state-active {
background: #fef8cb;
}
#lastmod {
display: none!important
}
li#ca-unify {
margin-left: 1.6em;
}
#google-search input {
font-size: 95%;
width:10.9em;
}
#searchform {
padding-bottom: 0.5em;
}

.center {
text-align: center;
}

/* ----------------- Begin - Used by Template:NavBar and BG Footer -------------------- */
.verse-nav {
float:right;
}
.prev-link {
float:left;
min-height:22px;
padding:0 0 0 25px;
background:url(/w/images/Go-previous.png) no-repeat left
}
.next-link {
float:left;
min-height:22px;
padding:0 25px;
background:url(/w/images/Go-next.png) no-repeat right
}
.chap-nav, #chap-nav, #book-nav, #page-nav {
float:left
}
/* ----------------- End - Used by Template:NavBar and BG Footer -------------------- */

/* -------------------- BEGIN VANIQUOTES RELATED STYLES -------------------- */
.hlterm {
background-color: yellow;
border: 1px Solid #EE9977;
padding: 1px 2px 1px 2px;
margin: -1px;
}
/* -------------------- END VANIQUOTES RELATED STYLES -------------------- */

/* ----------------- To be deleted when identified as not used ----------------- */
#p-logo a, #p-logo a:hover {
height: 190px;
}
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: Window;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
/*width: 100%;*/
font: menu;
font-size: 12px;
line-height: 16px; /* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
overflow: hidden;
}
.ac_loading {
background : Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: HighlightText;
}
.ac_moreItems {
text-align: center;
background-color: InactiveCaption;
color: InactiveCaptionText;
margin: 0px;
padding: 0px 5px;
cursor: default;
display: block;
width: 100%;
font: bold menu 12px;
overflow: hidden;
-moz-user-select: none;
-khtml-user-select: none;
}
/* ----------------- End to be deleted when identified as not used ----------------- */

MediaWiki:Common.css

2026-09-16T12:23:59Z

Kashya:

2026-09-16T06:49:33Z

Kashya:

/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Useful parameters... margin-bottom:0.5em */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');

.cw_0 {
display: none;
}
.cw_50 {
width: 50px;
}
.cw_150 {
width: 150px;
}
.cw_500 {
width: 500px;
}

.tabs-input {
display: none !important;
}
.noautonum .tocnumber {
display: none;
}
.daytable { /* Usage: {| class="daytable" */
text-align: left;
}
.vanitable { /* Usage: {| class="vanitable" */
border: 0.1em solid #BFBFBF; /* #BFBFBF=light grey border */
border-collapse: collapse;
padding: 0.25em; /* 0.25em=4px cellpadding */
background-color: #F2F2F2; /* #F2F2F2=pale grey background */
text-align: left; /* left, center, right */
vertical-align: middle; /* top, bottom, or middle */
}
.timelineh2 { /* (Used on the timeline pages) Usage: <div class="timelineh2" */
text-align: center;
border: 1px solid #ddcef2;
background: #F2F2F2; /* was #faf5ff; */
padding: 0.2em 0.4em;
margin: auto;
overflow: hidden;
}
.timelineh3 { /* Usage: <div class="timelineh3" */
text-align: center;
border-top: 1px solid #ddcef2;
border-bottom: 1px solid #ddcef2;
background: #FFFFFF;
padding: 0.2em 0.4em;
margin: auto;
overflow: hidden;
}
.timelinesummary { /* Usage: <div class="timelinesummary" */
border: thin solid #ddcef2;
border-radius: 1em;
box-shadow: 0.5em 0.5em 0.5em #888888;
background: #FFFFCC;
min-width: 77em;
margin: 1em auto 3em auto;
padding: 1em;
text-align: center;
}
.timelinelinks { /* Usage: <div class="timelinelinks"> for Timelinenav template */
text-align: center;
font-size: 132%;
font-weight: bold;
}
.timelinelinks a { /* Usage: for Timelinenav template, link text color */
color: #B5BD64; /* #B5BD64 (light mustard) */
}

/* -------------------- UNIQUE VANISOURCE TEXT FORMATTING -------------------- */
.greentext { /* Usage: <span class="greentext">vaniquotes.org</span> */
color: #296F39; /* #296F39=green */
}
.quotelink { /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
.nectardroptext { /* Usage: <span class="nectardroptext">"Text"</span> for Nectar Drop boxes */
font-size: 1em;
font-weight: bold;
color: #296F39; /* #296F39=green */
}
.daystext { /* Usage: <span class="daystext">Text Here</span> */
color: #296F39; /* #296F39 = Green used for Video info on the Day in the life pages */
}
.daystextb { /* Usage: <span class="daystextb">Text Here</span> */
color: #296F39; /* #296F39 = Green used for Video info on the Day in the life pages */
font-weight: bold;
}
.journaltable { /* Usage: {| class="journaltable" */
max-width: 108em;
min-width: 65em;
}
.lec_code { /* Used on all lecture and converstion pages */
font-weight:bold;
}
.code {
font-weight:bold;
font-size: 90%;
}
.highlight_quote {
background-color: #F9F7E0;
margin: 0px;
padding: 4px 2px;
}
.highlight_terms {
background-color: #EEE8AA;
}
.hlterm {
background-color: yellow;
border: 1px Solid #EE9977;
padding: 1px 2px 1px 2px;
margin: -1px;
}
/* ------------------------------------------------------------------------- */

.firstchar { /* Usage: <span class="firstchar">A</span> */
float: left;
width: 0.7em;
font-size: 375%;
font-family: algerian, courier;
line-height: 80%;
}
.MITL_page_nav { /* Usage: <div class="MITL_page_nav" */
text-align: left;
border: 1px solid #BFBFBF;
background: #FFF2E6;
padding: 0.2em 0.4em;
margin: auto
}
.daysnav,.monthsnav { /* For D/MITL desktop & mobile */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.daysnav .month {
margin: 25px 2%;
}
.monthsnav .year {
margin: 25px 5%;
}

/* ----------------- Book styles (BG is done) ----------------- */
.devanagari { /* Usage: <div class="devanagari"> */
color: #000000; /* Font color #0000 = black */
font-weight: bold;
}
@font-face {
font-family: interDiac;
src: url(/css/GauraTimes.ttf); /* Vedabase font */
}
.verse { /* Usage: <div class="verse"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
}
.versecenter { /* Usage: <div class="versecenter"> */
color: #000000; /* Font color #0000 = black */
font-style: italic;
text-align: center;
}
.verse.inter_diac { /* Usage: <div class="verse inter_diac"> */
font-family: interDiac; /* International diacritics */
}
.synonyms { /* Usage: <div class="synonyms"> */
color: #000000;
}
.synonyms.inter_diac { /* Usage: <div class="synonyms inter_diac"> */
font-family: interDiac; /* International diacritics */
}
.translation { /* Usage: <div class="translation"> */
color: #000000; /* #296F39 = green */
font-weight: bold;
}
.translation.inter_diac { /* Usage: <div class="translation inter_diac"> */
font-family: interDiac; /* International diacritics */
font-size: 1.1em;
}
.purport { /* Usage: <div class="purport"> */
color: #000000;
}
.purport.inter_diac { /* Usage: <div class="purport inter_diac"> */
font-family: interDiac; /* International diacritics */
font-size: 1.1em;
}
*:not(a).text { /* Usage: <div class="text"> */
color: #000000; /* Font color #0000 = black */
}
.text.inter_diac { /* Usage: <div class="text inter_diac"> */
font-family: interDiac; /* International diacritics */
font-size: 1.1em;
}
.SB65verse { /* 1962-65 SB */
white-space: pre-line; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
text-align: center; /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
color: #000000; /* Font color #0000 = black */
}
/* ----------------- End book styles (BG is done) ----------------- */

/* --- Begin OLD book styles SB, CC (These #IDs should be replaced with .classes as above) --- */
#verse {
white-space: pre;
}
#text { /* Used for verses and was: font-style: italic; */
}
#synonyms { /* Usage: <div id="synonyms"> */
}
#translation { /* Usage: <div id="translation"> */
color: #000000;
font-weight: bold;
}
#purport { /* Usage: <div id="purport"> */
}
/* ----------------- End old books styles BG, SB, CC ----------------- */

/* -------------------- BEGIN NEW COMPILE FORM -------------------- */
.quote {
margin: 1.5em 0em; /* Places 20px space between quotes on multi-quote pages */
font-family: tahoma;
}
.quote_heading {
font-weight: bold;
color: #296F39;
}
.quote_translation {
font-weight: bold;
color: #000000;
}
.quote_link { /* Vanisource link */
font-weight: bold;
}
.quote_text {
color: #000000;
}
.quote_verse { /* To center use: text-align: center; */
color: #000000;
}
.quote_text a { /* Makes the Vanisource verse links bold */
font-weight: bold;
}
/* -------------------- END NEW COMPILE FORM -------------------- */

/* -------------------- BEGIN MAIN PAGE CODING -------------------- */

.MainHeader h4 {
margin:0!important;
padding:0.2em 0.4em;
}
#mainbanner {
text-align:center;
background: #296F39;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
padding:0.3em;
color: #faf2af;
font-family:georgia;
font-size:150%;
font-style:italic;
}
#mainlinks {
text-align:center;
font-weight:bold;
font-size: 110%;
margin-bottom:0.5em
}
#mainlinks a {
color:#B5BD64
}
#mainmantra {
text-align:center;
margin-top:1.5em;
color:#B5BD64;
}
.maincenter {
text-align:center;
max-width:65em;
margin:0px auto;
padding-bottom:1em;
}
.mainleft {
text-align: left;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;
}
.mainjustify {
text-align: justify;
max-width: 65em;
margin: 0px auto;
padding-bottom: 1em;
}

/* Don't display some stuff on the main page */
body.page-Main_Page #t-cite,
body.page-Main_Page #lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}

/* -------------------- END MAIN PAGE CODING -------------------- */

/* -------------------- BEGIN CODING TO IDENTIFY AND SORT OUT -------------------- */

/* 1. Override core Vector 2022 background CSS variables */
:root,
.skin-vector-2022,
html {
--background-color-base: #faf2af !important;
--background-color-page: #faf2af !important;
--background-color-quiet: #faf2af !important;
--border-color-base: transparent !important;
}

/* 2. Unify legacy elements and set global font */
body,
#content,
.mw-body,
#mw-page-base,
#mw-head-base {
background: #faf2af !important;
background-image: none !important;
font-family: tahoma;
}

#headertabs {
background: inherit;
}
#headertabs ul li.ui-state-active {
background: #fef8cb;
}

/* 3. Force teal and remove borders on all Vector 2022 UI containers, sidebars, and Codex menus */
.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-header,
.vector-header-container,
.vector-sticky-header,
.vector-column-start,
.vector-column-end,
.vector-sidebar-container,
.vector-pinnable-element,
.vector-toc,
#vector-toc,
.vector-toc-pinned-container,
.vector-toc-contents,
.vector-dropdown-content,
.vector-menu-content,
.cdx-menu,
.cdx-menu__list {
background-color: #faf2af !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}

/* ------------------------------------ */

div.thumb { /* Remove white border from thumbnails */
border: none;
}
div.tright {
border: none;
margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
border: none;
margin: 0.5em 1.4em 0.8em 0;
}
#lastmod {
display:none!important;
}

li#ca-unify {
margin-left:1.6em;
}
#google-search input {
font-size:95%;
width:10.9em;
}
#searchform {
padding-bottom:0.5em
}
#p-logo a, #p-logo a:hover {
height:190px;
}
#column-one {
padding-top:190px;
}
#p-navigation {
padding-top:30px;
}
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: Window;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
/* width: 100%; */
font: menu;
font-size: 12px;
/* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: aquamarine;
color: HighlightText;
}
.ac_moreItems {
text-align: center;
background-color: InactiveCaption;
color: InactiveCaptionText;
margin: 0px;
padding: 0px 5px;
cursor: default;
display: block;
width: 100%;
font: bold menu 12px;
overflow: hidden;
-moz-user-select: none;
-khtml-user-select: none;
}

/* -------------------- BEGIN MAIN PAGE TEST -------------------- */

body.page-Main_Page_test h1 {
background:#f0f0f0; /* was background:#faf5ff; */
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
padding:0.3em;
margin:1em 0;
color:#B5BD64; /* font color */
font-family:georgia;
font-weight:bold;
font-size: 140%;
text-align:center;
}
body.page-Main_Page_test h2, body.page-Talk_Main_Page h2 {
background:#f0f0f0;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
padding:0.3em;
margin:1em 0;
color:#000000;
font-family:georgia;
font-weight:bold;
font-size: 110%;
text-align:center;
}

#mainh2links a {
color:#B5BD64
}
/* -------------------- END MAIN PAGE TEST -------------------- */

/* --------------- DONATION PAGE - http://vanipedia.org/wiki/Special:IframePage/Donation --------------------*/

#iframeframe {
height: 800px;
}

/* -------------------- END CODING TO IDENTIFY AND SORT OUT -------------------- */

/* 2020-11-27 Elad: Scale and center main page banners */
a[href*='MainPage']::after {
content: 'a';
font-size: 50px;
visibility: hidden;
}

img[src*='MainPage'] {
transform: scale(1.225) translateX(9%);
}
/* End mainpage banners */

/* Main page mobile view classes */
@media screen and (max-width: 768px) {
.MainPageBG {
display: inline-table;
}
#mp-upper > tbody > tr {
display: table-cell;
}
#mp-upper > tbody > tr > td:nth-child(2) {
display: none;
}

/* 1. Stack the 5-column theme analysis sections vertically */
.theme-analysis-grid {
grid-template-columns: 1fr;
gap: 20px;
}

/* 2. Prevent the timeline from breaking the mobile viewport */
.timelinesummary {
min-width: unset;
width: 100%;
box-sizing: border-box;
margin: 1em auto;
}

/* 3. Make fixed-width captions flexible on mid-sized screens */
.youtube_right .thumbcaption,
.youtube_left .thumbcaption {
width: auto;
max-width: 100%;
}

/* 4. Ensure old table layouts don't cause horizontal scroll */
.vanitable {
display: block;
overflow-x: auto;
width: 100%;
}
}

@media screen and (max-width: 400px)
{
#mp-upper div[style*="40em"] {
width: 78vw !important;
}
#mp-upper > tbody > tr > td:nth-child(1) {
border-bottom: none !important;
}
.youtube_right .thumbcaption, .youtube_left .thumbcaption {
width: 69vw !important;
}
#mp-upper .embedvideowrap {
width: 69vw !important;
}
#mp-upper .embedvideo {
padding: 0px !important;
}
#mp-upper div[style*="24em"] {
width: unset !important;
}
#mp-upper .embedvideo iframe {
width: 67vw;
}
#mp-upper div[style*="32em"] { /* right-to-left languages */
min-width: 80vw !important;
}
}
@media screen and (max-width: 320px)
{
#mp-upper .embedvideo iframe {
width: 70vw;
}
.youtube_right .thumbcaption, .youtube_left .thumbcaption {
width: 69vw;
}
#mp-upper .embedvideo {
width: 71vw !important;
}
#mp-upper .embedvideowrap {
width: 67vw !important;
}
.NectarDropBox
{
min-width: 17.5em !important;
}
#mp-right > tbody > tr:nth-child(4) > td
{
padding: 0 0 0 .5em !important;
}
#mp-right > tbody > tr:nth-child(6) > td
{
padding: 0 0 0 .4em !important;
}
#mp-upper div[style*="32em"] { /* right-to-left languages */
min-width: 86vw !important;
}
}
/* End main page mobile view classes */

/* Generic center class */
div.center
{
text-align: center;
}

/* Nectar drop classes */
@media only screen and (max-width: 640px)
{
div.NectarDropBox
{
max-width: 30%;
}
}

.vaniquotebox
{
text-align: left;
min-height: 11.6em;
border:thin solid #000000;
border-radius: 1em;
box-shadow: 0.5em 0.5em 1em #bcbcbc;
margin: 1em 0em;
}
@media screen and (min-width: 800px)
{
.vaniquotebox {
max-width:80%;
}
}
.vaniquotebox > table
{
text-align:left;
font-size:1em;
color:#000000;
min-height: 11.5em;
margin: 0;
}

.vaniquotebox td
{
padding: 8px;
}

/* Put spacing between the YouTube video player and text that flows around it */

/* left-to-right languages */
.youtube_right .embedvideo
{
padding: 10px;
}

.youtube_right .thumbcaption, .youtube_left .thumbcaption
{
width: 330px;
}

/* right-to-left languages */
.youtube_left .embedvideo
{
padding: 10px;
}

.rtltoc ul
{
text-align: right !important;
direction: rtl;
}

.rtltoc .tocnumber {
padding-left: 0.5em;
padding-right: 0;
}

.rtltoc .toctitle
{
direction: rtl;
}

.rtltoc.ar .toctitle::before {
content: "محتويات";
}

.rtltoc.he .toctitle::before {
content: "תוכן עניינים";
}

.rtltoc.he,.rtltoc.ar {
font-weight: bold;
font-weight: sans-serif;
}

.rtltoc.he h2,.rtltoc.ar h2
{
display: none !important;
}

/* Kasya */
/* Custom Wikipedia-style Hover Popup Alternative */
a[title]:hover::after {
content: "Preview: " attr(title);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: var(--background-color-page, #ffffff);
color: var(--color-base, #202122);
padding: 12px 16px;
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-size: 14px;
line-height: 1.5;
white-space: normal;
width: 280px;
z-index: 10000;
}
/* -------------------- THEME ANALYSIS PAGE STRUCTURE -------------------- */
/* 5-Column Grid */
.theme-analysis-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin: 2em 0;
}

.theme-column {
background: rgba(255, 255, 255, 0.2);
padding: 15px;
border: 1px solid #B5BD64;
border-radius: 8px;
}

/* Formats the links cleanly inside each column */
.theme-column ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.theme-column li {
margin-bottom: 10px;
font-weight: bold;
}

/* Eliminate structural white borders and force structural columns to yellow */
.vector-column-start,
.vector-column-end,
.vector-toc,
#vector-toc,
.vector-pinnable-element,
.mw-body,
.mw-page-container-inner,
.vector-sidebar-container {
border: none !important;
background-color: #faf2af !important;
}

/* Force the specific grid columns and pinned containers to adopt the yellow */
.vector-sidebar-container,
.vector-column-start,
.vector-column-end,
.vector-toc-pinned-container,
.vector-pinnable-element,
.mw-page-container,
.mw-page-container-inner {
background-color: #faf2af !important;
background-image: none !important;
border: none !important;
}

/* Wit & Wisdom Card Hover Effects */
.ww-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ww-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
}

.ww-image-layer {
transition: transform 0.5s ease;
}
.ww-card:hover .ww-image-layer {
transform: scale(1.05);
}

.ww-text-arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.ww-card:hover .ww-text-arrow {
transform: translateX(4px);
}

/* Portal Books Accordion Styles */
.book-accordion-report {
background: #FDF2D5;
border: 1px solid #d0d7de;
border-radius: 6px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
overflow: hidden;
}

/* --- ENHANCED PORTAL BOOKS ACCORDION --- */

/* The Main Container */
.book-accordion {
background: #FFF8EE;
border: none;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Deeper, softer shadow */
overflow: hidden;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* The Clickable Header Bar */
.book-accordion-header {
background-color: #91cfa9;
color: #1f4033;
padding: 16px 20px 16px 60px; /* Top: 16px, Right: 20px, Bottom: 16px, Left: 60px */
font-size: 18px;
font-weight: bold;
border-bottom: 3px solid #2a4452;
cursor: pointer;
transition: background-color 0.2s ease;
user-select: none;
}

/* Header Hover Effect */
.book-accordion-header:hover {
background-color: #7fbd97; /* Lightens the bar slightly on hover */
}

.extra-button {
background-color: #5B3E34;
}
.extra-button:hover {
background-color: #907359;
}

/* Fix for the standard MediaWiki Collapse/Expand Button */
.book-accordion .mw-collapsible-toggle {
float: right;
font-weight: normal;
font-size: 13px;
background: rgba(255, 255, 255, 0.15);
padding: 4px 12px;
border-radius: 20px; /* Makes it a pill shape */
margin-top: -2px;
}

/* Target the link inside the toggle to ensure it stays white */
.book-accordion .mw-collapsible-toggle a {
color: #1f4033 !important;
text-decoration: none;
}

.book-accordion .mw-collapsible-toggle a:hover {
text-decoration: underline;
}

/* The Content Area */
.book-accordion-content {
padding: 24px;
}

/* The Grid Setup */
.book-grid-list {
column-width: 280px;
column-gap: 20px;
list-style-type: none;
margin: 0;
padding: 0;
}

/* Single-column version of accordion link list */
.book-grid-list.single-column {
column-width: auto;
column-count: 1;
column-gap: 0;
}

.book-grid-list li {
margin-bottom: 12px;
break-inside: avoid;
}

/* Mini-Card Links */
.mw-parser-output .book-grid-list li a,
.mw-parser-output .book-grid-list li a.external {
display: block !important;
padding: 8px 16px !important;
background-color: #ffffff !important;
background-image: none !important; /* Safely removes the external link icon */
border: 1px solid #e1e4e8 !important;
border-radius: 6px;
text-decoration: none;
color: #1a5e9a;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
transition: all 0.2s ease;
}

/* Mini-Card Hover Effect */
.mw-parser-output .book-grid-list li a:hover,
.mw-parser-output .book-grid-list li a.external:hover {
background-color: #f4f8fc !important;
border-color: #1a5e9a !important;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(26,94,154,0.12);
}

/* Mini-Card Hover Effect */
.book-grid-list li a:hover {
background-color: #f4f8fc;
border-color: #1a5e9a;
transform: translateY(-2px); /* Lifts the card up slightly */
box-shadow: 0 4px 10px rgba(26,94,154,0.12); /* Subtle blue glow */
}

/* --- Solid Buttons with a Padded Outer Frame (Pseudo-Element Method) --- */

.vision-btn.btn-framed {
position: relative !important; /* Required to anchor the frame */
margin: 12px !important; /* Ensures there is room for the frame to render */
}

/* This draws the actual frame 6px outside the button */
.vision-btn.btn-framed::after {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border: 2px solid #296F39 !important; /* The Vanisource green frame */
border-radius: 6px !important; /* Slightly rounded to match the button */
pointer-events: none; /* Ensures the frame doesn't block you from clicking the button */
}

/* Changes the frame color when you hover over the button */
.vision-btn.btn-framed:hover::after {
border-color: #296F39 !important;
}

/* Mobile Responsiveness for Custom Book Grids */
@media screen and (max-width: 720px) {
.book-grid-list {
/* Forces the grid to stack into a single vertical column on small screens */
grid-template-columns: 1fr;
display: block;
}

/* Adjust padding for smaller screens if necessary */
.book-accordion-content {
padding: 10px;
}
}

/* ----------------------------------------------------
FIX: Mobile-Only Image Scaling (Leaves Desktop Intact)
---------------------------------------------------- */
@media screen and (max-width: 768px) {
.mw-parser-output img {
max-width: 100%;
height: auto !important;
}
}

/* Don't show external-link icon for image-only links */
.mw-parser-output a.external:has(img) {
background-image: none !important;
padding-right: 0 !important;
}

/* Responsive Layout for Image & Button Grids */
.compilation-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 30px;
margin: 20px auto;
max-width: 1000px;
}

.compilation-image {
flex: 1 1 300px;
text-align: center;
max-width: 450px;
}

.compilation-button-grid {
flex: 1 1 400px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 15px;
}

.compilation-btn {
background-color: #296F39;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
border-bottom: 3px solid #2a4452;
border-radius: 4px;
text-align: center;
}

.compilation-btn a {
color: #ffffff !important;
text-decoration: none;
display: block;
}

.compilation-btn-full {
grid-column: 1 / -1;
}

/* Defines the layout for the main container holding all columns */
.theme-analysis-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* Creates exactly 5 equal columns */
gap: 15px; /* Adds consistent breathing room between the columns */
width: 100%;
box-sizing: border-box;
}

/* Optional but highly recommended: Make it stack nicely on smaller screens */
@media screen and (max-width: 900px) {
.theme-analysis-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
}
}

@media screen and (max-width: 600px) {
.theme-analysis-grid {
grid-template-columns: 1fr; /* 1 single column on mobile */
}
}

/* =========================================================
MEDIA SNIPPETS OVERFLOW FIX (The Nuclear Option)
========================================================= */

/* 1. Target the main column boxes by their unique background color */
.mw-parser-output div[style*="#feffe1"] {
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important; /* Force-stops ANY visual spilling */
}

/* 2. Target the nested inner divs and forcefully strip their hardcoded 300px widths */
.mw-parser-output div[style*="#feffe1"] div {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

/* 3. Keep images, video frames, and MediaWiki file wrappers strictly contained */
.mw-parser-output div[style*="#feffe1"] img,
.mw-parser-output div[style*="#feffe1"] iframe,
.mw-parser-output div[style*="#feffe1"] .embedvideo,
.mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
display: block !important;
margin: 0 auto !important; /* Centers the media nicely */
}

/* ==========================================================
VANIPEDIA VISION
========================================================== */

.vision-layout-wrapper {
display: block;
width: 100%;
max-width: 950px;
margin: 10px auto 30px;
box-sizing: border-box;
}

/* INTRODUCTION */

.vision-intro {
max-width: 850px;
margin: 0 auto 22px;
text-align: center;

color: #263b38;
font-size: 17px;
line-height: 1.6;
}

/* CORE PRINCIPLES TITLE */

.vision-core-title {
margin: 0 auto 14px;
text-align: center;

color: #296F39;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
}

.vision-core-title span {
font-size: 18px;
font-weight: 500;
}

/* CORE PRINCIPLES IMAGE
No border/frame/padding.
Uses full available content width.
*/

.vision-core-image {
width: 100%;
margin: 0;
padding: 0;
line-height: 0;
cursor: pointer;
}

.vision-core-image .mw-file-description,
.vision-core-image .mw-file-element,
.vision-core-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}

/* BUTTONS */

.vision-buttons-row {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: center;

width: 100%;
gap: 14px;
margin-top: 22px;
}

/* EXISTING BUTTON GRAPHICS */

.vision-btn {
flex: 1 1 0;
min-width: 0;

background-color: #296F39;
border-bottom: 3px solid #2a4452;
border-radius: 4px;

transition: background-color 0.2s ease;
}

.vision-btn:hover {
background-color: #296F39;
}

.vision-btn a,
.vision-btn a.external {
display: flex;
align-items: center;
justify-content: center;

box-sizing: border-box;
width: 100%;
height: 100%;

padding: 22px 14px !important;

color: #ffffff !important;
font-size: 16px !important;
font-weight: bold;
text-align: center;
text-decoration: none;
}

/* RESPONSIVE */

@media (max-width: 800px) {

.vision-buttons-row {
flex-wrap: wrap;
}

.vision-btn {
flex: 1 1 45%;
}

.vision-intro {
font-size: 16px;
}
}

/* ----------------------------------------------------
Vanipedia Community Section
---------------------------------------------------- */

.community-layout-wrapper {
max-width: 1100px;
margin: 35px auto 40px;
padding: 0 15px;
box-sizing: border-box;
}

/* Vanivillage + Vaniseva */

.community-platform-row {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
margin-bottom: 0px;
}

.community-platform-item {
display: flex;
align-items: center;
justify-content: center;
}

.community-platform-item img {
display: block;
max-width: 240px;
height: auto !important;
}

.community-platform-item a {
display: inline-block;
transition: transform 0.2s ease;
}

.community-platform-item a:hover {
transform: scale(1.05);
}
/* YouTube + Facebooks + Instagram */

.community-social-row {
display: flex;
justify-content: center;
align-items: center;
gap: 102px;
margin-bottom: 2px;
}

.community-social-item {
display: flex;
align-items: center;
justify-content: center;
}

.community-social-item img {
display: block;
max-width: 115px;
height: auto !important;
}

.community-social-item a {
display: inline-block;
transition: transform 0.2s ease;
}

.community-social-item a:hover {
transform: scale(1.08);
}

/* Community image */

.community-image-container {
width: 100%;
text-align: center;
margin-bottom: 28px;
}

.community-image-container img {
display: block;
width: 100%;
max-width: 1000px;
height: auto !important;
margin: 0 auto;
}

/* Contact + Statistics buttons */

.community-button-row {
display: flex;
justify-content: center;
align-items: stretch;
gap: 30px;
margin: 0 auto 30px;
}

.community-button-row .vision-btn {
width: 250px;
box-sizing: border-box;
}

/* Mobile */

@media screen and (max-width: 768px) {

.community-layout-wrapper {
padding: 0 10px;
margin-top: 25px;
}

.community-platform-row {
gap: 25px;
margin-bottom: 22px;
}

.community-platform-item img {
max-width: 150px;
}

.community-social-row {
gap: 18px;
margin-bottom: 25px;
}

.community-social-item img {
max-width: 65px;
}

.community-image-container {
margin-bottom: 22px;
}

.community-button-row {
gap: 12px;
}

.community-button-row .vision-btn {
width: calc(50% - 6px);
}
}

/* Center all content within the site notice / header banner */
#siteNotice {
text-align: center;
}

/* Force the social icons list to display horizontally and centered */
#siteNotice ul {
display: flex !important;
justify-content: center;
list-style-type: none !important; /* Removes any default Vector bullets */
padding: 0;
margin: 10px 0;
gap: 15px; /* Adds space between the icons */
}

/* Remove Vector's default left-margin on list items */
#siteNotice ul li {
margin: 0 !important;
display: inline-block;
}

/* Ensure the dark teal bar is properly spaced */
#siteNotice .your-teal-bar-class {
margin-top: 15px; /* Adjust if it feels too close to the links */
}

/* Only hide these tabs if the JavaScript determines the user is NOT authorized */
body.restricted-ui #ca-history,
body.restricted-ui #ca-talk,
body.restricted-ui #ca-viewsource {
display: none !important;
}

/* =========================================================
NIGHT MODE / DARK MODE OVERRIDES
========================================================= */

/* 1. Target the specific dark mode class applied by the Vector toggle */
html.skin-theme-clientpref-night {
--background-color-base: #121212 !important;
--background-color-page: #121212 !important;
--background-color-quiet: #1a1a1a !important;
--color-base: #e2e8f0 !important;
}

/* 2. Global background and text color overrides */
html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-night #content,
html.skin-theme-clientpref-night .mw-body,
html.skin-theme-clientpref-night #mw-page-base,
html.skin-theme-clientpref-night #mw-head-base {
background: #121212 !important;
color: #e2e8f0 !important;
}

/* 3. Unified Vector 2022 UI containers and Codex menus */
html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-page-container-inner,
html.skin-theme-clientpref-night .mw-content-container,
html.skin-theme-clientpref-night .mw-header,
html.skin-theme-clientpref-night .vector-header-container,
html.skin-theme-clientpref-night .vector-sticky-header,
html.skin-theme-clientpref-night .vector-column-start,
html.skin-theme-clientpref-night .vector-column-end,
html.skin-theme-clientpref-night .vector-sidebar-container,
html.skin-theme-clientpref-night .vector-pinnable-element,
html.skin-theme-clientpref-night .vector-pinnable-header,
html.skin-theme-clientpref-night .vector-pinned-container,
html.skin-theme-clientpref-night .vector-toc,
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-toc-pinned-container,
html.skin-theme-clientpref-night .vector-toc-contents,
html.skin-theme-clientpref-night .vector-menu-content,
html.skin-theme-clientpref-night .vector-appearance-pinned-container,
html.skin-theme-clientpref-night .vector-page-toolbar-container,
html.skin-theme-clientpref-night .vector-page-toolbar,
html.skin-theme-clientpref-night .cdx-menu,
html.skin-theme-clientpref-night .cdx-menu__list,
html.skin-theme-clientpref-night .cdx-menu-item,
html.skin-theme-clientpref-night .cdx-radio,
html.skin-theme-clientpref-night #vector-appearance {
background-color: #121212 !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
color: #e2e8f0 !important;
}

/* 4. Fix specific custom components (Cards, Columns, Book Accordions) */
html.skin-theme-clientpref-night .theme-column {
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid #4a5568 !important;
}

html.skin-theme-clientpref-night .book-accordion {
background: #1a1a1a !important;
border-color: #333 !important;
}

html.skin-theme-clientpref-night .book-accordion-header {
background-color: #2d3748 !important;
border-bottom: 3px solid #1a202c !important;
}

html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a,
html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a.external {
background-color: #2d3748 !important;
border: 1px solid #4a5568 !important;
color: #90cdf4 !important;
}

html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a:hover {
background-color: #4a5568 !important;
}

html.skin-theme-clientpref-night .quote_text,
html.skin-theme-clientpref-night *:not(a).text {
color: #e2e8f0 !important;
}

/* 5. Fix the Search Bar and Auto-suggest Dropdown */
html.skin-theme-clientpref-night .cdx-text-input,
html.skin-theme-clientpref-night .cdx-search-input,
html.skin-theme-clientpref-night .cdx-search-input__input-wrapper,
html.skin-theme-clientpref-night .vector-typeahead-search-container {
background-color: #1a1a1a !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}

html.skin-theme-clientpref-night .cdx-text-input__input {
background-color: transparent !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .cdx-text-input__input::placeholder {
color: #a0aec0 !important;
}

html.skin-theme-clientpref-night .cdx-search-input__end-button {
background-color: #2d3748 !important;
border-color: #4a5568 !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .cdx-typeahead-search__menu {
background-color: #121212 !important;
border: 1px solid #333 !important;
}

html.skin-theme-clientpref-night .cdx-menu-item:hover,
html.skin-theme-clientpref-night .cdx-menu-item--selected {
background-color: #2d3748 !important;
}

/* 6. Invert external iframes and override inline widget colors */
html.skin-theme-clientpref-night .vanipedia-clock iframe {
filter: invert(0.92) hue-rotate(180deg) !important;
}

html.skin-theme-clientpref-night .mw-parser-output div[style*="#ede9ce"],
html.skin-theme-clientpref-night .mw-parser-output div[style*="background-color: #ede9ce"],
html.skin-theme-clientpref-night .mw-parser-output div[style*="background-color:#ede9ce"] {
background-color: #121212 !important;
border-color: #333 !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .mw-parser-output div[style*="#ede9ce"] a,
html.skin-theme-clientpref-night .oo-ui-panelLayout-framed a {
color: #90cdf4 !important;
}

html.skin-theme-clientpref-night .oo-ui-panelLayout-framed,
html.skin-theme-clientpref-night .oo-ui-tabPanelLayout {
background-color: #121212 !important;
border: 1px solid #333 !important;
color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .oo-ui-fieldsetLayout,
html.skin-theme-clientpref-night .oo-ui-widget {
background-color: transparent !important;
color: inherit !important;
}

/* 7. Scrollbars and Edge Stripes Cleanup */
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-dropdown-content {
scrollbar-color: #3b4b5f #1a202c !important;
}

html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar {
width: 8px !important;
}

html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-track,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-track {
background: #1a202c !important;
}

html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-thumb,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-thumb {
background-color: #3b4b5f !important;
border-radius: 4px !important;
}

html.skin-theme-clientpref-night #vector-toc .vector-toc-list-item-active {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}

html.skin-theme-clientpref-night .vector-sticky-pinned-container::after,
html.skin-theme-clientpref-night .vector-sticky-pinned-container::before,
html.skin-theme-clientpref-night .vector-pinned-container::after,
html.skin-theme-clientpref-night .vector-pinned-container::before {
background-image: none !important;
background: transparent !important;
box-shadow: none !important;
}

/* 8. Dark Mode Sidebar Menu Widgets & Headers */
html.skin-theme-clientpref-night .vector-dropdown-content {
background-color: #253141 !important;
border: 1px solid #3b4b5f !important;
border-radius: 4px !important;
padding: 4px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

html.skin-theme-clientpref-night .vector-dropdown-content a,
html.skin-theme-clientpref-night .vector-dropdown-content a *,
html.skin-theme-clientpref-night #vector-main-menu a,
html.skin-theme-clientpref-night #vector-main-menu a * {
color: #e2e8f0 !important;
background-color: transparent !important;
}

html.skin-theme-clientpref-night .vector-dropdown-content a:hover,
html.skin-theme-clientpref-night .vector-dropdown-content a:hover *,
html.skin-theme-clientpref-night #vector-main-menu a:hover,
html.skin-theme-clientpref-night #vector-main-menu a:hover * {
color: #ffffff !important;
background-color: #3b4b5f !important;
border-radius: 2px !important;
text-decoration: none !important;
}

html.skin-theme-clientpref-night #vector-main-menu .vector-menu-heading,
html.skin-theme-clientpref-night .vector-dropdown-content .vector-menu-heading {
background-color: #3b4b5f !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 8px 12px !important;
margin-bottom: 4px !important;
border: 1px solid #4a5568 !important;
}

.vanipedia-sidebar-menu.vanipedia-collapsed:has(.vector-menu-content-list:empty) {
display: none !important;
}

/* =========================================================
LIGHT MODE OVERRIDES
========================================================= */

/* 1. Global Light Mode Layout Variables */
html:not(.skin-theme-clientpref-night) {
--background-color-base: #faf2af !important;
--background-color-page: #faf2af !important;
--background-color-quiet: #faf2af !important;
}

html:not(.skin-theme-clientpref-night) body,
html:not(.skin-theme-clientpref-night) .mw-page-container,
html:not(.skin-theme-clientpref-night) .mw-page-container-inner {
background-color: #faf2af !important;
background-image: none !important;
}

/* 2. Light Mode Sidebar & Menu Backgrounds */
html:not(.skin-theme-clientpref-night) .vector-sidebar-container {
background-color: #e6dfa1 !important;
--background-color-interactive: #e6dfa1 !important;
}

/* Give the floating dropdown a visible box in Light Mode */
html:not(.skin-theme-clientpref-night) .vector-dropdown-content {
background-color: #ffffff !important; /* Clean white background */
border: 1px solid #c8ccd1 !important; /* Soft grey border */
border-radius: 4px !important;
padding: 6px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* Soft shadow */
}

/* Ensure inner wrappers don't double-pad or override the box */
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc {
background-color: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}

/* 3. Light Mode Sidebar Menu Typography & Headers */
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading {
background-color: #296F39 !important; /* Vanisource Dark Green */
color: #ffffff !important; /* White text */
border-radius: 4px !important;
padding: 8px 12px !important;
margin-bottom: 4px !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link {
color: #296F39 !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover {
color: #0645ad !important;
background-color: #e6dfa1 !important; /* Soft hover highlight */
border-radius: 2px !important;
}

/* =========================================================
GLOBAL OVERRIDES (BOTH MODES)
========================================================= */

#mainbanner {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}

.mw-body,
#content,
.mw-body-content,
#mw-content-text {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
border: none !important;
outline: none !important;
}

/* Personality Landing Hero */

.personality-card {
max-width: 1100px;
margin: 0 auto 35px auto;
background: #296F39;
border: 1px solid #7FA28B;
color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}

.personality-hero {
display: flex;
gap: 28px;
align-items: center; /* This centers the shorter column (image or text) vertically */
}

.personality-image {
flex: 0 0 396px;
text-align: center;
}

.personality-image img {
max-width: 360px;
width: 100%;
height: auto;
display: block;
margin: auto;
padding: 4px;
background: #E7F3E5;
border: 1px solid #c8c8c8;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Keep the title fix you applied earlier! */
.personality-title {
font-size: 180%;
text-align: left;
font-weight: bold;
margin-top: 0;
line-height: 1;
margin-bottom: 12px;
}

.personality-content {
flex: 1;
padding: 0 24px 0 0;
}

/* --- Mobile Layout Rules --- */
@media (max-width: 768px) {
.personality-hero {
flex-direction: column; /* Stacks the image and text vertically */
gap: 16px; /* Reduces the gap slightly so it doesn't feel too empty on mobile */
}

.personality-image {
flex: 1 1 auto; /* Removes the rigid 360px width constraint */
width: 100%; /* Allows the image to fill the mobile container gracefully */
}

.personality-image img {
max-width: 100%; /* Ensures the image never spills off the screen */
}

.personality-title {
text-align: center; /* Optional: Centering the title often looks better on stacked mobile layouts */
}
.personality-content {
padding: 0 16px; /* Adds 16px of space to the left and right of the text */
}
}

/*--- Additional Info Card ---*/
.info-card {
max-width: 900px;
margin: 30px auto;
padding: 24px 28px;
background: #FFF8EE;
border: 1px solid #D8C7A5;
border-radius: 8px;
box-sizing: border-box;
text-align: left;
}

.info-card h3 {
margin: 0 0 15px;
font-size: 150%;
color: #296F39;
}

.info-card p {
margin: 0 0 16px;
line-height: 1.7;
}

.info-card .cta-button {
margin-top: 10px;
}

/* Hide empty sidebar menu headings */
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed {
display: none !important;
}

.accordion-toc-heading {
display: none;
}

/* ==========================================================================
STICKY HEADER & FLOATING MENU ONLY
========================================================================== */

/* 1. Permanently remove the pinned sidebar column & all pinning buttons */
#vector-main-menu-pinned-container,
.vector-main-menu-pinned-container,
.vector-pinnable-header,
.vector-main-menu-action,
.vector-pinnable-header-toggle-button,
.vector-pinnable-header-pin-button,
.vector-pinnable-header-unpin-button,
[data-event-name*="vector-main-menu.pin"],
[data-event-name*="vector-main-menu.unpin"] {
display: none !important;
}

/* 2. Hide magnifying glass / search toggle icon in sticky header */
#vector-sticky-header .vector-sticky-header-search-toggle,
#vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .search-toggle,
#vector-sticky-header .mw-ui-icon-wikimedia-search,
#vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header .vector-icon.mw-ui-icon-search,
#vector-sticky-header .cdx-search-input__start-icon {
display: none !important;
}

/* 3. Sticky header container layout */
.skin-vector-2022 #vector-sticky-header,
#vector-sticky-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
background-color: #e6dfa1 !important;
border-bottom: 2px solid #296F39 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding-left: 16px !important;
padding-right: 16px !important;
height: 50px !important;
min-height: 50px !important;
}

/* Dark mode version */
html.skin-theme-clientpref-night #vector-sticky-header {
background-color: #1a1a1a !important;
border-bottom: 2px solid #3b4b5f !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 4. Start Container: Burger + Search (PREVENTS growing/stretching across the bar) */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start,
#vector-sticky-header .vector-sticky-header-start {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important; /* Stops it from expanding across the middle */
flex-grow: 0 !important;
width: auto !important;
position: relative !important;
z-index: 10 !important;
gap: 18px !important;
margin: 0 !important;
}

/* 5. Burger button */
#vanipedia-sticky-main-menu {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
margin: 0 !important;
cursor: pointer !important;
position: relative !important;
z-index: 20 !important;
}

#vanipedia-sticky-main-menu .vector-icon {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
}

/* 6. Search box */
#vector-sticky-header #p-search,
#vector-sticky-header form#searchform,
#vector-sticky-header .vector-search-box,
#vector-sticky-header .vector-search-box-inner,
#vector-sticky-header .cdx-search-input {
position: relative !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
z-index: 10 !important;
}

#vector-sticky-header input.searchbox,
#vector-sticky-header input[type="search"] {
position: relative !important;
left: auto !important;
margin: 0 !important;
}

/* 7. FIX: Lock Page Title strictly on the LEFT right after search */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar,
#vector-sticky-header .vector-sticky-header-context-bar {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
flex: 0 0 auto !important; /* Takes only the space needed for the title */
flex-grow: 0 !important;
width: auto !important;
max-width: none !important;
margin-left: 20px !important; /* Space after search box */
margin-right: auto !important; /* Absorbs all remaining space, pushing tools to the far right */
}

#vector-sticky-header .vector-sticky-header-context-bar-primary,
#vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #000000 !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}

/* Dark mode text */
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline,
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title {
color: #ffffff !important;
}

/* 8. Action tools stay on the far right */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end,
#vector-sticky-header .vector-sticky-header-end {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin-left: auto !important;
}

/* 9. Floating Dropdown Menu Box Styling */
#vector-main-menu-dropdown .vector-dropdown-content {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
border-radius: 4px !important;
background-color: var(--background-color-base, #ffffff) !important;
}

/* ==========================================================================
FLOATING "BACK TO TOP" BUTTON
========================================================================== */
#vanipedia-back-to-top {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background-color: #296F39 !important; /* Vanisource dark green */
color: #ffffff !important;
border: none !important;
outline: none !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
z-index: 1000 !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(12px) !important;
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important;
}

/* Shown when scrolled down */
#vanipedia-back-to-top.visible {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}

#vanipedia-back-to-top:hover {
background-color: #244147 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

#vanipedia-back-to-top:active {
transform: translateY(0) !important;
}

#vanipedia-back-to-top svg {
display: block !important;
width: 22px !important;
height: 22px !important;
stroke: #ffffff !important;
}

/* Dark mode theme */
html.skin-theme-clientpref-night #vanipedia-back-to-top {
background-color: #3b4b5f !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

html.skin-theme-clientpref-night #vanipedia-back-to-top:hover {
background-color: #4f637c !important;
}

/* Mobile positioning */
@media screen and (max-width: 768px) {
#vanipedia-back-to-top {
bottom: 18px !important;
right: 18px !important;
width: 40px !important;
height: 40px !important;
}
}

/* ==========================================================================
UNCLUTTERED "DOORS" HOMEPAGE LAYOUT
========================================================================== */

.vani-sanctuary {
max-width: 1140px;
margin: 0 auto;
padding: 10px 0 40px;
}

/* 1. Entrance Hero (Serene & Welcoming) */
.vani-entrance-hero {
display: flex;
align-items: center;
background-color: #e8f4ec; /* Soft sage green */
border: 1px solid #c8e0d1;
border-radius: 12px;
padding: 28px 32px;
gap: 32px;
margin-bottom: 32px;
box-shadow: 0 4px 16px rgba(52, 91, 99, 0.06);
}

.vani-entrance-avatar {
flex: 0 0 160px;
text-align: center;
}

.vani-portrait-circle,
.vani-entrance-avatar img {
border-radius: 50% !important;
border: 4px solid #ffffff !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
width: 150px !important;
height: 150px !important;
object-fit: cover !important;
}

.vani-entrance-text {
flex: 1 1 auto;
}

.vani-sanctuary-badge {
display: inline-block;
background-color: #296F39;
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 8px;
}

.vani-sanctuary-title {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: #1e3a40 !important;
margin: 0 0 8px !important;
border: none !important;
padding: 0 !important;
}

.vani-sanctuary-subtitle {
font-size: 1.02rem;
color: #334447;
line-height: 1.5;
margin: 0 0 14px;
}

.vani-sanctuary-milestone {
display: inline-block;
font-size: 0.88rem;
color: #2b494f;
background-color: rgba(255, 255, 255, 0.75);
padding: 6px 14px;
border-radius: 6px;
border-left: 3px solid #296F39;
}

/* 2. The Doors Grid (3 Columns, Clean & Spacious) */
.vani-doors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 32px;
}

/* 3. Door Cards */
.vani-door-card {
background-color: #ffffff;
border: 1px solid #d9e8e0;
border-radius: 10px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
position: relative;
}

.vani-door-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(52, 91, 99, 0.12);
border-color: #296F39;
}

.vani-door-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.vani-door-icon {
font-size: 1.8rem;
}

.vani-door-number {
font-size: 0.75rem;
font-weight: 700;
color: #7b948f;
text-transform: uppercase;
letter-spacing: 0.6px;
}

.vani-door-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 8px;
}

.vani-door-title a {
color: #1e3a40 !important;
text-decoration: none;
}

.vani-door-title a:hover {
color: #296F39 !important;
text-decoration: underline;
}

.vani-door-desc {
font-size: 0.92rem;
color: #556668;
line-height: 1.5;
margin: 0 0 18px;
flex-grow: 1;
}

.vani-door-btn {
display: inline-flex;
align-items: center;
font-size: 0.88rem;
font-weight: 700;
color: #296F39 !important;
background-color: #edf6f0;
padding: 8px 14px;
border-radius: 6px;
text-decoration: none !important;
transition: background-color 0.2s ease, color 0.2s ease;
}

.vani-door-card:hover .vani-door-btn {
background-color: #296F39;
color: #ffffff !important;
}

/* 4. Sanctuary Base (Mission Door) */
.vani-mission-door {
background-color: #f7faf8;
border: 1px solid #cde2d6;
border-radius: 10px;
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

.vani-mission-info h3 {
margin: 0 0 6px !important;
border: none !important;
padding: 0 !important;
font-size: 1.25rem !important;
color: #24464c !important;
}

.vani-mission-info p {
margin: 0;
font-size: 0.93rem;
color: #4a5c5f;
}

.vani-mission-links {
display: flex;
gap: 10px;
flex-shrink: 0;
}

.vani-m-btn {
display: inline-block;
padding: 9px 18px;
font-size: 0.88rem;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
text-decoration: none !important;
transition: all 0.2s ease;
}

.vani-m-primary {
background-color: #296F39;
color: #ffffff !important;
}

.vani-m-primary:hover {
background-color: #233e44;
}

.vani-m-ghost {
background-color: #ffffff;
border: 1px solid #296F39;
color: #296F39 !important;
}

.vani-m-ghost:hover {
background-color: #e8f4ec;
}

.vani-m-accent {
background-color: #d97724;
color: #ffffff !important;
}

.vani-m-accent:hover {
background-color: #b86016;
}

/* 5. Dark Mode Adaptation */
html.skin-theme-clientpref-night .vani-entrance-hero {
background-color: #1f272a;
border-color: #313d42;
}

html.skin-theme-clientpref-night .vani-sanctuary-title {
color: #e0f2f1 !important;
}

html.skin-theme-clientpref-night .vani-sanctuary-subtitle {
color: #b0bec5;
}

html.skin-theme-clientpref-night .vani-sanctuary-milestone {
background-color: rgba(0, 0, 0, 0.4);
color: #cfd8dc;
}

html.skin-theme-clientpref-night .vani-door-card {
background-color: #1a1e20;
border-color: #2e3b40;
}

html.skin-theme-clientpref-night .vani-door-title a {
color: #92c5cd !important;
}

html.skin-theme-clientpref-night .vani-door-desc {
color: #9ea7aa;
}

html.skin-theme-clientpref-night .vani-door-btn {
background-color: #242e32;
color: #92c5cd !important;
}

html.skin-theme-clientpref-night .vani-mission-door {
background-color: #191c1e;
border-color: #2b373c;
}

/* 6. Responsive Mobile Breakpoints */
@media screen and (max-width: 900px) {
.vani-doors-grid {
grid-template-columns: repeat(2, 1fr);
}

.vani-entrance-hero {
flex-direction: column;
text-align: center;
padding: 24px;
}

.vani-mission-door {
flex-direction: column;
text-align: center;
}

.vani-mission-links {
flex-wrap: wrap;
justify-content: center;
}
}

@media screen and (max-width: 600px) {
.vani-doors-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
Vanipedia Visitors Statistics — Zero Scrollbar Configuration
========================================================================== */

/* Hide right Appearance menu */
.page-Vanipedia_Visitors_Statistics .vector-column-end,
.page-Vanipedia_Visitors_Statistics #vector-appearance-pinned-container,
.page-Vanipedia_Visitors_Statistics #vector-page-tools-pinned-container {
display: none !important;
}

/* 1350px centered container */
body.page-Vanipedia_Visitors_Statistics {
--max-width-base: 1350px !important;
--width-layout: 1350px !important;
}

.page-Vanipedia_Visitors_Statistics .mw-page-container {
max-width: 1350px !important;
width: 90% !important;
margin: 0 auto !important;
}

.page-Vanipedia_Visitors_Statistics .mw-page-container-inner,
.page-Vanipedia_Visitors_Statistics .mw-content-container,
.page-Vanipedia_Visitors_Statistics #content,
.page-Vanipedia_Visitors_Statistics .mw-parser-output {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}

/* Dashboard container */
.page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard {
width: 100% !important;
max-width: 100% !important;
margin: 15px auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
overflow: hidden !important;
}

/* Iframe with enough vertical room */
.page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard iframe {
display: block !important;
width: 100% !important;
min-width: 100% !important;
height: 950px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
overflow: hidden !important;
}

/* ==========================================================
VANIPEDIA MAIN PAGE
Full-screen custom homepage
========================================================== */

/* ----------------------------------------------------------
1. REMOVE MEDIAWIKI / VECTOR CHROME ON MAIN PAGE
---------------------------------------------------------- */

body.page-Main_Page #mw-head,
body.page-Main_Page #mw-panel,
body.page-Main_Page #left-navigation,
body.page-Main_Page #right-navigation,
body.page-Main_Page #p-personal,
body.page-Main_Page #p-search,
body.page-Main_Page #p-logo,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page #jump-to-nav,
body.page-Main_Page .mw-indicators,
body.page-Main_Page .mw-editsection,
body.page-Main_Page .vector-page-toolbar,
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page .vector-header-container,
body.page-Main_Page .vector-column-start,
body.page-Main_Page .vector-column-end,
body.page-Main_Page .vector-toc,
body.page-Main_Page .vector-settings,
body.page-Main_Page .vector-page-tools,
body.page-Main_Page .vector-main-menu-landmark,
body.page-Main_Page .mw-page-title-main,
body.page-Main_Page .firstHeading,
body.page-Main_Page #footer,
body.page-Main_Page .printfooter,
body.page-Main_Page .catlinks,

body.page-Main_Page .vector-sitenotice-container,
body.page-Main_Page #siteNotice,
body.page-Main_Page #localNotice,
body.page-Main_Page #mainbanner {
display: none !important;
}

/* ----------------------------------------------------------
2. REMOVE VECTOR WIDTH / GRID / MARGINS
---------------------------------------------------------- */

body.page-Main_Page,
body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner,
body.page-Main_Page .mw-content-container,
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page .mw-body-content,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;

margin: 0 !important;
padding: 0 !important;

border: 0 !important;
box-shadow: none !important;
}

body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner,
body.page-Main_Page .mw-content-container {
display: block !important;
min-height: 0 !important;
}

body.page-Main_Page main#content {
position: static !important;
}

body.page-Main_Page {
margin: 0 !important;
padding: 0 !important;

overflow-x: hidden;

background: #f5f1e8 !important;
}

/* ----------------------------------------------------------
3. RESET MEDIAWIKI STYLING INSIDE HOMEPAGE
---------------------------------------------------------- */

body.page-Main_Page #vani-home,
body.page-Main_Page #vani-home *,
body.page-Main_Page #vani-home *::before,
body.page-Main_Page #vani-home *::after {
box-sizing: border-box;
}

body.page-Main_Page #vani-home p {
margin: 0 !important;
padding: 0 !important;
}

body.page-Main_Page #vani-home a {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;

color: inherit;
text-decoration: none !important;
}

body.page-Main_Page #vani-home a.external {
padding-right: 0 !important;
background-image: none !important;
}

body.page-Main_Page #vani-home img {
margin: 0 !important;
padding: 0 !important;

border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

/* ==========================================================
HOMEPAGE CANVAS
========================================================== */

body.page-Main_Page #vani-home {
--cream: #f6f2e9;
--cream-2: #eee8dc;
--green: #123f38;
--green-soft: #31574f;
--gold: #b1873d;
--text: #18201d;
--muted: #746f65;

position: relative;

width: 100vw !important;
max-width: 100vw !important;

height: 100vh;
min-height: 720px;

margin: 0 !important;
padding: 20px 38px 18px !important;

overflow: hidden;

color: var(--text);

background:
radial-gradient(
circle at 62% 24%,
rgba(255,255,255,.76) 0,
rgba(255,255,255,.30) 26%,
transparent 48%
),
linear-gradient(
105deg,
#faf7f0 0%,
var(--cream) 55%,
#f2ede3 100%
);

font-family: Georgia, "Times New Roman", serif;
}

/* ==========================================================
TOP BAR
========================================================== */

.vh-top {
height: 66px;

display: flex;
align-items: center;
justify-content: space-between;

position: relative;
z-index: 20;
margin-bottom: 20px;
}

/* ==========================================================
BRAND
========================================================== */

.vh-brand {
display: flex;
align-items: center;
}

/* ROUND LOGO */

.vh-round-logo {
flex: 0 0 auto;
}

.vh-round-logo img {
width: 60px;
height: 60px;
object-fit: contain;
}

/* VANIPEDIA WORDMARK + SMALL NETWORK LINKS */

.vh-wordmark-group {
position: relative;
flex: 0 0 auto;
line-height: 0;
}

.vh-brand-network {
position: absolute;
top: 100%;
left: 0;
right: 0;
transform: translateX(10px);
display: flex;
align-items: center;
justify-content: center;
gap: 24px;

margin-top: 3px;

font-family: Arial, Helvetica, sans-serif;
font-size: 14px; /* VANISOURCE / VANIQUOTES / VANIMEDIA */
font-weight: 700;
line-height: 1;
letter-spacing: .02em;

white-space: nowrap;
}

.vh-brand-network a {
color: #B5BC64 !important;
text-decoration: none !important;
transition: color .2s ease;
}

.vh-brand-network a:hover {
color: var(--gold) !important;
}

.vh-brand-network span {
margin: 0 3px;
color: var(--gold);
}

.vh-round-logo {
flex: 0 0 auto;
}

.vh-round-logo img {
width: 60px;
height: 60px;
object-fit: contain;
}

.vh-wordmark img {
width: auto;
height: 60px;
object-fit: contain;
}

.vh-wordmark img {
width: auto;
height: 50px;
object-fit: contain;
}

.vh-subtitle {
width: 950px;
margin-left: 28px;
padding-left: 18px;
border-left: 2px solid rgba(177,135,61,.45);
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
line-height: 1.3;
letter-spacing: .11em;
white-space: nowrap;
align-self: center;
transform: translateY(6px);
}

.vh-top-links {
display: flex;
align-items: center;

gap: 17px;

font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .08em;

color: var(--green);
}

.vh-top-links i {
display: block;

width: 2px;
height: 17px;

background: rgba(177,135,61,.38);
}

.vh-top-links a {
color: var(--green) !important;
}

/* ==========================================================
HERO AREA
========================================================== */

.vh-main {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(600px, 1fr)
220px;
column-gap: 24px;
height: 510px;
}

.vh-main::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -35px; /* move divider down */
height: 1px;
background: rgba(177,135,61,.35);
pointer-events: none;
}

/* ----------------------------------------------------------
FROM HIS LETTERS heading
---------------------------------------------------------- */

.vh-letter-heading {
display: block;

width: auto;
height: auto;

margin: 0 0 22px;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--gold);

font-size: 11px;
font-weight: 600;
line-height: 1.35;

letter-spacing: .12em;

text-align: left;
}

/* ----------------------------------------------------------
Rotating content
---------------------------------------------------------- */

#vh-random-letter {
opacity: 1;

transition:
opacity .45s ease,
transform .45s ease;
}

#vh-random-letter.is-changing {
opacity: 0;
transform: translateY(5px);
}

/* ----------------------------------------------------------
Whole item clickable
---------------------------------------------------------- */

.vh-random-letter-link {
display: block;

color: inherit;

text-decoration: none !important;
}

/* ----------------------------------------------------------
Recipient
---------------------------------------------------------- */

.vh-random-letter-person {
margin-bottom: 5px;

color: var(--green);

font-family: "Noto Serif", Georgia, serif;
font-size: 17px;
font-weight: 600;
line-height: 1.2;
}

/* ----------------------------------------------------------
Date
---------------------------------------------------------- */

.vh-random-letter-date {
margin-bottom: 14px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.3;

letter-spacing: .04em;
}

/* ----------------------------------------------------------
Selected passage
---------------------------------------------------------- */

.vh-random-letter-text {
color: var(--text);

font-family: "Noto Serif", Georgia, serif;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}

/* ----------------------------------------------------------
Read letter
---------------------------------------------------------- */

.vh-random-letter-more {
margin-top: 14px;
padding-top: 9px;

border-top:
1px solid rgba(177,135,61,.30);

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 600;
line-height: 1.2;

letter-spacing: .08em;
text-transform: uppercase;
}

/* ----------------------------------------------------------
Hover
---------------------------------------------------------- */

.vh-random-letter-link:hover
.vh-random-letter-person,

.vh-random-letter-link:hover
.vh-random-letter-more {
color: var(--gold);
}

/* ----------------------------------------------------------
MAIN TITLE / INTRO
---------------------------------------------------------- */

.vh-intro {
position: relative;
z-index: 8;

grid-column: 1;
grid-row: 1;

width: 650px;
min-width: 0;

padding-top: 36px;
padding-left: 145px;
}

.vh-main-title {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(64px, 5.2vw, 94px);
font-weight: 700;
line-height: .88;
letter-spacing: -.025em;
color: var(--green);
}

.vh-description,
.vh-quote-text,
.vh-quote-source,
.vh-discover-primary,
.vh-discover-secondary,
.vh-gateway-text,
.vh-feature-copy,
.vh-network-mission {
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

.vh-subtitle,
.vh-top-links,
.vh-small-heading,
.vh-gateway-title,
.vh-section-title,
.vh-feature-copy small,
.vh-network-grid small {
font-family: Arial, Helvetica, sans-serif;
}

.vh-gold-rule {
width: 35px;
height: 2px;

margin: 27px 0 18px;

background: var(--gold);
}

/* ==========================================================
ROTATING ŚRĪLA PRABHUPĀDA SUBTITLE
========================================================== */

.vh-description {
width: 700px;
max-width: 700px;
min-height: 64px;

color: var(--text);

font-size: 26px;
line-height: 1.48;

opacity: 1;
transition: opacity .45s ease;
left: 50px;
bottom: 0px;
background: transparent;
}

.vh-description.is-changing {
opacity: 0 !important;
}

/* ==========================================================
HERO PHOTO AREA
========================================================== */

.vh-photo-stage {
position: relative;
z-index: 2;

grid-column: 1;
grid-row: 1;

width: 790px;
justify-self: end;
margin: 0 35px 0 0;

overflow: hidden;
pointer-events: none;
height: calc(105% + 90px);
top: -85px;

}

.vh-photo {
position: absolute;
inset: 0;

background-position: center center;
background-repeat: no-repeat;
background-size: cover;

opacity: 0;

filter:
grayscale(.10)
sepia(.06)
saturate(.82)
contrast(.96);

transition: opacity 5s ease-in-out;

border-radius: 50;

-webkit-mask-image:
radial-gradient(
ellipse 54% 60% at 50% 50%,
black 58%,
rgba(0,0,0,.99) 64%,
rgba(0,0,0,.92) 70%,
rgba(0,0,0,.78) 77%,
rgba(0,0,0,.58) 84%,
rgba(0,0,0,.36) 90%,
rgba(0,0,0,.16) 95%,
rgba(0,0,0,.05) 98%,
transparent 100%
),
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
);

-webkit-mask-composite:
source-in,
source-in;

mask-image:
radial-gradient(
ellipse 54% 60% at 50% 50%,
black 58%,
rgba(0,0,0,.99) 64%,
rgba(0,0,0,.92) 70%,
rgba(0,0,0,.78) 77%,
rgba(0,0,0,.58) 84%,
rgba(0,0,0,.36) 90%,
rgba(0,0,0,.16) 95%,
rgba(0,0,0,.05) 98%,
transparent 100%
),
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.10) 3%,
rgba(0,0,0,.35) 7%,
rgba(0,0,0,.72) 12%,
black 18%,
black 82%,
rgba(0,0,0,.72) 88%,
rgba(0,0,0,.35) 93%,
rgba(0,0,0,.10) 97%,
transparent 100%
);

mask-composite:
intersect,
intersect;
}

/* ==========================================================
DISCOVER
========================================================== */

/* ==========================================================
THEMATIC ARTICLE SPOTLIGHT
========================================================== */

.vh-discover {
position: relative;
z-index: 9;

grid-column: 2;
grid-row: 1;

top: 28px;

width: 220px;
height: calc(100% - 0px);

margin: 0;
padding-left: 24px;

border-left: 1px solid rgba(177,135,61,.35);

font-size: 11px;
line-height: 1.42;
}

/* Section heading */

.vh-discover-heading {
font-size: 18px;
line-height: 1.35;
letter-spacing: .12em;
color: var(--gold);
}

/* Random article container */

#vh-random-article {
margin-top: 28px;

transition:
opacity .7s ease,
transform .7s ease;
}

#vh-random-article.is-changing {
opacity: 0;
transform: translateY(5px);
}

/* Whole article preview is clickable */

.vh-random-article-link {
display: block;
color: inherit;
text-decoration: none !important;
}

/* Article title */

.vh-random-article-title {
color: var(--green);

font-family: "Noto Serif", Georgia, serif;
font-size: 18px;
font-weight: 400;
line-height: 1.18;

margin-bottom: 13px;
}

/* First lines of article */

.vh-random-article-extract {
color: var(--text);

font-family: "Noto Serif", Georgia, serif;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}

/* Read article link */

.vh-random-article-more {
margin-top: 15px;
padding-top: 10px;

border-top: 1px solid rgba(177,135,61,.35);

color: var(--gold);

font-size: 10px;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
}

/* Hover */

.vh-random-article-link:hover .vh-random-article-title,
.vh-random-article-link:hover .vh-random-article-more {
color: var(--gold);
}

/* ==========================================================
GATEWAYS
========================================================== */

.vh-gateways {
position: absolute;
left: 170px;
bottom: 35px;
z-index: 20;

display: flex;
align-items: stretch;

width: 1000px;
height: 125px;
}

.vh-gateway {
position: relative;

flex: 1 1 150px;
min-width: 140px;

padding: 0 8px;

text-align: center;
}

/* Taller separators between gateways */
.vh-gateway:not(:last-child)::after {
content: "";

position: absolute;

right: 0;

top: 15px;
bottom: 15px;

width: 1px;

background: rgba(18,63,56,.18);

pointer-events: none;
}

.vh-gateway:last-child {
border-right: 0;
}

.vh-icon {
display: block;

height: 50px;

color: var(--green);

font-size: 29px;
line-height: 45px;
}

.vh-gateway-title {
margin: 4px 0 4px;

color: var(--text);

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
letter-spacing: .05em;
}

.vh-gateway-title a {
display: inline !important;
color: var(--text) !important;
}

.vh-gateway-text {
font-size: 18px;
line-height: 1.12;
}

.vh-gateway-text.vh-gateway-links {
font-size: 18px;
line-height: 1.12;
}

.vh-gateway-links a {
margin: 0 !important;
}

/* ==========================================================
CONTINUOUS LIFE TIMELINE
========================================================== */

.vh-lifeline-window {
position: relative;
z-index: 10;

height: 116px;
margin-top: 30px;

width: 100vw;
max-width: 100vw;

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

overflow: hidden;

cursor: grab;

user-select: none;
-webkit-user-select: none;
}

.vh-lifeline-window:active {
cursor: grabbing;
}

.vh-lifeline {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;

touch-action: pan-y;
}

.vh-timeline-track {
position: absolute;
top: 0;
left: 0;

display: flex;
align-items: flex-start;

width: max-content;
height: 100%;

will-change: transform;
}

/* horizontal line */

.vh-timeline-track::before {
content: "";

position: absolute;
left: 0;
right: 0;
top: 42px;

height: 1px;

background: rgba(177,135,61,.55);
}

/* one timeline event */

.vh-timeline-item {
position: relative;
flex: 0 0 220px;
box-sizing: border-box;
padding: 10px 20px 0;
color: var(--green);
text-decoration: none !important;
}

/* date */

.vh-timeline-date {
height: 21px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 600;

line-height: 1.2;
letter-spacing: .06em;

text-transform: uppercase;
}

/* dot */

.vh-timeline-dot {
position: absolute;

top: 38px;
left: 20px;

width: 8px;
height: 8px;

border-radius: 50%;

background: var(--green);

border: 2px solid #f6f2e9;

box-sizing: border-box;

z-index: 2;
}

/* short event text */

.vh-timeline-text {
margin-top: 24px;

max-width: 175px;

color: var(--text);

font-family: "Noto Serif", Georgia, serif;
font-size: 11px;
font-weight: 400;

line-height: 1.35;
}

/* hover */

.vh-timeline-item:hover .vh-timeline-date,
.vh-timeline-item:hover .vh-timeline-text {
color: var(--gold);
}

/* subtle edge fade */

.vh-lifeline-window::before,
.vh-lifeline-window::after {
content: "";

position: absolute;
top: 0;
bottom: 0;

width: 65px;

z-index: 20;

pointer-events: none;
}

.vh-lifeline-window::before {
left: 0;

background:
linear-gradient(
to right,
#f6f2e9,
rgba(246,242,233,0)
);
}

.vh-lifeline-window::after {
right: 0;

background:
linear-gradient(
to left,
#f6f2e9,
rgba(246,242,233,0)
);
}

/* ==========================================================
TEMPORARY LOGO FALLBACK
Only relevant if you use .vh-logo-temp
========================================================== */

.vh-logo-temp {
width: 58px;
height: 58px;

display: flex;
align-items: center;
justify-content: center;

border: 3px solid var(--gold);
border-radius: 50%;

background: var(--green);

color: #fff;

font-size: 37px;
line-height: 1;
}

/* ==========================================================
MOTION ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

.vh-lifeline {
animation: none !important;
}

.vh-photo,
#vh-discover-content,
.vh-feature-grid {
transition: none !important;
}
}

/* ==========================================================
1366–1500px DESKTOPS
========================================================== */

@media (max-width: 1500px) {

body.page-Main_Page #vani-home {
padding-left: 24px !important;
padding-right: 24px !important;
}

.vh-main-title {
font-size: 67px;
}

.vh-gateways {
width: 585px;
}

.vh-gateway {
padding-left: 8px;
padding-right: 8px;
}

.vh-bottom {
grid-template-columns:
minmax(560px, 1.12fr)
minmax(570px, 1fr);

gap: 20px;
}

.vh-network-grid {
grid-template-columns:
repeat(4, 88px)
minmax(150px, 1fr);
}

.vh-wordmark {
font-size: 30px;
}

.vh-subtitle {
font-size: 9px;
}
}

/* ==========================================================
1200–1365px DESKTOPS
========================================================== */

@media (max-width: 1365px) {

.vh-main-title {
font-size: 61px;
}

.vh-description {
font-size: 12px;
}

.vh-gateways {
width: 525px;
}

.vh-gateway-text {
font-size: 9px;
}

.vh-gateway-title {
font-size: 9px;
}

.vh-bottom {
grid-template-columns:
1.05fr
.95fr;
}

.vh-network-grid {
grid-template-columns:
repeat(4, 78px)
minmax(140px, 1fr);
}
}

/* ==========================================================
SMALL GATEWAY DESTINATION LINKS
========================================================== */

.vh-gateway-links {
line-height: 1.65;
}

/* Individual links */

.vh-gateway-links a {
position: relative;

display: inline-block !important;

color: var(--green) !important;
text-decoration: none !important;

font-weight: 500;

opacity: .82;

transition:
color .22s ease,
opacity .22s ease,
transform .22s ease;
}

/* Very fine underline */

.vh-gateway-links a::after {
content: "";

position: absolute;

left: 50%;
bottom: -2px;

width: 0;
height: 1px;

background: var(--gold);

transform: translateX(-50%);

transition:
width .28s cubic-bezier(.2,.8,.2,1);
}

/* Hover */

.vh-gateway-links a:hover {
color: var(--gold) !important;
opacity: 1;

transform: translateY(-1px);
}

.vh-gateway-links a:hover::after {
width: 100%;
}

/* Separators */

.vh-link-sep {
margin: 0 3px;

color: var(--gold);
opacity: .55;
}

.vh-gateway-links a {
animation: vh-link-arrive .65s ease both;
}

.vh-gateway-links a:nth-of-type(1) {
animation-delay: .45s;
}

.vh-gateway-links a:nth-of-type(2) {
animation-delay: .60s;
}

.vh-gateway-links a:nth-of-type(3) {
animation-delay: .75s;
}

.vh-gateway-links a:nth-of-type(4) {
animation-delay: .90s;
}

@keyframes vh-link-arrive {

from {
opacity: 0;
transform: translateY(4px);
}

to {
opacity: .82;
transform: translateY(0);
}
}

/* Prevent popups */
body.page-Main_Page #vani-home a[title]:hover::after {
content: none !important;
display: none !important;
}

/* ==========================================================
MAIN PAGE — REMOVE STRAY TOP/BOTTOM SKIN STRIPS
========================================================== */

/* Force every outer Vector wrapper behind homepage to cream */
body.page-Main_Page,
body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner,
body.page-Main_Page .mw-content-container,
body.page-Main_Page #content,
body.page-Main_Page .mw-body,
body.page-Main_Page .mw-body-content,
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output {
background: #f6f2e9 !important;
}

/* MediaWiki sometimes creates empty paragraphs around the page markup */
body.page-Main_Page .mw-parser-output > p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}

/* Remove any residual top/bottom spacing around parser output */
body.page-Main_Page .mw-parser-output > p:first-child {
display: none !important;
}

/* No outer spacing around homepage */
body.page-Main_Page #vani-home {
margin: 0 !important;
}

body.page-Main_Page .mw-footer-container,
body.page-Main_Page footer,
body.page-Main_Page #footer {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
}

body.page-Main_Page .mw-jump-link {
display: none !important;
}

body.page-Main_Page,
body.page-Main_Page .mw-page-container,
body.page-Main_Page .mw-page-container-inner {
margin-top: 0 !important;
padding-top: 0 !important;
background: #f6f2e9 !important;
}

.vh-intro::before {
content: "";

position: absolute;
z-index: -1;

left: -20px;
top: 0;
bottom: 0;

width: 500px;
height: 500px;
pointer-events: none;
}

body.page-Main_Page #vani-home .vh-main-title,
body.page-Main_Page #vani-home .vh-gold-rule,
body.page-Main_Page #vani-home .vh-description {
position: relative !important;
left: 60px !important;
}

/* ==========================================================
FROM HIS LETTERS — LEFT PANEL
========================================================== */

/*
* Keep .vh-now because it positions the left column.
* It is now only an internal technical class name.
*/

.vh-now {
position: absolute;
z-index: 15;

top: 28px;
left: -20px;

width: 180px;
height: calc(100% - 0px);

box-sizing: border-box;

padding: 20px 18px 20px 0;

border-right: 1px solid rgba(177,135,61,.35);

text-align: left;

font-size: 11px;
line-height: 1.42;
}

.vh-letter-heading {
display: block;
width: 100%;
height: auto;

margin: 0 0 22px;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--gold);

font-size: 13px;
font-weight: 600;
line-height: 1.35;
letter-spacing: .12em;

text-align: center;
}

/* ==========================================================
HERO TITLE — WHO IS REVEAL
========================================================== */

.vh-hero-title-wrap {
position: relative;
display: inline-block;
}

.vh-hero-title-link {
position: relative;
display: inline-block;
}

/* MediaWiki-generated link wrapping everything */

.vh-hero-title-link > a {
display: block;
position: relative;

color: inherit;
text-decoration: none !important;
}

.vh-who-corner {
position: absolute;

/* VERTICAL POSITION */
top: 3px;

/* HORIZONTAL POSITION */
right: -5px;

/* SIZE */
font-size: 40px;

color: var(--green);
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 700;
line-height: .88;
letter-spacing: -.025em;

white-space: nowrap;

opacity: 0;
transform: translateX(-18px);

transition:
opacity .45s ease,
transform .55s cubic-bezier(.22,.7,.25,1);
}

/* Reveal */

.vh-hero-title-wrap:hover .vh-who-corner {
opacity: 1;
transform: translateX(0);
}

/* No standard link effects */

.vh-hero-title-link a:hover,
.vh-hero-title-link a:visited {
color: inherit;
text-decoration: none !important;
}

/* ==========================================================
WHO IS ŚRĪLA PRABHUPĀDA?
========================================================== */

.vh-who-link {
position: absolute;

left: 4px;
bottom: -39px;

z-index: 30;

opacity: 0;
transform: translateY(-7px);

pointer-events: none;

transition:
opacity .35s ease,
transform .35s ease;
}

.vh-who-link a {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 8px 13px 7px;

border: 1px solid rgba(177,135,61,.65);
border-radius: 2px;

background: rgba(246,242,233,.88);

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1;

letter-spacing: .10em;
text-transform: uppercase;

text-decoration: none !important;

transition:
color .25s ease,
border-color .25s ease,
background .25s ease;
}

.vh-who-arrow {
position: relative;
top: -1px;

font-size: 14px;
line-height: 1;

transition: transform .25s ease;
}

/* Reveal ONLY when interacting with the hero title */

.vh-hero-title-wrap:hover .vh-who-link {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

/* Button hover */

.vh-who-link a:hover {
color: var(--green);

border-color: var(--gold);

background: rgba(246,242,233,.98);
}

.vh-who-link a:hover .vh-who-arrow {
transform: translateX(3px);
}

.vh-lifeline-window {
cursor: grab;
user-select: none;
-webkit-user-select: none;
}

.vh-lifeline-window.is-dragging {
cursor: grabbing;
}

.vh-timeline-item {
-webkit-user-drag: none;
user-drag: none;
}

.vh-timeline-item:hover .vh-timeline-dot {
transform: scale(1.5);
}

.vh-timeline-dot {
transition: transform .2s ease;
}

/* Timeline must follow JS position immediately */
body.page-Main_Page #vani-home .vh-timeline-track {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
transform-origin: 0 0;
}

body.page-Main_Page #vani-home .vh-timeline-item {
transition: none !important;
}

/* ==========================================================
VIRTUAL TIMELINE PERFORMANCE
========================================================== */

body.page-Main_Page #vani-home .vh-timeline-track {
display: flex;
position: absolute;

top: 0;
left: 0;

height: 100%;

transition: none !important;
animation: none !important;

will-change: transform;

transform-style: flat;
}

body.page-Main_Page #vani-home .vh-timeline-item {
flex: 0 0 220px;

width: 220px;

transition: none !important;
animation: none !important;

-webkit-user-drag: none;
}

body.page-Main_Page #vani-home .vh-lifeline-window {
cursor: grab;

user-select: none;
-webkit-user-select: none;

touch-action: pan-y;
}

body.page-Main_Page #vani-home .vh-lifeline-window.is-dragging {
cursor: grabbing;
}

/* ==========================================================
TIMELINE YEAR NAVIGATION
========================================================== */

.vh-timeline-section {
position: relative;
top: 12px;
}

.vh-timeline-years {
display: flex !important;
align-items: center;
justify-content: center;

width: 100%;

gap: 22px;

margin: 0 0 10px;
padding: 0;
position: relative;
top: 35px;
white-space: nowrap;

font-family: Arial, Helvetica, sans-serif;
}

.vh-timeline-years .vh-year {
display: inline-block;

margin: 0;
padding: 4px 2px;

color: rgba(18,63,56,.62);

font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1;

letter-spacing: .04em;

cursor: pointer;

user-select: none;
-webkit-user-select: none;

transition:
color .2s ease,
transform .2s ease;
}

.vh-timeline-years .vh-year:hover {
color: var(--gold);
transform: translateY(-1px);
}

.vh-timeline-years .vh-year.is-active {
color: var(--gold);
font-weight: 700;
}

/* Random quotes */
.vh-quote {
height: 82px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 40px;
border-top: 1px solid rgba(177,135,61,.25);
border-bottom: 1px solid rgba(177,135,61,.25);
margin-top: 26px;
}

.vh-quote-inner {
flex: 1 1 auto;
min-width: 0;
max-width: 1500px;
text-align: center;
}

.vh-quote-text {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

color: var(--text);
font-size: clamp(20px, 1.65vw, 29px);
line-height: 1.16;
}

.vh-quote-source {
margin-top: 7px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;

color: var(--gold);
font-size: 12px;
line-height: 1;
}

.vh-quote-source::before,
.vh-quote-source::after {
content: "";
width: 74px;
height: 1px;
background: rgba(177,135,61,.45);
flex: 0 0 auto;
}

.vh-quote-source a {
color: inherit !important;
text-decoration: none !important;
}

.vh-quote-source a:hover {
color: var(--green) !important;
}

.vh-quote-mark {
position: relative;
top: 15px;

flex: 0 0 auto;
color: var(--gold);
font-size: 93px;
line-height: 1;
}

#vh-random-quote,
#vh-random-quote-source {
transition: opacity .45s ease;
}

#vh-random-quote.is-changing,
#vh-random-quote-source.is-changing {
opacity: 0;
}

.vh-featured {
width: auto;
padding-right: 0;
}

.vh-featured .vh-section-title {
display: flex;
align-items: center;
gap: 12px;

margin-bottom: 13px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;

letter-spacing: .08em;
white-space: nowrap;
}

.vh-featured .vh-section-title::after {
content: "";

width: 85px;
height: 1px;

background: rgba(177,135,61,.45);
}
/* ==========================================================
BOTTOM AREA
========================================================== */

.vh-bottom {
display: grid;

grid-template-columns:
minmax(760px, 1.3fr)
minmax(600px, 1fr);

column-gap: 32px;

align-items: start;

margin-top: 18px;

padding-top: 18px;
padding-bottom: 10px;
}

.vh-featured,
.vh-network {
min-width: 0;
}

/* ==========================================================
TREASURES OF THE VANI — TITLE
========================================================== */

.vh-featured .vh-section-title {
display: flex;
align-items: center;
gap: 12px;

margin: 0 0 13px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;

letter-spacing: .08em;
white-space: nowrap;
}

.vh-featured .vh-section-title::after {
content: "";

width: 85px;
height: 1px;

background: rgba(177,135,61,.45);
}

/* ==========================================================
TREASURES OF THE VANI — GRID
========================================================== */

.vh-feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));

gap: 14px;
margin-top: 0;
}

/* ==========================================================
INDIVIDUAL TREASURE CARD
========================================================== */

.vh-feature {
display: grid;
grid-template-columns: 48% 52%;

height: 125px;
min-width: 0;
overflow: hidden;

border-radius: 6px;

background: #f3ecdf;

cursor: pointer;

transition: transform .2s ease;
}

.vh-feature:hover {
transform: translateY(-2px);
}

.vh-feature a {
color: inherit;
text-decoration: none !important;
}

/* ==========================================================
MEDIA AREA
========================================================== */

.vh-feature-media,
.vh-feature-audio {
position: relative;

width: 100%;
height: 125px;

box-sizing: border-box;
overflow: hidden;

border-radius: 6px 0 0 6px;

background: #f3ecdf;
}

/* Normal video/image cards */

.vh-feature-video .vh-feature-media,
.vh-feature-imagequote .vh-feature-media {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* SHORT
Keep complete vertical YouTube Shorts thumbnail visible.
*/

.vh-feature-short .vh-feature-media {
background-position: center;
background-repeat: no-repeat;
background-size: contain;

background-color: #f3ecdf;
}

/* ==========================================================
TEXT PANEL ON RIGHT
========================================================== */

.vh-feature-copy {
min-width: 0;
box-sizing: border-box;

padding: 3px 10px 5px 12px;

background: #f3ecdf;

border-radius: 0 6px 6px 0;
}

.vh-feature-copy small,

/* SHORT / VIDEO / IMAGE QUOTE / NECTAR DROP */

.vh-feature-copy small {
margin-bottom: 5px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;

letter-spacing: .08em;
text-transform: uppercase;
}

/* Actual title */

.vh-feature-copy strong {
display: block;

color: var(--green);

font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 700;
line-height: 1.08;
}

/*
* Metadata currently not needed.
* Keep it hidden so dates do not appear underneath.
*/

.vh-feature-copy span {
display: none;
}

/* ==========================================================
NECTAR DROP
========================================================== */

.vh-feature-audio {
display: flex;
align-items: center;
justify-content: center;

background: #f3ecdf;
}

.vh-feature-audio-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
font-size: 37px;

border: 1px solid rgba(177,135,61,.50);
border-radius: 50%;

color: var(--gold);
line-height: 1;

cursor: pointer;

transition:
transform .2s ease,
background .2s ease;
}

.vh-feature-nectar:hover .vh-feature-audio-icon {
transform: scale(1.06);
background: rgba(177,135,61,.08);
}

/* ==========================================================
VANI NETWORK
========================================================== */

.vh-network .vh-section-title {
display: flex;
align-items: center;
gap: 12px;

margin: 0 0 13px;

color: var(--gold);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .08em;

white-space: nowrap;
}

.vh-network .vh-section-title::after {
content: "";
width: 85px;
height: 1px;

background: rgba(177,135,61,.45);
}

.vh-network-row {
display: flex !important;
flex-direction: row !important;
align-items: stretch;

width: 100%;
height: 125px;
}

.vh-network-stat {
flex: 0 0 120px;
min-width: 120px;

box-sizing: border-box;

padding: 5px 10px 0;

text-align: center;
border-left: 1px solid rgba(18,63,56,.16);
border-right: 1px solid rgba(18,63,56,.16);

cursor: pointer;

transition:
background .22s ease,
transform .22s ease;
}

.vh-network-stat > a {
display: block;
width: 100%;
height: 100%;

color: inherit !important;
text-decoration: none !important;
}

.vh-network-stat:hover {
background: rgba(177,135,61,.08);
transform: translateY(-3px);
}

.vh-network-stat:hover .vh-network-icon {
transform: scale(1.12);
color: var(--gold);
}

.vh-network-stat:hover strong {
color: var(--gold);
}

.vh-network-icon {
display: flex;
align-items: center;
justify-content: center;

height: 42px;

color: var(--green);

font-size: 32px;
line-height: 1;

transition:
transform .22s ease,
color .22s ease;
}

.vh-icon-quotes {
font-family: Georgia, "Times New Roman", serif;
font-size: 60px;
line-height: 1;

position: relative;
top: 10px;
}

.vh-network-stat strong {
display: block;

margin-top: -8px;

color: var(--green);

font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
white-space: nowrap;
line-height: 1;
font-size: 21px;
}

.vh-icon-quotes + strong {
white-space: normal;
line-height: 1;
font-size: 19px;
}

.vh-network-stat small {
display: block;

margin-top: 8px;

color: var(--green);

font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: 700;
line-height: 1.25;
letter-spacing: .04em;
}

/* ==========================================================
VANI NETWORK MISSION
========================================================== */

.vh-network-mission {
display: flex;
align-items: center;

flex: 1 1 auto;
min-width: 430px;
height: 125px;

box-sizing: border-box;
padding: 0 0px 0 10px;

border-left: 1px solid rgba(18,63,56,.16);

cursor: pointer;
transition: background .22s ease;
}

.vh-network-world {
flex: 0 0 150px;

display: flex;
align-items: center;
justify-content: flex-start;

margin-right: 0px;
}

.vh-network-mission-text {
flex: 1 1 auto;
min-width: 250px;

color: var(--green);

font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
}

.vh-network-mission:hover {
background: rgba(177,135,61,.08);
}

.vh-network-mission:hover .vh-network-world img {
transform: scale(1.05);
opacity: 1;
}

/* ==========================================================
RESPONSIVE BOTTOM AREA
========================================================== */

@media (max-width: 1500px) {

.vh-bottom {
grid-template-columns:
minmax(650px, 1.2fr)
minmax(650px, 1fr);

column-gap: 20px;
}

.vh-feature-grid {
gap: 10px;
}

.vh-feature {
grid-template-columns: 47% 53%;
}

.vh-feature-copy {
padding-left: 9px;
padding-right: 7px;
}

.vh-network-stat {
flex: 0 0 110px;
min-width: 110px;
}
}

@media (max-width: 1365px) {

.vh-bottom {
grid-template-columns:
minmax(600px, 1.1fr)
minmax(620px, 1fr);
}

.vh-feature-grid {
gap: 8px;
}

.vh-network-stat {
flex: 0 0 105px;
min-width: 105px;
}
}

/* =====================================================
SOCIAL PLATFORM STATISTICS
===================================================== */

/* Month / year title */

.social-stats-title {
margin: 30px 0 10px;
padding-bottom: 7px;

font-size: 25px;
line-height: 1.25;
font-weight: 700;

color: #202122;
border-bottom: 2px solid #2a4452;
}

/* Clickable statistics bar */

.social-stats-header {
display: flex !important;
flex-direction: row !important;
align-items: stretch;

width: 100%;
box-sizing: border-box;

background: #fff;
border: 2px solid #2a4452;
border-radius: 8px;

overflow: hidden;
cursor: pointer;
}

.social-stats-header:hover {
background: #7fbd97;
}

/* Platform blocks */

.social-stats-platform {
flex: 1 1 0;
min-width: 0;

display: flex;
flex-direction: column;
justify-content: center;

padding: 16px 20px;

border-right: 1px solid #c8ccd1;
}

.social-stats-name {
margin-bottom: 4px;

font-size: 12px;
font-weight: 600;
color: #72777d;

text-transform: uppercase;
letter-spacing: .04em;
}

.social-stats-views {
font-size: 21px;
line-height: 1.2;
font-weight: 700;

color: #202122;
}

/* Details */

.social-stats-open {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;

padding: 0 20px;

font-size: 14px;
font-weight: 600;

color: #2a4452;
background: #eef2f4;

white-space: nowrap;
}

.social-stats-arrow {
font-size: 10px;
}

/* Expanded report */

.social-stats-details {
box-sizing: border-box;

margin-top: -2px;
padding: 24px 28px 30px;

background: #fff;

border: 2px solid #2a4452;
border-top: 1px solid #c8ccd1;
border-radius: 0 0 8px 8px;
}

.social-stats-number {
font-size: 21px;
line-height: 1.15;
font-weight: 700;
color: #202122;
}

.social-stats-view-label {
margin-top: 2px;

font-size: 11px;
line-height: 1.2;

color: #72777d;
}

/* ==========================================================
IMAGE QUOTE POPUP
========================================================== */

#vh-imagequote-lightbox {
position: fixed;
z-index: 100000;

/* positioned by JS */
top: auto;
left: auto;

display: block;
padding: 0;

background: transparent;

opacity: 0;
visibility: hidden;
pointer-events: none;

transition:
opacity .2s ease,
visibility .2s ease;
}

#vh-imagequote-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

#vh-imagequote-lightbox img {
display: block;

width: 20vw;
max-width: 380px;
min-width: 260px;
height: auto;
max-height: 55vh;

object-fit: contain;

border-radius: 6px;

box-shadow:
0 8px 28px
rgba(0, 0, 0, .28);
}

.vh-imagequote-lightbox-close {
position: absolute;
z-index: 2;

top: 5px;
right: 7px;

width: 28px;
height: 28px;

padding: 0;
border: 0;
border-radius: 50%;

background: rgba(0, 0, 0, .55);
color: #fff;

font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
line-height: 26px;

cursor: pointer;
}

/* Nectar Drop audio activity */

.vh-feature-audio {
flex-direction: column;
gap: 10px;
}

.vh-nectar-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;

height: 18px;

opacity: 0;
transition: opacity .2s ease;
}

.vh-nectar-wave.is-playing {
opacity: 1;
}

.vh-nectar-wave span {
width: 2px;
height: 4px;

border-radius: 2px;
background: var(--gold);

transform-origin: center;
}

.vh-nectar-wave.is-playing span {
animation: vhNectarWave .75s ease-in-out infinite alternate;
}

.vh-nectar-wave.is-playing span:nth-child(2) {
animation-delay: -.45s;
}

.vh-nectar-wave.is-playing span:nth-child(3) {
animation-delay: -.20s;
}

.vh-nectar-wave.is-playing span:nth-child(4) {
animation-delay: -.60s;
}

.vh-nectar-wave.is-playing span:nth-child(5) {
animation-delay: -.30s;
}

.vh-nectar-wave.is-playing span:nth-child(6) {
animation-delay: -.55s;
}

.vh-nectar-wave.is-playing span:nth-child(7) {
animation-delay: -.10s;
}

@keyframes vhNectarWave {

0% {
height: 3px;
}

100% {
height: 16px;
}
}

/* Nectar audio area — never scroll */

.vh-feature-nectar .vh-feature-audio {
overflow: hidden !important;
}

.vh-feature-nectar .vh-nectar-wave {
flex-shrink: 0;
}

/* Video + Nectar Drop title limit */

.vh-feature-video .vh-feature-copy strong,
.vh-feature-nectar .vh-feature-copy strong {
font-size: 13px;
line-height: 1.08;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}

/* =========================================================
VANIPEDIA FLIPBOOK POPUP
========================================================= */

.vani-flipbook-trigger {
display: inline-block;
cursor: pointer;
}

.vani-flipbook-trigger img {
display: block;
max-width: 100%;
height: auto;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.vani-flipbook-trigger:hover img {
transform: translateY(-3px);

box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.22);
}

/* Full-screen dark overlay */

#vani-flipbook-overlay {
position: fixed;

top: 0;
right: 0;
bottom: 0;
left: 0;

z-index: 100000;

display: none;

align-items: center;
justify-content: center;

padding: 20px;

background:
rgba(15, 20, 18, 0.90);
}

#vani-flipbook-overlay.is-open {
display: flex;
}

/* Popup */

.vani-flipbook-modal {
position: relative;

width: calc(100vw - 80px);
height: calc(100vh - 40px);

max-width: 1800px;

overflow: hidden;

background: #d9d6cf;

border-radius: 6px;

box-shadow:
0 20px 70px
rgba(0, 0, 0, 0.55);
}

/* Iframe holder */

#vani-flipbook-frame-holder {
position: absolute;

top: 0;
right: 0;
bottom: 0;
left: 0;

width: 100%;
height: 100%;

overflow: hidden;
}

/* Actual flipbook iframe */

#vani-flipbook-frame {
display: block;

width: 100%;
height: 100%;

margin: 0;
padding: 0;

border: 0;

background: #d9d6cf;
}

/* Close button */

.vani-flipbook-close {
position: absolute;

top: 10px;
right: 10px;

z-index: 100001;

width: 42px;
height: 42px;

padding: 0;

border: 0;
border-radius: 50%;

background:
rgba(20, 20, 20, 0.80);

color: #ffffff;

font-family:
Arial,
sans-serif;

font-size: 30px;
line-height: 42px;

text-align: center;

cursor: pointer;
}

.vani-flipbook-close:hover {
background: #000000;
}

body.vani-flipbook-open {
overflow: hidden;
}

/* Mobile */

@media (max-width: 720px) {

#vani-flipbook-overlay {
padding: 0;

width: 100%;
height: 100vh;
height: 100dvh;
}

.vani-flipbook-modal {
width: 100%;
height: 100vh;
height: 100dvh;

max-width: none;
border-radius: 0;
}

}

/* =========================================
VANIPEDIA INSPIRATION
========================================= */

/* Image */

.vision-layout-wrapper .vision-logo {
width: 100%;
text-align: center;
margin: 0 auto 22px;
}

.vision-layout-wrapper .vision-logo img {
display: block;
max-width: 350px;
height: auto;
margin: 0 auto;
}

/* Two button columns */

.vision-buttons-container {
display: flex;
width: 100%;
gap: 14px;
align-items: stretch;
}

.vision-buttons-container .vision-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
gap: 14px;
min-width: 0;
}

/* Light green buttons */

.vision-buttons-container .vision-btn {
background-color: #91cfa9;
border-bottom: 3px solid #2a4452;
border-radius: 6px;
}

.vision-buttons-container .vision-btn:hover {
background-color: #7fbd97;
}

.vision-buttons-container .vision-btn a,
.vision-buttons-container .vision-btn a.external {
color: #1f4033 !important;
}

/* Mobile */

@media (max-width: 700px) {

.vision-buttons-container {
flex-direction: column;
}
}